diff --git a/component-overview/examples/header/header.jsx b/component-overview/examples/header/header.jsx
index e6e9850548..03dd4da5af 100644
--- a/component-overview/examples/header/header.jsx
+++ b/component-overview/examples/header/header.jsx
@@ -1,10 +1,11 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Icon } from '@sb1/ffe-icons-react';
 import classNames from 'classnames';
 
 () => {
     const [isUserNavOpen, setIsUserNavOpen] = useState(false);
+    const [isSiteNavOpen, setIsSiteNavOpen] = useState(false);
 
     const expandMoreIcon =
         'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtMzczLjUzOXEtNy4yMzEgMC0xMy40NjEtMi4zMDgtNi4yMzEtMi4zMDgtMTEuODQ2LTcuOTIzTDI3NC45MjQtNTYzLjUzOXEtOC4zMDgtOC4zMDctOC41LTIwLjg4NC0uMTkzLTEyLjU3NyA4LjUtMjEuMjY5IDguNjkyLTguNjkyIDIxLjA3Ni04LjY5MnQyMS4wNzYgOC42OTJMNDgwLTQ0Mi43NjhsMTYyLjkyNC0xNjIuOTI0cTguMzA3LTguMzA3IDIwLjg4NC04LjUgMTIuNTc2LS4xOTIgMjEuMjY4IDguNSA4LjY5MyA4LjY5MiA4LjY5MyAyMS4wNzcgMCAxMi4zODQtOC42OTMgMjEuMDc2TDUwNS4zMDctMzgzLjc3cS01LjYxNSA1LjYxNS0xMS44NDYgNy45MjMtNi4yMyAyLjMwOC0xMy40NjEgMi4zMDhaIi8+PC9zdmc+';
@@ -76,13 +77,17 @@ import classNames from 'classnames';
                     <div className="ffe-header__user-nav-toggle">
                         <button
                             className="ffe-header__icon-button ffe-header__icon-button--user-nav"
-                            onClick={() => setIsUserNavOpen(prev => !prev)}
+                            onClick={() => {
+                                setIsUserNavOpen(prev => !prev);
+                                setIsSiteNavOpen(false);
+                            }}
                         >
                             <span className="ffe-header__user-name">
                                 Jomar Beate Skrothaug
                                 <span className="ffe-header__user-chevron">
                                     <Icon
                                         fileUrl={expandMoreIcon}
+                                        size="md"
                                         className={classNames(
                                             'ffe-header__user-chevron-icon',
                                             {
@@ -99,17 +104,30 @@ import classNames from 'classnames';
                                     aria-label="bruker"
                                     size="xl"
                                 />
-
-                                <div className="ffe-header__notification-bubble">
-                                    5
-                                </div>
+                            </div>
+                            <div className="ffe-header__notification-bubble">
+                                5
                             </div>
                         </button>
                     </div>
-
                     <div className="ffe-header__site-nav-toggle">
-                        <button className="ffe-header__icon-button ffe-header__icon-button--site-nav">
-                            <span className="ffe-header__site-nav-hamburger">
+                        <button
+                            className="ffe-header__icon-button ffe-header__icon-button--site-nav"
+                            type="button"
+                            onClick={() => {
+                                setIsUserNavOpen(false);
+                                setIsSiteNavOpen(prev => !prev);
+                            }}
+                        >
+                            <span
+                                className={classNames(
+                                    'ffe-header__site-nav-hamburger',
+                                    {
+                                        'ffe-header__site-nav-hamburger--expanded':
+                                            isSiteNavOpen,
+                                    },
+                                )}
+                            >
                                 <span className="ffe-header__site-nav-hamburger-bar" />
                             </span>
                         </button>
@@ -154,7 +172,7 @@ import classNames from 'classnames';
                                         Chat - stengt
                                     </div>
                                 </li>
-                                <li className="ffe-header__list-item ffe-header__list-item--centered">
+                                <li className="ffe-header__list-item">
                                     <button className="ffe-header__logout-button">
                                         <span className="ffe-header__logout-button-label">
                                             Logg ut
@@ -170,7 +188,16 @@ import classNames from 'classnames';
                         </nav>
 
                         <nav className="ffe-header__site-nav" role="navigation">
-                            <ul className="ffe-header__list ffe-header__site-nav-list">
+                            <ul
+                                className={classNames(
+                                    'ffe-header__list',
+                                    'ffe-header__site-nav-list',
+                                    {
+                                        'ffe-header__site-nav-list--visible':
+                                            isSiteNavOpen,
+                                    },
+                                )}
+                            >
                                 <li className="ffe-header__list-item">
                                     <a className="ffe-header__link" href="#">
                                         Oversikt
diff --git a/packages/ffe-header/Header.stories.tsx b/packages/ffe-header/Header.stories.tsx
index 829b58b6ed..e096a8479f 100644
--- a/packages/ffe-header/Header.stories.tsx
+++ b/packages/ffe-header/Header.stories.tsx
@@ -17,6 +17,7 @@ export const Standard: Story = {
     args: {},
     render: function Render() {
         const [isUserNavOpen, setIsUserNavOpen] = useState(false);
+        const [isSiteNavOpen, setIsSiteNavOpen] = useState(false);
         /* eslint-disable jsx-a11y/anchor-is-valid */
         return (
             <div>
@@ -82,7 +83,10 @@ export const Standard: Story = {
                         <div className="ffe-header__user-nav-toggle">
                             <button
                                 className="ffe-header__icon-button ffe-header__icon-button--user-nav"
-                                onClick={() => setIsUserNavOpen(prev => !prev)}
+                                onClick={() => {
+                                    setIsUserNavOpen(prev => !prev);
+                                    setIsSiteNavOpen(false);
+                                }}
                             >
                                 <span className="ffe-header__user-name">
                                     Jomar Beate Skrothaug
@@ -106,17 +110,31 @@ export const Standard: Story = {
                                         aria-label="bruker"
                                         size="xl"
                                     />
-
-                                    <div className="ffe-header__notification-bubble">
-                                        5
-                                    </div>
+                                </div>
+                                <div className="ffe-header__notification-bubble">
+                                    5
                                 </div>
                             </button>
                         </div>
 
                         <div className="ffe-header__site-nav-toggle">
-                            <button className="ffe-header__icon-button ffe-header__icon-button--site-nav">
-                                <span className="ffe-header__site-nav-hamburger">
+                            <button
+                                className="ffe-header__icon-button ffe-header__icon-button--site-nav"
+                                type="button"
+                                onClick={() => {
+                                    setIsUserNavOpen(false);
+                                    setIsSiteNavOpen(prev => !prev);
+                                }}
+                            >
+                                <span
+                                    className={classNames(
+                                        'ffe-header__site-nav-hamburger',
+                                        {
+                                            'ffe-header__site-nav-hamburger--expanded':
+                                                isSiteNavOpen,
+                                        },
+                                    )}
+                                >
                                     <span className="ffe-header__site-nav-hamburger-bar" />
                                 </span>
                             </button>
@@ -171,7 +189,7 @@ export const Standard: Story = {
                                             Chat - stengt
                                         </div>
                                     </li>
-                                    <li className="ffe-header__list-item ffe-header__list-item--centered">
+                                    <li className="ffe-header__list-item">
                                         <button className="ffe-header__logout-button">
                                             <span className="ffe-header__logout-button-label">
                                                 Logg ut
@@ -190,7 +208,16 @@ export const Standard: Story = {
                                 className="ffe-header__site-nav"
                                 role="navigation"
                             >
-                                <ul className="ffe-header__list ffe-header__site-nav-list">
+                                <ul
+                                    className={classNames(
+                                        'ffe-header__list',
+                                        'ffe-header__site-nav-list',
+                                        {
+                                            'ffe-header__site-nav-list--visible':
+                                                isSiteNavOpen,
+                                        },
+                                    )}
+                                >
                                     <li className="ffe-header__list-item">
                                         <a
                                             className="ffe-header__link"
diff --git a/packages/ffe-header/examples/index.html b/packages/ffe-header/examples/index.html
index 19ba71d203..ec658ad6ea 100644
--- a/packages/ffe-header/examples/index.html
+++ b/packages/ffe-header/examples/index.html
@@ -118,7 +118,7 @@
                                 </div>
                             </li>
                             <li
-                                class="ffe-header__list-item ffe-header__list-item--centered"
+                                class="ffe-header__list-item"
                             >
                                 <button class="ffe-header__logout-button">
                                     <span
diff --git a/packages/ffe-header/less/ffe-header.less b/packages/ffe-header/less/ffe-header.less
index bb045391ea..11efc20d48 100644
--- a/packages/ffe-header/less/ffe-header.less
+++ b/packages/ffe-header/less/ffe-header.less
@@ -1,4 +1,3 @@
-// stylelint-disable block-no-empty
 @import 'theme.less';
 
 .ffe-header {
@@ -6,13 +5,9 @@
 
     background: var(--ffe-v-background-color);
     text-align: center;
+    isolation: isolate;
+    position: relative;
     z-index: 999;
-
-    &__user-nav,
-    &__site-nav-list--visible {
-        z-index: 100000;
-    }
-
     &__border {
         border-bottom: 1px solid var(--ffe-v-header-border-bottom-color);
     }
@@ -23,15 +18,13 @@
 
     &__border:first-child {
         position: relative;
-        z-index: 1000;
     }
 
     &__wrapper {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        align-items: center;
+        display: grid;
+        column-gap: var(--ffe-spacing-md);
+        grid-template-columns: auto 1fr auto;
+        place-items: center;
         position: relative;
         margin: 0 auto;
         padding: 0 var(--ffe-spacing-sm);
@@ -53,10 +46,12 @@
             &:hover {
                 color: var(--ffe-v-link-hover-color);
 
-                .ffe-header__user-nav & {
+                .ffe-header__user-nav &,
+                .ffe-header__site-nav & {
                     background: var(
                         --ffe-v-usernav-link-hover-background-color
                     );
+                    color: var(--ffe-v-usernav-list-hover-color);
                 }
             }
         }
@@ -104,10 +99,6 @@
             color: var(--ffe-v-link-disabled-color);
             cursor: default;
         }
-
-        .ffe-header__notification-bubble {
-            margin-left: var(--ffe-spacing-xs);
-        }
     }
 
     &__list {
@@ -117,12 +108,6 @@
         list-style: none;
     }
 
-    &__list-item {
-        &--centered {
-            text-align: center;
-        }
-    }
-
     &__logo {
         flex-grow: 1;
         margin: var(--ffe-spacing-xs) 0;
@@ -150,16 +135,7 @@
 
     &__logout-button,
     &__icon-button {
-        border: none;
-        margin: 0;
-        padding: 0;
-        width: auto;
-        overflow: visible;
-        background: transparent;
-        color: inherit;
-        font: inherit;
-        line-height: normal;
-        text-align: inherit;
+        all: unset;
         cursor: pointer;
         border-radius: 6em;
 
@@ -170,21 +146,16 @@
 
     &__icon-button {
         color: var(--ffe-v-header-icon-button-color);
-
+        display: inline-grid;
+        grid-template-columns: auto 1fr;
         &:focus-visible {
             outline: 2px solid var(--ffe-v-header-icon-button-color);
             outline-offset: 2px;
         }
 
-        &--user-nav {
-            position: relative;
-            overflow: inherit;
-
-            .ffe-header__notification-bubble {
-                position: absolute;
-                left: 20px;
-                bottom: 4px;
-            }
+        .ffe-header__notification-bubble {
+            align-self: end;
+            transform: translate(-1.25rem, -5px);
         }
     }
 
@@ -201,8 +172,9 @@
         color: var(--color);
         background: var(--background-color);
         border: 2px solid var(--border-color);
-        line-height: 1.2;
-        padding: calc(var(--ffe-spacing-xs) + 2px) var(--ffe-spacing-md); // The + 2px is ensure button is 44px after we made a change to line-height.
+        line-height: 1.5;
+        padding: var(--ffe-spacing-xs) var(--ffe-spacing-md);
+        margin: var(--ffe-spacing-md) var(--ffe-spacing-md) 0;
 
         &:focus-visible {
             outline: 2px solid var(--border-color);
@@ -254,9 +226,13 @@
             transform: translateY(-25px);
             opacity: 0;
         }
+    }
+    &__user-nav,
+    &__site-nav {
         .ffe-header__link {
-            display: block;
-            padding: var(--ffe-spacing-xs) var(--ffe-spacing-xs);
+            display: flex;
+            gap: var(--ffe-spacing-sm);
+            padding: var(--ffe-spacing-xs) var(--ffe-spacing-md);
         }
     }
 
@@ -308,8 +284,6 @@
         }
 
         &--expanded {
-            /* stylelint-disable-next-line selector-class-pattern */
-
             .ffe-header__site-nav-hamburger-bar {
                 width: 0;
                 transform: translate(12px);
@@ -334,16 +308,14 @@
         font-family: var(--ffe-v-font-strong);
         font-weight: normal;
         font-size: 0.75rem;
-        line-height: 0.75rem;
+        line-height: 1;
         display: inline-grid;
         place-items: center;
-        padding: 0 var(--ffe-spacing-xs);
-        min-width: 1.7rem;
+        width: 1.6rem;
         aspect-ratio: 1;
         background: var(--ffe-v-notification-bubble-background-color);
         color: var(--ffe-v-notification-bubble-text-color);
         border-radius: 50%;
-        text-align: center;
     }
 }
 
@@ -354,6 +326,15 @@
             display: none;
         }
 
+        &__icon-button {
+            direction: rtl;
+
+            .ffe-header__notification-bubble {
+                transform: unset;
+                align-self: start;
+            }
+        }
+
         &__logo {
             a {
                 display: inline-block;
@@ -374,9 +355,8 @@
         }
 
         &__site-nav {
-            width: 100%;
-            flex-basis: 100%;
             padding: var(--ffe-spacing-xs);
+            grid-area: 2 e('/') 1 e('/') span 1 e('/') span 3;
 
             .ffe-header__list-item {
                 display: inline-block;
@@ -390,7 +370,6 @@
 
         &__secondary-nav {
             display: block;
-            flex-basis: 30%;
 
             .ffe-header__list-item {
                 display: inline-block;
@@ -399,7 +378,6 @@
         }
 
         &__user-nav-toggle {
-            flex-basis: 30%;
             text-align: right;
         }
 
@@ -409,18 +387,10 @@
             top: -16px;
             min-width: 225px;
             background: var(--ffe-v-background-color);
-            border: 2px solid var(--ffe-v-usernav-list-border-color);
-        }
-
-        &__logout-button {
-            margin: var(--ffe-spacing-xs);
-        }
-
-        &__icon-button--user-nav {
-            .ffe-header__notification-bubble {
-                left: -8px;
-                bottom: 12px;
-            }
+            border-radius: 24px;
+            box-shadow: var(--ffe-v-usernav-box-shadow);
+            border: 2px solid var(--ffe-v-usernav-border-color);
+            padding: var(--ffe-spacing-md) 0;
         }
     }
 }
@@ -450,7 +420,6 @@
             visibility: hidden;
             height: 1px;
             position: absolute;
-            z-index: 999;
             right: 0;
             left: 0;
             top: 1px;
@@ -459,15 +428,6 @@
             transform: translateY(-25px);
             transition: transform var(--ffe-transition-duration) var(--ffe-ease);
 
-            .ffe-header__list-item {
-                padding: var(--ffe-spacing-xs) var(--ffe-spacing-sm);
-            }
-
-            .ffe-header__link {
-                display: block;
-                padding: var(--ffe-spacing-xs) 0;
-            }
-
             &--visible {
                 visibility: visible;
                 height: auto;
@@ -495,5 +455,3 @@
         }
     }
 }
-
-// stylelint-enable block-no-empty
diff --git a/packages/ffe-header/less/theme.less b/packages/ffe-header/less/theme.less
index 618086e79f..81b30906b2 100644
--- a/packages/ffe-header/less/theme.less
+++ b/packages/ffe-header/less/theme.less
@@ -8,7 +8,7 @@
     --ffe-v-link-hover-color: var(--ffe-farge-vann);
     --ffe-v-link-focus-box-shadow-color: var(--ffe-farge-vann);
     --ffe-v-link-disabled-color: var(--ffe-farge-moerkgraa);
-    --ffe-v-notification-bubble-background-color: var(--ffe-farge-skog);
+    --ffe-v-notification-bubble-background-color: var(--ffe-farge-baer);
     --ffe-v-notification-bubble-text-color: var(--ffe-farge-hvit);
     --ffe-v-font-strong: 'SpareBank1-medium', arial, sans-serif;
 
@@ -16,6 +16,7 @@
     --ffe-v-usernav-link-hover-background-color: var(--ffe-farge-frost-30);
     --ffe-v-usernav-link-focus-background-color: var(--ffe-farge-frost-30);
     --ffe-v-usernav-list-border-color: var(--ffe-farge-vann);
+    --ffe-v-usernav-list-hover-color: var(--ffe-farge-svart);
     --ffe-v-header-icon-button-color: var(--ffe-farge-vann);
     --ffe-v-header-logout-color: var(--ffe-farge-vann);
     --ffe-v-header-logout-color-hover: var(--ffe-farge-hvit);
@@ -23,24 +24,29 @@
     --ffe-v-header-logout-border-color-hover: var(--ffe-farge-vann);
     --ffe-v-header-logout-background-color: var(--ffe-farge-hvit);
     --ffe-v-header-logout-background-color-hover: var(--ffe-farge-vann);
+    --ffe-v-usernav-box-shadow-color: var(--ffe-farge-graa);
+    --ffe-v-usernav-box-shadow: 0 1px 4px 0
+        var(--ffe-v-usernav-box-shadow-color);
+    --ffe-v-usernav-border-color: var(--ffe-farge-lysgraa);
 
     @media (prefers-color-scheme: dark) {
         .regard-color-scheme-preference {
             --ffe-v-background-color: var(--ffe-farge-svart);
-            --ffe-v-primary-color: var(--ffe-farge-vann-70);
+            --ffe-v-primary-color: var(--ffe-farge-vann-30);
             --ffe-v-header-border-bottom-color: var(--ffe-farge-moerkgraa);
             --ffe-v-header-logo-color: var(--ffe-farge-hvit);
-            --ffe-v-link-color: var(--ffe-farge-varmgraa);
-            --ffe-v-link-hover-color: var(--ffe-farge-hvit);
+            --ffe-v-link-color: var(--ffe-farge-hvit);
+            --ffe-v-link-hover-color: var(--ffe-farge-vann-30);
             --ffe-v-link-focus-box-shadow-color: var(--ffe-farge-hvit);
-            --ffe-v-notification-bubble-background-color: var(
-                --ffe-farge-skog-30
-            );
-            --ffe-v-notification-bubble-text-color: var(--ffe-farge-svart);
+            --ffe-v-link-disabled-color: var(--ffe-farge-graa);
+            --ffe-v-notification-bubble-text-color: var(--ffe-farge-hvit);
 
             /* User nav menu */
-            --ffe-v-usernav-link-hover-background-color: var(--ffe-farge-fjell);
+            --ffe-v-usernav-link-hover-background-color: var(
+                --ffe-farge-moerkgraa
+            );
             --ffe-v-usernav-list-border-color: var(--ffe-farge-vann-70);
+            --ffe-v-usernav-list-hover-color: var(--ffe-farge-hvit);
             --ffe-v-usernav-header-link-hover-focus-color: var(
                 --ffe-farge-svart
             );
@@ -53,6 +59,8 @@
             --ffe-v-header-logout-background-color-hover: var(
                 --ffe-farge-vann-30
             );
+            --ffe-v-usernav-box-shadow: none;
+            --ffe-v-usernav-border-color: var(--ffe-farge-koksgraa);
         }
     }
 }