diff --git a/background/messages/sidepanel.ts b/background/messages/sidepanel.ts
index 25f648b..2919acd 100644
--- a/background/messages/sidepanel.ts
+++ b/background/messages/sidepanel.ts
@@ -1,9 +1,17 @@
-import type { PlasmoMessaging } from "@plasmohq/messaging"
+import { type PlasmoMessaging } from "@plasmohq/messaging"
 
-const handler: PlasmoMessaging.MessageHandler = (req, res) => {
-  chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => {
-    chrome.sidePanel.open({ tabId: tab.id })
-  })
+const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
+  try {
+    chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => {
+      const { active } = req.body
+
+      if (active) {
+        chrome.sidePanel.open({ tabId: tab.id })
+      }
+    })
+  } catch (error) {
+    console.error("Error toggling side panel:", error)
+  }
 }
 
 export default handler
diff --git a/index.css b/index.css
index 633f1f8..000f7a8 100644
--- a/index.css
+++ b/index.css
@@ -15,6 +15,7 @@
     width: 190px;
     margin: 0 auto;
     padding: 5px 8px;
+    max-height: 590px;
 }
 
 .App-header .title {
@@ -28,11 +29,18 @@
 }
 
 .App-link {
-    margin-top: 10px;
-    margin-left: 5px;
+    margin-top: 5px;
     font-size: 14px;
 }
 
+.App-link .item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 5px;
+    font-size: 12px;
+}
+
 .popup .App-body {
     max-height: 450px;
     overflow-y: scroll;
diff --git a/package.json b/package.json
index a9cc2c7..48b2a52 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "code-box",
   "displayName": "__MSG_extensionName__",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "__MSG_extensionDescription__",
   "author": "027xiguapi. <458813868@qq.com>",
   "scripts": {
diff --git a/popup/index.tsx b/popup/index.tsx
index c69fda2..6f91425 100644
--- a/popup/index.tsx
+++ b/popup/index.tsx
@@ -4,14 +4,22 @@ import { i18n } from "~tools"
 
 import "~index.css"
 
+import { useEffect, useState } from "react"
+
 import { sendToBackground } from "@plasmohq/messaging"
 
 export default function IndexPopup() {
-  function hanleOpenSidePanel() {
+  const [sidePanel, setSidePanel] = useState(false)
+
+  useEffect(() => {
+    hanleOpenSidePanel(sidePanel)
+  }, [sidePanel])
+
+  function hanleOpenSidePanel(active) {
     sendToBackground({
       name: "sidepanel",
       body: {
-        active: true
+        active: active
       }
     })
   }
@@ -28,9 +36,16 @@ export default function IndexPopup() {
         </div>
         <div className="App-link">
           <div className="item">
-            <a className="btn" href="#" onClick={hanleOpenSidePanel}>
-              {i18n("sidePanel")}😀
-            </a>
+            <span>{i18n("sidePanel")}</span>
+            <input
+              type="checkbox"
+              id="sidePanel"
+              name="sidePanel"
+              className="codebox-offscreen"
+              checked={sidePanel}
+              onChange={(e) => setSidePanel(e.target.checked)}
+            />
+            <label htmlFor="sidePanel" className="codebox-switch"></label>
           </div>
           <div className="item">
             <a
diff --git a/sidepanel/index.tsx b/sidepanel/index.tsx
index 4453f6a..25e1ca1 100644
--- a/sidepanel/index.tsx
+++ b/sidepanel/index.tsx
@@ -6,6 +6,7 @@ import { DownloadOutlined, PushpinOutlined } from "@ant-design/icons"
 import qrcodeUrl from "raw:~/public/wx/qrcode_wx.jpg"
 
 import { sendToContentScript } from "@plasmohq/messaging"
+import { useMessage } from "@plasmohq/messaging/dist/hook"
 import { useStorage } from "@plasmohq/storage/dist/hook"
 
 import styles from "./index.module.scss"
@@ -18,6 +19,15 @@ function IndexSidePanel() {
     content: ""
   })
 
+  useMessage((req: any, res: any) => {
+    if (req.name === "isSidePanelOpen") {
+      return true
+    }
+    if (req.name == "sidepanel") {
+      req.body.active || window.close()
+    }
+  })
+
   function pinCode(index) {
     sendToContentScript({ name: `custom-scrollIntoViewCode`, body: { index } })
   }