diff --git a/apps/docs/utils/consent/consent.css b/apps/docs/utils/consent/consent.css
index 95638188a5..bddaebb883 100644
--- a/apps/docs/utils/consent/consent.css
+++ b/apps/docs/utils/consent/consent.css
@@ -13,34 +13,31 @@
   bottom: var(--gds-space-l);
   padding: var(--gds-space-xl);
   inset: 35% 8px auto;
-
 }
 
-.show--consent .cm-wrapper {
+.cm-wrapper {
   position: fixed;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 9999; /* Ensure it's above other elements */
   inset: 0;
-  /* @starting-style {
-    background-color: ;
-  } */
+  opacity: 1;
+  visibility: visible;
 }
 
 .cm__btn-group {
   flex-direction: column;
   gap: var(--gds-space-m);
   display: flex;
-
 }
 
-#cc-main .cm__title {
+.cm__title {
   color: var(--gds-color-l2-content-secondary);
   font-size: 1.25rem;
   font-weight: 450;
   margin: 0;
 }
 
-#cc-main .cm__desc {
+.cm__desc {
   color: var(--gds-color-l2-content-secondary);
   font-size: 1rem;
   line-height: 1.5;
@@ -49,11 +46,7 @@
   margin-bottom: var(--gds-space-l);
 }
 
-#cm__desc {
-  margin: 0;
-}
-
-#cc-main .cm__btn {
+.cm__btn {
   background-color: var(--gds-color-l3-background-primary);
   border-radius: var(--gds-space-max);
   color: var(--gds-color-l3-content-primary);
@@ -64,35 +57,89 @@
   margin-top: 0;
   font-weight: 450;
   font-size: var(--gds-text-size-detail-m);
-  
 }
 
-#cc-main .cm__btn:hover {
-  background-color: color-mix(in srgb, var(--gds-color-l3-background-primary), var(--gds-color-l3-states-dark-hover));
+.cm__btn:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--gds-color-l3-background-primary),
+    var(--gds-color-l3-states-dark-hover)
+  );
 }
 
 /* When aria-hidden="true" is set, hide the entire modal and the buttons */
-.cm[aria-hidden="true"] {
-  display: none; /* Hides the modal visually */
+.cm[aria-hidden='true'] {
+  visibility: hidden;
+}
+
+.cm[aria-hidden='true'] .cm__btns {
+  pointer-events: none;
+}
+
+/* ============ ADDED LINES FOR FADE ============ */
+
+/* Default state for backdrop */
+.cm-wrapper {
+  --duration: 0.3s;
+
+  transition:
+    opacity var(--duration) ease,
+    visibility var(--duration) ease;
+  visibility: hidden;
+  opacity: 0;
+}
+
+/* Visible state for backdrop */
+.show--consent .cm-wrapper {
+  opacity: 1;
+  visibility: visible;
+
+  @starting-style {
+    opacity: 0;
+  }
+}
+
+/* Default state for modal */
+.cm {
+  transition:
+    translate var(--duration) ease,
+    opacity var(--duration) ease,
+    visibility var(--duration) ease;
+
+  opacity: 0;
+  visibility: hidden;
+  translate: 0 -40px;
+}
+
+/* Visible state for modal */
+.show--consent .cm {
+  opacity: 1;
+  visibility: visible;
+  translate: 0 0;
+
+  @starting-style {
+    translate: 0 -40px;
+    opacity: 0;
+  }
 }
 
-.cm[aria-hidden="true"] .cm__btns {
-  display: none; /* Hides the buttons */
+@media (prefers-reduced-motion) {
+  .cm-wrapper {
+    --duration: 0s;
+  }
 }
 
 @media screen and (min-width: 640px) {
-  #cc-main .cm {
+  .cm {
     max-width: 500px;
     border-radius: var(--gds-space-s);
     inset: 0;
     margin: auto;
     max-height: fit-content;
-
   }
 
-  #cc-main .cm__btn-group {
+  .cm__btn-group {
     justify-content: flex-start;
     flex-direction: row;
-
   }
-}
\ No newline at end of file
+}