diff --git a/wretched-machines-frontend/src/components/ui/navbar.tsx b/wretched-machines-frontend/src/components/ui/navbar.tsx
index 92c98e0..7dd5f57 100644
--- a/wretched-machines-frontend/src/components/ui/navbar.tsx
+++ b/wretched-machines-frontend/src/components/ui/navbar.tsx
@@ -1,24 +1,32 @@
 import Link from "next/link";
 import { cn } from "@/lib/utils"
 
+
+const Break = ()=> <hr className={cn("w-100")}></hr>
+
 const Navbar = () => {
     return (
-        <div className={cn("flex h-20 bg-gray-800 text-white justify-around opacity-100 items-center")}>
-            <Link href="/">
-                <div>Home</div>
-            </Link>
-            <Link href="/blog">
-                <div>Blog</div>
-            </Link>
-            <Link href="/tools">
-                <div>Tools</div>
-            </Link>
-            <Link href="/demos">
-                <div>Demos</div>
-            </Link>
-            <Link href="/login">
-                <div>Login</div>
-            </Link>
+        <div className={cn("bg-gray-800 pt-1 pb-1")}>
+            <Break/>
+            <div className={cn("flex h-20 bg-gray-800 text-white justify-around opacity-100 items-center")}>
+                <Link href="/">
+                    <div>Home</div>
+                </Link>
+                <Link href="/blog">
+                    <div>Blog</div>
+                </Link>
+                <Link href="/tools">
+                    <div>Tools</div>
+                </Link>
+                <Link href="/demos">
+                    <div>Demos</div>
+                </Link>
+                <Link href="/login">
+                    <div>Login</div>
+                </Link>
+                <br></br>
+            </div>
+            <Break/>
         </div>
     );
 }