diff --git a/src/App.tsx b/src/App.tsx
index 25f6058..5771624 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import './App.css';
 import {Layout, Row} from 'antd';
+import {Controller} from "./components/Controller";
 
 function App() {
     return (
         <div className="App" style={{width: 300, backgroundColor: "#eee", padding: 8}}>
             <Layout>
                 <Row>
-                    Hello WOrld First
+                    <Controller/>
                 </Row>
                 <Row>
                     PROXY
diff --git a/src/components/Controller.jsx b/src/components/Controller.jsx
deleted file mode 100644
index 8ea4634..0000000
--- a/src/components/Controller.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React, {useState} from "react";
-
-export const Controller = (props) => {
-    const [connected, setConnected] = useState(false);
-    return (
-        <div>
-
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/src/components/Controller.tsx b/src/components/Controller.tsx
new file mode 100644
index 0000000..46ba233
--- /dev/null
+++ b/src/components/Controller.tsx
@@ -0,0 +1,29 @@
+import React, {useEffect} from "react";
+import {Card} from "antd";
+
+export interface ControllerProp {
+
+}
+
+export const Controller: React.FC<ControllerProp> = (props) => {
+    const [connected, setConnected] = React.useState<boolean>(false)
+    const ref = React.useRef<HTMLAnchorElement>(null)
+
+    useEffect(() => {
+        if (!ref) {
+            return
+        }
+
+        // const update = () => {
+        //     ref.current.click()
+        // }
+        // const id = setInterval(update, 10000)
+        // return () => {
+        //     clearInterval(id)
+        // }
+    }, [ref])
+
+    return <Card size={"small"} title={"连接器"}>
+        <a href={"yakitctrl://start/"} ref={ref}>Yakit 启动</a>
+    </Card>
+};
\ No newline at end of file