feat(hackathon): update dark mode onboarding and edit profile

- 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

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

@@ -176,13 +176,13 @@ const CallbackPage: FC = (): ReactElement => {
   }
 
   return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950">
+    <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>
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+        <h2 className="text-xl font-semibold text-gray-900 mb-2">
           Completing login...
         </h2>
-        <p className="text-gray-600 dark:text-gray-400">Please wait</p>
+        <p className="text-gray-600">Please wait</p>
       </div>
     </div>
   );

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

@@ -1,4 +1,4 @@
-import { FC, ReactElement, useEffect, useState } from 'react';
+import { FC, ReactElement } from 'react';
 import { Link } from 'react-router';
 import {
   useMyTeams,
@@ -9,49 +9,16 @@ 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: Invitation[] = (invitationsData?.data ||
+  const invitations = invitationsData?.data || [];
-    []) as Invitation[];
 
   const handleAcceptInvitation = async (invitationId: string) => {
     try {
@@ -74,8 +41,7 @@ const DashboardPage: FC = (): ReactElement => {
   };
 
   return (
-    <>
+    <div className="p-6 md:p-8 md:max-w-7xl w-full mx-auto overflow-hidden">
-      <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'}!
@@ -101,11 +67,10 @@ const DashboardPage: FC = (): ReactElement => {
               >
                 <div>
                   <p className="font-medium text-gray-900 dark:text-white">
-                      {invitation.team?.name ?? 'Unnamed Team'}
+                    {invitation.team.name}
                   </p>
                   <p className="text-sm text-gray-600 dark:text-gray-400">
-                      Invited by{' '}
+                    Invited by {invitation.inviter.fullname}
-                      {invitation.inviter?.fullname ?? 'Unknown User'}
                   </p>
                 </div>
                 <div className="flex space-x-2">
@@ -245,13 +210,12 @@ const DashboardPage: FC = (): ReactElement => {
               </div>
             </div>
             {user?.location && (
-                <button
+              <Link
-                  type="button"
+                to="/profile"
-                  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"
-                  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>
+              </Link>
             )}
           </div>
           <div className="space-y-4 md:space-y-6 w-full max-w-full">
@@ -296,11 +260,6 @@ const DashboardPage: FC = (): ReactElement => {
         </div>
       </div>
     </div>
-      <ProfilePage
-        open={showProfileModal}
-        onClose={() => setShowProfileModal(false)}
-      />
-    </>
   );
 };
 

apps/hackathon/src/app/layout.tsx

@@ -1,9 +1,4 @@
-import {
+import { Outlet, ScrollRestoration, useLocation, useNavigate } from 'react-router-dom';
-  Outlet,
-  ScrollRestoration,
-  useLocation,
-  useNavigate,
-} from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import { supabase } from '@imphnen-frontend-service/service';
 
@@ -32,21 +27,14 @@ export default function RootLayout() {
       }
 
       // Check Supabase session
-      const {
+      const { data: { session }, error } = await supabase.auth.getSession();
-        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 === '/maintenance';
+      const isPublicAuthPage = pathname === '/auth/login' || pathname === '/auth/signup' || pathname === '/auth/forgot-password' || pathname === '/auth/reset-password';
-      // 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
@@ -68,8 +56,7 @@ export default function RootLayout() {
 
       // Require authentication for all other routes
       if (!session) {
-        navigate('/maintenance', { replace: true });
+        navigate('/auth/login', { replace: true });
-        // navigate('/auth/login', { replace: true });
         setIsChecking(false);
         return;
       }

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

@@ -1,21 +0,0 @@
-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>
-  );
-}

apps/hackathon/src/app/page.tsx

@@ -187,12 +187,12 @@ export default function HomePage() {
               </button>
             ) : (
               <>
-                <button
+                <a
-                  onClick={() => navigate('/auth/login')}
+                  href="#masuk"
-                  className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white cursor-pointer"
+                  className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white"
                 >
                   Masuk
-                </button>
+                </a>
                 <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"

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

@@ -1,6 +1,7 @@
 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,
@@ -25,15 +26,8 @@ const ROLE_OPTIONS = [
   'Mobile Developer',
 ];
 
-type ProfileModalProps = {
+const ProfilePage: FC = (): ReactElement => {
-  open: boolean;
+  const navigate = useNavigate();
-  onClose: () => void;
-};
-
-const ProfilePage: FC<ProfileModalProps> = ({
-  open,
-  onClose,
-}): ReactElement | null => {
   const [avatarFile, setAvatarFile] = useState<File | null>(null);
   const [avatarPreview, setAvatarPreview] = useState<string>('');
 
@@ -129,8 +123,8 @@ const ProfilePage: FC<ProfileModalProps> = ({
       // Wait a bit for the onSuccess handler to update localStorage
       await new Promise((resolve) => setTimeout(resolve, 100));
 
-      // Close modal
+      // Navigate back to dashboard
-      onClose();
+      navigate('/dashboard');
     } catch (error) {
       console.error('Profile update failed:', error);
       toast.error(
@@ -143,20 +137,17 @@ const ProfilePage: FC<ProfileModalProps> = ({
 
   const isLoading = isUpdating || isUploading;
 
-  return open ? (
+  return (
-    <div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-md z-50 overflow-y-auto">
+    <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="min-h-full flex items-center justify-center">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-xl border dark:boder-gray-800">
-        <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
+            <Link
-                type="button"
+              to="/dashboard"
-                onClick={onClose}
+              className="text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-200"
-                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"
@@ -171,7 +162,7 @@ const ProfilePage: FC<ProfileModalProps> = ({
                   d="M6 18L18 6M6 6l12 12"
                 />
               </svg>
-              </button>
+            </Link>
           </div>
           <p className="text-gray-600 font-sans dark:text-neutral-400">
             Update your photo and name
@@ -186,10 +177,10 @@ const ProfilePage: FC<ProfileModalProps> = ({
                 <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"
+                  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-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">
+                <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"
@@ -258,7 +249,7 @@ const ProfilePage: FC<ProfileModalProps> = ({
               name="location"
               render={({ field, fieldState }) => (
                 <CitySelect
-                    value={field.value ?? ''}
+                  value={field.value}
                   onChange={field.onChange}
                   error={fieldState.error?.message}
                   placeholder="Search your city..."
@@ -341,7 +332,7 @@ const ProfilePage: FC<ProfileModalProps> = ({
               type="button"
               variant="secondary"
               className="flex-1"
-                onClick={onClose}
+              onClick={() => navigate('/dashboard')}
               disabled={isLoading}
             >
               Cancel
@@ -382,8 +373,7 @@ const ProfilePage: FC<ProfileModalProps> = ({
         </form>
       </div>
     </div>
-    </div>
+  );
-  ) : null;
 };
 
 export default ProfilePage;

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

@@ -194,7 +194,7 @@ const TeamDashboardPage: FC = (): ReactElement => {
         </div>
 
         {/* Loading Overlay */}
-        <div className="fixed inset-0 bg-white/60 dark:bg-black/50 flex items-center justify-center z-50">
+        <div className="fixed inset-0 bg-white/60 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">

apps/hackathon/src/app/users/[userId]/layout.tsx

@@ -6,33 +6,21 @@ const UserDetailLayout: FC = (): ReactElement => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (
-    <div className="flex min-h-screen bg-gray-50 dark:bg-gray-950">
+    <div className="flex min-h-screen bg-gray-50 dark:bg-neutral-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">
+        <div className="lg:hidden bg-white dark:bg-neutral-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"
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors"
           >
-            <svg
+            <svg className="w-6 h-6 text-gray-600 dark:text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              className="w-6 h-6 text-gray-600 dark:text-neutral-400"
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-              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">
+          <h1 className="ml-3 text-lg font-bold text-gray-900 dark:text-white">Hackathon</h1>
-            Hackathon
-          </h1>
         </div>
 
         <main className="flex-1 overflow-auto">

apps/hackathon/src/app/users/[userId]/page.tsx

@@ -5,7 +5,6 @@ import {
   useUserDetailsById,
   useTeamsByUserId,
 } from '@imphnen-frontend-service/service';
-import { Icon } from '@iconify/react';
 
 const UserProfilePage: FC = (): ReactElement => {
   const { userId } = useParams<{ userId: string }>();
@@ -18,8 +17,8 @@ const UserProfilePage: FC = (): ReactElement => {
 
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-neutral-950">
-        <div className="text-gray-600 dark:text-gray-400">
+        <div className="text-gray-600 dark:text-neutral-400">
           Loading user profile...
         </div>
       </div>
@@ -28,7 +27,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-gray-950">
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-neutral-950">
         <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
           User not found
         </h2>
@@ -43,9 +42,9 @@ const UserProfilePage: FC = (): ReactElement => {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+    <div className="min-h-screen bg-gray-50 dark:bg-neutral-950">
       {/* Header */}
-      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
+      <div className="bg-white dark:bg-neutral-900 border-b dark:border-neutral-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">
@@ -53,12 +52,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-gray-800 shadow-lg"
+                  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"
                 />
               ) : (
-                <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">
+                <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-gray-400 text-2xl md:text-3xl">
+                  <span className="text-gray-500 dark:text-neutral-400 text-2xl md:text-3xl">
-                    <Icon icon="mdi:account-circle" className="w-10 h-10" />
+                    👤
                   </span>
                 </div>
               )}
@@ -66,17 +65,13 @@ 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-gray-400 mt-1">
+                <p className="text-sm md:text-base text-gray-600 dark:text-neutral-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">
+                    <span className="text-sm text-gray-500 dark:text-neutral-500">
-                      <Icon
+                      📍 {user.location}
-                        icon="mdi:map-marker"
-                        className="inline-block w-4 h-4 mr-1"
-                      />
-                      {user.location}
                     </span>
                   </div>
                 )}
@@ -95,11 +90,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-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6 overflow-hidden">
+              <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-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">
+                <p className="text-gray-700 dark:text-neutral-300 break-all overflow-wrap-anywhere">
                   {user.bio}
                 </p>
               </div>
@@ -107,7 +102,7 @@ const UserProfilePage: FC = (): ReactElement => {
 
             {/* 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">
+              <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-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>
@@ -115,7 +110,7 @@ const UserProfilePage: FC = (): ReactElement => {
                   {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"
+                      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"
                     >
                       {skill}
                     </span>
@@ -126,7 +121,7 @@ const UserProfilePage: FC = (): ReactElement => {
 
             {/* 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">
+              <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-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>
@@ -135,47 +130,37 @@ const UserProfilePage: FC = (): ReactElement => {
                     <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"
+                      className="bg-white dark:bg-neutral-800 rounded-lg shadow-md dark:shadow-neutral-950/50 overflow-hidden hover:shadow-lg transition-shadow"
                     >
-                      <div className="w-full aspect-3/1">
                       <img
-                          src={team.banner}
+                        src={team.banner || '/images/banner-imphnen.webp'}
                         alt={team.name}
-                          className="w-full h-full object-cover"
+                        className="w-full h-24 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"
+                              className="w-10 h-10 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">
+                            <h3 className="font-bold text-gray-900 dark:text-white line-clamp-2">
                               {team.name}
                             </h3>
-                            <div className="text-sm text-gray-600 dark:text-gray-400 flex gap-2 font-sans">
+                            <div className="text-sm text-gray-600 dark:text-neutral-400 flex gap-2">
                               <p className="truncate flex-1 min-w-0">
-                                <Icon
+                                📍 {team.city}
-                                  icon="mdi:map-marker"
-                                  className="inline-block w-4 h-4 mr-1"
-                                />
-                                {team.city}
                               </p>
                               <p className="whitespace-nowrap shrink-0">
-                                <Icon
+                                👥 {team.members?.length || 0} members
-                                  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">
+                        <p className="text-gray-600 dark:text-neutral-400 text-sm line-clamp-2">
                           {team.description}
                         </p>
                       </div>
@@ -184,13 +169,13 @@ const UserProfilePage: FC = (): ReactElement => {
                 </div>
               </div>
             ) : (
-              <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6">
+              <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-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">
+                  <p className="text-gray-600 dark:text-neutral-400">
                     Not in any team yet
                   </p>
                 </div>
@@ -201,13 +186,13 @@ const UserProfilePage: FC = (): ReactElement => {
           {/* 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">
+            <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-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">
+                  <p className="text-sm text-gray-600 dark:text-neutral-400">
                     Email
                   </p>
                   <p className="text-gray-900 dark:text-white font-medium">
@@ -216,7 +201,7 @@ const UserProfilePage: FC = (): ReactElement => {
                 </div>
                 {user.location && (
                   <div>
-                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                    <p className="text-sm text-gray-600 dark:text-neutral-400">
                       Location
                     </p>
                     <p className="text-gray-900 dark:text-white font-medium">