diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index 27bbd99f9..000000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,43 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-    node: true,
-  },
-  extends: ['eslint:recommended'],
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaVersion: 12,
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-  plugins: ['@typescript-eslint', 'react', 'react-hooks'],
-  rules: {
-    // TypeScript specific rules
-    '@typescript-eslint/no-unused-vars': 'error',
-    '@typescript-eslint/no-explicit-any': 'warn',
-
-    // React specific rules
-    'react-hooks/exhaustive-deps': 'warn',
-    'react/no-unescaped-entities': 'off', // Allow apostrophes in JSX
-
-    // General rules
-    'no-console': 'warn',
-    'prefer-const': 'error',
-    'no-var': 'error',
-  },
-  settings: {
-    react: {
-      version: 'detect',
-    },
-  },
-  ignorePatterns: [
-    'node_modules/**',
-    '.next/**',
-    'out/**',
-    'build/**',
-    'next-env.d.ts',
-  ],
-};
diff --git a/app/(landing)/about/page.tsx b/app/(landing)/about/page.tsx
index f956d5f81..92382ce7a 100644
--- a/app/(landing)/about/page.tsx
+++ b/app/(landing)/about/page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Metadata } from 'next';
 import { generatePageMetadata } from '@/lib/metadata';
 import Missionpage from '@/components/About-Mission/Missionpage';
@@ -9,7 +8,7 @@ import Timeline from '@/components/landing-page/about/timeline/Timeline';
 import TestimonialsSection from '@/components/testimonials/TestimonialsSection';
 import { testimonials } from '@/components/testimonials/data/testimonial';
 import AboutUsHero2 from './AboutUsHero2';
-import OurTeam from './OurTeam';
+// import OurTeam from './OurTeam';
 import Partners from './Partners';
 
 export const metadata: Metadata = generatePageMetadata('about');
@@ -22,7 +21,7 @@ const AboutPage = () => {
         <Missionpage />
         <AboutUsDifferent />
         <Timeline />
-        <OurTeam />
+        {/* <OurTeam /> */}
         <Partners />
       </div>
       <TestimonialsSection testimonials={testimonials} />
diff --git a/app/(landing)/hackathons/[slug]/page.tsx b/app/(landing)/hackathons/[slug]/page.tsx
index 765334b06..959d07a63 100644
--- a/app/(landing)/hackathons/[slug]/page.tsx
+++ b/app/(landing)/hackathons/[slug]/page.tsx
@@ -13,7 +13,7 @@ import { HackathonResources } from '@/components/hackathons/resources/resources'
 import SubmissionTab from '@/components/hackathons/submissions/submissionTab';
 import { HackathonDiscussions } from '@/components/hackathons/discussion/comment';
 import { TeamFormationTab } from '@/components/hackathons/team-formation/TeamFormationTab';
-import LoadingScreen from '@/components/landing-page/project/CreateProjectModal/LoadingScreen';
+import LoadingScreen from '@/features/projects/components/CreateProjectModal/LoadingScreen';
 import { useTimelineEvents } from '@/hooks/hackathon/use-timeline-events';
 import { toast } from 'sonner';
 import type { Participant } from '@/lib/api/hackathons';
diff --git a/app/(landing)/hackathons/[slug]/team-invitations/[token]/accept/page.tsx b/app/(landing)/hackathons/[slug]/team-invitations/[token]/accept/page.tsx
index b5b6fa706..8a6a064a7 100644
--- a/app/(landing)/hackathons/[slug]/team-invitations/[token]/accept/page.tsx
+++ b/app/(landing)/hackathons/[slug]/team-invitations/[token]/accept/page.tsx
@@ -72,8 +72,6 @@ const AcceptTeamInvitationPage = () => {
         }, 2000);
       }
     } catch (err: any) {
-      console.error('Failed to accept invitation:', err);
-
       const errorMessage = err?.message || 'Failed to accept invitation';
       setError(errorMessage);
 
diff --git a/app/(landing)/hackathons/preview/[orgId]/[draftId]/page.tsx b/app/(landing)/hackathons/preview/[orgId]/[draftId]/page.tsx
index 38260de13..2cc8283af 100644
--- a/app/(landing)/hackathons/preview/[orgId]/[draftId]/page.tsx
+++ b/app/(landing)/hackathons/preview/[orgId]/[draftId]/page.tsx
@@ -8,7 +8,7 @@ import { HackathonBanner } from '@/components/hackathons/hackathonBanner';
 import { HackathonNavTabs } from '@/components/hackathons/hackathonNavTabs';
 import { HackathonOverview } from '@/components/hackathons/overview/hackathonOverview';
 import { HackathonResources } from '@/components/hackathons/resources/resources';
-import LoadingScreen from '@/components/landing-page/project/CreateProjectModal/LoadingScreen';
+import LoadingScreen from '@/features/projects/components/CreateProjectModal/LoadingScreen';
 import { Badge } from '@/components/ui/badge';
 import { BoundlessButton } from '@/components/buttons';
 import type { Hackathon } from '@/lib/api/hackathons';
diff --git a/app/(landing)/me/layout.tsx b/app/(landing)/me/layout.tsx
deleted file mode 100644
index 38a6e1452..000000000
--- a/app/(landing)/me/layout.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Metadata } from 'next';
-
-export const metadata: Metadata = {
-  title: 'My Profile | Boundless',
-  description: 'View and manage your profile on Boundless',
-};
-
-export default function MeLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className='mx-auto min-h-screen max-w-[1440px] flex-1 px-5 py-5 md:px-[50px] lg:px-[100px]'>
-      {children}
-    </div>
-  );
-}
diff --git a/app/(landing)/notifications/page.tsx b/app/(landing)/notifications/page.tsx
index 14dc5a6e8..067a71879 100644
--- a/app/(landing)/notifications/page.tsx
+++ b/app/(landing)/notifications/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { useNotifications } from '@/hooks/use-notifications';
+import { useNotifications } from '@/hooks/useNotifications';
 import { useNotificationPolling } from '@/hooks/use-notification-polling';
 import { NotificationList } from '@/components/notifications/NotificationList';
 import { Button } from '@/components/ui/button';
@@ -81,7 +81,7 @@ export default function NotificationsPage() {
         <div className='mb-6 flex items-center justify-between'>
           <div>
             <h1 className='text-3xl font-bold text-white'>Notifications</h1>
-            <p className='mt-1 text-sm text-zinc-400'>
+            <div className='mt-1 text-sm text-zinc-400'>
               {loading ? (
                 <Skeleton className='h-4 w-48' />
               ) : (
@@ -89,7 +89,7 @@ export default function NotificationsPage() {
                   {unreadCount} unread of {total} total
                 </>
               )}
-            </p>
+            </div>
           </div>
           {unreadCount > 0 && !loading && (
             <Button
@@ -107,7 +107,7 @@ export default function NotificationsPage() {
           loading={loading}
           onNotificationClick={notification => {
             if (!notification.read) {
-              markNotificationAsRead([notification._id]).catch(() => {
+              markNotificationAsRead([notification.id]).catch(() => {
                 // Silently handle error - user feedback already provided
               });
             }
diff --git a/app/(landing)/organizations/[id]/hackathons/page.tsx b/app/(landing)/organizations/[id]/hackathons/page.tsx
index a70b5b816..8a324e414 100644
--- a/app/(landing)/organizations/[id]/hackathons/page.tsx
+++ b/app/(landing)/organizations/[id]/hackathons/page.tsx
@@ -95,7 +95,7 @@ export default function HackathonsPage() {
       organizationId,
       autoFetch: true,
     });
-  console.log('hackathons', hackathons);
+
   // Use the separate delete hook
   const { isDeleting, deleteHackathon } = useDeleteHackathon({
     organizationId,
@@ -119,7 +119,7 @@ export default function HackathonsPage() {
       type: 'draft' | 'hackathon';
       data: HackathonDraft | Hackathon;
     }> = [];
-    console.log({ drafts });
+
     drafts.forEach(draft => {
       if (statusFilter === 'all' || statusFilter === 'draft') {
         items.push({ type: 'draft', data: draft });
@@ -199,8 +199,8 @@ export default function HackathonsPage() {
 
     try {
       await deleteHackathon();
-    } catch (error) {
-      console.error(error);
+    } catch {
+      // Error handled by toast in deleteHackathon hook
     } finally {
       setHackathonToDelete(null);
     }
diff --git a/app/(landing)/profile/[username]/profile-data.tsx b/app/(landing)/profile/[username]/profile-data.tsx
index 02f0d5bbc..8bb25af72 100644
--- a/app/(landing)/profile/[username]/profile-data.tsx
+++ b/app/(landing)/profile/[username]/profile-data.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { getUserProfileByUsername } from '@/lib/api/auth';
-import { PublicUserProfile } from '@/types/project';
+import { PublicUserProfile } from '@/features/projects/types';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import ActivityTab from '@/components/profile/ActivityTab';
 import {
diff --git a/app/(landing)/projects/[slug]/contributions/page.tsx b/app/(landing)/projects/[slug]/contributions/page.tsx
new file mode 100644
index 000000000..f1c7f7fe2
--- /dev/null
+++ b/app/(landing)/projects/[slug]/contributions/page.tsx
@@ -0,0 +1,92 @@
+'use client';
+
+import { use, useEffect, useState } from 'react';
+import { getCrowdfundingProject } from '@/features/projects/api';
+import type { Crowdfunding } from '@/features/projects/types';
+import { ContributionsDataTable } from '@/features/projects/components/Contributions/ContributionsDataTable';
+import { ArrowLeft } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useRouter } from 'next/navigation';
+
+interface ContributionsPageProps {
+  params: Promise<{
+    slug: string;
+  }>;
+}
+
+export default function ContributionsPage({ params }: ContributionsPageProps) {
+  const router = useRouter();
+  const resolvedParams = use(params);
+  const slug = resolvedParams.slug;
+
+  const [project, setProject] = useState<Crowdfunding | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchProject = async () => {
+      try {
+        setLoading(true);
+        const data = await getCrowdfundingProject(slug);
+        setProject(data);
+      } catch {
+        // Error handled by UI state
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProject();
+  }, [slug]);
+
+  return (
+    <div className='bg-background-main-bg mx-auto flex min-h-screen max-w-[1440px] flex-col px-5 py-8 md:px-[50px] lg:px-[100px]'>
+      {/* Header */}
+      <div className='mb-8 space-y-4'>
+        <Button
+          variant='ghost'
+          onClick={() => router.back()}
+          className='-ml-2 text-[#B5B5B5] hover:bg-[#1A1A1A] hover:text-white'
+        >
+          <ArrowLeft className='mr-2 h-4 w-4' />
+          Back
+        </Button>
+
+        <div className='space-y-2'>
+          <h1 className='text-3xl font-bold text-white'>Contributions</h1>
+          {project && (
+            <div className='flex items-center gap-3'>
+              <p className='text-[#B5B5B5]'>
+                Project:{' '}
+                <span className='font-medium text-white'>
+                  {project.project.title}
+                </span>
+              </p>
+              <span className='text-gray-800'>•</span>
+              <p className='text-[#B5B5B5]'>
+                {project.contributors.length}{' '}
+                {project.contributors.length === 1
+                  ? 'Contributor'
+                  : 'Contributors'}
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className='flex-1'>
+        {loading ? (
+          <div className='flex items-center justify-center py-20'>
+            <div className='border-primary h-12 w-12 animate-spin rounded-full border-4 border-t-transparent' />
+          </div>
+        ) : project ? (
+          <ContributionsDataTable data={project.contributors} loading={false} />
+        ) : (
+          <div className='flex items-center justify-center py-20'>
+            <p className='text-gray-600'>Failed to load contributions</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/app/(landing)/projects/[id]/milestone/[milestoneId]/page.tsx b/app/(landing)/projects/[slug]/milestone/[milestoneId]/page.tsx
similarity index 52%
rename from app/(landing)/projects/[id]/milestone/[milestoneId]/page.tsx
rename to app/(landing)/projects/[slug]/milestone/[milestoneId]/page.tsx
index 015908369..7d96bdc60 100644
--- a/app/(landing)/projects/[id]/milestone/[milestoneId]/page.tsx
+++ b/app/(landing)/projects/[slug]/milestone/[milestoneId]/page.tsx
@@ -2,46 +2,68 @@ import React from 'react';
 import MilstoneOverview from '@/components/project-details/project-milestone/milestone-details/MilstoneOverview';
 import MilestoneDetails from '@/components/project-details/project-milestone/milestone-details/MilestoneDetails';
 import MilestoneLinks from '@/components/project-details/project-milestone/milestone-details/MilestoneLinks';
+import { MilestoneStatusCard } from '@/features/projects/components/Milestone/MilestoneStatusCard';
+import { MilestoneEvidence } from '@/features/projects/components/Milestone/MilestoneEvidence';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { getCrowdfundingProject } from '@/lib/api/project';
-import { Crowdfunding } from '@/types/project';
+import {
+  getCrowdfundingProject,
+  getCrowdfundingMilestone,
+} from '@/features/projects/api';
+import { Crowdfunding } from '@/features/projects/types';
 
 interface MilestonePageProps {
   params: Promise<{
-    id: string; // Project ID
-    milestoneId: string; // Milestone ID
+    slug: string; // Project slug
+    milestoneId: string; // Milestone index
   }>;
 }
 
 const MilestonePage = async ({ params }: MilestonePageProps) => {
-  const { id: projectId, milestoneId } = await params;
+  const { slug, milestoneId } = await params;
 
-  // Fetch project data
+  // Fetch project data and specific milestone
   let project: Crowdfunding | null = null;
   let milestone = null;
 
   try {
-    const crowdfundingProject = await getCrowdfundingProject(projectId);
-    project = crowdfundingProject;
+    // Fetch both project and milestone data
+    const [crowdfundingProject, milestoneData] = await Promise.all([
+      getCrowdfundingProject(slug),
+      getCrowdfundingMilestone(slug, milestoneId),
+    ]);
 
-    // Find the specific milestone
-    const foundMilestone = project?.milestones?.find(
-      m => m.id === milestoneId || m.name === milestoneId
-    );
+    project = crowdfundingProject;
 
     // Transform milestone to match component expectations
-    milestone = foundMilestone
+    milestone = milestoneData
       ? {
-          _id: foundMilestone.id || foundMilestone.name,
-          title: foundMilestone.name,
-          description: foundMilestone.description,
-          status: foundMilestone.status,
-          dueDate: foundMilestone.endDate,
-          amount: foundMilestone.amount,
+          _id: milestoneData.id || milestoneData.name,
+          title: milestoneData.name,
+          description: milestoneData.description,
+          status: milestoneData.status,
+          dueDate: milestoneData.endDate,
+          amount: milestoneData.amount,
+          // Proof and submission data (optional)
+          ...(milestoneData.submittedAt && {
+            submittedAt: milestoneData.submittedAt,
+          }),
+          ...(milestoneData.approvedAt && {
+            approvedAt: milestoneData.approvedAt,
+          }),
+          ...(milestoneData.rejectedAt && {
+            rejectedAt: milestoneData.rejectedAt,
+          }),
+          ...(milestoneData.evidence && { evidence: milestoneData.evidence }),
+          // Voting data (optional)
+          ...(milestoneData.votes && { votes: milestoneData.votes }),
+          ...(milestoneData.userHasVoted !== undefined && {
+            userHasVoted: milestoneData.userHasVoted,
+          }),
+          ...(milestoneData.userVote && { userVote: milestoneData.userVote }),
         }
       : null;
   } catch {
-    // Handle error silently
+    // Handle error silently - milestone will be null
   }
 
   // If milestone not found, show error state
@@ -74,9 +96,15 @@ const MilestonePage = async ({ params }: MilestonePageProps) => {
             >
               Details
             </TabsTrigger>
+            <TabsTrigger
+              value='proof'
+              className='data-[state=active]:border-primary rounded-none border-x-0 border-t-0 bg-transparent px-0 py-2 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 focus-visible:border-0 focus-visible:ring-0 focus-visible:outline-none data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:text-white'
+            >
+              Proof & Status
+            </TabsTrigger>
             <TabsTrigger
               value='links'
-              className='data-[state=active]:border-primary rounded-none border-x-0 border-t-0 bg-transparent px-0 py-2 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 focus-visible:border-0 focus-visible:ring-0 focus-visible:outline-none data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:text-white md:hidden'
+              className='data-[state=active]:border-primary rounded-none border-x-0 border-t-0 bg-transparent px-0 py-2 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 focus-visible:border-0 focus-visible:ring-0 focus-visible:outline-none data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:text-white'
             >
               Links
             </TabsTrigger>
@@ -85,12 +113,24 @@ const MilestonePage = async ({ params }: MilestonePageProps) => {
         <TabsContent value='details'>
           <MilestoneDetails
             milestoneId={milestoneId}
-            project={project?.project}
+            project={project}
             milestone={milestone}
           />
         </TabsContent>
+        <TabsContent value='proof' className='space-y-6 pt-6'>
+          <MilestoneStatusCard
+            status={milestone.status}
+            submittedAt={milestone.submittedAt}
+            approvedAt={milestone.approvedAt}
+            rejectedAt={milestone.rejectedAt}
+            evidence={milestone.evidence?.text}
+          />
+          {milestone.evidence && (
+            <MilestoneEvidence evidence={milestone.evidence} />
+          )}
+        </TabsContent>
         <TabsContent value='links'>
-          <MilestoneLinks project={project?.project} milestone={milestone} />
+          <MilestoneLinks project={project} milestone={milestone} />
         </TabsContent>
       </Tabs>
     </section>
diff --git a/app/(landing)/projects/[id]/page.tsx b/app/(landing)/projects/[slug]/page.tsx
similarity index 88%
rename from app/(landing)/projects/[id]/page.tsx
rename to app/(landing)/projects/[slug]/page.tsx
index 1052d5d18..2ba0f1d24 100644
--- a/app/(landing)/projects/[id]/page.tsx
+++ b/app/(landing)/projects/[slug]/page.tsx
@@ -1,22 +1,25 @@
 'use client';
 import { ProjectLayout } from '@/components/project-details/project-layout';
 import { ProjectLoading } from '@/components/project-details/project-loading';
-import { notFound } from 'next/navigation';
-import { getCrowdfundingProject } from '@/lib/api/project';
-import type { Crowdfunding } from '@/types/project';
-import { useEffect, useState } from 'react';
-import { useSearchParams } from 'next/navigation';
+import { getCrowdfundingProject } from '@/features/projects/api';
+import type { Crowdfunding } from '@/features/projects/types';
+import { use, useEffect, useState } from 'react';
+import { useSearchParams, notFound } from 'next/navigation';
 import {
   getSubmissionDetails,
   getHackathon,
   type ParticipantSubmission,
 } from '@/lib/api/hackathons';
 import type { Hackathon } from '@/lib/api/hackathons';
-import type { Milestone, TeamMember, SocialLink } from '@/types/project';
+import type {
+  Milestone,
+  TeamMember,
+  SocialLink,
+} from '@/features/projects/types';
 
 interface ProjectPageProps {
   params: Promise<{
-    id: string;
+    slug: string;
   }>;
 }
 
@@ -118,7 +121,7 @@ function ProjectContent({
   }
 
   return (
-    <div className='bg-background-main-bg mx-auto flex min-h-screen max-w-[1440px] flex-col space-y-[60px] px-5 py-5 md:space-y-[80px] md:px-[50px] lg:px-[100px]'>
+    <div className='mx-auto flex min-h-screen max-w-[1440px] flex-col space-y-[60px] px-5 py-5 md:space-y-20 md:px-[50px] lg:px-[100px]'>
       <div className='flex-1'>
         <ProjectLayout
           project={project.project}
@@ -155,16 +158,22 @@ function mapSubmissionToCrowdfunding(
   };
 
   // Map Hackathon Timeline to Milestones
-  const milestones: Milestone[] = [
+  const milestones: any[] = [
     {
       id: 'registration',
       name: 'Registration',
+      title: 'Registration',
       description: 'Registration period for the hackathon',
       amount: 0,
+      fundingPercentage: 0,
       status: getStatus(
         hackData.timeline?.registrationStart,
         hackData.timeline?.registrationEnd
       ),
+      reviewStatus: getStatus(
+        hackData.timeline?.registrationStart,
+        hackData.timeline?.registrationEnd
+      ),
       startDate:
         hackData.timeline?.registrationStart || new Date().toISOString(),
       endDate: hackData.timeline?.registrationEnd || new Date().toISOString(),
@@ -172,36 +181,54 @@ function mapSubmissionToCrowdfunding(
     {
       id: 'submission',
       name: 'Submission',
+      title: 'Submission',
       description: 'Project submission period',
       amount: 0,
+      fundingPercentage: 0,
       status: getStatus(
         hackData.timeline?.submissionStart,
         hackData.timeline?.submissionEnd
       ),
+      reviewStatus: getStatus(
+        hackData.timeline?.submissionStart,
+        hackData.timeline?.submissionEnd
+      ),
       startDate: hackData.timeline?.submissionStart || new Date().toISOString(),
       endDate: hackData.timeline?.submissionEnd || new Date().toISOString(),
     },
     {
       id: 'judging',
       name: 'Judging',
+      title: 'Judging',
       description: 'Judging period',
       amount: 0,
+      fundingPercentage: 0,
       status: getStatus(
         hackData.timeline?.judgingStart,
         hackData.timeline?.judgingEnd
       ),
+      reviewStatus: getStatus(
+        hackData.timeline?.judgingStart,
+        hackData.timeline?.judgingEnd
+      ),
       startDate: hackData.timeline?.judgingStart || new Date().toISOString(),
       endDate: hackData.timeline?.judgingEnd || new Date().toISOString(),
     },
     {
       id: 'winners',
       name: 'Winners Announced',
+      title: 'Winners Announced',
       description: 'Announcement of hackathon winners',
       amount: 0,
+      fundingPercentage: 0,
       status: getStatus(
         hackData.timeline?.winnersAnnounced,
         hackData.timeline?.winnersAnnounced
       ),
+      reviewStatus: getStatus(
+        hackData.timeline?.winnersAnnounced,
+        hackData.timeline?.winnersAnnounced
+      ),
       startDate:
         hackData.timeline?.winnersAnnounced || new Date().toISOString(),
       endDate: hackData.timeline?.winnersAnnounced || new Date().toISOString(),
@@ -263,6 +290,8 @@ function mapSubmissionToCrowdfunding(
   return {
     id: projectId,
     projectId: projectId,
+    slug: subData.slug || projectId,
+    voteGoal: 0,
     fundingGoal: 0,
     fundingRaised: 0,
     fundingCurrency: 'USD',
@@ -356,7 +385,7 @@ export default function ProjectPage({ params }: ProjectPageProps) {
   useEffect(() => {
     const getParams = async () => {
       const resolvedParams = await params;
-      setId(resolvedParams.id);
+      setId(resolvedParams.slug);
     };
     getParams();
   }, [params]);
diff --git a/app/(landing)/projects/page.tsx b/app/(landing)/projects/page.tsx
index f68ed1ac0..2e777d750 100644
--- a/app/(landing)/projects/page.tsx
+++ b/app/(landing)/projects/page.tsx
@@ -1,11 +1,16 @@
-import ProjectPageHero from '@/components/Project-Page-Hero';
-import ProjectsClient from '@/components/project/ProjectsPage';
+import React from 'react';
+import ProjectPageHero from '@/features/projects/components/ProjectPageHero';
+import ProjectsClient from '@/features/projects/components/ProjectsPage';
 
 export default function ProjectsPage() {
   return (
-    <div className='relative mx-auto min-h-screen max-w-[1440px] px-5 py-5 md:px-[50px] lg:px-[100px]'>
-      <ProjectPageHero />
-      <ProjectsClient />
+    <div className='bg-background min-h-screen'>
+      <div className='mx-auto max-w-7xl px-4 py-8 sm:px-6 md:py-12 lg:px-8'>
+        <div className='space-y-12'>
+          <ProjectPageHero />
+          <ProjectsClient />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/app/dashboard/data.json b/app/dashboard/data.json
new file mode 100644
index 000000000..ec0873641
--- /dev/null
+++ b/app/dashboard/data.json
@@ -0,0 +1,614 @@
+[
+  {
+    "id": 1,
+    "header": "Cover page",
+    "type": "Cover page",
+    "status": "In Process",
+    "target": "18",
+    "limit": "5",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 2,
+    "header": "Table of contents",
+    "type": "Table of contents",
+    "status": "Done",
+    "target": "29",
+    "limit": "24",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 3,
+    "header": "Executive summary",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "10",
+    "limit": "13",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 4,
+    "header": "Technical approach",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "27",
+    "limit": "23",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 5,
+    "header": "Design",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "2",
+    "limit": "16",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 6,
+    "header": "Capabilities",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "20",
+    "limit": "8",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 7,
+    "header": "Integration with existing systems",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "19",
+    "limit": "21",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 8,
+    "header": "Innovation and Advantages",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "25",
+    "limit": "26",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 9,
+    "header": "Overview of EMR's Innovative Solutions",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "7",
+    "limit": "23",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 10,
+    "header": "Advanced Algorithms and Machine Learning",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "30",
+    "limit": "28",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 11,
+    "header": "Adaptive Communication Protocols",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "9",
+    "limit": "31",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 12,
+    "header": "Advantages Over Current Technologies",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "12",
+    "limit": "0",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 13,
+    "header": "Past Performance",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "22",
+    "limit": "33",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 14,
+    "header": "Customer Feedback and Satisfaction Levels",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "15",
+    "limit": "34",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 15,
+    "header": "Implementation Challenges and Solutions",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "3",
+    "limit": "35",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 16,
+    "header": "Security Measures and Data Protection Policies",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "6",
+    "limit": "36",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 17,
+    "header": "Scalability and Future Proofing",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "4",
+    "limit": "37",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 18,
+    "header": "Cost-Benefit Analysis",
+    "type": "Plain language",
+    "status": "Done",
+    "target": "14",
+    "limit": "38",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 19,
+    "header": "User Training and Onboarding Experience",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "17",
+    "limit": "39",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 20,
+    "header": "Future Development Roadmap",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "11",
+    "limit": "40",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 21,
+    "header": "System Architecture Overview",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "24",
+    "limit": "18",
+    "reviewer": "Maya Johnson"
+  },
+  {
+    "id": 22,
+    "header": "Risk Management Plan",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "15",
+    "limit": "22",
+    "reviewer": "Carlos Rodriguez"
+  },
+  {
+    "id": 23,
+    "header": "Compliance Documentation",
+    "type": "Legal",
+    "status": "In Process",
+    "target": "31",
+    "limit": "27",
+    "reviewer": "Sarah Chen"
+  },
+  {
+    "id": 24,
+    "header": "API Documentation",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "8",
+    "limit": "12",
+    "reviewer": "Raj Patel"
+  },
+  {
+    "id": 25,
+    "header": "User Interface Mockups",
+    "type": "Visual",
+    "status": "In Process",
+    "target": "19",
+    "limit": "25",
+    "reviewer": "Leila Ahmadi"
+  },
+  {
+    "id": 26,
+    "header": "Database Schema",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "22",
+    "limit": "20",
+    "reviewer": "Thomas Wilson"
+  },
+  {
+    "id": 27,
+    "header": "Testing Methodology",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "17",
+    "limit": "14",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 28,
+    "header": "Deployment Strategy",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "26",
+    "limit": "30",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 29,
+    "header": "Budget Breakdown",
+    "type": "Financial",
+    "status": "In Process",
+    "target": "13",
+    "limit": "16",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 30,
+    "header": "Market Analysis",
+    "type": "Research",
+    "status": "Done",
+    "target": "29",
+    "limit": "32",
+    "reviewer": "Sophia Martinez"
+  },
+  {
+    "id": 31,
+    "header": "Competitor Comparison",
+    "type": "Research",
+    "status": "In Process",
+    "target": "21",
+    "limit": "19",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 32,
+    "header": "Maintenance Plan",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "16",
+    "limit": "23",
+    "reviewer": "Alex Thompson"
+  },
+  {
+    "id": 33,
+    "header": "User Personas",
+    "type": "Research",
+    "status": "In Process",
+    "target": "27",
+    "limit": "24",
+    "reviewer": "Nina Patel"
+  },
+  {
+    "id": 34,
+    "header": "Accessibility Compliance",
+    "type": "Legal",
+    "status": "Done",
+    "target": "18",
+    "limit": "21",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 35,
+    "header": "Performance Metrics",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "23",
+    "limit": "26",
+    "reviewer": "David Kim"
+  },
+  {
+    "id": 36,
+    "header": "Disaster Recovery Plan",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "14",
+    "limit": "17",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 37,
+    "header": "Third-party Integrations",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "25",
+    "limit": "28",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 38,
+    "header": "User Feedback Summary",
+    "type": "Research",
+    "status": "Done",
+    "target": "20",
+    "limit": "15",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 39,
+    "header": "Localization Strategy",
+    "type": "Narrative",
+    "status": "In Process",
+    "target": "12",
+    "limit": "19",
+    "reviewer": "Maria Garcia"
+  },
+  {
+    "id": 40,
+    "header": "Mobile Compatibility",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "28",
+    "limit": "31",
+    "reviewer": "James Wilson"
+  },
+  {
+    "id": 41,
+    "header": "Data Migration Plan",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "19",
+    "limit": "22",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 42,
+    "header": "Quality Assurance Protocols",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "30",
+    "limit": "33",
+    "reviewer": "Priya Singh"
+  },
+  {
+    "id": 43,
+    "header": "Stakeholder Analysis",
+    "type": "Research",
+    "status": "In Process",
+    "target": "11",
+    "limit": "14",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 44,
+    "header": "Environmental Impact Assessment",
+    "type": "Research",
+    "status": "Done",
+    "target": "24",
+    "limit": "27",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 45,
+    "header": "Intellectual Property Rights",
+    "type": "Legal",
+    "status": "In Process",
+    "target": "17",
+    "limit": "20",
+    "reviewer": "Sarah Johnson"
+  },
+  {
+    "id": 46,
+    "header": "Customer Support Framework",
+    "type": "Narrative",
+    "status": "Done",
+    "target": "22",
+    "limit": "25",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 47,
+    "header": "Version Control Strategy",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "15",
+    "limit": "18",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 48,
+    "header": "Continuous Integration Pipeline",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "26",
+    "limit": "29",
+    "reviewer": "Michael Chen"
+  },
+  {
+    "id": 49,
+    "header": "Regulatory Compliance",
+    "type": "Legal",
+    "status": "In Process",
+    "target": "13",
+    "limit": "16",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 50,
+    "header": "User Authentication System",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "28",
+    "limit": "31",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 51,
+    "header": "Data Analytics Framework",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "21",
+    "limit": "24",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 52,
+    "header": "Cloud Infrastructure",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "16",
+    "limit": "19",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 53,
+    "header": "Network Security Measures",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "29",
+    "limit": "32",
+    "reviewer": "Lisa Wong"
+  },
+  {
+    "id": 54,
+    "header": "Project Timeline",
+    "type": "Planning",
+    "status": "Done",
+    "target": "14",
+    "limit": "17",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 55,
+    "header": "Resource Allocation",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "27",
+    "limit": "30",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 56,
+    "header": "Team Structure and Roles",
+    "type": "Planning",
+    "status": "Done",
+    "target": "20",
+    "limit": "23",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 57,
+    "header": "Communication Protocols",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "15",
+    "limit": "18",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 58,
+    "header": "Success Metrics",
+    "type": "Planning",
+    "status": "Done",
+    "target": "30",
+    "limit": "33",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 59,
+    "header": "Internationalization Support",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "23",
+    "limit": "26",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 60,
+    "header": "Backup and Recovery Procedures",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "18",
+    "limit": "21",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 61,
+    "header": "Monitoring and Alerting System",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "25",
+    "limit": "28",
+    "reviewer": "Daniel Park"
+  },
+  {
+    "id": 62,
+    "header": "Code Review Guidelines",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "12",
+    "limit": "15",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 63,
+    "header": "Documentation Standards",
+    "type": "Technical content",
+    "status": "In Process",
+    "target": "27",
+    "limit": "30",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 64,
+    "header": "Release Management Process",
+    "type": "Planning",
+    "status": "Done",
+    "target": "22",
+    "limit": "25",
+    "reviewer": "Assign reviewer"
+  },
+  {
+    "id": 65,
+    "header": "Feature Prioritization Matrix",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "19",
+    "limit": "22",
+    "reviewer": "Emma Davis"
+  },
+  {
+    "id": 66,
+    "header": "Technical Debt Assessment",
+    "type": "Technical content",
+    "status": "Done",
+    "target": "24",
+    "limit": "27",
+    "reviewer": "Eddie Lake"
+  },
+  {
+    "id": 67,
+    "header": "Capacity Planning",
+    "type": "Planning",
+    "status": "In Process",
+    "target": "21",
+    "limit": "24",
+    "reviewer": "Jamik Tashpulatov"
+  },
+  {
+    "id": 68,
+    "header": "Service Level Agreements",
+    "type": "Legal",
+    "status": "Done",
+    "target": "26",
+    "limit": "29",
+    "reviewer": "Assign reviewer"
+  }
+]
diff --git a/app/dashboard/page copy.tsx b/app/dashboard/page copy.tsx
new file mode 100644
index 000000000..7546289b3
--- /dev/null
+++ b/app/dashboard/page copy.tsx	
@@ -0,0 +1,225 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import {
+  Loader2,
+  LogOut,
+  User,
+  Mail,
+  Shield,
+  CheckCircle2,
+} from 'lucide-react';
+import { authClient } from '@/lib/auth-client';
+import { useAuthActions } from '@/hooks/use-auth';
+
+export default function DashboardPage() {
+  const { data: session, isPending: sessionPending } = authClient.useSession();
+  const router = useRouter();
+  const { logout } = useAuthActions();
+
+  useEffect(() => {
+    if (!sessionPending && !session?.user) {
+      router.push('/auth?mode=signin');
+    }
+  }, [session, sessionPending, router]);
+
+  const handleSignOut = async () => {
+    await logout();
+    router.push('/');
+  };
+
+  if (sessionPending) {
+    return (
+      <div className='flex min-h-screen items-center justify-center bg-[#030303]'>
+        <div className='flex items-center space-x-3'>
+          <Loader2 className='h-6 w-6 animate-spin text-[#a7f950]' />
+          <span className='text-white/80'>Loading...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (!session?.user) {
+    return null;
+  }
+
+  return (
+    <div className='min-h-screen bg-[#030303] px-4 py-8 sm:px-6 lg:px-8'>
+      <div className='mx-auto max-w-6xl'>
+        {/* Header */}
+        <div className='mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'>
+          <div>
+            <h1 className='text-4xl font-bold text-white'>Dashboard</h1>
+            <p className='mt-2 text-sm text-white/60'>
+              Welcome back, {session.user.name || session.user.email}
+            </p>
+          </div>
+          <Button
+            onClick={handleSignOut}
+            variant='outline'
+            className='border-white/20 bg-white/5 text-white/80 transition-all duration-200 hover:border-white/30 hover:bg-white/10 hover:text-white'
+          >
+            <LogOut className='mr-2 h-4 w-4' />
+            Sign Out
+          </Button>
+        </div>
+
+        {/* Stats Cards Grid */}
+        <div className='grid gap-6 md:grid-cols-2 lg:grid-cols-3'>
+          {/* Profile Card */}
+          <Card className='group relative overflow-hidden border-white/10 bg-gradient-to-br from-white/5 via-white/5 to-transparent backdrop-blur-xl transition-all duration-300 hover:border-white/20 hover:shadow-lg hover:shadow-[#a7f950]/10'>
+            <div className='pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br from-white/5 via-transparent to-white/10 opacity-50'></div>
+            <CardHeader className='relative z-10'>
+              <CardTitle className='flex items-center text-white'>
+                <div className='mr-3 flex h-10 w-10 items-center justify-center rounded-lg bg-[#a7f950]/10'>
+                  <User className='h-5 w-5 text-[#a7f950]' />
+                </div>
+                Profile
+              </CardTitle>
+            </CardHeader>
+            <CardContent className='relative z-10'>
+              <div className='flex items-center space-x-4'>
+                <Avatar className='h-14 w-14 border-2 border-white/10'>
+                  <AvatarImage src={session.user.image || ''} />
+                  <AvatarFallback className='bg-white/10 text-white'>
+                    {session.user.name?.charAt(0) ||
+                      session.user.email.charAt(0)}
+                  </AvatarFallback>
+                </Avatar>
+                <div className='min-w-0 flex-1'>
+                  <p className='truncate font-semibold text-white'>
+                    {session.user.name || 'No name'}
+                  </p>
+                  <p className='truncate text-sm text-white/60'>
+                    {session.user.email}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Account Details Card */}
+          <Card className='group relative overflow-hidden border-white/10 bg-gradient-to-br from-white/5 via-white/5 to-transparent backdrop-blur-xl transition-all duration-300 hover:border-white/20 hover:shadow-lg hover:shadow-[#a7f950]/10'>
+            <div className='pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br from-white/5 via-transparent to-white/10 opacity-50'></div>
+            <CardHeader className='relative z-10'>
+              <CardTitle className='flex items-center text-white'>
+                <div className='mr-3 flex h-10 w-10 items-center justify-center rounded-lg bg-[#a7f950]/10'>
+                  <Mail className='h-5 w-5 text-[#a7f950]' />
+                </div>
+                Account Details
+              </CardTitle>
+            </CardHeader>
+            <CardContent className='relative z-10 space-y-3'>
+              <div className='flex flex-col gap-1'>
+                <span className='text-xs text-white/50'>User ID</span>
+                <span className='font-mono text-sm text-white/90'>
+                  {session.user.id}
+                </span>
+              </div>
+              <div className='flex flex-col gap-1'>
+                <span className='text-xs text-white/50'>Email</span>
+                <span className='text-sm text-white/90'>
+                  {session.user.email}
+                </span>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Status Card */}
+          <Card className='group relative overflow-hidden border-white/10 bg-gradient-to-br from-white/5 via-white/5 to-transparent backdrop-blur-xl transition-all duration-300 hover:border-white/20 hover:shadow-lg hover:shadow-[#a7f950]/10'>
+            <div className='pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br from-white/5 via-transparent to-white/10 opacity-50'></div>
+            <CardHeader className='relative z-10'>
+              <CardTitle className='flex items-center text-white'>
+                <div className='mr-3 flex h-10 w-10 items-center justify-center rounded-lg bg-[#a7f950]/10'>
+                  <Shield className='h-5 w-5 text-[#a7f950]' />
+                </div>
+                Status & Verification
+              </CardTitle>
+            </CardHeader>
+            <CardContent className='relative z-10 space-y-3'>
+              <div className='flex items-center justify-between'>
+                <span className='text-sm text-white/60'>Email Status</span>
+                <div className='flex items-center gap-2'>
+                  {session.user.emailVerified ? (
+                    <>
+                      <CheckCircle2 className='h-4 w-4 text-[#a7f950]' />
+                      <span className='text-sm font-medium text-[#a7f950]'>
+                        Verified
+                      </span>
+                    </>
+                  ) : (
+                    <span className='text-sm font-medium text-white/60'>
+                      Unverified
+                    </span>
+                  )}
+                </div>
+              </div>
+              <div className='flex items-center justify-between'>
+                <span className='text-sm text-white/60'>Account Status</span>
+                <div className='flex items-center gap-2'>
+                  <div className='h-2 w-2 rounded-full bg-[#a7f950]'></div>
+                  <span className='text-sm font-medium text-[#a7f950]'>
+                    Active
+                  </span>
+                </div>
+              </div>
+              {(session.user as { lastLoginMethod?: string | null })
+                ?.lastLoginMethod && (
+                <div className='flex items-center justify-between border-t border-white/10 pt-2'>
+                  <span className='text-sm text-white/60'>
+                    Last Login Method
+                  </span>
+                  <span className='text-sm font-medium text-white/90 capitalize'>
+                    {(() => {
+                      const method = (
+                        session.user as { lastLoginMethod?: string | null }
+                      ).lastLoginMethod;
+                      return method === 'google'
+                        ? 'Google'
+                        : method === 'email'
+                          ? 'Email'
+                          : method || 'N/A';
+                    })()}
+                  </span>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Welcome Card */}
+        <div className='mt-8'>
+          <Card className='group relative overflow-hidden border-white/10 bg-gradient-to-br from-white/10 via-white/5 to-transparent backdrop-blur-xl transition-all duration-300 hover:border-white/20 hover:shadow-xl hover:shadow-[#a7f950]/10'>
+            <div className='pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br from-white/10 via-transparent to-white/5 opacity-50'></div>
+            <div className='pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br from-[#a7f950]/5 via-transparent to-transparent opacity-30'></div>
+            <CardHeader className='relative z-10'>
+              <CardTitle className='text-2xl text-white'>
+                Welcome to Boundless
+              </CardTitle>
+              <CardDescription className='text-white/60'>
+                Your platform for crowdfunding and grants
+              </CardDescription>
+            </CardHeader>
+            <CardContent className='relative z-10'>
+              <p className='leading-relaxed text-white/80'>
+                This is your dashboard where you can manage your projects, view
+                contributions, and access all the features of the platform. The
+                authentication system is now working properly!
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 7546289b3..69a6c55dc 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -1,225 +1,6 @@
-'use client';
+import { DashboardContent } from '@/components/dashboard-content';
+import React from 'react';
 
-import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import {
-  Loader2,
-  LogOut,
-  User,
-  Mail,
-  Shield,
-  CheckCircle2,
-} from 'lucide-react';
-import { authClient } from '@/lib/auth-client';
-import { useAuthActions } from '@/hooks/use-auth';
-
-export default function DashboardPage() {
-  const { data: session, isPending: sessionPending } = authClient.useSession();
-  const router = useRouter();
-  const { logout } = useAuthActions();
-
-  useEffect(() => {
-    if (!sessionPending && !session?.user) {
-      router.push('/auth?mode=signin');
-    }
-  }, [session, sessionPending, router]);
-
-  const handleSignOut = async () => {
-    await logout();
-    router.push('/');
-  };
-
-  if (sessionPending) {
-    return (
-      <div className='flex min-h-screen items-center justify-center bg-[#030303]'>
-        <div className='flex items-center space-x-3'>
-          <Loader2 className='h-6 w-6 animate-spin text-[#a7f950]' />
-          <span className='text-white/80'>Loading...</span>
-        </div>
-      </div>
-    );
-  }
-
-  if (!session?.user) {
-    return null;
-  }
-
-  return (
-    <div className='min-h-screen bg-[#030303] px-4 py-8 sm:px-6 lg:px-8'>
-      <div className='mx-auto max-w-6xl'>
-        {/* Header */}
-        <div className='mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'>
-          <div>
-            <h1 className='text-4xl font-bold text-white'>Dashboard</h1>
-            <p className='mt-2 text-sm text-white/60'>
-              Welcome back, {session.user.name || session.user.email}
-            </p>
-          </div>
-          <Button
-            onClick={handleSignOut}
-            variant='outline'
-            className='border-white/20 bg-white/5 text-white/80 transition-all duration-200 hover:border-white/30 hover:bg-white/10 hover:text-white'
-          >
-            <LogOut className='mr-2 h-4 w-4' />
-            Sign Out
-          </Button>
-        </div>
-
-        {/* Stats Cards Grid */}
-        <div className='grid gap-6 md:grid-cols-2 lg:grid-cols-3'>
-          {/* Profile Card */}
-          <Card className='group relative overflow-hidden border-white/10 bg-gradient-to-br from-white/5 via-white/5 to-transparent backdrop-blur-xl transition-all duration-300 hover:border-white/20 hover:shadow-lg hover:shadow-[#a7f950]/10'>
-            <div className='pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br from-white/5 via-transparent to-white/10 opacity-50'></div>
-            <CardHeader className='relative z-10'>
-              <CardTitle className='flex items-center text-white'>
-                <div className='mr-3 flex h-10 w-10 items-center justify-center rounded-lg bg-[#a7f950]/10'>
-                  <User className='h-5 w-5 text-[#a7f950]' />
-                </div>
-                Profile
-              </CardTitle>
-            </CardHeader>
-            <CardContent className='relative z-10'>
-              <div className='flex items-center space-x-4'>
-                <Avatar className='h-14 w-14 border-2 border-white/10'>
-                  <AvatarImage src={session.user.image || ''} />
-                  <AvatarFallback className='bg-white/10 text-white'>
-                    {session.user.name?.charAt(0) ||
-                      session.user.email.charAt(0)}
-                  </AvatarFallback>
-                </Avatar>
-                <div className='min-w-0 flex-1'>
-                  <p className='truncate font-semibold text-white'>
-                    {session.user.name || 'No name'}
-                  </p>
-                  <p className='truncate text-sm text-white/60'>
-                    {session.user.email}
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Account Details Card */}
-          <Card className='group relative overflow-hidden border-white/10 bg-gradient-to-br from-white/5 via-white/5 to-transparent backdrop-blur-xl transition-all duration-300 hover:border-white/20 hover:shadow-lg hover:shadow-[#a7f950]/10'>
-            <div className='pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br from-white/5 via-transparent to-white/10 opacity-50'></div>
-            <CardHeader className='relative z-10'>
-              <CardTitle className='flex items-center text-white'>
-                <div className='mr-3 flex h-10 w-10 items-center justify-center rounded-lg bg-[#a7f950]/10'>
-                  <Mail className='h-5 w-5 text-[#a7f950]' />
-                </div>
-                Account Details
-              </CardTitle>
-            </CardHeader>
-            <CardContent className='relative z-10 space-y-3'>
-              <div className='flex flex-col gap-1'>
-                <span className='text-xs text-white/50'>User ID</span>
-                <span className='font-mono text-sm text-white/90'>
-                  {session.user.id}
-                </span>
-              </div>
-              <div className='flex flex-col gap-1'>
-                <span className='text-xs text-white/50'>Email</span>
-                <span className='text-sm text-white/90'>
-                  {session.user.email}
-                </span>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Status Card */}
-          <Card className='group relative overflow-hidden border-white/10 bg-gradient-to-br from-white/5 via-white/5 to-transparent backdrop-blur-xl transition-all duration-300 hover:border-white/20 hover:shadow-lg hover:shadow-[#a7f950]/10'>
-            <div className='pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br from-white/5 via-transparent to-white/10 opacity-50'></div>
-            <CardHeader className='relative z-10'>
-              <CardTitle className='flex items-center text-white'>
-                <div className='mr-3 flex h-10 w-10 items-center justify-center rounded-lg bg-[#a7f950]/10'>
-                  <Shield className='h-5 w-5 text-[#a7f950]' />
-                </div>
-                Status & Verification
-              </CardTitle>
-            </CardHeader>
-            <CardContent className='relative z-10 space-y-3'>
-              <div className='flex items-center justify-between'>
-                <span className='text-sm text-white/60'>Email Status</span>
-                <div className='flex items-center gap-2'>
-                  {session.user.emailVerified ? (
-                    <>
-                      <CheckCircle2 className='h-4 w-4 text-[#a7f950]' />
-                      <span className='text-sm font-medium text-[#a7f950]'>
-                        Verified
-                      </span>
-                    </>
-                  ) : (
-                    <span className='text-sm font-medium text-white/60'>
-                      Unverified
-                    </span>
-                  )}
-                </div>
-              </div>
-              <div className='flex items-center justify-between'>
-                <span className='text-sm text-white/60'>Account Status</span>
-                <div className='flex items-center gap-2'>
-                  <div className='h-2 w-2 rounded-full bg-[#a7f950]'></div>
-                  <span className='text-sm font-medium text-[#a7f950]'>
-                    Active
-                  </span>
-                </div>
-              </div>
-              {(session.user as { lastLoginMethod?: string | null })
-                ?.lastLoginMethod && (
-                <div className='flex items-center justify-between border-t border-white/10 pt-2'>
-                  <span className='text-sm text-white/60'>
-                    Last Login Method
-                  </span>
-                  <span className='text-sm font-medium text-white/90 capitalize'>
-                    {(() => {
-                      const method = (
-                        session.user as { lastLoginMethod?: string | null }
-                      ).lastLoginMethod;
-                      return method === 'google'
-                        ? 'Google'
-                        : method === 'email'
-                          ? 'Email'
-                          : method || 'N/A';
-                    })()}
-                  </span>
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Welcome Card */}
-        <div className='mt-8'>
-          <Card className='group relative overflow-hidden border-white/10 bg-gradient-to-br from-white/10 via-white/5 to-transparent backdrop-blur-xl transition-all duration-300 hover:border-white/20 hover:shadow-xl hover:shadow-[#a7f950]/10'>
-            <div className='pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br from-white/10 via-transparent to-white/5 opacity-50'></div>
-            <div className='pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br from-[#a7f950]/5 via-transparent to-transparent opacity-30'></div>
-            <CardHeader className='relative z-10'>
-              <CardTitle className='text-2xl text-white'>
-                Welcome to Boundless
-              </CardTitle>
-              <CardDescription className='text-white/60'>
-                Your platform for crowdfunding and grants
-              </CardDescription>
-            </CardHeader>
-            <CardContent className='relative z-10'>
-              <p className='leading-relaxed text-white/80'>
-                This is your dashboard where you can manage your projects, view
-                contributions, and access all the features of the platform. The
-                authentication system is now working properly!
-              </p>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    </div>
-  );
+export default function Page() {
+  return <DashboardContent />;
 }
diff --git a/app/docs/how-to-write-evidence/page.tsx b/app/docs/how-to-write-evidence/page.tsx
new file mode 100644
index 000000000..deec98664
--- /dev/null
+++ b/app/docs/how-to-write-evidence/page.tsx
@@ -0,0 +1,273 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import {
+  CheckCircle2,
+  FileText,
+  Link as LinkIcon,
+  AlertCircle,
+} from 'lucide-react';
+import Link from 'next/link';
+
+export default function HowToWriteEvidencePage() {
+  return (
+    <div className='container mx-auto max-w-4xl px-4 py-12'>
+      <div className='mb-8'>
+        <h1 className='mb-4 text-4xl font-bold'>
+          How to Write Milestone Evidence
+        </h1>
+        <p className='text-muted-foreground text-lg'>
+          A comprehensive guide to documenting your milestone achievements
+          effectively
+        </p>
+      </div>
+
+      <div className='space-y-6'>
+        {/* What is Evidence */}
+        <Card>
+          <CardHeader>
+            <CardTitle className='flex items-center gap-2'>
+              <FileText className='h-5 w-5' />
+              What is Milestone Evidence?
+            </CardTitle>
+          </CardHeader>
+          <CardContent className='space-y-4'>
+            <p>
+              Milestone evidence is documentation that proves you have completed
+              the work outlined in your milestone. It helps stakeholders,
+              contributors, and reviewers verify that the milestone objectives
+              have been met.
+            </p>
+            <Alert className='border-blue-500/30 bg-blue-500/10'>
+              <AlertDescription>
+                <strong>Pro Tip:</strong> Good evidence is specific, verifiable,
+                and clearly demonstrates progress toward your milestone goals.
+              </AlertDescription>
+            </Alert>
+          </CardContent>
+        </Card>
+
+        {/* Key Components */}
+        <Card>
+          <CardHeader>
+            <CardTitle className='flex items-center gap-2'>
+              <CheckCircle2 className='h-5 w-5' />
+              Key Components of Good Evidence
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className='space-y-4'>
+              <div className='border-primary border-l-4 pl-4'>
+                <h3 className='mb-2 font-semibold'>1. Clear Description</h3>
+                <p className='text-muted-foreground text-sm'>
+                  Explain what was accomplished in clear, concise language.
+                  Avoid jargon and assume your reader may not be familiar with
+                  technical details.
+                </p>
+              </div>
+
+              <div className='border-primary border-l-4 pl-4'>
+                <h3 className='mb-2 font-semibold'>2. Deliverables</h3>
+                <p className='text-muted-foreground text-sm'>
+                  List specific deliverables that were completed. This could
+                  include code, designs, documentation, or other tangible
+                  outputs.
+                </p>
+              </div>
+
+              <div className='border-primary border-l-4 pl-4'>
+                <h3 className='mb-2 font-semibold'>3. Supporting Links</h3>
+                <p className='text-muted-foreground text-sm'>
+                  Include relevant links to GitHub commits, pull requests,
+                  deployed demos, documents, or other resources that verify your
+                  work.
+                </p>
+              </div>
+
+              <div className='border-primary border-l-4 pl-4'>
+                <h3 className='mb-2 font-semibold'>4. Metrics & Results</h3>
+                <p className='text-muted-foreground text-sm'>
+                  When applicable, include quantifiable results such as
+                  performance improvements, test coverage, or other measurable
+                  outcomes.
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Example Template */}
+        <Card>
+          <CardHeader>
+            <CardTitle className='flex items-center gap-2'>
+              <LinkIcon className='h-5 w-5' />
+              Evidence Template
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className='bg-muted/50 space-y-4 rounded-lg p-4 font-mono text-sm'>
+              <div>
+                <p className='mb-2 font-semibold'>## Summary</p>
+                <p className='text-muted-foreground'>
+                  Brief overview of what was accomplished in this milestone.
+                </p>
+              </div>
+
+              <div>
+                <p className='mb-2 font-semibold'>## Deliverables</p>
+                <p className='text-muted-foreground'>
+                  - Implemented user authentication system
+                  <br />
+                  - Created API documentation
+                  <br />- Added unit tests with 85% coverage
+                </p>
+              </div>
+
+              <div>
+                <p className='mb-2 font-semibold'>## Links & Resources</p>
+                <p className='text-muted-foreground'>
+                  - GitHub PR: https://github.com/...
+                  <br />
+                  - Live Demo: https://demo.example.com
+                  <br />- Documentation: https://docs.example.com
+                </p>
+              </div>
+
+              <div>
+                <p className='mb-2 font-semibold'>## Results</p>
+                <p className='text-muted-foreground'>
+                  - All acceptance criteria met
+                  <br />
+                  - 20% improvement in load time
+                  <br />- Zero critical bugs in testing
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Best Practices */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Best Practices</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ul className='space-y-3'>
+              <li className='flex items-start gap-3'>
+                <CheckCircle2 className='mt-0.5 h-5 w-5 shrink-0 text-green-500' />
+                <div>
+                  <p className='font-semibold'>Be Specific</p>
+                  <p className='text-muted-foreground text-sm'>
+                    Provide concrete examples and specific details rather than
+                    vague statements
+                  </p>
+                </div>
+              </li>
+              <li className='flex items-start gap-3'>
+                <CheckCircle2 className='mt-0.5 h-5 w-5 shrink-0 text-green-500' />
+                <div>
+                  <p className='font-semibold'>Include Proof</p>
+                  <p className='text-muted-foreground text-sm'>
+                    Always link to verifiable sources like code repositories,
+                    demos, or documents
+                  </p>
+                </div>
+              </li>
+              <li className='flex items-start gap-3'>
+                <CheckCircle2 className='mt-0.5 h-5 w-5 shrink-0 text-green-500' />
+                <div>
+                  <p className='font-semibold'>Keep It Professional</p>
+                  <p className='text-muted-foreground text-sm'>
+                    Use clear, professional language and proper formatting
+                  </p>
+                </div>
+              </li>
+              <li className='flex items-start gap-3'>
+                <CheckCircle2 className='mt-0.5 h-5 w-5 shrink-0 text-green-500' />
+                <div>
+                  <p className='font-semibold'>Address Challenges</p>
+                  <p className='text-muted-foreground text-sm'>
+                    If you faced obstacles, briefly mention them and how you
+                    overcame them
+                  </p>
+                </div>
+              </li>
+            </ul>
+          </CardContent>
+        </Card>
+
+        {/* What to Avoid */}
+        <Card>
+          <CardHeader>
+            <CardTitle className='flex items-center gap-2'>
+              <AlertCircle className='h-5 w-5 text-amber-500' />
+              What to Avoid
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ul className='space-y-3'>
+              <li className='flex items-start gap-3'>
+                <span className='mt-0.5 font-bold text-red-500'>✗</span>
+                <div>
+                  <p className='font-semibold'>Vague Descriptions</p>
+                  <p className='text-muted-foreground text-sm'>
+                    &quot;Made some progress&quot; or &quot;Did some work&quot;
+                    don&apos;t provide useful information
+                  </p>
+                </div>
+              </li>
+              <li className='flex items-start gap-3'>
+                <span className='mt-0.5 font-bold text-red-500'>✗</span>
+                <div>
+                  <p className='font-semibold'>Missing Links</p>
+                  <p className='text-muted-foreground text-sm'>
+                    Evidence without verifiable links makes it difficult to
+                    review your work
+                  </p>
+                </div>
+              </li>
+              <li className='flex items-start gap-3'>
+                <span className='mt-0.5 font-bold text-red-500'>✗</span>
+                <div>
+                  <p className='font-semibold'>Excessive Length</p>
+                  <p className='text-muted-foreground text-sm'>
+                    Keep it concise - reviewers appreciate brevity and clarity
+                  </p>
+                </div>
+              </li>
+              <li className='flex items-start gap-3'>
+                <span className='mt-0.5 font-bold text-red-500'>✗</span>
+                <div>
+                  <p className='font-semibold'>Broken Links</p>
+                  <p className='text-muted-foreground text-sm'>
+                    Always verify that your links work before submitting
+                  </p>
+                </div>
+              </li>
+            </ul>
+          </CardContent>
+        </Card>
+
+        {/* Call to Action */}
+        <Card className='bg-primary/10 border-primary/30'>
+          <CardContent className='pt-6'>
+            <div className='space-y-4 text-center'>
+              <h3 className='text-xl font-semibold'>
+                Ready to Submit Evidence?
+              </h3>
+              <p className='text-muted-foreground'>
+                Use the template and guidelines above to document your milestone
+                achievements.
+              </p>
+              <Link
+                href='/me/crowdfunding'
+                className='bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium'
+              >
+                Go to My Campaigns
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/app/globals.css b/app/globals.css
index 83de59016..7bddde3b2 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -206,42 +206,47 @@ body {
 
 :root {
   --radius: 0.625rem;
-  --background: #030303;
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.145 0 0);
   --primary: #a7f950;
-  --primary-foreground: #020502;
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --stepper-foreground: oklch(0.2046 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
   --stepper-border: oklch(0.2264 0 0);
   --stepper-border-active: oklch(0.3501 0.0381 190.35);
   --stepper-text-inactive: oklch(0.7731 0 0);
   --placeholder: oklch(0.6567 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-foreground: #fff;
+  --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
   --office-brown: #e4dbdb;
   --office-brown-darker: #645d5d;
   --warning-orange: #fbe2b7;
diff --git a/app/me/crowdfunding/[slug]/components/CampaignBanner.tsx b/app/me/crowdfunding/[slug]/components/CampaignBanner.tsx
new file mode 100644
index 000000000..09e9215b5
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/components/CampaignBanner.tsx
@@ -0,0 +1,27 @@
+import { Card, CardContent } from '@/components/ui/card';
+import Image from 'next/image';
+
+interface CampaignBannerProps {
+  project: {
+    banner: string | null;
+    title: string;
+  };
+}
+
+export function CampaignBanner({ project }: CampaignBannerProps) {
+  if (!project.banner) return null;
+
+  return (
+    <Card className='bg-background border-border/10'>
+      <CardContent className='p-0'>
+        <Image
+          height={256}
+          width={256}
+          src={project.banner}
+          alt={project.title}
+          className='h-64 w-full rounded-lg object-cover'
+        />
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/app/me/crowdfunding/[slug]/components/CampaignTabs.tsx b/app/me/crowdfunding/[slug]/components/CampaignTabs.tsx
new file mode 100644
index 000000000..0e2f4a6a1
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/components/CampaignTabs.tsx
@@ -0,0 +1,74 @@
+import { Target, DollarSign, Users } from 'lucide-react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { CampaignTeamTab } from '@/components/crowdfunding/campaign-team-tab';
+import { CampaignMilestonesTab } from '@/components/crowdfunding/campaign-milestones-tab';
+import { CampaignCommentsTab } from '@/components/crowdfunding/campaign-comments-tab';
+import { CampaignFundingTab } from '@/components/crowdfunding/campaign-funding-tab';
+import { Crowdfunding } from '@/features/projects/types';
+
+interface CampaignTabsProps {
+  campaign: Crowdfunding;
+}
+
+export function CampaignTabs({ campaign }: CampaignTabsProps) {
+  return (
+    <Tabs defaultValue='team' className='w-full'>
+      <TabsList className='grid w-full grid-cols-4'>
+        <TabsTrigger value='team' className='flex items-center gap-2'>
+          <Users className='h-4 w-4' />
+          Team
+        </TabsTrigger>
+        <TabsTrigger value='milestones' className='flex items-center gap-2'>
+          <Target className='h-4 w-4' />
+          Milestones
+        </TabsTrigger>
+        <TabsTrigger value='comments' className='flex items-center gap-2'>
+          <svg
+            className='h-4 w-4'
+            fill='none'
+            stroke='currentColor'
+            viewBox='0 0 24 24'
+          >
+            <path
+              strokeLinecap='round'
+              strokeLinejoin='round'
+              strokeWidth={2}
+              d='M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'
+            />
+          </svg>
+          Comments
+        </TabsTrigger>
+        <TabsTrigger value='funding' className='flex items-center gap-2'>
+          <DollarSign className='h-4 w-4' />
+          Funding
+        </TabsTrigger>
+      </TabsList>
+
+      <TabsContent value='team' className='mt-6'>
+        <CampaignTeamTab team={campaign.team || []} />
+      </TabsContent>
+
+      <TabsContent value='milestones' className='mt-6'>
+        <CampaignMilestonesTab
+          milestones={campaign.milestones || []}
+          fundingRaised={campaign.fundingRaised}
+          fundingCurrency={campaign.fundingCurrency}
+        />
+      </TabsContent>
+
+      <TabsContent value='comments' className='mt-6'>
+        <CampaignCommentsTab campaignId={campaign.id} />
+      </TabsContent>
+
+      <TabsContent value='funding' className='mt-6'>
+        <CampaignFundingTab
+          contributors={campaign.contributors || []}
+          fundingRaised={campaign.fundingRaised}
+          fundingGoal={campaign.fundingGoal}
+          fundingCurrency={campaign.fundingCurrency}
+          fundingEndDate={campaign.fundingEndDate}
+        />
+      </TabsContent>
+    </Tabs>
+  );
+}
diff --git a/app/me/crowdfunding/[slug]/components/FundingProgress.tsx b/app/me/crowdfunding/[slug]/components/FundingProgress.tsx
new file mode 100644
index 000000000..188ced83b
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/components/FundingProgress.tsx
@@ -0,0 +1,76 @@
+import { format } from 'date-fns';
+import { Target } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { Separator } from '@/components/ui/separator';
+import { Crowdfunding } from '@/features/projects/types';
+
+interface FundingProgressProps {
+  campaign: Crowdfunding;
+}
+
+export function FundingProgress({ campaign }: FundingProgressProps) {
+  const fundingProgress =
+    campaign.fundingGoal > 0
+      ? (campaign.fundingRaised / campaign.fundingGoal) * 100
+      : 0;
+  const daysLeft = Math.ceil(
+    (new Date(campaign.fundingEndDate).getTime() - new Date().getTime()) /
+      (1000 * 60 * 60 * 24)
+  );
+
+  return (
+    <Card className='bg-background border-border/10'>
+      <CardHeader>
+        <CardTitle className='flex items-center gap-2 text-white'>
+          <Target className='h-5 w-5' />
+          Funding Progress
+        </CardTitle>
+      </CardHeader>
+      <CardContent className='space-y-4'>
+        <div className='text-center'>
+          <div className='text-3xl font-bold text-white'>
+            ${campaign.fundingRaised.toLocaleString()}
+          </div>
+          <div className='text-white/60'>
+            of ${campaign.fundingGoal.toLocaleString()} goal
+          </div>
+        </div>
+
+        <Progress value={fundingProgress} className='h-3' />
+
+        <div className='grid grid-cols-2 gap-4 text-center'>
+          <div>
+            <div className='text-lg font-semibold text-white'>
+              {fundingProgress.toFixed(1)}%
+            </div>
+            <div className='text-sm text-white/60'>Funded</div>
+          </div>
+          <div>
+            <div className='text-lg font-semibold text-white'>
+              {daysLeft > 0 ? daysLeft : 0}
+            </div>
+            <div className='text-sm text-white/60'>
+              {daysLeft > 0 ? 'Days Left' : 'Ended'}
+            </div>
+          </div>
+        </div>
+
+        <Separator className='bg-border' />
+
+        <div className='space-y-2'>
+          <div className='flex items-center justify-between text-sm'>
+            <span className='text-white/60'>Currency</span>
+            <span className='text-white'>{campaign.fundingCurrency}</span>
+          </div>
+          <div className='flex items-center justify-between text-sm'>
+            <span className='text-white/60'>End Date</span>
+            <span className='text-white'>
+              {format(new Date(campaign.fundingEndDate), 'MMM dd, yyyy')}
+            </span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/app/me/crowdfunding/[slug]/components/ProjectDetails.tsx b/app/me/crowdfunding/[slug]/components/ProjectDetails.tsx
new file mode 100644
index 000000000..af759ba25
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/components/ProjectDetails.tsx
@@ -0,0 +1,89 @@
+import { format } from 'date-fns';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { useMarkdown } from '@/hooks/use-markdown';
+import { Crowdfunding } from '@/features/projects/types';
+import Image from 'next/image';
+
+interface ProjectDetailsProps {
+  campaign: Crowdfunding;
+  project: Crowdfunding['project'];
+}
+
+export function ProjectDetails({ campaign, project }: ProjectDetailsProps) {
+  const { styledContent } = useMarkdown(project.description || '', {
+    breaks: true,
+    gfm: true,
+    pedantic: true,
+    loadingDelay: 0,
+  });
+
+  const getStatusColor = (status: string) => {
+    switch (status.toLowerCase()) {
+      case 'active':
+      case 'funding':
+        return 'bg-green-500/20 text-green-400 border-green-500/30';
+      case 'completed':
+        return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+      case 'draft':
+        return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
+      default:
+        return 'bg-gray-500/20 text-gray-400 border-gray-500/30';
+    }
+  };
+
+  return (
+    <Card className='bg-background border-border/10'>
+      <CardHeader>
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center gap-3'>
+            {project.logo && (
+              <Image
+                height={48}
+                width={48}
+                src={project.logo}
+                alt={project.title}
+                className='h-12 w-12 rounded-lg object-cover'
+              />
+            )}
+            <div>
+              <CardTitle className='text-white'>{project.title}</CardTitle>
+              <CardDescription className='text-white/70'>
+                Created {format(new Date(campaign.createdAt), 'MMM dd, yyyy')}
+              </CardDescription>
+            </div>
+          </div>
+          <Badge variant='outline' className={getStatusColor(project.status)}>
+            {project.status}
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent className='space-y-4'>
+        <div>
+          <h3 className='mb-2 text-lg font-semibold text-white'>Description</h3>
+          <div className='leading-relaxed text-white/80'>{styledContent}</div>
+        </div>
+
+        {project.details && (
+          <div>
+            <h3 className='mb-2 text-lg font-semibold text-white'>Details</h3>
+            <p className='leading-relaxed text-white/80'>{project.details}</p>
+          </div>
+        )}
+
+        {project.vision && (
+          <div>
+            <h3 className='mb-2 text-lg font-semibold text-white'>Vision</h3>
+            <p className='leading-relaxed text-white/80'>{project.vision}</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/app/me/crowdfunding/[slug]/components/ProjectLinks.tsx b/app/me/crowdfunding/[slug]/components/ProjectLinks.tsx
new file mode 100644
index 000000000..775279d6b
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/components/ProjectLinks.tsx
@@ -0,0 +1,69 @@
+import { ExternalLink, Github, Globe } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+
+interface ProjectLinksProps {
+  project: {
+    projectWebsite?: string;
+    githubUrl?: string;
+    demoVideo?: string;
+  };
+}
+
+export function ProjectLinks({ project }: ProjectLinksProps) {
+  const hasLinks =
+    project.projectWebsite || project.githubUrl || project.demoVideo;
+
+  if (!hasLinks) return null;
+
+  return (
+    <Card className='bg-background border-border/10'>
+      <CardHeader>
+        <CardTitle className='text-white'>Project Links</CardTitle>
+      </CardHeader>
+      <CardContent className='space-y-3'>
+        {project.projectWebsite && (
+          <Button variant='outline' className='w-full justify-start' asChild>
+            <a
+              href={project.projectWebsite}
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              <Globe className='mr-2 h-4 w-4' />
+              Website
+              <ExternalLink className='ml-auto h-4 w-4' />
+            </a>
+          </Button>
+        )}
+
+        {project.githubUrl && (
+          <Button variant='outline' className='w-full justify-start' asChild>
+            <a
+              href={project.githubUrl}
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              <Github className='mr-2 h-4 w-4' />
+              GitHub
+              <ExternalLink className='ml-auto h-4 w-4' />
+            </a>
+          </Button>
+        )}
+
+        {project.demoVideo && (
+          <Button variant='outline' className='w-full justify-start' asChild>
+            <a
+              href={project.demoVideo}
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              <ExternalLink className='mr-2 h-4 w-4' />
+              Demo Video
+              <ExternalLink className='ml-auto h-4 w-4' />
+            </a>
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/app/me/crowdfunding/[slug]/components/TagsSection.tsx b/app/me/crowdfunding/[slug]/components/TagsSection.tsx
new file mode 100644
index 000000000..1acd661ac
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/components/TagsSection.tsx
@@ -0,0 +1,33 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+
+interface TagsSectionProps {
+  project: {
+    tags?: string[];
+  };
+}
+
+export function TagsSection({ project }: TagsSectionProps) {
+  if (!project.tags || project.tags.length === 0) return null;
+
+  return (
+    <Card className='bg-background border-border/10'>
+      <CardHeader>
+        <CardTitle className='text-white'>Tags</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className='flex flex-wrap gap-2'>
+          {project.tags.map((tag, index) => (
+            <Badge
+              key={index}
+              variant='secondary'
+              className='bg-muted text-muted-foreground'
+            >
+              {tag}
+            </Badge>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/app/me/crowdfunding/[slug]/components/index.ts b/app/me/crowdfunding/[slug]/components/index.ts
new file mode 100644
index 000000000..da09ad809
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/components/index.ts
@@ -0,0 +1,6 @@
+export { CampaignBanner } from './CampaignBanner';
+export { ProjectDetails } from './ProjectDetails';
+export { CampaignTabs } from './CampaignTabs';
+export { FundingProgress } from './FundingProgress';
+export { ProjectLinks } from './ProjectLinks';
+export { TagsSection } from './TagsSection';
diff --git a/app/me/crowdfunding/[slug]/contributions/contributions-data-table.tsx b/app/me/crowdfunding/[slug]/contributions/contributions-data-table.tsx
new file mode 100644
index 000000000..b8eac0a5a
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/contributions/contributions-data-table.tsx
@@ -0,0 +1,170 @@
+'use client';
+
+import * as React from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { DataTablePagination } from '@/components/ui/data-table-pagination';
+import { Contributor } from '@/features/projects/types';
+import { contributionsTableColumns } from './contributions-table-columns';
+import { Input } from '@/components/ui/input';
+import { Search } from 'lucide-react';
+
+interface ContributionsDataTableProps {
+  data: Contributor[];
+  loading?: boolean;
+}
+
+export function ContributionsDataTable({
+  data,
+  loading = false,
+}: ContributionsDataTableProps) {
+  const [sorting, setSorting] = React.useState<SortingState>([
+    { id: 'date', desc: true }, // Sort by date descending by default
+  ]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [globalFilter, setGlobalFilter] = React.useState('');
+
+  const table = useReactTable({
+    data,
+    columns: contributionsTableColumns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onGlobalFilterChange: setGlobalFilter,
+    globalFilterFn: 'includesString',
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      globalFilter,
+    },
+    initialState: {
+      pagination: {
+        pageSize: 10,
+      },
+    },
+  });
+
+  return (
+    <div className='space-y-4'>
+      {/* Search */}
+      <div className='flex items-center gap-2'>
+        <div className='relative max-w-sm flex-1'>
+          <Search className='absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-[#919191]' />
+          <Input
+            placeholder='Search contributors or messages...'
+            value={globalFilter ?? ''}
+            onChange={event => setGlobalFilter(String(event.target.value))}
+            className='focus-visible:border-primary border-[#2B2B2B] bg-[#101010] pl-9 text-white placeholder:text-[#919191]'
+          />
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className='rounded-lg border border-[#2B2B2B] bg-[#101010]'>
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map(headerGroup => (
+              <TableRow
+                key={headerGroup.id}
+                className='border-[#2B2B2B] hover:bg-transparent'
+              >
+                {headerGroup.headers.map(header => (
+                  <TableHead
+                    key={header.id}
+                    className='font-medium text-[#B5B5B5]'
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell
+                  colSpan={contributionsTableColumns.length}
+                  className='h-24 text-center'
+                >
+                  <div className='flex items-center justify-center'>
+                    <div className='border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent' />
+                  </div>
+                </TableCell>
+              </TableRow>
+            ) : table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map(row => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                  className='border-[#2B2B2B] hover:bg-[#1A1A1A]'
+                >
+                  {row.getVisibleCells().map(cell => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={contributionsTableColumns.length}
+                  className='h-24 text-center'
+                >
+                  <div className='flex flex-col items-center gap-2'>
+                    <p className='text-[#919191]'>No contributions yet</p>
+                    <p className='text-xs text-[#B5B5B5]'>
+                      Waiting for contributions to this project
+                    </p>
+                  </div>
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Pagination */}
+      {table.getRowModel().rows?.length > 0 && (
+        <DataTablePagination table={table} loading={loading} />
+      )}
+    </div>
+  );
+}
diff --git a/app/me/crowdfunding/[slug]/contributions/contributions-table-columns.tsx b/app/me/crowdfunding/[slug]/contributions/contributions-table-columns.tsx
new file mode 100644
index 000000000..e355b9421
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/contributions/contributions-table-columns.tsx
@@ -0,0 +1,136 @@
+'use client';
+
+import { ColumnDef } from '@tanstack/react-table';
+import { Contributor } from '@/features/projects/types';
+import { formatNumber } from '@/lib/utils';
+import { ExternalLink } from 'lucide-react';
+import { getTransactionExplorerUrl } from '@/lib/wallet-utils';
+import { Button } from '@/components/ui/button';
+import { format } from 'date-fns';
+import Link from 'next/link';
+
+export const contributionsTableColumns: ColumnDef<Contributor>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Contributor',
+    cell: ({ row }) => {
+      const contributor = row.original;
+      const isAnonymous = !contributor.name || contributor.name === 'Anonymous';
+
+      if (isAnonymous) {
+        return (
+          <div className='flex items-center gap-3'>
+            <div className='flex size-8 items-center justify-center rounded-full bg-[#2B2B2B]'>
+              <span className='text-xs text-gray-600'>?</span>
+            </div>
+            <span className='text-sm text-gray-600'>Anonymous</span>
+          </div>
+        );
+      }
+
+      const profileUrl = `/profile/${contributor.username}`;
+
+      return (
+        <Link
+          href={profileUrl}
+          className='flex items-center gap-3 transition-opacity hover:opacity-80'
+        >
+          {contributor.image ? (
+            <div
+              style={{ backgroundImage: `url(${contributor.image})` }}
+              className='size-8 rounded-full bg-white bg-cover bg-center'
+            />
+          ) : (
+            <div className='flex size-8 items-center justify-center rounded-full bg-[#2B2B2B]'>
+              <span className='text-xs text-white'>
+                {contributor.name.charAt(0).toUpperCase()}
+              </span>
+            </div>
+          )}
+          <div className='flex flex-col'>
+            <span className='text-sm font-medium text-white'>
+              {contributor.name}
+            </span>
+            {contributor.username && (
+              <span className='text-xs text-[#B5B5B5]'>
+                @{contributor.username}
+              </span>
+            )}
+          </div>
+        </Link>
+      );
+    },
+  },
+  {
+    accessorKey: 'amount',
+    header: 'Amount',
+    cell: ({ row }) => {
+      const amount = row.getValue('amount') as number;
+      return (
+        <div className='font-medium text-white'>
+          {formatNumber(amount)} <span className='text-[#B5B5B5]'>USD</span>
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: 'message',
+    header: 'Message',
+    cell: ({ row }) => {
+      const message = row.original.message;
+
+      if (!message) {
+        return <span className='text-sm text-gray-600 italic'>No message</span>;
+      }
+
+      return (
+        <div className='max-w-[300px]'>
+          <p className='line-clamp-2 text-sm text-white'>{message}</p>
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: 'date',
+    header: 'Date',
+    cell: ({ row }) => {
+      const date = row.getValue('date') as string;
+      try {
+        return (
+          <span className='text-sm text-[#B5B5B5]'>
+            {format(new Date(date), 'MMM dd, yyyy')}
+          </span>
+        );
+      } catch {
+        return <span className='text-sm text-gray-600'>Invalid date</span>;
+      }
+    },
+  },
+  {
+    accessorKey: 'transactionHash',
+    header: 'Transaction',
+    cell: ({ row }) => {
+      const txHash = row.getValue('transactionHash') as string;
+      const explorerUrl = getTransactionExplorerUrl(txHash);
+
+      return (
+        <Button
+          variant='ghost'
+          size='sm'
+          asChild
+          className='text-primary hover:text-primary hover:bg-primary/10'
+        >
+          <a
+            href={explorerUrl}
+            target='_blank'
+            rel='noopener noreferrer'
+            className='flex items-center gap-2'
+          >
+            <span className='text-xs'>View</span>
+            <ExternalLink className='h-3 w-3' />
+          </a>
+        </Button>
+      );
+    },
+  },
+];
diff --git a/app/me/crowdfunding/[slug]/contributions/page.tsx b/app/me/crowdfunding/[slug]/contributions/page.tsx
new file mode 100644
index 000000000..7f55c1838
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/contributions/page.tsx
@@ -0,0 +1,102 @@
+'use client';
+
+import { use, useEffect, useState } from 'react';
+import { getCrowdfundingProject } from '@/features/projects/api';
+import type { Crowdfunding } from '@/features/projects/types';
+import { ContributionsDataTable } from './contributions-data-table';
+import { ArrowLeft } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useRouter } from 'next/navigation';
+import { ContributionsMetrics } from '@/components/crowdfunding/contributions-metrics';
+
+interface ContributionsPageProps {
+  params: Promise<{
+    slug: string;
+  }>;
+}
+
+export default function ContributionsPage({ params }: ContributionsPageProps) {
+  const router = useRouter();
+  const resolvedParams = use(params);
+  const slug = resolvedParams.slug;
+
+  const [project, setProject] = useState<Crowdfunding | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchProject = async () => {
+      try {
+        setLoading(true);
+        const data = await getCrowdfundingProject(slug);
+        setProject(data);
+      } catch {
+        // Error handled by UI state
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProject();
+  }, [slug]);
+
+  return (
+    <div className='flex min-h-screen flex-col px-5 py-8'>
+      {/* Header */}
+      <div className='mb-8 space-y-4'>
+        <Button
+          variant='ghost'
+          onClick={() => router.push(`/me/crowdfunding/${slug}`)}
+          className='-ml-2 text-[#B5B5B5] hover:bg-[#1A1A1A] hover:text-white'
+        >
+          <ArrowLeft className='mr-2 h-4 w-4' />
+          Back to Campaign
+        </Button>
+
+        <div className='space-y-2'>
+          <h1 className='text-3xl font-bold text-white'>Contributions</h1>
+          {project && (
+            <div className='flex items-center gap-3'>
+              <p className='text-[#B5B5B5]'>
+                Project:{' '}
+                <span className='font-medium text-white'>
+                  {project.project.title}
+                </span>
+              </p>
+              <span className='text-[#484848]'>•</span>
+              <p className='text-[#B5B5B5]'>
+                {project.contributors.length}{' '}
+                {project.contributors.length === 1
+                  ? 'Contributor'
+                  : 'Contributors'}
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className='flex-1'>
+        {loading ? (
+          <div className='flex items-center justify-center py-20'>
+            <div className='border-primary h-12 w-12 animate-spin rounded-full border-4 border-t-transparent' />
+          </div>
+        ) : project ? (
+          <div>
+            <ContributionsMetrics
+              contributors={project.contributors}
+              currencySymbol={'USDC'}
+            />
+            <ContributionsDataTable
+              data={project.contributors}
+              loading={false}
+            />
+          </div>
+        ) : (
+          <div className='flex items-center justify-center py-20'>
+            <p className='text-[#919191]'>Failed to load contributions</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/app/me/crowdfunding/[slug]/edit/components/BasicInfoSection.tsx b/app/me/crowdfunding/[slug]/edit/components/BasicInfoSection.tsx
new file mode 100644
index 000000000..b1dfceac9
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/edit/components/BasicInfoSection.tsx
@@ -0,0 +1,233 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { Upload, X } from 'lucide-react';
+import Image from 'next/image';
+import { uploadService } from '@/lib/api/upload';
+import { cn } from '@/lib/utils';
+
+interface BasicInfoSectionProps {
+  data: {
+    title: string;
+    logo: string;
+    vision: string;
+    category: string;
+  };
+  onChange: (field: string, value: any) => void;
+}
+
+const categories = [
+  'DeFi & Finance',
+  'Gaming & Metaverse',
+  'Social & Community',
+  'Infrastructure & Tooling',
+  'AI & Machine Learning',
+  'Sustainability & Impact',
+  'Other',
+];
+
+export function BasicInfoSection({ data, onChange }: BasicInfoSectionProps) {
+  const [uploading, setUploading] = useState(false);
+  const [isDragOver, setIsDragOver] = useState(false);
+
+  const handleLogoUpload = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    setUploading(true);
+    try {
+      const result = await uploadService.uploadSingle(file);
+      onChange('logo', result.data.url);
+    } catch {
+      // Error handled silently
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDragOver(false);
+  };
+
+  const handleDrop = async (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+
+    const file = e.dataTransfer.files?.[0];
+    if (!file) return;
+
+    setUploading(true);
+    try {
+      const result = await uploadService.uploadSingle(file);
+      onChange('logo', result.data.url);
+    } catch {
+      // Error handled silently
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const removeLogo = () => {
+    onChange('logo', '');
+  };
+
+  return (
+    <div className='w-full space-y-6'>
+      {/* Two Column Grid Layout */}
+      <div className='grid grid-cols-1 gap-8 lg:grid-cols-2'>
+        {/* Left Column - Title and Logo */}
+        <div className='space-y-6'>
+          {/* Title */}
+          <div className='space-y-3'>
+            <Label
+              htmlFor='title'
+              className='text-foreground text-sm font-semibold'
+            >
+              Project Title <span className='text-red-500'>*</span>
+            </Label>
+            <Input
+              id='title'
+              value={data.title}
+              onChange={e => onChange('title', e.target.value)}
+              placeholder='Enter project name/title'
+              className='bg-card text-foreground placeholder:text-muted-foreground'
+            />
+          </div>
+
+          {/* Logo */}
+          <div className='space-y-3'>
+            <Label className='text-foreground text-sm font-semibold'>
+              Logo <span className='text-red-500'>*</span>
+            </Label>
+            <div className='border-border bg-card/50 flex flex-col items-center gap-4 rounded-lg border p-6'>
+              {data.logo ? (
+                <div className='relative w-full'>
+                  <div className='flex items-center justify-center'>
+                    <Image
+                      src={data.logo || '/placeholder.svg'}
+                      alt='Project logo'
+                      width={120}
+                      height={120}
+                      className='border-border rounded-lg border object-cover'
+                    />
+                  </div>
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    size='sm'
+                    className='absolute top-0 right-0 h-7 w-7 rounded-full bg-red-500 p-0 hover:bg-red-600'
+                    onClick={removeLogo}
+                  >
+                    <X className='h-4 w-4 text-white' />
+                  </Button>
+                </div>
+              ) : null}
+              <label
+                htmlFor='logo-upload'
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+                className={cn(
+                  'flex w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 transition-colors',
+                  isDragOver
+                    ? 'border-primary bg-primary/10'
+                    : 'border-muted-foreground/30 hover:border-primary/50',
+                  uploading && 'cursor-not-allowed opacity-50'
+                )}
+              >
+                <Upload className='text-muted-foreground mb-2 h-6 w-6' />
+                <p className='text-foreground text-center text-sm font-medium'>
+                  {uploading
+                    ? 'Uploading...'
+                    : data.logo
+                      ? 'Change logo'
+                      : 'Upload logo'}
+                </p>
+                <p className='text-muted-foreground mt-1 text-xs'>
+                  PNG, JPG (max 2MB)
+                </p>
+                <input
+                  id='logo-upload'
+                  type='file'
+                  accept='image/png,image/jpeg'
+                  onChange={handleLogoUpload}
+                  disabled={uploading}
+                  className='hidden'
+                />
+              </label>
+            </div>
+          </div>
+        </div>
+
+        {/* Right Column - Vision and Category */}
+        <div className='space-y-6'>
+          {/* Vision */}
+          <div className='space-y-3'>
+            <Label
+              htmlFor='vision'
+              className='text-foreground text-sm font-semibold'
+            >
+              Vision <span className='text-red-500'>*</span>
+            </Label>
+            <Textarea
+              id='vision'
+              value={data.vision}
+              onChange={e => onChange('vision', e.target.value)}
+              placeholder='Share the future your project is building'
+              className='bg-card text-foreground placeholder:text-muted-foreground min-h-32 resize-none'
+              maxLength={300}
+            />
+            <div className='flex justify-end pt-1'>
+              <span className='text-muted-foreground text-xs'>
+                {data.vision.length}/300
+              </span>
+            </div>
+          </div>
+
+          {/* Category */}
+          <div className='space-y-3'>
+            <Label
+              htmlFor='category'
+              className='text-foreground text-sm font-semibold'
+            >
+              Category <span className='text-red-500'>*</span>
+            </Label>
+            <Select
+              value={data.category}
+              onValueChange={value => onChange('category', value)}
+            >
+              <SelectTrigger id='category' className='bg-card text-foreground'>
+                <SelectValue placeholder='Select a category' />
+              </SelectTrigger>
+              <SelectContent>
+                {categories.map(category => (
+                  <SelectItem key={category} value={category}>
+                    {category}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/me/crowdfunding/[slug]/edit/components/ContactSocialSection.old.tsx b/app/me/crowdfunding/[slug]/edit/components/ContactSocialSection.old.tsx
new file mode 100644
index 000000000..d3bf168fe
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/edit/components/ContactSocialSection.old.tsx
@@ -0,0 +1,165 @@
+'use client';
+
+import React from 'react';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { MessageCircle, Hash, Phone } from 'lucide-react';
+import { SocialLink } from '@/features/projects/types';
+
+interface ContactSocialSectionProps {
+  data: {
+    contact: {
+      primary: string;
+      backup: string;
+    };
+    socialLinks: SocialLink[];
+  };
+  onChange: (field: string, value: any) => void;
+}
+
+const socialPlatforms = [
+  { value: 'twitter', label: 'Twitter', icon: Hash },
+  { value: 'discord', label: 'Discord', icon: Hash },
+  { value: 'telegram', label: 'Telegram', icon: MessageCircle },
+  { value: 'linkedin', label: 'LinkedIn', icon: Hash },
+  { value: 'medium', label: 'Medium', icon: Hash },
+  { value: 'youtube', label: 'YouTube', icon: Hash },
+];
+
+export function ContactSocialSection({
+  data,
+  onChange,
+}: ContactSocialSectionProps) {
+  const updateContact = (field: 'primary' | 'backup', value: string) => {
+    onChange('contact', {
+      ...data.contact,
+      [field]: value,
+    });
+  };
+
+  const updateSocialLink = (platform: string, url: string) => {
+    const socialLinks = Array.isArray(data.socialLinks) ? data.socialLinks : [];
+    const existingIndex = socialLinks.findIndex(
+      link => link.platform === platform
+    );
+    const updatedLinks = [...socialLinks];
+
+    if (url.trim()) {
+      if (existingIndex >= 0) {
+        updatedLinks[existingIndex] = {
+          ...updatedLinks[existingIndex],
+          url: url.trim(),
+        };
+      } else {
+        updatedLinks.push({ platform, url: url.trim() });
+      }
+    } else if (existingIndex >= 0) {
+      updatedLinks.splice(existingIndex, 1);
+    }
+
+    onChange('socialLinks', updatedLinks);
+  };
+
+  const getSocialLink = (platform: string) => {
+    const socialLinks = Array.isArray(data.socialLinks) ? data.socialLinks : [];
+    return socialLinks.find(link => link.platform === platform)?.url || '';
+  };
+
+  return (
+    <Card className='bg-background border-border/10'>
+      <CardHeader>
+        <CardTitle className='flex items-center gap-2 text-white'>
+          <div className='h-2 w-2 rounded-full bg-cyan-500'></div>
+          Contact & Social Links
+        </CardTitle>
+      </CardHeader>
+      <CardContent className='space-y-6'>
+        {/* Contact Information */}
+        <div className='space-y-4'>
+          <h4 className='font-medium text-white'>Contact Information</h4>
+
+          <div className='space-y-4'>
+            <div className='space-y-2'>
+              <Label className='flex items-center gap-2 text-white'>
+                <MessageCircle className='h-4 w-4' />
+                Primary Contact (Telegram)
+              </Label>
+              <Input
+                value={data.contact.primary}
+                onChange={e => updateContact('primary', e.target.value)}
+                placeholder='@username or https://t.me/username'
+                className='bg-background border-border/20 text-white'
+              />
+            </div>
+
+            <div className='space-y-2'>
+              <Label className='flex items-center gap-2 text-white'>
+                <Phone className='h-4 w-4' />
+                Backup Contact
+              </Label>
+              <RadioGroup
+                value={data.contact.backup ? 'custom' : 'telegram'}
+                onValueChange={value => {
+                  if (value === 'telegram') {
+                    updateContact('backup', '');
+                  }
+                }}
+                className='flex flex-col space-y-2'
+              >
+                <div className='flex items-center space-x-2'>
+                  <RadioGroupItem value='telegram' id='telegram' />
+                  <Label htmlFor='telegram' className='text-white'>
+                    Use Telegram as backup
+                  </Label>
+                </div>
+                <div className='flex items-center space-x-2'>
+                  <RadioGroupItem value='custom' id='custom' />
+                  <Label htmlFor='custom' className='text-white'>
+                    Custom backup contact
+                  </Label>
+                </div>
+              </RadioGroup>
+              {data.contact.backup && (
+                <Input
+                  value={data.contact.backup}
+                  onChange={e => updateContact('backup', e.target.value)}
+                  placeholder='Phone, Discord, or other contact method'
+                  className='bg-background border-border/20 mt-2 text-white'
+                />
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Social Links */}
+        <div className='space-y-4'>
+          <h4 className='font-medium text-white'>Social Media Links</h4>
+
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            {socialPlatforms.map(platform => {
+              const Icon = platform.icon;
+              return (
+                <div key={platform.value} className='space-y-2'>
+                  <Label className='flex items-center gap-2 text-white'>
+                    <Icon className='h-4 w-4' />
+                    {platform.label}
+                  </Label>
+                  <Input
+                    value={getSocialLink(platform.value)}
+                    onChange={e =>
+                      updateSocialLink(platform.value, e.target.value)
+                    }
+                    placeholder={`https://${platform.value}.com/...`}
+                    className='bg-background border-border/20 text-white'
+                  />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/app/me/crowdfunding/[slug]/edit/components/ContactSocialSection.tsx b/app/me/crowdfunding/[slug]/edit/components/ContactSocialSection.tsx
new file mode 100644
index 000000000..b0cb46a87
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/edit/components/ContactSocialSection.tsx
@@ -0,0 +1,249 @@
+'use client';
+
+import React from 'react';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { cn } from '@/lib/utils';
+
+interface ContactSocialSectionProps {
+  data: {
+    contact: {
+      primary: string;
+      backup: string;
+    };
+    socialLinks: Array<{ platform: string; url: string }>;
+  };
+  onChange: (field: string, value: any) => void;
+}
+
+export function ContactSocialSection({
+  data,
+  onChange,
+}: ContactSocialSectionProps) {
+  const [backupType, setBackupType] = React.useState<'discord' | 'whatsapp'>(
+    'whatsapp'
+  );
+
+  const getSocialLink = (platform: string) => {
+    if (!Array.isArray(data.socialLinks)) return '';
+    const link = data.socialLinks.find((l: any) => l.platform === platform);
+    return link?.url || '';
+  };
+
+  const updateSocialLink = (platform: string, url: string) => {
+    if (!Array.isArray(data.socialLinks)) {
+      onChange('socialLinks', [{ platform, url }]);
+      return;
+    }
+    const updated = [...data.socialLinks];
+    const index = updated.findIndex((l: any) => l.platform === platform);
+    if (index >= 0) {
+      updated[index] = { platform, url };
+    } else {
+      updated.push({ platform, url });
+    }
+    onChange('socialLinks', updated);
+  };
+
+  return (
+    <div className='space-y-6'>
+      {/* Header with info */}
+      <div>
+        <div className='mb-3 flex items-center gap-2'>
+          <svg
+            width='20'
+            height='20'
+            viewBox='0 0 36 36'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+            className='text-[#DBF936]'
+          >
+            <path
+              d='M17.9987 24.6668V18.0002M17.9987 11.3335H18.0154M34.6654 18.0002C34.6654 27.2049 27.2034 34.6668 17.9987 34.6668C8.79395 34.6668 1.33203 27.2049 1.33203 18.0002C1.33203 8.79542 8.79395 1.3335 17.9987 1.3335C27.2034 1.3335 34.6654 8.79542 34.6654 18.0002Z'
+              stroke='currentColor'
+              strokeWidth='2'
+              strokeLinecap='round'
+              strokeLinejoin='round'
+            />
+          </svg>
+          <p className='text-xs text-[#B5B5B5]'>
+            Your Project contact information will be used for Project
+            verification and for Boundless staff to contact you. The contact
+            information can only be accessed by Boundless staff.
+          </p>
+        </div>
+      </div>
+
+      {/* Primary Contact */}
+      <div className='space-y-2'>
+        <Label htmlFor='telegram' className='text-sm font-medium text-white'>
+          Telegram <span className='text-red-500'>*</span>
+        </Label>
+        <div className='relative'>
+          <span className='absolute top-1/2 left-3 -translate-y-1/2 text-[#B5B5B5]'>
+            @
+          </span>
+          <Input
+            id='telegram'
+            placeholder='username'
+            value={data.contact.primary.replace('@', '')}
+            onChange={e =>
+              onChange('contact', {
+                ...data.contact,
+                primary: `@${e.target.value.replace('@', '')}`,
+              })
+            }
+            className='h-10 border-[#484848] bg-[#1A1A1A] pl-8 text-white placeholder:text-[#919191] focus:border-[#DBF936]'
+          />
+        </div>
+      </div>
+
+      {/* Backup Contact - Compact Radio Select */}
+      <div className='space-y-2'>
+        <Label className='text-sm font-medium text-white'>
+          Backup <span className='text-red-500'>*</span>
+        </Label>
+        <RadioGroup
+          value={backupType}
+          onValueChange={value =>
+            setBackupType(value as 'discord' | 'whatsapp')
+          }
+          className='flex gap-2'
+        >
+          {/* Discord Option */}
+          <div
+            className={cn(
+              'flex h-10 flex-1 items-center overflow-hidden rounded-lg border transition-all duration-200',
+              backupType === 'discord'
+                ? 'border-[#DBF936] bg-[#DBF936]/5'
+                : 'border-[#2B2B2B] bg-[#101010]'
+            )}
+          >
+            <label
+              className={cn(
+                'flex flex-1 cursor-pointer items-center gap-2 px-3 py-2 text-sm',
+                backupType === 'discord' ? 'text-[#DBF936]' : 'text-[#B5B5B5]'
+              )}
+            >
+              <RadioGroupItem
+                value='discord'
+                id='discord'
+                className={cn(
+                  'border-2',
+                  backupType === 'discord'
+                    ? 'border-[#DBF936]'
+                    : 'border-[#484848]'
+                )}
+              />
+              Discord
+            </label>
+            <Input
+              placeholder='user'
+              value={backupType === 'discord' ? data.contact.backup : ''}
+              onChange={e => {
+                if (backupType === 'discord') {
+                  onChange('contact', {
+                    ...data.contact,
+                    backup: e.target.value,
+                  });
+                }
+              }}
+              className='h-full border-0 bg-transparent px-2 text-xs text-white placeholder:text-[#919191] focus-visible:ring-0 focus-visible:ring-offset-0'
+            />
+          </div>
+
+          {/* WhatsApp Option */}
+          <div
+            className={cn(
+              'flex h-10 flex-1 items-center overflow-hidden rounded-lg border transition-all duration-200',
+              backupType === 'whatsapp'
+                ? 'border-[#DBF936] bg-[#DBF936]/5'
+                : 'border-[#2B2B2B] bg-[#101010]'
+            )}
+          >
+            <label
+              className={cn(
+                'flex flex-1 cursor-pointer items-center gap-2 px-3 py-2 text-sm',
+                backupType === 'whatsapp' ? 'text-[#DBF936]' : 'text-[#B5B5B5]'
+              )}
+            >
+              <RadioGroupItem
+                value='whatsapp'
+                id='whatsapp'
+                className={cn(
+                  'border-2',
+                  backupType === 'whatsapp'
+                    ? 'border-[#DBF936]'
+                    : 'border-[#484848]'
+                )}
+              />
+              WhatsApp
+            </label>
+            <Input
+              placeholder='+1234567890'
+              value={backupType === 'whatsapp' ? data.contact.backup : ''}
+              onChange={e => {
+                if (backupType === 'whatsapp') {
+                  onChange('contact', {
+                    ...data.contact,
+                    backup: e.target.value,
+                  });
+                }
+              }}
+              className='h-full border-0 bg-transparent px-2 text-xs text-white placeholder:text-[#919191] focus-visible:ring-0 focus-visible:ring-offset-0'
+            />
+          </div>
+        </RadioGroup>
+      </div>
+
+      {/* Social Links - Compact Grid */}
+      <div className='space-y-2'>
+        <Label className='text-sm font-medium text-white'>Social Links</Label>
+        <div className='grid grid-cols-1 gap-2 md:grid-cols-3'>
+          {/* Twitter */}
+          <div className='space-y-1'>
+            <Label htmlFor='twitter' className='text-xs text-[#919191]'>
+              Twitter
+            </Label>
+            <Input
+              id='twitter'
+              placeholder='@username'
+              value={getSocialLink('twitter')}
+              onChange={e => updateSocialLink('twitter', e.target.value)}
+              className='h-9 border-[#484848] bg-[#1A1A1A] text-sm text-white placeholder:text-[#919191] focus:border-[#DBF936]'
+            />
+          </div>
+
+          {/* Discord */}
+          <div className='space-y-1'>
+            <Label htmlFor='discord-social' className='text-xs text-[#919191]'>
+              Discord
+            </Label>
+            <Input
+              id='discord-social'
+              placeholder='Server/invite link'
+              value={getSocialLink('discord')}
+              onChange={e => updateSocialLink('discord', e.target.value)}
+              className='h-9 border-[#484848] bg-[#1A1A1A] text-sm text-white placeholder:text-[#919191] focus:border-[#DBF936]'
+            />
+          </div>
+
+          {/* Telegram Channel */}
+          <div className='space-y-1'>
+            <Label htmlFor='telegram-social' className='text-xs text-[#919191]'>
+              Telegram
+            </Label>
+            <Input
+              id='telegram-social'
+              placeholder='@channel'
+              value={getSocialLink('telegram')}
+              onChange={e => updateSocialLink('telegram', e.target.value)}
+              className='h-9 border-[#484848] bg-[#1A1A1A] text-sm text-white placeholder:text-[#919191] focus:border-[#DBF936]'
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/me/crowdfunding/[slug]/edit/components/DetailsFundingSection.tsx b/app/me/crowdfunding/[slug]/edit/components/DetailsFundingSection.tsx
new file mode 100644
index 000000000..f9686289c
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/edit/components/DetailsFundingSection.tsx
@@ -0,0 +1,82 @@
+'use client';
+
+import React from 'react';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import MDEditor from '@uiw/react-md-editor';
+import { cn } from '@/lib/utils';
+import './md-editor-custom.css';
+
+interface DetailsFundingSectionProps {
+  data: {
+    description: string;
+    fundingAmount: number;
+    fundingCurrency: string;
+  };
+  onChange: (field: string, value: any) => void;
+}
+
+export function DetailsFundingSection({
+  data,
+  onChange,
+}: DetailsFundingSectionProps) {
+  return (
+    <div className='space-y-8'>
+      {/* Details */}
+      <div className='space-y-3'>
+        <Label className='text-white'>
+          Vision <span className='text-red-500'>*</span>
+        </Label>
+        <div className='space-y-3'>
+          <div
+            className={cn('overflow-hidden rounded-lg border border-[#484848]')}
+          >
+            <MDEditor
+              value={data.description}
+              onChange={value => onChange('description', value || '')}
+              height={400}
+              data-color-mode='dark'
+              preview='edit'
+              hideToolbar={false}
+              visibleDragbar={true}
+              textareaProps={{
+                placeholder:
+                  "Tell your project's full story...\n\nUse text, images, links, or videos to bring your vision to life. Format freely with headings, lists, and more.",
+                style: {
+                  fontSize: 14,
+                  lineHeight: 1.5,
+                  color: '#ffffff',
+                  backgroundColor: '#101010',
+                  fontFamily: 'inherit',
+                },
+              }}
+              style={{
+                backgroundColor: '#101010',
+                color: '#ffffff',
+              }}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Funding Goal */}
+      <div className='space-y-2'>
+        <Label htmlFor='fundingAmount' className='text-white'>
+          Funding Amount <span className='text-red-500'>*</span>
+        </Label>
+        <Input
+          id='fundingAmount'
+          type='text'
+          value={data.fundingAmount}
+          onChange={e => {
+            const value = e.target.value.replace(/[^0-9.]/g, '');
+            onChange('fundingAmount', parseFloat(value) || 0);
+          }}
+          placeholder='Please enter your fundraising goal'
+          className='focus-visible:border-primary border-[#484848] bg-[#1A1A1A] p-4 text-white placeholder:text-[#919191]'
+        />
+      </div>
+    </div>
+  );
+}
+// <option key={currency.value} value={currency.value}>
diff --git a/app/me/crowdfunding/[slug]/edit/components/MilestonesSection.tsx b/app/me/crowdfunding/[slug]/edit/components/MilestonesSection.tsx
new file mode 100644
index 000000000..420a69c6b
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/edit/components/MilestonesSection.tsx
@@ -0,0 +1,364 @@
+'use client';
+
+import * as React from 'react';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Plus, X, Calendar } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Milestone } from '@/features/projects/types';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+interface MilestonesSectionProps {
+  milestones: Milestone[];
+  onChange: (milestones: Milestone[]) => void;
+}
+
+// Sortable Milestone Item Component
+const SortableMilestoneItem = ({
+  milestone,
+  index,
+  onMilestoneChange,
+  onRemoveMilestone,
+  canRemove,
+}: {
+  milestone: Milestone;
+  index: number;
+  onMilestoneChange: (id: string, field: keyof Milestone, value: any) => void;
+  onRemoveMilestone: (id: string) => void;
+  canRemove: boolean;
+}) => {
+  const [isCollapsed, setIsCollapsed] = React.useState(true);
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: milestone.id || '' });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  const hasContent =
+    milestone.name ||
+    milestone.description ||
+    milestone.startDate ||
+    milestone.endDate;
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        'milestone-item relative transition-all duration-200',
+        isDragging && 'milestone-dragging z-50 shadow-lg'
+      )}
+    >
+      {index > 0 && (
+        <div className='absolute top-0 left-1/2 h-px w-screen -translate-x-1/2 bg-[#2B2B2B]' />
+      )}
+      <div className='p-4'>
+        <div className='flex items-start space-x-3'>
+          {/* Drag Handle */}
+          <div
+            {...attributes}
+            {...listeners}
+            className={cn(
+              'milestone-drag-handle flex h-8 w-8 cursor-move items-center justify-center rounded text-[#B5B5B5] transition-colors hover:border-[#99FF2D] hover:text-white',
+              isDragging && 'milestone-dragging'
+            )}
+          >
+            <svg
+              width='20'
+              height='20'
+              viewBox='0 0 20 20'
+              fill='none'
+              xmlns='http://www.w3.org/2000/svg'
+            >
+              <path
+                d='M2.5 7.08325H17.5M2.5 12.9166H17.5'
+                stroke='#99FF2D'
+                strokeWidth='1.4'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+              />
+            </svg>
+          </div>
+
+          {/* Milestone Content */}
+          <div className='flex-1 space-y-4'>
+            {/* Header with Collapse Toggle */}
+            {hasContent && (
+              <div className='flex items-center justify-between'>
+                <button
+                  type='button'
+                  onClick={() => setIsCollapsed(!isCollapsed)}
+                  className='hover:text-primary flex items-center gap-2 text-white transition-colors'
+                >
+                  <span className='text-sm font-medium'>
+                    {milestone.name || `Milestone ${index + 1}`}
+                  </span>
+                  <svg
+                    width='16'
+                    height='16'
+                    viewBox='0 0 16 16'
+                    fill='none'
+                    xmlns='http://www.w3.org/2000/svg'
+                    className={cn(
+                      'transition-transform duration-200',
+                      isCollapsed ? '-rotate-90' : 'rotate-0'
+                    )}
+                  >
+                    <path
+                      d='M4 6L8 10L12 6'
+                      stroke='currentColor'
+                      strokeWidth='1.5'
+                      strokeLinecap='round'
+                      strokeLinejoin='round'
+                    />
+                  </svg>
+                </button>
+              </div>
+            )}
+
+            {/* Collapsible Content */}
+            <div
+              className={cn(
+                'space-y-4 transition-all duration-200',
+                isCollapsed && hasContent ? 'hidden' : 'block'
+              )}
+            >
+              {/* Title */}
+              <div className='space-y-2'>
+                <Input
+                  placeholder='Enter milestone name/title'
+                  value={milestone.name}
+                  onChange={e =>
+                    onMilestoneChange(
+                      milestone.id || '',
+                      'name',
+                      e.target.value
+                    )
+                  }
+                  className='focus-visible:border-primary border-[#2B2B2B] bg-[#101010] p-4 text-white placeholder:text-[#919191]'
+                />
+              </div>
+
+              {/* Description */}
+              <div className='space-y-2'>
+                <Textarea
+                  placeholder='Describe what will be achieved in this milestone, the key activities involved, and the expected outcome or deliverable.'
+                  value={milestone.description}
+                  onChange={e =>
+                    onMilestoneChange(
+                      milestone.id || '',
+                      'description',
+                      e.target.value
+                    )
+                  }
+                  className='focus-visible:border-primary min-h-20 resize-none border-[#2B2B2B] bg-[#101010] p-4 text-white placeholder:text-[#919191]'
+                />
+              </div>
+
+              {/* Date Inputs */}
+              <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+                <div className='space-y-2'>
+                  <Label className='text-sm text-[#B5B5B5]'>Start Date</Label>
+                  <div className='relative'>
+                    <Input
+                      type='date'
+                      value={milestone.startDate}
+                      onChange={e =>
+                        onMilestoneChange(
+                          milestone.id || '',
+                          'startDate',
+                          e.target.value
+                        )
+                      }
+                      className='focus-visible:border-primary border-[#2B2B2B] bg-[#101010] p-4 pr-10 text-white'
+                    />
+                    <Calendar className='pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 text-[#919191]' />
+                  </div>
+                </div>
+
+                <div className='space-y-2'>
+                  <Label className='text-sm text-[#B5B5B5]'>End Date</Label>
+                  <div className='relative'>
+                    <Input
+                      type='date'
+                      value={milestone.endDate}
+                      onChange={e =>
+                        onMilestoneChange(
+                          milestone.id || '',
+                          'endDate',
+                          e.target.value
+                        )
+                      }
+                      className='focus-visible:border-primary border-[#2B2B2B] bg-[#101010] p-4 pr-10 text-white'
+                    />
+                    <Calendar className='pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 text-[#919191]' />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Remove Button */}
+          {canRemove && (
+            <Button
+              type='button'
+              variant='ghost'
+              size='sm'
+              onClick={() => onRemoveMilestone(milestone.id || '')}
+              className='text-primary/32 bg-primary/8 hover:bg-primary/8 hover:text-primary h-6 w-6 rounded-full p-0'
+            >
+              <X className='h-4 w-4' />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export function MilestonesSection({
+  milestones,
+  onChange,
+}: MilestonesSectionProps) {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const addMilestone = () => {
+    const newMilestone: Milestone = {
+      id: `milestone-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+      name: '',
+      description: '',
+      amount: 0,
+      fundingPercentage: 0,
+      reviewStatus: 'pending',
+      startDate: '',
+      endDate: '',
+      title: '',
+    };
+    onChange([...milestones, newMilestone]);
+  };
+
+  const updateMilestone = (id: string, field: keyof Milestone, value: any) => {
+    const updated = milestones.map(m =>
+      m.id === id ? { ...m, [field]: value } : m
+    );
+    onChange(updated);
+  };
+
+  const removeMilestone = (id: string) => {
+    if (milestones.length > 1) {
+      const updated = milestones.filter(m => m.id !== id);
+      onChange(updated);
+    }
+  };
+
+  const onDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (active.id !== over?.id) {
+      const oldIndex = milestones.findIndex(item => item.id === active.id);
+      const newIndex = milestones.findIndex(item => item.id === over?.id);
+
+      const newMilestones = arrayMove(milestones, oldIndex, newIndex);
+      onChange(newMilestones);
+    }
+  };
+
+  return (
+    <div className='space-y-8'>
+      {/* Info */}
+      <div className='space-y-3'>
+        <p className='text-sm text-[#B5B5B5]'>
+          Define milestones for your project to outline progress and
+          deliverables.
+        </p>
+      </div>
+
+      {/* Milestones List */}
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={onDragEnd}
+      >
+        <SortableContext
+          items={milestones.map(m => m.id || '').filter(id => id)}
+          strategy={verticalListSortingStrategy}
+        >
+          <div className='space-y-5'>
+            {milestones.length === 0 ? (
+              <div className='rounded-lg border border-dashed border-[#2B2B2B] py-12 text-center'>
+                <p className='mb-4 text-[#919191]'>No milestones added yet</p>
+                <Button
+                  type='button'
+                  onClick={addMilestone}
+                  variant='outline'
+                  className='border-primary hover:text-primary hover:bg-primary/5 bg-transparent font-normal text-[#99FF2D]'
+                >
+                  <Plus className='mr-2 h-4 w-4' />
+                  Add Your First Milestone
+                </Button>
+              </div>
+            ) : (
+              milestones.map((milestone, index) => (
+                <SortableMilestoneItem
+                  key={milestone.id}
+                  milestone={milestone}
+                  index={index}
+                  onMilestoneChange={updateMilestone}
+                  onRemoveMilestone={removeMilestone}
+                  canRemove={milestones.length > 1}
+                />
+              ))
+            )}
+          </div>
+        </SortableContext>
+      </DndContext>
+
+      {/* Add Milestone Button */}
+      {milestones.length > 0 && (
+        <div className='flex justify-end'>
+          <Button
+            type='button'
+            variant='outline'
+            onClick={addMilestone}
+            className='border-primary hover:text-primary hover:bg-primary/5 bg-transparent font-normal text-[#99FF2D]'
+          >
+            Add Milestone
+            <Plus className='ml-2 h-4 w-4 text-[#99FF2D]' />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/me/crowdfunding/[slug]/edit/components/ProjectLinksSection.tsx b/app/me/crowdfunding/[slug]/edit/components/ProjectLinksSection.tsx
new file mode 100644
index 000000000..ca090288c
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/edit/components/ProjectLinksSection.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import React from 'react';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Globe, Play } from 'lucide-react';
+
+interface ProjectLinksSectionProps {
+  data: {
+    projectWebsite: string;
+    demoVideo: string;
+  };
+  onChange: (field: string, value: string) => void;
+}
+
+export function ProjectLinksSection({
+  data,
+  onChange,
+}: ProjectLinksSectionProps) {
+  return (
+    <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+      <div className='space-y-2'>
+        <Label
+          htmlFor='projectWebsite'
+          className='flex items-center gap-2 text-white'
+        >
+          <Globe className='h-4 w-4' />
+          Website URL (Optional)
+        </Label>
+        <Input
+          id='projectWebsite'
+          value={data.projectWebsite}
+          onChange={e => onChange('projectWebsite', e.target.value)}
+          placeholder='Link to project website'
+          className='focus-visible:border-primary border-[#484848] bg-[#1A1A1A] p-4 text-white placeholder:text-[#919191]'
+        />
+      </div>
+
+      <div className='space-y-2'>
+        <Label
+          htmlFor='demoVideo'
+          className='flex items-center gap-2 text-white'
+        >
+          <Play className='h-4 w-4' />
+          Demo Video URL (Optional)
+        </Label>
+        <Input
+          id='demoVideo'
+          value={data.demoVideo}
+          onChange={e => onChange('demoVideo', e.target.value)}
+          placeholder='Link to demo video'
+          className='focus-visible:border-primary border-[#484848] bg-[#1A1A1A] p-4 text-white placeholder:text-[#919191]'
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/app/me/crowdfunding/[slug]/edit/components/RepoLinksSection.tsx b/app/me/crowdfunding/[slug]/edit/components/RepoLinksSection.tsx
new file mode 100644
index 000000000..3ea1ea875
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/edit/components/RepoLinksSection.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import React from 'react';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Github, GitBranch } from 'lucide-react';
+
+interface RepoLinksSectionProps {
+  data: {
+    githubUrl: string;
+    gitlabUrl: string;
+    bitbucketUrl: string;
+  };
+  onChange: (field: string, value: string) => void;
+}
+
+export function RepoLinksSection({ data, onChange }: RepoLinksSectionProps) {
+  return (
+    <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+      {/* GitHub */}
+      <div className='space-y-2'>
+        <Label
+          htmlFor='githubUrl'
+          className='flex items-center gap-2 text-white'
+        >
+          <Github className='h-4 w-4' />
+          GitHub URL <span className='text-red-500'>*</span>
+        </Label>
+        <Input
+          id='githubUrl'
+          value={data.githubUrl}
+          onChange={e => onChange('githubUrl', e.target.value)}
+          placeholder='Link to GitHub repo or profile'
+          className='focus-visible:border-primary border-[#484848] bg-[#1A1A1A] p-4 text-white placeholder:text-[#919191]'
+        />
+      </div>
+
+      {/* GitLab */}
+      <div className='space-y-2'>
+        <Label
+          htmlFor='gitlabUrl'
+          className='flex items-center gap-2 text-white'
+        >
+          <GitBranch className='h-4 w-4' />
+          GitLab URL (Optional)
+        </Label>
+        <Input
+          id='gitlabUrl'
+          value={data.gitlabUrl}
+          onChange={e => onChange('gitlabUrl', e.target.value)}
+          placeholder='Link to GitLab repo'
+          className='focus-visible:border-primary border-[#484848] bg-[#1A1A1A] p-4 text-white placeholder:text-[#919191]'
+        />
+      </div>
+
+      {/* Bitbucket */}
+      <div className='space-y-2'>
+        <Label
+          htmlFor='bitbucketUrl'
+          className='flex items-center gap-2 text-white'
+        >
+          <GitBranch className='h-4 w-4' />
+          Bitbucket URL (Optional)
+        </Label>
+        <Input
+          id='bitbucketUrl'
+          value={data.bitbucketUrl}
+          onChange={e => onChange('bitbucketUrl', e.target.value)}
+          placeholder='Link to Bitbucket repo'
+          className='focus-visible:border-primary border-[#484848] bg-[#1A1A1A] p-4 text-white placeholder:text-[#919191]'
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/app/me/crowdfunding/[slug]/edit/components/TeamSection.tsx b/app/me/crowdfunding/[slug]/edit/components/TeamSection.tsx
new file mode 100644
index 000000000..b8369c36c
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/edit/components/TeamSection.tsx
@@ -0,0 +1,243 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Plus, X, User } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { TeamMember } from '@/features/projects/types';
+
+interface TeamSectionProps {
+  team: TeamMember[];
+  onChange: (team: TeamMember[]) => void;
+}
+
+const roles = [
+  { value: 'FOUNDER', label: 'Founder' },
+  { value: 'CO_FOUNDER', label: 'Co-Founder' },
+  { value: 'DEVELOPER', label: 'Developer' },
+  { value: 'DESIGNER', label: 'Designer' },
+  { value: 'MARKETING', label: 'Marketing' },
+  { value: 'COMMUNITY', label: 'Community Manager' },
+  { value: 'ADVISOR', label: 'Advisor' },
+  { value: 'OTHER', label: 'Other' },
+];
+
+// Collapsible Team Member Item
+const CollapsibleTeamMember = ({
+  member,
+  index,
+  onUpdate,
+  onRemove,
+}: {
+  member: TeamMember;
+  index: number;
+  onUpdate: (index: number, field: keyof TeamMember, value: any) => void;
+  onRemove: (index: number) => void;
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(true);
+
+  return (
+    <div className='overflow-hidden rounded-lg border border-[#2B2B2B] bg-[#101010]'>
+      {/* Header */}
+      <div className='flex items-center justify-between p-4'>
+        <button
+          type='button'
+          onClick={() => setIsCollapsed(!isCollapsed)}
+          className='flex flex-1 items-center gap-3 text-left'
+        >
+          <User className='h-5 w-5 text-[#99FF2D]' />
+          <div className='flex-1'>
+            <p className='font-medium text-white'>{member.name}</p>
+            <p className='text-xs text-[#B5B5B5]'>{member.email}</p>
+          </div>
+          <svg
+            width='16'
+            height='16'
+            viewBox='0 0 16 16'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+            className={cn(
+              'text-[#B5B5B5] transition-transform duration-200',
+              isCollapsed ? '-rotate-90' : 'rotate-0'
+            )}
+          >
+            <path
+              d='M4 6L8 10L12 6'
+              stroke='currentColor'
+              strokeWidth='1.5'
+              strokeLinecap='round'
+              strokeLinejoin='round'
+            />
+          </svg>
+        </button>
+        <Button
+          type='button'
+          onClick={() => onRemove(index)}
+          variant='ghost'
+          size='sm'
+          className='text-primary/32 bg-primary/8 hover:bg-primary/8 hover:text-primary ml-2 h-6 w-6 rounded-full p-0'
+        >
+          <X className='h-4 w-4' />
+        </Button>
+      </div>
+
+      {/* Collapsible Content */}
+      {!isCollapsed && (
+        <div className='space-y-4 border-t border-[#2B2B2B] px-4 pb-4'>
+          <div className='grid grid-cols-1 gap-4 pt-4 md:grid-cols-2'>
+            <div className='space-y-2'>
+              <Label className='text-sm text-[#B5B5B5]'>Name</Label>
+              <Input
+                value={member.name}
+                onChange={e => onUpdate(index, 'name', e.target.value)}
+                placeholder='John Doe'
+                className='focus-visible:border-primary border-[#2B2B2B] bg-[#0A0A0A] text-white placeholder:text-[#919191]'
+              />
+            </div>
+
+            <div className='space-y-2'>
+              <Label className='text-sm text-[#B5B5B5]'>Email</Label>
+              <Input
+                type='email'
+                value={member.email}
+                onChange={e => onUpdate(index, 'email', e.target.value)}
+                placeholder='john@example.com'
+                className='focus-visible:border-primary border-[#2B2B2B] bg-[#0A0A0A] text-white placeholder:text-[#919191]'
+              />
+            </div>
+          </div>
+
+          <div className='space-y-2'>
+            <Label className='text-sm text-[#B5B5B5]'>Role</Label>
+            <div className='grid grid-cols-2 gap-2 md:grid-cols-4'>
+              {roles.map(role => (
+                <button
+                  key={role.value}
+                  type='button'
+                  onClick={() => onUpdate(index, 'role', role.value)}
+                  className={cn(
+                    'rounded-lg border px-3 py-2 text-sm transition-all',
+                    member.role === role.value
+                      ? 'border-[#A7F950] bg-[#A7F95014] text-[#A7F950]'
+                      : 'border-[#2B2B2B] bg-[#0A0A0A] text-white hover:border-[#A7F950]/50'
+                  )}
+                >
+                  {role.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export function TeamSection({ team, onChange }: TeamSectionProps) {
+  const [newMember, setNewMember] = useState({
+    name: '',
+    email: '',
+    role: 'DEVELOPER' as const,
+  });
+
+  const addMember = () => {
+    if (!newMember.name.trim() || !newMember.email.trim()) return;
+
+    const member: TeamMember = {
+      name: newMember.name.trim(),
+      role: newMember.role,
+      email: newMember.email.trim(),
+      image: undefined,
+      username: undefined,
+    };
+
+    onChange([...team, member]);
+    setNewMember({ name: '', email: '', role: 'DEVELOPER' });
+  };
+
+  const updateMember = (index: number, field: keyof TeamMember, value: any) => {
+    const updated = [...team];
+    updated[index] = { ...updated[index], [field]: value };
+    onChange(updated);
+  };
+
+  const removeMember = (index: number) => {
+    const updated = team.filter((_, i) => i !== index);
+    onChange(updated);
+  };
+
+  return (
+    <div className='space-y-6'>
+      {/* Info */}
+      <div className='space-y-2'>
+        <p className='text-sm text-[#B5B5B5]'>
+          Invite members to your team by email (optional)
+        </p>
+      </div>
+
+      {/* Add New Member Form */}
+      <div className='space-y-4 rounded-lg border border-[#2B2B2B] bg-[#101010] p-4'>
+        <h4 className='font-medium text-white'>Add Team Member</h4>
+
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+          <div className='space-y-2'>
+            <Label className='text-sm text-[#B5B5B5]'>Name</Label>
+            <Input
+              value={newMember.name}
+              onChange={e =>
+                setNewMember(prev => ({ ...prev, name: e.target.value }))
+              }
+              placeholder='John Doe'
+              className='focus-visible:border-primary border-[#2B2B2B] bg-[#0A0A0A] text-white placeholder:text-[#919191]'
+            />
+          </div>
+
+          <div className='space-y-2'>
+            <Label className='text-sm text-[#B5B5B5]'>Email</Label>
+            <Input
+              type='email'
+              value={newMember.email}
+              onChange={e =>
+                setNewMember(prev => ({ ...prev, email: e.target.value }))
+              }
+              placeholder='john@example.com'
+              className='focus-visible:border-primary border-[#2B2B2B] bg-[#0A0A0A] text-white placeholder:text-[#919191]'
+            />
+          </div>
+        </div>
+
+        <Button
+          type='button'
+          onClick={addMember}
+          disabled={!newMember.name.trim() || !newMember.email.trim()}
+          className='border-primary hover:text-primary hover:bg-primary/5 border bg-transparent font-normal text-[#99FF2D]'
+        >
+          <Plus className='mr-2 h-4 w-4' />
+          Add Member
+        </Button>
+      </div>
+
+      {/* Team Members List */}
+      {team.length > 0 && (
+        <div className='space-y-3'>
+          <h4 className='font-medium text-white'>
+            Current Team ({team.length})
+          </h4>
+          <div className='space-y-2'>
+            {team.map((member, index) => (
+              <CollapsibleTeamMember
+                key={index}
+                member={member}
+                index={index}
+                onUpdate={updateMember}
+                onRemove={removeMember}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/me/crowdfunding/[slug]/edit/components/index.ts b/app/me/crowdfunding/[slug]/edit/components/index.ts
new file mode 100644
index 000000000..cbdce9d92
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/edit/components/index.ts
@@ -0,0 +1,7 @@
+export { BasicInfoSection } from './BasicInfoSection';
+export { DetailsFundingSection } from './DetailsFundingSection';
+export { RepoLinksSection } from './RepoLinksSection';
+export { ProjectLinksSection } from './ProjectLinksSection';
+export { MilestonesSection } from './MilestonesSection';
+export { TeamSection } from './TeamSection';
+export { ContactSocialSection } from './ContactSocialSection';
diff --git a/app/me/crowdfunding/[slug]/edit/components/md-editor-custom.css b/app/me/crowdfunding/[slug]/edit/components/md-editor-custom.css
new file mode 100644
index 000000000..e54465124
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/edit/components/md-editor-custom.css
@@ -0,0 +1,98 @@
+/* MD Editor Custom Styles for Dark Theme */
+
+.w-md-editor {
+  --md-editor-border-color: #484848;
+  --md-editor-bg-color: #0a0a0a;
+  --md-editor-toolbar-bg-color: #1a1a1a;
+  --md-editor-text-color: #ffffff;
+  --md-editor-placeholder-color: #666666;
+  --md-editor-hover-color: #333333;
+  --md-editor-focus-color: #3b82f6;
+  --md-editor-selected-color: #1e40af;
+}
+
+.w-md-editor-text-pre,
+.w-md-editor-text-pre * {
+  color: #ffffff !important;
+  background-color: #0a0a0a !important;
+}
+
+.w-md-editor-text-pre {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+}
+
+.w-md-editor-textarea {
+  background-color: #0a0a0a !important;
+  color: #ffffff !important;
+  border-color: #484848 !important;
+}
+
+.w-md-editor-textarea::placeholder {
+  color: #666666 !important;
+}
+
+.w-md-editor-textarea:focus {
+  border-color: #3b82f6 !important;
+  box-shadow: 0 0 0 1px #3b82f6 !important;
+}
+
+.w-md-editor-bar {
+  background-color: #1a1a1a !important;
+  border-color: #484848 !important;
+}
+
+.w-md-editor-bar svg {
+  fill: #ffffff !important;
+}
+
+.w-md-editor-bar button:hover {
+  background-color: #333333 !important;
+}
+
+.w-md-editor-bar button.active {
+  background-color: #1e40af !important;
+}
+
+.w-md-editor-show-live,
+.w-md-editor-show-edit,
+.w-md-editor-show-preview {
+  background-color: #1a1a1a !important;
+  color: #ffffff !important;
+  border-color: #484848 !important;
+}
+
+.w-md-editor-show-live:hover,
+.w-md-editor-show-edit:hover,
+.w-md-editor-show-preview:hover {
+  background-color: #333333 !important;
+}
+
+.w-md-editor-show-live.active,
+.w-md-editor-show-edit.active,
+.w-md-editor-show-preview.active {
+  background-color: #1e40af !important;
+  color: #ffffff !important;
+}
+
+/* Hide toolbar items we don't need */
+.w-md-editor-bar .w-md-editor-bar-hidden {
+  display: none !important;
+}
+
+/* Custom scrollbar */
+.w-md-editor-textarea::-webkit-scrollbar {
+  width: 8px;
+}
+
+.w-md-editor-textarea::-webkit-scrollbar-track {
+  background: #1a1a1a;
+}
+
+.w-md-editor-textarea::-webkit-scrollbar-thumb {
+  background: #484848;
+  border-radius: 4px;
+}
+
+.w-md-editor-textarea::-webkit-scrollbar-thumb:hover {
+  background: #666666;
+}
diff --git a/app/me/crowdfunding/[slug]/edit/page.tsx b/app/me/crowdfunding/[slug]/edit/page.tsx
new file mode 100644
index 000000000..00af0e4b3
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/edit/page.tsx
@@ -0,0 +1,313 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { ArrowLeft, Save, Loader2 } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { toast } from 'sonner';
+
+import {
+  getCrowdfundingProject,
+  updateCrowdfundingProject,
+} from '@/features/projects/api';
+import { Crowdfunding } from '@/features/projects/types';
+
+import {
+  BasicInfoSection,
+  DetailsFundingSection,
+  RepoLinksSection,
+  ProjectLinksSection,
+  MilestonesSection,
+  TeamSection,
+  ContactSocialSection,
+} from './components';
+
+interface PageProps {
+  params: Promise<{
+    slug: string;
+  }>;
+}
+
+export default function CampaignEditPage({ params }: PageProps) {
+  const [campaign, setCampaign] = useState<Crowdfunding | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [hasChanges, setHasChanges] = useState(false);
+  const router = useRouter();
+
+  // Form data state
+  const [formData, setFormData] = useState({
+    // Basic info
+    title: '',
+    logo: '',
+    vision: '',
+    category: '',
+
+    // Details & funding
+    description: '',
+    fundingAmount: 0,
+    fundingCurrency: 'USD',
+
+    // Repo links
+    githubUrl: '',
+    gitlabUrl: '',
+    bitbucketUrl: '',
+
+    // Project links
+    projectWebsite: '',
+    demoVideo: '',
+
+    // Milestones
+    milestones: [] as any[],
+
+    // Team
+    team: [] as any[],
+
+    // Contact & social
+    contact: { primary: '', backup: '' },
+    socialLinks: [] as any[],
+  });
+
+  useEffect(() => {
+    const fetchCampaign = async () => {
+      try {
+        const { slug } = await params;
+        const data = await getCrowdfundingProject(slug);
+        setCampaign(data);
+
+        // Initialize form data
+        const project = data.project;
+        setFormData({
+          title: project.title,
+          logo: project.logo,
+          vision: project.vision || '',
+          category: project.category,
+          description: project.description || '',
+          fundingAmount: data.fundingGoal,
+          fundingCurrency: data.fundingCurrency,
+          githubUrl: project.githubUrl,
+          gitlabUrl: project.gitlabUrl || '',
+          bitbucketUrl: project.bitbucketUrl || '',
+          projectWebsite: project.projectWebsite,
+          demoVideo: project.demoVideo,
+          milestones: Array.isArray(data.milestones) ? data.milestones : [],
+          team: Array.isArray(data.team) ? data.team : [],
+          contact: data.contact || { primary: '', backup: '' },
+          socialLinks: Array.isArray(project.socialLinks)
+            ? project.socialLinks
+            : [],
+        });
+      } catch {
+        toast.error('Failed to load campaign data');
+        router.push('/me/crowdfunding');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchCampaign();
+  }, [params, router, toast]);
+
+  const handleFieldChange = (field: string, value: any) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+    setHasChanges(true);
+  };
+
+  const handleSave = async () => {
+    if (!campaign) return;
+
+    setSaving(true);
+    try {
+      // Prepare update data
+      const updateData = {
+        projectId: campaign.projectId,
+        // Basic info
+        title: formData.title,
+        logo: formData.logo,
+        vision: formData.vision,
+        category: formData.category,
+
+        // Details
+        details: formData.description,
+
+        // Funding
+        fundingAmount: formData.fundingAmount,
+        fundingCurrency: formData.fundingCurrency,
+
+        // Links
+        githubUrl: formData.githubUrl,
+        gitlabUrl: formData.gitlabUrl,
+        bitbucketUrl: formData.bitbucketUrl,
+        projectWebsite: formData.projectWebsite,
+        demoVideo: formData.demoVideo,
+
+        // Team
+        team: formData.team,
+
+        // Contact & social
+        contact: formData.contact,
+        socialLinks: formData.socialLinks,
+
+        // Milestones
+        milestones: formData.milestones,
+      };
+
+      await updateCrowdfundingProject(campaign.id, updateData);
+
+      setHasChanges(false);
+      toast.success('Campaign updated successfully');
+
+      // Redirect back to campaign view
+      router.push(`/me/crowdfunding/${campaign.id}`);
+    } catch {
+      toast.error('Failed to update campaign');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className='container mx-auto max-w-4xl px-4 py-8'>
+        <div className='text-center'>Loading...</div>
+      </div>
+    );
+  }
+
+  if (!campaign) {
+    return (
+      <div className='container mx-auto max-w-4xl px-4 py-8'>
+        <div className='text-center'>Campaign not found</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className='relative container mx-auto px-4 py-8'>
+      <div className='sticky top-0 z-100 mb-8 flex items-center justify-between bg-[#0e0c0c] py-4'>
+        <div className='flex items-center gap-4'>
+          <Button variant='outline' size='sm' asChild>
+            <Link href={`/me/crowdfunding/${campaign.slug}`}>
+              <ArrowLeft className='h-4 w-4' />
+            </Link>
+          </Button>
+          <div>
+            <h1 className='text-3xl font-bold text-white'>Edit Campaign</h1>
+          </div>
+        </div>
+
+        <Button
+          onClick={handleSave}
+          disabled={!hasChanges || saving}
+          className='bg-primary hover:bg-primary/90 flex items-center gap-2 text-black'
+        >
+          {saving ? (
+            <Loader2 className='h-4 w-4 animate-spin' />
+          ) : (
+            <Save className='h-4 w-4' />
+          )}
+          {saving ? 'Saving...' : 'Save Changes'}
+        </Button>
+      </div>
+
+      <div className='space-y-12 px-4'>
+        <div className='space-y-4'>
+          <h2 className='flex items-center gap-2 text-xl font-semibold text-white'>
+            Basic Information
+          </h2>
+          <BasicInfoSection
+            data={{
+              title: formData.title,
+              logo: formData.logo,
+              vision: formData.vision,
+              category: formData.category,
+            }}
+            onChange={handleFieldChange}
+          />
+        </div>
+
+        {/* Details & Funding */}
+        <div className='space-y-4'>
+          <h2 className='flex items-center gap-2 text-xl font-semibold text-white'>
+            Details & Funding
+          </h2>
+          <DetailsFundingSection
+            data={{
+              description: formData.description,
+              fundingAmount: formData.fundingAmount,
+              fundingCurrency: formData.fundingCurrency,
+            }}
+            onChange={handleFieldChange}
+          />
+        </div>
+
+        {/* Repository Links */}
+        <div className='space-y-4'>
+          <h2 className='flex items-center gap-2 text-xl font-semibold text-white'>
+            Repository Links
+          </h2>
+          <RepoLinksSection
+            data={{
+              githubUrl: formData.githubUrl,
+              gitlabUrl: formData.gitlabUrl,
+              bitbucketUrl: formData.bitbucketUrl,
+            }}
+            onChange={handleFieldChange}
+          />
+        </div>
+
+        {/* Project Links */}
+        <div className='space-y-4'>
+          <h2 className='flex items-center gap-2 text-xl font-semibold text-white'>
+            Project Links
+          </h2>
+          <ProjectLinksSection
+            data={{
+              projectWebsite: formData.projectWebsite,
+              demoVideo: formData.demoVideo,
+            }}
+            onChange={handleFieldChange}
+          />
+        </div>
+
+        {/* Milestones */}
+        <div className='space-y-4'>
+          <h2 className='flex items-center gap-2 text-xl font-semibold text-white'>
+            Milestones
+          </h2>
+          <MilestonesSection
+            milestones={formData.milestones}
+            onChange={milestones => handleFieldChange('milestones', milestones)}
+          />
+        </div>
+
+        {/* Team Members */}
+        <div className='space-y-4'>
+          <h2 className='flex items-center gap-2 text-xl font-semibold text-white'>
+            Team Members
+          </h2>
+          <TeamSection
+            team={formData.team}
+            onChange={team => handleFieldChange('team', team)}
+          />
+        </div>
+
+        {/* Contact & Social */}
+        <div className='space-y-4'>
+          <h2 className='flex items-center gap-2 text-xl font-semibold text-white'>
+            Contact & Social Links
+          </h2>
+          <ContactSocialSection
+            data={{
+              contact: formData.contact,
+              socialLinks: formData.socialLinks,
+            }}
+            onChange={handleFieldChange}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/me/crowdfunding/[slug]/milestones/[milestoneIndex]/page.tsx b/app/me/crowdfunding/[slug]/milestones/[milestoneIndex]/page.tsx
new file mode 100644
index 000000000..81c04efe4
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/milestones/[milestoneIndex]/page.tsx
@@ -0,0 +1,302 @@
+'use client';
+
+import { useState, useEffect, use } from 'react';
+import {
+  getCrowdfundingProject,
+  getCrowdfundingMilestone,
+  validateMilestoneSubmission,
+  updateMilestone,
+} from '@/features/projects/api';
+import { uploadMilestoneDocuments } from '@/lib/api/upload';
+import { Crowdfunding, Milestone } from '@/features/projects/types';
+import { MilestoneDetailHeader } from '@/components/crowdfunding/milestone-detail-header';
+import { MilestoneDetailInfo } from '@/components/crowdfunding/milestone-detail-info';
+import { MilestoneDetailDescription } from '@/components/crowdfunding/milestone-detail-description';
+import { MilestoneDetailLinks } from '@/components/crowdfunding/milestone-detail-links';
+import { SubmitEvidenceModal } from '@/components/crowdfunding/submit-evidence-modal';
+import WalletRequiredModal from '@/components/wallet/WalletRequiredModal';
+import { useProtectedAction } from '@/hooks/use-protected-action';
+import { toast } from 'sonner';
+import {
+  useChangeMilestoneStatus,
+  useSendTransaction,
+} from '@trustless-work/escrow';
+import { useWalletContext } from '@/components/providers/wallet-provider';
+import { signTransaction } from '@/lib/config/wallet-kit';
+
+interface PageProps {
+  params: Promise<{
+    slug: string;
+    milestoneIndex: number;
+  }>;
+}
+
+interface TransformedMilestone extends Milestone {
+  _id: string;
+  title: string;
+  dueDate: string;
+  submittedAt?: string;
+  approvedAt?: string;
+  rejectedAt?: string;
+  evidence?: {
+    text?: string;
+    attachments?: Array<{
+      type: 'image' | 'video' | 'document' | 'link';
+      url: string;
+      name?: string;
+    }>;
+  };
+}
+
+export default function MilestoneDetailPage({ params }: PageProps) {
+  const [campaign, setCampaign] = useState<Crowdfunding | null>(null);
+  const [milestone, setMilestone] = useState<TransformedMilestone | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [showEvidenceModal, setShowEvidenceModal] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const milestoneIndex = use(params).milestoneIndex;
+  const { changeMilestoneStatus } = useChangeMilestoneStatus();
+  const { sendTransaction } = useSendTransaction();
+
+  const { walletAddress } = useWalletContext();
+
+  const {
+    executeProtectedAction,
+    showWalletModal,
+    closeWalletModal,
+    handleWalletConnected,
+  } = useProtectedAction({
+    actionName: 'submit evidence',
+    onSuccess: () => setShowEvidenceModal(true),
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const { slug } = await params;
+
+        const [campaignData, milestoneData] = await Promise.all([
+          getCrowdfundingProject(slug),
+          getCrowdfundingMilestone(slug, milestoneIndex.toString()),
+        ]);
+
+        setCampaign(campaignData);
+
+        if (milestoneData) {
+          setMilestone({
+            _id: milestoneData.id || milestoneData.name,
+            title: milestoneData.name,
+            description: milestoneData.description,
+            status: milestoneData.status,
+            dueDate: milestoneData.endDate,
+            amount: milestoneData.amount,
+            submittedAt: milestoneData.submittedAt,
+            approvedAt: milestoneData.approvedAt,
+            rejectedAt: milestoneData.rejectedAt,
+            evidence: milestoneData.evidence,
+            votes: milestoneData.votes,
+            userHasVoted: milestoneData.userHasVoted,
+            userVote: milestoneData.userVote,
+            ...milestoneData,
+          });
+        }
+      } catch {
+        setError(true);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [params]);
+
+  const handleSubmitEvidence = async (data: {
+    status: string;
+    submissionNotes: string;
+    proofOfWorkLinks: string[];
+    documents?: File[];
+  }) => {
+    if (!campaign || !milestone) return;
+
+    setIsSubmitting(true);
+
+    try {
+      // Step 1: Upload documents to Cloudinary if provided
+      let documentUrls: string[] = [];
+      if (data.documents && data.documents.length > 0) {
+        toast.loading(`Uploading ${data.documents.length} file(s)...`);
+
+        const uploadResult = await uploadMilestoneDocuments(
+          data.documents,
+          campaign.slug,
+          milestoneIndex
+        );
+
+        if (uploadResult.success) {
+          documentUrls = uploadResult.data.map(file => file.secure_url);
+          toast.success('Files uploaded successfully');
+        } else {
+          throw new Error('Failed to upload documents');
+        }
+      }
+
+      // Step 2: Validate submission with backend
+      toast('Validating submission...');
+
+      const validationResult = await validateMilestoneSubmission(
+        campaign.slug,
+        milestoneIndex,
+        {
+          submissionNotes: data.submissionNotes,
+          proofOfWorkLinks: data.proofOfWorkLinks,
+          proofOfWorkFiles: documentUrls,
+          status: data.status as 'completed' | 'in_review' | 'submitted',
+        }
+      );
+
+      if (!validationResult.validated) {
+        throw new Error(validationResult.error || 'Validation failed');
+      }
+
+      // Step 3: Perform blockchain transaction with Trustless Work SDK
+      toast('Please confirm the transaction in your wallet');
+
+      const { unsignedTransaction } = await changeMilestoneStatus(
+        {
+          contractId: campaign.escrowAddress,
+          milestoneIndex: (milestone.orderIndex ?? milestoneIndex).toString(),
+          newStatus: data.status === 'completed' ? 'completed' : 'in_progress',
+          newEvidence: data.submissionNotes, // Use submission notes as evidence description
+          serviceProvider: walletAddress || '',
+        },
+        'multi-release'
+      );
+      if (!unsignedTransaction) {
+        throw new Error(
+          'Unsigned transaction is missing from useChangeMilestoneStatusresponse.'
+        );
+      }
+
+      const signedXdr = await signTransaction({
+        unsignedTransaction,
+        address: walletAddress || '',
+      });
+
+      const trxsent = await sendTransaction(signedXdr);
+      if (trxsent.status === 'SUCCESS') {
+        toast.success('Transaction confirmed on blockchain');
+      }
+
+      toast('Updating milestone...');
+
+      await updateMilestone(campaign.slug, milestoneIndex, {
+        status: data.status as
+          | 'pending'
+          | 'in_progress'
+          | 'completed'
+          | 'cancelled',
+        submissionNotes: data.submissionNotes,
+        proofOfWorkLinks: data.proofOfWorkLinks,
+        proofOfWorkFiles: documentUrls,
+        completedAt:
+          data.status === 'completed' ? new Date().toISOString() : undefined,
+        releaseTransactionHash: '',
+      });
+
+      // Step 5: Refetch milestone data
+      const updatedMilestone = await getCrowdfundingMilestone(
+        campaign.slug,
+        milestoneIndex.toString()
+      );
+
+      if (updatedMilestone) {
+        setMilestone({
+          _id: updatedMilestone.id || updatedMilestone.name,
+          title: updatedMilestone.name,
+          description: updatedMilestone.description,
+          status: updatedMilestone.status,
+          dueDate: updatedMilestone.endDate,
+          amount: updatedMilestone.amount,
+          submittedAt: updatedMilestone.submittedAt,
+          approvedAt: updatedMilestone.approvedAt,
+          rejectedAt: updatedMilestone.rejectedAt,
+          evidence: updatedMilestone.evidence,
+          votes: updatedMilestone.votes,
+          userHasVoted: updatedMilestone.userHasVoted,
+          userVote: updatedMilestone.userVote,
+          ...updatedMilestone,
+        });
+      }
+
+      toast.success('Milestone evidence submitted successfully');
+
+      setShowEvidenceModal(false);
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : 'Failed to submit evidence'
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className='container mx-auto max-w-4xl px-4 py-12'>
+        <div className='text-muted-foreground text-center'>Loading...</div>
+      </div>
+    );
+  }
+
+  if (error || !campaign || !milestone) {
+    return (
+      <div className='px-4 py-12'>
+        <div className='text-muted-foreground text-center'>
+          Milestone not found
+        </div>
+      </div>
+    );
+  }
+  console.log(milestone.orderIndex);
+  return (
+    <div className='px-6 py-8'>
+      <MilestoneDetailHeader
+        title={campaign.project.title}
+        milestone={milestone}
+        campaignSlug={campaign.slug}
+        backLink={`/me/crowdfunding/${campaign.slug}/milestones`}
+        onSubmitEvidence={() =>
+          executeProtectedAction(() => setShowEvidenceModal(true))
+        }
+      />
+
+      <MilestoneDetailInfo milestone={milestone} campaign={campaign} />
+
+      <MilestoneDetailDescription
+        content={milestone.description || ''}
+        title='Description'
+      />
+
+      <MilestoneDetailLinks campaign={campaign} />
+
+      {/* Evidence Submission Modal */}
+      <SubmitEvidenceModal
+        open={showEvidenceModal}
+        onOpenChange={setShowEvidenceModal}
+        milestoneId={milestone._id}
+        milestoneName={milestone.title}
+        onSubmit={handleSubmitEvidence}
+        isSubmitting={isSubmitting}
+      />
+
+      {/* Wallet Required Modal */}
+      <WalletRequiredModal
+        open={showWalletModal}
+        onOpenChange={closeWalletModal}
+        actionName='submit evidence'
+        onWalletConnected={handleWalletConnected}
+      />
+    </div>
+  );
+}
diff --git a/app/me/crowdfunding/[slug]/milestones/page.tsx b/app/me/crowdfunding/[slug]/milestones/page.tsx
new file mode 100644
index 000000000..1e21715bb
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/milestones/page.tsx
@@ -0,0 +1,125 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { ArrowLeft } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+
+import { getCrowdfundingProject } from '@/features/projects/api';
+import { Crowdfunding } from '@/features/projects/types';
+
+import { MilestoneCard } from '@/components/crowdfunding/milestone-card';
+import { MilestonesMetrics } from '@/components/crowdfunding/milestones-metrics';
+import { MilestonesPagination } from '@/components/crowdfunding/milestones-pagination';
+
+interface PageProps {
+  params: Promise<{
+    slug: string;
+  }>;
+}
+
+const ITEMS_PER_PAGE = 4;
+
+export default function MilestonesPage({ params }: PageProps) {
+  const [campaign, setCampaign] = useState<Crowdfunding | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  useEffect(() => {
+    const fetchCampaign = async () => {
+      try {
+        const { slug } = await params;
+        const data = await getCrowdfundingProject(slug);
+        setCampaign(data);
+      } catch {
+        setError(true);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchCampaign();
+  }, [params]);
+
+  if (loading) {
+    return (
+      <div className='container mx-auto max-w-7xl px-4 py-12'>
+        <div className='text-muted-foreground text-center'>Loading...</div>
+      </div>
+    );
+  }
+
+  if (error || !campaign) {
+    return (
+      <div className='container mx-auto max-w-7xl px-4 py-12'>
+        <div className='text-muted-foreground text-center'>
+          Campaign not found
+        </div>
+      </div>
+    );
+  }
+
+  const milestones = campaign.milestones || [];
+  const totalAmount = milestones.reduce((sum, m) => sum + m.amount, 0);
+  const totalPages = Math.ceil(milestones.length / ITEMS_PER_PAGE);
+  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+  const paginatedMilestones = milestones.slice(
+    startIndex,
+    startIndex + ITEMS_PER_PAGE
+  );
+
+  return (
+    <div className='container mx-auto max-w-7xl space-y-8 px-4 py-8'>
+      {/* Header */}
+      <div className='flex items-center justify-between'>
+        <div className='flex items-center gap-4'>
+          <Button variant='ghost' size='sm' asChild className='h-8 w-8 p-0'>
+            <Link href={`/me/crowdfunding/${campaign.slug}`}>
+              <ArrowLeft className='h-4 w-4' />
+            </Link>
+          </Button>
+          <div>
+            <h1 className='text-3xl font-bold tracking-tight'>Milestones</h1>
+            <p className='text-muted-foreground mt-1 text-sm'>
+              {milestones.length} milestone{milestones.length !== 1 ? 's' : ''}{' '}
+              total
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Metrics Section */}
+      {milestones.length > 0 && <MilestonesMetrics milestones={milestones} />}
+
+      {/* Milestones List */}
+      {milestones.length > 0 ? (
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+          {paginatedMilestones.map((milestone, index) => (
+            <MilestoneCard
+              key={milestone.id || index}
+              milestone={milestone}
+              index={startIndex + index}
+              totalAmount={totalAmount}
+              campaignSlug={`/me/crowdfunding/${campaign.slug}`}
+            />
+          ))}
+        </div>
+      ) : (
+        <div className='py-12 text-center'>
+          <p className='text-muted-foreground'>No milestones created yet</p>
+        </div>
+      )}
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <MilestonesPagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={setCurrentPage}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/app/me/crowdfunding/[slug]/page.tsx b/app/me/crowdfunding/[slug]/page.tsx
new file mode 100644
index 000000000..9f29b764c
--- /dev/null
+++ b/app/me/crowdfunding/[slug]/page.tsx
@@ -0,0 +1,126 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { ArrowLeft, Edit } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+
+import { getCrowdfundingProject } from '@/features/projects/api';
+import { Crowdfunding } from '@/features/projects/types';
+
+import {
+  CampaignBanner,
+  ProjectDetails,
+  CampaignTabs,
+  FundingProgress,
+  ProjectLinks,
+  TagsSection,
+} from './components';
+import { CampaignStats } from '@/components/crowdfunding/campaign-stats';
+
+interface PageProps {
+  params: Promise<{
+    slug: string;
+  }>;
+}
+
+export default function CampaignViewPage({ params }: PageProps) {
+  const [campaign, setCampaign] = useState<Crowdfunding | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    const fetchCampaign = async () => {
+      try {
+        const { slug } = await params;
+        const data = await getCrowdfundingProject(slug);
+        setCampaign(data);
+      } catch {
+        setError(true);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchCampaign();
+  }, [params]);
+
+  if (loading) {
+    return (
+      <div className='container mx-auto max-w-7xl px-4 py-12'>
+        <div className='text-muted-foreground text-center'>Loading...</div>
+      </div>
+    );
+  }
+
+  if (error || !campaign) {
+    return (
+      <div className='container mx-auto max-w-7xl px-4 py-12'>
+        <div className='text-muted-foreground text-center'>
+          Campaign not found
+        </div>
+      </div>
+    );
+  }
+
+  const project = campaign.project;
+
+  return (
+    <div className='container mx-auto max-w-7xl space-y-8 px-4 py-8'>
+      {/* Header */}
+      <div className='flex items-start justify-between'>
+        <div className='flex-1'>
+          <div className='mb-4 flex items-center gap-3'>
+            <Button variant='ghost' size='sm' asChild className='h-8 w-8 p-0'>
+              <Link href='/me/crowdfunding'>
+                <ArrowLeft className='h-4 w-4' />
+              </Link>
+            </Button>
+            <div>
+              <h1 className='text-3xl font-bold tracking-tight'>
+                {project.title}
+              </h1>
+              <p className='text-muted-foreground mt-1 text-sm'>
+                {project.vision ? project.vision.slice(0, 80) : 'Campaign'}
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className='flex items-center gap-2'>
+          <Button variant='outline' size='sm' asChild>
+            <Link href={`/me/crowdfunding/${campaign.slug}/contributions`}>
+              Contributions
+            </Link>
+          </Button>
+          <Button size='sm' asChild>
+            <Link href={`/me/crowdfunding/${campaign.slug}/edit`}>
+              <Edit className='mr-2 h-4 w-4' />
+              Edit
+            </Link>
+          </Button>
+        </div>
+      </div>
+
+      {/* Campaign Stats */}
+      <CampaignStats campaign={campaign} />
+
+      {/* Main Content Grid */}
+      <div className='grid grid-cols-1 gap-8 lg:grid-cols-4'>
+        {/* Left Column - Main Content */}
+        <div className='space-y-6 lg:col-span-3'>
+          <CampaignBanner project={project} />
+          <ProjectDetails campaign={campaign} project={project} />
+          <CampaignTabs campaign={campaign} />
+        </div>
+
+        {/* Right Sidebar */}
+        <div className='space-y-6'>
+          <FundingProgress campaign={campaign} />
+          <ProjectLinks project={project} />
+          <TagsSection project={project} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/me/crowdfunding/page.tsx b/app/me/crowdfunding/page.tsx
new file mode 100644
index 000000000..c062e5ab3
--- /dev/null
+++ b/app/me/crowdfunding/page.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import * as React from 'react';
+import Link from 'next/link';
+import { Plus } 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 {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+
+export default function MyCrowdfundingPage() {
+  const { user } = useAuthStatus();
+  const [data, setData] = React.useState<CrowdfundingCampaign[]>([]);
+  const [pagination, setPagination] = React.useState({
+    page: 1,
+    limit: 10,
+    total: 0,
+    totalPages: 0,
+  });
+  const [loading, setLoading] = React.useState(false);
+
+  const fetchCampaigns = React.useCallback(async (page = 1, limit = 10) => {
+    try {
+      setLoading(true);
+      const response = await getMyCrowdfundingProjects(page, limit);
+      setData(response.data.data || []);
+      if (response.meta?.pagination) {
+        setPagination(response.meta.pagination);
+      }
+    } catch {
+      // Error handled by UI state
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (user) {
+      fetchCampaigns();
+    }
+  }, [user, fetchCampaigns]);
+
+  if (loading) {
+    return (
+      <div className='mx-auto flex h-screen items-center justify-center py-10'>
+        <LoadingSpinner size='xl' />
+      </div>
+    );
+  }
+
+  return (
+    <Card className='bg-background border-border/10 container mx-auto py-10'>
+      <div className='flex items-center justify-between space-y-2'>
+        <CardHeader className='flex w-full items-center justify-between'>
+          <div>
+            <CardTitle className='text-foreground'>
+              Campaigns Overview
+            </CardTitle>
+            <CardDescription className='text-muted-foreground'>
+              A list of all your crowdfunding campaigns including their current
+              status and funding progress.
+            </CardDescription>
+          </div>
+          <div className='flex items-center space-x-2'>
+            <Button asChild className='bg-primary hover:bg-primary/90'>
+              <Link href='/projects/create'>
+                <Plus className='mr-2 h-4 w-4' />
+                Create Campaign
+              </Link>
+            </Button>
+          </div>
+        </CardHeader>
+      </div>
+
+      <div className='mt-6 space-y-4'>
+        <CrowdfundingDataTable
+          data={data}
+          pagination={pagination}
+          onPaginationChange={fetchCampaigns}
+          onDeleteSuccess={() =>
+            fetchCampaigns(pagination.page, pagination.limit)
+          }
+          loading={loading}
+        />
+      </div>
+    </Card>
+  );
+}
diff --git a/app/me/layout.tsx b/app/me/layout.tsx
new file mode 100644
index 000000000..865b62341
--- /dev/null
+++ b/app/me/layout.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import { AppSidebar } from '@/components/app-sidebar';
+import { SiteHeader } from '@/components/site-header';
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
+import { useAuthStatus } from '@/hooks/use-auth';
+import React from 'react';
+import LoadingSpinner from '@/components/LoadingSpinner';
+
+export default function MeLayout({ children }: { children: React.ReactNode }) {
+  const { user, isLoading } = useAuthStatus();
+
+  if (isLoading) {
+    return (
+      <div className='flex h-screen items-center justify-center'>
+        <LoadingSpinner size='xl' color='white' />
+      </div>
+    );
+  }
+
+  const { name = '', email = '', profile, image: userImage = '' } = user || {};
+
+  const userData = {
+    name: name || '',
+    email,
+    image: profile?.image || userImage,
+  };
+
+  return (
+    <SidebarProvider
+      style={
+        {
+          '--sidebar-width': 'calc(var(--spacing) * 72)',
+          '--header-height': 'calc(var(--spacing) * 12)',
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar user={userData} variant='inset' />
+      <SidebarInset className='bg-[#0e0c0c]'>
+        <SiteHeader />
+        <div className='flex flex-1 flex-col'>{children}</div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}
diff --git a/app/(landing)/me/loading.tsx b/app/me/loading.tsx
similarity index 100%
rename from app/(landing)/me/loading.tsx
rename to app/me/loading.tsx
diff --git a/app/(landing)/me/page.tsx b/app/me/page.tsx
similarity index 50%
rename from app/(landing)/me/page.tsx
rename to app/me/page.tsx
index 2a6d9c4ae..5a29f8b5c 100644
--- a/app/(landing)/me/page.tsx
+++ b/app/me/page.tsx
@@ -1,5 +1,11 @@
+import { Metadata } from 'next';
 import { AuthGuard } from '@/components/auth';
-import { ProfileData } from './profile-data';
+import { MeDashboard } from '@/components/me-dashboard';
+
+export const metadata: Metadata = {
+  title: 'My Profile | Boundless',
+  description: 'View and manage your profile on Boundless',
+};
 
 export default async function MePage() {
   return (
@@ -7,9 +13,7 @@ export default async function MePage() {
       redirectTo='/auth?mode=signin'
       fallback={<div className='p-8 text-center'>Authenticating...</div>}
     >
-      <section className=''>
-        <ProfileData />
-      </section>
+      <MeDashboard />
     </AuthGuard>
   );
 }
diff --git a/app/(landing)/me/profile-data.tsx b/app/me/profile-data.tsx
similarity index 91%
rename from app/(landing)/me/profile-data.tsx
rename to app/me/profile-data.tsx
index e11d7eb23..082949cb4 100644
--- a/app/(landing)/me/profile-data.tsx
+++ b/app/me/profile-data.tsx
@@ -2,18 +2,17 @@
 import ProfileDataClient from '@/components/profile/ProfileDataClient';
 import { UserPageSkeleton } from '@/components/skeleton/UserPageSkeleton';
 import { useEffect, useState } from 'react';
-import { User } from '@/types/user';
 import { getMe } from '@/lib/api/auth';
+import { GetMeResponse } from '@/lib/api/types';
 
 export function ProfileData() {
-  const [userData, setUserData] = useState<User | null>(null);
+  const [userData, setUserData] = useState<GetMeResponse | null>(null);
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     const fetchUserData = async () => {
       try {
         const user = await getMe();
-        console.trace(user);
         setUserData(user);
       } catch {
         setUserData(null);
diff --git a/app/me/projects/page.tsx b/app/me/projects/page.tsx
new file mode 100644
index 000000000..766e689b4
--- /dev/null
+++ b/app/me/projects/page.tsx
@@ -0,0 +1,119 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { getMe } from '@/lib/api/auth';
+import { GetMeResponse } from '@/lib/api/types';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Package, ArrowLeft } from 'lucide-react';
+import { useAuthStatus } from '@/hooks/use-auth';
+import { mapProjectToCardData } from '@/features/projects/utils/card-mappers';
+import ProjectCard from '@/features/projects/components/ProjectCard';
+
+// ... (existing imports)
+
+export default function MyProjectsPage() {
+  const { user: authUser, isLoading } = useAuthStatus();
+  const [meData, setMeData] = useState<GetMeResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const data = await getMe();
+        setMeData(data);
+      } catch {
+        // console.error('Failed to fetch user data:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (authUser) {
+      fetchData();
+    }
+  }, [authUser]);
+
+  if (isLoading || loading) {
+    // ... (rendering loading)
+    return (
+      <div className='container mx-auto px-4 py-8'>
+        <div className='text-center'>Loading...</div>
+      </div>
+    );
+  }
+
+  if (!meData) {
+    // ... (rendering error)
+    return (
+      <div className='container mx-auto px-4 py-8'>
+        <div className='text-center'>Failed to load data</div>
+      </div>
+    );
+  }
+
+  const projects = meData.user.projects || [];
+
+  // Sort projects by createdAt in descending order (newest first)
+  const sortedProjects = [...projects].sort(
+    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+  );
+
+  return (
+    <div className='container mx-auto px-4 py-8'>
+      <div className='mb-6'>
+        {/* ... (header) ... */}
+        <Button asChild variant='ghost' className='mb-4'>
+          <Link href='/me' className='flex items-center gap-2'>
+            <ArrowLeft className='h-4 w-4' />
+            Back to Profile
+          </Link>
+        </Button>
+
+        <div className='flex items-center justify-between'>
+          <div>
+            <h1 className='text-3xl font-bold text-white'>My Projects</h1>
+            <p className='mt-2 text-white/70'>
+              All your project creations ({projects.length} total)
+            </p>
+          </div>
+          <Button asChild>
+            <Link href='/projects/create'>Create New Project</Link>
+          </Button>
+        </div>
+      </div>
+
+      {sortedProjects.length === 0 ? (
+        <Card className='bg-background border-border/10'>
+          <CardContent className='py-12 text-center'>
+            <Package className='mx-auto mb-4 h-16 w-16 text-white/30' />
+            <h3 className='mb-2 text-xl font-semibold text-white'>
+              No Projects Yet
+            </h3>
+            <p className='mb-6 text-white/60'>
+              You haven't created any projects yet. Start building something
+              amazing!
+            </p>
+            <Button asChild>
+              <Link href='/projects/create'>Create Your First Project</Link>
+            </Button>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'>
+          {sortedProjects.map(project => (
+            <ProjectCard
+              isFullWidth
+              key={project.id}
+              data={mapProjectToCardData(project, {
+                name: authUser?.name || 'You',
+                image: authUser?.image || '/user.png',
+              })}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/(landing)/me/settings/SettingsContent.tsx b/app/me/settings/SettingsContent.tsx
similarity index 95%
rename from app/(landing)/me/settings/SettingsContent.tsx
rename to app/me/settings/SettingsContent.tsx
index 6b382e547..d27d9d92e 100644
--- a/app/(landing)/me/settings/SettingsContent.tsx
+++ b/app/me/settings/SettingsContent.tsx
@@ -4,10 +4,11 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useEffect, useState } from 'react';
 import { User } from '@/types/user';
 import { getMe } from '@/lib/api/auth';
+import { GetMeResponse } from '@/lib/api/types';
 import { Skeleton } from '@/components/ui/skeleton';
 import Settings from '@/components/profile/update/Settings';
 const SettingsContent = () => {
-  const [userData, setUserData] = useState<User | null>(null);
+  const [userData, setUserData] = useState<GetMeResponse | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   useEffect(() => {
     const fetchUserData = async () => {
@@ -88,7 +89,7 @@ const SettingsContent = () => {
             </TabsTrigger>
           </TabsList>
           <TabsContent value='profile'>
-            <Profile user={userData as User} />
+            <Profile user={userData?.user as User} />
           </TabsContent>
           <TabsContent value='settings'>
             <Settings />
diff --git a/app/(landing)/me/settings/page.tsx b/app/me/settings/page.tsx
similarity index 100%
rename from app/(landing)/me/settings/page.tsx
rename to app/me/settings/page.tsx
diff --git a/app/sitemap.ts b/app/sitemap.ts
index e952be06b..7189496d5 100644
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@@ -1,10 +1,10 @@
 import { MetadataRoute } from 'next';
 import { getBlogPosts } from '@/lib/api/blog';
 import { getHackathons } from '@/lib/api/hackathons';
-import { getCrowdfundingProjects } from '@/lib/api/project';
+import { getCrowdfundingProjects } from '@/features/projects/api';
 import type { BlogPost } from '@/types/blog';
 import type { Hackathon } from '@/types/hackathon/core';
-import type { Crowdfunding } from '@/types/project';
+import type { Crowdfunding } from '@/features/projects/types';
 
 // Constants
 const SITE_URL = 'https://www.boundlessfi.xyz';
diff --git a/components.json b/components.json
index 4ee62ee10..b858c5b23 100644
--- a/components.json
+++ b/components.json
@@ -10,6 +10,7 @@
     "cssVariables": true,
     "prefix": ""
   },
+  "iconLibrary": "lucide",
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
@@ -17,5 +18,8 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "iconLibrary": "lucide"
+  "registries": {
+    "@diceui": "https://diceui.com/r/{name}.json",
+    "@aceternity": "https://ui.aceternity.com/registry/{name}.json"
+  }
 }
diff --git a/components/EmptyState.tsx b/components/EmptyState.tsx
index c222845b5..828be6216 100644
--- a/components/EmptyState.tsx
+++ b/components/EmptyState.tsx
@@ -1,101 +1,136 @@
 'use client';
 
-import React, { useEffect, useRef } from 'react';
-import { Plus } from 'lucide-react';
-import LottieAnimation from './LottieAnimation';
+import React from 'react';
+import { motion, Variants } from 'framer-motion';
+import { BrushCleaning, Plus } from 'lucide-react';
+import { cn } from '@/lib/utils'; // Assuming a utility for class merging exists, otherwise will use template literals
 
+/**
+ * Props for the EmptyState component.
+ */
 export interface EmptyStateProps {
+  /** The main title of the empty state */
   title?: string;
+  /** A descriptive message explaining the empty state */
   description?: string;
+  /** Text to display on the action button (if default action is used) */
   buttonText?: string;
+  /** Callback function when the default action button is clicked */
   onAddClick?: () => void;
+  /** Additional custom classes for the container */
   className?: string;
+  /** Visual style variant of the empty state */
   type?: 'default' | 'compact' | 'custom';
-  action?: React.ReactNode | boolean;
+  /** Custom action element to replace the default button. If undefined, default button is shown. */
+  action?: React.ReactNode;
 }
 
+/**
+ * EmptyState Component
+ * Displays a placeholder when no data is available, with optional call-to-action.
+ */
 const EmptyState: React.FC<EmptyStateProps> = ({
   title = 'No Projects',
   description = 'There are currently no projects here. Go ahead and create the first one!',
   buttonText = 'Add Project',
-  onAddClick = () => {},
+  onAddClick,
   className = '',
   type = 'default',
-  action = false,
+  action,
 }) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const titleRef = useRef<HTMLHeadingElement>(null);
-  const descriptionRef = useRef<HTMLParagraphElement>(null);
-  const buttonRef = useRef<HTMLButtonElement>(null);
+  // Animation variants for staggered entrance
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.2,
+      },
+    },
+  };
 
-  useEffect(() => {
-    const elements = [
-      containerRef.current,
-      titleRef.current,
-      descriptionRef.current,
-      buttonRef.current,
-    ];
+  const itemVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.5, ease: 'easeOut' },
+    },
+  };
 
-    elements.forEach((el, index) => {
-      if (el) {
-        el.style.opacity = '0';
-        el.style.transform = 'translateY(30px)';
-        setTimeout(() => {
-          el.style.transition = 'all 0.6s ease-out';
-          el.style.opacity = '1';
-          el.style.transform = 'translateY(0)';
-        }, index * 150);
-      }
-    });
-  }, []);
+  // Determine button styles based on type
+  const getButtonStyle = () => {
+    const baseStyle =
+      'flex items-center justify-center gap-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2';
 
-  const buttonStyle =
-    type === 'compact'
-      ? 'px-4 py-2 text-sm'
-      : type === 'custom'
-        ? 'px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white'
-        : 'px-6 py-3';
+    switch (type) {
+      case 'compact':
+        return `${baseStyle} px-4 py-2 text-sm bg-[#00D2A4] text-black hover:bg-[#00B894] focus:ring-[#00D2A4] shadow-sm`;
+      case 'custom':
+        return `${baseStyle} px-6 py-3 bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-md`;
+      default:
+        return `${baseStyle} px-6 py-3 bg-[#00D2A4] text-black hover:bg-[#00B894] focus:ring-[#00D2A4] shadow-[0_2px_8px_rgba(0,210,164,0.2)]`;
+    }
+  };
 
   return (
-    <div
-      ref={containerRef}
-      className={`flex min-h-[400px] flex-col items-center justify-center p-8 ${className}`}
+    <motion.div
+      variants={containerVariants}
+      initial='hidden'
+      animate='visible'
+      className={cn(
+        'flex flex-col items-center justify-center p-8 text-center',
+        className,
+        type === 'compact' ? 'min-h-[200px]' : 'min-h-[400px]'
+      )}
     >
-      {/* Illustration */}
-      <div className='relative mb-8'>
-        <LottieAnimation />
-      </div>
+      {/* Icon */}
+      <motion.div
+        variants={itemVariants}
+        className='mb-6 text-gray-500 dark:text-gray-400'
+      >
+        <BrushCleaning size={type === 'compact' ? 60 : 100} strokeWidth={1} />
+      </motion.div>
 
       {/* Title */}
-      <h2
-        ref={titleRef}
-        className='mb-3 text-center text-2xl font-semibold text-white md:text-3xl'
+      <motion.h2
+        variants={itemVariants}
+        className={cn(
+          'text-foreground font-semibold',
+          type === 'compact' ? 'mb-2 text-xl' : 'mb-4 text-3xl'
+        )}
       >
         {title}
-      </h2>
+      </motion.h2>
 
       {/* Description */}
-      <p
-        ref={descriptionRef}
-        className='mb-8 max-w-md px-4 text-center leading-relaxed text-gray-400'
+      <motion.p
+        variants={itemVariants}
+        className={cn(
+          'text-muted-foreground mx-auto',
+          type === 'compact'
+            ? 'mb-6 max-w-xs text-sm'
+            : 'mb-8 max-w-md text-base'
+        )}
       >
         {description}
-      </p>
+      </motion.p>
 
-      {/* Button or custom action */}
-      {action === false ? null : action ? (
-        action
+      {/* Action Area */}
+      {action !== undefined ? (
+        <motion.div variants={itemVariants}>{action}</motion.div>
       ) : (
-        <button
-          ref={buttonRef}
-          onClick={onAddClick}
-          className={`focus:ring-opacity-50 flex w-auto transform items-center justify-center gap-2 rounded-[8px] bg-[#00D2A4] font-medium text-black shadow-[0_2px_8px_rgba(0,210,164,0.2)] transition-all duration-200 ease-out hover:bg-[#00B894] focus:ring-2 focus:ring-[#00D2A4] focus:outline-none ${buttonStyle}`}
-        >
-          <Plus size={18} />
-          {buttonText}
-        </button>
+        onAddClick && (
+          <motion.div variants={itemVariants}>
+            <button onClick={onAddClick} className={getButtonStyle()}>
+              <Plus size={18} />
+              {buttonText}
+            </button>
+          </motion.div>
+        )
       )}
-    </div>
+    </motion.div>
   );
 };
 
diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx
index a2d77de40..2b3fa0cc3 100644
--- a/components/ProjectCard.tsx
+++ b/components/ProjectCard.tsx
@@ -1,6 +1,6 @@
 'use client';
 import React, { useRef, useCallback, memo } from 'react';
-import { CrowdfundingProject } from '@/types/project';
+import { CrowdfundingProject } from '@/features/projects/types';
 import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
 import { Badge } from './ui/badge';
 import gsap from 'gsap';
diff --git a/components/app-sidebar.tsx b/components/app-sidebar.tsx
new file mode 100644
index 000000000..ad72176a8
--- /dev/null
+++ b/components/app-sidebar.tsx
@@ -0,0 +1,157 @@
+'use client';
+
+import * as React from 'react';
+import {
+  IconBell,
+  IconChartBar,
+  IconDashboard,
+  IconFileText,
+  IconFolder,
+  IconSettings,
+  IconShieldCheck,
+  IconUserCircle,
+  IconUsers,
+} from '@tabler/icons-react';
+
+import { NavMain } from '@/components/nav-main';
+import { NavUser } from '@/components/nav-user';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/components/ui/sidebar';
+import Image from 'next/image';
+import Link from 'next/link';
+
+const navigationData = {
+  main: [
+    {
+      title: 'Overview',
+      url: '/me',
+      icon: IconDashboard,
+    },
+    {
+      title: 'Analytics',
+      url: '/me/analytics',
+      icon: IconChartBar,
+    },
+  ],
+  projects: [
+    {
+      title: 'My Projects',
+      url: '/me/projects',
+      icon: IconFolder,
+      badge: '3',
+    },
+    {
+      title: 'Create Project',
+      url: '/me/projects/create',
+      icon: IconFileText,
+    },
+  ],
+  hackathons: [
+    {
+      title: 'Participating',
+      url: '/me/hackathons',
+      icon: IconShieldCheck,
+      badge: '2',
+    },
+    {
+      title: 'Submissions',
+      url: '/me/hackathons/submissions',
+      icon: IconUsers,
+    },
+  ],
+  crowdfunding: [
+    {
+      title: 'Campaigns',
+      url: '/me/crowdfunding',
+      icon: IconShieldCheck,
+    },
+  ],
+  account: [
+    {
+      title: 'Profile',
+      url: '/me/profile',
+      icon: IconUserCircle,
+    },
+    {
+      title: 'Settings',
+      url: '/me/settings',
+      icon: IconSettings,
+    },
+    {
+      title: 'Notifications',
+      url: '/me/notifications',
+      icon: IconBell,
+      badge: '5',
+    },
+  ],
+};
+interface userData {
+  name: string;
+  email: string;
+  image: string;
+}
+export function AppSidebar({
+  user,
+  ...props
+}: { user: userData } & React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar collapsible='icon' {...props}>
+      <div className='pointer-events-none absolute inset-0 overflow-hidden'>
+        <div className='absolute right-0 bottom-0 left-0 h-[300px] opacity-50'>
+          <Image
+            src='/wave.svg'
+            alt='Background Pattern'
+            width={300}
+            height={300}
+            className='h-full w-full object-cover'
+          />
+        </div>
+      </div>
+
+      {/* Header with Logo */}
+      <SidebarHeader className='border-sidebar-border/50 border-b'>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              asChild
+              size='lg'
+              className='group hover:bg-sidebar-accent/0 transition-all duration-200'
+            >
+              <Link href='/dashboard' className='flex items-center gap-3'>
+                <div className='flex items-center justify-center rounded-lg'>
+                  <Image
+                    width={24}
+                    height={24}
+                    className='h-auto w-4/5 object-contain'
+                    src='/logo.svg'
+                    alt='Boundless Logo'
+                  />
+                </div>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      {/* Main Content */}
+      <SidebarContent className='gap-4 px-2 py-4'>
+        <NavMain items={navigationData.main} />
+        <NavMain items={navigationData.projects} label='Projects' />
+        <NavMain items={navigationData.crowdfunding} label='Crowdfunding' />
+        <NavMain items={navigationData.hackathons} label='Hackathons' />
+        <NavMain items={navigationData.account} label='Account' />
+      </SidebarContent>
+      {/* Footer with User */}
+      <SidebarFooter className='border-sidebar-border/50 border-t p-2 backdrop-blur-sm'>
+        <NavUser user={user} />
+      </SidebarFooter>
+    </Sidebar>
+  );
+}
diff --git a/components/chart-area-interactive.tsx b/components/chart-area-interactive.tsx
new file mode 100644
index 000000000..7a5110b3c
--- /dev/null
+++ b/components/chart-area-interactive.tsx
@@ -0,0 +1,160 @@
+'use client';
+
+import * as React from 'react';
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';
+import { motion } from 'framer-motion';
+
+import { useIsMobile } from '@/hooks/use-mobile';
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@/components/ui/chart';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+
+const chartConfig = {
+  projects: {
+    label: 'Projects Created',
+    color: '#a7f950',
+  },
+} satisfies ChartConfig;
+
+interface ChartAreaInteractiveProps {
+  chartData?: Array<{ date: string; projects: number }>;
+  title?: string;
+  description?: string;
+}
+
+export function ChartAreaInteractive({
+  chartData = [],
+  title = 'Total Projects Created',
+  description: desc = 'Total for the last 3 months',
+}: ChartAreaInteractiveProps = {}) {
+  const isMobile = useIsMobile();
+  const [timeRange, setTimeRange] = React.useState('90d');
+
+  React.useEffect(() => {
+    if (isMobile) {
+      setTimeRange('7d');
+    }
+  }, [isMobile]);
+
+  const filteredData = chartData.filter(item => {
+    const date = new Date(item.date);
+    const referenceDate = new Date();
+    let daysToSubtract = 90;
+    if (timeRange === '30d') {
+      daysToSubtract = 30;
+    } else if (timeRange === '7d') {
+      daysToSubtract = 7;
+    }
+    const startDate = new Date(referenceDate);
+    startDate.setDate(startDate.getDate() - daysToSubtract);
+    return date >= startDate;
+  });
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.6 }}
+    >
+      <Card className='bg-background border-border/10 hover:border-primary/30 hover:shadow-primary/10 @container/card border transition-all duration-300 hover:shadow-lg'>
+        <CardHeader>
+          <CardTitle className='text-white'>{title}</CardTitle>
+          <CardDescription className='text-white/70'>
+            <span className='hidden @[540px]/card:block'>{desc}</span>
+            <span className='@[540px]/card:hidden'>{desc}</span>
+          </CardDescription>
+          <CardAction>
+            <ToggleGroup
+              type='single'
+              value={timeRange}
+              onValueChange={setTimeRange}
+              variant='outline'
+              className='*:data-[state=on]:border-primary! *:data-[state=on]:bg-primary/20! hidden *:data-[slot=toggle-group-item]:border-white/30! *:data-[slot=toggle-group-item]:px-4! *:data-[slot=toggle-group-item]:text-white/60! *:data-[slot=toggle-group-item]:hover:border-white/50! *:data-[slot=toggle-group-item]:hover:bg-white/5! *:data-[slot=toggle-group-item]:hover:text-white! *:data-[state=on]:px-4! *:data-[state=on]:text-white! @[767px]/card:flex'
+            >
+              <ToggleGroupItem value='90d'>Last 3 months</ToggleGroupItem>
+              <ToggleGroupItem value='30d'>Last 30 days</ToggleGroupItem>
+              <ToggleGroupItem value='7d'>Last 7 days</ToggleGroupItem>
+            </ToggleGroup>
+            <Select value={timeRange} onValueChange={setTimeRange}>
+              <SelectTrigger
+                className='flex w-40 **:data-[slot=select-trigger]:border-white/30! **:data-[slot=select-trigger]:hover:border-white/50! **:data-[slot=select-trigger]:hover:bg-white/5! **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate **:data-[slot=select-value]:text-white/60! @[767px]/card:hidden'
+                size='sm'
+                aria-label='Select a value'
+              >
+                <SelectValue placeholder='Last 3 months' />
+              </SelectTrigger>
+              <SelectContent className='rounded-xl'>
+                <SelectItem value='90d'>Last 3 months</SelectItem>
+                <SelectItem value='30d'>Last 30 days</SelectItem>
+                <SelectItem value='7d'>Last 7 days</SelectItem>
+              </SelectContent>
+            </Select>
+          </CardAction>
+        </CardHeader>
+        <CardContent className='px-2 pt-4 sm:px-6 sm:pt-6'>
+          <ChartContainer
+            config={chartConfig}
+            className='aspect-auto h-[250px] w-full'
+          >
+            <BarChart data={filteredData}>
+              <CartesianGrid vertical={false} stroke='rgba(255,255,255,0.1)' />
+              <XAxis
+                dataKey='date'
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                tick={{ fill: 'rgba(255,255,255,0.6)', fontSize: 12 }}
+                tickFormatter={value => {
+                  const date = new Date(value);
+                  return date.toLocaleDateString('en-US', {
+                    month: 'short',
+                    day: 'numeric',
+                  });
+                }}
+              />
+              <ChartTooltip
+                cursor={false}
+                content={
+                  <ChartTooltipContent
+                    className='bg-background! border-border/20! w-[150px] text-white!'
+                    labelFormatter={value => {
+                      return new Date(value).toLocaleDateString('en-US', {
+                        month: 'short',
+                        day: 'numeric',
+                        year: 'numeric',
+                      });
+                    }}
+                  />
+                }
+              />
+              <Bar
+                dataKey='projects'
+                fill='var(--color-projects)'
+                radius={[4, 4, 0, 0]}
+              />
+            </BarChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+    </motion.div>
+  );
+}
diff --git a/components/crowdfunding-data-table.tsx b/components/crowdfunding-data-table.tsx
new file mode 100644
index 000000000..3d52ac81e
--- /dev/null
+++ b/components/crowdfunding-data-table.tsx
@@ -0,0 +1,180 @@
+'use client';
+
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { CardContent } from '@/components/ui/card';
+import { DataTablePagination } from '@/components/ui/data-table-pagination';
+import { CrowdfundingCampaign } from '@/lib/api/types';
+import { getCrowdfundingTableColumns } from './crowdfunding-table-columns';
+import { CrowdfundingTableToolbar } from './crowdfunding-table-toolbar';
+
+interface CrowdfundingDataTableProps {
+  data: CrowdfundingCampaign[];
+  pagination: {
+    page: number;
+    limit: number;
+    total: number;
+    totalPages: number;
+  };
+  onPaginationChange: (page: number, limit: number) => void;
+  onDeleteSuccess?: () => void;
+  loading?: boolean;
+}
+
+export function CrowdfundingDataTable({
+  data,
+  pagination,
+  onPaginationChange,
+  onDeleteSuccess,
+  loading = false,
+}: CrowdfundingDataTableProps) {
+  const router = useRouter();
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [paginationState, setPaginationState] = React.useState<PaginationState>(
+    {
+      pageIndex: pagination.page - 1, // TanStack uses 0-based indexing
+      pageSize: pagination.limit,
+    }
+  );
+
+  React.useEffect(() => {
+    setPaginationState({
+      pageIndex: pagination.page - 1,
+      pageSize: pagination.limit,
+    });
+  }, [pagination.page, pagination.limit]);
+
+  const columns = getCrowdfundingTableColumns(onDeleteSuccess);
+
+  const table = useReactTable({
+    data: data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onPaginationChange: updater => {
+      const newPagination =
+        typeof updater === 'function' ? updater(paginationState) : updater;
+      setPaginationState(newPagination);
+      // Convert from 0-based to 1-based indexing for API call
+      onPaginationChange(newPagination.pageIndex + 1, newPagination.pageSize);
+    },
+    onRowSelectionChange: setRowSelection,
+    manualPagination: true,
+    rowCount: pagination.total,
+    pageCount: pagination.totalPages,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination: paginationState,
+    },
+  });
+
+  const handleRowClick = (campaign: CrowdfundingCampaign) => {
+    router.push(`/me/crowdfunding/${campaign.slug}`);
+  };
+
+  return (
+    <CardContent className='space-y-4'>
+      <CrowdfundingTableToolbar table={table} />
+
+      <div className='border-border bg-background rounded-md border'>
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map(headerGroup => (
+              <TableRow
+                key={headerGroup.id}
+                className='border-border hover:bg-muted/50'
+              >
+                {headerGroup.headers.map(header => {
+                  return (
+                    <TableHead key={header.id} className='text-foreground'>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className='text-muted-foreground h-24 text-center'
+                >
+                  Loading campaigns...
+                </TableCell>
+              </TableRow>
+            ) : table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map(row => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                  className='border-border hover:bg-muted/50 cursor-pointer'
+                  onClick={() => handleRowClick(row.original)}
+                >
+                  {row.getVisibleCells().map(cell => (
+                    <TableCell key={cell.id} className='text-foreground'>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className='text-muted-foreground h-24 text-center'
+                >
+                  No campaigns found.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <DataTablePagination table={table} loading={loading} />
+    </CardContent>
+  );
+}
diff --git a/components/crowdfunding-table-columns.tsx b/components/crowdfunding-table-columns.tsx
new file mode 100644
index 000000000..57950d15f
--- /dev/null
+++ b/components/crowdfunding-table-columns.tsx
@@ -0,0 +1,305 @@
+'use client';
+
+import Link from 'next/link';
+import { format } from 'date-fns';
+import { ArrowUpDown, MoreHorizontal, Eye, Edit, Trash2 } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { ColumnDef } from '@tanstack/react-table';
+import { DeleteCampaignAlert } from '@/components/delete-campaign-alert';
+import { CrowdfundingCampaign } from '@/lib/api/types';
+
+export const getCrowdfundingTableColumns = (
+  onDeleteSuccess?: () => void
+): ColumnDef<CrowdfundingCampaign>[] => [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && 'indeterminate')
+        }
+        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
+        aria-label='Select all'
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={value => row.toggleSelected(!!value)}
+        aria-label='Select row'
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    id: 'project.title',
+    accessorKey: 'project.title',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant='ghost'
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          className='text-foreground hover:bg-muted/50 h-auto p-0 font-medium'
+        >
+          Title
+          <ArrowUpDown className='ml-2 h-4 w-4' />
+        </Button>
+      );
+    },
+    cell: ({ row }) => {
+      const project = row.original.project;
+      return (
+        <div className='flex items-center space-x-3'>
+          {project.logo && (
+            <img
+              src={project.logo}
+              alt={project.title}
+              className='h-8 w-8 rounded-lg object-cover'
+            />
+          )}
+          <div>
+            <div className='text-foreground font-medium'>{project.title}</div>
+          </div>
+        </div>
+      );
+    },
+  },
+  {
+    id: 'project.category',
+    accessorKey: 'project.category',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant='ghost'
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          className='text-foreground hover:bg-muted/50 h-auto p-0 font-medium'
+        >
+          Category
+          <ArrowUpDown className='ml-2 h-4 w-4' />
+        </Button>
+      );
+    },
+    cell: ({ row }) => {
+      const category = row.original.project.category;
+      return (
+        <Badge variant='secondary' className='bg-muted text-muted-foreground'>
+          {category}
+        </Badge>
+      );
+    },
+  },
+  {
+    id: 'project.status',
+    accessorKey: 'project.status',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant='ghost'
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          className='text-foreground hover:bg-muted/50 h-auto p-0 font-medium'
+        >
+          Status
+          <ArrowUpDown className='ml-2 h-4 w-4' />
+        </Button>
+      );
+    },
+    cell: ({ row }) => {
+      const status = row.original.project.status;
+      const getStatusVariant = (status: string) => {
+        switch (status.toLowerCase()) {
+          case 'active':
+          case 'funding':
+            return 'bg-primary/20 text-primary border-primary/30';
+          case 'completed':
+            return 'bg-success-500/20 text-success-400 border-success-500/30';
+          case 'draft':
+            return 'bg-warning-500/20 text-warning-400 border-warning-500/30';
+          default:
+            return 'bg-muted text-muted-foreground';
+        }
+      };
+      return (
+        <Badge variant='outline' className={getStatusVariant(status)}>
+          {status}
+        </Badge>
+      );
+    },
+  },
+  {
+    id: 'fundingRaised',
+    accessorKey: 'fundingRaised',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant='ghost'
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          className='text-foreground hover:bg-muted/50 h-auto p-0 font-medium'
+        >
+          Funding Progress
+          <ArrowUpDown className='ml-2 h-4 w-4' />
+        </Button>
+      );
+    },
+    cell: ({ row }) => {
+      const fundingRaised = row.original.fundingRaised;
+      const fundingGoal = row.original.fundingGoal;
+      const currency = row.original.fundingCurrency;
+      const progress =
+        fundingGoal > 0 ? (fundingRaised / fundingGoal) * 100 : 0;
+
+      return (
+        <div className='space-y-2'>
+          <div className='text-foreground text-sm font-medium'>
+            {fundingRaised.toLocaleString()} / {fundingGoal.toLocaleString()}{' '}
+            {currency}
+          </div>
+          <Progress value={progress} className='bg-muted h-2' />
+          <div className='text-muted-foreground text-xs'>
+            {progress.toFixed(1)}% funded
+          </div>
+        </div>
+      );
+    },
+  },
+  {
+    id: 'fundingEndDate',
+    accessorKey: 'fundingEndDate',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant='ghost'
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          className='text-foreground hover:bg-muted/50 h-auto p-0 font-medium'
+        >
+          Deadline
+          <ArrowUpDown className='ml-2 h-4 w-4' />
+        </Button>
+      );
+    },
+    cell: ({ row }) => {
+      const endDate = new Date(row.original.fundingEndDate);
+      const now = new Date();
+      const daysLeft = Math.ceil(
+        (endDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
+      );
+
+      return (
+        <div className='text-sm'>
+          <div className='text-foreground'>
+            {format(endDate, 'MMM dd, yyyy')}
+          </div>
+          <div
+            className={`text-xs ${daysLeft < 0 ? 'text-error-400' : daysLeft < 7 ? 'text-warning-400' : 'text-muted-foreground'}`}
+          >
+            {daysLeft < 0
+              ? `${Math.abs(daysLeft)} days ago`
+              : `${daysLeft} days left`}
+          </div>
+        </div>
+      );
+    },
+  },
+  {
+    id: 'createdAt',
+    accessorKey: 'createdAt',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant='ghost'
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          className='text-foreground hover:bg-muted/50 h-auto p-0 font-medium'
+        >
+          Created
+          <ArrowUpDown className='ml-2 h-4 w-4' />
+        </Button>
+      );
+    },
+    cell: ({ row }) => {
+      return (
+        <div className='text-foreground text-sm'>
+          {format(new Date(row.original.createdAt), 'MMM dd, yyyy')}
+        </div>
+      );
+    },
+  },
+  {
+    id: 'actions',
+    enableHiding: false,
+    cell: ({ row }) => {
+      const campaign = row.original;
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant='ghost' className='hover:bg-muted/50 h-8 w-8 p-0'>
+              <span className='sr-only'>Open menu</span>
+              <MoreHorizontal className='h-4 w-4' />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align='end'
+            className='bg-background border-border'
+          >
+            <DropdownMenuLabel className='text-foreground'>
+              Actions
+            </DropdownMenuLabel>
+            <DropdownMenuItem
+              onClick={() => navigator.clipboard.writeText(campaign.id)}
+              className='text-foreground hover:bg-muted/50'
+            >
+              Copy campaign ID
+            </DropdownMenuItem>
+            <DropdownMenuSeparator className='bg-border' />
+            <DropdownMenuItem
+              asChild
+              className='text-foreground hover:bg-muted/50'
+            >
+              <Link href={`/projects/${campaign.projectId}`}>
+                <Eye className='mr-2 h-4 w-4' />
+                View Campaign
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              asChild
+              className='text-foreground hover:bg-muted/50'
+            >
+              <Link href={`/projects/${campaign.projectId}/edit`}>
+                <Edit className='mr-2 h-4 w-4' />
+                Edit Campaign
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              // asChild
+              className='text-error-400 hover:bg-error-400/10'
+            >
+              <DeleteCampaignAlert
+                campaignId={campaign.id}
+                campaignTitle={campaign.project.title}
+                onSuccess={onDeleteSuccess}
+              >
+                <div className='text-reds-500 tsext-sm psx-2 flex cursor-pointer items-center'>
+                  <Trash2 className='text-red-4s00 mr-2 h-4 w-4' />
+                  Delete Campaign
+                </div>
+              </DeleteCampaignAlert>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
diff --git a/components/crowdfunding-table-toolbar.tsx b/components/crowdfunding-table-toolbar.tsx
new file mode 100644
index 000000000..71f7b3ea3
--- /dev/null
+++ b/components/crowdfunding-table-toolbar.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import { ChevronDown } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+import { Table } from '@tanstack/react-table';
+
+interface CrowdfundingTableToolbarProps {
+  table: Table<any>;
+}
+
+export function CrowdfundingTableToolbar({
+  table,
+}: CrowdfundingTableToolbarProps) {
+  return (
+    <div className='flex items-center py-4'>
+      <Input
+        placeholder='Filter campaigns...'
+        value={
+          (table.getColumn('project.title')?.getFilterValue() as string) ?? ''
+        }
+        onChange={event =>
+          table.getColumn('project.title')?.setFilterValue(event.target.value)
+        }
+        className='bg-background border-border text-foreground placeholder:text-muted-foreground max-w-sm'
+      />
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant='outline'
+            className='bg-background border-border text-foreground hover:bg-muted/50 ml-auto'
+          >
+            Columns <ChevronDown className='ml-2 h-4 w-4' />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align='end'
+          className='bg-background border-border'
+        >
+          {table
+            .getAllColumns()
+            .filter(column => column.getCanHide())
+            .map(column => {
+              return (
+                <DropdownMenuCheckboxItem
+                  key={column.id}
+                  className='text-foreground hover:bg-muted/50 capitalize'
+                  checked={column.getIsVisible()}
+                  onCheckedChange={value => column.toggleVisibility(!!value)}
+                >
+                  {column.id === 'project.title'
+                    ? 'Title'
+                    : column.id === 'project.category'
+                      ? 'Category'
+                      : column.id === 'project.status'
+                        ? 'Status'
+                        : column.id === 'fundingRaised'
+                          ? 'Funding Progress'
+                          : column.id === 'fundingEndDate'
+                            ? 'Deadline'
+                            : column.id === 'createdAt'
+                              ? 'Created'
+                              : column.id}
+                </DropdownMenuCheckboxItem>
+              );
+            })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/components/crowdfunding/campaign-comments-tab.tsx b/components/crowdfunding/campaign-comments-tab.tsx
new file mode 100644
index 000000000..f61d6f7a5
--- /dev/null
+++ b/components/crowdfunding/campaign-comments-tab.tsx
@@ -0,0 +1,209 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { CommentsSortDropdown } from '@/components/project-details/comment-section/comments-sort-dropdown';
+import { CommentItem } from '@/components/project-details/comment-section/comment-item';
+import { CommentInput } from '@/components/project-details/comment-section/comment-input';
+import { CommentsEmptyState } from '@/components/project-details/comment-section/comments-empty-state';
+import { useCommentSystem } from '@/hooks/use-comment-system';
+import {
+  CommentEntityType,
+  Comment as CommentType,
+  ReportReason,
+} from '@/types/comment';
+import { useAuth } from '@/hooks/use-auth';
+import { Loader2, MessageCircle } from 'lucide-react';
+
+interface CampaignCommentsTabProps {
+  campaignId: string;
+}
+
+export function CampaignCommentsTab({ campaignId }: CampaignCommentsTabProps) {
+  const [sortBy, setSortBy] = useState<
+    'createdAt' | 'updatedAt' | 'totalReactions'
+  >('createdAt');
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
+
+  const { user } = useAuth(false);
+
+  // Use the generic comment system
+  const {
+    comments: commentsHook,
+    createComment: createCommentHook,
+    updateComment: updateCommentHook,
+    deleteComment: deleteCommentHook,
+    reportComment: reportCommentHook,
+  } = useCommentSystem({
+    entityType: CommentEntityType.CROWDFUNDING_CAMPAIGN,
+    entityId: campaignId,
+    page: 1,
+    limit: 100,
+    enabled: true,
+  });
+
+  // Build nested comment structure and sort
+  const sortedComments = useMemo(() => {
+    // Separate top-level comments and replies
+    const topLevelComments = commentsHook.comments.filter(
+      comment => !comment.parentId
+    );
+    const repliesMap = new Map<string, CommentType[]>();
+
+    // Group replies by parent ID
+    commentsHook.comments.forEach(comment => {
+      if (comment.parentId) {
+        const replies = repliesMap.get(comment.parentId) || [];
+        replies.push(comment);
+        repliesMap.set(comment.parentId, replies);
+      }
+    });
+
+    // Attach replies to parent comments
+    const commentsWithReplies = topLevelComments.map(comment => ({
+      ...comment,
+      replies: repliesMap.get(comment.id) || [],
+    }));
+
+    // Sort top-level comments
+    return commentsWithReplies.sort((a, b) => {
+      let comparison = 0;
+      if (sortBy === 'createdAt') {
+        comparison =
+          new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+      } else if (sortBy === 'updatedAt') {
+        comparison =
+          new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime();
+      } else {
+        comparison = (a.reactionCount || 0) - (b.reactionCount || 0);
+      }
+      return sortOrder === 'desc' ? -comparison : comparison;
+    });
+  }, [commentsHook.comments, sortBy, sortOrder]);
+
+  const handleAddComment = async (content: string) => {
+    try {
+      await createCommentHook.createComment({
+        content,
+        entityType: CommentEntityType.CROWDFUNDING_CAMPAIGN,
+        entityId: campaignId,
+      });
+      commentsHook.refetch();
+    } catch (error) {
+      console.error('Failed to add comment:', error);
+    }
+  };
+
+  const handleAddReply = async (commentId: string, content: string) => {
+    try {
+      await createCommentHook.createComment({
+        content,
+        entityType: CommentEntityType.CROWDFUNDING_CAMPAIGN,
+        entityId: campaignId,
+        parentId: commentId,
+      });
+      commentsHook.refetch();
+    } catch (error) {
+      console.error('Failed to add reply:', error);
+    }
+  };
+
+  const handleReportComment = async (
+    commentId: string,
+    reason: string,
+    description?: string
+  ) => {
+    try {
+      // Convert string reason to ReportReason enum
+      const reportReason = reason.toUpperCase() as keyof typeof ReportReason;
+      await reportCommentHook.reportComment(commentId, {
+        reason: ReportReason[reportReason] || ReportReason.OTHER,
+        description,
+      });
+    } catch (error) {
+      console.error('Failed to report comment:', error);
+    }
+  };
+
+  if (commentsHook.loading) {
+    return (
+      <Card className='bg-background border-border/10'>
+        <CardContent className='flex items-center justify-center py-12'>
+          <Loader2 className='text-muted-foreground h-6 w-6 animate-spin' />
+          <span className='text-muted-foreground ml-2'>
+            Loading comments...
+          </span>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className='bg-background border-border/10'>
+      <CardHeader>
+        <CardTitle className='flex items-center gap-2 text-white'>
+          <MessageCircle className='h-5 w-5' />
+          Comments & Discussion ({commentsHook.comments.length})
+        </CardTitle>
+      </CardHeader>
+      <CardContent className='space-y-6'>
+        {/* Comment Input */}
+        {user && (
+          <CommentInput
+            onSubmit={handleAddComment}
+            placeholder='Share your thoughts about this campaign...'
+          />
+        )}
+
+        {/* Comments Sort */}
+        {commentsHook.comments.length > 0 && (
+          <div className='flex justify-end'>
+            <CommentsSortDropdown
+              sortBy={sortBy}
+              sortOrder={sortOrder}
+              onSortChange={(newSortBy, newSortOrder) => {
+                setSortBy(newSortBy);
+                setSortOrder(newSortOrder);
+              }}
+            />
+          </div>
+        )}
+
+        {/* Comments List */}
+        {sortedComments.length === 0 ? (
+          <CommentsEmptyState onAddComment={handleAddComment} />
+        ) : (
+          <div className='space-y-4'>
+            {sortedComments.map(commentItem => (
+              <CommentItem
+                key={commentItem.id}
+                comment={commentItem}
+                onAddReply={handleAddReply}
+                onUpdate={async (commentId, content) => {
+                  try {
+                    await updateCommentHook.updateComment(commentId, {
+                      content,
+                    });
+                    commentsHook.refetch();
+                  } catch (error) {
+                    console.error('Failed to update comment:', error);
+                  }
+                }}
+                onDelete={async commentId => {
+                  try {
+                    await deleteCommentHook.deleteComment(commentId);
+                    commentsHook.refetch();
+                  } catch (error) {
+                    console.error('Failed to delete comment:', error);
+                  }
+                }}
+                onReport={handleReportComment}
+                currentUserId={user?.id}
+              />
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/crowdfunding/campaign-funding-tab.tsx b/components/crowdfunding/campaign-funding-tab.tsx
new file mode 100644
index 000000000..233744741
--- /dev/null
+++ b/components/crowdfunding/campaign-funding-tab.tsx
@@ -0,0 +1,186 @@
+'use client';
+
+import { format } from 'date-fns';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { Separator } from '@/components/ui/separator';
+import { DollarSign, TrendingUp, Users, Calendar } from 'lucide-react';
+
+interface Contributor {
+  name: string;
+  amount: number;
+  date: string;
+  image?: string;
+  anonymous?: boolean;
+}
+
+interface CampaignFundingTabProps {
+  contributors: Contributor[];
+  fundingRaised: number;
+  fundingGoal: number;
+  fundingCurrency: string;
+  fundingEndDate: string;
+}
+
+export function CampaignFundingTab({
+  contributors,
+  fundingRaised,
+  fundingGoal,
+  fundingCurrency,
+  fundingEndDate,
+}: CampaignFundingTabProps) {
+  const fundingProgress =
+    fundingGoal > 0 ? (fundingRaised / fundingGoal) * 100 : 0;
+  const daysLeft = Math.ceil(
+    (new Date(fundingEndDate).getTime() - new Date().getTime()) /
+      (1000 * 60 * 60 * 24)
+  );
+
+  const totalContributors = contributors?.length || 0;
+  const averageContribution =
+    totalContributors > 0 ? fundingRaised / totalContributors : 0;
+  const largestContribution =
+    contributors?.length > 0 ? Math.max(...contributors.map(c => c.amount)) : 0;
+
+  if (!contributors || contributors.length === 0) {
+    return (
+      <Card className='bg-background border-border/10'>
+        <CardContent className='flex flex-col items-center justify-center py-12'>
+          <DollarSign className='text-muted-foreground mb-4 h-12 w-12' />
+          <h3 className='mb-2 text-lg font-semibold text-white'>
+            No Contributions Yet
+          </h3>
+          <p className='text-center text-white/60'>
+            Contributions will be displayed here once supporters start funding
+            this campaign.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className='space-y-6'>
+      {/* Funding Overview */}
+      <Card className='bg-background border-border/10'>
+        <CardHeader>
+          <CardTitle className='flex items-center gap-2 text-white'>
+            <TrendingUp className='h-5 w-5' />
+            Funding Overview
+          </CardTitle>
+        </CardHeader>
+        <CardContent className='space-y-6'>
+          <div className='text-center'>
+            <div className='mb-2 text-3xl font-bold text-white'>
+              {fundingCurrency} {fundingRaised.toLocaleString()}
+            </div>
+            <div className='text-white/60'>
+              of {fundingCurrency} {fundingGoal.toLocaleString()} goal
+            </div>
+          </div>
+
+          <Progress value={fundingProgress} className='h-3' />
+
+          <div className='grid grid-cols-2 gap-4 text-center'>
+            <div>
+              <div className='text-lg font-semibold text-white'>
+                {fundingProgress.toFixed(1)}%
+              </div>
+              <div className='text-sm text-white/60'>Funded</div>
+            </div>
+            <div>
+              <div className='text-lg font-semibold text-white'>
+                {daysLeft > 0 ? daysLeft : 0}
+              </div>
+              <div className='text-sm text-white/60'>
+                {daysLeft > 0 ? 'Days Left' : 'Ended'}
+              </div>
+            </div>
+          </div>
+
+          <Separator className='bg-border' />
+
+          <div className='grid grid-cols-3 gap-4 text-center'>
+            <div>
+              <div className='text-lg font-semibold text-white'>
+                {totalContributors}
+              </div>
+              <div className='flex items-center justify-center gap-1 text-sm text-white/60'>
+                <Users className='h-3 w-3' />
+                Contributors
+              </div>
+            </div>
+            <div>
+              <div className='text-lg font-semibold text-white'>
+                {fundingCurrency} {averageContribution.toFixed(0)}
+              </div>
+              <div className='text-sm text-white/60'>Avg. Contribution</div>
+            </div>
+            <div>
+              <div className='text-lg font-semibold text-white'>
+                {fundingCurrency} {largestContribution.toLocaleString()}
+              </div>
+              <div className='text-sm text-white/60'>Largest Contribution</div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Recent Contributors */}
+      <Card className='bg-background border-border/10'>
+        <CardHeader>
+          <CardTitle className='flex items-center gap-2 text-white'>
+            <DollarSign className='h-5 w-5' />
+            Recent Contributors ({totalContributors})
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className='space-y-4'>
+            {contributors.map((contributor, index) => (
+              <div
+                key={index}
+                className='bg-muted/10 hover:bg-muted/20 flex items-center justify-between rounded-lg p-4 transition-colors'
+              >
+                <div className='flex items-center gap-3'>
+                  <Avatar className='h-10 w-10'>
+                    <AvatarImage
+                      src={contributor.image}
+                      alt={contributor.name}
+                    />
+                    <AvatarFallback className='bg-primary/10 text-primary'>
+                      {contributor.anonymous
+                        ? '?'
+                        : contributor.name.charAt(0).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <p className='font-medium text-white'>
+                      {contributor.anonymous ? 'Anonymous' : contributor.name}
+                    </p>
+                    <p className='flex items-center gap-1 text-sm text-white/60'>
+                      <Calendar className='h-3 w-3' />
+                      {format(new Date(contributor.date), 'MMM dd, yyyy')}
+                    </p>
+                  </div>
+                </div>
+                <div className='text-right'>
+                  <div className='text-lg font-semibold text-white'>
+                    {fundingCurrency} {contributor.amount.toLocaleString()}
+                  </div>
+                  {contributor.amount === largestContribution &&
+                    totalContributors > 1 && (
+                      <Badge variant='secondary' className='mt-1 text-xs'>
+                        Top Contributor
+                      </Badge>
+                    )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/components/crowdfunding/campaign-milestones-tab.tsx b/components/crowdfunding/campaign-milestones-tab.tsx
new file mode 100644
index 000000000..0fce2b243
--- /dev/null
+++ b/components/crowdfunding/campaign-milestones-tab.tsx
@@ -0,0 +1,153 @@
+'use client';
+
+import { format } from 'date-fns';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { Target, Calendar } from 'lucide-react';
+
+interface Milestone {
+  name: string;
+  description: string;
+  amount: number;
+  reviewStatus: string;
+  endDate: string;
+  progress?: number;
+}
+
+interface CampaignMilestonesTabProps {
+  milestones: Milestone[];
+  fundingRaised: number;
+  fundingCurrency: string;
+}
+
+export function CampaignMilestonesTab({
+  milestones,
+  fundingRaised,
+  fundingCurrency,
+}: CampaignMilestonesTabProps) {
+  const getStatusColor = (status: string) => {
+    switch (status?.toLowerCase()) {
+      case 'completed':
+        return 'bg-green-500/20 text-green-400 border-green-500/30';
+      case 'active':
+      case 'in_progress':
+        return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+      case 'pending':
+        return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
+      case 'cancelled':
+        return 'bg-red-500/20 text-red-400 border-red-500/30';
+      default:
+        return 'bg-gray-500/20 text-gray-400 border-gray-500/30';
+    }
+  };
+
+  const getMilestoneProgress = (milestone: Milestone) => {
+    if (milestone.reviewStatus?.toLowerCase() === 'completed') return 100;
+    if (fundingRaised >= milestone.amount) return 100;
+    return Math.min((fundingRaised / milestone.amount) * 100, 100);
+  };
+
+  if (!milestones || milestones.length === 0) {
+    return (
+      <Card className='bg-background border-border/10'>
+        <CardContent className='flex flex-col items-center justify-center py-12'>
+          <Target className='text-muted-foreground mb-4 h-12 w-12' />
+          <h3 className='mb-2 text-lg font-semibold text-white'>
+            No Milestones
+          </h3>
+          <p className='text-center text-white/60'>
+            Campaign milestones will be displayed here once they are added.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className='bg-background border-border/10'>
+      <CardHeader>
+        <CardTitle className='flex items-center gap-2 text-white'>
+          <Target className='h-5 w-5' />
+          Milestones ({milestones.length})
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className='space-y-6'>
+          {milestones.map((milestone, index) => {
+            const progress = getMilestoneProgress(milestone);
+            const isCompleted =
+              milestone.reviewStatus?.toLowerCase() === 'completed';
+            const isOverdue =
+              milestone.endDate &&
+              new Date(milestone.endDate) < new Date() &&
+              !isCompleted;
+
+            return (
+              <div
+                key={index}
+                className='bg-muted/10 hover:bg-muted/20 rounded-lg p-6 transition-colors'
+              >
+                <div className='mb-4 flex items-start justify-between'>
+                  <div className='flex-1'>
+                    <h4 className='mb-2 text-lg font-semibold text-white'>
+                      {milestone.name}
+                    </h4>
+                    <p className='mb-3 text-white/80'>
+                      {milestone.description}
+                    </p>
+                  </div>
+                  <Badge
+                    variant='outline'
+                    className={getStatusColor(milestone.reviewStatus)}
+                  >
+                    {milestone.reviewStatus || 'Pending'}
+                  </Badge>
+                </div>
+
+                <div className='space-y-3'>
+                  <div className='flex items-center justify-between text-sm'>
+                    <span className='text-white/60'>Target Amount</span>
+                    <span className='font-medium text-white'>
+                      {fundingCurrency} {milestone.amount.toLocaleString()}
+                    </span>
+                  </div>
+
+                  <div className='flex items-center justify-between text-sm'>
+                    <span className='text-white/60'>Current Progress</span>
+                    <span className='font-medium text-white'>
+                      {fundingCurrency}{' '}
+                      {Math.min(
+                        fundingRaised,
+                        milestone.amount
+                      ).toLocaleString()}
+                    </span>
+                  </div>
+
+                  <Progress value={progress} className='h-2' />
+
+                  <div className='flex items-center justify-between text-sm'>
+                    <span className='text-white/60'>
+                      {progress.toFixed(1)}% Complete
+                    </span>
+                    <div className='flex items-center gap-1 text-white/60'>
+                      <Calendar className='h-4 w-4' />
+                      <span>
+                        {milestone.endDate
+                          ? format(new Date(milestone.endDate), 'MMM dd, yyyy')
+                          : 'TBD'}
+                        {isOverdue && (
+                          <span className='ml-2 text-red-400'>(Overdue)</span>
+                        )}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/crowdfunding/campaign-stats.tsx b/components/crowdfunding/campaign-stats.tsx
new file mode 100644
index 000000000..02d6bea4b
--- /dev/null
+++ b/components/crowdfunding/campaign-stats.tsx
@@ -0,0 +1,132 @@
+'use client';
+
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  TrendingUp,
+  Users,
+  Target,
+  DollarSign,
+  ArrowUpRight,
+} from 'lucide-react';
+import { Crowdfunding } from '@/features/projects/types';
+import Link from 'next/link';
+
+interface CampaignStatsProps {
+  campaign: Crowdfunding;
+}
+
+export function CampaignStats({ campaign }: CampaignStatsProps) {
+  const fundingProgress =
+    campaign.fundingGoal > 0
+      ? (campaign.fundingRaised / campaign.fundingGoal) * 100
+      : 0;
+
+  const stats = [
+    {
+      icon: DollarSign,
+      label: 'Total Raised',
+      value: `${campaign.fundingCurrency} ${campaign.fundingRaised.toLocaleString()}`,
+      subtext: `of ${campaign.fundingCurrency} ${campaign.fundingGoal.toLocaleString()}`,
+      link: undefined, // Optional: Add a link here if needed
+    },
+    {
+      icon: TrendingUp,
+      label: 'Funding Progress',
+      value: `${fundingProgress.toFixed(1)}%`,
+      subtext: 'Campaign progress',
+    },
+    {
+      icon: Users,
+      label: 'Contributors',
+      value: (campaign.contributors || []).length.toString(),
+      subtext: 'People backed',
+    },
+    {
+      icon: Target,
+      label: 'Milestones',
+      value: (campaign.milestones || []).length.toString(),
+      subtext: 'Planned goals',
+      link: `/me/crowdfunding/${campaign.slug}/milestones`, // Optional: Add a link here if needed
+    },
+  ];
+
+  return (
+    <div className='grid grid-cols-2 gap-4 lg:grid-cols-4'>
+      {stats.map((stat, index) => {
+        const Icon = stat.icon;
+
+        return stat.link ? (
+          <Link
+            key={index}
+            href={stat.link}
+            target='_blank'
+            rel='noopener noreferrer'
+            className='block cursor-pointer'
+          >
+            <Card className='bg-background border-border/10 hover:border-primary/30 shadow-primary/10 hover:shadow-primary/10 @container/card h-full border transition-all duration-300 hover:shadow-lg'>
+              <CardContent className='p-4'>
+                <div className='flex items-start justify-between'>
+                  <div className='flex-1'>
+                    <p className='text-muted-foreground mb-1 text-xs font-medium tracking-wide uppercase'>
+                      {stat.label}
+                    </p>
+                    <p className='text-foreground text-xl font-bold'>
+                      {stat.value}
+                    </p>
+                    <p className='text-muted-foreground mt-1 text-xs'>
+                      {stat.subtext}
+                    </p>
+                  </div>
+                  <div className='flex items-center gap-2'>
+                    <Icon className='text-accent/60 h-5 w-5' />
+                    {stat.link && (
+                      <ArrowUpRight className='text-muted-foreground h-4 w-4' />
+                    )}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+        ) : (
+          <div key={index}>
+            <Card className='bg-background border-border/10 hover:border-primary/30 shadow-primary/10 hover:shadow-primary/10 @container/card h-full border transition-all duration-300 hover:shadow-lg'>
+              <CardContent className='p-4'>
+                <div className='flex items-start justify-between'>
+                  <div className='flex-1'>
+                    <p className='text-muted-foreground mb-1 text-xs font-medium tracking-wide uppercase'>
+                      {stat.label}
+                    </p>
+                    <p className='text-foreground text-xl font-bold'>
+                      {stat.value}
+                    </p>
+                    <p className='text-muted-foreground mt-1 text-xs'>
+                      {stat.subtext}
+                    </p>
+                  </div>
+                  <div className='flex items-center gap-2'>
+                    <Icon className='text-accent/60 h-5 w-5' />
+                    {stat.link && (
+                      <ArrowUpRight className='text-muted-foreground h-4 w-4' />
+                    )}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  // <Card className='bg-background border-border/10 hover:border-primary/30 shadow-primary/10 hover:shadow-primary/10 @container/card border transition-all duration-300 hover:shadow-lg'>
+  //   <CardHeader>
+  //     <CardDescription className='flex items-center justify-between text-white/80'>
+  //       {description || title}
+  //       {Icon && <Icon size={20} />}
+  //     </CardDescription>
+  //     <CardTitle className='text-2xl font-semibold text-white tabular-nums @[250px]/card:text-3xl'>
+  //       {formatNumber(value)}
+  //     </CardTitle>
+  //   </CardHeader>
+  // </Card>
+}
diff --git a/components/crowdfunding/campaign-team-tab.tsx b/components/crowdfunding/campaign-team-tab.tsx
new file mode 100644
index 000000000..ad09b4789
--- /dev/null
+++ b/components/crowdfunding/campaign-team-tab.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Users } from 'lucide-react';
+
+interface TeamMember {
+  name: string;
+  role: string;
+  image?: string;
+}
+
+interface CampaignTeamTabProps {
+  team: TeamMember[];
+}
+
+export function CampaignTeamTab({ team }: CampaignTeamTabProps) {
+  if (!team || team.length === 0) {
+    return (
+      <Card className='bg-background border-border/10'>
+        <CardContent className='flex flex-col items-center justify-center py-12'>
+          <Users className='text-muted-foreground mb-4 h-12 w-12' />
+          <h3 className='mb-2 text-lg font-semibold text-white'>
+            No Team Members
+          </h3>
+          <p className='text-center text-white/60'>
+            Team members will be displayed here once added to the campaign.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className='bg-background border-border/10'>
+      <CardHeader>
+        <CardTitle className='flex items-center gap-2 text-white'>
+          <Users className='h-5 w-5' />
+          Team Members ({team.length})
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+          {team.map((member, index) => (
+            <div
+              key={index}
+              className='bg-muted/10 hover:bg-muted/20 flex items-center gap-3 rounded-lg p-4 transition-colors'
+            >
+              <Avatar className='h-12 w-12'>
+                <AvatarImage src={member.image} alt={member.name} />
+                <AvatarFallback className='bg-primary/10 text-primary'>
+                  {member.name.charAt(0).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <div className='min-w-0 flex-1'>
+                <p className='truncate font-medium text-white'>{member.name}</p>
+                <p className='truncate text-sm text-white/60'>{member.role}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/crowdfunding/contributions-metrics.tsx b/components/crowdfunding/contributions-metrics.tsx
new file mode 100644
index 000000000..717c75096
--- /dev/null
+++ b/components/crowdfunding/contributions-metrics.tsx
@@ -0,0 +1,243 @@
+'use client';
+
+import { MetricCard } from '@/components/ui/metric-card';
+import { Contributor } from '@/features/projects/types';
+import { DollarSign, TrendingUp, Users } from 'lucide-react';
+import { format } from 'date-fns';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+
+interface ContributionsMetricsProps {
+  contributors: Contributor[];
+  currencySymbol?: string;
+}
+
+export function ContributionsMetrics({
+  contributors,
+  currencySymbol = 'USDC',
+}: ContributionsMetricsProps) {
+  // Calculate metrics
+  const totalContributions = contributors.reduce(
+    (sum, contributor) => sum + contributor.amount,
+    0
+  );
+
+  const averageContribution =
+    contributors.length > 0 ? totalContributions / contributors.length : 0;
+
+  // Get top 5 contributors
+  const topContributors = [...contributors]
+    .sort((a, b) => b.amount - a.amount)
+    .slice(0, 5);
+
+  // Group contributions by date for timeline
+  const contributionsByDate = contributors.reduce(
+    (acc, contributor) => {
+      const date = format(new Date(contributor.date), 'MMM d, yyyy');
+      if (!acc[date]) {
+        acc[date] = { date, count: 0, total: 0 };
+      }
+      acc[date].count += 1;
+      acc[date].total += contributor.amount;
+      return acc;
+    },
+    {} as Record<string, { date: string; count: number; total: number }>
+  );
+
+  const timeline = Object.values(contributionsByDate)
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+    .slice(0, 5);
+
+  return (
+    <div className='space-y-4'>
+      {/* Metrics Cards */}
+      <div className='grid gap-3 sm:grid-cols-2 lg:grid-cols-3'>
+        {/* Total Contributors */}
+        <MetricCard>
+          <div className='flex items-center justify-between'>
+            <div className='space-y-0.5'>
+              <p className='text-muted-foreground text-xs'>
+                Total Contributors
+              </p>
+              <p className='text-2xl font-bold'>{contributors.length}</p>
+            </div>
+            <div className='flex h-9 w-9 items-center justify-center rounded-full bg-blue-500/10'>
+              <Users className='h-4 w-4 text-blue-500' />
+            </div>
+          </div>
+        </MetricCard>
+
+        {/* Average Contribution */}
+        <MetricCard>
+          <div className='flex items-center justify-between'>
+            <div className='space-y-0.5'>
+              <p className='text-muted-foreground text-xs'>
+                Average Contribution
+              </p>
+              <div className='flex items-baseline gap-1'>
+                <p className='text-2xl font-bold'>
+                  {averageContribution.toLocaleString('en-US', {
+                    minimumFractionDigits: 0,
+                    maximumFractionDigits: 0,
+                  })}
+                </p>
+                <span className='text-muted-foreground text-xs font-medium'>
+                  {currencySymbol}
+                </span>
+              </div>
+            </div>
+            <div className='flex h-9 w-9 items-center justify-center rounded-full bg-green-500/10'>
+              <DollarSign className='h-4 w-4 text-green-500' />
+            </div>
+          </div>
+        </MetricCard>
+
+        {/* Total Raised */}
+        <MetricCard>
+          <div className='flex items-center justify-between'>
+            <div className='space-y-0.5'>
+              <p className='text-muted-foreground text-xs'>Total Raised</p>
+              <div className='flex items-baseline gap-1'>
+                <p className='text-2xl font-bold'>
+                  {totalContributions.toLocaleString('en-US', {
+                    minimumFractionDigits: 0,
+                    maximumFractionDigits: 0,
+                  })}
+                </p>
+                <span className='text-muted-foreground text-xs font-medium'>
+                  {currencySymbol}
+                </span>
+              </div>
+            </div>
+            <div className='flex h-9 w-9 items-center justify-center rounded-full bg-purple-500/10'>
+              <TrendingUp className='h-4 w-4 text-purple-500' />
+            </div>
+          </div>
+        </MetricCard>
+      </div>
+
+      {/* Top Contributors & Timeline */}
+      <div className='grid gap-4 lg:grid-cols-2'>
+        {/* Top Contributors */}
+        <MetricCard>
+          <div className='mb-3 flex items-center justify-between'>
+            <h3 className='text-sm font-semibold'>Top Contributors</h3>
+            <Badge
+              variant='outline'
+              className='bg-primary/10 text-primary text-xs'
+            >
+              Top 5
+            </Badge>
+          </div>
+          <div className='space-y-2'>
+            {topContributors.length > 0 ? (
+              topContributors.map((contributor, index) => (
+                <div
+                  key={contributor.transactionHash}
+                  className='border-border/50 bg-background/50 hover:bg-background/80 flex items-center justify-between rounded-lg border p-2.5 transition-colors'
+                >
+                  <div className='flex items-center gap-2.5'>
+                    <div className='relative'>
+                      <Avatar className='h-8 w-8'>
+                        <AvatarImage
+                          src={contributor.image}
+                          alt={contributor.name}
+                        />
+                        <AvatarFallback className='text-xs'>
+                          {contributor.name
+                            .split(' ')
+                            .map(n => n[0])
+                            .join('')}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div
+                        className={`absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full text-[10px] font-bold ${
+                          index === 0
+                            ? 'bg-yellow-500 text-yellow-950'
+                            : index === 1
+                              ? 'bg-slate-400 text-slate-950'
+                              : index === 2
+                                ? 'bg-orange-600 text-orange-950'
+                                : 'bg-primary/20 text-primary'
+                        }`}
+                      >
+                        {index + 1}
+                      </div>
+                    </div>
+                    <div>
+                      <p className='text-sm font-medium'>{contributor.name}</p>
+                      <p className='text-muted-foreground text-[10px]'>
+                        @{contributor.username}
+                      </p>
+                    </div>
+                  </div>
+                  <div className='text-right'>
+                    <p className='text-sm font-semibold'>
+                      {contributor.amount.toLocaleString('en-US', {
+                        minimumFractionDigits: 0,
+                        maximumFractionDigits: 0,
+                      })}
+                    </p>
+                    <p className='text-muted-foreground text-[10px]'>
+                      {currencySymbol}
+                    </p>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className='text-muted-foreground py-6 text-center text-xs'>
+                No contributors yet
+              </div>
+            )}
+          </div>
+        </MetricCard>
+
+        {/* Contribution Timeline */}
+        <MetricCard>
+          <div className='mb-3 flex items-center justify-between'>
+            <h3 className='text-sm font-semibold'>Recent Activity</h3>
+            <Badge
+              variant='outline'
+              className='bg-blue-500/10 text-xs text-blue-500'
+            >
+              Last 5 Days
+            </Badge>
+          </div>
+          <div className='space-y-2'>
+            {timeline.length > 0 ? (
+              timeline.map(day => (
+                <div
+                  key={day.date}
+                  className='border-border/50 bg-background/50 hover:bg-background/80 flex items-center justify-between rounded-lg border p-3 transition-colors'
+                >
+                  <div className='space-y-0.5'>
+                    <p className='text-sm font-medium'>{day.date}</p>
+                    <p className='text-muted-foreground text-xs'>
+                      {day.count}{' '}
+                      {day.count === 1 ? 'contribution' : 'contributions'}
+                    </p>
+                  </div>
+                  <div className='text-right'>
+                    <p className='text-base font-semibold'>
+                      {day.total.toLocaleString('en-US', {
+                        minimumFractionDigits: 0,
+                        maximumFractionDigits: 0,
+                      })}
+                    </p>
+                    <p className='text-muted-foreground text-[10px]'>
+                      {currencySymbol}
+                    </p>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className='text-muted-foreground py-6 text-center text-xs'>
+                No activity yet
+              </div>
+            )}
+          </div>
+        </MetricCard>
+      </div>
+    </div>
+  );
+}
diff --git a/components/crowdfunding/milestone-card.tsx b/components/crowdfunding/milestone-card.tsx
new file mode 100644
index 000000000..5a7cfc2ee
--- /dev/null
+++ b/components/crowdfunding/milestone-card.tsx
@@ -0,0 +1,189 @@
+'use client';
+
+import { Milestone } from '@/features/projects/types';
+import { Badge } from '@/components/ui/badge';
+import { MetricCard } from '@/components/ui/metric-card';
+import { Progress } from '@/components/ui/progress';
+import {
+  CheckCircle2,
+  Clock,
+  Target,
+  XCircle,
+  Calendar,
+  TrendingUp,
+  ChevronRight,
+} from 'lucide-react';
+import { format } from 'date-fns';
+import Link from 'next/link';
+
+interface MilestoneCardProps {
+  milestone: Milestone;
+  index: number;
+  totalAmount: number;
+  campaignSlug: string;
+}
+
+const getStatusIcon = (status: string) => {
+  switch (status?.toLowerCase()) {
+    case 'completed':
+      return <CheckCircle2 className='h-5 w-5 text-emerald-500' />;
+    case 'in progress':
+    case 'in-progress':
+      return <Clock className='h-5 w-5 text-amber-500' />;
+    case 'pending':
+      return <Target className='h-5 w-5 text-blue-500' />;
+    case 'cancelled':
+      return <XCircle className='h-5 w-5 text-red-500' />;
+    default:
+      return <Target className='h-5 w-5 text-blue-500' />;
+  }
+};
+
+const getStatusColor = (status: string) => {
+  switch (status?.toLowerCase()) {
+    case 'completed':
+      return 'bg-emerald-500/10 text-emerald-700 border-emerald-500/20';
+    case 'in progress':
+    case 'in-progress':
+      return 'bg-amber-500/10 text-amber-700 border-amber-500/20';
+    case 'pending':
+      return 'bg-blue-500/10 text-blue-700 border-blue-500/20';
+    case 'cancelled':
+      return 'bg-red-500/10 text-red-700 border-red-500/20';
+    default:
+      return 'bg-gray-500/10 text-gray-700 border-gray-500/20';
+  }
+};
+
+export function MilestoneCard({
+  milestone,
+  index,
+  totalAmount,
+  campaignSlug,
+}: MilestoneCardProps) {
+  const amount = milestone.amount || 0;
+  const percentOfTotal = totalAmount > 0 ? (amount / totalAmount) * 100 : 0;
+  const daysUntilEnd = milestone.endDate
+    ? Math.ceil(
+        (new Date(milestone.endDate).getTime() - new Date().getTime()) /
+          (1000 * 60 * 60 * 24)
+      )
+    : 0;
+
+  return (
+    <Link href={`${campaignSlug}/milestones/${milestone.id}`}>
+      <MetricCard
+        className='group relative cursor-pointer overflow-hidden transition-all duration-300 hover:border-amber-500/50 hover:shadow-lg hover:shadow-amber-500/10'
+        contentClassName='p-4'
+      >
+        <div className='relative'>
+          {/* Header Row */}
+          <div className='mb-4 flex items-start justify-between'>
+            <div className='flex flex-1 items-start gap-4'>
+              {/* Milestone Number */}
+              <div className='flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-amber-500/10 text-sm font-semibold text-amber-600'>
+                {index + 1}
+              </div>
+
+              {/* Milestone Info */}
+              <div className='min-w-0 flex-1'>
+                <h3 className='text-foreground truncate text-lg font-semibold transition-colors group-hover:text-amber-500'>
+                  {milestone.name}
+                </h3>
+                <p className='text-muted-foreground mt-1 line-clamp-2 text-sm'>
+                  {milestone.description}
+                </p>
+              </div>
+            </div>
+
+            {/* Status Badge */}
+            <div className='ml-4 flex-shrink-0'>
+              <Badge
+                variant='outline'
+                className={`flex items-center gap-2 ${getStatusColor(milestone.reviewStatus)}`}
+              >
+                {getStatusIcon(milestone.reviewStatus)}
+                <span className='text-xs font-medium capitalize'>
+                  {milestone.reviewStatus || 'Pending'}
+                </span>
+              </Badge>
+            </div>
+          </div>
+
+          {/* Metrics Row */}
+          <div className='mb-4 grid grid-cols-1 gap-4 md:grid-cols-3'>
+            {/* Amount */}
+            <div className='flex items-center gap-3'>
+              <TrendingUp className='text-muted-foreground h-4 w-4' />
+              <div>
+                <p className='text-muted-foreground text-xs tracking-wide uppercase'>
+                  Amount
+                </p>
+                <p className='text-foreground text-sm font-semibold'>
+                  ${amount.toLocaleString()}
+                </p>
+              </div>
+            </div>
+
+            {/* Timeline */}
+            <div className='flex items-center gap-3'>
+              <Calendar className='text-muted-foreground h-4 w-4' />
+              <div>
+                <p className='text-muted-foreground text-xs tracking-wide uppercase'>
+                  Timeline
+                </p>
+                <p className='text-foreground text-sm font-semibold'>
+                  {milestone.startDate
+                    ? format(new Date(milestone.startDate), 'MMM d')
+                    : 'TBD'}{' '}
+                  -{' '}
+                  {milestone.endDate
+                    ? format(new Date(milestone.endDate), 'MMM d')
+                    : 'TBD'}
+                </p>
+              </div>
+            </div>
+
+            {/* Progress Indicator */}
+            <div className='flex items-center gap-3'>
+              <div className='flex h-4 w-4 items-center justify-center rounded-full bg-amber-500/20'>
+                <div className='h-2 w-2 rounded-full bg-amber-500' />
+              </div>
+              <div>
+                <p className='text-muted-foreground text-xs tracking-wide uppercase'>
+                  Of Total
+                </p>
+                <p className='text-foreground text-sm font-semibold'>
+                  {percentOfTotal.toFixed(1)}%
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Progress Bar */}
+          <div className='mb-3'>
+            <div className='mb-2 flex items-center justify-between'>
+              <span className='text-muted-foreground text-xs font-medium'>
+                Funding Allocation
+              </span>
+              <span className='text-xs font-semibold text-amber-600'>
+                {percentOfTotal.toFixed(1)}%
+              </span>
+            </div>
+            <Progress value={percentOfTotal} className='h-2' />
+          </div>
+
+          {/* Footer */}
+          <div className='flex items-center justify-between'>
+            <span className='text-muted-foreground text-xs'>
+              {daysUntilEnd > 0
+                ? `${daysUntilEnd} days remaining`
+                : 'Timeline ended'}
+            </span>
+            <ChevronRight className='text-muted-foreground h-4 w-4 transition-colors group-hover:translate-x-1 group-hover:text-amber-500' />
+          </div>
+        </div>
+      </MetricCard>
+    </Link>
+  );
+}
diff --git a/components/crowdfunding/milestone-detail-description.tsx b/components/crowdfunding/milestone-detail-description.tsx
new file mode 100644
index 000000000..92cc56531
--- /dev/null
+++ b/components/crowdfunding/milestone-detail-description.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { useMarkdown } from '@/hooks/use-markdown';
+
+interface MilestoneDetailDescriptionProps {
+  content: string;
+  title: string;
+}
+
+export function MilestoneDetailDescription({
+  content,
+  title,
+}: MilestoneDetailDescriptionProps) {
+  const { loading, error, styledContent } = useMarkdown(
+    content || 'No description available.',
+    {
+      breaks: true,
+      gfm: true,
+      pedantic: true,
+      loadingDelay: 100,
+    }
+  );
+
+  return (
+    <div className='space-y-4 border-t py-8'>
+      <h2 className='text-xl font-semibold tracking-tight'>{title}</h2>
+
+      {loading ? (
+        <div className='flex items-center justify-center py-12'>
+          <div className='text-muted-foreground'>Loading content...</div>
+        </div>
+      ) : error ? (
+        <div className='rounded-lg border border-red-500/30 bg-red-900/20 p-4 text-sm text-red-400'>
+          <p className='font-medium'>Error loading content</p>
+          <p className='mt-1'>{error}</p>
+        </div>
+      ) : (
+        <div className='prose prose-invert max-w-none text-base leading-relaxed'>
+          {styledContent}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/crowdfunding/milestone-detail-header.tsx b/components/crowdfunding/milestone-detail-header.tsx
new file mode 100644
index 000000000..9f53d1e8f
--- /dev/null
+++ b/components/crowdfunding/milestone-detail-header.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import Link from 'next/link';
+import { ArrowLeft, FileText } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Milestone } from '@/features/projects/types';
+
+interface MilestoneDetailHeaderProps {
+  title: string;
+  milestone: Milestone;
+  campaignSlug: string;
+  backLink: string;
+  onSubmitEvidence?: () => void;
+}
+
+const getStatusColor = (status: string) => {
+  switch (status?.toLowerCase()) {
+    case 'completed':
+    case 'approved':
+      return 'bg-green-500/10 text-green-500 border-green-500/20';
+    case 'in progress':
+    case 'in-progress':
+      return 'bg-blue-500/10 text-blue-500 border-blue-500/20';
+    case 'submitted':
+    case 'in-review':
+      return 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20';
+    case 'pending':
+      return 'bg-amber-500/10 text-amber-500 border-amber-500/20';
+    case 'rejected':
+      return 'bg-red-500/10 text-red-500 border-red-500/20';
+    default:
+      return 'bg-muted text-muted-foreground border-border';
+  }
+};
+
+export function MilestoneDetailHeader({
+  title,
+  milestone,
+  backLink,
+  onSubmitEvidence,
+}: MilestoneDetailHeaderProps) {
+  return (
+    <div className='space-y-4 border-b pb-8'>
+      <div className='flex items-center gap-3'>
+        <Button variant='ghost' size='sm' asChild className='h-8 w-8 p-0'>
+          <Link href={backLink}>
+            <ArrowLeft className='h-4 w-4' />
+          </Link>
+        </Button>
+        <div className='flex-1'>
+          <h1 className='text-3xl font-bold tracking-tight'>
+            {milestone.name}
+          </h1>
+        </div>
+      </div>
+
+      <div className='flex items-center justify-between'>
+        <div className='flex items-center gap-3'>
+          <Badge
+            className={getStatusColor(milestone.reviewStatus)}
+            variant='outline'
+          >
+            {milestone.reviewStatus}
+          </Badge>
+          <p className='text-muted-foreground text-sm'>{title}</p>
+        </div>
+        {onSubmitEvidence && (
+          <Button onClick={onSubmitEvidence} className='h-9'>
+            <FileText className='mr-2 h-4 w-4' />
+            Submit Evidence
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/crowdfunding/milestone-detail-info.tsx b/components/crowdfunding/milestone-detail-info.tsx
new file mode 100644
index 000000000..0139eba6a
--- /dev/null
+++ b/components/crowdfunding/milestone-detail-info.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import { Calendar, Target } from 'lucide-react';
+import { format } from 'date-fns';
+import { Milestone, Crowdfunding } from '@/features/projects/types';
+
+interface MilestoneDetailInfoProps {
+  milestone: Milestone;
+  campaign: Crowdfunding;
+}
+
+export function MilestoneDetailInfo({
+  milestone,
+  campaign,
+}: MilestoneDetailInfoProps) {
+  const totalMilestoneAmount =
+    campaign.milestones?.reduce((sum, m) => sum + (m.amount || 0), 0) || 0;
+
+  const amount = milestone.amount || 0;
+  const milestonePercentage =
+    totalMilestoneAmount > 0
+      ? ((amount / totalMilestoneAmount) * 100).toFixed(1)
+      : '0';
+
+  return (
+    <div className='grid grid-cols-1 gap-6 py-6 md:grid-cols-3'>
+      {/* Amount */}
+      <div className='flex flex-col space-y-2'>
+        <div className='text-muted-foreground flex items-center gap-2 text-sm'>
+          <Target className='h-4 w-4' />
+          <span>Target Amount</span>
+        </div>
+        <div className='flex items-baseline gap-2'>
+          <span className='text-2xl font-semibold'>
+            {campaign.fundingCurrency} {amount.toLocaleString()}
+          </span>
+          <span className='text-muted-foreground text-sm'>
+            ({milestonePercentage}% of total)
+          </span>
+        </div>
+      </div>
+
+      {/* Start Date */}
+      <div className='flex flex-col space-y-2'>
+        <div className='text-muted-foreground flex items-center gap-2 text-sm'>
+          <Calendar className='h-4 w-4' />
+          <span>Start Date</span>
+        </div>
+        <time className='text-lg font-semibold'>
+          {milestone.startDate
+            ? format(new Date(milestone.startDate), 'MMM d, yyyy')
+            : 'TBD'}
+        </time>
+      </div>
+
+      {/* Due Date */}
+      <div className='flex flex-col space-y-2'>
+        <div className='text-muted-foreground flex items-center gap-2 text-sm'>
+          <Calendar className='h-4 w-4' />
+          <span>Due Date</span>
+        </div>
+        <time className='text-lg font-semibold'>
+          {milestone.endDate
+            ? format(new Date(milestone.endDate), 'MMM d, yyyy')
+            : 'TBD'}
+        </time>
+      </div>
+    </div>
+  );
+}
diff --git a/components/crowdfunding/milestone-detail-links.tsx b/components/crowdfunding/milestone-detail-links.tsx
new file mode 100644
index 000000000..3429df4c8
--- /dev/null
+++ b/components/crowdfunding/milestone-detail-links.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import React from 'react';
+
+import Link from 'next/link';
+import { Github, Globe, Linkedin, Mail, Send } from 'lucide-react';
+import { Crowdfunding } from '@/features/projects/types';
+
+interface MilestoneDetailLinksProps {
+  campaign: Crowdfunding;
+}
+
+const iconMap: Record<string, React.ReactNode> = {
+  github: <Github className='h-4 w-4' />,
+  website: <Globe className='h-4 w-4' />,
+  linkedin: <Linkedin className='h-4 w-4' />,
+  twitter: <Send className='h-4 w-4' />,
+  email: <Mail className='h-4 w-4' />,
+};
+
+export function MilestoneDetailLinks({ campaign }: MilestoneDetailLinksProps) {
+  const project = campaign.project;
+  const links = [
+    {
+      label: 'GitHub',
+      url: project.githubUrl,
+      icon: iconMap.github,
+    },
+    {
+      label: 'Website',
+      url: project.projectWebsite,
+      icon: iconMap.website,
+    },
+    ...(campaign.socialLinks?.map(link => ({
+      label: link.platform,
+      url: link.url,
+      icon: iconMap[link.platform.toLowerCase()] || (
+        <Send className='h-4 w-4' />
+      ),
+    })) || []),
+  ].filter(link => link.url);
+
+  if (links.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className='space-y-4 border-t py-8'>
+      <h2 className='text-xl font-semibold tracking-tight'>Project Links</h2>
+      <div className='grid grid-cols-1 gap-3 md:grid-cols-2'>
+        {links.map((link, index) => (
+          <Link
+            key={index}
+            href={link.url}
+            target='_blank'
+            rel='noopener noreferrer'
+            className='border-border/50 hover:border-primary/50 hover:bg-primary/5 flex items-center gap-3 rounded-lg border px-4 py-2 transition-colors'
+          >
+            <span className='text-muted-foreground'>{link.icon}</span>
+            <span className='text-sm font-medium'>{link.label}</span>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/crowdfunding/milestones-metrics.tsx b/components/crowdfunding/milestones-metrics.tsx
new file mode 100644
index 000000000..4e67fa683
--- /dev/null
+++ b/components/crowdfunding/milestones-metrics.tsx
@@ -0,0 +1,118 @@
+'use client';
+
+import { Milestone } from '@/features/projects/types';
+import { Card, CardContent } from '@/components/ui/card';
+import { CheckCircle2, Clock, Target, TrendingUp } from 'lucide-react';
+
+interface MilestonesMetricsProps {
+  milestones: Milestone[];
+}
+
+export function MilestonesMetrics({ milestones }: MilestonesMetricsProps) {
+  const totalAmount = milestones.reduce((sum, m) => sum + m.amount, 0);
+  const completedCount = milestones.filter(
+    m => m.reviewStatus?.toLowerCase() === 'completed'
+  ).length;
+  const inProgressCount = milestones.filter(
+    m =>
+      m.reviewStatus?.toLowerCase() === 'in progress' ||
+      m.reviewStatus?.toLowerCase() === 'in-progress'
+  ).length;
+  const completedAmount = milestones
+    .filter(m => m.reviewStatus?.toLowerCase() === 'completed')
+    .reduce((sum, m) => sum + m.amount, 0);
+  const completionRate = milestones.length
+    ? Math.round((completedCount / milestones.length) * 100)
+    : 0;
+
+  const metrics = [
+    {
+      label: 'Total Milestones',
+      value: milestones.length,
+      subtext: 'Planned goals',
+      icon: Target,
+    },
+    {
+      label: 'Completed',
+      value: completedCount,
+      subtext: 'Finished milestones',
+      icon: CheckCircle2,
+    },
+    {
+      label: 'In Progress',
+      value: inProgressCount,
+      subtext: 'Active milestones',
+      icon: Clock,
+    },
+    {
+      label: 'Completion Rate',
+      value: `${completionRate}%`,
+      subtext: 'Overall progress',
+      icon: TrendingUp,
+    },
+  ];
+
+  return (
+    <div>
+      {/* Metrics Grid */}
+      <div className='mb-8 grid grid-cols-2 gap-4 lg:grid-cols-4'>
+        {metrics.map(metric => {
+          const Icon = metric.icon;
+          return (
+            <Card
+              key={metric.label}
+              className='bg-background border-border/10 hover:border-primary/30 shadow-primary/10 hover:shadow-primary/10 @container/card border transition-all duration-300 hover:shadow-lg'
+            >
+              <CardContent className='p-4'>
+                <div className='flex items-start justify-between'>
+                  <div className='flex-1'>
+                    <p className='text-muted-foreground mb-1 text-xs font-medium tracking-wide uppercase'>
+                      {metric.label}
+                    </p>
+                    <p className='text-foreground text-xl font-bold'>
+                      {metric.value}
+                    </p>
+                    <p className='text-muted-foreground mt-1 text-xs'>
+                      {metric.subtext}
+                    </p>
+                  </div>
+                  <Icon className='text-accent/60 h-5 w-5' />
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      {/* Summary Info */}
+      <Card className='border-border/50 border bg-gradient-to-r from-amber-500/5 to-amber-500/0 p-5'>
+        <div className='grid grid-cols-1 gap-6 md:grid-cols-3'>
+          <div>
+            <p className='text-muted-foreground mb-1 text-sm'>
+              Total Allocated
+            </p>
+            <p className='text-foreground text-2xl font-bold'>
+              ${totalAmount.toLocaleString()}
+            </p>
+          </div>
+          <div>
+            <p className='text-muted-foreground mb-1 text-sm'>
+              Completed Amount
+            </p>
+            <p className='text-2xl font-bold text-emerald-500'>
+              ${completedAmount.toLocaleString()}
+            </p>
+          </div>
+          <div>
+            <p className='text-muted-foreground mb-1 text-sm'>
+              Remaining Amount
+            </p>
+            <p className='text-2xl font-bold text-amber-500'>
+              ${(totalAmount - completedAmount).toLocaleString()}
+            </p>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
diff --git a/components/crowdfunding/milestones-pagination.tsx b/components/crowdfunding/milestones-pagination.tsx
new file mode 100644
index 000000000..a15dc461c
--- /dev/null
+++ b/components/crowdfunding/milestones-pagination.tsx
@@ -0,0 +1,100 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+interface MilestonesPaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+export function MilestonesPagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+}: MilestonesPaginationProps) {
+  const startPage = Math.max(1, currentPage - 2);
+  const endPage = Math.min(totalPages, currentPage + 2);
+  const pages = Array.from(
+    { length: endPage - startPage + 1 },
+    (_, i) => startPage + i
+  );
+
+  return (
+    <div className='mt-8 flex items-center justify-center gap-2'>
+      {/* Previous Button */}
+      <Button
+        variant='outline'
+        size='sm'
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+        className='h-9'
+      >
+        <ChevronLeft className='h-4 w-4' />
+      </Button>
+
+      {/* Ellipsis - Start */}
+      {startPage > 1 && (
+        <>
+          <Button
+            variant='ghost'
+            size='sm'
+            onClick={() => onPageChange(1)}
+            className='h-9 w-9 p-0'
+          >
+            1
+          </Button>
+          {startPage > 2 && (
+            <span className='text-muted-foreground px-1 text-xs'>...</span>
+          )}
+        </>
+      )}
+
+      {/* Page Numbers */}
+      {pages.map(page => (
+        <Button
+          key={page}
+          variant={currentPage === page ? 'default' : 'outline'}
+          size='sm'
+          onClick={() => onPageChange(page)}
+          className={`h-9 w-9 p-0 ${
+            currentPage === page
+              ? 'border-amber-500 bg-amber-500 text-white hover:bg-amber-600'
+              : ''
+          }`}
+        >
+          {page}
+        </Button>
+      ))}
+
+      {/* Ellipsis - End */}
+      {endPage < totalPages && (
+        <>
+          {endPage < totalPages - 1 && (
+            <span className='text-muted-foreground px-1 text-xs'>...</span>
+          )}
+          <Button
+            variant='ghost'
+            size='sm'
+            onClick={() => onPageChange(totalPages)}
+            className='h-9 w-9 p-0'
+          >
+            {totalPages}
+          </Button>
+        </>
+      )}
+
+      {/* Next Button */}
+      <Button
+        variant='outline'
+        size='sm'
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        className='h-9'
+      >
+        <ChevronRight className='h-4 w-4' />
+      </Button>
+    </div>
+  );
+}
diff --git a/components/crowdfunding/quick-links.tsx b/components/crowdfunding/quick-links.tsx
new file mode 100644
index 000000000..c0806911e
--- /dev/null
+++ b/components/crowdfunding/quick-links.tsx
@@ -0,0 +1,82 @@
+'use client';
+
+import Link from 'next/link';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Target,
+  Users,
+  MessageSquare,
+  DollarSign,
+  ArrowRight,
+} from 'lucide-react';
+
+interface QuickLinksProps {
+  slug: string;
+  milestonesCount: number;
+  teamCount: number;
+  commentsCount: number;
+  contributorsCount: number;
+}
+
+export function QuickLinks({
+  slug,
+  milestonesCount,
+  teamCount,
+  commentsCount,
+  contributorsCount,
+}: QuickLinksProps) {
+  const links = [
+    {
+      icon: Target,
+      label: 'Milestones',
+      count: milestonesCount,
+      href: `${slug}#milestones`,
+    },
+    {
+      icon: Users,
+      label: 'Team',
+      count: teamCount,
+      href: `${slug}#team`,
+    },
+    {
+      icon: MessageSquare,
+      label: 'Comments',
+      count: commentsCount,
+      href: `${slug}#comments`,
+    },
+    {
+      icon: DollarSign,
+      label: 'Funding',
+      count: contributorsCount,
+      href: `${slug}#funding`,
+    },
+  ];
+
+  return (
+    <div className='grid grid-cols-2 gap-3 lg:grid-cols-4'>
+      {links.map((link, index) => {
+        const Icon = link.icon;
+        return (
+          <Link key={index} href={link.href}>
+            <Card className='bg-card/40 border-border/30 hover:bg-card/60 hover:border-accent/50 h-full cursor-pointer transition-all'>
+              <CardContent className='flex h-full flex-col items-start justify-between p-4'>
+                <div className='flex w-full items-start justify-between'>
+                  <Icon className='text-accent/70 h-4 w-4' />
+                  <ArrowRight className='text-muted-foreground h-4 w-4 opacity-0 transition-transform group-hover:translate-x-1 hover:opacity-100' />
+                </div>
+                <div className='mt-3'>
+                  <p className='text-muted-foreground text-xs font-medium tracking-wide uppercase'>
+                    {link.label}
+                  </p>
+                  <p className='text-foreground mt-1 text-lg font-semibold'>
+                    {link.count}
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/components/crowdfunding/submit-evidence-modal.tsx b/components/crowdfunding/submit-evidence-modal.tsx
new file mode 100644
index 000000000..926f7239d
--- /dev/null
+++ b/components/crowdfunding/submit-evidence-modal.tsx
@@ -0,0 +1,450 @@
+'use client';
+
+import { useState } from 'react';
+import * as React from 'react';
+import {
+  FileText,
+  ExternalLink,
+  Loader2,
+  Upload,
+  X,
+  AlertCircle,
+} from 'lucide-react';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import Link from 'next/link';
+
+interface SubmitEvidenceModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  milestoneId?: string;
+  milestoneName: string;
+  isSubmitting?: boolean;
+  onSubmit?: (data: {
+    status: string;
+    submissionNotes: string;
+    proofOfWorkLinks: string[];
+    documents?: File[];
+  }) => Promise<void>;
+}
+
+export function SubmitEvidenceModal({
+  open,
+  onOpenChange,
+  milestoneName,
+  isSubmitting: externalIsSubmitting,
+  onSubmit,
+}: SubmitEvidenceModalProps) {
+  const [status, setStatus] = useState('');
+  const [submissionNotes, setSubmissionNotes] = useState('');
+  const [proofOfWorkLinks, setProofOfWorkLinks] = useState<string[]>([]);
+  const [newLink, setNewLink] = useState('');
+  const [documents, setDocuments] = useState<File[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState('');
+
+  const submitting = externalIsSubmitting || isSubmitting;
+
+  const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB per file
+  const MAX_TOTAL_SIZE = 15 * 1024 * 1024; // 15MB total
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length === 0) return;
+
+    // Validate file types
+    const allowedTypes = [
+      'application/pdf',
+      'application/msword',
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      'image/jpeg',
+      'image/png',
+      'image/gif',
+      'image/webp',
+    ];
+
+    const invalidFiles = files.filter(
+      file => !allowedTypes.includes(file.type)
+    );
+    if (invalidFiles.length > 0) {
+      setError('Please upload only valid documents (PDF, Word, or Images)');
+      return;
+    }
+
+    // Check individual file sizes
+    const oversizedFiles = files.filter(file => file.size > MAX_FILE_SIZE);
+    if (oversizedFiles.length > 0) {
+      setError(
+        'Some files exceed 5MB limit. Please reduce file size and try again.'
+      );
+      return;
+    }
+
+    // Calculate total size including existing files
+    const newTotalSize = [...documents, ...files].reduce(
+      (sum, file) => sum + file.size,
+      0
+    );
+
+    if (newTotalSize > MAX_TOTAL_SIZE) {
+      setError('Total file size must be less than 15MB');
+      return;
+    }
+
+    setError('');
+    setDocuments(prev => [...prev, ...files]);
+
+    // Reset input to allow selecting the same files again if needed
+    e.target.value = '';
+  };
+
+  const removeDocument = (index: number) => {
+    setDocuments(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const addLink = () => {
+    if (!newLink) return;
+    try {
+      new URL(newLink);
+      setProofOfWorkLinks([...proofOfWorkLinks, newLink]);
+      setNewLink('');
+      setError('');
+    } catch {
+      setError('Please enter a valid URL');
+    }
+  };
+
+  const removeLink = (index: number) => {
+    setProofOfWorkLinks(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (!status) {
+      setError('Please select a status');
+      return;
+    }
+
+    if (!submissionNotes.trim()) {
+      setError('Please provide submission notes');
+      return;
+    }
+
+    if (submissionNotes.trim().length < 10) {
+      setError('Submission notes must be at least 10 characters');
+      return;
+    }
+
+    if (proofOfWorkLinks.length === 0 && documents.length === 0) {
+      setError('At least one proof of work (file or link) is required');
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      if (onSubmit) {
+        await onSubmit({
+          status,
+          submissionNotes,
+          proofOfWorkLinks,
+          documents: documents.length > 0 ? documents : undefined,
+        });
+      }
+
+      // Reset form
+      setStatus('');
+      setSubmissionNotes('');
+      setProofOfWorkLinks([]);
+      setDocuments([]);
+      onOpenChange(false);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Failed to submit evidence'
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setStatus('');
+    setSubmissionNotes('');
+    setProofOfWorkLinks([]);
+    setDocuments([]);
+    setError('');
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className='sm:max-w-[600px]'>
+        <DialogHeader>
+          <DialogTitle className='flex items-center gap-2'>
+            <FileText className='h-5 w-5' />
+            Submit Milestone Evidence
+          </DialogTitle>
+          <DialogDescription>
+            Provide proof of work for{' '}
+            <strong className='text-white'>{milestoneName}</strong>
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className='space-y-5'>
+          {/* Help Link */}
+          <Alert className='border-blue-500/30 bg-blue-500/10'>
+            <AlertDescription className='flex items-start gap-2 text-xs'>
+              <span>
+                Need help?{' '}
+                <Link
+                  href='/docs/how-to-write-evidence'
+                  target='_blank'
+                  className='text-primary inline-flex items-center gap-1 hover:underline'
+                >
+                  View guide
+                  <ExternalLink className='h-3 w-3' />
+                </Link>
+              </span>
+            </AlertDescription>
+          </Alert>
+
+          {/* Status Select */}
+          <div className='space-y-2'>
+            <Label htmlFor='status' className='text-sm'>
+              Status *
+            </Label>
+            <Select value={status} onValueChange={setStatus}>
+              <SelectTrigger id='status' className='h-9'>
+                <SelectValue placeholder='Select status' />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value='in_progress'>In Progress</SelectItem>
+                <SelectItem value='submitted'>Submit for Review</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Submission Notes */}
+          <div className='space-y-2'>
+            <Label htmlFor='submissionNotes' className='text-sm'>
+              Submission Notes *
+            </Label>
+            <Textarea
+              id='submissionNotes'
+              value={submissionNotes}
+              onChange={e => setSubmissionNotes(e.target.value)}
+              placeholder='Describe work completed, achievements, and other notes...'
+              className='min-h-[100px] resize-none text-sm'
+              disabled={submitting}
+              maxLength={2000}
+            />
+            <div className='flex items-center justify-between text-xs'>
+              <p className='text-muted-foreground'>
+                Min 10 • Max 2000 characters
+              </p>
+              <p
+                className={`font-mono tabular-nums ${
+                  submissionNotes.length < 10
+                    ? 'text-amber-500'
+                    : submissionNotes.length > 1800
+                      ? 'text-red-500'
+                      : 'text-muted-foreground'
+                }`}
+              >
+                {submissionNotes.length}/2000
+              </p>
+            </div>
+          </div>
+
+          {/* Proof of Work Links */}
+          <div className='space-y-3'>
+            <Label htmlFor='links'>Proof of Work Links</Label>
+            <div className='flex gap-2'>
+              <Input
+                id='links'
+                value={newLink}
+                onChange={e => setNewLink(e.target.value)}
+                placeholder='https://github.com/...'
+                className='text-sm'
+                disabled={submitting}
+              />
+              <Button
+                type='button'
+                onClick={addLink}
+                disabled={submitting}
+                variant='secondary'
+              >
+                Add
+              </Button>
+            </div>
+            {proofOfWorkLinks.length > 0 && (
+              <ul className='space-y-2'>
+                {proofOfWorkLinks.map((link, index) => (
+                  <li
+                    key={index}
+                    className='bg-muted/20 flex items-center justify-between rounded px-3 py-2 text-sm'
+                  >
+                    <span className='truncate text-white/80'>{link}</span>
+                    <button
+                      type='button'
+                      onClick={() => removeLink(index)}
+                      className='text-gray-400 hover:text-red-400'
+                    >
+                      <X className='h-4 w-4' />
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+
+          {/* Document Upload (Optional) */}
+          <div className='space-y-3'>
+            <Label htmlFor='documents'>Supporting Documents (Optional)</Label>
+            <Input
+              id='documents'
+              type='file'
+              onChange={handleFileChange}
+              accept='.pdf,.doc,.docx,.jpg,.jpeg,.png,.gif,.webp'
+              className='hidden'
+              disabled={submitting}
+              multiple
+            />
+            <Button
+              type='button'
+              variant='outline'
+              onClick={() => {
+                const input = window.document.getElementById(
+                  'documents'
+                ) as HTMLInputElement;
+                input?.click();
+              }}
+              disabled={submitting}
+              className='w-full'
+            >
+              <Upload className='mr-2 h-4 w-4' />
+              {documents.length > 0 ? 'Add More Files' : 'Upload Documents'}
+            </Button>
+
+            {documents.length > 0 && (
+              <div className='space-y-3'>
+                <div className='flex flex-wrap gap-2'>
+                  {documents.map((doc, index) => {
+                    const isOversized = doc.size > MAX_FILE_SIZE;
+                    const sizeInMB = (doc.size / (1024 * 1024)).toFixed(2);
+
+                    return (
+                      <div
+                        key={index}
+                        className={`relative inline-flex max-w-[280px] items-center gap-2 rounded-full px-3 py-2 text-sm font-medium transition-colors ${
+                          isOversized
+                            ? 'border border-red-500/30 bg-red-500/15 text-red-300'
+                            : 'bg-background-main-bg/50 border border-gray-600/50 text-gray-100 hover:bg-gray-600/50'
+                        }`}
+                      >
+                        <FileText className='h-3.5 w-3.5 shrink-0' />
+                        <span className='min-w-0 flex-1 truncate'>
+                          {doc.name}
+                        </span>
+                        <span
+                          className={`shrink-0 font-mono text-xs ${
+                            isOversized ? 'text-red-300' : 'text-gray-400'
+                          }`}
+                        >
+                          {sizeInMB}MB
+                        </span>
+                        <button
+                          type='button'
+                          onClick={() => removeDocument(index)}
+                          disabled={submitting}
+                          className={`inline-flex shrink-0 items-center justify-center rounded-full p-0.5 transition-colors ${
+                            isOversized
+                              ? 'text-red-300 hover:bg-red-600/30 hover:text-red-200'
+                              : 'text-gray-400 hover:bg-gray-500/30 hover:text-gray-300'
+                          }`}
+                          aria-label={`Remove ${doc.name}`}
+                        >
+                          <X className='h-3.5 w-3.5' />
+                        </button>
+                      </div>
+                    );
+                  })}
+                </div>
+
+                {documents.some(doc => doc.size > MAX_FILE_SIZE) && (
+                  <div className='flex gap-2 rounded-lg border border-red-500/30 bg-red-500/10 p-3'>
+                    <AlertCircle className='mt-0.5 h-4 w-4 shrink-0 text-red-400' />
+                    <p className='text-xs text-red-300'>
+                      Some files exceed the 5MB limit. Please remove or replace
+                      them.
+                    </p>
+                  </div>
+                )}
+              </div>
+            )}
+
+            <p className='text-muted-foreground text-xs'>
+              PDF, Word documents, or images • Max 5MB per file • 15MB total
+            </p>
+          </div>
+
+          {/* Error Message */}
+          {error && (
+            <Alert
+              variant='destructive'
+              className='border-red-500/30 bg-red-500/10'
+            >
+              <AlertCircle className='h-4 w-4' />
+              <AlertDescription className='ml-2 text-sm text-red-300'>
+                {error}
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {/* Footer Actions */}
+          <DialogFooter className='gap-2 pt-2'>
+            <Button
+              type='button'
+              variant='outline'
+              onClick={handleCancel}
+              disabled={submitting}
+              className='h-9'
+            >
+              Cancel
+            </Button>
+            <Button type='submit' disabled={submitting} className='h-9'>
+              {submitting ? (
+                <>
+                  <Loader2 className='mr-2 h-4 w-4 animate-spin' />
+                  Submitting...
+                </>
+              ) : (
+                'Submit Evidence'
+              )}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/dashboard-content.tsx b/components/dashboard-content.tsx
new file mode 100644
index 000000000..54a4fcfa3
--- /dev/null
+++ b/components/dashboard-content.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import { AppSidebar } from '@/components/app-sidebar';
+import { ChartAreaInteractive } from '@/components/chart-area-interactive';
+import { DataTable } from '@/components/data-table';
+import { SectionCards } from '@/components/section-cards';
+import { SiteHeader } from '@/components/site-header';
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
+import { useAuthStatus } from '@/hooks/use-auth';
+import data from '../app/dashboard/data.json';
+import React from 'react';
+
+export function DashboardContent() {
+  const { user, isLoading } = useAuthStatus();
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  const { name = '', email = '', profile, image: userImage = '' } = user || {};
+  const userData = {
+    name: name || '',
+    email,
+    image: profile?.image || userImage,
+  };
+
+  return (
+    <SidebarProvider
+      style={
+        {
+          '--sidebar-width': 'calc(var(--spacing) * 72)',
+          '--header-height': 'calc(var(--spacing) * 12)',
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar user={userData} variant='inset' />
+      <SidebarInset className='bg-white'>
+        <SiteHeader />
+        <div className='flex flex-1 flex-col'>
+          <div className='@container/main flex flex-1 flex-col gap-2'>
+            <div className='flex flex-col gap-4 py-4 md:gap-6 md:py-6'>
+              <SectionCards />
+              <div className='px-4 lg:px-6'>
+                <ChartAreaInteractive />
+              </div>
+              <DataTable data={data} />
+            </div>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}
diff --git a/components/data-table.tsx b/components/data-table.tsx
new file mode 100644
index 000000000..f52ba0499
--- /dev/null
+++ b/components/data-table.tsx
@@ -0,0 +1,802 @@
+'use client';
+
+import * as React from 'react';
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type UniqueIdentifier,
+} from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import {
+  arrayMove,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import {
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
+  IconChevronsLeft,
+  IconChevronsRight,
+  IconCircleCheckFilled,
+  IconDotsVertical,
+  IconGripVertical,
+  IconLayoutColumns,
+  IconLoader,
+  IconPlus,
+  IconTrendingUp,
+} from '@tabler/icons-react';
+import {
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type ColumnDef,
+  type ColumnFiltersState,
+  type Row,
+  type SortingState,
+  type VisibilityState,
+} from '@tanstack/react-table';
+import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+import { useIsMobile } from '@/hooks/use-mobile';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@/components/ui/chart';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+
+export const schema = z.object({
+  id: z.number(),
+  header: z.string(),
+  type: z.string(),
+  status: z.string(),
+  target: z.string(),
+  limit: z.string(),
+  reviewer: z.string(),
+});
+
+// Create a separate component for the drag handle
+function DragHandle({ id }: { id: number }) {
+  const { attributes, listeners } = useSortable({
+    id,
+  });
+
+  return (
+    <Button
+      {...attributes}
+      {...listeners}
+      variant='ghost'
+      size='icon'
+      className='text-muted-foreground size-7 hover:bg-transparent'
+    >
+      <IconGripVertical className='text-muted-foreground size-3' />
+      <span className='sr-only'>Drag to reorder</span>
+    </Button>
+  );
+}
+
+const columns: ColumnDef<z.infer<typeof schema>>[] = [
+  {
+    id: 'drag',
+    header: () => null,
+    cell: ({ row }) => <DragHandle id={row.original.id} />,
+  },
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <div className='flex items-center justify-center'>
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() && 'indeterminate')
+          }
+          onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
+          aria-label='Select all'
+        />
+      </div>
+    ),
+    cell: ({ row }) => (
+      <div className='flex items-center justify-center'>
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={value => row.toggleSelected(!!value)}
+          aria-label='Select row'
+        />
+      </div>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: 'header',
+    header: 'Header',
+    cell: ({ row }) => {
+      return <TableCellViewer item={row.original} />;
+    },
+    enableHiding: false,
+  },
+  {
+    accessorKey: 'type',
+    header: 'Section Type',
+    cell: ({ row }) => (
+      <div className='w-32'>
+        <Badge variant='outline' className='text-muted-foreground px-1.5'>
+          {row.original.type}
+        </Badge>
+      </div>
+    ),
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: ({ row }) => (
+      <Badge variant='outline' className='text-muted-foreground px-1.5'>
+        {row.original.status === 'Done' ? (
+          <IconCircleCheckFilled className='fill-green-500 dark:fill-green-400' />
+        ) : (
+          <IconLoader />
+        )}
+        {row.original.status}
+      </Badge>
+    ),
+  },
+  {
+    accessorKey: 'target',
+    header: () => <div className='w-full text-right'>Target</div>,
+    cell: ({ row }) => (
+      <form
+        onSubmit={e => {
+          e.preventDefault();
+          toast.promise(new Promise(resolve => setTimeout(resolve, 1000)), {
+            loading: `Saving ${row.original.header}`,
+            success: 'Done',
+            error: 'Error',
+          });
+        }}
+      >
+        <Label htmlFor={`${row.original.id}-target`} className='sr-only'>
+          Target
+        </Label>
+        <Input
+          className='hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent'
+          defaultValue={row.original.target}
+          id={`${row.original.id}-target`}
+        />
+      </form>
+    ),
+  },
+  {
+    accessorKey: 'limit',
+    header: () => <div className='w-full text-right'>Limit</div>,
+    cell: ({ row }) => (
+      <form
+        onSubmit={e => {
+          e.preventDefault();
+          toast.promise(new Promise(resolve => setTimeout(resolve, 1000)), {
+            loading: `Saving ${row.original.header}`,
+            success: 'Done',
+            error: 'Error',
+          });
+        }}
+      >
+        <Label htmlFor={`${row.original.id}-limit`} className='sr-only'>
+          Limit
+        </Label>
+        <Input
+          className='hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent'
+          defaultValue={row.original.limit}
+          id={`${row.original.id}-limit`}
+        />
+      </form>
+    ),
+  },
+  {
+    accessorKey: 'reviewer',
+    header: 'Reviewer',
+    cell: ({ row }) => {
+      const isAssigned = row.original.reviewer !== 'Assign reviewer';
+
+      if (isAssigned) {
+        return row.original.reviewer;
+      }
+
+      return (
+        <>
+          <Label htmlFor={`${row.original.id}-reviewer`} className='sr-only'>
+            Reviewer
+          </Label>
+          <Select>
+            <SelectTrigger
+              className='w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate'
+              size='sm'
+              id={`${row.original.id}-reviewer`}
+            >
+              <SelectValue placeholder='Assign reviewer' />
+            </SelectTrigger>
+            <SelectContent align='end'>
+              <SelectItem value='Eddie Lake'>Eddie Lake</SelectItem>
+              <SelectItem value='Jamik Tashpulatov'>
+                Jamik Tashpulatov
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </>
+      );
+    },
+  },
+  {
+    id: 'actions',
+    cell: () => (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant='ghost'
+            className='data-[state=open]:bg-muted text-muted-foreground flex size-8'
+            size='icon'
+          >
+            <IconDotsVertical />
+            <span className='sr-only'>Open menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align='end' className='w-32'>
+          <DropdownMenuItem>Edit</DropdownMenuItem>
+          <DropdownMenuItem>Make a copy</DropdownMenuItem>
+          <DropdownMenuItem>Favorite</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant='destructive'>Delete</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    ),
+  },
+];
+
+function DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {
+  const { transform, transition, setNodeRef, isDragging } = useSortable({
+    id: row.original.id,
+  });
+
+  return (
+    <TableRow
+      data-state={row.getIsSelected() && 'selected'}
+      data-dragging={isDragging}
+      ref={setNodeRef}
+      className='relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80'
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition: transition,
+      }}
+    >
+      {row.getVisibleCells().map(cell => (
+        <TableCell key={cell.id}>
+          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </TableCell>
+      ))}
+    </TableRow>
+  );
+}
+
+export function DataTable({
+  data: initialData,
+}: {
+  data: z.infer<typeof schema>[];
+}) {
+  const [data, setData] = React.useState(() => initialData);
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const sortableId = React.useId();
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  );
+
+  const dataIds = React.useMemo<UniqueIdentifier[]>(
+    () => data?.map(({ id }) => id) || [],
+    [data]
+  );
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+      pagination,
+    },
+    getRowId: row => row.id.toString(),
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+  });
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (active && over && active.id !== over.id) {
+      setData(data => {
+        const oldIndex = dataIds.indexOf(active.id);
+        const newIndex = dataIds.indexOf(over.id);
+        return arrayMove(data, oldIndex, newIndex);
+      });
+    }
+  }
+
+  return (
+    <Tabs
+      defaultValue='outline'
+      className='w-full flex-col justify-start gap-6'
+    >
+      <div className='flex items-center justify-between px-4 lg:px-6'>
+        <Label htmlFor='view-selector' className='sr-only'>
+          View
+        </Label>
+        <Select defaultValue='outline'>
+          <SelectTrigger
+            className='flex w-fit @4xl/main:hidden'
+            size='sm'
+            id='view-selector'
+          >
+            <SelectValue placeholder='Select a view' />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value='outline'>Outline</SelectItem>
+            <SelectItem value='past-performance'>Past Performance</SelectItem>
+            <SelectItem value='key-personnel'>Key Personnel</SelectItem>
+            <SelectItem value='focus-documents'>Focus Documents</SelectItem>
+          </SelectContent>
+        </Select>
+        <TabsList className='**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex'>
+          <TabsTrigger value='outline'>Outline</TabsTrigger>
+          <TabsTrigger value='past-performance'>
+            Past Performance <Badge variant='secondary'>3</Badge>
+          </TabsTrigger>
+          <TabsTrigger value='key-personnel'>
+            Key Personnel <Badge variant='secondary'>2</Badge>
+          </TabsTrigger>
+          <TabsTrigger value='focus-documents'>Focus Documents</TabsTrigger>
+        </TabsList>
+        <div className='flex items-center gap-2'>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant='outline' size='sm'>
+                <IconLayoutColumns />
+                <span className='hidden lg:inline'>Customize Columns</span>
+                <span className='lg:hidden'>Columns</span>
+                <IconChevronDown />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align='end' className='w-56'>
+              {table
+                .getAllColumns()
+                .filter(
+                  column =>
+                    typeof column.accessorFn !== 'undefined' &&
+                    column.getCanHide()
+                )
+                .map(column => {
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={column.id}
+                      className='capitalize'
+                      checked={column.getIsVisible()}
+                      onCheckedChange={value =>
+                        column.toggleVisibility(!!value)
+                      }
+                    >
+                      {column.id}
+                    </DropdownMenuCheckboxItem>
+                  );
+                })}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Button variant='outline' size='sm'>
+            <IconPlus />
+            <span className='hidden lg:inline'>Add Section</span>
+          </Button>
+        </div>
+      </div>
+      <TabsContent
+        value='outline'
+        className='relative flex flex-col gap-4 overflow-auto px-4 lg:px-6'
+      >
+        <div className='overflow-hidden rounded-lg border'>
+          <DndContext
+            collisionDetection={closestCenter}
+            modifiers={[restrictToVerticalAxis]}
+            onDragEnd={handleDragEnd}
+            sensors={sensors}
+            id={sortableId}
+          >
+            <Table>
+              <TableHeader className='bg-muted sticky top-0 z-10'>
+                {table.getHeaderGroups().map(headerGroup => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map(header => {
+                      return (
+                        <TableHead key={header.id} colSpan={header.colSpan}>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody className='**:data-[slot=table-cell]:first:w-8'>
+                {table.getRowModel().rows?.length ? (
+                  <SortableContext
+                    items={dataIds}
+                    strategy={verticalListSortingStrategy}
+                  >
+                    {table.getRowModel().rows.map(row => (
+                      <DraggableRow key={row.id} row={row} />
+                    ))}
+                  </SortableContext>
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className='h-24 text-center'
+                    >
+                      No results.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </DndContext>
+        </div>
+        <div className='flex items-center justify-between px-4'>
+          <div className='text-muted-foreground hidden flex-1 text-sm lg:flex'>
+            {table.getFilteredSelectedRowModel().rows.length} of{' '}
+            {table.getFilteredRowModel().rows.length} row(s) selected.
+          </div>
+          <div className='flex w-full items-center gap-8 lg:w-fit'>
+            <div className='hidden items-center gap-2 lg:flex'>
+              <Label htmlFor='rows-per-page' className='text-sm font-medium'>
+                Rows per page
+              </Label>
+              <Select
+                value={`${table.getState().pagination.pageSize}`}
+                onValueChange={value => {
+                  table.setPageSize(Number(value));
+                }}
+              >
+                <SelectTrigger size='sm' className='w-20' id='rows-per-page'>
+                  <SelectValue
+                    placeholder={table.getState().pagination.pageSize}
+                  />
+                </SelectTrigger>
+                <SelectContent side='top'>
+                  {[10, 20, 30, 40, 50].map(pageSize => (
+                    <SelectItem key={pageSize} value={`${pageSize}`}>
+                      {pageSize}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className='flex w-fit items-center justify-center text-sm font-medium'>
+              Page {table.getState().pagination.pageIndex + 1} of{' '}
+              {table.getPageCount()}
+            </div>
+            <div className='ml-auto flex items-center gap-2 lg:ml-0'>
+              <Button
+                variant='outline'
+                className='hidden h-8 w-8 p-0 lg:flex'
+                onClick={() => table.setPageIndex(0)}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <span className='sr-only'>Go to first page</span>
+                <IconChevronsLeft />
+              </Button>
+              <Button
+                variant='outline'
+                className='size-8'
+                size='icon'
+                onClick={() => table.previousPage()}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <span className='sr-only'>Go to previous page</span>
+                <IconChevronLeft />
+              </Button>
+              <Button
+                variant='outline'
+                className='size-8'
+                size='icon'
+                onClick={() => table.nextPage()}
+                disabled={!table.getCanNextPage()}
+              >
+                <span className='sr-only'>Go to next page</span>
+                <IconChevronRight />
+              </Button>
+              <Button
+                variant='outline'
+                className='hidden size-8 lg:flex'
+                size='icon'
+                onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+                disabled={!table.getCanNextPage()}
+              >
+                <span className='sr-only'>Go to last page</span>
+                <IconChevronsRight />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </TabsContent>
+      <TabsContent
+        value='past-performance'
+        className='flex flex-col px-4 lg:px-6'
+      >
+        <div className='aspect-video w-full flex-1 rounded-lg border border-dashed'></div>
+      </TabsContent>
+      <TabsContent value='key-personnel' className='flex flex-col px-4 lg:px-6'>
+        <div className='aspect-video w-full flex-1 rounded-lg border border-dashed'></div>
+      </TabsContent>
+      <TabsContent
+        value='focus-documents'
+        className='flex flex-col px-4 lg:px-6'
+      >
+        <div className='aspect-video w-full flex-1 rounded-lg border border-dashed'></div>
+      </TabsContent>
+    </Tabs>
+  );
+}
+
+const chartData = [
+  { month: 'January', desktop: 186, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+  { month: 'April', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'June', desktop: 214, mobile: 140 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--primary)',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: 'var(--primary)',
+  },
+} satisfies ChartConfig;
+
+function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
+  const isMobile = useIsMobile();
+
+  return (
+    <Drawer direction={isMobile ? 'bottom' : 'right'}>
+      <DrawerTrigger asChild>
+        <Button variant='link' className='text-foreground w-fit px-0 text-left'>
+          {item.header}
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader className='gap-1'>
+          <DrawerTitle>{item.header}</DrawerTitle>
+          <DrawerDescription>
+            Showing total visitors for the last 6 months
+          </DrawerDescription>
+        </DrawerHeader>
+        <div className='flex flex-col gap-4 overflow-y-auto px-4 text-sm'>
+          {!isMobile && (
+            <>
+              <ChartContainer config={chartConfig}>
+                <AreaChart
+                  accessibilityLayer
+                  data={chartData}
+                  margin={{
+                    left: 0,
+                    right: 10,
+                  }}
+                >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                    dataKey='month'
+                    tickLine={false}
+                    axisLine={false}
+                    tickMargin={8}
+                    tickFormatter={value => value.slice(0, 3)}
+                    hide
+                  />
+                  <ChartTooltip
+                    cursor={false}
+                    content={<ChartTooltipContent indicator='dot' />}
+                  />
+                  <Area
+                    dataKey='mobile'
+                    type='natural'
+                    fill='var(--color-mobile)'
+                    fillOpacity={0.6}
+                    stroke='var(--color-mobile)'
+                    stackId='a'
+                  />
+                  <Area
+                    dataKey='desktop'
+                    type='natural'
+                    fill='var(--color-desktop)'
+                    fillOpacity={0.4}
+                    stroke='var(--color-desktop)'
+                    stackId='a'
+                  />
+                </AreaChart>
+              </ChartContainer>
+              <Separator />
+              <div className='grid gap-2'>
+                <div className='flex gap-2 leading-none font-medium'>
+                  Trending up by 5.2% this month{' '}
+                  <IconTrendingUp className='size-4' />
+                </div>
+                <div className='text-muted-foreground'>
+                  Showing total visitors for the last 6 months. This is just
+                  some random text to test the layout. It spans multiple lines
+                  and should wrap around.
+                </div>
+              </div>
+              <Separator />
+            </>
+          )}
+          <form className='flex flex-col gap-4'>
+            <div className='flex flex-col gap-3'>
+              <Label htmlFor='header'>Header</Label>
+              <Input id='header' defaultValue={item.header} />
+            </div>
+            <div className='grid grid-cols-2 gap-4'>
+              <div className='flex flex-col gap-3'>
+                <Label htmlFor='type'>Type</Label>
+                <Select defaultValue={item.type}>
+                  <SelectTrigger id='type' className='w-full'>
+                    <SelectValue placeholder='Select a type' />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value='Table of Contents'>
+                      Table of Contents
+                    </SelectItem>
+                    <SelectItem value='Executive Summary'>
+                      Executive Summary
+                    </SelectItem>
+                    <SelectItem value='Technical Approach'>
+                      Technical Approach
+                    </SelectItem>
+                    <SelectItem value='Design'>Design</SelectItem>
+                    <SelectItem value='Capabilities'>Capabilities</SelectItem>
+                    <SelectItem value='Focus Documents'>
+                      Focus Documents
+                    </SelectItem>
+                    <SelectItem value='Narrative'>Narrative</SelectItem>
+                    <SelectItem value='Cover Page'>Cover Page</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className='flex flex-col gap-3'>
+                <Label htmlFor='status'>Status</Label>
+                <Select defaultValue={item.status}>
+                  <SelectTrigger id='status' className='w-full'>
+                    <SelectValue placeholder='Select a status' />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value='Done'>Done</SelectItem>
+                    <SelectItem value='In Progress'>In Progress</SelectItem>
+                    <SelectItem value='Not Started'>Not Started</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className='grid grid-cols-2 gap-4'>
+              <div className='flex flex-col gap-3'>
+                <Label htmlFor='target'>Target</Label>
+                <Input id='target' defaultValue={item.target} />
+              </div>
+              <div className='flex flex-col gap-3'>
+                <Label htmlFor='limit'>Limit</Label>
+                <Input id='limit' defaultValue={item.limit} />
+              </div>
+            </div>
+            <div className='flex flex-col gap-3'>
+              <Label htmlFor='reviewer'>Reviewer</Label>
+              <Select defaultValue={item.reviewer}>
+                <SelectTrigger id='reviewer' className='w-full'>
+                  <SelectValue placeholder='Select a reviewer' />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value='Eddie Lake'>Eddie Lake</SelectItem>
+                  <SelectItem value='Jamik Tashpulatov'>
+                    Jamik Tashpulatov
+                  </SelectItem>
+                  <SelectItem value='Emily Whalen'>Emily Whalen</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </form>
+        </div>
+        <DrawerFooter>
+          <Button>Submit</Button>
+          <DrawerClose asChild>
+            <Button variant='outline'>Done</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+}
diff --git a/components/delete-campaign-alert.tsx b/components/delete-campaign-alert.tsx
new file mode 100644
index 000000000..9a4e5f1a8
--- /dev/null
+++ b/components/delete-campaign-alert.tsx
@@ -0,0 +1,109 @@
+'use client';
+
+import * as React from 'react';
+import { Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { deleteCrowdfundingProject } from '@/features/projects/api';
+
+interface DeleteCampaignAlertProps {
+  campaignId: string;
+  campaignTitle: string;
+  onSuccess?: () => void;
+  onError?: (error: string) => void;
+  children?: React.ReactNode;
+}
+
+export function DeleteCampaignAlert({
+  campaignId,
+  campaignTitle,
+  onSuccess,
+  onError,
+  children,
+}: DeleteCampaignAlertProps) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [isDeleting, setIsDeleting] = React.useState(false);
+
+  const handleDelete = async () => {
+    try {
+      setIsDeleting(true);
+      await deleteCrowdfundingProject(campaignId);
+
+      toast.success('Campaign deleted successfully', {
+        description: `"${campaignTitle}" has been permanently removed.`,
+      });
+
+      setIsOpen(false);
+      onSuccess?.();
+    } catch (error: any) {
+      const errorMessage =
+        error?.response?.data?.message ||
+        error?.message ||
+        'Failed to delete campaign';
+
+      toast.error('Failed to delete campaign', {
+        description: errorMessage,
+      });
+
+      onError?.(errorMessage);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogTrigger asChild>
+        {children || (
+          <Button
+            variant='ghost'
+            size='sm'
+            className='text-error-400 hover:bg-error-400/10'
+          >
+            <Trash2 className='mr-2 h-4 w-4' />
+            Delete Campaign
+          </Button>
+        )}
+      </AlertDialogTrigger>
+      <AlertDialogContent className='bg-background border-border'>
+        <AlertDialogHeader>
+          <AlertDialogTitle className='text-foreground'>
+            Delete Campaign
+          </AlertDialogTitle>
+          <AlertDialogDescription className='text-muted-foreground'>
+            Are you sure you want to delete <strong>"{campaignTitle}"</strong>?
+            This action cannot be undone. Only campaigns in draft/reviewing
+            phase without contributions can be deleted.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel
+            disabled={isDeleting}
+            className='bg-background border-border text-foreground hover:bg-muted/50'
+          >
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleDelete}
+            disabled={isDeleting}
+            className='bg-error-500 hover:bg-error-600 text-white'
+          >
+            {isDeleting ? 'Deleting...' : 'Delete Campaign'}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/components/hackathons/HackathonsPage.tsx b/components/hackathons/HackathonsPage.tsx
index 49d0a9c7a..9643f9547 100644
--- a/components/hackathons/HackathonsPage.tsx
+++ b/components/hackathons/HackathonsPage.tsx
@@ -9,7 +9,7 @@ import { useHackathonsList } from '@/hooks/hackathon/use-hackathons-list';
 import { useHackathonTransform } from '@/hooks/hackathon/use-hackathon-transform';
 import { BoundlessButton } from '../buttons';
 import { ArrowDownIcon, XIcon } from 'lucide-react';
-import LoadingScreen from '../landing-page/project/CreateProjectModal/LoadingScreen';
+import LoadingScreen from '@/features/projects/components/CreateProjectModal/LoadingScreen';
 
 interface HackathonsPageProps {
   className?: string;
diff --git a/components/landing-page/Explore.tsx b/components/landing-page/Explore.tsx
index 2505b86b3..c01cbf9c6 100644
--- a/components/landing-page/Explore.tsx
+++ b/components/landing-page/Explore.tsx
@@ -4,31 +4,14 @@ import { cn } from '@/lib/utils';
 import { ArrowRight } from 'lucide-react';
 import Image from 'next/image';
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import ProjectCard from './project/ProjectCard';
 import HackathonCard from './hackathon/HackathonCard';
 import Link from 'next/link';
 import { getPublicHackathonsList } from '@/lib/api/hackathons';
 import type { Hackathon } from '@/lib/api/hackathons';
 import { Skeleton } from '@/components/ui/skeleton';
-import { useProjects } from '@/hooks/project/use-project';
-
-const mapCrowdfundingStatus = (
-  status: string
-): 'Validation' | 'Funding' | 'Funded' | 'Completed' => {
-  switch (status?.toLowerCase()) {
-    case 'validation':
-      return 'Validation';
-    case 'campaigning':
-    case 'funding':
-      return 'Funding';
-    case 'funded':
-      return 'Funded';
-    case 'completed':
-      return 'Completed';
-    default:
-      return 'Validation';
-  }
-};
+import { useProjects } from '@/features/projects/hooks/use-project';
+import ProjectCard from '@/features/projects/components/ProjectCard';
+import { mapCrowdfundingToCardData } from '@/features/projects/utils/card-mappers';
 
 const ProjectCardSkeleton = () => (
   <div className='font-inter flex w-full max-w-full flex-col gap-4 rounded-[8px] border border-gray-900 bg-[#030303] p-4 sm:p-5'>
@@ -222,32 +205,13 @@ export default function Explore() {
                 No projects available at the moment.
               </div>
             ) : (
-              projects.map(project => {
-                const daysToDeadline = project.fundingEndDate
-                  ? Math.ceil(
-                      (new Date(project.fundingEndDate).getTime() -
-                        Date.now()) /
-                        (1000 * 60 * 60 * 24)
-                    )
-                  : 30;
-
-                return (
-                  <ProjectCard
-                    isFullWidth={true}
-                    key={project.id}
-                    projectId={project.id}
-                    deadlineInDays={Math.max(0, daysToDeadline)}
-                    status={mapCrowdfundingStatus(project.project.status)}
-                    creatorName={project.project.creator?.name || 'Anonymous'}
-                    creatorLogo={
-                      project.project.creator?.image || '/avatar.png'
-                    }
-                    projectImage={project.project.logo || '/banner.png'}
-                    projectTitle={project.project.title}
-                    projectDescription={project.project.vision ?? undefined}
-                  />
-                );
-              })
+              projects.map(project => (
+                <ProjectCard
+                  isFullWidth={true}
+                  key={project.id}
+                  data={mapCrowdfundingToCardData(project)}
+                />
+              ))
             )}
           </>
         )}
diff --git a/components/landing-page/Hero2.tsx b/components/landing-page/Hero2.tsx
index 333fc940e..76eb39ec2 100644
--- a/components/landing-page/Hero2.tsx
+++ b/components/landing-page/Hero2.tsx
@@ -11,7 +11,7 @@ import {
 import Image from 'next/image';
 import { BoundlessButton } from '../buttons';
 import HackathonCard from '@/components/landing-page/hackathon/HackathonCard';
-import ProjectCard from './project/ProjectCard';
+import ProjectCard from '@/features/projects/components/ProjectCard';
 
 const BRAND_COLOR = '#a7f950';
 
@@ -217,30 +217,54 @@ export default function Hero2() {
 
           <div className='absolute top-0 left-1/2 z-20 w-80 -translate-x-1/2 transform cursor-pointer rounded-2xl shadow-xl transition-transform duration-300 hover:scale-105'>
             <ProjectCard
-              projectId='project-1'
-              creatorName='Green Energy Team'
-              creatorLogo='/bitmed.png'
-              projectImage='/banner.png'
-              projectTitle='Solar Power Initiative'
-              projectDescription='Revolutionary solar energy solution for rural communities'
-              status='Funding'
-              deadlineInDays={15}
-              funding={{ current: 25000, goal: 100000, currency: 'USD' }}
-              votes={{ current: 450, goal: 500 }}
+              data={{
+                id: 'project-1',
+                slug: 'solar-power-initiative',
+                title: 'Solar Power Initiative',
+                vision:
+                  'Revolutionary solar energy solution for rural communities',
+                banner: '/banner.png',
+                logo: '/bitmed.png',
+                category: 'Sustainability',
+                creator: {
+                  name: 'Green Energy Team',
+                  image: '/bitmed.png',
+                },
+                status: 'Funding',
+                stats: {
+                  funding: {
+                    raised: 25000,
+                    goal: 100000,
+                    currency: 'USD',
+                  },
+                  votes: { current: 450, goal: 500 },
+                  daysLeft: 15,
+                },
+              }}
             />
           </div>
 
           <div className='absolute top-20 right-0 z-10 w-72 rotate-3 transform cursor-pointer rounded-2xl shadow-xl transition-transform duration-300 hover:rotate-0'>
             <ProjectCard
-              projectId='project-2'
-              creatorName='AI Research Lab'
-              creatorLogo='/bitmed.png'
-              projectImage='/banner.png'
-              projectTitle='AI Learning Platform'
-              projectDescription='Democratizing AI education through interactive learning'
-              status='Validation'
-              deadlineInDays={8}
-              votes={{ current: 320, goal: 500 }}
+              data={{
+                id: 'project-2',
+                slug: 'ai-learning-platform',
+                title: 'AI Learning Platform',
+                vision:
+                  'Democratizing AI education through interactive learning',
+                banner: '/banner.png',
+                logo: '/bitmed.png',
+                category: 'Education',
+                creator: {
+                  name: 'AI Research Lab',
+                  image: '/bitmed.png',
+                },
+                status: 'Validation',
+                stats: {
+                  votes: { current: 320, goal: 500 },
+                  daysLeft: 8,
+                },
+              }}
             />
           </div>
 
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index 594a7938a..053e78179 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -27,11 +27,11 @@ import {
 import { UserMenu } from '../user/UserMenu';
 import { cn } from '@/lib/utils';
 import { BoundlessButton } from '../buttons';
-import CreateProjectModal from './project/CreateProjectModal';
 import { useProtectedAction } from '@/hooks/use-protected-action';
 import WalletRequiredModal from '@/components/wallet/WalletRequiredModal';
 import { WalletButton } from '../wallet/WalletButton';
 import { NotificationBell } from '../notifications/NotificationBell';
+import CreateProjectModal from '@/features/projects/components/CreateProjectModal';
 
 // Constants
 const BRAND_COLOR = '#a7f950';
diff --git a/components/landing-page/project/CreateProjectModal/index.tsx b/components/landing-page/project/CreateProjectModal/index.tsx
deleted file mode 100644
index 45de8a0e1..000000000
--- a/components/landing-page/project/CreateProjectModal/index.tsx
+++ /dev/null
@@ -1,1007 +0,0 @@
-import BoundlessSheet from '@/components/sheet/boundless-sheet';
-import React, { useState, useRef, useCallback, useEffect } from 'react';
-import Header from './Header';
-import Footer from './Footer';
-import Basic, { BasicFormData } from './Basic';
-import Details, { DetailsFormData } from './Details';
-import Milestones, { MilestonesFormData } from './Milestones';
-import Team, { TeamFormData } from './Team';
-import Contact, { ContactFormData } from './Contact';
-import LoadingScreen from './LoadingScreen';
-import SuccessScreen from './SuccessScreen';
-import TransactionSigningScreen from './TransactionSigningScreen';
-import { z } from 'zod';
-import { createCrowdfundingProject } from '@/lib/api/project';
-import { CreateCrowdfundingProjectRequest } from '@/lib/api/types';
-import { useWalletProtection } from '@/hooks/use-wallet-protection';
-import { cn } from '@/lib/utils';
-import { useWalletContext } from '@/components/providers/wallet-provider';
-import { signTransaction } from '@/lib/config/wallet-kit';
-import {
-  useInitializeEscrow,
-  useSendTransaction,
-} from '@trustless-work/escrow';
-import {
-  InitializeMultiReleaseEscrowPayload,
-  EscrowType,
-  EscrowRequestResponse,
-  Status,
-  InitializeMultiReleaseEscrowResponse,
-} from '@trustless-work/escrow';
-
-type StepHandle = { validate: () => boolean; markSubmitted?: () => void };
-
-interface CreateProjectModalProps {
-  open: boolean;
-  setOpen: (open: boolean) => void;
-}
-
-export interface ProjectFormData {
-  basic: Partial<BasicFormData>;
-  details: Partial<DetailsFormData>;
-  milestones: Partial<MilestonesFormData>;
-  team: Partial<TeamFormData>;
-  contact: Partial<ContactFormData>;
-}
-
-const CreateProjectModal = ({ open, setOpen }: CreateProjectModalProps) => {
-  const [currentStep, setCurrentStep] = useState(1);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [submitErrors, setSubmitErrors] = useState<string[]>([]);
-  const [showSuccess, setShowSuccess] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [unsignedTransaction, setUnsignedTransaction] = useState<string | null>(
-    null
-  );
-  const [isSigningTransaction, setIsSigningTransaction] = useState(false);
-
-  // Escrow hooks
-  const { deployEscrow } = useInitializeEscrow();
-  const { sendTransaction } = useSendTransaction();
-
-  // Flow state
-  const [flowStep, setFlowStep] = useState<
-    'form' | 'initializing' | 'signing' | 'confirming' | 'success'
-  >('form');
-
-  const { walletAddress } = useWalletContext() || {
-    walletAddress: '',
-    walletName: '',
-  };
-
-  // Form data state
-  const [formData, setFormData] = useState<ProjectFormData>({
-    basic: {},
-    details: {},
-    milestones: {},
-    team: {},
-    contact: {},
-  });
-
-  // Refs for step components to access validation methods
-  const stepRefs = {
-    basic: useRef<StepHandle>(null),
-    details: useRef<StepHandle>(null),
-    milestones: useRef<StepHandle>(null),
-    team: useRef<StepHandle>(null),
-    contact: useRef<StepHandle>(null),
-  };
-
-  // Ref for the scrollable content container
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  // Wallet signing hooks
-  const { requireWallet } = useWalletProtection({
-    actionName: 'sign project creation transaction',
-  });
-
-  // Reset scroll position when step changes with smooth transition
-  useEffect(() => {
-    if (currentStep === 1) return; // Skip for initial load
-
-    // Reset scroll position immediately (while content is hidden)
-    const resetScroll = () => {
-      // Reset window scroll first
-      window.scrollTo(0, 0);
-
-      if (contentRef.current) {
-        // Try to find the scrollable parent container
-        const scrollableParent =
-          contentRef.current.closest('[data-radix-scroll-area-viewport]') ||
-          contentRef.current.closest('.overflow-y-auto') ||
-          contentRef.current.parentElement?.querySelector('.overflow-y-auto');
-
-        if (scrollableParent) {
-          scrollableParent.scrollTop = 0;
-        } else {
-          // Fallback to scrolling the content ref itself
-          contentRef.current.scrollTop = 0;
-        }
-
-        // Also try to find any element with overflow-y-auto in the document
-        const allScrollableElements =
-          document.querySelectorAll('.overflow-y-auto');
-        allScrollableElements.forEach(element => {
-          if (element.contains(contentRef.current)) {
-            element.scrollTop = 0;
-          }
-        });
-      }
-    };
-
-    // Reset scroll immediately
-    resetScroll();
-
-    return () => {};
-  }, [currentStep]);
-
-  // Auto-trigger transaction signing when we reach the signing state
-  useEffect(() => {
-    if (
-      flowStep === 'signing' &&
-      unsignedTransaction &&
-      !isSigningTransaction &&
-      submitErrors.length === 0
-    ) {
-      // Automatically trigger signing without requiring manual button click
-      handleSignTransaction();
-    }
-  }, [
-    flowStep,
-    unsignedTransaction,
-    isSigningTransaction,
-    submitErrors.length,
-  ]);
-
-  const handleBack = () => {
-    if (currentStep > 1) {
-      setCurrentStep(currentStep - 1);
-    }
-  };
-
-  const validateCurrentStep = (): boolean => {
-    const stepRef = stepRefs[getStepKey(currentStep)];
-    return stepRef?.current?.validate() ?? true;
-  };
-
-  const getStepKey = (step: number): keyof typeof stepRefs => {
-    switch (step) {
-      case 1:
-        return 'basic';
-      case 2:
-        return 'details';
-      case 3:
-        return 'milestones';
-      case 4:
-        return 'team';
-      case 5:
-        return 'contact';
-      default:
-        return 'basic';
-    }
-  };
-
-  const handleContinue = async () => {
-    // Mark the step as submitted so untouched fields can show errors
-    const key = getStepKey(currentStep);
-    stepRefs[key].current?.markSubmitted?.();
-    // Validate current step before proceeding
-    if (!validateCurrentStep()) {
-      return;
-    }
-
-    if (currentStep < 5) {
-      setCurrentStep(currentStep + 1);
-      return;
-    }
-
-    // Handle final submission (show loader then success)
-    await handleSubmit();
-  };
-
-  // Function to map form data to API request format
-  const mapFormDataToApiRequest = (
-    data: ProjectFormData
-  ): CreateCrowdfundingProjectRequest => {
-    const basic = data.basic || {};
-    const details = data.details || {};
-    const milestones = data.milestones || {
-      fundingAmount: '0',
-      milestones: [],
-    };
-    const team = data.team || { members: [] };
-    const contact = data.contact || {
-      telegram: '',
-      backupType: 'whatsapp',
-      backupContact: '',
-    };
-
-    // Convert milestones to API format
-    const apiMilestones = (milestones.milestones || []).map(milestone => ({
-      name: milestone.title,
-      description: milestone.description,
-      startDate: milestone.startDate,
-      endDate: milestone.endDate,
-      amount:
-        parseFloat(milestones.fundingAmount || '0') /
-        (milestones.milestones?.length || 1), // Distribute funding equally
-    }));
-
-    // Convert team members to API format
-    const apiTeam = (team.members || []).map(member => ({
-      name: member.email.split('@')[0], // Extract name from email
-      role: 'MEMBER', // Default role for all members
-      email: member.email,
-    }));
-
-    // Convert social links to API format
-    const socialLinks = basic.socialLinks?.filter(link => link.trim()) || [];
-    const apiSocialLinks = socialLinks.map(link => ({
-      platform: link.startsWith('https://twitter.com/')
-        ? 'twitter'
-        : link.startsWith('https://discord.gg/')
-          ? 'discord'
-          : link.startsWith('https://t.me/')
-            ? 'telegram'
-            : 'other', // Default platform
-      url: link,
-    }));
-
-    return {
-      title: basic.projectName || '',
-      logo: basic.logoUrl || '',
-      vision: basic.vision || '',
-      category: basic.category || '',
-      details: details.vision || '',
-      fundingAmount: parseFloat(milestones.fundingAmount || '0') || 0,
-      githubUrl: basic.githubUrl || undefined,
-      gitlabUrl: undefined,
-      bitbucketUrl: undefined,
-      projectWebsite: basic.websiteUrl || undefined,
-      demoVideo: basic.demoVideoUrl || undefined,
-      milestones: apiMilestones,
-      team: apiTeam,
-      contact: {
-        primary: `@${contact.telegram || ''}`,
-        backup: contact.backupContact || '',
-      },
-      socialLinks: apiSocialLinks,
-      escrowId: '',
-      transactionHash: '',
-      validateMilestones: true,
-    };
-  };
-
-  const handleRetry = () => {
-    setSubmitErrors([]);
-    setFlowStep('signing');
-  };
-
-  const handleSignTransaction = async () => {
-    if (!unsignedTransaction) {
-      setSubmitErrors(['No transaction to sign']);
-      return;
-    }
-
-    const walletValid = await requireWallet(async () => {
-      setIsSigningTransaction(true);
-      setFlowStep('confirming');
-
-      try {
-        // Step 3: Sign transaction with wallet
-        const signedXdr = await signTransaction({
-          unsignedTransaction,
-          address: walletAddress || '',
-        });
-
-        // Step 4: Send transaction
-        const sendResponse = await sendTransaction(signedXdr);
-
-        // Type guard: Check if response is successful
-        if (
-          'status' in sendResponse &&
-          sendResponse.status !== ('SUCCESS' as Status)
-        ) {
-          const errorMessage =
-            'message' in sendResponse &&
-            typeof sendResponse.message === 'string'
-              ? sendResponse.message
-              : 'Failed to send transaction';
-          throw new Error(errorMessage);
-        }
-
-        // Extract contractId and transaction hash from response
-        if (!('contractId' in sendResponse)) {
-          throw new Error('Response does not contain contractId');
-        }
-
-        const responseData =
-          sendResponse as InitializeMultiReleaseEscrowResponse;
-        const contractId = responseData.contractId;
-
-        // Extract transaction hash
-        // Note: The actual transaction hash will be available after the transaction is submitted
-        // For now, we use the contractId as the transaction identifier
-        // The backend may accept this or we can update it with the actual hash later
-        const transactionHash = contractId;
-
-        // Now create the project with escrow data
-        await handleCreateProject(contractId, transactionHash);
-      } catch (error) {
-        let errorMessage = 'Failed to sign transaction. Please try again.';
-
-        if (error instanceof Error) {
-          if (error.message.includes('User rejected')) {
-            errorMessage =
-              'Transaction signing was cancelled. Please try again.';
-          } else if (error.message.includes('Invalid transaction')) {
-            errorMessage =
-              'Invalid transaction format. Please contact support.';
-          } else if (error.message.includes('Network')) {
-            errorMessage =
-              'Network error. Please check your connection and try again.';
-          } else if (error.message.includes('Wallet not connected')) {
-            errorMessage =
-              'Wallet is not connected. Please reconnect your wallet.';
-          } else {
-            errorMessage = error.message;
-          }
-        }
-
-        setSubmitErrors([errorMessage]);
-        setIsSigningTransaction(false);
-        setFlowStep('signing');
-      }
-    });
-
-    if (!walletValid) {
-      return;
-    }
-  };
-
-  const handleCreateProject = async (
-    contractId: string,
-    transactionHash: string
-  ) => {
-    try {
-      // Map form data to API request format
-      const apiRequest = mapFormDataToApiRequest(formData);
-
-      // Add escrow data
-      const projectRequest: CreateCrowdfundingProjectRequest = {
-        ...apiRequest,
-        escrowId: contractId, // Use contractId as escrowId
-        transactionHash,
-        validateMilestones: true,
-      };
-
-      // Create the project
-      await createCrowdfundingProject(projectRequest);
-
-      // Project created successfully (new response structure)
-      setFlowStep('success');
-      setShowSuccess(true);
-      setIsSigningTransaction(false);
-      setIsSubmitting(false);
-    } catch (error) {
-      let errorMessage = 'Failed to create project. Please try again.';
-
-      if (error instanceof Error) {
-        errorMessage = error.message;
-      }
-
-      setSubmitErrors([errorMessage]);
-      setIsSigningTransaction(false);
-      setFlowStep('signing');
-    }
-  };
-
-  const handleSubmit = async () => {
-    setIsSubmitting(true);
-    setIsLoading(true);
-
-    try {
-      const milestoneSchema = z
-        .object({
-          id: z.string().optional(),
-          title: z.string().trim().min(1),
-          description: z.string().trim().min(1),
-          startDate: z.string().min(1),
-          endDate: z.string().min(1),
-        })
-        .superRefine((val, ctx) => {
-          const today = new Date();
-          today.setHours(0, 0, 0, 0);
-
-          const startDate = new Date(val.startDate);
-          const endDate = new Date(val.endDate);
-
-          // Check if start date is in the future (at least tomorrow)
-          if (startDate <= today) {
-            ctx.addIssue({
-              code: z.ZodIssueCode.custom,
-              path: ['startDate'],
-              message: 'Start date must be at least tomorrow',
-            });
-          }
-
-          // Check if end date is after start date
-          if (endDate <= startDate) {
-            ctx.addIssue({
-              code: z.ZodIssueCode.custom,
-              path: ['endDate'],
-              message: 'End date must be after start date',
-            });
-          }
-
-          // Check if milestone has reasonable duration (at least 1 week)
-          const durationInDays = Math.ceil(
-            (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)
-          );
-          if (durationInDays < 7) {
-            ctx.addIssue({
-              code: z.ZodIssueCode.custom,
-              path: ['endDate'],
-              message: 'Milestone duration must be at least 1 week',
-            });
-          }
-
-          // Check if milestone is not too far in the future (max 2 years)
-          const maxFutureDate = new Date();
-          maxFutureDate.setFullYear(maxFutureDate.getFullYear() + 2);
-          if (startDate > maxFutureDate) {
-            ctx.addIssue({
-              code: z.ZodIssueCode.custom,
-              path: ['startDate'],
-              message: 'Start date cannot be more than 2 years in the future',
-            });
-          }
-        });
-
-      const projectSchema = z.object({
-        basic: z.object({
-          projectName: z.string().trim().min(1),
-          logo: z.any().optional(),
-          vision: z.string().trim().min(1).max(300),
-          category: z.string().trim().min(1),
-          githubUrl: z
-            .string()
-            .trim()
-            .optional()
-            .or(z.literal(''))
-            .refine(
-              v =>
-                !v ||
-                /^https?:\/\/.+/i.test(v) ||
-                /^[\w.-]+\.[a-z]{2,}$/i.test(v),
-              {
-                message:
-                  'Please enter a valid URL (with or without https), e.g., https://github.com or github.com',
-              }
-            )
-            .optional(),
-          websiteUrl: z
-            .string()
-            .trim()
-            .optional()
-            .or(z.literal(''))
-            .refine(
-              v =>
-                !v ||
-                /^https?:\/\/.+/i.test(v) ||
-                /^[\w.-]+\.[a-z]{2,}$/i.test(v),
-              {
-                message:
-                  'Please enter a valid URL (with or without https), e.g., https://boundlessfi.xyz or boundlessfi.xyz',
-              }
-            )
-            .optional(),
-          demoVideoUrl: z
-            .string()
-            .trim()
-            .optional()
-            .or(z.literal(''))
-            .refine(
-              v =>
-                !v ||
-                /^https?:\/\/.+/i.test(v) ||
-                /^[\w.-]+\.[a-z]{2,}$/i.test(v),
-              {
-                message:
-                  'Please enter a valid URL (with or without https), e.g., https://demo.com or demo.com',
-              }
-            )
-            .optional(),
-          socialLinks: z.array(z.string()).min(1),
-        }),
-        details: z.object({
-          vision: z.string().trim().min(1),
-        }),
-        milestones: z.object({
-          fundingAmount: z
-            .string()
-            .refine(v => !isNaN(parseFloat(v)) && parseFloat(v) > 0),
-          milestones: z
-            .array(milestoneSchema)
-            .min(1)
-            .superRefine((milestones, ctx) => {
-              // Check that milestones are in chronological order
-              for (let i = 0; i < milestones.length - 1; i++) {
-                const currentEndDate = new Date(milestones[i].endDate);
-                const nextStartDate = new Date(milestones[i + 1].startDate);
-
-                // Allow some overlap (up to 1 day) but not significant overlap
-                const daysBetween = Math.ceil(
-                  (nextStartDate.getTime() - currentEndDate.getTime()) /
-                    (1000 * 60 * 60 * 24)
-                );
-
-                if (daysBetween < -1) {
-                  ctx.addIssue({
-                    code: z.ZodIssueCode.custom,
-                    path: [i + 1, 'startDate'],
-                    message: `Milestone ${i + 2} start date should be after milestone ${i + 1} end date`,
-                  });
-                }
-              }
-
-              // Check that total project timeline is reasonable (max 3 years)
-              if (milestones.length > 0) {
-                const firstStartDate = new Date(milestones[0].startDate);
-                const lastEndDate = new Date(
-                  milestones[milestones.length - 1].endDate
-                );
-                const totalDurationInDays = Math.ceil(
-                  (lastEndDate.getTime() - firstStartDate.getTime()) /
-                    (1000 * 60 * 60 * 24)
-                );
-
-                if (totalDurationInDays > 1095) {
-                  // 3 years
-                  ctx.addIssue({
-                    code: z.ZodIssueCode.custom,
-                    path: ['milestones'],
-                    message: 'Total project timeline cannot exceed 3 years',
-                  });
-                }
-              }
-            }),
-        }),
-        team: z
-          .object({
-            members: z
-              .array(
-                z.object({
-                  id: z.string(),
-                  email: z.string().email(),
-                  role: z.string().optional(),
-                })
-              )
-              .optional()
-              .default([]),
-          })
-          .optional()
-          .default({ members: [] }),
-        contact: z.object({
-          telegram: z.string().trim().min(1),
-          backupType: z.enum(['discord', 'whatsapp']),
-          backupContact: z.string().trim().min(1),
-          agreeToTerms: z.literal(true),
-          agreeToPrivacy: z.literal(true),
-        }),
-      });
-
-      // Clicking submit implies agreement to Terms and Privacy
-      const payload: ProjectFormData = {
-        ...formData,
-        contact: {
-          ...(formData.contact || {}),
-          agreeToTerms: true,
-          agreeToPrivacy: true,
-        },
-      } as ProjectFormData;
-
-      const parsed = projectSchema.safeParse(payload);
-      if (!parsed.success) {
-        setSubmitErrors(
-          parsed.error.issues.map(i => `${i.path.join('.')} - ${i.message}`)
-        );
-        setIsSubmitting(false);
-        setFlowStep('form');
-        return;
-      }
-
-      setSubmitErrors([]);
-
-      if (!walletAddress) {
-        throw new Error(
-          'Wallet not connected. Please connect your wallet first.'
-        );
-      }
-
-      // Map form data to escrow payload
-      const milestones = payload.milestones || {
-        milestones: [],
-        fundingAmount: '0',
-      };
-      const totalFunding = parseFloat(milestones.fundingAmount || '0');
-      const milestoneCount = milestones.milestones?.length || 1;
-      const amountPerMilestone = Math.floor(totalFunding / milestoneCount);
-
-      // Step 1: Initialize escrow with Trustless Work
-      const escrowPayload: InitializeMultiReleaseEscrowPayload = {
-        signer: walletAddress,
-        engagementId: `project-${Date.now()}`, // Generate unique engagement ID
-        title: payload.basic?.projectName || 'Crowdfunding Project',
-        description: payload.basic?.vision || payload.details?.vision || '',
-        platformFee: 4, // 4% platform fee
-        trustline: {
-          address: 'GBBD47IF6LWK7P7MDEVSCWR7DPUWV3NY3DTQEVFL4NAT4AQH3ZLLFLA5',
-          symbol: 'USDC',
-        },
-        roles: {
-          approver: walletAddress,
-          serviceProvider: walletAddress,
-          platformAddress: walletAddress,
-          releaseSigner: walletAddress,
-          disputeResolver: walletAddress,
-        },
-        milestones: (milestones.milestones || []).map(milestone => ({
-          description: `${milestone.title}: ${milestone.description}`,
-          amount: amountPerMilestone,
-          receiver: walletAddress, // Funds go to project creator
-        })),
-      };
-
-      setFlowStep('initializing');
-
-      // Step 2: Execute function from Trustless Work
-      const escrowResponse: EscrowRequestResponse = await deployEscrow(
-        escrowPayload,
-        'multi-release' as EscrowType
-      );
-
-      // Type guard: Check if response is successful
-      if (
-        escrowResponse.status !== ('SUCCESS' as Status) ||
-        !escrowResponse.unsignedTransaction
-      ) {
-        const errorMessage =
-          'message' in escrowResponse &&
-          typeof escrowResponse.message === 'string'
-            ? escrowResponse.message
-            : 'Failed to initialize escrow';
-        throw new Error(errorMessage);
-      }
-
-      const { unsignedTransaction } = escrowResponse;
-      setUnsignedTransaction(unsignedTransaction);
-      setFlowStep('signing');
-      setIsLoading(false);
-    } catch (error) {
-      let errorMessage = 'Error preparing project. Please try again.';
-
-      if (error instanceof Error) {
-        if (error.message.includes('Network')) {
-          errorMessage =
-            'Network error. Please check your connection and try again.';
-        } else if (error.message.includes('Validation')) {
-          errorMessage =
-            'Project validation failed. Please check your project details.';
-        } else if (error.message.includes('Unauthorized')) {
-          errorMessage =
-            'Authentication required. Please log in and try again.';
-        } else if (error.message.includes('Server')) {
-          errorMessage = 'Server error. Please try again in a few moments.';
-        } else {
-          errorMessage = error.message;
-        }
-      }
-
-      setSubmitErrors([errorMessage]);
-      setIsLoading(false);
-      setIsSubmitting(false);
-      setFlowStep('form');
-    }
-  };
-
-  const handleDataChange = useCallback(
-    <K extends keyof ProjectFormData>(step: K, data: ProjectFormData[K]) => {
-      setFormData(prev => ({
-        ...prev,
-        [step]: {
-          ...(prev[step] as Record<string, unknown>),
-          ...(data as Record<string, unknown>),
-        },
-      }));
-    },
-    []
-  );
-
-  // Lightweight enable/disable for Continue button without firing validation side-effects
-  const isStepValid = (() => {
-    if (currentStep === 2) {
-      // Details step: require non-empty vision to enable Continue
-      const v = (formData.details?.vision || '').trim();
-      return v.length > 0;
-    }
-    if (currentStep === 5) {
-      // Contact step: enable when core fields are filled
-      // Terms/Privacy will be enforced on submit via schema
-      const contact = formData.contact || {};
-      return !!(
-        contact.telegram?.trim() &&
-        contact.backupType &&
-        contact.backupContact?.trim()
-      );
-    }
-    // For other steps, allow Continue (validation will run on click)
-    return true;
-  })();
-
-  const handleReset = () => {
-    // Reset form and close modal
-    setFormData({
-      basic: {},
-      details: {},
-      milestones: {},
-      team: {},
-      contact: {},
-    });
-    setCurrentStep(1);
-    setShowSuccess(false);
-    setIsLoading(false);
-    setUnsignedTransaction(null);
-    setIsSigningTransaction(false);
-    setSubmitErrors([]);
-    setFlowStep('form');
-    setOpen(false);
-  };
-
-  // Function to populate test data for easy testing
-  const handleTestData = () => {
-    const testData: ProjectFormData = {
-      basic: {
-        projectName: 'Nebula Finance',
-        logo: 'https://res.cloudinary.com/danuy5rqb/image/upload/v1759431246/boundless/projects/logos/jfc5v0l6xec0bdhmliet.png',
-        logoUrl:
-          'https://res.cloudinary.com/danuy5rqb/image/upload/v1759431246/boundless/projects/logos/jfc5v0l6xec0bdhmliet.png',
-        vision:
-          'Nebula Finance is redefining decentralized finance with real-time, cross-chain yield aggregation and AI-driven investment strategies for both retail and institutional users.',
-        category: 'DeFi & Finance',
-        githubUrl: 'https://github.com/nebula-finance/nebula-protocol',
-        websiteUrl: 'https://nebula.finance',
-        demoVideoUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
-        socialLinks: [
-          'https://twitter.com/nebula_defi',
-          'https://discord.gg/nebula-finance',
-          'https://t.me/nebula_defi',
-          'https://linkedin.com/company/nebula-finance',
-        ],
-      },
-      details: {
-        vision: `# Nebula Finance Vision
-  
-  ## Overview
-  Nebula Finance is a next-generation DeFi protocol that enables users to earn optimized yields across multiple blockchains without needing to actively manage assets.
-  
-  ## Core Features
-  - **AI Yield Optimization**: Machine-learning models analyze yield opportunities in real-time to rebalance portfolios.
-  - **Cross-Chain Aggregation**: Unified interface and smart routing across Ethereum, Arbitrum, Optimism, and BNB Chain.
-  - **Decentralized Governance**: Token holders influence strategy, emissions, and protocol upgrades.
-  - **Institutional Features**: Compliance-ready APIs, whitelisting options, and secure custody integrations.
-  
-  ## Technology Stack
-  - Smart Contracts: Solidity + Vyper
-  - Frontend: React + TypeScript + Wagmi
-  - Backend: Node.js, PostgreSQL
-  - Data Indexing: The Graph
-  - Storage: IPFS & Arweave
-  
-  ## Roadmap
-  - **Q1 2026**: Smart contract audit and testnet launch
-  - **Q2 2026**: Mainnet launch with ETH, ARB, and OP integrations
-  - **Q3 2026**: Cross-chain dashboard and partner integrations
-  - **Q4 2026**: Governance activation and community treasury`,
-      },
-      milestones: {
-        fundingAmount: '250000', // More realistic for a serious DeFi project
-        milestones: [
-          {
-            id: 'milestone-1',
-            title: 'Protocol Architecture & Smart Contracts',
-            description:
-              'Design core protocol architecture and write smart contracts for vaults, rebalancing, and governance. Engage auditors from Certik or OpenZeppelin.',
-            startDate: '2026-01-10',
-            endDate: '2026-03-30',
-          },
-          {
-            id: 'milestone-2',
-            title: 'UI/UX Development',
-            description:
-              'Design and develop the frontend interface with wallet integrations (MetaMask, WalletConnect) and support for multi-chain data display.',
-            startDate: '2026-04-01',
-            endDate: '2026-05-31',
-          },
-          {
-            id: 'milestone-3',
-            title: 'Security Audits & Launch',
-            description:
-              'Conduct security audits, final integration tests, and launch the protocol on Ethereum and Arbitrum. Begin initial liquidity mining campaign.',
-            startDate: '2026-06-01',
-            endDate: '2026-07-31',
-          },
-        ],
-      },
-      team: {
-        members: [
-          {
-            id: 'member-1',
-            email: 'alice@nebula.finance',
-          },
-          {
-            id: 'member-2',
-            email: 'michael@nebula.finance',
-          },
-          {
-            id: 'member-3',
-            email: 'linda@nebula.finance',
-          },
-        ],
-      },
-      contact: {
-        telegram: 'nebula_support',
-        backupType: 'discord',
-        backupContact: 'nebula_admin#0420',
-        agreeToTerms: true,
-        agreeToPrivacy: true,
-      },
-    };
-
-    setFormData(testData);
-  };
-
-  const renderStepContent = () => {
-    // Handle the flow states
-    if (flowStep === 'initializing' || (isLoading && flowStep !== 'signing')) {
-      return <LoadingScreen />;
-    }
-    if (flowStep === 'success' || showSuccess) {
-      return <SuccessScreen onContinue={handleReset} />;
-    }
-    // Show loading screen during signing and confirming states
-    if (
-      flowStep === 'signing' ||
-      flowStep === 'confirming' ||
-      isSigningTransaction
-    ) {
-      return (
-        <TransactionSigningScreen
-          onSign={handleSignTransaction}
-          isSigning={true}
-          flowStep={
-            flowStep === 'signing' || flowStep === 'confirming'
-              ? flowStep
-              : 'confirming'
-          }
-          onRetry={handleRetry}
-          hasError={submitErrors.length > 0}
-          errorMessage={submitErrors[0]}
-        />
-      );
-    }
-
-    switch (currentStep) {
-      case 1:
-        return (
-          <Basic
-            ref={stepRefs.basic}
-            onDataChange={data => handleDataChange('basic', data)}
-            initialData={formData.basic}
-          />
-        );
-      case 2:
-        return (
-          <Details
-            ref={stepRefs.details}
-            onDataChange={data => handleDataChange('details', data)}
-            initialData={formData.details}
-          />
-        );
-      case 3:
-        return (
-          <Milestones
-            ref={stepRefs.milestones}
-            onDataChange={data => handleDataChange('milestones', data)}
-            initialData={formData.milestones}
-          />
-        );
-      case 4:
-        return (
-          <Team
-            ref={stepRefs.team}
-            onDataChange={data => handleDataChange('team', data)}
-            initialData={formData.team}
-          />
-        );
-      case 5:
-        return (
-          <Contact
-            ref={stepRefs.contact}
-            onDataChange={data => handleDataChange('contact', data)}
-            initialData={formData.contact}
-          />
-        );
-      default:
-        return (
-          <Basic
-            ref={stepRefs.basic}
-            onDataChange={data => handleDataChange('basic', data)}
-            initialData={formData.basic}
-          />
-        );
-    }
-  };
-
-  return (
-    <BoundlessSheet
-      contentClassName='h-[90vh] overflow-y-auto !overflow-x-hidden'
-      open={open}
-      setOpen={setOpen}
-    >
-      {flowStep === 'form' && (
-        <Header
-          currentStep={currentStep}
-          onBack={handleBack}
-          onTestData={handleTestData}
-        />
-      )}
-      <div
-        ref={contentRef}
-        className={cn(
-          'min-h-[calc(55vh)] px-4 transition-opacity duration-100 md:px-[50px] lg:px-[75px] xl:px-[150px]'
-          // flowStep === 'confirming' ||
-          //   isSigningTransaction ||
-          //   (flowStep === 'signing' &&
-          //     unsignedTransaction &&
-          //     !isSigningTransaction),
-          // 'flex h-full items-center justify-center'
-        )}
-      >
-        {flowStep !== 'form' ? (
-          <div className='flex h-full items-center justify-center'>
-            {renderStepContent()}
-          </div>
-        ) : (
-          <>
-            {submitErrors.length > 0 && (
-              <div className='mb-4 rounded-md border border-red-500/40 bg-red-500/10 p-4 text-red-200'>
-                <p className='mb-2 font-medium text-red-300'>
-                  Please fix the following errors before submitting:
-                </p>
-                <ul className='list-disc space-y-1 pl-5'>
-                  {submitErrors.map((e, idx) => (
-                    <li key={idx} className='text-sm'>
-                      {e}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            )}
-            <div key={currentStep}>{renderStepContent()}</div>
-          </>
-        )}
-      </div>
-      {flowStep === 'form' && (
-        <Footer
-          currentStep={currentStep}
-          onContinue={handleContinue}
-          isStepValid={isStepValid}
-          isSubmitting={isSubmitting}
-        />
-      )}
-    </BoundlessSheet>
-  );
-};
-
-export default CreateProjectModal;
diff --git a/components/landing-page/project/ProjectCard.tsx b/components/landing-page/project/ProjectCard.tsx
deleted file mode 100644
index 6d6d7714d..000000000
--- a/components/landing-page/project/ProjectCard.tsx
+++ /dev/null
@@ -1,281 +0,0 @@
-'use client';
-import { Progress } from '@/components/ui/progress';
-import { formatNumber } from '@/lib/utils';
-import { useRouter } from 'nextjs-toploader/app';
-import type { Crowdfunding } from '@/types/project';
-
-type ProjectCardProps = {
-  newTab?: boolean;
-  isFullWidth?: boolean;
-  project?: Crowdfunding;
-  // Legacy props for backward compatibility
-  projectId?: string;
-  creatorName?: string;
-  creatorLogo?: string;
-  projectImage?: string;
-  projectTitle?: string;
-  projectDescription?: string;
-  status?: 'Validation' | 'Funding' | 'Funded' | 'Completed';
-  deadlineInDays?: number;
-  votes?: {
-    current: number;
-    goal: number;
-  };
-  funding?: {
-    current: number;
-    goal: number;
-    currency: string;
-  };
-  milestones?: {
-    current: number;
-    goal: number;
-  };
-};
-function ProjectCard({
-  project,
-  newTab = false,
-  isFullWidth = false,
-  projectId,
-  creatorName,
-  creatorLogo,
-  projectImage,
-  projectTitle,
-  projectDescription,
-  status: legacyStatus,
-  deadlineInDays: legacyDeadline,
-  votes,
-  funding,
-  milestones,
-}: ProjectCardProps) {
-  const router = useRouter();
-
-  const isNewFormat =
-    !!project && typeof project === 'object' && 'fundingGoal' in project;
-  const currentProjectId =
-    (isNewFormat && project ? project.id : projectId) || '';
-  const currentCreatorName =
-    (isNewFormat && project ? project.project.creator.name : creatorName) ||
-    'Unknown Creator';
-  const currentCreatorLogo =
-    (isNewFormat && project ? project.project.creator.image : creatorLogo) ||
-    '/user.png';
-  const currentProjectImage =
-    (isNewFormat && project ? project.project.logo : projectImage) ||
-    '/landing/explore/project-placeholder-1.png';
-  const currentProjectTitle =
-    (isNewFormat && project ? project.project.title : projectTitle) || '';
-  const currentProjectDescription =
-    (isNewFormat && project
-      ? project.project.description || project.project.vision
-      : projectDescription) || '';
-
-  const getProjectStatus = () => {
-    if (!isNewFormat || !project) return legacyStatus || 'Funding';
-
-    const status = project.project.status;
-    if (status === 'IDEA') return 'Validation';
-    if (status === 'ACTIVE') return 'Funding';
-    if (status === 'COMPLETED') return 'Completed';
-    return 'Funding'; // default
-  };
-
-  const getDeadlineInDays = () => {
-    if (!isNewFormat || !project) return legacyDeadline || 0;
-
-    try {
-      const now = new Date();
-      const end = new Date(project.fundingEndDate);
-      return Math.max(
-        0,
-        Math.ceil((end.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
-      );
-    } catch {
-      return 0;
-    }
-  };
-
-  const status = getProjectStatus();
-  const deadlineInDays = getDeadlineInDays();
-
-  const handleClick = () => {
-    router.push(`/projects/${currentProjectId}`);
-  };
-
-  const getStatusStyles = () => {
-    switch (status) {
-      case 'Funding':
-        return 'bg-blue-ish border-blue-ish-darker text-blue-ish-darker';
-      case 'Funded':
-        return 'bg-transparent border-primary text-primary';
-      case 'Completed':
-        return 'bg-success-green border-success-green-darker text-success-green-darker';
-      case 'Validation':
-        return 'bg-warning-orange border-warning-orange-darker text-warning-orange-darker';
-      default:
-        return '';
-    }
-  };
-
-  const getDeadlineInfo = () => {
-    if (status === 'Completed' && isNewFormat && project) {
-      // Check if any milestones are rejected
-      const rejectedMilestones = project.milestones.filter(
-        m => m.status === 'rejected'
-      );
-      if (rejectedMilestones.length > 0) {
-        return {
-          text: `${rejectedMilestones.length} Milestone${rejectedMilestones.length > 1 ? 's' : ''} Rejected`,
-          className: 'text-red-500',
-        };
-      }
-    }
-
-    if (deadlineInDays <= 3) {
-      return {
-        text: `${deadlineInDays} days to deadline`,
-        className: 'text-error-status',
-      };
-    }
-
-    if (deadlineInDays <= 15) {
-      return {
-        text: `${deadlineInDays} days to deadline`,
-        className: 'text-warning-orange-darker',
-      };
-    }
-
-    return {
-      text: `${deadlineInDays} days to deadline`,
-      className: 'text-success-green-darker',
-    };
-  };
-
-  const deadlineInfo = getDeadlineInfo();
-
-  return (
-    <div
-      onClick={!newTab ? handleClick : () => {}}
-      className={`font-inter hover:border-primary/45 flex w-full ${isFullWidth ? 'max-w-full' : 'max-w-[397px]'} cursor-pointer flex-col gap-4 rounded-[8px] border border-gray-900 bg-[#030303] p-4 transition-all duration-300 sm:p-5`}
-    >
-      <div className='flex items-center justify-between'>
-        <div className='flex items-center gap-2'>
-          <div
-            style={{ backgroundImage: `url(${currentCreatorLogo})` }}
-            className='size-6 rounded-full bg-white bg-cover bg-center'
-          ></div>
-          <h4 className='text-sm font-normal text-gray-500'>
-            {currentCreatorName}
-          </h4>
-        </div>
-        <div className='flex items-center gap-3'>
-          <div className='bg-office-brown border-office-brown-darker text-office-brown-darker flex w-[63px] items-center justify-center rounded-[4px] border px-1 py-0.5 text-xs font-semibold'>
-            Category
-          </div>
-          <div
-            className={`rounded-[4px] px-1 py-0.5 ${getStatusStyles()} flex items-center justify-center border text-xs font-semibold`}
-          >
-            {status}
-          </div>
-        </div>
-      </div>
-      <div className='flex items-start gap-3 sm:gap-5'>
-        <div
-          style={{ backgroundImage: `url(${currentProjectImage})` }}
-          className='h-[70px] w-[60px] flex-shrink-0 rounded-[8px] bg-white bg-cover bg-center sm:h-[90px] sm:w-[79.41px]'
-        ></div>
-        <div className='flex min-w-0 flex-1 flex-col gap-2'>
-          <h2 className='line-clamp-2 text-left text-sm font-semibold text-white sm:text-base'>
-            {currentProjectTitle}
-          </h2>
-          <div className='group relative'>
-            <p className='line-clamp-3 cursor-pointer text-left text-xs font-normal text-white sm:text-sm'>
-              {currentProjectDescription}
-            </p>
-          </div>
-        </div>
-      </div>
-      <div className='flex flex-col gap-2'>
-        <div className='flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
-          <div className='flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-2'>
-            {status === 'Validation' && (
-              <h3 className='text-xs font-medium text-[#f5f5f5] sm:text-sm'>
-                {formatNumber(
-                  isNewFormat ? project.project.votes || 0 : votes?.current || 0
-                )}
-                /{formatNumber(isNewFormat ? 100 : votes?.goal || 100)}{' '}
-                <span className='text-gray-500'>Votes</span>
-              </h3>
-            )}
-            {status === 'Funding' && (
-              <h3 className='text-xs font-medium text-[#f5f5f5] sm:text-sm'>
-                {formatNumber(
-                  isNewFormat ? project.fundingRaised : funding?.current || 0
-                )}
-                /
-                {formatNumber(
-                  isNewFormat ? project.fundingGoal : funding?.goal || 0
-                )}{' '}
-                <span className='text-gray-500'>
-                  {isNewFormat
-                    ? project.fundingCurrency
-                    : funding?.currency || 'USD'}{' '}
-                  raised
-                </span>
-              </h3>
-            )}
-            {(status === 'Funded' || status === 'Completed') && (
-              <h3 className='text-xs font-medium text-[#f5f5f5] sm:text-sm'>
-                {isNewFormat
-                  ? project.milestones.filter(m => m.status === 'completed')
-                      .length
-                  : milestones?.current || 0}
-                /
-                {isNewFormat
-                  ? project.milestones.length
-                  : milestones?.goal || 0}{' '}
-                <span className='text-gray-500'>Milestones Submitted</span>
-              </h3>
-            )}
-          </div>
-
-          <h3
-            className={`text-xs font-medium sm:text-sm ${deadlineInfo.className}`}
-          >
-            {deadlineInfo.text}
-          </h3>
-        </div>
-        <div className='w-full'>
-          <Progress
-            value={
-              status === 'Validation'
-                ? ((isNewFormat && project
-                    ? project.project.votes || 0
-                    : votes?.current || 0) /
-                    (isNewFormat ? 100 : votes?.goal || 100)) *
-                  100
-                : status === 'Funding'
-                  ? ((isNewFormat && project
-                      ? project.fundingRaised
-                      : funding?.current || 0) /
-                      (isNewFormat && project
-                        ? project.fundingGoal
-                        : funding?.goal || 1)) *
-                    100
-                  : ((isNewFormat && project
-                      ? project.milestones.filter(m => m.status === 'completed')
-                          .length
-                      : milestones?.current || 0) /
-                      (isNewFormat && project
-                        ? project.milestones.length
-                        : milestones?.goal || 1)) *
-                    100
-            }
-            className='h-2 w-full rounded-full'
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default ProjectCard;
diff --git a/components/me-dashboard.tsx b/components/me-dashboard.tsx
new file mode 100644
index 000000000..feaedf91e
--- /dev/null
+++ b/components/me-dashboard.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import { GetMeResponse } from '@/lib/api/types';
+import { SectionCards } from '@/components/section-cards';
+import { ChartAreaInteractive } from '@/components/chart-area-interactive';
+import { RecentProjects } from '@/components/recent-projects';
+import { useAuthStatus } from '@/hooks/use-auth';
+
+export function MeDashboard() {
+  const { user, isLoading } = useAuthStatus();
+  // user.profile is typed as any in use-auth, so we cast it here for safety
+  // or checks if it matches GetMeResponse.
+  // Since useAuthStatus fetches getMe(), we assume it is the correct shape.
+  const meData = user?.profile as GetMeResponse | undefined;
+
+  if (isLoading) {
+    return <div className='p-8 text-center'>Loading...</div>;
+  }
+
+  if (!meData) {
+    // If we have a user but no profile yet (shouldn't happen if isLoading is accurate, but possible)
+    // we might want to return loading or failure.
+    // Given useAuthStatus implementation, isLoading covers profile fetching.
+    return <div className='p-8 text-center'>Failed to load data</div>;
+  }
+
+  const chartData =
+    meData.chart?.map(item => ({
+      date: item.date,
+      projects: item.count,
+    })) || [];
+
+  return (
+    <div className='@container/main flex flex-1 flex-col gap-2'>
+      <div className='flex flex-col gap-4 py-4 md:gap-6 md:py-6'>
+        <SectionCards stats={meData.stats} />
+        <div className='px-4 lg:px-6'>
+          {' '}
+          <RecentProjects projects={meData.user?.projects || []} />
+        </div>
+        <div className='px-4 lg:px-6'>
+          {' '}
+          <ChartAreaInteractive
+            chartData={chartData}
+            title='Activity Overview'
+            description='Your activity over time'
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/modals/fund-project/Confirm.tsx b/components/modals/fund-project/Confirm.tsx
index 2153dd993..fe74fcb56 100644
--- a/components/modals/fund-project/Confirm.tsx
+++ b/components/modals/fund-project/Confirm.tsx
@@ -155,7 +155,7 @@ const Confirm = forwardRef<ConfirmHandle, ConfirmProps>(
             showConnector={true}
             variant='default'
             className='w-full'
-            projectId='bitmed-health-protocol'
+            projectSlug='bitmed-health-protocol'
           />
         </div>
 
diff --git a/components/modals/fund-project/index.tsx b/components/modals/fund-project/index.tsx
index cf13a9ef9..e74f2b7b9 100644
--- a/components/modals/fund-project/index.tsx
+++ b/components/modals/fund-project/index.tsx
@@ -8,7 +8,7 @@ import Amount, { AmountFormData, AmountHandle } from './Amount';
 import Confirm, { ConfirmHandle, ConfirmFormData } from './Confirm';
 import Success from '../Success';
 import Loading from '../Loading';
-import { fundCrowdfundingProject } from '@/lib/api/project';
+import { fundCrowdfundingProject } from '@/features/projects/api';
 import { useWalletContext } from '@/components/providers/wallet-provider';
 import { useWalletProtection } from '@/hooks/use-wallet-protection';
 import { signTransaction } from '@/lib/config/wallet-kit';
diff --git a/components/nav-documents.tsx b/components/nav-documents.tsx
new file mode 100644
index 000000000..276cea390
--- /dev/null
+++ b/components/nav-documents.tsx
@@ -0,0 +1,92 @@
+'use client';
+
+import {
+  IconDots,
+  IconFolder,
+  IconShare3,
+  IconTrash,
+  type Icon,
+} from '@tabler/icons-react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/components/ui/sidebar';
+
+export function NavDocuments({
+  items,
+}: {
+  items: {
+    name: string;
+    url: string;
+    icon: Icon;
+  }[];
+}) {
+  const { isMobile } = useSidebar();
+
+  return (
+    <SidebarGroup className='group-data-[collapsible=icon]:hidden'>
+      <SidebarGroupLabel>Documents</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map(item => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction
+                  showOnHover
+                  className='data-[state=open]:bg-accent rounded-sm'
+                >
+                  <IconDots />
+                  <span className='sr-only'>More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className='w-24 rounded-lg'
+                side={isMobile ? 'bottom' : 'right'}
+                align={isMobile ? 'end' : 'start'}
+              >
+                <DropdownMenuItem>
+                  <IconFolder />
+                  <span>Open</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <IconShare3 />
+                  <span>Share</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem variant='destructive'>
+                  <IconTrash />
+                  <span>Delete</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className='text-sidebar-foreground/70'>
+            <IconDots className='text-sidebar-foreground/70' />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+}
diff --git a/components/nav-main.tsx b/components/nav-main.tsx
new file mode 100644
index 000000000..0bec9fcb8
--- /dev/null
+++ b/components/nav-main.tsx
@@ -0,0 +1,85 @@
+'use client';
+
+import { type Icon } from '@tabler/icons-react';
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/components/ui/sidebar';
+import Link from 'next/link';
+import { Badge } from './ui/badge';
+import { usePathname } from 'next/navigation';
+import { cn } from '@/lib/utils';
+
+export function NavMain({
+  items,
+  label,
+}: {
+  items: {
+    title: string;
+    url: string;
+    icon?: Icon;
+    badge?: string;
+    badgeVariant?: 'default' | 'destructive' | 'outline';
+  }[];
+  label?: string;
+}) {
+  const pathname = usePathname();
+
+  return (
+    <SidebarGroup>
+      {label && (
+        <SidebarGroupLabel className='text-sidebar-foreground/70 px-2 text-xs font-semibold tracking-wider uppercase'>
+          {label}
+        </SidebarGroupLabel>
+      )}
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map(item => {
+            const isActive =
+              pathname === item.url || pathname?.startsWith(`${item.url}/`);
+
+            return (
+              <SidebarMenuItem key={item.title}>
+                <SidebarMenuButton
+                  asChild
+                  tooltip={item.title}
+                  isActive={isActive}
+                  className={cn(
+                    'group transition-all duration-200',
+                    isActive &&
+                      'bg-sidebar-accent text-sidebar-accent-foreground font-medium shadow-sm'
+                  )}
+                >
+                  <Link href={item.url} className='flex items-center gap-3'>
+                    {item.icon && (
+                      <item.icon
+                        className={cn(
+                          'transition-transform duration-200',
+                          isActive && 'scale-110'
+                        )}
+                      />
+                    )}
+                    <span className='flex-1'>{item.title}</span>
+                    {item.badge && (
+                      <Badge
+                        variant={item.badgeVariant || 'default'}
+                        className='ml-auto h-5 min-w-5 rounded-full px-1.5 text-xs'
+                      >
+                        {item.badge}
+                      </Badge>
+                    )}
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            );
+          })}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  );
+}
diff --git a/components/nav-secondary.tsx b/components/nav-secondary.tsx
new file mode 100644
index 000000000..319a08b79
--- /dev/null
+++ b/components/nav-secondary.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import * as React from 'react';
+import { type Icon } from '@tabler/icons-react';
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/components/ui/sidebar';
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string;
+    url: string;
+    icon: Icon;
+  }[];
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map(item => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild>
+                <a href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  );
+}
diff --git a/components/nav-user.tsx b/components/nav-user.tsx
new file mode 100644
index 000000000..9abede733
--- /dev/null
+++ b/components/nav-user.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import {
+  IconBell,
+  IconCreditCard,
+  IconDotsVertical,
+  IconLogout,
+  IconUserCircle,
+} from '@tabler/icons-react';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/components/ui/sidebar';
+import { Badge } from './ui/badge';
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string;
+    email: string;
+    image: string;
+  };
+}) {
+  const { isMobile } = useSidebar();
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size='lg'
+              className='data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground hover:bg-sidebar-accent/50 transition-colors'
+            >
+              <Avatar className='border-sidebar-border h-9 w-9 rounded-lg border-2'>
+                <AvatarImage src={user.image} alt={user.name} />
+                <AvatarFallback className='from-primary/20 to-primary/10 text-primary rounded-lg bg-gradient-to-br font-semibold'>
+                  {user.name
+                    .split(' ')
+                    .map(n => n[0])
+                    .join('')}
+                </AvatarFallback>
+              </Avatar>
+              <div className='grid flex-1 text-left leading-tight'>
+                <span className='truncate text-sm font-semibold'>
+                  {user.name}
+                </span>
+                <span className='text-muted-foreground truncate text-xs'>
+                  {user.email}
+                </span>
+              </div>
+              <IconDotsVertical className='ml-auto size-4 opacity-50' />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className='w-56 rounded-lg'
+            side={isMobile ? 'bottom' : 'right'}
+            align='end'
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className='p-0 font-normal'>
+              <div className='flex items-center gap-3 px-2 py-2 text-left'>
+                <Avatar className='border-border h-10 w-10 rounded-lg border-2'>
+                  <AvatarImage src={user.image} alt={user.name} />
+                  <AvatarFallback className='from-primary/20 to-primary/10 text-primary rounded-lg bg-gradient-to-br font-semibold'>
+                    {user.name
+                      .split(' ')
+                      .map(n => n[0])
+                      .join('')}
+                  </AvatarFallback>
+                </Avatar>
+                <div className='grid flex-1 text-left leading-tight'>
+                  <span className='truncate text-sm font-semibold'>
+                    {user.name}
+                  </span>
+                  <span className='text-muted-foreground truncate text-xs'>
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem className='cursor-pointer gap-2'>
+                <IconUserCircle className='h-4 w-4' />
+                <span>Account Settings</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem className='cursor-pointer gap-2'>
+                <IconCreditCard className='h-4 w-4' />
+                <span>Billing</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem className='cursor-pointer gap-2'>
+                <IconBell className='h-4 w-4' />
+                <span>Notifications</span>
+                <Badge className='ml-auto h-5 min-w-5 rounded-full'>3</Badge>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className='text-destructive focus:text-destructive cursor-pointer gap-2'>
+              <IconLogout className='h-4 w-4' />
+              <span>Log out</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}
diff --git a/components/notifications/NotificationBell.tsx b/components/notifications/NotificationBell.tsx
index f773efa33..471d9bb2a 100644
--- a/components/notifications/NotificationBell.tsx
+++ b/components/notifications/NotificationBell.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+import { useState } from 'react';
 import { Bell } from 'lucide-react';
 import {
   DropdownMenu,
@@ -9,7 +9,6 @@ import {
 import { NotificationDropdown } from './NotificationDropdown';
 import { useNotifications } from '@/hooks/useNotifications';
 import { authClient } from '@/lib/auth-client';
-import { Notification } from '@/types/notifications';
 import { cn } from '@/lib/utils';
 
 interface NotificationBellProps {
@@ -25,36 +24,12 @@ export const NotificationBell = ({ className }: NotificationBellProps) => {
   const userId = session?.user?.id;
 
   // Use WebSocket-based notifications hook (only connect if userId is available)
-  const {
-    notifications: wsNotifications,
-    unreadCount,
-    isConnected,
-    markAllAsRead: wsMarkAllAsRead,
-  } = useNotifications(userId || undefined);
-
-  // Map WebSocket notifications to match NotificationDropdown expected structure
-  const notifications = useMemo<Notification[]>(() => {
-    return wsNotifications.map(wsNotif => ({
-      _id: wsNotif.id,
-      userId: {
-        type: 'string',
-      },
-      type: wsNotif.type as any, // Map to NotificationType enum
-      title: wsNotif.title,
-      message: wsNotif.message,
-      data: (wsNotif.data || {}) as Notification['data'],
-      read: false, // WebSocket notifications are typically unread when received
-      readAt: null,
-      emailSent: false,
-      emailSentAt: null,
-      createdAt: wsNotif.timestamp || new Date().toISOString(),
-    }));
-  }, [wsNotifications]);
-  console.log('Notifications:', notifications);
+  const { notifications, unreadCount, isConnected, loading, markAllAsRead } =
+    useNotifications(userId || undefined);
 
   // Wrapper for markAllAsRead that uses WebSocket
   const handleMarkAllAsRead = async () => {
-    wsMarkAllAsRead();
+    markAllAsRead();
   };
 
   const handleNotificationClick = () => {
@@ -90,7 +65,7 @@ export const NotificationBell = ({ className }: NotificationBellProps) => {
       <NotificationDropdown
         notifications={notifications}
         unreadCount={unreadCount}
-        loading={false}
+        loading={loading}
         onNotificationClick={handleNotificationClick}
         onMarkAllAsRead={handleMarkAllAsRead}
         onClose={() => setIsOpen(false)}
diff --git a/components/notifications/NotificationDropdown.tsx b/components/notifications/NotificationDropdown.tsx
index ffcc5d135..120323736 100644
--- a/components/notifications/NotificationDropdown.tsx
+++ b/components/notifications/NotificationDropdown.tsx
@@ -85,7 +85,7 @@ export const NotificationDropdown = ({
     // Auto-mark as read on click
     if (!notification.read) {
       try {
-        await markAsRead({ ids: [notification._id] });
+        await markAsRead({ ids: [notification.id] });
       } catch {
         // Silently handle error - user feedback already provided
       }
@@ -187,7 +187,7 @@ export const NotificationDropdown = ({
                     <div className='space-y-1'>
                       {groupNotifications.map(notification => (
                         <NotificationItem
-                          key={notification._id}
+                          key={notification.id}
                           notification={notification}
                           onMarkAsRead={() =>
                             handleNotificationClick(notification)
diff --git a/components/notifications/NotificationItem.tsx b/components/notifications/NotificationItem.tsx
index 664ab26a1..3fc8b5496 100644
--- a/components/notifications/NotificationItem.tsx
+++ b/components/notifications/NotificationItem.tsx
@@ -70,54 +70,63 @@ export const NotificationItem = ({
   const content = (
     <div
       className={cn(
-        'flex items-start gap-3 rounded-lg border p-2 transition-all',
+        'group relative flex items-start gap-4 rounded-xl border p-3 transition-all duration-200',
         !notification.read
-          ? 'border-primary/30 bg-primary/5 hover:bg-primary/10'
-          : 'border-zinc-800/50 bg-zinc-900/30 hover:bg-zinc-900/50',
+          ? 'border-primary/20 bg-primary/5 hover:bg-primary/10'
+          : 'border-white/5 bg-zinc-900/40 hover:border-zinc-800 hover:bg-zinc-900/80',
         className
       )}
     >
-      <div className='bg-primary/10 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg'>
-        <Icon className='text-primary h-5 w-5' />
+      <div
+        className={cn(
+          'flex h-10 w-10 shrink-0 items-center justify-center rounded-full border transition-colors',
+          !notification.read
+            ? 'border-primary/20 bg-primary/10 text-primary'
+            : 'border-white/5 bg-zinc-900 text-zinc-400 group-hover:text-zinc-300'
+        )}
+      >
+        <Icon className='h-5 w-5' />
       </div>
 
-      <div className='min-w-0 flex-1'>
+      <div className='min-w-0 flex-1 space-y-1'>
         <div className='flex items-start justify-between gap-2'>
-          <div className='min-w-0 flex-1'>
-            <div className='flex items-center gap-2'>
-              <h4
-                className={cn(
-                  'font-semibold',
-                  !notification.read ? 'text-white' : 'text-zinc-300'
-                )}
-              >
-                {notification.title}
-              </h4>
-              {!notification.read && showUnreadIndicator && (
-                <span className='bg-primary h-2 w-2 shrink-0 rounded-full' />
-              )}
-            </div>
-            <p
-              className={cn(
-                'mt-1 line-clamp-2 text-sm',
-                !notification.read ? 'text-zinc-300' : 'text-zinc-500'
-              )}
-            >
-              {notification.message}
-            </p>
-            {notification.data.amount && (
-              <p className='mt-2 text-sm font-medium text-green-400'>
-                Amount: ${notification.data.amount.toLocaleString()}
-              </p>
+          <h4
+            className={cn(
+              'text-sm leading-snug font-medium',
+              !notification.read
+                ? 'text-zinc-100'
+                : 'text-zinc-400 group-hover:text-zinc-300'
             )}
-            <p className='mt-2 text-xs text-zinc-500'>
-              {formatDistanceToNow(new Date(notification.createdAt), {
-                addSuffix: true,
-              })}
-            </p>
-          </div>
+          >
+            {notification.title}
+          </h4>
+          <span className='text-[10px] whitespace-nowrap text-zinc-500'>
+            {formatDistanceToNow(new Date(notification.createdAt), {
+              addSuffix: true,
+            })}
+          </span>
         </div>
+
+        <p
+          className={cn(
+            'line-clamp-2 text-xs leading-relaxed',
+            !notification.read ? 'text-zinc-300' : 'text-zinc-500'
+          )}
+        >
+          {notification.message}
+        </p>
+
+        {notification.data.amount && (
+          <div className='mt-1.5 inline-flex items-center gap-1.5 rounded-full border border-emerald-500/20 bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-400'>
+            <span>$</span>
+            <span>{notification.data.amount.toLocaleString()}</span>
+          </div>
+        )}
       </div>
+
+      {!notification.read && showUnreadIndicator && (
+        <div className='bg-primary absolute top-11 right-2 h-1.5 w-1.5 rounded-full shadow-[0_0_8px_rgba(var(--primary),0.5)]' />
+      )}
     </div>
   );
 
diff --git a/components/notifications/NotificationList.tsx b/components/notifications/NotificationList.tsx
index 2cc3881dc..fbad14be9 100644
--- a/components/notifications/NotificationList.tsx
+++ b/components/notifications/NotificationList.tsx
@@ -81,11 +81,11 @@ export const NotificationList = ({
           <div className='space-y-2'>
             {dateNotifications.map(notification => (
               <NotificationItem
-                key={notification._id}
+                key={notification.id}
                 notification={notification}
                 onMarkAsRead={() => {
                   if (onMarkAsRead) {
-                    onMarkAsRead(notification._id);
+                    onMarkAsRead(notification.id);
                   }
                   if (onNotificationClick) {
                     onNotificationClick(notification);
diff --git a/components/profile/ActivityFeed.tsx b/components/profile/ActivityFeed.tsx
index 9dad39bc4..e0f7ba64a 100644
--- a/components/profile/ActivityFeed.tsx
+++ b/components/profile/ActivityFeed.tsx
@@ -4,12 +4,13 @@
 import { useState, useMemo, useEffect } from 'react';
 import { ChevronDown, Activity as ActivityIcon } from 'lucide-react';
 import Image from 'next/image';
-import { Activity, User } from '@/types/user';
+import { Activity } from '@/types/user';
+import { GetMeResponse } from '@/lib/api/types';
 import { getActivityDescription } from '@/lib/activities-description';
 
 interface ActivityFeedProps {
   filter: string;
-  user: User;
+  user: GetMeResponse;
 }
 
 export default function ActivityFeed({ filter, user }: ActivityFeedProps) {
@@ -21,8 +22,8 @@ export default function ActivityFeed({ filter, user }: ActivityFeedProps) {
   }, [filter]);
 
   const activities = useMemo(
-    () => (user.activities || []) as Activity[],
-    [user.activities]
+    () => (user.user.activities || []) as Activity[],
+    [user.user.activities]
   );
 
   const filteredActivities = useMemo(() => {
diff --git a/components/profile/ActivityTab.tsx b/components/profile/ActivityTab.tsx
index a19d3b89f..8dcb28b06 100644
--- a/components/profile/ActivityTab.tsx
+++ b/components/profile/ActivityTab.tsx
@@ -9,7 +9,7 @@ import {
 } from '@/components/ui/chart';
 import { Line, LineChart, XAxis } from 'recharts';
 import { TrendingUp, Award, Zap, DollarSign } from 'lucide-react';
-import { PublicUserProfile } from '@/types/project';
+import { PublicUserProfile } from '@/features/projects/types';
 
 interface ActivityTabProps {
   user: PublicUserProfile;
diff --git a/components/profile/FollowersModal.tsx b/components/profile/FollowersModal.tsx
index 343058714..f681e5c11 100644
--- a/components/profile/FollowersModal.tsx
+++ b/components/profile/FollowersModal.tsx
@@ -5,7 +5,7 @@ import { TeamMember } from '@/components/ui/TeamList';
 import { ModalTabs } from './ModalTabs';
 import { FollowersContent } from './FollowersContent';
 import { useProjectFilters } from './useProjectFilters';
-import { CrowdfundingProject } from '@/types/project';
+import { CrowdfundingProject } from '@/features/projects/types';
 
 interface FollowersModalProps {
   open: boolean;
diff --git a/components/profile/ModalTabs.tsx b/components/profile/ModalTabs.tsx
index 9cf7f9826..5cd104e46 100644
--- a/components/profile/ModalTabs.tsx
+++ b/components/profile/ModalTabs.tsx
@@ -3,7 +3,7 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { TeamList, TeamMember } from '@/components/ui/TeamList';
 import { ProjectList } from './ProjectList';
-import { CrowdfundingProject } from '@/types/project';
+import { CrowdfundingProject } from '@/features/projects/types';
 
 interface ModalTabsProps {
   activeTab: string;
diff --git a/components/profile/ProfileDataClient.tsx b/components/profile/ProfileDataClient.tsx
index 5c76fc149..1e2dd6fe8 100644
--- a/components/profile/ProfileDataClient.tsx
+++ b/components/profile/ProfileDataClient.tsx
@@ -17,10 +17,10 @@ import { Button } from '../ui/button';
 import ActivityHeatmap from './ActivityHeatMap';
 import { FutureFeature } from '../FeatureFuture';
 import { authClient } from '@/lib/auth-client';
-import { User } from '@/types/user';
+import { GetMeResponse } from '@/lib/api/types';
 
 interface ProfileDataClientProps {
-  user: User;
+  user: GetMeResponse;
 }
 
 const FILTER_OPTIONS = [
@@ -39,10 +39,13 @@ export default function ProfileDataClient({ user }: ProfileDataClientProps) {
   const { data: session } = authClient.useSession();
   const currentUser = session?.user;
 
+  // Extract the user data from the response
+  const userData = user.user;
+
   // Determine if it's the user's own profile by comparing IDs
-  const isOwnProfile = user.id === currentUser?.id;
+  const isOwnProfile = userData.id === currentUser?.id;
   const organizationsData =
-    user.members?.map(org => ({
+    userData.members?.map(org => ({
       name: org.organization.name,
       avatarUrl: org.organization.logo || '/blog1.jpg',
     })) || [];
@@ -50,8 +53,8 @@ export default function ProfileDataClient({ user }: ProfileDataClientProps) {
   return (
     <div className='mt-14 flex flex-col gap-8 lg:flex-row lg:gap-16'>
       <ProfileOverview
-        username={user.username}
-        user={user}
+        username={userData.username}
+        user={userData}
         isAuthenticated={!!currentUser}
         isOwnProfile={isOwnProfile}
       />
@@ -117,7 +120,7 @@ export default function ProfileDataClient({ user }: ProfileDataClientProps) {
 
               <ActivityFeed filter={selectedFilter} user={user} />
               <FutureFeature className='w-full'>
-                <ActivityHeatmap activities={user.activities} />
+                <ActivityHeatmap activities={user.user.activities} />
               </FutureFeature>
             </TabsContent>
 
diff --git a/components/profile/ProfileDataClientPublic.tsx b/components/profile/ProfileDataClientPublic.tsx
index ce692e6e9..1caf4133a 100644
--- a/components/profile/ProfileDataClientPublic.tsx
+++ b/components/profile/ProfileDataClientPublic.tsx
@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { Filter } from 'lucide-react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { PublicUserProfile } from '@/types/project';
+import { PublicUserProfile } from '@/features/projects/types';
 import ProjectsTabPublic from './ProjectsTabPublic';
 import OrganizationsTab from './OrganizationsTab';
 import {
diff --git a/components/profile/ProfileHeaderPublic.tsx b/components/profile/ProfileHeaderPublic.tsx
index f64cf7261..0674be894 100644
--- a/components/profile/ProfileHeaderPublic.tsx
+++ b/components/profile/ProfileHeaderPublic.tsx
@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
-import { PublicUserProfile } from '@/types/project';
+import { PublicUserProfile } from '@/features/projects/types';
 import { BoundlessButton } from '@/components/buttons';
 import { BellPlus, Settings } from 'lucide-react';
 import UserStats from './UserStats';
diff --git a/components/profile/ProfileOverviewPublic.tsx b/components/profile/ProfileOverviewPublic.tsx
index 1c7193d75..5281194cc 100644
--- a/components/profile/ProfileOverviewPublic.tsx
+++ b/components/profile/ProfileOverviewPublic.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import OrganizationsList from './OrganizationsList';
-import { PublicUserProfile } from '@/types/project';
+import { PublicUserProfile } from '@/features/projects/types';
 import ProfileHeaderPublic from './ProfileHeaderPublic';
 
 interface ProfileOverviewProps {
diff --git a/components/profile/ProjectList.tsx b/components/profile/ProjectList.tsx
index 4b35336cb..d7d82a386 100644
--- a/components/profile/ProjectList.tsx
+++ b/components/profile/ProjectList.tsx
@@ -1,7 +1,8 @@
 'use client';
 
-import { CrowdfundingProject } from '@/types/project';
-import ProjectCard from '../landing-page/project/ProjectCard';
+import { mapCrowdfundingProjectToCardData } from '@/features/projects/utils/card-mappers';
+import ProjectCard from '@/features/projects/components/ProjectCard';
+import { CrowdfundingProject } from '@/features/projects/types';
 
 interface ProjectListProps {
   projects: CrowdfundingProject[];
@@ -17,45 +18,13 @@ export function ProjectList({ projects, activeTab }: ProjectListProps) {
     );
   }
 
-  // Map project status to ProjectCard expected status
-  const getProjectStatus = (
-    status: string
-  ): 'Validation' | 'Funding' | 'Funded' | 'Completed' => {
-    switch (status) {
-      case 'under_review':
-        return 'Validation';
-      case 'funding':
-        return 'Funding';
-      case 'funded':
-        return 'Funded';
-      case 'completed':
-        return 'Completed';
-      case 'in_progress':
-        return 'Funding';
-      default:
-        return 'Validation';
-    }
-  };
-
   return (
     <div className='space-y-4'>
       {projects.map(project => (
         <ProjectCard
           key={project.id}
-          projectId={project.id}
-          creatorName={project.creator.name || 'Creator'}
-          creatorLogo={project.creator.image || '/avatar.png'}
-          projectImage={project.banner || '/bitmed.png'}
-          projectTitle={project.title}
-          projectDescription={project.description}
-          status={getProjectStatus(project.status)}
-          deadlineInDays={30}
           isFullWidth={true}
-          funding={{
-            current: project.funding?.raised || 0,
-            goal: project.funding?.goal || 10000,
-            currency: project.funding?.currency || 'USDC',
-          }}
+          data={mapCrowdfundingProjectToCardData(project)}
         />
       ))}
     </div>
diff --git a/components/profile/ProjectsTab.tsx b/components/profile/ProjectsTab.tsx
index e8ce41688..50a0f9039 100644
--- a/components/profile/ProjectsTab.tsx
+++ b/components/profile/ProjectsTab.tsx
@@ -1,15 +1,17 @@
 'use client';
 
 import React, { useState, useEffect, useCallback } from 'react';
-import ProjectCard from '../landing-page/project/ProjectCard';
+// import ProjectCard from '../landing-page/project/ProjectCard';
 import { Project } from '@/types/user';
 import { useWindowSize } from '@/hooks/use-window-size';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import Link from 'next/link';
-import { User } from '@/types/user';
+import { GetMeResponse } from '@/lib/api/types';
+import { mapProjectToCardData } from '@/features/projects/utils/card-mappers';
+import ProjectCard from '@/features/projects/components/ProjectCard';
 
 interface ProjectsTabProps {
-  user: User;
+  user: GetMeResponse;
 }
 
 export default function ProjectsTab({ user }: ProjectsTabProps) {
@@ -19,26 +21,6 @@ export default function ProjectsTab({ user }: ProjectsTabProps) {
   const { height: windowHeight } = useWindowSize();
   const itemsPerPage = 6;
 
-  // Map project status to ProjectCard expected status
-  const getProjectStatus = (
-    status: string
-  ): 'Validation' | 'Funding' | 'Funded' | 'Completed' => {
-    switch (status) {
-      case 'under_review':
-        return 'Validation';
-      case 'funding':
-        return 'Funding';
-      case 'funded':
-        return 'Funded';
-      case 'completed':
-        return 'Completed';
-      case 'in_progress':
-        return 'Funding';
-      default:
-        return 'Validation';
-    }
-  };
-
   const calculateScrollHeight = () => {
     if (!windowHeight) return '400px';
 
@@ -62,7 +44,7 @@ export default function ProjectsTab({ user }: ProjectsTabProps) {
       const endIndex = startIndex + itemsPerPage;
 
       // Use real projects data from API
-      const allProjects = user.projects || [];
+      const allProjects = user.user.projects || [];
       const newProjects = allProjects.slice(startIndex, endIndex);
 
       if (pageNum === 1) {
@@ -73,7 +55,7 @@ export default function ProjectsTab({ user }: ProjectsTabProps) {
 
       setHasMore(endIndex < allProjects.length);
     },
-    [user.projects]
+    [user.user.projects]
   );
 
   useEffect(() => {
@@ -109,7 +91,7 @@ export default function ProjectsTab({ user }: ProjectsTabProps) {
       <div className='flex items-center justify-between'>
         <h3 className='text-lg font-medium text-gray-300'>Your Projects</h3>
         <span className='text-sm text-gray-500'>
-          {user.projects?.length || 0} projects
+          {user.user.projects?.length || 0} projects
         </span>
       </div>
 
@@ -127,20 +109,12 @@ export default function ProjectsTab({ user }: ProjectsTabProps) {
             >
               <ProjectCard
                 newTab={true}
-                projectId={project.id}
-                creatorName={``}
-                creatorLogo={user.image || '/avatar.png'}
-                projectImage={project.logo || '/bitmed.png'}
-                projectTitle={project.title}
-                projectDescription={project.description}
-                status={getProjectStatus(project.status)}
-                deadlineInDays={30}
                 isFullWidth={true}
-                funding={{
-                  current: 0,
-                  goal: 10000,
-                  currency: 'USDC',
-                }}
+                data={mapProjectToCardData(project, {
+                  // Yes, `ProjectsTab` is for "Your Projects", so creator is the user.
+                  name: user.user.name || 'User',
+                  image: user.user.image || '/avatar.png',
+                })}
               />
             </Link>
           ))}
diff --git a/components/profile/ProjectsTabPublic.tsx b/components/profile/ProjectsTabPublic.tsx
index 1b3f4dcb4..a8e4ba468 100644
--- a/components/profile/ProjectsTabPublic.tsx
+++ b/components/profile/ProjectsTabPublic.tsx
@@ -1,31 +1,16 @@
 'use client';
 
 import React from 'react';
-import ProjectCard from '../landing-page/project/ProjectCard';
-import { PublicUserProfile } from '@/types/project';
+import { PublicUserProfile } from '@/features/projects/types';
 import Link from 'next/link';
+import ProjectCard from '@/features/projects/components/ProjectCard';
+import { mapProjectToCardData } from '@/features/projects/utils/card-mappers';
 
 interface ProjectsTabProps {
   user: PublicUserProfile;
 }
 
 export default function ProjectsTabPublic({ user }: ProjectsTabProps) {
-  // Map project status to ProjectCard expected status
-  const getProjectStatus = (
-    status: string
-  ): 'Validation' | 'Funding' | 'Funded' | 'Completed' => {
-    switch (status) {
-      case 'IDEA':
-        return 'Validation';
-      case 'ACTIVE':
-        return 'Funding';
-      case 'COMPLETED':
-        return 'Completed';
-      default:
-        return 'Validation';
-    }
-  };
-
   if (user.projects.length === 0) {
     return (
       <div className='py-8 text-center'>
@@ -52,15 +37,11 @@ export default function ProjectsTabPublic({ user }: ProjectsTabProps) {
         {user.projects.map(project => (
           <Link key={project.id} href={`/projects/${project.id}`}>
             <ProjectCard
-              projectId={project.id}
-              creatorName={user.name}
-              creatorLogo={user.image}
-              projectImage={project.logo}
-              projectTitle={project.title}
-              projectDescription={project.description}
-              status={getProjectStatus(project.status)}
-              deadlineInDays={0}
               isFullWidth={true}
+              data={mapProjectToCardData(project, {
+                name: user.name,
+                image: user.image,
+              })}
             />
           </Link>
         ))}
diff --git a/components/profile/update/Profile.tsx b/components/profile/update/Profile.tsx
index 8c5ab9d56..6616c589c 100644
--- a/components/profile/update/Profile.tsx
+++ b/components/profile/update/Profile.tsx
@@ -317,7 +317,7 @@ function Profile({ user }: ProfileDataProps) {
                 />
               ) : (
                 <Image
-                  src={user.image}
+                  src={user.image || '/avatar.png'}
                   alt='Avatar'
                   fill
                   className='object-cover'
diff --git a/components/profile/useProjectFilters.ts b/components/profile/useProjectFilters.ts
index 745a32d46..d3a433a5e 100644
--- a/components/profile/useProjectFilters.ts
+++ b/components/profile/useProjectFilters.ts
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { CrowdfundingProject } from '@/types/project';
+import { CrowdfundingProject } from '@/features/projects/types';
 
 export function useProjectFilters(projects: CrowdfundingProject[]) {
   const [activeTab, setActiveTab] = useState('Projects');
diff --git a/components/project-details/ProjectFundEscrow.tsx b/components/project-details/ProjectFundEscrow.tsx
index ab5ec5f8c..7b4aecc4b 100644
--- a/components/project-details/ProjectFundEscrow.tsx
+++ b/components/project-details/ProjectFundEscrow.tsx
@@ -33,7 +33,7 @@ type MultiReleaseEscrowWithBalance = MultiReleaseEscrow & {
   balance?: number;
 };
 import { Loader2, CheckCircle2, DollarSign, AlertCircle } from 'lucide-react';
-import { fundCrowdfundingProject } from '@/lib/api/project';
+import { fundCrowdfundingProject } from '@/features/projects/api';
 
 interface ProjectFundEscrowProps {
   projectId: string;
diff --git a/components/project-details/funding-modal.tsx b/components/project-details/funding-modal.tsx
index dc48d128c..c64746cb7 100644
--- a/components/project-details/funding-modal.tsx
+++ b/components/project-details/funding-modal.tsx
@@ -4,6 +4,8 @@ import React, { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Checkbox } from '@/components/ui/checkbox';
 import {
   Dialog,
   DialogContent,
@@ -12,9 +14,9 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
-import { contributeToProject } from '@/lib/api/project';
+import { contributeToProject } from '@/features/projects/api';
 import { useWalletInfo } from '@/hooks/use-wallet';
-import { Loader2, DollarSign } from 'lucide-react';
+import { Loader2, DollarSign, MessageSquare, EyeOff } from 'lucide-react';
 import {
   FundEscrowPayload,
   useFundEscrow,
@@ -42,6 +44,8 @@ export function FundingModal({
 }: FundingModalProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [amount, setAmount] = useState('');
+  const [message, setMessage] = useState('');
+  const [anonymous, setAnonymous] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [step, setStep] = useState<'input' | 'signing' | 'confirming'>('input');
   const [error, setError] = useState<string | null>(null);
@@ -88,7 +92,7 @@ export function FundingModal({
 
       // Step 2: Sign transaction
       const signedXdr = await signTransaction({
-        /* This method should be provided by the wallet */ unsignedTransaction,
+        unsignedTransaction,
         address: address || '',
       });
 
@@ -100,14 +104,20 @@ export function FundingModal({
       await contributeToProject(campaignId, {
         amount: parseFloat(amount),
         transactionHash: data.message,
+        message: message || undefined,
+        anonymous,
       });
       if (data.status === 'SUCCESS') {
-        toast.success('Escrow Funded');
+        toast.success('Thank you for your contribution!', {
+          description: `You've successfully funded $${parseFloat(amount).toLocaleString()}`,
+        });
       }
 
       // Success - close modal and refresh data
       setIsOpen(false);
       setAmount('');
+      setMessage('');
+      setAnonymous(false);
       setStep('input');
 
       window.location.reload();
@@ -133,77 +143,137 @@ export function FundingModal({
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className='border-gray-800 bg-[#1a1a1a] sm:max-w-[425px]'>
+      <DialogContent className='sm:max-w-[480px]'>
         <DialogHeader>
-          <DialogTitle className='flex items-center gap-2 text-white'>
-            <DollarSign className='h-5 w-5' />
+          <DialogTitle className='text-foreground flex items-center gap-2'>
             Fund {projectTitle}
           </DialogTitle>
-          <DialogDescription className='text-gray-400'>
+          <DialogDescription className='text-muted-foreground'>
             {getStepMessage()}
           </DialogDescription>
         </DialogHeader>
 
-        <div className='space-y-6'>
+        <div className='space-y-5'>
           {/* Funding Progress */}
-          <div className='space-y-3'>
+          <div className='border-border bg-muted/30 space-y-3 rounded-lg border p-4'>
             <div className='flex justify-between text-sm'>
-              <span className='text-gray-400'>Progress</span>
-              <span className='text-white'>
+              <span className='text-muted-foreground'>Campaign Progress</span>
+              <span className='text-foreground font-medium'>
                 ${currentRaised.toLocaleString()} / $
                 {fundingGoal.toLocaleString()}
               </span>
             </div>
-            <div className='h-2 w-full rounded-full bg-gray-700'>
+            <div className='bg-muted h-2.5 w-full overflow-hidden rounded-full'>
               <div
-                className='h-2 rounded-full bg-[#A7F950] transition-all duration-300'
+                className='bg-primary h-full rounded-full transition-all duration-500 ease-out'
                 style={{ width: `${Math.min(progressPercentage, 100)}%` }}
               />
             </div>
-            <div className='text-xs text-gray-400'>
-              {remainingGoal > 0
-                ? `$${remainingGoal.toLocaleString()} remaining`
-                : 'Goal reached!'}
+            <div className='flex items-center justify-between text-xs'>
+              <span className='text-muted-foreground'>
+                {remainingGoal > 0
+                  ? `$${remainingGoal.toLocaleString()} remaining`
+                  : 'Goal reached!'}
+              </span>
+              <span className='text-primary font-medium'>
+                {Math.min(progressPercentage, 100).toFixed(1)}%
+              </span>
             </div>
           </div>
 
           {/* Amount Input */}
           {step === 'input' && (
-            <div className='space-y-4'>
+            <div className='space-y-5'>
               <div className='space-y-2'>
-                <Label htmlFor='amount' className='text-white'>
-                  Amount (USD)
+                <Label htmlFor='amount' className='text-sm font-medium'>
+                  Contribution Amount (USDC)
                 </Label>
                 <div className='relative'>
-                  <DollarSign className='absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400' />
+                  <DollarSign className='text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2' />
                   <Input
                     id='amount'
                     type='number'
-                    placeholder='0.00'
+                    placeholder='Enter amount'
                     value={amount}
                     onChange={e => setAmount(e.target.value)}
-                    className='border-gray-600 bg-[#2a2a2a] pl-10 text-white'
+                    className='h-11 pl-10 text-base'
                     min='0'
                     max={remainingGoal}
                     step='0.01'
                   />
                 </div>
+                {amount && parseFloat(amount) > 0 && (
+                  <p className='text-muted-foreground text-xs'>
+                    ≈ {parseFloat(amount).toLocaleString()} USDC on Stellar
+                  </p>
+                )}
+              </div>
+
+              <div className='space-y-2'>
+                <Label
+                  htmlFor='message'
+                  className='flex items-center gap-2 text-sm font-medium'
+                >
+                  <MessageSquare className='h-4 w-4' />
+                  Message{' '}
+                  <span className='text-muted-foreground text-xs font-normal'>
+                    (optional)
+                  </span>
+                </Label>
+                <Textarea
+                  id='message'
+                  placeholder='Leave a message of support...'
+                  value={message}
+                  onChange={e => setMessage(e.target.value)}
+                  className='min-h-[80px] resize-none'
+                  maxLength={500}
+                />
+                {message && (
+                  <p className='text-muted-foreground text-right text-xs'>
+                    {message.length}/500
+                  </p>
+                )}
+              </div>
+
+              <div className='border-border bg-muted/20 flex items-start space-x-3 rounded-lg border p-3'>
+                <Checkbox
+                  id='anonymous'
+                  checked={anonymous}
+                  onCheckedChange={checked => setAnonymous(checked as boolean)}
+                />
+                <div className='grid gap-1.5 leading-none'>
+                  <label
+                    htmlFor='anonymous'
+                    className='flex items-center gap-2 text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+                  >
+                    <EyeOff className='h-4 w-4' />
+                    Contribute anonymously
+                  </label>
+                  <p className='text-muted-foreground text-xs'>
+                    Your name will be hidden from public view
+                  </p>
+                </div>
               </div>
 
-              {error && <div className='text-sm text-red-400'>{error}</div>}
+              {error && (
+                <div className='border-destructive/50 bg-destructive/10 text-destructive rounded-lg border p-3 text-sm'>
+                  {error}
+                </div>
+              )}
 
-              <div className='flex gap-3'>
+              <div className='flex gap-3 pt-2'>
                 <Button
                   variant='outline'
                   onClick={() => setIsOpen(false)}
-                  className='flex-1 border-gray-600 text-gray-300 hover:bg-gray-800'
+                  className='flex-1'
+                  disabled={isLoading}
                 >
                   Cancel
                 </Button>
                 <Button
                   onClick={handleFund}
                   disabled={!amount || parseFloat(amount) <= 0 || isLoading}
-                  className='flex-1 bg-[#A7F950] text-black hover:bg-[#A7F950]/90'
+                  className='flex-1'
                 >
                   {isLoading ? (
                     <>
@@ -211,7 +281,7 @@ export function FundingModal({
                       Processing...
                     </>
                   ) : (
-                    'Fund Project'
+                    'Contribute Now'
                   )}
                 </Button>
               </div>
@@ -220,10 +290,25 @@ export function FundingModal({
 
           {/* Signing/Confirming State */}
           {(step === 'signing' || step === 'confirming') && (
-            <div className='space-y-4 text-center'>
-              <Loader2 className='mx-auto h-8 w-8 animate-spin text-[#A7F950]' />
-              <p className='text-white'>{getStepMessage()}</p>
-              {error && <div className='text-sm text-red-400'>{error}</div>}
+            <div className='space-y-4 py-8 text-center'>
+              <div className='bg-primary/10 mx-auto flex h-16 w-16 items-center justify-center rounded-full'>
+                <Loader2 className='text-primary h-8 w-8 animate-spin' />
+              </div>
+              <div className='space-y-1'>
+                <p className='text-foreground font-medium'>
+                  {getStepMessage()}
+                </p>
+                <p className='text-muted-foreground text-sm'>
+                  {step === 'signing'
+                    ? 'Check your wallet to approve the transaction'
+                    : 'This may take a few moments'}
+                </p>
+              </div>
+              {error && (
+                <div className='border-destructive/50 bg-destructive/10 text-destructive rounded-lg border p-3 text-sm'>
+                  {error}
+                </div>
+              )}
             </div>
           )}
         </div>
diff --git a/components/project-details/project-about.tsx b/components/project-details/project-about.tsx
index d6a98cbed..ed214a0c9 100644
--- a/components/project-details/project-about.tsx
+++ b/components/project-details/project-about.tsx
@@ -1,6 +1,6 @@
 import { Github, Globe, Youtube, X } from 'lucide-react';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { CrowdfundingProject } from '@/types/project';
+import { CrowdfundingProject } from '@/features/projects/types';
 
 interface ProjectAboutProps {
   project: CrowdfundingProject & {
diff --git a/components/project-details/project-backers/index.tsx b/components/project-details/project-backers/index.tsx
index 0898126db..9318ce974 100644
--- a/components/project-details/project-backers/index.tsx
+++ b/components/project-details/project-backers/index.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import Empty from './Empty';
 import Image from 'next/image';
-import { Contributor, Crowdfunding } from '@/types/project';
+import { Contributor, Crowdfunding } from '@/features/projects/types';
 
 const ProjectBackers = ({ crowdfund }: { crowdfund: Crowdfunding }) => {
   const [backers] = useState<Contributor[]>(
diff --git a/components/project-details/project-details.tsx b/components/project-details/project-details.tsx
index 23e5bc2c6..7f7fb87be 100644
--- a/components/project-details/project-details.tsx
+++ b/components/project-details/project-details.tsx
@@ -3,7 +3,21 @@
 import React from 'react';
 import { Card, CardContent } from '@/components/ui/card';
 import { useMarkdown } from '@/hooks/use-markdown';
-import { CrowdfundingProject } from '@/types/project';
+import { CrowdfundingProject } from '@/features/projects/types';
+import {
+  MediaPlayer,
+  MediaPlayerVideo,
+  MediaPlayerControls,
+  MediaPlayerControlsOverlay,
+  MediaPlayerPlay,
+  MediaPlayerSeek,
+  MediaPlayerSeekBackward,
+  MediaPlayerSeekForward,
+  MediaPlayerVolume,
+  MediaPlayerTime,
+  MediaPlayerFullscreen,
+  MediaPlayerLoading,
+} from '@/components/ui/media-player';
 
 interface ProjectDetailsProps {
   project: CrowdfundingProject & {
@@ -30,6 +44,8 @@ export function ProjectDetails({ project }: ProjectDetailsProps) {
     loadingDelay: 100,
   });
 
+  console.log(project.demoVideo);
+
   return (
     <div className='space-y-10 text-white'>
       {/* Markdown Content */}
@@ -63,30 +79,72 @@ export function ProjectDetails({ project }: ProjectDetailsProps) {
           <Card className='overflow-hidden border border-gray-800/50 bg-gradient-to-br from-gray-900/50 to-gray-950/50 shadow-xl backdrop-blur-sm'>
             <CardContent className='p-0'>
               <div className='relative aspect-video overflow-hidden bg-black'>
-                {project.demoVideo.includes('youtube.com') ||
-                project.demoVideo.includes('youtu.be') ? (
-                  <iframe
-                    className='h-full w-full'
-                    src={project.demoVideo
-                      .replace('watch?v=', 'embed/')
-                      .replace('youtu.be/', 'youtube.com/embed/')}
-                    title='Project Demonstration'
-                    allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
-                    allowFullScreen
-                  />
-                ) : (
-                  <>
-                    <video
-                      className='h-full w-full object-cover'
-                      controls
-                      preload='metadata'
-                    >
-                      <source src={project.demoVideo} type='video/mp4' />
-                      Your browser does not support the video tag.
-                    </video>
-                    <div className='pointer-events-none absolute inset-0 bg-gradient-to-t from-black/20 to-transparent' />
-                  </>
-                )}
+                {(() => {
+                  const getYouTubeEmbedUrl = (url: string) => {
+                    try {
+                      if (
+                        url.includes('youtube.com') ||
+                        url.includes('youtu.be')
+                      ) {
+                        let videoId = '';
+                        if (url.includes('youtu.be')) {
+                          videoId = url.split('/').pop()?.split('?')[0] || '';
+                        } else if (url.includes('youtube.com/watch')) {
+                          const urlParams = new URLSearchParams(
+                            new URL(url).search
+                          );
+                          videoId = urlParams.get('v') || '';
+                        }
+                        if (videoId) {
+                          return `https://www.youtube.com/embed/${videoId}`;
+                        }
+                      }
+                      return null;
+                    } catch {
+                      return null;
+                    }
+                  };
+
+                  const youtubeEmbedUrl = getYouTubeEmbedUrl(project.demoVideo);
+
+                  if (youtubeEmbedUrl) {
+                    return (
+                      <iframe
+                        src={youtubeEmbedUrl}
+                        title='Project Video'
+                        className='h-full w-full'
+                        allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+                        allowFullScreen
+                      />
+                    );
+                  }
+
+                  return (
+                    <MediaPlayer className='h-full w-full'>
+                      <MediaPlayerVideo
+                        className='h-full w-full object-cover'
+                        src={project.demoVideo}
+                      />
+                      <MediaPlayerLoading />
+                      <MediaPlayerControlsOverlay />
+                      <MediaPlayerControls className='flex-col items-stretch justify-end gap-2 bg-gradient-to-t from-black/80 via-black/40 to-transparent pt-12 pb-4'>
+                        <MediaPlayerSeek />
+                        <div className='flex items-center justify-between gap-4'>
+                          <div className='flex items-center gap-2'>
+                            <MediaPlayerPlay />
+                            <MediaPlayerSeekBackward />
+                            <MediaPlayerSeekForward />
+                            <MediaPlayerVolume />
+                            <MediaPlayerTime />
+                          </div>
+                          <div className='flex items-center gap-2'>
+                            <MediaPlayerFullscreen />
+                          </div>
+                        </div>
+                      </MediaPlayerControls>
+                    </MediaPlayer>
+                  );
+                })()}
               </div>
               <div className='border-t border-gray-800/50 bg-gray-900/30 p-4'>
                 <p className='text-center text-sm text-gray-400'>
diff --git a/components/project-details/project-layout.tsx b/components/project-details/project-layout.tsx
index d00602749..8bf6fdc3d 100644
--- a/components/project-details/project-layout.tsx
+++ b/components/project-details/project-layout.tsx
@@ -14,7 +14,8 @@ import ProjectVoters from './project-voters';
 import ProjectBackers from './project-backers';
 import { ProjectSidebar } from './project-sidebar';
 import { cn } from '@/lib/utils';
-import { Crowdfunding, CrowdfundingProject } from '@/types/project';
+import { Crowdfunding, CrowdfundingProject } from '@/features/projects/types';
+import { getProjectStatus } from './project-sidebar/utils';
 
 export function ProjectLayout({
   project,
@@ -34,6 +35,36 @@ export function ProjectLayout({
   const [isLeftScrollable, setIsLeftScrollable] = useState(true);
   const [isRightScrollable, setIsRightScrollable] = useState(true);
   const tabsListRef = useRef<HTMLDivElement>(null);
+  const projectStatus = getProjectStatus(project, crowdfund);
+
+  const getVisibleTabs = () => {
+    const baseTabs = [
+      { value: 'details', label: 'Details' },
+      { value: 'team', label: 'Team' },
+      { value: 'milestones', label: 'Milestones' },
+      { value: 'comments', label: 'Comments' },
+    ];
+
+    if (isMobile) {
+      baseTabs.unshift({ value: 'about', label: 'About' });
+    }
+
+    if (projectStatus === 'Validation') {
+      baseTabs.splice(4, 0, { value: 'voters', label: 'Voters' });
+    } else if (projectStatus === 'Funding') {
+      baseTabs.splice(4, 0, { value: 'voters', label: 'Voters' });
+      baseTabs.splice(5, 0, { value: 'backers', label: 'Backers' });
+    } else {
+      // Funded, Completed, etc.
+      baseTabs.splice(4, 0, { value: 'voters', label: 'Voters' });
+      baseTabs.splice(5, 0, { value: 'backers', label: 'Backers' });
+    }
+
+    return baseTabs;
+  };
+
+  const visibleTabs = getVisibleTabs();
+
   const handleScroll = () => {
     if (tabsListRef.current) {
       const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;
@@ -96,10 +127,10 @@ export function ProjectLayout({
 
   if (isMobile) {
     return (
-      <div className='min-h-screen overflow-x-hidden bg-gradient-to-b from-[#030303] via-[#0a0a0a] to-[#030303]'>
+      <div className='from-background-main-bg to-background-main-bg min-h-screen overflow-x-hidden bg-linear-to-b via-[#0a0a0a]'>
         <div className='w-full'>
           {/* Mobile Header with Sidebar */}
-          <div className='border-b border-gray-800/50 bg-gradient-to-b from-[#030303] to-[#0a0a0a] px-4 py-6 backdrop-blur-sm'>
+          <div className='from-background-main-bg border-b border-gray-800/50 bg-linear-to-b to-[#0a0a0a] px-4 py-6 backdrop-blur-sm'>
             <ProjectSidebar
               project={project}
               crowdfund={crowdfund}
@@ -109,7 +140,7 @@ export function ProjectLayout({
           </div>
 
           {/* Enhanced Tab Navigation */}
-          <div className='sticky top-0 z-40 w-full border-b border-gray-800/50 bg-[#030303]/80 backdrop-blur-md'>
+          <div className='bg-background-main-bg/80 sticky top-0 z-40 w-full border-b border-gray-800/50 backdrop-blur-md'>
             <Tabs
               value={activeTab}
               onValueChange={setActiveTab}
@@ -136,29 +167,20 @@ export function ProjectLayout({
                     />
                   )}
 
-                  {[
-                    { value: 'about', label: 'About' },
-                    { value: 'details', label: 'Details' },
-                    { value: 'team', label: 'Team' },
-                    { value: 'milestones', label: 'Milestones' },
-                    { value: 'voters', label: 'Voters' },
-                    { value: 'comments', label: 'Comments' },
-                  ]
-                    .filter(tab => !hiddenTabs.includes(tab.value))
-                    .map(tab => (
-                      <TabsTrigger
-                        key={tab.value}
-                        value={tab.value}
-                        className={cn(
-                          'relative rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200',
-                          'text-gray-400 hover:text-gray-300',
-                          'data-[state=active]:bg-[#a7f950]/10 data-[state=active]:text-[#a7f950]',
-                          'data-[state=active]:border data-[state=active]:border-[#a7f950]/30'
-                        )}
-                      >
-                        {tab.label}
-                      </TabsTrigger>
-                    ))}
+                  {visibleTabs.map(tab => (
+                    <TabsTrigger
+                      key={tab.value}
+                      value={tab.value}
+                      className={cn(
+                        'relative rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200',
+                        'text-gray-400 hover:text-gray-300',
+                        'data-[state=active]:bg-[#a7f950]/10 data-[state=active]:text-[#a7f950]',
+                        'data-[state=active]:border data-[state=active]:border-[#a7f950]/30'
+                      )}
+                    >
+                      {tab.label}
+                    </TabsTrigger>
+                  ))}
                 </div>
               </TabsList>
             </Tabs>
@@ -197,12 +219,12 @@ export function ProjectLayout({
   }
 
   return (
-    <div className='min-h-screen bg-gradient-to-b from-[#030303] via-[#0a0a0a] to-[#030303]'>
+    <div className='min-h-screen bg-linear-to-b'>
       <div className='mx-auto max-w-7xl'>
         <div className='flex gap-8 lg:gap-12'>
           {/* Sidebar - Sticky */}
           <div className='sticky top-8 h-fit w-full max-w-[420px] shrink-0'>
-            <div className='rounded-2xl border border-gray-800/50 bg-gradient-to-b from-gray-900/50 to-gray-950/50 p-6 shadow-xl backdrop-blur-sm'>
+            <div className='rounded-2xl border border-gray-800/50 bg-linear-to-b from-gray-900/50 to-gray-950/50 p-6 shadow-xl backdrop-blur-sm'>
               <ProjectSidebar
                 project={project}
                 crowdfund={crowdfund}
@@ -220,33 +242,24 @@ export function ProjectLayout({
               className='w-full'
             >
               {/* Enhanced Tab Navigation */}
-              <div className='sticky top-0 z-30 mb-8 border-b border-gray-800/50 bg-[#030303]/80 py-0 backdrop-blur-md'>
+              <div className='bg-background-main-bg/80 sticky top-0 z-30 mb-8 border-b border-gray-800/50 py-0 backdrop-blur-md'>
                 <TabsList className='h-auto w-fit justify-start gap-2 rounded-none bg-transparent p-0'>
-                  {[
-                    { value: 'details', label: 'Details' },
-                    { value: 'team', label: 'Team' },
-                    { value: 'milestones', label: 'Milestones' },
-                    { value: 'voters', label: 'Voters' },
-                    { value: 'backers', label: 'Backers' },
-                    { value: 'comments', label: 'Comments' },
-                  ]
-                    .filter(tab => !hiddenTabs.includes(tab.value))
-                    .map(tab => (
-                      <TabsTrigger
-                        key={tab.value}
-                        value={tab.value}
-                        className={cn(
-                          'relative rounded-lg px-5 py-2.5 text-sm font-medium transition-all duration-200',
-                          'text-gray-400 hover:bg-gray-800/30 hover:text-gray-300',
-                          'data-[state=active]:bg-[#a7f950]/10 data-[state=active]:text-[#a7f950]',
-                          'data-[state=active]:border data-[state=active]:border-[#a7f950]/30',
-                          'focus-visible:ring-2 focus-visible:ring-[#a7f950]/20',
-                          'rounded-t-2xl rounded-b-none'
-                        )}
-                      >
-                        {tab.label}
-                      </TabsTrigger>
-                    ))}
+                  {visibleTabs.map(tab => (
+                    <TabsTrigger
+                      key={tab.value}
+                      value={tab.value}
+                      className={cn(
+                        'relative rounded-lg px-5 py-2.5 text-sm font-medium transition-all duration-200',
+                        'text-gray-400 hover:bg-gray-800/30 hover:text-gray-300',
+                        'data-[state=active]:bg-[#a7f950]/10 data-[state=active]:text-[#a7f950]',
+                        'data-[state=active]:border data-[state=active]:border-[#a7f950]/30',
+                        'focus-visible:ring-2 focus-visible:ring-[#a7f950]/20',
+                        'rounded-t-2xl rounded-b-none'
+                      )}
+                    >
+                      {tab.label}
+                    </TabsTrigger>
+                  ))}
                 </TabsList>
               </div>
 
diff --git a/components/project-details/project-milestone/index.tsx b/components/project-details/project-milestone/index.tsx
index e9ca51897..900ea8649 100644
--- a/components/project-details/project-milestone/index.tsx
+++ b/components/project-details/project-milestone/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { Timeline, TimelineItemType } from '@/components/ui/timeline';
 import {
   DropdownMenu,
@@ -11,7 +11,9 @@ import { ListFilter } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Status } from './milestone-card';
 import EmptyState from '@/components/EmptyState';
-import { Crowdfunding } from '@/types/project';
+import { Crowdfunding, Milestone } from '@/features/projects/types';
+import Link from 'next/link';
+import { getCrowdfundingMilestones } from '@/features/projects/api';
 
 const filterOptions = [
   { value: 'all', label: 'All Milestones', count: 0 },
@@ -30,23 +32,32 @@ interface ProjectMilestoneProps {
 
 const ProjectMilestone = ({ crowdfund }: ProjectMilestoneProps) => {
   const [selectedFilter, setSelectedFilter] = useState<Status | 'all'>('all');
+  const [fetchedMilestones, setFetchedMilestones] = useState<Milestone[]>([]);
+  const [loading, setLoading] = useState(true);
 
+  useEffect(() => {
+    const fetchMilestones = async () => {
+      try {
+        setLoading(true);
+        const data = await getCrowdfundingMilestones(crowdfund.slug);
+        setFetchedMilestones(data || []);
+      } catch {
+        // Failed to fetch milestones
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (crowdfund.slug) {
+      fetchMilestones();
+    }
+  }, [crowdfund.slug]);
   const milestones: TimelineItemType[] = useMemo(() => {
-    if (!crowdfund.milestones || crowdfund.milestones.length === 0) {
+    if (!fetchedMilestones || fetchedMilestones.length === 0) {
       return [];
     }
 
-    const totalAmount = crowdfund.milestones.reduce(
-      (sum, milestone) => sum + milestone.amount,
-      0
-    );
-
-    return crowdfund.milestones.map(milestone => {
-      const percentage =
-        totalAmount > 0
-          ? Math.round((milestone.amount / totalAmount) * 100)
-          : 0;
-
+    return fetchedMilestones.map((milestone, index) => {
       let dueDate = 'TBD';
       try {
         if (milestone.endDate) {
@@ -60,8 +71,8 @@ const ProjectMilestone = ({ crowdfund }: ProjectMilestoneProps) => {
         // Invalid date format, use TBD
       }
 
-      const mapStatus = (status: string): Status => {
-        const normalizedStatus = status.toLowerCase();
+      const mapStatus = (status?: string): Status => {
+        const normalizedStatus = (status || 'pending').toLowerCase();
 
         switch (normalizedStatus) {
           case 'completed':
@@ -89,22 +100,22 @@ const ProjectMilestone = ({ crowdfund }: ProjectMilestoneProps) => {
         }
       };
 
-      const mappedStatus = mapStatus(milestone.status);
+      const mappedStatus = mapStatus(milestone.reviewStatus);
 
       return {
-        id: milestone.name,
-        title: milestone.name,
+        id: milestone.id || `milestone-${index}`,
+        title: milestone.title,
         description: milestone.description,
         dueDate,
         amount: milestone.amount,
-        percentage,
+        percentage: milestone.fundingPercentage,
         status: mappedStatus,
-        ...(milestone.status === 'in-review' && { feedbackDays: 3 }),
-        ...(milestone.status === 'rejected' && { deadline: dueDate }),
-        ...(milestone.status === 'approved' && { isUnlocked: true }),
+        ...(milestone.reviewStatus === 'in-review' && { feedbackDays: 3 }),
+        ...(milestone.reviewStatus === 'rejected' && { deadline: dueDate }),
+        ...(milestone.reviewStatus === 'approved' && { isUnlocked: true }),
       };
     });
-  }, [crowdfund.milestones]);
+  }, [fetchedMilestones]);
 
   const filterOptionsWithCounts = useMemo(() => {
     return filterOptions.map(option => {
@@ -129,6 +140,14 @@ const ProjectMilestone = ({ crowdfund }: ProjectMilestoneProps) => {
     filterOptionsWithCounts.find(option => option.value === selectedFilter)
       ?.label || 'All Milestones';
 
+  if (loading) {
+    return (
+      <div className='flex w-full items-center justify-center py-12'>
+        <div className='border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent' />
+      </div>
+    );
+  }
+
   return (
     <div className='w-full'>
       <div className='my-6 flex items-center justify-between'>
@@ -169,6 +188,11 @@ const ProjectMilestone = ({ crowdfund }: ProjectMilestoneProps) => {
             </DropdownMenuRadioGroup>
           </DropdownMenuContent>
         </DropdownMenu>
+        <Link href={`/projects/${crowdfund.slug}/milestones`}>
+          <Button variant='ghost' className='text-white underline'>
+            View All Milestones
+          </Button>
+        </Link>
       </div>
 
       <Timeline
@@ -176,7 +200,7 @@ const ProjectMilestone = ({ crowdfund }: ProjectMilestoneProps) => {
         showConnector={true}
         variant='default'
         className='w-full'
-        projectId={crowdfund.project.id}
+        projectSlug={crowdfund.slug}
       />
 
       {filteredMilestones.length === 0 && (
diff --git a/components/project-details/project-milestone/milestone-details/MilestoneDetails.tsx b/components/project-details/project-milestone/milestone-details/MilestoneDetails.tsx
index 00e128b74..265756c3e 100644
--- a/components/project-details/project-milestone/milestone-details/MilestoneDetails.tsx
+++ b/components/project-details/project-milestone/milestone-details/MilestoneDetails.tsx
@@ -3,11 +3,11 @@
 import React from 'react';
 import { Card, CardContent } from '@/components/ui/card';
 import { useMarkdown } from '@/hooks/use-markdown';
-import { CrowdfundingProject } from '@/types/project';
+import { Crowdfunding } from '@/features/projects/types';
 
 interface MilestoneDetailsProps {
   milestoneId: string;
-  project?: CrowdfundingProject | null;
+  project?: Crowdfunding | null;
   milestone?: {
     _id: string;
     title: string;
@@ -33,11 +33,6 @@ const MilestoneDetails = ({
     amount: 0,
   };
 
-  // Get project links from project data
-  const projectLinks = project?.socialLinks || [];
-  const projectWebsite = project?.projectWebsite;
-  const githubUrl = project?.githubUrl;
-
   const { loading, error, styledContent } = useMarkdown(
     milestoneData.description || 'No description available.',
     {
@@ -67,7 +62,7 @@ const MilestoneDetails = ({
       </div>
 
       {/* Video Media Showcase */}
-      {project?.demoVideo && (
+      {project?.project.demoVideo && (
         <section>
           <h2 className='mb-6 text-2xl font-bold text-white'>Media Showcase</h2>
           <div className='space-y-6'>
@@ -82,7 +77,10 @@ const MilestoneDetails = ({
                       className='h-full w-full rounded-lg object-cover'
                       controls
                     >
-                      <source src={project.demoVideo} type='video/mp4' />
+                      <source
+                        src={project.project.demoVideo}
+                        type='video/mp4'
+                      />
                       Your browser does not support the video tag.
                     </video>
                   </div>
@@ -97,13 +95,13 @@ const MilestoneDetails = ({
       )}
 
       {/* Project Documents Section */}
-      {project?.documents && (
+      {project?.project.documents && (
         <section>
           <h2 className='mb-6 text-2xl font-bold text-white'>
             Project Documents
           </h2>
           <div className='space-y-4'>
-            {project.documents.whitepaper && (
+            {project.project.documents.whitepaper && (
               <Card className='border-gray-800 bg-[#2B2B2B] text-white'>
                 <CardContent className='p-4'>
                   <div className='flex items-center space-x-3'>
@@ -117,7 +115,7 @@ const MilestoneDetails = ({
                       </p>
                     </div>
                     <a
-                      href={project.documents.whitepaper}
+                      href={project.project.documents.whitepaper}
                       target='_blank'
                       rel='noopener noreferrer'
                       className='rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700'
@@ -128,7 +126,7 @@ const MilestoneDetails = ({
                 </CardContent>
               </Card>
             )}
-            {project.documents.pitchDeck && (
+            {project.project.documents.pitchDeck && (
               <Card className='border-gray-800 bg-[#2B2B2B] text-white'>
                 <CardContent className='p-4'>
                   <div className='flex items-center space-x-3'>
@@ -142,7 +140,7 @@ const MilestoneDetails = ({
                       </p>
                     </div>
                     <a
-                      href={project.documents.pitchDeck}
+                      href={project.project.documents.pitchDeck}
                       target='_blank'
                       rel='noopener noreferrer'
                       className='rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700'
@@ -156,120 +154,6 @@ const MilestoneDetails = ({
           </div>
         </section>
       )}
-
-      {/* Project Links Section */}
-      {((project?.socialLinks && project?.socialLinks.length > 0) ||
-        project?.projectWebsite ||
-        project?.githubUrl) && (
-        <section>
-          <h2 className='mb-6 text-2xl font-bold text-white'>Project Links</h2>
-          <div className='space-y-3'>
-            {githubUrl && (
-              <a
-                href={githubUrl}
-                target='_blank'
-                rel='noopener noreferrer'
-                className='flex items-center space-x-3 rounded-lg border border-gray-800 bg-[#2B2B2B] p-4 text-white transition-colors hover:bg-gray-700'
-              >
-                <div className='flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700'>
-                  <span className='text-sm font-medium'>GH</span>
-                </div>
-                <div className='flex-1'>
-                  <h4 className='font-medium'>GitHub Repository</h4>
-                  <p className='text-sm text-gray-400'>{githubUrl}</p>
-                </div>
-                <svg
-                  className='h-5 w-5 text-gray-400'
-                  fill='none'
-                  stroke='currentColor'
-                  viewBox='0 0 24 24'
-                >
-                  <path
-                    strokeLinecap='round'
-                    strokeLinejoin='round'
-                    strokeWidth={2}
-                    d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'
-                  />
-                </svg>
-              </a>
-            )}
-            {projectWebsite && (
-              <a
-                href={projectWebsite}
-                target='_blank'
-                rel='noopener noreferrer'
-                className='flex items-center space-x-3 rounded-lg border border-gray-800 bg-[#2B2B2B] p-4 text-white transition-colors hover:bg-gray-700'
-              >
-                <div className='flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700'>
-                  <span className='text-sm font-medium'>WWW</span>
-                </div>
-                <div className='flex-1'>
-                  <h4 className='font-medium'>Project Website</h4>
-                  <p className='text-sm text-gray-400'>{projectWebsite}</p>
-                </div>
-                <svg
-                  className='h-5 w-5 text-gray-400'
-                  fill='none'
-                  stroke='currentColor'
-                  viewBox='0 0 24 24'
-                >
-                  <path
-                    strokeLinecap='round'
-                    strokeLinejoin='round'
-                    strokeWidth={2}
-                    d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'
-                  />
-                </svg>
-              </a>
-            )}
-            {projectLinks.map((link, index) => (
-              <a
-                key={index}
-                href={link.url}
-                target='_blank'
-                rel='noopener noreferrer'
-                className='flex items-center space-x-3 rounded-lg border border-gray-800 bg-[#2B2B2B] p-4 text-white transition-colors hover:bg-gray-700'
-              >
-                <div className='flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700'>
-                  <span className='text-sm font-medium'>
-                    {link.platform.toUpperCase()}
-                  </span>
-                </div>
-                <div className='flex-1'>
-                  <h4 className='font-medium'>{link.platform}</h4>
-                  <p className='text-sm text-gray-400'>{link.url}</p>
-                </div>
-                <svg
-                  className='h-5 w-5 text-gray-400'
-                  fill='none'
-                  stroke='currentColor'
-                  viewBox='0 0 24 24'
-                >
-                  <path
-                    strokeLinecap='round'
-                    strokeLinejoin='round'
-                    strokeWidth={2}
-                    d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'
-                  />
-                </svg>
-              </a>
-            ))}
-          </div>
-        </section>
-      )}
-
-      {/* Support Message Section */}
-      <section>
-        <h2 className='mb-4 text-2xl font-bold text-white'>
-          Support This Milestone
-        </h2>
-        <p className='leading-relaxed text-white'>
-          By supporting this milestone, you're contributing to the development
-          of {milestoneData.title} and helping bring this important work to
-          completion. Your support helps ensure timely delivery and quality
-          execution.
-        </p>
-      </section>
     </div>
   );
 };
diff --git a/components/project-details/project-milestone/milestone-details/MilestoneLinks.tsx b/components/project-details/project-milestone/milestone-details/MilestoneLinks.tsx
index 3410f8608..0bb81a12c 100644
--- a/components/project-details/project-milestone/milestone-details/MilestoneLinks.tsx
+++ b/components/project-details/project-milestone/milestone-details/MilestoneLinks.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import Link from 'next/link';
 import { Github } from 'lucide-react';
 import Image from 'next/image';
-import { CrowdfundingProject } from '@/types/project';
+import { Crowdfunding } from '@/features/projects/types';
 
 interface MilestoneLinksProps {
-  project?: CrowdfundingProject | null;
+  project?: Crowdfunding | null;
   milestone?: {
     _id: string;
     title: string;
@@ -20,24 +20,24 @@ const MilestoneLinks = ({ project }: MilestoneLinksProps) => {
   return (
     <div className='!w-full space-y-5'>
       <div className='flex flex-col gap-3'>
-        {project?.githubUrl && (
+        {project?.project.githubUrl && (
           <Link
             className='hover:text-primary flex items-center gap-2 text-sm text-white'
-            href={project.githubUrl}
+            href={project.project.githubUrl}
             target='_blank'
             rel='noopener noreferrer'
           >
-            <Github size={16} /> {project.githubUrl}
+            <Github size={16} /> {project.project.githubUrl}
           </Link>
         )}
-        {project?.projectWebsite && (
+        {project?.project.projectWebsite && (
           <Link
             className='hover:text-primary flex items-center gap-2 text-sm text-white'
-            href={project.projectWebsite}
+            href={project.project.projectWebsite}
             target='_blank'
             rel='noopener noreferrer'
           >
-            <span className='text-sm'>🌐</span> {project.projectWebsite}
+            <span className='text-sm'>🌐</span> {project.project.projectWebsite}
           </Link>
         )}
         {project?.socialLinks?.map((link, index) => (
@@ -51,8 +51,8 @@ const MilestoneLinks = ({ project }: MilestoneLinksProps) => {
             <span className='text-sm'>🔗</span> {link.platform}: {link.url}
           </Link>
         ))}
-        {!project?.githubUrl &&
-          !project?.projectWebsite &&
+        {!project?.project.githubUrl &&
+          !project?.project.projectWebsite &&
           (!project?.socialLinks || project.socialLinks.length === 0) && (
             <div className='py-8 text-center'>
               <p className='text-gray-400'>
@@ -62,60 +62,61 @@ const MilestoneLinks = ({ project }: MilestoneLinksProps) => {
           )}
       </div>
       {/* Project Team Section */}
-      {project?.teamMembers && project.teamMembers.length > 0 && (
-        <div className='flex flex-col gap-0'>
-          <h4 className='mb-3 text-sm font-medium text-gray-500'>
-            Project Team
-          </h4>
-          {project.teamMembers.slice(0, 3).map((member, index) => (
-            <div
-              key={member._id || index}
-              className='flex cursor-pointer items-center justify-between rounded py-2 transition-colors hover:bg-gray-900/30'
-            >
-              <div className='flex items-center space-x-4'>
-                <div className='relative'>
-                  <div className='h-12 w-12 overflow-hidden rounded-full border-[0.5px] border-[#2B2B2B]'>
-                    <Image
-                      width={48}
-                      height={48}
-                      src='/avatar.png'
-                      alt='Team member'
-                      className='h-full w-full object-cover'
-                    />
+      {project?.project.teamMembers &&
+        project.project.teamMembers.length > 0 && (
+          <div className='flex flex-col gap-0'>
+            <h4 className='mb-3 text-sm font-medium text-gray-500'>
+              Project Team
+            </h4>
+            {project.project.teamMembers.slice(0, 3).map((member, index) => (
+              <div
+                key={member._id || index}
+                className='flex cursor-pointer items-center justify-between rounded py-2 transition-colors hover:bg-gray-900/30'
+              >
+                <div className='flex items-center space-x-4'>
+                  <div className='relative'>
+                    <div className='h-12 w-12 overflow-hidden rounded-full border-[0.5px] border-[#2B2B2B]'>
+                      <Image
+                        width={48}
+                        height={48}
+                        src='/avatar.png'
+                        alt='Team member'
+                        className='h-full w-full object-cover'
+                      />
+                    </div>
                   </div>
-                </div>
 
-                <div className='flex flex-col space-y-0.5'>
-                  <span className='text-base font-normal text-white'>
-                    {member.profile?.firstName} {member.profile?.lastName}
-                  </span>
-                  <span
-                    className={`text-sm ${member.role === 'OWNER' ? 'text-[#DBF936]' : 'text-gray-500'}`}
-                  >
-                    {member.role}
-                  </span>
+                  <div className='flex flex-col space-y-0.5'>
+                    <span className='text-base font-normal text-white'>
+                      {member.profile?.firstName} {member.profile?.lastName}
+                    </span>
+                    <span
+                      className={`text-sm ${member.role === 'OWNER' ? 'text-[#DBF936]' : 'text-gray-500'}`}
+                    >
+                      {member.role}
+                    </span>
+                  </div>
                 </div>
-              </div>
 
-              <svg
-                width='20'
-                height='20'
-                viewBox='0 0 20 20'
-                fill='none'
-                xmlns='http://www.w3.org/2000/svg'
-              >
-                <path
-                  d='M7.5 15L12.5 10L7.5 5'
-                  stroke='white'
-                  strokeWidth='1.4'
-                  strokeLinecap='round'
-                  strokeLinejoin='round'
-                />
-              </svg>
-            </div>
-          ))}
-        </div>
-      )}
+                <svg
+                  width='20'
+                  height='20'
+                  viewBox='0 0 20 20'
+                  fill='none'
+                  xmlns='http://www.w3.org/2000/svg'
+                >
+                  <path
+                    d='M7.5 15L12.5 10L7.5 5'
+                    stroke='white'
+                    strokeWidth='1.4'
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                  />
+                </svg>
+              </div>
+            ))}
+          </div>
+        )}
     </div>
   );
 };
diff --git a/components/project-details/project-milestone/milestone-details/MilstoneOverview.tsx b/components/project-details/project-milestone/milestone-details/MilstoneOverview.tsx
index b792f4a54..be38efcaa 100644
--- a/components/project-details/project-milestone/milestone-details/MilstoneOverview.tsx
+++ b/components/project-details/project-milestone/milestone-details/MilstoneOverview.tsx
@@ -4,7 +4,7 @@ import { Separator } from '@/components/ui/separator';
 import Link from 'next/link';
 import { Github } from 'lucide-react';
 import Image from 'next/image';
-import { CrowdfundingProject } from '@/types/project';
+import { CrowdfundingProject } from '@/features/projects/types';
 
 interface MilstoneOverviewProps {
   project?: CrowdfundingProject | null;
@@ -131,7 +131,7 @@ const MilstoneOverview = ({ project, milestone }: MilstoneOverviewProps) => {
                 <span className='text-sm'>🌐</span> {project.projectWebsite}
               </Link>
             )}
-            {project?.socialLinks?.map((link, index) => (
+            {/* {project?.socialLinks?.map((link, index) => (
               <Link
                 key={index}
                 className='hover:text-primary flex items-center gap-2 text-sm text-white'
@@ -141,7 +141,7 @@ const MilstoneOverview = ({ project, milestone }: MilstoneOverviewProps) => {
               >
                 <span className='text-sm'>🔗</span> {link.platform}: {link.url}
               </Link>
-            ))}
+            ))} */}
           </div>
         </div>
         <Separator className='my-6 bg-[#2B2B2B]' />
diff --git a/components/project-details/project-sidebar/Discord-Symbol-Black.sDvg b/components/project-details/project-sidebar/Discord-Symbol-Black.sDvg
deleted file mode 100644
index 86bfd7729..000000000
--- a/components/project-details/project-sidebar/Discord-Symbol-Black.sDvg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Discord-Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.644 96"><path id="Discord-Symbol-Black" d="M81.15,0c-1.2376,2.1973-2.3489,4.4704-3.3591,6.794-9.5975-1.4396-19.3718-1.4396-28.9945,0-.985-2.3236-2.1216-4.5967-3.3591-6.794-9.0166,1.5407-17.8059,4.2431-26.1405,8.0568C2.779,32.5304-1.6914,56.3725.5312,79.8863c9.6732,7.1476,20.5083,12.603,32.0505,16.0884,2.6014-3.4854,4.8998-7.1981,6.8698-11.0623-3.738-1.3891-7.3497-3.1318-10.8098-5.1523.9092-.6567,1.7932-1.3386,2.6519-1.9953,20.281,9.547,43.7696,9.547,64.0758,0,.8587.7072,1.7427,1.3891,2.6519,1.9953-3.4601,2.0457-7.0718,3.7632-10.835,5.1776,1.97,3.8642,4.2683,7.5769,6.8698,11.0623,11.5419-3.4854,22.3769-8.9156,32.0509-16.0631,2.626-27.2771-4.496-50.9172-18.817-71.8548C98.9811,4.2684,90.1918,1.5659,81.1752.0505l-.0252-.0505ZM42.2802,65.4144c-6.2383,0-11.4159-5.6575-11.4159-12.6535s4.9755-12.6788,11.3907-12.6788,11.5169,5.708,11.4159,12.6788c-.101,6.9708-5.026,12.6535-11.3907,12.6535ZM84.3576,65.4144c-6.2637,0-11.3907-5.6575-11.3907-12.6535s4.9755-12.6788,11.3907-12.6788,11.4917,5.708,11.3906,12.6788c-.101,6.9708-5.026,12.6535-11.3906,12.6535Z"/></svg>
\ No newline at end of file
diff --git a/components/project-details/project-sidebar/Discord-Symbol-Blurple.ssvg b/components/project-details/project-sidebar/Discord-Symbol-Blurple.ssvg
deleted file mode 100644
index fdf7c0a26..000000000
--- a/components/project-details/project-sidebar/Discord-Symbol-Blurple.ssvg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Discord-Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.644 96"><defs><style>.cls-1{fill:#5865f2;}</style></defs><path id="Discord-Symbol-Blurple" class="cls-1" d="M81.15,0c-1.2376,2.1973-2.3489,4.4704-3.3591,6.794-9.5975-1.4396-19.3718-1.4396-28.9945,0-.985-2.3236-2.1216-4.5967-3.3591-6.794-9.0166,1.5407-17.8059,4.2431-26.1405,8.0568C2.779,32.5304-1.6914,56.3725.5312,79.8863c9.6732,7.1476,20.5083,12.603,32.0505,16.0884,2.6014-3.4854,4.8998-7.1981,6.8698-11.0623-3.738-1.3891-7.3497-3.1318-10.8098-5.1523.9092-.6567,1.7932-1.3386,2.6519-1.9953,20.281,9.547,43.7696,9.547,64.0758,0,.8587.7072,1.7427,1.3891,2.6519,1.9953-3.4601,2.0457-7.0718,3.7632-10.835,5.1776,1.97,3.8642,4.2683,7.5769,6.8698,11.0623,11.5419-3.4854,22.3769-8.9156,32.0509-16.0631,2.626-27.2771-4.496-50.9172-18.817-71.8548C98.9811,4.2684,90.1918,1.5659,81.1752.0505l-.0252-.0505ZM42.2802,65.4144c-6.2383,0-11.4159-5.6575-11.4159-12.6535s4.9755-12.6788,11.3907-12.6788,11.5169,5.708,11.4159,12.6788c-.101,6.9708-5.026,12.6535-11.3907,12.6535ZM84.3576,65.4144c-6.2637,0-11.3907-5.6575-11.3907-12.6535s4.9755-12.6788,11.3907-12.6788,11.4917,5.708,11.3906,12.6788c-.101,6.9708-5.026,12.6535-11.3906,12.6535Z"/></svg>
\ No newline at end of file
diff --git a/components/project-details/project-sidebar/ProjectSidebarActions.tsx b/components/project-details/project-sidebar/ProjectSidebarActions.tsx
index 43b677cc6..d0fac0766 100644
--- a/components/project-details/project-sidebar/ProjectSidebarActions.tsx
+++ b/components/project-details/project-sidebar/ProjectSidebarActions.tsx
@@ -12,8 +12,8 @@ import {
 import { ProjectSidebarActionsProps } from './types';
 import { BoundlessButton } from '@/components/buttons';
 import { SharePopup } from './SharePopup';
-import { useProtectedAction } from '@/hooks/use-protected-action';
 import { FollowButton } from '@/components/follow';
+import { FundingModal } from '@/components/project-details/funding-modal';
 
 export function ProjectSidebarActions({
   project,
@@ -21,13 +21,10 @@ export function ProjectSidebarActions({
   isVoting,
   userVote,
   onVote,
+  crowdfund,
 }: ProjectSidebarActionsProps) {
   const [isSharePopupOpen, setIsSharePopupOpen] = useState(false);
 
-  const { executeProtectedAction } = useProtectedAction({
-    actionName: 'fund project',
-  });
-
   const handleShareClick = () => {
     setIsSharePopupOpen(true);
   };
@@ -36,10 +33,6 @@ export function ProjectSidebarActions({
     setIsSharePopupOpen(false);
   };
 
-  const handleFundClick = async () => {
-    await executeProtectedAction(() => {});
-  };
-
   return (
     <div className='flex flex-row gap-3'>
       {projectStatus === 'Validation' && (
@@ -69,22 +62,29 @@ export function ProjectSidebarActions({
 
           {/* Dropdown text */}
           <div className='absolute top-full left-1/2 z-10 mt-2 hidden w-64 -translate-x-1/2 rounded-xl border border-gray-200 bg-white p-3 text-sm text-gray-700 shadow-lg group-hover:block'>
-            Voting is straightforward and individualistic — it’s for everyone.
+            Voting is straightforward and individualistic — it's for everyone.
             Voting power, weight, and eligibility for who can vote are currently
             under implementation.
           </div>
         </div>
       )}
 
-      {projectStatus === 'IDEA' && (
-        <BoundlessButton
-          onClick={handleFundClick}
-          className='flex h-12 flex-1 items-center justify-center gap-2 rounded-lg bg-[#A7F950] text-base font-semibold text-black shadow-lg transition-all duration-200 hover:bg-[#A7F950] hover:shadow-xl'
-          icon={<HandCoins className='h-5 w-5' />}
-          iconPosition='left'
+      {projectStatus === 'Funding' && (
+        <FundingModal
+          campaignId={crowdfund?.id || ''}
+          projectTitle={project.title}
+          currentRaised={crowdfund?.fundingRaised || 0}
+          fundingGoal={crowdfund?.fundingGoal || 0}
+          escrowAddress={crowdfund?.escrowAddress || ''}
         >
-          <span className=''>Back Project</span>
-        </BoundlessButton>
+          <BoundlessButton
+            className='flex h-12 flex-1 items-center justify-center gap-2 rounded-lg bg-[#A7F950] text-base font-semibold text-black shadow-lg transition-all duration-200 hover:bg-[#A7F950] hover:shadow-xl'
+            icon={<HandCoins className='h-5 w-5' />}
+            iconPosition='left'
+          >
+            <span className=''>Back Project</span>
+          </BoundlessButton>
+        </FundingModal>
       )}
 
       {projectStatus === 'Completed' && (
@@ -134,31 +134,6 @@ export function ProjectSidebarActions({
           projectUrl={typeof window !== 'undefined' ? window.location.href : ''}
         />
       </div>
-
-      {/* Fund Project Modal
-      <FundProject
-        open={isFundModalOpen}
-        setOpen={setIsFundModalOpen}
-        project={{
-          _id: project._id,
-          title: project.title,
-          logo: project.logo || project.media?.logo,
-          contractId: project.contractId || project.escrowAddress, // Get contractId from project
-          funding: project.funding
-            ? {
-                goal: project.funding.goal,
-                raised: project.funding.raised,
-              }
-            : undefined,
-        }}
-      />
-
-      <WalletRequiredModal
-        open={showWalletModal}
-        onOpenChange={closeWalletModal}
-        actionName='fund project'
-        onWalletConnected={handleWalletConnected}
-      /> */}
     </div>
   );
 }
diff --git a/components/project-details/project-sidebar/ProjectSidebarProgress.tsx b/components/project-details/project-sidebar/ProjectSidebarProgress.tsx
index 0a212edcd..c9b069d8b 100644
--- a/components/project-details/project-sidebar/ProjectSidebarProgress.tsx
+++ b/components/project-details/project-sidebar/ProjectSidebarProgress.tsx
@@ -1,77 +1,21 @@
 'use client';
 
-import { useState, useEffect } from 'react';
-import { Progress } from '@/components/ui/progress';
 import { ProjectSidebarProgressProps } from './types';
-import { getVoteCounts } from '@/lib/api/votes';
-import { VoteEntityType } from '@/types/votes';
-import { VoteCountResponse } from '@/types/votes';
-import { useVoteRealtime } from '@/hooks/use-vote-realtime';
+import { Progress } from '@/components/ui/progress';
 
 export function ProjectSidebarProgress({
   project,
+  crowdfund,
   projectStatus,
+  voteCounts,
 }: ProjectSidebarProgressProps) {
-  const [voteCounts, setVoteCounts] = useState<VoteCountResponse | null>(null);
-
-  const projectId = project?.id;
-
-  // Real-time vote updates
-  useVoteRealtime(
-    {
-      entityType: VoteEntityType.CROWDFUNDING_CAMPAIGN,
-      entityId: projectId || '',
-      enabled: !!projectId,
-    },
-    {
-      onVoteUpdated: data => {
-        setVoteCounts({
-          upvotes: data.voteCounts.upvotes,
-          downvotes: data.voteCounts.downvotes,
-          totalVotes: data.voteCounts.totalVotes,
-          userVote: data.voteCounts.userVote || null,
-        });
-      },
-      onVoteCreated: data => {
-        setVoteCounts({
-          upvotes: data.voteCounts.upvotes,
-          downvotes: data.voteCounts.downvotes,
-          totalVotes: data.voteCounts.totalVotes,
-          userVote: data.voteCounts.userVote || null,
-        });
-      },
-      onVoteDeleted: data => {
-        setVoteCounts({
-          upvotes: data.voteCounts.upvotes,
-          downvotes: data.voteCounts.downvotes,
-          totalVotes: data.voteCounts.totalVotes,
-          userVote: data.voteCounts.userVote || null,
-        });
-      },
-    }
-  );
-
-  useEffect(() => {
-    if (!projectId) return;
+  const fundingRaised =
+    crowdfund?.fundingRaised ?? project.funding?.raised ?? 0;
+  const fundingGoal = crowdfund?.fundingGoal ?? project.funding?.goal ?? 0;
+  const voteGoal = crowdfund?.voteGoal ?? crowdfund?.thresholdVotes ?? 50;
 
-    const fetchVoteCounts = async () => {
-      try {
-        const response = await getVoteCounts(
-          projectId,
-          VoteEntityType.CROWDFUNDING_CAMPAIGN
-        );
-        setVoteCounts(response);
-      } catch {
-        // Silently fail - voting data is not critical
-      }
-    };
-
-    fetchVoteCounts();
-  }, [projectId]);
-
-  const fundingPercentage = project.funding
-    ? (project.funding.raised / project.funding.goal) * 100
-    : 0;
+  const fundingPercentage =
+    fundingGoal > 0 ? (fundingRaised / fundingGoal) * 100 : 0;
 
   const milestonePercentage = project.milestones
     ? (project.milestones.filter(m => m.status === 'completed').length /
@@ -87,8 +31,8 @@ export function ProjectSidebarProgress({
           <div className='space-y-3'>
             <div className='flex items-center justify-between text-sm'>
               <span className='font-medium text-white'>
-                ${project.funding?.raised?.toLocaleString() || 0}/ $
-                {project.funding?.goal?.toLocaleString() || 0}{' '}
+                ${fundingRaised.toLocaleString()}/ $
+                {fundingGoal.toLocaleString()}{' '}
                 <span className='font-normal text-zinc-400'>Raised</span>
               </span>
             </div>
@@ -98,14 +42,14 @@ export function ProjectSidebarProgress({
 
       case 'Validation': {
         const validationProgress = Math.min(
-          ((voteCounts?.upvotes || 0) / 50) * 100,
+          ((voteCounts?.upvotes || 0) / voteGoal) * 100,
           100
         );
         return (
           <div className='space-y-3'>
             <div className='flex items-center justify-between text-sm'>
               <span className='font-medium text-white'>
-                {voteCounts?.upvotes || 0}/50{' '}
+                {voteCounts?.upvotes || 0}/{voteGoal}{' '}
                 <span className='font-normal text-zinc-400'>Upvotes</span>
               </span>
               <span className='font-medium text-zinc-400'>
@@ -117,12 +61,15 @@ export function ProjectSidebarProgress({
         );
       }
 
-      case 'Completed': {
+      case 'Completed':
+      case 'Funded': {
         const completedMilestones =
-          project.milestones?.filter(m => m.status === 'completed').length || 0;
-        const totalMilestones = project.milestones?.length || 0;
+          crowdfund?.milestones?.filter(m => m.reviewStatus === 'completed')
+            .length || 0;
+        const totalMilestones = crowdfund?.milestones?.length || 0;
         const rejectedMilestones =
-          project.milestones?.filter(m => m.status === 'rejected').length || 0;
+          crowdfund?.milestones?.filter(m => m.reviewStatus === 'rejected')
+            .length || 0;
 
         return (
           <div className='space-y-3'>
@@ -144,17 +91,18 @@ export function ProjectSidebarProgress({
 
       default: {
         const defaultProgress = Math.min(
-          ((voteCounts?.totalVotes || 0) / 50) * 100,
+          ((voteCounts?.totalVotes || 0) / voteGoal) * 100,
           100
         );
         return (
           <div className='space-y-3'>
             <div className='flex items-center justify-between text-sm'>
               <span className='font-medium text-white'>
-                {voteCounts?.totalVotes || 0}/50{' '}
+                {voteCounts?.totalVotes || 0}/{voteGoal}{' '}
                 <span className='font-normal text-zinc-400'>Votes</span>
               </span>
             </div>
+
             <Progress value={defaultProgress} className='h-2 bg-zinc-800' />
           </div>
         );
diff --git a/components/project-details/project-sidebar/discord-icon-svgrepo-com.ssvg b/components/project-details/project-sidebar/discord-icon-svgrepo-com.ssvg
deleted file mode 100644
index c03e8e127..000000000
--- a/components/project-details/project-sidebar/discord-icon-svgrepo-com.ssvg
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 -28.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
-    <g>
-        <path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="#5865F2" fill-rule="nonzero">
-
</path>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/components/project-details/project-sidebar/index.tsx b/components/project-details/project-sidebar/index.tsx
index 379757a7f..c557f2d3a 100644
--- a/components/project-details/project-sidebar/index.tsx
+++ b/components/project-details/project-sidebar/index.tsx
@@ -1,16 +1,19 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { ProjectSidebarHeader } from './ProjectSidebarHeader';
 import { ProjectSidebarProgress } from './ProjectSidebarProgress';
 import { ProjectSidebarActions } from './ProjectSidebarActions';
 import { ProjectSidebarCreator } from './ProjectSidebarCreator';
 import { ProjectSidebarLinks } from './ProjectSidebarLinks';
+import { voteProject } from '@/features/projects/api';
 import { createVote, deleteVote } from '@/lib/api/votes';
-import { VoteEntityType, VoteType } from '@/types/votes';
 import { getProjectStatus } from './utils';
 import { ProjectSidebarProps } from './types';
+import { VoteCountResponse, VoteEntityType, VoteType } from '@/types/votes';
+import { useVoteRealtime } from '@/hooks/use-vote-realtime';
+import { getVoteCounts } from '@/lib/api/votes';
 
 export function ProjectSidebar({
   project,
@@ -25,31 +28,82 @@ export function ProjectSidebar({
     : VoteEntityType.CROWDFUNDING_CAMPAIGN;
 
   const [isVoting, setIsVoting] = useState(false);
-  const [userVote, setUserVote] = useState<1 | -1 | null>(null);
+  const [voteCounts, setVoteCounts] = useState<VoteCountResponse | null>(
+    project.voting
+      ? {
+          upvotes: project.voting.upvotes,
+          downvotes: project.voting.downvotes,
+          totalVotes: project.voting.totalVotes,
+          userVote: project.voting.userVote,
+        }
+      : null
+  );
 
   const projectStatus = getProjectStatus(project, crowdfund);
+  const projectId = project?.id;
+
+  // Real-time vote updates
+  useVoteRealtime(
+    {
+      entityType: VoteEntityType.CROWDFUNDING_CAMPAIGN,
+      entityId: projectId || '',
+      enabled: !!projectId,
+    },
+    {
+      onVoteUpdated: data => {
+        setVoteCounts({
+          upvotes: data.voteCounts.upvotes,
+          downvotes: data.voteCounts.downvotes,
+          totalVotes: data.voteCounts.totalVotes,
+          userVote: data.voteCounts.userVote || null,
+        });
+      },
+      onVoteCreated: data => {
+        setVoteCounts({
+          upvotes: data.voteCounts.upvotes,
+          downvotes: data.voteCounts.downvotes,
+          totalVotes: data.voteCounts.totalVotes,
+          userVote: data.voteCounts.userVote || null,
+        });
+      },
+      onVoteDeleted: data => {
+        setVoteCounts({
+          upvotes: data.voteCounts.upvotes,
+          downvotes: data.voteCounts.downvotes,
+          totalVotes: data.voteCounts.totalVotes,
+          userVote: null,
+        });
+      },
+    }
+  );
+
+  useEffect(() => {
+    if (!projectId) return;
+
+    const fetchVoteCounts = async () => {
+      try {
+        const response = await getVoteCounts(
+          projectId,
+          VoteEntityType.CROWDFUNDING_CAMPAIGN
+        );
+        setVoteCounts(response);
+      } catch {
+        // Silently fail - voting data is not critical
+      }
+    };
+
+    fetchVoteCounts();
+  }, [projectId]);
 
   const handleVote = async (value: 1 | -1) => {
     if (isVoting) return;
 
     setIsVoting(true);
     try {
-      if (userVote === value) {
-        // Remove vote if clicking the same vote
-        await deleteVote(project.id, entityType);
-        setUserVote(null);
-      } else {
-        // Add/update vote
-        await createVote({
-          projectId: project.id,
-          entityType: entityType,
-          voteType: value === 1 ? VoteType.UPVOTE : VoteType.DOWNVOTE,
-        });
-        setUserVote(value);
-      }
+      await voteProject(project.id, value);
+      // Optimistic update could go here, but we rely on realtime/refetch
     } catch {
-      // Handle error silently or show user-friendly message
-      // You can add toast notifications here if needed
+      // Handle error implicitly
     } finally {
       setIsVoting(false);
     }
@@ -67,22 +121,27 @@ export function ProjectSidebar({
         </div>
       )}
 
-      {!hideProgress && (
-        <div className='rounded-lg border border-gray-800/50 bg-gray-900/30 p-4 backdrop-blur-sm'>
-          <ProjectSidebarProgress
-            project={project}
-            crowdfund={crowdfund}
-            projectStatus={projectStatus}
-          />
-        </div>
-      )}
+      <div className='rounded-lg border border-gray-800/50 bg-gray-900/30 p-4 backdrop-blur-sm'>
+        <ProjectSidebarProgress
+          project={project}
+          crowdfund={crowdfund}
+          projectStatus={projectStatus}
+          voteCounts={voteCounts}
+        />
+      </div>
 
       <ProjectSidebarActions
         project={project}
         crowdfund={crowdfund}
         projectStatus={projectStatus}
         isVoting={isVoting}
-        userVote={userVote}
+        userVote={
+          voteCounts?.userVote === VoteType.UPVOTE
+            ? 1
+            : voteCounts?.userVote === VoteType.DOWNVOTE
+              ? -1
+              : null
+        }
         onVote={handleVote}
       />
 
diff --git a/components/project-details/project-sidebar/types.ts b/components/project-details/project-sidebar/types.ts
index 965c8f26f..6139534b8 100644
--- a/components/project-details/project-sidebar/types.ts
+++ b/components/project-details/project-sidebar/types.ts
@@ -1,4 +1,5 @@
-import { Crowdfunding, CrowdfundingProject } from '@/types/project';
+import { Crowdfunding, CrowdfundingProject } from '@/features/projects/types';
+import { VoteCountResponse } from '@/types/votes';
 
 export interface CrowdfundData {
   _id: string;
@@ -29,6 +30,7 @@ export interface ProjectSidebarProgressProps {
   project: CrowdfundingProject;
   crowdfund?: Crowdfunding;
   projectStatus: string;
+  voteCounts: VoteCountResponse | null;
 }
 
 export interface ProjectSidebarActionsProps {
@@ -53,6 +55,7 @@ export type ProjectStatus =
   | 'Funded'
   | 'Completed'
   | 'Validation'
+  | 'Funding'
   | 'idea'
-  | 'SUBMITTED'
-  | 'pending';
+  | 'pending'
+  | 'SUBMITTED';
diff --git a/components/project-details/project-sidebar/utils.ts b/components/project-details/project-sidebar/utils.ts
index 86b78f58f..52c54508b 100644
--- a/components/project-details/project-sidebar/utils.ts
+++ b/components/project-details/project-sidebar/utils.ts
@@ -1,4 +1,4 @@
-import { Crowdfunding, CrowdfundingProject } from '@/types/project';
+import { Crowdfunding, CrowdfundingProject } from '@/features/projects/types';
 import { ProjectStatus } from './types';
 
 /**
@@ -8,18 +8,22 @@ export function getProjectStatus(
   project: CrowdfundingProject,
   crowdfund?: Crowdfunding
 ): ProjectStatus {
-  if (project.status === 'idea') {
+  if (project.status === 'IDEA' || project.status === 'idea') {
     return 'Validation';
   }
   if (
-    crowdfund?.fundingRaised &&
-    crowdfund?.fundingGoal &&
-    crowdfund?.fundingRaised >= crowdfund?.fundingGoal
+    project.status === 'funded' ||
+    (crowdfund?.fundingRaised &&
+      crowdfund?.fundingGoal &&
+      crowdfund?.fundingRaised >= crowdfund?.fundingGoal)
   ) {
     return 'Funded';
   }
-  if (project.status === 'campaigning') {
-    return 'campaigning';
+  if (project.status === 'campaigning' || project.status === 'active') {
+    return 'Funding';
+  }
+  if (project.status === 'completed') {
+    return 'Completed';
   }
   return project.status as ProjectStatus;
 }
diff --git a/components/project-details/project-team.tsx b/components/project-details/project-team.tsx
index 0e7918991..65579f8a8 100644
--- a/components/project-details/project-team.tsx
+++ b/components/project-details/project-team.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { TeamList, TeamMember } from '@/components/ui/TeamList';
-import { Crowdfunding } from '@/types/project';
+import { Crowdfunding } from '@/features/projects/types';
 
 interface ProjectTeamProps {
   crowdfund: Crowdfunding;
diff --git a/components/project-details/project-voters/index.tsx b/components/project-details/project-voters/index.tsx
index 3fc4c53b6..064b477eb 100644
--- a/components/project-details/project-voters/index.tsx
+++ b/components/project-details/project-voters/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import Empty from './Empty';
 import Image from 'next/image';
-import { CrowdfundingProject } from '@/types/project';
+import { CrowdfundingProject } from '@/features/projects/types';
 import { VoteType, VoteEntityType, VoterDto } from '@/types/votes';
 import {
   getVoteCounts as apiGetVoteCounts,
diff --git a/components/project/ProjectsPage.tsx b/components/project/ProjectsPage.tsx
deleted file mode 100644
index 1e6eb28b4..000000000
--- a/components/project/ProjectsPage.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-'use client';
-
-import React from 'react';
-import ProjectCard from '@/components/landing-page/project/ProjectCard';
-import ExploreHeader from '@/components/projects/ExploreHeader';
-import LoadingSpinner from '@/components/LoadingSpinner';
-import { useProjects } from '@/hooks/project/use-project';
-import { useProjectFilters } from '@/hooks/project/use-project-filters';
-import { BoundlessButton } from '../buttons';
-import { ArrowDownIcon, RefreshCwIcon, XIcon } from 'lucide-react';
-import EmptyState from '../EmptyState';
-import LoadingScreen from '../landing-page/project/CreateProjectModal/LoadingScreen';
-
-interface ProjectsClientProps {
-  className?: string;
-}
-
-export default function ProjectsClient({
-  className,
-}: ProjectsClientProps = {}) {
-  const {
-    filters,
-    handleSearch,
-    handleSort,
-    handleStatus,
-    handleCategory,
-    clearSearch,
-    clearAllFilters,
-  } = useProjectFilters();
-
-  const { projects, loading, loadingMore, error, hasMore, loadMore, refetch } =
-    useProjects({ initialFilters: filters });
-
-  // Memoized project cards to prevent unnecessary re-renders
-  const projectCards = React.useMemo(() => {
-    // console.log({projects})
-    return projects.map(project => (
-      <ProjectCard isFullWidth={true} key={project.id} project={project} />
-    ));
-  }, [projects]);
-
-  return (
-    <div className={className} id='explore-project'>
-      <ExploreHeader
-        onSearch={handleSearch}
-        onSortChange={handleSort}
-        onStatusChange={handleStatus}
-        onCategoryChange={handleCategory}
-      />
-
-      <main className='space-y-[40px] sm:space-y-[60px] md:space-y-[80px]'>
-        {/* Results Summary */}
-        {!loading && !error && projects.length > 0 && (
-          <div className='mb-6 flex items-center justify-between'>
-            <div className='text-gray-400'>
-              <span>
-                Showing {projects.length} project
-                {projects.length !== 1 ? 's' : ''}
-                {filters.search && ` for "${filters.search}"`}
-                {filters.category && ` in ${filters.category}`}
-                {filters.status && ` with status ${filters.status}`}
-              </span>
-            </div>
-            {filters.search && (
-              <BoundlessButton
-                onClick={clearSearch}
-                variant='outline'
-                size='sm'
-                className='text-primary hover:text-primary/80 text-sm'
-                icon={<XIcon className='h-4 w-4' />}
-                iconPosition='right'
-              >
-                Clear search
-              </BoundlessButton>
-            )}
-          </div>
-        )}
-
-        {/* Loading State */}
-        {loading && (
-          <div className='flex flex-col items-center justify-center'>
-            <LoadingScreen />
-          </div>
-        )}
-
-        {/* Error State */}
-        {error && (
-          <div className='flex flex-col items-center justify-center py-16'>
-            <div className='text-center'>
-              <EmptyState
-                title='Something went wrong'
-                description={error}
-                type='compact'
-                action={
-                  <BoundlessButton
-                    onClick={refetch}
-                    variant='outline'
-                    size='sm'
-                    icon={<RefreshCwIcon className='h-4 w-4' />}
-                    iconPosition='right'
-                  >
-                    Try Again
-                  </BoundlessButton>
-                }
-              />
-            </div>
-          </div>
-        )}
-
-        {/* Empty State */}
-        {!loading && !error && projects.length === 0 && (
-          <div className='flex flex-col items-center justify-center py-16'>
-            <div className='text-center'>
-              <EmptyState
-                title='No projects found'
-                description={
-                  filters.search || filters.category || filters.status
-                    ? 'Try adjusting your filters to see more projects'
-                    : 'No projects are available at the moment'
-                }
-                type='compact'
-              />
-
-              {(filters.search || filters.category || filters.status) && (
-                <div className='mt-2'>
-                  <BoundlessButton
-                    onClick={clearAllFilters}
-                    variant='outline'
-                    className='bg-primary hover:bg-primary/80 rounded-lg px-6 py-3 text-white transition-colors'
-                  >
-                    Clear all filters
-                  </BoundlessButton>
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-
-        {/* Projects Grid */}
-        {!loading && !error && projects.length > 0 && (
-          <>
-            <div className='mb-3 grid grid-cols-1 justify-items-center gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3'>
-              {projectCards}
-            </div>
-
-            {/* Load More Button */}
-            {hasMore && (
-              <div className='mt-8 flex items-center justify-center'>
-                <BoundlessButton
-                  onClick={loadMore}
-                  variant='outline'
-                  disabled={loadingMore}
-                  icon={
-                    loadingMore ? undefined : (
-                      <ArrowDownIcon className='h-4 w-4' />
-                    )
-                  }
-                  className='flex items-center gap-2 rounded-lg px-8 py-3 font-medium text-white transition-colors disabled:cursor-not-allowed disabled:bg-gray-600'
-                  iconPosition='right'
-                >
-                  {loadingMore && (
-                    <LoadingSpinner size='sm' variant='spinner' color='white' />
-                  )}
-                  {loadingMore
-                    ? 'Loading more projects...'
-                    : 'Load More Projects'}
-                </BoundlessButton>
-              </div>
-            )}
-          </>
-        )}
-      </main>
-    </div>
-  );
-}
diff --git a/components/recent-projects.tsx b/components/recent-projects.tsx
new file mode 100644
index 000000000..9453fbf9b
--- /dev/null
+++ b/components/recent-projects.tsx
@@ -0,0 +1,348 @@
+'use client';
+
+import Link from 'next/link';
+import { format } from 'date-fns';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { ArrowRight, Package } from 'lucide-react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+import {
+  ColumnDef,
+  SortingState,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { ArrowUpDown } from 'lucide-react';
+import * as React from 'react';
+
+import Image from 'next/image';
+
+interface Project {
+  id: string;
+  title: string;
+  vision: string;
+  category: string;
+  status: string;
+  banner?: string | null;
+  logo?: string | null;
+  createdAt: string;
+}
+
+interface RecentProjectsProps {
+  projects: Project[];
+  maxDisplay?: number;
+}
+
+export function RecentProjects({
+  projects,
+  maxDisplay = 5,
+}: RecentProjectsProps) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+
+  const { displayProjects, hasMoreProjects } = React.useMemo(() => {
+    const sorted = [...projects].sort(
+      (a, b) =>
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+    );
+    return {
+      displayProjects: sorted.slice(0, maxDisplay),
+      hasMoreProjects: sorted.length > maxDisplay,
+    };
+  }, [projects, maxDisplay]);
+
+  // Map project status to display status
+  const mapProjectStatus = (status: string) => {
+    switch (status.toLowerCase()) {
+      case 'campaigning':
+        return 'Funding';
+      case 'idea':
+        return 'Validation';
+      case 'completed':
+        return 'Completed';
+      case 'live':
+        return 'Funded';
+      case 'reviewing':
+        return 'Reviewing';
+      default:
+        return 'Not sure';
+    }
+  };
+
+  // Get status badge specific classes
+  const getStatusColor = (status: string) => {
+    switch (status.toLowerCase()) {
+      case 'campaigning':
+        return 'bg-blue-500/15 text-blue-500 hover:bg-blue-500/25 border-blue-500/20';
+      case 'idea':
+        return 'bg-yellow-500/15 text-yellow-500 hover:bg-yellow-500/25 border-yellow-500/20';
+      case 'completed':
+        return 'bg-green-500/15 text-green-500 hover:bg-green-500/25 border-green-500/20';
+      case 'live':
+        return 'bg-emerald-500/15 text-emerald-500 hover:bg-emerald-500/25 border-emerald-500/20';
+      case 'reviewing':
+        return 'bg-purple-500/15 text-purple-500 hover:bg-purple-500/25 border-purple-500/20';
+      default:
+        return 'bg-gray-500/15 text-gray-500 hover:bg-gray-500/25 border-gray-500/20';
+    }
+  };
+
+  const columns = React.useMemo<ColumnDef<Project>[]>(
+    () => [
+      {
+        accessorKey: 'title',
+        header: ({ column }) => {
+          return (
+            <Button
+              variant='ghost'
+              onClick={() =>
+                column.toggleSorting(column.getIsSorted() === 'asc')
+              }
+              className='text-foreground hover:bg-muted/50 h-auto p-0 font-medium'
+            >
+              Project
+              <ArrowUpDown className='ml-2 h-4 w-4' />
+            </Button>
+          );
+        },
+        cell: ({ row }) => {
+          const project = row.original;
+          const imageUrl = project.logo || project.banner;
+          return (
+            <div className='flex items-center space-x-3'>
+              {imageUrl &&
+                imageUrl !== '' &&
+                !imageUrl.includes('example.com') && (
+                  <Image
+                    width={32}
+                    height={32}
+                    src={imageUrl}
+                    alt={project.title}
+                    className='h-8 w-8 rounded-lg object-cover'
+                    onError={e => {
+                      // Hide the image if it fails to load
+                      e.currentTarget.style.display = 'none';
+                    }}
+                  />
+                )}
+              <div>
+                <div className='text-foreground font-medium'>
+                  {project.title}
+                </div>
+              </div>
+            </div>
+          );
+        },
+      },
+      {
+        accessorKey: 'category',
+        header: ({ column }) => {
+          return (
+            <Button
+              variant='ghost'
+              onClick={() =>
+                column.toggleSorting(column.getIsSorted() === 'asc')
+              }
+              className='text-foreground hover:bg-muted/50 h-auto p-0 font-medium'
+            >
+              Category
+              <ArrowUpDown className='ml-2 h-4 w-4' />
+            </Button>
+          );
+        },
+        cell: ({ row }) => {
+          return (
+            <div className='text-foreground text-sm'>
+              {row.original.category}
+            </div>
+          );
+        },
+      },
+      {
+        accessorKey: 'status',
+        header: ({ column }) => {
+          return (
+            <Button
+              variant='ghost'
+              onClick={() =>
+                column.toggleSorting(column.getIsSorted() === 'asc')
+              }
+              className='text-foreground hover:bg-muted/50 h-auto p-0 font-medium'
+            >
+              Status
+              <ArrowUpDown className='ml-2 h-4 w-4' />
+            </Button>
+          );
+        },
+        cell: ({ row }) => {
+          const status = mapProjectStatus(row.original.status);
+          return (
+            <Badge
+              variant='outline'
+              className={`border text-xs ${getStatusColor(row.original.status)}`}
+            >
+              {status}
+            </Badge>
+          );
+        },
+      },
+      {
+        accessorKey: 'createdAt',
+        header: ({ column }) => {
+          return (
+            <Button
+              variant='ghost'
+              onClick={() =>
+                column.toggleSorting(column.getIsSorted() === 'asc')
+              }
+              className='text-foreground hover:bg-muted/50 h-auto p-0 font-medium'
+            >
+              Created
+              <ArrowUpDown className='ml-2 h-4 w-4' />
+            </Button>
+          );
+        },
+        cell: ({ row }) => {
+          return (
+            <div className='text-muted-foreground text-sm'>
+              {format(new Date(row.original.createdAt), 'MMM dd, yyyy')}
+            </div>
+          );
+        },
+      },
+    ],
+    []
+  );
+
+  const table = useReactTable({
+    data: displayProjects,
+    columns,
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting,
+    },
+  });
+
+  if (displayProjects.length === 0) {
+    return (
+      <Card className='bg-background border-border/10'>
+        <CardHeader>
+          <CardTitle className='flex items-center gap-2 text-white'>
+            <Package className='h-5 w-5' />
+            Recent Projects
+          </CardTitle>
+          <CardDescription className='text-white/70'>
+            Your latest project creations
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className='py-8 text-center text-white/60'>
+            <Package className='mx-auto mb-4 h-12 w-12 opacity-50' />
+            <p>No projects yet</p>
+            <p className='text-sm'>Create your first project to get started!</p>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className='bg-background border-border/10'>
+      <CardHeader>
+        <CardTitle className='flex items-center gap-2 text-white'>
+          <Package className='h-5 w-5' />
+          Recent Projects
+        </CardTitle>
+        <CardDescription className='text-white/70'>
+          Your latest project creations
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className='border-border bg-background rounded-md border'>
+          <Table>
+            <TableHeader>
+              {table.getHeaderGroups().map(headerGroup => (
+                <TableRow
+                  key={headerGroup.id}
+                  className='border-border hover:bg-muted/50'
+                >
+                  {headerGroup.headers.map(header => {
+                    return (
+                      <TableHead key={header.id} className='text-foreground'>
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                      </TableHead>
+                    );
+                  })}
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map(row => (
+                  <TableRow
+                    key={row.id}
+                    className='border-border hover:bg-muted/50'
+                  >
+                    {row.getVisibleCells().map(cell => (
+                      <TableCell key={cell.id} className='text-foreground'>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className='text-muted-foreground h-24 text-center'
+                  >
+                    No projects found.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+
+        {hasMoreProjects && (
+          <div className='pt-4'>
+            <Button asChild variant='outline' className='w-full'>
+              <Link
+                href='/me/projects'
+                className='flex items-center justify-center gap-2 text-white'
+              >
+                View All Projects
+                <ArrowRight className='h-4 w-4' />
+              </Link>
+            </Button>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/section-cards.tsx b/components/section-cards.tsx
new file mode 100644
index 000000000..224b1b48e
--- /dev/null
+++ b/components/section-cards.tsx
@@ -0,0 +1,115 @@
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Package2, Users, Star, Trophy, LucideIcon } from 'lucide-react';
+
+interface StatsData {
+  projectsCreated?: number;
+  followers?: number;
+  reputation?: number;
+  communityScore?: number;
+}
+
+interface CardConfig {
+  title: string;
+  value?: number;
+  icon?: LucideIcon;
+  description?: string;
+}
+
+interface SectionCardsProps {
+  stats?: StatsData;
+  cards?: CardConfig[];
+}
+
+function formatNumber(num?: number): string {
+  if (num === undefined || num === null) return '0';
+  if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
+  if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
+  return num.toLocaleString();
+}
+
+export function SectionCards({ stats, cards }: SectionCardsProps = {}) {
+  if (cards && cards.length > 0) {
+    return (
+      <div className='grid grid-cols-1 gap-4 px-4 lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4'>
+        {cards.map((card, index) => (
+          <DashCard
+            key={index}
+            value={card.value}
+            title={card.title}
+            icon={card.icon}
+            description={card.description}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  const defaultCards: CardConfig[] = [
+    {
+      title: 'Projects Created',
+      value: stats?.projectsCreated,
+      icon: Package2,
+    },
+    {
+      title: 'Followers',
+      value: stats?.followers,
+      icon: Users,
+    },
+    {
+      title: 'Reputation',
+      value: stats?.reputation,
+      icon: Star,
+    },
+    {
+      title: 'Community Score',
+      value: stats?.communityScore,
+      icon: Trophy,
+    },
+  ];
+
+  return (
+    <div className='grid grid-cols-1 gap-4 px-4 lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4'>
+      {defaultCards.map((card, index) => (
+        <DashCard
+          key={index}
+          value={card.value}
+          title={card.title}
+          icon={card.icon}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface DashCardProps {
+  value?: number;
+  title: string;
+  icon?: LucideIcon;
+  description?: string;
+}
+
+function DashCard({
+  value,
+  title,
+  icon: Icon = Package2,
+  description,
+}: DashCardProps) {
+  return (
+    <Card className='bg-background border-border/10 hover:border-primary/30 shadow-primary/10 hover:shadow-primary/10 @container/card border transition-all duration-300 hover:shadow-lg'>
+      <CardHeader>
+        <CardDescription className='flex items-center justify-between text-white/80'>
+          {description || title}
+          {Icon && <Icon size={20} />}
+        </CardDescription>
+        <CardTitle className='text-2xl font-semibold text-white tabular-nums @[250px]/card:text-3xl'>
+          {formatNumber(value)}
+        </CardTitle>
+      </CardHeader>
+    </Card>
+  );
+}
diff --git a/components/site-header.tsx b/components/site-header.tsx
new file mode 100644
index 000000000..e0ea36b41
--- /dev/null
+++ b/components/site-header.tsx
@@ -0,0 +1,24 @@
+import { Separator } from '@/components/ui/separator';
+import { SidebarTrigger } from '@/components/ui/sidebar';
+import { UserMenu } from './user/UserMenu';
+import { SmartBreadcrumb } from './smart-breadcrumb';
+
+export function SiteHeader() {
+  return (
+    <header className='flex h-(--header-height) shrink-0 items-center gap-2 border-none border-white/20 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)'>
+      <div className='flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6'>
+        <SidebarTrigger className='-ml-1 text-white' />
+        <Separator
+          orientation='vertical'
+          className='mx-2 bg-white/30 data-[orientation=vertical]:h-4'
+        />
+        <div className='flex flex-col'>
+          <SmartBreadcrumb />
+        </div>
+        <div className='ml-auto flex items-center gap-2'>
+          <UserMenu />
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/components/smart-breadcrumb.tsx b/components/smart-breadcrumb.tsx
new file mode 100644
index 000000000..d532f949f
--- /dev/null
+++ b/components/smart-breadcrumb.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+
+const routeLabels: Record<string, string> = {
+  dashboard: 'Dashboard',
+  me: 'Profile',
+  projects: 'Projects',
+  hackathons: 'Hackathons',
+  bounties: 'Bounties',
+  organizations: 'Organizations',
+  waitlist: 'Waitlist',
+  auth: 'Authentication',
+  profile: 'Profile',
+  settings: 'Settings',
+  create: 'Create',
+  edit: 'Edit',
+  view: 'View',
+};
+
+function generateBreadcrumbs(pathname: string) {
+  const segments = pathname.split('/').filter(Boolean);
+
+  // Skip dynamic route segments (those with brackets or UUIDs)
+  const filteredSegments = segments.filter(
+    segment =>
+      !segment.includes('[') &&
+      !segment.includes(']') &&
+      !/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(
+        segment
+      ) &&
+      !/^[0-9a-f]{24}$/i.test(segment) // MongoDB ObjectId
+  );
+
+  const breadcrumbs = filteredSegments.map((segment, index) => {
+    const href = '/' + filteredSegments.slice(0, index + 1).join('/');
+    const label =
+      routeLabels[segment] ||
+      segment.charAt(0).toUpperCase() + segment.slice(1);
+    const isLast = index === filteredSegments.length - 1;
+
+    return {
+      href,
+      label,
+      isLast,
+    };
+  });
+
+  return breadcrumbs;
+}
+
+export function SmartBreadcrumb() {
+  const pathname = usePathname();
+
+  // Don't show breadcrumbs on the home page or landing pages
+  if (pathname === '/' || pathname.startsWith('/(landing)')) {
+    return null;
+  }
+
+  const breadcrumbs = generateBreadcrumbs(pathname);
+
+  // If no breadcrumbs to show, return null
+  if (breadcrumbs.length === 0) {
+    return null;
+  }
+
+  return (
+    <Breadcrumb className='text-white/80'>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href='/' className='text-white/60 hover:text-white/80'>
+              Home
+            </Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        {breadcrumbs.map(breadcrumb => (
+          <div key={breadcrumb.href} className='flex items-center'>
+            <BreadcrumbSeparator className='text-white/40' />
+            <BreadcrumbItem>
+              {breadcrumb.isLast ? (
+                <BreadcrumbPage className='font-medium text-white'>
+                  {breadcrumb.label}
+                </BreadcrumbPage>
+              ) : (
+                <BreadcrumbLink asChild>
+                  <Link
+                    href={breadcrumb.href}
+                    className='text-white/60 hover:text-white/80'
+                  >
+                    {breadcrumb.label}
+                  </Link>
+                </BreadcrumbLink>
+              )}
+            </BreadcrumbItem>
+          </div>
+        ))}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}
diff --git a/components/ui/data-table-pagination.tsx b/components/ui/data-table-pagination.tsx
new file mode 100644
index 000000000..18f5e5db2
--- /dev/null
+++ b/components/ui/data-table-pagination.tsx
@@ -0,0 +1,103 @@
+import { type Table } from '@tanstack/react-table';
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>;
+  loading?: boolean;
+}
+
+export function DataTablePagination<TData>({
+  table,
+  loading = false,
+}: DataTablePaginationProps<TData>) {
+  return (
+    <div className='flex items-center justify-between px-2'>
+      <div className='text-muted-foreground flex-1 text-sm'>
+        {table.getFilteredSelectedRowModel().rows.length} of{' '}
+        {table.getFilteredRowModel().rows.length} row(s) selected.
+      </div>
+      <div className='flex items-center space-x-6 lg:space-x-8'>
+        <div className='flex items-center space-x-2'>
+          <p className='text-sm font-medium'>Rows per page</p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={value => {
+              table.setPageSize(Number(value));
+            }}
+          >
+            <SelectTrigger className='h-8 w-[70px]'>
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side='top'>
+              {[10, 20, 25, 30, 40, 50].map(pageSize => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className='flex w-[100px] items-center justify-center text-sm font-medium'>
+          Page {table.getState().pagination.pageIndex + 1} of{' '}
+          {table.getPageCount()}
+        </div>
+        <div className='flex items-center space-x-2'>
+          <Button
+            variant='outline'
+            size='icon'
+            className='hidden size-8 lg:flex'
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage() || loading}
+          >
+            <span className='sr-only'>Go to first page</span>
+            <ChevronsLeft />
+          </Button>
+          <Button
+            variant='outline'
+            size='icon'
+            className='size-8'
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage() || loading}
+          >
+            <span className='sr-only'>Go to previous page</span>
+            <ChevronLeft />
+          </Button>
+          <Button
+            variant='outline'
+            size='icon'
+            className='size-8'
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage() || loading}
+          >
+            <span className='sr-only'>Go to next page</span>
+            <ChevronRight />
+          </Button>
+          <Button
+            variant='outline'
+            size='icon'
+            className='hidden size-8 lg:flex'
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            disabled={!table.getCanNextPage() || loading}
+          >
+            <span className='sr-only'>Go to last page</span>
+            <ChevronsRight />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
index a1ce09b34..16f83d0c8 100644
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -34,10 +34,13 @@ function DropdownMenuTrigger({
 function DropdownMenuContent({
   className,
   sideOffset = 4,
+  container,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content> & {
+  container?: DropdownMenuPrimitive.DropdownMenuPortalProps['container'];
+}) {
   return (
-    <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Portal container={container}>
       <DropdownMenuPrimitive.Content
         data-slot='dropdown-menu-content'
         sideOffset={sideOffset}
diff --git a/components/ui/media-player.tsx b/components/ui/media-player.tsx
new file mode 100644
index 000000000..9ee014e60
--- /dev/null
+++ b/components/ui/media-player.tsx
@@ -0,0 +1,3128 @@
+'use client';
+
+import { useDirection } from '@radix-ui/react-direction';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { Slot } from '@radix-ui/react-slot';
+import {
+  AlertTriangleIcon,
+  CaptionsOffIcon,
+  CheckIcon,
+  DownloadIcon,
+  FastForwardIcon,
+  Loader2Icon,
+  Maximize2Icon,
+  Minimize2Icon,
+  PauseIcon,
+  PictureInPicture2Icon,
+  PictureInPictureIcon,
+  PlayIcon,
+  RefreshCcwIcon,
+  RepeatIcon,
+  RewindIcon,
+  RotateCcwIcon,
+  SettingsIcon,
+  SubtitlesIcon,
+  Volume1Icon,
+  Volume2Icon,
+  VolumeXIcon,
+} from 'lucide-react';
+import {
+  MediaActionTypes,
+  MediaProvider,
+  timeUtils,
+  useMediaDispatch,
+  useMediaFullscreenRef,
+  useMediaRef,
+  useMediaSelector,
+} from 'media-chrome/react/media-store';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { useComposedRefs } from '@/lib/compose-refs';
+import { cn } from '@/lib/utils';
+import { useLazyRef } from '@/hooks/use-lazy-ref';
+
+const ROOT_NAME = 'MediaPlayer';
+const SEEK_NAME = 'MediaPlayerSeek';
+const SETTINGS_NAME = 'MediaPlayerSettings';
+const VOLUME_NAME = 'MediaPlayerVolume';
+const PLAYBACK_SPEED_NAME = 'MediaPlayerPlaybackSpeed';
+
+const FLOATING_MENU_SIDE_OFFSET = 10;
+const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+
+const SEEK_STEP_SHORT = 5;
+const SEEK_STEP_LONG = 10;
+const SEEK_COLLISION_PADDING = 10;
+const SEEK_TOOLTIP_WIDTH_FALLBACK = 240;
+
+const SEEK_HOVER_PERCENT = '--seek-hover-percent';
+const SEEK_TOOLTIP_X = '--seek-tooltip-x';
+const SEEK_TOOLTIP_Y = '--seek-tooltip-y';
+
+const SPRITE_CONTAINER_WIDTH = 224;
+const SPRITE_CONTAINER_HEIGHT = 128;
+
+interface DivProps extends React.ComponentProps<'div'> {
+  asChild?: boolean;
+}
+
+type RootElement = React.ComponentRef<typeof MediaPlayer>;
+
+type Direction = 'ltr' | 'rtl';
+
+interface StoreState {
+  controlsVisible: boolean;
+  dragging: boolean;
+  menuOpen: boolean;
+  volumeIndicatorVisible: boolean;
+}
+
+interface Store {
+  subscribe: (cb: () => void) => () => void;
+  getState: () => StoreState;
+  setState: (
+    key: keyof StoreState,
+    value: StoreState[keyof StoreState]
+  ) => void;
+  notify: () => void;
+}
+
+const StoreContext = React.createContext<Store | null>(null);
+
+function useStoreContext(consumerName: string) {
+  const context = React.useContext(StoreContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+
+function useStore<T>(selector: (state: StoreState) => T): T {
+  const store = useStoreContext('useStore');
+
+  const getSnapshot = React.useCallback(
+    () => selector(store.getState()),
+    [store, selector]
+  );
+
+  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+
+interface MediaPlayerContextValue {
+  mediaId: string;
+  labelId: string;
+  descriptionId: string;
+  dir: Direction;
+  rootRef: React.RefObject<RootElement | null>;
+  mediaRef: React.RefObject<HTMLVideoElement | HTMLAudioElement | null>;
+  portalContainer: Element | DocumentFragment | null;
+  tooltipDelayDuration: number;
+  tooltipSideOffset: number;
+  disabled: boolean;
+  isVideo: boolean;
+  withoutTooltip: boolean;
+}
+
+const MediaPlayerContext = React.createContext<MediaPlayerContextValue | null>(
+  null
+);
+
+function useMediaPlayerContext(consumerName: string) {
+  const context = React.useContext(MediaPlayerContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+
+interface MediaPlayerProps extends Omit<
+  DivProps,
+  'onTimeUpdate' | 'onVolumeChange'
+> {
+  onPlay?: () => void;
+  onPause?: () => void;
+  onEnded?: () => void;
+  onTimeUpdate?: (time: number) => void;
+  onVolumeChange?: (volume: number) => void;
+  onMuted?: (muted: boolean) => void;
+  onMediaError?: (error: MediaError | null) => void;
+  onPipError?: (error: unknown, state: 'enter' | 'exit') => void;
+  onFullscreenChange?: (fullscreen: boolean) => void;
+  dir?: Direction;
+  label?: string;
+  tooltipDelayDuration?: number;
+  tooltipSideOffset?: number;
+  autoHide?: boolean;
+  disabled?: boolean;
+  withoutTooltip?: boolean;
+}
+
+function MediaPlayer(props: MediaPlayerProps) {
+  const listenersRef = useLazyRef(() => new Set<() => void>());
+  const stateRef = useLazyRef<StoreState>(() => ({
+    controlsVisible: true,
+    dragging: false,
+    menuOpen: false,
+    volumeIndicatorVisible: false,
+  }));
+
+  const store: Store = React.useMemo(() => {
+    return {
+      subscribe: cb => {
+        listenersRef.current.add(cb);
+        return () => listenersRef.current.delete(cb);
+      },
+      getState: () => stateRef.current,
+      setState: (key, value) => {
+        if (Object.is(stateRef.current[key], value)) return;
+        stateRef.current[key] = value;
+        store.notify();
+      },
+      notify: () => {
+        for (const cb of listenersRef.current) {
+          cb();
+        }
+      },
+    };
+  }, [listenersRef, stateRef]);
+
+  return (
+    <MediaProvider>
+      <StoreContext.Provider value={store}>
+        <MediaPlayerImpl {...props} />
+      </StoreContext.Provider>
+    </MediaProvider>
+  );
+}
+
+function MediaPlayerImpl(props: MediaPlayerProps) {
+  const {
+    onPlay,
+    onPause,
+    onEnded,
+    onTimeUpdate,
+    onFullscreenChange,
+    onVolumeChange,
+    onMuted,
+    onMediaError,
+    onPipError,
+    dir: dirProp,
+    label,
+    tooltipDelayDuration = 600,
+    tooltipSideOffset = FLOATING_MENU_SIDE_OFFSET,
+    asChild,
+    autoHide = false,
+    disabled = false,
+    withoutTooltip = false,
+    children,
+    className,
+    ref,
+    ...rootImplProps
+  } = props;
+
+  const mediaId = React.useId();
+  const labelId = React.useId();
+  const descriptionId = React.useId();
+
+  const rootRef = React.useRef<RootElement | null>(null);
+  const fullscreenRef = useMediaFullscreenRef();
+  const composedRef = useComposedRefs(ref, rootRef, fullscreenRef);
+
+  const dir = useDirection(dirProp);
+  const dispatch = useMediaDispatch();
+  const mediaRef = React.useRef<HTMLVideoElement | HTMLAudioElement | null>(
+    null
+  );
+
+  const store = useStoreContext(ROOT_NAME);
+
+  const controlsVisible = useStore(state => state.controlsVisible);
+  const dragging = useStore(state => state.dragging);
+  const menuOpen = useStore(state => state.menuOpen);
+
+  const hideControlsTimeoutRef = React.useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null);
+  const lastMouseMoveRef = React.useRef<number>(Date.now());
+  const volumeIndicatorTimeoutRef = React.useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null);
+
+  const mediaPaused = useMediaSelector(state => state.mediaPaused ?? true);
+  const isFullscreen = useMediaSelector(
+    state => state.mediaIsFullscreen ?? false
+  );
+
+  const [mounted, setMounted] = React.useState(false);
+  React.useLayoutEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const portalContainer = mounted
+    ? isFullscreen
+      ? rootRef.current
+      : globalThis.document.body
+    : null;
+
+  const isVideo =
+    (typeof HTMLVideoElement !== 'undefined' &&
+      mediaRef.current instanceof HTMLVideoElement) ||
+    mediaRef.current?.tagName?.toLowerCase() === 'mux-player';
+
+  const onControlsShow = React.useCallback(() => {
+    store.setState('controlsVisible', true);
+    lastMouseMoveRef.current = Date.now();
+
+    if (hideControlsTimeoutRef.current) {
+      clearTimeout(hideControlsTimeoutRef.current);
+    }
+
+    if (autoHide && !mediaPaused && !menuOpen && !dragging) {
+      hideControlsTimeoutRef.current = setTimeout(() => {
+        store.setState('controlsVisible', false);
+      }, 3000);
+    }
+  }, [store.setState, autoHide, mediaPaused, menuOpen, dragging]);
+
+  const onVolumeIndicatorTrigger = React.useCallback(() => {
+    if (menuOpen) return;
+
+    store.setState('volumeIndicatorVisible', true);
+
+    if (volumeIndicatorTimeoutRef.current) {
+      clearTimeout(volumeIndicatorTimeoutRef.current);
+    }
+
+    volumeIndicatorTimeoutRef.current = setTimeout(() => {
+      store.setState('volumeIndicatorVisible', false);
+    }, 2000);
+
+    if (autoHide) {
+      onControlsShow();
+    }
+  }, [store.setState, menuOpen, autoHide, onControlsShow]);
+
+  const onMouseLeave = React.useCallback(
+    (event: React.MouseEvent<RootElement>) => {
+      rootImplProps.onMouseLeave?.(event);
+
+      if (event.defaultPrevented) return;
+
+      if (autoHide && !mediaPaused && !menuOpen && !dragging) {
+        store.setState('controlsVisible', false);
+      }
+    },
+    [
+      store.setState,
+      rootImplProps.onMouseLeave,
+      autoHide,
+      mediaPaused,
+      menuOpen,
+      dragging,
+    ]
+  );
+
+  const onMouseMove = React.useCallback(
+    (event: React.MouseEvent<RootElement>) => {
+      rootImplProps.onMouseMove?.(event);
+
+      if (event.defaultPrevented) return;
+
+      if (autoHide) {
+        onControlsShow();
+      }
+    },
+    [autoHide, rootImplProps.onMouseMove, onControlsShow]
+  );
+
+  React.useEffect(() => {
+    if (mediaPaused || menuOpen || dragging) {
+      store.setState('controlsVisible', true);
+      if (hideControlsTimeoutRef.current) {
+        clearTimeout(hideControlsTimeoutRef.current);
+      }
+      return;
+    }
+
+    if (autoHide) {
+      onControlsShow();
+    }
+  }, [
+    store.setState,
+    onControlsShow,
+    autoHide,
+    menuOpen,
+    mediaPaused,
+    dragging,
+  ]);
+
+  const onKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<RootElement>) => {
+      if (disabled) return;
+
+      rootImplProps.onKeyDown?.(event);
+
+      if (event.defaultPrevented) return;
+
+      const mediaElement = mediaRef.current;
+      if (!mediaElement) return;
+
+      const isMediaFocused = document.activeElement === mediaElement;
+      const isPlayerFocused =
+        document.activeElement?.closest('[data-slot="media-player"]') !== null;
+
+      if (!isMediaFocused && !isPlayerFocused) return;
+
+      if (autoHide) onControlsShow();
+
+      switch (event.key.toLowerCase()) {
+        case ' ':
+        case 'k':
+          event.preventDefault();
+          dispatch({
+            type: mediaElement.paused
+              ? MediaActionTypes.MEDIA_PLAY_REQUEST
+              : MediaActionTypes.MEDIA_PAUSE_REQUEST,
+          });
+          break;
+
+        case 'f':
+          event.preventDefault();
+          dispatch({
+            type: document.fullscreenElement
+              ? MediaActionTypes.MEDIA_EXIT_FULLSCREEN_REQUEST
+              : MediaActionTypes.MEDIA_ENTER_FULLSCREEN_REQUEST,
+          });
+          break;
+
+        case 'm': {
+          event.preventDefault();
+          if (isVideo) {
+            onVolumeIndicatorTrigger();
+          }
+          dispatch({
+            type: mediaElement.muted
+              ? MediaActionTypes.MEDIA_UNMUTE_REQUEST
+              : MediaActionTypes.MEDIA_MUTE_REQUEST,
+          });
+          break;
+        }
+
+        case 'arrowright':
+          event.preventDefault();
+          if (
+            isVideo ||
+            (mediaElement instanceof HTMLAudioElement && event.shiftKey)
+          ) {
+            dispatch({
+              type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+              detail: Math.min(
+                mediaElement.duration,
+                mediaElement.currentTime + SEEK_STEP_SHORT
+              ),
+            });
+          }
+          break;
+
+        case 'arrowleft':
+          event.preventDefault();
+          if (
+            isVideo ||
+            (mediaElement instanceof HTMLAudioElement && event.shiftKey)
+          ) {
+            dispatch({
+              type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+              detail: Math.max(0, mediaElement.currentTime - SEEK_STEP_SHORT),
+            });
+          }
+          break;
+
+        case 'arrowup':
+          event.preventDefault();
+          if (isVideo) {
+            onVolumeIndicatorTrigger();
+            dispatch({
+              type: MediaActionTypes.MEDIA_VOLUME_REQUEST,
+              detail: Math.min(1, mediaElement.volume + 0.1),
+            });
+          }
+          break;
+
+        case 'arrowdown':
+          event.preventDefault();
+          if (isVideo) {
+            onVolumeIndicatorTrigger();
+            dispatch({
+              type: MediaActionTypes.MEDIA_VOLUME_REQUEST,
+              detail: Math.max(0, mediaElement.volume - 0.1),
+            });
+          }
+          break;
+
+        case '<': {
+          event.preventDefault();
+          const currentRate = mediaElement.playbackRate;
+          const currentIndex = SPEEDS.indexOf(currentRate);
+          const newIndex = Math.max(0, currentIndex - 1);
+          const newRate = SPEEDS[newIndex] ?? 1;
+          dispatch({
+            type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,
+            detail: newRate,
+          });
+          break;
+        }
+
+        case '>': {
+          event.preventDefault();
+          const currentRate = mediaElement.playbackRate;
+          const currentIndex = SPEEDS.indexOf(currentRate);
+          const newIndex = Math.min(SPEEDS.length - 1, currentIndex + 1);
+          const newRate = SPEEDS[newIndex] ?? 1;
+          dispatch({
+            type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,
+            detail: newRate,
+          });
+          break;
+        }
+
+        case 'c':
+          event.preventDefault();
+          if (isVideo && mediaElement.textTracks.length > 0) {
+            dispatch({
+              type: MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST,
+            });
+          }
+          break;
+
+        case 'd': {
+          const hasDownload = mediaElement.querySelector(
+            '[data-slot="media-player-download"]'
+          );
+
+          if (!hasDownload) break;
+
+          event.preventDefault();
+          if (mediaElement.currentSrc) {
+            const link = document.createElement('a');
+            link.href = mediaElement.currentSrc;
+            link.download = '';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+          }
+          break;
+        }
+
+        case 'p': {
+          event.preventDefault();
+          if (isVideo && 'requestPictureInPicture' in mediaElement) {
+            const isPip = document.pictureInPictureElement === mediaElement;
+            dispatch({
+              type: isPip
+                ? MediaActionTypes.MEDIA_EXIT_PIP_REQUEST
+                : MediaActionTypes.MEDIA_ENTER_PIP_REQUEST,
+            });
+            if (isPip) {
+              document.exitPictureInPicture().catch(error => {
+                onPipError?.(error, 'exit');
+              });
+            } else {
+              mediaElement.requestPictureInPicture().catch(error => {
+                onPipError?.(error, 'enter');
+              });
+            }
+          }
+          break;
+        }
+
+        case 'r': {
+          event.preventDefault();
+          mediaElement.loop = !mediaElement.loop;
+          break;
+        }
+
+        case 'j': {
+          event.preventDefault();
+          dispatch({
+            type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+            detail: Math.max(0, mediaElement.currentTime - SEEK_STEP_LONG),
+          });
+          break;
+        }
+
+        case 'l': {
+          event.preventDefault();
+          dispatch({
+            type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+            detail: Math.min(
+              mediaElement.duration,
+              mediaElement.currentTime + SEEK_STEP_LONG
+            ),
+          });
+          break;
+        }
+
+        case '0':
+        case '1':
+        case '2':
+        case '3':
+        case '4':
+        case '5':
+        case '6':
+        case '7':
+        case '8':
+        case '9': {
+          event.preventDefault();
+          const percent = Number.parseInt(event.key, 10) / 10;
+          const seekTime = mediaElement.duration * percent;
+          dispatch({
+            type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+            detail: seekTime,
+          });
+          break;
+        }
+
+        case 'home': {
+          event.preventDefault();
+          dispatch({
+            type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+            detail: 0,
+          });
+          break;
+        }
+
+        case 'end': {
+          event.preventDefault();
+          dispatch({
+            type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+            detail: mediaElement.duration,
+          });
+          break;
+        }
+      }
+    },
+    [
+      dispatch,
+      rootImplProps.onKeyDown,
+      onVolumeIndicatorTrigger,
+      onPipError,
+      disabled,
+      isVideo,
+      onControlsShow,
+      autoHide,
+    ]
+  );
+
+  const onKeyUp = React.useCallback(
+    (event: React.KeyboardEvent<RootElement>) => {
+      rootImplProps.onKeyUp?.(event);
+
+      const key = event.key.toLowerCase();
+      if (key === 'arrowup' || key === 'arrowdown' || key === 'm') {
+        onVolumeIndicatorTrigger();
+      }
+    },
+    [rootImplProps.onKeyUp, onVolumeIndicatorTrigger]
+  );
+
+  React.useEffect(() => {
+    const mediaElement = mediaRef.current;
+    if (!mediaElement) return;
+
+    if (onPlay) mediaElement.addEventListener('play', onPlay);
+    if (onPause) mediaElement.addEventListener('pause', onPause);
+    if (onEnded) mediaElement.addEventListener('ended', onEnded);
+    if (onTimeUpdate)
+      mediaElement.addEventListener('timeupdate', () =>
+        onTimeUpdate?.(mediaElement.currentTime)
+      );
+    if (onVolumeChange)
+      mediaElement.addEventListener('volumechange', () => {
+        onVolumeChange?.(mediaElement.volume);
+        onMuted?.(mediaElement.muted);
+      });
+    if (onMediaError)
+      mediaElement.addEventListener('error', () =>
+        onMediaError?.(mediaElement.error)
+      );
+    if (onFullscreenChange) {
+      document.addEventListener('fullscreenchange', () =>
+        onFullscreenChange?.(!!document.fullscreenElement)
+      );
+    }
+
+    return () => {
+      if (onPlay) mediaElement.removeEventListener('play', onPlay);
+      if (onPause) mediaElement.removeEventListener('pause', onPause);
+      if (onEnded) mediaElement.removeEventListener('ended', onEnded);
+      if (onTimeUpdate)
+        mediaElement.removeEventListener('timeupdate', () =>
+          onTimeUpdate?.(mediaElement.currentTime)
+        );
+      if (onVolumeChange)
+        mediaElement.removeEventListener('volumechange', () => {
+          onVolumeChange?.(mediaElement.volume);
+          onMuted?.(mediaElement.muted);
+        });
+      if (onMediaError)
+        mediaElement.removeEventListener('error', () =>
+          onMediaError?.(mediaElement.error)
+        );
+      if (onFullscreenChange) {
+        document.removeEventListener('fullscreenchange', () =>
+          onFullscreenChange?.(!!document.fullscreenElement)
+        );
+      }
+      if (volumeIndicatorTimeoutRef.current) {
+        clearTimeout(volumeIndicatorTimeoutRef.current);
+      }
+      if (hideControlsTimeoutRef.current) {
+        clearTimeout(hideControlsTimeoutRef.current);
+      }
+    };
+  }, [
+    onPlay,
+    onPause,
+    onEnded,
+    onTimeUpdate,
+    onVolumeChange,
+    onMuted,
+    onMediaError,
+    onFullscreenChange,
+  ]);
+
+  const contextValue = React.useMemo<MediaPlayerContextValue>(
+    () => ({
+      mediaId,
+      labelId,
+      descriptionId,
+      dir,
+      rootRef,
+      mediaRef,
+      portalContainer,
+      tooltipDelayDuration,
+      tooltipSideOffset,
+      disabled,
+      isVideo,
+      withoutTooltip,
+    }),
+    [
+      mediaId,
+      labelId,
+      descriptionId,
+      dir,
+      portalContainer,
+      tooltipDelayDuration,
+      tooltipSideOffset,
+      disabled,
+      isVideo,
+      withoutTooltip,
+    ]
+  );
+
+  const RootPrimitive = asChild ? Slot : 'div';
+
+  return (
+    <MediaPlayerContext.Provider value={contextValue}>
+      <RootPrimitive
+        aria-labelledby={labelId}
+        aria-describedby={descriptionId}
+        aria-disabled={disabled}
+        data-disabled={disabled ? '' : undefined}
+        data-controls-visible={controlsVisible ? '' : undefined}
+        data-slot='media-player'
+        data-state={isFullscreen ? 'fullscreen' : 'windowed'}
+        dir={dir}
+        tabIndex={disabled ? undefined : 0}
+        {...rootImplProps}
+        ref={composedRef}
+        onMouseLeave={onMouseLeave}
+        onMouseMove={onMouseMove}
+        onKeyDown={onKeyDown}
+        onKeyUp={onKeyUp}
+        className={cn(
+          'dark bg-background focus-visible:border-ring focus-visible:ring-ring/50 relative isolate flex flex-col overflow-hidden rounded-lg outline-none focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-50 [&_video]:relative [&_video]:object-contain',
+          'in-[:fullscreen]:flex in-[:fullscreen]:h-full in-[:fullscreen]:max-h-screen in-[:fullscreen]:flex-col in-[:fullscreen]:justify-between data-[state=fullscreen]:[&_video]:size-full',
+          "**:data-slider:relative [&_[data-slider]::before]:absolute [&_[data-slider]::before]:inset-x-0 [&_[data-slider]::before]:-top-4 [&_[data-slider]::before]:-bottom-2 [&_[data-slider]::before]:z-10 [&_[data-slider]::before]:h-8 [&_[data-slider]::before]:cursor-pointer [&_[data-slider]::before]:content-[''] [&_[data-slot='media-player-seek']:not([data-hovering])::before]:cursor-default",
+          '[&_video::-webkit-media-text-track-display]:top-auto! [&_video::-webkit-media-text-track-display]:bottom-[4%]! [&_video::-webkit-media-text-track-display]:mb-0! data-controls-visible:[&_video::-webkit-media-text-track-display]:bottom-[13%]! data-[state=fullscreen]:[&_video::-webkit-media-text-track-display]:bottom-[7%]! data-[state=fullscreen]:data-controls-visible:[&_video::-webkit-media-text-track-display]:bottom-[9%]!',
+          className
+        )}
+      >
+        <span id={labelId} className='sr-only'>
+          {label ?? 'Media player'}
+        </span>
+        <span id={descriptionId} className='sr-only'>
+          {isVideo
+            ? 'Video player with custom controls for playback, volume, seeking, and more. Use space bar to play/pause, arrow keys (←/→) to seek, and arrow keys (↑/↓) to adjust volume.'
+            : 'Audio player with custom controls for playback, volume, seeking, and more. Use space bar to play/pause, Shift + arrow keys (←/→) to seek, and arrow keys (↑/↓) to adjust volume.'}
+        </span>
+        {children}
+        <MediaPlayerVolumeIndicator />
+      </RootPrimitive>
+    </MediaPlayerContext.Provider>
+  );
+}
+
+interface MediaPlayerVideoProps extends React.ComponentProps<'video'> {
+  asChild?: boolean;
+}
+
+function MediaPlayerVideo(props: MediaPlayerVideoProps) {
+  const { asChild, ref, ...videoProps } = props;
+
+  const context = useMediaPlayerContext('MediaPlayerVideo');
+  const dispatch = useMediaDispatch();
+  const mediaRefCallback = useMediaRef();
+  const composedRef = useComposedRefs(ref, context.mediaRef, mediaRefCallback);
+
+  const onPlayToggle = React.useCallback(
+    (event: React.MouseEvent<HTMLVideoElement>) => {
+      props.onClick?.(event);
+
+      if (event.defaultPrevented) return;
+
+      const mediaElement = event.currentTarget;
+      if (!mediaElement) return;
+
+      dispatch({
+        type: mediaElement.paused
+          ? MediaActionTypes.MEDIA_PLAY_REQUEST
+          : MediaActionTypes.MEDIA_PAUSE_REQUEST,
+      });
+    },
+    [dispatch, props.onClick]
+  );
+
+  const VideoPrimitive = asChild ? Slot : 'video';
+
+  return (
+    <VideoPrimitive
+      aria-describedby={context.descriptionId}
+      aria-labelledby={context.labelId}
+      data-slot='media-player-video'
+      {...videoProps}
+      id={context.mediaId}
+      ref={composedRef}
+      onClick={onPlayToggle}
+    />
+  );
+}
+
+interface MediaPlayerAudioProps extends React.ComponentProps<'audio'> {
+  asChild?: boolean;
+}
+
+function MediaPlayerAudio(props: MediaPlayerAudioProps) {
+  const { asChild, ref, ...audioProps } = props;
+
+  const context = useMediaPlayerContext('MediaPlayerAudio');
+  const mediaRefCallback = useMediaRef();
+  const composedRef = useComposedRefs(ref, context.mediaRef, mediaRefCallback);
+
+  const AudioPrimitive = asChild ? Slot : 'audio';
+
+  return (
+    <AudioPrimitive
+      aria-describedby={context.descriptionId}
+      aria-labelledby={context.labelId}
+      data-slot='media-player-audio'
+      {...audioProps}
+      id={context.mediaId}
+      ref={composedRef}
+    />
+  );
+}
+
+function MediaPlayerControls(props: DivProps) {
+  const { asChild, className, ...controlsProps } = props;
+
+  const context = useMediaPlayerContext('MediaPlayerControls');
+  const isFullscreen = useMediaSelector(
+    state => state.mediaIsFullscreen ?? false
+  );
+  const controlsVisible = useStore(state => state.controlsVisible);
+
+  const ControlsPrimitive = asChild ? Slot : 'div';
+
+  return (
+    <ControlsPrimitive
+      data-disabled={context.disabled ? '' : undefined}
+      data-slot='media-player-controls'
+      data-state={isFullscreen ? 'fullscreen' : 'windowed'}
+      data-visible={controlsVisible ? '' : undefined}
+      dir={context.dir}
+      className={cn(
+        'dark pointer-events-none absolute right-0 bottom-0 left-0 z-50 flex items-center gap-2 px-4 py-3 opacity-0 transition-opacity duration-200 in-[:fullscreen]:px-6 in-[:fullscreen]:py-4 data-visible:pointer-events-auto data-visible:opacity-100',
+        className
+      )}
+      {...controlsProps}
+    />
+  );
+}
+
+interface MediaPlayerLoadingProps extends DivProps {
+  delayMs?: number;
+}
+
+function MediaPlayerLoading(props: MediaPlayerLoadingProps) {
+  const {
+    delayMs = 500,
+    asChild,
+    className,
+    children,
+    ...loadingProps
+  } = props;
+
+  const isLoading = useMediaSelector(state => state.mediaLoading ?? false);
+  const isPaused = useMediaSelector(state => state.mediaPaused ?? true);
+  const hasPlayed = useMediaSelector(state => state.mediaHasPlayed ?? false);
+
+  const shouldShowLoading = isLoading && !isPaused;
+  const shouldUseDelay = hasPlayed && shouldShowLoading;
+  const loadingDelayMs = shouldUseDelay ? delayMs : 0;
+
+  const [shouldRender, setShouldRender] = React.useState(false);
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  React.useEffect(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+
+    if (shouldShowLoading) {
+      if (loadingDelayMs > 0) {
+        timeoutRef.current = setTimeout(() => {
+          setShouldRender(true);
+          timeoutRef.current = null;
+        }, loadingDelayMs);
+      } else {
+        setShouldRender(true);
+      }
+    } else {
+      setShouldRender(false);
+    }
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, [shouldShowLoading, loadingDelayMs]);
+
+  if (!shouldRender) return null;
+
+  const LoadingPrimitive = asChild ? Slot : 'div';
+
+  return (
+    <LoadingPrimitive
+      role='status'
+      aria-live='polite'
+      data-slot='media-player-loading'
+      {...loadingProps}
+      className={cn(
+        'fade-in-0 zoom-in-95 animate-in pointer-events-none absolute inset-0 z-50 flex items-center justify-center duration-200',
+        className
+      )}
+    >
+      {children ?? (
+        <Loader2Icon className='text-primary size-20 animate-spin stroke-[.0938rem]' />
+      )}
+    </LoadingPrimitive>
+  );
+}
+
+interface MediaPlayerErrorProps extends DivProps {
+  error?: MediaError | null;
+  label?: string;
+  description?: string;
+  onRetry?: () => void;
+  onReload?: () => void;
+  asChild?: boolean;
+}
+
+function MediaPlayerError(props: MediaPlayerErrorProps) {
+  const {
+    error: errorProp,
+    label,
+    description,
+    onRetry: onRetryProp,
+    onReload: onReloadProp,
+    asChild,
+    className,
+    children,
+    ...errorProps
+  } = props;
+
+  const context = useMediaPlayerContext('MediaPlayerError');
+  const isFullscreen = useMediaSelector(
+    state => state.mediaIsFullscreen ?? false
+  );
+  const mediaError = useMediaSelector(state => state.mediaError);
+
+  const error = errorProp ?? mediaError;
+
+  const labelId = React.useId();
+  const descriptionId = React.useId();
+
+  const [actionState, setActionState] = React.useState<{
+    retryPending: boolean;
+    reloadPending: boolean;
+  }>({
+    retryPending: false,
+    reloadPending: false,
+  });
+
+  const onRetry = React.useCallback(() => {
+    setActionState(prev => ({ ...prev, retryPending: true }));
+
+    requestAnimationFrame(() => {
+      const mediaElement = context.mediaRef.current;
+      if (!mediaElement) {
+        setActionState(prev => ({ ...prev, retryPending: false }));
+        return;
+      }
+
+      if (onRetryProp) {
+        onRetryProp();
+      } else {
+        const currentSrc = mediaElement.currentSrc ?? mediaElement.src;
+        if (currentSrc) {
+          mediaElement.load();
+        }
+      }
+
+      setActionState(prev => ({ ...prev, retryPending: false }));
+    });
+  }, [context.mediaRef, onRetryProp]);
+
+  const onReload = React.useCallback(() => {
+    setActionState(prev => ({ ...prev, reloadPending: true }));
+
+    requestAnimationFrame(() => {
+      if (onReloadProp) {
+        onReloadProp();
+      } else {
+        window.location.reload();
+      }
+    });
+  }, [onReloadProp]);
+
+  const errorLabel = React.useMemo(() => {
+    if (label) return label;
+
+    if (!error) return 'Playback Error';
+
+    const labelMap: Record<number, string> = {
+      [MediaError.MEDIA_ERR_ABORTED]: 'Playback Interrupted',
+      [MediaError.MEDIA_ERR_NETWORK]: 'Connection Problem',
+      [MediaError.MEDIA_ERR_DECODE]: 'Media Error',
+      [MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED]: 'Unsupported Format',
+    };
+
+    return labelMap[error.code] ?? 'Playback Error';
+  }, [label, error]);
+
+  const errorDescription = React.useMemo(() => {
+    if (description) return description;
+
+    if (!error) return 'An unknown error occurred';
+
+    const descriptionMap: Record<number, string> = {
+      [MediaError.MEDIA_ERR_ABORTED]: 'Media playback was aborted',
+      [MediaError.MEDIA_ERR_NETWORK]:
+        'A network error occurred while loading the media',
+      [MediaError.MEDIA_ERR_DECODE]:
+        'An error occurred while decoding the media',
+      [MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED]:
+        'The media format is not supported',
+    };
+
+    return descriptionMap[error.code] ?? 'An unknown error occurred';
+  }, [description, error]);
+
+  if (!error) return null;
+
+  const ErrorPrimitive = asChild ? Slot : 'div';
+
+  return (
+    <ErrorPrimitive
+      role='alert'
+      aria-describedby={descriptionId}
+      aria-labelledby={labelId}
+      aria-live='assertive'
+      data-slot='media-player-error'
+      data-state={isFullscreen ? 'fullscreen' : 'windowed'}
+      {...errorProps}
+      className={cn(
+        'pointer-events-auto absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/80 text-white backdrop-blur-sm',
+        className
+      )}
+    >
+      {children ?? (
+        <div className='flex max-w-md flex-col items-center gap-4 px-6 py-8 text-center'>
+          <AlertTriangleIcon className='text-destructive size-12' />
+          <div className='flex flex-col gap-px text-center'>
+            <h3 className='text-xl font-semibold tracking-tight'>
+              {errorLabel}
+            </h3>
+            <p className='text-muted-foreground text-sm leading-relaxed text-balance'>
+              {errorDescription}
+            </p>
+          </div>
+          <div className='flex items-center gap-2'>
+            <Button
+              variant='secondary'
+              size='sm'
+              onClick={onRetry}
+              disabled={actionState.retryPending}
+            >
+              {actionState.retryPending ? (
+                <Loader2Icon className='animate-spin' />
+              ) : (
+                <RefreshCcwIcon />
+              )}
+              Try again
+            </Button>
+            <Button
+              variant='outline'
+              size='sm'
+              onClick={onReload}
+              disabled={actionState.reloadPending}
+            >
+              {actionState.reloadPending ? (
+                <Loader2Icon className='animate-spin' />
+              ) : (
+                <RotateCcwIcon />
+              )}
+              Reload page
+            </Button>
+          </div>
+        </div>
+      )}
+    </ErrorPrimitive>
+  );
+}
+
+function MediaPlayerVolumeIndicator(props: DivProps) {
+  const { asChild, className, ...indicatorProps } = props;
+
+  const mediaVolume = useMediaSelector(state => state.mediaVolume ?? 1);
+  const mediaMuted = useMediaSelector(state => state.mediaMuted ?? false);
+  const mediaVolumeLevel = useMediaSelector(
+    state => state.mediaVolumeLevel ?? 'high'
+  );
+  const volumeIndicatorVisible = useStore(
+    state => state.volumeIndicatorVisible
+  );
+
+  if (!volumeIndicatorVisible) return null;
+
+  const effectiveVolume = mediaMuted ? 0 : mediaVolume;
+  const volumePercentage = Math.round(effectiveVolume * 100);
+  const barCount = 10;
+  const activeBarCount = Math.ceil(effectiveVolume * barCount);
+
+  const VolumeIndicatorPrimitive = asChild ? Slot : 'div';
+
+  return (
+    <VolumeIndicatorPrimitive
+      role='status'
+      aria-live='polite'
+      aria-label={`Volume ${mediaMuted ? 'muted' : `${volumePercentage}%`}`}
+      data-slot='media-player-volume-indicator'
+      {...indicatorProps}
+      className={cn(
+        'pointer-events-none absolute inset-0 z-50 flex items-center justify-center',
+        className
+      )}
+    >
+      <div className='fade-in-0 zoom-in-95 animate-in flex flex-col items-center gap-3 rounded-lg bg-black/30 px-6 py-4 text-white backdrop-blur-xs duration-200'>
+        <div className='flex items-center gap-2'>
+          {mediaVolumeLevel === 'off' || mediaMuted ? (
+            <VolumeXIcon className='size-6' />
+          ) : mediaVolumeLevel === 'high' ? (
+            <Volume2Icon className='size-6' />
+          ) : (
+            <Volume1Icon className='size-6' />
+          )}
+          <span className='text-sm font-medium tabular-nums'>
+            {mediaMuted ? 'Muted' : `${volumePercentage}%`}
+          </span>
+        </div>
+        <div className='flex items-center gap-1'>
+          {Array.from({ length: barCount }, (_, index) => (
+            <div
+              key={index}
+              className={cn(
+                'w-1.5 rounded-full transition-all duration-150',
+                index < activeBarCount && !mediaMuted
+                  ? 'scale-100 bg-white'
+                  : 'scale-90 bg-white/30'
+              )}
+              style={{
+                height: `${12 + index * 2}px`,
+                animationDelay: `${index * 50}ms`,
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </VolumeIndicatorPrimitive>
+  );
+}
+
+function MediaPlayerControlsOverlay(props: DivProps) {
+  const { asChild, className, ...overlayProps } = props;
+
+  const isFullscreen = useMediaSelector(
+    state => state.mediaIsFullscreen ?? false
+  );
+  const controlsVisible = useStore(state => state.controlsVisible);
+
+  const OverlayPrimitive = asChild ? Slot : 'div';
+
+  return (
+    <OverlayPrimitive
+      data-slot='media-player-controls-overlay'
+      data-state={isFullscreen ? 'fullscreen' : 'windowed'}
+      data-visible={controlsVisible ? '' : undefined}
+      {...overlayProps}
+      className={cn(
+        'pointer-events-none absolute inset-0 -z-10 bg-linear-to-t from-black/80 to-transparent opacity-0 transition-opacity duration-200 data-visible:opacity-100',
+        className
+      )}
+    />
+  );
+}
+
+function MediaPlayerPlay(props: React.ComponentProps<typeof Button>) {
+  const { children, className, disabled, ...playButtonProps } = props;
+
+  const context = useMediaPlayerContext('MediaPlayerPlay');
+  const dispatch = useMediaDispatch();
+  const mediaPaused = useMediaSelector(state => state.mediaPaused ?? true);
+
+  const isDisabled = disabled || context.disabled;
+
+  const onPlayToggle = React.useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      props.onClick?.(event);
+
+      if (event.defaultPrevented) return;
+
+      dispatch({
+        type: mediaPaused
+          ? MediaActionTypes.MEDIA_PLAY_REQUEST
+          : MediaActionTypes.MEDIA_PAUSE_REQUEST,
+      });
+    },
+    [dispatch, props.onClick, mediaPaused]
+  );
+
+  return (
+    <MediaPlayerTooltip
+      tooltip={mediaPaused ? 'Play' : 'Pause'}
+      shortcut='Space'
+    >
+      <Button
+        type='button'
+        aria-controls={context.mediaId}
+        aria-label={mediaPaused ? 'Play' : 'Pause'}
+        aria-pressed={!mediaPaused}
+        data-disabled={isDisabled ? '' : undefined}
+        data-slot='media-player-play-button'
+        data-state={mediaPaused ? 'off' : 'on'}
+        disabled={isDisabled}
+        {...playButtonProps}
+        variant='ghost'
+        size='icon'
+        className={cn(
+          "size-8 [&_svg:not([class*='fill-'])]:fill-current",
+          className
+        )}
+        onClick={onPlayToggle}
+      >
+        {children ?? (mediaPaused ? <PlayIcon /> : <PauseIcon />)}
+      </Button>
+    </MediaPlayerTooltip>
+  );
+}
+
+interface MediaPlayerSeekBackwardProps extends React.ComponentProps<
+  typeof Button
+> {
+  seconds?: number;
+}
+
+function MediaPlayerSeekBackward(props: MediaPlayerSeekBackwardProps) {
+  const {
+    seconds = SEEK_STEP_SHORT,
+    children,
+    className,
+    disabled,
+    ...seekBackwardProps
+  } = props;
+
+  const context = useMediaPlayerContext('MediaPlayerSeekBackward');
+  const dispatch = useMediaDispatch();
+  const mediaCurrentTime = useMediaSelector(
+    state => state.mediaCurrentTime ?? 0
+  );
+
+  const isDisabled = disabled || context.disabled;
+
+  const onSeekBackward = React.useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      props.onClick?.(event);
+
+      if (event.defaultPrevented) return;
+
+      dispatch({
+        type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+        detail: Math.max(0, mediaCurrentTime - seconds),
+      });
+    },
+    [dispatch, props.onClick, mediaCurrentTime, seconds]
+  );
+
+  return (
+    <MediaPlayerTooltip
+      tooltip={`Back ${seconds}s`}
+      shortcut={context.isVideo ? ['←'] : ['Shift ←']}
+    >
+      <Button
+        type='button'
+        aria-controls={context.mediaId}
+        aria-label={`Back ${seconds} seconds`}
+        data-disabled={isDisabled ? '' : undefined}
+        data-slot='media-player-seek-backward'
+        disabled={isDisabled}
+        {...seekBackwardProps}
+        variant='ghost'
+        size='icon'
+        className={cn('size-8', className)}
+        onClick={onSeekBackward}
+      >
+        {children ?? <RewindIcon />}
+      </Button>
+    </MediaPlayerTooltip>
+  );
+}
+
+interface MediaPlayerSeekForwardProps extends React.ComponentProps<
+  typeof Button
+> {
+  seconds?: number;
+}
+
+function MediaPlayerSeekForward(props: MediaPlayerSeekForwardProps) {
+  const {
+    seconds = SEEK_STEP_LONG,
+    children,
+    className,
+    disabled,
+    ...seekForwardProps
+  } = props;
+
+  const context = useMediaPlayerContext('MediaPlayerSeekForward');
+  const dispatch = useMediaDispatch();
+  const mediaCurrentTime = useMediaSelector(
+    state => state.mediaCurrentTime ?? 0
+  );
+  const [, seekableEnd] = useMediaSelector(
+    state => state.mediaSeekable ?? [0, 0]
+  );
+  const isDisabled = disabled || context.disabled;
+
+  const onSeekForward = React.useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      props.onClick?.(event);
+
+      if (event.defaultPrevented) return;
+
+      dispatch({
+        type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+        detail: Math.min(
+          seekableEnd ?? Number.POSITIVE_INFINITY,
+          mediaCurrentTime + seconds
+        ),
+      });
+    },
+    [dispatch, props.onClick, mediaCurrentTime, seekableEnd, seconds]
+  );
+
+  return (
+    <MediaPlayerTooltip
+      tooltip={`Forward ${seconds}s`}
+      shortcut={context.isVideo ? ['→'] : ['Shift →']}
+    >
+      <Button
+        type='button'
+        aria-controls={context.mediaId}
+        aria-label={`Forward ${seconds} seconds`}
+        data-disabled={isDisabled ? '' : undefined}
+        data-slot='media-player-seek-forward'
+        disabled={isDisabled}
+        {...seekForwardProps}
+        variant='ghost'
+        size='icon'
+        className={cn('size-8', className)}
+        onClick={onSeekForward}
+      >
+        {children ?? <FastForwardIcon />}
+      </Button>
+    </MediaPlayerTooltip>
+  );
+}
+
+interface SeekState {
+  isHovering: boolean;
+  pendingSeekTime: number | null;
+  hasInitialPosition: boolean;
+}
+
+interface MediaPlayerSeekProps extends React.ComponentProps<
+  typeof SliderPrimitive.Root
+> {
+  withTime?: boolean;
+  withoutChapter?: boolean;
+  withoutTooltip?: boolean;
+  tooltipThumbnailSrc?: string | ((time: number) => string);
+  tooltipTimeVariant?: 'current' | 'progress';
+  tooltipSideOffset?: number;
+  tooltipCollisionBoundary?: Element | Element[];
+  tooltipCollisionPadding?:
+    | number
+    | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>;
+}
+
+function MediaPlayerSeek(props: MediaPlayerSeekProps) {
+  const {
+    withTime = false,
+    withoutChapter = false,
+    withoutTooltip = false,
+    tooltipTimeVariant = 'current',
+    tooltipThumbnailSrc,
+    tooltipSideOffset,
+    tooltipCollisionPadding = SEEK_COLLISION_PADDING,
+    tooltipCollisionBoundary,
+    className,
+    disabled,
+    ...seekProps
+  } = props;
+
+  const context = useMediaPlayerContext(SEEK_NAME);
+  const store = useStoreContext(SEEK_NAME);
+  const dispatch = useMediaDispatch();
+  const mediaCurrentTime = useMediaSelector(
+    state => state.mediaCurrentTime ?? 0
+  );
+  const [seekableStart = 0, seekableEnd = 0] = useMediaSelector(
+    state => state.mediaSeekable ?? [0, 0]
+  );
+  const mediaBuffered = useMediaSelector(state => state.mediaBuffered ?? []);
+  const mediaEnded = useMediaSelector(state => state.mediaEnded ?? false);
+
+  const chapterCues = useMediaSelector(state => state.mediaChaptersCues ?? []);
+  const mediaPreviewTime = useMediaSelector(state => state.mediaPreviewTime);
+  const mediaPreviewImage = useMediaSelector(state => state.mediaPreviewImage);
+  const mediaPreviewCoords = useMediaSelector(
+    state => state.mediaPreviewCoords
+  );
+
+  const seekRef = React.useRef<HTMLDivElement>(null);
+  const tooltipRef = React.useRef<HTMLDivElement>(null);
+  const justCommittedRef = React.useRef<boolean>(false);
+
+  const hoverTimeRef = React.useRef(0);
+  const tooltipXRef = React.useRef(0);
+  const tooltipYRef = React.useRef(0);
+  const seekRectRef = React.useRef<DOMRect | null>(null);
+  const collisionDataRef = React.useRef<{
+    padding: { top: number; right: number; bottom: number; left: number };
+    boundaries: Element[];
+  } | null>(null);
+
+  const [seekState, setSeekState] = React.useState<SeekState>({
+    isHovering: false,
+    pendingSeekTime: null,
+    hasInitialPosition: false,
+  });
+
+  const rafIdRef = React.useRef<number | null>(null);
+  const seekThrottleRef = React.useRef<number | null>(null);
+  const hoverTimeoutRef = React.useRef<number | null>(null);
+  const lastPointerXRef = React.useRef<number>(0);
+  const lastPointerYRef = React.useRef<number>(0);
+  const previewDebounceRef = React.useRef<number | null>(null);
+  const pointerEnterTimeRef = React.useRef<number>(0);
+  const horizontalMovementRef = React.useRef<number>(0);
+  const verticalMovementRef = React.useRef<number>(0);
+  const lastSeekCommitTimeRef = React.useRef<number>(0);
+
+  const timeCache = React.useRef<Map<number, string>>(new Map());
+
+  const displayValue = seekState.pendingSeekTime ?? mediaCurrentTime;
+
+  const isDisabled = disabled || context.disabled;
+  const tooltipDisabled =
+    withoutTooltip || context.withoutTooltip || store.getState().menuOpen;
+
+  const currentTooltipSideOffset =
+    tooltipSideOffset ?? context.tooltipSideOffset;
+
+  const getCachedTime = React.useCallback((time: number, duration: number) => {
+    const roundedTime = Math.floor(time);
+    const key = roundedTime + duration * 10000;
+
+    if (timeCache.current.has(key)) {
+      return timeCache.current.get(key) as string;
+    }
+
+    const formatted = timeUtils.formatTime(time, duration);
+    timeCache.current.set(key, formatted);
+
+    if (timeCache.current.size > 100) {
+      timeCache.current.clear();
+    }
+
+    return formatted;
+  }, []);
+
+  const currentTime = getCachedTime(displayValue, seekableEnd);
+  const duration = getCachedTime(seekableEnd, seekableEnd);
+  const remainingTime = getCachedTime(seekableEnd - displayValue, seekableEnd);
+
+  const onCollisionDataUpdate = React.useCallback(() => {
+    if (collisionDataRef.current) return collisionDataRef.current;
+
+    const padding =
+      typeof tooltipCollisionPadding === 'number'
+        ? {
+            top: tooltipCollisionPadding,
+            right: tooltipCollisionPadding,
+            bottom: tooltipCollisionPadding,
+            left: tooltipCollisionPadding,
+          }
+        : { top: 0, right: 0, bottom: 0, left: 0, ...tooltipCollisionPadding };
+
+    const boundaries = tooltipCollisionBoundary
+      ? Array.isArray(tooltipCollisionBoundary)
+        ? tooltipCollisionBoundary
+        : [tooltipCollisionBoundary]
+      : ([context.rootRef.current].filter(Boolean) as Element[]);
+
+    collisionDataRef.current = { padding, boundaries };
+    return collisionDataRef.current;
+  }, [tooltipCollisionPadding, tooltipCollisionBoundary, context.rootRef]);
+
+  const getCurrentChapterCue = React.useCallback(
+    (time: number) => {
+      if (withoutChapter || chapterCues.length === 0) return null;
+      return chapterCues.find(c => time >= c.startTime && time < c.endTime);
+    },
+    [chapterCues, withoutChapter]
+  );
+
+  const getThumbnail = React.useCallback(
+    (time: number) => {
+      if (tooltipDisabled) return null;
+
+      if (tooltipThumbnailSrc) {
+        const src =
+          typeof tooltipThumbnailSrc === 'function'
+            ? tooltipThumbnailSrc(time)
+            : tooltipThumbnailSrc;
+        return { src, coords: null };
+      }
+
+      if (
+        mediaPreviewTime !== undefined &&
+        Math.abs(time - mediaPreviewTime) < 0.1 &&
+        mediaPreviewImage
+      ) {
+        return {
+          src: mediaPreviewImage,
+          coords: mediaPreviewCoords ?? null,
+        };
+      }
+
+      return null;
+    },
+    [
+      tooltipThumbnailSrc,
+      mediaPreviewTime,
+      mediaPreviewImage,
+      mediaPreviewCoords,
+      tooltipDisabled,
+    ]
+  );
+
+  const onPreviewUpdate = React.useCallback(
+    (time: number) => {
+      if (tooltipDisabled) return;
+
+      if (previewDebounceRef.current) {
+        cancelAnimationFrame(previewDebounceRef.current);
+      }
+
+      previewDebounceRef.current = requestAnimationFrame(() => {
+        dispatch({
+          type: MediaActionTypes.MEDIA_PREVIEW_REQUEST,
+          detail: time,
+        });
+        previewDebounceRef.current = null;
+      });
+    },
+    [dispatch, tooltipDisabled]
+  );
+
+  const onTooltipPositionUpdate = React.useCallback(
+    (clientX: number) => {
+      if (!seekRef.current) return;
+
+      const tooltipWidth =
+        tooltipRef.current?.offsetWidth ?? SEEK_TOOLTIP_WIDTH_FALLBACK;
+
+      let x = clientX;
+      const y = seekRectRef.current?.top ?? 0;
+
+      const collisionData = onCollisionDataUpdate();
+      const halfTooltipWidth = tooltipWidth / 2;
+
+      let minLeft = 0;
+      let maxRight = window.innerWidth;
+
+      for (const boundary of collisionData.boundaries) {
+        const boundaryRect = boundary.getBoundingClientRect();
+        minLeft = Math.max(
+          minLeft,
+          boundaryRect.left + collisionData.padding.left
+        );
+        maxRight = Math.min(
+          maxRight,
+          boundaryRect.right - collisionData.padding.right
+        );
+      }
+
+      if (x - halfTooltipWidth < minLeft) {
+        x = minLeft + halfTooltipWidth;
+      } else if (x + halfTooltipWidth > maxRight) {
+        x = maxRight - halfTooltipWidth;
+      }
+
+      const viewportPadding = SEEK_COLLISION_PADDING;
+      if (x - halfTooltipWidth < viewportPadding) {
+        x = viewportPadding + halfTooltipWidth;
+      } else if (x + halfTooltipWidth > window.innerWidth - viewportPadding) {
+        x = window.innerWidth - viewportPadding - halfTooltipWidth;
+      }
+
+      tooltipXRef.current = x;
+      tooltipYRef.current = y;
+
+      if (tooltipRef.current) {
+        tooltipRef.current.style.setProperty(SEEK_TOOLTIP_X, `${x}px`);
+        tooltipRef.current.style.setProperty(SEEK_TOOLTIP_Y, `${y}px`);
+      }
+
+      if (!seekState.hasInitialPosition) {
+        setSeekState(prev => ({ ...prev, hasInitialPosition: true }));
+      }
+    },
+    [onCollisionDataUpdate, seekState.hasInitialPosition]
+  );
+
+  const onHoverProgressUpdate = React.useCallback(() => {
+    if (!seekRef.current || seekableEnd <= 0) return;
+
+    const hoverPercent = Math.min(
+      100,
+      (hoverTimeRef.current / seekableEnd) * 100
+    );
+    seekRef.current.style.setProperty(
+      SEEK_HOVER_PERCENT,
+      `${hoverPercent.toFixed(4)}%`
+    );
+  }, [seekableEnd]);
+
+  React.useEffect(() => {
+    if (seekState.pendingSeekTime !== null) {
+      const diff = Math.abs(mediaCurrentTime - seekState.pendingSeekTime);
+      if (diff < 0.5) {
+        setSeekState(prev => ({ ...prev, pendingSeekTime: null }));
+      }
+    }
+  }, [mediaCurrentTime, seekState.pendingSeekTime]);
+
+  React.useEffect(() => {
+    if (!seekState.isHovering || tooltipDisabled) return;
+
+    function onScroll() {
+      setSeekState(prev => ({
+        ...prev,
+        isHovering: false,
+        hasInitialPosition: false,
+      }));
+      dispatch({
+        type: MediaActionTypes.MEDIA_PREVIEW_REQUEST,
+        detail: undefined,
+      });
+    }
+
+    document.addEventListener('scroll', onScroll, { passive: true });
+    return () => {
+      document.removeEventListener('scroll', onScroll);
+    };
+  }, [dispatch, seekState.isHovering, tooltipDisabled]);
+
+  const bufferedProgress = React.useMemo(() => {
+    if (mediaBuffered.length === 0 || seekableEnd <= 0) return 0;
+
+    if (mediaEnded) return 1;
+
+    const containingRange = mediaBuffered.find(
+      ([start, end]) => start <= mediaCurrentTime && mediaCurrentTime <= end
+    );
+
+    if (containingRange) {
+      return Math.min(1, containingRange[1] / seekableEnd);
+    }
+
+    return Math.min(1, seekableStart / seekableEnd);
+  }, [mediaBuffered, mediaCurrentTime, seekableEnd, mediaEnded, seekableStart]);
+
+  const onPointerEnter = React.useCallback(() => {
+    if (seekRef.current) {
+      seekRectRef.current = seekRef.current.getBoundingClientRect();
+    }
+
+    collisionDataRef.current = null;
+    pointerEnterTimeRef.current = Date.now();
+    horizontalMovementRef.current = 0;
+    verticalMovementRef.current = 0;
+
+    if (seekableEnd > 0) {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+
+      if (!tooltipDisabled) {
+        if (lastPointerXRef.current && seekRectRef.current) {
+          const clientX = Math.max(
+            seekRectRef.current.left,
+            Math.min(lastPointerXRef.current, seekRectRef.current.right)
+          );
+          onTooltipPositionUpdate(clientX);
+        }
+      }
+    }
+  }, [seekableEnd, onTooltipPositionUpdate, tooltipDisabled]);
+
+  const onPointerLeave = React.useCallback(() => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+    if (rafIdRef.current) {
+      cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = null;
+    }
+    if (previewDebounceRef.current) {
+      cancelAnimationFrame(previewDebounceRef.current);
+      previewDebounceRef.current = null;
+    }
+
+    setSeekState(prev => ({
+      ...prev,
+      isHovering: false,
+      hasInitialPosition: false,
+    }));
+
+    justCommittedRef.current = false;
+    seekRectRef.current = null;
+    collisionDataRef.current = null;
+
+    pointerEnterTimeRef.current = 0;
+    horizontalMovementRef.current = 0;
+    verticalMovementRef.current = 0;
+    lastPointerXRef.current = 0;
+    lastPointerYRef.current = 0;
+    lastSeekCommitTimeRef.current = 0;
+
+    if (!tooltipDisabled) {
+      dispatch({
+        type: MediaActionTypes.MEDIA_PREVIEW_REQUEST,
+        detail: undefined,
+      });
+    }
+  }, [dispatch, tooltipDisabled]);
+
+  const onPointerMove = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      if (seekableEnd <= 0) return;
+
+      if (!seekRectRef.current && seekRef.current) {
+        seekRectRef.current = seekRef.current.getBoundingClientRect();
+      }
+
+      if (!seekRectRef.current) return;
+
+      const currentX = event.clientX;
+      const currentY = event.clientY;
+
+      if (lastPointerXRef.current !== 0 && lastPointerYRef.current !== 0) {
+        const deltaX = Math.abs(currentX - lastPointerXRef.current);
+        const deltaY = Math.abs(currentY - lastPointerYRef.current);
+
+        horizontalMovementRef.current += deltaX;
+        verticalMovementRef.current += deltaY;
+      }
+
+      lastPointerXRef.current = currentX;
+      lastPointerYRef.current = currentY;
+
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+      }
+
+      rafIdRef.current = requestAnimationFrame(() => {
+        const wasJustCommitted = justCommittedRef.current;
+        if (wasJustCommitted) {
+          justCommittedRef.current = false;
+        }
+
+        const seekRect = seekRectRef.current;
+        if (!seekRect) {
+          rafIdRef.current = null;
+          return;
+        }
+
+        const clientX = lastPointerXRef.current;
+        const offsetXOnSeekBar = Math.max(
+          0,
+          Math.min(clientX - seekRect.left, seekRect.width)
+        );
+        const relativeX = offsetXOnSeekBar / seekRect.width;
+        const calculatedHoverTime = relativeX * seekableEnd;
+
+        hoverTimeRef.current = calculatedHoverTime;
+
+        onHoverProgressUpdate();
+
+        const wasHovering = seekState.isHovering;
+        const isCurrentlyHovering =
+          clientX >= seekRect.left && clientX <= seekRect.right;
+
+        const timeHovering = Date.now() - pointerEnterTimeRef.current;
+        const totalMovement =
+          horizontalMovementRef.current + verticalMovementRef.current;
+        const horizontalRatio =
+          totalMovement > 0 ? horizontalMovementRef.current / totalMovement : 0;
+
+        const timeSinceSeekCommit = Date.now() - lastSeekCommitTimeRef.current;
+        const isInSeekCooldown = timeSinceSeekCommit < 300;
+
+        const shouldShowTooltip =
+          !wasJustCommitted &&
+          !isInSeekCooldown &&
+          (timeHovering > 150 ||
+            horizontalRatio > 0.6 ||
+            (totalMovement < 10 && timeHovering > 50));
+
+        if (
+          !wasHovering &&
+          isCurrentlyHovering &&
+          shouldShowTooltip &&
+          !tooltipDisabled
+        ) {
+          setSeekState(prev => ({ ...prev, isHovering: true }));
+        }
+
+        if (!tooltipDisabled) {
+          onPreviewUpdate(calculatedHoverTime);
+
+          if (isCurrentlyHovering && (wasHovering || shouldShowTooltip)) {
+            onTooltipPositionUpdate(clientX);
+          }
+        }
+
+        rafIdRef.current = null;
+      });
+    },
+    [
+      onPreviewUpdate,
+      onTooltipPositionUpdate,
+      onHoverProgressUpdate,
+      seekableEnd,
+      seekState.isHovering,
+      tooltipDisabled,
+    ]
+  );
+
+  const onSeek = React.useCallback(
+    (value: number[]) => {
+      const time = value[0] ?? 0;
+
+      setSeekState(prev => ({ ...prev, pendingSeekTime: time }));
+
+      if (!store.getState().dragging) {
+        store.setState('dragging', true);
+      }
+
+      if (seekThrottleRef.current) {
+        cancelAnimationFrame(seekThrottleRef.current);
+      }
+
+      seekThrottleRef.current = requestAnimationFrame(() => {
+        dispatch({
+          type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+          detail: time,
+        });
+        seekThrottleRef.current = null;
+      });
+    },
+    [dispatch, store.getState, store.setState]
+  );
+
+  const onSeekCommit = React.useCallback(
+    (value: number[]) => {
+      const time = value[0] ?? 0;
+
+      if (seekThrottleRef.current) {
+        cancelAnimationFrame(seekThrottleRef.current);
+        seekThrottleRef.current = null;
+      }
+
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+      if (previewDebounceRef.current) {
+        cancelAnimationFrame(previewDebounceRef.current);
+        previewDebounceRef.current = null;
+      }
+
+      setSeekState(prev => ({
+        ...prev,
+        pendingSeekTime: time,
+        isHovering: false,
+        hasInitialPosition: false,
+      }));
+
+      justCommittedRef.current = true;
+      collisionDataRef.current = null;
+      lastSeekCommitTimeRef.current = Date.now();
+
+      // Reset movement tracking after seek commit
+      pointerEnterTimeRef.current = Date.now();
+      horizontalMovementRef.current = 0;
+      verticalMovementRef.current = 0;
+
+      if (store.getState().dragging) {
+        store.setState('dragging', false);
+      }
+
+      dispatch({
+        type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+        detail: time,
+      });
+
+      dispatch({
+        type: MediaActionTypes.MEDIA_PREVIEW_REQUEST,
+        detail: undefined,
+      });
+    },
+    [dispatch, store.getState, store.setState]
+  );
+
+  React.useEffect(() => {
+    return () => {
+      if (seekThrottleRef.current) {
+        cancelAnimationFrame(seekThrottleRef.current);
+      }
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+      }
+      if (previewDebounceRef.current) {
+        cancelAnimationFrame(previewDebounceRef.current);
+      }
+    };
+  }, []);
+
+  const currentChapterCue = getCurrentChapterCue(hoverTimeRef.current);
+  const thumbnail = getThumbnail(hoverTimeRef.current);
+  const hoverTime = getCachedTime(hoverTimeRef.current, seekableEnd);
+
+  const chapterSeparators = React.useMemo(() => {
+    if (withoutChapter || chapterCues.length <= 1 || seekableEnd <= 0) {
+      return null;
+    }
+
+    return chapterCues.slice(1).map((chapterCue, index) => {
+      const position = (chapterCue.startTime / seekableEnd) * 100;
+
+      return (
+        <div
+          key={`chapter-${index}-${chapterCue.startTime}`}
+          role='presentation'
+          aria-hidden='true'
+          data-slot='media-player-seek-chapter-separator'
+          className='absolute top-0 h-full bg-zinc-50 dark:bg-zinc-950'
+          style={{
+            width: '.1563rem',
+            left: `${position}%`,
+            transform: 'translateX(-50%)',
+          }}
+        />
+      );
+    });
+  }, [chapterCues, seekableEnd, withoutChapter]);
+
+  const spriteStyle = React.useMemo<React.CSSProperties>(() => {
+    if (!thumbnail?.coords || !thumbnail?.src) {
+      return {};
+    }
+
+    const coordX = thumbnail.coords[0];
+    const coordY = thumbnail.coords[1];
+
+    const spriteWidth = Number.parseFloat(thumbnail.coords[2] ?? '0');
+    const spriteHeight = Number.parseFloat(thumbnail.coords[3] ?? '0');
+
+    const scaleX = spriteWidth > 0 ? SPRITE_CONTAINER_WIDTH / spriteWidth : 1;
+    const scaleY =
+      spriteHeight > 0 ? SPRITE_CONTAINER_HEIGHT / spriteHeight : 1;
+    const scale = Math.min(scaleX, scaleY);
+
+    return {
+      width: `${spriteWidth}px`,
+      height: `${spriteHeight}px`,
+      backgroundImage: `url(${thumbnail.src})`,
+      backgroundPosition: `-${coordX}px -${coordY}px`,
+      backgroundRepeat: 'no-repeat',
+      transform: `scale(${scale})`,
+      transformOrigin: 'top left',
+    };
+  }, [thumbnail?.coords, thumbnail?.src]);
+
+  const SeekSlider = (
+    <div data-slot='media-player-seek-container' className='relative w-full'>
+      <SliderPrimitive.Root
+        aria-controls={context.mediaId}
+        aria-valuetext={`${currentTime} of ${duration}`}
+        data-hovering={seekState.isHovering ? '' : undefined}
+        data-slider=''
+        data-slot='media-player-seek'
+        disabled={isDisabled}
+        {...seekProps}
+        ref={seekRef}
+        min={seekableStart}
+        max={seekableEnd}
+        step={0.01}
+        className={cn(
+          'relative flex w-full touch-none items-center select-none data-disabled:pointer-events-none data-disabled:opacity-50',
+          className
+        )}
+        value={[displayValue]}
+        onValueChange={onSeek}
+        onValueCommit={onSeekCommit}
+        onPointerEnter={onPointerEnter}
+        onPointerLeave={onPointerLeave}
+        onPointerMove={onPointerMove}
+      >
+        <SliderPrimitive.Track className='bg-primary/40 relative h-1 w-full grow overflow-hidden rounded-full'>
+          <div
+            data-slot='media-player-seek-buffered'
+            className='bg-primary/70 absolute h-full will-change-[width]'
+            style={{
+              width: `${bufferedProgress * 100}%`,
+            }}
+          />
+          <SliderPrimitive.Range className='bg-primary absolute h-full will-change-[width]' />
+          {seekState.isHovering && seekableEnd > 0 && (
+            <div
+              data-slot='media-player-seek-hover-range'
+              className='bg-primary/70 absolute h-full will-change-[width,opacity]'
+              style={{
+                width: `var(${SEEK_HOVER_PERCENT}, 0%)`,
+                transition: 'opacity 150ms ease-out',
+              }}
+            />
+          )}
+          {chapterSeparators}
+        </SliderPrimitive.Track>
+        <SliderPrimitive.Thumb className='bg-primary ring-ring/50 relative z-10 block size-2.5 shrink-0 rounded-full shadow-sm transition-[color,box-shadow] will-change-transform hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50' />
+      </SliderPrimitive.Root>
+      {!withoutTooltip &&
+        !context.withoutTooltip &&
+        seekState.isHovering &&
+        seekableEnd > 0 && (
+          <MediaPlayerPortal>
+            <div
+              ref={tooltipRef}
+              className='pointer-events-none z-50 contain-[layout_style] [transition:opacity_150ms_ease-in-out] backface-hidden'
+              style={{
+                position: 'fixed' as const,
+                left: `var(${SEEK_TOOLTIP_X}, 0rem)`,
+                top: `var(${SEEK_TOOLTIP_Y}, 0rem)`,
+                transform: `translateX(-50%) translateY(calc(-100% - ${currentTooltipSideOffset}px))`,
+                visibility: seekState.hasInitialPosition ? 'visible' : 'hidden',
+                opacity: seekState.hasInitialPosition ? 1 : 0,
+              }}
+            >
+              <div
+                className={cn(
+                  'bg-background text-foreground flex flex-col items-center gap-1.5 rounded-md border shadow-sm dark:bg-zinc-900',
+                  thumbnail && 'min-h-10',
+                  !thumbnail && currentChapterCue && 'px-3 py-1.5'
+                )}
+              >
+                {thumbnail?.src && (
+                  <div
+                    data-slot='media-player-seek-thumbnail'
+                    className='overflow-hidden rounded-md rounded-b-none'
+                    style={{
+                      width: `${SPRITE_CONTAINER_WIDTH}px`,
+                      height: `${SPRITE_CONTAINER_HEIGHT}px`,
+                    }}
+                  >
+                    {thumbnail.coords ? (
+                      <div style={spriteStyle} />
+                    ) : (
+                      // biome-ignore lint/performance/noImgElement: dynamic thumbnail URLs from media don't work well with Next.js Image optimization
+                      <img
+                        src={thumbnail.src}
+                        alt={`Preview at ${hoverTime}`}
+                        className='size-full object-cover'
+                      />
+                    )}
+                  </div>
+                )}
+                {currentChapterCue && (
+                  <div
+                    data-slot='media-player-seek-chapter-title'
+                    className='line-clamp-2 max-w-48 text-center text-xs text-balance'
+                  >
+                    {currentChapterCue.text}
+                  </div>
+                )}
+                <div
+                  data-slot='media-player-seek-time'
+                  className={cn(
+                    'text-center text-xs whitespace-nowrap tabular-nums',
+                    thumbnail && 'pb-1.5',
+                    !(thumbnail || currentChapterCue) && 'px-2.5 py-1'
+                  )}
+                >
+                  {tooltipTimeVariant === 'progress'
+                    ? `${hoverTime} / ${duration}`
+                    : hoverTime}
+                </div>
+              </div>
+            </div>
+          </MediaPlayerPortal>
+        )}
+    </div>
+  );
+
+  if (withTime) {
+    return (
+      <div className='flex w-full items-center gap-2'>
+        <span className='text-sm tabular-nums'>{currentTime}</span>
+        {SeekSlider}
+        <span className='text-sm tabular-nums'>{remainingTime}</span>
+      </div>
+    );
+  }
+
+  return SeekSlider;
+}
+
+interface MediaPlayerVolumeProps extends React.ComponentProps<
+  typeof SliderPrimitive.Root
+> {
+  asChild?: boolean;
+  expandable?: boolean;
+}
+
+function MediaPlayerVolume(props: MediaPlayerVolumeProps) {
+  const { expandable = false, className, disabled, ...volumeProps } = props;
+
+  const context = useMediaPlayerContext(VOLUME_NAME);
+  const store = useStoreContext(VOLUME_NAME);
+  const dispatch = useMediaDispatch();
+  const mediaVolume = useMediaSelector(state => state.mediaVolume ?? 1);
+  const mediaMuted = useMediaSelector(state => state.mediaMuted ?? false);
+  const mediaVolumeLevel = useMediaSelector(
+    state => state.mediaVolumeLevel ?? 'high'
+  );
+
+  const sliderId = React.useId();
+  const volumeTriggerId = React.useId();
+
+  const isDisabled = disabled || context.disabled;
+
+  const onMute = React.useCallback(() => {
+    dispatch({
+      type: mediaMuted
+        ? MediaActionTypes.MEDIA_UNMUTE_REQUEST
+        : MediaActionTypes.MEDIA_MUTE_REQUEST,
+    });
+  }, [dispatch, mediaMuted]);
+
+  const onVolumeChange = React.useCallback(
+    (value: number[]) => {
+      const volume = value[0] ?? 0;
+
+      if (!store.getState().dragging) {
+        store.setState('dragging', true);
+      }
+
+      dispatch({
+        type: MediaActionTypes.MEDIA_VOLUME_REQUEST,
+        detail: volume,
+      });
+    },
+    [dispatch, store.getState, store.setState]
+  );
+
+  const onVolumeCommit = React.useCallback(
+    (value: number[]) => {
+      const volume = value[0] ?? 0;
+
+      if (store.getState().dragging) {
+        store.setState('dragging', false);
+      }
+
+      dispatch({
+        type: MediaActionTypes.MEDIA_VOLUME_REQUEST,
+        detail: volume,
+      });
+    },
+    [dispatch, store]
+  );
+
+  const effectiveVolume = mediaMuted ? 0 : mediaVolume;
+
+  return (
+    <div
+      data-disabled={isDisabled ? '' : undefined}
+      data-slot='media-player-volume-container'
+      className={cn(
+        'group flex items-center',
+        expandable
+          ? 'gap-0 group-focus-within:gap-2 group-hover:gap-1.5'
+          : 'gap-1.5',
+        className
+      )}
+    >
+      <MediaPlayerTooltip tooltip='Volume' shortcut='M'>
+        <Button
+          id={volumeTriggerId}
+          type='button'
+          aria-controls={`${context.mediaId} ${sliderId}`}
+          aria-label={mediaMuted ? 'Unmute' : 'Mute'}
+          aria-pressed={mediaMuted}
+          data-slot='media-player-volume-trigger'
+          data-state={mediaMuted ? 'on' : 'off'}
+          variant='ghost'
+          size='icon'
+          className='size-8'
+          disabled={isDisabled}
+          onClick={onMute}
+        >
+          {mediaVolumeLevel === 'off' || mediaMuted ? (
+            <VolumeXIcon />
+          ) : mediaVolumeLevel === 'high' ? (
+            <Volume2Icon />
+          ) : (
+            <Volume1Icon />
+          )}
+        </Button>
+      </MediaPlayerTooltip>
+      <SliderPrimitive.Root
+        id={sliderId}
+        aria-controls={context.mediaId}
+        aria-valuetext={`${Math.round(effectiveVolume * 100)}% volume`}
+        data-slider=''
+        data-slot='media-player-volume'
+        {...volumeProps}
+        min={0}
+        max={1}
+        step={0.1}
+        className={cn(
+          'relative flex touch-none items-center select-none',
+          expandable
+            ? 'w-0 opacity-0 transition-[width,opacity] duration-200 ease-in-out group-focus-within:w-16 group-focus-within:opacity-100 group-hover:w-16 group-hover:opacity-100'
+            : 'w-16',
+          className
+        )}
+        disabled={isDisabled}
+        value={[effectiveVolume]}
+        onValueChange={onVolumeChange}
+        onValueCommit={onVolumeCommit}
+      >
+        <SliderPrimitive.Track className='relative h-1 w-full grow overflow-hidden rounded-full bg-zinc-500'>
+          <SliderPrimitive.Range className='bg-primary absolute h-full will-change-[width]' />
+        </SliderPrimitive.Track>
+        <SliderPrimitive.Thumb className='bg-primary ring-ring/50 block size-2.5 shrink-0 rounded-full shadow-sm transition-[color,box-shadow] will-change-transform hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50' />
+      </SliderPrimitive.Root>
+    </div>
+  );
+}
+
+interface MediaPlayerTimeProps extends React.ComponentProps<'div'> {
+  variant?: 'progress' | 'remaining' | 'duration';
+  asChild?: boolean;
+}
+
+function MediaPlayerTime(props: MediaPlayerTimeProps) {
+  const { variant = 'progress', asChild, className, ...timeProps } = props;
+
+  const context = useMediaPlayerContext('MediaPlayerTime');
+  const mediaCurrentTime = useMediaSelector(
+    state => state.mediaCurrentTime ?? 0
+  );
+  const [, seekableEnd = 0] = useMediaSelector(
+    state => state.mediaSeekable ?? [0, 0]
+  );
+
+  const times = React.useMemo(() => {
+    if (variant === 'remaining') {
+      return {
+        remaining: timeUtils.formatTime(
+          seekableEnd - mediaCurrentTime,
+          seekableEnd
+        ),
+      };
+    }
+
+    if (variant === 'duration') {
+      return {
+        duration: timeUtils.formatTime(seekableEnd, seekableEnd),
+      };
+    }
+
+    return {
+      current: timeUtils.formatTime(mediaCurrentTime, seekableEnd),
+      duration: timeUtils.formatTime(seekableEnd, seekableEnd),
+    };
+  }, [variant, mediaCurrentTime, seekableEnd]);
+
+  const TimePrimitive = asChild ? Slot : 'div';
+
+  if (variant === 'remaining' || variant === 'duration') {
+    return (
+      <TimePrimitive
+        data-slot='media-player-time'
+        data-variant={variant}
+        dir={context.dir}
+        {...timeProps}
+        className={cn('text-foreground/80 text-sm tabular-nums', className)}
+      >
+        {times[variant]}
+      </TimePrimitive>
+    );
+  }
+
+  return (
+    <TimePrimitive
+      data-slot='media-player-time'
+      data-variant={variant}
+      dir={context.dir}
+      {...timeProps}
+      className={cn(
+        'text-foreground/80 flex items-center gap-1 text-sm',
+        className
+      )}
+    >
+      <span className='tabular-nums'>{times.current}</span>
+      <span role='separator' aria-hidden='true' aria-valuenow={0} tabIndex={-1}>
+        /
+      </span>
+      <span className='tabular-nums'>{times.duration}</span>
+    </TimePrimitive>
+  );
+}
+
+interface MediaPlayerPlaybackSpeedProps
+  extends
+    React.ComponentProps<typeof DropdownMenuTrigger>,
+    React.ComponentProps<typeof Button>,
+    Omit<React.ComponentProps<typeof DropdownMenu>, 'dir'>,
+    Pick<React.ComponentProps<typeof DropdownMenuContent>, 'sideOffset'> {
+  speeds?: number[];
+}
+
+function MediaPlayerPlaybackSpeed(props: MediaPlayerPlaybackSpeedProps) {
+  const {
+    open,
+    defaultOpen,
+    onOpenChange: onOpenChangeProp,
+    sideOffset = FLOATING_MENU_SIDE_OFFSET,
+    speeds = SPEEDS,
+    modal = false,
+    className,
+    disabled,
+    ...playbackSpeedProps
+  } = props;
+
+  const context = useMediaPlayerContext(PLAYBACK_SPEED_NAME);
+  const store = useStoreContext(PLAYBACK_SPEED_NAME);
+  const dispatch = useMediaDispatch();
+  const mediaPlaybackRate = useMediaSelector(
+    state => state.mediaPlaybackRate ?? 1
+  );
+
+  const isDisabled = disabled || context.disabled;
+
+  const onPlaybackRateChange = React.useCallback(
+    (rate: number) => {
+      dispatch({
+        type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,
+        detail: rate,
+      });
+    },
+    [dispatch]
+  );
+
+  const onOpenChange = React.useCallback(
+    (open: boolean) => {
+      store.setState('menuOpen', open);
+      onOpenChangeProp?.(open);
+    },
+    [store.setState, onOpenChangeProp]
+  );
+
+  return (
+    <DropdownMenu
+      modal={modal}
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      <MediaPlayerTooltip tooltip='Playback speed' shortcut={['<', '>']}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            type='button'
+            aria-controls={context.mediaId}
+            disabled={isDisabled}
+            {...playbackSpeedProps}
+            variant='ghost'
+            size='icon'
+            className={cn('aria-expanded:bg-accent/50 h-8 w-16', className)}
+          >
+            {mediaPlaybackRate}x
+          </Button>
+        </DropdownMenuTrigger>
+      </MediaPlayerTooltip>
+      <DropdownMenuContent
+        container={context.portalContainer}
+        sideOffset={sideOffset}
+        align='center'
+        className='min-w-(--radix-dropdown-menu-trigger-width) data-[side=top]:mb-3.5'
+      >
+        {speeds.map(speed => (
+          <DropdownMenuItem
+            key={speed}
+            className='justify-between'
+            onSelect={() => onPlaybackRateChange(speed)}
+          >
+            {speed}x{mediaPlaybackRate === speed && <CheckIcon />}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+interface MediaPlayerLoopProps extends React.ComponentProps<typeof Button> {}
+
+function MediaPlayerLoop(props: MediaPlayerLoopProps) {
+  const { children, className, disabled, ...loopProps } = props;
+
+  const context = useMediaPlayerContext('MediaPlayerLoop');
+  const isDisabled = disabled || context.disabled;
+
+  const [isLooping, setIsLooping] = React.useState(() => {
+    const mediaElement = context.mediaRef.current;
+    return mediaElement?.loop ?? false;
+  });
+
+  React.useEffect(() => {
+    const mediaElement = context.mediaRef.current;
+    if (!mediaElement) return;
+
+    setIsLooping(mediaElement.loop);
+
+    const checkLoop = () => setIsLooping(mediaElement.loop);
+    const observer = new MutationObserver(checkLoop);
+    observer.observe(mediaElement, {
+      attributes: true,
+      attributeFilter: ['loop'],
+    });
+
+    return () => observer.disconnect();
+  }, [context.mediaRef]);
+
+  const onLoopToggle = React.useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      props.onClick?.(event);
+      if (event.defaultPrevented) return;
+
+      const mediaElement = context.mediaRef.current;
+      if (mediaElement) {
+        const newLoopState = !mediaElement.loop;
+        mediaElement.loop = newLoopState;
+        setIsLooping(newLoopState);
+      }
+    },
+    [context.mediaRef, props.onClick]
+  );
+
+  return (
+    <MediaPlayerTooltip
+      tooltip={isLooping ? 'Disable loop' : 'Enable loop'}
+      shortcut='R'
+    >
+      <Button
+        type='button'
+        aria-controls={context.mediaId}
+        aria-label={isLooping ? 'Disable loop' : 'Enable loop'}
+        aria-pressed={isLooping}
+        data-disabled={isDisabled ? '' : undefined}
+        data-slot='media-player-loop'
+        data-state={isLooping ? 'on' : 'off'}
+        disabled={isDisabled}
+        {...loopProps}
+        variant='ghost'
+        size='icon'
+        className={cn('size-8', className)}
+        onClick={onLoopToggle}
+      >
+        {children ??
+          (isLooping ? (
+            <RepeatIcon className='text-muted-foreground' />
+          ) : (
+            <RepeatIcon />
+          ))}
+      </Button>
+    </MediaPlayerTooltip>
+  );
+}
+
+interface MediaPlayerFullscreenProps extends React.ComponentProps<
+  typeof Button
+> {}
+
+function MediaPlayerFullscreen(props: MediaPlayerFullscreenProps) {
+  const { children, className, disabled, ...fullscreenProps } = props;
+
+  const context = useMediaPlayerContext('MediaPlayerFullscreen');
+  const dispatch = useMediaDispatch();
+  const isFullscreen = useMediaSelector(
+    state => state.mediaIsFullscreen ?? false
+  );
+
+  const isDisabled = disabled || context.disabled;
+
+  const onFullscreen = React.useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      props.onClick?.(event);
+
+      if (event.defaultPrevented) return;
+
+      dispatch({
+        type: isFullscreen
+          ? MediaActionTypes.MEDIA_EXIT_FULLSCREEN_REQUEST
+          : MediaActionTypes.MEDIA_ENTER_FULLSCREEN_REQUEST,
+      });
+    },
+    [dispatch, props.onClick, isFullscreen]
+  );
+
+  return (
+    <MediaPlayerTooltip tooltip='Fullscreen' shortcut='F'>
+      <Button
+        type='button'
+        aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+        data-disabled={isDisabled ? '' : undefined}
+        data-slot='media-player-fullscreen'
+        data-state={isFullscreen ? 'on' : 'off'}
+        disabled={isDisabled}
+        {...fullscreenProps}
+        variant='ghost'
+        size='icon'
+        className={cn('size-8', className)}
+        onClick={onFullscreen}
+      >
+        {children ?? (isFullscreen ? <Minimize2Icon /> : <Maximize2Icon />)}
+      </Button>
+    </MediaPlayerTooltip>
+  );
+}
+
+interface MediaPlayerPiPProps extends Omit<
+  React.ComponentProps<typeof Button>,
+  'children'
+> {
+  children?:
+    | React.ReactNode
+    | ((isPictureInPicture: boolean) => React.ReactNode);
+  onPipError?: (error: unknown, state: 'enter' | 'exit') => void;
+}
+
+function MediaPlayerPiP(props: MediaPlayerPiPProps) {
+  const { children, className, onPipError, disabled, ...pipButtonProps } =
+    props;
+
+  const context = useMediaPlayerContext('MediaPlayerPiP');
+  const dispatch = useMediaDispatch();
+  const isPictureInPicture = useMediaSelector(
+    state => state.mediaIsPip ?? false
+  );
+
+  const isDisabled = disabled || context.disabled;
+
+  const onPictureInPicture = React.useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      props.onClick?.(event);
+
+      if (event.defaultPrevented) return;
+
+      dispatch({
+        type: isPictureInPicture
+          ? MediaActionTypes.MEDIA_EXIT_PIP_REQUEST
+          : MediaActionTypes.MEDIA_ENTER_PIP_REQUEST,
+      });
+
+      const mediaElement = context.mediaRef.current;
+
+      if (mediaElement instanceof HTMLVideoElement) {
+        if (isPictureInPicture) {
+          document.exitPictureInPicture().catch(error => {
+            onPipError?.(error, 'exit');
+          });
+        } else {
+          mediaElement.requestPictureInPicture().catch(error => {
+            onPipError?.(error, 'enter');
+          });
+        }
+      }
+    },
+    [dispatch, props.onClick, isPictureInPicture, onPipError, context.mediaRef]
+  );
+
+  return (
+    <MediaPlayerTooltip tooltip='Picture in picture' shortcut='P'>
+      <Button
+        type='button'
+        aria-controls={context.mediaId}
+        aria-label={isPictureInPicture ? 'Exit pip' : 'Enter pip'}
+        data-disabled={isDisabled ? '' : undefined}
+        data-slot='media-player-pip'
+        data-state={isPictureInPicture ? 'on' : 'off'}
+        disabled={isDisabled}
+        {...pipButtonProps}
+        variant='ghost'
+        size='icon'
+        className={cn('size-8', className)}
+        onClick={onPictureInPicture}
+      >
+        {typeof children === 'function'
+          ? children(isPictureInPicture)
+          : (children ??
+            (isPictureInPicture ? (
+              <PictureInPicture2Icon />
+            ) : (
+              <PictureInPictureIcon />
+            )))}
+      </Button>
+    </MediaPlayerTooltip>
+  );
+}
+
+function MediaPlayerCaptions(props: React.ComponentProps<typeof Button>) {
+  const { children, className, disabled, ...captionsProps } = props;
+
+  const context = useMediaPlayerContext('MediaPlayerCaptions');
+  const dispatch = useMediaDispatch();
+  const isSubtitlesActive = useMediaSelector(
+    state => (state.mediaSubtitlesShowing ?? []).length > 0
+  );
+
+  const isDisabled = disabled || context.disabled;
+  const onCaptionsToggle = React.useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      props.onClick?.(event);
+
+      if (event.defaultPrevented) return;
+
+      dispatch({
+        type: MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST,
+      });
+    },
+    [dispatch, props.onClick]
+  );
+
+  return (
+    <MediaPlayerTooltip tooltip='Captions' shortcut='C'>
+      <Button
+        type='button'
+        aria-controls={context.mediaId}
+        aria-label={isSubtitlesActive ? 'Disable captions' : 'Enable captions'}
+        aria-pressed={isSubtitlesActive}
+        data-disabled={isDisabled ? '' : undefined}
+        data-slot='media-player-captions'
+        data-state={isSubtitlesActive ? 'on' : 'off'}
+        disabled={isDisabled}
+        {...captionsProps}
+        variant='ghost'
+        size='icon'
+        className={cn('size-8', className)}
+        onClick={onCaptionsToggle}
+      >
+        {children ??
+          (isSubtitlesActive ? <SubtitlesIcon /> : <CaptionsOffIcon />)}
+      </Button>
+    </MediaPlayerTooltip>
+  );
+}
+
+function MediaPlayerDownload(props: React.ComponentProps<typeof Button>) {
+  const { children, className, disabled, ...downloadProps } = props;
+
+  const context = useMediaPlayerContext('MediaPlayerDownload');
+
+  const isDisabled = disabled || context.disabled;
+
+  const onDownload = React.useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      props.onClick?.(event);
+
+      if (event.defaultPrevented) return;
+
+      const mediaElement = context.mediaRef.current;
+
+      if (!mediaElement || !mediaElement.currentSrc) return;
+
+      const link = document.createElement('a');
+      link.href = mediaElement.currentSrc;
+      link.download = '';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    },
+    [context.mediaRef, props.onClick]
+  );
+
+  return (
+    <MediaPlayerTooltip tooltip='Download' shortcut='D'>
+      <Button
+        type='button'
+        aria-controls={context.mediaId}
+        aria-label='Download'
+        data-disabled={isDisabled ? '' : undefined}
+        data-slot='media-player-download'
+        disabled={isDisabled}
+        {...downloadProps}
+        variant='ghost'
+        size='icon'
+        className={cn('size-8', className)}
+        onClick={onDownload}
+      >
+        {children ?? <DownloadIcon />}
+      </Button>
+    </MediaPlayerTooltip>
+  );
+}
+
+interface MediaPlayerSettingsProps extends MediaPlayerPlaybackSpeedProps {}
+
+function MediaPlayerSettings(props: MediaPlayerSettingsProps) {
+  const {
+    open,
+    defaultOpen,
+    onOpenChange: onOpenChangeProp,
+    sideOffset = FLOATING_MENU_SIDE_OFFSET,
+    speeds = SPEEDS,
+    modal = false,
+    className,
+    disabled,
+    ...settingsProps
+  } = props;
+
+  const context = useMediaPlayerContext(SETTINGS_NAME);
+  const store = useStoreContext(SETTINGS_NAME);
+  const dispatch = useMediaDispatch();
+
+  const mediaPlaybackRate = useMediaSelector(
+    state => state.mediaPlaybackRate ?? 1
+  );
+  const mediaSubtitlesList = useMediaSelector(
+    state => state.mediaSubtitlesList ?? []
+  );
+  const mediaSubtitlesShowing = useMediaSelector(
+    state => state.mediaSubtitlesShowing ?? []
+  );
+  const mediaRenditionList = useMediaSelector(
+    state => state.mediaRenditionList ?? []
+  );
+  const selectedRenditionId = useMediaSelector(
+    state => state.mediaRenditionSelected
+  );
+
+  const isDisabled = disabled || context.disabled;
+  const isSubtitlesActive = mediaSubtitlesShowing.length > 0;
+
+  const onPlaybackRateChange = React.useCallback(
+    (rate: number) => {
+      dispatch({
+        type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,
+        detail: rate,
+      });
+    },
+    [dispatch]
+  );
+
+  const onRenditionChange = React.useCallback(
+    (renditionId: string) => {
+      dispatch({
+        type: MediaActionTypes.MEDIA_RENDITION_REQUEST,
+        detail: renditionId === 'auto' ? undefined : renditionId,
+      });
+    },
+    [dispatch]
+  );
+
+  const onSubtitlesToggle = React.useCallback(() => {
+    dispatch({
+      type: MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST,
+      detail: false,
+    });
+  }, [dispatch]);
+
+  const onShowSubtitleTrack = React.useCallback(
+    (subtitleTrack: (typeof mediaSubtitlesList)[number]) => {
+      dispatch({
+        type: MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST,
+        detail: false,
+      });
+      dispatch({
+        type: MediaActionTypes.MEDIA_SHOW_SUBTITLES_REQUEST,
+        detail: subtitleTrack,
+      });
+    },
+    [dispatch]
+  );
+
+  const selectedSubtitleLabel = React.useMemo(() => {
+    if (!isSubtitlesActive) return 'Off';
+    if (mediaSubtitlesShowing.length > 0) {
+      return mediaSubtitlesShowing[0]?.label ?? 'On';
+    }
+    return 'Off';
+  }, [isSubtitlesActive, mediaSubtitlesShowing]);
+
+  const selectedRenditionLabel = React.useMemo(() => {
+    if (!selectedRenditionId) return 'Auto';
+
+    const currentRendition = mediaRenditionList?.find(
+      rendition => rendition.id === selectedRenditionId
+    );
+    if (!currentRendition) return 'Auto';
+
+    if (currentRendition.height) return `${currentRendition.height}p`;
+    if (currentRendition.width) return `${currentRendition.width}p`;
+    return currentRendition.id ?? 'Auto';
+  }, [selectedRenditionId, mediaRenditionList]);
+
+  const onOpenChange = React.useCallback(
+    (open: boolean) => {
+      store.setState('menuOpen', open);
+      onOpenChangeProp?.(open);
+    },
+    [store.setState, onOpenChangeProp]
+  );
+
+  return (
+    <DropdownMenu
+      modal={modal}
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      <MediaPlayerTooltip tooltip='Settings'>
+        <DropdownMenuTrigger asChild>
+          <Button
+            type='button'
+            aria-controls={context.mediaId}
+            aria-label='Settings'
+            data-disabled={isDisabled ? '' : undefined}
+            data-slot='media-player-settings'
+            disabled={isDisabled}
+            {...settingsProps}
+            variant='ghost'
+            size='icon'
+            className={cn('aria-expanded:bg-accent/50 size-8', className)}
+          >
+            <SettingsIcon />
+          </Button>
+        </DropdownMenuTrigger>
+      </MediaPlayerTooltip>
+      <DropdownMenuContent
+        align='end'
+        side='top'
+        sideOffset={sideOffset}
+        container={context.portalContainer}
+        className='w-56 data-[side=top]:mb-3.5'
+      >
+        <DropdownMenuLabel className='sr-only'>Settings</DropdownMenuLabel>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <span className='flex-1'>Speed</span>
+            <Badge variant='outline' className='rounded-sm'>
+              {mediaPlaybackRate}x
+            </Badge>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            {speeds.map(speed => (
+              <DropdownMenuItem
+                key={speed}
+                className='justify-between'
+                onSelect={() => onPlaybackRateChange(speed)}
+              >
+                {speed}x{mediaPlaybackRate === speed && <CheckIcon />}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+        {context.isVideo && mediaRenditionList.length > 0 && (
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <span className='flex-1'>Quality</span>
+              <Badge variant='outline' className='rounded-sm'>
+                {selectedRenditionLabel}
+              </Badge>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem
+                className='justify-between'
+                onSelect={() => onRenditionChange('auto')}
+              >
+                Auto
+                {!selectedRenditionId && <CheckIcon />}
+              </DropdownMenuItem>
+              {mediaRenditionList
+                .slice()
+                .sort((a, b) => {
+                  const aHeight = a.height ?? 0;
+                  const bHeight = b.height ?? 0;
+                  return bHeight - aHeight;
+                })
+                .map(rendition => {
+                  const label = rendition.height
+                    ? `${rendition.height}p`
+                    : rendition.width
+                      ? `${rendition.width}p`
+                      : (rendition.id ?? 'Unknown');
+
+                  const selected = rendition.id === selectedRenditionId;
+
+                  return (
+                    <DropdownMenuItem
+                      key={rendition.id}
+                      className='justify-between'
+                      onSelect={() => onRenditionChange(rendition.id ?? '')}
+                    >
+                      {label}
+                      {selected && <CheckIcon />}
+                    </DropdownMenuItem>
+                  );
+                })}
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        )}
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <span className='flex-1'>Captions</span>
+            <Badge variant='outline' className='rounded-sm'>
+              {selectedSubtitleLabel}
+            </Badge>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem
+              className='justify-between'
+              onSelect={onSubtitlesToggle}
+            >
+              Off
+              {!isSubtitlesActive && <CheckIcon />}
+            </DropdownMenuItem>
+            {mediaSubtitlesList.map(subtitleTrack => {
+              const isSelected = mediaSubtitlesShowing.some(
+                showingSubtitle => showingSubtitle.label === subtitleTrack.label
+              );
+              return (
+                <DropdownMenuItem
+                  key={`${subtitleTrack.kind}-${subtitleTrack.label}-${subtitleTrack.language}`}
+                  className='justify-between'
+                  onSelect={() => onShowSubtitleTrack(subtitleTrack)}
+                >
+                  {subtitleTrack.label}
+                  {isSelected && <CheckIcon />}
+                </DropdownMenuItem>
+              );
+            })}
+            {mediaSubtitlesList.length === 0 && (
+              <DropdownMenuItem disabled>
+                No captions available
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+interface MediaPlayerPortalProps {
+  container?: Element | DocumentFragment | null;
+  children?: React.ReactNode;
+}
+
+function MediaPlayerPortal(props: MediaPlayerPortalProps) {
+  const { container: containerProp, children } = props;
+
+  const context = useMediaPlayerContext('MediaPlayerPortal');
+  const container = containerProp ?? context.portalContainer;
+
+  if (!container) return null;
+
+  return ReactDOM.createPortal(children, container);
+}
+
+interface MediaPlayerTooltipProps
+  extends
+    React.ComponentProps<typeof Tooltip>,
+    Pick<React.ComponentProps<typeof TooltipContent>, 'sideOffset'> {
+  tooltip?: string;
+  shortcut?: string | string[];
+}
+
+function MediaPlayerTooltip(props: MediaPlayerTooltipProps) {
+  const {
+    tooltip,
+    shortcut,
+    delayDuration,
+    sideOffset,
+    children,
+    ...tooltipProps
+  } = props;
+
+  const context = useMediaPlayerContext('MediaPlayerTooltip');
+  const tooltipDelayDuration = delayDuration ?? context.tooltipDelayDuration;
+  const tooltipSideOffset = sideOffset ?? context.tooltipSideOffset;
+
+  if ((!tooltip && !shortcut) || context.withoutTooltip) return <>{children}</>;
+
+  return (
+    <Tooltip {...tooltipProps} delayDuration={tooltipDelayDuration}>
+      <TooltipTrigger
+        className='text-foreground focus-visible:ring-ring/50'
+        asChild
+      >
+        {children}
+      </TooltipTrigger>
+      <TooltipContent
+        container={context.portalContainer}
+        sideOffset={tooltipSideOffset}
+        className='bg-accent text-foreground flex items-center gap-2 border px-2 py-1 font-medium data-[side=top]:mb-3.5 dark:bg-zinc-900 [&>span]:hidden'
+      >
+        <p>{tooltip}</p>
+        {Array.isArray(shortcut) ? (
+          <div className='flex items-center gap-1'>
+            {shortcut.map(shortcutKey => (
+              <kbd
+                key={shortcutKey}
+                className='bg-secondary text-foreground rounded border px-1.5 py-0.5 font-mono text-[11.2px] shadow-xs select-none'
+              >
+                <abbr title={shortcutKey} className='no-underline'>
+                  {shortcutKey}
+                </abbr>
+              </kbd>
+            ))}
+          </div>
+        ) : (
+          shortcut && (
+            <kbd
+              key={shortcut}
+              className='bg-secondary text-foreground rounded border px-1.5 py-px font-mono text-[11.2px] shadow-xs select-none'
+            >
+              <abbr title={shortcut} className='no-underline'>
+                {shortcut}
+              </abbr>
+            </kbd>
+          )
+        )}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+export {
+  MediaPlayer,
+  MediaPlayerVideo,
+  MediaPlayerAudio,
+  MediaPlayerControls,
+  MediaPlayerControlsOverlay,
+  MediaPlayerLoading,
+  MediaPlayerError,
+  MediaPlayerVolumeIndicator,
+  MediaPlayerPlay,
+  MediaPlayerSeekBackward,
+  MediaPlayerSeekForward,
+  MediaPlayerSeek,
+  MediaPlayerVolume,
+  MediaPlayerTime,
+  MediaPlayerPlaybackSpeed,
+  MediaPlayerLoop,
+  MediaPlayerFullscreen,
+  MediaPlayerPiP,
+  MediaPlayerCaptions,
+  MediaPlayerDownload,
+  MediaPlayerSettings,
+  MediaPlayerPortal,
+  MediaPlayerTooltip,
+  //
+  useMediaSelector as useMediaPlayer,
+  useStore as useMediaPlayerStore,
+  //
+  type MediaPlayerProps,
+};
diff --git a/components/ui/metric-card.tsx b/components/ui/metric-card.tsx
new file mode 100644
index 000000000..45d3733a9
--- /dev/null
+++ b/components/ui/metric-card.tsx
@@ -0,0 +1,25 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import React from 'react';
+
+interface MetricCardProps {
+  children: React.ReactNode;
+  className?: string;
+  contentClassName?: string;
+}
+
+export function MetricCard({
+  children,
+  className,
+  contentClassName,
+}: MetricCardProps) {
+  return (
+    <Card
+      className={cn('border-border/50 bg-card/50 backdrop-blur-sm', className)}
+    >
+      <CardContent className={cn('p-4', contentClassName)}>
+        {children}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/ui/multi-step-loader.tsx b/components/ui/multi-step-loader.tsx
new file mode 100644
index 000000000..039e2b96c
--- /dev/null
+++ b/components/ui/multi-step-loader.tsx
@@ -0,0 +1,172 @@
+'use client';
+import { cn } from '@/lib/utils';
+import { AnimatePresence, motion } from 'motion/react';
+import { useState, useEffect } from 'react';
+
+const CheckIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      fill='none'
+      viewBox='0 0 24 24'
+      strokeWidth={1.5}
+      stroke='currentColor'
+      className={cn('h-6 w-6', className)}
+    >
+      <path d='M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z' />
+    </svg>
+  );
+};
+
+const CheckFilled = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      fill='currentColor'
+      className={cn('h-6 w-6', className)}
+    >
+      <path
+        fillRule='evenodd'
+        d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  );
+};
+
+type LoadingState = {
+  text: string;
+};
+
+const LoaderCore = ({
+  loadingStates,
+  value = 0,
+}: {
+  loadingStates: LoadingState[];
+  value?: number;
+}) => {
+  return (
+    <div className='relative mx-auto mt-40 flex max-w-xl flex-col justify-start'>
+      {loadingStates.map((loadingState, index) => {
+        const distance = Math.abs(index - value);
+        const opacity = Math.max(1 - distance * 0.2, 0); // Minimum opacity is 0, keep it 0.2 if you're sane.
+
+        return (
+          <motion.div
+            key={index}
+            className={cn('mb-4 flex gap-2 text-left')}
+            initial={{ opacity: 0, y: -(value * 40) }}
+            animate={{ opacity: opacity, y: -(value * 40) }}
+            transition={{ duration: 0.5 }}
+          >
+            <div>
+              {index > value && <CheckIcon className='text-white' />}
+              {index <= value && (
+                <CheckFilled
+                  className={cn(
+                    'text-white',
+                    value === index &&
+                      'text-primary opacity-100 dark:text-lime-500'
+                  )}
+                />
+              )}
+            </div>
+            <span
+              className={cn(
+                'text-white',
+                value === index && 'text-primary opacity-100 dark:text-lime-500'
+              )}
+            >
+              {loadingState.text}
+            </span>
+          </motion.div>
+        );
+      })}
+    </div>
+  );
+};
+
+export const MultiStepLoader = ({
+  loadingStates,
+  loading,
+  duration = 2000,
+  loop = true,
+  currentState: controlledState, // Add this prop
+}: {
+  loadingStates: LoadingState[];
+  loading?: boolean;
+  duration?: number;
+  loop?: boolean;
+  currentState?: number; // Add type
+}) => {
+  const [internalState, setInternalState] = useState(0);
+  const [mounted, setMounted] = useState(false);
+
+  // Use controlled state if provided, otherwise internal state
+  const currentState = controlledState ?? internalState;
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!loading) {
+      setInternalState(0);
+      return;
+    }
+
+    // If controlled, do not run invalidation loop
+    if (controlledState !== undefined) return;
+
+    const timeout = setTimeout(() => {
+      setInternalState(prevState =>
+        loop
+          ? prevState === loadingStates.length - 1
+            ? 0
+            : prevState + 1
+          : Math.min(prevState + 1, loadingStates.length - 1)
+      );
+    }, duration);
+
+    return () => clearTimeout(timeout);
+  }, [
+    internalState,
+    loading,
+    loop,
+    loadingStates.length,
+    duration,
+    controlledState,
+  ]);
+
+  if (!mounted) return null;
+
+  // Use createPortal to render at the top level
+  const { createPortal } = require('react-dom');
+
+  return createPortal(
+    <AnimatePresence mode='wait'>
+      {loading && (
+        <motion.div
+          initial={{
+            opacity: 0,
+          }}
+          animate={{
+            opacity: 1,
+          }}
+          exit={{
+            opacity: 0,
+          }}
+          className='fixed inset-0 z-[100] flex h-full w-full items-center justify-center bg-black/50 text-white backdrop-blur-2xl'
+        >
+          <div className='relative h-96'>
+            <LoaderCore value={currentState} loadingStates={loadingStates} />
+          </div>
+
+          <div className='absolute inset-x-0 bottom-0 z-20 h-full bg-white bg-gradient-to-t [mask-image:radial-gradient(900px_at_center,transparent_100%,white)]' />
+        </motion.div>
+      )}
+    </AnimatePresence>,
+    document.body
+  );
+};
diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx
index 58095211a..afeace48f 100644
--- a/components/ui/progress.tsx
+++ b/components/ui/progress.tsx
@@ -5,11 +5,18 @@ import * as ProgressPrimitive from '@radix-ui/react-progress';
 
 import { cn } from '@/lib/utils';
 
+interface ProgressProps extends React.ComponentProps<
+  typeof ProgressPrimitive.Root
+> {
+  indicatorClassName?: string;
+}
+
 function Progress({
   className,
   value,
+  indicatorClassName,
   ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+}: ProgressProps) {
   return (
     <ProgressPrimitive.Root
       data-slot='progress'
@@ -21,11 +28,18 @@ function Progress({
     >
       <ProgressPrimitive.Indicator
         data-slot='progress-indicator'
-        className='h-full w-full flex-1 rounded-full transition-all'
+        className={cn(
+          'h-full w-full flex-1 rounded-full transition-all',
+          indicatorClassName
+        )}
         style={{
           transform: `translateX(-${100 - (value || 0)}%)`,
-          backgroundImage:
-            'linear-gradient(to right, rgba(167, 249, 80, 0.5) 0%, rgba(167, 249, 80, 0.6) 20%, rgba(167, 249, 80, 0.7) 40%, rgba(167, 249, 80, 0.8) 60%, rgba(167, 249, 80, 0.9) 80%, rgba(167, 249, 80, 1) 100%)',
+          ...(indicatorClassName
+            ? {}
+            : {
+                backgroundImage:
+                  'linear-gradient(to right, rgba(167, 249, 80, 0.5) 0%, rgba(167, 249, 80, 0.6) 20%, rgba(167, 249, 80, 0.7) 40%, rgba(167, 249, 80, 0.8) 60%, rgba(167, 249, 80, 0.9) 80%, rgba(167, 249, 80, 1) 100%)',
+              }),
         }}
       />
     </ProgressPrimitive.Root>
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index 3cd3c75e2..0f5321421 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -107,7 +107,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot='select-item'
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "focus:bg-accent focus:text-accent-foreground text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
index ca80d8856..c131f785d 100644
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -36,7 +36,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot='sheet-overlay'
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[rgba(28,28,28,0.52)] backdrop-blur-[50px]',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[50] bg-[rgba(28,28,28,0.52)] backdrop-blur-[50px]',
         className
       )}
       {...props}
@@ -60,7 +60,7 @@ function SheetContent({
       <SheetPrimitive.Content
         data-slot='sheet-content'
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-[60] flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
           side === 'right' &&
             'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
           side === 'left' &&
diff --git a/components/ui/timeline/Timeline.tsx b/components/ui/timeline/Timeline.tsx
index 66d09db40..283fbeb5f 100644
--- a/components/ui/timeline/Timeline.tsx
+++ b/components/ui/timeline/Timeline.tsx
@@ -7,7 +7,7 @@ const Timeline: React.FC<TimelineProps> = ({
   className = '',
   showConnector = true,
   orientation = 'vertical',
-  projectId,
+  projectSlug,
 }) => {
   const getOrientationStyles = () => {
     switch (orientation) {
@@ -35,7 +35,7 @@ const Timeline: React.FC<TimelineProps> = ({
           item={item}
           isLast={index === items.length - 1}
           showConnector={showConnector}
-          projectId={projectId}
+          projectSlug={projectSlug}
         />
       ))}
     </ul>
diff --git a/components/ui/timeline/TimelineExample.tsx b/components/ui/timeline/TimelineExample.tsx
deleted file mode 100644
index d6b38739b..000000000
--- a/components/ui/timeline/TimelineExample.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import { Timeline, TimelineItemType } from './index';
-
-// Example component demonstrating different Timeline variants
-const TimelineExample: React.FC = () => {
-  const sampleData: TimelineItemType[] = [
-    {
-      id: '1',
-      title: 'Project Initiation',
-      description: 'Project kickoff and initial planning phase',
-      date: 'Jan 2024',
-      status: 'in-progress',
-    },
-    {
-      id: '2',
-      title: 'Development Phase',
-      description: 'Active development and implementation',
-      date: 'Feb 2024',
-      status: 'in-progress',
-    },
-    {
-      id: '3',
-      title: 'Testing Phase',
-      description: 'Quality assurance and testing',
-      date: 'Mar 2024',
-      status: 'awaiting',
-    },
-  ];
-
-  return (
-    <div className='space-y-8 p-6'>
-      <h2 className='mb-6 text-2xl font-bold text-white'>Timeline Examples</h2>
-
-      {/* Default Timeline */}
-      <div>
-        <h3 className='mb-4 text-lg font-semibold text-white'>
-          Default Timeline
-        </h3>
-        <Timeline items={sampleData} />
-      </div>
-
-      {/* Compact Timeline */}
-      <div>
-        <h3 className='mb-4 text-lg font-semibold text-white'>
-          Compact Timeline
-        </h3>
-        <Timeline items={sampleData} variant='compact' />
-      </div>
-
-      {/* Detailed Timeline */}
-      <div>
-        <h3 className='mb-4 text-lg font-semibold text-white'>
-          Detailed Timeline
-        </h3>
-        <Timeline items={sampleData} variant='detailed' />
-      </div>
-
-      {/* Timeline without connector */}
-      <div>
-        <h3 className='mb-4 text-lg font-semibold text-white'>
-          Timeline without Connector
-        </h3>
-        <Timeline items={sampleData} showConnector={false} />
-      </div>
-    </div>
-  );
-};
-
-export default TimelineExample;
diff --git a/components/ui/timeline/TimelineItem.tsx b/components/ui/timeline/TimelineItem.tsx
index e4f5ffc9c..ae472db63 100644
--- a/components/ui/timeline/TimelineItem.tsx
+++ b/components/ui/timeline/TimelineItem.tsx
@@ -7,7 +7,7 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
   item,
   isLast,
   showConnector,
-  projectId,
+  projectSlug,
 }) => {
   // Map timeline status to milestone card status
 
@@ -19,10 +19,30 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
     item.status === 'awaiting' ||
     item.status === 'rejected';
 
+  // Get status-based colors
+  const getStatusColor = () => {
+    switch (item.status) {
+      case 'approved':
+        return '#99FF2D'; // Primary green - approved
+      case 'submission':
+      case 'in-review':
+        return '#FFA500'; // Orange - in review
+      case 'rejected':
+        return '#EF4444'; // Red - rejected
+      case 'awaiting':
+        return '#3B82F6'; // Blue - awaiting
+      case 'pending':
+      default:
+        return '#B5B5B5'; // Gray - pending/default
+    }
+  };
+
   // Handle milestone click - open in new tab
   const handleMilestoneClick = () => {
-    if (isClickable && projectId) {
-      const milestoneUrl = `/projects/${projectId}/milestone/${item.id}`;
+    // eslint-disable-next-line no-console
+    console.log('Milestone clicked:', item.id);
+    if (isClickable && projectSlug) {
+      const milestoneUrl = `/projects/${projectSlug}/milestone/${item.id}`;
       window.open(milestoneUrl, '_blank');
     }
   };
@@ -30,7 +50,7 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
   return (
     <li className={`relative flex items-start gap-6 pb-5`}>
       <div
-        className={`${showConnector && !isLast ? 'before:absolute before:top-[0.4px] before:left-[12px] before:h-full before:border-l before:border-dashed before:border-[#FFFFFF4D]' : ''}`}
+        className={`${showConnector && !isLast ? 'before:absolute before:top-[0.4px] before:left-3 before:h-full before:border-l before:border-dashed before:border-[#FFFFFF4D]' : ''}`}
       >
         {item.icon ? (
           <div className='relative z-10'>{item.icon}</div>
@@ -47,7 +67,12 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
               d='M0.869629 11.1304C0.869629 4.98327 5.8529 0 12.0001 0C18.1472 0 23.1305 4.98327 23.1305 11.1304C23.1305 17.2776 18.1472 22.2609 12.0001 22.2609C5.8529 22.2609 0.869629 17.2776 0.869629 11.1304Z'
               fill='#2B2B2B'
             />
-            <circle cx='12.0003' cy='11.1297' r='5.56522' fill='#B5B5B5' />
+            <circle
+              cx='12.0003'
+              cy='11.1297'
+              r='5.56522'
+              fill={getStatusColor()}
+            />
           </svg>
         )}
       </div>
diff --git a/components/ui/timeline/types.ts b/components/ui/timeline/types.ts
index 39d2a6e4c..6184c2fd6 100644
--- a/components/ui/timeline/types.ts
+++ b/components/ui/timeline/types.ts
@@ -1,3 +1,5 @@
+import React from 'react';
+
 export interface TimelineItem {
   id: string;
   title: string;
@@ -20,6 +22,7 @@ export interface TimelineItem {
   deadline?: string;
   feedbackDays?: number;
   isUnlocked?: boolean;
+  campaignId?: string;
 }
 
 export interface TimelineProps {
@@ -28,12 +31,12 @@ export interface TimelineProps {
   showConnector?: boolean;
   orientation?: 'vertical' | 'horizontal';
   variant?: 'default' | 'compact' | 'detailed';
-  projectId?: string;
+  projectSlug?: string;
 }
 
 export interface TimelineItemProps {
   item: TimelineItem;
   isLast: boolean;
   showConnector: boolean;
-  projectId?: string;
+  projectSlug?: string;
 }
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
index 1c1e226c3..3626d8cf0 100644
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@@ -37,11 +37,14 @@ function TooltipTrigger({
 function TooltipContent({
   className,
   sideOffset = 0,
+  container,
   children,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+}: React.ComponentProps<typeof TooltipPrimitive.Content> & {
+  container?: TooltipPrimitive.TooltipPortalProps['container'];
+}) {
   return (
-    <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Portal container={container}>
       <TooltipPrimitive.Content
         data-slot='tooltip-content'
         sideOffset={sideOffset}
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 000000000..3675c9f19
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,58 @@
+import { FlatCompat } from '@eslint/eslintrc';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import js from '@eslint/js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+});
+
+export default [
+  ...compat.config({
+    env: {
+      browser: true,
+      es2021: true,
+      node: true,
+    },
+    extends: ['eslint:recommended'],
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+      ecmaVersion: 12,
+      sourceType: 'module',
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+    plugins: ['@typescript-eslint', 'react', 'react-hooks'],
+    rules: {
+      // TypeScript specific rules
+      '@typescript-eslint/no-unused-vars': 'error',
+      '@typescript-eslint/no-explicit-any': 'warn',
+
+      // React specific rules
+      'react-hooks/exhaustive-deps': 'warn',
+      'react/no-unescaped-entities': 'off', // Allow apostrophes in JSX
+
+      // General rules
+      'no-console': 'warn',
+      'prefer-const': 'error',
+      'no-var': 'error',
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    ignorePatterns: [
+      'node_modules/**',
+      '.next/**',
+      'out/**',
+      'build/**',
+      'next-env.d.ts',
+    ],
+  }),
+];
diff --git a/features/projects/api/index.ts b/features/projects/api/index.ts
new file mode 100644
index 000000000..d962605ce
--- /dev/null
+++ b/features/projects/api/index.ts
@@ -0,0 +1,517 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { CrowdfundingProject, Crowdfunding } from '@/features/projects/types';
+import {
+  ApiResponse,
+  ProjectInitRequest,
+  CreateCrowdfundingProjectRequest,
+  CreateCrowdfundingProjectResponse,
+  GetCrowdfundingProjectsResponse,
+  UpdateCrowdfundingProjectRequest,
+  UpdateCrowdfundingProjectResponse,
+  DeleteCrowdfundingProjectResponse,
+  FundCrowdfundingProjectRequest,
+  FundCrowdfundingProjectResponse,
+  CrowdfundingCampaign,
+  VoteResponse,
+  GetProjectVotesRequest,
+  GetProjectVotesResponse,
+  RemoveVoteResponse,
+} from '@/lib/api/types';
+import { api } from '@/lib/api/api';
+
+export const initProject = async (data: ProjectInitRequest) => {
+  const res = await api.post('/projects', data);
+  return res;
+};
+
+export const getProjects = async (
+  page = 1,
+  limit = 9,
+  filters?: {
+    status?: string;
+    owner?: string;
+  }
+): Promise<{
+  projects: CrowdfundingProject[];
+  pagination: {
+    currentPage: number;
+    totalPages: number;
+    totalItems: number;
+    hasNextPage: boolean;
+    hasPrevPage: boolean;
+  };
+}> => {
+  const params = new URLSearchParams({
+    page: page.toString(),
+    limit: limit.toString(),
+  });
+
+  if (filters?.status && filters.status !== 'all') {
+    params.append('status', filters.status);
+  }
+
+  if (filters?.owner) {
+    params.append('owner', filters.owner);
+  }
+
+  const res = await api.get<
+    ApiResponse<{
+      projects: CrowdfundingProject[];
+      pagination: {
+        currentPage: number;
+        totalPages: number;
+        totalItems: number;
+        hasNextPage: boolean;
+        hasPrevPage: boolean;
+      };
+    }>
+  >(`/projects?${params.toString()}`);
+  // @ts-expect-error - data might be undefined in strict mode but we handle error globally or it is assumed present
+  return res.data.data;
+};
+
+export const getProjectDetails = async (_projectId: string) => {
+  const res = await api.get<ApiResponse<any>>(`/projects/${_projectId}`);
+  return res.data.data;
+};
+
+export const deleteProject = async (_projectId: string) => {
+  const res = await api.delete<ApiResponse<any>>(`/projects/${_projectId}`);
+  return res.data.data;
+};
+
+export const updateProject = async (
+  _projectId: string,
+  data: ProjectInitRequest
+) => {
+  const res = await api.put<ApiResponse<any>>(`/projects/${_projectId}`, data);
+  return res.data.data;
+};
+
+export const generateCampaignLink = async (_projectId: string) => {
+  // Mock implementation for now
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve({
+        success: true,
+        data: {
+          shareLink: 'https://boundlessfi.xyz/campaigns/' + _projectId,
+        },
+      });
+    }, 500);
+  });
+};
+
+/**
+ * Create a crowdfunding project
+ * Frontend handles all blockchain transactions and provides escrow data
+ * @param data - Project data including escrowId, transactionHash, and validateMilestones
+ */
+export const createCrowdfundingProject = async (
+  data: CreateCrowdfundingProjectRequest
+): Promise<CreateCrowdfundingProjectResponse> => {
+  const res = await api.post<CreateCrowdfundingProjectResponse>(
+    '/crowdfunding',
+    data
+  );
+  return res.data;
+};
+
+/**
+ * Validate crowdfunding project data
+ * @param data - Project data to validate
+ */
+export const validateCrowdfundingProject = async (
+  data: Partial<CreateCrowdfundingProjectRequest>
+): Promise<void> => {
+  await api.post('/crowdfunding/validate', data);
+};
+
+// Crowdfunding Project API Functions
+
+/**
+ * Get all crowdfunding projects with pagination and filtering
+ */
+export const getCrowdfundingProjects = async (
+  page = 1,
+  limit = 10,
+  filters?: {
+    category?: string;
+    status?: string;
+    minFundingGoal?: string;
+    maxFundingGoal?: string;
+    sortBy?: string;
+    sortOrder?: 'asc' | 'desc';
+    search?: string;
+  }
+): Promise<GetCrowdfundingProjectsResponse> => {
+  const params = new URLSearchParams({
+    page: page.toString(),
+    limit: limit.toString(),
+  });
+
+  if (filters?.category) {
+    params.append('category', filters.category);
+  }
+
+  if (filters?.status) {
+    params.append('status', filters.status);
+  }
+
+  if (filters?.minFundingGoal) {
+    params.append('minFundingGoal', filters.minFundingGoal);
+  }
+
+  if (filters?.maxFundingGoal) {
+    params.append('maxFundingGoal', filters.maxFundingGoal);
+  }
+
+  if (filters?.sortBy) {
+    params.append('sortBy', filters.sortBy);
+  }
+
+  if (filters?.sortOrder) {
+    params.append('sortOrder', filters.sortOrder);
+  }
+
+  if (filters?.search) {
+    params.append('search', filters.search);
+  }
+
+  const queryString = params.toString();
+  const url = queryString ? `/crowdfunding?${queryString}` : '/crowdfunding';
+
+  const res = await api.get<GetCrowdfundingProjectsResponse>(url);
+  return res.data;
+};
+
+/**
+ * Get authenticated user's crowdfunding campaigns
+ * Get a paginated list of crowdfunding campaigns created by the authenticated user
+ *
+ * @param page - Page number for pagination (default: 1)
+ * @param limit - Number of items per page (default: 10)
+ * @param filters - Optional filters for the campaigns
+ * @param filters.category - Category of the campaign
+ * @param filters.status - Status of the campaign
+ * @param filters.minFundingGoal - Minimum funding goal of the campaign
+ * @param filters.maxFundingGoal - Maximum funding goal of the campaign
+ * @param filters.sortBy - Sort by field
+ * @param filters.sortOrder - Sort order ('asc' | 'desc')
+ * @param filters.search - Search term for campaigns
+ * @returns Promise<GetCrowdfundingProjectsResponse>
+ */
+export const getMyCrowdfundingProjects = async (
+  page = 1,
+  limit = 3,
+  filters?: {
+    category?: string;
+    status?: string;
+    minFundingGoal?: number;
+    maxFundingGoal?: number;
+    sortBy?: string;
+    sortOrder?: 'asc' | 'desc';
+    search?: string;
+  }
+): Promise<{
+  success: boolean;
+  message: string;
+  data: {
+    data: CrowdfundingCampaign[];
+  };
+  meta: {
+    pagination: {
+      page: number;
+      limit: number;
+      total: number;
+      totalPages: number;
+    };
+  };
+}> => {
+  const params = new URLSearchParams({
+    page: page.toString(),
+    limit: limit.toString(),
+  });
+
+  if (filters?.category) {
+    params.append('category', filters.category);
+  }
+
+  if (filters?.status) {
+    params.append('status', filters.status);
+  }
+
+  if (filters?.minFundingGoal !== undefined) {
+    params.append('minFundingGoal', filters.minFundingGoal.toString());
+  }
+
+  if (filters?.maxFundingGoal !== undefined) {
+    params.append('maxFundingGoal', filters.maxFundingGoal.toString());
+  }
+
+  if (filters?.sortBy) {
+    params.append('sortBy', filters.sortBy);
+  }
+
+  if (filters?.sortOrder) {
+    params.append('sortOrder', filters.sortOrder);
+  }
+
+  if (filters?.search) {
+    params.append('search', filters.search);
+  }
+
+  const queryString = params.toString();
+  const url = queryString
+    ? `/crowdfunding/me?${queryString}`
+    : '/crowdfunding/me';
+
+  const res = await api.get<{
+    success: boolean;
+    message: string;
+    data: {
+      data: CrowdfundingCampaign[];
+    };
+    meta: {
+      pagination: {
+        page: number;
+        limit: number;
+        total: number;
+        totalPages: number;
+      };
+    };
+  }>(url);
+  return res.data;
+};
+
+/**
+ * Get a single crowdfunding project by ID
+ */
+export const getCrowdfundingProject = async (
+  projectId: string
+): Promise<Crowdfunding> => {
+  const res = await api.get<ApiResponse<Crowdfunding>>(
+    `/crowdfunding/${projectId}`
+  );
+  // @ts-expect-error - data might be undefined
+  return res.data.data;
+};
+
+/**
+ * Get all milestones for a crowdfunding project
+ * @param projectId - Campaign ID or slug
+ * @returns Promise with array of milestones
+ */
+export const getCrowdfundingMilestones = async (
+  projectId: string
+): Promise<any[]> => {
+  const res = await api.get<ApiResponse<any[]>>(
+    `/crowdfunding/${projectId}/milestones`
+  );
+  return res.data.data || [];
+};
+
+/**
+ * Get detailed information about a specific milestone
+ * @param projectId - Campaign ID or slug
+ * @param milestoneId - Milestone ID
+ * @returns Promise with milestone details
+ */
+export const getCrowdfundingMilestone = async (
+  projectId: string,
+  milestoneId: string
+): Promise<any> => {
+  const res = await api.get<ApiResponse<any>>(
+    `/crowdfunding/${projectId}/milestones/${milestoneId}`
+  );
+  return res.data.data;
+};
+
+/**
+ * Validate milestone submission data before blockchain interaction
+ * Strictly validates milestone submission data (status, evidence, documents) without performing any side effects.
+ * Use this before blockchain interaction to ensure data integrity.
+ *
+ * @param campaignIdOrSlug - Campaign ID or slug
+ * @param milestoneIndex - Milestone index (0-based)
+ * @param data - Submission data to validate
+ * @param data.evidence - Evidence of milestone completion (min 10 characters, at least 3 words)
+ * @param data.status - Milestone status (completed | in_review | submitted)
+ * @param data.documents - Optional array of document URLs as supporting evidence
+ * @returns Promise with validation result
+ */
+export const validateMilestoneSubmission = async (
+  campaignIdOrSlug: string,
+  milestoneIndex: number,
+  data: {
+    status: 'completed' | 'in_review' | 'submitted';
+    proofOfWorkFiles: string[];
+    proofOfWorkLinks: string[];
+    submissionNotes: string;
+  }
+): Promise<{
+  validated: boolean;
+  data?: {
+    status: string;
+    evidence: string;
+    documents?: string[];
+  };
+  error?: string;
+}> => {
+  const res = await api.post<
+    ApiResponse<{
+      validated: boolean;
+      data?: {
+        status: string;
+        evidence: string;
+        documents?: string[];
+      };
+      error?: string;
+    }>
+  >(
+    `/crowdfunding/${campaignIdOrSlug}/milestones/${milestoneIndex}/validate-submission`,
+    data
+  );
+  // @ts-expect-error - data might be undefined
+  return res.data.data;
+};
+
+/**
+ * Update milestone status with optional evidence and documents
+ * When submitting milestone completion, evidence is required and will be strictly validated.
+ *
+ * @param campaignIdOrSlug - Campaign ID or slug
+ * @param milestoneIndex - Milestone index (0-based)
+ * @param data - Update data
+ * @param data.status - Milestone status (pending | in_progress | completed | cancelled)
+ * @param data.evidence - Evidence of milestone completion (required for submission, min 10 characters)
+ * @param data.documents - Array of document URLs as evidence
+ * @param data.completedAt - Date when milestone was completed
+ * @param data.releaseTransactionHash - Transaction hash for fund release
+ * @returns Promise with updated milestone data
+ */
+export const updateMilestone = async (
+  campaignIdOrSlug: string,
+  milestoneIndex: number,
+  data: {
+    status?: 'pending' | 'in_progress' | 'completed' | 'cancelled';
+    submissionNotes?: string;
+    proofOfWorkLinks?: string[];
+    proofOfWorkFiles?: string[];
+    completedAt?: string;
+    releaseTransactionHash?: string;
+  }
+): Promise<any> => {
+  const res = await api.put<any>(
+    `/crowdfunding/${campaignIdOrSlug}/milestones/${milestoneIndex}`,
+    data
+  );
+  return res.data;
+};
+
+/**
+ * Update a crowdfunding project
+ */
+export const updateCrowdfundingProject = async (
+  projectId: string,
+  data: UpdateCrowdfundingProjectRequest
+): Promise<UpdateCrowdfundingProjectResponse> => {
+  const res = await api.put<UpdateCrowdfundingProjectResponse>(
+    `/crowdfunding/${projectId}`,
+    data
+  );
+  return res.data;
+};
+
+/**
+ * Delete a crowdfunding project
+ */
+export const deleteCrowdfundingProject = async (
+  projectId: string
+): Promise<DeleteCrowdfundingProjectResponse> => {
+  const res = await api.delete<DeleteCrowdfundingProjectResponse>(
+    `/crowdfunding/${projectId}`
+  );
+  return res.data;
+};
+
+/**
+ * Fund a crowdfunding project
+ * Frontend handles all blockchain transactions and provides transaction hash
+ * @param projectId - The ID of the project to fund
+ * @param data - Funding data including amount and transactionHash
+ */
+export const fundCrowdfundingProject = async (
+  projectId: string,
+  data: FundCrowdfundingProjectRequest
+): Promise<FundCrowdfundingProjectResponse> => {
+  const res = await api.post<FundCrowdfundingProjectResponse>(
+    `/crowdfunding/projects/${projectId}/fund`,
+    data
+  );
+  return res.data;
+};
+
+export const voteProject = async (
+  projectId: string,
+  value: 1 | -1 = 1
+): Promise<VoteResponse> => {
+  const res = await api.post<VoteResponse>(`/projects/${projectId}/vote`, {
+    value,
+  });
+  return res.data;
+};
+
+/**
+ * Get votes for a project with pagination and filtering
+ */
+export const getProjectVotes = async (
+  projectId: string,
+  params?: GetProjectVotesRequest
+): Promise<GetProjectVotesResponse> => {
+  const queryParams = new URLSearchParams();
+
+  if (params?.page) {
+    queryParams.append('page', params.page.toString());
+  }
+
+  if (params?.limit) {
+    queryParams.append('limit', params.limit.toString());
+  }
+
+  if (params?.voteType) {
+    queryParams.append('voteType', params.voteType);
+  }
+
+  const queryString = queryParams.toString();
+  const url = queryString
+    ? `/projects/${projectId}/votes?${queryString}`
+    : `/projects/${projectId}/votes`;
+
+  const res = await api.get<GetProjectVotesResponse>(url);
+  return res.data;
+};
+
+/**
+ * Remove user's vote from a project
+ */
+export const removeProjectVote = async (
+  projectId: string
+): Promise<RemoveVoteResponse> => {
+  const res = await api.delete<RemoveVoteResponse>(
+    `/projects/${projectId}/vote`
+  );
+  return res.data;
+};
+
+export const contributeToProject = async (
+  projectId: string,
+  data: FundCrowdfundingProjectRequest
+): Promise<FundCrowdfundingProjectResponse> => {
+  const res = await api.post<FundCrowdfundingProjectResponse>(
+    `/crowdfunding/${projectId}/contribute`,
+    data
+  );
+  return res.data;
+};
diff --git a/components/project/CampaignLiveSuccess.tsx b/features/projects/components/CampaignLiveSuccess.tsx
similarity index 98%
rename from components/project/CampaignLiveSuccess.tsx
rename to features/projects/components/CampaignLiveSuccess.tsx
index 9739fe1bd..4f4bb380a 100644
--- a/components/project/CampaignLiveSuccess.tsx
+++ b/features/projects/components/CampaignLiveSuccess.tsx
@@ -15,7 +15,7 @@ import {
 } from 'lucide-react';
 
 import { CampaignDetails } from '@/lib/api/types';
-import { generateCampaignLink } from '@/lib/api/project';
+import { generateCampaignLink } from '@/features/projects/api';
 
 import { toast } from 'sonner';
 import ShareCampaignModal from './ShareCampaignModal';
@@ -127,7 +127,7 @@ const CampaignLiveSuccess: React.FC<CampaignLiveSuccessProps> = ({
           <div className='text-center'>
             <p className='mb-1 text-sm text-[#B5B5B5]'>Target</p>
             <p className='text-xl font-bold text-[#F5F5F5]'>
-              ${campaignDetails.fundAmount.toLocaleString()}.00
+              ${campaignDetails.amount.toLocaleString()}.00
             </p>
           </div>
         </div>
@@ -137,7 +137,7 @@ const CampaignLiveSuccess: React.FC<CampaignLiveSuccessProps> = ({
             <div
               className='bg-primary h-2 rounded-full transition-all duration-300'
               style={{
-                width: `${Math.min((campaignDetails.raisedAmount / campaignDetails.fundAmount) * 100, 100)}%`,
+                width: `${Math.min((campaignDetails.raisedAmount / campaignDetails.amount) * 100, 100)}%`,
               }}
             ></div>
           </div>
diff --git a/features/projects/components/Contributions/ContributionsDataTable.tsx b/features/projects/components/Contributions/ContributionsDataTable.tsx
new file mode 100644
index 000000000..c7c7a06b0
--- /dev/null
+++ b/features/projects/components/Contributions/ContributionsDataTable.tsx
@@ -0,0 +1,170 @@
+'use client';
+
+import * as React from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { DataTablePagination } from '@/components/ui/data-table-pagination';
+import { Contributor } from '@/features/projects/types';
+import { contributionsTableColumns } from './ContributionsTableColumns';
+import { Input } from '@/components/ui/input';
+import { Search } from 'lucide-react';
+
+interface ContributionsDataTableProps {
+  data: Contributor[];
+  loading?: boolean;
+}
+
+export function ContributionsDataTable({
+  data,
+  loading = false,
+}: ContributionsDataTableProps) {
+  const [sorting, setSorting] = React.useState<SortingState>([
+    { id: 'date', desc: true }, // Sort by date descending by default
+  ]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [globalFilter, setGlobalFilter] = React.useState('');
+
+  const table = useReactTable({
+    data,
+    columns: contributionsTableColumns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onGlobalFilterChange: setGlobalFilter,
+    globalFilterFn: 'includesString',
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      globalFilter,
+    },
+    initialState: {
+      pagination: {
+        pageSize: 10,
+      },
+    },
+  });
+
+  return (
+    <div className='space-y-4'>
+      {/* Search */}
+      <div className='flex items-center gap-2'>
+        <div className='relative max-w-sm flex-1'>
+          <Search className='absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-600' />
+          <Input
+            placeholder='Search contributors or messages...'
+            value={globalFilter ?? ''}
+            onChange={event => setGlobalFilter(String(event.target.value))}
+            className='focus-visible:border-primary bg-background-card border-[#2B2B2B] pl-9 text-white placeholder:text-gray-600'
+          />
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className='bg-background-card rounded-lg border border-[#2B2B2B]'>
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map(headerGroup => (
+              <TableRow
+                key={headerGroup.id}
+                className='border-[#2B2B2B] hover:bg-transparent'
+              >
+                {headerGroup.headers.map(header => (
+                  <TableHead
+                    key={header.id}
+                    className='font-medium text-[#B5B5B5]'
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell
+                  colSpan={contributionsTableColumns.length}
+                  className='h-24 text-center'
+                >
+                  <div className='flex items-center justify-center'>
+                    <div className='border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent' />
+                  </div>
+                </TableCell>
+              </TableRow>
+            ) : table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map(row => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                  className='border-[#2B2B2B] hover:bg-[#1A1A1A]'
+                >
+                  {row.getVisibleCells().map(cell => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={contributionsTableColumns.length}
+                  className='h-24 text-center'
+                >
+                  <div className='flex flex-col items-center gap-2'>
+                    <p className='text-gray-600'>No contributions yet</p>
+                    <p className='text-xs text-[#B5B5B5]'>
+                      Be the first to contribute to this project!
+                    </p>
+                  </div>
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Pagination */}
+      {table.getRowModel().rows?.length > 0 && (
+        <DataTablePagination table={table} loading={loading} />
+      )}
+    </div>
+  );
+}
diff --git a/features/projects/components/Contributions/ContributionsTableColumns.tsx b/features/projects/components/Contributions/ContributionsTableColumns.tsx
new file mode 100644
index 000000000..e355b9421
--- /dev/null
+++ b/features/projects/components/Contributions/ContributionsTableColumns.tsx
@@ -0,0 +1,136 @@
+'use client';
+
+import { ColumnDef } from '@tanstack/react-table';
+import { Contributor } from '@/features/projects/types';
+import { formatNumber } from '@/lib/utils';
+import { ExternalLink } from 'lucide-react';
+import { getTransactionExplorerUrl } from '@/lib/wallet-utils';
+import { Button } from '@/components/ui/button';
+import { format } from 'date-fns';
+import Link from 'next/link';
+
+export const contributionsTableColumns: ColumnDef<Contributor>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Contributor',
+    cell: ({ row }) => {
+      const contributor = row.original;
+      const isAnonymous = !contributor.name || contributor.name === 'Anonymous';
+
+      if (isAnonymous) {
+        return (
+          <div className='flex items-center gap-3'>
+            <div className='flex size-8 items-center justify-center rounded-full bg-[#2B2B2B]'>
+              <span className='text-xs text-gray-600'>?</span>
+            </div>
+            <span className='text-sm text-gray-600'>Anonymous</span>
+          </div>
+        );
+      }
+
+      const profileUrl = `/profile/${contributor.username}`;
+
+      return (
+        <Link
+          href={profileUrl}
+          className='flex items-center gap-3 transition-opacity hover:opacity-80'
+        >
+          {contributor.image ? (
+            <div
+              style={{ backgroundImage: `url(${contributor.image})` }}
+              className='size-8 rounded-full bg-white bg-cover bg-center'
+            />
+          ) : (
+            <div className='flex size-8 items-center justify-center rounded-full bg-[#2B2B2B]'>
+              <span className='text-xs text-white'>
+                {contributor.name.charAt(0).toUpperCase()}
+              </span>
+            </div>
+          )}
+          <div className='flex flex-col'>
+            <span className='text-sm font-medium text-white'>
+              {contributor.name}
+            </span>
+            {contributor.username && (
+              <span className='text-xs text-[#B5B5B5]'>
+                @{contributor.username}
+              </span>
+            )}
+          </div>
+        </Link>
+      );
+    },
+  },
+  {
+    accessorKey: 'amount',
+    header: 'Amount',
+    cell: ({ row }) => {
+      const amount = row.getValue('amount') as number;
+      return (
+        <div className='font-medium text-white'>
+          {formatNumber(amount)} <span className='text-[#B5B5B5]'>USD</span>
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: 'message',
+    header: 'Message',
+    cell: ({ row }) => {
+      const message = row.original.message;
+
+      if (!message) {
+        return <span className='text-sm text-gray-600 italic'>No message</span>;
+      }
+
+      return (
+        <div className='max-w-[300px]'>
+          <p className='line-clamp-2 text-sm text-white'>{message}</p>
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: 'date',
+    header: 'Date',
+    cell: ({ row }) => {
+      const date = row.getValue('date') as string;
+      try {
+        return (
+          <span className='text-sm text-[#B5B5B5]'>
+            {format(new Date(date), 'MMM dd, yyyy')}
+          </span>
+        );
+      } catch {
+        return <span className='text-sm text-gray-600'>Invalid date</span>;
+      }
+    },
+  },
+  {
+    accessorKey: 'transactionHash',
+    header: 'Transaction',
+    cell: ({ row }) => {
+      const txHash = row.getValue('transactionHash') as string;
+      const explorerUrl = getTransactionExplorerUrl(txHash);
+
+      return (
+        <Button
+          variant='ghost'
+          size='sm'
+          asChild
+          className='text-primary hover:text-primary hover:bg-primary/10'
+        >
+          <a
+            href={explorerUrl}
+            target='_blank'
+            rel='noopener noreferrer'
+            className='flex items-center gap-2'
+          >
+            <span className='text-xs'>View</span>
+            <ExternalLink className='h-3 w-3' />
+          </a>
+        </Button>
+      );
+    },
+  },
+];
diff --git a/components/landing-page/project/CreateProjectModal/Basic.tsx b/features/projects/components/CreateProjectModal/Basic.tsx
similarity index 84%
rename from components/landing-page/project/CreateProjectModal/Basic.tsx
rename to features/projects/components/CreateProjectModal/Basic.tsx
index 4d07e6734..0020cb2c6 100644
--- a/components/landing-page/project/CreateProjectModal/Basic.tsx
+++ b/features/projects/components/CreateProjectModal/Basic.tsx
@@ -21,6 +21,8 @@ export interface BasicFormData {
   projectName: string;
   logo: File | string | null;
   logoUrl?: string;
+  banner: File | string | null;
+  bannerUrl?: string;
   vision: string;
   category: string;
   githubUrl: string;
@@ -59,6 +61,8 @@ const basicSchema = z
     projectName: z.string().trim().min(1, 'Project name is required'),
     logo: z.any().optional(),
     logoUrl: z.string().optional(),
+    banner: z.any().optional(),
+    bannerUrl: z.string().optional(),
     vision: z
       .string()
       .trim()
@@ -96,6 +100,8 @@ const Basic = React.forwardRef<{ validate: () => boolean }, BasicProps>(
       projectName: initialData?.projectName || '',
       logo: initialData?.logo || null,
       logoUrl: initialData?.logoUrl || '',
+      banner: initialData?.banner || null,
+      bannerUrl: initialData?.bannerUrl || '',
       vision: initialData?.vision || '',
       category: initialData?.category || '',
       githubUrl: initialData?.githubUrl || '',
@@ -110,6 +116,8 @@ const Basic = React.forwardRef<{ validate: () => boolean }, BasicProps>(
           projectName: initialData.projectName || '',
           logo: initialData.logo || null,
           logoUrl: initialData.logoUrl || '',
+          banner: initialData.banner || null,
+          bannerUrl: initialData.bannerUrl || '',
           vision: initialData.vision || '',
           category: initialData.category || '',
           githubUrl: initialData.githubUrl || '',
@@ -583,6 +591,141 @@ const Basic = React.forwardRef<{ validate: () => boolean }, BasicProps>(
           </div>
         </div>
 
+        <div className='space-y-2'>
+          <Label className='text-white'>Banner Image (Optional)</Label>
+          <div className='relative'>
+            <input
+              type='file'
+              accept='image/jpeg,image/png'
+              onChange={e => {
+                const file = e.target.files?.[0];
+                if (file) {
+                  // Reusing similar logic to logo upload but inline here or abstracted
+                  // For brevity, duplicating logic with 'banner' key
+                  setTouched(prev => ({ ...prev, banner: true }));
+                  setUploadError(null);
+
+                  if (!file.type.match(/^image\/(jpeg|png)$/)) {
+                    setErrors(prev => ({
+                      ...prev,
+                      banner: 'Only JPEG and PNG files are allowed',
+                    }));
+                    return;
+                  }
+
+                  if (file.size > 5 * 1024 * 1024) {
+                    // Banner can be slightly larger maybe? Keeping 5MB
+                    setErrors(prev => ({
+                      ...prev,
+                      banner: 'File size must be less than 5MB',
+                    }));
+                    return;
+                  }
+
+                  handleInputChange('banner', file);
+                  setIsUploading(true);
+                  uploadService
+                    .uploadSingle(file, {
+                      folder: 'boundless/projects/banners',
+                      tags: ['project', 'banner'],
+                      transformation: {
+                        width: 1200,
+                        height: 400,
+                        crop: 'fill',
+                        quality: 'auto',
+                        format: 'auto',
+                      },
+                    })
+                    .then(uploadResult => {
+                      if (uploadResult.success) {
+                        handleInputChange(
+                          'bannerUrl',
+                          uploadResult.data.secure_url
+                        );
+                        setFormData(prev => {
+                          const newData = { ...prev, banner: null };
+                          onDataChange?.(newData);
+                          return newData;
+                        });
+                        setErrors(prev => ({ ...prev, banner: undefined }));
+                      } else {
+                        throw new Error(
+                          uploadResult.message || 'Upload failed'
+                        );
+                      }
+                    })
+                    .catch(error => {
+                      setUploadError(
+                        error instanceof Error
+                          ? error.message
+                          : 'Banner upload failed'
+                      );
+                      setErrors(prev => ({
+                        ...prev,
+                        banner: 'Failed to upload banner. Please try again.',
+                      }));
+                    })
+                    .finally(() => {
+                      setIsUploading(false);
+                    });
+                }
+              }}
+              className='hidden'
+              id='banner-upload'
+            />
+            <label
+              htmlFor='banner-upload'
+              className={cn(
+                'flex h-32 w-full cursor-pointer items-center justify-center rounded-[12px] border border-[#2B2B2B] bg-[#101010] transition-colors',
+                formData.banner
+                  ? 'border-primary bg-primary/5'
+                  : 'hover:border-primary border-[#484848]',
+                (submitted || touched.banner) &&
+                  errors.banner &&
+                  'border-red-500'
+              )}
+            >
+              {formData.banner || formData.bannerUrl ? (
+                <div className='relative flex h-full w-full flex-col items-center space-y-2'>
+                  <Image
+                    src={
+                      formData.bannerUrl ||
+                      (formData.banner
+                        ? URL.createObjectURL(formData.banner as File)
+                        : '')
+                    }
+                    alt='Project banner'
+                    className='h-full w-full rounded-[12px] object-cover'
+                    width={600}
+                    height={200}
+                    onError={e => {
+                      if (formData.banner && !formData.bannerUrl) {
+                        e.currentTarget.src = URL.createObjectURL(
+                          formData.banner as File
+                        );
+                      }
+                    }}
+                  />
+                  <div className='absolute inset-0 flex items-center justify-center rounded-[12px] bg-black/50 opacity-0 transition-opacity hover:opacity-100'>
+                    <span className='rounded bg-black/70 px-2 py-1 text-xs text-white'>
+                      Change Banner
+                    </span>
+                  </div>
+                </div>
+              ) : (
+                <div className='flex flex-col items-center space-y-2'>
+                  <span className='text-primary text-xs font-medium'>
+                    Click to upload banner
+                  </span>
+                  <span className='text-xs text-[#919191]'>
+                    1200x400 px recommended
+                  </span>
+                </div>
+              )}
+            </label>
+          </div>
+        </div>
+
         <div className='space-y-2'>
           <div className='flex items-center justify-between'>
             <Label className='text-white'>
diff --git a/components/landing-page/project/CreateProjectModal/Contact.tsx b/features/projects/components/CreateProjectModal/Contact.tsx
similarity index 100%
rename from components/landing-page/project/CreateProjectModal/Contact.tsx
rename to features/projects/components/CreateProjectModal/Contact.tsx
diff --git a/components/landing-page/project/CreateProjectModal/Details.tsx b/features/projects/components/CreateProjectModal/Details.tsx
similarity index 100%
rename from components/landing-page/project/CreateProjectModal/Details.tsx
rename to features/projects/components/CreateProjectModal/Details.tsx
diff --git a/components/landing-page/project/CreateProjectModal/Footer.tsx b/features/projects/components/CreateProjectModal/Footer.tsx
similarity index 100%
rename from components/landing-page/project/CreateProjectModal/Footer.tsx
rename to features/projects/components/CreateProjectModal/Footer.tsx
diff --git a/components/landing-page/project/CreateProjectModal/Header.tsx b/features/projects/components/CreateProjectModal/Header.tsx
similarity index 79%
rename from components/landing-page/project/CreateProjectModal/Header.tsx
rename to features/projects/components/CreateProjectModal/Header.tsx
index 383faa86f..9493d5d5a 100644
--- a/components/landing-page/project/CreateProjectModal/Header.tsx
+++ b/features/projects/components/CreateProjectModal/Header.tsx
@@ -1,12 +1,18 @@
 import { cn } from '@/lib/utils';
 import React from 'react';
 import { Button } from '@/components/ui/button';
-// import { ProjectFormData } from './index';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { ChevronDown } from 'lucide-react';
 
 interface HeaderProps {
   currentStep?: number;
   onBack?: () => void;
-  onTestData?: () => void;
+  onTestData?: (templateKey: string) => void;
 }
 
 const Header = ({ currentStep = 1, onBack, onTestData }: HeaderProps) => {
@@ -18,6 +24,13 @@ const Header = ({ currentStep = 1, onBack, onTestData }: HeaderProps) => {
     { id: 5, name: 'Contact' },
   ];
 
+  const templates = [
+    { key: 'defi', label: 'DeFi Protocol' },
+    { key: 'rwa', label: 'RWA Platform' },
+    { key: 'devtool', label: 'DevTool' },
+    { key: 'amm', label: 'AMM' },
+  ];
+
   return (
     <div className='bg-background sticky top-0 z-10 mb-[20px] space-y-[50px] overflow-x-hidden px-4 md:px-[50px] lg:mb-[40px] lg:px-[75px] xl:px-[150px]'>
       <div className='flex items-center justify-between gap-4'>
@@ -25,7 +38,7 @@ const Header = ({ currentStep = 1, onBack, onTestData }: HeaderProps) => {
           {currentStep > 1 && onBack && (
             <button
               onClick={onBack}
-              className='absoluste top-0 -left-[50px] z-[9999] flex h-8 w-8 items-center justify-center rounded-full border border-[#484848] transition-colors duration-200 hover:border-white'
+              className='absolute top-0 -left-[50px] z-[9999] flex h-8 w-8 items-center justify-center rounded-full border border-[#484848] transition-colors duration-200 hover:border-white'
               aria-label='Go back to previous step'
             >
               <svg
@@ -51,16 +64,30 @@ const Header = ({ currentStep = 1, onBack, onTestData }: HeaderProps) => {
           </h1>
         </div>
 
-        {/* Test Data Button - Only show in development */}
+        {/* Test Data Dropdown - Only show in development */}
         {process.env.NODE_ENV === 'development' && onTestData && (
-          <Button
-            onClick={onTestData}
-            variant='outline'
-            size='sm'
-            className='border-primary/20 text-primary hover:bg-primary/10 bg-transparent'
-          >
-            Fill Test Data
-          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant='outline'
+                size='sm'
+                className='border-primary/20 text-primary hover:bg-primary/10 gap-2 bg-transparent'
+              >
+                Test Data <ChevronDown className='h-4 w-4' />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align='end' className='z-[100] w-48'>
+              {templates.map(template => (
+                <DropdownMenuItem
+                  className='text-primary hover:bg-primary/10'
+                  key={template.key}
+                  onClick={() => onTestData(template.key)}
+                >
+                  {template.label}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
         )}
       </div>
 
@@ -135,12 +162,6 @@ const Header = ({ currentStep = 1, onBack, onTestData }: HeaderProps) => {
                       )}
                     </div>
                   </div>
-                  {/* {isActive && (
-                    <div
-                      className='mt-2 h-0.5 w-full bg-green-500'
-                      style={{ width: 'calc(100% + 1rem)' }}
-                    />
-                  )} */}
                 </div>
               </div>
             );
diff --git a/components/landing-page/project/CreateProjectModal/LoadingScreen.tsx b/features/projects/components/CreateProjectModal/LoadingScreen.tsx
similarity index 100%
rename from components/landing-page/project/CreateProjectModal/LoadingScreen.tsx
rename to features/projects/components/CreateProjectModal/LoadingScreen.tsx
diff --git a/components/landing-page/project/CreateProjectModal/Milestones.tsx b/features/projects/components/CreateProjectModal/Milestones.tsx
similarity index 100%
rename from components/landing-page/project/CreateProjectModal/Milestones.tsx
rename to features/projects/components/CreateProjectModal/Milestones.tsx
diff --git a/components/landing-page/project/CreateProjectModal/SuccessScreen.tsx b/features/projects/components/CreateProjectModal/SuccessScreen.tsx
similarity index 100%
rename from components/landing-page/project/CreateProjectModal/SuccessScreen.tsx
rename to features/projects/components/CreateProjectModal/SuccessScreen.tsx
diff --git a/components/landing-page/project/CreateProjectModal/Team.tsx b/features/projects/components/CreateProjectModal/Team.tsx
similarity index 100%
rename from components/landing-page/project/CreateProjectModal/Team.tsx
rename to features/projects/components/CreateProjectModal/Team.tsx
diff --git a/components/landing-page/project/CreateProjectModal/TransactionSigningScreen.tsx b/features/projects/components/CreateProjectModal/TransactionSigningScreen.tsx
similarity index 100%
rename from components/landing-page/project/CreateProjectModal/TransactionSigningScreen.tsx
rename to features/projects/components/CreateProjectModal/TransactionSigningScreen.tsx
diff --git a/components/landing-page/project/CreateProjectModal/index copy.tsx b/features/projects/components/CreateProjectModal/index copy.tsx
similarity index 100%
rename from components/landing-page/project/CreateProjectModal/index copy.tsx
rename to features/projects/components/CreateProjectModal/index copy.tsx
diff --git a/features/projects/components/CreateProjectModal/index.tsx b/features/projects/components/CreateProjectModal/index.tsx
new file mode 100644
index 000000000..5bac51666
--- /dev/null
+++ b/features/projects/components/CreateProjectModal/index.tsx
@@ -0,0 +1,192 @@
+import BoundlessSheet from '@/components/sheet/boundless-sheet';
+import { MultiStepLoader } from '@/components/ui/multi-step-loader';
+import React from 'react';
+import Header from './Header';
+import Footer from './Footer';
+import Basic from './Basic';
+import Details from './Details';
+import Milestones from './Milestones';
+import Team from './Team';
+import Contact from './Contact';
+import LoadingScreen from './LoadingScreen';
+import SuccessScreen from './SuccessScreen';
+import TransactionSigningScreen from './TransactionSigningScreen';
+import { cn } from '@/lib/utils';
+import { useCreateProject } from './useCreateProject';
+
+interface CreateProjectModalProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const CreateProjectModal = ({ open, setOpen }: CreateProjectModalProps) => {
+  const {
+    currentStep,
+    isSubmitting,
+    submitErrors,
+    showSuccess,
+    isLoading,
+    flowStep,
+    formData,
+    stepRefs,
+    contentRef,
+    isSigningTransaction,
+    handleBack,
+    handleContinue,
+    handleRetry,
+    handleSignTransaction,
+    handleReset,
+    handleTestData,
+    handleDataChange,
+    isStepValid,
+    loaderActive,
+    loadingStates,
+    loadingStateIndex,
+  } = useCreateProject(open, setOpen);
+
+  const renderStepContent = () => {
+    // Handle the flow states
+    if (flowStep === 'initializing' || (isLoading && flowStep !== 'signing')) {
+      return <LoadingScreen />;
+    }
+    if (flowStep === 'success' || showSuccess) {
+      return <SuccessScreen onContinue={handleReset} />;
+    }
+    // Show loading screen during signing and confirming states
+    if (
+      flowStep === 'signing' ||
+      flowStep === 'confirming' ||
+      isSigningTransaction
+    ) {
+      return (
+        <TransactionSigningScreen
+          onSign={handleSignTransaction}
+          isSigning={true}
+          flowStep={
+            flowStep === 'signing' || flowStep === 'confirming'
+              ? flowStep
+              : 'confirming'
+          }
+          onRetry={handleRetry}
+          hasError={submitErrors.length > 0}
+          errorMessage={submitErrors[0]}
+        />
+      );
+    }
+
+    switch (currentStep) {
+      case 1:
+        return (
+          <Basic
+            ref={stepRefs.basic}
+            onDataChange={data => handleDataChange('basic', data)}
+            initialData={formData.basic}
+          />
+        );
+      case 2:
+        return (
+          <Details
+            ref={stepRefs.details}
+            onDataChange={data => handleDataChange('details', data)}
+            initialData={formData.details}
+          />
+        );
+      case 3:
+        return (
+          <Milestones
+            ref={stepRefs.milestones}
+            onDataChange={data => handleDataChange('milestones', data)}
+            initialData={formData.milestones}
+          />
+        );
+      case 4:
+        return (
+          <Team
+            ref={stepRefs.team}
+            onDataChange={data => handleDataChange('team', data)}
+            initialData={formData.team}
+          />
+        );
+      case 5:
+        return (
+          <Contact
+            ref={stepRefs.contact}
+            onDataChange={data => handleDataChange('contact', data)}
+            initialData={formData.contact}
+          />
+        );
+      default:
+        return (
+          <Basic
+            ref={stepRefs.basic}
+            onDataChange={data => handleDataChange('basic', data)}
+            initialData={formData.basic}
+          />
+        );
+    }
+  };
+
+  return (
+    <>
+      <MultiStepLoader
+        loadingStates={loadingStates}
+        loading={loaderActive}
+        duration={1000}
+        currentState={loadingStateIndex}
+      />
+      <BoundlessSheet
+        contentClassName='h-[90vh] overflow-y-auto !overflow-x-hidden'
+        open={open}
+        setOpen={setOpen}
+      >
+        {flowStep === 'form' && (
+          <Header
+            currentStep={currentStep}
+            onBack={handleBack}
+            onTestData={handleTestData}
+          />
+        )}
+        <div
+          ref={contentRef}
+          className={cn(
+            'min-h-[calc(55vh)] px-4 transition-opacity duration-100 md:px-[50px] lg:px-[75px] xl:px-[150px]'
+          )}
+        >
+          {flowStep !== 'form' ? (
+            <div className='flex h-full items-center justify-center'>
+              {renderStepContent()}
+            </div>
+          ) : (
+            <>
+              {submitErrors.length > 0 && (
+                <div className='mb-4 rounded-md border border-red-500/40 bg-red-500/10 p-4 text-red-200'>
+                  <p className='mb-2 font-medium text-red-300'>
+                    Please fix the following errors before submitting:
+                  </p>
+                  <ul className='list-disc space-y-1 pl-5'>
+                    {submitErrors.map((e, idx) => (
+                      <li key={idx} className='text-sm'>
+                        {e}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+              <div key={currentStep}>{renderStepContent()}</div>
+            </>
+          )}
+        </div>
+        {flowStep === 'form' && (
+          <Footer
+            currentStep={currentStep}
+            onContinue={handleContinue}
+            isStepValid={isStepValid}
+            isSubmitting={isSubmitting}
+          />
+        )}
+      </BoundlessSheet>
+    </>
+  );
+};
+
+export default CreateProjectModal;
diff --git a/components/landing-page/project/CreateProjectModal/md-editor-custom.css b/features/projects/components/CreateProjectModal/md-editor-custom.css
similarity index 100%
rename from components/landing-page/project/CreateProjectModal/md-editor-custom.css
rename to features/projects/components/CreateProjectModal/md-editor-custom.css
diff --git a/features/projects/components/CreateProjectModal/schema.ts b/features/projects/components/CreateProjectModal/schema.ts
new file mode 100644
index 000000000..2a7e6510f
--- /dev/null
+++ b/features/projects/components/CreateProjectModal/schema.ts
@@ -0,0 +1,185 @@
+import { z } from 'zod';
+
+export const milestoneSchema = z
+  .object({
+    id: z.string().optional(),
+    title: z.string().trim().min(1),
+    description: z.string().trim().min(1),
+    startDate: z.string().min(1),
+    endDate: z.string().min(1),
+  })
+  .superRefine((val, ctx) => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    const startDate = new Date(val.startDate);
+    const endDate = new Date(val.endDate);
+
+    // Check if start date is in the future (at least tomorrow)
+    if (startDate <= today) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['startDate'],
+        message: 'Start date must be at least tomorrow',
+      });
+    }
+
+    // Check if end date is after start date
+    if (endDate <= startDate) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['endDate'],
+        message: 'End date must be after start date',
+      });
+    }
+
+    // Check if milestone has reasonable duration (at least 1 week)
+    const durationInDays = Math.ceil(
+      (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)
+    );
+    if (durationInDays < 7) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['endDate'],
+        message: 'Milestone duration must be at least 1 week',
+      });
+    }
+
+    // Check if milestone is not too far in the future (max 2 years)
+    const maxFutureDate = new Date();
+    maxFutureDate.setFullYear(maxFutureDate.getFullYear() + 2);
+    if (startDate > maxFutureDate) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['startDate'],
+        message: 'Start date cannot be more than 2 years in the future',
+      });
+    }
+  });
+
+export const projectSchema = z.object({
+  basic: z.object({
+    projectName: z.string().trim().min(1),
+    logo: z.any().optional(),
+    logoUrl: z.string().optional(),
+    banner: z.any().optional(),
+    bannerUrl: z.string().optional(),
+    vision: z.string().trim().min(1).max(300),
+    category: z.string().trim().min(1),
+    githubUrl: z
+      .string()
+      .trim()
+      .optional()
+      .or(z.literal(''))
+      .refine(
+        v => !v || /^https?:\/\/.+/i.test(v) || /^[\w.-]+\.[a-z]{2,}$/i.test(v),
+        {
+          message:
+            'Please enter a valid URL (with or without https), e.g., https://github.com or github.com',
+        }
+      )
+      .optional(),
+    websiteUrl: z
+      .string()
+      .trim()
+      .optional()
+      .or(z.literal(''))
+      .refine(
+        v => !v || /^https?:\/\/.+/i.test(v) || /^[\w.-]+\.[a-z]{2,}$/i.test(v),
+        {
+          message:
+            'Please enter a valid URL (with or without https), e.g., https://boundlessfi.xyz or boundlessfi.xyz',
+        }
+      )
+      .optional(),
+    demoVideoUrl: z
+      .string()
+      .trim()
+      .optional()
+      .or(z.literal(''))
+      .refine(
+        v => !v || /^https?:\/\/.+/i.test(v) || /^[\w.-]+\.[a-z]{2,}$/i.test(v),
+        {
+          message:
+            'Please enter a valid URL (with or without https), e.g., https://demo.com or demo.com',
+        }
+      )
+      .optional(),
+    socialLinks: z.array(z.string()).min(1),
+  }),
+  details: z.object({
+    vision: z.string().trim().min(1),
+  }),
+  milestones: z.object({
+    fundingAmount: z
+      .string()
+      .refine(v => !isNaN(parseFloat(v)) && parseFloat(v) > 0),
+    milestones: z
+      .array(milestoneSchema)
+      .min(1)
+      .superRefine((milestones, ctx) => {
+        // Check that milestones are in chronological order
+        for (let i = 0; i < milestones.length - 1; i++) {
+          const currentEndDate = new Date(milestones[i].endDate);
+          const nextStartDate = new Date(milestones[i + 1].startDate);
+
+          // Allow some overlap (up to 1 day) but not significant overlap
+          const daysBetween = Math.ceil(
+            (nextStartDate.getTime() - currentEndDate.getTime()) /
+              (1000 * 60 * 60 * 24)
+          );
+
+          if (daysBetween < -1) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              path: [i + 1, 'startDate'],
+              message: `Milestone ${i + 2} start date should be after milestone ${i + 1} end date`,
+            });
+          }
+        }
+
+        // Check that total project timeline is reasonable (max 3 years)
+        if (milestones.length > 0) {
+          const firstStartDate = new Date(milestones[0].startDate);
+          const lastEndDate = new Date(
+            milestones[milestones.length - 1].endDate
+          );
+          const totalDurationInDays = Math.ceil(
+            (lastEndDate.getTime() - firstStartDate.getTime()) /
+              (1000 * 60 * 60 * 24)
+          );
+
+          if (totalDurationInDays > 1095) {
+            // 3 years
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              path: ['milestones'],
+              message: 'Total project timeline cannot exceed 3 years',
+            });
+          }
+        }
+      }),
+  }),
+  team: z
+    .object({
+      members: z
+        .array(
+          z.object({
+            id: z.string(),
+            email: z.string().email(),
+            role: z.string().optional(),
+          })
+        )
+        .optional()
+        .default([]),
+    })
+    .optional()
+    .default({ members: [] }),
+  contact: z.object({
+    telegram: z.string().trim().min(1),
+    backupType: z.enum(['discord', 'whatsapp']),
+    backupContact: z.string().trim().min(1),
+    agreeToTerms: z.literal(true),
+    agreeToPrivacy: z.literal(true),
+  }),
+});
diff --git a/features/projects/components/CreateProjectModal/test-data.ts b/features/projects/components/CreateProjectModal/test-data.ts
new file mode 100644
index 000000000..a3da6e787
--- /dev/null
+++ b/features/projects/components/CreateProjectModal/test-data.ts
@@ -0,0 +1,220 @@
+import { ProjectFormData } from './types';
+
+export const TEST_PROJECT_TEMPLATES: Record<string, ProjectFormData> = {
+  defi: {
+    basic: {
+      projectName: 'Nebula Finance',
+      logo: 'https://res.cloudinary.com/danuy5rqb/image/upload/v1759431246/boundless/projects/logos/jfc5v0l6xec0bdhmliet.png',
+      logoUrl:
+        'https://res.cloudinary.com/danuy5rqb/image/upload/v1759431246/boundless/projects/logos/jfc5v0l6xec0bdhmliet.png',
+      banner:
+        'https://images.unsplash.com/photo-1639762681485-074b7f938ba0?auto=format&fit=crop&q=80&w=2832&ixlib=rb-4.0.3',
+      bannerUrl:
+        'https://images.unsplash.com/photo-1639762681485-074b7f938ba0?auto=format&fit=crop&q=80&w=2832&ixlib=rb-4.0.3',
+      vision:
+        'Nebula Finance is redefining decentralized finance with real-time, cross-chain yield aggregation and AI-driven investment strategies for both retail and institutional users.',
+      category: 'DeFi & Finance',
+      githubUrl: 'https://github.com/nebula-finance/nebula-protocol',
+      websiteUrl: 'https://nebula.finance',
+      demoVideoUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      socialLinks: [
+        'https://twitter.com/nebula_defi',
+        'https://discord.gg/nebula-finance',
+        'https://t.me/nebula_defi',
+      ],
+    },
+    details: {
+      vision: `# Nebula Finance Vision
+
+## Overview
+Nebula Finance is a next-generation DeFi protocol that enables users to earn optimized yields across multiple blockchains without needing to actively manage assets.
+
+## Core Features
+- **AI Yield Optimization**: Machine-learning models analyze yield opportunities in real-time.
+- **Cross-Chain Aggregation**: Unified interface across Ethereum, Arbitrum, and Optimism.
+- **Decentralized Governance**: Token holders influence strategy and emissions.
+
+## Roadmap
+- **Q1 2026**: Smart contract audit and testnet launch
+- **Q2 2026**: Mainnet launch with ETH, ARB, integrations
+- **Q3 2026**: Cross-chain dashboard`,
+    },
+    milestones: {
+      fundingAmount: '250000',
+      milestones: [
+        {
+          id: 'milestone-1',
+          title: 'Protocol Architecture & Smart Contracts',
+          description:
+            'Design core protocol architecture and write smart contracts for vaults, rebalancing, and governance.',
+          startDate: '2026-06-01',
+          endDate: '2026-08-30',
+        },
+        {
+          id: 'milestone-2',
+          title: 'UI/UX Development',
+          description:
+            'Design and develop the frontend interface with wallet integrations (MetaMask, WalletConnect).',
+          startDate: '2026-09-01',
+          endDate: '2026-10-31',
+        },
+        {
+          id: 'milestone-3',
+          title: 'Security Audits & Launch',
+          description:
+            'Conduct security audits, final integration tests, and launch the protocol on mainnet.',
+          startDate: '2026-11-01',
+          endDate: '2026-12-31',
+        },
+      ],
+    },
+    team: {
+      members: [
+        { id: 'm1', email: 'alice@nebula.finance' },
+        { id: 'm2', email: 'bob@nebula.finance' },
+      ],
+    },
+    contact: {
+      telegram: 'nebula_support',
+      backupType: 'discord',
+      backupContact: 'nebula_admin#0420',
+      agreeToTerms: true,
+      agreeToPrivacy: true,
+    },
+  },
+  rwa: {
+    basic: {
+      projectName: 'RealEstate Tokenizer',
+      logo: 'https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&q=80&w=1000',
+      logoUrl:
+        'https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&q=80&w=1000',
+      banner:
+        'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=2070',
+      bannerUrl:
+        'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=2070',
+      vision:
+        'Democratizing access to premium real estate investments through fractionalized NFT ownership and compliant security tokens.',
+      category: 'Real World Assets',
+      websiteUrl: 'https://retokenizer.io',
+      socialLinks: ['https://twitter.com/retokenizer'],
+    },
+    details: {
+      vision: `# RealEstate Tokenizer
+
+## Problem
+High barrier to entry for real estate investment.
+
+## Solution
+Fractionalized ownership via blockchain.
+
+## Legal
+Fully compliant with REG D/S.`,
+    },
+    milestones: {
+      fundingAmount: '500000',
+      milestones: [
+        {
+          id: 'm1',
+          title: 'Legal Framework & Entity Setup',
+          description: 'Establish SPVs and legal opinions for tokenization.',
+          startDate: '2026-03-01',
+          endDate: '2026-05-01',
+        },
+        {
+          id: 'm2',
+          title: 'Platform MVP',
+          description: 'Develop the marketplace for trading property tokens.',
+          startDate: '2026-05-02',
+          endDate: '2026-08-01',
+        },
+      ],
+    },
+    team: { members: [] },
+    contact: {
+      telegram: 're_support',
+      backupType: 'whatsapp',
+      backupContact: '+15550199',
+      agreeToTerms: true,
+      agreeToPrivacy: true,
+    },
+  },
+  devtool: {
+    basic: {
+      projectName: 'Solidity Linter Pro',
+      logo: 'https://images.unsplash.com/photo-1580894732444-8ecded7900cd?auto=format&fit=crop&q=80&w=1000',
+      logoUrl:
+        'https://images.unsplash.com/photo-1580894732444-8ecded7900cd?auto=format&fit=crop&q=80&w=1000',
+      banner:
+        'https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&q=80&w=2070',
+      bannerUrl:
+        'https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&q=80&w=2070',
+      vision:
+        'An advanced static analysis tool for Solidity smart contracts that detects vulnerabilities and gas optimizations in real-time.',
+      category: 'Developer Tools',
+      githubUrl: 'https://github.com/sol-linter/pro',
+    },
+    details: {
+      vision: `# Solidity Linter Pro
+      
+Focuses on security and gas efficiency.`,
+    },
+    milestones: {
+      fundingAmount: '50000',
+      milestones: [
+        {
+          id: 'm1',
+          title: 'Core Analyzer Engine',
+          description: 'Implement AST parsing and basic rule set.',
+          startDate: '2026-02-01',
+          endDate: '2026-04-01',
+        },
+      ],
+    },
+    team: { members: [] },
+    contact: {
+      telegram: 'sollinter',
+      backupType: 'discord',
+      backupContact: 'dev#1234',
+      agreeToTerms: true,
+      agreeToPrivacy: true,
+    },
+  },
+  amm: {
+    basic: {
+      projectName: 'LiquidSwap AMM',
+      logo: 'https://images.unsplash.com/photo-1622630998477-20aa696fab05?auto=format&fit=crop&q=80&w=1000',
+      logoUrl:
+        'https://images.unsplash.com/photo-1622630998477-20aa696fab05?auto=format&fit=crop&q=80&w=1000',
+      banner:
+        'https://images.unsplash.com/photo-1642104704074-907c0698cbd9?auto=format&fit=crop&q=80&w=2832',
+      bannerUrl:
+        'https://images.unsplash.com/photo-1642104704074-907c0698cbd9?auto=format&fit=crop&q=80&w=2832',
+      vision:
+        'A next-gen AMM with concentrated liquidity and impermanent loss protection mechanisms.',
+      category: 'DeFi & Finance',
+    },
+    details: {
+      vision: 'Concentrated liquidity AMM.',
+    },
+    milestones: {
+      fundingAmount: '150000',
+      milestones: [
+        {
+          id: 'm1',
+          title: 'Smart Contracts',
+          description: 'Swap router and liquidity pools.',
+          startDate: '2026-07-01',
+          endDate: '2026-09-01',
+        },
+      ],
+    },
+    team: { members: [] },
+    contact: {
+      telegram: 'liquidswap',
+      backupType: 'discord',
+      backupContact: 'admin#9999',
+      agreeToTerms: true,
+      agreeToPrivacy: true,
+    },
+  },
+};
diff --git a/features/projects/components/CreateProjectModal/types.ts b/features/projects/components/CreateProjectModal/types.ts
new file mode 100644
index 000000000..ce589b120
--- /dev/null
+++ b/features/projects/components/CreateProjectModal/types.ts
@@ -0,0 +1,13 @@
+import { BasicFormData } from './Basic';
+import { DetailsFormData } from './Details';
+import { MilestonesFormData } from './Milestones';
+import { TeamFormData } from './Team';
+import { ContactFormData } from './Contact';
+
+export interface ProjectFormData {
+  basic: Partial<BasicFormData>;
+  details: Partial<DetailsFormData>;
+  milestones: Partial<MilestonesFormData>;
+  team: Partial<TeamFormData>;
+  contact: Partial<ContactFormData>;
+}
diff --git a/features/projects/components/CreateProjectModal/useCreateProject.ts b/features/projects/components/CreateProjectModal/useCreateProject.ts
new file mode 100644
index 000000000..c12d23b64
--- /dev/null
+++ b/features/projects/components/CreateProjectModal/useCreateProject.ts
@@ -0,0 +1,537 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { createCrowdfundingProject } from '@/features/projects/api';
+import { CreateCrowdfundingProjectRequest } from '@/lib/api/types';
+import { useWalletProtection } from '@/hooks/use-wallet-protection';
+import { useWalletContext } from '@/components/providers/wallet-provider';
+import { signTransaction } from '@/lib/config/wallet-kit';
+import {
+  useInitializeEscrow,
+  useSendTransaction,
+} from '@trustless-work/escrow';
+import {
+  InitializeMultiReleaseEscrowPayload,
+  EscrowType,
+  EscrowRequestResponse,
+  Status,
+  InitializeMultiReleaseEscrowResponse,
+} from '@trustless-work/escrow';
+import { projectSchema } from './schema';
+import { mapFormDataToApiRequest } from './utils';
+import { ProjectFormData } from './types';
+
+export type StepHandle = {
+  validate: () => boolean;
+  markSubmitted?: () => void;
+};
+
+export const useCreateProject = (
+  open: boolean,
+  setOpen: (open: boolean) => void
+) => {
+  const [currentStep, setCurrentStep] = useState(1);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitErrors, setSubmitErrors] = useState<string[]>([]);
+  const [showSuccess, setShowSuccess] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [unsignedTransaction, setUnsignedTransaction] = useState<string | null>(
+    null
+  );
+  const [isSigningTransaction, setIsSigningTransaction] = useState(false);
+
+  // Escrow hooks
+  const { deployEscrow } = useInitializeEscrow();
+  const { sendTransaction } = useSendTransaction();
+
+  // Flow state // Extract these types to types.ts later if reused elsewhere
+  const [flowStep, setFlowStep] = useState<
+    'form' | 'initializing' | 'signing' | 'confirming' | 'success'
+  >('form');
+
+  const { walletAddress } = useWalletContext() || {
+    walletAddress: '',
+  };
+
+  // Form data state
+  const [formData, setFormData] = useState<ProjectFormData>({
+    basic: {},
+    details: {},
+    milestones: {},
+    team: {},
+    contact: {},
+  });
+
+  // Refs for step components to access validation methods
+  const stepRefs = {
+    basic: useRef<StepHandle>(null),
+    details: useRef<StepHandle>(null),
+    milestones: useRef<StepHandle>(null),
+    team: useRef<StepHandle>(null),
+    contact: useRef<StepHandle>(null),
+  };
+
+  // Ref for the scrollable content container
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // Wallet signing hooks
+  const { requireWallet } = useWalletProtection({
+    actionName: 'sign project creation transaction',
+  });
+
+  // Reset scroll position when step changes with smooth transition
+  useEffect(() => {
+    if (currentStep === 1) return; // Skip for initial load
+
+    const resetScroll = () => {
+      window.scrollTo(0, 0);
+
+      if (contentRef.current) {
+        const scrollableParent =
+          contentRef.current.closest('[data-radix-scroll-area-viewport]') ||
+          contentRef.current.closest('.overflow-y-auto') ||
+          contentRef.current.parentElement?.querySelector('.overflow-y-auto');
+
+        if (scrollableParent) {
+          scrollableParent.scrollTop = 0;
+        } else {
+          contentRef.current.scrollTop = 0;
+        }
+
+        const allScrollableElements =
+          document.querySelectorAll('.overflow-y-auto');
+        allScrollableElements.forEach(element => {
+          if (element.contains(contentRef.current)) {
+            element.scrollTop = 0;
+          }
+        });
+      }
+    };
+
+    resetScroll();
+  }, [currentStep]);
+
+  // Auto-trigger transaction signing when we reach the signing state
+  useEffect(() => {
+    if (
+      flowStep === 'signing' &&
+      unsignedTransaction &&
+      !isSigningTransaction &&
+      submitErrors.length === 0
+    ) {
+      handleSignTransaction();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    flowStep,
+    unsignedTransaction,
+    isSigningTransaction,
+    submitErrors.length,
+  ]);
+
+  const handleBack = () => {
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  const getStepKey = (step: number): keyof typeof stepRefs => {
+    switch (step) {
+      case 1:
+        return 'basic';
+      case 2:
+        return 'details';
+      case 3:
+        return 'milestones';
+      case 4:
+        return 'team';
+      case 5:
+        return 'contact';
+      default:
+        return 'basic';
+    }
+  };
+
+  const validateCurrentStep = (): boolean => {
+    const stepRef = stepRefs[getStepKey(currentStep)];
+    return stepRef?.current?.validate() ?? true;
+  };
+
+  const handleContinue = async () => {
+    const key = getStepKey(currentStep);
+    stepRefs[key].current?.markSubmitted?.();
+
+    if (!validateCurrentStep()) {
+      return;
+    }
+
+    if (currentStep < 5) {
+      setCurrentStep(currentStep + 1);
+      return;
+    }
+
+    await handleSubmit();
+  };
+
+  const handleRetry = () => {
+    setSubmitErrors([]);
+    setFlowStep('signing');
+  };
+
+  const handleCreateProject = async (
+    contractId: string,
+    transactionHash: string
+  ) => {
+    try {
+      const apiRequest = mapFormDataToApiRequest(formData);
+
+      const projectRequest: CreateCrowdfundingProjectRequest = {
+        ...apiRequest,
+        escrowId: contractId,
+        transactionHash,
+      };
+
+      await createCrowdfundingProject(projectRequest);
+
+      setFlowStep('success');
+      setShowSuccess(true);
+      setIsSigningTransaction(false);
+      setIsSubmitting(false);
+      setLoaderActive(false);
+    } catch (error) {
+      let errorMessage = 'Failed to create project. Please try again.';
+
+      if (error instanceof Error) {
+        errorMessage = error.message;
+      }
+
+      setSubmitErrors([errorMessage]);
+      setIsSigningTransaction(false);
+      setFlowStep('signing');
+      setLoaderActive(false);
+    }
+  };
+
+  const handleSignTransaction = async () => {
+    if (!unsignedTransaction) {
+      setSubmitErrors(['No transaction to sign']);
+      return;
+    }
+
+    const walletValid = await requireWallet(async () => {
+      setIsSigningTransaction(true);
+      setFlowStep('confirming');
+      setLoaderActive(true); // Re-activate loader
+      setLoadingStateIndex(3); // Deploying Escrow (Signing & Sending)
+
+      try {
+        const signedXdr = await signTransaction({
+          unsignedTransaction,
+          address: walletAddress || '',
+        });
+
+        const sendResponse = await sendTransaction(signedXdr);
+
+        if (
+          'status' in sendResponse &&
+          sendResponse.status !== ('SUCCESS' as Status)
+        ) {
+          const errorMessage =
+            'message' in sendResponse &&
+            typeof sendResponse.message === 'string'
+              ? sendResponse.message
+              : 'Failed to send transaction';
+          throw new Error(errorMessage);
+        }
+
+        if (!('contractId' in sendResponse)) {
+          throw new Error('Response does not contain contractId');
+        }
+
+        const responseData =
+          sendResponse as InitializeMultiReleaseEscrowResponse;
+        const contractId = responseData.contractId;
+        const transactionHash = contractId;
+
+        setLoadingStateIndex(4); // Finalizing Project
+        await handleCreateProject(contractId, transactionHash);
+      } catch (error) {
+        setLoaderActive(false);
+        let errorMessage = 'Failed to sign transaction. Please try again.';
+
+        if (error instanceof Error) {
+          if (error.message.includes('User rejected')) {
+            errorMessage =
+              'Transaction signing was cancelled. Please try again.';
+          } else if (error.message.includes('Invalid transaction')) {
+            errorMessage =
+              'Invalid transaction format. Please contact support.';
+          } else if (error.message.includes('Network')) {
+            errorMessage =
+              'Network error. Please check your connection and try again.';
+          } else if (error.message.includes('Wallet not connected')) {
+            errorMessage =
+              'Wallet is not connected. Please reconnect your wallet.';
+          } else {
+            errorMessage = error.message;
+          }
+        }
+
+        setSubmitErrors([errorMessage]);
+        setIsSigningTransaction(false);
+        setFlowStep('signing');
+      }
+    });
+
+    if (!walletValid) {
+      return;
+    }
+  };
+
+  // Loader state
+  const [loaderActive, setLoaderActive] = useState(false);
+  const [loadingStates] = useState([
+    { text: 'Validating Project Details' },
+    { text: 'Preparing Smart Contract' },
+    { text: 'Waiting for Signature' },
+    { text: 'Deploying Escrow' },
+    { text: 'Finalizing Project' },
+  ]);
+  const [loadingStateIndex, setLoadingStateIndex] = useState(0);
+
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+    // setIsLoading(true); // Handled by loaderActive now
+    setSubmitErrors([]);
+
+    try {
+      const payload: ProjectFormData = {
+        ...formData,
+        contact: {
+          ...(formData.contact || {}),
+          agreeToTerms: true,
+          agreeToPrivacy: true,
+        },
+      } as ProjectFormData;
+
+      const parsed = projectSchema.safeParse(payload);
+      if (!parsed.success) {
+        setSubmitErrors(
+          parsed.error.issues.map(i => `${i.path.join('.')} - ${i.message}`)
+        );
+        setIsSubmitting(false);
+        setFlowStep('form');
+        return;
+      }
+
+      if (!walletAddress) {
+        throw new Error(
+          'Wallet not connected. Please connect your wallet first.'
+        );
+      }
+
+      const apiRequest = mapFormDataToApiRequest(formData);
+
+      // Step 1: Validate Project Data
+      setLoaderActive(true);
+      setLoadingStateIndex(0); // Validating Project Details
+
+      try {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const {
+          validateCrowdfundingProject,
+        } = require('@/features/projects/api');
+        await validateCrowdfundingProject(apiRequest);
+      } catch (error: any) {
+        // If validation fails, stop everything
+        setLoaderActive(false);
+        const errorMessage =
+          error.response?.data?.message || error.message || 'Validation failed';
+        setSubmitErrors([errorMessage]);
+        setIsSubmitting(false);
+        return;
+      }
+
+      setLoadingStateIndex(1); // Preparing Smart Contract
+
+      const milestones = payload.milestones || {
+        milestones: [],
+        fundingAmount: '0',
+      };
+      const totalFunding = parseFloat(milestones.fundingAmount || '0');
+      const milestoneCount = milestones.milestones?.length || 1;
+      const amountPerMilestone = Math.floor(totalFunding / milestoneCount);
+
+      const escrowPayload: InitializeMultiReleaseEscrowPayload = {
+        signer: walletAddress,
+        engagementId: `project-${Date.now()}`,
+        title: payload.basic?.projectName || 'Crowdfunding Project',
+        description: payload.basic?.vision || payload.details?.vision || '',
+        platformFee: 4,
+        trustline: {
+          address: 'GBBD47IF6LWK7P7MDEVSCWR7DPUWV3NY3DTQEVFL4NAT4AQH3ZLLFLA5',
+          symbol: 'USDC',
+        },
+        roles: {
+          approver: walletAddress,
+          serviceProvider: walletAddress,
+          platformAddress: walletAddress,
+          releaseSigner: walletAddress,
+          disputeResolver: walletAddress,
+        },
+        milestones: (milestones.milestones || []).map(milestone => ({
+          description: `${milestone.title}: ${milestone.description}`,
+          amount: amountPerMilestone,
+          receiver: walletAddress,
+        })),
+      };
+
+      setFlowStep('initializing'); // This might be redundant if we just use loader, but keeping for compatibility
+
+      setLoadingStateIndex(1); // Preparing Smart Contract (still)
+
+      const escrowResponse: EscrowRequestResponse = await deployEscrow(
+        escrowPayload,
+        'multi-release' as EscrowType
+      );
+
+      if (
+        escrowResponse.status !== ('SUCCESS' as Status) ||
+        !escrowResponse.unsignedTransaction
+      ) {
+        const errorMessage =
+          'message' in escrowResponse &&
+          typeof escrowResponse.message === 'string'
+            ? escrowResponse.message
+            : 'Failed to initialize escrow';
+        throw new Error(errorMessage);
+      }
+
+      const { unsignedTransaction } = escrowResponse;
+      setUnsignedTransaction(unsignedTransaction);
+
+      setLoadingStateIndex(2); // Waiting for Signature
+      // At this point we need user signature.
+      // We might want to pause the loader or update text?
+      // The original flow stopped here for user to click "Sign".
+      // But user wants "Cleanly written".
+      // If we auto-trigger sign, we can keep loader up.
+      // Let's rely on the useEffect that watches `flowStep === 'signing'`
+
+      setFlowStep('signing');
+      setLoaderActive(false); // Hide loader while waiting for user interaction/signature?
+      // Or keep it but maybe with a different state?
+      // User request implies a continuous flow.
+      // If `requireWallet` pops up a modal, we might want to keep the loader in background or hide it.
+      // Let's hide it for now because the signing step is manual in the current UI (button click or auto-trigger).
+      // Actually, let's keep it consistent with the previous flow but just add the validation step.
+
+      setIsLoading(false);
+    } catch (error) {
+      setLoaderActive(false);
+      let errorMessage = 'Error preparing project. Please try again.';
+
+      if (error instanceof Error) {
+        if (error.message.includes('Network')) {
+          errorMessage =
+            'Network error. Please check your connection and try again.';
+        } else if (error.message.includes('Validation')) {
+          errorMessage =
+            'Project validation failed. Please check your project details.';
+        } else if (error.message.includes('Unauthorized')) {
+          errorMessage =
+            'Authentication required. Please log in and try again.';
+        } else if (error.message.includes('Server')) {
+          errorMessage = 'Server error. Please try again in a few moments.';
+        } else {
+          errorMessage = error.message;
+        }
+      }
+
+      setSubmitErrors([errorMessage]);
+      setIsLoading(false);
+      setIsSubmitting(false);
+      setFlowStep('form');
+    }
+  };
+
+  const handleDataChange = useCallback(
+    <K extends keyof ProjectFormData>(step: K, data: ProjectFormData[K]) => {
+      setFormData(prev => ({
+        ...prev,
+        [step]: {
+          ...(prev[step] as Record<string, unknown>),
+          ...(data as Record<string, unknown>),
+        },
+      }));
+    },
+    []
+  );
+
+  const isStepValid = (() => {
+    if (currentStep === 2) {
+      const v = (formData.details?.vision || '').trim();
+      return v.length > 0;
+    }
+    if (currentStep === 5) {
+      const contact = formData.contact || {};
+      return !!(
+        contact.telegram?.trim() &&
+        contact.backupType &&
+        contact.backupContact?.trim()
+      );
+    }
+    return true;
+  })();
+
+  const handleReset = () => {
+    setFormData({
+      basic: {},
+      details: {},
+      milestones: {},
+      team: {},
+      contact: {},
+    });
+    setCurrentStep(1);
+    setShowSuccess(false);
+    setIsLoading(false);
+    setUnsignedTransaction(null);
+    setIsSigningTransaction(false);
+    setSubmitErrors([]);
+    setFlowStep('form');
+    setOpen(false);
+  };
+
+  const handleTestData = (templateKey: string = 'defi') => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const { TEST_PROJECT_TEMPLATES } = require('./test-data');
+    const template = TEST_PROJECT_TEMPLATES[templateKey];
+
+    if (template) {
+      setFormData(template);
+    }
+  };
+
+  return {
+    currentStep,
+    setCurrentStep,
+    isSubmitting,
+    submitErrors,
+    showSuccess,
+    isLoading,
+    flowStep,
+    formData,
+    stepRefs,
+    contentRef,
+    isSigningTransaction,
+    handleBack,
+    handleContinue,
+    handleRetry,
+    handleSignTransaction,
+    handleReset,
+    handleTestData,
+    handleDataChange,
+    isStepValid,
+    loaderActive,
+    loadingStates,
+    loadingStateIndex,
+  };
+};
diff --git a/features/projects/components/CreateProjectModal/utils.ts b/features/projects/components/CreateProjectModal/utils.ts
new file mode 100644
index 000000000..af962a32b
--- /dev/null
+++ b/features/projects/components/CreateProjectModal/utils.ts
@@ -0,0 +1,90 @@
+import { CreateCrowdfundingProjectRequest } from '@/lib/api/types';
+import { ProjectFormData } from './types';
+
+export const mapFormDataToApiRequest = (
+  data: ProjectFormData
+): CreateCrowdfundingProjectRequest => {
+  const basic = data.basic || {};
+  const details = data.details || {};
+  const milestones = data.milestones || {
+    fundingAmount: '0',
+    milestones: [],
+  };
+  const team = data.team || { members: [] };
+  const contact = data.contact || {
+    telegram: '',
+    backupType: 'whatsapp',
+    backupContact: '',
+  };
+
+  // Convert milestones to API format
+  const apiMilestones = (milestones.milestones || []).map(
+    (milestone, index) => {
+      // Create a date object from the end date string
+      const endDate = milestone.endDate
+        ? new Date(milestone.endDate).toISOString()
+        : new Date().toISOString();
+
+      // Calculate percentage (equal distribution for now as per previous logic)
+      // Ideally this should be user definable but keeping it simple for now
+      const count = milestones.milestones?.length || 1;
+      const percentage = parseFloat((100 / count).toFixed(2));
+
+      return {
+        title: milestone.title,
+        description: milestone.description,
+        deliverable: milestone.description,
+        expectedDeliveryDate: endDate,
+        fundingPercentage: percentage,
+        orderIndex: index,
+        amount:
+          (percentage / 100) *
+          (parseFloat(milestones.fundingAmount || '0') || 0),
+      };
+    }
+  );
+
+  // Convert team members to API format
+  const apiTeam = (team.members || []).map(member => ({
+    name: member.email.split('@')[0], // Extract name from email
+    role: 'MEMBER', // Default role for all members
+    email: member.email,
+  }));
+
+  // Convert social links to API format
+  const socialLinks = basic.socialLinks?.filter(link => link.trim()) || [];
+  const apiSocialLinks = socialLinks.map(link => ({
+    platform: link.startsWith('https://twitter.com/')
+      ? 'twitter'
+      : link.startsWith('https://discord.gg/')
+        ? 'discord'
+        : link.startsWith('https://t.me/')
+          ? 'telegram'
+          : 'other', // Default platform
+    url: link,
+  }));
+
+  return {
+    title: basic.projectName || '',
+    logo: basic.logoUrl || '',
+    banner: basic.bannerUrl || undefined,
+    vision: basic.vision || '',
+    category: basic.category || '',
+    details: details.vision || '',
+    fundingAmount: parseFloat(milestones.fundingAmount || '0') || 0,
+    githubUrl: basic.githubUrl || undefined,
+    gitlabUrl: undefined,
+    bitbucketUrl: undefined,
+    projectWebsite: basic.websiteUrl || undefined,
+    demoVideo: basic.demoVideoUrl || undefined,
+    milestones: apiMilestones,
+    team: apiTeam,
+    contact: {
+      primary: `@${contact.telegram || ''}`,
+      backup: contact.backupContact || '',
+    },
+    socialLinks: apiSocialLinks,
+    escrowId: '',
+    transactionHash: '',
+  };
+};
diff --git a/components/projects/ExploreHeader.tsx b/features/projects/components/ExploreHeader.tsx
similarity index 100%
rename from components/projects/ExploreHeader.tsx
rename to features/projects/components/ExploreHeader.tsx
diff --git a/components/project/Initialize.tsx b/features/projects/components/Initialize.tsx
similarity index 98%
rename from components/project/Initialize.tsx
rename to features/projects/components/Initialize.tsx
index a479e54c7..5460ab3b3 100644
--- a/components/project/Initialize.tsx
+++ b/features/projects/components/Initialize.tsx
@@ -3,14 +3,14 @@ import ProjectSubmissionForm, {
   ProjectSubmissionData,
 } from './ProjectSubmissionForm';
 import { Button } from '@/components/ui/button';
-import { initProject } from '@/lib/api/project';
+import { initProject } from '@/features/projects/api';
 import type { ProjectInitRequest } from '@/lib/api/types';
 import { toast } from 'sonner';
 import type { Milestone } from './MilestoneForm';
 import MilestoneManager from './MilestoneManager';
 import MilestoneReview from './MilestoneReview';
 import ProjectSubmissionSuccess from './ProjectSubmissionSuccess';
-import Loading from '../Loading';
+import Loading from '@/components/loading/Loading';
 import { useWalletProtection } from '@/hooks/use-wallet-protection';
 import WalletRequiredModal from '@/components/wallet/WalletRequiredModal';
 
@@ -122,7 +122,7 @@ const Initialize: React.FC<InitializeProps> = ({ onSuccess }) => {
             description: m.description,
             deliveryDate: m.deliveryDate,
             fundPercentage: pct,
-            fundAmount: amt,
+            amount: amt,
           };
         });
 
@@ -132,7 +132,7 @@ const Initialize: React.FC<InitializeProps> = ({ onSuccess }) => {
           tagline: formData.tagline,
           type: 'crowdfund',
           category: formData.category,
-          fundAmount: formData.fundAmount,
+          amount: formData.fundAmount,
           tags: formData.tags,
           milestones: milestonesPayload,
           thumbnail: 'https://placehold.co/600x400',
diff --git a/features/projects/components/Milestone/MilestoneEvidence.tsx b/features/projects/components/Milestone/MilestoneEvidence.tsx
new file mode 100644
index 000000000..e743d83f5
--- /dev/null
+++ b/features/projects/components/Milestone/MilestoneEvidence.tsx
@@ -0,0 +1,133 @@
+'use client';
+
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  FileText,
+  Image as ImageIcon,
+  Video,
+  Link as LinkIcon,
+  ExternalLink,
+} from 'lucide-react';
+import Image from 'next/image';
+
+interface MilestoneEvidenceProps {
+  evidence: string;
+  attachments?: Array<{
+    type: 'image' | 'video' | 'document' | 'link';
+    url: string;
+    name?: string;
+  }>;
+}
+
+export function MilestoneEvidence({
+  evidence,
+  attachments,
+}: MilestoneEvidenceProps) {
+  return (
+    <Card className='bg-background-card border-gray-800'>
+      <CardHeader>
+        <CardTitle className='text-white'>Evidence & Proof of Work</CardTitle>
+      </CardHeader>
+      <CardContent className='space-y-6'>
+        {/* Text Evidence */}
+        <div className='space-y-2'>
+          <h4 className='text-sm font-medium text-gray-400'>Description</h4>
+          <div className='rounded-lg border border-[#2B2B2B] bg-[#1A1A1A] p-4'>
+            <p className='text-sm leading-relaxed whitespace-pre-wrap text-white'>
+              {evidence}
+            </p>
+          </div>
+        </div>
+
+        {/* Attachments */}
+        {attachments && attachments.length > 0 && (
+          <div className='space-y-3'>
+            <h4 className='text-sm font-medium text-gray-400'>Attachments</h4>
+            <div className='grid gap-3'>
+              {attachments.map((attachment, index) => (
+                <AttachmentItem key={index} {...attachment} />
+              ))}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+function AttachmentItem({
+  type,
+  url,
+  name,
+}: {
+  type: string;
+  url: string;
+  name?: string;
+}) {
+  const getIcon = () => {
+    switch (type) {
+      case 'image':
+        return <ImageIcon className='h-5 w-5' />;
+      case 'video':
+        return <Video className='h-5 w-5' />;
+      case 'document':
+        return <FileText className='h-5 w-5' />;
+      case 'link':
+        return <LinkIcon className='h-5 w-5' />;
+      default:
+        return <FileText className='h-5 w-5' />;
+    }
+  };
+
+  if (type === 'image') {
+    return (
+      <a
+        href={url}
+        target='_blank'
+        rel='noopener noreferrer'
+        className='group relative overflow-hidden rounded-lg border border-[#2B2B2B]'
+      >
+        <Image
+          src={url}
+          alt={name || 'Evidence image'}
+          width={400}
+          height={300}
+          className='h-48 w-full object-cover transition-transform group-hover:scale-105'
+        />
+        <div className='absolute inset-0 bg-black/50 opacity-0 transition-opacity group-hover:opacity-100'>
+          <div className='flex h-full items-center justify-center'>
+            <ExternalLink className='h-6 w-6 text-white' />
+          </div>
+        </div>
+      </a>
+    );
+  }
+
+  if (type === 'video') {
+    return (
+      <div className='overflow-hidden rounded-lg border border-[#2B2B2B]'>
+        <video controls className='h-auto w-full'>
+          <source src={url} type='video/mp4' />
+          Your browser does not support the video tag.
+        </video>
+      </div>
+    );
+  }
+
+  return (
+    <a
+      href={url}
+      target='_blank'
+      rel='noopener noreferrer'
+      className='hover:border-primary flex items-center gap-3 rounded-lg border border-[#2B2B2B] bg-[#1A1A1A] p-4 transition-colors hover:bg-[#1A1A1A]/80'
+    >
+      <div className='text-gray-400'>{getIcon()}</div>
+      <div className='flex-1'>
+        <p className='text-sm font-medium text-white'>{name || 'Attachment'}</p>
+        <p className='text-xs text-gray-400'>{type}</p>
+      </div>
+      <ExternalLink className='h-4 w-4 text-gray-400' />
+    </a>
+  );
+}
diff --git a/features/projects/components/Milestone/MilestoneStatusCard.tsx b/features/projects/components/Milestone/MilestoneStatusCard.tsx
new file mode 100644
index 000000000..e2581e56a
--- /dev/null
+++ b/features/projects/components/Milestone/MilestoneStatusCard.tsx
@@ -0,0 +1,202 @@
+'use client';
+
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { CheckCircle2, Clock, XCircle, AlertCircle } from 'lucide-react';
+
+interface MilestoneStatusCardProps {
+  status: string;
+  evidence?: string;
+  submittedAt?: string;
+  approvedAt?: string;
+  rejectedAt?: string;
+}
+
+const statusConfig = {
+  pending: {
+    label: 'Pending',
+    icon: Clock,
+    color: 'text-yellow-500',
+    bgColor: 'bg-yellow-500/10',
+    borderColor: 'border-yellow-500/30',
+  },
+  'in-progress': {
+    label: 'In Progress',
+    icon: Clock,
+    color: 'text-blue-500',
+    bgColor: 'bg-blue-500/10',
+    borderColor: 'border-blue-500/30',
+  },
+  submitted: {
+    label: 'Submitted for Review',
+    icon: AlertCircle,
+    color: 'text-orange-500',
+    bgColor: 'bg-orange-500/10',
+    borderColor: 'border-orange-500/30',
+  },
+  'in-review': {
+    label: 'Under Review',
+    icon: AlertCircle,
+    color: 'text-purple-500',
+    bgColor: 'bg-purple-500/10',
+    borderColor: 'border-purple-500/30',
+  },
+  completed: {
+    label: 'Completed',
+    icon: CheckCircle2,
+    color: 'text-green-500',
+    bgColor: 'bg-green-500/10',
+    borderColor: 'border-green-500/30',
+  },
+  approved: {
+    label: 'Approved',
+    icon: CheckCircle2,
+    color: 'text-green-500',
+    bgColor: 'bg-green-500/10',
+    borderColor: 'border-green-500/30',
+  },
+  rejected: {
+    label: 'Rejected',
+    icon: XCircle,
+    color: 'text-red-500',
+    bgColor: 'bg-red-500/10',
+    borderColor: 'border-red-500/30',
+  },
+};
+
+export function MilestoneStatusCard({
+  status,
+  evidence,
+  submittedAt,
+  approvedAt,
+  rejectedAt,
+}: MilestoneStatusCardProps) {
+  const config =
+    statusConfig[status as keyof typeof statusConfig] || statusConfig.pending;
+  const StatusIcon = config.icon;
+
+  return (
+    <Card className={`border-2 ${config.borderColor} bg-background-card`}>
+      <CardHeader>
+        <CardTitle className='flex items-center justify-between'>
+          <span className='text-white'>Milestone Status</span>
+          <Badge className={`${config.bgColor} ${config.color} border-0`}>
+            <StatusIcon className='mr-1 h-4 w-4' />
+            {config.label}
+          </Badge>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className='space-y-4'>
+        {/* Status Timeline */}
+        <div className='space-y-3'>
+          {submittedAt && (
+            <div className='flex items-start gap-3'>
+              <div className='mt-1 h-2 w-2 rounded-full bg-blue-500' />
+              <div>
+                <p className='text-sm font-medium text-white'>
+                  Submitted for Review
+                </p>
+                <p className='text-xs text-gray-400'>
+                  {new Date(submittedAt).toLocaleDateString('en-US', {
+                    day: '2-digit',
+                    month: 'short',
+                    year: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                  })}
+                </p>
+              </div>
+            </div>
+          )}
+
+          {approvedAt && (
+            <div className='flex items-start gap-3'>
+              <div className='mt-1 h-2 w-2 rounded-full bg-green-500' />
+              <div>
+                <p className='text-sm font-medium text-white'>Approved</p>
+                <p className='text-xs text-gray-400'>
+                  {new Date(approvedAt).toLocaleDateString('en-US', {
+                    day: '2-digit',
+                    month: 'short',
+                    year: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                  })}
+                </p>
+              </div>
+            </div>
+          )}
+
+          {rejectedAt && (
+            <div className='flex items-start gap-3'>
+              <div className='mt-1 h-2 w-2 rounded-full bg-red-500' />
+              <div>
+                <p className='text-sm font-medium text-white'>Rejected</p>
+                <p className='text-xs text-gray-400'>
+                  {new Date(rejectedAt).toLocaleDateString('en-US', {
+                    day: '2-digit',
+                    month: 'short',
+                    year: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                  })}
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Evidence Section */}
+        {evidence && (
+          <div className='space-y-2'>
+            <h4 className='text-sm font-medium text-gray-400'>
+              Proof of Completion
+            </h4>
+            <div className='rounded-lg border border-[#2B2B2B] bg-[#1A1A1A] p-4'>
+              <p className='text-sm whitespace-pre-wrap text-white'>
+                {evidence}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Status-specific messages */}
+        {status === 'pending' && (
+          <div className='rounded-lg border border-yellow-500/30 bg-yellow-500/5 p-3'>
+            <p className='text-xs text-yellow-200'>
+              This milestone is awaiting work to begin. Check back later for
+              updates.
+            </p>
+          </div>
+        )}
+
+        {status === 'in-progress' && (
+          <div className='rounded-lg border border-blue-500/30 bg-blue-500/5 p-3'>
+            <p className='text-xs text-blue-200'>
+              The creator is currently working on this milestone.
+            </p>
+          </div>
+        )}
+
+        {status === 'in-review' && (
+          <div className='rounded-lg border border-purple-500/30 bg-purple-500/5 p-3'>
+            <p className='text-xs text-purple-200'>
+              This milestone submission is currently under review by the
+              community.
+            </p>
+          </div>
+        )}
+
+        {status === 'rejected' && (
+          <div className='rounded-lg border border-red-500/30 bg-red-500/5 p-3'>
+            <p className='text-xs text-red-200'>
+              This milestone was rejected. The creator will need to resubmit
+              with corrections.
+            </p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/project/MilestoneForm.tsx b/features/projects/components/MilestoneForm.tsx
similarity index 95%
rename from components/project/MilestoneForm.tsx
rename to features/projects/components/MilestoneForm.tsx
index 61fad311f..ae1ef15f0 100644
--- a/components/project/MilestoneForm.tsx
+++ b/features/projects/components/MilestoneForm.tsx
@@ -1,21 +1,25 @@
 'use client';
 
 import React from 'react';
-import { Input } from '../ui/input';
-import { Textarea } from '../ui/textarea';
-import { Button } from '../ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
 import { Calendar as CalendarIcon, Trash2, HelpCircle } from 'lucide-react';
 import { toast } from 'sonner';
-import { BoundlessButton } from '../buttons';
-import { Label } from '../ui/label';
+import { BoundlessButton } from '@/components/buttons';
+import { Label } from '@/components/ui/label';
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '../ui/tooltip';
-import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
-import { Calendar } from '../ui/calendar';
+} from '@/components/ui/tooltip';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Calendar } from '@/components/ui/calendar';
 
 export interface Milestone {
   id: string;
diff --git a/components/project/MilestoneManager.tsx b/features/projects/components/MilestoneManager.tsx
similarity index 97%
rename from components/project/MilestoneManager.tsx
rename to features/projects/components/MilestoneManager.tsx
index 1639b5b75..c61a309f3 100644
--- a/components/project/MilestoneManager.tsx
+++ b/features/projects/components/MilestoneManager.tsx
@@ -1,11 +1,11 @@
 'use client';
 
 import React from 'react';
-import { Button } from '../ui/button';
+import { Button } from '@/components/ui/button';
 import { Plus } from 'lucide-react';
 import MilestoneForm, { Milestone } from './MilestoneForm';
 import { toast } from 'sonner';
-import { Label } from '../ui/label';
+import { Label } from '@/components/ui/label';
 
 interface MilestoneManagerProps {
   milestones: Milestone[];
diff --git a/components/project/MilestoneReview.tsx b/features/projects/components/MilestoneReview.tsx
similarity index 100%
rename from components/project/MilestoneReview.tsx
rename to features/projects/components/MilestoneReview.tsx
diff --git a/components/project/MilestoneSubmissionModal.tsx b/features/projects/components/MilestoneSubmissionModal.tsx
similarity index 98%
rename from components/project/MilestoneSubmissionModal.tsx
rename to features/projects/components/MilestoneSubmissionModal.tsx
index fc8a8e157..6ab446029 100644
--- a/components/project/MilestoneSubmissionModal.tsx
+++ b/features/projects/components/MilestoneSubmissionModal.tsx
@@ -1,9 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
-import BoundlessSheet from '../sheet/boundless-sheet';
-import { BoundlessButton } from '../buttons/BoundlessButton';
-import { Label } from '../ui/label';
+
 import {
   Calendar,
   Coins,
@@ -17,6 +15,9 @@ import { cn } from '@/lib/utils';
 import MilestoneSubmissionSuccess from './MilestoneSubmissionSuccess';
 import { useWalletProtection } from '@/hooks/use-wallet-protection';
 import WalletRequiredModal from '@/components/wallet/WalletRequiredModal';
+import BoundlessSheet from '@/components/sheet/boundless-sheet';
+import { Label } from '@/components/ui/label';
+import { BoundlessButton } from '@/components/buttons';
 
 export interface MilestoneSubmissionData {
   files: File[];
diff --git a/components/project/MilestoneSubmissionPage.tsx b/features/projects/components/MilestoneSubmissionPage.tsx
similarity index 98%
rename from components/project/MilestoneSubmissionPage.tsx
rename to features/projects/components/MilestoneSubmissionPage.tsx
index f161b4d7a..c48ec7374 100644
--- a/components/project/MilestoneSubmissionPage.tsx
+++ b/features/projects/components/MilestoneSubmissionPage.tsx
@@ -1,10 +1,10 @@
 'use client';
 
 import React, { useState } from 'react';
-import { BoundlessButton } from '../buttons/BoundlessButton';
-import { Input } from '../ui/input';
-import { Label } from '../ui/label';
-import { Textarea } from '../ui/textarea';
+import { BoundlessButton } from '@/components/buttons';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
 import {
   Calendar,
   Coins,
diff --git a/components/project/MilestoneSubmissionSuccess.tsx b/features/projects/components/MilestoneSubmissionSuccess.tsx
similarity index 96%
rename from components/project/MilestoneSubmissionSuccess.tsx
rename to features/projects/components/MilestoneSubmissionSuccess.tsx
index 0393a4b24..08ac39826 100644
--- a/components/project/MilestoneSubmissionSuccess.tsx
+++ b/features/projects/components/MilestoneSubmissionSuccess.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import { Check } from 'lucide-react';
 import Link from 'next/link';
-import { BoundlessButton } from '../buttons/BoundlessButton';
+import { BoundlessButton } from '@/components/buttons';
 
 interface MilestoneSubmissionSuccessProps {
   onContinue?: () => void;
diff --git a/features/projects/components/ProjectCard.tsx b/features/projects/components/ProjectCard.tsx
new file mode 100644
index 000000000..9de3d313f
--- /dev/null
+++ b/features/projects/components/ProjectCard.tsx
@@ -0,0 +1,241 @@
+import { Progress } from '@/components/ui/progress';
+import { formatNumber } from '@/lib/utils';
+import { useRouter } from 'nextjs-toploader/app';
+import Image from 'next/image';
+import { ProjectCardData } from '@/features/projects/utils/card-mappers';
+
+type ProjectCardProps = {
+  data: ProjectCardData;
+  newTab?: boolean;
+  isFullWidth?: boolean;
+  className?: string;
+};
+
+function ProjectCard({
+  data,
+  newTab = false,
+  isFullWidth = false,
+  className = '',
+}: ProjectCardProps) {
+  const router = useRouter();
+
+  const {
+    slug,
+    title,
+    vision,
+    banner,
+    logo,
+    creator,
+    category,
+    status,
+    stats,
+  } = data;
+
+  const currentBanner =
+    banner || '/images/placeholders/project-banner-placeholder.png';
+
+  const handleClick = () => {
+    router.push(`/projects/${slug}`);
+  };
+
+  const getStatusStyles = () => {
+    switch (status) {
+      case 'Funding':
+        return 'text-blue-400 bg-blue-400/10';
+      case 'Funded':
+        return 'text-green-400 bg-green-400/10';
+      case 'Completed':
+        return 'text-green-400 bg-green-400/10';
+      case 'Validation':
+        return 'text-yellow-400 bg-yellow-400/10';
+      default:
+        return 'text-gray-400 bg-gray-800/20';
+    }
+  };
+
+  const getDeadlineInfo = () => {
+    if (status === 'Completed') {
+      // Check for rejected milestones if available to display warning,
+      // but simplistic approach for now:
+      return { text: 'Completed', className: 'text-green-400' };
+    }
+
+    const { daysLeft } = stats;
+
+    if (daysLeft <= 3) {
+      return {
+        text: `${daysLeft} days left`,
+        className: 'text-red-400',
+      };
+    }
+
+    if (daysLeft <= 15) {
+      return {
+        text: `${daysLeft} days left`,
+        className: 'text-yellow-400',
+      };
+    }
+
+    return {
+      text: `${daysLeft} days left`,
+      className: 'text-green-400',
+    };
+  };
+
+  const deadlineInfo = getDeadlineInfo();
+  const statusColor = getStatusStyles();
+
+  return (
+    <div
+      onClick={!newTab ? handleClick : () => {}}
+      className={`group flex cursor-pointer flex-col overflow-hidden rounded-xl border border-neutral-800 bg-[#0c0c0c] transition-all duration-300 hover:border-neutral-700 hover:shadow-lg hover:shadow-black/40 ${
+        isFullWidth ? 'w-full' : 'max-w-[400px]'
+      } ${className}`}
+    >
+      {/* Banner / Image Section */}
+      <div className='relative h-44 overflow-hidden sm:h-52'>
+        <Image
+          src={currentBanner}
+          alt={title}
+          fill
+          className='object-cover transition-transform duration-300 group-hover:scale-105'
+          unoptimized
+          onError={e => {
+            // Fallback to project logo if banner fails
+            e.currentTarget.src = logo || '';
+            e.currentTarget.classList.add(
+              'object-contain',
+              'p-4',
+              'bg-[#1a1a1a]'
+            );
+            e.currentTarget.classList.remove('object-cover');
+          }}
+        />
+        <div className='absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent' />
+
+        {/* Top Overlay: Categories & Status Badge */}
+        <div className='absolute top-3 right-3 left-3 flex items-center justify-between'>
+          {/* Categories */}
+          <div className='flex gap-1.5'>
+            <span className='rounded-md bg-neutral-800/70 px-2 py-0.5 text-[11px] font-medium whitespace-nowrap text-gray-300'>
+              {category}
+            </span>
+          </div>
+
+          <span
+            className={`rounded-md px-2 py-0.5 text-xs font-semibold backdrop-blur-sm ${statusColor}`}
+          >
+            {status}
+          </span>
+        </div>
+
+        {/* Bottom Overlay: Creator Info */}
+        <div className='absolute bottom-3 left-3 flex items-center gap-2'>
+          <div
+            style={{ backgroundImage: `url(${creator.image})` }}
+            className='size-7 rounded-full border border-white/20 bg-white bg-cover bg-center'
+          />
+          <span className='text-xs font-medium text-white/90 drop-shadow-md'>
+            {creator.name}
+          </span>
+        </div>
+      </div>
+
+      {/* Body Section */}
+      <div className='flex flex-col gap-3 pt-3'>
+        <div className='px-4 sm:px-5'>
+          <div className='flex items-start gap-3'>
+            <h2 className='line-clamp-2 text-base leading-tight font-semibold text-white sm:text-lg'>
+              {title}
+            </h2>
+          </div>
+
+          <p className='mt-1 line-clamp-2 text-xs text-gray-400 sm:text-sm'>
+            {vision}
+          </p>
+        </div>
+
+        {/* Stats / Progress Section */}
+        <div className='flex flex-col gap-2 border-t border-neutral-800 px-4 pt-3 pb-1 sm:px-5'>
+          {status === 'Validation' && stats.votes && (
+            <div className='flex flex-col gap-1'>
+              <div className='flex items-baseline justify-between'>
+                <span className='text-sm text-gray-400'>Votes</span>
+                <span className='font-medium text-white'>
+                  {formatNumber(stats.votes.current)}
+                  <span className='text-xs text-gray-500'>
+                    {' '}
+                    / {formatNumber(stats.votes.goal)}
+                  </span>
+                </span>
+              </div>
+              <Progress
+                value={(stats.votes.current / stats.votes.goal) * 100}
+                className='h-1.5 w-full rounded-full bg-neutral-800'
+                indicatorClassName='bg-white'
+              />
+            </div>
+          )}
+
+          {status === 'Funding' && stats.funding && (
+            <div className='flex flex-col gap-1'>
+              <div className='flex items-baseline justify-between'>
+                <span className='text-sm text-gray-400'>Raised</span>
+                <div className='flex items-baseline gap-1'>
+                  <span className='text-primary text-base font-semibold'>
+                    {formatNumber(stats.funding.raised)}
+                  </span>
+                  <span className='text-xs text-gray-500'>
+                    / {formatNumber(stats.funding.goal)}{' '}
+                    {stats.funding.currency}
+                  </span>
+                </div>
+              </div>
+              <Progress
+                value={(stats.funding.raised / stats.funding.goal) * 100}
+                className='h-1.5 w-full rounded-full bg-neutral-800'
+                // indicatorClassName='bg-primary'
+              />
+            </div>
+          )}
+
+          {(status === 'Funded' || status === 'Completed') &&
+            stats.milestones && (
+              <div className='flex flex-col gap-1'>
+                <div className='flex items-baseline justify-between'>
+                  <span className='text-sm text-gray-400'>Milestones</span>
+                  <span className='font-medium text-white'>
+                    {stats.milestones.completed}
+                    <span className='text-xs text-gray-500'>
+                      {' '}
+                      / {stats.milestones.total}
+                    </span>
+                  </span>
+                </div>
+                <Progress
+                  value={
+                    (stats.milestones.completed /
+                      (stats.milestones.total || 1)) *
+                    100
+                  }
+                  className='h-1.5 w-full rounded-full bg-neutral-800'
+                  indicatorClassName='bg-green-500'
+                />
+              </div>
+            )}
+        </div>
+
+        {/* Footer info: Deadline/Status Text */}
+        <div className='flex items-center justify-between border-t border-neutral-800 px-4 py-3 sm:px-5'>
+          <span
+            className={`text-xs font-medium capitalize ${deadlineInfo.className}`}
+          >
+            {deadlineInfo.text}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ProjectCard;
diff --git a/components/Project-Page-Hero.tsx b/features/projects/components/ProjectPageHero.tsx
similarity index 97%
rename from components/Project-Page-Hero.tsx
rename to features/projects/components/ProjectPageHero.tsx
index b7221ad2b..c1303cb44 100644
--- a/components/Project-Page-Hero.tsx
+++ b/features/projects/components/ProjectPageHero.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import { ArrowDown } from 'lucide-react';
-import { BoundlessButton } from './buttons/BoundlessButton';
+import { BoundlessButton } from '@/components/buttons';
 
 export default function ProjectPageHero() {
   const scrollToProjects = () => {
diff --git a/components/project/ProjectSubmissionFlow.tsx b/features/projects/components/ProjectSubmissionFlow.tsx
similarity index 94%
rename from components/project/ProjectSubmissionFlow.tsx
rename to features/projects/components/ProjectSubmissionFlow.tsx
index 42c0a0f1f..14bce6599 100644
--- a/components/project/ProjectSubmissionFlow.tsx
+++ b/features/projects/components/ProjectSubmissionFlow.tsx
@@ -1,11 +1,12 @@
 'use client';
 
 import React, { useState } from 'react';
-import BoundlessSheet from '../sheet/boundless-sheet';
-import Stepper from '../stepper/Stepper';
+
 import ProjectSubmissionForm from './ProjectSubmissionForm';
 import ProjectSubmissionSuccess from './ProjectSubmissionSuccess';
 import ProjectSubmissionLoading from './ProjectSubmissionLoading';
+import BoundlessSheet from '@/components/sheet/boundless-sheet';
+import { Stepper } from '@/components/stepper';
 
 type StepState = 'active' | 'pending' | 'completed';
 
diff --git a/components/project/ProjectSubmissionForm.tsx b/features/projects/components/ProjectSubmissionForm.tsx
similarity index 97%
rename from components/project/ProjectSubmissionForm.tsx
rename to features/projects/components/ProjectSubmissionForm.tsx
index 58313b6e5..fcb335fe7 100644
--- a/components/project/ProjectSubmissionForm.tsx
+++ b/features/projects/components/ProjectSubmissionForm.tsx
@@ -2,18 +2,28 @@
 
 import Image from 'next/image';
 import React, { useState, useRef, useEffect } from 'react';
-import { Textarea } from '../ui/textarea';
+// import { Textarea } from '../ui/textarea';
+// import {
+//   Select,
+//   SelectContent,
+//   SelectItem,
+//   SelectTrigger,
+//   SelectValue,
+// } from '../ui/select';
+import { formatBytes } from '@/lib/utils';
+// import { Badge } from '../ui/badge';
+import { DollarSign, Package, Trash, X } from 'lucide-react';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '../ui/select';
-import { formatBytes } from '@/lib/utils';
-import { Badge } from '../ui/badge';
-import { DollarSign, Package, Trash, X } from 'lucide-react';
-import { Input } from '../ui/input';
+} from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+// import { Input } from '../ui/input';
 
 const fundingGoals = [
   { value: 'Technology', label: 'Technology' },
diff --git a/components/project/ProjectSubmissionLoading.tsx b/features/projects/components/ProjectSubmissionLoading.tsx
similarity index 100%
rename from components/project/ProjectSubmissionLoading.tsx
rename to features/projects/components/ProjectSubmissionLoading.tsx
diff --git a/components/project/ProjectSubmissionSuccess.tsx b/features/projects/components/ProjectSubmissionSuccess.tsx
similarity index 100%
rename from components/project/ProjectSubmissionSuccess.tsx
rename to features/projects/components/ProjectSubmissionSuccess.tsx
diff --git a/features/projects/components/ProjectsPage.tsx b/features/projects/components/ProjectsPage.tsx
new file mode 100644
index 000000000..630fc3952
--- /dev/null
+++ b/features/projects/components/ProjectsPage.tsx
@@ -0,0 +1,267 @@
+'use client';
+
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ArrowDownIcon, RefreshCwIcon, XIcon, Loader2 } from 'lucide-react';
+
+import ProjectCard from './ProjectCard';
+import ExploreHeader from './ExploreHeader';
+import { useProjects } from '@/features/projects/hooks/use-project';
+import { useProjectFilters } from '@/features/projects/hooks/use-project-filters';
+import { BoundlessButton } from '@/components/buttons';
+import EmptyState from '@/components/EmptyState';
+import LoadingScreen from '@/features/projects/components/CreateProjectModal/LoadingScreen';
+import { cn } from '@/lib/utils';
+import { Crowdfunding } from '@/features/projects/types';
+
+interface ProjectsClientProps {
+  className?: string;
+}
+
+export default function ProjectsClient({ className }: ProjectsClientProps) {
+  const {
+    filters,
+    handleSearch,
+    handleSort,
+    handleStatus,
+    handleCategory,
+    clearSearch,
+    clearAllFilters,
+  } = useProjectFilters();
+
+  const { projects, loading, loadingMore, error, hasMore, loadMore, refetch } =
+    useProjects({ initialFilters: filters });
+
+  const isFiltering =
+    !!filters.search || !!filters.category || !!filters.status;
+
+  const showResultsSummary = !loading && !error && projects.length > 0;
+  const showEmptyState = !loading && !error && projects.length === 0;
+
+  return (
+    <div className={cn('flex flex-col gap-8', className)} id='explore-project'>
+      <ExploreHeader
+        onSearch={handleSearch}
+        onSortChange={handleSort}
+        onStatusChange={handleStatus}
+        onCategoryChange={handleCategory}
+      />
+
+      <main className='min-h-[50vh]'>
+        <AnimatePresence mode='wait'>
+          {loading ? (
+            <motion.div
+              key='loading'
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className='flex items-center justify-center py-20'
+            >
+              <LoadingScreen />
+            </motion.div>
+          ) : error ? (
+            <motion.div
+              key='error'
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+            >
+              <ErrorState message={error} onRetry={refetch} />
+            </motion.div>
+          ) : showEmptyState ? (
+            <motion.div
+              key='empty'
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+            >
+              <NoProjectsState
+                isFiltering={isFiltering}
+                onClearFilters={clearAllFilters}
+              />
+            </motion.div>
+          ) : (
+            <motion.div
+              key='content'
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+            >
+              {showResultsSummary && (
+                <ResultsSummary
+                  count={projects.length}
+                  filters={filters}
+                  onClearSearch={clearSearch}
+                />
+              )}
+
+              <ProjectsGrid projects={projects} />
+
+              {hasMore && (
+                <LoadMoreSection
+                  loadingMore={loadingMore}
+                  onLoadMore={loadMore}
+                />
+              )}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </main>
+    </div>
+  );
+}
+
+// Sub-components for cleaner file structure
+
+function ResultsSummary({
+  count,
+  filters,
+  onClearSearch,
+}: {
+  count: number;
+  filters: any; // Ideally this should be matched to FilterState type from hook
+  onClearSearch: () => void;
+}) {
+  return (
+    <div className='mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'>
+      <div className='text-muted-foreground text-sm'>
+        Showing <span className='text-foreground font-medium'>{count}</span>{' '}
+        project
+        {count !== 1 && 's'}
+        {filters.search && (
+          <>
+            {' '}
+            matching{' '}
+            <span className='font-medium'>&quot;{filters.search}&quot;</span>
+          </>
+        )}
+        {filters.category && (
+          <>
+            {' '}
+            in <span className='font-medium'>{filters.category}</span>
+          </>
+        )}
+        {filters.status && (
+          <>
+            {' '}
+            with status <span className='font-medium'>{filters.status}</span>
+          </>
+        )}
+      </div>
+
+      {filters.search && (
+        <BoundlessButton
+          onClick={onClearSearch}
+          variant='ghost'
+          size='sm'
+          className='text-muted-foreground hover:text-foreground h-auto w-fit px-2 py-1 text-xs'
+          icon={<XIcon className='h-3 w-3' />}
+          iconPosition='right'
+        >
+          Clear search
+        </BoundlessButton>
+      )}
+    </div>
+  );
+}
+
+function ErrorState({
+  message,
+  onRetry,
+}: {
+  message: string;
+  onRetry: () => void;
+}) {
+  return (
+    <div className='flex flex-col items-center justify-center py-12'>
+      <EmptyState
+        title='Unable to load projects'
+        description={message}
+        type='compact'
+        action={
+          <BoundlessButton
+            onClick={onRetry}
+            variant='outline'
+            icon={<RefreshCwIcon className='h-4 w-4' />}
+          >
+            Try Again
+          </BoundlessButton>
+        }
+      />
+    </div>
+  );
+}
+
+function NoProjectsState({
+  isFiltering,
+  onClearFilters,
+}: {
+  isFiltering: boolean;
+  onClearFilters: () => void;
+}) {
+  return (
+    <div className='flex flex-col items-center justify-center py-12'>
+      <EmptyState
+        title={isFiltering ? 'No matching projects' : 'No projects found'}
+        description={
+          isFiltering
+            ? "We couldn't find any projects matching your filters. Try adjusting them."
+            : 'There are no active projects to display at the moment.'
+        }
+        type='default'
+        action={
+          isFiltering ? (
+            <BoundlessButton onClick={onClearFilters} variant='secondary'>
+              Clear all filters
+            </BoundlessButton>
+          ) : undefined
+        }
+      />
+    </div>
+  );
+}
+
+import { mapCrowdfundingToCardData } from '@/features/projects/utils/card-mappers';
+
+function ProjectsGrid({ projects }: { projects: Crowdfunding[] }) {
+  // Memoize projects if needed, though React usually handles this well enough in mapping
+  return (
+    <div className='grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-2'>
+      {projects.map(project => (
+        <ProjectCard
+          isFullWidth={true}
+          key={project.id}
+          data={mapCrowdfundingToCardData(project)}
+        />
+      ))}
+    </div>
+  );
+}
+
+function LoadMoreSection({
+  loadingMore,
+  onLoadMore,
+}: {
+  loadingMore: boolean;
+  onLoadMore: () => void;
+}) {
+  return (
+    <div className='mt-12 flex justify-center'>
+      <BoundlessButton
+        onClick={onLoadMore}
+        variant='outline'
+        disabled={loadingMore}
+        className='min-w-[200px]'
+        icon={
+          loadingMore ? (
+            <Loader2 className='h-4 w-4 animate-spin' />
+          ) : (
+            <ArrowDownIcon className='h-4 w-4' />
+          )
+        }
+      >
+        {loadingMore ? 'Loading...' : 'Load More Projects'}
+      </BoundlessButton>
+    </div>
+  );
+}
diff --git a/components/project/ShareCampaignModal.tsx b/features/projects/components/ShareCampaignModal.tsx
similarity index 100%
rename from components/project/ShareCampaignModal.tsx
rename to features/projects/components/ShareCampaignModal.tsx
diff --git a/components/project/TimelineStepper.tsx b/features/projects/components/TimelineStepper.tsx
similarity index 87%
rename from components/project/TimelineStepper.tsx
rename to features/projects/components/TimelineStepper.tsx
index 1e258d089..588afe888 100644
--- a/components/project/TimelineStepper.tsx
+++ b/features/projects/components/TimelineStepper.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { CrowdfundingProject } from '@/types/project';
+import { CrowdfundingProject } from '@/features/projects/types';
 import { Check, ThumbsUp } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
@@ -62,7 +62,7 @@ const TimelineStepper: React.FC<TimelineStepperProps> = () => {
           <div className='flex flex-col items-center'>
             <div
               className={cn(
-                'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full',
+                'flex h-8 w-8 shrink-0 items-center justify-center rounded-full',
                 item.completed
                   ? 'border border-[#1C1C1C] bg-[#1C1C1C] text-[#B5B5B5]'
                   : item.current
@@ -86,9 +86,7 @@ const TimelineStepper: React.FC<TimelineStepperProps> = () => {
             <h4
               className={cn(
                 'mb-1 font-medium',
-                item.id === 'public-voting'
-                  ? 'text-[#F5F5F5]'
-                  : 'text-[#919191]'
+                item.id === 'public-voting' ? 'text-[#F5F5F5]' : 'text-gray-600'
               )}
             >
               {item.label}
@@ -96,9 +94,7 @@ const TimelineStepper: React.FC<TimelineStepperProps> = () => {
             <span
               className={cn(
                 'text-sm',
-                item.id === 'public-voting'
-                  ? 'text-[#B5B5B5]'
-                  : 'text-[#919191]'
+                item.id === 'public-voting' ? 'text-[#B5B5B5]' : 'text-gray-600'
               )}
             >
               {item.date}
diff --git a/components/project/ValidationFlow.tsx b/features/projects/components/ValidationFlow.tsx
similarity index 98%
rename from components/project/ValidationFlow.tsx
rename to features/projects/components/ValidationFlow.tsx
index bd58b77b8..c6bc5d820 100644
--- a/components/project/ValidationFlow.tsx
+++ b/features/projects/components/ValidationFlow.tsx
@@ -2,11 +2,10 @@
 
 import React, { useState } from 'react';
 import Image from 'next/image';
-import { CrowdfundingProject } from '@/types/project';
+import { CrowdfundingProject } from '@/features/projects/types';
 import { Badge } from '@/components/ui/badge';
 import { Progress } from '@/components/ui/progress';
 import { Button } from '@/components/ui/button';
-import CommentModal from '../comment/modal';
 import {
   ThumbsUp,
   MessageCircle,
@@ -20,6 +19,7 @@ import { cn } from '@/lib/utils';
 import TimelineStepper from './TimelineStepper';
 import { useWalletProtection } from '@/hooks/use-wallet-protection';
 import WalletRequiredModal from '@/components/wallet/WalletRequiredModal';
+import CommentModal from '@/components/comment/modal';
 
 interface ValidationFlowProps {
   project: CrowdfundingProject;
diff --git a/components/project/index.ts b/features/projects/components/index.ts
similarity index 100%
rename from components/project/index.ts
rename to features/projects/components/index.ts
diff --git a/hooks/project/use-project-filters.ts b/features/projects/hooks/use-project-filters.ts
similarity index 97%
rename from hooks/project/use-project-filters.ts
rename to features/projects/hooks/use-project-filters.ts
index 69349d6fe..3525bab22 100644
--- a/hooks/project/use-project-filters.ts
+++ b/features/projects/hooks/use-project-filters.ts
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useDebounce } from '../use-debounce';
+import { useDebounce } from '@/hooks/use-debounce';
 
 type SortOption =
   | 'newest'
diff --git a/hooks/project/use-project.ts b/features/projects/hooks/use-project.ts
similarity index 97%
rename from hooks/project/use-project.ts
rename to features/projects/hooks/use-project.ts
index 13a1cc48c..e27ebc2d8 100644
--- a/hooks/project/use-project.ts
+++ b/features/projects/hooks/use-project.ts
@@ -1,8 +1,8 @@
 'use client';
 
 import * as React from 'react';
-import { getCrowdfundingProjects } from '@/lib/api/project';
-import type { Crowdfunding } from '@/types/project';
+import { getCrowdfundingProjects } from '@/features/projects/api';
+import type { Crowdfunding } from '@/features/projects/types';
 
 type SortOption =
   | 'newest'
diff --git a/types/project.ts b/features/projects/types/index.ts
similarity index 95%
rename from types/project.ts
rename to features/projects/types/index.ts
index aed298fb4..7f0bfce38 100644
--- a/types/project.ts
+++ b/features/projects/types/index.ts
@@ -7,6 +7,7 @@ export interface Contributor {
   username: string;
   name: string;
   image: string;
+  message?: string;
 }
 
 export interface TeamMember {
@@ -31,10 +32,13 @@ export interface Milestone {
   id?: string;
   name: string;
   amount: number;
-  status: string;
+  reviewStatus: string;
   endDate: string;
   startDate: string;
   description: string;
+  fundingPercentage: number;
+  title: string;
+  orderIndex?: string;
 }
 
 export interface User {
@@ -70,7 +74,7 @@ export interface PublicUserProfile {
   projects: Array<{
     id: string;
     title: string;
-    description: string;
+    vision: string;
     category: string;
     status: string;
     banner: string | null;
@@ -160,7 +164,9 @@ export interface CrowdfundingProject {
 export interface Crowdfunding {
   id: string;
   projectId: string;
+  slug: string;
   fundingGoal: number;
+  voteGoal: number;
   fundingRaised: number;
   fundingCurrency: string;
   fundingEndDate: string;
diff --git a/features/projects/utils/card-mappers.ts b/features/projects/utils/card-mappers.ts
new file mode 100644
index 000000000..d601e56bd
--- /dev/null
+++ b/features/projects/utils/card-mappers.ts
@@ -0,0 +1,178 @@
+import { Crowdfunding, CrowdfundingProject } from '@/features/projects/types';
+import { Project as UserProject } from '@/types/user';
+
+export type ProjectCardStatus =
+  | 'Validation'
+  | 'Funding'
+  | 'Funded'
+  | 'Completed';
+
+export interface ProjectCardData {
+  id: string;
+  slug: string;
+  title: string;
+  vision: string;
+  banner: string | null;
+  logo: string | null;
+  category: string;
+  creator: {
+    name: string;
+    image: string;
+  };
+  status: ProjectCardStatus;
+  stats: {
+    votes?: {
+      current: number;
+      goal: number;
+    };
+    funding?: {
+      raised: number;
+      goal: number;
+      currency: string;
+    };
+    milestones?: {
+      completed: number;
+      total: number;
+    };
+    daysLeft: number;
+  };
+}
+
+export const mapCrowdfundingToCardData = (
+  item: Crowdfunding
+): ProjectCardData => {
+  const { project } = item;
+
+  // Calculate days left
+  let daysLeft = 0;
+  if (item.fundingEndDate) {
+    try {
+      const now = new Date();
+      const end = new Date(item.fundingEndDate);
+      daysLeft = Math.max(
+        0,
+        Math.ceil((end.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
+      );
+    } catch {
+      daysLeft = 0;
+    }
+  }
+
+  // Determine status map
+  let status: ProjectCardStatus = 'Funding';
+  const rawStatus = project.status;
+  if (rawStatus === 'IDEA') status = 'Validation';
+  else if (rawStatus === 'ACTIVE') status = 'Funding';
+  else if (rawStatus === 'LIVE') status = 'Funded';
+  else if (rawStatus === 'COMPLETED') status = 'Completed';
+  // Add other status mappings as needed
+
+  // Milestones
+  const completedMilestones =
+    item.milestones?.filter(m => m.reviewStatus === 'completed')?.length || 0;
+  const totalMilestones = item.milestones?.length || 0;
+
+  return {
+    id: item.projectId,
+    slug: item.slug,
+    title: project.title,
+    vision: project.vision || '',
+    banner: project.banner,
+    logo: project.logo,
+    category: project.category,
+    creator: {
+      name: project.creator?.name || 'Unknown Creator',
+      image: project.creator?.image || '/user.png',
+    },
+    status,
+    stats: {
+      votes: {
+        current: item.voteProgress || 0, // Using voteProgress from new type if available
+        goal: item.voteGoal || 100,
+      },
+      funding: {
+        raised: item.fundingRaised,
+        goal: item.fundingGoal,
+        currency: item.fundingCurrency,
+      },
+      milestones: {
+        completed: completedMilestones,
+        total: totalMilestones,
+      },
+      daysLeft,
+    },
+  };
+};
+
+export const mapProjectToCardData = (
+  project: UserProject,
+  creator: { name: string; image: string }
+): ProjectCardData => {
+  // Map simplified status
+  let status: ProjectCardStatus = 'Validation';
+  if (project.status === 'funding' || project.status === 'in_progress')
+    status = 'Funding';
+  else if (project.status === 'LIVE') status = 'Funded';
+  else if (project.status === 'completed') status = 'Completed';
+
+  return {
+    id: project.id,
+    slug: project.id, // Fallback slug to id if not available
+    title: project.title,
+    vision: project.vision || '',
+    banner: project.banner || null,
+    logo: project.logo || null,
+    category: project.category,
+    creator,
+    status,
+    stats: {
+      daysLeft: 30, // Default for simple view
+      funding: {
+        raised: 0,
+        goal: 10000,
+        currency: 'USDC',
+      },
+      votes: {
+        current: 0,
+        goal: 100,
+      },
+    },
+  };
+};
+
+export const mapCrowdfundingProjectToCardData = (
+  project: CrowdfundingProject
+): ProjectCardData => {
+  // Keep logic similar to existing usage
+  let status: ProjectCardStatus = 'Validation';
+  if (project.status === 'active' || project.status === 'funding')
+    status = 'Funding';
+  else if (project.status === 'funded') status = 'Funded';
+  else if (project.status === 'completed') status = 'Completed';
+
+  // Calculate days left if needed, or default
+  const daysLeft = project.daysToDeadline || 30;
+
+  return {
+    id: project.id,
+    slug: project.id,
+    title: project.title,
+    vision: project.vision || '',
+    banner: project.banner,
+    logo: project.logo,
+    category: project.category,
+    creator: {
+      name: project.creator?.name || 'Creator',
+      image: project.creator?.image || '/user.png',
+    },
+    status,
+    stats: {
+      funding: {
+        raised: project.funding?.raised || 0,
+        goal: project.funding?.goal || 0,
+        currency: project.funding?.currency || 'USDC',
+      },
+      daysLeft,
+    },
+  };
+};
diff --git a/hooks/use-lazy-ref.ts b/hooks/use-lazy-ref.ts
new file mode 100644
index 000000000..65c384f48
--- /dev/null
+++ b/hooks/use-lazy-ref.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+function useLazyRef<T>(fn: () => T) {
+  const ref = React.useRef<T | null>(null);
+
+  if (ref.current === null) {
+    ref.current = fn();
+  }
+
+  return ref as React.RefObject<T>;
+}
+
+export { useLazyRef };
diff --git a/hooks/use-markdown.ts b/hooks/use-markdown.ts
index b4893631c..a6941a161 100644
--- a/hooks/use-markdown.ts
+++ b/hooks/use-markdown.ts
@@ -1,3 +1,4 @@
+'use client';
 import { useState, useEffect, useMemo } from 'react';
 import { marked } from 'marked';
 import React from 'react';
diff --git a/hooks/use-notification-polling.ts b/hooks/use-notification-polling.ts
index cb6eb9ac4..210c1294b 100644
--- a/hooks/use-notification-polling.ts
+++ b/hooks/use-notification-polling.ts
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import type { UseNotificationsReturn } from './use-notifications';
+import type { UseNotificationsReturn } from './useNotifications';
 
 interface UseNotificationPollingOptions {
   interval?: number;
diff --git a/hooks/use-notifications.ts b/hooks/use-notifications.ts
deleted file mode 100644
index f8c2154ca..000000000
--- a/hooks/use-notifications.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import {
-  getNotifications,
-  markAsRead,
-  markAllAsRead,
-} from '@/lib/api/notifications';
-import type { Notification } from '@/types/notifications';
-
-interface UseNotificationsOptions {
-  page?: number;
-  limit?: number;
-  autoFetch?: boolean;
-}
-
-export interface UseNotificationsReturn {
-  notifications: Notification[];
-  loading: boolean;
-  error: Error | null;
-  total: number;
-  currentPage: number;
-  setCurrentPage: (page: number) => void;
-  unreadCount: number;
-  markNotificationAsRead: (ids: string[]) => Promise<void>;
-  markAllAsRead: () => Promise<void>;
-  refetch: () => Promise<void>;
-}
-
-export const useNotifications = (
-  options: UseNotificationsOptions = {}
-): UseNotificationsReturn => {
-  const { page: initialPage = 1, limit = 10, autoFetch = true } = options;
-
-  const [notifications, setNotifications] = useState<Notification[]>([]);
-  const [loading, setLoading] = useState<boolean>(autoFetch);
-  const [error, setError] = useState<Error | null>(null);
-  const [total, setTotal] = useState<number>(0);
-  const [currentPage, setCurrentPage] = useState<number>(initialPage);
-
-  const fetchNotifications = useCallback(async () => {
-    try {
-      setLoading(true);
-      setError(null);
-      const response = await getNotifications(currentPage, limit);
-
-      // Response structure: { data: Notification[], total: number, page: number, limit: number }
-      if (response && Array.isArray(response.data)) {
-        setNotifications(response.data || []);
-        setTotal(response.total || 0);
-      } else {
-        throw new Error('Invalid response format');
-      }
-    } catch (err) {
-      const errorMessage =
-        err instanceof Error ? err : new Error('Failed to fetch notifications');
-      setError(errorMessage);
-      setNotifications([]);
-    } finally {
-      setLoading(false);
-    }
-  }, [currentPage, limit]);
-
-  useEffect(() => {
-    if (autoFetch) {
-      fetchNotifications();
-    }
-  }, [fetchNotifications, autoFetch]);
-
-  const markNotificationAsRead = useCallback(
-    async (ids: string[]) => {
-      // Optimistic update
-      setNotifications(prev =>
-        prev.map(notif =>
-          ids.includes(notif._id)
-            ? {
-                ...notif,
-                read: true,
-                readAt: new Date().toISOString(),
-              }
-            : notif
-        )
-      );
-
-      try {
-        await markAsRead({ ids });
-      } catch (err) {
-        // Revert on error
-        await fetchNotifications();
-        throw err;
-      }
-    },
-    [fetchNotifications]
-  );
-
-  const handleMarkAllAsRead = useCallback(async () => {
-    // Optimistic update
-    setNotifications(prev =>
-      prev.map(notif => ({
-        ...notif,
-        read: true,
-        readAt: new Date().toISOString(),
-      }))
-    );
-
-    try {
-      await markAllAsRead();
-    } catch (err) {
-      // Revert on error
-      await fetchNotifications();
-      throw err;
-    }
-  }, [fetchNotifications]);
-
-  const unreadCount = notifications.filter(n => !n.read).length;
-
-  return {
-    notifications,
-    loading,
-    error,
-    total,
-    currentPage,
-    setCurrentPage,
-    unreadCount,
-    markNotificationAsRead,
-    markAllAsRead: handleMarkAllAsRead,
-    refetch: fetchNotifications,
-  };
-};
diff --git a/hooks/useNotifications.ts b/hooks/useNotifications.ts
index 0ef69cd57..e9eb1812c 100644
--- a/hooks/useNotifications.ts
+++ b/hooks/useNotifications.ts
@@ -1,19 +1,38 @@
-'use client';
-
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { useSocket } from './useSocket';
+import { getNotifications } from '@/lib/api/notifications';
+import { Notification } from '@/types/notifications';
+
+interface UseNotificationsOptions {
+  page?: number;
+  limit?: number;
+  autoFetch?: boolean;
+}
 
-interface Notification {
-  id: string;
-  type: string;
-  title: string;
-  message: string;
-  data?: Record<string, unknown>;
-  timestamp?: string;
-  [key: string]: unknown;
+export interface UseNotificationsReturn {
+  notifications: Notification[];
+  unreadCount: number;
+  isConnected: boolean;
+  loading: boolean;
+  error: Error | null;
+  total: number;
+  currentPage: number;
+  setCurrentPage: (page: number) => void;
+  markAsRead: (notificationId: string) => void;
+  markAllAsRead: () => Promise<void>;
+  markNotificationAsRead: (ids: string[]) => Promise<void>;
+  fetchNotifications: () => Promise<void>;
+  refetch: () => Promise<void>;
 }
 
-export function useNotifications(userId?: string) {
+export function useNotifications(
+  input?: string | UseNotificationsOptions
+): UseNotificationsReturn {
+  // Handle overloaded arguments
+  const userId = typeof input === 'string' ? input : undefined;
+  const options = typeof input === 'object' ? input : {};
+  const { page: initialPage = 1, limit = 10, autoFetch = true } = options;
+
   const { socket, isConnected } = useSocket({
     namespace: '/notifications',
     userId,
@@ -21,12 +40,47 @@ export function useNotifications(userId?: string) {
 
   const [notifications, setNotifications] = useState<Notification[]>([]);
   const [unreadCount, setUnreadCount] = useState(0);
+  const [loading, setLoading] = useState(autoFetch);
+  const [error, setError] = useState<Error | null>(null);
+  const [total, setTotal] = useState(0);
+  const [currentPage, setCurrentPage] = useState(initialPage);
+
+  // Fetch notifications with pagination
+  const fetchNotifications = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await getNotifications(currentPage, limit);
+
+      if (response && Array.isArray(response.notifications)) {
+        // Sort notifications by createdAt desc to ensure correct order
+        const sorted = [...response.notifications].sort(
+          (a, b) =>
+            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+        );
+        setNotifications(sorted);
+        setTotal(response.total || 0);
+      }
+    } catch (err) {
+      console.error('Failed to fetch notifications:', err);
+      setError(
+        err instanceof Error ? err : new Error('Failed to fetch notifications')
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [currentPage, limit]);
+
+  // Initial fetch
+  useEffect(() => {
+    if (autoFetch) {
+      fetchNotifications();
+    }
+  }, [fetchNotifications, autoFetch]);
 
   // Request initial unread count when socket connects
   useEffect(() => {
     if (socket && isConnected) {
-      console.log('Socket connected, requesting unread count');
-      // Request initial unread count from server
       socket.emit('get-unread-count');
     }
   }, [socket, isConnected]);
@@ -38,14 +92,30 @@ export function useNotifications(userId?: string) {
     }
 
     // Listen for new notifications
-    const handleNotification = (notification: Notification) => {
+    const handleNotification = (notification: any) => {
+      const normalizedNotification: Notification = {
+        ...notification,
+        id: notification.id || notification._id,
+        createdAt:
+          notification.createdAt ||
+          notification.timestamp ||
+          new Date().toISOString(),
+      };
+
       setNotifications(prev => {
         // Avoid duplicates
-        const exists = prev.some(n => n.id === notification.id);
+        const exists = prev.some(n => n.id === normalizedNotification.id);
         if (exists) {
           return prev;
         }
-        return [notification, ...prev];
+
+        // Add new notification and resort
+        // Note: For pagination, real-time updates might be tricky.
+        // We typically add it to the top if we are on page 1.
+        if (currentPage === 1) {
+          return [normalizedNotification, ...prev];
+        }
+        return prev;
       });
       setUnreadCount(prev => prev + 1);
     };
@@ -57,12 +127,10 @@ export function useNotifications(userId?: string) {
 
     // Listen for notification updates
     const handleNotificationUpdated = (data: any) => {
-      // Update notification if it exists
-      if (data.notificationId) {
+      const id = data.notificationId || data.id || data._id;
+      if (id) {
         setNotifications(prev =>
-          prev.map(notif =>
-            notif.id === data.notificationId ? { ...notif, ...data } : notif
-          )
+          prev.map(notif => (notif.id === id ? { ...notif, ...data } : notif))
         );
       }
     };
@@ -73,12 +141,10 @@ export function useNotifications(userId?: string) {
       setUnreadCount(0);
     };
 
-    // Error handling
     const handleError = (error: { message: string }) => {
       console.error('WebSocket error:', error);
     };
 
-    // Register all listeners
     socket.on('notification', handleNotification);
     socket.on('unread-count', handleUnreadCount);
     socket.on('notification-updated', handleNotificationUpdated);
@@ -92,21 +158,37 @@ export function useNotifications(userId?: string) {
       socket.off('all-notifications-read', handleAllRead);
       socket.off('error', handleError);
     };
-  }, [socket]);
+  }, [socket, currentPage]);
 
   const markAsRead = (notificationId: string) => {
+    setNotifications(prev =>
+      prev.map(n => (n.id === notificationId ? { ...n, read: true } : n))
+    );
+    setUnreadCount(prev => Math.max(0, prev - 1));
+
     if (socket && isConnected) {
       socket.emit('mark-read', { notificationId });
-    } else {
-      console.warn('Cannot mark as read: socket not connected');
     }
   };
 
-  const markAllAsRead = () => {
+  const markNotificationAsRead = async (ids: string[]) => {
+    // Optimistic
+    setNotifications(prev =>
+      prev.map(n => (ids.includes(n.id) ? { ...n, read: true } : n))
+    );
+    // Note: unread count update is approximate here, ideally we wait for socket update
+
+    if (socket && isConnected) {
+      ids.forEach(id => socket.emit('mark-read', { notificationId: id }));
+    }
+  };
+
+  const markAllAsRead = async () => {
+    setNotifications(prev => prev.map(n => ({ ...n, read: true })));
+    setUnreadCount(0);
+
     if (socket && isConnected) {
       socket.emit('mark-all-read');
-    } else {
-      console.warn('Cannot mark all as read: socket not connected');
     }
   };
 
@@ -114,7 +196,15 @@ export function useNotifications(userId?: string) {
     notifications,
     unreadCount,
     isConnected,
+    loading,
+    error,
+    total,
+    currentPage,
+    setCurrentPage,
     markAsRead,
     markAllAsRead,
+    markNotificationAsRead,
+    fetchNotifications,
+    refetch: fetchNotifications,
   };
 }
diff --git a/lib/activities-description.ts b/lib/activities-description.ts
index 307ade41b..512e6c76f 100644
--- a/lib/activities-description.ts
+++ b/lib/activities-description.ts
@@ -1,6 +1,4 @@
-import { ActivityType } from '@/types/user';
-
-export const getActivityDescription = (activityType: ActivityType) => {
+export const getActivityDescription = (activityType: string) => {
   switch (activityType) {
     case 'AVATAR_CHANGED':
       return 'You changed your avatar';
diff --git a/lib/api/auth.ts b/lib/api/auth.ts
index d16611c0f..4f0252d9c 100644
--- a/lib/api/auth.ts
+++ b/lib/api/auth.ts
@@ -2,7 +2,8 @@ import api from './api';
 import { ApiResponse } from '@/lib/api/types';
 import { authClient } from '@/lib/auth-client';
 import { User } from '@/types/user';
-import { PublicUserProfile } from '@/types/project';
+import { PublicUserProfile } from '@/features/projects/types';
+import { GetMeResponse } from '@/lib/api/types';
 
 /**
  * Get current user profile from backend API
@@ -11,11 +12,9 @@ import { PublicUserProfile } from '@/types/project';
  * For client-side usage, cookies are automatically sent via withCredentials
  * For server-side usage, use getMeServer() from '@/lib/api/auth-server' instead
  */
-export const getMe = async (): Promise<User> => {
-  console.trace('getMe called from:');
-
-  const res = await api.get<ApiResponse<User>>('/users/me');
-  return res.data.data as User;
+export const getMe = async (): Promise<GetMeResponse> => {
+  const res = await api.get<ApiResponse<GetMeResponse>>('/users/me');
+  return res.data.data as GetMeResponse;
 };
 
 /**
diff --git a/lib/api/notifications.ts b/lib/api/notifications.ts
index df00d7fe1..c928f9200 100644
--- a/lib/api/notifications.ts
+++ b/lib/api/notifications.ts
@@ -14,30 +14,27 @@ export const getNotifications = async (
   page: number = 1,
   limit: number = 10
 ): Promise<NotificationsResponse> => {
-  console.log('getNotifications', page, limit);
-  // const params = new URLSearchParams({
-  //   page: page.toString(),
-  //   limit: limit.toString(),
-  // });
+  const params = new URLSearchParams({
+    page: page.toString(),
+    limit: limit.toString(),
+  });
 
-  // const res = await api.get<NotificationsResponse>(
-  //   `/notifications?${params.toString()}`
-  // );
+  const res = await api.get<{ data: NotificationsResponse }>(
+    `/notifications?${params.toString()}`
+  );
 
-  // // Backend returns { data, total, page, limit } directly
-  // // The api.get wrapper returns ApiResponse<T>, so res.data is the actual response
-  // if (res.data && 'data' in res.data) {
-  //   return res.data as NotificationsResponse;
-  // }
+  // Backend returns { success, message, data: { notifications: [], ... } }
+  if (res.data && res.data.data) {
+    return res.data.data;
+  }
 
-  // // Fallback: if the response structure is different, return as-is
-  // return res.data as NotificationsResponse;
+  // Fallback
   return {
-    data: [],
+    notifications: [],
     total: 0,
-    page: 1,
-    limit: 10,
-  } as NotificationsResponse;
+    limit,
+    offset: 0,
+  };
 };
 
 /**
diff --git a/lib/api/project.ts b/lib/api/project.ts
deleted file mode 100644
index 8135bf436..000000000
--- a/lib/api/project.ts
+++ /dev/null
@@ -1,342 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { CrowdfundingProject, Crowdfunding } from '@/types/project';
-import api from './api';
-import {
-  ProjectInitRequest,
-  CreateCrowdfundingProjectRequest,
-  CreateCrowdfundingProjectResponse,
-  PrepareCrowdfundingProjectResponse,
-  ConfirmCrowdfundingProjectRequest,
-  ConfirmCrowdfundingProjectResponse,
-  GetCrowdfundingProjectsResponse,
-  UpdateCrowdfundingProjectRequest,
-  UpdateCrowdfundingProjectResponse,
-  DeleteCrowdfundingProjectResponse,
-  FundCrowdfundingProjectRequest,
-  FundCrowdfundingProjectResponse,
-  PrepareFundingRequest,
-  PrepareFundingResponse,
-  ConfirmFundingRequest,
-  ConfirmFundingResponse,
-  VoteResponse,
-  GetProjectVotesRequest,
-  GetProjectVotesResponse,
-  RemoveVoteResponse,
-} from './types';
-
-export const initProject = async (data: ProjectInitRequest) => {
-  const res = await api.post('/projects', data);
-  return res;
-};
-
-export const getProjects = async (
-  page = 1,
-  limit = 9,
-  filters?: {
-    status?: string;
-    owner?: string;
-  }
-): Promise<{
-  projects: CrowdfundingProject[];
-  pagination: {
-    currentPage: number;
-    totalPages: number;
-    totalItems: number;
-    hasNextPage: boolean;
-    hasPrevPage: boolean;
-  };
-}> => {
-  const params = new URLSearchParams({
-    page: page.toString(),
-    limit: limit.toString(),
-  });
-
-  if (filters?.status && filters.status !== 'all') {
-    params.append('status', filters.status);
-  }
-
-  if (filters?.owner) {
-    params.append('owner', filters.owner);
-  }
-
-  const res = await api.get(`/projects?${params.toString()}`);
-  return res.data.data;
-};
-
-export const getProjectDetails = async (_projectId: string) => {
-  const res = await api.get(`/projects/${_projectId}`);
-  return res.data.data;
-};
-
-export const deleteProject = async (_projectId: string) => {
-  const res = await api.delete(`/projects/${_projectId}`);
-  return res.data.data;
-};
-
-export const updateProject = async (
-  _projectId: string,
-  data: ProjectInitRequest
-) => {
-  const res = await api.put(`/projects/${_projectId}`, data);
-  return res.data.data;
-};
-
-export const launchCampaign = async (_projectId: string) => {
-  console.log('launchCampaign', _projectId);
-  // Mock implementation for now
-  return new Promise(resolve => {
-    setTimeout(() => {
-      resolve({
-        success: true,
-        message: 'Campaign launched successfully',
-        data: {
-          campaignId: 'launched-campaign-123',
-          shareLink: 'https://boundlessfi.xyz/campaigns/launched-campaign-123',
-        },
-      });
-    }, 2000);
-  });
-};
-
-export const generateCampaignLink = async (_projectId: string) => {
-  // Mock implementation for now
-  return new Promise(resolve => {
-    setTimeout(() => {
-      resolve({
-        success: true,
-        data: {
-          shareLink: 'https://boundlessfi.xyz/campaigns/' + _projectId,
-        },
-      });
-    }, 500);
-  });
-};
-
-/**
- * Create a crowdfunding project
- * Frontend handles all blockchain transactions and provides escrow data
- * @param data - Project data including escrowId, transactionHash, and validateMilestones
- */
-export const createCrowdfundingProject = async (
-  data: CreateCrowdfundingProjectRequest
-): Promise<CreateCrowdfundingProjectResponse> => {
-  const res = await api.post('/crowdfunding', data);
-  return res.data;
-};
-
-/**
- * @deprecated This endpoint no longer exists in the backend.
- * All blockchain transactions are now handled in the frontend.
- * Use createCrowdfundingProject directly with contractId, escrowAddress, and transactionHash.
- */
-export const prepareCrowdfundingProject = async (
-  data: CreateCrowdfundingProjectRequest
-): Promise<PrepareCrowdfundingProjectResponse> => {
-  console.log('prepareCrowdfundingProject', data);
-  throw new Error(
-    'prepareCrowdfundingProject is deprecated. All blockchain transactions should be handled in the frontend. Use createCrowdfundingProject with contractId, escrowAddress, and transactionHash.'
-  );
-};
-
-/**
- * @deprecated This endpoint no longer exists in the backend.
- * All blockchain transactions are now handled in the frontend.
- * Use createCrowdfundingProject directly with contractId, escrowAddress, and transactionHash.
- */
-export const confirmCrowdfundingProject = async (
-  data: ConfirmCrowdfundingProjectRequest
-): Promise<ConfirmCrowdfundingProjectResponse> => {
-  console.log('confirmCrowdfundingProject', data);
-  throw new Error(
-    'confirmCrowdfundingProject is deprecated. All blockchain transactions should be handled in the frontend. Use createCrowdfundingProject with contractId, escrowAddress, and transactionHash.'
-  );
-};
-
-// Crowdfunding Project API Functions
-
-/**
- * Get all crowdfunding projects with pagination and filtering
- */
-export const getCrowdfundingProjects = async (
-  page = 1,
-  limit = 10,
-  filters?: {
-    category?: string;
-    status?: string;
-    minFundingGoal?: string;
-    maxFundingGoal?: string;
-    sortBy?: string;
-    sortOrder?: 'asc' | 'desc';
-    search?: string;
-  }
-): Promise<GetCrowdfundingProjectsResponse> => {
-  const params = new URLSearchParams({
-    page: page.toString(),
-    limit: limit.toString(),
-  });
-
-  if (filters?.category) {
-    params.append('category', filters.category);
-  }
-
-  if (filters?.status) {
-    params.append('status', filters.status);
-  }
-
-  if (filters?.minFundingGoal) {
-    params.append('minFundingGoal', filters.minFundingGoal);
-  }
-
-  if (filters?.maxFundingGoal) {
-    params.append('maxFundingGoal', filters.maxFundingGoal);
-  }
-
-  if (filters?.sortBy) {
-    params.append('sortBy', filters.sortBy);
-  }
-
-  if (filters?.sortOrder) {
-    params.append('sortOrder', filters.sortOrder);
-  }
-
-  if (filters?.search) {
-    params.append('search', filters.search);
-  }
-
-  const queryString = params.toString();
-  const url = queryString ? `/crowdfunding?${queryString}` : '/crowdfunding';
-
-  const res = await api.get(url);
-  return res.data;
-};
-
-/**
- * Get a single crowdfunding project by ID
- */
-export const getCrowdfundingProject = async (
-  projectId: string
-): Promise<Crowdfunding> => {
-  const res = await api.get(`/crowdfunding/${projectId}`);
-  console.log(res);
-  return res.data.data;
-};
-
-/**
- * Update a crowdfunding project
- */
-export const updateCrowdfundingProject = async (
-  projectId: string,
-  data: UpdateCrowdfundingProjectRequest
-): Promise<UpdateCrowdfundingProjectResponse> => {
-  const res = await api.put(`/crowdfunding/${projectId}`, data);
-  return res.data;
-};
-
-/**
- * Delete a crowdfunding project
- */
-export const deleteCrowdfundingProject = async (
-  projectId: string
-): Promise<DeleteCrowdfundingProjectResponse> => {
-  const res = await api.delete(`/crowdfunding/projects/${projectId}`);
-  return res.data;
-};
-
-/**
- * Fund a crowdfunding project
- * Frontend handles all blockchain transactions and provides transaction hash
- * @param projectId - The ID of the project to fund
- * @param data - Funding data including amount and transactionHash
- */
-export const fundCrowdfundingProject = async (
-  projectId: string,
-  data: FundCrowdfundingProjectRequest
-): Promise<FundCrowdfundingProjectResponse> => {
-  const res = await api.post(`/crowdfunding/projects/${projectId}/fund`, data);
-  return res.data;
-};
-
-/**
- * @deprecated This endpoint no longer exists in the backend.
- * All blockchain transactions are now handled in the frontend.
- * Use fundCrowdfundingProject directly with amount and transactionHash.
- */
-export const prepareProjectFunding = async (
-  projectId: string,
-  data: PrepareFundingRequest
-): Promise<PrepareFundingResponse> => {
-  console.log('prepareProjectFunding', projectId, data);
-  throw new Error(
-    'prepareProjectFunding is deprecated. All blockchain transactions should be handled in the frontend. Use fundCrowdfundingProject with amount and transactionHash.'
-  );
-};
-
-/**
- * @deprecated This endpoint no longer exists in the backend.
- * All blockchain transactions are now handled in the frontend.
- * Use fundCrowdfundingProject directly with amount and transactionHash.
- */
-export const confirmProjectFunding = async (
-  projectId: string,
-  data: ConfirmFundingRequest
-): Promise<ConfirmFundingResponse> => {
-  console.log('confirmProjectFunding', projectId, data);
-  throw new Error(
-    'confirmProjectFunding is deprecated. All blockchain transactions should be handled in the frontend. Use fundCrowdfundingProject with amount and transactionHash.'
-  );
-};
-export const voteProject = async (
-  projectId: string,
-  value: 1 | -1 = 1
-): Promise<VoteResponse> => {
-  const res = await api.post(`/projects/${projectId}/vote`, { value });
-  return res.data;
-};
-
-/**
- * Get votes for a project with pagination and filtering
- */
-export const getProjectVotes = async (
-  projectId: string,
-  params?: GetProjectVotesRequest
-): Promise<GetProjectVotesResponse> => {
-  const queryParams = new URLSearchParams();
-
-  if (params?.page) {
-    queryParams.append('page', params.page.toString());
-  }
-
-  if (params?.limit) {
-    queryParams.append('limit', params.limit.toString());
-  }
-
-  if (params?.voteType) {
-    queryParams.append('voteType', params.voteType);
-  }
-
-  const queryString = queryParams.toString();
-  const url = queryString
-    ? `/projects/${projectId}/votes?${queryString}`
-    : `/projects/${projectId}/votes`;
-
-  const res = await api.get(url);
-  return res.data;
-};
-
-/**
- * Remove user's vote from a project
- */
-export const removeProjectVote = async (
-  projectId: string
-): Promise<RemoveVoteResponse> => {
-  const res = await api.delete(`/projects/${projectId}/vote`);
-  return res.data;
-};
-
-export const contributeToProject = async (
-  projectId: string,
-  data: FundCrowdfundingProjectRequest
-): Promise<FundCrowdfundingProjectResponse> => {
-  const res = await api.post(`/crowdfunding/${projectId}/contribute`, data);
-  return res.data;
-};
diff --git a/lib/api/types.ts b/lib/api/types.ts
index 616792c8f..2d24bb7fa 100644
--- a/lib/api/types.ts
+++ b/lib/api/types.ts
@@ -1,4 +1,4 @@
-import { CrowdfundingProject, Crowdfunding } from '@/types/project';
+import { CrowdfundingProject, Crowdfunding } from '@/features/projects/types';
 
 // Backend API Response Structure
 export interface ApiResponse<T = unknown> {
@@ -49,13 +49,74 @@ export interface UserProfile {
 }
 
 export interface User {
-  _id: string;
+  id: string;
+  name: string;
   email: string;
-  profile: UserProfile;
-  isVerified: boolean;
-  roles: string[];
-  lastLogin?: string;
-  [key: string]: unknown;
+  emailVerified: boolean;
+  image?: string;
+  createdAt: string;
+  updatedAt: string;
+  lastLoginMethod?: string;
+  role: string;
+  banned: boolean;
+  banReason?: string | null;
+  banExpires?: string | null;
+  username: string;
+  displayUsername: string;
+  metadata?: Record<string, unknown>;
+  twoFactorEnabled: boolean;
+  members?: Array<{
+    id: string;
+    organizationId: string;
+    userId: string;
+    role: string;
+    createdAt: string;
+    organization: {
+      id: string;
+      name: string;
+      slug: string;
+      logo: string;
+      createdAt: string;
+      _count: {
+        hackathons: number;
+        members: number;
+      };
+    };
+  }>;
+  projects?: Array<{
+    id: string;
+    title: string;
+    vision: string;
+    category: string;
+    status: string;
+    banner?: string | null;
+    logo?: string | null;
+    createdAt: string;
+  }>;
+  activities?: Array<{
+    id: string;
+    type: string;
+    userId: string;
+    projectId?: string | null;
+    organizationId?: string | null;
+    metadata?: any;
+    createdAt: string;
+    updatedAt: string;
+    project?: Record<string, unknown>;
+  }>;
+  userBadges?: unknown[];
+  grantApplicationsAsApplicant?: unknown[];
+  hackathonSubmissionsAsParticipant?: Array<{
+    id: string;
+    status: string;
+    rank?: number | null;
+    submittedAt: string;
+  }>;
+  profile?: Record<string, unknown>;
+  stats?: {
+    followers: number;
+    following: number;
+  };
 }
 export interface OrganizationLinks {
   website: string;
@@ -101,8 +162,8 @@ export interface Organization {
   members?: string[]; // Array of user emails
   admins?: string[]; // Array of admin emails
   owner?: string; // Owner email or userId
-  hackathons?: any[]; // Full hackathon objects instead of just IDs
-  grants?: any[]; // Full grant objects instead of just IDs
+  hackathons?: unknown[]; // Full hackathon objects instead of just IDs
+  grants?: unknown[]; // Full grant objects instead of just IDs
   isProfileComplete: boolean;
   pendingInvites?: string[]; // Array of emails invited but not yet accepted
   betterAuthOrgId?: string; // Better Auth organization ID for organizations using Better Auth integration
@@ -162,29 +223,36 @@ export interface GoogleAuthRequest {
 export type GoogleAuthResponse = AuthTokens;
 
 // GetMe
-export type GetMeResponse = User & {
-  organizations: Organization[];
-  projects: CrowdfundingProject[];
-  following: User[];
-  followers: User[];
+export interface GetMeResponse {
+  user: User;
   stats: {
-    votes: number;
-    grants: number;
-    hackathons: number;
-    donations: number;
     projectsCreated: number;
     projectsFunded: number;
     totalContributed: number;
-    reputation: number;
-    communityScore: number;
     commentsPosted: number;
-    organizations: number;
+    votes: number;
+    grants: number;
+    hackathons: number;
     followers: number;
     following: number;
+    reputation: number;
+    communityScore: number;
   };
-  activities: unknown[];
-  contributedProjects: unknown[];
-};
+  chart: Array<{ date: string; count: number }>;
+  activitiesGraph: Array<{ date: string; count: number }>;
+  recentActivities: Array<{
+    id: string;
+    type: string;
+    userId: string;
+    projectId?: string | null;
+    organizationId?: string | null;
+    metadata?: any;
+    createdAt: string;
+    updatedAt: string;
+    project?: Record<string, unknown>;
+    organization?: Record<string, unknown>;
+  }>;
+}
 
 // Logout
 export interface LogoutResponse {
@@ -327,7 +395,7 @@ export interface MilestoneInit {
   description: string;
   deliveryDate: string; // YYYY-MM-DD
   fundPercentage: number; // 0-100
-  fundAmount: number; // derived: fundAmount * fundPercentage / 100
+  amount: number; // derived: fundAmount * fundPercentage / 100
 }
 
 export interface ProjectInitRequest {
@@ -336,7 +404,7 @@ export interface ProjectInitRequest {
   tagline: string;
   type: 'crowdfund' | 'grant';
   category: string;
-  fundAmount: number;
+  amount: number;
   tags: string[];
   // Optional assets until upload integration is wired
   thumbnail?: string;
@@ -360,7 +428,7 @@ export interface CampaignDetails {
   tagline: string;
   description: string;
   category: string;
-  fundAmount: number;
+  amount: number;
   raisedAmount: number;
   tags: string[];
   thumbnail: string;
@@ -413,8 +481,8 @@ export interface ShareLinkResponse {
 export interface CrowdfundingMilestone {
   name: string;
   description: string;
-  startDate: string; // YYYY-MM-DD
-  endDate: string; // YYYY-MM-DD
+  startDate: string;
+  endDate: string;
   amount: number;
 }
 
@@ -439,6 +507,7 @@ export interface CrowdfundingSocialLink {
 export interface CreateCrowdfundingProjectRequest {
   title: string;
   logo: string;
+  banner?: string;
   vision: string;
   category: string;
   details: string;
@@ -448,14 +517,32 @@ export interface CreateCrowdfundingProjectRequest {
   bitbucketUrl?: string;
   projectWebsite?: string;
   demoVideo?: string;
-  milestones: CrowdfundingMilestone[];
-  team: CrowdfundingTeamMember[];
-  contact: CrowdfundingContact;
-  socialLinks?: CrowdfundingSocialLink[];
-  // Blockchain transaction data (handled by frontend)
+  milestones: Array<{
+    title: string;
+    description: string;
+    deliverable: string;
+    expectedDeliveryDate: string;
+    fundingPercentage: number;
+    orderIndex: number;
+    amount: number;
+  }>;
+  team: Array<{
+    name: string;
+    role: string;
+    email: string;
+    linkedin?: string;
+    twitter?: string;
+  }>;
+  contact: {
+    primary: string;
+    backup: string;
+  };
+  socialLinks: Array<{
+    platform: string;
+    url: string;
+  }>;
   escrowId: string;
   transactionHash: string;
-  validateMilestones?: boolean;
 }
 
 // Step 1: Prepare Project Response
@@ -768,6 +855,8 @@ export interface DeleteCrowdfundingProjectResponse {
 export interface FundCrowdfundingProjectRequest {
   amount: number;
   transactionHash: string;
+  anonymous?: boolean;
+  message?: string;
 }
 
 export interface FundCrowdfundingProjectResponse {
@@ -890,3 +979,6 @@ export interface RemoveVoteResponse {
   };
   message: string;
 }
+
+// Alias for backward compatibility
+// export type CrowdfundingCampaign = CreateCrowdfundingProjectResponse;
diff --git a/lib/api/upload.ts b/lib/api/upload.ts
index d879dce14..e75e14e00 100644
--- a/lib/api/upload.ts
+++ b/lib/api/upload.ts
@@ -458,4 +458,18 @@ export const uploadProjectGallery = async (
   });
 };
 
+/**
+ * Upload milestone evidence documents
+ */
+export const uploadMilestoneDocuments = async (
+  files: File[],
+  campaignId: string,
+  milestoneIndex: number
+) => {
+  return uploadService.uploadMultiple(files, {
+    folder: `boundless/campaigns/${campaignId}/milestones/${milestoneIndex}`,
+    tags: ['milestone', 'evidence', 'document'],
+  });
+};
+
 export default uploadService;
diff --git a/lib/auth/server-auth.ts b/lib/auth/server-auth.ts
index 00b91dfb1..79f6b7d79 100644
--- a/lib/auth/server-auth.ts
+++ b/lib/auth/server-auth.ts
@@ -98,13 +98,13 @@ export async function getServerUser(): Promise<ServerUser | null> {
     const user = await getMeServer();
 
     return {
-      id: (user._id || user.id) as string,
-      email: user.email as string,
-      name: (user.profile?.firstName || user.name) as string | null,
-      image: (user.profile?.avatar || user.image) as string | null,
-      role: user.roles?.[0] === 'ADMIN' ? 'ADMIN' : 'USER',
-      isVerified: user.isVerified,
-      profile: user.profile,
+      id: user.user.id as string,
+      email: user.user.email as string,
+      name: user.user.name as string | null,
+      image: user.user.image as string | null,
+      role: user.user.role === 'super_admin' ? 'ADMIN' : 'USER',
+      isVerified: user.user.emailVerified,
+      profile: user.user.profile,
     };
   } catch {
     // Silently handle auth errors
diff --git a/lib/auth/utils.ts b/lib/auth/utils.ts
index dc83fa966..793ef4238 100644
--- a/lib/auth/utils.ts
+++ b/lib/auth/utils.ts
@@ -4,7 +4,7 @@ import { User } from '@/lib/api/types';
  * Safely extracts role from user data, defaulting to 'USER'
  */
 export function safeRole(val: unknown): 'USER' | 'ADMIN' {
-  return val === 'ADMIN' ? 'ADMIN' : 'USER';
+  return val === 'ADMIN' || val === 'super_admin' ? 'ADMIN' : 'USER';
 }
 
 /**
@@ -38,9 +38,7 @@ export function safeStringOrNull(value: unknown): string | null {
 export function extractUserInfo(user: User) {
   // Extract role with proper fallback logic
   let role: 'USER' | 'ADMIN' = 'USER';
-  if (Array.isArray(user.roles) && user.roles.length > 0) {
-    role = safeRole(user.roles[0]);
-  } else if (typeof user.role === 'string') {
+  if (typeof user.role === 'string') {
     role = safeRole(user.role);
   }
 
@@ -49,11 +47,12 @@ export function extractUserInfo(user: User) {
     user.profile && typeof user.profile === 'object' ? user.profile : {};
 
   const firstName = safeStringOrNull(
-    (profile as Record<string, unknown>).firstName || user.firstName
+    (profile as Record<string, unknown>).firstName || user.name?.split(' ')[0]
   );
 
   const lastName = safeStringOrNull(
-    (profile as Record<string, unknown>).lastName || user.lastName
+    (profile as Record<string, unknown>).lastName ||
+      user.name?.split(' ').slice(1).join(' ')
   );
 
   const image = safeStringOrNull(
@@ -61,11 +60,11 @@ export function extractUserInfo(user: User) {
   );
 
   const username = safeStringOrNull(
-    (profile as Record<string, unknown>).username
+    (profile as Record<string, unknown>).username || user.username
   );
 
   return {
-    id: getId(user._id, user.id),
+    id: getId(user.id, user.id),
     email: safeString(user.email),
     firstName,
     lastName,
diff --git a/lib/compose-refs.ts b/lib/compose-refs.ts
new file mode 100644
index 000000000..ade7a28f3
--- /dev/null
+++ b/lib/compose-refs.ts
@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+type PossibleRef<T> = React.Ref<T> | undefined;
+
+/**
+ * Set a given ref to a given value
+ * This utility takes care of different types of refs: callback refs and RefObject(s)
+ */
+function setRef<T>(ref: PossibleRef<T>, value: T) {
+  if (typeof ref === 'function') {
+    return ref(value);
+  }
+
+  if (ref !== null && ref !== undefined) {
+    ref.current = value;
+  }
+}
+
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+  return node => {
+    let hasCleanup = false;
+    const cleanups = refs.map(ref => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup === 'function') {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+
+    // React <19 will log an error to the console if a callback ref returns a
+    // value. We don't use ref cleanups internally so this will only happen if a
+    // user's ref callback returns a value, which we only expect if they are
+    // using the cleanup functionality added in React 19.
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup === 'function') {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and RefObject(s)
+ */
+function useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we want to memoize by all values
+  return React.useCallback(composeRefs(...refs), refs);
+}
+
+export { composeRefs, useComposedRefs };
diff --git a/lib/providers/OrganizationProvider.tsx b/lib/providers/OrganizationProvider.tsx
index 1481e9485..85a3aa6f0 100644
--- a/lib/providers/OrganizationProvider.tsx
+++ b/lib/providers/OrganizationProvider.tsx
@@ -390,7 +390,7 @@ export function OrganizationProvider({
         throw new Error('Invalid response from getMe API');
       }
 
-      const organizations = response.members || [];
+      const organizations = response.user.members || [];
       logger.info({
         eventType: 'org.fetchOrganizations.organizations_loaded',
         count: Array.isArray(organizations) ? organizations.length : 0,
@@ -1139,7 +1139,7 @@ export function OrganizationProvider({
       try {
         // Get current user info from getMe API
         const userResponse = await getMe();
-        const userId = userResponse.id;
+        const userId = userResponse.user.id;
         if (!userId) return false;
 
         // List members from Better Auth
diff --git a/lib/stores/auth-store.ts b/lib/stores/auth-store.ts
index e3c9f1ba4..08c092bd8 100644
--- a/lib/stores/auth-store.ts
+++ b/lib/stores/auth-store.ts
@@ -165,14 +165,14 @@ export const useAuthStore = create<AuthState>()(
           const user = await getMe();
 
           const transformedUser: User = {
-            id: user.id as string,
-            email: user.email as string,
-            name: user.name as string | null,
-            image: user.image as string | null,
-            username: user.username as string | null,
-            role: user.role as 'USER' | 'ADMIN',
-            isVerified: user.emailVerified as boolean | undefined,
-            profile: user.profile as User['profile'],
+            id: user.user.id as string,
+            email: user.user.email as string,
+            name: user.user.name as string | null,
+            image: user.user.image as string | null,
+            username: user.user.username as string | null,
+            role: user.user.role as 'USER' | 'ADMIN',
+            isVerified: user.user.emailVerified as boolean | undefined,
+            profile: user.user.profile as User['profile'],
           } as User;
 
           set({
@@ -234,14 +234,14 @@ export const useAuthStore = create<AuthState>()(
               const user = await getMe();
 
               const transformedUser: User = {
-                id: user.id as string,
-                email: user.email as string,
-                name: user.name as string | null,
-                image: user.image as string | null,
-                username: user.username as string | null,
-                role: user.role as 'USER' | 'ADMIN',
-                isVerified: user.emailVerified as boolean | undefined,
-                profile: user.profile as User['profile'],
+                id: user.user.id as string,
+                email: user.user.email as string,
+                name: user.user.name as string | null,
+                image: user.user.image as string | null,
+                username: user.user.username as string | null,
+                role: user.user.role as 'USER' | 'ADMIN',
+                isVerified: user.user.emailVerified as boolean | undefined,
+                profile: user.user.profile as User['profile'],
               } as User;
 
               set({
@@ -314,14 +314,14 @@ export const useAuthStore = create<AuthState>()(
             const user = await getMe();
 
             const transformedUser: User = {
-              id: user.id as string,
-              email: user.email as string,
-              name: user.name as string | null,
-              image: user.image as string | null,
-              username: user.username as string | null,
-              role: user.role as 'USER' | 'ADMIN',
-              isVerified: user.emailVerified as boolean | undefined,
-              profile: user.profile as User['profile'],
+              id: user.user.id as string,
+              email: user.user.email as string,
+              name: user.user.name as string | null,
+              image: user.user.image as string | null,
+              username: user.user.username as string | null,
+              role: user.user.role as 'USER' | 'ADMIN',
+              isVerified: user.user.emailVerified as boolean | undefined,
+              profile: user.user.profile as User['profile'],
             } as User;
 
             set({
diff --git a/lib/stores/project-sheet-store.ts b/lib/stores/project-sheet-store.ts
index 965f27eff..c12ec5fa0 100644
--- a/lib/stores/project-sheet-store.ts
+++ b/lib/stores/project-sheet-store.ts
@@ -1,6 +1,6 @@
 'use client';
 
-import { CrowdfundingProject } from '@/types/project';
+import { CrowdfundingProject } from '@/features/projects/types';
 import { create } from 'zustand';
 
 type ProjectSheetMode = 'initialize' | 'validate';
diff --git a/lib/utils/hackathon-escrow.ts b/lib/utils/hackathon-escrow.ts
index f04aa7214..139e49ec2 100644
--- a/lib/utils/hackathon-escrow.ts
+++ b/lib/utils/hackathon-escrow.ts
@@ -24,7 +24,7 @@ const PLACEHOLDER_MILESTONE_AMOUNT = 1;
  */
 const BOUNDLESS_PLATFORM_ADDRESS =
   process.env.NEXT_PUBLIC_BOUNDLESS_PLATFORM_ADDRESS ||
-  'GA4XJQJTKVQZXYW5CYM77CD5E7CX7FJLVDSIWZAV6FEIBFZNRKSWWTFN'; // Fallback to empty string if not configured
+  'GB56E64MBDKI43NLRKOGXDENXHEEYSSHALOJ4Q5YDLW3TMTLUCHCIJWC'; // Fallback to empty string if not configured
 
 /**
  * Get Boundless platform wallet address
diff --git a/package-lock.json b/package-lock.json
index 09f7cd524..34bd72cb1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,8 +10,9 @@
       "hasInstallScript": true,
       "dependencies": {
         "@countrystatecity/countries": "^1.0.4",
-        "@creit.tech/stellar-wallets-kit": "^1.7.6",
+        "@creit.tech/stellar-wallets-kit": "^1.5.0",
         "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/modifiers": "^9.0.0",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
         "@gsap/react": "^2.1.2",
@@ -20,34 +21,37 @@
         "@radix-ui/react-accordion": "^1.2.11",
         "@radix-ui/react-alert-dialog": "^1.1.14",
         "@radix-ui/react-aspect-ratio": "^1.1.7",
-        "@radix-ui/react-avatar": "^1.1.10",
-        "@radix-ui/react-checkbox": "^1.3.2",
+        "@radix-ui/react-avatar": "^1.1.11",
+        "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-collapsible": "^1.1.11",
         "@radix-ui/react-context-menu": "^2.2.15",
-        "@radix-ui/react-dialog": "^1.1.14",
-        "@radix-ui/react-dropdown-menu": "^2.1.15",
+        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-direction": "^1.1.1",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-hover-card": "^1.1.14",
-        "@radix-ui/react-label": "^2.1.7",
+        "@radix-ui/react-label": "^2.1.8",
         "@radix-ui/react-menubar": "^1.1.15",
         "@radix-ui/react-navigation-menu": "^1.2.13",
         "@radix-ui/react-popover": "^1.1.15",
         "@radix-ui/react-progress": "^1.1.7",
         "@radix-ui/react-radio-group": "^1.3.7",
         "@radix-ui/react-scroll-area": "^1.2.9",
-        "@radix-ui/react-select": "^2.2.5",
-        "@radix-ui/react-separator": "^1.1.7",
-        "@radix-ui/react-slider": "^1.3.5",
-        "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-select": "^2.2.6",
+        "@radix-ui/react-separator": "^1.1.8",
+        "@radix-ui/react-slider": "^1.3.6",
+        "@radix-ui/react-slot": "^1.2.4",
         "@radix-ui/react-switch": "^1.2.5",
-        "@radix-ui/react-tabs": "^1.1.12",
-        "@radix-ui/react-toggle": "^1.1.9",
-        "@radix-ui/react-toggle-group": "^1.1.10",
-        "@radix-ui/react-tooltip": "^1.2.7",
+        "@radix-ui/react-tabs": "^1.1.13",
+        "@radix-ui/react-toggle": "^1.1.10",
+        "@radix-ui/react-toggle-group": "^1.1.11",
+        "@radix-ui/react-tooltip": "^1.2.8",
         "@react-three/drei": "^10.7.6",
         "@react-three/fiber": "^9.3.0",
         "@stellar/freighter-api": "^4.1.0",
         "@stellar/stellar-sdk": "^13.3.0",
+        "@tabler/icons-react": "^3.36.1",
         "@tailwindcss/postcss": "^4",
+        "@tanstack/react-table": "^8.21.3",
         "@tiptap/core": "^3.7.2",
         "@tiptap/extension-blockquote": "^3.7.2",
         "@tiptap/extension-bold": "^3.7.2",
@@ -94,8 +98,8 @@
         "lodash.debounce": "^4.0.8",
         "lucide-react": "^0.525.0",
         "marked": "^16.3.0",
-        "media-chrome": "^4.15.1",
-        "motion": "^12.23.24",
+        "media-chrome": "^4.17.2",
+        "motion": "^12.30.0",
         "next": "^16.1.1",
         "next-auth": "^5.0.0-beta.29",
         "next-themes": "^0.4.6",
@@ -110,12 +114,12 @@
         "recharts": "^2.15.4",
         "remark-gfm": "^4.0.1",
         "socket.io-client": "^4.8.1",
-        "sonner": "^2.0.6",
+        "sonner": "^2.0.7",
         "tailwind-merge": "^3.3.1",
         "three": "^0.180.0",
         "tw-animate-css": "^1.3.6",
         "vaul": "^1.1.2",
-        "zod": "^4.0.10",
+        "zod": "^4.3.5",
         "zustand": "^5.0.6"
       },
       "devDependencies": {
@@ -125,7 +129,7 @@
         "@types/react-dom": "19.2.3",
         "@typescript-eslint/eslint-plugin": "^8.38.0",
         "@typescript-eslint/parser": "^8.38.0",
-        "eslint": "^8.57.0",
+        "eslint": "^9.39.2",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-prettier": "^5.5.3",
         "eslint-plugin-react": "^7.37.5",
@@ -189,13 +193,12 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
-      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
-      "dev": true,
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
+      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5",
         "js-tokens": "^4.0.0",
         "picocolors": "^1.1.1"
       },
@@ -207,7 +210,6 @@
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.5.tgz",
       "integrity": "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -217,7 +219,6 @@
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
@@ -248,21 +249,19 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
-      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
-      "dev": true,
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.0.tgz",
+      "integrity": "sha512-vSH118/wwM/pLR38g/Sgk05sNtro6TlTJKuiMXDaZqPUfjTFcudpCOt00IhOfj+1BFAX+UFAlzCU+6WXr3GLFQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.5",
-        "@babel/types": "^7.28.5",
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
         "@jridgewell/gen-mapping": "^0.3.12",
         "@jridgewell/trace-mapping": "^0.3.28",
         "jsesc": "^3.0.2"
@@ -271,11 +270,22 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.27.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz",
+      "integrity": "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-compilation-targets": {
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
       "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/compat-data": "^7.27.2",
@@ -292,7 +302,36 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.28.6.tgz",
+      "integrity": "sha512-dTOdvsjnG3xNT9Y0AUg1wAl38y+4Rl4sf9caSQZOXdNqVn+H+HbbJ4IyyHaIqNR6SW9oJpA/RuRjsjCw2IdIow==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-member-expression-to-functions": "^7.28.5",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/helper-replace-supers": "^7.28.6",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/traverse": "^7.28.6",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -302,36 +341,84 @@
       "version": "7.28.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
       "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.28.5.tgz",
+      "integrity": "sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-module-imports": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
+      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
+      "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.28.6",
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "@babel/traverse": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
       "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
-      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
-      "dev": true,
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz",
+      "integrity": "sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/traverse": "^7.27.1",
         "@babel/types": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-module-transforms": {
-      "version": "7.28.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
-      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
-      "dev": true,
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.28.6.tgz",
+      "integrity": "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.28.6.tgz",
+      "integrity": "sha512-mq8e+laIk94/yFec3DxSjCRD2Z0TAjhVbEJY3UQrlwVo15Lmt7C2wAUbK4bjnTs4APkwsYLTahXRraQXhb1WCg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.27.1",
-        "@babel/traverse": "^7.28.3"
+        "@babel/helper-member-expression-to-functions": "^7.28.5",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/traverse": "^7.28.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -340,11 +427,23 @@
         "@babel/core": "^7.0.0"
       }
     },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz",
+      "integrity": "sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
       "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -354,7 +453,6 @@
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
       "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -364,7 +462,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
       "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -374,7 +471,6 @@
       "version": "7.28.4",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
       "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.27.2",
@@ -385,13 +481,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
-      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
-      "dev": true,
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
+      "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.28.5"
+        "@babel/types": "^7.29.0"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -400,6 +495,90 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.28.6.tgz",
+      "integrity": "sha512-wgEmr06G6sIpqr8YDwA2dSRTE3bJ+V0IfpzfSY3Lfgd7YWOaAdlykvJi13ZKBt8cZHfgH1IXN+CL656W3uUa4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.28.6.tgz",
+      "integrity": "sha512-+nDNmQye7nlnuuHDboPbGm00Vqg3oO8niRRL27/4LYHUsHYh0zJ1xWOz0uRwNFmM1Avzk8wZbc6rdiYhomzv/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-commonjs": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.28.6.tgz",
+      "integrity": "sha512-jppVbf8IV9iWWwWTQIxJMAJCWBuuKx71475wHwYytrRGQ2CWiDvYlADQno3tcYpS/T2UUWFQp3nVtYfK/YBQrA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.28.6.tgz",
+      "integrity": "sha512-0YWL2RFxOqEm9Efk5PvreamxPME8OyY0wM5wh5lHjF+VtVhdneCWGzZeSqzOfiobVqQaNCd2z0tQvnI9DaPWPw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-create-class-features-plugin": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/plugin-syntax-typescript": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-typescript": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.28.5.tgz",
+      "integrity": "sha512-+bQy5WOI2V6LJZpPVxY+yp66XdZ2yifu0Mc1aP5CQKgjn4QM5IN2i5fAZ4xKop47pr8rpVhiAeu+nDQa12C8+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-validator-option": "^7.27.1",
+        "@babel/plugin-syntax-jsx": "^7.27.1",
+        "@babel/plugin-transform-modules-commonjs": "^7.27.1",
+        "@babel/plugin-transform-typescript": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.28.4",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
@@ -410,33 +589,31 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.27.2",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
-      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
-      "dev": true,
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
+      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/parser": "^7.27.2",
-        "@babel/types": "^7.27.1"
+        "@babel/code-frame": "^7.28.6",
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
-      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
-      "dev": true,
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
+      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.5",
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
         "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.28.5",
-        "@babel/template": "^7.27.2",
-        "@babel/types": "^7.28.5",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.29.0",
         "debug": "^4.3.1"
       },
       "engines": {
@@ -444,10 +621,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
-      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
-      "dev": true,
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
@@ -504,13 +680,12 @@
       "license": "ODbL-1.0"
     },
     "node_modules/@creit.tech/stellar-wallets-kit": {
-      "version": "1.9.5",
-      "resolved": "https://registry.npmjs.org/@creit.tech/stellar-wallets-kit/-/stellar-wallets-kit-1.9.5.tgz",
-      "integrity": "sha512-b9E77r+o6Opow0CttmHdFBPeJpdLhOcLFTx3CbnwMQVivo94niap70y3A03F5cYgwVk9HhM4CJr0aimm0eNwxA==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@creit.tech/stellar-wallets-kit/-/stellar-wallets-kit-1.5.0.tgz",
+      "integrity": "sha512-H01QToFltbfhaelLYn/HQNHyeLOfYfi+u/Nc5Ak7rLtcSkBHEsRjq4lwo/lla1tbIUohndS4REq0Mncin69bUw==",
       "dependencies": {
         "@albedo-link/intent": "0.12.0",
-        "@creit.tech/xbull-wallet-connect": "^0.4.0",
-        "@hot-wallet/sdk": "1.0.11",
+        "@creit.tech/xbull-wallet-connect": "0.3.0",
         "@ledgerhq/hw-app-str": "7.0.4",
         "@ledgerhq/hw-transport": "6.31.4",
         "@ledgerhq/hw-transport-webusb": "6.29.4",
@@ -519,9 +694,9 @@
         "@ngneat/elf-devtools": "1.3.0",
         "@ngneat/elf-entities": "5.0.2",
         "@ngneat/elf-persist-state": "1.2.1",
-        "@stellar/freighter-api": "5.0.0",
-        "@trezor/connect-plugin-stellar": "9.2.1",
-        "@trezor/connect-web": "9.6.2",
+        "@stellar/freighter-api": "4.0.0",
+        "@trezor/connect-plugin-stellar": "9.0.6",
+        "@trezor/connect-web": "9.4.7",
         "@walletconnect/modal": "2.6.2",
         "@walletconnect/sign-client": "2.11.2",
         "buffer": "6.0.3",
@@ -533,35 +708,65 @@
         "node": ">=16"
       },
       "peerDependencies": {
-        "@stellar/stellar-base": "^14.0.0"
+        "@stellar/stellar-base": "^12.1.1"
       }
     },
     "node_modules/@creit.tech/stellar-wallets-kit/node_modules/@stellar/freighter-api": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@stellar/freighter-api/-/freighter-api-5.0.0.tgz",
-      "integrity": "sha512-MydzLg+WpSzmws24uUs4mVME2LPN8xhUWkwyGEP0N1Hr519swC6I/W7K6cdVBzghBiVv7f/vvGFNT+0p1a33Vg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@stellar/freighter-api/-/freighter-api-4.0.0.tgz",
+      "integrity": "sha512-LYuVAUuvmZhzissBoAQPu2InD+R7WW1NUAJZ3iD0mPa/e5pMEhQSQUQoBWLcSpSrsQduRSDqEn5Egu8caUjLgQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "buffer": "6.0.3",
-        "semver": "7.7.1"
+        "buffer": "^6.0.3",
+        "semver": "^7.6.3"
       }
     },
-    "node_modules/@creit.tech/stellar-wallets-kit/node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
+    "node_modules/@creit.tech/stellar-wallets-kit/node_modules/@stellar/stellar-sdk": {
+      "version": "12.3.0",
+      "resolved": "https://registry.npmjs.org/@stellar/stellar-sdk/-/stellar-sdk-12.3.0.tgz",
+      "integrity": "sha512-F2DYFop/M5ffXF0lvV5Ezjk+VWNKg0QDX8gNhwehVU3y5LYA3WAY6VcCarMGPaG9Wdgoeh1IXXzOautpqpsltw==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@stellar/stellar-base": "^12.1.1",
+        "axios": "^1.7.7",
+        "bignumber.js": "^9.1.2",
+        "eventsource": "^2.0.2",
+        "randombytes": "^2.1.0",
+        "toml": "^3.0.0",
+        "urijs": "^1.19.1"
+      }
+    },
+    "node_modules/@creit.tech/stellar-wallets-kit/node_modules/@trezor/connect-plugin-stellar": {
+      "version": "9.0.6",
+      "resolved": "https://registry.npmjs.org/@trezor/connect-plugin-stellar/-/connect-plugin-stellar-9.0.6.tgz",
+      "integrity": "sha512-LieD7xqckUXaPIA3a5XHyAAWE4gMRru6ot+kp1J93MfLn7wnjzJ5FrH2/TXFMxXJh/o1VCX/CzT4KQmgFSQ4Lw==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "@trezor/utils": "9.2.2"
       },
-      "engines": {
-        "node": ">=10"
+      "peerDependencies": {
+        "@stellar/stellar-sdk": "^12.1.3",
+        "@trezor/connect": "9.x.x",
+        "tslib": "^2.6.2"
+      }
+    },
+    "node_modules/@creit.tech/stellar-wallets-kit/node_modules/@trezor/utils": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@trezor/utils/-/utils-9.2.2.tgz",
+      "integrity": "sha512-eTKOXhJsqUObQiL4ccJvamuDe9YDt+QFPh25YG85fqUInN85H/dxRXiLEboeqkRHldP06+bG+e2t4iAnsWuINQ==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "bignumber.js": "^9.1.2"
+      },
+      "peerDependencies": {
+        "tslib": "^2.6.2"
       }
     },
     "node_modules/@creit.tech/xbull-wallet-connect": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@creit.tech/xbull-wallet-connect/-/xbull-wallet-connect-0.4.0.tgz",
-      "integrity": "sha512-LrCUIqUz50SkZ4mv2hTqSmwews8CNRYVoZ9+VjLsK/1U8PByzXTxv1vZyenj6avRTG86ifpoeihz7D3D5YIDrQ==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@creit.tech/xbull-wallet-connect/-/xbull-wallet-connect-0.3.0.tgz",
+      "integrity": "sha512-pByi0bTAWd2ZdolVtkXcAU1DYTtz/cJc/IkRUz9x9/1NsFVyrM4UxE8tHgVZ3mwrJ4josoDwYP957ynQw195YQ==",
       "dependencies": {
         "rxjs": "^7.5.5",
         "tweetnacl": "^1.0.3",
@@ -610,6 +815,20 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@dnd-kit/modifiers": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/modifiers/-/modifiers-9.0.0.tgz",
+      "integrity": "sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@dnd-kit/sortable": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
@@ -650,13 +869,15 @@
       "version": "13.2.1",
       "resolved": "https://registry.npmjs.org/@emurgo/cardano-serialization-lib-browser/-/cardano-serialization-lib-browser-13.2.1.tgz",
       "integrity": "sha512-7RfX1gI16Vj2DgCp/ZoXqyLAakWo6+X95ku/rYGbVzuS/1etrlSiJmdbmdm+eYmszMlGQjrtOJQeVLXoj4L/Ag==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@emurgo/cardano-serialization-lib-nodejs": {
       "version": "13.2.0",
       "resolved": "https://registry.npmjs.org/@emurgo/cardano-serialization-lib-nodejs/-/cardano-serialization-lib-nodejs-13.2.0.tgz",
       "integrity": "sha512-Bz1zLGEqBQ0BVkqt1OgMxdBOE3BdUWUd7Ly9Ecr/aUwkA8AV1w1XzBMe4xblmJHnB1XXNlPH4SraXCvO+q0Mig==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.9.0",
@@ -687,6 +908,47 @@
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
+      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.7",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.3.tgz",
@@ -712,63 +974,122 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.57.1",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
-      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
+      "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
     "node_modules/@ethereumjs/common": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/@ethereumjs/common/-/common-10.1.0.tgz",
-      "integrity": "sha512-zIHCy0i2LFmMDp+QkENyoPGxcoD3QzeNVhx6/vE4nJk4uWGNXzO8xJ2UC4gtGW4UJTAOXja8Z1yZMVeRc2/+Ew==",
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/@ethereumjs/common/-/common-10.1.1.tgz",
+      "integrity": "sha512-NefPzPlrJ9w+NWVe06P+sHZQU98E1AEU9vhiHJEVT2wEcNBC1YX6hON9+smrfbn86C4U1pb2zbvjhkF+n/LKBw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "@ethereumjs/util": "^10.1.0",
+        "@ethereumjs/util": "^10.1.1",
         "eventemitter3": "^5.0.1"
       }
     },
     "node_modules/@ethereumjs/rlp": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/@ethereumjs/rlp/-/rlp-10.1.0.tgz",
-      "integrity": "sha512-r67BJbwilammAqYI4B5okA66cNdTlFzeWxPNJOolKV52ZS/flo0tUBf4x4gxWXBgh48OgsdFV1Qp5pRoSe8IhQ==",
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/@ethereumjs/rlp/-/rlp-10.1.1.tgz",
+      "integrity": "sha512-jbnWTEwcpoY+gE0r+wxfDG9zgiu54DcTcwnc9sX3DsqKR4l5K7x2V8mQL3Et6hURa4DuT9g7z6ukwpBLFchszg==",
       "license": "MPL-2.0",
+      "peer": true,
       "bin": {
         "rlp": "bin/rlp.cjs"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=20"
       }
     },
     "node_modules/@ethereumjs/tx": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/@ethereumjs/tx/-/tx-10.1.0.tgz",
-      "integrity": "sha512-svG6pyzUZDpunafszf2BaolA6Izuvo8ZTIETIegpKxAXYudV1hmzPQDdSI+d8nHCFyQfEFbQ6tfUq95lNArmmg==",
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/@ethereumjs/tx/-/tx-10.1.1.tgz",
+      "integrity": "sha512-Kz8GWIKQjEQB60ko9hsYDX3rZMHZZOTcmm6OFl855Lu3padVnf5ZactUKM6nmWPsumHED5bWDjO32novZd1zyw==",
       "license": "MPL-2.0",
+      "peer": true,
       "dependencies": {
-        "@ethereumjs/common": "^10.1.0",
-        "@ethereumjs/rlp": "^10.1.0",
-        "@ethereumjs/util": "^10.1.0",
-        "ethereum-cryptography": "^3.2.0"
+        "@ethereumjs/common": "^10.1.1",
+        "@ethereumjs/rlp": "^10.1.1",
+        "@ethereumjs/util": "^10.1.1",
+        "@noble/curves": "^2.0.1",
+        "@noble/hashes": "^2.0.1"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=20"
+      }
+    },
+    "node_modules/@ethereumjs/tx/node_modules/@noble/hashes": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-2.0.1.tgz",
+      "integrity": "sha512-XlOlEbQcE9fmuXxrVTXCTlG2nlRXa9Rj3rr5Ue/+tX+nmkgbX720YHh0VR3hBF9xDvwnb8D2shVGOwNx+ulArw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
       }
     },
     "node_modules/@ethereumjs/util": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/@ethereumjs/util/-/util-10.1.0.tgz",
-      "integrity": "sha512-GGTCkRu1kWXbz2JoUnIYtJBOoA9T5akzsYa91Bh+DZQ3Cj4qXj3hkNU0Rx6wZlbcmkmhQfrjZfVt52eJO/y2nA==",
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/@ethereumjs/util/-/util-10.1.1.tgz",
+      "integrity": "sha512-r2EhaeEmLZXVs1dT2HJFQysAkr63ZWATu/9tgYSp1IlvjvwyC++DLg5kCDwMM49HBq3sOAhrPnXkoqf9DV2gbw==",
       "license": "MPL-2.0",
+      "peer": true,
       "dependencies": {
-        "@ethereumjs/rlp": "^10.1.0",
-        "ethereum-cryptography": "^3.2.0"
+        "@ethereumjs/rlp": "^10.1.1",
+        "@noble/curves": "^2.0.1",
+        "@noble/hashes": "^2.0.1"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=20"
+      }
+    },
+    "node_modules/@ethereumjs/util/node_modules/@noble/hashes": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-2.0.1.tgz",
+      "integrity": "sha512-XlOlEbQcE9fmuXxrVTXCTlG2nlRXa9Rj3rr5Ue/+tX+nmkgbX720YHh0VR3hBF9xDvwnb8D2shVGOwNx+ulArw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
       }
     },
     "node_modules/@fivebinaries/coin-selection": {
@@ -776,6 +1097,7 @@
       "resolved": "https://registry.npmjs.org/@fivebinaries/coin-selection/-/coin-selection-3.0.0.tgz",
       "integrity": "sha512-h25Pn1ZA7oqQBQDodGAgIsQt66T2wDge9onBKNqE66WNWL0KJiKJbpij8YOLo5AAlEIg5IS7EB1QjBgDOIg6DQ==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@emurgo/cardano-serialization-lib-browser": "^13.2.0",
         "@emurgo/cardano-serialization-lib-nodejs": "13.2.0"
@@ -841,36 +1163,28 @@
         "react-hook-form": "^7.55.0"
       }
     },
-    "node_modules/@hot-wallet/sdk": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/@hot-wallet/sdk/-/sdk-1.0.11.tgz",
-      "integrity": "sha512-qRDH/4yqnRCnk7L/Qd0/LDOKDUKWcFgvf6eRELJkP0OgxIe65i/iXaG+u2lL0mLbTGkiWYk67uAvEerNUv2gzA==",
-      "dependencies": {
-        "@near-js/crypto": "^1.4.0",
-        "@near-js/utils": "^1.0.0",
-        "@near-wallet-selector/core": "^8.9.13",
-        "@solana/wallet-adapter-base": "^0.9.23",
-        "@solana/web3.js": "^1.95.0",
-        "borsh": "^2.0.0",
-        "js-sha256": "^0.11.0",
-        "sha1": "^1.1.1",
-        "uuid4": "^2.0.3"
-      }
-    },
-    "node_modules/@humanwhocodes/config-array": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
-      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
-      "deprecated": "Use @eslint/config-array instead",
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.3",
-        "debug": "^4.3.1",
-        "minimatch": "^3.0.5"
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.4.0"
       },
       "engines": {
-        "node": ">=10.10.0"
+        "node": ">=18.18.0"
       }
     },
     "node_modules/@humanwhocodes/module-importer": {
@@ -887,13 +1201,19 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
-    "node_modules/@humanwhocodes/object-schema": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
-      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
-      "deprecated": "Use @eslint/object-schema instead",
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
       "dev": true,
-      "license": "BSD-3-Clause"
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
     },
     "node_modules/@img/colour": {
       "version": "1.0.0",
@@ -1616,259 +1936,16 @@
         "tslib": "^2.3.1"
       }
     },
-    "node_modules/@near-js/accounts": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@near-js/accounts/-/accounts-1.4.1.tgz",
-      "integrity": "sha512-ni3QT9H3NdrbVVKyx56yvz93r89Dvpc/vgVtiIK2OdXjkK6jcj+UKMDRQ6F7rd9qJOInLkHZbVBtcR6j1CXLjw==",
-      "license": "ISC",
-      "peer": true,
-      "dependencies": {
-        "@near-js/crypto": "1.4.2",
-        "@near-js/providers": "1.0.3",
-        "@near-js/signers": "0.2.2",
-        "@near-js/transactions": "1.3.3",
-        "@near-js/types": "0.3.1",
-        "@near-js/utils": "1.1.0",
-        "@noble/hashes": "1.7.1",
-        "borsh": "1.0.0",
-        "depd": "2.0.0",
-        "is-my-json-valid": "^2.20.6",
-        "lru_map": "0.4.1",
-        "near-abi": "0.2.0"
-      }
-    },
-    "node_modules/@near-js/accounts/node_modules/borsh": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/borsh/-/borsh-1.0.0.tgz",
-      "integrity": "sha512-fSVWzzemnyfF89EPwlUNsrS5swF5CrtiN4e+h0/lLf4dz2he4L3ndM20PS9wj7ICSkXJe/TQUHdaPTq15b1mNQ==",
-      "license": "Apache-2.0",
-      "peer": true
-    },
-    "node_modules/@near-js/crypto": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@near-js/crypto/-/crypto-1.4.2.tgz",
-      "integrity": "sha512-GRfchsyfWvSAPA1gI9hYhw5FH94Ac1BUo+Cmp5rSJt/V0K3xVzCWgOQxvv4R3kDnWjaXJEuAmpEEnr4Bp3FWrA==",
-      "license": "ISC",
-      "dependencies": {
-        "@near-js/types": "0.3.1",
-        "@near-js/utils": "1.1.0",
-        "@noble/curves": "1.8.1",
-        "borsh": "1.0.0",
-        "randombytes": "2.1.0",
-        "secp256k1": "5.0.1"
-      }
-    },
-    "node_modules/@near-js/crypto/node_modules/borsh": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/borsh/-/borsh-1.0.0.tgz",
-      "integrity": "sha512-fSVWzzemnyfF89EPwlUNsrS5swF5CrtiN4e+h0/lLf4dz2he4L3ndM20PS9wj7ICSkXJe/TQUHdaPTq15b1mNQ==",
-      "license": "Apache-2.0"
-    },
-    "node_modules/@near-js/keystores": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@near-js/keystores/-/keystores-0.2.2.tgz",
-      "integrity": "sha512-DLhi/3a4qJUY+wgphw2Jl4S+L0AKsUYm1mtU0WxKYV5OBwjOXvbGrXNfdkheYkfh3nHwrQgtjvtszX6LrRXLLw==",
-      "license": "ISC",
-      "peer": true,
-      "dependencies": {
-        "@near-js/crypto": "1.4.2",
-        "@near-js/types": "0.3.1"
-      }
-    },
-    "node_modules/@near-js/keystores-browser": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@near-js/keystores-browser/-/keystores-browser-0.2.2.tgz",
-      "integrity": "sha512-Pxqm7WGtUu6zj32vGCy9JcEDpZDSB5CCaLQDTQdF3GQyL0flyRv2I/guLAgU5FLoYxU7dJAX9mslJhPW7P2Bfw==",
-      "license": "ISC",
-      "peer": true,
-      "dependencies": {
-        "@near-js/crypto": "1.4.2",
-        "@near-js/keystores": "0.2.2"
-      }
-    },
-    "node_modules/@near-js/keystores-node": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@near-js/keystores-node/-/keystores-node-0.1.2.tgz",
-      "integrity": "sha512-MWLvTszZOVziiasqIT/LYNhUyWqOJjDGlsthOsY6dTL4ZcXjjmhmzrbFydIIeQr+CcEl5wukTo68ORI9JrHl6g==",
-      "license": "ISC",
-      "peer": true,
-      "dependencies": {
-        "@near-js/crypto": "1.4.2",
-        "@near-js/keystores": "0.2.2"
-      }
-    },
-    "node_modules/@near-js/providers": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@near-js/providers/-/providers-1.0.3.tgz",
-      "integrity": "sha512-VJMboL14R/+MGKnlhhE3UPXCGYvMd1PpvF9OqZ9yBbulV7QVSIdTMfY4U1NnDfmUC2S3/rhAEr+3rMrIcNS7Fg==",
-      "license": "ISC",
-      "peer": true,
-      "dependencies": {
-        "@near-js/transactions": "1.3.3",
-        "@near-js/types": "0.3.1",
-        "@near-js/utils": "1.1.0",
-        "borsh": "1.0.0",
-        "exponential-backoff": "^3.1.2"
-      },
-      "optionalDependencies": {
-        "node-fetch": "2.6.7"
-      }
-    },
-    "node_modules/@near-js/providers/node_modules/borsh": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/borsh/-/borsh-1.0.0.tgz",
-      "integrity": "sha512-fSVWzzemnyfF89EPwlUNsrS5swF5CrtiN4e+h0/lLf4dz2he4L3ndM20PS9wj7ICSkXJe/TQUHdaPTq15b1mNQ==",
-      "license": "Apache-2.0",
-      "peer": true
-    },
-    "node_modules/@near-js/providers/node_modules/node-fetch": {
-      "version": "2.6.7",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "whatwg-url": "^5.0.0"
-      },
-      "engines": {
-        "node": "4.x || >=6.0.0"
-      },
-      "peerDependencies": {
-        "encoding": "^0.1.0"
-      },
-      "peerDependenciesMeta": {
-        "encoding": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@near-js/signers": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@near-js/signers/-/signers-0.2.2.tgz",
-      "integrity": "sha512-M6ib+af9zXAPRCjH2RyIS0+RhCmd9gxzCeIkQ+I2A3zjgGiEDkBZbYso9aKj8Zh2lPKKSH7h+u8JGymMOSwgyw==",
-      "license": "ISC",
-      "peer": true,
-      "dependencies": {
-        "@near-js/crypto": "1.4.2",
-        "@near-js/keystores": "0.2.2",
-        "@noble/hashes": "1.3.3"
-      }
-    },
-    "node_modules/@near-js/signers/node_modules/@noble/hashes": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.3.tgz",
-      "integrity": "sha512-V7/fPHgl+jsVPXqqeOzT8egNj2iBIVt+ECeMMG8TdcnTikP3oaBtUVqpT/gYCR68aEBJSF+XbYUxStjbFMqIIA==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@near-js/transactions": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@near-js/transactions/-/transactions-1.3.3.tgz",
-      "integrity": "sha512-1AXD+HuxlxYQmRTLQlkVmH+RAmV3HwkAT8dyZDu+I2fK/Ec9BQHXakOJUnOBws3ihF+akQhamIBS5T0EXX/Ylw==",
-      "license": "ISC",
-      "peer": true,
-      "dependencies": {
-        "@near-js/crypto": "1.4.2",
-        "@near-js/signers": "0.2.2",
-        "@near-js/types": "0.3.1",
-        "@near-js/utils": "1.1.0",
-        "@noble/hashes": "1.7.1",
-        "borsh": "1.0.0"
-      }
-    },
-    "node_modules/@near-js/transactions/node_modules/borsh": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/borsh/-/borsh-1.0.0.tgz",
-      "integrity": "sha512-fSVWzzemnyfF89EPwlUNsrS5swF5CrtiN4e+h0/lLf4dz2he4L3ndM20PS9wj7ICSkXJe/TQUHdaPTq15b1mNQ==",
-      "license": "Apache-2.0",
-      "peer": true
-    },
-    "node_modules/@near-js/types": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@near-js/types/-/types-0.3.1.tgz",
-      "integrity": "sha512-8qIA7ynAEAuVFNAQc0cqz2xRbfyJH3PaAG5J2MgPPhD18lu/tCGd6pzYg45hjhtiJJRFDRjh/FUWKS+ZiIIxUw==",
-      "license": "ISC"
-    },
-    "node_modules/@near-js/utils": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@near-js/utils/-/utils-1.1.0.tgz",
-      "integrity": "sha512-5XWRq7xpu8Wud9pRXe2U347KXyi0mXofedUY2DQ9TaqiZUcMIaN9xj7DbCs2v6dws3pJyYrT1KWxeNp5fSaY3w==",
-      "license": "ISC",
-      "dependencies": {
-        "@near-js/types": "0.3.1",
-        "@scure/base": "^1.2.0",
-        "depd": "2.0.0",
-        "mustache": "4.0.0"
-      }
-    },
-    "node_modules/@near-js/wallet-account": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@near-js/wallet-account/-/wallet-account-1.3.3.tgz",
-      "integrity": "sha512-GDzg/Kz0GBYF7tQfyQQQZ3vviwV8yD+8F2lYDzsWJiqIln7R1ov0zaXN4Tii86TeS21KPn2hHAsVu3Y4txa8OQ==",
-      "license": "ISC",
-      "peer": true,
-      "dependencies": {
-        "@near-js/accounts": "1.4.1",
-        "@near-js/crypto": "1.4.2",
-        "@near-js/keystores": "0.2.2",
-        "@near-js/providers": "1.0.3",
-        "@near-js/signers": "0.2.2",
-        "@near-js/transactions": "1.3.3",
-        "@near-js/types": "0.3.1",
-        "@near-js/utils": "1.1.0",
-        "borsh": "1.0.0"
-      }
-    },
-    "node_modules/@near-js/wallet-account/node_modules/borsh": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/borsh/-/borsh-1.0.0.tgz",
-      "integrity": "sha512-fSVWzzemnyfF89EPwlUNsrS5swF5CrtiN4e+h0/lLf4dz2he4L3ndM20PS9wj7ICSkXJe/TQUHdaPTq15b1mNQ==",
-      "license": "Apache-2.0",
-      "peer": true
-    },
-    "node_modules/@near-wallet-selector/core": {
-      "version": "8.10.2",
-      "resolved": "https://registry.npmjs.org/@near-wallet-selector/core/-/core-8.10.2.tgz",
-      "integrity": "sha512-MH8sg6XHyylq2ZXxnOjrKHMCmuRgFfpfdC816fW0R8hctZiXZ0lmfLvgG1xfA2BAxrVytiU1g3dcE97/P5cZqg==",
-      "dependencies": {
-        "borsh": "1.0.0",
-        "events": "3.3.0",
-        "js-sha256": "0.9.0",
-        "rxjs": "7.8.1"
-      },
-      "peerDependencies": {
-        "near-api-js": "^4.0.0 || ^5.0.0"
-      }
-    },
-    "node_modules/@near-wallet-selector/core/node_modules/borsh": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/borsh/-/borsh-1.0.0.tgz",
-      "integrity": "sha512-fSVWzzemnyfF89EPwlUNsrS5swF5CrtiN4e+h0/lLf4dz2he4L3ndM20PS9wj7ICSkXJe/TQUHdaPTq15b1mNQ==",
-      "license": "Apache-2.0"
-    },
-    "node_modules/@near-wallet-selector/core/node_modules/js-sha256": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
-      "integrity": "sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA==",
-      "license": "MIT"
-    },
     "node_modules/@next/env": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.1.tgz",
-      "integrity": "sha512-3oxyM97Sr2PqiVyMyrZUtrtM3jqqFxOQJVuKclDsgj/L728iZt/GyslkN4NwarledZATCenbk4Offjk1hQmaAA==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.6.tgz",
+      "integrity": "sha512-N1ySLuZjnAtN3kFnwhAwPvZah8RJxKasD7x1f8shFqhncnWZn4JMfg37diLNuoHsLAlrDfM3g4mawVdtAG8XLQ==",
       "license": "MIT"
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.1.tgz",
-      "integrity": "sha512-JS3m42ifsVSJjSTzh27nW+Igfha3NdBOFScr9C80hHGrWx55pTrVL23RJbqir7k7/15SKlrLHhh/MQzqBBYrQA==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.6.tgz",
+      "integrity": "sha512-wTzYulosJr/6nFnqGW7FrG3jfUUlEf8UjGA0/pyypJl42ExdVgC6xJgcXQ+V8QFn6niSG2Pb8+MIG1mZr2vczw==",
       "cpu": [
         "arm64"
       ],
@@ -1882,9 +1959,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.1.1.tgz",
-      "integrity": "sha512-hbyKtrDGUkgkyQi1m1IyD3q4I/3m9ngr+V93z4oKHrPcmxwNL5iMWORvLSGAf2YujL+6HxgVvZuCYZfLfb4bGw==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.1.6.tgz",
+      "integrity": "sha512-BLFPYPDO+MNJsiDWbeVzqvYd4NyuRrEYVB5k2N3JfWncuHAy2IVwMAOlVQDFjj+krkWzhY2apvmekMkfQR0CUQ==",
       "cpu": [
         "x64"
       ],
@@ -1898,9 +1975,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.1.1.tgz",
-      "integrity": "sha512-/fvHet+EYckFvRLQ0jPHJCUI5/B56+2DpI1xDSvi80r/3Ez+Eaa2Yq4tJcRTaB1kqj/HrYKn8Yplm9bNoMJpwQ==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.1.6.tgz",
+      "integrity": "sha512-OJYkCd5pj/QloBvoEcJ2XiMnlJkRv9idWA/j0ugSuA34gMT6f5b7vOiCQHVRpvStoZUknhl6/UxOXL4OwtdaBw==",
       "cpu": [
         "arm64"
       ],
@@ -1914,9 +1991,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.1.1.tgz",
-      "integrity": "sha512-MFHrgL4TXNQbBPzkKKur4Fb5ICEJa87HM7fczFs2+HWblM7mMLdco3dvyTI+QmLBU9xgns/EeeINSZD6Ar+oLg==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.1.6.tgz",
+      "integrity": "sha512-S4J2v+8tT3NIO9u2q+S0G5KdvNDjXfAv06OhfOzNDaBn5rw84DGXWndOEB7d5/x852A20sW1M56vhC/tRVbccQ==",
       "cpu": [
         "arm64"
       ],
@@ -1930,9 +2007,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.1.tgz",
-      "integrity": "sha512-20bYDfgOQAPUkkKBnyP9PTuHiJGM7HzNBbuqmD0jiFVZ0aOldz+VnJhbxzjcSabYsnNjMPsE0cyzEudpYxsrUQ==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.6.tgz",
+      "integrity": "sha512-2eEBDkFlMMNQnkTyPBhQOAyn2qMxyG2eE7GPH2WIDGEpEILcBPI/jdSv4t6xupSP+ot/jkfrCShLAa7+ZUPcJQ==",
       "cpu": [
         "x64"
       ],
@@ -1946,9 +2023,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.1.tgz",
-      "integrity": "sha512-9pRbK3M4asAHQRkwaXwu601oPZHghuSC8IXNENgbBSyImHv/zY4K5udBusgdHkvJ/Tcr96jJwQYOll0qU8+fPA==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.6.tgz",
+      "integrity": "sha512-oicJwRlyOoZXVlxmIMaTq7f8pN9QNbdes0q2FXfRsPhfCi8n8JmOZJm5oo1pwDaFbnnD421rVU409M3evFbIqg==",
       "cpu": [
         "x64"
       ],
@@ -1962,9 +2039,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.1.1.tgz",
-      "integrity": "sha512-bdfQkggaLgnmYrFkSQfsHfOhk/mCYmjnrbRCGgkMcoOBZ4n+TRRSLmT/CU5SATzlBJ9TpioUyBW/vWFXTqQRiA==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.1.6.tgz",
+      "integrity": "sha512-gQmm8izDTPgs+DCWH22kcDmuUp7NyiJgEl18bcr8irXA5N2m2O+JQIr6f3ct42GOs9c0h8QF3L5SzIxcYAAXXw==",
       "cpu": [
         "arm64"
       ],
@@ -1978,9 +2055,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.1.tgz",
-      "integrity": "sha512-Ncwbw2WJ57Al5OX0k4chM68DKhEPlrXBaSXDCi2kPi5f4d8b3ejr3RRJGfKBLrn2YJL5ezNS7w2TZLHSti8CMw==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.6.tgz",
+      "integrity": "sha512-NRfO39AIrzBnixKbjuo2YiYhB6o9d8v/ymU9m/Xk8cyVk+k7XylniXkHwjs4s70wedVffc6bQNbufk5v0xEm0A==",
       "cpu": [
         "x64"
       ],
@@ -2040,68 +2117,44 @@
       }
     },
     "node_modules/@noble/curves": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.8.1.tgz",
-      "integrity": "sha512-warwspo+UYUPep0Q+vtdVB4Ugn8GGQj8iyB3gnRWsztmUHTI3S1nhdiWNsPUGL0vud7JlRRk1XEu7Lq1KGTnMQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-2.0.1.tgz",
+      "integrity": "sha512-vs1Az2OOTBiP4q0pwjW5aF0xp9n4MxVrmkFBxc6EKZc6ddYx5gaZiAsZoq0uRRXWbi3AT/sBqn05eRPtn1JCPw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "@noble/hashes": "1.7.1"
+        "@noble/hashes": "2.0.1"
       },
       "engines": {
-        "node": "^14.21.3 || >=16"
+        "node": ">= 20.19.0"
       },
       "funding": {
         "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/@noble/hashes": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.7.1.tgz",
-      "integrity": "sha512-B8XBPsn4vT/KJAGqDzbwztd+6Yte3P4V7iafm24bxgDe/mlRuK6xmWPuCNrKt2vDafZ8MfJLlchDG/vYafQEjQ==",
+    "node_modules/@noble/curves/node_modules/@noble/hashes": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-2.0.1.tgz",
+      "integrity": "sha512-XlOlEbQcE9fmuXxrVTXCTlG2nlRXa9Rj3rr5Ue/+tX+nmkgbX720YHh0VR3hBF9xDvwnb8D2shVGOwNx+ulArw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
-        "node": "^14.21.3 || >=16"
+        "node": ">= 20.19.0"
       },
       "funding": {
         "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
+    "node_modules/@noble/hashes": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
+      "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==",
       "license": "MIT",
       "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
+        "node": "^14.21.3 || >=16"
       },
-      "engines": {
-        "node": ">= 8"
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
       }
     },
     "node_modules/@panva/hkdf": {
@@ -3900,6 +3953,7 @@
       "resolved": "https://registry.npmjs.org/@scure/base/-/base-1.2.6.tgz",
       "integrity": "sha512-g/nm5FgUa//MCj1gV09zTJTaM6KBAHqLN907YVQqf7zC49+DcO4B1so4ZX07Ef10Twr6nuqYEH9GEggFXA4Fmg==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://paulmillr.com/funding/"
       }
@@ -3909,6 +3963,7 @@
       "resolved": "https://registry.npmjs.org/@scure/bip32/-/bip32-1.7.0.tgz",
       "integrity": "sha512-E4FFX/N3f4B80AKWp5dP6ow+flD1LQZo/w8UnLGYZO674jS6YnYeepycOOksv+vLPSpgN35wgKgy+ybfTb2SMw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@noble/curves": "~1.9.0",
         "@noble/hashes": "~1.8.0",
@@ -3923,6 +3978,7 @@
       "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.9.7.tgz",
       "integrity": "sha512-gbKGcRUYIjA3/zCCNaWDciTMFI0dCkvou3TL8Zmy5Nc7sJ47a0jtOeZoTaMxkuqRo9cRhjOdZJXegxYE5FN/xw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@noble/hashes": "1.8.0"
       },
@@ -3933,23 +3989,12 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/@scure/bip32/node_modules/@noble/hashes": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
-      "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==",
-      "license": "MIT",
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/@scure/bip39": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@scure/bip39/-/bip39-1.6.0.tgz",
       "integrity": "sha512-+lF0BbLiJNwVlev4eKelw1WWLaiKXw7sSl8T6FvBlWkdX+94aGJ4o8XjUdlyhTCjd8c+B3KT3JfS8P0bLRNU6A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@noble/hashes": "~1.8.0",
         "@scure/base": "~1.2.5"
@@ -3958,18 +4003,6 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/@scure/bip39/node_modules/@noble/hashes": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
-      "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==",
-      "license": "MIT",
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/@sinclair/typebox": {
       "version": "0.33.22",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.33.22.tgz",
@@ -3987,6 +4020,7 @@
       "resolved": "https://registry.npmjs.org/@solana-program/compute-budget/-/compute-budget-0.8.0.tgz",
       "integrity": "sha512-qPKxdxaEsFxebZ4K5RPuy7VQIm/tfJLa1+Nlt3KNA8EYQkz9Xm8htdoEaXVrer9kpgzzp9R3I3Bh6omwCM06tQ==",
       "license": "Apache-2.0",
+      "peer": true,
       "peerDependencies": {
         "@solana/kit": "^2.1.0"
       }
@@ -3996,6 +4030,7 @@
       "resolved": "https://registry.npmjs.org/@solana-program/stake/-/stake-0.2.1.tgz",
       "integrity": "sha512-ssNPsJv9XHaA+L7ihzmWGYcm/+XYURQ8UA3wQMKf6ccEHyHOUgoglkkDU/BoA0+wul6HxZUN0tHFymC0qFw6sg==",
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@solana/kit": "^2.1.0"
       }
@@ -4005,6 +4040,7 @@
       "resolved": "https://registry.npmjs.org/@solana-program/system/-/system-0.7.0.tgz",
       "integrity": "sha512-FKTBsKHpvHHNc1ATRm7SlC5nF/VdJtOSjldhcyfMN9R7xo712Mo2jHIzvBgn8zQO5Kg0DcWuKB7268Kv1ocicw==",
       "license": "Apache-2.0",
+      "peer": true,
       "peerDependencies": {
         "@solana/kit": "^2.1.0"
       }
@@ -4014,6 +4050,7 @@
       "resolved": "https://registry.npmjs.org/@solana-program/token/-/token-0.5.1.tgz",
       "integrity": "sha512-bJvynW5q9SFuVOZ5vqGVkmaPGA0MCC+m9jgJj1nk5m20I389/ms69ASnhWGoOPNcie7S9OwBX0gTj2fiyWpfag==",
       "license": "Apache-2.0",
+      "peer": true,
       "peerDependencies": {
         "@solana/kit": "^2.1.0"
       }
@@ -4023,6 +4060,7 @@
       "resolved": "https://registry.npmjs.org/@solana-program/token-2022/-/token-2022-0.4.2.tgz",
       "integrity": "sha512-zIpR5t4s9qEU3hZKupzIBxJ6nUV5/UVyIT400tu9vT1HMs5JHxaTTsb5GUhYjiiTvNwU0MQavbwc4Dl29L0Xvw==",
       "license": "Apache-2.0",
+      "peer": true,
       "peerDependencies": {
         "@solana/kit": "^2.1.0",
         "@solana/sysvars": "^2.1.0"
@@ -4033,6 +4071,7 @@
       "resolved": "https://registry.npmjs.org/@solana/accounts/-/accounts-2.3.0.tgz",
       "integrity": "sha512-QgQTj404Z6PXNOyzaOpSzjgMOuGwG8vC66jSDB+3zHaRcEPRVRd2sVSrd1U6sHtnV3aiaS6YyDuPQMheg4K2jw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/addresses": "2.3.0",
         "@solana/codecs-core": "2.3.0",
@@ -4053,6 +4092,7 @@
       "resolved": "https://registry.npmjs.org/@solana/addresses/-/addresses-2.3.0.tgz",
       "integrity": "sha512-ypTNkY2ZaRFpHLnHAgaW8a83N0/WoqdFvCqf4CQmnMdFsZSdC7qOwcbd7YzdaQn9dy+P2hybewzB+KP7LutxGA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/assertions": "2.3.0",
         "@solana/codecs-core": "2.3.0",
@@ -4072,6 +4112,7 @@
       "resolved": "https://registry.npmjs.org/@solana/assertions/-/assertions-2.3.0.tgz",
       "integrity": "sha512-Ekoet3khNg3XFLN7MIz8W31wPQISpKUGDGTylLptI+JjCDWx3PIa88xjEMqFo02WJ8sBj2NLV64Xg1sBcsHjZQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/errors": "2.3.0"
       },
@@ -4082,23 +4123,12 @@
         "typescript": ">=5.3.3"
       }
     },
-    "node_modules/@solana/buffer-layout": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@solana/buffer-layout/-/buffer-layout-4.0.1.tgz",
-      "integrity": "sha512-E1ImOIAD1tBZFRdjeM4/pzTiTApC0AOBGwyAMS4fwIodCWArzJ3DWdoh8cKxeFM2fElkxBh2Aqts1BPC373rHA==",
-      "license": "MIT",
-      "dependencies": {
-        "buffer": "~6.0.3"
-      },
-      "engines": {
-        "node": ">=5.10"
-      }
-    },
     "node_modules/@solana/codecs": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@solana/codecs/-/codecs-2.3.0.tgz",
       "integrity": "sha512-JVqGPkzoeyU262hJGdH64kNLH0M+Oew2CIPOa/9tR3++q2pEd4jU2Rxdfye9sd0Ce3XJrR5AIa8ZfbyQXzjh+g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/codecs-core": "2.3.0",
         "@solana/codecs-data-structures": "2.3.0",
@@ -4118,6 +4148,7 @@
       "resolved": "https://registry.npmjs.org/@solana/codecs-core/-/codecs-core-2.3.0.tgz",
       "integrity": "sha512-oG+VZzN6YhBHIoSKgS5ESM9VIGzhWjEHEGNPSibiDTxFhsFWxNaz8LbMDPjBUE69r9wmdGLkrQ+wVPbnJcZPvw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/errors": "2.3.0"
       },
@@ -4133,6 +4164,7 @@
       "resolved": "https://registry.npmjs.org/@solana/codecs-data-structures/-/codecs-data-structures-2.3.0.tgz",
       "integrity": "sha512-qvU5LE5DqEdYMYgELRHv+HMOx73sSoV1ZZkwIrclwUmwTbTaH8QAJURBj0RhQ/zCne7VuLLOZFFGv6jGigWhSw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/codecs-core": "2.3.0",
         "@solana/codecs-numbers": "2.3.0",
@@ -4150,6 +4182,7 @@
       "resolved": "https://registry.npmjs.org/@solana/codecs-numbers/-/codecs-numbers-2.3.0.tgz",
       "integrity": "sha512-jFvvwKJKffvG7Iz9dmN51OGB7JBcy2CJ6Xf3NqD/VP90xak66m/Lg48T01u5IQ/hc15mChVHiBm+HHuOFDUrQg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/codecs-core": "2.3.0",
         "@solana/errors": "2.3.0"
@@ -4166,6 +4199,7 @@
       "resolved": "https://registry.npmjs.org/@solana/codecs-strings/-/codecs-strings-2.3.0.tgz",
       "integrity": "sha512-y5pSBYwzVziXu521hh+VxqUtp0hYGTl1eWGoc1W+8mdvBdC1kTqm/X7aYQw33J42hw03JjryvYOvmGgk3Qz/Ug==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/codecs-core": "2.3.0",
         "@solana/codecs-numbers": "2.3.0",
@@ -4184,6 +4218,7 @@
       "resolved": "https://registry.npmjs.org/@solana/errors/-/errors-2.3.0.tgz",
       "integrity": "sha512-66RI9MAbwYV0UtP7kGcTBVLxJgUxoZGm8Fbc0ah+lGiAw17Gugco6+9GrJCV83VyF2mDWyYnYM9qdI3yjgpnaQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "chalk": "^5.4.1",
         "commander": "^14.0.0"
@@ -4203,6 +4238,7 @@
       "resolved": "https://registry.npmjs.org/@solana/fast-stable-stringify/-/fast-stable-stringify-2.3.0.tgz",
       "integrity": "sha512-KfJPrMEieUg6D3hfQACoPy0ukrAV8Kio883llt/8chPEG3FVTX9z/Zuf4O01a15xZmBbmQ7toil2Dp0sxMJSxw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=20.18.0"
       },
@@ -4215,6 +4251,7 @@
       "resolved": "https://registry.npmjs.org/@solana/functional/-/functional-2.3.0.tgz",
       "integrity": "sha512-AgsPh3W3tE+nK3eEw/W9qiSfTGwLYEvl0rWaxHht/lRcuDVwfKRzeSa5G79eioWFFqr+pTtoCr3D3OLkwKz02Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=20.18.0"
       },
@@ -4227,6 +4264,7 @@
       "resolved": "https://registry.npmjs.org/@solana/instructions/-/instructions-2.3.0.tgz",
       "integrity": "sha512-PLMsmaIKu7hEAzyElrk2T7JJx4D+9eRwebhFZpy2PXziNSmFF929eRHKUsKqBFM3cYR1Yy3m6roBZfA+bGE/oQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/codecs-core": "2.3.0",
         "@solana/errors": "2.3.0"
@@ -4243,6 +4281,7 @@
       "resolved": "https://registry.npmjs.org/@solana/keys/-/keys-2.3.0.tgz",
       "integrity": "sha512-ZVVdga79pNH+2pVcm6fr2sWz9HTwfopDVhYb0Lh3dh+WBmJjwkabXEIHey2rUES7NjFa/G7sV8lrUn/v8LDCCQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/assertions": "2.3.0",
         "@solana/codecs-core": "2.3.0",
@@ -4262,6 +4301,7 @@
       "resolved": "https://registry.npmjs.org/@solana/kit/-/kit-2.3.0.tgz",
       "integrity": "sha512-sb6PgwoW2LjE5oTFu4lhlS/cGt/NB3YrShEyx7JgWFWysfgLdJnhwWThgwy/4HjNsmtMrQGWVls0yVBHcMvlMQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/accounts": "2.3.0",
         "@solana/addresses": "2.3.0",
@@ -4294,6 +4334,7 @@
       "resolved": "https://registry.npmjs.org/@solana/nominal-types/-/nominal-types-2.3.0.tgz",
       "integrity": "sha512-uKlMnlP4PWW5UTXlhKM8lcgIaNj8dvd8xO4Y9l+FVvh9RvW2TO0GwUO6JCo7JBzCB0PSqRJdWWaQ8pu1Ti/OkA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=20.18.0"
       },
@@ -4306,6 +4347,7 @@
       "resolved": "https://registry.npmjs.org/@solana/options/-/options-2.3.0.tgz",
       "integrity": "sha512-PPnnZBRCWWoZQ11exPxf//DRzN2C6AoFsDI/u2AsQfYih434/7Kp4XLpfOMT/XESi+gdBMFNNfbES5zg3wAIkw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/codecs-core": "2.3.0",
         "@solana/codecs-data-structures": "2.3.0",
@@ -4325,6 +4367,7 @@
       "resolved": "https://registry.npmjs.org/@solana/programs/-/programs-2.3.0.tgz",
       "integrity": "sha512-UXKujV71VCI5uPs+cFdwxybtHZAIZyQkqDiDnmK+DawtOO9mBn4Nimdb/6RjR2CXT78mzO9ZCZ3qfyX+ydcB7w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/addresses": "2.3.0",
         "@solana/errors": "2.3.0"
@@ -4341,6 +4384,7 @@
       "resolved": "https://registry.npmjs.org/@solana/promises/-/promises-2.3.0.tgz",
       "integrity": "sha512-GjVgutZKXVuojd9rWy1PuLnfcRfqsaCm7InCiZc8bqmJpoghlyluweNc7ml9Y5yQn1P2IOyzh9+p/77vIyNybQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=20.18.0"
       },
@@ -4353,6 +4397,7 @@
       "resolved": "https://registry.npmjs.org/@solana/rpc/-/rpc-2.3.0.tgz",
       "integrity": "sha512-ZWN76iNQAOCpYC7yKfb3UNLIMZf603JckLKOOLTHuy9MZnTN8XV6uwvDFhf42XvhglgUjGCEnbUqWtxQ9pa/pQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/errors": "2.3.0",
         "@solana/fast-stable-stringify": "2.3.0",
@@ -4376,6 +4421,7 @@
       "resolved": "https://registry.npmjs.org/@solana/rpc-api/-/rpc-api-2.3.0.tgz",
       "integrity": "sha512-UUdiRfWoyYhJL9PPvFeJr4aJ554ob2jXcpn4vKmRVn9ire0sCbpQKYx6K8eEKHZWXKrDW8IDspgTl0gT/aJWVg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/addresses": "2.3.0",
         "@solana/codecs-core": "2.3.0",
@@ -4401,6 +4447,7 @@
       "resolved": "https://registry.npmjs.org/@solana/rpc-parsed-types/-/rpc-parsed-types-2.3.0.tgz",
       "integrity": "sha512-B5pHzyEIbBJf9KHej+zdr5ZNAdSvu7WLU2lOUPh81KHdHQs6dEb310LGxcpCc7HVE8IEdO20AbckewDiAN6OCg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=20.18.0"
       },
@@ -4413,6 +4460,7 @@
       "resolved": "https://registry.npmjs.org/@solana/rpc-spec/-/rpc-spec-2.3.0.tgz",
       "integrity": "sha512-fA2LMX4BMixCrNB2n6T83AvjZ3oUQTu7qyPLyt8gHQaoEAXs8k6GZmu6iYcr+FboQCjUmRPgMaABbcr9j2J9Sw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/errors": "2.3.0",
         "@solana/rpc-spec-types": "2.3.0"
@@ -4429,6 +4477,7 @@
       "resolved": "https://registry.npmjs.org/@solana/rpc-spec-types/-/rpc-spec-types-2.3.0.tgz",
       "integrity": "sha512-xQsb65lahjr8Wc9dMtP7xa0ZmDS8dOE2ncYjlvfyw/h4mpdXTUdrSMi6RtFwX33/rGuztQ7Hwaid5xLNSLvsFQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=20.18.0"
       },
@@ -4441,6 +4490,7 @@
       "resolved": "https://registry.npmjs.org/@solana/rpc-subscriptions/-/rpc-subscriptions-2.3.0.tgz",
       "integrity": "sha512-Uyr10nZKGVzvCOqwCZgwYrzuoDyUdwtgQRefh13pXIrdo4wYjVmoLykH49Omt6abwStB0a4UL5gX9V4mFdDJZg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/errors": "2.3.0",
         "@solana/fast-stable-stringify": "2.3.0",
@@ -4466,6 +4516,7 @@
       "resolved": "https://registry.npmjs.org/@solana/rpc-subscriptions-api/-/rpc-subscriptions-api-2.3.0.tgz",
       "integrity": "sha512-9mCjVbum2Hg9KGX3LKsrI5Xs0KX390lS+Z8qB80bxhar6MJPugqIPH8uRgLhCW9GN3JprAfjRNl7our8CPvsPQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/addresses": "2.3.0",
         "@solana/keys": "2.3.0",
@@ -4487,6 +4538,7 @@
       "resolved": "https://registry.npmjs.org/@solana/rpc-subscriptions-channel-websocket/-/rpc-subscriptions-channel-websocket-2.3.0.tgz",
       "integrity": "sha512-2oL6ceFwejIgeWzbNiUHI2tZZnaOxNTSerszcin7wYQwijxtpVgUHiuItM/Y70DQmH9sKhmikQp+dqeGalaJxw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/errors": "2.3.0",
         "@solana/functional": "2.3.0",
@@ -4506,6 +4558,7 @@
       "resolved": "https://registry.npmjs.org/@solana/rpc-subscriptions-spec/-/rpc-subscriptions-spec-2.3.0.tgz",
       "integrity": "sha512-rdmVcl4PvNKQeA2l8DorIeALCgJEMSu7U8AXJS1PICeb2lQuMeaR+6cs/iowjvIB0lMVjYN2sFf6Q3dJPu6wWg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/errors": "2.3.0",
         "@solana/promises": "2.3.0",
@@ -4524,6 +4577,7 @@
       "resolved": "https://registry.npmjs.org/@solana/rpc-transformers/-/rpc-transformers-2.3.0.tgz",
       "integrity": "sha512-UuHYK3XEpo9nMXdjyGKkPCOr7WsZsxs7zLYDO1A5ELH3P3JoehvrDegYRAGzBS2VKsfApZ86ZpJToP0K3PhmMA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/errors": "2.3.0",
         "@solana/functional": "2.3.0",
@@ -4543,6 +4597,7 @@
       "resolved": "https://registry.npmjs.org/@solana/rpc-transport-http/-/rpc-transport-http-2.3.0.tgz",
       "integrity": "sha512-HFKydmxGw8nAF5N+S0NLnPBDCe5oMDtI2RAmW8DMqP4U3Zxt2XWhvV1SNkAldT5tF0U1vP+is6fHxyhk4xqEvg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/errors": "2.3.0",
         "@solana/rpc-spec": "2.3.0",
@@ -4561,6 +4616,7 @@
       "resolved": "https://registry.npmjs.org/@solana/rpc-types/-/rpc-types-2.3.0.tgz",
       "integrity": "sha512-O09YX2hED2QUyGxrMOxQ9GzH1LlEwwZWu69QbL4oYmIf6P5dzEEHcqRY6L1LsDVqc/dzAdEs/E1FaPrcIaIIPw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/addresses": "2.3.0",
         "@solana/codecs-core": "2.3.0",
@@ -4581,6 +4637,7 @@
       "resolved": "https://registry.npmjs.org/@solana/signers/-/signers-2.3.0.tgz",
       "integrity": "sha512-OSv6fGr/MFRx6J+ZChQMRqKNPGGmdjkqarKkRzkwmv7v8quWsIRnJT5EV8tBy3LI4DLO/A8vKiNSPzvm1TdaiQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@solana/addresses": "2.3.0",
         "@solana/codecs-core": "2.3.0",
@@ -4603,171 +4660,771 @@
       "resolved": "https://registry.npmjs.org/@solana/subscribable/-/subscribable-2.3.0.tgz",
       "integrity": "sha512-DkgohEDbMkdTWiKAoatY02Njr56WXx9e/dKKfmne8/Ad6/2llUIrax78nCdlvZW9quXMaXPTxZvdQqo9N669Og==",
       "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@solana/errors": "2.3.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.3.3"
+      }
+    },
+    "node_modules/@solana/sysvars": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@solana/sysvars/-/sysvars-2.3.0.tgz",
+      "integrity": "sha512-LvjADZrpZ+CnhlHqfI5cmsRzX9Rpyb1Ox2dMHnbsRNzeKAMhu9w4ZBIaeTdO322zsTr509G1B+k2ABD3whvUBA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@solana/accounts": "2.3.0",
+        "@solana/codecs": "2.3.0",
+        "@solana/errors": "2.3.0",
+        "@solana/rpc-types": "2.3.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.3.3"
+      }
+    },
+    "node_modules/@solana/transaction-confirmation": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@solana/transaction-confirmation/-/transaction-confirmation-2.3.0.tgz",
+      "integrity": "sha512-UiEuiHCfAAZEKdfne/XljFNJbsKAe701UQHKXEInYzIgBjRbvaeYZlBmkkqtxwcasgBTOmEaEKT44J14N9VZDw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@solana/addresses": "2.3.0",
+        "@solana/codecs-strings": "2.3.0",
+        "@solana/errors": "2.3.0",
+        "@solana/keys": "2.3.0",
+        "@solana/promises": "2.3.0",
+        "@solana/rpc": "2.3.0",
+        "@solana/rpc-subscriptions": "2.3.0",
+        "@solana/rpc-types": "2.3.0",
+        "@solana/transaction-messages": "2.3.0",
+        "@solana/transactions": "2.3.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.3.3"
+      }
+    },
+    "node_modules/@solana/transaction-messages": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@solana/transaction-messages/-/transaction-messages-2.3.0.tgz",
+      "integrity": "sha512-bgqvWuy3MqKS5JdNLH649q+ngiyOu5rGS3DizSnWwYUd76RxZl1kN6CoqHSrrMzFMvis6sck/yPGG3wqrMlAww==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@solana/addresses": "2.3.0",
+        "@solana/codecs-core": "2.3.0",
+        "@solana/codecs-data-structures": "2.3.0",
+        "@solana/codecs-numbers": "2.3.0",
+        "@solana/errors": "2.3.0",
+        "@solana/functional": "2.3.0",
+        "@solana/instructions": "2.3.0",
+        "@solana/nominal-types": "2.3.0",
+        "@solana/rpc-types": "2.3.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.3.3"
+      }
+    },
+    "node_modules/@solana/transactions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@solana/transactions/-/transactions-2.3.0.tgz",
+      "integrity": "sha512-LnTvdi8QnrQtuEZor5Msje61sDpPstTVwKg4y81tNxDhiyomjuvnSNLAq6QsB9gIxUqbNzPZgOG9IU4I4/Uaug==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@solana/addresses": "2.3.0",
+        "@solana/codecs-core": "2.3.0",
+        "@solana/codecs-data-structures": "2.3.0",
+        "@solana/codecs-numbers": "2.3.0",
+        "@solana/codecs-strings": "2.3.0",
+        "@solana/errors": "2.3.0",
+        "@solana/functional": "2.3.0",
+        "@solana/instructions": "2.3.0",
+        "@solana/keys": "2.3.0",
+        "@solana/nominal-types": "2.3.0",
+        "@solana/rpc-types": "2.3.0",
+        "@solana/transaction-messages": "2.3.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.3.3"
+      }
+    },
+    "node_modules/@solana/web3.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/web3.js/-/web3.js-2.0.0.tgz",
+      "integrity": "sha512-x+ZRB2/r5tVK/xw8QRbAfgPcX51G9f2ifEyAQ/J5npOO+6+MPeeCjtr5UxHNDAYs9Ypo0PN+YJATCO4vhzQJGg==",
+      "deprecated": "@solana/web3.js version 2.0 is now @solana/kit! Remove @solana/web3.js@2 from your dependencies and replace it with @solana/kit. As needed, upgrade all of your @solana-program/* dependencies to the latest versions that use Kit.",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/accounts": "2.0.0",
+        "@solana/addresses": "2.0.0",
+        "@solana/codecs": "2.0.0",
+        "@solana/errors": "2.0.0",
+        "@solana/functional": "2.0.0",
+        "@solana/instructions": "2.0.0",
+        "@solana/keys": "2.0.0",
+        "@solana/programs": "2.0.0",
+        "@solana/rpc": "2.0.0",
+        "@solana/rpc-parsed-types": "2.0.0",
+        "@solana/rpc-spec-types": "2.0.0",
+        "@solana/rpc-subscriptions": "2.0.0",
+        "@solana/rpc-types": "2.0.0",
+        "@solana/signers": "2.0.0",
+        "@solana/sysvars": "2.0.0",
+        "@solana/transaction-confirmation": "2.0.0",
+        "@solana/transaction-messages": "2.0.0",
+        "@solana/transactions": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/accounts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/accounts/-/accounts-2.0.0.tgz",
+      "integrity": "sha512-1CE4P3QSDH5x+ZtSthMY2mn/ekROBnlT3/4f3CHDJicDvLQsgAq2yCvGHsYkK3ZA0mxhFLuhJVjuKASPnmG1rQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/addresses": "2.0.0",
+        "@solana/codecs-core": "2.0.0",
+        "@solana/codecs-strings": "2.0.0",
+        "@solana/errors": "2.0.0",
+        "@solana/rpc-spec": "2.0.0",
+        "@solana/rpc-types": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/addresses": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/addresses/-/addresses-2.0.0.tgz",
+      "integrity": "sha512-8n3c/mUlH1/z+pM8e7OJ6uDSXw26Be0dgYiokiqblO66DGQ0d+7pqFUFZ5pEGjJ9PU2lDTSfY8rHf4cemOqwzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/assertions": "2.0.0",
+        "@solana/codecs-core": "2.0.0",
+        "@solana/codecs-strings": "2.0.0",
+        "@solana/errors": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/assertions": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/assertions/-/assertions-2.0.0.tgz",
+      "integrity": "sha512-NyPPqZRNGXs/GAjfgsw7YS6vCTXWt4ibXveS+ciy5sdmp/0v3pA6DlzYjleF9Sljrew0IiON15rjaXamhDxYfQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/errors": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/codecs": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/codecs/-/codecs-2.0.0.tgz",
+      "integrity": "sha512-xneIG5ppE6WIGaZCK7JTys0uLhzlnEJUdBO8nRVIyerwH6aqCfb0fGe7q5WNNYAVDRSxC0Pc1TDe1hpdx3KWmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/codecs-core": "2.0.0",
+        "@solana/codecs-data-structures": "2.0.0",
+        "@solana/codecs-numbers": "2.0.0",
+        "@solana/codecs-strings": "2.0.0",
+        "@solana/options": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/codecs-core": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/codecs-core/-/codecs-core-2.0.0.tgz",
+      "integrity": "sha512-qCG+3hDU5Pm8V6joJjR4j4Zv9md1z0RaecniNDIkEglnxmOUODnmPLWbtOjnDylfItyuZeDihK8hkewdj8cUtw==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/errors": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/codecs-data-structures": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/codecs-data-structures/-/codecs-data-structures-2.0.0.tgz",
+      "integrity": "sha512-N98Y4jsrC/XeOgqrfsGqcOFIaOoMsKdAxOmy5oqVaEN67YoGSLNC9ROnqamOAOrsZdicTWx9/YLKFmQi9DPh1A==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/codecs-core": "2.0.0",
+        "@solana/codecs-numbers": "2.0.0",
+        "@solana/errors": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/codecs-numbers": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/codecs-numbers/-/codecs-numbers-2.0.0.tgz",
+      "integrity": "sha512-r66i7VzJO1MZkQWZIAI6jjJOFVpnq0+FIabo2Z2ZDtrArFus/SbSEv543yCLeD2tdR/G/p+1+P5On10qF50Y1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/codecs-core": "2.0.0",
+        "@solana/errors": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/codecs-strings": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/codecs-strings/-/codecs-strings-2.0.0.tgz",
+      "integrity": "sha512-dNqeCypsvaHcjW86H0gYgAZGGkKVBeKVeh7WXlOZ9kno7PeQ2wNkpccyzDfuzaIsKv+HZUD3v/eo86GCvnKazQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/codecs-core": "2.0.0",
+        "@solana/codecs-numbers": "2.0.0",
+        "@solana/errors": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "fastestsmallesttextencoderdecoder": "^1.0.22",
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/errors/-/errors-2.0.0.tgz",
+      "integrity": "sha512-IHlaPFSy4lvYco1oHJ3X8DbchWwAwJaL/4wZKnF1ugwZ0g0re8wbABrqNOe/jyZ84VU9Z14PYM8W9oDAebdJbw==",
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^5.3.0",
+        "commander": "^12.1.0"
+      },
+      "bin": {
+        "errors": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/fast-stable-stringify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/fast-stable-stringify/-/fast-stable-stringify-2.0.0.tgz",
+      "integrity": "sha512-EsIx9z+eoxOmC+FpzhEb+H67CCYTbs/omAqXD4EdEYnCHWrI1li1oYBV+NoKzfx8fKlX+nzNB7S/9kc4u7Etpw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/functional": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/functional/-/functional-2.0.0.tgz",
+      "integrity": "sha512-Sj+sLiUTimnMEyGnSLGt0lbih2xPDUhxhonnrIkPwA+hjQ3ULGHAxeevHU06nqiVEgENQYUJ5rCtHs4xhUFAkQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/instructions": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/instructions/-/instructions-2.0.0.tgz",
+      "integrity": "sha512-MiTEiNF7Pzp+Y+x4yadl2VUcNHboaW5WP52psBuhHns3GpbbruRv5efMpM9OEQNe1OsN+Eg39vjEidX55+P+DQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/errors": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/keys": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/keys/-/keys-2.0.0.tgz",
+      "integrity": "sha512-SSLSX8BXRvfLKBqsmBghmlhMKpwHeWd5CHi5zXgTS1BRrtiU6lcrTVC9ie6B+WaNNq7oe3e6K5bdbhu3fFZ+0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/assertions": "2.0.0",
+        "@solana/codecs-core": "2.0.0",
+        "@solana/codecs-strings": "2.0.0",
+        "@solana/errors": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/options": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/options/-/options-2.0.0.tgz",
+      "integrity": "sha512-OVc4KnYosB8oAukQ/htgrxXSxlUP6gUu5Aau6d/BgEkPQzWd/Pr+w91VWw3i3zZuu2SGpedbyh05RoJBe/hSXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/codecs-core": "2.0.0",
+        "@solana/codecs-data-structures": "2.0.0",
+        "@solana/codecs-numbers": "2.0.0",
+        "@solana/codecs-strings": "2.0.0",
+        "@solana/errors": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/programs": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/programs/-/programs-2.0.0.tgz",
+      "integrity": "sha512-JPIKB61pWfODnsvEAaPALc6vR5rn7kmHLpFaviWhBtfUlEVgB8yVTR0MURe4+z+fJCPRV5wWss+svA4EeGDYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/addresses": "2.0.0",
+        "@solana/errors": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/promises": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/promises/-/promises-2.0.0.tgz",
+      "integrity": "sha512-4teQ52HDjK16ORrZe1zl+Q9WcZdQ+YEl0M1gk59XG7D0P9WqaVEQzeXGnKSCs+Y9bnB1u5xCJccwpUhHYWq6gg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/rpc": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/rpc/-/rpc-2.0.0.tgz",
+      "integrity": "sha512-TumQ9DFRpib/RyaIqLVfr7UjqSo7ldfzpae0tgjM93YjbItB4Z0VcUXc3uAFvkeYw2/HIMb46Zg43mkUwozjDg==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/errors": "2.0.0",
+        "@solana/fast-stable-stringify": "2.0.0",
+        "@solana/functional": "2.0.0",
+        "@solana/rpc-api": "2.0.0",
+        "@solana/rpc-spec": "2.0.0",
+        "@solana/rpc-spec-types": "2.0.0",
+        "@solana/rpc-transformers": "2.0.0",
+        "@solana/rpc-transport-http": "2.0.0",
+        "@solana/rpc-types": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/rpc-api": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/rpc-api/-/rpc-api-2.0.0.tgz",
+      "integrity": "sha512-1FwitYxwADMF/6zKP2kNXg8ESxB6GhNBNW1c4f5dEmuXuBbeD/enLV3WMrpg8zJkIaaYarEFNbt7R7HyFzmURQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/addresses": "2.0.0",
+        "@solana/codecs-core": "2.0.0",
+        "@solana/codecs-strings": "2.0.0",
+        "@solana/errors": "2.0.0",
+        "@solana/keys": "2.0.0",
+        "@solana/rpc-parsed-types": "2.0.0",
+        "@solana/rpc-spec": "2.0.0",
+        "@solana/rpc-transformers": "2.0.0",
+        "@solana/rpc-types": "2.0.0",
+        "@solana/transaction-messages": "2.0.0",
+        "@solana/transactions": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/rpc-parsed-types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/rpc-parsed-types/-/rpc-parsed-types-2.0.0.tgz",
+      "integrity": "sha512-VCeY/oKVEtBnp8EDOc5LSSiOeIOLFIgLndcxqU0ij/cZaQ01DOoHbhluvhZtU80Z3dUeicec8TiMgkFzed+WhQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/rpc-spec": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/rpc-spec/-/rpc-spec-2.0.0.tgz",
+      "integrity": "sha512-1uIDzj7vocCUqfOifjv1zAuxQ53ugiup/42edVFoQLOnJresoEZLL6WjnsJq4oCTccEAvGhUBI1WWKeZTGNxFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/errors": "2.0.0",
+        "@solana/rpc-spec-types": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/rpc-spec-types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/rpc-spec-types/-/rpc-spec-types-2.0.0.tgz",
+      "integrity": "sha512-G2lmhFhgtxMQd/D6B04BHGE7bm5dMZdIPQNOqVGhzNAVjrmyapD3JN2hKAbmaYPe97wLfZERw0Ux1u4Y6q7TqA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/rpc-subscriptions": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/rpc-subscriptions/-/rpc-subscriptions-2.0.0.tgz",
+      "integrity": "sha512-AdwMJHMrhlj7q1MPjZmVcKq3iLqMW3N0MT8kzIAP2vP+8o/d6Fn4aqGxoz2Hlfn3OYIZoYStN2VBtwzbcfEgMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/errors": "2.0.0",
+        "@solana/fast-stable-stringify": "2.0.0",
+        "@solana/functional": "2.0.0",
+        "@solana/promises": "2.0.0",
+        "@solana/rpc-spec-types": "2.0.0",
+        "@solana/rpc-subscriptions-api": "2.0.0",
+        "@solana/rpc-subscriptions-channel-websocket": "2.0.0",
+        "@solana/rpc-subscriptions-spec": "2.0.0",
+        "@solana/rpc-transformers": "2.0.0",
+        "@solana/rpc-types": "2.0.0",
+        "@solana/subscribable": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/rpc-subscriptions-api": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/rpc-subscriptions-api/-/rpc-subscriptions-api-2.0.0.tgz",
+      "integrity": "sha512-NAJQvSFXYIIf8zxsMFBCkSbZNZgT32pzPZ1V6ZAd+U2iDEjx3L+yFwoJgfOcHp8kAV+alsF2lIsGBlG4u+ehvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/addresses": "2.0.0",
+        "@solana/keys": "2.0.0",
+        "@solana/rpc-subscriptions-spec": "2.0.0",
+        "@solana/rpc-transformers": "2.0.0",
+        "@solana/rpc-types": "2.0.0",
+        "@solana/transaction-messages": "2.0.0",
+        "@solana/transactions": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/rpc-subscriptions-channel-websocket": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/rpc-subscriptions-channel-websocket/-/rpc-subscriptions-channel-websocket-2.0.0.tgz",
+      "integrity": "sha512-hSQDZBmcp2t+gLZsSBqs/SqVw4RuNSC7njiP46azyzW7oGg8X2YPV36AHGsHD12KPsc0UpT1OAZ4+AN9meVKww==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/errors": "2.0.0",
+        "@solana/functional": "2.0.0",
+        "@solana/rpc-subscriptions-spec": "2.0.0",
+        "@solana/subscribable": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5",
+        "ws": "^8.18.0"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/rpc-subscriptions-spec": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/rpc-subscriptions-spec/-/rpc-subscriptions-spec-2.0.0.tgz",
+      "integrity": "sha512-VXMiI3fYtU1PkVVTXL87pcY48ZY8aCi1N6FqtxSP2xg/GASL01j1qbwyIL1OvoCqGyRgIxdd/YfaByW9wmWBhA==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/errors": "2.0.0",
+        "@solana/promises": "2.0.0",
+        "@solana/rpc-spec-types": "2.0.0",
+        "@solana/subscribable": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/rpc-transformers": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/rpc-transformers/-/rpc-transformers-2.0.0.tgz",
+      "integrity": "sha512-H6tN0qcqzUangowsLLQtYXKJsf1Roe3/qJ1Cy0gv9ojY9uEvNbJqpeEj+7blv0MUZfEe+rECAwBhxxRKPMhYGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/errors": "2.0.0",
+        "@solana/functional": "2.0.0",
+        "@solana/rpc-spec-types": "2.0.0",
+        "@solana/rpc-types": "2.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/rpc-transport-http": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/rpc-transport-http/-/rpc-transport-http-2.0.0.tgz",
+      "integrity": "sha512-UJLhKhhxDd1OPi8hb2AenHsDm1mofCBbhWn4bDCnH2Q3ulwYadUhcNqNbxjJPQ774VNhAf53SSI5A6PQo8IZSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@solana/errors": "2.0.0",
+        "@solana/rpc-spec": "2.0.0",
+        "@solana/rpc-spec-types": "2.0.0",
+        "undici-types": "^6.20.0"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@solana/web3.js/node_modules/@solana/rpc-types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/rpc-types/-/rpc-types-2.0.0.tgz",
+      "integrity": "sha512-o1ApB9PYR0A3XjVSOh//SOVWgjDcqMlR3UNmtqciuREIBmWqnvPirdOa5EJxD3iPhfA4gnNnhGzT+tMDeDW/Kw==",
+      "license": "MIT",
       "dependencies": {
-        "@solana/errors": "2.3.0"
+        "@solana/addresses": "2.0.0",
+        "@solana/codecs-core": "2.0.0",
+        "@solana/codecs-numbers": "2.0.0",
+        "@solana/codecs-strings": "2.0.0",
+        "@solana/errors": "2.0.0"
       },
       "engines": {
         "node": ">=20.18.0"
       },
       "peerDependencies": {
-        "typescript": ">=5.3.3"
+        "typescript": ">=5"
       }
     },
-    "node_modules/@solana/sysvars": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@solana/sysvars/-/sysvars-2.3.0.tgz",
-      "integrity": "sha512-LvjADZrpZ+CnhlHqfI5cmsRzX9Rpyb1Ox2dMHnbsRNzeKAMhu9w4ZBIaeTdO322zsTr509G1B+k2ABD3whvUBA==",
+    "node_modules/@solana/web3.js/node_modules/@solana/signers": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/signers/-/signers-2.0.0.tgz",
+      "integrity": "sha512-JEYJS3x/iKkqPV/3b1nLpX9lHib21wQKV3fOuu1aDLQqmX9OYKrnIIITYdnFDhmvGhpEpkkbPnqu7yVaFIBYsQ==",
       "license": "MIT",
       "dependencies": {
-        "@solana/accounts": "2.3.0",
-        "@solana/codecs": "2.3.0",
-        "@solana/errors": "2.3.0",
-        "@solana/rpc-types": "2.3.0"
+        "@solana/addresses": "2.0.0",
+        "@solana/codecs-core": "2.0.0",
+        "@solana/errors": "2.0.0",
+        "@solana/instructions": "2.0.0",
+        "@solana/keys": "2.0.0",
+        "@solana/transaction-messages": "2.0.0",
+        "@solana/transactions": "2.0.0"
       },
       "engines": {
         "node": ">=20.18.0"
       },
       "peerDependencies": {
-        "typescript": ">=5.3.3"
+        "typescript": ">=5"
       }
     },
-    "node_modules/@solana/transaction-confirmation": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@solana/transaction-confirmation/-/transaction-confirmation-2.3.0.tgz",
-      "integrity": "sha512-UiEuiHCfAAZEKdfne/XljFNJbsKAe701UQHKXEInYzIgBjRbvaeYZlBmkkqtxwcasgBTOmEaEKT44J14N9VZDw==",
+    "node_modules/@solana/web3.js/node_modules/@solana/subscribable": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/subscribable/-/subscribable-2.0.0.tgz",
+      "integrity": "sha512-Ex7d2GnTSNVMZDU3z6nKN4agRDDgCgBDiLnmn1hmt0iFo3alr3gRAqiqa7qGouAtYh9/29pyc8tVJCijHWJPQQ==",
       "license": "MIT",
       "dependencies": {
-        "@solana/addresses": "2.3.0",
-        "@solana/codecs-strings": "2.3.0",
-        "@solana/errors": "2.3.0",
-        "@solana/keys": "2.3.0",
-        "@solana/promises": "2.3.0",
-        "@solana/rpc": "2.3.0",
-        "@solana/rpc-subscriptions": "2.3.0",
-        "@solana/rpc-types": "2.3.0",
-        "@solana/transaction-messages": "2.3.0",
-        "@solana/transactions": "2.3.0"
+        "@solana/errors": "2.0.0"
       },
       "engines": {
         "node": ">=20.18.0"
       },
       "peerDependencies": {
-        "typescript": ">=5.3.3"
+        "typescript": ">=5"
       }
     },
-    "node_modules/@solana/transaction-messages": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@solana/transaction-messages/-/transaction-messages-2.3.0.tgz",
-      "integrity": "sha512-bgqvWuy3MqKS5JdNLH649q+ngiyOu5rGS3DizSnWwYUd76RxZl1kN6CoqHSrrMzFMvis6sck/yPGG3wqrMlAww==",
+    "node_modules/@solana/web3.js/node_modules/@solana/sysvars": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/sysvars/-/sysvars-2.0.0.tgz",
+      "integrity": "sha512-8D4ajKcCYQsTG1p4k30lre2vjxLR6S5MftUGJnIaQObDCzGmaeA9GRti4Kk4gSPWVYFTBoj1ASx8EcEXaB3eIQ==",
       "license": "MIT",
       "dependencies": {
-        "@solana/addresses": "2.3.0",
-        "@solana/codecs-core": "2.3.0",
-        "@solana/codecs-data-structures": "2.3.0",
-        "@solana/codecs-numbers": "2.3.0",
-        "@solana/errors": "2.3.0",
-        "@solana/functional": "2.3.0",
-        "@solana/instructions": "2.3.0",
-        "@solana/nominal-types": "2.3.0",
-        "@solana/rpc-types": "2.3.0"
+        "@solana/accounts": "2.0.0",
+        "@solana/codecs": "2.0.0",
+        "@solana/errors": "2.0.0",
+        "@solana/rpc-types": "2.0.0"
       },
       "engines": {
         "node": ">=20.18.0"
       },
       "peerDependencies": {
-        "typescript": ">=5.3.3"
+        "typescript": ">=5"
       }
     },
-    "node_modules/@solana/transactions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@solana/transactions/-/transactions-2.3.0.tgz",
-      "integrity": "sha512-LnTvdi8QnrQtuEZor5Msje61sDpPstTVwKg4y81tNxDhiyomjuvnSNLAq6QsB9gIxUqbNzPZgOG9IU4I4/Uaug==",
+    "node_modules/@solana/web3.js/node_modules/@solana/transaction-confirmation": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/transaction-confirmation/-/transaction-confirmation-2.0.0.tgz",
+      "integrity": "sha512-JkTw5gXLiqQjf6xK0fpVcoJ/aMp2kagtFSD/BAOazdJ3UYzOzbzqvECt6uWa3ConcMswQ2vXalVtI7ZjmYuIeg==",
       "license": "MIT",
       "dependencies": {
-        "@solana/addresses": "2.3.0",
-        "@solana/codecs-core": "2.3.0",
-        "@solana/codecs-data-structures": "2.3.0",
-        "@solana/codecs-numbers": "2.3.0",
-        "@solana/codecs-strings": "2.3.0",
-        "@solana/errors": "2.3.0",
-        "@solana/functional": "2.3.0",
-        "@solana/instructions": "2.3.0",
-        "@solana/keys": "2.3.0",
-        "@solana/nominal-types": "2.3.0",
-        "@solana/rpc-types": "2.3.0",
-        "@solana/transaction-messages": "2.3.0"
+        "@solana/addresses": "2.0.0",
+        "@solana/codecs-strings": "2.0.0",
+        "@solana/errors": "2.0.0",
+        "@solana/keys": "2.0.0",
+        "@solana/promises": "2.0.0",
+        "@solana/rpc": "2.0.0",
+        "@solana/rpc-subscriptions": "2.0.0",
+        "@solana/rpc-types": "2.0.0",
+        "@solana/transaction-messages": "2.0.0",
+        "@solana/transactions": "2.0.0"
       },
       "engines": {
         "node": ">=20.18.0"
       },
       "peerDependencies": {
-        "typescript": ">=5.3.3"
+        "typescript": ">=5"
       }
     },
-    "node_modules/@solana/wallet-adapter-base": {
-      "version": "0.9.27",
-      "resolved": "https://registry.npmjs.org/@solana/wallet-adapter-base/-/wallet-adapter-base-0.9.27.tgz",
-      "integrity": "sha512-kXjeNfNFVs/NE9GPmysBRKQ/nf+foSaq3kfVSeMcO/iVgigyRmB551OjU3WyAolLG/1jeEfKLqF9fKwMCRkUqg==",
-      "license": "Apache-2.0",
+    "node_modules/@solana/web3.js/node_modules/@solana/transaction-messages": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/transaction-messages/-/transaction-messages-2.0.0.tgz",
+      "integrity": "sha512-Uc6Fw1EJLBrmgS1lH2ZfLAAKFvprWPQQzOVwZS78Pv8Whsk7tweYTK6S0Upv0nHr50rGpnORJfmdBrXE6OfNGg==",
+      "license": "MIT",
       "dependencies": {
-        "@solana/wallet-standard-features": "^1.3.0",
-        "@wallet-standard/base": "^1.1.0",
-        "@wallet-standard/features": "^1.1.0",
-        "eventemitter3": "^5.0.1"
+        "@solana/addresses": "2.0.0",
+        "@solana/codecs-core": "2.0.0",
+        "@solana/codecs-data-structures": "2.0.0",
+        "@solana/codecs-numbers": "2.0.0",
+        "@solana/errors": "2.0.0",
+        "@solana/functional": "2.0.0",
+        "@solana/instructions": "2.0.0",
+        "@solana/rpc-types": "2.0.0"
       },
       "engines": {
-        "node": ">=20"
+        "node": ">=20.18.0"
       },
       "peerDependencies": {
-        "@solana/web3.js": "^1.98.0"
+        "typescript": ">=5"
       }
     },
-    "node_modules/@solana/wallet-standard-features": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@solana/wallet-standard-features/-/wallet-standard-features-1.3.0.tgz",
-      "integrity": "sha512-ZhpZtD+4VArf6RPitsVExvgkF+nGghd1rzPjd97GmBximpnt1rsUxMOEyoIEuH3XBxPyNB6Us7ha7RHWQR+abg==",
-      "license": "Apache-2.0",
+    "node_modules/@solana/web3.js/node_modules/@solana/transactions": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@solana/transactions/-/transactions-2.0.0.tgz",
+      "integrity": "sha512-VfdTE+59WKvuBG//6iE9RPjAB+ZT2kLgY2CDHabaz6RkH6OjOkMez9fWPVa3Xtcus+YQWN1SnQoryjF/xSx04w==",
+      "license": "MIT",
       "dependencies": {
-        "@wallet-standard/base": "^1.1.0",
-        "@wallet-standard/features": "^1.1.0"
+        "@solana/addresses": "2.0.0",
+        "@solana/codecs-core": "2.0.0",
+        "@solana/codecs-data-structures": "2.0.0",
+        "@solana/codecs-numbers": "2.0.0",
+        "@solana/codecs-strings": "2.0.0",
+        "@solana/errors": "2.0.0",
+        "@solana/functional": "2.0.0",
+        "@solana/instructions": "2.0.0",
+        "@solana/keys": "2.0.0",
+        "@solana/rpc-types": "2.0.0",
+        "@solana/transaction-messages": "2.0.0"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=20.18.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=5"
       }
     },
-    "node_modules/@solana/web3.js": {
-      "version": "1.98.4",
-      "resolved": "https://registry.npmjs.org/@solana/web3.js/-/web3.js-1.98.4.tgz",
-      "integrity": "sha512-vv9lfnvjUsRiq//+j5pBdXig0IQdtzA0BRZ3bXEP4KaIyF1CcaydWqgyzQgfZMNIsWNWmG+AUHwPy4AHOD6gpw==",
+    "node_modules/@solana/web3.js/node_modules/commander": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
       "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.25.0",
-        "@noble/curves": "^1.4.2",
-        "@noble/hashes": "^1.4.0",
-        "@solana/buffer-layout": "^4.0.1",
-        "@solana/codecs-numbers": "^2.1.0",
-        "agentkeepalive": "^4.5.0",
-        "bn.js": "^5.2.1",
-        "borsh": "^0.7.0",
-        "bs58": "^4.0.1",
-        "buffer": "6.0.3",
-        "fast-stable-stringify": "^1.0.0",
-        "jayson": "^4.1.1",
-        "node-fetch": "^2.7.0",
-        "rpc-websockets": "^9.0.2",
-        "superstruct": "^2.0.2"
+      "engines": {
+        "node": ">=18"
       }
     },
-    "node_modules/@solana/web3.js/node_modules/borsh": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/borsh/-/borsh-0.7.0.tgz",
-      "integrity": "sha512-CLCsZGIBCFnPtkNnieW/a8wmreDmfUtjU2m9yHrzPXIlNbqVs0AQrSatSG6vdNYUqdc83tkQi2eHfF98ubzQLA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "bn.js": "^5.2.0",
-        "bs58": "^4.0.0",
-        "text-encoding-utf-8": "^1.0.2"
-      }
+    "node_modules/@solana/web3.js/node_modules/undici-types": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.23.0.tgz",
+      "integrity": "sha512-HN7GeXgBUs1StmY/vf9hIH11LrNI5SfqmFVtxKyp9Dhuf1P1cDSRlS+H1NJDaGOWzlI08q+NmiHgu11Vx6QnhA==",
+      "license": "MIT"
     },
     "node_modules/@stablelib/aead": {
       "version": "1.0.1",
@@ -4940,50 +5597,21 @@
       "license": "Apache-2.0"
     },
     "node_modules/@stellar/stellar-base": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@stellar/stellar-base/-/stellar-base-14.0.3.tgz",
-      "integrity": "sha512-mBxNArxWq4wKNJATPJpXB2vIRQ3vUzIvjMCloSsGbfKRrSy96ie8yy7DWh9vSOHV6tNwe85hd3v+p/shlyosqA==",
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/@stellar/stellar-base/-/stellar-base-12.1.1.tgz",
+      "integrity": "sha512-gOBSOFDepihslcInlqnxKZdIW9dMUO1tpOm3AtJR33K2OvpXG6SaVHCzAmCFArcCqI9zXTEiSoh70T48TmiHJA==",
       "license": "Apache-2.0",
       "peer": true,
       "dependencies": {
-        "@noble/curves": "^1.9.6",
         "@stellar/js-xdr": "^3.1.2",
         "base32.js": "^0.1.0",
-        "bignumber.js": "^9.3.1",
+        "bignumber.js": "^9.1.2",
         "buffer": "^6.0.3",
-        "sha.js": "^2.4.12"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@stellar/stellar-base/node_modules/@noble/curves": {
-      "version": "1.9.7",
-      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.9.7.tgz",
-      "integrity": "sha512-gbKGcRUYIjA3/zCCNaWDciTMFI0dCkvou3TL8Zmy5Nc7sJ47a0jtOeZoTaMxkuqRo9cRhjOdZJXegxYE5FN/xw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@noble/hashes": "1.8.0"
-      },
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@stellar/stellar-base/node_modules/@noble/hashes": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
-      "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": "^14.21.3 || >=16"
+        "sha.js": "^2.3.6",
+        "tweetnacl": "^1.0.3"
       },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
+      "optionalDependencies": {
+        "sodium-native": "^4.1.1"
       }
     },
     "node_modules/@stellar/stellar-sdk": {
@@ -5034,6 +5662,32 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.36.1",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.36.1.tgz",
+      "integrity": "sha512-f4Jg3Fof/Vru5ioix/UO4GX+sdDsF9wQo47FbtvG+utIYYVQ/QVAC0QYgcBbAjQGfbdOh2CCf0BgiFOF9Ixtjw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.36.1",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.36.1.tgz",
+      "integrity": "sha512-/8nOXeNeMoze9xY/QyEKG65wuvRhkT3q9aytaur6Gj8bYU2A98YVJyLc9MRmc5nVvpy+bRlrrwK/Ykr8WGyUWg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tabler/icons": ""
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.1.17",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.17.tgz",
@@ -5290,6 +5944,39 @@
         "tailwindcss": "4.1.17"
       }
     },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
+      "integrity": "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/table-core": "8.21.3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
+      "integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tiptap/core": {
       "version": "3.12.1",
       "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.12.1.tgz",
@@ -5738,36 +6425,23 @@
       }
     },
     "node_modules/@trezor/analytics": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/@trezor/analytics/-/analytics-1.4.3.tgz",
-      "integrity": "sha512-0o7gp7nfip8yjhAwP3R/Hcy5S8RfmZmYwpCcN0PbydWa5U5VMQ+T/iB/OpbpeV+8j13bf6i7++38nTCUNas0GA==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@trezor/analytics/-/analytics-1.5.0.tgz",
+      "integrity": "sha512-evILW5XJEmfPlf0TY1duOLtGJ47pdGeSKVE3P75ODEUsRNxtPVqlkOUBPmYpCxPnzS8XDmkatT8lf9/DF0G6nA==",
       "license": "See LICENSE.md in repo root",
       "peer": true,
       "dependencies": {
-        "@trezor/env-utils": "1.4.3",
-        "@trezor/utils": "9.4.3"
-      },
-      "peerDependencies": {
-        "tslib": "^2.6.2"
-      }
-    },
-    "node_modules/@trezor/analytics/node_modules/@trezor/utils": {
-      "version": "9.4.3",
-      "resolved": "https://registry.npmjs.org/@trezor/utils/-/utils-9.4.3.tgz",
-      "integrity": "sha512-QkLHpGTF3W3wNGj6OCdcMog7MhAAdlUmpjjmMjMqE0JSoi1Yjr0m7k7xN0iIHSqcgrhYteZDeJZAGlAf/b7gqw==",
-      "license": "SEE LICENSE IN LICENSE.md",
-      "peer": true,
-      "dependencies": {
-        "bignumber.js": "^9.3.1"
+        "@trezor/env-utils": "1.5.0",
+        "@trezor/utils": "9.5.0"
       },
       "peerDependencies": {
         "tslib": "^2.6.2"
       }
     },
     "node_modules/@trezor/blockchain-link": {
-      "version": "2.5.4",
-      "resolved": "https://registry.npmjs.org/@trezor/blockchain-link/-/blockchain-link-2.5.4.tgz",
-      "integrity": "sha512-3Xki/2Vmr1/rKa5LF+Eb2/Qd5N9LqwyRL76+ycqe1KwqV7xK3XGMsqTH9FUUReRvGxrzAFonbOgADAJczhx81w==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/@trezor/blockchain-link/-/blockchain-link-2.6.1.tgz",
+      "integrity": "sha512-SPwxkihOMI0o79BOy0RkfgVL2meuJhIe1yWHCeR8uoqf5KGblUyeXxvNCy6w8ckJ9LRpM1+bZhsUODuNs3083Q==",
       "license": "SEE LICENSE IN LICENSE.md",
       "peer": true,
       "dependencies": {
@@ -5777,64 +6451,174 @@
         "@solana-program/token-2022": "^0.4.2",
         "@solana/kit": "^2.3.0",
         "@solana/rpc-types": "^2.3.0",
-        "@stellar/stellar-sdk": "^13.3.0",
-        "@trezor/blockchain-link-types": "1.4.4",
-        "@trezor/blockchain-link-utils": "1.4.4",
-        "@trezor/env-utils": "1.4.3",
-        "@trezor/utils": "9.4.4",
-        "@trezor/utxo-lib": "2.4.4",
-        "@trezor/websocket-client": "1.2.4",
+        "@stellar/stellar-sdk": "14.2.0",
+        "@trezor/blockchain-link-types": "1.5.0",
+        "@trezor/blockchain-link-utils": "1.5.1",
+        "@trezor/env-utils": "1.5.0",
+        "@trezor/utils": "9.5.0",
+        "@trezor/utxo-lib": "2.5.0",
+        "@trezor/websocket-client": "1.3.0",
         "@types/web": "^0.0.197",
         "crypto-browserify": "3.12.0",
         "socks-proxy-agent": "8.0.5",
         "stream-browserify": "^3.0.0",
-        "xrpl": "^4.4.0"
+        "xrpl": "4.4.3"
       },
       "peerDependencies": {
         "tslib": "^2.6.2"
       }
     },
     "node_modules/@trezor/blockchain-link-types": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/@trezor/blockchain-link-types/-/blockchain-link-types-1.4.4.tgz",
-      "integrity": "sha512-B38LH4aniZ7gKbpSdMRiA4YriauoYPHgjhKEd+ybR0ca+liNlPAvMwSHJyMhL1eDIYEs16oOjTgT53WjRRZbMg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@trezor/blockchain-link-types/-/blockchain-link-types-1.5.0.tgz",
+      "integrity": "sha512-wD6FKKxNr89MTWYL+NikRkBcWXhiWNFR0AuDHW6GHmlCEHhKu/hAvQtcER8X5jt/Wd0hSKNZqtHBXJ1ZkpJ6rg==",
       "license": "See LICENSE.md in repo root",
       "peer": true,
       "dependencies": {
-        "@trezor/utils": "9.4.4",
-        "@trezor/utxo-lib": "2.4.4"
+        "@trezor/utils": "9.5.0",
+        "@trezor/utxo-lib": "2.5.0"
       },
       "peerDependencies": {
         "tslib": "^2.6.2"
       }
     },
     "node_modules/@trezor/blockchain-link-utils": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/@trezor/blockchain-link-utils/-/blockchain-link-utils-1.4.4.tgz",
-      "integrity": "sha512-8BZD6h5gs3ETPOG2Ri+GOyH44D38YQVeQj8n7oVOVQi21zx93JOpdL3fWS9RytkfmvB84WwVzYoHGlTs3T80Gw==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@trezor/blockchain-link-utils/-/blockchain-link-utils-1.5.1.tgz",
+      "integrity": "sha512-2tDGLEj5jzydjsJQONGTWVmCDDy6FTZ4ytr1/2gE6anyYEJU8MbaR+liTt3UvcP5jwZTNutwYLvZixRfrb8JpA==",
       "license": "See LICENSE.md in repo root",
       "peer": true,
       "dependencies": {
-        "@mobily/ts-belt": "^3.13.1",
-        "@stellar/stellar-sdk": "^13.3.0",
-        "@trezor/env-utils": "1.4.3",
-        "@trezor/protobuf": "1.4.4",
-        "@trezor/utils": "9.4.4",
-        "xrpl": "^4.4.0"
+        "@mobily/ts-belt": "^3.13.1",
+        "@stellar/stellar-sdk": "14.2.0",
+        "@trezor/env-utils": "1.5.0",
+        "@trezor/protobuf": "1.5.1",
+        "@trezor/utils": "9.5.0",
+        "xrpl": "4.4.3"
+      },
+      "peerDependencies": {
+        "tslib": "^2.6.2"
+      }
+    },
+    "node_modules/@trezor/blockchain-link-utils/node_modules/@noble/curves": {
+      "version": "1.9.7",
+      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.9.7.tgz",
+      "integrity": "sha512-gbKGcRUYIjA3/zCCNaWDciTMFI0dCkvou3TL8Zmy5Nc7sJ47a0jtOeZoTaMxkuqRo9cRhjOdZJXegxYE5FN/xw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@noble/hashes": "1.8.0"
+      },
+      "engines": {
+        "node": "^14.21.3 || >=16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@trezor/blockchain-link-utils/node_modules/@stellar/stellar-base": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@stellar/stellar-base/-/stellar-base-14.0.4.tgz",
+      "integrity": "sha512-UbNW6zbdOBXJwLAV2mMak0bIC9nw3IZVlQXkv2w2dk1jgCbJjy3oRVC943zeGE5JAm0Z9PHxrIjmkpGhayY7kw==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@noble/curves": "^1.9.6",
+        "@stellar/js-xdr": "^3.1.2",
+        "base32.js": "^0.1.0",
+        "bignumber.js": "^9.3.1",
+        "buffer": "^6.0.3",
+        "sha.js": "^2.4.12"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@trezor/blockchain-link-utils/node_modules/@stellar/stellar-sdk": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/@stellar/stellar-sdk/-/stellar-sdk-14.2.0.tgz",
+      "integrity": "sha512-7nh2ogzLRMhfkIC0fGjn1LHUzk3jqVw8tjAuTt5ADWfL9CSGBL18ILucE9igz2L/RU2AZgeAvhujAnW91Ut/oQ==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@stellar/stellar-base": "^14.0.1",
+        "axios": "^1.12.2",
+        "bignumber.js": "^9.3.1",
+        "eventsource": "^2.0.2",
+        "feaxios": "^0.0.23",
+        "randombytes": "^2.1.0",
+        "toml": "^3.0.0",
+        "urijs": "^1.19.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@trezor/blockchain-link/node_modules/@noble/curves": {
+      "version": "1.9.7",
+      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.9.7.tgz",
+      "integrity": "sha512-gbKGcRUYIjA3/zCCNaWDciTMFI0dCkvou3TL8Zmy5Nc7sJ47a0jtOeZoTaMxkuqRo9cRhjOdZJXegxYE5FN/xw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@noble/hashes": "1.8.0"
+      },
+      "engines": {
+        "node": "^14.21.3 || >=16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@trezor/blockchain-link/node_modules/@stellar/stellar-base": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@stellar/stellar-base/-/stellar-base-14.0.4.tgz",
+      "integrity": "sha512-UbNW6zbdOBXJwLAV2mMak0bIC9nw3IZVlQXkv2w2dk1jgCbJjy3oRVC943zeGE5JAm0Z9PHxrIjmkpGhayY7kw==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@noble/curves": "^1.9.6",
+        "@stellar/js-xdr": "^3.1.2",
+        "base32.js": "^0.1.0",
+        "bignumber.js": "^9.3.1",
+        "buffer": "^6.0.3",
+        "sha.js": "^2.4.12"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@trezor/blockchain-link/node_modules/@stellar/stellar-sdk": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/@stellar/stellar-sdk/-/stellar-sdk-14.2.0.tgz",
+      "integrity": "sha512-7nh2ogzLRMhfkIC0fGjn1LHUzk3jqVw8tjAuTt5ADWfL9CSGBL18ILucE9igz2L/RU2AZgeAvhujAnW91Ut/oQ==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@stellar/stellar-base": "^14.0.1",
+        "axios": "^1.12.2",
+        "bignumber.js": "^9.3.1",
+        "eventsource": "^2.0.2",
+        "feaxios": "^0.0.23",
+        "randombytes": "^2.1.0",
+        "toml": "^3.0.0",
+        "urijs": "^1.19.1"
       },
-      "peerDependencies": {
-        "tslib": "^2.6.2"
+      "engines": {
+        "node": ">=20.0.0"
       }
     },
     "node_modules/@trezor/connect": {
-      "version": "9.6.4",
-      "resolved": "https://registry.npmjs.org/@trezor/connect/-/connect-9.6.4.tgz",
-      "integrity": "sha512-/N3hhOFIIhufvihCx92wvxd15Wy9XAJOSbTiV8rYG2N9uBvzejctNO2+LpwCRl/cBKle9rsp4S7C/zz++iDuOg==",
+      "version": "9.7.1",
+      "resolved": "https://registry.npmjs.org/@trezor/connect/-/connect-9.7.1.tgz",
+      "integrity": "sha512-W2ym0bs4FVmXByEr9gANBp+bRErzNcmqqqYzSJLOVkawxikqYXag2aCpdiXU3LlZbFbhFhIsT/fpDLfwiLRySA==",
       "license": "SEE LICENSE IN LICENSE.md",
       "peer": true,
       "dependencies": {
-        "@ethereumjs/common": "^10.0.0",
-        "@ethereumjs/tx": "^10.0.0",
+        "@ethereumjs/common": "^10.1.0",
+        "@ethereumjs/tx": "^10.1.0",
         "@fivebinaries/coin-selection": "3.0.0",
         "@mobily/ts-belt": "^3.13.1",
         "@noble/hashes": "^1.6.1",
@@ -5844,21 +6628,22 @@
         "@solana-program/token": "^0.5.1",
         "@solana-program/token-2022": "^0.4.2",
         "@solana/kit": "^2.3.0",
-        "@trezor/blockchain-link": "2.5.4",
-        "@trezor/blockchain-link-types": "1.4.4",
-        "@trezor/blockchain-link-utils": "1.4.4",
-        "@trezor/connect-analytics": "1.3.6",
-        "@trezor/connect-common": "0.4.4",
-        "@trezor/crypto-utils": "1.1.5",
-        "@trezor/device-utils": "1.1.4",
-        "@trezor/env-utils": "^1.4.3",
-        "@trezor/protobuf": "1.4.4",
-        "@trezor/protocol": "1.2.10",
-        "@trezor/schema-utils": "1.3.4",
-        "@trezor/transport": "1.5.4",
-        "@trezor/type-utils": "1.1.9",
-        "@trezor/utils": "9.4.4",
-        "@trezor/utxo-lib": "2.4.4",
+        "@trezor/blockchain-link": "2.6.1",
+        "@trezor/blockchain-link-types": "1.5.0",
+        "@trezor/blockchain-link-utils": "1.5.1",
+        "@trezor/connect-analytics": "1.4.0",
+        "@trezor/connect-common": "0.5.0",
+        "@trezor/crypto-utils": "1.2.0",
+        "@trezor/device-authenticity": "1.1.1",
+        "@trezor/device-utils": "1.2.0",
+        "@trezor/env-utils": "^1.5.0",
+        "@trezor/protobuf": "1.5.1",
+        "@trezor/protocol": "1.3.0",
+        "@trezor/schema-utils": "1.4.0",
+        "@trezor/transport": "1.6.1",
+        "@trezor/type-utils": "1.2.0",
+        "@trezor/utils": "9.5.0",
+        "@trezor/utxo-lib": "2.5.0",
         "blakejs": "^1.2.1",
         "bs58": "^6.0.0",
         "bs58check": "^4.0.0",
@@ -5871,231 +6656,265 @@
       }
     },
     "node_modules/@trezor/connect-analytics": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/@trezor/connect-analytics/-/connect-analytics-1.3.6.tgz",
-      "integrity": "sha512-Skya46inItcjaahaqpeSsQmB2Xle70f/l+6eTTJYxKQdpMtuW5LRsRRiyMAQTp5RBycL2ngnsVtY+/83Bt5lUw==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@trezor/connect-analytics/-/connect-analytics-1.4.0.tgz",
+      "integrity": "sha512-hy2J2oeIhRC/e1bOWXo5dsVMVnDwO2UKnxhR6FD8PINR3jgM6PWAXc6k33WJsBcyiTzwMP7/xPysLcgNJH5o4w==",
       "license": "See LICENSE.md in repo root",
       "peer": true,
       "dependencies": {
-        "@trezor/analytics": "1.4.3"
+        "@trezor/analytics": "1.5.0"
       },
       "peerDependencies": {
         "tslib": "^2.6.2"
       }
     },
     "node_modules/@trezor/connect-common": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/@trezor/connect-common/-/connect-common-0.4.4.tgz",
-      "integrity": "sha512-xG2CoPjgcldtO6HU0ZjNCvFdQ4hpl56qzU1VEF1/A1BL2zj2TwLGLmyr4E878go1mmfksNGY5a1tqnzAZ7pRLw==",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@trezor/connect-common/-/connect-common-0.5.0.tgz",
+      "integrity": "sha512-WE71iaFcWmfQxDCiTUNynj2DccRgUiLBJ+g3nrqCBJqEYzu+cD6eZ5k/OLtZ3hfh5gyB5EQwXdGvRT07iNdxAA==",
       "license": "SEE LICENSE IN LICENSE.md",
       "peer": true,
       "dependencies": {
-        "@trezor/env-utils": "1.4.3",
-        "@trezor/type-utils": "1.1.9",
-        "@trezor/utils": "9.4.4"
+        "@trezor/env-utils": "1.5.0",
+        "@trezor/type-utils": "1.2.0",
+        "@trezor/utils": "9.5.0"
       },
       "peerDependencies": {
         "tslib": "^2.6.2"
       }
     },
-    "node_modules/@trezor/connect-plugin-stellar": {
-      "version": "9.2.1",
-      "resolved": "https://registry.npmjs.org/@trezor/connect-plugin-stellar/-/connect-plugin-stellar-9.2.1.tgz",
-      "integrity": "sha512-Orz5gFZzYFZs1+cTsgg8fz/VWFjhl7pqMCqD5DVNZpXW+wrjwBaRbcGJZ+ibkPKU3AlM7Uv3SVD/pjaQmAkZ2Q==",
+    "node_modules/@trezor/connect-web": {
+      "version": "9.4.7",
+      "resolved": "https://registry.npmjs.org/@trezor/connect-web/-/connect-web-9.4.7.tgz",
+      "integrity": "sha512-mICiGnw1xt60LbELZd2OId+nXGG/NAiywQIXGp5rOY6116I/sqJMw4fuKQrkGJ5zpKzzX/G7Be9GcshICD1ZDg==",
+      "deprecated": "This version is no longer supported",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "@trezor/utils": "9.4.1"
+        "@trezor/connect": "9.4.7",
+        "@trezor/connect-common": "0.2.7",
+        "@trezor/utils": "9.2.6"
       },
       "peerDependencies": {
-        "@stellar/stellar-sdk": "^13.3.0",
-        "@trezor/connect": "9.x.x",
         "tslib": "^2.6.2"
       }
     },
-    "node_modules/@trezor/connect-plugin-stellar/node_modules/@trezor/utils": {
-      "version": "9.4.1",
-      "resolved": "https://registry.npmjs.org/@trezor/utils/-/utils-9.4.1.tgz",
-      "integrity": "sha512-9MYNa99tzXiTBnKadABoY2D80YL9Mh3ntM5wziwVhjZ4HyhqFH6BsCxwFpWYLUIKBctD55QEdE4bASoqp7Ad1A==",
-      "license": "SEE LICENSE IN LICENSE.md",
+    "node_modules/@trezor/connect-web/node_modules/@emurgo/cardano-serialization-lib-browser": {
+      "version": "11.5.0",
+      "resolved": "https://registry.npmjs.org/@emurgo/cardano-serialization-lib-browser/-/cardano-serialization-lib-browser-11.5.0.tgz",
+      "integrity": "sha512-qchOJ9NYDUz10tzs5r5QhP9hK0p+ZOlRiBwPdTAxqAYLw/8emYBkQQLaS8T1DF6EkeudyrgS00ym5Trw1fo4iA==",
+      "license": "MIT"
+    },
+    "node_modules/@trezor/connect-web/node_modules/@emurgo/cardano-serialization-lib-nodejs": {
+      "version": "11.5.0",
+      "resolved": "https://registry.npmjs.org/@emurgo/cardano-serialization-lib-nodejs/-/cardano-serialization-lib-nodejs-11.5.0.tgz",
+      "integrity": "sha512-IlVABlRgo9XaTR1NunwZpWcxnfEv04ba2l1vkUz4S1W7Jt36F4CtffP+jPeqBZGnAe+fnUwo0XjIJC3ZTNToNQ==",
+      "license": "MIT"
+    },
+    "node_modules/@trezor/connect-web/node_modules/@ethereumjs/common": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@ethereumjs/common/-/common-4.4.0.tgz",
+      "integrity": "sha512-Fy5hMqF6GsE6DpYTyqdDIJPJgUtDn4dL120zKw+Pswuo+iLyBsEYuSyzMw6NVzD2vDzcBG9fE4+qX4X2bPc97w==",
+      "license": "MIT",
+      "dependencies": {
+        "@ethereumjs/util": "^9.1.0"
+      }
+    },
+    "node_modules/@trezor/connect-web/node_modules/@ethereumjs/rlp": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@ethereumjs/rlp/-/rlp-5.0.2.tgz",
+      "integrity": "sha512-DziebCdg4JpGlEqEdGgXmjqcFoJi+JGulUXwEjsZGAscAQ7MyD/7LE/GVCP29vEQxKc7AAwjT3A2ywHp2xfoCA==",
+      "license": "MPL-2.0",
+      "bin": {
+        "rlp": "bin/rlp.cjs"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@trezor/connect-web/node_modules/@ethereumjs/tx": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@ethereumjs/tx/-/tx-5.4.0.tgz",
+      "integrity": "sha512-SCHnK7m/AouZ7nyoR0MEXw1OO/tQojSbp88t8oxhwes5iZkZCtfFdUrJaiIb72qIpH2FVw6s1k1uP7LXuH7PsA==",
+      "license": "MPL-2.0",
       "dependencies": {
-        "bignumber.js": "^9.3.0"
+        "@ethereumjs/common": "^4.4.0",
+        "@ethereumjs/rlp": "^5.0.2",
+        "@ethereumjs/util": "^9.1.0",
+        "ethereum-cryptography": "^2.2.1"
       },
-      "peerDependencies": {
-        "tslib": "^2.6.2"
+      "engines": {
+        "node": ">=18"
       }
     },
-    "node_modules/@trezor/connect-web": {
-      "version": "9.6.2",
-      "resolved": "https://registry.npmjs.org/@trezor/connect-web/-/connect-web-9.6.2.tgz",
-      "integrity": "sha512-QGuCjX8Bx9aCq1Pg52KifbbzYn00FQu9mCTDSgCVGH/HAzbxhcRkDKc86kFwW8z9NdJxw+XeVJq5Ky/js3iEDA==",
-      "license": "SEE LICENSE IN LICENSE.md",
+    "node_modules/@trezor/connect-web/node_modules/@ethereumjs/util": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/@ethereumjs/util/-/util-9.1.0.tgz",
+      "integrity": "sha512-XBEKsYqLGXLah9PNJbgdkigthkG7TAGvlD/sH12beMXEyHDyigfcbdvHhmLyDWgDyOJn4QwiQUaF7yeuhnjdog==",
+      "license": "MPL-2.0",
       "dependencies": {
-        "@trezor/connect": "9.6.2",
-        "@trezor/connect-common": "0.4.2",
-        "@trezor/utils": "9.4.2",
-        "@trezor/websocket-client": "1.2.2"
+        "@ethereumjs/rlp": "^5.0.2",
+        "ethereum-cryptography": "^2.2.1"
       },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@trezor/connect-web/node_modules/@fivebinaries/coin-selection": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@fivebinaries/coin-selection/-/coin-selection-2.2.1.tgz",
+      "integrity": "sha512-iYFsYr7RY7TEvTqP9NKR4p/yf3Iybf9abUDR7lRjzanGsrLwVsREvIuyE05iRYFrvqarlk+gWRPsdR1N2hUBrg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@emurgo/cardano-serialization-lib-browser": "^11.5.0",
+        "@emurgo/cardano-serialization-lib-nodejs": "11.5.0"
+      }
+    },
+    "node_modules/@trezor/connect-web/node_modules/@solana-program/token": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@solana-program/token/-/token-0.4.1.tgz",
+      "integrity": "sha512-eSYmjsapzE9jXT2J9xydlMj/zsangMEIZAy9dy75VCXM6kgDCSnH5R7+HsIoKOTvb2VggU7GojC+YhMwWGCIBw==",
+      "license": "Apache-2.0",
       "peerDependencies": {
-        "tslib": "^2.6.2"
+        "@solana/web3.js": "^2.0.0"
       }
     },
     "node_modules/@trezor/connect-web/node_modules/@trezor/analytics": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@trezor/analytics/-/analytics-1.4.2.tgz",
-      "integrity": "sha512-FgjJekuDvx1TjiDemvpnPiRck7Kp/v1ZeppsBYpQR3yGKyKzbG1pVpcl0RyI2237raXxbORaz7XV8tcyjq4BXg==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@trezor/analytics/-/analytics-1.2.5.tgz",
+      "integrity": "sha512-+6DnjUj1XHD9wHffilPYXIPGmIwPNlYJLlS98FhAv5tOVr9rWvomqtXx2GWwtiv2B3oR/h6oMiYGmS/yjpM2cA==",
       "license": "See LICENSE.md in repo root",
       "dependencies": {
-        "@trezor/env-utils": "1.4.2",
-        "@trezor/utils": "9.4.2"
+        "@trezor/env-utils": "1.2.1",
+        "@trezor/utils": "9.2.5"
+      },
+      "peerDependencies": {
+        "tslib": "^2.6.2"
+      }
+    },
+    "node_modules/@trezor/connect-web/node_modules/@trezor/analytics/node_modules/@trezor/utils": {
+      "version": "9.2.5",
+      "resolved": "https://registry.npmjs.org/@trezor/utils/-/utils-9.2.5.tgz",
+      "integrity": "sha512-FaGKQxwvivcWOa8vK4qQPdyvUm/AcjH0xOKfcvjNfaBhf+TVDzKn2ORKnioQb2Sgjncb8B2ubqrUI3MIc+RKKw==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "bignumber.js": "^9.1.2"
       },
       "peerDependencies": {
         "tslib": "^2.6.2"
       }
     },
     "node_modules/@trezor/connect-web/node_modules/@trezor/blockchain-link": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/@trezor/blockchain-link/-/blockchain-link-2.5.2.tgz",
-      "integrity": "sha512-/egUnIt/fR57QY33ejnkPMhZwRvVRS/pUCoqdVIGitN1Q7QZsdopoR4hw37hdK/Ux/q1ZLH6LZz7U2UFahjppw==",
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/@trezor/blockchain-link/-/blockchain-link-2.3.6.tgz",
+      "integrity": "sha512-cuqGJr5d5iTwGNbTAKDskE+m7yL/4RQsagNwA64793tli1fDWeeGT/B2mCvFwpUmIo9dVFDkYb++ZiltUIGZ3w==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "@solana-program/stake": "^0.2.1",
-        "@solana-program/token": "^0.5.1",
-        "@solana-program/token-2022": "^0.4.2",
-        "@solana/kit": "^2.1.1",
-        "@solana/rpc-types": "^2.1.1",
-        "@stellar/stellar-sdk": "^13.3.0",
-        "@trezor/blockchain-link-types": "1.4.2",
-        "@trezor/blockchain-link-utils": "1.4.2",
-        "@trezor/env-utils": "1.4.2",
-        "@trezor/utils": "9.4.2",
-        "@trezor/utxo-lib": "2.4.2",
-        "@trezor/websocket-client": "1.2.2",
-        "@types/web": "^0.0.197",
+        "@solana-program/token": "^0.4.1",
+        "@solana/web3.js": "^2.0.0",
+        "@trezor/blockchain-link-types": "1.2.5",
+        "@trezor/blockchain-link-utils": "1.2.6",
+        "@trezor/env-utils": "1.2.1",
+        "@trezor/utils": "9.2.6",
+        "@trezor/utxo-lib": "2.2.6",
+        "@types/web": "^0.0.174",
         "events": "^3.3.0",
-        "socks-proxy-agent": "8.0.5",
-        "xrpl": "^4.3.0"
+        "ripple-lib": "^1.10.1",
+        "socks-proxy-agent": "8.0.4",
+        "ws": "^8.18.0"
       },
       "peerDependencies": {
         "tslib": "^2.6.2"
       }
     },
     "node_modules/@trezor/connect-web/node_modules/@trezor/blockchain-link-types": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@trezor/blockchain-link-types/-/blockchain-link-types-1.4.2.tgz",
-      "integrity": "sha512-KThBmGOFLJAFnmou9ThQhnjEVxfYPfEwMOaVTVNgJ+NAkt5rEMx0SKBBelCGZ63XtOLWdVPglFo83wtm+I9Vpg==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@trezor/blockchain-link-types/-/blockchain-link-types-1.2.5.tgz",
+      "integrity": "sha512-aGxLNGxhQqre4cCYDboy1s1gHAi92tTszLYl3GMhGmtB6EuAl049eO8ngCcMcuOZLTvFYA/1e/3mZoPIMBkeng==",
       "license": "See LICENSE.md in repo root",
       "dependencies": {
-        "@trezor/utxo-lib": "2.4.2"
+        "@solana/web3.js": "^2.0.0",
+        "@trezor/type-utils": "1.1.4",
+        "@trezor/utxo-lib": "2.2.6"
       },
       "peerDependencies": {
         "tslib": "^2.6.2"
       }
     },
     "node_modules/@trezor/connect-web/node_modules/@trezor/blockchain-link-utils": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@trezor/blockchain-link-utils/-/blockchain-link-utils-1.4.2.tgz",
-      "integrity": "sha512-PBEBrdtHn0dn/c9roW6vjdHI/CucMywJm5gthETZAZmzBOtg6ZDpLTn+qL8+jZGIbwcAkItrQ3iHrHhR6xTP5g==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@trezor/blockchain-link-utils/-/blockchain-link-utils-1.2.6.tgz",
+      "integrity": "sha512-6ExuAyKxGH79aZhT3eA6xng9ljYixiE9EBC635BLPc+lafpin2+Aplb0q2zA6f/S5ksl9ges63W627pb7IFgGw==",
       "license": "See LICENSE.md in repo root",
       "dependencies": {
         "@mobily/ts-belt": "^3.13.1",
-        "@stellar/stellar-sdk": "^13.3.0",
-        "@trezor/env-utils": "1.4.2",
-        "@trezor/utils": "9.4.2",
-        "xrpl": "^4.3.0"
+        "@trezor/env-utils": "1.2.1",
+        "@trezor/utils": "9.2.6"
       },
       "peerDependencies": {
         "tslib": "^2.6.2"
       }
     },
     "node_modules/@trezor/connect-web/node_modules/@trezor/connect": {
-      "version": "9.6.2",
-      "resolved": "https://registry.npmjs.org/@trezor/connect/-/connect-9.6.2.tgz",
-      "integrity": "sha512-XsSERBK+KnF6FPsATuhB9AEM0frekVLwAwFo35MRV9I4P+mdv6tnUiZUq8O8aoPbfJwDjtNJSYv+PMsKuRH6rg==",
+      "version": "9.4.7",
+      "resolved": "https://registry.npmjs.org/@trezor/connect/-/connect-9.4.7.tgz",
+      "integrity": "sha512-Ky8AMWxhq0ieOCNgZtaIKTQie5qaQjK3uuv+TriUZXuxDqSoJcD8T50TAEY1Lxo1xl8Yv3wT0m6LQkmBn3T+xQ==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "@ethereumjs/common": "^10.0.0",
-        "@ethereumjs/tx": "^10.0.0",
-        "@fivebinaries/coin-selection": "3.0.0",
-        "@mobily/ts-belt": "^3.13.1",
-        "@noble/hashes": "^1.6.1",
-        "@scure/bip39": "^1.5.1",
-        "@solana-program/compute-budget": "^0.8.0",
-        "@solana-program/system": "^0.7.0",
-        "@solana-program/token": "^0.5.1",
-        "@solana-program/token-2022": "^0.4.2",
-        "@solana/kit": "^2.1.1",
-        "@trezor/blockchain-link": "2.5.2",
-        "@trezor/blockchain-link-types": "1.4.2",
-        "@trezor/blockchain-link-utils": "1.4.2",
-        "@trezor/connect-analytics": "1.3.5",
-        "@trezor/connect-common": "0.4.2",
-        "@trezor/crypto-utils": "1.1.4",
-        "@trezor/device-utils": "1.1.2",
-        "@trezor/env-utils": "^1.4.2",
-        "@trezor/protobuf": "1.4.2",
-        "@trezor/protocol": "1.2.8",
-        "@trezor/schema-utils": "1.3.4",
-        "@trezor/transport": "1.5.2",
-        "@trezor/type-utils": "1.1.8",
-        "@trezor/utils": "9.4.2",
-        "@trezor/utxo-lib": "2.4.2",
+        "@babel/preset-typescript": "^7.24.7",
+        "@ethereumjs/common": "^4.4.0",
+        "@ethereumjs/tx": "^5.4.0",
+        "@fivebinaries/coin-selection": "2.2.1",
+        "@trezor/blockchain-link": "2.3.6",
+        "@trezor/blockchain-link-types": "1.2.5",
+        "@trezor/connect-analytics": "1.2.4",
+        "@trezor/connect-common": "0.2.7",
+        "@trezor/protobuf": "1.2.6",
+        "@trezor/protocol": "1.2.2",
+        "@trezor/schema-utils": "1.2.3",
+        "@trezor/transport": "1.3.7",
+        "@trezor/utils": "9.2.6",
+        "@trezor/utxo-lib": "2.2.6",
         "blakejs": "^1.2.1",
         "bs58": "^6.0.0",
         "bs58check": "^4.0.0",
-        "cross-fetch": "^4.0.0",
-        "jws": "^4.0.0"
+        "cross-fetch": "^4.0.0"
       },
       "peerDependencies": {
         "tslib": "^2.6.2"
       }
     },
     "node_modules/@trezor/connect-web/node_modules/@trezor/connect-analytics": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/@trezor/connect-analytics/-/connect-analytics-1.3.5.tgz",
-      "integrity": "sha512-Aoi+EITpZZycnELQJEp9XV0mHFfaCQ6JE0Ka5mWuHtOny3nJdFLBrih4ipcEXJdJbww6pBxRJB09sJ19cTyacA==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@trezor/connect-analytics/-/connect-analytics-1.2.4.tgz",
+      "integrity": "sha512-x7cbQ/x+THMG6pBttRip9qySDU6SRnTiN0AHUKDLBpUrOV+85fRScxUaX5RddtmG26J96HgNEw7Ydms7tBOlSQ==",
       "license": "See LICENSE.md in repo root",
       "dependencies": {
-        "@trezor/analytics": "1.4.2"
+        "@trezor/analytics": "1.2.5"
       },
       "peerDependencies": {
         "tslib": "^2.6.2"
       }
     },
     "node_modules/@trezor/connect-web/node_modules/@trezor/connect-common": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/@trezor/connect-common/-/connect-common-0.4.2.tgz",
-      "integrity": "sha512-ND5TTjrTPnJdfl8Wlhl9YtFWnY2u6FHM1dsPkNYCmyUKIMoflJ5cLn95Xabl6l1btHERYn3wTUvgEYQG7r8OVQ==",
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@trezor/connect-common/-/connect-common-0.2.7.tgz",
+      "integrity": "sha512-m9gYDY0Elitofs4k3E4uAmzgi2DtJHneb47jQVbjBZSLpzROiV7fz49aDxBnz/oPCJnIVF9Gu2OUQEh2GDeZcA==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "@trezor/env-utils": "1.4.2",
-        "@trezor/utils": "9.4.2"
+        "@trezor/env-utils": "1.2.1",
+        "@trezor/utils": "9.2.6"
       },
       "peerDependencies": {
         "tslib": "^2.6.2"
       }
     },
-    "node_modules/@trezor/connect-web/node_modules/@trezor/crypto-utils": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@trezor/crypto-utils/-/crypto-utils-1.1.4.tgz",
-      "integrity": "sha512-Y6VziniqMPoMi70IyowEuXKqRvBYQzgPAekJaUZTHhR+grtYNRKRH2HJCvuZ8MGmSKUFSYfa7y8AvwALA8mQmA==",
-      "license": "SEE LICENSE IN LICENSE.md",
-      "peerDependencies": {
-        "tslib": "^2.6.2"
-      }
-    },
-    "node_modules/@trezor/connect-web/node_modules/@trezor/device-utils": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@trezor/device-utils/-/device-utils-1.1.2.tgz",
-      "integrity": "sha512-R3AJvAo+a3wYVmcGZO2VNl9PZOmDEzCZIlmCJn0BlSRWWd8G9u1qyo/fL9zOwij/YhCaJyokmSHmIEmbY9qpgw==",
-      "license": "See LICENSE.md in repo root"
-    },
     "node_modules/@trezor/connect-web/node_modules/@trezor/env-utils": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@trezor/env-utils/-/env-utils-1.4.2.tgz",
-      "integrity": "sha512-lQvrqcNK5I4dy2MuiLyMuEm0KzY59RIu2GLtc9GsvqyxSPZkADqVzGeLJjXj/vI2ajL8leSpMvmN4zPw3EK8AA==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@trezor/env-utils/-/env-utils-1.2.1.tgz",
+      "integrity": "sha512-ESBV+/AWpfJA6qnHk7BgBYFbhNtUKjPZZzQr1LOUiePwFITbVu421b5BHjTSPFVjpbrWo6Ob0IG7u8saJi0G5A==",
       "license": "See LICENSE.md in repo root",
       "dependencies": {
-        "ua-parser-js": "^2.0.4"
+        "ua-parser-js": "^1.0.37"
       },
       "peerDependencies": {
         "expo-constants": "*",
@@ -6116,13 +6935,12 @@
       }
     },
     "node_modules/@trezor/connect-web/node_modules/@trezor/protobuf": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@trezor/protobuf/-/protobuf-1.4.2.tgz",
-      "integrity": "sha512-AeIYKCgKcE9cWflggGL8T9gD+IZLSGrwkzqCk3wpIiODd5dUCgEgA4OPBufR6OMu3RWu/Tgu2xviHunijG3LXQ==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@trezor/protobuf/-/protobuf-1.2.6.tgz",
+      "integrity": "sha512-QN/1T0/NgZk3r5FVGtMVL41Q3UaUdjFsE4LSxWvzreLp9T5jsHp5bL0wT6TCkocNqmKK3ijH2Ro/Dh8VOSZDbQ==",
       "license": "See LICENSE.md in repo root",
       "dependencies": {
-        "@trezor/schema-utils": "1.3.4",
-        "long": "5.2.5",
+        "@trezor/schema-utils": "1.2.3",
         "protobufjs": "7.4.0"
       },
       "peerDependencies": {
@@ -6130,69 +6948,83 @@
       }
     },
     "node_modules/@trezor/connect-web/node_modules/@trezor/protocol": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@trezor/protocol/-/protocol-1.2.8.tgz",
-      "integrity": "sha512-8EH+EU4Z1j9X4Ljczjbl9G7vVgcUz41qXcdE+6FOG3BFvMDK4KUVvaOtWqD+1dFpeo5yvWSTEKdhgXMPFprWYQ==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@trezor/protocol/-/protocol-1.2.2.tgz",
+      "integrity": "sha512-iXD+Wqpk0FpwJpQbAFKw+8AL6ipfDjQ7g+MYZ7lU1H7/gCxM2XqLI4eW7Il+FAwk7orepDuoSbJSVcsNJYKjOA==",
+      "license": "See LICENSE.md in repo root",
+      "peerDependencies": {
+        "tslib": "^2.6.2"
+      }
+    },
+    "node_modules/@trezor/connect-web/node_modules/@trezor/schema-utils": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@trezor/schema-utils/-/schema-utils-1.2.3.tgz",
+      "integrity": "sha512-+/GmaSTfUf8nEBSSWz/SV0W/0l37YQBfDMygAKXlKMbtXJI03PHqkEF/jQrt+BP2Gh24gjo5GNqCwx7EIlzZug==",
       "license": "See LICENSE.md in repo root",
+      "dependencies": {
+        "@sinclair/typebox": "^0.33.7",
+        "ts-mixer": "^6.0.3"
+      },
       "peerDependencies": {
         "tslib": "^2.6.2"
       }
     },
     "node_modules/@trezor/connect-web/node_modules/@trezor/transport": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/@trezor/transport/-/transport-1.5.2.tgz",
-      "integrity": "sha512-rYP87zdVll2bNBtsD3VxJq0yjaNvIClcgszZjQwVTQxpKGFPkx8bLSpAGI05R9qfxusZJCfYarjX3qki9nHYPw==",
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/@trezor/transport/-/transport-1.3.7.tgz",
+      "integrity": "sha512-pxoPbgaDKUg5ElgyzW+vuQ1YLLX75W/bfAk0V6SdPGqpd3V+6NvJaNQVxAnmL6k3qzHheBFrqyhlkkkEdyuuSQ==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "@trezor/protobuf": "1.4.2",
-        "@trezor/protocol": "1.2.8",
-        "@trezor/type-utils": "1.1.8",
-        "@trezor/utils": "9.4.2",
+        "@trezor/protobuf": "1.2.6",
+        "@trezor/protocol": "1.2.2",
+        "@trezor/utils": "9.2.6",
         "cross-fetch": "^4.0.0",
-        "usb": "^2.15.0"
+        "long": "^4.0.0",
+        "protobufjs": "7.4.0",
+        "usb": "^2.14.0"
       },
       "peerDependencies": {
         "tslib": "^2.6.2"
       }
     },
     "node_modules/@trezor/connect-web/node_modules/@trezor/type-utils": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/@trezor/type-utils/-/type-utils-1.1.8.tgz",
-      "integrity": "sha512-VtvkPXpwtMtTX9caZWYlMMTmhjUeDq4/1LGn0pSdjd4OuL/vQyuPWXCT/0RtlnRraW6R2dZF7rX2UON2kQIMTQ==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@trezor/type-utils/-/type-utils-1.1.4.tgz",
+      "integrity": "sha512-pzrIdskmTZRocHellMZxCDPQ3IpmTr749qn1xdIN29pIKuI4ms0OfNUPk/rfR4Iug0kEiWt+n+Hw7+lIBzc2LA==",
       "license": "See LICENSE.md in repo root"
     },
     "node_modules/@trezor/connect-web/node_modules/@trezor/utils": {
-      "version": "9.4.2",
-      "resolved": "https://registry.npmjs.org/@trezor/utils/-/utils-9.4.2.tgz",
-      "integrity": "sha512-Fm3m2gmfXsgv4chqn5HX8e8dElEr2ibBJSJ7HE3bsHh/1OSQcDdzsSioAK04Fo9ws/v7n6lt+QBZ6fGmwyIkZQ==",
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/@trezor/utils/-/utils-9.2.6.tgz",
+      "integrity": "sha512-8kJYRcOm2uD9uAzktXFivY9Ctkub39MUQCo0TIFzL01erzSDt5i9f81meIgLANm8cgmg3PPVA6SWyitOKRkKpg==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "bignumber.js": "^9.3.0"
+        "bignumber.js": "^9.1.2"
       },
       "peerDependencies": {
         "tslib": "^2.6.2"
       }
     },
     "node_modules/@trezor/connect-web/node_modules/@trezor/utxo-lib": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/@trezor/utxo-lib/-/utxo-lib-2.4.2.tgz",
-      "integrity": "sha512-dTXfBg/cEKnmHM5CLG5+0qrp6fqOfwxqe8YPACdKeM7g1XJKCGDAuFpDUVeT3lrcUsTh6bEMHM06z4H3gZp5MQ==",
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@trezor/utxo-lib/-/utxo-lib-2.2.6.tgz",
+      "integrity": "sha512-OAwN1d4CXU/7LhczatdL/xKaYcyjxWiURYfG5hOfscTvhaDZ+veFhxo6YHJ2fGGlpZwS+B14JRsmDoXAelIeeA==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "@trezor/utils": "9.4.2",
+        "@trezor/utils": "9.2.6",
         "bchaddrjs": "^0.5.2",
         "bech32": "^2.0.0",
         "bip66": "^2.0.0",
         "bitcoin-ops": "^1.4.1",
         "blake-hash": "^2.0.0",
         "blakejs": "^1.2.1",
-        "bn.js": "^5.2.2",
+        "bn.js": "^5.2.1",
         "bs58": "^6.0.0",
         "bs58check": "^4.0.0",
         "create-hmac": "^1.1.7",
-        "int64-buffer": "^1.1.0",
+        "int64-buffer": "^1.0.1",
         "pushdata-bitcoin": "^1.0.1",
-        "tiny-secp256k1": "^1.1.7",
+        "tiny-secp256k1": "^1.1.6",
         "typeforce": "^1.18.0",
         "varuint-bitcoin": "2.0.0",
         "wif": "^5.0.0"
@@ -6201,72 +7033,93 @@
         "tslib": "^2.6.2"
       }
     },
-    "node_modules/@trezor/connect-web/node_modules/@trezor/websocket-client": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@trezor/websocket-client/-/websocket-client-1.2.2.tgz",
-      "integrity": "sha512-vu9L1V/5yh8LHQCmsGC9scCnihELsVuR5Tri1IvW3CdgTUFFcfjsEgXsFqFME3HlxuUmx6qokw0Gx/o0/hzaSQ==",
-      "license": "SEE LICENSE IN LICENSE.md",
-      "dependencies": {
-        "@trezor/utils": "9.4.2",
-        "ws": "^8.18.0"
-      },
-      "peerDependencies": {
-        "tslib": "^2.6.2"
-      }
+    "node_modules/@trezor/connect-web/node_modules/@types/web": {
+      "version": "0.0.174",
+      "resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.174.tgz",
+      "integrity": "sha512-dT8gX38RUQjy+uruZg49EvloEa2S3gR0z2eRi557eTSFKqUSXkSCWYa0IY9uabX9MZPMGOu+1r8Qn6tsvJ1KnQ==",
+      "license": "Apache-2.0"
     },
-    "node_modules/@trezor/connect-web/node_modules/base-x": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/base-x/-/base-x-5.0.1.tgz",
-      "integrity": "sha512-M7uio8Zt++eg3jPj+rHMfCC+IuygQHHCOU+IYsVtik6FWjuYpVt/+MRKcgsAMHh8mMFAwnB+Bs+mTrFiXjMzKg==",
-      "license": "MIT"
+    "node_modules/@trezor/connect-web/node_modules/long": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==",
+      "license": "Apache-2.0"
     },
-    "node_modules/@trezor/connect-web/node_modules/bs58": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/bs58/-/bs58-6.0.0.tgz",
-      "integrity": "sha512-PD0wEnEYg6ijszw/u8s+iI3H17cTymlrwkKhDhPZq+Sokl3AU4htyBFTjAeNAlCCmg0f53g6ih3jATyCKftTfw==",
+    "node_modules/@trezor/connect-web/node_modules/socks-proxy-agent": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.4.tgz",
+      "integrity": "sha512-GNAq/eg8Udq2x0eNiFkr9gRg5bA7PXEWagQdeRX4cPSG+X/8V38v637gim9bjFptMk1QWsCTr0ttrJEiXbNnRw==",
       "license": "MIT",
       "dependencies": {
-        "base-x": "^5.0.0"
+        "agent-base": "^7.1.1",
+        "debug": "^4.3.4",
+        "socks": "^2.8.3"
+      },
+      "engines": {
+        "node": ">= 14"
       }
     },
-    "node_modules/@trezor/connect/node_modules/base-x": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/base-x/-/base-x-5.0.1.tgz",
-      "integrity": "sha512-M7uio8Zt++eg3jPj+rHMfCC+IuygQHHCOU+IYsVtik6FWjuYpVt/+MRKcgsAMHh8mMFAwnB+Bs+mTrFiXjMzKg==",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/@trezor/connect/node_modules/bs58": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/bs58/-/bs58-6.0.0.tgz",
-      "integrity": "sha512-PD0wEnEYg6ijszw/u8s+iI3H17cTymlrwkKhDhPZq+Sokl3AU4htyBFTjAeNAlCCmg0f53g6ih3jATyCKftTfw==",
+    "node_modules/@trezor/connect-web/node_modules/ua-parser-js": {
+      "version": "1.0.41",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.41.tgz",
+      "integrity": "sha512-LbBDqdIC5s8iROCUjMbW1f5dJQTEFB1+KO9ogbvlb3nm9n4YHa5p4KTvFPWvh2Hs8gZMBuiB1/8+pdfe/tDPug==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
+        }
+      ],
       "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "base-x": "^5.0.0"
+      "bin": {
+        "ua-parser-js": "script/cli.js"
+      },
+      "engines": {
+        "node": "*"
       }
     },
     "node_modules/@trezor/crypto-utils": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@trezor/crypto-utils/-/crypto-utils-1.1.5.tgz",
-      "integrity": "sha512-Bp3L9MvzYy1OhPcNJIPIPu7kAH1lQyI1ZMuGnIo53nLDcU+t7cWO8z8xpyGW1BAnQ9wn+xaqrycLRf76I0TBtA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@trezor/crypto-utils/-/crypto-utils-1.2.0.tgz",
+      "integrity": "sha512-9i1NrfW1IE6JO910ut7xrx4u5LxE++GETbpJhWLj4P5xpuGDDSDLEn/MXaYisls2DpE897aOrGPaa1qyt8V6tw==",
       "license": "SEE LICENSE IN LICENSE.md",
       "peer": true,
       "peerDependencies": {
         "tslib": "^2.6.2"
       }
     },
+    "node_modules/@trezor/device-authenticity": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@trezor/device-authenticity/-/device-authenticity-1.1.1.tgz",
+      "integrity": "sha512-WlYbQgc5l0pWUVP9GkMp+Oj3rVAqMKsWF0HyxujoymNjEB7rLTl2hXs+GFjlz7VnldaSslECc6EBex/eQiNOnA==",
+      "license": "See LICENSE.md in repo root",
+      "peer": true,
+      "dependencies": {
+        "@noble/curves": "^2.0.1",
+        "@trezor/crypto-utils": "1.2.0",
+        "@trezor/protobuf": "1.5.1",
+        "@trezor/schema-utils": "1.4.0",
+        "@trezor/utils": "9.5.0"
+      }
+    },
     "node_modules/@trezor/device-utils": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@trezor/device-utils/-/device-utils-1.1.4.tgz",
-      "integrity": "sha512-hFC0nVnWVFaWx0IfCsoHGvBrh5SKsnTHwrX5pvBotwOw51lzTDMd43CkA7nHRybkhcc2JgX1Qq2UbYdwgEWhPg==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@trezor/device-utils/-/device-utils-1.2.0.tgz",
+      "integrity": "sha512-Aqp7pIooFTx21zRUtTI6i1AS4d9Lrx7cclvksh2nJQF9WJvbzuCXshEGkLoOsHwhQrCl3IXfbGuMdA12yDenPA==",
       "license": "See LICENSE.md in repo root",
       "peer": true
     },
     "node_modules/@trezor/env-utils": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/@trezor/env-utils/-/env-utils-1.4.3.tgz",
-      "integrity": "sha512-sWC828NRNQi5vc9W4M9rHOJDeI9XlsgnzZaML/lHju7WhlZCmSq5BOntZQvD8d1W0fSwLMLdlcBKBr/gQkvFZQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@trezor/env-utils/-/env-utils-1.5.0.tgz",
+      "integrity": "sha512-u1TN7dMQ5Qhpbae08Z4JJmI9fQrbbJ4yj8eIAsuzMQn6vb+Sg9vbntl+IDsZ1G9WeI73uHTLu1wWMmAgiujH8w==",
       "license": "See LICENSE.md in repo root",
       "peer": true,
       "dependencies": {
@@ -6291,13 +7144,13 @@
       }
     },
     "node_modules/@trezor/protobuf": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/@trezor/protobuf/-/protobuf-1.4.4.tgz",
-      "integrity": "sha512-+DwcXkio4qlMkPu6KxnEfhXv5PHTkKh2n6Fo88i5zishUHpYD3NhCS0pouzti8PIPyJE73HQ9MoisG44KQjbtg==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@trezor/protobuf/-/protobuf-1.5.1.tgz",
+      "integrity": "sha512-nAkaCCAqLpErBd+IuKeG5MpbyLR/2RMgCw18TWc80m1Ws/XgQirhHY9Jbk6gLImTXb9GTrxP0+MDSahzd94rSA==",
       "license": "See LICENSE.md in repo root",
       "peer": true,
       "dependencies": {
-        "@trezor/schema-utils": "1.3.4",
+        "@trezor/schema-utils": "1.4.0",
         "long": "5.2.5",
         "protobufjs": "7.4.0"
       },
@@ -6306,9 +7159,9 @@
       }
     },
     "node_modules/@trezor/protocol": {
-      "version": "1.2.10",
-      "resolved": "https://registry.npmjs.org/@trezor/protocol/-/protocol-1.2.10.tgz",
-      "integrity": "sha512-Ek5bHu2s4OAWOaJU5ksd1kcpe/STyLWOtUVTq6Vn4oMT3++qtrjWRQx/aTN/UaTfNoZlKvFXCC/STGlgBv9CKQ==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@trezor/protocol/-/protocol-1.3.0.tgz",
+      "integrity": "sha512-rmrxbDrdgxTouBPbZcSeqU7ba/e5WVT1dxvxxEntHqRdTiDl7d3VK+BErCrlyol8EH5YCqEF3/rXt0crSOfoFw==",
       "license": "See LICENSE.md in repo root",
       "peer": true,
       "peerDependencies": {
@@ -6316,10 +7169,11 @@
       }
     },
     "node_modules/@trezor/schema-utils": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/@trezor/schema-utils/-/schema-utils-1.3.4.tgz",
-      "integrity": "sha512-guP5TKjQEWe6c5HGx+7rhM0SAdEL5gylpkvk9XmJXjZDnl1Ew81nmLHUs2ghf8Od3pKBe4qjBIMBHUQNaOqWUg==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@trezor/schema-utils/-/schema-utils-1.4.0.tgz",
+      "integrity": "sha512-K7upSeh7VDrORaIC4KAxYVW93XNlohmUnH5if/5GKYmTdQSRp1nBkO6Jm+Z4hzIthdnz/1aLgnbeN3bDxWLRxA==",
       "license": "See LICENSE.md in repo root",
+      "peer": true,
       "dependencies": {
         "@sinclair/typebox": "^0.33.7",
         "ts-mixer": "^6.0.3"
@@ -6329,16 +7183,16 @@
       }
     },
     "node_modules/@trezor/transport": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/@trezor/transport/-/transport-1.5.4.tgz",
-      "integrity": "sha512-3vGn2IEofbzhKMyLjzmTCwVTE5Wj0gkncLCNc66DU95IEW5WlwNGt/nXSJCg9TMBHK6qtlbY1HOBFuUzEW2Q7w==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@trezor/transport/-/transport-1.6.1.tgz",
+      "integrity": "sha512-RQNQingZ1TOVKSJu3Av9bmQovsu9n1NkcAYJ64+ZfapORfl/AzmZizRflhxU3FlIujQJK1gbIaW79+L54g7a8w==",
       "license": "SEE LICENSE IN LICENSE.md",
       "peer": true,
       "dependencies": {
-        "@trezor/protobuf": "1.4.4",
-        "@trezor/protocol": "1.2.10",
-        "@trezor/type-utils": "1.1.9",
-        "@trezor/utils": "9.4.4",
+        "@trezor/protobuf": "1.5.1",
+        "@trezor/protocol": "1.3.0",
+        "@trezor/type-utils": "1.2.0",
+        "@trezor/utils": "9.5.0",
         "cross-fetch": "^4.0.0",
         "usb": "^2.15.0"
       },
@@ -6347,16 +7201,16 @@
       }
     },
     "node_modules/@trezor/type-utils": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/@trezor/type-utils/-/type-utils-1.1.9.tgz",
-      "integrity": "sha512-/Ug5pmVEpT5OVrf007kEvDj+zOdedHV0QcToUHG/WpVAKH9IsOssOAYIfRr8lDDgT+mDHuArZk/bYa1qvVz8Hw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@trezor/type-utils/-/type-utils-1.2.0.tgz",
+      "integrity": "sha512-+E2QntxkyQuYfQQyl8RvT01tq2i5Dp/LFUOXuizF+KVOqsZBjBY43j5hewcCO3+MokD7deDiPyekbUEN5/iVlw==",
       "license": "See LICENSE.md in repo root",
       "peer": true
     },
     "node_modules/@trezor/utils": {
-      "version": "9.4.4",
-      "resolved": "https://registry.npmjs.org/@trezor/utils/-/utils-9.4.4.tgz",
-      "integrity": "sha512-08ciafbBqhApn58q3KkewdLQ3dCA71MsK/BOUfD43EB2GpB420zzky7REilXhOONc3giD0fBbTG3Zdt3HNL0/Q==",
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@trezor/utils/-/utils-9.5.0.tgz",
+      "integrity": "sha512-kdyMyDbxzvOZmwBNvTjAK+C/kzyOz8T4oUbFvq+KaXn5mBFf1uf8rq5X2HkxgdYRPArtHS3PxLKsfkNCdhCYtQ==",
       "license": "SEE LICENSE IN LICENSE.md",
       "peer": true,
       "dependencies": {
@@ -6367,13 +7221,13 @@
       }
     },
     "node_modules/@trezor/utxo-lib": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@trezor/utxo-lib/-/utxo-lib-2.4.4.tgz",
-      "integrity": "sha512-rccdH3+iqvBL/Nkso/wGCdIXAQY+M/ubLIf/i/hBbcpRH6JoOg8oyaoaHzegsYNE6yHKnykTOZWz5Q4MTG02Bw==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@trezor/utxo-lib/-/utxo-lib-2.5.0.tgz",
+      "integrity": "sha512-Fa2cZh0037oX6AHNLfpFIj65UR/OoX0ZJTocFuQASe77/1PjZHysf6BvvGfmzuFToKfrAQ+DM/1Sx+P/vnyNmA==",
       "license": "SEE LICENSE IN LICENSE.md",
       "peer": true,
       "dependencies": {
-        "@trezor/utils": "9.4.4",
+        "@trezor/utils": "9.5.0",
         "bech32": "^2.0.0",
         "bip66": "^2.0.0",
         "bitcoin-ops": "^1.4.1",
@@ -6395,31 +7249,14 @@
         "tslib": "^2.6.2"
       }
     },
-    "node_modules/@trezor/utxo-lib/node_modules/base-x": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/base-x/-/base-x-5.0.1.tgz",
-      "integrity": "sha512-M7uio8Zt++eg3jPj+rHMfCC+IuygQHHCOU+IYsVtik6FWjuYpVt/+MRKcgsAMHh8mMFAwnB+Bs+mTrFiXjMzKg==",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/@trezor/utxo-lib/node_modules/bs58": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/bs58/-/bs58-6.0.0.tgz",
-      "integrity": "sha512-PD0wEnEYg6ijszw/u8s+iI3H17cTymlrwkKhDhPZq+Sokl3AU4htyBFTjAeNAlCCmg0f53g6ih3jATyCKftTfw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "base-x": "^5.0.0"
-      }
-    },
     "node_modules/@trezor/websocket-client": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@trezor/websocket-client/-/websocket-client-1.2.4.tgz",
-      "integrity": "sha512-UgU31gFX8gY0abeI5DjRVnH4RfbXqHcOb019ogkR51KlfjkiWXTvUWKRLLqwslWiUIMEAI3ZFeXQds84b7Uw/Q==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@trezor/websocket-client/-/websocket-client-1.3.0.tgz",
+      "integrity": "sha512-9KQSaVc3NtmM6rFFj1e+9bM0C5mVKVidbnxlfzuBJu7G2YMRdIdLPcAXhvmRZjs40uzDuBeApK+p547kODz2ug==",
       "license": "SEE LICENSE IN LICENSE.md",
       "peer": true,
       "dependencies": {
-        "@trezor/utils": "9.4.4",
+        "@trezor/utils": "9.5.0",
         "ws": "^8.18.0"
       },
       "peerDependencies": {
@@ -6445,15 +7282,6 @@
       "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
       "license": "MIT"
     },
-    "node_modules/@types/connect": {
-      "version": "3.4.38",
-      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
-      "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/@types/d3-array": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
@@ -6566,8 +7394,8 @@
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "license": "MIT",
-      "peer": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/linkify-it": {
       "version": "5.0.0",
@@ -6729,12 +7557,6 @@
       "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
       "license": "MIT"
     },
-    "node_modules/@types/uuid": {
-      "version": "8.3.4",
-      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
-      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==",
-      "license": "MIT"
-    },
     "node_modules/@types/w3c-web-usb": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/@types/w3c-web-usb/-/w3c-web-usb-1.0.13.tgz",
@@ -6745,7 +7567,8 @@
       "version": "0.0.197",
       "resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.197.tgz",
       "integrity": "sha512-V4sOroWDADFx9dLodWpKm298NOJ1VJ6zoDVgaP+WBb/utWxqQ6gnMzd9lvVDAr/F3ibiKaxH9i45eS0gQPSTaQ==",
-      "license": "Apache-2.0"
+      "license": "Apache-2.0",
+      "peer": true
     },
     "node_modules/@types/webxr": {
       "version": "0.5.24",
@@ -7160,29 +7983,8 @@
           "optional": true
         },
         "vue-router": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@wallet-standard/base": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@wallet-standard/base/-/base-1.1.0.tgz",
-      "integrity": "sha512-DJDQhjKmSNVLKWItoKThJS+CsJQjR9AOBOirBVT1F9YpRyC9oYHE+ZnSf8y8bxUphtKqdQMPVQ2mHohYdRvDVQ==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=16"
-      }
-    },
-    "node_modules/@wallet-standard/features": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@wallet-standard/features/-/features-1.1.0.tgz",
-      "integrity": "sha512-hiEivWNztx73s+7iLxsuD1sOJ28xtRix58W7Xnz4XzzA/pF0+aicnWgjOdA10doVDEDZdUuZCIIqG96SFNlDUg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@wallet-standard/base": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=16"
+          "optional": true
+        }
       }
     },
     "node_modules/@walletconnect/core": {
@@ -7631,6 +8433,7 @@
       "resolved": "https://registry.npmjs.org/@xrplf/isomorphic/-/isomorphic-1.0.1.tgz",
       "integrity": "sha512-0bIpgx8PDjYdrLFeC3csF305QQ1L7sxaWnL5y71mCvhenZzJgku9QsA+9QCXBC1eNYtxWO/xR91zrXJy2T/ixg==",
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "@noble/hashes": "^1.0.0",
         "eventemitter3": "5.0.1",
@@ -7645,6 +8448,7 @@
       "resolved": "https://registry.npmjs.org/@xrplf/secret-numbers/-/secret-numbers-2.0.0.tgz",
       "integrity": "sha512-z3AOibRTE9E8MbjgzxqMpG1RNaBhQ1jnfhNCa1cGf2reZUJzPMYs4TggQTc7j8+0WyV3cr7y/U8Oz99SXIkN5Q==",
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "@xrplf/isomorphic": "^1.0.1",
         "ripple-keypairs": "^2.0.0"
@@ -7682,18 +8486,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/agentkeepalive": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.6.0.tgz",
-      "integrity": "sha512-kja8j7PjmncONqaTsB8fQ+wE2mSU2DJ9D4XKoJ5PFWIdRMa6SLSN1ff4mOr4jCbfRSsxR4keIiySJU0N9T5hIQ==",
-      "license": "MIT",
-      "dependencies": {
-        "humanize-ms": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 8.0.0"
-      }
-    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -7941,6 +8733,19 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/assert": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/assert/-/assert-2.1.0.tgz",
+      "integrity": "sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "is-nan": "^1.3.2",
+        "object-is": "^1.1.5",
+        "object.assign": "^4.1.4",
+        "util": "^0.12.5"
+      }
+    },
     "node_modules/async-function": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
@@ -8063,13 +8868,10 @@
       "optional": true
     },
     "node_modules/base-x": {
-      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.11.tgz",
-      "integrity": "sha512-xz7wQ8xDhdyP7tQxwdteLYeFfS68tSMNCZ/Y37WJ4bhGfKPpqEIlmIyueQHqOyoPhE6xNUqjzRr8ra0eF9VRvA==",
-      "license": "MIT",
-      "dependencies": {
-        "safe-buffer": "^5.0.1"
-      }
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/base-x/-/base-x-5.0.1.tgz",
+      "integrity": "sha512-M7uio8Zt++eg3jPj+rHMfCC+IuygQHHCOU+IYsVtik6FWjuYpVt/+MRKcgsAMHh8mMFAwnB+Bs+mTrFiXjMzKg==",
+      "license": "MIT"
     },
     "node_modules/base32.js": {
       "version": "0.1.0",
@@ -8124,6 +8926,24 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/bchaddrjs/node_modules/base-x": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.11.tgz",
+      "integrity": "sha512-xz7wQ8xDhdyP7tQxwdteLYeFfS68tSMNCZ/Y37WJ4bhGfKPpqEIlmIyueQHqOyoPhE6xNUqjzRr8ra0eF9VRvA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/bchaddrjs/node_modules/bs58": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/bs58/-/bs58-4.0.1.tgz",
+      "integrity": "sha512-Ok3Wdf5vOIlBrgCvTq96gBkJw+JUEzdBgyaza5HLtPm7yTHkjRy8+JzNyHF7BHa0bNWOQIp3m5YF0nnFcOIKLw==",
+      "license": "MIT",
+      "dependencies": {
+        "base-x": "^3.0.2"
+      }
+    },
     "node_modules/bchaddrjs/node_modules/bs58check": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/bs58check/-/bs58check-2.1.2.tgz",
@@ -8331,12 +9151,6 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "license": "ISC"
     },
-    "node_modules/borsh": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/borsh/-/borsh-2.0.0.tgz",
-      "integrity": "sha512-kc9+BgR3zz9+cjbwM8ODoUB4fs3X3I5A/HtX7LZKxCLaMrEeDFoBpnhZY//DTS1VZBSs6S5v46RZRbZjRFspEg==",
-      "license": "Apache-2.0"
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -8494,7 +9308,6 @@
       "version": "4.28.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
       "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -8525,12 +9338,12 @@
       }
     },
     "node_modules/bs58": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/bs58/-/bs58-4.0.1.tgz",
-      "integrity": "sha512-Ok3Wdf5vOIlBrgCvTq96gBkJw+JUEzdBgyaza5HLtPm7yTHkjRy8+JzNyHF7BHa0bNWOQIp3m5YF0nnFcOIKLw==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/bs58/-/bs58-6.0.0.tgz",
+      "integrity": "sha512-PD0wEnEYg6ijszw/u8s+iI3H17cTymlrwkKhDhPZq+Sokl3AU4htyBFTjAeNAlCCmg0f53g6ih3jATyCKftTfw==",
       "license": "MIT",
       "dependencies": {
-        "base-x": "^3.0.2"
+        "base-x": "^5.0.0"
       }
     },
     "node_modules/bs58check": {
@@ -8543,21 +9356,6 @@
         "bs58": "^6.0.0"
       }
     },
-    "node_modules/bs58check/node_modules/base-x": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/base-x/-/base-x-5.0.1.tgz",
-      "integrity": "sha512-M7uio8Zt++eg3jPj+rHMfCC+IuygQHHCOU+IYsVtik6FWjuYpVt/+MRKcgsAMHh8mMFAwnB+Bs+mTrFiXjMzKg==",
-      "license": "MIT"
-    },
-    "node_modules/bs58check/node_modules/bs58": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/bs58/-/bs58-6.0.0.tgz",
-      "integrity": "sha512-PD0wEnEYg6ijszw/u8s+iI3H17cTymlrwkKhDhPZq+Sokl3AU4htyBFTjAeNAlCCmg0f53g6ih3jATyCKftTfw==",
-      "license": "MIT",
-      "dependencies": {
-        "base-x": "^5.0.0"
-      }
-    },
     "node_modules/buffer": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
@@ -8586,7 +9384,8 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
       "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
-      "license": "BSD-3-Clause"
+      "license": "BSD-3-Clause",
+      "peer": true
     },
     "node_modules/buffer-xor": {
       "version": "1.0.3",
@@ -8595,20 +9394,6 @@
       "license": "MIT",
       "peer": true
     },
-    "node_modules/bufferutil": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.9.tgz",
-      "integrity": "sha512-WDtdLmJvAuNNPzByAYpRo2rF1Mmradw6gvWsQKf63476DDXmomT9zUiGypLcG4ibIM67vhAj8jJRdbmEws2Aqw==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "node-gyp-build": "^4.3.0"
-      },
-      "engines": {
-        "node": ">=6.14.2"
-      }
-    },
     "node_modules/call-bind": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
@@ -8801,15 +9586,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/charenc": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
-      "integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/chokidar": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
@@ -9072,7 +9848,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/cookie-es": {
@@ -9188,15 +9963,6 @@
         "uncrypto": "^0.1.3"
       }
     },
-    "node_modules/crypt": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
-      "integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/crypto-browserify": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
@@ -9465,6 +10231,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "license": "MIT"
+    },
     "node_modules/decimal.js-light": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
@@ -9521,7 +10293,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
       "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "define-data-property": "^1.0.1",
@@ -9541,18 +10312,6 @@
       "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
       "license": "MIT"
     },
-    "node_modules/delay": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/delay/-/delay-5.0.0.tgz",
-      "integrity": "sha512-ReEBKkIfe4ya47wlPYf/gu5ib6yUG0/Aez0JQZQz94kiWtRQvZIQbTiehsnwHvLSWJnQdhVeqYue7Id1dKr0qw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -9562,15 +10321,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/depd": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -9621,7 +10371,8 @@
           "url": "https://paypal.me/faisalman"
         }
       ],
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/detect-gpu": {
       "version": "5.0.70",
@@ -9767,6 +10518,7 @@
       "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
       "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "safe-buffer": "^5.0.1"
       }
@@ -9775,7 +10527,6 @@
       "version": "1.5.264",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.264.tgz",
       "integrity": "sha512-1tEf0nLgltC3iy9wtlYDlQDc5Rg9lEKVjEmIHJ21rI9OcqkvD45K1oyNIRA4rR1z3LgJ7KeGzEBojVcV6m4qjA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/elliptic": {
@@ -10128,26 +10879,10 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/es6-promise": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
-      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
-      "license": "MIT"
-    },
-    "node_modules/es6-promisify": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
-      "integrity": "sha512-C+d6UdsYDk0lMebHNR4S2NybQMMngAOnOwYBQjTOiv0MkoJMP0Myw2mgpDLBcpfCmRLxyFqYhS/CfOENq4SJhQ==",
-      "license": "MIT",
-      "dependencies": {
-        "es6-promise": "^4.0.3"
-      }
-    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
       "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -10166,60 +10901,63 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.57.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
-      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
-      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
+      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.57.1",
-        "@humanwhocodes/config-array": "^0.13.0",
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.1",
+        "@eslint/config-helpers": "^0.4.2",
+        "@eslint/core": "^0.17.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.39.2",
+        "@eslint/plugin-kit": "^0.4.1",
+        "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
-        "@nodelib/fs.walk": "^1.2.8",
-        "@ungap/structured-clone": "^1.2.0",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
         "ajv": "^6.12.4",
         "chalk": "^4.0.0",
-        "cross-spawn": "^7.0.2",
+        "cross-spawn": "^7.0.6",
         "debug": "^4.3.2",
-        "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.2.2",
-        "eslint-visitor-keys": "^3.4.3",
-        "espree": "^9.6.1",
-        "esquery": "^1.4.2",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
-        "file-entry-cache": "^6.0.1",
+        "file-entry-cache": "^8.0.0",
         "find-up": "^5.0.0",
         "glob-parent": "^6.0.2",
-        "globals": "^13.19.0",
-        "graphemer": "^1.4.0",
         "ignore": "^5.2.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
-        "is-path-inside": "^3.0.3",
-        "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.4.1",
         "lodash.merge": "^4.6.2",
         "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
-        "optionator": "^0.9.3",
-        "strip-ansi": "^6.0.1",
-        "text-table": "^0.2.0"
+        "optionator": "^0.9.3"
       },
       "bin": {
         "eslint": "bin/eslint.js"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
-        "url": "https://opencollective.com/eslint"
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
       }
     },
     "node_modules/eslint-config-prettier": {
@@ -10333,9 +11071,9 @@
       }
     },
     "node_modules/eslint-scope": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
-      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -10343,7 +11081,7 @@
         "estraverse": "^5.2.0"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "url": "https://opencollective.com/eslint"
@@ -10362,40 +11100,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint/node_modules/@eslint/eslintrc": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
-      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "^6.12.4",
-        "debug": "^4.3.2",
-        "espree": "^9.6.0",
-        "globals": "^13.19.0",
-        "ignore": "^5.2.0",
-        "import-fresh": "^3.2.1",
-        "js-yaml": "^4.1.0",
-        "minimatch": "^3.1.2",
-        "strip-json-comments": "^3.1.1"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/eslint/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -10429,66 +11133,19 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/eslint/node_modules/doctrine": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+    "node_modules/eslint/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "dependencies": {
-        "esutils": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/eslint/node_modules/espree": {
-      "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
-      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "acorn": "^8.9.0",
-        "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^3.4.1"
-      },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint/node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "type-fest": "^0.20.2"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/espree": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
@@ -10577,56 +11234,72 @@
       }
     },
     "node_modules/ethereum-cryptography": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/ethereum-cryptography/-/ethereum-cryptography-3.2.0.tgz",
-      "integrity": "sha512-Urr5YVsalH+Jo0sYkTkv1MyI9bLYZwW8BENZCeE1QYaTHETEYx0Nv/SVsWkSqpYrzweg6d8KMY1wTjH/1m/BIg==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ethereum-cryptography/-/ethereum-cryptography-2.2.1.tgz",
+      "integrity": "sha512-r/W8lkHSiTLxUxW8Rf3u4HGB0xQweG2RyETjywylKZSzLWoWAijRz8WCuOtJ6wah+avllXBqZuk29HCCvhEIRg==",
+      "license": "MIT",
+      "dependencies": {
+        "@noble/curves": "1.4.2",
+        "@noble/hashes": "1.4.0",
+        "@scure/bip32": "1.4.0",
+        "@scure/bip39": "1.3.0"
+      }
+    },
+    "node_modules/ethereum-cryptography/node_modules/@noble/curves": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.4.2.tgz",
+      "integrity": "sha512-TavHr8qycMChk8UwMld0ZDRvatedkzWfH8IiaeGCfymOP5i0hSCozz9vHOL0nkwk7HRMlFnAiKpS2jrUmSybcw==",
       "license": "MIT",
       "dependencies": {
-        "@noble/ciphers": "1.3.0",
-        "@noble/curves": "1.9.0",
-        "@noble/hashes": "1.8.0",
-        "@scure/bip32": "1.7.0",
-        "@scure/bip39": "1.6.0"
+        "@noble/hashes": "1.4.0"
       },
-      "engines": {
-        "node": "^14.21.3 || >=16",
-        "npm": ">=9"
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/ethereum-cryptography/node_modules/@noble/ciphers": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.3.0.tgz",
-      "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==",
+    "node_modules/ethereum-cryptography/node_modules/@noble/hashes": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz",
+      "integrity": "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==",
       "license": "MIT",
       "engines": {
-        "node": "^14.21.3 || >=16"
+        "node": ">= 16"
       },
       "funding": {
         "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/ethereum-cryptography/node_modules/@noble/curves": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.9.0.tgz",
-      "integrity": "sha512-7YDlXiNMdO1YZeH6t/kvopHHbIZzlxrCV9WLqCY6QhcXOoXiNCMDqJIglZ9Yjx5+w7Dz30TITFrlTjnRg7sKEg==",
+    "node_modules/ethereum-cryptography/node_modules/@scure/base": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@scure/base/-/base-1.1.9.tgz",
+      "integrity": "sha512-8YKhl8GHiNI/pU2VMaofa2Tor7PJRAjwQLBBuilkJ9L5+13yVbC7JO/wS7piioAvPSwR3JKM1IJ/u4xQzbcXKg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/ethereum-cryptography/node_modules/@scure/bip32": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@scure/bip32/-/bip32-1.4.0.tgz",
+      "integrity": "sha512-sVUpc0Vq3tXCkDGYVWGIZTRfnvu8LoTDaev7vbwh0omSvVORONr960MQWdKqJDCReIEmTj3PAr73O3aoxz7OPg==",
       "license": "MIT",
       "dependencies": {
-        "@noble/hashes": "1.8.0"
-      },
-      "engines": {
-        "node": "^14.21.3 || >=16"
+        "@noble/curves": "~1.4.0",
+        "@noble/hashes": "~1.4.0",
+        "@scure/base": "~1.1.6"
       },
       "funding": {
         "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/ethereum-cryptography/node_modules/@noble/hashes": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
-      "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==",
+    "node_modules/ethereum-cryptography/node_modules/@scure/bip39": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@scure/bip39/-/bip39-1.3.0.tgz",
+      "integrity": "sha512-disdg7gHuTDZtY+ZdkmLpPCk7fxZSu3gBiEGuoC1XYxv9cGx3Z6cpTggCgW6odSOOIXCiDjuGejW+aJKCY/pIQ==",
       "license": "MIT",
-      "engines": {
-        "node": "^14.21.3 || >=16"
+      "dependencies": {
+        "@noble/hashes": "~1.4.0",
+        "@scure/base": "~1.1.6"
       },
       "funding": {
         "url": "https://paulmillr.com/funding/"
@@ -10667,27 +11340,12 @@
         "safe-buffer": "^5.1.1"
       }
     },
-    "node_modules/exponential-backoff": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.3.tgz",
-      "integrity": "sha512-ZgEeZXj30q+I0EN+CbSSpIyPaJ5HVQD18Z1m+u1FXbAeT94mr1zw50q4q6jiiC447Nl/YTcIYSAftiGqetwXCA==",
-      "license": "Apache-2.0",
-      "peer": true
-    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
       "license": "MIT"
     },
-    "node_modules/eyes": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/eyes/-/eyes-0.1.8.tgz",
-      "integrity": "sha512-GipyPsXO1anza0AOZdy69Im7hGFCNB7Y/NGjDlZGJ3GJJLtwNSb2vrzYrTYJRrRloVx7pl+bhUaTB8yiccPvFQ==",
-      "engines": {
-        "node": "> 0.1.90"
-      }
-    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -10733,12 +11391,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/fast-stable-stringify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fast-stable-stringify/-/fast-stable-stringify-1.0.0.tgz",
-      "integrity": "sha512-wpYMUmFu5f00Sm0cj2pfivpmawLZ0NKdviQ4w9zJeR8JVtOpOxHmLaJuj0vxvGqMJQWyP/COUkF75/57OKyRag==",
-      "license": "MIT"
-    },
     "node_modules/fastestsmallesttextencoderdecoder": {
       "version": "1.0.22",
       "resolved": "https://registry.npmjs.org/fastestsmallesttextencoderdecoder/-/fastestsmallesttextencoderdecoder-1.0.22.tgz",
@@ -10746,16 +11398,6 @@
       "license": "CC0-1.0",
       "peer": true
     },
-    "node_modules/fastq": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
-      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
     "node_modules/feaxios": {
       "version": "0.0.23",
       "resolved": "https://registry.npmjs.org/feaxios/-/feaxios-0.0.23.tgz",
@@ -10772,16 +11414,16 @@
       "license": "MIT"
     },
     "node_modules/file-entry-cache": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
-      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "flat-cache": "^3.0.4"
+        "flat-cache": "^4.0.0"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": ">=16.0.0"
       }
     },
     "node_modules/file-selector": {
@@ -10842,18 +11484,17 @@
       }
     },
     "node_modules/flat-cache": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
-      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "flatted": "^3.2.9",
-        "keyv": "^4.5.3",
-        "rimraf": "^3.0.2"
+        "keyv": "^4.5.4"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": ">=16"
       }
     },
     "node_modules/flatted": {
@@ -10915,13 +11556,13 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "12.23.25",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.25.tgz",
-      "integrity": "sha512-gUHGl2e4VG66jOcH0JHhuJQr6ZNwrET9g31ZG0xdXzT0CznP7fHX4P8Bcvuc4MiUB90ysNnWX2ukHRIggkl6hQ==",
+      "version": "12.30.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.30.0.tgz",
+      "integrity": "sha512-S7t3UjvghrFiJzFJ30ncX6keUipexw9f7DRpauhW9bXPNxg0dMxoPbNIDpLuxK1NvxF2wswFEMEm7WiNAcdELg==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.23.23",
-        "motion-utils": "^12.23.6",
+        "motion-dom": "^12.30.0",
+        "motion-utils": "^12.29.2",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -10941,13 +11582,6 @@
         }
       }
     },
-    "node_modules/fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -10988,31 +11622,10 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/generate-function": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
-      "integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "is-property": "^1.0.2"
-      }
-    },
-    "node_modules/generate-object-property": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
-      "integrity": "sha512-TuOwZWgJ2VAMEGJvAyPWvpqxSANF0LDpmyHauMjFYzaACvn+QTT/AZomvPCzVBV7yDN3OmwHQ5OvHaeLKre3JQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "is-property": "^1.0.0"
-      }
-    },
     "node_modules/generator-function": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
       "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -11022,7 +11635,6 @@
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -11120,28 +11732,6 @@
       "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==",
       "license": "ISC"
     },
-    "node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -11223,9 +11813,9 @@
       "license": "Standard 'no charge' license: https://gsap.com/standard-license."
     },
     "node_modules/h3": {
-      "version": "1.15.4",
-      "resolved": "https://registry.npmjs.org/h3/-/h3-1.15.4.tgz",
-      "integrity": "sha512-z5cFQWDffyOe4vQ9xIqNfCZdV4p//vy6fBnr8Q1AWnVZ0teurKMG66rLj++TKwKPUP3u7iMUvrvKaEUiQw2QWQ==",
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/h3/-/h3-1.15.5.tgz",
+      "integrity": "sha512-xEyq3rSl+dhGX2Lm0+eFQIAzlDN6Fs0EcC4f7BNUmzaRX/PTzeuM+Tr2lHB8FoXggsQIeXLj8EDVgs5ywxyxmg==",
       "license": "MIT",
       "dependencies": {
         "cookie-es": "^1.2.2",
@@ -11233,9 +11823,9 @@
         "defu": "^6.1.4",
         "destr": "^2.0.5",
         "iron-webcrypto": "^1.2.1",
-        "node-mock-http": "^1.0.2",
+        "node-mock-http": "^1.0.4",
         "radix3": "^1.1.2",
-        "ufo": "^1.6.1",
+        "ufo": "^1.6.3",
         "uncrypto": "^0.1.3"
       }
     },
@@ -11720,55 +12310,31 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/http-errors": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
-      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "depd": "~1.1.2",
-        "inherits": "2.0.3",
-        "setprototypeof": "1.1.1",
-        "statuses": ">= 1.5.0 < 2",
-        "toidentifier": "1.0.0"
+        "agent-base": "6",
+        "debug": "4"
       },
       "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/http-errors/node_modules/depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">= 0.6"
+        "node": ">= 6"
       }
     },
-    "node_modules/http-errors/node_modules/inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
-      "license": "ISC",
-      "peer": true
-    },
-    "node_modules/humanize-ms": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
-      "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
+    "node_modules/https-proxy-agent/node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
       "license": "MIT",
       "dependencies": {
-        "ms": "^2.0.0"
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
       }
     },
-    "node_modules/humanize-ms/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
     "node_modules/husky": {
       "version": "9.1.7",
       "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
@@ -11854,18 +12420,6 @@
         "node": ">=0.8.19"
       }
     },
-    "node_modules/inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -11960,6 +12514,22 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-arguments": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
+      "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -12150,7 +12720,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
       "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.4",
@@ -12202,25 +12771,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-my-ip-valid": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-my-ip-valid/-/is-my-ip-valid-1.0.1.tgz",
-      "integrity": "sha512-jxc8cBcOWbNK2i2aTkCZP6i7wkHF1bqKFrwEHuN5Jtg5BSaZHUZQ/JTOJwoV41YvHnOaRyWWh72T/KvfNz9DJg==",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/is-my-json-valid": {
-      "version": "2.20.6",
-      "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.20.6.tgz",
-      "integrity": "sha512-1JQwulVNjx8UqkPE/bqDaxtH4PXCe/2VRh/y3p99heOV87HG4Id5/VfDswd+YiAfHcRTfDlWgISycnHuhZq1aw==",
+    "node_modules/is-nan": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
+      "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "generate-function": "^2.0.0",
-        "generate-object-property": "^1.1.0",
-        "is-my-ip-valid": "^1.0.0",
-        "jsonpointer": "^5.0.0",
-        "xtend": "^4.0.0"
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/is-negative-zero": {
@@ -12263,16 +12827,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-path-inside": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-plain-obj": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
@@ -12291,18 +12845,10 @@
       "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
       "license": "MIT"
     },
-    "node_modules/is-property": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
-      "integrity": "sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
       "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -12376,7 +12922,8 @@
           "url": "https://paypal.me/faisalman"
         }
       ],
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/is-string": {
       "version": "1.1.1",
@@ -12496,15 +13043,6 @@
         "unfetch": "^4.2.0"
       }
     },
-    "node_modules/isomorphic-ws": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz",
-      "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==",
-      "license": "MIT",
-      "peerDependencies": {
-        "ws": "*"
-      }
-    },
     "node_modules/iterator.prototype": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
@@ -12544,65 +13082,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/jayson": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/jayson/-/jayson-4.2.0.tgz",
-      "integrity": "sha512-VfJ9t1YLwacIubLhONk0KFeosUBwstRWQ0IRT1KDjEjnVnSOVHC3uwugyV7L0c7R9lpVyrUGT2XWiBA1UTtpyg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/connect": "^3.4.33",
-        "@types/node": "^12.12.54",
-        "@types/ws": "^7.4.4",
-        "commander": "^2.20.3",
-        "delay": "^5.0.0",
-        "es6-promisify": "^5.0.0",
-        "eyes": "^0.1.8",
-        "isomorphic-ws": "^4.0.1",
-        "json-stringify-safe": "^5.0.1",
-        "stream-json": "^1.9.1",
-        "uuid": "^8.3.2",
-        "ws": "^7.5.10"
-      },
-      "bin": {
-        "jayson": "bin/jayson.js"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jayson/node_modules/@types/node": {
-      "version": "12.20.55",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.55.tgz",
-      "integrity": "sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==",
-      "license": "MIT"
-    },
-    "node_modules/jayson/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "license": "MIT"
-    },
-    "node_modules/jayson/node_modules/ws": {
-      "version": "7.5.10",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
-      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.3.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/jiti": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
@@ -12630,12 +13109,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/js-sha256": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.11.1.tgz",
-      "integrity": "sha512-o6WSo/LUvY2uC4j7mO50a2ms7E/EAdbP0swigLV+nzHKTTaYnaLIWJ02VdXrsJX0vGedDESQnLsOekr94ryfjg==",
-      "license": "MIT"
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -12659,7 +13132,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
       "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "jsesc": "bin/jsesc"
@@ -12689,17 +13161,10 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/json-stringify-safe": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
-      "license": "ISC"
-    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "json5": "lib/cli.js"
@@ -12708,14 +13173,13 @@
         "node": ">=6"
       }
     },
-    "node_modules/jsonpointer": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz",
-      "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==",
+    "node_modules/jsonschema": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/jsonschema/-/jsonschema-1.2.2.tgz",
+      "integrity": "sha512-iX5OFQ6yx9NgbHCwse51ohhKgLuLL7Z5cNOeZOPIlDUtAMrxlruHLzVZxbltdHE5mEDXN+75oFOwq6Gn0MZwsA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
-        "node": ">=0.10.0"
+        "node": "*"
       }
     },
     "node_modules/jsx-ast-utils": {
@@ -12739,6 +13203,7 @@
       "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
       "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "buffer-equal-constant-time": "^1.0.1",
         "ecdsa-sig-formatter": "1.0.11",
@@ -12750,6 +13215,7 @@
       "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
       "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "jwa": "^2.0.1",
         "safe-buffer": "^5.0.1"
@@ -13158,9 +13624,9 @@
       }
     },
     "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
       "license": "MIT"
     },
     "node_modules/lodash.debounce": {
@@ -13231,18 +13697,10 @@
         "loose-envify": "cli.js"
       }
     },
-    "node_modules/lru_map": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/lru_map/-/lru_map-0.4.1.tgz",
-      "integrity": "sha512-I+lBvqMMFfqaV8CJCISjI3wbjmwVu/VyOoU7+qtu9d7ioW5klMgsTTiUOUp+DJvfTTzKXoPbyC6YfgkNcyPSOg==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
       "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "yallist": "^3.0.2"
@@ -13624,9 +14082,9 @@
       "license": "MIT"
     },
     "node_modules/media-chrome": {
-      "version": "4.16.1",
-      "resolved": "https://registry.npmjs.org/media-chrome/-/media-chrome-4.16.1.tgz",
-      "integrity": "sha512-qtFlsy0lNDVCyVo//ZCAfRPKwgehfOYp6rThZzDUuZ5ypv41yqUfAxK+P9TOs+XSVWXATPTT2WRV0fbW0BH4vQ==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/media-chrome/-/media-chrome-4.17.2.tgz",
+      "integrity": "sha512-o/IgiHx0tdSVwRxxqF5H12FK31A/A8T71sv3KdAvh7b6XeBS9dXwqvIFwlR9kdEuqg3n7xpmRIuL83rmYq8FTg==",
       "license": "MIT",
       "dependencies": {
         "ce-la-react": "^0.3.2"
@@ -14305,12 +14763,12 @@
       }
     },
     "node_modules/motion": {
-      "version": "12.23.25",
-      "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.25.tgz",
-      "integrity": "sha512-Fk5Y1kcgxYiTYOUjmwfXQAP7tP+iGqw/on1UID9WEL/6KpzxPr9jY2169OsjgZvXJdpraKXy0orkjaCVIl5fgQ==",
+      "version": "12.30.0",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.30.0.tgz",
+      "integrity": "sha512-5D2ERK0dnZjXPcmKFVEoyToa/BR1FpHzVP508yOeU+mH3fsSVYP6P2qmbF+opUXLetxHy0GVgH9NEZxBdXpe+A==",
       "license": "MIT",
       "dependencies": {
-        "framer-motion": "^12.23.25",
+        "framer-motion": "^12.30.0",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -14331,18 +14789,18 @@
       }
     },
     "node_modules/motion-dom": {
-      "version": "12.23.23",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
-      "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
+      "version": "12.30.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.30.0.tgz",
+      "integrity": "sha512-p6Mp+lxm+mK4O86YVyL6KAlFDVCIqpmcBt+uMVapMBqltPXpwZ5Wj2crnN2VE7lwsas0ONCPIW9YVpMigu4F5g==",
       "license": "MIT",
       "dependencies": {
-        "motion-utils": "^12.23.6"
+        "motion-utils": "^12.29.2"
       }
     },
     "node_modules/motion-utils": {
-      "version": "12.23.6",
-      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
-      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "version": "12.29.2",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.29.2.tgz",
+      "integrity": "sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A==",
       "license": "MIT"
     },
     "node_modules/ms": {
@@ -14360,22 +14818,10 @@
       "integrity": "sha512-HoMUjhH9T8DDBNT+6xzkrd9ga/XiBI4xLr58LJACwK6G3HTOPeMz4nB4KJs33L2BelrIJa7P0VuNaVF3hMYfjg==",
       "license": "(Apache-2.0 AND MIT)"
     },
-    "node_modules/mustache": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.0.0.tgz",
-      "integrity": "sha512-FJgjyX/IVkbXBXYUwH+OYwQKqWpFPLaLVESd70yHjSDunwzV2hZOoTBvPf4KLoxesUzzyfTH6F784Uqd7Wm5yA==",
-      "license": "MIT",
-      "bin": {
-        "mustache": "bin/mustache"
-      },
-      "engines": {
-        "npm": ">=1.4.0"
-      }
-    },
     "node_modules/nan": {
-      "version": "2.24.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.24.0.tgz",
-      "integrity": "sha512-Vpf9qnVW1RaDkoNKFUvfxqAbtI8ncb8OJlqZ9wwpXzWPEsvsB1nvdUi6oYrHIkQ1Y/tMDnr1h4nczS0VB9Xykg==",
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.25.0.tgz",
+      "integrity": "sha512-0M90Ag7Xn5KMLLZ7zliPWP3rT90P6PN+IzVFS0VqmnPktBk3700xUVv8Ikm9EUaUE5SDWdp/BIxdENzVznpm1g==",
       "license": "MIT"
     },
     "node_modules/nano-spawn": {
@@ -14431,77 +14877,13 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/near-abi": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/near-abi/-/near-abi-0.2.0.tgz",
-      "integrity": "sha512-kCwSf/3fraPU2zENK18sh+kKG4uKbEUEQdyWQkmW8ZofmLarObIz2+zAYjA1teDZLeMvEQew3UysnPDXgjneaA==",
-      "license": "(MIT AND Apache-2.0)",
-      "peer": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.11"
-      }
-    },
-    "node_modules/near-api-js": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/near-api-js/-/near-api-js-5.1.1.tgz",
-      "integrity": "sha512-h23BGSKxNv8ph+zU6snicstsVK1/CTXsQz4LuGGwoRE24Hj424nSe4+/1tzoiC285Ljf60kPAqRCmsfv9etF2g==",
-      "license": "(MIT AND Apache-2.0)",
-      "peer": true,
-      "dependencies": {
-        "@near-js/accounts": "1.4.1",
-        "@near-js/crypto": "1.4.2",
-        "@near-js/keystores": "0.2.2",
-        "@near-js/keystores-browser": "0.2.2",
-        "@near-js/keystores-node": "0.1.2",
-        "@near-js/providers": "1.0.3",
-        "@near-js/signers": "0.2.2",
-        "@near-js/transactions": "1.3.3",
-        "@near-js/types": "0.3.1",
-        "@near-js/utils": "1.1.0",
-        "@near-js/wallet-account": "1.3.3",
-        "@noble/curves": "1.8.1",
-        "borsh": "1.0.0",
-        "depd": "2.0.0",
-        "http-errors": "1.7.2",
-        "near-abi": "0.2.0",
-        "node-fetch": "2.6.7"
-      }
-    },
-    "node_modules/near-api-js/node_modules/borsh": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/borsh/-/borsh-1.0.0.tgz",
-      "integrity": "sha512-fSVWzzemnyfF89EPwlUNsrS5swF5CrtiN4e+h0/lLf4dz2he4L3ndM20PS9wj7ICSkXJe/TQUHdaPTq15b1mNQ==",
-      "license": "Apache-2.0",
-      "peer": true
-    },
-    "node_modules/near-api-js/node_modules/node-fetch": {
-      "version": "2.6.7",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "whatwg-url": "^5.0.0"
-      },
-      "engines": {
-        "node": "4.x || >=6.0.0"
-      },
-      "peerDependencies": {
-        "encoding": "^0.1.0"
-      },
-      "peerDependenciesMeta": {
-        "encoding": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/next": {
-      "version": "16.1.1",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.1.1.tgz",
-      "integrity": "sha512-QI+T7xrxt1pF6SQ/JYFz95ro/mg/1Znk5vBebsWwbpejj1T0A23hO7GYEaVac9QUOT2BIMiuzm0L99ooq7k0/w==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.1.6.tgz",
+      "integrity": "sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "16.1.1",
+        "@next/env": "16.1.6",
         "@swc/helpers": "0.5.15",
         "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001579",
@@ -14515,14 +14897,14 @@
         "node": ">=20.9.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.1.1",
-        "@next/swc-darwin-x64": "16.1.1",
-        "@next/swc-linux-arm64-gnu": "16.1.1",
-        "@next/swc-linux-arm64-musl": "16.1.1",
-        "@next/swc-linux-x64-gnu": "16.1.1",
-        "@next/swc-linux-x64-musl": "16.1.1",
-        "@next/swc-win32-arm64-msvc": "16.1.1",
-        "@next/swc-win32-x64-msvc": "16.1.1",
+        "@next/swc-darwin-arm64": "16.1.6",
+        "@next/swc-darwin-x64": "16.1.6",
+        "@next/swc-linux-arm64-gnu": "16.1.6",
+        "@next/swc-linux-arm64-musl": "16.1.6",
+        "@next/swc-linux-x64-gnu": "16.1.6",
+        "@next/swc-linux-x64-musl": "16.1.6",
+        "@next/swc-win32-arm64-msvc": "16.1.6",
+        "@next/swc-win32-x64-msvc": "16.1.6",
         "sharp": "^0.34.4"
       },
       "peerDependencies": {
@@ -14675,16 +15057,15 @@
       }
     },
     "node_modules/node-mock-http": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/node-mock-http/-/node-mock-http-1.0.3.tgz",
-      "integrity": "sha512-jN8dK25fsfnMrVsEhluUTPkBFY+6ybu7jSB1n+ri/vOGjJxU8J9CZhpSGkHXSkFjtUhbmoncG/YG9ta5Ludqog==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/node-mock-http/-/node-mock-http-1.0.4.tgz",
+      "integrity": "sha512-8DY+kFsDkNXy1sJglUfuODx1/opAGJGyrTuFqEoN90oRc2Vk0ZbD4K2qmKXBBEhZQzdKHIVfEJpDU8Ak2NJEvQ==",
       "license": "MIT"
     },
     "node_modules/node-releases": {
       "version": "2.0.27",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
       "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/nofilter": {
@@ -14755,11 +15136,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object-is": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
+      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -14769,7 +15165,6 @@
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
       "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.8",
@@ -15059,16 +15454,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -15712,43 +16097,22 @@
       }
     },
     "node_modules/query-string": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.3.tgz",
-      "integrity": "sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==",
-      "license": "MIT",
-      "dependencies": {
-        "decode-uri-component": "^0.2.2",
-        "filter-obj": "^1.1.0",
-        "split-on-first": "^1.0.0",
-        "strict-uri-encode": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.3.tgz",
+      "integrity": "sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==",
+      "license": "MIT",
+      "dependencies": {
+        "decode-uri-component": "^0.2.2",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
     "node_modules/quick-format-unescaped": {
       "version": "4.0.4",
@@ -16563,17 +16927,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/reusify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
-      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/rfdc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
@@ -16581,23 +16934,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/ripemd160": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.3.tgz",
@@ -16616,6 +16952,7 @@
       "resolved": "https://registry.npmjs.org/ripple-address-codec/-/ripple-address-codec-5.0.0.tgz",
       "integrity": "sha512-de7osLRH/pt5HX2xw2TRJtbdLLWHu0RXirpQaEeCnWKY5DYHykh3ETSkofvm0aX0LJiV7kwkegJxQkmbO94gWw==",
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "@scure/base": "^1.1.3",
         "@xrplf/isomorphic": "^1.0.0"
@@ -16625,10 +16962,11 @@
       }
     },
     "node_modules/ripple-binary-codec": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/ripple-binary-codec/-/ripple-binary-codec-2.5.1.tgz",
-      "integrity": "sha512-rzN4GTorLRH0bQD7Tccgn6Eq4aunMhZaUTXDEUJ+3xrjo0m1Av5AY1Doc/jsCIaxPIAnyoVg5rWlmI93U7pGdg==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/ripple-binary-codec/-/ripple-binary-codec-2.6.0.tgz",
+      "integrity": "sha512-OJBRxjjalO7SrIwydHhcC9wOFLoeKcawoqSEfGZilAtXROYTWHx5kTly2VcUMmMMSEYIh1+yEstBtLBObNjeKQ==",
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "@xrplf/isomorphic": "^1.0.1",
         "bignumber.js": "^9.0.0",
@@ -16643,6 +16981,7 @@
       "resolved": "https://registry.npmjs.org/ripple-keypairs/-/ripple-keypairs-2.0.0.tgz",
       "integrity": "sha512-b5rfL2EZiffmklqZk1W+dvSy97v3V/C7936WxCCgDynaGPp7GE6R2XO7EU9O2LlM/z95rj870IylYnOQs+1Rag==",
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "@noble/curves": "^1.0.0",
         "@xrplf/isomorphic": "^1.0.0",
@@ -16652,74 +16991,153 @@
         "node": ">= 16"
       }
     },
-    "node_modules/rope-sequence": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
-      "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==",
-      "license": "MIT"
-    },
-    "node_modules/rou3": {
-      "version": "0.7.10",
-      "resolved": "https://registry.npmjs.org/rou3/-/rou3-0.7.10.tgz",
-      "integrity": "sha512-aoFj6f7MJZ5muJ+Of79nrhs9N3oLGqi2VEMe94Zbkjb6Wupha46EuoYgpWSOZlXww3bbd8ojgXTAA2mzimX5Ww==",
-      "license": "MIT"
-    },
-    "node_modules/rpc-websockets": {
-      "version": "9.3.2",
-      "resolved": "https://registry.npmjs.org/rpc-websockets/-/rpc-websockets-9.3.2.tgz",
-      "integrity": "sha512-VuW2xJDnl1k8n8kjbdRSWawPRkwaVqUQNjE1TdeTawf0y0abGhtVJFTXCLfgpgGDBkO/Fj6kny8Dc/nvOW78MA==",
-      "license": "LGPL-3.0-only",
+    "node_modules/ripple-keypairs/node_modules/@noble/curves": {
+      "version": "1.9.7",
+      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.9.7.tgz",
+      "integrity": "sha512-gbKGcRUYIjA3/zCCNaWDciTMFI0dCkvou3TL8Zmy5Nc7sJ47a0jtOeZoTaMxkuqRo9cRhjOdZJXegxYE5FN/xw==",
+      "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "@swc/helpers": "^0.5.11",
-        "@types/uuid": "^8.3.4",
-        "@types/ws": "^8.2.2",
-        "buffer": "^6.0.3",
-        "eventemitter3": "^5.0.1",
-        "uuid": "^8.3.2",
-        "ws": "^8.5.0"
+        "@noble/hashes": "1.8.0"
+      },
+      "engines": {
+        "node": "^14.21.3 || >=16"
       },
       "funding": {
-        "type": "paypal",
-        "url": "https://paypal.me/kozjak"
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/ripple-lib": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/ripple-lib/-/ripple-lib-1.10.1.tgz",
+      "integrity": "sha512-OQk+Syl2JfxKxV2KuF/kBMtnh012I5tNnziP3G4WDGCGSIAgeqkOgkR59IQ0YDNrs1YW8GbApxrdMSRi/QClcA==",
+      "deprecated": "ripple-lib is deprecated. Please migrate to xrpl.js using this migration guide: https://xrpl.org/xrpljs2-migration-guide.html",
+      "license": "ISC",
+      "dependencies": {
+        "@types/lodash": "^4.14.136",
+        "@types/ws": "^7.2.0",
+        "bignumber.js": "^9.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "jsonschema": "1.2.2",
+        "lodash": "^4.17.4",
+        "ripple-address-codec": "^4.1.1",
+        "ripple-binary-codec": "^1.1.3",
+        "ripple-keypairs": "^1.0.3",
+        "ripple-lib-transactionparser": "0.8.2",
+        "ws": "^7.2.0"
       },
-      "optionalDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
+      "engines": {
+        "node": ">=10.13.0",
+        "yarn": "^1.15.2"
+      }
+    },
+    "node_modules/ripple-lib-transactionparser": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/ripple-lib-transactionparser/-/ripple-lib-transactionparser-0.8.2.tgz",
+      "integrity": "sha512-1teosQLjYHLyOQrKUQfYyMjDR3MAq/Ga+MJuLUfpBMypl4LZB4bEoMcmG99/+WVTEiZOezJmH9iCSvm/MyxD+g==",
+      "license": "ISC",
+      "dependencies": {
+        "bignumber.js": "^9.0.0",
+        "lodash": "^4.17.15"
       }
     },
-    "node_modules/rpc-websockets/node_modules/@types/ws": {
-      "version": "8.18.1",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
-      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+    "node_modules/ripple-lib/node_modules/base-x": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.11.tgz",
+      "integrity": "sha512-xz7wQ8xDhdyP7tQxwdteLYeFfS68tSMNCZ/Y37WJ4bhGfKPpqEIlmIyueQHqOyoPhE6xNUqjzRr8ra0eF9VRvA==",
       "license": "MIT",
       "dependencies": {
-        "@types/node": "*"
+        "safe-buffer": "^5.0.1"
       }
     },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
+    "node_modules/ripple-lib/node_modules/big-integer": {
+      "version": "1.6.52",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz",
+      "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==",
+      "license": "Unlicense",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/ripple-lib/node_modules/ripple-address-codec": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/ripple-address-codec/-/ripple-address-codec-4.3.1.tgz",
+      "integrity": "sha512-Qa3+9wKVvpL/xYtT6+wANsn0A1QcC5CT6IMZbRJZ/1lGt7gmwIfsrCuz1X0+LCEO7zgb+3UT1I1dc0k/5dwKQQ==",
+      "license": "ISC",
+      "dependencies": {
+        "base-x": "^3.0.9",
+        "create-hash": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/ripple-lib/node_modules/ripple-binary-codec": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/ripple-binary-codec/-/ripple-binary-codec-1.11.0.tgz",
+      "integrity": "sha512-g7+gs3T+NfoeW6vIq5dcN0CkIT4t/zwRzFxz8X2RzfbrWRnewPUKqQbmBgs05tXLX5NuWPaneiaAVpFpYBcdfw==",
+      "license": "ISC",
+      "dependencies": {
+        "assert": "^2.0.0",
+        "big-integer": "^1.6.48",
+        "buffer": "6.0.3",
+        "create-hash": "^1.2.0",
+        "decimal.js": "^10.2.0",
+        "ripple-address-codec": "^4.3.1"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/ripple-lib/node_modules/ripple-keypairs": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/ripple-keypairs/-/ripple-keypairs-1.3.1.tgz",
+      "integrity": "sha512-dmPlraWKJciFJxHcoubDahGnoIalG5e/BtV6HNDUs7wLXmtnLMHt6w4ed9R8MTL2zNrVPiIdI/HCtMMo0Tm7JQ==",
+      "license": "ISC",
+      "dependencies": {
+        "bn.js": "^5.1.1",
+        "brorand": "^1.0.5",
+        "elliptic": "^6.5.4",
+        "hash.js": "^1.0.3",
+        "ripple-address-codec": "^4.3.1"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/ripple-lib/node_modules/ws": {
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
         },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
+        "utf-8-validate": {
+          "optional": true
         }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rope-sequence": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
+      "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==",
+      "license": "MIT"
+    },
+    "node_modules/rou3": {
+      "version": "0.7.10",
+      "resolved": "https://registry.npmjs.org/rou3/-/rou3-0.7.10.tgz",
+      "integrity": "sha512-aoFj6f7MJZ5muJ+Of79nrhs9N3oLGqi2VEMe94Zbkjb6Wupha46EuoYgpWSOZlXww3bbd8ojgXTAA2mzimX5Ww==",
+      "license": "MIT"
+    },
     "node_modules/rxjs": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -16790,7 +17208,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
       "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -16819,27 +17236,6 @@
       "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
       "license": "MIT"
     },
-    "node_modules/secp256k1": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/secp256k1/-/secp256k1-5.0.1.tgz",
-      "integrity": "sha512-lDFs9AAIaWP9UCdtWrotXWWF9t8PWgQDcxqgAnpM9rMqxb3Oaq2J0thzPVSxBwdJgyQtkU/sYtFtbM1RSt/iYA==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "dependencies": {
-        "elliptic": "^6.5.7",
-        "node-addon-api": "^5.0.0",
-        "node-gyp-build": "^4.2.0"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/secp256k1/node_modules/node-addon-api": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz",
-      "integrity": "sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA==",
-      "license": "MIT"
-    },
     "node_modules/semver": {
       "version": "7.7.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
@@ -16912,13 +17308,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/setprototypeof": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
-      "license": "ISC",
-      "peer": true
-    },
     "node_modules/sha.js": {
       "version": "2.4.12",
       "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.12.tgz",
@@ -16939,19 +17328,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/sha1": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/sha1/-/sha1-1.1.1.tgz",
-      "integrity": "sha512-dZBS6OrMjtgVkopB1Gmo4RQCDKiZsqcpAQpkV/aaj+FCrCg8r4I4qMkDPQjBgLIxlmu9k4nUbWq6ohXahOneYA==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "charenc": ">= 0.0.1",
-        "crypt": ">= 0.0.1"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/sharp": {
       "version": "0.34.5",
       "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
@@ -17227,6 +17603,7 @@
       "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.5.tgz",
       "integrity": "sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "agent-base": "^7.1.2",
         "debug": "^4.3.4",
@@ -17328,16 +17705,6 @@
       "integrity": "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==",
       "license": "MIT"
     },
-    "node_modules/statuses": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -17362,21 +17729,6 @@
         "readable-stream": "^3.5.0"
       }
     },
-    "node_modules/stream-chain": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/stream-chain/-/stream-chain-2.2.5.tgz",
-      "integrity": "sha512-1TJmBx6aSWqZ4tx7aTpBDXK0/e2hhcNSTV8+CbFJtDjbb+I1mZ8lHit0Grw9GRT+6JbIrrDd8esncgBi8aBXGA==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/stream-json": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/stream-json/-/stream-json-1.9.1.tgz",
-      "integrity": "sha512-uWkjJ+2Nt/LO9Z/JyKZbMusL8Dkh97uUBTv3AJQ74y07lVahLY4eEFsPsE97pxYBwr8nnjMAIch5eqI0gPShyw==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "stream-chain": "^2.2.5"
-      }
-    },
     "node_modules/stream-shift": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.3.tgz",
@@ -17610,15 +17962,6 @@
         }
       }
     },
-    "node_modules/superstruct": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/superstruct/-/superstruct-2.0.2.tgz",
-      "integrity": "sha512-uV+TFRZdXsqXTL2pRvujROjdZQ4RAlBUS5BTh9IGm+jTqQntYThciG/qu57Gs69yjnVUSqdxF9YLmSnpupBW9A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -17699,18 +18042,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/text-encoding-utf-8": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/text-encoding-utf-8/-/text-encoding-utf-8-1.0.2.tgz",
-      "integrity": "sha512-8bw4MY9WjdsD2aMtO0OzOCY3pXGYNx2d2FfHRVUKkiCPDWjKuOlhLVASS+pD7VkLTVjW268LYJHwsnPFlBpbAg=="
-    },
-    "node_modules/text-table": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/thread-stream": {
       "version": "0.15.2",
       "resolved": "https://registry.npmjs.org/thread-stream/-/thread-stream-0.15.2.tgz",
@@ -17862,16 +18193,6 @@
         "node": ">=8.0"
       }
     },
-    "node_modules/toidentifier": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
-      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
     "node_modules/toml": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",
@@ -18030,19 +18351,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/type-fest": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-      "dev": true,
-      "license": "(MIT OR CC0-1.0)",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/typed-array-buffer": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
@@ -18157,12 +18465,13 @@
           "url": "https://paypal.me/faisalman"
         }
       ],
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/ua-parser-js": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-2.0.6.tgz",
-      "integrity": "sha512-EmaxXfltJaDW75SokrY4/lXMrVyXomE/0FpIIqP2Ctic93gK7rlme55Cwkz8l3YZ6gqf94fCU7AnIkidd/KXPg==",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-2.0.8.tgz",
+      "integrity": "sha512-BdnBM5waFormdrOFBU+cA90R689V0tWUWlIG2i30UXxElHjuCu5+dOV2Etw3547jcQ/yaLtPm9wrqIuOY2bSJg==",
       "funding": [
         {
           "type": "opencollective",
@@ -18178,6 +18487,7 @@
         }
       ],
       "license": "AGPL-3.0-or-later",
+      "peer": true,
       "dependencies": {
         "detect-europe-js": "^0.1.2",
         "is-standalone-pwa": "^0.1.1",
@@ -18197,9 +18507,9 @@
       "license": "MIT"
     },
     "node_modules/ufo": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz",
-      "integrity": "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==",
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.3.tgz",
+      "integrity": "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==",
       "license": "MIT"
     },
     "node_modules/uint8array-tools": {
@@ -18246,10 +18556,11 @@
       "license": "MIT"
     },
     "node_modules/undici-types": {
-      "version": "7.16.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
-      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
-      "license": "MIT"
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.20.0.tgz",
+      "integrity": "sha512-PZDAAlMkNw5ZzN/ebfyrwzrMWfIf7Jbn9iM/I6SF456OKrb2wnfqVowaxEY/cMAM8MjFu1zhdpJyA0L+rTYwNw==",
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/unfetch": {
       "version": "4.2.0",
@@ -18461,7 +18772,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.1.tgz",
       "integrity": "sha512-R9NcHbbZ45RoWfTdhn1J9SS7zxNvlddv4YRrHTUaFdtjbmfncfedB45EC9IaqJQ97iAR1GZgOfyRQO+ExIF6EQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -18580,18 +18890,17 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/utf-8-validate": {
-      "version": "5.0.10",
-      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
-      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
-      "hasInstallScript": true,
+    "node_modules/util": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
-        "node-gyp-build": "^4.3.0"
-      },
-      "engines": {
-        "node": ">=6.14.2"
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "which-typed-array": "^1.1.2"
       }
     },
     "node_modules/util-deprecate": {
@@ -18609,21 +18918,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "license": "MIT",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
-    "node_modules/uuid4": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/uuid4/-/uuid4-2.0.3.tgz",
-      "integrity": "sha512-CTpAkEVXMNJl2ojgtpLXHgz23dh8z81u6/HEPiQFOvBc/c2pde6TVHmH4uwY0d/GLF3tb7+VDAj4+2eJaQSdZQ==",
-      "license": "ISC"
-    },
     "node_modules/valtio": {
       "version": "1.11.2",
       "resolved": "https://registry.npmjs.org/valtio/-/valtio-1.11.2.tgz",
@@ -18965,9 +19259,9 @@
       "license": "ISC"
     },
     "node_modules/ws": {
-      "version": "8.18.3",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
-      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
       "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
@@ -18998,6 +19292,7 @@
       "resolved": "https://registry.npmjs.org/xrpl/-/xrpl-4.4.3.tgz",
       "integrity": "sha512-vi2OjuNkiaP8nv1j+nqHp8GZwwEjO6Y8+j/OuVMg6M4LwXEwyHdIj33dlg7cyY1Lw5+jb9HqFOQvABhaywVbTQ==",
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "@scure/bip32": "^1.3.1",
         "@scure/bip39": "^1.2.1",
@@ -19014,16 +19309,6 @@
         "node": ">=18.0.0"
       }
     },
-    "node_modules/xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=0.4"
-      }
-    },
     "node_modules/y18n": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
@@ -19034,7 +19319,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/yaml": {
@@ -19204,9 +19488,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.13.tgz",
-      "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.5.tgz",
+      "integrity": "sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
diff --git a/package.json b/package.json
index 084fd8604..72ed485d1 100644
--- a/package.json
+++ b/package.json
@@ -25,8 +25,9 @@
   },
   "dependencies": {
     "@countrystatecity/countries": "^1.0.4",
-    "@creit.tech/stellar-wallets-kit": "^1.7.6",
+    "@creit.tech/stellar-wallets-kit": "^1.5.0",
     "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@gsap/react": "^2.1.2",
@@ -35,34 +36,37 @@
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-aspect-ratio": "^1.1.7",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-context-menu": "^2.2.15",
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-direction": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-hover-card": "^1.1.14",
-    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-menubar": "^1.1.15",
     "@radix-ui/react-navigation-menu": "^1.2.13",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-radio-group": "^1.3.7",
     "@radix-ui/react-scroll-area": "^1.2.9",
-    "@radix-ui/react-select": "^2.2.5",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slider": "^1.3.5",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.5",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toggle": "^1.1.9",
-    "@radix-ui/react-toggle-group": "^1.1.10",
-    "@radix-ui/react-tooltip": "^1.2.7",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-three/drei": "^10.7.6",
     "@react-three/fiber": "^9.3.0",
     "@stellar/freighter-api": "^4.1.0",
     "@stellar/stellar-sdk": "^13.3.0",
+    "@tabler/icons-react": "^3.36.1",
     "@tailwindcss/postcss": "^4",
+    "@tanstack/react-table": "^8.21.3",
     "@tiptap/core": "^3.7.2",
     "@tiptap/extension-blockquote": "^3.7.2",
     "@tiptap/extension-bold": "^3.7.2",
@@ -109,8 +113,8 @@
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.525.0",
     "marked": "^16.3.0",
-    "media-chrome": "^4.15.1",
-    "motion": "^12.23.24",
+    "media-chrome": "^4.17.2",
+    "motion": "^12.30.0",
     "next": "^16.1.1",
     "next-auth": "^5.0.0-beta.29",
     "next-themes": "^0.4.6",
@@ -125,12 +129,12 @@
     "recharts": "^2.15.4",
     "remark-gfm": "^4.0.1",
     "socket.io-client": "^4.8.1",
-    "sonner": "^2.0.6",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "three": "^0.180.0",
     "tw-animate-css": "^1.3.6",
     "vaul": "^1.1.2",
-    "zod": "^4.0.10",
+    "zod": "^4.3.5",
     "zustand": "^5.0.6"
   },
   "devDependencies": {
@@ -140,7 +144,7 @@
     "@types/react-dom": "19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.38.0",
     "@typescript-eslint/parser": "^8.38.0",
-    "eslint": "^8.57.0",
+    "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.3",
     "eslint-plugin-react": "^7.37.5",
diff --git a/public/pattern.ssvg b/public/pattern.svg
similarity index 100%
rename from public/pattern.ssvg
rename to public/pattern.svg
diff --git a/types/notifications.ts b/types/notifications.ts
index ae00d943d..c33b71ec7 100644
--- a/types/notifications.ts
+++ b/types/notifications.ts
@@ -84,7 +84,7 @@ export enum NotificationType {
  * Notification data structure matching backend API response
  */
 export interface Notification {
-  _id: string;
+  id: string;
   userId: {
     type: string;
   };
@@ -135,10 +135,10 @@ export interface Notification {
  * Paginated notifications response
  */
 export interface NotificationsResponse {
-  data: Notification[];
+  notifications: Notification[];
   total: number;
-  page: number;
   limit: number;
+  offset: number;
 }
 
 /**
diff --git a/types/user.ts b/types/user.ts
index 76f9c1edb..c78760e97 100644
--- a/types/user.ts
+++ b/types/user.ts
@@ -70,11 +70,11 @@ export interface UserMetadata {
 export interface Project {
   id: string;
   title: string;
-  description: string;
+  vision: string;
   category: string;
-  status: ProjectStatus;
-  banner: string | null;
-  logo: string;
+  status: string; // Changed from ProjectStatus to string
+  banner?: string | null;
+  logo?: string | null;
   createdAt: string;
   updatedAt?: string;
 }
@@ -90,14 +90,15 @@ export interface ActivityMetadata {
 
 export interface Activity {
   id: string;
-  type: ActivityType;
+  type: string; // Changed from ActivityType to string to match API
   userId: string;
-  projectId: string | null;
-  organizationId: string | null;
-  metadata: ActivityMetadata;
+  projectId?: string | null;
+  organizationId?: string | null;
+  metadata?: any;
   createdAt: string;
   updatedAt: string;
-  project: Project | null;
+  project?: any;
+  organization?: any;
 }
 
 export interface UserBadge {
@@ -153,26 +154,70 @@ export interface User {
   name: string;
   email: string;
   emailVerified: boolean;
-  image: string;
+  image?: string;
   createdAt: string;
   updatedAt: string;
-  lastLoginMethod: LoginMethod;
-  role: UserRole;
+  lastLoginMethod?: string;
+  role: string;
   banned: boolean;
-  banReason: string | null;
-  banExpires: string | null;
+  banReason?: string | null;
+  banExpires?: string | null;
   username: string;
   displayUsername: string;
+  metadata?: any;
   twoFactorEnabled: boolean;
-  members: OrganizationMembership[];
-  // organizations: Organization[];
-  stats: Stats;
-  profile: UserProfileData;
-  projects: Project[];
-  activities: Activity[];
-  badges: UserBadge[];
-  grantApplicationsAsApplicant: GrantApplication[];
-  hackathonSubmissionsAsParticipant: HackathonSubmission[];
+  members?: Array<{
+    id: string;
+    organizationId: string;
+    userId: string;
+    role: string;
+    createdAt: string;
+    organization: {
+      id: string;
+      name: string;
+      slug: string;
+      logo: string;
+      createdAt: string;
+      _count: {
+        hackathons: number;
+        members: number;
+      };
+    };
+  }>;
+  projects?: Array<{
+    id: string;
+    title: string;
+    vision: string;
+    category: string;
+    status: string;
+    banner?: string | null;
+    logo?: string | null;
+    createdAt: string;
+  }>;
+  activities?: Array<{
+    id: string;
+    type: string;
+    userId: string;
+    projectId?: string | null;
+    organizationId?: string | null;
+    metadata?: any;
+    createdAt: string;
+    updatedAt: string;
+    project?: any;
+  }>;
+  userBadges?: any[];
+  grantApplicationsAsApplicant?: any[];
+  hackathonSubmissionsAsParticipant?: Array<{
+    id: string;
+    status: string;
+    rank?: number | null;
+    submittedAt: string;
+  }>;
+  profile?: any;
+  stats?: {
+    followers: number;
+    following: number;
+  };
 }
 
 export interface SessionUser extends User {}
@@ -235,13 +280,7 @@ export type UserWithoutSensitiveData = Omit<
 
 export type PublicUserProfile = Pick<
   User,
-  | 'id'
-  | 'name'
-  | 'username'
-  | 'displayUsername'
-  | 'image'
-  | 'projects'
-  | 'badges'
+  'id' | 'name' | 'username' | 'displayUsername' | 'image' | 'projects'
 > & {
   metadata: {
     profile: UserProfileData;