diff --git a/pages/settings.vue b/pages/settings.vue
index 3aac506..089f44b 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -8,7 +8,7 @@
               <Icon class="back-button" size="2em" name="lucide:circle-arrow-left" alt="Back"></Icon>
             </span>
           </p>
-          <span class="spacer"></span>
+          <verticalSpacer />
 
           <!-- categories and dynamic settings pages -->
           <div v-for="category in categories" :key="category.displayName">
@@ -17,13 +17,13 @@
               :class="{ 'sidebar-focus': selectedPage === page.displayName }">
               {{ page.displayName }}
             </li>
-            <span class="spacer"></span>
+            <verticalSpacer />
           </div>
           
           <p>
             <Button text="Log Out" :callback=logout variant="scary"></Button>
           </p>
-          <span class="spacer"></span>
+          <verticalSpacer />
 
           <p id="links-and-socials">
             <NuxtLink href="https://git.gorb.app/gorb/frontend" title="Source"><Icon name="lucide:git-branch-plus" /></NuxtLink>
@@ -196,13 +196,6 @@ onMounted(() => {
   margin-right: 0.2em;
 }
 
-.spacer {
-  height: 0.2dvh;
-  display: block;
-  margin: 0.8dvh 1dvw;
-  background-color: var(--padding-color);
-}
-
 /* applies to child pages too */
 :deep(.subtitle) {
   display: block;