diff --git a/README.md b/README.md
index 3774656..d8d6477 100644
--- a/README.md
+++ b/README.md
@@ -1,91 +1,78 @@
-# React Developer Assignment: Cross-Tab Collaboration Dashboard
+# Cross-Tab Collaboration Dashboard
-## Time Limit: 3 hours
+A real-time collaboration dashboard built in React that synchronizes user activity, chat, and a shared counter across multiple browser tabs using [react-broadcast-sync](https://www.npmjs.com/package/react-broadcast-sync).
+Reconding is inside the main route of the project
-You are expected to focus on the core requirements. Bonus features are optional and may be partially implemented if time allows.
+---
+
+## Features Implemented
-## Overview
+### 1. Custom Hook: `useCollaborativeSession`
-Build a real-time collaboration dashboard that synchronizes user activity across multiple browser tabs using the
-react-broadcast-sync library.
+- Manages all collaboration state and logic.
+- Tracks:
+ - `users`: currently active users across all tabs.
+ - `messages`: chat messages synchronized across tabs.
+ - `counter`: shared counter value.
+ - `typingUsers`: users currently typing.
+- Exposes actions:
+ - `sendMessage(text, expireInMs)`: sends a chat message, optionally expiring after a set time.
+ - `deleteMessage(id)`: deletes **your own** messages across tabs.
+ - `updateCounter(delta)`: increments or decrements the shared counter.
+ - `startTyping()` / `stopTyping()`: broadcast typing indicators.
+ - `joinSession()` / `leaveSession()`: handle user presence.
+- Handles **multi-tab duplicate prevention** and **message expiration**.
---
-## Setup Instructions
+### 2. User Presence System
-1. Create a new React project using any setup you prefer (e.g., Vite, CRA, Next.js)
-2. Install the required package:
- ```bash
- npm install react-broadcast-sync
- ```
-3. Use any styling approach (CSS, Tailwind, MUI, etc.)
+- Detects and displays active users per tab.
+- Shows username and last activity timestamp.
+- Detects join/leave events and broadcasts updates.
+- Prevents duplicate entries using `USER_SYNC` and `USER_REQUEST_SYNC`.
---
-## Requirements - Mandatory
+### 3. Shared Counter
-### 1. Custom Hook
-Create a custom hook called `useCollaborativeSession` that:
-- Sets up the broadcast channel
-- Manages internal state for users, chat, counter
-- Exposes state and actions:
- - `users`, `messages`, `counter`
- - `sendMessage()`, `updateCounter()`, `markTyping()`, etc.
-- Internally uses `react-broadcast-sync` to handle cross-tab communication
+- Fully synchronized across all tabs.
+- Any user can increment or decrement the value.
+- Displays who last updated the counter.
+- Broadcasted updates trigger system messages across tabs.
+- Multi-tab safe using `processedCounterMsgIds`.
-### 2. User Presence System
-- Detect and display active users (based on tabs)
-- Show a user list with:
- - Username or ID (you can generate random names if needed)
- - Last activity timestamp
-- Detect and visually indicate when a user joins or leaves
+---
-### 3. Shared Counter
-- Counter that stays synchronized across all tabs
-- Any user can increment/decrement the value
-- Show which user performed the last action
-- Display timestamp of last action
-
-### 4. Real-time Chat
-- Text area for message writing
-- Show typing indicators when users are actively typing
-- Synchronize conversation content across all tabs
-- For each message display which user sent it and its timestamp
-- Allow users to delete **their own** messages from the chat with syncing across tabs
-- Allow users to send a messages with expiration
-
-### 5. Technical Standards
-- Use proper error handling and cleanup
-- Use TypeScript or well-typed PropTypes
-- Abstract logic into reusable components/hooks
-- Keep the code modular, readable, and clean
-- Synchronize existing state on page load (rehydrate from current messages/users)
+### 4. Real-Time Chat
+
+- Messages include `userName`, `userId`, and `timestamp`.
+- Typing indicators for other users.
+- Messages can **expire automatically** (e.g., 5-second self-destruct).
+- Users can delete **their own messages**, synced across tabs.
+- Prevents infinite loops or duplicates across tabs.
---
-## Bonus Features
-- Theme sync across tabs (light/dark mode)
-- Include debouncing for frequent updates
-- Implement loading states
-- Add responsive layout
-- Activity feed showing recent actions
-- User avatar system
-- Focus/cursor position indicators
+### 5. UI Features
+
+- Messages have **avatars** color-coded by user ID.
+- Own messages show a **delete button**.
+- Smooth scroll to latest message.
+- Typing indicators displayed at the bottom.
+- Responsive message bubbles for "me" vs others.
---
-## Deliverables
-1. Complete source code
-2. README with setup instructions and implementation notes
-3. Working demo (open multiple tabs to test)
+### 6. Technical Standards
+
+- Written in **TypeScript**.
+- Logic separated into **custom hook** and **components** (`MessageContainer`, etc.).
---
-## Evaluation Criteria
-- Proper use and integration of `react-broadcast-sync`
-- Correct and clean custom hook abstraction
-- Working real-time sync across tabs
-- Well-structured and maintainable code
-- Functional and user-friendly UI
-- Handling of edge cases (e.g., expired messages, tab close)
-- Bonus points for creative features, polish, or great UX
+## How to Run the Project
+
+pnpm dev
+
+### 1. Clone or create the project:
diff --git a/app/components/ChatInputBar.tsx b/app/components/ChatInputBar.tsx
new file mode 100644
index 0000000..0c70df8
--- /dev/null
+++ b/app/components/ChatInputBar.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { ChatInputBarProps } from "../types/inputbar";
+
+export default function ChatInputBar({
+ text,
+ setText,
+ expireTime,
+ setExpireTime,
+ handleSend,
+ startTyping,
+ stopTyping,
+}: ChatInputBarProps) {
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === "Enter" && !e.shiftKey) {
+ e.preventDefault();
+ handleSend();
+ }
+ };
+
+ return (
+