diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
index 6e41c142..6a05e870 100644
--- a/.vitepress/theme/style.css
+++ b/.vitepress/theme/style.css
@@ -45,6 +45,39 @@
  *   in custom container, badges, etc.
  * -------------------------------------------------------------------------- */
 
+@theme {
+  --color-primary: var(--vp-c-brand-2);
+  --color-primary2: var(--vp-c-brand-1);
+
+  --color-soft-bg: var(--vp-c-bg-soft);
+  --color-border: var(--vp-c-border);
+  --color-bg: var(--vp-c-bg);
+
+  --color-text1: var(--vp-c-text-1);
+  --color-text2: var(--vp-c-text-2);
+  --color-text3: var(--vp-c-text-3);
+
+  --color-success-1: var(--vp-c-green-1);
+  --color-success-2: var(--vp-c-green-2);
+  --color-success-3: var(--vp-c-green-3);
+  --color-success-soft: var(--vp-c-green-soft);
+
+  --color-important-1: var(--vp-c-purple-1);
+  --color-important-2: var(--vp-c-purple-2);
+  --color-important-3: var(--vp-c-purple-3);
+  --color-important-soft: var(--vp-c-purple-soft);
+
+  --color-warning-1: var(--vp-c-yellow-1);
+  --color-warning-2: var(--vp-c-yellow-2);
+  --color-warning-3: var(--vp-c-yellow-3);
+  --color-warning-soft: var(--vp-c-yellow-soft);
+
+  --color-danger-1: var(--vp-c-red-1);
+  --color-danger-2: var(--vp-c-red-2);
+  --color-danger-3: var(--vp-c-red-3);
+  --color-danger-soft: var(--vp-c-red-soft);
+}
+
 :root {
   --vp-c-default-1: var(--vp-c-gray-1);
   --vp-c-default-2: var(--vp-c-gray-2);
@@ -66,6 +99,11 @@
   --vp-c-warning-3: var(--vp-c-yellow-3);
   --vp-c-warning-soft: var(--vp-c-yellow-soft);
 
+  --vp-c-important-1: var(--vp-c-purple-1);
+  --vp-c-important-2: var(--vp-c-purple-2);
+  --vp-c-important-3: var(--vp-c-purple-3);
+  --vp-c-important-soft: var(--vp-c-purple-soft);
+
   --vp-c-danger-1: var(--vp-c-red-1);
   --vp-c-danger-2: var(--vp-c-red-2);
   --vp-c-danger-3: var(--vp-c-red-3);
diff --git a/src/assets/content-creator-screenshot.png b/src/assets/use-cases/content-creator.png
similarity index 100%
rename from src/assets/content-creator-screenshot.png
rename to src/assets/use-cases/content-creator.png
diff --git a/src/assets/use-cases/elizaos.png b/src/assets/use-cases/elizaos.png
new file mode 100644
index 00000000..fb68db58
Binary files /dev/null and b/src/assets/use-cases/elizaos.png differ
diff --git a/src/assets/use-cases/oracle-factory.png b/src/assets/use-cases/oracle-factory.png
new file mode 100644
index 00000000..aae01662
Binary files /dev/null and b/src/assets/use-cases/oracle-factory.png differ
diff --git a/src/assets/web3messaging-screenshot.png b/src/assets/use-cases/web3-messaging.png
similarity index 100%
rename from src/assets/web3messaging-screenshot.png
rename to src/assets/use-cases/web3-messaging.png
diff --git a/src/components/Badge.vue b/src/components/Badge.vue
new file mode 100644
index 00000000..71ad7cc9
--- /dev/null
+++ b/src/components/Badge.vue
@@ -0,0 +1,65 @@
+<template>
+  <span :class="badgeClasses">
+    <Icon v-if="icon" :icon="icon" :height="iconSize" />
+    {{ label }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+import { computed } from 'vue';
+
+interface Props {
+  label: string;
+  variant?:
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'important'
+    | 'primary'
+    | 'default';
+  icon?: string;
+  iconSize?: number;
+  size?: 'sm' | 'md';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  iconSize: 14,
+  size: 'sm',
+});
+
+const badgeClasses = computed(() => {
+  const baseClasses = 'inline-flex items-center rounded-2xl font-medium border';
+
+  // Size classes
+  const sizeClasses =
+    props.size === 'md'
+      ? 'gap-2 px-4 py-1.5 text-sm'
+      : 'gap-1.5 px-3 py-1 text-xs';
+
+  // Variant classes
+  let variantClasses = '';
+  switch (props.variant) {
+    case 'success':
+      variantClasses = 'bg-success-soft text-success-3 border-success-3';
+      break;
+    case 'warning':
+      variantClasses = 'bg-warning-soft text-warning-3 border-warning-3';
+      break;
+    case 'danger':
+      variantClasses = 'bg-danger-soft text-danger-3 border-danger-3';
+      break;
+    case 'important':
+      variantClasses = 'bg-important-soft text-important-3 border-important-3';
+      break;
+    case 'primary':
+      variantClasses = 'bg-primary2/10 text-primary2 border-primary2/30';
+      break;
+    default:
+      variantClasses = 'bg-soft-bg text-text2 border-border';
+  }
+
+  return `${baseClasses} ${sizeClasses} ${variantClasses}`;
+});
+</script>
diff --git a/src/components/CardGrid.vue b/src/components/CardGrid.vue
new file mode 100644
index 00000000..5936099e
--- /dev/null
+++ b/src/components/CardGrid.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="my-8 grid grid-cols-1 gap-6 md:grid-cols-2">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ProjectCard.vue b/src/components/ProjectCard.vue
new file mode 100644
index 00000000..3cd9cc2f
--- /dev/null
+++ b/src/components/ProjectCard.vue
@@ -0,0 +1,121 @@
+<template>
+  <div
+    class="bg-soft-bg border-border hover:border-primary relative flex h-full min-h-[220px] flex-col rounded-lg border p-5 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
+  >
+    <!-- Icon -->
+    <div class="flex items-start gap-2">
+      <div
+        class="border-border bg-bg flex h-14 w-14 items-center justify-center rounded-xl border"
+      >
+        <Icon :icon="icon" height="24" />
+      </div>
+      <div>
+        <h3 class="mt-0! mb-1! text-lg font-semibold">{{ title }}</h3>
+        <Badge
+          :label="statusLabel"
+          :variant="badgeVariant"
+          :icon="statusIcon"
+        />
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1">
+      <p class="text-text2 mb-3 h-14 overflow-hidden text-sm leading-relaxed">
+        {{ description }}
+      </p>
+
+      <!-- Status Badge -->
+    </div>
+    <!-- Actions -->
+    <div class="mt-auto">
+      <div v-if="githubUrl" class="grid gap-3">
+        <Button
+          as="a"
+          :href="buttonHref"
+          :disabled="buttonDisabled"
+          :target="buttonTarget"
+          :rel="buttonRel"
+          class="flex-1"
+        >
+          <Icon :icon="buttonIcon" :height="16" />
+          {{ buttonLabel }}
+        </Button>
+        <Button
+          as="a"
+          :href="githubUrl"
+          target="_blank"
+          rel="noreferrer"
+          variant="secondary"
+          class="flex-1"
+        >
+          <Icon icon="mdi:github" :height="16" />
+          {{ githubLabel || 'View Code' }}
+        </Button>
+      </div>
+      <Button
+        v-else
+        :as="buttonHref ? 'a' : 'button'"
+        :href="buttonHref"
+        :disabled="buttonDisabled"
+        :target="buttonTarget"
+        :rel="buttonRel"
+        class="w-full"
+      >
+        <Icon :icon="buttonIcon" :height="16" />
+        {{ buttonLabel }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+import { computed } from 'vue';
+import Badge from './Badge.vue';
+import Button from './ui/Button.vue';
+
+interface Props {
+  title: string;
+  description: string;
+  icon: string;
+  status: 'available' | 'coming-soon' | 'interactive';
+  statusLabel: string;
+  buttonLabel: string;
+  buttonIcon: string;
+  buttonHref?: string;
+  buttonTarget?: string;
+  buttonRel?: string;
+  buttonDisabled?: boolean;
+  githubUrl?: string;
+  githubLabel?: string;
+}
+
+const props = defineProps<Props>();
+
+const statusIcon = computed(() => {
+  switch (props.status) {
+    case 'available':
+      return 'mdi:check-circle-outline';
+    case 'interactive':
+      return 'mdi:play-circle-outline';
+    case 'coming-soon':
+      return 'mdi:clock-outline';
+    default:
+      return 'mdi:check-circle-outline';
+  }
+});
+
+const badgeVariant = computed(() => {
+  switch (props.status) {
+    case 'available':
+      return 'success';
+    case 'coming-soon':
+      return 'warning';
+    case 'interactive':
+      return 'primary';
+    default:
+      return 'success';
+  }
+});
+</script>
diff --git a/src/components/UseCaseCard.vue b/src/components/UseCaseCard.vue
new file mode 100644
index 00000000..a22a1ffe
--- /dev/null
+++ b/src/components/UseCaseCard.vue
@@ -0,0 +1,76 @@
+<template>
+  <div
+    class="bg-soft-bg group border-border hover:border-primary overflow-hidden rounded-xl border shadow-md transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
+  >
+    <!-- Image -->
+    <div class="group relative overflow-hidden">
+      <a :href="demoUrl" target="_blank" rel="noreferrer">
+        <img
+          :src="imageUrl"
+          :alt="imageAlt"
+          class="max-h-48 w-full object-cover object-top transition-transform duration-300 group-hover:scale-105"
+        />
+      </a>
+    </div>
+
+    <!-- Content -->
+    <div class="p-6">
+      <h3 class="text-text1 mt-0! mb-4 text-2xl font-semibold">{{ title }}</h3>
+      <p class="text-text2 mb-6 text-sm leading-relaxed">{{ description }}</p>
+
+      <!-- Feature Tags -->
+      <div class="mb-6 flex flex-wrap gap-2">
+        <Badge
+          v-for="feature in features"
+          :key="feature"
+          :label="feature"
+          variant="primary"
+        />
+      </div>
+
+      <!-- Actions -->
+      <div v-if="githubUrl || demoUrl" class="flex flex-wrap gap-4">
+        <Button
+          v-if="demoUrl"
+          as="a"
+          :href="demoUrl"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <Icon :icon="demoIcon" height="18" />
+          Try Live Demo
+        </Button>
+        <Button
+          v-if="githubUrl"
+          as="a"
+          :href="githubUrl"
+          target="_blank"
+          rel="noreferrer"
+          variant="secondary"
+        >
+          <Icon icon="mdi:github" height="18" />
+          View Code
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+import Badge from './Badge.vue';
+import Button from './ui/Button.vue';
+
+interface Props {
+  title: string;
+  description: string;
+  imageUrl: string;
+  imageAlt: string;
+  features: string[];
+  demoUrl?: string;
+  githubUrl?: string;
+  demoIcon: string;
+}
+
+defineProps<Props>();
+</script>
diff --git a/src/components/ui/Button.vue b/src/components/ui/Button.vue
index f3808d64..25e2d1ab 100644
--- a/src/components/ui/Button.vue
+++ b/src/components/ui/Button.vue
@@ -1,8 +1,8 @@
 <template>
   <component
-    :is="as || 'button'"
-    :type="as === 'button' || !as ? 'button' : undefined"
-    class="inline-flex h-11 cursor-pointer items-center justify-center rounded-lg border-none bg-[#fcd15a]! px-5! py-2 text-base font-medium text-[#1e1e1e]! no-underline! transition-all! duration-200 hover:-translate-y-0.5 hover:transform hover:bg-[#ffb74d]! hover:shadow-md focus:shadow-[0_0_0_2px_rgba(252,209,90,0.3)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
+    :is="as"
+    :type="as === 'button' ? 'button' : undefined"
+    :class="buttonClasses"
     v-bind="$attrs"
   >
     <slot />
@@ -10,10 +10,29 @@
 </template>
 
 <script setup>
-defineProps({
+import { computed } from 'vue';
+
+const props = defineProps({
   as: {
     type: String,
     default: 'button',
   },
+  variant: {
+    type: String,
+    default: 'primary',
+    validator: (value) => ['primary', 'secondary'].includes(value),
+  },
+});
+
+const buttonClasses = computed(() => {
+  const baseClasses =
+    'inline-flex h-11 cursor-pointer gap-1.5 items-center justify-center rounded-lg px-5! py-2 text-base font-medium no-underline! transition-all! duration-200 not-disabled:hover:-translate-y-0.5 not-disabled:hover:transform not-disabled:hover:shadow-md focus:outline-none disabled:cursor-not-allowed disabled:opacity-60';
+
+  if (props.variant === 'secondary') {
+    return `${baseClasses} bg-soft-bg! text-text1! border border-primary! hover:!bg-primary/10 focus:shadow-[0_0_0_2px_rgba(252,209,90,0.3)]`;
+  }
+
+  // Primary variant (default)
+  return `${baseClasses} border-none bg-primary! text-[#1e1e1e]! focus:shadow-[0_0_0_2px_rgba(252,209,90,0.3)]`;
 });
 </script>
diff --git a/src/manage-data/dataProtector/getting-started.md b/src/manage-data/dataProtector/getting-started.md
index b387c9ab..762dfaa3 100644
--- a/src/manage-data/dataProtector/getting-started.md
+++ b/src/manage-data/dataProtector/getting-started.md
@@ -216,26 +216,34 @@ discontinuity.
 
 ## Sandbox
 
-### Core methods
-
-<a href="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sandbox/main" target="_blank" rel="noreferrer" class="link-as-block" style="margin-top: 16px">
-  ⚡ &nbsp;Code Sandbox
-</a>
-
-Corresponding GitHub repository:
-
-<a href="https://github.com/iExecBlockchainComputing/dataprotector-sandbox" target="_blank" rel="noreferrer" class="link-as-block">
-  🔎 &nbsp;GitHub repository sandbox
-</a>
-
-### Sharing methods
-
-<a href="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sharing-sandbox/main" target="_blank" rel="noreferrer" class="link-as-block" style="margin-top: 16px">
-  ⚡ &nbsp;Code Sandbox
-</a>
-
-Corresponding GitHub repository:
-
-<a href="https://github.com/iExecBlockchainComputing/dataprotector-sharing-sandbox" target="_blank" rel="noreferrer" class="link-as-block">
-  🔎 &nbsp;GitHub repository sandbox
-</a>
+<CardGrid>
+  <ProjectCard
+    title="DataProtector Core"
+    description="Essential data protection features including encryption, access control, and secure storage."
+    icon="mdi:shield-lock"
+    status="interactive"
+    statusLabel="Interactive"
+    buttonLabel="Open Sandbox"
+    buttonIcon="mdi:code-braces"
+    buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sandbox/main"
+    githubUrl="https://github.com/iExecBlockchainComputing/dataprotector-sandbox"
+    githubLabel="GitHub repository sandbox"
+  />
+
+<ProjectCard
+    title="DataProtector Sharing"
+    description="Advanced data sharing capabilities with granular permissions and monetization features."
+    icon="mdi:share-variant"
+    status="interactive"
+    statusLabel="Interactive"
+    buttonLabel="Open Sandbox"
+    buttonIcon="mdi:code-braces"
+    buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sharing-sandbox/main"
+    githubUrl="https://github.com/iExecBlockchainComputing/dataprotector-sharing-sandbox"
+    githubLabel="GitHub repository sandbox"
+  /> </CardGrid>
+
+<script setup>
+import CardGrid from '../../components/CardGrid.vue';
+import ProjectCard from '../../components/ProjectCard.vue';
+</script>
diff --git a/src/overview/quick-start.md b/src/overview/quick-start.md
index 70b33914..b59345a7 100644
--- a/src/overview/quick-start.md
+++ b/src/overview/quick-start.md
@@ -9,175 +9,100 @@ features.
 Bootstrap your project with our framework-specific templates and start building
 privacy-first applications.
 
-<div class="quick-start-grid">
-  <div class="quick-start-card">
-    <div class="card-icon">
-      <Icon icon="logos:nextjs-icon" height="36" />
-    </div>
-    <div class="card-content">
-      <h3>Next.js Starter</h3>
-      <p>Full-featured Next.js template with iExec integration, TypeScript support, and example implementations.</p>
-      <div class="card-status available">
-        <Icon icon="mdi:check-circle" height="14" />
-        Available
-      </div>
-    </div>
-    <div class="card-actions">
-      <a href="https://github.com/iExecBlockchainComputing/iexec-nextjs-starter" target="_blank" rel="noreferrer" class="primary-link">
-        <Icon icon="mdi:github" height="16" />
-        Get Started
-      </a>
-    </div>
-  </div>
-
-  <div class="quick-start-card">
-    <div class="card-icon">
-      <Icon icon="logos:react" height="36" />
-    </div>
-    <div class="card-content">
-      <h3>React Starter</h3>
-      <p>React application template with hooks, components, and utilities for seamless iExec integration.</p>
-      <div class="card-status coming-soon">
-        <Icon icon="mdi:clock-outline" height="14" />
-        Coming Soon
-      </div>
-    </div>
-    <div class="card-actions">
-      <button class="disabled-link" disabled>
-        <Icon icon="mdi:github" height="16" />
-        Coming Soon
-      </button>
-    </div>
-  </div>
-
-  <div class="quick-start-card">
-    <div class="card-icon">
-      <Icon icon="logos:vue" height="40" />
-    </div>
-    <div class="card-content">
-      <h3>Vue.js Starter</h3>
-      <p>Vue 3 Composition API template with TypeScript and optimized build configuration for iExec apps.</p>
-      <div class="card-status coming-soon">
-        <Icon icon="mdi:clock-outline" height="16" />
-        Coming Soon
-      </div>
-    </div>
-    <div class="card-actions">
-      <button class="disabled-link" disabled>
-        <Icon icon="mdi:github" height="16" />
-        Coming Soon
-      </button>
-    </div>
-  </div>
-</div>
+<CardGrid>
+  <ProjectCard
+    title="Next.js Starter"
+    description="Full-featured Next.js template with iExec integration, TypeScript support, and example implementations."
+    icon="logos:nextjs-icon"
+    status="available"
+    statusLabel="Available"
+    buttonLabel="Get Started"
+    buttonIcon="mdi:github"
+    buttonHref="https://github.com/iExecBlockchainComputing/iexec-nextjs-starter"
+  />
+
+<ProjectCard
+    title="React Starter"
+    description="React application template with hooks, components, and utilities for seamless iExec integration."
+    icon="logos:react"
+    status="coming-soon"
+    statusLabel="Coming Soon"
+    buttonLabel="Coming Soon"
+    buttonIcon="mdi:github"
+    buttonDisabled
+  />
+
+<ProjectCard
+    title="Vue.js Starter"
+    description="Vue 3 Composition API template with TypeScript and optimized build configuration for iExec apps."
+    icon="logos:vue"
+    status="coming-soon"
+    statusLabel="Coming Soon"
+    buttonLabel="Coming Soon"
+    buttonIcon="mdi:github"
+    buttonDisabled
+  /> </CardGrid>
 
 ## Interactive Sandboxes
 
 Explore and experiment with iExec features directly in your browser. Perfect for
 learning and prototyping.
 
-<div class="quick-start-grid">
-
-  <div class="quick-start-card">
-    <div class="card-icon">
-      <Icon icon="mdi:shield-lock" height="36" color="#DC2626" />
-    </div>
-    <div class="card-content">
-      <h3>DataProtector Core</h3>
-      <p>Essential data protection features including encryption, access control, and secure storage.</p>
-      <div class="card-status available">
-        <Icon icon="mdi:play-circle" height="16" />
-        Interactive
-      </div>
-    </div>
-    <div class="card-actions">
-      <a href="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sandbox/main" target="_blank" rel="noreferrer" class="primary-link">
-        <Icon icon="mdi:code-braces" height="16" />
-        Open Sandbox
-      </a>
-    </div>
-  </div>
-
-  <div class="quick-start-card">
-    <div class="card-icon">
-      <Icon icon="mdi:share-variant" height="36" color="#7C3AED" />
-    </div>
-    <div class="card-content">
-      <h3>DataProtector Sharing</h3>
-      <p>Advanced data sharing capabilities with granular permissions and monetization features.</p>
-      <div class="card-status available">
-        <Icon icon="mdi:play-circle" height="16" />
-        Interactive
-      </div>
-    </div>
-    <div class="card-actions">
-      <a href="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sharing-sandbox/main" target="_blank" rel="noreferrer" class="primary-link">
-        <Icon icon="mdi:code-braces" height="16" />
-        Open Sandbox
-      </a>
-    </div>
-  </div>
-  
-  <div class="quick-start-card">
-    <div class="card-icon">
-      <Icon icon="mdi:message-lock" height="36" color="#4F46E5" />
-    </div>
-    <div class="card-content">
-      <h3>Web3 Telegram</h3>
-      <p>Privacy-preserving Telegram messaging integration with user consent management.</p>
-      <div class="card-status available">
-        <Icon icon="mdi:play-circle" height="14" />
-        Interactive
-      </div>
-    </div>
-    <div class="card-actions">
-      <a href="https://codesandbox.io/p/github/iExecBlockchainComputing/web3-telegram-sandbox/main" target="_blank" rel="noreferrer" class="primary-link">
-        <Icon icon="mdi:code-braces" height="16" />
-        Open Sandbox
-      </a>
-    </div>
-  </div>
-
-  <div class="quick-start-card">
-    <div class="card-icon">
-      <Icon icon="mdi:email-lock" height="36" color="#059669" />
-    </div>
-    <div class="card-content">
-      <h3>Web3 Mail</h3>
-      <p>Secure email communication for Web3 users without revealing personal email addresses.</p>
-      <div class="card-status available">
-        <Icon icon="mdi:play-circle" height="16" />
-        Interactive
-      </div>
-    </div>
-    <div class="card-actions">
-      <a href="https://codesandbox.io/p/github/iExecBlockchainComputing/web3mail-sandbox/main" target="_blank" rel="noreferrer" class="primary-link">
-        <Icon icon="mdi:code-braces" height="16" />
-        Open Sandbox
-      </a>
-    </div>
-  </div>
-
-  <div class="quick-start-card">
-    <div class="card-icon">
-      <Icon icon="mdi:database-cog" height="36" color="#EA580C" />
-    </div>
-    <div class="card-content">
-      <h3>Oracle Factory</h3>
-      <p>Create and deploy custom oracles for bringing off-chain data into your Web3 applications.</p>
-      <div class="card-status available">
-        <Icon icon="mdi:play-circle" height="16" />
-        Interactive
-      </div>
-    </div>
-    <div class="card-actions">
-      <a href="https://codesandbox.io/p/github/iExecBlockchainComputing/oracle-factory-sandbox/" target="_blank" rel="noreferrer" class="primary-link">
-        <Icon icon="mdi:code-braces" height="16" />
-        Open Sandbox
-      </a>
-    </div>
-  </div>
-</div>
+<CardGrid>
+  <ProjectCard
+    title="DataProtector Core"
+    description="Essential data protection features including encryption, access control, and secure storage."
+    icon="mdi:shield-lock"
+    status="interactive"
+    statusLabel="Interactive"
+    buttonLabel="Open Sandbox"
+    buttonIcon="mdi:code-braces"
+    buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sandbox/main"
+  />
+
+<ProjectCard
+    title="DataProtector Sharing"
+    description="Advanced data sharing capabilities with granular permissions and monetization features."
+    icon="mdi:share-variant"
+    status="interactive"
+    statusLabel="Interactive"
+    buttonLabel="Open Sandbox"
+    buttonIcon="mdi:code-braces"
+    buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sharing-sandbox/main"
+  />
+
+<ProjectCard
+    title="Web3 Telegram"
+    description="Privacy-preserving Telegram messaging integration with user consent management."
+    icon="mdi:message-lock"
+    status="interactive"
+    statusLabel="Interactive"
+    buttonLabel="Open Sandbox"
+    buttonIcon="mdi:code-braces"
+    buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/web3-telegram-sandbox/main"
+  />
+
+<ProjectCard
+    title="Web3 Mail"
+    description="Secure email communication for Web3 users without revealing personal email addresses."
+    icon="mdi:email-lock"
+    status="interactive"
+    statusLabel="Interactive"
+    buttonLabel="Open Sandbox"
+    buttonIcon="mdi:code-braces"
+    buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/web3mail-sandbox/main"
+  />
+
+<ProjectCard
+    title="Oracle Factory"
+    description="Create and deploy custom oracles for bringing off-chain data into your Web3 applications."
+    icon="mdi:database-cog"
+    status="interactive"
+    statusLabel="Interactive"
+    buttonLabel="Open Sandbox"
+    buttonIcon="mdi:code-braces"
+    buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/oracle-factory-sandbox/"
+  /> </CardGrid>
 
 ## Next Steps
 
@@ -189,150 +114,7 @@ After exploring our starters and sandboxes:
 3. **Build**: Integrate the features you need into your application
 4. **Deploy**: Use our deployment guides for production-ready applications
 
-<style scoped>
-.quick-start-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1.5rem;
-  margin: 2rem 0;
-}
-
-.quick-start-card {
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-border);
-  border-radius: 8px;
-  padding: 1.25rem;
-  transition: all 0.3s ease;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 220px;
-}
-
-.quick-start-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  border-color: var(--vp-c-brand-2);
-}
-
-.card-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 56px;
-  height: 56px;
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-border);
-  border-radius: 10px;
-  margin-bottom: 1rem;
-  flex-shrink: 0;
-}
-
-.card-content {
-  flex: 1;
-}
-
-.card-content h3 {
-  margin: 0 0 0.75rem 0;
-  color: var(--vp-c-text-1);
-  font-size: 1.1rem;
-  font-weight: 600;
-}
-
-.card-content p {
-  color: var(--vp-c-text-2);
-  font-size: 0.85rem;
-  line-height: 1.4;
-  margin-bottom: 0.8rem;
-  height: 3.5rem;
-  overflow: hidden;
-}
-
-.card-status {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3rem;
-  padding: 0.25rem 0.7rem;
-  border-radius: 16px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  margin-bottom: 0.8rem;
-}
-
-.card-status.available {
-  background: rgba(34, 197, 94, 0.1);
-  color: #22c55e;
-  border: 1px solid rgba(34, 197, 94, 0.2);
-}
-
-.card-status.coming-soon {
-  background: rgba(249, 115, 22, 0.1);
-  color: #f97316;
-  border: 1px solid rgba(249, 115, 22, 0.2);
-}
-
-.card-actions {
-  margin-top: auto;
-}
-
-.primary-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.6rem 1.2rem;
-  background: var(--vp-c-brand-1);
-  color: white;
-  text-decoration: none;
-  border-radius: 6px;
-  font-size: 0.9rem;
-  font-weight: 500;
-  transition: all 0.2s ease;
-  width: 100%;
-  justify-content: center;
-}
-
-.primary-link:hover {
-  background: var(--vp-c-brand-2);
-  transform: translateY(-1px);
-}
-
-.disabled-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.6rem 1.2rem;
-  background: var(--vp-c-bg);
-  color: var(--vp-c-text-3);
-  border: 1px solid var(--vp-c-border);
-  border-radius: 6px;
-  font-size: 0.9rem;
-  font-weight: 500;
-  width: 100%;
-  justify-content: center;
-  cursor: not-allowed;
-}
-
-@media (max-width: 768px) {
-  .quick-start-grid {
-    grid-template-columns: 1fr;
-    gap: 1rem;
-  }
-}
-
-@media (min-width: 769px) and (max-width: 1024px) {
-  .quick-start-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 1025px) {
-  .quick-start-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-</style>
-
 <script setup>
-import { Icon } from '@iconify/vue';
+import CardGrid from '../components/CardGrid.vue';
+import ProjectCard from '../components/ProjectCard.vue';
 </script>
diff --git a/src/overview/tooling-and-explorers/blockchain-explorer.md b/src/overview/tooling-and-explorers/blockchain-explorer.md
index fad73033..8d14b9ec 100644
--- a/src/overview/tooling-and-explorers/blockchain-explorer.md
+++ b/src/overview/tooling-and-explorers/blockchain-explorer.md
@@ -69,8 +69,8 @@ publicly auditable.
 
 ::: tip 💡 Dev Tip
 
-Use **Bellecour** for development and testing as it's a
-gasless blockchain, then deploy to **Arbitrum** for production workloads.
+Use **Bellecour** for development and testing as it's a gasless blockchain, then
+deploy to **Arbitrum** for production workloads.
 
 :::
 
diff --git a/src/overview/use-case-demo/content-creator.md b/src/overview/use-case-demo/content-creator.md
deleted file mode 100644
index c1262f83..00000000
--- a/src/overview/use-case-demo/content-creator.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-description:
-  Explore the Content Creator demo app showcasing iExec’s DataProtector Sharing
-  module. Try the live demo and browse the GitHub repository to see
-  privacy-first data sharing in action.
----
-
-<script setup>
-import { Icon } from '@iconify/vue';
-</script>
-
-# Content Creator
-
-<a href="https://demo.iex.ec/content-creator/" target="_blank" rel="noreferrer" style="display: inline-block; margin-top: 20px">
-  <img src="/assets/content-creator-screenshot.png" alt="Content Creator screenshot">
-</a>
-
-This is a fairly complete app that aims to demonstrate some of the features from
-**DataProtector Sharing** module.
-
-**Try the demo:**
-
-<a href="https://demo.iex.ec/content-creator/" target="_blank" rel="noreferrer" class="link-as-block">
-  <Icon icon="mdi:art" height="25" style="margin-right: -1px" /> Content Creator Demo
-</a>
-
-**GitHub repository:**
-
-<a href="https://github.com/iExecBlockchainComputing/content-creator-usecase-demo" target="_blank" rel="noreferrer" class="link-as-block">
-  <Icon icon="mdi:github" height="24" /> DataProtector use case demo
-</a>
diff --git a/src/overview/use-case-demo/web3messaging.md b/src/overview/use-case-demo/web3messaging.md
deleted file mode 100644
index 6fce0c41..00000000
--- a/src/overview/use-case-demo/web3messaging.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-description:
-  Explore Web3Messaging by iExec—enable private, consent-based communication in
-  Web3. Discover tools like Web3Mail and Web3Telegram that protect user data,
-  support targeted messaging, and let users monetize interactions. Live demo and
-  full GitHub code available.
----
-
-<script setup>
-import { Icon } from '@iconify/vue';
-</script>
-
-# Web3Messaging
-
-<a href="https://demo.iex.ec/web3messaging/" target="_blank" rel="noreferrer" style="display: inline-block; margin-top: 20px">
-  <img src="/assets/web3messaging-screenshot.png" alt="Web3Messaging screenshot">
-</a>
-
-In the Web3 ecosystem, blockchain wallets serve as digital identities, creating
-significant privacy risks due to public ledgers containing transaction histories
-and assets.
-
-Web3Messaging, a core iExec use case, enables secure communication between Web3
-users and decentralized applications (dApps) while preserving privacy and
-requiring explicit user consent. It supports targeted messaging without exposing
-personal data, and empowers users to monetize their engagement with received
-communications.
-
-## Key Components:
-
-- **User Consent Management**: Users explicitly authorize sharing their data
-  with third parties
-- **Secure Data Sharing**: Confidential computing enables protected data
-  exchange
-- **Privacy-Preserving Channels**: Third parties can contact users without
-  accessing personal data.
-- **Targeted Communication**: Reach relevant users without revealing their
-  identities.
-- **User Monetization**: Users can earn rewards for engaging with communications
-
-## Available Solutions
-
-**Web3Mail**: Privacy-preserving email communications for Web3 users
-
-**Web3Telegram**: A new solution extending private messaging to Telegram, while
-protecting the user's chat ID.
-
-**Try the demo:**
-
-View our live Web3Messaging demo by connecting your Ethereum wallet.
-
-<a href="https://demo.iex.ec/web3messaging" target="_blank" rel="noreferrer" class="link-as-block">
-  <Icon icon="mdi:art" height="25" style="margin-right: -1px" /> Web3Messaging Demo
-</a>
-
-**GitHub repository:**
-
-Access our full codebase, documentation, and integration guidelines. Run the
-demo locally or within Docker using our instructions.
-
-<a href="https://github.com/iExecBlockchainComputing/web3-messaging-usecase-demo" target="_blank" rel="noreferrer" class="link-as-block">
-  <Icon icon="mdi:github" height="24" /> Web3Messaging use case demo
-</a>
diff --git a/src/overview/use-cases.md b/src/overview/use-cases.md
index f6f13f49..ec905f91 100644
--- a/src/overview/use-cases.md
+++ b/src/overview/use-cases.md
@@ -4,201 +4,51 @@ Explore our demo applications showcasing iExec's privacy-preserving technologies
 in action. Each use case demonstrates real-world applications of confidential
 computing and decentralized data protection.
 
-<div class="use-cases-grid">
-  <div class="use-case-card">
-    <div class="card-image">
-      <a href="https://demo.iex.ec/content-creator/" target="_blank" rel="noreferrer">
-        <img src="/assets/content-creator-screenshot.png" alt="Content Creator Demo Screenshot">
-      </a>
-    </div>
-    <div class="card-content">
-      <h3>Content Creator</h3>
-      <p class="card-description">
-        A comprehensive demo showcasing iExec's DataProtector Sharing module. Experience privacy-first data sharing where content creators can securely share their work while maintaining full control over access permissions and monetization.
-      </p>
-      <div class="card-features">
-        <span class="feature-tag">DataProtector</span>
-        <span class="feature-tag">Privacy-First</span>
-        <span class="feature-tag">Content Sharing</span>
-        <span class="feature-tag">Monetization</span>
-      </div>
-      <div class="card-actions">
-        <a href="https://demo.iex.ec/content-creator/" target="_blank" rel="noreferrer" class="demo-link">
-          <Icon icon="mdi:art" height="18" />
-          Try Live Demo
-        </a>
-        <a href="https://github.com/iExecBlockchainComputing/content-creator-usecase-demo" target="_blank" rel="noreferrer" class="github-link">
-          <Icon icon="mdi:github" height="18" />
-          View Code
-        </a>
-      </div>
-    </div>
-  </div>
+<div class="grid grid-cols-1 gap-8 my-8">
+  <UseCaseCard
+    title="Content Creator"
+    description="A comprehensive demo showcasing iExec's DataProtector Sharing module. Experience privacy-first data sharing where content creators can securely share their work while maintaining full control over access permissions and monetization."
+    imageUrl="/assets/use-cases/content-creator.png"
+    imageAlt="Content Creator Demo Screenshot"
+    :features="['DataProtector Core', 'DataProtector Sharing']"
+    demoUrl="https://demo.iex.ec/content-creator/"
+    githubUrl="https://github.com/iExecBlockchainComputing/content-creator-usecase-demo"
+    demoIcon="mdi:art"
+  />
+
+<UseCaseCard
+    title="Web3 Messaging"
+    description="Secure communication platform for Web3 users enabling privacy-preserving messaging through Web3Mail and Web3Telegram. Users maintain control over their data while enabling targeted communication and monetizing their engagement."
+    imageUrl="/assets/use-cases/web3-messaging.png"
+    imageAlt="Web3Messaging Demo Screenshot"
+    :features="['DataProtector Core', 'Web3Mail', 'Web3Telegram']"
+    demoUrl="https://demo.iex.ec/web3messaging"
+    githubUrl="https://github.com/iExecBlockchainComputing/web3-messaging-usecase-demo"
+    demoIcon="mdi:message-processing"
+  />
+
+<UseCaseCard
+    title="Oracle Factory"
+    description="Decentralized oracle platform providing secure and verifiable data feeds for smart contracts. Data are fetched through iApps that run on a decentralized confidential computing layer, ensuring privacy-preserving computation and access to verified external data sources for your DeFi and Web3 applications."
+    imageUrl="/assets/use-cases/oracle-factory.png"
+    imageAlt="OracleFactory Demo Screenshot"
+    :features="['Oracle Factory']"
+    demoUrl="https://oracle-factory.iex.ec/gallery"
+    demoIcon="mdi:database-search"
+  />
+
+<UseCaseCard
+    title="AI Agent"
+    description="Showcase of artificial intelligence applications running on iExec's confidential computing infrastructure. Experience privacy-preserving AI inference, machine learning model execution, and secure data analysis with TEE protection."
+    imageUrl="/assets/use-cases/elizaos.png"
+    imageAlt="AI Applications Demo Screenshot"
+    :features="['AI', 'TEE', 'Confidential Computing']"
+    githubUrl="https://github.com/iExecBlockchainComputing/iexec-elizaos-agent"
+    demoIcon="mdi:brain"
+  />
 
-  <div class="use-case-card">
-    <div class="card-image">
-      <a href="https://demo.iex.ec/web3messaging/" target="_blank" rel="noreferrer">
-        <img src="/assets/web3messaging-screenshot.png" alt="Web3Messaging Demo Screenshot">
-      </a>
-    </div>
-    <div class="card-content">
-      <h3>Web3Messaging</h3>
-      <p class="card-description">
-        Secure communication platform for Web3 users enabling privacy-preserving messaging through Web3Mail and Web3Telegram. Users maintain control over their data while enabling targeted communication and monetizing their engagement.
-      </p>
-      <div class="card-features">
-        <span class="feature-tag">Web3Mail</span>
-        <span class="feature-tag">Web3Telegram</span>
-        <span class="feature-tag">User Consent</span>
-        <span class="feature-tag">Monetization</span>
-      </div>
-      <div class="card-actions">
-        <a href="https://demo.iex.ec/web3messaging" target="_blank" rel="noreferrer" class="demo-link">
-          <Icon icon="mdi:message-processing" height="18" />
-          Try Live Demo
-        </a>
-        <a href="https://github.com/iExecBlockchainComputing/web3-messaging-usecase-demo" target="_blank" rel="noreferrer" class="github-link">
-          <Icon icon="mdi:github" height="18" />
-          View Code
-        </a>
-      </div>
-    </div>
-  </div>
 </div>
 
-<style scoped>
-.use-cases-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-  gap: 2rem;
-  margin: 2rem 0;
-}
-
-.use-case-card {
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-border);
-  border-radius: 12px;
-  overflow: hidden;
-  transition: all 0.3s ease;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.use-case-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  border-color: var(--vp-c-brand-1);
-}
-
-.card-image {
-  position: relative;
-  overflow: hidden;
-}
-
-.card-image img {
-  width: 100%;
-  height: 200px;
-  object-fit: cover;
-  transition: transform 0.3s ease;
-}
-
-.card-image:hover img {
-  transform: scale(1.05);
-}
-
-.card-content {
-  padding: 1.5rem;
-}
-
-.card-content h3 {
-  margin: 0 0 1rem 0;
-  color: var(--vp-c-text-1);
-  font-size: 1.5rem;
-  font-weight: 600;
-}
-
-.card-description {
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  margin-bottom: 1.5rem;
-  font-size: 0.95rem;
-}
-
-.card-features {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-bottom: 1.5rem;
-}
-
-.feature-tag {
-  background: var(--vp-c-brand-soft);
-  color: var(--vp-c-brand-1);
-  padding: 0.25rem 0.75rem;
-  border-radius: 20px;
-  font-size: 0.8rem;
-  font-weight: 500;
-  border: 1px solid var(--vp-c-brand-2);
-}
-
-.card-actions {
-  display: flex;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
-.demo-link,
-.github-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.6rem 1.2rem;
-  border-radius: 8px;
-  text-decoration: none;
-  font-weight: 500;
-  font-size: 0.9rem;
-  transition: all 0.2s ease;
-  border: 1px solid transparent;
-}
-
-.demo-link {
-  background: var(--vp-c-brand-1);
-  color: white;
-}
-
-.demo-link:hover {
-  background: var(--vp-c-brand-2);
-  transform: translateY(-1px);
-}
-
-.github-link {
-  background: var(--vp-c-bg);
-  color: var(--vp-c-text-1);
-  border-color: var(--vp-c-border);
-}
-
-.github-link:hover {
-  background: var(--vp-c-bg-soft);
-  border-color: var(--vp-c-text-2);
-  transform: translateY(-1px);
-}
-
-@media (max-width: 768px) {
-  .use-cases-grid {
-    grid-template-columns: 1fr;
-    gap: 1.5rem;
-  }
-  
-  .card-actions {
-    flex-direction: column;
-  }
-  
-  .demo-link,
-  .github-link {
-    justify-content: center;
-  }
-}
-</style>
-
 <script setup>
-import { Icon } from '@iconify/vue';
+import UseCaseCard from '../components/UseCaseCard.vue';
 </script>