diff --git a/goodies/chrome-extension/manifest.json b/goodies/chrome-extension/manifest.json
index 5c28205..c843e19 100644
--- a/goodies/chrome-extension/manifest.json
+++ b/goodies/chrome-extension/manifest.json
@@ -9,10 +9,15 @@
     "128": "icon/128.png"
   },
 
+  "browser_action": {
+    "default_popup": "popup/index.html"
+  },
+
   "permissions": [
     "background",
     "contextMenus",
     "webRequest",
+    "storage",
     "*://*/*"
   ],
 
diff --git a/goodies/chrome-extension/popup/css/background.css b/goodies/chrome-extension/popup/css/background.css
new file mode 100644
index 0000000..53907ca
--- /dev/null
+++ b/goodies/chrome-extension/popup/css/background.css
@@ -0,0 +1,37 @@
+body {
+    width: 300px;
+    height: 300px;
+    margin: 0 !important;
+}
+body .bgmask {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    z-index: -8;
+    background-image: linear-gradient(#0000 50%, #04254e);
+}
+
+body .bggatter {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: -9;
+    -webkit-mask-image: url("../image/grid.png");
+    background-color: #5954a4;
+}
+
+body .bggatter__wrapper {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    overflow: hidden;
+    z-index: -9;
+}
+
+body .bgdrop {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    z-index: -10;
+    background-color: #04254e;
+}
diff --git a/goodies/chrome-extension/popup/css/button.css b/goodies/chrome-extension/popup/css/button.css
new file mode 100644
index 0000000..219c8bb
--- /dev/null
+++ b/goodies/chrome-extension/popup/css/button.css
@@ -0,0 +1,28 @@
+button {
+    padding: 0.5em 2em;
+    color: #04254e;
+    font-size: 14pt;
+    border-radius: 5px;
+    cursor: pointer;
+    transition:
+        color 0.15s ease,
+        transform 0.15s ease;
+}
+
+button:hover {
+    /*background-color: #5954a4;*/
+    color: #fff;
+    animation: color-cycle;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+}
+
+@keyframes color-cycle {
+    0%      {background-color: #ff6666; transform: scale(1.075);}
+    16.67%  {background-color: #c966ff;}
+    33.33%  {background-color: #6678ff;}
+    50%     {background-color: #66edff; transform: scale(1.15);}
+    66.66%  {background-color: #66ff70;}
+    83.33%  {background-color: #fcff66;}
+    100%    {background-color: #ff6666; transform: scale(1.075);}
+}
diff --git a/goodies/chrome-extension/popup/css/font/include.css b/goodies/chrome-extension/popup/css/font/include.css
new file mode 100644
index 0000000..f8b2294
--- /dev/null
+++ b/goodies/chrome-extension/popup/css/font/include.css
@@ -0,0 +1 @@
+@import "zilla-slab.css"
diff --git a/goodies/chrome-extension/popup/css/font/zilla-slab.css b/goodies/chrome-extension/popup/css/font/zilla-slab.css
new file mode 100644
index 0000000..d6834be
--- /dev/null
+++ b/goodies/chrome-extension/popup/css/font/zilla-slab.css
@@ -0,0 +1,49 @@
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Regular.ttf") format('truetype');
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Italic.ttf") format('truetype');
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Bold.ttf") format('truetype');
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-BoldItalic.ttf") format('truetype');
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Light.ttf") format('truetype');
+    font-weight: lighter;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Light.ttf") format('truetype');
+    font-weight: lighter;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Medium.ttf") format('truetype');
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Medium.ttf") format('truetype');
+    font-weight: 500;
+    font-style: italic;
+}
diff --git a/goodies/chrome-extension/popup/css/form.css b/goodies/chrome-extension/popup/css/form.css
new file mode 100644
index 0000000..38edb76
--- /dev/null
+++ b/goodies/chrome-extension/popup/css/form.css
@@ -0,0 +1,14 @@
+label {
+    margin-bottom: 0.5em;
+}
+
+input {
+    border-radius: 5px;
+    height: 25pt;
+}
+
+input,
+textarea {
+    color: #04254e;
+    font-size: 14pt;
+}
diff --git a/goodies/chrome-extension/popup/css/modular.css b/goodies/chrome-extension/popup/css/modular.css
new file mode 100644
index 0000000..bdeac0a
--- /dev/null
+++ b/goodies/chrome-extension/popup/css/modular.css
@@ -0,0 +1,23 @@
+.text-center {
+    text-align: center;
+}
+
+.pt-1 {
+    padding-top: 1em;
+}
+
+.flex {
+    display: flex;
+}
+
+.flex-col {
+    flex-direction: column;
+}
+
+.justify-content-center {
+    justify-content: center;
+}
+
+.align-items-center {
+    align-items: center;
+}
\ No newline at end of file
diff --git a/goodies/chrome-extension/popup/css/typography.css b/goodies/chrome-extension/popup/css/typography.css
new file mode 100644
index 0000000..e079919
--- /dev/null
+++ b/goodies/chrome-extension/popup/css/typography.css
@@ -0,0 +1,15 @@
+* {
+    font-family: 'ZillaSlab' !important;
+    color: #ddd;
+}
+
+p,
+a,
+label {
+    font-size: 14pt;
+}
+
+h1,
+h2 {
+    line-height: 1em;
+}
diff --git a/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-Bold.ttf b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-Bold.ttf
new file mode 100644
index 0000000..4a8f06c
Binary files /dev/null and b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-Bold.ttf differ
diff --git a/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-BoldItalic.ttf b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-BoldItalic.ttf
new file mode 100644
index 0000000..a95ccce
Binary files /dev/null and b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-BoldItalic.ttf differ
diff --git a/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-Italic.ttf b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-Italic.ttf
new file mode 100644
index 0000000..27710b7
Binary files /dev/null and b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-Italic.ttf differ
diff --git a/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-Light.ttf b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-Light.ttf
new file mode 100644
index 0000000..d5fa43a
Binary files /dev/null and b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-Light.ttf differ
diff --git a/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-LightItalic.ttf b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-LightItalic.ttf
new file mode 100644
index 0000000..4c5c277
Binary files /dev/null and b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-LightItalic.ttf differ
diff --git a/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-Medium.ttf b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-Medium.ttf
new file mode 100644
index 0000000..c3e9a0f
Binary files /dev/null and b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-Medium.ttf differ
diff --git a/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-MediumItalic.ttf b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-MediumItalic.ttf
new file mode 100644
index 0000000..bd82755
Binary files /dev/null and b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-MediumItalic.ttf differ
diff --git a/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-Regular.ttf b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-Regular.ttf
new file mode 100644
index 0000000..65c5152
Binary files /dev/null and b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-Regular.ttf differ
diff --git a/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-SemiBold.ttf b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-SemiBold.ttf
new file mode 100644
index 0000000..ada960e
Binary files /dev/null and b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-SemiBold.ttf differ
diff --git a/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-SemiBoldItalic.ttf b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-SemiBoldItalic.ttf
new file mode 100644
index 0000000..36d0a72
Binary files /dev/null and b/goodies/chrome-extension/popup/font/zilla-slab/ZillaSlab-SemiBoldItalic.ttf differ
diff --git a/goodies/chrome-extension/popup/image/grid.png b/goodies/chrome-extension/popup/image/grid.png
new file mode 100644
index 0000000..a167f9d
Binary files /dev/null and b/goodies/chrome-extension/popup/image/grid.png differ
diff --git a/goodies/chrome-extension/popup/index.html b/goodies/chrome-extension/popup/index.html
new file mode 100644
index 0000000..64facdc
--- /dev/null
+++ b/goodies/chrome-extension/popup/index.html
@@ -0,0 +1,34 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="css/background.css">
+        <link rel="stylesheet" href="css/typography.css">
+        <link rel="stylesheet" href="css/modular.css">
+        <link rel="stylesheet" href="css/form.css">
+        <link rel="stylesheet" href="css/button.css">
+        <link rel="stylesheet" href="css/font/include.css">
+        <title>Tubio - Companion Extension</title>
+    </head>
+
+    <body>
+        <div class="bgdrop"></div>
+        <div class="bggatter__wrapper">
+            <div class="bggatter"></div>
+        </div>
+        <div class="bgmask"></div>
+
+
+        <h1 class="text-center pt-1">Tubio</h1>
+        <h2 class="text-center">Companion Extension</h2>
+
+        <div class="flex justify-content-center">
+            <div class="flex flex-col align-items-center">
+                <button >Download!</button>
+                
+                <label for="tubio-address" style="margin-top: 3em;">Where can i reach tubio?</label>
+                <input type="text" id="tubio-address" class="text-center" />
+                
+            </div>
+        </div>
+
+    </body>
+</html>