diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 77b004d..c16338e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -43,24 +43,26 @@ const RootLayout = ({
     children: ReactNode;
 }>): ReactElement => (
     <html lang="en">
-        <body
-            className="scroll-smooth antialiased"
-            style={{
-                background: "var(--background-gradient)",
-            }}
-        >
+        <body className="scroll-smooth antialiased">
             <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
                 <TooltipProvider delayDuration={100}>
-                    <div className="px-7 max-w-[90rem] mx-auto min-h-screen flex flex-col">
-                        <Navbar />
-                        <div className="pt-[4.5rem] w-full h-full flex flex-grow gap-5">
-                            <div className="relative hidden xs:flex">
-                                <Sidebar />
+                    <div
+                        className="min-h-screen flex flex-col"
+                        style={{
+                            background: "var(--background-gradient)",
+                        }}
+                    >
+                        <div className="px-3 sm:px-7 max-w-[90rem] mx-auto flex flex-col transition-all">
+                            <Navbar />
+                            <div className="pt-[4.5rem] w-full h-full flex flex-grow gap-5">
+                                <div className="relative hidden xs:flex">
+                                    <Sidebar />
+                                </div>
+                                {children}
                             </div>
-                            {children}
                         </div>
+                        <Footer />
                     </div>
-                    <Footer />
                 </TooltipProvider>
             </ThemeProvider>
         </body>
diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx
index 058f1d7..5eae321 100644
--- a/src/components/navbar/navbar.tsx
+++ b/src/components/navbar/navbar.tsx
@@ -9,7 +9,7 @@ const Navbar = (): ReactElement => {
     const pages: DocsContentMetadata[] = getDocsContent();
     return (
         <nav className="fixed left-0 inset-x-0 bg-white/[0.007] backdrop-saturate-100 backdrop-blur-xl border-b z-50">
-            <div className="px-7 max-w-[90rem] mx-auto py-4 flex justify-between items-center">
+            <div className="px-3 sm:px-7 max-w-[90rem] mx-auto py-4 flex justify-between items-center transition-all transform-gpu">
                 {/* Branding */}
                 <Link
                     className="flex gap-1 items-end hover:opacity-75 transition-all transform-gpu select-none"
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
index 9497ee3..eb66190 100644
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/sidebar/sidebar.tsx
@@ -15,7 +15,7 @@ const Sidebar = (): ReactElement => (
                 <SheetTrigger className="flex items-center">
                     <Bars3BottomRightIcon className="w-6 h-6" />
                 </SheetTrigger>
-                <SheetContent className="h-full px-11 pt-10" side="top">
+                <SheetContent className="h-full px-5 pt-11" side="right">
                     <SidebarContent />
                 </SheetContent>
             </Sheet>
