diff --git a/app.vue b/app.vue
index 0aa0a78..ce479ee 100644
--- a/app.vue
+++ b/app.vue
@@ -19,12 +19,13 @@
 * {
   box-sizing: border-box;
   margin: 0;
+  padding: 0;
 }
 
 html, template, body, #__nuxt, #__layout {
-  height: 100vh;
+  min-height: 100vh;
   width: 100vw;
-  height: 100%;
+  min-height: 100%;
   width: 100%;
   background-color: #212121;
   font-size: 1rem;
diff --git a/layouts/Actionbar.vue b/layouts/Actionbar.vue
index 58e2203..0445e44 100644
--- a/layouts/Actionbar.vue
+++ b/layouts/Actionbar.vue
@@ -1,16 +1,12 @@
 <template>
-  <aside
-    :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
-    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
-      @click="toggleActionbar">
-      <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-        src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
+  <aside :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
+    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="toggleActionbar">
+      <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
     </div>
     <nav class="actions">
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search">
         <div class="icon" id="search-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-            src="../icons/actionbar-icons/Search-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Search-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
@@ -18,8 +14,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter">
         <div class="icon" id="filter-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-            src="../icons/actionbar-icons/Filter-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Filter-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
@@ -27,8 +22,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
         <div class="icon" id="instances-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-            src="../icons/actionbar-icons/Instances-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Instances-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
@@ -36,8 +30,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
         <div class="icon" id="attachments-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-            src="../icons/actionbar-icons/Attachments-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Attachments-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
@@ -45,8 +38,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
         <div class="icon" id="sell-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-            src="../icons/actionbar-icons/Sell-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Sell-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
@@ -54,8 +46,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
         <div class="icon" id="archive-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-            src="../icons/actionbar-icons/Archive-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Archive-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
@@ -63,8 +54,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new">
         <div class="icon" id="new-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-            src="../icons/actionbar-icons/Add-New-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Add-New-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
@@ -72,8 +62,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable">
         <div class="icon" id="edit-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-            src="../icons/actionbar-icons/Edit-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Edit-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
@@ -81,8 +70,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteAsset">
         <div class="icon" id="delete-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-            src="../icons/actionbar-icons/Delete-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Delete-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
@@ -93,8 +81,12 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
 import { useStore } from 'vuex';
 
+const darkMode = ref(true)
+const isExpanded = ref(true)
+
 // get accesss to the store
 const store = useStore()
 const toggleEditable = () => {
@@ -103,26 +95,17 @@ const toggleEditable = () => {
 const deleteAsset = () => {
   store.commit('doDeleteAsset');
 };
+
+const toggleActionbar = () => {
+  isExpanded.value = !isExpanded.value;
+};
 </script>
 
 
 <script>
-
 export default {
   name: "Actionbar",
-  data() {
-    return {
-      darkMode: true,
-      isExpanded: true,
-    };
-  },
-  methods: {
-    toggleActionbar() {
-      this.isExpanded = !this.isExpanded;
-    },
-  },
 }
-
 </script>
 
 
@@ -147,37 +130,30 @@ aside.actionbar {
   justify-content: center;
   padding: 1.875rem 0.625rem;
   gap: 1.25rem;
-  transition: all 10s ease-in-out 0s;
   overflow: clip;
 }
-
 .actionbar-darkmode {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #2C2C2C;
 }
-
 .actionbar-lightmode {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #FFFFFF;
 }
-
 aside.is-expanded {
   animation: expand 0.5s linear both;
 }
-
 aside.is-not-expanded {
   animation: contract 0.5s linear both;
-  width: stretch;
-  inline-size: stretch;
 }
 
 
 .actions {
   display: flex;
   flex-direction: column;
+  padding: 1.25rem 0;
   align-items: flex-start;
   justify-content: center;
-  padding: 1.25rem 0;
   gap: 1.25rem;
   overflow: clip;
 }
@@ -191,34 +167,21 @@ button {
   border-radius: 0.625rem;
   align-items: center;
   justify-content: flex-start;
+  gap: 0.125rem;
   border: none;
   transition: 0.2s ease-in-out;
   overflow: clip;
-  gap: 0.125rem
 }
+.button-darkmode { background-color: #2C2C2C; } 
+.button-lightmode { background-color: #FFFFFF; } 
 
-.button-darkmode {
-  background-color: #2C2C2C;
-}
+.button-darkmode:hover, 
+.indicator-darkmode:hover { background-color: #444444; } 
 
-.button-lightmode {
-  background-color: #FFFFFF;
-}
+.button-lightmode:hover, 
+.indicator-lightmode:hover {  background-color: #ACACAC; } 
 
-.button-darkmode:hover,
-.indicator-darkmode:hover {
-  background-color: #444444;
-}
-
-.button-lightmode:hover,
-.indicator-lightmode:hover {
-  background-color: #ACACAC;
-}
-
-.is-not-expanded>button {
-  align-self: center;
-  gap: 0.5rem;
-}
+.is-not-expanded>button { align-self: center; }
 
 
 .icon {
@@ -229,7 +192,9 @@ button {
   align-items: center;
   justify-content: center;
   padding: 0 0.5rem;
-  transition: padding 0.5s linear
+}
+.is-not-expanded .icon {
+  align-self: center;
 }
 
 #indicator-icon {
@@ -237,16 +202,9 @@ button {
   height: 1.875rem;
   border-radius: 0.3125rem;
   transition: 0.2s ease-in-out;
-}
+} 
+.is-not-expanded #indicator-icon { transform: rotate(180deg); }
 
-.is-not-expanded .icon {
-  align-self: center;
-  padding: 0 0.375rem;
-}
-
-.is-not-expanded #indicator-icon {
-  transform: rotate(180deg);
-}
 
 img {
   width: 0.875rem;
@@ -255,44 +213,31 @@ img {
   object-position: center;
   overflow: hidden;
 }
-
-#indicator-icon>img {
-  height: 1.25rem;
-}
-
-.img-darkmode {
-  filter: invert(100%);
-}
+.img-darkmode { filter: invert(100%); } 
+#indicator-icon>img { height: 1.25rem; }
 
 
 .label {
   display: inline-flex;
   min-width: 0;
-  padding: 0rem 0.3125rem 0rem 0rem;
-  letter-spacing: 5%;
+  padding: 0rem 0.625rem 0rem 0rem;
   align-self: center;
+  letter-spacing: 0.02rem;
   white-space: nowrap;
   font: 400 0.875rem/1.25rem Overpass, sans-serif;
-}
-
-.label-darkmode {
-  color: #FFFFFF;
-}
-
-.label-lightmode {
-  color: #000000;
-}
+} 
+.label-darkmode { color: #FFFFFF; } 
+.label-lightmode { color: #000000; }
 
 
-.fade-enter-from,
-.fade-leave-to {
+
+.fade-enter-from, .fade-leave-to {
   opacity: 0;
 }
 
 .fade-enter-to,
 .fade-leave-from {
   opacity: 1;
-  max-width: 0;
 }
 
 .fade-enter-active {
@@ -312,8 +257,8 @@ img {
 
 @keyframes expand {
   from {
-    max-inline-size: 3.25rem;
-    max-width: 3.25rem;
+    max-inline-size: 3.125rem;
+    max-width: 3.125rem;
   }
 
   to {
@@ -329,8 +274,8 @@ img {
   }
 
   to {
-    max-inline-size: 3.25rem;
-    max-width: 3.25rem;
+    max-inline-size: 3.125rem;
+    max-width: 3.125rem;
   }
 }
 
diff --git a/layouts/Navigationbar.vue b/layouts/Navigationbar.vue
index 1fff937..eb77c15 100644
--- a/layouts/Navigationbar.vue
+++ b/layouts/Navigationbar.vue
@@ -1,67 +1,64 @@
 <template>
-  <aside
-    :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
+  <aside :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
     <div class="toggleNavbar">
       <div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
         <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
       </div>
-      <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
-        @click="ToggleSidebar">
-        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-          src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
+      <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="ToggleSidebar">
+        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
       </div>
     </div>
     <div class="menus">
       <nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']">
-        <router-link to="/home" class="button"
-          :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="home-button">
+        <router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="home-button">
           <div class="icon" id="home-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-              src="../icons/navbar-icons/Home-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Home-Icon.svg" />
           </div>
-          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</span>
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</pre>
+          </Transition>
         </router-link>
       </nav>
       <nav id="site-menu">
-        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
-          id="checklists-button">
+        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="checklists-button">
           <div class="icon" id="checklists-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-              src="../icons/navbar-icons/Checklists-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Checklists-Icon.svg" />
           </div>
-          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span>
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</pre>
+          </Transition>
         </router-link>
-        <nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"  @click="defaultAssetPage()"
-          id="assets-button">
+        <nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"  @click="defaultAssetPage()" id="assets-button">
           <div class="icon" id="assets-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-              src="../icons/navbar-icons/Assets-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Assets-Icon.svg" />
           </div>
-          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span>
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets</pre>
+          </Transition>
         </nuxt-link>
-        <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
-          id="solutions-button">
+        <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
           <div class="icon" id="solutions-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-              src="../icons/navbar-icons/Solutions-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Solutions-Icon.svg" />
           </div>
-          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span>
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
+          </Transition>
         </router-link>
-        <router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
-          id="accounting-button">
+        <router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
           <div class="icon" id="accounting-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-              src="../icons/navbar-icons/Accounting-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Accounting-Icon.svg" />
           </div>
-          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</span>
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</pre>
+          </Transition>
         </router-link>
-        <router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
-          id="clients-button">
+        <router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="clients-button">
           <div class="icon" id="clients-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-              src="../icons/navbar-icons/Clients-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Clients-Icon.svg" />
           </div>
-          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</span>
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</pre>
+          </Transition>
         </router-link>
       </nav>
     </div>
@@ -102,47 +99,37 @@ export default {
   box-sizing: border-box;
 }
 
-aside {
+aside.navbar {
   display: flex;
   flex-direction: column;
   position: sticky;
   top: 5rem;
-  width: 3.125rem;
-  transition: 0.5s ease-in-out;
-}
-
+  height: fit-content;
+  width: fit-content;
+  inline-size: fit-content;
+  border-radius: 0.625rem;
+  flex: 0 0 0;
+  align-items: stretch;
+  justify-content: center;
+  padding: 0.9375rem;
+  gap: 0.625rem;
+  overflow: clip;
+  overflow-clip-margin: 0.625rem;
+} 
 aside.is-expanded {
-  width: 12.5rem;
-}
-
-.is-expanded .label {
-  opacity: 1;
-  transition: 0.5s ease-in-out;
-}
-
+  animation: expand 0.5s linear both;
+} 
+aside.is-not-expanded {
+  animation: contract 0.5s linear both;
+} 
 .is-not-expanded #indicator-icon {
   transform: rotate(180deg);
   transition: 0.5s ease-in-out;
-}
-
-
-.navbar {
-  display: flex;
-  flex-direction: column;
-  height: fit-content;
-  border-radius: 0.625rem;
-  align-items: stretch;
-  justify-content: center;
-  gap: 0.625rem;
-  padding: 0.9375rem;
-  margin: 0;
-}
-
+} 
 .navbar-darkmode {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #2C2C2C;
-}
-
+} 
 .navbar-lightmode {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #FFFFFF;
@@ -155,75 +142,67 @@ aside.is-expanded {
   height: 2.5rem;
   align-items: center;
   justify-content: space-between;
+  overflow: clip;
+  overflow-clip-margin: 0.625rem;
 }
 
 
 .menus {
   display: flex;
   flex-direction: column;
-  position: relative;
-  justify-content: flex;
   padding: 1.25rem 0;
+  align-items: flex-start;
+  justify-content: center;
   gap: 1.875rem;
-  transition: 0.5s ease-in-out;
-  align-items: center;
+  overflow: clip;
+  overflow-clip-margin: 0.625rem;
 }
 
 
 nav {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  align-self: stretch;
   padding: 0.9375rem 0;
+  align-items: flex-start;
+  justify-content: center;
   gap: 1.875rem;
-  width: 92%;
-}
+  overflow: clip;
+  overflow-clip-margin: 0.625rem;
+} 
 
-.menu-darkmode {
-  border-bottom: 0.0625rem solid #8E8E8E;
-}
-
-.menu-lightmode {
-  border-bottom: 0.0625rem solid #BABABA;
-}
+.menu-darkmode { border-bottom: 0.0625rem solid #8E8E8E; } 
+.menu-lightmode { border-bottom: 0.0625rem solid #BABABA; }
 
 
-
-button,
+.button,
 a {
   display: flex;
   flex-direction: row;
   align-self: stretch;
   height: 2.1875rem;
-  border-radius: 0.3125rem;
+  border-radius: 0.625rem;
   align-items: center;
   justify-content: flex-start;
-  gap: 0.3125rem;
   border: none;
-  transition: 0.5s ease-in-out;
   text-decoration: none;
-  width: 100%;
-}
-
-.button-darkmode {
-  background-color: #2C2C2C;
-}
-
-.button-lightmode {
-  background-color: #FFFFFF;
-}
+  transition: 0.2s ease-in-out;
+  overflow: clip;
+  overflow-clip-margin: 0.625rem;
+} 
+.button-darkmode { background-color: #2C2C2C; } 
+.button-lightmode { background-color: #FFFFFF; } 
 
 .button-darkmode:hover,
 .indicator-darkmode:hover,
-.back-darkmode:hover {
-  background-color: #444444;
-}
+.back-darkmode:hover {  background-color: #444444; } 
 
 .button-lightmode:hover,
 .indicator-lightmode:hover,
-.back-lightmode:hover {
-  background-color: #ACACAC;
-}
+.back-lightmode:hover { background-color: #ACACAC; }
+
+.is-not-expanded>button { align-self: center; }
+
 
 .icon {
   display: flex;
@@ -232,24 +211,18 @@ a {
   height: 2.1875rem;
   align-items: center;
   justify-content: center;
-  transition: 0.2s ease-in-out;
-}
-
+} 
 #back-icon,
 #indicator-icon {
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0.3125rem;
-  transition-duration: 0.5s;
-  transition: 0.2s ease-out;
-}
-
+  transition: 0.2s ease-in-out;
+} 
 .back-darkmode:hover,
 .back-lightmode:hover,
 .indicator-darkmode:hover,
-.indicator-lightmode:hover {
-  cursor: pointer;
-}
+.indicator-lightmode:hover { cursor: pointer; }
 
 
 img {
@@ -258,28 +231,95 @@ img {
   object-fit: contain;
   object-position: center;
   overflow: hidden;
-  transition: 0.2s ease-out;
-}
+} 
+.img-darkmode { filter: invert(100%); }
 
-.img-darkmode {
-  filter: invert(100%);
-}
 
 .label {
-  letter-spacing: 5%;
+  display: inline-flex;
+  min-width: 0;
+  padding: 0rem 0.625rem 0rem 0.3125rem;
   align-self: center;
+  letter-spacing: 0.03rem;
   white-space: nowrap;
-  margin: auto 0;
   font: 600 0.875rem/1.25rem Overpass, sans-serif;
+} 
+.label-darkmode { color: #FFFFFF; } 
+.label-lightmode { color: #000000; }
+
+
+
+.fade-enter-from,
+.fade-leave-to {
   opacity: 0;
-  transition: opacity 0.5s ease-out;
+  padding: 0;
 }
 
-.label-darkmode {
-  color: #FFFFFF;
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+  padding: 0rem 0.625rem 0rem 0.3125rem;
 }
 
-.label-lightmode {
-  color: #000000;
+.fade-enter-active {
+  transition: all 0.75s linear;
+  animation: fade-in 0.5s linear forwards;
+}
+
+.fade-leave-active {
+  transition: all 0.75s linear;
+  animation: fade-out 0.5s linear forwards;
+}
+
+.fade-move {
+  transition: transform 5s
+}
+
+@keyframes expand {
+  from {
+    max-inline-size: 4.0625rem;
+    max-width: 4.0625rem;
+  }
+
+  to {
+    max-inline-size: 15rem;
+    max-width: 15rem;
+  }
+}
+
+@keyframes contract {
+  from {
+    max-inline-size: 15rem;
+    max-width: 15rem;
+  }
+
+  to {
+    max-inline-size: 4.0625rem;
+    max-width: 4.0625rem;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    max-width: 0;
+    max-inline-size: 0;
+  }
+
+  to {
+    max-width: 10rem;
+    width: fit-content;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    max-width: 10rem;
+    width: fit-content;
+  }
+
+  to {
+    max-width: 0;
+    max-inline-size: 0;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 221a6b8..0877d87 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6114,9 +6114,9 @@
       "dev": true
     },
     "node_modules/ip": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
-      "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz",
+      "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==",
       "dev": true
     },
     "node_modules/ipaddr.js": {