diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss
index 917798359..47b0b3d6e 100644
--- a/assets/scss/_variables_project.scss
+++ b/assets/scss/_variables_project.scss
@@ -6,204 +6,186 @@ Add styles or override variables from the theme here.
 
 @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
 
-// Color variables based on color.styles.tokens.json
-
+// First define the base color tokens
 // Moon (Grayscale)
-// White: Page background (type 1), Primary button text
 $moon-white: #ffffff;
-
-// Light mode: Page background type 2, Disabled button background color
-// Dark mode: Tooltip background color, Toast background color
 $moon-50: #fafafa;
-
-// Light mode: Background color of table row with column headers, Table row or menu item hover highlight
 $moon-100: #f5f6f7;
-
-// Light mode: Scroll bar hover, Chart secondary lines
-// Dark mode: Body text, Decorative icons, Secondary button text (rest)
 $moon-200: #e4e6eb;
-
-// Light mode: Tag background color (48% rest, 64% hover), Info banner background color (48% opacity)
+$moon-250: #dfe0e2;
 $moon-300: #d3d7de;
-
-// Light mode: Run color 15
-// Dark mode: Tag text color, Info banner text color, Run color 15
+$moon-350: #c1c6cf;
 $moon-400: #aeb3bd;
-
-// Light/Dark mode: Secondary text, Placeholder text, Table column header text, Non-selected tabs text
 $moon-500: #79808a;
-
-// Light mode: Tag text color, Info banner text color
 $moon-600: #565c66;
-
-// Dark mode: Tag background color (48% rest, 64% hover), Info banner background color (48% opacity)
+$moon-650: #4a4f58;
 $moon-700: #3f464f;
-
-// Light mode: Body text, Decorative icons, Secondary button text (rest)
-// Dark mode: Chart secondary lines, Scroll bar rest
 $moon-750: #363c44;
-
-// Light mode: Tooltip background color, Toast background color, Top bar background color
-// Dark mode: Containers, fields and modals background color, Top bar background color
 $moon-800: #2b3038;
-
-// Light mode: Body text, Decorative icons, Secondary button text (rest)
-// Dark mode: Chart secondary lines, Scroll bar rest
 $moon-900: #1a1d24;
-
-// Dark mode: Page background type 1 and 2
 $moon-950: #171a1f;
 
-// Light/Dark mode: Dropshadows (opacity varies), Background dimming behind modals
-$oblivion: #15151f;
-
-// Teal
-// Light mode: Tag background color (48% rest, 64% hover), Selected global nav item highlight (32%)
+// Teal colors
 $teal-300: #a9edf2;
-
-// Light mode: Field 2px stroke color (focus)
-// Dark mode: Link (Hover), Tag text color, Selected global nav item text, Secondary button text (hover)
 $teal-400: #58d3db;
-
-// Light/Dark mode: Primary button color (Hover), Run color 01
 $teal-450: #10bfcc;
-
-// Light/Dark mode: Primary button color (Rest), Selected tab underline
 $teal-500: #13a9ba;
-
-// Light mode: Link (rest), Tag text color, Selected global nav item text, Secondary button text (hover)
-// Dark mode: Field 2px stroke color (focus)
+$teal-550: #0e97a7;
 $teal-600: #038194;
 
-// Green
-// Light mode: Tag background color (48% opacity at rest, 64% on hover), Green banner background color (48% opacity)
-$green-300: #a1f0cb;
-
-// Dark mode: Tag text color, Green banner text color
-$green-400: #5ed6a4;
-
-// Light/Dark mode: Green button background color (hover)
-$green-450: #28c787;
-
-// Light/Dark mode: Green button background color (rest), Run color 04
-$green-500: #00b26e;
-
-// Light mode: Tag text color, Green banner text color
-$green-600: #00875a;
-
-// Gold
-// Light mode: Tag background color (48% opacity at rest, 64% on hover), Announcement banner background color (48% opacity)
-$gold-300: #ffe49e;
-
-// Light mode: Run color 06
-// Dark mode: Tag text color, Announcement banner text color, Run color 06
-$gold-400: #ffcf4d;
-
-// Light/Dark mode: Weights & Biases logo color
-$gold-450: #fac13c;
-
-// Light/Dark mode: Top bar background color in Admin mode
-$gold-550: #d4870d;
-
-// Light mode: Tag text color, Announcement banner text color
-$gold-600: #b8740f;
-
-// Red
-// Light mode: Tag background color (48% opacity at rest, 64% on hover), Error banner background color (48% opacity)
-$red-300: #ffc7ca;
-
-// Dark mode: Tag text color, Error banner text color
-$red-400: #ff7a88;
-
-// Light mode: Destructive button background color (hover), Error field 2px stroke color
-// Dark mode: Destructive button background color (hover), Field error message
-$red-450: #ff596d;
-
-// Light/Dark mode: Destructive color background color (rest), Run color 09
-$red-500: #ff3d5a;
-
-// Light mode: Tag text color, Error banner text color
-$red-600: #cc2944;
-
-// Blue
-// Light mode: Tag background color (48% opacity at rest, 64% on hover)
-$blue-300: #bdd9ff;
-
-// Light/Dark mode: Run color 13
-// Dark mode: Tag text color
-$blue-400: #7db1fa;
-
-// Unused in provided descriptions
-$blue-500: #397eed;
-
-// Light mode: Tag text color
-$blue-600: #1f59c4;
-
-// wandb.com nav bg
+// Border colors
+$border-default: $moon-200;      // Using moon-200 instead of moon-250
+$border-hover: $moon-350;        // color/moon/350
+$dark-border-default: $moon-750; // color/moon/750
+$dark-border-hover: $moon-650;   // color/moon/650
+
+// Border radius
+$border-radius-medium: 8px;   // Used for most components
+$border-radius-large: 12px;   // Used for modals and larger components
+
+// Then define the semantic color tokens
+// Text colors
+$text-primary: $moon-800;    // color/moon/800
+$text-secondary: $moon-600;  // color/moon/600
+$text-tertiary: $moon-500;   // color/moon/500
+$text-disabled: $moon-350;   // color/moon/350
+
+// Link colors  
+$link-primary: $teal-600;    // color/teal/600
+$link-hover: $teal-550;      // color/teal/550
+$link-secondary: $moon-600;  // color/moon/600
+$link-secondary-hover: $moon-500; // color/moon/500
+
+// Background colors
+$bg-primary: $moon-white;    // White background
+$bg-secondary: $moon-50;     // color/moon/50 
+$bg-tertiary: $moon-100;     // color/moon/100
+$bg-disabled: $moon-350;     // color/moon/350
+
+// Dark mode colors
+$dark-text-primary: $moon-200;    // color/moon/200
+$dark-text-secondary: $moon-400;  // color/moon/400  
+$dark-text-tertiary: $moon-500;   // color/moon/500
+$dark-text-disabled: $moon-650;   // color/moon/650
+
+$dark-link-primary: $teal-500;    // color/teal/500
+$dark-link-hover: $teal-450;      // color/teal/450
+$dark-link-secondary: $moon-600;  // color/moon/600
+$dark-link-secondary-hover: $moon-500; // color/moon/500
+
+$dark-bg-primary: $moon-900;      // color/moon/900
+$dark-bg-secondary: $moon-800;    // color/moon/800
+$dark-bg-tertiary: $moon-700;     // color/moon/700
+$dark-bg-disabled: $moon-650;     // color/moon/650
+
+// Other brand colors
 $nav-bg: rgb(26, 28, 31);
 $wandb-gold: #FFCC33;
 $wandb-link-blue: rgb(7, 177, 196);
-
 $hover-bg: #A9EDF248;
 
 // Gradients
 $sunset-gradient: linear-gradient(98deg, #e180ff 0%, #ffcf4d 100%);
 $wandb-gradient: linear-gradient(180deg, #ffcc33 39%, #ffad33 72%);
 
-// hide "create child" and "create project issue" links
-.td-page-meta__child, .td-page-meta__project-issue { display: none !important; }
+// Font weights
+$font-weight-light: 300;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
 
+// Typography Component
+// Base body styles
 body {
     font-family: "Source Sans Pro", sans-serif;
     font-size: 16px;
-    color: $moon-800;
-    background-color: $moon-white;
+    font-weight: $font-weight-regular;
+    color: $text-primary;
+    background-color: $bg-primary;
+
+    [data-bs-theme=dark] & {
+        color: $dark-text-primary;
+        background-color: $dark-bg-primary;
+    }
 }
-.fa-solid .fa-print fa-fw {
 
+// Headings
+h1, h2, h3, h4, h5, h6 {
+    font-weight: $font-weight-regular !important;
+    font-family: "Source Serif 4", sans-serif;
+    color: $text-primary;
+
+    [data-bs-theme=dark] & {
+        color: $dark-text-primary;
+    }
 }
-// shrink the right nav a bit
-.td-page-meta
-{
+
+// Heading sizes
+h1, .td-content h1 { font-size: 32px !important; }
+h2, .td-content h2 { font-size: 24px !important; }
+h3, .td-content h3 { font-size: 20px !important; }
+h4, .td-content h4 { font-size: 16px !important; }
+h5, .td-content h5 { font-size: 14px !important; }
+h6, .td-content h6 { font-size: 12px !important; }
+
+// Lead paragraph
+.td-content .lead {
     font-size: 16px !important;
-    a {
-      padding-bottom: 15px;
-      line-height: 22px;
-    }
+    font-weight: 400 !important;
 }
-// hide the doc site name from the top-left
-.td-navbar .navbar-brand__name { display: none; }
 
-// hide taxonomy cloud on right and top
-.taxonomy-terms-cloud, .taxonomy-terms-article { display: none; }
+// Reading time
+.reading-time {
+    font-size: 14px;
+    color: $text-secondary;
 
-// hide left nav label 
-.tree-root { display: none !important;}
+    [data-bs-theme=dark] & {
+        color: $dark-text-secondary;
+    }
+}
 
-// Add blue color for links and remove underline
+// Links
 a {
-    color: $teal-600 !important;
+    color: $link-primary !important;
     text-decoration: none !important;
+    
     &:hover {
-        color: $teal-500 !important;
+        color: $link-hover !important;
+        text-decoration: none !important;
     }
-}
-[data-bs-theme=dark] a {
-    color: $wandb-link-blue !important;
-    text-decoration: none !important;
-    &:hover {
-        color: $wandb-gold !important;
+
+    [data-bs-theme=dark] & {
+        color: $dark-link-primary !important;
+        
+        &:hover {
+            color: $dark-link-hover !important;
+        }
     }
 }
-// Style for link hover state
-a:hover {
-    text-decoration: underline !important;
+
+// hide "create child" and "create project issue" links
+.td-page-meta__child, .td-page-meta__project-issue { display: none !important; }
+
+// shrink the right nav a bit
+.td-page-meta {
+    font-size: 16px !important;
+    a {
+        padding-bottom: 15px;
+        line-height: 22px;
+    }
 }
 
+// hide taxonomy cloud on right and top
+.taxonomy-terms-cloud, .taxonomy-terms-article { display: none; }
+
+// hide left nav label 
+.tree-root { display: none !important;}
+
 // Target links in the navigation and make them white with consistent font-weight
 .td-navbar .nav-link {
     color: $moon-white !important;
-    font-weight: 400 !important;  // Ensure consistent font-weight in main nav
+    font-weight: $font-weight-regular !important;  // Ensure consistent font-weight in main nav
 
     &:hover {
         color: $wandb-gold !important;
@@ -218,7 +200,7 @@ a:hover {
 // Ensure active nav link maintains same weight
 .nav-link.active {
     border-bottom: 2px solid $wandb-gold !important;
-    font-weight: 400 !important;  // Keep consistent with other nav links
+    font-weight: $font-weight-regular !important;  // Keep consistent with other nav links
 }
 
 nav.foldable-nav .with-child, nav.foldable-nav .without-child {
@@ -273,19 +255,45 @@ nav.foldable-nav .ul-1 .with-child > label:hover:after {
 // Ensure hover state for nav links doesn't change color
 .td-navbar {
     color: $moon-white;
+    background-color: $nav-bg !important;
+
+    // Hide the doc site name from top-left
+    .navbar-brand__name { 
+        display: none; 
+    }
+
+    // Navigation links
+    .nav-link {
+        color: $moon-white !important;
+        font-weight: $font-weight-regular !important;
+
+        &:hover {
+            color: $wandb-gold !important;
+            text-decoration: none !important;
+        }
+
+        &.active {
+            border-bottom: 2px solid $wandb-gold !important;
+            font-weight: $font-weight-regular !important;
+        }
+    }
+
+    // Dark mode overrides
+    [data-bs-theme=dark] & {
+        // Add any specific dark mode styles if needed
+    }
 }
-a.nav-link:hover {
-    color: $wandb-gold !important;
-}
-.nav-link.active 
-{
-    border-bottom: 2px solid $wandb-gold !important;
+
+// Apply same background color to navbar when scrolling
+.js-navbar-scroll {
+    background-color: $nav-bg !important;
 }
 
 // headings use WandB serif font
 h1, h2, h3, h4, h5, h6 {
-    font-weight: 400 !important;
+    font-weight: $font-weight-regular !important;
     font-family: "Source Serif 4", sans-serif;
+    color: $text-primary;
 }
 h1, .td-content h1 {
     font-size: 32px !important;
@@ -306,7 +314,7 @@ h6, .td-content h6 {
     font-size: 12px !important;
 }
 .td-sidebar-nav-active-item {
-    text-decoration: underline;
+    text-decoration: none;
 }
 
 #m-guideshostingiamorg_team_struct-li
@@ -314,17 +322,18 @@ h6, .td-content h6 {
 .td-sidebar-nav, .td-navbar .nav-link  {
   font-family: "Source Sans Pro", sans-serif;
   a {
-    color: $moon-500 !important;
-    font-weight: 400;
+    color: $text-secondary !important;
+    font-weight: $font-weight-regular;
+    text-decoration: none !important;
     &:hover {
-      color: $teal-600 !important;
+      color: $link-primary !important;
       text-decoration: none !important;
     }
 
     .td-sidebar-nav-active-item {
-      color: $teal-600 !important;
+      color: $link-primary !important;
       text-decoration: none !important;
-      font-weight: 500 !important;
+      font-weight: $font-weight-medium !important;
     }
   }
 }
@@ -346,15 +355,15 @@ ol.breadcrumb:before {
 
 .td-sidebar-nav__section-title {
     display: block;
-    font-weight: 400 !important;
+    font-weight: $font-weight-regular !important;
     line-height: 19px;
     .active {
-        font-weight: 400 !important;
+        font-weight: $font-weight-regular !important;
     }
     
     a {
         color: var(--bs-secondary-color);
-        font-weight: 400 !important;
+        font-weight: $font-weight-regular !important;
     }
 }
 
@@ -363,351 +372,268 @@ ol.breadcrumb:before {
     font-weight: 400 !important;
 }
 
-#TableOfContents:before { 
-    content: "On this page"; 
-    font-weight: bold; 
-}
+// Table of Contents Component
 #TableOfContents { 
     margin-top: 15px;
     font-size: 16px !important;
     padding-left: 10px !important;
 
-    // Update list styles
+    // Add "On this page" header
+    &:before { 
+        content: "On this page"; 
+        font-weight: bold; 
+        color: $text-primary;
+
+        [data-bs-theme=dark] & {
+            color: $dark-text-primary;
+        }
+    }
+
+    // List styles
     ul { 
         padding-top: 10px !important;
         li {
-          padding-bottom: 10px;
-          line-height: 22px;
+            padding-bottom: 10px;
+            line-height: 22px;
         }
     }
 
-    // Style links consistently with page meta
+    // Link styles
     a {
         display: block;
+        color: $text-secondary !important;
+        
+        &:hover {
+            color: $link-primary !important;
+            text-decoration: none !important;
+        }
+
+        [data-bs-theme=dark] & {
+            color: $dark-text-secondary !important;
+            
+            &:hover {
+                color: $dark-link-primary !important;
+            }
+        }
+    }
+
+    // Dark mode
+    [data-bs-theme=dark] & {
+        color: $dark-text-primary;
     }
 }
 
-// algolia
-.DocSearch-Footer { display: none !important; }
+// Buttons Component
+// Base button styles
+.button-base {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: $font-weight-semibold;
+    padding: 0 12px;
+    min-height: 40px;
+    border-radius: $border-radius-medium;
+    transition: background-color 0.3s, color 0.3s;
+    text-decoration: none !important;
+    border: none;
+    
+    &:hover {
+        text-decoration: none !important;
+    }
+}
 
+// CTA Container styles
 .cta-container {
     display: flex;
-    gap: 16px;
-    margin-bottom: 16px;
+    align-items: center; // Vertically center the buttons
+    gap: 16px; // Consistent spacing between buttons
+    margin: 24px 0;
+    flex-wrap: wrap; // Allow wrapping on smaller screens
 }
 
+// CTA Button
 .cta-button {
-    display: inline-flex; 
-    align-items: center; 
-    justify-content: center;
+    @extend .button-base;
     color: $moon-800 !important;
-    gap: 8px; 
-    padding: 0 12px; 
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 600;
-    font-display: none;
-    text-decoration: none;
-    border-radius: 4px;
     background-color: $moon-100;
-    transition: background-color 0.3s, color 0.3s;
-    text-align: center; 
-    min-height: 40px;
+    height: 40px; // Fixed height for consistency
+    padding: 0 16px;
+    display: inline-flex;
+    align-items: center; // Center button contents vertically
+    white-space: nowrap; // Prevent text wrapping inside button
 
-}
+    &:hover {
+        background-color: $hover-bg;
+    }
 
-.cta-button:hover {
-    background-color: $hover-bg;
-    text-decoration: none !important;
-}
+    // Icon styles
+    svg, img {
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+    }
 
-.cta-button-icon {
-    display: inline-block;
-    width: 24px;
-    height: 24px;
-    margin-right: 8px;
-}
+    [data-bs-theme=dark] & {
+        color: $dark-text-primary !important;
+        background-color: $dark-bg-secondary;
 
-.wb-icon {
-    background-image: url('/path-to-icons/wb-logo.svg');
-    background-size: contain;
-    background-repeat: no-repeat;
-    width: 35px; 
+        &:hover {
+            background-color: $dark-bg-tertiary;
+        }
+    }
 }
 
-pre {
-    font-size: 14px !important;
+// Contact Us Button
+.contact-us-button {
+    @extend .button-base;
+    background-color: $teal-500;
+    color: $moon-white !important;
+    gap: 8px;
+
+    &:hover {
+        background-color: $teal-450;
+    }
+
+    img {
+        width: 112px;
+        height: 24px;
+    }
+
+    p {
+        margin: 0;
+        color: $moon-white;
+    }
+
+    [data-bs-theme=dark] & {
+        background-color: $teal-450;
+
+        &:hover {
+            background-color: $teal-400;
+        }
+    }
 }
 
-.filename-preview {
-    text-align: right !important;
-    padding-right: 3px !important;
+// Banners Component
+// Base banner styles
+.banner-base {
+    display: flex;
+    padding: 32px 40px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 24px;
+    border-radius: $border-radius-large;
+    margin-bottom: 30px;
+
+    h1, h2, p, div {
+        filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
+    }
 }
 
+// Standard Banner
 .banner {
+    @extend .banner-base;
     background-position: center;
     background-repeat: no-repeat;
-    overflow: hidden;
-    padding: 45px !important;
-    position: relative;
-    width: 100%;
     background-size: cover;
     min-height: 200px;
-    margin-bottom: 30px;
-    border-radius: 7px;
-    color: white;
-    h1,h2,p, div {
-        filter: drop-shadow(5px 5px 5px #000000);
-    }
-    
+    color: $moon-white;
+    overflow: hidden;
 }
 
+// Help Banner
 .help-banner {
-    display: flex;
+    @extend .banner-base;
     padding: 56px 40px 72px 40px;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 32px;
-    align-self: stretch;
-    border-radius: 12px;
-    background: var(--Moon-Moon-900, #1A1D24);
+    background: $moon-900;
     background-image: url('/images/support/support_banner.png');
     background-size: cover;
     background-position: center;
-    background-repeat: no-repeat;
-    box-shadow: none;  
-  }
-  
-  .help-banner h2,
-  .help-banner p {
-    font-family: "Source Sans Pro";
-    font-style: normal;
-    line-height: 140%;
-  }
-  
-  .help-banner h2 {
-    color: var(--Moon-Moon-50, #FAFAFA);
-    font-size: 40px;
-    font-weight: 600;
-  }
-  
-  .help-banner p {
-    color: var(--Moon-Moon-250, #DADEE3); 
-    font-size: 20px;
-    font-weight: 400;
-  }
-  
-  .help-banner.card:hover {
-    box-shadow: none;
-    transform: none;
-  }
-  
-  
-  /* Container for the card rows */
-  .card-container {
-    display: flex;
-    justify-content: space-between; /* Add space between cards */
-    gap: 8px; /* Add some space between the cards */
-    margin-bottom: 16px; /* Space between rows */
-  }
-  
-  
-  .card {
-    box-shadow: none; /* Adjust as needed */
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-  }
-  
-  .card:hover {
-    box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.2);
-    transform: translateY(-5px);
-  }
-  
-  .card-icon-left,
-  .card-icon-right {
-    width: 24px;
-    height: 24px;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-  
-  .card-icon-left {
-    /* This icon will be part of the normal flow, above the header */
-    margin-bottom: 8px; /* Increased space between icon and header */  
-  }
-  
-  .card-icon-right {
-    position: absolute;
-    top: 40px; /* Aligns with the top padding of the card */
-    right: 40px; /* Aligns with the right padding of the card */
-  }
-  
-  .card-title {
-    color: var(--Grayscale-gray-900, #181B1F);
-    font-family: "Source Sans Pro", sans-serif;
-    font-size: 24px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 32px; /* 133.333% */
-    margin: 0;
-  }
-  
-  .card-content {
-    color: var(--Moon-Moon-800, #2B3038);
-    font-family: "Source Sans Pro", sans-serif;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 24px; /* 150% */
-    margin: 0;
-  }
-  
-  
-  .card-pink,
-  .card-yellow,
-  .card-gray,
-  .card-blue {
-    border-radius: 6px;
-  }
-  
-  .card-pink {
-    background: var(--color-sienna-300, #FFCFB2);
-    background-repeat: no-repeat;
-  }
-  
-  .card-yellow {
-    background: var(--Gold-gold-light2, #FFD95C);
-  }
-  
-  
-  .card-gray {
-    background: var(--Moon-Moon-150, #EDEFF2);
-  }
-  
-  .card-blue { 
-    background: var(--color-teal-550, #0097AB);
-    color: var(--color-moon-white, #FFF);
-  }
-  
-  .card-blue h2, 
-  .card-blue p {
-    color: var(--color-moon-white, #FFF);
-  }
-  
-  .card-support-index {
-    background-color: rgb(235, 237, 240);
-    padding: 16px 16px 0px 16px;
-    margin-bottom: 16px;
-    min-height: 0px;
-    color: #000
-  }
-  
-  .card-support-index:hover {
-    color: #000
-  }
-  
-  .card-banner {
-    display: flex;
-    padding: 32px 40px;
-    flex-direction: column;
-    align-items: center;
-    gap: 24px;
-    align-self: stretch;
-    border-radius: 12px;
-    background: var(--Moon-Moon-50, #FAFAFA);
-    color: var(--Moon-Moon-800, #2B3038);  
-  }
-  
-  .card-banner h2,
-  .card-banner p {
-    font-family: "Source Sans Pro";
-    font-style: normal;
-    line-height: 140%;
-    margin: 0px;
-  }
-  
-  .card-banner h2 {
-    font-size: 24px;
-    font-weight: 600;
-    color: #181B1F;
-  }
-  
-  .card-banner p {
-    color: var(--Moon-Moon-800, #2B3038);
-    font-size: 16px;
-    font-weight: 400;
-  }
-  
-  .card-banner-gray {
-    border-radius: 12px;
-    background: var(--Moon-Moon-50, #FAFAFA);
-  }
-  
-  .card-banner.card-banner-gray:hover {
     box-shadow: none;
-    transform: none;
-    color: var(--Moon-Moon-800, #181B1F);  
-  }
-  
-  .card-banner-icon {
-    display: flex;
-    width: 64px;
-    height: 64px;
-    justify-content: center;
-    align-items: center;
-    border-radius: 100px;
-    background: var(--Backgrounds-Teal-tag-background, rgba(169, 237, 242, 0.48));
-  }
-  
-  .card-banner-icon img {
-    width: 32px; /* Make the SVG smaller than the container */
-    height: 32px;
-  }
-  
-  
-  .contact-us-button {
-    display: flex;
-    padding: var(--Spacing-spacing-sm, 8px) var(--Spacing-spacing-sm-md, 12px);
-    justify-content: center;
+
+    &.card:hover {
+        box-shadow: none;
+        transform: none;
+    }
+
+    h2 {
+        color: $moon-50;
+        font-size: 40px;
+        font-weight: $font-weight-semibold;
+        font-family: "Source Sans Pro";
+        line-height: 140%;
+    }
+
+    p {
+        color: $moon-250;
+        font-size: 20px;
+        font-weight: $font-weight-regular;
+        font-family: "Source Sans Pro";
+        line-height: 140%;
+    }
+}
+
+// Card Banner
+.card-banner {
+    @extend .banner-base;
     align-items: center;
-    gap: var(--Spacing-spacing-sm, 8px);
-    border-radius: var(--Radius-radius-sm, 4px);
-    background: var(--buttons-primary-button-rest, #13A9BA); /* Teal background */
-    color: white;
-    font-family: "Source Sans Pro";
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 24px; /* 150% */
-  }
-  
-  .contact-us-button:hover {
-    background: var(--color-teal-450, #00B8D4); /* Lighter teal on hover */
-  }
-  
-  .contact-us-button img {
-    width: 112px;
-    height: 24px;
-  }
-  
-  .contact-us-button p {
-    margin: 0;
-    color: white;
-  }
-  
-  .faq-container {
-    max-width: 768px;
-    margin: 0 auto;
-  }
+    background: $moon-50;
+    color: $moon-800;
 
-.reading-time {
-    font-size: 14px;
-    color: $moon-600;
+    h2 {
+        font-size: 24px;
+        font-weight: $font-weight-semibold;
+        color: $moon-900;
+        margin: 0;
+    }
+
+    p {
+        font-size: 16px;
+        font-weight: $font-weight-regular;
+        margin: 0;
+    }
+
+    &.card-banner-gray {
+        &:hover {
+            box-shadow: none;
+            transform: none;
+        }
+    }
+
+    // Icon container
+    &-icon {
+        display: flex;
+        width: 64px;
+        height: 64px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 100px;
+        background: rgba($teal-300, 0.48);
+
+        img {
+            width: 32px;
+            height: 32px;
+        }
+    }
+
+    [data-bs-theme=dark] & {
+        background: $dark-bg-secondary;
+        color: $dark-text-primary;
+
+        h2 {
+            color: $dark-text-primary;
+        }
+
+        p {
+            color: $dark-text-secondary;
+        }
+    }
 }
 
 // Add border radius to all images, code blocks and alerts
 img, pre, .highlight, .code-toolbar, .alert {
-  border-radius: 8px !important;
+  border-radius: $border-radius-medium !important;
 }
 
 // Style images and iframes consistently
@@ -727,67 +653,163 @@ img, iframe {
 // Add dark mode styles using data-bs-theme attribute
 [data-bs-theme=dark] {
     body {
-        color: $moon-200;
-        background-color: $moon-900;
+        color: $dark-text-primary;
+        background-color: $dark-bg-primary;
     }
 
     // Update sidebar nav colors for dark mode
     .td-sidebar-nav {
         a {
-            color: $moon-300 !important;
+            color: $dark-text-secondary !important;
             &:hover {
-                color: $teal-400 !important;
+                color: $dark-link-primary !important;
             }
             .td-sidebar-nav-active-item {
-                color: $teal-400 !important;
+                color: $dark-link-primary !important;
             }
         }
     }
 
     // Update headings color for dark mode
     h1, h2, h3, h4, h5, h6 {
-        color: $moon-50;
+        color: $dark-text-primary;
     }
 
     // Update reading time color for dark mode
     .reading-time {
-        color: $moon-300;
+        color: $dark-text-secondary;
     }
 
     // Update table of contents color
     #TableOfContents {
-        color: $moon-200;
+        color: $dark-text-primary;
     }
 
     .td-footer {
         background-color: transparent !important;
-        color: $moon-200 !important;
+        color: $dark-text-primary !important;
+        border-top: 1px solid $moon-750 !important;
+    }
+
+    // Update border colors for dark mode
+    .border,
+    .border-top,
+    .border-right,
+    .border-bottom,
+    .border-left {
+        border-color: $dark-border-default !important;
+        
+        &:hover {
+            border-color: $dark-border-hover !important;
+        }
+    }
+}
+
+// For light mode (default) borders
+.border,
+.border-top,
+.border-right,
+.border-bottom,
+.border-left {
+    border-color: $border-default !important;
+    
+    &:hover {
+        border-color: $border-hover !important;
+    }
+}
+
+// Footer Component
+.td-footer {
+    background-color: transparent !important;
+    color: $text-primary !important;
+    border-top: 1px solid $moon-200 !important;
+    padding: 1.5rem 0 !important;
+    min-height: auto !important;
+    margin: 0 !important;
+    
+    // Container styles
+    .container-fluid {
+        padding: 0 2rem !important;
+    }
+
+    // Row alignment
+    .row {
+        align-items: center !important;
+    }
+
+    // Footer links
+    &__links-item {
+        margin-bottom: 0 !important;
+    }
+
+    // Links and icons
+    a, i {
+        color: inherit !important;
+        transition: color 0.3s !important;
+
+        &:hover {
+            color: $link-hover !important;
+        }
+    }
+
+    // Dark mode styles
+    [data-bs-theme=dark] & {
+        background-color: transparent !important;
+        color: $dark-text-primary !important;
         border-top: 1px solid $moon-750 !important;
+
+        a:hover,
+        i:hover {
+            color: $wandb-gold !important;
+        }
     }
 }
 
-// Add styles for feedback buttons
+// Feedback Component
+.td-content > .d-print-none {  // Target only the feedback section at bottom of content
+    margin-top: 4rem;
+    display: flex;
+    align-items: center; // Vertically align all items
+    flex-wrap: wrap; // Allow wrapping on smaller screens
+    gap: 8px; // Consistent spacing between elements
+
+    // Hide feedback title
+    .feedback--title {
+        display: none;
+    }
+
+    // Question styling
+    .feedback--question {
+        margin: 0; // Remove default margins
+        padding-right: 16px; // Add some space between question and buttons
+    }
+
+    .btn {
+        min-width: 50px;
+
+        &.feedback--answer-no {
+            margin: 0 !important;
+        }
+    }
+
+    // Response styling
+    .feedback--response {
+        width: 100%; // Full width for responses
+        margin-top: 1rem;
+    }
+}
+
+// Feedback buttons
 .feedback--answer {
-    display: inline-flex !important; 
-    align-items: center !important; 
-    justify-content: center !important;
+    @extend .button-base;
     color: $moon-800 !important;
-    gap: 8px !important; 
-    padding: 0 12px !important; 
-    font-size: 16px !important;
-    line-height: 20px !important;
-    font-weight: 600 !important;
-    font-display: none !important;
-    text-decoration: none !important;
-    border-radius: 4px !important;
     background-color: $moon-100 !important;
     background-image: none !important;
-    transition: background-color 0.3s, color 0.3s !important;
-    text-align: center !important; 
-    min-height: 40px !important;
-    border: none !important;
     margin-right: 8px !important;
     box-shadow: none !important;
+    display: inline-block !important;
+    margin-bottom: 0 !important;
+    border: none !important;
 
     &:hover {
         background-color: $hover-bg !important;
@@ -795,137 +817,202 @@ img, iframe {
         border: none !important;
         box-shadow: none !important;
     }
-}
 
-// Remove the mb-4 class from the buttons in the HTML or override it here
-.feedback--answer.mb-4 {
-    margin-bottom: 0 !important;
-}
+    // Remove unwanted margin
+    &.mb-4 {
+        margin-bottom: 0 !important;
+    }
 
-// Dark mode support
-[data-bs-theme=dark] {
-    .feedback--answer {
-        color: $moon-200 !important;
-        background-color: $moon-800 !important;
-        background-image: none !important;
+    // Hide disabled buttons
+    &:disabled {
+        display: none !important;
+    }
+
+    // Dark mode styles
+    [data-bs-theme=dark] & {
+        color: $dark-text-primary !important;
+        background-color: $dark-bg-secondary !important;
+        border: none !important;
         
         &:hover {
-            background-color: $moon-700 !important;
+            background-color: $dark-bg-tertiary !important;
             border: none !important;
             box-shadow: none !important;
         }
     }
 }
 
-.d-print-none {
-    margin-top: 4rem;
+// Last modified date
+.td-content > .td-page-meta__lastmod {
+    margin-top: 0 !important;
+}
 
-    .feedback--title {
-        display: none; // Hide the feedback title
-    }
+// Update the sidebar navigation styles
+.td-sidebar-nav {
+    font-family: "Source Sans Pro", sans-serif;
+    padding-left: 15px !important;
 
-    .feedback--question {
-        display: inline-block; // Make question inline
-        margin-right: 1rem; // Add spacing between question and buttons
-        margin-bottom: 0; // Remove bottom margin to align with buttons
-    }
+    // Base link styles
+    a {
+        color: $text-secondary !important;
+        font-weight: $font-weight-regular;
+        text-decoration: none !important;
 
-    .feedback--answer {
-        display: inline-block !important; // Force inline display
-        margin-bottom: 0 !important; // Remove bottom margin
+        &:hover {
+            color: $link-primary !important;
+            text-decoration: none !important;
+        }
     }
 
-    .feedback--response {
-        margin-top: 1rem; // Add some space above responses
+    // Active item styles
+    .td-sidebar-nav-active-item {
+        color: $link-primary !important;
+        font-weight: $font-weight-medium !important;
+        text-decoration: none !important;
+
+        &:hover {
+            text-decoration: none !important;
+        }
     }
-}
 
-.td-page-meta__lastmod {
-    margin-top: 1rem !important;
-}
+    // Section title styles
+    &__section-title {
+        display: block;
+        font-weight: $font-weight-regular !important;
+        line-height: 19px;
+        margin-bottom: 10px !important;
+        margin-top: 5px !important;
 
-// Update footer styles to match page background and text color
-.td-footer {
-    background-color: transparent !important;
-    color: $moon-800 !important;
-    border-top: 1px solid $moon-200 !important;
-    padding: 1.5rem 0 !important;
-    min-height: auto !important;
-    margin: 0 !important;
-    
-    [data-bs-theme=dark] & {
-        background-color: transparent !important;
-        color: $moon-200 !important;
-        border-top: 1px solid $moon-700 !important;
+        .active {
+            font-weight: $font-weight-regular !important;
+        }
+        
+        a {
+            color: var(--bs-secondary-color);
+            font-weight: $font-weight-regular !important;
+        }
     }
 
-    // Ensure links and icons inherit the text color
-    a, i {
-        color: inherit !important;
-        transition: color 0.3s !important;
+    // Dark mode overrides
+    [data-bs-theme=dark] & {
+        a {
+            color: $dark-text-secondary !important;
+            
+            &:hover {
+                color: $dark-link-primary !important;
+            }
+        }
 
+        .td-sidebar-nav-active-item {
+            color: $dark-link-primary !important;
+        }
+    }
+}
+
+// DocSearch Component
+.DocSearch {
+    // Button styles
+    &-Button {
+        font-family: "Source Sans Pro", sans-serif;
+        font-size: 16px;
+        
+        &:active,
+        &:focus,
         &:hover {
-            color: $teal-500 !important;
+            background: var(--docsearch-searchbox-focus-background);
+            box-shadow: inset 0 0 0 2px $teal-500 !important;
+            color: var(--docsearch-text-color);
+            outline: none;
         }
     }
 
-    [data-bs-theme=dark] a:hover,
-    [data-bs-theme=dark] i:hover {
-        color: $wandb-gold !important;
+    // Modal styles
+    &-Modal {
+        border-radius: $border-radius-large !important;
     }
 
-    // Remove default container padding
-    .container-fluid {
-        padding: 0 2rem !important;
+    // Hide footer
+    &-Footer {
+        display: none !important;
+    }
+}
+
+// DocSearch Container with CSS Variables
+.DocSearch-Container {
+    font-family: "Source Sans Pro", sans-serif;
+    font-size: 16px;
+
+    // Light mode variables
+    --docsearch-primary-color: #{$teal-500} !important;
+    --docsearch-highlight-color: #{$teal-500} !important;
+    --docsearch-text-color: #{$moon-800} !important;
+    --docsearch-muted-color: #{$moon-500} !important;
+    --docsearch-container-background: rgba(101, 108, 133, 0.8) !important;
+    --docsearch-modal-background: #{$moon-white} !important;
+    --docsearch-searchbox-background: #{$moon-100} !important;
+    --docsearch-searchbox-focus-background: #{$moon-white} !important;
+    --docsearch-hit-color: #{$moon-800} !important;
+    --docsearch-hit-background: #{$moon-white} !important;
+    --docsearch-hit-active-background: #{$teal-500} !important;
+    --docsearch-footer-background: #{$moon-white} !important;
+    --docsearch-logo-color: #{$teal-500} !important;
+    --docsearch-key-gradient: linear-gradient(-26.5deg, #{$moon-200}, #{$moon-100}) !important;
+    --docsearch-key-shadow: inset 0 -2px 0 0 #{$moon-300} !important;
+    --docsearch-searchbox-shadow: inset 0 0 0 2px #{$teal-500} !important;
+
+    // Search form styles
+    .DocSearch-Form {
+        border-radius: $border-radius-medium;
     }
 
-    // Center align all content vertically in the footer
-    .row {
-        align-items: center !important;
+    // Search results styles
+    .DocSearch-Hit {
+        border-radius: $border-radius-medium;
+        
+        a {
+            border-radius: $border-radius-medium;
+        }
     }
 
-    // Remove bottom margin from footer links
-    .td-footer__links-item {
-        margin-bottom: 0 !important;
+    // Dark mode styles
+    [data-bs-theme=dark] & {
+        --docsearch-primary-color: #{$teal-400} !important;
+        --docsearch-highlight-color: #{$teal-400} !important;
+        --docsearch-text-color: #{$moon-200} !important;
+        --docsearch-muted-color: #{$moon-400} !important;
+        --docsearch-container-background: rgba(21, 23, 31, 0.8) !important;
+        --docsearch-modal-background: #{$moon-800} !important;
+        --docsearch-searchbox-background: #{$moon-900} !important;
+        --docsearch-searchbox-focus-background: #{$moon-900} !important;
+        --docsearch-hit-color: #{$moon-200} !important;
+        --docsearch-hit-background: #{$moon-800} !important;
+        --docsearch-hit-active-background: #{$teal-400} !important;
+        --docsearch-footer-background: #{$moon-800} !important;
+        --docsearch-logo-color: #{$teal-400} !important;
+        --docsearch-key-gradient: linear-gradient(-26.5deg, #{$moon-800}, #{$moon-750}) !important;
+        --docsearch-key-shadow: inset 0 -2px 0 0 #{$moon-700} !important;
+        --docsearch-searchbox-shadow: inset 0 0 0 2px #{$teal-400} !important;
     }
-}
 
-// Add padding to main content area
-main[role="main"] {
-    padding-bottom: 1rem !important;
-    padding-left: 3rem !important;
-}
+    .DocSearch-Hit-source {
+        color: $text-secondary !important;
+        font-size: 14px !important;
+    }
 
-// Add border radius to tab content and panes
-.tab-content {
-  .tab-pane {
-    border: 1px solid $moon-200;
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
-    border-top-right-radius: 8px;
-    overflow: hidden;
-    
-    pre, .highlight, .code-toolbar {
-      margin-bottom: 1rem;
+    .DocSearch-Hit-title {
+        font-size: 1rem !important;
     }
-  }
-}
 
-// Dark mode support for tab panes
-[data-bs-theme=dark] .tab-content .tab-pane {
-  border-color: $moon-700;
-}
+    // Dark mode styles
+    [data-bs-theme=dark] & {
+        .DocSearch-Hit-source {
+            color: $dark-text-secondary !important;
+            font-size: 14px !important;
+        }
 
-// Add border radius to standalone elements
-img, pre, .highlight, .code-toolbar:not(.tab-body *), .alert {
-  border-radius: 8px;
+        .DocSearch-Hit-title {
+            font-size: 1rem !important;
+        }
+    }
 }
 
-// Style tabs
-.nav-tabs {
-  border: none !important;
-  
-  .nav-item {
-    margin-bottom: 0 !important;
-  }
-}