diff --git a/css/style.css b/css/style.css
new file mode 100644
index 00000000..5e732eeb
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,99 @@
+h1 {
+  margin-bottom: 3rem; }
+
+.popover {
+  padding: 0; }
+
+.popover-content {
+  padding: 10px 24px; }
+
+.popover-title.menu-tabs {
+  padding: .5rem .5rem 0;
+  display: block; }
+
+.popover-title.menu-button-group {
+  display: none; }
+
+.popover-title.menu-tabs .nav-tabs {
+  position: relative;
+  top: 1px; }
+
+.popover.bottom > .arrow:after {
+  border-bottom-color: #f7f7f7; }
+
+.popover-actions {
+  padding: 8px 14px;
+  margin: 0;
+  font-size: 14px;
+  background-color: #f7f7f7;
+  border-top: 1px solid #ebebeb;
+  border-radius: 0 0 5px 5px;
+  text-align: right; }
+
+.select2-container {
+  z-index: 100000; }
+
+.scancode--explanation {
+  color: lightgray;
+  float: right; }
+
+.layout-abbreviation {
+  font-weight: bold;
+  color: #FFF;
+  background: #333;
+  padding: 4px 8px;
+  font-family: monospace;
+  margin-right: .5em; }
+
+.layout-preview img {
+  max-width: 100%;
+  margin-top: 10px; }
+
+.key-editor--none__description p {
+  padding: 2rem 0;
+  margin: 0;
+  text-align: center;
+  font-style: italic;
+  color: #999; }
+
+.key-editor--none__description .icon {
+  font-size: 5rem;
+  color: #feefef;
+  position: absolute;
+  z-index: 0;
+  left: 50%;
+  margin-left: -2.5rem;
+  top: 50%;
+  margin-top: -2.5rem; }
+
+.select2-item {
+  position: relative;
+  font-size: 1.5rem; }
+
+.select2-item.keymap-name--wrapper {
+  padding-left: 50px; }
+
+.select2-item .layout-segment-code {
+  height: 2rem;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  margin-top: -1rem; }
+
+.preview-wrapper img {
+  max-width: 100%; }
+
+.global-key-setup.disabled {
+  opacity: 0; }
+
+.global-key-setup.disabled .setting-label,
+.setting-label.disabled {
+  color: #999; }
+
+.global-key-setup--wrapper {
+  position: relative; }
+
+.global-key-setup--wrapper .disabled-state--text {
+  position: absolute;
+  top: 50%;
+  margin-top: -4rem; }
diff --git a/popup__iframe.html b/popup__iframe.html
index 5c8feeee..fed1250a 100644
--- a/popup__iframe.html
+++ b/popup__iframe.html
@@ -4,7 +4,7 @@
   <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
   <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="node_modules/select2/dist/css/select2.min.css" rel="stylesheet">
-  <link href="style.css" rel="stylesheet">
+  <link href="css/style.css" rel="stylesheet">
   <meta charset="utf-8">
   <title>Ultimate Hacking Keyboard - Agent mockups</title>
 </head>
diff --git a/style.css b/sass/style.scss
similarity index 100%
rename from style.css
rename to sass/style.scss