diff --git a/components/SuccessStory/SuccessStory.js b/components/SuccessStory/SuccessStory.js
index 2e91722ea..440576559 100644
--- a/components/SuccessStory/SuccessStory.js
+++ b/components/SuccessStory/SuccessStory.js
@@ -1,6 +1,5 @@
 import { string } from 'prop-types';
 import Image from 'next/image';
-import styles from './SuccessStory.module.css';
 
 SuccessStory.propTypes = {
   imageSource: string.isRequired,
@@ -10,8 +9,8 @@ SuccessStory.propTypes = {
 
 function SuccessStory({ imageSource, quote, title }) {
   return (
-    <div className={styles.SuccessStory}>
-      <div className={styles.imageWrapper}>
+    <div className="box-border flex flex-col flex-nowrap items-center my-12 mx-4 pt-14 relative max-w-[320px] h-[940px] md:h-[748px] sm:h-auto">
+      <div className="absolute top-0 h-48 shadow-[1px_2px_5p_3px_rgba(0, 0, 0, 0.35)]">
         <Image
           alt={`${title} headshot`}
           src={imageSource}
@@ -21,8 +20,8 @@ function SuccessStory({ imageSource, quote, title }) {
         />
       </div>
 
-      <div className={styles.quote}>
-        <h6 className={styles.title}>{title}</h6>
+      <div className="flex flex-1 flex-col flex-nowrap items-center p-8 pt-40 border-2 border-solid border-primary [&>blockquote]:my-4 [&>blockquote]:mx-0 [&>blockquote]:text-base">
+        <h6 className="text-center text-base">{title}</h6>
         <blockquote>{`"${quote}"`}</blockquote>
       </div>
     </div>
diff --git a/components/SuccessStory/SuccessStory.module.css b/components/SuccessStory/SuccessStory.module.css
deleted file mode 100644
index 126769bec..000000000
--- a/components/SuccessStory/SuccessStory.module.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.SuccessStory {
-  box-sizing: border-box;
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  margin: 3rem 1rem;
-  padding-top: 60px;
-  position: relative;
-  max-width: 320px;
-  height: 940px;
-}
-
-.imageWrapper {
-  position: absolute;
-  top: 0;
-  height: 200px;
-  box-shadow: 1px 2px 5px 3px rgba(0, 0, 0, 0.35);
-}
-
-.quote {
-  display: flex;
-  flex: 1;
-  flex-flow: column nowrap;
-  align-items: center;
-  padding: 2rem;
-  padding-top: 160px;
-  border: 3px solid var(--primary);
-}
-
-.quote > blockquote {
-  margin: 1rem 0;
-  font-style: italic;
-  font-size: 1rem;
-}
-
-.title {
-  text-align: center;
-  font-size: 1rem;
-}
-
-@media screen and (--medium-viewport) {
-  .SuccessStory {
-    height: 748px;
-  }
-}
-
-@media screen and (--small-viewport) {
-  .SuccessStory {
-    height: auto;
-  }
-}
diff --git a/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap b/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap
index ecd925c4e..7bd8c91a0 100644
--- a/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap
+++ b/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`SuccessStory should render with required props 1`] = `
 <div
-  className="SuccessStory"
+  className="box-border flex flex-col flex-nowrap items-center my-12 mx-4 pt-14 relative max-w-[320px] h-[940px] md:h-[748px] sm:h-auto"
 >
   <div
-    className="imageWrapper"
+    className="absolute top-0 h-48 shadow-[1px_2px_5p_3px_rgba(0, 0, 0, 0.35)]"
   >
     <MockedNextImage
       alt="Great testing culture headshot"
@@ -16,10 +16,10 @@ exports[`SuccessStory should render with required props 1`] = `
     />
   </div>
   <div
-    className="quote"
+    className="flex flex-1 flex-col flex-nowrap items-center p-8 pt-40 border-2 border-solid border-primary [&>blockquote]:my-4 [&>blockquote]:mx-0 [&>blockquote]:text-base"
   >
     <h6
-      className="title"
+      className="text-center text-base"
     >
       Great testing culture
     </h6>