feat: Implement agent messaging and settings pages with new components and icons.

src/app/(agent)/agent/dashboard/component/ProfileCard.tsx

@@ -86,7 +86,10 @@ export function ProfileCard({
 
         {/* Action Buttons */}
         <div className="flex items-center justify-center lg:justify-start gap-3">
-          <button className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif">
+          <Link
+            href="/agent/message"
+            className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif cursor-pointer"
+          >
             <Image
               src="/assets/icons/message-dark-icon.svg"
               alt="Message"
@@ -94,7 +97,7 @@ export function ProfileCard({
               height={13}
             />
             Message
-          </button>
+          </Link>
           <Link
             href="/agent/network"
             className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif cursor-pointer"

src/app/(agent)/agent/message/component/ChatHeader.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import Image from 'next/image';
+
+interface ChatHeaderProps {
+  name: string;
+  role: string;
+  lastSeen: string;
+  avatar: string;
+  isOnline?: boolean;
+  pronouns?: string;
+  expertise?: string[];
+}
+
+export function ChatHeader({
+  name,
+  role,
+  lastSeen,
+  avatar,
+  isOnline = false,
+  pronouns,
+  expertise = [],
+}: ChatHeaderProps) {
+  return (
+    <div className="border-b border-[#00293d]/10 pb-4">
+      {/* Top row - Name, status, actions */}
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <h2 className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
+            {name}
+          </h2>
+          <span className={`w-2.5 h-2.5 rounded-full ${isOnline ? 'bg-green-500' : 'bg-gray-400'}`} />
+          <span className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D]">
+            {role}
+          </span>
+          <span className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D]">
+            {lastSeen}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
+            <Image
+              src="/assets/icons/three-dots-icon.svg"
+              alt="More options"
+              width={24}
+              height={24}
+            />
+          </button>
+          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
+            <Image
+              src="/assets/icons/star-outline-icon.svg"
+              alt="Star conversation"
+              width={24}
+              height={24}
+            />
+          </button>
+        </div>
+      </div>
+
+      {/* User profile row */}
+      <div className="flex items-start gap-3">
+        {/* Avatar */}
+        <div className="relative flex-shrink-0">
+          <div className="w-[50px] h-[50px] rounded-full overflow-hidden">
+            <Image
+              src={avatar}
+              alt={name}
+              width={50}
+              height={50}
+              className="w-full h-full object-cover"
+            />
+          </div>
+          {isOnline && (
+            <div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white" />
+          )}
+        </div>
+
+        {/* User info */}
+        <div className="flex-1">
+          <div className="flex items-center gap-2 mb-1">
+            <span className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
+              {name}
+            </span>
+            <Image
+              src="/assets/icons/shield-verified-icon.svg"
+              alt="Verified"
+              width={17}
+              height={18}
+            />
+            {pronouns && (
+              <span className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
+                ({pronouns})
+              </span>
+            )}
+          </div>
+
+          {/* Expertise tags */}
+          {expertise.length > 0 && (
+            <div className="flex items-center gap-2 flex-wrap">
+              {expertise.map((tag, index) => (
+                <span key={index} className="flex items-center">
+                  <span className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D]">
+                    {tag}
+                  </span>
+                  {index < expertise.length - 1 && (
+                    <span className="mx-2 text-[#00293d]/30">|</span>
+                  )}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(agent)/agent/message/component/ConversationItem.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import Image from 'next/image';
+
+interface ConversationItemProps {
+  id: string;
+  name: string;
+  avatar: string;
+  lastMessage: string;
+  date: string;
+  isOnline?: boolean;
+  isSelected?: boolean;
+  onClick?: () => void;
+}
+
+export function ConversationItem({
+  id,
+  name,
+  avatar,
+  lastMessage,
+  date,
+  isOnline = false,
+  isSelected = false,
+  onClick,
+}: ConversationItemProps) {
+  return (
+    <div
+      onClick={onClick}
+      className={`flex items-start gap-3 p-4 border border-[#00293d]/10 rounded-[15px] cursor-pointer transition-colors ${
+        isSelected ? 'bg-[#00293d]/5' : 'hover:bg-[#00293d]/5'
+      }`}
+    >
+      {/* Avatar with online indicator */}
+      <div className="relative flex-shrink-0">
+        <div className="w-[70px] h-[70px] rounded-full overflow-hidden">
+          <Image
+            src={avatar}
+            alt={name}
+            width={70}
+            height={70}
+            className="w-full h-full object-cover"
+          />
+        </div>
+        {isOnline && (
+          <div className="absolute bottom-1 right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" />
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        <p className="font-fractul font-medium text-[14px] leading-[17px] text-[#00293D] mb-1">
+          {name}
+        </p>
+        <p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] line-clamp-2">
+          {lastMessage}
+        </p>
+      </div>
+
+      {/* Date */}
+      <p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] flex-shrink-0">
+        {date}
+      </p>
+    </div>
+  );
+}

src/app/(agent)/agent/message/component/ConversationList.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import Image from 'next/image';
+import { ConversationItem } from './ConversationItem';
+
+interface Conversation {
+  id: string;
+  name: string;
+  avatar: string;
+  lastMessage: string;
+  date: string;
+  isOnline?: boolean;
+}
+
+interface ConversationListProps {
+  conversations: Conversation[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+}
+
+export function ConversationList({
+  conversations,
+  selectedId,
+  onSelect,
+}: ConversationListProps) {
+  return (
+    <div className="border border-[#00293d]/10 rounded-[15px] bg-white h-full flex flex-col">
+      {/* Scrollable conversation list */}
+      <div className="flex-1 overflow-y-auto p-2 space-y-2">
+        {conversations.map((conversation) => (
+          <ConversationItem
+            key={conversation.id}
+            {...conversation}
+            isSelected={selectedId === conversation.id}
+            onClick={() => onSelect(conversation.id)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

src/app/(agent)/agent/message/component/MessageInput.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import Image from 'next/image';
+import { useState } from 'react';
+
+interface MessageInputProps {
+  onSend?: (message: string) => void;
+}
+
+export function MessageInput({ onSend }: MessageInputProps) {
+  const [message, setMessage] = useState('');
+
+  const handleSend = () => {
+    if (message.trim() && onSend) {
+      onSend(message.trim());
+      setMessage('');
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <div className="border border-[#00293d]/10 rounded-[20px] bg-white p-4">
+      {/* Text input area */}
+      <div className="border border-[#00293d]/10 rounded-[20px] p-4 mb-3">
+        <textarea
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Write a Message........"
+          className="w-full min-h-[120px] resize-none font-serif font-normal text-[14px] leading-[19px] text-[#00293D] placeholder-[#00293D]/50 focus:outline-none"
+        />
+      </div>
+
+      {/* Action bar */}
+      <div className="flex items-center justify-between">
+        {/* Attachment buttons */}
+        <div className="flex items-center gap-3">
+          <button className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
+            <Image
+              src="/assets/icons/gallery-icon.svg"
+              alt="Add image"
+              width={24}
+              height={24}
+            />
+          </button>
+          <button className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
+            <Image
+              src="/assets/icons/chain-icon.svg"
+              alt="Add link"
+              width={24}
+              height={24}
+            />
+          </button>
+          <button className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
+            <Image
+              src="/assets/icons/gif-icon.svg"
+              alt="Add GIF"
+              width={24}
+              height={24}
+            />
+          </button>
+          <button className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
+            <Image
+              src="/assets/icons/emoji-icon.svg"
+              alt="Add emoji"
+              width={24}
+              height={24}
+            />
+          </button>
+        </div>
+
+        {/* Send button and more options */}
+        <div className="flex items-center gap-2">
+          <button
+            onClick={handleSend}
+            className="px-4 py-1.5 bg-[#e58625] text-[#00293d] font-serif font-normal text-[14px] leading-[19px] rounded-[15px] hover:bg-[#d47720] transition-colors cursor-pointer"
+          >
+            Send
+          </button>
+          <button className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
+            <Image
+              src="/assets/icons/three-dots-icon.svg"
+              alt="More options"
+              width={24}
+              height={24}
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(agent)/agent/message/component/index.ts

@@ -0,0 +1,4 @@
+export { ConversationItem } from './ConversationItem';
+export { ConversationList } from './ConversationList';
+export { ChatHeader } from './ChatHeader';
+export { MessageInput } from './MessageInput';

src/app/(agent)/agent/message/page.tsx

@@ -0,0 +1,383 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import { ChatHeader, MessageInput } from './component';
+
+// Custom scrollbar styles
+const customScrollbarStyles = `
+  .custom-scrollbar::-webkit-scrollbar {
+    width: 8px;
+  }
+  .custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .custom-scrollbar::-webkit-scrollbar-thumb {
+    background: rgba(0, 41, 61, 0.5);
+    border-radius: 10px;
+  }
+  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 41, 61, 0.7);
+  }
+`;
+
+// Mock data for conversations
+const conversations = [
+  {
+    id: '1',
+    name: 'Pradeep Ram',
+    avatar: '/assets/icons/user-placeholder-icon.svg',
+    lastMessage: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    date: 'Dec 4',
+    isOnline: true,
+  },
+  {
+    id: '2',
+    name: 'Pradeep',
+    avatar: '/assets/icons/user-placeholder-icon.svg',
+    lastMessage: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    date: 'Dec 4',
+    isOnline: true,
+  },
+  {
+    id: '3',
+    name: 'Gokulraj',
+    avatar: '/assets/icons/user-placeholder-icon.svg',
+    lastMessage: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    date: 'Dec 4',
+    isOnline: true,
+  },
+  {
+    id: '4',
+    name: 'Suriya s',
+    avatar: '/assets/icons/user-placeholder-icon.svg',
+    lastMessage: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    date: 'Dec 4',
+    isOnline: true,
+  },
+  {
+    id: '5',
+    name: 'Sanjay',
+    avatar: '/assets/icons/user-placeholder-icon.svg',
+    lastMessage: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    date: 'Dec 4',
+    isOnline: true,
+  },
+  {
+    id: '6',
+    name: 'Pradeep Ram',
+    avatar: '/assets/icons/user-placeholder-icon.svg',
+    lastMessage: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    date: 'Dec 4',
+    isOnline: false,
+  },
+  {
+    id: '7',
+    name: 'Rahul Kumar',
+    avatar: '/assets/icons/user-placeholder-icon.svg',
+    lastMessage: 'Thanks for your help with the property listing!',
+    date: 'Dec 3',
+    isOnline: true,
+  },
+  {
+    id: '8',
+    name: 'Anita Singh',
+    avatar: '/assets/icons/user-placeholder-icon.svg',
+    lastMessage: 'Can we schedule a viewing for tomorrow?',
+    date: 'Dec 3',
+    isOnline: false,
+  },
+  {
+    id: '9',
+    name: 'Vikram Patel',
+    avatar: '/assets/icons/user-placeholder-icon.svg',
+    lastMessage: 'The documents have been submitted.',
+    date: 'Dec 2',
+    isOnline: true,
+  },
+  {
+    id: '10',
+    name: 'Meera Sharma',
+    avatar: '/assets/icons/user-placeholder-icon.svg',
+    lastMessage: 'Looking forward to our meeting next week.',
+    date: 'Dec 2',
+    isOnline: false,
+  },
+  {
+    id: '11',
+    name: 'Arjun Reddy',
+    avatar: '/assets/icons/user-placeholder-icon.svg',
+    lastMessage: 'Please send me the property details.',
+    date: 'Dec 1',
+    isOnline: true,
+  },
+  {
+    id: '12',
+    name: 'Sneha Nair',
+    avatar: '/assets/icons/user-placeholder-icon.svg',
+    lastMessage: 'I have a few questions about the contract.',
+    date: 'Dec 1',
+    isOnline: false,
+  },
+];
+
+// Mock data for selected user
+const selectedUserData = {
+  name: 'Pradeep Ram',
+  role: 'Advisor',
+  lastSeen: '21h Ago',
+  avatar: '/assets/icons/user-placeholder-icon.svg',
+  isOnline: true,
+  pronouns: 'He/Him',
+  expertise: ['Sales', 'Analytics', 'Inspection', 'Residential', 'Commercial'],
+};
+
+// Mock messages data
+const messages = [
+  {
+    id: '1',
+    senderId: '1',
+    text: 'Hi! I saw your profile and I think you might be a great fit for what I\'m looking for.',
+    timestamp: '10:30 AM',
+    isOwn: false,
+  },
+  {
+    id: '2',
+    senderId: 'me',
+    text: 'Hello! Thank you for reaching out. I\'d be happy to help. What kind of property are you looking for?',
+    timestamp: '10:32 AM',
+    isOwn: true,
+  },
+  {
+    id: '3',
+    senderId: '1',
+    text: 'I\'m looking for a residential property in the downtown area. Preferably a 3-bedroom apartment with modern amenities.',
+    timestamp: '10:35 AM',
+    isOwn: false,
+  },
+  {
+    id: '4',
+    senderId: 'me',
+    text: 'That sounds great! I have several listings that might interest you. Do you have a specific budget range in mind?',
+    timestamp: '10:38 AM',
+    isOwn: true,
+  },
+  {
+    id: '5',
+    senderId: '1',
+    text: 'My budget is around $500,000 to $700,000. I\'m also interested in properties with good investment potential.',
+    timestamp: '10:40 AM',
+    isOwn: false,
+  },
+  {
+    id: '6',
+    senderId: 'me',
+    text: 'Perfect! I have a few properties in that range. Would you like to schedule a viewing this weekend?',
+    timestamp: '10:42 AM',
+    isOwn: true,
+  },
+  {
+    id: '7',
+    senderId: '1',
+    text: 'Yes, that would be great! Saturday afternoon works best for me.',
+    timestamp: '10:45 AM',
+    isOwn: false,
+  },
+  {
+    id: '8',
+    senderId: 'me',
+    text: 'Saturday at 2 PM works for me. I\'ll send you the addresses and details of the properties we\'ll be visiting.',
+    timestamp: '10:48 AM',
+    isOwn: true,
+  },
+  {
+    id: '9',
+    senderId: '1',
+    text: 'Sounds perfect! Looking forward to it. Thank you for your quick response.',
+    timestamp: '10:50 AM',
+    isOwn: false,
+  },
+  {
+    id: '10',
+    senderId: 'me',
+    text: 'You\'re welcome! See you on Saturday. Feel free to reach out if you have any questions before then.',
+    timestamp: '10:52 AM',
+    isOwn: true,
+  },
+];
+
+export default function MessagePage() {
+  const [selectedConversation, setSelectedConversation] = useState<string | null>('1');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleSendMessage = (message: string) => {
+    console.log('Sending message:', message);
+    // In production, this would send the message to the API
+  };
+
+  const filteredConversations = conversations.filter((conv) =>
+    conv.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <>
+      <style>{customScrollbarStyles}</style>
+      <div className="border border-[#00293d]/10 rounded-[20px] bg-white overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center gap-4 p-4 border-b border-[#00293d]/10">
+        <h1 className="font-fractul font-bold text-[18px] leading-[22px] text-[#00293D]">
+          Messaging
+        </h1>
+
+        {/* Search bar */}
+        <div className="flex-1 max-w-[600px]">
+          <div className="flex items-center gap-2 border border-[#00293d]/10 rounded-[15px] px-4 py-2">
+            <Image
+              src="/assets/icons/search-icon.svg"
+              alt="Search"
+              width={20}
+              height={20}
+            />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search Message"
+              className="flex-1 font-serif font-normal text-[18px] leading-[24px] text-[#00293D] placeholder-[#00293D]/50 focus:outline-none"
+            />
+          </div>
+        </div>
+
+        {/* Header actions */}
+        <div className="flex items-center gap-2">
+          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
+            <Image
+              src="/assets/icons/three-dots-icon.svg"
+              alt="More options"
+              width={24}
+              height={24}
+            />
+          </button>
+          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
+            <Image
+              src="/assets/icons/compose-icon.svg"
+              alt="Compose"
+              width={24}
+              height={24}
+            />
+          </button>
+        </div>
+      </div>
+
+      {/* Main content */}
+      <div className="flex h-[700px]">
+        {/* Left sidebar - Conversation list */}
+        <div className="w-[380px] border-r border-[#00293d]/10 flex-shrink-0 overflow-hidden flex flex-col">
+          <div className="flex-1 overflow-y-auto p-2 space-y-2 custom-scrollbar">
+            {filteredConversations.map((conversation) => (
+              <div
+                key={conversation.id}
+                onClick={() => setSelectedConversation(conversation.id)}
+                className={`flex items-start gap-3 p-4 border border-[#00293d]/10 rounded-[15px] cursor-pointer transition-colors ${
+                  selectedConversation === conversation.id ? 'bg-[#00293d]/5' : 'hover:bg-[#00293d]/5'
+                }`}
+              >
+                {/* Avatar with online indicator */}
+                <div className="relative flex-shrink-0">
+                  <div className="w-[70px] h-[70px] rounded-full overflow-hidden">
+                    <Image
+                      src={conversation.avatar}
+                      alt={conversation.name}
+                      width={70}
+                      height={70}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                  {conversation.isOnline && (
+                    <div className="absolute bottom-1 right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" />
+                  )}
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 min-w-0">
+                  <p className="font-fractul font-medium text-[14px] leading-[17px] text-[#00293D] mb-1">
+                    {conversation.name}
+                  </p>
+                  <p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] line-clamp-2">
+                    {conversation.lastMessage}
+                  </p>
+                </div>
+
+                {/* Date */}
+                <p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] flex-shrink-0">
+                  {conversation.date}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Right panel - Chat area */}
+        <div className="flex-1 flex flex-col p-4">
+          {selectedConversation ? (
+            <>
+              {/* Chat header */}
+              <ChatHeader {...selectedUserData} />
+
+              {/* Messages area */}
+              <div className="flex-1 overflow-y-auto py-4 relative custom-scrollbar">
+                <div className="space-y-4 px-2">
+                  {messages.map((message) => (
+                    <div
+                      key={message.id}
+                      className={`flex ${message.isOwn ? 'justify-end' : 'justify-start'}`}
+                    >
+                      <div
+                        className={`max-w-[70%] rounded-[15px] px-4 py-3 ${
+                          message.isOwn
+                            ? 'bg-[#e58625] text-[#00293D]'
+                            : 'bg-[#00293d]/10 text-[#00293D]'
+                        }`}
+                      >
+                        <p className="font-serif font-normal text-[14px] leading-[19px]">
+                          {message.text}
+                        </p>
+                        <p
+                          className={`font-serif font-normal text-[12px] leading-[16px] mt-1 ${
+                            message.isOwn ? 'text-[#00293D]/70' : 'text-[#00293D]/50'
+                          }`}
+                        >
+                          {message.timestamp}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {/* Scroll to bottom button */}
+                <div className="absolute bottom-4 right-4">
+                  <button className="w-[50px] h-[50px] bg-[#00293d]/10 rounded-full flex items-center justify-center hover:bg-[#00293d]/20 transition-colors cursor-pointer">
+                    <Image
+                      src="/assets/icons/arrow-down-icon.svg"
+                      alt="Scroll to bottom"
+                      width={20}
+                      height={20}
+                    />
+                  </button>
+                </div>
+              </div>
+
+              {/* Message input */}
+              <MessageInput onSend={handleSendMessage} />
+            </>
+          ) : (
+            <div className="flex items-center justify-center h-full text-[#00293D]/50 font-serif">
+              Select a conversation to start messaging
+            </div>
+          )}
+        </div>
+      </div>
+      </div>
+    </>
+  );
+}

src/app/(agent)/agent/settings/component/SettingsSidebar.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+interface NavItem {
+  label: string;
+  href: string;
+  icon: string;
+}
+
+const navItems: NavItem[] = [
+  {
+    label: 'Profile Settings',
+    href: '/agent/settings',
+    icon: '/assets/icons/settings-profile-icon.svg',
+  },
+  {
+    label: 'Password Security',
+    href: '/agent/settings/password',
+    icon: '/assets/icons/settings-lock-icon.svg',
+  },
+  {
+    label: 'Notifications',
+    href: '/agent/settings/notifications',
+    icon: '/assets/icons/settings-bell-icon.svg',
+  },
+  {
+    label: 'Privacy',
+    href: '/agent/settings/privacy',
+    icon: '/assets/icons/settings-privacy-icon.svg',
+  },
+];
+
+interface SettingsSidebarProps {
+  profileImage?: string;
+  name?: string;
+  title?: string;
+}
+
+export function SettingsSidebar({
+  profileImage = '/assets/icons/user-placeholder-icon.svg',
+  name = 'Brain Nooland',
+  title = 'Top Real Estate Agent',
+}: SettingsSidebarProps) {
+  const pathname = usePathname();
+
+  return (
+    <div className="w-full lg:w-[280px] bg-white rounded-[15px] border border-[#00293d]/10 overflow-hidden h-fit">
+      {/* Profile Section */}
+      <div className="p-6 flex flex-col items-center">
+        <div className="w-[80px] h-[80px] rounded-full overflow-hidden mb-3 border-2 border-[#e58625]">
+          <Image
+            src={profileImage}
+            alt={name}
+            width={80}
+            height={80}
+            className="w-full h-full object-cover"
+          />
+        </div>
+        <h3 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
+          {name}
+        </h3>
+        <p className="font-serif font-normal text-[12px] leading-[16px] text-[#00293D]/70 mt-1">
+          {title}
+        </p>
+      </div>
+
+      {/* Divider */}
+      <div className="w-full h-[1px] bg-[#00293d]/10" />
+
+      {/* Categories Section */}
+      <div className="p-4">
+        {/* Categories Header */}
+        <div className="flex items-center justify-between mb-4 px-2">
+          <h4 className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
+            Categories
+          </h4>
+          <Image
+            src="/assets/icons/chevron-right-icon.svg"
+            alt="Expand"
+            width={8}
+            height={14}
+          />
+        </div>
+
+        {/* Navigation Items */}
+        <nav className="space-y-1">
+          {navItems.map((item) => {
+            const isActive = pathname === item.href;
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={`flex items-center gap-3 py-3 px-3 rounded-[10px] transition-colors cursor-pointer ${
+                  isActive
+                    ? 'bg-[#e58625]/10'
+                    : 'hover:bg-[#00293d]/5'
+                }`}
+              >
+                <div
+                  className={`w-5 h-5 flex items-center justify-center ${
+                    isActive ? 'text-[#e58625]' : 'text-[#00293D]'
+                  }`}
+                  style={{ color: isActive ? '#e58625' : '#00293D' }}
+                >
+                  <Image
+                    src={item.icon}
+                    alt={item.label}
+                    width={20}
+                    height={20}
+                    className={isActive ? 'brightness-0 saturate-100' : ''}
+                    style={isActive ? { filter: 'invert(48%) sepia(94%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(85%)' } : {}}
+                  />
+                </div>
+                <span
+                  className={`font-serif text-[14px] leading-[19px] ${
+                    isActive
+                      ? 'font-medium text-[#e58625]'
+                      : 'font-normal text-[#00293D]'
+                  }`}
+                >
+                  {item.label}
+                </span>
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+    </div>
+  );
+}

src/app/(agent)/agent/settings/component/index.ts

@@ -0,0 +1 @@
+export { SettingsSidebar } from './SettingsSidebar';

src/app/(agent)/agent/settings/notifications/page.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { useState } from 'react';
+import { SettingsSidebar } from '../component/SettingsSidebar';
+
+interface NotificationSetting {
+  id: string;
+  label: string;
+  description: string;
+  enabled: boolean;
+}
+
+export default function NotificationsPage() {
+  const [emailNotifications, setEmailNotifications] = useState<NotificationSetting[]>([
+    {
+      id: 'new_leads',
+      label: 'New Leads',
+      description: 'Get notified when you receive new leads',
+      enabled: true,
+    },
+    {
+      id: 'messages',
+      label: 'Messages',
+      description: 'Get notified when you receive new messages',
+      enabled: true,
+    },
+    {
+      id: 'connection_requests',
+      label: 'Connection Requests',
+      description: 'Get notified about new connection requests',
+      enabled: true,
+    },
+    {
+      id: 'property_updates',
+      label: 'Property Updates',
+      description: 'Get notified about property status changes',
+      enabled: false,
+    },
+    {
+      id: 'marketing',
+      label: 'Marketing & Promotions',
+      description: 'Receive marketing emails and promotions',
+      enabled: false,
+    },
+  ]);
+
+  const [pushNotifications, setPushNotifications] = useState<NotificationSetting[]>([
+    {
+      id: 'push_messages',
+      label: 'Messages',
+      description: 'Push notifications for new messages',
+      enabled: true,
+    },
+    {
+      id: 'push_leads',
+      label: 'New Leads',
+      description: 'Push notifications for new leads',
+      enabled: true,
+    },
+    {
+      id: 'push_reminders',
+      label: 'Reminders',
+      description: 'Push notifications for scheduled reminders',
+      enabled: false,
+    },
+  ]);
+
+  const toggleEmailNotification = (id: string) => {
+    setEmailNotifications((prev) =>
+      prev.map((item) =>
+        item.id === id ? { ...item, enabled: !item.enabled } : item
+      )
+    );
+  };
+
+  const togglePushNotification = (id: string) => {
+    setPushNotifications((prev) =>
+      prev.map((item) =>
+        item.id === id ? { ...item, enabled: !item.enabled } : item
+      )
+    );
+  };
+
+  const handleSave = () => {
+    console.log('Saving notification settings:', {
+      emailNotifications,
+      pushNotifications,
+    });
+  };
+
+  const ToggleSwitch = ({
+    enabled,
+    onToggle,
+  }: {
+    enabled: boolean;
+    onToggle: () => void;
+  }) => (
+    <button
+      onClick={onToggle}
+      className={`relative w-[44px] h-[24px] rounded-full transition-colors cursor-pointer ${
+        enabled ? 'bg-[#e58625]' : 'bg-[#00293D]/20'
+      }`}
+    >
+      <div
+        className={`absolute top-[2px] w-[20px] h-[20px] rounded-full bg-white shadow transition-transform ${
+          enabled ? 'translate-x-[22px]' : 'translate-x-[2px]'
+        }`}
+      />
+    </button>
+  );
+
+  return (
+    <div className="flex flex-col lg:flex-row gap-6">
+      {/* Left Sidebar */}
+      <SettingsSidebar />
+
+      {/* Main Content */}
+      <div className="flex-1">
+        {/* Header Card */}
+        <div className="border border-[#00293d]/10 rounded-[15px] px-6 py-4 mb-4 bg-white">
+          <h1 className="font-fractul font-bold text-[15px] leading-[18px] text-[#00293D]">
+            Notifications
+          </h1>
+        </div>
+
+        {/* Email Notifications */}
+        <div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mb-4">
+          <div className="mb-6">
+            <h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
+              Email Notifications
+            </h2>
+            <p className="font-serif text-[12px] text-[#00293D]/60">
+              Manage your email notification preferences
+            </p>
+          </div>
+
+          <div className="space-y-4">
+            {emailNotifications.map((item) => (
+              <div
+                key={item.id}
+                className="flex items-center justify-between py-3 border-b border-[#00293d]/10 last:border-0"
+              >
+                <div>
+                  <h3 className="font-serif font-medium text-[14px] text-[#00293D]">
+                    {item.label}
+                  </h3>
+                  <p className="font-serif text-[12px] text-[#00293D]/60">
+                    {item.description}
+                  </p>
+                </div>
+                <ToggleSwitch
+                  enabled={item.enabled}
+                  onToggle={() => toggleEmailNotification(item.id)}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Push Notifications */}
+        <div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mb-4">
+          <div className="mb-6">
+            <h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
+              Push Notifications
+            </h2>
+            <p className="font-serif text-[12px] text-[#00293D]/60">
+              Manage your push notification preferences
+            </p>
+          </div>
+
+          <div className="space-y-4">
+            {pushNotifications.map((item) => (
+              <div
+                key={item.id}
+                className="flex items-center justify-between py-3 border-b border-[#00293d]/10 last:border-0"
+              >
+                <div>
+                  <h3 className="font-serif font-medium text-[14px] text-[#00293D]">
+                    {item.label}
+                  </h3>
+                  <p className="font-serif text-[12px] text-[#00293D]/60">
+                    {item.description}
+                  </p>
+                </div>
+                <ToggleSwitch
+                  enabled={item.enabled}
+                  onToggle={() => togglePushNotification(item.id)}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Save Button */}
+        <div className="flex justify-end">
+          <button
+            onClick={handleSave}
+            className="px-8 py-3 bg-[#e58625] text-white rounded-[15px] font-fractul font-medium text-[14px] hover:bg-[#d47920] transition-colors"
+          >
+            Save Changes
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(agent)/agent/settings/page.tsx

@@ -0,0 +1,172 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import { SettingsSidebar } from './component/SettingsSidebar';
+
+export default function ProfileSettingsPage() {
+  const [formData, setFormData] = useState({
+    firstName: 'Brain',
+    lastName: 'Nooland',
+    email: 'brain.nooland@email.com',
+    phone: '+1 (555) 123-4567',
+    title: 'Top Real Estate Agent',
+    location: 'Los Angeles, CA',
+  });
+
+  const handleChange = (field: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleSave = () => {
+    console.log('Saving profile settings:', formData);
+  };
+
+  return (
+    <div className="flex flex-col lg:flex-row gap-6">
+      {/* Left Sidebar */}
+      <SettingsSidebar
+        name={`${formData.firstName} ${formData.lastName}`}
+        title={formData.title}
+      />
+
+      {/* Main Content */}
+      <div className="flex-1">
+        {/* Header Card */}
+        <div className="border border-[#00293d]/10 rounded-[15px] px-6 py-4 mb-4 bg-white">
+          <h1 className="font-fractul font-bold text-[15px] leading-[18px] text-[#00293D]">
+            Profile Settings
+          </h1>
+        </div>
+
+        {/* Profile Settings Form */}
+        <div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6">
+          {/* Profile Photo Section */}
+          <div className="flex items-center gap-6 mb-8 pb-6 border-b border-[#00293d]/10">
+            <div className="relative">
+              <div className="w-[100px] h-[100px] rounded-full overflow-hidden border-2 border-[#e58625]">
+                <Image
+                  src="/assets/icons/user-placeholder-icon.svg"
+                  alt="Profile"
+                  width={100}
+                  height={100}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+              <button className="absolute bottom-0 right-0 w-8 h-8 bg-[#e58625] rounded-full flex items-center justify-center hover:bg-[#d47920] transition-colors">
+                <Image
+                  src="/assets/icons/edit-icon.svg"
+                  alt="Edit"
+                  width={16}
+                  height={16}
+                />
+              </button>
+            </div>
+            <div>
+              <h3 className="font-fractul font-bold text-[16px] text-[#00293D] mb-1">
+                Profile Photo
+              </h3>
+              <p className="font-serif text-[12px] text-[#00293D]/60 mb-3">
+                JPG, GIF or PNG. Max size 2MB
+              </p>
+              <button className="px-4 py-2 border border-[#e58625] text-[#e58625] rounded-[15px] font-serif text-[12px] hover:bg-[#e58625]/10 transition-colors">
+                Upload New Photo
+              </button>
+            </div>
+          </div>
+
+          {/* Form Fields */}
+          <div className="space-y-6">
+            {/* Name Row */}
+            <div className="flex flex-col sm:flex-row gap-4">
+              <div className="flex-1">
+                <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
+                  First Name
+                </label>
+                <input
+                  type="text"
+                  value={formData.firstName}
+                  onChange={(e) => handleChange('firstName', e.target.value)}
+                  className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
+                />
+              </div>
+              <div className="flex-1">
+                <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
+                  Last Name
+                </label>
+                <input
+                  type="text"
+                  value={formData.lastName}
+                  onChange={(e) => handleChange('lastName', e.target.value)}
+                  className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
+                />
+              </div>
+            </div>
+
+            {/* Email */}
+            <div>
+              <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
+                Email Address
+              </label>
+              <input
+                type="email"
+                value={formData.email}
+                onChange={(e) => handleChange('email', e.target.value)}
+                className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
+              />
+            </div>
+
+            {/* Phone */}
+            <div>
+              <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
+                Phone Number
+              </label>
+              <input
+                type="tel"
+                value={formData.phone}
+                onChange={(e) => handleChange('phone', e.target.value)}
+                className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
+              />
+            </div>
+
+            {/* Title */}
+            <div>
+              <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
+                Professional Title
+              </label>
+              <input
+                type="text"
+                value={formData.title}
+                onChange={(e) => handleChange('title', e.target.value)}
+                className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
+              />
+            </div>
+
+            {/* Location */}
+            <div>
+              <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
+                Location
+              </label>
+              <input
+                type="text"
+                value={formData.location}
+                onChange={(e) => handleChange('location', e.target.value)}
+                className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
+              />
+            </div>
+          </div>
+
+          {/* Save Button */}
+          <div className="mt-8 flex justify-end">
+            <button
+              onClick={handleSave}
+              className="px-8 py-3 bg-[#e58625] text-white rounded-[15px] font-fractul font-medium text-[14px] hover:bg-[#d47920] transition-colors"
+            >
+              Save Changes
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(agent)/agent/settings/password/page.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import { useState } from 'react';
+import { SettingsSidebar } from '../component/SettingsSidebar';
+
+export default function PasswordSecurityPage() {
+  const [formData, setFormData] = useState({
+    currentPassword: '',
+    newPassword: '',
+    confirmPassword: '',
+  });
+
+  const [showPasswords, setShowPasswords] = useState({
+    current: false,
+    new: false,
+    confirm: false,
+  });
+
+  const handleChange = (field: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const toggleShowPassword = (field: 'current' | 'new' | 'confirm') => {
+    setShowPasswords((prev) => ({ ...prev, [field]: !prev[field] }));
+  };
+
+  const handleSave = () => {
+    if (formData.newPassword !== formData.confirmPassword) {
+      alert('Passwords do not match');
+      return;
+    }
+    console.log('Updating password');
+  };
+
+  return (
+    <div className="flex flex-col lg:flex-row gap-6">
+      {/* Left Sidebar */}
+      <SettingsSidebar />
+
+      {/* Main Content */}
+      <div className="flex-1">
+        {/* Header Card */}
+        <div className="border border-[#00293d]/10 rounded-[15px] px-6 py-4 mb-4 bg-white">
+          <h1 className="font-fractul font-bold text-[15px] leading-[18px] text-[#00293D]">
+            Password Security
+          </h1>
+        </div>
+
+        {/* Password Form */}
+        <div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6">
+          <div className="mb-6">
+            <h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
+              Change Password
+            </h2>
+            <p className="font-serif text-[12px] text-[#00293D]/60">
+              Ensure your account is using a strong password to stay secure
+            </p>
+          </div>
+
+          {/* Form Fields */}
+          <div className="space-y-6 max-w-md">
+            {/* Current Password */}
+            <div>
+              <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
+                Current Password
+              </label>
+              <div className="relative">
+                <input
+                  type={showPasswords.current ? 'text' : 'password'}
+                  value={formData.currentPassword}
+                  onChange={(e) => handleChange('currentPassword', e.target.value)}
+                  placeholder="Enter current password"
+                  className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]"
+                />
+                <button
+                  type="button"
+                  onClick={() => toggleShowPassword('current')}
+                  className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
+                >
+                  {showPasswords.current ? '🙈' : '👁️'}
+                </button>
+              </div>
+            </div>
+
+            {/* New Password */}
+            <div>
+              <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
+                New Password
+              </label>
+              <div className="relative">
+                <input
+                  type={showPasswords.new ? 'text' : 'password'}
+                  value={formData.newPassword}
+                  onChange={(e) => handleChange('newPassword', e.target.value)}
+                  placeholder="Enter new password"
+                  className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]"
+                />
+                <button
+                  type="button"
+                  onClick={() => toggleShowPassword('new')}
+                  className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
+                >
+                  {showPasswords.new ? '🙈' : '👁️'}
+                </button>
+              </div>
+              <p className="text-[11px] text-[#00293D]/50 font-serif mt-1">
+                Minimum 8 characters with at least one uppercase, lowercase, and number
+              </p>
+            </div>
+
+            {/* Confirm Password */}
+            <div>
+              <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
+                Confirm New Password
+              </label>
+              <div className="relative">
+                <input
+                  type={showPasswords.confirm ? 'text' : 'password'}
+                  value={formData.confirmPassword}
+                  onChange={(e) => handleChange('confirmPassword', e.target.value)}
+                  placeholder="Confirm new password"
+                  className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]"
+                />
+                <button
+                  type="button"
+                  onClick={() => toggleShowPassword('confirm')}
+                  className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
+                >
+                  {showPasswords.confirm ? '🙈' : '👁️'}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Save Button */}
+          <div className="mt-8">
+            <button
+              onClick={handleSave}
+              className="px-8 py-3 bg-[#e58625] text-white rounded-[15px] font-fractul font-medium text-[14px] hover:bg-[#d47920] transition-colors"
+            >
+              Update Password
+            </button>
+          </div>
+        </div>
+
+        {/* Two-Factor Authentication Section */}
+        <div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mt-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
+                Two-Factor Authentication
+              </h2>
+              <p className="font-serif text-[12px] text-[#00293D]/60">
+                Add an extra layer of security to your account
+              </p>
+            </div>
+            <button className="px-6 py-2 border border-[#e58625] text-[#e58625] rounded-[15px] font-serif text-[12px] hover:bg-[#e58625]/10 transition-colors">
+              Enable 2FA
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(agent)/agent/settings/privacy/page.tsx

@@ -0,0 +1,255 @@
+'use client';
+
+import { useState } from 'react';
+import { SettingsSidebar } from '../component/SettingsSidebar';
+
+interface PrivacySetting {
+  id: string;
+  label: string;
+  description: string;
+  value: string;
+  options: { value: string; label: string }[];
+}
+
+export default function PrivacyPage() {
+  const [privacySettings, setPrivacySettings] = useState<PrivacySetting[]>([
+    {
+      id: 'profile_visibility',
+      label: 'Profile Visibility',
+      description: 'Control who can see your profile',
+      value: 'public',
+      options: [
+        { value: 'public', label: 'Public' },
+        { value: 'connections', label: 'Connections Only' },
+        { value: 'private', label: 'Private' },
+      ],
+    },
+    {
+      id: 'contact_info',
+      label: 'Contact Information',
+      description: 'Control who can see your contact details',
+      value: 'connections',
+      options: [
+        { value: 'public', label: 'Public' },
+        { value: 'connections', label: 'Connections Only' },
+        { value: 'private', label: 'Hidden' },
+      ],
+    },
+    {
+      id: 'activity_status',
+      label: 'Activity Status',
+      description: 'Show when you are active on the platform',
+      value: 'public',
+      options: [
+        { value: 'public', label: 'Everyone' },
+        { value: 'connections', label: 'Connections Only' },
+        { value: 'private', label: 'No One' },
+      ],
+    },
+  ]);
+
+  const [dataSettings, setDataSettings] = useState({
+    shareAnalytics: true,
+    personalizedAds: false,
+    thirdPartySharing: false,
+  });
+
+  const handlePrivacyChange = (id: string, value: string) => {
+    setPrivacySettings((prev) =>
+      prev.map((item) => (item.id === id ? { ...item, value } : item))
+    );
+  };
+
+  const handleDataSettingChange = (key: keyof typeof dataSettings) => {
+    setDataSettings((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  const handleSave = () => {
+    console.log('Saving privacy settings:', { privacySettings, dataSettings });
+  };
+
+  const handleDeleteAccount = () => {
+    if (confirm('Are you sure you want to delete your account? This action cannot be undone.')) {
+      console.log('Deleting account');
+    }
+  };
+
+  const ToggleSwitch = ({
+    enabled,
+    onToggle,
+  }: {
+    enabled: boolean;
+    onToggle: () => void;
+  }) => (
+    <button
+      onClick={onToggle}
+      className={`relative w-[44px] h-[24px] rounded-full transition-colors cursor-pointer ${
+        enabled ? 'bg-[#e58625]' : 'bg-[#00293D]/20'
+      }`}
+    >
+      <div
+        className={`absolute top-[2px] w-[20px] h-[20px] rounded-full bg-white shadow transition-transform ${
+          enabled ? 'translate-x-[22px]' : 'translate-x-[2px]'
+        }`}
+      />
+    </button>
+  );
+
+  return (
+    <div className="flex flex-col lg:flex-row gap-6">
+      {/* Left Sidebar */}
+      <SettingsSidebar />
+
+      {/* Main Content */}
+      <div className="flex-1">
+        {/* Header Card */}
+        <div className="border border-[#00293d]/10 rounded-[15px] px-6 py-4 mb-4 bg-white">
+          <h1 className="font-fractul font-bold text-[15px] leading-[18px] text-[#00293D]">
+            Privacy
+          </h1>
+        </div>
+
+        {/* Privacy Settings */}
+        <div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mb-4">
+          <div className="mb-6">
+            <h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
+              Privacy Settings
+            </h2>
+            <p className="font-serif text-[12px] text-[#00293D]/60">
+              Control your privacy and visibility preferences
+            </p>
+          </div>
+
+          <div className="space-y-6">
+            {privacySettings.map((item) => (
+              <div
+                key={item.id}
+                className="pb-4 border-b border-[#00293d]/10 last:border-0"
+              >
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                  <div>
+                    <h3 className="font-serif font-medium text-[14px] text-[#00293D]">
+                      {item.label}
+                    </h3>
+                    <p className="font-serif text-[12px] text-[#00293D]/60">
+                      {item.description}
+                    </p>
+                  </div>
+                  <select
+                    value={item.value}
+                    onChange={(e) => handlePrivacyChange(item.id, e.target.value)}
+                    className="h-[36px] px-4 border border-[#00293D]/20 rounded-[10px] text-[13px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625] bg-white cursor-pointer"
+                  >
+                    {item.options.map((option) => (
+                      <option key={option.value} value={option.value}>
+                        {option.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Data & Personalization */}
+        <div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mb-4">
+          <div className="mb-6">
+            <h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
+              Data & Personalization
+            </h2>
+            <p className="font-serif text-[12px] text-[#00293D]/60">
+              Manage how your data is used
+            </p>
+          </div>
+
+          <div className="space-y-4">
+            <div className="flex items-center justify-between py-3 border-b border-[#00293d]/10">
+              <div>
+                <h3 className="font-serif font-medium text-[14px] text-[#00293D]">
+                  Share Analytics
+                </h3>
+                <p className="font-serif text-[12px] text-[#00293D]/60">
+                  Help improve our service by sharing usage data
+                </p>
+              </div>
+              <ToggleSwitch
+                enabled={dataSettings.shareAnalytics}
+                onToggle={() => handleDataSettingChange('shareAnalytics')}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-3 border-b border-[#00293d]/10">
+              <div>
+                <h3 className="font-serif font-medium text-[14px] text-[#00293D]">
+                  Personalized Ads
+                </h3>
+                <p className="font-serif text-[12px] text-[#00293D]/60">
+                  See ads tailored to your interests
+                </p>
+              </div>
+              <ToggleSwitch
+                enabled={dataSettings.personalizedAds}
+                onToggle={() => handleDataSettingChange('personalizedAds')}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-3">
+              <div>
+                <h3 className="font-serif font-medium text-[14px] text-[#00293D]">
+                  Third-Party Data Sharing
+                </h3>
+                <p className="font-serif text-[12px] text-[#00293D]/60">
+                  Allow sharing data with third-party partners
+                </p>
+              </div>
+              <ToggleSwitch
+                enabled={dataSettings.thirdPartySharing}
+                onToggle={() => handleDataSettingChange('thirdPartySharing')}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Danger Zone */}
+        <div className="border border-red-200 rounded-[15px] bg-red-50/50 p-6 mb-4">
+          <div className="mb-4">
+            <h2 className="font-fractul font-bold text-[16px] text-red-600 mb-2">
+              Danger Zone
+            </h2>
+            <p className="font-serif text-[12px] text-red-600/70">
+              Irreversible and destructive actions
+            </p>
+          </div>
+
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+            <div>
+              <h3 className="font-serif font-medium text-[14px] text-[#00293D]">
+                Delete Account
+              </h3>
+              <p className="font-serif text-[12px] text-[#00293D]/60">
+                Permanently delete your account and all data
+              </p>
+            </div>
+            <button
+              onClick={handleDeleteAccount}
+              className="px-6 py-2 border border-red-500 text-red-500 rounded-[15px] font-serif text-[12px] hover:bg-red-50 transition-colors"
+            >
+              Delete Account
+            </button>
+          </div>
+        </div>
+
+        {/* Save Button */}
+        <div className="flex justify-end">
+          <button
+            onClick={handleSave}
+            className="px-8 py-3 bg-[#e58625] text-white rounded-[15px] font-fractul font-medium text-[14px] hover:bg-[#d47920] transition-colors"
+          >
+            Save Changes
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}