diff --git a/src/components/Title.jsx b/src/components/Title.jsx
index 931b969..113b37f 100644
--- a/src/components/Title.jsx
+++ b/src/components/Title.jsx
@@ -14,7 +14,7 @@ const Title = ({ text, food, color }) => {
     <div className="flex flex-row justify-center">
       <div className="inset-0 flex justify-center items-top p-3">
         <div
-          className={`text-shadow ${darkColor} font-omc text-5xl md:text-8xl mb-2 drop-shadow left-1 bottom-0.5 ${lightColor} text-center`}
+          className={`md:text-shadow text-shadow-sm  ${darkColor} font-omc text-5xl md:text-8xl mb-2 drop-shadow left-1 bottom-0.5 ${lightColor} text-center`}
         >
           {text}
         </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 682eb6c..d218995 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -51,7 +51,7 @@ module.exports = {
         blobs1: "url('/assets/blobs1.svg')",
       },
       textShadow: {
-        sm: "0 1px 2px var(--tw-shadow-color)",
+        sm: "-3px 3px 0px var(--tw-shadow-color)",
         DEFAULT: "-4px 4px 0px var(--tw-shadow-color)",
         lg: "0 8px 16px var(--tw-shadow-color)",
       },