diff --git a/package-lock.json b/package-lock.json
index 48963f0..91fc14b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,8 @@
         "@tremor/react": "^3.13.4",
         "next": "14.1.0",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "react-rough-notation": "^1.0.5"
       },
       "devDependencies": {
         "@tailwindcss/forms": "^0.5.7",
@@ -1747,6 +1748,18 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "node_modules/react-rough-notation": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/react-rough-notation/-/react-rough-notation-1.0.5.tgz",
+      "integrity": "sha512-TTDnw1Qn96PwitGsBsjNh4911+o26Vivj/dhHbsHHhN6lDgkQsFhv1X/eOnCjHA2EOyDE5JBQ1HEZ1yW8sCmKA==",
+      "dependencies": {
+        "rough-notation": "^0.5.1"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
     "node_modules/react-smooth": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.5.tgz",
@@ -1865,6 +1878,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rough-notation": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/rough-notation/-/rough-notation-0.5.1.tgz",
+      "integrity": "sha512-ITHofTzm13cWFVfoGsh/4c/k2Mg8geKgBCwex71UZLnNuw403tCRjYPQ68jSAd37DMbZIePXPjDgY0XdZi9HPw=="
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
diff --git a/package.json b/package.json
index b78f912..d311644 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
     "@tremor/react": "^3.13.4",
     "next": "14.1.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-rough-notation": "^1.0.5"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",
diff --git a/src/Components/FollowerAnalysis/FollowerProgress.tsx b/src/Components/FollowerAnalysis/FollowerProgress.tsx
index 9f78e97..8f63eaf 100644
--- a/src/Components/FollowerAnalysis/FollowerProgress.tsx
+++ b/src/Components/FollowerAnalysis/FollowerProgress.tsx
@@ -1,45 +1,66 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   Card,
   Flex,
   ProgressCircle,
   BadgeDelta,
 } from "@tremor/react";
-import {FollowerAnalysis} from "@/Interface/api.interface";
+import { RoughNotation } from "react-rough-notation";
+import { FollowerAnalysis } from "@/Interface/api.interface";
 
 const FollowerProgress: React.FC<FollowerAnalysis> = ({
   followerCount,
   increaseOrDecrease,
 }) => {
-  console.log(followerCount);
+  const [show, setShow] = useState(true); 
+
+
+
   return (
-    <Card className="followerCard drop-shadow-2xl" style={{ backgroundColor: "#FF1E56" }}>
-      <h2 className="followerCardTitle font-mono">Followers</h2>
-      <Flex>
-        <ProgressCircle
-          className="followerProgressCircle"
-          value={followerCount}
-          radius={40}
-          strokeWidth={10}
-          tooltip="Followers"
-          color={"green"}
-        > <span className="text-md text-gray-700 font-large ">{followerCount}</span></ProgressCircle>
-        {increaseOrDecrease === "no_change" ? (
-          <BadgeDelta deltaType="unchanged" isIncreasePositive={true}
-          size="sm" color={"green"}>No Change</BadgeDelta>
-        ) : (
-          <BadgeDelta
-            className="followerBadge"
-            deltaType="moderateIncrease"
-            isIncreasePositive={true}
-            size="sm"
+    <div className="relative group items-start justify-center">
+      <div className="bb w-full absolute -inset-0.5 bg-gradient-to-r from-pink-600 to-purple-600  blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
+      <Card className="followerCard drop-shadow-2xl" style={{ backgroundColor:"black" }}>
+        <div className="mb-3">
+      {show && ( // Conditional rendering based on show state
+          <RoughNotation type="underline" show={show} color="orange" strokeWidth={5}>
+            <h2 className="followerCardTitle font-mono">Followers</h2>
+          </RoughNotation>
+        )}
+        </div>
+        <Flex>
+          <ProgressCircle
+            className="followerProgressCircle"
+            value={followerCount}
+            radius={40}
+            strokeWidth={10}
+            tooltip="Followers"
             color={"green"}
           >
-            Increase
-          </BadgeDelta>
-        )}
-      </Flex>
-    </Card>
+            <span className="text-md text-gray-700 font-large ">{followerCount}</span>
+          </ProgressCircle>
+          {increaseOrDecrease === "no_change" ? (
+            <BadgeDelta
+              deltaType="unchanged"
+              isIncreasePositive={true}
+              size="sm"
+              color={"green"}
+            >
+              No Change
+            </BadgeDelta>
+          ) : (
+            <BadgeDelta
+              className="followerBadge"
+              deltaType="moderateIncrease"
+              isIncreasePositive={true}
+              size="sm"
+              color={"green"}
+            >
+              Increase
+            </BadgeDelta>
+          )}
+        </Flex>
+      </Card>
+    </div>
   );
 };
 
diff --git a/src/Components/FollowerAnalysis/FollowingProgress.tsx b/src/Components/FollowerAnalysis/FollowingProgress.tsx
index 0d20821..80a413f 100644
--- a/src/Components/FollowerAnalysis/FollowingProgress.tsx
+++ b/src/Components/FollowerAnalysis/FollowingProgress.tsx
@@ -1,20 +1,29 @@
-import React from "react";
+import React , {useState} from "react";
 import {
   Card,
   Flex,
   ProgressCircle,
   BadgeDelta,
 } from "@tremor/react";
+import { RoughNotation } from "react-rough-notation";
 import {FollowingAnalysis} from "@/Interface/api.interface";
 
 const FollowingProgress: React.FC<FollowingAnalysis> = ({
   followingCount,
   increaseOrDecrease,
 }) => {
-
+  const [show, setShow] = useState(true); // Define and initialize the state variable
   return (
-    <Card className="followerCard " style={{ backgroundColor: "#F8FFD2" }}>
-      <h2 className="followerCardTitle font-mono">Following</h2>
+    <div className="relative group items-start justify-center">
+    <div className="bb w-full absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-red-600  blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
+    <Card className="followerCard " style={{ backgroundColor: "black" }}>
+    <div className="mb-3">
+      {show && ( 
+          <RoughNotation type="underline" show={show} color="red" strokeWidth={5}>
+            <h2 className="followerCardTitle font-mono">Followers</h2>
+          </RoughNotation>
+        )}
+        </div>
       <Flex>
         <ProgressCircle
           className="followerProgressCircle"
@@ -41,6 +50,7 @@ const FollowingProgress: React.FC<FollowingAnalysis> = ({
         )}
       </Flex>
     </Card>
+    </div>
   );
 };
 
diff --git a/src/Components/LanguageAnalysis/LanguageCount.tsx b/src/Components/LanguageAnalysis/LanguageCount.tsx
index 071daec..053be78 100644
--- a/src/Components/LanguageAnalysis/LanguageCount.tsx
+++ b/src/Components/LanguageAnalysis/LanguageCount.tsx
@@ -13,6 +13,8 @@ const LanguageCount: React.FC<LanguageCountProps> = ({ languageCounts }) => {
   }));
 
   return (
+    <div className="relative group items-start justify-center">
+    <div className="ml-10 langGradientBack  w-full absolute -inset-0.5 bg-gradient-to-r from-yellow-600 to-orange-600  blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
     <Card className="langCountCard ">
       <BarChart
         className="mt-6"
@@ -24,6 +26,7 @@ const LanguageCount: React.FC<LanguageCountProps> = ({ languageCounts }) => {
         yAxisWidth={56}
       />
     </Card>
+    </div>
   );
 };
 
diff --git a/src/Styles/Dashboard/followerProgress.css b/src/Styles/Dashboard/followerProgress.css
index 71a3d41..08b4b06 100644
--- a/src/Styles/Dashboard/followerProgress.css
+++ b/src/Styles/Dashboard/followerProgress.css
@@ -12,11 +12,12 @@
 
   }
   
+  
   .followerCardTitle {
     font-size: 15px;
     font-weight: bolder;
     margin-top: 0;
-    color: black;
+    color: white;
   }
   
   .followerProgressCircle {
@@ -37,5 +38,9 @@
   border-radius: 50px;
   z-index: 1;
   }
+  .bb{
+    margin-left: 10%;
+    border-radius: 30px;
+  }
 
   
\ No newline at end of file
diff --git a/src/Styles/Dashboard/langCount.css b/src/Styles/Dashboard/langCount.css
new file mode 100644
index 0000000..7b6b832
--- /dev/null
+++ b/src/Styles/Dashboard/langCount.css
@@ -0,0 +1,3 @@
+.langGradientBack{
+    border-radius: 30px;
+}
\ No newline at end of file
diff --git a/src/app/Dashboard/page.tsx b/src/app/Dashboard/page.tsx
index c7a8d17..e4c7e7e 100644
--- a/src/app/Dashboard/page.tsx
+++ b/src/app/Dashboard/page.tsx
@@ -70,7 +70,7 @@ return followerAnlData.followerCount !== 0 && followingAnlData.followingCount !=
   <div>
     <div className="flex flex-row basis-20 mt-10">
       <div className="drop-shadow-2xl">
-      <Grid numItems={1} numItemsSm={2} numItemsLg={2} className="gap-3 ">
+      <Grid numItems={1} numItemsSm={2} numItemsLg={2} className="gap-3">
         <FollowerProgress
           followerCount={followerAnlData.followerCount}
           increaseOrDecrease={followerAnlData.increaseOrDecrease}
diff --git a/src/app/globals.css b/src/app/globals.css
index 4abfc6a..0309ffe 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -17,7 +17,7 @@
 }
 
 body{
-  background-color: #F5EEE6;
+  background-color: black;
 }
 
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c44a406..269e83c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import "../Styles/Dashboard/followerProgress.css"
+import "../Styles/Dashboard/langCount.css"
 
 const inter = Inter({ subsets: ["latin"] });