diff --git a/app/me/crowdfunding/page.tsx b/app/me/crowdfunding/page.tsx
index c062e5ab3..da91327c0 100644
--- a/app/me/crowdfunding/page.tsx
+++ b/app/me/crowdfunding/page.tsx
@@ -2,14 +2,14 @@
 
 import * as React from 'react';
 import Link from 'next/link';
-import { Plus } from 'lucide-react';
+import { Plus, AlertCircle } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
 import { getMyCrowdfundingProjects } from '@/features/projects/api';
 import { CrowdfundingCampaign } from '@/lib/api/types';
 import { useAuthStatus } from '@/hooks/use-auth';
 import { CrowdfundingDataTable } from '@/components/crowdfunding-data-table';
-import LoadingSpinner from '@/components/LoadingSpinner';
+import EmptyState from '@/components/EmptyState';
 import {
   Card,
   CardDescription,
@@ -18,8 +18,10 @@ import {
 } from '@/components/ui/card';
 
 export default function MyCrowdfundingPage() {
-  const { user } = useAuthStatus();
+  const { user, isLoading: authLoading } = useAuthStatus();
   const [data, setData] = React.useState<CrowdfundingCampaign[]>([]);
+  const [error, setError] = React.useState<string | null>(null);
+  const [hasFetched, setHasFetched] = React.useState(false);
   const [pagination, setPagination] = React.useState({
     page: 1,
     limit: 10,
@@ -31,31 +33,33 @@ export default function MyCrowdfundingPage() {
   const fetchCampaigns = React.useCallback(async (page = 1, limit = 10) => {
     try {
       setLoading(true);
+      setError(null);
       const response = await getMyCrowdfundingProjects(page, limit);
       setData(response.data.data || []);
       if (response.meta?.pagination) {
         setPagination(response.meta.pagination);
       }
-    } catch {
-      // Error handled by UI state
+    } catch (err: any) {
+      console.error('Failed to fetch crowdfunding campaigns:', err);
+      setError(err.message || 'Failed to load campaigns. Please try again.');
     } finally {
       setLoading(false);
+      setHasFetched(true);
     }
   }, []);
 
   React.useEffect(() => {
     if (user) {
       fetchCampaigns();
+    } else if (!authLoading && !user) {
+      setHasFetched(true);
+      setError('Please log in to view your campaigns.');
     }
-  }, [user, fetchCampaigns]);
+  }, [user, authLoading, fetchCampaigns]);
 
-  if (loading) {
-    return (
-      <div className='mx-auto flex h-screen items-center justify-center py-10'>
-        <LoadingSpinner size='xl' />
-      </div>
-    );
-  }
+  const isTableLoading = loading || authLoading || (!hasFetched && !error);
+  const hasEmptyState =
+    hasFetched && !isTableLoading && !error && data.length === 0;
 
   return (
     <Card className='bg-background border-border/10 container mx-auto py-10'>
@@ -82,15 +86,56 @@ export default function MyCrowdfundingPage() {
       </div>
 
       <div className='mt-6 space-y-4'>
-        <CrowdfundingDataTable
-          data={data}
-          pagination={pagination}
-          onPaginationChange={fetchCampaigns}
-          onDeleteSuccess={() =>
-            fetchCampaigns(pagination.page, pagination.limit)
-          }
-          loading={loading}
-        />
+        {error && data.length > 0 && (
+          <div className='bg-destructive/15 text-destructive flex items-center space-x-2 rounded-md p-3 text-sm'>
+            <AlertCircle className='h-4 w-4' />
+            <span>{error}</span>
+          </div>
+        )}
+
+        {error && data.length === 0 ? (
+          <div className='flex flex-col items-center justify-center space-y-4 py-16 text-center'>
+            <AlertCircle className='text-destructive h-12 w-12' />
+            <div className='space-y-2'>
+              <h3 className='text-lg font-semibold'>
+                Failed to load campaigns
+              </h3>
+              <p className='text-muted-foreground text-sm'>{error}</p>
+            </div>
+            <Button
+              onClick={() => fetchCampaigns(pagination.page, pagination.limit)}
+              variant='outline'
+            >
+              Try Again
+            </Button>
+          </div>
+        ) : hasEmptyState ? (
+          <EmptyState
+            title="You haven't created any campaigns yet"
+            description='Crowdfunding campaigns allow you to raise funds for your projects from the community. Start your first campaign today to bring your ideas to life.'
+            action={
+              <Button
+                asChild
+                className='bg-primary text-primary-foreground hover:bg-primary/90'
+              >
+                <Link href='/projects/create'>
+                  <Plus className='mr-2 h-4 w-4' />
+                  Create your first campaign
+                </Link>
+              </Button>
+            }
+          />
+        ) : (
+          <CrowdfundingDataTable
+            data={data}
+            pagination={pagination}
+            onPaginationChange={fetchCampaigns}
+            onDeleteSuccess={() =>
+              fetchCampaigns(pagination.page, pagination.limit)
+            }
+            loading={isTableLoading}
+          />
+        )}
       </div>
     </Card>
   );
diff --git a/components/crowdfunding-data-table.tsx b/components/crowdfunding-data-table.tsx
index 3d52ac81e..2cbc067b6 100644
--- a/components/crowdfunding-data-table.tsx
+++ b/components/crowdfunding-data-table.tsx
@@ -10,6 +10,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { Skeleton } from '@/components/ui/skeleton';
 import {
   ColumnFiltersState,
   PaginationState,
@@ -135,14 +136,15 @@ export function CrowdfundingDataTable({
           </TableHeader>
           <TableBody>
             {loading ? (
-              <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className='text-muted-foreground h-24 text-center'
-                >
-                  Loading campaigns...
-                </TableCell>
-              </TableRow>
+              Array.from({ length: 5 }).map((_, index) => (
+                <TableRow key={index} className='hover:bg-transparent'>
+                  {table.getVisibleLeafColumns().map(column => (
+                    <TableCell key={column.id}>
+                      <Skeleton className='h-6 w-full' />
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
             ) : table.getRowModel().rows?.length ? (
               table.getRowModel().rows.map(row => (
                 <TableRow