diff --git a/assets/styles/layout/_code.scss b/assets/styles/layout/_code.scss
index 044ae0e4c..9ba17b8fd 100644
--- a/assets/styles/layout/_code.scss
+++ b/assets/styles/layout/_code.scss
@@ -147,6 +147,7 @@ pre[class*="language-"] {
 pre[class*="language-"] {    
     code {
         background: var(--demo-code-bg) !important;
+        transition: background-color .5s, border-color .5s;
     }
 }
 
diff --git a/assets/styles/layout/_content.scss b/assets/styles/layout/_content.scss
index d60687945..e355edda5 100644
--- a/assets/styles/layout/_content.scss
+++ b/assets/styles/layout/_content.scss
@@ -12,6 +12,7 @@
 .card {
     background: var(--surface-card);
     border: var(--card-border);
+    transition: background-color .5s, border-color .5s;
     padding: 2rem;
     border-radius: 10px;
     margin-bottom: 1rem;
diff --git a/assets/styles/layout/_core.scss b/assets/styles/layout/_core.scss
index 20663e670..7ef5f9ae2 100644
--- a/assets/styles/layout/_core.scss
+++ b/assets/styles/layout/_core.scss
@@ -12,6 +12,7 @@ body {
     color: var(--text-color);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    transition: background-color .5s;
 }
 
 a {
diff --git a/assets/styles/layout/landing/_main.scss b/assets/styles/layout/landing/_main.scss
index 83ddfc230..6fd02fb8b 100644
--- a/assets/styles/layout/landing/_main.scss
+++ b/assets/styles/layout/landing/_main.scss
@@ -1,5 +1,6 @@
 .landing {
     background-color: var(--home-bg);
+    transition: background-color .5s;
     scroll-behavior: smooth;
     padding-top: 4rem;
 
@@ -7,6 +8,7 @@
         border: 1px solid var(--home-border-color);
         border-radius: 10px;
         background-color: var(--home-box-bg);
+        transition: background-color .5s, border-color .5s;
     }
 
     .linkbox {