diff --git a/.assets/Export.svg b/.assets/Export.svg
new file mode 100644
index 00000000..4e51c0a3
--- /dev/null
+++ b/.assets/Export.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#000" fill-rule="evenodd" d="M23.04 24H.96a.959.959 0 0 1-.96-.96V.96C0 .429.429 0 .96 0h10.8a.24.24 0 0 1 .24.24v1.68a.24.24 0 0 1-.24.24h-9.6v19.68h19.68v-9.6a.24.24 0 0 1 .24-.24h1.68a.24.24 0 0 1 .24.24v10.8c0 .531-.429.96-.96.96ZM19.766 2.614 18.2 1.048a.24.24 0 0 1 .141-.408l5.382-.63a.24.24 0 0 1 .267.267l-.63 5.382a.24.24 0 0 1-.408.14l-1.572-1.57-7.686 7.686a.24.24 0 0 1-.339 0l-1.272-1.272a.24.24 0 0 1 0-.34l7.683-7.688Z" clip-rule="evenodd"/>
+</svg>
diff --git a/.assets/Settings.svg b/.assets/Settings.svg
new file mode 100644
index 00000000..c0c1a2a5
--- /dev/null
+++ b/.assets/Settings.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" fill="none" viewBox="0 0 25 24">
+  <path fill="#000" d="m8.76 24-.48-3.84c-.26-.1-.505-.22-.736-.36-.23-.14-.455-.29-.674-.45l-3.57 1.5-3.3-5.7 3.09-2.34c-.02-.14-.03-.275-.03-.406v-.808c0-.13.01-.266.03-.406L0 8.85l3.3-5.7 3.57 1.5c.22-.16.45-.31.69-.45.24-.14.48-.26.72-.36L8.76 0h6.6l.48 3.84c.26.1.505.22.736.36.23.14.455.29.674.45l3.57-1.5 3.3 5.7-3.09 2.34c.02.14.03.275.03.406v.808c0 .13-.02.266-.06.406l3.09 2.34-3.3 5.7-3.54-1.5c-.22.16-.45.31-.69.45-.24.14-.48.26-.72.36L15.36 24h-6.6Zm3.36-7.8c1.16 0 2.15-.41 2.97-1.23.82-.82 1.23-1.81 1.23-2.97 0-1.16-.41-2.15-1.23-2.97-.82-.82-1.81-1.23-2.97-1.23-1.18 0-2.175.41-2.986 1.23-.81.82-1.215 1.81-1.214 2.97 0 1.16.405 2.15 1.214 2.97.81.82 1.805 1.23 2.986 1.23Z"/>
+</svg>
diff --git a/src/App/App.tsx b/src/App/App.tsx
index ce402946..2202c683 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -24,6 +24,8 @@ import { EditorBar } from "../EditorBar/EditorBar";
 import { Parameters, ParametersType } from "../Parameters/Parameters";
 import { Login, supabase } from "../Login/Login";
 import { Axes } from "../Viewer/objects/Axes";
+import { Upgrade } from "../Upgrade/Upgrade";
+import { Export } from "../Export/Export";
 
 export const staging = localStorage.getItem("staging") ? true : false;
 
@@ -272,21 +274,23 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;
 
       <Login />
 
+
+      
       <Viewer gridSize={settings.gridSize}>
         <Grid
           position={[0.5 * settings.gridSize, 0.5 * settings.gridSize, 0]}
           size={settings.gridSize}
-        />
+          />
         <Axes position={[0, 0, 0]} size={0.07 * settings.gridSize} />
 
         <Show when={settings.nodes}>
           <Index each={nodes()}>
             {(node) => (
               <Node
-                position={node()}
-                size={0.04 * settings.gridSize * displayScale()}
+              position={node()}
+              size={0.04 * settings.gridSize * displayScale()}
               />
-            )}
+              )}
           </Index>
         </Show>
 
@@ -294,10 +298,10 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;
           <Index each={elements()}>
             {(element) => (
               <Element
-                start={nodes()[element()[0]]}
-                end={nodes()[element()[1]]}
+              start={nodes()[element()[0]]}
+              end={nodes()[element()[1]]}
               />
-            )}
+              )}
           </Index>
         </Show>
 
@@ -305,11 +309,11 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;
           <Index each={nodes()}>
             {(node, index) => (
               <Text
-                text={`${index}`}
-                position={node()}
-                size={0.04 * settings.gridSize * displayScale()}
+              text={`${index}`}
+              position={node()}
+              size={0.04 * settings.gridSize * displayScale()}
               />
-            )}
+              )}
           </Index>
         </Show>
 
@@ -317,14 +321,14 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;
           <Index each={elements()}>
             {(element, index) => (
               <Text
-                text={`${index}`}
-                position={computeCenter(
-                  nodes()[element()[0]],
-                  nodes()[element()[1]]
+              text={`${index}`}
+              position={computeCenter(
+                nodes()[element()[0]],
+                nodes()[element()[1]]
                 )}
                 size={0.04 * settings.gridSize * displayScale()}
-              />
-            )}
+                />
+                )}
           </Index>
         </Show>
 
@@ -332,11 +336,11 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;
           <Index each={nodeSupports()}>
             {(support) => (
               <NodeSupport
-                position={nodes()[(support() as any).node]}
-                support={(support() as any).support}
-                size={0.04 * settings.gridSize * displayScale()}
+              position={nodes()[(support() as any).node]}
+              support={(support() as any).support}
+              size={0.04 * settings.gridSize * displayScale()}
               />
-            )}
+              )}
           </Index>
         </Show>
 
@@ -344,11 +348,11 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;
           <Index each={nodeLoads()}>
             {(pointLoad) => (
               <NodeLoad
-                position={nodes()[(pointLoad() as any).node]}
-                load={(pointLoad() as any).load}
-                size={0.07 * settings.gridSize * displayScale()}
+              position={nodes()[(pointLoad() as any).node]}
+              load={(pointLoad() as any).load}
+              size={0.07 * settings.gridSize * displayScale()}
               />
-            )}
+              )}
           </Index>
         </Show>
 
@@ -365,7 +369,7 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;
                     (elementResult() as any)[settings.elementResults][0] || 0
                   }
                   size={0.04 * settings.gridSize * displayScale()}
-                />
+                  />
               </Show>
             )}
           </Index>
@@ -381,21 +385,25 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;
                     (nodeResult() as any)[settings.nodeResults] || [0, 0, 0]
                   }
                   size={0.07 * settings.gridSize * displayScale()}
-                />
+                  />
               </Show>
             )}
           </Index>
         </Show>
       </Viewer>
-
+     
+    
       <Settings settings={settings} />
-
+      <Export/>
+      
+    
+      
       <Parameters
         parameters={parameters()}
         onChange={(e) =>
           solveModel({ key: (e.target as any).tag, value: e.value })
         }
-      />
+        />
     </Layouter>
   );
 }
diff --git a/src/Export/Export.tsx b/src/Export/Export.tsx
new file mode 100644
index 00000000..051a661d
--- /dev/null
+++ b/src/Export/Export.tsx
@@ -0,0 +1,87 @@
+import { Show, createSignal, onMount } from "solid-js";
+export function Export() {
+
+function  onExport(event:Event){
+event.preventDefault();
+  }
+
+  return (
+    <>
+      {/* @ts-ignore */}
+      <button onclick="ExportModal.showModal()"
+        class="btn btn-xs btn-neutral absolute top-1 right-5 rounded-md "
+      >
+        Export
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="currentColor"
+            d="M23.04 24H.96a.959.959 0 0 1-.96-.96V.96C0 .429.429 0 .96 0h10.8a.24.24 0 0 1 .24.24v1.68a.24.24 0 0 1-.24.24h-9.6v19.68h19.68v-9.6a.24.24 0 0 1 .24-.24h1.68a.24.24 0 0 1 .24.24v10.8c0 .531-.429.96-.96.96ZM19.766 2.614 18.2 1.048a.24.24 0 0 1 .141-.408l5.382-.63a.24.24 0 0 1 .267.267l-.63 5.382a.24.24 0 0 1-.408.14l-1.572-1.57-7.686 7.686a.24.24 0 0 1-.339 0l-1.272-1.272a.24.24 0 0 1 0-.34l7.683-7.688Z"
+          />
+        </svg>
+      </button>
+
+      <dialog id="ExportModal" class="modal ">
+        <form method="dialog" class="w-8/12 modal-box  max-w-2xl">
+          <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
+            ✕
+          </button>
+
+          <label class="form-control w-full max-w-xs">
+            <div class="label">
+              <span class="label-text">File Name:</span>
+            </div>
+            <input
+              type="text"
+              placeholder="Type here"
+              class="input input-bordered w-full max-w-xs"
+            />
+          </label>
+
+  <div class="form-control">
+
+ 
+          <div class="label">
+              <span class="label-text">File Type:</span>
+            </div>
+            <label class="label cursor-pointer justify-start m-2">
+              <input
+                type="radio"
+                name="radio-10"
+                class="radio checked:bg-blue-500 mr-2"
+                checked
+              />
+              <span class="label-text">JSON</span>
+            </label>
+                
+            <label class="label cursor-pointer justify-start m-2">
+              <input
+                type="radio"
+                name="radio-10"
+                class="radio checked:bg-blue-500 mr-2"
+                checked
+              />
+              <span class="label-text">IFC</span>
+            </label>
+
+            </div>
+            <div class="flex justify-end">
+
+         
+            <label onClick={(e)=>onExport(e)} class="btn btn-sm btn-primary ">
+            Export
+          </label>
+          </div>
+        </form>
+        <form method="dialog" class="modal-backdrop">
+          <button />
+        </form>
+      </dialog>
+    </>
+  );
+}
diff --git a/src/Layouter/Layouter.tsx b/src/Layouter/Layouter.tsx
index 8f094e15..cd9dd414 100644
--- a/src/Layouter/Layouter.tsx
+++ b/src/Layouter/Layouter.tsx
@@ -69,9 +69,8 @@ export function Layouter(props: LayouterProps) {
               ref={resizerHorizontal!}
             ></div>
             <div class="relative flex-1 min-w-[350px]">
-              {c[3]}
-              {c[4]}
-              {c[5]}
+             {c.slice(2)}
+         
             </div>
           </>
         }