diff --git a/_ci/spell/dict.txt b/_ci/spell/dict.txt
index dde643487..aac92dfbf 100644
--- a/_ci/spell/dict.txt
+++ b/_ci/spell/dict.txt
@@ -43,4 +43,5 @@ Speaketh
 runneth
 navigateth
 provideth
-Ensureth
\ No newline at end of file
+Ensureth
+replacestate
\ No newline at end of file
diff --git a/front/src/lib/components/PageNav.svelte b/front/src/lib/components/PageNav.svelte
index 4e0ef7a8d..d5bb00f1e 100644
--- a/front/src/lib/components/PageNav.svelte
+++ b/front/src/lib/components/PageNav.svelte
@@ -33,9 +33,12 @@
       type="checkbox"
       name="page-navigation-checkbox"
       id="page-navigation-checkbox"
-      tabindex="-1"
     />
-    <label for="page-navigation-checkbox" class="page-navigation-toggle">
+    <label
+      for="page-navigation-checkbox"
+      class="page-navigation-toggle"
+      aria-label="Show Page Navigation"
+    >
       <ListIcon class="page-navigation-open" />
       <ClosePageNav classList="page-navigation-close" />
     </label>
diff --git a/front/src/lib/components/icons/ClosePostNav.svelte b/front/src/lib/components/icons/ClosePostNav.svelte
deleted file mode 100644
index a52f5b64c..000000000
--- a/front/src/lib/components/icons/ClosePostNav.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-  export let classes = 'post-navigation-close';
-</script>
-
-<svg
-  viewBox="0 0 24 24"
-  height="1.2em"
-  width="1.2em"
-  xmlns="http://www.w3.org/2000/svg"
-  class={classes}
->
-  <path
-    d="M 16.396 7.293 C 16.787 7.684 16.787 8.317 16.396 8.708 L 13.414 11.689 L 16.09 14.364 C 16.635 14.909 16.385 15.839 15.641 16.038 C 15.296 16.13 14.928 16.032 14.675 15.779 L 12 13.103 L 9.325 15.779 C 8.78 16.324 7.85 16.074 7.651 15.33 C 7.559 14.985 7.657 14.617 7.91 14.364 L 10.586 11.689 L 7.604 8.708 C 7.059 8.163 7.309 7.233 8.053 7.034 C 8.399 6.941 8.767 7.04 9.02 7.293 L 12 10.276 L 14.981 7.294 C 15.372 6.903 16.005 6.903 16.396 7.294 L 16.396 7.293 Z"
-    style="transform-origin: 12px 11.536px;"
-    fill="currentColor"
-  />
-  <path
-    fill-rule="evenodd"
-    d="M 4 1.548 C 2.343 1.548 1 2.769 1 4.275 L 1 18.82 C 1 20.327 2.343 21.548 4 21.548 L 20 21.548 C 21.657 21.548 23 20.327 23 18.82 L 23 4.275 C 23 2.769 21.657 1.548 20 1.548 L 4 1.548 Z M 20 3.366 L 4 3.366 C 3.448 3.366 3 3.772 3 4.275 L 3 18.82 C 3 19.323 3.448 19.73 4 19.73 L 20 19.73 C 20.552 19.73 21 19.323 21 18.82 L 21 4.275 C 21 3.772 20.552 3.366 20 3.366 Z"
-    clip-rule="evenodd"
-    style="transform-origin: 12px 11.548px;"
-    fill="currentColor"
-  />
-</svg>
diff --git a/front/src/lib/styles/base/layout.css b/front/src/lib/styles/base/layout.css
index 37f893952..9bcc7c6a8 100644
--- a/front/src/lib/styles/base/layout.css
+++ b/front/src/lib/styles/base/layout.css
@@ -6,8 +6,8 @@
   justify-content: center;
   align-items: center;
   justify-items: center;
-  padding-right: 0;
-  padding-left: 0;
+  padding-right: 0.25rem;
+  padding-left: 0.25rem;
   width: 100%;
   max-width: 64rem /* 1024px */;
   @media screen and (min-width: 333px) {
@@ -31,13 +31,12 @@
   position: relative;
   align-items: center;
   z-index: 1;
-  padding: 1rem;
-  padding-bottom: 0;
+  padding: 1rem 1.5rem 0 1.5rem;
   @media screen and (min-width: 480px) {
     padding-top: 1.25rem;
   }
   @media screen and (min-width: 640px) {
-    padding: 2.5rem 2.25rem 0 2.25rem;
+    padding: 2rem 2.25rem 0 2.25rem;
   }
 }
 body.ready .header {
diff --git a/front/src/lib/styles/base/theme.css b/front/src/lib/styles/base/theme.css
index 9d7a4844b..6e5e7822f 100644
--- a/front/src/lib/styles/base/theme.css
+++ b/front/src/lib/styles/base/theme.css
@@ -61,6 +61,7 @@
 }
 
 .category-posts-transition-container {
+  box-shadow: var(--shadow-elevation-low);
   background: var(--rim-light-bg), var(--bg-clr);
   @media screen and (min-width: 640px) {
     box-shadow: var(--shadow-elevation-high);
@@ -90,16 +91,16 @@
     --highlight-clr: var(--jasper);
 
     --rim-light-bg: linear-gradient(
-      5deg,
+      10deg,
       var(--bg-clr) 33%,
       var(--bg-clr) 77%,
-      var(--sunshine) 100%
+      var(--sun) 133%
     );
     --category-rim-light-bg: linear-gradient(
       35deg,
       var(--bg-clr) 33%,
       var(--bg-clr) 77%,
-      var(--rim-clr) 100%
+      var(--sun) 150%
     );
     --rim-light-mask-bg: linear-gradient(3deg, transparent, var(--rim-clr));
     --category-rim-light-mask-bg: linear-gradient(
@@ -217,8 +218,8 @@
     }
 
     .privacy,
-    .post,
-    .category-posts-transition-container {
+    .post {
+      box-shadow: var(--shadow-elevation-low);
       background: var(--rim-light-bg), var(--bg-clr);
       &::before {
         background: var(--rim-light-mask-bg);
@@ -238,8 +239,7 @@
     }
 
     .privacy,
-    .post-article,
-    .category-list {
+    .post-article {
       a:not(.heading-anchor-link) {
         border-bottom: 1px solid var(--link-clr);
         color: var(--link-clr);
@@ -454,11 +454,19 @@
 
     .page-navigation.mini {
       input#page-navigation-checkbox {
+        &:focus,
+        &:focus-visible {
+          ~ label {
+            background-color: var(--sun-50);
+            color: var(--violet);
+          }
+        }
         ~ label {
           background-color: var(--lemon-50-a75);
           color: var(--violet-a50);
           &:hover,
-          &:focus {
+          &:focus,
+          &:focus-visible {
             background-color: var(--sun-50);
             color: var(--violet);
           }
@@ -657,8 +665,7 @@
     }
 
     .privacy,
-    .post-article,
-    .category-list {
+    .post-article {
       a:not(.heading-anchor-link) {
         border-bottom: 1px solid var(--celestial-a75);
         color: var(--celestial-a75);
@@ -864,11 +871,18 @@
 
     .page-navigation.mini {
       input#page-navigation-checkbox {
-        background-color: var(--rich-black-a75);
+        &:focus,
+        &:focus-visible {
+          ~ label {
+            background-color: var(--grape);
+            color: var(--celestial);
+          }
+        }
         ~ label {
           background-color: var(--oxford-blue-a50);
           &:hover,
-          &:focus {
+          &:focus,
+          &:focus-visible {
             background-color: var(--grape);
             color: var(--celestial);
           }
diff --git a/front/src/lib/styles/components/nav.css b/front/src/lib/styles/components/nav.css
index 03271dc8a..3a3abe0bc 100644
--- a/front/src/lib/styles/components/nav.css
+++ b/front/src/lib/styles/components/nav.css
@@ -10,17 +10,21 @@
     top 0.3s ease,
     opacity 0.3s ease,
     color 0.3s ease;
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
-  background-color: rgb(var(--background-end-rgb));
-  padding: 0.75rem 1.25rem;
+  box-shadow: var(--shadow-elevation-low);
+  background-color: var(--bg-clr);
+  padding: 0.5rem 1rem;
   &:focus,
   &:focus-visible {
     top: 2rem;
     opacity: 1;
   }
+  @media screen and (min-width: 640px) {
+    padding: 0.75rem 1.25rem;
+  }
 }
 
 .nav-home {
+  vertical-align: bottom;
   transition: unset;
   transition: font-size, color;
   transition-duration: var(--transition-duration);
@@ -61,7 +65,7 @@
 }
 
 .nav-link {
-  vertical-align: text-top;
+  vertical-align: bottom;
   transition: opacity, border;
   transition-duration: var(--transition-duration);
   transition-timing-function: var(--transition-timing-function);
diff --git a/front/src/lib/styles/components/page-nav.css b/front/src/lib/styles/components/page-nav.css
index ab0c21f4c..c529fa93b 100644
--- a/front/src/lib/styles/components/page-nav.css
+++ b/front/src/lib/styles/components/page-nav.css
@@ -9,7 +9,6 @@
   }
   li {
     position: relative;
-    overflow: hidden;
     font-size: 0.875rem;
     list-style-type: none;
   }
@@ -69,8 +68,29 @@
       padding: 0.33rem 0.33rem 0.36rem 0.36rem;
     }
     input#page-navigation-checkbox {
-      display: none;
-      border-radius: 0.77rem;
+      position: absolute;
+      opacity: 0;
+      outline: none;
+      border-radius: 0.33rem;
+      width: 0;
+      height: 0;
+      &:focus,
+      &:focus-visible {
+        ~ label {
+          mix-blend-mode: difference;
+          outline-style: dotted;
+          outline-width: thin;
+          outline-offset: 1px;
+        }
+      }
+      &:checked {
+        &:focus,
+        &:focus-visible {
+          ~ label {
+            mix-blend-mode: normal;
+          }
+        }
+      }
       ~ label {
         .page-navigation-open {
           display: block;
@@ -82,9 +102,10 @@
           position: relative;
           top: -1.85rem;
           right: -333px;
+          visibility: hidden;
           opacity: 0;
           backdrop-filter: blur(0.5rem);
-          transition-property:
+          transition:
             right var(--transition-duration),
             opacity var(--transition-duration),
             max-height 0;
@@ -119,11 +140,8 @@
           }
           & + .page-navigation-list {
             right: 0;
+            visibility: visible;
             opacity: 1;
-            transition:
-              max-height 0 0,
-              opacity,
-              max-height;
             max-height: 100%;
             & label.bottom {
               box-shadow: none;
diff --git a/front/src/lib/styles/components/theme-toggle.css b/front/src/lib/styles/components/theme-toggle.css
index 77df0303d..e71f1846b 100644
--- a/front/src/lib/styles/components/theme-toggle.css
+++ b/front/src/lib/styles/components/theme-toggle.css
@@ -1,8 +1,9 @@
 .theme-toggle {
-  transition-property: opacity;
-  padding: 0.75rem 0 0.75rem 0.75rem;
-  @apply dg--transition-effect;
   opacity: 0.7;
+  transition-duration: var(--transition-duration);
+  transition-property: opacity;
+  transition-timing-function: var(--transition-timing-function);
+  padding: 1rem 0 0.75rem 0.75rem;
   &:hover,
   &:focus,
   &:focus-visible,
diff --git a/front/src/lib/styles/pages/category.css b/front/src/lib/styles/pages/category.css
index 0385546ca..986b3208c 100644
--- a/front/src/lib/styles/pages/category.css
+++ b/front/src/lib/styles/pages/category.css
@@ -22,6 +22,9 @@
       top: 2.5rem;
       right: 0;
       padding: 0 0.5rem;
+      label:not(.bottom) {
+        top: 3px;
+      }
     }
   }
   .category-posts-list,
diff --git a/front/src/lib/styles/pages/post.css b/front/src/lib/styles/pages/post.css
index a51fbfea8..5826d364d 100644
--- a/front/src/lib/styles/pages/post.css
+++ b/front/src/lib/styles/pages/post.css
@@ -1,13 +1,16 @@
 .post {
   display: block;
   position: relative;
-  margin-top: 2.25rem;
+  margin-top: 1.75rem;
   border-radius: 0.77rem;
+  @media screen and (min-width: 333px) {
+    margin-top: 0.75rem;
+  }
   @media screen and (min-width: 640px) {
     margin-top: 1.5rem;
   }
   @media screen and (min-width: 768px) {
-    margin-top: 2.75rem;
+    margin-top: 3.5rem;
     padding: 2.33rem;
   }
   &::before {