diff --git a/packages/ui/components/apps/Categories.tsx b/packages/ui/components/apps/Categories.tsx
index f6e2bb7684..5bcf0a1826 100644
--- a/packages/ui/components/apps/Categories.tsx
+++ b/packages/ui/components/apps/Categories.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -37,6 +38,13 @@ export function AppStoreCategories({
             className="relative flex rounded-md"
             style={{ background: "radial-gradient(farthest-side at top right, #a2abbe 0%, #E3E3E3 100%)" }}>
             <div className="dark:bg-muted light:bg-[url('/noise.svg')] dark:from-subtle dark:to-muted w-full self-center bg-cover bg-center bg-no-repeat px-6 py-4 dark:bg-gradient-to-tr">
+              <Image
+                src={"/app-categories/" + category.name + ".svg"}
+                width={100}
+                height={100}
+                alt={category.name}
+                className="dark:invert"
+              />
               {isLocaleReady ? (
                 <h3 className="text-emphasis text-sm font-semibold capitalize">{category.name}</h3>
               ) : (