diff --git a/assets/css/variables/_theme-colors.css b/assets/css/variables/_theme-colors.css
index a0ef64f..e5c4d48 100644
--- a/assets/css/variables/_theme-colors.css
+++ b/assets/css/variables/_theme-colors.css
@@ -98,7 +98,7 @@
   --color-white: #fff;
   --color-text: #383838;
   --color-disabled: var(--color-gray-6);
-  --color-base-divider: #979797;
+  --color-base-divider: #D1CFCD;
 
   /* Layout colors */
   --site-background-color: var(--color-white);
diff --git a/components/blocks/DividerBlock.vue b/components/blocks/DividerBlock.vue
index af77f8f..c368682 100644
--- a/components/blocks/DividerBlock.vue
+++ b/components/blocks/DividerBlock.vue
@@ -1,17 +1,22 @@
-<template>
-  <div class="divider"></div>
-</template>
-
 <script setup>
 const props = defineProps({
   blockData: Object,
 });
 </script>
 
+<template>
+  <div class="divider"></div>
+</template>
+
 <style lang="postcss" scoped>
 .divider {
   margin: 28px 0;
-  border-top: 1px solid var(--color-base-divider);
-  opacity: 0.3;
+  border-top: 1px solid var(--color-primary);
+
+  /* There are 2 dividers in the design but in the AC its not mentioned which should be used
+  var for grey one - --color-base-divider
+  when/if grey is used add this opacity too: opacity: 0.4;
+  var for primary one - --color-primary
+   */
 }
 </style>
diff --git a/components/blocks/SpacerBlock.vue b/components/blocks/SpacerBlock.vue
index 24e0b4f..be6f1b8 100644
--- a/components/blocks/SpacerBlock.vue
+++ b/components/blocks/SpacerBlock.vue
@@ -21,15 +21,15 @@ const props = defineProps({
   padding: 0;
 
   &--small {
-    height: 1.875rem;
+    height: 15px @(--sm) 30px;
   }
 
   &--medium {
-    height: 3.125rem;
+    height: 25px @(--sm) 50px;
   }
 
   &--large {
-    height: 4.375rem;
+    height: 48px @(--sm) 96px;
   }
 }
 </style>