diff --git a/src/module/home/view/view_detail_feature.tsx b/src/module/home/view/view_detail_feature.tsx
index 78c7037..939a0b5 100644
--- a/src/module/home/view/view_detail_feature.tsx
+++ b/src/module/home/view/view_detail_feature.tsx
@@ -1,20 +1,28 @@
+'use client'
 import { LayoutNavbarHome, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Center, Grid, Group, SimpleGrid, Text } from '@mantine/core';
 import React from 'react';
 import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2, HiChevronLeft, HiUserGroup, HiUsers } from "react-icons/hi2";
 import { PiUsersFourFill } from "react-icons/pi";
 import { FaUsersRays, FaUserTie } from "react-icons/fa6";
+import { useRouter } from 'next/navigation';
 
 export default function ViewDetailFeature() {
+  const router = useRouter()
   return (
     <>
       <LayoutNavbarHome>
-        <Group >
-          <ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
-            <HiChevronLeft size={20} color='white' />
-          </ActionIcon>
-          <Text fw={'bold'} c={'white'} >Semua Fitur</Text>
-        </Group>
+        <Grid justify='center' align='center'>
+        <Grid.Col span="auto">
+            <ActionIcon variant="light" onClick={() => router.push('/home')} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+              <HiChevronLeft size={20} color='white' />
+            </ActionIcon>
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Text ta={'center'} fw={'bold'} c={'white'} >SEMUA FITUR</Text>
+          </Grid.Col>
+          <Grid.Col span="auto"></Grid.Col>
+        </Grid>
       </LayoutNavbarHome>
       <Box p={20}>
         <Box >
diff --git a/src/module/home/view/view_home.tsx b/src/module/home/view/view_home.tsx
index b0f7766..c7a343b 100644
--- a/src/module/home/view/view_home.tsx
+++ b/src/module/home/view/view_home.tsx
@@ -5,16 +5,18 @@ import React from 'react';
 import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from "react-icons/hi2";
 import Carosole from '../components/carosole';
 import Features from '../components/features';
+import { useRouter } from 'next/navigation';
 
 
 export default function ViewHome() {
+  const router = useRouter()
   return (
     <>
         <LayoutNavbarHome>
           <Group justify='space-between'>
             <Text fw={'bold'} c={'white'} >Perbekal Darmasaba</Text>
             <Group>
-              <ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+              <ActionIcon onClick={() => router.push('/search')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
                 <HiMagnifyingGlass size={20} color='white' />
               </ActionIcon>
               <ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">