diff --git a/apps/studio/public/assets/css/preview-tw.css b/apps/studio/public/assets/css/preview-tw.css
index d8a74a956b..749db5a7e6 100644
--- a/apps/studio/public/assets/css/preview-tw.css
+++ b/apps/studio/public/assets/css/preview-tw.css
@@ -1414,6 +1414,10 @@ video {
   -webkit-line-clamp: 3;
 }
 
+.\!block {
+  display: block !important;
+}
+
 .block {
   display: block;
 }
@@ -1686,6 +1690,10 @@ video {
   max-width: 10rem;
 }
 
+.max-w-52 {
+  max-width: 13rem;
+}
+
 .max-w-5xl {
   max-width: 64rem;
 }
@@ -3129,6 +3137,11 @@ video {
   color: rgb(26 86 229 / var(--tw-text-opacity));
 }
 
+.text-link-hover {
+  --tw-text-opacity: 1;
+  color: rgb(21 71 190 / var(--tw-text-opacity));
+}
+
 .text-site-secondary {
   --tw-text-opacity: 1;
   color: rgb(78 69 65 / var(--tw-text-opacity));
@@ -5466,6 +5479,12 @@ video {
   margin-top: 2.25rem;
 }
 
+.\[\&\:not\(\:first-child\)\]\:first-of-type\:mt-7:first-of-type:not(
+    :first-child
+  ) {
+  margin-top: 1.75rem;
+}
+
 .\[\&\:not\(\:last-child\)\]\:mb-0:not(:last-child) {
   margin-bottom: 0px;
 }
diff --git a/package-lock.json b/package-lock.json
index a02dc37d5e..2aa97ed7f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34428,6 +34428,21 @@
     "tooling/typescript": {
       "name": "@isomer/tsconfig",
       "version": "0.0.0"
+    },
+    "tooling/template/node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.13.tgz",
+      "integrity": "sha512-V26ezyjPqQpDBV4lcWIh8B/QICQ4v+M5Bo9ykLN+sqeKKBxJVDpEc6biDVyluTXTC40f5IqCU0ttth7Es2ZuMw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }
diff --git a/packages/components/src/templates/next/components/complex/LogoCloud/LogoCloud.stories.tsx b/packages/components/src/templates/next/components/complex/LogoCloud/LogoCloud.stories.tsx
new file mode 100644
index 0000000000..6cbccaca13
--- /dev/null
+++ b/packages/components/src/templates/next/components/complex/LogoCloud/LogoCloud.stories.tsx
@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { LogoCloud } from "./LogoCloud"
+
+const meta: Meta<typeof LogoCloud> = {
+  title: "Next/Components/Logo Cloud",
+  component: LogoCloud,
+  argTypes: {},
+  parameters: {
+    themes: {
+      themeOverride: "Isomer Next",
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof LogoCloud>
+
+const IMAGE = { src: "https://via.placeholder.com/150", alt: "placeholder" }
+const HORIZONTAL_IMAGE = {
+  src: "https://via.placeholder.com/1000x100",
+  alt: "placeholder",
+}
+const VERTICAL_IMAGE = {
+  src: "https://via.placeholder.com/100x1000",
+  alt: "placeholder",
+}
+
+// Default scenario
+export const Default: Story = {
+  args: {
+    images: [IMAGE],
+  },
+}
+
+export const ManyImages: Story = {
+  args: {
+    images: Array(10).fill(IMAGE),
+  },
+}
+
+export const Agency: Story = {
+  args: {
+    images: [
+      {
+        alt: "Some image",
+        src: "https://www.ncss.gov.sg/images/default-source/asset/fwdsg_logo.png?sfvrsn=91b23ea8_1",
+      },
+      {
+        alt: "Some image",
+        src: "https://www.ncss.gov.sg/images/default-source/asset/togsgcares_logo.png?sfvrsn=d499b7ea_2",
+      },
+      {
+        alt: "Some image",
+        src: "https://www.ncss.gov.sg/images/default-source/asset/celebrating-volunteers-logo.png?sfvrsn=44b85185_2 ",
+      },
+    ],
+  },
+}
+
+export const HugeHorizontalLogo: Story = {
+  args: {
+    images: [...Array(4).fill(IMAGE), HORIZONTAL_IMAGE],
+  },
+}
+
+export const HugeVerticalLogo: Story = {
+  args: {
+    images: [...Array(4).fill(IMAGE), VERTICAL_IMAGE],
+  },
+}
diff --git a/packages/components/src/templates/next/components/complex/LogoCloud/LogoCloud.tsx b/packages/components/src/templates/next/components/complex/LogoCloud/LogoCloud.tsx
new file mode 100644
index 0000000000..24e68b9086
--- /dev/null
+++ b/packages/components/src/templates/next/components/complex/LogoCloud/LogoCloud.tsx
@@ -0,0 +1,45 @@
+import type { IsomerSiteProps } from "~/types"
+import { isExternalUrl } from "~/utils"
+import { ImageClient } from "../Image"
+
+interface Image {
+  src: string
+  alt: string
+}
+interface LogoCloudProps extends Pick<IsomerSiteProps, "assetsBaseUrl"> {
+  images: Image[]
+  title?: string
+}
+export const LogoCloud = ({
+  images: baseImages,
+  title,
+  assetsBaseUrl,
+}: LogoCloudProps) => {
+  const images = baseImages.map(({ src, alt }) => {
+    const transformedSrc =
+      isExternalUrl(src) || (assetsBaseUrl === undefined && !!src)
+        ? src
+        : `${assetsBaseUrl}${src}`
+
+    return { src: transformedSrc, alt }
+  })
+  return (
+    <div className="px-10 py-12">
+      <div className="flex flex-col gap-4">
+        <p className="prose-headline-base-medium self-center text-base-content-light">
+          {title ?? "With support from these agencies"}
+        </p>
+        <div className="flex flex-wrap justify-center">
+          {images.map((props) => (
+            <ImageClient
+              {...props}
+              width="100%"
+              className="inset-0 w-fit max-w-52 object-contain p-2"
+              assetsBaseUrl={assetsBaseUrl}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/components/src/templates/next/components/complex/LogoCloud/index.ts b/packages/components/src/templates/next/components/complex/LogoCloud/index.ts
new file mode 100644
index 0000000000..3ec8af4a4e
--- /dev/null
+++ b/packages/components/src/templates/next/components/complex/LogoCloud/index.ts
@@ -0,0 +1 @@
+export * from "./LogoCloud"
diff --git a/packages/components/src/utils/isExternalUrl.ts b/packages/components/src/utils/isExternalUrl.ts
index 8fd75ab366..78f70e01c8 100644
--- a/packages/components/src/utils/isExternalUrl.ts
+++ b/packages/components/src/utils/isExternalUrl.ts
@@ -1,5 +1,5 @@
 // Determine if the provided URL is an external link
-export const isExternalUrl = (url?: string) => {
+export const isExternalUrl = (url?: string): boolean => {
   return (
     !!url &&
     !url.startsWith("/") &&