diff --git a/package.json b/package.json
index 466b688..f2fab82 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@clerk/nextjs": "^6.5.1",
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
     "@libsql/client": "^0.14.0",
     "@nivo/bar": "^0.88.0",
     "@nivo/core": "^0.88.0",
@@ -20,6 +22,7 @@
     "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-radio-group": "^1.2.1",
     "@radix-ui/react-scroll-area": "^1.2.1",
@@ -27,6 +30,7 @@
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-toast": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.1.4",
     "ably": "^2.6.0",
     "class-variance-authority": "^0.7.1",
@@ -36,10 +40,13 @@
     "dotenv": "^16.4.5",
     "drizzle-orm": "^0.36.4",
     "embla-carousel-react": "^8.5.1",
+    "emoji-mart": "^5.6.0",
     "framer-motion": "^11.15.0",
     "jotai": "^2.10.3",
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.462.0",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.5.46",
     "next": "14.2.16",
     "next-themes": "^0.4.4",
     "react": "^18",
diff --git a/src/app/(dashboard)/chat/page.tsx b/src/app/(dashboard)/chat/page.tsx
index da11c09..71df3e0 100644
--- a/src/app/(dashboard)/chat/page.tsx
+++ b/src/app/(dashboard)/chat/page.tsx
@@ -1,7 +1,41 @@
 import { ChatScreen } from "@/src/components/dashboard/Chat";
+import { SelectChat } from "@/src/db/schema";
+import { GetChatBySlugWithMessagesAction, GetUserChatsAction } from "@/src/server-actions/Chat/Chat";
 
-export default function ChatPage() {
-    return <ChatScreen />
+interface ChatPageProps {
+    searchParams:{
+        active_chat?: string
+    }
+}
+
+export default async function ChatPage({ searchParams }: ChatPageProps) {
+    let currentChat : SelectChat | undefined = undefined
+    let allChats : SelectChat[] = []
+    let selectedCurrectChatSlug = null
+
+    const chatsRes = await GetUserChatsAction()
+    if(chatsRes?.success && chatsRes?.data){
+        allChats = chatsRes.data
+    }
+
+    if( allChats.length > 0  ){
+        
+        if(searchParams.active_chat){
+            selectedCurrectChatSlug = searchParams.active_chat
+        }else{
+            selectedCurrectChatSlug = allChats[0].chat_slug
+        }
+
+        const currentChatRes = await GetChatBySlugWithMessagesAction(selectedCurrectChatSlug)
+        if(currentChatRes.success){
+            currentChat = currentChatRes.data 
+        }
+    }
+
+
+    return (
+        <ChatScreen allChatsSSR={allChats} currentChatSSR={currentChat} />
+    )
 }
 
 
diff --git a/src/app/(dashboard)/dashboard/page.tsx b/src/app/(dashboard)/dashboard/page.tsx
index 75b417c..51db812 100644
--- a/src/app/(dashboard)/dashboard/page.tsx
+++ b/src/app/(dashboard)/dashboard/page.tsx
@@ -1,4 +1,4 @@
-import { AnalyticsDashboard } from '@/src/components/dashboard/AnalyticsDashboard'
+import AnalyticsDashboard from '@/src/components/dashboard/AnalyticsDashboard'
 import React from 'react'
 
 const page = () => {
diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx
index cb8ac14..f9fc7b4 100644
--- a/src/app/(dashboard)/layout.tsx
+++ b/src/app/(dashboard)/layout.tsx
@@ -12,7 +12,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
       <AppSidebar />
       <SidebarInset>
         <Header />
-        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0 ">
           {children}
         </div>
       </SidebarInset>
diff --git a/src/app/(dashboard)/posts/page.tsx b/src/app/(dashboard)/posts/page.tsx
index d566cc2..b1ef0e5 100644
--- a/src/app/(dashboard)/posts/page.tsx
+++ b/src/app/(dashboard)/posts/page.tsx
@@ -2,12 +2,8 @@
 
 import { useState } from "react"
 import PostFeed from "@/src/components/dashboard/post-feed"
-import {
-  Post,
-  PostFile,
-  PostPoll
-} from "@/src/components/dashboard/Posts/types/posts-types"
 import CreatePostForm from "@/src/components/dashboard/create-post-form"
+import { Post, PostFile, PostPoll } from "@/src/components/dashboard/posts/types/posts-types"
 
 const samplePosts: (Post | PostFile | PostPoll)[] = [
   {
diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx
index a55b18a..064e173 100644
--- a/src/app/(home)/layout.tsx
+++ b/src/app/(home)/layout.tsx
@@ -10,9 +10,9 @@ const PublicLayout = ({ children }: { children: ReactNode }) => {
   return (
     <>
       <Header />
-      <div className="content">
-        {children}
-      </div>
+        <div className="content">
+          {children}
+        </div>
       <Footer />
 
     </>
diff --git a/src/app/api/webhook/user-created/route.ts b/src/app/api/webhook/user-created/route.ts
index 5902108..bc2ed93 100644
--- a/src/app/api/webhook/user-created/route.ts
+++ b/src/app/api/webhook/user-created/route.ts
@@ -2,7 +2,7 @@ import { Webhook } from 'svix'
 import { headers } from 'next/headers'
 import { WebhookEvent } from '@clerk/nextjs/server'
 import { InsertUser } from '@/src/db/schema'
-import { CreateUser, SelectUserByEmail, SelectUserById } from '@/src/db/data-access/user/query'
+import { CreateUser, SelectUserByEmail, SelectUserByExternalId } from '@/src/db/data-access/user/query'
 
 export async function POST(req: Request) {
 
@@ -60,7 +60,7 @@ export async function POST(req: Request) {
   if (evt.type === 'user.created') {
     const userObj = evt.data
 
-		const userById = await SelectUserById(userObj.id)
+		const userById = await SelectUserByExternalId(userObj.id)
 		const userByEmail = await SelectUserByEmail(userObj.email_addresses[0].email_address)
 
 		if (userById || userByEmail) {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 886b09b..37b38f9 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,8 +4,9 @@ import "./globals.css";
 import {
   ClerkProvider
 } from '@clerk/nextjs'
-import { ThemeProvider } from "../components/ThemeProvider/ThemeProvider";
 import ClerkAuthListener from "../services/auth/ClerkAuthListner";
+import ThemeProvider from "../components/ThemeProvider/ThemeProvider";
+import { Toaster } from "../components/ui/toaster";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -41,6 +42,7 @@ export default function RootLayout({
             enableSystem
             disableTransitionOnChange
           >
+            <Toaster/>
             {children}
           </ThemeProvider>
         </body>
diff --git a/src/components/HomeLayoutComponents/HeaderComponent.tsx b/src/components/HomeLayoutComponents/HeaderComponent.tsx
index a6c59c6..222d393 100644
--- a/src/components/HomeLayoutComponents/HeaderComponent.tsx
+++ b/src/components/HomeLayoutComponents/HeaderComponent.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Suspense } from 'react'
 import './header.css'
 import { LinkAsButton } from '@/src/components/LinkAsButton/LinkAsButton'
 import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
@@ -8,6 +8,8 @@ import ModeToggle  from '../ThemeProvider/ThemeToggle'
 function Header() {
 	return (
 		<div className="header">
+			<Suspense>
+
 			<Navbar />
 			<div className="button-wrapper">
 				<SignedIn>
@@ -19,6 +21,7 @@ function Header() {
 				</SignedOut>
 				<ModeToggle />
 			</div>
+			</Suspense>
 		</div>
 	)
 }
diff --git a/src/components/ThemeProvider/ThemeProvider.tsx b/src/components/ThemeProvider/ThemeProvider.tsx
index 6a1ffe4..024c987 100644
--- a/src/components/ThemeProvider/ThemeProvider.tsx
+++ b/src/components/ThemeProvider/ThemeProvider.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 import { ThemeProvider as NextThemesProvider } from "next-themes"
 
-export function ThemeProvider({
+export default function ThemeProvider({
   children,
   ...props
 }: React.ComponentProps<typeof NextThemesProvider>) {
diff --git a/src/components/dashboard/AnalyticsDashboard/index.tsx b/src/components/dashboard/AnalyticsDashboard/index.tsx
index 0a31fa5..a2be128 100644
--- a/src/components/dashboard/AnalyticsDashboard/index.tsx
+++ b/src/components/dashboard/AnalyticsDashboard/index.tsx
@@ -55,7 +55,7 @@ const topProjects = [
   { name: "Cybersecurity Toolkit", category: "Cybersecurity", contributors: 7, progress: 30 }
 ]
 
-export function AnalyticsDashboard() {
+export default function AnalyticsDashboard() {
   const [timeRange, setTimeRange] = useState("7d")
 
   return (
diff --git a/src/components/dashboard/Chat/ChatsList.tsx b/src/components/dashboard/Chat/ChatsList.tsx
new file mode 100644
index 0000000..97b2657
--- /dev/null
+++ b/src/components/dashboard/Chat/ChatsList.tsx
@@ -0,0 +1,83 @@
+import { ScrollArea } from '@radix-ui/react-scroll-area'
+import React, { useEffect, useState } from 'react'
+import { Avatar, AvatarFallback, AvatarImage } from '../../ui/avatar'
+import { Badge } from '../../ui/badge'
+import { useAtom, useAtomValue, useSetAtom } from 'jotai'
+import { chatStore } from '@/src/store/chat/chatStore'
+import { userStore } from '@/src/store/user/userStore'
+import { SelectChat, SelectUser } from '@/src/db/schema'
+import Loader from '../../common/Loader/Loader'
+
+interface ChatsListProps {
+	setIsMobileMenuOpen: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+
+
+const ChatsList = ({ setIsMobileMenuOpen }: ChatsListProps) => {
+
+	const [currentChat, setCurrentChat] = useAtom(chatStore.currentChat)
+	const setSwtichedChat = useSetAtom(chatStore.switchedChat)
+  const [myChats, setMyChats] = useAtom(chatStore.myChats)
+  const authUser = useAtomValue(userStore.AuthUser)
+
+	const ChatItem = React.useMemo( () => ({chat}: {chat: SelectChat}) => {
+		const filteredContact = chat?.users?.find((user) => user.user_id !== authUser?.unique_id)
+		if(!filteredContact) return null
+		const chatContact = filteredContact?.user || null
+		if(!chatContact) return null
+
+		return (
+			<div
+				key={chat.id}
+				className={`flex items-center space-x-4 p-3 rounded-lg cursor-pointer transition-colors ${
+					currentChat?.id === chat.id ? "bg-secondary" : "hover:bg-secondary/50"
+				}`}
+				onClick={() => {
+					setSwtichedChat(chat || null)
+					setIsMobileMenuOpen(false)
+				}}
+			>
+				<Avatar className="h-10 w-10 relative bg-white" >
+					{
+						!chat?.is_group && chatContact ? (
+							<>
+								{chatContact?.profile_url ? (<AvatarImage src={chatContact.profile_url} />): null }
+								<AvatarFallback>{chatContact.first_name.charAt(0)}</AvatarFallback>
+							</>
+						): null
+					}
+					{/* {chat.online && (
+						<span className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500 border-2 border-white"></span>
+					)} */}
+				</Avatar>
+				<div className="flex-1">
+					<p className="font-medium">{chat.is_group ? chat.name :`${chatContact?.first_name} ${chatContact?.last_name}`}</p>
+					<p className="text-sm text-muted-foreground truncate">{chat?.last_message}</p>
+				</div>
+				{(chat?.unread_count || 0)  > 0 && (
+					<Badge variant="secondary" className="rounded-full px-2 py-1">
+						{chat?.unread_count}
+					</Badge>
+				)}
+			</div>
+		)
+	}, [authUser, currentChat, setCurrentChat, setIsMobileMenuOpen])
+
+
+  return (
+    <ScrollArea className="h-[calc(100vh-20rem)]">
+			{
+				authUser ? (
+					<>
+						{myChats.map((chat) => (
+							<ChatItem key={chat.id} chat={chat} />
+						))}
+					</>
+				): <div className='flex items-center justify-center'><Loader /></div>
+			}
+    </ScrollArea>
+  )
+}
+
+export default ChatsList
\ No newline at end of file
diff --git a/src/components/dashboard/Chat/TestChat/TestChat.tsx b/src/components/dashboard/Chat/TestChat/TestChat.tsx
index de5b8d5..8aa3c23 100644
--- a/src/components/dashboard/Chat/TestChat/TestChat.tsx
+++ b/src/components/dashboard/Chat/TestChat/TestChat.tsx
@@ -2,15 +2,16 @@
 import React, { useState } from 'react';
 import * as Ably from 'ably';
 import { AblyProvider, ChannelProvider, useChannel, useConnectionStateListener } from 'ably/react';
-import AblyChannelProviderWrapper, { AblyClient } from '@/src/services/realtime/AblyClient';
+// import AblyChannelProviderWrapper, { AblyClient } from '@/src/services/realtime/AblyClient';
 
 // Connect to Ably using the AblyProvider component and your API key
 
 export default function TestChat() {
   return (
-    <AblyChannelProviderWrapper channelName="get-started">
-      <AblyPubSub />
-    </AblyChannelProviderWrapper>
+    // <AblyChannelProviderWrapper channelName="get-started">
+    //   <AblyPubSub />
+    // </AblyChannelProviderWrapper>
+    <></>
   );
 }
 
diff --git a/src/components/dashboard/Chat/constants.ts b/src/components/dashboard/Chat/constants.ts
new file mode 100644
index 0000000..3502048
--- /dev/null
+++ b/src/components/dashboard/Chat/constants.ts
@@ -0,0 +1,3 @@
+export const ChatChannelSalt = "Chat-Check";
+
+export const ChatChannelPrefix = "Chat-";
\ No newline at end of file
diff --git a/src/components/dashboard/Chat/helper/index.ts b/src/components/dashboard/Chat/helper/index.ts
new file mode 100644
index 0000000..e3c1882
--- /dev/null
+++ b/src/components/dashboard/Chat/helper/index.ts
@@ -0,0 +1,8 @@
+import { ChatChannelPrefix, ChatChannelSalt } from "../constants"
+
+const  ChatChannelHash = (channelId:string)=>{
+    const channelHash = crypto.subtle.digest('SHA-256', new TextEncoder().encode(ChatChannelSalt + channelId))
+    return `${ChatChannelPrefix}${channelHash}`
+}
+
+export default ChatChannelHash
\ No newline at end of file
diff --git a/src/components/dashboard/Chat/index.tsx b/src/components/dashboard/Chat/index.tsx
index f8bf4c2..50f40f5 100644
--- a/src/components/dashboard/Chat/index.tsx
+++ b/src/components/dashboard/Chat/index.tsx
@@ -1,111 +1,196 @@
 "use client"
 
-import { useState, useRef, useEffect } from "react"
+import { useState, useRef, useEffect, useCallback } from "react"
 import { Avatar, AvatarFallback, AvatarImage } from "@/src/components/ui/avatar"
 import { Button } from "@/src/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/src/components/ui/card"
 import { Input } from "@/src/components/ui/input"
 import { ScrollArea } from "@/src/components/ui/scroll-area"
 import { Sheet, SheetContent, SheetTrigger } from "@/src/components/ui/sheet"
-import { Menu, Search, Send, Phone, Video, MoreVertical } from 'lucide-react'
-import { Badge } from "@/src/components/ui/badge"
-
-interface Message {
-  id: string
-  sender: string
-  content: string
-  timestamp: string
+import { Menu, Search, Send, SmileIcon } from 'lucide-react'
+import {  useAtom, useAtomValue } from "jotai"
+import { chatStore } from "@/src/store/chat/chatStore"
+import { InsertMessage, SelectChat, SelectMessage, SelectUser, SelectUserChat } from "@/src/db/schema"
+import { userStore } from "@/src/store/user/userStore"
+import { AblyClient } from "@/src/services/realtime/AblyClient"
+import ChatsList from "./ChatsList"
+import { AddMessageToChatAction, GetChatWithMessagesAction } from "@/src/server-actions/Chat/Chat"
+import moment from 'moment-timezone'
+import Link from "next/link"
+import Loader from "../../common/Loader/Loader"
+import { useServerAction } from "@/src/hooks/useServerAction"
+import data from '@emoji-mart/data'
+import Picker from '@emoji-mart/react'
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover"
+
+
+interface ChatScreenProps {
+  currentChatSSR: SelectChat | undefined
+  allChatsSSR: SelectChat[]
 }
 
-interface Chat {
-  id: string
-  name: string
-  avatar: string
-  lastMessage: string
-  unreadCount: number
-  online: boolean
+// Function to join a channel (for group or one-to-one chat)
+/**
+ * Joins a specified channel and sets up message subscription and sending functionality.
+ *
+ * @param {string} channelName - The name of the channel to join.
+ * @param {(message: SelectMessage) => void} onMessageReceived - Callback function to handle received messages.
+ * @returns {{ sendMessage: (content: any) => void }} An object containing a function to send messages to the channel.
+ */
+function joinChannel(channelName : string, onMessageReceived: (message: SelectMessage) => void) {
+  const channel = AblyClient.channels.get(channelName);
+
+  // Subscribe to messages
+  channel.subscribe((message) => {
+    onMessageReceived(message.data);
+  });
+
+  // Send a message
+  function sendMessage(content:any) {
+    channel.publish('message', content);
+  }
+
+  function unsubscribe(){
+    channel.unsubscribe();
+    channel.detach()
+  }
+
+  return { sendMessage , unsubscribe };
 }
 
-const sampleMessages: Message[] = [
-  { id: "1", sender: "Alice", content: "Hey, how's it going?", timestamp: "2023-04-15T10:30:00Z" },
-  { id: "2", sender: "You", content: "Not bad, just working on a new project. You?", timestamp: "2023-04-15T10:32:00Z" },
-  { id: "3", sender: "Alice", content: "That sounds interesting! I'm preparing for a presentation.", timestamp: "2023-04-15T10:35:00Z" },
-  { id: "4", sender: "You", content: "Good luck with your presentation! Let me know if you need any help.", timestamp: "2023-04-15T10:37:00Z" },
-  { id: "5", sender: "Alice", content: "Thanks! I appreciate that. How's your project coming along?", timestamp: "2023-04-15T10:40:00Z" },
-]
-
-const sampleChats: Chat[] = [
-  { id: "1", name: "Alice Johnson", avatar: "/avatars/01.png", lastMessage: "That sounds interesting!", unreadCount: 0, online: true },
-  { id: "2", name: "Bob Smith", avatar: "/avatars/02.png", lastMessage: "Can you help me with...", unreadCount: 2, online: false },
-  { id: "3", name: "Web Dev Group", avatar: "/avatars/03.png", lastMessage: "Charlie: Check out this new framework", unreadCount: 5, online: true },
-]
-
-export function ChatScreen() {
-  const [messages, setMessages] = useState<Message[]>(sampleMessages)
+/**
+ * ChatScreen component renders the chat interface including the list of chats and the main chat area.
+ * It handles the display of messages, sending new messages, and switching between different chats.
+ *
+ * @param {ChatScreenProps} props - The properties for the ChatScreen component.
+ * @param {Chat} props.currentChatSSR - The current chat data fetched from the server-side rendering.
+ * @param {Chat[]} props.allChatsSSR - The list of all chats fetched from the server-side rendering.
+ *
+ * @returns {JSX.Element} The rendered ChatScreen component.
+ *
+ * @component
+ *
+ * @example
+ * // Example usage of ChatScreen component
+ * <ChatScreen currentChatSSR={currentChatData} allChatsSSR={allChatsData} />
+ *
+ * @remarks
+ * This component uses several hooks and atoms for state management and side effects:
+ * - `useState` for managing local state such as messages, newMessage, isMobileMenuOpen, chat, and chatContact.
+ * - `useRef` for referencing the end of the messages list to scroll into view.
+ * - `useAtom` and `useAtomValue` from Jotai for managing global state related to the current chat, switched chat, and authenticated user.
+ * - `useEffect` for handling side effects such as setting initial state, joining chat channels, and handling chat switches.
+ * - `useCallback` for memoizing the scrollToBottom function.
+ *
+ * The component also includes several nested components and elements for rendering the chat interface:
+ * - `Card`, `CardHeader`, `CardContent`, `CardFooter` for structuring the chat interface.
+ * - `Sheet`, `SheetTrigger`, `SheetContent` for handling the mobile menu.
+ * - `Link` for navigating to the chat contact's profile.
+ * - `Avatar`, `AvatarImage`, `AvatarFallback` for displaying the chat contact's avatar.
+ * - `ScrollArea` for displaying the list of messages with a scrollable area.
+ * - `Loader` for displaying a loading indicator while fetching chat messages.
+ * - `Input` and `Button` for handling the input and sending of new messages.
+ */
+export function ChatScreen({ currentChatSSR, allChatsSSR }: ChatScreenProps) {
+
+  const [messages, setMessages] = useState<SelectMessage[]>([])
   const [newMessage, setNewMessage] = useState("")
-  const [chats, setChats] = useState<Chat[]>(sampleChats)
-  const [activeChat, setActiveChat] = useState<Chat>(chats[0])
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
   const messagesEndRef = useRef<HTMLDivElement>(null)
+  const [currentChat, setCurrentChat] = useAtom(chatStore.currentChat)
+  const [switchedChat, setSwitchedChat] = useAtom(chatStore.switchedChat)
+  const [myChats, setMyChats] = useAtom(chatStore.myChats)
+  const authUser = useAtomValue(userStore.AuthUser)
+  const [chatRealTime, setChatRealtime] = useState<any>(null);
+  const [chatContact , setChatContact] = useState<SelectUser | null>(null);
+  const [fetchingChatMessages , switchedChatState , switchedChatError, fetchChatWithMessages] = useServerAction(GetChatWithMessagesAction)
+
+  useEffect(()=>{
+    setCurrentChat(currentChatSSR || null)
+    setMyChats(allChatsSSR || [])
+    setMessages(currentChatSSR?.messages || [])
+    scrollToBottom()
+  },[])
+
+
+  const scrollToBottom = useCallback(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+
+  useEffect(() => {
+    if (!currentChat || !authUser) return
+    // Join a channel (e.g., "general" or "user1-user2" for one-to-one chat)
+    // const channelId = ChatChannelHash(currentChat.channel_id)
+    const { sendMessage, unsubscribe } = joinChannel(currentChat.channel_id, (message) => {
+      setMessages((prev) => [...prev, message])
+    });
+
+    setChatRealtime({ sendMessage, unsubscribe });
+
+    if(!currentChat.is_group){
+      const chatContact = currentChat.users?.find(user => user.user_id !== authUser?.unique_id)?.user
+      setChatContact(chatContact || null) 
+    }
+
+    // return () => {
+    //   unsubscribe();
+    // }
+
+  }, [currentChat?.channel_id, authUser]);
 
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
+  useEffect(()=>{
+    if(!switchedChat) return
+    chatRealTime?.unsubscribe()
+    setChatRealtime(null)
+    handleChatSwitch(switchedChat.id)
+    setSwitchedChat(null)
+    
+  },[switchedChat])
+
+  /**
+   * Handles switching to a different chat by fetching the chat data and its messages.
+   * 
+   * @param {number} chatId - The ID of the chat to switch to.
+   * @returns {Promise<void>} A promise that resolves when the chat has been switched.
+   */
+  const handleChatSwitch = async(chatId: number) => {
+    const newSwitchedChat = await fetchChatWithMessages(chatId)
+    if(newSwitchedChat && newSwitchedChat.data){
+      setCurrentChat(newSwitchedChat.data)
+      setMessages(newSwitchedChat.data.messages)
+    }
   }
 
+
   useEffect(() => {
     scrollToBottom()
-  }, [messages])
+  }, [messages, authUser])
 
-  const handleSendMessage = () => {
+  /**
+   * Handles the sending of a new message in the chat.
+   * 
+   * This function checks if the new message is not empty, creates a new message object,
+   * clears the input field, and then calls the action to add the message to the chat.
+   * 
+   * @async
+   * @function handleSendMessage
+   * @returns {Promise<void>} A promise that resolves when the message has been added to the chat.
+   */
+  const handleSendMessage = async() => {
     if (newMessage.trim() === "") return
-    const newMsg: Message = {
-      id: (messages.length + 1).toString(),
-      sender: "You",
-      content: newMessage,
-      timestamp: new Date().toISOString(),
+    const newMsg: InsertMessage = {
+      sender_id: authUser?.unique_id || '',
+      chat_id: currentChat?.id || 0,
+      message: newMessage,
+      type: "text"
     }
-    setMessages([...messages, newMsg])
     setNewMessage("")
-    // Here you would typically send the message to Ably
-    // ably.channel('chat').publish('message', newMsg);
+    await AddMessageToChatAction(newMsg)
   }
 
-  const ContactsList = () => (
-    <ScrollArea className="h-[calc(100vh-20rem)]">
-      {chats.map((chat) => (
-        <div
-          key={chat.id}
-          className={`flex items-center space-x-4 p-3 rounded-lg cursor-pointer transition-colors ${
-            activeChat.id === chat.id ? "bg-secondary" : "hover:bg-secondary/50"
-          }`}
-          onClick={() => {
-            setActiveChat(chat)
-            setIsMobileMenuOpen(false)
-          }}
-        >
-          <Avatar className="h-10 w-10 relative">
-            <AvatarImage src={chat.avatar} alt={chat.name} />
-            <AvatarFallback>{chat.name[0]}</AvatarFallback>
-            {chat.online && (
-              <span className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500 border-2 border-white"></span>
-            )}
-          </Avatar>
-          <div className="flex-1">
-            <p className="font-medium">{chat.name}</p>
-            <p className="text-sm text-muted-foreground truncate">{chat.lastMessage}</p>
-          </div>
-          {chat.unreadCount > 0 && (
-            <Badge variant="secondary" className="rounded-full px-2 py-1">
-              {chat.unreadCount}
-            </Badge>
-          )}
-        </div>
-      ))}
-    </ScrollArea>
-  )
-
   return (
-    <div className="flex h-full">
+    <div className="flex h-full gap-4">
       {/* Contacts list - visible on desktop, hidden on mobile */}
       <Card className="w-80 flex-shrink-0 border-r hidden md:flex md:flex-col">
         <CardHeader>
@@ -116,105 +201,155 @@ export function ChatScreen() {
           </div>
         </CardHeader>
         <CardContent className="flex-1 overflow-hidden p-0">
-          <ContactsList />
+          <ChatsList setIsMobileMenuOpen={setIsMobileMenuOpen} />
         </CardContent>
       </Card>
 
       {/* Main chat area */}
-      <Card className="flex-1 flex flex-col">
-        <CardHeader className="flex flex-row items-center justify-between py-4">
-          <div className="flex items-center">
-            <Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
-              <SheetTrigger asChild>
-                <Button variant="ghost" size="icon" className="md:hidden mr-2">
-                  <Menu />
-                  <span className="sr-only">Toggle contacts</span>
-                </Button>
-              </SheetTrigger>
-              <SheetContent side="left" className="w-[80%] sm:w-[385px] p-0">
-                <CardHeader>
-                  <CardTitle>Chats</CardTitle>
-                  <div className="relative">
-                    <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-                    <Input placeholder="Search chats..." className="pl-8" />
-                  </div>
-                </CardHeader>
-                <ContactsList />
-              </SheetContent>
-            </Sheet>
-            <Avatar className="h-9 w-9">
-              <AvatarImage src={activeChat.avatar} alt={activeChat.name} />
-              <AvatarFallback>{activeChat.name[0]}</AvatarFallback>
-            </Avatar>
-            <div className="ml-4 space-y-1">
-              <p className="text-sm font-medium leading-none">{activeChat.name}</p>
-              <p className="text-sm text-muted-foreground">
-                {activeChat.online ? 'Online' : 'Offline'}
-              </p>
+      
+        <Card className="flex-1 flex flex-col">
+          <CardHeader className="flex flex-row items-center justify-between py-4">
+            <div className="flex items-center">
+              <Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
+                <SheetTrigger asChild>
+                  <Button variant="ghost" size="icon" className="md:hidden mr-2">
+                    <Menu />
+                    <span className="sr-only">Toggle contacts</span>
+                  </Button>
+                </SheetTrigger>
+                <SheetContent side="left" className="w-[80%] sm:w-[385px] p-0">
+                  <CardHeader>
+                    <CardTitle>Chats</CardTitle>
+                    <div className="relative">
+                      <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                      <Input placeholder="Search chats..." className="pl-8" />
+                    </div>
+                  </CardHeader>
+                  <ChatsList setIsMobileMenuOpen={setIsMobileMenuOpen} />
+                </SheetContent>
+              </Sheet>
+              {
+                currentChat ? (
+                  <Link href={currentChat.is_group ? '#' : `/profile/${chatContact?.unique_id}`}>
+                    <div className="flex ">
+                      <Avatar className="h-9 w-9">
+                        <AvatarImage src={currentChat && !currentChat.is_group ? chatContact?.profile_url || undefined : undefined} alt={currentChat.name || ''} />
+                        <AvatarFallback>{currentChat && !currentChat.is_group ? chatContact?.first_name[0] : currentChat.name}</AvatarFallback>
+                      </Avatar>
+                      <div className="ml-4 space-y-1">
+                        {
+                          !currentChat?.is_group && chatContact ? (
+                            <>
+                              <p className="text-sm font-medium leading-none">{`${chatContact?.first_name} ${chatContact?.last_name}`}</p>
+                              <p className="text-sm text-muted-foreground">
+                                {currentChat.is_group ? "Group Chat" : chatContact?.email}
+                              </p>
+                            </>
+
+                          ): null
+                        }
+
+                        {
+                          currentChat?.is_group ? (
+                            <p className="text-sm font-medium leading-none">{currentChat.name}</p>
+                          ): null
+                        }
+                      
+                      </div>
+                    </div>
+                  </Link>
+                ): null
+              }
             </div>
-          </div>
-          <div className="flex items-center space-x-2">
-            <Button variant="ghost" size="icon">
-              <Phone className="h-4 w-4" />
-              <span className="sr-only">Start voice call</span>
-            </Button>
-            <Button variant="ghost" size="icon">
-              <Video className="h-4 w-4" />
-              <span className="sr-only">Start video call</span>
-            </Button>
-            <Button variant="ghost" size="icon">
-              <MoreVertical className="h-4 w-4" />
-              <span className="sr-only">More options</span>
-            </Button>
-          </div>
-        </CardHeader>
-        <CardContent className="flex-1 overflow-hidden p-4">
-          <ScrollArea className="h-[calc(100vh-16rem)] pr-4">
-            {messages.map((message) => (
-              <div
-                key={message.id}
-                className={`mb-4 flex ${
-                  message.sender === "You" ? "justify-end" : "justify-start"
-                }`}
-              >
-                <div
-                  className={`rounded-lg p-3 max-w-[70%] ${
-                    message.sender === "You"
-                      ? "bg-primary text-primary-foreground"
-                      : "bg-muted"
-                  }`}
-                >
-                  <p className="text-sm">{message.content}</p>
-                  <p className="text-xs mt-1 opacity-70">
-                    {new Date(message.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-                  </p>
-                </div>
-              </div>
-            ))}
-            <div ref={messagesEndRef} />
-          </ScrollArea>
-        </CardContent>
-        <CardFooter className="p-4">
-          <form
-            onSubmit={(e) => {
-              e.preventDefault()
-              handleSendMessage()
-            }}
-            className="flex w-full space-x-2"
-          >
-            <Input
-              placeholder="Type a message..."
-              value={newMessage}
-              onChange={(e) => setNewMessage(e.target.value)}
-              className="flex-1"
-            />
-            <Button type="submit" size="icon">
-              <Send className="h-4 w-4" />
-              <span className="sr-only">Send message</span>
-            </Button>
-          </form>
-        </CardFooter>
-      </Card>
+            
+            {/* calling options for future */}
+
+            {/* <div className="flex items-center space-x-2">
+              <Button variant="ghost" size="icon">
+                <Phone className="h-4 w-4" />
+                <span className="sr-only">Start voice call</span>
+              </Button>
+              <Button variant="ghost" size="icon">
+                <Video className="h-4 w-4" />
+                <span className="sr-only">Start video call</span>
+              </Button>
+              <Button variant="ghost" size="icon">
+                <MoreVertical className="h-4 w-4" />
+                <span className="sr-only">More options</span>
+              </Button>
+            </div> */}
+
+          </CardHeader>
+          {
+            currentChat ? ( 
+              <>
+                <CardContent className="flex-1 overflow-hidden p-4">
+                  {
+                    authUser && currentChat && !fetchingChatMessages ? (
+                      <ScrollArea className="h-[calc(100svh-17rem)] pr-4">
+                        {messages.map((message) => (
+                          <div
+                            key={message.id}
+                            className={`mb-4 flex ${
+                              message.sender_id === authUser?.unique_id ? "justify-end" : "justify-start"
+                            }`}
+                          >
+                            <div
+                              className={`rounded-lg p-3 max-w-[70%] ${
+                                message.sender_id === authUser?.unique_id
+                                  ? "bg-primary text-primary-foreground"
+                                  : "bg-muted"
+                              }`}
+                            >
+                              <p className="text-sm">{message.message}</p>
+                              <p className="text-xs mt-1 opacity-70">
+                                {moment.utc(message.created_at).local().format('hh:mm A')}
+                              </p>
+                            </div>
+                          </div>
+                        ))}
+                        <div ref={messagesEndRef} />
+                      </ScrollArea>
+                    ): <div className="flex h-full items-center justify-center"><Loader/></div>
+                  }
+                </CardContent>
+                <CardFooter className="p-4">
+                  <form
+                    onSubmit={(e) => {
+                      e.preventDefault()
+                      handleSendMessage()
+                    }}
+                    onChange={(e)=>{
+                      e.preventDefault()
+                    }}
+                    className="flex w-full space-x-2"
+                  >
+                    <Input
+                      placeholder="Type a message..."
+                      value={newMessage}
+                      onChange={(e) => setNewMessage(e.target.value)}
+                      className="flex-1"
+                      // type="text"
+                    />
+                    <Popover>
+                      <PopoverTrigger>
+                        <SmileIcon/>
+                      </PopoverTrigger>
+                      <PopoverContent side="top" align="end" className="p-0">
+                        <Picker data={data} onEmojiSelect={(emoji:any) => setNewMessage(`${newMessage}${emoji.native}`)} />
+                      </PopoverContent>
+                    </Popover>
+                    <Button type="submit" size="icon">
+                      <Send className="h-4 w-4" />
+                      <span className="sr-only">Send message</span>
+                    </Button>
+                  </form>
+                </CardFooter>
+              </>
+            ): null
+          }
+        </Card>
+      
     </div>
   )
 }
diff --git a/src/components/dashboard/Spaces/CommunityStatsCard.tsx b/src/components/dashboard/Spaces/CommunityStatsCard.tsx
index dbdcee0..4c14089 100644
--- a/src/components/dashboard/Spaces/CommunityStatsCard.tsx
+++ b/src/components/dashboard/Spaces/CommunityStatsCard.tsx
@@ -14,7 +14,7 @@ const CommunityStatsCard: React.FC<CommunityStatsProps> = (props) => {
       <CardContent>
         <div className="space-y-2">
           {props.stats.map((stat: Stat) => (
-            <div className="flex justify-between items-center">
+            <div key={stat.name} className="flex justify-between items-center">
               <span className="flex items-center">
                 {stat.icon}
                 {stat.name}
diff --git a/src/components/dashboard/TestPage/LearningHubScreen.tsx b/src/components/dashboard/TestPage/LearningHubScreen.tsx
index e9aa96b..6f52972 100644
--- a/src/components/dashboard/TestPage/LearningHubScreen.tsx
+++ b/src/components/dashboard/TestPage/LearningHubScreen.tsx
@@ -80,7 +80,7 @@ const sampleWebinars: Webinar[] = [
   { id: "3", title: "Ethical Considerations in AI Development", date: "2023-05-25", time: "16:00", speaker: "Dr. Michael Johnson" },
 ]
 
-export function LearningHubScreen() {
+export default function LearningHubScreen() {
   const [searchQuery, setSearchQuery] = useState("")
 
   return (
diff --git a/src/components/dashboard/TestPage/MarketplaceScreen.tsx b/src/components/dashboard/TestPage/MarketplaceScreen.tsx
index ee46bf8..c29d2d8 100644
--- a/src/components/dashboard/TestPage/MarketplaceScreen.tsx
+++ b/src/components/dashboard/TestPage/MarketplaceScreen.tsx
@@ -112,7 +112,7 @@ const sampleTools: Tool[] = [
   },
 ]
 
-export function MarketplaceScreen() {
+export default function MarketplaceScreen() {
   const [searchQuery, setSearchQuery] = useState("")
 
   return (
diff --git a/src/components/dashboard/TestPage/TeamCollaborationScreen.tsx b/src/components/dashboard/TestPage/TeamCollaborationScreen.tsx
index b774918..1059402 100644
--- a/src/components/dashboard/TestPage/TeamCollaborationScreen.tsx
+++ b/src/components/dashboard/TestPage/TeamCollaborationScreen.tsx
@@ -119,7 +119,7 @@ const sampleMeetings: Meeting[] = [
   },
 ]
 
-export function TeamCollaborationScreen() {
+export default function TeamCollaborationScreen() {
   const [searchQuery, setSearchQuery] = useState("")
 
   return (
diff --git a/src/components/dashboard/create-post-form.tsx b/src/components/dashboard/create-post-form.tsx
index ba6f605..91b4f70 100644
--- a/src/components/dashboard/create-post-form.tsx
+++ b/src/components/dashboard/create-post-form.tsx
@@ -15,14 +15,6 @@ import {
 } from "@/src/components/ui/card"
 import { Input } from "@/src/components/ui/input"
 import { Label } from "@/src/components/ui/label"
-import PostInput from "@/src/components/dashboard/Posts/create-post-input"
-import {
-  Post,
-  NewPost,
-  PostType,
-  PostPoll,
-  PostFile
-} from "@/src/components/dashboard/Posts/types/posts-types"
 import { useState } from "react"
 import {
   Select,
@@ -32,6 +24,8 @@ import {
   SelectValue
 } from "@/src/components/ui/select"
 import { Textarea } from "../ui/textarea"
+import { NewPost, Post, PostFile, PostPoll, PostType } from "./posts/types/posts-types"
+import CreatePostInput from "./posts/create-post-input"
 
 type Props = {
   setPosts: (posts: (Post | PostFile | PostPoll)[]) => void
@@ -110,28 +104,28 @@ const CreatePostForm: React.FC<Props> = ({
               <TabsTrigger value="file">File</TabsTrigger>
             </TabsList>
             <TabsContent value="text">
-              <PostInput
+              <CreatePostInput
                 type="text"
                 setNewPost={setNewPost}
                 newPost={newPost}
               />
             </TabsContent>
             <TabsContent value="image">
-              <PostInput
+              <CreatePostInput
                 type="image"
                 setNewPost={setNewPost}
                 newPost={newPost}
               />
             </TabsContent>
             <TabsContent value="poll">
-              <PostInput
+              <CreatePostInput
                 type="poll"
                 setNewPost={setNewPost}
                 newPost={newPost}
               />
             </TabsContent>
             <TabsContent value="file">
-              <PostInput
+              <CreatePostInput
                 type="file"
                 setNewPost={setNewPost}
                 newPost={newPost}
diff --git a/src/components/dashboard/header.tsx b/src/components/dashboard/header.tsx
index f32ee1c..b051bd0 100644
--- a/src/components/dashboard/header.tsx
+++ b/src/components/dashboard/header.tsx
@@ -8,13 +8,13 @@ import {
   BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "../ui/breadcrumb";
-import ModeToggle from "../ThemeProvider/ThemeToggle";
-import { usePathname } from "next/navigation";
-import { pageMeta, PageMeta } from "@/src/utils/constants";
-import CommandCenter from "./CommandCenter/CommandCenter";
-import { SignedIn } from "@clerk/nextjs";
+  BreadcrumbSeparator
+} from "../ui/breadcrumb"
+import ModeToggle  from "../ThemeProvider/ThemeToggle"
+import { usePathname } from "next/navigation"
+import CommandCenter  from "./CommandCenter/CommandCenter"
+import { SignedIn } from "@clerk/nextjs"
+import pageMeta, { PageMeta } from "@/src/utils/constants"
 
 type Crumb = {
   href: string
@@ -40,7 +40,7 @@ const Header = () => {
   })()
 
   return (
-    <header className="flex h-16 shrink-0 items-center gap-2 sticky top-0 bg-background z-10 rounded-xl border-b mb-4">
+    <header className="flex h-16 shrink-0 items-center gap-2 sticky top-0 bg-background z-10 rounded-xl border-b ">
       <div className="flex items-center between justify-between w-full gap-2 px-4">
         <div className="flex items-center ">
           <SidebarTrigger className="-ml-1" />
diff --git a/src/components/dashboard/nav-projects.tsx b/src/components/dashboard/nav-projects.tsx
index 8c750e4..506c333 100644
--- a/src/components/dashboard/nav-projects.tsx
+++ b/src/components/dashboard/nav-projects.tsx
@@ -25,7 +25,7 @@ import {
   useSidebar,
 } from "@/src/components/ui/sidebar"
 
-export function NavProjects({
+export default function NavProjects({
   projects,
 }: {
   projects: {
diff --git a/src/components/dashboard/post-feed.tsx b/src/components/dashboard/post-feed.tsx
index a1b2b8d..755d597 100644
--- a/src/components/dashboard/post-feed.tsx
+++ b/src/components/dashboard/post-feed.tsx
@@ -1,9 +1,11 @@
 // server component
-import FilePost from "@/src/components/dashboard/Posts/post-file"
-import ImagePost from "@/src/components/dashboard/Posts/post-image"
-import PollPost from "@/src/components/dashboard/Posts/post-poll"
-import TextPost from "@/src/components/dashboard/Posts/post-text"
-import { Post, PostFile, PostPoll } from "@/src/components/dashboard/Posts/types/posts-types"
+
+import FilePost from "./posts/post-file"
+import ImagePost from "./posts/post-image"
+import PollPost from "./posts/post-poll"
+import TextPost from "./posts/post-text"
+import { Post, PostFile, PostPoll } from "./posts/types/posts-types"
+
 
 type Props = {
   posts: (Post | PostFile | PostPoll)[]
diff --git a/src/components/dashboard/posts/post-comment-form.tsx b/src/components/dashboard/posts/post-comment-form.tsx
index 1e82fe5..73d9346 100644
--- a/src/components/dashboard/posts/post-comment-form.tsx
+++ b/src/components/dashboard/posts/post-comment-form.tsx
@@ -4,19 +4,19 @@ import { Button } from "@/src/components/ui/button"
 import { useState } from "react"
 import { Input } from "@/src/components/ui/input"
 import { Avatar, AvatarFallback, AvatarImage } from "@/src/components/ui/avatar"
-import { Post } from "./types/posts-types"
+import { Post, PostFile, PostPoll } from "./types/posts-types"
 
 type Props = {
-  posts: Post[]
+  posts: (Post | PostFile | PostPoll)[]
   setPosts: (posts: Post[]) => void
   postId: string
 }
 
-const PostCommentForm: React.FC<Props> = (props) => {
+const PostCommentForm: React.FC<Props> = ({posts, setPosts, postId}) => {
   const [newComment, setNewComment] = useState<{ [key: string]: string }>({})
 
   const handleAddComment = (postId: string) => {
-    const updatedPosts = props.posts.map((post: Post) => {
+    const updatedPosts = posts.map((post) => {
       if (post.id === postId) {
         return {
           ...post,
@@ -33,7 +33,7 @@ const PostCommentForm: React.FC<Props> = (props) => {
       }
       return post
     })
-    props.setPosts(updatedPosts)
+    setPosts(updatedPosts.filter((post): post is Post => 'content' in post && typeof post.content === 'string'))
     setNewComment({ ...newComment, [postId]: "" })
   }
 
@@ -45,17 +45,17 @@ const PostCommentForm: React.FC<Props> = (props) => {
       </Avatar>
       <Input
         placeholder="Add a comment..."
-        value={newComment[props.postId] || ""}
+        value={newComment[postId] || ""}
         onChange={(e) =>
           setNewComment({
             ...newComment,
-            [props.postId]: e.target.value
+            [postId]: e.target.value
           })
         }
         className="flex-1"
       />
       <Button
-        onClick={() => handleAddComment(props.postId)}
+        onClick={() => handleAddComment(postId)}
         size="sm"
         className="mt-4"
       >
diff --git a/src/components/dashboard/posts/post-file.tsx b/src/components/dashboard/posts/post-file.tsx
index c3e7800..e1b6179 100644
--- a/src/components/dashboard/posts/post-file.tsx
+++ b/src/components/dashboard/posts/post-file.tsx
@@ -19,22 +19,22 @@ type Props = {
   setPosts: (posts: (Post | PostFile | PostPoll)[]) => void
 }
 
-const FilePost: React.FC<Props> = (props) => {
+const FilePost: React.FC<Props> = ({post, posts, setPosts}) => {
   return (
     <Card className="bg-background shadow-lg">
       <CardHeader>
         <div className="flex items-center space-x-4">
           <Avatar>
             <AvatarImage
-              src={props.post.author.avatar}
-              alt={props.post.author.name}
+              src={post.author.avatar}
+              alt={post.author.name}
             />
-            <AvatarFallback>{props.post.author.name[0]}</AvatarFallback>
+            <AvatarFallback>{post.author.name[0]}</AvatarFallback>
           </Avatar>
           <div>
-            <p className="font-semibold">{props.post.author.name}</p>
+            <p className="font-semibold">{post.author.name}</p>
             <p className="text-sm text-muted-foreground">
-              {new Date(props.post.createdAt).toLocaleString()}
+              {new Date(post.createdAt).toLocaleString()}
             </p>
           </div>
         </div>
@@ -42,10 +42,10 @@ const FilePost: React.FC<Props> = (props) => {
       <CardContent>
         <div className="flex items-center space-x-2 bg-muted p-4 rounded-lg">
           <FileIcon className="h-8 w-8" />
-          <span className="font-medium">{props.post.fileName}</span>
+          <span className="font-medium">{post.fileName}</span>
         </div>
         <div className="mt-4 flex flex-wrap gap-2">
-          {props.post.hashtags.map((tag) => (
+          {post.hashtags.map((tag) => (
             <Badge key={tag} variant="secondary">
               #{tag}
             </Badge>
@@ -54,19 +54,19 @@ const FilePost: React.FC<Props> = (props) => {
       </CardContent>
       <CardFooter className="flex flex-col items-start space-y-4">
         <PostInteractions
-          likes={props.post.likes}
-          comments={props.post.comments.length}
+          likes={post.likes}
+          comments={post.comments.length}
         />
         <Separator />
         <div className="w-full space-y-4">
-          {props.post.comments.map((comment: Comment) => (
+          {post.comments.map((comment: Comment) => (
             <PostComments key={comment.id} comment={comment} />
           ))}
         </div>
         <PostCommentForm
-          posts={props.posts}
-          setPosts={props.setPosts}
-          postId={props.post.id}
+          posts={posts}
+          setPosts={setPosts}
+          postId={post.id}
         />
       </CardFooter>
     </Card>
diff --git a/src/components/dashboard/profile/user/ProfileFollowActions.tsx b/src/components/dashboard/profile/user/ProfileFollowActions.tsx
index 5790bef..8fca676 100644
--- a/src/components/dashboard/profile/user/ProfileFollowActions.tsx
+++ b/src/components/dashboard/profile/user/ProfileFollowActions.tsx
@@ -3,11 +3,13 @@
 import Loader from '@/src/components/common/Loader/Loader'
 import { Button } from '@/src/components/ui/button'
 import { SelectUser } from '@/src/db/schema'
+import { useToast } from '@/src/hooks/use-toast'
 import {useServerAction}  from '@/src/hooks/useServerAction'
-import { CreateContactAction, GetContactAction } from '@/src/server-actions/Contact/Contact'
+import { CreatePrivateChatAction, GetMutualChatAction } from '@/src/server-actions/Chat/Chat'
+import { AcceptConnectionAction, CreateContactAction, GetContactAction } from '@/src/server-actions/Contact/Contact'
 import { userStore } from '@/src/store/user/userStore'
-import { useUser } from '@clerk/nextjs'
 import { useAtomValue } from 'jotai'
+import { useRouter } from 'next/navigation'
 import React, { useEffect } from 'react'
 
 interface Props {
@@ -15,45 +17,91 @@ interface Props {
 }
 
 const ProfileFollowActions = ({user}:Props) => {
-  // const {loading:contactLoading, state:contact, error, execute:getContact} = useServerAction(GetContactAction)
-  // const {loading:connectLoading, state:follow, execute:CreateContact} = useServerAction(CreateContactAction)
+  const {toast} = useToast()
   const [contactLoading, contact, getContacterror, getContact] = useServerAction(GetContactAction)
-  const [connectLoading, follow, connectError, CreateContact] = useServerAction(CreateContactAction)
-
-  const Iam = useAtomValue(userStore.user)
+  const [connectLoading, follow, connectError, createContact] = useServerAction(CreateContactAction)
+  const [mutualChatLoading, mutualChat, mutualChaterror, getMutualChat] = useServerAction(GetMutualChatAction)
+  const [createChatLoading, newChatState, createChaterror, createChat] = useServerAction(CreatePrivateChatAction)
+  const [acceptConnectionLoading, acceptConnectionState, acceptConnectionError, acceptConnection] = useServerAction(AcceptConnectionAction)
+  
+  const router = useRouter()
+  const Iam = useAtomValue(userStore.AuthUser)
 
   useEffect(()=>{
     if(Iam?.unique_id && user.unique_id){
       getContact(Iam.unique_id, user.unique_id)
+      getMutualChat(user.unique_id)
     }
   },[Iam?.unique_id, user.unique_id])
 
+  /**
+   * Connects the current user to the specified user. If a contact already exists, it does nothing.
+   * Otherwise, it creates a new contact and updates the server state.
+   * @requires both the current user's unique ID and the target user's unique ID to be available.
+   */
   const handleConnect = async() => {
     if(!Iam?.unique_id || !user.unique_id) return
-    console.log(Iam?.unique_id, user.unique_id , " get Contact")
-    await CreateContact(Iam?.unique_id, user.unique_id)
+    await createContact(Iam?.unique_id, user.unique_id)
     await getContact(Iam?.unique_id, user.unique_id)
   }
 
+  /**
+   * Initiates a chat with the specified user. If a mutual chat already exists, it navigates to the chat using the existing chat slug.
+   * Otherwise, it creates a new chat and navigates to it.
+   * Requires both the current user's unique ID and the target user's unique ID to be available.
+   */
+  const handleMessage = async() => {
+    if(!Iam?.unique_id || !user.unique_id) return
+    let chatSlug = null
+    if(mutualChat && mutualChat.success && mutualChat.data){
+      chatSlug = mutualChat.data?.chat_slug
+    }else{
+      const newChat = await createChat(Iam?.unique_id, user.unique_id)
+      chatSlug = newChat?.data?.chat_slug
+    }
+    router.push(`/chat?active_chat=${chatSlug}`)
+  }
+
+  const handleAcceptConnection = async() => {
+    if(!Iam?.unique_id || !user.unique_id) return
+    await acceptConnection(Iam?.unique_id, user.unique_id)
+    await getContact(Iam?.unique_id, user.unique_id)
+    toast({
+      title: 'Connection Accepted',
+      description: 'You have successfully accepted the connection request',
+      duration: 3000,
+    })
+  }
+  
   return (
     <div className="flex gap-2">
         <Button>Follow</Button>
         {
           contact?.data && contact.data.is_accepted ? (
-            <Button>Message</Button>
+            <Button loading={createChatLoading || mutualChatLoading} onClick={handleMessage} >
+              Message
+            </Button>
           ):null
         }
         {
           contact?.data && contact.data.is_requested && !contact.data.is_accepted ? (
-            <Button>Connect Requested</Button>
+            <>
+              {
+                contact.data.contact_id === Iam?.unique_id ? (
+                  <Button onClick={handleAcceptConnection}>Accept Connection</Button>
+                ):(
+                  <Button disabled={acceptConnectionLoading}>{contactLoading || acceptConnectionLoading ? <Loader /> : null} Connect Requested</Button>
+                )
+              }
+            </>
           ):null
         }
         {
-          !contact?.data && (
+          !contact?.data || (!contact.data.is_requested && !contact.data.is_accepted )  ? (
             <Button onClick={handleConnect} disabled={contactLoading || connectLoading}> 
-              {(contactLoading||connectLoading) && <Loader />} Connect
+              {(contactLoading||connectLoading) ? <Loader /> : null} Connect
             </Button>
-          )
+          ) : null
         }
     </div>
   )
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
index 08316e3..df141ee 100644
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -3,6 +3,7 @@ import { Slot } from "@radix-ui/react-slot"
 import { ChevronRight, MoreHorizontal } from "lucide-react"
 
 import { cn } from "@/src/lib/utils"
+import Link from "next/link"
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,
@@ -41,20 +42,33 @@ BreadcrumbItem.displayName = "BreadcrumbItem"
 
 const BreadcrumbLink = React.forwardRef<
   HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
+  React.ComponentPropsWithoutRef<'a'> & {
+    asChild?: boolean;
+    href: string;
+  }
+>(({ asChild, className, href, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'a';
+
+  if (asChild) {
+    return (
+      <Slot
+        ref={ref}
+        className={cn('transition-colors hover:text-foreground cursor-pointer', className)}
+        {...props}
+      />
+    );
   }
->(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
 
   return (
-    <Comp
-      ref={ref}
-      className={cn("transition-colors hover:text-foreground", className)}
-      {...props}
-    />
-  )
-})
+    <Link href={href} passHref legacyBehavior className="cursor-pointer">
+      <a
+        ref={ref}
+        className={cn('transition-colors hover:text-foreground cursor-pointer', className)}
+        {...props}
+      />
+    </Link>
+  );
+});
 BreadcrumbLink.displayName = "BreadcrumbLink"
 
 const BreadcrumbPage = React.forwardRef<
@@ -66,7 +80,7 @@ const BreadcrumbPage = React.forwardRef<
     role="link"
     aria-disabled="true"
     aria-current="page"
-    className={cn("font-normal text-foreground", className)}
+    className={cn("font-normal text-foreground cursor-pointer", className)}
     {...props}
   />
 ))
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 048d79f..2b101e9 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -3,6 +3,7 @@ import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/src/lib/utils"
 import { PencilIcon } from "lucide-react"
+import Loader from "../common/Loader/Loader"
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -40,8 +41,12 @@ const buttonVariants = cva(
   }
 )
 
+interface CustomButtonProps {
+  loading ?: boolean
+}
+
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, CustomButtonProps,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean
 }
@@ -56,6 +61,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       >
         {variant === "edit" && <PencilIcon size={"10"} />}
+        {props.loading ? <Loader/> : null}
         {children}
       </Comp>
     )
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 0000000..f0720e8
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/src/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index f62601a..e6ee461 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -322,7 +322,7 @@ const SidebarInset = React.forwardRef<
     <main
       ref={ref}
       className={cn(
-        "relative flex min-h-svh flex-1 flex-col bg-background",
+        "relative flex gap-4 min-h-svh flex-1 flex-col bg-background",
         "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
         className
       )}
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
new file mode 100644
index 0000000..a8356db
--- /dev/null
+++ b/src/components/ui/toast.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/src/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
new file mode 100644
index 0000000..40bc7a5
--- /dev/null
+++ b/src/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { useToast } from "@/src/hooks/use-toast"
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/src/components/ui/toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/src/db/data-access/chat/message/query.ts b/src/db/data-access/chat/message/query.ts
new file mode 100644
index 0000000..5270a9d
--- /dev/null
+++ b/src/db/data-access/chat/message/query.ts
@@ -0,0 +1,16 @@
+
+import { db } from "@/src/db";
+import { InsertMessage, messagesTable } from "@/src/db/schema";
+
+
+export const createChatMessage = async (newMessage:InsertMessage) => {
+    try{
+        const messages = await db.insert(messagesTable).values(newMessage).returning()
+        if(messages.length > 0){
+            return messages[0]
+        }
+
+    }catch(error:any){
+        throw new Error(error.message)
+    }
+}
\ No newline at end of file
diff --git a/src/db/data-access/chat/query.ts b/src/db/data-access/chat/query.ts
index b7b14aa..bb77b75 100644
--- a/src/db/data-access/chat/query.ts
+++ b/src/db/data-access/chat/query.ts
@@ -1,16 +1,95 @@
-import { eq } from "drizzle-orm"
+
+import { asc, count, desc, eq, inArray, or } from "drizzle-orm"
 import { db } from "../.."
-import { chatsTable, userChatsTable } from "../../schema"
+import { chatsTable, userChatsTable, usersTable } from "../../schema"
+
+
+export const CreatePrivateChat = async (user_id: string, contact_id: string) => {
+    try{
+        const chat = await db.insert(chatsTable).values({
+            type: "private",
+            name: "",
+            channel_id: `${user_id}:${contact_id}`,
+        }).returning()
+        await db.insert(userChatsTable).values(
+            [
+                {
+                    user_id,
+                    chat_id: chat[0].id
+                },
+                {
+                    user_id: contact_id,
+                    chat_id: chat[0].id
+                }
+            ]
+        )
+
+        return await db.query.chatsTable.findFirst({
+            where: eq(chatsTable.id, chat[0].id),
+        })
+
+        
+    }catch(error:any){
+        throw new Error(error.message);
+    }
+
+}
+
+// export const GetUserChat = async (user_id: string) => {
+//     try{
+//         const chats = await db.query.userChatsTable.findFirst({
+//             where: eq(userChatsTable.user_id, user_id),
+//             // with:{
+//             //     chat: true,
+//             //     user: true
+//             // }
+//         })
+//         return chats
+//     }catch(error:any){
+//         throw new Error(error.message);
+//     }
+// }
 
 
 export const GetUserChats = async (user_id: string) => {
+    try{
+        const user = await db.query.usersTable.findFirst({
+            where: eq(usersTable.unique_id, user_id),
+            with:{
+                chats: true
+            }
+        })
+        const chatIds = user?.chats.map((chat) => chat.chat_id) || []
+        const chats = await db.query.chatsTable.findMany({
+            where: (chatsTable) => inArray(chatsTable.id, chatIds),
+            orderBy: (chatsTable) => desc(chatsTable.created_at),
+            with:{
+                users: {
+                    with:{
+                        user: true
+                    }
+                }
+            } 
+        })
+        return chats
+    }catch(error:any){
+        throw new Error(error.message);
+    }
+}
+
+
+export const GetMutualChatb = async (user_id: string, contact_id: string) => {
     try{
         const chats = await db.query.userChatsTable.findMany({
-            where: eq(userChatsTable.user_id, user_id),
-            // with:{
-            //     chat: true,
-            //     user: true
-            // }
+            where: or(
+                eq(userChatsTable.user_id, user_id),
+                eq(userChatsTable.user_id, contact_id)
+            ), 
+            with:{
+                chat: true,
+                user: true
+            },
+        
         })
         return chats
     }catch(error:any){
@@ -18,16 +97,105 @@ export const GetUserChats = async (user_id: string) => {
     }
 }
 
-export const GetChatWithMessages = async (chat_id: number) => {
+export const GetMutualChat = async (user_id: string, contact_id: string) => {
+    try{
+        const chatId = await db.select({ chat_id: userChatsTable.chat_id }).from(userChatsTable).where(
+            or(
+                eq(userChatsTable.user_id, user_id),
+                eq(userChatsTable.user_id, contact_id)
+            )
+        ).groupBy(
+            userChatsTable.chat_id
+        ).having(
+            eq(count(userChatsTable.chat_id), 2)
+        )
+        if(chatId.length === 0) return null
+        return await db.query.chatsTable.findFirst({
+            where: eq(chatsTable.id, chatId[0].chat_id)
+        })
+    }catch(error:any){
+        throw new Error(error.message);
+    }
+}
+
+export const GetChatById = async (chat_id: number) => {
     try{
         const chat = await db.query.chatsTable.findFirst({
             where: eq(chatsTable.id, chat_id),
-            // with:{
-            //     messages: true
-            // }
         })
         return chat
     }catch(error:any){
         throw new Error(error.message);
     }
+}
+
+export const GetChatByIdWithMessages = async (chat_id: number) => {
+    try{
+        const chat = await db.query.chatsTable.findFirst({
+            where: eq(chatsTable.id, chat_id),
+            with:{
+                messages: {
+                    limit:50,
+                    orderBy: (messagesTable) => desc(messagesTable.id),
+                    
+
+                },
+                users: {
+                    with:{
+                        user: true
+                    }
+                }
+            }
+        })
+
+        if (chat && chat.messages.length > 0) {
+            const reversedMessages = chat.messages.reverse()
+            chat.messages = reversedMessages
+        }
+
+        return chat
+    }catch(error:any){
+        throw new Error(error.message);
+    }
+}
+
+export const GetChatBySlugWithMessages = async (slug: string) => {
+    try{
+        const chat = await db.query.chatsTable.findFirst({
+            where: eq(chatsTable.chat_slug, slug),
+            with:{
+                messages: {
+                    limit:50,
+                    orderBy: (messagesTable) => desc(messagesTable.id)
+                },
+                users: {
+                    with:{
+                        user: true
+                    }
+                }
+            }
+        })
+
+        if (chat && chat.messages.length > 0) {
+            const reversedMessages = chat.messages.reverse()
+            chat.messages = reversedMessages
+        }
+
+        return chat
+    }catch(error:any){
+        throw new Error(error.message);
+    }
+}
+
+export const updateLastChatMessage = async (chatId: number, message: string) => {
+    try{
+        const updatedChat = await db.update(chatsTable).set({
+            last_message: message
+        }).where(
+            eq(chatsTable.id, chatId)
+        ).returning()
+        return updatedChat[0]
+    }catch(error:any){
+        throw new Error(error.message);
+    }
 }
\ No newline at end of file
diff --git a/src/db/data-access/contact/query.ts b/src/db/data-access/contact/query.ts
index e8f799b..d9ae525 100644
--- a/src/db/data-access/contact/query.ts
+++ b/src/db/data-access/contact/query.ts
@@ -1,6 +1,6 @@
-import { and, eq } from "drizzle-orm";
+import { and, eq, or } from "drizzle-orm";
 import { db } from "../..";
-import { userContactsTable, usersTable } from "../../schema";
+import { SelectUserContact, userContactsTable, usersTable } from "../../schema";
 
 
 
@@ -12,6 +12,19 @@ export const CreateContact = async (user_id: string, contact_id: string) => {
     }
 }
 
+export const UpdateContact = async (user_id: string, contact_id: string, payload:Partial<SelectUserContact>) => {
+    try{
+        return await db.update(userContactsTable).set(payload).where(
+            and(
+                eq(userContactsTable.contact_id, contact_id),
+                eq(userContactsTable.user_id, user_id)
+            )
+        );
+    }catch(error : any){
+        throw new Error(error.message);
+    }
+}
+
 export const DeleteContact = async (user_id: string, contact_id: string) => {
     try{
         return await db.delete(userContactsTable).where(
@@ -39,9 +52,15 @@ export const GetContacts = async (user_id: string) => {
 export const GetContact = async (user_id: string, contact_id: string) => {
     try{
         const contact = await db.query.userContactsTable.findFirst({
-            where: and(
-                eq(userContactsTable.user_id, user_id),
-                eq(userContactsTable.contact_id, contact_id)
+            where: or(
+                and(
+                    eq(userContactsTable.user_id, user_id),
+                    eq(userContactsTable.contact_id, contact_id)
+                ),
+                and(
+                    eq(userContactsTable.user_id, contact_id),
+                    eq(userContactsTable.contact_id, user_id)
+                ),
             ),
             with:{
                 contact: true,
diff --git a/src/db/data-access/user/query.ts b/src/db/data-access/user/query.ts
index 84dbe2b..83c6a91 100644
--- a/src/db/data-access/user/query.ts
+++ b/src/db/data-access/user/query.ts
@@ -3,7 +3,6 @@ import { db } from "../..";
 import { InsertUser, SelectUser, usersTable } from "../../schema";
 
 export const userTableColSelect = {
-    id: true,
     first_name: true,
     last_name: true,
     email: true,
@@ -16,10 +15,9 @@ export async function CreateUser(data: InsertUser) {
     await db.insert(usersTable).values(data);
 }
 
-export async function SelectUserById(id: string) {
+export async function SelectUserByExternalId(id: string) {
     return await db.query.usersTable.findFirst({
         columns: {
-            id: true,
             first_name: true,
             last_name: true,
             email: true,
@@ -49,7 +47,6 @@ export async function FindUserWildCard(wildcard: string) {
 
         const users = await db.query.usersTable.findMany({
             columns: {
-                id: true,
                 first_name: true,
                 last_name: true,
                 email: true,
diff --git a/src/db/migrations/0014_aspiring_omega_flight.sql b/src/db/migrations/0014_aspiring_omega_flight.sql
new file mode 100644
index 0000000..4b18084
--- /dev/null
+++ b/src/db/migrations/0014_aspiring_omega_flight.sql
@@ -0,0 +1 @@
+ALTER TABLE `chats` ADD `chat_slug` text NOT NULL;
\ No newline at end of file
diff --git a/src/db/migrations/0015_lame_quasar.sql b/src/db/migrations/0015_lame_quasar.sql
new file mode 100644
index 0000000..5f0bae6
--- /dev/null
+++ b/src/db/migrations/0015_lame_quasar.sql
@@ -0,0 +1,6 @@
+DROP INDEX IF EXISTS "users_email_unique";--> statement-breakpoint
+DROP INDEX IF EXISTS "users_external_auth_id_unique";--> statement-breakpoint
+ALTER TABLE `messages` ALTER COLUMN "sender_id" TO "sender_id" text NOT NULL;--> statement-breakpoint
+CREATE UNIQUE INDEX `users_email_unique` ON `users` (`email`);--> statement-breakpoint
+CREATE UNIQUE INDEX `users_external_auth_id_unique` ON `users` (`external_auth_id`);--> statement-breakpoint
+ALTER TABLE `messages` DROP COLUMN `timestamp`;
\ No newline at end of file
diff --git a/src/db/migrations/meta/0014_snapshot.json b/src/db/migrations/meta/0014_snapshot.json
new file mode 100644
index 0000000..3e151a0
--- /dev/null
+++ b/src/db/migrations/meta/0014_snapshot.json
@@ -0,0 +1,405 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "8004e2ad-5238-41dc-8735-bf4e8015220a",
+  "prevId": "8dde65b7-fe98-4875-8173-5cd14698d232",
+  "tables": {
+    "chats": {
+      "name": "chats",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "channel_id": {
+          "name": "channel_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "chat_slug": {
+          "name": "chat_slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "avatar": {
+          "name": "avatar",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "last_message": {
+          "name": "last_message",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "unread_count": {
+          "name": "unread_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "is_group": {
+          "name": "is_group",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "deleted_at": {
+          "name": "deleted_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "messages": {
+      "name": "messages",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "chat_id": {
+          "name": "chat_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "sender_id": {
+          "name": "sender_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "message": {
+          "name": "message",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "deleted_at": {
+          "name": "deleted_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_chats": {
+      "name": "user_chats",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "chat_id": {
+          "name": "chat_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "user_chats_user_id_chat_id_pk": {
+          "columns": [
+            "user_id",
+            "chat_id"
+          ],
+          "name": "user_chats_user_id_chat_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_contacts": {
+      "name": "user_contacts",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "contact_id": {
+          "name": "contact_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_requested": {
+          "name": "is_requested",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "is_accepted": {
+          "name": "is_accepted",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "is_blocked": {
+          "name": "is_blocked",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "is_following": {
+          "name": "is_following",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "deleted_at": {
+          "name": "deleted_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "user_contacts_user_id_contact_id_pk": {
+          "columns": [
+            "user_id",
+            "contact_id"
+          ],
+          "name": "user_contacts_user_id_contact_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_messages": {
+      "name": "user_messages",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "message_id": {
+          "name": "message_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "unique_id": {
+          "name": "unique_id",
+          "type": "text(36)",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "first_name": {
+          "name": "first_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "last_name": {
+          "name": "last_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "external_auth_id": {
+          "name": "external_auth_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "profile_url": {
+          "name": "profile_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "meta": {
+          "name": "meta",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        },
+        "users_external_auth_id_unique": {
+          "name": "users_external_auth_id_unique",
+          "columns": [
+            "external_auth_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}
\ No newline at end of file
diff --git a/src/db/migrations/meta/0015_snapshot.json b/src/db/migrations/meta/0015_snapshot.json
new file mode 100644
index 0000000..c5f801a
--- /dev/null
+++ b/src/db/migrations/meta/0015_snapshot.json
@@ -0,0 +1,398 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "7b8ae6d9-e108-43af-8e92-8576a9e73faa",
+  "prevId": "8004e2ad-5238-41dc-8735-bf4e8015220a",
+  "tables": {
+    "chats": {
+      "name": "chats",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "channel_id": {
+          "name": "channel_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "chat_slug": {
+          "name": "chat_slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "avatar": {
+          "name": "avatar",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "last_message": {
+          "name": "last_message",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "unread_count": {
+          "name": "unread_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "is_group": {
+          "name": "is_group",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "deleted_at": {
+          "name": "deleted_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "messages": {
+      "name": "messages",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "chat_id": {
+          "name": "chat_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "sender_id": {
+          "name": "sender_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "message": {
+          "name": "message",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "deleted_at": {
+          "name": "deleted_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_chats": {
+      "name": "user_chats",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "chat_id": {
+          "name": "chat_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "user_chats_user_id_chat_id_pk": {
+          "columns": [
+            "user_id",
+            "chat_id"
+          ],
+          "name": "user_chats_user_id_chat_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_contacts": {
+      "name": "user_contacts",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "contact_id": {
+          "name": "contact_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_requested": {
+          "name": "is_requested",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "is_accepted": {
+          "name": "is_accepted",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "is_blocked": {
+          "name": "is_blocked",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "is_following": {
+          "name": "is_following",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "deleted_at": {
+          "name": "deleted_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "user_contacts_user_id_contact_id_pk": {
+          "columns": [
+            "user_id",
+            "contact_id"
+          ],
+          "name": "user_contacts_user_id_contact_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_messages": {
+      "name": "user_messages",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "message_id": {
+          "name": "message_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "unique_id": {
+          "name": "unique_id",
+          "type": "text(36)",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "first_name": {
+          "name": "first_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "last_name": {
+          "name": "last_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "external_auth_id": {
+          "name": "external_auth_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "profile_url": {
+          "name": "profile_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "meta": {
+          "name": "meta",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        },
+        "users_external_auth_id_unique": {
+          "name": "users_external_auth_id_unique",
+          "columns": [
+            "external_auth_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}
\ No newline at end of file
diff --git a/src/db/migrations/meta/_journal.json b/src/db/migrations/meta/_journal.json
index afcd787..f40a2a4 100644
--- a/src/db/migrations/meta/_journal.json
+++ b/src/db/migrations/meta/_journal.json
@@ -99,6 +99,20 @@
       "when": 1734690801429,
       "tag": "0013_closed_toro",
       "breakpoints": true
+    },
+    {
+      "idx": 14,
+      "version": "6",
+      "when": 1734876515540,
+      "tag": "0014_aspiring_omega_flight",
+      "breakpoints": true
+    },
+    {
+      "idx": 15,
+      "version": "6",
+      "when": 1735564128127,
+      "tag": "0015_lame_quasar",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/src/db/schema.ts b/src/db/schema.ts
index 2c4092e..64c9296 100644
--- a/src/db/schema.ts
+++ b/src/db/schema.ts
@@ -1,12 +1,13 @@
+
 import { randomUUID } from "crypto";
-import { relations, sql } from "drizzle-orm";
+import { InferSelectModel, relations, sql } from "drizzle-orm";
 import { foreignKey, int, primaryKey, sqliteTable, text } from "drizzle-orm/sqlite-core";
 
 
 const timestamps = {
-  updated_at: text("updated_at"),
+  updated_at: text("updated_at").$onUpdateFn(()=>sql`CURRENT_TIMESTAMP`),
   created_at: text("created_at").default(sql`CURRENT_TIMESTAMP`),
-  deleted_at: text("deleted_at"),
+  deleted_at: text("deleted_at")
 }
 
 export const usersTable = sqliteTable("users", {
@@ -17,11 +18,14 @@ export const usersTable = sqliteTable("users", {
   external_auth_id: text().notNull().unique(),
   profile_url: text(),
   meta: text(),
-});
+},
+(t) => ({
+  pk: primaryKey({ columns: [t.unique_id] }),
+}));
 
 export const usersRelations = relations(usersTable, ({ many }) => ({
   chats: many(userChatsTable,{
-    relationName: 'userToChat',
+    relationName: 'UserChats',
   }),
   contacts: many(userContactsTable,{
     relationName: 'userToContact',
@@ -34,6 +38,7 @@ export type SelectUser = Omit<typeof usersTable.$inferSelect , 'meta'>;
 export const chatsTable = sqliteTable("chats", {
   id: int().primaryKey({ autoIncrement: true }),
   channel_id: text().notNull(),
+  chat_slug: text().notNull().$defaultFn(() => randomUUID()),
   name: text(),
   type: text(),
   avatar: text(),
@@ -48,21 +53,23 @@ export const chatsRelations = relations(chatsTable, ({ many }) => ({
     relationName: "messageToChat"
   }),
   users: many(userChatsTable,{
-    relationName: "userToChat"
+    relationName: "ChatUsers"
   }),
 }));
 
 export type InsertChat = typeof chatsTable.$inferInsert;
-export type SelectChat = typeof chatsTable.$inferSelect;
-// export type SelectChatWithRelation = typeof chatRelations.table.$inferSelect;
+export type SelectChat = InferSelectModel<typeof chatsTable> & {
+  messages?: SelectMessage[];
+  users?: SelectUserChat[];
+}; 
+export type SelectChatWithRelation = typeof chatsRelations;
 
 export const messagesTable = sqliteTable("messages", {
   id: int().primaryKey({ autoIncrement: true }),
   chat_id: int().notNull(),
   type: text().notNull(),
-  sender_id: int().notNull(),
+  sender_id: text().notNull(),
   message: text().notNull(),
-  timestamp: int().notNull(),
   ...timestamps
 },
   (t) => ({
@@ -97,17 +104,20 @@ export const userChatsRelations = relations(userChatsTable, ({ one }) => ({
   chat: one(chatsTable, {
     fields: [userChatsTable.chat_id],
     references: [chatsTable.id],
-    relationName: "userToChat"
+    relationName: "ChatUsers"
   }),
   user: one(usersTable, {
     fields: [userChatsTable.user_id],
     references: [usersTable.unique_id],
-    relationName: "user"
+    relationName: "UserChats"
   }),
 }));
 
 export type InsertUserChat = typeof userChatsTable.$inferInsert;
-export type SelectUserChat = typeof userChatsTable.$inferSelect;
+export type SelectUserChat = typeof userChatsTable.$inferSelect & {
+  user?: SelectUser;
+  chat?: SelectChat;
+};
 
 export const userMessagesTable = sqliteTable("user_messages", {
   user_id: text().notNull(),
diff --git a/src/hooks/use-toast.ts b/src/hooks/use-toast.ts
new file mode 100644
index 0000000..75060ad
--- /dev/null
+++ b/src/hooks/use-toast.ts
@@ -0,0 +1,194 @@
+"use client"
+
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/src/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/src/hooks/useServerAction.tsx b/src/hooks/useServerAction.tsx
index 6730fdf..a1721c3 100644
--- a/src/hooks/useServerAction.tsx
+++ b/src/hooks/useServerAction.tsx
@@ -11,8 +11,9 @@ export function useServerAction<T, Args extends any[]>(
     setLoading(true);
     setError(null);
     try {
-      const result = await callback(...args);
-      setState(result);
+      const result = await callback(...args)
+      setState(result)
+      return result
     } catch (err) {
       setError(err as Error);
     } finally {
diff --git a/src/middleware.ts b/src/middleware.ts
index 589f953..0a26163 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -14,6 +14,9 @@ export const config = {
     '/contact-us',
     '/profile(.*)',
     '/posts',
+    '/chat',
+    '/events',
+    '/spaces',
     // Always run for API routes
     // '/(api|trpc)(.*)',
     // '/sign-in(.*)',
diff --git a/src/server-actions/Chat/Chat.ts b/src/server-actions/Chat/Chat.ts
index 76e51d2..2c19020 100644
--- a/src/server-actions/Chat/Chat.ts
+++ b/src/server-actions/Chat/Chat.ts
@@ -1,22 +1,107 @@
 
-import { GetChatWithMessages, GetUserChats } from '@/src/db/data-access/chat/query';
 'use server'
+import { CreatePrivateChat, GetChatByIdWithMessages, GetChatBySlugWithMessages, GetMutualChat, GetUserChats, updateLastChatMessage } from '@/src/db/data-access/chat/query';
+import { CreateServerAction } from '..';
+import { InsertMessage, SelectUser } from '@/src/db/schema';
+import { AuthUserAction } from '../User/AuthUserAction';
+import { createChatMessage } from '@/src/db/data-access/chat/message/query';
+import ChatChannelHash from '@/src/components/dashboard/Chat/helper';
+import { AblyClientRest } from '@/src/services/realtime/AblyClient';
+
+export const CreatePrivateChatAction = CreateServerAction(true,
+    async (user_id: string, contact_id: string) => {
+        try{
+            const chat = await CreatePrivateChat(user_id, contact_id);
+            return { success: true , data : chat }
+        }catch(error){
+            return { error: error }
+        }
+    }
+)
+
+export const GetUserChatsAction = CreateServerAction(true,
+    async () => {
+        try{
+            const authUser = await AuthUserAction();
+            if(authUser){
+                const user_id = authUser.unique_id;
+                const chats = await GetUserChats(user_id);
+                return { success: true , data : chats }
+            }
+            
+        }catch(error){
+            return { error: error }
+        }
+    }
+) 
+
+export const GetMutualChatAction = CreateServerAction(
+    true,
+    async (contact_id: string) => {
+        try{
+            const authUser = await AuthUserAction();
+            if(authUser){
+                const chat = await GetMutualChat( authUser.unique_id , contact_id);
+                return { success: true , data : chat }
+            }
+        }catch(error){
+            return { error: error }
+        }
+    }
+) 
 
 
-export const GetUserChatsAction = async (user_id: string) => {
-    try{
-        const chats = await GetUserChats(user_id);
-        return { success: true , data : chats }
-    }catch(error){
-        return { error: error }
+export const GetChatWithMessagesAction =  CreateServerAction(true,
+    async (chat_id: number) => {
+        try{ 
+            const chat = await GetChatByIdWithMessages(chat_id);
+            return { success: true , data : chat }
+        }catch(error){
+            return { error: error }
+        }
     }
-}
-
-export const GetChatWithMessagesAction = async (chat_id: number) => {
-    try{
-        const chat = await GetChatWithMessages(chat_id);
-        return { success: true , data : chat }
-    }catch(error){
-        return { error: error }
+)
+
+export const GetChatBySlugWithMessagesAction =  CreateServerAction(true,
+    async (slug: string) => {
+        try{
+            const chat = await GetChatBySlugWithMessages(slug);
+            return { success: true , data : chat }
+        }catch(error){
+            return { error: error }
+        }
+    }
+)
+
+export const AddMessageToChatAction = CreateServerAction(true,
+    async (message: InsertMessage) => {
+        try{
+            const authUser = await AuthUserAction();
+            if(authUser){
+                const newMessagePlayload = {
+                    ...message,
+                    sender_id: authUser.unique_id,
+                }
+                const newMessage = await createChatMessage(newMessagePlayload)
+                if(newMessage){
+                    // update last message on chat
+                    const updatedChat = await updateLastChatMessage(newMessage.chat_id, newMessage.message);
+
+                    // const channelHash = ChatChannelHash(updatedChat.channel_id)
+                    
+                    // send message to channel
+
+                    const realtimeChannel = AblyClientRest.channels.get(updatedChat.channel_id);
+                    await realtimeChannel.publish('message', newMessage)
+
+                    return { success: true , data : newMessage }
+                }else{
+                    return { error: "Failed to create message" }
+                }
+            }
+        }
+        catch(error){
+            return { error: error }
+        }
     }
-}
\ No newline at end of file
+)
\ No newline at end of file
diff --git a/src/server-actions/Contact/Contact.ts b/src/server-actions/Contact/Contact.ts
index 32d4e26..48e3a69 100644
--- a/src/server-actions/Contact/Contact.ts
+++ b/src/server-actions/Contact/Contact.ts
@@ -1,6 +1,6 @@
 'use server'
 
-import { CreateContact, DeleteContact, GetContact, GetContacts } from "@/src/db/data-access/contact/query";
+import { CreateContact, DeleteContact, GetContact, GetContacts, UpdateContact } from "@/src/db/data-access/contact/query";
 import { CreateServerAction } from "..";
 
 export const CreateContactAction = CreateServerAction( true, async (user_id: string, contact_id: string) => {
@@ -12,6 +12,17 @@ export const CreateContactAction = CreateServerAction( true, async (user_id: str
     }
 })
 
+export const AcceptConnectionAction = CreateServerAction( true, async (user_id: string, contact_id: string) => {
+    try{
+        await UpdateContact(contact_id, user_id, {
+            is_accepted: 1
+        });
+        return { success: true }
+    }catch(error){
+        return { error: error }
+    }
+})
+
 export const DeleteContactAction = CreateServerAction( true ,async (user_id: string, contact_id: string) => {
     try{
         await DeleteContact(user_id, contact_id);
diff --git a/src/server-actions/User/AuthUserAction.ts b/src/server-actions/User/AuthUserAction.ts
new file mode 100644
index 0000000..b58bc87
--- /dev/null
+++ b/src/server-actions/User/AuthUserAction.ts
@@ -0,0 +1,20 @@
+'use server'
+
+import { SelectUserByExternalId } from "@/src/db/data-access/user/query";
+import { CreateServerAction } from "..";
+import { auth } from "@clerk/nextjs/server";
+
+export const AuthUserAction = CreateServerAction(false, async () => {
+	try{
+        const clerkUser = await auth();
+		if (!clerkUser || !clerkUser.userId ) {
+            throw new Error("Unauthorized", { cause: 401 });
+		}
+        const user = await SelectUserByExternalId(clerkUser.userId);
+		return user
+	}catch(error){
+        throw new Error("Unauthorized", { cause: 401 });
+
+	}
+
+})
\ No newline at end of file
diff --git a/src/server-actions/index.ts b/src/server-actions/index.ts
index a9b8afe..be41ef7 100644
--- a/src/server-actions/index.ts
+++ b/src/server-actions/index.ts
@@ -5,14 +5,14 @@ export function CreateServerAction<T, Args extends any[]>(
   callback: (...args: Args) => Promise<T>
 ) {
   return async (...args: Args): Promise<T> => {
-
 		if (shouldCheckAuth) {
       const user = await auth();
       if (!user.userId) {
         throw new Error("Unauthorized", { cause: 401 });
       }
     }
-
+    
     return await callback(...args);
+
   };
 }
\ No newline at end of file
diff --git a/src/services/auth/ClerkAuthListner.tsx b/src/services/auth/ClerkAuthListner.tsx
index 2503413..a1bff85 100644
--- a/src/services/auth/ClerkAuthListner.tsx
+++ b/src/services/auth/ClerkAuthListner.tsx
@@ -4,22 +4,24 @@ import { useSetAtom } from 'jotai';
 import { useAuth, useUser } from '@clerk/nextjs';
 import { SelectUser } from '@/src/db/schema';
 import { userStore } from '@/src/store/user/userStore';
-import { SelectUserById } from '@/src/db/data-access/user/query';
+import { SelectUserByExternalId } from '@/src/db/data-access/user/query';
 import { UserResource } from '@clerk/types';
+import { AuthUserAction } from '@/src/server-actions/User/AuthUserAction';
 
-const ClerkAuthListener: React.FC = () => {
-  const { isSignedIn } = useAuth();
+const ClerkAuthListener = () => {
+  const { isSignedIn , isLoaded } = useAuth();
   const { user } = useUser();
-  const setUser = useSetAtom(userStore.user);
+  const setUser = useSetAtom(userStore.AuthUser);
 
 	const handleSetUser = async (user: UserResource | null | undefined) => {
 		if (!user) return
-		const userRes = await SelectUserById(user.id);
+		const userRes = await AuthUserAction();
 		if (!userRes) return
 		setUser(userRes);
 	};
 
   useEffect(() => {
+    if (!isLoaded) return;
     if (isSignedIn && user) {
       handleSetUser(user)
         
@@ -28,7 +30,8 @@ const ClerkAuthListener: React.FC = () => {
     }
   }, [isSignedIn, user, setUser]);
 
-  return null;
+  return <></>;
+
 };
 
 export default ClerkAuthListener;
\ No newline at end of file
diff --git a/src/services/realtime/AblyClient.tsx b/src/services/realtime/AblyClient.tsx
index 174b58c..afa9151 100644
--- a/src/services/realtime/AblyClient.tsx
+++ b/src/services/realtime/AblyClient.tsx
@@ -1,20 +1,22 @@
 import * as Ably from 'ably';
-import { AblyProvider, ChannelProvider } from 'ably/react';
-import { config } from 'dotenv';
+// import { AblyProvider, ChannelProvider } from 'ably/react';
+// import { config } from 'dotenv';
 
 if (!process.env.ABLY_API_KEY) {
   throw new Error('ABLY_API_KEY is not defined in the environment variables');
 }
 
 export const AblyClient = new Ably.Realtime({ key: process.env.ABLY_API_KEY});
+export const AblyClientRest = new Ably.Rest({ key: process.env.ABLY_API_KEY });
 
 
-export default function AblyChannelProviderWrapper({ children , channelName }: { children: React.ReactNode , channelName: string }) {
-    return (
-      <AblyProvider client={AblyClient}>
-        <ChannelProvider channelName={channelName}>
-          {children}
-        </ChannelProvider>
-      </AblyProvider>
-    );
-  }
+
+// export default function AblyChannelProviderWrapper({ children , channelName }: { children: React.ReactNode , channelName: string }) {
+//     return (
+//       <AblyProvider client={AblyClient}>
+//         <ChannelProvider channelName={channelName}>
+//           {children}
+//         </ChannelProvider>
+//       </AblyProvider>
+//     );
+//   }
diff --git a/src/store/chat/chatStore.ts b/src/store/chat/chatStore.ts
index 5c4cd04..76f2ea1 100644
--- a/src/store/chat/chatStore.ts
+++ b/src/store/chat/chatStore.ts
@@ -1,9 +1,13 @@
-import { SelectChat } from "@/src/db/schema";
+import { SelectChat, SelectUserChat } from "@/src/db/schema";
 import { atom } from "jotai";
 
 
 const myChats = atom<SelectChat[]>([])
+const currentChat = atom<SelectChat | null>(null)
+const switchedChat = atom<SelectChat | null>(null)
 
 export const chatStore = {
-    myChats
+    myChats,
+    currentChat,
+    switchedChat
 }
\ No newline at end of file
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..94e6b84
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,5 @@
+
+
+import { createStore } from "jotai";
+
+export const Store = createStore()
\ No newline at end of file
diff --git a/src/store/user/userStore.ts b/src/store/user/userStore.ts
index 47a9c0c..b7f4965 100644
--- a/src/store/user/userStore.ts
+++ b/src/store/user/userStore.ts
@@ -4,10 +4,10 @@ import { atom } from 'jotai'
 
 
 const Iam = atom<SelectUser | null>(null)
-const user = atom<SelectUser | null>(null)
+const AuthUser = atom<SelectUser | null>(null)
 
 export const userStore = {
     Iam,
-    user
+    AuthUser
 }
 
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 6b5d06b..2808860 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -1,4 +1,4 @@
-export const pageMeta = [
+const pageMeta = [
   {
     id: "home",
     url: "/",
@@ -77,6 +77,8 @@ export const pageMeta = [
     title: "Projects",
     description: "projects"
   }
-]
+];
+
+export default pageMeta;
 
 export type PageMeta = typeof pageMeta[0]