diff --git a/website/client/src/pages/settings/generalSettings.vue b/website/client/src/pages/settings/generalSettings.vue
index d2194d3e59..ee24854eea 100644
--- a/website/client/src/pages/settings/generalSettings.vue
+++ b/website/client/src/pages/settings/generalSettings.vue
@@ -46,6 +46,7 @@
         <date-format-setting />
         <day-start-adjustment-setting />
         <audio-theme-setting />
+        <sleep-mode />
         <tr>
           <td colspan="3">
           </td>
@@ -135,9 +136,11 @@ import LoginMethods from '@/pages/settings/settingRows/loginMethods.vue';
 import TaskSettings from '@/pages/settings/settingRows/taskSettings.vue';
 import { GenericUserPreferencesMixin } from '@/pages/settings/components/genericUserPreferencesMixin';
 import { mapState } from '@/libs/store';
+import SleepMode from '@/pages/settings/settingRows/sleepMode.vue';
 
 export default {
   components: {
+    SleepMode,
     TaskSettings,
     LoginMethods,
     FixValuesSetting,
diff --git a/website/client/src/pages/settings/settingRows/sleepMode.vue b/website/client/src/pages/settings/settingRows/sleepMode.vue
new file mode 100644
index 0000000000..319399d650
--- /dev/null
+++ b/website/client/src/pages/settings/settingRows/sleepMode.vue
@@ -0,0 +1,95 @@
+<template>
+  <fragment>
+    <tr
+      v-if="!modalVisible"
+    >
+      <td class="settings-label">
+        {{ $t("pauseDailies") }}
+      </td>
+      <td class="settings-value">
+      </td>
+      <td class="settings-button">
+        <a
+          class="edit-link"
+          @click.prevent="openModal()"
+        >
+          {{ $t('learnMore') }}
+        </a>
+      </td>
+    </tr>
+    <tr
+      v-if="modalVisible"
+      class="expanded"
+    >
+      <td colspan="3">
+        <div
+          v-once
+          class="dialog-title"
+        >
+          {{ $t("pauseDailies") }}
+        </div>
+        <div
+          v-once
+          class="dialog-disclaimer"
+          v-html="$t('sleepDescription')"
+        >
+        </div>
+
+
+        <ul>
+          <li v-once>
+            {{ $t('sleepBullet1') }}
+          </li>
+          <li v-once>
+            {{ $t('sleepBullet2') }}
+          </li>
+          <li v-once>
+            {{ $t('sleepBullet3') }}
+          </li>
+        </ul>
+
+        <div class="input-area">
+          <save-cancel-buttons
+            :primary-button-label="user.preferences.sleep ? 'unpauseDailies' : 'pauseDailies'"
+            @saveClicked="toggleSleep(); requestCloseModal();"
+            @cancelClicked="requestCloseModal();"
+          />
+        </div>
+      </td>
+    </tr>
+  </fragment>
+</template>
+
+<style lang="scss" scoped>
+@import '~@/assets/scss/colors.scss';
+
+.feedback {
+  color: $gray-50;
+}
+</style>
+
+<script>
+import { mapState } from '@/libs/store';
+
+import { InlineSettingMixin } from '../components/inlineSettingMixin';
+import SaveCancelButtons from '../components/saveCancelButtons.vue';
+
+
+export default {
+  components: { SaveCancelButtons },
+  mixins: [InlineSettingMixin],
+  data () {
+    return {};
+  },
+  computed: {
+    ...mapState({
+      user: 'user.data',
+    }),
+  },
+  methods: {
+    toggleSleep () {
+      this.$store.dispatch('user:sleep');
+    },
+  },
+};
+</script>