diff --git a/.app/astro/src/components/content.astro b/.app/astro/src/components/content.astro
index ca8a470..784c0ba 100644
--- a/.app/astro/src/components/content.astro
+++ b/.app/astro/src/components/content.astro
@@ -1,5 +1,5 @@
 ---
-const AllContent = await Astro.glob('../../../../content/*')
+const AllContent = await Astro.glob('../../../../content/tabs/*')
 ---
 
 <content>
diff --git a/.app/astro/src/components/sidebar.astro b/.app/astro/src/components/sidebar.astro
index 09c48a2..51f6703 100644
--- a/.app/astro/src/components/sidebar.astro
+++ b/.app/astro/src/components/sidebar.astro
@@ -1,9 +1,54 @@
 ---
-const AllTabs = await Astro.glob('../../../../content/*')
+// Configurations
+import { info, config, sidebar, tabs } from '../../../../configuration'
+
+const tabFontSize = sidebar.tabFontSize
+const tabVerticalPadding = sidebar.tabVerticalPadding
+
+// Content
+const AllTabs = await Astro.glob('../../../../content/tabs/*')
 ---
 
-<sidebar>
-    {AllTabs.map((tab) =>
-        <tab data-tab={tab.name} class:list={[tab.options]}>{tab.name}</tab>
-    )}
-</sidebar>
\ No newline at end of file
+<sidebar class:list={['sidebar-size-' + sidebar.size]}>
+    <div class:list={['sidebar-header']}>
+        <div class:list={['sidebar-header-branding']}>
+            <img style="margin-right: 8px" width="32px" src="./icon.png"/>
+            <p>{info.name}</p>
+        </div>
+        <div class:list={['sidebar-toggles']}>
+            <button enableBells={[sidebar.enableBells]}><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 0H192V51.2C119 66 64 130.6 64 208v88L0 368v48H448V368l-64-72V208c0-77.4-55-142-128-156.8V0zm32 448H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"/></svg></button>
+            <button enableToggle={[sidebar.enableToggle]} onclick="CompactTheSideBar()"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M224 80V432H464V80H224zM0 32H48 464h48V80 432v48H464 48 0V432 80 32zM64 96v48h96V96H64zm96 96H64v48h96V192zM64 288v48h96V288H64z"/></svg></button>
+        </div>
+    </div>
+    <div class:list={['sidebar-tabs', 'sidebar-layout-' + sidebar.tabPositions]}>
+        {tabs.customOrder ?
+            null
+        :
+            AllTabs.map((tab) =>
+                <tab
+                data-tab={tab.name}
+                class:list={[tab.options]}
+                ><i class:list={['fa-solid fa-' + tab.icon]}></i> {tab.name}</tab>
+            )
+        }
+    </div>
+</sidebar>
+
+<style define:vars={{ tabFontSize, tabVerticalPadding }}>
+    tab {
+        font-size: var(--tabFontSize);
+        padding-top: var(--tabVerticalPadding);
+        padding-bottom: var(--tabVerticalPadding);
+    }
+</style>
+
+<script is:raw>
+    function CompactTheSideBar() {
+        document.querySelector('sidebar').setAttribute('class', 'sidebar-size-compact')
+        document.querySelector('.sidebar-toggles > button:nth-child(2)').setAttribute('onclick', 'DontComactTheSideBar()')
+    }
+    function DontComactTheSideBar() {
+        document.querySelector('sidebar').setAttribute('class', 'sidebar-size-normal')
+        document.querySelector('.sidebar-toggles > button:nth-child(2)').setAttribute('onclick', 'CompactTheSideBar()')
+    }
+</script>
\ No newline at end of file
diff --git a/content/sample.astro b/content/sample.astro
deleted file mode 100644
index b0d31be..0000000
--- a/content/sample.astro
+++ /dev/null
@@ -1,4 +0,0 @@
----
-export const name = 'Sample'
-export const options = 'active'
----
\ No newline at end of file