diff --git a/frontend/components/profile/index.tsx b/frontend/components/profile/index.tsx
index 4246da5..c176c49 100644
--- a/frontend/components/profile/index.tsx
+++ b/frontend/components/profile/index.tsx
@@ -17,7 +17,7 @@ import {
 import { Label } from "@/components/ui/label"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { deleteSandbox, updateSandbox, updateUser } from "@/lib/actions"
-import { MAX_FREE_GENERATION } from "@/lib/constant"
+import { TIERS } from "@/lib/tiers"
 import { SandboxWithLiked, User } from "@/lib/types"
 import { useUser } from "@clerk/nextjs"
 import {
@@ -74,6 +74,7 @@ export default function ProfilePage({
             joinedDate={profileOwner.createdAt}
             generations={isOwnProfile ? loggedInUser.generations : undefined}
             isOwnProfile={isOwnProfile}
+            tier={profileOwner.tier}
           />
         </div>
         <div className="md:col-span-2">
@@ -100,6 +101,7 @@ function ProfileCard({
   joinedDate,
   generations,
   isOwnProfile,
+  tier,
 }: {
   name: string
   username: string
@@ -108,6 +110,7 @@ function ProfileCard({
   joinedDate: Date
   generations?: number
   isOwnProfile: boolean
+  tier: string
 }) {
   const { user } = useUser()
   const router = useRouter()
@@ -228,7 +231,7 @@ function ProfileCard({
             <div className="flex flex-col items-center gap-2">
               <p className="text-xs text-muted-foreground">{joinedAt}</p>
               {typeof generations === "number" && (
-                <SubscriptionBadge generations={generations} />
+                <SubscriptionBadge generations={generations} tier={tier as keyof typeof TIERS} />
               )}
             </div>
           </>
@@ -442,11 +445,11 @@ const StatsItem = ({ icon: Icon, label }: StatsItemProps) => (
 // #endregion
 
 // #region Sub Badge
-const SubscriptionBadge = ({ generations }: { generations: number }) => {
+const SubscriptionBadge = ({ generations, tier = "FREE" }: { generations: number, tier?: keyof typeof TIERS }) => {
   return (
     <div className="flex gap-2 items-center">
       <Badge variant="secondary" className="text-sm cursor-pointer">
-        Free
+        {tier}
       </Badge>
       <HoverCard>
         <HoverCardTrigger>
@@ -458,11 +461,11 @@ const SubscriptionBadge = ({ generations }: { generations: number }) => {
           <div className="w-full space-y-2">
             <div className="flex justify-between text-sm">
               <span className="font-medium">AI Generations</span>
-              <span>{`${generations} / ${MAX_FREE_GENERATION}`}</span>
+              <span>{`${generations} / ${TIERS[tier].generations}`}</span>
             </div>
             <Progress
               value={generations}
-              max={MAX_FREE_GENERATION}
+              max={TIERS[tier].generations}
               className="w-full"
             />
           </div>
diff --git a/frontend/components/ui/userButton.tsx b/frontend/components/ui/userButton.tsx
index 3abf8d6..ad7a402 100644
--- a/frontend/components/ui/userButton.tsx
+++ b/frontend/components/ui/userButton.tsx
@@ -7,7 +7,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { MAX_FREE_GENERATION } from "@/lib/constant"
 import { User } from "@/lib/types"
 import { useClerk } from "@clerk/nextjs"
 import {
@@ -81,7 +80,7 @@ export default function UserButton({ userData: initialUserData }: { userData: Us
   const usagePercentage = Math.floor((userData.generations || 0) * 100 / tierInfo.limit)
 
   const handleUpgrade = async () => {
-    router.push('/upgrade')
+    router.push(`/@${userData.username}`)
   }
 
   return (
@@ -104,16 +103,16 @@ export default function UserButton({ userData: initialUserData }: { userData: Us
           <Link href={"/dashboard"}>
             <LayoutDashboard className="mr-2 size-4" />
             <span>Dashboard</span>
-            <DropdownMenuSeparator />
           </Link>
         </DropdownMenuItem>
+        <DropdownMenuSeparator />
         <DropdownMenuItem className="cursor-pointer" asChild>
           <Link href={`/@${userData.username}`}>
             <UserIcon className="mr-2 size-4" />
             <span>Profile</span>
-            <DropdownMenuSeparator />
           </Link>
         </DropdownMenuItem>
+        <DropdownMenuSeparator />
 
 
         <div className="py-1.5 px-2 w-full">
@@ -122,7 +121,7 @@ export default function UserButton({ userData: initialUserData }: { userData: Us
               <TierIcon className={`h-4 w-4 ${tierInfo.color}`} />
               <span className="text-sm font-medium">{userData.tier || "FREE"} Plan</span>
             </div>
-            {/* {(userData.tier === "FREE" || userData.tier === "PRO") && (
+            {(userData.tier === "FREE" || userData.tier === "PRO") && (
               <Button
                 variant="ghost"
                 size="sm"
@@ -131,33 +130,32 @@ export default function UserButton({ userData: initialUserData }: { userData: Us
               >
                 Upgrade
               </Button>
-            )} */}
+            )}
           </div>
         </div>
 
         <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          <Sparkles className="size-4 mr-2 text-indigo-500" />
-                 <div className="w-full">
-          <div className="flex items-center justify-between text-sm text-muted-foreground mb-2">
-            <span>AI Usage</span>
-            <span>{userData.generations}/{tierInfo.limit}</span>
-          </div>
+        <div className="px-2 py-1.5">
+          <div className="w-full">
+            <div className="flex items-center justify-between text-sm text-muted-foreground mb-2">
+              <span>AI Usage</span>
+              <span>{userData.generations}/{tierInfo.limit}</span>
+            </div>
 
-          <div className="rounded-full w-full h-2 overflow-hidden bg-secondary">
-            <div
-              className={`h-full rounded-full transition-all duration-300 ${
+            <div className="rounded-full w-full h-2 overflow-hidden bg-secondary mb-1">  
+              <div
+                className={`h-full rounded-full transition-all duration-300 ${
                 usagePercentage > 90 ? 'bg-red-500' : 
                 usagePercentage > 75 ? 'bg-yellow-500' : 
                 tierInfo.color.replace('text-', 'bg-')
               }`}
-              style={{
-                width: `${Math.min(usagePercentage, 100)}%`,
-              }}
-            />
+                style={{
+                  width: `${Math.min(usagePercentage, 100)}%`,
+                }}
+              />
+            </div>
           </div>
         </div>
-        </DropdownMenuItem>
         <DropdownMenuSeparator />
 
         {/* <DropdownMenuItem className="cursor-pointer">
diff --git a/frontend/lib/constant.ts b/frontend/lib/constant.ts
deleted file mode 100644
index 2ef53d7..0000000
--- a/frontend/lib/constant.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const MAX_FREE_GENERATION = 1000