diff --git a/bun.lockb b/bun.lockb
index 8fd4ca8a..89155be2 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/src/app/(dashboard)/app/_components/module-card.tsx b/src/app/(dashboard)/app/_components/module-card.tsx
index dea4535c..637cb23b 100644
--- a/src/app/(dashboard)/app/_components/module-card.tsx
+++ b/src/app/(dashboard)/app/_components/module-card.tsx
@@ -1,5 +1,6 @@
 import { convertHexToRGBA } from '@/lib/colors';
 import { Icon, type IconNames } from '@/primitives/icon';
+import { Skeleton } from '@/primitives/skeleton';
 import Link from 'next/link';
 import colors, { zinc } from 'tailwindcss/colors';
 
@@ -41,3 +42,13 @@ export function ModuleCard({
     </li>
   );
 }
+
+ModuleCard.Skeleton = function ModuleCardSkeleton() {
+  return (
+    <div className="flex h-[138px] w-[250px] flex-col gap-2 rounded-xl border border-gray-element bg-gray-subtle p-6">
+      <Skeleton className="size-5" />
+      <Skeleton className="mt-2 h-6 w-[200px]" />
+      <Skeleton className="mt-1 h-4 w-[50px]" />
+    </div>
+  );
+};
diff --git a/src/app/(dashboard)/app/_components/recent-modules.tsx b/src/app/(dashboard)/app/_components/recent-modules.tsx
index 1ed5786a..34ff4ff9 100644
--- a/src/app/(dashboard)/app/_components/recent-modules.tsx
+++ b/src/app/(dashboard)/app/_components/recent-modules.tsx
@@ -35,6 +35,7 @@ export function RecentModules() {
               icon="Airplay"
               name="Information Security"
             />
+            <ModuleCard.Skeleton />
           </ul>
           <ScrollBar orientation="horizontal" />
         </ScrollArea>
diff --git a/src/primitives/skeleton.tsx b/src/primitives/skeleton.tsx
new file mode 100644
index 00000000..958c2f43
--- /dev/null
+++ b/src/primitives/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from '@/lib/utils';
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-gray-element', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };