diff --git a/src/assets/style/custom.scss b/src/assets/style/custom.scss
index 6f5064eac57..afcdd6ff667 100644
--- a/src/assets/style/custom.scss
+++ b/src/assets/style/custom.scss
@@ -8,6 +8,7 @@ body {
   font-family: "Roboto", sans-serif;
   margin: 0;
   padding: 0;
+  @apply dark:bg-gray-900 dark:text-gray-200 transition-colors duration-200;
 }
 
 .container {
@@ -21,11 +22,16 @@ body {
   font-size: 14px;
 }
 
+.ui-icon-button {
+  @apply inline-flex h-10 w-10 items-center justify-center rounded border border-gray-300 text-gray-700 transition-colors hover:border-jfrog-green hover:bg-gray-100 hover:text-jfrog-green dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-jfrog-green;
+}
+
 h1 {
   font-size: 28px;
   line-height: 1.285;
   padding-bottom: 1rem;
   color: black;
+  @apply dark:text-gray-100 transition-colors duration-200;
   @media (min-width: #{$md}) {
     font-size: 36px;
     line-height: 1.16;
@@ -37,12 +43,94 @@ h2 {
   line-height: 1.285;
   padding-bottom: .5rem;
   color: black;
+  @apply dark:text-gray-100 transition-colors duration-200;
   @media (min-width: #{$md}) {
     font-size: 32px;
     line-height: 1.16;
   }
 }
 
+.green,
+.green-dark {
+  @apply dark:text-jfrog-green transition-colors duration-200;
+}
+
+.single-post-content a,
+.latest-posts-single-post-content a,
+.latest-posts a,
+section.report a {
+  @apply dark:text-blue-400 transition-colors duration-200;
+}
+
+.latest-posts-single-post-content a:visited,
+.single-post-content a:visited {
+  @apply dark:text-purple-400 transition-colors duration-200;
+}
+
+.latest-posts-single-post-content table th,
+.single-post-content table th {
+  @apply dark:bg-gray-800 dark:text-gray-100 dark:border-gray-600 transition-colors duration-200;
+}
+
+.latest-posts-single-post-content table td,
+.single-post-content table td {
+  @apply dark:border-gray-600 dark:text-gray-200 transition-colors duration-200;
+}
+
+.latest-posts-single-post-content table tr:nth-child(even),
+.single-post-content table tr:nth-child(even) {
+  @apply dark:bg-gray-800 transition-colors duration-200;
+}
+
+.latest-posts-single-post-content table tr:hover,
+.single-post-content table tr:hover {
+  @apply dark:bg-gray-700 transition-colors duration-200;
+}
+
+.latest-posts-single-post-content code:not(pre code) {
+  @apply dark:bg-gray-800 dark:text-red-300 transition-colors duration-200;
+}
+
+.latest-posts-single-post-content h6 {
+  @apply dark:text-gray-300 transition-colors duration-200;
+}
+
+.latest-posts {
+  @apply dark:bg-gray-900 transition-colors duration-200;
+}
+
+.latest-posts .container {
+  @apply dark:bg-gray-800 dark:border-gray-700 transition-colors duration-200;
+  border: 1px solid transparent; /* default border */
+}
+
+.latest-posts .container h1 {
+  @apply dark:text-gray-50 transition-colors duration-200;
+}
+
+.latest-posts .green {
+  @apply dark:text-jfrog-green transition-colors duration-200;
+}
+
+.latest-posts-single-post-content {
+  @apply dark:text-gray-200 transition-colors duration-200;
+}
+
+.latest-posts-single-post-content h2,
+.latest-posts-single-post-content h3,
+.latest-posts-single-post-content h4,
+.latest-posts-single-post-content h5 {
+  @apply dark:text-jfrog-green transition-colors duration-200;
+}
+
+.latest-posts-single-post-content hr {
+  @apply dark:border-gray-600 transition-colors duration-200;
+}
+
+.latest-posts-single-post-content blockquote {
+  @apply dark:bg-gray-900 dark:text-gray-300 transition-colors duration-200;
+}
+
 .green-radial-gradient {
   background: radial-gradient(84.94% 84.94% at 50% 76.92%, #2A972F 38.14%, #40BE46 89.06%);
 }
@@ -81,4 +169,3 @@ pre {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-
diff --git a/src/components/Banner.vue b/src/components/Banner.vue
index 279619b4b3d..c3d36a853fd 100644
--- a/src/components/Banner.vue
+++ b/src/components/Banner.vue
@@ -25,11 +25,6 @@
 import BannerButton from './BannerButton.vue'
 export default {
   name: 'banner',
-  data() {
-    return {
-      bannerClass: `sr-banner px-5 py-2 text-center bg-center bg-cover text-white bg-${this.color}`,
-    }
-  },
   props: {
     color: {
       type: String,
@@ -65,6 +60,10 @@ export default {
     },
   },
   computed: {
+    bannerClass() {
+      const darkThemeClass = this.color === 'jfrog-green' ? ' dark:bg-green-700' : ''
+      return `sr-banner px-5 py-2 text-center bg-center bg-cover text-white bg-${this.color}${darkThemeClass}`
+    },
     dateString: function () {
       if(this.date){
       const d = new Date(this.date)
diff --git a/src/components/BannerButton.vue b/src/components/BannerButton.vue
index 0a5421b4bfd..beff29596a6 100644
--- a/src/components/BannerButton.vue
+++ b/src/components/BannerButton.vue
@@ -14,11 +14,6 @@
 
 <script>
 export default {
-  data() {
-    return {
-      buttonClass: `banner-button inline-block text-${this.textColor} bg-${this.bgColor} px-4 py-6 lg:py-3`
-    }
-  },
   props: {
     link: Object,
     default() {
@@ -50,6 +45,12 @@ export default {
       default: 'See All Vulnerabilities'
     }
   },
+  computed: {
+    buttonClass() {
+      const darkThemeClass = this.bgColor === 'jfrog-green' ? ' dark:bg-green-700' : ''
+      return `banner-button inline-block text-${this.textColor} bg-${this.bgColor}${darkThemeClass} px-4 py-6 lg:py-3 transition-colors`
+    }
+  }
 }
 </script>
 
diff --git a/src/components/BannerSmall.vue b/src/components/BannerSmall.vue
index 89927900061..9c64f3dcb3f 100644
--- a/src/components/BannerSmall.vue
+++ b/src/components/BannerSmall.vue
@@ -13,11 +13,6 @@
 
 export default {
   name: 'BannerSmall',
-  data() {
-    return {
-      bannerClass: `sr-banner sr-banner-small px-5 py-2 text-center bg-center bg-cover text-white bg-${this.color}`,
-    }
-  },
   props: {
     color: {
       type: String,
@@ -32,6 +27,12 @@ export default {
       default: 'Vulnerabilities discovered'
     },
   },
+  computed: {
+    bannerClass() {
+      const darkThemeClass = this.color === 'jfrog-green' ? ' dark:bg-green-700' : ''
+      return `sr-banner sr-banner-small px-5 py-2 text-center bg-center bg-cover text-white bg-${this.color}${darkThemeClass}`
+    }
+  }
 }
 </script>
 
diff --git a/src/components/Button.vue b/src/components/Button.vue
index 1fddf89f424..6c1c15c2de0 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -21,10 +21,12 @@
   .sr-button {
     background-color: $green;
     color: white;
+    @apply dark:bg-green-700;
     border-radius: 4px;
     transition: all 0.32s ease;
     &:hover {
       background-color: $bright-green;
+      @apply dark:bg-green-600;
     }
   }
 </style>
\ No newline at end of file
diff --git a/src/components/CVEBlogPreview.vue b/src/components/CVEBlogPreview.vue
index 0d688cc3462..8df48d1a71c 100644
--- a/src/components/CVEBlogPreview.vue
+++ b/src/components/CVEBlogPreview.vue
@@ -11,7 +11,7 @@
 
     <div class="py-3 sm:px-5 sm:py-0">
       <div class="text-sm font-bold leading-4 text-jfrog-green uppercase cve-date" v-html="postObj.publish"> </div>
-      <div class="text-sm  leading-4 text-black cve-title" >
+      <div class="text-sm  leading-4 text-black dark:text-gray-100 cve-title" >
         <span class="textMaxLine" v-html="postObj.title"></span>
       </div>
     </div>
@@ -91,6 +91,7 @@ export default {
       }
       .list-split{
         border-bottom: 0.5px solid #000000;
+        @apply dark:border-gray-500;
         height: 0.5px;
         width: 100%;
 
@@ -107,6 +108,7 @@ export default {
       }
       .list-split{
         border-right: 0.5px solid #000000;
+        @apply dark:border-gray-500;
         height: 2.75rem;
       }
     }
diff --git a/src/components/DarkModeToggle.vue b/src/components/DarkModeToggle.vue
new file mode 100644
index 00000000000..2e11d3cf488
--- /dev/null
+++ b/src/components/DarkModeToggle.vue
@@ -0,0 +1,60 @@
+<template>
+  <button
+    type="button"
+    class="theme-toggle ui-icon-button"
+    :aria-pressed="isDark ? 'true' : 'false'"
+    aria-label="Toggle dark mode"
+    title="Toggle dark mode"
+    @click="toggle"
+  >
+    <svg
+      v-if="!isDark"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+    <svg
+      v-else
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+    </svg>
+  </button>
+</template>
+
+<script>
+import { themeState, themeMutations } from "~/theme.js";
+
+export default {
+  name: "DarkModeToggle",
+  computed: {
+    isDark() {
+      return themeState.isDark;
+    }
+  },
+  methods: {
+    toggle() {
+      themeMutations.toggle();
+    },
+  },
+};
+</script>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index f2dd00bc902..ea0c13410bf 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer class="py-4 main-footer bg-black">
+  <footer class="py-4 main-footer bg-black dark:bg-gray-950">
     <div class="container mx-auto px-2">
       <div class="flex w-full justify-center flex-col sm:flex-row sm:justify-between items-center flex-wrap gap-4">
         <div class="left">
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 4cf242d4cbe..adb9ca8a731 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,19 +1,18 @@
 <template>
-  <header class="py-2 main-header">
+  <header class="py-2 main-header dark:bg-gray-900">
     <div class="container mx-auto px-2">
       <div class="flex w-full justify-between items-center">
-        <div class="left">
-          <div class="flex items-center gap-2">
+        <div class="left flex-1 min-w-0">
+          <div class="flex min-w-0 items-center gap-2">
             <JFrogLogo />
-            <span class="site-name small">{{ $static.metadata.siteName }}</span>
+            <span class="site-name small truncate dark:text-gray-200">{{ $static.metadata.siteName }}</span>
           </div>
         </div>
-        <div class="right">
+        <div class="right flex-shrink-0">
           <div class="hidden sm:block desktop-menu-wrapper">
             <TopMenu />
           </div>
-          <div class="sm:hidden flex item-center mobile-menu-wrapper gap-2">
-            
+          <div class="sm:hidden flex mobile-menu-wrapper items-center">
             <!-- to be enabled in the feature -->
             <button v-if="false" class="search px-1">
               <g-image
@@ -25,13 +24,24 @@
             
             <button
               @click="isShowMobileMenu = true"
-              class="show-menu-hamburger px-1"
+              class="show-menu-hamburger ui-icon-button"
+              type="button"
+              aria-label="Open menu"
+              aria-haspopup="dialog"
+              :aria-expanded="isShowMobileMenu ? 'true' : 'false'"
             >
-              <g-image
-                src="~/assets/img/buttons/hamburger.svg"
-                :immediate="true"
-                alt="Menu"
-              />
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="22"
+                height="16"
+                viewBox="0 0 22 16"
+                fill="none"
+                aria-hidden="true"
+              >
+                <path d="M0 1C0 0.447715 0.447715 0 1 0H21C21.5523 0 22 0.447715 22 1C22 1.55228 21.5523 2 21 2H1C0.447716 2 0 1.55228 0 1Z" fill="currentColor"/>
+                <path d="M0 8C0 7.44772 0.447715 7 1 7H21C21.5523 7 22 7.44772 22 8C22 8.55228 21.5523 9 21 9H1C0.447716 9 0 8.55228 0 8Z" fill="currentColor"/>
+                <path d="M0 15C0 14.4477 0.447715 14 1 14H21C21.5523 14 22 14.4477 22 15C22 15.5523 21.5523 16 21 16H1C0.447716 16 0 15.5523 0 15Z" fill="currentColor"/>
+              </svg>
             </button>
             
           </div>
@@ -67,7 +77,7 @@ export default {
   components: {
     JFrogLogo,
     TopMenu,
-    MobileMenu
+    MobileMenu,
   }
 }
 </script>
@@ -77,6 +87,17 @@ export default {
   .main-header {
     border-bottom: 1px solid $border-gray;
   }
+  html.dark .main-header {
+    border-bottom-color: #475569;
+  }
+  .site-name {
+    max-width: 11rem;
+  }
+  @media (min-width: #{$sm}) {
+    .site-name {
+      max-width: none;
+    }
+  }
   .mobile-menu {
     transition: opacity .5s;
   }
diff --git a/src/components/LatestFromBlogCVE.vue b/src/components/LatestFromBlogCVE.vue
index 98382d1b77d..b3359590628 100644
--- a/src/components/LatestFromBlogCVE.vue
+++ b/src/components/LatestFromBlogCVE.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="gray-bg mt-12">
     <div class="flex flex-col sm:block">
-      <div class="bg-jfrog-green inline-block font-bold px-3 py-1 text-sm uppercase mb-2">
+      <div class="bg-jfrog-green dark:bg-green-700 inline-block font-bold px-3 py-1 text-sm uppercase mb-2">
         <a   :href="link"
              rel="noopener"
              target="_blank"
@@ -65,6 +65,7 @@ export default {
 .home-hero {
   .gray-bg{
     background-color: #F6F6F6;
+    @apply dark:bg-gray-800;
     max-width: 513px;
 
   }
diff --git a/src/components/MalicListItem.vue b/src/components/MalicListItem.vue
index fa3a2822df6..8d47a76870b 100644
--- a/src/components/MalicListItem.vue
+++ b/src/components/MalicListItem.vue
@@ -2,7 +2,7 @@
   <li>
     <component
       :is="isLink ? 'g-link' : 'div'"
-      class="flex flex-col sm:flex-row sm:justify-between sm:items-end gap-2 sm:gap-3 pb-4 mb-5 border-b-2 border-gray-400 mal-list-item"
+      class="flex flex-col sm:flex-row sm:justify-between sm:items-end gap-2 sm:gap-3 pb-4 mb-5 border-b-2 border-gray-400 dark:border-gray-600 mal-list-item"
       :to="mal.description"
       data-gac="Links back to JFrog"
       data-gaa="Malicious Packages"
@@ -21,7 +21,7 @@
         </div>
         <div class="left-content">
           <div class="details items-center mt-1 flex gap-2">
-            <span class="title font-bold sm:leading-none">{{mal.title}}</span>
+            <span class="title font-bold sm:leading-none text-black dark:text-gray-100">{{mal.title}}</span>
             <span class="vul-id hidden sm:block text-xs font-bold sm:hidden text-jfrog-green underline">{{mal.platform}}</span>
           </div>
           <div class="vul-id text-xs flex gap-1 mt-1">
diff --git a/src/components/MobileMenu.vue b/src/components/MobileMenu.vue
index 94df9edf0e7..66373ade5c9 100644
--- a/src/components/MobileMenu.vue
+++ b/src/components/MobileMenu.vue
@@ -1,23 +1,49 @@
 <template>
-  <div class="fixed mobile-menu h-screen w-screen z-50 bg-white text-gray-700 p-5 inset-0">
-    <div class="flex justify-end mb-3">
-      <button class="p-3" @click="$emit('close')">
-        <g-image
-          src="~/assets/img/buttons/close.svg"
-          alt="Menu"
-        />
+  <div class="fixed mobile-menu h-screen w-screen z-50 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-200 p-5 inset-0">
+    <div class="flex items-center justify-between gap-4 mb-3 pb-3 border-b border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-3">
+        <span class="text-xs font-bold uppercase tracking-wide text-gray-500 dark:text-gray-400">Theme</span>
+        <DarkModeToggle />
+      </div>
+      <button
+        class="ui-icon-button"
+        type="button"
+        aria-label="Close menu"
+        @click="$emit('close')"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 12 12"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path d="M1 1L11 11" stroke="currentColor" stroke-width="2"/>
+          <path d="M11 1L1 11" stroke="currentColor" stroke-width="2"/>
+        </svg>
       </button>
     </div>
     <ul class="mobile-menu-list">
       <li
         v-for="item in menuItems"
         :key="item.label"
-        class="py-4 px-2 border-t border-gray-200"
+        class="py-4 px-2 border-t border-gray-200 dark:border-gray-600"
         @click="$emit('close')"
       >
+        <a
+          v-if="item.external"
+          :href="item.to"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-gray-700 dark:text-gray-200"
+        >
+          {{item.label}}
+        </a>
         <g-link
+          v-else
           :to="item.to"
-          class="text-gray-700"
+          class="text-gray-700 dark:text-gray-200"
         >
           {{item.label}}
         </g-link>
@@ -27,7 +53,12 @@
 </template>
 
 <script>
+import DarkModeToggle from "~/components/DarkModeToggle.vue";
+
 export default {
+  components: {
+    DarkModeToggle,
+  },
   data() {
     return {
       menuItems: [
@@ -46,6 +77,7 @@ export default {
         {
           label: 'Follow JFrog Security',
           to: 'https://twitter.com/JFrogSecurity',
+          external: true,
         },
       ]
     }
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 61b08808e91..296e456b8d3 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -53,6 +53,7 @@ export default {
 }
 .modal-content {
   background-color: white;
+  @apply dark:bg-gray-800 dark:text-gray-200;
   padding: 40px 70px ;
   border-radius: 5px;
   position: relative;
diff --git a/src/components/ModelThreatsListItem.vue b/src/components/ModelThreatsListItem.vue
index b1f61ac9084..0bf09542ba1 100644
--- a/src/components/ModelThreatsListItem.vue
+++ b/src/components/ModelThreatsListItem.vue
@@ -61,6 +61,7 @@ export default {
 
   &:hover {
     background-color: #F8FAFB;
+    @apply dark:bg-gray-800 dark:border-gray-600;
     transition: all ease-in-out 0.3s;
     border-color: #D2DFED;
 
@@ -76,6 +77,7 @@ export default {
   flex-direction: column;
   text-align: left;
   color: #000000;
+  @apply dark:text-gray-200;
   border-bottom: 2px solid #3EB065;
   max-width: 300px;
   height: inherit;
diff --git a/src/components/OSSListItem.vue b/src/components/OSSListItem.vue
index 550b1b1423f..65434fb85c7 100644
--- a/src/components/OSSListItem.vue
+++ b/src/components/OSSListItem.vue
@@ -1,7 +1,7 @@
 <template>
   <li>
     <div
-        class="flex flex-col sm:flex-row sm:justify-between sm:items-end gap-2 sm:gap-3 pb-4 mb-5 border-b-2 border-gray-400 oss-list-item"
+        class="flex flex-col sm:flex-row sm:justify-between sm:items-end gap-2 sm:gap-3 pb-4 mb-5 border-b-2 border-gray-400 dark:border-gray-600 oss-list-item"
 
     >
       <div class="left flex gap-3">
@@ -96,6 +96,7 @@ export default {
   max-width: 766px;
   .title{
     color: black;
+    @apply dark:text-gray-100;
   }
   .go-to-git{
     a{
diff --git a/src/components/OssBlogPreview.vue b/src/components/OssBlogPreview.vue
index c32ce39aa44..c4a2a4fe033 100644
--- a/src/components/OssBlogPreview.vue
+++ b/src/components/OssBlogPreview.vue
@@ -25,7 +25,7 @@
 
 <!--    </div>-->
     <div class="mt-4">
-      <div class="text-md font-bold leading-5 text-black"  v-html="postObj.title"> </div>
+      <div class="text-md font-bold leading-5 text-black dark:text-gray-100"  v-html="postObj.title"> </div>
       <div class="oss-blog-info">
         <div class="textMaxLine" v-html="postObj.content"></div>
 
diff --git a/src/components/OssLatestFromBlog.vue b/src/components/OssLatestFromBlog.vue
index 8ec529b1305..e7a5d7ebd24 100644
--- a/src/components/OssLatestFromBlog.vue
+++ b/src/components/OssLatestFromBlog.vue
@@ -1,7 +1,7 @@
 <template>
   <section class=" oss-latest-post inline-block "v-if="remoteLatestPosts.length">
     <div class="container ">
-        <h2 class="text-black capitalize"> {{post.title}}<br> Related Blogs</h2>
+        <h2 class="text-black dark:text-gray-100 capitalize"> {{post.title}}<br> Related Blogs</h2>
 
 
       <div class="latest-oss-posts flex-col" v-if="remoteLatestPosts.length">
diff --git a/src/components/RealTimePostItem.vue b/src/components/RealTimePostItem.vue
index c035feb7805..f0b4df84646 100644
--- a/src/components/RealTimePostItem.vue
+++ b/src/components/RealTimePostItem.vue
@@ -27,11 +27,11 @@
     </div>
     <div>
       <div class="text-xs font-weight-500  green-dark mt-5 lg:mt-0 mb-2" v-html="postObj.tag"> </div>
-      <div class="text-lg font-weight-500 leading-6 text-black  " v-html="postObj.title"> </div>
-      <div class="text-xs  text-black mt-3 mb-3" v-html="postObj.description"> </div>
-      <p class="text-md text-black"> {{postObj.excerpt}} </p>
+      <div class="text-lg font-weight-500 leading-6 text-black dark:text-gray-100  " v-html="postObj.title"> </div>
+      <div class="text-xs  text-black dark:text-gray-200 mt-3 mb-3" v-html="postObj.description"> </div>
+      <p class="text-md text-black dark:text-gray-200"> {{postObj.excerpt}} </p>
       <div class="latest-published mt-3">
-        <div class=" text-right text-black text-xs leading-none py-1">Published on <b>{{ dateString }}</b> </div>
+        <div class=" text-right text-black dark:text-gray-300 text-xs leading-none py-1">Published on <b>{{ dateString }}</b> </div>
       </div>
     </div>
   </a>
diff --git a/src/components/SecurityBlogPreview.vue b/src/components/SecurityBlogPreview.vue
index a79a14e3f90..d9afd7cefa8 100644
--- a/src/components/SecurityBlogPreview.vue
+++ b/src/components/SecurityBlogPreview.vue
@@ -27,9 +27,9 @@
     </div>
     <div>
       <div class="text-xs font-weight-500  green-dark mt-5 lg:mt-0 mb-2" v-html="postObj.tag?postObj.tag:'Blog'"> </div>
-      <div class="text-lg font-weight-500 leading-6 text-black  " v-html="postObj.title"> </div>
-      <div class="text-xs  text-black mt-3 mb-3" v-html="postObj.description"> </div>
-      <p class="text-md text-black"> {{postObj.excerpt}} </p>
+      <div class="text-lg font-weight-500 leading-6 text-black dark:text-gray-100  " v-html="postObj.title"> </div>
+      <div class="text-xs  text-black dark:text-gray-200 mt-3 mb-3" v-html="postObj.description"> </div>
+      <p class="text-md text-black dark:text-gray-200"> {{postObj.excerpt}} </p>
       <div class="reading-time flex items-center gap-1">
         
         <g-image
@@ -40,7 +40,7 @@
         />
         <div class="text-jfrog-green text-xs leading-none py-1"> {{postObj.minutes}} min read </div>
       </div>
-      <div class="text-right text-black text-xs leading-none py-1">Published on <b>{{ formattedDate }}</b> </div>
+      <div class="text-right text-black dark:text-gray-300 text-xs leading-none py-1">Published on <b>{{ formattedDate }}</b> </div>
 
     </div>
   </a>
diff --git a/src/components/VulnerListItem.vue b/src/components/VulnerListItem.vue
index 0f82380a9ae..fb3e77713ba 100644
--- a/src/components/VulnerListItem.vue
+++ b/src/components/VulnerListItem.vue
@@ -1,7 +1,7 @@
 <template>
   <li>
     <g-link
-      class="flex cursor-pointer flex-col sm:flex-row sm:justify-between sm:items-end gap-2 sm:gap-3 pb-4 mb-4 border-b-2 border-gray-400"
+      class="flex cursor-pointer flex-col sm:flex-row sm:justify-between sm:items-end gap-2 sm:gap-3 pb-4 mb-4 border-b-2 border-gray-400 dark:border-gray-600"
       data-gac="CTA Links"
       :data-gaa="vul.title"
       :data-gal="vul.path"
@@ -11,8 +11,8 @@
       <div class="left">
         <div class="xray-id text-sm">{{vul.xray_id}}</div>
         <div class="details items-center mt-1 flex gap-2">
-          <span class="title font-bold">{{vul.title}}</span>
-          <span :class="`badge hidden sm:block font-bold flex items-center justify-center bg-${severityColorVal} px-2 py-1 uppercase text-white`">{{vul.severity}}</span>
+          <span class="title font-bold text-black dark:text-gray-100">{{vul.title}}</span>
+          <span :class="[severityBadgeClass, 'hidden sm:flex']">{{vul.severity}}</span>
           <span class="vul-id hidden sm:block text-xs font-bold sm:hidden text-jfrog-green underline">{{vul.vul_id}}</span>
         </div>
         <div
@@ -27,7 +27,7 @@
 
       <div class="sm:hidden 123 flex gap-3 items-center">
         <div class="vul-id text-xs font-bold mt-1 text-jfrog-green underline">{{vul.vul_id}}</div>
-        <span :class="`badge font-bold flex items-center justify-center bg-${severityColorVal} px-2 py-1 uppercase text-white`">{{vul.severity}}</span>
+        <span :class="[severityBadgeClass, 'sm:hidden']">{{vul.severity}}</span>
       </div>
       
       <div class="right text-xs">
@@ -47,7 +47,7 @@
 </template>
 
 <script>
-import {toBlogDateStr, severityColor} from '~/js/functions'
+import {toBlogDateStr} from '~/js/functions'
 export default {
   name: 'VulnerListItem',
   props: {
@@ -74,9 +74,21 @@ export default {
     }
   },
   computed: {
-    severityColorVal() {
-      const s = this.vul.severity
-      return severityColor(s)
+    severityBadgeClass() {
+      const baseClass = 'badge font-bold flex items-center justify-center px-2 py-1 uppercase'
+
+      switch ((this.vul.severity || '').toLowerCase()) {
+        case 'low':
+          return `${baseClass} bg-yellow-300 text-gray-900`
+        case 'medium':
+          return `${baseClass} bg-yellow-500 text-gray-900`
+        case 'high':
+          return `${baseClass} bg-red-700 text-white`
+        case 'critical':
+          return `${baseClass} bg-red-800 text-white`
+        default:
+          return `${baseClass} bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-white`
+      }
     },
     dateString() {
       return toBlogDateStr(this.vul.date_published)
diff --git a/src/components/post/ModelThreatsPostContent.vue b/src/components/post/ModelThreatsPostContent.vue
index acac4b48ced..a41ab3207a4 100644
--- a/src/components/post/ModelThreatsPostContent.vue
+++ b/src/components/post/ModelThreatsPostContent.vue
@@ -3,7 +3,7 @@
   <section
       v-html="content"
       ref="codeSection"
-      class="single-post-content mt-single-post-content mt-3 py-5 sm:py-8 px-4 sm:px-10 text-black border-black border-b text-xs"
+      class="single-post-content mt-single-post-content mt-3 py-5 sm:py-8 px-4 sm:px-10 text-black dark:text-gray-200 border-black dark:border-gray-600 border-b text-xs"
   />
   </div>
 </template>
diff --git a/src/components/post/PostContent.vue b/src/components/post/PostContent.vue
index e6a3c636678..ab422e32558 100644
--- a/src/components/post/PostContent.vue
+++ b/src/components/post/PostContent.vue
@@ -1,7 +1,7 @@
 <template>
   <section
     v-html="content"
-    class="single-post-content mt-3 py-5 sm:py-8 px-4 sm:px-10 text-black border-black border-b text-xs"
+    class="single-post-content mt-3 py-5 sm:py-8 px-4 sm:px-10 text-black dark:text-gray-200 border-black dark:border-gray-600 border-b text-xs"
   />
 </template>
 
diff --git a/src/components/post/PostHero.vue b/src/components/post/PostHero.vue
index d5df9bcb0aa..662055afc70 100644
--- a/src/components/post/PostHero.vue
+++ b/src/components/post/PostHero.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="single-post-hero mt-3 py-5 sm:py-8 px-4 sm:px-10 bg-gray-100 text-black">
+  <section class="single-post-hero mt-3 py-5 sm:py-8 px-4 sm:px-10 bg-gray-100 dark:bg-gray-800 text-black dark:text-gray-100">
     
     <h1>{{vul.xray_id}} - {{vul.title}}</h1>
     
diff --git a/src/components/post/RealTimePostContent.vue b/src/components/post/RealTimePostContent.vue
index 81354232597..0c944db98fb 100644
--- a/src/components/post/RealTimePostContent.vue
+++ b/src/components/post/RealTimePostContent.vue
@@ -3,7 +3,7 @@
     <section
         v-html="content"
         ref="codeSection"
-        class="latest-posts-single-post-content text-black"
+        class="latest-posts-single-post-content text-black dark:text-gray-200"
     />
 
     <ImageModal
diff --git a/src/components/top-menu/index.vue b/src/components/top-menu/index.vue
index fd355d497b5..4ceb4838b01 100644
--- a/src/components/top-menu/index.vue
+++ b/src/components/top-menu/index.vue
@@ -3,17 +3,20 @@
     <li class="menu-item">
       <g-link
           to="/model-threats/"
-          class="font-bold px-3"
+          class="font-bold px-3 dark:text-gray-200"
       >
         Model Threats
       </g-link>
       <g-link
         to="/vulnerabilities/"
-        class="font-bold px-3 mx-3"
+        class="font-bold px-3 mx-3 dark:text-gray-200"
       >
         Discover
       </g-link>
     </li>
+    <li class="flex items-center mr-2">
+      <DarkModeToggle />
+    </li>
     <li>
       <Button />
     </li>
@@ -30,10 +33,12 @@ query {
 
 <script>
 import Button from './../Button'
+import DarkModeToggle from '~/components/DarkModeToggle.vue'
 export default {
   name: "TopMenu",
   components: {
-    Button
+    Button,
+    DarkModeToggle,
   }
 }
 </script>
\ No newline at end of file
diff --git a/src/js/functions.js b/src/js/functions.js
index 19b279db6a2..3f6643bb82c 100644
--- a/src/js/functions.js
+++ b/src/js/functions.js
@@ -32,9 +32,19 @@ const severityColor = severityStr => {
   return color
 }
 
+const getPaginationClass = (currentPage, pageNum) => {
+  const baseClass = 'w-8 h-8 text-sm flex items-center justify-center transition-all'
+  const toneClass = pageNum === currentPage
+    ? ' bg-jfrog-green text-white'
+    : ' bg-gray-300 text-black hover:bg-jfrog-green hover:text-white dark:bg-gray-600 dark:text-gray-100'
+
+  return `${baseClass}${toneClass}`
+}
+
 // don't forget to add these to the safe list with prefix bg (tailwind.config.js)
 
 module.exports = {
   toBlogDateStr: toBlogDateStr,
-  severityColor: severityColor
+  severityColor: severityColor,
+  getPaginationClass: getPaginationClass
 }
\ No newline at end of file
diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index 4d6d28d888f..7de30636a84 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -1,8 +1,15 @@
 <template>
-  <div :class="classStr">
+  <div
+    :class="[
+      classStr,
+      'min-h-screen bg-white dark:bg-gray-900 transition-colors duration-200',
+    ]"
+  >
     <Header />
 
-    <slot />
+    <main>
+      <slot />
+    </main>
 
     <Footer />
   </div>
diff --git a/src/main.js b/src/main.js
index c842bd3a0e1..411e10a73f3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,10 +11,20 @@ require("~/main.css");
 // require("prismjs/plugins/command-line/prism-command-line.css");
 
 import DefaultLayout from "~/layouts/Default.vue";
+import { getThemeBootstrapScript, themeMutations } from "~/theme.js";
 
 require("~/assets/style/custom.scss");
 
 export default function(Vue, { router, head, isClient }) {
+  head.script.unshift({
+    innerHTML: getThemeBootstrapScript(),
+    type: "text/javascript",
+  });
+
+  if (isClient) {
+    themeMutations.init();
+  }
+
   //speadsize head script.
   // TODO add a condition for not doing it on local env, something like `if (location.hostname !== "localhost" && location.hostname !== "127.0.0.1")`
   head.script.push({
diff --git a/src/page-parts/home/LatestFromBlog.vue b/src/page-parts/home/LatestFromBlog.vue
index 2e054eac5b0..c42cb24eac1 100644
--- a/src/page-parts/home/LatestFromBlog.vue
+++ b/src/page-parts/home/LatestFromBlog.vue
@@ -26,7 +26,7 @@
             </div>
           </div>
         <div class="banner-col lg:pl-12 justify-center flex flex-col flex items-center w-full h-full mb-4 lg:mb-0">
-          <div class="js-banner px-10 lg:px-6 py-12 text-center bg-center bg-cover bg-jfrog-green h-full w-full">
+          <div class="js-banner px-10 lg:px-6 py-12 text-center bg-center bg-cover bg-jfrog-green dark:bg-green-700 h-full w-full">
             <BannerButton
                 :link="link"
                 rel="noopener"
diff --git a/src/page-parts/home/Powered.vue b/src/page-parts/home/Powered.vue
index 7ee673320ea..e935b5936ab 100644
--- a/src/page-parts/home/Powered.vue
+++ b/src/page-parts/home/Powered.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="powered relative text-center bg-jfrog-green py-14">
+  <section class="powered relative text-center bg-jfrog-green dark:bg-green-700 py-14">
     <g-image
       class="absolute z-10 inset-x-0 mx-auto top-0 splash"
       src="~/assets/img/home-page/splash.svg"
diff --git a/src/pages/MaliciousPackages.vue b/src/pages/MaliciousPackages.vue
index bff172c1b0a..61f3373d633 100644
--- a/src/pages/MaliciousPackages.vue
+++ b/src/pages/MaliciousPackages.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import {toBlogDateStr} from '~/js/functions'
+import {toBlogDateStr, getPaginationClass as getPaginationThemeClass} from '~/js/functions'
 import BannerSmall from '~/components/BannerSmall'
 import MalicListItem from '~/components/MalicListItem'
 
@@ -100,20 +100,7 @@ export default {
       return results;
     },
     getPaginationClass: function(pageNum) {
-      
-      let calculatedClass = 'w-8 h-8 text-sm flex items-center justify-center hover:bg-jfrog-green hover:text-white transition-all'
-      
-      const 
-        normalClass = ' bg-gray-300 text-black',
-        activeClass = ' bg-jfrog-green text-white'
-      
-      if (pageNum === this.currentPage) {
-        calculatedClass += activeClass
-      } else {
-        calculatedClass += normalClass
-      }
-
-      return calculatedClass
+      return getPaginationThemeClass(this.currentPage, pageNum)
     }
   },
   metaInfo() {
diff --git a/src/pages/Vulnerabilities.vue b/src/pages/Vulnerabilities.vue
index 96215e6a4d2..8aefddfce99 100644
--- a/src/pages/Vulnerabilities.vue
+++ b/src/pages/Vulnerabilities.vue
@@ -80,7 +80,7 @@ query Blog {
 
 
 <script>
-import {toBlogDateStr} from '~/js/functions'
+import {toBlogDateStr, getPaginationClass as getPaginationThemeClass} from '~/js/functions'
 import BannerSmall from '~/components/BannerSmall'
 import VulnerListItem from '~/components/VulnerListItem'
 export default {
@@ -130,20 +130,7 @@ export default {
       return results;
     },
     getPaginationClass: function(pageNum) {
-      
-      let calculatedClass = 'w-8 h-8 text-sm flex items-center justify-center hover:bg-jfrog-green hover:text-white transition-all'
-      
-      const 
-        normalClass = ' bg-gray-300 text-black',
-        activeClass = ' bg-jfrog-green text-white'
-      
-      if (pageNum === this.currentPage) {
-        calculatedClass += activeClass
-      } else {
-        calculatedClass += normalClass
-      }
-
-      return calculatedClass
+      return getPaginationThemeClass(this.currentPage, pageNum)
     }
   },
   metaInfo() {
diff --git a/src/pages/oss.vue b/src/pages/oss.vue
index fda71f14033..d3ddf0a36a1 100644
--- a/src/pages/oss.vue
+++ b/src/pages/oss.vue
@@ -44,6 +44,7 @@
 </template>
 
 <script>
+import {getPaginationClass as getPaginationThemeClass} from '~/js/functions'
 import BannerSmall from '~/components/BannerSmall'
 import OssListItem from '~/components/OSSListItem'
 import OssLatestFromBlog from '~/components/OssLatestFromBlog'
@@ -118,20 +119,7 @@ export default {
       return results;
     },
     getPaginationClass: function(pageNum) {
-
-      let calculatedClass = 'w-8 h-8 text-sm flex items-center justify-center hover:bg-jfrog-green hover:text-white transition-all'
-
-      const
-          normalClass = ' bg-gray-300 text-black',
-          activeClass = ' bg-jfrog-green text-white'
-
-      if (pageNum === this.currentPage) {
-        calculatedClass += activeClass
-      } else {
-        calculatedClass += normalClass
-      }
-
-      return calculatedClass
+      return getPaginationThemeClass(this.currentPage, pageNum)
     }
   },
   metaInfo() {
diff --git a/src/pages/post.vue b/src/pages/post.vue
index 02f291f1390..0b8fda315f0 100644
--- a/src/pages/post.vue
+++ b/src/pages/post.vue
@@ -73,7 +73,7 @@ path
 
 
 <script>
-import {toBlogDateStr} from '~/js/functions'
+import {toBlogDateStr, getPaginationClass as getPaginationThemeClass} from '~/js/functions'
 import BannerSmall from '~/components/BannerSmall'
 import RealTimePostItem from '~/components/RealTimePostItem.vue'
 
@@ -135,20 +135,7 @@ export default {
       return results;
     },
     getPaginationClass: function(pageNum) {
-      
-      let calculatedClass = 'w-8 h-8 text-sm flex items-center justify-center hover:bg-jfrog-green hover:text-white transition-all'
-      
-      const 
-        normalClass = ' bg-gray-300 text-black',
-        activeClass = ' bg-jfrog-green text-white'
-      
-      if (pageNum === this.currentPage) {
-        calculatedClass += activeClass
-      } else {
-        calculatedClass += normalClass
-      }
-
-      return calculatedClass
+      return getPaginationThemeClass(this.currentPage, pageNum)
     }
   },
   metaInfo() {
diff --git a/src/templates/ModelThreatsPost.vue b/src/templates/ModelThreatsPost.vue
index f0bb0feed15..1fa4c5ad5b5 100644
--- a/src/templates/ModelThreatsPost.vue
+++ b/src/templates/ModelThreatsPost.vue
@@ -195,6 +195,7 @@ baseURL
   width: 100%;
   border-bottom: 1px solid black;
   padding-left: 232px;
+  @apply dark:text-gray-100 dark:border-gray-500;
 
   @media (max-width: #{$md}) {
     padding-left: 10px;
@@ -264,6 +265,7 @@ baseURL
   border: 1.5px solid #3EB065;
   border-radius: 4px;
   color: #3EB065;
+  @apply dark:border-jfrog-green dark:text-jfrog-green;
   font-size: 14px;
   font-weight: 600;
   line-height: 1;
@@ -319,6 +321,7 @@ baseURL
 
   .modal-sub-title{
     color: #40BE46;
+    @apply dark:text-jfrog-green;
     font-size: 36px;
     font-weight: bold;
     margin-bottom: 24px;
@@ -376,6 +379,7 @@ baseURL
     padding-left: 30px;
     margin-bottom: 10px;
     color: #0C1D37;
+    @apply dark:text-gray-200;
     font-weight: 600;
   }
 
@@ -394,6 +398,7 @@ baseURL
 
   .modal-note{
     color: #0C1D37;
+    @apply dark:text-gray-200;
     font-size: 14px;
     font-style: italic;
     max-width: 286px;
@@ -411,6 +416,7 @@ baseURL
 .modal-title{
 
   color: #0C1D37;
+  @apply dark:text-gray-100;
   font-size: 27px;
   font-weight: bold;
   line-height: 1.4;
@@ -636,6 +642,7 @@ baseURL
     outline-color: #C9D0E3 !important;
     outline-width: 1px !important;
     color: black !important;
+    @apply dark:bg-gray-800 dark:text-gray-100 dark:border-gray-500;
   }
   textarea.mktoField{
     height: 106px !important;
diff --git a/src/theme.js b/src/theme.js
new file mode 100644
index 00000000000..47a08893d77
--- /dev/null
+++ b/src/theme.js
@@ -0,0 +1,64 @@
+import Vue from "vue";
+
+const STORAGE_KEY = "theme";
+const DARK_THEME = "dark";
+const LIGHT_THEME = "light";
+const SYSTEM_THEME_QUERY = "(prefers-color-scheme: dark)";
+
+export const themeState = Vue.observable({
+  isDark: false,
+});
+
+const safeGetStoredTheme = () => {
+  if (typeof window === "undefined") return null;
+
+  try {
+    const theme = window.localStorage.getItem(STORAGE_KEY);
+    return theme === DARK_THEME || theme === LIGHT_THEME ? theme : null;
+  } catch (e) {
+    return null;
+  }
+};
+
+const getSystemTheme = () => {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return LIGHT_THEME;
+  }
+
+  return window.matchMedia(SYSTEM_THEME_QUERY).matches ? DARK_THEME : LIGHT_THEME;
+};
+
+const getPreferredTheme = () => safeGetStoredTheme() || getSystemTheme();
+
+const applyTheme = theme => {
+  if (typeof document === "undefined") return;
+
+  const isDark = theme === DARK_THEME;
+  document.documentElement.classList.toggle(DARK_THEME, isDark);
+  themeState.isDark = isDark;
+};
+
+const persistTheme = theme => {
+  if (typeof window === "undefined") return;
+
+  try {
+    window.localStorage.setItem(STORAGE_KEY, theme);
+  } catch (e) {}
+};
+
+export const getThemeBootstrapScript = () =>
+  `(function(){try{var k='${STORAGE_KEY}',d=document.documentElement,m=window.matchMedia&&window.matchMedia('${SYSTEM_THEME_QUERY}').matches,s=localStorage.getItem(k),t=s==='${DARK_THEME}'||s==='${LIGHT_THEME}'?s:(m?'${DARK_THEME}':'${LIGHT_THEME}');d.classList.toggle('${DARK_THEME}',t==='${DARK_THEME}');}catch(e){}})();`;
+
+export const themeMutations = {
+  init() {
+    applyTheme(getPreferredTheme());
+  },
+  setTheme(theme) {
+    const nextTheme = theme === DARK_THEME ? DARK_THEME : LIGHT_THEME;
+    applyTheme(nextTheme);
+    persistTheme(nextTheme);
+  },
+  toggle() {
+    this.setTheme(themeState.isDark ? LIGHT_THEME : DARK_THEME);
+  },
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index 2876d219eef..18774897197 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
 const plugin = require("tailwindcss/plugin");
 
 module.exports = {
+  darkMode: "class",
   purge: {
     content: [
       "./src/**/*.vue",
@@ -42,8 +43,11 @@ module.exports = {
   },
   variants: {
     extend: {
-      display: ['first']
-    }
+      display: ["first"],
+      backgroundColor: ["dark"],
+      borderColor: ["dark"],
+      textColor: ["dark"],
+    },
   },
   corePlugins: {
     container: false