diff --git a/apps/client/src/components/AuthWrapper.tsx b/apps/client/src/components/AuthWrapper.tsx
new file mode 100644
index 0000000..b695306
--- /dev/null
+++ b/apps/client/src/components/AuthWrapper.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import { useGlobalContext } from "@/contexts/GlobalContext";
+
+interface AuthWrapperProps {
+  children?: ReactNode;
+  fallback?: ReactNode;
+}
+
+export const AuthWrapper = ({ children, fallback }: AuthWrapperProps) => {
+  const { isLoggedIn } = useGlobalContext();
+
+  if (!isLoggedIn) {
+    return fallback ?? null;
+  }
+
+  return <>{children}</>;
+};
diff --git a/apps/client/src/components/Avatar.tsx b/apps/client/src/components/Avatar.tsx
index e372600..01dfc91 100644
--- a/apps/client/src/components/Avatar.tsx
+++ b/apps/client/src/components/Avatar.tsx
@@ -59,18 +59,17 @@ export const Avatar: FC<AvatarProps> = ({
   className,
   ...props
 }) => {
-  const fallbackBackground = hasRandomBackground
-    ? RandomBackgroundColors[
-        Math.floor(Math.random() * RandomBackgroundColors.length)
-      ]
-    : "bg-muted";
+  const fallbackBackground =
+    hasRandomBackground && username
+      ? RandomBackgroundColors[
+          username.charCodeAt(0) % RandomBackgroundColors.length
+        ]
+      : "bg-base-muted";
 
   return (
     <AvatarBase {...props} className={cn(className)}>
       <AvatarImage src={src} />
-      <AvatarFallback className={fallbackBackground}>
-        {username?.[0].toLocaleUpperCase() || ""}
-      </AvatarFallback>
+      <AvatarFallback className={fallbackBackground} />
     </AvatarBase>
   );
 };
diff --git a/apps/client/src/components/Content.tsx b/apps/client/src/components/Content.tsx
index 411698e..5172cd6 100644
--- a/apps/client/src/components/Content.tsx
+++ b/apps/client/src/components/Content.tsx
@@ -1,27 +1,113 @@
 // import "katex/dist/katex.min.css"
-import { detectFormat, Format } from "@/lib/format" 
-import type { FC } from "react"
-import Latex from "react-latex-next"
-import ReactMarkdown from "react-markdown"
-import rehypeHighlight from "rehype-highlight"
-import remarkGfm from "remark-gfm"
+import { detectFormat, Format } from "@/lib/format";
+import { cn } from "@/lib/utils";
+import type { FC } from "react";
+import Latex from "react-latex-next";
+import ReactMarkdown from "react-markdown";
+import rehypeHighlight from "rehype-highlight";
+import remarkGfm from "remark-gfm";
 
 export const Content: FC<{ content: string }> = ({ content }) => {
   switch (detectFormat(content)) {
     case Format.Markdown:
       return (
-        <div className="prose">
+        <div>
           <ReactMarkdown
             remarkPlugins={[remarkGfm]}
             rehypePlugins={[rehypeHighlight]}
+            components={{
+              h1: ({ children, className }) => (
+                <h1 className={cn("text-base-foreground", className)}>
+                  {children}
+                </h1>
+              ),
+              h2: ({ children, className }) => (
+                <h2 className={cn("text-base-foreground", className)}>
+                  {children}
+                </h2>
+              ),
+              h3: ({ children, className }) => (
+                <h3 className={cn("text-base-foreground", className)}>
+                  {children}
+                </h3>
+              ),
+              h4: ({ children, className }) => (
+                <h4 className={cn("text-base-foreground", className)}>
+                  {children}
+                </h4>
+              ),
+              h5: ({ children, className }) => (
+                <h5 className={cn("text-base-foreground", className)}>
+                  {children}
+                </h5>
+              ),
+              h6: ({ children, className }) => (
+                <h6 className={cn("text-base-foreground", className)}>
+                  {children}
+                </h6>
+              ),
+              strong: ({ children, className }) => (
+                <strong className={cn("text-base-foreground", className)}>
+                  {children}
+                </strong>
+              ),
+              em: ({ children, className }) => (
+                <em className={cn("text-base-foreground", className)}>
+                  {children}
+                </em>
+              ),
+              code: ({ children, className }) => (
+                <code className={cn("text-base-foreground", className)}>
+                  {children}
+                </code>
+              ),
+              blockquote: ({ children, className }) => (
+                <blockquote className={cn("text-base-foreground", className)}>
+                  {children}
+                </blockquote>
+              ),
+              ul: ({ children, className }) => (
+                <ul className={cn("text-base-foreground", className)}>
+                  {children}
+                </ul>
+              ),
+              ol: ({ children, className }) => (
+                <ol className={cn("text-base-foreground", className)}>
+                  {children}
+                </ol>
+              ),
+              p: ({ children, className }) => (
+                <p className={cn("text-base-foreground", className)}>
+                  {children}
+                </p>
+              ),
+              a: ({ children, href, className }) => (
+                <a
+                  className={cn("text-base-foreground", className)}
+                  href={href}
+                >
+                  {children}
+                </a>
+              ),
+              span: ({ children, className }) => (
+                <span className={cn("text-base-foreground", className)}>
+                  {children}
+                </span>
+              ),
+              div: ({ children, className }) => (
+                <div className={cn("text-base-foreground", className)}>
+                  {children}
+                </div>
+              ),
+            }}
           >
             {content}
           </ReactMarkdown>
         </div>
-      )
+      );
     case Format.Latex:
-      return <Latex>{content}</Latex>
+      return <Latex>{content}</Latex>;
     case Format.Raw:
-      return content
+      return content;
   }
-}
+};
diff --git a/apps/client/src/components/Header.tsx b/apps/client/src/components/Header.tsx
index f3491c0..f826b9a 100644
--- a/apps/client/src/components/Header.tsx
+++ b/apps/client/src/components/Header.tsx
@@ -12,13 +12,13 @@ import { LeftSidebar } from "@/components/LeftSidebar";
 
 const DesktopNav = () => {
   return (
-    <div className="hidden lg:flex items-center justify-between gap-5 lg:gap-0 px-4 py-3">
+    <div className="hidden lg:flex items-center justify-between gap-5 lg:gap-0 px-5 py-3">
       <Link to="/" className="hidden lg:flex">
         <h1>
-          <span className="font-space-grotesk font-bold text-black text-[26px] leading-[25px]">
+          <span className="font-space-grotesk font-bold text-base-logo text-[26px] leading-[25px]">
             PSE
           </span>
-          <span className="font-space-grotesk text-black font-normal text-[26px] leading-[25px] tracking-[-1px]">
+          <span className="font-space-grotesk text-base-logo font-normal text-[26px] leading-[25px] tracking-[-1px]">
             forum
           </span>
         </h1>
@@ -48,7 +48,7 @@ const MobileNav = () => {
       />
       <div
         className={cn(
-          "fixed inset-y-0 p-6 left-0 z-50 w-[320px] bg-white transform transition-transform duration-300 ease-in-out lg:hidden",
+          "fixed inset-y-0 p-6 left-0 z-50 w-[320px] bg-base-background transform transition-transform duration-300 ease-in-out lg:hidden",
           isMenuOpen ? "translate-x-0" : "-translate-x-full",
         )}
       >
@@ -56,10 +56,10 @@ const MobileNav = () => {
           <div className="flex items-center justify-between">
             <Link to="/">
               <h1 className="flex gap-1">
-                <span className="font-space-grotesk font-bold text-black text-xl leading-[20px]">
+                <span className="font-space-grotesk font-bold text-logo-base text-xl leading-[20px]">
                   PSE
                 </span>
-                <span className="font-space-grotesk text-black font-normal text-base leading-[18px] tracking-[-1px] mt-auto">
+                <span className="font-space-grotesk text-logo-base font-normal text-base leading-[18px] tracking-[-1px] mt-auto">
                   forum
                 </span>
               </h1>
@@ -99,7 +99,7 @@ const MobileNav = () => {
 
 export function Header() {
   return (
-    <nav className="bg-white border-b-[1px] border-b-gray sticky top-0 z-50">
+    <nav className="bg-base-background border-b-[1px] border-b-base-border sticky top-0 z-50">
       <DesktopNav />
       <MobileNav />
     </nav>
diff --git a/apps/client/src/components/LeftSidebar.tsx b/apps/client/src/components/LeftSidebar.tsx
index 656604f..592b2ee 100644
--- a/apps/client/src/components/LeftSidebar.tsx
+++ b/apps/client/src/components/LeftSidebar.tsx
@@ -11,6 +11,9 @@ import { Accordion } from "@/components/Accordion";
 import { membershipMocks } from "mocks/membershipMocks";
 import { Avatar } from "@/components/Avatar";
 import { Badge } from "@/components/ui/Badge";
+import { Switch } from "./inputs/Switch";
+import { useGlobalContext } from "@/contexts/GlobalContext";
+import { AuthWrapper } from "./AuthWrapper";
 const renderNavItems = (
   _items: (typeof MAIN_NAV_ITEMS)[keyof typeof MAIN_NAV_ITEMS],
 ) =>
@@ -45,13 +48,13 @@ const NavItem = ({
       to={to}
       key={title}
       className={cn(
-        "text-sm font-inter font-medium leading-5 text-black-secondary cursor-pointer outline-none focus:outline-none focus:ring-0 focus:ring-offset-0",
-        "duration-200 hover:bg-white-light hover:text-black",
+        "text-sm font-inter font-medium leading-5 text-base-muted-foreground cursor-pointer outline-none focus:outline-none focus:ring-0 focus:ring-offset-0",
+        "duration-200 hover:bg-muted hover:text-base-primary",
         "flex items-center gap-2 rounded-md h-9 py-2 w-full p-2",
       )}
     >
       <div className="flex items-center gap-2">
-        <Icon className="text-black text-base" size={16} />
+        <Icon className=" text-base" size={16} />
         <span>{title}</span>
       </div>
       {badge && (
@@ -75,14 +78,13 @@ const SidebarContent = () => {
   return (
     <nav
       aria-label="Sidebar Navigation"
-      className="flex flex-col divide-y-[1px] divide-[#E5E7EB]"
+      className="flex flex-col divide-y-[1px] divide-sidebar-border"
     >
       <div className="space-y-1 py-6">
         <NavItem title="Home" to="/" icon={HomeIcon} />
         {renderStartItems()}
         {auth?.mapSync(renderStartItems)}
       </div>
-
       <Accordion
         className="py-6"
         items={[
@@ -98,8 +100,8 @@ const SidebarContent = () => {
                     params={{ id: `${id}` }}
                   >
                     <Avatar className="!size-[32px] !rounded-lg" src={logo} />
-                    <span className="font-semibold font-inter text-sm text-[#3F3F46] line-clamp-1">
-                      {name}
+                    <span className="font-semibold font-inter text-sm text-sidebar-foreground line-clamp-1">
+                      {name} ss
                     </span>
                   </Link>
                 ))}
@@ -108,6 +110,7 @@ const SidebarContent = () => {
           },
         ]}
       />
+
       {user !== undefined && (
         <div className="space-y-2 py-6">
           <div className="w-full justify-start flex items-center space-x-3 text-sm">
@@ -147,44 +150,52 @@ const LeftSidebar = () => {
   const { data: user } = useQuery(["user.read", auth?.inner?.username], {
     enabled: auth?.isSome(),
   });
+  const { isDarkMode, setIsDarkMode } = useGlobalContext();
 
   return (
-    <aside className="w-[264px] p-6 bg-white-dark hidden flex-col sticky top-[60px] z-[49] lg:flex ">
+    <aside className="w-[264px] p-6 bg-sidebar-background hidden flex-col sticky top-[60px] z-[49] lg:flex ">
       <nav
         aria-label="Sidebar Navigation"
-        className="flex flex-col divide-y-[1px] divide-[#E5E7EB]"
+        className="flex flex-col divide-y-[1px] divide-sidebar-border"
       >
         <div className="space-y-1 py-6">
           <NavItem title="Home" to="/" icon={HomeIcon} />
-          {renderStartItems()}
-          {auth?.mapSync(renderStartItems)}
+          <AuthWrapper>
+            {renderStartItems()}
+            {/* auth?.mapSync(renderStartItems) */}
+          </AuthWrapper>
         </div>
 
-        <Accordion
-          className="py-6"
-          items={[
-            {
-              label: "MY COMMUNITIES",
-              children: (
-                <div className="flex flex-col">
-                  {membershipMocks.map(({ id, name, logo }) => (
-                    <Link
-                      key={id}
-                      to="/communities/$id"
-                      className="flex gap-2 items-center py-2 px-3"
-                      params={{ id: `${id}` }}
-                    >
-                      <Avatar className="!size-[32px] !rounded-lg" src={logo} />
-                      <span className="font-semibold font-inter text-sm text-[#3F3F46] line-clamp-1">
-                        {name}
-                      </span>
-                    </Link>
-                  ))}
-                </div>
-              ),
-            },
-          ]}
-        />
+        <AuthWrapper>
+          <Accordion
+            className="py-6"
+            items={[
+              {
+                label: "MY COMMUNITIES",
+                children: (
+                  <div className="flex flex-col">
+                    {membershipMocks.map(({ id, name, logo }) => (
+                      <Link
+                        key={id}
+                        to="/communities/$id"
+                        className="flex gap-2 items-center py-2 px-3"
+                        params={{ id: `${id}` }}
+                      >
+                        <Avatar
+                          className="!size-[32px] !rounded-lg"
+                          src={logo}
+                        />
+                        <span className="font-semibold font-inter text-sm text-sidebar-foreground line-clamp-1">
+                          {name}
+                        </span>
+                      </Link>
+                    ))}
+                  </div>
+                ),
+              },
+            ]}
+          />
+        </AuthWrapper>
         {user !== undefined && (
           <div className="space-y-2 py-6">
             <div className="w-full justify-start flex items-center space-x-3 text-sm">
diff --git a/apps/client/src/components/MainLayout.tsx b/apps/client/src/components/MainLayout.tsx
index dc83a01..7cd9f10 100644
--- a/apps/client/src/components/MainLayout.tsx
+++ b/apps/client/src/components/MainLayout.tsx
@@ -18,21 +18,20 @@ export const MainLayout = ({
   showLeftSidebar = false,
   showRightSidebar = false,
 }: MainLayoutProps) => {
-  const { isMenuOpen, setIsMenuOpen } = useGlobalContext();
+  const { isMenuOpen, setIsMenuOpen, isDarkMode } = useGlobalContext();
 
   const router = useRouter();
 
   const pathname = router?.latestLocation?.href;  
-  console.log("router", pathname);
 
   useEffect(() => {
     setIsMenuOpen(false);
   }, [pathname]);
 
   return (
-    <div className="h-screen">
+    <div className={cn("h-screen", isDarkMode ? "dark" : "")}>
       {showHeader && <Header />}
-      <main className="bg-white h-[calc(100vh-65px)] flex justify-between overflow-hidden">
+      <main className="bg-base-background h-[calc(100vh-65px)] flex justify-between overflow-hidden">
         {showLeftSidebar && <LeftSidebar />}
         {children && (
           <div
diff --git a/apps/client/src/components/PageContent.tsx b/apps/client/src/components/PageContent.tsx
index f119355..15d4cc7 100644
--- a/apps/client/src/components/PageContent.tsx
+++ b/apps/client/src/components/PageContent.tsx
@@ -28,7 +28,7 @@ export const PageContent = ({
         "h-full": showEmptyState,
       })}
     >
-      {title && <Labels.PageTitle>{title}</Labels.PageTitle>}
+      {title && <Labels.PageTitle className="">{title}</Labels.PageTitle>}
       {children}
       {showEmptyState && emptyState && (
         <EmptyState
diff --git a/apps/client/src/components/Profile.tsx b/apps/client/src/components/Profile.tsx
index 535ac76..06cd5bc 100644
--- a/apps/client/src/components/Profile.tsx
+++ b/apps/client/src/components/Profile.tsx
@@ -2,11 +2,30 @@ import { useAuth } from "@/hooks/useAuth";
 import { Button } from "@/components/ui/Button";
 import { useState } from "react";
 import { LoginModal } from "@/sections/Login/LoginModal";
+import { AuthWrapper } from "./AuthWrapper";
+import { Avatar } from "./Avatar";
+import { useGlobalContext } from "@/contexts/GlobalContext";
 
 export function Profile() {
-  const { auth, setAuth } = useAuth();
+  //const { auth, setAuth } = useAuth();
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
+  const { user } = useGlobalContext();
+  return (
+    <>
+      <LoginModal isOpen={isLoginModalOpen} setIsOpen={setIsLoginModalOpen} />
+      <AuthWrapper
+        fallback={
+          <div className="flex items-center gap-3">
+            <Button onClick={() => setIsLoginModalOpen(true)}>Login</Button>
+          </div>
+        }
+      >
+        <Avatar src={user?.avatar} />
+      </AuthWrapper>
+    </>
+  );
 
+  /*
   return auth.mapOrSync(
     <>
       <div className="flex items-center gap-3">
@@ -22,5 +41,5 @@ export function Profile() {
       <LoginModal isOpen={isLoginModalOpen} setIsOpen={setIsLoginModalOpen} />
     </>,
     ({ username }) => <div>{username}</div>,
-  );
+  );*/
 }
diff --git a/apps/client/src/components/RightSidebar/_Groups.tsx b/apps/client/src/components/RightSidebar/_Groups.tsx
index 673253b..24ac863 100644
--- a/apps/client/src/components/RightSidebar/_Groups.tsx
+++ b/apps/client/src/components/RightSidebar/_Groups.tsx
@@ -14,18 +14,18 @@ export const Groups = () => {
 
 
   return (
-    <Card.Base className="flex flex-col gap-6 bg-white-dark border border-gray" spacing="md">
+    <Card.Base className="flex flex-col gap-6 bg-sidebar-background border border-sidebar-border" spacing="md">
       <Card.Title className="self-start text-xs">EXPLORE COMMUNITIES</Card.Title>
-      <div className="divide-y divide-gray">
+      <div className="divide-y divide-sidebar-border">
         {displayedGroups.map(({ name, id: iid }) => (
           <div key={iid}>
             <div key={iid} className="flex items-center justify-between py-3">
               <div className="flex items-center gap-1">
                 <Avatar />
-                <span className="font-semibold font-inter text-black line-clamp-1">{name}</span>
+                <span className="font-semibold font-inter text-base-primary line-clamp-1">{name}</span>
               </div>
               <Link to={`/group/${iid}` as any}>
-                <Button variant="outline" size="sm">
+                <Button size="sm">
                   Join
                 </Button>
               </Link>
@@ -34,7 +34,7 @@ export const Groups = () => {
         ))}
       </div>
       <button 
-        className="!text-xs text-left"
+        className="!text-xs text-left text-base-muted-foreground"
         onClick={() => setShowAllGroups(!showAllGroups)}
       >
         {showAllGroups ? 'Show less' : 'Show more'}
diff --git a/apps/client/src/components/RightSidebar/_Users.tsx b/apps/client/src/components/RightSidebar/_Users.tsx
index b264714..7cefeb3 100644
--- a/apps/client/src/components/RightSidebar/_Users.tsx
+++ b/apps/client/src/components/RightSidebar/_Users.tsx
@@ -70,7 +70,7 @@ const users = [
 ];
 
 export const Users = () => (
-  <Card.Base className="bg-white-dark border border-gray" rounded="md">
+  <Card.Base className="bg-sidebar-background border border-sidebar-border" rounded="md">
     <Card.Title className="self-start text-xs">ACTIVE USERS</Card.Title>
     <div className="grid grid-cols-4 gap-2 ">
       {users.map(({ userId, username }) => (
diff --git a/apps/client/src/components/cards/Card.tsx b/apps/client/src/components/cards/Card.tsx
index e65d844..2086a74 100644
--- a/apps/client/src/components/cards/Card.tsx
+++ b/apps/client/src/components/cards/Card.tsx
@@ -3,11 +3,12 @@ import { classed } from "@tw-classed/react";
 import { forwardRef } from "react";
 
 const CardBase = classed.div(
-  "flex flex-col border bg-card text-card-foreground border border-[#E4E4E7]",
+  "flex flex-col",
   {
     variants: {
-      background: {
-        default: "bg-[#FAFAFA]",
+      variant: {
+        base: "bg-base-background border border-base-border",
+        secondary: "bg-sidebar-background",
       },
       rounded: {
         none: "rounded-none",
@@ -22,16 +23,17 @@ const CardBase = classed.div(
         6: "gap-6",
         4: "gap-4",
         "2.5": "gap-[10px]",
+        1: "gap-1",
       },
       withHover: {  
-        true: "hover:bg-white-light duration-200",
+        true: "hover:bg-card-hover duration-200",
         false: "",
       },
     },
     defaultVariants: {
       rounded: "sm",
       spacing: "md",
-      background: "default",
+      variant: "base",
       gap: "6",
       withHover: false,
     },
@@ -57,7 +59,7 @@ const CardTitle = forwardRef<
   <div
     ref={ref}
     className={cn(
-      "text-xl font-semibold leading-none tracking-tight text-black",
+      "text-xl font-semibold leading-none tracking-tight text-base-foreground",
       className,
     )}
     {...props}
@@ -71,7 +73,7 @@ const CardDescription = forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-sm text-base-muted-foreground", className)}
     {...props}
   />
 ));
diff --git a/apps/client/src/components/inputs/FileUploader.tsx b/apps/client/src/components/inputs/FileUploader.tsx
index 724fe85..9ea5232 100644
--- a/apps/client/src/components/inputs/FileUploader.tsx
+++ b/apps/client/src/components/inputs/FileUploader.tsx
@@ -17,7 +17,6 @@ export const FileUploader = () => {
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    // Clean up the object URL when component unmounts or when a new file is selected
     return () => {
       if (previewUrl) {
         URL.revokeObjectURL(previewUrl);
@@ -30,12 +29,10 @@ export const FileUploader = () => {
       const file = e.target.files[0];
       setSelectedFile(file);
 
-      // Clean up previous preview URL if it exists
       if (previewUrl) {
         URL.revokeObjectURL(previewUrl);
       }
 
-      // Create a preview URL for image files
       if (file.type.startsWith("image/")) {
         const url = URL.createObjectURL(file);
         setPreviewUrl(url);
@@ -51,7 +48,6 @@ export const FileUploader = () => {
       return;
     }
 
-    // Here you would typically handle the file upload to your server
     console.log("Uploading file:", selectedFile);
 
     // Example implementation:
@@ -69,7 +65,6 @@ export const FileUploader = () => {
 
   return (
     <div className="flex items-center gap-4">
-      {/* Circular upload area with image preview */}
       <ImagePreview onClick={handleCircleClick}>
         {previewUrl ? (
           <img
@@ -96,8 +91,8 @@ export const FileUploader = () => {
             htmlFor="file-upload"
             className="flex items-center w-full px-3 py-1 text-sm rounded-md border border-[#E4E4E7] cursor-pointer gap-2 lg:min-w-[370px]"
           >
-            <span className="font-medium text-black">Choose file</span>
-            <span className="text-black font-normal">
+            <span className="font-medium text-base-foreground">Choose file</span>
+            <span className="text-base-foreground font-normal">
               {selectedFile ? selectedFile.name : "No file chosen"}
             </span>
           </label>
@@ -107,7 +102,6 @@ export const FileUploader = () => {
           <Button icon={Upload} onClick={handleUpload}>
             Upload
           </Button>
-
         </div>
       </div>
     </div>
diff --git a/apps/client/src/components/inputs/Input.tsx b/apps/client/src/components/inputs/Input.tsx
index b605664..5f84d77 100644
--- a/apps/client/src/components/inputs/Input.tsx
+++ b/apps/client/src/components/inputs/Input.tsx
@@ -1,69 +1,124 @@
-import { classed, VariantProps } from "@tw-classed/react";
+import { classed } from "@tw-classed/react";
 import { LucideIcon } from "lucide-react";
 import { forwardRef, ReactNode } from "react";
 import { cn } from "@/lib/utils";
-
+import { Info as InfoIcon } from "lucide-react";
+import { FieldApi } from "@tanstack/react-form";
 export interface InputWrapperProps {
+  header?: ReactNode;
   label?: string;
   description?: string;
   children?: ReactNode;
   containerClassName?: string;
+  error?: string;
+  field?: FieldApi<any, any, any, any>;
+  showCounter?: boolean;
+  value?: string;
+  maxLength?: number;
+}
+
+interface InputProps
+  extends React.ComponentProps<typeof InputBase>,
+    InputWrapperProps {
+  icon?: LucideIcon;
+  error?: string;
+  field?: FieldApi<any, any, any, any>;
+  showCounter?: boolean;
+  value?: string;
+  maxLength?: number;
 }
 
 export const InputWrapper = ({
+  header,
   label,
   description,
   children,
   containerClassName,
+  error,
+  showCounter = false,
+  value = "",
+  maxLength,
 }: InputWrapperProps) => {
+  const hasError = !!error;
   return (
-    <div className={cn("flex flex-col gap-2 relative", containerClassName)}>
+    <div className={cn("relative flex flex-col gap-2", containerClassName)}>
+      {header && <div className="pb-1">{header}</div>}
       {label && (
-        <span className="text-sm font-medium text-black font-inter">
+        <span className="text-sm font-medium text-base-foreground font-inter">
           {label}
         </span>
       )}
       {children}
-      {description && (
-        <span className="text-sm text-black-secondary font-inter">
-          {description}
-        </span>
+      {!hasError ? (
+        <div className="flex items-center justify-between">
+          <span className="text-sm text-base-muted-foreground font-inter">
+            {description}
+          </span>
+          {showCounter && (
+            <span className="text-sm text-base-muted-foreground font-inter">
+              {(value as string)?.length ?? 0} / {maxLength}
+            </span>
+          )}
+        </div>
+      ) : (
+        <div className="flex gap-1 items-center">
+          <InfoIcon className="size-[14px] text-error" />
+          <span className="text-sm text-error font-inter">{error}</span>
+        </div>
       )}
     </div>
   );
 };
 
 export const InputBase = classed.input(
-  "flex min-h-9 w-full rounded-md border border-[#E4E4E7] bg-transparent py-1 text-sm shadow-input transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-black-secondary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+  "flex min-h-9 w-full rounded-md text-base-foreground bg-base-background py-1 text-sm shadow-input transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-base-muted-foreground focus-visible:outline-none  disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
   {
     variants: {
       withIcon: {
         true: "pl-8 pr-3",
         false: "px-3",
       },
+      withError: {
+        true: "border border-error",
+        false:
+          "border border-base-input focus-visible:ring-1 focus-visible:ring-ring",
+      },
     },
   },
 );
 
-interface InputProps extends VariantProps<typeof InputBase>, InputWrapperProps {
-  icon?: LucideIcon;
-  className?: string;
-  placeholder?: string;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  maxLength?: number;
-  value?: string;
-}
-
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ icon, label, description, containerClassName, className, ...props }, ref) => {
+  (
+    {
+      icon,
+      label,
+      description,
+      containerClassName,
+      className,
+      field,
+      showCounter = false,
+      maxLength,
+      ...props
+    },
+    ref,
+  ) => {
     const Icon = icon;
+
+    const error =
+      field?.state.meta.isTouched && field?.state.meta.errors.length
+        ? field?.state.meta.errors.join(", ")
+        : "";
+
     return (
       <InputWrapper
         label={label}
         description={description}
         containerClassName={containerClassName}
+        error={error}
+        showCounter={showCounter}
+        maxLength={maxLength}
       >
-        <InputBase ref={ref} {...props} withIcon={!!icon} />
+        <InputBase ref={ref} {...props} withIcon={!!icon} withError={!!error} />
         {Icon && (
           <Icon className="absolute left-2 top-2.5 h-4 w-4 text-black-secondary" />
         )}
diff --git a/apps/client/src/components/inputs/Select.tsx b/apps/client/src/components/inputs/Select.tsx
index 9e63c3c..09f93d4 100644
--- a/apps/client/src/components/inputs/Select.tsx
+++ b/apps/client/src/components/inputs/Select.tsx
@@ -1,21 +1,38 @@
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { ComponentPropsWithoutRef, ElementRef, forwardRef, ReactNode } from "react";
+import {
+  ComponentPropsWithoutRef,
+  ElementRef,
+  forwardRef,
+  ReactNode,
+} from "react";
+import { FieldApi } from "@tanstack/react-form";
 
 const SelectBase = SelectPrimitive.Root;
 
-const SelectValue = SelectPrimitive.Value;
+const SelectValue = forwardRef<
+  ElementRef<typeof SelectPrimitive.Value>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Value>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Value ref={ref} className={cn(className)} {...props} />
+));
+SelectValue.displayName = SelectPrimitive.Value.displayName;
 
 const SelectTrigger = forwardRef<
   ElementRef<typeof SelectPrimitive.Trigger>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+    field?: FieldApi<any, any, any, any>;
+  }
+>(({ className, children, field, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 font-inter text-base-foreground font-normal text-sm w-full items-center justify-between rounded-md border bg-base-background px-3 py-2 ring-offset-background placeholder:text-base-muted-foreground focus:outline-none focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
+      field?.state.meta.isTouched && field?.state.meta.errors.length
+        ? "border-error"
+        : "border-base-input",
     )}
     {...props}
   >
@@ -113,7 +130,7 @@ const SelectItem = forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex gap-2 w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
@@ -145,28 +162,47 @@ const Select = ({
   label,
   items,
   children = null,
+  defaultValue,
+  value,
+  field,
+  header = null,
+  forcePlaceholder = false,
   ...props
 }: ComponentPropsWithoutRef<typeof SelectBase> & {
+  header?: ReactNode;
   label: string;
   children?: ReactNode;
   items: {
     value?: any;
-    label: string;
+    label: ReactNode;
   }[];
-}) => (
-  <SelectBase {...props}>
-    <SelectTrigger>
-      <SelectValue placeholder={label} />
-    </SelectTrigger>
-    <SelectContent>
-      {items.map((item) => (
-        <SelectItem key={item.value} value={item.value}>
-          {item.label}
-        </SelectItem>
-      ))}
-    </SelectContent>
-  </SelectBase>
-);
+  field?: FieldApi<any, any, any, any>;
+  forcePlaceholder?: boolean;
+}) => {
+  const isEmpty = !("value" in props ? value : defaultValue);
+
+  return (
+    <div className="flex flex-col gap-3">
+      {header}
+      <SelectBase {...props} defaultValue={defaultValue} value={value}>
+        <SelectTrigger field={field}>
+          {forcePlaceholder ? (
+            <SelectValue placeholder={label}>{label}</SelectValue>
+          ) : (
+            <SelectValue placeholder={isEmpty ? label : undefined} />
+          )}
+        </SelectTrigger>
+        <SelectContent>
+          {items.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </SelectBase>
+    </div>
+  );
+};
 
 Select.displayName = "Select";
 Select.Item = SelectItem;
diff --git a/apps/client/src/components/inputs/Switch.tsx b/apps/client/src/components/inputs/Switch.tsx
new file mode 100644
index 0000000..7d91368
--- /dev/null
+++ b/apps/client/src/components/inputs/Switch.tsx
@@ -0,0 +1,108 @@
+import { classed } from "@tw-classed/react";
+import { forwardRef, ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import { Info as InfoIcon } from "lucide-react";
+import { FieldApi } from "@tanstack/react-form";
+import { Tooltip } from "@/components/ui/Tooltip";
+
+export interface SwitchWrapperProps {
+  header?: ReactNode;
+  label?: string;
+  description?: string;
+  children?: ReactNode;
+  containerClassName?: string;
+  error?: string;
+  field?: FieldApi<any, any, any, any>;
+  tooltip?: string;
+}
+
+
+const SwitchWrapper = ({
+  header,
+  label,
+  description,
+  children,
+  containerClassName,
+  error,
+  tooltip,
+}: SwitchWrapperProps) => {
+  const hasError = !!error;
+
+  return (
+    <div className={cn("relative flex flex-col gap-1", containerClassName)}>
+      {header && <div>{header}</div>}
+
+      <div className="flex items-center gap-5 justify-between">
+        <div className="flex items-center gap-2">
+          {tooltip && (
+            <Tooltip content={tooltip}>
+              <InfoIcon className="h-4 w-4" />
+            </Tooltip>
+          )}
+          {label && (
+            <span className="text-base font-medium text-base-foreground font-inter">
+              {label}
+            </span>
+          )}
+        </div>
+        {children}
+      </div>
+
+      {!hasError ? (
+        description && (
+          <span className="text-xs text-base-muted-foreground font-inter italic text-right">
+            {description}
+          </span>
+        )
+      ) : (
+        <div className="flex gap-1 items-center">
+          <InfoIcon className="size-[14PX] text-error" />
+          <span className="text-sm text-error font-inter">{error}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const SwitchBase = classed.input(
+  "appearance-none",
+  "relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors",
+  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+  "bg-base-input",
+  "[&:checked]:bg-base-primary",
+  "after:absolute after:top-0.5 after:left-0.5 after:h-4 after:w-4 after:rounded-full after:bg-white after:shadow-md after:transition-transform after:duration-200 [&:checked]:after:translate-x-[16px]",
+
+);
+
+
+interface SwitchProps
+  extends Omit<React.ComponentProps<typeof SwitchBase>, "type">,
+    SwitchWrapperProps {
+  field?: FieldApi<any, any, any, any>;
+  tooltip?: string;
+}
+
+const Switch = forwardRef<HTMLInputElement, SwitchProps>(
+  ({ label, description, containerClassName, field, tooltip, ...props }, ref) => {
+    const error =
+      field?.state.meta.isTouched && field?.state.meta.errors.length
+        ? field.state.meta.errors.join(", ")
+        : "";
+
+    return (
+      <SwitchWrapper
+        label={label}
+        description={description}
+        containerClassName={containerClassName}
+        error={error}
+        tooltip={tooltip}
+      >
+        <SwitchBase ref={ref} type="checkbox" {...props} />
+      </SwitchWrapper>
+    );
+  }
+);
+
+Switch.displayName = "Switch";
+
+export { Switch };
\ No newline at end of file
diff --git a/apps/client/src/components/inputs/Textarea.tsx b/apps/client/src/components/inputs/Textarea.tsx
index 53b7e7e..85dd985 100644
--- a/apps/client/src/components/inputs/Textarea.tsx
+++ b/apps/client/src/components/inputs/Textarea.tsx
@@ -1,6 +1,9 @@
-
 import { classed } from "@tw-classed/react";
-import { InputBase, InputWrapper, InputWrapperProps } from "@/components/inputs/Input";
+import {
+  InputBase,
+  InputWrapper,
+  InputWrapperProps,
+} from "@/components/inputs/Input";
 import { ComponentPropsWithoutRef, forwardRef } from "react";
 
 const TextareaBase = classed.textarea("!py-2 !px-3", InputBase);
@@ -8,10 +11,19 @@ const TextareaBase = classed.textarea("!py-2 !px-3", InputBase);
 const Textarea = forwardRef<
   HTMLTextAreaElement,
   ComponentPropsWithoutRef<"textarea"> & InputWrapperProps
->(({ label, containerClassName, rows = 4, ...props }, ref) => {
+>(({ label, containerClassName, rows = 4, field, ...props }, ref) => {
+  const error =
+    field?.state.meta.isTouched && field?.state.meta.errors.length
+      ? field?.state.meta.errors.join(", ")
+      : "";
+
   return (
-    <InputWrapper label={label} containerClassName={containerClassName}>
-      <TextareaBase ref={ref} {...props} rows={rows} />
+    <InputWrapper
+      label={label}
+      containerClassName={containerClassName}
+      error={error}
+    >
+      <TextareaBase ref={ref} {...props} rows={rows} withError={!!error} />
     </InputWrapper>
   );
 });
diff --git a/apps/client/src/components/ui/Badge.tsx b/apps/client/src/components/ui/Badge.tsx
index b834100..3ac10a6 100644
--- a/apps/client/src/components/ui/Badge.tsx
+++ b/apps/client/src/components/ui/Badge.tsx
@@ -5,8 +5,8 @@ const BadgeBase = classed.div(
   {
     variants: {
       variant: {
-        black: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80 group-hover:bg-primary/80",
-        white: "border-transparent bg-white-light text-secondary-foreground group-hover:bg-[#71717A] group-hover:text-white",
+        primary: "border-transparent bg-base-primary text-primary-foreground hover:bg-base-primary/80 group-hover:bg-base-primary/80",
+        secondary: "border-transparent bg-base-secondary text-base-secondary-foreground hover:text-base-primary-foreground hover:bg-base-muted-foreground group-hover:bg-base-muted-foreground group-hover:text-base-primary-foreground",
         destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
         outline: "text-foreground",
       },
@@ -16,7 +16,7 @@ const BadgeBase = classed.div(
       },
     },
     defaultVariants: {
-      variant: "black",
+      variant: "secondary",
       rounded: "sm",
     },
   },
diff --git a/apps/client/src/components/ui/Banner.tsx b/apps/client/src/components/ui/Banner.tsx
index 6ffa6e9..c52b0b3 100644
--- a/apps/client/src/components/ui/Banner.tsx
+++ b/apps/client/src/components/ui/Banner.tsx
@@ -4,21 +4,26 @@ const BannerBase = classed.div(
   "rounded-md p-4",
 );
 
-const BannerLabel = classed.span("font-inter font-normal text-xs", {
+const BannerLabel = classed.span("font-inter font-normal ", {
   variants: {
     variant: {
-      error: "text-[#DC2626] opacity-90",
+      error: "text-banner-error opacity-90",
     },
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+    }
   },
   defaultVariants: {
     variant: "error",
+    size: "xs",
   },
 });
 
 const BannerComponent = classed(BannerBase, {
   variants: {
     variant: {
-      error: "bg-[#FEE2E2] border border-[#DC2626]",
+      error: "bg-banner-error-foreground border border-banner-error",
     },
   },
   defaultVariants: {
diff --git a/apps/client/src/components/ui/Button.tsx b/apps/client/src/components/ui/Button.tsx
index 039ec65..906a7db 100644
--- a/apps/client/src/components/ui/Button.tsx
+++ b/apps/client/src/components/ui/Button.tsx
@@ -1,6 +1,8 @@
 import { classed, VariantProps } from "@tw-classed/react";
+import { cn } from "@/lib/utils";
 import { LucideIcon } from "lucide-react";
 import { ButtonHTMLAttributes, forwardRef } from "react";
+import { LoaderCircle as Loader } from "lucide-react";
 
 const ButtonComponent = classed.button(
   "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap font-inter rounded-md text-sm font-normal ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -8,16 +10,18 @@ const ButtonComponent = classed.button(
   {
     variants: {
       variant: {
-        black: "bg-primary text-primary-foreground hover:bg-primary/90",
+        black:
+          "bg-base-primary text-base-primary-foreground hover:bg-base-primary/90",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-base-background hover:bg-accent text-base-foreground hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-base-secondary text-secondary-foreground hover:bg-base-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
-        error: "bg-[#FEE2E2] text-[#DC2626] hover:bg-[#FEE2E2] border border-[#DC2626]",
+        error:
+          "bg-[#FEE2E2] text-[#DC2626] hover:bg-[#FEE2E2] border border-[#DC2626]",
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -39,15 +43,32 @@ export interface ButtonProps
   asChild?: boolean;
   icon?: LucideIcon;
   className?: string;
+  loading?: boolean;
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, asChild = false, icon, ...props }, ref) => {
+  (
+    {
+      className,
+      asChild = false,
+      icon,
+      loading = false,
+      disabled = false,
+      ...props
+    },
+    ref,
+  ) => {
     const Icon = icon;
     return (
-      <ButtonComponent ref={ref} {...props}>
+      <ButtonComponent
+        ref={ref}
+        {...props}
+        className={cn(className)}
+        disabled={loading || disabled}
+      >
         {Icon && <Icon className="size-4" />}
         {props.children}
+        {loading && <Loader className="size-4 animate-spin" />}
       </ButtonComponent>
     );
   },
diff --git a/apps/client/src/components/ui/Checkbox.tsx b/apps/client/src/components/ui/Checkbox.tsx
index 7a15889..d4fb860 100644
--- a/apps/client/src/components/ui/Checkbox.tsx
+++ b/apps/client/src/components/ui/Checkbox.tsx
@@ -11,7 +11,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-base-primary data-[state=checked]:text-primary-foreground",
       className,
     )}
     {...props}
diff --git a/apps/client/src/components/ui/EmptyState.tsx b/apps/client/src/components/ui/EmptyState.tsx
index 2672591..e8221d6 100644
--- a/apps/client/src/components/ui/EmptyState.tsx
+++ b/apps/client/src/components/ui/EmptyState.tsx
@@ -14,10 +14,10 @@ const EmptyState: React.FC<EmptyStateProps> = ({
   const Icon = icon;
   return (
     <div className="flex flex-col items-center justify-center text-center gap-2.5 max-w-[310px] m-auto">
-      {Icon && <Icon className="size-6 text-black" />}
-      <h2 className="text-sm font-medium text-black font-inter">{title}</h2>
+      {Icon && <Icon className="size-6 text-base-primary" />}
+      <h2 className="text-sm font-medium text-base-primary font-inter">{title}</h2>
       {description && (
-        <span className="text-gray-500 text-xs text-black-secondary font-inter">{description}</span>
+        <span className="text-xs text-base-muted-foreground font-inter">{description}</span>
       )}
     </div>
   );
diff --git a/apps/client/src/components/ui/Labels.tsx b/apps/client/src/components/ui/Labels.tsx
index d5844b3..393d8e2 100644
--- a/apps/client/src/components/ui/Labels.tsx
+++ b/apps/client/src/components/ui/Labels.tsx
@@ -1,7 +1,7 @@
 import { classed } from "@tw-classed/react";
 
 const PageTitle = classed.h1(
-  "font-inter text-[24px] lg:text-[30px] lg:leading-[36px] text-black font-bold",
+  "font-inter text-[24px] lg:text-[30px] lg:leading-[36px] text-foreground font-bold",
 );
 
 
diff --git a/apps/client/src/components/ui/Modal.tsx b/apps/client/src/components/ui/Modal.tsx
index 68b6db3..fbb8c00 100644
--- a/apps/client/src/components/ui/Modal.tsx
+++ b/apps/client/src/components/ui/Modal.tsx
@@ -131,11 +131,11 @@ export function Modal({
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
       <div
         ref={modalRef}
-        className={`bg-white rounded-lg shadow-lg max-w-md w-full max-h-[90vh] overflow-auto ${className}`}
+        className={`flex flex-col gap-6 bg-white rounded-lg shadow-lg max-w-md w-full max-h-[90vh] overflow-auto p-6 ${className}`}
       >
         {title && (
-          <div className="flex items-center justify-between p-4 border-b">
-            <h2 className="text-lg font-medium">{title}</h2>
+          <div className="flex items-center justify-between">
+            <h2 className="text-lg font-bold text-base-foreground">{title}</h2>
             <button
               onClick={() => setIsOpen(false)}
               className="rounded-full p-1 hover:bg-gray-100"
@@ -145,7 +145,7 @@ export function Modal({
             </button>
           </div>
         )}
-        <div className="p-4">{children}</div>
+        <div className="">{children}</div>
       </div>
     </div>
   );
diff --git a/apps/client/src/components/ui/Tabs.tsx b/apps/client/src/components/ui/Tabs.tsx
index e09fe2b..4320811 100644
--- a/apps/client/src/components/ui/Tabs.tsx
+++ b/apps/client/src/components/ui/Tabs.tsx
@@ -6,7 +6,7 @@ import { ReactNode } from "react";
 
 const TabsList = classed(
   TabsPrimitive.List,
-  "inline-flex h-10 items-center justify-center rounded-lg bg-white-light p-1 text-muted-foreground",
+  "inline-flex min-h-10 items-center justify-center rounded-lg bg-base-muted p-1 text-base-muted-foreground",
   {
     variants: {
       size: {
@@ -21,8 +21,8 @@ const TabsList = classed(
 const TabsTrigger = classed(
   TabsPrimitive.Trigger,
   "inline-flex items-center text-black font-inter justify-center whitespace-nowrap rounded-lg px-3 py-1 ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  "data-[state=active]:bg-white data-[state=active]:text-black data-[state=active]:shadow-tabs",
-  "data-[state=inactive]:text-black-secondary data-[state=active]:shadow-none",
+  "data-[state=active]:bg-base-background data-[state=active]:text-base-foreground data-[state=active]:shadow-tabs",
+  "data-[state=inactive]:text-base-muted-foreground data-[state=active]:shadow-none",
   {
     variants: {
       bold: {
@@ -59,6 +59,7 @@ interface TabsProps extends TabsPrimitive.TabsProps {
     content?: ReactNode;
     onClick?: () => void;
   }[];
+  minWidth?: number;
 }
 
 const Tabs = ({
@@ -66,6 +67,7 @@ const Tabs = ({
   defaultValue,
   items = [],
   className,
+  minWidth,
   ...props
 }: TabsProps) => (
   <TabsPrimitive.Root defaultValue={defaultValue} {...props}>
@@ -81,6 +83,9 @@ const Tabs = ({
           value={item.id}
           size={size as any}
           onClick={item?.onClick}
+          style={{
+            minWidth: minWidth ? `${minWidth}px` : undefined,
+          }}
         >
           {item.label}
         </TabsTrigger>
diff --git a/apps/client/src/components/ui/Tag.tsx b/apps/client/src/components/ui/Tag.tsx
new file mode 100644
index 0000000..0ed9f0a
--- /dev/null
+++ b/apps/client/src/components/ui/Tag.tsx
@@ -0,0 +1,47 @@
+import { classed } from "@tw-classed/react";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Tooltip } from "@/components/ui/Tooltip";
+
+const TagBase = classed.div(
+  "flex items-center border text-sm rounded-md leading-[16px] duration-200 font-inter font-medium focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        primary: "border-base-input bg-base-background text-base-foreground",
+      },
+      size: {
+        sm: "py-1 px-[6px] gap-1",
+        md: "px-2.5 py-2 gap-2",
+      },
+      cursor: {
+        pointer: "cursor-pointer",
+        default: "cursor-default",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      cursor: "pointer",
+    },
+  },
+);
+export interface TagProps extends React.ComponentProps<typeof TagBase> {
+  onRemove?: () => void;
+  tooltip?: string;
+}
+
+const Tag = ({ className, onRemove, tooltip = "", ...props }: TagProps) => {
+  return (
+    <Tooltip content={tooltip}>
+      <TagBase {...props} className={cn(className)}>
+        {props.children}
+        {onRemove && (
+          <X className="size-4 opacity-50 cursor-pointer" onClick={onRemove} />
+        )}
+      </TagBase>
+    </Tooltip>
+  );
+};
+Tag.displayName = "Tag";
+export { Tag };
diff --git a/apps/client/src/components/ui/TimeSince.tsx b/apps/client/src/components/ui/TimeSince.tsx
index 70a0711..18df185 100644
--- a/apps/client/src/components/ui/TimeSince.tsx
+++ b/apps/client/src/components/ui/TimeSince.tsx
@@ -4,16 +4,17 @@ import { classed } from "@tw-classed/react";
 import { Tooltip } from "@/components/ui/Tooltip";
 import { cn } from "@/lib/utils";
 import { TooltipTrigger } from "@radix-ui/react-tooltip";
+
 type TimeSinceProps = {
   isoDateTime: string
   className?: string
 }
 
 const TimeSinceBase = classed.span(
-  "italic leading-[10px] text-[10px] font-inter text-black-secondary",
+  "italic leading-[10px] text-[10px] font-inter text-base-muted-foreground",
 );
 
-export function TimeSince({ isoDateTime, className }: TimeSinceProps) {
+export const TimeSince = ({ isoDateTime, className }: TimeSinceProps) => {
   const timeSince = useMemo(() => {
     // TODO Server should return a more standardized (ISO 8601) date/time string
     const iso8601 = `${isoDateTime.substring(0, 10)}T${isoDateTime.substring(11).replace(" ", "")}`
diff --git a/apps/client/src/components/ui/Tooltip.tsx b/apps/client/src/components/ui/Tooltip.tsx
index 7c412f4..1b92f4a 100644
--- a/apps/client/src/components/ui/Tooltip.tsx
+++ b/apps/client/src/components/ui/Tooltip.tsx
@@ -1,14 +1,13 @@
 "use client";
 
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { forwardRef, ReactNode } from 'react';
+import { forwardRef, ReactNode } from "react";
 
 import { classed } from "@tw-classed/react";
 
-
 const TooltipBase = classed(
   TooltipPrimitive.Content,
-  "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+  "z-50 overflow-hidden rounded-md bg-base-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 );
 
 const TooltipContent = forwardRef<
@@ -27,12 +26,13 @@ interface TooltipProps {
 }
 
 export const Tooltip = ({ children, content }: TooltipProps) => {
+  if (content?.length === 0) {
+    return children;
+  }
   return (
     <TooltipPrimitive.Provider>
       <TooltipPrimitive.Root>
-        <TooltipPrimitive.Trigger asChild>
-          {children}
-        </TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
         <TooltipPrimitive.Portal>
           <TooltipPrimitive.Content
             className="bg-black text-white text-sm px-2 py-1 rounded"
@@ -45,5 +45,4 @@ export const Tooltip = ({ children, content }: TooltipProps) => {
       </TooltipPrimitive.Root>
     </TooltipPrimitive.Provider>
   );
-}
-
+};
diff --git a/apps/client/src/contexts/GlobalContext.tsx b/apps/client/src/contexts/GlobalContext.tsx
index 3b05c02..492f5fc 100644
--- a/apps/client/src/contexts/GlobalContext.tsx
+++ b/apps/client/src/contexts/GlobalContext.tsx
@@ -4,16 +4,33 @@ interface GlobalContextType {
   isMenuOpen: boolean;
   setIsMenuOpen: (value: boolean) => void;
   children?: ReactNode;
+  isDarkMode: boolean;
+  setIsDarkMode: (value: boolean) => void;
+  user?: any;
+  isLoggedIn: boolean;
+  setIsLoggedIn: (value: boolean) => void;
 }
 
 const GlobalContext = createContext<GlobalContextType | undefined>(undefined);
 
 export function GlobalProvider({ children }: { children: ReactNode }) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(false);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const user = {
+    name: "John Doe",
+    username: "john_doe",
+    avatar: "https://pse.dev/logos/pse-logo-bg.svg",
+  }
 
   const value = {
     isMenuOpen,
     setIsMenuOpen,
+    isDarkMode,
+    setIsDarkMode,
+    user,
+    isLoggedIn,
+    setIsLoggedIn,
   };
 
   return (
diff --git a/apps/client/src/hooks/useAuth.ts b/apps/client/src/hooks/useAuth.ts
index 40bda6a..935da71 100644
--- a/apps/client/src/hooks/useAuth.ts
+++ b/apps/client/src/hooks/useAuth.ts
@@ -3,6 +3,8 @@ import { useAtom } from "jotai"
 import { RESET } from "jotai/utils"
 import { useCallback, useMemo } from "react"
 import { authAtom, type AuthData } from "@/state/atoms"
+import { useMutation } from "@tanstack/react-query"
+import { useGlobalContext } from "@/contexts/GlobalContext"
 
 export function useAuth() {
   const [auth, setAuthImpl] = useAtom(authAtom)
@@ -25,3 +27,19 @@ export function useAuth() {
     [auth, resetAuth, setAuth],
   )
 }
+
+export function useMockAuth({ onSuccess }: { onSuccess?: () => void } = {}) {
+  const { setIsLoggedIn } = useGlobalContext()
+
+  return useMutation({
+    mutationFn: () => {
+      return new Promise<void>((resolve) => {
+        setTimeout(() => {
+          setIsLoggedIn(true)
+          resolve()
+          onSuccess?.()
+        }, 1000)
+      })
+    },
+  })
+}
diff --git a/apps/client/src/hooks/usePosts.ts b/apps/client/src/hooks/usePosts.ts
index 5c3c73c..4044932 100644
--- a/apps/client/src/hooks/usePosts.ts
+++ b/apps/client/src/hooks/usePosts.ts
@@ -1,15 +1,80 @@
-import { useQuery } from "@tanstack/react-query"
+import { useMutation, useQuery } from "@tanstack/react-query"
 import { postMocks } from "mocks/postMocks"
+import { useStorage } from "./useStorage"
+import { LOCAL_STORAGE_KEYS } from "@/lib/config"
 
 export const useGetPostById = (postId: number) => {
   return useQuery({
     queryKey: ["post.read", postId],
     queryFn: () => {
-        const postById = postMocks.find((post) => post?.id === postId)
-        if (!postById) {
-            throw new Error("Post not found")
-        }
-        return postById
+      const postById = postMocks.find((post) => post?.id === postId)
+      if (!postById) {
+        throw new Error("Post not found")
+      }
+      return postById
+    },
+  })
+}
+
+interface PostDraft {
+  id: string
+  title?: string
+  content?: string
+  communityId?: string
+  createdAt: number
+}
+
+export const useCreateDraftMutation = () => {
+  const { getItem, setItem } = useStorage<PostDraft[]>(LOCAL_STORAGE_KEYS.POST_DRAFT)
+
+  return useMutation({
+    mutationFn: (draft: Omit<PostDraft, 'id' | 'createdAt'>): any => {
+      const drafts = getItem() || []
+      const newDraft = {
+        ...draft,
+        id: crypto.randomUUID(),
+        createdAt: Date.now()
+      }
+      setItem([...drafts, newDraft])
+      return newDraft
+    },
+  })
+}
+
+export const useGetDrafts = () => {
+  const { getItem } = useStorage<PostDraft[]>(LOCAL_STORAGE_KEYS.POST_DRAFT)
+
+  return useQuery({
+    queryKey: ["post.drafts"],
+    queryFn: () => {
+      const drafts = getItem() || []
+      return drafts
+    },
+  })
+}
+
+export const useRemoveDraft = (): any => {
+  const { getItem, setItem } = useStorage<PostDraft[]>(LOCAL_STORAGE_KEYS.POST_DRAFT)
+
+  return useMutation({
+    mutationFn: (draftId: string): any => {
+      const drafts = getItem() || []
+      const filteredDrafts = drafts.filter(draft => draft.id !== draftId)
+      return setItem(filteredDrafts)
+    },
+  })
+}
+
+export const useUpdateDraft = () => {
+  const { getItem, setItem } = useStorage<PostDraft[]>(LOCAL_STORAGE_KEYS.POST_DRAFT)
+
+  return useMutation({
+    mutationFn: (updatedDraft: PostDraft): any => {
+      const drafts = getItem() || []
+      const updatedDrafts = drafts.map(draft => 
+        draft.id === updatedDraft.id ? updatedDraft : draft
+      )
+      return setItem(updatedDrafts)
     },
   })
 }
diff --git a/apps/client/src/hooks/useStorage.ts b/apps/client/src/hooks/useStorage.ts
new file mode 100644
index 0000000..911eef9
--- /dev/null
+++ b/apps/client/src/hooks/useStorage.ts
@@ -0,0 +1,40 @@
+import { LOCAL_STORAGE_KEYS } from "@/lib/config"
+
+export const useStorage = <T>(key: string) => {
+  const STORAGE_KEY = `${LOCAL_STORAGE_KEYS.APP_ID}-${key}`
+  const setItem = (value: T) => {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(value))
+      return true
+    } catch (error) {
+      console.error("Error saving to localStorage:", error)
+      return false
+    }
+  }
+
+  const getItem = (): T | null => {
+    try {
+      const item = localStorage.getItem(STORAGE_KEY)
+      return item ? JSON.parse(item) : null
+    } catch (error) {
+      console.error("Error reading from localStorage:", error)
+      return null
+    }
+  }
+
+  const removeItem = () => {
+    try {
+      localStorage.removeItem(STORAGE_KEY)
+      return true
+    } catch (error) {
+      console.error("Error removing from localStorage:", error)
+      return false
+    }
+  }
+
+  return {
+    setItem,
+    getItem,
+    removeItem,
+  }
+}
diff --git a/apps/client/src/index.css b/apps/client/src/index.css
index fe26355..73c080c 100644
--- a/apps/client/src/index.css
+++ b/apps/client/src/index.css
@@ -2,7 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
 .inter-font {
   font-family: "Inter", serif;
   font-optical-sizing: auto;
@@ -17,62 +16,91 @@
   font-style: normal;
 }
 
-html {
+html, body {
   text-rendering: geometricPrecision !important;
+  @apply font-inter;
 }
+
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
-    --radius: 0.5rem;
-    --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%;
+    --logo-base: #000;
+    --accent: #f4f4f5;
+    --accent-foreground: #18181b;
+    --background: #ffffff;
+    --border: #e4e4e7;
+    --card: #ffffff;
+    --card-hover: #f4f4f5;
+    --card-foreground: #18181b;
+    --destructive: #dc2626;
+    --destructive-foreground: #fef2f2;
+    --error: #DC2626;
+    --foreground: #18181b;
+    --link: #0EA5E9;
+    --input: #e4e4e7;
+    --muted: #f4f4f5;
+    --muted-foreground: #71717a;
+    --popover: #ffffff;
+    --popover-foreground: #18181b;
+    --primary: #18181b;
+    --primary-foreground: #f4f4f5;
+    --ring: #18181b;
+    --ring-offset: #ffffff;
+    --secondary: #f4f4f5;
+    --secondary-foreground: #18181b;
+    --chart-1: #2A9D90;
+    --chart-2: #E76E50;
+    --chart-3: #274754;
+    --chart-4: #E8C468;
+    --chart-5: #F4A462;
+    --sidebar-primary-foreground: #18181b;
+    --sidebar-primary: #ffffff;
+    --sidebar-foreground: #3f3f46;
+    --sidebar-background: #FAFAFA;
+    --sidebar-accent: #f4f4f5;
+    --sidebar-accent-foreground: #18181b;
+    --sidebar-border: #E5E7EB;
+    --banner-error: #DC2626;
+    --banner-error-foreground: #FEE2E2;
   }
-
+  
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-    --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%;
+    --logo-base: #50C3E0;
+    --accent: #27272a;
+    --accent-foreground: #f8fafc;
+    --background: #09090B;
+    --border: #27272a;
+    --card: #18181b;
+    --card-hover: #27272a;
+    --card-foreground: #f8fafc;
+    --destructive: #7f1d1d;
+    --destructive-foreground: #fef2f2;
+    --foreground: #FAFAFA;
+    --input: #27272A;
+    --muted: #27272a;
+    --muted-foreground: #a1a1aa;
+    --popover: #18181b;
+    --popover-foreground: #f8fafc;
+    --primary: #FAFAFA;
+    --primary-foreground: #18181b;
+    --ring: #d4d4d8;
+    --ring-offset: #ffffff;
+    --secondary: #27272a;
+    --secondary-foreground: #f8fafc;
+    --chart-1: #2662D9;
+    --chart-2: #E23670;
+    --chart-3: #E88C30;
+    --chart-4: #AF57DB;
+    --chart-5: #2EB88A;
+    --sidebar-primary-foreground: #f8fafc;
+    --sidebar-primary: #2563eb;
+    --sidebar-foreground: #F4F4F5;
+    --sidebar-background: #18181b;
+    --sidebar-accent: #27272a;
+    --sidebar-accent-foreground: #f8fafc;
+    --sidebar-border: #27272A;
+    --banner-error: #7F1D1D;
+    --banner-error-foreground: transparent;
+    --error: #DC2626;
+    --link: #0EA5E9;
   }
 }
diff --git a/apps/client/src/lib/config.ts b/apps/client/src/lib/config.ts
index ad8aa28..c9b78ac 100644
--- a/apps/client/src/lib/config.ts
+++ b/apps/client/src/lib/config.ts
@@ -4,6 +4,11 @@ function isEnvVarDefined(name: string, value: unknown) {
   }
 }
 
+export const LOCAL_STORAGE_KEYS = {
+  APP_ID: "pse-form",
+  POST_DRAFT: "post-draft",
+}
+
 function getEnvVar<T extends string>(name: T) {
   const value = import.meta.env[name] ?? ""
   isEnvVarDefined(name, value)
diff --git a/apps/client/src/lib/schemas/content.ts b/apps/client/src/lib/schemas/content.ts
index fe69e36..ed7245b 100644
--- a/apps/client/src/lib/schemas/content.ts
+++ b/apps/client/src/lib/schemas/content.ts
@@ -2,4 +2,6 @@ import { z } from "zod"
 
 const CONTENT_MIN_LEN = 10
 
-export const contentSchema = z.string().min(CONTENT_MIN_LEN)
+export const contentSchema = z
+  .string()
+  .min(CONTENT_MIN_LEN, "Content should be at least 10 characters long")
diff --git a/apps/client/src/lib/schemas/index.ts b/apps/client/src/lib/schemas/index.ts
index f06722a..befa781 100644
--- a/apps/client/src/lib/schemas/index.ts
+++ b/apps/client/src/lib/schemas/index.ts
@@ -40,9 +40,10 @@ export type CreateGroupSchema = z.infer<typeof createGroupSchema>
 
 export const createPostSchema = z.object({
   content: contentSchema,
-  gid: z.number().int().positive(),
+  gid: z.number().int().positive().nullable(),
   title: titleSchema,
-  // tags: z.array(z.string()).min(1), // TODO
+  tags: z.array(z.string()).min(0), 
+  postAsAnonymous: z.boolean().optional(),
 })
 export type CreatePostSchema = z.infer<typeof createPostSchema>
 
diff --git a/apps/client/src/lib/schemas/title.ts b/apps/client/src/lib/schemas/title.ts
index 6c2308a..0540f3b 100644
--- a/apps/client/src/lib/schemas/title.ts
+++ b/apps/client/src/lib/schemas/title.ts
@@ -1,6 +1,6 @@
 import { z } from "zod"
 
-const TITLE_MAX_LENGTH = 50
+const TITLE_MAX_LENGTH = 200
 
-export const nameSchema = z.string().min(1).max(TITLE_MAX_LENGTH)
+export const nameSchema = z.string().min(1).max(TITLE_MAX_LENGTH, "Title must be less than 200 characters")
 export const titleSchema = nameSchema
diff --git a/apps/client/src/mocks/badgesMocks.ts b/apps/client/src/mocks/badgesMocks.ts
new file mode 100644
index 0000000..f66b06e
--- /dev/null
+++ b/apps/client/src/mocks/badgesMocks.ts
@@ -0,0 +1,14 @@
+export const badgesMocks = [
+  {
+    id: "1",
+    name: "Badge 1",
+  },
+  {
+    id: "2",
+    name: "Badge 2",
+  },
+  {
+    id: "3",
+    name: "Badge 3",
+  },
+];
diff --git a/apps/client/src/mocks/membershipMocks.ts b/apps/client/src/mocks/membershipMocks.ts
index bdfab75..4f8e62c 100644
--- a/apps/client/src/mocks/membershipMocks.ts
+++ b/apps/client/src/mocks/membershipMocks.ts
@@ -5,7 +5,7 @@ export const membershipMocks = [
     description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
     members: 100,
     posts: 100,
-    logo: "https://file.notion.so/f/f/56f3d122-cf5c-44f7-badf-6384ac445e55/8ed25d3d-52b8-4edb-a4cc-936019840333/Github-profile-icon.png?table=block&id=22adcc31-2358-4f35-9f34-28cc953219c8&spaceId=56f3d122-cf5c-44f7-badf-6384ac445e55&expirationTimestamp=1740763992523&signature=4RTA4PRl19wKDNkMoVslR95w-HuZqDnO0Es_QDTY_fw&downloadName=Github-profile-icon.png",
+    logo: "https://pse.dev/logos/pse-logo-bg.svg",
   },
   {
     id: "2",
diff --git a/apps/client/src/mocks/postMocks.ts b/apps/client/src/mocks/postMocks.ts
index 13339a7..f042670 100644
--- a/apps/client/src/mocks/postMocks.ts
+++ b/apps/client/src/mocks/postMocks.ts
@@ -6,17 +6,7 @@ export const postMocks = [
     createdAt: "2025-02-26T10:00:00Z",
     group: "PSE",
     totalViews: 100,
-    content: `## Lorem Ipsum Dolor  
-Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
-
-### Code Example  
-\`\`\`javascript
-function helloWorld() {
-  console.log("Hello, world!");
-}
-\`\`\`
-
-**Nunc finibus nisi nec magna ullamcorper dapibus.**`,
+    content: `Security in multi-party applications faces key challenges: trust assumptions, scalability trade-offs, and real-world attack surfaces. While cryptographic tools like MPC and ZKPs help, key management and usability remain weak points. Solving this requires better cryptographic UX, modular security primitives, and hybrid architectures. What's missing?`,
     replies: [
       {
         id: 101,
diff --git a/apps/client/src/routes/_app/post/$postId.tsx b/apps/client/src/routes/_app/post/$postId.tsx
index cb2b44e..87301ae 100644
--- a/apps/client/src/routes/_app/post/$postId.tsx
+++ b/apps/client/src/routes/_app/post/$postId.tsx
@@ -1,14 +1,27 @@
 import { createFileRoute, useLoaderData } from "@tanstack/react-router";
-import { Card } from "@/components/cards/Card";
 import { Content } from "@/components/Content";
 import { useGetPostById } from "@/hooks/usePosts";
-import { Smile as SmileIcon, MessageSquare as MessageSquareIcon } from 'lucide-react';
+import {
+  Smile as SmileIcon,
+  MessageSquare as MessageSquareIcon,
+  Reply as ReplyIcon,
+  Link as LinkIcon,
+  MailIcon,
+  FileBadge,
+} from "lucide-react";
 import { PageContent } from "@/components/PageContent";
 import { PostAuthor } from "@/sections/Post/PostAuthor";
 import { PostCard } from "@/sections/Post/PostCard";
-
-
-
+import { Tag } from "@/components/ui/Tag";
+import { Textarea } from "@/components/inputs/Textarea";
+import { useState } from "react";
+import { useForm } from "@tanstack/react-form";
+import { badgesMocks } from "mocks/badgesMocks";
+import { Select } from "@/components/inputs/Select";
+import { Switch } from "@/components/inputs/Switch";
+import { useGlobalContext } from "@/contexts/GlobalContext";
+import { Button } from "@/components/ui/Button";
+import { AuthWrapper } from "@/components/AuthWrapper";
 export const Route = createFileRoute("/_app/post/$postId")({
   component: PostPage,
   //loader: async ({ params: { postId } }) => rspc.query(["post.read", Number.parseInt(postId)]),
@@ -21,7 +34,10 @@ export const Route = createFileRoute("/_app/post/$postId")({
 
 function PostPage() {
   const { postId } = useLoaderData({ from: "/_app/post/$postId" });
-  console.log(postId);
+  const { user } = useGlobalContext();
+  const [replyTo, setReplyTo] = useState<string | number | null>(null);
+
+  const form = useForm<any>();
 
   const { data: postData } = useGetPostById(postId);
 
@@ -30,54 +46,160 @@ function PostPage() {
   }
 
   return (
-    <PageContent className="flex flex-col gap-14">
-      <PostCard
-        title={postData?.title ?? "Post not found"}
-        size="lg"
-        header={
-          <div className="flex items-center justify-between">
-            <PostAuthor
-              username={postData.author}
-              createdAt={postData.createdAt}
-              group={postData?.group}
-              avatarClassName="!size-[30px]"
-            />
-            <PostCard.TotalViews totalViews={postData?.totalViews ?? 0} />
+    <PageContent className="flex flex-col gap-10">
+      <div className="flex flex-col gap-3">
+        <PostCard
+          title={postData?.title ?? "Post not found"}
+          size="lg"
+          header={
+            <div className="flex items-center justify-between">
+              <PostAuthor
+                username={postData.author}
+                createdAt={postData.createdAt}
+                avatarClassName="!size-[30px]"
+              />
+              <PostCard.TotalViews totalViews={postData?.totalViews ?? 0} />
+            </div>
+          }
+        >
+          <div className="space-y-6">
+            <AuthWrapper>
+              <Content content={postData.content} />
+            </AuthWrapper>
+            <div className="flex items-center gap-2">
+              <AuthWrapper>
+                <Tag tooltip="React">
+                  <SmileIcon className="size-4" />
+                </Tag>
+              </AuthWrapper>
+              <Tag tooltip="Comments">
+                <MessageSquareIcon className="size-4" />
+                <span>{postData.replies?.length ?? 0}</span>
+              </Tag>
+            </div>
           </div>
-        }
-      />
-      <PostCard>
-        <div className="flex flex-col gap-6">
-          {postData.replies?.map((reply, index) => {
-            return (
-              <div className="flex flex-col gap-2" key={index}>
-                <PostAuthor
-                  username={reply.author}
-                  createdAt={reply.createdAt}
-                  avatarClassName="!size-6 mr-1"
-                />
-                <div className="flex flex-col gap-6 ml-[30px]">
+        </PostCard>
+        <Textarea
+          placeholder="Add comment"
+          rows={1}
+          onClick={() => {
+            setReplyTo(null);
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-6">
+        {postData.replies?.map((reply, index) => {
+          return (
+            <div className="flex flex-col gap-2" key={index}>
+              <PostAuthor
+                username={reply.author}
+                createdAt={reply.createdAt}
+                avatarClassName="!size-6 mr-1"
+              />
+              <div className="flex flex-col gap-6 ml-[30px]">
+                <div className="text-base-foreground">
                   <Content content={reply.content} />
-                  <div className="flex items-center gap-2">
-                    <Card.Base className=" align-start py-2 inline-flex w-auto" spacing="sm">
+                </div>
+                <div className="flex items-center gap-2">
+                  <AuthWrapper>
+                    <Tag tooltip="React">
                       <SmileIcon className="size-4" />
-                    </Card.Base>
-                    <Card.Base className=" align-start py-2 inline-flex w-auto" spacing="sm">
-                    <div className="flex items-center gap-1">
-                      <MessageSquareIcon className="size-4 text-black" />
-                      <span className="text-sm font-inter font-medium text-black leading-none">
-                        0
-                      </span>
-                    </div>
-                    </Card.Base>
-                  </div>
+                    </Tag>
+                    <Tag
+                      tooltip="Reply"
+                      onClick={() => {
+                        setReplyTo(reply.id);
+                      }}
+                    >
+                      <ReplyIcon className="size-4 text-black" />
+                    </Tag>
+                  </AuthWrapper>
+                  <Tag tooltip="Copy link">
+                    <LinkIcon className="size-4 text-black" />
+                  </Tag>
                 </div>
+                {replyTo === reply.id && (
+                  <div className="ml-5 flex flex-col gap-4 border-l-[3px] border-base-border pl-5">
+                    <Textarea placeholder="Add comment" />
 
+                    <div className="flex justify-between">
+                      <div className="lg:w-1/4">
+                        <form.Field
+                          name="tags"
+                          children={(field) => (
+                            <Select
+                              header={
+                                <div className="flex items-center gap-[6px] text-base-muted-foreground">
+                                  <FileBadge className="size-[18px]" />
+                                  <span className="text-base font-medium">
+                                    Badges
+                                  </span>
+                                </div>
+                              }
+                              label="Add badges"
+                              items={badgesMocks.map(({ id, name }) => ({
+                                value: id,
+                                label: (
+                                  <div className="flex items-center gap-1">
+                                    <MailIcon className="size-4" />
+                                    <span>{name}</span>
+                                  </div>
+                                ),
+                              }))}
+                              onValueChange={(value) => {
+                                const currentTags = field.state.value || [];
+                                if (!currentTags.includes(value)) {
+                                  field.handleChange([...currentTags, value]);
+                                }
+                              }}
+                              field={field}
+                            />
+                          )}
+                        />
+                      </div>
+                      <div className="ml-auto flex flex-col gap-4 justify-end">
+                        <form.Field
+                          name="postAsAnonymous"
+                          children={(field) => (
+                            <Switch
+                              label="Post as anonymous?"
+                              description={
+                                field.state.value
+                                  ? "Your name will not be displayed"
+                                  : `You are posting as ${user?.name}`
+                              }
+                              checked={!!field.state.value}
+                              onChange={(e) =>
+                                field.handleChange(e.target.checked)
+                              }
+                              field={field}
+                            />
+                          )}
+                        />
+                        <form.Subscribe
+                          selector={({ canSubmit, isSubmitting }) => [
+                            canSubmit,
+                            isSubmitting,
+                          ]}
+                          children={([_canSubmit, isSubmitting]) => (
+                            <Button
+                              aria-busy={isSubmitting}
+                              disabled={isSubmitting}
+                              className="min-w-[160px]"
+                            >
+                              Post
+                            </Button>
+                          )}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                )}
               </div>
-            );
-          })}
-        </div>
-      </PostCard>
+            </div>
+          );
+        })}
+      </div>
     </PageContent>
   );
 }
diff --git a/apps/client/src/routes/_left-sidebar/post/create.tsx b/apps/client/src/routes/_left-sidebar/post/create.tsx
index f263a7d..24090aa 100644
--- a/apps/client/src/routes/_left-sidebar/post/create.tsx
+++ b/apps/client/src/routes/_left-sidebar/post/create.tsx
@@ -3,6 +3,9 @@ import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/_left-sidebar/post/create")({
   component: PostCreate,
+  validateSearch: (search: Record<string, unknown>) => ({
+    community: typeof search.community ? search.community : undefined,
+  }),
   /*loader: async () =>
     rspc
       .query(["group.list"])
diff --git a/apps/client/src/routes/_left-sidebar/profile.tsx b/apps/client/src/routes/_left-sidebar/profile.tsx
index 4e923ed..f0a9656 100644
--- a/apps/client/src/routes/_left-sidebar/profile.tsx
+++ b/apps/client/src/routes/_left-sidebar/profile.tsx
@@ -1,5 +1,6 @@
 import { ProfilePage } from "@/sections/Profile";
 import { createFileRoute } from "@tanstack/react-router";
+
 export const Route = createFileRoute("/_left-sidebar/profile")({
   component: ProfilePage,
 });
diff --git a/apps/client/src/sections/App/index.tsx b/apps/client/src/sections/App/index.tsx
index 62dc4d5..632272d 100644
--- a/apps/client/src/sections/App/index.tsx
+++ b/apps/client/src/sections/App/index.tsx
@@ -1,46 +1,58 @@
 import { PageContent } from "@/components/PageContent";
 import { PlusIcon } from "lucide-react";
 import { postMocks } from "mocks/postMocks";
-import { Badge } from "@/components/ui/Badge";
 import { Button } from "@/components/ui/Button";
 import { PostAuthor } from "@/sections/Post/PostAuthor";
 import { PostCard } from "@/sections/Post/PostCard";
 import { Link } from "@tanstack/react-router";
+import { Users as UserGroupIcon } from "lucide-react";
+import { TimeSince } from "@/components/ui/TimeSince";
+import { AuthWrapper } from "@/components/AuthWrapper";
+import { Tag } from "@/components/ui/Tag";
+import { MessageSquare as MessageSquareIcon } from "lucide-react";
 
 export const HomePage = () => {
   return (
     <PageContent className="flex flex-col gap-6">
-      <div className="flex w-full justify-between">
-        <div></div>
-        <Link to="/post/create">
-          <Button icon={PlusIcon}>New Post</Button>
-        </Link>
-      </div>
+      <AuthWrapper>
+        <div className="flex w-full justify-between">
+          <Link
+            className="ml-auto"
+            to="/post/create"
+            search={{ community: undefined }}
+          >
+            <Button icon={PlusIcon}>New Post</Button>
+          </Link>
+        </div>
+      </AuthWrapper>
       <div className="flex flex-col gap-4">
         {postMocks?.map((post, index) => {
-          const hasComments = post.replies.length > 0;
           return (
             <div className="flex flex-col gap-14">
               <PostCard
                 className="relative"
+                header={
+                  <div className="flex items-center gap-2 justify-between">
+                    <div className="flex items-center gap-1">
+                      <UserGroupIcon className="size-[14px] text-purple" />
+                      <span className="text-purple font-inter font-semibold text-sm">
+                        {post.group}
+                      </span>
+                    </div>
+                    <TimeSince isoDateTime={post.createdAt} />
+                  </div>
+                }
                 key={index}
                 title={post.title}
                 postId={post.id}
                 withHover
               >
-                {hasComments && (
-                  <PostCard.CommentCount
-                    className="absolute right-[14px] top-1/2 -translate-y-1/2"
-                    count={post.replies.length}
-                  />
-                )}
-                <PostAuthor
-                  username={post.author}
-                  group="PSE"
-                  createdAt={post.createdAt}
-                />
+                <PostAuthor username={post.author} />
                 <div className=" flex items-center gap-2">
-                  <Badge variant="white">{post.group}</Badge>
+                  <Tag size="sm">
+                    <MessageSquareIcon className="size-4" />
+                    <span>{post.replies.length}</span>
+                  </Tag>
                 </div>
               </PostCard>
             </div>
diff --git a/apps/client/src/sections/Communities/CommunityPage.tsx b/apps/client/src/sections/Communities/CommunityPage.tsx
index bc9814d..0ffc395 100644
--- a/apps/client/src/sections/Communities/CommunityPage.tsx
+++ b/apps/client/src/sections/Communities/CommunityPage.tsx
@@ -1,6 +1,6 @@
 import { PageContent } from "@/components/PageContent";
 import { Button } from "@/components/ui/Button";
-import { useParams } from "@tanstack/react-router";
+import { useParams, Link } from "@tanstack/react-router";
 import { UserPlusIcon, PlusIcon } from "lucide-react";
 import { membershipMocks } from "mocks/membershipMocks";
 import { postMocks } from "mocks/postMocks";
@@ -11,105 +11,110 @@ import { Badge } from "@/components/ui/Badge";
 import { Avatar } from "@/components/Avatar";
 
 export const CommunityPage = () => {
-    const communityParams = useParams({ from: "/_left-sidebar/communities/$id" });
+  const communityParams = useParams({ from: "/_left-sidebar/communities/$id" });
 
-    const communityId = communityParams.id;
-  
-    const community = membershipMocks.find(
-      (community) => community.id?.toString() === communityId?.toString(),
-    );
-  
-    if (!community) {
-      return <div>Community not found {`${communityId}`}</div>;
-    }
-  
-    return (
-      <PageContent className="!pt-0 !px-0 lg:!pb-4 lg:!px-4">
-        <div className="flex flex-col">
-          <div className="h-[180px] w-full bg-white-light px-4">
-            <Tabs
-              className="w-full pt-4"
-              defaultValue="all"
-              items={[
-                {
-                  label: "All",
-                  id: "all",
-                },
-                {
-                  label: "My Community Posts",
-                  id: "my-community-posts",
-                },
-                {
-                  label: "Following",
-                  id: "following",
-                },
-                {
-                  label: community.name,
-                  id: "my-posts",
-                },
-              ]}
-            ></Tabs>
-          </div>
-          <div className="relative flex flex-col bg-white gap-6 -mt-4 overflow-hidden rounded-t-[24px] p-4 w-full">
-            <div className="flex flex-col gap-4">
-              <div className="flex w-full gap-4">
-                <div className="flex gap-3 w-full">
-                  <Avatar src={community.logo} className="!size-[78px]" />
-                  <div className="flex flex-col gap-2.5">
-                    <h1 className="text-black font-inter font-semibold text-xl leading-5 lg:max-w-[270px] line-clamp-2">
-                      {community.name}
-                    </h1>
-                    <span className="text-black-secondary font-inter font-medium text-xs">
-                      {community.members} members · {community.posts} posts
-                    </span>
-                  </div>
+  const communityId = communityParams.id;
+
+  const community = membershipMocks.find(
+    (community) => community.id?.toString() === communityId?.toString(),
+  );
+
+  if (!community) {
+    return <div>Community not found {`${communityId}`}</div>;
+  }
+
+  return (
+    <PageContent className="!pt-0 !px-0 lg:!pb-4 lg:!px-4">
+      <div className="flex flex-col">
+        <div className="h-[180px] w-full bg-base-muted-foreground px-4">
+          <Tabs
+            className="w-full mt-4"
+            defaultValue="all"
+            items={[
+              {
+                label: "All",
+                id: "all",
+              },
+              {
+                label: "My Community Posts",
+                id: "my-community-posts",
+              },
+              {
+                label: "Following",
+                id: "following",
+              },
+              {
+                label: community.name,
+                id: "my-posts",
+              },
+            ]}
+          ></Tabs>
+        </div>
+        <div className="relative flex flex-col bg-base-background gap-6 -mt-4 overflow-hidden rounded-t-[24px] p-4 w-full">
+          <div className="flex flex-col gap-4">
+            <div className="flex w-full gap-4">
+              <div className="flex gap-3 w-full">
+                <Avatar src={community.logo} className="!size-[78px]" />
+                <div className="flex flex-col gap-2.5">
+                  <h1 className="text-card-foreground font-inter font-semibold text-xl leading-5 lg:max-w-[270px] line-clamp-2">
+                    {community.name}
+                  </h1>
+                  <span className="text-base-muted-foreground font-inter font-medium text-xs">
+                    {community.members} members · {community.posts} posts
+                  </span>
                 </div>
-                <div className="ml-auto flex gap-2.5  align-baseline">
-                  <Button size="sm" icon={UserPlusIcon} variant="outline">
-                    Join
-                  </Button>
+              </div>
+              <div className="ml-auto flex gap-2.5  align-baseline">
+                <Button size="sm" icon={UserPlusIcon} variant="outline">
+                  Join
+                </Button>
+                <Link
+                  to="/post/create"
+                  search={{ community: Number(community.id) }}
+                >
                   <Button size="sm" icon={PlusIcon}>
                     New Post
                   </Button>
-                </div>
+                </Link>
               </div>
-              <span className="text-black-secondary font-inter font-normal text-sm">
-                {community.description}
-              </span>
             </div>
-            <div className="flex flex-col gap-4">
-              {postMocks?.map((post, index) => {
-                const hasComments = post.replies.length > 0;
-                return (
-                  <div className="flex flex-col gap-14">
-                    <PostCard
-                      className="relative"
-                      key={index}
-                      title={post.title}
-                      postId={post.id}
-                      withHover
-                    >
-                      {hasComments && (
-                        <PostCard.CommentCount
-                          className="absolute right-[14px] top-1/2 -translate-y-1/2"
-                          count={post.replies.length}
-                        />
-                      )}
-                      <PostAuthor
-                        username={post.author}
-                        group="PSE"
-                        createdAt={post.createdAt}
+            <span className="text-base-muted-foreground font-inter font-normal text-sm">
+              {community.description}
+            </span>
+          </div>
+          <div className="flex flex-col gap-4">
+            {postMocks?.map((post, index) => {
+              const hasComments = post.replies.length > 0;
+              return (
+                <div className="flex flex-col gap-14">
+                  <PostCard
+                    className="relative"
+                    key={index}
+                    title={post.title}
+                    postId={post.id}
+                    withHover
+                  >
+                    {hasComments && (
+                      <PostCard.CommentCount
+                        className="absolute right-[14px] top-1/2 -translate-y-1/2"
+                        count={post.replies.length}
                       />
-                      <div className=" flex items-center gap-2">
-                        <Badge variant="white">{post.group}</Badge>
-                      </div>
-                    </PostCard>
-                  </div>
-                );
-              })}
-            </div>
+                    )}
+                    <PostAuthor
+                      username={post.author}
+                      group="PSE"
+                      createdAt={post.createdAt}
+                    />
+                    <div className=" flex items-center gap-2">
+                      <Badge variant="secondary">{post.group}</Badge>
+                    </div>
+                  </PostCard>
+                </div>
+              );
+            })}
           </div>
         </div>
-      </PageContent>
-    );
+      </div>
+    </PageContent>
+  );
 };
diff --git a/apps/client/src/sections/Communities/_AllCommunities.tsx b/apps/client/src/sections/Communities/_AllCommunities.tsx
index d8fd19a..ba00935 100644
--- a/apps/client/src/sections/Communities/_AllCommunities.tsx
+++ b/apps/client/src/sections/Communities/_AllCommunities.tsx
@@ -12,10 +12,10 @@ export const AllCommunities = () => {
             <div className="flex gap-3 items-center">
               <Avatar className="!size-[50px]" src={community.logo} />
               <div className="flex flex-col">
-                <h3 className="text-base lg:text-lg font-semibold text-black font-inter">
+                <h3 className="text-base lg:text-lg font-semibold text-card-foreground font-inter">
                   {community.name}
                 </h3>
-                <span className=" text-black-secondary text-xs font-medium line-clamp-1">
+                <span className=" text-base-muted-foreground text-xs font-medium line-clamp-1">
                   Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
                   aperiam vero dolores, sunt consequuntur in laborum fugit!
                   Molestias, expedita quaerat?
diff --git a/apps/client/src/sections/Login/LoginModal.tsx b/apps/client/src/sections/Login/LoginModal.tsx
index 1ea8af7..ef11c44 100644
--- a/apps/client/src/sections/Login/LoginModal.tsx
+++ b/apps/client/src/sections/Login/LoginModal.tsx
@@ -1,9 +1,37 @@
+import { Button } from "@/components/ui/Button";
 import { Modal, ModalProps } from "@/components/ui/Modal";
+import { useMockAuth } from "@/hooks/useAuth";
+import { Link } from "@tanstack/react-router";
 
 export const LoginModal = ({ isOpen, setIsOpen }: ModalProps) => {
+  const loginMutation = useMockAuth({
+    onSuccess: () => {
+      setIsOpen(false);
+    },
+  });
   return (
-    <Modal isOpen={isOpen} setIsOpen={setIsOpen}>
-      <div>Login</div>
+    <Modal title="Login" isOpen={isOpen} setIsOpen={setIsOpen}>
+      <div className="flex flex-col gap-12">
+        <div className="flex flex-col gap-1">
+          <span className="text-base-muted-foreground leading-5 text-sm font-bold">
+            Private Google Sign In
+          </span>
+          <span className="text-base-muted-foreground text-sm leading-5">
+            We'll use Stealth.notes protocol as a way to log in and prove your
+            email domain ownership in private way without our server knowing who
+            you are.
+            <Link className="text-link block" to="#">
+              Read more here
+            </Link>
+          </span>
+        </div>
+        <Button
+          onClick={() => loginMutation.mutateAsync()}
+          loading={loginMutation.isPending}
+        >
+          Sign in with Google
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/apps/client/src/sections/Post/PostAuthor.tsx b/apps/client/src/sections/Post/PostAuthor.tsx
index 129e6ae..a058863 100644
--- a/apps/client/src/sections/Post/PostAuthor.tsx
+++ b/apps/client/src/sections/Post/PostAuthor.tsx
@@ -1,37 +1,44 @@
 import { Avatar } from "@/components/Avatar";
 import { TimeSince } from "@/components/ui/TimeSince";
 import { Users as UserGroupIcon } from "lucide-react";
+import { ReactNode } from "react";
 
 interface PostAuthorProps {
   username: string;
-  group?: string;
   createdAt?: string;
   titleSize?: "sm" | "lg";
+  badges?: {
+    label: string;
+    icon: ReactNode;
+  }[];
   avatarClassName?: string;
 }
 
 export const PostAuthor = ({
   username,
-  group,
   createdAt,
   avatarClassName,
+  badges = [],
 }: PostAuthorProps) => {
   return (
     <div className="flex gap-1 items-center">
-      <Avatar size="sm" hasRandomBackground className={avatarClassName} />
-      <span className="text-black font-inter font-medium text-sm line-clamp-2 lg:line-clamp-1">
+      <Avatar
+        size="sm"
+        hasRandomBackground
+        className={avatarClassName}
+        username={username}
+      />
+      <span className="text-card-foreground font-inter font-medium text-sm line-clamp-2 lg:line-clamp-1">
         {username}
       </span>
-      {group && (
+      {badges?.length > 0 && (
         <>
+          {badges.map((badge) => (
+            <span key={badge.label}>{badge.icon}</span>
+          ))}
           <span>·</span>
-          <UserGroupIcon className="size-[14px] text-purple" />
-          <span className="text-purple font-inter font-semibold text-sm">
-            {group}
-          </span>
         </>
       )}
-      <span>·</span>
       {createdAt && <TimeSince isoDateTime={createdAt} />}
     </div>
   );
diff --git a/apps/client/src/sections/Post/PostCard.tsx b/apps/client/src/sections/Post/PostCard.tsx
index 7ae2db5..6072709 100644
--- a/apps/client/src/sections/Post/PostCard.tsx
+++ b/apps/client/src/sections/Post/PostCard.tsx
@@ -3,7 +3,7 @@ import { classed, VariantProps } from "@tw-classed/react";
 import { Link } from "@tanstack/react-router";
 import { Eye as EyeIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MessageSquare as MessageSquareIcon } from 'lucide-react';
+import { MessageSquare as MessageSquareIcon } from "lucide-react";
 import { Card } from "@/components/cards/Card";
 
 export interface PostCardProps extends VariantProps<typeof Card.Base> {
@@ -24,18 +24,29 @@ const PostCardBase = classed(Card.Base, {
   },
 });
 
-const PostCommentCount = ({ count, className }: { count: number, className?: string }) => {
+const PostCommentCount = ({
+  count,
+  className,
+}: {
+  count: number;
+  className?: string;
+}) => {
   return (
-    <div className={cn("px-[6px] py-1 items-center gap-1 bg-black rounded-full inline-flex", className)}>
-      <MessageSquareIcon className="size-3 text-white" />
-      <span className="text-xs font-inter font-medium text-white">
+    <div
+      className={cn(
+        "px-[6px] py-1 items-center gap-1 bg-base-primary rounded-full inline-flex ",
+        className,
+      )}
+    >
+      <MessageSquareIcon className="size-3 text-base-primary-foreground" />
+      <span className="text-xs font-inter font-semibold text-base-primary-foreground">
         {count}
       </span>
     </div>
   );
 };
 const PostTitle = classed.span(
-  "text-black font-inter line-clamp-2 lg:line-clamp-1 lg:w-full w-[90%]",
+  "text-card-foreground font-inter line-clamp-2 lg:line-clamp-1 lg:w-full w-[90%]",
   {
     variants: {
       size: {
@@ -62,19 +73,26 @@ const PostCard = ({
   return (
     <PostCardBase
       withHover={withHover}
-      className={cn({
-        group: withHover,
-      }, className)}
+      className={cn(
+        {
+          group: withHover,
+        },
+        className,
+      )}
     >
-      {header && <div className="flex flex-col gap-2">{header}</div>}
-      {title &&
-        (withLink && postId ? (
-          <Link to="/post/$postId" params={{ postId: postId.toString() }}>
-            <PostTitle size={size}>{title}</PostTitle>
-          </Link>
-        ) : (
-          <PostTitle size={size}>{title}</PostTitle>
-        ))}
+      {(header || title) && (
+        <div className="flex flex-col gap-1">
+          {header && <div className="flex flex-col gap-1">{header}</div>}
+          {title &&
+            (withLink && postId ? (
+              <Link to="/post/$postId" params={{ postId: postId.toString() }}>
+                <PostTitle size={size}>{title}</PostTitle>
+              </Link>
+            ) : (
+              <PostTitle size={size}>{title}</PostTitle>
+            ))}
+        </div>
+      )}
       {children}
     </PostCardBase>
   );
@@ -83,8 +101,8 @@ const PostCard = ({
 const PostTotalView = ({ totalViews }: { totalViews: number }) => {
   return (
     <div className="flex items-center gap-1 ">
-      <EyeIcon className="size-[18px] text-black" />
-      <span className="text-sm font-inter font-medium text-black-secondary">
+      <EyeIcon className="size-[18px] text-base-foreground" />
+      <span className="text-sm font-inter font-medium text-base-muted-foreground">
         {totalViews}
       </span>
     </div>
diff --git a/apps/client/src/sections/Post/PostCreate.tsx b/apps/client/src/sections/Post/PostCreate.tsx
index 3cc230f..026f9c1 100644
--- a/apps/client/src/sections/Post/PostCreate.tsx
+++ b/apps/client/src/sections/Post/PostCreate.tsx
@@ -1,19 +1,25 @@
-import {
-  Select,
-} from "@/components/inputs/Select";
+import { Select } from "@/components/inputs/Select";
 import { Input } from "@/components/inputs/Input";
 import { Tabs } from "@/components/ui/Tabs";
 import { useField, useForm } from "@tanstack/react-form";
-import { FieldInfo } from "@/components/FieldInfo";
 import { capitalize } from "@/lib/format";
 import { getToken, rspc } from "@/lib/rspc";
 import { type CreatePostSchema, createPostSchema } from "@/lib/schemas";
 import type { FormEvent } from "react";
 import { Button } from "@/components/ui/Button";
-import { useLoaderData } from "@tanstack/react-router";
+import { useLoaderData, useParams, useSearch } from "@tanstack/react-router";
 import { Textarea } from "@/components/inputs/Textarea";
 import { router } from "@/lib/router";
 import { PageContent } from "@/components/PageContent";
+import { membershipMocks } from "mocks/membershipMocks";
+import { useCreateDraftMutation } from "@/hooks/usePosts";
+import { badgesMocks } from "mocks/badgesMocks";
+import { FileBadge } from "lucide-react";
+import { Card } from "@/components/cards/Card";
+import { Switch } from "@/components/inputs/Switch";
+import { useGlobalContext } from "@/contexts/GlobalContext";
+import { Mail as MailIcon } from "lucide-react";
+import { Tag } from "@/components/ui/Tag";
 
 enum TabName {
   Write = "write",
@@ -23,11 +29,17 @@ enum TabName {
 export const PostCreate = () => {
   const groups = useLoaderData({ from: "/_left-sidebar/post/create" }) ?? [];
 
+  const createDraftMutation = useCreateDraftMutation();
+  const { user } = useGlobalContext();
+
+  const search = useSearch({ from: "/_left-sidebar/post/create" });
+
   const form = useForm<CreatePostSchema>({
     defaultValues: {
       content: "",
-      gid: /*groups?.[0]?.id */ 1,
+      gid: Number(search?.community) || null,
       title: "",
+      tags: [],
     },
     onSubmit: async ({ value }) => {
       getToken();
@@ -48,10 +60,11 @@ export const PostCreate = () => {
   }
 
   return (
-    <form className="w-full" onSubmit={(e) => handleSubmit(e)}>
-      <PageContent title="New Post">
+    <form className="w-full h-full pb-6" onSubmit={(e) => handleSubmit(e)}>
+      <PageContent title="New Post" className="flex flex-col h-full">
         <Tabs
           defaultValue={TabName.Write}
+          minWidth={170}
           items={[
             {
               id: TabName.Write,
@@ -67,8 +80,26 @@ export const PostCreate = () => {
           ]}
         />
 
-        <div className="space-y-2">
-          <div className="relative">
+        <div className="space-y-8">
+          <div className="space-y-4">
+            <div className="lg:w-1/5 w-full">
+              <form.Field
+                name="gid"
+                children={(field) => (
+                  <Select
+                    label="Select a community"
+                    items={membershipMocks.map(({ id, name }) => ({
+                      value: id,
+                      label: name,
+                    }))}
+                    onValueChange={(value) => field.handleChange(Number(value))}
+                    value={field.state.value?.toString()}
+                    field={field}
+                  />
+                )}
+              />
+            </div>
+
             <form.Field
               name="title"
               children={(field) => (
@@ -78,54 +109,120 @@ export const PostCreate = () => {
                     maxLength={200}
                     placeholder={capitalize(field.name)}
                     value={field.state.value}
+                    field={field}
+                    showCounter
                   />
-                  <span className="absolute right-3 top-2.5 text-sm text-muted-foreground">
-                    {form.state.values.title.length}/50
-                  </span>
-                  <FieldInfo field={field} />
                 </>
               )}
             />
+
+            <Textarea
+              id={contentField.name}
+              rows={4}
+              onChange={(e) => contentField.handleChange(e.target.value)}
+              value={contentField.state.value}
+              placeholder="Have something on your mind? Write it here!"
+              field={contentField}
+            />
+          </div>
+          <div className="flex flex-col gap-6">
+            <div className="lg:w-1/4 w-full">
+              <form.Field
+                name="tags"
+                children={(field) => (
+                  <Select
+                    header={
+                      <div className="flex items-center gap-[6px] text-base-muted-foreground">
+                        <FileBadge className="size-[18px]" />
+                        <span className="text-base font-medium">Badges</span>
+                      </div>
+                    }
+                    label="Add badges"
+                    items={badgesMocks.map(({ id, name }) => ({
+                      value: id,
+                      label: (
+                        <div className="flex items-center gap-1">
+                          <MailIcon className="size-4" />
+                          <span>{name}</span>
+                        </div>
+                      ),
+                    }))}
+                    onValueChange={(value) => {
+                      const currentTags = field.state.value || [];
+                      if (!currentTags.includes(value)) {
+                        field.handleChange([...currentTags, value]);
+                      }
+                    }}
+                    field={field}
+                  />
+                )}
+              />
+            </div>
+            {form.state.values?.tags?.length > 0 && (
+              <div className="flex gap-2.5 flex-wrap">
+                {form.state.values?.tags?.map((tag) => {
+                  return (
+                    <Tag key={tag} onRemove={() => {}}>
+                      <MailIcon className="size-4" />
+                      {badgesMocks.find(({ id }) => id === tag)?.name}
+                    </Tag>
+                  );
+                })}
+              </div>
+            )}
           </div>
         </div>
-        <FieldInfo field={contentField} />
-
-        <Textarea
-          id={contentField.name}
-          rows={4}
-          onChange={(e) => contentField.handleChange(e.target.value)}
-          value={contentField.state.value}
-          placeholder="Have something on your mind? Write it here!"
-        />
-      </PageContent>
 
-      <div className="space-y-4 py-6">
-        <form.Field
-          name="gid"
-          children={(field) => (
-            <Select
-              label="Select a Group"
-              items={groups.map(({ id, name }) => ({
-                value: id,
-                label: name,
-              }))}
-              defaultValue={(groups[0] as any)?.id?.toString()}
-              onValueChange={(value) => field.handleChange(Number(value))}
-              value={field.state.value.toString()}
+        <Card.Base variant="secondary" className="mt-auto">
+          <div className="flex justify-end gap-2.5">
+            <form.Field
+              name="postAsAnonymous"
+              children={(field) => (
+                <Switch
+                  label="Post as anonymous?"
+                  description={
+                    field.state.value
+                      ? "Your name will not be displayed"
+                      : `You are posting as ${user?.name}`
+                  }
+                  checked={!!field.state.value}
+                  onChange={(e) => field.handleChange(e.target.checked)}
+                  field={field}
+                />
+              )}
             />
-          )}
-        />
-      </div>
-      <div className="flex justify-end gap-2">
-        <form.Subscribe
-          selector={({ canSubmit, isSubmitting }) => [canSubmit, isSubmitting]}
-          children={([canSubmit, isSubmitting]) => (
-            <Button aria-busy={isSubmitting} disabled={!canSubmit}>
-              Post
+          </div>
+          <div className="flex justify-end gap-2.5">
+            <Button
+              variant="ghost"
+              type="button"
+              onClick={() => {
+                createDraftMutation.mutate({
+                  content: contentField.state.value,
+                  title: form.state.values.title,
+                });
+              }}
+            >
+              Save as draft
             </Button>
-          )}
-        />
-      </div>
+            <form.Subscribe
+              selector={({ canSubmit, isSubmitting }) => [
+                canSubmit,
+                isSubmitting,
+              ]}
+              children={([_canSubmit, isSubmitting]) => (
+                <Button
+                  aria-busy={isSubmitting}
+                  disabled={isSubmitting}
+                  className="min-w-[160px]"
+                >
+                  Post
+                </Button>
+              )}
+            />
+          </div>
+        </Card.Base>
+      </PageContent>
     </form>
   );
 };
diff --git a/apps/client/src/sections/Post/PostDrafts.tsx b/apps/client/src/sections/Post/PostDrafts.tsx
index f906dcd..3fd91b0 100644
--- a/apps/client/src/sections/Post/PostDrafts.tsx
+++ b/apps/client/src/sections/Post/PostDrafts.tsx
@@ -2,8 +2,17 @@ import { PageContent } from "@/components/PageContent";
 import { router } from "@/lib/router";
 import { PencilLine as PencilLineIcon } from "lucide-react";
 import { Tabs } from "@/components/ui/Tabs";
+import { useGetDrafts, useRemoveDraft } from "@/hooks/usePosts";
+import { TimeSince } from "@/components/ui/TimeSince";
+import { Trash2 as TrashIcon } from "lucide-react";
 
 export const PostDrafts = () => {
+  const { data: drafts = [], isLoading, refetch: refetchDrafts } = useGetDrafts();
+
+  const removeDraftMutation = useRemoveDraft();
+
+  const hasDrafts = drafts?.length > 0 && !isLoading;
+
   return (
     <PageContent
       title="Drafts"
@@ -13,7 +22,7 @@ export const PostDrafts = () => {
         description:
           "Save your drafts here and come back anytime to edit or share them when you're ready to post.",
       }}
-      showEmptyState
+      showEmptyState={!hasDrafts}
     >
       <Tabs
         defaultValue="drafts"
@@ -22,7 +31,10 @@ export const PostDrafts = () => {
             id: "create",
             label: "New Post",
             onClick: () => {
-              router.navigate({ to: "/post/create" });
+              router.navigate({
+                to: "/post/create",
+                search: { community: undefined },
+              });
             },
           },
           {
@@ -31,6 +43,33 @@ export const PostDrafts = () => {
           },
         ]}
       />
+      {hasDrafts && (
+        <div className="flex flex-col gap-4">
+          {drafts.map((draft) => (
+            <div
+              className="relative flex flex-col gap-1 pb-4 border-b border-base-border"
+              key={draft.id}
+            >
+              <h2 className="text-sm font-medium text-base-foreground">
+                {draft.title}
+              </h2>
+              <TimeSince
+                isoDateTime={new Date(draft.createdAt).toISOString()}
+              />
+              <button
+                className="absolute top-0 right-0"
+                type="button"
+                onClick={async () => {
+                  await removeDraftMutation.mutateAsync(draft.id);
+                  await refetchDrafts();
+                }}
+              >
+                <TrashIcon className="size-4 text-muted-foreground " />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
     </PageContent>
   );
 };
diff --git a/apps/client/src/sections/Profile/index.tsx b/apps/client/src/sections/Profile/index.tsx
index 3d6deea..0d23098 100644
--- a/apps/client/src/sections/Profile/index.tsx
+++ b/apps/client/src/sections/Profile/index.tsx
@@ -6,7 +6,8 @@ import { Button } from "@/components/ui/Button";
 import { Pen as PenIcon, LogOut as LogOutIcon } from "lucide-react";
 import { PageContent } from "@/components/PageContent";
 import { Banner } from "@/components/ui/Banner";
-
+import { useGlobalContext } from "@/contexts/GlobalContext";
+import { useNavigate } from "@tanstack/react-router";
 const InfoCard = ({
   label,
   value,
@@ -19,13 +20,15 @@ const InfoCard = ({
   return (
     <div
       className={cn(
-        "flex flex-col p-2 rounded-md bg-white-light text-center",
+        "flex flex-col p-2 rounded-md bg-accent text-center",
         className,
       )}
     >
-      <span className="text-sm font-inter text-black font-bold">{value}</span>
+      <span className="text-sm font-inter text-base-foreground font-bold">
+        {value}
+      </span>
 
-      <span className="text-xs font-inter font-medium text-black-secondary">
+      <span className="text-xs font-inter font-medium text-base-muted-foreground">
         {label}
       </span>
     </div>
@@ -33,6 +36,8 @@ const InfoCard = ({
 };
 
 export const ProfilePage = () => {
+  const { user, setIsLoggedIn } = useGlobalContext();
+  const navigate = useNavigate();
   return (
     <PageContent className="flex flex-col gap-6">
       <Labels.PageTitle>Profile</Labels.PageTitle>
@@ -42,21 +47,23 @@ export const ProfilePage = () => {
           not be able to recover your account.
         </Banner.Label>
         <div className="ml-auto">
-          <Button variant="error" className="font-medium">Generate recovery code</Button>
+          <Button variant="error" className="font-medium">
+            Generate recovery code
+          </Button>
         </div>
       </Banner.Base>
       <div className="flex flex-col gap-4">
         <div className="flex gap-3">
-          <Avatar size="xl" />
+          <Avatar size="xl" src={user?.avatar} />
           <div className="flex flex-col gap-1">
-            <h2 className="text-2xl font-semibold font-inter text-black">
+            <h2 className="text-2xl font-semibold font-inter text-base-foreground">
               John Doe
             </h2>
             <div className="flex items-center gap-1">
               <span className="text-xs font-inter text-black-secondary">
                 Standard
               </span>
-              <Badge variant="white">uid: 123</Badge>
+              <Badge variant="secondary">uid: 123</Badge>
             </div>
             <span className="text-xs font-inter text-black-secondary">
               Created 2024-01-01
@@ -73,7 +80,14 @@ export const ProfilePage = () => {
           <Button icon={PenIcon} variant="outline">
             Edit Profile
           </Button>
-          <Button icon={LogOutIcon} variant="outline">
+          <Button
+            icon={LogOutIcon}
+            variant="outline"
+            onClick={() => {
+              setIsLoggedIn(false);
+              navigate({ to: "/" });
+            }}
+          >
             Sign Out
           </Button>
         </div>
diff --git a/apps/client/src/sections/Settings/_ChangePassword.tsx b/apps/client/src/sections/Settings/_ChangePassword.tsx
deleted file mode 100644
index 7f6ff8d..0000000
--- a/apps/client/src/sections/Settings/_ChangePassword.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Card } from "@/components/cards/Card";
-import { Input } from "@/components/inputs/Input";
-import { Button } from "@/components/ui/Button";
-
-export const ChangePassword = () => {
-  return (
-    <Card.Base className="flex flex-col gap-6">
-      <div className="flex flex-col gap-1">
-        <Card.Title>Change password</Card.Title>
-
-        <Card.Description>
-          Update your password to keep your account secure.
-        </Card.Description>
-      </div>
-      <div className="flex flex-col gap-4">
-        <Input
-          label="Old password"
-          placeholder="Enter your current password."
-        />
-        <Input
-          label="New password"
-          placeholder="Choose a strong new password."
-        />
-        <Input
-          label="Re-enter password"
-          placeholder="Confirm your new password."
-        />
-      </div>
-      <div className="py-4 flex justify-end">
-        <Button>Save</Button>
-      </div>
-    </Card.Base>
-  );
-};
diff --git a/apps/client/src/sections/Settings/_OpenSession.tsx b/apps/client/src/sections/Settings/_OpenSession.tsx
index 7367317..5d99165 100644
--- a/apps/client/src/sections/Settings/_OpenSession.tsx
+++ b/apps/client/src/sections/Settings/_OpenSession.tsx
@@ -33,11 +33,11 @@ export const OpenSession = () => {
         </Card.Description>
       </div>
       <div className="flex flex-col">
-        <SessionTableWrapper className="border-b border-b-gray">
-          <span className="text-sm font-medium text-black-secondary">
+        <SessionTableWrapper className="border-b border-base-border">
+          <span className="text-sm font-medium text-base-muted-foreground">
             Session
           </span>
-          <span className="text-sm font-medium text-black-secondary">
+          <span className="text-sm font-medium text-base-muted-foreground">
             Device
           </span>
           <span></span>
@@ -45,12 +45,12 @@ export const OpenSession = () => {
         {sessionMockData.map((session) => (
           <SessionTableWrapper
             key={session.id}
-            className="border-b border-b-gray h-[52px]"
+            className="border-b border-base-border h-[52px]"
           >
-            <span className="text-sm text-black font-medium">
+            <span className="text-sm text-base-foreground font-medium">
               {session.key}
             </span>
-            <span className="text-sm text-black">{session.status}</span>
+            <span className="text-sm text-base-foreground">{session.status}</span>
             <div>
               <Button variant="outline" className="!flex !w-full">
                 Sign Out
diff --git a/apps/client/src/sections/Settings/_RecoveryCode.tsx b/apps/client/src/sections/Settings/_RecoveryCode.tsx
deleted file mode 100644
index 5d0151b..0000000
--- a/apps/client/src/sections/Settings/_RecoveryCode.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Card } from "@/components/cards/Card";
-import { Input } from "@/components/inputs/Input";
-import { Button } from "@/components/ui/Button";
-
-export const RecoveryCode = () => {
-  return (
-    <Card.Base className="flex flex-col gap-6">
-      <div className="flex flex-col gap-1">
-        <Card.Title>Recovery code</Card.Title>
-
-        <Card.Description>
-          Update your password to keep your account secure.
-        </Card.Description>
-      </div>
-      <div className="flex flex-col gap-4">
-        <Input
-          label="Password"
-          description="You must input your password to generate or reset your recovery code."
-        />
-      </div>
-      <div className="py-4 flex justify-end">
-        <Button>Generate recovery code</Button>
-      </div>
-    </Card.Base>
-  );
-};
diff --git a/apps/client/src/sections/Settings/index.tsx b/apps/client/src/sections/Settings/index.tsx
index fe2c09e..54805a0 100644
--- a/apps/client/src/sections/Settings/index.tsx
+++ b/apps/client/src/sections/Settings/index.tsx
@@ -1,18 +1,34 @@
 import { PageContent } from "@/components/PageContent";
+import { Banner } from "@/components/ui/Banner";
 import { Avatar } from "./_Avatar";
 import { BasicInfo } from "./_BasicInfo";
-import { ChangePassword } from "./_ChangePassword";
-import { RecoveryCode } from "./_RecoveryCode";
 import { OpenSession } from "./_OpenSession";
+import { AuthWrapper } from "@/components/AuthWrapper";
+import { Switch } from "@/components/inputs/Switch";
+import { useGlobalContext } from "@/contexts/GlobalContext";
 
 export const SettingsPage = () => {
+  const { isDarkMode, setIsDarkMode } = useGlobalContext();
   return (
     <PageContent title="Settings">
-      <Avatar />
-      <BasicInfo />
-      <ChangePassword />
-      <RecoveryCode />
-      <OpenSession />
+      <AuthWrapper>
+        <Banner.Base className="text-center">
+          <Banner.Label size="sm">
+            Please complete your profile to enhance your experience!
+          </Banner.Label>
+        </Banner.Base>
+        <Avatar />
+        <BasicInfo />
+        <OpenSession />
+      </AuthWrapper>
+      <div className="max-w-[200px]">
+        <Switch
+          label="Dark mode"
+          className="my-6"
+          checked={isDarkMode}
+          onChange={() => setIsDarkMode(!isDarkMode)}
+        />
+      </div>
     </PageContent>
   );
 };
diff --git a/apps/client/tailwind.config.ts b/apps/client/tailwind.config.ts
index 2c59ecb..5fa77fd 100644
--- a/apps/client/tailwind.config.ts
+++ b/apps/client/tailwind.config.ts
@@ -5,6 +5,10 @@ const config: Config = {
   content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {
+      container: {
+        center: true,
+        padding: "1rem",
+      },
       boxShadow: {
         tabs: "0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)",
         input: "0px 1px 2px 0px rgba(0, 0, 0, 0.05)",
@@ -23,30 +27,61 @@ const config: Config = {
         purple: {
           DEFAULT: "#6366F1",
         },
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        card: "hsl(var(--card))",
-        "card-foreground": "hsl(var(--card-foreground))",
-        popover: "hsl(var(--popover))",
-        "popover-foreground": "hsl(var(--popover-foreground))",
-        primary: "hsl(var(--primary))",
-        "primary-foreground": "hsl(var(--primary-foreground))",
-        secondary: "hsl(var(--secondary))",
-        "secondary-foreground": "hsl(var(--secondary-foreground))",
-        muted: "hsl(var(--muted))",
-        "muted-foreground": "hsl(var(--muted-foreground))",
-        accent: "hsl(var(--accent))",
-        "accent-foreground": "hsl(var(--accent-foreground))",
-        destructive: "hsl(var(--destructive))",
-        "destructive-foreground": "hsl(var(--destructive-foreground))",
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        "chart-1": "hsl(var(--chart-1))",
-        "chart-2": "hsl(var(--chart-2))",
-        "chart-3": "hsl(var(--chart-3))",
-        "chart-4": "hsl(var(--chart-4))",
-        "chart-5": "hsl(var(--chart-5))",
+        base: {
+          logo: "var(--logo-base)",
+          border: "var(--border)",
+          input: "var(--input)",
+          background: "var(--background)",
+          foreground: "var(--foreground)",
+          muted: "var(--muted)",
+          "muted-foreground": "var(--muted-foreground)",
+          primary: "var(--primary)",
+          "primary-foreground": "var(--primary-foreground)",
+          secondary: "var(--secondary)",
+          "secondary-foreground": "var(--secondary-foreground)",
+          
+        },
+        error: "var(--error)",
+        link: "var(--link)",
+        banner: {
+          error: "var(--banner-error)",
+          "error-foreground": "var(--banner-error-foreground)",
+        },
+        accent: "var(--accent)",
+        "accent-foreground": "var(--accent-foreground)",
+
+        card: {
+          DEFAULT: "var(--card)",
+          foreground: "var(--card-foreground)",
+          hover: "var(--card-hover)",
+        },
+      
+        destructive: "var(--destructive)",
+        "destructive-foreground": "var(--destructive-foreground)",
+        foreground: "var(--foreground)",
+       
+     
+        popover: "var(--popover)",
+        "popover-foreground": "var(--popover-foreground)",
+      
+        ring: "var(--ring)",
+      
+        chart: {
+          1: "var(--chart-1)",
+          2: "var(--chart-2)",
+          3: "var(--chart-3)",
+          4: "var(--chart-4)",
+          5: "var(--chart-5)",
+        },
+        sidebar: {
+          primary: "var(--sidebar-primary)",
+          "primary-foreground": "var(--sidebar-primary-foreground)",
+          foreground: "var(--sidebar-foreground)",
+          background: "var(--sidebar-background)",
+          accent: "var(--sidebar-accent)",
+          "accent-foreground": "var(--sidebar-accent-foreground)",
+          border: "var(--sidebar-border)",
+        },
       },
 
       fontFamily: {