diff --git a/package.json b/package.json
index c477ec4..220eb31 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "chai-as-promised": "^7.1.1",
     "core-js": "^3.6.5",
+    "modern-normalize": "^1.0.0",
     "vue": "^2.6.11",
     "vuex": "^3.4.0"
   },
diff --git a/src/App.vue b/src/App.vue
index 91f0b42..ec826e3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,33 +1,22 @@
 <template>
   <div id="app">
-    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
-    <addSvg class="add-svg" />
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <Frame />
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-import addSvg from './assets/img/add.svg'
 export default {
-  name: 'App',
-  components: {
-    HelloWorld,
-    addSvg
-  }
+  name: 'App'
 }
 </script>
 
 <style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-  .add-svg{
-    color: red;
-  }
+html, body, #app{
+  height: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+}
+#app{
+  background-color: #fff;
 }
 </style>
diff --git a/src/assets/img/add.svg b/src/assets/img/add.svg
deleted file mode 100644
index ab5b08c..0000000
--- a/src/assets/img/add.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z"
-    fill="currentColor"
-  />
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M13 7C13 6.44772 12.5523 6 12 6C11.4477 6 11 6.44772 11 7V11H7C6.44772 11 6 11.4477 6 12C6 12.5523 6.44772 13 7 13H11V17C11 17.5523 11.4477 18 12 18C12.5523 18 13 17.5523 13 17V13H17C17.5523 13 18 12.5523 18 12C18 11.4477 17.5523 11 17 11H13V7Z"
-    fill="currentColor"
-  />
-</svg>
diff --git a/src/assets/img/css.gg/bell.svg b/src/assets/img/css.gg/bell.svg
new file mode 100644
index 0000000..2b8ca3e
--- /dev/null
+++ b/src/assets/img/css.gg/bell.svg
@@ -0,0 +1,14 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M14 3V3.28988C16.8915 4.15043 19 6.82898 19 10V17H20V19H4V17H5V10C5 6.82898 7.10851 4.15043 10 3.28988V3C10 1.89543 10.8954 1 12 1C13.1046 1 14 1.89543 14 3ZM7 17H17V10C17 7.23858 14.7614 5 12 5C9.23858 5 7 7.23858 7 10V17ZM14 21V20H10V21C10 22.1046 10.8954 23 12 23C13.1046 23 14 22.1046 14 21Z"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/cloud.svg b/src/assets/img/css.gg/cloud.svg
new file mode 100644
index 0000000..6a31ba6
--- /dev/null
+++ b/src/assets/img/css.gg/cloud.svg
@@ -0,0 +1,14 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M14.738 19.9964C14.8186 19.9988 14.8994 20 14.9806 20C19.3989 20 22.9806 16.4183 22.9806 12C22.9806 7.58172 19.3989 4 14.9806 4C12.4542 4 10.2013 5.17108 8.73522 7H7.51941C3.92956 7 1.01941 9.91015 1.01941 13.5C1.01941 17.0899 3.92956 20 7.51941 20H14.5194C14.5926 20 14.6654 19.9988 14.738 19.9964ZM16.6913 17.721C19.0415 16.9522 20.9806 14.6815 20.9806 12C20.9806 8.68629 18.2943 6 14.9806 6C11.6669 6 8.98059 8.68629 8.98059 12H6.98059C6.98059 10.9391 7.1871 9.92643 7.56211 9H7.51941C5.03413 9 3.01941 11.0147 3.01941 13.5C3.01941 15.9853 5.03413 18 7.51941 18H14.5194C15.0691 18 15.9041 17.9014 16.6913 17.721Z"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/components.svg b/src/assets/img/css.gg/components.svg
new file mode 100644
index 0000000..043ee25
--- /dev/null
+++ b/src/assets/img/css.gg/components.svg
@@ -0,0 +1,32 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7.7572 6.3431L11.9998 2.10046L16.2425 6.3431L11.9998 10.5857L7.7572 6.3431ZM10.5856 6.3431L11.9998 4.92889L13.4141 6.3431L11.9998 7.75732L10.5856 6.3431Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2.10046 11.9999L6.3431 7.75726L10.5857 11.9999L6.3431 16.2425L2.10046 11.9999ZM4.92889 11.9999L6.3431 10.5857L7.75732 11.9999L6.3431 13.4141L4.92889 11.9999Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M13.4142 11.9999L17.6568 16.2425L21.8995 11.9999L17.6568 7.75726L13.4142 11.9999ZM17.6568 10.5857L16.2426 11.9999L17.6568 13.4141L19.071 11.9999L17.6568 10.5857Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7.7572 17.6569L11.9998 13.4142L16.2425 17.6569L11.9998 21.8995L7.7572 17.6569ZM10.5856 17.6569L11.9998 16.2427L13.4141 17.6569L11.9998 19.0711L10.5856 17.6569Z"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/edit-unmask.svg b/src/assets/img/css.gg/edit-unmask.svg
new file mode 100644
index 0000000..bb4fdef
--- /dev/null
+++ b/src/assets/img/css.gg/edit-unmask.svg
@@ -0,0 +1,28 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M15 5C15 6.65685 13.6569 8 12 8C10.3431 8 9 6.65685 9 5C9 3.34315 10.3431 2 12 2C13.6569 2 15 3.34315 15 5Z"
+    fill="currentColor"
+  />
+  <path
+    d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z"
+    fill="currentColor"
+  />
+  <path
+    d="M12 22C13.6569 22 15 20.6569 15 19C15 17.3431 13.6569 16 12 16C10.3431 16 9 17.3431 9 19C9 20.6569 10.3431 22 12 22Z"
+    fill="currentColor"
+  />
+  <path
+    d="M22 12C22 13.6569 20.6569 15 19 15C17.3431 15 16 13.6569 16 12C16 10.3431 17.3431 9 19 9C20.6569 9 22 10.3431 22 12Z"
+    fill="currentColor"
+  />
+  <path
+    d="M5 15C6.65685 15 8 13.6569 8 12C8 10.3431 6.65685 9 5 9C3.34315 9 2 10.3431 2 12C2 13.6569 3.34315 15 5 15Z"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/film.svg b/src/assets/img/css.gg/film.svg
new file mode 100644
index 0000000..94d267a
--- /dev/null
+++ b/src/assets/img/css.gg/film.svg
@@ -0,0 +1,38 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M6 7C5.44772 7 5 7.44772 5 8C5 8.55228 5.44772 9 6 9C6.55228 9 7 8.55228 7 8C7 7.44772 6.55228 7 6 7Z"
+    fill="currentColor"
+  />
+  <path
+    d="M17 8C17 7.44772 17.4477 7 18 7C18.5523 7 19 7.44772 19 8C19 8.55228 18.5523 9 18 9C17.4477 9 17 8.55228 17 8Z"
+    fill="currentColor"
+  />
+  <path
+    d="M6 11C5.44772 11 5 11.4477 5 12C5 12.5523 5.44772 13 6 13C6.55228 13 7 12.5523 7 12C7 11.4477 6.55228 11 6 11Z"
+    fill="currentColor"
+  />
+  <path
+    d="M17 12C17 11.4477 17.4477 11 18 11C18.5523 11 19 11.4477 19 12C19 12.5523 18.5523 13 18 13C17.4477 13 17 12.5523 17 12Z"
+    fill="currentColor"
+  />
+  <path
+    d="M6 15C5.44772 15 5 15.4477 5 16C5 16.5523 5.44772 17 6 17C6.55228 17 7 16.5523 7 16C7 15.4477 6.55228 15 6 15Z"
+    fill="currentColor"
+  />
+  <path
+    d="M17 16C17 15.4477 17.4477 15 18 15C18.5523 15 19 15.4477 19 16C19 16.5523 18.5523 17 18 17C17.4477 17 17 16.5523 17 16Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M4 3C2.34315 3 1 4.34315 1 6V18C1 19.6569 2.34315 21 4 21H20C21.6569 21 23 19.6569 23 18V6C23 4.34315 21.6569 3 20 3H4ZM20 5H4C3.44772 5 3 5.44772 3 6V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V6C21 5.44772 20.5523 5 20 5Z"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/heart.svg b/src/assets/img/css.gg/heart.svg
new file mode 100644
index 0000000..e3054ab
--- /dev/null
+++ b/src/assets/img/css.gg/heart.svg
@@ -0,0 +1,14 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M12.0122 5.57169L10.9252 4.48469C8.77734 2.33681 5.29493 2.33681 3.14705 4.48469C0.999162 6.63258 0.999162 10.115 3.14705 12.2629L11.9859 21.1017L11.9877 21.0999L12.014 21.1262L20.8528 12.2874C23.0007 10.1395 23.0007 6.65711 20.8528 4.50923C18.705 2.36134 15.2226 2.36134 13.0747 4.50923L12.0122 5.57169ZM11.9877 18.2715L16.9239 13.3352L18.3747 11.9342L18.3762 11.9356L19.4386 10.8732C20.8055 9.50635 20.8055 7.29028 19.4386 5.92344C18.0718 4.55661 15.8557 4.55661 14.4889 5.92344L12.0133 8.39904L12.006 8.3918L12.005 8.39287L9.51101 5.89891C8.14417 4.53207 5.92809 4.53207 4.56126 5.89891C3.19442 7.26574 3.19442 9.48182 4.56126 10.8487L7.10068 13.3881L7.10248 13.3863L11.9877 18.2715Z"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/max.svg b/src/assets/img/css.gg/max.svg
new file mode 100644
index 0000000..4a9148e
--- /dev/null
+++ b/src/assets/img/css.gg/max.svg
@@ -0,0 +1,12 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5C13 4.44772 12.5523 4 12 4Z"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/mini.svg b/src/assets/img/css.gg/mini.svg
new file mode 100644
index 0000000..2c54a45
--- /dev/null
+++ b/src/assets/img/css.gg/mini.svg
@@ -0,0 +1,12 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/options.svg b/src/assets/img/css.gg/options.svg
new file mode 100644
index 0000000..ad91478
--- /dev/null
+++ b/src/assets/img/css.gg/options.svg
@@ -0,0 +1,20 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7 3C8.86384 3 10.4299 4.27477 10.874 6H19V8H10.874C10.4299 9.72523 8.86384 11 7 11C4.79086 11 3 9.20914 3 7C3 4.79086 4.79086 3 7 3ZM7 9C8.10457 9 9 8.10457 9 7C9 5.89543 8.10457 5 7 5C5.89543 5 5 5.89543 5 7C5 8.10457 5.89543 9 7 9Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M17 20C15.1362 20 13.5701 18.7252 13.126 17H5V15H13.126C13.5701 13.2748 15.1362 12 17 12C19.2091 12 21 13.7909 21 16C21 18.2091 19.2091 20 17 20ZM17 18C18.1046 18 19 17.1046 19 16C19 14.8954 18.1046 14 17 14C15.8954 14 15 14.8954 15 16C15 17.1046 15.8954 18 17 18Z"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/play-button-o.svg b/src/assets/img/css.gg/play-button-o.svg
new file mode 100644
index 0000000..3e2f772
--- /dev/null
+++ b/src/assets/img/css.gg/play-button-o.svg
@@ -0,0 +1,15 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23Z"
+    fill="currentColor"
+  />
+  <path d="M16 12L10 16.3301V7.66987L16 12Z" fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/play-button-r.svg b/src/assets/img/css.gg/play-button-r.svg
new file mode 100644
index 0000000..c0fb753
--- /dev/null
+++ b/src/assets/img/css.gg/play-button-r.svg
@@ -0,0 +1,15 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3ZM5 1C2.79086 1 1 2.79086 1 5V19C1 21.2091 2.79086 23 5 23H19C21.2091 23 23 21.2091 23 19V5C23 2.79086 21.2091 1 19 1H5Z"
+    fill="currentColor"
+  />
+  <path d="M16 12L10 16.3301V7.66987L16 12Z" fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/play-button.svg b/src/assets/img/css.gg/play-button.svg
new file mode 100644
index 0000000..2c926e8
--- /dev/null
+++ b/src/assets/img/css.gg/play-button.svg
@@ -0,0 +1,9 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M15 12.3301L9 16.6603L9 8L15 12.3301Z" fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/play-stop-o.svg b/src/assets/img/css.gg/play-stop-o.svg
new file mode 100644
index 0000000..96612c6
--- /dev/null
+++ b/src/assets/img/css.gg/play-stop-o.svg
@@ -0,0 +1,15 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M15 9H9V15H15V9Z" fill="currentColor" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/play-stop-r.svg b/src/assets/img/css.gg/play-stop-r.svg
new file mode 100644
index 0000000..9c7870e
--- /dev/null
+++ b/src/assets/img/css.gg/play-stop-r.svg
@@ -0,0 +1,15 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M15 9H9V15H15V9Z" fill="currentColor" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M1 5C1 2.79086 2.79086 1 5 1H19C21.2091 1 23 2.79086 23 5V19C23 21.2091 21.2091 23 19 23H5C2.79086 23 1 21.2091 1 19V5ZM5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3Z"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/play-stop.svg b/src/assets/img/css.gg/play-stop.svg
new file mode 100644
index 0000000..5d24ba9
--- /dev/null
+++ b/src/assets/img/css.gg/play-stop.svg
@@ -0,0 +1,9 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M7 7H17V17H7V7Z" fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/play-track-next-o.svg b/src/assets/img/css.gg/play-track-next-o.svg
new file mode 100644
index 0000000..05a3fc0
--- /dev/null
+++ b/src/assets/img/css.gg/play-track-next-o.svg
@@ -0,0 +1,14 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM14 9C14 8.44772 14.4477 8 15 8C15.5523 8 16 8.44772 16 9V15C16 15.5523 15.5523 16 15 16C14.4477 16 14 15.5523 14 15V9ZM13 12L7 15.4641V8.5359L13 12Z"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/play-track-next-r.svg b/src/assets/img/css.gg/play-track-next-r.svg
new file mode 100644
index 0000000..ed1e99a
--- /dev/null
+++ b/src/assets/img/css.gg/play-track-next-r.svg
@@ -0,0 +1,19 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M15 9C15 8.44772 15.4477 8 16 8C16.5523 8 17 8.44772 17 9V15C17 15.5523 16.5523 16 16 16C15.4477 16 15 15.5523 15 15V9Z"
+    fill="currentColor"
+  />
+  <path d="M14 12L8 15.4641V8.5359L14 12Z" fill="currentColor" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M1 5C1 2.79086 2.79086 1 5 1H19C21.2091 1 23 2.79086 23 5V19C23 21.2091 21.2091 23 19 23H5C2.79086 23 1 21.2091 1 19V5ZM5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3Z"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/play-track-next.svg b/src/assets/img/css.gg/play-track-next.svg
new file mode 100644
index 0000000..e964623
--- /dev/null
+++ b/src/assets/img/css.gg/play-track-next.svg
@@ -0,0 +1,10 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M6 17L14 12L6 7V17Z" fill="currentColor" />
+  <path d="M18 7H15V12V17H18V7Z" fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/play-track-prev-o.svg b/src/assets/img/css.gg/play-track-prev-o.svg
new file mode 100644
index 0000000..848487a
--- /dev/null
+++ b/src/assets/img/css.gg/play-track-prev-o.svg
@@ -0,0 +1,20 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8 8C8.55228 8 9 8.44772 9 9V15C9 15.5523 8.55228 16 8 16C7.44771 16 7 15.5523 7 15V9C7 8.44772 7.44771 8 8 8ZM16 15.4641L10 12L16 8.5359V15.4641Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12ZM12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1Z"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/play-track-prev-r.svg b/src/assets/img/css.gg/play-track-prev-r.svg
new file mode 100644
index 0000000..bceb91b
--- /dev/null
+++ b/src/assets/img/css.gg/play-track-prev-r.svg
@@ -0,0 +1,20 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8 8C8.55228 8 9 8.44772 9 9V15C9 15.5523 8.55228 16 8 16C7.44771 16 7 15.5523 7 15V9C7 8.44772 7.44771 8 8 8ZM16 15.4641L10 12L16 8.5359V15.4641Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3ZM5 1C2.79086 1 1 2.79086 1 5V19C1 21.2091 2.79086 23 5 23H19C21.2091 23 23 21.2091 23 19V5C23 2.79086 21.2091 1 19 1H5Z"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/play-track-prev.svg b/src/assets/img/css.gg/play-track-prev.svg
new file mode 100644
index 0000000..37e88ff
--- /dev/null
+++ b/src/assets/img/css.gg/play-track-prev.svg
@@ -0,0 +1,10 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M18 17L10 12L18 7V17Z" fill="currentColor" />
+  <path d="M6 7H9V17H6V7Z" fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/search.svg b/src/assets/img/css.gg/search.svg
new file mode 100644
index 0000000..2b99e41
--- /dev/null
+++ b/src/assets/img/css.gg/search.svg
@@ -0,0 +1,14 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M18.319 14.4326C20.7628 11.2941 20.542 6.75347 17.6569 3.86829C14.5327 0.744098 9.46734 0.744098 6.34315 3.86829C3.21895 6.99249 3.21895 12.0578 6.34315 15.182C9.22833 18.0672 13.769 18.2879 16.9075 15.8442C16.921 15.8595 16.9351 15.8745 16.9497 15.8891L21.1924 20.1317C21.5829 20.5223 22.2161 20.5223 22.6066 20.1317C22.9971 19.7412 22.9971 19.1081 22.6066 18.7175L18.364 14.4749C18.3493 14.4603 18.3343 14.4462 18.319 14.4326ZM16.2426 5.28251C18.5858 7.62565 18.5858 11.4246 16.2426 13.7678C13.8995 16.1109 10.1005 16.1109 7.75736 13.7678C5.41421 11.4246 5.41421 7.62565 7.75736 5.28251C10.1005 2.93936 13.8995 2.93936 16.2426 5.28251Z"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/share.svg b/src/assets/img/css.gg/share.svg
new file mode 100644
index 0000000..1e9e83d
--- /dev/null
+++ b/src/assets/img/css.gg/share.svg
@@ -0,0 +1,12 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M18 9C19.6569 9 21 7.65685 21 6C21 4.34315 19.6569 3 18 3C16.3431 3 15 4.34315 15 6C15 6.12549 15.0077 6.24919 15.0227 6.37063L8.08261 9.84066C7.54305 9.32015 6.80891 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15C6.80891 15 7.54305 14.6798 8.08261 14.1593L15.0227 17.6294C15.0077 17.7508 15 17.8745 15 18C15 19.6569 16.3431 21 18 21C19.6569 21 21 19.6569 21 18C21 16.3431 19.6569 15 18 15C17.1911 15 16.457 15.3202 15.9174 15.8407L8.97733 12.3706C8.99229 12.2492 9 12.1255 9 12C9 11.8745 8.99229 11.7508 8.97733 11.6294L15.9174 8.15934C16.457 8.67985 17.1911 9 18 9Z"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/tikcode.svg b/src/assets/img/css.gg/tikcode.svg
new file mode 100644
index 0000000..6033637
--- /dev/null
+++ b/src/assets/img/css.gg/tikcode.svg
@@ -0,0 +1,29 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M9 5H5V9H9V5ZM3 3V11H11V3H3Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M19 5H15V9H19V5ZM13 3V11H21V3H13Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M9 15H5V19H9V15ZM3 13V21H11V13H3Z"
+    fill="currentColor"
+  />
+  <path d="M13 13H15V21H13V13Z" fill="currentColor" />
+  <path d="M16 13H18V21H16V13Z" fill="currentColor" />
+  <path d="M19 13H21V21H19V13Z" fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/time.svg b/src/assets/img/css.gg/time.svg
new file mode 100644
index 0000000..926dad5
--- /dev/null
+++ b/src/assets/img/css.gg/time.svg
@@ -0,0 +1,15 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M9 7H11V12H16V14H9V7Z" fill="currentColor" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/trash.svg b/src/assets/img/css.gg/trash.svg
new file mode 100644
index 0000000..1c92759
--- /dev/null
+++ b/src/assets/img/css.gg/trash.svg
@@ -0,0 +1,16 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M17 5V4C17 2.89543 16.1046 2 15 2H9C7.89543 2 7 2.89543 7 4V5H4C3.44772 5 3 5.44772 3 6C3 6.55228 3.44772 7 4 7H5V18C5 19.6569 6.34315 21 8 21H16C17.6569 21 19 19.6569 19 18V7H20C20.5523 7 21 6.55228 21 6C21 5.44772 20.5523 5 20 5H17ZM15 4H9V5H15V4ZM17 7H7V18C7 18.5523 7.44772 19 8 19H16C16.5523 19 17 18.5523 17 18V7Z"
+    fill="currentColor"
+  />
+  <path d="M9 9H11V17H9V9Z" fill="currentColor" />
+  <path d="M13 9H15V17H13V9Z" fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/css.gg/tv.svg b/src/assets/img/css.gg/tv.svg
new file mode 100644
index 0000000..8acda8a
--- /dev/null
+++ b/src/assets/img/css.gg/tv.svg
@@ -0,0 +1,15 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8 6.11861L9.4131 4.70551L11.5371 6.82954L14.3667 4L15.7782 5.41151L13.3137 7.87598H18C19.1046 7.87598 20 8.77141 20 9.87598V16.876C20 17.9805 19.1046 18.876 18 18.876H6C4.89543 18.876 4 17.9805 4 16.876V9.87598C4 8.77141 4.89543 7.87598 6 7.87598H9.75736L8 6.11861ZM18 9.87598H6V16.876H18V9.87598Z"
+    fill="currentColor"
+  />
+  <path d="M8 19.876H16V20.876H8V19.876Z" fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/ikonate/aperture.svg b/src/assets/img/ikonate/aperture.svg
new file mode 100644
index 0000000..331e819
--- /dev/null
+++ b/src/assets/img/ikonate/aperture.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="apertureIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="apertureIconTitle">Aperture</title> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/> <g stroke-linecap="round"> <path d="M3 16H14.3164"/> <path d="M4.03589 6.20575L9.68257 15.9861"/> <path d="M13.0359 2.20575L7.37891 12.004"/> <path d="M10.9641 21.7942L16.6146 12.0074"/> <path d="M19.9641 17.7942L14.3086 7.99866"/> <path d="M21 7.98721H9.71844"/> </g> </svg>
\ No newline at end of file
diff --git a/src/assets/img/ikonate/back.svg b/src/assets/img/ikonate/back.svg
new file mode 100644
index 0000000..cf4ebb9
--- /dev/null
+++ b/src/assets/img/ikonate/back.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="backIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="backIconTitle">Backwards</title> <path d="M14 14.74L21 19V5l-7 4.26V5L2 12l12 7v-4.26z"/> </svg>
\ No newline at end of file
diff --git a/src/assets/img/ikonate/bell.svg b/src/assets/img/ikonate/bell.svg
new file mode 100644
index 0000000..5a7eaea
--- /dev/null
+++ b/src/assets/img/ikonate/bell.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="bellIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="bellIconTitle">Bell</title> <path stroke-linejoin="round" d="M10.5,4.5 C12.1666667,4.5 13.8333333,4.5 15.5,4.5 C17.5,4.5 18.8333333,3.83333333 19.5,2.5 L19.5,18.5 C18.8333333,17.1666667 17.5,16.5 15.5,16.5 C13.8333333,16.5 12.1666667,16.5 10.5,16.5 L10.5,16.5 C7.1862915,16.5 4.5,13.8137085 4.5,10.5 L4.5,10.5 C4.5,7.1862915 7.1862915,4.5 10.5,4.5 Z" transform="rotate(90 12 10.5)"/> <path d="M11,21 C12.1045695,21 13,20.1045695 13,19 C13,17.8954305 12.1045695,17 11,17" transform="rotate(90 12 19)"/> </svg>
\ No newline at end of file
diff --git a/src/assets/img/ikonate/bin.svg b/src/assets/img/ikonate/bin.svg
new file mode 100644
index 0000000..fa8d887
--- /dev/null
+++ b/src/assets/img/ikonate/bin.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="binIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="binIconTitle">Bin</title> <path d="M19 6L5 6M14 5L10 5M6 10L6 20C6 20.6666667 6.33333333 21 7 21 7.66666667 21 11 21 17 21 17.6666667 21 18 20.6666667 18 20 18 19.3333333 18 16 18 10"/> </svg>
\ No newline at end of file
diff --git a/src/assets/img/ikonate/close.svg b/src/assets/img/ikonate/close.svg
new file mode 100644
index 0000000..c072a97
--- /dev/null
+++ b/src/assets/img/ikonate/close.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="closeIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="closeIconTitle">Close</title> <path d="M6.34314575 6.34314575L17.6568542 17.6568542M6.34314575 17.6568542L17.6568542 6.34314575"/> </svg>
\ No newline at end of file
diff --git a/src/assets/img/ikonate/favourite.svg b/src/assets/img/ikonate/favourite.svg
new file mode 100644
index 0000000..11d689f
--- /dev/null
+++ b/src/assets/img/ikonate/favourite.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="favouriteIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="favouriteIconTitle">Favourite</title> <path d="M12,21 L10.55,19.7051771 C5.4,15.1242507 2,12.1029973 2,8.39509537 C2,5.37384196 4.42,3 7.5,3 C9.24,3 10.91,3.79455041 12,5.05013624 C13.09,3.79455041 14.76,3 16.5,3 C19.58,3 22,5.37384196 22,8.39509537 C22,12.1029973 18.6,15.1242507 13.45,19.7149864 L12,21 Z"/> </svg>
\ No newline at end of file
diff --git a/src/assets/img/ikonate/feed.svg b/src/assets/img/ikonate/feed.svg
new file mode 100644
index 0000000..5852fec
--- /dev/null
+++ b/src/assets/img/ikonate/feed.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="feedIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="feedIconTitle">Feed</title> <circle cx="7.5" cy="7.5" r="2.5"/> <path d="M22 13H2"/> <path d="M18 6h-5m5 3h-5"/> <path d="M5 2h14a3 3 0 0 1 3 3v17H2V5a3 3 0 0 1 3-3z"/> </svg>
\ No newline at end of file
diff --git a/src/assets/img/ikonate/forward.svg b/src/assets/img/ikonate/forward.svg
new file mode 100644
index 0000000..73db39f
--- /dev/null
+++ b/src/assets/img/ikonate/forward.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="forwardIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="forwardIconTitle">Forward</title> <path d="M10 14.74L3 19V5l7 4.26V5l12 7-12 7v-4.26z"/> </svg>
\ No newline at end of file
diff --git a/src/assets/img/ikonate/lock-open.svg b/src/assets/img/ikonate/lock-open.svg
new file mode 100644
index 0000000..f5d637a
--- /dev/null
+++ b/src/assets/img/ikonate/lock-open.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="lockOpenIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="lockOpenIconTitle">Lock</title> <path d="M7,7.625 L7,7 C7,4.23857625 9.23857625,2 12,2 L12,2 C14.7614237,2 17,4.23857625 17,7 L17,11"/> <rect width="14" height="10" x="5" y="11"/> </svg>
\ No newline at end of file
diff --git a/src/assets/img/ikonate/lock.svg b/src/assets/img/ikonate/lock.svg
new file mode 100644
index 0000000..0e4dd46
--- /dev/null
+++ b/src/assets/img/ikonate/lock.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="lockIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="lockIconTitle">Lock</title> <rect width="14" height="10" x="5" y="11"/> <path d="M12,3 L12,3 C14.7614237,3 17,5.23857625 17,8 L17,11 L7,11 L7,8 C7,5.23857625 9.23857625,3 12,3 Z"/> </svg>
\ No newline at end of file
diff --git a/src/assets/img/ikonate/minus.svg b/src/assets/img/ikonate/minus.svg
new file mode 100644
index 0000000..a07d37f
--- /dev/null
+++ b/src/assets/img/ikonate/minus.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="minusIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="minusIconTitle">最小化</title> <path d="M20,12 L4,12"/> </svg>
\ No newline at end of file
diff --git a/src/assets/img/ikonate/play.svg b/src/assets/img/ikonate/play.svg
new file mode 100644
index 0000000..af818aa
--- /dev/null
+++ b/src/assets/img/ikonate/play.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="playIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="playIconTitle">Play</title> <path d="M20 12L5 21V3z"/> </svg>
\ No newline at end of file
diff --git a/src/assets/img/ikonate/plus.svg b/src/assets/img/ikonate/plus.svg
new file mode 100644
index 0000000..e7f51e6
--- /dev/null
+++ b/src/assets/img/ikonate/plus.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="plusIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="plusIconTitle">Plus</title> <path d="M20 12L4 12M12 4L12 20"/> </svg>
\ No newline at end of file
diff --git a/src/assets/img/ikonate/qr.svg b/src/assets/img/ikonate/qr.svg
new file mode 100644
index 0000000..76878f0
--- /dev/null
+++ b/src/assets/img/ikonate/qr.svg
@@ -0,0 +1 @@
+<svg width="48px" height="48px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="qrIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" color="#2329D6"> <title id="qrIconTitle">QR Code</title> <rect x="10" y="3" width="7" height="7" transform="rotate(90 10 3)"/> <rect width="1" height="1" transform="matrix(-1 0 0 1 7 6)"/> <rect x="10" y="14" width="7" height="7" transform="rotate(90 10 14)"/> <rect x="6" y="17" width="1" height="1"/> <rect x="14" y="20" width="1" height="1"/> <rect x="17" y="17" width="1" height="1"/> <rect x="14" y="14" width="1" height="1"/> <rect x="20" y="17" width="1" height="1"/> <rect x="20" y="14" width="1" height="1"/> <rect x="20" y="20" width="1" height="1"/> <rect x="21" y="3" width="7" height="7" transform="rotate(90 21 3)"/> <rect x="17" y="6" width="1" height="1"/> </svg>
\ No newline at end of file
diff --git a/src/assets/img/ikonate/search.svg b/src/assets/img/ikonate/search.svg
new file mode 100644
index 0000000..0ec90a3
--- /dev/null
+++ b/src/assets/img/ikonate/search.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="searchIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="searchIconTitle">Search</title> <path d="M14.4121122,14.4121122 L20,20"/> <circle cx="10" cy="10" r="6"/> </svg>
\ No newline at end of file
diff --git a/src/assets/img/ikonate/settings.svg b/src/assets/img/ikonate/settings.svg
new file mode 100644
index 0000000..04c649d
--- /dev/null
+++ b/src/assets/img/ikonate/settings.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="settingsIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="settingsIconTitle">Settings</title> <path d="M5.03506429,12.7050339 C5.01187484,12.4731696 5,12.2379716 5,12 C5,11.7620284 5.01187484,11.5268304 5.03506429,11.2949661 L3.20577137,9.23205081 L5.20577137,5.76794919 L7.9069713,6.32070904 C8.28729123,6.0461342 8.69629298,5.80882212 9.12862533,5.61412402 L10,3 L14,3 L14.8713747,5.61412402 C15.303707,5.80882212 15.7127088,6.0461342 16.0930287,6.32070904 L18.7942286,5.76794919 L20.7942286,9.23205081 L18.9649357,11.2949661 C18.9881252,11.5268304 19,11.7620284 19,12 C19,12.2379716 18.9881252,12.4731696 18.9649357,12.7050339 L20.7942286,14.7679492 L18.7942286,18.2320508 L16.0930287,17.679291 C15.7127088,17.9538658 15.303707,18.1911779 14.8713747,18.385876 L14,21 L10,21 L9.12862533,18.385876 C8.69629298,18.1911779 8.28729123,17.9538658 7.9069713,17.679291 L5.20577137,18.2320508 L3.20577137,14.7679492 L5.03506429,12.7050339 Z"/> <circle cx="12" cy="12" r="1"/> </svg>
\ No newline at end of file
diff --git a/src/assets/img/ikonate/share-android.svg b/src/assets/img/ikonate/share-android.svg
new file mode 100644
index 0000000..530c7d0
--- /dev/null
+++ b/src/assets/img/ikonate/share-android.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="shareAndroidIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="shareAndroidIconTitle">Share</title> <path d="M16 8L8 11 16 8zM16 16L8 13 16 16z"/> <circle cx="6" cy="12" r="2"/> <circle cx="18" cy="7" r="2"/> <circle cx="18" cy="17" r="2"/> </svg>
\ No newline at end of file
diff --git a/src/assets/img/ikonate/time.svg b/src/assets/img/ikonate/time.svg
new file mode 100644
index 0000000..6c1783e
--- /dev/null
+++ b/src/assets/img/ikonate/time.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="timeIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="timeIconTitle">Time</title> <circle cx="12" cy="12" r="10"/> <polyline points="12 5 12 12 16 16"/> </svg>
\ No newline at end of file
diff --git a/src/assets/img/ikonate/tv.svg b/src/assets/img/ikonate/tv.svg
new file mode 100644
index 0000000..af3592f
--- /dev/null
+++ b/src/assets/img/ikonate/tv.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="tvIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="tvIconTitle">TV</title> <polygon points="20 8 20 20 4 20 4 8"/> <polyline stroke-linejoin="round" points="8 4 12 7.917 16 4"/> </svg>
\ No newline at end of file
diff --git a/src/background.js b/src/background.js
index 84f5226..5630e38 100644
--- a/src/background.js
+++ b/src/background.js
@@ -19,9 +19,11 @@ function createWindow () {
   win = new BrowserWindow({
     width: 1080,
     height: 720,
+    frame: false,
+    resizable: true,
+    transparent: true,
     webPreferences: {
-      // Use pluginOptions.nodeIntegration, leave this alone
-      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
+      webSecurity: false,
       nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
     }
   })
diff --git a/src/components/Frame.vue b/src/components/Frame.vue
new file mode 100644
index 0000000..6947dee
--- /dev/null
+++ b/src/components/Frame.vue
@@ -0,0 +1,318 @@
+<template>
+  <div class="frame">
+    <div class="left"></div>
+    <div class="middle">
+      <span class="btn lock" @click="lockBtnClick()">
+        <IconLock v-show="lock" class="icon" />
+        <IconLockOpen v-show="!lock" class="icon" />
+      </span>
+      <span class="btn bell">
+        <IconBell class="icon" />
+      </span>
+      <div class="search">
+        <span class="btn" @click="searchBtnClick()">
+          <IconSearch :class="[search ? 'active ' : ''] + 'icon'" />
+        </span>
+        <transition name="slide">
+          <input v-if="search" v-model.trim="searchTxt" ref="searchInput" autocomplete="off" class="search-input" type="text">
+        </transition>
+        <transition name="rotate">
+          <IconClose v-if="searchTxt.length > 0" class="icon icon-search-close" @click="clearSearchTxt()" />
+        </transition>
+        <transition name="fade">
+          <div class="search-box">
+            <ul>
+              <li>lala</li>
+              <li>蝙蝠侠</li>
+              <li>蜘蛛侠</li>
+              <li>钢铁侠</li>
+            </ul>
+          </div>
+        </transition>
+      </div>
+    </div>
+    <div class="right">
+      <span class="btn min">
+        <IconMin class="icon" />
+      </span>
+      <span class="btn max">
+        <IconMax class="icon" />
+      </span>
+      <span class="btn close">
+        <IconClose class="icon" />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import IconMin from '../assets/img/ikonate/minus.svg'
+import IconMax from '../assets/img/ikonate/plus.svg'
+import IconClose from '../assets/img/ikonate/close.svg'
+import IconSearch from '../assets/img/ikonate/search.svg'
+import IconLock from '../assets/img/ikonate/lock.svg'
+import IconLockOpen from '../assets/img/ikonate/lock-open.svg'
+import IconBell from '../assets/img/ikonate/bell.svg'
+export default {
+  name: 'frame',
+  components: {
+    IconMin,
+    IconMax,
+    IconClose,
+    IconSearch,
+    IconLock,
+    IconLockOpen,
+    IconBell
+  },
+  data () {
+    return {
+      lock: false,
+      search: false,
+      searchTxt: ''
+    }
+  },
+  methods: {
+    lockBtnClick () {
+      this.lock = !this.lock
+    },
+    searchBtnClick () {
+      this.search = !this.search
+      const timer = setTimeout(() => {
+        if (this.search) {
+          this.$refs.searchInput.focus()
+        }
+        clearTimeout(timer)
+      }, 600)
+    },
+    clearSearchTxt () {
+      this.searchTxt = ''
+      this.search = false
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.frame{
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  -webkit-app-region: drag;
+  .left{
+    height: 100%;
+    width: 80px;
+  }
+  .middle{
+    height: 100%;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    .btn{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 60px;
+      height: 100%;
+      text-align: center;
+      cursor: pointer;
+      -webkit-app-region: no-drag;
+      &:hover{
+        // background-color: #f2f6f9;
+        .icon{
+          width: 20px;
+          height: auto;
+          stroke-width: 3px;
+          stroke: #808695;
+        }
+      }
+    }
+    .lock{
+      &:hover{
+        .icon{
+          animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
+          @keyframes shake-bottom {
+            0%,
+            100% {
+              transform: rotate(0deg);
+              transform-origin: 50% 100%;
+            }
+            10% {
+              transform: rotate(2deg);
+            }
+            20%,
+            40%,
+            60% {
+              transform: rotate(-4deg);
+            }
+            30%,
+            50%,
+            70% {
+              transform: rotate(4deg);
+            }
+            80% {
+              transform: rotate(-2deg);
+            }
+            90% {
+              transform: rotate(2deg);
+            }
+          }
+        }
+      }
+    }
+    .bell{
+      &:hover{
+        .icon{
+          animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
+          @keyframes shake-top {
+            0%,
+            100% {
+              transform: rotate(0deg);
+              transform-origin: 50% 0;
+            }
+            10% {
+              transform: rotate(2deg);
+            }
+            20%,
+            40%,
+            60% {
+              transform: rotate(-4deg);
+            }
+            30%,
+            50%,
+            70% {
+              transform: rotate(4deg);
+            }
+            80% {
+              transform: rotate(-2deg);
+            }
+            90% {
+              transform: rotate(2deg);
+            }
+          }
+        }
+      }
+    }
+    .search{
+      height: 100%;
+      display: flex;
+      position: relative;
+      justify-content: center;
+      align-items: center;
+      .btn{
+        width: 60px;
+        &:hover{
+          .icon{
+            animation: shake-br 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
+            @keyframes shake-br {
+              0%,
+              100% {
+                transform: rotate(0deg);
+                transform-origin: 100% 100%;
+              }
+              10% {
+                transform: rotate(2deg);
+              }
+              20%,
+              40%,
+              60% {
+                transform: rotate(-4deg);
+              }
+              30%,
+              50%,
+              70% {
+                transform: rotate(4deg);
+              }
+              80% {
+                transform: rotate(-2deg);
+              }
+              90% {
+                transform: rotate(2deg);
+              }
+            }
+          }
+        }
+        .active{
+          stroke-width: 3px;
+          stroke: #808695;
+        }
+      }
+      .search-input{
+        position: absolute;
+        left: 40px;
+        -webkit-app-region: no-drag;
+        height: 30px;
+        border: none;
+        outline: none;
+        width: 180px;
+        padding-left: 4px;
+        padding-right: 20px;
+        color: #808695;
+        border-bottom: 1px solid #823aa0;
+      }
+      .icon-search-close{
+        position: absolute;
+        cursor: pointer;
+        -webkit-app-region: no-drag;
+        left: 200px;
+      }
+      .search-box{
+        position: absolute;
+        left: 40px;
+        top: 50px;
+        width: 180px;
+        border: 1px solid #000;
+      }
+      .slide-enter-active, .slide-leave-active{
+        transition: all 0.5s ease-in-out;
+      }
+      .slide-enter, .slide-leave-to{
+        transform: translateX(50%);
+        opacity: 0;
+      }
+      .rotate-enter-active, .rotate-leave-active{
+        transition: all 0.5s ease-in-out;
+      }
+      .rotate-enter, .rotate-leave-to{
+        transform: rotate(-180deg);
+        opacity: 0;
+      }
+    }
+  }
+  .right{
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    .btn{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 60px;
+      height: 100%;
+      text-align: center;
+      cursor: pointer;
+      -webkit-app-region: no-drag;
+      &:hover{
+        background-color: #f2f6f9;
+        .icon{
+          stroke-width: 3px;
+          stroke: #808695;
+        }
+      }
+      &.close{
+        &:hover{
+          .icon{
+            stroke: red;
+          }
+        }
+      }
+    }
+  }
+  .icon{
+    width: 20px;
+    height: auto;
+    stroke: #823aa0;
+  }
+}
+</style>
diff --git a/src/components/register.js b/src/components/register.js
new file mode 100644
index 0000000..59d80c0
--- /dev/null
+++ b/src/components/register.js
@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import Frame from './Frame'
+// import Aside from './Aside'
+// import Film from './Film'
+// import Play from './Play'
+// import Star from './Star'
+// import Setting from './Setting'
+// import Detail from './Detail'
+// import Share from './Share'
+// import History from './History'
+// import EditSites from './EditSites'
+// import IPTV from './IPTV'
+
+export default {
+  registerComponents () {
+    Vue.component('Frame', Frame)
+    // Vue.component('Aside', Aside)
+    // Vue.component('Film', Film)
+    // Vue.component('Play', Play)
+    // Vue.component('Star', Star)
+    // Vue.component('Setting', Setting)
+    // Vue.component('Detail', Detail)
+    // Vue.component('Share', Share)
+    // Vue.component('History', History)
+    // Vue.component('EditSites', EditSites)
+    // Vue.component('IPTV', IPTV)
+  }
+}
diff --git a/src/main.js b/src/main.js
index ba1641e..4ec09cf 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,9 @@
 import Vue from 'vue'
 import App from './App.vue'
 import store from './store'
-
+import Register from './components/register'
+import 'modern-normalize'
+Register.registerComponents()
 Vue.config.productionTip = false
 
 new Vue({
diff --git a/yarn.lock b/yarn.lock
index ab49bde..8b7e5bf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7243,6 +7243,11 @@ mochapack@^1.1.15:
     toposort "^2.0.2"
     yargs "14.0.0"
 
+modern-normalize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/modern-normalize/download/modern-normalize-1.0.0.tgz#539d84a1e141338b01b346f3e27396d0ed17601e"
+  integrity sha1-U52EoeFBM4sBs0bz4nOW0O0XYB4=
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"