diff --git a/lib/bundle.css b/lib/bundle.css
index c5e3410b..f6ac49b0 100644
--- a/lib/bundle.css
+++ b/lib/bundle.css
@@ -963,6 +963,9 @@ a {
   display: grid;
   width: 100%;
 }
+.ssb-expansion-box:has(.header:hover) {
+  box-shadow: 0 0 0 1px #00824d;
+}
 .ssb-expansion-box .header {
   background-color: transparent;
   border: none;
@@ -978,6 +981,13 @@ a {
   cursor: pointer;
   display: flex;
 }
+.ssb-expansion-box .header:hover .icon-wrapper::before {
+  height: 3rem;
+  width: 3rem;
+}
+.ssb-expansion-box .header:hover .icon-wrapper .expand-icon {
+  color: #fff;
+}
 .ssb-expansion-box .header .header-text {
   font-family: "Roboto", sans-serif !important;
   font-stretch: normal;
@@ -1017,6 +1027,8 @@ a {
   align-items: center;
   display: inline-flex;
   margin-right: 1rem;
+}
+.ssb-expansion-box .header .icon svg {
   height: 2rem;
   width: 2rem;
 }
@@ -1063,21 +1075,20 @@ a {
     padding: 0 1.25rem 1.25rem;
   }
 }
-.ssb-expansion-box:hover {
-  box-shadow: 0 0 0 1px #00824d;
-}
-.ssb-expansion-box:hover .header .icon-wrapper::before {
-  height: 3rem;
-  width: 3rem;
-}
-.ssb-expansion-box:hover .header .icon-wrapper .expand-icon {
-  color: #fff;
-}
 .ssb-expansion-box:focus-within {
   outline: #9272fc solid 2px;
   outline-offset: 2px;
   border-radius: 8px;
 }
+.ssb-expansion-box.sneak-peek:not(.ssb-expansion-box.sneak-peek.open) {
+  position: relative;
+}
+.ssb-expansion-box.sneak-peek:not(.ssb-expansion-box.sneak-peek.open) .header::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
 .ssb-expansion-box.sneak-peek .header {
   padding-bottom: 0.5rem;
   transition: padding-bottom 0.5s;
@@ -2228,11 +2239,15 @@ a {
   border-bottom: transparent;
 }
 @media screen and (min-width: 992px) {
-  .ssb-table-wrapper .ssb-table .caption-text-wrapper,
   .ssb-table-wrapper .ssb-table tfoot td > * {
     max-width: 780px;
   }
 }
+@media screen and (min-width: 992px) {
+  .ssb-table-wrapper .ssb-table .caption-text-wrapper {
+    max-width: 998px;
+  }
+}
 .ssb-table-wrapper .ssb-table th,
 .ssb-table-wrapper .ssb-table td {
   text-align: left;
@@ -2282,7 +2297,8 @@ a {
   font-weight: bold;
   text-align: left;
   width: 998px;
-  padding-top: 10px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 .ssb-table-wrapper .ssb-table caption .caption-wrapper .scroll-icon-wrapper {
   display: flex;
diff --git a/package-lock.json b/package-lock.json
index 1ba95918..2d8c79ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@statisticsnorway/ssb-component-library",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@statisticsnorway/ssb-component-library",
-      "version": "2.2.7",
+      "version": "2.2.8",
       "license": "Apache-2.0",
       "dependencies": {
         "prismjs": "~1.29.0",
diff --git a/package.json b/package.json
index dd0f2eac..1d0b151c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@statisticsnorway/ssb-component-library",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "description": "Component library for SSB (Statistics Norway)",
   "main": "lib/bundle.js",
   "scripts": {
diff --git a/src/@types/assets/index.d.ts b/src/@types/assets/index.d.ts
new file mode 100644
index 00000000..2740a7d7
--- /dev/null
+++ b/src/@types/assets/index.d.ts
@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import React = require('react')
+
+  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
+  export default ReactComponent
+}
diff --git a/src/components/ExpansionBox/ExpansionBox.tsx b/src/components/ExpansionBox/ExpansionBox.tsx
index 07c3456c..d53d420f 100644
--- a/src/components/ExpansionBox/ExpansionBox.tsx
+++ b/src/components/ExpansionBox/ExpansionBox.tsx
@@ -1,18 +1,19 @@
 import React, { useEffect, useRef, useState, ReactNode } from 'react'
 import { ChevronDown, ChevronUp } from 'react-feather'
+import SparklesIcon from '../../media/icons/sparkles.svg'
 
 export interface ExpansionBoxProps {
+  aiIcon?: boolean
   className?: string
   header: string
-  icon?: ReactNode
   openByDefault?: boolean
   sneakPeek?: boolean
   text: string | ReactNode
 }
 const ExpansionBox: React.FC<ExpansionBoxProps> = ({
+  aiIcon = false,
   className = '',
   header = '',
-  icon,
   openByDefault = false,
   sneakPeek,
   text = '',
@@ -24,7 +25,7 @@ const ExpansionBox: React.FC<ExpansionBoxProps> = ({
   useEffect(() => {
     if (contentRef.current) {
       const contentHeight = contentRef.current.scrollHeight
-      const maxHeightValue = contentHeight <= 1000 ? contentHeight : 1000
+      const maxHeightValue = contentHeight <= 1000 ? contentHeight + 10 : 1000
       setMaxHeight(isOpen ? `${maxHeightValue}px` : '')
     }
   }, [isOpen])
@@ -34,7 +35,11 @@ const ExpansionBox: React.FC<ExpansionBoxProps> = ({
       className={`ssb-expansion-box${className ? ` ${className}` : ''}${isOpen ? ' open' : ''}${sneakPeek ? ` sneak-peek` : ''}`}
     >
       <button className='header' aria-expanded={isOpen ? 'true' : 'false'} onClick={() => toggleOpen(!isOpen)}>
-        {icon && <div className='icon'>{icon}</div>}
+        {aiIcon && (
+          <div className='icon'>
+            <SparklesIcon />
+          </div>
+        )}
         <span className='header-text'>{header}</span>
         <div className='icon-wrapper'>
           {!isOpen && <ChevronDown className='expand-icon' size={24} />}
diff --git a/src/components/ExpansionBox/README.md b/src/components/ExpansionBox/README.md
index 6ad32392..42548297 100644
--- a/src/components/ExpansionBox/README.md
+++ b/src/components/ExpansionBox/README.md
@@ -18,11 +18,11 @@
 </div>
 ```
 
-```html SneakPeek and icon
+```html SneakPeek and aiIcon
 <div class="ssb-expansion-box sneak-peek">
    <button class="header" aria-expanded="false">
       <div class="icon">
-        <i>{feather.sun 32px}</i>
+        <i>{SparklesIcon 32px}</i>
       </div>
       <span class="header-text">ExpansionBox with icon and sneakpeek content</span>
       <div class="icon-wrapper">
@@ -42,18 +42,18 @@
 
 <ExpansionBox header='ExpansionBox open by default' text='This is paragraph text which explains the expansionBox' openByDefault />
 
-<ExpansionBox header='ExpansionBox with icon and sneakpeek text' text='This is paragraph text which explains the expansionBox' icon={<Sun size={32} />} sneakPeek />
+<ExpansionBox header='ExpansionBox with AI icon and sneakpeek text' text='This is paragraph text which explains the expansionBox' aiIcon sneakPeek />
 ```
 
 Available props:
 
-| Name          | Type              | Description                           |
-| ------------- | ----------------- | ------------------------------------- |
-| className     | string            | Optional container class              |
-| header        | string            | Header text                           |
-| icon          | node              | Renders an icon to the left of header |
-| sneakPeek     | bool              | Show a sneakpeek of the text          |
-| openByDefault | bool              | Open when rendered. Defaults to false |
-| text          | string or element | Content in expansionBox                   |
+| Name          | Type              | Description                                                    |
+| ------------- | ----------------- | -------------------------------------------------------------  |
+| aiIcon        | bool              | Show a AI icon to the left of header                           |
+| className     | string            | Optional container class                                       |
+| header        | string            | Header text                                                    |
+| sneakPeek     | bool              | Show a sneakpeek of the text                                   |
+| openByDefault | bool              | Open when rendered. Defaults to false                          |
+| text          | string or element | Content in expansionBox                                        |
 
 
diff --git a/src/components/ExpansionBox/_expansion-box.scss b/src/components/ExpansionBox/_expansion-box.scss
index 1e883f2e..a8320a3a 100644
--- a/src/components/ExpansionBox/_expansion-box.scss
+++ b/src/components/ExpansionBox/_expansion-box.scss
@@ -4,6 +4,10 @@
   display: grid;
   width: 100%;
 
+  &:has(.header:hover) {
+    box-shadow: 0 0 0 1px $ssb-green-4;
+  }
+
   .header {
     @include reset-button;
     padding: 1.7rem 2.5rem;
@@ -11,6 +15,19 @@
     cursor: pointer;
     display: flex;
 
+    &:hover {
+      .icon-wrapper {
+        &::before {
+          height: 3rem;
+          width: 3rem;
+        }
+
+        .expand-icon {
+          color: $ssb-white;
+        }
+      }
+    }
+
     .header-text {
       @include roboto;
       color: $ssb-dark-6;
@@ -52,8 +69,11 @@
       align-items: center;
       display: inline-flex;
       margin-right: 1rem;
-      height: 2rem;
-      width: 2rem;
+
+      svg {
+        height: 2rem;
+        width: 2rem;
+      }
     }
 
     &:focus-visible {
@@ -105,27 +125,23 @@
     }
   }
 
-  &:hover {
-    box-shadow: 0 0 0 1px $ssb-green-4;
-
-    .header .icon-wrapper {
-      &::before {
-        height: 3rem;
-        width: 3rem;
-      }
-
-      .expand-icon {
-        color: $ssb-white;
-      }
-    }
-  }
-
   &:focus-within {
     @include focus-ring;
     border-radius: 8px;
   }
 
   &.sneak-peek {
+    &:not(&.open) {
+      position: relative;
+
+      .header::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+      }
+    }
+
     .header {
       padding-bottom: 0.5rem;
       transition: padding-bottom 0.5s;
diff --git a/src/components/ExpansionBox/expansionBox.story.jsx b/src/components/ExpansionBox/expansionBox.story.jsx
index 9e4514f0..10bd91d1 100644
--- a/src/components/ExpansionBox/expansionBox.story.jsx
+++ b/src/components/ExpansionBox/expansionBox.story.jsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { Sun } from 'react-feather'
 import ExpansionBox from './ExpansionBox'
 
 const mockedHeader = 'This is a expansion box header'
@@ -53,28 +52,13 @@ export const DefaultOpen = () => (
 )
 
 export const SneakPeek = () => (
-  <div style={{ width: '1800px', display: 'flex', justifyContent: 'center' }}>
-    <div style={{ width: '740px', marginRight: '10px' }}>
-      <ExpansionBox
-        header='ExpansionBox with icon and sneakpeek text'
-        text={mockedText}
-        icon={<Sun size={32} />}
-        sneakPeek
-      />
-    </div>
-    <div style={{ width: '740px' }}>
-      <ExpansionBox
-        header='ExpansionBox with icon and sneakpeek content'
-        text={mockedContent}
-        icon={<Sun size={32} />}
-        sneakPeek
-      />
-    </div>
+  <div style={{ width: '740px', marginRight: '10px' }}>
+    <ExpansionBox header='ExpansionBox with sneakpeek text' text={mockedText} sneakPeek />
   </div>
 )
 
-export const Icon = () => (
-  <div style={{ width: '450px' }}>
-    <ExpansionBox header={mockedHeader} text={mockedContent} icon={<Sun size={32} />} />
+export const SneakpeekWithAiIcon = () => (
+  <div style={{ width: '740px' }}>
+    <ExpansionBox header='ExpansionBox with sneakpeek text and AI icon' text={mockedContent} aiIcon sneakPeek />
   </div>
 )
diff --git a/src/media/icons/sparkles.svg b/src/media/icons/sparkles.svg
new file mode 100644
index 00000000..c430082c
--- /dev/null
+++ b/src/media/icons/sparkles.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" focusable="false" role="img"><path fill="currentColor" fill-rule="evenodd" d="M13 1.75a.75.75 0 0 1 .68.433l.52 1.116 1.117.521a.75.75 0 0 1 0 1.36l-1.116.52-.521 1.117a.75.75 0 0 1-1.36 0l-.52-1.116-1.117-.521a.75.75 0 0 1 0-1.36l1.116-.52.521-1.117A.75.75 0 0 1 13 1.75m0 2.51a.75.75 0 0 1-.24.24.75.75 0 0 1 .24.24.75.75 0 0 1 .24-.24.75.75 0 0 1-.24-.24m-6-.01a.75.75 0 0 1 .68.433l1.157 2.48 2.48 1.157a.75.75 0 0 1 0 1.36l-2.48 1.157-1.157 2.48a.75.75 0 0 1-1.36 0l-1.157-2.48-2.48-1.157a.75.75 0 0 1 0-1.36l2.48-1.157 1.157-2.48A.75.75 0 0 1 7 4.25m0 2.523-.593 1.271a.75.75 0 0 1-.363.363L4.774 9l1.27.593a.75.75 0 0 1 .363.363L7 11.226l.593-1.27a.75.75 0 0 1 .363-.363L9.226 9l-1.27-.593a.75.75 0 0 1-.363-.363zm8.68 1.91a.75.75 0 0 0-1.36 0l-1.793 3.844-3.844 1.793a.75.75 0 0 0 0 1.36l3.844 1.794 1.793 3.843a.75.75 0 0 0 1.36 0l1.794-3.843 3.843-1.794a.75.75 0 0 0 0-1.36l-3.843-1.793zm-1.91 4.725L15 10.773l1.23 2.635a.75.75 0 0 0 .362.362L19.227 15l-2.635 1.23a.75.75 0 0 0-.362.362L15 19.227l-1.23-2.635a.75.75 0 0 0-.362-.362L10.773 15l2.635-1.23a.75.75 0 0 0 .362-.362" clip-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index c96c3bd9..7622968d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,6 +10,7 @@
     "strictNullChecks": true,
     "noImplicitThis": true,
     "noImplicitReturns": true,
-    "skipLibCheck": false
+    "skipLibCheck": false,
+    "typeRoots": ["./src/@types", "./node_modules/@types"],
   }
 }