diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index 3db9614..b21e34d 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -15,6 +15,18 @@
                 "showReuseMessage": false
             }
         },
+        {
+            "label": "Astro Build",
+            "type": "shell",
+            "group": "build",
+            "command": "npm run build",
+            "presentation": {
+                "reveal": "always",
+                "focus": true,
+                "panel": "dedicated",
+                "clear": true
+            }
+        },
         {
             "label": "Prettify All Files",
             "type": "shell",
@@ -33,6 +45,14 @@
             "presentation": {
                 "showReuseMessage": false
             }
+        },
+        {
+            "label": "Delete old Git branches",
+            "type": "shell",
+            "command": "git fetch --prune && git fetch -p ; git branch -r | awk '{print $1}' | egrep -v -f /dev/fd/0 <(git branch -vv | grep origin) | awk '{print $1}' | xargs git branch -D",
+            "presentation": {
+                "showReuseMessage": false
+            }
         }
     ]
 }
diff --git a/package-lock.json b/package-lock.json
index 2c982b1..0e50a93 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1359,9 +1359,9 @@
             }
         },
         "node_modules/@types/node": {
-            "version": "22.15.19",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.19.tgz",
-            "integrity": "sha512-3vMNr4TzNQyjHcRZadojpRaD9Ofr6LsonZAoQ+HMUa/9ORTPoxVIw0e0mpqWpdjj8xybyCM+oKOUH2vwFu/oEw==",
+            "version": "22.15.21",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.21.tgz",
+            "integrity": "sha512-EV/37Td6c+MgKAbkcLG6vqZ2zEYHD7bvSrzqqs2RIhbA6w3x+Dqz8MZM3sP6kGTeLrdoOgKZe+Xja7tUB2DNkQ==",
             "license": "MIT",
             "dependencies": {
                 "undici-types": "~6.21.0"
@@ -4664,9 +4664,9 @@
             }
         },
         "node_modules/tsconfck": {
-            "version": "3.1.5",
-            "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.5.tgz",
-            "integrity": "sha512-CLDfGgUp7XPswWnezWwsCRxNmgQjhYq3VXHM0/XIRxhVrKw0M1if9agzryh1QS3nxjCROvV+xWxoJO1YctzzWg==",
+            "version": "3.1.6",
+            "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.6.tgz",
+            "integrity": "sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==",
             "license": "MIT",
             "bin": {
                 "tsconfck": "bin/tsconfck.js"
@@ -5295,9 +5295,9 @@
             }
         },
         "node_modules/zod": {
-            "version": "3.25.3",
-            "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.3.tgz",
-            "integrity": "sha512-VGZqnyYNrl8JpEJRZaFPqeVNIuqgXNu4cXZ5cOb6zEUO1OxKbRnWB4UdDIXMmiERWncs0yDQukssHov8JUxykQ==",
+            "version": "3.25.8",
+            "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.8.tgz",
+            "integrity": "sha512-iJPWX8HoZ2VE21VrhHGU9jVo/kVDUQyqM9vF0MxDhW/fp2sAl1eVwGJgiYZdHGiMwQJImXIW80lKk0MnfDxqiQ==",
             "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/colinhacks"
diff --git a/src/assets/icon/device-desktop-analytics.svg b/src/assets/icon/device-desktop-analytics.svg
new file mode 100644
index 0000000..4233c38
--- /dev/null
+++ b/src/assets/icon/device-desktop-analytics.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm4 15h10m-8-4v4m6-4v4m-6-8V8m3 4v-1m3 1v-2m-3 2v-1" />
+</svg>
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 5b3ac32..b58b530 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,6 +3,7 @@ import '../styles/global.css'
 import SearchBar from '../components/SearchBar.astro'
 import IconHome from '../assets/icon/home.svg'
 import IconUser from '../assets/icon/user-circle.svg'
+import IconAdminPanel from '../assets/icon/device-desktop-analytics.svg'
 
 import { SITE_NAME } from '../config.js'
 const { canSearch = false } = Astro.props || {}
@@ -16,6 +17,9 @@ const { canSearch = false } = Astro.props || {}
     {canSearch && <SearchBar placeholder="Search for recipes..." />}
     <nav>
         <ul>
+            <li title="Admin Panel">
+                <a href="admin.html"><IconAdminPanel /></a>
+            </li>
             <li title="Account">
                 <a href="authentication.html"><IconUser /></a>
             </li>
@@ -24,11 +28,6 @@ const { canSearch = false } = Astro.props || {}
 </header>
 
 <style>
-    h1 {
-        font-size: var(--font-size-title);
-        text-wrap: nowrap;
-    }
-
     header {
         background-color: var(--color-primary);
         display: flex;
diff --git a/src/components/RecipeCard.astro b/src/components/RecipeCard.astro
index e592ad1..3687790 100644
--- a/src/components/RecipeCard.astro
+++ b/src/components/RecipeCard.astro
@@ -29,10 +29,6 @@ function randint(min: number, max: number) {
 </Fragment>
 
 <style>
-    h1 {
-        font-size: var(--font-size-title);
-    }
-
     .recipe-polaroid {
         align-items: center;
         background-color: var(--polaroid-color);
@@ -57,7 +53,6 @@ function randint(min: number, max: number) {
         overflow: hidden;
         text-align: center;
         text-overflow: ellipsis;
-        white-space: nowrap;
         width: calc(var(--polaroid-width) - var(--spacing-small));
     }
 
diff --git a/src/layouts/Main.astro b/src/layouts/Main.astro
index a6123fb..2902abc 100644
--- a/src/layouts/Main.astro
+++ b/src/layouts/Main.astro
@@ -37,10 +37,6 @@ const { canSearch = false } = Astro.props || {}
     }
 
     body {
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-large);
         background-color: light-dark(rgb(255 255 255 / 0.5), rgb(0 0 0 / 0.5));
         background-image:
             radial-gradient(rgb(128 128 128 / 0.05) 1px, transparent 1px),
@@ -76,11 +72,13 @@ const { canSearch = false } = Astro.props || {}
 
     @media screen and (width <=1000px) {
         main {
-            margin-top: calc(2 * var(--spacing-large) + 2rem);
+            margin-top: calc(var(--spacing-large) + var(--font-size-title) + var(--spacing-medium));
         }
 
         main.with-search {
-            margin-top: calc(2 * var(--spacing-large) + 4rem);
+            margin-top: calc(
+                var(--spacing-large) + 3 * var(--font-size-title) + var(--spacing-medium)
+            );
         }
     }
 </style>
diff --git a/src/pages/admin.astro b/src/pages/admin.astro
new file mode 100644
index 0000000..e90c9bc
--- /dev/null
+++ b/src/pages/admin.astro
@@ -0,0 +1,175 @@
+---
+import '../styles/global.css'
+import Main from '../layouts/Main.astro'
+---
+
+<Main title="Admin Panel">
+    <div id="admin-panel">
+        <section id="content">
+            <h1>Content</h1>
+            <nav>
+                <ul>
+                    <li class="admin-panel-selected">Recipes</li>
+                    <li>Comments</li>
+                    <li>Media</li>
+                </ul>
+            </nav>
+            <div class="admin-panel-data">
+                <div class="show">Showing recipes</div>
+                <div class="hide">Showing comments</div>
+                <div class="hide">Showing media</div>
+            </div>
+        </section>
+
+        <section id="users">
+            <h1>Users</h1>
+            <nav>
+                <ul>
+                    <li class="admin-panel-selected">User list</li>
+                    <li>Reports</li>
+                    <li>Flags</li>
+                </ul>
+            </nav>
+            <div class="admin-panel-data">
+                <div class="show">Showing user list</div>
+                <div class="hide">Showing reports</div>
+                <div class="hide">Showing flags</div>
+            </div>
+        </section>
+
+        <section id="activity">
+            <h1>Activity</h1>
+            <nav>
+                <ul>
+                    <li class="admin-panel-selected">Site stats</li>
+                    <li>Trending</li>
+                    <li>Audit logs</li>
+                </ul>
+            </nav>
+            <div class="admin-panel-data">
+                <div class="show">Showing site stats</div>
+                <div class="hide">Showing trending</div>
+                <div class="hide">Showing audit logs</div>
+            </div>
+        </section>
+    </div>
+</Main>
+
+<style>
+    div#admin-panel {
+        display: grid;
+        width: 100%;
+        grid-template:
+            'content users'
+            'content activity' / 1fr 1fr;
+        gap: var(--spacing-medium);
+        height: 100%;
+        justify-content: center;
+        width: 90%;
+    }
+
+    div.hide {
+        opacity: 0;
+        transform: translateY(-100%);
+    }
+
+    div.show {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    div.admin-panel-data {
+        overflow: hidden;
+        min-height: calc(100% - var(--spacing-large) - var(--spacing-medium));
+    }
+
+    div.admin-panel-data {
+        overflow: hidden;
+        position: relative;
+    }
+
+    div.admin-panel-data > div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+    }
+
+    h1 {
+        text-align: center;
+    }
+
+    li.admin-panel-selected {
+        background-color: var(--background-glassy);
+    }
+
+    nav {
+        border-bottom: 1px solid #888;
+    }
+
+    nav > ul {
+        list-style: none;
+        display: flex;
+        width: 100%;
+        justify-content: space-around;
+    }
+
+    nav > ul > li {
+        border-top-left-radius: var(--border-radius-small);
+        border-top-right-radius: var(--border-radius-small);
+        cursor: pointer;
+        padding: var(--spacing-small);
+    }
+
+    section {
+        border-radius: var(--border-radius-large);
+        padding: var(--spacing-medium);
+    }
+
+    section#activity {
+        grid-area: activity;
+    }
+
+    section#content {
+        grid-area: content;
+    }
+
+    section#users {
+        grid-area: users;
+    }
+
+    section#settings {
+        grid-area: settings;
+    }
+
+    @media screen and (width<=1000px) {
+        div#admin-panel {
+            grid-template:
+                'content'
+                'users'
+                'activity' / 1fr;
+            width: 95%;
+        }
+    }
+</style>
+
+<script type="module" is:inline>
+    document.querySelectorAll('nav > ul').forEach((menu) => {
+        menu.addEventListener('click', (event) => {
+            if (event.target.tagName === 'LI') {
+                const current = menu.querySelector('.admin-panel-selected')
+                const index = Array.from(menu.children).indexOf(event.target)
+                const data = menu.closest('section').querySelector('.admin-panel-data')
+                const items = data.children
+
+                if (current) current.classList.remove('admin-panel-selected')
+                event.target.classList.add('admin-panel-selected')
+
+                Array.from(items).forEach((item, i) => {
+                    item.classList.toggle('show', i === index)
+                    item.classList.toggle('hide', i !== index)
+                })
+            }
+        })
+    })
+</script>
diff --git a/src/pages/authentication.astro b/src/pages/authentication.astro
index 9a00127..beff5cd 100644
--- a/src/pages/authentication.astro
+++ b/src/pages/authentication.astro
@@ -66,7 +66,6 @@ import PasswordRequirements from '../components/PasswordRequirements.astro'
     }
 
     section {
-        background-color: light-dark(rgb(0 0 0 / 0.2), rgb(255 255 255 / 0.1));
         border-radius: var(--border-radius-large);
         display: flex;
         flex-direction: column;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7570cf0..bddfbc8 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -35,6 +35,7 @@ import recipes from '../assets/recipes.json'
 
     <style>
         #recipes-list {
+            background-color: transparent;
             display: flex;
             flex-wrap: wrap;
             gap: var(--spacing-medium);
diff --git a/src/styles/form_field.css b/src/styles/form_field.css
index 3829253..59ca4dd 100644
--- a/src/styles/form_field.css
+++ b/src/styles/form_field.css
@@ -1,13 +1,3 @@
-button[type='submit'] {
-    color: white;
-    cursor: pointer;
-    background-color: var(--color-secondary);
-    border: none;
-    border-radius: var(--border-radius-large);
-    font-size: 1rem;
-    padding: 1rem 2rem;
-}
-
 .form-field {
     position: relative;
     width: 100%;
diff --git a/src/styles/global.css b/src/styles/global.css
index 588461e..f07fea4 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -26,7 +26,7 @@
     --border-radius-medium: 16px;
     --border-radius-large: 32px;
 
-    /* 
+    /*
     Define font sizes for headings and body text.
     Use these to ensure a clear hierarchy and readability in the text.
      */
@@ -45,6 +45,11 @@
     --polaroid-width: 88mm;
     --polaroid-photo-size: calc(var(--polaroid-width) - 9mm);
     --polaroid-margin-top: calc((var(--polaroid-width) - var(--polaroid-photo-size)) / 2);
+
+    /*
+    Define the glassy effect for elements.
+     */
+    --background-glassy: light-dark(rgb(0 0 0 / 20%), rgb(255 255 255 / 10%));
 }
 
 * {
@@ -65,6 +70,24 @@ a[target='_blank'] {
     cursor: alias;
 }
 
+body,
+main {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-large);
+}
+
+button[type='submit'] {
+    color: white;
+    cursor: pointer;
+    background-color: var(--color-secondary);
+    border: none;
+    border-radius: var(--border-radius-large);
+    font-size: 1rem;
+    padding: 1rem 2rem;
+}
+
 form {
     align-items: center;
     display: flex;
@@ -76,7 +99,12 @@ form {
 }
 
 h1 {
-    font-size: calc(1.5 * var(--spacing-medium));
+    font-size: var(--font-size-heading);
+    white-space: nowrap;
+}
+
+section {
+    background-color: var(--background-glassy);
 }
 
 section.glassy {
@@ -94,6 +122,13 @@ svg {
     height: 100%;
 }
 
+@media screen and (width <= 1000px) {
+    body,
+    main {
+        gap: var(--spacing-small);
+    }
+}
+
 @media screen and (width <=320px) {
     :root {
         --polaroid-width: 100svw;
diff --git a/src/styles/markdown.css b/src/styles/markdown.css
index df84529..91f12ce 100644
--- a/src/styles/markdown.css
+++ b/src/styles/markdown.css
@@ -25,7 +25,6 @@
 }
 
 .markdown h1 {
-    font-size: var(--font-size-heading);
     margin-top: 0;
     text-align: center;
 }