diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4d3b7584..399aaa92 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@
 - Disable copy button on invalid syntax highlighting blocks to avoid positioning issues.
 - Fix typo for `fa-dribble` in `_utilities.scss`.
 
+### Documentation & Maintenance
+
+- Rewrite social icons SCSS with a loop.
+
 ### Enhancements
 
 - Change the icon of a copy button into a tick for 1.5 seconds on successful copy.
diff --git a/_sass/minimal-mistakes/_utilities.scss b/_sass/minimal-mistakes/_utilities.scss
index f87c7648..aeb0838f 100644
--- a/_sass/minimal-mistakes/_utilities.scss
+++ b/_sass/minimal-mistakes/_utilities.scss
@@ -211,118 +211,35 @@ body:hover .visually-hidden button {
     color: $text-color;
   }
 
-  .fa-behance,
-  .fa-behance-square {
-    color: $behance-color;
-  }
-
-  .fa-bitbucket {
-    color: $bitbucket-color;
-  }
-
-  .fa-dribbble,
-  .fa-dribbble-square {
-    color: $dribbble-color;
-  }
-
-  .fa-facebook,
-  .fa-facebook-square,
-  .fa-facebook-f {
-    color: $facebook-color;
-  }
-
-  .fa-flickr {
-    color: $flickr-color;
-  }
-
-  .fa-foursquare {
-    color: $foursquare-color;
-  }
-
-  .fa-github,
-  .fa-github-alt,
-  .fa-github-square {
-    color: $github-color;
-  }
-
-  .fa-gitlab {
-    color: $gitlab-color;
-  }
-
-  .fa-instagram {
-    color: $instagram-color;
-  }
-
-  .fa-keybase {
-    color: $keybase-color;
-  }
-
-  .fa-lastfm,
-  .fa-lastfm-square {
-    color: $lastfm-color;
-  }
-
-  .fa-linkedin,
-  .fa-linkedin-in {
-    color: $linkedin-color;
-  }
-
-  .fa-mastodon,
-  .fa-mastodon-square {
-    color: $mastodon-color;
-  }
-
-  .fa-pinterest,
-  .fa-pinterest-p,
-  .fa-pinterest-square {
-    color: $pinterest-color;
-  }
-
-  .fa-reddit {
-    color: $reddit-color;
-  }
-
-  .fa-rss,
-  .fa-rss-square {
-    color: $rss-color;
-  }
-
-  .fa-soundcloud {
-    color: $soundcloud-color;
-  }
-
-  .fa-stack-exchange,
-  .fa-stack-overflow {
-    color: $stackoverflow-color;
-  }
-
-  .fa-tumblr,
-  .fa-tumblr-square {
-    color: $tumblr-color;
-  }
-
-  .fa-twitter,
-  .fa-twitter-square {
-    color: $twitter-color;
-  }
-
-  .fa-vimeo,
-  .fa-vimeo-square,
-  .fa-vimeo-v {
-    color: $vimeo-color;
-  }
-
-  .fa-vine {
-    color: $vine-color;
-  }
-
-  .fa-youtube {
-    color: $youtube-color;
-  }
-
-  .fa-xing,
-  .fa-xing-square {
-    color: $xing-color;
+  @each $color, $icons in (
+    $behance-color: ".fa-behance, .fa-behance-square",
+    $bitbucket-color: ".fa-bitbucket",
+    $dribbble-color: ".fa-dribbble, .fa-dribbble-square",
+    $facebook-color: ".fa-facebook, .fa-facebook-square, .fa-facebook-f",
+    $flickr-color: ".fa-flickr",
+    $foursquare-color: ".fa-foursquare",
+    $github-color: ".fa-github, .fa-github-alt, .fa-github-square",
+    $gitlab-color: ".fa-gitlab",
+    $instagram-color: ".fa-instagram",
+    $keybase-color: ".fa-keybase",
+    $lastfm-color: ".fa-lastfm, .fa-lastfm-square",
+    $linkedin-color: ".fa-linkedin, .fa-linkedin-in",
+    $mastodon-color: ".fa-mastodon, .fa-mastodon-square",
+    $pinterest-color: ".fa-pinterest, .fa-pinterest-p, .fa-pinterest-square",
+    $reddit-color: ".fa-reddit",
+    $rss-color: ".fa-rss, .fa-rss-square",
+    $soundcloud-color: ".fa-soundcloud",
+    $stackoverflow-color: ".fa-stack-exchange, .fa-stack-overflow",
+    $tumblr-color: ".fa-tumblr, .fa-tumblr-square",
+    $twitter-color: ".fa-twitter, .fa-twitter-square",
+    $vimeo-color: ".fa-vimeo, .fa-vimeo-square, .fa-vimeo-v",
+    $vine-color: ".fa-vine",
+    $xing-color: ".fa-xing, .fa-xing-square",
+    $youtube-color: ".fa-youtube",
+  ) {
+    #{$icons} {
+      color: $color;
+    }
   }
 }
 
diff --git a/docs/Gemfile b/docs/Gemfile
index 5c41b36a..bd95289c 100644
--- a/docs/Gemfile
+++ b/docs/Gemfile
@@ -1,6 +1,8 @@
 source "https://rubygems.org"
 
 gem "github-pages", group: :jekyll_plugins
+gem "minimal-mistakes-jekyll", path: ".."
+gem "rake"
 
 gem "tzinfo-data"
 gem "wdm", "~> 0.1.0" if Gem.win_platform?
diff --git a/docs/Rakefile b/docs/Rakefile
new file mode 100644
index 00000000..1236de9f
--- /dev/null
+++ b/docs/Rakefile
@@ -0,0 +1,5 @@
+task :default => %i[build]
+
+task :build do
+  sh 'jekyll build --profile --trace --config _config.yml,_config.dev.yml'
+end
diff --git a/docs/_config.dev.yml b/docs/_config.dev.yml
index 45df3dfe..deceee89 100644
--- a/docs/_config.dev.yml
+++ b/docs/_config.dev.yml
@@ -1,5 +1,7 @@
 # Develop override settings
 
+theme: minimal-mistakes-jekyll
+remote_theme: null
 url: http://localhost:4000
 
 analytics:
@@ -10,4 +12,4 @@ comments:
     shortname            : "mmistakes-dev"
 
 sass:
-  style: expanded
\ No newline at end of file
+  style: expanded
diff --git a/docs/_docs/18-history.md b/docs/_docs/18-history.md
index 3f740e9e..0c55ec7f 100644
--- a/docs/_docs/18-history.md
+++ b/docs/_docs/18-history.md
@@ -5,7 +5,7 @@ permalink: "/docs/history/"
 excerpt: Change log of enhancements and bug fixes made to the theme.
 sidebar:
   nav: docs
-last_modified_at: '2024-05-06T21:22:05+08:00'
+last_modified_at: '2024-05-06T21:37:37+08:00'
 toc: false
 ---
 
@@ -22,6 +22,10 @@ toc: false
 - Disable copy button on invalid syntax highlighting blocks to avoid positioning issues.
 - Fix typo for `fa-dribble` in `_utilities.scss`.
 
+### Documentation & Maintenance
+
+- Rewrite social icons SCSS with a loop.
+
 ### Enhancements
 
 - Change the icon of a copy button into a tick for 1.5 seconds on successful copy.