diff --git a/app/(application)/(user)/user-search/index.tsx b/app/(application)/(user)/user-search/index.tsx
index 5995fb3..69f4006 100644
--- a/app/(application)/(user)/user-search/index.tsx
+++ b/app/(application)/(user)/user-search/index.tsx
@@ -1,9 +1,99 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  AvatarCustom,
+  ClickableCustom,
+  Grid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
 
 export default function UserSearch() {
+  function generateRandomPhoneNumber(index: number) {
+    let prefix;
+
+    // Menentukan prefix berdasarkan index genap atau ganjil
+    if (index % 2 === 0) {
+      const evenPrefixes = ["6288", "6289", "6281"];
+      prefix = evenPrefixes[Math.floor(Math.random() * evenPrefixes.length)];
+    } else {
+      const oddPrefixes = ["6285", "6283"];
+      prefix = oddPrefixes[Math.floor(Math.random() * oddPrefixes.length)];
+    }
+
+    // Menghitung panjang sisa nomor acak (antara 10 - 12 digit)
+    const remainingLength = Math.floor(Math.random() * 3) + 10; // 10, 11, atau 12
+
+    // Membuat sisa nomor acak
+    let randomNumber = "";
+    for (let i = 0; i < remainingLength; i++) {
+      randomNumber += Math.floor(Math.random() * 10); // Digit acak antara 0-9
+    }
+
+    // Menggabungkan prefix dan sisa nomor
+    return prefix + randomNumber;
+  }
   return (
-    <ViewWrapper>
-      <TextCustom>User Search</TextCustom>
-    </ViewWrapper>
+    <>
+      <ViewWrapper
+        headerComponent={
+          <TextInputCustom
+            iconLeft={
+              <Ionicons
+                name="search"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.placeholder}
+              />
+            }
+            placeholder="Cari Pengguna"
+            borderRadius={50}
+          />
+        }
+      >
+        <StackCustom>
+          {Array.from({ length: 20 }).map((e, index) => {
+            return (
+              <Grid key={index}>
+                <Grid.Col span={2}>
+                  <AvatarCustom />
+                </Grid.Col>
+                <Grid.Col span={9}>
+                  <TextCustom size="large">Nama user {index}</TextCustom>
+                  <TextCustom size="small">
+                    +{generateRandomPhoneNumber(index)}
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col
+                  span={1}
+                  style={{
+                    justifyContent: "center",
+                    alignItems: "flex-end",
+                  }}
+                >
+                  <ClickableCustom
+                    onPress={() => {
+                      console.log("Ke Profile");
+                      router.push(`/profile/${index}`);
+                    }}
+                  >
+                    <Ionicons
+                      name="chevron-forward"
+                      size={ICON_SIZE_SMALL}
+                      color={MainColor.white}
+                    />
+                  </ClickableCustom>
+                </Grid.Col>
+              </Grid>
+            );
+          })}
+        </StackCustom>
+        <Spacing height={50} />
+      </ViewWrapper>
+    </>
   );
 }
diff --git a/components/TextInput/TextInputCustom.tsx b/components/TextInput/TextInputCustom.tsx
index fe7a7fb..96fe3a2 100644
--- a/components/TextInput/TextInputCustom.tsx
+++ b/components/TextInput/TextInputCustom.tsx
@@ -89,9 +89,9 @@ const TextInputCustom = ({
           disabled && GStyles.disabledBox,
         ]}
       >
-        {/* {iconLeft && (
+        {iconLeft && (
           <View style={GStyles.inputIcon}>{renderIcon(iconLeft)}</View>
-        )} */}
+        )}
         <RNTextInput
           style={[
             GStyles.inputText,
diff --git a/components/_ShareComponent/ViewWrapper.tsx b/components/_ShareComponent/ViewWrapper.tsx
index 0c4700c..8e40bbf 100644
--- a/components/_ShareComponent/ViewWrapper.tsx
+++ b/components/_ShareComponent/ViewWrapper.tsx
@@ -16,6 +16,7 @@ import { SafeAreaView } from "react-native-safe-area-context";
 interface ViewWrapperProps {
   children: React.ReactNode;
   withBackground?: boolean;
+  headerComponent?: React.ReactNode;
   footerComponent?: React.ReactNode;
   style?: StyleProp<ViewStyle>;
 }
@@ -23,6 +24,7 @@ interface ViewWrapperProps {
 const ViewWrapper = ({
   children,
   withBackground = false,
+  headerComponent,
   footerComponent,
   style,
 }: ViewWrapperProps) => {
@@ -34,6 +36,11 @@ const ViewWrapper = ({
         behavior={Platform.OS === "ios" ? "padding" : "height"}
         style={{ flex: 1, backgroundColor: MainColor.darkblue }}
       >
+        {/* Header Sticky */}
+        {headerComponent && (
+          <View style={GStyles.stickyHeader}>{headerComponent}</View>
+        )}
+
         <ScrollView
           contentContainerStyle={{ flexGrow: 1 }}
           keyboardShouldPersistTaps="handled"
diff --git a/styles/global-styles.ts b/styles/global-styles.ts
index 13a0648..3e9f93a 100644
--- a/styles/global-styles.ts
+++ b/styles/global-styles.ts
@@ -25,6 +25,20 @@ export const GStyles = StyleSheet.create({
     height: "100%",
     width: "100%",
   },
+  stickyHeader: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 10,
+    backgroundColor: MainColor.darkblue,
+    paddingTop: 16,
+    paddingInline: 16,
+    // padding: 16,
+    // paddingTop: 8,
+    // paddingBottom: 8,
+  },
+
   // Style saat disabled
   disabledBox: {
     backgroundColor: MainColor.disabled,