diff --git a/app/[locale]/(user)/components/Datasets.tsx b/app/[locale]/(user)/components/Datasets.tsx
index fd04b611..f815ea3c 100644
--- a/app/[locale]/(user)/components/Datasets.tsx
+++ b/app/[locale]/(user)/components/Datasets.tsx
@@ -18,6 +18,7 @@ import {
 import { cn } from '@/lib/utils';
 import { Icons } from '@/components/icons';
 import Styles from './datasets.module.scss';
+import { DatasetListingSkeleton } from '@/components/loading';
 
 interface Bucket {
   key: string;
@@ -81,9 +82,10 @@ const Datasets = () => {
 
           <CarouselContent className="p-4">
             {isLoading ? (
-              <div className="p-8">
-                <Spinner />
-              </div>
+              <DatasetListingSkeleton 
+              cardCount={3}  
+              cardsOnly={true}  
+            />
             ) : (
               facets &&
               facets.results.map((item: any) => (
diff --git a/app/[locale]/(user)/components/ListingComponent.tsx b/app/[locale]/(user)/components/ListingComponent.tsx
index 152a7875..b9b665cf 100644
--- a/app/[locale]/(user)/components/ListingComponent.tsx
+++ b/app/[locale]/(user)/components/ListingComponent.tsx
@@ -61,6 +61,10 @@ const stripMarkdown = (markdown: string): string => {
     .replace(/\s+/g, ' ')
     .trim();
 };
+import {
+  DatasetListingSkeleton,
+  UseCaseListingSkeleton,
+} from '@/components/loading';
 
 // Interfaces
 interface Bucket {
@@ -284,8 +288,12 @@ const ListingComponent: React.FC<ListingProps> = ({
   useEffect(() => {
     setHasMounted(true);
   }, []);
-
-  if (!hasMounted) return <Loading />;
+  if (!hasMounted) {
+  if (type === 'usecase') {
+    return <UseCaseListingSkeleton cardCount={queryParams.pageSize} />;
+  }
+  return <DatasetListingSkeleton cardCount={queryParams.pageSize} />;
+}
 
   const handlePageChange = (newPage: number) => {
     setQueryParams({ type: 'SET_CURRENT_PAGE', payload: newPage });
diff --git a/app/[locale]/(user)/components/Sectors.tsx b/app/[locale]/(user)/components/Sectors.tsx
index 04ecf203..b82eb4f5 100644
--- a/app/[locale]/(user)/components/Sectors.tsx
+++ b/app/[locale]/(user)/components/Sectors.tsx
@@ -10,6 +10,7 @@ import { useQuery } from '@tanstack/react-query'; // ✅ Ensure this is correct
 import { Button, Divider, Spinner, Text } from 'opub-ui';
 
 import { GraphQL } from '@/lib/api';
+import { SectorListingSkeleton } from '@/components/loading';
 
 const sectorDetails = graphql(`
   query SectorsList {
@@ -59,10 +60,10 @@ const Sectors = () => {
           </Button>
         </div>
       </div>
-      {isLoading ? (
-        <div className="m-4 flex justify-center">
-          <Spinner />
-        </div>
+      {isLoading ? (    
+         <SectorListingSkeleton 
+          cardCount={9}  
+        />
       ) : (
         <div className="mt-6 lg:mt-12 grid w-full grid-cols-1 gap-6 px-4 md:grid-cols-2 md:px-12 lg:grid-cols-3 lg:px-12">
           {data?.activeSectors.map((sectors: any) => (
diff --git a/app/[locale]/(user)/components/UseCases.tsx b/app/[locale]/(user)/components/UseCases.tsx
index f748671c..bdae9976 100644
--- a/app/[locale]/(user)/components/UseCases.tsx
+++ b/app/[locale]/(user)/components/UseCases.tsx
@@ -19,6 +19,7 @@ import { GraphQL } from '@/lib/api';
 import { cn, formatDate } from '@/lib/utils';
 import { Icons } from '@/components/icons';
 import Styles from './datasets.module.scss';
+import { UseCaseListingSkeleton } from '@/components/loading';
 
 const useCasesListDoc: any = graphql(`
   query TopUseCases(
@@ -125,10 +126,11 @@ const UseCasesListingPage = () => {
         <Carousel className="flex w-full justify-between">
           <CarouselPrevious />
 
-          {getUseCasesList.isLoading ? (
-            <div className="p-8">
-              <Spinner />
-            </div>
+          {getUseCasesList.isLoading ? (   
+           <UseCaseListingSkeleton 
+              cardCount={3}  
+              cardsOnly={true}  
+            />      
           ) : (
             <CarouselContent className="p-4 ">
               {getUseCasesList &&
diff --git a/app/[locale]/(user)/publishers/PublishersListingClient.tsx b/app/[locale]/(user)/publishers/PublishersListingClient.tsx
index 0ce41f92..57fa2ceb 100644
--- a/app/[locale]/(user)/publishers/PublishersListingClient.tsx
+++ b/app/[locale]/(user)/publishers/PublishersListingClient.tsx
@@ -11,6 +11,7 @@ import { cn, generateJsonLd } from '@/lib/utils';
 import BreadCrumbs from '@/components/BreadCrumbs';
 import JsonLd from '@/components/JsonLd';
 import PublisherCard from './PublisherCard';
+import { PublisherListingSkeleton } from '@/components/loading';
 
 const getAllPublishers: any = graphql(`
   query PublishersList {
@@ -171,9 +172,7 @@ const PublishersListingPage = () => {
                   </ButtonGroup>
                 </div>
                 {Details.isLoading ? (
-                  <div className="m-4 flex justify-center">
-                    <Spinner />
-                  </div>
+                  <PublisherListingSkeleton cardCount={9} />
                 ) : (
                   Details.data &&
                   Details.data.getPublishers.length > 0 && (
diff --git a/app/[locale]/(user)/sectors/SectorsListing.tsx b/app/[locale]/(user)/sectors/SectorsListing.tsx
index f7cd9d48..b385f388 100644
--- a/app/[locale]/(user)/sectors/SectorsListing.tsx
+++ b/app/[locale]/(user)/sectors/SectorsListing.tsx
@@ -18,6 +18,7 @@ import BreadCrumbs from '@/components/BreadCrumbs';
 import { ErrorPage } from '@/components/error';
 import JsonLd from '@/components/JsonLd';
 import Styles from '../datasets/dataset.module.scss';
+import { SectorListingSkeleton } from '@/components/loading';
 
 const sectorsListQueryDoc: any = graphql(`
   query SectorsLists($order: SectorOrder, $filters: SectorFilter) {
@@ -191,9 +192,7 @@ const SectorsListing = () => {
                 </div>
               </div>
               {isLoading ? (
-                <div className="m-4 flex justify-center">
-                  <Spinner />
-                </div>
+                 <SectorListingSkeleton cardCount={9} />
               ) : data && data?.activeSectors?.length > 0 ? (
                 <>
                   <div className="grid w-full grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3">
diff --git a/components/loading/Skeleton/DatasetListingSkeleton/DatasetListingSkeleton.module.css b/components/loading/Skeleton/DatasetListingSkeleton/DatasetListingSkeleton.module.css
new file mode 100644
index 00000000..5b174cb1
--- /dev/null
+++ b/components/loading/Skeleton/DatasetListingSkeleton/DatasetListingSkeleton.module.css
@@ -0,0 +1,218 @@
+/* ============================================
+   FILE: components/loading/Skeleton/DatasetListingSkeleton/DatasetListingSkeleton.module.css
+   ============================================ */
+
+.container {
+  min-height: 100vh;
+  background-color: var(--base-pure-white, #ffffff);
+}
+
+/* Search Bar */
+.searchBar {
+  height: 48px;
+  width: 100%;
+  background-color: #d1d5db;
+  border-radius: 8px;
+}
+
+/* Controls */
+.buttonGroup {
+  height: 40px;
+  width: 80px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+.sortButton {
+  height: 40px;
+  width: 40px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+.dropdown {
+  height: 40px;
+  width: 128px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+.filterButton {
+  height: 40px;
+  width: 80px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+/* Filter Sidebar */
+.filterSidebar {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  padding: 1.5rem 1rem;
+  background-color: var(--surface-default, #ffffff);
+  border-radius: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.filterHeader {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1.25rem;
+}
+
+.filterTitle {
+  height: 20px;
+  width: 64px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+.resetButton {
+  height: 20px;
+  width: 48px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+.filterList {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.filterItem {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background-color: #1f5f8d1a;
+  border-radius: 4px;
+}
+
+.filterLabel {
+  height: 20px;
+  width: 120px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+/* Card - Default Vertical Layout */
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  background-color: var(--surface-default, #ffffff);
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* Carousel Cards Container - NEW */
+.carouselContainer {
+  display: flex;
+  gap: 1rem;
+  width: 100%;
+}
+
+/* Carousel Card - Horizontal Layout for Homepage */
+.carouselCard {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  padding: 2rem;
+  background-color: var(--surface-default, #ffffff);
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  min-width: 480px;
+  min-height: 320px;
+  flex: 1;
+}
+
+.cardTitle {
+  height: 24px;
+  width: 75%;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+/* Metadata */
+.metadataRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.metadataItem {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.metadataIcon {
+  height: 20px;
+  width: 20px;
+  background-color: #d1d5db;
+  border-radius: 50%;
+}
+
+.metadataText {
+  height: 16px;
+  width: 80px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+.metadataTextSmall {
+  height: 16px;
+  width: 32px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+.metadataTextMedium {
+  height: 16px;
+  width: 64px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+/* Description */
+.descriptionLines {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.descriptionLine {
+  height: 16px;
+  width: 100%;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+.descriptionLineShort {
+  height: 16px;
+  width: 80%;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+/* Footer */
+.cardFooter {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding-top: 1rem;
+  margin-top: auto;
+  border-top: 1px solid var(--border-default, #e5e7eb);
+}
+
+.footerIcon {
+  height: 32px;
+  width: 32px;
+  background-color: #d1d5db;
+  border-radius: 50%;
+}
\ No newline at end of file
diff --git a/components/loading/Skeleton/DatasetListingSkeleton/DatasetListingSkeleton.tsx b/components/loading/Skeleton/DatasetListingSkeleton/DatasetListingSkeleton.tsx
new file mode 100644
index 00000000..558b2fc5
--- /dev/null
+++ b/components/loading/Skeleton/DatasetListingSkeleton/DatasetListingSkeleton.tsx
@@ -0,0 +1,142 @@
+// ============================================
+// FILE: components/loading/Skeleton/DatasetListingSkeleton/DatasetListingSkeleton.tsx
+// COMPLETE UPDATED VERSION WITH CAROUSEL SUPPORT
+// ============================================
+import React from 'react';
+import { ShimmerWrapper } from 'opub-ui';
+import styles from './DatasetListingSkeleton.module.css';
+
+interface DatasetListingSkeletonProps {
+  cardCount?: number;
+  filterCount?: number;
+  cardsOnly?: boolean;
+}
+
+export function DatasetListingSkeleton({
+  cardCount = 9,
+  filterCount = 12,
+  cardsOnly = false,
+}: DatasetListingSkeletonProps) {
+  // If cardsOnly is true, return carousel layout for homepage
+  if (cardsOnly) {
+    return (
+      <ShimmerWrapper>
+        <div className={styles.carouselContainer}>
+          {Array.from({ length: cardCount }).map((_, index) => (
+            <DatasetCardSkeleton key={index} carousel={true} />
+          ))}
+        </div>
+      </ShimmerWrapper>
+    );
+  }
+
+  // Full layout with filters and search for listing page
+  return (
+    <ShimmerWrapper>
+      <div className={styles.container}>
+        <div className="container">
+          <div className="mt-5 lg:mt-10">
+            <div className="row mb-16 flex gap-5">
+              {/* Filter Sidebar */}
+              <div className="hidden min-w-64 max-w-64 lg:flex">
+                <FilterSidebarSkeleton filterCount={filterCount} />
+              </div>
+
+              {/* Main Content */}
+              <div className="flex w-full flex-col gap-4 px-2">
+                {/* Search + Controls */}
+                <div className="flex flex-wrap items-center justify-between gap-5 py-2 lg:flex-nowrap">
+                  <div className="w-full md:block">
+                    <div className={styles.searchBar} />
+                  </div>
+
+                  <div className="flex flex-wrap justify-between gap-3 lg:flex-nowrap lg:justify-normal lg:gap-5">
+                    <div className="hidden items-center gap-2 lg:flex">
+                      <div className={styles.buttonGroup} />
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div className={styles.sortButton} />
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div className={styles.dropdown} />
+                    </div>
+                    <div className="flex items-center gap-2 lg:hidden">
+                      <div className={styles.filterButton} />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Cards Grid */}
+                <div className="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
+                  {Array.from({ length: cardCount }).map((_, index) => (
+                    <DatasetCardSkeleton key={index} carousel={false} />
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ShimmerWrapper>
+  );
+}
+
+function FilterSidebarSkeleton({ filterCount }: { filterCount: number }) {
+  return (
+    <div className={styles.filterSidebar}>
+      {/* Header */}
+      <div className={styles.filterHeader}>
+        <div className={styles.filterTitle} />
+        <div className={styles.resetButton} />
+      </div>
+
+      {/* Filter Items */}
+      <div className={styles.filterList}>
+        {Array.from({ length: filterCount }).map((_, index) => (
+          <div key={index} className={styles.filterItem}>
+            <div className={styles.filterLabel} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function DatasetCardSkeleton({ carousel = false }: { carousel?: boolean }) {
+  return (
+    <div className={carousel ? styles.carouselCard : styles.card}>
+      {/* Title */}
+      <div className={styles.cardTitle} />
+
+      {/* Metadata Row */}
+      <div className={styles.metadataRow}>
+        <div className={styles.metadataItem}>
+          <div className={styles.metadataIcon} />
+          <div className={styles.metadataText} />
+        </div>
+        <div className={styles.metadataItem}>
+          <div className={styles.metadataIcon} />
+          <div className={styles.metadataTextSmall} />
+        </div>
+        <div className={styles.metadataItem}>
+          <div className={styles.metadataIcon} />
+          <div className={styles.metadataTextMedium} />
+        </div>
+      </div>
+
+      {/* Description Lines */}
+      <div className={styles.descriptionLines}>
+        <div className={styles.descriptionLine} />
+        <div className={styles.descriptionLine} />
+        <div className={styles.descriptionLineShort} />
+      </div>
+
+      {/* Footer */}
+      <div className={styles.cardFooter}>
+        <div className={styles.footerIcon} />
+        <div className={styles.footerIcon} />
+        <div className={styles.footerIcon} />
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/loading/Skeleton/PublisherListingSkeleton/PublisherListingSkeleton.module.css b/components/loading/Skeleton/PublisherListingSkeleton/PublisherListingSkeleton.module.css
new file mode 100644
index 00000000..9213ae43
--- /dev/null
+++ b/components/loading/Skeleton/PublisherListingSkeleton/PublisherListingSkeleton.module.css
@@ -0,0 +1,100 @@
+/* ============================================
+   FILE: components/loading/Skeleton/PublisherListingSkeleton/PublisherListingSkeleton.module.css
+   CARDS ONLY - Simplified version
+   ============================================ */
+
+/* Cards Grid */
+.cardsGrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2.5rem;
+  margin-top: 2.5rem;
+}
+
+@media (min-width: 768px) {
+  .cardsGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .cardsGrid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 4rem;
+  }
+}
+
+/* Publisher Card */
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  border-radius: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  background-color: var(--surface-default, #ffffff);
+}
+
+.cardHeader {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.logo {
+  height: 80px;
+  width: 80px;
+  flex-shrink: 0;
+  background-color: #d1d5db;
+  border-radius: 8px;
+  border: 2px solid #e5e7eb;
+}
+
+.cardHeaderText {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.publisherName {
+  height: 20px;
+  width: 140px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+.typeBadge {
+  height: 28px;
+  width: 120px;
+  background-color: #e9eff4;
+  border-radius: 9999px;
+}
+
+/* Stats Row */
+.statsRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.statPill {
+  height: 32px;
+  width: 100px;
+  background-color: #d1d5db;
+  border-radius: 9999px;
+}
+
+/* Description */
+.description {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.descriptionLine {
+  height: 16px;
+  width: 100%;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
\ No newline at end of file
diff --git a/components/loading/Skeleton/PublisherListingSkeleton/PublisherListingSkeleton.tsx b/components/loading/Skeleton/PublisherListingSkeleton/PublisherListingSkeleton.tsx
new file mode 100644
index 00000000..50bac4df
--- /dev/null
+++ b/components/loading/Skeleton/PublisherListingSkeleton/PublisherListingSkeleton.tsx
@@ -0,0 +1,52 @@
+// ============================================
+// FILE: components/loading/Skeleton/PublisherListingSkeleton/PublisherListingSkeleton.tsx
+// CARDS ONLY - No header, no buttons
+// ============================================
+import React from 'react';
+import { ShimmerWrapper } from 'opub-ui';
+import styles from './PublisherListingSkeleton.module.css';
+
+interface PublisherListingSkeletonProps {
+  cardCount?: number;
+}
+
+export function PublisherListingSkeleton({
+  cardCount = 6,
+}: PublisherListingSkeletonProps) {
+  return (
+    <ShimmerWrapper>
+      <div className={styles.cardsGrid}>
+        {Array.from({ length: cardCount }).map((_, index) => (
+          <PublisherCardSkeleton key={index} />
+        ))}
+      </div>
+    </ShimmerWrapper>
+  );
+}
+
+function PublisherCardSkeleton() {
+  return (
+    <div className={styles.card}>
+      {/* Header: Logo + Name + Badge */}
+      <div className={styles.cardHeader}>
+        <div className={styles.logo} />
+        <div className={styles.cardHeaderText}>
+          <div className={styles.publisherName} />
+          <div className={styles.typeBadge} />
+        </div>
+      </div>
+
+      {/* Stats Pills */}
+      <div className={styles.statsRow}>
+        <div className={styles.statPill} />
+        <div className={styles.statPill} />
+      </div>
+
+      {/* Description */}
+      <div className={styles.description}>
+        <div className={styles.descriptionLine} />
+        <div className={styles.descriptionLine} />
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/loading/Skeleton/SectorListingSkeleton/SectorListingSkeleton.module.css b/components/loading/Skeleton/SectorListingSkeleton/SectorListingSkeleton.module.css
new file mode 100644
index 00000000..3824da3b
--- /dev/null
+++ b/components/loading/Skeleton/SectorListingSkeleton/SectorListingSkeleton.module.css
@@ -0,0 +1,74 @@
+/* ============================================
+   FILE: components/loading/Skeleton/SectorListingSkeleton/SectorListingSkeleton.module.css
+   CARDS ONLY - Sector cards shimmer effect
+   ============================================ */
+
+/* Cards Grid */
+.cardsGrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.5rem;
+  margin-top: 2rem;
+}
+
+@media (min-width: 768px) {
+  .cardsGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .cardsGrid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* Sector Card */
+.card {
+  display: flex;
+  padding: 2rem 1.5rem;
+  border-radius: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  background-color: var(--surface-default, #ffffff);
+  transition: transform 0.2s ease-in-out;
+}
+
+.cardContent {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  width: 100%;
+}
+
+/* Icon */
+.icon {
+  height: 80px;
+  width: 80px;
+  flex-shrink: 0;
+  background-color: #d1d5db;
+  border-radius: 12px;
+}
+
+/* Text Section */
+.textSection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  flex: 1;
+}
+
+/* Title */
+.title {
+  height: 24px;
+  width: 70%;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+/* Dataset Count */
+.datasetCount {
+  height: 18px;
+  width: 40%;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
\ No newline at end of file
diff --git a/components/loading/Skeleton/SectorListingSkeleton/SectorListingSkeleton.tsx b/components/loading/Skeleton/SectorListingSkeleton/SectorListingSkeleton.tsx
new file mode 100644
index 00000000..b93c47dd
--- /dev/null
+++ b/components/loading/Skeleton/SectorListingSkeleton/SectorListingSkeleton.tsx
@@ -0,0 +1,40 @@
+// ============================================
+// FILE: components/loading/Skeleton/SectorListingSkeleton/SectorListingSkeleton.tsx
+// CARDS ONLY - No header, no breadcrumbs
+// ============================================
+import React from 'react';
+import { ShimmerWrapper } from 'opub-ui';
+import styles from './SectorListingSkeleton.module.css';
+
+interface SectorListingSkeletonProps {
+  cardCount?: number;
+}
+
+export function SectorListingSkeleton({
+  cardCount = 9,
+}: SectorListingSkeletonProps) {
+  return (
+    <ShimmerWrapper>
+      <div className={styles.cardsGrid}>
+        {Array.from({ length: cardCount }).map((_, index) => (
+          <SectorCardSkeleton key={index} />
+        ))}
+      </div>
+    </ShimmerWrapper>
+  );
+}
+
+function SectorCardSkeleton() {
+  return (
+    <div className={styles.card}>
+      {/* Icon and Title section */}
+      <div className={styles.cardContent}>
+        <div className={styles.icon} />
+        <div className={styles.textSection}>
+          <div className={styles.title} />
+          <div className={styles.datasetCount} />
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/loading/Skeleton/UsecaseListingSkeleton/UseCaseListingSkeleton.module.css b/components/loading/Skeleton/UsecaseListingSkeleton/UseCaseListingSkeleton.module.css
new file mode 100644
index 00000000..6e0945d8
--- /dev/null
+++ b/components/loading/Skeleton/UsecaseListingSkeleton/UseCaseListingSkeleton.module.css
@@ -0,0 +1,182 @@
+/* ============================================
+   FILE: components/loading/Skeleton/UseCaseListingSkeleton/UseCaseListingSkeleton.module.css
+   ============================================ */
+
+.container {
+  min-height: 100vh;
+  background-color: var(--base-pure-white, #ffffff);
+}
+
+/* Search Bar */
+.searchBar {
+  height: 48px;
+  width: 100%;
+  background-color: #d1d5db;
+  border-radius: 8px;
+}
+
+/* Controls */
+.buttonGroup {
+  height: 40px;
+  width: 80px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+.sortButton {
+  height: 40px;
+  width: 40px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+.dropdown {
+  height: 40px;
+  width: 128px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+.filterButton {
+  height: 40px;
+  width: 80px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+/* Filter Sidebar */
+.filterSidebar {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  padding: 1.5rem 1rem;
+  background-color: var(--surface-default, #ffffff);
+  border-radius: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.filterHeader {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1.25rem;
+}
+
+.filterTitle {
+  height: 20px;
+  width: 64px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+.resetButton {
+  height: 20px;
+  width: 48px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+.filterList {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.filterItem {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background-color: #1f5f8d1a;
+  border-radius: 4px;
+}
+
+.filterLabel {
+  height: 20px;
+  width: 120px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+/* Card - WITH IMAGE */
+.card {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: var(--surface-default, #ffffff);
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* Cover Image - THIS IS THE KEY DIFFERENCE */
+.coverImage {
+  height: 192px;
+  width: 100%;
+  background-color: #d1d5db;
+}
+
+.cardContent {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+.cardTitle {
+  height: 20px;
+  width: 66%;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+/* Metadata */
+.metadataRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.metadataItem {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.metadataIcon {
+  height: 20px;
+  width: 20px;
+  background-color: #d1d5db;
+  border-radius: 50%;
+}
+
+.metadataText {
+  height: 16px;
+  width: 80px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+.metadataTextLarge {
+  height: 16px;
+  width: 96px;
+  background-color: #d1d5db;
+  border-radius: 4px;
+}
+
+/* Footer */
+.cardFooter {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding-top: 1rem;
+  margin-top: auto;
+  border-top: 1px solid var(--border-default, #e5e7eb);
+}
+
+.footerIcon {
+  height: 32px;
+  width: 32px;
+  background-color: #d1d5db;
+  border-radius: 50%;
+}
\ No newline at end of file
diff --git a/components/loading/Skeleton/UsecaseListingSkeleton/UseCaseListingSkeleton.tsx b/components/loading/Skeleton/UsecaseListingSkeleton/UseCaseListingSkeleton.tsx
new file mode 100644
index 00000000..ab4c3516
--- /dev/null
+++ b/components/loading/Skeleton/UsecaseListingSkeleton/UseCaseListingSkeleton.tsx
@@ -0,0 +1,135 @@
+// ============================================
+// FILE: components/loading/Skeleton/UseCaseListingSkeleton/UseCaseListingSkeleton.tsx
+// UPDATED: Added cardsOnly prop for carousel use
+// ============================================
+import React from 'react';
+import { ShimmerWrapper } from 'opub-ui';
+import styles from './UseCaseListingSkeleton.module.css';
+
+interface UseCaseListingSkeletonProps {
+  cardCount?: number;
+  filterCount?: number;
+  /**
+   * If true, only render cards without grid wrapper (for use in carousels)
+   */
+  cardsOnly?: boolean;
+}
+
+export function UseCaseListingSkeleton({
+  cardCount = 9,
+  filterCount = 12,
+  cardsOnly = false,
+}: UseCaseListingSkeletonProps) {
+  // If cardsOnly mode, just return the cards without any wrapper
+  if (cardsOnly) {
+    return (
+      <>
+        {Array.from({ length: cardCount }).map((_, index) => (
+          <UseCaseCardSkeleton key={index} />
+        ))}
+      </>
+    );
+  }
+
+  // Full page layout with grid
+  return (
+    <ShimmerWrapper>
+      <div className={styles.container}>
+        <div className="container">
+          <div className="mt-5 lg:mt-10">
+            <div className="row mb-16 flex gap-5">
+              {/* Filter Sidebar */}
+              <div className="hidden min-w-64 max-w-64 lg:flex">
+                <FilterSidebarSkeleton filterCount={filterCount} />
+              </div>
+
+              {/* Main Content */}
+              <div className="flex w-full flex-col gap-4 px-2">
+                {/* Search + Controls */}
+                <div className="flex flex-wrap items-center justify-between gap-5 py-2 lg:flex-nowrap">
+                  <div className="w-full md:block">
+                    <div className={styles.searchBar} />
+                  </div>
+
+                  <div className="flex flex-wrap justify-between gap-3 lg:flex-nowrap lg:justify-normal lg:gap-5">
+                    <div className="hidden items-center gap-2 lg:flex">
+                      <div className={styles.buttonGroup} />
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div className={styles.sortButton} />
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div className={styles.dropdown} />
+                    </div>
+                    <div className="flex items-center gap-2 lg:hidden">
+                      <div className={styles.filterButton} />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Cards Grid */}
+                <div className="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
+                  {Array.from({ length: cardCount }).map((_, index) => (
+                    <UseCaseCardSkeleton key={index} />
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ShimmerWrapper>
+  );
+}
+
+function FilterSidebarSkeleton({ filterCount }: { filterCount: number }) {
+  return (
+    <div className={styles.filterSidebar}>
+      <div className={styles.filterHeader}>
+        <div className={styles.filterTitle} />
+        <div className={styles.resetButton} />
+      </div>
+
+      <div className={styles.filterList}>
+        {Array.from({ length: filterCount }).map((_, index) => (
+          <div key={index} className={styles.filterItem}>
+            <div className={styles.filterLabel} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function UseCaseCardSkeleton() {
+  return (
+    <div className={styles.card}>
+      {/* Cover Image */}
+      <div className={styles.coverImage} />
+
+      {/* Content */}
+      <div className={styles.cardContent}>
+        {/* Title */}
+        <div className={styles.cardTitle} />
+
+        {/* Metadata Row */}
+        <div className={styles.metadataRow}>
+          <div className={styles.metadataItem}>
+            <div className={styles.metadataIcon} />
+            <div className={styles.metadataTextLarge} />
+          </div>
+          <div className={styles.metadataItem}>
+            <div className={styles.metadataIcon} />
+            <div className={styles.metadataText} />
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className={styles.cardFooter}>
+          <div className={styles.footerIcon} />
+          <div className={styles.footerIcon} />
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/loading/index.ts b/components/loading/index.ts
index 4b29f247..8600a9cd 100644
--- a/components/loading/index.ts
+++ b/components/loading/index.ts
@@ -1 +1,5 @@
 export { Loading } from './loading';
+export { DatasetListingSkeleton } from './Skeleton/DatasetListingSkeleton/DatasetListingSkeleton';
+export { UseCaseListingSkeleton } from './Skeleton/UsecaseListingSkeleton/UseCaseListingSkeleton';
+export { PublisherListingSkeleton } from './Skeleton/PublisherListingSkeleton/PublisherListingSkeleton';
+export { SectorListingSkeleton } from './Skeleton/SectorListingSkeleton/SectorListingSkeleton';