diff --git a/src/config/docs.json b/src/config/docs.json
index c7c93b0..ad9d961 100644
--- a/src/config/docs.json
+++ b/src/config/docs.json
@@ -5,7 +5,7 @@
       "header": true
     },
     {
-      "text": "Installation",
+      "text": "Installation Guide",
       "link": "/docs/get-started/installation"
     },
     {
diff --git a/src/content/docs/get-started/installation.md b/src/content/docs/get-started/installation.md
index ef88e4d..d9a6df6 100644
--- a/src/content/docs/get-started/installation.md
+++ b/src/content/docs/get-started/installation.md
@@ -1,5 +1,5 @@
 ---
-title: Installation
+title: Installation Guide
 ---
 
 ## A header
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index e3eeaaf..8b53e08 100755
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -1,6 +1,5 @@
 ---
 import config from "@/config/config.json";
-import theme from "@/config/theme.json";
 import { plainify } from "@/lib/utils/textConverter";
 import Footer from "@/components/Footer.astro";
 import Header from "@/components/Header.astro";
diff --git a/src/layouts/DocSingle.astro b/src/layouts/DocSingle.astro
index e27a9be..6853c86 100644
--- a/src/layouts/DocSingle.astro
+++ b/src/layouts/DocSingle.astro
@@ -11,15 +11,15 @@ const currentPage = new URL(Astro.request.url).pathname;
 <section class="section pt-7">
   <div class="container">
     <div class="row justify-center">
-      <div class="grid grid-cols-12">
+      <div class="flex">
         <!-- Document Browser (Left) -->
-        <div class="col-span-3 sticky top-0 h-screen flex">
+        <div class="col-3 sticky top-0 h-screen flex ml-auto">
           <div class="ml-auto">
             <DocBrowser currentPage={currentPage} />
           </div>
         </div>
         <!-- Content -->
-        <main class="py-4 px-8 pb-32 col-span-6  overflow-auto">
+        <main class="py-4 col-9 lg:col-6 overflow-auto">
           <article>
             <h1 class="mb-4">{ title }</h1>
             <div class="content mb-10">
@@ -28,8 +28,10 @@ const currentPage = new URL(Astro.request.url).pathname;
           </article>
         </main>
         <!-- Document Contents (Right) -->
-        <div class="col-span-3 sticky top-0 h-screen flex">
-          <DocContents headings={headings} />
+        <div class="col-3 sticky top-0 h-screen flex invisible lg:visible">
+          <div>
+            <DocContents headings={ headings } />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/layouts/components/DocBrowser.astro b/src/layouts/components/DocBrowser.astro
index 1a82ce2..bcb7789 100644
--- a/src/layouts/components/DocBrowser.astro
+++ b/src/layouts/components/DocBrowser.astro
@@ -30,8 +30,8 @@ export interface doc_data {
 const { main }: { main: doc_data[] } = docs;
 ---
 
-<nav aria-labelledby="grid-left" class="border-r">
-  <div class="mx-4 my-16">
+<nav class="max-h-screen overflow-y-auto mx-8 border-r border-light dark:border-darkmode-light">
+  <div class="mx-4 my-8">
     <ul>
       {
         main.map((item) =>
diff --git a/src/layouts/components/DocContents.astro b/src/layouts/components/DocContents.astro
index 9471641..c0234fd 100644
--- a/src/layouts/components/DocContents.astro
+++ b/src/layouts/components/DocContents.astro
@@ -2,8 +2,8 @@
 const { headings } = Astro.props;
 ---
 
-<nav aria-labelledby="grid-right">
-  <div class="mx-4 my-16">
+<nav class="max-h-screen overflow-y-auto mx-8 border-l border-light dark:border-darkmode-light">
+  <div class="mx-4 my-8">
     <h3 class="my-4">On This Page</h3>
     {
       headings &&