feat(hackathon): dark mode for user page

Merge branch 'develop' into hackathon/fix-ui
feat(hackathon): change "edit profile" to modal dialog
2025-11-27 16:08:39 +07:00 · 2025-11-27 15:51:06 +07:00 · 2025-11-27 15:42:18 +07:00 · 2025-11-27 14:59:22 +07:00 · 2025-11-27 14:53:38 +07:00 · 2025-11-27 13:28:38 +07:00
7 changed files with 546 additions and 468 deletions
@@ -176,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,4 +1,4 @@
-import { FC, ReactElement } from 'react';
+import { FC, ReactElement, useEffect, useState } from 'react';
 import { Link } from 'react-router';
 import {
  useMyTeams,
@@ -9,16 +9,49 @@ import {
 import { toast } from 'sonner';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Icon } from '@iconify/react';
+import ProfilePage from '../profile/page';
+
+type Invitation = {
+  id: string;
+  team: {
+    id?: string;
+    name?: string;
+    logo?: string;
+    banner?: string;
+    description?: string;
+    city?: string;
+    visibility?: string;
+    leader_id?: string;
+  };
+  inviter: {
+    id?: string;
+    fullname?: string;
+    email?: string;
+    avatar?: string;
+  };
+};

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

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

  const handleAcceptInvitation = async (invitationId: string) => {
    try {
@@ -41,225 +74,233 @@ const DashboardPage: FC = (): ReactElement => {
  };

  return (
-    <div className="p-6 md:p-8 md:max-w-7xl w-full mx-auto overflow-hidden">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
-          Welcome, {user?.fullname || user?.email?.split('@')[0] || 'User'}!
-        </h1>
-        {user?.location && (
-          <p className="text-gray-600 dark:text-gray-400 mt-1 font-sans flex items-center space-x-1">
-            <Icon icon="heroicons:map-pin-16-solid" width="24" height="24" />
-            <span>{user.location}</span>
-          </p>
-        )}
-      </div>
-
-      {invitations.length > 0 && (
-        <div className="mb-8 bg-primary-50 dark:bg-blue-900/20 border border-primary-200 dark:border-blue-800 rounded-lg p-6">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
-            Team Invitations ({invitations.length})
-          </h2>
-          <div className="space-y-3 font-sans">
-            {invitations.map((invitation) => (
-              <div
-                key={invitation.id}
-                className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-sm flex items-center justify-between"
-              >
-                <div>
-                  <p className="font-medium text-gray-900 dark:text-white">
-                    {invitation.team.name}
-                  </p>
-                  <p className="text-sm text-gray-600 dark:text-gray-400">
-                    Invited by {invitation.inviter.fullname}
-                  </p>
-                </div>
-                <div className="flex space-x-2">
-                  <Button
-                    size="sm"
-                    onClick={() => handleAcceptInvitation(invitation.id)}
-                  >
-                    Accept
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="secondary"
-                    onClick={() => handleRejectInvitation(invitation.id)}
-                  >
-                    Decline
-                  </Button>
-                </div>
-              </div>
-            ))}
-          </div>
+    <>
+      <div 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>
-      )}

-      {myTeams.length > 0 ? (
-        <div className="mb-6 md:mb-8">
-          <h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
-            My Team
-          </h2>
-          <div className="grid grid-cols-1 gap-4 md:gap-6 w-full md:max-w-lg">
-            {myTeams.map((team) => (
-              <Link
-                key={team.id}
-                to={'/teams/' + team.id}
-                className="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
-              >
-                {team.banner && (
-                  <div className="w-full aspect-3/1">
-                    <img
-                      src={team.banner}
-                      alt={team.name}
-                      className="w-full h-full object-cover"
-                    />
+        {invitations.length > 0 && (
+          <div className="mb-8 bg-primary-50 dark:bg-blue-900/20 border border-primary-200 dark:border-blue-800 rounded-lg p-6">
+            <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
+              Team Invitations ({invitations.length})
+            </h2>
+            <div className="space-y-3 font-sans">
+              {invitations.map((invitation) => (
+                <div
+                  key={invitation.id}
+                  className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-sm flex items-center justify-between"
+                >
+                  <div>
+                    <p className="font-medium text-gray-900 dark:text-white">
+                      {invitation.team?.name ?? 'Unnamed Team'}
+                    </p>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Invited by{' '}
+                      {invitation.inviter?.fullname ?? 'Unknown User'}
+                    </p>
+                  </div>
+                  <div className="flex space-x-2">
+                    <Button
+                      size="sm"
+                      onClick={() => handleAcceptInvitation(invitation.id)}
+                    >
+                      Accept
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="secondary"
+                      onClick={() => handleRejectInvitation(invitation.id)}
+                    >
+                      Decline
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {myTeams.length > 0 ? (
+          <div className="mb-6 md:mb-8">
+            <h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
+              My Team
+            </h2>
+            <div className="grid grid-cols-1 gap-4 md:gap-6 w-full md:max-w-lg">
+              {myTeams.map((team) => (
+                <Link
+                  key={team.id}
+                  to={'/teams/' + team.id}
+                  className="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
+                >
+                  {team.banner && (
+                    <div className="w-full aspect-3/1">
+                      <img
+                        src={team.banner}
+                        alt={team.name}
+                        className="w-full h-full object-cover"
+                      />
+                    </div>
+                  )}
+                  <div className="p-4">
+                    <div className="flex flex-col md:flex-row items-center space-y-3 space-x-3 -mt-14 md:mt-0 mb-2 md:mb-3 min-w-12 min-h-12 ">
+                      {team.logo && (
+                        <img
+                          src={team.logo}
+                          alt={team.name}
+                          className="w-20 h-20 rounded-full object-cover shrink-0 border-black dark:border-gray-700"
+                        />
+                      )}
+                      <div>
+                        <h3 className="text-xl md:text-lg font-bold text-gray-900 dark:text-white leading-tight">
+                          {team.name}
+                        </h3>
+                        <p className="text-sm text-gray-600 dark:text-gray-400 flex items-center">
+                          <Icon
+                            icon="heroicons:map-pin-16-solid"
+                            width="16"
+                            height="16"
+                          />
+                          <span className="ml-1">{team.city}</span>
+                        </p>
+                      </div>
+                    </div>
+                    <p className="text-gray-600 dark:text-gray-400 line-clamp-3 text-ellipsis font-sans">
+                      {team.description}
+                    </p>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          </div>
+        ) : (
+          <div className="mb-6 md:mb-8 bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 md:p-8">
+            <div className="text-center">
+              <div className="text-3xl md:text-4xl mb-2 md:mb-3">👋</div>
+              <h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-1 md:mb-2">
+                You are not in a team yet
+              </h2>
+              <p className="text-sm md:text-base text-gray-600 dark:text-gray-400 font-sans">
+                Use the sidebar to browse teams or create your own
+              </p>
+            </div>
+          </div>
+        )}
+
+        <div className="mt-8 bg-white dark:bg-gray-900 rounded-xl shadow-lg">
+          <div className="bg-linear-to-r from-primary-600 to-primary-500 h-24 rounded-t-xl"></div>
+          <div className="px-4 md:px-8 pb-4 md:pb-8 max-w-7xl">
+            <div className="flex flex-col md:flex-row md:items-start -mt-12 mb-4 md:mb-6">
+              <div className="flex flex-col md:flex-row items-start">
+                {user?.avatar ? (
+                  <img
+                    src={user.avatar}
+                    alt={user.fullname || 'User'}
+                    className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg object-cover"
+                  />
+                ) : (
+                  <div className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                    <span className="text-gray-400 dark:text-gray-500 text-3xl md:text-4xl font-sans">
+                      U
+                    </span>
                  </div>
                )}
-                <div className="p-4">
-                  <div className="flex flex-col md:flex-row items-center space-y-3 space-x-3 -mt-14 md:mt-0 mb-2 md:mb-3 min-w-12 min-h-12 ">
-                    {team.logo && (
-                      <img
-                        src={team.logo}
-                        alt={team.name}
-                        className="w-20 h-20 rounded-full object-cover shrink-0 border-black dark:border-gray-700"
-                      />
-                    )}
-                    <div>
-                      <h3 className="text-xl md:text-lg font-bold text-gray-900 dark:text-white leading-tight">
-                        {team.name}
-                      </h3>
-                      <p className="text-sm text-gray-600 dark:text-gray-400 flex items-center">
-                        <Icon
-                          icon="heroicons:map-pin-16-solid"
-                          width="16"
-                          height="16"
-                        />
-                        <span className="ml-1">{team.city}</span>
-                      </p>
-                    </div>
-                  </div>
-                  <p className="text-gray-600 dark:text-gray-400 line-clamp-3 text-ellipsis font-sans">
-                    {team.description}
-                  </p>
-                </div>
-              </Link>
-            ))}
-          </div>
-        </div>
-      ) : (
-        <div className="mb-6 md:mb-8 bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 md:p-8">
-          <div className="text-center">
-            <div className="text-3xl md:text-4xl mb-2 md:mb-3">👋</div>
-            <h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-1 md:mb-2">
-              You are not in a team yet
-            </h2>
-            <p className="text-sm md:text-base text-gray-600 dark:text-gray-400 font-sans">
-              Use the sidebar to browse teams or create your own
-            </p>
-          </div>
-        </div>
-      )}
+                <div className="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="mt-8 bg-white dark:bg-gray-900 rounded-xl shadow-lg">
-        <div className="bg-linear-to-r from-primary-600 to-primary-500 h-24 rounded-t-xl"></div>
-        <div className="px-4 md:px-8 pb-4 md:pb-8 max-w-7xl">
-          <div className="flex flex-col md:flex-row md:items-start -mt-12 mb-4 md:mb-6">
-            <div className="flex flex-col md:flex-row items-start">
-              {user?.avatar ? (
-                <img
-                  src={user.avatar}
-                  alt={user.fullname || 'User'}
-                  className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg object-cover"
-                />
-              ) : (
-                <div className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
-                  <span className="text-gray-400 dark:text-gray-500 text-3xl md:text-4xl font-sans">
-                    U
-                  </span>
+                  {user?.location ? (
+                    <p className="text-gray-600 dark:text-gray-400 flex items-center mt-1 text-sm md:text-base font-sans">
+                      <Icon
+                        icon="heroicons:map-pin-16-solid"
+                        width="16"
+                        height="16"
+                      />
+                      <span className="ml-1">{user.location}</span>
+                    </p>
+                  ) : (
+                    <Link
+                      to="/onboarding/user"
+                      className="text-primary-500 dark:text-blue-400 hover:text-primary-600 dark:hover:text-blue-300 text-sm md:text-sm mt-1 flex items-center"
+                    >
+                      <span className="font-sans">Complete your profile</span>
+                      <Icon
+                        icon="ic:baseline-chevron-right"
+                        width="24"
+                        height="24"
+                      />
+                    </Link>
+                  )}
+                </div>
+              </div>
+              {user?.location && (
+                <button
+                  type="button"
+                  onClick={() => setShowProfileModal(true)}
+                  className="mt-3 md:mt-14 md:ml-auto inline-flex items-center justify-center px-3 py-1.5 md:px-4 md:py-2 bg-primary-500 text-white rounded-lg text md:text-sm font-medium shadow-sm hover:bg-primary-600 transition-colors w-full md:w-auto cursor-pointer"
+                >
+                  Edit Profile
+                </button>
+              )}
+            </div>
+            <div className="space-y-4 md:space-y-6 w-full max-w-full">
+              {user?.bio && (
+                <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm w-full max-w-full overflow-x-hidden">
+                  <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-2">
+                    About
+                  </h3>
+                  <p className="text-gray-800 dark:text-gray-200 leading-relaxed line-clamp-3 wrap-break-word break-all overflow-hidden w-full max-w-full">
+                    {user.bio}
+                  </p>
                </div>
              )}
-              <div className="md:ml-6 mt-4 md:mt-14">
-                <h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white">
-                  {user?.fullname ||
-                    user?.email?.split('@')[0] ||
-                    'Unnamed User'}
-                </h2>
-
-                {user?.location ? (
-                  <p className="text-gray-600 dark:text-gray-400 flex items-center mt-1 text-sm md:text-base font-sans">
-                    <Icon
-                      icon="heroicons:map-pin-16-solid"
-                      width="16"
-                      height="16"
-                    />
-                    <span className="ml-1">{user.location}</span>
-                  </p>
-                ) : (
-                  <Link
-                    to="/onboarding/user"
-                    className="text-primary-500 dark:text-blue-400 hover:text-primary-600 dark:hover:text-blue-300 text-sm md:text-sm mt-1 flex items-center"
-                  >
-                    <span className="font-sans">Complete your profile</span>
-                    <Icon
-                      icon="ic:baseline-chevron-right"
-                      width="24"
-                      height="24"
-                    />
-                  </Link>
-                )}
-              </div>
-            </div>
-            {user?.location && (
-              <Link
-                to="/profile"
-                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"
-              >
-                Edit Profile
-              </Link>
-            )}
-          </div>
-          <div className="space-y-4 md:space-y-6 w-full max-w-full">
-            {user?.bio && (
-              <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm w-full max-w-full overflow-x-hidden">
-                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-2">
-                  About
-                </h3>
-                <p className="text-gray-800 dark:text-gray-200 leading-relaxed line-clamp-3 wrap-break-word break-all overflow-hidden w-full max-w-full">
-                  {user.bio}
-                </p>
-              </div>
-            )}
-            <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
-              <h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
-                Contact
-              </h3>
-              <div className="flex items-center text-gray-700 dark:text-gray-300">
-                <span className="text-gray-900 dark:text-white">
-                  {user?.email}
-                </span>
-              </div>
-            </div>
-            {user?.skills && user.skills.length > 0 && (
              <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
                <h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
-                  Skills
+                  Contact
                </h3>
-                <div className="flex flex-wrap gap-2">
-                  {user.skills.map((skill: string) => (
-                    <span
-                      key={skill}
-                      className="inline-flex items-center px-4 py-2 border border-primary-600 dark:border-gray-500 text-primary-600 dark:text-white rounded-4xl text-xs font-medium dark:bg-gray-600"
-                    >
-                      {skill}
-                    </span>
-                  ))}
+                <div className="flex items-center text-gray-700 dark:text-gray-300">
+                  <span className="text-gray-900 dark:text-white">
+                    {user?.email}
+                  </span>
                </div>
              </div>
-            )}
+              {user?.skills && user.skills.length > 0 && (
+                <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
+                  <h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
+                    Skills
+                  </h3>
+                  <div className="flex flex-wrap gap-2">
+                    {user.skills.map((skill: string) => (
+                      <span
+                        key={skill}
+                        className="inline-flex items-center px-4 py-2 border border-primary-600 dark:border-gray-500 text-primary-600 dark:text-white rounded-4xl text-xs font-medium dark:bg-gray-600"
+                      >
+                        {skill}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
          </div>
        </div>
      </div>
-    </div>
+      <ProfilePage
+        open={showProfileModal}
+        onClose={() => setShowProfileModal(false)}
+      />
+    </>
  );
 };

@@ -187,12 +187,12 @@ export default function HomePage() {
              </button>
            ) : (
              <>
-                <a
-                  href="#masuk"
-                  className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white"
+                <button
+                  onClick={() => navigate('/auth/login')}
+                  className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white cursor-pointer"
                >
                  Masuk
-                </a>
+                </button>
                <button
                  onClick={() => navigate('/auth/login')}
                  className="px-4 py-2 bg-primary-500 text-white text-base rounded-lg hover:bg-primary-600 transition-colors text-center cursor-pointer"
@@ -1,7 +1,6 @@
 import { FC, ReactElement, useState, useEffect } from 'react';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate, Link } from 'react-router';
 import { useForm, Controller } from 'react-hook-form';
 import {
  userEditProfileSchema,
@@ -26,8 +25,15 @@ const ROLE_OPTIONS = [
  'Mobile Developer',
 ];

-const ProfilePage: FC = (): ReactElement => {
-  const navigate = useNavigate();
+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>('');

@@ -123,8 +129,8 @@ const ProfilePage: FC = (): ReactElement => {
      // Wait a bit for the onSuccess handler to update localStorage
      await new Promise((resolve) => setTimeout(resolve, 100));

-      // Navigate back to dashboard
-      navigate('/dashboard');
+      // Close modal
+      onClose();
    } catch (error) {
      console.error('Profile update failed:', error);
      toast.error(
@@ -137,65 +143,23 @@ const ProfilePage: FC = (): ReactElement => {

  const isLoading = isUpdating || isUploading;

-  return (
-    <div className=" bg-black/30 dark:bg-black/50 backdrop-blur-sm flex flex-col justify-center items-center px-4 py-8 z-50 overflow-y-auto">
-      <div className="bg-white dark:bg-gray-900 w-full max-w-md 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>
-            <Link
-              to="/dashboard"
-              className="text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-200"
-            >
-              <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>
-            </Link>
-          </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-32 h-32 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-32 h-32 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"
+  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-5 h-5"
+                  className="w-6 h-6"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
@@ -204,176 +168,222 @@ const ProfilePage: FC = (): ReactElement => {
                    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"
+                    d="M6 18L18 6M6 6l12 12"
                  />
                </svg>
-                <input
-                  id="avatar"
-                  type="file"
-                  accept="image/*"
-                  className="hidden"
-                  onChange={handleAvatarChange}
-                  disabled={isLoading}
-                />
-              </label>
+              </button>
            </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 className="text-gray-600 font-sans dark:text-neutral-400">
+              Update your photo and name
            </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"
+          <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"
                  />
-                  {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={() => navigate('/dashboard')}
-              disabled={isLoading}
-            >
-              Cancel
-            </Button>
-            <Button
-              type="submit"
-              className="flex-1"
-              disabled={isLoading || !form.formState.isValid}
-            >
-              {isLoading ? (
-                <span className="flex items-center justify-center">
+                ) : (
+                  <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="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+                    className="w-5 h-5"
                    fill="none"
+                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
-                    <circle
-                      className="opacity-25"
-                      cx="12"
-                      cy="12"
-                      r="10"
-                      stroke="currentColor"
-                      strokeWidth="4"
+                    <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
-                      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"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
                    />
                  </svg>
-                  Saving...
+                  <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>
-              ) : (
-                'Save'
-              )}
-            </Button>
-          </div>
-        </form>
+              </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;
@@ -194,7 +194,7 @@ const TeamDashboardPage: FC = (): ReactElement => {
        </div>

        {/* Loading Overlay */}
-        <div className="fixed inset-0 bg-white/60 flex items-center justify-center z-50">
+        <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">
@@ -6,21 +6,33 @@ const UserDetailLayout: FC = (): ReactElement => {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
-    <div className="flex min-h-screen bg-gray-50 dark:bg-neutral-950">
+    <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-neutral-900 border-b dark:border-neutral-700 px-4 py-3 flex items-center">
+        <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-neutral-800 transition-colors"
+            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
+              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>
+          <h1 className="ml-3 text-lg font-bold text-gray-900 dark:text-white">
+            Hackathon
+          </h1>
        </div>

        <main className="flex-1 overflow-auto">
@@ -5,6 +5,7 @@ import {
  useUserDetailsById,
  useTeamsByUserId,
 } from '@imphnen-frontend-service/service';
+import { Icon } from '@iconify/react';

 const UserProfilePage: FC = (): ReactElement => {
  const { userId } = useParams<{ userId: string }>();
@@ -17,8 +18,8 @@ const UserProfilePage: FC = (): ReactElement => {

  if (isLoading) {
    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-neutral-950">
-        <div className="text-gray-600 dark:text-neutral-400">
+      <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>
@@ -27,7 +28,7 @@ const UserProfilePage: FC = (): ReactElement => {

  if (error || !user) {
    return (
-      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-neutral-950">
+      <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>
@@ -42,9 +43,9 @@ const UserProfilePage: FC = (): ReactElement => {
  }

  return (
-    <div className="min-h-screen bg-gray-50 dark:bg-neutral-950">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
      {/* Header */}
-      <div className="bg-white dark:bg-neutral-900 border-b dark:border-neutral-700">
+      <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">
@@ -52,12 +53,12 @@ const UserProfilePage: FC = (): ReactElement => {
                <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-neutral-800 shadow-lg"
+                  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-neutral-700 flex items-center justify-center border-4 border-white dark:border-neutral-800 shadow-lg">
-                  <span className="text-gray-500 dark:text-neutral-400 text-2xl md:text-3xl">
-                    👤
+                <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>
              )}
@@ -65,13 +66,17 @@ const UserProfilePage: FC = (): ReactElement => {
                <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-neutral-400 mt-1">
+                <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-neutral-500">
-                      📍 {user.location}
+                    <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>
                )}
@@ -90,11 +95,11 @@ const UserProfilePage: FC = (): ReactElement => {
          <div className="lg:col-span-2 space-y-4 md:space-y-6">
            {/* About Section */}
            {user.bio && (
-              <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6 overflow-hidden">
+              <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-neutral-300 break-all overflow-wrap-anywhere">
+                <p className="text-gray-700 dark:text-gray-300 break-all overflow-wrap-anywhere font-sans">
                  {user.bio}
                </p>
              </div>
@@ -102,7 +107,7 @@ const UserProfilePage: FC = (): ReactElement => {

            {/* Skills Section */}
            {user.skills && user.skills.length > 0 && (
-              <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6">
+              <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>
@@ -110,7 +115,7 @@ const UserProfilePage: FC = (): ReactElement => {
                  {user.skills.map((skill: string) => (
                    <span
                      key={skill}
-                      className="inline-flex items-center px-4 py-2 bg-blue-600 dark:bg-primary-600 text-white rounded-lg text-sm font-medium shadow-sm hover:bg-blue-700 dark:hover:bg-primary-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>
@@ -121,7 +126,7 @@ const UserProfilePage: FC = (): ReactElement => {

            {/* Teams Section */}
            {userTeams.length > 0 ? (
-              <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6">
+              <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>
@@ -130,37 +135,47 @@ const UserProfilePage: FC = (): ReactElement => {
                    <Link
                      key={team.id}
                      to={'/teams/' + team.id}
-                      className="bg-white dark:bg-neutral-800 rounded-lg shadow-md dark:shadow-neutral-950/50 overflow-hidden hover:shadow-lg transition-shadow"
+                      className="bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-gray-950/50 overflow-hidden hover:shadow-lg transition-shadow"
                    >
-                      <img
-                        src={team.banner || '/images/banner-imphnen.webp'}
-                        alt={team.name}
-                        className="w-full h-24 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-4">
                        <div className="flex items-center space-x-3 mb-2">
                          {team.logo && (
                            <img
                              src={team.logo}
                              alt={team.name}
-                              className="w-10 h-10 rounded-full object-cover"
+                              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">
+                            <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-neutral-400 flex gap-2">
+                            <div className="text-sm text-gray-600 dark:text-gray-400 flex gap-2 font-sans">
                              <p className="truncate flex-1 min-w-0">
-                                📍 {team.city}
+                                <Icon
+                                  icon="mdi:map-marker"
+                                  className="inline-block w-4 h-4 mr-1"
+                                />
+                                {team.city}
                              </p>
                              <p className="whitespace-nowrap shrink-0">
-                                👥 {team.members?.length || 0} members
+                                <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-neutral-400 text-sm line-clamp-2">
+                        <p className="text-gray-600 dark:text-gray-400 text-base line-clamp-2 font-sans">
                          {team.description}
                        </p>
                      </div>
@@ -169,13 +184,13 @@ const UserProfilePage: FC = (): ReactElement => {
                </div>
              </div>
            ) : (
-              <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6">
+              <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-neutral-400">
+                  <p className="text-gray-600 dark:text-gray-400">
                    Not in any team yet
                  </p>
                </div>
@@ -186,13 +201,13 @@ const UserProfilePage: FC = (): ReactElement => {
          {/* Sidebar */}
          <div className="space-y-4 md:space-y-6">
            {/* Contact Info */}
-            <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6">
+            <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-neutral-400">
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
                    Email
                  </p>
                  <p className="text-gray-900 dark:text-white font-medium">
@@ -201,7 +216,7 @@ const UserProfilePage: FC = (): ReactElement => {
                </div>
                {user.location && (
                  <div>
-                    <p className="text-sm text-gray-600 dark:text-neutral-400">
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Location
                    </p>
                    <p className="text-gray-900 dark:text-white font-medium">
Author	SHA1	Message	Date
Hafid Nur	0017aff5f4	feat(hackathon): dark mode for user page	2025-11-27 16:08:39 +07:00
Hafid Nur	e52776e68a	Merge branch 'develop' into hackathon/fix-ui	2025-11-27 15:51:06 +07:00
Hafid Nur	cd06a71a9e	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	2025-11-27 15:42:18 +07:00
Hafid Nur	0fcd93cb7d	feat(hackathon): update dark mode onboarding and edit profile	2025-11-27 14:59:22 +07:00
Hafid Nur	3470853858	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	2025-11-27 14:53:38 +07:00
Hafid Nur	ff9a02c020	feat(hackathon): browse team page - update dark mode color scheme - add some border style to give outline and depth - change emoji to icon	2025-11-27 13:28:38 +07:00
Hafid Nur	f81a7c334e	feat(hackathon): dashboard UI improvement and dark mode adjustment	2025-11-27 13:06:13 +07:00
Hafid Nur	2700f7cbb7	feat(hackathon): update auth page dark mode color scheme	2025-11-27 12:02:23 +07:00
Hafid Nur	cfcdfa527c	feat(hackathon): update landing page dark mode color scheme	2025-11-27 12:01:50 +07:00
Hafid Nur	c6579d5295	Merge branch 'develop' into hackathon/fix-ui	2025-11-27 11:20:12 +07:00
Hafid Nur	a1640cfe1d	Merge branch 'develop' into hackathon/fix-ui	2025-11-26 16:38:22 +07:00
Hafid Nur	00df69fb93	fix: optimize placeholder banner image & minor fix dark mode	2025-11-26 16:35:49 +07:00
Hafid Nur	810dbaa0ca	Merge branch 'develop' into hackathon/fix-ui	2025-11-26 16:30:52 +07:00
Hafid Nur	cb09709800	feat(hackathon): update UI - Update dashboard, onboarding user, edit profile, and team layout to make it more consistent	2025-11-26 15:51:38 +07:00
Hafid Nur	7e385c6385	fix: landing navbar not sticky to top, fix onboarding UI	2025-11-26 14:33:17 +07:00
Hafid Nur	19aa5bb452	Merge branch 'develop' into hackathon/fix-ui	2025-11-26 14:27:32 +07:00
Hafid Nur	e8de897dc9	Merge branch 'develop' into hackathon/fix-ui	2025-11-26 13:51:51 +07:00
Muhammad Zakir Ramadhan	eff89d28ed	feat: add image loading state and skeleton UI for team dashboard	2025-11-25 20:17:48 +07:00
Maulana SodiqinandGitHub	b75a88677a	Merge branch 'develop' into hackathon/fix-ui	2025-11-25 19:58:59 +07:00
Hafid Nur	7642fef3e6	chore: update UI for signup and login - add back button for better UX	2025-11-25 18:57:03 +07:00
Hafid Nur	f40e0e35b9	chore: update landing page	2025-11-25 18:29:04 +07:00
Hafid Nur	c6c0d6fded	Merge branch 'develop' into hackathon/fix-ui	2025-11-25 17:54:41 +07:00
Hafid Nur	fcaa449630	chore: remove react-helmet-async	2025-11-25 15:37:47 +07:00
Hafid Nur	4988980384	Merge branch 'develop' into hackathon/fix-ui	2025-11-25 15:23:03 +07:00
Hafid Nur	9547d34f5c	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	2025-11-25 15:20:10 +07:00
Hafid Nur	aeb23a7255	feat: update landing page	2025-11-25 15:05:37 +07:00