diff --git a/public/index.html b/public/index.html
index aa069f2..4db4501 100644
--- a/public/index.html
+++ b/public/index.html
@@ -39,5 +39,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="https://kit.fontawesome.com/e35edcd75e.js" crossorigin="anonymous"></script>
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
index e945496..9aee979 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,27 +1,10 @@
-import Diagram from "./diagram";
-import { ResizableBox } from "react-resizable";
-import "react-resizable/css/styles.css";
+import Editor from "./editor";
 
 function App() {
   return (
-    <div className="flex">
-      <ResizableBox
-        width={window.innerWidth * 0.2}
-        height={window.innerHeight}
-        resizeHandles={["e"]}
-        minConstraints={[window.innerWidth * 0.2, window.innerHeight]}
-        axis="x"
-      >
-        <span className="text">window 1</span>
-      </ResizableBox>
-      <ResizableBox
-        width={window.innerWidth * 0.8}
-        height={window.innerHeight}
-        resizeHandles={[]}
-      >
-        <Diagram />
-      </ResizableBox>
-    </div>
+    <>
+      <Editor name="Untitled"/>
+    </>
   );
 }
 
diff --git a/src/assets/blank_pfp.webp b/src/assets/blank_pfp.webp
new file mode 100644
index 0000000..f177a45
Binary files /dev/null and b/src/assets/blank_pfp.webp differ
diff --git a/src/assets/logo_36.png b/src/assets/logo_36.png
new file mode 100644
index 0000000..34cac8f
Binary files /dev/null and b/src/assets/logo_36.png differ
diff --git a/src/assets/logo_48.png b/src/assets/logo_48.png
new file mode 100644
index 0000000..ac583ac
Binary files /dev/null and b/src/assets/logo_48.png differ
diff --git a/src/assets/logo_80.png b/src/assets/logo_80.png
new file mode 100644
index 0000000..95eb36c
Binary files /dev/null and b/src/assets/logo_80.png differ
diff --git a/src/diagram/index.jsx b/src/components/diagram/index.jsx
similarity index 96%
rename from src/diagram/index.jsx
rename to src/components/diagram/index.jsx
index 8ad0cb0..7871a9e 100644
--- a/src/diagram/index.jsx
+++ b/src/components/diagram/index.jsx
@@ -13,7 +13,7 @@ function Diagram() {
         color: "#F1F92A",
       },
       model: graph,
-      height: window.innerHeight,
+      height: "100%",
       width: "100%",
       gridSize: 1,
       interactive: true,
diff --git a/src/components/header/index.css b/src/components/header/index.css
new file mode 100644
index 0000000..7103b37
--- /dev/null
+++ b/src/components/header/index.css
@@ -0,0 +1,3 @@
+.bg-blue{
+    background-color: #124559;
+}
diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx
new file mode 100644
index 0000000..021994f
--- /dev/null
+++ b/src/components/header/index.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import blank_pfp from "../../assets/blank_pfp.webp";
+import logo from "../../assets/logo_80.png";
+import "./index.css";
+
+export default function Header(props) {
+  return (
+    <nav className="flex justify-between py-4 bg-blue text-white items-center">
+      <img width={142} src={logo} alt="logo" className="ms-5" />
+      <div className="text-xl">{props.name}</div>
+      <div className="flex justify-around items-center text-md me-5">
+        <button className="me-4 border px-3 py-1 rounded-lg">
+          <i class="fa-solid fa-lock me-2"></i>Share
+        </button>
+        <img src={blank_pfp} alt="profile" className="rounded-full h-10 w-10" />
+      </div>
+    </nav>
+  );
+}
diff --git a/src/editor/index.jsx b/src/editor/index.jsx
new file mode 100644
index 0000000..0e7cc96
--- /dev/null
+++ b/src/editor/index.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+import Diagram from "../components/diagram";
+import { ResizableBox } from "react-resizable";
+import "react-resizable/css/styles.css";
+import Header from "../components/header";
+
+export default function Editor(props) {
+  return (
+    <>
+      <Header name={props.name} />
+      <div className="flex">
+        <ResizableBox
+          width={window.innerWidth * 0.2}
+          height={window.innerHeight}
+          resizeHandles={["e"]}
+          minConstraints={[window.innerWidth * 0.2, window.innerHeight]}
+          maxConstraints={[Infinity, Infinity]}
+          axis="x"
+        >
+          <span className="text">window 1</span>
+        </ResizableBox>
+        <div>
+          <Diagram />
+        </div>
+        <div>hi</div>
+      </div>
+    </>
+  );
+}