diff --git a/dist/components/dock.js b/dist/components/dock.js
index 755c68b..6b4601b 100644
--- a/dist/components/dock.js
+++ b/dist/components/dock.js
@@ -29,16 +29,24 @@ class Dock extends Component {
         padding: 12px;
         border-radius: 16px;
         background: rgba(255, 255, 255, 0.5);
+        color: var(--color-grey-3);
         transform: translateX(-100%);
         transition: transform 0.2s ease-in-out;
         box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
 
+        --wc-icon-size: 24px;
+
         &:hover {
           transform: translateX(0);
         }
       }
     `,
     css`
+      .icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
       .apps {
         display: flex;
         flex-direction: column;
@@ -88,21 +96,24 @@ class Dock extends Component {
     return html`
       <main class="container">
         <span
-          class="dashboard"
+          class="dashboard icon"
           @click=${_ => (this.$store.storeAppShow = true)}
+          ><wc-icon name="app"></wc-icon
         ></span>
         <mark class="pipe"></mark>
         <nav class="apps">
-          <a class="item"></a>
-          <a class="item"></a>
-          <a class="item"></a>
-          <a class="item"></a>
+          <a class="item icon"></a>
+          <a class="item icon"></a>
+          <a class="item icon"></a>
+          <a class="item icon"></a>
         </nav>
         <mark class="pipe"></mark>
         <span
-          class="trash"
+          class="trash icon"
           @click=${_ => (this.$store.aboutAppShow = true)}
-        ></span>
+        >
+          <wc-icon name="info"></wc-icon>
+        </span>
       </main>
     `
   }