diff --git a/apps/formbricks-com/components/customeStyles/BestPracticeNavigation.module.css b/apps/formbricks-com/components/customeStyles/BestPracticeNavigation.module.css
new file mode 100644
index 0000000000..1c31b95843
--- /dev/null
+++ b/apps/formbricks-com/components/customeStyles/BestPracticeNavigation.module.css
@@ -0,0 +1,14 @@
+@media screen and (max-width:960px) and (min-width:831px){
+    .category{
+        font-size: 12px;
+    }
+}
+@media screen and (max-width:830px) and (min-width:640px) {
+    .heroCard{
+        padding: 1rem;
+    }
+    .category{
+        font-size: 10px;
+        right: 10px;
+    }
+}
\ No newline at end of file
diff --git a/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx b/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx
index 054cbebdbd..47c7251288 100644
--- a/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx
+++ b/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx
@@ -11,6 +11,9 @@ import {
 import clsx from "clsx";
 import Link from "next/link";
 
+// Importing custom CSS file for BestPracticeNavigation.tsx File.
+import style from "../customeStyles/BestPracticeNavigation.module.css";
+
 export default function BestPracticeNavigation() {
   const BestPractices = [
     {
@@ -81,14 +84,15 @@ export default function BestPracticeNavigation() {
   ];
 
   return (
-    <div className=" mx-auto grid grid-cols-1 gap-6 px-2 sm:grid-cols-3">
+    <div className="mx-auto grid grid-cols-1 gap-6 px-2 sm:grid-cols-3">
       {BestPractices.map((bestPractice) => (
         <Link href={bestPractice.href} key={bestPractice.name}>
-          <div className="drop-shadow-card duration-120 hover:border-brand-dark relative rounded-lg border border-slate-100 bg-slate-100 p-8 transition-all ease-in-out hover:scale-105 hover:cursor-pointer dark:bg-slate-800">
+          <div
+            className={`drop-shadow-card duration-120 hover:border-brand-dark relative rounded-lg border border-slate-100 bg-slate-100 p-8 transition-all ease-in-out hover:scale-105 hover:cursor-pointer dark:bg-slate-800 ${style.heroCard}`}>
             <div
               className={clsx(
                 // base styles independent what type of button it is
-                "absolute right-10 rounded-full px-3 py-1",
+                `absolute right-10 rounded-full px-3 py-1 ${style.category}`,
                 // different styles depending on type
                 bestPractice.category === "Boost Retention" &&
                   "bg-pink-100 text-pink-500 dark:bg-pink-800 dark:text-pink-200",