diff --git a/client-solid/src/Navbar.tsx b/client-solid/src/Navbar.tsx
index ac6675d..a862e1e 100644
--- a/client-solid/src/Navbar.tsx
+++ b/client-solid/src/Navbar.tsx
@@ -18,7 +18,7 @@ function MenuItem(props: { href: string; children: JSXElement }): JSXElement {
 function Menu(): JSXElement {
   const login_ctx = useContext(LoginContext);
   return (
-    <ul class="menu md:menu-horizontal rounded-box">
+    <ul class="menu md:menu-horizontal space-y-2 md:space-x-2 md:space-y-0 rounded-box">
       <MenuItem href="/">Home</MenuItem>
       {login_ctx?.token() != "" && <MenuItem href="/new">New Post</MenuItem>}
     </ul>
@@ -54,7 +54,7 @@ export function Navbar(): JSXElement {
   };
 
   return (
-    <div class="navbar text-neutral-content max-w-3xl max-w rounded-box my-4">
+    <div class="navbar text-neutral-content max-w-3xl max-w rounded-box md:my-4">
       <div class="flex-1">
         <A href={"/"} class="btn btn-ghost normal-case text-xl">
           FrostByte
diff --git a/client-solid/src/Root.tsx b/client-solid/src/Root.tsx
index 8343ae2..7d04539 100644
--- a/client-solid/src/Root.tsx
+++ b/client-solid/src/Root.tsx
@@ -44,7 +44,7 @@ function Root(): JSXElement {
           <div class="flex flex-col items-center">
             <Navbar />
             <LoginModal />
-            <div class="flex flex-col items-center w-full md:w-96 px-2 space-y-2">
+            <div class="flex flex-col items-center w-full md:max-w-3xl px-2 space-y-2">
               <Primary />
             </div>
           </div>