diff --git a/images/card-bg-purple.png b/images/card-bg-purple.png
new file mode 100644
index 0000000..81a7db3
Binary files /dev/null and b/images/card-bg-purple.png differ
diff --git a/images/card-bg-yellow.png b/images/card-bg-yellow.png
new file mode 100644
index 0000000..dbfa33b
Binary files /dev/null and b/images/card-bg-yellow.png differ
diff --git a/images/checks-passed.png b/images/checks-passed.png
deleted file mode 100644
index 3303c77..0000000
Binary files a/images/checks-passed.png and /dev/null differ
diff --git a/images/hero-dark.png b/images/hero-dark.png
deleted file mode 100644
index a61cbb1..0000000
Binary files a/images/hero-dark.png and /dev/null differ
diff --git a/images/hero-light.png b/images/hero-light.png
deleted file mode 100644
index 68c712d..0000000
Binary files a/images/hero-light.png and /dev/null differ
diff --git a/index.mdx b/index.mdx
index 5ad4d0c..aefab7c 100644
--- a/index.mdx
+++ b/index.mdx
@@ -6,7 +6,7 @@ mode: "custom"
 import {CardComponent} from "/snippets/card.jsx"
 import { CTALink } from "/snippets/cta-link.jsx"
 
-<div className="px-6 md:px-12 md:py-8 prose">
+<div className="px-6 md:px-12 md:py-8 prose  max-w-8xl mx-auto relative">
 
 <Heading level={1} noAnchor className="font-bold text-4xl mb-4 dark:text-white">TigerData documentation</Heading>
 
@@ -16,7 +16,7 @@ for your real-time analytics and AI workloads.</p>
 <Columns cols={2}>
 <CardComponent
     title={<>Get started with<br />Tiger Cloud</>}
-    icon="rocket" 
+    bgImage="/images/card-bg-purple.png"
     href="/cloud/tiger/get-started/get-started-with-tiger-cloud" 
     cta={<CTALink text="Learn how" href="/cloud/tiger/get-started/get-started-with-tiger-cloud" />}>
     Tiger Cloud is the fastest Postgres cloud, powered by Tiger Postgres. It enhances Postgres to handle time series, events, real-time analytics, and vector search—all in a single database alongside transactional workloads.
@@ -24,7 +24,7 @@ for your real-time analytics and AI workloads.</p>
 
 <CardComponent
     title={<>Get started with<br />TimescaleDB</>}
-    icon="play" 
+    bgImage="/images/card-bg-yellow.png"
     href="/manage-data/timescaledb/get-started/get-started-with-timescaledb" 
     cta={<CTALink text="Learn how" href="/manage-data/timescaledb/get-started/get-started-with-timescaledb" />}>
     TimescaleDB is an open-source Postgres extension designed for running real-time analytics on time-series data. It is engineered up from Postgres and maintains full SQL support.
diff --git a/snippets/card.jsx b/snippets/card.jsx
index acf1548..5918d2c 100644
--- a/snippets/card.jsx
+++ b/snippets/card.jsx
@@ -1,11 +1,9 @@
 
 
-export const CardComponent = ({children, icon, title, href, cta}) => {
+export const CardComponent = ({children, title, href, cta, bgImage}) => {
   return (
-    <a href={href} className="group/item flex gap-3 flex-col my-2 pt-6 px-6 pb-9 rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light">
-      <div className="bg-[#F8F9FF] inline-flex items-center justify-center rounded-lg self-start w-[50px] h-[50px]">
-        <Icon icon={icon} size={24} color="#6447FB" />
-      </div>
+    <a href={href} className="group/item flex gap-3 flex-col my-2 pt-6 px-6 pb-9 rounded-3xl bg-white dark:bg-background-dark overflow-hidden w-full cursor-pointer"
+    style={{backgroundImage: `url(${bgImage})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'bottom right', backgroundSize: 'cover'}}>
       <h2 className="text-3xl text-black dark:text-white font-semibold">{title}</h2>
       <div className="text-neutral-700 dark:text-neutral-400">{children}</div>
       {cta && <div className="mt-5">{cta}</div>}