diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/Examples.js
deleted file mode 100644
index 2b7b7275aea..00000000000
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/Examples.js
+++ /dev/null
@@ -1,392 +0,0 @@
-/**
- * UI lib Component Example
- *
- */
-
-import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
-import {
-  card as Card,
-  account_card as AccountCard,
-  confetti as Confetti,
-} from '@dnb/eufemia/src/icons'
-
-export const TimelineSingleCompleted = () => (
-  <ComponentBox data-visual-test="timeline-single-completed" hideCode>
-    {
-      /* jsx */ `
-  <Timeline 
-    data={[
-      {
-        title: "Completed event",
-        state: "completed"
-      }
-    ]}
-  />
-`
-    }
-  </ComponentBox>
-)
-
-export const TimelineSingleCurrent = () => (
-  <ComponentBox data-visual-test="timeline-single-current" hideCode>
-    {
-      /* jsx */ `
-  <Timeline 
-    data={[
-      {
-        title: "Current event",
-        state: "current"
-      }
-    ]}
-  />
-`
-    }
-  </ComponentBox>
-)
-
-export const TimelineSingleUpcoming = () => (
-  <ComponentBox data-visual-test="timeline-single-upcoming" hideCode>
-    {
-      /* jsx */ `
-  <Timeline 
-    data={[
-      {
-        title: "Upcoming event",
-        state: "upcoming"
-      }
-    ]}
-  />
-`
-    }
-  </ComponentBox>
-)
-
-export const TimelineMultipleData = () => (
-  <ComponentBox
-    noFragments={false}
-    data-visual-test="timeline-multiple"
-    hideCode
-  >
-    {
-      /* jsx */ `
-() => {
-  const events = [
-    {
-      title: "Completed event",
-      subtitle: "10. september 2021", 
-      state: "completed"
-    },
-    {
-      title: "Current event",
-      infoMessage: "Additional information about this step if needed.",
-      state: "current", 
-    },
-    {
-      title: "Upcoming event",
-      state: "upcoming", 
-    },
-  ];
-  
-  return (
-    <Timeline data={events}/>
-  )
-}
-`
-    }
-  </ComponentBox>
-)
-
-export const TimelineMultipleCompletedData = () => (
-  <ComponentBox
-    noFragments={false}
-    data-visual-test="timeline-multiple-completed"
-    hideCode
-  >
-    {
-      /* jsx */ `
-() => {
-  const events = [
-    {
-      title: "Completed event#1",
-      infoMessage: "Additional information about this step if needed.",
-      subtitle: "10. september 2021", 
-      state: "completed"
-    },
-    {
-      title: "Completed event#2",
-      infoMessage: "Additional information about this step if needed.",
-      state: "completed"
-    },
-    {
-      title: "Completed event#3",
-      subtitle: "10. september 2021", 
-      state: "completed"
-    },
-  ];
-  
-  return (
-    <Timeline data={events}/>
-  )
-}
-`
-    }
-  </ComponentBox>
-)
-
-export const TimelineMultipleUpcomingData = () => (
-  <ComponentBox
-    noFragments={false}
-    data-visual-test="timeline-multiple-upcoming"
-    hideCode
-  >
-    {
-      /* jsx */ `
-() => {
-  const events = [
-    {
-      title: "Upcoming event#1",
-      infoMessage: "Additional information about this step if needed.",
-      subtitle: "10. september 2021", 
-      state: "upcoming"
-    },
-    {
-      title: "Upcoming event#2",
-      infoMessage: "Additional information about this step if needed.",
-      state: "upcoming"
-    },
-    {
-      title: "Upcoming event#3",
-      subtitle: "10. september 2021", 
-      state: "upcoming"
-    },
-  ];
-  
-  return (
-    <Timeline data={events}/>
-  )
-}
-`
-    }
-  </ComponentBox>
-)
-
-export const TimelineMultipleCurrentData = () => (
-  <ComponentBox
-    noFragments={false}
-    data-visual-test="timeline-multiple-current"
-    hideCode
-  >
-    {
-      /* jsx */ `
-() => {
-  const events = [
-    {
-      title: "Current event#1",
-      infoMessage: "Additional information about this step if needed.",
-      subtitle: "10. september 2021", 
-      state: "current"
-    },
-    {
-      title: "Current event#2",
-      infoMessage: "Additional information about this step if needed.",
-      state: "current"
-    },
-    {
-      title: "Current event#3",
-      subtitle: "10. september 2021", 
-      state: "current"
-    },
-  ];
-  
-  return (
-    <Timeline data={events}/>
-  )
-}
-`
-    }
-  </ComponentBox>
-)
-
-export const TimelineMultiple = () => (
-  <ComponentBox data-visual-test="timeline-multiple-children" hideCode>
-    {
-      /* jsx */ `
-<Timeline>
-  <Timeline.Item 
-    title="Completed event" 
-    subtitle="10. september 2021" 
-    state="completed"
-  />
-  <Timeline.Item 
-    title="Current event" 
-    infoMessage="Additional information about this step if needed." 
-    state="current"
-  />
-  <Timeline.Item 
-    title="Upcoming event" 
-    state="upcoming"
-  />
-</Timeline>
-`
-    }
-  </ComponentBox>
-)
-
-export const TimelineStates = () => (
-  <ComponentBox
-    noFragments={false}
-    data-visual-test="timeline-states"
-    hideCode
-  >
-    {
-      /* jsx */ `
-() => {
-  const events = [
-    {
-      title: "Completed event",
-      subtitle: "10. september 2021", 
-      infoMessage: "Additional information about this step if needed.",
-      state: "completed"
-    },
-    {
-      title: "Current event",
-      subtitle: "10. september 2021", 
-      infoMessage: "Additional information about this step if needed.",
-      state: "current"
-    },
-    {
-      title: "Upcoming event",
-      subtitle: "10. september 2021", 
-      infoMessage: "Additional information about this step if needed.",
-      state: "upcoming"
-    },
-  ];
-  
-  return (
-    <Timeline data={events}/>
-  )
-}
-`
-    }
-  </ComponentBox>
-)
-
-export const TimelineIcons = () => (
-  <ComponentBox
-    noFragments={false}
-    data-visual-test="timeline-icons"
-    scope={{ Confetti, Card, AccountCard }}
-    hideCode
-  >
-    {
-      /* jsx */ `
-() => {
-  const events = [
-    {
-      title: "Completed event",
-      state: "completed",
-      icon: Confetti, 
-      iconAlt: "Celebration"
-    },
-    {
-      title: "Current event",
-      state: "current",
-      icon: Card,
-      iconAlt: "Bank card"
-    },
-    {
-      title: "Upcoming event",
-      state: "upcoming",
-      icon: AccountCard,
-      iconAlt: "Money bag & card"
-    },
-  ];
-  
-  return (
-    <Timeline data={events}/>
-  )
-}
-`
-    }
-  </ComponentBox>
-)
-
-export const TimelineSkeleton = () => (
-  <ComponentBox data-visual-test="timeline-skeleton" hideCode>
-    {
-      /* jsx */ `
-  <Timeline
-    skeleton
-    data={[
-      {
-        title: "Upcoming",
-        subtitle: "10. september 2021", 
-        state: "upcoming"
-      }, 
-      {
-        title: "Current",
-        subtitle: "11. september 2021", 
-        state: "current"
-      }, 
-      {
-        title: "Completed",
-        subtitle: "12. september 2021", 
-        state: "completed"
-      },      
-    ]}
-  />
-`
-    }
-  </ComponentBox>
-)
-
-export const TimelineAsChildrenSkeleton = () => (
-  <ComponentBox data-visual-test="timeline-children-skeleton" hideCode>
-    {
-      /* jsx */ `
-<Timeline skeleton>
-  <Timeline.Item 
-    title="Upcoming" 
-    subtitle="10. september 2021"
-    state="upcoming"
-  />
-  <Timeline.Item 
-    title="Current" 
-    subtitle="11. september 2021"
-    state="current"
-  />
-  <Timeline.Item 
-    title="Completed" 
-    subtitle="11. september 2021"
-    state="completed"
-  />
-</Timeline>
-`
-    }
-  </ComponentBox>
-)
-
-export const TimelineItemSkeleton = () => (
-  <ComponentBox data-visual-test="timeline-item-skeleton" hideCode>
-    {
-      /* jsx */ `
-  <Timeline
-    data={[
-      {
-        title: "Completed event#1",
-        subtitle: "10. september 2021", 
-        state: "completed", 
-        skeleton: true
-      }, 
-      {
-        title: "Completed event#2",
-        subtitle: "11. september 2021", 
-        infoMessage: "Additional information about this step if needed.",
-        state: "completed",
-      }
-    ]}
-  />
-`
-    }
-  </ComponentBox>
-)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/Examples.tsx
new file mode 100644
index 00000000000..042d7c02866
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/Examples.tsx
@@ -0,0 +1,327 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
+import {
+  card as Card,
+  account_card as AccountCard,
+  confetti as Confetti,
+} from '@dnb/eufemia/src/icons'
+import Timeline from '@dnb/eufemia/src/components/timeline/Timeline'
+
+export const TimelineSingleCompleted = () => (
+  <ComponentBox data-visual-test="timeline-single-completed" hideCode>
+    <Timeline
+      data={[
+        {
+          title: 'Completed event',
+          state: 'completed',
+        },
+      ]}
+    />
+  </ComponentBox>
+)
+
+export const TimelineSingleCurrent = () => (
+  <ComponentBox data-visual-test="timeline-single-current" hideCode>
+    <Timeline
+      data={[
+        {
+          title: 'Current event',
+          state: 'current',
+        },
+      ]}
+    />
+  </ComponentBox>
+)
+
+export const TimelineSingleUpcoming = () => (
+  <ComponentBox data-visual-test="timeline-single-upcoming" hideCode>
+    <Timeline
+      data={[
+        {
+          title: 'Upcoming event',
+          state: 'upcoming',
+        },
+      ]}
+    />
+  </ComponentBox>
+)
+
+export const TimelineMultipleData = () => (
+  <ComponentBox data-visual-test="timeline-multiple" hideCode>
+    {() => {
+      return (
+        <Timeline
+          data={[
+            {
+              title: 'Completed event',
+              subtitle: '10. september 2021',
+              state: 'completed',
+            },
+            {
+              title: 'Current event',
+              infoMessage:
+                'Additional information about this step if needed.',
+              state: 'current',
+            },
+            {
+              title: 'Upcoming event',
+              state: 'upcoming',
+            },
+          ]}
+        />
+      )
+    }}
+  </ComponentBox>
+)
+
+export const TimelineMultipleCompletedData = () => (
+  <ComponentBox data-visual-test="timeline-multiple-completed" hideCode>
+    {() => {
+      return (
+        <Timeline
+          data={[
+            {
+              title: 'Completed event#1',
+              infoMessage:
+                'Additional information about this step if needed.',
+              subtitle: '10. september 2021',
+              state: 'completed',
+            },
+            {
+              title: 'Completed event#2',
+              infoMessage:
+                'Additional information about this step if needed.',
+              state: 'completed',
+            },
+            {
+              title: 'Completed event#3',
+              subtitle: '10. september 2021',
+              state: 'completed',
+            },
+          ]}
+        />
+      )
+    }}
+  </ComponentBox>
+)
+
+export const TimelineMultipleUpcomingData = () => (
+  <ComponentBox data-visual-test="timeline-multiple-upcoming" hideCode>
+    {() => {
+      return (
+        <Timeline
+          data={[
+            {
+              title: 'Upcoming event#1',
+              infoMessage:
+                'Additional information about this step if needed.',
+              subtitle: '10. september 2021',
+              state: 'upcoming',
+            },
+            {
+              title: 'Upcoming event#2',
+              infoMessage:
+                'Additional information about this step if needed.',
+              state: 'upcoming',
+            },
+            {
+              title: 'Upcoming event#3',
+              subtitle: '10. september 2021',
+              state: 'upcoming',
+            },
+          ]}
+        />
+      )
+    }}
+  </ComponentBox>
+)
+
+export const TimelineMultipleCurrentData = () => (
+  <ComponentBox data-visual-test="timeline-multiple-current" hideCode>
+    {() => {
+      return (
+        <Timeline
+          data={[
+            {
+              title: 'Current event#1',
+              infoMessage:
+                'Additional information about this step if needed.',
+              subtitle: '10. september 2021',
+              state: 'current',
+            },
+            {
+              title: 'Current event#2',
+              infoMessage:
+                'Additional information about this step if needed.',
+              state: 'current',
+            },
+            {
+              title: 'Current event#3',
+              subtitle: '10. september 2021',
+              state: 'current',
+            },
+          ]}
+        />
+      )
+    }}
+  </ComponentBox>
+)
+
+export const TimelineMultiple = () => (
+  <ComponentBox data-visual-test="timeline-multiple-children" hideCode>
+    <Timeline>
+      <Timeline.Item
+        title="Completed event"
+        subtitle="10. september 2021"
+        state="completed"
+      />
+      <Timeline.Item
+        title="Current event"
+        infoMessage="Additional information about this step if needed."
+        state="current"
+      />
+      <Timeline.Item title="Upcoming event" state="upcoming" />
+    </Timeline>
+  </ComponentBox>
+)
+
+export const TimelineStates = () => (
+  <ComponentBox data-visual-test="timeline-states" hideCode>
+    {() => {
+      return (
+        <Timeline
+          data={[
+            {
+              title: 'Completed event',
+              subtitle: '10. september 2021',
+              infoMessage:
+                'Additional information about this step if needed.',
+              state: 'completed',
+            },
+            {
+              title: 'Current event',
+              subtitle: '10. september 2021',
+              infoMessage:
+                'Additional information about this step if needed.',
+              state: 'current',
+            },
+            {
+              title: 'Upcoming event',
+              subtitle: '10. september 2021',
+              infoMessage:
+                'Additional information about this step if needed.',
+              state: 'upcoming',
+            },
+          ]}
+        />
+      )
+    }}
+  </ComponentBox>
+)
+
+export const TimelineIcons = () => (
+  <ComponentBox
+    data-visual-test="timeline-icons"
+    scope={{ Confetti, Card, AccountCard }}
+    hideCode
+  >
+    {() => {
+      return (
+        <Timeline
+          data={[
+            {
+              title: 'Completed event',
+              state: 'completed',
+              icon: Confetti,
+              iconAlt: 'Celebration',
+            },
+            {
+              title: 'Current event',
+              state: 'current',
+              icon: Card,
+              iconAlt: 'Bank card',
+            },
+            {
+              title: 'Upcoming event',
+              state: 'upcoming',
+              icon: AccountCard,
+              iconAlt: 'Money bag & card',
+            },
+          ]}
+        />
+      )
+    }}
+  </ComponentBox>
+)
+
+export const TimelineSkeleton = () => (
+  <ComponentBox data-visual-test="timeline-skeleton" hideCode>
+    <Timeline
+      skeleton
+      data={[
+        {
+          title: 'Upcoming',
+          subtitle: '10. september 2021',
+          state: 'upcoming',
+        },
+        {
+          title: 'Current',
+          subtitle: '11. september 2021',
+          state: 'current',
+        },
+        {
+          title: 'Completed',
+          subtitle: '12. september 2021',
+          state: 'completed',
+        },
+      ]}
+    />
+  </ComponentBox>
+)
+
+export const TimelineAsChildrenSkeleton = () => (
+  <ComponentBox data-visual-test="timeline-children-skeleton" hideCode>
+    <Timeline skeleton>
+      <Timeline.Item
+        title="Upcoming"
+        subtitle="10. september 2021"
+        state="upcoming"
+      />
+      <Timeline.Item
+        title="Current"
+        subtitle="11. september 2021"
+        state="current"
+      />
+      <Timeline.Item
+        title="Completed"
+        subtitle="11. september 2021"
+        state="completed"
+      />
+    </Timeline>
+  </ComponentBox>
+)
+
+export const TimelineItemSkeleton = () => (
+  <ComponentBox data-visual-test="timeline-item-skeleton" hideCode>
+    <Timeline
+      data={[
+        {
+          title: 'Completed event#1',
+          subtitle: '10. september 2021',
+          state: 'completed',
+          skeleton: true,
+        },
+        {
+          title: 'Completed event#2',
+          subtitle: '11. september 2021',
+          infoMessage: 'Additional information about this step if needed.',
+          state: 'completed',
+        },
+      ]}
+    />
+  </ComponentBox>
+)
diff --git a/packages/dnb-eufemia/src/components/timeline/Timeline.tsx b/packages/dnb-eufemia/src/components/timeline/Timeline.tsx
index 282486e0e79..6e41088ccda 100644
--- a/packages/dnb-eufemia/src/components/timeline/Timeline.tsx
+++ b/packages/dnb-eufemia/src/components/timeline/Timeline.tsx
@@ -16,13 +16,7 @@ import {
   extendPropsWithContext,
 } from '../../shared/component-helper'
 
-export interface TimelineProps {
-  /**
-   * Custom className on the component root
-   * Default: null
-   */
-  className?: string
-
+export type TimelineProps = {
   /**
    * Skeleton should be applied when loading content
    * Default: null
@@ -44,6 +38,10 @@ export interface TimelineProps {
     | React.ReactElement<TimelineItemProps>
 }
 
+export type TimelineAllProps = TimelineProps &
+  Omit<React.AllHTMLAttributes<HTMLOListElement>, 'type' | 'data'> &
+  SpacingProps
+
 export const defaultProps = {
   className: null,
   skeleton: false,
@@ -51,7 +49,7 @@ export const defaultProps = {
   children: null,
 }
 
-const Timeline = (localProps: TimelineProps & SpacingProps) => {
+const Timeline = (localProps: TimelineAllProps) => {
   // Every component should have a context
   const context = React.useContext(Context)
 
@@ -88,8 +86,13 @@ const Timeline = (localProps: TimelineProps & SpacingProps) => {
   validateDOMAttributes(allProps, props)
 
   return (
-    <div
-      className={classnames('dnb-timeline', spacingClasses, className)}
+    <ol
+      className={classnames(
+        'dnb-timeline',
+        'dnb-space__reset',
+        spacingClasses,
+        className
+      )}
       data-testid="timeline"
       {...props}
     >
@@ -98,7 +101,7 @@ const Timeline = (localProps: TimelineProps & SpacingProps) => {
       ))}
 
       {children}
-    </div>
+    </ol>
   )
 }
 
diff --git a/packages/dnb-eufemia/src/components/timeline/TimelineItem.tsx b/packages/dnb-eufemia/src/components/timeline/TimelineItem.tsx
index 1efb1c28347..905acf9ccea 100644
--- a/packages/dnb-eufemia/src/components/timeline/TimelineItem.tsx
+++ b/packages/dnb-eufemia/src/components/timeline/TimelineItem.tsx
@@ -16,7 +16,7 @@ import Context from '../../shared/Context'
 import { SkeletonShow } from '../skeleton/Skeleton'
 import { extendPropsWithContext } from '../../shared/component-helper'
 
-export interface TimelineItemProps {
+export type TimelineItemProps = {
   /**
    * Icon displaying on the left side.
    * Default: `check` for state `completed`, `pin` for state `current`, and `calendar` for state `upcoming` .
@@ -57,6 +57,9 @@ export interface TimelineItemProps {
   skeleton?: SkeletonShow
 }
 
+export type TimelineItemAllProps = TimelineItemProps &
+  Omit<React.AllHTMLAttributes<HTMLLIElement>, 'title' | 'name'>
+
 const defaultProps = {
   icon: null,
   iconAlt: null,
@@ -67,7 +70,7 @@ const defaultProps = {
   skeleton: false,
 }
 
-const TimelineItem = (localProps: TimelineItemProps) => {
+const TimelineItem = (localProps: TimelineItemAllProps) => {
   // Every component should have a context
   const context = React.useContext(Context)
   const {
@@ -205,7 +208,7 @@ const TimelineItem = (localProps: TimelineItemProps) => {
   }
 
   return (
-    <div
+    <li
       className={classes}
       data-testid="timeline-item"
       aria-current={stateIsCurrent ? 'step' : undefined}
@@ -213,7 +216,7 @@ const TimelineItem = (localProps: TimelineItemProps) => {
     >
       <TimelineItemLabel />
       <TimelineItemContent />
-    </div>
+    </li>
   )
 }
 
diff --git a/packages/dnb-eufemia/src/components/timeline/__tests__/Timeline.test.tsx b/packages/dnb-eufemia/src/components/timeline/__tests__/Timeline.test.tsx
index 2ed40d2c165..36996884afc 100644
--- a/packages/dnb-eufemia/src/components/timeline/__tests__/Timeline.test.tsx
+++ b/packages/dnb-eufemia/src/components/timeline/__tests__/Timeline.test.tsx
@@ -43,7 +43,7 @@ describe('Timeline', () => {
     expect(screen.queryAllByTestId('timeline-item')).toHaveLength(3)
   })
 
-  it('current will have aria-current="step', () => {
+  it('current will have aria-current="step"', () => {
     render(
       <Timeline
         data={[
@@ -61,6 +61,29 @@ describe('Timeline', () => {
     expect(lastElem.getAttribute('aria-current')).toBe('step')
   })
 
+  it('uses ordered list semantic elements', () => {
+    render(
+      <Timeline
+        data={[
+          {
+            title: 'Upcoming',
+            state: 'upcoming',
+          },
+          { title: 'Completed', state: 'completed' },
+          { title: 'Current', state: 'current' },
+        ]}
+      />
+    )
+
+    const element = document.querySelector('.dnb-timeline')
+    const firstChild = element.firstChild as HTMLLIElement
+    const lastChild = element.lastChild as HTMLLIElement
+
+    expect(element.tagName).toBe('OL')
+    expect(firstChild.tagName).toBe('LI')
+    expect(lastChild.tagName).toBe('LI')
+  })
+
   it('inherits skeleton prop from provider', () => {
     const skeletonClassName = 'dnb-skeleton'
 
@@ -85,13 +108,13 @@ describe('Timeline', () => {
   it('should support spacing props', () => {
     render(
       <Timeline
+        top="2rem"
         data={[
           {
             title: 'Upcoming',
             state: 'upcoming',
           },
         ]}
-        top="2rem"
       />
     )
 
@@ -103,10 +126,31 @@ describe('Timeline', () => {
     expect(attributes).toEqual(['class', 'data-testid'])
     expect(Array.from(element.classList)).toEqual([
       'dnb-timeline',
+      'dnb-space__reset',
       'dnb-space__top--large',
     ])
   })
 
+  it('should support extra attributes', () => {
+    render(
+      <Timeline
+        aria-label="extra-label"
+        data={[
+          {
+            title: 'Upcoming',
+            state: 'upcoming',
+          },
+          { title: 'Completed', state: 'completed' },
+          { title: 'Current', state: 'current' },
+        ]}
+      />
+    )
+
+    const element = document.querySelector('.dnb-timeline')
+
+    expect(element.getAttribute('aria-label')).toBe('extra-label')
+  })
+
   describe('TimelineItem', () => {
     it('renders title', () => {
       const title = 'Completed'
diff --git a/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap b/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
index d6bc55bd571..df588849fbb 100644
--- a/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Timeline scss have to match default theme snapshot 1`] = `
 * Button mixins
 *
 */
-:root {
+.dnb-timeline {
   --timeline-icon-height--small: var(--button-height--small);
   --timeline-icon-width--small: var(--button-width--small);
   --timeline-icon-border-radius--small: calc(
@@ -34,7 +34,6 @@ exports[`Timeline scss have to match default theme snapshot 1`] = `
     var(--timeline-icon-width-diff) + var(--timeline-border-spacing)
   );
 }
-
 .dnb-timeline__item {
   margin-left: var(--timeline-icon-width-diff);
 }
@@ -143,19 +142,21 @@ exports[`Timeline scss have to match snapshot 1`] = `
 .dnb-timeline {
   display: flex;
   flex-direction: column;
+  padding: 0;
+  list-style: none;
 }
 .dnb-timeline__item__label {
   display: flex;
   align-items: center;
-  text-align: left;
   padding: 0;
+  text-align: left;
 }
 .dnb-timeline__item__label__icon {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  height: auto;
   justify-content: center;
+  height: auto;
   padding: 0;
 }
 .dnb-timeline__item__label__title {
diff --git a/packages/dnb-eufemia/src/components/timeline/style/dnb-timeline.scss b/packages/dnb-eufemia/src/components/timeline/style/dnb-timeline.scss
index 8289712b2dc..0906c918654 100644
--- a/packages/dnb-eufemia/src/components/timeline/style/dnb-timeline.scss
+++ b/packages/dnb-eufemia/src/components/timeline/style/dnb-timeline.scss
@@ -8,28 +8,37 @@
 .dnb-timeline {
   display: flex;
   flex-direction: column;
+  padding: 0;
+  list-style: none;
+
   &__item {
     &__label {
       display: flex;
       align-items: center;
-      text-align: left;
       padding: 0;
+
+      text-align: left;
+
       &__icon {
         display: flex;
         flex-shrink: 0;
         align-items: center;
-        height: auto;
         justify-content: center;
+
+        height: auto;
         padding: 0;
       }
       &__title {
         cursor: text;
       }
     }
+
     &__content {
       padding-bottom: var(--spacing-small);
+
       &__subtitle {
         cursor: text;
+
         font-size: var(--font-size-x-small);
         font-weight: var(--font-weight-basis);
         color: var(--color-black-55);
diff --git a/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss b/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss
index ac64f9675eb..afb52a13840 100644
--- a/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss
@@ -6,7 +6,15 @@
 @import '../../../../style/core/utilities.scss';
 @import '../../../button/style/themes/button-mixins.scss';
 
-:root {
+@mixin centerBorder(
+  $width: var(--timeline-icon-width--medium),
+  $spacing: var(--timeline-border-spacing--icon-adjusted)
+) {
+  margin-left: calc(#{$width} / 2);
+  padding-left: calc(#{$width} / 2 + #{$spacing});
+}
+
+.dnb-timeline {
   --timeline-icon-height--small: var(--button-height--small);
   --timeline-icon-width--small: var(--button-width--small);
   --timeline-icon-border-radius--small: calc(
@@ -27,17 +35,7 @@
   --timeline-border-spacing--icon-adjusted: calc(
     var(--timeline-icon-width-diff) + var(--timeline-border-spacing)
   );
-}
 
-@mixin centerBorder(
-  $width: var(--timeline-icon-width--medium),
-  $spacing: var(--timeline-border-spacing--icon-adjusted)
-) {
-  margin-left: calc(#{$width} / 2);
-  padding-left: calc(#{$width} / 2 + #{$spacing});
-}
-
-.dnb-timeline {
   &__item {
     margin-left: var(--timeline-icon-width-diff);
     &__label {