diff --git a/app/code/[id]/page.tsx b/app/code/[id]/page.tsx
index 139febe..28f81c0 100644
--- a/app/code/[id]/page.tsx
+++ b/app/code/[id]/page.tsx
@@ -1,4 +1,7 @@
+"use client"
+
 import Navbar from "@/components/navbar"
+import { useClerk } from "@clerk/nextjs"
 import dynamic from "next/dynamic"
 
 const CodeEditor = dynamic(() => import("@/components/editor"), {
@@ -6,11 +9,13 @@ const CodeEditor = dynamic(() => import("@/components/editor"), {
 })
 
 export default function CodePage() {
+  const clerk = useClerk()
+
   return (
     <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
       <Navbar />
       <div className="w-screen flex grow">
-        <CodeEditor />
+        {clerk.loaded ? <CodeEditor /> : null}
       </div>
     </div>
   )
diff --git a/assets/logo.png b/assets/logo.png
deleted file mode 100644
index 08b73a6..0000000
Binary files a/assets/logo.png and /dev/null differ
diff --git a/assets/logo.svg b/assets/logo.svg
index 8282526..3fec864 100644
--- a/assets/logo.svg
+++ b/assets/logo.svg
@@ -1,22 +1,27 @@
-<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"/>
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="64" height="64" rx="14" fill="#14532D"/>
+<g filter="url(#filter0_i_1_21)">
+<rect x="2" y="2" width="60" height="60" rx="12" fill="url(#paint0_linear_1_21)"/>
+<path d="M20.3125 46.6875H41.3125C42.1082 46.6875 42.8712 46.3714 43.4338 45.8088C43.9964 45.2462 44.3125 44.4832 44.3125 43.6875V24.1875L36.8125 16.6875H23.3125C22.5169 16.6875 21.7538 17.0036 21.1912 17.5662C20.6286 18.1288 20.3125 18.8919 20.3125 19.6875V25.6875" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M35.3125 16.6875V22.6875C35.3125 23.4832 35.6286 24.2462 36.1912 24.8088C36.7538 25.3714 37.5169 25.6875 38.3125 25.6875H44.3125" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.3125 31.6875C19.9147 31.6875 19.5331 31.8455 19.2518 32.1268C18.9705 32.4081 18.8125 32.7897 18.8125 33.1875V34.6875C18.8125 35.0853 18.6545 35.4669 18.3732 35.7482C18.0919 36.0295 17.7103 36.1875 17.3125 36.1875C17.7103 36.1875 18.0919 36.3455 18.3732 36.6268C18.6545 36.9081 18.8125 37.2897 18.8125 37.6875V39.1875C18.8125 39.5853 18.9705 39.9669 19.2518 40.2482C19.5331 40.5295 19.9147 40.6875 20.3125 40.6875" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.3125 40.6875C26.7103 40.6875 27.0919 40.5295 27.3732 40.2482C27.6545 39.9669 27.8125 39.5853 27.8125 39.1875V37.6875C27.8125 37.2897 27.9705 36.9081 28.2518 36.6268C28.5331 36.3455 28.9147 36.1875 29.3125 36.1875C28.9147 36.1875 28.5331 36.0295 28.2518 35.7482C27.9705 35.4669 27.8125 35.0853 27.8125 34.6875V33.1875C27.8125 32.7897 27.6545 32.4081 27.3732 32.1268C27.0919 31.8455 26.7103 31.6875 26.3125 31.6875" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
 <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"/>
+<filter id="filter0_i_1_21" x="2" y="2" width="60" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_innerShadow_1_21"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.52549 0 0 0 0 0.937255 0 0 0 0 0.67451 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1_21"/>
+</filter>
+<linearGradient id="paint0_linear_1_21" x1="32" y1="2.96774" x2="32" y2="62" gradientUnits="userSpaceOnUse">
+<stop stop-color="#16A34A"/>
+<stop offset="0.595" stop-color="#14532D"/>
 </linearGradient>
 </defs>
 </svg>
diff --git a/components/navbar/index.tsx b/components/navbar/index.tsx
index c9caa1e..d64d9ce 100644
--- a/components/navbar/index.tsx
+++ b/components/navbar/index.tsx
@@ -2,6 +2,7 @@ import Image from "next/image"
 import Logo from "@/assets/logo.svg"
 import { Input } from "../ui/input"
 import { Pencil } from "lucide-react"
+import { UserButton } from "@clerk/nextjs"
 
 export default function Navbar() {
   return (
@@ -12,11 +13,12 @@ export default function Navbar() {
         </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 cursor-pointer rounded-md">
+          <div className="h-7 w-7 ml-2 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-md">
             <Pencil className="w-4 h-4" />
           </div>
         </div>
       </div>
+      <UserButton />
     </div>
   )
 }
diff --git a/middleware.ts b/middleware.ts
index 71e2215..ea63c0f 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -5,5 +5,5 @@ export default authMiddleware({
 })
 
 export const config = {
-  matcher: ["/((?!.+.[w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
+  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
 }