Refactor code structure for improved readability and maintainability

- Add helper text indicating users can paste demo video links
- Update placeholder to mention YouTube, Loom, etc.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/settings.local.json

@@ -10,7 +10,13 @@
       "Bash(ren page.tsx page-original.tsx)",
       "Bash(ren:*)",
       "Bash(npx supabase:*)",
-      "Bash(libs/service/src/types/supabase.ts)"
+      "Bash(libs/service/src/types/supabase.ts)",
+      "Bash(npx nx build:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git push)",
+      "Bash(findstr:*)",
+      "Bash(ls:*)"
     ],
     "deny": [],
     "ask": []

.github/workflows/deploy-backoffice.yml

@@ -7,6 +7,10 @@ on:
     paths:
       - 'apps/backoffice/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
 
+concurrency:
+  group: deploy-vps
+  cancel-in-progress: false
+
 jobs:
   deploy:
     runs-on: ubuntu-latest
@@ -21,6 +25,7 @@ jobs:
           username: ${{ secrets.SSH_USER }}
           key: ${{ secrets.SSH_KEY }}
           port: ${{ secrets.SSH_PORT }}
+          command_timeout: 30m
           script: |
             set -e
             if [ ! -d ~/imphnen-frontend-service-backoffice ]; then
@@ -34,6 +39,6 @@ jobs:
             VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}
             EOF
             docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml down || true
-            docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml build
+            DOCKER_BUILDKIT=1 docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml build --progress=plain
             docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml up -d
             docker image prune -af

.github/workflows/deploy-dimentorin.yml

@@ -7,6 +7,10 @@ on:
     paths:
       - 'apps/dimentorin/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
 
+concurrency:
+  group: deploy-vps
+  cancel-in-progress: false
+
 jobs:
   deploy:
     runs-on: ubuntu-latest
@@ -21,6 +25,7 @@ jobs:
           username: ${{ secrets.SSH_USER }}
           key: ${{ secrets.SSH_KEY }}
           port: ${{ secrets.SSH_PORT }}
+          command_timeout: 30m
           script: |
             set -e
             if [ ! -d ~/imphnen-frontend-service-dimentorin ]; then
@@ -34,6 +39,6 @@ jobs:
             VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}
             EOF
             docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml down || true
-            docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml build
+            DOCKER_BUILDKIT=1 docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml build --progress=plain
             docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml up -d
             docker image prune -af

.github/workflows/deploy-gacha.yml

@@ -7,6 +7,10 @@ on:
     paths:
       - 'apps/gacha/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
 
+concurrency:
+  group: deploy-vps
+  cancel-in-progress: false
+
 jobs:
   deploy:
     runs-on: ubuntu-latest
@@ -21,6 +25,7 @@ jobs:
           username: ${{ secrets.SSH_USER }}
           key: ${{ secrets.SSH_KEY }}
           port: ${{ secrets.SSH_PORT }}
+          command_timeout: 30m
           script: |
             set -e
             if [ ! -d ~/imphnen-frontend-service-gacha ]; then
@@ -34,6 +39,6 @@ jobs:
             VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}
             EOF
             docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml down || true
-            docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml build
+            DOCKER_BUILDKIT=1 docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml build --progress=plain
             docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml up -d
             docker image prune -af

.github/workflows/deploy-hackathon.yml

@@ -7,6 +7,10 @@ on:
     paths:
       - 'apps/hackathon/**' # Auto deploy when changes pushed to apps/hackathon
 
+concurrency:
+  group: deploy-vps
+  cancel-in-progress: false
+
 jobs:
   deploy:
     runs-on: ubuntu-latest
@@ -21,6 +25,7 @@ jobs:
           username: ${{ secrets.SSH_USER }}
           key: ${{ secrets.SSH_KEY }}
           port: ${{ secrets.SSH_PORT }}
+          command_timeout: 30m
           script: |
             set -e
             if [ ! -d ~/imphnen-frontend-service-hackathon ]; then
@@ -28,12 +33,13 @@ jobs:
             else
               cd ~/imphnen-frontend-service-hackathon && git fetch origin && git reset --hard origin/develop && git pull
             fi
-            cat > ~/imphnen-frontend-service-hackathon/apps/hackathon/.env << EOF
+            cat > ~/imphnen-frontend-service-hackathon/.env.local << EOF
             VITE_API_URL=${{ secrets.VITE_API_URL }}
             VITE_SUPABASE_URL=${{ secrets.VITE_SUPABASE_URL }}
             VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}
             EOF
             docker compose -f ~/imphnen-frontend-service-hackathon/docker-compose-hackathon.yml down || true
-            docker compose -f ~/imphnen-frontend-service-hackathon/docker-compose-hackathon.yml build
+            docker builder prune -af || true
+            DOCKER_BUILDKIT=1 docker compose --env-file ~/imphnen-frontend-service-hackathon/.env.local -f ~/imphnen-frontend-service-hackathon/docker-compose-hackathon.yml build --progress=plain
             docker compose -f ~/imphnen-frontend-service-hackathon/docker-compose-hackathon.yml up -d
             docker image prune -af

.github/workflows/deploy-landing.yml

@@ -7,6 +7,10 @@ on:
     paths:
       - 'apps/landing/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
 
+concurrency:
+  group: deploy-vps
+  cancel-in-progress: false
+
 jobs:
   deploy:
     runs-on: ubuntu-latest
@@ -21,6 +25,7 @@ jobs:
           username: ${{ secrets.SSH_USER }}
           key: ${{ secrets.SSH_KEY }}
           port: ${{ secrets.SSH_PORT }}
+          command_timeout: 30m
           script: |
             set -e
             if [ ! -d ~/imphnen-frontend-service ]; then
@@ -34,6 +39,6 @@ jobs:
             NEXT_PUBLIC_SUPABASE_ANON_KEY=${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
             EOF
             docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml down || true
-            docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml build
+            DOCKER_BUILDKIT=1 docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml build --progress=plain
             docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml up -d
             docker image prune -af

.mcp.json

@@ -0,0 +1,9 @@
+{
+  "mcpServers": {
+    "nx-mcp": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["nx", "mcp"]
+    }
+  }
+}

CLAUDE.md

@@ -0,0 +1,13 @@
+<!-- nx configuration start-->
+<!-- Leave the start & end comments to automatically receive updates. -->
+
+# General Guidelines for working with Nx
+
+- When running tasks (for example build, lint, test, e2e, etc.), always prefer running the task through `nx` (i.e. `nx run`, `nx run-many`, `nx affected`) instead of using the underlying tooling directly
+- You have access to the Nx MCP server and its tools, use them to help the user
+- When answering questions about the repository, use the `nx_workspace` tool first to gain an understanding of the workspace architecture where applicable.
+- When working in individual projects, use the `nx_project_details` mcp tool to analyze and understand the specific project structure and dependencies
+- For questions around nx configuration, best practices or if you're unsure, use the `nx_docs` tool to get relevant, up-to-date docs. Always use this instead of assuming things about nx configuration
+- If the user needs help with an Nx configuration or project graph error, use the `nx_workspace` tool to get any errors
+
+<!-- nx configuration end-->

apps/backoffice/.deploy

@@ -1 +1 @@
-Tue, Nov 25, 2025 11:09:55 AM
+Tue, Nov 25, 2025  4:21:27 PM

apps/backoffice/src/app/(protected)/hackathon-dashboard/page.tsx

@@ -0,0 +1,32 @@
+import { BackofficeWrapper } from '@imphnen-frontend-service/ui/organisms';
+import { FC, ReactElement } from 'react';
+
+export const HackathonDashboardPage: FC = (): ReactElement => {
+  return (
+    <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
+      <h1 className="mb-8 text-p1 font-semibold text-neutral-700">Dashboard</h1>
+
+      <section className="grid grid-cols-5 gap-5">
+        {/* Participant */}
+        <div className="bg-white px-6 py-4 rounded-md shadow">
+          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">
+            1261
+          </h3>
+          <p className="text-neutral-400 text-p3">Total Participants</p>
+        </div>
+        {/* Team */}
+        <div className="bg-white px-6 py-4 rounded-md shadow">
+          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">206</h3>
+          <p className="text-neutral-400 text-p3">Total Teams</p>
+        </div>
+        {/* Project Submitted */}
+        <div className="bg-white px-6 py-4 rounded-md shadow">
+          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">0</h3>
+          <p className="text-neutral-400 text-p3">Total Project Submitted</p>
+        </div>
+      </section>
+    </BackofficeWrapper>
+  );
+};
+
+export default HackathonDashboardPage;

apps/backoffice/src/app/(protected)/hackathon-submissions/page.tsx

@@ -0,0 +1,128 @@
+import { FC, ReactElement, useState } from 'react';
+import {
+  BackofficeWrapper,
+  DataTable,
+} from '@imphnen-frontend-service/ui/organisms';
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  RowSelectionState,
+  useReactTable,
+} from '@tanstack/react-table';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { cn } from '@imphnen-frontend-service/utils';
+import { EditOutlined } from '@ant-design/icons';
+
+export const HackathonUsersPage: FC = (): ReactElement => {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const mockData: any[] = Array.from({ length: 90 }, (_, i) => ({
+    id: i + 1,
+    project_name: `Project ${i + 1}`,
+    repository_url: `https://github.com/user/repo${i + 1}`,
+    demo_url: `https://demo.example.com/project${i + 1}`,
+    presentation_url: `https://slides.example.com/project${i + 1}`,
+  }));
+
+  type UserStatus = 'active' | 'inactive';
+
+  interface SubmissionType {
+    id: number;
+    project_name: string;
+    repository_url: string;
+    demo_url: string;
+    presentation_url: string;
+  }
+
+  const columns: ColumnDef<SubmissionType>[] = [
+    {
+      header: 'Project Name',
+      accessorKey: 'project_name',
+    },
+    {
+      header: 'Repository URL',
+      accessorKey: 'repository_url',
+    },
+    {
+      header: 'Demo URL',
+      accessorKey: 'demo_url',
+    },
+    {
+      header: 'Presentation URL',
+      accessorKey: 'presentation_url',
+    },
+    {
+      header: 'Action',
+      meta: { cellClassName: cn('w-72') },
+      cell: ({ row }) => (
+        <Button
+          variant="primary"
+          size="sm"
+          className="flex items-center gap-2 w-max"
+          onClick={() => {
+            // View detail logic
+          }}
+        >
+          <EditOutlined className="text-base" /> View & Manage
+        </Button>
+      ),
+    },
+  ];
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
+      <h1 className="mb-8 text-p1 font-semibold text-neutral-700">
+        Project Submission
+      </h1>
+      {/* Filters and actions */}
+      <section className="bg-white rounded-md shadow p-8 flex flex-col gap-6">
+        <div className="flex flex-wrap gap-3 items-center">
+          <input
+            type="text"
+            className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-64"
+            placeholder="Search name or email"
+          />
+          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
+            <option value="all">All Status</option>
+            <option value="active">Active</option>
+            <option value="suspended">Suspended</option>
+          </select>
+          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
+            <option value="all">All City</option>
+            <option value="jakarta">Jakarta</option>
+            <option value="bandung">Bandung</option>
+          </select>
+        </div>
+
+        {/* Table */}
+        <DataTable data={mockData} columns={columns} table={table} />
+      </section>
+
+      {/* Modals extracted into shared backoffice components */}
+    </BackofficeWrapper>
+  );
+};
+
+export default HackathonUsersPage;

apps/backoffice/src/app/(protected)/hackathon-teams/page.tsx

@@ -0,0 +1,210 @@
+import { FC, ReactElement, useState } from 'react';
+import {
+  BackofficeWrapper,
+  DataTable,
+} from '@imphnen-frontend-service/ui/organisms';
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  RowSelectionState,
+  useReactTable,
+} from '@tanstack/react-table';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { cn } from '@imphnen-frontend-service/utils';
+import { useTeams } from '@imphnen-frontend-service/service';
+import { EditOutlined } from '@ant-design/icons';
+
+export const HackathonTeamsPage: FC = (): ReactElement => {
+  const { data: teamsData } = useTeams();
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const mockData: TeamType[] = Array.from({ length: 90 }, (_, i) => ({
+    id: `team-${i + 1}`,
+    name: `Team ${i + 1} - ${i % 3 === 0 ? 'Innovators' : 'Hackers'}`,
+    city: i % 2 === 0 ? 'Jakarta' : 'Bandung',
+    visibility: i % 4 === 0 ? 'private' : 'public',
+    member_count: Math.floor(Math.random() * 4) + 1,
+    has_submission: i % 3 !== 0,
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+    leader: {
+      user: {
+        fullname: `Leader User ${i}`,
+        email: `leader${i}@example.com`,
+      },
+    },
+  }));
+
+  interface TeamType {
+    id: string;
+    name: string;
+    city: string;
+    visibility: 'public' | 'private';
+    member_count: number;
+    has_submission: boolean;
+    created_at: string;
+    updated_at: string;
+    leader?: {
+      user: {
+        fullname: string;
+        email: string;
+      };
+    };
+  }
+
+  const columns: ColumnDef<TeamType>[] = [
+    {
+      accessorKey: 'id',
+      header: 'ID',
+    },
+    {
+      accessorKey: 'name',
+      header: 'Team Name',
+    },
+    {
+      accessorKey: 'city',
+      header: 'City',
+    },
+    {
+      accessorKey: 'visibility',
+      header: 'Visibility',
+      cell: ({ row }) => {
+        const isPublic = row.original.visibility === 'public';
+        return (
+          <span
+            className={cn(
+              'py-2 px-4 text-sm rounded-2xl text-center',
+              isPublic
+                ? 'bg-info-200 text-info-700'
+                : 'bg-gray-200 text-gray-700'
+            )}
+          >
+            {isPublic ? 'Public' : 'Private'}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: 'member_count',
+      header: 'Members',
+    },
+    {
+      id: 'leader',
+      header: 'Leader',
+      cell: ({ row }) => {
+        const leader = row.original.leader?.user;
+        return leader ? (
+          <div>
+            <div className="text-sm font-medium text-gray-900">
+              {leader.fullname}
+            </div>
+            <div className="text-xs text-gray-500">{leader.email}</div>
+          </div>
+        ) : (
+          <span className="text-gray-400 italic">-</span>
+        );
+      },
+    },
+    {
+      accessorKey: 'has_submission',
+      header: 'Submitted',
+      cell: ({ row }) => {
+        const hasSubmission = row.original.has_submission;
+        return (
+          <span
+            className={cn(
+              'py-2 px-4 text-sm rounded-2xl text-center',
+              hasSubmission
+                ? 'bg-success-200 text-success-700'
+                : 'bg-danger-200 text-danger-700'
+            )}
+          >
+            {hasSubmission ? 'Yes' : 'No'}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: 'updated_at',
+      header: 'Last Updated',
+      cell: ({ row }) => {
+        return new Date(row.original.updated_at).toLocaleDateString();
+      },
+    },
+    {
+      id: 'actions',
+      header: 'Action',
+      meta: { cellClassName: cn('w-48') },
+      cell: ({ row }) => (
+        <div className="flex items-center gap-2">
+          <Button
+            variant="primary"
+            size="sm"
+            className="flex items-center gap-2 w-max"
+            onClick={() => {
+              // View detail logic
+            }}
+          >
+            <EditOutlined className="text-base" /> View & Manage
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
+      <h1 className="mb-8 text-p1 font-semibold text-neutral-700">
+        Team Management
+      </h1>
+      {/* Filters and actions */}
+      <section className="bg-white rounded-md shadow p-8 flex flex-col gap-6">
+        <div className="flex flex-wrap gap-3 items-center">
+          <input
+            type="text"
+            className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-64"
+            placeholder="Search name or email"
+          />
+          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
+            <option value="all">All Status</option>
+            <option value="active">Active</option>
+            <option value="suspended">Suspended</option>
+          </select>
+          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
+            <option value="all">All City</option>
+            <option value="jakarta">Jakarta</option>
+            <option value="bandung">Bandung</option>
+          </select>
+        </div>
+        {/* Table */}
+        <DataTable data={mockData} columns={columns} table={table} />
+      </section>
+      {/* Modals extracted into shared backoffice components */}
+    </BackofficeWrapper>
+  );
+};
+
+export default HackathonTeamsPage;

apps/backoffice/src/app/(protected)/hackathon-users/_components/modal-user-detail.tsx

@@ -0,0 +1,651 @@
+import { FC, useState, useEffect, useMemo, useRef } from 'react';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { cn } from '@imphnen-frontend-service/utils';
+import {
+  UserOutlined,
+  EnvironmentOutlined,
+  CalendarOutlined,
+  SaveOutlined,
+  CloseOutlined,
+  ExclamationOutlined,
+  CameraOutlined,
+  DeleteOutlined,
+  UploadOutlined,
+} from '@ant-design/icons';
+
+interface UserType {
+  id: string;
+  avatar?: string;
+  fullname: string;
+  bio?: string;
+  location: string;
+  is_active: boolean;
+  skills: string[];
+  created_at: string;
+  updated_at: string;
+}
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  user: UserType | null;
+}
+
+const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
+  const [formData, setFormData] = useState<UserType | null>(null);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [showAvatarMenu, setShowAvatarMenu] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Initialize form data when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      if (user) {
+        // Edit existing user
+        setFormData({ ...user });
+      } else {
+        // Create new user
+        setFormData({
+          id: '', // Will be generated by backend
+          fullname: '',
+          bio: '',
+          location: '',
+          is_active: true,
+          skills: [],
+          avatar: undefined,
+          created_at: new Date().toISOString(),
+          updated_at: new Date().toISOString(),
+        });
+      }
+    }
+  }, [isOpen, user]);
+
+  // Check if form has changes
+  const hasChanges = useMemo(() => {
+    if (!formData) return false;
+    if (!user) return true; // New user always has changes
+    return (
+      formData.fullname !== user.fullname ||
+      formData.location !== user.location ||
+      formData.is_active !== user.is_active ||
+      formData.avatar !== user.avatar ||
+      JSON.stringify(formData.skills) !== JSON.stringify(user.skills) ||
+      formData.bio !== user.bio
+    );
+  }, [formData, user]);
+
+  // Check if required fields are filled
+  const isFormValid = useMemo(() => {
+    if (!formData) return false;
+    return formData.fullname.trim() !== '' && formData.location.trim() !== '';
+  }, [formData]);
+
+  const canSave = hasChanges && isFormValid;
+
+  if (!isOpen || !formData) return null;
+
+  const handleInputChange = (
+    field: keyof UserType,
+    value: string | boolean | string[] | undefined
+  ) => {
+    setFormData((prev) => (prev ? { ...prev, [field]: value } : null));
+  };
+
+  const handleSkillsChange = (skills: string[]) => {
+    setFormData((prev) => (prev ? { ...prev, skills } : null));
+  };
+
+  const handleSave = () => {
+    if (!formData) return;
+
+    if (user) {
+      // Update existing user
+      console.log('Update user data:', formData);
+    } else {
+      // Create new user
+      console.log('Create new user:', formData);
+    }
+    // Here you would typically make an API call to save the data
+    onClose();
+  };
+
+  const handleCancel = () => {
+    if (user) {
+      setFormData({ ...user }); // Reset to original for edit mode
+    }
+    onClose();
+  };
+
+  const handleDeleteAccount = () => {
+    if (!user) return; // Can't delete new user
+    console.log('Delete user:', user.id);
+    setShowDeleteConfirm(false);
+    onClose();
+  };
+
+  const handleAvatarUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      // Validate file type
+      if (!file.type.startsWith('image/')) {
+        alert('Please select an image file');
+        return;
+      }
+
+      // Validate file size (max 5MB)
+      if (file.size > 5 * 1024 * 1024) {
+        alert('Image size must be less than 5MB');
+        return;
+      }
+
+      // Create preview URL
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const avatarUrl = e.target?.result as string;
+        handleInputChange('avatar', avatarUrl);
+        setShowAvatarMenu(false);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleRemoveAvatar = () => {
+    handleInputChange('avatar', undefined);
+    setShowAvatarMenu(false);
+  };
+
+  const triggerFileUpload = () => {
+    fileInputRef.current?.click();
+  };
+
+  const availableSkills = [
+    'Frontend Developer',
+    'Backend Developer',
+    'Full Stack Developer',
+    'DevOps Engineer',
+    'UI/UX Designer',
+    'Product Manager',
+    'Data Scientist',
+    'Mobile Developer',
+  ];
+
+  return (
+    <div className="fixed inset-0 z-50">
+      <div
+        className="fixed inset-0 bg-black/50"
+        onClick={(e) => {
+          setShowAvatarMenu(false);
+          onClose();
+        }}
+      />
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <div
+          className="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* Hidden File Input */}
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleAvatarUpload}
+            accept="image/*"
+            className="hidden"
+          />
+          {/* Header */}
+          <div className="border-b border-neutral-200 px-8 py-6 flex justify-between items-start">
+            <div className="flex items-center gap-4">
+              {/* Interactive User Avatar */}
+              <div className="relative group ">
+                <div className="w-16 h-16 rounded-full bg-neutral-200 flex items-center justify-center overflow-hidden border-2 border-transparent group-hover:border-primary-300 transition-colors">
+                  {formData.avatar ? (
+                    <img
+                      src={formData.avatar}
+                      alt={formData.fullname}
+                      className="w-full h-full object-cover"
+                    />
+                  ) : (
+                    <UserOutlined className="text-neutral-500 text-2xl" />
+                  )}
+                </div>
+
+                {/* Avatar Hover Overlay */}
+                <button
+                  onClick={() => setShowAvatarMenu(!showAvatarMenu)}
+                  className="absolute inset-0 bg-neutral-400 cursor-pointer rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+                >
+                  <CameraOutlined className="text-white text-lg" />
+                </button>
+
+                {/* Avatar Menu Dropdown */}
+                {showAvatarMenu && (
+                  <div className="absolute top-full left-0 mt-2 bg-white rounded-lg shadow-lg border border-neutral-200 py-2 min-w-[140px] z-10">
+                    <button
+                      onClick={triggerFileUpload}
+                      className="w-full px-4 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-50 flex items-center gap-2 cursor-pointer"
+                    >
+                      <UploadOutlined className="text-sm" />
+                      {formData.avatar ? 'Change Photo' : 'Upload Photo'}
+                    </button>
+                    {formData.avatar && (
+                      <button
+                        onClick={handleRemoveAvatar}
+                        className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center gap-2 cursor-pointer"
+                      >
+                        <DeleteOutlined className="text-sm" />
+                        Remove Photo
+                      </button>
+                    )}
+                  </div>
+                )}
+              </div>
+              <div>
+                <div className="flex items-center gap-3 mb-2">
+                  <h2 className="text-2xl font-bold text-neutral-900">
+                    {user ? 'Edit User Profile' : 'Create New User'}
+                  </h2>
+                  {user && (
+                    <span className="px-3 py-1 bg-info-100 text-info-700 text-xs font-medium rounded-2xl">
+                      Hover avatar to change
+                    </span>
+                  )}
+                </div>
+                <div className="text-sm text-neutral-500">
+                  {user
+                    ? `Make changes to ${
+                        formData.fullname || 'this user'
+                      }'s profile information`
+                    : 'Fill in the information below to create a new user account'}
+                </div>
+              </div>
+            </div>
+            <button
+              className="p-2 hover:bg-neutral-100 rounded-lg transition-colors"
+              onClick={() => {
+                setShowAvatarMenu(false);
+                handleCancel();
+              }}
+            >
+              <CloseOutlined className="text-neutral-400 text-lg cursor-pointer" />
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="p-8" onClick={() => setShowAvatarMenu(false)}>
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+              {/* Left Column - Basic Info */}
+              <div className="space-y-6">
+                <div>
+                  <h3 className="text-lg font-semibold text-neutral-900 mb-4">
+                    Basic Information
+                  </h3>
+                  <div className="space-y-4">
+                    {/* Full Name - Required */}
+                    <div className="flex items-center gap-3">
+                      <UserOutlined className="text-neutral-400" />
+                      <div className="flex-1">
+                        <label className="text-sm text-neutral-500 block mb-1">
+                          Full Name <span className="text-red-500">*</span>
+                        </label>
+                        <input
+                          type="text"
+                          value={formData.fullname}
+                          onChange={(e) =>
+                            handleInputChange('fullname', e.target.value)
+                          }
+                          className={cn(
+                            'w-full border rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none',
+                            formData.fullname.trim() === ''
+                              ? 'border-red-300 bg-red-50'
+                              : 'border-neutral-300'
+                          )}
+                          placeholder="Enter full name"
+                        />
+                        {formData.fullname.trim() === '' && (
+                          <p className="text-red-500 text-xs mt-1">
+                            Full name is required
+                          </p>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Location - Required */}
+                    <div className="flex items-center gap-3">
+                      <EnvironmentOutlined className="text-neutral-400" />
+                      <div className="flex-1">
+                        <label className="text-sm text-neutral-500 block mb-1">
+                          Location <span className="text-red-500">*</span>
+                        </label>
+                        <select
+                          value={formData.location}
+                          onChange={(e) =>
+                            handleInputChange('location', e.target.value)
+                          }
+                          className={cn(
+                            'w-full border rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none bg-white',
+                            formData.location.trim() === ''
+                              ? 'border-red-300 bg-red-50'
+                              : 'border-neutral-300'
+                          )}
+                        >
+                          <option value="">Select location</option>
+                          <option value="Jakarta">Jakarta</option>
+                          <option value="Bandung">Bandung</option>
+                          <option value="Surabaya">Surabaya</option>
+                          <option value="Medan">Medan</option>
+                          <option value="Yogyakarta">Yogyakarta</option>
+                        </select>
+                        {formData.location.trim() === '' && (
+                          <p className="text-red-500 text-xs mt-1">
+                            Location is required
+                          </p>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Joined Date - Read Only - Only show for existing users */}
+                    {user && (
+                      <div className="flex items-center gap-3">
+                        <CalendarOutlined className="text-neutral-400" />
+                        <div>
+                          <p className="text-sm text-neutral-500">
+                            Joined Date
+                          </p>
+                          <p className="font-medium">
+                            {new Date(formData.created_at).toLocaleDateString(
+                              'en-US',
+                              {
+                                year: 'numeric',
+                                month: 'long',
+                                day: 'numeric',
+                              }
+                            )}
+                          </p>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                {/* Bio Section - Optional */}
+                <div>
+                  <h3 className="text-lg font-semibold text-neutral-900 mb-3">
+                    Bio{' '}
+                    <span className="text-neutral-400 text-sm font-normal">
+                      (Optional)
+                    </span>
+                  </h3>
+                  <textarea
+                    value={formData.bio || ''}
+                    onChange={(e) =>
+                      handleInputChange('bio', e.target.value || undefined)
+                    }
+                    placeholder="Tell us about yourself..."
+                    rows={4}
+                    className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none resize-none"
+                  />
+                </div>
+              </div>
+
+              {/* Right Column - Skills & Status */}
+              <div className="space-y-6">
+                {/* Account Status - Enhanced Tab Design */}
+                <div>
+                  <h3 className="text-lg font-semibold text-neutral-900 mb-4">
+                    Account Status
+                  </h3>
+                  <div className="flex bg-neutral-100 p-1 rounded-lg">
+                    <button
+                      onClick={() => handleInputChange('is_active', true)}
+                      className={cn(
+                        'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 cursor-pointer',
+                        formData.is_active
+                          ? 'bg-white text-success-700 shadow-sm ring-1 ring-success-200'
+                          : 'text-neutral-600 hover:text-neutral-800'
+                      )}
+                    >
+                      <div className="flex items-center justify-center gap-2">
+                        <div
+                          className={cn(
+                            'w-2 h-2 rounded-full',
+                            formData.is_active
+                              ? 'bg-success-500'
+                              : 'bg-neutral-400'
+                          )}
+                        />
+                        Active
+                      </div>
+                    </button>
+                    <button
+                      onClick={() => handleInputChange('is_active', false)}
+                      className={cn(
+                        'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 cursor-pointer',
+                        !formData.is_active
+                          ? 'bg-white text-neutral-700 shadow-sm ring-1 ring-neutral-200'
+                          : 'text-neutral-600 hover:text-neutral-800'
+                      )}
+                    >
+                      <div className="flex items-center justify-center gap-2">
+                        <div
+                          className={cn(
+                            'w-2 h-2 rounded-full',
+                            !formData.is_active
+                              ? 'bg-neutral-500'
+                              : 'bg-neutral-400'
+                          )}
+                        />
+                        Inactive
+                      </div>
+                    </button>
+                  </div>
+                  <p className="text-xs text-neutral-500 mt-2">
+                    {formData.is_active
+                      ? 'User can access their account and participate in activities'
+                      : 'User account is suspended and cannot access services'}
+                  </p>
+                </div>
+
+                {/* Skills Section - Optional */}
+                <div>
+                  <h3 className="text-lg font-semibold text-neutral-900 mb-4">
+                    Skills & Expertise{' '}
+                    <span className="text-neutral-400 text-sm font-normal">
+                      (Optional)
+                    </span>
+                  </h3>
+                  <div className="space-y-3">
+                    <div className="flex flex-wrap gap-2 min-h-10 p-3 border border-neutral-300 rounded-lg bg-neutral-50">
+                      {formData.skills.length > 0 ? (
+                        formData.skills.map((skill, index) => (
+                          <span
+                            key={index}
+                            className="inline-flex items-center gap-2 px-3 py-1.5 rounded-2xl text-sm font-medium bg-blue-100 text-blue-800"
+                          >
+                            {skill}
+                            <button
+                              onClick={() =>
+                                handleSkillsChange(
+                                  formData.skills.filter((_, i) => i !== index)
+                                )
+                              }
+                              className="text-blue-600 hover:text-blue-800 ml-1 cursor-pointer"
+                            >
+                              ✕
+                            </button>
+                          </span>
+                        ))
+                      ) : (
+                        <span className="text-neutral-400 text-sm">
+                          No skills added yet
+                        </span>
+                      )}
+                    </div>
+                    <select
+                      value=""
+                      onChange={(e) => {
+                        if (
+                          e.target.value &&
+                          !formData.skills.includes(e.target.value)
+                        ) {
+                          handleSkillsChange([
+                            ...formData.skills,
+                            e.target.value,
+                          ]);
+                        }
+                      }}
+                      className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none bg-white"
+                    >
+                      <option value="">Add a skill...</option>
+                      {availableSkills
+                        .filter((skill) => !formData.skills.includes(skill))
+                        .map((skill) => (
+                          <option key={skill} value={skill}>
+                            {skill}
+                          </option>
+                        ))}
+                    </select>
+                  </div>
+                </div>
+
+                {/* Account Details - Read Only - Only show for existing users */}
+                {user && (
+                  <div>
+                    <h3 className="text-lg font-semibold text-neutral-900 mb-4">
+                      Account Details
+                    </h3>
+                    <div className="space-y-3 bg-neutral-50 p-4 rounded-lg">
+                      <div className="flex justify-between items-center py-1">
+                        <span className="text-neutral-600 text-sm">
+                          User ID
+                        </span>
+                        <span className="font-mono text-sm text-neutral-800">
+                          {formData.id}
+                        </span>
+                      </div>
+                      <div className="flex justify-between items-center py-1">
+                        <span className="text-neutral-600 text-sm">
+                          Last Updated
+                        </span>
+                        <span className="text-sm text-neutral-800">
+                          {new Date(formData.updated_at).toLocaleDateString(
+                            'en-US',
+                            {
+                              month: 'short',
+                              day: 'numeric',
+                              year: 'numeric',
+                            }
+                          )}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Footer Actions */}
+          <div className="border-t border-neutral-200 px-8 py-6">
+            <div className="flex justify-between items-center">
+              <div className="flex items-center gap-4">
+                <div className="text-sm text-neutral-500">
+                  {canSave
+                    ? 'Ready to save changes'
+                    : hasChanges
+                    ? 'Please fill required fields'
+                    : 'No changes made'}
+                </div>
+                {/* Delete Account Button - Only show for existing users */}
+                {user && (
+                  <button
+                    onClick={() => setShowDeleteConfirm(true)}
+                    className="text-red-600 hover:text-red-700 text-sm font-medium transition-colors cursor-pointer"
+                  >
+                    Delete Account
+                  </button>
+                )}
+              </div>
+
+              <div className="flex items-center gap-3">
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={handleCancel}
+                  className="px-6"
+                >
+                  Cancel
+                </Button>
+                <Button
+                  variant="primary"
+                  size="sm"
+                  onClick={handleSave}
+                  disabled={!canSave}
+                  className={cn(
+                    'flex items-center gap-2 px-6',
+                    !canSave && 'opacity-50 cursor-not-allowed'
+                  )}
+                >
+                  <SaveOutlined className="text-sm" />
+                  {user ? 'Save Changes' : 'Create User'}
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          {/* Delete Confirmation Modal */}
+          {showDeleteConfirm && (
+            <div className="fixed inset-0 z-60">
+              <div
+                className="fixed inset-0 bg-black/50"
+                onClick={() => setShowDeleteConfirm(false)}
+              />
+              <div className="fixed inset-0 flex items-center justify-center p-4">
+                <div className="bg-white rounded-xl shadow-2xl w-full max-w-md">
+                  <div className="p-6">
+                    <div className="flex items-center gap-3 mb-4">
+                      <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
+                        <ExclamationOutlined className="text-red-600 text-lg" />
+                      </div>
+                      <div>
+                        <h3 className="text-lg font-semibold text-neutral-900">
+                          Delete Account
+                        </h3>
+                        <p className="text-sm text-neutral-500">
+                          This action cannot be undone
+                        </p>
+                      </div>
+                    </div>
+                    <p className="text-neutral-700 mb-6">
+                      Are you sure you want to permanently delete{' '}
+                      <strong>{formData.fullname}</strong>'s account? This will
+                      remove all their data and cannot be reversed.
+                    </p>
+                    <div className="flex gap-3 justify-end">
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        onClick={() => setShowDeleteConfirm(false)}
+                        className="px-4"
+                      >
+                        Cancel
+                      </Button>
+                      <Button
+                        variant="primary"
+                        size="sm"
+                        onClick={handleDeleteAccount}
+                        className="px-4 bg-red-600 hover:bg-red-700 border-red-600"
+                      >
+                        Delete Account
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ModalUserDetail;

apps/backoffice/src/app/(protected)/hackathon-users/page.tsx

@@ -0,0 +1,476 @@
+import { FC, ReactElement, useState, useMemo, useCallback } from 'react';
+import ModalUserDetail from './_components/modal-user-detail';
+import {
+  BackofficeWrapper,
+  DataTable,
+} from '@imphnen-frontend-service/ui/organisms';
+import { ColumnDef } from '@tanstack/react-table';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { cn } from '@imphnen-frontend-service/utils';
+import {
+  EditOutlined,
+  UserOutlined,
+  SearchOutlined,
+  FilterOutlined,
+  PlusOutlined,
+} from '@ant-design/icons';
+// Removed unused SearchOutlined icon after schema revision
+
+// Define interface outside component
+interface UserType {
+  id: string; // UUID
+  avatar?: string;
+  fullname: string;
+  bio?: string;
+  location: string;
+  is_active: boolean; // admin can deactivate
+  skills: string[]; // Frontend Developer, Backend Developer, etc.
+  created_at: string;
+  updated_at: string;
+}
+
+// Move mock data outside component to prevent recreation
+const skillsOptions = [
+  'Frontend Developer',
+  'Backend Developer',
+  'Full Stack Developer',
+  'DevOps Engineer',
+  'UI/UX Designer',
+  'Product Manager',
+  'Data Scientist',
+  'Mobile Developer',
+];
+
+const locations = ['Jakarta', 'Bandung', 'Surabaya', 'Medan', 'Yogyakarta'];
+const bios = [
+  'Passionate developer with 5+ years experience',
+  'Tech enthusiast and problem solver',
+  'Building scalable solutions for modern problems',
+  'Creative designer with technical background',
+  'Data-driven decision maker',
+];
+
+const mockData: UserType[] = Array.from({ length: 50 }, (_, i) => {
+  const randomSkillsCount = Math.floor(Math.random() * 3) + 1; // 1-3 skills
+  const randomSkills = skillsOptions
+    .sort(() => 0.5 - Math.random())
+    .slice(0, randomSkillsCount);
+
+  return {
+    id: `24db9e4d-ca4c-46aa-ac36-8ef04bbe01${String(i).padStart(2, '0')}`,
+    avatar:
+      i % 4 === 0
+        ? `https://ui-avatars.com/api/?name=${encodeURIComponent(
+            i % 3 === 0 ? 'Ahmad Wijuana' : 'Sofia Wijuana'
+          )}&background=random`
+        : undefined,
+    fullname:
+      i % 3 === 0
+        ? 'Ahmad Wijuana'
+        : i % 3 === 1
+        ? 'Sofia Wijuana'
+        : 'Budi Santoso',
+    bio: i % 4 === 0 ? bios[i % bios.length] : undefined,
+    location: locations[i % locations.length],
+    is_active: i % 7 !== 0, // More realistic distribution
+    skills: randomSkills,
+    created_at: new Date(
+      Date.now() - i * 86400000 * (Math.random() * 30 + 1)
+    ).toISOString(), // Random within last 30-60 days
+    updated_at: new Date().toISOString(),
+  };
+});
+
+export const HackathonUsersPage: FC = (): ReactElement => {
+  const [showDetailModal, setShowDetailModal] = useState(false);
+  const [showNewUserModal, setShowNewUserModal] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<UserType | null>(null);
+  const [globalFilter, setGlobalFilter] = useState('');
+
+  // Advanced filtering states
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [locationFilter, setLocationFilter] = useState('all');
+  const [skillsFilter, setSkillsFilter] = useState<string[]>([]);
+
+  // Constants
+  const pageSize = 10;
+
+  // Memoize the callback to prevent recreation
+  const handleShowDetailModal = useCallback((user: UserType) => {
+    setSelectedUser(user);
+    setShowDetailModal(true);
+  }, []);
+
+  const handleCloseDetailModal = useCallback(() => {
+    setShowDetailModal(false);
+    setSelectedUser(null);
+  }, []);
+
+  const handleShowNewUserModal = useCallback(() => {
+    setShowNewUserModal(true);
+  }, []);
+
+  const handleCloseNewUserModal = useCallback(() => {
+    setShowNewUserModal(false);
+  }, []);
+
+  // Filter data based on current filter states
+  const filteredData = useMemo(() => {
+    return mockData.filter((user) => {
+      // Status filter
+      if (statusFilter !== 'all') {
+        const isActive = statusFilter === 'active';
+        if (user.is_active !== isActive) return false;
+      }
+
+      // Location filter
+      if (locationFilter !== 'all' && user.location !== locationFilter) {
+        return false;
+      }
+
+      // Skills filter
+      if (skillsFilter.length > 0) {
+        const hasMatchingSkill = skillsFilter.some((skill) =>
+          user.skills.includes(skill)
+        );
+        if (!hasMatchingSkill) return false;
+      }
+
+      return true;
+    });
+  }, [statusFilter, locationFilter, skillsFilter]);
+
+  // Memoize columns to prevent recreation on every render
+  const columns: ColumnDef<UserType>[] = useMemo(
+    () => [
+      {
+        accessorKey: 'fullname',
+        header: 'User',
+        cell: ({ row }) => (
+          <div className="flex items-center gap-3">
+            {/* Avatar */}
+            <div className="w-10 h-10 rounded-full bg-neutral-200 flex items-center justify-center overflow-hidden shrink-0">
+              {row.original.avatar ? (
+                <img
+                  src={row.original.avatar}
+                  alt={row.original.fullname}
+                  className="w-full h-full object-cover"
+                />
+              ) : (
+                <UserOutlined className="text-neutral-500 text-lg" />
+              )}
+            </div>
+            {/* Name only */}
+            <div className="min-w-0 flex-1">
+              <p className="font-medium text-neutral-900 truncate">
+                {row.original.fullname}
+              </p>
+            </div>
+          </div>
+        ),
+        enableSorting: true,
+      },
+      {
+        accessorKey: 'skills',
+        header: 'Skills',
+        cell: ({ row }) => (
+          <div className="flex flex-wrap gap-1 max-w-xs">
+            {row.original.skills.slice(0, 2).map((skill, index) => (
+              <span
+                key={index}
+                className="inline-flex items-center px-2 py-1 rounded-2xl text-xs font-medium bg-success-100 text-success-800"
+              >
+                {skill.replace(' Developer', '').replace(' Engineer', '')}
+              </span>
+            ))}
+            {row.original.skills.length > 2 && (
+              <span className="inline-flex items-center px-2 py-1 rounded-2xl text-xs font-medium bg-success-200 text-success-700">
+                +{row.original.skills.length - 2}
+              </span>
+            )}
+          </div>
+        ),
+        enableSorting: false,
+      },
+      {
+        accessorKey: 'location',
+        header: 'Location',
+        cell: ({ row }) => (
+          <span className="text-neutral-700">{row.original.location}</span>
+        ),
+        enableSorting: true,
+      },
+      {
+        accessorKey: 'is_active',
+        header: 'Status',
+        cell: ({ row }) => (
+          <div className="flex items-center gap-2">
+            <div
+              className={cn(
+                'w-2 h-2 rounded-full',
+                row.original.is_active ? 'bg-success-500' : 'bg-neutral-400'
+              )}
+            />
+            <span
+              className={cn(
+                'text-sm font-medium',
+                row.original.is_active ? 'text-success-700' : 'text-neutral-500'
+              )}
+            >
+              {row.original.is_active ? 'Active' : 'Inactive'}
+            </span>
+          </div>
+        ),
+        enableSorting: true,
+        sortingFn: (rowA, rowB) => {
+          const aActive = rowA.original.is_active;
+          const bActive = rowB.original.is_active;
+          if (aActive && !bActive) return -1;
+          if (!aActive && bActive) return 1;
+          return 0;
+        },
+      },
+      {
+        accessorKey: 'created_at',
+        header: 'Joined',
+        cell: ({ row }) => (
+          <span className="text-neutral-900 text-sm">
+            {new Date(row.original.created_at).toLocaleDateString('en-US', {
+              year: 'numeric',
+              month: 'short',
+              day: 'numeric',
+            })}
+          </span>
+        ),
+        enableSorting: true,
+        sortingFn: 'datetime',
+      },
+      {
+        id: 'actions',
+        header: 'Actions',
+        meta: { cellClassName: cn('w-48') },
+        cell: ({ row }) => (
+          <div className="flex items-center gap-2">
+            <Button
+              variant="primary"
+              size="sm"
+              className="flex items-center gap-2 text-sm px-4 py-2"
+              onClick={() => handleShowDetailModal(row.original)}
+            >
+              <EditOutlined className="text-sm" />
+              Manage
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              className="text-sm px-4 py-2"
+              onClick={() => {
+                // Toggle user status - implement later
+                console.log(`Toggle status for ${row.original.fullname}`);
+              }}
+            >
+              {row.original.is_active ? 'Deactivate' : 'Activate'}
+            </Button>
+          </div>
+        ),
+        enableSorting: false,
+      },
+    ],
+    [handleShowDetailModal]
+  );
+
+  return (
+    <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
+      <h1 className="mb-8 text-p1 font-semibold text-neutral-700">
+        User Management
+      </h1>
+      {/* Filters and actions */}
+      <section className="bg-white rounded-md shadow p-8 flex flex-col gap-6">
+        <div className="flex flex-wrap gap-3 items-center justify-between">
+          {/* Left side - Search & filters */}
+          <div className="flex flex-wrap gap-3 items-center">
+            {/* Search bar */}
+            <div className="relative">
+              <SearchOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm" />
+              <input
+                type="text"
+                className="border border-neutral-200 rounded-lg pl-10 pr-4 py-2.5 text-sm w-full sm:w-80 focus:border-primary-500 focus:outline-none"
+                placeholder="Search users by name or location..."
+                value={globalFilter}
+                onChange={(e) => setGlobalFilter(e.target.value)}
+              />
+            </div>
+
+            {/* Status Filter */}
+            <div className="relative">
+              <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
+              <select
+                className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-36 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
+                value={statusFilter}
+                onChange={(e) => setStatusFilter(e.target.value)}
+              >
+                <option value="all">All Status</option>
+                <option value="active">Active</option>
+                <option value="inactive">Inactive</option>
+              </select>
+            </div>
+
+            {/* Location Filter */}
+            <div className="relative">
+              <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
+              <select
+                className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-44 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
+                value={locationFilter}
+                onChange={(e) => setLocationFilter(e.target.value)}
+              >
+                <option value="all">All Locations</option>
+                {locations.map((location) => (
+                  <option key={location} value={location}>
+                    {location}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Skills Filter with Icon */}
+            <div className="relative">
+              <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
+              <select
+                className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-44 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
+                value=""
+                onChange={(e) => {
+                  if (
+                    e.target.value &&
+                    !skillsFilter.includes(e.target.value)
+                  ) {
+                    setSkillsFilter((prev) => [...prev, e.target.value]);
+                  }
+                }}
+              >
+                <option value="">Add Skill Filter</option>
+                {skillsOptions.map((skill) => (
+                  <option
+                    key={skill}
+                    value={skill}
+                    disabled={skillsFilter.includes(skill)}
+                  >
+                    {skill}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* Right side - Add User Button */}
+          <div className="flex items-center gap-3">
+            <Button
+              variant="primary"
+              size="md"
+              className="flex items-center gap-2 px-4 py-2"
+              onClick={handleShowNewUserModal}
+            >
+              <PlusOutlined className="text-sm" />
+              Add User
+            </Button>
+          </div>
+        </div>
+
+        {/* Active filters display */}
+        {(skillsFilter.length > 0 ||
+          statusFilter !== 'all' ||
+          locationFilter !== 'all') && (
+          <div className="flex flex-wrap gap-2 items-center">
+            <span className="text-sm text-neutral-600">Active filters:</span>
+
+            {/* Status filter badge */}
+            {statusFilter !== 'all' && (
+              <span className="inline-flex items-center gap-1 px-2 py-1 bg-info-100 text-info-800 rounded-2xl text-sm">
+                Status: {statusFilter}
+                <button
+                  onClick={() => setStatusFilter('all')}
+                  className="text-info-600 hover:text-info-800 cursor-pointer"
+                >
+                  ✕
+                </button>
+              </span>
+            )}
+
+            {/* Location filter badge */}
+            {locationFilter !== 'all' && (
+              <span className="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-800 rounded-2xl text-sm">
+                Location: {locationFilter}
+                <button
+                  onClick={() => setLocationFilter('all')}
+                  className="text-green-600 hover:text-green-800 cursor-pointer"
+                >
+                  ✕
+                </button>
+              </span>
+            )}
+
+            {/* Skills filter badges */}
+            {skillsFilter.map((skill) => (
+              <span
+                key={skill}
+                className="inline-flex items-center gap-1 px-2 py-1 bg-purple-100 text-purple-800 rounded-2xl text-sm"
+              >
+                {skill.replace(' Developer', '').replace(' Engineer', '')}
+                <button
+                  onClick={() =>
+                    setSkillsFilter((prev) => prev.filter((s) => s !== skill))
+                  }
+                  className="text-purple-600 hover:text-purple-800 cursor-pointer"
+                >
+                  ✕
+                </button>
+              </span>
+            ))}
+
+            {/* Clear all filters */}
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => {
+                setStatusFilter('all');
+                setLocationFilter('all');
+                setSkillsFilter([]);
+                setGlobalFilter('');
+              }}
+              className="text-sm text-neutral-600"
+            >
+              Clear All
+            </Button>
+          </div>
+        )}
+
+        {/* Pagination-aware results display */}
+        {filteredData.length > 0 && (
+          <div className="text-sm text-neutral-600">
+            Showing {Math.min(pageSize, filteredData.length)} of{' '}
+            {filteredData.length} users
+            {filteredData.length > pageSize}
+          </div>
+        )}
+
+        {/* Table */}
+        <DataTable data={filteredData} columns={columns} pageSize={10} />
+      </section>
+
+      {/* Modals component */}
+      <ModalUserDetail
+        isOpen={showDetailModal}
+        onClose={handleCloseDetailModal}
+        user={selectedUser}
+      />
+
+      {/* New User Modal */}
+      <ModalUserDetail
+        isOpen={showNewUserModal}
+        onClose={handleCloseNewUserModal}
+        user={null} // null indicates creating new user
+      />
+    </BackofficeWrapper>
+  );
+};
+
+export default HackathonUsersPage;

apps/backoffice/src/app/(protected)/layout.tsx

@@ -1,13 +1,51 @@
-import { FC, ReactElement } from 'react';
+import { FC, ReactElement, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
 
 export const AppLayout: FC = (): ReactElement => {
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+
   return (
     <div className="bg-primary-50 min-h-screen flex justify-center">
       <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar />
+        <BackofficeSidebar
+          isOpen={mobileSidebarOpen}
+          onClose={() => setMobileSidebarOpen(false)}
+        />
         <div className="flex-1 overflow-auto">
+          {/* Sticky top header */}
+          <header
+            className={
+              'lg:hidden sticky top-0 bg-white border-b border-primary-200 px-4 py-3 flex items-center gap-3 ' +
+              (mobileSidebarOpen ? 'z-0' : 'z-30')
+            }
+          >
+            {/* Mobile menu button (shown on small screens) */}
+            <button
+              type="button"
+              className="lg:hidden p-2 rounded-md hover:bg-gray-100 text-gray-700"
+              onClick={() => setMobileSidebarOpen(true)}
+              aria-label="Open sidebar"
+            >
+              <svg
+                className="w-5 h-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              </svg>
+            </button>
+            <h1 className="text-p3 font-semibold text-primary-700">
+              IMPHNEN Backoffice
+            </h1>
+          </header>
+
           <Outlet />
         </div>
       </div>

apps/backoffice/src/app/(protected)/users-dimentorin/page.tsx

@@ -1,19 +1,29 @@
-import { SearchOutlined } from "@ant-design/icons";
-import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
-import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
-import { cn, For } from "@imphnen-frontend-service/utils";
-import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
-import { ReactElement, useState } from "react";
-import { ModalDetailUser } from "./_components/modal/detail";
+import { SearchOutlined } from '@ant-design/icons';
+import { Button, Input, Select } from '@imphnen-frontend-service/ui/atoms';
+import {
+  BackofficeWrapper,
+  DataTable,
+} from '@imphnen-frontend-service/ui/organisms';
+import { cn, For } from '@imphnen-frontend-service/utils';
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  RowSelectionState,
+  useReactTable,
+} from '@tanstack/react-table';
+import { ReactElement, useState } from 'react';
+import { ModalDetailUser } from './_components/modal/detail';
 
 type UserStatus = 'active' | 'inactive';
 
 interface UserType {
-  id: number
-  name: string
-  email: string
-  rating: number
-  status: UserStatus
+  id: number;
+  name: string;
+  email: string;
+  rating: number;
+  status: UserStatus;
 }
 
 const mockData: UserType[] = Array.from({ length: 90 }, (_, i) => ({
@@ -22,15 +32,15 @@ const mockData: UserType[] = Array.from({ length: 90 }, (_, i) => ({
   email: 'fullname23@gmail.com',
   rating: 4.5,
   status: i % 2 === 0 ? 'active' : 'inactive',
-}))
+}));
 
 export default function Components(): ReactElement {
-  const TABS = ['mentor', 'mentee'] as const
-  const [activeTab, setActiveTab] = useState<'mentor' | 'mentee'>('mentor')
-  const [showDetail, setShowDetail] = useState(false)
-  const [selectedUserId, setSelectedUserId] = useState<number | null>(null)
+  const TABS = ['mentor', 'mentee'] as const;
+  const [activeTab, setActiveTab] = useState<'mentor' | 'mentee'>('mentor');
+  const [showDetail, setShowDetail] = useState(false);
+  const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
 
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 9,
@@ -39,7 +49,7 @@ export default function Components(): ReactElement {
   const columns: ColumnDef<UserType>[] = [
     {
       id: 'select',
-      meta: { cellClassName: cn("w-20") },
+      meta: { cellClassName: cn('w-20') },
       header: ({ table }) => (
         <input
           type="checkbox"
@@ -97,7 +107,7 @@ export default function Components(): ReactElement {
     },
     {
       header: 'Action',
-      meta: { cellClassName: cn("w-72") },
+      meta: { cellClassName: cn('w-72') },
       cell: ({ row }) => (
         <Button
           variant="primary"
@@ -113,7 +123,7 @@ export default function Components(): ReactElement {
         </Button>
       ),
     },
-  ]
+  ];
 
   const table = useReactTable({
     data: mockData,
@@ -134,14 +144,19 @@ export default function Components(): ReactElement {
   return (
     <BackofficeWrapper title="Dimentorin.dev">
       <div className="mb-8 flex justify-between items-center">
-        <h1 className="text-p1 font-semibold text-neutral-700">User Management</h1>
+        <h1 className="text-p1 font-semibold text-neutral-700 mb-8">
+          User Management
+        </h1>
         <div className="flex gap-2 bg-primary-100 p-1.5 rounded-md">
           <For data={TABS}>
             {(tab) => (
               <Button
                 key={tab}
                 variant="text"
-                className={cn("px-3 py-2 capitalize", activeTab === tab && "bg-white")}
+                className={cn(
+                  'px-3 py-2 capitalize',
+                  activeTab === tab && 'bg-white'
+                )}
                 onClick={() => setActiveTab(tab)}
               >
                 {tab}
@@ -163,12 +178,16 @@ export default function Components(): ReactElement {
             </div>
           </div>
           <Select>
-            <option selected disabled>Rating</option>
+            <option selected disabled>
+              Rating
+            </option>
             <option value="4.5">4.5</option>
             <option value="5">5</option>
           </Select>
           <Select>
-            <option selected disabled>Status</option>
+            <option selected disabled>
+              Status
+            </option>
             <option value="active">Active</option>
             <option value="inactive">Inactive</option>
           </Select>

apps/backoffice/src/index.css

@@ -130,7 +130,7 @@
   html {
     font-family: 'Bai Jamjuree', sans-serif;
     font-weight: 400;
-    font-size: 12px;
+    font-size: 14px;
     line-height: 1.2;
   }
 }

apps/backoffice/src/middleware.ts

@@ -88,7 +88,7 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
     return null;
   }
 
-  if (!session) return redirect('/auth/login');
+  // if (!session) return redirect('/auth/login');
 
   const matchedRoute = mappingRoutePermissions.find(
     (route) => route.path === pathname

apps/dimentorin/.deploy

@@ -1 +1 @@
-Tue, Nov 25, 2025 11:09:55 AM
+Tue, Nov 25, 2025  4:21:27 PM

apps/gacha/.deploy

@@ -1 +1 @@
-Tue, Nov 25, 2025 11:09:55 AM
+Tue, Nov 25, 2025  4:21:27 PM

apps/hackathon/.deploy

@@ -1 +1 @@
-Tue, Nov 25, 2025 11:09:55 AM
+Tue, Nov 25, 2025  16:42:27 PM

apps/hackathon/.deploy-trigger

@@ -1,2 +0,0 @@
-# Deployment trigger
-# Updated to deploy circular dependency fixes and auth hooks

apps/hackathon/index.html

@@ -2,12 +2,36 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Hackathon</title>
+    <title>IMPHNEN x Kolosal.ai Hackathon 2025</title>
     <base href="/" />
-
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="/logos/simple.svg" />
+    <meta
+      name="description"
+      content="Ikuti IMPHNEN x Kolosal.ai Hackathon 2025! Kompetisi coding online gratis dengan total hadiah Rp14.500.000. Tema: Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif."
+    />
+    <meta
+      name="keywords"
+      content="hackathon, lomba coding, kompetisi it, imphnen, kolosal.ai, ai hackathon, lomba programming 2025"
+    />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/images/imphnen-logo-simple.svg"
+    />
     <link rel="stylesheet" href="/src/index.css" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://hackathon.imphnen.dev/" />
+    <meta property="og:title" content="IMPHNEN x Kolosal.ai Hackathon 2025" />
+    <meta
+      property="og:description"
+      content="Total hadiah Rp14.500.000! Daftar sekarang dan wujudkan inovasi AI-mu untuk membantu usaha lokal."
+    />
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://hackathon.imphnen.dev/" />
+    <meta
+      property="twitter:title"
+      content="IMPHNEN x Kolosal.ai Hackathon 2025"
+    />
   </head>
   <body>
     <div id="root"></div>

apps/hackathon/public/images/imphnen-logo-simple.svg

@@ -0,0 +1,9 @@
+<svg width="138" height="52" viewBox="0 0 138 52" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="137.505" height="51.7538" fill="url(#pattern0_164_316)"/>
+<defs>
+<pattern id="pattern0_164_316" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_164_316" transform="matrix(0.000440723 0 0 0.00117096 -0.173204 -1.3185)"/>
+</pattern>
+<image id="image0_164_316" width="3000" height="3000" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC7gAAAu4CAYAAABxFfV5AAAACXBIWXMAAC4jAAAuIwF4pT92AAX6AElEQVR4nOzaMQEAIAzAsIF/z0MGPRIFFdCzuwMAAAAAAAAAAAAAAL/d3wEAAAAAAAAAAAAAADBjcAcAAAAAAAAAAAAAIMLgDgAAAAAAAAAAAABAgsEdAAAAAAAAAAAAAIAEgzsAAAAAAAAAAAAAAAkGdwAAAAAAAAAAAAAAEgzuAAAAAAAAAAAAAAAkGNwBAAAAAAAAAAAAAEgwuAMAAAAAAAAAAAAAkGBwBwAAAAAAAAAAAAAgweAOAAAAAAAAAAAAAECCwR0AAAAAAAAAAAAAgASDOwAAAAAAAAAAAAAACQZ3AAAALine truncated
+</defs>
+</svg>

apps/hackathon/public/images/imphnen-logo.svg

@@ -0,0 +1,9 @@
+<svg width="317" height="170" viewBox="0 0 317 170" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="317" height="169.613" fill="url(#pattern0_164_317)"/>
+<defs>
+<pattern id="pattern0_164_317" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_164_317" transform="scale(0.00184502 0.00344828)"/>
+</pattern>
+<image id="image0_164_317" width="542" height="290" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh4AAAEiCAYAAAC2k9sBAAAABGdBTUEAALGPC/xhBQAACklpQ0NQc1JHQiBJRUM2MTk2Ni0yLjEAAEiJnVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQWaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28AAgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0ST4FANipk9wXANiiHKLine truncated
+</defs>
+</svg>

apps/hackathon/public/images/sponsors/kolosal-logo_rlxbck.svg

@@ -0,0 +1,10 @@
+<svg width="82" height="24" viewBox="0 0 82 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9814 11.6032C15.0691 11.7133 15.1239 11.8495 15.124 12C15.124 12.1501 15.0698 12.2867 14.9825 12.3968L26.8264 24H7.79044L7.76667 23.9757L0.0248413 16.3911L0 16.3679V7.63213L0.0248413 7.60885L7.76667 0.0243365L7.79044 0H26.8264L14.9814 11.6032ZM14.8659 12.5111C14.7535 12.5968 14.6143 12.6507 14.4609 12.6507C14.3071 12.6507 14.1673 12.5971 14.0548 12.5111L10.3977 16.0938C10.5164 16.2113 10.5899 16.3726 10.5899 16.5509C10.5899 16.6459 10.5668 16Line truncated
+<path d="M82 5.69697V17.3333H80.291V5.69697H82Z" fill="#0D0E0F"/>
+<path d="M73.9503 17.5265C73.3939 17.5265 72.8909 17.4242 72.4413 17.2197C71.9916 17.0114 71.6353 16.7102 71.3724 16.3163C71.1133 15.9223 70.9837 15.4394 70.9837 14.8674C70.9837 14.375 71.079 13.9697 71.2695 13.6515C71.4601 13.3333 71.7173 13.0814 72.0412 12.8958C72.3651 12.7102 72.7271 12.5701 73.1272 12.4754C73.5273 12.3807 73.935 12.3087 74.3504 12.2595C74.8762 12.1989 75.303 12.1496 75.6307 12.1117C75.9584 12.0701 76.1966 12.0038 76.3452 11.9129C76.4938 11.822 76.5681 11.6742 76.5681 11.469Line truncated
+<path d="M69.613 10.7367L68.064 11.0095C67.9992 10.8125 67.8963 10.625 67.7553 10.447C67.6182 10.2689 67.4314 10.1231 67.1952 10.0095C66.9589 9.89583 66.6636 9.83901 66.3092 9.83901C65.8253 9.83901 65.4214 9.94697 65.0975 10.1629C64.7736 10.375 64.6116 10.6496 64.6116 10.9867C64.6116 11.2784 64.7202 11.5133 64.9374 11.6913C65.1546 11.8693 65.5052 12.0151 65.9891 12.1288L67.3838 12.447C68.1916 12.6326 68.7937 12.9186 69.19 13.3049C69.5863 13.6913 69.7845 14.1932 69.7845 14.8106C69.7845 15.3333 6Line truncated
+<path d="M57.3021 17.5095C56.479 17.5095 55.7607 17.322 55.1472 16.947C54.5337 16.572 54.0574 16.0473 53.7182 15.3731C53.3791 14.6989 53.2095 13.911 53.2095 13.0095C53.2095 12.1042 53.3791 11.3125 53.7182 10.6345C54.0574 9.95644 54.5337 9.42992 55.1472 9.05492C55.7607 8.67992 56.479 8.49242 57.3021 8.49242C58.1252 8.49242 58.8435 8.67992 59.457 9.05492C60.0705 9.42992 60.5468 9.95644 60.8859 10.6345C61.2251 11.3125 61.3946 12.1042 61.3946 13.0095C61.3946 13.911 61.2251 14.6989 60.8859 15.3731C6Line truncated
+<path d="M51.573 5.69697V17.3333H49.864V5.69697H51.573Z" fill="#0D0E0F"/>
+<path d="M44.132 17.5095C43.3089 17.5095 42.5906 17.322 41.9771 16.947C41.3636 16.572 40.8873 16.0473 40.5482 15.3731C40.209 14.6989 40.0395 13.911 40.0395 13.0095C40.0395 12.1042 40.209 11.3125 40.5482 10.6345C40.8873 9.95644 41.3636 9.42992 41.9771 9.05492C42.5906 8.67992 43.3089 8.49242 44.132 8.49242C44.9551 8.49242 45.6734 8.67992 46.2869 9.05492C46.9004 9.42992 47.3767 9.95644 47.7158 10.6345C48.055 11.3125 48.2245 12.1042 48.2245 13.0095C48.2245 13.911 48.055 14.6989 47.7158 15.3731C47.3Line truncated
+<path d="M30.7951 17.3333V5.69697H32.5613V11.2538H32.7042L37.6141 5.69697H39.8376L35.1163 10.9356L39.8547 17.3333H37.7284L33.9445 12.1345L32.5613 13.714V17.3333H30.7951Z" fill="#0D0E0F"/>
+</svg>

apps/hackathon/src/app/404.tsx

@@ -2,13 +2,13 @@ import { Link } from 'react-router-dom';
 
 export default function NotFoundPage() {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950">
       <div className="text-center">
         <h1 className="text-9xl font-bold text-gray-200 mb-4">404</h1>
-        <h2 className="text-3xl font-semibold text-gray-900 mb-4">
+        <h2 className="text-3xl font-semibold text-gray-900 dark:text-gray-300 mb-4">
           Page Not Found
         </h2>
-        <p className="text-gray-600 mb-8">
+        <p className="text-gray-600 dark:text-gray-400 mb-8">
           The page you are looking for doesn't exist or has been moved.
         </p>
         <Link

apps/hackathon/src/app/auth/callback/page.tsx

@@ -1,11 +1,11 @@
 import { FC, ReactElement, useEffect, useState, useRef } from 'react';
 import { useNavigate } from 'react-router';
-import { useAuthStore, supabase } from '@imphnen-frontend-service/service';
+import { useGitHubCallback } from '@imphnen-frontend-service/service';
 import { toast } from 'sonner';
 
 const CallbackPage: FC = (): ReactElement => {
   const navigate = useNavigate();
-  const { setSession } = useAuthStore();
+  const { mutateAsync: exchangeGitHubCode } = useGitHubCallback();
   const [isProcessing, setIsProcessing] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const hasRunRef = useRef(false);
@@ -13,118 +13,64 @@ const CallbackPage: FC = (): ReactElement => {
   useEffect(() => {
     const handleCallback = async () => {
       if (hasRunRef.current) {
-        console.log('[Callback] Already processed, skipping...');
         return;
       }
       hasRunRef.current = true;
+
       try {
-        console.log('[Callback] Processing OAuth callback...');
-        console.log('[Callback] Current URL:', globalThis.location.href);
+        // Check URL hash for Supabase email confirmation callback
+        const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
+        const urlParams = new URLSearchParams(globalThis.location.search);
 
-        // Supabase client is configured with detectSessionInUrl: true
-        // This means Supabase automatically detects and processes OAuth tokens from the URL hash
-        // We just need to wait a moment for it to complete, then check for the session
+        const type = hashParams.get('type') || urlParams.get('type');
+        const accessToken = hashParams.get('access_token') || urlParams.get('access_token');
 
-        console.log('[Callback] Waiting for Supabase to process OAuth callback...');
-        await new Promise(resolve => setTimeout(resolve, 1000));
+        // Debug: log what we received
+        console.log('[Callback] Params:', { type, accessToken: !!accessToken, hash: globalThis.location.hash, search: globalThis.location.search });
 
-        // Get the session that Supabase automatically created from the URL hash
-        const { data: { session: sessionData }, error: sessionError } = await supabase.auth.getSession();
+        // Handle Supabase email callbacks (has access_token in hash or query)
+        // This includes: signup confirmation, email confirmation, password recovery
+        if (accessToken) {
+          setIsProcessing(false);
 
-        if (sessionError) {
-          console.error('[Callback] Session error:', sessionError);
-          throw new Error(sessionError.message || 'Failed to get session');
+          // Password recovery - type is 'recovery' or we have access_token from reset email
+          if (type === 'recovery' || type === 'magiclink') {
+            toast.success('Email verified! Please set your new password.');
+            navigate('/auth/reset-password?access_token=' + accessToken);
+            return;
           }
 
-        if (!sessionData || !sessionData.user) {
-          throw new Error('No session found after OAuth callback. Please try logging in again.');
+          // Signup/Email confirmation
+          if (type === 'signup' || type === 'email_confirmation') {
+            toast.success('Email verified successfully! Please log in to continue.');
+            navigate('/auth/login');
+            return;
           }
 
-        console.log('[Callback] Supabase session established:', {
-          userId: sessionData.user.id,
-          email: sessionData.user.email,
-        });
-
-        // Create/update user in the users table (for foreign key constraints)
-        console.log('[Callback] Creating/updating user record...');
-        const { data: userData, error: upsertError } = await supabase
-          .from('users')
-          .upsert({
-            id: sessionData.user.id,
-            email: sessionData.user.email || '',
-            fullname: sessionData.user.user_metadata?.full_name ||
-                     sessionData.user.user_metadata?.name ||
-                     sessionData.user.email?.split('@')[0] || '',
-            avatar: sessionData.user.user_metadata?.avatar_url || '',
-            is_active: true,
-            updated_at: new Date().toISOString(),
-          }, {
-            onConflict: 'id',
-          })
-          .select()
-          .single();
-
-        if (upsertError) {
-          console.warn('[Callback] Failed to create user record:', upsertError);
-          // Don't throw - continue with login even if user record creation fails
-        } else {
-          console.log('[Callback] User record created/updated successfully');
+          // If we have access_token but unknown type, assume it's password recovery
+          // (Supabase sometimes sends without explicit type)
+          toast.success('Email verified! Please set your new password.');
+          navigate('/auth/reset-password?access_token=' + accessToken);
+          return;
         }
 
-        // Store user-friendly data in Zustand for UI purposes
-        // Supabase now manages the actual auth session
-        // Use data from database if available, otherwise use OAuth metadata
-        const userRecord = userData || {
-          id: sessionData.user.id,
-          email: sessionData.user.email || '',
-          fullname: sessionData.user.user_metadata?.full_name ||
-                   sessionData.user.user_metadata?.name ||
-                   sessionData.user.email?.split('@')[0] || '',
-          avatar: sessionData.user.user_metadata?.avatar_url || '',
-          phone_number: '',
-          birthdate: '',
-          gender: '',
-          is_active: true,
-        };
+        // Get the code from URL query params (GitHub OAuth)
+        const code = urlParams.get('code');
 
-        setSession({
-          token: {
-            access_token: sessionData.access_token,
-            refresh_token: sessionData.refresh_token || '',
-          },
-          user: {
-            id: userRecord.id,
-            email: userRecord.email,
-            fullname: userRecord.fullname,
-            phone_number: userRecord.phone_number || '',
-            avatar: userRecord.avatar || '',
-            birthdate: userRecord.birthdate || '',
-            gender: userRecord.gender || '',
-            is_active: userRecord.is_active,
-            location: userRecord.location,
-            bio: userRecord.bio,
-            skills: userRecord.skills,
-            role: {
-              id: '',
-              name: 'user',
-              permissions: [],
-              created_at: '',
-              updated_at: '',
-            },
-          },
-        });
+        if (!code) {
+          throw new Error('No authorization code received');
+        }
+
+        // Exchange the code for tokens using backend API (GitHub OAuth)
+        const result = await exchangeGitHubCode({ code });
 
-        console.log('[Callback] Session stored successfully');
         toast.success('Login successful!');
         setIsProcessing(false);
 
         // Check if user has completed onboarding (has location)
-        // Use globalThis.location.replace for hard redirect to prevent history issues
-        if (userRecord.location) {
-          console.log('[Callback] User has completed onboarding, redirecting to dashboard...');
+        if (result.user.location) {
           globalThis.location.replace('/dashboard');
         } else {
-          console.log('[Callback] User needs onboarding, redirecting...');
           globalThis.location.replace('/onboarding/user');
         }
       } catch (err) {
@@ -141,21 +87,68 @@ const CallbackPage: FC = (): ReactElement => {
 
     handleCallback();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // Run only once on mount
+  }, []);
 
   if (error) {
+    // Check if error is related to private email
+    const isPrivateEmailError =
+      error.toLowerCase().includes('failed to create user') ||
+      error.toLowerCase().includes('email') ||
+      error.toLowerCase().includes('user record');
+
     return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 px-4">
-        <div className="bg-white w-full max-w-2xl p-8 rounded-2xl shadow-lg border border-red-200">
+      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 px-4">
+        <div className="bg-white dark:bg-gray-900 w-full max-w-2xl p-8 rounded-2xl shadow-lg border border-red-200 dark:border-red-800">
           <div className="text-center mb-6">
             <div className="text-red-500 text-5xl mb-4">⚠️</div>
-            <h2 className="text-2xl font-bold text-gray-900 mb-2">
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
               GitHub Login Failed
             </h2>
-            <p className="text-red-600 mb-4 whitespace-pre-line">{error}</p>
+            <p className="text-red-600 dark:text-red-400 mb-4 whitespace-pre-line">{error}</p>
           </div>
 
-          <p className="text-gray-600 text-sm mt-6 text-center">
+          {isPrivateEmailError && (
+            <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4 mb-6">
+              <h3 className="font-semibold text-amber-800 dark:text-amber-300 mb-2">
+                Is your GitHub email set to private?
+              </h3>
+              <p className="text-amber-700 dark:text-amber-400 text-sm mb-3">
+                GitHub login requires a public email address. Please follow these steps:
+              </p>
+              <ol className="text-amber-700 dark:text-amber-400 text-sm list-decimal list-inside space-y-1 mb-3">
+                <li>
+                  Go to{' '}
+                  <a
+                    href="https://github.com/settings/emails"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline hover:text-amber-900 dark:hover:text-amber-200"
+                  >
+                    GitHub Email Settings
+                  </a>
+                </li>
+                <li>Uncheck "Keep my email addresses private"</li>
+                <li>
+                  Or go to{' '}
+                  <a
+                    href="https://github.com/settings/profile"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline hover:text-amber-900 dark:hover:text-amber-200"
+                  >
+                    Profile Settings
+                  </a>{' '}
+                  and set a public email
+                </li>
+                <li>Try signing in with GitHub again</li>
+              </ol>
+              <p className="text-amber-600 dark:text-amber-500 text-xs">
+                Alternatively, you can sign up using email and password instead.
+              </p>
+            </div>
+          )}
+
+          <p className="text-gray-600 dark:text-gray-400 text-sm mt-6 text-center">
             Redirecting to login page in 3 seconds...
           </p>
         </div>
@@ -164,13 +157,13 @@ const CallbackPage: FC = (): ReactElement => {
   }
 
   return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50">
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950">
       <div className="text-center">
         <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
-        <h2 className="text-xl font-semibold text-gray-900 mb-2">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
           Completing login...
         </h2>
-        <p className="text-gray-600">Please wait</p>
+        <p className="text-gray-600 dark:text-gray-400">Please wait</p>
       </div>
     </div>
   );

apps/hackathon/src/app/auth/forgot-password/page.tsx

@@ -1,12 +1,15 @@
 import { useState } from 'react';
-import { supabase } from '@imphnen-frontend-service/service';
-import { Link } from 'react-router';
+import { useForgotPassword } from '@imphnen-frontend-service/service';
+import { Link, useNavigate } from 'react-router';
 import { toast } from 'sonner';
+import { Icon } from '@iconify/react';
+import ThemeToggle from '../../../components/theme-toggle';
 
 export default function ForgotPasswordPage() {
   const [email, setEmail] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
   const [emailSent, setEmailSent] = useState(false);
+  const navigate = useNavigate();
+  const forgotPasswordMutation = useForgotPassword();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -17,45 +20,35 @@ export default function ForgotPasswordPage() {
     }
 
     try {
-      setIsLoading(true);
-
-      const { error } = await supabase.auth.resetPasswordForEmail(email, {
-        redirectTo: `${window.location.origin}/auth/reset-password`,
-      });
-
-      if (error) {
-        throw error;
-      }
+      await forgotPasswordMutation.mutateAsync({ email });
 
       setEmailSent(true);
       toast.success('Password reset email sent! Check your inbox.');
     } catch (err) {
-      console.error('Failed to send reset email:', err);
       toast.error((err as Error).message || 'Failed to send reset email');
-    } finally {
-      setIsLoading(false);
     }
   };
 
   if (emailSent) {
     return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-        <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 text-center">
+      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+        <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 text-center">
           <div className="mb-6">
-            <div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
+            <div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mb-4">
               <span className="text-3xl">✓</span>
             </div>
-            <h2 className="text-3xl font-bold text-gray-900 mb-2">
+            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
               Check Your Email
             </h2>
-            <p className="text-gray-600">
+            <p className="text-gray-600 dark:text-gray-400">
               We've sent a password reset link to <strong>{email}</strong>
             </p>
           </div>
 
           <div className="space-y-4">
-            <p className="text-sm text-gray-600">
-              Click the link in the email to reset your password. The link will expire in 1 hour.
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              Click the link in the email to reset your password. The link will
+              expire in 1 hour.
             </p>
 
             <Link to="/auth/login">
@@ -66,7 +59,7 @@ export default function ForgotPasswordPage() {
 
             <button
               onClick={() => setEmailSent(false)}
-              className="w-full py-3 text-gray-600 hover:text-gray-900 transition-colors"
+              className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
             >
               Send another email
             </button>
@@ -77,20 +70,33 @@ export default function ForgotPasswordPage() {
   }
 
   return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
+        <div className="flex items-center justify-between mb-6">
+          <button
+            onClick={() => navigate('/auth/login')}
+            className="cursor-pointer text-primary-500 hover:text-primary-600 dark:text-primary-400 dark:hover:text-primary-300 text-base font-sans flex items-center"
+          >
+            <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
+            Back to Login
+          </button>
+          <ThemeToggle />
+        </div>
         <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
             Forgot Password?
           </h2>
-          <p className="text-gray-600">
+          <p className="text-gray-600 dark:text-gray-400">
             No worries, we'll send you reset instructions
           </p>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
               Email Address
             </label>
             <input
@@ -99,26 +105,20 @@ export default function ForgotPasswordPage() {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               placeholder="your@email.com"
-              disabled={isLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+              disabled={forgotPasswordMutation.isPending}
+              className="bg-white dark:bg-gray-800 text-gray-900 dark:text-white w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
               required
             />
           </div>
 
           <button
             type="submit"
-            disabled={isLoading}
+            disabled={forgotPasswordMutation.isPending}
             className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
           >
-            {isLoading ? 'Sending...' : 'Send Reset Link'}
+            {forgotPasswordMutation.isPending ? 'Sending...' : 'Send Reset Link'}
           </button>
         </form>
-
-        <div className="mt-6 text-center">
-          <Link to="/auth/login" className="text-primary-600 hover:text-primary-700 font-semibold">
-            ← Back to Login
-          </Link>
-        </div>
       </div>
     </div>
   );

apps/hackathon/src/app/auth/login/page-original.tsx

@@ -1,89 +0,0 @@
-import { FC, ReactElement, useEffect, useState } from 'react';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate } from 'react-router';
-import { useGitHubAuth } from '@imphnen-frontend-service/service';
-import { useSession } from '@imphnen-frontend-service/utils';
-import { GithubOutlined } from '@ant-design/icons';
-
-const LoginPage: FC = (): ReactElement => {
-  console.log('[LoginPage] Rendering...');
-
-  const navigate = useNavigate();
-  const { signInWithGitHub } = useGitHubAuth();
-  const [isGithubLoading, setIsGithubLoading] = useState(false);
-  const { isAuthenticated } = useSession();
-
-  console.log('[LoginPage] isAuthenticated:', isAuthenticated);
-
-  useEffect(() => {
-    console.log('[LoginPage] useEffect - isAuthenticated:', isAuthenticated);
-    if (isAuthenticated) {
-      console.log('[LoginPage] Redirecting to dashboard...');
-      navigate('/dashboard');
-    }
-  }, [isAuthenticated, navigate]);
-
-  const handleGithubLogin = async () => {
-    try {
-      setIsGithubLoading(true);
-      console.log('[Login] Initiating GitHub OAuth...');
-
-      const result = await signInWithGitHub();
-      console.log('[Login] OAuth result:', result);
-
-      // Check if we got a redirect URL
-      if (result?.url) {
-        console.log('[Login] Redirecting to GitHub OAuth:', result.url);
-        // Supabase should handle the redirect automatically
-        // If we're still here after 2 seconds, manually redirect
-        setTimeout(() => {
-          if (result.url) {
-            globalThis.location.href = result.url;
-          }
-        }, 2000);
-      } else {
-        console.error('[Login] No OAuth URL returned');
-        setIsGithubLoading(false);
-      }
-    } catch (error) {
-      console.error('[Login] GitHub login failed:', error);
-      setIsGithubLoading(false);
-    }
-  };
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 px-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-100">
-        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
-            Welcome to Hackathon
-          </h2>
-          <p className="text-gray-600">
-            Sign in with your GitHub account to join or create your hackathon team
-          </p>
-        </div>
-
-        <Button
-          className="w-full gap-2 py-3"
-          variant="secondary"
-          onClick={handleGithubLogin}
-          disabled={isGithubLoading}
-          type="button"
-        >
-          <GithubOutlined className="text-xl" />
-          <span className="font-semibold">
-            {isGithubLoading ? 'Connecting...' : 'Sign in with GitHub'}
-          </span>
-        </Button>
-
-        <div className="mt-6 text-center">
-          <p className="text-gray-500 text-sm">
-            By signing in, you agree to our Terms of Service and Privacy Policy
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default LoginPage;

apps/hackathon/src/app/auth/login/page.tsx

@@ -1,21 +1,43 @@
-import { useState } from 'react';
-import { useGitHubAuth, useEmailAuth, supabase, useAuthStore } from '@imphnen-frontend-service/service';
+import { useState, useEffect } from 'react';
+import {
+  useGitHubAuth,
+  useLogin,
+} from '@imphnen-frontend-service/service';
 import { GithubOutlined } from '@ant-design/icons';
 import { useNavigate, Link } from 'react-router';
 import { toast } from 'sonner';
+import { Icon } from '@iconify/react';
+import { ThemeToggle } from '../../../components/theme-toggle';
 
 export default function LoginPage() {
-  console.log('[LoginPage] Rendering...');
-
   const navigate = useNavigate();
-  const { setSession } = useAuthStore();
   const { signInWithGitHub } = useGitHubAuth();
-  const { signInWithEmail } = useEmailAuth();
+  const loginMutation = useLogin();
   const [isGithubLoading, setIsGithubLoading] = useState(false);
-  const [isEmailLoading, setIsEmailLoading] = useState(false);
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState<string | null>(null);
+  const [showPassword, setShowPassword] = useState(false);
+
+  // Check for password reset tokens in URL and redirect to reset-password page
+  useEffect(() => {
+    const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
+    const urlParams = new URLSearchParams(globalThis.location.search);
+
+    const accessToken = hashParams.get('access_token') || urlParams.get('access_token');
+    const type = hashParams.get('type') || urlParams.get('type');
+
+    // If we have an access_token, this is likely a password reset redirect that landed on the wrong page
+    if (accessToken) {
+      console.log('[Login] Detected access_token, redirecting to reset-password page');
+
+      // Check if it's a password recovery
+      if (type === 'recovery' || type === 'magiclink' || !type) {
+        toast.info('Redirecting to password reset...');
+        navigate('/auth/reset-password?access_token=' + accessToken);
+      }
+    }
+  }, [navigate]);
 
   const handleEmailLogin = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -27,51 +49,12 @@ export default function LoginPage() {
     }
 
     try {
-      setIsEmailLoading(true);
-      console.log('[Login] Attempting email login...');
-
-      const result = await signInWithEmail(email, password);
-      console.log('[Login] Email login successful:', result);
-
-      // Get user data from database
-      const { data: userData } = await supabase
-        .from('users')
-        .select('*')
-        .eq('id', result.user.id)
-        .single();
-
-      // Store session in Zustand
-      setSession({
-        token: {
-          access_token: result.session.access_token,
-          refresh_token: result.session.refresh_token || '',
-        },
-        user: {
-          id: result.user.id,
-          email: result.user.email || '',
-          fullname: userData?.fullname || result.user.user_metadata?.full_name || '',
-          phone_number: userData?.phone_number || '',
-          avatar: userData?.avatar || '',
-          birthdate: userData?.birthdate || '',
-          gender: userData?.gender || '',
-          is_active: userData?.is_active || true,
-          location: userData?.location,
-          bio: userData?.bio,
-          skills: userData?.skills,
-          role: {
-            id: '',
-            name: 'user',
-            permissions: [],
-            created_at: '',
-            updated_at: '',
-          },
-        },
-      });
+      const result = await loginMutation.mutateAsync({ email, password });
 
       toast.success('Login successful!');
 
       // Redirect based on onboarding status
-      if (userData?.location) {
+      if (result.user.location) {
         navigate('/dashboard');
       } else {
         navigate('/onboarding/user');
@@ -79,54 +62,64 @@ export default function LoginPage() {
     } catch (err) {
       console.error('[Login] Email login failed:', err);
       setError((err as Error).message || 'Login failed');
-      setIsEmailLoading(false);
     }
   };
 
   const handleGithubLogin = async () => {
     try {
       setIsGithubLoading(true);
-      console.log('[Login] Initiating GitHub OAuth...');
 
       const result = await signInWithGitHub();
-      console.log('[Login] OAuth result:', result);
 
       // Check if we got a redirect URL
       if (result?.url) {
-        console.log('[Login] Redirecting to GitHub OAuth:', result.url);
-        // Manually redirect immediately
         globalThis.location.href = result.url;
       } else {
-        console.error('[Login] No OAuth URL returned');
         setIsGithubLoading(false);
+        setError('Failed to get GitHub OAuth URL');
       }
-    } catch (error) {
-      console.error('[Login] GitHub login failed:', error);
+    } catch (err) {
+      console.error('[Login] GitHub login failed:', err);
+      setError((err as Error).message || 'GitHub login failed');
       setIsGithubLoading(false);
     }
   };
 
   return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
+        <div className="flex items-center justify-between mb-6">
+          <button
+            onClick={() => navigate('/')}
+            className="cursor-pointer text-primary-500 hover:text-primary-600 dark:text-primary-400 dark:hover:text-primary-300 text-base font-sans flex items-center"
+          >
+            <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
+            Back to Homepage
+          </button>
+          <ThemeToggle />
+        </div>
+
         <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
             Welcome Back
           </h2>
-          <p className="text-gray-600">
+          <p className="text-gray-600 dark:text-gray-400 font-sans">
             Sign in to join or create your hackathon team
           </p>
         </div>
 
         {error && (
-          <div className="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg">
-            <p className="text-red-600 text-sm">{error}</p>
+          <div className="mb-6 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+            <p className="text-red-600 dark:text-red-400 text-sm">{error}</p>
           </div>
         )}
 
         <form onSubmit={handleEmailLogin} className="space-y-4">
           <div>
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
               Email
             </label>
             <input
@@ -135,53 +128,70 @@ export default function LoginPage() {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               placeholder="your@email.com"
-              disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+              disabled={loginMutation.isPending}
+              className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
               required
             />
           </div>
 
           <div>
             <div className="flex items-center justify-between mb-1">
-              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+              <label
+                htmlFor="password"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+              >
                 Password
               </label>
-              <Link to="/auth/forgot-password" className="text-sm text-primary-600 hover:text-primary-700">
+              <Link
+                to="/auth/forgot-password"
+                className="text-sm text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300"
+              >
                 Forgot password?
               </Link>
             </div>
+            <div className="relative">
               <input
                 id="password"
-              type="password"
+                type={showPassword ? 'text' : 'password'}
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="••••••••"
-              disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+                disabled={loginMutation.isPending}
+                className="w-full px-4 py-2.5 pr-12 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
                 required
               />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+              >
+                <Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
+              </button>
+            </div>
           </div>
 
           <button
             type="submit"
-            disabled={isEmailLoading}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
+            disabled={loginMutation.isPending}
+            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors cursor-pointer"
           >
-            {isEmailLoading ? 'Signing in...' : 'Sign in with Email'}
+            {loginMutation.isPending ? 'Signing in...' : 'Sign in with Email'}
           </button>
         </form>
 
         <div className="my-6 flex items-center">
-          <div className="flex-1 border-t border-gray-300"></div>
-          <span className="px-4 text-sm text-gray-500">OR</span>
-          <div className="flex-1 border-t border-gray-300"></div>
+          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
+          <span className="px-4 text-sm text-gray-500 dark:text-gray-400">
+            OR
+          </span>
+          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
         </div>
 
         <button
           onClick={handleGithubLogin}
           disabled={isGithubLoading}
           type="button"
-          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 border border-gray-300 rounded-lg font-semibold hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors"
+          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg font-semibold text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:cursor-not-allowed transition-colors cursor-pointer"
         >
           <GithubOutlined className="text-xl" />
           <span>
@@ -189,17 +199,33 @@ export default function LoginPage() {
           </span>
         </button>
 
+        <p className="mt-3 text-xs text-center text-gray-500 dark:text-gray-500 font-sans">
+          Make sure your GitHub email is{' '}
+          <a
+            href="https://github.com/settings/emails"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary-600 dark:text-primary-400 hover:underline"
+          >
+            set to public
+          </a>{' '}
+          for GitHub sign in to work.
+        </p>
+
         <div className="mt-6 text-center">
-          <p className="text-gray-600 text-sm">
+          <p className="text-gray-600 dark:text-gray-400 text-sm">
             Don't have an account?{' '}
-            <a href="/auth/signup" className="text-primary-600 hover:text-primary-700 font-semibold">
+            <Link
+              to="/auth/signup"
+              className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-semibold"
+            >
               Sign up
-            </a>
+            </Link>
           </p>
         </div>
 
         <div className="mt-6 text-center">
-          <p className="text-gray-500 text-xs">
+          <p className="text-gray-500 dark:text-gray-500 text-xs">
             By signing in, you agree to our Terms of Service and Privacy Policy
           </p>
         </div>

apps/hackathon/src/app/auth/reset-password/page.tsx

@@ -1,25 +1,32 @@
 import { useState, useEffect } from 'react';
-import { supabase } from '@imphnen-frontend-service/service';
+import { useResetPassword, useAuthStore } from '@imphnen-frontend-service/service';
 import { useNavigate } from 'react-router';
 import { toast } from 'sonner';
+import { Icon } from '@iconify/react';
 
 export default function ResetPasswordPage() {
   const navigate = useNavigate();
+  const { clearSession } = useAuthStore();
+  const resetPasswordMutation = useResetPassword();
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [isValidToken, setIsValidToken] = useState(false);
+  const [accessToken, setAccessToken] = useState<string | null>(null);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
   useEffect(() => {
-    // Check if we have a valid session (from the reset link)
-    supabase.auth.getSession().then(({ data: { session } }) => {
-      if (session) {
-        setIsValidToken(true);
+    // Get the access_token from URL hash (Supabase sends it as hash fragment)
+    // or from query params (when redirected from callback page)
+    const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
+    const queryParams = new URLSearchParams(globalThis.location.search);
+    const token = hashParams.get('access_token') || queryParams.get('access_token');
+
+    if (token) {
+      setAccessToken(token);
     } else {
       toast.error('Invalid or expired reset link');
       setTimeout(() => navigate('/auth/forgot-password'), 2000);
     }
-    });
   }, [navigate]);
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -35,94 +42,117 @@ export default function ResetPasswordPage() {
       return;
     }
 
-    try {
-      setIsLoading(true);
-
-      const { error } = await supabase.auth.updateUser({
-        password: password
-      });
-
-      if (error) {
-        throw error;
+    if (!accessToken) {
+      toast.error('Invalid reset token');
+      return;
     }
 
+    try {
+      await resetPasswordMutation.mutateAsync({
+        access_token: accessToken,
+        new_password: password,
+      });
+
       toast.success('Password updated successfully!');
 
-      // Sign out and redirect to login
-      await supabase.auth.signOut();
+      // Clear session and redirect to login
+      clearSession();
       navigate('/auth/login');
     } catch (err) {
-      console.error('Failed to reset password:', err);
       toast.error((err as Error).message || 'Failed to reset password');
-    } finally {
-      setIsLoading(false);
     }
   };
 
-  if (!isValidToken) {
+  if (!accessToken) {
     return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50">
+      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950">
         <div className="text-center">
           <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
-          <p className="text-gray-600">Verifying reset link...</p>
+          <p className="text-gray-600 dark:text-gray-400">
+            Verifying reset link...
+          </p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
         <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
             Set New Password
           </h2>
-          <p className="text-gray-600">
+          <p className="text-gray-600 dark:text-gray-400">
             Enter your new password below
           </p>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="password"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
               New Password
             </label>
+            <div className="relative">
               <input
                 id="password"
-              type="password"
+                type={showPassword ? 'text' : 'password'}
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="••••••••"
-              disabled={isLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+                disabled={resetPasswordMutation.isPending}
+                className="w-full px-4 py-2.5 pr-12 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                 required
                 minLength={6}
               />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+              >
+                <Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
+              </button>
+            </div>
           </div>
 
           <div>
-            <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="confirmPassword"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
               Confirm New Password
             </label>
+            <div className="relative">
               <input
                 id="confirmPassword"
-              type="password"
+                type={showConfirmPassword ? 'text' : 'password'}
                 value={confirmPassword}
                 onChange={(e) => setConfirmPassword(e.target.value)}
                 placeholder="••••••••"
-              disabled={isLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+                disabled={resetPasswordMutation.isPending}
+                className="w-full px-4 py-2.5 pr-12 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                 required
                 minLength={6}
               />
+              <button
+                type="button"
+                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+              >
+                <Icon icon={showConfirmPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
+              </button>
+            </div>
           </div>
 
           <button
             type="submit"
-            disabled={isLoading}
+            disabled={resetPasswordMutation.isPending}
             className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
           >
-            {isLoading ? 'Updating...' : 'Update Password'}
+            {resetPasswordMutation.isPending ? 'Updating...' : 'Update Password'}
           </button>
         </form>
       </div>

apps/hackathon/src/app/auth/signup/page.tsx

@@ -1,235 +1,368 @@
 import { useState } from 'react';
-import { useGitHubAuth, useEmailAuth, supabase, useAuthStore } from '@imphnen-frontend-service/service';
+import { useGitHubAuth, useSignup } from '@imphnen-frontend-service/service';
 import { GithubOutlined } from '@ant-design/icons';
-import { useNavigate } from 'react-router';
+import { useNavigate, Link } from 'react-router';
 import { toast } from 'sonner';
+import { Icon } from '@iconify/react';
+import { ThemeToggle } from '../../../components/theme-toggle';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+const signupSchema = z
+  .object({
+    fullname: z
+      .string()
+      .min(1, 'Full name is required')
+      .min(2, 'Full name must be at least 2 characters'),
+    email: z
+      .string()
+      .min(1, 'Email is required')
+      .email('Please enter a valid email address'),
+    password: z
+      .string()
+      .min(1, 'Password is required')
+      .min(6, 'Password must be at least 6 characters'),
+    confirmPassword: z.string().min(1, 'Please confirm your password'),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: 'Passwords do not match',
+    path: ['confirmPassword'],
+  });
+
+type SignupFormData = z.infer<typeof signupSchema>;
+
+// Registration deadline: 2025-11-30 23:29:00 WIB (UTC+7)
+const REGISTRATION_DEADLINE = new Date('2025-11-30T16:29:00Z');
 
 export default function SignupPage() {
   const navigate = useNavigate();
-  const { setSession } = useAuthStore();
-  const { signInWithGitHub } = useGitHubAuth();
-  const { signUpWithEmail } = useEmailAuth();
-  const [isGithubLoading, setIsGithubLoading] = useState(false);
-  const [isEmailLoading, setIsEmailLoading] = useState(false);
-  const [fullname, setFullname] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [error, setError] = useState<string | null>(null);
 
-  const handleEmailSignup = async (e: React.FormEvent) => {
-    e.preventDefault();
+  // Check if registration is closed
+  const isRegistrationClosed = new Date() >= REGISTRATION_DEADLINE;
+  const { signInWithGitHub } = useGitHubAuth();
+  const signupMutation = useSignup();
+  const [isGithubLoading, setIsGithubLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [registrationSuccess, setRegistrationSuccess] = useState(false);
+  const [registeredEmail, setRegisteredEmail] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<SignupFormData>({
+    resolver: zodResolver(signupSchema),
+    mode: 'onChange',
+  });
+
+  const onSubmit = async (data: SignupFormData) => {
     setError(null);
 
-    if (!fullname || !email || !password || !confirmPassword) {
-      setError('Please fill in all fields');
-      return;
-    }
-
-    if (password !== confirmPassword) {
-      setError('Passwords do not match');
-      return;
-    }
-
-    if (password.length < 6) {
-      setError('Password must be at least 6 characters long');
-      return;
-    }
-
     try {
-      setIsEmailLoading(true);
-      console.log('[Signup] Attempting email signup...');
-
-      const result = await signUpWithEmail(email, password, fullname);
-      console.log('[Signup] Email signup successful:', result);
-
-      if (!result.user) {
-        throw new Error('Signup failed - no user returned');
-      }
-
-      // Create user record in database
-      const { error: upsertError } = await supabase
-        .from('users')
-        .upsert({
-          id: result.user.id,
-          email: result.user.email || '',
-          fullname: fullname,
-          is_active: true,
-          updated_at: new Date().toISOString(),
-        }, {
-          onConflict: 'id',
+      const result = await signupMutation.mutateAsync({
+        email: data.email,
+        password: data.password,
+        fullname: data.fullname,
       });
-
-      if (upsertError) {
-        console.warn('[Signup] Failed to create user record:', upsertError);
-      }
-
-      // If session is available (email confirmation disabled), store it
-      if (result.session) {
-        setSession({
-          token: {
-            access_token: result.session.access_token,
-            refresh_token: result.session.refresh_token || '',
-          },
-          user: {
-            id: result.user.id,
-            email: result.user.email || '',
-            fullname: fullname,
-            phone_number: '',
-            avatar: '',
-            birthdate: '',
-            gender: '',
-            is_active: true,
-            role: {
-              id: '',
-              name: 'user',
-              permissions: [],
-              created_at: '',
-              updated_at: '',
-            },
-          },
-        });
-
-        toast.success('Account created successfully!');
-        navigate('/onboarding/user');
-      } else {
-        // Email confirmation is enabled
-        toast.success('Account created! Please check your email to verify your account.');
-        setTimeout(() => {
-          navigate('/auth/login');
-        }, 2000);
-      }
+      toast.success(result.message);
+      setRegisteredEmail(data.email);
+      setRegistrationSuccess(true);
     } catch (err) {
       console.error('[Signup] Email signup failed:', err);
       setError((err as Error).message || 'Signup failed');
-      setIsEmailLoading(false);
     }
   };
 
+  // Show closed registration screen
+  if (isRegistrationClosed) {
+    return (
+      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+        <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 text-center">
+          <div className="mb-6">
+            <div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-4">
+              <Icon
+                icon="mdi:clock-alert"
+                className="text-3xl text-red-600 dark:text-red-400"
+              />
+            </div>
+            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
+              Registration Closed
+            </h2>
+            <p className="text-gray-600 dark:text-gray-400">
+              The registration period for this hackathon has ended.
+            </p>
+          </div>
+
+          <div className="space-y-4">
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              Thank you for your interest! Registration closed on November 30, 2025 at 23:29 WIB.
+            </p>
+
+            <Link to="/auth/login">
+              <button className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors cursor-pointer">
+                Go to Login
+              </button>
+            </Link>
+
+            <button
+              onClick={() => navigate('/')}
+              className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer"
+            >
+              Back to Homepage
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Show success screen after registration
+  if (registrationSuccess) {
+    return (
+      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+        <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 text-center">
+          <div className="mb-6">
+            <div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mb-4">
+              <Icon
+                icon="mdi:email-check"
+                className="text-3xl text-green-600 dark:text-green-400"
+              />
+            </div>
+            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
+              Check Your Email
+            </h2>
+            <p className="text-gray-600 dark:text-gray-400">
+              We've sent an activation link to{' '}
+              <strong>{registeredEmail}</strong>
+            </p>
+          </div>
+
+          <div className="space-y-4">
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              Click the link in the email to activate your account. The link
+              will expire in 24 hours.
+            </p>
+
+            <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3">
+              <p className="text-sm text-amber-700 dark:text-amber-300">
+                Don't forget to check your spam folder if you don't see the
+                email.
+              </p>
+            </div>
+
+            <Link to="/auth/login">
+              <button className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors cursor-pointer">
+                Go to Login
+              </button>
+            </Link>
+
+            <button
+              onClick={() => setRegistrationSuccess(false)}
+              className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer"
+            >
+              Register with different email
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   const handleGithubLogin = async () => {
     try {
       setIsGithubLoading(true);
-      console.log('[Signup] Initiating GitHub OAuth...');
 
       const result = await signInWithGitHub();
-      console.log('[Signup] OAuth result:', result);
 
       if (result?.url) {
-        console.log('[Signup] Redirecting to GitHub OAuth:', result.url);
         globalThis.location.href = result.url;
       } else {
-        console.error('[Signup] No OAuth URL returned');
         setIsGithubLoading(false);
+        setError('Failed to get GitHub OAuth URL');
       }
-    } catch (error) {
-      console.error('[Signup] GitHub login failed:', error);
+    } catch (err) {
+      console.error('[Signup] GitHub login failed:', err);
+      setError((err as Error).message || 'GitHub login failed');
       setIsGithubLoading(false);
     }
   };
 
+  const inputBaseClass =
+    'w-full px-4 py-2.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed';
+  const inputErrorClass = 'border-red-500 dark:border-red-500';
+  const inputNormalClass = 'border-gray-300 dark:border-gray-600';
+
   return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
+        <div className="flex items-center justify-between mb-6">
+          <button
+            onClick={() => navigate('/')}
+            className="cursor-pointer text-primary-500 hover:text-primary-600 dark:text-primary-400 dark:hover:text-primary-300 text-base font-sans flex items-center"
+          >
+            <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
+            Back to Homepage
+          </button>
+          <ThemeToggle />
+        </div>
+
         <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
             Create Account
           </h2>
-          <p className="text-gray-600">
+          <p className="text-gray-600 dark:text-gray-400">
             Join the hackathon community
           </p>
         </div>
 
         {error && (
-          <div className="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg">
-            <p className="text-red-600 text-sm">{error}</p>
+          <div className="mb-6 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+            <p className="text-red-600 dark:text-red-400 text-sm">{error}</p>
           </div>
         )}
 
-        <form onSubmit={handleEmailSignup} className="space-y-4">
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
           <div>
-            <label htmlFor="fullname" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="fullname"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
               Full Name
             </label>
             <input
               id="fullname"
               type="text"
-              value={fullname}
-              onChange={(e) => setFullname(e.target.value)}
+              {...register('fullname')}
               placeholder="John Doe"
-              disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-              required
+              disabled={signupMutation.isPending}
+              className={`${inputBaseClass} ${
+                errors.fullname ? inputErrorClass : inputNormalClass
+              }`}
             />
+            {errors.fullname && (
+              <p className="mt-1 text-sm text-red-500 dark:text-red-400">
+                {errors.fullname.message}
+              </p>
+            )}
           </div>
 
           <div>
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
               Email
             </label>
             <input
               id="email"
               type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
+              {...register('email')}
               placeholder="your@email.com"
-              disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-              required
+              disabled={signupMutation.isPending}
+              className={`${inputBaseClass} ${
+                errors.email ? inputErrorClass : inputNormalClass
+              }`}
             />
+            {errors.email && (
+              <p className="mt-1 text-sm text-red-500 dark:text-red-400">
+                {errors.email.message}
+              </p>
+            )}
           </div>
 
           <div>
-            <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="password"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
               Password
             </label>
+            <div className="relative">
               <input
                 id="password"
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
+                type={showPassword ? 'text' : 'password'}
+                {...register('password')}
                 placeholder="••••••••"
-              disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-              required
+                disabled={signupMutation.isPending}
+                className={`${inputBaseClass} pr-12 ${
+                  errors.password ? inputErrorClass : inputNormalClass
+                }`}
               />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+              >
+                <Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
+              </button>
+            </div>
+            {errors.password && (
+              <p className="mt-1 text-sm text-red-500 dark:text-red-400">
+                {errors.password.message}
+              </p>
+            )}
           </div>
 
           <div>
-            <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="confirmPassword"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
               Confirm Password
             </label>
+            <div className="relative">
               <input
                 id="confirmPassword"
-              type="password"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
+                type={showConfirmPassword ? 'text' : 'password'}
+                {...register('confirmPassword')}
                 placeholder="••••••••"
-              disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-              required
+                disabled={signupMutation.isPending}
+                className={`${inputBaseClass} pr-12 ${
+                  errors.confirmPassword ? inputErrorClass : inputNormalClass
+                }`}
               />
+              <button
+                type="button"
+                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+              >
+                <Icon icon={showConfirmPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
+              </button>
+            </div>
+            {errors.confirmPassword && (
+              <p className="mt-1 text-sm text-red-500 dark:text-red-400">
+                {errors.confirmPassword.message}
+              </p>
+            )}
           </div>
 
           <button
             type="submit"
-            disabled={isEmailLoading}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
+            disabled={!isValid || signupMutation.isPending}
+            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors cursor-pointer"
           >
-            {isEmailLoading ? 'Creating account...' : 'Create Account'}
+            {signupMutation.isPending
+              ? 'Creating account...'
+              : 'Create Account'}
           </button>
         </form>
 
         <div className="my-6 flex items-center">
-          <div className="flex-1 border-t border-gray-300"></div>
-          <span className="px-4 text-sm text-gray-500">OR</span>
-          <div className="flex-1 border-t border-gray-300"></div>
+          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
+          <span className="px-4 text-sm text-gray-500 dark:text-gray-400">
+            OR
+          </span>
+          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
         </div>
 
         <button
           onClick={handleGithubLogin}
           disabled={isGithubLoading}
           type="button"
-          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 border border-gray-300 rounded-lg font-semibold hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors"
+          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg font-semibold text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:cursor-not-allowed transition-colors cursor-pointer"
         >
           <GithubOutlined className="text-xl" />
           <span>
@@ -237,17 +370,33 @@ export default function SignupPage() {
           </span>
         </button>
 
+        <p className="mt-3 text-xs text-center text-gray-500 dark:text-gray-500 font-sans">
+          Make sure your GitHub email is{' '}
+          <a
+            href="https://github.com/settings/emails"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary-600 dark:text-primary-400 hover:underline"
+          >
+            set to public
+          </a>{' '}
+          for GitHub sign up to work.
+        </p>
+
         <div className="mt-6 text-center">
-          <p className="text-gray-600 text-sm">
+          <p className="text-gray-600 dark:text-gray-400 text-sm">
             Already have an account?{' '}
-            <a href="/auth/login" className="text-primary-600 hover:text-primary-700 font-semibold">
+            <Link
+              to="/auth/login"
+              className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-semibold"
+            >
               Sign in
-            </a>
+            </Link>
           </p>
         </div>
 
         <div className="mt-6 text-center">
-          <p className="text-gray-500 text-xs">
+          <p className="text-gray-500 dark:text-gray-500 text-xs">
             By signing up, you agree to our Terms of Service and Privacy Policy
           </p>
         </div>

apps/hackathon/src/app/certificate/[certId]/page.tsx

@@ -0,0 +1,517 @@
+import { FC, ReactElement, useState, useEffect, useRef } from 'react';
+import { useParams, useNavigate } from 'react-router';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { decodeCertificateId } from '../../../utils/certificate';
+import {
+  useTeamById,
+  useTeamSubmission,
+  useAuthStore,
+} from '@imphnen-frontend-service/service';
+import QRCode from 'qrcode';
+import html2canvas from 'html2canvas';
+
+interface DecodedCert {
+  teamId: string;
+  submissionId: string;
+}
+
+const CertificatePage: FC = (): ReactElement => {
+  const { certId } = useParams<{ certId: string }>();
+  const navigate = useNavigate();
+  const { session } = useAuthStore();
+  const [decodedInfo, setDecodedInfo] = useState<DecodedCert | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const teamNameRef = useRef<HTMLHeadingElement>(null);
+  const userNameRef = useRef<HTMLHeadingElement>(null);
+  const [teamNameFontSize, setTeamNameFontSize] = useState('2.25rem');
+  const [userNameFontSize, setUserNameFontSize] = useState('2.25rem');
+  const [qrCodeUrl, setQrCodeUrl] = useState<string>('');
+  const certificateRef = useRef<HTMLDivElement>(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [certificateImage, setCertificateImage] = useState<string>('');
+  const [showTemplate, setShowTemplate] = useState(true);
+
+  useEffect(() => {
+    if (certId) {
+      decodeCertificateId(certId)
+        .then(setDecodedInfo)
+        .catch(() => {
+          setError('Invalid certificate ID');
+        });
+    }
+  }, [certId]);
+
+  // Generate QR Code
+  useEffect(() => {
+    if (certId) {
+      const certificateUrl = `${window.location.origin}/certificate/${certId}`;
+      QRCode.toDataURL(certificateUrl, {
+        width: 200,
+        margin: 1,
+        color: {
+          dark: '#000000',
+          light: '#ffffff',
+        },
+      })
+        .then(setQrCodeUrl)
+        .catch((err) => console.error('QR Code generation failed:', err));
+    }
+  }, [certId]);
+
+  const { data: teamData, isLoading: isLoadingTeam } = useTeamById(
+    decodedInfo?.teamId || '',
+    !!decodedInfo?.teamId
+  );
+  const { data: submissionData, isLoading: isLoadingSubmission } =
+    useTeamSubmission(decodedInfo?.teamId || '', !!decodedInfo?.teamId);
+
+  const team = teamData?.data;
+  const submission = submissionData?.data;
+
+  const isLoading =
+    (!decodedInfo && !error) || isLoadingTeam || isLoadingSubmission;
+
+  // Dynamic font sizing: shrink by 2px if height exceeds 80px
+  useEffect(() => {
+    const adjustFontSize = (
+      element: HTMLElement | null,
+      maxHeight: number,
+      startSize: number,
+      setter: (size: string) => void
+    ) => {
+      if (!element) return;
+
+      let currentSize = startSize;
+      element.style.fontSize = `${currentSize}px`;
+
+      while (element.offsetHeight > maxHeight && currentSize > 1) {
+        currentSize -= 2;
+        element.style.fontSize = `${currentSize}px`;
+      }
+
+      setter(`${currentSize}px`);
+    };
+
+    const timer = setTimeout(() => {
+      adjustFontSize(teamNameRef.current, 80, 20, setTeamNameFontSize);
+      adjustFontSize(userNameRef.current, 80, 36, setUserNameFontSize);
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, [team?.name, session?.user?.fullname]);
+
+  // Generate certificate canvas screenshot
+  useEffect(() => {
+    const generateCertificate = async () => {
+      if (!certificateRef.current || !team || !submission || !qrCodeUrl) return;
+
+      setIsGenerating(true);
+      try {
+        // Wait a bit for fonts and images to load
+        await new Promise((resolve) => setTimeout(resolve, 500));
+
+        const canvas = await html2canvas(certificateRef.current, {
+          scale: 2,
+          useCORS: true,
+          backgroundColor: '#ffffff',
+          logging: false,
+          width: 1000,
+          height: (1000 * 2480) / 3508,
+        });
+
+        const imageUrl = canvas.toDataURL('image/png');
+        setCertificateImage(imageUrl);
+        setShowTemplate(false);
+      } catch (error) {
+        console.error('Failed to generate certificate:', error);
+      } finally {
+        setIsGenerating(false);
+      }
+    };
+
+    generateCertificate();
+  }, [team, submission, qrCodeUrl, session?.user?.fullname]);
+
+  // Download certificate
+  const handleDownloadCertificate = () => {
+    if (!certificateImage) return;
+
+    const link = document.createElement('a');
+    link.href = certificateImage;
+    link.download = `certificate-${team?.name || 'hackathon'}.png`;
+    link.click();
+  };
+
+  // Print certificate
+  const handlePrintCertificate = () => {
+    if (!certificateImage) return;
+
+    const printWindow = window.open('', '_blank');
+    if (printWindow) {
+      printWindow.document.write(`
+        <html>
+          <head>
+            <title>Certificate - ${team?.name}</title>
+            <style>
+              body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
+              img { max-width: 100%; height: auto; }
+              @media print {
+                @page { size: A4 landscape; margin: 0; }
+                body { margin: 0; }
+                img { width: 100%; height: auto; }
+              }
+            </style>
+          </head>
+          <body>
+            <img src="${certificateImage}" />
+          </body>
+        </html>
+      `);
+      printWindow.document.close();
+      printWindow.onload = () => {
+        printWindow.print();
+      };
+    }
+  };
+
+  if (error || !certId) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-6xl mb-4">❌</div>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          Invalid Certificate
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">
+          {error || 'The certificate ID is invalid or malformed.'}
+        </p>
+        <Button onClick={() => navigate('/')}>Back to Home</Button>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <div className="text-gray-600 dark:text-gray-400">
+            Loading certificate...
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!submission || submission.id !== decodedInfo?.submissionId) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-6xl mb-4">📄</div>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          Certificate Not Found
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">
+          The submission associated with this certificate could not be found.
+        </p>
+        <Button onClick={() => navigate('/')}>Back to Home</Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      {/* Print Styles */}
+      <style>{`
+        @media print {
+          @page {
+            size: A4 landscape;
+            margin: 0;
+          }
+          body {
+            margin: 0;
+            padding: 0;
+          }
+          body * {
+            visibility: hidden;
+          }
+          #certificate-wrapper {
+            visibility: visible;
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: white;
+          }
+          #certificate, #certificate * {
+            visibility: visible;
+          }
+          #certificate {
+            position: relative;
+            max-width: 100%;
+            page-break-after: avoid;
+          }
+          .no-print {
+            display: none !important;
+          }
+        }
+
+        /* Mobile responsive - zoom out to fit */
+        @media (max-width: 768px) {
+          #certificate-container {
+            transform-origin: top center;
+          }
+        }
+      `}</style>
+
+      {/* Header */}
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700 no-print">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+                Certificate
+              </h1>
+              <p className="text-gray-600 dark:text-gray-400 mt-1">
+                {team?.name}
+              </p>
+            </div>
+            <Button
+              variant="secondary"
+              onClick={() =>
+                navigate(`/teams/${decodedInfo?.teamId}/submission`)
+              }
+            >
+              Back to Submission
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Certificate Content */}
+      <div
+        className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12"
+        id="certificate-wrapper"
+      >
+        {/* Hidden Template for Canvas Generation */}
+        <div
+          className={showTemplate ? 'block' : 'hidden'}
+          style={{ position: 'absolute', left: '-9999px' }}
+        >
+          <div
+            ref={certificateRef}
+            id="certificate-template"
+            style={{
+              position: 'relative',
+              backgroundImage: 'url(/images/blank_cert.png)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              width: '1000px',
+              height: `${(1000 * 2480) / 3508}px`,
+            }}
+          >
+            {/* User Name (from session) */}
+            <div
+              style={{
+                position: 'absolute',
+                top: '40%',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                width: '80%',
+              }}
+            >
+              <h3
+                ref={userNameRef}
+                style={{
+                  fontWeight: 'bold',
+                  color: '#111827',
+                  textAlign: 'center',
+                  fontSize: userNameFontSize,
+                  lineHeight: '1.2',
+                  wordBreak: 'break-word',
+                  textShadow: '0 1px 2px rgba(0,0,0,0.1)',
+                  margin: 0,
+                }}
+              >
+                {session?.user?.fullname || 'N/A'}
+              </h3>
+            </div>
+
+            {/* Team Name */}
+            <div
+              style={{
+                position: 'absolute',
+                top: '46%',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                width: '70%',
+              }}
+            >
+              <h3
+                ref={teamNameRef}
+                style={{
+                  fontWeight: '600',
+                  color: '#1f2937',
+                  textAlign: 'center',
+                  fontSize: teamNameFontSize,
+                  lineHeight: '1.2',
+                  wordBreak: 'break-word',
+                  margin: 0,
+                }}
+              >
+                {team?.name}
+              </h3>
+            </div>
+
+            {/* Participation Text */}
+            <div
+              style={{
+                position: 'absolute',
+                top: '60%',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                width: '70%',
+              }}
+            >
+              <p
+                style={{
+                  textAlign: 'center',
+                  color: '#374151',
+                  fontSize: '18px',
+                  fontWeight: '500',
+                  margin: 0,
+                }}
+              >
+                <span style={{ fontWeight: 'bold' }}>
+                  Peserta Hackathon IMPHNEN x KOLOSAL AI
+                </span>
+              </p>
+            </div>
+
+            {/* QR Code */}
+            <div
+              style={{
+                position: 'absolute',
+                bottom: '8%',
+                left: '8%',
+              }}
+            >
+              {qrCodeUrl && (
+                <div
+                  style={{
+                    backgroundColor: '#ffffff',
+                    padding: '8px',
+                    borderRadius: '4px',
+                    boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+                  }}
+                >
+                  <img
+                    src={qrCodeUrl}
+                    alt="Certificate QR Code"
+                    style={{ width: '96px', height: '96px' }}
+                  />
+                </div>
+              )}
+            </div>
+
+            {/* Date */}
+            <div
+              style={{
+                position: 'absolute',
+                bottom: '8%',
+                right: '8%',
+              }}
+            >
+              <p
+                style={{
+                  fontSize: '14px',
+                  color: '#374151',
+                  margin: 0,
+                }}
+              >
+                {submission.submitted_at
+                  ? new Date(submission.submitted_at).toLocaleDateString(
+                      'id-ID',
+                      {
+                        day: 'numeric',
+                        month: 'long',
+                        year: 'numeric',
+                      }
+                    )
+                  : 'N/A'}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Display Certificate Image */}
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl dark:shadow-gray-950/50 overflow-hidden p-2">
+          {isGenerating && (
+            <div className="flex items-center justify-center p-12">
+              <div className="text-center">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+                <div className="text-gray-600 dark:text-gray-400">
+                  Generating certificate...
+                </div>
+              </div>
+            </div>
+          )}
+
+          {certificateImage && !isGenerating && (
+            <img
+              src={certificateImage}
+              alt="Certificate"
+              className="w-full h-auto"
+              style={{ maxWidth: '100%', height: 'auto' }}
+            />
+          )}
+
+          {/* Actions */}
+          <div className="bg-gray-50 dark:bg-gray-800 p-6 grid grid-cols-2 xl:grid-cols-3 gap-3 justify-center no-print">
+            <Button
+              variant="secondary"
+              onClick={handleDownloadCertificate}
+              className="flex items-center gap-2"
+              disabled={isGenerating}
+            >
+              {isGenerating ? '⏳ Generating...' : '📥 Download'}
+            </Button>
+            <Button
+              variant="secondary"
+              onClick={handlePrintCertificate}
+              className="flex items-center gap-2"
+              disabled={isGenerating}
+            >
+              {isGenerating ? '⏳ Generating...' : '🖨️ Print'}
+            </Button>
+            <Button
+              onClick={() =>
+                navigate(`/teams/${decodedInfo?.teamId}/submission`)
+              }
+              variant="secondary"
+              className="col-span-2 flex items-center gap-2 xl:col-span-1"
+            >
+              View Submission
+            </Button>
+          </div>
+        </div>
+
+        {/* Info Box */}
+        <div className="mt-8 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6 no-print">
+          <h3 className="font-bold text-blue-900 dark:text-blue-100 mb-2">
+            Certificate Information
+          </h3>
+          <p className="text-sm text-blue-800 dark:text-blue-200">
+            This certificate is a digital record of your hackathon participation
+            and project submission. You can print or save this page as a PDF for
+            your records.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CertificatePage;

apps/hackathon/src/app/dashboard/layout.tsx

@@ -0,0 +1,46 @@
+import { FC, ReactElement, useState } from 'react';
+import { Outlet } from 'react-router';
+import { Sidebar } from '../../components/sidebar';
+
+const DashboardLayout: FC = (): ReactElement => {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  return (
+    <div className="flex min-h-screen bg-gray-50 dark:bg-gray-950">
+      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+
+      <div className="flex-1 flex flex-col">
+        {/* Mobile Header with Hamburger */}
+        <div className="lg:hidden sticky top-0 bg-white dark:bg-gray-900 border-b dark:border-gray-700 px-4 py-3 flex items-center">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+          >
+            <svg
+              className="w-6 h-6 text-gray-600 dark:text-gray-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            </svg>
+          </button>
+          <h1 className="ml-3 text-lg font-bold text-gray-900 dark:text-white">
+            Hackathon
+          </h1>
+        </div>
+
+        <main className="flex-1 overflow-auto">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardLayout;

apps/hackathon/src/app/dashboard/page.tsx

@@ -1,19 +1,103 @@
-import { FC, ReactElement } from 'react';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { Link, useNavigate } from 'react-router';
-import { useMyTeams, useMyInvitations, useRespondToInvitation, supabase, useAuthStore } from '@imphnen-frontend-service/service';
+import { FC, ReactElement, useEffect, useState } from 'react';
+import { Link } from 'react-router';
+import {
+  useMyTeams,
+  useMyInvitations,
+  useRespondToInvitation,
+  useAuthStore,
+} from '@imphnen-frontend-service/service';
 import { toast } from 'sonner';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Icon } from '@iconify/react';
+import ProfilePage from '../profile/page';
+
+// Team features deadline: 2025-11-30 23:59:00 WIB (UTC+7)
+const TEAM_FEATURES_DEADLINE = new Date('2025-11-30T16:59:00Z');
+
+// Submission deadline: 2025-12-07 23:59:00 WIB (UTC+7)
+const SUBMISSION_DEADLINE = new Date('2025-12-07T16:59:00Z');
+
+type Invitation = {
+  id: string;
+  team: {
+    id?: string;
+    name?: string;
+    logo?: string;
+    banner?: string;
+    description?: string;
+    city?: string;
+    visibility?: string;
+    leader_id?: string;
+  };
+  inviter: {
+    id?: string;
+    fullname?: string;
+    email?: string;
+    avatar?: string;
+  };
+};
 
 const DashboardPage: FC = (): ReactElement => {
-  const navigate = useNavigate();
-  const { session, clearSession } = useAuthStore();
+  const { session } = useAuthStore();
+  const [showProfileModal, setShowProfileModal] = useState(false);
+  const [timeLeft, setTimeLeft] = useState<{
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+  } | null>(null);
+
+  // Check if team features are closed
+  const isTeamFeaturesClosed = new Date() >= TEAM_FEATURES_DEADLINE;
+
+  // Check if submission deadline passed
+  const isSubmissionDeadlinePassed = new Date() >= SUBMISSION_DEADLINE;
+
+  // Countdown timer
+  useEffect(() => {
+    if (isSubmissionDeadlinePassed) return;
+
+    const calculateTimeLeft = () => {
+      const now = new Date();
+      const difference = SUBMISSION_DEADLINE.getTime() - now.getTime();
+
+      if (difference <= 0) {
+        setTimeLeft(null);
+        return;
+      }
+
+      const days = Math.floor(difference / (1000 * 60 * 60 * 24));
+      const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
+      const minutes = Math.floor((difference / 1000 / 60) % 60);
+      const seconds = Math.floor((difference / 1000) % 60);
+
+      setTimeLeft({ days, hours, minutes, seconds });
+    };
+
+    calculateTimeLeft();
+    const timer = setInterval(calculateTimeLeft, 1000);
+
+    return () => clearInterval(timer);
+  }, [isSubmissionDeadlinePassed]);
+
+  // Lock background scroll when profile modal is open
+  useEffect(() => {
+    if (showProfileModal) {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.body.style.overflow = originalOverflow || '';
+      };
+    }
+  }, [showProfileModal]);
   const { data: teamsData } = useMyTeams();
   const { data: invitationsData } = useMyInvitations();
   const { mutateAsync: respondToInvitation } = useRespondToInvitation();
 
   const user = session?.user;
   const myTeams = teamsData?.data || [];
-  const invitations = invitationsData?.data || [];
+  const invitations: Invitation[] = (invitationsData?.data ||
+    []) as Invitation[];
 
   const handleAcceptInvitation = async (invitationId: string) => {
     try {
@@ -35,80 +119,101 @@ const DashboardPage: FC = (): ReactElement => {
     }
   };
 
-  const handleLogout = async () => {
-    try {
-      // Clear Supabase session
-      await supabase.auth.signOut();
-
-      // Clear Zustand store
-      clearSession();
-
-      // Clear localStorage
-      localStorage.clear();
-
-      toast.success('Logged out successfully');
-
-      // Redirect to login
-      navigate('/auth/login');
-    } catch (error) {
-      console.error('Logout error:', error);
-      // Even if there's an error, clear everything and redirect
-      clearSession();
-      localStorage.clear();
-      navigate('/auth/login');
-    }
-  };
-
   return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Header */}
-      <div className="bg-white border-b">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <h1 className="text-3xl font-bold text-gray-900">
-                Welcome, {user?.fullname || 'User'}!
+    <>
+      <div className="p-6 md:p-8 md:max-w-7xl w-full mx-auto">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+            Welcome, {user?.fullname || user?.email?.split('@')[0] || 'User'}!
           </h1>
-              <p className="text-gray-600 mt-1">
-                {user?.location && `📍 ${user.location}`}
+          {user?.location && (
+            <p className="text-gray-600 dark:text-gray-400 mt-1 font-sans flex items-center space-x-1">
+              <Icon icon="heroicons:map-pin-16-solid" width="24" height="24" />
+              <span>{user.location}</span>
             </p>
-            </div>
-            <div className="flex items-center space-x-3">
-              {user?.avatar && (
-                <img
-                  src={user.avatar}
-                  alt="Profile"
-                  className="w-16 h-16 rounded-full object-cover border-2 border-gray-200"
-                />
           )}
-              <Button
-                onClick={handleLogout}
-                variant="secondary"
-                className="bg-red-500 hover:bg-red-600 text-white"
-              >
-                Logout
-              </Button>
-            </div>
-          </div>
-        </div>
         </div>
 
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* Team Invitations */}
+        {/* Countdown Timer */}
+        {timeLeft && !isSubmissionDeadlinePassed && (
+          <div className="mb-8 bg-blue-50 dark:bg-blue-900/20 border-2 border-blue-500 rounded-lg p-6">
+            <div className="flex items-start space-x-3">
+              <span className="text-3xl">⏰</span>
+              <div className="flex-1">
+                <h3 className="font-bold text-blue-900 dark:text-blue-100 text-lg">
+                  Submission Deadline
+                </h3>
+                <p className="text-blue-800 dark:text-blue-200 mt-2 text-sm font-sans">
+                  Project submissions close on December 7, 2025 at 23:59 WIB
+                </p>
+                <div className="mt-4 grid grid-cols-4 gap-4">
+                  <div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
+                    <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
+                      {timeLeft.days}
+                    </div>
+                    <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                      Days
+                    </div>
+                  </div>
+                  <div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
+                    <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
+                      {timeLeft.hours.toString().padStart(2, '0')}
+                    </div>
+                    <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                      Hours
+                    </div>
+                  </div>
+                  <div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
+                    <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
+                      {timeLeft.minutes.toString().padStart(2, '0')}
+                    </div>
+                    <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                      Minutes
+                    </div>
+                  </div>
+                  <div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
+                    <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
+                      {timeLeft.seconds.toString().padStart(2, '0')}
+                    </div>
+                    <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                      Seconds
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
         {invitations.length > 0 && (
-          <div className="mb-8 bg-blue-50 border border-blue-200 rounded-lg p-6">
-            <h2 className="text-xl font-bold text-gray-900 mb-4">
+          <div className="mb-8 bg-primary-50 dark:bg-blue-900/20 border border-primary-200 dark:border-blue-800 rounded-lg p-6">
+            <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
               Team Invitations ({invitations.length})
             </h2>
-            <div className="space-y-3">
-              {invitations.map((invitation) => (
-                <div key={invitation.id} className="bg-white p-4 rounded-lg shadow-sm flex items-center justify-between">
-                  <div>
-                    <p className="font-medium text-gray-900">{invitation.team.name}</p>
-                    <p className="text-sm text-gray-600">
-                      Invited by {invitation.inviter.fullname}
+            {isTeamFeaturesClosed && (
+              <div className="mb-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3">
+                <p className="text-sm text-amber-700 dark:text-amber-300 flex items-center gap-2">
+                  <Icon icon="mdi:clock-alert" className="text-lg shrink-0" />
+                  Team features are closed. You can no longer accept invitations.
                 </p>
               </div>
+            )}
+            <div className="space-y-3 font-sans">
+              {invitations.map((invitation) => (
+                <div
+                  key={invitation.id}
+                  className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-sm flex items-center justify-between"
+                >
+                  <div>
+                    <p className="font-medium text-gray-900 dark:text-white">
+                      {invitation.team?.name ?? 'Unnamed Team'}
+                    </p>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Invited by{' '}
+                      {invitation.inviter?.fullname ?? 'Unknown User'}
+                    </p>
+                  </div>
+                  {!isTeamFeaturesClosed && (
                     <div className="flex space-x-2">
                       <Button
                         size="sm"
@@ -124,146 +229,181 @@ const DashboardPage: FC = (): ReactElement => {
                         Decline
                       </Button>
                     </div>
+                  )}
                 </div>
               ))}
             </div>
           </div>
         )}
 
-        {/* My Teams */}
         {myTeams.length > 0 ? (
-          <div className="mb-8">
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">My Team</h2>
-            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-              {myTeams.map((team) => (
+          (() => {
+            const team = myTeams[0] as any;
+            return (
+              <div className="mb-6 md:mb-8">
+                <h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
+                  My Team
+                </h2>
                 <Link
-                  key={team.id}
-                  to={`/teams/${team.id}`}
-                  className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
+                  to={'/teams/' + team.id}
+                  className="block bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow border dark:border-gray-700"
                 >
-                  {team.banner && (
                   <img
-                      src={team.banner}
+                    src={team.banner || '/images/banner-imphnen.webp'}
                     alt={team.name}
-                      className="w-full h-32 object-cover"
+                    className="w-full aspect-3/1 object-cover"
                   />
-                  )}
-                  <div className="p-6">
-                    <div className="flex items-center space-x-3 mb-3">
-                      {team.logo && (
+                  <div className="p-4 md:p-6">
+                    <div className="flex items-center space-x-4 mb-4">
+                      {team.logo ? (
                         <img
                           src={team.logo}
                           alt={team.name}
-                          className="w-12 h-12 rounded-full object-cover"
+                          className="w-16 h-16 rounded-full object-cover shrink-0"
                         />
+                      ) : (
+                        <div className="w-16 h-16 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shrink-0">
+                          <Icon icon="mdi:account-group" className="text-gray-500 dark:text-gray-400 text-2xl" />
+                        </div>
                       )}
-                      <div>
-                        <h3 className="text-lg font-bold text-gray-900">{team.name}</h3>
-                        <p className="text-sm text-gray-600">📍 {team.city}</p>
+                      <div className="flex-1 min-w-0">
+                        <h3 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white leading-tight line-clamp-1">
+                          {team.name}
+                        </h3>
+                        <div className="text-sm text-gray-600 dark:text-gray-400 flex items-center gap-3 font-sans mt-2">
+                          {team.has_submission && (
+                            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 shrink-0">
+                              <Icon icon="mdi:check-circle" className="text-sm" />
+                              Submitted
+                            </span>
+                          )}
+                          {team.city && (
+                            <span className="flex items-center gap-1 truncate">
+                              <Icon icon="mdi:map-marker" className="shrink-0" />
+                              <span className="truncate">{team.city}</span>
+                            </span>
+                          )}
+                          <span className="flex items-center gap-1 shrink-0">
+                            <Icon icon="mdi:account-group" />
+                            {team.member_count || team.members?.length || 0} member{(team.member_count || team.members?.length || 0) !== 1 ? 's' : ''}
+                          </span>
                         </div>
                       </div>
-                    <p className="text-gray-600 text-sm line-clamp-2">
+                    </div>
+                    {team.description && (
+                      <p className="text-gray-600 dark:text-gray-400 line-clamp-3 font-sans">
                         {team.description}
                       </p>
+                    )}
                   </div>
                 </Link>
-              ))}
-            </div>
               </div>
+            );
+          })()
         ) : (
-          /* No Team - Show CTAs */
-          <div className="bg-white rounded-lg shadow-md p-8">
-            <div className="text-center mb-8">
-              <h2 className="text-2xl font-bold text-gray-900 mb-2">
-                You're not in a team yet
+          <div className="mb-6 md:mb-8 bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 md:p-8">
+            <div className="text-center">
+              <div className="text-3xl md:text-4xl mb-2 md:mb-3">👋</div>
+              <h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-1 md:mb-2">
+                You are not in a team yet
               </h2>
-              <p className="text-gray-600">
-                Join an existing team or create your own to get started
+              <p className="text-sm md:text-base text-gray-600 dark:text-gray-400 font-sans">
+                Use the sidebar to browse teams or create your own
               </p>
             </div>
-
-            <div className="grid gap-6 md:grid-cols-2 max-w-2xl mx-auto">
-              <Link
-                to="/teams/browse"
-                className="bg-blue-600 text-white rounded-lg p-6 hover:bg-blue-700 transition-colors text-center"
-              >
-                <div className="text-4xl mb-3">🔍</div>
-                <h3 className="text-xl font-bold mb-2">Browse Teams</h3>
-                <p className="text-blue-100">
-                  Find and join existing teams looking for members
-                </p>
-              </Link>
-
-              <Link
-                to="/teams/create"
-                className="bg-green-600 text-white rounded-lg p-6 hover:bg-green-700 transition-colors text-center"
-              >
-                <div className="text-4xl mb-3">➕</div>
-                <h3 className="text-xl font-bold mb-2">Create Team</h3>
-                <p className="text-green-100">
-                  Start your own team and invite members
-                </p>
-              </Link>
-            </div>
           </div>
         )}
 
-        {/* User Profile Card */}
-        <div className="mt-8 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl shadow-lg overflow-hidden">
-          <div className="bg-gradient-to-r from-blue-600 to-indigo-600 h-24"></div>
-          <div className="px-8 pb-8">
-            <div className="flex items-start -mt-12 mb-6">
-              {user?.avatar && (
+        <div className="mt-8 bg-white dark:bg-gray-900 rounded-xl shadow-lg">
+          <div className="bg-linear-to-r from-primary-600 to-primary-500 h-24 rounded-t-xl"></div>
+          <div className="px-4 md:px-8 pb-4 md:pb-8 max-w-7xl">
+            <div className="flex flex-col md:flex-row md:items-start -mt-12 mb-4 md:mb-6">
+              <div className="flex flex-col md:flex-row items-start">
+                {user?.avatar ? (
                   <img
                     src={user.avatar}
-                  alt={user.fullname}
-                  className="w-24 h-24 rounded-full border-4 border-white shadow-lg object-cover"
+                    alt={user.fullname || 'User'}
+                    className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg object-cover"
                   />
+                ) : (
+                  <div className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                    <span className="text-gray-400 dark:text-gray-500 text-3xl md:text-4xl font-sans">
+                      U
+                    </span>
+                  </div>
                 )}
-              <div className="ml-6 mt-14">
-                <h2 className="text-2xl font-bold text-gray-900">{user?.fullname}</h2>
+                <div className="md:ml-6 mt-4 md:mt-14">
+                  <h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white">
+                    {user?.fullname ||
+                      user?.email?.split('@')[0] ||
+                      'Unnamed User'}
+                  </h2>
+
                   {user?.location ? (
-                  <p className="text-gray-600 flex items-center mt-1">
-                    <svg className="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
-                      <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
-                    </svg>
-                    {user.location}
+                    <p className="text-gray-600 dark:text-gray-400 flex items-center mt-1 text-sm md:text-base font-sans">
+                      <Icon
+                        icon="heroicons:map-pin-16-solid"
+                        width="16"
+                        height="16"
+                      />
+                      <span className="ml-1">{user.location}</span>
                     </p>
                   ) : (
-                  <Link to="/onboarding/user" className="text-blue-600 hover:text-blue-700 text-sm mt-1 inline-block">
-                    Complete your profile →
+                    <Link
+                      to="/onboarding/user"
+                      className="text-primary-500 dark:text-blue-400 hover:text-primary-600 dark:hover:text-blue-300 text-sm md:text-sm mt-1 flex items-center"
+                    >
+                      <span className="font-sans">Complete your profile</span>
+                      <Icon
+                        icon="ic:baseline-chevron-right"
+                        width="24"
+                        height="24"
+                      />
                     </Link>
                   )}
                 </div>
               </div>
-
-            <div className="space-y-6">
+              {user?.location && (
+                <button
+                  type="button"
+                  onClick={() => setShowProfileModal(true)}
+                  className="mt-3 md:mt-14 md:ml-auto inline-flex items-center justify-center px-3 py-1.5 md:px-4 md:py-2 bg-primary-500 text-white rounded-lg text md:text-sm font-medium shadow-sm hover:bg-primary-600 transition-colors w-full md:w-auto cursor-pointer"
+                >
+                  Edit Profile
+                </button>
+              )}
+            </div>
+            <div className="space-y-4 md:space-y-6 w-full max-w-full">
               {user?.bio && (
-                <div className="bg-white rounded-lg p-4 shadow-sm">
-                  <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-2">About</h3>
-                  <p className="text-gray-800 leading-relaxed">{user.bio}</p>
+                <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm w-full max-w-full overflow-x-hidden">
+                  <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-2">
+                    About
+                  </h3>
+                  <p className="text-gray-800 dark:text-gray-200 leading-relaxed line-clamp-3 wrap-break-word break-all overflow-hidden w-full max-w-full">
+                    {user.bio}
+                  </p>
                 </div>
               )}
-
-              <div className="bg-white rounded-lg p-4 shadow-sm">
-                <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-3">Contact</h3>
-                <div className="flex items-center text-gray-700">
-                  <svg className="w-5 h-5 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
-                    <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
-                  </svg>
-                  <span className="text-gray-900">{user?.email}</span>
+              <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
+                <h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
+                  Contact
+                </h3>
+                <div className="flex items-center text-gray-700 dark:text-gray-300">
+                  <span className="text-gray-900 dark:text-white">
+                    {user?.email}
+                  </span>
                 </div>
               </div>
-
               {user?.skills && user.skills.length > 0 && (
-                <div className="bg-white rounded-lg p-4 shadow-sm">
-                  <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-3">Skills</h3>
-                  <div className="flex flex-wrap gap-3">
+                <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
+                  <h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
+                    Skills
+                  </h3>
+                  <div className="flex flex-wrap gap-2">
                     {user.skills.map((skill: string) => (
                       <span
                         key={skill}
-                        className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium shadow-sm hover:bg-blue-700 transition-colors"
+                        className="inline-flex items-center px-4 py-2 border border-primary-600 dark:border-gray-500 text-primary-600 dark:text-white rounded-4xl text-xs font-medium dark:bg-gray-600"
                       >
                         {skill}
                       </span>
@@ -275,7 +415,11 @@ const DashboardPage: FC = (): ReactElement => {
           </div>
         </div>
       </div>
-    </div>
+      <ProfilePage
+        open={showProfileModal}
+        onClose={() => setShowProfileModal(false)}
+      />
+    </>
   );
 };
 

apps/hackathon/src/app/layout.tsx

@@ -1,6 +1,11 @@
-import { Outlet, ScrollRestoration, useLocation, useNavigate } from 'react-router-dom';
+import {
+  Outlet,
+  ScrollRestoration,
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
 import { useEffect, useState } from 'react';
-import { supabase } from '@imphnen-frontend-service/service';
+import { useAuthStore, useUserMe } from '@imphnen-frontend-service/service';
 
 // Define onboarding routes
 const ONBOARDING_ROUTES = new Set(['/onboarding/user']);
@@ -8,109 +13,81 @@ const ONBOARDING_ROUTES = new Set(['/onboarding/user']);
 export default function RootLayout() {
   const location = useLocation();
   const navigate = useNavigate();
+  const { session } = useAuthStore();
+  const { data: userData, isLoading: isUserLoading } = useUserMe();
   const [isChecking, setIsChecking] = useState(true);
 
   useEffect(() => {
     const checkAuth = async () => {
       const pathname = location.pathname;
 
-      console.log('[Layout] Checking auth for route:', pathname);
-
       // Allow hackathon pages without checks
       if (pathname.startsWith('/hackathons')) {
-        console.log('[Layout] Public route, allowing access');
         setIsChecking(false);
         return;
       }
 
       // Allow auth callback without checks
       if (pathname === '/auth/callback') {
-        console.log('[Layout] Auth callback, allowing access');
         setIsChecking(false);
         return;
       }
 
-      // Check Supabase session
-      const { data: { session }, error } = await supabase.auth.getSession();
-
-      if (error) {
-        console.error('[Layout] Session error:', error);
-      }
-
-      // Public auth pages (login, signup, forgot-password, reset-password) - allow unauthenticated access
-      const isPublicAuthPage = pathname === '/auth/login' || pathname === '/auth/signup' || pathname === '/auth/forgot-password' || pathname === '/auth/reset-password';
-
-      if (isPublicAuthPage) {
+      // Public auth pages - allow unauthenticated access
+      if (pathname.startsWith('/auth')) {
         // If already authenticated and not on password reset pages, redirect to dashboard
         if (session && pathname !== '/auth/reset-password') {
-          console.log('[Layout] Already authenticated, redirecting to dashboard');
           navigate('/dashboard', { replace: true });
           setIsChecking(false);
           return;
         }
-        // Allow unauthenticated access
-        console.log('[Layout] Public auth page, allowing access');
+        // Allow unauthenticated access to auth pages
         setIsChecking(false);
         return;
       }
 
       // Home page - allow everyone to view the landing page
       if (pathname === '/') {
-        console.log('[Layout] Landing page, allowing access');
         setIsChecking(false);
         return;
       }
 
       // Require authentication for all other routes
       if (!session) {
-        console.log('[Layout] No session, redirecting to login');
         navigate('/auth/login', { replace: true });
         setIsChecking(false);
         return;
       }
 
-      // Check if user has completed onboarding (skip for onboarding routes)
-      if (!ONBOARDING_ROUTES.has(pathname)) {
-        try {
-          const { data: userData, error: userError } = await supabase
-            .from('users')
-            .select('location')
-            .eq('id', session.user.id)
-            .single();
-
-          if (userError) {
-            console.error('[Layout] Failed to fetch user data:', userError);
-            setIsChecking(false);
+      // Wait for user data to load before checking onboarding
+      if (isUserLoading) {
         return;
       }
 
-          const hasLocation = !!userData?.location;
+      // Check if user has completed onboarding (skip for onboarding routes)
+      if (!ONBOARDING_ROUTES.has(pathname)) {
+        const hasLocation = !!userData?.data?.location || !!session?.user?.location;
 
         if (!hasLocation) {
-            console.log('[Layout] User needs onboarding, redirecting');
           navigate('/onboarding/user', { replace: true });
           setIsChecking(false);
           return;
         }
-        } catch (error) {
-          console.error('[Layout] Unexpected error checking onboarding:', error);
-        }
       }
 
-      console.log('[Layout] Auth check passed');
       setIsChecking(false);
     };
 
     checkAuth();
-  }, [location.pathname, navigate]);
+  }, [location.pathname, navigate, session, userData, isUserLoading]);
 
   // Show loading state while checking auth
   if (isChecking) {
     return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50">
+      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-neutral-950">
         <div className="text-center">
           <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
-          <p className="text-gray-600">Loading...</p>
+          <p className="text-gray-600 dark:text-neutral-400">Loading...</p>
         </div>
       </div>
     );

apps/hackathon/src/app/maintenance/page.tsx

@@ -0,0 +1,23 @@
+import { Link } from 'react-router';
+
+export default function MaintenancePage() {
+  return (
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 px-4">
+      <div className="text-center">
+        <h1 className="text-6xl font-bold text-yellow-600 mb-4">🚧</h1>
+        <h2 className="text-3xl font-semibold mb-2">We'll be back soon!</h2>
+        <p className="text-gray-600">
+          Our site is currently undergoing scheduled maintenance.
+          <br />
+          Thank you for your patience.
+        </p>
+        <Link
+          to="/"
+          className="mt-4 inline-block text-primary-600 hover:underline"
+        >
+          Back to Homepage
+        </Link>
+      </div>
+    </div>
+  );
+}

apps/hackathon/src/app/onboarding/user/page.tsx

@@ -3,8 +3,19 @@ import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
 import { useNavigate } from 'react-router';
 import { useForm, Controller } from 'react-hook-form';
-import { userOnboardingSchema, TUserOnboardingForm, useUpdateUserMe, useUploadAvatar, useUserMe, useAuthStore } from '@imphnen-frontend-service/service';
+import {
+  userOnboardingSchema,
+  TUserOnboardingForm,
+  useUpdateUserMe,
+  useUploadAvatar,
+  useUserMe,
+  useAuthStore,
+} from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from 'sonner';
+
+import { CitySelect } from '../../../components/city-select';
+import { Icon } from '@iconify/react';
 
 const ROLE_OPTIONS = [
   'Frontend Developer',
@@ -17,12 +28,6 @@ const ROLE_OPTIONS = [
   'Mobile Developer',
 ];
 
-const INDONESIAN_CITIES = [
-  'Jakarta', 'Surabaya', 'Bandung', 'Medan', 'Semarang',
-  'Makassar', 'Palembang', 'Tangerang', 'Depok', 'Bekasi',
-  'Yogyakarta', 'Malang', 'Bogor', 'Batam', 'Pekanbaru',
-];
-
 const UserOnboardingPage: FC = (): ReactElement => {
   const navigate = useNavigate();
   const [avatarFile, setAvatarFile] = useState<File | null>(null);
@@ -30,7 +35,8 @@ const UserOnboardingPage: FC = (): ReactElement => {
 
   const { data: userData } = useUserMe();
   const { mutateAsync: updateUser, isPending: isUpdating } = useUpdateUserMe();
-  const { mutateAsync: uploadAvatar, isPending: isUploading } = useUploadAvatar();
+  const { mutateAsync: uploadAvatar, isPending: isUploading } =
+    useUploadAvatar();
   const { session } = useAuthStore();
 
   const form = useForm<TUserOnboardingForm>({
@@ -54,6 +60,20 @@ const UserOnboardingPage: FC = (): ReactElement => {
   const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
+      // Validate file size (max 2MB)
+      if (file.size > 2 * 1024 * 1024) {
+        toast.error('The file is too large. Maximum size is 2MB.');
+        e.target.value = '';
+        return;
+      }
+
+      // Validate file type
+      if (!file.type.startsWith('image/')) {
+        toast.error('The file must be an image');
+        e.target.value = '';
+        return;
+      }
+
       setAvatarFile(file);
       const reader = new FileReader();
       reader.onloadend = () => {
@@ -65,49 +85,46 @@ const UserOnboardingPage: FC = (): ReactElement => {
 
   const onSubmit = form.handleSubmit(async (data) => {
     try {
-      console.log('[Onboarding] Starting submission...', data);
       let avatarUrl = session?.user?.avatar || null;
 
       // Upload avatar if a new file was selected
       if (avatarFile) {
-        console.log('[Onboarding] Uploading avatar...');
         const uploadResult = await uploadAvatar(avatarFile);
         avatarUrl = uploadResult.data.url;
-        console.log('[Onboarding] Avatar uploaded:', avatarUrl);
       }
 
       // Update user in Supabase
-      console.log('[Onboarding] Updating user in Supabase...');
-      const result = await updateUser({
+      await updateUser({
         fullname: data.fullname,
         avatar: avatarUrl,
         location: data.location,
         bio: data.bio,
         skills: data.skills,
       });
-      console.log('[Onboarding] User updated successfully:', result);
 
       // Wait a bit for the onSuccess handler to update localStorage
       // The updateUser mutation's onSuccess handler updates the Zustand store and localStorage
-      await new Promise(resolve => setTimeout(resolve, 100));
+      await new Promise((resolve) => setTimeout(resolve, 100));
 
-      console.log('[Onboarding] Navigating to dashboard...');
       // Use window.location for a full page reload to ensure middleware sees updated localStorage
       globalThis.location.href = '/dashboard';
     } catch (error) {
-      console.error('[Onboarding] Onboarding failed:', error);
-      alert(`Onboarding failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : 'Onboarding failed. Please try again.'
+      );
     }
   });
 
   return (
-    <div className="flex flex-col justify-center items-center min-h-screen bg-gray-50 px-4 py-8">
-      <div className="bg-white w-full max-w-2xl p-8 rounded-xl shadow-lg">
+    <div className="flex flex-col justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 px-4 py-8">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-2xl p-8 rounded-xl shadow-lg dark:shadow-gray-950/50">
         <div className="mb-6">
-          <h1 className="text-3xl font-bold text-gray-900 mb-2">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
             Complete Your Profile
           </h1>
-          <p className="text-gray-600">
+          <p className="text-gray-600 font-sans dark:text-gray-400">
             Tell us more about yourself to get started
           </p>
         </div>
@@ -120,17 +137,22 @@ const UserOnboardingPage: FC = (): ReactElement => {
                 <img
                   src={avatarPreview}
                   alt="Avatar preview"
-                  className="w-32 h-32 rounded-full object-cover border-4 border-gray-200"
+                  className="w-32 h-32 rounded-full object-cover border-4 border-gray-200 dark:border-gray-700"
                 />
               ) : (
-                <div className="w-32 h-32 rounded-full bg-gray-200 flex items-center justify-center">
-                  <span className="text-gray-400 text-4xl">👤</span>
+                <div className="w-32 h-32 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                  <Icon
+                    icon="ic:baseline-person"
+                    width="48"
+                    height="48"
+                    className="text-gray-400 dark:text-gray-500"
+                  />
                 </div>
               )}
             </div>
-            <div>
+            <div className="flex flex-col items-center">
               <label htmlFor="avatar" className="cursor-pointer">
-                <span className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 inline-block">
+                <span className="px-4 py-2 bg-primary-500 dark:bg-primary-600 text-white rounded-lg hover:bg-primary-600 dark:hover:bg-primary-700 inline-block">
                   {avatarPreview ? 'Change Photo' : 'Upload Photo'}
                 </span>
                 <input
@@ -141,7 +163,9 @@ const UserOnboardingPage: FC = (): ReactElement => {
                   onChange={handleAvatarChange}
                 />
               </label>
-              <p className="text-xs text-gray-500 mt-2 text-center">Optional, but highly recommended</p>
+              <p className="text-xs text-gray-500 dark:text-gray-500 mt-2 text-center">
+                Optional, but highly recommended. Max 2MB
+              </p>
             </div>
           </div>
 
@@ -151,40 +175,33 @@ const UserOnboardingPage: FC = (): ReactElement => {
             label="Full Name"
             placeholder="Enter your full name"
             name="fullname"
+            className="px-3 py-2 text-label2 rounded-lg max-h-auto text-base"
+            size="md"
+            isRequired={true}
           />
 
           {/* City */}
           <div className="space-y-2">
-            <label className="block text-sm font-medium text-gray-700">
+            <label className="block text-base font-medium text-gray-700 dark:text-gray-300">
               City <span className="text-red-500">*</span>
             </label>
             <Controller
               control={form.control}
               name="location"
               render={({ field, fieldState }) => (
-                <div>
-                  <select
-                    {...field}
-                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                  >
-                    <option value="">Select your city</option>
-                    {INDONESIAN_CITIES.map((city) => (
-                      <option key={city} value={city}>
-                        {city}
-                      </option>
-                    ))}
-                  </select>
-                  {fieldState.error && (
-                    <p className="text-sm text-red-500 mt-1">{fieldState.error.message}</p>
-                  )}
-                </div>
+                <CitySelect
+                  value={field.value}
+                  onChange={field.onChange}
+                  error={fieldState.error?.message}
+                  placeholder="Search your city..."
+                />
               )}
             />
           </div>
 
           {/* Role/Skills */}
           <div className="space-y-2">
-            <label className="block text-sm font-medium text-gray-700">
+            <label className="block text-base font-medium text-gray-700 dark:text-gray-300">
               Role / Skills
             </label>
             <Controller
@@ -194,7 +211,10 @@ const UserOnboardingPage: FC = (): ReactElement => {
                 <div className="space-y-2">
                   <div className="grid grid-cols-2 gap-2">
                     {ROLE_OPTIONS.map((role) => (
-                      <label key={role} className="flex items-center space-x-2 cursor-pointer">
+                      <label
+                        key={role}
+                        className="flex items-center space-x-2 cursor-pointer"
+                      >
                         <input
                           type="checkbox"
                           checked={field.value?.includes(role)}
@@ -204,9 +224,11 @@ const UserOnboardingPage: FC = (): ReactElement => {
                               : (field.value || []).filter((v) => v !== role);
                             field.onChange(newValue);
                           }}
-                          className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                          className="rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-primary-500 focus:ring-blue-500 dark:focus:ring-primary-500 dark:bg-gray-800"
                         />
-                        <span className="text-sm">{role}</span>
+                        <span className="text-sm dark:text-gray-300">
+                          {role}
+                        </span>
                       </label>
                     ))}
                   </div>
@@ -217,22 +239,28 @@ const UserOnboardingPage: FC = (): ReactElement => {
 
           {/* Bio */}
           <div className="space-y-2">
-            <label className="block text-sm font-medium text-gray-700">
-              Bio <span className="text-gray-400">(Optional)</span>
+            <label className="block text-base font-medium text-gray-700 dark:text-gray-300">
+              Bio{' '}
+              <span className="text-gray-400 dark:text-gray-500">
+                (Optional)
+              </span>
             </label>
             <Controller
               control={form.control}
               name="bio"
               render={({ field, fieldState }) => (
-                <div>
+                <div className="flex">
                   <Textarea
                     {...field}
                     placeholder="Tell us about yourself..."
                     rows={4}
-                    className="w-full"
+                    className="w-full rounded-lg text-sm"
+                    style={{ resize: 'vertical' }}
                   />
                   {fieldState.error && (
-                    <p className="text-sm text-red-500 mt-1">{fieldState.error.message}</p>
+                    <p className="text-sm text-red-500 mt-1">
+                      {fieldState.error.message}
+                    </p>
                   )}
                 </div>
               )}

apps/hackathon/src/app/profile/page.tsx

@@ -0,0 +1,391 @@
+import { FC, ReactElement, useState, useEffect } from 'react';
+import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
+import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
+import { useForm, Controller } from 'react-hook-form';
+import {
+  userEditProfileSchema,
+  TUserEditProfileForm,
+  useUpdateUserMe,
+  useUploadAvatar,
+  useAuthStore,
+} from '@imphnen-frontend-service/service';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from 'sonner';
+import { CitySelect } from '../../components/city-select';
+import { Icon } from '@iconify/react';
+
+const ROLE_OPTIONS = [
+  'Frontend Developer',
+  'Backend Developer',
+  'Full Stack Developer',
+  'DevOps Engineer',
+  'UI/UX Designer',
+  'Product Manager',
+  'Data Scientist',
+  'Mobile Developer',
+];
+
+type ProfileModalProps = {
+  open: boolean;
+  onClose: () => void;
+};
+
+const ProfilePage: FC<ProfileModalProps> = ({
+  open,
+  onClose,
+}): ReactElement | null => {
+  const [avatarFile, setAvatarFile] = useState<File | null>(null);
+  const [avatarPreview, setAvatarPreview] = useState<string>('');
+
+  const { mutateAsync: updateUser, isPending: isUpdating } = useUpdateUserMe();
+  const { mutateAsync: uploadAvatar, isPending: isUploading } =
+    useUploadAvatar();
+  const { session } = useAuthStore();
+
+  const form = useForm<TUserEditProfileForm>({
+    resolver: zodResolver(userEditProfileSchema),
+    mode: 'all',
+    defaultValues: {
+      fullname: session?.user?.fullname || '',
+      avatar: session?.user?.avatar || null,
+      location: session?.user?.location || '',
+      bio: session?.user?.bio || '',
+      skills: session?.user?.skills || [],
+    },
+  });
+
+  // Set initial avatar preview from current user avatar
+  useEffect(() => {
+    if (session?.user?.avatar && !avatarPreview) {
+      setAvatarPreview(session.user.avatar);
+    }
+    if (session?.user?.fullname) {
+      form.setValue('fullname', session.user.fullname);
+    }
+    if (session?.user?.location) {
+      form.setValue('location', session.user.location);
+    }
+    if (session?.user?.bio) {
+      form.setValue('bio', session.user.bio);
+    }
+    if (session?.user?.skills) {
+      form.setValue('skills', session.user.skills);
+    }
+  }, [
+    session?.user?.avatar,
+    session?.user?.fullname,
+    session?.user?.location,
+    session?.user?.bio,
+    session?.user?.skills,
+    avatarPreview,
+    form,
+  ]);
+
+  const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      // Validate file size (max 2MB)
+      if (file.size > 2 * 1024 * 1024) {
+        toast.error('The file is too large. Maximum size is 2MB.');
+        e.target.value = '';
+        return;
+      }
+
+      // Validate file type
+      if (!file.type.startsWith('image/')) {
+        toast.error('The file must be an image');
+        e.target.value = '';
+        return;
+      }
+
+      setAvatarFile(file);
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setAvatarPreview(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const onSubmit = form.handleSubmit(async (data) => {
+    try {
+      let avatarUrl = session?.user?.avatar || null;
+
+      // Upload avatar if a new file was selected
+      if (avatarFile) {
+        const uploadResult = await uploadAvatar(avatarFile);
+        avatarUrl = uploadResult.data.url;
+      }
+
+      // Update user profile
+      await updateUser({
+        fullname: data.fullname,
+        avatar: avatarUrl,
+        location: data.location,
+        bio: data.bio,
+        skills: data.skills,
+      });
+
+      toast.success('Profile updated successfully!');
+
+      // Wait a bit for the onSuccess handler to update localStorage
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // Close modal
+      onClose();
+    } catch (error) {
+      console.error('Profile update failed:', error);
+      toast.error(
+        `Failed to update profile: ${
+          error instanceof Error ? error.message : 'Unknown error'
+        }`
+      );
+    }
+  });
+
+  const isLoading = isUpdating || isUploading;
+
+  return open ? (
+    <div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-md z-50 overflow-y-auto">
+      <div className="min-h-full flex items-center justify-center">
+        <div className="bg-white dark:bg-gray-900 w-full max-w-md mx-4 my-6 sm:my-8 p-8 rounded-xl border dark:boder-gray-800">
+          <div className="mb-6">
+            <div className="flex items-center justify-between mb-2">
+              <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+                Edit Profile
+              </h1>
+              <button
+                type="button"
+                onClick={onClose}
+                className="text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-200 cursor-pointer"
+                aria-label="Close profile modal"
+              >
+                <svg
+                  className="w-6 h-6"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            </div>
+            <p className="text-gray-600 font-sans dark:text-neutral-400">
+              Update your photo and name
+            </p>
+          </div>
+
+          <form onSubmit={onSubmit} className="space-y-6">
+            {/* Avatar Upload */}
+            <div className="flex flex-col items-center space-y-4">
+              <div className="relative group">
+                {avatarPreview ? (
+                  <img
+                    src={avatarPreview}
+                    alt="Avatar preview"
+                    className="w-24 h-24 rounded-full object-cover border-4 border-gray-200 dark:border-neutral-700 group-hover:border-blue-400 dark:group-hover:border-blue-500 transition-colors"
+                  />
+                ) : (
+                  <div className="w-24 h-24 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center group-hover:bg-gray-300 dark:group-hover:bg-gray-600 transition-colors">
+                    <Icon
+                      icon="ic:baseline-person"
+                      width="48"
+                      height="48"
+                      className="text-gray-400 dark:text-neutral-500"
+                    />
+                  </div>
+                )}
+                {/* Camera overlay */}
+                <label
+                  htmlFor="avatar"
+                  className="absolute bottom-0 right-0 bg-primary-500 text-white p-2 rounded-full cursor-pointer hover:bg-primary-600 transition-colors shadow-lg"
+                >
+                  <svg
+                    className="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+                    />
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
+                    />
+                  </svg>
+                  <input
+                    id="avatar"
+                    type="file"
+                    accept="image/*"
+                    className="hidden"
+                    onChange={handleAvatarChange}
+                    disabled={isLoading}
+                  />
+                </label>
+              </div>
+              <p className="text-sm text-gray-500 dark:text-neutral-400 text-center font-sans">
+                Click the camera icon to change your photo
+                <br />
+                Format: JPG, PNG. Max 2MB
+              </p>
+            </div>
+
+            {/* Full Name */}
+            <ControlledInputField
+              control={form.control}
+              label="Full Name"
+              placeholder="Enter your full name"
+              name="fullname"
+              size="lg"
+            />
+
+            {/* City */}
+            <div className="space-y-2">
+              <label className="block text-label1 font-medium text-neutral-800 dark:text-neutral-300">
+                City
+              </label>
+              <Controller
+                control={form.control}
+                name="location"
+                render={({ field, fieldState }) => (
+                  <CitySelect
+                    value={field.value ?? ''}
+                    onChange={field.onChange}
+                    error={fieldState.error?.message}
+                    placeholder="Search your city..."
+                  />
+                )}
+              />
+            </div>
+
+            {/* Role/Skills */}
+            <div className="space-y-2">
+              <label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">
+                Role / Skills
+              </label>
+              <Controller
+                control={form.control}
+                name="skills"
+                render={({ field }) => (
+                  <div className="space-y-2">
+                    <div className="grid grid-cols-2 gap-2">
+                      {ROLE_OPTIONS.map((role) => (
+                        <label
+                          key={role}
+                          className="flex items-center space-x-2 cursor-pointer font-sans"
+                        >
+                          <input
+                            type="checkbox"
+                            checked={field.value?.includes(role)}
+                            onChange={(e) => {
+                              const newValue = e.target.checked
+                                ? [...(field.value || []), role]
+                                : (field.value || []).filter((v) => v !== role);
+                              field.onChange(newValue);
+                            }}
+                            className="rounded border-gray-300 dark:border-neutral-600 text-blue-600 focus:ring-blue-500 dark:bg-gray-800"
+                          />
+                          <span className="text-sm dark:text-neutral-300">
+                            {role}
+                          </span>
+                        </label>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              />
+            </div>
+
+            {/* Bio */}
+            <div className="space-y-2">
+              <label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">
+                Bio{' '}
+                <span className="text-gray-400 dark:text-neutral-500">
+                  (Optional)
+                </span>
+              </label>
+              <Controller
+                control={form.control}
+                name="bio"
+                render={({ field, fieldState }) => (
+                  <div>
+                    <Textarea
+                      {...field}
+                      placeholder="Tell us about yourself..."
+                      rows={4}
+                      className="w-full font-sans"
+                      size="lg"
+                    />
+                    {fieldState.error && (
+                      <p className="text-sm text-red-500 mt-1">
+                        {fieldState.error.message}
+                      </p>
+                    )}
+                  </div>
+                )}
+              />
+            </div>
+
+            {/* Action Buttons */}
+            <div className="flex space-x-3 pt-4">
+              <Button
+                type="button"
+                variant="secondary"
+                className="flex-1"
+                onClick={onClose}
+                disabled={isLoading}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                className="flex-1"
+                disabled={isLoading || !form.formState.isValid}
+              >
+                {isLoading ? (
+                  <span className="flex items-center justify-center">
+                    <svg
+                      className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      />
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      />
+                    </svg>
+                    Saving...
+                  </span>
+                ) : (
+                  'Save'
+                )}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  ) : null;
+};
+
+export default ProfilePage;

apps/hackathon/src/app/teams/[teamId]/chat/page.tsx

@@ -1,8 +1,15 @@
-import { FC, ReactElement, useState, useRef, useEffect } from 'react';
+import { FC, ReactElement, useState, useRef, useEffect, useMemo } from 'react';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { useNavigate, useParams } from 'react-router';
-import { useTeamById, useTeamMessages, useSendMessage, useDeleteMessage, useAuthStore } from '@imphnen-frontend-service/service';
+import {
+  useTeamById,
+  useTeamMessages,
+  useSendMessage,
+  useDeleteMessage,
+  useAuthStore,
+} from '@imphnen-frontend-service/service';
 import { toast } from 'sonner';
+import { Icon } from '@iconify/react';
 
 const TeamChatPage: FC = (): ReactElement => {
   const { teamId } = useParams<{ teamId: string }>();
@@ -13,16 +20,54 @@ const TeamChatPage: FC = (): ReactElement => {
 
   const { data: teamData } = useTeamById(teamId || '');
   const { data: messages, isLoading } = useTeamMessages(teamId || '');
-  const { mutateAsync: sendMessage, isPending: isSending } = useSendMessage(teamId || '');
+  const { mutateAsync: sendMessage, isPending: isSending } = useSendMessage(
+    teamId || ''
+  );
   const { mutateAsync: deleteMessage } = useDeleteMessage(teamId || '');
 
   const team = teamData?.data;
   const currentUserId = session?.user?.id;
 
+  // Message type used for UI rendering
+  interface ChatMessage {
+    id: string;
+    user_id: string;
+    user?: {
+      avatar?: string;
+      fullname?: string;
+    };
+    message: string;
+    created_at: string;
+  }
+
+  // Inline delete confirmation UI state
+  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
+
+  // Prepare messages: de-duplicate by id and sort by created_at
+  const displayMessages = useMemo(() => {
+    const raw: ChatMessage[] = Array.isArray(messages)
+      ? (messages as ChatMessage[])
+      : [];
+    const seen = new Set<string>();
+    const dedup: ChatMessage[] = [];
+    for (const m of raw) {
+      const key = m.id ?? `${m.user_id}-${m.created_at}`;
+      if (!seen.has(key)) {
+        seen.add(key);
+        dedup.push(m);
+      }
+    }
+    dedup.sort(
+      (a, b) =>
+        new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
+    );
+    return dedup;
+  }, [messages]);
+
   // Auto-scroll to bottom when new messages arrive
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages]);
+  }, [displayMessages]);
 
   const handleSendMessage = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -38,11 +83,10 @@ const TeamChatPage: FC = (): ReactElement => {
   };
 
   const handleDeleteMessage = async (messageId: string) => {
-    if (!confirm('Are you sure you want to delete this message?')) return;
-
     try {
       await deleteMessage(messageId);
       toast.success('Message deleted');
+      setDeleteTargetId(null);
     } catch (error) {
       console.error('Failed to delete message:', error);
       toast.error('Failed to delete message');
@@ -63,16 +107,23 @@ const TeamChatPage: FC = (): ReactElement => {
   };
 
   return (
-    <div className="flex flex-col h-screen bg-gray-50">
+    <div className="flex flex-col h-screen bg-gray-50 dark:bg-gray-950">
       {/* Header */}
-      <div className="bg-white border-b shadow-sm">
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700 shadow-sm dark:shadow-gray-950/50">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
           <div className="flex items-center justify-between">
             <div>
-              <h1 className="text-2xl font-bold text-gray-900">Team Chat</h1>
-              <p className="text-gray-600 text-sm mt-0.5">{team?.name}</p>
+              <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+                Team Chat
+              </h1>
+              <p className="text-gray-600 dark:text-gray-400 text-sm mt-0.5">
+                {team?.name}
+              </p>
             </div>
-            <Button variant="secondary" onClick={() => navigate(`/teams/${teamId}`)}>
+            <Button
+              variant="secondary"
+              onClick={() => navigate(`/teams/${teamId}`)}
+            >
               Back to Team
             </Button>
           </div>
@@ -84,23 +135,29 @@ const TeamChatPage: FC = (): ReactElement => {
         <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
           {isLoading ? (
             <div className="flex items-center justify-center h-64">
-              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 dark:border-primary-400"></div>
             </div>
-          ) : messages && messages.length > 0 ? (
+          ) : displayMessages && displayMessages.length > 0 ? (
             <div className="space-y-4">
-              {messages.map((msg) => {
+              {displayMessages.map((msg) => {
                 const isOwnMessage = msg.user_id === currentUserId;
                 const isLeader = team?.leader_id === currentUserId;
                 const canDelete = isOwnMessage || isLeader;
 
                 return (
                   <div
-                    key={msg.id}
-                    className={`flex ${isOwnMessage ? 'justify-end' : 'justify-start'}`}
+                    key={`${msg.id ?? 'message'}-${msg.created_at}`}
+                    className={`flex ${
+                      isOwnMessage ? 'justify-end' : 'justify-start'
+                    }`}
+                  >
+                    <div
+                      className={`flex gap-3 max-w-lg ${
+                        isOwnMessage ? 'flex-row-reverse' : 'flex-row'
+                      }`}
                     >
-                    <div className={`flex gap-3 max-w-lg ${isOwnMessage ? 'flex-row-reverse' : 'flex-row'}`}>
                       {/* Avatar */}
-                      <div className="flex-shrink-0">
+                      <div className="shrink-0">
                         {msg.user?.avatar ? (
                           <img
                             src={msg.user.avatar}
@@ -115,38 +172,76 @@ const TeamChatPage: FC = (): ReactElement => {
                       </div>
 
                       {/* Message Bubble */}
-                      <div className={`flex-1 ${isOwnMessage ? 'text-right' : 'text-left'}`}>
-                        <div className={`inline-block ${isOwnMessage ? 'items-end' : 'items-start'}`}>
+                      <div className={`flex-1 text-left`}>
+                        <div
+                          className={`inline-block ${
+                            isOwnMessage ? 'items-end' : 'items-start'
+                          }`}
+                        >
                           <div className="flex items-baseline gap-2 mb-1">
-                            <span className="font-semibold text-sm text-gray-900">
+                            <span className="font-semibold text-sm text-gray-900 dark:text-white">
                               {isOwnMessage ? 'You' : msg.user?.fullname}
                             </span>
-                            <span className="text-xs text-gray-500">
+                            <span className="text-xs text-gray-500 dark:text-gray-500">
                               {formatTime(msg.created_at)}
                             </span>
                           </div>
                           <div
                             className={`relative group rounded-2xl px-4 py-2.5 ${
                               isOwnMessage
-                                ? 'bg-blue-600 text-white'
-                                : 'bg-white text-gray-900 border border-gray-200'
+                                ? 'bg-blue-600 dark:bg-primary-600 text-white'
+                                : 'bg-white dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-200 dark:border-gray-700'
                             }`}
                           >
-                            <p className="text-sm whitespace-pre-wrap break-words">{msg.message}</p>
+                            <p className="text-sm whitespace-pre-wrap wrap-break-word font-sans">
+                              {msg.message}
+                            </p>
 
                             {/* Delete button */}
                             {canDelete && (
                               <button
-                                onClick={() => handleDeleteMessage(msg.id)}
-                                className={`absolute top-1 ${isOwnMessage ? 'left-1' : 'right-1'} opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-gray-200 ${isOwnMessage ? 'hover:bg-blue-700' : ''}`}
+                                onClick={() =>
+                                  setDeleteTargetId(
+                                    deleteTargetId === msg.id ? null : msg.id
+                                  )
+                                }
+                                className={`absolute top-1 ${
+                                  isOwnMessage ? 'left-1' : 'right-1'
+                                } opacity-0 hover:opacity-100 p-1 rounded hover:bg-gray-200 dark:hover:bg-neutral-700 cursor-pointer ${
+                                  isOwnMessage
+                                    ? 'hover:bg-blue-700 dark:hover:bg-primary-700'
+                                    : ''
+                                }`}
                                 title="Delete message"
                               >
-                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                                </svg>
+                                {/* Icon trash */}
+                                <Icon
+                                  icon="mdi:trash-can-outline"
+                                  className="w-4 h-4"
+                                />
                               </button>
                             )}
                           </div>
+                          {canDelete && deleteTargetId === msg.id && (
+                            <div
+                              className={`mt-2 flex gap-2 ${
+                                isOwnMessage ? 'justify-end' : 'justify-start'
+                              }`}
+                            >
+                              <button
+                                onClick={() => handleDeleteMessage(msg.id)}
+                                className="px-2 py-1 text-xs rounded bg-red-600 text-white hover:bg-red-700 cursor-pointer"
+                              >
+                                Delete
+                              </button>
+                              <button
+                                onClick={() => setDeleteTargetId(null)}
+                                className="px-2 py-1 text-xs rounded bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-neutral-700 dark:text-white dark:hover:bg-neutral-600 cursor-pointer"
+                              >
+                                Cancel
+                              </button>
+                            </div>
+                          )}
                         </div>
                       </div>
                     </div>
@@ -157,11 +252,14 @@ const TeamChatPage: FC = (): ReactElement => {
             </div>
           ) : (
             <div className="flex flex-col items-center justify-center h-64 text-center">
-              <div className="text-6xl mb-4">💬</div>
-              <h3 className="text-xl font-semibold text-gray-900 mb-2">
+              <Icon
+                icon="mdi:chat-outline"
+                className="text-6xl mb-4 text-gray-400"
+              />
+              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                 No messages yet
               </h3>
-              <p className="text-gray-600">
+              <p className="text-gray-600 dark:text-gray-400 font-sans">
                 Be the first to start the conversation!
               </p>
             </div>
@@ -170,7 +268,7 @@ const TeamChatPage: FC = (): ReactElement => {
       </div>
 
       {/* Message Input */}
-      <div className="bg-white border-t shadow-lg">
+      <div className="bg-white dark:bg-gray-900 border-t dark:border-gray-700 shadow-lg dark:shadow-gray-950/50">
         <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
           <form onSubmit={handleSendMessage} className="flex gap-3">
             <input
@@ -178,7 +276,7 @@ const TeamChatPage: FC = (): ReactElement => {
               value={message}
               onChange={(e) => setMessage(e.target.value)}
               placeholder="Type your message..."
-              className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="flex-1 px-4 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-primary-500 focus:border-transparent"
               disabled={isSending}
             />
             <Button
@@ -193,8 +291,18 @@ const TeamChatPage: FC = (): ReactElement => {
                 </div>
               ) : (
                 <div className="flex items-center gap-2">
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+                  <svg
+                    className="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+                    />
                   </svg>
                   Send
                 </div>

apps/hackathon/src/app/teams/[teamId]/edit/page.tsx

@@ -3,14 +3,22 @@ import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
 import { useNavigate, useParams } from 'react-router';
 import { useForm, Controller } from 'react-hook-form';
-import { teamUpdateSchema, TTeamUpdateForm, useUpdateTeam, useTeamById, ETeamVisibility, useUploadFile, useAuthStore } from '@imphnen-frontend-service/service';
+import {
+  teamUpdateSchema,
+  TTeamUpdateForm,
+  useUpdateTeam,
+  useTeamById,
+  ETeamVisibility,
+  useUploadFile,
+  useAuthStore,
+} from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
 
-const INDONESIAN_CITIES = [
-  'Jakarta', 'Surabaya', 'Bandung', 'Medan', 'Semarang',
-  'Makassar', 'Palembang', 'Tangerang', 'Depok', 'Bekasi',
-  'Yogyakarta', 'Malang', 'Bogor', 'Batam', 'Pekanbaru',
-];
+import { CitySelect } from '../../../../components/city-select';
+import { Icon } from '@iconify/react';
+import { toast } from 'sonner';
+
+const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
 
 const EditTeamPage: FC = (): ReactElement => {
   const { teamId } = useParams<{ teamId: string }>();
@@ -21,8 +29,12 @@ const EditTeamPage: FC = (): ReactElement => {
   const [bannerFile, setBannerFile] = useState<File | null>(null);
   const [bannerPreview, setBannerPreview] = useState<string>('');
 
-  const { data: teamData, isLoading: isLoadingTeam } = useTeamById(teamId || '');
-  const { mutateAsync: updateTeam, isPending: isUpdating } = useUpdateTeam(teamId || '');
+  const { data: teamData, isLoading: isLoadingTeam } = useTeamById(
+    teamId || ''
+  );
+  const { mutateAsync: updateTeam, isPending: isUpdating } = useUpdateTeam(
+    teamId || ''
+  );
   const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
 
   const team = teamData?.data;
@@ -51,18 +63,24 @@ const EditTeamPage: FC = (): ReactElement => {
 
   if (isLoadingTeam) {
     return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-gray-600">Loading team...</div>
+      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-gray-600 dark:text-gray-400">Loading team...</div>
       </div>
     );
   }
 
   if (!isLeader) {
     return (
-      <div className="flex flex-col items-center justify-center min-h-screen">
-        <h2 className="text-2xl font-bold text-gray-900 mb-4">Access Denied</h2>
-        <p className="text-gray-600 mb-4">Only the team leader can edit team information</p>
-        <Button onClick={() => navigate(`/teams/${teamId}`)}>Back to Team</Button>
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          Access Denied
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-4">
+          Only the team leader can edit team information
+        </p>
+        <Button onClick={() => navigate(`/teams/${teamId}`)}>
+          Back to Team
+        </Button>
       </div>
     );
   }
@@ -70,6 +88,11 @@ const EditTeamPage: FC = (): ReactElement => {
   const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
+      if (file.size > MAX_FILE_SIZE) {
+        toast.error('Logo image is too large. Maximum size is 2MB.');
+        e.target.value = '';
+        return;
+      }
       setLogoFile(file);
       const reader = new FileReader();
       reader.onloadend = () => {
@@ -82,6 +105,11 @@ const EditTeamPage: FC = (): ReactElement => {
   const handleBannerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
+      if (file.size > MAX_FILE_SIZE) {
+        toast.error('Banner image is too large. Maximum size is 2MB.');
+        e.target.value = '';
+        return;
+      }
       setBannerFile(file);
       const reader = new FileReader();
       reader.onloadend = () => {
@@ -119,28 +147,35 @@ const EditTeamPage: FC = (): ReactElement => {
   });
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="bg-white border-b">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
         <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <h1 className="text-3xl font-bold text-gray-900">Edit Team Info</h1>
-          <p className="text-gray-600 mt-1">Update your team details</p>
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+            Edit Team Info
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400 mt-1">
+            Update your team details
+          </p>
         </div>
       </div>
 
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="bg-white rounded-lg shadow-md p-8">
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-8">
           <form onSubmit={onSubmit} className="space-y-6">
             {/* Banner Upload */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+              <label className="block text-label1 font-medium text-gray-700 dark:text-gray-300 mb-2">
                 Team Banner
               </label>
               {bannerPreview ? (
-                <div className="relative">
+                <div
+                  className="relative w-full"
+                  style={{ aspectRatio: '3 / 1' }}
+                >
                   <img
                     src={bannerPreview}
                     alt="Banner preview"
-                    className="w-full h-48 object-cover rounded-lg border-2 border-gray-200"
+                    className="absolute inset-0 w-full h-full object-cover rounded-lg border-2 border-gray-200 dark:border-gray-700"
                   />
                   <button
                     type="button"
@@ -149,16 +184,20 @@ const EditTeamPage: FC = (): ReactElement => {
                       setBannerPreview('');
                       form.setValue('banner', null);
                     }}
-                    className="absolute top-2 right-2 bg-red-500 text-white px-3 py-1 rounded-lg text-sm hover:bg-red-600"
+                    className="absolute top-2 right-2 bg-danger-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-danger-700 cursor-pointer"
                   >
                     Remove
                   </button>
                 </div>
               ) : (
-                <label className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
+                <label className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800">
                   <div className="text-center">
-                    <p className="text-gray-500">Click to upload banner</p>
-                    <p className="text-xs text-gray-400 mt-1">1200x400 recommended</p>
+                    <p className="text-gray-500 dark:text-gray-400">
+                      Click to upload banner
+                    </p>
+                    <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+                      1200x400 recommended. Max 2MB
+                    </p>
                   </div>
                   <input
                     type="file"
@@ -172,7 +211,7 @@ const EditTeamPage: FC = (): ReactElement => {
 
             {/* Logo Upload */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+              <label className="block text-label1 font-medium text-gray-700 dark:text-gray-300 mb-2">
                 Team Logo
               </label>
               <div className="flex items-center space-x-4">
@@ -180,16 +219,19 @@ const EditTeamPage: FC = (): ReactElement => {
                   <img
                     src={logoPreview}
                     alt="Logo preview"
-                    className="w-24 h-24 rounded-full object-cover border-2 border-gray-200"
+                    className="w-24 h-24 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700"
                   />
                 ) : (
-                  <div className="w-24 h-24 rounded-full bg-gray-200 flex items-center justify-center">
-                    <span className="text-gray-400 text-3xl">👥</span>
+                  <div className="w-24 h-24 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                    <span className="text-gray-400 dark:text-gray-500 text-3xl">
+                      <Icon icon="mdi:account-group" />
+                    </span>
                   </div>
                 )}
                 <div>
+                  <div className="flex flex-col md:flex-row items-start justify-start gap-1">
                     <label htmlFor="logo" className="cursor-pointer">
-                    <span className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 inline-block">
+                      <span className="px-4 py-2 text-sm bg-primary-600 text-white rounded-lg hover:bg-primary-700 inline-block">
                         {logoPreview ? 'Change Logo' : 'Upload Logo'}
                       </span>
                       <input
@@ -208,12 +250,14 @@ const EditTeamPage: FC = (): ReactElement => {
                           setLogoPreview('');
                           form.setValue('logo', null);
                         }}
-                      className="ml-3 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
+                        className="px-4 py-2 text-sm bg-danger-600 text-white rounded-lg hover:bg-danger-700 cursor-pointer"
                       >
                         Remove
                       </button>
                     )}
                   </div>
+                  <p className="text-xs text-gray-400 dark:text-gray-500 mt-2">Max 2MB</p>
+                </div>
               </div>
             </div>
 
@@ -223,40 +267,32 @@ const EditTeamPage: FC = (): ReactElement => {
               label="Team Name"
               placeholder="Enter team name"
               name="name"
+              size="lg"
+              isRequired={true}
             />
 
             {/* City */}
             <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                 City
               </label>
               <Controller
                 control={form.control}
                 name="city"
                 render={({ field, fieldState }) => (
-                  <div>
-                    <select
-                      {...field}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    >
-                      <option value="">Select city</option>
-                      {INDONESIAN_CITIES.map((city) => (
-                        <option key={city} value={city}>
-                          {city}
-                        </option>
-                      ))}
-                    </select>
-                    {fieldState.error && (
-                      <p className="text-sm text-red-500 mt-1">{fieldState.error.message}</p>
-                    )}
-                  </div>
+                  <CitySelect
+                    value={field.value || ''}
+                    onChange={field.onChange}
+                    error={fieldState.error?.message}
+                    placeholder="Search your city..."
+                  />
                 )}
               />
             </div>
 
             {/* Description */}
             <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
+              <label className="block text-label1 font-medium text-gray-700 dark:text-gray-300">
                 Description
               </label>
               <Controller
@@ -270,9 +306,12 @@ const EditTeamPage: FC = (): ReactElement => {
                       placeholder="Tell others about your team..."
                       rows={4}
                       className="w-full"
+                      size="lg"
                     />
                     {fieldState.error && (
-                      <p className="text-sm text-red-500 mt-1">{fieldState.error.message}</p>
+                      <p className="text-sm text-red-500 mt-1">
+                        {fieldState.error.message}
+                      </p>
                     )}
                   </div>
                 )}
@@ -281,7 +320,7 @@ const EditTeamPage: FC = (): ReactElement => {
 
             {/* Visibility */}
             <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
+              <label className="block text-label1 font-medium text-gray-700 dark:text-gray-300">
                 Team Visibility
               </label>
               <Controller
@@ -289,7 +328,7 @@ const EditTeamPage: FC = (): ReactElement => {
                 name="visibility"
                 render={({ field }) => (
                   <div className="space-y-3">
-                    <label className="flex items-start space-x-3 cursor-pointer border rounded-lg p-4 hover:bg-gray-50">
+                    <label className="flex items-start space-x-3 cursor-pointer border dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800">
                       <input
                         type="radio"
                         {...field}
@@ -298,13 +337,15 @@ const EditTeamPage: FC = (): ReactElement => {
                         className="mt-1"
                       />
                       <div>
-                        <p className="font-medium text-gray-900">Public</p>
-                        <p className="text-sm text-gray-600">
+                        <p className="font-medium text-gray-900 dark:text-white">
+                          Public
+                        </p>
+                        <p className="text-sm text-gray-600 dark:text-gray-400 font-sans">
                           Team will be visible in Browse Teams
                         </p>
                       </div>
                     </label>
-                    <label className="flex items-start space-x-3 cursor-pointer border rounded-lg p-4 hover:bg-gray-50">
+                    <label className="flex items-start space-x-3 cursor-pointer border dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800">
                       <input
                         type="radio"
                         {...field}
@@ -313,8 +354,10 @@ const EditTeamPage: FC = (): ReactElement => {
                         className="mt-1"
                       />
                       <div>
-                        <p className="font-medium text-gray-900">Private</p>
-                        <p className="text-sm text-gray-600">
+                        <p className="font-medium text-gray-900 dark:text-white">
+                          Private
+                        </p>
+                        <p className="text-sm text-gray-600 dark:text-gray-400 font-sans">
                           Team hidden, invite-only
                         </p>
                       </div>

apps/hackathon/src/app/teams/[teamId]/layout.tsx

@@ -1,18 +1,46 @@
-import { FC, ReactNode } from 'react';
+import { FC, ReactElement, useState } from 'react';
 import { Outlet } from 'react-router';
-import { Navigation } from '../../../components/navigation';
+import { Sidebar } from '../../../components/sidebar';
 
-interface TeamLayoutProps {
-  children?: ReactNode;
-}
+const TeamDetailLayout: FC = (): ReactElement => {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
 
-export const TeamLayout: FC<TeamLayoutProps> = () => {
   return (
-    <div className="min-h-screen bg-gray-50">
-      <Navigation />
+    <div className="flex min-h-screen bg-gray-50 dark:bg-gray-950">
+      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+
+      <div className="flex-1 flex flex-col">
+        {/* Mobile Header with Hamburger */}
+        <div className="lg:hidden sticky top-0 z-30 bg-white dark:bg-gray-900 border-b dark:border-gray-700 px-4 py-3 flex items-center">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+          >
+            <svg
+              className="w-6 h-6 text-gray-600 dark:text-gray-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            </svg>
+          </button>
+          <h1 className="ml-3 text-lg font-bold text-gray-900 dark:text-white">
+            Hackathon
+          </h1>
+        </div>
+
+        <main className="flex-1 overflow-auto">
           <Outlet />
+        </main>
+      </div>
     </div>
   );
 };
 
-export default TeamLayout;
+export default TeamDetailLayout;

apps/hackathon/src/app/teams/[teamId]/members/page.tsx

@@ -15,6 +15,7 @@ import {
 } from '@imphnen-frontend-service/service';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from 'sonner';
 
 const ManageMembersPage: FC = (): ReactElement => {
   const { teamId } = useParams<{ teamId: string }>();
@@ -22,31 +23,58 @@ const ManageMembersPage: FC = (): ReactElement => {
   const { session } = useAuthStore();
   const [showInviteModal, setShowInviteModal] = useState(false);
 
-  const { data: teamData } = useTeamById(teamId || '');
-  const { data: membersData, isLoading: isLoadingMembers } = useTeamMembers(teamId || '');
+  const { data: teamData, isLoading: isLoadingTeam } = useTeamById(
+    teamId || ''
+  );
+  const { data: membersData, isLoading: isLoadingMembers } = useTeamMembers(
+    teamId || ''
+  );
   const { data: joinRequestsData } = useTeamJoinRequests(teamId || '');
 
-  const { mutateAsync: inviteMember, isPending: isInviting } = useInviteMember(teamId || '');
-  const { mutateAsync: removeMember, isPending: isRemoving } = useRemoveMember(teamId || '');
-  const { mutateAsync: respondToRequest, isPending: isResponding } = useRespondToJoinRequest(teamId || '');
+  const { mutateAsync: inviteMember, isPending: isInviting } = useInviteMember(
+    teamId || ''
+  );
+  const { mutateAsync: removeMember, isPending: isRemoving } = useRemoveMember(
+    teamId || ''
+  );
+  const { mutateAsync: respondToRequest, isPending: isResponding } =
+    useRespondToJoinRequest(teamId || '');
 
   const team = teamData?.data;
   const members = membersData?.data || [];
-  const joinRequests = Array.isArray(joinRequestsData?.data) ? joinRequestsData.data : [];
+  const joinRequests = Array.isArray(joinRequestsData?.data)
+    ? joinRequestsData.data
+    : [];
   const currentUserId = session?.user?.id;
   const isLeader = currentUserId === team?.leader_id;
+  const hasSubmission = team?.has_submission;
 
   const form = useForm<TInviteMemberForm>({
     resolver: zodResolver(inviteMemberSchema),
     mode: 'all',
   });
 
+  // Show loading state while fetching team data
+  if (isLoadingTeam) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <p className="text-gray-600 dark:text-gray-400">Loading...</p>
+      </div>
+    );
+  }
+
   if (!isLeader) {
     return (
-      <div className="flex flex-col items-center justify-center min-h-screen">
-        <h2 className="text-2xl font-bold text-gray-900 mb-4">Access Denied</h2>
-        <p className="text-gray-600 mb-4">Only the team leader can manage members</p>
-        <Button onClick={() => navigate(`/teams/${teamId}`)}>Back to Team</Button>
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          Access Denied
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-4">
+          Only the team leader can manage members
+        </p>
+        <Button onClick={() => navigate(`/teams/${teamId}`)}>
+          Back to Team
+        </Button>
       </div>
     );
   }
@@ -75,33 +103,48 @@ const ManageMembersPage: FC = (): ReactElement => {
   const handleApproveRequest = async (requestId: string) => {
     try {
       await respondToRequest({ requestId, action: 'approve' });
+      toast.success('Member added successfully!');
     } catch (error) {
       console.error('Failed to approve request:', error);
+      toast.error((error as Error).message || 'Failed to approve request');
     }
   };
 
   const handleRejectRequest = async (requestId: string) => {
     try {
       await respondToRequest({ requestId, action: 'reject' });
+      toast.success('Request rejected');
     } catch (error) {
       console.error('Failed to reject request:', error);
+      toast.error((error as Error).message || 'Failed to reject request');
     }
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="bg-white border-b">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div className="flex items-center justify-between">
+          <div className="flex flex-col md:flex-row gap-y-4 items-start md:items-center justify-between">
             <div>
-              <h1 className="text-3xl font-bold text-gray-900">Manage Members</h1>
-              <p className="text-gray-600 mt-1">{team?.name}</p>
+              <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+                Manage Members
+              </h1>
+              <p className="text-gray-600 dark:text-gray-400 mt-1">
+                {team?.name}
+              </p>
             </div>
             <div className="flex space-x-3">
-              <Button onClick={() => setShowInviteModal(true)}>
+              <Button
+                onClick={() => setShowInviteModal(true)}
+                disabled={hasSubmission}
+                title={hasSubmission ? 'Cannot invite members after project submission' : undefined}
+              >
                 Invite Member
               </Button>
-              <Button variant="secondary" onClick={() => navigate(`/teams/${teamId}`)}>
+              <Button
+                variant="secondary"
+                onClick={() => navigate(`/teams/${teamId}`)}
+              >
                 Back to Team
               </Button>
             </div>
@@ -110,15 +153,35 @@ const ManageMembersPage: FC = (): ReactElement => {
       </div>
 
       <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
+        {/* Submission Lock Warning */}
+        {hasSubmission && (
+          <div className="bg-amber-50 dark:bg-amber-900/20 border-2 border-amber-500 rounded-lg p-4">
+            <div className="flex items-start space-x-3">
+              <span className="text-2xl">🔒</span>
+              <div>
+                <h3 className="font-bold text-amber-900 dark:text-amber-100">
+                  Team Locked
+                </h3>
+                <p className="text-amber-800 dark:text-amber-200 text-sm font-sans mt-1">
+                  Your team has submitted a project. You cannot add or remove members after submission to maintain competition integrity.
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
         {/* Join Requests */}
         {joinRequests.length > 0 && (
-          <div className="bg-white rounded-lg shadow-md p-6">
-            <h2 className="text-xl font-bold text-gray-900 mb-4">
+          <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-6">
+            <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
               Join Requests ({joinRequests.length})
             </h2>
             <div className="space-y-3">
               {joinRequests.map((request) => (
-                <div key={request.id} className="border rounded-lg p-4">
+                <div
+                  key={request.id}
+                  className="border dark:border-gray-700 rounded-lg p-4"
+                >
                   <div className="flex items-start justify-between">
                     <div className="flex items-center space-x-3 flex-1">
                       {request.user.avatar ? (
@@ -128,24 +191,35 @@ const ManageMembersPage: FC = (): ReactElement => {
                           className="w-12 h-12 rounded-full object-cover"
                         />
                       ) : (
-                        <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center">
-                          <span className="text-gray-500">👤</span>
+                        <div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                          <span className="text-gray-500 dark:text-gray-400">
+                            👤
+                          </span>
                         </div>
                       )}
                       <div className="flex-1">
-                        <p className="font-medium text-gray-900">{request.user.fullname}</p>
-                        <p className="text-sm text-gray-600">{request.user.email}</p>
+                        <p className="font-medium text-gray-900 dark:text-white">
+                          {request.user.fullname}
+                        </p>
+                        <p className="text-sm text-gray-600 dark:text-gray-400">
+                          {request.user.email}
+                        </p>
                         {request.user.location && (
-                          <p className="text-sm text-gray-500">📍 {request.user.location}</p>
+                          <p className="text-sm text-gray-500 dark:text-gray-500">
+                            📍 {request.user.location}
+                          </p>
                         )}
-                        <p className="text-sm text-gray-700 mt-2 italic">"{request.message}"</p>
+                        <p className="text-sm text-gray-700 dark:text-gray-300 mt-2 italic">
+                          "{request.message}"
+                        </p>
                       </div>
                     </div>
                     <div className="flex space-x-2 ml-4">
                       <Button
                         size="sm"
                         onClick={() => handleApproveRequest(request.id)}
-                        disabled={isResponding}
+                        disabled={isResponding || hasSubmission}
+                        title={hasSubmission ? 'Cannot accept members after project submission' : undefined}
                       >
                         Approve
                       </Button>
@@ -166,16 +240,21 @@ const ManageMembersPage: FC = (): ReactElement => {
         )}
 
         {/* Current Members */}
-        <div className="bg-white rounded-lg shadow-md p-6">
-          <h2 className="text-xl font-bold text-gray-900 mb-4">
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-6">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
             Current Members ({members.length})
           </h2>
           {isLoadingMembers ? (
-            <p className="text-gray-600">Loading members...</p>
+            <p className="text-gray-600 dark:text-gray-400">
+              Loading members...
+            </p>
           ) : (
             <div className="space-y-3">
               {members.map((member) => (
-                <div key={member.id} className="border rounded-lg p-4 flex items-center justify-between">
+                <div
+                  key={member.id}
+                  className="border dark:border-gray-700 rounded-lg p-4 flex items-center justify-between"
+                >
                   <div className="flex items-center space-x-3">
                     {member.user.avatar ? (
                       <img
@@ -184,31 +263,39 @@ const ManageMembersPage: FC = (): ReactElement => {
                         className="w-12 h-12 rounded-full object-cover"
                       />
                     ) : (
-                      <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center">
-                        <span className="text-gray-500">👤</span>
+                      <div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                        <span className="text-gray-500 dark:text-gray-400">
+                          👤
+                        </span>
                       </div>
                     )}
                     <div>
-                      <p className="font-medium text-gray-900">{member.user.fullname}</p>
-                      <p className="text-sm text-gray-600">{member.user.email}</p>
+                      <p className="font-medium text-gray-900 dark:text-white">
+                        {member.user.fullname}
+                      </p>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">
+                        {member.user.email}
+                      </p>
                       {member.user.location && (
-                        <p className="text-sm text-gray-500">📍 {member.user.location}</p>
+                        <p className="text-sm text-gray-500 dark:text-gray-500">
+                          📍 {member.user.location}
+                        </p>
                       )}
                       <div className="flex items-center space-x-2 mt-1">
                         {member.role === 'leader' && (
-                          <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs font-medium">
+                          <span className="px-2 py-1 bg-blue-100 dark:bg-primary-900/30 text-blue-800 dark:text-primary-300 rounded text-xs font-medium">
                             Leader
                           </span>
                         )}
                         {member.status === ETeamMemberStatus.PENDING && (
-                          <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs font-medium">
+                          <span className="px-2 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 rounded text-xs font-medium">
                             Pending Invitation
                           </span>
                         )}
                       </div>
                     </div>
                   </div>
-                  {member.role !== 'leader' && (
+                  {member.role !== 'leader' && !hasSubmission && (
                     <Button
                       size="sm"
                       variant="secondary"
@@ -225,37 +312,43 @@ const ManageMembersPage: FC = (): ReactElement => {
         </div>
 
         {/* Warning */}
-        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
-          <p className="text-sm text-yellow-800">
-            <strong>Note:</strong> Members cannot leave the team without your approval. Only you can remove members from the team.
+        {!hasSubmission && (
+          <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
+            <p className="text-sm text-yellow-800 dark:text-yellow-200">
+              <strong>Note:</strong> Members cannot leave the team without your
+              approval. Only you can remove members from the team.
             </p>
           </div>
+        )}
       </div>
 
       {/* Invite Member Modal */}
       {showInviteModal && (
-        <div className="fixed inset-0 bg-black/20 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">
+        <div className="fixed inset-0 bg-black/20 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl dark:shadow-gray-950/50 max-w-md w-full p-6">
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
               Invite Member
             </h2>
-            <p className="text-gray-600 mb-4">
-              Send an invitation to join your team. The invited member will see the invitation on their dashboard after logging in.
+            <p className="text-gray-600 dark:text-gray-400 mb-4 font-sans">
+              Send an invitation to join your team. The invited member will see
+              the invitation on their dashboard after logging in.
             </p>
-            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mb-6">
-              <p className="text-sm text-yellow-800">
-                <strong>Important:</strong> The email you enter must match the GitHub email address the member uses to sign in.
+            <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3 mb-6">
+              <p className="text-sm text-yellow-800 dark:text-yellow-200 font-sans">
+                <strong>Important:</strong> The email you enter must match the
+                GitHub email address the member uses to sign in.
               </p>
             </div>
             <form onSubmit={handleInvite} className="space-y-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                   Email Address
                 </label>
                 <Input
                   {...form.register('email')}
                   type="email"
                   placeholder="member@example.com"
+                  size="lg"
                 />
                 {form.formState.errors.email && (
                   <p className="text-sm text-red-500 mt-1">

apps/hackathon/src/app/teams/[teamId]/page.tsx

@@ -1,35 +1,128 @@
-import { FC, ReactElement, useState } from 'react';
+import { FC, ReactElement, useState, useEffect } from 'react';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Link, useParams, useNavigate } from 'react-router';
-import { useTeamById, useTeamMembers, useInviteMember, useTeamJoinRequests, useRespondToJoinRequest, ETeamMemberRole, useAuthStore } from '@imphnen-frontend-service/service';
+import {
+  useTeamById,
+  useTeamMembers,
+  useInviteMember,
+  useTeamJoinRequests,
+  useRespondToJoinRequest,
+  useLeaveTeam,
+  useDeleteTeam,
+  ETeamMemberRole,
+  useAuthStore,
+} from '@imphnen-frontend-service/service';
 import { toast } from 'sonner';
+import { Icon } from '@iconify/react';
 
 const MAX_TEAM_MEMBERS = 5;
 
+// Team features deadline: 2025-11-30 23:59:00 WIB (UTC+7)
+const TEAM_FEATURES_DEADLINE = new Date('2025-11-30T16:59:00Z');
+
+// Image component with loading state
+const ImageWithLoader: FC<{
+  src: string;
+  alt: string;
+  className?: string;
+  onLoad?: () => void;
+}> = ({ src, alt, className, onLoad }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  return (
+    <div className="relative">
+      {!isLoaded && (
+        <div
+          className={`absolute inset-0 bg-gray-200 animate-pulse ${className}`}
+        />
+      )}
+      <img
+        src={src}
+        alt={alt}
+        className={`${className} ${
+          isLoaded ? 'opacity-100' : 'opacity-0'
+        } transition-opacity duration-300`}
+        onLoad={() => {
+          setIsLoaded(true);
+          onLoad?.();
+        }}
+      />
+    </div>
+  );
+};
+
 const TeamDashboardPage: FC = (): ReactElement => {
   const { teamId } = useParams<{ teamId: string }>();
   const navigate = useNavigate();
   const { session } = useAuthStore();
+
+  // Check if team features are closed
+  const isTeamFeaturesClosed = new Date() >= TEAM_FEATURES_DEADLINE;
   const [showInviteModal, setShowInviteModal] = useState(false);
   const [showJoinRequestsModal, setShowJoinRequestsModal] = useState(false);
+  const [showLeaveModal, setShowLeaveModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [deleteConfirmText, setDeleteConfirmText] = useState('');
   const [inviteEmail, setInviteEmail] = useState('');
+  const [imagesLoaded, setImagesLoaded] = useState(false);
+  const [imageLoadCount, setImageLoadCount] = useState(0);
 
-  const { data: teamData, isLoading: isLoadingTeam } = useTeamById(teamId || '');
-  const { data: membersData, isLoading: isLoadingMembers } = useTeamMembers(teamId || '');
-  const { data: joinRequestsData } = useTeamJoinRequests(teamId || '', !!teamId);
-  const { mutateAsync: inviteMember, isPending: isInviting } = useInviteMember(teamId || '');
-  const { mutateAsync: respondToJoinRequest, isPending: isResponding } = useRespondToJoinRequest(teamId || '');
+  // Calculate total images to load (banner + logo + member avatars)
+  const totalImagesToLoad = 0; // Simplified - disable image loading overlay
+
+  const handleImageLoad = () => {
+    setImageLoadCount((prev) => {
+      const newCount = prev + 1;
+      if (newCount >= totalImagesToLoad) {
+        setImagesLoaded(true);
+      }
+      return newCount;
+    });
+  };
+
+  const handleImageError = () => {
+    // Treat error as loaded to not block the UI
+    handleImageLoad();
+  };
+
+  // Set images as loaded immediately since we disabled the loading overlay
+  useEffect(() => {
+    setImagesLoaded(true);
+  }, []);
+
+  const { data: teamData, isLoading: isLoadingTeam } = useTeamById(
+    teamId || ''
+  );
+  const { data: membersData, isLoading: isLoadingMembers } = useTeamMembers(
+    teamId || ''
+  );
 
   const team = teamData?.data;
   const members = membersData?.data || [];
-  const joinRequests = joinRequestsData?.data || [];
-  const pendingJoinRequests = joinRequests.filter((req: any) => req.status === 'pending');
   const currentUserId = session?.user?.id;
-
   const isLeader = currentUserId === team?.leader_id;
-  const canInvite = isLeader && members.length < MAX_TEAM_MEMBERS;
 
-  console.log('Leader check:', { currentUserId, leaderId: team?.leader_id, isLeader });
+  // Only fetch join requests if user is the team leader
+  const { data: joinRequestsData } = useTeamJoinRequests(
+    teamId || '',
+    !!teamId && isLeader
+  );
+  const { mutateAsync: inviteMember, isPending: isInviting } = useInviteMember(
+    teamId || ''
+  );
+  const { mutateAsync: respondToJoinRequest, isPending: isResponding } =
+    useRespondToJoinRequest(teamId || '');
+  const { mutateAsync: leaveTeam, isPending: isLeaving } = useLeaveTeam();
+  const { mutateAsync: deleteTeam, isPending: isDeleting } = useDeleteTeam();
+
+  const joinRequests = joinRequestsData?.data || [];
+  const pendingJoinRequests = joinRequests.filter(
+    (req: any) => req.status === 'pending'
+  );
+  const isMember = members.some(
+    (member: any) => member.user_id === currentUserId
+  );
+  const canInvite = isLeader && members.length < MAX_TEAM_MEMBERS;
 
   const handleInviteMember = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -46,20 +139,110 @@ const TeamDashboardPage: FC = (): ReactElement => {
     }
   };
 
-  const handleRespondToJoinRequest = async (requestId: string, action: 'approve' | 'reject') => {
+  const handleRespondToJoinRequest = async (
+    requestId: string,
+    action: 'approve' | 'reject'
+  ) => {
     try {
       await respondToJoinRequest({ requestId, action });
-      toast.success(action === 'approve' ? 'Request approved!' : 'Request rejected');
+      toast.success(
+        action === 'approve' ? 'Request approved!' : 'Request rejected'
+      );
     } catch (error) {
       console.error('Failed to respond to join request:', error);
       toast.error('Failed to process request');
     }
   };
 
+  const handleLeaveTeam = async () => {
+    if (!teamId) return;
+
+    try {
+      await leaveTeam(teamId);
+      toast.success('You have left the team');
+      navigate('/dashboard');
+    } catch (error) {
+      console.error('Failed to leave team:', error);
+      toast.error('Failed to leave team');
+    }
+  };
+
+  const handleDeleteTeam = async () => {
+    if (!teamId) return;
+
+    try {
+      await deleteTeam(teamId);
+      toast.success('Team deleted successfully');
+      navigate('/dashboard');
+    } catch (error: any) {
+      console.error('Failed to delete team:', error);
+      toast.error(error?.message || 'Failed to delete team');
+    }
+  };
+
   if (isLoadingTeam || isLoadingMembers) {
     return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-gray-600">Loading team...</div>
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+        {/* Skeleton Header */}
+        <div className="bg-white dark:bg-gray-950 border-b">
+          <div className="w-full h-48 bg-gray-200 dark:bg-gray-800 animate-pulse" />
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+            <div className="flex items-start justify-between">
+              <div className="flex items-center space-x-4">
+                <div className="w-20 h-20 rounded-full bg-gray-300 dark:bg-gray-700 animate-pulse -mt-10" />
+                <div>
+                  <div className="h-8 w-48 bg-gray-300 dark:bg-gray-700 rounded animate-pulse" />
+                  <div className="h-4 w-32 bg-gray-200 dark:bg-gray-800 rounded animate-pulse mt-2" />
+                  <div className="h-4 w-24 bg-gray-200 dark:bg-gray-800 rounded animate-pulse mt-2" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="grid gap-6 lg:grid-cols-3">
+            {/* Main Content Skeleton */}
+            <div className="lg:col-span-2 space-y-6">
+              <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6">
+                <div className="h-6 w-32 bg-gray-300 dark:bg-gray-700 rounded animate-pulse mb-4" />
+                <div className="space-y-2">
+                  <div className="h-4 w-full bg-gray-200 dark:bg-gray-800 rounded animate-pulse" />
+                  <div className="h-4 w-3/4 bg-gray-200 dark:bg-gray-800 rounded animate-pulse" />
+                  <div className="h-4 w-5/6 bg-gray-200 dark:bg-gray-800 rounded animate-pulse" />
+                </div>
+              </div>
+            </div>
+
+            {/* Sidebar Skeleton */}
+            <div className="space-y-6">
+              <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6">
+                <div className="h-6 w-40 bg-gray-300 dark:bg-gray-700 rounded animate-pulse mb-4" />
+                <div className="space-y-4">
+                  {[1, 2, 3].map((i) => (
+                    <div key={i} className="flex items-center space-x-3">
+                      <div className="w-12 h-12 rounded-full bg-gray-300 dark:bg-gray-700 animate-pulse" />
+                      <div>
+                        <div className="h-4 w-24 bg-gray-300 dark:bg-gray-700 rounded animate-pulse" />
+                        <div className="h-3 w-16 bg-gray-200 dark:bg-gray-800 rounded animate-pulse mt-1" />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Loading Overlay */}
+        <div className="fixed inset-0 bg-white/60 dark:bg-black/50 flex items-center justify-center z-50">
+          <div className="text-center">
+            <div className="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
+            <p className="mt-4 text-gray-600 dark:text-white">
+              Loading team data...
+            </p>
+          </div>
+        </div>
       </div>
     );
   }
@@ -67,153 +250,282 @@ const TeamDashboardPage: FC = (): ReactElement => {
   if (!team) {
     return (
       <div className="flex flex-col items-center justify-center min-h-screen">
-        <h2 className="text-2xl font-bold text-gray-900 mb-4">Team not found</h2>
-        <Button onClick={() => navigate('/dashboard')}>Back to Dashboard</Button>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          Team not found
+        </h2>
+        <Button onClick={() => navigate('/dashboard')}>
+          Back to Dashboard
+        </Button>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 relative dark:bg-gray-950">
+      {/* Loading overlay while images are loading */}
+      {!imagesLoaded && totalImagesToLoad > 0 && (
+        <div className="fixed inset-0 bg-white/80 flex items-center justify-center z-50">
+          <div className="text-center">
+            <div className="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
+            <p className="mt-4 text-gray-600 font-medium">Loading images...</p>
+            <p className="text-sm text-gray-400 mt-1">
+              {imageLoadCount} / {totalImagesToLoad}
+            </p>
+          </div>
+        </div>
+      )}
+
       {/* Header with Banner */}
-      <div className="bg-white border-b">
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
         {team.banner && (
-          <div className="w-full h-48 overflow-hidden">
+          <div className="relative w-full aspect-3/1 overflow-hidden">
+            <div
+              className={`absolute inset-0 bg-gray-200 animate-pulse ${
+                imagesLoaded ? 'hidden' : ''
+              }`}
+            />
             <img
               src={team.banner}
               alt={team.name}
-              className="w-full h-full object-cover"
+              className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${
+                imagesLoaded ? 'opacity-100' : 'opacity-0'
+              }`}
+              onLoad={handleImageLoad}
+              onError={handleImageError}
             />
+            <div className="pointer-events-none absolute inset-0 bg-linear-to-b from-transparent via-black/20 to-black/60" />
           </div>
         )}
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-6">
           <div className="flex items-start justify-between">
-            <div className="flex items-center space-x-4">
+            <div className="flex items-center space-x-3 md:space-x-4">
               {team.logo && (
+                <div className="relative shrink-0">
+                  {!imagesLoaded && (
+                    <div className="absolute inset-0 w-20 h-20 rounded-full bg-gray-300 dark:bg-gray-700 animate-pulse -mt-10" />
+                  )}
                   <img
                     src={team.logo}
                     alt={team.name}
-                  className="w-20 h-20 rounded-full object-cover border-4 border-white shadow-lg -mt-10"
+                    className={`w-16 h-16 md:w-20 md:h-20 rounded-full object-cover border-4 border-white shadow-lg -mt-8 md:-mt-10 transition-opacity duration-300 shrink-0 ${
+                      imagesLoaded ? 'opacity-100' : 'opacity-0'
+                    }`}
+                    onLoad={handleImageLoad}
+                    onError={handleImageError}
                   />
+                </div>
               )}
               <div>
-                <h1 className="text-3xl font-bold text-gray-900">{team.name}</h1>
-                <p className="text-gray-600 mt-1">📍 {team.city}</p>
-                <div className="flex items-center space-x-4 mt-2">
-                  <span className="text-sm text-gray-500">
-                    {members.length} {members.length === 1 ? 'Member' : 'Members'}
+                <h1 className="text-xl md:text-3xl font-bold text-gray-900 dark:text-white line-clamp-2">
+                  {team.name}
+                </h1>
+                <p className="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-1 line-clamp-1 font-sans flex items-center">
+                  <Icon icon="mdi:map-marker" className="inline-block mr-1" />
+                  <span>{team.city}</span>
+                </p>
+                <div className="flex flex-wrap items-center gap-2 md:space-x-4 mt-2">
+                  <span className="text-sm text-gray-500 dark:text-gray-400 flex items-center">
+                    <Icon
+                      icon="mdi:account-multiple"
+                      className="inline-block mr-1"
+                    />
+                    {members.length}{' '}
+                    {members.length === 1 ? 'Member' : 'Members'}
                   </span>
-                  <span className="text-sm text-gray-500">
-                    {team.visibility === 'public' ? '🌐 Public' : '🔒 Private'}
+                  <span className="text-sm text-gray-500 dark:text-gray-400 flex items-center">
+                    <Icon
+                      icon={
+                        team.visibility === 'public' ? 'mdi:web' : 'mdi:lock'
+                      }
+                      className="inline-block mr-1"
+                    />
+                    {team.visibility === 'public' ? 'Public' : 'Private'}
                   </span>
                   {isLeader && (
-                    <span className="px-3 py-1 bg-blue-600 text-white rounded-md text-sm font-semibold shadow-sm">
-                      👑 Team Leader
+                    <span className="hidden md:inline-flex px-3 py-1 bg-blue-600 text-white rounded-md text-sm font-semibold shadow-sm items-center">
+                      <Icon icon="mdi:crown" className="inline-block mr-1" />
+                      <span>Team Leader</span>
                     </span>
                   )}
                 </div>
               </div>
             </div>
-            <Link to="/dashboard">
-              <Button variant="secondary">Back to Dashboard</Button>
-            </Link>
           </div>
         </div>
       </div>
 
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="grid gap-6 lg:grid-cols-3">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8">
+        <div className="grid gap-4 md:gap-6 xl:grid-cols-3">
           {/* Main Content */}
-          <div className="lg:col-span-2 space-y-6">
+          <div className="lg:col-span-2 space-y-4 md:space-y-6">
             {/* Team Description */}
-            <div className="bg-white rounded-lg shadow-md p-6">
-              <h2 className="text-xl font-bold text-gray-900 mb-4">About Team</h2>
-              <p className="text-gray-700 whitespace-pre-wrap">{team.description}</p>
+            <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
+              <h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
+                About Team
+              </h2>
+              <p className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap break-all font-sans">
+                {team.description}
+              </p>
             </div>
 
             {/* Team Actions - Only for Leader */}
             {isLeader && (
-              <div className="bg-white rounded-lg shadow-md p-6">
-                <h2 className="text-xl font-bold text-gray-900 mb-4">Team Management</h2>
+              <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
+                <h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
+                  Team Management
+                </h2>
                 <div className="grid gap-3 sm:grid-cols-2">
+                  {/* Hide invite/join management after submission or deadline */}
+                  {!team.has_submission && !isTeamFeaturesClosed && (
+                    <>
                       <Button
                         className="w-full"
                         variant="secondary"
                         onClick={() => setShowInviteModal(true)}
                         disabled={!canInvite}
                       >
-                    ➕ Invite Member {!canInvite && `(${members.length}/${MAX_TEAM_MEMBERS})`}
+                        <Icon icon="mdi:plus" className="inline-block mr-2" />
+                        Invite Member{' '}
+                        {!canInvite && `(${members.length}/${MAX_TEAM_MEMBERS})`}
                       </Button>
                       <Button
                         className="w-full relative"
                         variant="secondary"
                         onClick={() => setShowJoinRequestsModal(true)}
                       >
-                    📩 Join Requests
+                        <Icon icon="mdi:email" className="inline-block mr-2" /> Join
+                        Requests
                         {pendingJoinRequests.length > 0 && (
                           <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center">
                             {pendingJoinRequests.length}
                           </span>
                         )}
                       </Button>
+                    </>
+                  )}
+                  {!team.has_submission && !isTeamFeaturesClosed && (
                     <Link to={`/teams/${teamId}/edit`}>
                       <Button className="w-full" variant="secondary">
-                      ✏️ Edit Team Info
+                        <Icon icon="mdi:pencil" className="inline-block mr-2" />
+                        Edit Team Info
                       </Button>
                     </Link>
+                  )}
                   <Link to={`/teams/${teamId}/members`}>
                     <Button className="w-full" variant="secondary">
-                      👥 Manage Members
+                      <Icon
+                        icon="mdi:account-group"
+                        className="inline-block mr-2"
+                      />
+                      View Members
                     </Button>
                   </Link>
                   <Link to={`/teams/${teamId}/chat`}>
                     <Button className="w-full" variant="secondary">
-                      💬 Team Chat
+                      <Icon icon="mdi:chat" className="inline-block mr-2" />
+                      Team Chat
                     </Button>
                   </Link>
+                  {team.has_submission ? (
+                    <Link to={`/teams/${teamId}/submission`}>
+                      <Button className="w-full" variant="secondary">
+                        <Icon icon="mdi:file-document" className="inline-block mr-2" />
+                        View Submission
+                      </Button>
+                    </Link>
+                  ) : (
                     <Link to={`/teams/${teamId}/submit`}>
-                    <Button className="w-full">
-                      🚀 Submit Project
+                      <Button className="w-full" disabled={members.length < 2}>
+                        <Icon icon="mdi:rocket" className="inline-block mr-2" />
+                        Submit Project
                       </Button>
                     </Link>
+                  )}
                 </div>
-                {!canInvite && members.length >= MAX_TEAM_MEMBERS && (
-                  <p className="text-sm text-gray-600 mt-3 text-center">
+                {!team.has_submission && !canInvite && members.length >= MAX_TEAM_MEMBERS && (
+                  <p className="text-sm text-gray-600 dark:text-gray-400 mt-3 text-center">
                     Maximum team size reached ({MAX_TEAM_MEMBERS} members)
                   </p>
                 )}
+                {/* Danger Zone - Only show when leader is alone, no submission, and features not closed */}
+                {members.length === 1 && !team.has_submission && !isTeamFeaturesClosed && (
+                  <div className="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
+                    <h3 className="text-sm font-medium text-red-600 dark:text-red-400 mb-3">
+                      Danger Zone
+                    </h3>
+                    <Button
+                      className="w-full bg-red-600 hover:bg-red-700 text-white"
+                      onClick={() => setShowDeleteModal(true)}
+                    >
+                      <Icon icon="mdi:delete" className="inline-block mr-2" />
+                      Delete Team
+                    </Button>
+                  </div>
+                )}
               </div>
             )}
 
-            {/* Quick Actions for Members */}
-            {!isLeader && (
-              <div className="bg-white rounded-lg shadow-md p-6">
-                <h2 className="text-xl font-bold text-gray-900 mb-4">Quick Actions</h2>
+            {/* Quick Actions for Members (non-leaders) */}
+            {!isLeader && isMember && (
+              <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
+                <h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
+                  Quick Actions
+                </h2>
                 <div className="grid gap-3 sm:grid-cols-2">
                   <Link to={`/teams/${teamId}/chat`}>
                     <Button className="w-full" variant="secondary">
-                      💬 Team Chat
+                      <Icon icon="mdi:chat" className="inline-block mr-2" />
+                      Team Chat
                     </Button>
                   </Link>
                   {team.has_submission && (
                     <Link to={`/teams/${teamId}/submission`}>
                       <Button className="w-full" variant="secondary">
-                        📄 View Submission
+                        <Icon icon="mdi:file-document" className="inline-block mr-2" />
+                        View Submission
                       </Button>
                     </Link>
                   )}
+                  {!team.has_submission && !isTeamFeaturesClosed && (
+                    <Button
+                      className="w-full bg-red-600 hover:bg-red-700 text-white"
+                      onClick={() => setShowLeaveModal(true)}
+                    >
+                      <Icon icon="mdi:exit-run" className="inline-block mr-2" />
+                      Leave Team
+                    </Button>
+                  )}
                 </div>
               </div>
             )}
 
-            {/* Submission Status */}
-            {team.has_submission && (
-              <div className="bg-green-50 border border-green-200 rounded-lg p-6">
+            {/* Warning for single member teams */}
+            {members.length === 1 && !team.has_submission && isMember && (
+              <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4 md:p-6">
+                <div className="flex items-center space-x-3">
+                  <span className="text-3xl">⚠️</span>
+                  <div>
+                    <h3 className="font-bold text-amber-900 dark:text-amber-400">
+                      Team Needs More Members
+                    </h3>
+                    <p className="text-amber-700 dark:text-amber-300 text-sm">
+                      Your team needs at least 2 members to submit a project. Invite someone or wait for join requests!
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Submission Status - Only show to members */}
+            {team.has_submission && isMember && (
+              <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 md:p-6">
                 <div className="flex items-center space-x-3">
                   <span className="text-3xl">✅</span>
                   <div>
-                    <h3 className="font-bold text-green-900">Project Submitted</h3>
-                    <p className="text-green-700 text-sm">
+                    <h3 className="font-bold text-green-900 dark:text-green-400">
+                      Project Submitted
+                    </h3>
+                    <p className="text-green-700 dark:text-green-300 text-sm">
                       Your team has successfully submitted a project
                     </p>
                   </div>
@@ -228,12 +540,17 @@ const TeamDashboardPage: FC = (): ReactElement => {
           </div>
 
           {/* Sidebar */}
-          <div className="space-y-6">
+          <div className="space-y-4 md:space-y-6">
             {/* Team Leader */}
-            <div className="bg-white rounded-lg shadow-md p-6">
-              <h3 className="font-bold text-gray-900 mb-4">Team Leader</h3>
+            <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
+              <h3 className="text-base md:text-lg font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
+                Team Leader
+              </h3>
               {team.leader && (
-                <div className="flex items-center space-x-3">
+                <button
+                  onClick={() => navigate(`/users/${team.leader.id}`)}
+                  className="w-full flex items-center space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2 transition-colors text-left cursor-pointer"
+                >
                   {team.leader.avatar ? (
                     <img
                       src={team.leader.avatar}
@@ -241,46 +558,62 @@ const TeamDashboardPage: FC = (): ReactElement => {
                       className="w-12 h-12 rounded-full object-cover"
                     />
                   ) : (
-                    <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center">
-                      <span className="text-gray-500">👤</span>
+                    <div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                      <span className="text-gray-500 dark:text-gray-400">
+                        👤
+                      </span>
                     </div>
                   )}
                   <div>
-                    <p className="font-medium text-gray-900">{team.leader.fullname}</p>
-                    <p className="text-sm text-gray-600">{team.leader.email}</p>
-                  </div>
+                    <p className="font-medium text-gray-900 dark:text-white">
+                      {team.leader.fullname}
+                    </p>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      {team.leader.email}
+                    </p>
                   </div>
+                </button>
               )}
             </div>
 
             {/* Team Members */}
-            <div className="bg-white rounded-lg shadow-md p-6">
-              <h3 className="font-bold text-gray-900 mb-4">
+            <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
+              <h3 className="text-base md:text-lg font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
                 Members ({members.length})
               </h3>
               <div className="space-y-3">
-                {members.map((member) => (
-                  <div key={member.id} className="flex items-center space-x-3">
-                    {member.user.avatar ? (
+                {members.map((member: any) => (
+                  <button
+                    key={member.id}
+                    onClick={() => navigate(`/users/${member.user.id}`)}
+                    className="w-full flex items-center space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2 transition-colors text-left cursor-pointer"
+                  >
+                    {member.user?.avatar ? (
                       <img
                         src={member.user.avatar}
-                        alt={member.user.fullname}
+                        alt={member.user.fullname || 'Member'}
                         className="w-10 h-10 rounded-full object-cover"
+                        onLoad={handleImageLoad}
+                        onError={handleImageError}
                       />
                     ) : (
-                      <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
-                        <span className="text-gray-500 text-sm">👤</span>
+                      <div className="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                        <span className="text-gray-500 dark:text-gray-400 text-sm">
+                          👤
+                        </span>
                       </div>
                     )}
                     <div className="flex-1 min-w-0">
-                      <p className="font-medium text-gray-900 truncate">
-                        {member.user.fullname}
+                      <p className="font-medium text-gray-900 dark:text-white truncate">
+                        {member.user?.fullname || 'Unknown'}
                       </p>
-                      <p className="text-xs text-gray-500">
-                        {member.role === ETeamMemberRole.LEADER ? 'Leader' : 'Member'}
+                      <p className="text-xs text-gray-500 dark:text-gray-400">
+                        {member.role === ETeamMemberRole.LEADER
+                          ? 'Leader'
+                          : 'Member'}
                       </p>
                     </div>
-                  </div>
+                  </button>
                 ))}
               </div>
             </div>
@@ -290,22 +623,27 @@ const TeamDashboardPage: FC = (): ReactElement => {
 
       {/* Invite Member Modal */}
       {showInviteModal && (
-        <div className="fixed inset-0 bg-black/20 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">
+        <div className="fixed inset-0 bg-black/20 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-md w-full p-6">
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
               Invite Team Member
             </h2>
-            <p className="text-gray-600 mb-4">
-              Send an invitation to join your team. The invited member will see the invitation on their dashboard after logging in.
+            <p className="text-gray-600 dark:text-gray-400 mb-4 font-sans">
+              Send an invitation to join your team. The invited member will see
+              the invitation on their dashboard after logging in.
             </p>
-            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mb-6">
-              <p className="text-sm text-yellow-800">
-                <strong>Important:</strong> The email you enter must match the GitHub email address the member uses to sign in.
+            <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3 mb-6">
+              <p className="text-sm text-yellow-800 dark:text-yellow-300 font-sans">
+                <strong>Important:</strong> The email you enter must match the
+                GitHub email address the member uses to sign in.
               </p>
             </div>
             <form onSubmit={handleInviteMember} className="space-y-4">
               <div>
-                <label htmlFor="invite-email" className="block text-sm font-medium text-gray-700 mb-2">
+                <label
+                  htmlFor="invite-email"
+                  className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+                >
                   Email Address
                 </label>
                 <input
@@ -314,10 +652,10 @@ const TeamDashboardPage: FC = (): ReactElement => {
                   value={inviteEmail}
                   onChange={(e) => setInviteEmail(e.target.value)}
                   placeholder="Enter email address..."
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500"
                   required
                 />
-                <p className="text-sm text-gray-500 mt-1">
+                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
                   Current members: {members.length}/{MAX_TEAM_MEMBERS}
                 </p>
               </div>
@@ -348,15 +686,15 @@ const TeamDashboardPage: FC = (): ReactElement => {
 
       {/* Join Requests Modal */}
       {showJoinRequestsModal && (
-        <div className="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full p-6 max-h-[80vh] overflow-y-auto">
+        <div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-2xl w-full p-6 max-h-[80vh] overflow-y-auto">
             <div className="flex items-center justify-between mb-6">
-              <h2 className="text-2xl font-bold text-gray-900">
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
                 Join Requests ({pendingJoinRequests.length})
               </h2>
               <button
                 onClick={() => setShowJoinRequestsModal(false)}
-                className="text-gray-400 hover:text-gray-600 text-2xl"
+                className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 text-2xl cursor-pointer"
               >
                 ✕
               </button>
@@ -364,15 +702,20 @@ const TeamDashboardPage: FC = (): ReactElement => {
 
             {pendingJoinRequests.length === 0 ? (
               <div className="text-center py-12">
-                <p className="text-gray-600 text-lg">No pending join requests</p>
-                <p className="text-gray-500 text-sm mt-2">
+                <p className="text-gray-600 dark:text-gray-400 text-lg">
+                  No pending join requests
+                </p>
+                <p className="text-gray-500 dark:text-gray-500 text-sm mt-2 font-sans">
                   When users request to join your team, they'll appear here
                 </p>
               </div>
             ) : (
               <div className="space-y-4">
                 {pendingJoinRequests.map((request: any) => (
-                  <div key={request.id} className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
+                  <div
+                    key={request.id}
+                    className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-shadow"
+                  >
                     <div className="flex items-start justify-between">
                       <div className="flex items-start space-x-3 flex-1">
                         {request.user?.avatar ? (
@@ -382,51 +725,67 @@ const TeamDashboardPage: FC = (): ReactElement => {
                             className="w-12 h-12 rounded-full object-cover"
                           />
                         ) : (
-                          <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center shrink-0">
-                            <span className="text-gray-500 text-xl">👤</span>
+                          <div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shrink-0">
+                            <span className="text-gray-500 dark:text-gray-400 text-xl">
+                              <Icon
+                                icon="mdi:account-circle"
+                                className="text-3xl"
+                              />
+                            </span>
                           </div>
                         )}
                         <div className="flex-1">
-                          <p className="font-semibold text-gray-900">
+                          <p className="font-semibold text-gray-900 dark:text-white">
                             {request.user?.fullname || 'Unknown User'}
                           </p>
-                          <p className="text-sm text-gray-600">
+                          <p className="text-sm text-gray-600 dark:text-gray-400">
                             {request.user?.email}
                           </p>
                           {request.message && (
-                            <div className="mt-2 bg-gray-50 rounded-lg p-3">
-                              <p className="text-sm text-gray-700">
+                            <div className="mt-2 bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
+                              <p className="text-sm text-gray-700 dark:text-gray-300">
                                 <strong>Message:</strong> {request.message}
                               </p>
                             </div>
                           )}
-                          <p className="text-xs text-gray-500 mt-2">
-                            Requested {new Date(request.created_at).toLocaleDateString()}
+                          <p className="text-sm text-gray-500 dark:text-gray-500 mt-2 font-sans">
+                            Requested{' '}
+                            {new Date(request.created_at).toLocaleDateString()}
                           </p>
                         </div>
                       </div>
-                      <div className="flex space-x-2 ml-4">
+                    </div>
+
+                    <div className="flex space-x-2 mt-4 justify-end">
                       <Button
-                          onClick={() => handleRespondToJoinRequest(request.id, 'approve')}
-                          disabled={isResponding || members.length >= MAX_TEAM_MEMBERS}
+                        onClick={() =>
+                          handleRespondToJoinRequest(request.id, 'approve')
+                        }
+                        disabled={
+                          isResponding || members.length >= MAX_TEAM_MEMBERS
+                        }
                         className="px-4 py-2 text-sm"
                       >
-                          ✓ Accept
+                        Accept
                       </Button>
                       <Button
-                          onClick={() => handleRespondToJoinRequest(request.id, 'reject')}
+                        onClick={() =>
+                          handleRespondToJoinRequest(request.id, 'reject')
+                        }
                         disabled={isResponding}
                         variant="secondary"
                         className="px-4 py-2 text-sm"
                       >
-                          ✕ Reject
+                        Reject
                       </Button>
                     </div>
-                    </div>
+
                     {members.length >= MAX_TEAM_MEMBERS && (
-                      <div className="mt-3 bg-yellow-50 border border-yellow-200 rounded-lg p-2">
-                        <p className="text-xs text-yellow-800">
-                          Team is full ({MAX_TEAM_MEMBERS}/{MAX_TEAM_MEMBERS} members). Remove a member before accepting new requests.
+                      <div className="mt-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3">
+                        <p className="text-sm text-yellow-800 dark:text-yellow-300 font-sans">
+                          Team is full ({MAX_TEAM_MEMBERS}/{MAX_TEAM_MEMBERS}{' '}
+                          members). Remove a member before accepting new
+                          requests.
                         </p>
                       </div>
                     )}
@@ -437,6 +796,110 @@ const TeamDashboardPage: FC = (): ReactElement => {
           </div>
         </div>
       )}
+
+      {/* Leave Team Confirmation Modal */}
+      {showLeaveModal && (
+        <div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-md w-full p-6">
+            <div className="text-center mb-6">
+              <div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-4">
+                <Icon
+                  icon="mdi:exit-run"
+                  className="text-3xl text-red-600 dark:text-red-400"
+                />
+              </div>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                Leave Team?
+              </h2>
+              <p className="text-gray-600 dark:text-gray-400">
+                Are you sure you want to leave <strong>{team?.name}</strong>?
+              </p>
+            </div>
+            <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4 mb-6">
+              <p className="text-sm text-amber-800 dark:text-amber-300 font-sans">
+                <strong>Warning:</strong> If you leave, you will need to request to join again or be re-invited by the team leader.
+              </p>
+            </div>
+            <div className="flex space-x-3">
+              <Button
+                type="button"
+                variant="secondary"
+                className="flex-1"
+                onClick={() => setShowLeaveModal(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleLeaveTeam}
+                className="flex-1 bg-red-600 hover:bg-red-700"
+                disabled={isLeaving}
+              >
+                {isLeaving ? 'Leaving...' : 'Leave Team'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Delete Team Confirmation Modal */}
+      {showDeleteModal && (
+        <div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-md w-full p-6">
+            <div className="text-center mb-6">
+              <div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-4">
+                <Icon
+                  icon="mdi:delete-alert"
+                  className="text-3xl text-red-600 dark:text-red-400"
+                />
+              </div>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                Delete Team?
+              </h2>
+              <p className="text-gray-600 dark:text-gray-400">
+                This action is <strong className="text-red-600 dark:text-red-400">permanent</strong> and cannot be undone.
+              </p>
+            </div>
+            <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
+              <p className="text-sm text-red-800 dark:text-red-300 font-sans">
+                <strong>Warning:</strong> All team data, chat messages, and submissions will be permanently deleted.
+              </p>
+            </div>
+            <div className="mb-6">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Type <span className="font-bold text-red-600 dark:text-red-400">{team?.name}</span> to confirm:
+              </label>
+              <input
+                type="text"
+                value={deleteConfirmText}
+                onChange={(e) => setDeleteConfirmText(e.target.value)}
+                placeholder="Type team name here"
+                className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500"
+                autoComplete="off"
+              />
+            </div>
+            <div className="flex space-x-3">
+              <Button
+                type="button"
+                variant="secondary"
+                className="flex-1"
+                onClick={() => {
+                  setShowDeleteModal(false);
+                  setDeleteConfirmText('');
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleDeleteTeam}
+                className="flex-1 bg-red-600 hover:bg-red-700"
+                disabled={isDeleting || deleteConfirmText !== team?.name}
+              >
+                {isDeleting ? 'Deleting...' : 'Delete Team'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

apps/hackathon/src/app/teams/[teamId]/submission/page.tsx

@@ -2,6 +2,7 @@ import { FC, ReactElement } from 'react';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { useNavigate, useParams } from 'react-router';
 import { useTeamById, useTeamSubmission } from '@imphnen-frontend-service/service';
+import { encodeCertificateId } from '../../../../utils/certificate';
 
 const SubmissionViewPage: FC = (): ReactElement => {
   const { teamId } = useParams<{ teamId: string }>();
@@ -15,18 +16,18 @@ const SubmissionViewPage: FC = (): ReactElement => {
 
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-gray-600">Loading submission...</div>
+      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-gray-600 dark:text-gray-400">Loading submission...</div>
       </div>
     );
   }
 
   if (!submission) {
     return (
-      <div className="flex flex-col items-center justify-center min-h-screen">
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
         <div className="text-6xl mb-4">📄</div>
-        <h2 className="text-2xl font-bold text-gray-900 mb-4">No Submission Yet</h2>
-        <p className="text-gray-600 mb-4">Your team hasn't submitted a project</p>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">No Submission Yet</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-4">Your team hasn't submitted a project</p>
         <Button onClick={() => navigate(`/teams/${teamId}`)}>Back to Team</Button>
       </div>
     );
@@ -43,13 +44,13 @@ const SubmissionViewPage: FC = (): ReactElement => {
     : 'Not submitted';
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="bg-white border-b">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
           <div className="flex items-center justify-between">
             <div>
-              <h1 className="text-3xl font-bold text-gray-900">Project Submission</h1>
-              <p className="text-gray-600 mt-1">{team?.name}</p>
+              <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Project Submission</h1>
+              <p className="text-gray-600 dark:text-gray-400 mt-1">{team?.name}</p>
             </div>
             <Button variant="secondary" onClick={() => navigate(`/teams/${teamId}`)}>
               Back to Team
@@ -60,24 +61,78 @@ 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 border border-green-500 rounded-lg p-6 mb-6">
+        {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 text-lg">Project Submitted Successfully</h3>
-              <p className="text-green-700 text-sm">
+                <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 text-xs mt-1">
+                <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>
+        ) : 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 rounded-lg shadow-md overflow-hidden">
+        {/* Certificate Banner - Only show when submission is submitted */}
+        {submission.status === 'submitted' && (
+          <div className="bg-amber-50 dark:bg-amber-900/20 border-2 border-amber-400 dark:border-amber-500 rounded-lg p-6 mb-6">
+            <div className="flex items-center justify-between flex-wrap gap-4">
+              <div className="flex items-center space-x-3 flex-1 min-w-0">
+                <span className="text-4xl shrink-0">🏆</span>
+                <div className="min-w-0">
+                  <h3 className="font-bold text-amber-900 dark:text-amber-100 text-lg">
+                    View Your Certificate
+                  </h3>
+                  <p className="text-amber-700 dark:text-amber-300 text-sm">
+                    Congratulations! Your certificate is ready to download and share.
+                  </p>
+                </div>
+              </div>
+              <button
+                onClick={async () => {
+                  const certId = await encodeCertificateId(teamId || '', submission.id);
+                  navigate(`/certificate/${encodeURIComponent(certId)}`);
+                }}
+                className="shrink-0 px-6 py-2 bg-amber-600 hover:bg-amber-700 dark:bg-amber-600 dark:hover:bg-amber-700 text-white font-medium rounded-lg transition-colors"
+              >
+                Get Certificate
+              </button>
+            </div>
+          </div>
+        )}
+
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 overflow-hidden">
           {/* Project Header */}
-          <div className="bg-gradient-to-r from-blue-600 to-blue-800 text-white p-8">
+          <div className="bg-linear-to-r from-blue-600 to-blue-800 text-white p-8">
             <h2 className="text-3xl font-bold mb-2">{submission.project_name}</h2>
             <p className="text-blue-100">Team: {team?.name}</p>
           </div>
@@ -86,9 +141,9 @@ const SubmissionViewPage: FC = (): ReactElement => {
           <div className="p-8 space-y-6">
             {/* Description */}
             <div>
-              <h3 className="text-lg font-bold text-gray-900 mb-3">Project Description</h3>
-              <div className="bg-gray-50 rounded-lg p-4">
-                <p className="text-gray-700 whitespace-pre-wrap">{submission.description}</p>
+              <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">Project Description</h3>
+              <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
+                <p className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{submission.description}</p>
               </div>
             </div>
 
@@ -96,12 +151,12 @@ const SubmissionViewPage: FC = (): ReactElement => {
             <div className="grid gap-6 md:grid-cols-2">
               {/* Repository */}
               <div>
-                <h3 className="text-lg font-bold text-gray-900 mb-3">Repository</h3>
+                <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">Repository</h3>
                 <a
                   href={submission.repository_url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="flex items-center space-x-2 text-blue-600 hover:text-blue-800"
+                  className="flex items-center space-x-2 text-blue-600 dark:text-primary-400 hover:text-blue-800 dark:hover:text-primary-300"
                 >
                   <span>🔗</span>
                   <span className="break-all">{submission.repository_url}</span>
@@ -111,12 +166,12 @@ const SubmissionViewPage: FC = (): ReactElement => {
               {/* Demo URL */}
               {submission.demo_url && (
                 <div>
-                  <h3 className="text-lg font-bold text-gray-900 mb-3">Live Demo</h3>
+                  <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">Live Demo</h3>
                   <a
                     href={submission.demo_url}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="flex items-center space-x-2 text-blue-600 hover:text-blue-800"
+                    className="flex items-center space-x-2 text-blue-600 dark:text-primary-400 hover:text-blue-800 dark:hover:text-primary-300"
                   >
                     <span>🌐</span>
                     <span className="break-all">{submission.demo_url}</span>
@@ -124,27 +179,12 @@ const SubmissionViewPage: FC = (): ReactElement => {
                 </div>
               )}
 
-              {/* Presentation URL */}
-              {submission.presentation_url && (
-                <div>
-                  <h3 className="text-lg font-bold text-gray-900 mb-3">Presentation</h3>
-                  <a
-                    href={submission.presentation_url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex items-center space-x-2 text-blue-600 hover:text-blue-800"
-                  >
-                    <span>📊</span>
-                    <span className="break-all">{submission.presentation_url}</span>
-                  </a>
-                </div>
-              )}
             </div>
 
             {/* Screenshots */}
             {submission.screenshots && submission.screenshots.length > 0 && (
               <div>
-                <h3 className="text-lg font-bold text-gray-900 mb-3">
+                <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">
                   Screenshots ({submission.screenshots.length})
                 </h3>
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -159,7 +199,7 @@ const SubmissionViewPage: FC = (): ReactElement => {
                       <img
                         src={url}
                         alt={`Screenshot ${index + 1}`}
-                        className="w-full h-48 object-cover rounded-lg border-2 border-gray-200 hover:border-blue-500 transition-colors cursor-pointer"
+                        className="w-full h-48 object-cover rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-primary-500 transition-colors cursor-pointer"
                       />
                     </a>
                   ))}
@@ -168,22 +208,32 @@ const SubmissionViewPage: FC = (): ReactElement => {
             )}
 
             {/* Submission Info */}
-            <div className="bg-gray-50 rounded-lg p-4 border-t-4 border-blue-600">
-              <h3 className="text-sm font-bold text-gray-900 mb-2">Submission Information</h3>
+            <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border-t-4 border-blue-600 dark:border-primary-500">
+              <h3 className="text-sm font-bold text-gray-900 dark:text-white mb-2">Submission Information</h3>
               <div className="grid gap-2 text-sm">
                 <div className="flex justify-between">
-                  <span className="text-gray-600">Status:</span>
-                  <span className="font-medium text-green-600">
-                    {submission.status === 'submitted' ? '✓ Submitted' : 'Draft'}
+                  <span className="text-gray-600 dark:text-gray-400">Status:</span>
+                  <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">
-                  <span className="text-gray-600">Submitted:</span>
-                  <span className="font-medium text-gray-900">{submittedDate}</span>
+                  <span className="text-gray-600 dark:text-gray-400">Submitted:</span>
+                  <span className="font-medium text-gray-900 dark:text-white">{submittedDate}</span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-gray-600">Submission ID:</span>
-                  <span className="font-medium text-gray-900 font-mono text-xs">
+                  <span className="text-gray-600 dark:text-gray-400">Submission ID:</span>
+                  <span className="font-medium text-gray-900 dark:text-white font-mono text-xs">
                     {submission.id}
                   </span>
                 </div>
@@ -191,8 +241,8 @@ const SubmissionViewPage: FC = (): ReactElement => {
             </div>
 
             {/* Read-only Notice */}
-            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
-              <p className="text-sm text-yellow-800">
+            <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
+              <p className="text-sm text-yellow-800 dark:text-yellow-200">
                 <strong>Note:</strong> This submission is now locked and cannot be edited or deleted.
                 If you need to make changes, please contact the hackathon organizers.
               </p>

apps/hackathon/src/app/teams/[teamId]/submit/page.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactElement, useState } from 'react';
+import { FC, ReactElement, useState, useEffect } from 'react';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
 import { useNavigate, useParams } from 'react-router';
@@ -13,23 +13,71 @@ import {
   useAuthStore,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from 'sonner';
+import { Icon } from '@iconify/react';
+
+const MIN_TEAM_MEMBERS = 2; // Minimum members required to submit (including leader)
+const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
+
+// Submission deadline: 2025-12-07 23:59:00 WIB (UTC+7)
+const SUBMISSION_DEADLINE = new Date('2025-12-07T16:59:00Z');
 
 const SubmitProjectPage: FC = (): ReactElement => {
   const { teamId } = useParams<{ teamId: string }>();
   const navigate = useNavigate();
   const { session } = useAuthStore();
   const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const [confirmText, setConfirmText] = useState('');
   const [screenshots, setScreenshots] = useState<string[]>([]);
+  const [timeLeft, setTimeLeft] = useState<{
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+  } | null>(null);
+
+  // Check if deadline passed
+  const isDeadlinePassed = new Date() >= SUBMISSION_DEADLINE;
+
+  // Countdown timer
+  useEffect(() => {
+    if (isDeadlinePassed) return;
+
+    const calculateTimeLeft = () => {
+      const now = new Date();
+      const difference = SUBMISSION_DEADLINE.getTime() - now.getTime();
+
+      if (difference <= 0) {
+        setTimeLeft(null);
+        return;
+      }
+
+      const days = Math.floor(difference / (1000 * 60 * 60 * 24));
+      const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
+      const minutes = Math.floor((difference / 1000 / 60) % 60);
+      const seconds = Math.floor((difference / 1000) % 60);
+
+      setTimeLeft({ days, hours, minutes, seconds });
+    };
+
+    calculateTimeLeft();
+    const timer = setInterval(calculateTimeLeft, 1000);
+
+    return () => clearInterval(timer);
+  }, [isDeadlinePassed]);
 
   const { data: teamData } = useTeamById(teamId || '');
   const { data: submissionData } = useTeamSubmission(teamId || '', !!teamId);
-  const { mutateAsync: submitProject, isPending: isSubmitting } = useSubmitProject(teamId || '');
+  const { mutateAsync: submitProject, isPending: isSubmitting } =
+    useSubmitProject(teamId || '');
   const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
 
   const team = teamData?.data;
   const currentUserId = session?.user?.id;
   const isLeader = currentUserId === team?.leader_id;
   const hasSubmission = !!submissionData?.data;
+  const memberCount = team?.members?.length || 0;
+  const hasEnoughMembers = memberCount >= MIN_TEAM_MEMBERS;
 
   const form = useForm<TProjectSubmissionForm>({
     resolver: zodResolver(projectSubmissionSchema),
@@ -38,25 +86,38 @@ const SubmitProjectPage: FC = (): ReactElement => {
 
   if (!isLeader) {
     return (
-      <div className="flex flex-col items-center justify-center min-h-screen">
-        <h2 className="text-2xl font-bold text-gray-900 mb-4">Access Denied</h2>
-        <p className="text-gray-600 mb-4">Only the team leader can submit projects</p>
-        <Button onClick={() => navigate(`/teams/${teamId}`)}>Back to Team</Button>
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          Access Denied
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-4">
+          Only the team leader can submit projects
+        </p>
+        <Button onClick={() => navigate(`/teams/${teamId}`)}>
+          Back to Team
+        </Button>
       </div>
     );
   }
 
   if (hasSubmission) {
     return (
-      <div className="flex flex-col items-center justify-center min-h-screen">
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
         <div className="text-6xl mb-4">✅</div>
-        <h2 className="text-2xl font-bold text-gray-900 mb-4">Project Already Submitted</h2>
-        <p className="text-gray-600 mb-4">Your team has already submitted a project</p>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          Project Already Submitted
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-4">
+          Your team has already submitted a project
+        </p>
         <div className="flex space-x-3">
           <Button onClick={() => navigate(`/teams/${teamId}/submission`)}>
             View Submission
           </Button>
-          <Button variant="secondary" onClick={() => navigate(`/teams/${teamId}`)}>
+          <Button
+            variant="secondary"
+            onClick={() => navigate(`/teams/${teamId}`)}
+          >
             Back to Team
           </Button>
         </div>
@@ -64,17 +125,72 @@ const SubmitProjectPage: FC = (): ReactElement => {
     );
   }
 
-  const handleScreenshotUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+  // Show deadline passed screen
+  if (isDeadlinePassed) {
+    return (
+      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+        <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 text-center">
+          <div className="mb-6">
+            <div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-4">
+              <Icon
+                icon="mdi:clock-alert"
+                className="text-3xl text-red-600 dark:text-red-400"
+              />
+            </div>
+            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
+              Submission Closed
+            </h2>
+            <p className="text-gray-600 dark:text-gray-400">
+              Project submissions are no longer accepted.
+            </p>
+          </div>
+
+          <div className="space-y-4">
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              The submission deadline was December 7, 2025 at 23:59 WIB.
+            </p>
+
+            <button
+              onClick={() => navigate(`/teams/${teamId}`)}
+              className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors cursor-pointer"
+            >
+              Back to Team
+            </button>
+
+            <button
+              onClick={() => navigate('/dashboard')}
+              className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer"
+            >
+              Back to Dashboard
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const handleScreenshotUpload = async (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
     const files = e.target.files;
     if (!files) return;
 
+    // Validate file sizes
+    const oversizedFiles = Array.from(files).filter(file => file.size > MAX_FILE_SIZE);
+    if (oversizedFiles.length > 0) {
+      toast.error(`${oversizedFiles.length} file(s) are too large. Maximum size is 2MB per file.`);
+      e.target.value = '';
+      return;
+    }
+
     try {
-      const uploadPromises = Array.from(files).map(file => uploadFile(file));
+      const uploadPromises = Array.from(files).map((file) => uploadFile(file));
       const results = await Promise.all(uploadPromises);
-      const urls = results.map(r => r.data.url);
+      const urls = results.map((r) => r.data.url);
       setScreenshots([...screenshots, ...urls]);
     } catch (error) {
       console.error('Failed to upload screenshots:', error);
+      toast.error('Failed to upload screenshots. Please try again.');
     }
   };
 
@@ -95,49 +211,133 @@ const SubmitProjectPage: FC = (): ReactElement => {
   });
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="bg-white border-b">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
         <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <h1 className="text-3xl font-bold text-gray-900">Submit Project</h1>
-          <p className="text-gray-600 mt-1">{team?.name}</p>
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+            Submit Project
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400 mt-1">{team?.name}</p>
         </div>
       </div>
 
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Countdown Timer */}
+        {timeLeft && (
+          <div className="bg-blue-50 dark:bg-blue-900/20 border-2 border-blue-500 rounded-lg p-6 mb-6">
+            <div className="flex items-start space-x-3">
+              <span className="text-3xl">⏰</span>
+              <div className="flex-1">
+                <h3 className="font-bold text-blue-900 dark:text-blue-100 text-lg">
+                  Submission Deadline
+                </h3>
+                <p className="text-blue-800 dark:text-blue-200 mt-2 text-sm font-sans">
+                  Submissions close on December 7, 2025 at 23:59 WIB
+                </p>
+                <div className="mt-4 grid grid-cols-4 gap-4">
+                  <div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
+                    <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
+                      {timeLeft.days}
+                    </div>
+                    <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                      Days
+                    </div>
+                  </div>
+                  <div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
+                    <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
+                      {timeLeft.hours.toString().padStart(2, '0')}
+                    </div>
+                    <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                      Hours
+                    </div>
+                  </div>
+                  <div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
+                    <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
+                      {timeLeft.minutes.toString().padStart(2, '0')}
+                    </div>
+                    <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                      Minutes
+                    </div>
+                  </div>
+                  <div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
+                    <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
+                      {timeLeft.seconds.toString().padStart(2, '0')}
+                    </div>
+                    <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                      Seconds
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Minimum Members Warning */}
+        {!hasEnoughMembers && (
+          <div className="bg-amber-50 dark:bg-amber-900/20 border-2 border-amber-500 rounded-lg p-6 mb-6">
+            <div className="flex items-start space-x-3">
+              <span className="text-3xl">👥</span>
+              <div>
+                <h3 className="font-bold text-amber-900 dark:text-amber-100 text-lg">
+                  Team Members Required
+                </h3>
+                <p className="text-amber-800 dark:text-amber-200 mt-2 text-sm font-sans">
+                  Your team needs at least <strong>{MIN_TEAM_MEMBERS} members</strong> to submit a project.
+                  Currently you have <strong>{memberCount} member{memberCount !== 1 ? 's' : ''}</strong>.
+                  Please invite more members to your team before submitting.
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
         {/* Warning Banner */}
-        <div className="bg-red-50 border-2 border-red-500 rounded-lg p-6 mb-6">
+        <div className="bg-red-50 dark:bg-red-900/20 border-2 border-red-500 rounded-lg p-6 mb-6">
           <div className="flex items-start space-x-3">
             <span className="text-3xl">⚠️</span>
             <div>
-              <h3 className="font-bold text-red-900 text-lg">IMPORTANT WARNING</h3>
-              <ul className="text-red-800 mt-2 space-y-1 text-sm">
+              <h3 className="font-bold text-red-900 dark:text-red-100 text-lg">
+                IMPORTANT WARNING
+              </h3>
+              <ul className="text-red-800 dark:text-red-200 mt-2 space-y-1 text-sm font-sans">
                 <li>• You can only submit your project ONCE</li>
                 <li>• After submission, you CANNOT edit or change anything</li>
-                <li>• Make sure all information is correct before submitting</li>
+                <li>
+                  • Make sure all information is correct before submitting
+                </li>
                 <li>• Review your project details carefully</li>
               </ul>
             </div>
           </div>
         </div>
 
-        <div className="bg-white rounded-lg shadow-md p-8">
-          <form onSubmit={(e) => {
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-8 border dark:border-gray-800">
+          <form
+            onSubmit={(e) => {
               e.preventDefault();
               setShowConfirmModal(true);
-          }} className="space-y-6">
+            }}
+            className="space-y-6"
+          >
             {/* Project Name */}
             <ControlledInputField
               control={form.control}
               label="Project Name"
               placeholder="Enter your project name"
               name="project_name"
+              size="lg"
+              isRequired={true}
             />
 
             {/* Description */}
             <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
+              <label className="block text-[15px] font-medium text-gray-700 dark:text-gray-300">
                 Project Description <span className="text-red-500">*</span>
               </label>
+              <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
+                Describe your project, its features, and what problem it solves. You can also paste your demo video link here.
+              </p>
               <Controller
                 control={form.control}
                 name="description"
@@ -145,12 +345,15 @@ const SubmitProjectPage: FC = (): ReactElement => {
                   <div>
                     <Textarea
                       {...field}
-                      placeholder="Describe your project, its features, and what problem it solves..."
+                      placeholder="Describe your project, its features, and what problem it solves... You can paste your demo video link (YouTube, Loom, etc.) here as well."
                       rows={6}
                       className="w-full"
+                      size="lg"
                     />
                     {fieldState.error && (
-                      <p className="text-sm text-red-500 mt-1">{fieldState.error.message}</p>
+                      <p className="text-sm text-red-500 mt-1">
+                        {fieldState.error.message}
+                      </p>
                     )}
                   </div>
                 )}
@@ -164,6 +367,8 @@ const SubmitProjectPage: FC = (): ReactElement => {
               placeholder="https://github.com/username/project"
               name="repository_url"
               type="url"
+              size="lg"
+              isRequired={true}
             />
 
             {/* Demo URL */}
@@ -173,21 +378,13 @@ const SubmitProjectPage: FC = (): ReactElement => {
               placeholder="https://your-project-demo.com"
               name="demo_url"
               type="url"
-            />
-
-            {/* Presentation URL */}
-            <ControlledInputField
-              control={form.control}
-              label="Presentation URL (Optional)"
-              placeholder="https://slides.com/your-presentation or Google Drive link"
-              name="presentation_url"
-              type="url"
+              size="lg"
             />
 
             {/* Screenshots */}
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
-                Project Screenshots <span className="text-gray-400">(Optional)</span>
+            <div>
+              <label className="block text-label1 font-medium text-neutral-800 dark:text-gray-300">
+                Project Screenshots (Optional)
               </label>
               <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-4">
                 {screenshots.map((url, index) => (
@@ -195,7 +392,7 @@ const SubmitProjectPage: FC = (): ReactElement => {
                     <img
                       src={url}
                       alt={`Screenshot ${index + 1}`}
-                      className="w-full h-32 object-cover rounded-lg border-2 border-gray-200"
+                      className="w-full h-32 object-cover rounded-lg border-2 border-gray-200 dark:border-gray-700"
                     />
                     <button
                       type="button"
@@ -207,10 +404,14 @@ const SubmitProjectPage: FC = (): ReactElement => {
                   </div>
                 ))}
               </div>
-              <label className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
+              <label className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800">
                 <div className="text-center">
-                  <p className="text-gray-500">Click to upload screenshots</p>
-                  <p className="text-xs text-gray-400 mt-1">PNG, JPG up to 5MB each</p>
+                  <p className="text-gray-500 dark:text-gray-400">
+                    Click to upload screenshots
+                  </p>
+                  <p className="text-xs text-gray-400 dark:text-gray-500 mt-1 font-sans">
+                    PNG, JPG. Max 2MB each
+                  </p>
                 </div>
                 <input
                   type="file"
@@ -236,52 +437,73 @@ const SubmitProjectPage: FC = (): ReactElement => {
               <Button
                 type="submit"
                 className="flex-1"
-                disabled={!form.formState.isValid || isUploading}
+                disabled={!form.formState.isValid || isUploading || !hasEnoughMembers}
               >
                 Review & Submit
               </Button>
             </div>
+            {!hasEnoughMembers && (
+              <p className="text-center text-sm text-amber-600 dark:text-amber-400 mt-2">
+                You need at least {MIN_TEAM_MEMBERS} team members to submit
+              </p>
+            )}
           </form>
         </div>
       </div>
 
       {/* Confirmation Modal */}
       {showConfirmModal && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
+        <div className="fixed inset-0 bg-black/50 dark:bg-black/70 flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl dark:shadow-gray-950/50 max-w-md w-full p-6">
             <div className="text-center mb-6">
               <div className="text-5xl mb-4">⚠️</div>
-              <h2 className="text-2xl font-bold text-gray-900 mb-2">
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
                 Final Confirmation
               </h2>
-              <p className="text-red-600 font-medium">
+              <p className="text-red-600 dark:text-red-400 font-medium">
                 This action is IRREVERSIBLE!
               </p>
             </div>
-            <div className="bg-gray-50 rounded-lg p-4 mb-6">
-              <p className="text-sm text-gray-700 mb-3">
-                By clicking "Submit Project", you confirm that:
+            <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 mb-6">
+              <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
+                By submitting, you confirm that:
               </p>
-              <ul className="text-sm text-gray-600 space-y-2">
+              <ul className="text-sm text-gray-600 dark:text-gray-400 space-y-2">
                 <li>✓ All information is correct and complete</li>
                 <li>✓ You understand this can only be done once</li>
                 <li>✓ You cannot edit after submission</li>
                 <li>✓ Your team agrees with this submission</li>
               </ul>
             </div>
+            <div className="mb-6">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Type <span className="font-bold text-red-600 dark:text-red-400">SUBMIT</span> to confirm:
+              </label>
+              <input
+                type="text"
+                value={confirmText}
+                onChange={(e) => setConfirmText(e.target.value)}
+                placeholder="Type SUBMIT here"
+                className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500"
+                autoComplete="off"
+              />
+            </div>
             <div className="flex space-x-3">
               <Button
                 type="button"
                 variant="secondary"
                 className="flex-1"
-                onClick={() => setShowConfirmModal(false)}
+                onClick={() => {
+                  setShowConfirmModal(false);
+                  setConfirmText('');
+                }}
               >
                 Go Back
               </Button>
               <Button
                 onClick={onSubmit}
                 className="flex-1 bg-red-600 hover:bg-red-700"
-                disabled={isSubmitting}
+                disabled={isSubmitting || confirmText !== 'SUBMIT'}
               >
                 {isSubmitting ? 'Submitting...' : 'Submit Project'}
               </Button>