diff --git a/app/static/css/base.css b/app/static/css/base.css
index 16f2a0a..509bbd2 100644
--- a/app/static/css/base.css
+++ b/app/static/css/base.css
@@ -1,3 +1,28 @@
+:root {
+  --background-gradient: linear-gradient(30deg, #f39c12 30%, #f1c40f);
+  --gray: #34495e;
+  --base: #131a13;
+  --step-1: #182517;
+  --step-2: #233221;
+}
+select {
+  /* Reset Select */
+  appearance: none;
+  outline: 0;
+  border: 0;
+  box-shadow: none;
+  /* Personalize */
+  flex: 1;
+  padding: 0 1em;
+  color: #fff;
+  background-color: var(--base);
+  background-image: none;
+  cursor: pointer;
+}
+/* Remove IE arrow */
+select::-ms-expand {
+  display: none;
+}
 *{
     padding: 0;
     margin: 0;
@@ -625,7 +650,9 @@ header > div.menu .menu-item:last-child{
     padding-bottom: 6px;
 
 }
-
+.mr20{
+    margin-right: 20px;
+}
 .visible{
     display: block;
 }
@@ -651,12 +678,31 @@ header > div.menu .menu-item:last-child{
     margin: 0 5px;
     line-height: 36px;
 }
+
 .combo_black{
-    border: 1px solid #966220;
-    background-color: transparent;
-    color: #FFFFFF;
-    padding: 8px 10px;
-    border-radius: 6px;
+    position: relative;
+    display: flex;
+    width: 18em;
+    height: 3em;
+    border-radius: .25em;
+    overflow: hidden;
+    z-index: 100;
+}
+
+.combo_black::after {
+    content: '\25BC';
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 1em;
+    background-color: var(--step-1);
+    transition: .25s all ease;
+    pointer-events: none;
+    z-index: 1000;
+}
+
+.combo_black:hover::after {
+  color: #f39c12;
 }
 
 .tabled-row{
diff --git a/app/templates/base.html b/app/templates/base.html
index c0d5dd3..0592e42 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -29,11 +29,13 @@
         {% comment %}
         {% if request.user.is_authenticated %}
         <div>
-            <select id="org-selector">
-                {% for installation in all_installations %}
-                <option value="{{installation.account_name}}" {% if installation.account_name == current_installation.account_name %}selected="selected"{% endif %}>{{installation.account_name}}</option>
-                {% endfor %}
-            </select>
+            <div class="combo_black">
+                <select id="org-selector">
+                    {% for installation in all_installations %}
+                    <option value="{{installation.account_name}}" {% if installation.account_name == current_installation.account_name %}selected="selected"{% endif %}>{{installation.account_name}}</option>
+                    {% endfor %}
+                </select>
+            </div>
         </div>
         {% endif %}
         {% endcomment %}
diff --git a/app/templates/index.html b/app/templates/index.html
index fd6bc70..f8bbf56 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -77,7 +77,7 @@
                     </div>
 
                     <div class="body-row modal-msg mt27 main-text">
-                        <button class="cta cta-primary" id="code-repo-btn" >Code Repo</button>
+                        <button class="cta cta-primary mr20" id="code-repo-btn" >Code Repo</button>
                         <button class="cta cta-primary" id="doc-repo-btn">Documentation Repo</button>
                     </div>
                 </div>
@@ -110,11 +110,13 @@
                                     Code Repository:
                                 </div>
                                 <div class="row-right">
-                                    <select name="code_repo_id" class="combo_black">
-                                        {% for repo in available_repos_for_mapping %}
-                                        <option value="{{repo.id}}">{{repo.repo_full_name}}</option>
-                                        {% endfor %}
-                                    </select>
+                                    <div class="combo_black">
+                                        <select name="code_repo_id">
+                                            {% for repo in available_repos_for_mapping %}
+                                            <option value="{{repo.id}}">{{repo.repo_full_name}}</option>
+                                            {% endfor %}
+                                        </select>
+                                    </div>
                                 </div>
                             </div>
                             <div class="tabled-row doc-repo-field">
@@ -122,11 +124,13 @@
                                     Documentation Repository:
                                 </div>
                                 <div class="row-right">
-                                    <select name="documentation_repo_id" class="combo_black">
-                                    {% for repo in available_repos_for_mapping %}
-                                    <option value="{{repo.id}}">{{repo.repo_full_name}}</option>
-                                    {% endfor %}
-                                    </select>
+                                    <div class="combo_black">
+                                        <select name="documentation_repo_id">
+                                        {% for repo in available_repos_for_mapping %}
+                                        <option value="{{repo.id}}">{{repo.repo_full_name}}</option>
+                                        {% endfor %}
+                                        </select>
+                                    </div>
                                 </div>
                             </div>
                             <div class="tabled-row">