diff --git a/assets/icon/edit-2.svg b/assets/icon/edit-2.svg
new file mode 100644
index 0000000..ce3dd53
--- /dev/null
+++ b/assets/icon/edit-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#eee" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
\ No newline at end of file
diff --git a/assets/icon/grid.svg b/assets/icon/grid.svg
new file mode 100644
index 0000000..2b8e5f4
--- /dev/null
+++ b/assets/icon/grid.svg
@@ -0,0 +1,17 @@
+<svg
+xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      height="16"
+      shape-rendering="geometricPrecision"
+      stroke="white"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+      width="24"
+    >
+      <path d="M3 3h7v7H3z" />
+      <path d="M14 3h7v7h-7z" />
+      <path d="M14 14h7v7h-7z" />
+      <path d="M3 14h7v7H3z" />
+    </svg>
\ No newline at end of file
diff --git a/assets/icon/plus-circle.svg b/assets/icon/plus-circle.svg
new file mode 100644
index 0000000..a4010a2
--- /dev/null
+++ b/assets/icon/plus-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#eee" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
\ No newline at end of file
diff --git a/assets/icon/stack.svg b/assets/icon/stack.svg
new file mode 100644
index 0000000..55f53d6
--- /dev/null
+++ b/assets/icon/stack.svg
@@ -0,0 +1,16 @@
+<svg
+xmlns="http://www.w3.org/2000/svg"
+      data-testid="geist-icon"
+      fill="none"
+      height="16"
+      shapeRendering="geometricPrecision"
+      stroke="white"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+      width="24"
+    >
+      <rect x="2" y="2" width="20" height="8" rx="2" ry="2" />
+      <rect x="2" y="14" width="20" height="8" rx="2" ry="2" />
+    </svg>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 6cfa451..74cf9a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -240,12 +240,14 @@
     "@babel/helper-string-parser": {
       "version": "7.19.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
-      "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw=="
+      "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==",
+      "dev": true
     },
     "@babel/helper-validator-identifier": {
       "version": "7.19.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
-      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w=="
+      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
+      "dev": true
     },
     "@babel/helper-validator-option": {
       "version": "7.18.6",
@@ -278,7 +280,8 @@
     "@babel/parser": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.5.tgz",
-      "integrity": "sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA=="
+      "integrity": "sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA==",
+      "dev": true
     },
     "@babel/plugin-syntax-jsx": {
       "version": "7.18.6",
@@ -348,6 +351,7 @@
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.5.tgz",
       "integrity": "sha512-c9fst/h2/dcF7H+MJKZ2T0KjEQ8hY/BNnDk/H3XY8C4Aw/eWQXWn/lWntHF9ooUBnGmEvbfGrTgLWc+um0YDUg==",
+      "dev": true,
       "requires": {
         "@babel/helper-string-parser": "^7.19.4",
         "@babel/helper-validator-identifier": "^7.19.1",
@@ -371,24 +375,6 @@
         }
       }
     },
-    "@css-render/plugin-bem": {
-      "version": "0.15.11",
-      "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.11.tgz",
-      "integrity": "sha512-Bn8qadYPIz5DhZ4obTGHOJzeziQH6kY0+Fk5AEvwuuy378SLwwvXuuoechLjBHcgKkPCM03Oo4dDSGP/6NMdyw==",
-      "dev": true
-    },
-    "@css-render/vue3-ssr": {
-      "version": "0.15.11",
-      "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.11.tgz",
-      "integrity": "sha512-n+SuqLPbY30FUTM8slX75OaEG+c8XlTOFrAklekX2XQGvBbz9XdBE6hTEgGlV5kPcTMqTJeCG7Vzhs9/29VC7w==",
-      "dev": true
-    },
-    "@emotion/hash": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
-      "dev": true
-    },
     "@esbuild/android-arm": {
       "version": "0.15.18",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.18.tgz",
@@ -470,12 +456,6 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
-    "@juggle/resize-observer": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
-      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
-      "dev": true
-    },
     "@mapbox/node-pre-gyp": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.10.tgz",
@@ -829,27 +809,6 @@
       "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
       "dev": true
     },
-    "@types/katex": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.14.0.tgz",
-      "integrity": "sha512-+2FW2CcT0K3P+JMR8YG846bmDwplKUTsWgT2ENwdQ1UdVfRk3GQrh6Mi4sTopy30gI8Uau5CEqHTDZ6YvWIUPA==",
-      "dev": true
-    },
-    "@types/lodash": {
-      "version": "4.14.191",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
-      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
-      "dev": true
-    },
-    "@types/lodash-es": {
-      "version": "4.17.6",
-      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
-      "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
-      "dev": true,
-      "requires": {
-        "@types/lodash": "*"
-      }
-    },
     "@types/node": {
       "version": "18.11.17",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.17.tgz",
@@ -1376,12 +1335,14 @@
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
+      "dev": true
     },
     "assert-never": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/assert-never/-/assert-never-1.2.1.tgz",
-      "integrity": "sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw=="
+      "integrity": "sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==",
+      "dev": true
     },
     "async": {
       "version": "3.2.4",
@@ -1395,12 +1356,6 @@
       "integrity": "sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==",
       "dev": true
     },
-    "async-validator": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
-      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
-      "dev": true
-    },
     "autoprefixer": {
       "version": "10.4.13",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz",
@@ -1419,6 +1374,7 @@
       "version": "3.0.0-canary-5",
       "resolved": "https://registry.npmjs.org/babel-walk/-/babel-walk-3.0.0-canary-5.tgz",
       "integrity": "sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==",
+      "dev": true,
       "requires": {
         "@babel/types": "^7.9.6"
       }
@@ -1580,6 +1536,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -1632,6 +1589,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
       "integrity": "sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==",
+      "dev": true,
       "requires": {
         "is-regex": "^1.0.3"
       }
@@ -2035,6 +1993,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz",
       "integrity": "sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==",
+      "dev": true,
       "requires": {
         "@babel/parser": "^7.6.0",
         "@babel/types": "^7.6.1"
@@ -2110,31 +2069,6 @@
       "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==",
       "dev": true
     },
-    "css-render": {
-      "version": "0.15.11",
-      "resolved": "https://registry.npmjs.org/css-render/-/css-render-0.15.11.tgz",
-      "integrity": "sha512-hnLrHPUndVUTF5nmNPRey6hpixK02IPUGdEsm2xRjvJuewToyrVFx9Nmai8rgfVzhTFo5SJVh2PHAtzaIV8JKw==",
-      "dev": true,
-      "requires": {
-        "@emotion/hash": "~0.8.0",
-        "@types/node": "~17.0.5",
-        "csstype": "~3.0.5"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "17.0.45",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
-          "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==",
-          "dev": true
-        },
-        "csstype": {
-          "version": "3.0.11",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
-          "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==",
-          "dev": true
-        }
-      }
-    },
     "css-select": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
@@ -2251,18 +2185,6 @@
       "integrity": "sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==",
       "dev": true
     },
-    "date-fns": {
-      "version": "2.29.3",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
-      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
-      "dev": true
-    },
-    "date-fns-tz": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.7.tgz",
-      "integrity": "sha512-1t1b8zyJo+UI8aR+g3iqr5fkUHWpd58VBx8J/ZSQ+w7YrGlw80Ag4sA86qkfCXRBLmMc4I2US+aPMd4uKvwj5g==",
-      "dev": true
-    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -2356,7 +2278,8 @@
     "doctypes": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
-      "integrity": "sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ=="
+      "integrity": "sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==",
+      "dev": true
     },
     "dom-serializer": {
       "version": "1.4.1",
@@ -2701,12 +2624,6 @@
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "dev": true
     },
-    "evtd": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/evtd/-/evtd-0.2.4.tgz",
-      "integrity": "sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==",
-      "dev": true
-    },
     "execa": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
@@ -2961,7 +2878,8 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
     },
     "gauge": {
       "version": "3.0.2",
@@ -3030,6 +2948,7 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
       "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
+      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -3189,6 +3108,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -3202,12 +3122,14 @@
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true
     },
     "has-tostringtag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
       "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
       "requires": {
         "has-symbols": "^1.0.2"
       }
@@ -3224,12 +3146,6 @@
       "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
       "dev": true
     },
-    "highlight.js": {
-      "version": "11.7.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz",
-      "integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==",
-      "dev": true
-    },
     "hookable": {
       "version": "5.4.2",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.4.2.tgz",
@@ -3458,6 +3374,7 @@
       "version": "2.11.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
       "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
+      "dev": true,
       "requires": {
         "has": "^1.0.3"
       }
@@ -3472,6 +3389,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-4.0.0.tgz",
       "integrity": "sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==",
+      "dev": true,
       "requires": {
         "acorn": "^7.1.1",
         "object-assign": "^4.1.1"
@@ -3480,7 +3398,8 @@
         "acorn": {
           "version": "7.4.1",
           "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
         }
       }
     },
@@ -3548,6 +3467,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
       "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -3640,7 +3560,8 @@
     "js-stringify": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
-      "integrity": "sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g=="
+      "integrity": "sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==",
+      "dev": true
     },
     "js-tokens": {
       "version": "4.0.0",
@@ -3680,6 +3601,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
       "integrity": "sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==",
+      "dev": true,
       "requires": {
         "is-promise": "^2.0.0",
         "promise": "^7.0.1"
@@ -3688,7 +3610,8 @@
         "is-promise": {
           "version": "2.2.2",
           "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
-          "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+          "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+          "dev": true
         }
       }
     },
@@ -3764,12 +3687,6 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
-    "lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
-      "dev": true
-    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -4045,32 +3962,6 @@
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true
     },
-    "naive-ui": {
-      "version": "2.34.2",
-      "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.34.2.tgz",
-      "integrity": "sha512-JyvtVqHzS0O0DyPFFg95cJW0fp2WCEPsjXbeplkxFIfJHCgp5KC75PjnBycryegjPiZNLn9WlRDxXU5emEqRfg==",
-      "dev": true,
-      "requires": {
-        "@css-render/plugin-bem": "^0.15.10",
-        "@css-render/vue3-ssr": "^0.15.10",
-        "@types/katex": "^0.14.0",
-        "@types/lodash": "^4.14.181",
-        "@types/lodash-es": "^4.17.6",
-        "async-validator": "^4.0.7",
-        "css-render": "^0.15.10",
-        "date-fns": "^2.28.0",
-        "date-fns-tz": "^1.3.3",
-        "evtd": "^0.2.4",
-        "highlight.js": "^11.5.0",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.21",
-        "seemly": "^0.3.6",
-        "treemate": "^0.3.11",
-        "vdirs": "^0.1.8",
-        "vooks": "^0.2.12",
-        "vueuc": "^0.4.47"
-      }
-    },
     "nanoid": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
@@ -4344,7 +4235,8 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true
     },
     "ofetch": {
       "version": "1.0.0",
@@ -4553,7 +4445,8 @@
     "path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
     },
     "path-type": {
       "version": "4.0.0",
@@ -4931,6 +4824,7 @@
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
       "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "dev": true,
       "requires": {
         "asap": "~2.0.3"
       }
@@ -4951,6 +4845,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.2.tgz",
       "integrity": "sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==",
+      "dev": true,
       "requires": {
         "pug-code-gen": "^3.0.2",
         "pug-filters": "^4.0.0",
@@ -4966,6 +4861,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-3.0.0.tgz",
       "integrity": "sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==",
+      "dev": true,
       "requires": {
         "constantinople": "^4.0.1",
         "js-stringify": "^1.0.2",
@@ -4976,6 +4872,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.2.tgz",
       "integrity": "sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==",
+      "dev": true,
       "requires": {
         "constantinople": "^4.0.1",
         "doctypes": "^1.1.0",
@@ -4990,12 +4887,14 @@
     "pug-error": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.0.0.tgz",
-      "integrity": "sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ=="
+      "integrity": "sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ==",
+      "dev": true
     },
     "pug-filters": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-4.0.0.tgz",
       "integrity": "sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==",
+      "dev": true,
       "requires": {
         "constantinople": "^4.0.1",
         "jstransformer": "1.0.0",
@@ -5008,6 +4907,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-5.0.1.tgz",
       "integrity": "sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==",
+      "dev": true,
       "requires": {
         "character-parser": "^2.2.0",
         "is-expression": "^4.0.0",
@@ -5018,6 +4918,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-4.0.0.tgz",
       "integrity": "sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==",
+      "dev": true,
       "requires": {
         "pug-error": "^2.0.0",
         "pug-walk": "^2.0.0"
@@ -5027,6 +4928,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-3.0.0.tgz",
       "integrity": "sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==",
+      "dev": true,
       "requires": {
         "object-assign": "^4.1.1",
         "pug-walk": "^2.0.0"
@@ -5036,6 +4938,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-6.0.0.tgz",
       "integrity": "sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==",
+      "dev": true,
       "requires": {
         "pug-error": "^2.0.0",
         "token-stream": "1.0.0"
@@ -5044,12 +4947,14 @@
     "pug-runtime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-3.0.1.tgz",
-      "integrity": "sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg=="
+      "integrity": "sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==",
+      "dev": true
     },
     "pug-strip-comments": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-2.0.0.tgz",
       "integrity": "sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==",
+      "dev": true,
       "requires": {
         "pug-error": "^2.0.0"
       }
@@ -5057,7 +4962,8 @@
     "pug-walk": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-2.0.0.tgz",
-      "integrity": "sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ=="
+      "integrity": "sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==",
+      "dev": true
     },
     "queue-microtask": {
       "version": "1.2.3",
@@ -5190,6 +5096,7 @@
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
       "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+      "dev": true,
       "requires": {
         "is-core-module": "^2.9.0",
         "path-parse": "^1.0.7",
@@ -5334,12 +5241,6 @@
       "integrity": "sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==",
       "dev": true
     },
-    "seemly": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/seemly/-/seemly-0.3.6.tgz",
-      "integrity": "sha512-lEV5VB8BUKTo/AfktXJcy+JeXns26ylbMkIUco8CYREsQijuz4mrXres2Q+vMLdwkuLxJdIPQ8IlCIxLYm71Yw==",
-      "dev": true
-    },
     "semver": {
       "version": "7.3.8",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
@@ -5605,7 +5506,8 @@
     "supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true
     },
     "svg-tags": {
       "version": "1.0.0",
@@ -5739,7 +5641,8 @@
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "dev": true
     },
     "to-regex-range": {
       "version": "5.0.1",
@@ -5759,7 +5662,8 @@
     "token-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-1.0.0.tgz",
-      "integrity": "sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg=="
+      "integrity": "sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==",
+      "dev": true
     },
     "totalist": {
       "version": "3.0.0",
@@ -5773,12 +5677,6 @@
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
       "dev": true
     },
-    "treemate": {
-      "version": "0.3.11",
-      "resolved": "https://registry.npmjs.org/treemate/-/treemate-0.3.11.tgz",
-      "integrity": "sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg==",
-      "dev": true
-    },
     "tslib": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
@@ -5962,15 +5860,6 @@
       "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
       "dev": true
     },
-    "vdirs": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/vdirs/-/vdirs-0.1.8.tgz",
-      "integrity": "sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==",
-      "dev": true,
-      "requires": {
-        "evtd": "^0.2.2"
-      }
-    },
     "vite": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.5.tgz",
@@ -6131,16 +6020,8 @@
     "void-elements": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
-      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w=="
-    },
-    "vooks": {
-      "version": "0.2.12",
-      "resolved": "https://registry.npmjs.org/vooks/-/vooks-0.2.12.tgz",
-      "integrity": "sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==",
-      "dev": true,
-      "requires": {
-        "evtd": "^0.2.2"
-      }
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "dev": true
     },
     "vscode-jsonrpc": {
       "version": "6.0.0",
@@ -6233,21 +6114,6 @@
         "@vue/devtools-api": "^6.4.5"
       }
     },
-    "vueuc": {
-      "version": "0.4.49",
-      "resolved": "https://registry.npmjs.org/vueuc/-/vueuc-0.4.49.tgz",
-      "integrity": "sha512-WarAC44a/Yx78CxkAgROYLq+LkAeCGA/6wHidVoFmHLbzyF3SiP2nzRNGD/8zJeJInXv18EnWK6A//eGgMMq8w==",
-      "dev": true,
-      "requires": {
-        "@css-render/vue3-ssr": "^0.15.10",
-        "@juggle/resize-observer": "^3.3.1",
-        "css-render": "^0.15.10",
-        "evtd": "^0.2.4",
-        "seemly": "^0.3.6",
-        "vdirs": "^0.1.4",
-        "vooks": "^0.2.4"
-      }
-    },
     "wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -6417,6 +6283,7 @@
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/with/-/with-7.0.2.tgz",
       "integrity": "sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==",
+      "dev": true,
       "requires": {
         "@babel/parser": "^7.9.6",
         "@babel/types": "^7.9.6",
diff --git a/package.json b/package.json
index 69c0fb8..a116eab 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,6 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "naive-ui": "^2.34.2",
     "nuxt": "3.0.0",
     "nuxt-windicss": "^2.6.0",
     "pug": "^3.0.2"
diff --git a/pages/index.vue b/pages/index.vue
index 876d6ce..1857cf5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,11 +1,93 @@
 <template lang="pug">
 div.text-white.w-full.flex.bg-dark-900
-  div.w-xs.border-r-1.border-gray-500.border-opacity-10.pt-24.px-4
+  div.w-xs.border-r-1.border-gray-500.border-opacity-10.pt-24.px-4.flex.flex-col.gap-4
     div
       p.font-bold 迅速に開発できる
       p.text-gray-400 あなたのアイデアを素早く実現するためのフレームワークです。
       textarea.mt-4.rounded-lg.h-32.w-full.px-4.py-2.bg-gray-500.bg-opacity-5.border.border-gray-500.border-opacity-20.text-gray-500(value="Search" type="text" class="focus:outline-none")
+    div
+      div.flex.items-center.justify-between
+        span.font-bold 从图像中删除特征
+        label.switch
+          input(type="checkbox" checked)
+          div.slider.round
+      p.text-gray-400 描述您不希望出现在图像中的细节, 例如颜色, 物体或是风景
+    div
+      p.font-bold 筛选
+      p.text-gray-400 尝试可以应用于您的图像的不同风格样式
+      input.mt-4.rounded-lg.h-9.w-full.px-4.py-2.bg-gray-500.bg-opacity-5.border.border-gray-500.border-opacity-20.text-gray-500(value="Search" type="text" class="focus:outline-none")
+    div
+      p.font-bold 通过图像生成图像
+      p.text-gray-400 上传或绘制图像以用作灵感
+      input.mt-4.rounded-lg.h-9.w-full.px-4.py-2.bg-gray-500.bg-opacity-5.border.border-gray-500.border-opacity-20.text-gray-500(value="Search" type="text" class="focus:outline-none")
+      div.overflow-hidden.flex.gap-2.items-center
+        img.relative.right-6.w-4(:src="IconEdit" style="filter: drop-shadow(#ffffff 24px 0);")
+        span 画点什么
+    div
+      button.mt-4.rounded-lg.h-9.w-full.px-4.py-2.bg-gray-500.bg-opacity-5.border.border-gray-500.border-opacity-20.text-gray-500(value="Search" type="text" class="focus:outline-none") 开始绘制
   div.flex-1
     span Hello World
   div.w-xs.border-l-1.border-gray-500.border-opacity-10.pt-24.px-4 end
 </template>
+
+<script setup>
+import IconEdit from 'assets/icon/edit-2.svg'
+</script>
+
+<style>
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {display:none;}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+</style>