diff --git a/pages/index.vue b/pages/index.vue
index 1ecae80..07c7849 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -566,543 +566,8 @@ export default {
 </script>
 
 <style lang="scss">
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap');
-
-@keyframes run {
-  0% { transform: translateX(125%) translateY(-125%); }
-  100% { transform: translateX(-125%) translateY(100%); }
-}
-
-@keyframes fill {
-  0% { bottom: 0; }
-  100% { bottom: 100%; }
-}
-
-::selection { background: rgba(172,206,247,0.25); }
-::-moz-selection { background: rgba(172,206,247,0.25); }
-
-html { box-sizing: border-box; }
-
-*, *:before, *:after { box-sizing: inherit; }
-
-body {
-  margin: 0;
-  min-height: 100vh;
-  font-family: Arial, Helvetica, sans-serif;
-  color: #1e1e1e;
-  background: #1e1e1e;
-  user-select: none;
-}
-
-input {
-  font-size: 14px;
-}
-
-nav {
-  background: #000;
-  height: 60px;
-  position: fixed;
-  left: 0;
-  top: 0;
-  right: 0;
-  z-index: 999;
-}
-
-h1 {
-  margin: 0;
-  line-height: 60px;
-  color: #fff;
-  font-weight: normal;
-  font-family: "Space Grotesk",Arial, Helvetica, sans-serif;
-  padding-left: 20px;
-  color: #e2d372;
-  font-weight: 700;
-  font-size: 18px;
-  letter-spacing: 1px;
-}
-
-h2 {
-  margin: 0 0 18px;
-  font-weight: 500;
-  font-family: montserrat, Arial, Helvetica, sans-serif;
-  font-size: 1.17em;
-
-}
-
-h3 {
-  margin: 0;
-  margin-bottom: 15px;
-  font-weight: 500;
-  font-family: montserrat, Arial, Helvetica, sans-serif;
-  color: #1e1e1e;
-  display: flex;
-  align-items: center;
-  input {
-    border: 0;
-    font-weight: 500;
-    font-family: montserrat, Arial, Helvetica, sans-serif;
-    color: #1e1e1e;
-    font-size: 18px;
-  }
-  &:last-child {
-    margin: 0;
-  }
-  svg {
-    width: 24px;
-    height: auto;
-    margin-right: 5px;
-    margin-left: 0px;
-    fill: #888;
-  }
-  i {
-    color:#aaa;
-    padding-left:4px;
-    font-size:18px;
-    font-weight: 400;
-    font-style: normal;
-    display: none;
-  }
-}
-
-button {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-}
-
-pre {
-  color: #fff;
-  overflow: auto;
-  margin: 10px 0 0 0;
-  padding: 0;
-  user-select: text;
-  height: calc(100vh - 130px);
-}
-
-button.copy-btn {
-  position: absolute;
-  right: 5px;
-  display: flex;
-  flex-flow: column;
-  color: rgba(202, 202, 202, 0.94);
-  font-weight: 700;
-  font-size: 13px;
-  margin-top: 5px;
-  &:hover {
-    color: #ffff;
-  }
-}
-
-
-nav button {
-  background: #e1d472;
-  padding: 8px 15px;
-  border-radius: 2px;
-}
-
-input[type="text"]:focus {
-  background: #f6fbf6;
-}
-
-.json:not(.hljs) {
-  color: transparent !important;
-}
-
-.hljs {
-  background: transparent;
-  padding: 0 !important;
-  &.language-css {
-    color: #ddd;
-    .hljs-attr {
-      padding-left: 20px;
-    }
-  }
-  &.language-scss {
-    color: #ddd;
-  }
-  .hljs-built_in {
-    color: #d8d7ac;
-  }
-  .hljs-variable,
-  .hljs-attr {
-    color: #98d6f7;
-  }
-  .hljs-selector-pseudo {
-    color: #cdb682;
-  }
-  .hljs-string {
-    color: #ce9178;
-  }
-  .hljs-number {
-    color: #baccab;
-  }
-  .hljs-punctuation {
-    color: #d4d4d4;
-  }
-}
-
-
-button.add-token {
-  color: #888;
-  display: inline-flex;
-  align-items: center;
-  svg {
-    stroke: #888;
-    margin-right: 3px;
-  }
-  &:hover {
-    color: #01579b;
-
-    svg {
-      stroke: #01579b;
-    }
-  }
-}
-
-.output {
-  padding: 15px;
-  padding-left: 0;
-  background: #1e1e1e;
-  color: #fff;
-  width: 450px;
-  position: fixed;
-  right: 0;
-  top: 60px;
-  bottom: 0;
-  @media only screen and (max-width: 1340px) {
-    width: 350px;
-  }
-  @media only screen and (max-width: 1120px) {
-    position: relative;
-    top: 0;
-    padding-left: 15px;
-    width: 100%;
-  }
-
-  > div {
-    background: #1e1e1e;
-    background: #151515;
-    //border: 1px solid #444;
-    padding: 10px;
-    padding-right: 15px;
-    padding-top: 30px;
-    color: #fff;
-    border-radius: 3px;
-  }
-  .export-options {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: #333;
-    display: flex;
-    font-size: 14px;
-
-
-    > div {
-      flex: 1;
-      text-align: center;
-      padding: 7px 10px;
-      cursor: pointer;
-      opacity: 0.75;
-      border-right: 1px solid #1e1e1e;
-
-      &:hover {
-        opacity: 1;
-      }
-
-      &.active {
-        background: #151515;
-        font-weight: bold;
-        opacity: 1;
-      }
-    }
-  }
-
-  .theo-specs-radio {
-    position: absolute;
-    right: 20px;
-    display: flex;
-    flex-flow: column;
-    margin-top: 5px;
-
-    > div {
-      display: flex;
-
-      &:first-child {
-        margin-bottom: 8px;
-      }
-    }
-  }
-}
-
-
-
-.container {
-  display: flex;
-  padding-left: 220px;
-  padding-right: 450px;
-  padding-top: 60px;
-  @media only screen and (max-width: 1340px) {
-    padding-right: 350px;
-  }
-  @media only screen and (max-width: 1240px) {
-    padding-left: 0px;
-  }
-  @media only screen and (max-width: 1120px) {
-    padding-right: 0px;
-    flex-direction: column;
-  }
-  > * {
-    flex: 1;
-  }
-  .content {
-    padding: 20px;
-    position: relative;
-    background: #1e1e1e;
-    color: #fff;
-
-    button {
-      padding: 5px 10px;
-    }
-  }
-}
-
-
-
-.sidebar {
-  width: 210px;
-   background: #1e1e1e;
-  color: #fff;
-  height: 100vh;
-  overflow: auto;
-  padding-top: 20px;
-  position: fixed;
-  padding-left: 10px;
-  top: 60px;
-  left: 0;
-  @media only screen and (max-width: 1240px) {
-    transform: translateX(-100%);
-  }
-  h2 {
-    padding-top: 0;
-    padding-left: 10px;
-    margin-bottom: 10px;
-  }
-  .sidebar-item:hover {
-    opacity: 1;
-  }
-  .sidebar-titleitem {
-      opacity: 0.75;
-      padding: 10px;
-      padding-left: 15px;
-      margin-bottom: 5px;
-    }
-  .active > .sidebar-titleitem {
-    background: #fff;
-    color: #1e1e1e;
-    border-radius: 3px;
-    opacity: 1;
-  }
-  .sidebar-subitem {
-    padding-left: 20px;
-    margin-top: 10px;
-
-    > a {
-      margin-bottom: 8px;
-      opacity: 0.75;
-      display: block;
-      text-decoration: none;
-      color: #fff;
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-  button {
-    padding: 5px 10px;
-    position: absolute;
-    top: 15px;
-    right: 10px;
-  }
-  > {
-    * {
-      cursor: pointer;
-    }
-
-  }
-}
-
-
-
-
-.token-group {
-  border-radius: 3px;
-  color: #888;
-  position: absolute;
-  top: 15px;
-  right: 20px;
-  display: flex;
-  gap: 10px;
-  > * {
-    flex: 1;
-  }
-  button {
-    color:#333;
-    padding: 10px 15px !important;
-    border-radius: 2px;
-
-    background: #fff;
-    display: inline-flex;
-    align-items: center;
-    svg {
-      width: 20px;
-      margin-right: 5px;
-      fill: #ddd;
-      display: none;
-    }
-    &:hover {
-      background: #eee;
-    }
-  }
-}
-
-
-
-.single-token {
-  margin-bottom: 12px;
-  position: relative;
-  background: #fff;
-  padding: 20px;
-  padding-top: 15px;
-  border-radius: 3px;
-  box-shadow: 0 0 6px #000;
-
-  &:not(:last-child):before {
-    content: "";
-    background: #fff;
-    width: 5px;
-    height: 15px;
-    position: absolute;
-    bottom: -15px;
-    left: 25px;
-    z-index: 9;
-  }
-  .variants {
-  max-height: 270px;
-  overflow: auto;
-  }
-  .single-variant {
-    margin-bottom: 10px;
-    width: 100%;
-    display: flex;
-    gap: 5px;
-
-    > * {
-      flex: 1;
-    }
-
-    button {
-      position: relative;
-      top: 0;
-      right: 0;
-    }
-    input {
-      padding: 11px;
-      border: 1px #ccc solid;
-      border-radius: 2px;
-    }
-    > *:last-child {
-      max-width: 35px;
-      min-width: 35px;
-
-      svg {
-        stroke: #888;
-        stroke-width: 9px;
-      }
-
-      &:hover svg {
-        stroke: red;
-      }
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
-
-
-.actions {
-  position: absolute;
-  top: 15px;
-  right: 18px;
-  select {
-    border: 0;
-    border-radius: 2px;
-    color: #666;
-    max-width: 125px;
-    text-align: right;
-    background: #fff;
-    cursor: pointer;
-    &:hover {
-      color: #333;
-    }
-    }
-
-  button {
-    padding-left: 0 !important;
-
-    svg {
-      width: 18px;
-      fill: #888;
-
-    }
-    &:hover svg {
-      fill: red;
-    }
-  }
-}
-
-
-.content-tokens {
-  display: flex;
-  flex-direction: column;
-  &:empty:after {
-    content: "No Tokens in this set. \a Add one to start!";
-    background: #151515;
-    white-space: pre;
-    line-height: 24px;
-    color: #ddd;
-    padding: 35px 20px;
-    text-align: center;
-  }
-}
-
-.top-actions {
-  position: absolute;
-  top: 12px;
-  right: 15px;
-  @media only screen and (max-width: 1120px) {
-    display: none;
-  }
-  a,
-  button {
-    display:inline-block;
-    padding: 8px 15px;
-    font-family: "Space Grotesk",Arial, Helvetica, sans-serif;
-    margin-left: 10px;
-    text-decoration: none;
-    font-size: 13px;
-  }
-}
-
-button[disabled] {
-  opacity: 0.5;
-  cursor: initial;
-
-}
-
+  @import "./styles/global-ui.scss";
+  @import "./styles/sidebar.scss";
+  @import "./styles/main-content.scss";
+  @import "./styles/output.scss";
 </style>
diff --git a/styles/global-ui.scss b/styles/global-ui.scss
new file mode 100644
index 0000000..56ef03b
--- /dev/null
+++ b/styles/global-ui.scss
@@ -0,0 +1,160 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap');
+
+@keyframes run {
+  0% { transform: translateX(125%) translateY(-125%); }
+  100% { transform: translateX(-125%) translateY(100%); }
+}
+
+@keyframes fill {
+  0% { bottom: 0; }
+  100% { bottom: 100%; }
+}
+
+::selection { background: rgba(172,206,247,0.25); }
+::-moz-selection { background: rgba(172,206,247,0.25); }
+
+html { box-sizing: border-box; }
+
+*, *:before, *:after { box-sizing: inherit; }
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: Arial, Helvetica, sans-serif;
+  color: #1e1e1e;
+  background: #1e1e1e;
+  user-select: none;
+}
+
+input {
+  font-size: 14px;
+}
+
+nav {
+  background: #000;
+  height: 60px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  z-index: 999;
+}
+
+h1 {
+  margin: 0;
+  line-height: 60px;
+  color: #fff;
+  font-weight: normal;
+  font-family: "Space Grotesk",Arial, Helvetica, sans-serif;
+  padding-left: 20px;
+  color: #e2d372;
+  font-weight: 700;
+  font-size: 18px;
+  letter-spacing: 1px;
+}
+
+h2 {
+  margin: 0 0 18px;
+  font-weight: 500;
+  font-family: montserrat, Arial, Helvetica, sans-serif;
+  font-size: 1.17em;
+
+}
+
+h3 {
+  margin: 0;
+  margin-bottom: 15px;
+  font-weight: 500;
+  font-family: montserrat, Arial, Helvetica, sans-serif;
+  color: #1e1e1e;
+  display: flex;
+  align-items: center;
+  input {
+    border: 0;
+    font-weight: 500;
+    font-family: montserrat, Arial, Helvetica, sans-serif;
+    color: #1e1e1e;
+    font-size: 18px;
+  }
+  &:last-child {
+    margin: 0;
+  }
+  svg {
+    width: 24px;
+    height: auto;
+    margin-right: 5px;
+    margin-left: 0px;
+    fill: #888;
+  }
+  i {
+    color:#aaa;
+    padding-left:4px;
+    font-size:18px;
+    font-weight: 400;
+    font-style: normal;
+    display: none;
+  }
+}
+
+button {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+pre {
+  color: #fff;
+  overflow: auto;
+  margin: 10px 0 0 0;
+  padding: 0;
+  user-select: text;
+  height: calc(100vh - 130px);
+}
+
+nav button {
+  background: #e1d472;
+  padding: 8px 15px;
+  border-radius: 2px;
+}
+
+input[type="text"]:focus {
+  background: #f6fbf6;
+}
+
+.json:not(.hljs) {
+  color: transparent !important;
+}
+
+.hljs {
+  background: transparent;
+  padding: 0 !important;
+  &.language-css {
+    color: #ddd;
+    .hljs-attr {
+      padding-left: 20px;
+    }
+  }
+  &.language-scss {
+    color: #ddd;
+  }
+  .hljs-built_in {
+    color: #d8d7ac;
+  }
+  .hljs-variable,
+  .hljs-attr {
+    color: #98d6f7;
+  }
+  .hljs-selector-pseudo {
+    color: #cdb682;
+  }
+  .hljs-string {
+    color: #ce9178;
+  }
+  .hljs-number {
+    color: #baccab;
+  }
+  .hljs-punctuation {
+    color: #d4d4d4;
+  }
+}
\ No newline at end of file
diff --git a/styles/main-content.scss b/styles/main-content.scss
new file mode 100644
index 0000000..0e815ec
--- /dev/null
+++ b/styles/main-content.scss
@@ -0,0 +1,214 @@
+button.add-token {
+  color: #888;
+  display: inline-flex;
+  align-items: center;
+  svg {
+    stroke: #888;
+    margin-right: 3px;
+  }
+  &:hover {
+    color: #01579b;
+
+    svg {
+      stroke: #01579b;
+    }
+  }
+}
+
+.container {
+  display: flex;
+  padding-left: 220px;
+  padding-right: 450px;
+  padding-top: 60px;
+  @media only screen and (max-width: 1340px) {
+    padding-right: 350px;
+  }
+  @media only screen and (max-width: 1240px) {
+    padding-left: 0px;
+  }
+  @media only screen and (max-width: 1120px) {
+    padding-right: 0px;
+    flex-direction: column;
+  }
+  > * {
+    flex: 1;
+  }
+  .content {
+    padding: 20px;
+    position: relative;
+    background: #1e1e1e;
+    color: #fff;
+
+    button {
+      padding: 5px 10px;
+    }
+  }
+}
+
+.token-group {
+  border-radius: 3px;
+  color: #888;
+  position: absolute;
+  top: 15px;
+  right: 20px;
+  display: flex;
+  gap: 10px;
+  > * {
+    flex: 1;
+  }
+  button {
+    color:#333;
+    padding: 10px 15px !important;
+    border-radius: 2px;
+
+    background: #fff;
+    display: inline-flex;
+    align-items: center;
+    svg {
+      width: 20px;
+      margin-right: 5px;
+      fill: #ddd;
+      display: none;
+    }
+    &:hover {
+      background: #eee;
+    }
+  }
+}
+
+
+
+.single-token {
+  margin-bottom: 12px;
+  position: relative;
+  background: #fff;
+  padding: 20px;
+  padding-top: 15px;
+  border-radius: 3px;
+  box-shadow: 0 0 6px #000;
+
+  &:not(:last-child):before {
+    content: "";
+    background: #fff;
+    width: 5px;
+    height: 15px;
+    position: absolute;
+    bottom: -15px;
+    left: 25px;
+    z-index: 9;
+  }
+  .variants {
+  max-height: 270px;
+  overflow: auto;
+  }
+  .single-variant {
+    margin-bottom: 10px;
+    width: 100%;
+    display: flex;
+    gap: 5px;
+
+    > * {
+      flex: 1;
+    }
+
+    button {
+      position: relative;
+      top: 0;
+      right: 0;
+    }
+    input {
+      padding: 11px;
+      border: 1px #ccc solid;
+      border-radius: 2px;
+    }
+    > *:last-child {
+      max-width: 35px;
+      min-width: 35px;
+
+      svg {
+        stroke: #888;
+        stroke-width: 9px;
+      }
+
+      &:hover svg {
+        stroke: red;
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+
+
+.actions {
+  position: absolute;
+  top: 15px;
+  right: 18px;
+  select {
+    border: 0;
+    border-radius: 2px;
+    color: #666;
+    max-width: 125px;
+    text-align: right;
+    background: #fff;
+    cursor: pointer;
+    &:hover {
+      color: #333;
+    }
+    }
+
+  button {
+    padding-left: 0 !important;
+
+    svg {
+      width: 18px;
+      fill: #888;
+
+    }
+    &:hover svg {
+      fill: red;
+    }
+  }
+}
+
+
+.content-tokens {
+  display: flex;
+  flex-direction: column;
+  &:empty:after {
+    content: "No Tokens in this set. \a Add one to start!";
+    background: #151515;
+    white-space: pre;
+    line-height: 24px;
+    color: #ddd;
+    padding: 35px 20px;
+    text-align: center;
+  }
+}
+
+.top-actions {
+  position: absolute;
+  top: 12px;
+  right: 15px;
+  @media only screen and (max-width: 1120px) {
+    display: none;
+  }
+  a,
+  button {
+    display:inline-block;
+    padding: 8px 15px;
+    font-family: "Space Grotesk",Arial, Helvetica, sans-serif;
+    margin-left: 10px;
+    text-decoration: none;
+    font-size: 13px;
+  }
+}
+
+button[disabled] {
+  opacity: 0.5;
+  cursor: initial;
+
+}
\ No newline at end of file
diff --git a/styles/output.scss b/styles/output.scss
new file mode 100644
index 0000000..15c4760
--- /dev/null
+++ b/styles/output.scss
@@ -0,0 +1,90 @@
+.output {
+  padding: 15px;
+  padding-left: 0;
+  background: #1e1e1e;
+  color: #fff;
+  width: 450px;
+  position: fixed;
+  right: 0;
+  top: 60px;
+  bottom: 0;
+  @media only screen and (max-width: 1340px) {
+    width: 350px;
+  }
+  @media only screen and (max-width: 1120px) {
+    position: relative;
+    top: 0;
+    padding-left: 15px;
+    width: 100%;
+  }
+
+  > div {
+    background: #1e1e1e;
+    background: #151515;
+    //border: 1px solid #444;
+    padding: 10px;
+    padding-right: 15px;
+    padding-top: 30px;
+    color: #fff;
+    border-radius: 3px;
+  }
+  .export-options {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: #333;
+    display: flex;
+    font-size: 14px;
+
+
+    > div {
+      flex: 1;
+      text-align: center;
+      padding: 7px 10px;
+      cursor: pointer;
+      opacity: 0.75;
+      border-right: 1px solid #1e1e1e;
+
+      &:hover {
+        opacity: 1;
+      }
+
+      &.active {
+        background: #151515;
+        font-weight: bold;
+        opacity: 1;
+      }
+    }
+  }
+
+  .theo-specs-radio {
+    position: absolute;
+    right: 20px;
+    display: flex;
+    flex-flow: column;
+    margin-top: 5px;
+
+    > div {
+      display: flex;
+
+      &:first-child {
+        margin-bottom: 8px;
+      }
+    }
+  }
+
+  button.copy-btn {
+    position: absolute;
+    right: 5px;
+    display: flex;
+    flex-flow: column;
+    color: rgba(202, 202, 202, 0.94);
+    font-weight: 700;
+    font-size: 13px;
+    margin-top: 5px;
+    &:hover {
+      color: #ffff;
+    }
+  }
+}
diff --git a/styles/sidebar.scss b/styles/sidebar.scss
new file mode 100644
index 0000000..b12ebbc
--- /dev/null
+++ b/styles/sidebar.scss
@@ -0,0 +1,62 @@
+.sidebar {
+  width: 210px;
+   background: #1e1e1e;
+  color: #fff;
+  height: 100vh;
+  overflow: auto;
+  padding-top: 20px;
+  position: fixed;
+  padding-left: 10px;
+  top: 60px;
+  left: 0;
+  @media only screen and (max-width: 1240px) {
+    transform: translateX(-100%);
+  }
+  h2 {
+    padding-top: 0;
+    padding-left: 10px;
+    margin-bottom: 10px;
+  }
+  .sidebar-item:hover {
+    opacity: 1;
+  }
+  .sidebar-titleitem {
+      opacity: 0.75;
+      padding: 10px;
+      padding-left: 15px;
+      margin-bottom: 5px;
+    }
+  .active > .sidebar-titleitem {
+    background: #fff;
+    color: #1e1e1e;
+    border-radius: 3px;
+    opacity: 1;
+  }
+  .sidebar-subitem {
+    padding-left: 20px;
+    margin-top: 10px;
+
+    > a {
+      margin-bottom: 8px;
+      opacity: 0.75;
+      display: block;
+      text-decoration: none;
+      color: #fff;
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+  button {
+    padding: 5px 10px;
+    position: absolute;
+    top: 15px;
+    right: 10px;
+  }
+  > {
+    * {
+      cursor: pointer;
+    }
+
+  }
+}
\ No newline at end of file