diff --git a/apps/hackathon/public/images/banner-imphnen.png b/apps/hackathon/public/images/banner-imphnen.png
new file mode 100644
index 0000000..b6a6cf8
Binary files /dev/null and b/apps/hackathon/public/images/banner-imphnen.png differ
diff --git a/apps/hackathon/src/app/dashboard/page.tsx b/apps/hackathon/src/app/dashboard/page.tsx
index 45250f7..85d9edd 100644
--- a/apps/hackathon/src/app/dashboard/page.tsx
+++ b/apps/hackathon/src/app/dashboard/page.tsx
@@ -73,61 +73,62 @@ const DashboardPage: FC = (): ReactElement => {
       )}
 
       {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 mb-3 md:mb-4">My Team</h2>
+          <div className="grid gap-4 md:gap-6 md:grid-cols-2 lg:grid-cols-3">
             {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">
                 {team.banner && <img src={team.banner} alt={team.name} className="w-full h-32 object-cover" />}
-                <div className="p-6">
-                  <div className="flex items-center space-x-3 mb-3">
-                    {team.logo && <img src={team.logo} alt={team.name} className="w-12 h-12 rounded-full object-cover" />}
+                <div className="p-4 md:p-6">
+                  <div className="flex items-center space-x-3 mb-2 md:mb-3">
+                    {team.logo && <img src={team.logo} alt={team.name} className="w-10 h-10 md:w-12 md:h-12 rounded-full object-cover" />}
                     <div>
-                      <h3 className="text-lg font-bold text-gray-900">{team.name}</h3>
-                      <p className="text-sm text-gray-600">City: {team.city}</p>
+                      <h3 className="text-base md:text-lg font-bold text-gray-900">{team.name}</h3>
+                      <p className="text-xs md:text-sm text-gray-600">City: {team.city}</p>
                     </div>
                   </div>
-                  <p className="text-gray-600 text-sm line-clamp-2">{team.description}</p>
+                  <p className="text-gray-600 text-xs md:text-sm line-clamp-2">{team.description}</p>
                 </div>
               </Link>
             ))}
           </div>
         </div>
       ) : (
-        <div className="mb-8 bg-white rounded-lg shadow-md p-8">
+        <div className="mb-6 md:mb-8 bg-white rounded-lg shadow-md p-6 md:p-8">
           <div className="text-center">
-            <div className="text-4xl mb-3">Wave</div>
-            <h2 className="text-2xl font-bold text-gray-900 mb-2">You are not in a team yet</h2>
-            <p className="text-gray-600">Use the sidebar to browse teams or create your own</p>
+            <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 mb-1 md:mb-2">You are not in a team yet</h2>
+            <p className="text-sm md:text-base text-gray-600">Use the sidebar to browse teams or create your own</p>
           </div>
         </div>
       )}
 
       <div className="mt-8 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl shadow-lg">
         <div className="bg-gradient-to-r from-blue-600 to-indigo-600 h-24 rounded-t-xl"></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 || 'User'} className="w-24 h-24 rounded-full border-4 border-white shadow-lg object-cover" />
-            ) : (
-              <div className="w-24 h-24 rounded-full border-4 border-white shadow-lg bg-gray-200 flex items-center justify-center">
-                <span className="text-gray-400 text-4xl">User</span>
-              </div>
-            )}
-            <div className="ml-6 mt-14">
-              {/* User Name and Edit profile button in one line */}
-              <div className="flex items-center space-x-4">
-                <h2 className="text-2xl font-bold text-gray-900">{user?.fullname || user?.email?.split('@')[0] || 'Unnamed User'}</h2>
-                <Link to="/profile" 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">Edit Profile</Link>
-              </div>
-              {user?.location ? (
-                <p className="text-gray-600 flex items-center mt-1">{user.location}</p>
+        <div className="px-4 md:px-8 pb-4 md:pb-8">
+          <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 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 shadow-lg bg-gray-200 flex items-center justify-center">
+                  <span className="text-gray-400 text-3xl md:text-4xl">User</span>
+                </div>
               )}
+              <div className="md:ml-6 mt-4 md:mt-14">
+                <h2 className="text-xl md:text-2xl font-bold text-gray-900">{user?.fullname || user?.email?.split('@')[0] || 'Unnamed User'}</h2>
+                {user?.location ? (
+                  <p className="text-gray-600 flex items-center mt-1 text-sm md:text-base">{user.location}</p>
+                ) : (
+                  <Link to="/onboarding/user" className="text-blue-600 hover:text-blue-700 text-xs md:text-sm mt-1 inline-block">Complete your profile</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-blue-600 text-white rounded-lg text-xs md:text-sm font-medium shadow-sm hover:bg-blue-700 transition-colors w-full md:w-auto">Edit Profile</Link>
+            )}
           </div>
-          <div className="space-y-6">
+          <div className="space-y-4 md:space-y-6">
             {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>
diff --git a/apps/hackathon/src/app/profile/page.tsx b/apps/hackathon/src/app/profile/page.tsx
index 7e07f3b..0163665 100644
--- a/apps/hackathon/src/app/profile/page.tsx
+++ b/apps/hackathon/src/app/profile/page.tsx
@@ -1,8 +1,8 @@
 import { FC, ReactElement, useState, useEffect } from 'react';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
 import { useNavigate, Link } from 'react-router';
-import { useForm } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 import {
   userEditProfileSchema,
   TUserEditProfileForm,
@@ -12,6 +12,18 @@ import {
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
+import { CitySelect } from '../../components/city-select';
+
+const ROLE_OPTIONS = [
+  'Frontend Developer',
+  'Backend Developer',
+  'Full Stack Developer',
+  'DevOps Engineer',
+  'UI/UX Designer',
+  'Product Manager',
+  'Data Scientist',
+  'Mobile Developer',
+];
 
 const ProfilePage: FC = (): ReactElement => {
   const navigate = useNavigate();
@@ -28,6 +40,9 @@ const ProfilePage: FC = (): ReactElement => {
     defaultValues: {
       fullname: session?.user?.fullname || '',
       avatar: session?.user?.avatar || null,
+      location: session?.user?.location || '',
+      bio: session?.user?.bio || '',
+      skills: session?.user?.skills || [],
     },
   });
 
@@ -39,7 +54,16 @@ const ProfilePage: FC = (): ReactElement => {
     if (session?.user?.fullname) {
       form.setValue('fullname', session.user.fullname);
     }
-  }, [session?.user?.avatar, session?.user?.fullname, avatarPreview, form]);
+    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];
@@ -79,6 +103,9 @@ const ProfilePage: FC = (): ReactElement => {
       await updateUser({
         fullname: data.fullname,
         avatar: avatarUrl,
+        location: data.location,
+        bio: data.bio,
+        skills: data.skills,
       });
 
       toast.success('Profile updated successfully!');
@@ -192,6 +219,87 @@ const ProfilePage: FC = (): ReactElement => {
             name="fullname"
           />
 
+          {/* City */}
+          <div className="space-y-2">
+            <label className="block text-sm font-medium text-gray-700">
+              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-sm font-medium text-gray-700">
+              Role / Skills
+            </label>
+            <Controller
+              control={form.control}
+              name="skills"
+              render={({ field }) => (
+                <div className="space-y-2">
+                  <div className="grid grid-cols-2 gap-2">
+                    {ROLE_OPTIONS.map((role) => (
+                      <label
+                        key={role}
+                        className="flex items-center space-x-2 cursor-pointer"
+                      >
+                        <input
+                          type="checkbox"
+                          checked={field.value?.includes(role)}
+                          onChange={(e) => {
+                            const newValue = e.target.checked
+                              ? [...(field.value || []), role]
+                              : (field.value || []).filter((v) => v !== role);
+                            field.onChange(newValue);
+                          }}
+                          className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                        />
+                        <span className="text-sm">{role}</span>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              )}
+            />
+          </div>
+
+          {/* 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>
+            <Controller
+              control={form.control}
+              name="bio"
+              render={({ field, fieldState }) => (
+                <div>
+                  <Textarea
+                    {...field}
+                    placeholder="Tell us about yourself..."
+                    rows={4}
+                    className="w-full"
+                  />
+                  {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
diff --git a/apps/hackathon/src/app/teams/[teamId]/page.tsx b/apps/hackathon/src/app/teams/[teamId]/page.tsx
index 7872211..c40d208 100644
--- a/apps/hackathon/src/app/teams/[teamId]/page.tsx
+++ b/apps/hackathon/src/app/teams/[teamId]/page.tsx
@@ -78,7 +78,7 @@ const TeamDashboardPage: FC = (): ReactElement => {
       {/* Header with Banner */}
       <div className="bg-white border-b">
         {team.banner && (
-          <div className="w-full h-48 overflow-hidden">
+          <div className="w-full h-32 md:h-48 overflow-hidden">
             <img
               src={team.banner}
               alt={team.name}
@@ -86,20 +86,20 @@ const TeamDashboardPage: FC = (): ReactElement => {
             />
           </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"
+                  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"
                 />
               )}
               <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">
+                <h1 className="text-xl md:text-3xl font-bold text-gray-900 line-clamp-2">{team.name}</h1>
+                <p className="text-sm md:text-base text-gray-600 mt-1 line-clamp-1">📍 {team.city}</p>
+                <div className="flex flex-wrap items-center gap-2 md:space-x-4 mt-2">
                   <span className="text-sm text-gray-500">
                     {members.length} {members.length === 1 ? 'Member' : 'Members'}
                   </span>
@@ -107,34 +107,34 @@ const TeamDashboardPage: FC = (): ReactElement => {
                     {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">
+                    <span className="hidden md:inline-flex px-3 py-1 bg-blue-600 text-white rounded-md text-sm font-semibold shadow-sm">
                       👑 Team Leader
                     </span>
                   )}
                 </div>
               </div>
             </div>
-            <Link to="/dashboard">
+            <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-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 lg: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>
+            <div className="bg-white rounded-lg shadow-md p-4 md:p-6">
+              <h2 className="text-lg md:text-xl font-bold text-gray-900 mb-3 md:mb-4">About Team</h2>
               <p className="text-gray-700 whitespace-pre-wrap">{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 rounded-lg shadow-md p-4 md:p-6">
+                <h2 className="text-lg md:text-xl font-bold text-gray-900 mb-3 md:mb-4">Team Management</h2>
                 <div className="grid gap-3 sm:grid-cols-2">
                   <Button
                     className="w-full"
@@ -187,8 +187,8 @@ const TeamDashboardPage: FC = (): ReactElement => {
 
             {/* 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>
+              <div className="bg-white rounded-lg shadow-md p-4 md:p-6">
+                <h2 className="text-lg md:text-xl font-bold text-gray-900 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">
@@ -208,7 +208,7 @@ const TeamDashboardPage: FC = (): ReactElement => {
 
             {/* Submission Status */}
             {team.has_submission && (
-              <div className="bg-green-50 border border-green-200 rounded-lg p-6">
+              <div className="bg-green-50 border border-green-200 rounded-lg p-4 md:p-6">
                 <div className="flex items-center space-x-3">
                   <span className="text-3xl">✅</span>
                   <div>
@@ -228,12 +228,15 @@ 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 rounded-lg shadow-md p-4 md:p-6">
+              <h3 className="text-base md:text-lg font-bold text-gray-900 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 rounded-lg p-2 transition-colors text-left cursor-pointer"
+                >
                   {team.leader.avatar ? (
                     <img
                       src={team.leader.avatar}
@@ -249,18 +252,22 @@ const TeamDashboardPage: FC = (): ReactElement => {
                     <p className="font-medium text-gray-900">{team.leader.fullname}</p>
                     <p className="text-sm text-gray-600">{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 rounded-lg shadow-md p-4 md:p-6">
+              <h3 className="text-base md:text-lg font-bold text-gray-900 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">
+                  <button
+                    key={member.id}
+                    onClick={() => navigate(`/users/${member.user.id}`)}
+                    className="w-full flex items-center space-x-3 hover:bg-gray-100 rounded-lg p-2 transition-colors text-left cursor-pointer"
+                  >
                     {member.user.avatar ? (
                       <img
                         src={member.user.avatar}
@@ -280,7 +287,7 @@ const TeamDashboardPage: FC = (): ReactElement => {
                         {member.role === ETeamMemberRole.LEADER ? 'Leader' : 'Member'}
                       </p>
                     </div>
-                  </div>
+                  </button>
                 ))}
               </div>
             </div>
diff --git a/apps/hackathon/src/app/teams/browse/page.tsx b/apps/hackathon/src/app/teams/browse/page.tsx
index be9bae3..3bca1b3 100644
--- a/apps/hackathon/src/app/teams/browse/page.tsx
+++ b/apps/hackathon/src/app/teams/browse/page.tsx
@@ -1,5 +1,5 @@
 import { FC, ReactElement, useState } from 'react';
-import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { Button, Input, Select } from '@imphnen-frontend-service/ui/atoms';
 import { Link, useNavigate } from 'react-router';
 import { useTeams, useJoinTeam, useMyTeams, ETeamVisibility, joinTeamSchema, TJoinTeamForm } from '@imphnen-frontend-service/service';
 import { useForm } from 'react-hook-form';
@@ -65,7 +65,7 @@ const BrowseTeamsPage: FC = (): ReactElement => {
               <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>
             </div>
-            <Link to="/dashboard">
+            <Link to="/dashboard" className="hidden md:block">
               <Button variant="secondary">Back to Dashboard</Button>
             </Link>
           </div>
@@ -85,23 +85,24 @@ const BrowseTeamsPage: FC = (): ReactElement => {
                 placeholder="Search by team name..."
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
+                className="h-12"
               />
             </div>
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-2">
                 Filter by City
               </label>
-              <select
+              <Select
                 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"
+                className="w-full"
               >
                 {INDONESIAN_CITIES.map((city) => (
                   <option key={city} value={city}>
                     {city}
                   </option>
                 ))}
-              </select>
+              </Select>
             </div>
           </div>
         </div>
@@ -119,15 +120,13 @@ const BrowseTeamsPage: FC = (): ReactElement => {
         ) : (
           <div className="grid gap-6 md:grid-cols-2 lg: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 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow flex flex-col">
+                <img
+                  src={team.banner || '/images/banner-imphnen.png'}
+                  alt={team.name}
+                  className="w-full h-32 object-cover"
+                />
+                <div className="p-6 flex flex-col flex-1">
                   <div className="flex items-center space-x-3 mb-3">
                     {team.logo ? (
                       <img
@@ -140,30 +139,46 @@ const BrowseTeamsPage: FC = (): ReactElement => {
                         <span className="text-gray-500 text-xl">👥</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 line-clamp-2">{team.name}</h3>
+                      <div className="text-sm text-gray-600 flex gap-2">
+                        <p className="truncate flex-1 min-w-0">📍 {team.city}</p>
+                        <p className="whitespace-nowrap shrink-0">👥 {team.members?.length || 0} members</p>
+                      </div>
                     </div>
                   </div>
                   <p className="text-gray-600 text-sm mb-4 line-clamp-3">
                     {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>
             ))}
diff --git a/apps/hackathon/src/app/users/[userId]/layout.tsx b/apps/hackathon/src/app/users/[userId]/layout.tsx
new file mode 100644
index 0000000..5b0309d
--- /dev/null
+++ b/apps/hackathon/src/app/users/[userId]/layout.tsx
@@ -0,0 +1,18 @@
+import { FC, ReactNode } from 'react';
+import { Outlet } from 'react-router';
+import { Navigation } from '../../../components/navigation';
+
+interface UserLayoutProps {
+  children?: ReactNode;
+}
+
+export const UserLayout: FC<UserLayoutProps> = () => {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Navigation />
+      <Outlet />
+    </div>
+  );
+};
+
+export default UserLayout;
diff --git a/apps/hackathon/src/app/users/[userId]/page.tsx b/apps/hackathon/src/app/users/[userId]/page.tsx
new file mode 100644
index 0000000..294289e
--- /dev/null
+++ b/apps/hackathon/src/app/users/[userId]/page.tsx
@@ -0,0 +1,158 @@
+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';
+
+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">
+        <div className="text-gray-600">Loading user profile...</div>
+      </div>
+    );
+  }
+
+  if (error || !user) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen">
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">User not found</h2>
+        {error && <p className="text-red-600 mb-4">{String(error)}</p>}
+        <Button onClick={() => navigate('/dashboard')}>Back to Dashboard</Button>
+      </div>
+    );
+  }
+
+  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-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 shadow-lg"
+                />
+              ) : (
+                <div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-gray-200 flex items-center justify-center border-4 border-white shadow-lg">
+                  <span className="text-gray-500 text-2xl md:text-3xl">👤</span>
+                </div>
+              )}
+              <div>
+                <h1 className="text-xl md:text-3xl font-bold text-gray-900">{user.fullname}</h1>
+                <p className="text-sm md:text-base text-gray-600 mt-1">{user.email}</p>
+                {user.location && (
+                  <div className="flex items-center space-x-4 mt-2">
+                    <span className="text-sm text-gray-500">📍 {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 rounded-lg shadow-md p-4 md:p-6 overflow-hidden">
+                <h2 className="text-lg md:text-xl font-bold text-gray-900 mb-3 md:mb-4">About</h2>
+                <p className="text-gray-700 break-all overflow-wrap-anywhere">{user.bio}</p>
+              </div>
+            )}
+
+            {/* Skills Section */}
+            {user.skills && user.skills.length > 0 && (
+              <div className="bg-white rounded-lg shadow-md p-4 md:p-6">
+                <h2 className="text-lg md:text-xl font-bold text-gray-900 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 bg-blue-600 text-white rounded-lg text-sm font-medium shadow-sm hover:bg-blue-700 transition-colors"
+                    >
+                      {skill}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Teams Section */}
+            {userTeams.length > 0 ? (
+              <div className="bg-white rounded-lg shadow-md p-4 md:p-6">
+                <h2 className="text-lg md:text-xl font-bold text-gray-900 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 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+                      <img src={team.banner || '/images/banner-imphnen.png'} alt={team.name} className="w-full h-24 object-cover" />
+                      <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" />}
+                          <div className="flex-1 min-w-0">
+                            <h3 className="font-bold text-gray-900 line-clamp-2">{team.name}</h3>
+                            <div className="text-sm text-gray-600 flex gap-2">
+                              <p className="truncate flex-1 min-w-0">📍 {team.city}</p>
+                              <p className="whitespace-nowrap shrink-0">👥 {team.members?.length || 0} members</p>
+                            </div>
+                          </div>
+                        </div>
+                        <p className="text-gray-600 text-sm line-clamp-2">{team.description}</p>
+                      </div>
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <div className="bg-white rounded-lg shadow-md p-4 md:p-6">
+                <h2 className="text-lg md:text-xl font-bold text-gray-900 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">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 rounded-lg shadow-md p-4 md:p-6">
+              <h3 className="text-base md:text-lg font-bold text-gray-900 mb-3 md:mb-4">Contact Information</h3>
+              <div className="space-y-3">
+                <div>
+                  <p className="text-sm text-gray-600">Email</p>
+                  <p className="text-gray-900 font-medium">{user.email}</p>
+                </div>
+                {user.location && (
+                  <div>
+                    <p className="text-sm text-gray-600">Location</p>
+                    <p className="text-gray-900 font-medium">{user.location}</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserProfilePage;
diff --git a/libs/service/src/hooks/teams/index.ts b/libs/service/src/hooks/teams/index.ts
index d70f6d3..cf3be09 100644
--- a/libs/service/src/hooks/teams/index.ts
+++ b/libs/service/src/hooks/teams/index.ts
@@ -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) {
@@ -691,3 +694,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,
+  });
+};
diff --git a/libs/service/src/hooks/users/index.ts b/libs/service/src/hooks/users/index.ts
index 476f730..75ab7c4 100644
--- a/libs/service/src/hooks/users/index.ts
+++ b/libs/service/src/hooks/users/index.ts
@@ -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,
+  });
+};
diff --git a/libs/service/src/schemas/teams/index.ts b/libs/service/src/schemas/teams/index.ts
index 056bb48..f465b04 100644
--- a/libs/service/src/schemas/teams/index.ts
+++ b/libs/service/src/schemas/teams/index.ts
@@ -76,6 +76,9 @@ export const userOnboardingSchema = z.object({
 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>;