diff --git a/pages/_data/docs.yml b/pages/_data/docs.yml
index c2e34619e..8c59bc250 100644
--- a/pages/_data/docs.yml
+++ b/pages/_data/docs.yml
@@ -7,6 +7,7 @@
 - page: buttons
 - page: cards
 - page: carousel
+- page: colors
 - page: cursors
 - page: charts
 - page: divider
diff --git a/pages/_docs/badges.md b/pages/_docs/badges.md
index f37b5eebf..3f0d55668 100644
--- a/pages/_docs/badges.md
+++ b/pages/_docs/badges.md
@@ -10,7 +10,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 
 {% example %}
 {% for color in site.colors %}
-<span class="badge text-white bg-{{ color[0] }}">{{ color[0] }}</span>
+<span class="badge bg-{{ color[0] }}">{{ color[0] }}</span>
 {% endfor %}
 {% endexample %}
 
@@ -18,7 +18,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 
 {% example %}
 {% for color in site.colors %}
-<span class="badge badge-pill text-white bg-{{ color[0] }}">{{ forloop.index }}</span>
+<span class="badge badge-pill bg-{{ color[0] }}">{{ forloop.index }}</span>
 {% endfor %}
 {% endexample %}
 
diff --git a/pages/_docs/colors.md b/pages/_docs/colors.md
index 960f3cc99..9fb3f2f3f 100644
--- a/pages/_docs/colors.md
+++ b/pages/_docs/colors.md
@@ -3,3 +3,49 @@ title: Colors
 menu: docs.colors
 ---
 
+<div class="row">
+	<div class="col-sm-6 col-md-6">
+		<div class="card">
+			<div class="card-header">
+				<h3 class="card-title">
+					Default colors
+				</h3>
+			</div>
+			<div class="card-body">
+				<ul class="list-unstyled">
+					{% for color in site.colors %}
+					<li class="d-flex align-items-center mb-3">
+						<div class="stamp bg-{{ color[0] }} text-white mr-3">{{ color[1].name | first_letters | upcase }}</div>
+						<div>
+							<strong>{{ color[1].name }}</strong><br />
+							<code>.bg-{{ color[0] }}</code>
+						</div>
+					</li>
+					{% endfor %}
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="col-sm-6 col-md-6">
+		<div class="card">
+			<div class="card-header">
+				<h3 class="card-title">
+					Light colors
+				</h3>
+			</div>
+			<div class="card-body">
+				<ul class="list-unstyled">
+					{% for color in site.colors %}
+					<li class="d-flex align-items-center mb-3">
+						<div class="stamp bg-{{ color[0] }}-lt mr-3">{{ color[1].name | first_letters | upcase }}</div>
+						<div>
+							<strong>{{ color[1].name }} lite</strong><br />
+							<code class="bg-{{ color[0] }}-lt">.bg-{{ color[0] }}-lt</code>
+						</div>
+					</li>
+					{% endfor %}
+				</ul>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/pages/_docs/cursors.md b/pages/_docs/cursors.md
index e9f4834af..ea745f8db 100644
--- a/pages/_docs/cursors.md
+++ b/pages/_docs/cursors.md
@@ -5,6 +5,13 @@ menu: docs.cursors
 
 ### Cursor utilities 
 
+- `.cursor-auto`- cursor style depends on what's inside element
+- `.cursor-pointer` - pointing cursor
+- `.cursor-move` - cursor showing that user can move something
+- `.cursor-not-allowed` - cursor showing that user is not allowed to do something
+- `.cursor-zoom-in` - cursor showing that user can zoom in
+- `.cursor-zoom-out` - cursor showing that user can zoom out
+
 {% example html %}
 <div class="row text-center">
   <div class="col-4 mb-3">
diff --git a/pages/colors.html b/pages/colors.html
deleted file mode 100644
index 447605a70..000000000
--- a/pages/colors.html
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: Colors
-done: true
----
-
-<div class="row">
-	<div class="col-md-6">
-		<div class="card">
-			<div class="card-header">
-				<h3 class="card-title">
-					Default colors
-				</h3>
-			</div>
-			<div class="card-body">
-				<ul class="list-unstyled">
-					{% for color in site.colors %}
-					<li class="d-flex align-items-center mb-3">
-						<div class="stamp bg-{{ color[0] }} text-white mr-3">{{ color[1].name | first_letters | upcase }}</div>
-						<div>
-							<strong>{{ color[1].name }}</strong><br />
-							<code>.bg-{{ color[0] }}</code>
-						</div>
-					</li>
-					{% endfor %}
-				</ul>
-			</div>
-		</div>
-	</div>
-	<div class="col-md-6">
-		<div class="card">
-			<div class="card-header">
-				<h3 class="card-title">
-					Light colors
-				</h3>
-			</div>
-			<div class="card-body">
-				<ul class="list-unstyled">
-					{% for color in site.colors %}
-					<li class="d-flex align-items-center mb-3">
-						<div class="stamp bg-{{ color[0] }}-lt mr-3">{{ color[1].name | first_letters | upcase }}</div>
-						<div>
-							<strong>{{ color[1].name }} lite</strong><br />
-							<code>.bg-{{ color[0] }}-lt</code>
-						</div>
-					</li>
-					{% endfor %}
-				</ul>
-			</div>
-		</div>
-	</div>
-</div>