diff --git a/layouts/Actionbar.vue b/layouts/Actionbar.vue
index cab0087..414087c 100644
--- a/layouts/Actionbar.vue
+++ b/layouts/Actionbar.vue
@@ -1,156 +1,5 @@
 <template>
-  <aside class="actionbar">
-    <div class="icon" id="indicator-icon">
-      <img loading="lazy" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg"/>
-    </div>
-    <nav class="actions">
-      <button id="search">
-        <div class="icon" id="search-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Search-Icon.svg"/>
-        </div>
-        <pre class="label">Search</pre>
-      </button>
-      <button id="filter">
-        <div class="icon" id="filter-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Filter-Icon.svg"/>
-        </div>
-        <pre class="label">Filter</pre>
-      </button>
-      <button id="instances">
-        <div class="icon" id="instances-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Instances-Icon.svg"/>
-        </div>
-        <pre class="label">Instances</pre>
-      </button>
-      <button id="attachments">
-        <div class="icon" id="attachments-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Attachments-Icon.svg"/>
-        </div>
-        <pre class="label">Attachments</pre>
-      </button>
-      <button id="sell">
-        <div class="icon" id="sell-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Sell-Icon.svg"/>
-        </div>
-        <pre class="label">Sell</pre>
-      </button>
-      <button id="archive">
-        <div class="icon" id="archive-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Archive-Icon.svg"/>
-        </div>
-        <pre class="label">Archive</pre>
-      </button>
-      <button id="new">
-        <div class="icon" id="new-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Add-New-Icon.svg"/>
-        </div>
-        <pre class="label">New</pre>
-      </button>
-      <button id="edit">
-        <div class="icon" id="edit-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Edit-Icon.svg"/>
-        </div>
-        <pre class="label">Edit</pre>
-      </button>
-      <button id="delete">
-        <div class="icon" id="delete-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Delete-Icon.svg"/>
-        </div>
-        <pre class="label">Delete</pre>
-      </button>
-    </nav>
-  </aside>
-</template>
-
-
-
-<style>
-
-  * {
-    box-sizing: border-box;
-  }
-
-
-  .actionbar {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    border-radius: 10px;
-    padding: 30px 10px;
-    gap: 20px;
-    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    background-color: #2c2c2c;
-  }
-
-
-  .actions {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: stretch;
-    align-self: stretch;
-    padding: 20px 0;
-    gap: 20px;
-  }
-
-
-  button {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    height: 30px;
-    border-radius: 10px;
-    border: none;
-    background-color: #2c2c2c;
-    transition-duration: 0.5s;
-  }
-  button:hover {
-    background-color: #444444;
-  }
-
-
-  .icon {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    width: 30px;
-    height: 30px;
-    padding: 10px;
-  }
-  #indicator-icon {
-    width: 30px;
-    height: 30px;
-    border-radius: 5px;
-    background-color: #2c2c2c;
-    transition-duration: 0.5s;
-  }
-  #indicator-icon:hover {
-    background-color: #444444;
-  }
-
-  .icon > img {
-    width: 10px;
-    height: 10px;
-    filter: invert(100%);
-    object-fit: contain;
-    object-position: center;
-    overflow: hidden;
-  }
-  #indicator-icon > img {
-    width: auto;
-  }
-
-
-  .label {
-    color: #fff;
-    letter-spacing: 0.7px;
-    align-self: stretch;
-    white-space: nowrap;
-    font: 400 14px/20px Overpass, sans-serif;
-  }
-  
-
-</style>
\ No newline at end of file
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </template>
\ No newline at end of file
diff --git a/layouts/Navigationbar.vue b/layouts/Navigationbar.vue
index d68f354..e16773e 100644
--- a/layouts/Navigationbar.vue
+++ b/layouts/Navigationbar.vue
@@ -1,5 +1,5 @@
 <template>
-    <aside class="sidebar">
+    <section class="sidebar">
       <div class="toggle">
         <div class="icon"  id="back-icon">
           <img loading="lazy" src="../icons/Back-Icon.svg"/>
@@ -50,7 +50,7 @@
           </button>
         </nav>
       </div>
-    </aside>
+    </section>
 </template>
 
 
@@ -72,24 +72,23 @@ export default {
   }
 
   .sidebar {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: center;
-    width: 200px;
-    border-radius: 10px;
-    padding: 10px;
-    gap: 10px;
+    align-items: flex-start;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     background-color: #2c2c2c;
+    width: 200px;
+    display: flex;
+    flex-direction: column;
+    border-radius: 10px;
+    gap: 10px;
+    padding: 10px;
   }
 
 
   .toggle {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
     justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+    display: flex;
     height: 40px;
     padding: 10px;
   }
@@ -97,19 +96,20 @@ export default {
 
 
   .menus {
+    align-items: flex-start;
+    align-self: stretch;
     display: flex;
     flex-direction: column;
-    align-items: stretch;
-    justify-content: center;
     padding: 40px 0;
     gap: 30px;
   }
 
   nav {
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
     display: flex;
     flex-direction: column;
-    align-items: stretch;
-    justify-content: center;
     padding: 10px;
     gap: 30px;
   }
@@ -120,14 +120,14 @@ export default {
   
   button {
     display: flex;
-    flex-direction: row;
     align-items: center;
+    align-self: stretch;
     justify-content: flex-start;
     height: 35px;
+    border: none;
     border-radius: 5px;
     padding: 5px;
     gap: 10px;
-    border: none;
     background-color: #2c2c2c;
     transition-duration: 0.5s;
   }
@@ -151,6 +151,8 @@ export default {
     transition-duration: 0.5s;
   }
   #indicator-icon:hover, #back-icon:hover {
+    width: 30px;
+    height: 30px;
     background-color: #444444;
   }
 
@@ -166,9 +168,12 @@ export default {
   
   .label {
     color: #fff;
+    /*leading-trim: both;
+    text-edge: cap;*/
     letter-spacing: 0.7px;
-    align-self: stretch;
+    align-self: center;
     white-space: nowrap;
+    margin: auto 0;
     font: 700 14px/20px Overpass, sans-serif;
   }
 
diff --git a/public/icons/actionbar-icons/Attachments-Icon.svg b/public/icons/actionbar-icons/Attachment-Icon.svg
similarity index 100%
rename from public/icons/actionbar-icons/Attachments-Icon.svg
rename to public/icons/actionbar-icons/Attachment-Icon.svg
diff --git a/public/icons/Dropdown-Icon.svg b/public/icons/actionbar-icons/Dropdown-Icon.svg
similarity index 100%
rename from public/icons/Dropdown-Icon.svg
rename to public/icons/actionbar-icons/Dropdown-Icon.svg
diff --git a/public/icons/actionbar-icons/Archive-Icon.svg b/public/icons/actionbar-icons/Mark-Done-Icon.svg
similarity index 100%
rename from public/icons/actionbar-icons/Archive-Icon.svg
rename to public/icons/actionbar-icons/Mark-Done-Icon.svg
diff --git a/public/icons/Save-Icon.svg b/public/icons/actionbar-icons/Save-Icon.svg
similarity index 100%
rename from public/icons/Save-Icon.svg
rename to public/icons/actionbar-icons/Save-Icon.svg
diff --git a/public/icons/Settings-Icon.svg b/public/icons/actionbar-icons/Settings-Icon.svg
similarity index 100%
rename from public/icons/Settings-Icon.svg
rename to public/icons/actionbar-icons/Settings-Icon.svg