diff --git a/web/app/docs/installation/page.tsx b/web/app/docs/installation/page.tsx
index e245d04..2b2e74c 100644
--- a/web/app/docs/installation/page.tsx
+++ b/web/app/docs/installation/page.tsx
@@ -11,17 +11,20 @@ export default function InstallationPage() {
 
       <h2 className="text-2xl font-semibold mt-8 mb-4">Installation</h2>
       <p className="mb-4">To install ProxMenux, simply run the following command in your Proxmox server terminal:</p>
-      <CopyableCode code={installationCode} />
+      
+      <div className="overflow-x-auto max-w-full">
+        <CopyableCode code={installationCode} />
+      </div>
 
       <h2 className="text-2xl font-semibold mt-8 mb-4">How to Use</h2>
       <p className="mb-4">
         Once installed, launch <strong>ProxMenux</strong> by running:
       </p>
-      <CopyableCode code="menu" />
-        <br />
-        <br />
-        <br />
-        <br />
+      
+      <div className="overflow-x-auto max-w-full">
+        <CopyableCode code="menu" />
+      </div>
+
       <h2 className="text-2xl font-semibold mt-8 mb-4">Troubleshooting</h2>
       <p className="mb-4">
         If you encounter any issues during installation or usage, please check the{" "}
@@ -33,4 +36,3 @@ export default function InstallationPage() {
     </div>
   )
 }
-
diff --git a/web/app/docs/layout.tsx b/web/app/docs/layout.tsx
index df5e869..a1bc885 100644
--- a/web/app/docs/layout.tsx
+++ b/web/app/docs/layout.tsx
@@ -1,15 +1,15 @@
-import type React from "react"
 import DocSidebar from "@/components/DocSidebar"
-import Footer from "@/components/footer"
+import type React from "react"
 
-export default function DocsLayout({ children }: { children: React.ReactNode }) {
+export default function DocsLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
   return (
-    <div className="flex flex-col min-h-screen bg-white text-gray-900">
-      <div className="flex flex-col md:flex-row flex-1">
-        <DocSidebar />
-        <main className="flex-1 p-4 md:p-6">{children}</main>
-      </div>
-      <Footer />
+    <div className="flex flex-col md:flex-row min-h-screen pt-40 md:pt-16">
+      <DocSidebar />
+      <main className="flex-1 p-4 md:p-6 mt-4 md:mt-0">{children}</main>
     </div>
   )
 }
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 8117606..d3f878f 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -66,10 +66,7 @@ export default function RootLayout({
       <body className={`${inter.className} bg-background text-foreground antialiased`}>
         <Navbar />
         <MouseMoveEffect />
-        <div className="flex flex-col md:flex-row min-h-screen pt-28 md:pt-16">
-          <DocSidebar />
-          <main className="flex-1 p-4 md:p-6">{children}</main>
-        </div>
+        <div className="pt-16 md:pt-16">{children}</div>
       </body>
     </html>
   )
