diff --git a/ui/autoMate/src/renderer/src/App.tsx b/ui/autoMate/src/renderer/src/App.tsx
index 57c6f8d..dfa650f 100644
--- a/ui/autoMate/src/renderer/src/App.tsx
+++ b/ui/autoMate/src/renderer/src/App.tsx
@@ -1,13 +1,16 @@
+import { useState } from "react"
 import Result from "./components/Result"
 import Search from "./components/Search"
+import { CodeContext } from "./context/CodeContext"
+import { codes } from "@renderer/data"
 
 function App(): JSX.Element {
-
+  const [data, setData] = useState(codes)
   return (
-    <>
+    <CodeContext.Provider value={{data, setData}}>
       <Search />
       <Result />
-    </>
+    </CodeContext.Provider>
   )
 }
 
diff --git a/ui/autoMate/src/renderer/src/context/CodeContext.tsx b/ui/autoMate/src/renderer/src/context/CodeContext.tsx
new file mode 100644
index 0000000..1b49f83
--- /dev/null
+++ b/ui/autoMate/src/renderer/src/context/CodeContext.tsx
@@ -0,0 +1,8 @@
+import { Dispatch, SetStateAction, createContext } from "react"
+import { DataType } from "@renderer/data"
+interface ContextProps {
+    data: DataType[]
+    setData: Dispatch<SetStateAction<DataType[]>>
+}
+export const CodeContext = createContext<ContextProps|undefined>(undefined)
+
diff --git a/ui/autoMate/src/renderer/src/data.ts b/ui/autoMate/src/renderer/src/data.ts
index a64266d..a269979 100644
--- a/ui/autoMate/src/renderer/src/data.ts
+++ b/ui/autoMate/src/renderer/src/data.ts
@@ -1,8 +1,8 @@
-interface DataType {
+export interface DataType {
     id: number,
     content: string
 }
-export const data = [
+export const codes = [
     {id:1, content: "Hello, how are you?"},
     {id:2, content: "I am fine, thank you"},
     {id:3, content: "How are you?"},