diff --git a/web/components/src/Quote/Author.tsx b/web/components/src/Quote/Author.tsx
deleted file mode 100644
index fd6cbff87..000000000
--- a/web/components/src/Quote/Author.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { forwardRef, HTMLAttributes } from 'react'
-import styled from 'styled-components'
-import { Typography } from '@equinor/eds-core-react'
-
-type AuthorProps = {
-  title?: string | null
-} & HTMLAttributes<HTMLDivElement>
-
-const Row = styled.figcaption`
-  text-align: left;
-  grid-area: author;
-  align-self: end;
-
-  @media (min-width: 800px) {
-    text-align: right;
-    align-self: start;
-  }
-`
-
-const AuthorWrapper = styled(Typography)`
-  text-align: left;
-  display: inline-flex;
-  flex-direction: column;
-  margin-right: auto;
-
-  color: var(--color-on-background);
-
-  @media (min-width: 800px) {
-    margin-left: auto;
-  }
-`
-
-const TextWrapper = styled.span`
-  color: var(--color-on-background);
-`
-
-export const Author = forwardRef<HTMLDivElement, AuthorProps>(function Author(
-  { children, title = null, ...rest },
-  ref,
-) {
-  return (
-    <Row ref={ref} {...rest}>
-      {title ? (
-        <AuthorWrapper forwardedAs="div">
-          <strong>{children}</strong>
-          {title}
-        </AuthorWrapper>
-      ) : (
-        <TextWrapper>{children}</TextWrapper>
-      )}
-    </Row>
-  )
-})
diff --git a/web/components/src/Quote/BlockQuote.tsx b/web/components/src/Quote/BlockQuote.tsx
deleted file mode 100644
index 9f872f802..000000000
--- a/web/components/src/Quote/BlockQuote.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { forwardRef } from 'react'
-import styled from 'styled-components'
-
-const Container = styled.div`
-  display: flex;
-  align-items: row;
-`
-
-const Quote = styled.blockquote`
-  background: none;
-  margin: 0;
-  color: var(--color-on-background);
-`
-
-const Author = styled.figcaption`
-  text-align: right;
-  margin-top: var(--space-medium);
-  font-style: italic;
-`
-
-export type BlockQuoteProps = {
-  quote: string
-  author: string
-  image?: string | null // url
-}
-
-export const BlockQuote = forwardRef<HTMLDivElement, BlockQuoteProps>(function BlockQuote(
-  { quote, author, image = null },
-  ref,
-) {
-  return (
-    <Container>
-      <figure ref={ref}>
-        <Quote>{quote}</Quote>
-        <Author>{author}</Author>
-      </figure>
-      {image ? (
-        <>
-          {/*  eslint-disable-next-line @next/next/no-img-element */}
-          <img src={image} alt="" />
-        </>
-      ) : null}
-    </Container>
-  )
-})
diff --git a/web/components/src/Quote/Media.tsx b/web/components/src/Quote/Media.tsx
deleted file mode 100644
index d728631ab..000000000
--- a/web/components/src/Quote/Media.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { forwardRef, HTMLAttributes } from 'react'
-import styled from 'styled-components'
-
-type MediaProps = HTMLAttributes<HTMLDivElement>
-
-const Img = styled.div`
-  width: 100%;
-  align-self: center;
-  grid-area: media;
-
-  img {
-    border-radius: 50%;
-  }
-`
-
-export const Media = forwardRef<HTMLDivElement, MediaProps>(function Media({ children, ...rest }, ref) {
-  return (
-    <Img ref={ref} {...rest}>
-      {children}
-    </Img>
-  )
-})
diff --git a/web/components/src/Quote/PullQuote.tsx b/web/components/src/Quote/PullQuote.tsx
deleted file mode 100644
index 3ec192a5a..000000000
--- a/web/components/src/Quote/PullQuote.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { forwardRef, HTMLAttributes, isValidElement, Children } from 'react'
-import { Media } from './Media'
-import styled from 'styled-components'
-
-type ImagePosition = 'left' | 'right'
-
-export type PullQuoteProps = {
-  imagePosition?: ImagePosition
-} & HTMLAttributes<HTMLDivElement>
-
-type ContainerProps = {
-  $hasImage: boolean
-  imagePosition: ImagePosition
-}
-
-const Container = styled.figure<ContainerProps>`
-  display: grid;
-  row-gap: var(--space-medium);
-  margin: 0;
-  position: relative;
-  grid-template-rows: min-content min-content;
-  grid-template-columns: calc(5 * var(--space-medium)) var(--space-medium) 1fr; // TODO: Inconsistent spacing
-  grid-template-areas: ${({ $hasImage }) =>
-    $hasImage
-      ? `
-      'media spacing author'
-      'quote quote quote'
-    `
-      : `
-      'quote quote quote'
-      'author author author'
-    `};
-
-  @media (min-width: 800px) {
-    grid-template-columns: ${({ imagePosition, $hasImage }) =>
-      $hasImage && imagePosition === 'left'
-        ? `calc(11 * var(--space-medium)) var(--space-medium) 1fr`
-        : $hasImage
-        ? `1fr var(--space-medium) calc(11 * var(--space-medium))`
-        : `1fr var(--space-4xLarge) calc(5 * var(--space-medium))`};
-    grid-template-areas: ${({ imagePosition, $hasImage }) =>
-      $hasImage && imagePosition === 'left'
-        ? `
-        'media spacing quote'
-        'media spacing author'
-        `
-        : $hasImage
-        ? `
-        'quote spacing media'
-        'author spacing media'
-        `
-        : `
-          'quote quote quote'
-          'author author author'
-        `};
-  }
-`
-
-export const PullQuote = forwardRef<HTMLDivElement, PullQuoteProps>(function PullQuote(
-  { imagePosition = 'right', children },
-  ref,
-) {
-  const hasImage = Children.toArray(children).some((child) => isValidElement(child) && child.type === Media)
-  return (
-    <Container imagePosition={imagePosition} $hasImage={hasImage} ref={ref}>
-      {children}
-    </Container>
-  )
-})
diff --git a/web/components/src/Quote/Quote.tsx b/web/components/src/Quote/Quote.tsx
deleted file mode 100644
index 3e330007b..000000000
--- a/web/components/src/Quote/Quote.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { forwardRef, HTMLAttributes } from 'react'
-import styled from 'styled-components'
-import { Text as BaseText } from '../Text'
-
-type QuoteProps = HTMLAttributes<HTMLParagraphElement>
-
-type TextProps = {
-  weight: string
-  fontSize: string
-}
-
-const Text = styled(BaseText)`
-  align-self: end;
-  margin: 0;
-  font-style: italic;
-  color: var(--color-on-background);
-  font-weight: var(${({ weight }: TextProps) => weight}, --fontWeight-regular);
-  font-size: var(${({ fontSize }: TextProps) => fontSize}, --typeScale-1);
-`
-
-const Container = styled.div`
-  grid-area: quote;
-`
-
-const textBoldLimit = 160
-const textSizeLimit = 50
-
-export const Quote = forwardRef<HTMLDivElement, QuoteProps>(function Quote({ children, ...rest }, ref) {
-  if (!children) return null
-
-  const quoteText = children.toString().trim()
-
-  const weight = quoteText.length < textBoldLimit ? '--fontWeight-medium' : '--fontWeight-regular'
-  const size = quoteText.length < textSizeLimit ? '--typeScale-5' : '--typeScale-2'
-  const iconSize = quoteText.length < textSizeLimit ? '48px' : '36px'
-  return (
-    <Container>
-      <svg
-        fill={'var(--quote-icon-color)'}
-        width={iconSize}
-        height={iconSize}
-        viewBox="0 0 48 48"
-        aria-hidden={true}
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <title>Quote symbol</title>
-        <path d="M24.3178 27.4196C24.3178 20.9682 29.485 14.2193 37.5942 12.7059L40.9409 15.5294C38.0002 16.5773 33.3736 20.0696 33.0856 22.5845C36.3927 23.0764 38.9218 25.7807 38.9218 29.046C38.9218 33.0391 35.4912 35.2941 32.0195 35.2941C28.0166 35.2941 24.3178 32.4016 24.3178 27.4196ZM7.05859 27.4196C7.05859 20.9682 12.2257 14.2193 20.3349 12.7059L23.3221 15.5294C20.3814 16.5773 16.1144 20.0696 15.8263 22.5845C19.1334 23.0764 21.6626 25.7807 21.6626 29.046C21.6626 33.0391 18.232 35.2941 14.7602 35.2941C10.7574 35.2941 7.05859 32.4016 7.05859 27.4196Z" />
-      </svg>
-      <Text fontSize={size} weight={weight} ref={ref} {...rest}>
-        {quoteText}
-      </Text>
-    </Container>
-  )
-})
diff --git a/web/components/src/Quote/index.ts b/web/components/src/Quote/index.ts
deleted file mode 100644
index a40eb4293..000000000
--- a/web/components/src/Quote/index.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { PullQuote as PullQuoteWrapper, PullQuoteProps } from './PullQuote'
-import { Media } from './Media'
-import { Author } from './Author'
-import { Quote } from './Quote'
-
-type PullQuoteCompoundProps = typeof PullQuoteWrapper & {
-  Media: typeof Media
-  Author: typeof Author
-  Quote: typeof Quote
-}
-
-const PullQuote = PullQuoteWrapper as PullQuoteCompoundProps
-
-PullQuote.Media = Media
-PullQuote.Author = Author
-PullQuote.Quote = Quote
-
-export { PullQuote }
-export type { PullQuoteProps }
-
-export * from './BlockQuote'
diff --git a/web/components/src/index.ts b/web/components/src/index.ts
index 460e6754f..4054c57f2 100644
--- a/web/components/src/index.ts
+++ b/web/components/src/index.ts
@@ -1,7 +1,6 @@
 export * from './Button'
 export * from './Card'
 export * from './Topbar'
-export * from './Quote'
 export * from './Fact'
 export * from './Text'
 export * from './FormattedDateTime'
diff --git a/web/icons/QuoteSymbol.tsx b/web/icons/QuoteSymbol.tsx
new file mode 100644
index 000000000..7f6b5de6e
--- /dev/null
+++ b/web/icons/QuoteSymbol.tsx
@@ -0,0 +1,16 @@
+const QuoteSymbol = ({ iconSize }: { iconSize?: string }) => {
+  return (
+    <svg
+      fill="var(--quote-icon-color)"
+      className={`${iconSize}`}
+      viewBox="0 0 48 48"
+      aria-hidden={true}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Quote symbol</title>
+      <path d="M24.3178 27.4196C24.3178 20.9682 29.485 14.2193 37.5942 12.7059L40.9409 15.5294C38.0002 16.5773 33.3736 20.0696 33.0856 22.5845C36.3927 23.0764 38.9218 25.7807 38.9218 29.046C38.9218 33.0391 35.4912 35.2941 32.0195 35.2941C28.0166 35.2941 24.3178 32.4016 24.3178 27.4196ZM7.05859 27.4196C7.05859 20.9682 12.2257 14.2193 20.3349 12.7059L23.3221 15.5294C20.3814 16.5773 16.1144 20.0696 15.8263 22.5845C19.1334 23.0764 21.6626 25.7807 21.6626 29.046C21.6626 33.0391 18.232 35.2941 14.7602 35.2941C10.7574 35.2941 7.05859 32.4016 7.05859 27.4196Z" />
+    </svg>
+  )
+}
+
+export default QuoteSymbol
diff --git a/web/icons/index.ts b/web/icons/index.ts
index 2c2b71206..f4ad66bd9 100644
--- a/web/icons/index.ts
+++ b/web/icons/index.ts
@@ -6,3 +6,4 @@ export { default as Youtube } from './Youtube'
 export { default as ArrowRight } from './ArrowRight'
 export { default as Play } from './Play'
 export { default as Pause } from './Pause'
+export { default as QuoteSymbol } from './QuoteSymbol'
diff --git a/web/pageComponents/shared/Quote.tsx b/web/pageComponents/shared/Quote.tsx
index 81f2abe8c..257f99929 100644
--- a/web/pageComponents/shared/Quote.tsx
+++ b/web/pageComponents/shared/Quote.tsx
@@ -1,24 +1,74 @@
-import { PullQuote } from '@components'
-import type { QuoteData } from '../../types/index'
 import Image, { Ratios } from './SanityImage'
+import type { ImageWithAlt, DesignOptions } from '../../types/index'
+import { QuoteSymbol } from '../../icons'
 
-const Quote = ({ data: { quote, authorTitle, author, image, designOptions } }: { data: QuoteData }) => (
-  <PullQuote imagePosition={designOptions?.imagePosition || 'left'}>
-    <PullQuote.Quote>{quote}</PullQuote.Quote>
-
-    {author && <PullQuote.Author title={authorTitle}>{author}</PullQuote.Author>}
-
-    {image?.asset && (
-      <PullQuote.Media>
-        <Image
-          maxWidth={242}
-          aspectRatio={Ratios.ONE_TO_ONE}
-          image={image}
-          sizes="(min-width: 2280px) 242px, (min-width: 800px) calc(3.29vw + 168px), calc(1.67vw + 75px)"
-        />
-      </PullQuote.Media>
-    )}
-  </PullQuote>
-)
+const textBoldLimit = 160
+const textSizeLimit = 50
+
+export type ImagePosition = 'left' | 'right'
+
+type QuoteData = {
+  type: string
+  id: string
+  author: string
+  authorTitle?: string
+  quote: string
+  image?: ImageWithAlt
+  designOptions: DesignOptions & { imagePosition?: ImagePosition }
+}
+
+const Quote = ({ data: { quote, authorTitle, author, image, designOptions } }: { data: QuoteData }) => {
+  if (!quote) return null
+  const imagePosition = designOptions?.imagePosition || 'right'
+  const isImageLeft = imagePosition === 'left'
+
+  const weight = quote.length < textBoldLimit ? 'font-semibold' : 'font-normal'
+  const size = quote.length < textSizeLimit ? 'text-2xl' : 'text-lg'
+  const iconSize = quote.length < textSizeLimit ? 'w-12 h-12' : 'w-9 h-9'
+
+  return (
+    <figure
+      className={`grid items-center gap-4 sm:gap-x-6 text-gray-900 ${
+        isImageLeft ? 'grid-cols-[auto_1fr]' : 'grid-cols-[1fr_auto]'
+      }`}
+    >
+      {image?.asset && isImageLeft && (
+        <div className="row-span-2 flex justify-center">
+          <Image
+            maxWidth={242}
+            aspectRatio={Ratios.ONE_TO_ONE}
+            image={image}
+            sizes="(min-width: 2280px) 242px, (min-width: 800px) calc(3.29vw + 168px), calc(1.67vw + 75px)"
+            className="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover"
+          />
+        </div>
+      )}
+
+      <div className="flex flex-col space-y-3">
+        <QuoteSymbol iconSize={iconSize} />
+        <blockquote className={`italic ${weight} ${size}`}>{quote}</blockquote>
+      </div>
+
+      {image?.asset && !isImageLeft && (
+        <div className="row-span-2 flex justify-center">
+          <Image
+            maxWidth={242}
+            aspectRatio={Ratios.ONE_TO_ONE}
+            image={image}
+            sizes="(min-width: 2280px) 242px, (min-width: 800px) calc(3.29vw + 168px), calc(1.67vw + 75px)"
+            className="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover"
+          />
+        </div>
+      )}
+
+      {author && (
+        <figcaption className="text-sm font-semibold text-gray-700 text-right self-start sm:self-end">
+          <strong>{author}</strong>
+          {authorTitle && <span className="block text-gray-500">{authorTitle}</span>}
+        </figcaption>
+      )}
+    </figure>
+  )
+}
 
 export default Quote