diff --git a/app.vue b/app.vue
index 7d49db9..bcb764a 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <!--<NuxtLayout :name="layout">--><NuxtLayout>
+  <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>
 </template>
@@ -23,6 +23,7 @@
     width: 100%;
     margin: 0;
     background-color: #212121;
+    font-size: 1rem;
   }
 
 
diff --git a/components/Dashboard.vue b/components/Dashboard.vue
index fbf6e85..78a8995 100644
--- a/components/Dashboard.vue
+++ b/components/Dashboard.vue
@@ -33,18 +33,18 @@ export default {
     justify-content: center;
     align-self: stretch;
     width: 100%;
-    padding: 30px 50px 50px;
-    gap: 20px;
-    border-radius: 10px;
-    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    padding: 1.875rem 3.125rem 3.125rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
     background-color: #2c2c2c;
   }
   
   .heading {
     color: #fff;
-    letter-spacing: 0.8px;
+    letter-spacing: 5%;
     text-decoration-line: underline;
-    font: 400 16px/32px Overpass, sans-serif;
+    font: 400 1rem/2rem Overpass, sans-serif;
   }
   
   .shortcuts {
@@ -52,8 +52,8 @@ export default {
     flex-direction: row;
     justify-content: space-between;
     align-content: center;
-    padding: 10px 40px;
-    gap: 40px;
+    padding: 0.625rem 2.5rem;
+    gap: 2.5rem;
   }
   
   input {
@@ -61,15 +61,15 @@ export default {
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    width: 240px;
-    height: 64px;
-    border-radius: 10px;
-    padding: 15px 20px;
+    width: 15rem;
+    height: 4rem;
+    border-radius: 0.625rem;
+    padding: 0.9375rem 1.25rem;
     border: none;
     color: #fff;
     text-align: center;
-    letter-spacing: 0.7px;
-    font: 400 14px/32px Overpass, sans-serif;
+    letter-spacing: 5%;
+    font: 400 0.875rem/2rem Overpass, sans-serif;
     background-color: #343434;
   }
   
diff --git a/components/LoginForm.vue b/components/LoginForm.vue
index 0a200bd..e0a4217 100644
--- a/components/LoginForm.vue
+++ b/components/LoginForm.vue
@@ -59,12 +59,12 @@ export default {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    width: 500px;
-    height: 500px;
-    border-radius: 10px;
-    padding: 40px 30px;
-    gap: 30px;
-    border: 1px solid #000;
+    width: 31.25rem;
+    height: 31.25rem;
+    border-radius: 0.625rem;
+    padding: 2.5rem 1.875rem;
+    gap: 1.875rem;
+    border: 0.0625rem solid #000;
     background-color: #2c2c2c;
   }
 
@@ -74,19 +74,19 @@ export default {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 20px;
+    gap: 1.25rem;
   }
 
   .title-icon {
     justify-content: center;
     align-items: center;
-    width: 50px;
-    height: 50px;
+    width: 3.125rem;
+    height: 3.125rem;
   }
 
   .title-icon > img {
-    width: 50px;
-    height: 50px;
+    width: 3.125rem;
+    height: 3.125rem;
     object-fit: contain;
     object-position: center;
     overflow: hidden;
@@ -95,9 +95,9 @@ export default {
   .title {
     margin: 0;
     color: #fff;
-    letter-spacing: 1.6px;
+    letter-spacing: 5%;
     white-space: nowrap;
-    font: 400 30px/30px Overpass, sans-serif;
+    font: 400 1.875rem/1.875rem Overpass, sans-serif;
   }
 
   
@@ -106,8 +106,8 @@ export default {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 10px 20px;
-    gap: 20px;
+    padding: 0.625rem 1.25rem;
+    gap: 1.25rem;
   }
 
   .form-field {
@@ -115,10 +115,10 @@ export default {
     flex-direction: column;
     align-items: flex-start;
     justify-content: space-between;
-    width: 400px;
-    height: 80px;
-    padding: 10px;
-    gap: 10px;
+    width: 25rem;
+    height: 5rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
   }
 
   label {
@@ -126,8 +126,8 @@ export default {
     flex-direction: row;
     align-items: flex-start;
     width: fit-content;
-    height: 30px;
-    gap: 10px;
+    height: 1.875rem;
+    gap: 0.625rem;
   }
 
   .icon {
@@ -135,8 +135,8 @@ export default {
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    width: 30px;
-    height: 30px;
+    width: 1.875rem;
+    height: 1.875rem;
   }
 
   .icon > img {
@@ -147,17 +147,17 @@ export default {
   }
   #username-icon > img {
     width: auto;
-    height: 15px;
+    height: 0.9375rem;
   }
   #password-icon > img {
-    width: 15px;
+    width: 0.9375rem;
     height: auto;
   }
 
   .label {
     color: #fff;
-    letter-spacing: 0.3px;
-    font: 400 15px/30px Overpass, sans-serif;
+    letter-spacing: 2%;
+    font: 400 0.9375rem/1.875rem Overpass, sans-serif;
   }
 
   .input-field {
@@ -167,10 +167,10 @@ export default {
     justify-content: stretch;
     align-self: stretch;
     width: 100%;
-    height: 30px;
-    border-radius: 5px;
-    padding: 3px 10px;
-    box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.25) inset;
+    height: 1.875rem;
+    border-radius: 0.3125rem;
+    padding: 0.1875rem 0.625rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
     background-color: #212121;
   }
 
@@ -180,9 +180,9 @@ export default {
     background-color: #00000000;
     border: none;
     color: #8e8e8e;
-    letter-spacing: 0.6px;
+    letter-spacing: 5%;
     white-space: nowrap;
-    font: 100 12px/20px Overpass, sans-serif;
+    font: 100 0.75rem/1.25rem Overpass, sans-serif;
   }
   input[type=button] {
     width: fit-content;
@@ -190,23 +190,23 @@ export default {
     background-color: #00000000;
     border: none;
     color: #fff;
-    letter-spacing: 0.6px;
+    letter-spacing: 5%;
     white-space: nowrap;
-    font: 300 12px/20px Overpass, sans-serif;
+    font: 300 0.75rem/1.25rem Overpass, sans-serif;
   }
   
   #login-button {
-    width: 220px;
-    height: 70px;
-    padding: 10px;
-    border-radius: 10px;
+    width: 13.75rem;
+    height: 4.375rem;
+    padding: 0.625rem;
+    border-radius: 0.625rem;
     align-self: center;
     border: none;
     background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
     color: #fff;
-    letter-spacing: 0.4px;
+    letter-spacing: 2%;
     white-space: nowrap;
-    font: 600 20px/30px Overpass, sans-serif;
+    font: 600 1.25rem/1.875rem Overpass, sans-serif;
   }
   
   
diff --git a/components/QuickAccess.vue b/components/QuickAccess.vue
index 9b83f1e..a902531 100644
--- a/components/QuickAccess.vue
+++ b/components/QuickAccess.vue
@@ -33,18 +33,18 @@ export default {
     justify-content: center;
     align-self: stretch;
     width: 100%;
-    padding: 30px 50px 50px;
-    gap: 20px;
-    border-radius: 10px;
-    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    padding: 1.875rem 3.125rem 3.125rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
     background-color: #2c2c2c;
   }
   
   .heading {
     color: #fff;
-    letter-spacing: 0.8px;
+    letter-spacing: 5%;
     text-decoration-line: underline;
-    font: 400 16px/32px Overpass, sans-serif;
+    font: 400 1rem/2rem Overpass, sans-serif;
   }
   
   .shortcuts {
@@ -52,8 +52,8 @@ export default {
     flex-direction: row;
     justify-content: space-between;
     align-content: center;
-    padding: 10px 40px;
-    gap: 40px;
+    padding: 0.625rem 2.5rem;
+    gap: 2.5rem;
   }
   
   input {
@@ -61,21 +61,21 @@ export default {
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    width: 240px;
-    height: 64px;
-    border-radius: 10px;
-    padding: 15px 20px;
+    width: 15rem;
+    height: 4rem;
+    border-radius: 0.625rem;
+    padding: 0.9375rem 1.25rem;
     border: none;
     color: #fff;
     text-align: center;
-    letter-spacing: 0.7px;
-    font: 400 14px/32px Overpass, sans-serif;
+    letter-spacing: 5%;
+    font: 400 0.875rem/2rem Overpass, sans-serif;
     background-color: #343434;
   }
   input#pins {
-    border: 1px dashed #454545;
+    border: 0.0625rem dashed #454545;
     color: #8e8e8e;
-    font: 400 14px/32px Overpass, sans-serif;
+    font: 400 0.875rem/2rem Overpass, sans-serif;
     background-color: #34343400;
   }
   
diff --git a/components/server/Client.vue b/components/server/Client.vue
index 57138cd..50edb49 100644
--- a/components/server/Client.vue
+++ b/components/server/Client.vue
@@ -72,20 +72,20 @@
     align-items: flex-start;
     justify-content: center;
     width: 100%;
-    padding: 20px 30px;
-    border-radius: 10px;
-    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
     background-color: #2c2c2c;
   }
   
   
   .client-name {
     align-self: stretch;
-    padding: 20px 0;
+    padding: 1.25rem 0;
     color: #fff;
-    letter-spacing: 0.8px;
+    letter-spacing: 5%;
     text-decoration-line: underline;
-    font: italic 400 16px/187.5% Overpass, -apple-system, Roboto, Helvetica,
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
       sans-serif;
   }
   
@@ -95,12 +95,12 @@
     align-items: center;
     justify-content: flex-start;
     width: 100%;
-    padding: 0 30px;
-    gap: 20px;
-    border-radius: 10px;
+    padding: 0 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
   }
   .data-field#client-id {
-    padding: 10px 30px;
+    padding: 0.625rem 1.875rem;
   }
   .data-field#street-name {
     width: 70%;
@@ -111,20 +111,20 @@
   
   .label {
     color: #fff;
-    letter-spacing: 0.7px;
-    font: 400 14px/30px Overpass, sans-serif;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
   }
   .data {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    padding: 0 10px;
-    border-radius: 5px;
-    box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.25) inset;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
     background-color: #212121;
     color: #fff;
-    letter-spacing: 0.6px;
-    font: 400 12px/250% Overpass, sans-serif;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
   }
   .data#notes {
     align-self: stretch;
@@ -136,7 +136,7 @@
     align-items: center;
     justify-content: flex-start;
     align-self: stretch;
-    padding: 0 10px;
+    padding: 0 0.625rem;
   }
 
   .contact, .address {
@@ -146,14 +146,14 @@
     justify-content: center;
     line-height: normal;
     width: 50%;
-    padding: 20px 10px;
-    border-radius: 5px;
+    padding: 1.25rem 0.625rem;
+    border-radius: 0.3125rem;
   }
   
   .area-title {
     color: #fff;
-    letter-spacing: 0.7px;
-    font: 400 14px/30px Overpass, sans-serif;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
   }
   
   .street-address {
@@ -162,8 +162,8 @@
     align-items: center;
     justify-content: space-between;
     align-self: stretch;
-    padding: 0 30px 0 0;
-    gap: 10px;
+    padding: 0 1.875rem 0 0;
+    gap: 0.625rem;
   }
   
   .notes {
@@ -172,7 +172,7 @@
     align-items: flex-start;
     justify-content: center;
     align-self: stretch;
-    padding: 10px 30px 10px 20px;
+    padding: 0.625rem 1.875rem 0.625rem 1.25rem;
   }
   
   
diff --git a/components/server/ClientQuickAccess.vue b/components/server/ClientQuickAccess.vue
index 8a13f27..92b6240 100644
--- a/components/server/ClientQuickAccess.vue
+++ b/components/server/ClientQuickAccess.vue
@@ -34,18 +34,18 @@
       justify-content: center;
       align-self: stretch;
       width: 100%;
-      padding: 30px 30px 50px;
-      gap: 20px;
-      border-radius: 10px;
-      box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+      padding: 1.875rem 1.875rem 3.125rem;
+      gap: 1.25rem;
+      border-radius: 0.625rem;
+      box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
       background-color: #2c2c2c;
     }
     
     .heading {
       color: #fff;
-      letter-spacing: 0.8px;
+      letter-spacing: 5%;
       text-decoration-line: underline;
-      font: 400 16px/32px Overpass, sans-serif;
+      font: 400 1rem/2rem Overpass, sans-serif;
     }
     
     .shortcuts {
@@ -53,8 +53,8 @@
       flex-direction: row;
       justify-content: space-between;
       align-content: center;
-      padding: 10px 30px;
-      gap: 40px;
+      padding: 0.625rem 1.875rem;
+      gap: 2.5rem;
     }
     
     input {
@@ -62,15 +62,15 @@
       flex-direction: row;
       align-items: center;
       justify-content: center;
-      width: 240px;
-      height: 64px;
-      border-radius: 10px;
-      padding: 15px 20px;
+      width: 15rem;
+      height: 4rem;
+      border-radius: 0.625rem;
+      padding: 0.9375rem 1.25rem;
       border: none;
       color: #fff;
       text-align: center;
-      letter-spacing: 0.7px;
-      font: 400 14px/32px Overpass, sans-serif;
+      letter-spacing: 5%;
+      font: 400 0.875rem/2rem Overpass, sans-serif;
       background-color: #343434;
     }
     
diff --git a/components/server/ClientTable.vue b/components/server/ClientTable.vue
index 866a895..535fc7c 100644
--- a/components/server/ClientTable.vue
+++ b/components/server/ClientTable.vue
@@ -40,16 +40,16 @@
         justify-content: center;
         align-self: stretch;
         width: 100%;
-        padding: 20px 30px;
-        gap: 20px;
-        border-radius: 10px;
-        box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+        padding: 1.25rem 1.875rem;
+        gap: 1.25rem;
+        border-radius: 0.625rem;
+        box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
         background-color: #2c2c2c;
     }
     
     .data-table {
         width: 100%;
-        padding: 0 10px;
+        padding: 0 0.625rem;
         table-layout: fixed;
         border-collapse: collapse;
     }
@@ -57,29 +57,29 @@
     .table-row {
         display: flex;
         flex-direction: row;
-        height: 50px;
-        padding: 10px;
-        gap: 10px;
-        border-top: 1px solid #000000;
+        height: 3.125rem;
+        padding: 0.625rem;
+        gap: 0.625rem;
+        border-top: 0.0625rem solid #000000;
     }
     #table-head {
         border-top: none;
-        border-bottom: 1px solid #000000;
+        border-bottom: 0.0625rem solid #000000;
     }
 
     th, td {
-        height: 30px;
+        height: 1.875rem;
         padding: 0;
         color: #ffffff;
-        letter-spacing: 0.7px;
-        font: 400 14px/30px Overpass, sans-serif;
+        letter-spacing: 5%;
+        font: 400 0.875rem/1.875rem Overpass, sans-serif;
     }
     th {
-        font: 700 14px/30px Overpass, sans-serif;
+        font: 700 0.875rem/1.875rem Overpass, sans-serif;
     }
     .ID {
         width: 40%;
-        border-right: 1px solid #000000;
+        border-right: 0.0625rem solid #000000;
     }
     .Name {
         width: 60%;
diff --git a/documentation/Datenbankmodell_tueitApp.drawio b/documentation/Datenbankmodell_tueitApp.drawio
index 3457fc1..85c4a0b 100644
--- a/documentation/Datenbankmodell_tueitApp.drawio
+++ b/documentation/Datenbankmodell_tueitApp.drawio
@@ -112,13 +112,13 @@
         <mxCell id="DauqCNUrC7Z9yIe88X-r-57" value="CPU" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="480" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-58" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;div class=&quot;clearfix&quot;&gt;      &lt;label style=&quot;padding-right: 0px;&quot; class=&quot;control-label&quot;&gt;RAM&lt;/label&gt;     &lt;/div&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-58" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;div class=&quot;clearfix&quot;&gt;      &lt;label style=&quot;padding-right: 0rem;&quot; class=&quot;control-label&quot;&gt;RAM&lt;/label&gt;     &lt;/div&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="510" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-59" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0px;&quot; class=&quot;control-label&quot;&gt;storageConfiguration&lt;/label&gt;     &lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-59" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0rem;&quot; class=&quot;control-label&quot;&gt;storageConfiguration&lt;/label&gt;     &lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="540" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-5" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0px;&quot; class=&quot;control-label&quot;&gt;miscellaneous&lt;/label&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+        <mxCell id="WukdXvazNq34soQIU5Al-5" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0rem;&quot; class=&quot;control-label&quot;&gt;miscellaneous&lt;/label&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="570" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="qbUp6gtjYndA0fy5zK6_-3" value="softwareBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
diff --git a/layouts/Actionbar.vue b/layouts/Actionbar.vue
index 7d0eb43..5ac4483 100644
--- a/layouts/Actionbar.vue
+++ b/layouts/Actionbar.vue
@@ -83,14 +83,16 @@ export default {
   .actionbar {
     display: flex;
     flex-direction: column;
+    position: sticky;
+    top: 5rem;
     align-items: flex-start;
     justify-content: center;
     width: fit-content;
     height: fit-content;
-    border-radius: 10px;
-    padding: 30px 10px;
-    gap: 20px;
-    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    border-radius: 0.625rem;
+    padding: 1.875rem 0.625rem;
+    gap: 1.25rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
     background-color: #2c2c2c;
   }
 
@@ -101,8 +103,8 @@ export default {
     align-items: stretch;
     justify-content: center;
     align-self: stretch;
-    padding: 20px 0;
-    gap: 20px;
+    padding: 1.25rem 0;
+    gap: 1.25rem;
   }
 
 
@@ -111,8 +113,8 @@ export default {
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
-    height: 30px;
-    border-radius: 10px;
+    height: 1.875rem;
+    border-radius: 0.625rem;
     border: none;
     background-color: #2c2c2c;
     transition-duration: 0.5s;
@@ -127,13 +129,13 @@ export default {
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    width: 30px;
-    height: 30px;
+    width: 1.875rem;
+    height: 1.875rem;
   }
   #indicator-icon {
-    width: 30px;
-    height: 30px;
-    border-radius: 5px;
+    width: 1.875rem;
+    height: 1.875rem;
+    border-radius: 0.3125rem;
     background-color: #2c2c2c;
     transition-duration: 0.5s;
   }
@@ -142,24 +144,24 @@ export default {
   }
 
   .icon > img {
-    width: 14px;
-    height: 14px;
+    width: 0.875rem;
+    height: 0.875rem;
     filter: invert(100%);
     object-fit: contain;
     object-position: center;
     overflow: hidden;
   }
   #indicator-icon > img {
-    height: 20px;
+    height: 1.25rem;
   }
 
 
   .label {
     color: #fff;
-    letter-spacing: 0.7px;
+    letter-spacing: 5%;
     align-self: center;
     white-space: nowrap;
-    font: 400 14px/20px Overpass, sans-serif;
+    font: 400 0.875rem/1.25rem Overpass, sans-serif;
   }
   
 
diff --git a/layouts/Navigationbar.vue b/layouts/Navigationbar.vue
index 43bd52e..42a1f39 100644
--- a/layouts/Navigationbar.vue
+++ b/layouts/Navigationbar.vue
@@ -1,60 +1,60 @@
 <template>
-  <aside :class="[darkMode ? 'navbar-dark' : 'navbar-light', isExpanded ? 'is-expanded' : 'is-not-expanded']" >
+  <aside :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']" >
     <div class="toggle">
-      <div v-if="isExpanded" :class="{ 'darkStylesIcon': darkMode, 'lightStylesIcon': !darkMode }" id="back-icon">
-        <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy" src="../icons/Back-Icon.svg" />
+      <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="{ 'darkStylesIcon': darkMode, 'lightStylesIcon': !darkMode }" id="indicator-icon" @click="toggleSidebar">
-        <img :style="[darkMode ? darkStylesImg : lightStylesImg ]" 
-          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 :class="{ 'dark-home-menu': darkMode, 'light-home-menu': !darkMode }" id="home-menu">
-        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="home-button">
+      <nav id="home-menu" :class="[ darkMode ? 'menu-darkmode' : 'menu-lightmode' ]">
+        <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="home-button">
           <div class="icon" id="home-icon">
-            <img :style="darkMode ? darkStylesImg : lightStylesImg" 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>
-          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Home</pre>
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Home</pre>
         </button>
       </nav>
       <nav id="site-menu">
-        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="checklists-button">
+        <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="checklists-button">
           <div class="icon" id="checklists-icon">
-            <img :style="darkMode ? darkStylesImg : lightStylesImg" 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>
-          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Checklists</pre>
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Checklists</pre>
         </button>
-        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="assets-button">
+        <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="assets-button">
           <div class="icon" id="assets-icon">
-            <img :style="darkMode ? darkStylesImg : lightStylesImg" 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>
-          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Config Items</pre>
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Config Items</pre>
         </button>
-        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="solutions-button">
+        <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="solutions-button">
           <div class="icon" id="solutions-icon">
-            <img :style="darkMode ? darkStylesImg : lightStylesImg" 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>
-          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Solutions</pre>
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Solutions</pre>
         </button>
-        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="accounting-button">
+        <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="accounting-button">
           <div class="icon" id="accounting-icon">
-            <img :style="darkMode ? darkStylesImg : lightStylesImg" 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>
-          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Accounting</pre>
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Accounting</pre>
         </button>
-        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="clients-button">
+        <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="clients-button">
           <div class="icon" id="clients-icon">
-            <img :style="darkMode ? darkStylesImg : lightStylesImg" 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>
-          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Clients</pre>
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Clients</pre>
         </button>
       </nav>
     </div>
@@ -71,18 +71,6 @@ export default {
     return {
       darkMode: true,
       isExpanded: true,
-      darkStylesImg: {
-        filter: 'invert(100%)',
-      },
-      lightStylesImg: {
-        filter: 'none',
-      },
-      darkStylesLabel: {
-        color: '#fff',
-      },
-      lightStylesLabel: {
-        color: '#000',
-      },
     };
   },
   methods: {
@@ -102,58 +90,44 @@ export default {
 }
 
 aside {
-  transition: 0.2s ease-out;
   display: flex;
   flex-direction: column;
-  width: calc(2.5rem + 2.5rem);
-  overflow: hidden;
+  position: sticky;
+  top: 5rem;
+  width: 3.125rem;
+  transition: 0.5s ease-in-out;
 }
-
 aside.is-expanded {
-  width: 238px;
-  transition: 0.5s ease-out;
+  width: 12.5rem;
 }
 
 .is-expanded .label {
   opacity: 1;
-  transition: 0.5s ease-out;
+  transition: 0.5s ease-in-out;
 }
-
-.is-not-expanded .darkStylesIcon {
+.is-not-expanded #indicator-icon {
   transform: rotate(180deg);
-  transition: 0.5s ease-out;
-}
-
-.is-not-expanded .lightStylesIcon {
-  transform: rotate(180deg);
-  transition: 0.5s ease-out;
+  transition: 0.5s ease-in-out;
 }
 
 
-.navbar-dark {
+.navbar {
   display: flex;
   flex-direction: column;
+  height: fit-content;
+  border-radius: 0.625rem;
   align-items: stretch;
   justify-content: center;
-  height: fit-content;
-  border-radius: 10px;
-  gap: 10px;
-  padding: 15px;
+  gap: 0.625rem;
+  padding: 0.9375rem;
   margin: 0;
-  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
-  background-color: #2c2c2c;
 }
-
-.navbar-light {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: fit-content;
-  border-radius: 10px;
-  gap: 10px;
-  padding: 15px;
-  margin: 0;
-  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+.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;
 }
 
@@ -161,142 +135,113 @@ aside.is-expanded {
 .toggle {
   display: flex;
   flex-direction: row;
+  height: 2.5rem;
   align-items: center;
   justify-content: space-between;
-  height: 40px;
 }
 
 
-
 .menus {
   display: flex;
   flex-direction: column;
   position: relative;
-  transition: 0.2s ease-out;
   justify-content: flex;
-  padding: 20px 0;
-  gap: 30px;
+  padding: 1.25rem 0;
+  gap: 1.875rem;
+  transition: 0.5s ease-in-out;
 }
 
+
 nav {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding-top: 0.8rem;
-  padding-bottom: 0.8rem;
-  gap: 30px;
+  padding: 0.9375rem 0;
+  gap: 1.875rem;
 }
+.menu-darkmode {
+  border-bottom: 0.0625rem solid #8E8E8E;
+}
+.menu-lightmode {
+  border-bottom: 0.0625rem solid #BABABA;
+}
+
+
 
 button {
   display: flex;
   flex-direction: row;
+  align-self: stretch;
+  height: 2.1875rem;
+  border-radius: 0.3125rem;
   align-items: center;
   justify-content: flex-start;
-  align-self: stretch;
-  height: 35px;
-  border-radius: 5px;
-  gap: 5px;
+  gap: 0.3125rem;
   border: none;
-  background-color: #2c2c2c;
-  transition-duration: 0.5s;
+  transition: 0.5s ease-in-out;
 }
-
-.dark-menu {
-  background-color: #2c2c2c;
+.button-darkmode {
+  background-color: #2C2C2C;
 }
-
-.light-menu {
+.button-lightmode {
   background-color: #FFFFFF;
 }
-
-.dark-menu:hover {
+.button-darkmode:hover, 
+.indicator-darkmode:hover,
+.back-darkmode:hover {
   background-color: #444444;
 }
 
-.light-menu:hover {
+.button-lightmode:hover, 
+.indicator-lightmode:hover,
+.back-lightmode:hover {
   background-color: #ACACAC;
 }
 
+
 .icon {
   display: flex;
   flex-direction: row;
+  width: 2.1875rem;
+  height: 2.1875rem;
   align-items: center;
   justify-content: center;
-  width: 35px;
-  height: 35px;
-  transition: 0.2s ease-out;
+  transition: 0.2s ease-in-out;
 }
-
-.lightStylesIcon {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 35px;
-  height: 35px;
-  transition: 0.2s ease-out;
-}
-
-.darkStylesIcon {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 35px;
-  height: 35px;
-  transition: 0.2s ease-out;
-}
-
-#back-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 5px;
+#back-icon, #indicator-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.3125rem;
   transition-duration: 0.5s;
   transition: 0.2s ease-out;
 }
 
-#indicator-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 5px;
-  transition-duration: 0.5s;
-  transition: transform 0.3s;
-}
 
-.lightStylesIcon:hover {
-  background-color: #ACACAC;
-}
-
-.darkStylesIcon:hover {
-  background-color: #444444;
-}
-
-.icon>img,
-.lightStylesIcon>img,
-.darkStylesIcon>img {
-  width: 20px;
-  height: 20px;
+img {
+  width: 1.25rem;
+  height: 1.25rem;
   object-fit: contain;
   object-position: center;
   overflow: hidden;
   transition: 0.2s ease-out;
 }
-
-.dark-home-menu {
-  border-bottom: 1px solid #8e8e8e;
-}
-
-.light-home-menu {
-  border-bottom: 1px solid #BABABA;
+.img-darkmode {
+  filter: invert(100%);
 }
 
 .label {
-  letter-spacing: 0.7px;
+  letter-spacing: 5%;
   align-self: center;
   white-space: nowrap;
   margin: auto 0;
-  font: 600 14px/20px Overpass, sans-serif;
+  font: 600 0.875rem/1.25rem Overpass, sans-serif;
   opacity: 0;
   transition: opacity 0.5s ease-out; 
 }
+.label-darkmode {
+  color: #FFFFFF;
+}
+.label-lightmode {
+  color: #000000;
+}
 </style>
\ No newline at end of file
diff --git a/layouts/PageHeader.vue b/layouts/PageHeader.vue
index 9771ef9..11f4971 100644
--- a/layouts/PageHeader.vue
+++ b/layouts/PageHeader.vue
@@ -30,43 +30,48 @@ export default {
 
     header {
         display: flex;
+        flex-direction: row;
+        position: sticky;
+        top: 0;
+        width: 100%;
+        height: 4.375rem;
+        align-self: stretch;
         justify-content: space-between;
         align-items: center;
-        align-self: stretch;
+        padding: 0.625rem 1.25rem;
         background-color: #2c2c2c;
-        height: 60px;
-        padding: 10px 20px;
     }
     
     #header-logo {
         object-fit: contain;
         object-position: center;
-        width: 80px;
-        height: 40px;
+        width: 5rem;
+        height: 2.5rem;
         justify-content: center;
         align-items: center;
         overflow: hidden;
     }
 
     .profile {
-        align-items: flex-end;
         display: flex;
-        gap: 10px;
-        padding: 0 10px;
+        flex-direction: row;
+        align-items: flex-end;
+        gap: 0.625rem;
+        padding: 0 0.625rem;
     }
     .username {
-        color: #fff;
-        text-align: right;
-        letter-spacing: 0.8px;
         align-self: center;
         margin: auto 0;
-        font: 200 14px Overpass, sans-serif;
+        color: #fff;
+        text-align: right;
+        font: 200 0.875rem Overpass, sans-serif;
+        letter-spacing: 5%;
     }
     .picture {
         display: flex;
+        width: 2.5rem;
+        height: 2.5rem;
         border-radius: 50%;
-        width: 40px;
-        height: 40px;
         background-color: #fff;
     }
 
diff --git a/layouts/default.vue b/layouts/default.vue
index 1edb013..705413a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -36,8 +36,8 @@ export default {
     display: flex;
     flex-direction: row;
     width: 100%;
-    gap: 10px;
-    padding: 10px;
+    padding: 0.625rem;
+    gap: 0.625rem;
     background-color: #212121;
   }
   
diff --git a/layouts/empty.vue b/layouts/empty.vue
index ea8f794..19d5943 100644
--- a/layouts/empty.vue
+++ b/layouts/empty.vue
@@ -30,8 +30,8 @@
     main {
       display: flex;
       flex-direction: row;
-      gap: 10px;
-      padding: 10px 25px 10px 10px;
+      gap: 0.625rem;
+      padding: 0.625rem 1.5625rem 0.625rem 0.625rem;
       background-color: #212121;
     }
     
diff --git a/pages/clients.vue b/pages/clients.vue
index c4db8e7..36937e1 100644
--- a/pages/clients.vue
+++ b/pages/clients.vue
@@ -11,13 +11,13 @@
 </template>
   
   
-  <script setup>
+<script setup>
   definePageMeta({
     layout: 'default'
   })
-  </script>
-  
-  <script>
+</script>
+
+<script>
   import ClientTable from "../components/server/ClientTable.vue";
   import Client from "../components/server/Client.vue";
   import ClientQuickAccess from "../components/server/ClientQuickAccess.vue";
@@ -25,60 +25,61 @@
   import ClientEmployee from "../components/server/ClientEmployee.vue";
 
   export default {
-      name: "ClientsPage",
-      components: {
-        ClientTable,
-        Client,
-        ClientQuickAccess,
-        ClientEmployees,
-        ClientEmployee,
-      }
+    name: "ClientsPage",
+    components: {
+      ClientTable,
+      Client,
+      ClientQuickAccess,
+      ClientEmployees,
+      ClientEmployee,
+    }
+  }
+
+</script>
+  
+    
+    
+<style scoped>
+
+  * {
+    box-sizing: border-box;
+  }
+
+  
+  #content {
+    display: flex;
+    flex-direction: column;
+    float: left;
+    justify-content: stretch;
+    align-items: stretch;
+    width: 100%;
+    flex-grow: 1;
+    gap: 0.625rem;
+    padding: 0 1.25rem;
   }
   
-  </script>
-    
-    
-    
-  <style scoped>
+  #content-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 3.125rem;
+  }
+  #page-name {
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
+  }
+
+  #content-body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 1.25rem;
+    margin-bottom: 0.625rem;
+    border-radius: 0.625rem;
+  }
+
   
-    * {
-      box-sizing: border-box;
-    }
-  
-    
-    #content {
-      display: flex;
-      flex-direction: column;
-      justify-content: stretch;
-      align-items: stretch;
-      flex-grow: 1;
-      gap: 10px;
-      padding: 0 20px;
-    }
-    
-    #content-header {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 50px;
-    }
-    #page-name {
-      color: #fff;
-      letter-spacing: 1.2px;
-      font: 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
-        sans-serif;
-    }
-  
-    #content-body {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      gap: 20px;
-      margin-bottom: 10px;
-      border-radius: 10px;
-    }
-  
-    
-  </style>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/pages/home.vue b/pages/home.vue
index 5c9597b..145d377 100644
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -18,63 +18,64 @@
   })
 </script>
 
-  <script>
+<script>
   import Navigationbar from "../layouts/Navigationbar.vue";
   import Dashboard from "../components/Dashboard.vue";
   import QuickAccess from "../components/QuickAccess.vue";
-  
+
   export default {
-      name: "HomePage",
-      components: {
-        Navigationbar,
-        Dashboard,
-        QuickAccess,
-      }
+    name: "HomePage",
+    components: {
+      Navigationbar,
+      Dashboard,
+      QuickAccess,
+    }
+  }
+
+</script>
+    
+    
+    
+<style>
+
+  * {
+    box-sizing: border-box;
   }
   
-  </script>
-    
-    
-    
-  <style>
+  #content {
+    display: flex;
+    flex-direction: column;
+    float: left;
+    justify-content: stretch;
+    align-items: stretch;
+    width: 100%;
+    flex-grow: 1;
+    gap: 0.625rem;
+    padding: 0 1.25rem;
+  }
   
-    * {
-      box-sizing: border-box;
-    }
-    
-    #content {
-      display: flex;
-      flex-direction: column;
-      justify-content: stretch;
-      align-items: stretch;
-      flex-grow: 1;
-      gap: 10px;
-      padding: 0 20px;
-    }
-    
-    #content-header {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 50px;
-    }
-    #page-name {
-      color: #fff;
-      letter-spacing: 1.2px;
-      font: 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
-        sans-serif;
-    }
+  #content-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 3.125rem;
+  }
+  #page-name {
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
+  }
+
+  #content-body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 1.25rem;
+    margin-bottom: 0.625rem;
+    border-radius: 0.625rem;
+  }
+
   
-    #content-body {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      gap: 20px;
-      margin-bottom: 10px;
-      border-radius: 10px;
-    }
-  
-    
-  </style>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 4cdafb6..f28ab79 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -10,72 +10,74 @@
 </template>
   
   
-  <script setup>
+<script setup>
   definePageMeta({
     layout: 'default'
   })
-  </script>
-  
-  <script>
+</script>
+
+<script>
   export default {
-      name: "Testpage",
-      components: {
-      }
+    name: "Testpage",
+    components: {
+    }
+  }
+
+</script>
+    
+    
+    
+<style scoped>
+
+  * {
+    box-sizing: border-box;
+  }
+
+  
+  #content {
+    display: flex;
+    flex-direction: column;
+    float: left;
+    justify-content: stretch;
+    align-items: stretch;
+    width: 100%;
+    flex-grow: 1;
+    gap: 0.625rem;
+    padding: 0 1.25rem;
   }
   
-  </script>
-    
-    
-    
-  <style scoped>
+  #content-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 3.125rem;
+  }
+  #page-name {
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
+      sans-serif;
+  }
+
+  #content-body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 1.25rem;
+    margin-bottom: 0.625rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+    background-color: #2C2C2C;
+  }
+
+  #stuff {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 1.25rem;
+    padding: 1.25rem 1.875rem;
+  }
   
-    * {
-      box-sizing: border-box;
-    }
-  
-    
-    #content {
-      display: flex;
-      flex-direction: column;
-      justify-content: stretch;
-      align-items: stretch;
-      flex-grow: 1;
-      gap: 10px;
-      padding: 0 20px;
-    }
-    
-    #content-header {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 50px;
-    }
-    #page-name {
-      color: #fff;
-      letter-spacing: 1.2px;
-      font: italic 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
-        sans-serif;
-    }
-  
-    #content-body {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      gap: 20px;
-      margin-bottom: 10px;
-      border-radius: 10px;
-      box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
-      background-color: #2c2c2c;
-    }
-  
-    #stuff {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      gap: 20px;
-      padding: 20px 30px;
-    }
-    
-  </style>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/pages/login.vue b/pages/login.vue
index a1410df..beeba8e 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -40,27 +40,27 @@ export default {
   #content {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
+    float: left;
+    justify-content: stretch;
+    align-items: stretch;
     width: 100%;
-    height: 100%;
-    gap: 10px;
-    padding: 0 20px;
+    flex-grow: 1;
+    gap: 0.625rem;
+    padding: 0 1.25rem;
   }
   
   #content-header {
     display: flex;
     flex-direction: row;
-    align-items: center;
     justify-content: center;
+    align-items: center;
     width: 100%;
-    height: 50px;
+    height: 3.125rem;
   }
   #page-name {
     color: #fff;
-    letter-spacing: 1.2px;
-    font: italic 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
-      sans-serif;
+    letter-spacing: 5%;
+    font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
   }
 
   #content-body {
@@ -70,9 +70,9 @@ export default {
     justify-content: flex-start;
     width: fit-content;
     height: fit-content;
-    gap: 20px;
-    margin-bottom: 10px;
-    border-radius: 10px;
+    gap: 1.25rem;
+    margin-bottom: 0.625rem;
+    border-radius: 0.625rem;
   }