diff --git a/web/components/src/Breadcrumbs/BreadcrumbList.tsx b/web/components/src/Breadcrumbs/BreadcrumbList.tsx
deleted file mode 100644
index 725a34148..000000000
--- a/web/components/src/Breadcrumbs/BreadcrumbList.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { forwardRef, HTMLAttributes } from 'react'
-import { List as EdsList } from '@equinor/eds-core-react'
-import styled from 'styled-components'
-import { twMerge } from 'tailwind-merge'
-
-const List = styled(EdsList)`
-  list-style: none;
-  font-size: var(--typeScale-05);
-  line-height: var(--lineHeight-3);
-  font-weight: var(--fontWeight-medium);
-`
-
-export type BreadcrumbsProps = HTMLAttributes<HTMLOListElement>
-
-export const BreadcrumbsList = forwardRef<HTMLOListElement, BreadcrumbsProps>(function Breadcrumbs(
-  { children, className = '', ...rest },
-  forwardedRef,
-) {
-  return (
-    <List ref={forwardedRef} variant="numbered" {...rest} className={twMerge('p-0', className)}>
-      {children}
-    </List>
-  )
-})
diff --git a/web/components/src/Breadcrumbs/BreadcrumbListItem.tsx b/web/components/src/Breadcrumbs/BreadcrumbListItem.tsx
deleted file mode 100644
index 4d45888f7..000000000
--- a/web/components/src/Breadcrumbs/BreadcrumbListItem.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { forwardRef, HTMLAttributes } from 'react'
-import { List as EdsList } from '@equinor/eds-core-react'
-import styled from 'styled-components'
-
-const { Item: EdsItem } = EdsList
-
-export type BreadcrumbsListItemProps = HTMLAttributes<HTMLLIElement>
-
-const StyledListItem = styled(EdsItem)`
-  display: inline-block;
-  padding-right: var(--space-small);
-  font-weight: var(--fontWeight-bold);
-  color: var(--color-on-background);
-
-  &:after {
-    content: '>';
-    padding-left: var(--space-small);
-  }
-
-  &:last-child {
-    font-weight: var(--fontWeight-medium);
-    color: var(--breadcrumbs-inactive-color);
-
-    &:after {
-      content: '';
-    }
-  }
-`
-
-export const BreadcrumbsListItem = forwardRef<HTMLLIElement, BreadcrumbsListItemProps>(function Breadcrumbs(
-  { children, ...rest },
-  forwardedRef,
-) {
-  return (
-    <StyledListItem ref={forwardedRef} {...rest} className="first-letter:capitalize">
-      {children}
-    </StyledListItem>
-  )
-})
diff --git a/web/components/src/index.ts b/web/components/src/index.ts
index 26e7c653f..8ad6b9cda 100644
--- a/web/components/src/index.ts
+++ b/web/components/src/index.ts
@@ -16,4 +16,3 @@ export * from './Heading'
 export * from './Table'
 export * from './Tabs'
 export * from './Form'
-export * from './Breadcrumbs'
diff --git a/web/core/Breadcrumbs/BreadcrumbList.tsx b/web/core/Breadcrumbs/BreadcrumbList.tsx
new file mode 100644
index 000000000..b3d5a67fe
--- /dev/null
+++ b/web/core/Breadcrumbs/BreadcrumbList.tsx
@@ -0,0 +1,15 @@
+import { forwardRef, HTMLAttributes } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+export type BreadcrumbsProps = HTMLAttributes<HTMLOListElement>
+
+export const BreadcrumbsList = forwardRef<HTMLOListElement, BreadcrumbsProps>(function Breadcrumbs(
+  { children, className = '' },
+  ref
+) {
+  return (
+    <ol ref={ref} className={twMerge('p-0 list-none text-sm leading-8', className)}>
+      {children}
+    </ol>
+  )
+})
\ No newline at end of file
diff --git a/web/core/Breadcrumbs/BreadcrumbListItem.tsx b/web/core/Breadcrumbs/BreadcrumbListItem.tsx
new file mode 100644
index 000000000..c75248d00
--- /dev/null
+++ b/web/core/Breadcrumbs/BreadcrumbListItem.tsx
@@ -0,0 +1,23 @@
+import { forwardRef, HTMLAttributes } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+export type BreadcrumbsListItemProps = HTMLAttributes<HTMLLIElement> & {
+  active?: boolean
+}
+
+export const BreadcrumbsListItem = forwardRef<HTMLLIElement, BreadcrumbsListItemProps>(
+  ({ children, active, ...rest }, ref) => {
+    return (
+      <li
+        ref={ref}
+        {...rest}
+        className={twMerge(
+          'inline-block pr-2 text-grey-90 after:content-[">"] after:pl-2 last:after:content-[""]',
+          active ? 'font-medium text-slate-blue-90' : 'font-bold'
+        )}
+      >
+        {children}
+      </li>
+    )
+  }
+)
\ No newline at end of file
diff --git a/web/core/Breadcrumbs/Breadcrumbs.tsx b/web/core/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 000000000..2aa6f8b15
--- /dev/null
+++ b/web/core/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,79 @@
+import { BreadcrumbsList } from './index'
+import { BackgroundContainer, BackgroundContainerProps } from '@components'
+import { BreadcrumbJsonLd } from 'next-seo'
+import { useRouter } from 'next/router'
+import { twMerge } from 'tailwind-merge'
+import NextLink from 'next/link'
+import type { Breadcrumb } from '../../types'
+
+type BreadcrumbsProps = {
+  slug: string
+  useCustomBreadcrumbs: boolean
+  defaultBreadcrumbs: Breadcrumb[]
+  customBreadcrumbs: Breadcrumb[]
+  className?: string
+} & BackgroundContainerProps
+
+const buildJsonLdElements = (crumbs: Breadcrumb[], router: ReturnType<typeof useRouter>) => {
+  const { pathname, locale } = router
+
+  return crumbs.map((item, index) => ({
+    position: index + 1,
+    name: item.label,
+    item: `${pathname}/${item.slug}`,
+  }))
+}
+
+const capitalize = (text: string): string => text[0].toUpperCase() + text.slice(1)
+
+const parseBreadcrumbs = (crumbs: Breadcrumb[]) => {
+  return crumbs.map((item) => ({
+    ...item,
+    label: capitalize(item.label),
+  }))
+}
+
+export const Breadcrumbs = ({
+  slug,
+  useCustomBreadcrumbs,
+  defaultBreadcrumbs,
+  customBreadcrumbs,
+  background,
+  className = '',
+}: BreadcrumbsProps) => {
+  const router = useRouter()
+  const crumbs =
+    useCustomBreadcrumbs && customBreadcrumbs.length >= 3
+      ? parseBreadcrumbs(customBreadcrumbs)
+      : parseBreadcrumbs(defaultBreadcrumbs)
+
+  if (crumbs.length < 2) return null
+
+  return (
+    <BackgroundContainer background={background} renderFragmentWhenPossible className="mx-auto max-w-viewport">
+      <nav aria-label="Breadcrumbs">
+        <BreadcrumbsList className={twMerge(`py-10 px-layout-lg`, className)}>
+          {crumbs.map((item) => {
+            const isActive = item.slug === slug
+            const label = item.label
+            return (
+              <BreadcrumbsList.BreadcrumbsListItem key={item.slug} active={isActive}>
+                {isActive ? (
+                  <span aria-current="page">{label}</span>
+                ) : (
+                  <NextLink
+                    href={item.slug}
+                    className="hover:underline no-underline focus:outline-none focus-visible:envis-outline dark:focus-visible:envis-outline-invert"
+                  >
+                    {label}
+                  </NextLink>
+                )}
+              </BreadcrumbsList.BreadcrumbsListItem>
+            )
+          })}
+        </BreadcrumbsList>
+      </nav>
+      <BreadcrumbJsonLd itemListElements={buildJsonLdElements(crumbs, router)} />
+    </BackgroundContainer>
+  )
+}
\ No newline at end of file
diff --git a/web/components/src/Breadcrumbs/index.ts b/web/core/Breadcrumbs/index.ts
similarity index 80%
rename from web/components/src/Breadcrumbs/index.ts
rename to web/core/Breadcrumbs/index.ts
index 53d7ddc87..5543d0000 100644
--- a/web/components/src/Breadcrumbs/index.ts
+++ b/web/core/Breadcrumbs/index.ts
@@ -1,5 +1,6 @@
 import { BreadcrumbsList as Wrapper } from './BreadcrumbList'
 import { BreadcrumbsListItem } from './BreadcrumbListItem'
+import { Breadcrumbs } from './Breadcrumbs'
 
 type BreadcrumbsListCompoundProps = typeof Wrapper & {
   BreadcrumbsListItem: typeof BreadcrumbsListItem
@@ -9,4 +10,4 @@ const BreadcrumbsList = Wrapper as BreadcrumbsListCompoundProps
 
 BreadcrumbsList.BreadcrumbsListItem = BreadcrumbsListItem
 
-export { BreadcrumbsList }
+export { Breadcrumbs, BreadcrumbsList }
diff --git a/web/pageComponents/pageTemplates/TopicPage.tsx b/web/pageComponents/pageTemplates/TopicPage.tsx
index 8d7fe718b..cb7906334 100644
--- a/web/pageComponents/pageTemplates/TopicPage.tsx
+++ b/web/pageComponents/pageTemplates/TopicPage.tsx
@@ -5,7 +5,7 @@ import Seo from '../shared/Seo'
 import { SharedBanner } from './shared/SharedBanner'
 import { PageContent } from './shared/SharedPageContent'
 import SharedTitle from './shared/SharedTitle'
-import { Breadcrumbs } from '../topicPages/Breadcrumbs'
+import { Breadcrumbs } from '@core/Breadcrumbs'
 
 type TopicPageProps = {
   data: TopicPageSchema
diff --git a/web/pageComponents/topicPages/Breadcrumbs.tsx b/web/pageComponents/topicPages/Breadcrumbs.tsx
deleted file mode 100644
index 150adad89..000000000
--- a/web/pageComponents/topicPages/Breadcrumbs.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { default as NextLink } from 'next/link'
-import { BackgroundContainer, BackgroundContainerProps, BreadcrumbsList } from '@components'
-import { BreadcrumbJsonLd } from 'next-seo'
-import { useRouter } from 'next/router'
-import type { NextRouter } from 'next/router'
-import { getFullUrl } from '../../common/helpers/getFullUrl'
-import { Breadcrumb } from '../../types'
-import { twMerge } from 'tailwind-merge'
-
-const { BreadcrumbsListItem } = BreadcrumbsList
-
-type BreadcrumbsProps = {
-  slug: string
-  useCustomBreadcrumbs: boolean
-  defaultBreadcrumbs: Breadcrumb[]
-  customBreadcrumbs: Breadcrumb[]
-  className?: string
-} & BackgroundContainerProps
-
-const buildJsonLdElements = (crumbs: Breadcrumb[], router: NextRouter) => {
-  const { pathname, locale } = router
-
-  return crumbs.map((item, index) => {
-    const fullUrl = getFullUrl(pathname, item.slug, locale)
-
-    return {
-      position: index + 1,
-      name: item.label,
-      item: fullUrl,
-    }
-  })
-}
-
-const parseSlug = (item: string): string => {
-  const parts = item?.split('/').at(-1) || item
-  return parts?.[0] + parts?.slice(1)
-}
-
-const capitalize = (string: string): string => string[0].toUpperCase() + string.slice(1)
-
-const parseBreadcrumbs = (crumbs: Breadcrumb[]) => {
-  return crumbs
-    .filter((item) => item.slug && item.label)
-    .map((item) => ({
-      ...item,
-      label: capitalize(item.label),
-    }))
-}
-
-export const Breadcrumbs = ({
-  slug,
-  useCustomBreadcrumbs,
-  defaultBreadcrumbs,
-  customBreadcrumbs,
-  background,
-  className = '',
-}: BreadcrumbsProps) => {
-  const router = useRouter()
-
-  const crumbs =
-    useCustomBreadcrumbs && customBreadcrumbs && customBreadcrumbs.length >= 3
-      ? parseBreadcrumbs(customBreadcrumbs)
-      : parseBreadcrumbs(defaultBreadcrumbs)
-
-  if (crumbs.length < 2) return null
-
-  return (
-    <BackgroundContainer background={background} renderFragmentWhenPossible className="mx-auto max-w-viewport">
-      <BreadcrumbsList className={twMerge(`py-10 px-layout-lg`, className)}>
-        {crumbs.map((item: Breadcrumb) => {
-          const label = item.label ?? parseSlug(item.slug)?.replaceAll('-', ' ')
-          const shouldLink = item.slug !== slug
-
-          return (
-            <BreadcrumbsListItem key={item.slug}>
-              {shouldLink ? (
-                <NextLink
-                  href={item.slug}
-                  prefetch={false}
-                  className="hover:underline no-underline focus:outline-none focus-visible:envis-outline dark:focus-visible:envis-outline-invert underline-offset-4"
-                >
-                  {label}
-                </NextLink>
-              ) : (
-                <>{label}</>
-              )}
-            </BreadcrumbsListItem>
-          )
-        })}
-      </BreadcrumbsList>
-      <BreadcrumbJsonLd itemListElements={buildJsonLdElements(crumbs, router)} />
-    </BackgroundContainer>
-  )
-}