diff --git a/package.json b/package.json
index 7fd501c6..2dee24ad 100644
--- a/package.json
+++ b/package.json
@@ -103,6 +103,7 @@
     "vee-validate": "^3.4.8",
     "vue-async-computed": "^3.9.0",
     "vue-carousel": "^0.18.0",
+    "vue-check-view": "^0.3.0",
     "vue-circular-count-down-timer": "^2.0.0",
     "vue-clickaway": "^2.2.2",
     "vue-clipboard2": "^0.3.1",
diff --git a/src/renderer/assets/images/pages/promo/cyber-month/smooth-1.svg b/src/renderer/assets/images/pages/promo/cyber-month/smooth-1.svg
new file mode 100644
index 00000000..8f8c8fcd
--- /dev/null
+++ b/src/renderer/assets/images/pages/promo/cyber-month/smooth-1.svg
@@ -0,0 +1,14 @@
+<svg width="42" height="43" viewBox="0 0 42 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6840_11829)">
+<rect width="18" height="18" transform="translate(12 12.9521)" fill="white" fill-opacity="0.01"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.9375 19.7021C21.9375 18.5631 22.8609 17.6396 24 17.6396H27C28.1391 17.6396 29.0625 18.5631 29.0625 19.7021V26.4521C29.0625 27.5912 28.1391 28.5146 27 28.5146H24C22.8609 28.5146 21.9375 27.5912 21.9375 26.4521V19.7021ZM24 18.7646C23.4822 18.7646 23.0625 19.1844 23.0625 19.7021V26.4521C23.0625 26.9699 23.4822 27.3896 24 27.3896H27C27.5178 27.3896 27.9375 26.9699 27.9375 26.4521V19.7021C27.9375 19.1844 27.5178 18.7646 27 18.7646H24Z" fill="#1E1E1E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4375 17.4521C14.4375 16.3131 15.3609 15.3896 16.5 15.3896H27C27.3107 15.3896 27.5625 15.6415 27.5625 15.9521C27.5625 16.2628 27.3107 16.5146 27 16.5146H16.5C15.9822 16.5146 15.5625 16.9344 15.5625 17.4521V25.1396H20.25C20.5607 25.1396 20.8125 25.3915 20.8125 25.7021C20.8125 26.0128 20.5607 26.2646 20.25 26.2646H14.4375V17.4521Z" fill="#1E1E1E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9375 26.8271C12.9375 25.8952 13.693 25.1396 14.625 25.1396H20.25C20.5607 25.1396 20.8125 25.3915 20.8125 25.7021C20.8125 26.0128 20.5607 26.2646 20.25 26.2646H14.625C14.3143 26.2646 14.0625 26.5165 14.0625 26.8271C14.0625 27.1378 14.3143 27.3896 14.625 27.3896H20.25C20.5607 27.3896 20.8125 27.6415 20.8125 27.9521C20.8125 28.2628 20.5607 28.5146 20.25 28.5146H14.625C13.693 28.5146 12.9375 27.7591 12.9375 26.8271Z" fill="#1E1E1E"/>
+</g>
+<rect x="0.285714" y="1.23786" width="41.4286" height="41.4286" rx="20.7143" stroke="#1E1E1E" stroke-width="0.571429"/>
+<defs>
+<clipPath id="clip0_6840_11829">
+<rect width="18" height="18" fill="white" transform="translate(12 12.9521)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/renderer/assets/images/pages/promo/cyber-month/smooth-2.svg b/src/renderer/assets/images/pages/promo/cyber-month/smooth-2.svg
new file mode 100644
index 00000000..2d1d314e
--- /dev/null
+++ b/src/renderer/assets/images/pages/promo/cyber-month/smooth-2.svg
@@ -0,0 +1,12 @@
+<svg width="42" height="43" viewBox="0 0 42 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6840_11837)">
+<rect width="18" height="18" transform="translate(12 12.9521)" fill="white" fill-opacity="0.01"/>
+<path d="M29.1981 26.9355H17.466C17.3776 26.9355 17.3052 27.0079 17.3052 27.0963V28.2213C17.3052 28.3097 17.3776 28.382 17.466 28.382H29.1981C29.2865 28.382 29.3588 28.3097 29.3588 28.2213V27.0963C29.3588 27.0079 29.2865 26.9355 29.1981 26.9355ZM29.1981 15.5248H17.466C17.3776 15.5248 17.3052 15.5972 17.3052 15.6855V16.8105C17.3052 16.8989 17.3776 16.9713 17.466 16.9713H29.1981C29.2865 16.9713 29.3588 16.8989 29.3588 16.8105V15.6855C29.3588 15.5972 29.2865 15.5248 29.1981 15.5248ZM29.1981 21.2302H17.466C17.3776 21.2302 17.3052 21.3025 17.3052 21.3909V22.5159C17.3052 22.6043 17.3776 22.6766 17.466 22.6766H29.1981C29.2865 22.6766 29.3588 22.6043 29.3588 22.5159V21.3909C29.3588 21.3025 29.2865 21.2302 29.1981 21.2302ZM15.0552 25.9713H12.7249C12.6807 25.9713 12.6445 26.0074 12.6445 26.0516V26.7347C12.6445 26.7789 12.6807 26.815 12.7249 26.815H14.1794V27.2268H13.4622C13.418 27.2268 13.3818 27.263 13.3818 27.3072V27.9902C13.3818 28.0344 13.418 28.0706 13.4622 28.0706H14.1794V28.5025H12.7249C12.6807 28.5025 12.6445 28.5387 12.6445 28.5829V29.2659C12.6445 29.3101 12.6807 29.3463 12.7249 29.3463H15.0552C15.0994 29.3463 15.1356 29.3101 15.1356 29.2659V26.0516C15.1356 26.0074 15.0994 25.9713 15.0552 25.9713ZM12.7249 15.4445H13.4883V17.8552C13.4883 17.8994 13.5244 17.9355 13.5686 17.9355H14.3722C14.4164 17.9355 14.4526 17.8994 14.4526 17.8552V14.7213C14.4526 14.6329 14.3802 14.5605 14.2919 14.5605H12.7249C12.6807 14.5605 12.6445 14.5967 12.6445 14.6409V15.3641C12.6445 15.4083 12.6807 15.4445 12.7249 15.4445ZM15.0552 20.2659H12.7249C12.6807 20.2659 12.6445 20.3021 12.6445 20.3463V21.0695C12.6445 21.1137 12.6807 21.1498 12.7249 21.1498H14.099L12.6867 22.7108C12.6601 22.7407 12.6451 22.7792 12.6445 22.8193V23.5605C12.6445 23.6047 12.6807 23.6409 12.7249 23.6409H15.0552C15.0994 23.6409 15.1356 23.6047 15.1356 23.5605V22.8373C15.1356 22.7931 15.0994 22.757 15.0552 22.757H13.6811L15.0934 21.196C15.1201 21.1661 15.135 21.1276 15.1356 21.0876V20.3463C15.1356 20.3021 15.0994 20.2659 15.0552 20.2659Z" fill="#1E1E1E"/>
+</g>
+<rect x="0.285714" y="1.23786" width="41.4286" height="41.4286" rx="20.7143" stroke="#1E1E1E" stroke-width="0.571429"/>
+<defs>
+<clipPath id="clip0_6840_11837">
+<rect width="18" height="18" fill="white" transform="translate(12 12.9521)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/renderer/assets/images/pages/promo/cyber-month/smooth-3.svg b/src/renderer/assets/images/pages/promo/cyber-month/smooth-3.svg
new file mode 100644
index 00000000..617895eb
--- /dev/null
+++ b/src/renderer/assets/images/pages/promo/cyber-month/smooth-3.svg
@@ -0,0 +1,17 @@
+<svg width="42" height="45" viewBox="0 0 42 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6840_11844)">
+<rect width="18" height="18" transform="translate(12 14.0518)" fill="white" fill-opacity="0.01"/>
+<g clip-path="url(#clip1_6840_11844)">
+<path d="M26.5458 26.9453V16.6214C26.5458 16.4446 26.4011 16.3 26.2243 16.3H22.8092V14.9179C22.8092 14.7973 22.6685 14.729 22.5741 14.8034L20.0107 16.8284C19.9934 16.8418 19.9793 16.859 19.9697 16.8786C19.96 16.8983 19.955 16.9199 19.955 16.9419C19.955 16.9638 19.96 16.9854 19.9697 17.0051C19.9793 17.0248 19.9934 17.042 20.0107 17.0554L22.5721 19.0804C22.6665 19.1547 22.8071 19.0884 22.8071 18.9659V17.5857H25.0973V26.9453C24.2094 27.2467 23.5705 28.0884 23.5705 29.0768C23.5705 30.3183 24.579 31.3268 25.8205 31.3268C27.0621 31.3268 28.0705 30.3183 28.0705 29.0768C28.0725 28.0884 27.4337 27.2487 26.5458 26.9453ZM25.8225 30.0411C25.5702 30.0359 25.3299 29.9321 25.1533 29.7518C24.9767 29.5715 24.8777 29.3292 24.8777 29.0768C24.8777 28.8244 24.9767 28.5821 25.1533 28.4018C25.3299 28.2215 25.5702 28.1177 25.8225 28.1125C26.0749 28.1177 26.3151 28.2215 26.4918 28.4018C26.6684 28.5821 26.7673 28.8244 26.7673 29.0768C26.7673 29.3292 26.6684 29.5715 26.4918 29.7518C26.3151 29.9321 26.0749 30.0359 25.8225 30.0411ZM18.4297 17.0232C18.4297 15.7817 17.4212 14.7732 16.1797 14.7732C14.9382 14.7732 13.9297 15.7817 13.9297 17.0232C13.9297 18.0116 14.5685 18.8513 15.4565 19.1547V26.9473C14.5685 27.2487 13.9297 28.0904 13.9297 29.0788C13.9297 30.3203 14.9382 31.3288 16.1797 31.3288C17.4212 31.3288 18.4297 30.3203 18.4297 29.0788C18.4297 28.0904 17.7908 27.2507 16.9029 26.9473V19.1547C17.7908 18.8513 18.4297 18.0116 18.4297 17.0232ZM15.2154 17.0232C15.2206 16.7709 15.3244 16.5306 15.5047 16.354C15.685 16.1773 15.9273 16.0784 16.1797 16.0784C16.4321 16.0784 16.6744 16.1773 16.8547 16.354C17.035 16.5306 17.1388 16.7709 17.144 17.0232C17.1388 17.2756 17.035 17.5158 16.8547 17.6925C16.6744 17.8691 16.4321 17.968 16.1797 17.968C15.9273 17.968 15.685 17.8691 15.5047 17.6925C15.3244 17.5158 15.2206 17.2756 15.2154 17.0232ZM17.144 29.0768C17.1388 29.3291 17.035 29.5694 16.8547 29.746C16.6744 29.9227 16.4321 30.0216 16.1797 30.0216C15.9273 30.0216 15.685 29.9227 15.5047 29.746C15.3244 29.5694 15.2206 29.3291 15.2154 29.0768C15.2206 28.8245 15.3244 28.5842 15.5047 28.4076C15.685 28.2309 15.9273 28.132 16.1797 28.132C16.4321 28.132 16.6744 28.2309 16.8547 28.4076C17.035 28.5842 17.1388 28.8245 17.144 29.0768Z" fill="#1E1E1E"/>
+</g>
+</g>
+<rect x="0.285714" y="2.33747" width="41.4286" height="41.4286" rx="20.7143" stroke="#1E1E1E" stroke-width="0.571429"/>
+<defs>
+<clipPath id="clip0_6840_11844">
+<rect width="18" height="18" fill="white" transform="translate(12 14.0518)"/>
+</clipPath>
+<clipPath id="clip1_6840_11844">
+<rect width="18" height="18" fill="white" transform="translate(12 14.0518)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/renderer/assets/images/pages/promo/cyber-month/smooth-img.png b/src/renderer/assets/images/pages/promo/cyber-month/smooth-img.png
new file mode 100644
index 00000000..5532bb9c
Binary files /dev/null and b/src/renderer/assets/images/pages/promo/cyber-month/smooth-img.png differ
diff --git a/src/renderer/locales/en.js b/src/renderer/locales/en.js
index ca97559e..4f91512e 100644
--- a/src/renderer/locales/en.js
+++ b/src/renderer/locales/en.js
@@ -5793,6 +5793,23 @@ module.exports = {
           }
         ],
         btn: 'Get it now'
+      },
+      smooth_life: {
+        title: 'Smooth out your digital life',
+        items: [
+          {
+            title: 'Auto Device Sync',
+            desc: 'Seamlessly access your data across all devices with automatic synchronization.'
+          },
+          {
+            title: 'Effortless Management',
+            desc: 'Create, save, and autofill login details, addresses, credit cards, and more for a hassle-free digital life.'
+          },
+          {
+            title: 'Item Recovery',
+            desc: 'Easily restore recently deleted items or previous versions to keep your data intact and organized.'
+          }
+        ]
       }
     }
   },
diff --git a/src/renderer/nuxt.config.js b/src/renderer/nuxt.config.js
index b0e499a3..22575b1a 100644
--- a/src/renderer/nuxt.config.js
+++ b/src/renderer/nuxt.config.js
@@ -84,15 +84,11 @@ module.exports = {
     { ssr: true, src: '@/plugins/onpremise/mixins.js' },
 
     // UI
-    { ssr: false, src: '@/plugins/ui/circle-countdown-timer.js' },
-    { ssr: false, src: '@/plugins/ui/clipboard.js' },
+    { ssr: false, src: '@/plugins/ui/client-only.js' },
     { ssr: true, src: '@/plugins/ui/element.js' },
     { ssr: true, src: '@/plugins/ui/fontawesome.js' },
     { ssr: true, src: '@/plugins/ui/katex.js' },
-    { ssr: true, src: '@/plugins/ui/vee.js' },
-    { ssr: false, src: '@/plugins/ui/vue-virtual-scroller.js' },
-    { ssr: false, src: '@/plugins/ui/youtube.js' },
-    { ssr: false, src: '@/plugins/ui/vue-carousel.js' }
+    { ssr: true, src: '@/plugins/ui/vee.js' }
   ],
   buildModules: [
     '@nuxt/typescript-build',
diff --git a/src/renderer/pages/promo/cyber-month.vue b/src/renderer/pages/promo/cyber-month.vue
index 9fb516ad..c874b16c 100644
--- a/src/renderer/pages/promo/cyber-month.vue
+++ b/src/renderer/pages/promo/cyber-month.vue
@@ -4,11 +4,13 @@
     <div
       class="bg-black-300 flex flex-col md:flex-row justify-between items-center px-12 py-6"
     >
-      <img
-        src="~assets/images/logo/logo_black_with_text.svg"
-        alt="Locker Logo"
-        class="h-12 mb-4 md:mb-0"
-      >
+      <nuxt-link to="/">
+        <img
+          src="~assets/images/logo/logo_black_with_text.svg"
+          alt="Locker Logo"
+          class="h-12 mb-4 md:mb-0"
+        >
+      </nuxt-link>
       <div>
         <nuxt-link to="/lifetime" class="nav-btn">
           {{ $t('promo.cyber_month.nav.btn') }} <i class="el-icon-right" />
@@ -137,6 +139,7 @@
         <div
           v-for="(item, index) in $t('promo.cyber_month.security.items')"
           :key="index"
+          v-view="e => securityItemViewHandler(index, e)"
           class="py-12 flex border-[#BFBFBF]"
           :class="{ 'border-t': index > 0 }"
         >
@@ -148,9 +151,13 @@
             "
             :alt="item.title"
             class="h-11 w-11"
+            :class="{ 'green-svg': index + 1 === currentSecurityItem }"
           >
           <div class="ml-5">
-            <h3 class="font-semibold landing-font-24 mb-2">
+            <h3
+              class="font-semibold landing-font-24 mb-2"
+              :class="{ 'text-primary': index + 1 === currentSecurityItem }"
+            >
               {{ item.title }}
             </h3>
             <p class="landing-font-16">
@@ -161,15 +168,10 @@
       </div>
 
       <div class="hidden md:flex w-1/2 pl-[20%] py-20 flex-col">
-        <div
-          v-for="item in [1, 2, 3, 4]"
-          :key="item"
-          class="py-8 rounded-3xl illus-gradient-bg"
-          style="margin-bottom: 50vh"
-        >
+        <div class="py-8 rounded-3xl illus-gradient-bg sticky top-8">
           <img
             :src="
-              require(`~/assets/images/pages/promo/cyber-month/security-illus-${item}.png`)
+              require(`~/assets/images/pages/promo/cyber-month/security-illus-${currentSecurityItem}.png`)
             "
             class="w-full"
           >
@@ -186,6 +188,43 @@
     <!-- Security end -->
 
     <!-- Smooth life -->
+    <div class="flex flex-wrap px-12 py-[112px] items-center">
+      <div class="w-full md:w-1/2 md:order-2">
+        <h2 class="landing-font-38 font-semibold mb-4">
+          {{ $t('promo.cyber_month.smooth_life.title') }}
+        </h2>
+
+        <div
+          v-for="(item, index) in $t('promo.cyber_month.smooth_life.items')"
+          :key="index"
+          class="py-12 border-[#BFBFBF] flex"
+          :class="{ 'border-t': index > 0 }"
+        >
+          <img
+            :src="
+              require(`~/assets/images/pages/promo/cyber-month/smooth-${1}.svg`)
+            "
+            class="h-10 w-10 mr-5"
+          >
+          <div>
+            <h3 class="landing-font-24 font-semibold mb-2">
+              {{ item.title }}
+            </h3>
+            <p class="landing-font-16">
+              {{ item.desc }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="w-full md:order-1 md:w-1/2 md:pr-[10%] mt-8 md:mt-0">
+        <img
+          src="~/assets/images/pages/promo/cyber-month/smooth-img.png"
+          alt="Smooth digital life"
+          class="w-full"
+        >
+      </div>
+    </div>
     <!-- Smooth life end -->
 
     <!-- Team collab -->
@@ -212,7 +251,32 @@
 </template>
 <script>
 export default {
-  layout: 'authenticate'
+  layout: 'authenticate',
+  data () {
+    return {
+      visibleSecurityItems: []
+    }
+  },
+  computed: {
+    currentSecurityItem () {
+      if (!this.visibleSecurityItems.length) {
+        return 1
+      }
+      return Math.max(...this.visibleSecurityItems) + 1
+    }
+  },
+  methods: {
+    securityItemViewHandler (index, e) {
+      let data = [...this.visibleSecurityItems]
+      if (e.percentInView === 1 && !data.includes(index)) {
+        data.push(index)
+      }
+      if (e.percentInView < 0.7 && data.includes(index)) {
+        data = data.filter(i => i !== index)
+      }
+      this.visibleSecurityItems = data
+    }
+  }
 }
 </script>
 <style scoped>
@@ -237,4 +301,8 @@ export default {
 .illus-gradient-bg {
   background: linear-gradient(180deg, #5f9c64 0%, #24712a 100%), #f5f5f5;
 }
+.green-svg {
+  filter: invert(36%) sepia(100%) saturate(337%) hue-rotate(78deg)
+    brightness(94%) contrast(94%);
+}
 </style>
diff --git a/src/renderer/plugins/ui/circle-countdown-timer.js b/src/renderer/plugins/ui/circle-countdown-timer.js
deleted file mode 100644
index 49a2737c..00000000
--- a/src/renderer/plugins/ui/circle-countdown-timer.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Vue from 'vue'
-import CircularCountDownTimer from 'vue-circular-count-down-timer'
-
-Vue.use(CircularCountDownTimer)
diff --git a/src/renderer/plugins/ui/client-only.js b/src/renderer/plugins/ui/client-only.js
new file mode 100644
index 00000000..93a8e6f5
--- /dev/null
+++ b/src/renderer/plugins/ui/client-only.js
@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import CircularCountDownTimer from 'vue-circular-count-down-timer'
+import Clipboard from 'vue-clipboard2'
+import { RecycleScroller } from 'vue-virtual-scroller'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import VueYouTubeEmbed from 'vue-youtube-embed'
+import VueCarousel from 'vue-carousel'
+import checkView from 'vue-check-view'
+
+Vue.use(CircularCountDownTimer)
+Vue.use(Clipboard)
+Vue.component('RecycleScroller', RecycleScroller)
+Vue.use(VueYouTubeEmbed, { global: true })
+Vue.use(VueCarousel)
+Vue.use(checkView)
diff --git a/src/renderer/plugins/ui/clipboard.js b/src/renderer/plugins/ui/clipboard.js
deleted file mode 100644
index a6f3fdcf..00000000
--- a/src/renderer/plugins/ui/clipboard.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Vue from 'vue'
-import Clipboard from 'vue-clipboard2'
-
-Vue.use(Clipboard)
diff --git a/src/renderer/plugins/ui/vue-carousel.js b/src/renderer/plugins/ui/vue-carousel.js
deleted file mode 100644
index 37f4baf7..00000000
--- a/src/renderer/plugins/ui/vue-carousel.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Vue from 'vue'
-import VueCarousel from 'vue-carousel'
-Vue.use(VueCarousel)
diff --git a/src/renderer/plugins/ui/vue-virtual-scroller.js b/src/renderer/plugins/ui/vue-virtual-scroller.js
deleted file mode 100644
index 3370e764..00000000
--- a/src/renderer/plugins/ui/vue-virtual-scroller.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Vue from 'vue'
-import { RecycleScroller } from 'vue-virtual-scroller'
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
-
-Vue.component('RecycleScroller', RecycleScroller)
diff --git a/src/renderer/plugins/ui/youtube.js b/src/renderer/plugins/ui/youtube.js
deleted file mode 100644
index 814baae8..00000000
--- a/src/renderer/plugins/ui/youtube.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Vue from 'vue'
-
-import VueYouTubeEmbed from 'vue-youtube-embed'
-
-Vue.use(VueYouTubeEmbed)
-
-Vue.use(VueYouTubeEmbed, { global: true })
diff --git a/yarn.lock b/yarn.lock
index 36383f02..6ca2ba49 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13363,6 +13363,11 @@ vue-carousel@^0.18.0:
     regenerator-runtime "^0.12.1"
     vue "^2.5.17"
 
+vue-check-view@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/vue-check-view/-/vue-check-view-0.3.0.tgz#813509a73916dd99483eaa4b1b24ca189c50ca7b"
+  integrity sha512-2IR2m4MCgOG/9UQaIn7cvvqbDcvUmPavun8nBMieRxGbhqvlUorjLIwJqvuFXruBO73HXXbCcrVKxnGr4ub5ag==
+
 vue-circular-count-down-timer@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/vue-circular-count-down-timer/-/vue-circular-count-down-timer-2.0.0.tgz#11a28b4c0837df7d32bf9fc15c1c9cb6d707f547"