diff --git a/app/(tabs)/home.tsx b/app/(tabs)/home.tsx
index e9d9502..1ac4897 100644
--- a/app/(tabs)/home.tsx
+++ b/app/(tabs)/home.tsx
@@ -1,14 +1,17 @@
-import { IconSymbol } from "@/components/ui/IconSymbol";
-import { getFoods, insertGenAIResult } from "@/services/data/foods";
-import { uploadImageToSupabase } from "@/services/data/imageUpload";
-import { callGenAIonImage } from "@/services/gemini";
-import { supabase } from "@/services/supabase";
-import { Feather, FontAwesome, Ionicons } from "@expo/vector-icons";
-import { useQuery } from "@tanstack/react-query";
-import * as FileSystem from "expo-file-system";
-import * as ImagePicker from "expo-image-picker";
-import { router } from "expo-router";
-import React, { useMemo, useState } from "react";
+"use client"
+
+import { IconSymbol } from "@/components/ui/IconSymbol"
+import { getFoods, insertGenAIResult } from "@/services/data/foods"
+import { uploadImageToSupabase } from "@/services/data/imageUpload"
+import { getProfile } from "@/services/data/profile"
+import { callGenAIonImage } from "@/services/gemini"
+import { supabase } from "@/services/supabase"
+import { Feather, FontAwesome, Ionicons } from "@expo/vector-icons"
+import { useQuery } from "@tanstack/react-query"
+import * as FileSystem from "expo-file-system"
+import * as ImagePicker from "expo-image-picker"
+import { router } from "expo-router"
+import { useMemo, useState, useEffect } from "react"
 import {
   Alert,
   Image,
@@ -19,71 +22,104 @@ import {
   TextInput,
   TouchableOpacity,
   View,
-} from "react-native";
+  ActivityIndicator,
+} from "react-native"
 
 const useFoodsQuery = () => {
   return useQuery({
     queryKey: ["highlight-foods"],
     queryFn: async () => {
-      const { data, error } = await getFoods(undefined, true, undefined, 4);
-      if (error) throw error;
-      return data || [];
+      const { data, error } = await getFoods(undefined, true, undefined, 4)
+      if (error) throw error
+      return data || []
     },
     staleTime: 1000 * 60 * 5,
-  });
-};
+  })
+}
 
-const runImagePipeline = async (
-  imageBase64: string,
-  imageType: string,
-  userId: string
-) => {
-  const imageUri = await uploadImageToSupabase(imageBase64, imageType, userId);
-  const genAIResult = await callGenAIonImage(imageUri);
-  if (genAIResult.error) throw genAIResult.error;
-  const { data: genAIResultData } = genAIResult;
-  if (!genAIResultData) throw new Error("GenAI result is null");
-  await insertGenAIResult(genAIResultData, userId, imageUri);
-};
+const useUserProfile = () => {
+  const [userId, setUserId] = useState<string | null>(null)
+  const [isLoadingUserId, setIsLoadingUserId] = useState(true)
 
-const processImage = async (
-  asset: ImagePicker.ImagePickerAsset,
-  userId: string
-) => {
+  // Get current user ID
+  useEffect(() => {
+    const fetchUserId = async () => {
+      try {
+        const { data, error } = await supabase.auth.getUser()
+        if (error) throw error
+        setUserId(data?.user?.id || null)
+      } catch (error) {
+        console.error("Error fetching user:", error)
+      } finally {
+        setIsLoadingUserId(false)
+      }
+    }
+
+    fetchUserId()
+  }, [])
+
+  // Fetch user profile data
+  const {
+    data: profileData,
+    isLoading: isLoadingProfile,
+    error: profileError,
+  } = useQuery({
+    queryKey: ["profile", userId],
+    queryFn: async () => {
+      if (!userId) throw new Error("No user id")
+      return getProfile(userId)
+    },
+    enabled: !!userId,
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  })
+
+  return {
+    userId,
+    profileData: profileData?.data,
+    isLoading: isLoadingUserId || isLoadingProfile,
+    error: profileError,
+  }
+}
+
+const runImagePipeline = async (imageBase64: string, imageType: string, userId: string) => {
+  const imageUri = await uploadImageToSupabase(imageBase64, imageType, userId)
+  const genAIResult = await callGenAIonImage(imageUri)
+  if (genAIResult.error) throw genAIResult.error
+  const { data: genAIResultData } = genAIResult
+  if (!genAIResultData) throw new Error("GenAI result is null")
+  await insertGenAIResult(genAIResultData, userId, imageUri)
+}
+
+const processImage = async (asset: ImagePicker.ImagePickerAsset, userId: string) => {
   const base64 = await FileSystem.readAsStringAsync(asset.uri, {
     encoding: "base64",
-  });
-  const imageType = asset.mimeType || "image/jpeg";
-  await runImagePipeline(base64, imageType, userId);
-};
+  })
+  const imageType = asset.mimeType || "image/jpeg"
+  await runImagePipeline(base64, imageType, userId)
+}
 
 const navigateToFoodDetail = (foodId: string) => {
-  router.push({ pathname: "/recipe-detail", params: { id: foodId } });
-};
+  router.push({ pathname: "/recipe-detail", params: { id: foodId } })
+}
 
 const handleImageSelection = async (
-  pickerFn:
-    | typeof ImagePicker.launchCameraAsync
-    | typeof ImagePicker.launchImageLibraryAsync
+  pickerFn: typeof ImagePicker.launchCameraAsync | typeof ImagePicker.launchImageLibraryAsync,
 ) => {
   const result = await pickerFn({
-    mediaTypes: ["images"],
+    mediaTypes: ImagePicker.MediaTypeOptions.Images,
     allowsEditing: true,
     aspect: [1, 1],
     quality: 1,
-  });
+  })
 
   if (!result.canceled) {
     try {
-      const { data, error } = await supabase.auth.getUser();
-      if (error || !data?.user?.id) throw new Error("Cannot get user id");
-      const userId = data.user.id;
-      await processImage(result.assets[0], userId);
+      const { data, error } = await supabase.auth.getUser()
+      if (error || !data?.user?.id) throw new Error("Cannot get user id")
+      const userId = data.user.id
+      await processImage(result.assets[0], userId)
     } catch (err) {
-      Alert.alert(
-        "Image Processing Failed",
-        (err as Error).message || "Unknown error"
-      );
+      Alert.alert("Image Processing Failed", (err as Error).message || "Unknown error")
     }
     router.push({
       pathname: "/recipe-detail",
@@ -91,28 +127,38 @@ const handleImageSelection = async (
         title: "My New Recipe",
         image: result.assets[0].uri,
       },
-    });
+    })
   }
-};
+}
 
 export default function HomeScreen() {
-  const [searchQuery, setSearchQuery] = useState("");
-  const { data: foodsData = [], isLoading, error } = useFoodsQuery();
+  const [searchQuery, setSearchQuery] = useState("")
+  const { data: foodsData = [], isLoading: isLoadingFoods, error: foodsError } = useFoodsQuery()
+  const { profileData, isLoading: isLoadingProfile, userId } = useUserProfile()
 
   const filteredFoods = useMemo(() => {
     return searchQuery
-      ? foodsData.filter((food) =>
-          food.name.toLowerCase().includes(searchQuery.toLowerCase())
-        )
-      : foodsData;
-  }, [foodsData, searchQuery]);
+      ? foodsData.filter((food) => food.name.toLowerCase().includes(searchQuery.toLowerCase()))
+      : foodsData
+  }, [foodsData, searchQuery])
+
+  // Get username or fallback to a default greeting
+  const username = profileData?.username || profileData?.full_name || "Chef"
+  const greeting = `Hi! ${username}`
 
   return (
     <SafeAreaView className="flex-1 bg-white">
       <StatusBar barStyle="dark-content" />
 
-      <View className="flex-row justify-between items-center px-6 pt-4 pb-2">
-        <Text className="text-3xl font-bold">Hi! Mr. Chef</Text>
+      <View className="flex-row items-center justify-between px-6 pt-4 pb-2">
+        {isLoadingProfile ? (
+          <View className="flex-row items-center">
+            <Text className="mr-2 text-3xl font-bold">Hi!</Text>
+            <ActivityIndicator size="small" color="#bb0718" />
+          </View>
+        ) : (
+          <Text className="text-3xl font-bold">{greeting}</Text>
+        )}
         <View className="bg-[#ffd60a] p-3 rounded-lg">
           <Ionicons name="settings-outline" size={24} color="black" />
         </View>
@@ -123,132 +169,105 @@ export default function HomeScreen() {
         showsVerticalScrollIndicator={false}
         contentContainerStyle={{ paddingBottom: 100 }}
       >
-        <View className="px-6 mb-6">
-          <View className="flex-row items-center mb-4">
-            <Text className="text-2xl font-bold mr-2">Show your dishes</Text>
-            <Feather name="wifi" size={20} color="black" />
-          </View>
+        {/* Main content container with consistent padding */}
+        <View className="px-6">
+          {/* "Show your dishes" section */}
+          <View className="mb-6">
+            <View className="flex-row items-center mb-4">
+              <Text className="mr-2 text-2xl font-bold">Show your dishes</Text>
+              <Feather name="wifi" size={20} color="black" />
+            </View>
 
-          <View className="bg-white border border-gray-300 rounded-full mb-6 flex-row items-center px-4 py-3">
-            <TextInput
-              className="flex-1"
-              placeholder="Search..."
-              value={searchQuery}
-              onChangeText={setSearchQuery}
-            />
-            <View className="bg-[#ffd60a] p-2 rounded-full">
-              <Feather name="send" size={20} color="black" />
+            <View className="flex-row items-center px-4 py-3 mb-6 bg-white border border-gray-300 rounded-full">
+              <TextInput className="flex-1" placeholder="Search..." value={searchQuery} onChangeText={setSearchQuery} />
+              <View className="bg-[#ffd60a] p-2 rounded-full">
+                <Feather name="send" size={20} color="black" />
+              </View>
             </View>
           </View>
 
-          <View className="flex-row justify-between">
-            <TouchableOpacity
-              className="bg-[#ffd60a] p-4 rounded-xl w-[48%]"
-              onPress={async () => {
-                const { status } =
-                  await ImagePicker.requestCameraPermissionsAsync();
-                if (status !== "granted") {
-                  Alert.alert(
-                    "Permission needed",
-                    "Please grant camera permissions."
-                  );
-                  return;
-                }
-                await handleImageSelection(ImagePicker.launchCameraAsync);
-              }}
-            >
-              <View className="items-center">
-                <FontAwesome name="camera" size={24} color="black" />
-                <Text className="text-lg font-bold mt-2">From Camera</Text>
-                <Text className="text-sm text-gray-700">
-                  Straight from Camera
-                </Text>
-              </View>
-            </TouchableOpacity>
-            <TouchableOpacity
-              className="bg-[#f9be25] p-4 rounded-xl w-[48%]"
-              onPress={async () => {
-                const { status } =
-                  await ImagePicker.requestMediaLibraryPermissionsAsync();
-                if (status !== "granted") {
-                  Alert.alert(
-                    "Permission needed",
-                    "Please grant gallery permissions."
-                  );
-                  return;
-                }
-                await handleImageSelection(ImagePicker.launchImageLibraryAsync);
-              }}
-            >
-              <View className="items-center">
-                <Feather name="image" size={24} color="black" />
-                <Text className="text-lg font-bold mt-2">From Gallery</Text>
-                <Text className="text-sm text-gray-700">
-                  Straight from Gallery
-                </Text>
-              </View>
-            </TouchableOpacity>
+          {/* Upload feature section */}
+          <View className="mb-8">
+            <View className="flex-row justify-between">
+              <TouchableOpacity
+                className="bg-[#ffd60a] p-4 rounded-xl w-[48%]"
+                onPress={async () => {
+                  const { status } = await ImagePicker.requestCameraPermissionsAsync()
+                  if (status !== "granted") {
+                    Alert.alert("Permission needed", "Please grant camera permissions.")
+                    return
+                  }
+                  await handleImageSelection(ImagePicker.launchCameraAsync)
+                }}
+              >
+                <View className="items-center">
+                  <FontAwesome name="camera" size={24} color="black" />
+                  <Text className="mt-2 text-lg font-bold">From Camera</Text>
+                  <Text className="text-sm text-gray-700">Straight from Camera</Text>
+                </View>
+              </TouchableOpacity>
+              <TouchableOpacity
+                className="bg-[#f9be25] p-4 rounded-xl w-[48%]"
+                onPress={async () => {
+                  const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync()
+                  if (status !== "granted") {
+                    Alert.alert("Permission needed", "Please grant gallery permissions.")
+                    return
+                  }
+                  await handleImageSelection(ImagePicker.launchImageLibraryAsync)
+                }}
+              >
+                <View className="items-center">
+                  <Feather name="image" size={24} color="black" />
+                  <Text className="mt-2 text-lg font-bold">From Gallery</Text>
+                  <Text className="text-sm text-gray-700">Straight from Gallery</Text>
+                </View>
+              </TouchableOpacity>
+            </View>
           </View>
 
-          <View className="px-6 mb-6">
+          {/* Highlights section */}
+          <View className="mb-8">
             <View className="flex-row items-center mb-4">
-              <Text className="text-2xl font-bold mr-2">Highlights</Text>
+              <Text className="mr-2 text-2xl font-bold">Highlights</Text>
               <Ionicons name="star-outline" size={20} color="#bb0718" />
             </View>
-            {isLoading ? (
-              <Text className="text-center text-gray-500">
-                Loading highlights...
-              </Text>
-            ) : error ? (
-              <Text className="text-center text-red-600">
-                Failed to load highlights
-              </Text>
+            {isLoadingFoods ? (
+              <Text className="text-center text-gray-500">Loading highlights...</Text>
+            ) : foodsError ? (
+              <Text className="text-center text-red-600">Failed to load highlights</Text>
             ) : filteredFoods.length === 0 ? (
-              <Text className="text-center text-gray-400">
-                No highlights available
-              </Text>
+              <Text className="text-center text-gray-400">No highlights available</Text>
             ) : (
               <View className="flex-row justify-between">
                 {filteredFoods.map((food, idx) => (
                   <TouchableOpacity
                     key={food.id}
-                    className="bg-white rounded-xl shadow-md flex-1 mr-4"
+                    className="flex-1 mr-4 bg-white shadow-sm rounded-xl"
                     style={{
                       marginRight: idx === filteredFoods.length - 1 ? 0 : 12,
                     }}
                     onPress={() => navigateToFoodDetail(food.id)}
                   >
                     {food.image_url ? (
-                      <Image
-                        source={{ uri: food.image_url }}
-                        className="w-full h-32 rounded-t-xl"
-                        resizeMode="cover"
-                      />
+                      <Image source={{ uri: food.image_url }} className="w-full h-32 rounded-t-xl" resizeMode="cover" />
                     ) : (
-                      <View className="w-full h-32 rounded-t-xl bg-gray-200 items-center justify-center">
+                      <View className="items-center justify-center w-full h-32 bg-gray-200 rounded-t-xl">
                         <Text className="text-gray-400">No Image</Text>
                       </View>
                     )}
-                    <View className="flex-1 p-3 justify-between">
-                      <Text
-                        className="text-base font-bold text-[#333] mb-1"
-                        numberOfLines={1}
-                      >
+                    <View className="justify-between flex-1 p-3">
+                      <Text className="text-base font-bold text-[#333] mb-1" numberOfLines={1}>
                         {food.name}
                       </Text>
-                      <Text
-                        className="text-sm text-[#666] mb-2"
-                        numberOfLines={1}
-                      >
+                      <Text className="text-sm text-[#666] mb-2" numberOfLines={1}>
                         {food.description || "No description"}
                       </Text>
                       <View className="flex-row justify-between">
                         <View className="flex-row items-center">
                           <IconSymbol name="clock" size={12} color="#666" />
                           <Text className="text-xs text-[#666] ml-1">
-                            {food.time_to_cook_minutes
-                              ? `${food.time_to_cook_minutes} min`
-                              : "-"}
+                            {food.time_to_cook_minutes ? `${food.time_to_cook_minutes} min` : "-"}
                           </Text>
                         </View>
                       </View>
@@ -259,9 +278,10 @@ export default function HomeScreen() {
             )}
           </View>
         </View>
+
         {/* Extra space at bottom */}
         <View className="h-20"></View>
       </ScrollView>
     </SafeAreaView>
-  );
+  )
 }
diff --git a/app/(tabs)/profile.tsx b/app/(tabs)/profile.tsx
index 5332c71..9c3be35 100644
--- a/app/(tabs)/profile.tsx
+++ b/app/(tabs)/profile.tsx
@@ -6,7 +6,7 @@ import { getBookmarkedPosts } from "@/services/data/bookmarks"
 import { getLikedPosts } from "@/services/data/likes"
 import { getProfile, updateProfile } from "@/services/data/profile"
 import { supabase } from "@/services/supabase"
-import { useIsFocused, useNavigation } from "@react-navigation/native"
+import { useIsFocused } from "@react-navigation/native"
 import { useQuery, useQueryClient } from "@tanstack/react-query"
 import * as ImagePicker from "expo-image-picker"
 import { useEffect, useState } from "react"
@@ -23,6 +23,7 @@ import {
 } from "react-native"
 import { SafeAreaView } from "react-native-safe-area-context"
 import uuid from "react-native-uuid"
+import { router } from "expo-router"
 
 // Define the Food type based on your database structure
 type Food = {
@@ -44,7 +45,6 @@ export default function ProfileScreen() {
   const { isAuthenticated } = useAuth()
   const isFocused = useIsFocused()
   const queryClient = useQueryClient()
-  const navigation = useNavigation()
 
   const {
     data: userData,
@@ -125,10 +125,9 @@ export default function ProfileScreen() {
     staleTime: 1000 * 60, // 1 minute
   })
 
-  // Navigate to post detail
+  // Navigate to post detail using Expo Router instead of navigation API
   const handleFoodPress = (foodId: number) => {
-    // @ts-ignore - Navigation typing might be different in your app
-    navigation.navigate("post-detail", { id: foodId })
+    router.push(`/post-detail/${foodId}`)
   }
 
   // Refetch data when tab changes
@@ -237,7 +236,7 @@ export default function ProfileScreen() {
 
   if (isUserLoading) {
     return (
-      <SafeAreaView className="flex-1 justify-center items-center bg-white">
+      <SafeAreaView className="items-center justify-center flex-1 bg-white">
         <ActivityIndicator size="large" color="#bb0718" />
       </SafeAreaView>
     )
@@ -245,8 +244,8 @@ export default function ProfileScreen() {
 
   if (userError) {
     return (
-      <SafeAreaView className="flex-1 justify-center items-center bg-white px-4">
-        <Text className="text-red-600 font-bold text-center">{userError.message || "Failed to load user data."}</Text>
+      <SafeAreaView className="items-center justify-center flex-1 px-4 bg-white">
+        <Text className="font-bold text-center text-red-600">{userError.message || "Failed to load user data."}</Text>
       </SafeAreaView>
     )
   }
@@ -268,12 +267,12 @@ export default function ProfileScreen() {
           {isLoading ? (
             <ActivityIndicator size="small" color="#bb0718" />
           ) : error ? (
-            <Text className="text-red-600 font-bold mb-3">{error.message || error.toString()}</Text>
+            <Text className="mb-3 font-bold text-red-600">{error.message || error.toString()}</Text>
           ) : (
-            <Text className="text-xl font-bold mb-3">{profileData?.data?.username ?? "-"}</Text>
+            <Text className="mb-3 text-xl font-bold">{profileData?.data?.username ?? "-"}</Text>
           )}
           <TouchableOpacity
-            className="bg-red-600 py-2 px-10 rounded-lg"
+            className="px-10 py-2 bg-red-600 rounded-lg"
             onPress={() => {
               setEditUsername(profileData?.data?.username ?? "")
               setEditImage(profileData?.data?.avatar_url ?? null)
@@ -281,49 +280,49 @@ export default function ProfileScreen() {
               setModalVisible(true)
             }}
           >
-            <Text className="text-white font-bold">Edit</Text>
+            <Text className="font-bold text-white">Edit</Text>
           </TouchableOpacity>
 
           {/* Edit Modal */}
           <Modal visible={modalVisible} animationType="slide" transparent onRequestClose={() => setModalVisible(false)}>
-            <View className="flex-1 justify-center items-center bg-black bg-opacity-40">
-              <View className="bg-white rounded-xl p-6 w-11/12 max-w-md shadow-lg">
-                <Text className="text-lg font-bold mb-4 text-center">Edit Profile</Text>
+            <View className="items-center justify-center flex-1 bg-gray-50 bg-opacity-40">
+              <View className="w-11/12 max-w-md p-6 bg-white shadow-md rounded-xl">
+                <Text className="mb-4 text-lg font-bold text-center">Edit Profile</Text>
 
                 <Pressable className="items-center mb-4" onPress={pickImage}>
                   <Image
                     source={editImage ? { uri: editImage } : require("@/assets/images/placeholder-food.jpg")}
-                    className="w-24 h-24 rounded-full mb-2 bg-gray-200"
+                    className="w-24 h-24 mb-2 bg-gray-200 rounded-full"
                   />
                   <Text className="text-blue-600 underline">Change Photo</Text>
                 </Pressable>
 
                 <Text className="mb-1 font-medium">Username</Text>
                 <TextInput
-                  className="border border-gray-300 rounded px-3 py-2 mb-4"
+                  className="px-3 py-2 mb-4 border border-gray-300 rounded"
                   value={editUsername}
                   onChangeText={setEditUsername}
                   placeholder="Enter new username"
                 />
-                {editError && <Text className="text-red-600 mb-2 text-center">{editError}</Text>}
+                {editError && <Text className="mb-2 text-center text-red-600">{editError}</Text>}
 
                 <View className="flex-row justify-between mt-2">
                   <TouchableOpacity
-                    className="bg-gray-300 py-2 px-6 rounded-lg"
+                    className="px-6 py-2 bg-gray-300 rounded-lg"
                     onPress={() => setModalVisible(false)}
                     disabled={editLoading}
                   >
-                    <Text className="text-gray-700 font-bold">Cancel</Text>
+                    <Text className="font-bold text-gray-700">Cancel</Text>
                   </TouchableOpacity>
                   <TouchableOpacity
-                    className="bg-red-600 py-2 px-6 rounded-lg"
+                    className="px-6 py-2 bg-red-600 rounded-lg"
                     onPress={handleSaveProfile}
                     disabled={editLoading}
                   >
                     {editLoading ? (
                       <ActivityIndicator size="small" color="#fff" />
                     ) : (
-                      <Text className="text-white font-bold">Save</Text>
+                      <Text className="font-bold text-white">Save</Text>
                     )}
                   </TouchableOpacity>
                 </View>
@@ -347,23 +346,23 @@ export default function ProfileScreen() {
 
         {/* Tab Content */}
         {isActiveLoading ? (
-          <View className="flex-1 items-center justify-center py-8">
+          <View className="items-center justify-center flex-1 py-8">
             <ActivityIndicator size="small" color="#bb0718" />
           </View>
         ) : activeError ? (
-          <View className="flex-1 items-center justify-center py-8">
-            <Text className="text-red-600 font-bold text-center">{activeError.message || "Failed to load data"}</Text>
+          <View className="items-center justify-center flex-1 py-8">
+            <Text className="font-bold text-center text-red-600">{activeError.message || "Failed to load data"}</Text>
           </View>
         ) : !activeData?.data?.length ? (
-          <View className="flex-1 items-center justify-center py-8">
-            <Text className="text-gray-400 font-medium text-center">No items found</Text>
+          <View className="items-center justify-center flex-1 py-8">
+            <Text className="font-medium text-center text-gray-400">No items found</Text>
           </View>
         ) : (
           <View className="flex-row flex-wrap p-2">
             {activeData.data.map((item: Food) => (
               <TouchableOpacity
                 key={item.id}
-                className="w-1/2 p-2 relative"
+                className="relative w-1/2 p-2"
                 onPress={() => handleFoodPress(item.id)}
                 activeOpacity={0.7}
               >
@@ -371,7 +370,7 @@ export default function ProfileScreen() {
                   source={item.image_url ? { uri: item.image_url } : require("@/assets/images/placeholder-food.jpg")}
                   className="w-full h-[120px] rounded-lg"
                 />
-                <View className="absolute bottom-4 left-4 py-1 px-2 rounded bg-opacity-90 bg-white/80">
+                <View className="absolute px-2 py-1 rounded bottom-4 left-4 bg-opacity-90 bg-white/80">
                   <Text className="text-[#333] font-bold text-xs">{item.name}</Text>
                 </View>
               </TouchableOpacity>
diff --git a/app/post-detail/[id].tsx b/app/post-detail/[id].tsx
index f2f233c..152c5b2 100644
--- a/app/post-detail/[id].tsx
+++ b/app/post-detail/[id].tsx
@@ -504,7 +504,7 @@ export default function PostDetailScreen() {
   return (
     <View style={{ flex: 1, backgroundColor: "white" }}>
       {/* Fixed Header */}
-          <View className="flex-row justify-between items-center px-4 py-3 mt-11">
+          <View className="flex-row items-center justify-between px-4 py-3 mt-11">
             <TouchableOpacity 
               className="bg-[#ffd60a] p-3 rounded-lg"
               onPress={() => router.back()}
@@ -716,9 +716,6 @@ export default function PostDetailScreen() {
                         </Text>
                       </View>
                     </View>
-
-                    {/* Separator */}
-                    <View style={{ height: 1, backgroundColor: "#e0e0e0", marginTop: 16 }} />
                   </View>
                 ))
               ) : (