diff --git a/src/styles/main.css b/src/styles/main.css
index ba38a1d..0d32c31 100755
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -7,6 +7,7 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @import "./safe.css";
+@import "./utilities.css";
 
 @layer base {
   @import "./base.css";
@@ -18,7 +19,3 @@
   @import "./buttons.css";
   @import "./search.css";
 }
-
-@layer utilities {
-  @import "./utilities.css";
-}
diff --git a/src/styles/navigation.css b/src/styles/navigation.css
index 7061bbd..839f3b6 100755
--- a/src/styles/navigation.css
+++ b/src/styles/navigation.css
@@ -35,7 +35,7 @@
 }
 
 .nav-dropdown-list {
-  @apply bg-body dark:bg-darkmode-body z-10 min-w-[180px] rounded p-4 shadow hidden lg:invisible lg:absolute lg:block lg:opacity-0;
+  @apply bg-body dark:bg-darkmode-body z-10 min-w-[180px] rounded p-4 shadow-sm hidden lg:invisible lg:absolute lg:block lg:opacity-0;
 }
 
 .nav-dropdown-item {
diff --git a/src/styles/safe.css b/src/styles/safe.css
index dd54851..1f57516 100644
--- a/src/styles/safe.css
+++ b/src/styles/safe.css
@@ -1,3 +1,25 @@
+/* navbar toggler */
+input#nav-toggle:checked + label #show-button {
+  @apply hidden;
+}
+
+input#nav-toggle:checked + label #hide-button {
+  @apply block;
+}
+
+input#nav-toggle:checked ~ #nav-menu {
+  @apply block;
+}
+
+/* form style */
+.form-input {
+  @apply w-full rounded border-transparent bg-light px-6 py-4 text-text-dark placeholder:text-text-light focus:border-primary dark:focus:border-darkmode-primary focus:ring-transparent dark:border-darkmode-border dark:bg-darkmode-light dark:text-darkmode-text-light;
+}
+
+.form-label {
+  @apply mb-4 block font-secondary text-xl font-normal text-text-dark dark:text-darkmode-text-light;
+}
+
 /* swiper pagination */
 .testimonial-slider-pagination {
   .swiper-pagination-bullet {
diff --git a/src/styles/utilities.css b/src/styles/utilities.css
index eb4664a..ff16f3b 100755
--- a/src/styles/utilities.css
+++ b/src/styles/utilities.css
@@ -1,29 +1,3 @@
-/* navbar toggler */
-input#nav-toggle:checked + label #show-button {
-  @apply hidden;
-}
-
-input#nav-toggle:checked + label #hide-button {
-  @apply block;
-}
-
-input#nav-toggle:checked ~ #nav-menu {
-  @apply block;
-}
-
-.bg-gradient {
+@utility bg-gradient {
   @apply bg-linear-to-b from-[rgba(249,249,249,1)] from-[0.53%] to-white to-[83.28%] dark:from-darkmode-light dark:to-darkmode-body;
 }
-
-.shadow {
-  @apply shadow-[0px_4px_40px_rgba(0,0,0,0.05)];
-}
-
-/* form style */
-.form-input {
-  @apply w-full rounded border-transparent bg-light px-6 py-4 text-text-dark placeholder:text-text-light focus:border-primary dark:focus:border-darkmode-primary focus:ring-transparent dark:border-darkmode-border dark:bg-darkmode-light dark:text-darkmode-text-light;
-}
-
-.form-label {
-  @apply mb-4 block font-secondary text-xl font-normal text-text-dark dark:text-darkmode-text-light;
-}
diff --git a/src/tailwind-plugin/tw-theme.js b/src/tailwind-plugin/tw-theme.js
index 751b8fa..d0da403 100644
--- a/src/tailwind-plugin/tw-theme.js
+++ b/src/tailwind-plugin/tw-theme.js
@@ -85,9 +85,26 @@ module.exports = plugin.withOptions(() => {
         colorUtils[`.text-${prefix}${cls}`] = { color: varRef };
         colorUtils[`.border-${prefix}${cls}`] = { borderColor: varRef };
         colorUtils[`.fill-${prefix}${cls}`] = { fill: varRef };
-        colorUtils[`.from-${prefix}${cls}`] = { "--tw-gradient-from": varRef };
-        colorUtils[`.to-${prefix}${cls}`] = { "--tw-gradient-to": varRef };
-        colorUtils[`.via-${prefix}${cls}`] = { "--tw-gradient-stops": varRef };
+        colorUtils[`.stroke-${prefix}${cls}`] = { stroke: varRef };
+        colorUtils[`.from-${prefix}${cls}`] = {
+          "--tw-gradient-from": varRef,
+          "--tw-gradient-via-stops":
+            "var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))",
+          "--tw-gradient-stops":
+            "var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))",
+        };
+        colorUtils[`.to-${prefix}${cls}`] = {
+          "--tw-gradient-to": varRef,
+          "--tw-gradient-via-stops":
+            "var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))",
+          "--tw-gradient-stops":
+            "var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))",
+        };
+        colorUtils[`.via-${prefix}${cls}`] = {
+          "--tw-gradient-via": varRef,
+          "--tw-gradient-via-stops":
+            "var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position)",
+        };
       });
     });