diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
index ccd855a..8fa80a1 100644
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -442,7 +442,7 @@ const Index = observer(function Index() {
   return (
     <Block className="flex-1 bg-black px-[12px]">
       <BannerSection />
-      <HeroCircle onOpenSearch={() => setIsSearchOpen(true)} onQuickGen={handleQuickGen} selectedItem={selectedItem} />
+      <HeroCircle isSearchOpen={isSearchOpen} onOpenSearch={() => setIsSearchOpen(true)} onQuickGen={handleQuickGen} selectedItem={selectedItem} />
       <FilterSection
         activeTab={activeTab}
         onChange={(tab) => {
@@ -522,7 +522,7 @@ const SearchOverlay = memo<SearchOverlayProps>(function SearchOverlay({ isOpen,
 
   if (!isOpen) return null
   return (
-    <Block className="absolute inset-x-0 top-0 z-50 mt-[24px] flex-row items-center gap-[8px] px-[20px]">
+    <Block className="absolute inset-x-0 top-0 z-50 flex-row items-center gap-[8px] px-[20px]" style={{ marginTop: 16, marginBottom: 26 }}>
       <Block
         className="flex-1 flex-row items-center border-[3px] border-black bg-white px-[12px] shadow-[4px_4px_0px_#000]"
         style={{ height: 48, transform: [{ skewX: '-6deg' }] }}
@@ -575,13 +575,6 @@ const GooActions = observer<GooActionsProps>(function GooActions({ gooPoints, on
             {isDev && isPolling && <Block className="ml-[4px] size-[6px] rounded-full bg-green-500" />}
           </Block>
         )}
-
-        {/* <Block
-          className="size-[48px] items-center justify-center rounded-full border-[3px] border-black bg-white shadow-[4px_4px_0px_#000]"
-          onClick={onOpenSearch}
-        >
-          <Ionicons color="black" name="search" size={22} />
-        </Block> */}
       </Block>
     </Block>
   )
@@ -623,7 +616,7 @@ const DuooomiLogo = memo(function DuooomiLogo() {
   const width = 200
   const height = 40
   const textHeight = paragraph.getHeight()
-  const y = (height - textHeight) / 2
+  const y = (height - textHeight) / 1.5
 
   return (
     <Canvas style={{ width, height }}>
@@ -636,8 +629,9 @@ type HeroCircleProps = {
   selectedItem: MediaItem | null
   onQuickGen: () => void
   onOpenSearch: () => void
+  isSearchOpen: boolean
 }
-const HeroCircle = observer<HeroCircleProps>(function HeroCircle({ selectedItem, onQuickGen, onOpenSearch }) {
+const HeroCircle = observer<HeroCircleProps>(function HeroCircle({ selectedItem, onQuickGen, onOpenSearch, isSearchOpen }) {
   const isAuthenticated = userStore.isAuthenticated
   const { balance } = userBalanceStore
 
@@ -648,8 +642,8 @@ const HeroCircle = observer<HeroCircleProps>(function HeroCircle({ selectedItem,
 
   return (
     <Block className="relative z-10 items-center">
-      <Block className='flex-row justify-between items-center w-full mx-[16px]  mb-[18px]'>
-        <Block >
+      <Block className='flex-row justify-between items-center w-full mx-[16px]  mb-[18px]' style={{ opacity: isSearchOpen ? 0 : 1, pointerEvents: isSearchOpen ? 'none' : 'auto' }}>
+        <Block>
           <DuooomiLogo />
         </Block>
         <Block className="flex-shrink-0">
@@ -698,12 +692,21 @@ const HeroCircle = observer<HeroCircleProps>(function HeroCircle({ selectedItem,
             </Block>
           </Block>
         </Block>
-        <Block
-          className="size-[48px] items-center justify-center rounded-full border-[3px] border-black bg-white shadow-[4px_4px_0px_#000]"
-          onClick={onOpenSearch}
-        >
-          <Ionicons color="black" name="search" size={22} />
-        </Block>
+        {!isSearchOpen && (
+          <Block className='gap-[10px]'>
+            <Block
+              className="size-[46px] items-center justify-center rounded-full border-[2px] border-black bg-white shadow-[4px_4px_0px_#000]"
+              onClick={onOpenSearch}
+            >
+              <Ionicons color="black" name="search" size={22} />
+            </Block>
+            <Block
+              className="size-[46px] items-center justify-center rounded-full border-[2px] border-black bg-white shadow-[4px_4px_0px_#000]"
+            >
+              <Ionicons color="black" name="settings" size={22} />
+            </Block>
+          </Block>
+        )}
       </Block>
     </Block>
   )