diff --git a/ui/autoMate/src/main/index.ts b/ui/autoMate/src/main/index.ts
index 5069e49..29ce755 100644
--- a/ui/autoMate/src/main/index.ts
+++ b/ui/autoMate/src/main/index.ts
@@ -6,11 +6,11 @@ import icon from '../../resources/icon.png?asset'
 function createWindow(): void {  // Create the browser window.
   const mainWindow = new BrowserWindow({
     width: 600,
-    height: 600,
+    height: 500,
     show: false,
-    transparent: true,
-    frame: false,
-    alwaysOnTop: true,
+    // transparent: true,
+    // frame: false,
+    // alwaysOnTop: true,
     autoHideMenuBar: true,
     ...(process.platform === 'linux' ? { icon } : {}),
     webPreferences: {
diff --git a/ui/autoMate/src/renderer/src/App.tsx b/ui/autoMate/src/renderer/src/App.tsx
index dfa650f..dbf38c4 100644
--- a/ui/autoMate/src/renderer/src/App.tsx
+++ b/ui/autoMate/src/renderer/src/App.tsx
@@ -2,10 +2,10 @@ import { useState } from "react"
 import Result from "./components/Result"
 import Search from "./components/Search"
 import { CodeContext } from "./context/CodeContext"
-import { codes } from "@renderer/data"
+import { DataType } from "@renderer/data"
 
 function App(): JSX.Element {
-  const [data, setData] = useState(codes)
+  const [data, setData] = useState<DataType[]>([])
   return (
     <CodeContext.Provider value={{data, setData}}>
       <Search />
diff --git a/ui/autoMate/src/renderer/src/components/Result/index.tsx b/ui/autoMate/src/renderer/src/components/Result/index.tsx
index 10fb7d0..029081e 100644
--- a/ui/autoMate/src/renderer/src/components/Result/index.tsx
+++ b/ui/autoMate/src/renderer/src/components/Result/index.tsx
@@ -1,11 +1,38 @@
-import { useState } from "react"
-import { data as codes } from "@renderer/data"
-export default function index() {
-    const [data, setData] = useState(codes)
+import useCode from "@renderer/hooks/useCode"
+import { useCallback, useEffect, useState } from "react"
+import styles from './styles.module.scss'
+export default function Result() {
+    const {data} = useCode()
+    const [currentIndex, setCurrentIndex] = useState(0)
+    const handleKeyEvent = useCallback((e: KeyboardEvent) => {
+       // 初始没有数据，所以data.length为0 ，防止向上箭头，将数据变为-1
+       if (data.length === 0) return
+       switch(e.key){
+        case 'ArrowUp':
+            setCurrentIndex(currentIndex - 1 < 0 ? data.length - 1 : currentIndex - 1)
+            break
+        case 'ArrowDown':
+            setCurrentIndex(currentIndex + 1 >= data.length ? 0 : currentIndex + 1)
+            break
+        case 'Enter':
+            console.log(data[currentIndex].content)
+            break
+       }
+       // 将 data 和 currentIndex 变化时，重新定义该函数
+    }, [data, currentIndex])
+    useEffect(() => {
+        document.addEventListener('keydown', handleKeyEvent)
+        // 如果 data 发生变化，先前的事件监听器会被移除，然后再添加新的监听器，以确保使用最新的 data
+        // 如果不移除，data变化会不停添加监听器 
+        return () => {
+            document.removeEventListener('keydown', handleKeyEvent)
+        }
+    }, [handleKeyEvent])
     return (
-    <main className='bg-slate-50 rounded-bl-lg rounded-br-lg -mt-[7px] pb-2'>
+    <main className = {styles.main}>
+        {currentIndex}
         {data.map((item, index) => (
-            <div key={index} className='text-slate-700 truncate mb-2'>
+            <div key={item.id} className={currentIndex == index? styles.active : ''}>
                 <p>{item.content}</p>
             </div>
         ))}
diff --git a/ui/autoMate/src/renderer/src/components/Result/styles.module.scss b/ui/autoMate/src/renderer/src/components/Result/styles.module.scss
new file mode 100644
index 0000000..0db3426
--- /dev/null
+++ b/ui/autoMate/src/renderer/src/components/Result/styles.module.scss
@@ -0,0 +1,10 @@
+.main{
+    @apply bg-slate-50 px-3 rounded-bl-lg rounded-br-lg -mt-[7px] pb-2;
+    div  {
+        @apply text-slate-700 truncate px-2 py-1 rounded-lg;
+        &.active {
+            @apply bg-orange-400 text-white;
+        }
+    }
+}
+
diff --git a/ui/autoMate/src/renderer/src/components/Search/index.tsx b/ui/autoMate/src/renderer/src/components/Search/index.tsx
index 1552a0a..48a1f7f 100644
--- a/ui/autoMate/src/renderer/src/components/Search/index.tsx
+++ b/ui/autoMate/src/renderer/src/components/Search/index.tsx
@@ -1,8 +1,25 @@
+import useCode from "@renderer/hooks/useCode"
+import { ChangeEvent, useState } from "react"
+import { codes } from "@renderer/data"
+
 export default function Search(): JSX.Element {
+  const {setData} = useCode()
+  const [search, setSearch] = useState('')
+  const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value)
+    setData(
+      codes.filter((code) => 
+        code.content.toLowerCase().includes(e.target.value.toLowerCase() || '@@@@@@')
+      )
+    )
+  }
   return (
     <div className="bg-slate-50 p-3 rounded-lg drag" >
         <section className="bg-slate-200 p-3 rounded-lg">
-            <input className="w-full outline-none text-2xl text-slate-600 bg-slate-200" />
+            <input 
+            value={search}
+            onChange={handleSearch}
+            className="w-full outline-none text-2xl text-slate-600 bg-slate-200" />
         </section>
         <section className="text-center text-slate-600 text-xs mt-2">autoMate</section>
     </div>
diff --git a/ui/autoMate/src/renderer/src/hooks/useCode.ts b/ui/autoMate/src/renderer/src/hooks/useCode.ts
new file mode 100644
index 0000000..a943d21
--- /dev/null
+++ b/ui/autoMate/src/renderer/src/hooks/useCode.ts
@@ -0,0 +1,11 @@
+import { useContext } from 'react'
+import { CodeContext } from '@renderer/context/CodeContext'
+
+export default() =>{
+    const context = useContext(CodeContext)
+    if (!context?.data) {
+        throw new Error('CodeContext not found')
+    }
+    return {...context}
+}
+