feat(hackathon): dark mode for user page

- Add "edit profile" modal dialog that can be triggered from dashboard
- Update background overlay for dark mode
- Update dark mode for auth callback

.claude/settings.local.json

@@ -1,7 +1,16 @@
 {
   "permissions": {
     "allow": [
-      "Bash(npm run typecheck:*)"
+      "Bash(npx nx run-many:*)",
+      "Bash(npm install:*)",
+      "Bash(npm view:*)",
+      "Bash(npx nx build landing)",
+      "Bash(npm uninstall:*)",
+      "Bash(dir:*)",
+      "Bash(ren page.tsx page-original.tsx)",
+      "Bash(ren:*)",
+      "Bash(npx supabase:*)",
+      "Bash(libs/service/src/types/supabase.ts)"
     ],
     "deny": [],
     "ask": []

.dockerignore

@@ -0,0 +1,55 @@
+# Dependencies
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build outputs
+dist
+.next
+out
+build
+coverage
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Git
+.git
+.gitignore
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# Testing
+coverage
+.nyc_output
+
+# Logs
+logs
+*.log
+
+# Nx
+.nx
+
+# Docker
+Dockerfile
+docker-compose*.yml
+.dockerignore
+
+# Misc
+*.md
+!README.md
+.editorconfig
+.prettierrc
+.eslintrc

.env.example

@@ -0,0 +1,3 @@
+
+VITE_SUPABASE_URL=https://your-project-id.supabase.co
+VITE_SUPABASE_ANON_KEY=your-anon-key-here

.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,15 +25,20 @@ 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
               git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-backoffice
             else
-              cd ~/imphnen-frontend-service-backoffice && git pull
+              cd ~/imphnen-frontend-service-backoffice && git fetch origin && git reset --hard origin/develop && git pull
             fi
-            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-backoffice/apps/backoffice/.env
+            cat > ~/imphnen-frontend-service-backoffice/apps/backoffice/.env << 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-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,15 +25,20 @@ 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
               git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-dimentorin
             else
-              cd ~/imphnen-frontend-service-dimentorin && git pull
+              cd ~/imphnen-frontend-service-dimentorin && git fetch origin && git reset --hard origin/develop && git pull
             fi
-            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-dimentorin/apps/dimentorin/.env
+            cat > ~/imphnen-frontend-service-dimentorin/apps/dimentorin/.env << 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-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,15 +25,20 @@ 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
               git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-gacha
             else
-              cd ~/imphnen-frontend-service-gacha && git pull
+              cd ~/imphnen-frontend-service-gacha && git fetch origin && git reset --hard origin/develop && git pull
             fi
-            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-gacha/apps/gacha/.env
+            cat > ~/imphnen-frontend-service-gacha/apps/gacha/.env << 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-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

@@ -0,0 +1,45 @@
+name: Deploy Hackathon
+
+on:
+  push:
+    branches:
+      - develop
+    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
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Deploy via SSH
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          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
+              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-hackathon
+            else
+              cd ~/imphnen-frontend-service-hackathon && git fetch origin && git reset --hard origin/develop && git pull
+            fi
+            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 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,15 +25,20 @@ 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
               git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service
             else
-              cd ~/imphnen-frontend-service && git pull
+              cd ~/imphnen-frontend-service && git fetch origin && git reset --hard origin/develop && git pull
             fi
-            echo "NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }}" > ~/imphnen-frontend-service/apps/landing/.env
+            cat > ~/imphnen-frontend-service/apps/landing/.env << EOF
+            NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }}
+            NEXT_PUBLIC_SUPABASE_URL=${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
+            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

.gitignore

@@ -62,3 +62,7 @@ storybook-static
 # Next.js
 .next
 out
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md
+
+.env.local

apps/backoffice/.deploy

@@ -0,0 +1 @@
+Tue, Nov 25, 2025  4:21:27 PM

apps/backoffice/.deploy-trigger

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

apps/dimentorin/.deploy

@@ -0,0 +1 @@
+Tue, Nov 25, 2025  4:21:27 PM

apps/dimentorin/.deploy-trigger

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

apps/dimentorin/src/app/(public)/profile/_components/contexts/profile-context.tsx

@@ -3,9 +3,8 @@
 import React, { createContext, useContext, useMemo, useCallback } from 'react';
 import { useParams } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
-import { useAuthStore } from '@imphnen-frontend-service/utils';
 import {
-
+  useAuthStore,
   useUserMe,
   useUserById,
   useUpdateUserMe,

apps/dimentorin/src/app/_hooks/use-google-login.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { toast } from 'sonner';
 import { useNavigate } from 'react-router-dom';
-import { useAuthStore } from '@imphnen-frontend-service/utils';
+import { useAuthStore } from '@imphnen-frontend-service/service';
 
 export interface GoogleLoginResponse {
   access_token?: string;

apps/dimentorin/src/app/auth/google-callback/page.tsx

@@ -1,7 +1,6 @@
 import { FC, ReactElement, useEffect } from 'react';
 import { useSearchParams, useNavigate } from 'react-router-dom';
-import { useAuthStore } from '@imphnen-frontend-service/utils';
+import { useGoogleCallback, useAuthStore } from '@imphnen-frontend-service/service';
-import { useGoogleCallback } from '@imphnen-frontend-service/service';
 import { toast } from 'sonner';
 
 export const GoogleCallbackPage: FC = (): ReactElement => {

apps/gacha/.deploy

@@ -0,0 +1 @@
+Tue, Nov 25, 2025  4:21:27 PM

apps/gacha/.deploy-trigger

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

apps/gacha/src/app/_hooks/use-login.ts

@@ -3,9 +3,9 @@ import {
   authLoginSchema,
   TLoginRequest,
   usePostLogin,
+  useAuthStore,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useAuthStore } from '@imphnen-frontend-service/utils';
 import { toast } from 'sonner';
 import { useNavigate } from 'react-router';
 import { useVerifyEmail } from './use-verify-email';

apps/hackathon/.deploy

@@ -0,0 +1 @@
+Tue, Nov 25, 2025  16:42:27 PM

apps/hackathon/eslint.config.mjs

@@ -0,0 +1,14 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {
+      'jsx-a11y/accessible-emoji': 'off',
+    },
+  },
+];

apps/hackathon/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>IMPHNEN x Kolosal.ai Hackathon 2025</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <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>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/hackathon/postcss.config.mjs

@@ -0,0 +1,9 @@
+import { join } from 'path';
+
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {
+      base: join(import.meta.dirname, '../../'),
+    },
+  },
+};

apps/hackathon/project.json

@@ -0,0 +1 @@
+{}

apps/hackathon/src/app/404.tsx

@@ -0,0 +1,23 @@
+import { Link } from 'react-router-dom';
+
+export default function NotFoundPage() {
+  return (
+    <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 dark:text-gray-300 mb-4">
+          Page Not Found
+        </h2>
+        <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
+          to="/"
+          className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
+        >
+          Go Back Home
+        </Link>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,191 @@
+import { FC, ReactElement, useEffect, useState, useRef } from 'react';
+import { useNavigate } from 'react-router';
+import { useAuthStore, supabase } from '@imphnen-frontend-service/service';
+import { toast } from 'sonner';
+
+const CallbackPage: FC = (): ReactElement => {
+  const navigate = useNavigate();
+  const { setSession } = useAuthStore();
+  const [isProcessing, setIsProcessing] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const hasRunRef = useRef(false);
+
+  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);
+
+        // 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
+
+        // console.log('[Callback] Waiting for Supabase to process OAuth callback...');
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+
+        // Get the session that Supabase automatically created from the URL hash
+        const {
+          data: { session: sessionData },
+          error: sessionError,
+        } = await supabase.auth.getSession();
+
+        if (sessionError) {
+          // console.error('[Callback] Session error:', sessionError);
+          throw new Error(sessionError.message || 'Failed to get session');
+        }
+
+        if (!sessionData || !sessionData.user) {
+          throw new Error(
+            'No session found after OAuth callback. Please try logging in again.'
+          );
+        }
+
+        // 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');
+        }
+
+        // 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,
+        };
+
+        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: '',
+            },
+          },
+        });
+
+        // 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...');
+          globalThis.location.replace('/dashboard');
+        } else {
+          // console.log('[Callback] User needs onboarding, redirecting...');
+          globalThis.location.replace('/onboarding/user');
+        }
+      } catch (err) {
+        // console.error('[Callback] Error:', err);
+        setError((err as Error).message);
+        setIsProcessing(false);
+        toast.error('An error occurred during login');
+
+        setTimeout(() => {
+          navigate('/auth/login');
+        }, 3000);
+      }
+    };
+
+    handleCallback();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Run only once on mount
+
+  if (error) {
+    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="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">
+              GitHub Login Failed
+            </h2>
+            <p className="text-red-600 mb-4 whitespace-pre-line">{error}</p>
+          </div>
+
+          <p className="text-gray-600 text-sm mt-6 text-center">
+            Redirecting to login page in 3 seconds...
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <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 dark:text-white mb-2">
+          Completing login...
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400">Please wait</p>
+      </div>
+    </div>
+  );
+};
+
+export default CallbackPage;

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

@@ -0,0 +1,136 @@
+import { useState } from 'react';
+import { supabase } 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 handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!email) {
+      toast.error('Please enter your email');
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+
+      const { error } = await supabase.auth.resetPasswordForEmail(email, {
+        redirectTo: `${window.location.origin}/auth/reset-password`,
+      });
+
+      if (error) {
+        throw error;
+      }
+
+      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="mb-6">
+            <div className="mx-auto w-16 h-16 bg-green-100 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">
+              Check Your Email
+            </h2>
+            <p className="text-gray-600">
+              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>
+
+            <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">
+                Back to Login
+              </button>
+            </Link>
+
+            <button
+              onClick={() => setEmailSent(false)}
+              className="w-full py-3 text-gray-600 hover:text-gray-900 transition-colors"
+            >
+              Send another email
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  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">
+        <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 dark:text-white mb-2">
+            Forgot Password?
+          </h2>
+          <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 dark:text-gray-300 mb-1"
+            >
+              Email Address
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="your@email.com"
+              disabled={isLoading}
+              className="bg-white dark:bg-gray-800 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 disabled:cursor-not-allowed"
+              required
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            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'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,242 @@
+import { useState } from 'react';
+import {
+  useGitHubAuth,
+  useEmailAuth,
+  supabase,
+  useAuthStore,
+} 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 [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 handleEmailLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    if (!email || !password) {
+      setError('Please enter both email and password');
+      return;
+    }
+
+    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: '',
+          },
+        },
+      });
+
+      toast.success('Login successful!');
+
+      // Redirect based on onboarding status
+      if (userData?.location) {
+        navigate('/dashboard');
+      } else {
+        navigate('/onboarding/user');
+      }
+    } 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);
+      }
+    } catch (error) {
+      // console.error('[Login] GitHub login failed');
+      setIsGithubLoading(false);
+    }
+  };
+
+  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">
+        <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 dark:text-white mb-2">
+            Welcome Back
+          </h2>
+          <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 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 dark:text-gray-300 mb-1"
+            >
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              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 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 dark:text-gray-300"
+              >
+                Password
+              </label>
+              <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>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              disabled={isEmailLoading}
+              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>
+
+          <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 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'}
+          </button>
+        </form>
+
+        <div className="my-6 flex items-center">
+          <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 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>
+            {isGithubLoading ? 'Connecting...' : 'Sign in with GitHub'}
+          </span>
+        </button>
+
+        <div className="mt-6 text-center">
+          <p className="text-gray-600 dark:text-gray-400 text-sm">
+            Don't have an account?{' '}
+            <a
+              href="/auth/signup"
+              className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-semibold"
+            >
+              Sign up
+            </a>
+          </p>
+        </div>
+
+        <div className="mt-6 text-center">
+          <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>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,139 @@
+import { useState, useEffect } from 'react';
+import { supabase } from '@imphnen-frontend-service/service';
+import { useNavigate } from 'react-router';
+import { toast } from 'sonner';
+
+export default function ResetPasswordPage() {
+  const navigate = useNavigate();
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isValidToken, setIsValidToken] = useState(false);
+
+  // useEffect(() => {
+  //   // Check if we have a valid session (from the reset link)
+  //   supabase.auth.getSession().then(({ data: { session } }) => {
+  //     if (session) {
+  //       setIsValidToken(true);
+  //     } else {
+  //       toast.error('Invalid or expired reset link');
+  //       setTimeout(() => navigate('/auth/forgot-password'), 2000);
+  //     }
+  //   });
+  // }, [navigate]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (password !== confirmPassword) {
+      toast.error('Passwords do not match');
+      return;
+    }
+
+    if (password.length < 6) {
+      toast.error('Password must be at least 6 characters');
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+
+      const { error } = await supabase.auth.updateUser({
+        password: password,
+      });
+
+      if (error) {
+        throw error;
+      }
+
+      toast.success('Password updated successfully!');
+
+      // Sign out and redirect to login
+      await supabase.auth.signOut();
+      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) {
+  //   return (
+  //     <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 dark:text-gray-400">
+  //           Verifying reset link...
+  //         </p>
+  //       </div>
+  //     </div>
+  //   );
+  // }
+
+  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">
+        <div className="text-center mb-8">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
+            Set New Password
+          </h2>
+          <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 dark:text-gray-300 mb-1"
+            >
+              New Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              disabled={isLoading}
+              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 disabled:bg-gray-100 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              required
+              minLength={6}
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="confirmPassword"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
+              Confirm New Password
+            </label>
+            <input
+              id="confirmPassword"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder="••••••••"
+              disabled={isLoading}
+              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 disabled:bg-gray-100 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              required
+              minLength={6}
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            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'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,295 @@
+import { useState } from 'react';
+import {
+  useGitHubAuth,
+  useEmailAuth,
+  supabase,
+  useAuthStore,
+} from '@imphnen-frontend-service/service';
+import { GithubOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router';
+import { toast } from 'sonner';
+import { Icon } from '@iconify/react';
+import { ThemeToggle } from '../../../components/theme-toggle';
+
+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();
+    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',
+        }
+      );
+
+      if (upsertError) {
+        console.warn('[Signup] Failed to create user record');
+      }
+
+      // 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);
+      }
+    } catch (err) {
+      // console.error('[Signup] Email signup failed:', err);
+      setError((err as Error).message || 'Signup failed');
+      setIsEmailLoading(false);
+    }
+  };
+
+  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);
+      }
+    } catch (error) {
+      // console.error('[Signup] GitHub login failed:', error);
+      setIsGithubLoading(false);
+    }
+  };
+
+  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">
+        <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 dark:text-white mb-2">
+            Create Account
+          </h2>
+          <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 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">
+          <div>
+            <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)}
+              placeholder="John Doe"
+              disabled={isEmailLoading}
+              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>
+            <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)}
+              placeholder="your@email.com"
+              disabled={isEmailLoading}
+              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>
+            <label
+              htmlFor="password"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              disabled={isEmailLoading}
+              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>
+            <label
+              htmlFor="confirmPassword"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
+              Confirm Password
+            </label>
+            <input
+              id="confirmPassword"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder="••••••••"
+              disabled={isEmailLoading}
+              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>
+
+          <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 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'}
+          </button>
+        </form>
+
+        <div className="my-6 flex items-center">
+          <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 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>
+            {isGithubLoading ? 'Connecting...' : 'Sign up with GitHub'}
+          </span>
+        </button>
+
+        <div className="mt-6 text-center">
+          <p className="text-gray-600 dark:text-gray-400 text-sm">
+            Already have an account?{' '}
+            <a
+              href="/auth/login"
+              className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-semibold"
+            >
+              Sign in
+            </a>
+          </p>
+        </div>
+
+        <div className="mt-6 text-center">
+          <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>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,307 @@
+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';
+
+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 { session } = useAuthStore();
+  const [showProfileModal, setShowProfileModal] = useState(false);
+  // 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: Invitation[] = (invitationsData?.data ||
+    []) as Invitation[];
+
+  const handleAcceptInvitation = async (invitationId: string) => {
+    try {
+      await respondToInvitation({ invitationId, action: 'accept' });
+      toast.success('Invitation accepted! You are now a team member.');
+    } catch (error) {
+      console.error('Failed to accept invitation:', error);
+      toast.error('Failed to accept invitation');
+    }
+  };
+
+  const handleRejectInvitation = async (invitationId: string) => {
+    try {
+      await respondToInvitation({ invitationId, action: 'reject' });
+      toast.success('Invitation declined');
+    } catch (error) {
+      console.error('Failed to reject invitation:', error);
+      toast.error('Failed to decline invitation');
+    }
+  };
+
+  return (
+    <>
+      <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>
+          {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>
+
+        {invitations.length > 0 && (
+          <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 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>
+                  <div className="flex space-x-2">
+                    <Button
+                      size="sm"
+                      onClick={() => handleAcceptInvitation(invitation.id)}
+                    >
+                      Accept
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="secondary"
+                      onClick={() => handleRejectInvitation(invitation.id)}
+                    >
+                      Decline
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {myTeams.length > 0 ? (
+          <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>
+            <div className="grid grid-cols-1 gap-4 md:gap-6 w-full md:max-w-lg">
+              {myTeams.map((team) => (
+                <Link
+                  key={team.id}
+                  to={'/teams/' + team.id}
+                  className="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
+                >
+                  {team.banner && (
+                    <div className="w-full aspect-3/1">
+                      <img
+                        src={team.banner}
+                        alt={team.name}
+                        className="w-full h-full object-cover"
+                      />
+                    </div>
+                  )}
+                  <div className="p-4">
+                    <div className="flex flex-col md:flex-row items-center space-y-3 space-x-3 -mt-14 md:mt-0 mb-2 md:mb-3 min-w-12 min-h-12 ">
+                      {team.logo && (
+                        <img
+                          src={team.logo}
+                          alt={team.name}
+                          className="w-20 h-20 rounded-full object-cover shrink-0 border-black dark:border-gray-700"
+                        />
+                      )}
+                      <div>
+                        <h3 className="text-xl md:text-lg font-bold text-gray-900 dark:text-white leading-tight">
+                          {team.name}
+                        </h3>
+                        <p className="text-sm text-gray-600 dark:text-gray-400 flex items-center">
+                          <Icon
+                            icon="heroicons:map-pin-16-solid"
+                            width="16"
+                            height="16"
+                          />
+                          <span className="ml-1">{team.city}</span>
+                        </p>
+                      </div>
+                    </div>
+                    <p className="text-gray-600 dark:text-gray-400 line-clamp-3 text-ellipsis font-sans">
+                      {team.description}
+                    </p>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          </div>
+        ) : (
+          <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-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>
+        )}
+
+        <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 || '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="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 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-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>
+              {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 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 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 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 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>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+      <ProfilePage
+        open={showProfileModal}
+        onClose={() => setShowProfileModal(false)}
+      />
+    </>
+  );
+};
+
+export default DashboardPage;

apps/hackathon/src/app/error.tsx

@@ -0,0 +1,29 @@
+import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
+
+export default function ErrorPage() {
+  const error = useRouteError();
+  let errorMessage: string;
+
+  if (isRouteErrorResponse(error)) {
+    errorMessage = error.statusText;
+  } else if (error instanceof Error) {
+    errorMessage = error.message;
+  } else if (typeof error === 'string') {
+    errorMessage = error;
+  } else {
+    console.error(error);
+    errorMessage = 'Unknown error';
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="text-center">
+        <h1 className="text-6xl font-bold text-red-600 mb-4">Oops!</h1>
+        <p className="text-xl text-gray-700 mb-2">
+          Sorry, an unexpected error has occurred.
+        </p>
+        <p className="text-gray-500 italic">{errorMessage}</p>
+      </div>
+    </div>
+  );
+}

apps/hackathon/src/app/layout.tsx

@@ -0,0 +1,115 @@
+import { Outlet, ScrollRestoration, useLocation, useNavigate } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { supabase } from '@imphnen-frontend-service/service';
+
+// Define onboarding routes
+const ONBOARDING_ROUTES = new Set(['/onboarding/user']);
+
+export default function RootLayout() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [isChecking, setIsChecking] = useState(true);
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      const pathname = location.pathname;
+
+      // Allow hackathon pages without checks
+      if (pathname.startsWith('/hackathons')) {
+        setIsChecking(false);
+        return;
+      }
+
+      // Allow auth callback without checks
+      if (pathname === '/auth/callback') {
+        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) {
+        // If already authenticated and not on password reset pages, redirect to dashboard
+        if (session && pathname !== '/auth/reset-password') {
+          navigate('/dashboard', { replace: true });
+          setIsChecking(false);
+          return;
+        }
+        // Allow unauthenticated access
+        setIsChecking(false);
+        return;
+      }
+
+      // Home page - allow everyone to view the landing page
+      if (pathname === '/') {
+        setIsChecking(false);
+        return;
+      }
+
+      // Require authentication for all other routes
+      if (!session) {
+        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);
+            return;
+          }
+
+          const hasLocation = !!userData?.location;
+
+          if (!hasLocation) {
+            navigate('/onboarding/user', { replace: true });
+            setIsChecking(false);
+            return;
+          }
+        } catch (error) {
+          // Silently handle error
+        }
+      }
+
+      setIsChecking(false);
+    };
+
+    checkAuth();
+  }, [location.pathname, navigate]);
+
+  // Show loading state while checking auth
+  if (isChecking) {
+    return (
+      <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 dark:text-neutral-400">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <Outlet />
+      <ScrollRestoration />
+    </>
+  );
+}

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

@@ -0,0 +1,269 @@
+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 } from 'react-router';
+import { useForm, Controller } from 'react-hook-form';
+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',
+  'Backend Developer',
+  'Full Stack Developer',
+  'DevOps Engineer',
+  'UI/UX Designer',
+  'Product Manager',
+  'Data Scientist',
+  'Mobile Developer',
+];
+
+const UserOnboardingPage: FC = (): ReactElement => {
+  const navigate = useNavigate();
+  const [avatarFile, setAvatarFile] = useState<File | null>(null);
+  const [avatarPreview, setAvatarPreview] = useState<string>('');
+
+  const { data: userData } = useUserMe();
+  const { mutateAsync: updateUser, isPending: isUpdating } = useUpdateUserMe();
+  const { mutateAsync: uploadAvatar, isPending: isUploading } =
+    useUploadAvatar();
+  const { session } = useAuthStore();
+
+  const form = useForm<TUserOnboardingForm>({
+    resolver: zodResolver(userOnboardingSchema),
+    mode: 'all',
+    defaultValues: {
+      fullname: session?.user?.fullname || userData?.data?.fullname || '',
+      location: session?.user?.location || '',
+      bio: session?.user?.bio || '',
+      skills: session?.user?.skills || [],
+    },
+  });
+
+  // Set initial avatar preview from GitHub avatar if available
+  useEffect(() => {
+    if (session?.user?.avatar && !avatarPreview) {
+      setAvatarPreview(session.user.avatar);
+    }
+  }, [session?.user?.avatar, avatarPreview]);
+
+  const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      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 in Supabase
+      await updateUser({
+        fullname: data.fullname,
+        avatar: avatarUrl,
+        location: data.location,
+        bio: data.bio,
+        skills: data.skills,
+      });
+
+      // 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));
+
+      // Use window.location for a full page reload to ensure middleware sees updated localStorage
+      globalThis.location.href = '/dashboard';
+    } catch (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 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 dark:text-white mb-2">
+            Complete Your Profile
+          </h1>
+          <p className="text-gray-600 font-sans dark:text-gray-400">
+            Tell us more about yourself to get started
+          </p>
+        </div>
+
+        <form onSubmit={onSubmit} className="space-y-6">
+          {/* Avatar Upload */}
+          <div className="flex flex-col items-center space-y-4">
+            <div className="relative">
+              {avatarPreview ? (
+                <img
+                  src={avatarPreview}
+                  alt="Avatar preview"
+                  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 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 className="flex flex-col items-center">
+              <label htmlFor="avatar" className="cursor-pointer">
+                <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
+                  id="avatar"
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={handleAvatarChange}
+                />
+              </label>
+              <p className="text-xs text-gray-500 dark:text-gray-500 mt-2 text-center">
+                Optional, but highly recommended
+              </p>
+            </div>
+          </div>
+
+          {/* Full Name */}
+          <ControlledInputField
+            control={form.control}
+            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-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 }) => (
+                <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-base font-medium text-gray-700 dark:text-gray-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"
+                      >
+                        <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-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 dark:text-gray-300">
+                          {role}
+                        </span>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              )}
+            />
+          </div>
+
+          {/* Bio */}
+          <div className="space-y-2">
+            <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 className="flex">
+                  <Textarea
+                    {...field}
+                    placeholder="Tell us about yourself..."
+                    rows={4}
+                    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>
+                  )}
+                </div>
+              )}
+            />
+          </div>
+
+          <Button
+            className="w-full"
+            type="submit"
+            disabled={!form.formState.isValid || isUpdating || isUploading}
+          >
+            {isUpdating || isUploading ? 'Saving...' : 'Complete Setup'}
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default UserOnboardingPage;

apps/hackathon/src/app/page.tsx

@@ -0,0 +1,869 @@
+import { useNavigate } from 'react-router';
+import { useState } from 'react';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Icon } from '@iconify/react';
+import { ThemeToggle } from '../components/theme-toggle';
+import { useAuthStore } from '@imphnen-frontend-service/service';
+
+export default function HomePage() {
+  const navigate = useNavigate();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [openFaq, setOpenFaq] = useState<number | null>(0);
+  const { session } = useAuthStore();
+  const isAuthenticated = !!session?.token;
+
+  const faqs = [
+    {
+      question: 'Siapa yang bisa mengikuti hackathon ini?',
+      answer:
+        'Hackathon ini terbuka untuk mahasiswa, fresh graduate, dan profesional muda yang memiliki passion di bidang teknologi. Peserta dapat mendaftar secara tim.',
+    },
+    {
+      question: 'Apakah ada biaya pendaftaran?',
+      answer:
+        'Tidak, hackathon ini GRATIS dan terbuka untuk semua peserta yang memenuhi kriteria.',
+    },
+    {
+      question: 'Apa tema hackathon kali ini?',
+      answer:
+        'Tema hackathon kali ini adalah "Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif".',
+    },
+    {
+      question: 'Bagaimana format pelaksanaannya?',
+      answer:
+        'Hackathon dilaksanakan secara online dengan berbagai tahap mulai dari pendaftaran, technical meeting, tahap penyisihan, hingga final.',
+    },
+    {
+      question: 'Apa hadiah lombanya?',
+      answer:
+        'Total hadiah senilai Rp14.500.000 dengan juara 1 mendapat Rp6.000.000, juara 2 Rp4.000.000, juara 3 Rp2.500.000, dan juara kategori lainnya Rp2.000.000.',
+    },
+    {
+      question: 'Apakah harus membentuk tim? Boleh solo?',
+      answer:
+        'Tidak boleh solo. Peserta harus membentuk tim yang terdiri dari 2 - 5 orang per tim. Peserta bisa mencari anggota melalui website ini atau WA Group Hackathon.',
+    },
+    {
+      question: 'Apakah boleh menggunakan AI (vibe coding)?',
+      answer:
+        'Ya, peserta diperbolehkan menggunakan AI tools untuk membantu development. Kami merekomendasikan menggunakan Kolosal.ai selama proses development (Free Credit)',
+    },
+    {
+      question: 'Apa project wajib di-deploy?',
+      answer:
+        'Diusahakan project agar di-deploy dan dapat diakses secara online untuk meningkatkan penilaian.',
+    },
+    {
+      question: 'Apakah peserta mendapatkan sertifikat?',
+      answer:
+        'Kami akan memberikan sertifikat kepada tim yang submit project dan menyelesaikan rangkaian hackathon.',
+    },
+    {
+      question: 'Website error dan terjadi masalah?',
+      answer:
+        'Jika menemukan masalah teknis, silakan hubungi kami melalui grup WA Hackathon.',
+    },
+  ];
+
+  return (
+    <main className="min-h-screen bg-white dark:bg-gray-950">
+      {/* Navigation */}
+      <div id="#top" className="hidden"></div>
+      <nav className="border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 sticky top-0 z-50">
+        <div className="flex items-center justify-between max-w-7xl mx-auto px-4 md:px-8 py-4">
+          <div className="flex items-center gap-2">
+            <span className="text-lg md:text-xl font-bold dark:text-white">
+              IMPHNEN
+            </span>
+            <a
+              href="#top"
+              className="text-lg md:text-xl font-bold text-primary-500 hover:cursor-pointer"
+            >
+              Hackathon
+            </a>
+          </div>
+          {/* Desktop Menu */}
+          <div className="hidden md:flex text-label1 items-center gap-4 lg:gap-8">
+            <a
+              href="#timeline"
+              className="text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white transition-colors"
+            >
+              Timeline
+            </a>
+            <a
+              href="#hadiah"
+              className="text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white transition-colors"
+            >
+              Hadiah
+            </a>
+            <a
+              href="#faq"
+              className="text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white transition-colors"
+            >
+              FAQ
+            </a>
+            <ThemeToggle />
+            {isAuthenticated ? (
+              <Button
+                onClick={() => navigate('/dashboard')}
+                size="sm"
+                className="rounded-lg text-base"
+              >
+                Dashboard
+              </Button>
+            ) : (
+              <>
+                <Button
+                  onClick={() => navigate('/auth/login')}
+                  size="sm"
+                  variant="bordered"
+                  className="rounded-lg text-base dark:bg-gray-800"
+                >
+                  Masuk
+                </Button>
+                <Button
+                  onClick={() => navigate('/auth/signup')}
+                  size="sm"
+                  className="rounded-lg text-base"
+                >
+                  Daftar Sekarang
+                </Button>
+              </>
+            )}
+          </div>
+          {/* Mobile Menu Button */}
+          <div className="flex items-center gap-2 md:hidden">
+            <ThemeToggle />
+            <button
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              className="p-2 cursor-pointer text-gray-900 dark:text-white"
+            >
+              <svg
+                className="w-6 h-6"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      {/* Mobile Menu */}
+      {mobileMenuOpen && (
+        <nav className="md:hidden sticky top-18 border-b border-gray-200 dark:border-gray-800 bg-white z-40 dark:bg-gray-900">
+          <div className="flex flex-col items-start gap-4 px-4 py-4">
+            <a
+              href="#timeline"
+              className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white"
+            >
+              Timeline
+            </a>
+            <a
+              href="#hadiah"
+              className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white"
+            >
+              Hadiah
+            </a>
+            <a
+              href="#faq"
+              className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white"
+            >
+              FAQ
+            </a>
+            {isAuthenticated ? (
+              <button
+                onClick={() => navigate('/dashboard')}
+                className="px-4 py-2 bg-primary-500 text-white text-base rounded-lg hover:bg-primary-600 transition-colors text-center cursor-pointer"
+              >
+                Dashboard
+              </button>
+            ) : (
+              <>
+                <button
+                  onClick={() => navigate('/auth/login')}
+                  className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white cursor-pointer"
+                >
+                  Masuk
+                </button>
+                <button
+                  onClick={() => navigate('/auth/login')}
+                  className="px-4 py-2 bg-primary-500 text-white text-base rounded-lg hover:bg-primary-600 transition-colors text-center cursor-pointer"
+                >
+                  Daftar Sekarang
+                </button>
+              </>
+            )}
+          </div>
+        </nav>
+      )}
+
+      {/* Hero Section */}
+      <section className="relative w-full overflow-hidden py-20">
+        <div className="absolute inset-0 overflow-hidden">
+          <div
+            className="absolute top-1/4 -left-20 w-100 h-100 rounded-full bg-linear-to-r from-primary/20 to-blue-400/20 blur-3xl"
+            style={{ transform: 'translate(10px, -5px)', opacity: 0.9 }}
+          ></div>
+          <div
+            className="absolute bottom-1/3 -right-20 w-100 h-100 rounded-full bg-linear-to-r from-blue-400/20 to-primary/20 blur-3xl"
+            style={{ transform: 'translate(0px, 0px)', opacity: 1 }}
+          ></div>
+          <div className="absolute inset-0 bg-[linear-gradient(rgba(59,130,246,0.05)_1px,transparent_1px),linear-gradient(to_right,rgba(59,130,246,0.05)_1px,transparent_1px)] dark:bg-[linear-gradient(rgba(59,130,246,0.1)_1px,transparent_1px),linear-gradient(to_right,rgba(59,130,246,0.1)_1px,transparent_1px)] bg-size-[40px_40px]"></div>
+        </div>
+        <div className="mx-auto container px-4 relative flex flex-col items-center">
+          {/* Logos */}
+          <div className="flex items-center gap-4 md:gap-8 lg:gap-12 mb-8 md:mb-12 lg:mb-16 flex-wrap justify-center">
+            <div className="flex items-center">
+              <img
+                src="images/imphnen-logo.svg"
+                alt="IMPHNEN"
+                className="h-12 md:h-16"
+              />
+            </div>
+            <span className="text-3xl md:text-5xl font-bold text-gray-400 dark:text-gray-500">
+              ×
+            </span>
+            <div className="flex items-center">
+              <img
+                src="images/sponsors/kolosal-logo_rlxbck.svg"
+                alt="Kolosal.ai"
+                className="h-8 md:h-12 dark:invert"
+              />
+            </div>
+          </div>
+          {/* Title */}
+          <h1 className="text-h1 font-bold text-gray-900 dark:text-white mb-4 text-center">
+            Hackathon
+          </h1>
+          {/* Subtitle */}
+          <p className="text-p1 text-primary-500 font-semibold mb-6 md:mb-8 text-center px-4">
+            "Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif"
+          </p>
+          {/* Description */}
+          <p className="text-p3 text-gray-600 dark:text-gray-200 max-w-lg md:max-w-xl text-center mb-8 md:mb-12 px-4 font-sans">
+            Kompetisi pengembangan teknologi untuk menciptakan solusi inovatif
+            yang menghadirkan dampak nyata
+          </p>
+          {/* Status */}
+          <div className="flex flex-col md:flex-row items-center gap-4 md:gap-8 mb-10 md:mb-16 text-base text-gray-600 dark:text-gray-200">
+            <div className="flex items-center gap-2 md:gap-3">
+              <Icon icon="streamline-plump:web" className="w-4 h-4" />
+              <span>Online</span>
+            </div>
+            <div className="flex items-center gap-2 md:gap-3 text-center">
+              <Icon icon="heroicons:clock" className="w-4 h-4" />
+              <span>Pendaftaran hingga 30 November 2025</span>
+            </div>
+          </div>
+          {/* CTA Buttons */}
+          <div className="flex flex-col md:flex-row items-center gap-4 px-4">
+            <Button
+              onClick={() => navigate('/auth/signup')}
+              className="rounded-lg text-base max-h-auto"
+            >
+              Daftar Sekarang
+            </Button>
+            <a
+              href="https://chat.whatsapp.com/BlxrYh9uSC37d7VPhJslGL"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center justify-center px-4 py-2.5 border-2 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 transition-colors text-center bg-transparent hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 text-base text-gray-600 dark:text-gray-200 dark:bg-gray-800 rounded-lg font-bai-jamjuree font-semibold"
+            >
+              Gabung Grup WA Hackathon
+            </a>
+          </div>
+          {/* Scroll indicator */}
+          <div className="mt-12 md:mt-20">
+            <svg
+              className="w-6 h-6 text-gray-400 dark:text-gray-500 animate-bounce"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 14l-7 7m0 0l-7-7m7 7V3"
+              />
+            </svg>
+          </div>
+        </div>
+      </section>
+
+      {/* About Section */}
+      <section className="py-16 md:py-24 px-4 md:px-8 bg-white dark:bg-gray-950">
+        <div className="max-w-4xl mx-auto text-center">
+          <h2 className="text-3xl md:text-5xl font-bold mb-10 dark:text-white">
+            Tentang <span className="text-primary-500">Hackathon</span>
+          </h2>
+          <p className="font-sans text-lg md:text-xl text-left md:text-center text-gray-600 dark:text-gray-200 mb-6">
+            <span className="font-semibold text-gray-900 dark:text-white">
+              Hackathon
+            </span>{' '}
+            adalah kompetisi pengembangan teknologi yang mengajak talenta muda
+            untuk berkolaborasi dalam menciptakan solusi inovatif.
+          </p>
+          <p className="font-sans text-lg md:text-xl text-left md:text-center text-gray-600 dark:text-gray-200">
+            IMPHNEN bersama Kolosal.ai mengadakan Hackathon dengan tema lomba{' '}
+            <span className="font-semibold text-primary-500">
+              "Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif"
+            </span>
+            .
+          </p>
+        </div>
+      </section>
+
+      {/* Prizes Section */}
+      <section
+        id="hadiah"
+        className="py-16 md:py-24 px-4 md:px-8 bg-gray-50 dark:bg-linear-to-b dark:from-gray-950 dark:to-gray-900"
+      >
+        <div className="max-w-lg md:max-w-6xl mx-auto">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-5xl font-bold mb-4 font-bai-jamjuree dark:text-white">
+              Hadiah <span className="text-primary-500">Menarik</span>
+            </h2>
+            <p className="text-xl md:text-2xl text-primary-500 font-semibold font-sans">
+              Total Prize Pool Rp14.500.000
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {/* Prize 1 */}
+            <div className="bg-white dark:bg-gray-900 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-gray-700 hover:border-primary-500 dark:hover:border-primary-500 transition-colors">
+              <div className="flex justify-center mb-4">
+                <div className="w-16 h-16 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center">
+                  <Icon
+                    icon="ic:round-star"
+                    className="h-8 w-8 text-primary-500"
+                  />
+                </div>
+              </div>
+              <h3 className="text-xl font-bold text-center mb-2 dark:text-white">
+                Juara 1
+              </h3>
+              <p className="text-2xl font-bold text-primary-500 text-center font-sans">
+                Rp6.000.000
+              </p>
+            </div>
+
+            {/* Prize 2 */}
+            <div className="bg-white dark:bg-gray-900 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500 transition-colors">
+              <div className="flex justify-center mb-4">
+                <div className="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center">
+                  <Icon
+                    icon="ic:round-star"
+                    className="h-8 w-8 text-gray-600 dark:text-gray-200"
+                  />
+                </div>
+              </div>
+              <h3 className="text-xl font-bold text-center mb-2 dark:text-white">
+                Juara 2
+              </h3>
+              <p className="text-2xl font-bold text-primary-500 text-center font-sans">
+                Rp4.000.000
+              </p>
+            </div>
+
+            {/* Prize 3 */}
+            <div className="bg-white dark:bg-gray-900 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-gray-700 hover:border-orange-300 dark:hover:border-orange-500 transition-colors">
+              <div className="flex justify-center mb-4">
+                <div className="w-16 h-16 bg-orange-100 dark:bg-orange-900/30 rounded-full flex items-center justify-center">
+                  <Icon
+                    icon="ic:round-star"
+                    className="h-8 w-8 text-orange-600 dark:text-orange-500"
+                  />
+                </div>
+              </div>
+              <h3 className="text-xl font-bold text-center mb-2 dark:text-white">
+                Juara 3
+              </h3>
+              <p className="text-2xl font-bold text-orange-600 dark:text-orange-500 text-center font-sans">
+                Rp2.500.000
+              </p>
+            </div>
+
+            {/* Special Prize */}
+            <div className="bg-white dark:bg-gray-900 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500 transition-colors">
+              <div className="flex justify-center mb-4">
+                <div className="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center">
+                  <Icon
+                    icon="ic:round-star"
+                    className="h-8 w-8 text-purple-600 dark:text-purple-500"
+                  />
+                </div>
+              </div>
+              <h3 className="text-xl font-bold text-center mb-2 dark:text-white">
+                Juara Kategori Lainnya
+              </h3>
+              <p className="text-2xl font-bold text-purple-600 dark:text-purple-500 text-center font-sans">
+                Rp2.000.000
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Timeline Section */}
+      <section
+        id="timeline"
+        className="py-16 md:py-24 px-4 md:px-8 bg-white dark:bg-gray-950"
+      >
+        <div className="max-w-4xl mx-auto font-sans">
+          <div className="text-center mb-12 font-bai-jamjuree">
+            <h2 className="text-3xl md:text-5xl font-bold mb-4 dark:text-white">
+              Timeline <span className="text-primary-500">Acara</span>
+            </h2>
+            <p className="text-lg text-gray-600 dark:text-gray-200">
+              Jadwal lengkap pelaksanaan hackathon
+            </p>
+          </div>
+
+          <div>
+            {/* Timeline Item 1 */}
+            <div className="flex gap-6">
+              <div className="flex flex-col items-center">
+                <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
+                <div className="w-0.5 h-full bg-gray-300 dark:bg-gray-700"></div>
+              </div>
+              <div className="flex-1 pb-8">
+                <p className="text-primary-500 font-semibold mb-2">
+                  30 November 2025
+                </p>
+                <h3 className="text-xl font-bold mb-2 dark:text-white">
+                  Penutupan Registrasi
+                </h3>
+                <p className="text-gray-600 dark:text-gray-200">
+                  Batas akhir pendaftaran peserta hackathon.
+                </p>
+              </div>
+            </div>
+
+            {/* Timeline Item 2 */}
+            <div className="flex gap-6">
+              <div className="flex flex-col items-center">
+                <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
+                <div className="w-0.5 h-full bg-gray-300 dark:bg-gray-700"></div>
+              </div>
+              <div className="flex-1 pb-8">
+                <p className="text-primary-500 font-semibold mb-2">
+                  30 November 2025
+                </p>
+                <h3 className="text-xl font-bold mb-2 dark:text-white">
+                  Technical Meeting
+                </h3>
+                <p className="text-gray-600 dark:text-gray-200">
+                  Akan diadakan technical meeting terkait lomba melalui Google
+                  Meet. Stay tune di grup WA Hackathon.
+                </p>
+              </div>
+            </div>
+
+            {/* Timeline Item 3 */}
+            <div className="flex gap-6">
+              <div className="flex flex-col items-center">
+                <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
+                <div className="w-0.5 h-full bg-gray-300 dark:bg-gray-700"></div>
+              </div>
+              <div className="flex-1 pb-8">
+                <p className="text-primary-500 font-semibold mb-2">
+                  1 - 7 Desember 2025
+                </p>
+                <h3 className="text-xl font-bold mb-2 dark:text-white">
+                  Tahap Penyisihan
+                </h3>
+                <p className="text-gray-600 dark:text-gray-200">
+                  Peserta mengerjakan tantangan yang diberikan.
+                </p>
+              </div>
+            </div>
+
+            {/* Timeline Item 4 */}
+            <div className="flex gap-6">
+              <div className="flex flex-col items-center">
+                <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
+                <div className="w-0.5 h-full bg-gray-300 dark:bg-gray-700"></div>
+              </div>
+              <div className="flex-1 pb-8">
+                <p className="text-primary-500 font-semibold mb-2">
+                  8 - 14 Desember 2025
+                </p>
+                <h3 className="text-xl font-bold mb-2 dark:text-white">
+                  Penilaian & Webinar
+                </h3>
+                <p className="text-gray-600 dark:text-gray-200">
+                  Proses penilaian oleh juri dan sesi webinar.
+                </p>
+              </div>
+            </div>
+
+            {/* Timeline Item 5 */}
+            <div className="flex gap-6">
+              <div className="flex flex-col items-center">
+                <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
+              </div>
+              <div className="flex-1">
+                <p className="text-primary-500 font-semibold mb-2">
+                  15 Desember 2025
+                </p>
+                <h3 className="text-xl font-bold mb-2 dark:text-white">
+                  Pengumuman & Final
+                </h3>
+                <p className="text-gray-600 dark:text-gray-200">
+                  Presentasi final dan pengumuman pemenang.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Judges Section */}
+      <section className="py-16 md:py-24 px-4 md:px-8 bg-gray-50 dark:bg-gray-900 font-sans">
+        <div className="md:max-w-6xl mx-auto">
+          <div className="text-center mb-12 font-bai-jamjuree">
+            <h2 className="text-3xl md:text-5xl font-bold mb-4 dark:text-white">
+              Dewan <span className="text-primary-500">Juri</span>
+            </h2>
+            <p className="text-lg text-gray-600 dark:text-gray-200">
+              Perwakilan dari IMPHNEN dan Kolosal.ai yang akan menilai karya
+            </p>
+          </div>
+
+          <div className="w-full max-w-md md:max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
+            {/* Judge 1 */}
+            <div className="flex flex-col justify-between bg-white dark:bg-gray-800 rounded-xl px-4 py-8 shadow-lg text-center">
+              <h3 className="text-p3 font-bold mb-1 dark:text-white">
+                Alifais Farrel Ramdhani
+              </h3>
+              <div>
+                <p className="text-primary-500 font-semibold mb-1">CTO</p>
+                <p className="text-gray-600 dark:text-gray-200">Kolosal.ai</p>
+              </div>
+            </div>
+
+            {/* Judge 2 */}
+            <div className="flex flex-col justify-between bg-white dark:bg-gray-800 rounded-xl px-4 py-8 shadow-lg text-center">
+              <h3 className="text-p3 font-bold mb-1 dark:text-white">
+                Anka Tama
+              </h3>
+              <div>
+                <p className="text-primary-500 font-semibold mb-1">Admin</p>
+                <p className="text-gray-600 dark:text-gray-200">IMPHNEN</p>
+              </div>
+            </div>
+
+            {/* Judge 3 */}
+            <div className="flex flex-col justify-between bg-white dark:bg-gray-800 rounded-xl px-4 py-8 shadow-lg text-center">
+              <h3 className="text-p3 font-bold mb-1 dark:text-white">
+                Hafid Nur
+              </h3>
+              <div>
+                <p className="text-primary-500 font-semibold mb-1">Moderator</p>
+                <p className="text-gray-600 dark:text-gray-200">IMPHNEN</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ Section */}
+      <section
+        id="faq"
+        className="py-16 md:py-24 px-4 md:px-8 bg-white dark:bg-gray-950"
+      >
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-5xl font-bold mb-4 text-primary-500">
+              FAQ
+            </h2>
+            <p className="text-lg text-gray-600 dark:text-gray-200">
+              Pertanyaan yang Sering Diajukan
+            </p>
+          </div>
+
+          <div className="space-y-4 font-sans">
+            {faqs.map((faq, index) => (
+              <div
+                key={index}
+                className="border border-gray-200 dark:border-gray-700 rounded-lg dark:bg-gray-900"
+              >
+                <button
+                  onClick={() => setOpenFaq(openFaq === index ? null : index)}
+                  className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer"
+                >
+                  <span className="font-semibold text-gray-900 dark:text-white">
+                    {faq.question}
+                  </span>
+                  <svg
+                    className={`w-5 h-5 text-primary-500 transform transition-transform ${
+                      openFaq === index ? 'rotate-180' : ''
+                    }`}
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M19 9l-7 7-7-7"
+                    />
+                  </svg>
+                </button>
+                {openFaq === index && (
+                  <div className="px-6 pb-4 text-gray-600 dark:text-gray-200">
+                    {faq.answer}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Sponsors Section */}
+      <section className="py-20 md:py-28 px-4 md:px-8 bg-gray-50 dark:bg-gray-900">
+        <div className="max-w-6xl mx-auto text-center">
+          <h2 className="text-3xl md:text-5xl font-bold mb-4 dark:text-white">
+            Sponsor & <span className="text-primary-500">Partner</span>
+          </h2>
+          <p className="text-lg text-gray-600 dark:text-gray-200 mb-8">
+            Acara ini sepenuhnya disponsori oleh
+          </p>
+
+          <div className="flex justify-center">
+            <a
+              href="https://kolosal.ai"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg inline-block border-2 border-transparent hover:border-gray-500 dark:hover:border-gray-500 transition-colors"
+            >
+              <img
+                src="images/sponsors/kolosal-logo_rlxbck.svg"
+                alt="Kolosal.ai"
+                className="h-12 md:h-16 dark:invert"
+              />
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section
+        id="masuk"
+        className="py-20 md:py-28 px-4 md:px-8 bg-linear-to-b from-white to-blue-50 dark:from-gray-950 dark:to-gray-900"
+      >
+        <div className="max-w-4xl mx-auto text-center font-sans">
+          <h2 className="text-3xl md:text-5xl font-bold mb-6 font-bai-jamjuree dark:text-white">
+            Segera Daftarkan <span className="text-primary-500">Timmu!</span>
+          </h2>
+          <p className="text-lg md:text-xl text-left md:text-center text-gray-600 dark:text-gray-200 mb-8">
+            Jangan lewatkan kesempatan emas untuk bersaing dengan developer
+            terbaik,
+            <br className="hidden md:block" /> belajar dari para ahli, dan
+            memenangkan hadiah jutaan rupiah!
+          </p>
+
+          <div className="flex flex-col md:flex-row gap-4 justify-center">
+            <button
+              onClick={() => navigate('/auth/signup')}
+              className="px-8 py-3 bg-primary-500 text-white text-lg rounded-lg hover:bg-primary-700 transition-colors font-semibold cursor-pointer"
+            >
+              Daftar Sekarang
+            </button>
+            <a
+              href="https://chat.whatsapp.com/BlxrYh9uSC37d7VPhJslGL"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="px-8 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-lg rounded-lg border-2 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 transition-colors font-semibold"
+            >
+              Gabung Grup WA Hackathon
+            </a>
+          </div>
+
+          <p className="text-sm text-gray-500 dark:text-gray-500 mt-6">
+            Pendaftaran ditutup pada{' '}
+            <span className="text-primary-500 font-semibold">
+              30 November 2025
+            </span>
+          </p>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-gray-950 text-white py-12 px-4 md:px-8 font-sans">
+        <div className="max-w-6xl mx-auto">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
+            {/* Brand */}
+            <div>
+              <div className="flex items-center gap-2 mb-4 font-bai-jamjuree">
+                <span className="text-2xl font-bold">IMPHNEN</span>
+                <span className="text-2xl font-bold text-blue-500">
+                  Hackathon
+                </span>
+              </div>
+              <p className="text-gray-400 text-sm">
+                Wujudkan ide brilian mu menjadi solusi nyata. Bergabunglah dalam
+                IMPHNEN Hackathon dan jadilah bagian dari perubahan teknologi
+                masa depan.
+              </p>
+              <div className="flex gap-4 mt-4">
+                <div className="flex gap-4">
+                  <a
+                    href="https://fb.com/groups/programmerhandal"
+                    className="text-gray-400 hover:text-accent transition-colors"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="Facebook"
+                  >
+                    <Icon icon="ic:baseline-facebook" className="w-6 h-6" />
+                  </a>
+                  <a
+                    href="https://www.instagram.com/imphnen.dev"
+                    className="text-gray-400 hover:text-accent transition-colors"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="Instagram"
+                  >
+                    <Icon icon="mdi:instagram" className="w-6 h-6" />
+                  </a>
+                  <a
+                    href="https://www.linkedin.com/company/imphnen"
+                    className="text-gray-400 hover:text-accent transition-colors"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="LinkedIn"
+                  >
+                    <Icon icon="mdi:linkedin" className="w-6 h-6" />
+                  </a>
+                  <a
+                    href="https://www.tiktok.com/@imphnen"
+                    className="text-gray-400 hover:text-accent transition-colors"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="TikTok"
+                  >
+                    <Icon icon="ic:baseline-tiktok" className="w-6 h-6" />
+                  </a>
+                  <a
+                    href="https://github.com/IMPHNEN"
+                    className="text-gray-400 hover:text-accent transition-colors"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="GitHub"
+                  >
+                    <Icon icon="mdi:github" className="w-6 h-6" />
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            {/* Quick Links */}
+            <div>
+              <h3 className="font-bold text-lg mb-4 font-bai-jamjuree">
+                Quick Links
+              </h3>
+              <ul className="space-y-2 text-gray-400">
+                <li>
+                  <a
+                    href="#timeline"
+                    className="hover:text-white transition-colors"
+                  >
+                    Timeline
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="#hadiah"
+                    className="hover:text-white transition-colors"
+                  >
+                    Hadiah
+                  </a>
+                </li>
+                <li>
+                  <a href="#faq" className="hover:text-white transition-colors">
+                    FAQ
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="/auth/signup"
+                    className="hover:text-white transition-colors"
+                  >
+                    Daftar
+                  </a>
+                </li>
+              </ul>
+            </div>
+
+            {/* Contact */}
+            <div>
+              <h3 className="font-bold text-lg mb-4 font-bai-jamjuree">
+                Contact
+              </h3>
+              <ul className="space-y-2 text-gray-400 text-sm">
+                <li className="flex items-start gap-2">
+                  <Icon
+                    icon="material-symbols:mail-outline-rounded"
+                    className="min-w-5 min-h-5 mt-0.5"
+                  />
+                  <a
+                    href="mailto:imphnen@gmail.com"
+                    className="hover:text-white transition-colors"
+                  >
+                    imphnen@gmail.com
+                  </a>
+                </li>
+                <li className="flex items-start gap-2">
+                  <Icon
+                    icon="solar:phone-linear"
+                    className="min-w-5 min-h-5 mt-0.5"
+                  />
+                  <a
+                    href="https://chat.whatsapp.com/BlxrYh9uSC37d7VPhJslGL"
+                    className="hover:text-white transition-colors"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    WA Group Hackathon
+                  </a>
+                </li>
+                <li className="flex items-start gap-2">
+                  <Icon
+                    icon="streamline-plump:web"
+                    className="min-w-5 min-h-5 mt-0.5"
+                  />
+                  <a
+                    href="https://imphnen.dev"
+                    className="hover:text-white transition-colors"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    IMPHNEN.dev
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="border-t border-gray-800 pt-8 text-center text-gray-400 text-sm">
+            <p>
+              © 2025 IMPHNEN - Ingin Menjadi Programmer Handal Namun Enggan
+              Ngoding. All rights reserved.
+            </p>
+          </div>
+        </div>
+      </footer>
+    </main>
+  );
+}

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

@@ -0,0 +1,389 @@
+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 5MB)
+      if (file.size > 5 * 1024 * 1024) {
+        toast.error('The file is too large. Maximum 5MB');
+        return;
+      }
+
+      // Validate file type
+      if (!file.type.startsWith('image/')) {
+        toast.error('The file must be an image');
+        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 5MB
+              </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

@@ -0,0 +1,318 @@
+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 { toast } from 'sonner';
+import { Icon } from '@iconify/react';
+
+const TeamChatPage: FC = (): ReactElement => {
+  const { teamId } = useParams<{ teamId: string }>();
+  const navigate = useNavigate();
+  const { session } = useAuthStore();
+  const [message, setMessage] = useState('');
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const { data: teamData } = useTeamById(teamId || '');
+  const { data: messages, isLoading } = useTeamMessages(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' });
+  }, [displayMessages]);
+
+  const handleSendMessage = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!message.trim() || isSending) return;
+
+    try {
+      await sendMessage(message.trim());
+      setMessage('');
+    } catch (error) {
+      console.error('Failed to send message:', error);
+      toast.error('Failed to send message');
+    }
+  };
+
+  const handleDeleteMessage = async (messageId: string) => {
+    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');
+    }
+  };
+
+  const formatTime = (timestamp: string) => {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffInMs = now.getTime() - date.getTime();
+    const diffInMins = Math.floor(diffInMs / 60000);
+
+    if (diffInMins < 1) return 'Just now';
+    if (diffInMins < 60) return `${diffInMins}m ago`;
+    if (diffInMins < 1440) return `${Math.floor(diffInMins / 60)}h ago`;
+
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  };
+
+  return (
+    <div className="flex flex-col h-screen bg-gray-50 dark:bg-gray-950">
+      {/* Header */}
+      <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 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}`)}
+            >
+              Back to Team
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Messages Container */}
+      <div className="flex-1 overflow-y-auto">
+        <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 dark:border-primary-400"></div>
+            </div>
+          ) : displayMessages && displayMessages.length > 0 ? (
+            <div className="space-y-4">
+              {displayMessages.map((msg) => {
+                const isOwnMessage = msg.user_id === currentUserId;
+                const isLeader = team?.leader_id === currentUserId;
+                const canDelete = isOwnMessage || isLeader;
+
+                return (
+                  <div
+                    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'
+                      }`}
+                    >
+                      {/* Avatar */}
+                      <div className="shrink-0">
+                        {msg.user?.avatar ? (
+                          <img
+                            src={msg.user.avatar}
+                            alt={msg.user.fullname}
+                            className="w-10 h-10 rounded-full object-cover"
+                          />
+                        ) : (
+                          <div className="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-semibold">
+                            {msg.user?.fullname?.charAt(0) || '?'}
+                          </div>
+                        )}
+                      </div>
+
+                      {/* Message Bubble */}
+                      <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 dark:text-white">
+                              {isOwnMessage ? 'You' : msg.user?.fullname}
+                            </span>
+                            <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 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 wrap-break-word font-sans">
+                              {msg.message}
+                            </p>
+
+                            {/* Delete button */}
+                            {canDelete && (
+                              <button
+                                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"
+                              >
+                                {/* 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>
+                  </div>
+                );
+              })}
+              <div ref={messagesEndRef} />
+            </div>
+          ) : (
+            <div className="flex flex-col items-center justify-center h-64 text-center">
+              <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 dark:text-gray-400 font-sans">
+                Be the first to start the conversation!
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Message Input */}
+      <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
+              type="text"
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              placeholder="Type your message..."
+              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
+              type="submit"
+              disabled={!message.trim() || isSending}
+              className="px-6 py-3"
+            >
+              {isSending ? (
+                <div className="flex items-center gap-2">
+                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                  Sending...
+                </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>
+                  Send
+                </div>
+              )}
+            </Button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TeamChatPage;

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

@@ -0,0 +1,379 @@
+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';
+import { useForm, Controller } from 'react-hook-form';
+import {
+  teamUpdateSchema,
+  TTeamUpdateForm,
+  useUpdateTeam,
+  useTeamById,
+  ETeamVisibility,
+  useUploadFile,
+  useAuthStore,
+} from '@imphnen-frontend-service/service';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import { CitySelect } from '../../../../components/city-select';
+import { Icon } from '@iconify/react';
+
+const EditTeamPage: FC = (): ReactElement => {
+  const { teamId } = useParams<{ teamId: string }>();
+  const navigate = useNavigate();
+  const { session } = useAuthStore();
+  const [logoFile, setLogoFile] = useState<File | null>(null);
+  const [logoPreview, setLogoPreview] = useState<string>('');
+  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 { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
+
+  const team = teamData?.data;
+  const currentUserId = session?.user?.id;
+  const isLeader = currentUserId === team?.leader_id;
+
+  const form = useForm<TTeamUpdateForm>({
+    resolver: zodResolver(teamUpdateSchema),
+    mode: 'all',
+  });
+
+  useEffect(() => {
+    if (team) {
+      form.reset({
+        name: team.name,
+        description: team.description,
+        city: team.city,
+        visibility: team.visibility,
+        logo: team.logo,
+        banner: team.banner,
+      });
+      if (team.logo) setLogoPreview(team.logo);
+      if (team.banner) setBannerPreview(team.banner);
+    }
+  }, [team, form]);
+
+  if (isLoadingTeam) {
+    return (
+      <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 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>
+    );
+  }
+
+  const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setLogoFile(file);
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setLogoPreview(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleBannerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setBannerFile(file);
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setBannerPreview(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const onSubmit = form.handleSubmit(async (data) => {
+    try {
+      let logoUrl = data.logo;
+      let bannerUrl = data.banner;
+
+      if (logoFile) {
+        const logoResult = await uploadFile(logoFile);
+        logoUrl = logoResult.data.url;
+      }
+
+      if (bannerFile) {
+        const bannerResult = await uploadFile(bannerFile);
+        bannerUrl = bannerResult.data.url;
+      }
+
+      await updateTeam({
+        ...data,
+        logo: logoUrl,
+        banner: bannerUrl,
+      });
+
+      navigate(`/teams/${teamId}`);
+    } catch (error) {
+      console.error('Failed to update team:', error);
+    }
+  });
+
+  return (
+    <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 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 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-label1 font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Team Banner
+              </label>
+              {bannerPreview ? (
+                <div
+                  className="relative w-full"
+                  style={{ aspectRatio: '3 / 1' }}
+                >
+                  <img
+                    src={bannerPreview}
+                    alt="Banner preview"
+                    className="absolute inset-0 w-full h-full object-cover rounded-lg border-2 border-gray-200 dark:border-gray-700"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setBannerFile(null);
+                      setBannerPreview('');
+                      form.setValue('banner', null);
+                    }}
+                    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 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 dark:text-gray-400">
+                      Click to upload banner
+                    </p>
+                    <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+                      1200x400 recommended
+                    </p>
+                  </div>
+                  <input
+                    type="file"
+                    accept="image/*"
+                    className="hidden"
+                    onChange={handleBannerChange}
+                  />
+                </label>
+              )}
+            </div>
+
+            {/* Logo Upload */}
+            <div>
+              <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">
+                {logoPreview ? (
+                  <img
+                    src={logoPreview}
+                    alt="Logo preview"
+                    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 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 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 text-sm bg-primary-600 text-white rounded-lg hover:bg-primary-700 inline-block">
+                      {logoPreview ? 'Change Logo' : 'Upload Logo'}
+                    </span>
+                    <input
+                      id="logo"
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={handleLogoChange}
+                    />
+                  </label>
+                  {logoPreview && (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setLogoFile(null);
+                        setLogoPreview('');
+                        form.setValue('logo', null);
+                      }}
+                      className="px-4 py-2 text-sm bg-danger-600 text-white rounded-lg hover:bg-danger-700 cursor-pointer"
+                    >
+                      Remove
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Team Name */}
+            <ControlledInputField
+              control={form.control}
+              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 dark:text-gray-300">
+                City
+              </label>
+              <Controller
+                control={form.control}
+                name="city"
+                render={({ field, fieldState }) => (
+                  <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-label1 font-medium text-gray-700 dark:text-gray-300">
+                Description
+              </label>
+              <Controller
+                control={form.control}
+                name="description"
+                render={({ field, fieldState }) => (
+                  <div>
+                    <Textarea
+                      {...field}
+                      value={field.value || ''}
+                      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>
+                    )}
+                  </div>
+                )}
+              />
+            </div>
+
+            {/* Visibility */}
+            <div className="space-y-2">
+              <label className="block text-label1 font-medium text-gray-700 dark:text-gray-300">
+                Team Visibility
+              </label>
+              <Controller
+                control={form.control}
+                name="visibility"
+                render={({ field }) => (
+                  <div className="space-y-3">
+                    <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}
+                        value={ETeamVisibility.PUBLIC}
+                        checked={field.value === ETeamVisibility.PUBLIC}
+                        className="mt-1"
+                      />
+                      <div>
+                        <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 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800">
+                      <input
+                        type="radio"
+                        {...field}
+                        value={ETeamVisibility.PRIVATE}
+                        checked={field.value === ETeamVisibility.PRIVATE}
+                        className="mt-1"
+                      />
+                      <div>
+                        <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>
+                    </label>
+                  </div>
+                )}
+              />
+            </div>
+
+            {/* Submit Button */}
+            <div className="flex space-x-3 pt-4">
+              <Button
+                type="button"
+                variant="secondary"
+                className="flex-1"
+                onClick={() => navigate(`/teams/${teamId}`)}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                className="flex-1"
+                disabled={isUpdating || isUploading}
+              >
+                {isUpdating || isUploading ? 'Saving...' : 'Save Changes'}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EditTeamPage;

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

@@ -0,0 +1,46 @@
+import { FC, ReactElement, useState } from 'react';
+import { Outlet } from 'react-router';
+import { Sidebar } from '../../../components/sidebar';
+
+const TeamDetailLayout: 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 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 TeamDetailLayout;

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

@@ -0,0 +1,362 @@
+import { FC, ReactElement, useState } from 'react';
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { useNavigate, useParams } from 'react-router';
+import {
+  useTeamById,
+  useTeamMembers,
+  useTeamJoinRequests,
+  useInviteMember,
+  useRemoveMember,
+  useRespondToJoinRequest,
+  ETeamMemberStatus,
+  inviteMemberSchema,
+  TInviteMemberForm,
+  useAuthStore,
+} 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 }>();
+  const navigate = useNavigate();
+  const { session } = useAuthStore();
+  const [showInviteModal, setShowInviteModal] = useState(false);
+
+  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 team = teamData?.data;
+  const members = membersData?.data || [];
+  const joinRequests = Array.isArray(joinRequestsData?.data)
+    ? joinRequestsData.data
+    : [];
+  const currentUserId = session?.user?.id;
+  const isLeader = currentUserId === team?.leader_id;
+
+  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 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>
+    );
+  }
+
+  const handleInvite = form.handleSubmit(async (data) => {
+    try {
+      await inviteMember(data);
+      setShowInviteModal(false);
+      form.reset();
+    } catch (error) {
+      console.error('Failed to invite member:', error);
+    }
+  });
+
+  const handleRemove = async (userId: string) => {
+    // eslint-disable-next-line no-restricted-globals
+    if (confirm('Are you sure you want to remove this member?')) {
+      try {
+        await removeMember(userId);
+      } catch (error) {
+        console.error('Failed to remove member:', error);
+      }
+    }
+  };
+
+  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 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 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 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)}>
+                Invite Member
+              </Button>
+              <Button
+                variant="secondary"
+                onClick={() => navigate(`/teams/${teamId}`)}
+              >
+                Back to Team
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
+        {/* Join Requests */}
+        {joinRequests.length > 0 && (
+          <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 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 ? (
+                        <img
+                          src={request.user.avatar}
+                          alt={request.user.fullname}
+                          className="w-12 h-12 rounded-full object-cover"
+                        />
+                      ) : (
+                        <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 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 dark:text-gray-500">
+                            📍 {request.user.location}
+                          </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}
+                      >
+                        Approve
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => handleRejectRequest(request.id)}
+                        disabled={isResponding}
+                      >
+                        Reject
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Current Members */}
+        <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 dark:text-gray-400">
+              Loading members...
+            </p>
+          ) : (
+            <div className="space-y-3">
+              {members.map((member) => (
+                <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
+                        src={member.user.avatar}
+                        alt={member.user.fullname}
+                        className="w-12 h-12 rounded-full object-cover"
+                      />
+                    ) : (
+                      <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 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 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 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 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' && (
+                    <Button
+                      size="sm"
+                      variant="secondary"
+                      onClick={() => handleRemove(member.user_id)}
+                      disabled={isRemoving}
+                    >
+                      Remove
+                    </Button>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Warning */}
+        <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 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 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 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 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">
+                    {form.formState.errors.email.message}
+                  </p>
+                )}
+              </div>
+              <div className="flex space-x-3">
+                <Button
+                  type="button"
+                  variant="secondary"
+                  className="flex-1"
+                  onClick={() => {
+                    setShowInviteModal(false);
+                    form.reset();
+                  }}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  type="submit"
+                  className="flex-1"
+                  disabled={!form.formState.isValid || isInviting}
+                >
+                  {isInviting ? 'Sending...' : 'Send Invitation'}
+                </Button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ManageMembersPage;

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

@@ -0,0 +1,703 @@
+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 { toast } from 'sonner';
+import { Icon } from '@iconify/react';
+
+const MAX_TEAM_MEMBERS = 5;
+
+// 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();
+  const [showInviteModal, setShowInviteModal] = useState(false);
+  const [showJoinRequestsModal, setShowJoinRequestsModal] = useState(false);
+  const [inviteEmail, setInviteEmail] = useState('');
+  const [imagesLoaded, setImagesLoaded] = useState(false);
+  const [imageLoadCount, setImageLoadCount] = useState(0);
+
+  // 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 { data: joinRequestsData } = useTeamJoinRequests(
+    teamId || '',
+    !!teamId
+  );
+  const { mutateAsync: inviteMember, isPending: isInviting } = useInviteMember(
+    teamId || ''
+  );
+  const { mutateAsync: respondToJoinRequest, isPending: isResponding } =
+    useRespondToJoinRequest(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 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();
+    if (!inviteEmail.trim() || isInviting) return;
+
+    try {
+      await inviteMember({ email: inviteEmail.trim() });
+      toast.success('Invitation sent successfully!');
+      setInviteEmail('');
+      setShowInviteModal(false);
+    } catch (error) {
+      console.error('Failed to invite member:', error);
+      toast.error('Failed to send invitation');
+    }
+  };
+
+  const handleRespondToJoinRequest = async (
+    requestId: string,
+    action: 'approve' | 'reject'
+  ) => {
+    try {
+      await respondToJoinRequest({ requestId, action });
+      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');
+    }
+  };
+
+  if (isLoadingTeam || isLoadingMembers) {
+    return (
+      <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>
+    );
+  }
+
+  if (!team) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen">
+        <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 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 dark:bg-gray-900 border-b dark:border-gray-700">
+        {team.banner && (
+          <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={`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-4 md:py-6">
+          <div className="flex items-start justify-between">
+            <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-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-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 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="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>
+          </div>
+        </div>
+      </div>
+
+      <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-4 md:space-y-6">
+            {/* Team Description */}
+            <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 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">
+                  <Button
+                    className="w-full"
+                    variant="secondary"
+                    onClick={() => setShowInviteModal(true)}
+                    disabled={!canInvite}
+                  >
+                    <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)}
+                  >
+                    <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>
+                  <Link to={`/teams/${teamId}/edit`}>
+                    <Button className="w-full" variant="secondary">
+                      <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">
+                      <Icon
+                        icon="mdi:account-group"
+                        className="inline-block mr-2"
+                      />
+                      Manage Members
+                    </Button>
+                  </Link>
+                  <Link to={`/teams/${teamId}/chat`}>
+                    <Button className="w-full" variant="secondary">
+                      <Icon icon="mdi:chat" className="inline-block mr-2" />
+                      Team Chat
+                    </Button>
+                  </Link>
+                  <Link to={`/teams/${teamId}/submit`}>
+                    <Button className="w-full">
+                      <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 dark:text-gray-400 mt-3 text-center">
+                    Maximum team size reached ({MAX_TEAM_MEMBERS} members)
+                  </p>
+                )}
+              </div>
+            )}
+
+            {/* Quick Actions for Members (non-leaders) */}
+            {!isLeader && isMember && (
+              <div className="bg-white dark:bg-gray-800 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
+                    </Button>
+                  </Link>
+                  {team.has_submission && (
+                    <Link to={`/teams/${teamId}/submission`}>
+                      <Button className="w-full" variant="secondary">
+                        📄 View Submission
+                      </Button>
+                    </Link>
+                  )}
+                </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 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>
+                </div>
+                <Link to={`/teams/${teamId}/submission`}>
+                  <Button className="mt-4 w-full" variant="secondary">
+                    View Submission Details
+                  </Button>
+                </Link>
+              </div>
+            )}
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-4 md:space-y-6">
+            {/* Team Leader */}
+            <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 && (
+                <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}
+                      alt={team.leader.fullname}
+                      className="w-12 h-12 rounded-full object-cover"
+                    />
+                  ) : (
+                    <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 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 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: 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 || '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 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 dark:text-white truncate">
+                        {member.user?.fullname || 'Unknown'}
+                      </p>
+                      <p className="text-xs text-gray-500 dark:text-gray-400">
+                        {member.role === ETeamMemberRole.LEADER
+                          ? 'Leader'
+                          : 'Member'}
+                      </p>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Invite Member Modal */}
+      {showInviteModal && (
+        <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 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 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 dark:text-gray-300 mb-2"
+                >
+                  Email Address
+                </label>
+                <input
+                  id="invite-email"
+                  type="email"
+                  value={inviteEmail}
+                  onChange={(e) => setInviteEmail(e.target.value)}
+                  placeholder="Enter email address..."
+                  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 dark:text-gray-400 mt-1">
+                  Current members: {members.length}/{MAX_TEAM_MEMBERS}
+                </p>
+              </div>
+              <div className="flex space-x-3">
+                <Button
+                  type="button"
+                  variant="secondary"
+                  className="flex-1"
+                  onClick={() => {
+                    setShowInviteModal(false);
+                    setInviteEmail('');
+                  }}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  type="submit"
+                  className="flex-1"
+                  disabled={!inviteEmail.trim() || isInviting}
+                >
+                  {isInviting ? 'Sending...' : 'Send Invitation'}
+                </Button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Join Requests Modal */}
+      {showJoinRequestsModal && (
+        <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 dark:text-white">
+                Join Requests ({pendingJoinRequests.length})
+              </h2>
+              <button
+                onClick={() => setShowJoinRequestsModal(false)}
+                className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 text-2xl cursor-pointer"
+              >
+                ✕
+              </button>
+            </div>
+
+            {pendingJoinRequests.length === 0 ? (
+              <div className="text-center py-12">
+                <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 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 ? (
+                          <img
+                            src={request.user.avatar}
+                            alt={request.user.fullname}
+                            className="w-12 h-12 rounded-full object-cover"
+                          />
+                        ) : (
+                          <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 dark:text-white">
+                            {request.user?.fullname || 'Unknown User'}
+                          </p>
+                          <p className="text-sm text-gray-600 dark:text-gray-400">
+                            {request.user?.email}
+                          </p>
+                          {request.message && (
+                            <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-sm text-gray-500 dark:text-gray-500 mt-2 font-sans">
+                            Requested{' '}
+                            {new Date(request.created_at).toLocaleDateString()}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="flex space-x-2 mt-4 justify-end">
+                      <Button
+                        onClick={() =>
+                          handleRespondToJoinRequest(request.id, 'approve')
+                        }
+                        disabled={
+                          isResponding || members.length >= MAX_TEAM_MEMBERS
+                        }
+                        className="px-4 py-2 text-sm"
+                      >
+                        Accept
+                      </Button>
+                      <Button
+                        onClick={() =>
+                          handleRespondToJoinRequest(request.id, 'reject')
+                        }
+                        disabled={isResponding}
+                        variant="secondary"
+                        className="px-4 py-2 text-sm"
+                      >
+                        Reject
+                      </Button>
+                    </div>
+
+                    {members.length >= MAX_TEAM_MEMBERS && (
+                      <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>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TeamDashboardPage;

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

@@ -0,0 +1,207 @@
+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';
+
+const SubmissionViewPage: FC = (): ReactElement => {
+  const { teamId } = useParams<{ teamId: string }>();
+  const navigate = useNavigate();
+
+  const { data: teamData } = useTeamById(teamId || '');
+  const { data: submissionData, isLoading } = useTeamSubmission(teamId || '', !!teamId);
+
+  const team = teamData?.data;
+  const submission = submissionData?.data;
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-neutral-950">
+        <div className="text-gray-600 dark:text-neutral-400">Loading submission...</div>
+      </div>
+    );
+  }
+
+  if (!submission) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-neutral-950">
+        <div className="text-6xl mb-4">📄</div>
+        <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-neutral-400 mb-4">Your team hasn't submitted a project</p>
+        <Button onClick={() => navigate(`/teams/${teamId}`)}>Back to Team</Button>
+      </div>
+    );
+  }
+
+  const submittedDate = submission.submitted_at
+    ? new Date(submission.submitted_at).toLocaleString('id-ID', {
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      })
+    : 'Not submitted';
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-neutral-950">
+      <div className="bg-white dark:bg-neutral-900 border-b dark:border-neutral-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 dark:text-white">Project Submission</h1>
+              <p className="text-gray-600 dark:text-neutral-400 mt-1">{team?.name}</p>
+            </div>
+            <Button variant="secondary" onClick={() => navigate(`/teams/${teamId}`)}>
+              Back to Team
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Status Banner */}
+        <div className="bg-green-50 dark:bg-green-900/20 border border-green-500 rounded-lg p-6 mb-6">
+          <div className="flex items-center space-x-3">
+            <span className="text-4xl">✅</span>
+            <div>
+              <h3 className="font-bold text-green-900 dark:text-green-100 text-lg">Project Submitted Successfully</h3>
+              <p className="text-green-700 dark:text-green-300 text-sm">
+                Submitted on {submittedDate}
+              </p>
+              <p className="text-green-600 dark:text-green-400 text-xs mt-1">
+                This submission is now read-only and cannot be edited
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 overflow-hidden">
+          {/* Project Header */}
+          <div className="bg-gradient-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>
+
+          {/* Project Details */}
+          <div className="p-8 space-y-6">
+            {/* Description */}
+            <div>
+              <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">Project Description</h3>
+              <div className="bg-gray-50 dark:bg-neutral-800 rounded-lg p-4">
+                <p className="text-gray-700 dark:text-neutral-300 whitespace-pre-wrap">{submission.description}</p>
+              </div>
+            </div>
+
+            {/* Links */}
+            <div className="grid gap-6 md:grid-cols-2">
+              {/* Repository */}
+              <div>
+                <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 dark:text-primary-400 hover:text-blue-800 dark:hover:text-primary-300"
+                >
+                  <span>🔗</span>
+                  <span className="break-all">{submission.repository_url}</span>
+                </a>
+              </div>
+
+              {/* Demo URL */}
+              {submission.demo_url && (
+                <div>
+                  <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 dark:text-primary-400 hover:text-blue-800 dark:hover:text-primary-300"
+                  >
+                    <span>🌐</span>
+                    <span className="break-all">{submission.demo_url}</span>
+                  </a>
+                </div>
+              )}
+
+              {/* Presentation URL */}
+              {submission.presentation_url && (
+                <div>
+                  <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">Presentation</h3>
+                  <a
+                    href={submission.presentation_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    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.presentation_url}</span>
+                  </a>
+                </div>
+              )}
+            </div>
+
+            {/* Screenshots */}
+            {submission.screenshots && submission.screenshots.length > 0 && (
+              <div>
+                <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">
+                  {submission.screenshots.map((url, index) => (
+                    <a
+                      key={index}
+                      href={url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="block"
+                    >
+                      <img
+                        src={url}
+                        alt={`Screenshot ${index + 1}`}
+                        className="w-full h-48 object-cover rounded-lg border-2 border-gray-200 dark:border-neutral-700 hover:border-blue-500 dark:hover:border-primary-500 transition-colors cursor-pointer"
+                      />
+                    </a>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Submission Info */}
+            <div className="bg-gray-50 dark:bg-neutral-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 dark:text-neutral-400">Status:</span>
+                  <span className="font-medium text-green-600 dark:text-green-400">
+                    {submission.status === 'submitted' ? '✓ Submitted' : 'Draft'}
+                  </span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-600 dark:text-neutral-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 dark:text-neutral-400">Submission ID:</span>
+                  <span className="font-medium text-gray-900 dark:text-white font-mono text-xs">
+                    {submission.id}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Read-only Notice */}
+            <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>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SubmissionViewPage;

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

@@ -0,0 +1,334 @@
+import { FC, ReactElement, useState } 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';
+import { useForm, Controller } from 'react-hook-form';
+import {
+  projectSubmissionSchema,
+  TProjectSubmissionForm,
+  useSubmitProject,
+  useTeamById,
+  useTeamSubmission,
+  useUploadFile,
+  useAuthStore,
+} from '@imphnen-frontend-service/service';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+const SubmitProjectPage: FC = (): ReactElement => {
+  const { teamId } = useParams<{ teamId: string }>();
+  const navigate = useNavigate();
+  const { session } = useAuthStore();
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const [screenshots, setScreenshots] = useState<string[]>([]);
+
+  const { data: teamData } = useTeamById(teamId || '');
+  const { data: submissionData } = useTeamSubmission(teamId || '', !!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 form = useForm<TProjectSubmissionForm>({
+    resolver: zodResolver(projectSubmissionSchema),
+    mode: 'all',
+  });
+
+  if (!isLeader) {
+    return (
+      <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 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">
+          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}`)}
+          >
+            Back to Team
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  const handleScreenshotUpload = async (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const files = e.target.files;
+    if (!files) return;
+
+    try {
+      const uploadPromises = Array.from(files).map((file) => uploadFile(file));
+      const results = await Promise.all(uploadPromises);
+      const urls = results.map((r) => r.data.url);
+      setScreenshots([...screenshots, ...urls]);
+    } catch (error) {
+      console.error('Failed to upload screenshots:', error);
+    }
+  };
+
+  const removeScreenshot = (index: number) => {
+    setScreenshots(screenshots.filter((_, i) => i !== index));
+  };
+
+  const onSubmit = form.handleSubmit(async (data) => {
+    try {
+      await submitProject({
+        ...data,
+        screenshots,
+      });
+      navigate(`/teams/${teamId}/submission`);
+    } catch (error) {
+      console.error('Failed to submit project:', error);
+    }
+  });
+
+  return (
+    <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 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">
+        {/* Warning Banner */}
+        <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 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>• Review your project details carefully</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <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"
+          >
+            {/* 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-[15px] font-medium text-gray-700 dark:text-gray-300">
+                Project Description <span className="text-red-500">*</span>
+              </label>
+              <Controller
+                control={form.control}
+                name="description"
+                render={({ field, fieldState }) => (
+                  <div>
+                    <Textarea
+                      {...field}
+                      placeholder="Describe your project, its features, and what problem it solves..."
+                      rows={6}
+                      className="w-full"
+                      size="lg"
+                    />
+                    {fieldState.error && (
+                      <p className="text-sm text-red-500 mt-1">
+                        {fieldState.error.message}
+                      </p>
+                    )}
+                  </div>
+                )}
+              />
+            </div>
+
+            {/* Repository URL */}
+            <ControlledInputField
+              control={form.control}
+              label="Repository URL (GitHub, GitLab, etc.)"
+              placeholder="https://github.com/username/project"
+              name="repository_url"
+              type="url"
+              size="lg"
+              isRequired={true}
+            />
+
+            {/* Demo URL */}
+            <ControlledInputField
+              control={form.control}
+              label="Demo URL (Optional)"
+              placeholder="https://your-project-demo.com"
+              name="demo_url"
+              type="url"
+              size="lg"
+            />
+
+            {/* 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>
+              <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) => (
+                  <div key={index} className="relative">
+                    <img
+                      src={url}
+                      alt={`Screenshot ${index + 1}`}
+                      className="w-full h-32 object-cover rounded-lg border-2 border-gray-200 dark:border-gray-700"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => removeScreenshot(index)}
+                      className="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm hover:bg-red-600"
+                    >
+                      ×
+                    </button>
+                  </div>
+                ))}
+              </div>
+              <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 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 up to 5MB each
+                  </p>
+                </div>
+                <input
+                  type="file"
+                  accept="image/*"
+                  multiple
+                  className="hidden"
+                  onChange={handleScreenshotUpload}
+                  disabled={isUploading}
+                />
+              </label>
+            </div>
+
+            {/* Submit Button */}
+            <div className="flex space-x-3 pt-4">
+              <Button
+                type="button"
+                variant="secondary"
+                className="flex-1"
+                onClick={() => navigate(`/teams/${teamId}`)}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                className="flex-1"
+                disabled={!form.formState.isValid || isUploading}
+              >
+                Review & Submit
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      {/* Confirmation Modal */}
+      {showConfirmModal && (
+        <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 dark:text-white mb-2">
+                Final Confirmation
+              </h2>
+              <p className="text-red-600 dark:text-red-400 font-medium">
+                This action is IRREVERSIBLE!
+              </p>
+            </div>
+            <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 clicking "Submit Project", you confirm that:
+              </p>
+              <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="flex space-x-3">
+              <Button
+                type="button"
+                variant="secondary"
+                className="flex-1"
+                onClick={() => setShowConfirmModal(false)}
+              >
+                Go Back
+              </Button>
+              <Button
+                onClick={onSubmit}
+                className="flex-1 bg-red-600 hover:bg-red-700"
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? 'Submitting...' : 'Submit Project'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SubmitProjectPage;

apps/hackathon/src/app/teams/browse/page.tsx

@@ -0,0 +1,276 @@
+import { FC, ReactElement, useState, useEffect } from 'react';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Link, useNavigate } from 'react-router';
+import {
+  useTeams,
+  useJoinTeam,
+  useMyTeams,
+  ETeamVisibility,
+  joinTeamSchema,
+  TJoinTeamForm,
+} from '@imphnen-frontend-service/service';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { CitySelect } from '../../../components/city-select';
+import { Icon } from '@iconify/react';
+
+const BrowseTeamsPage: FC = (): ReactElement => {
+  const navigate = useNavigate();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [selectedCity, setSelectedCity] = useState('');
+  const [selectedTeamId, setSelectedTeamId] = useState<string | null>(null);
+  const [showJoinModal, setShowJoinModal] = useState(false);
+
+  // Debounce search term
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(searchTerm);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [searchTerm]);
+
+  const { data: teamsData, isLoading } = useTeams({
+    search: debouncedSearch,
+    city: selectedCity || undefined,
+    visibility: ETeamVisibility.PUBLIC,
+  });
+
+  const { data: myTeamsData } = useMyTeams();
+  const { mutateAsync: joinTeam, isPending: isJoining } = useJoinTeam();
+
+  const form = useForm<TJoinTeamForm>({
+    resolver: zodResolver(joinTeamSchema),
+    mode: 'all',
+  });
+
+  const teams = teamsData?.data || [];
+  const myTeams = myTeamsData?.data || [];
+
+  // Helper function to check if user is a member of a team
+  const isMyTeam = (teamId: string) => {
+    return myTeams.some((team: any) => team.id === teamId);
+  };
+
+  const handleJoinRequest = (teamId: string) => {
+    setSelectedTeamId(teamId);
+    setShowJoinModal(true);
+  };
+
+  const onSubmit = form.handleSubmit(async (data) => {
+    if (!selectedTeamId) return;
+
+    try {
+      await joinTeam({ teamId: selectedTeamId, data });
+      setShowJoinModal(false);
+      form.reset();
+      setSelectedTeamId(null);
+    } catch (error) {
+      console.error('Failed to send join request:', error);
+    }
+  });
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      {/* Header */}
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-800">
+        <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 dark:text-white">
+                Browse Teams
+              </h1>
+              <p className="text-gray-600 dark:text-gray-400 mt-1">
+                Find and join teams looking for members
+              </p>
+            </div>
+            <Link to="/dashboard" className="hidden md:block">
+              <Button variant="secondary">Back to Dashboard</Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+        <div className="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-sm mb-6 border dark:border-gray-800">
+          <div className="grid gap-4 md:grid-cols-2">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Search Teams
+              </label>
+              <input
+                type="text"
+                placeholder="Search by team name..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full h-[42px] px-3 border border-gray-300 dark:border-gray-700 rounded-md 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"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Filter by City
+              </label>
+              <CitySelect
+                value={selectedCity}
+                onChange={setSelectedCity}
+                placeholder="All Cities (search to filter...)"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Teams List */}
+        {isLoading ? (
+          <div className="text-center py-12">
+            <p className="text-gray-600 dark:text-gray-400">Loading teams...</p>
+          </div>
+        ) : teams.length === 0 ? (
+          <div className="bg-white dark:bg-gray-900 rounded-lg shadow-sm p-12 text-center">
+            <p className="text-gray-600 dark:text-gray-400 text-lg">
+              No teams found
+            </p>
+            <p className="text-gray-500 dark:text-gray-500 mt-2">
+              Try adjusting your filters
+            </p>
+          </div>
+        ) : (
+          <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
+            {teams.map((team) => (
+              <div
+                key={team.id}
+                className="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow flex flex-col border dark:border-gray-800"
+              >
+                <img
+                  src={team.banner || '/images/banner-imphnen.webp'}
+                  alt={team.name}
+                  className="w-full aspect-3/1 object-cover"
+                />
+                <div className="p-6 flex flex-col flex-1">
+                  <div className="flex items-center space-x-3 mb-3">
+                    {team.logo ? (
+                      <img
+                        src={team.logo}
+                        alt={team.name}
+                        className="w-12 h-12 rounded-full object-cover"
+                      />
+                    ) : (
+                      <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-300 text-xl">
+                          <Icon icon="mdi:account-group" />
+                        </span>
+                      </div>
+                    )}
+                    <div className="flex-1 min-w-0">
+                      <h3 className="text-lg font-bold text-gray-900 dark:text-white line-clamp-2 leading-tight">
+                        {team.name}
+                      </h3>
+                      <div className="text-sm font-sans text-gray-600 dark:text-gray-400 flex gap-2">
+                        <p className="truncate flex-1 min-w-0 flex items-center gap-x-1">
+                          <Icon icon="mdi:map-marker" />{' '}
+                          <span>{team.city}</span>
+                        </p>
+                        <p className="whitespace-nowrap shrink-0 flex items-center gap-x-1">
+                          <Icon icon="mdi:account-group" />{' '}
+                          {team.members?.length || 0} members
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  <p className="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-3 font-sans">
+                    {team.description}
+                  </p>
+                  <div className="space-y-3 mt-auto">
+                    {isMyTeam(team.id) ? (
+                      <Button
+                        className="w-full"
+                        variant="secondary"
+                        onClick={() => navigate(`/teams/${team.id}`)}
+                      >
+                        Your Team
+                      </Button>
+                    ) : (
+                      <>
+                        {myTeams.length === 0 &&
+                          (team.members?.length || 0) < 5 && (
+                            <Button
+                              className="w-full"
+                              onClick={() => handleJoinRequest(team.id)}
+                            >
+                              Request to Join
+                            </Button>
+                          )}
+                        <Button
+                          className="w-full"
+                          variant="secondary"
+                          onClick={() => navigate(`/teams/${team.id}`)}
+                        >
+                          View Team
+                        </Button>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Join Request Modal */}
+      {showJoinModal && (
+        <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">
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+              Request to Join Team
+            </h2>
+            <p className="text-gray-600 dark:text-gray-400 mb-6 font-sans">
+              Send a message to the team leader explaining why you want to join
+            </p>
+            <form onSubmit={onSubmit} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  Your Message
+                </label>
+                <textarea
+                  {...form.register('message')}
+                  rows={4}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md 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"
+                  placeholder="Tell the team leader why you want to join their team..."
+                />
+                {form.formState.errors.message && (
+                  <p className="text-sm text-red-500 mt-1 font-sans">
+                    {form.formState.errors.message.message}
+                  </p>
+                )}
+              </div>
+              <div className="flex space-x-3">
+                <Button
+                  type="button"
+                  variant="secondary"
+                  className="flex-1"
+                  onClick={() => {
+                    setShowJoinModal(false);
+                    form.reset();
+                    setSelectedTeamId(null);
+                  }}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  type="submit"
+                  className="flex-1"
+                  disabled={!form.formState.isValid || isJoining}
+                >
+                  {isJoining ? 'Sending...' : 'Send Request'}
+                </Button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BrowseTeamsPage;

apps/hackathon/src/app/teams/create/page.tsx

@@ -0,0 +1,308 @@
+import { FC, ReactElement, useState } from 'react';
+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 { teamCreateSchema, TTeamCreateForm, useCreateTeam, ETeamVisibility, useUploadFile } from '@imphnen-frontend-service/service';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import { CitySelect } from '../../../components/city-select';
+
+const CreateTeamPage: FC = (): ReactElement => {
+  const navigate = useNavigate();
+  const [logoFile, setLogoFile] = useState<File | null>(null);
+  const [logoPreview, setLogoPreview] = useState<string>('');
+  const [bannerFile, setBannerFile] = useState<File | null>(null);
+  const [bannerPreview, setBannerPreview] = useState<string>('');
+
+  const form = useForm<TTeamCreateForm>({
+    resolver: zodResolver(teamCreateSchema),
+    mode: 'all',
+    defaultValues: {
+      visibility: ETeamVisibility.PUBLIC,
+      logo: null,
+      banner: null,
+    },
+  });
+
+  const { mutateAsync: createTeam, isPending: isCreating } = useCreateTeam();
+  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
+
+  const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setLogoFile(file);
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setLogoPreview(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleBannerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setBannerFile(file);
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setBannerPreview(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const onSubmit = form.handleSubmit(async (data) => {
+    try {
+      let logoUrl = null;
+      let bannerUrl = null;
+
+      if (logoFile) {
+        const logoResult = await uploadFile(logoFile);
+        logoUrl = logoResult.data.url;
+      }
+
+      if (bannerFile) {
+        const bannerResult = await uploadFile(bannerFile);
+        bannerUrl = bannerResult.data.url;
+      }
+
+      const result = await createTeam({
+        ...data,
+        logo: logoUrl,
+        banner: bannerUrl,
+      });
+
+      navigate(`/teams/${result.data.id}`);
+    } catch (error) {
+      console.error('Failed to create team:', error);
+    }
+  });
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-neutral-950">
+      {/* Header */}
+      <div className="bg-white dark:bg-neutral-900 border-b dark:border-neutral-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 dark:text-white">Create Your Team</h1>
+          <p className="text-gray-600 dark:text-neutral-400 mt-1">Build your hackathon dream team</p>
+        </div>
+      </div>
+
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-900/50 p-8">
+          <form onSubmit={onSubmit} className="space-y-6">
+            {/* Banner Upload */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-2">
+                Team Banner <span className="text-gray-400 dark:text-neutral-500">(Optional)</span>
+              </label>
+              {bannerPreview ? (
+                <div className="relative">
+                  <img
+                    src={bannerPreview}
+                    alt="Banner preview"
+                    className="w-full h-48 object-cover rounded-lg border-2 border-gray-200 dark:border-neutral-700"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setBannerFile(null);
+                      setBannerPreview('');
+                    }}
+                    className="absolute top-2 right-2 bg-red-500 text-white px-3 py-1 rounded-lg text-sm hover:bg-red-600"
+                  >
+                    Remove
+                  </button>
+                </div>
+              ) : (
+                <label className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-gray-300 dark:border-neutral-600 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-neutral-800">
+                  <div className="text-center">
+                    <p className="text-gray-500 dark:text-neutral-400">Click to upload banner</p>
+                    <p className="text-xs text-gray-400 dark:text-neutral-500 mt-1">1200x400 recommended</p>
+                  </div>
+                  <input
+                    type="file"
+                    accept="image/*"
+                    className="hidden"
+                    onChange={handleBannerChange}
+                  />
+                </label>
+              )}
+            </div>
+
+            {/* Logo Upload */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-2">
+                Team Logo <span className="text-gray-400 dark:text-neutral-500">(Optional, but highly recommended)</span>
+              </label>
+              <div className="flex items-center space-x-4">
+                {logoPreview ? (
+                  <img
+                    src={logoPreview}
+                    alt="Logo preview"
+                    className="w-24 h-24 rounded-full object-cover border-2 border-gray-200 dark:border-neutral-700"
+                  />
+                ) : (
+                  <div className="w-24 h-24 rounded-full bg-gray-200 dark:bg-neutral-700 flex items-center justify-center">
+                    <span className="text-gray-400 dark:text-neutral-500 text-3xl">👥</span>
+                  </div>
+                )}
+                <div>
+                  <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">
+                      {logoPreview ? 'Change Logo' : 'Upload Logo'}
+                    </span>
+                    <input
+                      id="logo"
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={handleLogoChange}
+                    />
+                  </label>
+                  {logoPreview && (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setLogoFile(null);
+                        setLogoPreview('');
+                      }}
+                      className="ml-3 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
+                    >
+                      Remove
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Team Name */}
+            <ControlledInputField
+              control={form.control}
+              label="Team Name"
+              placeholder="Enter your team name"
+              name="name"
+            />
+
+            {/* City */}
+            <div className="space-y-2">
+              <label className="block text-sm font-medium text-gray-700 dark:text-neutral-300">
+                City <span className="text-red-500">*</span>
+              </label>
+              <Controller
+                control={form.control}
+                name="city"
+                render={({ field, fieldState }) => (
+                  <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 dark:text-neutral-300">
+                Description <span className="text-red-500">*</span>
+              </label>
+              <Controller
+                control={form.control}
+                name="description"
+                render={({ field, fieldState }) => (
+                  <div>
+                    <Textarea
+                      {...field}
+                      placeholder="Tell others about your team, what you're looking for, your goals..."
+                      rows={4}
+                      className="w-full"
+                    />
+                    {fieldState.error && (
+                      <p className="text-sm text-red-500 mt-1">{fieldState.error.message}</p>
+                    )}
+                  </div>
+                )}
+              />
+            </div>
+
+            {/* Visibility */}
+            <div className="space-y-2">
+              <label className="block text-sm font-medium text-gray-700 dark:text-neutral-300">
+                Team Visibility <span className="text-red-500">*</span>
+              </label>
+              <Controller
+                control={form.control}
+                name="visibility"
+                render={({ field }) => (
+                  <div className="space-y-3">
+                    <label className="flex items-start space-x-3 cursor-pointer border dark:border-neutral-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-neutral-800">
+                      <input
+                        type="radio"
+                        {...field}
+                        value={ETeamVisibility.PUBLIC}
+                        checked={field.value === ETeamVisibility.PUBLIC}
+                        className="mt-1"
+                      />
+                      <div>
+                        <p className="font-medium text-gray-900 dark:text-white">Public</p>
+                        <p className="text-sm text-gray-600 dark:text-neutral-400">
+                          Team will be visible in Browse Teams. Anyone can request to join.
+                        </p>
+                      </div>
+                    </label>
+                    <label className="flex items-start space-x-3 cursor-pointer border dark:border-neutral-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-neutral-800">
+                      <input
+                        type="radio"
+                        {...field}
+                        value={ETeamVisibility.PRIVATE}
+                        checked={field.value === ETeamVisibility.PRIVATE}
+                        className="mt-1"
+                      />
+                      <div>
+                        <p className="font-medium text-gray-900 dark:text-white">Private</p>
+                        <p className="text-sm text-gray-600 dark:text-neutral-400">
+                          Team is hidden from Browse Teams. Members can only join via invitation.
+                        </p>
+                      </div>
+                    </label>
+                  </div>
+                )}
+              />
+            </div>
+
+            {/* Warning */}
+            <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> As team leader, you cannot leave or join another team after creating this team.
+              </p>
+            </div>
+
+            {/* Submit Button */}
+            <div className="flex space-x-3 pt-4">
+              <Button
+                type="button"
+                variant="secondary"
+                className="flex-1"
+                onClick={() => navigate('/dashboard')}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                className="flex-1"
+                disabled={!form.formState.isValid || isCreating || isUploading}
+              >
+                {isCreating || isUploading ? 'Creating Team...' : 'Create Team'}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateTeamPage;