diff --git a/mobile/.expo/types/router.d.ts b/mobile/.expo/types/router.d.ts
index 961123f3..1d7ea96f 100644
--- a/mobile/.expo/types/router.d.ts
+++ b/mobile/.expo/types/router.d.ts
@@ -6,7 +6,7 @@ export * from 'expo-router';
 declare module 'expo-router' {
   export namespace ExpoRouter {
     export interface __routes<T extends string = string> extends Record<string, unknown> {
-      StaticRoutes: `/` | `/(tabs)` | `/(tabs)/` | `/(tabs)/profile` | `/(tabs)/search` | `/_sitemap` | `/home` | `/login` | `/logout` | `/profile` | `/question/new` | `/search` | `/signup`;
+      StaticRoutes: `/` | `/(tabs)` | `/(tabs)/` | `/(tabs)/profile` | `/(tabs)/search` | `/_sitemap` | `/home` | `/login` | `/logout` | `/profile` | `/question/new` | `/search` | `/signup` | `/me` | `/me/bookmarks`;
       DynamicRoutes: `/question/${Router.SingleRoutePart<T>}` | `/question/${Router.SingleRoutePart<T>}/answer` | `/tags/${Router.SingleRoutePart<T>}` | `/users/${Router.SingleRoutePart<T>}`;
       DynamicRouteTemplate: `/question/[questionId]` | `/question/[questionId]/answer` | `/tags/[tagId]` | `/users/[userId]`;
     }
diff --git a/mobile/app/(tabs)/profile.tsx b/mobile/app/(tabs)/profile.tsx
index 34b72b56..812022f9 100644
--- a/mobile/app/(tabs)/profile.tsx
+++ b/mobile/app/(tabs)/profile.tsx
@@ -1,326 +1,5 @@
-import ErrorAlert from "@/components/ErrorAlert";
-import FollowUserButton from "@/components/FollowUserButton";
-import { FullscreenLoading } from "@/components/FullscreenLoading";
-import { QuestionCard } from "@/components/QuestionCard";
-import {
-  Button,
-  ButtonText,
-  HStack,
-  Icon,
-  Image,
-  Input,
-  InputField,
-  ScrollView,
-  Select,
-  SelectBackdrop,
-  SelectContent,
-  SelectDragIndicator,
-  SelectDragIndicatorWrapper,
-  SelectIcon,
-  SelectInput,
-  SelectItem,
-  SelectPortal,
-  SelectTrigger,
-  Text,
-  Textarea,
-  TextareaInput,
-  VStack,
-} from "@/components/ui";
-import { Menu, MenuItem, MenuItemLabel, MenuSeparator } from "@/components/ui/menu";
-
-import {
-  useGetUserProfile,
-  useUpdateUserProfile,
-} from "@/services/api/programmingForumComponents";
-import { ExperienceLevel } from "@/services/api/programmingForumSchemas";
-import useAuthStore from "@/services/auth";
-import { Link, router } from "expo-router";
-import { ChevronDownIcon, Plus, Bookmark, MenuIcon, LogOutIcon } from "lucide-react-native";
-import { useEffect, useState } from "react";
-import placeholderProfile from "@/assets/images/placeholder_profile.png";
+import UserProfile from "@/components/UserProfile";
 
 export default function Profile() {
   return <UserProfile userId="me" />;
 }
-
-export function UserProfile({ userId }: { userId: string }) {
-  const { selfProfile, fetchProfile } = useAuthStore();
-  const me = userId === "me" || userId === selfProfile?.id?.toString();
-  const [editing, setEditing] = useState(false);
-  const [activeTab, setActiveTab] = useState<"questions" | "answers">(
-    "questions"
-  );
-
-  const [country, setCountry] = useState("");
-  const [bio, setBio] = useState("");
-  const [experienceLevel, setExperienceLevel] =
-    useState<ExperienceLevel>("BEGINNER");
-
-  useEffect(() => {
-    if (!me) {
-      setEditing(false);
-    }
-  }, [me]);
-
-  const { isLoading, data, error, refetch } = useGetUserProfile(
-    {
-      pathParams: {
-        userId: me ? ("me" as unknown as number) : parseInt(userId || "0"),
-      },
-    },
-    {
-      enabled: me || !isNaN(Number(userId)),
-    }
-  );
-
-  const { mutateAsync, isPending } = useUpdateUserProfile({
-    onSuccess: () => {
-      fetchProfile();
-      refetch().then(() => {
-        setEditing(false);
-      });
-    },
-    onError: () => {
-      setEditing(false);
-    },
-  });
-
-  useEffect(() => {
-    if (data?.data) {
-      setCountry(data.data.country || "");
-      setBio(data.data.bio || "");
-      setExperienceLevel(data.data.experienceLevel || "BEGINNER");
-    }
-  }, [data?.data]);
-
-  if (!me && isNaN(Number(userId))) {
-    return <Text>Invalid user id</Text>;
-  }
-  if (isLoading) {
-    return <FullscreenLoading overlay />;
-  }
-  if (error) {
-    return <ErrorAlert error={error} />;
-  }
-
-  const profile = data!.data;
-
-  return (
-    <ScrollView contentContainerStyle={{ flexGrow: 1, padding: 8 }}>
-      <VStack space="md" className="px-6">
-        <HStack className="items-center justify-between mt-9">
-          <Text className="text-2xl font-bold">
-          {me ? "My Profile" : "Profile"}
-          </Text>
-
-          <Menu
-            trigger={({ ...triggerProps }) => {
-              return (
-                <Button {...triggerProps} variant="link">
-                  <Icon as={MenuIcon} size="xl" color="black" />
-                </Button>
-              
-              )
-            }}  
-          >
-            <MenuItem textValue="bookmark" onPress={() => router.push(`/bookmarks`)}>
-              <Icon as={Bookmark} size="md" color="black" />
-              <MenuItemLabel className="ml-2">Bookmarks</MenuItemLabel>
-            </MenuItem>
-
-            <MenuSeparator></MenuSeparator>
-
-            <MenuItem textValue="logout" onPress={() => router.push(`/logout`)}>
-              <Icon as={LogOutIcon} size="md" color="black" />
-              <MenuItemLabel className="ml-2">Logout</MenuItemLabel>
-            </MenuItem>
-            
-          </Menu>
-            
-        </HStack>
-
-
-        <HStack space="lg" className="items-center justify-between py-4">
-          <Image
-            source={profile.profilePicture ? {uri: profile.profilePicture} : placeholderProfile}
-            alt={`Profile picture of ${profile.username}`}
-            style={{ width: 96, height: 96, borderRadius: 48 }}
-          />
-          <HStack space="md" className="flex-1 justify-around">
-            <VStack className="items-center">
-              <Text className="font-bold">{profile.questionCount}</Text>
-              <Text className="text-sm text-gray-700">Questions</Text>
-            </VStack>
-            <VStack className="items-center">
-              <Text className="font-bold">{profile.answerCount}</Text>
-              <Text className="text-sm text-gray-700">Answers</Text>
-            </VStack>
-            <VStack className="items-center">
-              <Text className="font-bold">{profile.followersCount}</Text>
-              <Text className="text-sm text-gray-700">Followers</Text>
-            </VStack>
-            <VStack className="items-center">
-              <Text className="font-bold">{profile.followingCount}</Text>
-              <Text className="text-sm text-gray-700">Following</Text>
-            </VStack>
-          </HStack>
-        </HStack>
-
-        <VStack space="sm">
-          {editing ? (
-            <>
-              <Input
-                variant="outline"
-                size="md"
-                isDisabled={false}
-                isInvalid={false}
-                isReadOnly={false}
-              >
-                <InputField
-                  value={country}
-                  onChangeText={setCountry}
-                  placeholder="Country"
-                />
-              </Input>
-              <Textarea>
-                <TextareaInput
-                  autoComplete="off"
-                  value={bio}
-                  onChangeText={setBio}
-                  placeholder="Bio"
-                />
-              </Textarea>
-              <Select
-                selectedValue={experienceLevel}
-                onValueChange={(value) =>
-                  setExperienceLevel(value as ExperienceLevel)
-                }
-              >
-                <SelectTrigger variant="outline" size="md">
-                  <SelectInput placeholder="Experience Level" />
-                  <SelectIcon className="mr-3" as={ChevronDownIcon} />
-                </SelectTrigger>
-                <SelectPortal>
-                  <SelectBackdrop />
-                  <SelectContent>
-                    <SelectDragIndicatorWrapper>
-                      <SelectDragIndicator />
-                    </SelectDragIndicatorWrapper>
-                    <SelectItem label="Beginner" value="BEGINNER" />
-                    <SelectItem label="Intermediate" value="INTERMEDIATE" />
-                    <SelectItem label="Advanced" value="ADVANCED" />
-                  </SelectContent>
-                </SelectPortal>
-              </Select>
-            </>
-          ) : (
-            <>
-              <Text className="text-xl font-bold">{profile.username}</Text>
-              <Text
-                className={!profile.bio ? "text-gray-500" : "text-gray-800"}
-              >
-                {profile.bio ?? "Empty bio."}
-              </Text>
-              <Text>
-                Experience: {profile.experienceLevel?.toString() || "Unknown"}
-              </Text>
-            </>
-          )}
-
-          {me ? (
-            editing ? (
-              <Button
-                isDisabled={isPending}
-                onPress={() => {
-                  mutateAsync({
-                    pathParams: {
-                      userId: profile.id ?? 0,
-                    },
-                    body: {
-                      ...profile,
-                      country,
-                      bio,
-                      experienceLevel,
-                    },
-                  });
-                  console.log(profile);
-                }}
-              >
-                <ButtonText>{isPending ? "Saving..." : "Save"}</ButtonText>
-              </Button>
-            ) : (
-              <Button variant="outline" onPress={() => setEditing(true)}>
-                <ButtonText>Edit profile</ButtonText>
-              </Button>
-            )
-          ) : (
-            data?.data && <FollowUserButton profile={data?.data} />
-          )}
-        </VStack>
-        {/*
-        <HStack space="md">
-          <Button
-            variant={activeTab === "questions" ? "solid" : "outline"}
-            onPress={() => setActiveTab("questions")}
-          >
-            <ButtonText>Questions</ButtonText>
-          </Button>
-          <Button
-            variant={activeTab === "answers" ? "solid" : "outline"}
-            onPress={() => setActiveTab("answers")}
-          >
-            <ButtonText>Answers</ButtonText>
-          </Button>
-        </HStack> */}
-
-        {activeTab === "questions" ? (
-          <VStack space="md">
-            <HStack space="md" className="items-center">
-              <Text className="text-xl font-bold">Questions</Text>
-              {me && (
-                <Link href="/question/new" asChild>
-                  <Button
-                    size="sm"
-                    style={{ borderRadius: 9999, backgroundColor: "#ef4444" }}
-                  >
-                    <Plus color="white" />
-                  </Button>
-                </Link>
-              )}
-            </HStack>
-            <VStack space="md">
-              {profile?.questions?.map((question) => (
-                <QuestionCard
-                  key={question.id}
-                  id={String(question.id)}
-                  title={question.title}
-                  content={question.content}
-                  votes={question.likeCount}
-                  answerCount={question.commentCount}
-                  author={question.author}
-                />
-              ))}
-            </VStack>
-          </VStack>
-        ) : (
-          <VStack space="md">
-            <Text className="text-xl font-bold">Answers</Text>
-            <VStack space="md">
-              {profile?.answers?.map((answer) => (
-                <QuestionCard
-                  key={answer.id}
-                  id={String(answer.question?.id)}
-                  title={answer.question?.title || ""}
-                  content={answer.content}
-                  votes={answer.rating}
-                  answerCount={0}
-                  author={answer.author}
-                />
-              ))}
-            </VStack>
-          </VStack>
-        )}
-      </VStack>
-    </ScrollView>
-  );
-}
diff --git a/mobile/app/bookmarks.tsx b/mobile/app/me/bookmarks.tsx
similarity index 66%
rename from mobile/app/bookmarks.tsx
rename to mobile/app/me/bookmarks.tsx
index 7558f75c..b150ef04 100644
--- a/mobile/app/bookmarks.tsx
+++ b/mobile/app/me/bookmarks.tsx
@@ -1,6 +1,6 @@
 import ErrorAlert from "@/components/ErrorAlert";
 import { FullscreenLoading } from "@/components/FullscreenLoading";
-import { QuestionCard } from "@/components/QuestionCard";
+import { QuestionList } from "@/components/QuestionsList";
 import {
   Button,
   HStack,
@@ -55,25 +55,10 @@ export default function BookmarkedQuestionsPage() {
               <Text className="text-2xl font-bold">Bookmarked Questions</Text>
             </HStack>
 
-            <VStack className="mt-4 gap-4">
-              <View className="gap-4">
-                {questions
-                  .sort((a: QuestionSummary, b: QuestionSummary) =>
-                    a.createdAt < b.createdAt ? 1 : -1
-                  )
-                  .map((question: QuestionSummary) => (
-                    <QuestionCard
-                      key={question.id}
-                      id={String(question.id)}
-                      title={question.title}
-                      content={question.content}
-                      votes={question.likeCount}
-                      answerCount={question.commentCount}
-                      author={question.author}
-                    />
-                  ))}
-              </View>
-            </VStack>
+            <QuestionList 
+              questions={ questions as QuestionSummary[] }
+            />
+
           </View>
         </ScrollView>
       )}
diff --git a/mobile/app/tags/[tagId].tsx b/mobile/app/tags/[tagId].tsx
index 647b9fd7..48d99f4d 100644
--- a/mobile/app/tags/[tagId].tsx
+++ b/mobile/app/tags/[tagId].tsx
@@ -1,7 +1,7 @@
 import ErrorAlert from "@/components/ErrorAlert";
 import FollowTagButton from "@/components/FollowTagButton";
 import { FullscreenLoading } from "@/components/FullscreenLoading";
-import { QuestionList } from "@/components/QuestionsList";
+import { QuestionListSearch } from "@/components/QuestionsList";
 import {
   Button,
   ButtonGroup,
@@ -164,7 +164,7 @@ export default function TagPage() {
             </HStack>
 
 
-            <QuestionList 
+            <QuestionListSearch 
               searchQueryParams=""
               tagFilter={tag.tagId.toString()}
               {...(difficultyFilter ? { difficultyFilter } : {})}
diff --git a/mobile/app/users/[userId].tsx b/mobile/app/users/[userId].tsx
index 955e6a20..1ba25945 100644
--- a/mobile/app/users/[userId].tsx
+++ b/mobile/app/users/[userId].tsx
@@ -1,8 +1,7 @@
-import { Text } from "@/components/ui";
-import { View } from "react-native";
+import UserProfile from "@/components/UserProfile";
+import { useLocalSearchParams } from "expo-router";
 
-export default function User() {
-  return <View>
-    <Text>User</Text>
-  </View>
-}
+export default function ProfilePage() {
+  const { userId } = useLocalSearchParams<{ userId: string }>();
+  return <UserProfile userId={userId} />;
+}
\ No newline at end of file
diff --git a/mobile/components/Feed.tsx b/mobile/components/Feed.tsx
index 1e213b43..77ffaad4 100644
--- a/mobile/components/Feed.tsx
+++ b/mobile/components/Feed.tsx
@@ -1,7 +1,6 @@
 import { TagList } from "@/components/TagList";
 import { Divider, Text, VStack } from "@/components/ui";
-import { QuestionList } from "./QuestionsList";
-import { Divide } from "lucide-react-native";
+import { QuestionListSearch } from "./QuestionsList";
 
 export const Feed = () => {
 
@@ -11,7 +10,7 @@ export const Feed = () => {
       <TagList searchQueryParams="" pagesize={3} />
       <Divider />
       <Text className="text-2xl font-bold">Latest Questions</Text>
-      <QuestionList pageSize={3} />
+      <QuestionListSearch pageSize={3} />
     </VStack>
   );
 };
diff --git a/mobile/components/QuestionCard.tsx b/mobile/components/QuestionCard.tsx
index c46b20e9..a8009d7e 100644
--- a/mobile/components/QuestionCard.tsx
+++ b/mobile/components/QuestionCard.tsx
@@ -89,16 +89,20 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
           {content}
         </Text>
         <HStack className="flex flex-row gap-3 text-xs text-gray-700 justify-center items-center">
-          <View className="flex items-center gap-1">
-            <Star className={`h-4 w-4 ${highlighted ? "text-blue-600" : ""}`} />
-            <Text>{votes} votes</Text>
-          </View>
-          <View className="flex items-center gap-1">
-            <MessageSquare
-              className={`h-4 w-4 ${highlighted ? "text-blue-600" : ""}`}
-            />
-            <Text>{answerCount} answers</Text>
-          </View>
+          {votes !== undefined && (  
+            <View className="flex items-center gap-1">
+              <Star className={`h-4 w-4 ${highlighted ? "text-blue-600" : ""}`} />
+              <Text>{votes} votes</Text>
+            </View>
+            )}
+          {answerCount !== undefined && (
+            <View className="flex items-center gap-1">
+              <MessageSquare
+                className={`h-4 w-4 ${highlighted ? "text-blue-600" : ""}`}
+              />
+              <Text>{answerCount} answers</Text>
+            </View>
+          )}
           {difficulty && (
             <View className="flex items-center gap-1">
               <StarsIcon className="h-4 w-4" />
diff --git a/mobile/components/QuestionsList.tsx b/mobile/components/QuestionsList.tsx
index c373469f..66970b50 100644
--- a/mobile/components/QuestionsList.tsx
+++ b/mobile/components/QuestionsList.tsx
@@ -6,8 +6,33 @@ import {
   useSearchQuestions,
   SearchQuestionsResponse,
 } from "@/services/api/programmingForumComponents";
+import { QuestionSummary } from "@/services/api/programmingForumSchemas";
 
 interface QuestionListProps {
+  questions: QuestionSummary[];
+}
+
+export const QuestionList: React.FC<QuestionListProps> = ({ questions }) => {
+  return (
+    <View className="mt-4 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
+      {questions.map((question) => (
+        <QuestionCard
+          key={question.id}
+          id={String(question.id)}
+          title={question.title}
+          content={question.content}
+          votes={question.upvoteCount + question.downvoteCount}
+          answerCount={question.answerCount}
+          author={question.author}
+          difficulty={question.difficulty}
+          highlighted={question.difficulty === "EASY"}
+        />
+      ))}
+    </View>
+  );
+}
+
+interface QuestionListSearchProps {
   searchQueryParams?: string;
   pageSize?: number;
   difficultyFilter?: "EASY" | "MEDIUM" | "HARD";
@@ -15,7 +40,7 @@ interface QuestionListProps {
   sortBy?: "RECENT" | "TOP_RATED";
 }
 
-export const QuestionList: React.FC<QuestionListProps> = ({
+export const QuestionListSearch: React.FC<QuestionListSearchProps> = ({
   searchQueryParams = "",
   pageSize = 10,
   difficultyFilter,
diff --git a/mobile/components/UserProfile.tsx b/mobile/components/UserProfile.tsx
new file mode 100644
index 00000000..26b1eff9
--- /dev/null
+++ b/mobile/components/UserProfile.tsx
@@ -0,0 +1,346 @@
+import ErrorAlert from "@/components/ErrorAlert";
+import FollowUserButton from "@/components/FollowUserButton";
+import { FullscreenLoading } from "@/components/FullscreenLoading";
+import {
+  Badge,
+  BadgeText,
+  Button,
+  ButtonText,
+  HStack,
+  Icon,
+  Image,
+  Input,
+  InputField,
+  Pressable,
+  ScrollView,
+  Select,
+  SelectBackdrop,
+  SelectContent,
+  SelectDragIndicator,
+  SelectDragIndicatorWrapper,
+  SelectIcon,
+  SelectInput,
+  SelectItem,
+  SelectPortal,
+  SelectTrigger,
+  Text,
+  Textarea,
+  TextareaInput,
+  VStack,
+} from "@/components/ui";
+import { Menu, MenuItem, MenuItemLabel, MenuSeparator } from "@/components/ui/menu";
+
+import {
+  useGetUserProfile,
+  useUpdateUserProfile,
+} from "@/services/api/programmingForumComponents";
+import { ExperienceLevel, QuestionSummary } from "@/services/api/programmingForumSchemas";
+import useAuthStore from "@/services/auth";
+import { Link, router } from "expo-router";
+import { ChevronDownIcon, Plus, Bookmark, MenuIcon, LogOutIcon, ArrowLeftIcon } from "lucide-react-native";
+import { useEffect, useState } from "react";
+import placeholderProfile from "@/assets/images/placeholder_profile.png";
+import { QuestionList } from "@/components/QuestionsList";
+
+export default function UserProfile({ userId }: { userId: string }) {
+  const { selfProfile, fetchProfile } = useAuthStore();
+  const me = userId === "me" || userId === selfProfile?.id?.toString();
+  const [editing, setEditing] = useState(false);
+  const [activeTab, setActiveTab] = useState<"questions" | "answers">(
+    "questions"
+  );
+
+  const [country, setCountry] = useState("");
+  const [bio, setBio] = useState("");
+  const [experienceLevel, setExperienceLevel] =
+    useState<ExperienceLevel>("BEGINNER");
+
+  useEffect(() => {
+    if (!me) {
+      setEditing(false);
+    }
+  }, [me]);
+
+  const { isLoading, data, error, refetch } = useGetUserProfile(
+    {
+      pathParams: {
+        userId: me ? ("me" as unknown as number) : parseInt(userId || "0"),
+      },
+    },
+    {
+      enabled: me || !isNaN(Number(userId)),
+    }
+  );
+
+  const { mutateAsync, isPending } = useUpdateUserProfile({
+    onSuccess: () => {
+      fetchProfile();
+      refetch().then(() => {
+        setEditing(false);
+      });
+    },
+    onError: () => {
+      setEditing(false);
+    },
+  });
+
+  useEffect(() => {
+    if (data?.data) {
+      setCountry(data.data.country || "");
+      setBio(data.data.bio || "");
+      setExperienceLevel(data.data.experienceLevel || "BEGINNER");
+    }
+  }, [data?.data]);
+
+  if (!me && isNaN(Number(userId))) {
+    return <Text>Invalid user id</Text>;
+  }
+  if (isLoading) {
+    return <FullscreenLoading overlay />;
+  }
+  if (error) {
+    return <ErrorAlert error={error} />;
+  }
+
+  const profile = data!.data;
+
+  return (
+    <ScrollView contentContainerStyle={{ flexGrow: 1, padding: 8 }}>
+      <VStack space="md" className="px-6">
+        <HStack className="items-center justify-between mt-9">
+          <Button
+            onPress={() => router.back()}
+            className="self-start my-3"
+            variant={"outline"}
+            size="sm"
+          >
+            <Icon as={ArrowLeftIcon} />
+          </Button>
+          <Text className="text-2xl font-bold">
+          {me ? "My Profile" : profile.username +  "'s Profile" }
+          </Text>
+
+          {me ? (
+            <Menu
+              trigger={({ ...triggerProps }) => {
+                return (
+                  <Button {...triggerProps} variant="link">
+                    <Icon as={MenuIcon} size="xl" color="black" />
+                  </Button>
+                
+                )
+              }}  
+            >
+              <MenuItem textValue="bookmark" onPress={() => router.push(`me/bookmarks`)}>
+                <Icon as={Bookmark} size="md" color="black" />
+                <MenuItemLabel className="ml-2">Bookmarks</MenuItemLabel>
+              </MenuItem>
+
+              <MenuSeparator></MenuSeparator>
+
+              <MenuItem textValue="logout" onPress={() => router.push(`/logout`)}>
+                <Icon as={LogOutIcon} size="md" color="black" />
+                <MenuItemLabel className="ml-2">Logout</MenuItemLabel>
+              </MenuItem>
+              
+            </Menu>) : 
+              <Text></Text>
+          }
+            
+        </HStack>
+
+
+        <HStack space="lg" className="items-center justify-between py-2">
+          <Image
+            source={profile.profilePicture ? {uri: profile.profilePicture} : placeholderProfile}
+            alt={`Profile picture of ${profile.username}`}
+            style={{ width: 96, height: 96, borderRadius: 48 }}
+          />
+          <HStack space="md" className="flex-1 justify-around">
+            <VStack className="items-center">
+              <Text className="font-bold">{profile.questionCount}</Text>
+              <Text className="text-sm text-gray-700">Questions</Text>
+            </VStack>
+            <VStack className="items-center">
+              <Text className="font-bold">{profile.answerCount}</Text>
+              <Text className="text-sm text-gray-700">Answers</Text>
+            </VStack>
+            <VStack className="items-center">
+              <Text className="font-bold">{profile.followersCount}</Text>
+              <Text className="text-sm text-gray-700">Followers</Text>
+            </VStack>
+            <VStack className="items-center">
+              <Text className="font-bold">{profile.followingCount}</Text>
+              <Text className="text-sm text-gray-700">Following</Text>
+            </VStack>
+          </HStack>
+        </HStack>
+
+        <VStack space="xs">
+          {editing ? (
+            <>
+              <Input
+                variant="outline"
+                size="md"
+                isDisabled={false}
+                isInvalid={false}
+                isReadOnly={false}
+              >
+                <InputField
+                  value={country}
+                  onChangeText={setCountry}
+                  placeholder="Country"
+                />
+              </Input>
+              <Textarea>
+                <TextareaInput
+                  autoComplete="off"
+                  value={bio}
+                  onChangeText={setBio}
+                  placeholder="Bio"
+                />
+              </Textarea>
+              <Select
+                selectedValue={experienceLevel}
+                onValueChange={(value) =>
+                  setExperienceLevel(value as ExperienceLevel)
+                }
+              >
+                <SelectTrigger variant="outline" size="md">
+                  <SelectInput placeholder="Experience Level" />
+                  <SelectIcon className="mr-3" as={ChevronDownIcon} />
+                </SelectTrigger>
+                <SelectPortal>
+                  <SelectBackdrop />
+                  <SelectContent>
+                    <SelectDragIndicatorWrapper>
+                      <SelectDragIndicator />
+                    </SelectDragIndicatorWrapper>
+                    <SelectItem label="Beginner" value="BEGINNER" />
+                    <SelectItem label="Intermediate" value="INTERMEDIATE" />
+                    <SelectItem label="Advanced" value="ADVANCED" />
+                  </SelectContent>
+                </SelectPortal>
+              </Select>
+            </>
+          ) : (
+            <>
+              <Text className="text-xl font-bold">{profile.firstName + " " + profile.lastName}</Text>
+              <Text
+                className={!profile.bio ? "text-gray-500" : "text-gray-800"}
+              >
+                {profile.bio ?? "Empty bio."}
+              </Text>
+              <Text>
+                Experience: {profile.experienceLevel?.toString() || "Unknown"}
+              </Text>
+              <Text>
+                Reputation Points:{" "}
+                <Text
+                  className={
+                    (profile.reputationPoints ?? 0) > 0 ? "text-green-700" : "text-gray-500"
+                  }
+                >
+                  {(profile.reputationPoints ?? 0) > 0 ? `+${profile.reputationPoints ?? 0}` : profile.reputationPoints ?? 0}
+                </Text>
+              </Text>
+
+              <ScrollView horizontal={true}>
+                {profile.followedTags?.map((tag) => (
+                  <Pressable key={tag.id} onPress={() => router.push(`/tags/${tag.id}`)}>
+                  <Badge variant="outline" size="lg" className="bg-neutral-100 my-2 mr-1">
+                    <BadgeText>{tag.name}</BadgeText>
+                  </Badge>
+                  </Pressable>
+                ))}
+              </ScrollView>
+
+            </>
+          )}
+
+          {me ? (
+            editing ? (
+              <Button
+                isDisabled={isPending}
+                onPress={() => {
+                  mutateAsync({
+                    pathParams: {
+                      userId: profile.id ?? 0,
+                    },
+                    body: {
+                      ...profile,
+                      country,
+                      bio,
+                      experienceLevel,
+                    },
+                  });
+                  console.log(profile);
+                }}
+              >
+                <ButtonText>{isPending ? "Saving..." : "Save"}</ButtonText>
+              </Button>
+            ) : (
+              <Button variant="outline" onPress={() => setEditing(true)}>
+                <ButtonText>Edit profile</ButtonText>
+              </Button>
+            )
+          ) : (
+            profile && <FollowUserButton profile={{id: Number(userId), selfFollowing: profile.selfFollowing}} />
+          )}
+        </VStack>
+        {
+        <HStack space="md">
+          <Button
+            variant={activeTab === "questions" ? "solid" : "outline"}
+            onPress={() => setActiveTab("questions")}
+          >
+            <ButtonText>Questions</ButtonText>
+          </Button>
+          <Button
+            variant={activeTab === "answers" ? "solid" : "outline"}
+            onPress={() => setActiveTab("answers")}
+          >
+            <ButtonText>Answers</ButtonText>
+          </Button>
+        </HStack> }
+
+        {activeTab === "questions" ? (
+          <VStack space="md">
+            <HStack space="md" className="items-center">
+              <Text className="text-xl font-bold">Questions</Text>
+              {me && (
+                <Link href="/question/new" asChild>
+                  <Button
+                    size="sm"
+                    style={{ borderRadius: 9999, backgroundColor: "#ef4444" }}
+                  >
+                    <Plus color="white" />
+                  </Button>
+                </Link>
+              )}
+            </HStack>
+            <QuestionList 
+              questions={ profile.questions?.sort((a, b) => {
+                  return (b.upvoteCount - b.downvoteCount) - (a.upvoteCount - a.downvoteCount);
+                }) || []
+              }
+                />
+          </VStack>
+        ) : (
+          <VStack space="md">
+            <Text className="text-xl font-bold">Answers</Text>
+            <QuestionList 
+              questions={ profile.answers?.map((answer) => ({
+                id: answer.question.id ?? 0,
+                title: answer.question.title ?? "",
+                content: answer.content ?? "",
+                upvoteCount: answer.upvoteCount,
+                downvoteCount: answer.downvoteCount,
+              } as QuestionSummary)) || [] }
+            />
+          </VStack>
+        )}
+      </VStack>
+    </ScrollView>
+  );
+}