diff --git a/docs/dist/script.js b/docs/dist/script.js
index c38c57b..f375b42 100644
--- a/docs/dist/script.js
+++ b/docs/dist/script.js
@@ -25555,12 +25555,12 @@
 
 	module.exports = {
 		"name": "aia",
-		"version": "0.6.1",
+		"version": "0.6.2",
 		"description": "The UI Toolkit that powers ONE's internal projects",
 		"main": "lib/index",
 		"scripts": {
-			"test": "./node_modulesl/.bin/karma",
-			"build:script": "babel ./scripts -d ./lib --ignore '__tests__' --stage=0",
+			"test": "./node_modules/.bin/karma",
+			"build:script": "./node_modules/.bin/babel ./scripts -d ./lib --ignore '__tests__' --stage=0",
 			"build:umd": "NODE_ENV=production webpack scripts/index.js dist/aia.umd.js",
 			"build:min": "NODE_ENV=production webpack -p scripts/index.js dist/aia.umd.js",
 			"build:style": "sass styles/aia.scss:dist/aia.css",
@@ -27421,7 +27421,7 @@
 	          _react2["default"].createElement(
 	            "p",
 	            null,
-	            "Used as a container for a form element."
+	            "Use as a container for a form element."
 	          ),
 	          _react2["default"].createElement(
 	            "section",
@@ -27462,7 +27462,7 @@
 	            _react2["default"].createElement(
 	              "p",
 	              null,
-	              "Used as a container for a form element."
+	              "Use as a container for a form element."
 	            ),
 	            _react2["default"].createElement(
 	              "section",
@@ -28160,11 +28160,6 @@
 	              { className: 'btn -emerald' },
 	              'Emerald'
 	            ),
-	            _react2['default'].createElement(
-	              'button',
-	              { className: 'btn -sun' },
-	              'Sun'
-	            ),
 	            _react2['default'].createElement(
 	              'button',
 	              { className: 'btn -crimson' },
@@ -28269,11 +28264,6 @@
 	              { className: 'btn -inverted -sky' },
 	              'Button'
 	            ),
-	            _react2['default'].createElement(
-	              'button',
-	              { className: 'btn -inverted -sun' },
-	              'Button'
-	            ),
 	            _react2['default'].createElement(
 	              'button',
 	              { className: 'btn -inverted -crimson' },
@@ -28353,11 +28343,6 @@
 	              { className: 'btn -emerald -rounded' },
 	              'Button'
 	            ),
-	            _react2['default'].createElement(
-	              'button',
-	              { className: 'btn -sun -rounded' },
-	              'Button'
-	            ),
 	            _react2['default'].createElement(
 	              'button',
 	              { className: 'btn -crimson -rounded' },
@@ -28727,7 +28712,7 @@
 	        ),
 	        _react2['default'].createElement(
 	          'section',
-	          null,
+	          { className: 'doc-bottom-space-large' },
 	          _react2['default'].createElement(
 	            'section',
 	            { className: 'doc-bottom-space' },
@@ -28840,7 +28825,7 @@
 	          ),
 	          _react2['default'].createElement(
 	            'section',
-	            { className: 'doc-bottom-space' },
+	            null,
 	            _react2['default'].createElement(
 	              'h3',
 	              { className: 'doc-heading' },
@@ -28902,6 +28887,50 @@
 	              )
 	            )
 	          )
+	        ),
+	        _react2['default'].createElement(
+	          'section',
+	          null,
+	          _react2['default'].createElement(
+	            'section',
+	            { className: 'doc-bottom-space' },
+	            _react2['default'].createElement(
+	              'h1',
+	              { className: 'doc-heading' },
+	              'Light Button'
+	            ),
+	            _react2['default'].createElement(
+	              'p',
+	              { className: 'lead' },
+	              'It is useful for actions for a resource in a list. Advised to pair the text with an icon.'
+	            ),
+	            _react2['default'].createElement(
+	              'button',
+	              { className: 'light-btn' },
+	              _react2['default'].createElement('i', { className: 'icon icon-pencil' }),
+	              'Edit'
+	            )
+	          ),
+	          _react2['default'].createElement(
+	            'section',
+	            null,
+	            _react2['default'].createElement(
+	              'h1',
+	              { className: 'doc-heading' },
+	              'Example: Darker Light Button'
+	            ),
+	            _react2['default'].createElement(
+	              'p',
+	              null,
+	              'A larger and darker variant of the light button. This is useful for general actions in a list.'
+	            ),
+	            _react2['default'].createElement(
+	              'button',
+	              { className: 'light-btn -dark' },
+	              _react2['default'].createElement('i', { className: 'icon icon-plus2' }),
+	              'New User'
+	            )
+	          )
 	        )
 	      );
 	    }
@@ -29163,7 +29192,7 @@
 	          ),
 	          _react2["default"].createElement(
 	            "div",
-	            { className: "panel -default" },
+	            { className: "panel" },
 	            _react2["default"].createElement(
 	              "div",
 	              { className: "body" },
@@ -29206,7 +29235,7 @@
 	            ),
 	            _react2["default"].createElement(
 	              "div",
-	              { className: "panel -default" },
+	              { className: "panel" },
 	              _react2["default"].createElement(
 	                "div",
 	                { className: "heading" },
@@ -29224,7 +29253,7 @@
 	            null,
 	            _react2["default"].createElement(
 	              "div",
-	              { className: "panel -default" },
+	              { className: "panel" },
 	              _react2["default"].createElement(
 	                "div",
 	                { className: "heading" },
@@ -29252,7 +29281,7 @@
 	          ),
 	          _react2["default"].createElement(
 	            "div",
-	            { className: "panel -default" },
+	            { className: "panel" },
 	            _react2["default"].createElement(
 	              "div",
 	              { className: "body" },
@@ -29265,85 +29294,6 @@
 	            )
 	          )
 	        ),
-	        _react2["default"].createElement(
-	          "section",
-	          { className: "doc-bottom-space-large" },
-	          _react2["default"].createElement(
-	            "h3",
-	            { className: "doc-heading" },
-	            "Contextual Alternatives"
-	          ),
-	          _react2["default"].createElement(
-	            "div",
-	            { className: "panel -primary doc-bottom-space" },
-	            _react2["default"].createElement(
-	              "div",
-	              { className: "heading" },
-	              "Panel Title"
-	            ),
-	            _react2["default"].createElement(
-	              "div",
-	              { className: "body" },
-	              "Panel Body"
-	            )
-	          ),
-	          _react2["default"].createElement(
-	            "div",
-	            { className: "panel -sky doc-bottom-space" },
-	            _react2["default"].createElement(
-	              "div",
-	              { className: "heading" },
-	              "Panel Title"
-	            ),
-	            _react2["default"].createElement(
-	              "div",
-	              { className: "body" },
-	              "Panel Body"
-	            )
-	          ),
-	          _react2["default"].createElement(
-	            "div",
-	            { className: "panel -emerald doc-bottom-space" },
-	            _react2["default"].createElement(
-	              "div",
-	              { className: "heading" },
-	              "Panel Title"
-	            ),
-	            _react2["default"].createElement(
-	              "div",
-	              { className: "body" },
-	              "Panel Body"
-	            )
-	          ),
-	          _react2["default"].createElement(
-	            "div",
-	            { className: "panel -sun doc-bottom-space" },
-	            _react2["default"].createElement(
-	              "div",
-	              { className: "heading" },
-	              "Panel Title"
-	            ),
-	            _react2["default"].createElement(
-	              "div",
-	              { className: "body" },
-	              "Panel Body"
-	            )
-	          ),
-	          _react2["default"].createElement(
-	            "div",
-	            { className: "panel -crimson" },
-	            _react2["default"].createElement(
-	              "div",
-	              { className: "heading" },
-	              "Panel Title"
-	            ),
-	            _react2["default"].createElement(
-	              "div",
-	              { className: "body" },
-	              "Panel Body"
-	            )
-	          )
-	        ),
 	        _react2["default"].createElement(
 	          "section",
 	          { className: "doc-bottom-space-large" },
@@ -29354,7 +29304,7 @@
 	          ),
 	          _react2["default"].createElement(
 	            "div",
-	            { className: "panel -default" },
+	            { className: "panel" },
 	            _react2["default"].createElement(
 	              "div",
 	              { className: "heading" },
@@ -29410,7 +29360,7 @@
 	          ),
 	          _react2["default"].createElement(
 	            "div",
-	            { className: "panel -default" },
+	            { className: "panel" },
 	            _react2["default"].createElement(
 	              "div",
 	              { className: "heading" },
@@ -29517,7 +29467,7 @@
 	          ),
 	          _react2["default"].createElement(
 	            "div",
-	            { className: "panel -default" },
+	            { className: "panel" },
 	            _react2["default"].createElement(
 	              "div",
 	              { className: "heading" },
diff --git a/docs/dist/style.css b/docs/dist/style.css
index 4930b0c..fb27e3a 100644
--- a/docs/dist/style.css
+++ b/docs/dist/style.css
@@ -5487,17 +5487,20 @@ label {
   width: 100%; }
   .input-group > .form-control:first-child,
   .input-group > .addon:first-child,
-  .input-group > .addon.-btn:first-child > .btn {
+  .input-group > .addon.-btn:first-child > .btn,
+  .input-group > .addon.-btn:first-child > .light-btn {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0; }
   .input-group > .form-control:last-child,
   .input-group > .addon:last-child,
-  .input-group > .addon.-btn:last-child > .btn {
+  .input-group > .addon.-btn:last-child > .btn,
+  .input-group > .addon.-btn:last-child > .light-btn {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0; }
   .input-group > .form-control:not(:first-child):not(:last-child),
   .input-group > .addon:not(:first-child):not(:last-child),
-  .input-group > .addon:not(:first-child):not(:last-child) > .btn {
+  .input-group > .addon:not(:first-child):not(:last-child) > .btn,
+  .input-group > .addon:not(:first-child):not(:last-child) > .light-btn {
     border-radius: 0; }
   .input-group > .form-control,
   .input-group > .addon {
@@ -5590,7 +5593,7 @@ hr {
   border: 0;
   border-top: 1px solid #C4C4C4; }
 
-.btn {
+.btn, .light-btn {
   display: inline-block;
   padding: 0 20px;
   line-height: 30px;
@@ -5601,154 +5604,141 @@ hr {
   /* remove native outline */
   cursor: pointer;
   transition: 0.1s all; }
-  .btn > * {
+  .btn > *, .light-btn > * {
     vertical-align: middle; }
-  .btn, .btn:hover {
+  .btn, .light-btn, .btn:hover, .light-btn:hover {
     text-decoration: none; }
-  .btn.-default {
+  .btn.-default, .-default.light-btn {
     color: #4A4A4A;
     background: #fff;
     border: 1px solid #C4C4C4; }
-    .btn.-default:hover, .btn.-default:focus {
+    .btn.-default:hover, .-default.light-btn:hover, .btn.-default:focus, .-default.light-btn:focus {
       color: #4A4A4A;
       background: #f2f2f2; }
-  .btn.-primary {
+  .btn.-primary, .-primary.light-btn {
     color: #fff;
-    background: #3A569B; }
-    .btn.-primary:hover, .btn.-primary:focus {
+    background: #5372C5; }
+    .btn.-primary:hover, .-primary.light-btn:hover, .btn.-primary:focus, .-primary.light-btn:focus {
       color: #fff;
-      background: #334c88; }
-  .btn.-sky {
+      background: #4062be; }
+  .btn.-sky, .-sky.light-btn {
     color: #fff;
     background: #52B5E5; }
-    .btn.-sky:hover, .btn.-sky:focus {
+    .btn.-sky:hover, .-sky.light-btn:hover, .btn.-sky:focus, .-sky.light-btn:focus {
       color: #fff;
       background: #3cace2; }
-  .btn.-emerald {
+  .btn.-emerald, .-emerald.light-btn {
     color: #fff;
     background: #38D4A9; }
-    .btn.-emerald:hover, .btn.-emerald:focus {
+    .btn.-emerald:hover, .-emerald.light-btn:hover, .btn.-emerald:focus, .-emerald.light-btn:focus {
       color: #fff;
       background: #2bc79c; }
-  .btn.-sun {
-    color: #fff;
-    background: #FFC05A; }
-    .btn.-sun:hover, .btn.-sun:focus {
-      color: #fff;
-      background: #ffb641; }
-  .btn.-crimson {
+  .btn.-crimson, .-crimson.light-btn {
     color: #fff;
     background: #F05F50; }
-    .btn.-crimson:hover, .btn.-crimson:focus {
+    .btn.-crimson:hover, .-crimson.light-btn:hover, .btn.-crimson:focus, .-crimson.light-btn:focus {
       color: #fff;
       background: #ee4a39; }
-  .btn.-link {
+  .btn.-link, .light-btn {
     color: #52B5E5;
     background: transparent; }
-    .btn.-link:hover, .btn.-link:focus {
+    .btn.-link:hover, .light-btn:hover, .btn.-link:focus, .light-btn:focus {
       color: #52B5E5;
       background: transparent; }
-    .btn.-link:hover, .btn.-link:focus {
+    .btn.-link:hover, .light-btn:hover, .btn.-link:focus, .light-btn:focus {
       color: #1873a0;
       text-decoration: underline;
       background: transparent; }
-    .btn.-link.-disabled, .btn.-link:disabled, .btn.-link.-disabled:hover, .btn.-link:disabled:hover {
+    .btn.-link.-disabled, .-disabled.light-btn, .btn.-link:disabled, .light-btn:disabled, .btn.-link.-disabled:hover, .-disabled.light-btn:hover, .btn.-link:disabled:hover, .light-btn:disabled:hover {
       background: transparent;
       text-decoration: none; }
-  .btn.-inverted.-default {
+  .btn.-inverted.-default, .-inverted.-default.light-btn {
     background: transparent;
     color: #C4C4C4;
     border-color: #C4C4C4; }
-    .btn.-inverted.-default:hover, .btn.-inverted.-default:focus {
+    .btn.-inverted.-default:hover, .-inverted.-default.light-btn:hover, .btn.-inverted.-default:focus, .-inverted.-default.light-btn:focus {
       color: #fff;
       background: #C4C4C4; }
-  .btn.-inverted.-primary {
+  .btn.-inverted.-primary, .-inverted.-primary.light-btn {
     background: transparent;
-    color: #3A569B;
-    border-color: #3A569B; }
-    .btn.-inverted.-primary:hover, .btn.-inverted.-primary:focus {
+    color: #5372C5;
+    border-color: #5372C5; }
+    .btn.-inverted.-primary:hover, .-inverted.-primary.light-btn:hover, .btn.-inverted.-primary:focus, .-inverted.-primary.light-btn:focus {
       color: #fff;
-      background: #3A569B; }
-  .btn.-inverted.-sky {
+      background: #5372C5; }
+  .btn.-inverted.-sky, .-inverted.-sky.light-btn {
     background: transparent;
     color: #52B5E5;
     border-color: #52B5E5; }
-    .btn.-inverted.-sky:hover, .btn.-inverted.-sky:focus {
+    .btn.-inverted.-sky:hover, .-inverted.-sky.light-btn:hover, .btn.-inverted.-sky:focus, .-inverted.-sky.light-btn:focus {
       color: #fff;
       background: #52B5E5; }
-  .btn.-inverted.-emerald {
+  .btn.-inverted.-emerald, .-inverted.-emerald.light-btn {
     background: transparent;
     color: #38D4A9;
     border-color: #38D4A9; }
-    .btn.-inverted.-emerald:hover, .btn.-inverted.-emerald:focus {
+    .btn.-inverted.-emerald:hover, .-inverted.-emerald.light-btn:hover, .btn.-inverted.-emerald:focus, .-inverted.-emerald.light-btn:focus {
       color: #fff;
       background: #38D4A9; }
-  .btn.-inverted.-sun {
-    background: transparent;
-    color: #FFC05A;
-    border-color: #FFC05A; }
-    .btn.-inverted.-sun:hover, .btn.-inverted.-sun:focus {
-      color: #fff;
-      background: #FFC05A; }
-  .btn.-inverted.-crimson {
+  .btn.-inverted.-crimson, .-inverted.-crimson.light-btn {
     background: transparent;
     color: #F05F50;
     border-color: #F05F50; }
-    .btn.-inverted.-crimson:hover, .btn.-inverted.-crimson:focus {
+    .btn.-inverted.-crimson:hover, .-inverted.-crimson.light-btn:hover, .btn.-inverted.-crimson:focus, .-inverted.-crimson.light-btn:focus {
       color: #fff;
       background: #F05F50; }
-  .btn.-disabled, .btn:disabled, .btn.-disabled:hover, .btn:disabled:hover {
+  .btn.-disabled, .-disabled.light-btn, .btn:disabled, .light-btn:disabled, .btn.-disabled:hover, .-disabled.light-btn:hover, .btn:disabled:hover, .light-btn:disabled:hover {
     color: #7d7d7d;
     background: #C4C4C4; }
-  .btn.-block {
+  .btn.-block, .-block.light-btn {
     display: block;
     width: 100%;
     margin-right: auto;
     margin-left: auto;
     text-align: center; }
-  .btn.-xs, .btn-group.-xs > .btn {
+  .btn.-xs, .btn-group.-xs > .btn, .btn-group.-xs > .light-btn, .-xs.light-btn {
     height: 25px;
     font-size: 12px;
     line-height: 25px; }
-  .btn.-small, .btn-group.-small > .btn {
+  .btn.-small, .btn-group.-small > .btn, .btn-group.-small > .light-btn, .light-btn {
     height: 30px;
     font-size: 12px;
     line-height: 30px; }
-  .btn.-large, .btn-group.-large > .btn {
+  .btn.-large, .btn-group.-large > .btn, .btn-group.-large > .light-btn, .-large.light-btn {
     height: 50px;
     padding: 0 25px;
     font-size: 18px;
     line-height: 40px; }
-  .btn.-large > .icon:first-child, .btn-group.-large > .btn > .icon:first-child {
+  .btn.-large > .icon:first-child, .btn-group.-large > .btn > .icon:first-child, .btn-group.-large > .light-btn > .icon:first-child, .-large.light-btn > .icon:first-child {
     margin-right: 16px; }
-  .btn.-large > .icon:last-child, .btn-group.-large > .btn > .icon:last-child {
+  .btn.-large > .icon:last-child, .btn-group.-large > .btn > .icon:last-child, .btn-group.-large > .light-btn > .icon:last-child, .-large.light-btn > .icon:last-child {
     margin-left: 16px; }
-  .btn.-rounded {
+  .btn.-rounded, .-rounded.light-btn {
     border-radius: 25px; }
-  .btn.-disabled, .btn:disabled {
+  .btn.-disabled, .-disabled.light-btn, .btn:disabled, .light-btn:disabled {
     cursor: not-allowed; }
-  .btn > .icon:first-child {
+  .btn > .icon:first-child, .light-btn > .icon:first-child {
     margin-right: 6px; }
-  .btn > .icon:last-child {
+  .btn > .icon:last-child, .light-btn > .icon:last-child {
     margin-left: 6px; }
-  .btn > .icon:first-child:last-child {
+  .btn > .icon:first-child:last-child, .light-btn > .icon:first-child:last-child {
     margin: 0; }
 
 .btn-group {
   display: inline-block;
   vertical-align: middle; }
-  .btn-group.-rounded > .btn {
+  .btn-group.-rounded > .btn, .btn-group.-rounded > .light-btn {
     border-radius: 25px; }
   .btn-group + .btn-group {
     margin-left: 6px; }
-  .btn-group > .btn:last-child:not(:first-child) {
+  .btn-group > .btn:last-child:not(:first-child), .btn-group > .light-btn:last-child:not(:first-child) {
     margin-left: -1px;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0; }
-  .btn-group > .btn:first-child:not(:last-child) {
+  .btn-group > .btn:first-child:not(:last-child), .btn-group > .light-btn:first-child:not(:last-child) {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0; }
-  .btn-group > .btn:not(:first-child):not(:last-child) {
+  .btn-group > .btn:not(:first-child):not(:last-child), .btn-group > .light-btn:not(:first-child):not(:last-child) {
     margin-left: -1px;
     border-radius: 0; }
 
@@ -5803,6 +5793,20 @@ hr {
 .pagination > .pages > .page:not(:last-child) {
   margin-right: 5px; }
 
+.light-btn {
+  color: #C4C4C4; }
+  .light-btn:hover, .light-btn:focus {
+    color: #78828A;
+    text-decoration: none; }
+  .light-btn:disabled, .light-btn:disabled:hover {
+    color: #F0F0F0;
+    background-color: #fff; }
+  .light-btn.-dark {
+    font-size: 14px;
+    color: #4A4A4A; }
+  .light-btn.-dark:hover {
+    color: #78828A; }
+
 .alert {
   padding: 20px 15px;
   position: relative;
@@ -6012,54 +6016,6 @@ hr {
   .panel > .list-group > .menuitem {
     border-top-right-radius: 0;
     border-top-left-radius: 0; }
-  .panel.-default > .heading {
-    background: #C4C4C4;
-    color: #fff; }
-  .panel.-default > .body + .body {
-    border-color: #C4C4C4; }
-  .panel.-default > .footer {
-    background: #C4C4C4;
-    color: #fff; }
-  .panel.-primary > .heading {
-    background: #3A569B;
-    color: #fff; }
-  .panel.-primary > .body + .body {
-    border-color: #C4C4C4; }
-  .panel.-primary > .footer {
-    background: #C4C4C4;
-    color: #fff; }
-  .panel.-sky > .heading {
-    background: #52B5E5;
-    color: #fff; }
-  .panel.-sky > .body + .body {
-    border-color: #C4C4C4; }
-  .panel.-sky > .footer {
-    background: #C4C4C4;
-    color: #fff; }
-  .panel.-emerald > .heading {
-    background: #38D4A9;
-    color: #fff; }
-  .panel.-emerald > .body + .body {
-    border-color: #C4C4C4; }
-  .panel.-emerald > .footer {
-    background: #C4C4C4;
-    color: #fff; }
-  .panel.-sun > .heading {
-    background: #FFC05A;
-    color: #fff; }
-  .panel.-sun > .body + .body {
-    border-color: #C4C4C4; }
-  .panel.-sun > .footer {
-    background: #C4C4C4;
-    color: #fff; }
-  .panel.-crimson > .heading {
-    background: #F05F50;
-    color: #fff; }
-  .panel.-crimson > .body + .body {
-    border-color: #C4C4C4; }
-  .panel.-crimson > .footer {
-    background: #C4C4C4;
-    color: #fff; }
 
 .dropdown {
   z-index: 999;
@@ -6321,9 +6277,9 @@ code {
   color: #428642;
   border: 1px solid #A3E2A3; }
 
-.doc-btn-group > .btn {
+.doc-btn-group > .btn, .doc-btn-group > .light-btn {
   margin-bottom: 1rem; }
-.doc-btn-group > .btn:not(:last-child) {
+.doc-btn-group > .btn:not(:last-child), .doc-btn-group > .light-btn:not(:last-child) {
   margin-right: 1rem; }
 
 .doc-block-grid {
diff --git a/docs/sections/Docs-Buttons/index.jsx b/docs/sections/Docs-Buttons/index.jsx
index 8db81b3..b5effa0 100644
--- a/docs/sections/Docs-Buttons/index.jsx
+++ b/docs/sections/Docs-Buttons/index.jsx
@@ -160,7 +160,7 @@ export default class Buttons extends React.Component {
           </section>
         </section>
 
-        <section>
+        <section className="doc-bottom-space-large">
           <section className="doc-bottom-space">
             <h1 className="doc-heading">Pagination</h1>
             <p className="lead">These buttons are a bit different, written entirely for pagination.</p>
@@ -191,7 +191,7 @@ export default class Buttons extends React.Component {
             </div>
           </section>
 
-          <section className="doc-bottom-space">
+          <section>
             <h3 className="doc-heading">Example: Disabled Actions</h3>
             <p>At the moment, only the previous and next button can be disabled. Through the <code>disabled</code> attribute, or by adding the <code>.-disabled </code> modifier class.</p>
             <div className="pagination">
@@ -206,6 +206,26 @@ export default class Buttons extends React.Component {
             </div>
           </section>
         </section>
+
+        <section>
+          <section className="doc-bottom-space">
+            <h1 className="doc-heading">Light Button</h1>
+            <p className="lead">It is useful for actions for a resource in a list. Advised to pair the text with an icon.</p>
+            <button className="light-btn">
+              <i className="icon icon-pencil" />
+              Edit
+            </button>
+          </section>
+
+          <section>
+            <h1 className="doc-heading">Example: Darker Light Button</h1>
+            <p>A larger and darker variant of the light button. This is useful for general actions in a list.</p>
+            <button className="light-btn -dark">
+              <i className="icon icon-plus2" />
+              New User
+            </button>
+          </section>
+        </section>
       </div>
     );
   }
diff --git a/styles/_main.scss b/styles/_main.scss
index 528b37d..4b3d0d7 100644
--- a/styles/_main.scss
+++ b/styles/_main.scss
@@ -13,6 +13,7 @@
 
 @import "components/button";
 @import "components/pagination";
+@import "components/light-btn";
 @import "components/alert";
 @import "components/label";
 @import "components/badge";
diff --git a/styles/components/_light-btn.scss b/styles/components/_light-btn.scss
new file mode 100644
index 0000000..131985d
--- /dev/null
+++ b/styles/components/_light-btn.scss
@@ -0,0 +1,30 @@
+.light-btn {
+  @extend .btn;
+  @extend .btn.-small;
+  @extend .btn.-link;
+
+  color: $brand-gray;
+
+  &:hover,
+  &:focus {
+    color: $brand-gray-dk;
+    text-decoration: none;
+  }
+
+  &:disabled,
+  &:disabled:hover {
+    // @refactor
+    // move this disabled styling to .btn.-link
+    color: $brand-gray-lt;
+    background-color: $brand-white;
+  }
+
+  &.-dark {
+    font-size: $font-size-base;
+    color: $brand-black;
+  }
+
+  &.-dark:hover {
+    color: $brand-gray-dk;
+  }
+}