diff --git a/components/ThemeManager.vue b/components/ThemeManager.vue
index 8eb2b7b..a892265 100644
--- a/components/ThemeManager.vue
+++ b/components/ThemeManager.vue
@@ -74,9 +74,7 @@ const THEME_OPTIONS = [
 </script>
 
 <style scoped lang="scss">
-// Performance variables - computed once, reused everywhere
-$transition-standard: 0.3s ease;
-$transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+$trans: 0.3s ease;
 $border-accent: 1px solid hsla(var(--accent-hsl) / 0.2);
 $blur-backdrop: blur(1rem);
 
@@ -99,7 +97,7 @@ $blur-backdrop: blur(1rem);
 		background-image: var(--c-bg-gradient);
 		backdrop-filter: $blur-backdrop;
 		cursor: pointer;
-		transition: transform $transition-standard, background $transition-standard, color $transition-standard;
+		transition: transform $trans, background $trans, color $trans;
 		width: var(--roller-size);
 		height: var(--roller-size);
 
@@ -128,7 +126,7 @@ $blur-backdrop: blur(1rem);
 		opacity: 0;
 		pointer-events: none;
 		clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0);
-		transition: opacity $transition-standard, clip-path $transition-standard;
+		transition: opacity $trans, clip-path $trans;
 
 		button {
 			position: relative;
@@ -141,7 +139,7 @@ $blur-backdrop: blur(1rem);
 			border-radius: 50vw;
 			cursor: pointer;
 			transform: scale(0);
-			transition: transform $transition-bounce, color $transition-standard;
+			transition: transform 0.3s $easeInOutBack, color $trans;
 
 			// Tooltip optimization
 			&::after {
@@ -159,7 +157,7 @@ $blur-backdrop: blur(1rem);
 				border-radius: 50vw;
 				opacity: 0;
 				transform: translate(-50%, 0%) scale(0);
-				transition: opacity $transition-standard, transform $transition-standard;
+				transition: opacity $trans, transform $trans;
 				z-index: 2;
 				pointer-events: none;
 			}
@@ -192,18 +190,4 @@ $blur-backdrop: blur(1rem);
 		}
 	}
 }
-
-// Transition component optimization
-.slideX {
-	&-enter-active,
-	&-leave-active {
-		transition: transform $transition-standard, opacity $transition-standard;
-	}
-
-	&-enter-from,
-	&-leave-to {
-		transform: translateX(100%);
-		opacity: 0;
-	}
-}
 </style>
diff --git a/entrypoints/content.js b/entrypoints/content.js
index 9d015c8..6d6966b 100644
--- a/entrypoints/content.js
+++ b/entrypoints/content.js
@@ -1,11 +1,12 @@
 // import '@/styles/index.scss'
+import '../styles/index.scss'
 import { createApp } from 'vue'
+
 import ThemeManager from '@/components/ThemeManager.vue'
 import { useThemeManager } from '@/composables/useThemeManager'
 
 export default defineContentScript({
 	matches: ['*://chat.deepseek.com/*'],
-	css: ['src/styles/index.scss'], // 👈 Use the same index.scss for content scripts
 
 	async main(ctx) {
 		// Force theme initialization before the UI mounts.
diff --git a/styles/shared/_anims.scss b/styles/abstract/_anims.scss
similarity index 90%
rename from styles/shared/_anims.scss
rename to styles/abstract/_anims.scss
index 2443968..873f929 100644
--- a/styles/shared/_anims.scss
+++ b/styles/abstract/_anims.scss
@@ -27,10 +27,10 @@ $animations: (
         "to": (opacity: 1)),
     fadeOut: ("from": (opacity: 1),
         "to": (opacity: 0)),
-    slideInLeft: ("from": (transform: translateX(-100%)),
-        "to": (transform: translateX(0))),
     slideInRight: ("from": (transform: translateX(100%)),
         "to": (transform: translateX(0))),
+    /*  slideInLeft: ("from": (transform: translateX(-100%)),
+        "to": (transform: translateX(0))),
     slideInTop: ("from": (transform: translateY(-100%)),
         "to": (transform: translateY(0))),
     slideInBottom: ("from": (transform: translateY(100%)),
@@ -86,7 +86,7 @@ $animations: (
     rollIn: ("from": (opacity: 0, transform: translate3d(-100%, 0, 0) rotate(-120deg)),
         "to": (opacity: 1, transform: translate3d(0, 0, 0))),
     rollOut: ("from": (opacity: 1),
-        "to": (opacity: 0, transform: translate3d(100%, 0, 0) rotate(120deg)))
+        "to": (opacity: 0, transform: translate3d(100%, 0, 0) rotate(120deg))) */
 );
 
 // Loop Through Animations and Generate Classes
@@ -109,23 +109,29 @@ $animations: (
 
 
 /* VUE ANIMS */
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.2s ease;
-}
+.fade {
 
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
-}
+    &-enter-active,
+    &-leave-active {
+        transition: opacity 0.2s ease;
+    }
 
-.slideX-enter-active,
-.slideX-leave-active {
-    transition: translate 0.2s ease-in-out, opacity 0.2s ease;
+    &-enter-from,
+    &-leave-to {
+        opacity: 0;
+    }
 }
 
-.slideX-enter-from,
-.slideX-leave-to {
-    translate: 5rem 0;
-    opacity: 0;
+.slideX {
+
+    &-enter-active,
+    &-leave-active {
+        transition: transform 0.3s ease, opacity 0.3s ease;
+    }
+
+    &-enter-from,
+    &-leave-to {
+        transform: translateX(100%);
+        opacity: 0;
+    }
 }
\ No newline at end of file
diff --git a/styles/shared/_easing.scss b/styles/abstract/_easing.scss
similarity index 93%
rename from styles/shared/_easing.scss
rename to styles/abstract/_easing.scss
index 3cf9226..bc72639 100644
--- a/styles/shared/_easing.scss
+++ b/styles/abstract/_easing.scss
@@ -36,4 +36,8 @@ $easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86);
 /* Back */
 $easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
 $easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
\ No newline at end of file
+$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+
+/* TRANSITIONS */
+$trans: 0.25s ease;
\ No newline at end of file
diff --git a/styles/abstract/_extends.scss b/styles/abstract/_extends.scss
index ed53213..6d43882 100644
--- a/styles/abstract/_extends.scss
+++ b/styles/abstract/_extends.scss
@@ -49,4 +49,66 @@
 	line-height: 1 !important;
 	padding: 0.32rem 0.6rem !important;
 	backdrop-filter: blur(5px);
-}
\ No newline at end of file
+}
+
+%link_default {
+	position: relative;
+	text-decoration: none;
+	color: var(--c-accent) !important;
+	// display: inline-block;
+	transition: opacity 0.3s ease;
+
+	/* Style for the ::after pseudo-element (initially hidden) */
+	&::after {
+		content: '';
+		position: absolute;
+		width: 100%;
+		height: 1.5px;
+		bottom: -4px;
+		left: 0;
+		// right: 0; /* Set right to cover the entire link */
+		background-color: currentColor;
+		border-radius: 20px;
+		transition: transform 0.3s $easeOutCubic;
+	}
+}
+
+%link_hover_underlined {
+	@extend %link_default;
+
+	/* Style for the ::after pseudo-element (initially hidden) */
+	&::after {
+		transform: scaleX(1);
+		transform-origin: bottom left;
+	}
+
+	&:hover::after {
+		transform: scaleX(0);
+		transform-origin: bottom right;
+	}
+}
+
+%link_hover_underless {
+	@extend %link_default;
+
+	&::after {
+		transform: scaleX(0);
+		transform-origin: bottom right;
+	}
+
+	&:hover::after {
+		transform: scaleX(1);
+		transform-origin: bottom left;
+	}
+}
+
+// %center_grid {
+// 	display: grid;
+// 	place-items: center;
+// }
+
+// %center_flex {
+// 	display: flex;
+// 	justify-content: center;
+// 	align-items: center;
+// }
\ No newline at end of file
diff --git a/styles/abstract/_index.scss b/styles/abstract/_index.scss
new file mode 100644
index 0000000..44b76d1
--- /dev/null
+++ b/styles/abstract/_index.scss
@@ -0,0 +1,9 @@
+@import 'abstract/_bp';
+@import 'abstract/_ds';
+@import 'abstract/_root';
+@import 'abstract/_light';
+@import 'abstract/_dark';
+@import 'abstract/_easing';
+@import 'abstract/_anims';
+@import 'abstract/_extends';
+@import 'abstract/_mixins';
\ No newline at end of file
diff --git a/styles/index.scss b/styles/index.scss
index aea62f6..6868613 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -1,14 +1,12 @@
-@import 'abstract/_bp';
-@import 'abstract/_ds';
-@import 'abstract/_root';
-// @import 'abstract/_vars';
-@import 'abstract/_light';
-@import 'abstract/_dark';
-@import 'shared/_easing';
-@import 'shared/_anims';
-@import 'shared/_extends';
-@import 'abstract/_extends';
-@import 'abstract/_mixins';
+// @import 'abstract/_bp';
+// @import 'abstract/_ds';
+// @import 'abstract/_root';
+// @import 'abstract/_light';
+// @import 'abstract/_dark';
+// @import 'abstract/_easing';
+// @import 'abstract/_anims';
+// @import 'abstract/_extends';
+// @import 'abstract/_mixins';
 
 // @import 'dev/_mixins';
 
@@ -36,9 +34,4 @@
 @import 'elements/_right--sticky';
 @import 'elements/_right--textarea';
 
-@import 'deepstyled/index';
-
-/* DS */
-@import 'abstract/_light.scss';
-@import 'abstract/_dark.scss';
-@import 'abstract/_ds.scss';
\ No newline at end of file
+@import 'deepstyled/index';
\ No newline at end of file
diff --git a/styles/shared.scss b/styles/shared.scss
new file mode 100644
index 0000000..7897eeb
--- /dev/null
+++ b/styles/shared.scss
@@ -0,0 +1,11 @@
+@import 'abstract/_bp';
+@import 'abstract/_ds';
+@import 'abstract/_root';
+@import 'abstract/_light';
+@import 'abstract/_dark';
+@import 'abstract/_easing';
+@import 'abstract/_anims';
+@import 'abstract/_extends';
+@import 'abstract/_mixins';
+
+@import 'dev/_mixins';
\ No newline at end of file
diff --git a/styles/shared/_extends.scss b/styles/shared/_extends.scss
deleted file mode 100644
index b3c22a1..0000000
--- a/styles/shared/_extends.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-%link_default {
-    position: relative;
-    text-decoration: none;
-    color: var(--c-accent) !important;
-    // display: inline-block;
-    transition: opacity 0.3s ease;
-
-    /* Style for the ::after pseudo-element (initially hidden) */
-    &::after {
-        content: '';
-        position: absolute;
-        width: 100%;
-        height: 1.5px;
-        bottom: -4px;
-        left: 0;
-        // right: 0; /* Set right to cover the entire link */
-        background-color: currentColor;
-        border-radius: 20px;
-        transition: transform 0.3s $easeOutCubic;
-    }
-}
-
-%link_hover_underlined {
-    @extend %link_default;
-
-    /* Style for the ::after pseudo-element (initially hidden) */
-    &::after {
-        transform: scaleX(1);
-        transform-origin: bottom left;
-    }
-
-    &:hover::after {
-        transform: scaleX(0);
-        transform-origin: bottom right;
-    }
-}
-
-%link_hover_underless {
-    @extend %link_default;
-
-    &::after {
-        transform: scaleX(0);
-        transform-origin: bottom right;
-    }
-
-    &:hover::after {
-        transform: scaleX(1);
-        transform-origin: bottom left;
-    }
-}
-
-%center_grid {
-    display: grid;
-    place-items: center;
-}
-
-%center_flex {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
\ No newline at end of file
diff --git a/wxt.config.js b/wxt.config.js
index 4675103..d96fb01 100644
--- a/wxt.config.js
+++ b/wxt.config.js
@@ -16,7 +16,7 @@ export default defineConfig({
 					api: 'modern-compiler',
 					quietDeps: true,
 					silenceDeprecations: ['import'],
-					additionalData: `@import "@/styles/index.scss";`, // 👈 Auto-import SCSS
+					additionalData: `@import "@/styles/shared.scss";`, // 👈 Auto-import SCSS
 				},
 			},
 		},