diff --git a/apps/api-gateway/src/main.ts b/apps/api-gateway/src/main.ts
index 55d06ee..f29d4f9 100644
--- a/apps/api-gateway/src/main.ts
+++ b/apps/api-gateway/src/main.ts
@@ -60,7 +60,7 @@ app.use(
         callback(new Error('Not allowed by CORS'));
       }
     },
-    allowedHeaders: ['Authorization', 'Content-Type'],
+    allowedHeaders: ['Authorization', 'Content-Type', 'X-Auth-Actor', 'X-Auth-Role', 'X-Client-Role'],
     credentials: true,
   }),
 );
diff --git a/apps/auth-service/src/controllers/auth.controller.ts b/apps/auth-service/src/controllers/auth.controller.ts
index 241cbf0..c658739 100644
--- a/apps/auth-service/src/controllers/auth.controller.ts
+++ b/apps/auth-service/src/controllers/auth.controller.ts
@@ -2,6 +2,7 @@ import { NextFunction, Request, Response } from 'express';
 
 import { AuthError, ValidationError } from '@packages/error-handler';
 import prisma from '@packages/libs/prisma';
+import imageKit from '@packages/libs/imageKit';
 import {
   checkOTPRestrictions,
   handleForgotPassword,
@@ -114,9 +115,6 @@ export const UserLogin = async (request: Request, response: Response, next: Next
     setCookie(response, 'access_token', accessToken);
     setCookie(response, 'refresh_token', refreshToken);
 
-    response.clearCookie('seller_access_token');
-    response.clearCookie('seller_refresh_token');
-
     response.status(200).json({
       success: true,
       message: 'User logged in successfully!',
@@ -134,10 +132,7 @@ export const UserLogin = async (request: Request, response: Response, next: Next
 //Refresh Token User
 export const RefreshToken = async (request: any, response: Response, next: NextFunction) => {
   try {
-    const refreshToken =
-      request.cookies['refresh_token'] ||
-      request.cookies['seller_refresh_token'] ||
-      request.headers.authorization?.split(' ')[1];
+    const refreshToken = request.cookies['refresh_token'] || request.headers.authorization?.split(' ')[1];
 
     if (!refreshToken) {
       throw new ValidationError('Unauthorized! No refresh token');
@@ -148,16 +143,11 @@ export const RefreshToken = async (request: any, response: Response, next: NextF
       role: string;
     };
 
-    if (!decoded || !decoded.id || !decoded.role) {
+    if (!decoded || !decoded.id || !decoded.role || decoded.role !== 'user') {
       return new JsonWebTokenError('Forbidden! Invalid refresh token');
     }
 
-    let account;
-    if (decoded.role === 'user') {
-      account = await prisma.users.findUnique({ where: { id: decoded.id } });
-    } else if (decoded.role === 'seller') {
-      account = await prisma.sellers.findUnique({ where: { id: decoded.id }, include: { shop: true } });
-    }
+    const account = await prisma.users.findUnique({ where: { id: decoded.id } });
 
     if (!account) {
       return new AuthError('User not found!');
@@ -174,15 +164,55 @@ export const RefreshToken = async (request: any, response: Response, next: NextF
       },
     );
 
-    if (decoded.role === 'user') {
-      setCookie(response, 'access_token', accessToken);
-    } else if (decoded.role === 'seller') {
-      setCookie(response, 'seller_access_token', accessToken);
+    setCookie(response, 'access_token', accessToken);
+    setCookie(response, 'refresh_token', refreshToken);
+
+    request.role = decoded.role;
+    response.status(201).json({ success: true });
+  } catch (error) {
+    return next(error);
+  }
+};
+
+//Refresh Token Seller
+export const RefreshSellerToken = async (request: any, response: Response, next: NextFunction) => {
+  try {
+    const refreshToken = request.cookies['seller_refresh_token'] || request.headers.authorization?.split(' ')[1];
+
+    if (!refreshToken) {
+      throw new ValidationError('Unauthorized! No refresh token');
     }
 
+    const decoded = jwt.verify(refreshToken, process.env.REFRESH_TOKEN_SECRET as string) as {
+      id: string;
+      role: string;
+    };
+
+    if (!decoded || !decoded.id || !decoded.role || decoded.role !== 'seller') {
+      return new JsonWebTokenError('Forbidden! Invalid refresh token');
+    }
+
+    const account = await prisma.sellers.findUnique({ where: { id: decoded.id }, include: { shop: true } });
+
+    if (!account) {
+      return new AuthError('Seller not found!');
+    }
+
+    const accessToken = jwt.sign(
+      {
+        id: decoded.id,
+        role: decoded.role,
+      },
+      process.env.ACCESS_TOKEN_SECRET as string,
+      {
+        expiresIn: '72h',
+      },
+    );
+
+    setCookie(response, 'seller_access_token', accessToken);
+    setCookie(response, 'seller_refresh_token', refreshToken);
+
     request.role = decoded.role;
-    // store the tokens in httpOnly secure cookie
-    setCookie(response, 'refresh_token', refreshToken);
     response.status(201).json({ success: true });
   } catch (error) {
     return next(error);
@@ -199,8 +229,6 @@ export const getUser = async (request: any, response: Response, next: NextFuncti
         return next(new AuthError('User or seller not found!'));
       }
 
-      response.clearCookie('seller_access_token');
-      response.clearCookie('seller_refresh_token');
       return next(new AuthError('User not Signed In!'));
     }
     response.status(200).json({ user });
@@ -291,7 +319,14 @@ export const verifySeller = async (request: Request, response: Response, next: N
     await verifyOTP(email, otp, next);
     const hashedPassword = await bcrypt.hash(password, 10);
     const seller = await prisma.sellers.create({
-      data: { name, email, password: hashedPassword, phone_number, country },
+      data: {
+        name,
+        email,
+        password: hashedPassword,
+        phone_number,
+        country,
+        shopId: null, // Explicitly set to null initially
+      },
     });
 
     response.status(200).json({
@@ -334,7 +369,7 @@ export const sellerLogin = async (request: Request, response: Response, next: Ne
         role: 'seller',
       },
       process.env.ACCESS_TOKEN_SECRET as string,
-      { expiresIn: '24h' },
+      { expiresIn: '72h' },
     );
 
     const refreshToken = jwt.sign(
@@ -343,7 +378,7 @@ export const sellerLogin = async (request: Request, response: Response, next: Ne
         role: 'seller',
       },
       process.env.REFRESH_TOKEN_SECRET as string,
-      { expiresIn: '7d' },
+      { expiresIn: '30d' },
     );
 
     //Because we set same cookies for user and seller, only one type of account can be logged in at a time.
@@ -351,9 +386,6 @@ export const sellerLogin = async (request: Request, response: Response, next: Ne
     setCookie(response, 'seller_access_token', accessToken);
     setCookie(response, 'seller_refresh_token', refreshToken);
 
-    response.clearCookie('access_token');
-    response.clearCookie('refresh_token');
-
     response.status(200).json({
       success: true,
       message: 'Seller logged in successfully!',
@@ -402,6 +434,12 @@ export const createNewShop = async (request: Request, response: Response, next:
       data: shopData,
     });
 
+    // Update the seller's shopId to link them
+    await prisma.sellers.update({
+      where: { id: sellerId },
+      data: { shopId: shop.id },
+    });
+
     response.status(200).json({
       success: true,
       shop,
@@ -417,12 +455,26 @@ export const logoutUser = async (request: any, response: Response, next: NextFun
     // Clear all authentication cookies
     response.clearCookie('access_token');
     response.clearCookie('refresh_token');
+
+    response.status(200).json({
+      success: true,
+      message: 'Logged out successfully!',
+    });
+  } catch (error) {
+    return next(error);
+  }
+};
+
+//Logout seller
+export const logoutSeller = async (request: any, response: Response, next: NextFunction) => {
+  try {
+    // Clear all authentication cookies
     response.clearCookie('seller_access_token');
     response.clearCookie('seller_refresh_token');
 
     response.status(200).json({
       success: true,
-      message: 'Logged out successfully!',
+      message: 'Seller logged out successfully!',
     });
   } catch (error) {
     return next(error);
@@ -659,6 +711,211 @@ export const changeUserPassword = async (request: any, response: Response, next:
   }
 };
 
+//Get shop information
+export const getShopInfo = async (request: any, response: Response, next: NextFunction) => {
+  try {
+    const sellerId = request.seller.id;
+
+    const shop = await prisma.shops.findUnique({
+      where: { sellerId },
+      include: {
+        avatar: true,
+        productAnalytics: true,
+      },
+    });
+
+    if (!shop) {
+      return next(new ValidationError('Shop not found!'));
+    }
+
+    response.status(200).json({
+      success: true,
+      shop,
+    });
+  } catch (error) {
+    return next(error);
+  }
+};
+
+//Get shop information by id for public access
+export const getShopInfoById = async (request: Request, response: Response, next: NextFunction) => {
+  try {
+    const { shopId } = request.params;
+
+    if (!shopId) {
+      return next(new ValidationError('Shop ID is required!'));
+    }
+
+    const shop = await prisma.shops.findUnique({
+      where: { id: shopId },
+      include: {
+        avatar: true,
+        productAnalytics: true,
+        products: {
+          where: {
+            isDeleted: false,
+            status: 'ACTIVE',
+          },
+          include: {
+            images: true,
+            shop: {
+              select: {
+                id: true,
+                name: true,
+              },
+            },
+          },
+          orderBy: {
+            createdAt: 'desc',
+          },
+        },
+        reviews: {
+          include: {
+            user: {
+              select: {
+                id: true,
+                name: true,
+              },
+            },
+          },
+          orderBy: {
+            createdAt: 'desc',
+          },
+        },
+        sellers: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+            country: true,
+            phone_number: true,
+          },
+        },
+      },
+    });
+
+    if (!shop) {
+      return next(new ValidationError('Shop not found!'));
+    }
+
+    const totalProducts = shop.products?.length || 0;
+    const totalReviews = shop.reviews?.length || 0;
+    const averageRating =
+      totalReviews > 0
+        ? shop.reviews.reduce((sum, review) => sum + (review.rating || 0), 0) / totalReviews
+        : shop.ratings || 0;
+
+    return response.status(200).json({
+      success: true,
+      shop: {
+        ...shop,
+        totalProducts,
+        totalReviews,
+        averageRating,
+      },
+    });
+  } catch (error) {
+    return next(error);
+  }
+};
+
+//Update shop information
+export const updateShopInfo = async (request: any, response: Response, next: NextFunction) => {
+  try {
+    const sellerId = request.seller.id;
+    const { name, bio, address, opening_hours, website, category, social_links } = request.body;
+
+    // Validate required fields
+    if (!name || !bio || !address || !opening_hours || !category) {
+      return next(new ValidationError('Missing required fields!'));
+    }
+
+    const shop = await prisma.shops.findUnique({
+      where: { sellerId },
+    });
+
+    if (!shop) {
+      return next(new ValidationError('Shop not found!'));
+    }
+
+    const updateData: any = {
+      name,
+      bio,
+      address,
+      opening_hours,
+      category,
+    };
+
+    if (website && website.trim()) {
+      updateData.website = website;
+    }
+
+    if (social_links && Array.isArray(social_links)) {
+      updateData.social_links = social_links;
+    }
+
+    const updatedShop = await prisma.shops.update({
+      where: { sellerId },
+      data: updateData,
+      include: {
+        avatar: true,
+        productAnalytics: true,
+      },
+    });
+
+    response.status(200).json({
+      success: true,
+      message: 'Shop information updated successfully!',
+      shop: updatedShop,
+    });
+  } catch (error) {
+    return next(error);
+  }
+};
+
+//Update shop cover banner
+export const updateShopCoverBanner = async (request: any, response: Response, next: NextFunction) => {
+  try {
+    const sellerId = request.seller.id;
+    const { coverBanner } = request.body;
+
+    if (!coverBanner || typeof coverBanner !== 'string') {
+      return next(new ValidationError('Cover banner file is required!'));
+    }
+
+    const shop = await prisma.shops.findUnique({
+      where: { sellerId },
+    });
+
+    if (!shop) {
+      return next(new ValidationError('Shop not found!'));
+    }
+
+    const uploadResponse = await imageKit.upload({
+      file: coverBanner,
+      fileName: `shop-cover-${sellerId}-${Date.now()}.jpg`,
+      folder: '/shops/cover-banners',
+    });
+
+    const updatedShop = await prisma.shops.update({
+      where: { sellerId },
+      data: { coverBanner: uploadResponse.url },
+      include: {
+        avatar: true,
+        productAnalytics: true,
+      },
+    });
+
+    response.status(200).json({
+      success: true,
+      message: 'Cover banner updated successfully!',
+      shop: updatedShop,
+    });
+  } catch (error) {
+    return next(error);
+  }
+};
+
 //Create stripe connect account link
 export const createStripeConnectLink = async (request: Request, response: Response, next: NextFunction) => {
   try {
@@ -708,8 +965,8 @@ export const createStripeConnectLink = async (request: Request, response: Respon
 
     const accountLink = await stripe.accountLinks.create({
       account: account.id,
-      refresh_url: `http://localhost:3000/seller/success`,
-      return_url: `http://localhost:3000/seller/success`,
+      refresh_url: `https://nextcart-seller.vercel.app/seller/success`,
+      return_url: `https://nextcart-seller.vercel.app/seller/success`,
       type: 'account_onboarding',
     });
 
diff --git a/apps/auth-service/src/main.ts b/apps/auth-service/src/main.ts
index e99afea..93f3fbf 100644
--- a/apps/auth-service/src/main.ts
+++ b/apps/auth-service/src/main.ts
@@ -24,7 +24,7 @@ app.use(
         callback(new Error('Not allowed by CORS'));
       }
     },
-    allowedHeaders: ['Authorization', 'Content-Type'],
+    allowedHeaders: ['Authorization', 'Content-Type', 'X-Auth-Actor', 'X-Auth-Role', 'X-Client-Role'],
     credentials: true,
   }),
 );
diff --git a/apps/auth-service/src/routes/auth.router.ts b/apps/auth-service/src/routes/auth.router.ts
index 79232cb..dfc3c82 100644
--- a/apps/auth-service/src/routes/auth.router.ts
+++ b/apps/auth-service/src/routes/auth.router.ts
@@ -7,16 +7,22 @@ import {
   createStripeConnectLink,
   deleteUserAddress,
   getSeller,
+  getShopInfo,
+  getShopInfoById,
   getUser,
   getUserAddresses,
   logoutUser,
+  logoutSeller,
   sellerLogin,
   SellerRegistration,
   setDefaultAddress,
+  updateShopCoverBanner,
+  updateShopInfo,
   updateUserAddress,
   UserForgotPassword,
   UserLogin,
   RefreshToken,
+  RefreshSellerToken,
   UserRegistration,
   UserResetPassword,
   UserVerification,
@@ -32,6 +38,7 @@ router.post('/user-registration', UserRegistration);
 router.post('/verify-user', UserVerification);
 router.post('/login-user', UserLogin);
 router.post('/refresh-token', RefreshToken);
+router.post('/refresh-seller-token', RefreshSellerToken);
 router.get('/logged-in-user', isAuthenticated, getUser);
 router.post('/forgot-password-user', UserForgotPassword);
 router.post('/verify-forgot-password-otp', UserVerifyForgotPasswordOTP);
@@ -43,6 +50,7 @@ router.post('/login-seller', sellerLogin);
 router.get('/logged-in-seller', isAuthenticated, isSeller, getSeller);
 router.post('/create-stripe-link', createStripeConnectLink);
 router.post('/logout', logoutUser);
+router.post('/logout-seller', logoutSeller);
 
 // User Address Management
 router.get('/user-addresses', isAuthenticated, getUserAddresses);
@@ -54,4 +62,10 @@ router.patch('/user-addresses/:id/set-default', isAuthenticated, setDefaultAddre
 // User Password Management
 router.put('/change-password', isAuthenticated, changeUserPassword);
 
+// Shop Management
+router.get('/shop-info/:shopId', getShopInfoById);
+router.get('/shop-info', isAuthenticated, isSeller, getShopInfo);
+router.put('/shop-info', isAuthenticated, isSeller, updateShopInfo);
+router.put('/shop-cover-banner', isAuthenticated, isSeller, updateShopCoverBanner);
+
 export default router;
diff --git a/apps/auth-service/src/utils/cookies/setCookie.ts b/apps/auth-service/src/utils/cookies/setCookie.ts
index fbf027c..0fb1d71 100644
--- a/apps/auth-service/src/utils/cookies/setCookie.ts
+++ b/apps/auth-service/src/utils/cookies/setCookie.ts
@@ -5,6 +5,6 @@ export const setCookie = (response: Response, name: string, value: string) => {
     httpOnly: true,
     secure: true,
     sameSite: 'none',
-    maxAge: 7 * 24 * 60 * 60 * 1000, //7 days
+    maxAge: 30 * 24 * 60 * 60 * 1000, //30 days
   });
 };
diff --git a/apps/chat-service/src/main.ts b/apps/chat-service/src/main.ts
index a26dcbf..4c2215e 100644
--- a/apps/chat-service/src/main.ts
+++ b/apps/chat-service/src/main.ts
@@ -20,7 +20,7 @@ app.use(
         callback(new Error('Not allowed by CORS'));
       }
     },
-    allowedHeaders: ['Authorization', 'Content-Type'],
+    allowedHeaders: ['Authorization', 'Content-Type', 'X-Auth-Actor', 'X-Auth-Role', 'X-Client-Role'],
     credentials: true,
   }),
 );
diff --git a/apps/order-service/src/main.ts b/apps/order-service/src/main.ts
index 3cb5ea9..d7c5c0a 100644
--- a/apps/order-service/src/main.ts
+++ b/apps/order-service/src/main.ts
@@ -23,7 +23,7 @@ app.use(
         callback(new Error('Not allowed by CORS'));
       }
     },
-    allowedHeaders: ['Authorization', 'Content-Type'],
+    allowedHeaders: ['Authorization', 'Content-Type', 'X-Auth-Actor', 'X-Auth-Role', 'X-Client-Role'],
     credentials: true,
   }),
 );
diff --git a/apps/order-service/src/utils/order.utils.ts b/apps/order-service/src/utils/order.utils.ts
index 72790db..4cc724e 100644
--- a/apps/order-service/src/utils/order.utils.ts
+++ b/apps/order-service/src/utils/order.utils.ts
@@ -149,6 +149,7 @@ export const sendOrderConfirmationEmail = async (
     name,
     cart,
     totalAmount,
+    sessionId,
     trackingUrl: `https://nextcart.com/order/${sessionId}`,
   });
 };
diff --git a/apps/product-service/src/main.ts b/apps/product-service/src/main.ts
index 28071cc..1e47794 100644
--- a/apps/product-service/src/main.ts
+++ b/apps/product-service/src/main.ts
@@ -24,7 +24,7 @@ app.use(
         callback(new Error('Not allowed by CORS'));
       }
     },
-    allowedHeaders: ['Authorization', 'Content-Type'],
+    allowedHeaders: ['Authorization', 'Content-Type', 'X-Auth-Actor', 'X-Auth-Role', 'X-Client-Role'],
     credentials: true,
   }),
 );
diff --git a/apps/seller-ui/src/app/(routes)/dashboard/inbox/page.tsx b/apps/seller-ui/src/app/(routes)/dashboard/inbox/page.tsx
index d86a437..91a1091 100644
--- a/apps/seller-ui/src/app/(routes)/dashboard/inbox/page.tsx
+++ b/apps/seller-ui/src/app/(routes)/dashboard/inbox/page.tsx
@@ -3,7 +3,7 @@
 import React, { Suspense, useState, useEffect } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
 import { useWebSocket } from 'apps/seller-ui/src/context/websocket-context';
-import { useConversations } from 'apps/seller-ui/src/hooks/chat';
+import { useConversations, useMarkAsSeen } from 'apps/seller-ui/src/hooks/chat';
 import { ChatHeader, ChatWindow, ConversationList, EmptyChatState } from 'apps/seller-ui/src/shared/organisms';
 
 const InboxPageInner: React.FC = () => {
@@ -12,7 +12,8 @@ const InboxPageInner: React.FC = () => {
 
   const searchParams = useSearchParams();
   const router = useRouter();
-  const { isConnected, isConnecting, error, ws } = useWebSocket();
+  const { isConnected, isConnecting, error } = useWebSocket();
+  const { mutate: markConversationAsSeen } = useMarkAsSeen();
 
   const conversationsQuery = useConversations();
   const conversations = conversationsQuery.data?.conversations || [];
@@ -45,13 +46,7 @@ const InboxPageInner: React.FC = () => {
         router.replace('/dashboard/inbox');
       }
 
-      // Also mark it as seen using ws
-      ws?.send(
-        JSON.stringify({
-          type: 'MARK_AS_SEEN',
-          conversationId: conversationId,
-        }),
-      );
+      markConversationAsSeen({ conversationId });
     }
   };
 
diff --git a/apps/seller-ui/src/app/(routes)/dashboard/logout/page.tsx b/apps/seller-ui/src/app/(routes)/dashboard/logout/page.tsx
new file mode 100644
index 0000000..09e585c
--- /dev/null
+++ b/apps/seller-ui/src/app/(routes)/dashboard/logout/page.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import useLogout from '../../../../hooks/useLogout';
+import { LogOut, AlertTriangle } from 'lucide-react';
+
+const LogoutPage = () => {
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+  const { logout } = useLogout();
+  const router = useRouter();
+
+  useEffect(() => {
+    // Show confirmation dialog immediately when page loads
+    setShowConfirmation(true);
+  }, []);
+
+  const handleLogoutConfirm = async () => {
+    setIsLoggingOut(true);
+    await logout();
+  };
+
+  const handleCancel = () => {
+    // Go back to dashboard
+    router.push('/');
+  };
+
+  if (!showConfirmation) {
+    return null;
+  }
+
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+      <div className="bg-card border border-border rounded-lg p-6 max-w-md w-full mx-4 shadow-lg">
+        <div className="flex items-center gap-3 mb-4">
+          <div className="p-2 bg-destructive/10 rounded-full">
+            <AlertTriangle className="h-5 w-5 text-destructive" />
+          </div>
+          <h3 className="text-lg font-semibold text-foreground">Confirm Logout</h3>
+        </div>
+
+        <p className="text-muted-foreground mb-6">
+          Are you sure you want to logout? You will need to login again to access your seller account.
+        </p>
+
+        <div className="flex gap-3">
+          <button
+            onClick={handleCancel}
+            disabled={isLoggingOut}
+            className="flex-1 px-4 py-2 border border-border rounded-lg text-foreground hover:bg-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleLogoutConfirm}
+            disabled={isLoggingOut}
+            className="flex-1 px-4 py-2 bg-destructive text-destructive-foreground rounded-lg hover:bg-destructive/90 transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isLoggingOut ? (
+              <>
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-destructive-foreground"></div>
+                Logging out...
+              </>
+            ) : (
+              <>
+                <LogOut className="h-4 w-4" />
+                Logout
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LogoutPage;
diff --git a/apps/seller-ui/src/app/(routes)/dashboard/notifications/page.tsx b/apps/seller-ui/src/app/(routes)/dashboard/notifications/page.tsx
new file mode 100644
index 0000000..ed63cd3
--- /dev/null
+++ b/apps/seller-ui/src/app/(routes)/dashboard/notifications/page.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import React from 'react';
+import { Bell, BellRing, ArrowLeft, Mail, MessageSquare, ShoppingCart } from 'lucide-react';
+import Link from 'next/link';
+
+const NotificationsPage = () => {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100">
+      <div className="container mx-auto max-w-4xl px-4 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <Link
+            href="/dashboard"
+            className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors mb-4"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back to Dashboard
+          </Link>
+          <h1 className="text-3xl font-bold text-gray-900">Notifications</h1>
+          <p className="text-gray-600 mt-2">Stay updated with your shop activity and customer interactions</p>
+        </div>
+
+        {/* Under Construction Card */}
+        <div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-8 text-center">
+          <div className="flex justify-center mb-6">
+            <div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center">
+              <BellRing className="w-10 h-10 text-blue-600" />
+            </div>
+          </div>
+
+          <h2 className="text-2xl font-bold text-gray-900 mb-4">Notifications Coming Soon</h2>
+
+          <p className="text-gray-600 mb-6 max-w-md mx-auto">
+            We're building a comprehensive notification system to keep you informed about orders, customer messages, and
+            important shop updates.
+          </p>
+
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+            <h3 className="font-semibold text-blue-900 mb-3">What's Coming:</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-blue-800">
+              <div className="flex items-center gap-2">
+                <ShoppingCart className="w-4 h-4" />
+                <span>New order notifications</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <MessageSquare className="w-4 h-4" />
+                <span>Customer messages</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Mail className="w-4 h-4" />
+                <span>Email notifications</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Bell className="w-4 h-4" />
+                <span>Push notifications</span>
+              </div>
+            </div>
+          </div>
+
+          <Link
+            href="/dashboard"
+            className="inline-flex items-center gap-2 bg-primary text-primary-foreground px-6 py-3 rounded-lg font-semibold hover:bg-primary/90 transition-colors"
+          >
+            <Bell className="w-4 h-4" />
+            Return to Dashboard
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NotificationsPage;
diff --git a/apps/seller-ui/src/app/(routes)/dashboard/settings/page.tsx b/apps/seller-ui/src/app/(routes)/dashboard/settings/page.tsx
new file mode 100644
index 0000000..7845895
--- /dev/null
+++ b/apps/seller-ui/src/app/(routes)/dashboard/settings/page.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import React from 'react';
+import { ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+import ShopSettings from '../../../../shared/organisms/shop/ShopSettings';
+
+const SettingsPage = () => {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 w-full">
+      <div className="container mx-auto max-w-6xl px-4 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <Link
+            href="/dashboard"
+            className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors mb-4"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back to Dashboard
+          </Link>
+          <h1 className="text-3xl font-bold text-gray-900">Settings</h1>
+          <p className="text-gray-600 mt-2">Manage your account and shop preferences</p>
+        </div>
+
+        {/* Shop Settings */}
+        <div className="mb-8">
+          <ShopSettings />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SettingsPage;
diff --git a/apps/seller-ui/src/app/(routes)/login/page.tsx b/apps/seller-ui/src/app/(routes)/login/page.tsx
index 39a497e..81827ba 100644
--- a/apps/seller-ui/src/app/(routes)/login/page.tsx
+++ b/apps/seller-ui/src/app/(routes)/login/page.tsx
@@ -1,8 +1,9 @@
 'use client';
 import { useRouter } from 'next/navigation';
-import React, { useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import Link from 'next/link';
+import { twMerge } from 'tailwind-merge';
 
 import { Eye, EyeOff } from 'lucide-react';
 import { useMutation } from '@tanstack/react-query';
@@ -14,10 +15,12 @@ type FormData = {
   email: string;
   password: string;
 };
-const page = () => {
+const LoginPage = () => {
   const [passwordVisible, setPasswordVisible] = useState(false);
   const [serverError, setServerError] = useState<string | null>(null);
   const [rememberMe, setRememberMe] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const [transitionState, setTransitionState] = useState<'idle' | 'toSignup'>('idle');
   const router = useRouter();
   const queryClient = useQueryClient();
 
@@ -27,6 +30,11 @@ const page = () => {
     formState: { errors },
   } = useForm<FormData>();
 
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => setIsReady(true));
+    return () => cancelAnimationFrame(frame);
+  }, []);
+
   const loginMutation = useMutation({
     mutationFn: async (data: FormData) => {
       const response = await axios.post(`${process.env.NEXT_PUBLIC_SERVER_URI}/api/login-seller`, data, {
@@ -49,104 +57,164 @@ const page = () => {
   const onSubmit = (data: FormData) => {
     loginMutation.mutate(data);
   };
+  const handleSwitch = () => {
+    if (transitionState !== 'idle') return;
+    setTransitionState('toSignup');
+    setTimeout(() => {
+      router.push('/signup');
+    }, 380);
+  };
+
+  const cardClass = useMemo(
+    () =>
+      twMerge(
+        'relative w-full max-w-5xl overflow-hidden rounded-[32px] border border-border/60 bg-card text-foreground shadow-[0_40px_80px_-40px_rgba(15,23,42,0.45)] transition-all duration-500 ease-[cubic-bezier(0.68,-0.55,0.265,1.35)] dark:shadow-[0_40px_80px_-40px_rgba(2,6,23,0.65)] will-change-transform',
+        !isReady && 'translate-y-10 opacity-0',
+        isReady && transitionState === 'idle' && 'translate-y-0 opacity-100',
+        transitionState === 'toSignup' && '-translate-x-[18%] rotate-1 scale-95 opacity-0',
+      ),
+    [isReady, transitionState],
+  );
+
+  const inputClasses =
+    'mt-2 w-full rounded-xl border border-border/70 bg-background px-4 py-3 text-sm font-medium text-foreground shadow-sm transition-shadow focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/70';
+
   return (
-    <div className="w-full py-10 min-h-screen bg-card">
-      <h1 className="text-4xl font-Poppins font-semibold text-center">Login</h1>
-      <p className="text-center text-lg font-medium py-3">Home . Login</p>
-      <div className="w-full flex justify-center">
-        <div className="md:w-[480px] p-8 shadow rounded-lg flex flex-col">
-          <h3 className="text-3xl font-semibold text-center mb-2">Login to NextCart</h3>
-          <p className="text-center text-gray-500 mb-4">
-            Don't have an account?{' '}
-            <Link href="/signup" className="text-primary font-semibold">
-              Sign up
-            </Link>
-          </p>
-
-          <div className="flex items-center my-5 text-sm">
-            <div className="flex flex-1 border-t border-border" />
-            <span className="px-3">Or Sign in with email</span>
-            <div className="flex flex-1 border-t border-border" />
-          </div>
-
-          <form onSubmit={handleSubmit(onSubmit)}>
-            <div className="mb-4">
-              <label htmlFor="email" className="block text-sm font-medium mb-1">
-                Email
-              </label>
-              <input
-                type="email"
-                id="email"
-                {...register('email', {
-                  required: 'Email is required.',
-                  pattern: {
-                    value: EMAIL_REGEX,
-                    message: 'Invalid Email',
-                  },
-                })}
-                className="mt-1 p-2 w-full border rounded-md outline-0 mb-1 dark:text-black"
-              />
-              {errors.email && <span className="text-red-500 text-sm">{String(errors.email.message)}</span>}
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-background via-muted/60 to-background px-4 py-16 transition-colors duration-300">
+      <div className={cardClass}>
+        <div className="relative grid w-full gap-12 lg:grid-cols-2">
+          <aside className="relative hidden bg-gradient-to-br from-slate-950 via-slate-900 to-slate-900 text-white transition-colors duration-300 dark:from-slate-900 dark:via-slate-950 dark:to-black lg:flex">
+            <div className="absolute inset-0 opacity-20">
+              <div className="absolute -left-24 top-16 h-52 w-52 rounded-full bg-white/20 blur-3xl dark:bg-white/10" />
+              <div className="absolute -bottom-12 right-0 h-64 w-64 rounded-full bg-primary/40 blur-3xl" />
             </div>
-            <div className="mb-4 relative">
-              <label htmlFor="password" className="block text-sm font-medium mb-1">
-                Password
-              </label>
-              <input
-                type={passwordVisible ? 'text' : 'password'}
-                id="password"
-                {...register('password', {
-                  required: 'Password is required.',
-                  minLength: {
-                    value: 6,
-                    message: 'Password must be at least 6 characters.',
-                  },
-                })}
-                className="mt-1 p-2 w-full border rounded-md outline-0 mb-1 dark:text-black"
-              />
+            <div className="relative z-10 flex w-full flex-col justify-between p-12">
+              <div className="space-y-4">
+                <p className="text-xs font-semibold uppercase tracking-[0.3em] text-slate-200/70">New here?</p>
+                <h2 className="text-3xl font-semibold leading-tight">Don't have an account?</h2>
+                <p className="text-sm text-slate-200/80">
+                  Join the marketplace where vinyl meets value and discovery.
+                </p>
+              </div>
               <button
                 type="button"
-                className="absolute top-[50%] right-3 p-1  flex items-center text-sm leading-5"
-                onClick={() => setPasswordVisible(!passwordVisible)}
+                onClick={handleSwitch}
+                className="mt-8 inline-flex w-full items-center justify-center rounded-full bg-white px-6 py-3 text-sm font-semibold text-slate-900 transition-all duration-300 hover:-translate-y-0.5 hover:bg-slate-100 hover:shadow-lg dark:bg-foreground dark:text-background dark:hover:bg-foreground/90"
               >
-                {passwordVisible ? (
-                  <EyeOff className="h-5 w-5 text-gray-500" />
-                ) : (
-                  <Eye className="h-5 w-5 text-gray-500" />
-                )}
+                Sign up
               </button>
-              {errors.password && <span className="text-red-500 text-sm">{String(errors.password.message)}</span>}
             </div>
-            <div className="flex items-center justify-between mb-4">
-              <div className="flex items-center">
+          </aside>
+
+          <section className="relative flex flex-col justify-center px-6 py-12 sm:px-12">
+            <div className="mb-6 flex flex-col gap-2 text-center lg:text-left">
+              <p className="text-xs font-semibold uppercase tracking-[0.3em] text-primary">Welcome back</p>
+              <h1 className="text-3xl font-semibold text-foreground sm:text-4xl">Login to NextCart</h1>
+              <p className="text-sm text-muted-foreground">
+                We're glad to see you again. Enter your details to access your seller hub.
+              </p>
+            </div>
+
+            <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+              <div>
+                <label htmlFor="email" className="text-sm font-medium text-muted-foreground">
+                  Email address
+                </label>
                 <input
-                  type="checkbox"
-                  id="rememberMe"
-                  checked={rememberMe}
-                  onChange={(e) => setRememberMe(e.target.checked)}
-                  className="mr-2"
+                  type="email"
+                  id="email"
+                  {...register('email', {
+                    required: 'Email is required.',
+                    pattern: {
+                      value: EMAIL_REGEX,
+                      message: 'Invalid Email',
+                    },
+                  })}
+                  className={inputClasses}
                 />
-                <label htmlFor="rememberMe" className="text-sm">
+                {errors.email && (
+                  <span className="mt-2 block text-xs font-medium text-destructive">{String(errors.email.message)}</span>
+                )}
+              </div>
+
+              <div>
+                <label htmlFor="password" className="text-sm font-medium text-muted-foreground">
+                  Password
+                </label>
+                <div className="relative">
+                  <input
+                    type={passwordVisible ? 'text' : 'password'}
+                    id="password"
+                    {...register('password', {
+                      required: 'Password is required.',
+                      minLength: {
+                        value: 6,
+                        message: 'Password must be at least 6 characters.',
+                      },
+                    })}
+                    className={inputClasses}
+                  />
+                  <button
+                    type="button"
+                    className="absolute inset-y-0 right-3 flex items-center text-muted-foreground transition hover:text-primary"
+                    onClick={() => setPasswordVisible(!passwordVisible)}
+                    aria-label={passwordVisible ? 'Hide password' : 'Show password'}
+                  >
+                    {passwordVisible ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+                  </button>
+                </div>
+                {errors.password && (
+                  <span className="mt-2 block text-xs font-medium text-destructive">
+                    {String(errors.password.message)}
+                  </span>
+                )}
+              </div>
+
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                <label className="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground">
+                  <input
+                    type="checkbox"
+                    id="rememberMe"
+                    checked={rememberMe}
+                    onChange={(e) => setRememberMe(e.target.checked)}
+                    className="h-4 w-4 rounded border-border text-primary focus:ring-primary"
+                  />
                   Remember me
                 </label>
+                <Link
+                  href="/forgot-password"
+                  className="text-sm font-semibold text-primary transition hover:text-primary/80"
+                >
+                  Forgot password?
+                </Link>
               </div>
-              <Link href="/forgot-password" className="text-sm text-primary hover:underline">
-                Forgot Password?
-              </Link>
+
+              <button
+                type="submit"
+                className="inline-flex w-full items-center justify-center rounded-full bg-gradient-to-r from-primary via-primary to-[#ff7a6d] px-6 py-3 text-sm font-semibold text-primary-foreground shadow-lg shadow-primary/30 transition hover:scale-[1.01] hover:shadow-primary/50"
+                disabled={loginMutation.isPending}
+              >
+                {loginMutation.isPending ? 'Logging in…' : 'Login'}
+              </button>
+              {serverError && <p className="text-center text-xs font-semibold text-destructive">{serverError}</p>}
+            </form>
+
+            <div className="mt-6 flex flex-col gap-3 rounded-2xl border border-border bg-muted/80 p-6 text-center text-sm text-muted-foreground shadow-sm transition-colors duration-300 lg:hidden">
+              <p className="font-semibold text-foreground">Don't have an account?</p>
+              <p className="text-xs text-muted-foreground">Join the marketplace — where vinyl meets value and discovery.</p>
+              <button
+                type="button"
+                onClick={handleSwitch}
+                className="inline-flex items-center justify-center rounded-full bg-foreground px-5 py-2 text-xs font-semibold text-background transition hover:bg-foreground/90"
+              >
+                Sign up
+              </button>
             </div>
-            <button
-              type="submit"
-              className="w-full bg-primary text-white py-2 px-4 rounded-md hover:bg-primary-dark transition-colors duration-300"
-              disabled={loginMutation.isPending}
-            >
-              {loginMutation.isPending ? 'Logging in...' : 'Login'}
-            </button>
-            {serverError && <p className="text-red-500 text-sm mt-2 text-center">{serverError}</p>}
-          </form>
+          </section>
         </div>
       </div>
     </div>
   );
 };
 
-export default page;
+export default LoginPage;
diff --git a/apps/seller-ui/src/app/(routes)/signup/page.tsx b/apps/seller-ui/src/app/(routes)/signup/page.tsx
index ce69752..c410f62 100644
--- a/apps/seller-ui/src/app/(routes)/signup/page.tsx
+++ b/apps/seller-ui/src/app/(routes)/signup/page.tsx
@@ -1,7 +1,8 @@
 'use client';
-import React, { useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { twMerge } from 'tailwind-merge';
 
 import { EMAIL_REGEX, PHONE_REGEX } from 'apps/seller-ui/src/configs/constants';
 import { Eye, EyeOff } from 'lucide-react';
@@ -16,15 +17,13 @@ type FormData = {
   name: string;
   email: string;
   password: string;
+  phone_number: string;
+  country: string;
 };
 
-type UserData = {
-  name: string;
-  email: string;
-  password: string;
-};
+type UserData = FormData;
 
-const page = () => {
+const SignupPage = () => {
   const [activeStep, setActiveStep] = useState(1);
   const [passwordVisible, setPasswordVisible] = useState(false);
   const [serverError, setServerError] = useState<string | null>(null);
@@ -32,13 +31,22 @@ const page = () => {
   const [canResend, setCanResend] = useState(false);
   const [timer, setTimer] = useState(0);
   const [sellerData, setSellerData] = useState<UserData | null>(null);
-  const [sellerId, setSellerId] = useState();
+  const [sellerId, setSellerId] = useState<string | undefined>();
+  const [isReady, setIsReady] = useState(false);
+  const [transitionState, setTransitionState] = useState<'idle' | 'toLogin'>('idle');
+
+  const router = useRouter();
 
   const {
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm();
+  } = useForm<FormData>();
+
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => setIsReady(true));
+    return () => cancelAnimationFrame(frame);
+  }, []);
 
   const signUpMutation = useMutation({
     mutationFn: async (data: FormData) => {
@@ -69,15 +77,24 @@ const page = () => {
     },
 
     onSuccess: (data) => {
+      setServerError(null);
       setSellerId(data?.seller?.id);
       setActiveStep(2);
     },
+
+    onError: (error: AxiosError) => {
+      console.error('OTP Verification Error:', error);
+      const errorMessage =
+        (error.response?.data as any)?.message || error.message || 'Something went wrong. Please try again.';
+      setServerError(errorMessage);
+    },
   });
-  const onSubmit = (data: any) => {
+  const onSubmit = (data: FormData) => {
     signUpMutation.mutate(data);
   };
 
   const handleOtpComplete = (otp: string) => {
+    setServerError(null); // Clear any previous errors
     verifyOtpMutation.mutate(otp);
   };
 
@@ -87,196 +104,305 @@ const page = () => {
     }
   };
 
+  const handleSwitch = () => {
+    if (transitionState !== 'idle') return;
+    setTransitionState('toLogin');
+    setTimeout(() => {
+      router.push('/login');
+    }, 380);
+  };
+
+  const steps = [
+    { id: 1, label: 'Create Account' },
+    { id: 2, label: 'Setup Shop' },
+    { id: 3, label: 'Connect Bank' },
+  ];
+
+  const cardClass = useMemo(
+    () =>
+      twMerge(
+        'relative w-full max-w-5xl overflow-hidden rounded-[32px] border border-border/60 bg-card text-foreground shadow-[0_40px_90px_-45px_rgba(15,23,42,0.55)] transition-all duration-500 ease-[cubic-bezier(0.68,-0.55,0.265,1.35)] dark:shadow-[0_40px_90px_-45px_rgba(2,6,23,0.65)] will-change-transform',
+        !isReady && 'translate-y-10 opacity-0',
+        isReady && transitionState === 'idle' && 'translate-y-0 opacity-100',
+        transitionState === 'toLogin' && 'translate-x-[18%] -rotate-1 scale-95 opacity-0',
+      ),
+    [isReady, transitionState],
+  );
+
+  const inputClasses =
+    'mt-2 w-full rounded-xl border border-border/70 bg-background px-4 py-3 text-sm font-medium text-foreground shadow-sm transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/70';
+
+  const selectClasses =
+    'mt-2 w-full rounded-xl border border-border/70 bg-background px-4 py-3 text-sm font-medium text-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/70';
+
   return (
-    <div className="w-full flex flex-col items-center pt-10 min-h-svh">
-      {/**Stepper */}
-      <div className="relative flex items-center justify-between md:w-[50%] mb-8">
-        <div className="absolute top-5 left-10 right-10 h-1 bg-border -z-10" />
-        {[1, 2, 3].map((step) => {
-          return (
-            <div key={step} className="relative z-10 flex flex-col items-center">
-              <div
-                className={`w-10 h-10 items-center justify-center rounded-full color-foreground font-bold flex ${
-                  step <= activeStep ? 'bg-primary' : 'bg-muted'
-                }`}
-              >
-                {step}
-              </div>
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-background via-muted/60 to-background px-4 py-16 transition-colors duration-300">
+      <div className={cardClass}>
+        <div className="relative grid w-full gap-12 lg:grid-cols-2">
+          <section className="flex flex-col px-6 py-10 sm:px-12">
+            <header className="mb-8 text-center lg:text-left">
+              <p className="text-xs font-semibold uppercase tracking-[0.35em] text-primary">Create your shop</p>
+              <h1 className="mt-3 text-3xl font-semibold text-foreground sm:text-4xl">Become a NextCart Seller</h1>
+              <p className="mt-3 text-sm text-muted-foreground">
+                Complete the steps below to open your storefront and start selling.
+              </p>
+            </header>
 
-              <span className="mt-2 text-sm text-center">
-                {step === 1 ? 'Create Account' : step === 2 ? 'Setup Shop' : 'Connect bank'}
-              </span>
+            <div className="relative mb-8 hidden justify-between gap-4 lg:flex">
+              <div className="absolute left-8 right-8 top-6 h-px bg-border/60" />
+              {steps.map((step, index) => {
+                const isCompleted = step.id < activeStep;
+                const isActive = step.id === activeStep;
+                return (
+                  <div key={step.id} className="relative z-10 flex flex-1 flex-col items-center">
+                    <div
+                      className={twMerge(
+                        'flex h-12 w-12 items-center justify-center rounded-full border-2 text-sm font-semibold transition-all duration-300',
+                        isCompleted || isActive
+                          ? 'border-transparent bg-gradient-to-r from-primary via-primary to-[#ff7a6d] text-white shadow-lg shadow-primary/30'
+                          : 'border-border bg-background text-muted-foreground',
+                      )}
+                    >
+                      {step.id}
+                    </div>
+                    <p className="mt-3 text-center text-xs font-semibold text-muted-foreground">{step.label}</p>
+                    {index < steps.length - 1 && (
+                      <div
+                        className={twMerge(
+                          'absolute right-[-50%] top-6 h-px w-full',
+                          isCompleted ? 'bg-gradient-to-r from-primary via-primary to-[#ff7a6d]' : 'bg-transparent',
+                        )}
+                      />
+                    )}
+                  </div>
+                );
+              })}
             </div>
-          );
-        })}
-      </div>
 
-      {/**Steps Content */}
-      <div className="md:w-[480px] p-8 shadow rounded-lg">
-        {activeStep === 1 && (
-          <>
-            {showOtpInput ? (
-              <div className="flex flex-col items-center">
-                <p className="text-center text-gray-500 mb-4">
-                  A verification code has been sent to {sellerData?.email}.
-                </p>
-                <OtpInput
-                  length={4}
-                  onComplete={handleOtpComplete}
-                  onResend={handleResendOtp}
-                  canResend={canResend}
-                  resendTimer={timer}
-                  isLoading={verifyOtpMutation.isPending}
-                  error={
-                    verifyOtpMutation.isError && verifyOtpMutation.error instanceof AxiosError
-                      ? verifyOtpMutation.error.message
-                      : null
-                  }
-                />
-                <button
-                  onClick={() => setShowOtpInput(false)}
-                  className="mt-4 text-primary font-semibold hover:underline"
-                >
-                  Go back to signup
-                </button>
-              </div>
-            ) : (
-              <form onSubmit={handleSubmit(onSubmit)}>
-                <h3 className="text-3xl font-semibold text-center mb-2">Create Account</h3>
-                <div className="mb-4">
-                  <label htmlFor="name" className="block text-sm font-medium mb-1">
-                    Name
-                  </label>
-                  <input
-                    type="text"
-                    id="name"
-                    {...register('name', {
-                      required: 'Name is required.',
-                    })}
-                    className="mt-1 p-2 w-full border rounded-md outline-0 mb-1 dark:text-black"
-                  />
-                  {errors.name && <span className="text-red-500 text-sm">{String(errors.name.message)}</span>}
-                </div>
-                <div className="mb-4">
-                  <label htmlFor="email" className="block text-sm font-medium mb-1">
-                    Email
-                  </label>
-                  <input
-                    type="email"
-                    id="email"
-                    {...register('email', {
-                      required: 'Email is required.',
-                      pattern: {
-                        value: EMAIL_REGEX,
-                        message: 'Invalid Email',
-                      },
-                    })}
-                    className="mt-1 p-2 w-full border rounded-md outline-0 mb-1 dark:text-black"
-                  />
-                  {errors.email && <span className="text-red-500 text-sm">{String(errors.email.message)}</span>}
-                </div>
-                <div className="mb-4 relative">
-                  <label htmlFor="phone" className="block text-sm font-medium mb-1">
-                    Phone Number
-                  </label>
-                  <input
-                    type="text"
-                    id="phone"
-                    placeholder="+91 9876543210"
-                    className="mt-1 p-2 w-full border rounded-md outline-0 mb-1 dark:text-black"
-                    {...register('phone_number', {
-                      required: 'Phone number is required.',
-                      pattern: {
-                        value: PHONE_REGEX,
-                        message: 'Invalid Phone Number',
-                      },
-                      minLength: {
-                        value: 10,
-                        message: 'Phone number must be at least 10 digits.',
-                      },
-                      maxLength: {
-                        value: 14,
-                        message: 'Phone number must be at most 10 digits.',
-                      },
-                    })}
-                  />
-                  {errors.phone_number && (
-                    <span className="text-red-500 text-sm">{String(errors.phone_number.message)}</span>
+            <div className="grow">
+              {activeStep === 1 && (
+                <>
+                  {showOtpInput ? (
+                    <div className="flex flex-col items-center gap-6 rounded-2xl border border-primary/30 bg-primary/10 p-8 text-center shadow-sm dark:border-primary/40 dark:bg-primary/15">
+                      <p className="text-sm text-muted-foreground">
+                        A verification code has been sent to{' '}
+                        <span className="font-semibold text-foreground">{sellerData?.email}</span>.
+                      </p>
+                      <OtpInput
+                        length={4}
+                        onComplete={handleOtpComplete}
+                        onResend={handleResendOtp}
+                        canResend={canResend}
+                        resendTimer={timer}
+                        isLoading={verifyOtpMutation.isPending}
+                        error={serverError}
+                      />
+                      <button
+                        onClick={() => setShowOtpInput(false)}
+                        className="text-xs font-semibold text-primary transition hover:text-primary/80"
+                        type="button"
+                      >
+                        Go back to sign up
+                      </button>
+                    </div>
+                  ) : (
+                    <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+                      <div>
+                        <label htmlFor="name" className="text-sm font-semibold text-muted-foreground">
+                          Full name
+                        </label>
+                        <input
+                          type="text"
+                          id="name"
+                          {...register('name', {
+                            required: 'Name is required.',
+                          })}
+                          className={inputClasses}
+                        />
+                        {errors.name && (
+                          <span className="mt-2 block text-xs font-semibold text-destructive">
+                            {String(errors.name.message)}
+                          </span>
+                        )}
+                      </div>
+
+                      <div>
+                        <label htmlFor="email" className="text-sm font-semibold text-muted-foreground">
+                          Email address
+                        </label>
+                        <input
+                          type="email"
+                          id="email"
+                          {...register('email', {
+                            required: 'Email is required.',
+                            pattern: {
+                              value: EMAIL_REGEX,
+                              message: 'Invalid Email',
+                            },
+                          })}
+                          className={inputClasses}
+                        />
+                        {errors.email && (
+                          <span className="mt-2 block text-xs font-semibold text-destructive">
+                            {String(errors.email.message)}
+                          </span>
+                        )}
+                      </div>
+
+                      <div>
+                        <label htmlFor="phone" className="text-sm font-semibold text-muted-foreground">
+                          Phone number
+                        </label>
+                        <input
+                          type="text"
+                          id="phone"
+                          placeholder="+91 9876543210"
+                          className={inputClasses}
+                          {...register('phone_number', {
+                            required: 'Phone number is required.',
+                            pattern: {
+                              value: PHONE_REGEX,
+                              message: 'Invalid Phone Number',
+                            },
+                            minLength: {
+                              value: 10,
+                              message: 'Phone number must be at least 10 digits.',
+                            },
+                            maxLength: {
+                              value: 14,
+                              message: 'Phone number must be at most 10 digits.',
+                            },
+                          })}
+                        />
+                        {errors.phone_number && (
+                          <span className="mt-2 block text-xs font-semibold text-destructive">
+                            {String(errors.phone_number.message)}
+                          </span>
+                        )}
+                      </div>
+
+                      <div>
+                        <label htmlFor="country" className="text-sm font-semibold text-muted-foreground">
+                          Country
+                        </label>
+                        <select
+                          {...register('country', { required: 'Country is required.' })}
+                          className={selectClasses}
+                        >
+                          {countries.map((country) => (
+                            <option key={country.name} value={country.code}>
+                              {country.name}
+                            </option>
+                          ))}
+                        </select>
+                        {errors.country && (
+                          <span className="mt-2 block text-xs font-semibold text-destructive">
+                            {String(errors.country.message)}
+                          </span>
+                        )}
+                      </div>
+
+                      <div>
+                        <label htmlFor="password" className="text-sm font-semibold text-muted-foreground">
+                          Password
+                        </label>
+                        <div className="relative">
+                          <input
+                            type={passwordVisible ? 'text' : 'password'}
+                            id="password"
+                            {...register('password', {
+                              required: 'Password is required.',
+                              minLength: {
+                                value: 6,
+                                message: 'Password must be at least 6 characters.',
+                              },
+                            })}
+                            className={inputClasses}
+                          />
+                          <button
+                            type="button"
+                            className="absolute inset-y-0 right-3 flex items-center text-muted-foreground transition hover:text-primary"
+                            onClick={() => setPasswordVisible(!passwordVisible)}
+                            aria-label={passwordVisible ? 'Hide password' : 'Show password'}
+                          >
+                            {passwordVisible ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+                          </button>
+                        </div>
+                        {errors.password && (
+                          <span className="mt-2 block text-xs font-semibold text-destructive">
+                            {String(errors.password.message)}
+                          </span>
+                        )}
+                      </div>
+
+                      <button
+                        type="submit"
+                        className="inline-flex w-full items-center justify-center rounded-full bg-gradient-to-r from-primary via-primary to-[#ff7a6d] px-6 py-3 text-sm font-semibold text-primary-foreground shadow-lg shadow-primary/25 transition hover:scale-[1.01] hover:shadow-primary/40"
+                        disabled={signUpMutation.isPending}
+                      >
+                        {signUpMutation.isPending ? 'Sending code…' : 'Send verification code'}
+                      </button>
+                      {serverError && (
+                        <p className="text-center text-xs font-semibold text-destructive">{serverError}</p>
+                      )}
+                    </form>
                   )}
+                </>
+              )}
+
+              {activeStep === 2 && sellerId ? (
+                <div className="space-y-6 text-muted-foreground">
+                  <CreateShop sellerId={sellerId} setActiveStep={setActiveStep} />
                 </div>
-                <div className="mb-4">
-                  <label htmlFor="country" className="block text-sm font-medium mb-1">
-                    Country
-                  </label>
-                  <select
-                    className="w-full p-2 border border-border outline-0 rounded-[4px]"
-                    {...register('country', {
-                      required: 'Country is required.',
-                    })}
-                  >
-                    {countries.map((country) => (
-                      <option key={country.name} value={country.code}>
-                        {country.name}
-                      </option>
-                    ))}
-                  </select>
-
-                  {errors.country && <span className="text-red-500 text-sm">{String(errors.country.message)}</span>}
-                </div>
-                <div className="mb-4 relative">
-                  <label htmlFor="password" className="block text-sm font-medium mb-1">
-                    Password
-                  </label>
-                  <input
-                    type={passwordVisible ? 'text' : 'password'}
-                    id="password"
-                    {...register('password', {
-                      required: 'Password is required.',
-                      minLength: {
-                        value: 6,
-                        message: 'Password must be at least 6 characters.',
-                      },
-                    })}
-                    className="mt-1 p-2 w-full border rounded-md outline-0 mb-1 dark:text-black"
-                  />
-                  <button
-                    type="button"
-                    className="absolute top-[50%] right-3 p-1  flex items-center text-sm leading-5"
-                    onClick={() => setPasswordVisible(!passwordVisible)}
-                  >
-                    {passwordVisible ? (
-                      <EyeOff className="h-5 w-5 text-gray-500" />
-                    ) : (
-                      <Eye className="h-5 w-5 text-gray-500" />
-                    )}
-                  </button>
-                  {errors.password && <span className="text-red-500 text-sm">{String(errors.password.message)}</span>}
+              ) : null}
+              {activeStep === 3 && sellerId ? (
+                <div className="space-y-6 text-muted-foreground">
+                  <ConnectBank sellerId={sellerId} />
                 </div>
-                <button
-                  type="submit"
-                  className="w-full bg-primary text-white py-2 px-4 rounded-md hover:bg-primary-dark transition-colors duration-300"
-                  disabled={signUpMutation.isPending}
-                >
-                  {signUpMutation.isPending ? 'Signing up...' : 'Sign Up'}
-                </button>
-                {serverError && <p className="text-red-500 text-sm mt-2 text-center">{serverError}</p>}
-
-                <p className="text-center text-gray-500 mt-4">
-                  Already have an account?{' '}
-                  <Link href="/login" className="text-primary font-semibold hover:underline">
-                    Login
-                  </Link>
-                </p>
-              </form>
-            )}
-          </>
-        )}
+              ) : null}
+            </div>
+
+            <div className="mt-6 flex flex-col gap-3 rounded-2xl border border-border bg-muted/80 p-6 text-center text-sm text-muted-foreground shadow-sm transition-colors duration-300 lg:hidden">
+              <p className="font-semibold text-foreground">Already have an account?</p>
+              <p className="text-xs text-muted-foreground">
+                Log in to manage your profile, view orders, and shop easily.
+              </p>
+              <button
+                type="button"
+                onClick={handleSwitch}
+                className="inline-flex items-center justify-center rounded-full bg-foreground px-5 py-2 text-xs font-semibold text-background transition hover:bg-foreground/90"
+              >
+                Login
+              </button>
+            </div>
+          </section>
 
-        {activeStep === 2 && sellerId && <CreateShop sellerId={sellerId} setActiveStep={setActiveStep} />}
-        {activeStep === 3 && sellerId && <ConnectBank sellerId={sellerId} />}
+          <aside className="relative hidden bg-gradient-to-br from-slate-950 via-slate-900 to-slate-900 text-white transition-colors duration-300 dark:from-slate-900 dark:via-slate-950 dark:to-black lg:flex">
+            <div className="absolute inset-0 opacity-20">
+              <div className="absolute -left-24 top-16 h-52 w-52 rounded-full bg-white/20 blur-3xl dark:bg-white/10" />
+              <div className="absolute -bottom-12 right-0 h-64 w-64 rounded-full bg-primary/40 blur-3xl" />
+            </div>
+            <div className="relative z-10 flex w-full flex-col justify-between p-12">
+              <div className="space-y-4">
+                <p className="text-xs font-semibold uppercase tracking-[0.3em] text-slate-200/70">Already set up?</p>
+                <h2 className="text-3xl font-semibold leading-tight">Already have an account?</h2>
+                <p className="text-sm text-slate-200/80">
+                  Log in to manage your profile, view orders, and keep growing your shop.
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={handleSwitch}
+                className="mt-8 inline-flex w-full items-center justify-center rounded-full bg-white px-6 py-3 text-sm font-semibold text-slate-900 transition-all duration-300 hover:-translate-y-0.5 hover:bg-slate-100 hover:shadow-lg dark:bg-foreground dark:text-background dark:hover:bg-foreground/90"
+              >
+                Login
+              </button>
+            </div>
+          </aside>
+        </div>
       </div>
     </div>
   );
 };
 
-export default page;
+export default SignupPage;
diff --git a/apps/seller-ui/src/app/page.tsx b/apps/seller-ui/src/app/page.tsx
index db5997b..6e14134 100644
--- a/apps/seller-ui/src/app/page.tsx
+++ b/apps/seller-ui/src/app/page.tsx
@@ -31,20 +31,132 @@ const HomePage = () => {
   type HomeProduct = { id: string; title: string; starting_date?: string | null; ending_date?: string | null };
   const events = useMemo(() => (products as HomeProduct[]).filter((p) => p.starting_date), [products]);
 
-  // Unauthenticated friendly page
-  if (!seller && !sellerLoading) {
+  // Show loading state while checking authentication
+  if (sellerLoading) {
     return (
       <main className="container mx-auto max-w-6xl px-4 py-8">
-        <div className="rounded-xl border border-border bg-card text-card-foreground shadow p-8 text-center">
-          <h1 className="text-2xl md:text-3xl font-semibold tracking-tight">Welcome to Seller Center</h1>
-          <p className="mt-2 text-muted-foreground">Sign in to view your shop overview, products, orders, and more.</p>
-          <div className="mt-6">
-            <Link
-              href="/login"
-              className="inline-flex items-center rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium shadow hover:opacity-95"
-            >
-              Login
-            </Link>
+        <div className="flex items-center justify-center min-h-[60vh]">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
+            <p className="text-muted-foreground">Loading...</p>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  // Unauthenticated friendly page
+  if (!seller) {
+    return (
+      <main className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100">
+        <div className="container mx-auto max-w-6xl px-4 py-12">
+          {/* Hero Section */}
+          <div className="text-center mb-16">
+            <div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-r from-primary to-primary/80 rounded-full mb-6">
+              <span className="text-3xl font-bold text-white">S</span>
+            </div>
+            <h1 className="text-4xl md:text-6xl font-bold tracking-tight text-gray-900 mb-6">
+              Welcome to{' '}
+              <span className="bg-gradient-to-r from-primary to-primary/80 bg-clip-text text-transparent">
+                Seller Center
+              </span>
+            </h1>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto mb-8">
+              Your gateway to building and growing your online business. Manage products, track orders, and connect with
+              customers all in one place.
+            </p>
+          </div>
+
+          {/* Features Grid */}
+          <div className="grid md:grid-cols-3 gap-8 mb-16">
+            <div className="text-center p-6 rounded-2xl bg-white/60 backdrop-blur-sm border border-gray-200/50 shadow-sm">
+              <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-4">
+                <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+                  />
+                </svg>
+              </div>
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">Product Management</h3>
+              <p className="text-gray-600 text-sm">
+                Easily add, edit, and organize your product catalog with powerful tools.
+              </p>
+            </div>
+
+            <div className="text-center p-6 rounded-2xl bg-white/60 backdrop-blur-sm border border-gray-200/50 shadow-sm">
+              <div className="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mx-auto mb-4">
+                <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+                  />
+                </svg>
+              </div>
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">Analytics & Insights</h3>
+              <p className="text-gray-600 text-sm">
+                Track your sales performance and understand your customers better.
+              </p>
+            </div>
+
+            <div className="text-center p-6 rounded-2xl bg-white/60 backdrop-blur-sm border border-gray-200/50 shadow-sm">
+              <div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mx-auto mb-4">
+                <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+                  />
+                </svg>
+              </div>
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">Customer Support</h3>
+              <p className="text-gray-600 text-sm">Connect with customers through our integrated messaging system.</p>
+            </div>
+          </div>
+
+          {/* CTA Section */}
+          <div className="text-center">
+            <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 md:p-12 border border-gray-200/50 shadow-lg">
+              <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4">Ready to start selling?</h2>
+              <p className="text-gray-600 mb-8 max-w-lg mx-auto">
+                Join thousands of successful sellers who are already growing their business with NextCart.
+              </p>
+              <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                <Link
+                  href="/login"
+                  className="inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-primary to-primary/90 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200"
+                >
+                  <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
+                    />
+                  </svg>
+                  Sign In to Your Account
+                </Link>
+                <Link
+                  href="/signup"
+                  className="inline-flex items-center justify-center px-8 py-4 border-2 border-primary text-primary font-semibold rounded-xl hover:bg-primary hover:text-white transition-all duration-200"
+                >
+                  <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
+                    />
+                  </svg>
+                  Create New Account
+                </Link>
+              </div>
+            </div>
           </div>
         </div>
       </main>
@@ -98,7 +210,7 @@ const HomePage = () => {
               Chat with customers, answer questions, and provide support for your products.
             </p>
             <Link
-              href="/inbox"
+              href="/dashboard/inbox"
               className="inline-flex items-center gap-2 rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium shadow hover:opacity-95 transition-opacity"
             >
               <MessageCircle className="h-4 w-4" />
diff --git a/apps/seller-ui/src/app/seller/success/page.tsx b/apps/seller-ui/src/app/seller/success/page.tsx
index 874b7e6..bf1c074 100644
--- a/apps/seller-ui/src/app/seller/success/page.tsx
+++ b/apps/seller-ui/src/app/seller/success/page.tsx
@@ -1,18 +1,39 @@
 import Link from 'next/link';
 import React from 'react';
+import { CheckCircle } from 'lucide-react';
 
 const page = () => {
   return (
-    <div className="flex flex-col items-center justify-center h-screen">
-      <h3 className="text-2xl font-bold mb-4">
-        You have successfully connected your bank account. And crated Your account.
-      </h3>
-      <Link
-        href="/seller/dashboard"
-        className="bg-blue-500 text-white px-4 py-2 rounded-md flex items-center justify-center"
-      >
-        Go to Dashboard
-      </Link>
+    <div className="min-h-screen bg-gradient-to-br from-green-50 via-white to-green-100 flex items-center justify-center p-4">
+      <div className="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 text-center">
+        {/* Success Icon */}
+        <div className="flex justify-center mb-6">
+          <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
+            <CheckCircle className="w-10 h-10 text-green-600" />
+          </div>
+        </div>
+
+        {/* Success Message */}
+        <h1 className="text-2xl font-bold text-gray-900 mb-4">Account Setup Complete!</h1>
+
+        <p className="text-gray-600 mb-8 leading-relaxed">
+          You have successfully connected your bank account and created your seller account. You're now ready to start
+          selling on NextCart!
+        </p>
+
+        {/* Action Button */}
+        <Link
+          href="/dashboard"
+          className="inline-flex items-center justify-center w-full bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold px-6 py-3 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200"
+        >
+          Go to Dashboard
+        </Link>
+
+        {/* Additional Info */}
+        <p className="text-sm text-gray-500 mt-6">
+          You can start by creating your first product or setting up your shop details.
+        </p>
+      </div>
     </div>
   );
 };
diff --git a/apps/seller-ui/src/context/websocket-context.tsx b/apps/seller-ui/src/context/websocket-context.tsx
index 2e4d51e..d83b8f1 100644
--- a/apps/seller-ui/src/context/websocket-context.tsx
+++ b/apps/seller-ui/src/context/websocket-context.tsx
@@ -22,6 +22,8 @@ interface WebSocketContextType {
   isConnecting: boolean;
   error: string | null;
   setMessageHandler: (handler: ((type: string, data: any) => void) | null) => void;
+  updateUnreadCount: (conversationId: string, count: number) => void;
+  removeUnreadCount: (conversationId: string) => void;
 }
 
 const WebSocketContext = createContext<WebSocketContextType | undefined>(undefined);
@@ -121,6 +123,31 @@ export const WebSocketProvider: React.FC<WebSocketProviderProps> = ({ seller, ch
     };
   }, [seller?.id]);
 
+  const updateUnreadCount = (conversationId: string, count: number) => {
+    setUnreadCounts((prev) => {
+      const current = prev[conversationId];
+      if (current === count) {
+        return prev;
+      }
+
+      return {
+        ...prev,
+        [conversationId]: count,
+      };
+    });
+  };
+
+  const removeUnreadCount = (conversationId: string) => {
+    setUnreadCounts((prev) => {
+      if (!(conversationId in prev)) {
+        return prev;
+      }
+
+      const { [conversationId]: _removed, ...rest } = prev;
+      return rest;
+    });
+  };
+
   const value: WebSocketContextType = {
     ws: wsRef.current,
     unreadCounts,
@@ -128,6 +155,8 @@ export const WebSocketProvider: React.FC<WebSocketProviderProps> = ({ seller, ch
     isConnecting,
     error,
     setMessageHandler,
+    updateUnreadCount,
+    removeUnreadCount,
   };
 
   return <WebSocketContext.Provider value={value}>{children}</WebSocketContext.Provider>;
@@ -147,6 +176,12 @@ export const useWebSocket = (): WebSocketContextType => {
       setMessageHandler: () => {
         // No-op function
       },
+      updateUnreadCount: () => {
+        // No-op function
+      },
+      removeUnreadCount: () => {
+        // No-op function
+      },
     };
   }
 
diff --git a/apps/seller-ui/src/hooks/chat.ts b/apps/seller-ui/src/hooks/chat.ts
index f1ab554..a223d0d 100644
--- a/apps/seller-ui/src/hooks/chat.ts
+++ b/apps/seller-ui/src/hooks/chat.ts
@@ -110,7 +110,15 @@ export const useSendMessage = () => {
   const queryClient = useQueryClient();
   const { ws, isConnected, error: wsError } = useWebSocket();
 
-  return useMutation({
+  return useMutation<
+    { conversationId: string },
+    Error,
+    MarkAsSeenData,
+    {
+      previousData?: { conversations: Conversation[] };
+      previousUnreadCount?: number;
+    }
+  >({
     mutationFn: async (data: SendMessageData) => {
       // Check WebSocket connection status
       if (!isConnected || !ws || ws.readyState !== WebSocket.OPEN) {
@@ -134,55 +142,73 @@ export const useSendMessage = () => {
 
 export const useMarkAsSeen = () => {
   const queryClient = useQueryClient();
-  const { ws, isConnected, error: wsError } = useWebSocket();
-
-  return useMutation({
-    mutationFn: async (data: MarkAsSeenData) => {
-      // Check WebSocket connection status
+  const { ws, isConnected, error: wsError, unreadCounts, updateUnreadCount, removeUnreadCount } = useWebSocket();
+
+  return useMutation<
+    { conversationId: string },
+    Error,
+    MarkAsSeenData,
+    {
+      previousData?: { conversations: Conversation[] };
+      previousUnreadCount?: number;
+      hadUnreadEntry: boolean;
+    }
+  >({
+    mutationFn: async ({ conversationId }: MarkAsSeenData) => {
       if (!isConnected || !ws || ws.readyState !== WebSocket.OPEN) {
         throw new Error(`WebSocket not connected. Status: ${wsError || 'Connection failed'}`);
       }
 
-      try {
-        // Send mark as seen through WebSocket - server expects MARK_AS_SEEN
-        ws.send(
-          JSON.stringify({
-            type: 'MARK_AS_SEEN',
-            conversationId: data.conversationId,
-            senderId: '', // Required by server but not used for this operation
-            receiverId: '', // Required by server but not used for this operation
-            messageBody: '', // Required by server but not used for this operation
-            senderType: 'seller', // Required by server
-          }),
-        );
-        return { unseenCount: 0 };
-      } catch (error) {
-        throw new Error(`Failed to mark as seen: ${error instanceof Error ? error.message : 'Unknown error'}`);
-      }
+      ws.send(
+        JSON.stringify({
+          type: 'MARK_AS_SEEN',
+          conversationId,
+          senderId: '',
+          receiverId: '',
+          messageBody: '',
+          senderType: 'seller',
+        }),
+      );
+
+      return { conversationId };
     },
-    onSuccess: (data, variables) => {
-      // Update conversation list to clear unseen count
+    onMutate: async ({ conversationId }) => {
+      await queryClient.cancelQueries({ queryKey: ['seller-conversations'] });
+
+      const previousData = queryClient.getQueryData<{ conversations: Conversation[] }>(['seller-conversations']);
+      const hadUnreadEntry = Object.prototype.hasOwnProperty.call(unreadCounts, conversationId);
+      const previousUnreadCount = unreadCounts[conversationId];
+
       queryClient.setQueryData(['seller-conversations'], (oldData: any) => {
         if (!oldData) return oldData;
+
         return {
           ...oldData,
-          conversations: oldData.conversations.map((conv: Conversation) => {
-            if (conv.id === variables.conversationId) {
-              return {
-                ...conv,
-                unseenCount: data.unseenCount,
-              };
-            }
-            return conv;
-          }),
+          conversations: oldData.conversations.map((conv: Conversation) =>
+            conv.id === conversationId
+              ? {
+                  ...conv,
+                  unseenCount: 0,
+                }
+              : conv,
+          ),
         };
       });
 
-      // Invalidate queries to ensure consistency
-      queryClient.invalidateQueries({ queryKey: ['seller-conversations'] });
+      updateUnreadCount(conversationId, 0);
+
+      return { previousData, previousUnreadCount, hadUnreadEntry };
     },
-    onError: (error) => {
+    onError: (error, variables, context) => {
       console.error('Failed to mark as seen:', error);
+      if (context?.previousData) {
+        queryClient.setQueryData(['seller-conversations'], context.previousData);
+      }
+      if (context?.hadUnreadEntry && context.previousUnreadCount !== undefined) {
+        updateUnreadCount(variables.conversationId, context.previousUnreadCount);
+      } else if (context && !context.hadUnreadEntry) {
+        removeUnreadCount(variables.conversationId);
+      }
     },
   });
 };
diff --git a/apps/seller-ui/src/hooks/useLogout.ts b/apps/seller-ui/src/hooks/useLogout.ts
new file mode 100644
index 0000000..3cbf323
--- /dev/null
+++ b/apps/seller-ui/src/hooks/useLogout.ts
@@ -0,0 +1,30 @@
+import { useRouter } from 'next/navigation';
+import axiosInstance from '../utils/axiosIsntance';
+
+const useLogout = () => {
+  const router = useRouter();
+
+  const logout = async () => {
+    try {
+      // Call backend logout endpoint to clear cookies
+      await axiosInstance.post('/api/logout-seller');
+
+      // Clear any session storage if needed
+      sessionStorage.clear();
+
+      // Redirect to login page
+      router.push('/login');
+      router.refresh();
+    } catch (error) {
+      console.error('Logout failed:', error);
+      // Even if logout fails, redirect to login page
+      // Backend will handle clearing cookies
+      router.push('/login');
+      router.refresh();
+    }
+  };
+
+  return { logout };
+};
+
+export default useLogout;
diff --git a/apps/seller-ui/src/hooks/useShop.tsx b/apps/seller-ui/src/hooks/useShop.tsx
new file mode 100644
index 0000000..9974da8
--- /dev/null
+++ b/apps/seller-ui/src/hooks/useShop.tsx
@@ -0,0 +1,94 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import axiosInstance from '../utils/axiosIsntance';
+import toast from 'react-hot-toast';
+
+export interface Shop {
+  id: string;
+  name: string;
+  bio: string;
+  category: string;
+  address: string;
+  opening_hours: string;
+  website?: string;
+  social_links: any[];
+  ratings: number;
+  coverBanner?: string;
+  avatar?: {
+    id: string;
+    url: string;
+  };
+  productAnalytics?: {
+    views: number;
+    cartAdds: number;
+    purchases: number;
+  };
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface UpdateShopInfoData {
+  name: string;
+  bio: string;
+  address: string;
+  opening_hours: string;
+  website?: string;
+  category: string;
+  social_links?: any[];
+}
+
+export interface UpdateCoverBannerData {
+  coverBanner: string;
+}
+
+// Get shop information
+export const useShopInfo = () => {
+  return useQuery({
+    queryKey: ['shop-info'],
+    queryFn: async (): Promise<Shop> => {
+      const response = await axiosInstance.get('/api/shop-info');
+      return response.data.shop;
+    },
+    retry: 1,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });
+};
+
+// Update shop information
+export const useUpdateShopInfo = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (data: UpdateShopInfoData): Promise<Shop> => {
+      const response = await axiosInstance.put('/api/shop-info', data);
+      return response.data.shop;
+    },
+    onSuccess: (data) => {
+      queryClient.setQueryData(['shop-info'], data);
+      toast.success('Shop information updated successfully!');
+    },
+    onError: (error: any) => {
+      const message = error.response?.data?.message || 'Failed to update shop information';
+      toast.error(message);
+    },
+  });
+};
+
+// Update shop cover banner
+export const useUpdateCoverBanner = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (data: UpdateCoverBannerData): Promise<Shop> => {
+      const response = await axiosInstance.put('/api/shop-cover-banner', data);
+      return response.data.shop;
+    },
+    onSuccess: (data) => {
+      queryClient.setQueryData(['shop-info'], data);
+      toast.success('Cover banner updated successfully!');
+    },
+    onError: (error: any) => {
+      const message = error.response?.data?.message || 'Failed to update cover banner';
+      toast.error(message);
+    },
+  });
+};
diff --git a/apps/seller-ui/src/shared/atoms/home/InfoRow.tsx b/apps/seller-ui/src/shared/atoms/home/InfoRow.tsx
index ff85cc2..7b7a0fc 100644
--- a/apps/seller-ui/src/shared/atoms/home/InfoRow.tsx
+++ b/apps/seller-ui/src/shared/atoms/home/InfoRow.tsx
@@ -8,8 +8,8 @@ type InfoRowProps = {
 
 const InfoRow: React.FC<InfoRowProps> = ({ label, value, className }) => {
   return (
-    <div className={`flex items-center justify-between text-sm ${className || ''}`}>
-      <span className="text-muted-foreground">{label}</span>
+    <div className={`flex items-center justify-between gap-3 text-sm ${className || ''} overflow-wrap max-w-[100%]`}>
+      <span className="text-muted-foreground flex-shrink-0">{label}</span>
       <span className="text-foreground">{value}</span>
     </div>
   );
diff --git a/apps/seller-ui/src/shared/molecules/chat/ConversationItem.tsx b/apps/seller-ui/src/shared/molecules/chat/ConversationItem.tsx
index aa7dc1d..56eafd9 100644
--- a/apps/seller-ui/src/shared/molecules/chat/ConversationItem.tsx
+++ b/apps/seller-ui/src/shared/molecules/chat/ConversationItem.tsx
@@ -1,10 +1,10 @@
 'use client';
 
 import React from 'react';
-import Image from 'next/image';
 import { twMerge } from 'tailwind-merge';
 
 import UnreadBadge from './UnreadBadge';
+import { useWebSocket } from 'apps/seller-ui/src/context/websocket-context';
 
 interface User {
   id: string;
@@ -35,6 +35,9 @@ interface ConversationItemProps {
 }
 
 const ConversationItem: React.FC<ConversationItemProps> = ({ conversation, isSelected, onClick }) => {
+  const { unreadCounts } = useWebSocket();
+  const unseenCount = unreadCounts[conversation.id] ?? conversation.unseenCount;
+
   const formatLastMessageTime = (dateString: string) => {
     const date = new Date(dateString);
     const now = new Date();
@@ -102,7 +105,7 @@ const ConversationItem: React.FC<ConversationItemProps> = ({ conversation, isSel
       </div>
 
       {/* Unread Badge */}
-      {conversation?.unseenCount > 0 && <UnreadBadge count={conversation.unseenCount} />}
+      {unseenCount > 0 && <UnreadBadge count={unseenCount} />}
     </div>
   );
 };
diff --git a/apps/seller-ui/src/shared/molecules/home/ShopSummaryCard.tsx b/apps/seller-ui/src/shared/molecules/home/ShopSummaryCard.tsx
index 3a73129..a060165 100644
--- a/apps/seller-ui/src/shared/molecules/home/ShopSummaryCard.tsx
+++ b/apps/seller-ui/src/shared/molecules/home/ShopSummaryCard.tsx
@@ -34,7 +34,9 @@ const ShopSummaryCard: React.FC<ShopSummaryCardProps> = ({
         {rating !== undefined ? (
           <InfoRow label="Rating" value={<span className="font-medium">{rating.toFixed(1)}</span>} />
         ) : null}
-        {address ? <InfoRow label="Address" value={<span className="truncate max-w-[240px]">{address}</span>} /> : null}
+        {address ? (
+          <InfoRow label="Address: " value={<span className="break-words max-w-[240px]">{address}</span>} />
+        ) : null}
         <div className="flex items-center gap-2 text-sm">
           <StatusBadge label={`${totalProducts} products`} status="info" />
           <StatusBadge label={`${activeOffers} offers`} status="success" />
diff --git a/apps/seller-ui/src/shared/molecules/shop/CoverBannerUpload.tsx b/apps/seller-ui/src/shared/molecules/shop/CoverBannerUpload.tsx
new file mode 100644
index 0000000..ffc5dee
--- /dev/null
+++ b/apps/seller-ui/src/shared/molecules/shop/CoverBannerUpload.tsx
@@ -0,0 +1,216 @@
+'use client';
+
+import React, { useState, useRef } from 'react';
+import { useUpdateCoverBanner, useShopInfo } from '../../../hooks/useShop';
+import { Upload, Image as ImageIcon, Loader2, X } from 'lucide-react';
+import toast from 'react-hot-toast';
+import { convertFileToBase64 } from 'apps/seller-ui/src/utils/helpers';
+
+const CoverBannerUpload: React.FC = () => {
+  const { data: shop, isLoading: isLoadingShop } = useShopInfo();
+  const updateCoverBanner = useUpdateCoverBanner();
+  const [isDragging, setIsDragging] = useState(false);
+  const [selectedBanner, setSelectedBanner] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileSelect = async (file: File) => {
+    if (!file.type.startsWith('image/')) {
+      toast.error('Please select a valid image file.');
+      return;
+    }
+
+    const maxSizeInMB = 5;
+    if (file.size > maxSizeInMB * 1024 * 1024) {
+      toast.error(`Image must be smaller than ${maxSizeInMB}MB.`);
+      return;
+    }
+
+    try {
+      const base64 = (await convertFileToBase64(file)) as string;
+      setSelectedBanner(base64);
+    } catch (error) {
+      toast.error('Failed to read image file. Please try again.');
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length > 0) {
+      void handleFileSelect(files[0]);
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+
+  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      void handleFileSelect(files[0]);
+    }
+  };
+
+  const handleUpload = async () => {
+    if (!selectedBanner || updateCoverBanner.isPending) return;
+
+    updateCoverBanner.mutate(
+      { coverBanner: selectedBanner },
+      {
+        onSuccess: () => {
+          setSelectedBanner(null);
+          if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+          }
+        },
+      },
+    );
+  };
+
+  const handleRemove = () => {
+    setSelectedBanner(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const currentBanner = selectedBanner || shop?.coverBanner || null;
+  const hasExistingBanner = Boolean(shop?.coverBanner);
+  const hasSelectedBanner = Boolean(selectedBanner);
+
+  if (isLoadingShop) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <div className="text-center">
+          <Loader2 className="w-6 h-6 animate-spin mx-auto mb-2" />
+          <p className="text-sm text-gray-600">Loading shop information...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!shop) {
+    return (
+      <div className="text-center p-8">
+        <p className="text-gray-600">No shop information found. Please create a shop first.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-lg font-semibold text-gray-900 mb-2">Cover Banner</h3>
+        <p className="text-sm text-gray-600">Upload a banner image for your shop. Recommended size: 1200x300px</p>
+      </div>
+
+      {/* Hidden file input - always present */}
+      <input ref={fileInputRef} type="file" accept="image/*" onChange={handleFileInputChange} className="hidden" />
+
+      {/* Current Banner Display */}
+      {currentBanner ? (
+        <div className="relative">
+          <img
+            src={currentBanner}
+            alt="Shop cover banner"
+            className="w-full h-48 object-cover rounded-lg border border-gray-200"
+          />
+          {hasSelectedBanner && (
+            <button
+              onClick={handleRemove}
+              className="absolute top-2 right-2 p-1 bg-red-600 text-white rounded-full hover:bg-red-700 transition-colors"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          )}
+        </div>
+      ) : (
+        <div
+          onDrop={handleDrop}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onClick={() => fileInputRef.current?.click()}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+              event.preventDefault();
+              fileInputRef.current?.click();
+            }
+          }}
+          className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors cursor-pointer ${
+            isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-gray-400'
+          }`}
+        >
+          <div className="space-y-4">
+            <div className="flex justify-center">
+              {isDragging ? (
+                <Upload className="w-12 h-12 text-blue-500" />
+              ) : (
+                <ImageIcon className="w-12 h-12 text-gray-400" />
+              )}
+            </div>
+
+            <div>
+              <p className="text-lg font-medium text-gray-900">
+                {isDragging ? 'Drop your image here' : 'Upload a cover banner'}
+              </p>
+              <p className="text-sm text-gray-600 mt-1">Drag and drop an image, or click to browse</p>
+            </div>
+
+            <span className="inline-flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
+              <Upload className="w-4 h-4" />
+              Choose File
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Actions */}
+      {hasSelectedBanner ? (
+        <div className="flex gap-3">
+          <button
+            onClick={handleUpload}
+            disabled={updateCoverBanner.isPending}
+            className="flex-1 inline-flex items-center justify-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {updateCoverBanner.isPending ? (
+              <Loader2 className="w-4 h-4 animate-spin" />
+            ) : (
+              <Upload className="w-4 h-4" />
+            )}
+            {updateCoverBanner.isPending ? 'Uploading…' : 'Upload Banner'}
+          </button>
+
+          <button
+            onClick={handleRemove}
+            className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+          >
+            Cancel
+          </button>
+        </div>
+      ) : (
+        hasExistingBanner && (
+          <button
+            onClick={() => fileInputRef.current?.click()}
+            className="inline-flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
+          >
+            <ImageIcon className="w-4 h-4" />
+            Change Banner
+          </button>
+        )
+      )}
+    </div>
+  );
+};
+
+export default CoverBannerUpload;
diff --git a/apps/seller-ui/src/shared/molecules/shop/ShopInfoForm.tsx b/apps/seller-ui/src/shared/molecules/shop/ShopInfoForm.tsx
new file mode 100644
index 0000000..dc7291b
--- /dev/null
+++ b/apps/seller-ui/src/shared/molecules/shop/ShopInfoForm.tsx
@@ -0,0 +1,231 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { useUpdateShopInfo, useShopInfo, UpdateShopInfoData } from '../../../hooks/useShop';
+import { Save, Loader2 } from 'lucide-react';
+
+const ShopInfoForm: React.FC = () => {
+  const { data: shop, isLoading: isLoadingShop } = useShopInfo();
+  const updateShopInfo = useUpdateShopInfo();
+  const [socialLinks, setSocialLinks] = useState<Array<{ platform: string; url: string }>>([]);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<UpdateShopInfoData>();
+
+  useEffect(() => {
+    if (shop) {
+      reset({
+        name: shop.name,
+        bio: shop.bio,
+        address: shop.address,
+        opening_hours: shop.opening_hours,
+        website: shop.website || '',
+        category: shop.category,
+      });
+
+      // Initialize social links
+      if (shop.social_links && Array.isArray(shop.social_links)) {
+        setSocialLinks(shop.social_links);
+      }
+    }
+  }, [shop, reset]);
+
+  const onSubmit = (data: UpdateShopInfoData) => {
+    const submitData = {
+      ...data,
+      social_links: socialLinks,
+    };
+    updateShopInfo.mutate(submitData);
+  };
+
+  const addSocialLink = () => {
+    setSocialLinks([...socialLinks, { platform: '', url: '' }]);
+  };
+
+  const removeSocialLink = (index: number) => {
+    setSocialLinks(socialLinks.filter((_, i) => i !== index));
+  };
+
+  const updateSocialLink = (index: number, field: 'platform' | 'url', value: string) => {
+    const updated = [...socialLinks];
+    updated[index][field] = value;
+    setSocialLinks(updated);
+  };
+
+  if (isLoadingShop) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <Loader2 className="w-6 h-6 animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Shop Name */}
+        <div className="md:col-span-2">
+          <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
+            Shop Name *
+          </label>
+          <input
+            {...register('name', { required: 'Shop name is required' })}
+            type="text"
+            id="name"
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            placeholder="Enter your shop name"
+          />
+          {errors.name && <p className="mt-1 text-sm text-red-600">{errors.name.message}</p>}
+        </div>
+
+        {/* Category */}
+        <div>
+          <label htmlFor="category" className="block text-sm font-medium text-gray-700 mb-2">
+            Category *
+          </label>
+          <select
+            {...register('category', { required: 'Category is required' })}
+            id="category"
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          >
+            <option value="">Select a category</option>
+            <option value="electronics">Electronics</option>
+            <option value="fashion">Fashion</option>
+            <option value="home">Home & Garden</option>
+            <option value="sports">Sports</option>
+            <option value="books">Books</option>
+            <option value="beauty">Beauty & Health</option>
+            <option value="toys">Toys & Games</option>
+            <option value="automotive">Automotive</option>
+            <option value="other">Other</option>
+          </select>
+          {errors.category && <p className="mt-1 text-sm text-red-600">{errors.category.message}</p>}
+        </div>
+
+        {/* Website */}
+        <div>
+          <label htmlFor="website" className="block text-sm font-medium text-gray-700 mb-2">
+            Website
+          </label>
+          <input
+            {...register('website')}
+            type="url"
+            id="website"
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            placeholder="https://your-website.com"
+          />
+        </div>
+
+        {/* Address */}
+        <div className="md:col-span-2">
+          <label htmlFor="address" className="block text-sm font-medium text-gray-700 mb-2">
+            Address *
+          </label>
+          <textarea
+            {...register('address', { required: 'Address is required' })}
+            id="address"
+            rows={3}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            placeholder="Enter your shop address"
+          />
+          {errors.address && <p className="mt-1 text-sm text-red-600">{errors.address.message}</p>}
+        </div>
+
+        {/* Opening Hours */}
+        <div className="md:col-span-2">
+          <label htmlFor="opening_hours" className="block text-sm font-medium text-gray-700 mb-2">
+            Opening Hours *
+          </label>
+          <input
+            {...register('opening_hours', { required: 'Opening hours are required' })}
+            type="text"
+            id="opening_hours"
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            placeholder="e.g., Mon-Fri: 9AM-6PM, Sat: 10AM-4PM"
+          />
+          {errors.opening_hours && <p className="mt-1 text-sm text-red-600">{errors.opening_hours.message}</p>}
+        </div>
+
+        {/* Bio */}
+        <div className="md:col-span-2">
+          <label htmlFor="bio" className="block text-sm font-medium text-gray-700 mb-2">
+            Shop Description *
+          </label>
+          <textarea
+            {...register('bio', { required: 'Shop description is required' })}
+            id="bio"
+            rows={4}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            placeholder="Tell customers about your shop..."
+          />
+          {errors.bio && <p className="mt-1 text-sm text-red-600">{errors.bio.message}</p>}
+        </div>
+      </div>
+
+      {/* Social Links */}
+      <div>
+        <div className="flex items-center justify-between mb-4">
+          <label className="block text-sm font-medium text-gray-700">Social Media Links</label>
+          <button
+            type="button"
+            onClick={addSocialLink}
+            className="text-sm text-blue-600 hover:text-blue-800 font-medium"
+          >
+            + Add Social Link
+          </button>
+        </div>
+
+        <div className="space-y-3">
+          {socialLinks.map((link, index) => (
+            <div key={index} className="flex gap-3 items-end">
+              <div className="flex-1">
+                <input
+                  type="text"
+                  placeholder="Platform (e.g., Facebook, Instagram)"
+                  value={link.platform}
+                  onChange={(e) => updateSocialLink(index, 'platform', e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                />
+              </div>
+              <div className="flex-1">
+                <input
+                  type="url"
+                  placeholder="URL"
+                  value={link.url}
+                  onChange={(e) => updateSocialLink(index, 'url', e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                />
+              </div>
+              <button
+                type="button"
+                onClick={() => removeSocialLink(index)}
+                className="px-3 py-2 text-red-600 hover:text-red-800 font-medium"
+              >
+                Remove
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Submit Button */}
+      <div className="flex justify-end">
+        <button
+          type="submit"
+          disabled={updateShopInfo.isPending}
+          className="inline-flex items-center gap-2 bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        >
+          {updateShopInfo.isPending ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+          {updateShopInfo.isPending ? 'Saving...' : 'Save Changes'}
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default ShopInfoForm;
diff --git a/apps/seller-ui/src/shared/molecules/shop/index.ts b/apps/seller-ui/src/shared/molecules/shop/index.ts
new file mode 100644
index 0000000..caa1116
--- /dev/null
+++ b/apps/seller-ui/src/shared/molecules/shop/index.ts
@@ -0,0 +1,2 @@
+export { default as ShopInfoForm } from './ShopInfoForm';
+export { default as CoverBannerUpload } from './CoverBannerUpload';
diff --git a/apps/seller-ui/src/shared/organisms/chat/ChatWindow.tsx b/apps/seller-ui/src/shared/organisms/chat/ChatWindow.tsx
index d1b6baa..30343d2 100644
--- a/apps/seller-ui/src/shared/organisms/chat/ChatWindow.tsx
+++ b/apps/seller-ui/src/shared/organisms/chat/ChatWindow.tsx
@@ -38,7 +38,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({ conversationId, user }) => {
     limit: 50,
   });
   const { mutate: sendMessage, isPending: isSending } = useSendMessage();
-  const markAsSeenMutation = useMarkAsSeen();
+  const { mutate: markAsSeen, isPending: isMarking } = useMarkAsSeen();
 
   const { data, isLoading, isError, error } = messagesQuery;
   const userInfo = data?.user || user;
@@ -51,9 +51,9 @@ const ChatWindow: React.FC<ChatWindowProps> = ({ conversationId, user }) => {
   // Mark messages as seen when conversation is selected
   useEffect(() => {
     if (conversationId && seller?.id) {
-      markAsSeenMutation.mutate({ conversationId });
+      markAsSeen({ conversationId });
     }
-  }, [conversationId, seller?.id]);
+  }, [conversationId, seller?.id, markAsSeen]);
 
   const handleSendMessage = (content: string) => {
     if (!conversationId || !seller?.id || !userInfo) return;
@@ -88,16 +88,57 @@ const ChatWindow: React.FC<ChatWindowProps> = ({ conversationId, user }) => {
   //Receive new messages from websocket
   useEffect(() => {
     const messageHandler = (type: string, data: any) => {
-      if (type === 'NEW_MESSAGE') {
-        if (data.conversationId === conversationId) {
-          queryClient.setQueryData(['seller-messages', conversationId], (oldData: any) => {
-            if (!oldData) return oldData;
-            return {
-              ...oldData,
-              messages: [...oldData.messages, data],
-            };
-          });
+      if (type !== 'NEW_MESSAGE' || !data?.conversationId) {
+        return;
+      }
+
+      const incomingConversationId = data.conversationId;
+
+      queryClient.setQueryData(['seller-conversations'], (oldData: any) => {
+        if (!oldData) return oldData;
+
+        const conversations = oldData.conversations || [];
+        const nextConversation = conversations.find((conversation: any) => conversation.id === incomingConversationId);
+
+        if (!nextConversation) {
+          return oldData;
         }
+
+        const updatedConversation = {
+          ...nextConversation,
+          lastMessage: {
+            id: data.id || nextConversation.lastMessage?.id || data.messageId || '',
+            content: data.content,
+            senderId: data.senderId,
+            senderType: data.senderType,
+            createdAt: data.createdAt,
+          },
+          updatedAt: data.createdAt || new Date().toISOString(),
+        };
+
+        return {
+          ...oldData,
+          conversations: [
+            updatedConversation,
+            ...conversations.filter((conversation: any) => conversation.id !== incomingConversationId),
+          ],
+        };
+      });
+
+      if (incomingConversationId !== conversationId) {
+        return;
+      }
+
+      queryClient.setQueryData(['seller-messages', conversationId], (oldData: any) => {
+        if (!oldData) return oldData;
+        return {
+          ...oldData,
+          messages: [...oldData.messages, data],
+        };
+      });
+
+      if (data.senderId !== seller?.id && !isMarking) {
+        markAsSeen({ conversationId });
       }
     };
 
@@ -106,7 +147,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({ conversationId, user }) => {
     return () => {
       setMessageHandler(null);
     };
-  }, [setMessageHandler, conversationId, queryClient]);
+  }, [setMessageHandler, conversationId, queryClient, markAsSeen, isMarking, seller?.id]);
 
   if (!conversationId) {
     return (
diff --git a/apps/seller-ui/src/shared/organisms/home/SellerHomeHero.tsx b/apps/seller-ui/src/shared/organisms/home/SellerHomeHero.tsx
index 6976e3f..a8a1b66 100644
--- a/apps/seller-ui/src/shared/organisms/home/SellerHomeHero.tsx
+++ b/apps/seller-ui/src/shared/organisms/home/SellerHomeHero.tsx
@@ -22,10 +22,10 @@ const SellerHomeHero: React.FC<SellerHomeHeroProps> = ({
 }) => {
   return (
     <section className="rounded-xl overflow-hidden border border-border bg-card text-card-foreground shadow">
-      <div className="relative h-40 md:h-52 bg-muted">
+      <div className="relative h-40 md:h-[24rem] bg-muted">
         {bannerUrl ? (
           // eslint-disable-next-line @next/next/no-img-element
-          <img src={bannerUrl} alt="Shop banner" className="h-full w-full object-cover" />
+          <img src={bannerUrl} alt="Shop banner" className="h-full w-full object-fit" />
         ) : null}
         <div className="absolute -bottom-6 left-4">
           <AvatarWithText
diff --git a/apps/seller-ui/src/shared/organisms/index.ts b/apps/seller-ui/src/shared/organisms/index.ts
index f392e68..081f6bb 100644
--- a/apps/seller-ui/src/shared/organisms/index.ts
+++ b/apps/seller-ui/src/shared/organisms/index.ts
@@ -2,3 +2,4 @@ export { CreateDiscountCode } from './CreateDiscountCode';
 export { DiscountCodesList } from './DiscountCodesList';
 export * from './order';
 export * from './chat';
+export * from './shop';
diff --git a/apps/seller-ui/src/shared/organisms/shop/ShopSettings.tsx b/apps/seller-ui/src/shared/organisms/shop/ShopSettings.tsx
new file mode 100644
index 0000000..f7da0f0
--- /dev/null
+++ b/apps/seller-ui/src/shared/organisms/shop/ShopSettings.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import React, { useState } from 'react';
+import { ShopInfoForm, CoverBannerUpload } from '../../molecules/shop';
+import { Settings, Store, Image as ImageIcon } from 'lucide-react';
+
+const ShopSettings: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<'info' | 'banner'>('info');
+
+  const tabs = [
+    {
+      id: 'info' as const,
+      label: 'Shop Information',
+      icon: Store,
+    },
+    {
+      id: 'banner' as const,
+      label: 'Cover Banner',
+      icon: ImageIcon,
+    },
+  ];
+
+  return (
+    <div className="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+      {/* Header */}
+      <div className="px-6 py-4 border-b border-gray-200 bg-gray-50">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
+            <Settings className="w-5 h-5 text-blue-600" />
+          </div>
+          <div>
+            <h2 className="text-xl font-semibold text-gray-900">Shop Settings</h2>
+            <p className="text-sm text-gray-600">Manage your shop information and appearance</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="border-b border-gray-200">
+        <nav className="flex space-x-8 px-6">
+          {tabs.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
+                  activeTab === tab.id
+                    ? 'border-blue-500 text-blue-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                <Icon className="w-4 h-4" />
+                {tab.label}
+              </button>
+            );
+          })}
+        </nav>
+      </div>
+
+      {/* Content */}
+      <div className="p-6">
+        {activeTab === 'info' && (
+          <div>
+            <div className="mb-6">
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">Shop Information</h3>
+              <p className="text-sm text-gray-600">Update your shop details, description, and contact information.</p>
+            </div>
+            <ShopInfoForm />
+          </div>
+        )}
+
+        {activeTab === 'banner' && (
+          <div>
+            <CoverBannerUpload />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ShopSettings;
diff --git a/apps/seller-ui/src/shared/organisms/shop/index.ts b/apps/seller-ui/src/shared/organisms/shop/index.ts
new file mode 100644
index 0000000..92361df
--- /dev/null
+++ b/apps/seller-ui/src/shared/organisms/shop/index.ts
@@ -0,0 +1 @@
+export { default as ShopSettings } from './ShopSettings';
diff --git a/apps/seller-ui/src/utils/axiosIsntance.tsx b/apps/seller-ui/src/utils/axiosIsntance.tsx
index fffeee5..ebb6060 100644
--- a/apps/seller-ui/src/utils/axiosIsntance.tsx
+++ b/apps/seller-ui/src/utils/axiosIsntance.tsx
@@ -27,7 +27,13 @@ const onRefreshSuccess = () => {
 
 //Handle api requests
 axiosInstance.interceptors.request.use(
-  (config) => config,
+  (config) => {
+    const headers = config.headers ?? {};
+    (headers as any)['x-auth-actor'] = 'seller';
+    config.headers = headers;
+
+    return config;
+  },
   (error) => Promise.reject(error),
 );
 
@@ -48,7 +54,11 @@ axiosInstance.interceptors.response.use(
       originalRequest._retry = true;
       isRefreshing = true;
       try {
-        await axios.post(`${process.env.NEXT_PUBLIC_SERVER_URI}/api/refresh-token`, {}, { withCredentials: true });
+        await axios.post(
+          `${process.env.NEXT_PUBLIC_SERVER_URI}/api/refresh-seller-token`,
+          {},
+          { withCredentials: true },
+        );
         isRefreshing = false;
         onRefreshSuccess();
 
diff --git a/apps/user-ui/public/images/shop-banner-placeholder.svg b/apps/user-ui/public/images/shop-banner-placeholder.svg
new file mode 100644
index 0000000..5fa5d36
--- /dev/null
+++ b/apps/user-ui/public/images/shop-banner-placeholder.svg
@@ -0,0 +1,8 @@
+<svg width="800" height="256" viewBox="0 0 800 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="800" height="256" fill="#f3f4f6"/>
+  <rect x="50" y="50" width="700" height="156" rx="8" fill="#e5e7eb"/>
+  <rect x="100" y="100" width="600" height="56" rx="4" fill="#d1d5db"/>
+  <circle cx="200" cy="128" r="20" fill="#9ca3af"/>
+  <circle cx="400" cy="128" r="20" fill="#9ca3af"/>
+  <circle cx="600" cy="128" r="20" fill="#9ca3af"/>
+</svg>
diff --git a/apps/user-ui/public/images/shop-logo-placeholder.svg b/apps/user-ui/public/images/shop-logo-placeholder.svg
new file mode 100644
index 0000000..b167148
--- /dev/null
+++ b/apps/user-ui/public/images/shop-logo-placeholder.svg
@@ -0,0 +1,6 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="128" height="128" rx="16" fill="#f3f4f6"/>
+  <rect x="32" y="32" width="64" height="64" rx="8" fill="#e5e7eb"/>
+  <circle cx="64" cy="64" r="20" fill="#d1d5db"/>
+  <path d="M54 64h20M64 54v20" stroke="#9ca3af" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/apps/user-ui/src/app/(routes)/inbox/page.tsx b/apps/user-ui/src/app/(routes)/inbox/page.tsx
index df8f544..514db8d 100644
--- a/apps/user-ui/src/app/(routes)/inbox/page.tsx
+++ b/apps/user-ui/src/app/(routes)/inbox/page.tsx
@@ -3,7 +3,7 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
 import { ConversationList, ChatWindow, ChatHeader, EmptyChatState } from '../../../shared/components/organisms/chat';
-import { useConversations } from '../../../hooks/chat';
+import { useConversations, useMarkAsSeen } from '../../../hooks/chat';
 import { useWebSocket } from '../../../context/websocket-context';
 import ProtectedRoute from '../../../shared/components/guards/protected-route';
 
@@ -37,7 +37,8 @@ const InboxContent: React.FC = () => {
 
   const searchParams = useSearchParams();
   const router = useRouter();
-  const { isConnected, isConnecting, error, ws } = useWebSocket();
+  const { isConnected, isConnecting, error } = useWebSocket();
+  const { mutate: markConversationAsSeen } = useMarkAsSeen();
 
   const conversationsQuery = useConversations();
   const conversations = useMemo(
@@ -68,12 +69,7 @@ const InboxContent: React.FC = () => {
         router.replace('/inbox');
       }
 
-      ws?.send(
-        JSON.stringify({
-          type: 'MARK_AS_SEEN',
-          conversationId,
-        }),
-      );
+      markConversationAsSeen({ conversationId });
     }
   };
 
diff --git a/apps/user-ui/src/app/(routes)/login/page.tsx b/apps/user-ui/src/app/(routes)/login/page.tsx
index f7a7838..8ff6b6e 100644
--- a/apps/user-ui/src/app/(routes)/login/page.tsx
+++ b/apps/user-ui/src/app/(routes)/login/page.tsx
@@ -1,14 +1,14 @@
 'use client';
 import { useRouter, useSearchParams } from 'next/navigation';
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import Link from 'next/link';
-import GoogleButton from 'apps/user-ui/src/shared/components/GoogleButton';
 import { EMAIL_REGEX } from 'apps/user-ui/src/configs/constants';
 import { Eye, EyeOff } from 'lucide-react';
 import { useMutation } from '@tanstack/react-query';
 import axios, { AxiosError } from 'axios';
 import { useQueryClient } from '@tanstack/react-query';
+import { twMerge } from 'tailwind-merge';
 
 type FormData = {
   email: string;
@@ -34,10 +34,12 @@ const getSafeRedirect = (value: string | null) => {
   }
 };
 
-const page = () => {
+const LoginPage = () => {
   const [passwordVisible, setPasswordVisible] = useState(false);
   const [serverError, setServerError] = useState<string | null>(null);
   const [rememberMe, setRememberMe] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const [transitionState, setTransitionState] = useState<'idle' | 'toSignup'>('idle');
   const router = useRouter();
   const searchParams = useSearchParams();
   const queryClient = useQueryClient();
@@ -52,6 +54,11 @@ const page = () => {
     formState: { errors },
   } = useForm<FormData>();
 
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => setIsReady(true));
+    return () => cancelAnimationFrame(frame);
+  }, []);
+
   const loginMutation = useMutation({
     mutationFn: async (data: FormData) => {
       const response = await axios.post(`${process.env.NEXT_PUBLIC_SERVER_URI}/api/login-user`, data, {
@@ -75,111 +82,168 @@ const page = () => {
   const onSubmit = (data: FormData) => {
     loginMutation.mutate(data);
   };
+
+  const handleSwitch = () => {
+    if (transitionState !== 'idle') return;
+    setTransitionState('toSignup');
+    setTimeout(() => {
+      router.push('/signup');
+    }, 380);
+  };
+
+  const cardClass = useMemo(
+    () =>
+      twMerge(
+        'relative w-full max-w-5xl overflow-hidden rounded-[32px] border border-border/60 bg-card text-foreground shadow-[0_40px_80px_-40px_rgba(15,23,42,0.45)] transition-all duration-500 ease-[cubic-bezier(0.68,-0.55,0.265,1.35)] dark:shadow-[0_40px_80px_-40px_rgba(2,6,23,0.65)] will-change-transform',
+        !isReady && 'translate-y-10 opacity-0',
+        isReady && transitionState === 'idle' && 'translate-y-0 opacity-100',
+        transitionState === 'toSignup' && '-translate-x-[18%] rotate-1 scale-95 opacity-0',
+      ),
+    [isReady, transitionState],
+  );
+
+  const inputClasses =
+    'mt-2 w-full rounded-xl border border-border/70 bg-background px-4 py-3 text-sm font-medium text-foreground shadow-sm transition-shadow focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/70';
+
   return (
-    <div className="w-full py-10 min-h-[85svh] bg-card">
-      <h1 className="text-4xl font-Poppins font-semibold text-center">Login</h1>
-      <p className="text-center text-lg font-medium py-3">Home . Login</p>
-      <div className="w-full flex justify-center">
-        <div className="md:w-[480px] p-8 shadow rounded-lg flex flex-col">
-          <h3 className="text-3xl font-semibold text-center mb-2">Login to NextCart</h3>
-          <p className="text-center text-gray-500 mb-4">
-            Don't have an account?{' '}
-            <Link href="/signup" className="text-primary font-semibold">
-              Sign up
-            </Link>
-          </p>
-          {redirectLabel && (
-            <p className="mb-4 rounded-md border border-primary/20 bg-primary/10 px-4 py-2 text-center text-xs font-medium text-primary">
-              You&apos;ll head back to <span className="font-semibold">{redirectLabel}</span> after logging in.
-            </p>
-          )}
-
-          <GoogleButton onClick={() => {}} className="align-center" />
-
-          <div className="flex items-center my-5 text-sm">
-            <div className="flex flex-1 border-t border-border" />
-            <span className="px-3">Or Sign in with email</span>
-            <div className="flex flex-1 border-t border-border" />
-          </div>
-
-          <form onSubmit={handleSubmit(onSubmit)}>
-            <div className="mb-4">
-              <label htmlFor="email" className="block text-sm font-medium mb-1">
-                Email
-              </label>
-              <input
-                type="email"
-                id="email"
-                {...register('email', {
-                  required: 'Email is required.',
-                  pattern: {
-                    value: EMAIL_REGEX,
-                    message: 'Invalid Email',
-                  },
-                })}
-                className="mt-1 p-2 w-full border rounded-md outline-0 mb-1 dark:text-black"
-              />
-              {errors.email && <span className="text-red-500 text-sm">{String(errors.email.message)}</span>}
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-background via-muted/60 to-background px-4 py-16 transition-colors duration-300">
+      <div className={cardClass}>
+        <div className="relative grid w-full gap-12 lg:grid-cols-2">
+          <aside className="relative hidden bg-gradient-to-br from-slate-950 via-slate-900 to-slate-900 text-white transition-colors duration-300 dark:from-slate-900 dark:via-slate-950 dark:to-black lg:flex">
+            <div className="absolute inset-0 opacity-20">
+              <div className="absolute -left-24 top-16 h-52 w-52 rounded-full bg-white/20 blur-3xl dark:bg-white/10" />
+              <div className="absolute -bottom-12 right-0 h-64 w-64 rounded-full bg-primary/40 blur-3xl" />
             </div>
-            <div className="mb-4 relative">
-              <label htmlFor="password" className="block text-sm font-medium mb-1">
-                Password
-              </label>
-              <input
-                type={passwordVisible ? 'text' : 'password'}
-                id="password"
-                {...register('password', {
-                  required: 'Password is required.',
-                  minLength: {
-                    value: 6,
-                    message: 'Password must be at least 6 characters.',
-                  },
-                })}
-                className="mt-1 p-2 w-full border rounded-md outline-0 mb-1 dark:text-black"
-              />
+            <div className="relative z-10 flex w-full flex-col justify-between p-12">
+              <div className="space-y-4">
+                <p className="text-xs font-semibold uppercase tracking-[0.3em] text-slate-200/70">New to NextCart?</p>
+                <h2 className="text-3xl font-semibold leading-tight">Don't have an account?</h2>
+                <p className="text-sm text-slate-200/80">
+                  Join the marketplace — where vinyl meets value and discovery.
+                </p>
+              </div>
               <button
                 type="button"
-                className="absolute top-[50%] right-3 p-1  flex items-center text-sm leading-5"
-                onClick={() => setPasswordVisible(!passwordVisible)}
+                onClick={handleSwitch}
+                className="mt-8 inline-flex w-full items-center justify-center rounded-full bg-white px-6 py-3 text-sm font-semibold text-slate-900 transition-all duration-300 hover:-translate-y-0.5 hover:bg-slate-100 hover:shadow-lg dark:bg-foreground dark:text-background dark:hover:bg-foreground/90"
               >
-                {passwordVisible ? (
-                  <EyeOff className="h-5 w-5 text-gray-500" />
-                ) : (
-                  <Eye className="h-5 w-5 text-gray-500" />
-                )}
+                Sign up
               </button>
-              {errors.password && <span className="text-red-500 text-sm">{String(errors.password.message)}</span>}
             </div>
-            <div className="flex items-center justify-between mb-4">
-              <div className="flex items-center">
+          </aside>
+
+          <section className="relative flex flex-col justify-center px-6 py-12 sm:px-12">
+            <div className="mb-6 flex flex-col gap-2 text-center lg:text-left">
+              <p className="text-xs font-semibold uppercase tracking-[0.3em] text-primary">Welcome back</p>
+              <h1 className="text-3xl font-semibold text-foreground sm:text-4xl">Login to NextCart</h1>
+              <p className="text-sm text-muted-foreground">
+                Dive back into your favourite crates and keep your wishlist up to date.
+              </p>
+            </div>
+
+            {redirectLabel && (
+              <p className="mb-5 rounded-2xl border border-primary/20 bg-primary/10 px-5 py-3 text-center text-xs font-medium text-primary dark:border-primary/40 dark:bg-primary/15">
+                You&apos;ll head back to <span className="font-semibold">{redirectLabel}</span> after logging in.
+              </p>
+            )}
+
+            <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+              <div>
+                <label htmlFor="email" className="text-sm font-medium text-muted-foreground">
+                  Email address
+                </label>
                 <input
-                  type="checkbox"
-                  id="rememberMe"
-                  checked={rememberMe}
-                  onChange={(e) => setRememberMe(e.target.checked)}
-                  className="mr-2"
+                  type="email"
+                  id="email"
+                  {...register('email', {
+                    required: 'Email is required.',
+                    pattern: {
+                      value: EMAIL_REGEX,
+                      message: 'Invalid Email',
+                    },
+                  })}
+                  className={inputClasses}
                 />
-                <label htmlFor="rememberMe" className="text-sm">
+                {errors.email && (
+                  <span className="mt-2 block text-xs font-semibold text-destructive">{String(errors.email.message)}</span>
+                )}
+              </div>
+
+              <div>
+                <label htmlFor="password" className="text-sm font-medium text-muted-foreground">
+                  Password
+                </label>
+                <div className="relative">
+                  <input
+                    type={passwordVisible ? 'text' : 'password'}
+                    id="password"
+                    {...register('password', {
+                      required: 'Password is required.',
+                      minLength: {
+                        value: 6,
+                        message: 'Password must be at least 6 characters.',
+                      },
+                    })}
+                    className={inputClasses}
+                  />
+                  <button
+                    type="button"
+                    className="absolute inset-y-0 right-3 flex items-center text-muted-foreground transition hover:text-primary"
+                    onClick={() => setPasswordVisible(!passwordVisible)}
+                    aria-label={passwordVisible ? 'Hide password' : 'Show password'}
+                  >
+                    {passwordVisible ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+                  </button>
+                </div>
+                {errors.password && (
+                  <span className="mt-2 block text-xs font-semibold text-destructive">
+                    {String(errors.password.message)}
+                  </span>
+                )}
+              </div>
+
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                <label className="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground">
+                  <input
+                    type="checkbox"
+                    id="rememberMe"
+                    checked={rememberMe}
+                    onChange={(e) => setRememberMe(e.target.checked)}
+                    className="h-4 w-4 rounded border-border text-primary focus:ring-primary"
+                  />
                   Remember me
                 </label>
+                <Link href="/forgot-password" className="text-sm font-semibold text-primary transition hover:text-primary/80">
+                  Forgot password?
+                </Link>
               </div>
-              <Link href="/forgot-password" className="text-sm text-primary hover:underline">
-                Forgot Password?
-              </Link>
+
+              <button
+                type="submit"
+                className="inline-flex w-full items-center justify-center rounded-full bg-gradient-to-r from-primary via-primary to-[#ff7a6d] px-6 py-3 text-sm font-semibold text-primary-foreground shadow-lg shadow-primary/30 transition hover:scale-[1.01] hover:shadow-primary/50"
+                disabled={loginMutation.isPending}
+              >
+                {loginMutation.isPending ? 'Logging in…' : 'Login'}
+              </button>
+              {serverError && <p className="text-center text-xs font-semibold text-destructive">{serverError}</p>}
+            </form>
+
+            <div className="mt-6 flex flex-col gap-3 rounded-2xl border border-border bg-muted/80 p-6 text-center text-sm text-muted-foreground shadow-sm transition-colors duration-300 lg:hidden">
+              <p className="font-semibold text-foreground">Don't have an account?</p>
+              <p className="text-xs text-muted-foreground">Join the marketplace — where vinyl meets value and discovery.</p>
+              <button
+                type="button"
+                onClick={handleSwitch}
+                className="inline-flex items-center justify-center rounded-full bg-foreground px-5 py-2 text-xs font-semibold text-background transition hover:bg-foreground/90"
+              >
+                Sign up
+              </button>
             </div>
-            <button
-              type="submit"
-              className="w-full bg-primary text-white py-2 px-4 rounded-md hover:bg-primary-dark transition-colors duration-300"
-              disabled={loginMutation.isPending}
-            >
-              {loginMutation.isPending ? 'Logging in...' : 'Login'}
-            </button>
-            {serverError && <p className="text-red-500 text-sm mt-2 text-center">{serverError}</p>}
-          </form>
+          </section>
         </div>
       </div>
     </div>
   );
 };
 
-export default page;
+export default LoginPage;
diff --git a/apps/user-ui/src/app/(routes)/payment-success/page.tsx b/apps/user-ui/src/app/(routes)/payment-success/page.tsx
index 2779668..ac48bff 100644
--- a/apps/user-ui/src/app/(routes)/payment-success/page.tsx
+++ b/apps/user-ui/src/app/(routes)/payment-success/page.tsx
@@ -166,7 +166,7 @@ const PaymentSuccessPage = () => {
           </Link>
 
           <Link
-            href="/profile"
+            href="/profile?tab=orders"
             className="flex items-center justify-center space-x-2 bg-gray-600 text-white px-6 py-3 rounded-lg hover:bg-gray-700 transition-colors"
           >
             <Package className="w-5 h-5" />
diff --git a/apps/user-ui/src/app/(routes)/profile/page.tsx b/apps/user-ui/src/app/(routes)/profile/page.tsx
index 1ae435e..0c15545 100644
--- a/apps/user-ui/src/app/(routes)/profile/page.tsx
+++ b/apps/user-ui/src/app/(routes)/profile/page.tsx
@@ -4,7 +4,11 @@ import React, { useEffect, useState, useMemo } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import useUser from '../../../hooks/userUser';
 import { useUserOrders } from '../../../hooks/useUserOrders';
-import { ProfileTabs, ProfileContent as ProfileContentSection, ProfileStats } from '../../../shared/components/organisms/profile';
+import {
+  ProfileTabs,
+  ProfileContent as ProfileContentSection,
+  ProfileStats,
+} from '../../../shared/components/organisms/profile';
 import { Spinner } from '../../../shared/components/spinner';
 import ProtectedRoute from '../../../shared/components/guards/protected-route';
 
diff --git a/apps/user-ui/src/app/(routes)/shop/[shopId]/page.tsx b/apps/user-ui/src/app/(routes)/shop/[shopId]/page.tsx
new file mode 100644
index 0000000..f3fc3c6
--- /dev/null
+++ b/apps/user-ui/src/app/(routes)/shop/[shopId]/page.tsx
@@ -0,0 +1,58 @@
+import { Metadata } from 'next';
+import { cache } from 'react';
+import axiosInstance from 'apps/user-ui/src/utils/axiosInstance';
+import ShopDetails from 'apps/user-ui/src/shared/components/organisms/shop-details';
+
+interface PageProps {
+  params: {
+    shopId: string;
+  };
+}
+
+const fetchShopDetails = cache(async (shopId: string) => {
+  try {
+    const response = await axiosInstance.get(`/api/shop-info/${shopId}`);
+    return response.data?.shop ?? null;
+  } catch (error) {
+    console.error('Error fetching shop details:', error);
+    return null;
+  }
+});
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const shop = await fetchShopDetails(params.shopId);
+
+  if (!shop) {
+    return {
+      title: 'Shop Not Found',
+      description: 'The requested shop could not be found.',
+    };
+  }
+
+  const bannerImage = shop.coverBanner || '/images/shop-banner-placeholder.png';
+
+  return {
+    title: `${shop.name} | Shop`,
+    description: shop.bio || 'Discover the latest products from this shop.',
+    openGraph: {
+      title: `${shop.name} | Shop`,
+      description: shop.bio || 'Discover the latest products from this shop.',
+      images: bannerImage ? [bannerImage] : [],
+      type: 'website',
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: `${shop.name} | Shop`,
+      description: shop.bio || 'Discover the latest products from this shop.',
+      images: bannerImage ? [bannerImage] : [],
+    },
+  };
+}
+
+const Page = async ({ params }: PageProps) => {
+  const shop = await fetchShopDetails(params.shopId);
+
+  return <ShopDetails shop={shop} />;
+};
+
+export default Page;
diff --git a/apps/user-ui/src/app/(routes)/signup/page.tsx b/apps/user-ui/src/app/(routes)/signup/page.tsx
index 0081a86..a2afeb5 100644
--- a/apps/user-ui/src/app/(routes)/signup/page.tsx
+++ b/apps/user-ui/src/app/(routes)/signup/page.tsx
@@ -1,14 +1,13 @@
 'use client';
 import { useRouter } from 'next/navigation';
-import React, { useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import Link from 'next/link';
-import GoogleButton from 'apps/user-ui/src/shared/components/GoogleButton';
 import { EMAIL_REGEX } from 'apps/user-ui/src/configs/constants';
 import { Eye, EyeOff } from 'lucide-react';
 import OtpInput from 'apps/user-ui/src/shared/components/OtpInput';
 import { useMutation } from '@tanstack/react-query';
 import axios, { AxiosError } from 'axios';
+import { twMerge } from 'tailwind-merge';
 
 type FormData = {
   name: string;
@@ -22,13 +21,15 @@ type UserData = {
   password: string;
 };
 
-const page = () => {
+const SignupPage = () => {
   const [passwordVisible, setPasswordVisible] = useState(false);
   const [serverError, setServerError] = useState<string | null>(null);
   const [showOtpInput, setShowOtpInput] = useState(false);
   const [canResend, setCanResend] = useState(false);
   const [timer, setTimer] = useState(0);
   const [userData, setUserData] = useState<UserData | null>(null);
+  const [isReady, setIsReady] = useState(false);
+  const [transitionState, setTransitionState] = useState<'idle' | 'toLogin'>('idle');
 
   const router = useRouter();
 
@@ -38,6 +39,11 @@ const page = () => {
     formState: { errors },
   } = useForm<FormData>();
 
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => setIsReady(true));
+    return () => cancelAnimationFrame(frame);
+  }, []);
+
   const signUpMutation = useMutation({
     mutationFn: async (data: FormData) => {
       const response = await axios.post(`${process.env.NEXT_PUBLIC_SERVER_URI}/api/user-registration`, data);
@@ -84,128 +90,182 @@ const page = () => {
     }
   };
 
+  const handleSwitch = () => {
+    if (transitionState !== 'idle') return;
+    setTransitionState('toLogin');
+    setTimeout(() => {
+      router.push('/login');
+    }, 380);
+  };
+
+  const cardClass = useMemo(
+    () =>
+      twMerge(
+        'relative w-full max-w-5xl overflow-hidden rounded-[32px] border border-border/60 bg-card text-foreground shadow-[0_40px_90px_-45px_rgba(15,23,42,0.55)] transition-all duration-500 ease-[cubic-bezier(0.68,-0.55,0.265,1.35)] dark:shadow-[0_40px_90px_-45px_rgba(2,6,23,0.65)] will-change-transform',
+        !isReady && 'translate-y-10 opacity-0',
+        isReady && transitionState === 'idle' && 'translate-y-0 opacity-100',
+        transitionState === 'toLogin' && 'translate-x-[18%] -rotate-1 scale-95 opacity-0',
+      ),
+    [isReady, transitionState],
+  );
+
+  const inputClasses =
+    'mt-2 w-full rounded-xl border border-border/70 bg-background px-4 py-3 text-sm font-medium text-foreground shadow-sm transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/70';
+
   return (
-    <div className="w-full py-10 min-h-[85svh] bg-background-100">
-      <h1 className="text-4xl font-Poppins font-semibold text-center">Sign Up</h1>
-      <p className="text-center text-lg font-medium py-3">Home . Sign Up</p>
-      <div className="w-full flex justify-center">
-        <div className="md:w-[480px] p-8 shadow rounded-lg flex flex-col">
-          <h3 className="text-3xl font-semibold text-center mb-2">Sign Up for NextCart</h3>
-          <p className="text-center text-gray-500 mb-4">
-            Already have an account?{' '}
-            <Link href="/login" className="text-primary font-semibold">
-              Login
-            </Link>
-          </p>
-
-          <GoogleButton onClick={() => {}} className="align-center" />
-
-          <div className="flex items-center my-5 text-sm">
-            <div className="flex flex-1 border-t border-border" />
-            <span className="px-3">Or Sign up with email</span>
-            <div className="flex flex-1 border-t border-border" />
-          </div>
-
-          {showOtpInput ? (
-            <div className="flex flex-col items-center">
-              <p className="text-center text-gray-500 mb-4">A verification code has been sent to {userData?.email}.</p>
-              <OtpInput
-                length={4}
-                onComplete={handleOtpComplete}
-                onResend={handleResendOtp}
-                canResend={canResend}
-                resendTimer={timer}
-                isLoading={verifyOtpMutation.isPending}
-                error={
-                  verifyOtpMutation.isError && verifyOtpMutation.error instanceof AxiosError
-                    ? verifyOtpMutation.error.message
-                    : null
-                }
-              />
-              <button
-                onClick={() => setShowOtpInput(false)}
-                className="mt-4 text-primary font-semibold hover:underline"
-              >
-                Go back to signup
-              </button>
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-background via-muted/60 to-background px-4 py-16 transition-colors duration-300">
+      <div className={cardClass}>
+        <div className="relative grid w-full gap-12 lg:grid-cols-2">
+          <section className="relative flex flex-col justify-center px-6 py-12 sm:px-12">
+            <div className="mb-6 flex flex-col gap-2 text-center lg:text-left">
+              <p className="text-xs font-semibold uppercase tracking-[0.35em] text-primary">Join the community</p>
+              <h1 className="text-3xl font-semibold text-foreground sm:text-4xl">Create a NextCart account</h1>
+              <p className="text-sm text-muted-foreground">
+                Discover rare finds, manage your wishlist, and shop effortlessly across the marketplace.
+              </p>
             </div>
-          ) : (
-            <form onSubmit={handleSubmit(onSubmit)}>
-              <div className="mb-4">
-                <label htmlFor="name" className="block text-sm font-medium mb-1">
-                  Name
-                </label>
-                <input
-                  type="text"
-                  id="name"
-                  {...register('name', {
-                    required: 'Name is required.',
-                  })}
-                  className="mt-1 p-2 w-full border rounded-md outline-0 mb-1 dark:text-black"
-                />
-                {errors.name && <span className="text-red-500 text-sm">{String(errors.name.message)}</span>}
-              </div>
-              <div className="mb-4">
-                <label htmlFor="email" className="block text-sm font-medium mb-1">
-                  Email
-                </label>
-                <input
-                  type="email"
-                  id="email"
-                  {...register('email', {
-                    required: 'Email is required.',
-                    pattern: {
-                      value: EMAIL_REGEX,
-                      message: 'Invalid Email',
-                    },
-                  })}
-                  className="mt-1 p-2 w-full border rounded-md outline-0 mb-1 dark:text-black"
-                />
-                {errors.email && <span className="text-red-500 text-sm">{String(errors.email.message)}</span>}
-              </div>
-              <div className="mb-4 relative">
-                <label htmlFor="password" className="block text-sm font-medium mb-1">
-                  Password
-                </label>
-                <input
-                  type={passwordVisible ? 'text' : 'password'}
-                  id="password"
-                  {...register('password', {
-                    required: 'Password is required.',
-                    minLength: {
-                      value: 6,
-                      message: 'Password must be at least 6 characters.',
-                    },
-                  })}
-                  className="mt-1 p-2 w-full border rounded-md outline-0 mb-1 dark:text-black"
+
+            {showOtpInput ? (
+              <div className="mt-6 flex flex-col items-center gap-6 rounded-2xl border border-primary/30 bg-primary/10 p-8 text-center shadow-sm dark:border-primary/40 dark:bg-primary/15">
+                <p className="text-sm text-muted-foreground">
+                  A verification code has been sent to <span className="font-semibold text-foreground">{userData?.email}</span>.
+                </p>
+                <OtpInput
+                  length={4}
+                  onComplete={handleOtpComplete}
+                  onResend={handleResendOtp}
+                  canResend={canResend}
+                  resendTimer={timer}
+                  isLoading={verifyOtpMutation.isPending}
+                  error={
+                    verifyOtpMutation.isError && verifyOtpMutation.error instanceof AxiosError
+                      ? verifyOtpMutation.error.message
+                      : null
+                  }
                 />
                 <button
+                  onClick={() => setShowOtpInput(false)}
+                  className="text-xs font-semibold text-primary transition hover:text-primary/80"
                   type="button"
-                  className="absolute top-[50%] right-3 p-1  flex items-center text-sm leading-5"
-                  onClick={() => setPasswordVisible(!passwordVisible)}
                 >
-                  {passwordVisible ? (
-                    <EyeOff className="h-5 w-5 text-gray-500" />
-                  ) : (
-                    <Eye className="h-5 w-5 text-gray-500" />
-                  )}
+                  Go back to sign up
                 </button>
-                {errors.password && <span className="text-red-500 text-sm">{String(errors.password.message)}</span>}
               </div>
+            ) : (
+              <form onSubmit={handleSubmit(onSubmit)} className="mt-6 space-y-5">
+                <div>
+                  <label htmlFor="name" className="text-sm font-medium text-muted-foreground">
+                    Full name
+                  </label>
+                  <input
+                    type="text"
+                    id="name"
+                    {...register('name', {
+                      required: 'Name is required.',
+                    })}
+                    className={inputClasses}
+                  />
+                  {errors.name && <span className="mt-2 block text-xs font-semibold text-destructive">{String(errors.name.message)}</span>}
+                </div>
+
+                <div>
+                  <label htmlFor="email" className="text-sm font-medium text-muted-foreground">
+                    Email address
+                  </label>
+                  <input
+                    type="email"
+                    id="email"
+                    {...register('email', {
+                      required: 'Email is required.',
+                      pattern: {
+                        value: EMAIL_REGEX,
+                        message: 'Invalid Email',
+                      },
+                    })}
+                    className={inputClasses}
+                  />
+                  {errors.email && <span className="mt-2 block text-xs font-semibold text-destructive">{String(errors.email.message)}</span>}
+                </div>
+
+                <div>
+                  <label htmlFor="password" className="text-sm font-medium text-muted-foreground">
+                    Password
+                  </label>
+                  <div className="relative">
+                    <input
+                      type={passwordVisible ? 'text' : 'password'}
+                      id="password"
+                      {...register('password', {
+                        required: 'Password is required.',
+                        minLength: {
+                          value: 6,
+                          message: 'Password must be at least 6 characters.',
+                        },
+                      })}
+                      className={inputClasses}
+                    />
+                    <button
+                      type="button"
+                      className="absolute inset-y-0 right-3 flex items-center text-muted-foreground transition hover:text-primary"
+                      onClick={() => setPasswordVisible(!passwordVisible)}
+                      aria-label={passwordVisible ? 'Hide password' : 'Show password'}
+                    >
+                      {passwordVisible ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+                    </button>
+                  </div>
+                  {errors.password && <span className="mt-2 block text-xs font-semibold text-destructive">{String(errors.password.message)}</span>}
+                </div>
+
+                <button
+                  type="submit"
+                  className="inline-flex w-full items-center justify-center rounded-full bg-gradient-to-r from-primary via-primary to-[#ff7a6d] px-6 py-3 text-sm font-semibold text-primary-foreground shadow-lg shadow-primary/25 transition hover:scale-[1.01] hover:shadow-primary/40"
+                  disabled={signUpMutation.isPending}
+                >
+                  {signUpMutation.isPending ? 'Sending code…' : 'Send verification code'}
+                </button>
+                {serverError && <p className="text-center text-xs font-semibold text-destructive">{serverError}</p>}
+              </form>
+            )}
+
+            <div className="mt-6 flex flex-col gap-3 rounded-2xl border border-border bg-muted/80 p-6 text-center text-sm text-muted-foreground shadow-sm transition-colors duration-300 lg:hidden">
+              <p className="font-semibold text-foreground">Already have an account?</p>
+              <p className="text-xs text-muted-foreground">Log in to manage your profile, view orders, and shop easily.</p>
               <button
-                type="submit"
-                className="w-full bg-primary text-white py-2 px-4 rounded-md hover:bg-primary-dark transition-colors duration-300"
-                disabled={signUpMutation.isPending}
+                type="button"
+                onClick={handleSwitch}
+                className="inline-flex items-center justify-center rounded-full bg-foreground px-5 py-2 text-xs font-semibold text-background transition hover:bg-foreground/90"
               >
-                {signUpMutation.isPending ? 'Signing up...' : 'Sign Up'}
+                Login
               </button>
-              {serverError && <p className="text-red-500 text-sm mt-2 text-center">{serverError}</p>}
-            </form>
-          )}
+            </div>
+          </section>
+
+          <aside className="relative hidden bg-gradient-to-br from-slate-950 via-slate-900 to-slate-900 text-white transition-colors duration-300 dark:from-slate-900 dark:via-slate-950 dark:to-black lg:flex">
+            <div className="absolute inset-0 opacity-20">
+              <div className="absolute -left-24 top-16 h-52 w-52 rounded-full bg-white/20 blur-3xl dark:bg-white/10" />
+              <div className="absolute -bottom-12 right-0 h-64 w-64 rounded-full bg-primary/40 blur-3xl" />
+            </div>
+            <div className="relative z-10 flex w-full flex-col justify-between p-12">
+              <div className="space-y-4">
+                <p className="text-xs font-semibold uppercase tracking-[0.3em] text-slate-200/70">Already shopping?</p>
+                <h2 className="text-3xl font-semibold leading-tight">Already have an account?</h2>
+                <p className="text-sm text-slate-200/80">
+                  Log in to manage your profile, view orders, and keep your crates organised.
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={handleSwitch}
+                className="mt-8 inline-flex w-full items-center justify-center rounded-full bg-white px-6 py-3 text-sm font-semibold text-slate-900 transition-all duration-300 hover:-translate-y-0.5 hover:bg-slate-100 hover:shadow-lg dark:bg-foreground dark:text-background dark:hover:bg-foreground/90"
+              >
+                Login
+              </button>
+            </div>
+          </aside>
         </div>
       </div>
     </div>
   );
 };
 
-export default page;
+export default SignupPage;
diff --git a/apps/user-ui/src/configs/constants.ts b/apps/user-ui/src/configs/constants.ts
index fab797a..79aeb4e 100644
--- a/apps/user-ui/src/configs/constants.ts
+++ b/apps/user-ui/src/configs/constants.ts
@@ -21,7 +21,7 @@ export const navItems: NavItemsTypes[] = [
   },
   {
     title: 'Become Seller',
-    href: '/seller',
+    href: 'https://nextcart-seller.vercel.app/',
   },
 ];
 
diff --git a/apps/user-ui/src/context/websocket-context.tsx b/apps/user-ui/src/context/websocket-context.tsx
index 0b0a8fa..8722eff 100644
--- a/apps/user-ui/src/context/websocket-context.tsx
+++ b/apps/user-ui/src/context/websocket-context.tsx
@@ -22,6 +22,8 @@ interface WebSocketContextType {
   isConnecting: boolean;
   error: string | null;
   setMessageHandler: (handler: ((type: string, data: any) => void) | null) => void;
+  updateUnreadCount: (conversationId: string, count: number) => void;
+  removeUnreadCount: (conversationId: string) => void;
 }
 
 const WebSocketContext = createContext<WebSocketContextType | undefined>(undefined);
@@ -118,6 +120,31 @@ export const WebSocketProvider: React.FC<WebSocketProviderProps> = ({ user, chil
     };
   }, [user?.id]);
 
+  const updateUnreadCount = (conversationId: string, count: number) => {
+    setUnreadCounts((prev) => {
+      const current = prev[conversationId];
+      if (current === count) {
+        return prev;
+      }
+
+      return {
+        ...prev,
+        [conversationId]: count,
+      };
+    });
+  };
+
+  const removeUnreadCount = (conversationId: string) => {
+    setUnreadCounts((prev) => {
+      if (!(conversationId in prev)) {
+        return prev;
+      }
+
+      const { [conversationId]: _removed, ...rest } = prev;
+      return rest;
+    });
+  };
+
   const value: WebSocketContextType = {
     ws: wsRef.current,
     unreadCounts,
@@ -125,6 +152,8 @@ export const WebSocketProvider: React.FC<WebSocketProviderProps> = ({ user, chil
     isConnecting,
     error,
     setMessageHandler,
+    updateUnreadCount,
+    removeUnreadCount,
   };
 
   return <WebSocketContext.Provider value={value}>{children}</WebSocketContext.Provider>;
@@ -144,6 +173,12 @@ export const useWebSocket = (): WebSocketContextType => {
       setMessageHandler: () => {
         // No-op function
       },
+      updateUnreadCount: () => {
+        // No-op function
+      },
+      removeUnreadCount: () => {
+        // No-op function
+      },
     };
   }
 
diff --git a/apps/user-ui/src/hooks/chat/useMarkAsSeen.ts b/apps/user-ui/src/hooks/chat/useMarkAsSeen.ts
index e92cbdb..282b0b4 100644
--- a/apps/user-ui/src/hooks/chat/useMarkAsSeen.ts
+++ b/apps/user-ui/src/hooks/chat/useMarkAsSeen.ts
@@ -5,30 +5,78 @@ interface MarkAsSeenData {
   conversationId: string;
 }
 
-interface MarkAsSeenResponse {
-  success: boolean;
+interface ConversationsCache {
+  conversations: Array<{
+    id: string;
+    unseenCount: number;
+    [key: string]: any;
+  }>;
 }
 
-const markAsSeen = async (data: MarkAsSeenData): Promise<MarkAsSeenResponse> => {
-  // For now, we'll just return success since the actual marking is handled by WebSocket
-  return { success: true };
-};
-
 export const useMarkAsSeen = () => {
   const queryClient = useQueryClient();
-  const { sendMessage: wsSendMessage } = useWebSocket();
-
-  return useMutation({
-    mutationFn: markAsSeen,
-    onSuccess: (data, variables) => {
-      // Send mark as seen message via WebSocket
-      wsSendMessage({
-        type: 'MARK_AS_SEEN',
-        conversationId: variables.conversationId,
+  const { ws, isConnected, error: wsError, unreadCounts, updateUnreadCount, removeUnreadCount } = useWebSocket();
+
+  return useMutation<
+    { conversationId: string },
+    Error,
+    MarkAsSeenData,
+    {
+      previousData?: ConversationsCache;
+      previousUnreadCount?: number;
+      hadUnreadEntry: boolean;
+    }
+  >({
+    mutationFn: async ({ conversationId }: MarkAsSeenData) => {
+      if (!ws || !isConnected || ws.readyState !== WebSocket.OPEN) {
+        throw new Error(`WebSocket not connected. Status: ${wsError || 'Connection failed'}`);
+      }
+
+      ws.send(
+        JSON.stringify({
+          type: 'MARK_AS_SEEN',
+          conversationId,
+        }),
+      );
+
+      return { conversationId };
+    },
+    onMutate: async ({ conversationId }) => {
+      await queryClient.cancelQueries({ queryKey: ['conversations'] });
+
+      const previousData = queryClient.getQueryData<ConversationsCache>(['conversations']);
+      const hadUnreadEntry = Object.prototype.hasOwnProperty.call(unreadCounts, conversationId);
+      const previousUnreadCount = unreadCounts[conversationId];
+
+      queryClient.setQueryData<ConversationsCache | undefined>(['conversations'], (oldData) => {
+        if (!oldData) return oldData;
+
+        return {
+          ...oldData,
+          conversations: oldData.conversations.map((conversation) =>
+            conversation.id === conversationId
+              ? {
+                  ...conversation,
+                  unseenCount: 0,
+                }
+              : conversation,
+          ),
+        };
       });
 
-      // Invalidate conversations query to update unread counts
-      queryClient.invalidateQueries({ queryKey: ['conversations'] });
+      updateUnreadCount(conversationId, 0);
+
+      return { previousData, previousUnreadCount, hadUnreadEntry };
+    },
+    onError: (_error, variables, context) => {
+      if (context?.previousData) {
+        queryClient.setQueryData(['conversations'], context.previousData);
+      }
+      if (context?.hadUnreadEntry && context.previousUnreadCount !== undefined) {
+        updateUnreadCount(variables.conversationId, context.previousUnreadCount);
+      } else if (context && !context.hadUnreadEntry) {
+        removeUnreadCount(variables.conversationId);
+      }
     },
   });
 };
diff --git a/apps/user-ui/src/shared/components/molecules/chat/ConversationItem.tsx b/apps/user-ui/src/shared/components/molecules/chat/ConversationItem.tsx
index 32f6f9d..798a848 100644
--- a/apps/user-ui/src/shared/components/molecules/chat/ConversationItem.tsx
+++ b/apps/user-ui/src/shared/components/molecules/chat/ConversationItem.tsx
@@ -3,6 +3,7 @@
 import React from 'react';
 import { twMerge } from 'tailwind-merge';
 import UnreadBadge from './UnreadBadge';
+import { useWebSocket } from 'apps/user-ui/src/context/websocket-context';
 
 interface Shop {
   id: string;
@@ -33,6 +34,9 @@ interface ConversationItemProps {
 }
 
 const ConversationItem: React.FC<ConversationItemProps> = ({ conversation, isSelected, onClick }) => {
+  const { unreadCounts } = useWebSocket();
+  const unseenCount = unreadCounts[conversation.id] ?? conversation.unseenCount;
+
   const formatLastMessageTime = (dateString: string) => {
     const date = new Date(dateString);
     const now = new Date();
@@ -100,7 +104,7 @@ const ConversationItem: React.FC<ConversationItemProps> = ({ conversation, isSel
       </div>
 
       {/* Unread Badge */}
-      {conversation?.unseenCount > 0 && <UnreadBadge count={conversation.unseenCount} />}
+      {unseenCount > 0 && <UnreadBadge count={unseenCount} />}
     </div>
   );
 };
diff --git a/apps/user-ui/src/shared/components/organisms/chat/ChatWindow.tsx b/apps/user-ui/src/shared/components/organisms/chat/ChatWindow.tsx
index 33330dc..08ef325 100644
--- a/apps/user-ui/src/shared/components/organisms/chat/ChatWindow.tsx
+++ b/apps/user-ui/src/shared/components/organisms/chat/ChatWindow.tsx
@@ -40,7 +40,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({ conversationId, seller }) => {
   });
 
   const { mutate: sendMessage, isPending: isSending } = useSendMessage();
-  const markAsSeenMutation = useMarkAsSeen();
+  const { mutate: markAsSeen, isPending: isMarking } = useMarkAsSeen();
 
   const { data, isLoading, isError, error } = messagesQuery;
   const sellerInfo = data?.seller || seller;
@@ -59,24 +59,65 @@ const ChatWindow: React.FC<ChatWindowProps> = ({ conversationId, seller }) => {
   // Mark messages as seen when conversation is selected
   useEffect(() => {
     if (conversationId && user?.id) {
-      markAsSeenMutation.mutate({ conversationId });
+      markAsSeen({ conversationId });
     }
-  }, [conversationId, user?.id]);
+  }, [conversationId, user?.id, markAsSeen]);
 
   // Receive new messages from websocket
   useEffect(() => {
     // Set the message handler
     const messageHandler = (type: string, data: any) => {
-      if (type === 'NEW_MESSAGE') {
-        if (data.conversationId === conversationId) {
-          queryClient.setQueryData(['messages', conversationId, 1, 50], (oldData: any) => {
-            if (!oldData) return oldData;
-            return {
-              ...oldData,
-              messages: [...oldData.messages, data],
-            };
-          });
+      if (type !== 'NEW_MESSAGE' || !data?.conversationId) {
+        return;
+      }
+
+      const incomingConversationId = data.conversationId;
+
+      queryClient.setQueryData(['conversations'], (oldData: any) => {
+        if (!oldData) return oldData;
+
+        const conversations = oldData.conversations || [];
+        const nextConversation = conversations.find((conversation: any) => conversation.id === incomingConversationId);
+
+        if (!nextConversation) {
+          return oldData;
         }
+
+        const updatedConversation = {
+          ...nextConversation,
+          lastMessage: {
+            id: data.id || nextConversation.lastMessage?.id || data.messageId || '',
+            content: data.content,
+            senderId: data.senderId,
+            senderType: data.senderType,
+            createdAt: data.createdAt,
+          },
+          updatedAt: data.createdAt || new Date().toISOString(),
+        };
+
+        return {
+          ...oldData,
+          conversations: [
+            updatedConversation,
+            ...conversations.filter((conversation: any) => conversation.id !== incomingConversationId),
+          ],
+        };
+      });
+
+      if (incomingConversationId !== conversationId) {
+        return;
+      }
+
+      queryClient.setQueryData(['messages', conversationId, 1, 50], (oldData: any) => {
+        if (!oldData) return oldData;
+        return {
+          ...oldData,
+          messages: [...oldData.messages, data],
+        };
+      });
+
+      if (data.senderId !== user?.id && !isMarking) {
+        markAsSeen({ conversationId });
       }
     };
 
@@ -86,7 +127,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({ conversationId, seller }) => {
     return () => {
       setMessageHandler(null);
     };
-  }, [setMessageHandler, conversationId, queryClient]);
+  }, [setMessageHandler, conversationId, queryClient, markAsSeen, isMarking, user?.id]);
 
   const handleSendMessage = (content: string) => {
     if (!conversationId || !user?.id || !sellerInfo) return;
diff --git a/apps/user-ui/src/shared/components/organisms/chat/ConversationList.tsx b/apps/user-ui/src/shared/components/organisms/chat/ConversationList.tsx
index a0fad85..15f5762 100644
--- a/apps/user-ui/src/shared/components/organisms/chat/ConversationList.tsx
+++ b/apps/user-ui/src/shared/components/organisms/chat/ConversationList.tsx
@@ -17,7 +17,7 @@ const ConversationList: React.FC<ConversationListProps> = ({ selectedConversatio
   if (isLoading) {
     return (
       <div className="flex flex-col items-center justify-center h-full p-8">
-        <Loader2 className="w-8 h-8 animate-spin text-primary mb-4" />
+        <Loader2 className="w-12 h-12 animate-spin text-primary mb-4" />
         <p className="text-muted-foreground">Loading conversations...</p>
       </div>
     );
diff --git a/apps/user-ui/src/shared/components/organisms/index.tsx b/apps/user-ui/src/shared/components/organisms/index.tsx
index 5aab134..9e9e4b9 100644
--- a/apps/user-ui/src/shared/components/organisms/index.tsx
+++ b/apps/user-ui/src/shared/components/organisms/index.tsx
@@ -10,6 +10,7 @@ export { default as ProductGrid } from './product-grid';
 export { default as ShopCard } from './shop-card';
 export { default as ShopFilters } from './shop-filters';
 export { default as ShopGrid } from './shop-grid';
+export { default as ShopDetails } from './shop-details';
 export { default as TopShops } from './top-shops';
 export * from './profile';
 export * from './chat';
diff --git a/apps/user-ui/src/shared/components/organisms/profile/address-management/index.tsx b/apps/user-ui/src/shared/components/organisms/profile/address-management/index.tsx
index 09e2613..380f156 100644
--- a/apps/user-ui/src/shared/components/organisms/profile/address-management/index.tsx
+++ b/apps/user-ui/src/shared/components/organisms/profile/address-management/index.tsx
@@ -81,7 +81,7 @@ const AddressManagement: React.FC = () => {
   if (isLoading) {
     return (
       <div className="flex items-center justify-center py-12">
-        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        <Loader2 className="h-12 w-12 animate-spin text-primary" />
       </div>
     );
   }
diff --git a/apps/user-ui/src/shared/components/organisms/shop-details.tsx b/apps/user-ui/src/shared/components/organisms/shop-details.tsx
new file mode 100644
index 0000000..6be22e0
--- /dev/null
+++ b/apps/user-ui/src/shared/components/organisms/shop-details.tsx
@@ -0,0 +1,285 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { MapPin, Clock, Globe, Phone, Mail, ExternalLink, ShoppingBag, Users } from 'lucide-react';
+import Ratings from '../molecules/ratings';
+import ProductCard from './product-card';
+
+type SocialLink = {
+  platform?: string;
+  url?: string;
+};
+
+type NormalizedSocialLink = {
+  platform: string;
+  url: string;
+};
+
+type SellerInfo = {
+  id: string;
+  name: string;
+  email?: string;
+  phone_number?: string;
+  country?: string;
+};
+
+type ShopProduct = {
+  id: string;
+  title: string;
+  slug: string;
+  images: Array<{ url: string }>;
+  sale_price: number;
+  regular_price: number;
+  rating: number;
+  totalSales?: number;
+  shop?: {
+    id: string;
+    name: string;
+  };
+};
+
+type ShopDetailsProps = {
+  shop: {
+    id: string;
+    name: string;
+    bio?: string;
+    category?: string;
+    coverBanner?: string;
+    address?: string;
+    opening_hours?: string;
+    website?: string;
+    social_links?: SocialLink[];
+    ratings?: number;
+    averageRating?: number;
+    totalProducts?: number;
+    totalReviews?: number;
+    avatar?: {
+      url: string;
+    } | null;
+    sellers?: SellerInfo | null;
+    products?: ShopProduct[];
+    reviews?: Array<{ id: string }>;
+  } | null;
+};
+
+const ShopDetails = ({ shop }: ShopDetailsProps) => {
+  if (!shop) {
+    return (
+      <div className="min-h-screen bg-background flex items-center justify-center px-4">
+        <div className="max-w-md text-center space-y-4">
+          <h1 className="text-2xl font-semibold text-foreground">Shop not found</h1>
+          <p className="text-muted-foreground">
+            We couldn&apos;t find the shop you were looking for. It may have been removed or is temporarily unavailable.
+          </p>
+          <Link
+            href="/shops"
+            className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+          >
+            Browse other shops
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  const averageRating = typeof shop.averageRating === 'number' ? shop.averageRating : shop.ratings || 0;
+  const totalProducts = shop.totalProducts ?? shop.products?.length ?? 0;
+  const totalReviews = shop.totalReviews ?? shop.reviews?.length ?? 0;
+  const avatarUrl = shop.avatar?.url || '/images/shop-logo-placeholder.svg';
+  const coverUrl = shop.coverBanner || '/images/shop-banner-placeholder.svg';
+
+  const socialLinks: NormalizedSocialLink[] = Array.isArray(shop.social_links)
+    ? (shop.social_links as SocialLink[])
+        .filter(
+          (link): link is SocialLink & { url: string } =>
+            !!link && typeof link === 'object' && typeof link.url === 'string' && link.url.trim().length > 0,
+        )
+        .map((link) => {
+          const cleanedUrl = link.url.trim();
+          let platformLabel =
+            typeof link.platform === 'string' && link.platform.trim().length > 0 ? link.platform.trim() : cleanedUrl;
+
+          if (platformLabel === cleanedUrl) {
+            try {
+              const parsed = new URL(cleanedUrl);
+              platformLabel = parsed.hostname.replace(/^www\./, '');
+            } catch {
+              platformLabel = cleanedUrl;
+            }
+          }
+
+          return {
+            platform: platformLabel,
+            url: cleanedUrl,
+          };
+        })
+    : [];
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="relative h-64 w-full bg-muted">
+        <Image src={coverUrl} alt={`${shop.name} cover`} fill priority className="object-cover" />
+        <div className="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-transparent" />
+      </div>
+
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="-mt-2 flex flex-col gap-6 rounded-2xl bg-card px-6 py-8 shadow-lg border border-border sm:flex-row sm:items-end">
+          <div className="relative h-32 w-32 shrink-0 overflow-hidden rounded-2xl border-4 border-background shadow-xl">
+            <Image src={avatarUrl} alt={`${shop.name} avatar`} fill className="object-cover" />
+          </div>
+
+          <div className="flex-1 space-y-4">
+            <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+              <div className="space-y-2">
+                <h1 className="text-3xl font-semibold text-foreground sm:text-4xl">{shop.name}</h1>
+                {shop.bio && <p className="text-muted-foreground max-w-2xl">{shop.bio}</p>}
+              </div>
+              <div className="flex flex-wrap items-center gap-4">
+                <div className="flex items-center gap-2 rounded-full bg-primary/10 px-4 py-2 text-sm font-medium text-primary">
+                  <ShoppingBag className="h-4 w-4" />
+                  <span>
+                    {totalProducts} product{totalProducts === 1 ? '' : 's'}
+                  </span>
+                </div>
+                <div className="flex items-center gap-2 rounded-full bg-muted px-4 py-2 text-sm text-muted-foreground">
+                  <Users className="h-4 w-4" />
+                  <span>
+                    {totalReviews} review{totalReviews === 1 ? '' : 's'}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex flex-wrap items-center gap-4">
+              <Ratings rating={averageRating} />
+              {shop.category && (
+                <span className="inline-flex items-center rounded-full border border-border px-3 py-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                  {shop.category}
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="py-12 space-y-12">
+          <section className="grid gap-8 lg:grid-cols-[2fr,1fr]">
+            <div className="space-y-6">
+              <div>
+                <h2 className="text-xl font-semibold text-foreground">About</h2>
+                {shop.bio ? (
+                  <p className="mt-3 text-muted-foreground leading-relaxed">{shop.bio}</p>
+                ) : (
+                  <p className="mt-3 text-muted-foreground">This shop hasn&apos;t provided a description yet.</p>
+                )}
+              </div>
+
+              {shop.opening_hours && (
+                <div className="rounded-2xl border border-dashed border-border/80 bg-muted/30 p-6">
+                  <div className="flex items-center gap-3 text-sm font-medium text-foreground">
+                    <Clock className="h-5 w-5 text-primary" />
+                    Opening hours
+                  </div>
+                  <p className="mt-2 text-sm text-muted-foreground whitespace-pre-line">{shop.opening_hours}</p>
+                </div>
+              )}
+            </div>
+
+            <aside className="space-y-6">
+              <div className="rounded-2xl border border-border bg-card p-6 shadow-sm">
+                <h3 className="text-lg font-semibold text-foreground">Shop details</h3>
+                <ul className="mt-4 space-y-4 text-sm text-muted-foreground">
+                  {shop.address && (
+                    <li className="flex items-start gap-3">
+                      <MapPin className="mt-0.5 h-4 w-4 text-primary" />
+                      <span>{shop.address}</span>
+                    </li>
+                  )}
+                  {shop.sellers?.name && (
+                    <li className="flex items-start gap-3">
+                      <Users className="mt-0.5 h-4 w-4 text-primary" />
+                      <span>{shop.sellers.name}</span>
+                    </li>
+                  )}
+                  {shop.website && (
+                    <li className="flex items-start gap-3">
+                      <Globe className="mt-0.5 h-4 w-4 text-primary" />
+                      <a href={shop.website} className="inline-flex items-center gap-1 text-primary hover:underline">
+                        Visit website
+                        <ExternalLink className="h-3 w-3" />
+                      </a>
+                    </li>
+                  )}
+                  {shop.sellers?.country && (
+                    <li className="flex items-start gap-3">
+                      <MapPin className="mt-0.5 h-4 w-4 text-primary" />
+                      <span>{shop.sellers.country}</span>
+                    </li>
+                  )}
+                  {shop.sellers?.phone_number && (
+                    <li className="flex items-start gap-3">
+                      <Phone className="mt-0.5 h-4 w-4 text-primary" />
+                      <a href={`tel:${shop.sellers.phone_number}`} className="text-primary hover:underline">
+                        {shop.sellers.phone_number}
+                      </a>
+                    </li>
+                  )}
+                  {shop.sellers?.email && (
+                    <li className="flex items-start gap-3">
+                      <Mail className="mt-0.5 h-4 w-4 text-primary" />
+                      <a href={`mailto:${shop.sellers.email}`} className="text-primary hover:underline">
+                        {shop.sellers.email}
+                      </a>
+                    </li>
+                  )}
+                </ul>
+              </div>
+
+              {socialLinks.length > 0 && (
+                <div className="rounded-2xl border border-border bg-card p-6 shadow-sm">
+                  <h3 className="text-lg font-semibold text-foreground">Social links</h3>
+                  <ul className="mt-4 space-y-3 text-sm text-primary">
+                    {socialLinks.map((link) => (
+                      <li key={`${link.platform}-${link.url}`}>
+                        <a
+                          href={link.url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="inline-flex items-center gap-2 hover:underline"
+                        >
+                          <ExternalLink className="h-4 w-4" />
+                          <span>{link.platform}</span>
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </aside>
+          </section>
+
+          <section>
+            <div className="flex flex-wrap items-center justify-between gap-4">
+              <h2 className="text-xl font-semibold text-foreground">Products</h2>
+              <Link href="/shops" className="text-sm font-medium text-primary hover:underline">
+                Back to shops
+              </Link>
+            </div>
+
+            {shop.products && shop.products.length > 0 ? (
+              <div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+                {shop.products.map((product) => (
+                  <ProductCard key={product.id} product={product} />
+                ))}
+              </div>
+            ) : (
+              <div className="mt-6 rounded-2xl border border-dashed border-border/80 bg-muted/30 p-10 text-center text-muted-foreground">
+                This shop hasn&apos;t added any products yet.
+              </div>
+            )}
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ShopDetails;
diff --git a/apps/user-ui/src/shared/widgets/header/action-items.tsx b/apps/user-ui/src/shared/widgets/header/action-items.tsx
index a397d14..9eb4ef5 100644
--- a/apps/user-ui/src/shared/widgets/header/action-items.tsx
+++ b/apps/user-ui/src/shared/widgets/header/action-items.tsx
@@ -16,34 +16,34 @@ const ActionItems = () => {
     <div className="flex items-center gap-8">
       <div className="flex items-center gap-4">
         {/* User Profile Section */}
-        <div className="w-[120px] h-[50px] flex items-center justify-center">
+        <div className="w-[170px] h-[32px] flex items-center justify-center">
           {isLoading ? (
             <Spinner size="lg" />
           ) : user ? (
             <>
               <Link
                 href={'/profile'}
-                className="border-2 w-[50px] h-[50px] flex items-center justify-center rounded-full border-border mr-2"
+                className="border-2 w-[32px] h-[32px] flex items-center justify-center rounded-full border-border mr-2"
               >
-                <User />
+                <User size={18} />
               </Link>
               <Link href={'/profile'}>
-                <span className="block font-medium">Hello, </span>
-                <span className="font-semibold">{`${user.name}`}</span>
+                <span className="font-medium text-sm">Hello, </span>
+                <span className="font-semibold text-sm">{`${user.name}`}</span>
               </Link>
             </>
           ) : (
             <>
               <Link
                 href={'/login'}
-                className="border-2 w-[50px] h-[50px] flex items-center justify-center rounded-full border-border mr-2"
+                className="border-2 w-[32px] h-[32px] flex items-center justify-center rounded-full border-border mr-2"
               >
-                <User />
+                <User size={18} />
               </Link>
               <div className="flex items-center gap-4">
                 <Link href={'/login'}>
-                  <span className="block font-medium">Hello, </span>
-                  <span className="font-semibold"> Sign In</span>
+                  <span className="font-medium text-sm">Hello, </span>
+                  <span className="font-semibold text-sm">Sign In</span>
                 </Link>
               </div>
             </>
diff --git a/apps/user-ui/src/shared/widgets/header/header-bottom.tsx b/apps/user-ui/src/shared/widgets/header/header-bottom.tsx
index 2c4b410..651c3e8 100644
--- a/apps/user-ui/src/shared/widgets/header/header-bottom.tsx
+++ b/apps/user-ui/src/shared/widgets/header/header-bottom.tsx
@@ -61,22 +61,37 @@ const HeaderBottom = () => {
       className={twMerge(
         'w-full transition-all duration-300 ease-out',
         isSticky
-          ? 'fixed top-0 left-0 z-[100] h-20 bg-background/80 backdrop-blur-md border-b border-border/60 shadow-lg'
+          ? 'fixed top-0 left-0 z-[100] h-12 bg-background/80 backdrop-blur-md border-b border-border/60 shadow-lg'
           : 'relative',
       )}
     >
-      <div className={twMerge('relative m-auto flex w-[80%] items-center justify-between', isSticky ? 'pt-3' : 'pt-0')}>
+      <div
+        className={twMerge('relative m-auto flex w-[80%] items-center justify-between', isSticky ? 'py-1.5' : 'py-2')}
+      >
         {/** Navigation Links */}
         <div className="flex items-center gap-6">
-          {navItems.map((item, index) => (
-            <Link
-              className="px-2 text-sm font-semibold text-muted-foreground transition-colors hover:text-primary"
-              key={index}
-              href={item.href}
-            >
-              {item.title}
-            </Link>
-          ))}
+          {navItems.map((item, index) => {
+            const isExternalLink = item.href.startsWith('http');
+            return isExternalLink ? (
+              <a
+                className="px-2 text-sm font-semibold text-muted-foreground transition-colors hover:text-primary"
+                key={index}
+                href={item.href}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {item.title}
+              </a>
+            ) : (
+              <Link
+                className="px-2 text-sm font-semibold text-muted-foreground transition-colors hover:text-primary"
+                key={index}
+                href={item.href}
+              >
+                {item.title}
+              </Link>
+            );
+          })}
         </div>
 
         {/** Sticky Action Items - Always render but conditionally show */}
diff --git a/apps/user-ui/src/utils/axiosInstance.ts b/apps/user-ui/src/utils/axiosInstance.ts
index 8001dfe..4bc0aaf 100644
--- a/apps/user-ui/src/utils/axiosInstance.ts
+++ b/apps/user-ui/src/utils/axiosInstance.ts
@@ -33,7 +33,13 @@ const onRefreshSuccess = () => {
 
 //Handle api requests
 axiosInstance.interceptors.request.use(
-  (config) => config,
+  (config) => {
+    const headers = config.headers ?? {};
+    (headers as any)['x-auth-actor'] = 'user';
+    config.headers = headers;
+
+    return config;
+  },
   (error) => Promise.reject(error),
 );
 
diff --git a/packages/middleware/isAuthenticated.ts b/packages/middleware/isAuthenticated.ts
index d9b76b3..2fbf7c6 100644
--- a/packages/middleware/isAuthenticated.ts
+++ b/packages/middleware/isAuthenticated.ts
@@ -1,45 +1,109 @@
 import prisma from '@packages/libs/prisma';
 import { NextFunction, Response } from 'express';
 import jwt from 'jsonwebtoken';
-const isAuthenticated = async (req: any, response: Response, next: NextFunction) => {
-  try {
-    const token =
-      req.cookies['access_token'] || req.cookies['seller_access_token'] || req.headers.authorization?.split(' ')[1];
 
-    if (!token) {
-      return response.status(401).json({ message: 'Unauthorized! No access token' });
-    }
+const ACCESS_TOKEN_SECRET = process.env.ACCESS_TOKEN_SECRET as string;
 
-    //Verify token
-    const decoded = jwt.verify(token, process.env.ACCESS_TOKEN_SECRET as string) as {
-      id: string;
-      role: 'user' | 'seller';
-    };
+type Role = 'user' | 'seller';
 
-    if (!decoded) {
-      return response.status(403).json({ message: 'Forbidden! Invalid access token' });
-    }
+type DecodedToken = {
+  id: string;
+  role?: string;
+};
 
-    const account =
-      decoded.role === 'user'
-        ? await prisma.users.findUnique({ where: { id: decoded.id } })
-        : await prisma.sellers.findUnique({ where: { id: decoded.id }, include: { shop: true } });
-    if (!account) {
-      return response.status(403).json({ message: 'Account not found!' });
-    }
+const TOKEN_COOKIE: Record<Role, string> = {
+  user: 'access_token',
+  seller: 'seller_access_token',
+};
 
-    if (decoded.role === 'seller') {
-      req.seller = account;
-    } else {
-      req.user = account;
-      console.log('Set req.user to ', account);
+const parseRoleHeader = (value: string | string[] | undefined): Role | null => {
+  if (!value) {
+    return null;
+  }
+
+  const raw = Array.isArray(value) ? value[0] : value;
+  const normalized = raw?.toString().trim().toLowerCase();
+
+  if (normalized === 'user' || normalized === 'seller') {
+    return normalized;
+  }
+
+  return null;
+};
+
+const resolveRequestedRole = (req: any, allowedRoles: Role[]): Role | null => {
+  const headerValue = req.headers['x-auth-actor'] ?? req.headers['x-auth-role'] ?? req.headers['x-client-role'];
+  const headerRole = parseRoleHeader(headerValue as string | string[] | undefined);
+
+  if (headerRole) {
+    return allowedRoles.includes(headerRole) ? headerRole : null;
+  }
+
+  for (const candidate of allowedRoles) {
+    const cookieName = TOKEN_COOKIE[candidate];
+    if (req.cookies?.[cookieName]) {
+      return candidate;
     }
+  }
 
-    req.role = decoded.role;
-    return next();
-  } catch (error) {
-    return response.status(401).json({ message: 'Unauthorized! Token expired or invalid.' });
+  return null;
+};
+
+const loadAccountByRole = async (role: Role, id: string) => {
+  if (role === 'user') {
+    return prisma.users.findUnique({ where: { id } });
   }
+
+  return prisma.sellers.findUnique({ where: { id }, include: { shop: true } });
+};
+
+const createIsAuthenticated = (allowedRoles: Role[] = ['user', 'seller']) => {
+  return async (req: any, res: Response, next: NextFunction) => {
+    try {
+      const role = resolveRequestedRole(req, allowedRoles);
+      console.log('Resolved to role: ', role);
+      if (!role) {
+        return res.status(401).json({ message: 'Unauthorized! No matching session.' });
+      }
+
+      const tokenName = TOKEN_COOKIE[role];
+      const token = req.cookies?.[tokenName];
+
+      if (!token) {
+        return res.status(401).json({ message: 'Unauthorized! Session token missing.' });
+      }
+
+      const decoded = jwt.verify(token, ACCESS_TOKEN_SECRET) as DecodedToken;
+
+      if (!decoded?.id || (decoded.role && decoded.role !== role)) {
+        return res.status(401).json({ message: 'Unauthorized! Invalid session token.' });
+      }
+
+      const account = await loadAccountByRole(role, decoded.id);
+
+      if (!account) {
+        return res.status(403).json({ message: 'Account not found!' });
+      }
+
+      if (role === 'user') {
+        req.user = account;
+      } else {
+        req.seller = account;
+      }
+
+      req.role = role;
+      req.roles = { ...(req.roles || {}), [role]: true };
+
+      return next();
+    } catch (error) {
+      return res.status(401).json({ message: 'Unauthorized! Token expired or invalid.' });
+    }
+  };
 };
 
+export const isUserAuthenticated = createIsAuthenticated(['user']);
+export const isSellerAuthenticated = createIsAuthenticated(['seller']);
+
+const isAuthenticated = createIsAuthenticated();
+
 export default isAuthenticated;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 5ac1100..92bfaf9 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -59,13 +59,15 @@ model shops {
   social_links  Json[]
   ratings Float @default(0)
   reviews shopReview[]
-  sellerId  String @unique @db.ObjectId
+  sellerId  String @db.ObjectId
   sellers     sellers @relation(fields: [sellerId], references: [id])
   createdAt   DateTime @default(now())
   updatedAt   DateTime @updatedAt
   products products[]
   productAnalytics productAnalytics[]
   orders orders[]
+  
+  @@unique([sellerId])
 }
 
 model sellers {
@@ -77,7 +79,7 @@ model sellers {
   password    String?
   stripeId    String?
   shop        shops?
-  shopId      String? @unique @db.ObjectId
+  shopId      String? @db.ObjectId
   createdAt   DateTime @default(now())
   updatedAt   DateTime @updatedAt
 }
diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo
new file mode 100644
index 0000000..1862540
--- /dev/null
+++ b/tsconfig.tsbuildinfo
@@ -0,0 +1 @@
+{"fileNames":[],"fileInfos":[],"root":[],"options":{"composite":true,"declarationMap":true,"emitDeclarationOnly":true,"importHelpers":true,"module":199,"noEmitOnError":true,"noFallthroughCasesInSwitch":true,"noImplicitOverride":true,"noImplicitReturns":true,"noUnusedLocals":true,"skipLibCheck":true,"strict":true,"target":9},"version":"5.7.3"}
\ No newline at end of file