diff --git a/app/globals.css b/app/globals.css
index d3df735..05395e6 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,140 +1,247 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --background-color: #0d0d0d;
-  --text-color: #ffffff;
-}
-
-[data-theme="light"] {
-  --background-color: #ffffff;
-  --text-color: #000000;
-}
-
-body {
-  background-color: var(--background-color);
-  color: var(--text-color);
-  font-weight: 400;
-  transition: background-color 0.3s ease, color 0.3s ease;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-.taskProgressBar::-webkit-progress-bar {
-  background-color: #f0f0f0;
-  border-radius: 4px;
-}
-
-.taskProgressBar::-webkit-progress-value {
-  background-color: #c4ff63;
-  border-radius: 4px;
-}
-
-.animate__animated.animate__zoomIn {
-  --animate-duration: 0.3s;
-}
-
-.nft-pattern {
-  background-image: url("/nft-guy.png");
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-.dao-pattern {
-  background-image: url("/dao-guy.png");
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-  }
-
-  .dark,
-  [data-theme="dark"] {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-/* Additional theme debugging and fallback styles */
-.dark-theme {
-  background-color: hsl(0 0% 3.9%);
-  color: hsl(0 0% 98%);
-}
-
-.light-theme {
-  background-color: hsl(0 0% 100%);
-  color: hsl(0 0% 3.9%);
-}
-
-/* Ensure theme transitions are smooth */
-* {
-  transition: background-color 0.3s ease, color 0.3s ease,
-    border-color 0.3s ease;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+.taskProgressBar::-webkit-progress-bar {
+  background-color: #f0f0f0;
+  border-radius: 4px;
+}
+
+.taskProgressBar::-webkit-progress-value {
+  background-color: #c4ff63;
+  border-radius: 4px;
+}
+
+.animate__animated.animate__zoomIn {
+  --animate-duration: 0.3s;
+}
+
+.nft-pattern {
+  background-image: url("/nft-guy.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.dao-pattern {
+  background-image: url("/dao-guy.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 10%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+
+  .dark, [data-theme="dark"] {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background-color: #0d0d0d;
+  --text-color: #ffffff;
+}
+
+[data-theme="light"] {
+  --background-color: #ffffff;
+  --text-color: #000000;
+}
+
+body {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  font-weight: 400;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+.taskProgressBar::-webkit-progress-bar {
+  background-color: #f0f0f0;
+  border-radius: 4px;
+}
+
+.taskProgressBar::-webkit-progress-value {
+  background-color: #c4ff63;
+  border-radius: 4px;
+}
+
+.animate__animated.animate__zoomIn {
+  --animate-duration: 0.3s;
+}
+
+.nft-pattern {
+  background-image: url("/nft-guy.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.dao-pattern {
+  background-image: url("/dao-guy.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+
+  .dark,
+  [data-theme="dark"] {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Additional theme debugging and fallback styles */
+.dark-theme {
+  background-color: hsl(0 0% 3.9%);
+  color: hsl(0 0% 98%);
+}
+
+.light-theme {
+  background-color: hsl(0 0% 100%);
+  color: hsl(0 0% 3.9%);
+}
+
+/* Ensure theme transitions are smooth */
+* {
+  transition: background-color 0.3s ease, color 0.3s ease,
+    border-color 0.3s ease;
+}
\ No newline at end of file
diff --git a/components/analytics/UserStats.tsx b/components/analytics/UserStats.tsx
index 5be900b..1061251 100644
--- a/components/analytics/UserStats.tsx
+++ b/components/analytics/UserStats.tsx
@@ -79,6 +79,50 @@ export default function UserStats({
               <Plus /> Follow
             </button>
 
+export default function UserStats({ projectTags, projectDescription, socialLinks }: UserStatsProps) {
+    return (
+        <section className="py-7 flex flex-col items-start w-full">
+            <div className="w-full h-[126px] md:h-[270px] bg-border bg-[url('/item-image.svg')] bg-no-repeat bg-cover bg-center"></div>
+            <div className="w-full max-w-[1400px] mx-auto flex flex-col gap-10 items-start px-[4%] md:px-0">
+                <div className="w-[100px] h-[100px] md:w-[138px] md:h-[138px] rounded-full bg-transparent flex items-center justify-center border-4 border-border mt-[-60px]">
+                    <Image src={"/user-icon.svg"} alt="user profile image" height={100} width={100} className="rounded-full bg-cover bg-center h-[80px] w-[80px] md:h-[103px] md:w-[103px]" />
+                </div>
+                <div className="w-full flex items-start flex-col md:flex-row gap-10 justify-between">
+                    <div className="w-full basis-1/2 max-w-[520px] flex flex-col gap-5">
+                        <div className="flex items-center justify-between gap-5">
+                            <h1 className="font-medium text-3xl md:text-5xl text-foreground">Coiton</h1>
+                            <div className="flex items-center gap-4">
+                                <button className="flex items-center justify-center border border-border p-[13px] rounded-[4px] text-foreground"><FaEllipsis className="text-xs md:text-[25px]" /></button>
+                                <button className="flex items-center justify-center border border-border p-[13px] rounded-[4px] text-foreground"><BsTwitterX className="text-xs md:text-[25px]" /></button>
+                            </div>
+                        </div>
+                        <div className="flex w-fit items-center gap-2">
+                            {projectTags.map((tag, index) => (
+                                <span key={index} className="rounded-[4px] bg-secondary py-1 px-2 text-base font-normal text-foreground">{tag}</span>
+                            ))}
+                        </div>
+                        <p className="text-lg font-normal text-[#988C8C]">{projectDescription}</p>
+                        <div className="flex items-center gap-6">
+                            {socialLinks.map((link, index) => (
+                                <Link key={index} href={link.link}><button className="text-gray-700 dark:text-gray-300">{link.icon}</button></Link>
+                            ))}
+                        </div>
+                    </div>
+                    <div className="basis-1/2 max-w-[520px] flex items-start flex-col-reverse md:flex-row justify-center gap-6">
+                        <button className="py-3 px-6 flex items-center justify-center gap-[5px] text-lg md:text-2xl font-bold text-[#70750B] bg-[#EBFFCB] border border-border rounded-lg hover:scale-95 duration-150 ease-in-out"><PiPlus /> Follow</button>
+                        <div className="bg-secondary flex items-center justify-center rounded-[10px] gap-6 py-4 px-5">
+                            <div className="flex flex-col items-start gap-1">
+                                <small className="font-normal text-[#988C8C] text-sm md:text-base">Followers</small>
+                                <p className="text-foreground font-bold text-lg md:text-[22px]">8,674</p>
+                            </div>
+                            <div className="w-[1px] h-10 bg-gray-400 mx-4"></div>
+                            <div className="flex flex-col items-start gap-1">
+                                <small className="font-normal text-[#988C8C] text-sm md:text-base">Token</small>
+                                <p className="text-foreground font-bold text-lg md:text-[22px]">TGE Upcoming</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             <div className="bg-card flex items-center justify-center rounded-[10px] gap-6 py-4 px-5 border border-border">
               <div className="flex flex-col items-start gap-1">
                 <small className="font-normal text-muted-foreground text-sm md:text-base">
@@ -98,10 +142,11 @@ export default function UserStats({
                   TGE Upcoming
                 </p>
               </div>
+
             </div>
           </div>
         </div>
       </div>
     </section>
   );
-}
+}
\ No newline at end of file