diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
index ffd20306b..1f25fa06f 100644
--- a/src/components/customerCases/customerCase/CustomerCase.tsx
+++ b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -3,15 +3,39 @@ import { RichText } from "src/components/richText/RichText";
 import Text from "src/components/text/Text";
 import {
   CustomerCase as CustomerCaseDocument,
+  CustomerCaseSection as CustomerCaseSectionObject,
   Delivery,
 } from "studioShared/lib/interfaces/customerCases";
 
 import styles from "./customerCase.module.css";
+import ImageSection from "./sections/image/ImageSection";
 
 export interface CustomerCaseProps {
   customerCase: CustomerCaseDocument;
 }
 
+function CustomerCaseSection({
+  section,
+}: {
+  section: CustomerCaseSectionObject;
+}) {
+  switch (section._type) {
+    case "richTextBlock":
+      return <RichText value={section.richText} />;
+    case "quoteBlock":
+      return (
+        section.quote && (
+          <div>
+            <Text>{section.quote}</Text>
+            {section.author && <Text>- {section.author}</Text>}
+          </div>
+        )
+      );
+    case "imageBlock":
+      return <ImageSection section={section} />;
+  }
+}
+
 export default function CustomerCase({ customerCase }: CustomerCaseProps) {
   return (
     <div className={styles.wrapper}>
@@ -102,31 +126,7 @@ export default function CustomerCase({ customerCase }: CustomerCaseProps) {
         </div>
         <div className={styles.sectionsWrapper}>
           {customerCase.sections.map((section) => (
-            <div key={section._key}>
-              {section._type === "richTextBlock" ? (
-                <RichText value={section.richText} />
-              ) : section._type === "quoteBlock" ? (
-                section.quote && (
-                  <div>
-                    <Text>{section.quote}</Text>
-                    {section.author && <Text>- {section.author}</Text>}
-                  </div>
-                )
-              ) : (
-                <div className={styles.imageBlockWrapper}>
-                  {section.images?.map((image) => (
-                    <div
-                      key={image._key ?? `${section._key}-${image.alt}`}
-                      className={styles.imageBlockImageWrapper}
-                    >
-                      <div className={styles.imageBlockImageContent}>
-                        <SanitySharedImage image={image} />
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
+            <CustomerCaseSection key={section._key} section={section} />
           ))}
         </div>
       </div>
diff --git a/src/components/customerCases/customerCase/customerCase.module.css b/src/components/customerCases/customerCase/customerCase.module.css
index c5cec17bb..4c84e30be 100644
--- a/src/components/customerCases/customerCase/customerCase.module.css
+++ b/src/components/customerCases/customerCase/customerCase.module.css
@@ -10,9 +10,15 @@
 }
 
 .content {
+  width: 100%;
   display: flex;
   flex-direction: column;
   max-width: 1400px;
+  padding: 0 2rem;
+
+  @media (max-width: 1024px) {
+    padding: 0 1rem;
+  }
 }
 
 .mainTitle {
@@ -103,23 +109,3 @@
   flex-direction: column;
   gap: 4.5rem;
 }
-
-.imageBlockWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.imageBlockImageWrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.imageBlockImageContent {
-  max-width: 800px;
-}
-
-.imageBlockImageContent img {
-  border-radius: 12px;
-}
diff --git a/src/components/customerCases/customerCase/sections/image/ImageSection.tsx b/src/components/customerCases/customerCase/sections/image/ImageSection.tsx
new file mode 100644
index 000000000..fec8f04f2
--- /dev/null
+++ b/src/components/customerCases/customerCase/sections/image/ImageSection.tsx
@@ -0,0 +1,25 @@
+import { SanitySharedImage } from "src/components/image/SanityImage";
+import { ImageBlock } from "studioShared/lib/interfaces/imageBlock";
+
+import styles from "./imageSection.module.css";
+
+export interface ImageSectionProps {
+  section: ImageBlock;
+}
+
+export default function ImageSection({ section }: ImageSectionProps) {
+  return (
+    <div className={styles.wrapper}>
+      {section.images?.map((image) => (
+        <div
+          key={image._key ?? `${section._key}-${image.alt}`}
+          className={styles.imageWrapper}
+        >
+          <div className={styles.imageContent}>
+            <SanitySharedImage image={image} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/customerCases/customerCase/sections/image/imageSection.module.css b/src/components/customerCases/customerCase/sections/image/imageSection.module.css
new file mode 100644
index 000000000..75d8f9f6e
--- /dev/null
+++ b/src/components/customerCases/customerCase/sections/image/imageSection.module.css
@@ -0,0 +1,26 @@
+.wrapper {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+  }
+}
+
+.imageWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.imageContent {
+  max-width: 800px;
+  height: 100%;
+}
+
+.imageContent img {
+  border-radius: 12px;
+  object-fit: cover;
+  height: 100% !important;
+}
diff --git a/studioShared/lib/interfaces/customerCases.ts b/studioShared/lib/interfaces/customerCases.ts
index 354f86920..12acee40f 100644
--- a/studioShared/lib/interfaces/customerCases.ts
+++ b/studioShared/lib/interfaces/customerCases.ts
@@ -27,9 +27,9 @@ export interface CustomerCaseBase {
   image: IImage;
 }
 
-export type CustomerCaseSections = (RichTextBlock | ImageBlock | QuoteBlock)[];
+export type CustomerCaseSection = RichTextBlock | ImageBlock | QuoteBlock;
 
 export interface CustomerCase extends CustomerCaseBase {
   projectInfo: CustomerCaseProjectInfo;
-  sections: CustomerCaseSections;
+  sections: CustomerCaseSection[];
 }