diff --git a/_includes/blog-card.html b/_includes/blog-card.html
index 3f1fbc4c..b0619921 100644
--- a/_includes/blog-card.html
+++ b/_includes/blog-card.html
@@ -1,6 +1,6 @@
-<div class="col-6">
+<div class="col-6 my-3">
   <a href="{{ post.url | prepend: site.baseurl }}" class="text-decoration-none">
-    <div class="card bg-secondary" {% if post.cover %} style="background-image: {{ post.color | default: "linear-gradient(to bottom, rgba(40, 50, 63, 0.3), rgba(40, 50, 63, 0.9))" }}, url(/assets/img/blog/{{ post.cover }}); background-size: cover; background-position: center;"{% endif %}>
+    <div class="card bg-gray" {% if post.cover %} style="background-image: {{ post.color | default: "linear-gradient(to bottom, rgba(40, 50, 63, 0.3), rgba(40, 50, 63, 0.9))" }}, url(/assets/img/blog/{{ post.cover }}); background-size: cover; background-position: center;"{% endif %}>
       <div class="card-body d-flex flex-column align-self-end" style="min-height: 300px;">
         <h2 class="card-title mt-auto text-light">{{ post.title }}</h2>
         <p class="card-text text-light">{{ post.excerpt }} <strong>Continue Reading...</strong></p>
diff --git a/_includes/breadcrumbs.html b/_includes/breadcrumbs.html
index 91e5dfc6..f830460f 100644
--- a/_includes/breadcrumbs.html
+++ b/_includes/breadcrumbs.html
@@ -25,6 +25,6 @@
     </nav>
   </div>
   <div class="pl-3">
-    <a class="btn btn-outline-info btn-lg" href="https://github.com/privacyguides/privacyguides.org/edit/main/{%- if page.collection -%}collections/{%- endif -%}{{ page.path }}" role="button"><i class="fad fa-fw fa-pencil-alt"></i> Edit</a>
+    <a class="btn btn-outline-gray btn-lg" href="https://github.com/privacyguides/privacyguides.org/edit/main/{%- if page.collection -%}collections/{%- endif -%}{{ page.path }}" role="button"><i class="fad fa-fw fa-pencil-alt"></i> Edit</a>
   </div>
 </div>
diff --git a/_layouts/post.html b/_layouts/post.html
index bb2298fc..8568a35e 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -2,7 +2,7 @@
 layout: default
 ---
 
-<div class="p-5 mb-3 bg-white"{% if page.cover %} style="background-image: {{ page.color | default: "linear-gradient(to bottom, rgba(40, 50, 63, 0.3), rgba(40, 50, 63, 0.9))" }}, url(/assets/img/blog/{{ page.cover }}); background-size: cover; background-position: center;"{% endif %}>
+<div class="p-5 mb-3 bg-cyan"{% if page.cover %} style="background-image: {{ page.color | default: "linear-gradient(to bottom, rgba(40, 50, 63, 0.3), rgba(40, 50, 63, 0.9))" }}, url(/assets/img/blog/{{ page.cover }}); background-size: cover; background-position: center;"{% endif %}>
   <div class="container">
     <div class="post-cover">
       <div class="inner d-flex flex-column align-self-end" style="min-height: 300px;">
diff --git a/_sass/variables.scss b/_sass/variables.scss
index 3ba4d3bf..372603da 100644
--- a/_sass/variables.scss
+++ b/_sass/variables.scss
@@ -42,6 +42,24 @@ $dropdown-link-color: $navbar-light-color;
 $navbar-light-active-color: $dark;
 $dropdown-link-hover-color: $navbar-light-active-color;
 
+/* Extra Colors */
+$theme-colors: ();
+$theme-colors: map-merge(
+  (
+    "gray":       $gray-600,
+    "blue":       $blue,
+    "indigo":     $indigo,
+    "purple":     $purple,
+    "red":        $red,
+    "orange":     $orange,
+    "yellow":     $yellow,
+    "green":      $green,
+    "teal":       $teal,
+    "cyan":       $cyan
+  ),
+  $theme-colors
+);
+
 /* Cards */
 $card-shadow:         0 3px 10px 0 rgba(150, 150, 150, .2);
 $card-success-border:  rgba(40, 167, 69, .5);