diff --git a/app/code/[id]/page.tsx b/app/code/[id]/page.tsx
new file mode 100644
index 0000000..3d1887a
--- /dev/null
+++ b/app/code/[id]/page.tsx
@@ -0,0 +1,18 @@
+import Navbar from "@/components/navbar"
+import dynamic from "next/dynamic"
+import Image from "next/image"
+
+const CodeEditor = dynamic(() => import("@/components/editor"), {
+  ssr: false,
+})
+
+export default function CodePage() {
+  return (
+    <div className="w-screen flex flex-col h-screen bg-background">
+      <Navbar />
+      <div className="w-screen flex grow">
+        <CodeEditor />
+      </div>
+    </div>
+  )
+}
diff --git a/app/code/page.tsx b/app/code/page.tsx
new file mode 100644
index 0000000..0206b35
--- /dev/null
+++ b/app/code/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation"
+
+export default function Page() {
+  redirect("/")
+}
diff --git a/app/page.tsx b/app/page.tsx
index 43a025b..8cd6282 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,18 +1,8 @@
 import Navbar from "@/components/navbar"
 import dynamic from "next/dynamic"
-import Image from "next/image"
-
-const CodeEditor = dynamic(() => import("@/components/editor"), {
-  ssr: false,
-})
 
 export default function Home() {
   return (
-    <div className="w-screen flex flex-col h-screen bg-background">
-      <Navbar />
-      <div className="w-screen flex grow">
-        <CodeEditor />
-      </div>
-    </div>
+    <div className="w-screen flex flex-col h-screen bg-background">test</div>
   )
 }
diff --git a/assets/logo.png b/assets/logo.png
new file mode 100644
index 0000000..08b73a6
Binary files /dev/null and b/assets/logo.png differ
diff --git a/assets/logo.svg b/assets/logo.svg
new file mode 100644
index 0000000..8282526
--- /dev/null
+++ b/assets/logo.svg
@@ -0,0 +1,22 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="512" height="512" rx="100" fill="url(#paint0_linear_1_21)"/>
+<rect x="8" y="8" width="496" height="496" rx="94" fill="url(#paint1_linear_1_21)"/>
+<path d="M150.5 388.5H339.5C346.661 388.5 353.528 385.655 358.592 380.592C363.655 375.529 366.5 368.661 366.5 361.5V186L299 118.5H177.5C170.339 118.5 163.472 121.345 158.408 126.408C153.345 131.472 150.5 138.339 150.5 145.5V199.5" stroke="white" stroke-width="16.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M285.5 118.5V172.5C285.5 179.661 288.345 186.528 293.408 191.592C298.472 196.655 305.339 199.5 312.5 199.5H366.5" stroke="white" stroke-width="16.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M150.5 253.5C146.92 253.5 143.486 254.922 140.954 257.454C138.422 259.986 137 263.42 137 267V280.5C137 284.08 135.578 287.514 133.046 290.046C130.514 292.578 127.08 294 123.5 294C127.08 294 130.514 295.422 133.046 297.954C135.578 300.486 137 303.92 137 307.5V321C137 324.58 138.422 328.014 140.954 330.546C143.486 333.078 146.92 334.5 150.5 334.5" stroke="white" stroke-width="16.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M204.5 334.5C208.08 334.5 211.514 333.078 214.046 330.546C216.578 328.014 218 324.58 218 321V307.5C218 303.92 219.422 300.486 221.954 297.954C224.486 295.422 227.92 294 231.5 294C227.92 294 224.486 292.578 221.954 290.046C219.422 287.514 218 284.08 218 280.5V267C218 263.42 216.578 259.986 214.046 257.454C211.514 254.922 208.08 253.5 204.5 253.5" stroke="white" stroke-width="16.2" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1_21" x1="423.5" y1="-1.73873e-05" x2="169" y2="497" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.075" stop-color="#5F5F5F"/>
+<stop offset="0.89" stop-color="#3F3F3F"/>
+<stop offset="1" stop-color="#6A6A6A"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1_21" x1="418.266" y1="7.99999" x2="256" y2="504" gradientUnits="userSpaceOnUse">
+<stop stop-color="#393939"/>
+<stop offset="0.08" stop-color="#282828"/>
+<stop offset="0.5" stop-color="#191919"/>
+<stop offset="1" stop-color="#0D0D0D"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/components/editor/index.tsx b/components/editor/index.tsx
index d6b6aae..b308a51 100644
--- a/components/editor/index.tsx
+++ b/components/editor/index.tsx
@@ -82,6 +82,16 @@ export default function CodeEditor() {
               height="100%"
               defaultLanguage="typescript"
               onMount={handleEditorMount}
+              options={{
+                minimap: {
+                  enabled: false,
+                },
+                padding: {
+                  bottom: 4,
+                  top: 4,
+                },
+                scrollBeyondLastLine: false,
+              }}
               theme="vs-dark"
             />
           </div>
diff --git a/components/navbar/index.tsx b/components/navbar/index.tsx
index 54eb114..bd8be9c 100644
--- a/components/navbar/index.tsx
+++ b/components/navbar/index.tsx
@@ -1,13 +1,21 @@
-import { ChevronLeft, Home } from "lucide-react"
-import { Button } from "../ui/button"
+import Image from "next/image"
+import Logo from "@/assets/logo.svg"
+import { Input } from "../ui/input"
+import { Pencil } from "lucide-react"
 
 export default function Navbar() {
   return (
-    <div className="h-12 px-2 w-full flex items-center justify-between">
-      <div className="flex items-center">
-        <Button variant="outline">
-          <ChevronLeft className="w-4 h-4 mr-2" /> Go Home
-        </Button>
+    <div className="h-14 px-2 w-full flex items-center justify-between border-b border-border">
+      <div className="flex items-center space-x-4">
+        <button className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm">
+          <Image src={Logo} alt="Logo" width={36} height={36} />
+        </button>
+        <div className="text-sm font-medium flex items-center">
+          My React Project{" "}
+          <div className="h-7 w-7 ml-1 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-md">
+            <Pencil className="w-4 h-4" />
+          </div>
+        </div>
       </div>
     </div>
   )
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
new file mode 100644
index 0000000..a92b8e0
--- /dev/null
+++ b/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/components/ui/tab.tsx b/components/ui/tab.tsx
index 11ca1df..b791d13 100644
--- a/components/ui/tab.tsx
+++ b/components/ui/tab.tsx
@@ -22,7 +22,7 @@ export default function Tab({
       {children}
       <div
         onClick={onClose ?? undefined}
-        className=" p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm"
+        className="h-5 w-5 ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm"
       >
         <X className="w-3 h-3" />
       </div>