diff --git a/sqlpage/templates/shell.handlebars b/sqlpage/templates/shell.handlebars
index 788cc12f..c60f7785 100644
--- a/sqlpage/templates/shell.handlebars
+++ b/sqlpage/templates/shell.handlebars
@@ -5,13 +5,13 @@
     <title>{{default title "SQLPage"}}</title>
 
     <link rel="stylesheet" href="/{{static_path 'sqlpage.css'}}">
-   {{#each (to_array css)}}
+    {{#each (to_array css)}}
         {{#if this}}
             <link rel="stylesheet" href="{{this}}">
         {{/if}}
-   {{/each}}
+    {{/each}}
 
-   {{#if font}}
+    {{#if font}}
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{font}}&display=fallback">
@@ -38,78 +38,186 @@
         <link rel="alternate" type="application/rss+xml" title="{{title}}" href="{{rss}}">
     {{/if}}
     <meta name="generator" content="SQLPage"/>
+
+    <style>
+        .scroll-transparent{
+            scrollbar-color: rgba(24, 36, 51, .16) transparent; !important;
+        }
+    </style>
+
 </head>
 
-<body class="layout-{{default layout 'boxed'}}" {{#if theme}}data-bs-theme="{{theme}}"{{/if}}>
+<body class="{{#if sidebar}}layout-horizontal{{else}}layout-{{default layout 'boxed'}}{{/if}}" {{#if theme}}data-bs-theme="{{theme}}"{{/if}}>
 <div class="page">
     {{#if title}}
-        <nav class="navbar navbar-expand-md navbar-light">
-            <div class="container-fluid">
-                <a class="navbar-brand flex-grow-1 overflow-hidden" href="{{#if link}}{{link}}{{else}}/{{/if}}">
-                    {{#if image}}
-                        <img src="{{image}}" alt="{{title}}" width="32" height="32"
-                             class="navbar-brand-image">
-                    {{/if}}
-                    {{#if icon}}
-                        {{~icon_img icon~}}
-                    {{/if}}
-                    <h1 class="mb-0 w-0 fs-2">{{title}}</h1>
-                </a>
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
-                        data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false"
-                        aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-                <div class="collapse navbar-collapse" id="navbar-menu">
-                    <ul class="navbar-nav ms-auto">
-                        {{#each (to_array menu_item)}}
-                            {{#if (eq (typeof this) 'object')}}
-                                <li class="nav-item{{#if this.submenu}} dropdown{{/if}}">
-                                <a class="nav-link {{#if this.submenu}}dropdown-toggle{{/if}}" href="{{#if this.link}}{{this.link}}{{else}}#{{/if}}"
-                                    {{#if this.submenu}}data-bs-toggle="dropdown" data-bs-auto-close="outside"{{/if}}
-                                    role="button"
-                                >
-                                    {{this.title}}
-                                </a>
-                                {{#if this.submenu}}
-                                    <div class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
-                                        {{#each this.submenu}}
-                                            <a class="dropdown-item" href="{{this.link}}">
+        {{#if sidebar}}
+            <aside class="navbar navbar-vertical navbar-expand-lg navbar-transparent scroll-transparent">
+                <div class="container-fluid">
+                    <button
+                            class="navbar-toggler collapsed" type="button"
+                            data-bs-target="#sidebar-menu"
+                            aria-controls="sidebar-menu"
+                            data-bs-toggle="collapse"
+                            aria-expanded="false"
+                            aria-label="Toggle navigation">
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
+                    <h1 class="navbar-brand navbar-brand-autodark">
+                        <a style="text-decoration: none" href="{{#if link}}{{link}}{{else}}/{{/if}}">
+<!--                            <img src="..." width="110" height="32" alt="Tabler" class="navbar-brand-image">-->
+                            {{#if image}}
+                                <img src="{{image}}" alt="{{title}}" height="32"
+                                     class="navbar-brand-image">
+                            {{/if}}
+                            {{#if icon}}
+                                {{~icon_img icon~}}
+                            {{/if}}
+                            <span class="pe-2 pe-lg-0 align-middle">{{title}}</span>
+                        </a>
+                    </h1>
+                    <div class="navbar-collapse collapse" id="sidebar-menu">
+                        {{#if search_target}}
+                            <form class="px-2" role="search" action="{{search_target}}">
+                                <div class="input-group">
+                                    <input class="form-control" type="search" placeholder="Search" aria-label="Search"
+                                           name="search">
+                                    <button class="btn" type="submit">Search</button>
+                                </div>
+                            </form>
+                        {{/if}}
+                        <ul class="navbar-nav pt-lg-3">
+                            {{#each (to_array menu_item)}}
+                                {{#if (eq (typeof this) 'object')}}
+                                    <li class="nav-item{{#if this.submenu}} dropdown{{/if}}">
+                                        <a class="nav-link {{#if this.submenu}}dropdown-toggle{{/if}}" href="{{#if this.link}}{{this.link}}{{else}}#{{/if}}"
+                                            {{#if this.submenu}}data-bs-toggle="dropdown" data-bs-auto-close="outside"{{/if}}
+                                           role="button"
+                                        >
+                                            {{#if this.icon}}
+                                                <span class="nav-link-icon d-md-none d-lg-inline-block">
+                                                    {{~icon_img icon~}}
+                                                </span>
+                                            {{/if}}
+                                            <span class="nav-link-title" >
                                                 {{this.title}}
-                                            </a>
-                                        {{/each}}
-                                    </div>
+                                            </span>
+                                        </a>
+                                        {{#if this.submenu}}
+                                            <div class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
+                                                {{#each this.submenu}}
+                                                    <a class="dropdown-item" href="{{this.link}}">
+                                                        {{#if this.icon}}
+                                                            <span class="nav-link-icon d-md-none d-lg-inline-block">
+                                                                {{~icon_img icon~}}
+                                                            </span>
+                                                        {{/if}}
+                                                        <span class="nav-link-title" >
+                                                            {{this.title}}
+                                                        </span>
+                                                    </a>
+                                                {{/each}}
+                                            </div>
+                                        {{/if}}
+                                    </li>
+                                {{else}}
+                                    <li class="nav-item">
+                                        <a class="nav-link text-capitalize" href="{{this}}.sql">
+                                            <span class="nav-link-title" >
+                                                {{this}}
+                                            </span>
+                                        </a>
+                                    </li>
                                 {{/if}}
-                                </li>
-                            {{else}}
-                                <li class="nav-item">
-                                    <a class="nav-link text-capitalize" href="{{this}}.sql">{{this}}</a>
-                                </li>
-                            {{/if}}
-                        {{/each}}
-                    </ul>
-                    {{#if search_target}}
-                        <form class="d-flex" role="search" action="{{search_target}}">
-                            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"
-                                   name="search">
-                            <button class="btn btn-outline-success" type="submit">Search</button>
-                        </form>
-                    {{/if}}
+                            {{/each}}
+                        </ul>
+                    </div>
                 </div>
-            </div>
-        </nav>
+            </aside>
+        {{else}}
+            <nav class="navbar navbar-expand-md navbar-light">
+                <div class="container-fluid">
+                    <a class="navbar-brand flex-grow-1 overflow-hidden" href="{{#if link}}{{link}}{{else}}/{{/if}}">
+                        {{#if image}}
+                            <img src="{{image}}" alt="{{title}}" width="32" height="32"
+                                 class="navbar-brand-image">
+                        {{/if}}
+                        {{#if icon}}
+                            {{~icon_img icon~}}
+                        {{/if}}
+                        <h1 class="mb-0 w-0 fs-2">{{title}}</h1>
+                    </a>
+                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                            data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false"
+                            aria-label="Toggle navigation">
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
+                    <div class="collapse navbar-collapse" id="navbar-menu">
+                        <ul class="navbar-nav ms-auto">
+                            {{#each (to_array menu_item)}}
+                                {{#if (eq (typeof this) 'object')}}
+                                    <li class="nav-item{{#if this.submenu}} dropdown{{/if}}">
+                                        <a class="nav-link {{#if this.submenu}}dropdown-toggle{{/if}}" href="{{#if this.link}}{{this.link}}{{else}}#{{/if}}"
+                                            {{#if this.submenu}}data-bs-toggle="dropdown" data-bs-auto-close="outside"{{/if}}
+                                           role="button"
+                                        >
+                                            {{this.title}}
+                                        </a>
+                                        {{#if this.submenu}}
+                                            <div class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
+                                                {{#each this.submenu}}
+                                                    <a class="dropdown-item" href="{{this.link}}">
+                                                        {{this.title}}
+                                                    </a>
+                                                {{/each}}
+                                            </div>
+                                        {{/if}}
+                                    </li>
+                                {{else}}
+                                    <li class="nav-item">
+                                        <a class="nav-link text-capitalize" href="{{this}}.sql">{{this}}</a>
+                                    </li>
+                                {{/if}}
+                            {{/each}}
+                        </ul>
+                        {{#if search_target}}
+                            <form class="d-flex" role="search" action="{{search_target}}">
+                                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"
+                                       name="search">
+                                <button class="btn btn-outline-success" type="submit">Search</button>
+                            </form>
+                        {{/if}}
+                    </div>
+                </div>
+            </nav>
+        {{/if}}
     {{/if}}
-    <main class="page-wrapper container-xl pt-3 px-md-5 px-sm-3">
-        {{~#each_row~}}{{~/each_row~}}
+    <main class="page-wrapper{{#unless sidebar}}container-xl pt-3 px-md-5 px-sm-3{{/unless}}">
+        <div class="page-body">
+            {{#if sidebar}}<div class="container-xl">{{/if}}
+                {{~#each_row~}}{{~/each_row~}}
+            {{#if sidebar}}</div>{{/if}}
+        </div>
+        {{#if sidebar}}
+            <div class="footer text-center footer-transparent d-print-none">
+                {{#if footer}}
+                    {{{markdown footer}}}
+                {{else}}
+                    <!-- You can change this footer using the 'footer' parameter of the 'shell' component -->
+                    Built with <a class="text-reset" href="https://sql.ophir.dev" title="SQLPage v{{buildinfo 'CARGO_PKG_VERSION'}}">SQLPage</a>
+                {{/if}}
+            </div>
+        {{/if}}
     </main>
 </div>
-<div class="w-100 text-center fs-6 my-2 text-secondary">
-    {{#if footer}}
-        {{{markdown footer}}}
-    {{else}}
-        <!-- You can change this footer using the 'footer' parameter of the 'shell' component -->
-        Built with <a class="text-reset" href="https://sql.ophir.dev" title="SQLPage v{{buildinfo 'CARGO_PKG_VERSION'}}">SQLPage</a>
-    {{/if}}
-</div>
+{{#unless sidebar}}
+    <div class="w-100 text-center fs-6 my-2 text-secondary">
+        {{#if footer}}
+            {{{markdown footer}}}
+        {{else}}
+            <!-- You can change this footer using the 'footer' parameter of the 'shell' component -->
+            Built with <a class="text-reset" href="https://sql.ophir.dev" title="SQLPage v{{buildinfo 'CARGO_PKG_VERSION'}}">SQLPage</a>
+        {{/if}}
+    </div>
+{{/unless}}
 </body>
-</html>
+</html>
\ No newline at end of file
