diff --git a/components/fragment_renderer/FragmentRender.js b/components/fragment_renderer/FragmentRender.js
index 769593608c..7d0d69b5d0 100644
--- a/components/fragment_renderer/FragmentRender.js
+++ b/components/fragment_renderer/FragmentRender.js
@@ -5,6 +5,8 @@ import Button from "./fragment_components/Button";
 import ArticleCTA from "./fragment_components/ArticleCTA";
 import QuoteVerticalLineContent from "./fragment_components/QuoteVerticalLineContent";
 import ImageWithCollapse from "./fragment_components/ImageWithCollapse";
+import TextRender from "../text_node_renderer/TextRender";
+import { generateCollapseElements } from "../../lib/utils/generateCollapseElements";
 
 const FRAGMENTS = {
   "SCLabs-Comp-Content-Image-v1": TextWithImage,
@@ -15,16 +17,138 @@ const FRAGMENTS = {
   "SCLabs-Image-v1": ImageWithCollapse,
 };
 
+const mapFragmentsToProps = (fragmentData, fragmentName, locale) => {
+  switch (fragmentName) {
+    case "SCLabs-Feature-v1":
+      return {
+        heading:
+          locale === "en" ? fragmentData.scTitleEn : fragmentData.scTitleFr,
+        body: (
+          <TextRender
+            data={
+              locale === "en"
+                ? fragmentData.scContentEn.json
+                : fragmentData.scContentFr.json
+            }
+          />
+        ),
+        ButtonProps: {
+          id: fragmentData.scLabsButton[0].scId,
+          text:
+            locale === "en"
+              ? fragmentData.scLabsButton[0].scTitleEn
+              : fragmentData.scLabsButton[0].scTitleFr,
+          href:
+            locale === "en"
+              ? fragmentData.scLabsButton[0].scDestinationURLEn
+              : fragmentData.scLabsButton[0].scDestinationURLFr,
+        },
+      };
+
+    case "SCLabs-Comp-Content-Image-v1":
+      return {
+        src:
+          locale === "en"
+            ? fragmentData.scLabImage.scImageEn._publishUrl
+            : fragmentData.scLabImage.scImageFr._publishUrl,
+        alt: fragmentData.scLabImage.scImageAltTextEn
+          ? locale === "en"
+            ? fragmentData.scLabImage.scImageAltTextEn
+            : fragmentData.scLabImage.scImageAltTextFr
+          : "",
+        width: fragmentData.scLabImage.scImageEn.width,
+        height: fragmentData.scLabImage.scImageEn.height,
+        data:
+          locale === "en"
+            ? fragmentData.scLabContent[0].scContentEn.json
+            : fragmentData.scLabContent[0].scContentFr.json,
+        layout: fragmentData.scLabLayout,
+      };
+
+    case "SCLabs-Comp-Content-v1":
+      return {
+        quoteText:
+          locale === "en"
+            ? fragmentData.scLabContent[0].scContentEn.json
+            : fragmentData.scLabContent[0].scContentFr.json,
+        explanationtext:
+          locale === "en"
+            ? fragmentData.scLabContent[1].scContentEn.json
+            : fragmentData.scLabContent[1].scContentFr.json,
+      };
+
+    case "SCLabs-Content-v1":
+      return {
+        data:
+          locale === "en"
+            ? fragmentData.scContentEn.json
+            : fragmentData.scContentFr.json,
+      };
+
+    case "SCLabs-Button-v1":
+      return {
+        id: fragmentData.scId,
+        buttonType: fragmentData.scButtonType[0],
+        href:
+          locale === "en"
+            ? fragmentData.scDestinationURLEn
+            : fragmentData.scDestinationURLFr,
+        text: locale === "en" ? fragmentData.scTitleEn : fragmentData.scTitleFr,
+      };
+
+    case "SCLabs-Image-v1":
+      return {
+        id: fragmentData.scId,
+        src:
+          locale === "en"
+            ? fragmentData.scImageEn._publishUrl
+            : fragmentData.scImageFr._publishUrl,
+        alt:
+          locale === "en"
+            ? fragmentData.scImageAltTextEn
+            : fragmentData.scImageAltTextFr,
+        width: fragmentData.scImageEn.width,
+        height: fragmentData.scImageEn.height,
+        content:
+          locale === "en"
+            ? fragmentData.scImageCaptionEn.json[0].content[0].value
+            : fragmentData.scImageCaptionFr.json[0].content[0].value,
+        title:
+          locale === "en"
+            ? fragmentData.scLongDescHeadingEn
+            : fragmentData.scLongDescHeadingFr,
+        longDesc:
+          locale === "en"
+            ? fragmentData.scLongDescEn
+            : fragmentData.scLongDescFr,
+        children: generateCollapseElements(
+          locale === "en"
+            ? fragmentData.scLongDescEn.json
+            : fragmentData.scLongDescFr.json
+        ),
+      };
+    default:
+      break;
+  }
+};
+
 export default function FragmentRender(props) {
   // Create and return array of elements corresponding to
   // fragments
-  const pageFragments = props.fragments.map((fragment) => {
-    const Fragment = FRAGMENTS[fragment?._model.title];
+  const pageFragments = props.fragments.map((fragmentData) => {
+    const Fragment = FRAGMENTS[fragmentData?._model.title];
     if (!Fragment) {
       return;
     }
     return (
-      <Fragment key={uuid()} fragmentData={fragment} locale={props.locale} />
+      <Fragment
+        key={uuid()}
+        {...mapFragmentsToProps(
+          fragmentData,
+          fragmentData?._model.title,
+          props.locale
+        )}
+      />
     );
   });
 
diff --git a/components/fragment_renderer/fragment_components/ArticleCTA.js b/components/fragment_renderer/fragment_components/ArticleCTA.js
index 27e9cdddf2..ec6a212000 100644
--- a/components/fragment_renderer/fragment_components/ArticleCTA.js
+++ b/components/fragment_renderer/fragment_components/ArticleCTA.js
@@ -1,37 +1,12 @@
 import { CTA } from "../../molecules/CTA";
-import TextRender from "../../text_node_renderer/TextRender";
 
-export default function ArticleCTA(props) {
+export default function ArticleCTA({ heading, body, ButtonProps, LinkProps }) {
   return (
     <CTA
-      heading={
-        props.locale === "en"
-          ? props.fragmentData.scTitleEn
-          : props.fragmentData.scTitleFr
-      }
-      body={
-        <TextRender
-          data={
-            props.locale === "en"
-              ? props.fragmentData.scContentEn.json
-              : props.fragmentData.scContentFr.json
-          }
-          excludeH1={true}
-        />
-      }
-      ButtonProps={{
-        id: props.fragmentData.scLabsButton[0].scId,
-        text:
-          props.locale === "en"
-            ? props.fragmentData.scLabsButton[0].scTitleEn
-            : props.fragmentData.scLabsButton[0].scTitleFr,
-        href:
-          props.locale === "en"
-            ? props.fragmentData.scLabsButton[0].scDestinationURLEn
-            : props.fragmentData.scLabsButton[0].scDestinationURLFr,
-        className:
-          "w-fit bg-[#26374A] mt-4 text-white visited:text-white hover:bg-[#1C578A] hover:no-underline hover:text-white active:bg-[#16446C]",
-      }}
+      heading={heading}
+      body={body}
+      ButtonProps={ButtonProps}
+      LinkProps={LinkProps}
       containerClass="layout-container my-4"
     />
   );
diff --git a/components/fragment_renderer/fragment_components/ArticleCTA.stories.js b/components/fragment_renderer/fragment_components/ArticleCTA.stories.js
new file mode 100644
index 0000000000..84e9d58516
--- /dev/null
+++ b/components/fragment_renderer/fragment_components/ArticleCTA.stories.js
@@ -0,0 +1,22 @@
+import * as React from "react";
+import ArticleCTA from "./ArticleCTA";
+
+export default {
+  title: "Components/Fragment_Renderer/ArticleCTA",
+  component: ArticleCTA,
+};
+
+const Template = (args) => <ArticleCTA {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  heading: "This is a heading",
+  body: "This is a body",
+  ButtonProps: {
+    text: "Action Button",
+  },
+  LinkProps: {
+    id: "privacy-policy",
+    text: "Review the Privacy Policy",
+  },
+};
diff --git a/components/fragment_renderer/fragment_components/BasicTextWithImage.js b/components/fragment_renderer/fragment_components/BasicTextWithImage.js
index 8543a8eee2..c4b366e367 100644
--- a/components/fragment_renderer/fragment_components/BasicTextWithImage.js
+++ b/components/fragment_renderer/fragment_components/BasicTextWithImage.js
@@ -1,41 +1,18 @@
 import Image from "../../../node_modules/next/image";
 import TextRender from "../../text_node_renderer/TextRender";
 
-export default function BasicTextWithImage(props) {
+export default function BasicTextWithImage({ src, alt, width, height, data }) {
   return (
     <div className="layout-container grid grid-cols-12 gap-x-6 my-12">
       <div className="hidden lg:grid col-start-8 col-span-5 row-start-1 row-span-2">
         <div className="flex justify-center">
           <div className="h-auto">
-            <Image
-              src={
-                props.locale === "en"
-                  ? props.fragmentData.scLabImage.scImageEn._publishUrl
-                  : props.fragmentData.scLabImage.scImageFr._publishUrl
-              }
-              // If there is no alt text, set it to an empty string to prevent warnings
-              alt={
-                props.fragmentData.scLabImage.scImageAltTextEn
-                  ? props.locale === "en"
-                    ? props.fragmentData.scLabImage.scImageAltTextEn
-                    : props.fragmentData.scLabImage.scImageAltTextFr
-                  : ""
-              }
-              width={props.fragmentData.scLabImage.scImageEn.width}
-              height={props.fragmentData.scLabImage.scImageEn.height}
-            />
+            <Image src={src} alt={alt} width={width} height={height} />
           </div>
         </div>
       </div>
       <div className="col-span-12 lg:col-span-7">
-        <TextRender
-          data={
-            props.locale === "en"
-              ? props.fragmentData.scLabContent[0].scContentEn.json
-              : props.fragmentData.scLabContent[0].scContentFr.json
-          }
-          excludeH1={true}
-        />
+        <TextRender data={data} excludeH1={true} />
       </div>
     </div>
   );
diff --git a/components/fragment_renderer/fragment_components/Button.js b/components/fragment_renderer/fragment_components/Button.js
index 5b77953911..0b325ba957 100644
--- a/components/fragment_renderer/fragment_components/Button.js
+++ b/components/fragment_renderer/fragment_components/Button.js
@@ -1,33 +1,22 @@
 import { ActionButton } from "../../atoms/ActionButton";
 
-export default function Button(props) {
+export default function Button({ id, buttonType, href, text }) {
   const style =
-    props.fragmentData.scButtonType === null
+    buttonType === null
       ? "primary"
-      : props.fragmentData.scButtonType[0] ===
-        "gc:custom/decd-endc/button-type/primary"
+      : buttonType === "gc:custom/decd-endc/button-type/primary"
       ? "primary"
-      : props.fragmentData.scButtonType[0] ===
-        "gc:custom/decd-endc/button-type/secondary"
+      : buttonType === "gc:custom/decd-endc/button-type/secondary"
       ? "secondary"
       : "primary";
-
   return (
     <div className="layout-container grid grid-cols-12 gap-x-6 my-12">
       <ActionButton
-        id={props.fragmentData.scId}
+        id={id}
         style={style}
         custom="col-span-12"
-        href={
-          props.locale === "en"
-            ? props.fragmentData.scDestinationURLEn
-            : props.fragmentData.scDestinationURLFr
-        }
-        text={
-          props.locale === "en"
-            ? props.fragmentData.scTitleEn
-            : props.fragmentData.scTitleFr
-        }
+        href={href}
+        text={text}
       />
     </div>
   );
diff --git a/components/fragment_renderer/fragment_components/ImageVerticalLineContent.js b/components/fragment_renderer/fragment_components/ImageVerticalLineContent.js
index 7a6ea8db66..77c71da3d7 100644
--- a/components/fragment_renderer/fragment_components/ImageVerticalLineContent.js
+++ b/components/fragment_renderer/fragment_components/ImageVerticalLineContent.js
@@ -1,34 +1,26 @@
 import Image from "../../../node_modules/next/image";
 import TextRender from "../../text_node_renderer/TextRender";
 
-export default function ImageVerticalLineContent(props) {
+export default function ImageVerticalLineContent({
+  src,
+  alt,
+  width,
+  height,
+  data,
+}) {
   return (
     <div className="layout-container grid grid-cols-12 gap-x-8 my-12">
       <div className="col-span-12 xl:col-span-3 ">
         <Image
           className="w-64"
-          alt={
-            props.locale === "en"
-              ? props.fragmentData.scLabImage.scImageAltTextEn
-              : props.fragmentData.scLabImage.scImageAltTextFr
-          }
-          src={
-            props.locale === "en"
-              ? props.fragmentData.scLabImage.scImageEn._publishUrl
-              : props.fragmentData.scLabImage.scImageFr._publishUrl
-          }
-          width={props.fragmentData.scLabImage.scImageEn.width}
-          height={props.fragmentData.scLabImage.scImageEn.height}
+          alt={alt}
+          src={src}
+          width={width}
+          height={height}
         />
       </div>
       <div className="col-span-12 lg:col-span-7 xl:col-span-4 h-fit p-5 border-l-4 border-multi-blue-blue60f">
-        <TextRender
-          data={
-            props.locale === "en"
-              ? props.fragmentData.scLabContent.scContentEn.json
-              : props.fragmentData.scLabContent.scContentFr.json
-          }
-        />
+        <TextRender data={data} />
       </div>
     </div>
   );
diff --git a/components/fragment_renderer/fragment_components/ImageWithCollapse.js b/components/fragment_renderer/fragment_components/ImageWithCollapse.js
index 3c41357bfc..0c228ec197 100644
--- a/components/fragment_renderer/fragment_components/ImageWithCollapse.js
+++ b/components/fragment_renderer/fragment_components/ImageWithCollapse.js
@@ -1,45 +1,33 @@
 import { Collapse } from "../../molecules/Collapse";
-import { generateCollapseElements } from "../../../lib/utils/generateCollapseElements";
 import Image from "../../../node_modules/next/image";
 
-export default function ImageWithCollapse(props) {
+export default function ImageWithCollapse({
+  id,
+  src,
+  alt,
+  width,
+  height,
+  content,
+  longDesc,
+  title,
+  children,
+}) {
   return (
     <div className="layout-container grid grid-cols-12 gap-x-6 my-12">
       <Image
-        id={props.scId}
-        src={
-          props.locale === "en"
-            ? props.fragmentData.scImageEn._publishUrl
-            : props.fragmentData.scImageFr._publishUrl
-        }
-        alt={
-          props.locale === "en"
-            ? props.fragmentData.scImageAltTextEn
-            : props.fragmentData.scImageAltTextFr
-        }
+        id={id}
+        src={src}
+        alt={alt}
         className="col-span-12 lg:col-span-10"
-        width={props.fragmentData.scImageEn.width}
-        height={props.fragmentData.scImageEn.height}
+        width={width}
+        height={height}
       />
       <p className="grid row-start-2 col-span-12 lg:col-span-10 justify-around mb-8">
-        {props.locale === "en"
-          ? props.fragmentData.scImageCaptionEn.json[0].content[0].value
-          : props.fragmentData.scImageCaptionFr.json[0].content[0].value}
+        {content}
       </p>
-      {props.fragmentData.scLongDescEn ? (
+      {longDesc ? (
         <div className="grid row-start-3 col-span-12 lg:col-span-10">
-          <Collapse
-            title={
-              props.locale === "en"
-                ? props.fragmentData.scLongDescHeadingEn
-                : props.fragmentData.scLongDescHeadingFr
-            }
-            children={generateCollapseElements(
-              props.locale === "en"
-                ? props.fragmentData.scLongDescEn.json
-                : props.fragmentData.scLongDescFr.json
-            )}
-          />
+          <Collapse title={title} children={children} />
         </div>
       ) : (
         ""
diff --git a/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.js b/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.js
index 9aa5b36e76..0ce061c500 100644
--- a/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.js
+++ b/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.js
@@ -1,31 +1,22 @@
 import TextRender from "../../text_node_renderer/TextRender";
 
-export default function QuoteVerticalLineContent(props) {
+export default function QuoteVerticalLineContent({
+  quoteText,
+  explanationtext,
+}) {
   return (
     <div className="layout-container grid grid-cols-12 gap-x-4 my-12">
       <div className="col-span-12 xl:col-span-3">
         <div className="speech-bubble">
           <div className="speech-bubble-top">
             <blockquote className="speech-bubble-quote">
-              <TextRender
-                data={
-                  props.locale === "en"
-                    ? props.fragmentData.scLabContent[0].scContentEn.json
-                    : props.fragmentData.scLabContent[0].scContentFr.json
-                }
-              />
+              <TextRender data={quoteText} />
             </blockquote>
           </div>
         </div>
       </div>
       <div className="col-span-12 lg:col-span-7 xl:col-span-4 xxl:-ml-14 h-fit p-5 border-l-4 border-multi-blue-blue60f">
-        <TextRender
-          data={
-            props.locale === "en"
-              ? props.fragmentData.scLabContent[1].scContentEn.json
-              : props.fragmentData.scLabContent[1].scContentFr.json
-          }
-        />
+        <TextRender data={explanationtext} />
       </div>
     </div>
   );
diff --git a/components/fragment_renderer/fragment_components/TextContent.js b/components/fragment_renderer/fragment_components/TextContent.js
index 72d0034026..b33026c8f4 100644
--- a/components/fragment_renderer/fragment_components/TextContent.js
+++ b/components/fragment_renderer/fragment_components/TextContent.js
@@ -1,17 +1,10 @@
 import TextRender from "../../text_node_renderer/TextRender";
 
-export default function TextContent(props) {
+export default function TextContent({ data }) {
   return (
     <div className="layout-container grid grid-cols-12 gap-x-6 my-12">
       <div className="col-span-12 lg:col-span-7">
-        <TextRender
-          data={
-            props.locale === "en"
-              ? props.fragmentData.scContentEn.json
-              : props.fragmentData.scContentFr.json
-          }
-          excludeH1={true}
-        />
+        <TextRender data={data} excludeH1={true} />
       </div>
     </div>
   );
diff --git a/components/fragment_renderer/fragment_components/TextWithImage.js b/components/fragment_renderer/fragment_components/TextWithImage.js
index a05276fc83..9546e51bd2 100644
--- a/components/fragment_renderer/fragment_components/TextWithImage.js
+++ b/components/fragment_renderer/fragment_components/TextWithImage.js
@@ -1,20 +1,33 @@
 import BasicTextWithImage from "./BasicTextWithImage";
 import ImageVerticalLineContent from "./ImageVerticalLineContent";
 
-export default function TextWithImage(props) {
-  switch (props.fragmentData.scLabLayout) {
+export default function TextWithImage({
+  src,
+  alt,
+  width,
+  height,
+  data,
+  layout,
+}) {
+  switch (layout) {
     case "default":
       return (
         <BasicTextWithImage
-          fragmentData={props.fragmentData}
-          locale={props.locale}
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          data={data}
         />
       );
     case "image-vertical-line-content":
       return (
         <ImageVerticalLineContent
-          fragmentData={props.fragmentData}
-          locale={props.locale}
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          data={data}
         />
       );
     default: