diff --git a/_includes/card.html b/_includes/card.html
index 178155e4..400914d4 100644
--- a/_includes/card.html
+++ b/_includes/card.html
@@ -31,6 +31,8 @@
               <img src="{{include.image}}" width="120" height="120" alt="{{include.title}}" class="panel-item">
               {% elsif include.icon %}
               <i class="{{ include.icon }} panel-icon{% if include.iconcolor %} text-{{include.iconcolor}}{% endif %}"></i>
+              {% elsif include.font %}
+              <span class="{{ include.font }} panel-item" style="font-size: 120px;" alt="{{ include.title }}"></span>
               {% endif %}
               {{include.description}}
             </p>
diff --git a/_includes/cardv2.html b/_includes/cardv2.html
index 13fdab57..4b315a24 100644
--- a/_includes/cardv2.html
+++ b/_includes/cardv2.html
@@ -30,6 +30,9 @@
     <p class="card-text">
       <img
         src="{{include.image}}"
+        {% if include.image-dark %}
+        data-theme-src="{{include.image-dark}}"
+        {% endif %}
         height="120"
         width="120"
         class="panel-pic"
diff --git a/_includes/head.html b/_includes/head.html
index e92adfa3..4a247f55 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -44,5 +44,5 @@
 
   <!-- CSS stylesheets -->
   <link href="/assets/css/style.css?v=6" rel="stylesheet">
-  <link id="dark-css" href="/assets/css/dark.css?v=2" rel="stylesheet" media="(prefers-color-scheme: dark)">
+  <link id="dark-css" href="/assets/css/dark.css?v=3" rel="stylesheet" media="(prefers-color-scheme: dark)">
 </head>
diff --git a/_includes/scripts.html b/_includes/scripts.html
index b5ed2d18..85b98048 100644
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -2,7 +2,7 @@
 <script src="/assets/js/popper.min.js?v=4"></script>
 <script src="/assets/js/bootstrap.min.js?v=4"></script>
 <script src="/assets/js/sortable.min.js?v=4"></script>
-<script src="/assets/js/main.js?v=3"></script>
+<script src="/assets/js/main.js?v=4"></script>
 
 <!--
   Matomo is the leading open-source analytics platform:
diff --git a/_includes/sections/browser-fingerprint.html b/_includes/sections/browser-fingerprint.html
index 810ffc19..4c2144b1 100644
--- a/_includes/sections/browser-fingerprint.html
+++ b/_includes/sections/browser-fingerprint.html
@@ -4,8 +4,6 @@
   <strong>Your Browser sends information that makes you unique amongst millions of users and therefore easy to identify.</strong>
 </div>
 
-<img src="/assets/img/layout/browser-fingerprint.png" width="439" height="350" class="img-fluid float-right" alt="Fingerprint image" style="margin-left:20px;">
-
 <p>When you visit a web page, your browser voluntarily sends information about its configuration, such as available fonts, browser type, and add-ons. If this combination of information is unique, it may be possible to identify and track you without using cookies. EFF created a Tool called <a href="https://panopticlick.eff.org/">Panopticlick</a> to test your browser to see how unique it is.</p>
 
 <p>
diff --git a/_includes/sections/mobile-operating-systems.html b/_includes/sections/mobile-operating-systems.html
index ebe47849..40aa5951 100644
--- a/_includes/sections/mobile-operating-systems.html
+++ b/_includes/sections/mobile-operating-systems.html
@@ -7,6 +7,7 @@
 {% include cardv2.html
 title="GrapheneOS"
 image="/assets/img/tools/GrapheneOS.png"
+image-dark="/assets/img/tools/GrapheneOS-dark.png"
 description='GrapheneOS (formerly known as CopperheadOS) is a free and open-source security and privacy focused mobile operating system built on top of the Android Open Source Project. It currently specifically targets devices offering strong hardware security.'
 badges="info:AOSP"
 labels="warning:contrib:This software may depend on or recommend non-free software."
diff --git a/_includes/sections/participate.html b/_includes/sections/participate.html
index a4ce8b99..49e6e206 100644
--- a/_includes/sections/participate.html
+++ b/_includes/sections/participate.html
@@ -26,7 +26,7 @@
 
   {% include card.html color="warning"
   title="Develop on GitHub"
-  image="/assets/img/icons/github.png"
+  font="fab fa-github"
   url="https://github.com/privacytoolsIO/privacytools.io"
   website="GitHub"
   description="The complete website source code is available on GitHub. Join our developer team!"
diff --git a/_includes/sections/productivity-tools.html b/_includes/sections/productivity-tools.html
index 3ffbd45c..ccdcff2c 100644
--- a/_includes/sections/productivity-tools.html
+++ b/_includes/sections/productivity-tools.html
@@ -15,6 +15,7 @@
   include cardv2.html
   title="Etherpad"
   image="/assets/img/tools/Etherpad.png"
+  image-dark="/assets/img/tools/Etherpad-dark.png"
   description="<strong>Etherpad</strong> is a highly customizable open source online editor providing collaborative editing in real-time. <a href=https://github.com/ether/etherpad-lite/wiki/Sites-that-run-Etherpad>Here are a list of sites that run Etherpad</a>."
   website="https://etherpad.org/"
   forum="https://forum.privacytools.io/t/discussion-etherpad-productivity-tools/1538"
@@ -32,6 +33,7 @@
   include cardv2.html
   title="Write.as"
   image="/assets/img/tools/WriteAs.png"
+  image-dark="/assets/img/tools/WriteAs-dark.png"
   description="<strong>Write.as</strong> is a cross-platform, privacy-oriented blogging platform. It's anonymous by default, letting you publish without signing up. If you create an account, it doesn't require any personal information. No ads, distraction-free, and built on a sustainable business model."
   website="https://write.as/"
   forum="https://forum.privacytools.io/t/discussion-write-as-productivity-tools/1539"
diff --git a/_includes/sections/selfhosted-cloud.html b/_includes/sections/selfhosted-cloud.html
index a4b9bd87..9e595a89 100644
--- a/_includes/sections/selfhosted-cloud.html
+++ b/_includes/sections/selfhosted-cloud.html
@@ -25,6 +25,7 @@ github="https://github.com/nextcloud"
 {% include cardv2.html
 title="Tahoe-LAFS"
 image="/assets/img/tools/Tahoe-LAFS.png"
+image-dark="/assets/img/tools/Tahoe-LAFS-dark.png"
 website="https://www.tahoe-lafs.org/"
 forum="https://forum.privacytools.io/t/discussion-tahoe-lafs/1662"
 description="Tahoe-LAFS is a Free and Open decentralized cloud storage system. It distributes your data across multiple servers. Even if some of the servers fail or are taken over by an attacker, the entire file store continues to function correctly, preserving your privacy and security."
diff --git a/assets/css/dark.scss b/assets/css/dark.scss
index d982475b..3852188a 100644
--- a/assets/css/dark.scss
+++ b/assets/css/dark.scss
@@ -1,13 +1,15 @@
 ---
 ---
-$dark-400: #181b21;
-$dark-300: #22262e;
-$dark-200: #343a46;
-$dark-100: #464f60;
+@import '_vars';
+
+$dark-900: #181b21;
+$dark-800: #22262e;
+$dark-700: #343a46;
+$dark-600: #464f60;
 $light: #d8d8d8;
 $primary: #345e8e;
 $danger: #b63f4a;
-$secondary: $dark-100;
+$secondary: $dark-600;
 $success: #2c7f40;
 $warning: #c6a339;
 $info: #218899;
@@ -18,7 +20,7 @@ $info: #218899;
  */
 
 body {
-  background: $dark-400;
+  background: $dark-900;
   color: $light;
 }
 a {
@@ -37,12 +39,11 @@ img {
  */
 
 .alert a {
-  color: #214D97;
+  color: lighten($primary, 30%);
 }
 
 .bg-secondary, .btn-secondary, .badge-secondary { background-color: $secondary !important; }
 .btn-secondary, .card-secondary .card-header { border-color: $secondary !important; }
-.text-secondary { color: $secondary !important; }
 .alert-secondary, .btn-secondary:hover {
   color: $light;
   background-color: darken($secondary, 10%);
@@ -60,12 +61,15 @@ img {
 
 .bg-warning, .btn-warning, .badge-warning { background-color: $warning !important; }
 .btn-warning, .card-warning .card-header { border-color: $warning !important; }
+.btn-warning:hover { color: $dark-700 !important }
 .text-warning { color: $warning !important; }
-.card-warning > .text-dark { color: $dark-400 !important; }
+.card-warning > .text-dark { color: $dark-900 !important; }
+.alert-warning a { color: darken($primary, 6%); }
+.badge-warning a { color: $primary; }
 .alert-warning, .btn-warning:hover {
-  color: $light;
-  background-color: darken($warning, 10%);
-  border-color: darken($warning, 10%);
+  color: $dark-900;
+  background-color: darken($warning, 8%);
+  border-color: darken($warning, 8%);
 }
 
 .bg-info, .btn-info, .badge-info { background-color: $info !important; }
@@ -101,33 +105,33 @@ img {
 
 .dropdown-item:hover {
   color: $light;
-  background-color: $dark-300;
+  background-color: $dark-800;
 }
 
 .form-control,
 .form-control:focus {
   color: $light;
-  background: $dark-300;
-  border-color: $dark-300;
+  background: $dark-800;
+  border-color: $dark-800;
 }
 
 .form-control[readonly],
 .form-control:disabled {
-  background: $dark-300;
+  background: $dark-800;
 }
 
 .card,
 .jumbotron,
 .list-group-item {
-  background: $dark-300;
+  background: $dark-800;
 }
 
 .blockquote {
-  border-color: $dark-300;
+  border-color: $dark-800;
 }
 
 .bg-dark {
-  background-color: $dark-300 !important;
+  background-color: $dark-800 !important;
 }
 
 .dropdown-item {
@@ -135,24 +139,25 @@ img {
 }
 
 .list-group-item {
-  border-color: $dark-200;
+  border-color: $dark-700;
 }
 
 .text-dark {
   color: $light !important;
 }
 
+
 table[data-sortable].sortable-theme-bootstrap {
   color: $light;
-  background-color: $dark-300;
+  background-color: $dark-800;
 }
 table[data-sortable].sortable-theme-bootstrap th,
 table[data-sortable].sortable-theme-bootstrap td {
-  border-color: $dark-100 !important;
+  border-color: $dark-600 !important;
 }
 table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"] {
   color: $light;
-  background: $dark-200;
+  background: $dark-700;
 }
 table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted-direction="ascending"]::after, {
   border-bottom-color: $light;
@@ -168,8 +173,8 @@ table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted
 
 .nav-dropdown {
   color: $light;
-  background-color: $dark-400;
-  border-color: $dark-300;
+  background-color: $dark-900;
+  border-color: $dark-800;
 }
 
 .nav-theme-icon:before {
@@ -177,3 +182,12 @@ table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted
   font-size: 1em;
   content: "\f185";
 }
+
+.twitter { background: desaturate($twitter, 25%); }
+.mastodon { background: desaturate($mastodon, 25%); }
+.facebook { background: desaturate($facebook, 25%); }
+.stumbleupon { background: desaturate($stumbleupon, 25%); }
+.reddit { background: desaturate($reddit, 25%); }
+.linkedin { background: desaturate($linkedin, 25%); }
+.email { background: desaturate($email, 25%); }
+.diaspora { background: desaturate($diaspora, 25%); }
diff --git a/assets/img/addons/privacy-badger.png b/assets/img/addons/privacy-badger.png
index c943c412..f203cdc5 100644
Binary files a/assets/img/addons/privacy-badger.png and b/assets/img/addons/privacy-badger.png differ
diff --git a/assets/img/layout/browser-fingerprint.png b/assets/img/layout/browser-fingerprint.png
deleted file mode 100644
index 13af13c0..00000000
Binary files a/assets/img/layout/browser-fingerprint.png and /dev/null differ
diff --git a/assets/img/layout/kopimi.png b/assets/img/layout/kopimi.png
deleted file mode 100644
index eed7d78d..00000000
Binary files a/assets/img/layout/kopimi.png and /dev/null differ
diff --git a/assets/img/misc/smile.png b/assets/img/misc/smile.png
deleted file mode 100644
index 704803db..00000000
Binary files a/assets/img/misc/smile.png and /dev/null differ
diff --git a/assets/img/tools/Etherpad-dark.png b/assets/img/tools/Etherpad-dark.png
new file mode 100644
index 00000000..a3ad00d0
Binary files /dev/null and b/assets/img/tools/Etherpad-dark.png differ
diff --git a/assets/img/tools/GrapheneOS-dark.png b/assets/img/tools/GrapheneOS-dark.png
new file mode 100644
index 00000000..e378783f
Binary files /dev/null and b/assets/img/tools/GrapheneOS-dark.png differ
diff --git a/assets/img/tools/GrapheneOS.png b/assets/img/tools/GrapheneOS.png
index 8cefd08f..42aa1f8d 100644
Binary files a/assets/img/tools/GrapheneOS.png and b/assets/img/tools/GrapheneOS.png differ
diff --git a/assets/img/tools/Tahoe-LAFS-dark.png b/assets/img/tools/Tahoe-LAFS-dark.png
new file mode 100644
index 00000000..e7e77480
Binary files /dev/null and b/assets/img/tools/Tahoe-LAFS-dark.png differ
diff --git a/assets/img/tools/VeraCrypt.png b/assets/img/tools/VeraCrypt.png
index 07ffd118..d6eb6e46 100644
Binary files a/assets/img/tools/VeraCrypt.png and b/assets/img/tools/VeraCrypt.png differ
diff --git a/assets/img/tools/WriteAs-dark.png b/assets/img/tools/WriteAs-dark.png
new file mode 100644
index 00000000..39e1f044
Binary files /dev/null and b/assets/img/tools/WriteAs-dark.png differ
diff --git a/assets/img/tools/onionbrowser.png b/assets/img/tools/onionbrowser.png
index 33534b6a..36756449 100644
Binary files a/assets/img/tools/onionbrowser.png and b/assets/img/tools/onionbrowser.png differ
diff --git a/assets/js/main.js b/assets/js/main.js
index 67738c1a..ebdaad20 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -66,6 +66,24 @@ function changeColorScheme() {
     document.querySelector("#dark-css").removeAttribute("media");
     localStorage.setItem("colorScheme", "dark");
   }
+  fixThemeImages();
+}
+
+
+// Fix images in dark theme
+function fixThemeImages() {
+  document.querySelectorAll('[data-theme-src]').forEach(function(image) {
+    tempSrc = image.src;
+    image.src = image.getAttribute("data-theme-src");
+    image.setAttribute("data-theme-src", tempSrc);
+  });
+}
+if (
+  (localStorage.getItem("colorScheme") === "dark") ||
+  (window.matchMedia("(prefers-color-scheme: dark)").matches ^
+    localStorage.getItem("colorScheme") === "light")
+) {
+  fixThemeImages();
 }
 
 
diff --git a/donate.html b/donate.html
index 225bb4a0..54b26d19 100644
--- a/donate.html
+++ b/donate.html
@@ -294,7 +294,7 @@ permalink: /donate/
       <p>The <a href="/contact/">privacytools.io team</a> does not necessarily endorse all of the cryptocurrencies listed on this page. Please conduct your own research before purchasing any cryptocurrencies.</p>
       <h3>Thanks for your support. You are awesome!</h3>
       <p>
-      <img src="/assets/img/misc/smile.png" class="img-fluid" alt="Smile">
+      <span class="far fa-smile-beam fa-3x"></span>
       </p>
     </div>