diff --git a/chrome/app/styles/app.scss b/chrome/app/styles/app.scss
index 0e88234..8940a6f 100644
--- a/chrome/app/styles/app.scss
+++ b/chrome/app/styles/app.scss
@@ -28,10 +28,6 @@ body, button {
   font-family: 'Raleway', sans-serif;
 }
 
-#huegasm {
-  flex: 1;
-}
-
 .ember-app {
   padding-bottom: 50px;
 }
diff --git a/web/app/pods/components/huegasm-app/component.js b/web/app/pods/components/huegasm-app/component.js
index 653d3d3..df18511 100644
--- a/web/app/pods/components/huegasm-app/component.js
+++ b/web/app/pods/components/huegasm-app/component.js
@@ -12,6 +12,7 @@ export default Component.extend({
   trial: false,
   ready: false,
   elementId: 'huegasm',
+  classNameBindings: ['bridgeUsername::display-flex'],
 
   init() {
     this._super(...arguments);
diff --git a/web/app/styles/app.scss b/web/app/styles/app.scss
index d550768..7049b62 100644
--- a/web/app/styles/app.scss
+++ b/web/app/styles/app.scss
@@ -28,6 +28,8 @@ body, button {
 
 #huegasm {
   flex: 1;
+  justify-content: center;
+  align-items: center;
 }
 
 .ember-app {
@@ -91,7 +93,7 @@ div.ember-modal-dialog {
   min-height: 50vh;
   min-height: 200px;
   display: flex;
-  margin-bottom: 20px;
+  margin-bottom: 15px;
   padding: 10px 0;
   #intro-wrapper {
     width: 80%;
@@ -121,11 +123,7 @@ div.ember-modal-dialog {
 // fancy webkit scrollbars
 @media(min-width:767px) {
   #intro {
-    padding: 3vh 0;
-  }
-
-  #intro-paragraph {
-    padding-bottom: 2vh;
+    padding: 1vh 0 3vh;
   }
 
   ::-webkit-scrollbar {
diff --git a/web/app/styles/bridge-finder.scss b/web/app/styles/bridge-finder.scss
index 562873e..1bb6577 100644
--- a/web/app/styles/bridge-finder.scss
+++ b/web/app/styles/bridge-finder.scss
@@ -67,4 +67,8 @@
   width: 100px;
   height: 100px;
   font-size: 28px;
+  transition: all .1s linear;
+  &:hover {
+    background-color: darken(#f44336, 7%) !important;
+  }
 }