diff --git a/web/libs/core/src/lib/utils/feature-flags/flags.ts b/web/libs/core/src/lib/utils/feature-flags/flags.ts
index 3d98ce1413f8..9b314c1dfb50 100644
--- a/web/libs/core/src/lib/utils/feature-flags/flags.ts
+++ b/web/libs/core/src/lib/utils/feature-flags/flags.ts
@@ -30,6 +30,11 @@ export const FF_LSDV_4711 = "fflag_fix_all_lsdv_4711_cors_errors_accessing_task_
  * Enables "Enterprise Awareness" features
  */
 export const FF_LSDV_E_297 = "fflag_feat_front_lsdv_e_297_increase_oss_to_enterprise_adoption_short";
+
+/**
+ * Project list search
+ */
+export const FF_PROD_281 = "fflag_feat_front_prod_281_project_list_search_19072023_short";
 //// END OF LEGACY FLAGS ////
 
 /**
@@ -62,3 +67,8 @@ export const FF_HOMEPAGE = "fflag_all_feat_dia_1777_ls_homepage_short";
  * Sample datasets UI for the import flow
  */
 export const FF_SAMPLE_DATASETS = "fflag_feat_dia_1920_project_creation_sample_data_short";
+
+/**
+ * Optimizes the way projects list is loaded
+ */
+export const FF_USE_NEW_PROJECTS_COUNTS_API = "fflag_feat_front_optic_1351_use_new_projects_counts_api_short";
diff --git a/web/libs/core/src/lib/utils/helpers.ts b/web/libs/core/src/lib/utils/helpers.ts
index 59121dcdfdd3..110004438cd4 100644
--- a/web/libs/core/src/lib/utils/helpers.ts
+++ b/web/libs/core/src/lib/utils/helpers.ts
@@ -28,3 +28,5 @@ export const userDisplayName = (user: Record<string, string> = {}) => {
         .trim()
     : username || email;
 };
+
+export { cn } from "@humansignal/ui/shad/utils/index";
diff --git a/web/libs/ui/src/index.ts b/web/libs/ui/src/index.ts
index 152f573164c0..7056b0d4c350 100644
--- a/web/libs/ui/src/index.ts
+++ b/web/libs/ui/src/index.ts
@@ -13,3 +13,5 @@ export * from "./lib/spinner/spinner";
 export * from "./lib/space/space";
 export * from "./lib/simple-card";
 export * from "./assets/icons";
+
+export * from "./shadcn";
diff --git a/web/libs/ui/src/shad/components/ui/card.tsx b/web/libs/ui/src/shad/components/ui/card.tsx
index 4231b618cbb8..1a1406d96da7 100644
--- a/web/libs/ui/src/shad/components/ui/card.tsx
+++ b/web/libs/ui/src/shad/components/ui/card.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@humansignal/shad/utils";
+import { cnm as cn } from "@humansignal/shad/utils";
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
diff --git a/web/libs/ui/src/shad/components/ui/skeleton.tsx b/web/libs/ui/src/shad/components/ui/skeleton.tsx
new file mode 100644
index 000000000000..7b8cc560c80c
--- /dev/null
+++ b/web/libs/ui/src/shad/components/ui/skeleton.tsx
@@ -0,0 +1,25 @@
+import { cn } from "../../utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      data-testid="skeleton-loader"
+      className={cn(
+        "bg-lsNeutralBorderSubtle/50 bg-no-repeat  bg-shimmer-size bg-gradient-to-r",
+        "from-white/5 via-white/20 to-white/5",
+        "rounded-sm animate-shimmer",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+// background-image: linear-gradient(90deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 20%), rgb(255 255 255 / 5%));
+// background-size: 2em 100%;
+// background-repeat: no-repeat;
+// background-position: left -2em top 0;
+// animation: shimmer 1.3s ease infinite;
+
+export { Skeleton };
diff --git a/web/libs/ui/src/shad/utils/index.ts b/web/libs/ui/src/shad/utils/index.ts
index 365058cebd7d..08ece58eeefc 100644
--- a/web/libs/ui/src/shad/utils/index.ts
+++ b/web/libs/ui/src/shad/utils/index.ts
@@ -1,6 +1,16 @@
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * Smart merge class names
+ */
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return clsx(inputs);
+}
+
+/**
+ * Merge class names + merge optimize Tailwind classes
+ */
+export function cnm(...input: ClassValue[]) {
+  return twMerge(cn(input));
 }
diff --git a/web/libs/ui/src/shadcn.ts b/web/libs/ui/src/shadcn.ts
new file mode 100644
index 000000000000..9ffadbd12ad3
--- /dev/null
+++ b/web/libs/ui/src/shadcn.ts
@@ -0,0 +1,3 @@
+/// Raw shadcn components for re-export
+export { Badge, type BadgeProps, badgeVariants } from "./shad/components/ui/badge";
+export { Skeleton } from "./shad/components/ui/skeleton";
diff --git a/web/libs/ui/src/tailwind.config.js b/web/libs/ui/src/tailwind.config.js
index cf6ea2253f5f..f82cb31b7c73 100644
--- a/web/libs/ui/src/tailwind.config.js
+++ b/web/libs/ui/src/tailwind.config.js
@@ -174,6 +174,12 @@ module.exports = {
         // Add all border radii from tokens
         ...tokens.cornerRadius,
       },
+      backgroundPosition: {
+        "shimmer-start": "left -2em top 0",
+      },
+      backgroundSize: {
+        "shimmer-size": "2em 100%",
+      },
       keyframes: {
         line: {
           "0%, 100%": { transform: "translateY(100%)" },
@@ -187,6 +193,10 @@ module.exports = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        shimmer: {
+          from: { "background-position": "left -2em top 0" },
+          to: { "background-position": "right -2em top 0" },
+        },
       },
       animation: {
         line1: "line 3s linear infinite",
@@ -194,6 +204,7 @@ module.exports = {
         line3: "line 9s linear infinite",
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        shimmer: "shimmer 1.3s ease infinite",
       },
     },
   },