diff --git a/src/resources/vue/components/admin/Siderbar.vue b/src/resources/vue/components/admin/Siderbar.vue
new file mode 100644
index 0000000..89ea380
--- /dev/null
+++ b/src/resources/vue/components/admin/Siderbar.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="sidebar-wrapper">
+    <div class="d-flex flex-column flex-shrink-0 p-3" style="width: 15rem; height: 100%; background-color: #262d42">
+      <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-light text-decoration-none">
+        <Icon icon="admin" size="24" color="white" />
+        <span class="fs-4 p-1">| Biblio Admin</span>
+      </a>
+      <hr style="color: white">
+      <ul class="nav nav-pills flex-column mb-auto">
+        <li class="nav-item">
+          <a href="/admin" :class="{ 'active': $page.url === ('/admin'), 'link-light': $page.url !== ('/admin') }" class="nav-link d-flex" aria-current="page">
+            <Icon icon="full-house" size="16" color="white" />&nbsp;Home
+          </a>
+        </li>
+        <li>
+          <a href="/admin/items" :class="{ 'active': $page.url.startsWith('/admin/items'), 'link-light': !$page.url.startsWith('/admin/items') }" class="nav-link d-flex">
+            <Icon icon="full-archive" size="16" color="white" /> &nbsp;Items
+          </a>
+        </li>
+        <li>
+          <a href="/admin/reservations" :class="{ 'active': $page.url.startsWith('/admin/reservations'), 'link-light': !$page.url.startsWith('/admin/reservations') }" class="nav-link link-light d-flex">
+            <Icon icon="list" size="16" color="white" /> &nbsp;Reserveringen
+          </a>
+        </li>
+        <li>
+          <a href="/admin/users" :class="{ 'active': $page.url.startsWith('/admin/users'), 'link-light': !$page.url.startsWith('/admin/users') }" class="nav-link link-light d-flex">
+            <Icon icon="full-people" size="16" color="white" /> &nbsp;Klanten
+          </a>
+        </li>
+        <li>
+          <a href="/admin/invoices" :class="{ 'active': $page.url.startsWith('/admin/invoices'), 'link-light': !$page.url.startsWith('/admin/invoices') }" class="nav-link link-light d-flex">
+            <Icon icon="full-euro" size="16" color="white" /> &nbsp;Facturen
+          </a>
+        </li>
+      </ul>
+      <hr>
+      <div class="dropdown">
+        <a href="#" class="d-flex align-items-center link-light text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
+          <Icon icon="full-person" size="24" color="white" />
+          <strong class="p-1">{{ userData.name }}</strong>
+        </a>
+        <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
+          <li><a class="dropdown-item" href="#">Profile</a></li>
+          <li>
+            <hr class="dropdown-divider">
+          </li>
+          <li><a class="dropdown-item" href="#">Sign out</a></li>
+        </ul>
+      </div>
+    </div>
+    <slot />
+  </div>
+</template>
+<script>
+import Icon from "@/icon.vue"
+export default {
+  name: "AdminSidebar",
+  props: ["userData"],
+  components: {
+    Icon
+  },
+}
+</script>
+
+<style>
+.sidebar-wrapper {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  background-color: white;
+}
+</style>
diff --git a/src/resources/vue/layouts/admin-layout.vue b/src/resources/vue/layouts/admin-layout.vue
index 9f4e87b..f1746c7 100644
--- a/src/resources/vue/layouts/admin-layout.vue
+++ b/src/resources/vue/layouts/admin-layout.vue
@@ -1,67 +1,19 @@
 <template>
-  <div class="d-flex flex-column flex-shrink-0 p-3" style="width: 15rem; height: 100%; background-color: #262d42">
-    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-light text-decoration-none">
-      <Icon icon="admin" size="24" color="white" />
-      <span class="fs-4 p-1">| Biblio Admin</span>
-    </a>
-    <hr>
-    <ul class="nav nav-pills flex-column mb-auto">
-      <li class="nav-item">
-        <a href="/admin" :class="{ 'active': $page.url === ('/admin'), 'link-light': $page.url !== ('/admin') }" class="nav-link d-flex" aria-current="page">
-          <Icon icon="full-house" size="16" color="white" />&nbsp;Home
-        </a>
-      </li>
-      <li>
-        <a href="/admin/items" :class="{ 'active': $page.url.startsWith('/admin/items'), 'link-light': !$page.url.startsWith('/admin/items') }" class="nav-link d-flex"> <!-- link-light -->
-          <Icon icon="full-archive" size="16" color="white" /> &nbsp;Items
-        </a>
-      </li>
-      <li>
-        <a href="/admin/reservations" :class="{ 'active': $page.url.startsWith('/admin/reservations'), 'link-light': !$page.url.startsWith('/admin/reservations') }" class="nav-link link-light d-flex">
-          <Icon icon="list" size="16" color="white" /> &nbsp;Reserveringen
-        </a>
-      </li>
-      <li>
-        <a href="/admin/users" :class="{ 'active': $page.url.startsWith('/admin/users'), 'link-light': !$page.url.startsWith('/admin/users') }" class="nav-link link-light d-flex">
-          <Icon icon="full-people" size="16" color="white" /> &nbsp;Klanten
-        </a>
-      </li>
-      <li>
-        <a href="/admin/invoices" :class="{ 'active': $page.url.startsWith('/admin/invoices'), 'link-light': !$page.url.startsWith('/admin/invoices') }" class="nav-link link-light d-flex">
-          <Icon icon="full-euro" size="16" color="white" /> &nbsp;Facturen
-        </a>
-      </li>
-    </ul>
-    <hr>
-    <div class="dropdown">
-      <a href="#" class="d-flex align-items-center link-light text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
-        <Icon icon="full-person" size="24" color="white" />
-        <strong class="p-1">{{ userData.name }}</strong>
-      </a>
-      <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
-        <li><a class="dropdown-item" href="#">Profile</a></li>
-        <li>
-          <hr class="dropdown-divider">
-        </li>
-        <li><a class="dropdown-item" href="#">Sign out</a></li>
-      </ul>
-    </div>
-  </div>
-  <div class="slot">
+  <AdminSidebar :userData="userData">
     <slot />
-  </div>
+  </AdminSidebar>
 </template>
 
 <script>
   import "https://code.jquery.com/jquery-3.7.1.js"
   import "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
 
-  import Icon from "@components/icon.vue";
+  import AdminSidebar from "@/components/admin/Siderbar.vue";
 
   export default {
     name: "AdminLayout",
     components: {
-      Icon,
+      AdminSidebar
     },
     props: {
       userData: {
@@ -82,9 +34,7 @@
     background-color: #003bb2 !important;
   }
 
-  .slot {
-    display: flex;
-    width: 100%;
-    background-color: #f2f2f2
+  * {
+    color: black;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/resources/vue/pages/admin/index.vue b/src/resources/vue/pages/admin/index.vue
index 552bf60..eb282fb 100644
--- a/src/resources/vue/pages/admin/index.vue
+++ b/src/resources/vue/pages/admin/index.vue
@@ -1,50 +1,51 @@
 <template>
-  <div class="admin-content">
-    <AdminLayout :userData="userData" />
-    <div class="dashboard">
-      <span class="dashboard-title">Dashboard</span>
-      <div class="info-cards">
-        <div class="card">
-          <div class="card-body text-center">
-            <span class="card-title">Items</span>
-            <p class="card-text">{{ count.items }}</p>
+  <AdminLayout :user-data="{name: 'John Doe'}">
+    <div class="admin-content">
+      <div class="dashboard">
+        <span class="dashboard-title">Dashboard</span>
+        <div class="info-cards">
+          <div class="card">
+            <div class="card-body text-center">
+              <span class="card-title">Items</span>
+              <p class="card-text">{{ count.items }}</p>
+            </div>
           </div>
-        </div>
-        <div class="card">
-          <div class="card-body text-center">
-            <span class="card-title">Klanten</span>
-            <p class="card-text">{{ count.customers }}</p>
+          <div class="card">
+            <div class="card-body text-center">
+              <span class="card-title">Klanten</span>
+              <p class="card-text">{{ count.customers }}</p>
+            </div>
           </div>
-        </div>
-        <div class="card">
-          <div class="card-body text-center">
-            <span class="card-title">Reserveringen</span>
-            <p class="card-text">{{ count.reservations }}</p>
+          <div class="card">
+            <div class="card-body text-center">
+              <span class="card-title">Reserveringen</span>
+              <p class="card-text">{{ count.reservations }}</p>
+            </div>
           </div>
-        </div>
-        <div class="card">
-          <div class="card-body text-center">
-            <span class="card-title">Openstaande Facturen</span>
-            <p class="card-text">{{ count.invoices }}</p>
+          <div class="card">
+            <div class="card-body text-center">
+              <span class="card-title">Openstaande Facturen</span>
+              <p class="card-text">{{ count.invoices }}</p>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="charts">
-        <apexchart class="chart" width="95%" type="bar" :options="optionsChart1" :series="seriesChart1"></apexchart>
-        <apexchart class="chart" width="95%" type="bar" :options="optionsChart2" :series="seriesChart2"></apexchart>
+        <div class="charts">
+          <apexchart class="chart" width="95%" type="bar" :options="optionsChart1" :series="seriesChart1"></apexchart>
+          <apexchart class="chart" width="95%" type="bar" :options="optionsChart2" :series="seriesChart2"></apexchart>
+        </div>
       </div>
     </div>
-  </div>
+  </AdminLayout>
 </template>
-<script>
-  import AdminLayout from "@layouts/admin-layout.vue";
 
-  export default {
-    name: "AdminDashboard",
-    components: {
-      AdminLayout,
-    },
-    props: {
+<script>
+import AdminLayout from "../../layouts/admin-layout.vue";
+export default {
+  name: "admin-index",
+  components: {
+    AdminLayout,
+  },
+  props: {
       userData: {
         type: Object,
         required: true,
@@ -119,62 +120,63 @@
         ],
       };
     },
-  };
+  }
 </script>
+
 <style lang="scss">
-  .admin-content {
+.admin-content {
+  display: flex;
+  height: 100%;
+  width: 100%;
+
+  .dashboard {
     display: flex;
-    flex-direction: row;
-    height: 100%;
+    flex-direction: column;
+    align-items: start;
+    width: 100%;
+    padding: 1.3rem;
 
-    .dashboard {
+    .dashboard-title {
+      font-size: 2rem;
+      font-weight: bold;
+      margin-bottom: 1.3rem;
+      color: #191a21;
+    }
+
+    .info-cards {
       display: flex;
-      flex-direction: column;
-      align-items: start;
+      flex-direction: row;
       width: 100%;
-      padding: 1.3rem;
+      justify-content: space-between;
+      gap: 1.9rem;
+      margin-bottom: 1.3rem;
 
-      .dashboard-title {
-        font-size: 2rem;
-        font-weight: bold;
-        margin-bottom: 1.3rem;
+      .card {
+        flex: 1 1;
+        background-color: #f2f2f2;
         color: #191a21;
-      }
-
-      .info-cards {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        justify-content: space-between;
-        gap: 1.9rem;
-        margin-bottom: 1.3rem;
-
-        .card {
-          flex: 1 1;
-          background-color: #f2f2f2;
-          color: #191a21;
 
-          .card-title {
-            font-size: 1.3rem;
-            font-weight: bold;
-          }
+        .card-title {
+          font-size: 1.3rem;
+          font-weight: bold;
         }
       }
+    }
 
-      .charts {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        gap: 1.9rem;
+    .charts {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      gap: 1.9rem;
 
-        .chart {
-          padding: 10px;
-          border: 1px solid;
-          flex: 1 1;
-          border-radius: 0.375rem;
-          border-color: rgba(0, 0, 0, 0.175);
-        }
+      .chart {
+        padding: 10px;
+        border: 1px solid;
+        flex: 1 1;
+        border-radius: 0.375rem;
+        border-color: rgba(0, 0, 0, 0.175);
       }
     }
   }
-</style>
\ No newline at end of file
+}
+</style>