diff --git a/apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css b/apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css
index 8edfa1fb194b1..eca19df43f8ef 100644
--- a/apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css
+++ b/apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css
@@ -12,14 +12,15 @@
   }
 
   a {
-    @apply flex-shrink
-      flex-grow;
+    @apply shrink
+      grow;
   }
 
   &,
   > a,
   > a:hover {
     @apply text-neutral-800
+      motion-safe:transition-colors
       dark:text-neutral-200;
   }
 
@@ -30,8 +31,8 @@
   .separator {
     @apply size-4
       max-w-fit
-      flex-shrink-0
-      flex-grow
+      shrink-0
+      grow
       text-neutral-600
       dark:text-neutral-400;
   }
diff --git a/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css b/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
index b23a220ff8147..ea0d6b9db96b5 100644
--- a/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
+++ b/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
@@ -1,5 +1,5 @@
 .link {
-  @apply max-w-fit 
+  @apply max-w-fit
     truncate;
 
   &.active {
@@ -9,6 +9,7 @@
       py-1
       font-semibold
       text-white
+      motion-safe:transition-colors
       dark:text-white;
 
     &:hover {
diff --git a/apps/site/components/Common/Button/index.module.css b/apps/site/components/Common/Button/index.module.css
index 1c12b1040b718..9bd34cb96ae97 100644
--- a/apps/site/components/Common/Button/index.module.css
+++ b/apps/site/components/Common/Button/index.module.css
@@ -6,7 +6,8 @@
     gap-2
     py-2.5
     text-center
-    font-semibold;
+    font-semibold
+    motion-safe:transition-colors;
 
   svg {
     @apply size-5;
diff --git a/apps/site/components/Common/CodeTabs/index.module.css b/apps/site/components/Common/CodeTabs/index.module.css
index e6e0110ad45d1..5c79f7ecd4fd4 100644
--- a/apps/site/components/Common/CodeTabs/index.module.css
+++ b/apps/site/components/Common/CodeTabs/index.module.css
@@ -32,6 +32,7 @@
         gap-2
         text-center
         text-neutral-200
+        motion-safe:transition-colors
         lg:flex;
 
       & > .icon {
diff --git a/apps/site/components/Common/LanguageDropDown/index.module.css b/apps/site/components/Common/LanguageDropDown/index.module.css
index 50b8e6b5fb5ed..7f1a0d1052106 100644
--- a/apps/site/components/Common/LanguageDropDown/index.module.css
+++ b/apps/site/components/Common/LanguageDropDown/index.module.css
@@ -4,6 +4,7 @@
     rounded-md
     p-2
     text-neutral-700
+    motion-safe:transition-colors
     dark:text-neutral-300;
 
   &:hover {
diff --git a/apps/site/components/Common/Pagination/PaginationListItem/index.module.css b/apps/site/components/Common/Pagination/PaginationListItem/index.module.css
index bcc57af3fe933..ca629ffce0a31 100644
--- a/apps/site/components/Common/Pagination/PaginationListItem/index.module.css
+++ b/apps/site/components/Common/Pagination/PaginationListItem/index.module.css
@@ -11,6 +11,7 @@
     px-3
     py-2.5
     text-neutral-800
+    motion-safe:transition-colors
     dark:text-neutral-200;
 
   &:hover {
diff --git a/apps/site/components/Common/ProgressionSidebar/ProgressionSidebarItem/index.module.css b/apps/site/components/Common/ProgressionSidebar/ProgressionSidebarItem/index.module.css
index 60342f4abb796..1783a37464340 100644
--- a/apps/site/components/Common/ProgressionSidebar/ProgressionSidebarItem/index.module.css
+++ b/apps/site/components/Common/ProgressionSidebar/ProgressionSidebarItem/index.module.css
@@ -13,11 +13,12 @@ a.item {
 
   &:hover {
     @apply text-neutral-900
+      motion-safe:transition-colors
       dark:text-white;
   }
 
   svg {
-    @apply flex-shrink-0
+    @apply shrink-0
       fill-neutral-200
       stroke-white
       stroke-[4]
diff --git a/apps/site/components/Common/ThemeToggle/index.module.css b/apps/site/components/Common/ThemeToggle/index.module.css
index 3daab7785cfb3..c2cd6bb230a91 100644
--- a/apps/site/components/Common/ThemeToggle/index.module.css
+++ b/apps/site/components/Common/ThemeToggle/index.module.css
@@ -3,6 +3,7 @@
     rounded-md
     p-2
     text-neutral-700
+    motion-safe:transition-colors
     dark:text-neutral-300;
 
   &:hover {
diff --git a/apps/site/components/Containers/NavBar/NavItem/index.module.css b/apps/site/components/Containers/NavBar/NavItem/index.module.css
index b639699d08463..17ccfee6aab58 100644
--- a/apps/site/components/Containers/NavBar/NavItem/index.module.css
+++ b/apps/site/components/Containers/NavBar/NavItem/index.module.css
@@ -4,7 +4,8 @@
     gap-2
     rounded
     px-3
-    py-2;
+    py-2
+    motion-safe:transition-colors;
 
   .label {
     @apply text-base
diff --git a/apps/site/styles/base.css b/apps/site/styles/base.css
index a894edaa37811..ebab370edd929 100644
--- a/apps/site/styles/base.css
+++ b/apps/site/styles/base.css
@@ -1,6 +1,5 @@
 * {
-  @apply subpixel-antialiased
-    motion-safe:transition-colors;
+  @apply subpixel-antialiased;
 }
 
 html,
diff --git a/apps/site/tailwind.config.ts b/apps/site/tailwind.config.ts
index 4ea21ba1b8050..b2aa693bad259 100644
--- a/apps/site/tailwind.config.ts
+++ b/apps/site/tailwind.config.ts
@@ -153,7 +153,7 @@ export default {
       },
     },
   },
-  darkMode: ['class', '[data-theme="dark"]'],
+  darkMode: ['selector', '[data-theme="dark"]'],
   plugins: [
     require('@savvywombat/tailwindcss-grid-areas'),
     require('@tailwindcss/container-queries'),