diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
index e7df39212..d349b5f3a 100644
--- a/RELEASE-NOTES.md
+++ b/RELEASE-NOTES.md
@@ -20,6 +20,7 @@
 - **Item** - Item now uses `flexbox` for layout
 - **Message** - `icon message` now uses `flexbox`
 - **Input** - All `input` types use `flexbox`
+- **Steps** - Steps now use `flexbox`, the default horizontal theme has the active element point downward now instead of to the right. Steps no longer need `item count` and will automatically divide evenly
 
 **Enhancements**
 - **Build Tools** - Adjusting `site.variables` will now rebuild all UI, instead of just `site.less`
@@ -105,6 +106,7 @@
 - **Reveal** - Removed `masked` reveal, all reveals are masked by default
 - **Search** - Fixed `onSelect` returning the first term that matches the beginining of the selected value not the exact value.
 - **Search** - Search API calls now use the same level debug settings as search
+- **Steps** - Fixed bug where `stackable steps` were not working correctly
 - **Tab** - Tab name is no longer case sensitive
 - **Table** - Fixes `ascending` and `descending` icons were reversed in table
 - **Table** - `very basic table` now works together with `padded table`
diff --git a/src/definitions/elements/step.less b/src/definitions/elements/step.less
index 270f607e8..8277ffd45 100755
--- a/src/definitions/elements/step.less
+++ b/src/definitions/elements/step.less
@@ -23,17 +23,55 @@
 
 @import (multiple) '../../theme.config';
 
+/*******************************
+            Plural
+*******************************/
+
+.ui.steps {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: stretch;
+  background: @stepsBackground;
+  box-shadow: @stepsBoxShadow;
+  line-height: @lineHeight;
+  border-radius: @stepsBorderRadius;
+}
+
+.ui.steps .step:first-child {
+  padding-left: @horizontalPadding;
+  border-radius: @stepsBorderRadius 0em 0em @stepsBorderRadius;
+}
+.ui.steps .step:last-child {
+  border-radius: 0em @stepsBorderRadius @stepsBorderRadius 0em;
+}
+.ui.steps .step:only-child {
+  -webkit-border-radius: @stepsBorderRadius;
+  -moz-border-radius: @stepsBorderRadius;
+  border-radius: @stepsBorderRadius;
+}
+
+.ui.steps .step:last-child {
+  margin-right: 0em;
+}
+.ui.steps .step:last-child:after {
+  display: none;
+}
+
 /*******************************
            Singular
 *******************************/
 
 .ui.steps .step {
   position: relative;
-  display: table-cell;
+  display: flex;
+  flex: 1 0 auto;
+  flex-wrap: wrap;
+  flex-direction: row;
   vertical-align: middle;
+  align-items: center;
 
   margin: @verticalMargin @horizontalMargin;
-  padding: @verticalPadding @horizontalPadding @verticalPadding @leftPadding;
+  padding: @verticalPadding @horizontalPadding;
   background: @background;
   color: @textColor;
   box-shadow: @boxShadow;
@@ -51,8 +89,11 @@
   background-color: @arrowBackgroundColor;
   width: @arrowSize;
   height: @arrowSize;
-  border-bottom: 1px solid @arrowBorderColor;
-  border-right: 1px solid @arrowBorderColor;
+
+  border-style: solid;
+  border-color: @borderColor;
+  border-width: @arrowBorderWidth;
+
   transform: translateY(-50%) translateX(50%) rotate(-45deg);
 }
 
@@ -61,42 +102,6 @@
   transition: @transition;
 }
 
-/*******************************
-            Plural
-*******************************/
-
-.ui.steps {
-  display: table;
-  table-layout: fixed;
-  background: @stepsBackground;
-  box-shadow: @stepsBoxShadow;
-
-  line-height: @lineHeight;
-  box-sizing: border-box;
-  border-radius: @stepsBorderRadius;
-}
-
-.ui.steps .step:first-child {
-  padding-left: @horizontalPadding;
-  border-radius: @stepsBorderRadius 0em 0em @stepsBorderRadius;
-}
-.ui.steps .step:last-child {
-  border-radius: 0em @stepsBorderRadius @stepsBorderRadius 0em;
-}
-.ui.steps .step:only-child {
-  -webkit-border-radius: @stepsBorderRadius;
-  -moz-border-radius: @stepsBorderRadius;
-  border-radius: @stepsBorderRadius;
-}
-
-.ui.steps .step:last-child {
-  margin-right: 0em;
-}
-.ui.steps .step:last-child:after {
-  display: none;
-}
-
-
 /*******************************
             Content
 *******************************/
@@ -107,6 +112,9 @@
   font-size: @titleFontSize;
   font-weight: @titleFontWeight;
 }
+.ui.steps .step > .title {
+  width: 100%;
+}
 
 /* Description */
 .ui.steps .step .description {
@@ -114,20 +122,31 @@
   font-size: @descriptionFontSize;
   color: @descriptionColor;
 }
+.ui.steps .step > .description {
+  width: 100%;
+}
 .ui.steps .step .title ~ .description {
   margin-top: @descriptionDistance;
 }
 
 /* Icon */
+.ui.steps .step > .icon {
+  font-size: @iconSize;
+  margin: 0em @iconDistance 0em 0em;
+}
 .ui.steps .step > .icon,
 .ui.steps .step > .icon ~ .content {
-  display: table-cell;
-  vertical-align: @iconVerticalAlign;
+  display: block;
+  flex: 0 1 auto;
+  align-self: @iconAlign;
 }
-.ui.steps .step > .icon {
-  font-size: @iconSize;
-  margin: 0em;
-  padding-right: @iconDistance;
+.ui.steps .step > .icon ~ .content {
+  flex-grow: 1 0 auto;
+}
+
+/* Horizontal Icon */
+.ui.steps:not(.vertical) .step > .icon {
+  width: auto;
 }
 
 /* Link */
@@ -148,19 +167,21 @@
   counter-reset: ordered;
 }
 .ui.ordered.steps .step:before {
-  display: table-cell;
+  display: block;
   position: static;
   text-align: center;
   content: counters(ordered, ".");
-  vertical-align: @iconVerticalAlign;
-  padding-right: @iconDistance;
+  align-self: @iconAlign;
+  margin-right: @iconDistance;
   font-size: @iconSize;
   counter-increment: ordered;
+  font-family: @orderedFontFamily;
+  font-weight: @orderedFontWeight;
 }
 
 .ui.ordered.steps .step > * {
-  display: table-cell;
-  vertical-align: @iconVerticalAlign;
+  display: block;
+  align-self: @iconAlign;
 }
 
 
@@ -169,11 +190,11 @@
 ---------------*/
 
 .ui.vertical.steps {
-  display: inline-block;
+  display: inline-flex;
+  flex-direction: column;
   overflow: visible;
 }
 .ui.vertical.steps .step {
-  display: block;
   border-radius: @borderRadius;
   padding: @verticalPadding @horizontalPadding;
 }
@@ -189,6 +210,12 @@
 .ui.vertical.steps .step:after {
   display: none;
 }
+.ui.vertical.steps .step:after {
+  top: @verticalArrowTopOffset;
+  right: @verticalArrowRightOffset;
+  border-width: @verticalArrowBorderWidth;
+}
+
 
 /* Active Arrow */
 .ui.vertical.steps .active.step:after {
@@ -307,27 +334,27 @@
 
 
 /* Tablet Or Below */
-@media only screen and (min-width: @computerBreakpoint) {
-
-.ui[class*="tablet stackable"].steps {
-  overflow: visible;
-}
-.ui[class*="tablet stackable"].steps .step {
-  display: block;
-  border-radius: @borderRadius;
-  padding: @verticalPadding @horizontalPadding;
-}
-.ui[class*="tablet stackable"].steps .step:first-child {
-  padding: @verticalPadding @horizontalPadding;
-  border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
-}
-.ui[class*="tablet stackable"].steps .step:last-child {
-  border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
-}
-/* Arrow */
-.ui[class*="tablet stackable"].steps .step:after {
-  display: none;
-}
+@media only screen and (max-width: @computerBreakpoint) {
+
+  .ui[class*="tablet stackable"].steps {
+    overflow: visible;
+    flex-direction: column;
+  }
+  .ui[class*="tablet stackable"].steps .step {
+    border-radius: @borderRadius;
+    padding: @verticalPadding @horizontalPadding;
+  }
+  .ui[class*="tablet stackable"].steps .step:first-child {
+    padding: @verticalPadding @horizontalPadding;
+    border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
+  }
+  .ui[class*="tablet stackable"].steps .step:last-child {
+    border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
+  }
+  /* Arrow */
+  .ui[class*="tablet stackable"].steps .step:after {
+    display: none;
+  }
 
 }
 
@@ -338,6 +365,7 @@
 
 /* Fluid */
 .ui.fluid.steps {
+  display: flex;
   width: 100%;
 }
 
@@ -383,6 +411,16 @@
 .ui.eight.steps {
   width: 100%;
 }
+.ui.one.steps > .step,
+.ui.two.steps > .step,
+.ui.three.steps > .step,
+.ui.four.steps > .step,
+.ui.five.steps > .step,
+.ui.six.steps > .step,
+.ui.seven.steps > .step,
+.ui.eight.steps > .step {
+  flex-wrap: nowrap;
+}
 .ui.one.steps > .step {
   width: 100%;
 }
diff --git a/src/themes/default/elements/button.variables b/src/themes/default/elements/button.variables
index 1d68de179..7b0dcda4a 100644
--- a/src/themes/default/elements/button.variables
+++ b/src/themes/default/elements/button.variables
@@ -124,7 +124,7 @@
 
 /* Loading */
 @loadingOpacity: 1;
-@loadingPointerEvents: none;
+@loadingPointerEvents: auto;
 @loadingTransition:
   all 0s linear,
   opacity @transitionDuration @defaultEasing
diff --git a/src/themes/default/elements/step.variables b/src/themes/default/elements/step.variables
index daa681324..deae6828e 100644
--- a/src/themes/default/elements/step.variables
+++ b/src/themes/default/elements/step.variables
@@ -9,10 +9,9 @@
 @verticalMargin: 0em;
 @horizontalMargin: 0em;
 
-@arrowSize: 1.5em;
-@verticalPadding: 0.9285em;
-@horizontalPadding: 1.5em;
-@leftPadding: @horizontalPadding + (@arrowSize / 2);
+@arrowSize: @relativeLarge;
+@verticalPadding: @relativeLarge;
+@horizontalPadding: @relativeHuge;
 
 @transition:
   background-color @transitionDuration @transitionEasing,
@@ -21,37 +20,46 @@
   box-shadow @transitionDuration @transitionEasing
 ;
 @borderRadius: @defaultBorderRadius;
-@lineHeight: 1.142rem;
+@lineHeight: @relativeLarge;
+@alignItems: center;
 
-@backgroundColor: #FFFFFF;
+@backgroundColor: @white;
 @background: @backgroundColor;
 @borderRadius: 0em;
-@boxShadow: 0px 0px 0px 1px @solidBorderColor;
+@borderWidth: 1px;
+@boxShadow: 0px 0px 0px @borderWidth @solidBorderColor;
 
 /* Icon */
-@iconDistance: 0.6em;
-@iconSize: 2em;
-@iconVerticalAlign: middle;
+@iconDistance: 1rem;
+@iconSize: 2.75em;
+@iconAlign: middle;
 
 /* Title */
 @titleFontFamily: @headerFont;
 @titleFontWeight: bold;
-@titleFontSize: 1.0714em;
+@titleFontSize: @relativeLarge;
 @titleColor: @darkTextColor;
 
 /* Description */
-@descriptionDistance: 0.1em;
-@descriptionFontSize: 0.9285em;
+@descriptionDistance: 0.25em;
+@descriptionFontSize: @relativeSmall;
 @descriptionFontWeight: normal;
 @descriptionColor: @textColor;
 
 
 /* Arrow */
 @arrowBackgroundColor: @backgroundColor;
-@arrowTopOffset: 50%;
-@arrowRightOffset: 0em;
-@arrowBorderColor: @borderColor;
+@arrowTopOffset: 100%;
+@arrowRightOffset: 50%;
+@arrowBorderWidth: 0px 0px @borderWidth @borderWidth;
 
+/*-------------------
+       Types
+--------------------*/
+
+@verticalArrowTopOffset: 50%;
+@verticalArrowRightOffset: 0%;
+@verticalArrowBorderWidth: 0px @borderWidth @borderWidth 0px;
 
 /*-------------------
        Group
@@ -68,6 +76,9 @@
 @attachedTopMargin: 0em;
 @attachedBottomMargin: -1px 0em 0em;
 
+@orderedFontFamily: inherit;
+@orderedFontWeight: bold;
+
 /*-------------------
        States
 --------------------*/
@@ -76,20 +87,20 @@
 @completedColor: @positiveColor;
 
 /* Hover */
-@hoverBackground: #FAFAFA;
+@hoverBackground: @offWhite;
 @hoverColor: @hoveredTextColor;
 
 /* Down */
-@downBackground: #F0F0F0;
+@downBackground: @darkWhite;
 @downColor: @pressedTextColor;
 
 /* Active */
-@activeBackground: #F0F0F0;
+@activeBackground: @darkWhite;
 @activeColor: @linkColor;
 @activeIconColor: @darkTextColor;
 
 /* Active + Hover */
-@activeHoverBackground: #ECECEC;
+@activeHoverBackground: @lightGrey;
 @activeHoverColor: @textColor;
 
 
diff --git a/src/themes/github/elements/step.variables b/src/themes/github/elements/step.variables
index 7d679cbd3..f62891c83 100644
--- a/src/themes/github/elements/step.variables
+++ b/src/themes/github/elements/step.variables
@@ -3,12 +3,12 @@
 --------------------*/
 
 /* Step */
-@background: linear-gradient(transparent, rgba(0, 0, 0, 0.07));
+@background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.07));
 @verticalPadding: 1em;
 
 /* Group */
 @stepsBackground: #FFFFFF;
-@stepsBoxShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.15);
+@stepsBoxShadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15);
 
 /* States */
 @activeBackground: #FFFFFF;