diff --git a/website/client/src/components/appFooter.vue b/website/client/src/components/appFooter.vue
index b099b4bdf21..2d3f3b56133 100644
--- a/website/client/src/components/appFooter.vue
+++ b/website/client/src/components/appFooter.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <buy-gems-modal v-if="user" />
+    <privacy-modal />
     <footer>
       <!-- Product -->
       <div class="product">
@@ -862,6 +863,7 @@ import heart from '@/assets/svg/heart.svg';
 // components & modals
 import { mapState } from '@/libs/store';
 import buyGemsModal from './payments/buyGemsModal.vue';
+import privacyModal from './settings/privacyModal.vue';
 import reportBug from '@/mixins/reportBug.js';
 import { worldStateMixin } from '@/mixins/worldState';
 
@@ -876,6 +878,7 @@ if (TIME_TRAVEL_ENABLED) {
 export default {
   components: {
     buyGemsModal,
+    privacyModal,
   },
   mixins: [
     reportBug,
diff --git a/website/client/src/components/header/banners/privacy.vue b/website/client/src/components/header/banners/privacy.vue
index a2d20b449a2..f2f82a29761 100644
--- a/website/client/src/components/header/banners/privacy.vue
+++ b/website/client/src/components/header/banners/privacy.vue
@@ -1,33 +1,72 @@
 <template>
-  <div class="d-flex align-items-center justify-content-between py-3 px-4">
+  <div class="banner d-flex align-items-center justify-content-between py-3 px-4">
     <p
       class="mr-3 mb-0"
-      v-html="$t('privacyOverview')"
+      v-html="$t('privacyOverview') + ' ' + $t('learnMorePrivacy')"
     >
     </p>
-    <div class="d-flex flex-column justify-content-around text-center ml-3">
+    <div class="navigation d-flex flex-column justify-content-around text-center ml-2">
       <button class="btn btn-primary mb-2">
         {{ $t('acceptAllCookies') }}
       </button>
       <button class="btn btn-secondary mb-2">
         {{ $t('denyNonEssentialCookies') }}
       </button>
-      <a>{{ $t('managePrivacyPreferences') }}</a>
+      <a
+        v-if="isStaticPage"
+        @click="showPrivacyModal"
+      >
+        {{ $t('managePrivacyPreferences') }}
+      </a>
+      <router-link
+        v-else
+        to="/user/settings/siteData"
+      >
+        {{ $t('managePrivacyPreferences') }}
+      </router-link>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
   button {
-    min-width: 40px;
     width: 558px;
   }
 
   a, p {
     line-height: 1.714;
   }
+
+  @media only screen and (max-width: 992px) {
+    .banner {
+      flex-direction: column !important;
+
+      .navigation {
+        margin-left: 0px !important;
+      }
+
+      button {
+        width: calc(100vw - 48px);
+      }
+
+      p {
+        margin-bottom: 16px !important;
+      }
+    }
+  }
 </style>
 
 <script>
-
+export default {
+  computed: {
+    isStaticPage () {
+      return this.$route.meta.requiresLogin === false;
+    },
+  },
+  methods: {
+    showPrivacyModal () {
+      this.$root.$emit('bv::show::modal', 'privacy-preferences');
+    },
+  },
+};
 </script>
diff --git a/website/client/src/components/settings/privacyModal.vue b/website/client/src/components/settings/privacyModal.vue
new file mode 100644
index 00000000000..b4cdeeec291
--- /dev/null
+++ b/website/client/src/components/settings/privacyModal.vue
@@ -0,0 +1,95 @@
+<template>
+  <b-modal
+    id="privacy-preferences"
+    size="md"
+    :hide-footer="true"
+    :hide-header="true"
+  >
+    <close-x
+      @close="close()"
+    />
+    <h1 class="purple-200 mb-3">
+      {{ $t('yourPrivacyPreferences') }}
+    </h1>
+    <p>
+      {{ $t('privacySettingsOverview') }}
+    </p>
+    <div class="mb-4">
+      <div
+        class="d-flex justify-content-between align-items-center mb-1"
+      >
+        <label class="mb-0">
+          {{ $t('performanceAnalytics') }}
+        </label>
+        <toggle-switch />
+      </div>
+      <small>
+        {{ $t('usedForSupport') }}
+      </small>
+    </div>
+    <div class="mt-1 mb-4">
+      <div
+        class="d-flex justify-content-between align-items-center mb-1"
+      >
+        <label class="mb-0">
+          {{ $t('strictlyNecessary') }}
+        </label>
+        <toggle-switch />
+      </div>
+      <small>
+        {{ $t('requiredToRun') }}
+      </small>
+    </div>
+    <div class="d-flex flex-column text-center">
+      <button class="btn btn-primary mb-2">
+        {{ $t('acceptAllCookies') }}
+      </button>
+      <button class="btn btn-secondary mb-2">
+        {{ $t('denyNonEssentialCookies') }}
+      </button>
+      <button class="btn btn-secondary mb-3">
+        {{ $t('savePreferences') }}
+      </button>
+      <a>
+        {{ $t('habiticaPrivacyPolicy') }}
+      </a>
+    </div>
+  </b-modal>
+</template>
+
+<style lang="scss">
+  #privacy-preferences {
+    .modal-body {
+      padding: 24px;
+    }
+    .modal-content {
+      width: 448px;
+    }
+  }
+</style>
+
+<style lang="scss" scoped>
+  label {
+    font-weight: 700;
+  }
+  label, p {
+    line-height: 1.714;
+  }
+</style>
+
+<script>
+import closeX from '@/components/ui/closeX';
+import ToggleSwitch from '@/components/ui/toggleSwitch.vue';
+
+export default {
+  components: {
+    closeX,
+    ToggleSwitch,
+  },
+  methods: {
+    close () {
+      this.$root.$emit('bv::hide::modal', 'privacy-preferences');
+    },
+  },
+};
+</script>
diff --git a/website/client/src/pages/settings-overview.vue b/website/client/src/pages/settings-overview.vue
index 040cd062b4a..22fdc032c03 100644
--- a/website/client/src/pages/settings-overview.vue
+++ b/website/client/src/pages/settings-overview.vue
@@ -100,12 +100,6 @@
     max-width: unset;
 
     ::v-deep {
-      line-height: 1.71;
-
-      .small {
-        line-height: 1.33;
-      }
-
       table td {
         padding: 0.5rem;
       }
@@ -121,6 +115,14 @@
         width: 23%;
       }
 
+      small {
+        line-height: 1.33;
+      }
+
+      .settings-label, .settings-value, a, p {
+        line-height: 1.71;
+      }
+
       .input-area .settings-label {
         width: unset;
       }
diff --git a/website/client/src/pages/settings/siteDataRows/privacyPreferencesRow.vue b/website/client/src/pages/settings/siteDataRows/privacyPreferencesRow.vue
index d1393e6d7e2..fcce8d90953 100644
--- a/website/client/src/pages/settings/siteDataRows/privacyPreferencesRow.vue
+++ b/website/client/src/pages/settings/siteDataRows/privacyPreferencesRow.vue
@@ -10,7 +10,7 @@
       <p
         v-once
         class="gray-50"
-        v-html="$t('privacySettingsOverview')"
+        v-html="$t('privacySettingsOverview') + ' ' + $t('learnMorePrivacy')"
       >
       </p>
       <div
@@ -18,7 +18,7 @@
         class="d-flex justify-content-center"
       >
         <div class="w-66">
-          <div class="mb-28">
+          <div class="mb-28p">
             <div
               class="d-flex justify-content-between align-items-center"
             >
@@ -62,7 +62,7 @@
     width: fit-content;
   }
 
-  .mb-28 {
+  .mb-28p {
     margin-bottom: 28px;
   }
 
@@ -71,6 +71,10 @@
     text-align: right;
   }
 
+  small {
+    line-height: 1.33;
+  }
+
   .w-66 {
     width: 66.7%;
   }
diff --git a/website/common/locales/en/settings.json b/website/common/locales/en/settings.json
index 64703d4fcbc..499b7e6946b 100644
--- a/website/common/locales/en/settings.json
+++ b/website/common/locales/en/settings.json
@@ -259,15 +259,18 @@
     "connected": "Connected",
     "connect": "Connect",
     "remove": "Remove",
-    "privacyOverview": "In today's world, it feels like every company is looking to profit from your data. This can make it difficult to find the right app to improve your habits. Habitica uses cookies that store data only to analyze performance, handle support requests, and provide you with the best possible gamified experience. You can change this at any time from your account settings. To learn more, review our <a href='/static/privacy' target='_blank'>Privacy Policy</a>.",
+    "privacyOverview": "In today's world, it feels like every company is looking to profit from your data. This can make it difficult to find the right app to improve your habits. Habitica uses cookies that store data only to analyze performance, handle support requests, and provide you with the best possible gamified experience. You can change this at any time from your account settings.",
     "acceptAllCookies": "Accept All Cookies",
     "denyNonEssentialCookies": "Deny Non-Essential Cookies",
     "managePrivacyPreferences": "Manage Your Privacy Preferences",
     "yourPrivacyPreferences": "Your Privacy Preferences",
-    "privacySettingsOverview": "Habitica uses cookies to analyze performance, handle support requests, and provide you with the best possible gamified experience. To do that, we need to request the following permissions. You can change these at any time from your account settings. To learn more, review our <a href='/static/privacy' target='_blank'>Privacy Policy</a>.",
+    "privacySettingsOverview": "Habitica uses cookies to analyze performance, handle support requests, and provide you with the best possible gamified experience. To do that, we need to request the following permissions. You can change these at any time from your account settings.",
+    "learnMorePrivacy": "To learn more, review our <a href='/static/privacy' target='_blank'>Privacy Policy</a>.",
     "strictlyNecessary": "Strictly Necessary",
     "alwaysActive": "Always Active",
     "requiredToRun": "These are required by our website and apps to run at their best.",
     "performanceAnalytics": "Performance and Analytics",
-    "usedForSupport": "These are used to improve the user experience, performance, and services of our website and apps. This data is used by our support team when handling requests and bug reports."
+    "usedForSupport": "These are used to improve the user experience, performance, and services of our website and apps. This data is used by our support team when handling requests and bug reports.",
+    "savePreferences": "Save Preferences",
+    "habiticaPrivacyPolicy": "Habitica's Privacy Policy"
 }