diff --git a/apps/_components/src/Footer/Footer.module.css b/apps/_components/src/Footer/Footer.module.css
index b70659b719..cecb919a45 100644
--- a/apps/_components/src/Footer/Footer.module.css
+++ b/apps/_components/src/Footer/Footer.module.css
@@ -1,5 +1,6 @@
 .footer {
   background-color: var(--ds-color-neutral-background-subtle);
+  border-top: 1px solid var(--ds-color-neutral-border-default);
 }
 
 .container {
diff --git a/apps/_components/src/Header/Header.module.css b/apps/_components/src/Header/Header.module.css
index b1bdc39d7b..22f4fc7911 100644
--- a/apps/_components/src/Header/Header.module.css
+++ b/apps/_components/src/Header/Header.module.css
@@ -4,7 +4,12 @@
   align-items: center;
   position: relative;
   z-index: 5;
-  background-color: white;
+  background-color: var(--ds-color-neutral-background-default);
+
+  [data-ds-color-mode='dark'] &,
+  [data-ds-color-mode='auto'] & {
+    background-color: var(--ds-color-neutral-background-subtle);
+  }
 }
 
 .container {
@@ -15,6 +20,14 @@
   padding: 0 var(--ds-spacing-8);
 }
 
+.container nav {
+  display: flex;
+}
+
+.container nav button {
+  height: fit-content;
+}
+
 .logoContainer {
   display: flex;
   align-items: center;
@@ -26,13 +39,17 @@
   width: auto;
 }
 
+.logoLink svg [data-text] {
+  fill: var(--ds-color-neutral-text-default);
+}
+
 .logoLink {
   display: flex;
   align-items: center;
 }
 
 .tag {
-  background-color: #f2d6ff;
+  background-color: var(--ds-global-purple-5);
   border-radius: 4px;
   padding: 7px 10px;
   font-size: 18px;
@@ -40,9 +57,9 @@
 }
 
 .toggle {
-  display: none;
+  display: flex;
   border: none;
-  background-color: transparent;
+  place-self: flex-end;
 }
 
 .menu {
@@ -50,7 +67,7 @@
   margin: 0;
   padding: 0;
   max-width: 100%;
-  align-items: flex-start;
+  align-items: center;
 }
 
 .item {
@@ -120,18 +137,18 @@
     height: 72px;
   }
 
-  .toggle {
-    display: block;
+  & nav {
+    gap: var(--ds-spacing-1);
   }
 
   .menu {
-    border-top: 1px solid #e2e2e2;
+    border-top: 1px solid var(--ds-color-neutral-border-subtle);
     position: absolute;
     z-index: 1;
     left: 0;
     right: 0;
-    top: 71px;
-    background-color: white;
+    top: 75px;
+    background-color: var(--ds-color-neutral-background-default);
     box-shadow: var(--ds-shadow-lg);
     flex-direction: column;
     display: none;
@@ -161,48 +178,6 @@
   }
 }
 
-@media (max-width: 900px) {
-  &.header {
-    height: 72px;
-  }
-
-  .toggle {
-    display: block;
-  }
-
-  .menu {
-    border-top: 1px solid #e2e2e2;
-    position: absolute;
-    z-index: 1;
-    left: 0;
-    right: 0;
-    top: 71px;
-    background-color: white;
-    box-shadow: var(--ds-shadow-lg);
-    flex-direction: column;
-    display: none;
-    padding: 20px 0;
-    width: 100%;
-  }
-
-  .item {
-    padding: 20px 0;
-    margin-left: 16px;
-  }
-
-  .active {
-    display: block;
-  }
-
-  .item .active {
-    display: inline-block;
-  }
-
-  .linkIcon {
-    place-items: start;
-  }
-
-  .logo {
-    height: 26px;
-  }
+.toggleButton svg {
+  font-size: 1.75em;
 }
diff --git a/apps/_components/src/Header/Header.tsx b/apps/_components/src/Header/Header.tsx
index 9d6dd2202f..f1c2c1ba5d 100644
--- a/apps/_components/src/Header/Header.tsx
+++ b/apps/_components/src/Header/Header.tsx
@@ -1,6 +1,16 @@
 'use client';
-import { Paragraph, SkipLink } from '@digdir/designsystemet-react';
-import { MenuHamburgerIcon, XMarkIcon } from '@navikt/aksel-icons';
+import {
+  Button,
+  Paragraph,
+  SkipLink,
+  Tooltip,
+} from '@digdir/designsystemet-react';
+import {
+  MenuHamburgerIcon,
+  MoonIcon,
+  SunIcon,
+  XMarkIcon,
+} from '@navikt/aksel-icons';
 import cl from 'clsx/lite';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
@@ -15,6 +25,7 @@ type HeaderProps = {
   menu: { name: string; href: string }[];
   betaTag?: boolean;
   skipLink?: boolean;
+  themeSwitcher?: boolean;
 };
 
 /**
@@ -47,13 +58,35 @@ const detectWrap = (items: HTMLCollection) => {
 /**
  * Only works in next.js projects
  */
-const Header = ({ menu, betaTag, skipLink = true }: HeaderProps) => {
+const Header = ({
+  menu,
+  betaTag,
+  skipLink = true,
+  themeSwitcher = false,
+}: HeaderProps) => {
   const [open, setOpen] = useState(false);
   const [isHamburger, setIsHamburger] = useState(false);
   const menuRef = useRef<HTMLUListElement>(null);
   const headerRef = useRef<HTMLElement>(null);
   const pathname = usePathname();
 
+  const [theme, setTheme] = useState('light');
+
+  const handleThemeChange = (newTheme: 'dark' | 'light') => {
+    setTheme(newTheme);
+    document.documentElement.setAttribute('data-ds-color-mode', newTheme);
+  };
+
+  useEffect(() => {
+    if (!themeSwitcher) return;
+    // get user preference
+    const userPreference = window.matchMedia('(prefers-color-scheme: dark)');
+    const userPrefersDark = userPreference.matches;
+
+    // set theme based on user preference
+    handleThemeChange(userPrefersDark ? 'dark' : 'light');
+  }, []);
+
   useEffect(() => {
     const handleResize = () => {
       if (isHamburger) return;
@@ -91,17 +124,32 @@ const Header = ({ menu, betaTag, skipLink = true }: HeaderProps) => {
             {betaTag && <div className={classes.tag}>Beta</div>}
           </div>
           <nav>
-            <button
-              aria-expanded={open}
-              aria-label='Meny'
-              className={cl(classes.toggle, 'ds-focus')}
-              onClick={() => {
-                setOpen(!open);
-              }}
-            >
-              {open && <XMarkIcon fontSize={26} color='#1E2B3C' />}
-              {!open && <MenuHamburgerIcon fontSize={26} color='#1E2B3C' />}
-            </button>
+            {isHamburger && (
+              <Button
+                variant='tertiary'
+                icon={true}
+                color='neutral'
+                aria-expanded={open}
+                aria-label='Meny'
+                className={cl(classes.toggle, 'ds-focus')}
+                onClick={() => {
+                  setOpen(!open);
+                }}
+              >
+                {open && (
+                  <XMarkIcon
+                    fontSize={26}
+                    color='var(--ds-color-neutral-text-default)'
+                  />
+                )}
+                {!open && (
+                  <MenuHamburgerIcon
+                    fontSize={26}
+                    color='var(--ds-color-neutral-text-default)'
+                  />
+                )}
+              </Button>
+            )}
             <ul
               ref={menuRef}
               className={cl(classes.menu, open && classes.active)}
@@ -150,6 +198,29 @@ const Header = ({ menu, betaTag, skipLink = true }: HeaderProps) => {
                 </Link>
               </li>
             </ul>
+            {themeSwitcher && (
+              <Tooltip
+                content={`Bytt til ${theme === 'light' ? 'mørk' : 'lys'} modus`}
+                placement='bottom'
+              >
+                <Button
+                  aria-label={`Bytt til ${theme === 'light' ? 'mørk' : 'lys'} modus`}
+                  variant='tertiary'
+                  icon={true}
+                  color='neutral'
+                  onClick={() => {
+                    handleThemeChange(theme === 'light' ? 'dark' : 'light');
+                  }}
+                  className={classes.toggleButton}
+                >
+                  {theme === 'dark' ? (
+                    <SunIcon fontSize='1.75em' />
+                  ) : (
+                    <MoonIcon fontSize='1.75em' />
+                  )}
+                </Button>
+              </Tooltip>
+            )}
           </nav>
         </div>
       </header>
diff --git a/apps/_components/src/Header/logos/ds-logo.tsx b/apps/_components/src/Header/logos/ds-logo.tsx
index 379af65f42..9904137157 100644
--- a/apps/_components/src/Header/logos/ds-logo.tsx
+++ b/apps/_components/src/Header/logos/ds-logo.tsx
@@ -11,8 +11,9 @@ export const DsLogo = ({ ...props }: DsLogoProps) => {
       {...props}
     >
       <path
+        data-text
         d='M153.634 78.2319H135.697V22.8264H154.202C170.515 22.8264 180.282 33.2149 180.282 50.448C180.282 67.7622 170.515 78.2319 153.634 78.2319ZM144.057 70.9275H153.174C165.808 70.9275 172.057 63.5689 172.057 50.448C172.057 37.3812 165.808 30.1308 153.688 30.1308H144.057V70.9275ZM207.937 79.0706C195.682 79.0706 188.161 70.6299 188.161 57.7254C188.161 44.9561 195.79 36.1367 207.369 36.1367C216.783 36.1367 225.765 42.0073 225.765 57.022V59.8897H196.223C196.439 67.8975 201.092 72.3884 208.018 72.3884C212.617 72.3884 216.134 70.3864 217.595 66.4637L225.251 67.8434C223.412 74.6068 217 79.0706 207.937 79.0706ZM196.25 53.8297H217.839C217.811 47.4721 213.699 42.8189 207.423 42.8189C200.849 42.8189 196.575 47.932 196.25 53.8297ZM265.879 46.8228L258.547 48.1214C257.6 45.3349 255.274 42.5484 250.242 42.5484C245.643 42.5484 242.18 44.8209 242.207 48.0132C242.18 50.8267 244.155 52.3688 248.727 53.4509L255.328 54.9659C262.957 56.7244 266.69 60.3496 266.69 66.2202C266.69 73.7411 259.738 79.0706 249.701 79.0706C240.367 79.0706 234.253 74.9314 232.901 67.5729L240.719 66.3825C241.693 70.4676 244.804 72.5507 249.647 72.5507C254.949 72.5507 258.385 70.0347 258.385 66.8154C258.385 64.2182 256.518 62.4327 252.514 61.5399L245.48 59.9979C237.689 58.2665 234.118 54.3437 234.118 48.446C234.118 41.0875 240.773 36.1367 250.161 36.1367C259.142 36.1367 264.201 40.357 265.879 46.8228ZM275.584 78.2319V36.6778H283.673V78.2319H275.584ZM279.669 30.2661C276.856 30.2661 274.556 28.1018 274.556 25.4506C274.556 22.7993 276.856 20.608 279.669 20.608C282.456 20.608 284.782 22.7993 284.782 25.4506C284.782 28.1018 282.456 30.2661 279.669 30.2661ZM311.978 94.6805C302.049 94.6805 296.503 90.3519 294.312 85.2658L301.265 82.3982C302.699 84.7789 305.323 88.1606 312.059 88.1606C318.2 88.1606 322.664 85.347 322.664 78.8271V70.657H322.15C320.689 73.3082 317.74 77.6097 310.111 77.6097C300.291 77.6097 292.743 70.5487 292.743 57.2925C292.743 44.0634 300.128 36.1367 310.165 36.1367C317.903 36.1367 320.77 40.844 322.204 43.4141H322.799V36.6778H330.726V79.1518C330.726 89.8379 322.556 94.6805 311.978 94.6805ZM311.897 70.9004C318.877 70.9004 322.745 65.7603 322.745 57.1843C322.745 48.7707 318.958 43.0083 311.897 43.0083C304.592 43.0083 300.913 49.2035 300.913 57.1843C300.913 65.3545 304.673 70.9004 311.897 70.9004ZM349.663 53.5592V78.2319H341.574V36.6778H349.339V43.4411H349.853C351.774 39.0314 355.859 36.1367 362.108 36.1367C370.603 36.1367 376.257 41.5203 376.257 51.8007V78.2319H368.168V52.7746C368.168 46.7417 364.84 43.1436 359.349 43.1436C353.721 43.1436 349.663 46.931 349.663 53.5592ZM418.244 46.8228L410.913 48.1214C409.966 45.3349 407.639 42.5484 402.607 42.5484C398.008 42.5484 394.545 44.8209 394.572 48.0132C394.545 50.8267 396.52 52.3688 401.092 53.4509L407.693 54.9659C415.322 56.7244 419.056 60.3496 419.056 66.2202C419.056 73.7411 412.103 79.0706 402.066 79.0706C392.733 79.0706 386.618 74.9314 385.266 67.5729L393.084 66.3825C394.058 70.4676 397.169 72.5507 402.012 72.5507C407.314 72.5507 410.75 70.0347 410.75 66.8154C410.75 64.2182 408.884 62.4327 404.88 61.5399L397.846 59.9979C390.054 58.2665 386.483 54.3437 386.483 48.446C386.483 41.0875 393.138 36.1367 402.526 36.1367C411.508 36.1367 416.567 40.357 418.244 46.8228ZM433.063 93.8147C430.628 93.8147 428.518 93.3548 427.544 92.922L429.492 86.2939C433.928 87.5113 436.823 87.0514 438.879 81.5325L439.88 78.773L424.676 36.6778H433.333L443.857 68.9255H444.29L454.814 36.6778H463.498L446.373 83.7779C443.965 90.3248 439.745 93.8147 433.063 93.8147ZM502.238 46.8228L494.907 48.1214C493.96 45.3349 491.633 42.5484 486.601 42.5484C482.002 42.5484 478.539 44.8209 478.567 48.0132C478.539 50.8267 480.514 52.3688 485.086 53.4509L491.687 54.9659C499.317 56.7244 503.05 60.3496 503.05 66.2202C503.05 73.7411 496.097 79.0706 486.06 79.0706C476.727 79.0706 470.613 74.9314 469.26 67.5729L477.079 66.3825C478.053 70.4676 481.164 72.5507 486.006 72.5507C491.309 72.5507 494.745 70.0347 494.745 66.8154C494.745 64.2182 492.878 62.4327 488.874 61.5399L481.84 59.9979C474.049 58.2665 470.478 54.3437 470.478 48.446C470.478 41.0875 477.133 36.1367 486.52 36.1367C495.502 36.1367 500.561 40.357 502.238 46.8228ZM531.341 36.6778V43.1706H522.819V66.0308C522.819 70.7111 525.173 71.5768 527.797 71.5768C529.096 71.5768 530.097 71.3333 530.638 71.2251L532.099 77.9073C531.152 78.259 529.42 78.7459 526.85 78.773C520.466 78.9083 514.703 75.256 514.73 67.7081V43.1706H508.643V36.6778H514.73V26.7221H522.819V36.6778H531.341ZM557.752 79.0706C545.497 79.0706 537.976 70.6299 537.976 57.7254C537.976 44.9561 545.605 36.1367 557.184 36.1367C566.599 36.1367 575.58 42.0073 575.58 57.022V59.8897H546.038C546.254 67.8975 550.908 72.3884 557.833 72.3884C562.432 72.3884 565.949 70.3864 567.41 66.4637L575.066 67.8434C573.227 74.6068 566.815 79.0706 557.752 79.0706ZM546.065 53.8297H567.654C567.627 47.4721 563.514 42.8189 557.238 42.8189C550.664 42.8189 546.39 47.932 546.065 53.8297ZM584.555 78.2319V36.6778H592.32V43.4411H592.834C594.565 38.8691 598.65 36.1367 604.142 36.1367C609.688 36.1367 613.503 38.8962 615.315 43.4411H615.748C617.75 39.0044 622.241 36.1367 628.22 36.1367C635.741 36.1367 641.043 40.8711 641.043 50.3668V78.2319H632.954V51.1243C632.954 45.4972 629.437 43.1165 625.163 43.1165C619.887 43.1165 616.83 46.7417 616.83 51.7466V78.2319H608.768V50.6103C608.768 46.0924 605.657 43.1165 601.166 43.1165C596.567 43.1165 592.644 47.0122 592.644 52.6123V78.2319H584.555ZM669.794 79.0706C657.539 79.0706 650.018 70.6299 650.018 57.7254C650.018 44.9561 657.647 36.1367 669.226 36.1367C678.641 36.1367 687.622 42.0073 687.622 57.022V59.8897H658.08C658.296 67.8975 662.95 72.3884 669.875 72.3884C674.474 72.3884 677.991 70.3864 679.452 66.4637L687.108 67.8434C685.269 74.6068 678.857 79.0706 669.794 79.0706ZM658.107 53.8297H679.696C679.669 47.4721 675.557 42.8189 669.28 42.8189C662.706 42.8189 658.432 47.932 658.107 53.8297ZM715.995 36.6778V43.1706H707.473V66.0308C707.473 70.7111 709.827 71.5768 712.451 71.5768C713.749 71.5768 714.75 71.3333 715.291 71.2251L716.752 77.9073C715.805 78.259 714.074 78.7459 711.504 78.773C705.119 78.9083 699.357 75.256 699.384 67.7081V43.1706H693.297V36.6778H699.384V26.7221H707.473V36.6778H715.995Z'
-        fill='#1E2B3C'
+        fill='red'
       />
       <path
         d='M78.0959 30.5555C79.0493 29.602 80.5952 29.602 81.5487 30.5555L100.268 49.2748C101.221 50.2282 101.221 51.7741 100.268 52.7276L81.5487 71.4468C80.5952 72.4003 79.0493 72.4003 78.0959 71.4468L59.3766 52.7276C58.4231 51.7741 58.4231 50.2282 59.3766 49.2748L78.0959 30.5555Z'
diff --git a/apps/storefront/app/(frontpage)/layout.module.css b/apps/storefront/app/(frontpage)/layout.module.css
index 197d22131f..da1c7af384 100644
--- a/apps/storefront/app/(frontpage)/layout.module.css
+++ b/apps/storefront/app/(frontpage)/layout.module.css
@@ -9,7 +9,7 @@
   content: '';
   background-color: var(--ds-color-neutral-background-subtle);
   position: absolute;
-  z-index: -1;
+  z-index: 0;
   height: 200vh;
   width: 300vw;
   left: -100vw;
@@ -39,6 +39,7 @@
   align-items: center;
   flex-direction: column;
   width: 100%;
+  z-index: 1;
 }
 
 .cards {
@@ -50,7 +51,7 @@
 }
 
 .betaTag {
-  background-color: #ebceff;
+  background-color: var(--ds-global-purple-5);
   display: inline-block;
   padding: 3px 12px;
   border-radius: 4px;
diff --git a/apps/storefront/app/bloggen/(frontpage)/layout.module.css b/apps/storefront/app/bloggen/(frontpage)/layout.module.css
index 332f8a7b22..61169be5c0 100644
--- a/apps/storefront/app/bloggen/(frontpage)/layout.module.css
+++ b/apps/storefront/app/bloggen/(frontpage)/layout.module.css
@@ -3,8 +3,13 @@
   justify-content: space-between;
   flex-wrap: wrap;
   gap: var(--ds-spacing-8);
-  margin-top: var(--ds-spacing-18) !important;
-  margin-bottom: var(--page-spacing-bottom) !important;
+  padding-top: var(--ds-spacing-18) !important;
+  padding-bottom: var(--page-spacing-bottom) !important;
+
+  [data-ds-color-mode='dark'] &,
+  [data-ds-color-mode='auto'] & {
+    background-color: var(--ds-color-neutral-background-default);
+  }
 }
 
 .main {
diff --git a/apps/storefront/app/bloggen/(frontpage)/page.mdx b/apps/storefront/app/bloggen/(frontpage)/page.mdx
index fa5e25bc84..6b6f26b91f 100644
--- a/apps/storefront/app/bloggen/(frontpage)/page.mdx
+++ b/apps/storefront/app/bloggen/(frontpage)/page.mdx
@@ -76,6 +76,11 @@ export const metadata = {
   {`
     body {
       background-color: var(--ds-color-neutral-background-subtle);
+
+        [data-ds-color-mode='dark'] &,
+        [data-ds-color-mode='auto'] & {
+          background-color: var(--ds-color-neutral-backround-default);
+        }
     }
   `}
 </style>
diff --git a/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css b/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css
index d70a211e00..2e139e16a6 100644
--- a/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css
+++ b/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css
@@ -16,6 +16,13 @@
   }
 }
 
+.card {
+  [data-ds-color-mode='dark'] &,
+  [data-ds-color-mode='auto'] & {
+    --dsc-card-background: var(--ds-color-neutral-surface-default);
+  }
+}
+
 .tag {
   margin-bottom: 11px;
   padding: 3px 9px;
diff --git a/apps/storefront/app/bloggen/_components/Contributors/Contributors.module.css b/apps/storefront/app/bloggen/_components/Contributors/Contributors.module.css
index 297ca1f43b..acfb335aef 100644
--- a/apps/storefront/app/bloggen/_components/Contributors/Contributors.module.css
+++ b/apps/storefront/app/bloggen/_components/Contributors/Contributors.module.css
@@ -30,7 +30,7 @@
   top: calc(var(--height) / -2);
   left: 50%;
   transform: translateX(-50%);
-  background-color: white;
+  background-color: var(--ds-color-neutral-background-default);
 }
 
 .logo .logoImage {
diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
index 991902b447..07cf0b1618 100644
--- a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
+++ b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
@@ -48,7 +48,9 @@ function PostLayout({
         ))}
         <main id='main' className={classes.main}>
           <div className={classes.intro}>
-            <Heading level={1}>{heading}</Heading>
+            <Heading level={1} data-size='xl'>
+              {heading}
+            </Heading>
             <Paragraph className={classes.ingress} variant='long'>
               {ingress}
             </Paragraph>
@@ -84,6 +86,16 @@ function PostLayout({
           </MdxContent>
         </main>
       </Container>
+      <style>
+        {`
+          header {
+            [data-ds-color-mode='dark'] &,
+            [data-ds-color-mode='auto'] & {
+              background-color: var(--ds-color-neutral-background-default) !important;
+            }
+          }
+        `}
+      </style>
     </div>
   );
 }
diff --git a/apps/storefront/app/komponenter/page.tsx b/apps/storefront/app/komponenter/page.tsx
index 8a2188dbf0..51f875742f 100644
--- a/apps/storefront/app/komponenter/page.tsx
+++ b/apps/storefront/app/komponenter/page.tsx
@@ -26,6 +26,11 @@ export default function page() {
         {`
     body {
       background-color: var(--ds-color-neutral-background-subtle);
+
+        [data-ds-color-mode='dark'] &,
+        [data-ds-color-mode='auto'] & {
+          background-color: var(--ds-color-neutral-background-default);
+        }
     }
   `}
       </style>
diff --git a/apps/storefront/app/layout.tsx b/apps/storefront/app/layout.tsx
index c32582e3b7..beb7f1c0e0 100644
--- a/apps/storefront/app/layout.tsx
+++ b/apps/storefront/app/layout.tsx
@@ -99,12 +99,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang='en'>
+    <html lang='en' data-ds-color-mode='auto'>
       <body>
         <div className='root'>
           <SkipLink href='#main'>Hopp til hovedinnhold</SkipLink>
           <VersionBanner />
-          <Header menu={menu} skipLink={false} />
+          <Header menu={menu} skipLink={false} themeSwitcher={true} />
           {children}
           <Footer centerLinks={centerLinks} rightLinks={rightLinks} />
           {process.env.VERCEL_ENV === 'production' && (
diff --git a/apps/storefront/components/Banner/Banner.module.css b/apps/storefront/components/Banner/Banner.module.css
index 95fc8c26ef..19b86704fb 100644
--- a/apps/storefront/components/Banner/Banner.module.css
+++ b/apps/storefront/components/Banner/Banner.module.css
@@ -9,8 +9,13 @@
   align-items: center;
   flex-wrap: wrap;
   flex-direction: column;
-  background-color: white;
+  background-color: var(--ds-color-neutral-background-default);
   gap: var(--ds-spacing-4);
+
+  [data-ds-color-mode='dark'] &,
+  [data-ds-color-mode='auto'] & {
+    background-color: var(--ds-color-neutral-background-subtle);
+  }
 }
 
 .ingress {
diff --git a/apps/storefront/components/ComponentCard/ComponentCard.module.css b/apps/storefront/components/ComponentCard/ComponentCard.module.css
index cb36a76aee..96d1a5cc60 100644
--- a/apps/storefront/components/ComponentCard/ComponentCard.module.css
+++ b/apps/storefront/components/ComponentCard/ComponentCard.module.css
@@ -1,13 +1,18 @@
 .card {
   display: block;
   text-align: center;
-  background-color: white;
+  background-color: var(--ds-color-neutral-background-default);
   color: var(--ds-color-neutral-text-default);
   padding: var(--ds-spacing-10);
   border-radius: var(--ds-border-radius-md);
   box-shadow: var(--ds-shadow-xs);
   text-decoration: none;
   transition: 0.2s transform ease-in-out, 0.2s box-shadow ease-in-out;
+
+  [data-ds-color-mode='dark'] &,
+  [data-ds-color-mode='auto'] & {
+    background-color: var(--ds-color-neutral-surface-default);
+  }
 }
 
 .card:hover {
diff --git a/apps/storefront/components/GithubLink/GithubLink.module.css b/apps/storefront/components/GithubLink/GithubLink.module.css
new file mode 100644
index 0000000000..0a0e07c5b5
--- /dev/null
+++ b/apps/storefront/components/GithubLink/GithubLink.module.css
@@ -0,0 +1,3 @@
+.githubLink path {
+  fill: var(--ds-color-neutral-text-default);
+}
diff --git a/apps/storefront/components/GithubLink/GithubLink.tsx b/apps/storefront/components/GithubLink/GithubLink.tsx
index f59a4dd0ac..a1d8ae6e71 100644
--- a/apps/storefront/components/GithubLink/GithubLink.tsx
+++ b/apps/storefront/components/GithubLink/GithubLink.tsx
@@ -4,7 +4,11 @@ import { Github } from '@repo/components';
 import { usePathname } from 'next/navigation';
 import type { HTMLAttributes } from 'react';
 
+import cl from 'clsx/lite';
+import classes from './GithubLink.module.css';
+
 const GithubLink = ({
+  className,
   ...rest
 }: Omit<HTMLAttributes<HTMLAnchorElement>, 'color'>) => {
   const pathName = usePathname();
@@ -17,6 +21,7 @@ const GithubLink = ({
       rel='noopener noreferrer'
       {...rest}
       data-unstyled
+      className={cl(classes.githubLink, className)}
     >
       <Github />
       Rediger denne siden på Github (åpnes i ny fane)
diff --git a/apps/storefront/components/NavigationCard/NavigationCard.module.css b/apps/storefront/components/NavigationCard/NavigationCard.module.css
index 29f3472683..b1ac814260 100644
--- a/apps/storefront/components/NavigationCard/NavigationCard.module.css
+++ b/apps/storefront/components/NavigationCard/NavigationCard.module.css
@@ -56,12 +56,22 @@
 }
 
 .grey {
-  background-color: var(--ds-color-neutral-background-subtle);
+  background-color: var(--ds-color-neutral-background-default);
   box-shadow: none;
+
+  [data-ds-color-mode='dark'] &,
+  [data-ds-color-mode='auto'] & {
+    background-color: var(--ds-color-neutral-surface-default);
+  }
 }
 
 .white {
   background-color: var(--ds-color-neutral-background-default);
+
+  [data-ds-color-mode='dark'] &,
+  [data-ds-color-mode='auto'] & {
+    background-color: var(--ds-color-neutral-surface-default);
+  }
 }
 
 .title {
diff --git a/apps/storefront/components/TeaserCard/TeaserCard.module.css b/apps/storefront/components/TeaserCard/TeaserCard.module.css
index 07083cb08b..d75525ccbc 100644
--- a/apps/storefront/components/TeaserCard/TeaserCard.module.css
+++ b/apps/storefront/components/TeaserCard/TeaserCard.module.css
@@ -1,5 +1,5 @@
 .card {
-  background-color: white;
+  background-color: var(--ds-color-neutral-background-default);
   padding: 32px;
   display: block;
   color: inherit;
@@ -10,6 +10,11 @@
   position: relative;
   z-index: 2;
   height: 100%;
+
+  [data-ds-color-mode='dark'] &,
+  [data-ds-color-mode='auto'] & {
+    background-color: var(--ds-color-neutral-surface-default);
+  }
 }
 
 .card:hover {
@@ -31,7 +36,7 @@
 .meta {
   margin-top: 14px;
   font-size: 15px;
-  color: #747474;
+  color: var(--ds-color-neutral-text-subtle);
   font-weight: 400;
   display: flex;
   gap: 12px;
diff --git a/apps/storefront/components/Tokens/TokenList/TokenList.module.css b/apps/storefront/components/Tokens/TokenList/TokenList.module.css
index 3ee51be5ab..47783b8a76 100644
--- a/apps/storefront/components/Tokens/TokenList/TokenList.module.css
+++ b/apps/storefront/components/Tokens/TokenList/TokenList.module.css
@@ -62,7 +62,6 @@
 }
 
 .card {
-  background-color: #fff;
   border-radius: 4px;
   align-items: flex-start;
   align-items: center;
@@ -81,7 +80,7 @@
 
 .value {
   font-size: 15px;
-  color: #636363;
+  color: var(--ds-color-neutral-text-subtle);
 }
 
 .copy {
diff --git a/apps/storefront/components/Tokens/TokenList/TokenList.tsx b/apps/storefront/components/Tokens/TokenList/TokenList.tsx
index da664a2762..9ae8ebbc66 100644
--- a/apps/storefront/components/Tokens/TokenList/TokenList.tsx
+++ b/apps/storefront/components/Tokens/TokenList/TokenList.tsx
@@ -178,7 +178,7 @@ const TokenList = ({
   type = 'color',
   hideValue = false,
 }: TokenListProps) => {
-  const [brand, setBrand] = useState<BrandType>('digdir');
+  const [brand] = useState<BrandType>('digdir');
   const [mode, setMode] = useState<'light' | 'dark'>('light');
   const [cardColumns, setCardColumns] = useState<CardColumnType>(3);
 
@@ -219,50 +219,23 @@ const TokenList = ({
       </div>
       {(showThemePicker || showModeSwitcher) && (
         <div className={classes.toggleGroup}>
-          {showThemePicker && (
+          {showModeSwitcher && (
             <Dropdown.Context>
               <Dropdown.Trigger variant='secondary'>
-                Brand: {capitalizeString(brand)}
+                Mode: {capitalizeString(mode)}
               </Dropdown.Trigger>
               <Dropdown>
                 <Dropdown.List>
                   <Dropdown.Item>
-                    <Dropdown.Button onClick={() => setBrand('digdir')}>
-                      Digdir
-                    </Dropdown.Button>
-                  </Dropdown.Item>
-                  <Dropdown.Item>
-                    <Dropdown.Button onClick={() => setBrand('altinn')}>
-                      Altinn
+                    <Dropdown.Button onClick={() => setMode('light')}>
+                      Light
                     </Dropdown.Button>
                   </Dropdown.Item>
                   <Dropdown.Item>
-                    <Dropdown.Button onClick={() => setBrand('tilsynet')}>
-                      Tilsynet
+                    <Dropdown.Button onClick={() => setMode('dark')}>
+                      Dark
                     </Dropdown.Button>
                   </Dropdown.Item>
-                  <Dropdown.Item>
-                    <Dropdown.Button onClick={() => setBrand('portal')}>
-                      Brreg
-                    </Dropdown.Button>
-                  </Dropdown.Item>
-                </Dropdown.List>
-              </Dropdown>
-            </Dropdown.Context>
-          )}
-          {showModeSwitcher && (
-            <Dropdown.Context>
-              <Dropdown.Trigger variant='secondary'>
-                Mode: {capitalizeString(mode)}
-              </Dropdown.Trigger>
-              <Dropdown>
-                <Dropdown.List>
-                  <Dropdown.Item onClick={() => setMode('light')}>
-                    Light
-                  </Dropdown.Item>
-                  <Dropdown.Item onClick={() => setMode('dark')}>
-                    Dark
-                  </Dropdown.Item>
                 </Dropdown.List>
               </Dropdown>
             </Dropdown.Context>
diff --git a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
index 03dccb2f6b..347e009ab6 100644
--- a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
+++ b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
@@ -77,6 +77,16 @@ const MenuPageLayout = ({ content, data, banner }: PageLayoutProps) => {
           </div>
         </main>
       </Container>
+      <style>
+        {`
+          header {
+            [data-ds-color-mode='dark'] &,
+            [data-ds-color-mode='auto'] & {
+              background-color: var(--ds-color-neutral-background-default) !important;
+            }
+          }
+        `}
+      </style>
     </div>
   );
 };
diff --git a/apps/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css b/apps/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css
index 9687784f44..55a0cdea51 100644
--- a/apps/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css
+++ b/apps/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css
@@ -19,4 +19,9 @@
 
 .outerPage {
   background-color: var(--ds-color-neutral-background-subtle);
+
+  [data-ds-color-mode='dark'] &,
+  [data-ds-color-mode='auto'] & {
+    background-color: var(--ds-color-neutral-background-default);
+  }
 }
diff --git a/apps/storefront/layouts/NavPageLayout/NavPageLayout.module.css b/apps/storefront/layouts/NavPageLayout/NavPageLayout.module.css
index e120a282df..9a6056ad02 100644
--- a/apps/storefront/layouts/NavPageLayout/NavPageLayout.module.css
+++ b/apps/storefront/layouts/NavPageLayout/NavPageLayout.module.css
@@ -1,4 +1,9 @@
 .content {
-  margin-bottom: var(--ds-spacing-12);
-  margin-top: var(--ds-spacing-12);
+  padding-bottom: var(--ds-spacing-12);
+  padding-top: var(--ds-spacing-12);
+
+  [data-ds-color-mode='dark'] &,
+  [data-ds-color-mode='auto'] & {
+    background-color: var(--ds-color-neutral-background-default);
+  }
 }
diff --git a/apps/storefront/public/animations/Page.webm b/apps/storefront/public/animations/Page.webm
index 6a1f4f6fb0..017fcbb1a5 100644
Binary files a/apps/storefront/public/animations/Page.webm and b/apps/storefront/public/animations/Page.webm differ
diff --git a/apps/storefront/public/animations/Theme.webm b/apps/storefront/public/animations/Theme.webm
index 04420c3673..8d168c6a4f 100644
Binary files a/apps/storefront/public/animations/Theme.webm and b/apps/storefront/public/animations/Theme.webm differ
diff --git a/apps/storefront/public/img/Logotest.svg b/apps/storefront/public/img/Logotest.svg
index cc7bd355be..5fc51f9a92 100644
--- a/apps/storefront/public/img/Logotest.svg
+++ b/apps/storefront/public/img/Logotest.svg
@@ -1,5 +1,5 @@
 <svg width="743" height="640" viewBox="0 0 743 640" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="743" height="640" fill="white"/>
+<rect width="743" height="640" />
 <path d="M508.012 207.349C513.067 202.293 521.264 202.293 526.319 207.349L629.817 310.846C634.872 315.902 634.872 324.098 629.817 329.154L526.319 432.651C521.264 437.706 513.067 437.706 508.012 432.651L404.515 329.154C399.459 324.098 399.459 315.902 404.515 310.846L508.012 207.349Z" fill="#1E98F5"/>
 <rect x="371" y="344.361" width="172.258" height="172.258" rx="12.9455" transform="rotate(45 371 344.361)" fill="#68707C"/>
 <rect x="224.834" y="198.195" width="172.258" height="172.258" rx="12.9455" transform="rotate(45 224.834 198.195)" fill="#E5AA20"/>
diff --git a/apps/storefront/public/img/Toolbox.svg b/apps/storefront/public/img/Toolbox.svg
index 59e46e9c9e..c6e078958c 100644
--- a/apps/storefront/public/img/Toolbox.svg
+++ b/apps/storefront/public/img/Toolbox.svg
@@ -1,6 +1,6 @@
 <svg width="947" height="640" viewBox="0 0 947 640" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_2478_3464)">
-<rect width="946.709" height="640" fill="white"/>
+<rect width="946.709" height="640"/>
 <rect width="316.147" height="11.7295" transform="matrix(0.890435 -0.455111 0 1 202.865 209.593)" fill="#78C1F9"/>
 <rect width="289.801" height="11.7295" transform="matrix(0.890435 0.455111 0 1 478.509 67.9089)" fill="#78C1F9"/>
 <path d="M408.131 17.471C408.131 6.13441 416.289 1.17606 426.352 6.39615L501.734 45.499C507.484 48.4819 512.146 56.1516 512.146 62.6296V336.641C512.146 347.977 503.988 352.936 493.925 347.716L418.543 308.613C412.792 305.63 408.131 297.96 408.131 291.482V17.471Z" fill="#ACDBFF"/>
diff --git a/apps/storefront/public/img/component-previews/Divider.svg b/apps/storefront/public/img/component-previews/Divider.svg
index 6a25d3d2be..59b116f798 100644
--- a/apps/storefront/public/img/component-previews/Divider.svg
+++ b/apps/storefront/public/img/component-previews/Divider.svg
@@ -1,6 +1,7 @@
+
 <svg width="216" height="106" viewBox="0 0 216 106" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_2342_3587)">
-<rect width="180" height="90" transform="translate(22 8)" fill="white"/>
+<rect width="180" height="90" transform="translate(22 8)" />
 <rect x="22" y="8" width="180" height="3" rx="1.5" fill="#1B88DD"/>
 <rect x="22" y="37" width="180" height="3" rx="1.5" fill="#1B88DD"/>
 <rect x="22" y="66" width="180" height="3" rx="1.5" fill="#1B88DD"/>
diff --git a/apps/storefront/public/img/component-previews/Table.svg b/apps/storefront/public/img/component-previews/Table.svg
index e4db653adf..32d2ab11a5 100644
--- a/apps/storefront/public/img/component-previews/Table.svg
+++ b/apps/storefront/public/img/component-previews/Table.svg
@@ -1,6 +1,6 @@
 <svg width="216" height="106" viewBox="0 0 216 106" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_2342_3583)">
-<rect width="164" height="101" transform="translate(26 2.5)" fill="white"/>
+<rect width="164" height="101" transform="translate(26 2.5)"/>
 <rect x="26" y="34.5" width="164" height="3" rx="1.5" fill="#1B88DD"/>
 <rect x="26" y="67.5" width="164" height="3" rx="1.5" fill="#1B88DD"/>
 <rect x="26" y="100.5" width="164" height="3" rx="1.5" fill="#1B88DD"/>
diff --git a/apps/storefront/public/img/component-previews/Typography.svg b/apps/storefront/public/img/component-previews/Typography.svg
index c14aa8827f..515d93699e 100644
--- a/apps/storefront/public/img/component-previews/Typography.svg
+++ b/apps/storefront/public/img/component-previews/Typography.svg
@@ -1,6 +1,6 @@
 <svg width="216" height="106" viewBox="0 0 216 106" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_2342_3518)">
-<rect width="200" height="90" transform="translate(8 8)" fill="white"/>
+<rect width="200" height="90" transform="translate(8 8)"/>
 <rect x="10" y="10" width="125" height="10" rx="5" fill="#1B88DD"/>
 <rect x="144" y="10" width="62" height="10" rx="5" fill="#4BADF7"/>
 <rect x="10" y="29" width="109" height="10" rx="5" fill="#1B88DD"/>