diff --git a/alpha-lab/.vitepress/theme/index.ts b/alpha-lab/.vitepress/theme/index.ts
index c464c3022..a90db229d 100644
--- a/alpha-lab/.vitepress/theme/index.ts
+++ b/alpha-lab/.vitepress/theme/index.ts
@@ -1,6 +1,7 @@
 import type { Theme } from "vitepress";
 import DefaultTheme from "vitepress/theme";
 import AlphaPageLayout from "@components/AlphaPageLayout.vue";
+import AlphaAboutLayout from "@components/AlphaAboutLayout.vue";
 import Youtube from "@components/Youtube.vue";
 import PhotoGrid from "@components/PhotoGrid.vue";
 
@@ -12,6 +13,7 @@ export default {
   enhanceApp({ app }) {
     // register your custom global components
     app.component("AlphaPageLayout", AlphaPageLayout);
+    app.component("AlphaAboutLayout", AlphaAboutLayout);
     app.component("Youtube", Youtube);
     app.component("PhotoGrid", PhotoGrid);
   },
diff --git a/alpha-lab/about/index.md b/alpha-lab/about/index.md
new file mode 100644
index 000000000..b196560c9
--- /dev/null
+++ b/alpha-lab/about/index.md
@@ -0,0 +1,14 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: AlphaAboutLayout
+sidebar: false
+title: About
+
+hero:
+  title: "About Alpha Lab"
+  tagline:
+    [
+      "Pupil Labs is made up of naturally curious people. We enjoy building prototypes, testing out novel ideas, and creating demos to explore our curiosities. We regularly speak with and learn from our users, gaining insights about what’s in demand. Sometimes, these develop into prototypes that you will find here!",
+      "Alpha Lab is not a place for official product documentation. Everything you find here should be considered a work in progress. We encourage you to read, play, and build from the ideas – hack away!",
+    ]
+---
diff --git a/alpha-lab/cards.json b/alpha-lab/cards.json
index 74af71afd..8818eb396 100644
--- a/alpha-lab/cards.json
+++ b/alpha-lab/cards.json
@@ -1,119 +1,132 @@
 [
-    {
-        "title": "Undistort Video and Gaze Data",
-        "details": "Learn how to undistort the scene camera distortions and apply it to gaze positions.",
-        "link": {
-            "text": "View",
-            "href": "/alpha-lab/undistort/"
-        },
-        "image": "/alpha-lab/undist.webp"
+  {
+    "title": "Undistort Video and Gaze Data",
+    "details": "Learn how to undistort the scene camera distortions and apply it to gaze positions.",
+    "link": {
+      "text": "View",
+      "href": "/alpha-lab/undistort/"
     },
-    {
-        "title": "Use Neon with Pupil Capture",
-        "details": "Use your Neon module as if you were using Pupil Core. Connect it to a laptop, and record using Pupil Capture.",
-        "link": {
-            "text": "View",
-            "href": "/alpha-lab/neon-with-capture/"
-        },
-        "image": "/alpha-lab/neon-capture.webp"
+    "image": "/alpha-lab/undist.webp",
+    "category": "Other"
+  },
+  {
+    "title": "Use Neon with Pupil Capture",
+    "details": "Use your Neon module as if you were using Pupil Core. Connect it to a laptop, and record using Pupil Capture.",
+    "link": {
+      "text": "View",
+      "href": "/alpha-lab/neon-with-capture/"
     },
-    {
-        "title": "Map Gaze Onto Dynamic Screen Content",
-        "details": "Map and visualise gaze onto a screen with dynamic content, e.g. a video, web browsing, or other, using Pupil Cloud's Reference Image Mapper and screen recording software.",
-        "link": {
-            "text": "View",
-            "href": "/alpha-lab/map-your-gaze-to-a-2d-screen/#map-and-visualise-gaze-onto-a-display-content-using-the-reference-image-mapper"
-        },
-        "image": "/alpha-lab/map-gaze-screen.webp"
+    "image": "/alpha-lab/neon-capture.webp",
+    "category": "Other"
+  },
+  {
+    "title": "Map Gaze Onto Dynamic Screen Content",
+    "details": "Map and visualise gaze onto a screen with dynamic content, e.g. a video, web browsing, or other, using Pupil Cloud's Reference Image Mapper and screen recording software.",
+    "link": {
+      "text": "View",
+      "href": "/alpha-lab/map-your-gaze-to-a-2d-screen/#map-and-visualise-gaze-onto-a-display-content-using-the-reference-image-mapper"
     },
-    {
-        "title": "Map Gaze Onto Body Parts",
-        "details": "Map gaze behaviour on body parts that appear in the scene video of Neon or Pupil Invisible eye tracking footage.",
-        "link": {
-            "text": "View",
-            "href": "/alpha-lab/dense-pose/#map-gaze-onto-body-parts-using-densepose"
-        },
-        "image": "/alpha-lab/map-gaze-body.webp"
+    "image": "/alpha-lab/map-gaze-screen.webp",
+    "category": "Gaze Mapping"
+  },
+  {
+    "title": "Map Gaze Onto Body Parts",
+    "details": "Map gaze behaviour on body parts that appear in the scene video of Neon or Pupil Invisible eye tracking footage.",
+    "link": {
+      "text": "View",
+      "href": "/alpha-lab/dense-pose/#map-gaze-onto-body-parts-using-densepose"
     },
-    {
-        "title": "Map Gaze Throughout an Entire Room",
-        "details": "Use Pupil Cloud's Reference Image Mapper to Map gaze onto multiple areas of an entire room as participants freely navigate around it.",
-        "link": {
-            "text": "View",
-            "href": "/alpha-lab/multiple-rim/#map-and-visualize-gaze-on-multiple-reference-images-taken-from-the-same-environment"
-        },
-        "image": "/alpha-lab/multiple-ref-mapper-enrich.webp"
+    "image": "/alpha-lab/map-gaze-body.webp",
+    "category": "Gaze Mapping"
+  },
+  {
+    "title": "Map Gaze Throughout an Entire Room",
+    "details": "Use Pupil Cloud's Reference Image Mapper to Map gaze onto multiple areas of an entire room as participants freely navigate around it.",
+    "link": {
+      "text": "View",
+      "href": "/alpha-lab/multiple-rim/#map-and-visualize-gaze-on-multiple-reference-images-taken-from-the-same-environment"
     },
-    {
-        "title": "Generate Scanpath Visualisations",
-        "details": "Generate both static and dynamic scanpath visualisations using exported data from Pupil Cloud's Reference Image Mapper.",
-        "link": {
-            "text": "View",
-            "href": "/alpha-lab/scanpath-rim/#generate-static-and-dynamic-scanpaths-with-reference-image-mapper"
-        },
-        "image": "/alpha-lab/gen-scanpath-rim.webp"
+    "image": "/alpha-lab/multiple-ref-mapper-enrich.webp",
+    "category": "Reference Image Mapper"
+  },
+  {
+    "title": "Generate Scanpath Visualisations",
+    "details": "Generate both static and dynamic scanpath visualisations using exported data from Pupil Cloud's Reference Image Mapper.",
+    "link": {
+      "text": "View",
+      "href": "/alpha-lab/scanpath-rim/#generate-static-and-dynamic-scanpaths-with-reference-image-mapper"
     },
-    {
-        "title": "Uncover Gaze Behaviour on Phones",
-        "details": "Capture and analyze users' viewing behaviour when focusing on small icons and features of mobile applications using Neon eye tracking alongside existing Cloud and Alpha Lab tools.",
-        "link": {
-            "text": "View",
-            "href": "/alpha-lab/phone-neon/#uncover-gaze-behaviour-on-phone-screens-with-neon"
-        },
-        "image": "/alpha-lab/gaze-behavior-phone-neon.webp"
+    "image": "/alpha-lab/gen-scanpath-rim.webp",
+    "category": "Reference Image Mapper"
+  },
+  {
+    "title": "Uncover Gaze Behaviour on Phones",
+    "details": "Capture and analyze users' viewing behaviour when focusing on small icons and features of mobile applications using Neon eye tracking alongside existing Cloud and Alpha Lab tools.",
+    "link": {
+      "text": "View",
+      "href": "/alpha-lab/phone-neon/#uncover-gaze-behaviour-on-phone-screens-with-neon"
     },
-    {
-        "title": "Map Gaze Onto a 3D Model of an Environment",
-        "details": "Map gaze onto a 3D model of an environment and visualise gaze patterns as 3D heatmaps using Pupil Cloud's Reference Image Mapper and Nerfstudio.",
-        "link": {
-            "text": "View",
-            "href": "/alpha-lab/nerfs/#create-3d-models-of-your-environment-using-reference-image-mapper-and-nerfstudio"
-        },
-        "image": "/alpha-lab/map-gaze-3d-nerf.webp"
+    "image": "/alpha-lab/gaze-behavior-phone-neon.webp",
+    "category": "Reference Image Mapper"
+  },
+  {
+    "title": "Map Gaze Onto a 3D Model of an Environment",
+    "details": "Map gaze onto a 3D model of an environment and visualise gaze patterns as 3D heatmaps using Pupil Cloud's Reference Image Mapper and Nerfstudio.",
+    "link": {
+      "text": "View",
+      "href": "/alpha-lab/nerfs/#create-3d-models-of-your-environment-using-reference-image-mapper-and-nerfstudio"
     },
-    {
-        "title": "Build Gaze-Contingent Assistive Applications",
-        "details": "Build your very own gaze-contingent assistive applications (such as a gaze-controlled input device) using Neon eye tracking and our real-time screen gaze package.",
-        "link": {
-            "text": "View",
-            "href": "/alpha-lab/gaze-contingency-assistive/#a-practical-guide-to-implementing-gaze-contingency-for-assistive-technology"
-        },
-        "image": "/alpha-lab/build-gaze-assistive-neon.webp"
+    "image": "/alpha-lab/map-gaze-3d-nerf.webp",
+    "category": "Gaze Mapping"
+  },
+  {
+    "title": "Build Gaze-Contingent Assistive Applications",
+    "details": "Build your very own gaze-contingent assistive applications (such as a gaze-controlled input device) using Neon eye tracking and our real-time screen gaze package.",
+    "link": {
+      "text": "View",
+      "href": "/alpha-lab/gaze-contingency-assistive/#a-practical-guide-to-implementing-gaze-contingency-for-assistive-technology"
     },
-    {
-        "title": "Detect Eye Blinks With Neon",
-        "details": "Apply Pupil Labs blink detection algorithm to Neon recordings programmatically, offline or in real-time using Pupil Labs real-time Python API.",
-        "link": {
-            "text": "View",
-            "href": "/alpha-lab/blink-detection/#detecting-eye-blinks-using-pupil-labs-blink-detection-pipeline"
-        },
-        "image": "/alpha-lab/blink.webp"
+    "image": "/alpha-lab/build-gaze-assistive-neon.webp",
+    "category": "Real-Time Applications"
+  },
+  {
+    "title": "Detect Eye Blinks With Neon",
+    "details": "Apply Pupil Labs blink detection algorithm to Neon recordings programmatically, offline or in real-time using Pupil Labs real-time Python API.",
+    "link": {
+      "text": "View",
+      "href": "/alpha-lab/blink-detection/#detecting-eye-blinks-using-pupil-labs-blink-detection-pipeline"
     },
-    {
-        "title": "Build an AI Vision Assistant",
-        "details": "Experiment with assistive scene understanding applications using GPT-4V (an extension of GPT4 that can interpret images) and Pupil Labs eye tracking.",
-        "link": {
-            "text": "View",
-            "href": "/alpha-lab/gpt4-eyes/"
-        },
-        "image": "/alpha-lab/gpt4-eyes.webp"
+    "image": "/alpha-lab/blink.webp",
+    "category": "Real-Time Applications"
+  },
+  {
+    "title": "Build an AI Vision Assistant",
+    "details": "Experiment with assistive scene understanding applications using GPT-4V (an extension of GPT4 that can interpret images) and Pupil Labs eye tracking.",
+    "link": {
+      "text": "View",
+      "href": "/alpha-lab/gpt4-eyes/"
     },
-    {
-        "title": "Automate AOI Masking in Pupil Cloud",
-        "details": "Extend the capabilities of Pupil Cloud’s AOI tool by automatically segmenting and drawing masks using natural language.",
-        "link": {
-            "text": "View",
-            "href": "/alpha-lab/gaze-metrics-in-aois/"
-        },
-        "image": "/alpha-lab/aoi-demo.webp"
+    "image": "/alpha-lab/gpt4-eyes.webp",
+    "category": "Real-Time Applications"
+  },
+  {
+    "title": "Automate AOI Masking in Pupil Cloud",
+    "details": "Extend the capabilities of Pupil Cloud’s AOI tool by automatically segmenting and drawing masks using natural language.",
+    "link": {
+      "text": "View",
+      "href": "/alpha-lab/gaze-metrics-in-aois/"
     },
-    {
-        "title": "Map Gaze Onto Facial Landmarks",
-        "details": "Map gaze onto facial landmarks using Pupil Cloud’s Face Mapper exported data.",
-        "link": {
-            "text": "View",
-            "href": "/alpha-lab/gaze-on-face/"
-        },
-        "image": "/alpha-lab/map-gaze-nadia.webp"
-    }
-]
\ No newline at end of file
+    "image": "/alpha-lab/aoi-demo.webp",
+    "category": "Reference Image Mapper"
+  },
+  {
+    "title": "Map Gaze Onto Facial Landmarks",
+    "details": "Map gaze onto facial landmarks using Pupil Cloud’s Face Mapper exported data.",
+    "link": {
+      "text": "View",
+      "href": "/alpha-lab/gaze-on-face/"
+    },
+    "image": "/alpha-lab/map-gaze-nadia.webp",
+    "category": "Gaze Mapping"
+  }
+]
diff --git a/alpha-lab/index.md b/alpha-lab/index.md
index d3da5f12f..91362c535 100644
--- a/alpha-lab/index.md
+++ b/alpha-lab/index.md
@@ -8,9 +8,7 @@ hero:
   title: "Alpha Lab"
   tagline:
     [
-      "Pupil Labs is made up of people who are curious by nature. We are researchers, designers, toolmakers, and professional tinkerers. We enjoy building quick prototypes and demos to explore our curiosities. We built Alpha  Lab so that we can have a centralized place to collect the results of our explorations and to share it with the world.",
-      "Alpha Lab is not a place for official product documentation. Everything you find here should be considered a work in progress, and may even be a bit rough around the edges. That is the nature of exploration!",
-      "We encourage you to read through the results and go further - play around, build from the ideas here, hack away!",
+      "This is a place for tinkering. We build prototypes to test out novel ideas and connect our existing tools with cutting edge tech.",
     ]
 
 cards:
diff --git a/alpha-lab/public/office.webp b/alpha-lab/public/office.webp
new file mode 100644
index 000000000..83813cbb0
Binary files /dev/null and b/alpha-lab/public/office.webp differ
diff --git a/components/AlphaAboutLayout.vue b/components/AlphaAboutLayout.vue
new file mode 100644
index 000000000..5468d7e6d
--- /dev/null
+++ b/components/AlphaAboutLayout.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+  import { useData } from "vitepress";
+  import Footer from "./Footer.vue";
+  import ArrowIcon from "./ArrowIcon.vue";
+  import BuilderIcon from "./BuilderIcon.vue";
+  import ResearchIcon from "./ResearchIcon.vue";
+  import ExpertIcon from "./ExpertIcon.vue";
+  const { frontmatter } = useData();
+
+  // @ts-ignore
+  import officeImage from "../alpha-lab/public/office.webp";
+
+  type FrontMatter = typeof frontmatter;
+
+  interface FM extends FrontMatter {
+    hero?: {
+      title?: string;
+      text?: string;
+      tagline?: string;
+    };
+  }
+
+  const fm: FM = frontmatter;
+</script>
+
+<style scoped>
+  p {
+    font-family: Inter, "Helvetica Neue", sans-serif;
+  }
+  .text-padding:not(:last-child) {
+    padding-bottom: 16px;
+  }
+  .category-chip {
+    padding: 10px 16px;
+    border-radius: 9999px;
+    color: white;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: medium;
+    font-family: Inter, "Helvetica Neue", sans-serif;
+  }
+  .category-chip:hover {
+    background-color: var(--vp-c-default-1);
+  }
+  .selected {
+    background-color: var(--vp-c-default-2);
+  }
+  .text-link-color {
+    color: var(--vp-c-brand-1);
+  }
+  .text-link-color:hover {
+    color: var(--vp-c-brand-2);
+  }
+  button {
+    @apply py-2 px-4 rounded-full flex gap-2 items-center text-sm font-medium;
+    font-family: Inter, "Helvetica Neue", sans-serif;
+  }
+
+  button.primary {
+    background-color: var(--vp-c-brand-3);
+    color: var(--vp-c-text-1);
+  }
+
+  button.primary:hover {
+    background-color: var(--vp-c-brand-2);
+  }
+
+  button.darkButton {
+    background-color: var(--vp-c-default-2);
+    color: var(--vp-c-text-1);
+  }
+
+  button.darkButton:hover {
+    background-color: var(--vp-c-default-1);
+  }
+</style>
+
+<template>
+  <div
+    class="container grid gap-6 sm:gap-12 md:gap-16 lg:gap-20 px-6 pt-9 sm:pb-12 md:pb-16 lg:pb-20 mx-auto"
+  >
+    <div class="grid gap-8">
+      <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
+        <div class="order-2 lgd:order-1 col-span-full lg:col-span-5 h-full">
+          <div>
+            <h1
+              v-if="fm.hero?.title"
+              class="text-2xl sm:text-4xl pb-4 md:pb-9 lg:pb-6 font-semibold"
+              style="color: var(--vp-c-brand-1)"
+            >
+              {{ fm.hero.title }}
+            </h1>
+            <p
+              v-if="fm.hero?.tagline"
+              v-for="tagline in fm.hero?.tagline"
+              class="text-base text-2 text-padding"
+              style="color: var(--vp-c-text-1)"
+              v-html="tagline"
+            ></p>
+          </div>
+          <div class="mt-16">
+            <!-- <hr class="mt-2 mb-8" style="border-color: var(--vp-c-divider)" /> -->
+            <p class="text-xl font-semibold mb-2">Need help?</p>
+            <p style="color: var(--vp-c-text-1)">
+              We are happy to help integrate examples into your workflow, or
+              even partner up to build something fully customized to your
+              requirements.
+            </p>
+            <div class="flex flex-wrap gap-4 mt-6 sm:mb-4 mb-0">
+              <a
+                href="https://calendly.com/pupil-labs/research-consultancy-intro"
+                target="_blank"
+                class="flex items-center gap-2 text-link-color"
+              >
+                <button class="primary">
+                  <span>Contact Us for a Consultation</span>
+                  <ArrowIcon />
+                </button>
+              </a>
+              <a
+                href="https://pupil-labs.com/products/support"
+                target="_blank"
+                class="flex items-center gap-2 text-link-color"
+              >
+                <button class="darkButton">
+                  <span>Learn More</span>
+                  <ArrowIcon />
+                </button>
+              </a>
+            </div>
+          </div>
+        </div>
+        <div
+          class="order-1 lg:order-2 lg:col-span-7 xl:col-span-6 xl:col-start-7"
+        >
+          <img
+            :src="officeImage"
+            alt="Pupil Labs Office"
+            style="object-fit: cover; object-position: right"
+            class="w-full h-full rounded-2xl"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <Footer />
+</template>
diff --git a/components/AlphaPageLayout.vue b/components/AlphaPageLayout.vue
index 8f7674ee4..47a92cf2b 100644
--- a/components/AlphaPageLayout.vue
+++ b/components/AlphaPageLayout.vue
@@ -1,39 +1,82 @@
 <script setup lang="ts">
-import { useData } from "vitepress";
-import { computed } from "vue";
-import alphaCards from "./../alpha-lab/cards.json";
-import Footer from "./Footer.vue";
-import RandomBanner from "./banner/RandomBanner.vue";
-import CardLink from "./cards/CardLink.vue";
-const { frontmatter } = useData();
+  import { useData } from "vitepress";
+  import { ref, computed } from "vue";
+  import alphaCards from "./../alpha-lab/cards.json";
+  import Footer from "./Footer.vue";
+  import CardLink from "./cards/CardLink.vue";
+  import ArrowIcon from "./ArrowIcon.vue";
+  const { frontmatter } = useData();
 
-type FrontMatter = typeof frontmatter;
+  type FrontMatter = typeof frontmatter;
 
-interface FM extends FrontMatter {
-  hero?: {
-    title?: string;
-    text?: string;
-    tagline?: string;
-  };
-}
+  interface FM extends FrontMatter {
+    hero?: {
+      title?: string;
+      text?: string;
+      tagline?: string;
+    };
+    tags?: string[];
+  }
 
-const fm: FM = frontmatter;
-const cards = computed(() => alphaCards.slice().reverse());
+  const fm: FM = frontmatter;
+
+  const cards = computed(() => alphaCards.slice().reverse());
+
+  const categories: any = cards.value.map((element) => {
+    return element.category;
+  });
+
+  const unqiueCategories: any = new Set(categories);
+  // console.log(unqiueCategories);
+
+  const category = ref(""); // initial category is empty
+
+  const filteredCards = computed(() => {
+    if (!category.value) {
+      return cards.value; // if no category is selected, return all cards
+    }
+    return cards.value.filter((card) => card.category === category.value);
+  });
 </script>
 
 <style scoped>
-.text-padding:not(:last-child) {
-  padding-bottom: 16px;
-}
+  .text-padding:not(:last-child) {
+    padding-bottom: 16px;
+  }
+  .category-chip {
+    padding: 10px 16px;
+    border-radius: 9999px;
+    color: var(--vp-c-text-1);
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    font-family: Inter, "Helvetica Neue", sans-serif;
+  }
+  .category-chip:hover {
+    background-color: var(--vp-c-default-1);
+  }
+  .selected {
+    background-color: var(--vp-c-default-2);
+  }
+  .text-link-color {
+    color: var(--vp-c-brand-1);
+  }
+  .text-link-color:hover {
+    color: var(--vp-c-brand-2);
+  }
+  a,
+  p {
+    font-family: Inter, "Helvetica Neue", sans-serif;
+  }
 </style>
 
 <template>
   <div
-    class="container grid gap-6 sm:gap-12 md:gap-16 lg:gap-20 px-6 pt-9 sm:pb-12 md:pb-16 lg:pb-20 mx-auto"
+    class="container grid gap-6 sm:gap-12 md:gap-16 lg:gap-14 px-6 pt-9 sm:pb-12 md:pb-16 lg:pb-20 mx-auto"
   >
     <div class="grid gap-8">
-      <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 items-center">
-        <div class="order-2 sm:order-1">
+      <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
+        <div class="order-2 sm:order-1 col-auto lg:col-span-5">
           <h1
             v-if="fm.hero?.title"
             class="text-2xl sm:text-4xl pb-4 md:pb-9 lg:pb-6 font-semibold"
@@ -48,20 +91,40 @@ const cards = computed(() => alphaCards.slice().reverse());
           >
             {{ tagline }}
           </p>
-        </div>
-        <div class="col-span-2 order-1 sm:order-2 flex justify-end">
-          <RandomBanner />
+          <a
+            href="/alpha-lab/about/"
+            class="flex items-center gap-2 text-link-color font-medium text-sm"
+            >More about Alpha Lab <ArrowIcon
+          /></a>
         </div>
       </div>
     </div>
     <hr style="border-color: var(--vp-c-divider)" />
+    <div style="display: flex; gap: 16px; flex-wrap: wrap">
+      <span
+        class="category-chip"
+        :class="{ selected: category === '' }"
+        @click="category = ''"
+      >
+        All Categories
+      </span>
+      <span
+        v-for="cat in unqiueCategories"
+        :key="cat"
+        class="category-chip"
+        :class="{ selected: category === cat }"
+        @click="category = cat"
+      >
+        {{ cat }}
+      </span>
+    </div>
     <div>
       <div
         v-if="cards"
-        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"
+        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-14"
       >
         <CardLink
-          v-for="(product, index) in cards"
+          v-for="(product, index) in filteredCards"
           :key="index"
           :product="product"
         />
diff --git a/components/BuilderIcon.vue b/components/BuilderIcon.vue
new file mode 100644
index 000000000..71276e4da
--- /dev/null
+++ b/components/BuilderIcon.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6 10C4.88889 10 3.94444 9.61111 3.16667 8.83333C2.38889 8.05556 2 7.11111 2 6C2 5.77778 2.01667 5.55556 2.05 5.33333C2.08333 5.11111 2.14444 4.9 2.23333 4.7C2.28889 4.58889 2.35844 4.50556 2.442 4.45C2.52556 4.39444 2.61711 4.35556 2.71667 4.33333C2.81667 4.31111 2.91956 4.314 3.02533 4.342C3.13111 4.37 3.22822 4.42822 3.31667 4.51667L5.06667 6.26667L6.26667 5.06667L4.51667 3.31667C4.42778 3.22778 4.36956 3.13067 4.342 3.02533C4.31444 2.92 4.31156 2.81711 4.33333 2.71667C4.35556 2.61667 4.39444 2.52489 4.45 2.44133C4.50556 2.35778 4.58889 2.28844 4.7 2.23333C4.9 2.14444 5.11111 2.08333 5.33333 2.05C5.55556 2.01667 5.77778 2 6 2C7.11111 2 8.05556 2.38889 8.83333 3.16667C9.61111 3.94444 10 4.88889 10 6C10 6.25556 9.97778 6.49733 9.93333 6.72533C9.88889 6.95333 9.82222 7.17822 9.73333 7.4L13.1 10.7333C13.4222 11.0556 13.5833 11.45 13.5833 11.9167C13.5833 12.3833 13.4222 12.7778 13.1 13.1C12.7778 13.4222 12.3833 13.5833 11.9167 13.5833C11.45 13.5833 11.0556 13.4167 10.7333 13.0833L7.4 9.73333C7.17778 9.82222 6.95289 9.88889 6.72533 9.93333C6.49778 9.97778 6.256 10 6 10Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/components/ExpertIcon.vue b/components/ExpertIcon.vue
new file mode 100644
index 000000000..c43db2b95
--- /dev/null
+++ b/components/ExpertIcon.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z"
+      fill="currentColor"
+    />
+    <path
+      d="M15.3394 7.45625C14.5125 6.1775 13.4397 5.09125 12.2372 4.31469C10.9069 3.45469 9.43812 3 7.99 3C6.66125 3 5.35469 3.37969 4.10656 4.12844C2.83375 4.89188 1.68062 6.00719 0.679061 7.44312C0.565994 7.60541 0.503723 7.79764 0.500162 7.9954C0.496601 8.19315 0.55191 8.3875 0.659061 8.55375C1.48437 9.84531 2.54656 10.9331 3.73031 11.6991C5.06312 12.5625 6.4975 13 7.99 13C9.44969 13 10.9216 12.5491 12.2462 11.6962C13.4481 10.9222 14.5187 9.83187 15.3425 8.5425C15.446 8.38012 15.5007 8.19146 15.5001 7.99892C15.4995 7.80638 15.4438 7.61804 15.3394 7.45625ZM8.00062 11C7.40728 11 6.82726 10.8241 6.33391 10.4944C5.84056 10.1648 5.45605 9.69623 5.22898 9.14805C5.00192 8.59987 4.94251 7.99667 5.05827 7.41473C5.17402 6.83279 5.45975 6.29824 5.8793 5.87868C6.29886 5.45912 6.83341 5.1734 7.41535 5.05764C7.9973 4.94189 8.6005 5.0013 9.14867 5.22836C9.69685 5.45542 10.1654 5.83994 10.495 6.33329C10.8247 6.82664 11.0006 7.40666 11.0006 8C10.9997 8.79537 10.6834 9.5579 10.1209 10.1203C9.55853 10.6827 8.79599 10.9991 8.00062 11Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/components/ResearchIcon.vue b/components/ResearchIcon.vue
new file mode 100644
index 000000000..5b1920c70
--- /dev/null
+++ b/components/ResearchIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.33257 7.33333C3.33257 6.80805 3.43603 6.2879 3.63705 5.8026C3.83807 5.3173 4.13271 4.87634 4.50414 4.50491C4.87558 4.13347 5.31653 3.83883 5.80184 3.63782C6.28714 3.4368 6.80728 3.33333 7.33257 3.33333C7.85786 3.33333 8.378 3.4368 8.8633 3.63782C9.34861 3.83883 9.78956 4.13347 10.161 4.50491C10.5324 4.87634 10.8271 5.3173 11.0281 5.8026C11.2291 6.2879 11.3326 6.80805 11.3326 7.33333C11.3326 8.3942 10.9111 9.41161 10.161 10.1618C9.41085 10.9119 8.39344 11.3333 7.33257 11.3333C6.2717 11.3333 5.25429 10.9119 4.50414 10.1618C3.754 9.41161 3.33257 8.3942 3.33257 7.33333ZM7.33257 2C6.48381 2.00012 5.64734 2.20281 4.89267 2.59123C4.13799 2.97964 3.48692 3.54256 2.99356 4.2332C2.5002 4.92385 2.17879 5.72226 2.05606 6.5621C1.93332 7.40194 2.0128 8.25895 2.28789 9.06189C2.56297 9.86484 3.02573 10.5905 3.63768 11.1787C4.24964 11.7668 4.99313 12.2004 5.80636 12.4434C6.61958 12.6864 7.47907 12.7318 8.31337 12.5758C9.14768 12.4199 9.93272 12.067 10.6032 11.5467L12.8612 13.8047C12.987 13.9261 13.1554 13.9933 13.3302 13.9918C13.505 13.9903 13.6722 13.9202 13.7958 13.7965C13.9194 13.6729 13.9895 13.5057 13.991 13.3309C13.9925 13.1561 13.9253 12.9877 13.8039 12.862L11.5459 10.604C12.158 9.81564 12.5365 8.87135 12.6386 7.87851C12.7406 6.88567 12.562 5.88413 12.123 4.98776C11.6841 4.0914 11.0024 3.33619 10.1556 2.80802C9.30871 2.27984 8.33064 1.99989 7.33257 2ZM7.33257 10C8.03981 10 8.71809 9.71905 9.21819 9.21895C9.71829 8.71885 9.99924 8.04058 9.99924 7.33333C9.99924 6.62609 9.71829 5.94781 9.21819 5.44772C8.71809 4.94762 8.03981 4.66667 7.33257 4.66667C6.62533 4.66667 5.94705 4.94762 5.44695 5.44772C4.94686 5.94781 4.6659 6.62609 4.6659 7.33333C4.6659 8.04058 4.94686 8.71885 5.44695 9.21895C5.94705 9.71905 6.62533 10 7.33257 10Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/components/banner/RandomBanner.vue b/components/banner/RandomBanner.vue
index 7cababd9d..d9c650793 100644
--- a/components/banner/RandomBanner.vue
+++ b/components/banner/RandomBanner.vue
@@ -24,7 +24,7 @@
       // If it's not December, pick a random banner from the 7 available banners
       const numberOfImages = 7;
       const randomImageNumber = Math.trunc(Math.random() * numberOfImages) + 1;
-      console.log(randomImageNumber);
+      // console.log(randomImageNumber);
       var randomImage = `img${randomImageNumber.toString()}`;
       var randomImageAltText = "img" + randomImageNumber.toString();
 
diff --git a/components/cards/CardLink.vue b/components/cards/CardLink.vue
index c71b02a4e..093b46786 100644
--- a/components/cards/CardLink.vue
+++ b/components/cards/CardLink.vue
@@ -10,6 +10,7 @@
       href?: string;
       target?: string;
     };
+    category?: string;
   }
 
   interface Props {
@@ -19,6 +20,15 @@
   const { product } = defineProps<Props>();
 </script>
 
+<style scoped>
+  .category-name {
+    font-size: 14px;
+    font-weight: 500;
+    font-family: Inter, "Helvetica Neue", sans-serif;
+    color: var(--vp-c-text-3);
+  }
+</style>
+
 <template>
   <a
     :href="product.link.href"
@@ -41,9 +51,19 @@
         <p v-if="product.details" class="text-2 text-sm pb-3">
           {{ product.details }}
         </p>
-        <div v-if="product.link" class="flex gap-2 items-center text-sm">
-          <span v-if="product.link.text">{{ product.link.text }}</span>
-          <ArrowIcon />
+        <div class="flex gap-2 justify-between">
+          <div v-if="product.category" class="category-name">
+            {{ product.category }}
+          </div>
+          <div
+            v-if="product.link"
+            class="flex gap-2 items-center text-sm font-medium"
+          >
+            <span v-if="product.link.text" class="font-medium">{{
+              product.link.text
+            }}</span>
+            <ArrowIcon />
+          </div>
         </div>
       </div>
     </div>