diff --git a/apps/hackathon/src/app/teams/[teamId]/submission/page.tsx b/apps/hackathon/src/app/teams/[teamId]/submission/page.tsx
index 6dd829a..17a2e4e 100644
--- a/apps/hackathon/src/app/teams/[teamId]/submission/page.tsx
+++ b/apps/hackathon/src/app/teams/[teamId]/submission/page.tsx
@@ -60,20 +60,46 @@ const SubmissionViewPage: FC = (): ReactElement => {
 
       <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {/* Status Banner */}
-        <div className="bg-green-50 dark:bg-green-900/20 border border-green-500 rounded-lg p-6 mb-6">
-          <div className="flex items-center space-x-3">
-            <span className="text-4xl">✅</span>
-            <div>
-              <h3 className="font-bold text-green-900 dark:text-green-100 text-lg">Project Submitted Successfully</h3>
-              <p className="text-green-700 dark:text-green-300 text-sm">
-                Submitted on {submittedDate}
-              </p>
-              <p className="text-green-600 dark:text-green-400 text-xs mt-1">
-                This submission is now read-only and cannot be edited
-              </p>
+        {submission.status === 'submitted' ? (
+          <div className="bg-green-50 dark:bg-green-900/20 border border-green-500 rounded-lg p-6 mb-6">
+            <div className="flex items-center space-x-3">
+              <span className="text-4xl">✅</span>
+              <div>
+                <h3 className="font-bold text-green-900 dark:text-green-100 text-lg">Project Submitted Successfully</h3>
+                <p className="text-green-700 dark:text-green-300 text-sm">
+                  Submitted on {submittedDate}
+                </p>
+                <p className="text-green-600 dark:text-green-400 text-xs mt-1">
+                  This submission is now read-only and cannot be edited
+                </p>
+              </div>
             </div>
           </div>
-        </div>
+        ) : submission.status === 'pending_verification' ? (
+          <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-500 rounded-lg p-6 mb-6">
+            <div className="flex items-center space-x-3">
+              <span className="text-4xl">⏳</span>
+              <div>
+                <h3 className="font-bold text-yellow-900 dark:text-yellow-100 text-lg">Submission Pending Verification</h3>
+                <p className="text-yellow-700 dark:text-yellow-300 text-sm">
+                  Your submission is being processed
+                </p>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="bg-orange-50 dark:bg-orange-900/20 border border-orange-500 rounded-lg p-6 mb-6">
+            <div className="flex items-center space-x-3">
+              <span className="text-4xl">📝</span>
+              <div>
+                <h3 className="font-bold text-orange-900 dark:text-orange-100 text-lg">Draft Submission</h3>
+                <p className="text-orange-700 dark:text-orange-300 text-sm">
+                  This submission is still in draft and has not been finalized
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
 
         <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 overflow-hidden">
           {/* Project Header */}
@@ -173,8 +199,18 @@ const SubmissionViewPage: FC = (): ReactElement => {
               <div className="grid gap-2 text-sm">
                 <div className="flex justify-between">
                   <span className="text-gray-600 dark:text-neutral-400">Status:</span>
-                  <span className="font-medium text-green-600 dark:text-green-400">
-                    {submission.status === 'submitted' ? '✓ Submitted' : 'Draft'}
+                  <span className={`font-medium ${
+                    submission.status === 'submitted'
+                      ? 'text-green-600 dark:text-green-400'
+                      : submission.status === 'pending_verification'
+                        ? 'text-yellow-600 dark:text-yellow-400'
+                        : 'text-orange-600 dark:text-orange-400'
+                  }`}>
+                    {submission.status === 'submitted'
+                      ? '✓ Submitted'
+                      : submission.status === 'pending_verification'
+                        ? '⏳ Pending Verification'
+                        : '📝 Draft'}
                   </span>
                 </div>
                 <div className="flex justify-between">
diff --git a/libs/service/src/hooks/teams/index.ts b/libs/service/src/hooks/teams/index.ts
index 57626a5..7eb462f 100644
--- a/libs/service/src/hooks/teams/index.ts
+++ b/libs/service/src/hooks/teams/index.ts
@@ -450,6 +450,8 @@ export const useSubmitProject = (teamId: string) => {
 
   return useMutation({
     mutationFn: async (data: TSubmitProjectRequest) => {
+      let submissionId: string;
+
       // First, check if submission exists
       try {
         const existingResponse = await hackathonApi.get<HackathonApiResponse<Submission | null>>(
@@ -467,28 +469,41 @@ export const useSubmitProject = (teamId: string) => {
               demo_url: data.demo_url,
               video_url: data.video_url,
               presentation_url: data.presentation_url,
+              screenshots: data.screenshots,
             }
           );
-          return { data: response.data.data };
+          submissionId = response.data.data.id;
+        } else {
+          throw new Error('No existing submission');
         }
       } catch {
         // No existing submission, create new one
+        const response = await hackathonApi.post<HackathonApiResponse<Submission>>(
+          `/submissions/teams/${teamId}`,
+          {
+            project_name: data.project_name,
+            description: data.description,
+            repository_url: data.repository_url,
+            demo_url: data.demo_url,
+            video_url: data.video_url,
+            presentation_url: data.presentation_url,
+            screenshots: data.screenshots,
+          }
+        );
+        submissionId = response.data.data.id;
       }
 
-      // Create new submission
-      const response = await hackathonApi.post<HackathonApiResponse<Submission>>(
-        `/submissions/teams/${teamId}`,
-        {
-          project_name: data.project_name,
-          description: data.description,
-          repository_url: data.repository_url,
-          demo_url: data.demo_url,
-          video_url: data.video_url,
-          presentation_url: data.presentation_url,
-        }
+      // Step 2: Submit the project (draft -> pending_verification)
+      await hackathonApi.post<HackathonApiResponse<Submission>>(
+        `/submissions/${submissionId}/submit`
       );
 
-      return { data: response.data.data };
+      // Step 3: Confirm the submission (pending_verification -> submitted)
+      const finalResponse = await hackathonApi.post<HackathonApiResponse<Submission>>(
+        `/submissions/${submissionId}/confirm`
+      );
+
+      return { data: finalResponse.data.data };
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: teamKeys.submission(teamId) });