diff --git a/ui/src/css/globals/_typography.scss b/ui/src/css/globals/_typography.scss
index c56cb5aa..e2d57b24 100644
--- a/ui/src/css/globals/_typography.scss
+++ b/ui/src/css/globals/_typography.scss
@@ -19,7 +19,7 @@
 
 /* Body Styles */
 body {
-  color: var(--guk-color-neutral-600);
+  color: var(--guk-color-neutral-900);
   font-family: var(--guk-font-family);
   font-size: var(--guk-font-size-base); /* 1rem */
   line-height: var(--guk-line-height-normal); /* 1.5 */
@@ -85,7 +85,7 @@ h6 {
 
 /* Inline Code */
 code {
-  background-color: var(--guk-color-neutral-100); /* #f5f7fa */
+  background-color: var(--guk-color-neutral-50); /* #f5f7fa */
   border-radius: var(--guk-border-rounded); /* 4px */
   font-family: var(--guk-font-family-monospace, monospace);
   font-size: 0.95em;
diff --git a/ui/src/css/layout.scss b/ui/src/css/layout.scss
index 7cabce1d..e5a30334 100644
--- a/ui/src/css/layout.scss
+++ b/ui/src/css/layout.scss
@@ -9,7 +9,8 @@
   overflow-y: auto;
   position: sticky;
   top: 0;
-  width: 300px;
+  width: 20%;
+  max-width: 300px;  
   flex: 0 0 auto;
 }
 
@@ -106,7 +107,6 @@ button.collapse-toggle {
 }
 
 .navbar, .article-wrapper {
-  max-width: 60rem;
   margin: 0 var(--side-margin);
 }
 
@@ -180,7 +180,8 @@ button.collapse-toggle {
   margin-left: var(--lg);
   flex-grow: 0;
   flex-shrink: 0;
-  width: 200px;
+  width: 20%;
+  max-width: 300px;  
   max-height: 80vh;
   position: sticky;
   top: 10vh;
diff --git a/ui/src/css/toc.scss b/ui/src/css/toc.scss
index 2936bedc..091943c2 100644
--- a/ui/src/css/toc.scss
+++ b/ui/src/css/toc.scss
@@ -1,5 +1,3 @@
-/* toc.scss */
-
 .toc-sidebar {
   font-size: 0.8em;
   opacity: 0.8;
@@ -26,9 +24,9 @@
   margin-bottom: 16px;
   padding: 0;
   font-family: var(--guk-font-family); /* Replaces var(--heading) */
-  color: var(--guk-color-neutral-900); /* Replaces var(--aluminum-5) */
+  color: var(--guk-color-neutral-400); /* Replaces var(--aluminum-5) */
   letter-spacing: 0.05em;
-  font-weight: var(--guk-font-weight-semibold); /* Assuming bold weight */
+  font-weight: var(--guk-font-weight-normal); /* Assuming bold weight */
   text-transform: uppercase;
 }
 
@@ -39,13 +37,12 @@
   padding-right: var(--guk-space-3); /* 8px */
   overflow: hidden;
   text-overflow: ellipsis;
+  font-weight: var(--guk-font-weight-normal);
   font-family: var(--guk-font-family); /* Replaces var(--sans-serif) */
- /* font-weight: var(--guk-font-weight-semibold); /* Replaces var(--weight-bold) */
   font-size: var(--guk-font-size-base); /* 1rem */
-  color: var(--guk-color-neutral-400); /* Replaces var(--aluminum-5) */
 
   &.subheading-item {
-    font-weight: var(--guk-font-weight-normal); /* Replaces var(--weight-normal) */
+    font-weight: var(--guk-font-weight-normall); /* Replaces var(--weight-normal) */
    /* margin: 0.25rem 0 0; */
     margin-left: .7rem; 
   }
@@ -57,11 +54,10 @@
   padding-right: 8px;
 
   &:hover {
-    color: var(--guk-color-neutral-900); /* Replaces var(--core-violet-2) */
+    color: var(--guk-color-primary-300); /* Replaces var(--core-violet-2) */
   }
 }
 
 .toc .toc-menu li a.toc-active {
-  color: var(--guk-color-neutral-900); /* Replaces var(--core-violet-4) */
-  font-weight: var(--guk-font-weight-semibold); /* Assuming bold weight */
+  color: var(--guk-color-primary-400); /* Replaces var(--core-violet-4) */
 }