diff --git a/src/App.svelte b/src/App.svelte
index f41d62e..fbe1ca0 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,110 +1,117 @@
 <script lang="ts">
-  import { Router, Route } from "svelte-routing";
-  import "./app.css";
-  import Navbar from "$lib/components/Navbar.svelte";
-  import ProfileView from "$lib/components/ProfileView.svelte";
-  import UserProfile from "$lib/components/UserProfile.svelte";
-  import {
-    Home as HomeIcon,
-    Search,
-    Bell,
-    User,
-    MoreHorizontal,
-    Plus,
-  } from "lucide-svelte";
+    import { Router, Route } from "svelte-routing";
+    import "./app.css";
+    import Navbar from "$lib/components/Navbar.svelte";
+    import ProfileView from "$lib/components/ProfileView.svelte";
+    import UserProfile from "$lib/components/UserProfile.svelte";
+    import {
+        Home as HomeIcon,
+        Search,
+        Bell,
+        User,
+        MoreHorizontal,
+        Plus,
+    } from "lucide-svelte";
 
-  export let url = "";
+    export let url = "";
 
-  const menuItems = [
-    { icon: HomeIcon, label: "Home", href: "/" },
-    { icon: Search, label: "Explore", href: "/explore" },
-    { icon: Bell, label: "Notifications", href: "/UserProfile" },
-    { icon: User, label: "Profile", href: "/profile" },
-  ];
+    const menuItems = [
+        { icon: HomeIcon, label: "Home", href: "/" },
+        { icon: Search, label: "Explore", href: "/explore" },
+        { icon: Bell, label: "Notifications", href: "/UserProfile" },
+        { icon: User, label: "Profile", href: "/profile" },
+    ];
 </script>
 
 <Router {url}>
-  <div class="flex h-screen overflow-hidden">
-    <aside class="w-64 bg-white shadow-lg flex flex-col justify-between p-4">
-      <div class="space-y-4">
-        <div class="p-2">
-          <svg
-            class="w-8 h-8 text-purple-500"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path
-              d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
-            ></path>
-          </svg>
-        </div>
-        <nav>
-          <ul class="space-y-2">
-            {#each menuItems as item}
-              <li>
-                <a
-                  href={item.href}
-                  class="flex items-center p-2 rounded-full hover:bg-purple-100 transition-colors duration-200"
-                >
-                  <svelte:component
-                    this={item.icon}
-                    class="w-6 h-6 mr-4 text-purple-500"
-                  />
-                  <span class="text-lg font-medium text-gray-700"
-                    >{item.label}</span
-                  >
-                </a>
-              </li>
-            {/each}
-            <li>
-              <button
-                class="flex items-center p-2 rounded-full hover:bg-purple-100 transition-colors duration-200"
-              >
-                <MoreHorizontal class="w-6 h-6 mr-4 text-purple-500" />
-                <span class="text-lg font-medium text-gray-700">More</span>
-              </button>
-            </li>
-          </ul>
-        </nav>
-        <button
-          class="w-full bg-purple-500 text-white rounded-full py-3 font-bold text-lg hover:bg-purple-600 transition-colors duration-200 flex items-center justify-center"
+    <div class="flex h-screen overflow-hidden">
+        <aside
+            class="w-64 bg-white shadow-lg flex flex-col justify-between p-4"
         >
-          <Plus class="w-5 h-5 mr-2" />
-          Post
-        </button>
-      </div>
-      <div class="p-4">
-        <button class="flex items-center space-x-2">
-          <div
-            class="w-10 h-10 rounded-full bg-purple-200 flex items-center justify-center text-purple-500 font-bold text-xl"
-          >
-            N
-          </div>
-          <div class="flex-grow text-left">
-            <p class="font-semibold text-gray-800">Nickzz</p>
-            <p class="text-sm text-gray-500">@Nickzz_AO</p>
-          </div>
-          <MoreHorizontal class="w-5 h-5 text-gray-500" />
-        </button>
-      </div>
-    </aside>
+            <div class="space-y-4">
+                <div class="p-2">
+                    <svg
+                        class="w-8 h-8 text-secondary-500"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    >
+                        <path
+                            d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
+                        ></path>
+                    </svg>
+                </div>
+                <nav>
+                    <ul class="space-y-2">
+                        {#each menuItems as item}
+                            <li>
+                                <a
+                                    href={item.href}
+                                    class="flex items-center p-2 rounded-full hover:bg-secondary-100 transition-colors duration-200"
+                                >
+                                    <svelte:component
+                                        this={item.icon}
+                                        class="w-6 h-6 mr-4 text-primary-500"
+                                    />
+                                    <span
+                                        class="text-lg font-medium text-gray-700"
+                                        >{item.label}</span
+                                    >
+                                </a>
+                            </li>
+                        {/each}
+                        <li>
+                            <button
+                                class="flex items-center p-2 rounded-full hover:bg-secondary-100 transition-colors duration-200"
+                            >
+                                <MoreHorizontal
+                                    class="w-6 h-6 mr-4 text-primary-500"
+                                />
+                                <span class="text-lg font-medium text-gray-700"
+                                    >More</span
+                                >
+                            </button>
+                        </li>
+                    </ul>
+                </nav>
+                <button
+                    class="w-full bg-secondary-500 text-white rounded-full py-3 font-bold text-lg hover:bg-secondary-600 transition-colors duration-200 flex items-center justify-center"
+                >
+                    <Plus class="w-5 h-5 mr-2" />
+                    Post
+                </button>
+            </div>
+            <div class="p-4">
+                <button class="flex items-center space-x-2">
+                    <div
+                        class="w-10 h-10 rounded-full bg-secondary-200 flex items-center justify-center text-secondary-500 font-bold text-xl"
+                    >
+                        N
+                    </div>
+                    <div class="flex-grow text-left">
+                        <p class="font-semibold text-gray-800">Nickzz</p>
+                        <p class="text-sm text-gray-500">@Nickzz_AO</p>
+                    </div>
+                    <MoreHorizontal class="w-5 h-5 text-gray-500" />
+                </button>
+            </div>
+        </aside>
 
-    <main class="flex-1 overflow-y-auto bg-[#FFF0F5]">
-      <Navbar />
-      <div class="container mx-auto px-4 pt-16">
-        <Route path="/profile" component={ProfileView} />
-        <Route path="/UserProfile" component={UserProfile} />
-      </div>
-    </main>
-  </div>
+        <main class="flex-1 overflow-y-auto bg-[#FFF0F5]">
+            <Navbar />
+            <div class="container mx-auto px-4 pt-16">
+                <Route path="/profile" component={ProfileView} />
+                <Route path="/UserProfile" component={UserProfile} />
+            </div>
+        </main>
+    </div>
 </Router>
 
 <style>
-  :global(body) {
-    @apply bg-[#FFF0F5];
-  }
+    :global(body) {
+        @apply bg-[#FFF0F5];
+    }
 </style>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 646b7bc..cf73e21 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -1,49 +1,74 @@
 <script lang="ts">
-    import { writable } from 'svelte/store';
-    import { onMount } from 'svelte';
-    import { Toaster } from '$lib/components/ui/ui/sonner';
-    import WalletConnectButton from '$lib/components/wallet.svelte';
+    import { writable } from "svelte/store";
+    import { onMount } from "svelte";
+    import { Toaster } from "$lib/components/ui/ui/sonner";
+    import WalletConnectButton from "$lib/components/wallet.svelte";
 
     let isMenuOpen = false;
-    
+
     function toggleMenu() {
         isMenuOpen = !isMenuOpen;
     }
 </script>
 
-<nav class="fixed top-0 left-0 right-0 z-50 bg-purple-600/90 backdrop-blur-md shadow-md">
+<nav
+    class="fixed top-0 left-0 right-0 z-50 bg-secondary backdrop-blur-md shadow-md"
+>
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex items-center justify-between h-16">
             <div class="flex items-center">
-                <span class="ml-2 text-xl font-bold text-white nova-mono-regular">Swappy</span>
+                <span
+                    class="ml-2 text-xl font-bold text-white nova-mono-regular"
+                    >Swappy</span
+                >
             </div>
-            
+
             <div class="hidden md:block">
                 <div class="ml-10 flex items-baseline space-x-2 lg:space-x-4">
-                    <p class="text-white px-2 py-2 rounded-md text-xs lg:text-sm font-medium">Launch a Token Swap a Token</p>
+                    <p
+                        class="text-white px-2 py-2 rounded-md text-xs lg:text-sm font-medium"
+                    >
+                        Launch a Token Swap a Token
+                    </p>
                 </div>
             </div>
             <div class="hidden md:block">
-                <WalletConnectButton buttonClass="text-purple-600 border-white bg-white hover:bg-purple-100 text-xs lg:text-sm font-semibold transition-colors duration-300" />
+                <WalletConnectButton
+                    buttonClass="text-secondary-600 border-white bg-white hover:bg-secondary-100 text-xs lg:text-sm font-semibold transition-colors duration-300"
+                />
             </div>
             <div class="md:hidden">
                 <button on:click={toggleMenu} class="text-white">
-                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
+                    <svg
+                        class="h-6 w-6"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M4 6h16M4 12h16m-7 6h7"
+                        ></path>
                     </svg>
                 </button>
             </div>
         </div>
     </div>
-    
+
     {#if isMenuOpen}
-    <div class="md:hidden">
-        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-            <p class="text-white px-3 py-2 rounded-md text-sm font-medium">Launch a Token Swap a Token</p>
-            <div class="mt-4">
-                <WalletConnectButton buttonClass="w-full text-purple-600 border-white bg-white hover:bg-purple-100 font-semibold transition-colors duration-300" />
+        <div class="md:hidden">
+            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+                <p class="text-white px-3 py-2 rounded-md text-sm font-medium">
+                    Launch a Token Swap a Token
+                </p>
+                <div class="mt-4">
+                    <WalletConnectButton
+                        buttonClass="w-full text-secondary-600 border-white bg-white hover:bg-secondary-100 font-semibold transition-colors duration-300"
+                    />
+                </div>
             </div>
         </div>
-    </div>
     {/if}
-</nav>
\ No newline at end of file
+</nav>
diff --git a/src/lib/components/ProfileView.svelte b/src/lib/components/ProfileView.svelte
index 67c960a..723ebe7 100644
--- a/src/lib/components/ProfileView.svelte
+++ b/src/lib/components/ProfileView.svelte
@@ -1,14 +1,36 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import { fly } from 'svelte/transition';
-  import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "$lib/components/ui/ui/card";
-  import { Avatar, AvatarFallback, AvatarImage } from "$lib/components/ui/ui/avatar";
+  import { onMount } from "svelte";
+  import { fly } from "svelte/transition";
+  import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+  } from "$lib/components/ui/ui/card";
+  import {
+    Avatar,
+    AvatarFallback,
+    AvatarImage,
+  } from "$lib/components/ui/ui/avatar";
   import { Button } from "$lib/components/ui/ui/button";
-  import { Tabs, TabsContent, TabsList, TabsTrigger } from "$lib/components/ui/ui/tabs";
-  import { BarChart3, Rocket, MessageCircle, Share2, TrendingUp } from "lucide-svelte";
-  import Chart from 'chart.js/auto';
+  import {
+    Tabs,
+    TabsContent,
+    TabsList,
+    TabsTrigger,
+  } from "$lib/components/ui/ui/tabs";
+  import {
+    BarChart3,
+    Rocket,
+    MessageCircle,
+    Share2,
+    TrendingUp,
+  } from "lucide-svelte";
+  import Chart from "chart.js/auto";
 
-  let activeTab: string | undefined = 'posts';
+  let activeTab: string | undefined = "posts";
   let chart;
 
   const mockUserData = {
@@ -18,119 +40,168 @@
     bio: "Exploring the intersection of social media and crypto. Building the future of decentralized communication.",
     followers: 5280,
     following: 420,
-    totalMarketCap: 156000
+    totalMarketCap: 156000,
   };
 
   const mockPosts = [
     {
       id: 1,
-      content: "Just launched our new bonding curve algorithm! 🚀 The future of social media is here. #CryptoTwitter #Web3",
+      content:
+        "Just launched our new bonding curve algorithm! 🚀 The future of social media is here. #CryptoTwitter #Web3",
       timestamp: "2h ago",
       marketCap: 2500,
       tokenPrice: 0.05,
       comments: 42,
-      shares: 18
+      shares: 18,
     },
     {
       id: 2,
-      content: "Thoughts on using market cap for content recommendation? Let's discuss the pros and cons. 🤔 #ContentDiscovery",
+      content:
+        "Thoughts on using market cap for content recommendation? Let's discuss the pros and cons. 🤔 #ContentDiscovery",
       timestamp: "5h ago",
       marketCap: 1800,
       tokenPrice: 0.03,
       comments: 37,
-      shares: 12
+      shares: 12,
     },
     {
       id: 3,
-      content: "New blog post: 'The Attention Economy and Token-Powered Social Media' - check it out! 📝 #AttentionEconomy #Tokenomics",
+      content:
+        "New blog post: 'The Attention Economy and Token-Powered Social Media' - check it out! 📝 #AttentionEconomy #Tokenomics",
       timestamp: "1d ago",
       marketCap: 3200,
       tokenPrice: 0.07,
       comments: 56,
-      shares: 29
-    }
+      shares: 29,
+    },
   ];
 
   onMount(() => {
-    const ctx = document.getElementById('marketCapChart');
+    const ctx = document.getElementById("marketCapChart");
     //@ts-ignore
     chart = new Chart(ctx, {
-      type: 'line',
+      type: "line",
       data: {
-        labels: ['7d', '6d', '5d', '4d', '3d', '2d', '1d'],
-        datasets: [{
-          label: 'Market Cap',
-          data: [120000, 125000, 140000, 135000, 150000, 145000, 156000],
-          borderColor: 'rgb(147, 51, 234)',
-          tension: 0.3,
-          fill: true,
-          backgroundColor: 'rgba(147, 51, 234, 0.2)'
-        }]
+        labels: ["7d", "6d", "5d", "4d", "3d", "2d", "1d"],
+        datasets: [
+          {
+            label: "Market Cap",
+            data: [120000, 125000, 140000, 135000, 150000, 145000, 156000],
+            borderColor: "rgb(147, 51, 234)",
+            tension: 0.3,
+            fill: true,
+            backgroundColor: "rgba(147, 51, 234, 0.2)",
+          },
+        ],
       },
       options: {
         responsive: true,
         plugins: {
           legend: {
-            display: false
-          }
-        }
-      }
+            display: false,
+          },
+        },
+      },
     });
   });
 </script>
 
 <div class="max-w-4xl mx-auto p-4">
-  <Card class="mb-8 overflow-hidden transition-all duration-300 hover:shadow-xl">
-    <div class="bg-gradient-to-r from-purple-500 to-pink-500 p-6">
+  <Card
+    class="mb-8 overflow-hidden transition-all duration-300 hover:shadow-xl"
+  >
+    <div class="bg-gradient-to-r from-secondary-500 to-pink-500 p-6">
       <div class="flex items-center space-x-4">
         <Avatar class="h-24 w-24 ring-4 ring-white">
-          <AvatarImage src={mockUserData.avatar} alt={mockUserData.displayName} />
+          <AvatarImage
+            src={mockUserData.avatar}
+            alt={mockUserData.displayName}
+          />
           <AvatarFallback>{mockUserData.displayName[0]}</AvatarFallback>
         </Avatar>
         <div>
-          <h1 class="text-3xl font-extrabold text-white">{mockUserData.displayName}</h1>
-          <p class="text-purple-200">@{mockUserData.username}</p>
+          <h1 class="text-3xl font-extrabold text-white">
+            {mockUserData.displayName}
+          </h1>
+          <p class="text-secondary-200">@{mockUserData.username}</p>
           <p class="mt-2 text-white">{mockUserData.bio}</p>
         </div>
       </div>
     </div>
-    <CardContent class="bg-white bg-opacity-50 backdrop-filter backdrop-blur-lg">
+    <CardContent
+      class="bg-white bg-opacity-50 backdrop-filter backdrop-blur-lg"
+    >
       <div class="flex justify-between mt-6">
         <div class="text-center">
-          <p in:fly="{{ y: 20, duration: 500 }}" class="text-2xl font-semibold text-purple-600">{mockUserData.followers.toLocaleString()}</p>
+          <p
+            in:fly={{ y: 20, duration: 500 }}
+            class="text-2xl font-semibold text-secondary-600"
+          >
+            {mockUserData.followers.toLocaleString()}
+          </p>
           <p class="text-gray-500">Followers</p>
         </div>
         <div class="text-center">
-          <p in:fly="{{ y: 20, duration: 500, delay: 100 }}" class="text-2xl font-semibold text-purple-600">{mockUserData.following.toLocaleString()}</p>
+          <p
+            in:fly={{ y: 20, duration: 500, delay: 100 }}
+            class="text-2xl font-semibold text-secondary-600"
+          >
+            {mockUserData.following.toLocaleString()}
+          </p>
           <p class="text-gray-500">Following</p>
         </div>
         <div class="text-center">
-          <p in:fly="{{ y: 20, duration: 500, delay: 200 }}" class="text-2xl font-semibold text-purple-600">${mockUserData.totalMarketCap.toLocaleString()}</p>
+          <p
+            in:fly={{ y: 20, duration: 500, delay: 200 }}
+            class="text-2xl font-semibold text-secondary-600"
+          >
+            ${mockUserData.totalMarketCap.toLocaleString()}
+          </p>
           <p class="text-gray-500">Total Market Cap</p>
         </div>
       </div>
     </CardContent>
   </Card>
 
-  <Tabs value={activeTab} onValueChange={(value) => activeTab = value} class="mb-6">
-    <TabsList class="grid w-full grid-cols-2 rounded-lg bg-purple-100 p-1">
-      <TabsTrigger value="posts" class="rounded-md py-2 data-[state=active]:bg-white data-[state=active]:text-purple-700 data-[state=active]:shadow-sm transition-all">Posts</TabsTrigger>
-      <TabsTrigger value="marketCap" class="rounded-md py-2 data-[state=active]:bg-white data-[state=active]:text-purple-700 data-[state=active]:shadow-sm transition-all">Market Cap</TabsTrigger>
+  <Tabs
+    value={activeTab}
+    onValueChange={(value) => (activeTab = value)}
+    class="mb-6"
+  >
+    <TabsList class="grid w-full grid-cols-2 rounded-lg bg-secondary-100 p-1">
+      <TabsTrigger
+        value="posts"
+        class="rounded-md py-2 data-[state=active]:bg-white data-[state=active]:text-secondary-700 data-[state=active]:shadow-sm transition-all"
+        >Posts</TabsTrigger
+      >
+      <TabsTrigger
+        value="marketCap"
+        class="rounded-md py-2 data-[state=active]:bg-white data-[state=active]:text-secondary-700 data-[state=active]:shadow-sm transition-all"
+        >Market Cap</TabsTrigger
+      >
     </TabsList>
     <TabsContent value="posts">
       <div class="space-y-4">
         {#each mockPosts as post (post.id)}
-          <Card class="overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
+          <Card
+            class="overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
+          >
             <CardHeader>
-              <CardTitle class="text-lg font-semibold text-purple-700">{mockUserData.displayName}</CardTitle>
-              <CardDescription>@{mockUserData.username} · {post.timestamp}</CardDescription>
+              <CardTitle class="text-lg font-semibold text-secondary-700"
+                >{mockUserData.displayName}</CardTitle
+              >
+              <CardDescription
+                >@{mockUserData.username} · {post.timestamp}</CardDescription
+              >
             </CardHeader>
             <CardContent>
               <p>{post.content}</p>
             </CardContent>
-            <CardFooter class="flex justify-between text-sm text-gray-500 bg-purple-50">
+            <CardFooter
+              class="flex justify-between text-sm text-gray-500 bg-secondary-50"
+            >
               <div class="flex items-center">
-                <BarChart3 class="w-4 h-4 mr-1 text-purple-500" />
+                <BarChart3 class="w-4 h-4 mr-1 text-secondary-500" />
                 <span>${post.marketCap.toLocaleString()}</span>
               </div>
               <div class="flex items-center">
@@ -145,7 +216,10 @@
                 <Share2 class="w-4 h-4 mr-1 text-indigo-500" />
                 <span>{post.shares}</span>
               </div>
-              <Button size="sm" class="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-pink-500 hover:to-purple-500 text-white transition-all duration-300">
+              <Button
+                size="sm"
+                class="bg-gradient-to-r from-secondary-500 to-pink-500 hover:from-pink-500 hover:to-secondary-500 text-white transition-all duration-300"
+              >
                 <Rocket class="w-4 h-4 mr-2" />
                 Pump
               </Button>
@@ -157,7 +231,9 @@
     <TabsContent value="marketCap">
       <Card class="overflow-hidden transition-all duration-300 hover:shadow-lg">
         <CardHeader>
-          <CardTitle class="text-xl font-bold text-purple-700">Market Cap Over Time</CardTitle>
+          <CardTitle class="text-xl font-bold text-secondary-700"
+            >Market Cap Over Time</CardTitle
+          >
         </CardHeader>
         <CardContent>
           <canvas id="marketCapChart"></canvas>
@@ -169,6 +245,6 @@
 
 <style>
   :global(body) {
-    background-color: #FCE4EC;
+    background-color: #fce4ec;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/components/SideBar.svelte b/src/lib/components/SideBar.svelte
index 63f2f3a..a8c7bdb 100644
--- a/src/lib/components/SideBar.svelte
+++ b/src/lib/components/SideBar.svelte
@@ -1,55 +1,93 @@
 <script lang="ts">
-  import { Router, Link, Route } from 'svelte-routing';
-  import { Home, Search, Bell, Mail, Bookmark, Users, User, MoreHorizontal, Plus } from 'lucide-svelte';
-  
+  import { Router, Link, Route } from "svelte-routing";
+  import {
+    Home,
+    Search,
+    Bell,
+    Mail,
+    Bookmark,
+    Users,
+    User,
+    MoreHorizontal,
+    Plus,
+  } from "lucide-svelte";
+
   // Import your components
-  import UserProfile from './UserProfile.svelte';
+  import UserProfile from "./UserProfile.svelte";
 
-  export let url = '';
+  export let url = "";
 
   const menuItems = [
-    { icon: Home, label: 'Home', href: '/' },
-    { icon: Search, label: 'Explore', href: '/explore' },
-    { icon: Bell, label: 'Notifications', href: '/notifications' },
-    { icon: User, label: 'Profile', href: '/UserProfile' },
+    { icon: Home, label: "Home", href: "/" },
+    { icon: Search, label: "Explore", href: "/explore" },
+    { icon: Bell, label: "Notifications", href: "/notifications" },
+    { icon: User, label: "Profile", href: "/UserProfile" },
   ];
 </script>
 
 <Router {url}>
   <div class="flex h-screen">
-    <aside class="w-1/4 bg-white shadow-lg flex flex-col justify-between p-4">
+    <aside
+      class="w-1/4 bg-background shadow-lg flex flex-col justify-between p-4"
+    >
       <div class="space-y-4">
+        <!-- secondarysecondary -->
         <div class="p-2">
-          <svg class="w-8 h-8 text-purple-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
+          <svg
+            class="w-8 h-8 text-secondary-500"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path
+              d="M23 3a10.9 10.9 secondary 3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
+            ></path>
           </svg>
         </div>
         <nav>
           <ul class="space-y-2">
             {#each menuItems as item}
               <li>
-                <Link to={item.href} class="flex items-center p-2 rounded-full hover:bg-purple-100 transition-colors duration-200">
-                  <svelte:component this={item.icon} class="w-6 h-6 mr-4 text-purple-500" />
-                  <span class="text-lg font-medium text-gray-700">{item.label}</span>
+                secondary
+                <Link
+                  to={item.href}
+                  class="flex items-center p-2 rounded-full hover:bg-secondary-100 transition-colors duration-200"
+                >
+                  <svelte:component
+                    this={item.icon}
+                    class="w-6 h-6 mr-4 text-secondary-500"
+                  />
+                  <span class="text-lg font-medium text-gray-700"
+                    >{item.label}</span
+                  >
                 </Link>
               </li>
             {/each}
             <li>
-              <button class="flex items-center p-2 rounded-full hover:bg-purple-100 transition-colors duration-200">
-                <MoreHorizontal class="w-6 h-6 mr-4 text-purple-500" />
+              <button
+                class="flex items-center p-2 rounded-full hover:bg-secondary-100 transition-colors duration-200"
+              >
+                <MoreHorizontal class="w-6 h-6 mr-4 text-secondary-500" />
                 <span class="text-lg font-medium text-gray-700">More</span>
               </button>
             </li>
           </ul>
         </nav>
-        <button class="w-full bg-purple-500 text-white rounded-full py-3 font-bold text-lg hover:bg-purple-600 transition-colors duration-200 flex items-center justify-center">
+        <button
+          class="w-full bg-secondary-500 text-white rounded-full py-3 font-bold text-lg hover:bg-purple-600 transition-colors duration-200 flex items-center justify-center"
+        >
           <Plus class="w-5 h-5 mr-2" />
           Post
         </button>
       </div>
       <div class="p-4">
         <button class="flex items-center space-x-2">
-          <div class="w-10 h-10 rounded-full bg-purple-200 flex items-center justify-center text-purple-500 font-bold text-xl">
+          <div
+            class="w-10 h-10 rounded-full bg-purple-200 flex items-center justify-center text-purple-500 font-bold text-xl"
+          >
             N
           </div>
           <div class="flex-grow text-left">
@@ -74,4 +112,4 @@
   :global(body) {
     @apply bg-[#FFF0F5];
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/components/UserProfile.svelte b/src/lib/components/UserProfile.svelte
index 12263c3..9482f0e 100644
--- a/src/lib/components/UserProfile.svelte
+++ b/src/lib/components/UserProfile.svelte
@@ -1,17 +1,26 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import { Card, CardContent, CardHeader, CardTitle } from "$lib/components/ui/ui/card";
-  import { Avatar, AvatarFallback, AvatarImage } from "$lib/components/ui/ui/avatar";
+  import { onMount } from "svelte";
+  import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+  } from "$lib/components/ui/ui/card";
+  import {
+    Avatar,
+    AvatarFallback,
+    AvatarImage,
+  } from "$lib/components/ui/ui/avatar";
   import { Button } from "$lib/components/ui/ui/button";
   import { Input } from "$lib/components/ui/ui/input";
   import { Textarea } from "$lib/components/ui/ui/textarea";
   import { Label } from "$lib/components/ui/ui/label";
   import { Camera } from "lucide-svelte";
 
-  let username = '';
-  let displayName = '';
-  let bio = '';
-  let avatarUrl = '';
+  let username = "";
+  let displayName = "";
+  let bio = "";
+  let avatarUrl = "";
 
   //@ts-ignore
   function handleFileUpload(event) {
@@ -29,48 +38,78 @@
   function handleSubmit() {
     // Here you would typically send the profile data to your backend
     console.log({ username, displayName, bio, avatarUrl });
-    alert('Profile created successfully!');
+    alert("Profile created successfully!");
   }
 </script>
 
 <div class="max-w-2xl mx-auto p-4">
   <Card class="overflow-hidden transition-all duration-300 hover:shadow-xl">
-    <CardHeader class="bg-gradient-to-r from-purple-500 to-pink-500 text-white">
+    <CardHeader
+      class="bg-gradient-to-r from-secondary-500 to-pink-500 text-white"
+    >
       <CardTitle class="text-2xl font-bold">Create Your Profile</CardTitle>
     </CardHeader>
     <CardContent class="p-6 space-y-6">
       <div class="flex flex-col items-center space-y-4">
-        <Avatar class="h-32 w-32 ring-4 ring-purple-500">
+        <Avatar class="h-32 w-32 ring-4 ring-secondary-500">
           {#if avatarUrl}
             <AvatarImage src={avatarUrl} alt={displayName} />
           {:else}
-            <AvatarFallback class="bg-purple-100 text-purple-500 text-4xl flex items-center justify-center">
+            <AvatarFallback
+              class="bg-secondary-100 text-secondary-500 text-4xl flex items-center justify-center"
+            >
               <Camera size={48} />
             </AvatarFallback>
           {/if}
         </Avatar>
-        <Label for="avatar-upload" class="cursor-pointer bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded-full transition-colors duration-300">
+        <Label
+          for="avatar-upload"
+          class="cursor-pointer bg-secondary-500 hover:bg-secondary-600 text-white py-2 px-4 rounded-full transition-colors duration-300"
+        >
           Upload Profile Picture
         </Label>
-        <Input type="file" id="avatar-upload" class="hidden" accept="image/*" on:change={handleFileUpload} />
+        <Input
+          type="file"
+          id="avatar-upload"
+          class="hidden"
+          accept="image/*"
+          on:change={handleFileUpload}
+        />
       </div>
 
       <div class="space-y-4">
         <div>
           <Label for="username">Username</Label>
-          <Input type="text" id="username" bind:value={username} placeholder="@username" />
+          <Input
+            type="text"
+            id="username"
+            bind:value={username}
+            placeholder="@username"
+          />
         </div>
         <div>
           <Label for="displayName">Display Name</Label>
-          <Input type="text" id="displayName" bind:value={displayName} placeholder="Your Name" />
+          <Input
+            type="text"
+            id="displayName"
+            bind:value={displayName}
+            placeholder="Your Name"
+          />
         </div>
         <div>
           <Label for="bio">Bio</Label>
-          <Textarea id="bio" bind:value={bio} placeholder="Tell us about yourself..." />
+          <Textarea
+            id="bio"
+            bind:value={bio}
+            placeholder="Tell us about yourself..."
+          />
         </div>
       </div>
 
-      <Button class="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-pink-500 hover:to-purple-500 text-white transition-all duration-300" on:click={handleSubmit}>
+      <Button
+        class="w-full bg-gradient-to-r from-secondary-500 to-pink-500 hover:from-pink-500 hover:to-secondary-500 text-white transition-all duration-300"
+        on:click={handleSubmit}
+      >
         Create Profile
       </Button>
     </CardContent>
@@ -79,6 +118,6 @@
 
 <style>
   :global(body) {
-    background-color: #FCE4EC;
+    background-color: #fce4ec;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index c4bf235..267160f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -14,49 +14,50 @@ const config: Config = {
 			}
 		},
 		extend: {
+			fontFamily: {
+				display: 'Overpass, ui-sans-serif',
+				heading: 'Encode Sans, ui-serif',
+			},
 			colors: {
-				border: "hsl(var(--border) / <alpha-value>)",
-				input: "hsl(var(--input) / <alpha-value>)",
-				ring: "hsl(var(--ring) / <alpha-value>)",
-				background: "hsl(var(--background) / <alpha-value>)",
-				foreground: "hsl(var(--foreground) / <alpha-value>)",
+				border: "hsl(240, 3.7%, 15.9%)",
+				input: "hsl(240, 3.7%, 15.9%)",
+				ring: "hsl(240, 4.9%, 83.9%)",
+				background: "hsl(240, 10%, 3.9%)",
+				foreground: "hsl(0, 0%, 98%)",
 				primary: {
-					DEFAULT: "hsl(var(--primary) / <alpha-value>)",
-					foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
+					DEFAULT: "hsl(0, 0%, 98%)",
+					foreground: "hsl(240, 5.9%, 10%)",
 				},
 				secondary: {
-					DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
-					foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
+					DEFAULT: "hsl(240, 3.7%, 15.9%)",
+					foreground: "hsl(0, 0%, 98%)",
 				},
 				destructive: {
-					DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
-					foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
+					DEFAULT: "hsl(194, 97%, 45%)",
+					foreground: "hsl(0, 0%, 98%)",
 				},
 				muted: {
-					DEFAULT: "hsl(var(--muted) / <alpha-value>)",
-					foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
+					DEFAULT: "hsl(240, 3.7%, 15.9%)",
+					foreground: "hsl(325, 80%, 56%)",
 				},
 				accent: {
-					DEFAULT: "hsl(var(--accent) / <alpha-value>)",
-					foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
+					DEFAULT: "hsl(240, 3.7%, 15.9%)",
+					foreground: "hsl(0, 0%, 98%)",
 				},
 				popover: {
-					DEFAULT: "hsl(var(--popover) / <alpha-value>)",
-					foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
+					DEFAULT: "hsl(240, 10%, 3.9%)",
+					foreground: "hsl(0, 0%, 98%)",
 				},
 				card: {
-					DEFAULT: "hsl(var(--card) / <alpha-value>)",
-					foreground: "hsl(var(--card-foreground) / <alpha-value>)"
-				}
+					DEFAULT: "hsl(240, 10%, 3.9%)",
+					foreground: "hsl(0, 0%, 98%)",
+				},
 			},
 			borderRadius: {
-				lg: "var(--radius)",
-				md: "calc(var(--radius) - 2px)",
-				sm: "calc(var(--radius) - 4px)"
+				lg: "0.5rem",
+				md: "calc(0.5rem - 2px)",
+				sm: "calc(0.5rem - 4px)",
 			},
-			fontFamily: {
-				sans: [...fontFamily.sans]
-			}
 		}
 	},
 };