add maintenance page

feat(hackathon): Change "edit profile" into modal dialog (#65 )
* feat: update landing page * feat: Add favicon and SEO (JSON-LD schema, meta tags) - Add favicon image - Add JSON-LD schema for Hackathon event - Add react-helmet-async for managing meta tags * chore: remove react-helmet-async * chore: update landing page * chore: update UI for signup and login - add back button for better UX * feat: add image loading state and skeleton UI for team dashboard * fix: landing navbar not sticky to top, fix onboarding UI * feat(hackathon): update UI - Update dashboard, onboarding user, edit profile, and team layout to make it more consistent * fix: optimize placeholder banner image & minor fix dark mode * feat(hackathon): update landing page dark mode color scheme * feat(hackathon): update auth page dark mode color scheme * feat(hackathon): dashboard UI improvement and dark mode adjustment * feat(hackathon): browse team page - update dark mode color scheme - add some border style to give outline and depth - change emoji to icon * feat(hackathon): update team page - update dark mode color scheme for team page: view, team edit, and submit project page - fix bug in chat where messages are displayed double - make the form field size consistent * feat(hackathon): update dark mode onboarding and edit profile * feat(hackathon): change "edit profile" to modal dialog - Add "edit profile" modal dialog that can be triggered from dashboard - Update background overlay for dark mode - Update dark mode for auth callback * feat(hackathon): dark mode for user page --------- Co-authored-by: Maulana Sodiqin <sodiqincahyana1@gmail.com> Co-authored-by: Muhammad Zakir Ramadhan <61570975+zakirkun@users.noreply.github.com>
2025-11-27 23:44:56 +07:00 · 2025-11-27 16:25:21 +07:00 · 2025-11-27 15:12:45 +07:00 · 2025-11-26 16:53:46 +07:00 · 2025-11-26 16:50:54 +07:00 · 2025-11-26 16:41:10 +07:00
67 changed files with 4916 additions and 1578 deletions
@@ -7,6 +7,10 @@ on:
    paths:
      - 'apps/backoffice/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY

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

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

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

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

+concurrency:
+  group: deploy-vps
+  cancel-in-progress: false
+
 jobs:
  deploy:
    runs-on: ubuntu-latest
@@ -21,6 +25,7 @@ jobs:
          username: ${{ secrets.SSH_USER }}
          key: ${{ secrets.SSH_KEY }}
          port: ${{ secrets.SSH_PORT }}
+          command_timeout: 30m
          script: |
            set -e
            if [ ! -d ~/imphnen-frontend-service ]; then
@@ -34,6 +39,6 @@ jobs:
            NEXT_PUBLIC_SUPABASE_ANON_KEY=${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
            EOF
            docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml down || true
-            docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml build
+            DOCKER_BUILDKIT=1 docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml build --progress=plain
            docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml up -d
            docker image prune -af
@@ -1 +1 @@
-Tue, Nov 25, 2025 11:09:55 AM
+Tue, Nov 25, 2025  4:21:27 PM
@@ -1 +1 @@
-Tue, Nov 25, 2025 11:09:55 AM
+Tue, Nov 25, 2025  4:21:27 PM
@@ -1 +1 @@
-Tue, Nov 25, 2025 11:09:55 AM
+Tue, Nov 25, 2025  4:21:27 PM
@@ -1 +1 @@
-Tue, Nov 25, 2025 11:09:55 AM
+Tue, Nov 25, 2025  16:42:27 PM
@@ -1,2 +0,0 @@
-# Deployment trigger
-# Updated to deploy circular dependency fixes and auth hooks
@@ -2,12 +2,36 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <title>Hackathon</title>
+    <title>IMPHNEN x Kolosal.ai Hackathon 2025</title>
    <base href="/" />
-
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="/logos/simple.svg" />
+    <meta
+      name="description"
+      content="Ikuti IMPHNEN x Kolosal.ai Hackathon 2025! Kompetisi coding online gratis dengan total hadiah Rp14.500.000. Tema: Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif."
+    />
+    <meta
+      name="keywords"
+      content="hackathon, lomba coding, kompetisi it, imphnen, kolosal.ai, ai hackathon, lomba programming 2025"
+    />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/images/imphnen-logo-simple.svg"
+    />
    <link rel="stylesheet" href="/src/index.css" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://hackathon.imphnen.dev/" />
+    <meta property="og:title" content="IMPHNEN x Kolosal.ai Hackathon 2025" />
+    <meta
+      property="og:description"
+      content="Total hadiah Rp14.500.000! Daftar sekarang dan wujudkan inovasi AI-mu untuk membantu usaha lokal."
+    />
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://hackathon.imphnen.dev/" />
+    <meta
+      property="twitter:title"
+      content="IMPHNEN x Kolosal.ai Hackathon 2025"
+    />
  </head>
  <body>
    <div id="root"></div>
@@ -0,0 +1,10 @@
+<svg width="82" height="24" viewBox="0 0 82 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9814 11.6032C15.0691 11.7133 15.1239 11.8495 15.124 12C15.124 12.1501 15.0698 12.2867 14.9825 12.3968L26.8264 24H7.79044L7.76667 23.9757L0.0248413 16.3911L0 16.3679V7.63213L0.0248413 7.60885L7.76667 0.0243365L7.79044 0H26.8264L14.9814 11.6032ZM14.8659 12.5111C14.7535 12.5968 14.6143 12.6507 14.4609 12.6507C14.3071 12.6507 14.1673 12.5971 14.0548 12.5111L10.3977 16.0938C10.5164 16.2113 10.5899 16.3726 10.5899 16.5509C10.5899 16.6459 10.5668 16.7352 10.5295 16.8165L17.6956 23.8371H25.8608C25.8683 23.78 25.8804 23.7233 25.903 23.6699C25.9358 23.5923 25.9831 23.5211 26.0434 23.4614L14.8659 12.5111ZM10.3307 8.06807C10.2184 8.15365 10.0801 8.20766 9.92678 8.20774C9.80008 8.20774 9.68295 8.17075 9.58225 8.1104L5.61305 12L9.65353 15.9584C9.73677 15.9215 9.82951 15.9012 9.92678 15.9012C10.0509 15.9013 10.1655 15.9372 10.2648 15.9954L13.9381 12.3968C13.8511 12.2868 13.7977 12.1499 13.7977 12C13.7978 11.8498 13.8518 11.7132 13.9392 11.6032L10.3307 8.06807ZM10.4906 7.22053C10.5522 7.3192 10.5899 7.4339 10.5899 7.55806C10.5899 7.70823 10.5357 7.84479 10.4485 7.95485L14.0558 11.4889C14.1682 11.4034 14.3076 11.3503 14.4609 11.3503C14.6139 11.3503 14.7536 11.4026 14.8659 11.4879L26.0434 0.537519C25.9835 0.477938 25.9356 0.407383 25.903 0.33013C25.8804 0.276608 25.8682 0.220166 25.8608 0.162949H17.6956L10.4906 7.22053Z" fill="#0D0E0F"/>
+<path d="M82 5.69697V17.3333H80.291V5.69697H82Z" fill="#0D0E0F"/>
+<path d="M73.9503 17.5265C73.3939 17.5265 72.8909 17.4242 72.4413 17.2197C71.9916 17.0114 71.6353 16.7102 71.3724 16.3163C71.1133 15.9223 70.9837 15.4394 70.9837 14.8674C70.9837 14.375 71.079 13.9697 71.2695 13.6515C71.4601 13.3333 71.7173 13.0814 72.0412 12.8958C72.3651 12.7102 72.7271 12.5701 73.1272 12.4754C73.5273 12.3807 73.935 12.3087 74.3504 12.2595C74.8762 12.1989 75.303 12.1496 75.6307 12.1117C75.9584 12.0701 76.1966 12.0038 76.3452 11.9129C76.4938 11.822 76.5681 11.6742 76.5681 11.4697V11.4299C76.5681 10.9337 76.4271 10.5492 76.1452 10.2765C75.867 10.0038 75.4516 9.86742 74.8991 9.86742C74.3237 9.86742 73.8702 9.99432 73.5387 10.2481C73.211 10.4981 72.9843 10.7765 72.8585 11.0833L71.2524 10.7197C71.4429 10.1894 71.7211 9.76136 72.0869 9.4356C72.4565 9.10606 72.8814 8.86742 73.3615 8.71969C73.8417 8.56818 74.3466 8.49242 74.8762 8.49242C75.2268 8.49242 75.5983 8.53409 75.9908 8.61742C76.3871 8.69697 76.7568 8.84469 77.0997 9.0606C77.4465 9.27651 77.7304 9.58523 77.9514 9.98674C78.1724 10.3845 78.2829 10.9015 78.2829 11.5379V17.3333H76.6139V16.1401H76.5453C76.4348 16.3598 76.269 16.5758 76.048 16.7879C75.827 17 75.5431 17.1761 75.1963 17.3163C74.8496 17.4564 74.4342 17.5265 73.9503 17.5265ZM74.3218 16.1629C74.7943 16.1629 75.1982 16.0701 75.5336 15.8845C75.8727 15.6989 76.1299 15.4564 76.3052 15.1572C76.4843 14.8542 76.5738 14.5303 76.5738 14.1856V13.0606C76.5129 13.1212 76.3947 13.178 76.2195 13.2311C76.048 13.2803 75.8517 13.3239 75.6307 13.3617C75.4097 13.3958 75.1944 13.428 74.9848 13.4583C74.7753 13.4848 74.6 13.5076 74.459 13.5265C74.1275 13.5682 73.8245 13.6383 73.5502 13.7367C73.2796 13.8352 73.0624 13.9773 72.8986 14.1629C72.7385 14.3447 72.6585 14.5871 72.6585 14.8901C72.6585 15.3106 72.8147 15.6288 73.1272 15.8447C73.4397 16.0568 73.8379 16.1629 74.3218 16.1629Z" fill="#0D0E0F"/>
+<path d="M69.613 10.7367L68.064 11.0095C67.9992 10.8125 67.8963 10.625 67.7553 10.447C67.6182 10.2689 67.4314 10.1231 67.1952 10.0095C66.9589 9.89583 66.6636 9.83901 66.3092 9.83901C65.8253 9.83901 65.4214 9.94697 65.0975 10.1629C64.7736 10.375 64.6116 10.6496 64.6116 10.9867C64.6116 11.2784 64.7202 11.5133 64.9374 11.6913C65.1546 11.8693 65.5052 12.0151 65.9891 12.1288L67.3838 12.447C68.1916 12.6326 68.7937 12.9186 69.19 13.3049C69.5863 13.6913 69.7845 14.1932 69.7845 14.8106C69.7845 15.3333 69.632 15.7992 69.3272 16.2083C69.0262 16.6136 68.6051 16.9318 68.064 17.1629C67.5267 17.3939 66.9037 17.5095 66.1949 17.5095C65.2118 17.5095 64.4097 17.3011 63.7885 16.8845C63.1674 16.464 62.7864 15.8674 62.6454 15.0947L64.2972 14.8447C64.4001 15.2727 64.6116 15.5966 64.9317 15.8163C65.2518 16.0322 65.6691 16.1401 66.1835 16.1401C66.7436 16.1401 67.1914 16.0246 67.5267 15.7936C67.862 15.5587 68.0297 15.2727 68.0297 14.9356C68.0297 14.6629 67.9268 14.4337 67.721 14.2481C67.5191 14.0625 67.2085 13.9223 66.7894 13.8276L65.3032 13.5038C64.484 13.3182 63.8781 13.0227 63.4856 12.6174C63.0969 12.2121 62.9026 11.6989 62.9026 11.0776C62.9026 10.5625 63.0474 10.1117 63.337 9.72538C63.6266 9.33901 64.0267 9.03788 64.5373 8.82197C65.0479 8.60227 65.6328 8.49242 66.2921 8.49242C67.2409 8.49242 67.9878 8.69697 68.5327 9.10606C69.0776 9.51136 69.4377 10.0549 69.613 10.7367Z" fill="#0D0E0F"/>
+<path d="M57.3021 17.5095C56.479 17.5095 55.7607 17.322 55.1472 16.947C54.5337 16.572 54.0574 16.0473 53.7182 15.3731C53.3791 14.6989 53.2095 13.911 53.2095 13.0095C53.2095 12.1042 53.3791 11.3125 53.7182 10.6345C54.0574 9.95644 54.5337 9.42992 55.1472 9.05492C55.7607 8.67992 56.479 8.49242 57.3021 8.49242C58.1252 8.49242 58.8435 8.67992 59.457 9.05492C60.0705 9.42992 60.5468 9.95644 60.8859 10.6345C61.2251 11.3125 61.3946 12.1042 61.3946 13.0095C61.3946 13.911 61.2251 14.6989 60.8859 15.3731C60.5468 16.0473 60.0705 16.572 59.457 16.947C58.8435 17.322 58.1252 17.5095 57.3021 17.5095ZM57.3078 16.0833C57.8413 16.0833 58.2833 15.9432 58.6339 15.6629C58.9845 15.3826 59.2436 15.0095 59.4112 14.5436C59.5827 14.0776 59.6685 13.5644 59.6685 13.0038C59.6685 12.447 59.5827 11.9356 59.4112 11.4697C59.2436 11 58.9845 10.6231 58.6339 10.339C58.2833 10.0549 57.8413 9.91288 57.3078 9.91288C56.7705 9.91288 56.3247 10.0549 55.9703 10.339C55.6197 10.6231 55.3587 11 55.1872 11.4697C55.0196 11.9356 54.9357 12.447 54.9357 13.0038C54.9357 13.5644 55.0196 14.0776 55.1872 14.5436C55.3587 15.0095 55.6197 15.3826 55.9703 15.6629C56.3247 15.9432 56.7705 16.0833 57.3078 16.0833Z" fill="#0D0E0F"/>
+<path d="M51.573 5.69697V17.3333H49.864V5.69697H51.573Z" fill="#0D0E0F"/>
+<path d="M44.132 17.5095C43.3089 17.5095 42.5906 17.322 41.9771 16.947C41.3636 16.572 40.8873 16.0473 40.5482 15.3731C40.209 14.6989 40.0395 13.911 40.0395 13.0095C40.0395 12.1042 40.209 11.3125 40.5482 10.6345C40.8873 9.95644 41.3636 9.42992 41.9771 9.05492C42.5906 8.67992 43.3089 8.49242 44.132 8.49242C44.9551 8.49242 45.6734 8.67992 46.2869 9.05492C46.9004 9.42992 47.3767 9.95644 47.7158 10.6345C48.055 11.3125 48.2245 12.1042 48.2245 13.0095C48.2245 13.911 48.055 14.6989 47.7158 15.3731C47.3767 16.0473 46.9004 16.572 46.2869 16.947C45.6734 17.322 44.9551 17.5095 44.132 17.5095ZM44.1377 16.0833C44.6712 16.0833 45.1132 15.9432 45.4638 15.6629C45.8144 15.3826 46.0735 15.0095 46.2412 14.5436C46.4126 14.0776 46.4984 13.5644 46.4984 13.0038C46.4984 12.447 46.4126 11.9356 46.2412 11.4697C46.0735 11 45.8144 10.6231 45.4638 10.339C45.1132 10.0549 44.6712 9.91288 44.1377 9.91288C43.6004 9.91288 43.1546 10.0549 42.8002 10.339C42.4496 10.6231 42.1886 11 42.0171 11.4697C41.8495 11.9356 41.7656 12.447 41.7656 13.0038C41.7656 13.5644 41.8495 14.0776 42.0171 14.5436C42.1886 15.0095 42.4496 15.3826 42.8002 15.6629C43.1546 15.9432 43.6004 16.0833 44.1377 16.0833Z" fill="#0D0E0F"/>
+<path d="M30.7951 17.3333V5.69697H32.5613V11.2538H32.7042L37.6141 5.69697H39.8376L35.1163 10.9356L39.8547 17.3333H37.7284L33.9445 12.1345L32.5613 13.714V17.3333H30.7951Z" fill="#0D0E0F"/>
+</svg>
@@ -2,13 +2,13 @@ import { Link } from 'react-router-dom';

 export default function NotFoundPage() {
  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950">
      <div className="text-center">
        <h1 className="text-9xl font-bold text-gray-200 mb-4">404</h1>
-        <h2 className="text-3xl font-semibold text-gray-900 mb-4">
+        <h2 className="text-3xl font-semibold text-gray-900 dark:text-gray-300 mb-4">
          Page Not Found
        </h2>
-        <p className="text-gray-600 mb-8">
+        <p className="text-gray-600 dark:text-gray-400 mb-8">
          The page you are looking for doesn't exist or has been moved.
        </p>
        <Link
@@ -13,62 +13,72 @@ const CallbackPage: FC = (): ReactElement => {
  useEffect(() => {
    const handleCallback = async () => {
      if (hasRunRef.current) {
-        console.log('[Callback] Already processed, skipping...');
+        // 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);
+        // 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));
+        // 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();
+        const {
+          data: { session: sessionData },
+          error: sessionError,
+        } = await supabase.auth.getSession();

        if (sessionError) {
-          console.error('[Callback] Session error:', 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.');
+          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,
-        });
+        // 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...');
+        // 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',
-          })
+          .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);
+          // 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');
+          // console.log('[Callback] User record created/updated successfully');
        }

        // Store user-friendly data in Zustand for UI purposes
@@ -77,9 +87,11 @@ const CallbackPage: FC = (): ReactElement => {
        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] || '',
+          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: '',
@@ -114,21 +126,21 @@ const CallbackPage: FC = (): ReactElement => {
          },
        });

-        console.log('[Callback] Session stored successfully');
+        // 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...');
+          // console.log('[Callback] User has completed onboarding, redirecting to dashboard...');
          globalThis.location.replace('/dashboard');
        } else {
-          console.log('[Callback] User needs onboarding, redirecting...');
+          // console.log('[Callback] User needs onboarding, redirecting...');
          globalThis.location.replace('/onboarding/user');
        }
      } catch (err) {
-        console.error('[Callback] Error:', err);
+        // console.error('[Callback] Error:', err);
        setError((err as Error).message);
        setIsProcessing(false);
        toast.error('An error occurred during login');
@@ -164,13 +176,13 @@ const CallbackPage: FC = (): ReactElement => {
  }

  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50">
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950">
      <div className="text-center">
        <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
-        <h2 className="text-xl font-semibold text-gray-900 mb-2">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
          Completing login...
        </h2>
-        <p className="text-gray-600">Please wait</p>
+        <p className="text-gray-600 dark:text-gray-400">Please wait</p>
      </div>
    </div>
  );
@@ -1,12 +1,15 @@
 import { useState } from 'react';
 import { supabase } from '@imphnen-frontend-service/service';
-import { Link } from 'react-router';
+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();
@@ -30,7 +33,7 @@ export default function ForgotPasswordPage() {
      setEmailSent(true);
      toast.success('Password reset email sent! Check your inbox.');
    } catch (err) {
-      console.error('Failed to send reset email:', err);
+      // console.error('Failed to send reset email:', err);
      toast.error((err as Error).message || 'Failed to send reset email');
    } finally {
      setIsLoading(false);
@@ -55,7 +58,8 @@ export default function ForgotPasswordPage() {

          <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.
+              Click the link in the email to reset your password. The link will
+              expire in 1 hour.
            </p>

            <Link to="/auth/login">
@@ -77,20 +81,33 @@ export default function ForgotPasswordPage() {
  }

  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
+        <div className="flex items-center justify-between mb-6">
+          <button
+            onClick={() => navigate('/auth/login')}
+            className="cursor-pointer text-primary-500 hover:text-primary-600 dark:text-primary-400 dark:hover:text-primary-300 text-base font-sans flex items-center"
+          >
+            <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
+            Back to Login
+          </button>
+          <ThemeToggle />
+        </div>
        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
            Forgot Password?
          </h2>
-          <p className="text-gray-600">
+          <p className="text-gray-600 dark:text-gray-400">
            No worries, we'll send you reset instructions
          </p>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
              Email Address
            </label>
            <input
@@ -100,7 +117,7 @@ export default function ForgotPasswordPage() {
              onChange={(e) => setEmail(e.target.value)}
              placeholder="your@email.com"
              disabled={isLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+              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>
@@ -113,12 +130,6 @@ export default function ForgotPasswordPage() {
            {isLoading ? 'Sending...' : 'Send Reset Link'}
          </button>
        </form>
-
-        <div className="mt-6 text-center">
-          <Link to="/auth/login" className="text-primary-600 hover:text-primary-700 font-semibold">
-            ← Back to Login
-          </Link>
-        </div>
      </div>
    </div>
  );
@@ -1,89 +0,0 @@
-import { FC, ReactElement, useEffect, useState } from 'react';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate } from 'react-router';
-import { useGitHubAuth } from '@imphnen-frontend-service/service';
-import { useSession } from '@imphnen-frontend-service/utils';
-import { GithubOutlined } from '@ant-design/icons';
-
-const LoginPage: FC = (): ReactElement => {
-  console.log('[LoginPage] Rendering...');
-
-  const navigate = useNavigate();
-  const { signInWithGitHub } = useGitHubAuth();
-  const [isGithubLoading, setIsGithubLoading] = useState(false);
-  const { isAuthenticated } = useSession();
-
-  console.log('[LoginPage] isAuthenticated:', isAuthenticated);
-
-  useEffect(() => {
-    console.log('[LoginPage] useEffect - isAuthenticated:', isAuthenticated);
-    if (isAuthenticated) {
-      console.log('[LoginPage] Redirecting to dashboard...');
-      navigate('/dashboard');
-    }
-  }, [isAuthenticated, navigate]);
-
-  const handleGithubLogin = async () => {
-    try {
-      setIsGithubLoading(true);
-      console.log('[Login] Initiating GitHub OAuth...');
-
-      const result = await signInWithGitHub();
-      console.log('[Login] OAuth result:', result);
-
-      // Check if we got a redirect URL
-      if (result?.url) {
-        console.log('[Login] Redirecting to GitHub OAuth:', result.url);
-        // Supabase should handle the redirect automatically
-        // If we're still here after 2 seconds, manually redirect
-        setTimeout(() => {
-          if (result.url) {
-            globalThis.location.href = result.url;
-          }
-        }, 2000);
-      } else {
-        console.error('[Login] No OAuth URL returned');
-        setIsGithubLoading(false);
-      }
-    } catch (error) {
-      console.error('[Login] GitHub login failed:', error);
-      setIsGithubLoading(false);
-    }
-  };
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 px-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-100">
-        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
-            Welcome to Hackathon
-          </h2>
-          <p className="text-gray-600">
-            Sign in with your GitHub account to join or create your hackathon team
-          </p>
-        </div>
-
-        <Button
-          className="w-full gap-2 py-3"
-          variant="secondary"
-          onClick={handleGithubLogin}
-          disabled={isGithubLoading}
-          type="button"
-        >
-          <GithubOutlined className="text-xl" />
-          <span className="font-semibold">
-            {isGithubLoading ? 'Connecting...' : 'Sign in with GitHub'}
-          </span>
-        </Button>
-
-        <div className="mt-6 text-center">
-          <p className="text-gray-500 text-sm">
-            By signing in, you agree to our Terms of Service and Privacy Policy
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default LoginPage;
@@ -1,11 +1,18 @@
 import { useState } from 'react';
-import { useGitHubAuth, useEmailAuth, supabase, useAuthStore } from '@imphnen-frontend-service/service';
+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...');
+  // console.log('[LoginPage] Rendering...');

  const navigate = useNavigate();
  const { setSession } = useAuthStore();
@@ -28,10 +35,10 @@ export default function LoginPage() {

    try {
      setIsEmailLoading(true);
-      console.log('[Login] Attempting email login...');
+      // console.log('[Login] Attempting email login...');

      const result = await signInWithEmail(email, password);
-      console.log('[Login] Email login successful:', result);
+      // console.log('[Login] Email login successful:', result);

      // Get user data from database
      const { data: userData } = await supabase
@@ -49,7 +56,8 @@ export default function LoginPage() {
        user: {
          id: result.user.id,
          email: result.user.email || '',
-          fullname: userData?.fullname || result.user.user_metadata?.full_name || '',
+          fullname:
+            userData?.fullname || result.user.user_metadata?.full_name || '',
          phone_number: userData?.phone_number || '',
          avatar: userData?.avatar || '',
          birthdate: userData?.birthdate || '',
@@ -86,47 +94,61 @@ export default function LoginPage() {
  const handleGithubLogin = async () => {
    try {
      setIsGithubLoading(true);
-      console.log('[Login] Initiating GitHub OAuth...');
+      // console.log('[Login] Initiating GitHub OAuth...');

      const result = await signInWithGitHub();
-      console.log('[Login] OAuth result:', result);
+      // 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);
+        // 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');
+        // console.error('[Login] No OAuth URL returned');
        setIsGithubLoading(false);
      }
    } catch (error) {
-      console.error('[Login] GitHub login failed:', error);
+      // console.error('[Login] GitHub login failed');
      setIsGithubLoading(false);
    }
  };

  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
+        <div className="flex items-center justify-between mb-6">
+          <button
+            onClick={() => navigate('/')}
+            className="cursor-pointer text-primary-500 hover:text-primary-600 dark:text-primary-400 dark:hover:text-primary-300 text-base font-sans flex items-center"
+          >
+            <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
+            Back to Homepage
+          </button>
+          <ThemeToggle />
+        </div>
+
        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
            Welcome Back
          </h2>
-          <p className="text-gray-600">
+          <p className="text-gray-600 dark:text-gray-400 font-sans">
            Sign in to join or create your hackathon team
          </p>
        </div>

        {error && (
-          <div className="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg">
-            <p className="text-red-600 text-sm">{error}</p>
+          <div className="mb-6 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+            <p className="text-red-600 dark:text-red-400 text-sm">{error}</p>
          </div>
        )}

        <form onSubmit={handleEmailLogin} className="space-y-4">
          <div>
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
              Email
            </label>
            <input
@@ -136,17 +158,23 @@ export default function LoginPage() {
              onChange={(e) => setEmail(e.target.value)}
              placeholder="your@email.com"
              disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+              className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
              required
            />
          </div>

          <div>
            <div className="flex items-center justify-between mb-1">
-              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+              <label
+                htmlFor="password"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+              >
                Password
              </label>
-              <Link to="/auth/forgot-password" className="text-sm text-primary-600 hover:text-primary-700">
+              <Link
+                to="/auth/forgot-password"
+                className="text-sm text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300"
+              >
                Forgot password?
              </Link>
            </div>
@@ -157,7 +185,7 @@ export default function LoginPage() {
              onChange={(e) => setPassword(e.target.value)}
              placeholder="••••••••"
              disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+              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>
@@ -165,23 +193,25 @@ export default function LoginPage() {
          <button
            type="submit"
            disabled={isEmailLoading}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
+            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"></div>
-          <span className="px-4 text-sm text-gray-500">OR</span>
-          <div className="flex-1 border-t border-gray-300"></div>
+          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
+          <span className="px-4 text-sm text-gray-500 dark:text-gray-400">
+            OR
+          </span>
+          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
        </div>

        <button
          onClick={handleGithubLogin}
          disabled={isGithubLoading}
          type="button"
-          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 border border-gray-300 rounded-lg font-semibold hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors"
+          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg font-semibold text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:cursor-not-allowed transition-colors cursor-pointer"
        >
          <GithubOutlined className="text-xl" />
          <span>
@@ -190,16 +220,19 @@ export default function LoginPage() {
        </button>

        <div className="mt-6 text-center">
-          <p className="text-gray-600 text-sm">
+          <p className="text-gray-600 dark:text-gray-400 text-sm">
            Don't have an account?{' '}
-            <a href="/auth/signup" className="text-primary-600 hover:text-primary-700 font-semibold">
+            <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 text-xs">
+          <p className="text-gray-500 dark:text-gray-500 text-xs">
            By signing in, you agree to our Terms of Service and Privacy Policy
          </p>
        </div>
@@ -10,17 +10,17 @@ export default function ResetPasswordPage() {
  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]);
+  // 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();
@@ -39,7 +39,7 @@ export default function ResetPasswordPage() {
      setIsLoading(true);

      const { error } = await supabase.auth.updateUser({
-        password: password
+        password: password,
      });

      if (error) {
@@ -52,39 +52,44 @@ export default function ResetPasswordPage() {
      await supabase.auth.signOut();
      navigate('/auth/login');
    } catch (err) {
-      console.error('Failed to reset password:', 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">
-        <div className="text-center">
-          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
-          <p className="text-gray-600">Verifying reset link...</p>
-        </div>
-      </div>
-    );
-  }
+  // 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 p-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
            Set New Password
          </h2>
-          <p className="text-gray-600">
+          <p className="text-gray-600 dark:text-gray-400">
            Enter your new password below
          </p>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
-            <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="password"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
              New Password
            </label>
            <input
@@ -94,14 +99,17 @@ export default function ResetPasswordPage() {
              onChange={(e) => setPassword(e.target.value)}
              placeholder="••••••••"
              disabled={isLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+              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 mb-1">
+            <label
+              htmlFor="confirmPassword"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
              Confirm New Password
            </label>
            <input
@@ -111,7 +119,7 @@ export default function ResetPasswordPage() {
              onChange={(e) => setConfirmPassword(e.target.value)}
              placeholder="••••••••"
              disabled={isLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+              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}
            />
@@ -1,8 +1,15 @@
 import { useState } from 'react';
-import { useGitHubAuth, useEmailAuth, supabase, useAuthStore } from '@imphnen-frontend-service/service';
+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();
@@ -38,30 +45,31 @@ export default function SignupPage() {

    try {
      setIsEmailLoading(true);
-      console.log('[Signup] Attempting email signup...');
+      // console.log('[Signup] Attempting email signup...');

      const result = await signUpWithEmail(email, password, fullname);
-      console.log('[Signup] Email signup successful:', result);
+      // 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({
+      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:', upsertError);
+        console.warn('[Signup] Failed to create user record');
      }

      // If session is available (email confirmation disabled), store it
@@ -94,13 +102,15 @@ export default function SignupPage() {
        navigate('/onboarding/user');
      } else {
        // Email confirmation is enabled
-        toast.success('Account created! Please check your email to verify your account.');
+        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);
+      // console.error('[Signup] Email signup failed:', err);
      setError((err as Error).message || 'Signup failed');
      setIsEmailLoading(false);
    }
@@ -109,45 +119,59 @@ export default function SignupPage() {
  const handleGithubLogin = async () => {
    try {
      setIsGithubLoading(true);
-      console.log('[Signup] Initiating GitHub OAuth...');
+      // console.log('[Signup] Initiating GitHub OAuth...');

      const result = await signInWithGitHub();
-      console.log('[Signup] OAuth result:', result);
+      // console.log('[Signup] OAuth result:', result);

      if (result?.url) {
-        console.log('[Signup] Redirecting to GitHub OAuth:', result.url);
+        // console.log('[Signup] Redirecting to GitHub OAuth:', result.url);
        globalThis.location.href = result.url;
      } else {
-        console.error('[Signup] No OAuth URL returned');
+        // console.error('[Signup] No OAuth URL returned');
        setIsGithubLoading(false);
      }
    } catch (error) {
-      console.error('[Signup] GitHub login failed:', error);
+      // console.error('[Signup] GitHub login failed:', error);
      setIsGithubLoading(false);
    }
  };

  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
+        <div className="flex items-center justify-between mb-6">
+          <button
+            onClick={() => navigate('/')}
+            className="cursor-pointer text-primary-500 hover:text-primary-600 dark:text-primary-400 dark:hover:text-primary-300 text-base font-sans flex items-center"
+          >
+            <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
+            Back to Homepage
+          </button>
+          <ThemeToggle />
+        </div>
+
        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
            Create Account
          </h2>
-          <p className="text-gray-600">
+          <p className="text-gray-600 dark:text-gray-400">
            Join the hackathon community
          </p>
        </div>

        {error && (
-          <div className="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg">
-            <p className="text-red-600 text-sm">{error}</p>
+          <div className="mb-6 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+            <p className="text-red-600 dark:text-red-400 text-sm">{error}</p>
          </div>
        )}

        <form onSubmit={handleEmailSignup} className="space-y-4">
          <div>
-            <label htmlFor="fullname" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="fullname"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
              Full Name
            </label>
            <input
@@ -157,13 +181,16 @@ export default function SignupPage() {
              onChange={(e) => setFullname(e.target.value)}
              placeholder="John Doe"
              disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+              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 mb-1">
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
              Email
            </label>
            <input
@@ -173,13 +200,16 @@ export default function SignupPage() {
              onChange={(e) => setEmail(e.target.value)}
              placeholder="your@email.com"
              disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+              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 mb-1">
+            <label
+              htmlFor="password"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
              Password
            </label>
            <input
@@ -189,13 +219,16 @@ export default function SignupPage() {
              onChange={(e) => setPassword(e.target.value)}
              placeholder="••••••••"
              disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+              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 mb-1">
+            <label
+              htmlFor="confirmPassword"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
              Confirm Password
            </label>
            <input
@@ -205,7 +238,7 @@ export default function SignupPage() {
              onChange={(e) => setConfirmPassword(e.target.value)}
              placeholder="••••••••"
              disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+              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>
@@ -213,23 +246,25 @@ export default function SignupPage() {
          <button
            type="submit"
            disabled={isEmailLoading}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
+            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"></div>
-          <span className="px-4 text-sm text-gray-500">OR</span>
-          <div className="flex-1 border-t border-gray-300"></div>
+          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
+          <span className="px-4 text-sm text-gray-500 dark:text-gray-400">
+            OR
+          </span>
+          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
        </div>

        <button
          onClick={handleGithubLogin}
          disabled={isGithubLoading}
          type="button"
-          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 border border-gray-300 rounded-lg font-semibold hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors"
+          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg font-semibold text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:cursor-not-allowed transition-colors cursor-pointer"
        >
          <GithubOutlined className="text-xl" />
          <span>
@@ -238,16 +273,19 @@ export default function SignupPage() {
        </button>

        <div className="mt-6 text-center">
-          <p className="text-gray-600 text-sm">
+          <p className="text-gray-600 dark:text-gray-400 text-sm">
            Already have an account?{' '}
-            <a href="/auth/login" className="text-primary-600 hover:text-primary-700 font-semibold">
+            <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 text-xs">
+          <p className="text-gray-500 dark:text-gray-500 text-xs">
            By signing up, you agree to our Terms of Service and Privacy Policy
          </p>
        </div>
@@ -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;
@@ -1,19 +1,57 @@
-import { FC, ReactElement } from 'react';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { Link, useNavigate } from 'react-router';
-import { useMyTeams, useMyInvitations, useRespondToInvitation, supabase, useAuthStore } from '@imphnen-frontend-service/service';
+import { FC, ReactElement, useEffect, useState } from 'react';
+import { Link } from 'react-router';
+import {
+  useMyTeams,
+  useMyInvitations,
+  useRespondToInvitation,
+  useAuthStore,
+} from '@imphnen-frontend-service/service';
 import { toast } from 'sonner';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Icon } from '@iconify/react';
+import ProfilePage from '../profile/page';
+
+type Invitation = {
+  id: string;
+  team: {
+    id?: string;
+    name?: string;
+    logo?: string;
+    banner?: string;
+    description?: string;
+    city?: string;
+    visibility?: string;
+    leader_id?: string;
+  };
+  inviter: {
+    id?: string;
+    fullname?: string;
+    email?: string;
+    avatar?: string;
+  };
+};

 const DashboardPage: FC = (): ReactElement => {
-  const navigate = useNavigate();
-  const { session, clearSession } = useAuthStore();
+  const { session } = useAuthStore();
+  const [showProfileModal, setShowProfileModal] = useState(false);
+  // Lock background scroll when profile modal is open
+  useEffect(() => {
+    if (showProfileModal) {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.body.style.overflow = originalOverflow || '';
+      };
+    }
+  }, [showProfileModal]);
  const { data: teamsData } = useMyTeams();
  const { data: invitationsData } = useMyInvitations();
  const { mutateAsync: respondToInvitation } = useRespondToInvitation();

  const user = session?.user;
  const myTeams = teamsData?.data || [];
-  const invitations = invitationsData?.data || [];
+  const invitations: Invitation[] = (invitationsData?.data ||
+    []) as Invitation[];

  const handleAcceptInvitation = async (invitationId: string) => {
    try {
@@ -35,78 +73,39 @@ const DashboardPage: FC = (): ReactElement => {
    }
  };

-  const handleLogout = async () => {
-    try {
-      // Clear Supabase session
-      await supabase.auth.signOut();
-
-      // Clear Zustand store
-      clearSession();
-
-      // Clear localStorage
-      localStorage.clear();
-
-      toast.success('Logged out successfully');
-
-      // Redirect to login
-      navigate('/auth/login');
-    } catch (error) {
-      console.error('Logout error:', error);
-      // Even if there's an error, clear everything and redirect
-      clearSession();
-      localStorage.clear();
-      navigate('/auth/login');
-    }
-  };
-
  return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Header */}
-      <div className="bg-white border-b">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <h1 className="text-3xl font-bold text-gray-900">
-                Welcome, {user?.fullname || 'User'}!
-              </h1>
-              <p className="text-gray-600 mt-1">
-                {user?.location && `📍 ${user.location}`}
-              </p>
-            </div>
-            <div className="flex items-center space-x-3">
-              {user?.avatar && (
-                <img
-                  src={user.avatar}
-                  alt="Profile"
-                  className="w-16 h-16 rounded-full object-cover border-2 border-gray-200"
-                />
-              )}
-              <Button
-                onClick={handleLogout}
-                variant="secondary"
-                className="bg-red-500 hover:bg-red-600 text-white"
-              >
-                Logout
-              </Button>
-            </div>
-          </div>
+    <>
+      <div 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>
-      </div>

-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* Team Invitations */}
        {invitations.length > 0 && (
-          <div className="mb-8 bg-blue-50 border border-blue-200 rounded-lg p-6">
-            <h2 className="text-xl font-bold text-gray-900 mb-4">
+          <div className="mb-8 bg-primary-50 dark:bg-blue-900/20 border border-primary-200 dark:border-blue-800 rounded-lg p-6">
+            <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
              Team Invitations ({invitations.length})
            </h2>
-            <div className="space-y-3">
+            <div className="space-y-3 font-sans">
              {invitations.map((invitation) => (
-                <div key={invitation.id} className="bg-white p-4 rounded-lg shadow-sm flex items-center justify-between">
+                <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">{invitation.team.name}</p>
-                    <p className="text-sm text-gray-600">
-                      Invited by {invitation.inviter.fullname}
+                    <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">
@@ -130,39 +129,51 @@ const DashboardPage: FC = (): ReactElement => {
          </div>
        )}

-        {/* My Teams */}
        {myTeams.length > 0 ? (
-          <div className="mb-8">
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">My Team</h2>
-            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          <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 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
+                  to={'/teams/' + team.id}
+                  className="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
                >
                  {team.banner && (
-                    <img
-                      src={team.banner}
-                      alt={team.name}
-                      className="w-full h-32 object-cover"
-                    />
+                    <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-6">
-                    <div className="flex items-center space-x-3 mb-3">
+                  <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-12 h-12 rounded-full object-cover"
+                          className="w-20 h-20 rounded-full object-cover shrink-0 border-black dark:border-gray-700"
                        />
                      )}
                      <div>
-                        <h3 className="text-lg font-bold text-gray-900">{team.name}</h3>
-                        <p className="text-sm text-gray-600">📍 {team.city}</p>
+                        <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 text-sm line-clamp-2">
+                    <p className="text-gray-600 dark:text-gray-400 line-clamp-3 text-ellipsis font-sans">
                      {team.description}
                    </p>
                  </div>
@@ -171,99 +182,109 @@ const DashboardPage: FC = (): ReactElement => {
            </div>
          </div>
        ) : (
-          /* No Team - Show CTAs */
-          <div className="bg-white rounded-lg shadow-md p-8">
-            <div className="text-center mb-8">
-              <h2 className="text-2xl font-bold text-gray-900 mb-2">
-                You're not in a team yet
+          <div className="mb-6 md:mb-8 bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 md:p-8">
+            <div className="text-center">
+              <div className="text-3xl md:text-4xl mb-2 md:mb-3">👋</div>
+              <h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-1 md:mb-2">
+                You are not in a team yet
              </h2>
-              <p className="text-gray-600">
-                Join an existing team or create your own to get started
+              <p className="text-sm md:text-base text-gray-600 dark:text-gray-400 font-sans">
+                Use the sidebar to browse teams or create your own
              </p>
            </div>
-
-            <div className="grid gap-6 md:grid-cols-2 max-w-2xl mx-auto">
-              <Link
-                to="/teams/browse"
-                className="bg-blue-600 text-white rounded-lg p-6 hover:bg-blue-700 transition-colors text-center"
-              >
-                <div className="text-4xl mb-3">🔍</div>
-                <h3 className="text-xl font-bold mb-2">Browse Teams</h3>
-                <p className="text-blue-100">
-                  Find and join existing teams looking for members
-                </p>
-              </Link>
-
-              <Link
-                to="/teams/create"
-                className="bg-green-600 text-white rounded-lg p-6 hover:bg-green-700 transition-colors text-center"
-              >
-                <div className="text-4xl mb-3">➕</div>
-                <h3 className="text-xl font-bold mb-2">Create Team</h3>
-                <p className="text-green-100">
-                  Start your own team and invite members
-                </p>
-              </Link>
-            </div>
          </div>
        )}

-        {/* User Profile Card */}
-        <div className="mt-8 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl shadow-lg overflow-hidden">
-          <div className="bg-gradient-to-r from-blue-600 to-indigo-600 h-24"></div>
-          <div className="px-8 pb-8">
-            <div className="flex items-start -mt-12 mb-6">
-              {user?.avatar && (
-                <img
-                  src={user.avatar}
-                  alt={user.fullname}
-                  className="w-24 h-24 rounded-full border-4 border-white shadow-lg object-cover"
-                />
-              )}
-              <div className="ml-6 mt-14">
-                <h2 className="text-2xl font-bold text-gray-900">{user?.fullname}</h2>
-                {user?.location ? (
-                  <p className="text-gray-600 flex items-center mt-1">
-                    <svg className="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
-                      <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
-                    </svg>
-                    {user.location}
-                  </p>
+        <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"
+                  />
                ) : (
-                  <Link to="/onboarding/user" className="text-blue-600 hover:text-blue-700 text-sm mt-1 inline-block">
-                    Complete your profile →
-                  </Link>
+                  <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>
-            </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>

-            <div className="space-y-6">
+                  {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 rounded-lg p-4 shadow-sm">
-                  <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-2">About</h3>
-                  <p className="text-gray-800 leading-relaxed">{user.bio}</p>
+                <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm w-full max-w-full overflow-x-hidden">
+                  <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-2">
+                    About
+                  </h3>
+                  <p className="text-gray-800 dark:text-gray-200 leading-relaxed line-clamp-3 wrap-break-word break-all overflow-hidden w-full max-w-full">
+                    {user.bio}
+                  </p>
                </div>
              )}
-
-              <div className="bg-white rounded-lg p-4 shadow-sm">
-                <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-3">Contact</h3>
-                <div className="flex items-center text-gray-700">
-                  <svg className="w-5 h-5 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
-                    <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
-                  </svg>
-                  <span className="text-gray-900">{user?.email}</span>
+              <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
+                <h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
+                  Contact
+                </h3>
+                <div className="flex items-center text-gray-700 dark:text-gray-300">
+                  <span className="text-gray-900 dark:text-white">
+                    {user?.email}
+                  </span>
                </div>
              </div>
-
              {user?.skills && user.skills.length > 0 && (
-                <div className="bg-white rounded-lg p-4 shadow-sm">
-                  <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-3">Skills</h3>
-                  <div className="flex flex-wrap gap-3">
+                <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
+                  <h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
+                    Skills
+                  </h3>
+                  <div className="flex flex-wrap gap-2">
                    {user.skills.map((skill: string) => (
                      <span
                        key={skill}
-                        className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium shadow-sm hover:bg-blue-700 transition-colors"
+                        className="inline-flex items-center px-4 py-2 border border-primary-600 dark:border-gray-500 text-primary-600 dark:text-white rounded-4xl text-xs font-medium dark:bg-gray-600"
                      >
                        {skill}
                      </span>
@@ -275,7 +296,11 @@ const DashboardPage: FC = (): ReactElement => {
          </div>
        </div>
      </div>
-    </div>
+      <ProfilePage
+        open={showProfileModal}
+        onClose={() => setShowProfileModal(false)}
+      />
+    </>
  );
 };

@@ -1,4 +1,9 @@
-import { Outlet, ScrollRestoration, useLocation, useNavigate } from 'react-router-dom';
+import {
+  Outlet,
+  ScrollRestoration,
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import { supabase } from '@imphnen-frontend-service/service';

@@ -14,57 +19,57 @@ export default function RootLayout() {
    const checkAuth = async () => {
      const pathname = location.pathname;

-      console.log('[Layout] Checking auth for route:', pathname);
-
      // Allow hackathon pages without checks
      if (pathname.startsWith('/hackathons')) {
-        console.log('[Layout] Public route, allowing access');
        setIsChecking(false);
        return;
      }

      // Allow auth callback without checks
      if (pathname === '/auth/callback') {
-        console.log('[Layout] Auth callback, allowing access');
        setIsChecking(false);
        return;
      }

      // Check Supabase session
-      const { data: { session }, error } = await supabase.auth.getSession();
+      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';
+      const isPublicAuthPage = pathname === '/maintenance';
+      // 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') {
-          console.log('[Layout] Already authenticated, redirecting to dashboard');
          navigate('/dashboard', { replace: true });
          setIsChecking(false);
          return;
        }
        // Allow unauthenticated access
-        console.log('[Layout] Public auth page, allowing access');
        setIsChecking(false);
        return;
      }

      // Home page - allow everyone to view the landing page
      if (pathname === '/') {
-        console.log('[Layout] Landing page, allowing access');
        setIsChecking(false);
        return;
      }

      // Require authentication for all other routes
      if (!session) {
-        console.log('[Layout] No session, redirecting to login');
-        navigate('/auth/login', { replace: true });
+        navigate('/maintenance', { replace: true });
+        // navigate('/auth/login', { replace: true });
        setIsChecking(false);
        return;
      }
@@ -87,17 +92,15 @@ export default function RootLayout() {
          const hasLocation = !!userData?.location;

          if (!hasLocation) {
-            console.log('[Layout] User needs onboarding, redirecting');
            navigate('/onboarding/user', { replace: true });
            setIsChecking(false);
            return;
          }
        } catch (error) {
-          console.error('[Layout] Unexpected error checking onboarding:', error);
+          // Silently handle error
        }
      }

-      console.log('[Layout] Auth check passed');
      setIsChecking(false);
    };

@@ -107,10 +110,10 @@ export default function RootLayout() {
  // Show loading state while checking auth
  if (isChecking) {
    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50">
+      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-neutral-950">
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
-          <p className="text-gray-600">Loading...</p>
+          <p className="text-gray-600 dark:text-neutral-400">Loading...</p>
        </div>
      </div>
    );
@@ -0,0 +1,21 @@
+export default function MaintenancePage() {
+  return (
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 px-4">
+      <div className="text-center">
+        <h1 className="text-6xl font-bold text-yellow-600 mb-4">🚧</h1>
+        <h2 className="text-3xl font-semibold mb-2">We'll be back soon!</h2>
+        <p className="text-gray-600">
+          Our site is currently undergoing scheduled maintenance.
+          <br />
+          Thank you for your patience.
+        </p>
+        <a
+          href="/"
+          className="mt-4 inline-block text-primary-600 hover:underline"
+        >
+          Back to Homepage
+        </a>
+      </div>
+    </div>
+  );
+}
@@ -3,8 +3,19 @@ import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
 import { useNavigate } from 'react-router';
 import { useForm, Controller } from 'react-hook-form';
-import { userOnboardingSchema, TUserOnboardingForm, useUpdateUserMe, useUploadAvatar, useUserMe, useAuthStore } from '@imphnen-frontend-service/service';
+import {
+  userOnboardingSchema,
+  TUserOnboardingForm,
+  useUpdateUserMe,
+  useUploadAvatar,
+  useUserMe,
+  useAuthStore,
+} from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from 'sonner';
+
+import { CitySelect } from '../../../components/city-select';
+import { Icon } from '@iconify/react';

 const ROLE_OPTIONS = [
  'Frontend Developer',
@@ -17,12 +28,6 @@ const ROLE_OPTIONS = [
  'Mobile Developer',
 ];

-const INDONESIAN_CITIES = [
-  'Jakarta', 'Surabaya', 'Bandung', 'Medan', 'Semarang',
-  'Makassar', 'Palembang', 'Tangerang', 'Depok', 'Bekasi',
-  'Yogyakarta', 'Malang', 'Bogor', 'Batam', 'Pekanbaru',
-];
-
 const UserOnboardingPage: FC = (): ReactElement => {
  const navigate = useNavigate();
  const [avatarFile, setAvatarFile] = useState<File | null>(null);
@@ -30,7 +35,8 @@ const UserOnboardingPage: FC = (): ReactElement => {

  const { data: userData } = useUserMe();
  const { mutateAsync: updateUser, isPending: isUpdating } = useUpdateUserMe();
-  const { mutateAsync: uploadAvatar, isPending: isUploading } = useUploadAvatar();
+  const { mutateAsync: uploadAvatar, isPending: isUploading } =
+    useUploadAvatar();
  const { session } = useAuthStore();

  const form = useForm<TUserOnboardingForm>({
@@ -65,49 +71,46 @@ const UserOnboardingPage: FC = (): ReactElement => {

  const onSubmit = form.handleSubmit(async (data) => {
    try {
-      console.log('[Onboarding] Starting submission...', data);
      let avatarUrl = session?.user?.avatar || null;

      // Upload avatar if a new file was selected
      if (avatarFile) {
-        console.log('[Onboarding] Uploading avatar...');
        const uploadResult = await uploadAvatar(avatarFile);
        avatarUrl = uploadResult.data.url;
-        console.log('[Onboarding] Avatar uploaded:', avatarUrl);
      }

      // Update user in Supabase
-      console.log('[Onboarding] Updating user in Supabase...');
-      const result = await updateUser({
+      await updateUser({
        fullname: data.fullname,
        avatar: avatarUrl,
        location: data.location,
        bio: data.bio,
        skills: data.skills,
      });
-      console.log('[Onboarding] User updated successfully:', result);

      // Wait a bit for the onSuccess handler to update localStorage
      // The updateUser mutation's onSuccess handler updates the Zustand store and localStorage
-      await new Promise(resolve => setTimeout(resolve, 100));
+      await new Promise((resolve) => setTimeout(resolve, 100));

-      console.log('[Onboarding] Navigating to dashboard...');
      // Use window.location for a full page reload to ensure middleware sees updated localStorage
      globalThis.location.href = '/dashboard';
    } catch (error) {
-      console.error('[Onboarding] Onboarding failed:', error);
-      alert(`Onboarding failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : 'Onboarding failed. Please try again.'
+      );
    }
  });

  return (
-    <div className="flex flex-col justify-center items-center min-h-screen bg-gray-50 px-4 py-8">
-      <div className="bg-white w-full max-w-2xl p-8 rounded-xl shadow-lg">
+    <div className="flex flex-col justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 px-4 py-8">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-2xl p-8 rounded-xl shadow-lg dark:shadow-gray-950/50">
        <div className="mb-6">
-          <h1 className="text-3xl font-bold text-gray-900 mb-2">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
            Complete Your Profile
          </h1>
-          <p className="text-gray-600">
+          <p className="text-gray-600 font-sans dark:text-gray-400">
            Tell us more about yourself to get started
          </p>
        </div>
@@ -120,17 +123,22 @@ const UserOnboardingPage: FC = (): ReactElement => {
                <img
                  src={avatarPreview}
                  alt="Avatar preview"
-                  className="w-32 h-32 rounded-full object-cover border-4 border-gray-200"
+                  className="w-32 h-32 rounded-full object-cover border-4 border-gray-200 dark:border-gray-700"
                />
              ) : (
-                <div className="w-32 h-32 rounded-full bg-gray-200 flex items-center justify-center">
-                  <span className="text-gray-400 text-4xl">👤</span>
+                <div className="w-32 h-32 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                  <Icon
+                    icon="ic:baseline-person"
+                    width="48"
+                    height="48"
+                    className="text-gray-400 dark:text-gray-500"
+                  />
                </div>
              )}
            </div>
-            <div>
+            <div className="flex flex-col items-center">
              <label htmlFor="avatar" className="cursor-pointer">
-                <span className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 inline-block">
+                <span className="px-4 py-2 bg-primary-500 dark:bg-primary-600 text-white rounded-lg hover:bg-primary-600 dark:hover:bg-primary-700 inline-block">
                  {avatarPreview ? 'Change Photo' : 'Upload Photo'}
                </span>
                <input
@@ -141,7 +149,9 @@ const UserOnboardingPage: FC = (): ReactElement => {
                  onChange={handleAvatarChange}
                />
              </label>
-              <p className="text-xs text-gray-500 mt-2 text-center">Optional, but highly recommended</p>
+              <p className="text-xs text-gray-500 dark:text-gray-500 mt-2 text-center">
+                Optional, but highly recommended
+              </p>
            </div>
          </div>

@@ -151,40 +161,33 @@ const UserOnboardingPage: FC = (): ReactElement => {
            label="Full Name"
            placeholder="Enter your full name"
            name="fullname"
+            className="px-3 py-2 text-label2 rounded-lg max-h-auto text-base"
+            size="md"
+            isRequired={true}
          />

          {/* City */}
          <div className="space-y-2">
-            <label className="block text-sm font-medium text-gray-700">
+            <label className="block text-base font-medium text-gray-700 dark:text-gray-300">
              City <span className="text-red-500">*</span>
            </label>
            <Controller
              control={form.control}
              name="location"
              render={({ field, fieldState }) => (
-                <div>
-                  <select
-                    {...field}
-                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                  >
-                    <option value="">Select your city</option>
-                    {INDONESIAN_CITIES.map((city) => (
-                      <option key={city} value={city}>
-                        {city}
-                      </option>
-                    ))}
-                  </select>
-                  {fieldState.error && (
-                    <p className="text-sm text-red-500 mt-1">{fieldState.error.message}</p>
-                  )}
-                </div>
+                <CitySelect
+                  value={field.value}
+                  onChange={field.onChange}
+                  error={fieldState.error?.message}
+                  placeholder="Search your city..."
+                />
              )}
            />
          </div>

          {/* Role/Skills */}
          <div className="space-y-2">
-            <label className="block text-sm font-medium text-gray-700">
+            <label className="block text-base font-medium text-gray-700 dark:text-gray-300">
              Role / Skills
            </label>
            <Controller
@@ -194,7 +197,10 @@ const UserOnboardingPage: FC = (): ReactElement => {
                <div className="space-y-2">
                  <div className="grid grid-cols-2 gap-2">
                    {ROLE_OPTIONS.map((role) => (
-                      <label key={role} className="flex items-center space-x-2 cursor-pointer">
+                      <label
+                        key={role}
+                        className="flex items-center space-x-2 cursor-pointer"
+                      >
                        <input
                          type="checkbox"
                          checked={field.value?.includes(role)}
@@ -204,9 +210,11 @@ const UserOnboardingPage: FC = (): ReactElement => {
                              : (field.value || []).filter((v) => v !== role);
                            field.onChange(newValue);
                          }}
-                          className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                          className="rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-primary-500 focus:ring-blue-500 dark:focus:ring-primary-500 dark:bg-gray-800"
                        />
-                        <span className="text-sm">{role}</span>
+                        <span className="text-sm dark:text-gray-300">
+                          {role}
+                        </span>
                      </label>
                    ))}
                  </div>
@@ -217,22 +225,28 @@ const UserOnboardingPage: FC = (): ReactElement => {

          {/* Bio */}
          <div className="space-y-2">
-            <label className="block text-sm font-medium text-gray-700">
-              Bio <span className="text-gray-400">(Optional)</span>
+            <label className="block text-base font-medium text-gray-700 dark:text-gray-300">
+              Bio{' '}
+              <span className="text-gray-400 dark:text-gray-500">
+                (Optional)
+              </span>
            </label>
            <Controller
              control={form.control}
              name="bio"
              render={({ field, fieldState }) => (
-                <div>
+                <div className="flex">
                  <Textarea
                    {...field}
                    placeholder="Tell us about yourself..."
                    rows={4}
-                    className="w-full"
+                    className="w-full rounded-lg text-sm"
+                    style={{ resize: 'vertical' }}
                  />
                  {fieldState.error && (
-                    <p className="text-sm text-red-500 mt-1">{fieldState.error.message}</p>
+                    <p className="text-sm text-red-500 mt-1">
+                      {fieldState.error.message}
+                    </p>
                  )}
                </div>
              )}
@@ -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;
@@ -1,8 +1,15 @@
-import { FC, ReactElement, useState, useRef, useEffect } from 'react';
+import { FC, ReactElement, useState, useRef, useEffect, useMemo } from 'react';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { useNavigate, useParams } from 'react-router';
-import { useTeamById, useTeamMessages, useSendMessage, useDeleteMessage, useAuthStore } from '@imphnen-frontend-service/service';
+import {
+  useTeamById,
+  useTeamMessages,
+  useSendMessage,
+  useDeleteMessage,
+  useAuthStore,
+} from '@imphnen-frontend-service/service';
 import { toast } from 'sonner';
+import { Icon } from '@iconify/react';

 const TeamChatPage: FC = (): ReactElement => {
  const { teamId } = useParams<{ teamId: string }>();
@@ -13,16 +20,54 @@ const TeamChatPage: FC = (): ReactElement => {

  const { data: teamData } = useTeamById(teamId || '');
  const { data: messages, isLoading } = useTeamMessages(teamId || '');
-  const { mutateAsync: sendMessage, isPending: isSending } = useSendMessage(teamId || '');
+  const { mutateAsync: sendMessage, isPending: isSending } = useSendMessage(
+    teamId || ''
+  );
  const { mutateAsync: deleteMessage } = useDeleteMessage(teamId || '');

  const team = teamData?.data;
  const currentUserId = session?.user?.id;

+  // Message type used for UI rendering
+  interface ChatMessage {
+    id: string;
+    user_id: string;
+    user?: {
+      avatar?: string;
+      fullname?: string;
+    };
+    message: string;
+    created_at: string;
+  }
+
+  // Inline delete confirmation UI state
+  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
+
+  // Prepare messages: de-duplicate by id and sort by created_at
+  const displayMessages = useMemo(() => {
+    const raw: ChatMessage[] = Array.isArray(messages)
+      ? (messages as ChatMessage[])
+      : [];
+    const seen = new Set<string>();
+    const dedup: ChatMessage[] = [];
+    for (const m of raw) {
+      const key = m.id ?? `${m.user_id}-${m.created_at}`;
+      if (!seen.has(key)) {
+        seen.add(key);
+        dedup.push(m);
+      }
+    }
+    dedup.sort(
+      (a, b) =>
+        new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
+    );
+    return dedup;
+  }, [messages]);
+
  // Auto-scroll to bottom when new messages arrive
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages]);
+  }, [displayMessages]);

  const handleSendMessage = async (e: React.FormEvent) => {
    e.preventDefault();
@@ -38,11 +83,10 @@ const TeamChatPage: FC = (): ReactElement => {
  };

  const handleDeleteMessage = async (messageId: string) => {
-    if (!confirm('Are you sure you want to delete this message?')) return;
-
    try {
      await deleteMessage(messageId);
      toast.success('Message deleted');
+      setDeleteTargetId(null);
    } catch (error) {
      console.error('Failed to delete message:', error);
      toast.error('Failed to delete message');
@@ -63,16 +107,23 @@ const TeamChatPage: FC = (): ReactElement => {
  };

  return (
-    <div className="flex flex-col h-screen bg-gray-50">
+    <div className="flex flex-col h-screen bg-gray-50 dark:bg-gray-950">
      {/* Header */}
-      <div className="bg-white border-b shadow-sm">
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700 shadow-sm dark:shadow-gray-950/50">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between">
            <div>
-              <h1 className="text-2xl font-bold text-gray-900">Team Chat</h1>
-              <p className="text-gray-600 text-sm mt-0.5">{team?.name}</p>
+              <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+                Team Chat
+              </h1>
+              <p className="text-gray-600 dark:text-gray-400 text-sm mt-0.5">
+                {team?.name}
+              </p>
            </div>
-            <Button variant="secondary" onClick={() => navigate(`/teams/${teamId}`)}>
+            <Button
+              variant="secondary"
+              onClick={() => navigate(`/teams/${teamId}`)}
+            >
              Back to Team
            </Button>
          </div>
@@ -84,23 +135,29 @@ const TeamChatPage: FC = (): ReactElement => {
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          {isLoading ? (
            <div className="flex items-center justify-center h-64">
-              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 dark:border-primary-400"></div>
            </div>
-          ) : messages && messages.length > 0 ? (
+          ) : displayMessages && displayMessages.length > 0 ? (
            <div className="space-y-4">
-              {messages.map((msg) => {
+              {displayMessages.map((msg) => {
                const isOwnMessage = msg.user_id === currentUserId;
                const isLeader = team?.leader_id === currentUserId;
                const canDelete = isOwnMessage || isLeader;

                return (
                  <div
-                    key={msg.id}
-                    className={`flex ${isOwnMessage ? 'justify-end' : 'justify-start'}`}
+                    key={`${msg.id ?? 'message'}-${msg.created_at}`}
+                    className={`flex ${
+                      isOwnMessage ? 'justify-end' : 'justify-start'
+                    }`}
                  >
-                    <div className={`flex gap-3 max-w-lg ${isOwnMessage ? 'flex-row-reverse' : 'flex-row'}`}>
+                    <div
+                      className={`flex gap-3 max-w-lg ${
+                        isOwnMessage ? 'flex-row-reverse' : 'flex-row'
+                      }`}
+                    >
                      {/* Avatar */}
-                      <div className="flex-shrink-0">
+                      <div className="shrink-0">
                        {msg.user?.avatar ? (
                          <img
                            src={msg.user.avatar}
@@ -115,38 +172,76 @@ const TeamChatPage: FC = (): ReactElement => {
                      </div>

                      {/* Message Bubble */}
-                      <div className={`flex-1 ${isOwnMessage ? 'text-right' : 'text-left'}`}>
-                        <div className={`inline-block ${isOwnMessage ? 'items-end' : 'items-start'}`}>
+                      <div className={`flex-1 text-left`}>
+                        <div
+                          className={`inline-block ${
+                            isOwnMessage ? 'items-end' : 'items-start'
+                          }`}
+                        >
                          <div className="flex items-baseline gap-2 mb-1">
-                            <span className="font-semibold text-sm text-gray-900">
+                            <span className="font-semibold text-sm text-gray-900 dark:text-white">
                              {isOwnMessage ? 'You' : msg.user?.fullname}
                            </span>
-                            <span className="text-xs text-gray-500">
+                            <span className="text-xs text-gray-500 dark:text-gray-500">
                              {formatTime(msg.created_at)}
                            </span>
                          </div>
                          <div
                            className={`relative group rounded-2xl px-4 py-2.5 ${
                              isOwnMessage
-                                ? 'bg-blue-600 text-white'
-                                : 'bg-white text-gray-900 border border-gray-200'
+                                ? 'bg-blue-600 dark:bg-primary-600 text-white'
+                                : 'bg-white dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-200 dark:border-gray-700'
                            }`}
                          >
-                            <p className="text-sm whitespace-pre-wrap break-words">{msg.message}</p>
+                            <p className="text-sm whitespace-pre-wrap wrap-break-word font-sans">
+                              {msg.message}
+                            </p>

                            {/* Delete button */}
                            {canDelete && (
                              <button
-                                onClick={() => handleDeleteMessage(msg.id)}
-                                className={`absolute top-1 ${isOwnMessage ? 'left-1' : 'right-1'} opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-gray-200 ${isOwnMessage ? 'hover:bg-blue-700' : ''}`}
+                                onClick={() =>
+                                  setDeleteTargetId(
+                                    deleteTargetId === msg.id ? null : msg.id
+                                  )
+                                }
+                                className={`absolute top-1 ${
+                                  isOwnMessage ? 'left-1' : 'right-1'
+                                } opacity-0 hover:opacity-100 p-1 rounded hover:bg-gray-200 dark:hover:bg-neutral-700 cursor-pointer ${
+                                  isOwnMessage
+                                    ? 'hover:bg-blue-700 dark:hover:bg-primary-700'
+                                    : ''
+                                }`}
                                title="Delete message"
                              >
-                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                                </svg>
+                                {/* Icon trash */}
+                                <Icon
+                                  icon="mdi:trash-can-outline"
+                                  className="w-4 h-4"
+                                />
                              </button>
                            )}
                          </div>
+                          {canDelete && deleteTargetId === msg.id && (
+                            <div
+                              className={`mt-2 flex gap-2 ${
+                                isOwnMessage ? 'justify-end' : 'justify-start'
+                              }`}
+                            >
+                              <button
+                                onClick={() => handleDeleteMessage(msg.id)}
+                                className="px-2 py-1 text-xs rounded bg-red-600 text-white hover:bg-red-700 cursor-pointer"
+                              >
+                                Delete
+                              </button>
+                              <button
+                                onClick={() => setDeleteTargetId(null)}
+                                className="px-2 py-1 text-xs rounded bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-neutral-700 dark:text-white dark:hover:bg-neutral-600 cursor-pointer"
+                              >
+                                Cancel
+                              </button>
+                            </div>
+                          )}
                        </div>
                      </div>
                    </div>
@@ -157,11 +252,14 @@ const TeamChatPage: FC = (): ReactElement => {
            </div>
          ) : (
            <div className="flex flex-col items-center justify-center h-64 text-center">
-              <div className="text-6xl mb-4">💬</div>
-              <h3 className="text-xl font-semibold text-gray-900 mb-2">
+              <Icon
+                icon="mdi:chat-outline"
+                className="text-6xl mb-4 text-gray-400"
+              />
+              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                No messages yet
              </h3>
-              <p className="text-gray-600">
+              <p className="text-gray-600 dark:text-gray-400 font-sans">
                Be the first to start the conversation!
              </p>
            </div>
@@ -170,7 +268,7 @@ const TeamChatPage: FC = (): ReactElement => {
      </div>

      {/* Message Input */}
-      <div className="bg-white border-t shadow-lg">
+      <div className="bg-white dark:bg-gray-900 border-t dark:border-gray-700 shadow-lg dark:shadow-gray-950/50">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <form onSubmit={handleSendMessage} className="flex gap-3">
            <input
@@ -178,7 +276,7 @@ const TeamChatPage: FC = (): ReactElement => {
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              placeholder="Type your message..."
-              className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="flex-1 px-4 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-primary-500 focus:border-transparent"
              disabled={isSending}
            />
            <Button
@@ -193,8 +291,18 @@ const TeamChatPage: FC = (): ReactElement => {
                </div>
              ) : (
                <div className="flex items-center gap-2">
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+                  <svg
+                    className="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+                    />
                  </svg>
                  Send
                </div>
@@ -3,14 +3,19 @@ import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
 import { useNavigate, useParams } from 'react-router';
 import { useForm, Controller } from 'react-hook-form';
-import { teamUpdateSchema, TTeamUpdateForm, useUpdateTeam, useTeamById, ETeamVisibility, useUploadFile, useAuthStore } from '@imphnen-frontend-service/service';
+import {
+  teamUpdateSchema,
+  TTeamUpdateForm,
+  useUpdateTeam,
+  useTeamById,
+  ETeamVisibility,
+  useUploadFile,
+  useAuthStore,
+} from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';

-const INDONESIAN_CITIES = [
-  'Jakarta', 'Surabaya', 'Bandung', 'Medan', 'Semarang',
-  'Makassar', 'Palembang', 'Tangerang', 'Depok', 'Bekasi',
-  'Yogyakarta', 'Malang', 'Bogor', 'Batam', 'Pekanbaru',
-];
+import { CitySelect } from '../../../../components/city-select';
+import { Icon } from '@iconify/react';

 const EditTeamPage: FC = (): ReactElement => {
  const { teamId } = useParams<{ teamId: string }>();
@@ -21,8 +26,12 @@ const EditTeamPage: FC = (): ReactElement => {
  const [bannerFile, setBannerFile] = useState<File | null>(null);
  const [bannerPreview, setBannerPreview] = useState<string>('');

-  const { data: teamData, isLoading: isLoadingTeam } = useTeamById(teamId || '');
-  const { mutateAsync: updateTeam, isPending: isUpdating } = useUpdateTeam(teamId || '');
+  const { data: teamData, isLoading: isLoadingTeam } = useTeamById(
+    teamId || ''
+  );
+  const { mutateAsync: updateTeam, isPending: isUpdating } = useUpdateTeam(
+    teamId || ''
+  );
  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();

  const team = teamData?.data;
@@ -51,18 +60,24 @@ const EditTeamPage: FC = (): ReactElement => {

  if (isLoadingTeam) {
    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-gray-600">Loading team...</div>
+      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-gray-600 dark:text-gray-400">Loading team...</div>
      </div>
    );
  }

  if (!isLeader) {
    return (
-      <div className="flex flex-col items-center justify-center min-h-screen">
-        <h2 className="text-2xl font-bold text-gray-900 mb-4">Access Denied</h2>
-        <p className="text-gray-600 mb-4">Only the team leader can edit team information</p>
-        <Button onClick={() => navigate(`/teams/${teamId}`)}>Back to Team</Button>
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          Access Denied
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-4">
+          Only the team leader can edit team information
+        </p>
+        <Button onClick={() => navigate(`/teams/${teamId}`)}>
+          Back to Team
+        </Button>
      </div>
    );
  }
@@ -119,28 +134,35 @@ const EditTeamPage: FC = (): ReactElement => {
  });

  return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="bg-white border-b">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <h1 className="text-3xl font-bold text-gray-900">Edit Team Info</h1>
-          <p className="text-gray-600 mt-1">Update your team details</p>
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+            Edit Team Info
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400 mt-1">
+            Update your team details
+          </p>
        </div>
      </div>

      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="bg-white rounded-lg shadow-md p-8">
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-8">
          <form onSubmit={onSubmit} className="space-y-6">
            {/* Banner Upload */}
            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+              <label className="block text-label1 font-medium text-gray-700 dark:text-gray-300 mb-2">
                Team Banner
              </label>
              {bannerPreview ? (
-                <div className="relative">
+                <div
+                  className="relative w-full"
+                  style={{ aspectRatio: '3 / 1' }}
+                >
                  <img
                    src={bannerPreview}
                    alt="Banner preview"
-                    className="w-full h-48 object-cover rounded-lg border-2 border-gray-200"
+                    className="absolute inset-0 w-full h-full object-cover rounded-lg border-2 border-gray-200 dark:border-gray-700"
                  />
                  <button
                    type="button"
@@ -149,16 +171,20 @@ const EditTeamPage: FC = (): ReactElement => {
                      setBannerPreview('');
                      form.setValue('banner', null);
                    }}
-                    className="absolute top-2 right-2 bg-red-500 text-white px-3 py-1 rounded-lg text-sm hover:bg-red-600"
+                    className="absolute top-2 right-2 bg-danger-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-danger-700 cursor-pointer"
                  >
                    Remove
                  </button>
                </div>
              ) : (
-                <label className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
+                <label className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800">
                  <div className="text-center">
-                    <p className="text-gray-500">Click to upload banner</p>
-                    <p className="text-xs text-gray-400 mt-1">1200x400 recommended</p>
+                    <p className="text-gray-500 dark:text-gray-400">
+                      Click to upload banner
+                    </p>
+                    <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+                      1200x400 recommended
+                    </p>
                  </div>
                  <input
                    type="file"
@@ -172,7 +198,7 @@ const EditTeamPage: FC = (): ReactElement => {

            {/* Logo Upload */}
            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+              <label className="block text-label1 font-medium text-gray-700 dark:text-gray-300 mb-2">
                Team Logo
              </label>
              <div className="flex items-center space-x-4">
@@ -180,16 +206,18 @@ const EditTeamPage: FC = (): ReactElement => {
                  <img
                    src={logoPreview}
                    alt="Logo preview"
-                    className="w-24 h-24 rounded-full object-cover border-2 border-gray-200"
+                    className="w-24 h-24 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700"
                  />
                ) : (
-                  <div className="w-24 h-24 rounded-full bg-gray-200 flex items-center justify-center">
-                    <span className="text-gray-400 text-3xl">👥</span>
+                  <div className="w-24 h-24 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                    <span className="text-gray-400 dark:text-gray-500 text-3xl">
+                      <Icon icon="mdi:account-group" />
+                    </span>
                  </div>
                )}
-                <div>
+                <div className="flex flex-col md:flex-row items-start justify-start gap-1">
                  <label htmlFor="logo" className="cursor-pointer">
-                    <span className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 inline-block">
+                    <span className="px-4 py-2 text-sm bg-primary-600 text-white rounded-lg hover:bg-primary-700 inline-block">
                      {logoPreview ? 'Change Logo' : 'Upload Logo'}
                    </span>
                    <input
@@ -208,7 +236,7 @@ const EditTeamPage: FC = (): ReactElement => {
                        setLogoPreview('');
                        form.setValue('logo', null);
                      }}
-                      className="ml-3 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
+                      className="px-4 py-2 text-sm bg-danger-600 text-white rounded-lg hover:bg-danger-700 cursor-pointer"
                    >
                      Remove
                    </button>
@@ -223,40 +251,32 @@ const EditTeamPage: FC = (): ReactElement => {
              label="Team Name"
              placeholder="Enter team name"
              name="name"
+              size="lg"
+              isRequired={true}
            />

            {/* City */}
            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                City
              </label>
              <Controller
                control={form.control}
                name="city"
                render={({ field, fieldState }) => (
-                  <div>
-                    <select
-                      {...field}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    >
-                      <option value="">Select city</option>
-                      {INDONESIAN_CITIES.map((city) => (
-                        <option key={city} value={city}>
-                          {city}
-                        </option>
-                      ))}
-                    </select>
-                    {fieldState.error && (
-                      <p className="text-sm text-red-500 mt-1">{fieldState.error.message}</p>
-                    )}
-                  </div>
+                  <CitySelect
+                    value={field.value || ''}
+                    onChange={field.onChange}
+                    error={fieldState.error?.message}
+                    placeholder="Search your city..."
+                  />
                )}
              />
            </div>

            {/* Description */}
            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
+              <label className="block text-label1 font-medium text-gray-700 dark:text-gray-300">
                Description
              </label>
              <Controller
@@ -270,9 +290,12 @@ const EditTeamPage: FC = (): ReactElement => {
                      placeholder="Tell others about your team..."
                      rows={4}
                      className="w-full"
+                      size="lg"
                    />
                    {fieldState.error && (
-                      <p className="text-sm text-red-500 mt-1">{fieldState.error.message}</p>
+                      <p className="text-sm text-red-500 mt-1">
+                        {fieldState.error.message}
+                      </p>
                    )}
                  </div>
                )}
@@ -281,7 +304,7 @@ const EditTeamPage: FC = (): ReactElement => {

            {/* Visibility */}
            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
+              <label className="block text-label1 font-medium text-gray-700 dark:text-gray-300">
                Team Visibility
              </label>
              <Controller
@@ -289,7 +312,7 @@ const EditTeamPage: FC = (): ReactElement => {
                name="visibility"
                render={({ field }) => (
                  <div className="space-y-3">
-                    <label className="flex items-start space-x-3 cursor-pointer border rounded-lg p-4 hover:bg-gray-50">
+                    <label className="flex items-start space-x-3 cursor-pointer border dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800">
                      <input
                        type="radio"
                        {...field}
@@ -298,13 +321,15 @@ const EditTeamPage: FC = (): ReactElement => {
                        className="mt-1"
                      />
                      <div>
-                        <p className="font-medium text-gray-900">Public</p>
-                        <p className="text-sm text-gray-600">
+                        <p className="font-medium text-gray-900 dark:text-white">
+                          Public
+                        </p>
+                        <p className="text-sm text-gray-600 dark:text-gray-400 font-sans">
                          Team will be visible in Browse Teams
                        </p>
                      </div>
                    </label>
-                    <label className="flex items-start space-x-3 cursor-pointer border rounded-lg p-4 hover:bg-gray-50">
+                    <label className="flex items-start space-x-3 cursor-pointer border dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800">
                      <input
                        type="radio"
                        {...field}
@@ -313,8 +338,10 @@ const EditTeamPage: FC = (): ReactElement => {
                        className="mt-1"
                      />
                      <div>
-                        <p className="font-medium text-gray-900">Private</p>
-                        <p className="text-sm text-gray-600">
+                        <p className="font-medium text-gray-900 dark:text-white">
+                          Private
+                        </p>
+                        <p className="text-sm text-gray-600 dark:text-gray-400 font-sans">
                          Team hidden, invite-only
                        </p>
                      </div>
@@ -1,18 +1,46 @@
-import { FC, ReactNode } from 'react';
+import { FC, ReactElement, useState } from 'react';
 import { Outlet } from 'react-router';
-import { Navigation } from '../../../components/navigation';
+import { Sidebar } from '../../../components/sidebar';

-interface TeamLayoutProps {
-  children?: ReactNode;
-}
+const TeamDetailLayout: FC = (): ReactElement => {
+  const [sidebarOpen, setSidebarOpen] = useState(false);

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

-export default TeamLayout;
+export default TeamDetailLayout;
@@ -15,6 +15,7 @@ import {
 } from '@imphnen-frontend-service/service';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from 'sonner';

 const ManageMembersPage: FC = (): ReactElement => {
  const { teamId } = useParams<{ teamId: string }>();
@@ -22,17 +23,28 @@ const ManageMembersPage: FC = (): ReactElement => {
  const { session } = useAuthStore();
  const [showInviteModal, setShowInviteModal] = useState(false);

-  const { data: teamData } = useTeamById(teamId || '');
-  const { data: membersData, isLoading: isLoadingMembers } = useTeamMembers(teamId || '');
+  const { data: teamData, isLoading: isLoadingTeam } = useTeamById(
+    teamId || ''
+  );
+  const { data: membersData, isLoading: isLoadingMembers } = useTeamMembers(
+    teamId || ''
+  );
  const { data: joinRequestsData } = useTeamJoinRequests(teamId || '');

-  const { mutateAsync: inviteMember, isPending: isInviting } = useInviteMember(teamId || '');
-  const { mutateAsync: removeMember, isPending: isRemoving } = useRemoveMember(teamId || '');
-  const { mutateAsync: respondToRequest, isPending: isResponding } = useRespondToJoinRequest(teamId || '');
+  const { mutateAsync: inviteMember, isPending: isInviting } = useInviteMember(
+    teamId || ''
+  );
+  const { mutateAsync: removeMember, isPending: isRemoving } = useRemoveMember(
+    teamId || ''
+  );
+  const { mutateAsync: respondToRequest, isPending: isResponding } =
+    useRespondToJoinRequest(teamId || '');

  const team = teamData?.data;
  const members = membersData?.data || [];
-  const joinRequests = Array.isArray(joinRequestsData?.data) ? joinRequestsData.data : [];
+  const joinRequests = Array.isArray(joinRequestsData?.data)
+    ? joinRequestsData.data
+    : [];
  const currentUserId = session?.user?.id;
  const isLeader = currentUserId === team?.leader_id;

@@ -41,12 +53,27 @@ const ManageMembersPage: FC = (): ReactElement => {
    mode: 'all',
  });

+  // Show loading state while fetching team data
+  if (isLoadingTeam) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <p className="text-gray-600 dark:text-gray-400">Loading...</p>
+      </div>
+    );
+  }
+
  if (!isLeader) {
    return (
-      <div className="flex flex-col items-center justify-center min-h-screen">
-        <h2 className="text-2xl font-bold text-gray-900 mb-4">Access Denied</h2>
-        <p className="text-gray-600 mb-4">Only the team leader can manage members</p>
-        <Button onClick={() => navigate(`/teams/${teamId}`)}>Back to Team</Button>
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          Access Denied
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-4">
+          Only the team leader can manage members
+        </p>
+        <Button onClick={() => navigate(`/teams/${teamId}`)}>
+          Back to Team
+        </Button>
      </div>
    );
  }
@@ -75,33 +102,44 @@ const ManageMembersPage: FC = (): ReactElement => {
  const handleApproveRequest = async (requestId: string) => {
    try {
      await respondToRequest({ requestId, action: 'approve' });
+      toast.success('Member added successfully!');
    } catch (error) {
      console.error('Failed to approve request:', error);
+      toast.error((error as Error).message || 'Failed to approve request');
    }
  };

  const handleRejectRequest = async (requestId: string) => {
    try {
      await respondToRequest({ requestId, action: 'reject' });
+      toast.success('Request rejected');
    } catch (error) {
      console.error('Failed to reject request:', error);
+      toast.error((error as Error).message || 'Failed to reject request');
    }
  };

  return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="bg-white border-b">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div className="flex items-center justify-between">
+          <div className="flex flex-col md:flex-row gap-y-4 items-start md:items-center justify-between">
            <div>
-              <h1 className="text-3xl font-bold text-gray-900">Manage Members</h1>
-              <p className="text-gray-600 mt-1">{team?.name}</p>
+              <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+                Manage Members
+              </h1>
+              <p className="text-gray-600 dark:text-gray-400 mt-1">
+                {team?.name}
+              </p>
            </div>
            <div className="flex space-x-3">
              <Button onClick={() => setShowInviteModal(true)}>
                Invite Member
              </Button>
-              <Button variant="secondary" onClick={() => navigate(`/teams/${teamId}`)}>
+              <Button
+                variant="secondary"
+                onClick={() => navigate(`/teams/${teamId}`)}
+              >
                Back to Team
              </Button>
            </div>
@@ -112,13 +150,16 @@ const ManageMembersPage: FC = (): ReactElement => {
      <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 rounded-lg shadow-md p-6">
-            <h2 className="text-xl font-bold text-gray-900 mb-4">
+          <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-6">
+            <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
              Join Requests ({joinRequests.length})
            </h2>
            <div className="space-y-3">
              {joinRequests.map((request) => (
-                <div key={request.id} className="border rounded-lg p-4">
+                <div
+                  key={request.id}
+                  className="border dark:border-gray-700 rounded-lg p-4"
+                >
                  <div className="flex items-start justify-between">
                    <div className="flex items-center space-x-3 flex-1">
                      {request.user.avatar ? (
@@ -128,17 +169,27 @@ const ManageMembersPage: FC = (): ReactElement => {
                          className="w-12 h-12 rounded-full object-cover"
                        />
                      ) : (
-                        <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center">
-                          <span className="text-gray-500">👤</span>
+                        <div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                          <span className="text-gray-500 dark:text-gray-400">
+                            👤
+                          </span>
                        </div>
                      )}
                      <div className="flex-1">
-                        <p className="font-medium text-gray-900">{request.user.fullname}</p>
-                        <p className="text-sm text-gray-600">{request.user.email}</p>
+                        <p className="font-medium text-gray-900 dark:text-white">
+                          {request.user.fullname}
+                        </p>
+                        <p className="text-sm text-gray-600 dark:text-gray-400">
+                          {request.user.email}
+                        </p>
                        {request.user.location && (
-                          <p className="text-sm text-gray-500">📍 {request.user.location}</p>
+                          <p className="text-sm text-gray-500 dark:text-gray-500">
+                            📍 {request.user.location}
+                          </p>
                        )}
-                        <p className="text-sm text-gray-700 mt-2 italic">"{request.message}"</p>
+                        <p className="text-sm text-gray-700 dark:text-gray-300 mt-2 italic">
+                          "{request.message}"
+                        </p>
                      </div>
                    </div>
                    <div className="flex space-x-2 ml-4">
@@ -166,16 +217,21 @@ const ManageMembersPage: FC = (): ReactElement => {
        )}

        {/* Current Members */}
-        <div className="bg-white rounded-lg shadow-md p-6">
-          <h2 className="text-xl font-bold text-gray-900 mb-4">
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-6">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
            Current Members ({members.length})
          </h2>
          {isLoadingMembers ? (
-            <p className="text-gray-600">Loading members...</p>
+            <p className="text-gray-600 dark:text-gray-400">
+              Loading members...
+            </p>
          ) : (
            <div className="space-y-3">
              {members.map((member) => (
-                <div key={member.id} className="border rounded-lg p-4 flex items-center justify-between">
+                <div
+                  key={member.id}
+                  className="border dark:border-gray-700 rounded-lg p-4 flex items-center justify-between"
+                >
                  <div className="flex items-center space-x-3">
                    {member.user.avatar ? (
                      <img
@@ -184,24 +240,32 @@ const ManageMembersPage: FC = (): ReactElement => {
                        className="w-12 h-12 rounded-full object-cover"
                      />
                    ) : (
-                      <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center">
-                        <span className="text-gray-500">👤</span>
+                      <div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                        <span className="text-gray-500 dark:text-gray-400">
+                          👤
+                        </span>
                      </div>
                    )}
                    <div>
-                      <p className="font-medium text-gray-900">{member.user.fullname}</p>
-                      <p className="text-sm text-gray-600">{member.user.email}</p>
+                      <p className="font-medium text-gray-900 dark:text-white">
+                        {member.user.fullname}
+                      </p>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">
+                        {member.user.email}
+                      </p>
                      {member.user.location && (
-                        <p className="text-sm text-gray-500">📍 {member.user.location}</p>
+                        <p className="text-sm text-gray-500 dark:text-gray-500">
+                          📍 {member.user.location}
+                        </p>
                      )}
                      <div className="flex items-center space-x-2 mt-1">
                        {member.role === 'leader' && (
-                          <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs font-medium">
+                          <span className="px-2 py-1 bg-blue-100 dark:bg-primary-900/30 text-blue-800 dark:text-primary-300 rounded text-xs font-medium">
                            Leader
                          </span>
                        )}
                        {member.status === ETeamMemberStatus.PENDING && (
-                          <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs font-medium">
+                          <span className="px-2 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 rounded text-xs font-medium">
                            Pending Invitation
                          </span>
                        )}
@@ -225,37 +289,41 @@ const ManageMembersPage: FC = (): ReactElement => {
        </div>

        {/* Warning */}
-        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
-          <p className="text-sm text-yellow-800">
-            <strong>Note:</strong> Members cannot leave the team without your approval. Only you can remove members from the team.
+        <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
+          <p className="text-sm text-yellow-800 dark:text-yellow-200">
+            <strong>Note:</strong> Members cannot leave the team without your
+            approval. Only you can remove members from the team.
          </p>
        </div>
      </div>

      {/* Invite Member Modal */}
      {showInviteModal && (
-        <div className="fixed inset-0 bg-black/20 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">
+        <div className="fixed inset-0 bg-black/20 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl dark:shadow-gray-950/50 max-w-md w-full p-6">
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              Invite Member
            </h2>
-            <p className="text-gray-600 mb-4">
-              Send an invitation to join your team. The invited member will see the invitation on their dashboard after logging in.
+            <p className="text-gray-600 dark:text-gray-400 mb-4 font-sans">
+              Send an invitation to join your team. The invited member will see
+              the invitation on their dashboard after logging in.
            </p>
-            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mb-6">
-              <p className="text-sm text-yellow-800">
-                <strong>Important:</strong> The email you enter must match the GitHub email address the member uses to sign in.
+            <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3 mb-6">
+              <p className="text-sm text-yellow-800 dark:text-yellow-200 font-sans">
+                <strong>Important:</strong> The email you enter must match the
+                GitHub email address the member uses to sign in.
              </p>
            </div>
            <form onSubmit={handleInvite} className="space-y-4">
              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  Email Address
                </label>
                <Input
                  {...form.register('email')}
                  type="email"
                  placeholder="member@example.com"
+                  size="lg"
                />
                {form.formState.errors.email && (
                  <p className="text-sm text-red-500 mt-1">
@@ -1,11 +1,51 @@
-import { FC, ReactElement, useState } from 'react';
+import { FC, ReactElement, useState, useEffect } from 'react';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Link, useParams, useNavigate } from 'react-router';
-import { useTeamById, useTeamMembers, useInviteMember, useTeamJoinRequests, useRespondToJoinRequest, ETeamMemberRole, useAuthStore } from '@imphnen-frontend-service/service';
+import {
+  useTeamById,
+  useTeamMembers,
+  useInviteMember,
+  useTeamJoinRequests,
+  useRespondToJoinRequest,
+  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();
@@ -13,24 +53,62 @@ const TeamDashboardPage: FC = (): ReactElement => {
  const [showInviteModal, setShowInviteModal] = useState(false);
  const [showJoinRequestsModal, setShowJoinRequestsModal] = useState(false);
  const [inviteEmail, setInviteEmail] = useState('');
+  const [imagesLoaded, setImagesLoaded] = useState(false);
+  const [imageLoadCount, setImageLoadCount] = useState(0);

-  const { data: teamData, isLoading: isLoadingTeam } = useTeamById(teamId || '');
-  const { data: membersData, isLoading: isLoadingMembers } = useTeamMembers(teamId || '');
-  const { data: joinRequestsData } = useTeamJoinRequests(teamId || '', !!teamId);
-  const { mutateAsync: inviteMember, isPending: isInviting } = useInviteMember(teamId || '');
-  const { mutateAsync: respondToJoinRequest, isPending: isResponding } = useRespondToJoinRequest(teamId || '');
+  // Calculate total images to load (banner + logo + member avatars)
+  const totalImagesToLoad = 0; // Simplified - disable image loading overlay
+
+  const handleImageLoad = () => {
+    setImageLoadCount((prev) => {
+      const newCount = prev + 1;
+      if (newCount >= totalImagesToLoad) {
+        setImagesLoaded(true);
+      }
+      return newCount;
+    });
+  };
+
+  const handleImageError = () => {
+    // Treat error as loaded to not block the UI
+    handleImageLoad();
+  };
+
+  // Set images as loaded immediately since we disabled the loading overlay
+  useEffect(() => {
+    setImagesLoaded(true);
+  }, []);
+
+  const { data: teamData, isLoading: isLoadingTeam } = useTeamById(
+    teamId || ''
+  );
+  const { data: membersData, isLoading: isLoadingMembers } = useTeamMembers(
+    teamId || ''
+  );
+  const { 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 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;

-  console.log('Leader check:', { currentUserId, leaderId: team?.leader_id, isLeader });
-
  const handleInviteMember = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!inviteEmail.trim() || isInviting) return;
@@ -46,10 +124,15 @@ const TeamDashboardPage: FC = (): ReactElement => {
    }
  };

-  const handleRespondToJoinRequest = async (requestId: string, action: 'approve' | 'reject') => {
+  const handleRespondToJoinRequest = async (
+    requestId: string,
+    action: 'approve' | 'reject'
+  ) => {
    try {
      await respondToJoinRequest({ requestId, action });
-      toast.success(action === 'approve' ? 'Request approved!' : 'Request rejected');
+      toast.success(
+        action === 'approve' ? 'Request approved!' : 'Request rejected'
+      );
    } catch (error) {
      console.error('Failed to respond to join request:', error);
      toast.error('Failed to process request');
@@ -58,8 +141,67 @@ const TeamDashboardPage: FC = (): ReactElement => {

  if (isLoadingTeam || isLoadingMembers) {
    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-gray-600">Loading team...</div>
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+        {/* Skeleton Header */}
+        <div className="bg-white dark:bg-gray-950 border-b">
+          <div className="w-full h-48 bg-gray-200 dark:bg-gray-800 animate-pulse" />
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+            <div className="flex items-start justify-between">
+              <div className="flex items-center space-x-4">
+                <div className="w-20 h-20 rounded-full bg-gray-300 dark:bg-gray-700 animate-pulse -mt-10" />
+                <div>
+                  <div className="h-8 w-48 bg-gray-300 dark:bg-gray-700 rounded animate-pulse" />
+                  <div className="h-4 w-32 bg-gray-200 dark:bg-gray-800 rounded animate-pulse mt-2" />
+                  <div className="h-4 w-24 bg-gray-200 dark:bg-gray-800 rounded animate-pulse mt-2" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="grid gap-6 lg:grid-cols-3">
+            {/* Main Content Skeleton */}
+            <div className="lg:col-span-2 space-y-6">
+              <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6">
+                <div className="h-6 w-32 bg-gray-300 dark:bg-gray-700 rounded animate-pulse mb-4" />
+                <div className="space-y-2">
+                  <div className="h-4 w-full bg-gray-200 dark:bg-gray-800 rounded animate-pulse" />
+                  <div className="h-4 w-3/4 bg-gray-200 dark:bg-gray-800 rounded animate-pulse" />
+                  <div className="h-4 w-5/6 bg-gray-200 dark:bg-gray-800 rounded animate-pulse" />
+                </div>
+              </div>
+            </div>
+
+            {/* Sidebar Skeleton */}
+            <div className="space-y-6">
+              <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6">
+                <div className="h-6 w-40 bg-gray-300 dark:bg-gray-700 rounded animate-pulse mb-4" />
+                <div className="space-y-4">
+                  {[1, 2, 3].map((i) => (
+                    <div key={i} className="flex items-center space-x-3">
+                      <div className="w-12 h-12 rounded-full bg-gray-300 dark:bg-gray-700 animate-pulse" />
+                      <div>
+                        <div className="h-4 w-24 bg-gray-300 dark:bg-gray-700 rounded animate-pulse" />
+                        <div className="h-3 w-16 bg-gray-200 dark:bg-gray-800 rounded animate-pulse mt-1" />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Loading Overlay */}
+        <div className="fixed inset-0 bg-white/60 dark:bg-black/50 flex items-center justify-center z-50">
+          <div className="text-center">
+            <div className="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
+            <p className="mt-4 text-gray-600 dark:text-white">
+              Loading team data...
+            </p>
+          </div>
+        </div>
      </div>
    );
  }
@@ -67,74 +209,130 @@ const TeamDashboardPage: FC = (): ReactElement => {
  if (!team) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen">
-        <h2 className="text-2xl font-bold text-gray-900 mb-4">Team not found</h2>
-        <Button onClick={() => navigate('/dashboard')}>Back to Dashboard</Button>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          Team not found
+        </h2>
+        <Button onClick={() => navigate('/dashboard')}>
+          Back to Dashboard
+        </Button>
      </div>
    );
  }

  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 relative dark:bg-gray-950">
+      {/* Loading overlay while images are loading */}
+      {!imagesLoaded && totalImagesToLoad > 0 && (
+        <div className="fixed inset-0 bg-white/80 flex items-center justify-center z-50">
+          <div className="text-center">
+            <div className="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
+            <p className="mt-4 text-gray-600 font-medium">Loading images...</p>
+            <p className="text-sm text-gray-400 mt-1">
+              {imageLoadCount} / {totalImagesToLoad}
+            </p>
+          </div>
+        </div>
+      )}
+
      {/* Header with Banner */}
-      <div className="bg-white border-b">
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
        {team.banner && (
-          <div className="w-full h-48 overflow-hidden">
+          <div className="relative w-full aspect-3/1 overflow-hidden">
+            <div
+              className={`absolute inset-0 bg-gray-200 animate-pulse ${
+                imagesLoaded ? 'hidden' : ''
+              }`}
+            />
            <img
              src={team.banner}
              alt={team.name}
-              className="w-full h-full object-cover"
+              className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${
+                imagesLoaded ? 'opacity-100' : 'opacity-0'
+              }`}
+              onLoad={handleImageLoad}
+              onError={handleImageError}
            />
+            <div className="pointer-events-none absolute inset-0 bg-linear-to-b from-transparent via-black/20 to-black/60" />
          </div>
        )}
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-6">
          <div className="flex items-start justify-between">
-            <div className="flex items-center space-x-4">
+            <div className="flex items-center space-x-3 md:space-x-4">
              {team.logo && (
-                <img
-                  src={team.logo}
-                  alt={team.name}
-                  className="w-20 h-20 rounded-full object-cover border-4 border-white shadow-lg -mt-10"
-                />
+                <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-3xl font-bold text-gray-900">{team.name}</h1>
-                <p className="text-gray-600 mt-1">📍 {team.city}</p>
-                <div className="flex items-center space-x-4 mt-2">
-                  <span className="text-sm text-gray-500">
-                    {members.length} {members.length === 1 ? 'Member' : 'Members'}
+                <h1 className="text-xl md:text-3xl font-bold text-gray-900 dark:text-white line-clamp-2">
+                  {team.name}
+                </h1>
+                <p className="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-1 line-clamp-1 font-sans flex items-center">
+                  <Icon icon="mdi:map-marker" className="inline-block mr-1" />
+                  <span>{team.city}</span>
+                </p>
+                <div className="flex flex-wrap items-center gap-2 md:space-x-4 mt-2">
+                  <span className="text-sm text-gray-500 dark:text-gray-400 flex items-center">
+                    <Icon
+                      icon="mdi:account-multiple"
+                      className="inline-block mr-1"
+                    />
+                    {members.length}{' '}
+                    {members.length === 1 ? 'Member' : 'Members'}
                  </span>
-                  <span className="text-sm text-gray-500">
-                    {team.visibility === 'public' ? '🌐 Public' : '🔒 Private'}
+                  <span className="text-sm text-gray-500 dark:text-gray-400 flex items-center">
+                    <Icon
+                      icon={
+                        team.visibility === 'public' ? 'mdi:web' : 'mdi:lock'
+                      }
+                      className="inline-block mr-1"
+                    />
+                    {team.visibility === 'public' ? 'Public' : 'Private'}
                  </span>
                  {isLeader && (
-                    <span className="px-3 py-1 bg-blue-600 text-white rounded-md text-sm font-semibold shadow-sm">
-                      👑 Team Leader
+                    <span className="hidden md:inline-flex px-3 py-1 bg-blue-600 text-white rounded-md text-sm font-semibold shadow-sm items-center">
+                      <Icon icon="mdi:crown" className="inline-block mr-1" />
+                      <span>Team Leader</span>
                    </span>
                  )}
                </div>
              </div>
            </div>
-            <Link to="/dashboard">
-              <Button variant="secondary">Back to Dashboard</Button>
-            </Link>
          </div>
        </div>
      </div>

-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="grid gap-6 lg:grid-cols-3">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8">
+        <div className="grid gap-4 md:gap-6 xl:grid-cols-3">
          {/* Main Content */}
-          <div className="lg:col-span-2 space-y-6">
+          <div className="lg:col-span-2 space-y-4 md:space-y-6">
            {/* Team Description */}
-            <div className="bg-white rounded-lg shadow-md p-6">
-              <h2 className="text-xl font-bold text-gray-900 mb-4">About Team</h2>
-              <p className="text-gray-700 whitespace-pre-wrap">{team.description}</p>
+            <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
+              <h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
+                About Team
+              </h2>
+              <p className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap break-all font-sans">
+                {team.description}
+              </p>
            </div>

            {/* Team Actions - Only for Leader */}
            {isLeader && (
-              <div className="bg-white rounded-lg shadow-md p-6">
-                <h2 className="text-xl font-bold text-gray-900 mb-4">Team Management</h2>
+              <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
+                <h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
+                  Team Management
+                </h2>
                <div className="grid gap-3 sm:grid-cols-2">
                  <Button
                    className="w-full"
@@ -142,14 +340,17 @@ const TeamDashboardPage: FC = (): ReactElement => {
                    onClick={() => setShowInviteModal(true)}
                    disabled={!canInvite}
                  >
-                    ➕ Invite Member {!canInvite && `(${members.length}/${MAX_TEAM_MEMBERS})`}
+                    <Icon icon="mdi:plus" className="inline-block mr-2" />
+                    Invite Member{' '}
+                    {!canInvite && `(${members.length}/${MAX_TEAM_MEMBERS})`}
                  </Button>
                  <Button
                    className="w-full relative"
                    variant="secondary"
                    onClick={() => setShowJoinRequestsModal(true)}
                  >
-                    📩 Join Requests
+                    <Icon icon="mdi:email" className="inline-block mr-2" /> Join
+                    Requests
                    {pendingJoinRequests.length > 0 && (
                      <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center">
                        {pendingJoinRequests.length}
@@ -158,37 +359,46 @@ const TeamDashboardPage: FC = (): ReactElement => {
                  </Button>
                  <Link to={`/teams/${teamId}/edit`}>
                    <Button className="w-full" variant="secondary">
-                      ✏️ Edit Team Info
+                      <Icon icon="mdi:pencil" className="inline-block mr-2" />
+                      Edit Team Info
                    </Button>
                  </Link>
                  <Link to={`/teams/${teamId}/members`}>
                    <Button className="w-full" variant="secondary">
-                      👥 Manage Members
+                      <Icon
+                        icon="mdi:account-group"
+                        className="inline-block mr-2"
+                      />
+                      Manage Members
                    </Button>
                  </Link>
                  <Link to={`/teams/${teamId}/chat`}>
                    <Button className="w-full" variant="secondary">
-                      💬 Team Chat
+                      <Icon icon="mdi:chat" className="inline-block mr-2" />
+                      Team Chat
                    </Button>
                  </Link>
                  <Link to={`/teams/${teamId}/submit`}>
                    <Button className="w-full">
-                      🚀 Submit Project
+                      <Icon icon="mdi:rocket" className="inline-block mr-2" />
+                      Submit Project
                    </Button>
                  </Link>
                </div>
                {!canInvite && members.length >= MAX_TEAM_MEMBERS && (
-                  <p className="text-sm text-gray-600 mt-3 text-center">
+                  <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 */}
-            {!isLeader && (
-              <div className="bg-white rounded-lg shadow-md p-6">
-                <h2 className="text-xl font-bold text-gray-900 mb-4">Quick Actions</h2>
+            {/* Quick Actions for Members (non-leaders) */}
+            {!isLeader && isMember && (
+              <div className="bg-white dark:bg-gray-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">
@@ -206,14 +416,16 @@ const TeamDashboardPage: FC = (): ReactElement => {
              </div>
            )}

-            {/* Submission Status */}
-            {team.has_submission && (
-              <div className="bg-green-50 border border-green-200 rounded-lg p-6">
+            {/* Submission Status - Only show to members */}
+            {team.has_submission && isMember && (
+              <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 md:p-6">
                <div className="flex items-center space-x-3">
                  <span className="text-3xl">✅</span>
                  <div>
-                    <h3 className="font-bold text-green-900">Project Submitted</h3>
-                    <p className="text-green-700 text-sm">
+                    <h3 className="font-bold text-green-900 dark:text-green-400">
+                      Project Submitted
+                    </h3>
+                    <p className="text-green-700 dark:text-green-300 text-sm">
                      Your team has successfully submitted a project
                    </p>
                  </div>
@@ -228,12 +440,17 @@ const TeamDashboardPage: FC = (): ReactElement => {
          </div>

          {/* Sidebar */}
-          <div className="space-y-6">
+          <div className="space-y-4 md:space-y-6">
            {/* Team Leader */}
-            <div className="bg-white rounded-lg shadow-md p-6">
-              <h3 className="font-bold text-gray-900 mb-4">Team Leader</h3>
+            <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
+              <h3 className="text-base md:text-lg font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
+                Team Leader
+              </h3>
              {team.leader && (
-                <div className="flex items-center space-x-3">
+                <button
+                  onClick={() => navigate(`/users/${team.leader.id}`)}
+                  className="w-full flex items-center space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2 transition-colors text-left cursor-pointer"
+                >
                  {team.leader.avatar ? (
                    <img
                      src={team.leader.avatar}
@@ -241,46 +458,62 @@ const TeamDashboardPage: FC = (): ReactElement => {
                      className="w-12 h-12 rounded-full object-cover"
                    />
                  ) : (
-                    <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center">
-                      <span className="text-gray-500">👤</span>
+                    <div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                      <span className="text-gray-500 dark:text-gray-400">
+                        👤
+                      </span>
                    </div>
                  )}
                  <div>
-                    <p className="font-medium text-gray-900">{team.leader.fullname}</p>
-                    <p className="text-sm text-gray-600">{team.leader.email}</p>
+                    <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>
-                </div>
+                </button>
              )}
            </div>

            {/* Team Members */}
-            <div className="bg-white rounded-lg shadow-md p-6">
-              <h3 className="font-bold text-gray-900 mb-4">
+            <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
+              <h3 className="text-base md:text-lg font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
                Members ({members.length})
              </h3>
              <div className="space-y-3">
-                {members.map((member) => (
-                  <div key={member.id} className="flex items-center space-x-3">
-                    {member.user.avatar ? (
+                {members.map((member: any) => (
+                  <button
+                    key={member.id}
+                    onClick={() => navigate(`/users/${member.user.id}`)}
+                    className="w-full flex items-center space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2 transition-colors text-left cursor-pointer"
+                  >
+                    {member.user?.avatar ? (
                      <img
                        src={member.user.avatar}
-                        alt={member.user.fullname}
+                        alt={member.user.fullname || 'Member'}
                        className="w-10 h-10 rounded-full object-cover"
+                        onLoad={handleImageLoad}
+                        onError={handleImageError}
                      />
                    ) : (
-                      <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
-                        <span className="text-gray-500 text-sm">👤</span>
+                      <div className="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                        <span className="text-gray-500 dark:text-gray-400 text-sm">
+                          👤
+                        </span>
                      </div>
                    )}
                    <div className="flex-1 min-w-0">
-                      <p className="font-medium text-gray-900 truncate">
-                        {member.user.fullname}
+                      <p className="font-medium text-gray-900 dark:text-white truncate">
+                        {member.user?.fullname || 'Unknown'}
                      </p>
-                      <p className="text-xs text-gray-500">
-                        {member.role === ETeamMemberRole.LEADER ? 'Leader' : 'Member'}
+                      <p className="text-xs text-gray-500 dark:text-gray-400">
+                        {member.role === ETeamMemberRole.LEADER
+                          ? 'Leader'
+                          : 'Member'}
                      </p>
                    </div>
-                  </div>
+                  </button>
                ))}
              </div>
            </div>
@@ -290,22 +523,27 @@ const TeamDashboardPage: FC = (): ReactElement => {

      {/* Invite Member Modal */}
      {showInviteModal && (
-        <div className="fixed inset-0 bg-black/20 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">
+        <div className="fixed inset-0 bg-black/20 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-md w-full p-6">
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              Invite Team Member
            </h2>
-            <p className="text-gray-600 mb-4">
-              Send an invitation to join your team. The invited member will see the invitation on their dashboard after logging in.
+            <p className="text-gray-600 dark:text-gray-400 mb-4 font-sans">
+              Send an invitation to join your team. The invited member will see
+              the invitation on their dashboard after logging in.
            </p>
-            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mb-6">
-              <p className="text-sm text-yellow-800">
-                <strong>Important:</strong> The email you enter must match the GitHub email address the member uses to sign in.
+            <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3 mb-6">
+              <p className="text-sm text-yellow-800 dark:text-yellow-300 font-sans">
+                <strong>Important:</strong> The email you enter must match the
+                GitHub email address the member uses to sign in.
              </p>
            </div>
            <form onSubmit={handleInviteMember} className="space-y-4">
              <div>
-                <label htmlFor="invite-email" className="block text-sm font-medium text-gray-700 mb-2">
+                <label
+                  htmlFor="invite-email"
+                  className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+                >
                  Email Address
                </label>
                <input
@@ -314,10 +552,10 @@ const TeamDashboardPage: FC = (): ReactElement => {
                  value={inviteEmail}
                  onChange={(e) => setInviteEmail(e.target.value)}
                  placeholder="Enter email address..."
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500"
                  required
                />
-                <p className="text-sm text-gray-500 mt-1">
+                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
                  Current members: {members.length}/{MAX_TEAM_MEMBERS}
                </p>
              </div>
@@ -348,15 +586,15 @@ const TeamDashboardPage: FC = (): ReactElement => {

      {/* Join Requests Modal */}
      {showJoinRequestsModal && (
-        <div className="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full p-6 max-h-[80vh] overflow-y-auto">
+        <div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-2xl w-full p-6 max-h-[80vh] overflow-y-auto">
            <div className="flex items-center justify-between mb-6">
-              <h2 className="text-2xl font-bold text-gray-900">
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
                Join Requests ({pendingJoinRequests.length})
              </h2>
              <button
                onClick={() => setShowJoinRequestsModal(false)}
-                className="text-gray-400 hover:text-gray-600 text-2xl"
+                className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 text-2xl cursor-pointer"
              >
                ✕
              </button>
@@ -364,15 +602,20 @@ const TeamDashboardPage: FC = (): ReactElement => {

            {pendingJoinRequests.length === 0 ? (
              <div className="text-center py-12">
-                <p className="text-gray-600 text-lg">No pending join requests</p>
-                <p className="text-gray-500 text-sm mt-2">
+                <p className="text-gray-600 dark:text-gray-400 text-lg">
+                  No pending join requests
+                </p>
+                <p className="text-gray-500 dark:text-gray-500 text-sm mt-2 font-sans">
                  When users request to join your team, they'll appear here
                </p>
              </div>
            ) : (
              <div className="space-y-4">
                {pendingJoinRequests.map((request: any) => (
-                  <div key={request.id} className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
+                  <div
+                    key={request.id}
+                    className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-shadow"
+                  >
                    <div className="flex items-start justify-between">
                      <div className="flex items-start space-x-3 flex-1">
                        {request.user?.avatar ? (
@@ -382,51 +625,67 @@ const TeamDashboardPage: FC = (): ReactElement => {
                            className="w-12 h-12 rounded-full object-cover"
                          />
                        ) : (
-                          <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center shrink-0">
-                            <span className="text-gray-500 text-xl">👤</span>
+                          <div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shrink-0">
+                            <span className="text-gray-500 dark:text-gray-400 text-xl">
+                              <Icon
+                                icon="mdi:account-circle"
+                                className="text-3xl"
+                              />
+                            </span>
                          </div>
                        )}
                        <div className="flex-1">
-                          <p className="font-semibold text-gray-900">
+                          <p className="font-semibold text-gray-900 dark:text-white">
                            {request.user?.fullname || 'Unknown User'}
                          </p>
-                          <p className="text-sm text-gray-600">
+                          <p className="text-sm text-gray-600 dark:text-gray-400">
                            {request.user?.email}
                          </p>
                          {request.message && (
-                            <div className="mt-2 bg-gray-50 rounded-lg p-3">
-                              <p className="text-sm text-gray-700">
+                            <div className="mt-2 bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
+                              <p className="text-sm text-gray-700 dark:text-gray-300">
                                <strong>Message:</strong> {request.message}
                              </p>
                            </div>
                          )}
-                          <p className="text-xs text-gray-500 mt-2">
-                            Requested {new Date(request.created_at).toLocaleDateString()}
+                          <p className="text-sm text-gray-500 dark:text-gray-500 mt-2 font-sans">
+                            Requested{' '}
+                            {new Date(request.created_at).toLocaleDateString()}
                          </p>
                        </div>
                      </div>
-                      <div className="flex space-x-2 ml-4">
-                        <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>
                    </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 border border-yellow-200 rounded-lg p-2">
-                        <p className="text-xs text-yellow-800">
-                          Team is full ({MAX_TEAM_MEMBERS}/{MAX_TEAM_MEMBERS} members). Remove a member before accepting new requests.
+                      <div className="mt-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3">
+                        <p className="text-sm text-yellow-800 dark:text-yellow-300 font-sans">
+                          Team is full ({MAX_TEAM_MEMBERS}/{MAX_TEAM_MEMBERS}{' '}
+                          members). Remove a member before accepting new
+                          requests.
                        </p>
                      </div>
                    )}
@@ -15,18 +15,18 @@ const SubmissionViewPage: FC = (): ReactElement => {

  if (isLoading) {
    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-gray-600">Loading submission...</div>
+      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-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">
+      <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 mb-4">No Submission Yet</h2>
-        <p className="text-gray-600 mb-4">Your team hasn't submitted a project</p>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">No Submission Yet</h2>
+        <p className="text-gray-600 dark:text-neutral-400 mb-4">Your team hasn't submitted a project</p>
        <Button onClick={() => navigate(`/teams/${teamId}`)}>Back to Team</Button>
      </div>
    );
@@ -43,13 +43,13 @@ const SubmissionViewPage: FC = (): ReactElement => {
    : 'Not submitted';

  return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="bg-white border-b">
+    <div className="min-h-screen bg-gray-50 dark:bg-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">Project Submission</h1>
-              <p className="text-gray-600 mt-1">{team?.name}</p>
+              <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Project Submission</h1>
+              <p className="text-gray-600 dark:text-neutral-400 mt-1">{team?.name}</p>
            </div>
            <Button variant="secondary" onClick={() => navigate(`/teams/${teamId}`)}>
              Back to Team
@@ -60,22 +60,22 @@ const SubmissionViewPage: FC = (): ReactElement => {

      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Status Banner */}
-        <div className="bg-green-50 border border-green-500 rounded-lg p-6 mb-6">
+        <div className="bg-green-50 dark:bg-green-900/20 border border-green-500 rounded-lg p-6 mb-6">
          <div className="flex items-center space-x-3">
            <span className="text-4xl">✅</span>
            <div>
-              <h3 className="font-bold text-green-900 text-lg">Project Submitted Successfully</h3>
-              <p className="text-green-700 text-sm">
+              <h3 className="font-bold text-green-900 dark:text-green-100 text-lg">Project Submitted Successfully</h3>
+              <p className="text-green-700 dark:text-green-300 text-sm">
                Submitted on {submittedDate}
              </p>
-              <p className="text-green-600 text-xs mt-1">
+              <p className="text-green-600 dark:text-green-400 text-xs mt-1">
                This submission is now read-only and cannot be edited
              </p>
            </div>
          </div>
        </div>

-        <div className="bg-white rounded-lg shadow-md overflow-hidden">
+        <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>
@@ -86,9 +86,9 @@ const SubmissionViewPage: FC = (): ReactElement => {
          <div className="p-8 space-y-6">
            {/* Description */}
            <div>
-              <h3 className="text-lg font-bold text-gray-900 mb-3">Project Description</h3>
-              <div className="bg-gray-50 rounded-lg p-4">
-                <p className="text-gray-700 whitespace-pre-wrap">{submission.description}</p>
+              <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">Project Description</h3>
+              <div className="bg-gray-50 dark:bg-neutral-800 rounded-lg p-4">
+                <p className="text-gray-700 dark:text-neutral-300 whitespace-pre-wrap">{submission.description}</p>
              </div>
            </div>

@@ -96,12 +96,12 @@ const SubmissionViewPage: FC = (): ReactElement => {
            <div className="grid gap-6 md:grid-cols-2">
              {/* Repository */}
              <div>
-                <h3 className="text-lg font-bold text-gray-900 mb-3">Repository</h3>
+                <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">Repository</h3>
                <a
                  href={submission.repository_url}
                  target="_blank"
                  rel="noopener noreferrer"
-                  className="flex items-center space-x-2 text-blue-600 hover:text-blue-800"
+                  className="flex items-center space-x-2 text-blue-600 dark:text-primary-400 hover:text-blue-800 dark:hover:text-primary-300"
                >
                  <span>🔗</span>
                  <span className="break-all">{submission.repository_url}</span>
@@ -111,12 +111,12 @@ const SubmissionViewPage: FC = (): ReactElement => {
              {/* Demo URL */}
              {submission.demo_url && (
                <div>
-                  <h3 className="text-lg font-bold text-gray-900 mb-3">Live Demo</h3>
+                  <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">Live Demo</h3>
                  <a
                    href={submission.demo_url}
                    target="_blank"
                    rel="noopener noreferrer"
-                    className="flex items-center space-x-2 text-blue-600 hover:text-blue-800"
+                    className="flex items-center space-x-2 text-blue-600 dark:text-primary-400 hover:text-blue-800 dark:hover:text-primary-300"
                  >
                    <span>🌐</span>
                    <span className="break-all">{submission.demo_url}</span>
@@ -127,12 +127,12 @@ const SubmissionViewPage: FC = (): ReactElement => {
              {/* Presentation URL */}
              {submission.presentation_url && (
                <div>
-                  <h3 className="text-lg font-bold text-gray-900 mb-3">Presentation</h3>
+                  <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 hover:text-blue-800"
+                    className="flex items-center space-x-2 text-blue-600 dark:text-primary-400 hover:text-blue-800 dark:hover:text-primary-300"
                  >
                    <span>📊</span>
                    <span className="break-all">{submission.presentation_url}</span>
@@ -144,7 +144,7 @@ const SubmissionViewPage: FC = (): ReactElement => {
            {/* Screenshots */}
            {submission.screenshots && submission.screenshots.length > 0 && (
              <div>
-                <h3 className="text-lg font-bold text-gray-900 mb-3">
+                <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">
                  Screenshots ({submission.screenshots.length})
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -159,7 +159,7 @@ const SubmissionViewPage: FC = (): ReactElement => {
                      <img
                        src={url}
                        alt={`Screenshot ${index + 1}`}
-                        className="w-full h-48 object-cover rounded-lg border-2 border-gray-200 hover:border-blue-500 transition-colors cursor-pointer"
+                        className="w-full h-48 object-cover rounded-lg border-2 border-gray-200 dark:border-neutral-700 hover:border-blue-500 dark:hover:border-primary-500 transition-colors cursor-pointer"
                      />
                    </a>
                  ))}
@@ -168,22 +168,22 @@ const SubmissionViewPage: FC = (): ReactElement => {
            )}

            {/* Submission Info */}
-            <div className="bg-gray-50 rounded-lg p-4 border-t-4 border-blue-600">
-              <h3 className="text-sm font-bold text-gray-900 mb-2">Submission Information</h3>
+            <div className="bg-gray-50 dark:bg-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">Status:</span>
-                  <span className="font-medium text-green-600">
+                  <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">Submitted:</span>
-                  <span className="font-medium text-gray-900">{submittedDate}</span>
+                  <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">Submission ID:</span>
-                  <span className="font-medium text-gray-900 font-mono text-xs">
+                  <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>
@@ -191,8 +191,8 @@ const SubmissionViewPage: FC = (): ReactElement => {
            </div>

            {/* Read-only Notice */}
-            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
-              <p className="text-sm text-yellow-800">
+            <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
+              <p className="text-sm text-yellow-800 dark:text-yellow-200">
                <strong>Note:</strong> This submission is now locked and cannot be edited or deleted.
                If you need to make changes, please contact the hackathon organizers.
              </p>
@@ -23,7 +23,8 @@ const SubmitProjectPage: FC = (): ReactElement => {

  const { data: teamData } = useTeamById(teamId || '');
  const { data: submissionData } = useTeamSubmission(teamId || '', !!teamId);
-  const { mutateAsync: submitProject, isPending: isSubmitting } = useSubmitProject(teamId || '');
+  const { mutateAsync: submitProject, isPending: isSubmitting } =
+    useSubmitProject(teamId || '');
  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();

  const team = teamData?.data;
@@ -38,25 +39,38 @@ const SubmitProjectPage: FC = (): ReactElement => {

  if (!isLeader) {
    return (
-      <div className="flex flex-col items-center justify-center min-h-screen">
-        <h2 className="text-2xl font-bold text-gray-900 mb-4">Access Denied</h2>
-        <p className="text-gray-600 mb-4">Only the team leader can submit projects</p>
-        <Button onClick={() => navigate(`/teams/${teamId}`)}>Back to Team</Button>
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          Access Denied
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-4">
+          Only the team leader can submit projects
+        </p>
+        <Button onClick={() => navigate(`/teams/${teamId}`)}>
+          Back to Team
+        </Button>
      </div>
    );
  }

  if (hasSubmission) {
    return (
-      <div className="flex flex-col items-center justify-center min-h-screen">
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
        <div className="text-6xl mb-4">✅</div>
-        <h2 className="text-2xl font-bold text-gray-900 mb-4">Project Already Submitted</h2>
-        <p className="text-gray-600 mb-4">Your team has already submitted a project</p>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          Project Already Submitted
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-4">
+          Your team has already submitted a project
+        </p>
        <div className="flex space-x-3">
          <Button onClick={() => navigate(`/teams/${teamId}/submission`)}>
            View Submission
          </Button>
-          <Button variant="secondary" onClick={() => navigate(`/teams/${teamId}`)}>
+          <Button
+            variant="secondary"
+            onClick={() => navigate(`/teams/${teamId}`)}
+          >
            Back to Team
          </Button>
        </div>
@@ -64,14 +78,16 @@ const SubmitProjectPage: FC = (): ReactElement => {
    );
  }

-  const handleScreenshotUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+  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 uploadPromises = Array.from(files).map((file) => uploadFile(file));
      const results = await Promise.all(uploadPromises);
-      const urls = results.map(r => r.data.url);
+      const urls = results.map((r) => r.data.url);
      setScreenshots([...screenshots, ...urls]);
    } catch (error) {
      console.error('Failed to upload screenshots:', error);
@@ -95,47 +111,58 @@ const SubmitProjectPage: FC = (): ReactElement => {
  });

  return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="bg-white border-b">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <h1 className="text-3xl font-bold text-gray-900">Submit Project</h1>
-          <p className="text-gray-600 mt-1">{team?.name}</p>
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+            Submit Project
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400 mt-1">{team?.name}</p>
        </div>
      </div>

      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Warning Banner */}
-        <div className="bg-red-50 border-2 border-red-500 rounded-lg p-6 mb-6">
+        <div className="bg-red-50 dark:bg-red-900/20 border-2 border-red-500 rounded-lg p-6 mb-6">
          <div className="flex items-start space-x-3">
            <span className="text-3xl">⚠️</span>
            <div>
-              <h3 className="font-bold text-red-900 text-lg">IMPORTANT WARNING</h3>
-              <ul className="text-red-800 mt-2 space-y-1 text-sm">
+              <h3 className="font-bold text-red-900 dark:text-red-100 text-lg">
+                IMPORTANT WARNING
+              </h3>
+              <ul className="text-red-800 dark:text-red-200 mt-2 space-y-1 text-sm font-sans">
                <li>• You can only submit your project ONCE</li>
                <li>• After submission, you CANNOT edit or change anything</li>
-                <li>• Make sure all information is correct before submitting</li>
+                <li>
+                  • Make sure all information is correct before submitting
+                </li>
                <li>• Review your project details carefully</li>
              </ul>
            </div>
          </div>
        </div>

-        <div className="bg-white rounded-lg shadow-md p-8">
-          <form onSubmit={(e) => {
-            e.preventDefault();
-            setShowConfirmModal(true);
-          }} className="space-y-6">
+        <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-sm font-medium text-gray-700">
+              <label className="block text-[15px] font-medium text-gray-700 dark:text-gray-300">
                Project Description <span className="text-red-500">*</span>
              </label>
              <Controller
@@ -148,9 +175,12 @@ const SubmitProjectPage: FC = (): ReactElement => {
                      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>
+                      <p className="text-sm text-red-500 mt-1">
+                        {fieldState.error.message}
+                      </p>
                    )}
                  </div>
                )}
@@ -164,6 +194,8 @@ const SubmitProjectPage: FC = (): ReactElement => {
              placeholder="https://github.com/username/project"
              name="repository_url"
              type="url"
+              size="lg"
+              isRequired={true}
            />

            {/* Demo URL */}
@@ -173,6 +205,7 @@ const SubmitProjectPage: FC = (): ReactElement => {
              placeholder="https://your-project-demo.com"
              name="demo_url"
              type="url"
+              size="lg"
            />

            {/* Presentation URL */}
@@ -182,12 +215,13 @@ const SubmitProjectPage: FC = (): ReactElement => {
              placeholder="https://slides.com/your-presentation or Google Drive link"
              name="presentation_url"
              type="url"
+              size="lg"
            />

            {/* Screenshots */}
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
-                Project Screenshots <span className="text-gray-400">(Optional)</span>
+            <div>
+              <label className="block text-label1 font-medium text-neutral-800 dark:text-gray-300">
+                Project Screenshots (Optional)
              </label>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-4">
                {screenshots.map((url, index) => (
@@ -195,7 +229,7 @@ const SubmitProjectPage: FC = (): ReactElement => {
                    <img
                      src={url}
                      alt={`Screenshot ${index + 1}`}
-                      className="w-full h-32 object-cover rounded-lg border-2 border-gray-200"
+                      className="w-full h-32 object-cover rounded-lg border-2 border-gray-200 dark:border-gray-700"
                    />
                    <button
                      type="button"
@@ -207,10 +241,14 @@ const SubmitProjectPage: FC = (): ReactElement => {
                  </div>
                ))}
              </div>
-              <label className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
+              <label className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800">
                <div className="text-center">
-                  <p className="text-gray-500">Click to upload screenshots</p>
-                  <p className="text-xs text-gray-400 mt-1">PNG, JPG up to 5MB each</p>
+                  <p className="text-gray-500 dark:text-gray-400">
+                    Click to upload screenshots
+                  </p>
+                  <p className="text-xs text-gray-400 dark:text-gray-500 mt-1 font-sans">
+                    PNG, JPG up to 5MB each
+                  </p>
                </div>
                <input
                  type="file"
@@ -247,22 +285,22 @@ const SubmitProjectPage: FC = (): ReactElement => {

      {/* Confirmation Modal */}
      {showConfirmModal && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
+        <div className="fixed inset-0 bg-black/50 dark:bg-black/70 flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl dark:shadow-gray-950/50 max-w-md w-full p-6">
            <div className="text-center mb-6">
              <div className="text-5xl mb-4">⚠️</div>
-              <h2 className="text-2xl font-bold text-gray-900 mb-2">
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
                Final Confirmation
              </h2>
-              <p className="text-red-600 font-medium">
+              <p className="text-red-600 dark:text-red-400 font-medium">
                This action is IRREVERSIBLE!
              </p>
            </div>
-            <div className="bg-gray-50 rounded-lg p-4 mb-6">
-              <p className="text-sm text-gray-700 mb-3">
+            <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 space-y-2">
+              <ul className="text-sm text-gray-600 dark:text-gray-400 space-y-2">
                <li>✓ All information is correct and complete</li>
                <li>✓ You understand this can only be done once</li>
                <li>✓ You cannot edit after submission</li>
@@ -1,26 +1,38 @@
-import { FC, ReactElement, useState } from 'react';
-import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+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 {
+  useTeams,
+  useJoinTeam,
+  useMyTeams,
+  ETeamVisibility,
+  joinTeamSchema,
+  TJoinTeamForm,
+} from '@imphnen-frontend-service/service';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-
-const INDONESIAN_CITIES = [
-  'All Cities', 'Jakarta', 'Surabaya', 'Bandung', 'Medan', 'Semarang',
-  'Makassar', 'Palembang', 'Tangerang', 'Depok', 'Bekasi',
-  'Yogyakarta', 'Malang', 'Bogor', 'Batam', 'Pekanbaru',
-];
+import { CitySelect } from '../../../components/city-select';
+import { Icon } from '@iconify/react';

 const BrowseTeamsPage: FC = (): ReactElement => {
  const navigate = useNavigate();
-  const [search, setSearch] = useState('');
-  const [selectedCity, setSelectedCity] = useState('All Cities');
+  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,
-    city: selectedCity === 'All Cities' ? undefined : selectedCity,
+    search: debouncedSearch,
+    city: selectedCity || undefined,
    visibility: ETeamVisibility.PUBLIC,
  });

@@ -59,16 +71,20 @@ const BrowseTeamsPage: FC = (): ReactElement => {
  });

  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
      {/* Header */}
-      <div className="bg-white border-b">
+      <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">Browse Teams</h1>
-              <p className="text-gray-600 mt-1">Find and join teams looking for members</p>
+              <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">
+            <Link to="/dashboard" className="hidden md:block">
              <Button variant="secondary">Back to Dashboard</Button>
            </Link>
          </div>
@@ -77,34 +93,29 @@ const BrowseTeamsPage: FC = (): ReactElement => {

      {/* Filters */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        <div className="bg-white p-6 rounded-lg shadow-sm mb-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 mb-2">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Search Teams
              </label>
-              <Input
+              <input
                type="text"
                placeholder="Search by team name..."
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
+                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 mb-2">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Filter by City
              </label>
-              <select
+              <CitySelect
                value={selectedCity}
-                onChange={(e) => setSelectedCity(e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              >
-                {INDONESIAN_CITIES.map((city) => (
-                  <option key={city} value={city}>
-                    {city}
-                  </option>
-                ))}
-              </select>
+                onChange={setSelectedCity}
+                placeholder="All Cities (search to filter...)"
+              />
            </div>
          </div>
        </div>
@@ -112,25 +123,30 @@ const BrowseTeamsPage: FC = (): ReactElement => {
        {/* Teams List */}
        {isLoading ? (
          <div className="text-center py-12">
-            <p className="text-gray-600">Loading teams...</p>
+            <p className="text-gray-600 dark:text-gray-400">Loading teams...</p>
          </div>
        ) : teams.length === 0 ? (
-          <div className="bg-white rounded-lg shadow-sm p-12 text-center">
-            <p className="text-gray-600 text-lg">No teams found</p>
-            <p className="text-gray-500 mt-2">Try adjusting your filters</p>
+          <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 lg:grid-cols-3">
+          <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
            {teams.map((team) => (
-              <div key={team.id} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
-                {team.banner && (
-                  <img
-                    src={team.banner}
-                    alt={team.name}
-                    className="w-full h-32 object-cover"
-                  />
-                )}
-                <div className="p-6">
+              <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
@@ -139,34 +155,61 @@ const BrowseTeamsPage: FC = (): ReactElement => {
                        className="w-12 h-12 rounded-full object-cover"
                      />
                    ) : (
-                      <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center">
-                        <span className="text-gray-500 text-xl">👥</span>
+                      <div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                        <span className="text-gray-500 dark:text-gray-300 text-xl">
+                          <Icon icon="mdi:account-group" />
+                        </span>
                      </div>
                    )}
-                    <div className="flex-1">
-                      <h3 className="text-lg font-bold text-gray-900">{team.name}</h3>
-                      <p className="text-sm text-gray-600">📍 {team.city}</p>
+                    <div className="flex-1 min-w-0">
+                      <h3 className="text-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 text-sm mb-4 line-clamp-3">
+                  <p className="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-3 font-sans">
                    {team.description}
                  </p>
-                  {isMyTeam(team.id) ? (
-                    <Button
-                      className="w-full"
-                      variant="secondary"
-                      onClick={() => navigate(`/teams/${team.id}`)}
-                    >
-                      Your Team
-                    </Button>
-                  ) : (
-                    <Button
-                      className="w-full"
-                      onClick={() => handleJoinRequest(team.id)}
-                    >
-                      Request to Join
-                    </Button>
-                  )}
+                  <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>
            ))}
@@ -176,27 +219,27 @@ const BrowseTeamsPage: FC = (): ReactElement => {

      {/* Join Request Modal */}
      {showJoinModal && (
-        <div className="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">
+        <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 mb-6">
+            <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 mb-2">
+                <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 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-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">
+                  <p className="text-sm text-red-500 mt-1 font-sans">
                    {form.formState.errors.message.message}
                  </p>
                )}
@@ -6,11 +6,7 @@ import { useForm, Controller } from 'react-hook-form';
 import { teamCreateSchema, TTeamCreateForm, useCreateTeam, ETeamVisibility, useUploadFile } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';

-const INDONESIAN_CITIES = [
-  'Jakarta', 'Surabaya', 'Bandung', 'Medan', 'Semarang',
-  'Makassar', 'Palembang', 'Tangerang', 'Depok', 'Bekasi',
-  'Yogyakarta', 'Malang', 'Bogor', 'Batam', 'Pekanbaru',
-];
+import { CitySelect } from '../../../components/city-select';

 const CreateTeamPage: FC = (): ReactElement => {
  const navigate = useNavigate();
@@ -84,29 +80,29 @@ const CreateTeamPage: FC = (): ReactElement => {
  });

  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-neutral-950">
      {/* Header */}
-      <div className="bg-white border-b">
+      <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">Create Your Team</h1>
-          <p className="text-gray-600 mt-1">Build your hackathon dream team</p>
+          <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 rounded-lg shadow-md p-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 mb-2">
-                Team Banner <span className="text-gray-400">(Optional)</span>
+              <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"
+                    className="w-full h-48 object-cover rounded-lg border-2 border-gray-200 dark:border-neutral-700"
                  />
                  <button
                    type="button"
@@ -120,10 +116,10 @@ const CreateTeamPage: FC = (): ReactElement => {
                  </button>
                </div>
              ) : (
-                <label className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
+                <label className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-gray-300 dark:border-neutral-600 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-neutral-800">
                  <div className="text-center">
-                    <p className="text-gray-500">Click to upload banner</p>
-                    <p className="text-xs text-gray-400 mt-1">1200x400 recommended</p>
+                    <p className="text-gray-500 dark:text-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"
@@ -137,19 +133,19 @@ const CreateTeamPage: FC = (): ReactElement => {

            {/* Logo Upload */}
            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Team Logo <span className="text-gray-400">(Optional, but highly recommended)</span>
+              <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"
+                    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 flex items-center justify-center">
-                    <span className="text-gray-400 text-3xl">👥</span>
+                  <div className="w-24 h-24 rounded-full bg-gray-200 dark:bg-neutral-700 flex items-center justify-center">
+                    <span className="text-gray-400 dark:text-neutral-500 text-3xl">👥</span>
                  </div>
                )}
                <div>
@@ -191,36 +187,26 @@ const CreateTeamPage: FC = (): ReactElement => {

            {/* City */}
            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
+              <label className="block text-sm font-medium text-gray-700 dark:text-neutral-300">
                City <span className="text-red-500">*</span>
              </label>
              <Controller
                control={form.control}
                name="city"
                render={({ field, fieldState }) => (
-                  <div>
-                    <select
-                      {...field}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    >
-                      <option value="">Select city</option>
-                      {INDONESIAN_CITIES.map((city) => (
-                        <option key={city} value={city}>
-                          {city}
-                        </option>
-                      ))}
-                    </select>
-                    {fieldState.error && (
-                      <p className="text-sm text-red-500 mt-1">{fieldState.error.message}</p>
-                    )}
-                  </div>
+                  <CitySelect
+                    value={field.value}
+                    onChange={field.onChange}
+                    error={fieldState.error?.message}
+                    placeholder="Search your city..."
+                  />
                )}
              />
            </div>

            {/* Description */}
            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
+              <label className="block text-sm font-medium text-gray-700 dark:text-neutral-300">
                Description <span className="text-red-500">*</span>
              </label>
              <Controller
@@ -244,7 +230,7 @@ const CreateTeamPage: FC = (): ReactElement => {

            {/* Visibility */}
            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
+              <label className="block text-sm font-medium text-gray-700 dark:text-neutral-300">
                Team Visibility <span className="text-red-500">*</span>
              </label>
              <Controller
@@ -252,7 +238,7 @@ const CreateTeamPage: FC = (): ReactElement => {
                name="visibility"
                render={({ field }) => (
                  <div className="space-y-3">
-                    <label className="flex items-start space-x-3 cursor-pointer border rounded-lg p-4 hover:bg-gray-50">
+                    <label className="flex items-start space-x-3 cursor-pointer border dark:border-neutral-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-neutral-800">
                      <input
                        type="radio"
                        {...field}
@@ -261,13 +247,13 @@ const CreateTeamPage: FC = (): ReactElement => {
                        className="mt-1"
                      />
                      <div>
-                        <p className="font-medium text-gray-900">Public</p>
-                        <p className="text-sm text-gray-600">
+                        <p className="font-medium text-gray-900 dark:text-white">Public</p>
+                        <p className="text-sm text-gray-600 dark:text-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 rounded-lg p-4 hover:bg-gray-50">
+                    <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}
@@ -276,8 +262,8 @@ const CreateTeamPage: FC = (): ReactElement => {
                        className="mt-1"
                      />
                      <div>
-                        <p className="font-medium text-gray-900">Private</p>
-                        <p className="text-sm text-gray-600">
+                        <p className="font-medium text-gray-900 dark:text-white">Private</p>
+                        <p className="text-sm text-gray-600 dark:text-neutral-400">
                          Team is hidden from Browse Teams. Members can only join via invitation.
                        </p>
                      </div>
@@ -288,8 +274,8 @@ const CreateTeamPage: FC = (): ReactElement => {
            </div>

            {/* Warning */}
-            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
-              <p className="text-sm text-yellow-800">
+            <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
+              <p className="text-sm text-yellow-800 dark:text-yellow-200">
                <strong>Note:</strong> As team leader, you cannot leave or join another team after creating this team.
              </p>
            </div>
@@ -0,0 +1,48 @@
+import { FC, ReactElement, useState } from 'react';
+import { Outlet } from 'react-router';
+import { Sidebar } from '../../components/sidebar';
+
+const TeamsLayout: 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 z-10">
+          <div className="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>
+        </div>
+
+        <main className="flex-1">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default TeamsLayout;
@@ -0,0 +1,46 @@
+import { FC, ReactElement, useState } from 'react';
+import { Outlet } from 'react-router';
+import { Sidebar } from '../../../components/sidebar';
+
+const UserDetailLayout: 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 overflow-auto">
+        {/* Mobile Header with Hamburger */}
+        <div className="lg:hidden bg-white dark:bg-gray-900 border-b dark:border-neutral-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-neutral-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 UserDetailLayout;
@@ -0,0 +1,236 @@
+import { FC, ReactElement } from 'react';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { useParams, useNavigate, Link } from 'react-router';
+import {
+  useUserDetailsById,
+  useTeamsByUserId,
+} from '@imphnen-frontend-service/service';
+import { Icon } from '@iconify/react';
+
+const UserProfilePage: FC = (): ReactElement => {
+  const { userId } = useParams<{ userId: string }>();
+  const navigate = useNavigate();
+  const { data: userData, isLoading, error } = useUserDetailsById(userId || '');
+  const { data: teamsData } = useTeamsByUserId(userId || '');
+
+  const user = userData?.data;
+  const userTeams = teamsData?.data || [];
+
+  if (isLoading) {
+    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 user profile...
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !user) {
+    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">
+          User not found
+        </h2>
+        {error && (
+          <p className="text-red-600 dark:text-red-400 mb-4">{String(error)}</p>
+        )}
+        <Button onClick={() => navigate('/dashboard')}>
+          Back to Dashboard
+        </Button>
+      </div>
+    );
+  }
+
+  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-700">
+        <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">
+              {user.avatar ? (
+                <img
+                  src={user.avatar}
+                  alt={user.fullname}
+                  className="w-16 h-16 md:w-20 md:h-20 rounded-full object-cover border-4 border-white dark:border-gray-800 shadow-lg"
+                />
+              ) : (
+                <div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center border-4 border-white dark:border-gray-800 shadow-lg">
+                  <span className="text-gray-500 dark:text-gray-400 text-2xl md:text-3xl">
+                    <Icon icon="mdi:account-circle" className="w-10 h-10" />
+                  </span>
+                </div>
+              )}
+              <div>
+                <h1 className="text-xl md:text-3xl font-bold text-gray-900 dark:text-white">
+                  {user.fullname}
+                </h1>
+                <p className="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-1">
+                  {user.email}
+                </p>
+                {user.location && (
+                  <div className="flex items-center space-x-4 mt-2">
+                    <span className="text-sm text-gray-500 dark:text-gray-500">
+                      <Icon
+                        icon="mdi:map-marker"
+                        className="inline-block w-4 h-4 mr-1"
+                      />
+                      {user.location}
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+            <Link to="/dashboard" className="hidden md:block">
+              <Button variant="secondary">Back to Dashboard</Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8">
+        <div className="grid gap-4 md:gap-6 lg:grid-cols-3">
+          {/* Main Content */}
+          <div className="lg:col-span-2 space-y-4 md:space-y-6">
+            {/* About Section */}
+            {user.bio && (
+              <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6 overflow-hidden">
+                <h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
+                  About
+                </h2>
+                <p className="text-gray-700 dark:text-gray-300 break-all overflow-wrap-anywhere font-sans">
+                  {user.bio}
+                </p>
+              </div>
+            )}
+
+            {/* Skills Section */}
+            {user.skills && user.skills.length > 0 && (
+              <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 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">
+                  Skills
+                </h2>
+                <div className="flex flex-wrap gap-3">
+                  {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>
+            )}
+
+            {/* Teams Section */}
+            {userTeams.length > 0 ? (
+              <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 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">
+                  Teams ({userTeams.length})
+                </h2>
+                <div className="grid gap-4 md:grid-cols-2">
+                  {userTeams.map((team: any) => (
+                    <Link
+                      key={team.id}
+                      to={'/teams/' + team.id}
+                      className="bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-gray-950/50 overflow-hidden hover:shadow-lg transition-shadow"
+                    >
+                      <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 items-center space-x-3 mb-2">
+                          {team.logo && (
+                            <img
+                              src={team.logo}
+                              alt={team.name}
+                              className="w-12 h-12 rounded-full object-cover"
+                            />
+                          )}
+                          <div className="flex-1 min-w-0">
+                            <h3 className="font-bold text-gray-900 dark:text-white line-clamp-2 mb-1">
+                              {team.name}
+                            </h3>
+                            <div className="text-sm text-gray-600 dark:text-gray-400 flex gap-2 font-sans">
+                              <p className="truncate flex-1 min-w-0">
+                                <Icon
+                                  icon="mdi:map-marker"
+                                  className="inline-block w-4 h-4 mr-1"
+                                />
+                                {team.city}
+                              </p>
+                              <p className="whitespace-nowrap shrink-0">
+                                <Icon
+                                  icon="mdi:account-group"
+                                  className="inline-block w-4 h-4 mr-1"
+                                />
+                                {team.members?.length || 0} members
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                        <p className="text-gray-600 dark:text-gray-400 text-base line-clamp-2 font-sans">
+                          {team.description}
+                        </p>
+                      </div>
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 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">
+                  Teams
+                </h2>
+                <div className="text-center py-8">
+                  <div className="text-4xl mb-3">👥</div>
+                  <p className="text-gray-600 dark:text-gray-400">
+                    Not in any team yet
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-4 md:space-y-6">
+            {/* Contact Info */}
+            <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 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">
+                Contact Information
+              </h3>
+              <div className="space-y-3">
+                <div>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    Email
+                  </p>
+                  <p className="text-gray-900 dark:text-white font-medium">
+                    {user.email}
+                  </p>
+                </div>
+                {user.location && (
+                  <div>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Location
+                    </p>
+                    <p className="text-gray-900 dark:text-white font-medium">
+                      {user.location}
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserProfilePage;
@@ -0,0 +1,117 @@
+import { FC, useState, useRef, useEffect } from 'react';
+import INDONESIAN_CITIES from '../constants/cities';
+
+interface CitySelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  error?: string;
+  placeholder?: string;
+}
+
+export const CitySelect: FC<CitySelectProps> = ({
+  value,
+  onChange,
+  error,
+  placeholder = 'Search your city...',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Filter cities based on search query
+  const filteredCities = INDONESIAN_CITIES.filter((city) =>
+    city.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleSelectCity = (city: string) => {
+    onChange(city);
+    setSearchQuery('');
+    setIsOpen(false);
+  };
+
+  const handleInputClick = () => {
+    setIsOpen(true);
+    setSearchQuery('');
+  };
+
+  const handleClearSelection = () => {
+    onChange('');
+    setSearchQuery('');
+    setIsOpen(true);
+    inputRef.current?.focus();
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <div className="relative">
+        <input
+          ref={inputRef}
+          type="text"
+          value={isOpen ? searchQuery : value}
+          onChange={(e) => {
+            setSearchQuery(e.target.value);
+            setIsOpen(true);
+          }}
+          onClick={handleInputClick}
+          placeholder={placeholder}
+          className={`w-full h-[42px] px-3 text-[15px] border 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 ${
+            error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
+          }`}
+        />
+        {value && !isOpen && (
+          <button
+            type="button"
+            onClick={handleClearSelection}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500 hover:text-gray-600 cursor-pointer dark:hover:text-gray-300"
+          >
+            ✕
+          </button>
+        )}
+      </div>
+
+      {error && <p className="text-sm text-red-500 mt-1">{error}</p>}
+
+      {isOpen && (
+        <div className="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto text-label2">
+          {filteredCities.length > 0 ? (
+            <ul className="py-1">
+              {filteredCities.map((city) => (
+                <li
+                  key={city}
+                  onClick={() => handleSelectCity(city)}
+                  className={`px-3 py-2 cursor-pointer hover:bg-blue-50 dark:hover:bg-blue-900/30 ${
+                    value === city
+                      ? 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-400'
+                      : 'text-gray-900 dark:text-gray-200'
+                  }`}
+                >
+                  {city}
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <div className="px-3 py-2 text-gray-500 dark:text-gray-400 text-sm">
+              No cities found
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
@@ -0,0 +1,302 @@
+import { FC, useEffect } from 'react';
+import { Link, useLocation } from 'react-router';
+import {
+  useMyTeams,
+  useAuthStore,
+  supabase,
+} from '@imphnen-frontend-service/service';
+import { useNavigate } from 'react-router';
+import { toast } from 'sonner';
+import { useTheme } from './theme-provider';
+import { Icon } from '@iconify/react';
+
+interface NavItem {
+  name: string;
+  path: string;
+  icon: React.ReactNode;
+  show: boolean;
+}
+
+interface SidebarProps {
+  isOpen?: boolean;
+  onClose?: () => void;
+}
+
+export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { session, clearSession } = useAuthStore();
+  const { data: teamsData } = useMyTeams();
+  const { theme, setTheme, resolvedTheme } = useTheme();
+
+  const user = session?.user;
+  const myTeams = teamsData?.data || [];
+  const hasTeam = myTeams.length > 0;
+
+  // Close sidebar on route change (mobile)
+  useEffect(() => {
+    if (onClose) {
+      onClose();
+    }
+  }, [location.pathname]);
+
+  const handleLogout = async () => {
+    try {
+      await supabase.auth.signOut();
+      clearSession();
+      localStorage.clear();
+      toast.success('Logged out successfully');
+      navigate('/auth/login');
+    } catch (error) {
+      console.error('Logout error:', error);
+      clearSession();
+      localStorage.clear();
+      navigate('/auth/login');
+    }
+  };
+
+  const navItems: NavItem[] = [
+    {
+      name: 'Dashboard',
+      path: '/dashboard',
+      icon: <Icon icon="heroicons:home" className="w-5 h-5" />,
+      show: true,
+    },
+    {
+      name: 'My Teams',
+      path: '/teams/' + myTeams[0]?.id,
+      icon: <Icon icon="heroicons:users" className="w-5 h-5" />,
+      show: myTeams.length > 0,
+    },
+    {
+      name: 'Browse Teams',
+      path: '/teams/browse',
+      icon: <Icon icon="heroicons-outline:search" className="w-5 h-5" />,
+      show: true,
+    },
+    {
+      name: 'Create Team',
+      path: '/teams/create',
+      icon: <Icon icon="heroicons:plus" className="h-5 w-5" />,
+      show: !hasTeam,
+    },
+    {
+      name: 'Edit Profile',
+      path: '/profile',
+      icon: (
+        <svg
+          className="w-5 h-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+          />
+        </svg>
+      ),
+      show: false,
+    },
+  ];
+
+  const cycleTheme = () => {
+    if (theme === 'light') setTheme('dark');
+    else if (theme === 'dark') setTheme('system');
+    else setTheme('light');
+  };
+
+  const getThemeIcon = () => {
+    if (theme === 'system') {
+      return (
+        <svg
+          className="w-5 h-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+          />
+        </svg>
+      );
+    }
+    if (resolvedTheme === 'dark') {
+      return (
+        <svg
+          className="w-5 h-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+          />
+        </svg>
+      );
+    }
+    return (
+      <svg
+        className="w-5 h-5"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+        />
+      </svg>
+    );
+  };
+
+  const getThemeLabel = () => {
+    if (theme === 'system') return 'System';
+    if (theme === 'dark') return 'Dark';
+    return 'Light';
+  };
+
+  const sidebarContent = (
+    <div className="w-64 bg-white dark:bg-gray-900 border-r dark:border-gray-800 min-h-screen flex flex-col">
+      {/* Logo / Brand with Close Button */}
+      <div className="p-6 flex items-center justify-between border-b dark:border-gray-800">
+        <h1 className="text-xl font-bold text-gray-900 dark:text-white">
+          Hackathon
+        </h1>
+        {onClose && (
+          <button
+            onClick={onClose}
+            className="lg:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+          >
+            <svg
+              className="w-5 h-5 text-gray-500 dark:text-gray-400"
+              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>
+
+      {/* User Info */}
+      <div className="p-4 border-b dark:border-gray-800">
+        <div className="flex items-center space-x-3">
+          {user?.avatar ? (
+            <img
+              src={user.avatar}
+              alt={user.fullname || 'User'}
+              className="w-10 h-10 rounded-full object-cover"
+            />
+          ) : (
+            <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
+              <Icon
+                icon="ic:baseline-person"
+                width="24"
+                height="24"
+                className="text-gray-400 dark:text-gray-400"
+              />
+            </div>
+          )}
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium text-gray-900 dark:text-white truncate">
+              {user?.fullname || user?.email?.split('@')[0] || 'User'}
+            </p>
+            <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
+              {user?.email}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 p-4">
+        <ul className="space-y-2">
+          {navItems
+            .filter((item) => item.show)
+            .map((item) => {
+              const isActive = location.pathname === item.path;
+              return (
+                <li key={item.path}>
+                  <Link
+                    to={item.path}
+                    className={`flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors ${
+                      isActive
+                        ? 'bg-primary-50 dark:bg-blue-900/30 text-primary-600 dark:text-blue-400 font-medium'
+                        : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
+                    }`}
+                  >
+                    {item.icon}
+                    <span>{item.name}</span>
+                  </Link>
+                </li>
+              );
+            })}
+        </ul>
+      </nav>
+
+      {/* Theme Toggle & Logout */}
+      <div className="p-4 border-t dark:border-gray-800 space-y-2">
+        <button
+          onClick={cycleTheme}
+          className="flex items-center space-x-3 px-4 py-3 w-full rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer"
+        >
+          {getThemeIcon()}
+          <span>{getThemeLabel()}</span>
+        </button>
+        <button
+          onClick={handleLogout}
+          className="flex items-center space-x-3 px-4 py-3 w-full rounded-lg text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors cursor-pointer"
+        >
+          <Icon
+            icon="heroicons:arrow-right-end-on-rectangle"
+            className="w-5 h-5"
+          />
+          <span>Logout</span>
+        </button>
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      {/* Desktop Sidebar - Always visible on lg+, sticky position */}
+      <div className="hidden lg:block sticky top-0 h-screen overflow-y-auto">
+        {sidebarContent}
+      </div>
+
+      {/* Mobile Sidebar - Overlay */}
+      {isOpen && (
+        <div className="lg:hidden fixed inset-0 z-50">
+          {/* Backdrop */}
+          <div
+            className="fixed inset-0 bg-black/50 transition-opacity"
+            onClick={onClose}
+          />
+          {/* Sidebar */}
+          <div className="fixed inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out">
+            {sidebarContent}
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Sidebar;
@@ -0,0 +1,100 @@
+import { createContext, useContext, useEffect, useState, FC, ReactNode } from 'react';
+
+type Theme = 'light' | 'dark' | 'system';
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  resolvedTheme: 'light' | 'dark';
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+const STORAGE_KEY = 'hackathon-theme';
+
+function getSystemTheme(): 'light' | 'dark' {
+  if (typeof window !== 'undefined') {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  return 'light';
+}
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  defaultTheme?: Theme;
+}
+
+export const ThemeProvider: FC<ThemeProviderProps> = ({ children, defaultTheme = 'system' }) => {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem(STORAGE_KEY) as Theme | null;
+      return stored || defaultTheme;
+    }
+    return defaultTheme;
+  });
+
+  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>(() => {
+    if (theme === 'system') {
+      return getSystemTheme();
+    }
+    return theme;
+  });
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme);
+    localStorage.setItem(STORAGE_KEY, newTheme);
+  };
+
+  useEffect(() => {
+    const root = document.documentElement;
+
+    // Calculate the resolved theme
+    const resolved = theme === 'system' ? getSystemTheme() : theme;
+    setResolvedTheme(resolved);
+
+    // Apply dark class to root
+    if (resolved === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+  }, [theme]);
+
+  // Listen for system theme changes
+  useEffect(() => {
+    if (theme !== 'system') return;
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      const newTheme = e.matches ? 'dark' : 'light';
+      setResolvedTheme(newTheme);
+
+      const root = document.documentElement;
+      if (newTheme === 'dark') {
+        root.classList.add('dark');
+      } else {
+        root.classList.remove('dark');
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
+
+export default ThemeProvider;
@@ -0,0 +1,93 @@
+import { FC } from 'react';
+import { useTheme } from './theme-provider';
+
+interface ThemeToggleProps {
+  className?: string;
+}
+
+// Sun icon for light mode
+const SunIcon = () => (
+  <svg
+    className="w-5 h-5"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+    />
+  </svg>
+);
+
+// Moon icon for dark mode
+const MoonIcon = () => (
+  <svg
+    className="w-5 h-5"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+    />
+  </svg>
+);
+
+// System icon (monitor)
+const SystemIcon = () => (
+  <svg
+    className="w-5 h-5"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+    />
+  </svg>
+);
+
+export const ThemeToggle: FC<ThemeToggleProps> = ({ className = '' }) => {
+  const { theme, setTheme, resolvedTheme } = useTheme();
+
+  const cycleTheme = () => {
+    if (theme === 'light') setTheme('dark');
+    else if (theme === 'dark') setTheme('system');
+    else setTheme('light');
+  };
+
+  const getThemeLabel = () => {
+    if (theme === 'system') return 'System';
+    return theme === 'dark' ? 'Dark' : 'Light';
+  };
+
+  const renderIcon = () => {
+    if (theme === 'system') {
+      return <SystemIcon />;
+    }
+    return resolvedTheme === 'dark' ? <MoonIcon /> : <SunIcon />;
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={cycleTheme}
+      className={`p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer text-gray-600 dark:text-neutral-200 ${className}`}
+      title={`Theme: ${getThemeLabel()}`}
+      aria-label={`Current theme: ${getThemeLabel()}. Click to change.`}
+    >
+      {renderIcon()}
+    </button>
+  );
+};
+
+export default ThemeToggle;
@@ -0,0 +1,518 @@
+const INDONESIAN_CITIES: string[] = [
+  'Aceh Selatan',
+  'Aceh Tenggara',
+  'Aceh Timur',
+  'Aceh Tengah',
+  'Aceh Barat',
+  'Aceh Besar',
+  'Pidie',
+  'Aceh Utara',
+  'Simeulue',
+  'Aceh Singkil',
+  'Bireuen',
+  'Aceh Barat Daya',
+  'Gayo Lues',
+  'Aceh Jaya',
+  'Nagan Raya',
+  'Aceh Tamiang',
+  'Bener Meriah',
+  'Pidie Jaya',
+  'Kota Banda Aceh',
+  'Kota Sabang',
+  'Kota Lhokseumawe',
+  'Kota Langsa',
+  'Kota Subulussalam',
+  'Tapanuli Tengah',
+  'Tapanuli Utara',
+  'Tapanuli Selatan',
+  'Nias',
+  'Langkat',
+  'Karo',
+  'Deli Serdang',
+  'Simalungun',
+  'Asahan',
+  'Labuhanbatu',
+  'Dairi',
+  'Toba',
+  'Mandailing Natal',
+  'Nias Selatan',
+  'Pakpak Bharat',
+  'Humbang Hasundutan',
+  'Samosir',
+  'Serdang Bedagai',
+  'Batu Bara',
+  'Padang Lawas Utara',
+  'Padang Lawas',
+  'Labuhanbatu Selatan',
+  'Labuhanbatu Utara',
+  'Nias Utara',
+  'Nias Barat',
+  'Kota Medan',
+  'Kota Pematangsiantar',
+  'Kota Sibolga',
+  'Kota Tanjung Balai',
+  'Kota Binjai',
+  'Kota Tebing Tinggi',
+  'Kota Padangsidimpuan',
+  'Kota Gunungsitoli',
+  'Pesisir Selatan',
+  'Solok',
+  'Sijunjung',
+  'Tanah Datar',
+  'Padang Pariaman',
+  'Agam',
+  'Lima Puluh Kota',
+  'Pasaman',
+  'Kepulauan Mentawai',
+  'Dharmasraya',
+  'Solok Selatan',
+  'Pasaman Barat',
+  'Kota Padang',
+  'Kota Solok',
+  'Kota Sawahlunto',
+  'Kota Padang Panjang',
+  'Kota Bukittinggi',
+  'Kota Payakumbuh',
+  'Kota Pariaman',
+  'Kampar',
+  'Indragiri Hulu',
+  'Bengkalis',
+  'Indragiri Hilir',
+  'Pelalawan',
+  'Rokan Hulu',
+  'Rokan Hilir',
+  'Siak',
+  'Kuantan Singingi',
+  'Kepulauan Meranti',
+  'Kota Pekanbaru',
+  'Kota Dumai',
+  'Kerinci',
+  'Merangin',
+  'Sarolangun',
+  'Batanghari',
+  'Muaro Jambi',
+  'Tanjung Jabung Barat',
+  'Tanjung Jabung Timur',
+  'Bungo',
+  'Tebo',
+  'Kota Jambi',
+  'Kota Sungai Penuh',
+  'Ogan Komering Ulu',
+  'Ogan Komering Ilir',
+  'Muara Enim',
+  'Lahat',
+  'Musi Rawas',
+  'Musi Banyuasin',
+  'Banyuasin',
+  'Ogan Komering Ulu Timur',
+  'Ogan Komering Ulu Selatan',
+  'Ogan Ilir',
+  'Empat Lawang',
+  'Penukal Abab Lematang Ilir',
+  'Musi Rawas Utara',
+  'Kota Palembang',
+  'Kota Pagar Alam',
+  'Kota Lubuk Linggau',
+  'Kota Prabumulih',
+  'Bengkulu Selatan',
+  'Rejang Lebong',
+  'Bengkulu Utara',
+  'Kaur',
+  'Seluma',
+  'Muko Muko',
+  'Lebong',
+  'Kepahiang',
+  'Bengkulu Tengah',
+  'Kota Bengkulu',
+  'Lampung Selatan',
+  'Lampung Tengah',
+  'Lampung Utara',
+  'Lampung Barat',
+  'Tulang Bawang',
+  'Tanggamus',
+  'Lampung Timur',
+  'Way Kanan',
+  'Pesawaran',
+  'Pringsewu',
+  'Mesuji',
+  'Tulang Bawang Barat',
+  'Pesisir Barat',
+  'Kota Bandar Lampung',
+  'Kota Metro',
+  'Bangka',
+  'Belitung',
+  'Bangka Selatan',
+  'Bangka Tengah',
+  'Bangka Barat',
+  'Belitung Timur',
+  'Kota Pangkal Pinang',
+  'Bintan',
+  'Karimun',
+  'Natuna',
+  'Lingga',
+  'Kepulauan Anambas',
+  'Kota Batam',
+  'Kota Tanjung Pinang',
+  'Kepulauan Seribu',
+  'Kota Jakarta Pusat',
+  'Kota Jakarta Utara',
+  'Kota Jakarta Barat',
+  'Kota Jakarta Selatan',
+  'Kota Jakarta Timur',
+  'Bogor',
+  'Sukabumi',
+  'Cianjur',
+  'Bandung',
+  'Garut',
+  'Tasikmalaya',
+  'Ciamis',
+  'Kuningan',
+  'Cirebon',
+  'Majalengka',
+  'Sumedang',
+  'Indramayu',
+  'Subang',
+  'Purwakarta',
+  'Karawang',
+  'Bekasi',
+  'Bandung Barat',
+  'Pangandaran',
+  'Kota Bogor',
+  'Kota Sukabumi',
+  'Kota Bandung',
+  'Kota Cirebon',
+  'Kota Bekasi',
+  'Kota Depok',
+  'Kota Cimahi',
+  'Kota Tasikmalaya',
+  'Kota Banjar',
+  'Cilacap',
+  'Banyumas',
+  'Purbalingga',
+  'Banjarnegara',
+  'Kebumen',
+  'Purworejo',
+  'Wonosobo',
+  'Magelang',
+  'Boyolali',
+  'Klaten',
+  'Sukoharjo',
+  'Wonogiri',
+  'Karanganyar',
+  'Sragen',
+  'Grobogan',
+  'Blora',
+  'Rembang',
+  'Pati',
+  'Kudus',
+  'Jepara',
+  'Demak',
+  'Semarang',
+  'Temanggung',
+  'Kendal',
+  'Batang',
+  'Pekalongan',
+  'Pemalang',
+  'Tegal',
+  'Brebes',
+  'Kota Magelang',
+  'Kota Surakarta',
+  'Kota Salatiga',
+  'Kota Semarang',
+  'Kota Pekalongan',
+  'Kota Tegal',
+  'Kulon Progo',
+  'Bantul',
+  'Gunungkidul',
+  'Sleman',
+  'Kota Yogyakarta',
+  'Pacitan',
+  'Ponorogo',
+  'Trenggalek',
+  'Tulungagung',
+  'Blitar',
+  'Kediri',
+  'Malang',
+  'Lumajang',
+  'Jember',
+  'Banyuwangi',
+  'Bondowoso',
+  'Situbondo',
+  'Probolinggo',
+  'Pasuruan',
+  'Sidoarjo',
+  'Mojokerto',
+  'Jombang',
+  'Nganjuk',
+  'Madiun',
+  'Magetan',
+  'Ngawi',
+  'Bojonegoro',
+  'Tuban',
+  'Lamongan',
+  'Gresik',
+  'Bangkalan',
+  'Sampang',
+  'Pamekasan',
+  'Sumenep',
+  'Kota Kediri',
+  'Kota Blitar',
+  'Kota Malang',
+  'Kota Probolinggo',
+  'Kota Pasuruan',
+  'Kota Mojokerto',
+  'Kota Madiun',
+  'Kota Surabaya',
+  'Kota Batu',
+  'Pandeglang',
+  'Lebak',
+  'Tangerang',
+  'Serang',
+  'Kota Tangerang',
+  'Kota Cilegon',
+  'Kota Serang',
+  'Kota Tangerang Selatan',
+  'Jembrana',
+  'Tabanan',
+  'Badung',
+  'Gianyar',
+  'Klungkung',
+  'Bangli',
+  'Karangasem',
+  'Buleleng',
+  'Kota Denpasar',
+  'Lombok Barat',
+  'Lombok Tengah',
+  'Lombok Timur',
+  'Sumbawa',
+  'Dompu',
+  'Bima',
+  'Sumbawa Barat',
+  'Lombok Utara',
+  'Kota Mataram',
+  'Kota Bima',
+  'Kupang',
+  'Timor Tengah Selatan',
+  'Timor Tengah Utara',
+  'Belu',
+  'Alor',
+  'Flores Timur',
+  'Sikka',
+  'Ende',
+  'Ngada',
+  'Manggarai',
+  'Sumba Timur',
+  'Sumba Barat',
+  'Lembata',
+  'Rote Ndao',
+  'Manggarai Barat',
+  'Nagekeo',
+  'Sumba Tengah',
+  'Sumba Barat Daya',
+  'Manggarai Timur',
+  'Sabu Raijua',
+  'Malaka',
+  'Kota Kupang',
+  'Sambas',
+  'Mempawah',
+  'Sanggau',
+  'Ketapang',
+  'Sintang',
+  'Kapuas Hulu',
+  'Bengkayang',
+  'Landak',
+  'Sekadau',
+  'Melawi',
+  'Kayong Utara',
+  'Kubu Raya',
+  'Kota Pontianak',
+  'Kota Singkawang',
+  'Kotawaringin Barat',
+  'Kotawaringin Timur',
+  'Kapuas',
+  'Barito Selatan',
+  'Barito Utara',
+  'Katingan',
+  'Seruyan',
+  'Sukamara',
+  'Lamandau',
+  'Gunung Mas',
+  'Pulang Pisau',
+  'Murung Raya',
+  'Barito Timur',
+  'Kota Palangkaraya',
+  'Tanah Laut',
+  'Kotabaru',
+  'Banjar',
+  'Barito Kuala',
+  'Tapin',
+  'Hulu Sungai Selatan',
+  'Hulu Sungai Tengah',
+  'Hulu Sungai Utara',
+  'Tabalong',
+  'Tanah Bumbu',
+  'Balangan',
+  'Kota Banjarmasin',
+  'Kota Banjarbaru',
+  'Paser',
+  'Kutai Kartanegara',
+  'Berau',
+  'Kutai Barat',
+  'Kutai Timur',
+  'Penajam Paser Utara',
+  'Mahakam Ulu',
+  'Kota Balikpapan',
+  'Kota Samarinda',
+  'Kota Bontang',
+  'Bulungan',
+  'Malinau',
+  'Nunukan',
+  'Tana Tidung',
+  'Kota Tarakan',
+  'Bolaang Mongondow',
+  'Minahasa',
+  'Kepulauan Sangihe',
+  'Kepulauan Talaud',
+  'Minahasa Selatan',
+  'Minahasa Utara',
+  'Minahasa Tenggara',
+  'Bolaang Mongondow Utara',
+  'Kepulauan Siau Tagulandang Biaro (Sitaro)',
+  'Bolaang Mongondow Timur',
+  'Bolaang Mongondow Selatan',
+  'Kota Manado',
+  'Kota Bitung',
+  'Kota Tomohon',
+  'Kota Kotamobagu',
+  'Banggai',
+  'Poso',
+  'Donggala',
+  'Toli Toli',
+  'Buol',
+  'Morowali',
+  'Banggai Kepulauan',
+  'Parigi Moutong',
+  'Tojo Una Una',
+  'Sigi',
+  'Banggai Laut',
+  'Morowali Utara',
+  'Kota Palu',
+  'Kepulauan Selayar',
+  'Bulukumba',
+  'Bantaeng',
+  'Jeneponto',
+  'Takalar',
+  'Gowa',
+  'Sinjai',
+  'Bone',
+  'Maros',
+  'Pangkajene Kepulauan',
+  'Barru',
+  'Soppeng',
+  'Wajo',
+  'Sidenreng Rappang',
+  'Pinrang',
+  'Enrekang',
+  'Luwu',
+  'Tana Toraja',
+  'Luwu Utara',
+  'Luwu Timur',
+  'Toraja Utara',
+  'Kota Makassar',
+  'Kota Pare Pare',
+  'Kota Palopo',
+  'Kolaka',
+  'Konawe',
+  'Muna',
+  'Buton',
+  'Konawe Selatan',
+  'Bombana',
+  'Wakatobi',
+  'Kolaka Utara',
+  'Konawe Utara',
+  'Buton Utara',
+  'Kolaka Timur',
+  'Konawe Kepulauan',
+  'Muna Barat',
+  'Buton Tengah',
+  'Buton Selatan',
+  'Kota Kendari',
+  'Kota Bau Bau',
+  'Gorontalo',
+  'Boalemo',
+  'Bone Bolango',
+  'Pahuwato',
+  'Gorontalo Utara',
+  'Kota Gorontalo',
+  'Pasangkayu (Mamuju Utara)',
+  'Mamuju',
+  'Mamasa',
+  'Polewali Mandar',
+  'Majene',
+  'Mamuju Tengah',
+  'Maluku Tengah',
+  'Maluku Tenggara',
+  'Kepulauan Tanimbar (Maluku Tenggara Barat)',
+  'Buru',
+  'Seram Bagian Timur',
+  'Seram Bagian Barat',
+  'Kepulauan Aru',
+  'Maluku Barat Daya',
+  'Buru Selatan',
+  'Kota Ambon',
+  'Kota Tual',
+  'Halmahera Barat',
+  'Halmahera Tengah',
+  'Halmahera Utara',
+  'Halmahera Selatan',
+  'Kepulauan Sula',
+  'Halmahera Timur',
+  'Pulau Morotai',
+  'Pulau Taliabu',
+  'Kota Ternate',
+  'Kota Tidore Kepulauan',
+  'Jayapura',
+  'Kepulauan Yapen',
+  'Biak Numfor',
+  'Sarmi',
+  'Keerom',
+  'Waropen',
+  'Supiori',
+  'Mamberamo Raya',
+  'Kota Jayapura',
+  'Manokwari',
+  'Fak Fak',
+  'Teluk Bintuni',
+  'Teluk Wondama',
+  'Kaimana',
+  'Manokwari Selatan',
+  'Pegunungan Arfak',
+  'Merauke',
+  'Boven Digoel',
+  'Mappi',
+  'Asmat',
+  'Nabire',
+  'Puncak Jaya',
+  'Paniai',
+  'Mimika',
+  'Puncak',
+  'Dogiyai',
+  'Intan Jaya',
+  'Deiyai',
+  'Jayawijaya',
+  'Pegunungan Bintang',
+  'Yahukimo',
+  'Tolikara',
+  'Mamberamo Tengah',
+  'Yalimo',
+  'Lanny Jaya',
+  'Nduga',
+  'Sorong',
+  'Sorong Selatan',
+  'Raja Ampat',
+  'Tambrauw',
+  'Maybrat',
+  'Kota Sorong',
+];
+
+export default INDONESIAN_CITIES;
@@ -2,6 +2,9 @@
@import 'tailwindcss';
@source "../../../libs/ui/**/*.{ts,tsx}";

+/* Enable class-based dark mode (using .dark class on html element) */
+@custom-variant dark (&:where(.dark, .dark *));
+
@theme {
  --color-primary-50: #f0f8ff;
  --color-primary-100: #e1f0fd;
@@ -20,12 +23,12 @@
  --color-neutral-200: #d1d1d1;
  --color-neutral-300: #b0b0b0;
  --color-neutral-400: #888888;
-  --color-neutral-500: #6d6d6d;
-  --color-neutral-600: #5d5d5d;
-  --color-neutral-700: #4f4f4f;
-  --color-neutral-800: #454545;
-  --color-neutral-900: #3d3d3d;
-  --color-neutral-950: #2b2b2b;
+  --color-neutral-500: #6e6a86;
+  --color-neutral-600: #56526e;
+  --color-neutral-700: #44415a;
+  --color-neutral-800: #393552;
+  --color-neutral-900: #2a273f;
+  --color-neutral-950: #232136;

  --color-success-100: #e0fbd8;
  --color-success-200: #bcf8b0;
@@ -108,6 +111,14 @@
    border-color: var(--color-neutral-200, currentColor);
  }

+  .dark *,
+  .dark ::after,
+  .dark ::before,
+  .dark ::backdrop,
+  .dark ::file-selector-button {
+    border-color: var(--color-neutral-700, currentColor);
+  }
+
  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
@@ -118,19 +129,41 @@
    background: var(--color-neutral-50);
  }

+  .dark ::-webkit-scrollbar-track {
+    background: var(--color-neutral-900);
+  }
+
  ::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 3px;
  }

+  .dark ::-webkit-scrollbar-thumb {
+    background: var(--color-neutral-600);
+  }
+
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-neutral-300);
  }

+  .dark ::-webkit-scrollbar-thumb:hover {
+    background: var(--color-neutral-500);
+  }
+
  html {
    font-family: 'Bai Jamjuree', sans-serif;
    font-weight: 400;
-    font-size: 12px;
+    font-size: 16px;
    line-height: 1.2;
  }
+
+  /* Dark mode base styles */
+  .dark {
+    color-scheme: dark;
+  }
+
+  .dark body {
+    background-color: var(--color-neutral-950);
+    color: var(--color-neutral-100);
+  }
 }
@@ -9,6 +9,7 @@ import {
  QueryProvider,
 } from '@imphnen-frontend-service/utils';
 import { Toaster } from 'sonner';
+import { ThemeProvider } from './components/theme-provider';
 import './index.css';

 const files = import.meta.glob('./app/**/*(page|layout).tsx');
@@ -36,11 +37,13 @@ if (!rootElement) throw new Error('Failed to find the root element');

 createRoot(rootElement).render(
  <StrictMode>
-    <QueryProvider>
-      <ModalLoginProvider>
-        <Toaster position="top-right" />
-        <RouterProvider router={router} />
-      </ModalLoginProvider>
-    </QueryProvider>
+    <ThemeProvider defaultTheme="system">
+      <QueryProvider>
+        <ModalLoginProvider>
+          <Toaster position="top-right" richColors />
+          <RouterProvider router={router} />
+        </ModalLoginProvider>
+      </QueryProvider>
+    </ThemeProvider>
  </StrictMode>
 );
@@ -37,8 +37,6 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  const pathname = url.pathname;

-  console.log('[Middleware] Checking route:', pathname);
-
  // Get session from Supabase (authoritative source)
  const { data: { session: supabaseSession }, error: sessionError } = await supabase.auth.getSession();

@@ -86,10 +84,8 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
      let hasLocation = false;

      if (cached && (now - cached.timestamp) < CACHE_DURATION) {
-        console.log('[Middleware] Using cached onboarding status');
        hasLocation = cached.hasLocation;
      } else {
-        console.log('[Middleware] Fetching fresh onboarding status');
        const { data: userData, error: userError } = await supabase
          .from('users')
          .select('location')
@@ -1 +1 @@
-Tue, Nov 25, 2025 11:09:55 AM
+Tue, Nov 25, 2025  4:21:27 PM
@@ -7,6 +7,7 @@ FROM node:22-alpine AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
+ENV NX_DAEMON=false
 RUN npm run backoffice:build

 FROM nginx:alpine AS runner
@@ -7,6 +7,7 @@ FROM node:22-alpine AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
+ENV NX_DAEMON=false
 RUN npm run dimentorin:build

 FROM nginx:alpine AS runner
@@ -7,6 +7,7 @@ FROM node:22-alpine AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
+ENV NX_DAEMON=false
 RUN npm run gacha:build

 FROM nginx:alpine AS runner
@@ -16,6 +16,7 @@ ARG VITE_SUPABASE_ANON_KEY
 ENV VITE_SUPABASE_URL=$VITE_SUPABASE_URL
 ENV VITE_SUPABASE_ANON_KEY=$VITE_SUPABASE_ANON_KEY

+ENV NX_DAEMON=false
 RUN npm run hackathon:build

 FROM nginx:alpine AS runner
@@ -4,6 +4,7 @@ WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm ci --prefer-offline --no-audit --no-fund
 COPY  . .
+ENV NX_DAEMON=false
 RUN npm run landing:build

 FROM node:22-alpine AS runner
@@ -0,0 +1,522 @@
+export const INDONESIAN_CITIES: string[] = [
+  'Aceh Selatan',
+  'Aceh Tenggara',
+  'Aceh Timur',
+  'Aceh Tengah',
+  'Aceh Barat',
+  'Aceh Besar',
+  'Pidie',
+  'Aceh Utara',
+  'Simeulue',
+  'Aceh Singkil',
+  'Bireuen',
+  'Aceh Barat Daya',
+  'Gayo Lues',
+  'Aceh Jaya',
+  'Nagan Raya',
+  'Aceh Tamiang',
+  'Bener Meriah',
+  'Pidie Jaya',
+  'Kota Banda Aceh',
+  'Kota Sabang',
+  'Kota Lhokseumawe',
+  'Kota Langsa',
+  'Kota Subulussalam',
+  'Tapanuli Tengah',
+  'Tapanuli Utara',
+  'Tapanuli Selatan',
+  'Nias',
+  'Langkat',
+  'Karo',
+  'Deli Serdang',
+  'Simalungun',
+  'Asahan',
+  'Labuhanbatu',
+  'Dairi',
+  'Toba',
+  'Mandailing Natal',
+  'Nias Selatan',
+  'Pakpak Bharat',
+  'Humbang Hasundutan',
+  'Samosir',
+  'Serdang Bedagai',
+  'Batu Bara',
+  'Padang Lawas Utara',
+  'Padang Lawas',
+  'Labuhanbatu Selatan',
+  'Labuhanbatu Utara',
+  'Nias Utara',
+  'Nias Barat',
+  'Kota Medan',
+  'Kota Pematangsiantar',
+  'Kota Sibolga',
+  'Kota Tanjung Balai',
+  'Kota Binjai',
+  'Kota Tebing Tinggi',
+  'Kota Padangsidimpuan',
+  'Kota Gunungsitoli',
+  'Pesisir Selatan',
+  'Solok',
+  'Sijunjung',
+  'Tanah Datar',
+  'Padang Pariaman',
+  'Agam',
+  'Lima Puluh Kota',
+  'Pasaman',
+  'Kepulauan Mentawai',
+  'Dharmasraya',
+  'Solok Selatan',
+  'Pasaman Barat',
+  'Kota Padang',
+  'Kota Solok',
+  'Kota Sawahlunto',
+  'Kota Padang Panjang',
+  'Kota Bukittinggi',
+  'Kota Payakumbuh',
+  'Kota Pariaman',
+  'Kampar',
+  'Indragiri Hulu',
+  'Bengkalis',
+  'Indragiri Hilir',
+  'Pelalawan',
+  'Rokan Hulu',
+  'Rokan Hilir',
+  'Siak',
+  'Kuantan Singingi',
+  'Kepulauan Meranti',
+  'Kota Pekanbaru',
+  'Kota Dumai',
+  'Kerinci',
+  'Merangin',
+  'Sarolangun',
+  'Batanghari',
+  'Muaro Jambi',
+  'Tanjung Jabung Barat',
+  'Tanjung Jabung Timur',
+  'Bungo',
+  'Tebo',
+  'Kota Jambi',
+  'Kota Sungai Penuh',
+  'Ogan Komering Ulu',
+  'Ogan Komering Ilir',
+  'Muara Enim',
+  'Lahat',
+  'Musi Rawas',
+  'Musi Banyuasin',
+  'Banyuasin',
+  'Ogan Komering Ulu Timur',
+  'Ogan Komering Ulu Selatan',
+  'Ogan Ilir',
+  'Empat Lawang',
+  'Penukal Abab Lematang Ilir',
+  'Musi Rawas Utara',
+  'Kota Palembang',
+  'Kota Pagar Alam',
+  'Kota Lubuk Linggau',
+  'Kota Prabumulih',
+  'Bengkulu Selatan',
+  'Rejang Lebong',
+  'Bengkulu Utara',
+  'Kaur',
+  'Seluma',
+  'Muko Muko',
+  'Lebong',
+  'Kepahiang',
+  'Bengkulu Tengah',
+  'Kota Bengkulu',
+  'Lampung Selatan',
+  'Lampung Tengah',
+  'Lampung Utara',
+  'Lampung Barat',
+  'Tulang Bawang',
+  'Tanggamus',
+  'Lampung Timur',
+  'Way Kanan',
+  'Pesawaran',
+  'Pringsewu',
+  'Mesuji',
+  'Tulang Bawang Barat',
+  'Pesisir Barat',
+  'Kota Bandar Lampung',
+  'Kota Metro',
+  'Bangka',
+  'Belitung',
+  'Bangka Selatan',
+  'Bangka Tengah',
+  'Bangka Barat',
+  'Belitung Timur',
+  'Kota Pangkal Pinang',
+  'Bintan',
+  'Karimun',
+  'Natuna',
+  'Lingga',
+  'Kepulauan Anambas',
+  'Kota Batam',
+  'Kota Tanjung Pinang',
+  'Kepulauan Seribu',
+  'Kota Jakarta Pusat',
+  'Kota Jakarta Utara',
+  'Kota Jakarta Barat',
+  'Kota Jakarta Selatan',
+  'Kota Jakarta Timur',
+  'Bogor',
+  'Sukabumi',
+  'Cianjur',
+  'Bandung',
+  'Garut',
+  'Tasikmalaya',
+  'Ciamis',
+  'Kuningan',
+  'Cirebon',
+  'Majalengka',
+  'Sumedang',
+  'Indramayu',
+  'Subang',
+  'Purwakarta',
+  'Karawang',
+  'Bekasi',
+  'Bandung Barat',
+  'Pangandaran',
+  'Kota Bogor',
+  'Kota Sukabumi',
+  'Kota Bandung',
+  'Kota Cirebon',
+  'Kota Bekasi',
+  'Kota Depok',
+  'Kota Cimahi',
+  'Kota Tasikmalaya',
+  'Kota Banjar',
+  'Cilacap',
+  'Banyumas',
+  'Purbalingga',
+  'Banjarnegara',
+  'Kebumen',
+  'Purworejo',
+  'Wonosobo',
+  'Magelang',
+  'Boyolali',
+  'Klaten',
+  'Sukoharjo',
+  'Wonogiri',
+  'Karanganyar',
+  'Sragen',
+  'Grobogan',
+  'Blora',
+  'Rembang',
+  'Pati',
+  'Kudus',
+  'Jepara',
+  'Demak',
+  'Semarang',
+  'Temanggung',
+  'Kendal',
+  'Batang',
+  'Pekalongan',
+  'Pemalang',
+  'Tegal',
+  'Brebes',
+  'Kota Magelang',
+  'Kota Surakarta',
+  'Kota Salatiga',
+  'Kota Semarang',
+  'Kota Pekalongan',
+  'Kota Tegal',
+  'Kulon Progo',
+  'Bantul',
+  'Gunungkidul',
+  'Sleman',
+  'Kota Yogyakarta',
+  'Pacitan',
+  'Ponorogo',
+  'Trenggalek',
+  'Tulungagung',
+  'Blitar',
+  'Kediri',
+  'Malang',
+  'Lumajang',
+  'Jember',
+  'Banyuwangi',
+  'Bondowoso',
+  'Situbondo',
+  'Probolinggo',
+  'Pasuruan',
+  'Sidoarjo',
+  'Mojokerto',
+  'Jombang',
+  'Nganjuk',
+  'Madiun',
+  'Magetan',
+  'Ngawi',
+  'Bojonegoro',
+  'Tuban',
+  'Lamongan',
+  'Gresik',
+  'Bangkalan',
+  'Sampang',
+  'Pamekasan',
+  'Sumenep',
+  'Kota Kediri',
+  'Kota Blitar',
+  'Kota Malang',
+  'Kota Probolinggo',
+  'Kota Pasuruan',
+  'Kota Mojokerto',
+  'Kota Madiun',
+  'Kota Surabaya',
+  'Kota Batu',
+  'Pandeglang',
+  'Lebak',
+  'Tangerang',
+  'Serang',
+  'Kota Tangerang',
+  'Kota Cilegon',
+  'Kota Serang',
+  'Kota Tangerang Selatan',
+  'Jembrana',
+  'Tabanan',
+  'Badung',
+  'Gianyar',
+  'Klungkung',
+  'Bangli',
+  'Karangasem',
+  'Buleleng',
+  'Kota Denpasar',
+  'Lombok Barat',
+  'Lombok Tengah',
+  'Lombok Timur',
+  'Sumbawa',
+  'Dompu',
+  'Bima',
+  'Sumbawa Barat',
+  'Lombok Utara',
+  'Kota Mataram',
+  'Kota Bima',
+  'Kupang',
+  'Timor Tengah Selatan',
+  'Timor Tengah Utara',
+  'Belu',
+  'Alor',
+  'Flores Timur',
+  'Sikka',
+  'Ende',
+  'Ngada',
+  'Manggarai',
+  'Sumba Timur',
+  'Sumba Barat',
+  'Lembata',
+  'Rote Ndao',
+  'Manggarai Barat',
+  'Nagekeo',
+  'Sumba Tengah',
+  'Sumba Barat Daya',
+  'Manggarai Timur',
+  'Sabu Raijua',
+  'Malaka',
+  'Kota Kupang',
+  'Sambas',
+  'Mempawah',
+  'Sanggau',
+  'Ketapang',
+  'Sintang',
+  'Kapuas Hulu',
+  'Bengkayang',
+  'Landak',
+  'Sekadau',
+  'Melawi',
+  'Kayong Utara',
+  'Kubu Raya',
+  'Kota Pontianak',
+  'Kota Singkawang',
+  'Kotawaringin Barat',
+  'Kotawaringin Timur',
+  'Kapuas',
+  'Barito Selatan',
+  'Barito Utara',
+  'Katingan',
+  'Seruyan',
+  'Sukamara',
+  'Lamandau',
+  'Gunung Mas',
+  'Pulang Pisau',
+  'Murung Raya',
+  'Barito Timur',
+  'Kota Palangkaraya',
+  'Tanah Laut',
+  'Kotabaru',
+  'Banjar',
+  'Barito Kuala',
+  'Tapin',
+  'Hulu Sungai Selatan',
+  'Hulu Sungai Tengah',
+  'Hulu Sungai Utara',
+  'Tabalong',
+  'Tanah Bumbu',
+  'Balangan',
+  'Kota Banjarmasin',
+  'Kota Banjarbaru',
+  'Paser',
+  'Kutai Kartanegara',
+  'Berau',
+  'Kutai Barat',
+  'Kutai Timur',
+  'Penajam Paser Utara',
+  'Mahakam Ulu',
+  'Kota Balikpapan',
+  'Kota Samarinda',
+  'Kota Bontang',
+  'Bulungan',
+  'Malinau',
+  'Nunukan',
+  'Tana Tidung',
+  'Kota Tarakan',
+  'Bolaang Mongondow',
+  'Minahasa',
+  'Kepulauan Sangihe',
+  'Kepulauan Talaud',
+  'Minahasa Selatan',
+  'Minahasa Utara',
+  'Minahasa Tenggara',
+  'Bolaang Mongondow Utara',
+  'Kepulauan Siau Tagulandang Biaro (Sitaro)',
+  'Bolaang Mongondow Timur',
+  'Bolaang Mongondow Selatan',
+  'Kota Manado',
+  'Kota Bitung',
+  'Kota Tomohon',
+  'Kota Kotamobagu',
+  'Banggai',
+  'Poso',
+  'Donggala',
+  'Toli Toli',
+  'Buol',
+  'Morowali',
+  'Banggai Kepulauan',
+  'Parigi Moutong',
+  'Tojo Una Una',
+  'Sigi',
+  'Banggai Laut',
+  'Morowali Utara',
+  'Kota Palu',
+  'Kepulauan Selayar',
+  'Bulukumba',
+  'Bantaeng',
+  'Jeneponto',
+  'Takalar',
+  'Gowa',
+  'Sinjai',
+  'Bone',
+  'Maros',
+  'Pangkajene Kepulauan',
+  'Barru',
+  'Soppeng',
+  'Wajo',
+  'Sidenreng Rappang',
+  'Pinrang',
+  'Enrekang',
+  'Luwu',
+  'Tana Toraja',
+  'Luwu Utara',
+  'Luwu Timur',
+  'Toraja Utara',
+  'Kota Makassar',
+  'Kota Pare Pare',
+  'Kota Palopo',
+  'Kolaka',
+  'Konawe',
+  'Muna',
+  'Buton',
+  'Konawe Selatan',
+  'Bombana',
+  'Wakatobi',
+  'Kolaka Utara',
+  'Konawe Utara',
+  'Buton Utara',
+  'Kolaka Timur',
+  'Konawe Kepulauan',
+  'Muna Barat',
+  'Buton Tengah',
+  'Buton Selatan',
+  'Kota Kendari',
+  'Kota Bau Bau',
+  'Gorontalo',
+  'Boalemo',
+  'Bone Bolango',
+  'Pahuwato',
+  'Gorontalo Utara',
+  'Kota Gorontalo',
+  'Pasangkayu (Mamuju Utara)',
+  'Mamuju',
+  'Mamasa',
+  'Polewali Mandar',
+  'Majene',
+  'Mamuju Tengah',
+  'Maluku Tengah',
+  'Maluku Tenggara',
+  'Kepulauan Tanimbar (Maluku Tenggara Barat)',
+  'Buru',
+  'Seram Bagian Timur',
+  'Seram Bagian Barat',
+  'Kepulauan Aru',
+  'Maluku Barat Daya',
+  'Buru Selatan',
+  'Kota Ambon',
+  'Kota Tual',
+  'Halmahera Barat',
+  'Halmahera Tengah',
+  'Halmahera Utara',
+  'Halmahera Selatan',
+  'Kepulauan Sula',
+  'Halmahera Timur',
+  'Pulau Morotai',
+  'Pulau Taliabu',
+  'Kota Ternate',
+  'Kota Tidore Kepulauan',
+  'Jayapura',
+  'Kepulauan Yapen',
+  'Biak Numfor',
+  'Sarmi',
+  'Keerom',
+  'Waropen',
+  'Supiori',
+  'Mamberamo Raya',
+  'Kota Jayapura',
+  'Manokwari',
+  'Fak Fak',
+  'Teluk Bintuni',
+  'Teluk Wondama',
+  'Kaimana',
+  'Manokwari Selatan',
+  'Pegunungan Arfak',
+  'Merauke',
+  'Boven Digoel',
+  'Mappi',
+  'Asmat',
+  'Nabire',
+  'Puncak Jaya',
+  'Paniai',
+  'Mimika',
+  'Puncak',
+  'Dogiyai',
+  'Intan Jaya',
+  'Deiyai',
+  'Jayawijaya',
+  'Pegunungan Bintang',
+  'Yahukimo',
+  'Tolikara',
+  'Mamberamo Tengah',
+  'Yalimo',
+  'Lanny Jaya',
+  'Nduga',
+  'Sorong',
+  'Sorong Selatan',
+  'Raja Ampat',
+  'Tambrauw',
+  'Maybrat',
+  'Kota Sorong',
+];
+
+export const INDONESIAN_CITIES_SET = new Set(INDONESIAN_CITIES);
+
+export function isValidIndonesianCity(city: string): boolean {
+  return INDONESIAN_CITIES_SET.has(city);
+}
@@ -37,7 +37,10 @@ export const useTeams = (params?: {
    queryFn: async () => {
      try {
        // Supabase client now has auth context from setSession()
-        let query = supabase.from('teams').select('*');
+        let query = supabase.from('teams').select(`
+          *,
+          members:team_members(id)
+        `);

        // Filter by visibility
        if (params?.visibility) {
@@ -309,9 +312,48 @@ export const useManageMember = (teamId: string) => {

 export const useRemoveMember = (teamId: string) => {
  const queryClient = useQueryClient();
+  const { session } = useAuthStore();

  return useMutation({
-    mutationFn: (userId: string) => teamsApi.removeMember(teamId, userId),
+    mutationFn: async (userId: string) => {
+      if (!session?.user?.id) {
+        throw new Error('You must be logged in to remove a member');
+      }
+
+      // Verify the current user is the team leader
+      const { data: team, error: teamError } = await supabase
+        .from('teams')
+        .select('leader_id')
+        .eq('id', teamId)
+        .single();
+
+      if (teamError || !team) {
+        throw new Error('Team not found');
+      }
+
+      if (team.leader_id !== session.user.id) {
+        throw new Error('Only the team leader can remove members');
+      }
+
+      // Cannot remove the leader
+      if (userId === team.leader_id) {
+        throw new Error('Cannot remove the team leader');
+      }
+
+      // Delete the team member record
+      const { error: deleteError } = await supabase
+        .from('team_members')
+        .delete()
+        .eq('team_id', teamId)
+        .eq('user_id', userId);
+
+      if (deleteError) {
+        console.error('Failed to remove member:', deleteError);
+        throw new Error(deleteError.message || 'Failed to remove member');
+      }
+
+      return { success: true };
+    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: teamKeys.members(teamId) });
      queryClient.invalidateQueries({ queryKey: teamKeys.detail(teamId) });
@@ -372,6 +414,7 @@ export const useTeamJoinRequests = (teamId: string, enabled = true) => {
          user:users(id, email, fullname, avatar)
        `)
        .eq('team_id', teamId)
+        .eq('status', 'pending')
        .order('created_at', { ascending: false });

      if (error) {
@@ -438,7 +481,17 @@ export const useRespondToJoinRequest = (teamId: string) => {
            .update({ status: 'pending' })
            .eq('id', requestId);

-          throw new Error('Failed to add member to team: ' + memberError.message);
+          // Parse Supabase error for user-friendly message
+          let errorMsg = memberError.message;
+          if (errorMsg.includes('Team already has 5 members') || errorMsg.includes('Team cannot have more than 5 members')) {
+            errorMsg = 'Team is full! Maximum 5 members allowed.';
+          } else if (errorMsg.includes('already in a team') || errorMsg.includes('User is already in a team')) {
+            errorMsg = 'This user is already in another team.';
+          } else if (errorMsg.includes('Bulk insert')) {
+            errorMsg = 'Invalid operation detected.';
+          }
+
+          throw new Error(errorMsg);
        }

        return { success: true, action: 'accepted' };
@@ -690,3 +743,46 @@ export const useLeaveTeam = () => {
    },
  });
 };
+
+// Get Teams by User ID
+export const useTeamsByUserId = (userId: string) => {
+  return useQuery({
+    queryKey: ['teams-by-user', userId],
+    queryFn: async () => {
+      if (!userId) {
+        return { data: [] };
+      }
+
+      // Query team_members to find teams where user is a member
+      const { data: memberships, error: membershipsError } = await supabase
+        .from('team_members')
+        .select(`
+          team_id,
+          team:teams(
+            id,
+            name,
+            logo,
+            banner,
+            description,
+            city,
+            visibility,
+            leader_id,
+            created_at
+          )
+        `)
+        .eq('user_id', userId)
+        .eq('status', 'active');
+
+      if (membershipsError) {
+        console.error('Failed to fetch user teams:', membershipsError);
+        return { data: [] };
+      }
+
+      // Extract teams from memberships
+      const teams = memberships?.map((m: any) => m.team).filter(Boolean) || [];
+
+      return { data: teams };
+    },
+    enabled: !!userId,
+  });
+};
@@ -92,3 +92,23 @@ export const useUpdateUserById = () => {
    },
  });
 };
+
+export const useUserDetailsById = (userId: string) => {
+  return useQuery({
+    queryKey: ['user-supabase', userId],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from('users')
+        .select('*')
+        .eq('id', userId)
+        .single();
+
+      if (error) {
+        throw new Error(error.message || 'Failed to fetch user');
+      }
+
+      return { data };
+    },
+    enabled: !!userId,
+  });
+};
@@ -73,9 +73,18 @@ export const userOnboardingSchema = z.object({
  skills: z.array(z.string()).optional(),
 });

+export const userEditProfileSchema = z.object({
+  fullname: z.string().min(3, 'Nama lengkap minimal 3 karakter'),
+  avatar: z.string().url('Avatar harus berupa URL yang valid').nullable().optional(),
+  location: z.string().optional(),
+  bio: z.string().max(500, 'Bio maksimal 500 karakter').optional(),
+  skills: z.array(z.string()).optional(),
+});
+
 export type TTeamCreateForm = z.infer<typeof teamCreateSchema>;
 export type TTeamUpdateForm = z.infer<typeof teamUpdateSchema>;
 export type TInviteMemberForm = z.infer<typeof inviteMemberSchema>;
 export type TJoinTeamForm = z.infer<typeof joinTeamSchema>;
 export type TProjectSubmissionForm = z.infer<typeof projectSubmissionSchema>;
 export type TUserOnboardingForm = z.infer<typeof userOnboardingSchema>;
+export type TUserEditProfileForm = z.infer<typeof userEditProfileSchema>;
@@ -26,12 +26,13 @@ type TButtonProps = DetailedHTMLProps<
 const variantClasses: Record<TButtonVariant, string> = {
  primary: 'bg-primary-500 hover:bg-primary-600 text-white shadow-md',
  secondary:
-    'bg-white hover:text-primary-600 hover:bg-gray-50 text-primary-500 shadow-md',
-  text: 'bg-transparent hover:text-primary-600 hover:bg-gray-50 text-primary-500',
+    'bg-white dark:bg-gray-800 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-gray-50 dark:hover:bg-gray-700 text-primary-500 dark:text-primary-400 shadow-md dark:shadow-gray-900/50 border dark:border-gray-700',
+  text: 'bg-transparent hover:text-primary-600 dark:hover:text-primary-400 hover:bg-gray-50 dark:hover:bg-gray-800 text-primary-500 dark:text-primary-400',
  bordered:
-    'border border-primary-500 hover:border-primary-600 bg-transparent hover:text-primary-600 hover:bg-gray-50 text-primary-500',
+    'border border-primary-500 dark:border-primary-400 hover:border-primary-600 dark:hover:border-primary-300 bg-transparent hover:text-primary-600 dark:hover:text-primary-300 hover:bg-gray-50 dark:hover:bg-gray-800 text-primary-500 dark:text-primary-400',
  success: 'bg-success-500 hover:bg-success-600 text-white shadow-md',
-  danger: 'bg-danger-100 hover:bg-danger-200 text-danger-500 shadow-md',
+  danger:
+    'bg-danger-100 dark:bg-danger-500/20 hover:bg-danger-200 dark:hover:bg-danger-500/30 text-danger-500 shadow-md dark:shadow-gray-900/50',
 };

 const sizeClasses: Record<TButtonSize, string> = {
@@ -32,9 +32,9 @@ type TInputProps = Omit<

 const sizeClasses: Record<TInputSize, { textSize: string; iconSize: string }> =
  {
-    sm: { textSize: 'text-[10px] max-h-[28px]', iconSize: 'text-[10px]' },
-    md: { textSize: 'text-[12px] max-h-[30px]', iconSize: 'text-[12px]' },
-    lg: { textSize: 'text-[15px] max-h-[34px]', iconSize: 'text-[15px]' },
+    sm: { textSize: 'text-[10px] h-[28px]', iconSize: 'text-[10px]' },
+    md: { textSize: 'text-[12px] h-[30px]', iconSize: 'text-[12px]' },
+    lg: { textSize: 'text-[15px] h-[34px]', iconSize: 'text-[15px]' },
  };

 const disabledClass = 'opacity-50 hover:border-neutral-200 cursor-not-allowed';
@@ -56,7 +56,7 @@ export const Input: FC<TInputProps> = ({
  };

  const mergedClassName = cn(
-    `px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree w-full ${
+    `px-[12px] py-[8px] text-neutral-800 dark:text-white bg-white dark:bg-gray-800 placeholder:text-neutral-300 dark:placeholder:text-neutral-500 border border-neutral-200 dark:border-neutral-600 hover:border-blue-300 dark:hover:border-blue-500 focus:outline-1 focus:outline-blue-500 dark:focus:outline-primary-500 rounded-md font-bai-jamjuree w-full ${
      widthform === 'standard' ? 'min-w-70' : ''
    }`,
    sizeClasses[size].textSize,
@@ -38,7 +38,7 @@ export const Textarea: FC<TTextareaProps> = ({
  ...rest
 }): ReactElement => {
  const mergedClassName = cn(
-    'rounded-md border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 px-[12px] py-[8px] invalid:border-danger-500 invalid:text-danger-500',
+    'rounded-md border border-neutral-200 dark:border-neutral-600 hover:border-blue-300 dark:hover:border-blue-500 focus:outline-1 focus:outline-blue-500 dark:focus:outline-primary-500 px-[12px] py-[8px] bg-white dark:bg-gray-800 text-neutral-800 dark:text-white placeholder:text-neutral-300 dark:placeholder:text-neutral-500 invalid:border-danger-500 invalid:text-danger-500',
    sizeClasses[size],
    disabled && disabledClass,
    error && errorClass,
@@ -20,19 +20,20 @@ export type TInputFieldProps = Omit<
  disabled?: boolean;
  helperText?: string;
  htmlFor?: string;
+  isRequired?: boolean;
 };

 const sizeClasses: Record<TInputSize, { label: string; helperText: string }> = {
  lg: {
-    label: 'text-p3 font-medium',
+    label: 'text-label1 font-medium',
    helperText: 'text-label3 font-normal',
  },
  md: {
-    label: 'text-label1 font-medium',
+    label: 'text-label2 font-medium',
    helperText: 'text-label2 font-normal',
  },
  sm: {
-    label: 'text-label2 font-medium',
+    label: 'text-label3 font-medium',
    helperText: 'text-label2 font-normal',
  },
 };
@@ -47,6 +48,7 @@ export const InputField: FC<TInputFieldProps> = ({
  htmlFor,
  className,
  disabled,
+  isRequired = false,
  ...rest
 }): ReactElement => {
  return (
@@ -54,11 +56,11 @@ export const InputField: FC<TInputFieldProps> = ({
      <label
        htmlFor={htmlFor}
        className={cn(
-          'items-start justify-item-start text-start !text-neutral-800',
+          'items-start justify-item-start text-start text-neutral-800! dark:text-neutral-300!',
          sizeClasses[size].label
        )}
      >
-        {label}
+        {label} {isRequired ? <span className="text-red-500">*</span> : null}
      </label>
      <Input
        {...(htmlFor && { id: htmlFor })}
@@ -75,7 +77,7 @@ export const InputField: FC<TInputFieldProps> = ({
        {...rest}
      />
      {error ? (
-        <p className="text-danger-500 text-label1 text-left">{error}</p>
+        <p className="text-danger-500 text-label2 text-left">{error}</p>
      ) : (
        helperText && (
          <p
@@ -39,6 +39,8 @@ export const ControlledInputField = <T extends FieldValues>(
      error={fieldState.error?.message}
      {...inputProps}
      onChange={handleChange}
+      isRequired={props.isRequired}
+      size={props.size}
    />
  );
 };
@@ -1,18 +1,10 @@
 import { lazy, LazyExoticComponent, ReactNode } from 'react';
 import { ActionFunction, LoaderFunction, RouteObject } from 'react-router';

-type TPermissionItem = {
-  id: string;
-  name: string;
-  created_at: string;
-  updated_at: string;
-};
-
 interface PageModuleExports {
  default: () => ReactNode;
  loader?: LoaderFunction;
  action?: ActionFunction;
-  permissions?: Array<string>;
 }

 interface LoadingModuleExports {
@@ -58,18 +50,8 @@ export function convertPagesToRoute(
        return 'loader' in result ? result.loader?.(args) : null;
      },
      async guard() {
-        const result = (await importer()) as PageModuleExports;
-        const localStoragePermission = localStorage.getItem('permissions');
-        const permissions: TPermissionItem[] | undefined =
-          localStoragePermission
-            ? JSON.parse(localStoragePermission)
-            : undefined;
-        return 'permissions' in result
-          ? result.permissions?.every(
-              (permission) =>
-                permissions?.some((item) => permission === item.name) || false
-            ) || false
-          : true;
+        // Permission checking removed - always allow access
+        return true;
      },
    });
    routes = mergeRoutes(routes, route);
@@ -1,27 +1,11 @@
-import { FC, PropsWithChildren, ReactNode, useMemo } from 'react';
-import { useSession } from '../../hooks/use-session';
+import { FC, PropsWithChildren, ReactNode } from 'react';

 type TProps = PropsWithChildren<{
-  permissions: Array<string>;
+  permissions?: Array<string>;
  fallback?: ReactNode;
 }>;

 export const Guard: FC<TProps> = (props): ReactNode => {
-  const { session } = useSession();
-
-  const permissionKeys = useMemo(() => {
-    return session?.user?.role?.permissions.map((perm) => perm.name) ?? [];
-  }, [session?.user?.role]);
-
-  const allowed = useMemo(() => {
-    return props.permissions.every((permission) =>
-      permissionKeys.includes(permission)
-    );
-  }, [permissionKeys, props.permissions]);
-
-  if (allowed) {
-    return props.children;
-  }
-
-  return props.fallback ?? null;
+  // Permission checking removed - always allow access
+  return props.children;
 };
@@ -4491,9 +4491,9 @@
      }
    },
    "node_modules/@next/env": {
-      "version": "16.0.3",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.0.3.tgz",
-      "integrity": "sha512-IqgtY5Vwsm14mm/nmQaRMmywCU+yyMIYfk3/MHZ2ZTJvwVbBn3usZnjMi1GacrMVzVcAxJShTCpZlPs26EdEjQ==",
+      "version": "16.0.4",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.0.4.tgz",
+      "integrity": "sha512-FDPaVoB1kYhtOz6Le0Jn2QV7RZJ3Ngxzqri7YX4yu3Ini+l5lciR7nA9eNDpKTmDm7LWZtxSju+/CQnwRBn2pA==",
      "license": "MIT"
    },
    "node_modules/@next/eslint-plugin-next": {
@@ -4507,9 +4507,9 @@
      }
    },
    "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.0.3.tgz",
-      "integrity": "sha512-MOnbd92+OByu0p6QBAzq1ahVWzF6nyfiH07dQDez4/Nku7G249NjxDVyEfVhz8WkLiOEU+KFVnqtgcsfP2nLXg==",
+      "version": "16.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.0.4.tgz",
+      "integrity": "sha512-TN0cfB4HT2YyEio9fLwZY33J+s+vMIgC84gQCOLZOYusW7ptgjIn8RwxQt0BUpoo9XRRVVWEHLld0uhyux1ZcA==",
      "cpu": [
        "arm64"
      ],
@@ -4523,9 +4523,9 @@
      }
    },
    "node_modules/@next/swc-darwin-x64": {
-      "version": "16.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.0.3.tgz",
-      "integrity": "sha512-i70C4O1VmbTivYdRlk+5lj9xRc2BlK3oUikt3yJeHT1unL4LsNtN7UiOhVanFdc7vDAgZn1tV/9mQwMkWOJvHg==",
+      "version": "16.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.0.4.tgz",
+      "integrity": "sha512-XsfI23jvimCaA7e+9f3yMCoVjrny2D11G6H8NCcgv+Ina/TQhKPXB9P4q0WjTuEoyZmcNvPdrZ+XtTh3uPfH7Q==",
      "cpu": [
        "x64"
      ],
@@ -4539,9 +4539,9 @@
      }
    },
    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.0.3.tgz",
-      "integrity": "sha512-O88gCZ95sScwD00mn/AtalyCoykhhlokxH/wi1huFK+rmiP5LAYVs/i2ruk7xST6SuXN4NI5y4Xf5vepb2jf6A==",
+      "version": "16.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.0.4.tgz",
+      "integrity": "sha512-uo8X7qHDy4YdJUhaoJDMAbL8VT5Ed3lijip2DdBHIB4tfKAvB1XBih6INH2L4qIi4jA0Qq1J0ErxcOocBmUSwg==",
      "cpu": [
        "arm64"
      ],
@@ -4555,9 +4555,9 @@
      }
    },
    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.0.3.tgz",
-      "integrity": "sha512-CEErFt78S/zYXzFIiv18iQCbRbLgBluS8z1TNDQoyPi8/Jr5qhR3e8XHAIxVxPBjDbEMITprqELVc5KTfFj0gg==",
+      "version": "16.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.0.4.tgz",
+      "integrity": "sha512-pvR/AjNIAxsIz0PCNcZYpH+WmNIKNLcL4XYEfo+ArDi7GsxKWFO5BvVBLXbhti8Coyv3DE983NsitzUsGH5yTw==",
      "cpu": [
        "arm64"
      ],
@@ -4571,9 +4571,9 @@
      }
    },
    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.0.3.tgz",
-      "integrity": "sha512-Tc3i+nwt6mQ+Dwzcri/WNDj56iWdycGVh5YwwklleClzPzz7UpfaMw1ci7bLl6GRYMXhWDBfe707EXNjKtiswQ==",
+      "version": "16.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.0.4.tgz",
+      "integrity": "sha512-2hebpsd5MRRtgqmT7Jj/Wze+wG+ZEXUK2KFFL4IlZ0amEEFADo4ywsifJNeFTQGsamH3/aXkKWymDvgEi+pc2Q==",
      "cpu": [
        "x64"
      ],
@@ -4587,9 +4587,9 @@
      }
    },
    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.0.3.tgz",
-      "integrity": "sha512-zTh03Z/5PBBPdTurgEtr6nY0vI9KR9Ifp/jZCcHlODzwVOEKcKRBtQIGrkc7izFgOMuXDEJBmirwpGqdM/ZixA==",
+      "version": "16.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.0.4.tgz",
+      "integrity": "sha512-pzRXf0LZZ8zMljH78j8SeLncg9ifIOp3ugAFka+Bq8qMzw6hPXOc7wydY7ardIELlczzzreahyTpwsim/WL3Sg==",
      "cpu": [
        "x64"
      ],
@@ -4603,9 +4603,9 @@
      }
    },
    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.0.3.tgz",
-      "integrity": "sha512-Jc1EHxtZovcJcg5zU43X3tuqzl/sS+CmLgjRP28ZT4vk869Ncm2NoF8qSTaL99gh6uOzgM99Shct06pSO6kA6g==",
+      "version": "16.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.0.4.tgz",
+      "integrity": "sha512-7G/yJVzum52B5HOqqbQYX9bJHkN+c4YyZ2AIvEssMHQlbAWOn3iIJjD4sM6ihWsBxuljiTKJovEYlD1K8lCUHw==",
      "cpu": [
        "arm64"
      ],
@@ -4619,9 +4619,9 @@
      }
    },
    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.0.3.tgz",
-      "integrity": "sha512-N7EJ6zbxgIYpI/sWNzpVKRMbfEGgsWuOIvzkML7wxAAZhPk1Msxuo/JDu1PKjWGrAoOLaZcIX5s+/pF5LIbBBg==",
+      "version": "16.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.0.4.tgz",
+      "integrity": "sha512-0Vy4g8SSeVkuU89g2OFHqGKM4rxsQtihGfenjx2tRckPrge5+gtFnRWGAAwvGXr0ty3twQvcnYjEyOrLHJ4JWA==",
      "cpu": [
        "x64"
      ],
@@ -9178,9 +9178,9 @@
      "license": "MIT"
    },
    "node_modules/@types/react": {
-      "version": "19.2.6",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.6.tgz",
-      "integrity": "sha512-p/jUvulfgU7oKtj6Xpk8cA2Y1xKTtICGpJYeJXz2YVO2UcvjQgeRMLDGfDeqeRW2Ta+0QNFwcc8X3GH8SxZz6w==",
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
+      "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
      "devOptional": true,
      "license": "MIT",
      "dependencies": {
@@ -9314,17 +9314,17 @@
      "license": "MIT"
    },
    "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.47.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.47.0.tgz",
-      "integrity": "sha512-fe0rz9WJQ5t2iaLfdbDc9T80GJy0AeO453q8C3YCilnGozvOyCG5t+EZtg7j7D88+c3FipfP/x+wzGnh1xp8ZA==",
+      "version": "8.48.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.48.0.tgz",
+      "integrity": "sha512-XxXP5tL1txl13YFtrECECQYeZjBZad4fyd3cFV4a19LkAY/bIp9fev3US4S5fDVV2JaYFiKAZ/GRTOLer+mbyQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.47.0",
-        "@typescript-eslint/type-utils": "8.47.0",
-        "@typescript-eslint/utils": "8.47.0",
-        "@typescript-eslint/visitor-keys": "8.47.0",
+        "@typescript-eslint/scope-manager": "8.48.0",
+        "@typescript-eslint/type-utils": "8.48.0",
+        "@typescript-eslint/utils": "8.48.0",
+        "@typescript-eslint/visitor-keys": "8.48.0",
        "graphemer": "^1.4.0",
        "ignore": "^7.0.0",
        "natural-compare": "^1.4.0",
@@ -9338,7 +9338,7 @@
        "url": "https://opencollective.com/typescript-eslint"
      },
      "peerDependencies": {
-        "@typescript-eslint/parser": "^8.47.0",
+        "@typescript-eslint/parser": "^8.48.0",
        "eslint": "^8.57.0 || ^9.0.0",
        "typescript": ">=4.8.4 <6.0.0"
      }
@@ -9354,16 +9354,16 @@
      }
    },
    "node_modules/@typescript-eslint/parser": {
-      "version": "8.47.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.47.0.tgz",
-      "integrity": "sha512-lJi3PfxVmo0AkEY93ecfN+r8SofEqZNGByvHAI3GBLrvt1Cw6H5k1IM02nSzu0RfUafr2EvFSw0wAsZgubNplQ==",
+      "version": "8.48.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.48.0.tgz",
+      "integrity": "sha512-jCzKdm/QK0Kg4V4IK/oMlRZlY+QOcdjv89U2NgKHZk1CYTj82/RVSx1mV/0gqCVMJ/DA+Zf/S4NBWNF8GQ+eqQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@typescript-eslint/scope-manager": "8.47.0",
-        "@typescript-eslint/types": "8.47.0",
-        "@typescript-eslint/typescript-estree": "8.47.0",
-        "@typescript-eslint/visitor-keys": "8.47.0",
+        "@typescript-eslint/scope-manager": "8.48.0",
+        "@typescript-eslint/types": "8.48.0",
+        "@typescript-eslint/typescript-estree": "8.48.0",
+        "@typescript-eslint/visitor-keys": "8.48.0",
        "debug": "^4.3.4"
      },
      "engines": {
@@ -9379,14 +9379,14 @@
      }
    },
    "node_modules/@typescript-eslint/project-service": {
-      "version": "8.47.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.47.0.tgz",
-      "integrity": "sha512-2X4BX8hUeB5JcA1TQJ7GjcgulXQ+5UkNb0DL8gHsHUHdFoiCTJoYLTpib3LtSDPZsRET5ygN4qqIWrHyYIKERA==",
+      "version": "8.48.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.48.0.tgz",
+      "integrity": "sha512-Ne4CTZyRh1BecBf84siv42wv5vQvVmgtk8AuiEffKTUo3DrBaGYZueJSxxBZ8fjk/N3DrgChH4TOdIOwOwiqqw==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.47.0",
-        "@typescript-eslint/types": "^8.47.0",
+        "@typescript-eslint/tsconfig-utils": "^8.48.0",
+        "@typescript-eslint/types": "^8.48.0",
        "debug": "^4.3.4"
      },
      "engines": {
@@ -9401,14 +9401,14 @@
      }
    },
    "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.47.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.47.0.tgz",
-      "integrity": "sha512-a0TTJk4HXMkfpFkL9/WaGTNuv7JWfFTQFJd6zS9dVAjKsojmv9HT55xzbEpnZoY+VUb+YXLMp+ihMLz/UlZfDg==",
+      "version": "8.48.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.48.0.tgz",
+      "integrity": "sha512-uGSSsbrtJrLduti0Q1Q9+BF1/iFKaxGoQwjWOIVNJv0o6omrdyR8ct37m4xIl5Zzpkp69Kkmvom7QFTtue89YQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@typescript-eslint/types": "8.47.0",
-        "@typescript-eslint/visitor-keys": "8.47.0"
+        "@typescript-eslint/types": "8.48.0",
+        "@typescript-eslint/visitor-keys": "8.48.0"
      },
      "engines": {
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -9419,9 +9419,9 @@
      }
    },
    "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.47.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.47.0.tgz",
-      "integrity": "sha512-ybUAvjy4ZCL11uryalkKxuT3w3sXJAuWhOoGS3T/Wu+iUu1tGJmk5ytSY8gbdACNARmcYEB0COksD2j6hfGK2g==",
+      "version": "8.48.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.48.0.tgz",
+      "integrity": "sha512-WNebjBdFdyu10sR1M4OXTt2OkMd5KWIL+LLfeH9KhgP+jzfDV/LI3eXzwJ1s9+Yc0Kzo2fQCdY/OpdusCMmh6w==",
      "dev": true,
      "license": "MIT",
      "engines": {
@@ -9436,15 +9436,15 @@
      }
    },
    "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.47.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.47.0.tgz",
-      "integrity": "sha512-QC9RiCmZ2HmIdCEvhd1aJELBlD93ErziOXXlHEZyuBo3tBiAZieya0HLIxp+DoDWlsQqDawyKuNEhORyku+P8A==",
+      "version": "8.48.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.48.0.tgz",
+      "integrity": "sha512-zbeVaVqeXhhab6QNEKfK96Xyc7UQuoFWERhEnj3mLVnUWrQnv15cJNseUni7f3g557gm0e46LZ6IJ4NJVOgOpw==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@typescript-eslint/types": "8.47.0",
-        "@typescript-eslint/typescript-estree": "8.47.0",
-        "@typescript-eslint/utils": "8.47.0",
+        "@typescript-eslint/types": "8.48.0",
+        "@typescript-eslint/typescript-estree": "8.48.0",
+        "@typescript-eslint/utils": "8.48.0",
        "debug": "^4.3.4",
        "ts-api-utils": "^2.1.0"
      },
@@ -9461,9 +9461,9 @@
      }
    },
    "node_modules/@typescript-eslint/types": {
-      "version": "8.47.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.47.0.tgz",
-      "integrity": "sha512-nHAE6bMKsizhA2uuYZbEbmp5z2UpffNrPEqiKIeN7VsV6UY/roxanWfoRrf6x/k9+Obf+GQdkm0nPU+vnMXo9A==",
+      "version": "8.48.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.48.0.tgz",
+      "integrity": "sha512-cQMcGQQH7kwKoVswD1xdOytxQR60MWKM1di26xSUtxehaDs/32Zpqsu5WJlXTtTTqyAVK8R7hvsUnIXRS+bjvA==",
      "dev": true,
      "license": "MIT",
      "engines": {
@@ -9475,21 +9475,20 @@
      }
    },
    "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.47.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.47.0.tgz",
-      "integrity": "sha512-k6ti9UepJf5NpzCjH31hQNLHQWupTRPhZ+KFF8WtTuTpy7uHPfeg2NM7cP27aCGajoEplxJDFVCEm9TGPYyiVg==",
+      "version": "8.48.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.48.0.tgz",
+      "integrity": "sha512-ljHab1CSO4rGrQIAyizUS6UGHHCiAYhbfcIZ1zVJr5nMryxlXMVWS3duFPSKvSUbFPwkXMFk1k0EMIjub4sRRQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@typescript-eslint/project-service": "8.47.0",
-        "@typescript-eslint/tsconfig-utils": "8.47.0",
-        "@typescript-eslint/types": "8.47.0",
-        "@typescript-eslint/visitor-keys": "8.47.0",
+        "@typescript-eslint/project-service": "8.48.0",
+        "@typescript-eslint/tsconfig-utils": "8.48.0",
+        "@typescript-eslint/types": "8.48.0",
+        "@typescript-eslint/visitor-keys": "8.48.0",
        "debug": "^4.3.4",
-        "fast-glob": "^3.3.2",
-        "is-glob": "^4.0.3",
        "minimatch": "^9.0.4",
        "semver": "^7.6.0",
+        "tinyglobby": "^0.2.15",
        "ts-api-utils": "^2.1.0"
      },
      "engines": {
@@ -9513,36 +9512,6 @@
        "balanced-match": "^1.0.0"
      }
    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/fast-glob": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
-      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
      "version": "9.0.5",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -9573,16 +9542,16 @@
      }
    },
    "node_modules/@typescript-eslint/utils": {
-      "version": "8.47.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.47.0.tgz",
-      "integrity": "sha512-g7XrNf25iL4TJOiPqatNuaChyqt49a/onq5YsJ9+hXeugK+41LVg7AxikMfM02PC6jbNtZLCJj6AUcQXJS/jGQ==",
+      "version": "8.48.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.48.0.tgz",
+      "integrity": "sha512-yTJO1XuGxCsSfIVt1+1UrLHtue8xz16V8apzPYI06W0HbEbEWHxHXgZaAgavIkoh+GeV6hKKd5jm0sS6OYxWXQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.7.0",
-        "@typescript-eslint/scope-manager": "8.47.0",
-        "@typescript-eslint/types": "8.47.0",
-        "@typescript-eslint/typescript-estree": "8.47.0"
+        "@typescript-eslint/scope-manager": "8.48.0",
+        "@typescript-eslint/types": "8.48.0",
+        "@typescript-eslint/typescript-estree": "8.48.0"
      },
      "engines": {
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -9597,13 +9566,13 @@
      }
    },
    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.47.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.47.0.tgz",
-      "integrity": "sha512-SIV3/6eftCy1bNzCQoPmbWsRLujS8t5iDIZ4spZOBHqrM+yfX2ogg8Tt3PDTAVKw3sSCiUgg30uOAvK2r9zGjQ==",
+      "version": "8.48.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.48.0.tgz",
+      "integrity": "sha512-T0XJMaRPOH3+LBbAfzR2jalckP1MSG/L9eUtY0DEzUyVaXJ/t6zN0nR7co5kz0Jko/nkSYCBRkz1djvjajVTTg==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@typescript-eslint/types": "8.47.0",
+        "@typescript-eslint/types": "8.48.0",
        "eslint-visitor-keys": "^4.2.1"
      },
      "engines": {
@@ -10681,28 +10650,28 @@
      }
    },
    "node_modules/@vue/compiler-core": {
-      "version": "3.5.24",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.24.tgz",
-      "integrity": "sha512-eDl5H57AOpNakGNAkFDH+y7kTqrQpJkZFXhWZQGyx/5Wh7B1uQYvcWkvZi11BDhscPgj8N7XV3oRwiPnx1Vrig==",
+      "version": "3.5.25",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.25.tgz",
+      "integrity": "sha512-vay5/oQJdsNHmliWoZfHPoVZZRmnSWhug0BYT34njkYTPqClh3DNWLkZNJBVSjsNMrg0CCrBfoKkjZQPM/QVUw==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@babel/parser": "^7.28.5",
-        "@vue/shared": "3.5.24",
+        "@vue/shared": "3.5.25",
        "entities": "^4.5.0",
        "estree-walker": "^2.0.2",
        "source-map-js": "^1.2.1"
      }
    },
    "node_modules/@vue/compiler-dom": {
-      "version": "3.5.24",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.24.tgz",
-      "integrity": "sha512-1QHGAvs53gXkWdd3ZMGYuvQFXHW4ksKWPG8HP8/2BscrbZ0brw183q2oNWjMrSWImYLHxHrx1ItBQr50I/q2zw==",
+      "version": "3.5.25",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.25.tgz",
+      "integrity": "sha512-4We0OAcMZsKgYoGlMjzYvaoErltdFI2/25wqanuTu+S4gismOTRTBPi4IASOjxWdzIwrYSjnqONfKvuqkXzE2Q==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@vue/compiler-core": "3.5.24",
-        "@vue/shared": "3.5.24"
+        "@vue/compiler-core": "3.5.25",
+        "@vue/shared": "3.5.25"
      }
    },
    "node_modules/@vue/compiler-vue2": {
@@ -10768,9 +10737,9 @@
      }
    },
    "node_modules/@vue/shared": {
-      "version": "3.5.24",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.24.tgz",
-      "integrity": "sha512-9cwHL2EsJBdi8NY22pngYYWzkTDhld6fAD6jlaeloNGciNSJL6bLpbxVgXl96X00Jtc6YWQv96YA/0sxex/k1A==",
+      "version": "3.5.25",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.25.tgz",
+      "integrity": "sha512-AbOPdQQnAnzs58H2FrrDxYj/TJfmeS2jdfEEhgiKINy+bnOANmVizIEgq1r+C5zsbs6l1CCQxtcj71rwNQ4jWg==",
      "dev": true,
      "license": "MIT"
    },
@@ -12710,9 +12679,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001756",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001756.tgz",
-      "integrity": "sha512-4HnCNKbMLkLdhJz3TToeVWHSnfJvPaq6vu/eRP0Ahub/07n484XHhBF5AJoSGHdVrS8tKFauUQz8Bp9P7LVx7A==",
+      "version": "1.0.30001757",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001757.tgz",
+      "integrity": "sha512-r0nnL/I28Zi/yjk1el6ilj27tKcdjLsNqAOZr0yVjWPrSQyHgKI2INaEWw21bAQSv2LXRt1XuCS/GomNpWOxsQ==",
      "funding": [
        {
          "type": "opencollective",
@@ -14597,9 +14566,9 @@
      }
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.5.259",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.259.tgz",
-      "integrity": "sha512-I+oLXgpEJzD6Cwuwt1gYjxsDmu/S/Kd41mmLA3O+/uH2pFRO/DvOjUyGozL8j3KeLV6WyZ7ssPwELMsXCcsJAQ==",
+      "version": "1.5.260",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.260.tgz",
+      "integrity": "sha512-ov8rBoOBhVawpzdre+Cmz4FB+y66Eqrk6Gwqd8NGxuhv99GQ8XqMAr351KEkOt7gukXWDg6gJWEMKgL2RLMPtA==",
      "dev": true,
      "license": "ISC"
    },
@@ -20731,12 +20700,12 @@
      "license": "MIT"
    },
    "node_modules/next": {
-      "version": "16.0.3",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.0.3.tgz",
-      "integrity": "sha512-Ka0/iNBblPFcIubTA1Jjh6gvwqfjrGq1Y2MTI5lbjeLIAfmC+p5bQmojpRZqgHHVu5cG4+qdIiwXiBSm/8lZ3w==",
+      "version": "16.0.4",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.0.4.tgz",
+      "integrity": "sha512-vICcxKusY8qW7QFOzTvnRL1ejz2ClTqDKtm1AcUjm2mPv/lVAdgpGNsftsPRIDJOXOjRQO68i1dM8Lp8GZnqoA==",
      "license": "MIT",
      "dependencies": {
-        "@next/env": "16.0.3",
+        "@next/env": "16.0.4",
        "@swc/helpers": "0.5.15",
        "caniuse-lite": "^1.0.30001579",
        "postcss": "8.4.31",
@@ -20749,14 +20718,14 @@
        "node": ">=20.9.0"
      },
      "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.0.3",
-        "@next/swc-darwin-x64": "16.0.3",
-        "@next/swc-linux-arm64-gnu": "16.0.3",
-        "@next/swc-linux-arm64-musl": "16.0.3",
-        "@next/swc-linux-x64-gnu": "16.0.3",
-        "@next/swc-linux-x64-musl": "16.0.3",
-        "@next/swc-win32-arm64-msvc": "16.0.3",
-        "@next/swc-win32-x64-msvc": "16.0.3",
+        "@next/swc-darwin-arm64": "16.0.4",
+        "@next/swc-darwin-x64": "16.0.4",
+        "@next/swc-linux-arm64-gnu": "16.0.4",
+        "@next/swc-linux-arm64-musl": "16.0.4",
+        "@next/swc-linux-x64-gnu": "16.0.4",
+        "@next/swc-linux-x64-musl": "16.0.4",
+        "@next/swc-win32-arm64-msvc": "16.0.4",
+        "@next/swc-win32-x64-msvc": "16.0.4",
        "sharp": "^0.34.4"
      },
      "peerDependencies": {
Author	SHA1	Message	Date
Hafid Nur	bffa32dd67	add maintenance page	2025-11-27 23:44:56 +07:00
Hafid Nur GitHub Maulana Sodiqin Muhammad Zakir Ramadhan	35c9539c08	feat(hackathon): Change "edit profile" into modal dialog (#65 ) * feat: update landing page * feat: Add favicon and SEO (JSON-LD schema, meta tags) - Add favicon image - Add JSON-LD schema for Hackathon event - Add react-helmet-async for managing meta tags * chore: remove react-helmet-async * chore: update landing page * chore: update UI for signup and login - add back button for better UX * feat: add image loading state and skeleton UI for team dashboard * fix: landing navbar not sticky to top, fix onboarding UI * feat(hackathon): update UI - Update dashboard, onboarding user, edit profile, and team layout to make it more consistent * fix: optimize placeholder banner image & minor fix dark mode * feat(hackathon): update landing page dark mode color scheme * feat(hackathon): update auth page dark mode color scheme * feat(hackathon): dashboard UI improvement and dark mode adjustment * feat(hackathon): browse team page - update dark mode color scheme - add some border style to give outline and depth - change emoji to icon * feat(hackathon): update team page - update dark mode color scheme for team page: view, team edit, and submit project page - fix bug in chat where messages are displayed double - make the form field size consistent * feat(hackathon): update dark mode onboarding and edit profile * feat(hackathon): change "edit profile" to modal dialog - Add "edit profile" modal dialog that can be triggered from dashboard - Update background overlay for dark mode - Update dark mode for auth callback * feat(hackathon): dark mode for user page --------- Co-authored-by: Maulana Sodiqin <sodiqincahyana1@gmail.com> Co-authored-by: Muhammad Zakir Ramadhan <61570975+zakirkun@users.noreply.github.com>	2025-11-27 16:25:21 +07:00
Hafid Nur GitHub Maulana Sodiqin Muhammad Zakir Ramadhan	bc5b072ad8	feat(hackathon): Improve dark mode and UI/UX in Hackathon website (#64 ) * feat: update landing page * feat: Add favicon and SEO (JSON-LD schema, meta tags) - Add favicon image - Add JSON-LD schema for Hackathon event - Add react-helmet-async for managing meta tags * chore: remove react-helmet-async * chore: update landing page * chore: update UI for signup and login - add back button for better UX * feat: add image loading state and skeleton UI for team dashboard * fix: landing navbar not sticky to top, fix onboarding UI * feat(hackathon): update UI - Update dashboard, onboarding user, edit profile, and team layout to make it more consistent * fix: optimize placeholder banner image & minor fix dark mode * feat(hackathon): update landing page dark mode color scheme * feat(hackathon): update auth page dark mode color scheme * feat(hackathon): dashboard UI improvement and dark mode adjustment * feat(hackathon): browse team page - update dark mode color scheme - add some border style to give outline and depth - change emoji to icon * feat(hackathon): update team page - update dark mode color scheme for team page: view, team edit, and submit project page - fix bug in chat where messages are displayed double - make the form field size consistent * feat(hackathon): update dark mode onboarding and edit profile --------- Co-authored-by: Maulana Sodiqin <sodiqincahyana1@gmail.com> Co-authored-by: Muhammad Zakir Ramadhan <61570975+zakirkun@users.noreply.github.com>	2025-11-27 15:12:45 +07:00
Maulana SodiqinandClaude	66b8b064ba	fix(hackathon): truncate long bio text on dashboard - Add line-clamp-3 to limit bio to 3 lines - Add wrap-break-word to handle long strings without spaces 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-26 16:53:46 +07:00
Maulana SodiqinandClaude	63643cc286	fix(hackathon): add missing image loading handlers on team page - Add totalImagesToLoad, handleImageLoad, handleImageError - Disable image loading overlay to prevent blocking UI - Fix ReferenceError: totalImagesToLoad is not defined 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-26 16:50:54 +07:00
Hafid Nur GitHub Maulana Sodiqin Muhammad Zakir Ramadhan	19bd44a7ca	feat(hackathon): Update UI landing page, dashboard, onboarding (#62 ) * feat: update landing page * feat: Add favicon and SEO (JSON-LD schema, meta tags) - Add favicon image - Add JSON-LD schema for Hackathon event - Add react-helmet-async for managing meta tags * chore: remove react-helmet-async * chore: update landing page * chore: update UI for signup and login - add back button for better UX * feat: add image loading state and skeleton UI for team dashboard * fix: landing navbar not sticky to top, fix onboarding UI * feat(hackathon): update UI - Update dashboard, onboarding user, edit profile, and team layout to make it more consistent * fix: optimize placeholder banner image & minor fix dark mode --------- Co-authored-by: Maulana Sodiqin <sodiqincahyana1@gmail.com> Co-authored-by: Muhammad Zakir Ramadhan <61570975+zakirkun@users.noreply.github.com>	2025-11-26 16:41:10 +07:00
Maulana SodiqinandClaude	b3bdf25b5f	fix(hackathon): use searchable CitySelect on edit team page - Replace basic select dropdown with CitySelect component - Consistent with create team and profile pages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-26 16:32:29 +07:00
Maulana SodiqinandClaude	cdd4fd4703	chore(hackathon): remove console.log statements and improve error handling - Remove all console.log statements from middleware, layout, and pages - Replace alert with toast for onboarding error messages - Delete unused page-original.tsx backup file - Keep console.error for actual error debugging 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-26 16:26:00 +07:00
Maulana SodiqinandClaude	7d1b86acdb	fix(ui): add dark mode support to Input, Textarea and profile modal - Add dark mode styling to Input component (bg, text, border, placeholder) - Add dark mode styling to Textarea component - Update profile page with blurred backdrop overlay - Add shadow and proper dark mode to modal container 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-26 16:16:38 +07:00
Maulana SodiqinandClaude	6e6c361eb8	feat(hackathon): enhance dark mode, city select, and auth-aware navbar - Apply rose-pine dark theme across all pages for darker appearance - Update Button component with dark mode variants - Replace basic city select with searchable CitySelect on create team page - Show Dashboard button in navbar when user is authenticated - Apply dark mode styling to onboarding, team pages, and user profile 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-26 16:06:23 +07:00
Maulana SodiqinandClaude	62780c8889	fix(hackathon): fix team leader access denied and member removal - Add loading state check before leader validation to prevent race condition - Fix useRemoveMember hook to use Supabase directly instead of missing API endpoint - Leader check now waits for team data to load before showing Access Denied 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-26 15:36:35 +07:00
Maulana SodiqinandClaude	1839f4cab0	feat(hackathon): add dark mode support with theme toggle - Add ThemeProvider with system/light/dark mode support and localStorage persistence - Add ThemeToggle component for pages without sidebar (landing, login, signup) - Enable class-based dark mode in Tailwind CSS v4 via @custom-variant - Add dark mode classes to landing page, login, signup, and all dashboard pages - Keep IMPHNEN logo blue in dark mode, invert Kolosal logo 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-26 15:25:23 +07:00
Maulana SodiqinandClaude	c9f5b9e4a5	fix(hackathon): hide team chat and actions from non-members - Add isMember check to only show Quick Actions to team members - Hide submission status from non-members - Non-members can only view team info, leader, and member list 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-26 14:27:13 +07:00
Maulana SodiqinandClaude	33365affa2	fix(hackathon): replace top navbar with sidebar on team and user detail pages - Update teams/[teamId]/layout.tsx to use Sidebar component - Update users/[userId]/layout.tsx to use Sidebar component - Now matches dashboard layout with sidebar navigation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-26 14:22:01 +07:00
Maulana SodiqinandClaude	63db7ff6ad	fix(hackathon): match search input height with city select and add debounce - Set consistent h-[42px] height for both search and city filter inputs - Add 300ms debounce to search to reduce API calls while typing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-26 14:19:33 +07:00
Maulana SodiqinandClaude	7f8b53edd4	fix(hackathon): improve city select UX and remove redundant navbar - Replace browse teams city dropdown with searchable CitySelect component - Remove "Back to Dashboard" button from team detail page (uses sidebar nav) - Add cities constant to service library for validation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-26 14:12:45 +07:00
Maulana SodiqinandClaude	eb0628ac3e	fix: filter join requests to only show pending status - Add .eq('status', 'pending') filter to useTeamJoinRequests hook - Add toast notifications for approve/reject actions on members page - Parse Supabase error messages to show user-friendly error text 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-26 11:03:34 +07:00
Ivan RizkyantoandGitHub	cbb880a053	Hackathon: better frontend (#61 ) * feat: enhance team browsing with member count and view team option * feat: add default banner image for teams without a custom banner * feat: implement user profile page and user layout component * feat: improve browse team filtering layout * feat: limit join request button visibility based on team member count * feat: enhance user profile and team dashboard layouts for improved responsiveness * feat: add location, bio, and skills fields to user profile schema and form * feat: enhance team display and user information layout for better readability * feat: update join request button visibility logic based on user team membership * feat: enhance team and user profile layouts with improved text truncation and responsiveness	2025-11-26 10:18:36 +07:00
Maulana SodiqinandClaude	083a912e91	fix: filter join requests to only show pending status Previously approved/rejected requests were still showing in the list. Now only pending requests are displayed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-25 21:58:15 +07:00
Hafid Nur GitHub Maulana Sodiqin	ab744b411d	feat(hackathon): update landing page and auth page UI (#60 ) * feat: update landing page * feat: Add favicon and SEO (JSON-LD schema, meta tags) - Add favicon image - Add JSON-LD schema for Hackathon event - Add react-helmet-async for managing meta tags * chore: remove react-helmet-async * chore: update landing page * chore: update UI for signup and login - add back button for better UX --------- Co-authored-by: Maulana Sodiqin <sodiqincahyana1@gmail.com>	2025-11-25 19:59:08 +07:00
Muhammad Zakir Ramadhan	8947b4d05e	Merge branch 'develop' of https://github.com/IMPHNEN/imphnen-frontend-service into develop	2025-11-25 19:55:10 +07:00
Muhammad Zakir Ramadhan	7e3eaa6584	feat: implement user profile editing and sidebar navigation	2025-11-25 19:55:08 +07:00
Maulana SodiqinandClaude	98a459c7d7	fix: remove permission checker to fix null access error Removed permission checking logic that was causing "Cannot read properties of null (reading 'name')" error. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-25 19:35:15 +07:00
Maulana SodiqinandClaude	9d24a11c05	fix: add builder prune before build to free memory 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-25 17:46:10 +07:00
Maulana SodiqinandClaude	ee60787100	fix: disable NX daemon and fix env vars for faster Docker builds - Add NX_DAEMON=false to all Dockerfiles to prevent slow daemon startup - Add --env-file flag to hackathon build for proper env var substitution 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-25 17:39:43 +07:00
Maulana Sodiqin	301a349776	trigger deploy hackathon	2025-11-25 16:42:47 +07:00
Maulana SodiqinandClaude	81488ceb6b	fix: add build progress output to Docker builds - Added --progress=plain to show live build output - Enabled DOCKER_BUILDKIT=1 for better build performance - Now you can see what's actually happening instead of appearing stuck 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-25 16:40:08 +07:00
Maulana SodiqinandClaude	9e99fd61e7	fix: add concurrency control to prevent simultaneous deployments - Added concurrency group 'deploy-vps' to all deployment workflows - Prevents multiple deployments from running simultaneously on VPS - Deployments now queue and run one at a time - Fixes resource exhaustion when all apps deploy at once 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-25 16:37:08 +07:00
Maulana SodiqinandClaude	d36c693615	chore: trigger deployment for all apps 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-25 16:21:28 +07:00
Maulana SodiqinandClaude	20125a6f4a	fix: increase deployment timeout to 30 minutes for all apps - Added command_timeout: 30m to all SSH deployment workflows - Prevents timeout issues during Docker builds - Applies to landing, hackathon, gacha, dimentorin, and backoffice 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-25 16:20:34 +07:00
Maulana SodiqinandClaude	4bc5006c91	chore: trigger deployment for all apps 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-25 16:07:16 +07:00
Maulana SodiqinandClaude	71769b71aa	fix(hackathon): fix env file location for docker-compose - Changed from apps/hackathon/.env to root .env.local - Docker-compose expects .env.local in root directory - This ensures Supabase env variables are properly loaded during build 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-25 16:03:10 +07:00
Hafid NurandGitHub	a2cf67d210	feat(hackathon): Update landing page UI and meta tag (#59 ) * feat: update landing page * feat: Add favicon and SEO (JSON-LD schema, meta tags) - Add favicon image - Add JSON-LD schema for Hackathon event - Add react-helmet-async for managing meta tags * chore: remove react-helmet-async	2025-11-25 15:47:55 +07:00
Maulana SodiqinandClaude	d9c4217fd3	chore: trigger deployment for all apps 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-25 15:47:20 +07:00
Maulana SodiqinandClaude	719e36e46c	feat(hackathon): add searchable city select component - Created CitySelect component with real-time filtering - Supports 516 Indonesian cities with array filtering - Added search functionality for better UX - Integrated with react-hook-form in user onboarding - Includes clear button and auto-close on outside click 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-25 14:46:35 +07:00
Hafid NurandGitHub	bd052f4866	feat: add Indonesian cities constants (#58 ) * feat: add Indonesian cities constants * chore: use npm, Node 22 LTS, revert package.json	2025-11-25 12:48:39 +07:00