diff --git a/static/css/directives/ui/strength-indicator.css b/static/css/directives/ui/strength-indicator.css
index dcd20638e..12c30d308 100644
--- a/static/css/directives/ui/strength-indicator.css
+++ b/static/css/directives/ui/strength-indicator.css
@@ -1,42 +1,71 @@
+.strength-indicator {
+  display: inline-block;
+}
+
 .strength-indicator .indicator-sliver {
-  margin: 1px;
-  width: 14px;
-  height: 3px;
+  display: inline-block;
+  margin: 0px;
+  margin-right: 2px;
+  width: 4px;
   border: 1px solid #D5D5D5;
   transition: 0.5s ease;
 }
 
-.strength-indicator .strength-indicator-element.good .indicator-sliver {
-  background: green;
-  border: 1px solid green;
+.strength-indicator .strength-indicator-element .indicator-sliver:nth-child(1) {
+  height: 10px;
 }
 
+.strength-indicator .strength-indicator-element .indicator-sliver:nth-child(2) {
+  height: 14px;
+}
+
+.strength-indicator .strength-indicator-element .indicator-sliver:nth-child(3) {
+  height: 18px;
+}
+
+.strength-indicator .strength-indicator-element .indicator-sliver:nth-child(4) {
+  height: 22px;
+}
+
+/** Good */
+
+.strength-indicator .strength-indicator-element.good .indicator-sliver {
+  background: #83D29C;
+  border-color: #83D29C;
+}
+
+/** Fair */
+
 .strength-indicator .strength-indicator-element.fair .indicator-sliver {
-  background: orange;
-  border: 1px solid orange;
+  background: #E4C212;
+  border-color: #E4C212;
 }
 
 .strength-indicator .strength-indicator-element.fair .indicator-sliver:last-child {
-  border: 1px solid #D5D5D5;
   background: transparent;
+  border-color: #D5D5D5;
 }
 
+/** Bairly */
+
 .strength-indicator .strength-indicator-element.barely .indicator-sliver {
-  background: rgb(255, 61, 0);
-  border: 1px solid rgb(255, 61, 0);
+  background: rgb(255, 155, 0);
+  border-color: rgb(255, 155, 0);
 }
 
 .strength-indicator .strength-indicator-element.barely .indicator-sliver:last-child {
-  border: 1px solid #D5D5D5;
   background: transparent;
+  border-color: #D5D5D5;
 }
 
 .strength-indicator .strength-indicator-element.barely .indicator-sliver:nth-child(3) {
-  border: 1px solid #D5D5D5;
   background: transparent;
+  border-color: #D5D5D5;
 }
 
+/** Poor */
+
 .strength-indicator .strength-indicator-element.poor .indicator-sliver:first-child {
-  border: 1px solid red;
   background: red;
+  border-color: red;
 }
\ No newline at end of file
diff --git a/static/directives/strength-indicator.html b/static/directives/strength-indicator.html
index 439b53639..a63642f9f 100644
--- a/static/directives/strength-indicator.html
+++ b/static/directives/strength-indicator.html
@@ -1,6 +1,3 @@
 <span class="strength-indicator-element" ng-class="strengthClass">
-  <span class="indicator-sliver"></span>
-  <span class="indicator-sliver"></span>
-  <span class="indicator-sliver"></span>
-  <span class="indicator-sliver"></span>
+  <span class="indicator-sliver"></span><span class="indicator-sliver"></span><span class="indicator-sliver"></span><span class="indicator-sliver"></span>
 </span>
\ No newline at end of file