diff --git a/app/(landing)/hackathons/[slug]/HackathonPageClient.tsx b/app/(landing)/hackathons/[slug]/HackathonPageClient.tsx
index 0c4d1adf3..3f38dce02 100644
--- a/app/(landing)/hackathons/[slug]/HackathonPageClient.tsx
+++ b/app/(landing)/hackathons/[slug]/HackathonPageClient.tsx
@@ -5,6 +5,8 @@ import { useRouter, useSearchParams, useParams } from 'next/navigation';
 import { useHackathonData } from '@/lib/providers/hackathonProvider';
 import { useRegisterHackathon } from '@/hooks/hackathon/use-register-hackathon';
 import { useLeaveHackathon } from '@/hooks/hackathon/use-leave-hackathon';
+import { useSubmission } from '@/hooks/hackathon/use-submission';
+import { useAuthStatus } from '@/hooks/use-auth';
 import { RegisterHackathonModal } from '@/components/hackathons/overview/RegisterHackathonModal';
 import { HackathonBanner } from '@/components/hackathons/hackathonBanner';
 import { HackathonNavTabs } from '@/components/hackathons/hackathonNavTabs';
@@ -45,6 +47,13 @@ export default function HackathonPageClient() {
     refreshCurrentHackathon,
   } = useHackathonData();
 
+  const { isAuthenticated } = useAuthStatus();
+
+  const { submission: mySubmission } = useSubmission({
+    hackathonSlugOrId: currentHackathon?.id || '',
+    autoFetch: !!currentHackathon && isAuthenticated,
+  });
+
   const timeline_Events = useTimelineEvents(currentHackathon, {
     includeEndDate: false,
     dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
@@ -232,7 +241,7 @@ export default function HackathonPageClient() {
   // Registration status
   const {
     isRegistered,
-    hasSubmitted,
+    hasSubmitted: participantHasSubmitted,
     setParticipant,
     register: registerForHackathon,
   } = useRegisterHackathon({
@@ -246,6 +255,8 @@ export default function HackathonPageClient() {
     organizationId: undefined,
   });
 
+  const hasSubmitted = !!mySubmission || participantHasSubmitted;
+
   // Leave hackathon functionality
   const { isLeaving, leave: leaveHackathon } = useLeaveHackathon({
     hackathonSlugOrId: currentHackathon?.id || '',
@@ -296,7 +307,7 @@ export default function HackathonPageClient() {
   };
 
   const handleSubmitClick = () => {
-    router.push('?tab=submission');
+    router.push(`/hackathons/${currentHackathon?.slug}/submit`);
   };
 
   const handleViewSubmissionClick = () => {
@@ -308,10 +319,25 @@ export default function HackathonPageClient() {
   };
 
   // Set current hackathon on mount
+  const [isInitializing, setIsInitializing] = useState(true);
+
   useEffect(() => {
-    if (hackathonId) {
-      setCurrentHackathon(hackathonId);
-    }
+    let isMounted = true;
+
+    const initHackathon = async () => {
+      if (hackathonId) {
+        await setCurrentHackathon(hackathonId);
+      }
+      if (isMounted) {
+        setIsInitializing(false);
+      }
+    };
+
+    initHackathon();
+
+    return () => {
+      isMounted = false;
+    };
   }, [hackathonId, setCurrentHackathon]);
 
   // Handle tab changes from URL
@@ -349,7 +375,7 @@ export default function HackathonPageClient() {
   };
 
   // Loading state
-  if (loading) {
+  if (loading || isInitializing) {
     return <LoadingScreen />;
   }
 
diff --git a/app/(landing)/hackathons/[slug]/submit/page.tsx b/app/(landing)/hackathons/[slug]/submit/page.tsx
new file mode 100644
index 000000000..f5ca054e2
--- /dev/null
+++ b/app/(landing)/hackathons/[slug]/submit/page.tsx
@@ -0,0 +1,120 @@
+'use client';
+
+import { use, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useHackathonData } from '@/lib/providers/hackathonProvider';
+import { useAuthStatus } from '@/hooks/use-auth';
+import { useSubmission } from '@/hooks/hackathon/use-submission';
+import { SubmissionFormContent } from '@/components/hackathons/submissions/SubmissionForm';
+import LoadingScreen from '@/features/projects/components/CreateProjectModal/LoadingScreen';
+import { Button } from '@/components/ui/button';
+import { ArrowLeft } from 'lucide-react';
+import { toast } from 'sonner';
+
+export default function SubmitProjectPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const router = useRouter();
+  const { isAuthenticated, isLoading } = useAuthStatus();
+
+  const resolvedParams = use(params);
+  const hackathonSlug = resolvedParams.slug;
+
+  const {
+    currentHackathon,
+    loading: hackathonLoading,
+    setCurrentHackathon,
+  } = useHackathonData();
+
+  useEffect(() => {
+    if (hackathonSlug) {
+      setCurrentHackathon(hackathonSlug);
+    }
+  }, [hackathonSlug, setCurrentHackathon]);
+
+  const hackathonId = currentHackathon?.id || '';
+  const orgId = currentHackathon?.organizationId || undefined;
+
+  const {
+    submission: mySubmission,
+    isFetching: isLoadingMySubmission,
+    fetchMySubmission,
+  } = useSubmission({
+    hackathonSlugOrId: hackathonId || '',
+    autoFetch: isAuthenticated && !!hackathonId,
+  });
+
+  // Authentication check
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      toast.error('You must be logged in to submit a project');
+      router.push(
+        `/auth?mode=signin&callbackUrl=/hackathons/${hackathonSlug}/submit`
+      );
+    }
+  }, [isAuthenticated, isLoading, router, hackathonSlug]);
+
+  const handleClose = () => {
+    router.push(`/hackathons/${hackathonSlug}`);
+  };
+
+  const handleSuccess = () => {
+    fetchMySubmission();
+    toast.success(
+      mySubmission
+        ? 'Submission updated successfully!'
+        : 'Project submitted successfully!'
+    );
+    router.push(`/hackathons/${hackathonSlug}?tab=submission`);
+  };
+
+  if (
+    isLoading ||
+    hackathonLoading ||
+    isLoadingMySubmission ||
+    !currentHackathon
+  ) {
+    return <LoadingScreen />;
+  }
+
+  return (
+    <div className='min-h-screen bg-black px-5 py-5 text-white md:px-[50px] lg:px-[100px]'>
+      <div className='mx-auto max-w-[1200px] pb-10'>
+        <Button
+          variant='ghost'
+          className='mb-6 pl-0 text-gray-400 hover:text-white'
+          onClick={handleClose}
+        >
+          <ArrowLeft className='mr-2 h-4 w-4' />
+          Back to Hackathon
+        </Button>
+
+        <div className='min-h-[700px] overflow-hidden rounded-xl border border-gray-800 bg-gray-900/50 shadow-2xl'>
+          <SubmissionFormContent
+            hackathonSlugOrId={hackathonId}
+            organizationId={orgId}
+            submissionId={mySubmission?.id}
+            initialData={
+              mySubmission
+                ? {
+                    projectName: mySubmission.projectName,
+                    category: mySubmission.category,
+                    description: mySubmission.description,
+                    logo: mySubmission.logo,
+                    videoUrl: mySubmission.videoUrl,
+                    introduction: mySubmission.introduction,
+                    links: mySubmission.links,
+                    participationType: (mySubmission as any).participationType,
+                  }
+                : undefined
+            }
+            onSuccess={handleSuccess}
+            onClose={handleClose}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/hackathons/hackathonBanner.tsx b/components/hackathons/hackathonBanner.tsx
index dcb8ccd55..f08d27b0a 100644
--- a/components/hackathons/hackathonBanner.tsx
+++ b/components/hackathons/hackathonBanner.tsx
@@ -315,14 +315,14 @@ export function HackathonBanner({
             {status === 'ongoing' &&
               isRegistered &&
               hasSubmitted &&
-              onViewSubmissionClick && (
+              onSubmitClick && (
                 <Button
-                  onClick={onViewSubmissionClick}
+                  onClick={onSubmitClick}
                   variant='outline'
                   className='w-full border-gray-700 bg-transparent py-5 text-gray-300 hover:bg-gray-900'
                 >
                   <FileText className='mr-2 h-4 w-4' />
-                  View Submission
+                  Edit Submission
                 </Button>
               )}
 
diff --git a/components/hackathons/hackathonStickyCard.tsx b/components/hackathons/hackathonStickyCard.tsx
index 470562408..9a4a9c2a0 100644
--- a/components/hackathons/hackathonStickyCard.tsx
+++ b/components/hackathons/hackathonStickyCard.tsx
@@ -238,20 +238,17 @@ export function HackathonStickyCard(props: HackathonStickyCardProps) {
               </Button>
             )}
 
-            {/* View Submission Button */}
-            {status === 'ongoing' &&
-              isRegistered &&
-              hasSubmitted &&
-              onViewSubmissionClick && (
-                <Button
-                  onClick={onViewSubmissionClick}
-                  variant='outline'
-                  className='w-full border-gray-700 py-4 text-sm text-gray-300 hover:bg-gray-900'
-                >
-                  <FileText className='mr-1.5 h-3.5 w-3.5' />
-                  View Submission
-                </Button>
-              )}
+            {/* Edit / View Submission Button */}
+            {status === 'ongoing' && isRegistered && hasSubmitted && (
+              <Button
+                onClick={onSubmitClick}
+                variant='outline'
+                className='w-full border-gray-700 py-4 text-sm text-gray-300 hover:bg-gray-900'
+              >
+                <FileText className='mr-1.5 h-3.5 w-3.5' />
+                Edit Submission
+              </Button>
+            )}
 
             {/* Find Team Button */}
             {status === 'ongoing' &&
diff --git a/components/hackathons/submissions/SubmissionForm.tsx b/components/hackathons/submissions/SubmissionForm.tsx
index 3c48a5347..1604189b6 100644
--- a/components/hackathons/submissions/SubmissionForm.tsx
+++ b/components/hackathons/submissions/SubmissionForm.tsx
@@ -125,6 +125,7 @@ interface SubmissionFormContentProps {
   initialData?: Partial<SubmissionFormDataLocal>;
   submissionId?: string;
   onSuccess?: () => void;
+  onClose?: () => void;
 }
 
 const INITIAL_STEPS: Step[] = [
@@ -198,8 +199,19 @@ const SubmissionFormContent: React.FC<SubmissionFormContentProps> = ({
   initialData,
   submissionId,
   onSuccess,
+  onClose,
 }) => {
-  const { collapse, isExpanded: open } = useExpandableScreen();
+  // Use context carefully since it might not be available when used standalone
+  let collapse = () => {};
+  let open = true;
+  try {
+    const expandableCtx = useExpandableScreen();
+    collapse = expandableCtx.collapse;
+    open = expandableCtx.isExpanded;
+  } catch (e) {
+    // Standalone mode, not in ExpandableScreen
+  }
+
   const { currentHackathon } = useHackathonData();
   const { user } = useAuthStatus();
 
@@ -773,7 +785,11 @@ const SubmissionFormContent: React.FC<SubmissionFormContentProps> = ({
       } else {
         await create(submissionData);
       }
-      collapse();
+      if (onClose) {
+        onClose();
+      } else {
+        collapse();
+      }
       onSuccess?.();
     } catch {
       // Error handled in hook
@@ -1503,22 +1519,31 @@ const SubmissionFormContent: React.FC<SubmissionFormContentProps> = ({
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit(onSubmit)}
-          className='flex flex-1 gap-8 overflow-y-auto px-10 py-6'
+          className='flex flex-1 flex-col gap-6 overflow-y-auto px-4 py-6 sm:px-10 md:flex-row md:gap-8'
         >
-          <div className='sticky top-0 h-fit'>
+          <div className='mt-4 h-fit w-full md:sticky md:top-0 md:mt-0 md:w-auto'>
             <Stepper steps={steps} />
           </div>
-          <div className='flex flex-1 flex-col space-y-6'>
+          <div className='flex w-full flex-1 flex-col space-y-6'>
             {renderStepContent()}
             <div className='mt-auto flex justify-between pt-6 pb-6'>
               <Button
                 type='button'
                 variant='outline'
-                onClick={handleBack}
-                disabled={currentStep === 0}
+                onClick={() => {
+                  if (currentStep > 0) {
+                    handleBack();
+                  } else {
+                    if (onClose) {
+                      onClose();
+                    } else {
+                      collapse();
+                    }
+                  }
+                }}
                 className='border-gray-700 text-white hover:bg-gray-800'
               >
-                Back
+                {currentStep === 0 ? 'Cancel' : 'Back'}
               </Button>
               {currentStep < steps.length - 1 ? (
                 <Button
@@ -1568,6 +1593,8 @@ const SubmissionFormContent: React.FC<SubmissionFormContentProps> = ({
   );
 };
 
+export { SubmissionFormContent };
+
 interface SubmissionScreenWrapperProps extends SubmissionFormContentProps {
   children: React.ReactNode;
 }
diff --git a/components/hackathons/submissions/submissionCard.tsx b/components/hackathons/submissions/submissionCard.tsx
index f18b65121..1f0d6e59a 100644
--- a/components/hackathons/submissions/submissionCard.tsx
+++ b/components/hackathons/submissions/submissionCard.tsx
@@ -164,39 +164,39 @@ const SubmissionCard = ({
           >
             {status}
           </Badge>
-
           {isMySubmission && !isDeadlinePassed && (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  className='h-8 w-8 p-0 text-gray-400 hover:text-white'
-                  onClick={e => e.stopPropagation()}
-                >
-                  <MoreHorizontal className='h-4 w-4' />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align='end'
-                className='border-gray-800 bg-black text-white'
-              >
-                <DropdownMenuItem
-                  onClick={handleEditClick}
-                  className='cursor-pointer text-gray-300 focus:bg-gray-800 focus:text-white'
-                >
-                  <Edit className='mr-2 h-4 w-4' />
-                  Edit Submission
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={handleDeleteClick}
-                  className='cursor-pointer text-red-500 focus:bg-red-900/20 focus:text-red-400'
+            <div onClick={e => e.stopPropagation()}>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant='ghost'
+                    size='sm'
+                    className='h-8 w-8 p-0 text-gray-400 hover:text-white'
+                  >
+                    <MoreHorizontal className='h-4 w-4' />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  align='end'
+                  className='border-gray-800 bg-black text-white'
                 >
-                  <Trash className='mr-2 h-4 w-4' />
-                  Delete Submission
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
+                  <DropdownMenuItem
+                    onSelect={() => onEditClick?.()}
+                    className='cursor-pointer text-gray-300 focus:bg-gray-800 focus:text-white'
+                  >
+                    <Edit className='mr-2 h-4 w-4' />
+                    Edit Submission
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onSelect={() => onDeleteClick?.()}
+                    className='cursor-pointer text-red-500 focus:bg-red-900/20 focus:text-red-400'
+                  >
+                    <Trash className='mr-2 h-4 w-4' />
+                    Delete Submission
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
           )}
         </div>
       </div>
diff --git a/components/hackathons/submissions/submissionTab.tsx b/components/hackathons/submissions/submissionTab.tsx
index 61f17bec7..fff6a4974 100644
--- a/components/hackathons/submissions/submissionTab.tsx
+++ b/components/hackathons/submissions/submissionTab.tsx
@@ -54,6 +54,7 @@ interface SubmissionTabContentProps extends SubmissionTabProps {
   fetchMySubmission: () => Promise<any>;
   removeSubmission: (id: string) => Promise<void>;
   hackathonId: string;
+  hackathonSlug: string;
 }
 
 const SubmissionTabContent: React.FC<SubmissionTabContentProps> = ({
@@ -64,10 +65,10 @@ const SubmissionTabContent: React.FC<SubmissionTabContentProps> = ({
   fetchMySubmission,
   removeSubmission,
   hackathonId,
+  hackathonSlug,
 }) => {
   const { isAuthenticated } = useAuthStatus();
   const router = useRouter();
-  const { expand } = useExpandableScreen();
 
   const [viewMode, setViewMode] = useState<ViewMode>('grid');
 
@@ -82,7 +83,8 @@ const SubmissionTabContent: React.FC<SubmissionTabContentProps> = ({
     setSelectedSort,
     setSelectedCategory,
   } = useSubmissions();
-  const { currentHackathon } = useHackathonData();
+  const { currentHackathon, loading: isHackathonDataLoading } =
+    useHackathonData();
   const { status } = useHackathonStatus(
     currentHackathon?.startDate,
     currentHackathon?.submissionDeadline
@@ -129,6 +131,7 @@ const SubmissionTabContent: React.FC<SubmissionTabContentProps> = ({
         await removeSubmission(submissionToDelete);
         setSubmissionToDelete(null);
         toast.success('Submission deleted successfully');
+        window.location.reload();
       } catch (error) {
         reportError(error, {
           context: 'submission-delete',
@@ -263,6 +266,14 @@ const SubmissionTabContent: React.FC<SubmissionTabContentProps> = ({
         </div>
       </div>
 
+      {/* Loading State */}
+      {(isLoadingMySubmission || isHackathonDataLoading) && (
+        <div className='flex w-full items-center justify-center py-8'>
+          <Loader2 className='h-8 w-8 animate-spin text-[#a7f950]' />
+          <span className='ml-3 text-gray-400'>Loading submissions...</span>
+        </div>
+      )}
+
       {/* Submissions Grid with Create Button if no submission */}
       {!isLoadingMySubmission &&
         !mySubmission &&
@@ -274,7 +285,7 @@ const SubmissionTabContent: React.FC<SubmissionTabContentProps> = ({
               You haven't submitted a project yet.
             </p>
             <Button
-              onClick={expand}
+              onClick={() => router.push(`/hackathons/${hackathonSlug}/submit`)}
               disabled={isDeadlinePassed}
               className='bg-[#a7f950] text-black hover:bg-[#8fd93f] disabled:cursor-not-allowed disabled:opacity-50'
             >
@@ -287,7 +298,9 @@ const SubmissionTabContent: React.FC<SubmissionTabContentProps> = ({
         )}
 
       {/* Submissions Grid / List */}
-      {submissions.length > 0 || mySubmission ? (
+      {!isLoadingMySubmission &&
+      !isHackathonDataLoading &&
+      (submissions.length > 0 || mySubmission) ? (
         <div
           className={cn(
             viewMode === 'grid'
@@ -331,7 +344,9 @@ const SubmissionTabContent: React.FC<SubmissionTabContentProps> = ({
               isMySubmission={true}
               isDeadlinePassed={isDeadlinePassed}
               onViewClick={() => handleViewSubmission(mySubmission.id)}
-              onEditClick={expand}
+              onEditClick={() =>
+                router.push(`/hackathons/${hackathonSlug}/submit`)
+              }
               onDeleteClick={() => handleDeleteClick(mySubmission.id)}
               onUpvoteClick={() => {}}
               onCommentClick={() => {}}
@@ -494,33 +509,12 @@ const SubmissionTab: React.FC<SubmissionTabProps> = ({
     fetchMySubmission,
     remove: removeSubmission,
   } = useSubmission({
-    hackathonSlugOrId: hackathonSlug || '',
+    hackathonSlugOrId: hackathonId || '',
     autoFetch: isAuthenticated && !!hackathonId,
   });
 
   return (
-    <SubmissionScreenWrapper
-      hackathonSlugOrId={hackathonSlug}
-      organizationId={orgId}
-      initialData={
-        mySubmission
-          ? {
-              projectName: mySubmission.projectName,
-              category: mySubmission.category,
-              description: mySubmission.description,
-              logo: mySubmission.logo,
-              videoUrl: mySubmission.videoUrl,
-              introduction: mySubmission.introduction,
-              links: mySubmission.links,
-              participationType: (mySubmission as any).participationType, // added support in wrapper/modal
-            }
-          : undefined
-      }
-      submissionId={mySubmission?.id}
-      onSuccess={() => {
-        fetchMySubmission();
-      }}
-    >
+    <div className='w-full'>
       <SubmissionTabContent
         organizationId={orgId}
         isRegistered={isRegistered}
@@ -531,8 +525,9 @@ const SubmissionTab: React.FC<SubmissionTabProps> = ({
           await removeSubmission(id);
         }}
         hackathonId={hackathonId}
+        hackathonSlug={hackathonSlug}
       />
-    </SubmissionScreenWrapper>
+    </div>
   );
 };
 
diff --git a/components/organization/hackathons/settings/GeneralSettingsTab.tsx b/components/organization/hackathons/settings/GeneralSettingsTab.tsx
index 78fd89486..e0b2ce74d 100644
--- a/components/organization/hackathons/settings/GeneralSettingsTab.tsx
+++ b/components/organization/hackathons/settings/GeneralSettingsTab.tsx
@@ -12,7 +12,7 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
-import { AlertCircle } from 'lucide-react';
+import { AlertCircle, Loader2 } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
@@ -34,15 +34,14 @@ import {
 } from '@/lib/country-utils';
 import { toast } from 'sonner';
 
-const DynamicMinimalTiptap = dynamic(
-  () =>
-    import('@/components/ui/shadcn-io/minimal-tiptap').then(mod => ({
-      default: mod.MinimalTiptap,
-    })),
+const MDEditor = dynamic(
+  () => import('@uiw/react-md-editor').then(mod => mod.default),
   {
     ssr: false,
     loading: () => (
-      <div className='h-32 w-full animate-pulse rounded-lg bg-gray-800' />
+      <div className='flex h-32 w-full items-center justify-center rounded-xl border border-zinc-800 bg-zinc-900/30'>
+        <Loader2 className='h-6 w-6 animate-spin text-zinc-500' />
+      </div>
     ),
   }
 );
@@ -264,10 +263,32 @@ export default function GeneralSettingsTab({
                   Details <span className='text-red-400'>*</span>
                 </FormLabel>
                 <FormControl>
-                  <div className='[&_.tiptap]:prose-invert [&_.tiptap]:prose-p:text-zinc-200 [&_.tiptap]:prose-headings:text-white overflow-hidden rounded-[12px] border border-zinc-700 bg-zinc-900/80 [&_.tiptap]:min-h-[180px] [&_.tiptap]:p-4 [&_.tiptap]:text-zinc-100'>
-                    <DynamicMinimalTiptap
-                      content={field.value}
-                      onChange={field.onChange}
+                  <div className='overflow-hidden rounded-xl border border-zinc-800'>
+                    <MDEditor
+                      value={field.value}
+                      onChange={value => field.onChange(value || '')}
+                      height={300}
+                      data-color-mode='dark'
+                      preview='edit'
+                      hideToolbar={false}
+                      visibleDragbar={true}
+                      textareaProps={{
+                        placeholder:
+                          "Tell your hackathon's story...\n\nUse markdown for formatting: headings, lists, links, and more.",
+                        style: {
+                          fontSize: 14,
+                          lineHeight: 1.6,
+                          color: '#ffffff',
+                          backgroundColor: '#18181b', // matching InfoTab style
+                          fontFamily: 'inherit',
+                          border: 'none',
+                        },
+                      }}
+                      style={{
+                        backgroundColor: '#18181b', // matching InfoTab style
+                        color: '#ffffff',
+                        border: 'none',
+                      }}
                     />
                   </div>
                 </FormControl>
diff --git a/components/stepper/Stepper.tsx b/components/stepper/Stepper.tsx
index 68f7ae562..1c5bcee90 100644
--- a/components/stepper/Stepper.tsx
+++ b/components/stepper/Stepper.tsx
@@ -43,39 +43,57 @@ function Stepper({ steps }: StepperProps) {
   };
 
   return (
-    <div className='sticky top-0 flex w-full max-w-[400px] flex-col'>
+    <div className='mb-8 flex w-full flex-row items-center justify-between md:sticky md:top-0 md:mb-0 md:max-w-[400px] md:flex-col md:items-start md:justify-start'>
       {steps.map((step, index) => {
         const styles = getStepStyles(step.state);
         const isLastStep = index === steps.length - 1;
 
         return (
-          <figure key={index} className='flex gap-4'>
-            <div className='flex flex-col items-center'>
+          <figure
+            key={index}
+            className='group relative flex flex-1 flex-col items-center gap-2 md:flex-none md:flex-row md:items-start md:gap-4'
+          >
+            {/* Horizontal Line for Mobile (connects to next step circle) */}
+            {!isLastStep && (
+              <div
+                className={`absolute top-6 right-[calc(-50%+23px)] left-[calc(50%+23px)] h-[1.5px] border-t border-dashed ${styles.line} md:hidden`}
+              />
+            )}
+
+            <div className='z-10 flex flex-col items-center bg-black px-2 md:bg-transparent md:px-0'>
               {step.state === 'completed' ? (
-                <div className='bg-primary/25 flex size-[46px] items-center justify-center rounded-full'>
-                  <div className='bg-primary flex size-[32px] items-center justify-center rounded-full'>
-                    <Check className='text-background size-5' strokeWidth={4} />
+                <div className='bg-primary/25 flex size-[40px] items-center justify-center rounded-full md:size-[46px]'>
+                  <div className='bg-primary flex size-[28px] items-center justify-center rounded-full md:size-[32px]'>
+                    <Check
+                      className='text-background size-4 md:size-5'
+                      strokeWidth={4}
+                    />
                   </div>
                 </div>
               ) : (
                 <div
-                  className={`flex size-[46px] items-center justify-center rounded-full text-xl font-bold ${styles.circle}`}
+                  className={`flex size-[40px] items-center justify-center rounded-full text-lg font-bold md:size-[46px] md:text-xl ${styles.circle}`}
                 >
                   {index + 1}
                 </div>
               )}
+              {/* Vertical Line for Desktop */}
               {!isLastStep && (
                 <div
-                  className={`h-[49px] w-[1.5px] border-l border-dashed ${styles.line}`}
+                  className={`hidden h-[49px] w-[1.5px] border-l border-dashed md:block ${styles.line}`}
                 />
               )}
             </div>
 
-            <div className='flex flex-col gap-2 pt-1'>
-              <h4 className={`font-base font-medium ${styles.title}`}>
+            <div className='mt-1 flex flex-col items-center gap-1 pt-1 text-center md:mt-0 md:items-start md:gap-2 md:text-left'>
+              <h4
+                className={`text-xs font-medium sm:text-sm md:text-base ${styles.title}`}
+              >
                 {step.title}
               </h4>
-              <p className={`text-sm leading-[145%] ${styles.description}`}>
+              <p
+                className={`hidden text-sm leading-[145%] md:block ${styles.description}`}
+              >
                 {step.description}
               </p>
             </div>
diff --git a/hooks/hackathon/use-participants.ts b/hooks/hackathon/use-participants.ts
index dc287b90a..f6fe782bc 100644
--- a/hooks/hackathon/use-participants.ts
+++ b/hooks/hackathon/use-participants.ts
@@ -1,6 +1,7 @@
 import { useState, useMemo, useEffect } from 'react';
 import { useHackathonData } from '@/lib/providers/hackathonProvider';
 import { getTeamPosts, type TeamRecruitmentPost } from '@/lib/api/hackathons';
+import { getHackathonParticipants } from '@/lib/api/hackathon';
 import { reportError } from '@/lib/error-reporting';
 import { useParams } from 'next/navigation';
 
@@ -8,24 +9,36 @@ export function useParticipants() {
   const { currentHackathon } = useHackathonData();
   const params = useParams();
   const [teams, setTeams] = useState<TeamRecruitmentPost[]>([]);
+  const [apiParticipants, setApiParticipants] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
 
   const hackathonId = currentHackathon?.id || (params?.slug as string);
 
   // Fetch teams to get accurate team info and roles
   useEffect(() => {
     if (hackathonId) {
-      getTeamPosts(hackathonId, { limit: 50 })
-        .then(response => {
-          if (response.success && response.data) {
-            // Check if response.data is the array or if it's nested in .teams
+      setIsLoading(true);
+      Promise.all([
+        getTeamPosts(hackathonId, { limit: 50 }),
+        getHackathonParticipants(hackathonId, { limit: 100 }),
+      ])
+        .then(([teamsResponse, participantsResponse]) => {
+          if (teamsResponse.success && teamsResponse.data) {
             const teamsArray =
-              (response.data as any).teams ||
-              (Array.isArray(response.data) ? response.data : []);
+              (teamsResponse.data as any).teams ||
+              (Array.isArray(teamsResponse.data) ? teamsResponse.data : []);
             setTeams(teamsArray);
           }
+
+          if (participantsResponse.success && participantsResponse.data) {
+            setApiParticipants(participantsResponse.data.participants || []);
+          }
         })
         .catch(err => {
-          reportError(err, { context: 'participants-fetchTeams', hackathonId });
+          reportError(err, { context: 'participants-fetchData', hackathonId });
+        })
+        .finally(() => {
+          setIsLoading(false);
         });
     }
   }, [hackathonId]);
@@ -66,66 +79,143 @@ export function useParticipants() {
   }, [teams]);
 
   // Transform API participants to match expected Participant type
-  const participants: Array<{
-    id: string;
-    userId: string;
-    name: string;
-    username: string;
-    avatar: string;
-    hasSubmitted: boolean;
-    joinedDate: string;
-    role: string;
-    categories: string[];
-    projects: number;
-    followers: number;
-    teamId?: string;
-    teamName?: string;
-    isIndividual: boolean;
-  }> = (currentHackathon?.participants || []).map(apiParticipant => {
-    const apiUser = (apiParticipant.user || {}) as any;
-    const profile = (apiUser.profile || {}) as any;
-    const userId = apiParticipant.userId || apiUser.id;
-
-    // Enrich with team data from fetched teams
-    const teamInfo = userId ? userTeamMap.get(userId) : null;
-
-    // Robust name detection
-    const name =
-      apiUser.name ||
-      profile.name ||
-      `${profile.firstName || apiUser.firstName || ''} ${profile.lastName || apiUser.lastName || ''}`.trim() ||
-      apiUser.displayUsername ||
-      'Anonymous';
-
-    // Robust username detection
-    const username =
-      apiUser.username ||
-      profile.username ||
-      apiUser.displayUsername ||
-      apiUser.handle ||
-      'user';
-
-    const avatar = profile.image || profile.avatar || apiUser.image || '';
-
-    return {
-      id: apiParticipant.id,
-      userId: userId,
-      name,
-      username,
-      avatar,
-      hasSubmitted: !!apiParticipant.submission,
-      joinedDate: apiParticipant.registeredAt,
-      // Use role from Team if found, then from API, otherwise default
-      role: teamInfo?.role || (apiParticipant as any).role || 'Participant',
-      categories: [],
-      projects: 0,
-      followers: 0,
-      teamId: teamInfo?.teamId || apiParticipant.teamId,
-      teamName: teamInfo?.teamName || apiParticipant.teamName,
-      isIndividual:
-        apiParticipant.participationType === 'individual' && !teamInfo,
-    };
-  });
+  const participants = useMemo(() => {
+    // We want to merge data from both sources.
+    // currentHackathon?.participants has the Google avatars (user.image).
+    // apiParticipants has the stats (followers, projects).
+    const baseParticipants = currentHackathon?.participants || [];
+    const sourceParticipants =
+      apiParticipants.length > 0 ? apiParticipants : baseParticipants;
+
+    // Create a lookup map from base participants for fast merging
+    const baseLookup = new Map();
+    baseParticipants.forEach(p => {
+      const uId = p.userId || (p.user || {}).id || p.id;
+      if (uId) baseLookup.set(uId, p);
+    });
+
+    return sourceParticipants.map(apiParticipant => {
+      // Find matching base participant to merge data
+      const pId =
+        apiParticipant.userId ||
+        (apiParticipant.user || {}).id ||
+        apiParticipant.id;
+      const basePat = pId ? baseLookup.get(pId) : null;
+
+      // Merge user objects to ensure we don't lose avatar data (like Google profile images)
+      const apiUser = {
+        ...(basePat?.user || {}),
+        ...(apiParticipant.user || {}),
+        ...((apiParticipant.user || apiParticipant || {}) as any),
+      };
+      const profile = {
+        ...(basePat?.user?.profile || {}),
+        ...(apiUser.profile || {}),
+      } as any;
+
+      // Robust userId detection
+      const userId =
+        apiParticipant.userId ||
+        apiUser.id ||
+        apiUser.userId ||
+        (typeof apiParticipant.id === 'string' ? apiParticipant.id : undefined);
+
+      // Enrich with team data from fetched teams
+      const teamInfo = userId ? userTeamMap.get(userId) : null;
+
+      // Robust name detection
+      const name =
+        apiParticipant.name ||
+        basePat?.name ||
+        apiUser.name ||
+        profile.name ||
+        `${profile.firstName || apiUser.firstName || apiParticipant.firstName || ''} ${profile.lastName || apiUser.lastName || apiParticipant.lastName || ''}`.trim() ||
+        apiUser.displayUsername ||
+        apiParticipant.displayUsername ||
+        apiUser.displayName ||
+        apiParticipant.displayName ||
+        'Anonymous';
+
+      // Robust username detection
+      const username =
+        apiParticipant.username ||
+        basePat?.username ||
+        apiUser.username ||
+        profile.username ||
+        apiUser.displayUsername ||
+        apiParticipant.displayUsername ||
+        apiUser.handle ||
+        apiParticipant.handle ||
+        'user';
+
+      const avatar =
+        profile.image ||
+        profile.avatar ||
+        profile.avatarUrl ||
+        profile.imageUrl ||
+        profile.picture ||
+        profile.photoURL ||
+        apiUser.image ||
+        apiUser.avatar ||
+        apiUser.avatarUrl ||
+        apiUser.imageUrl ||
+        apiUser.picture ||
+        apiUser.photo ||
+        apiUser.photoURL ||
+        apiParticipant.avatar ||
+        apiParticipant.image ||
+        apiParticipant.avatarUrl ||
+        apiParticipant.imageUrl ||
+        apiParticipant.picture ||
+        apiParticipant.photo ||
+        '/placeholder.svg';
+
+      // Get joined date - prefer registeredAt
+      const joinedDate =
+        apiParticipant.registeredAt ||
+        basePat?.registeredAt ||
+        apiParticipant.createdAt ||
+        new Date().toISOString();
+
+      // Get stats if available in enriched profile or participant object
+      const userStats = (apiParticipant as any).userStats || {};
+      const projectsCount =
+        apiParticipant.projects ??
+        userStats.projects ??
+        profile.projectsCount ??
+        0;
+      const followersCount =
+        apiParticipant.followers ??
+        userStats.followers ??
+        profile.followersCount ??
+        0;
+
+      return {
+        id: apiParticipant.id || basePat?.id,
+        userId: userId,
+        name: name === ' ' ? 'Anonymous' : name, // Fix empty space from trim
+        username,
+        avatar,
+        hasSubmitted: !!(apiParticipant.submission || basePat?.submission),
+        joinedDate,
+        // Use role from Team if found, then from API, otherwise default
+        role:
+          teamInfo?.role ||
+          (apiParticipant as any).role ||
+          (basePat as any)?.role ||
+          'Participant',
+        categories: apiParticipant.categories || basePat?.categories || [],
+        projects: projectsCount,
+        followers: followersCount,
+        teamId: teamInfo?.teamId || apiParticipant.teamId || basePat?.teamId,
+        teamName:
+          teamInfo?.teamName || apiParticipant.teamName || basePat?.teamName,
+        isIndividual:
+          (apiParticipant.participationType || basePat?.participationType) ===
+            'individual' && !teamInfo,
+      };
+    });
+  }, [apiParticipants, currentHackathon?.participants, userTeamMap]);
   const [searchTerm, setSearchTerm] = useState('');
   const [sortBy, setSortBy] = useState('newest');
   const [submissionFilter, setSubmissionFilter] = useState('all');
@@ -142,7 +232,7 @@ export function useParticipants() {
           p.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
           (p.role && p.role.toLowerCase().includes(searchTerm.toLowerCase())) ||
           (p.categories &&
-            p.categories.some(cat =>
+            p.categories.some((cat: string) =>
               cat.toLowerCase().includes(searchTerm.toLowerCase())
             ))
       );
@@ -162,7 +252,9 @@ export function useParticipants() {
         p =>
           (p.role && p.role.toLowerCase().includes(skillFilter)) ||
           (p.categories &&
-            p.categories.some(cat => cat.toLowerCase().includes(skillFilter)))
+            p.categories.some((cat: string) =>
+              cat.toLowerCase().includes(skillFilter)
+            ))
       );
     }
 
diff --git a/lib/providers/hackathonProvider.tsx b/lib/providers/hackathonProvider.tsx
index 11261f04d..e6b26fbbe 100644
--- a/lib/providers/hackathonProvider.tsx
+++ b/lib/providers/hackathonProvider.tsx
@@ -322,8 +322,6 @@ export function HackathonDataProvider({
   // --------------------------------
   const setCurrentHackathon = useCallback(
     async (slug: string) => {
-      if (currentHackathonSlug === slug && fetchingRef.current) return;
-
       setCurrentHackathonSlug(slug);
       const data = await fetchHackathonBySlug(slug);