diff --git a/apps/X/app/message/page.tsx b/apps/X/app/message/page.tsx
new file mode 100644
index 0000000..e55db55
--- /dev/null
+++ b/apps/X/app/message/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Message</div>;
+}
diff --git a/apps/X/app/page.tsx b/apps/X/app/page.tsx
index 35d8c22..c8b67c8 100644
--- a/apps/X/app/page.tsx
+++ b/apps/X/app/page.tsx
@@ -6,7 +6,6 @@ const Page = async () => {
   try {
     const session = await getServerSession(authOptions);
     console.log("Full session object:", JSON.stringify(session, null, 2));
-    console.log("UseriD test>>>>>>>>>>>>>>", session?.user?.id);
 
     if (!session?.user?.id) {
       console.log("No valid session, redirecting to signin");
diff --git a/apps/X/src/components/ui/Post/Post.tsx b/apps/X/src/components/ui/Post/Post.tsx
new file mode 100644
index 0000000..2096881
--- /dev/null
+++ b/apps/X/src/components/ui/Post/Post.tsx
@@ -0,0 +1,5 @@
+export const Post = (IsOpen: boolean) => {
+  return <div>
+    
+  </div>;
+};
diff --git a/apps/X/src/components/ui/Post/TopPost.tsx b/apps/X/src/components/ui/Post/TopPost.tsx
index 3a086a6..eb7fa5b 100644
--- a/apps/X/src/components/ui/Post/TopPost.tsx
+++ b/apps/X/src/components/ui/Post/TopPost.tsx
@@ -49,7 +49,7 @@ export const TopPost = () => {
           </div>
           <div>
             <Input
-              className="ffocus:outline-none focus-visible:ring-0 border-none"
+              className="focus:outline-none focus-visible:ring-0 border-none"
               placeholder="What is hanppening?!"
               onChange={handelChanges}
               value={postInput}
@@ -59,40 +59,84 @@ export const TopPost = () => {
         </div>
         <div className="flex items-center ml-12">
           <div className="flex gap-4 text-blue-500 text-lg cursor-pointer">
-            <div>
-              <TbPhotoSquareRounded />
+            <div className="relative group hover:bg-neutral-900 rounded-xl ">
+              <div>
+                <TbPhotoSquareRounded />
+              </div>
+              <span className="absolute left-1/2 -translate-x-1/2  text-sm bg-gray-800 text-white px-2 py-1 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity">
+                Media
+              </span>
             </div>
-            <div>
-              <MdOutlineGifBox />
+            <div className="relative group hover:bg-neutral-900 rounded-xl">
+              <div>
+                <MdOutlineGifBox />
+              </div>
+              <span className="absolute left-1/2 -translate-x-1/2  text-sm bg-gray-800 text-white px-2 py-1 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity">
+                GIF
+              </span>
             </div>
-            <div>
-              <X_Icon />
+            <div className="relative group hover:bg-neutral-900 rounded-xl">
+              <div>
+                <X_Icon />
+              </div>
+              <span className="absolute left-1/2 -translate-x-1/2  text-sm bg-gray-800 text-white px-2 py-1 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity">
+                GROK
+              </span>
             </div>
-            <div>
-              <HiMiniListBullet />
+            <div className="relative group hover:bg-neutral-900 rounded-xl">
+              <div>
+                <HiMiniListBullet />
+              </div>
+              <span className="absolute left-1/2 -translate-x-1/2  text-sm bg-gray-800 text-white px-2 py-1 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity">
+                Poll
+              </span>
             </div>
-            <div>
-              <GrEmoji />
+            <div className="relative group hover:bg-neutral-900 rounded-xl">
+              <div>
+                <GrEmoji />
+              </div>
+              <span className="absolute left-1/2 -translate-x-1/2  text-sm bg-gray-800 text-white px-2 py-1 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity">
+                Emoji
+              </span>
             </div>
-            <div>
-              <RiCalendarScheduleLine />
+            <div className="relative group hover:bg-neutral-900 rounded-xl">
+              <div>
+                <RiCalendarScheduleLine />
+              </div>
+              <span className="absolute left-1/2 -translate-x-1/2  text-sm bg-gray-800 text-white px-2 py-1 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity">
+                Schedule
+              </span>
             </div>
-            <div>
-              <IoLocationOutline />
+            <div className="relative group hover:bg-neutral-900 rounded-xl">
+              <div>
+                <IoLocationOutline />
+              </div>
+              <span className="absolute left-1/2 -translate-x-1/2  text-sm bg-gray-800 text-white px-2 py-1 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity">
+                Location
+              </span>
             </div>
-            <div>
-              <BsTypeBold />
+            <div className="relative group hover:bg-neutral-900 rounded-xl">
+              <div>
+                <BsTypeBold />
+              </div>
+              <span className="absolute left-1/2 -translate-x-1/2  text-sm bg-gray-800 text-white px-2 py-1 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity">
+                Bold
+              </span>
             </div>
-            <div>
-              <AiOutlineItalic />
+            <div className="relative group hover:bg-neutral-900 rounded-xl">
+              <div>
+                <AiOutlineItalic />
+              </div>
+              <span className="absolute left-1/2 -translate-x-1/2  text-sm bg-gray-800 text-white px-2 py-1 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity">
+                Italic
+              </span>
             </div>
           </div>
-          <Button
-            onClick={handelClick}
-            className="ml-28 rounded-2xl font-semibold"
-          >
-            Post
-          </Button>
+          <div className="ml-auto">
+            <Button onClick={handelClick} className="rounded-2xl font-semibold">
+              Post
+            </Button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/apps/X/src/components/ui/home/CenterComp.tsx b/apps/X/src/components/ui/home/CenterComp.tsx
index 889c0c2..8b70ccf 100644
--- a/apps/X/src/components/ui/home/CenterComp.tsx
+++ b/apps/X/src/components/ui/home/CenterComp.tsx
@@ -2,7 +2,7 @@ import { TopHead, TopPost, TweetComp } from "..";
 
 export const CenterComp = () => {
   return (
-    <div>
+    <div className="">
       <div className="">
         <TopHead />
       </div>
@@ -11,8 +11,13 @@ export const CenterComp = () => {
       </div>
       <div className="">
         <TweetComp />
+        <TweetComp />
+        <TweetComp />
+        <TweetComp />
+        <TweetComp />
       </div>
     </div>
   );
 };
 //border border-slate-800 border-x-0
+//custom:w-11/12 w-max-96
diff --git a/apps/X/src/components/ui/home/HomeComp.tsx b/apps/X/src/components/ui/home/HomeComp.tsx
index 1937964..1182bab 100644
--- a/apps/X/src/components/ui/home/HomeComp.tsx
+++ b/apps/X/src/components/ui/home/HomeComp.tsx
@@ -2,31 +2,21 @@ import { CenterComp, HomeLeft, HomeRight } from "@/components/ui";
 
 export const HomeComp = () => {
   return (
-    <div>
-      <div></div>
-      <div className="grid grid-cols-6 ">
-        <div></div>
-        <div className="">
-          <HomeLeft />
-        </div>
-        <div className="flex mx-10">
-          <div className="border border-y-0 col-span-3 ">
+    <div className="relative">
+      <div className="flex h-full">
+        <div className="custom:w-96 w-10 custom:ml-24 ml-10"></div>
+        <div className="flex">
+          <div className="custom:px-10 px-2 mr-10 custom:m-0 custom:left-10 left-0">
+            <HomeLeft />
+          </div>
+          <div className="border border-y-0 custom:w-5/12 w-8/12 h-full overflow-y-hidden">
             <CenterComp />
           </div>
-          <div className="ml-10 col-span-2 ">
+          <div className="">
             <HomeRight />
           </div>
         </div>
       </div>
-      {/* <div className="">
-        <div className=""></div>
-        <div className="">
-          <HomeRight />
-        </div>
-        <div className=""></div>
-        <div className=""></div>
-        <div className=""></div>
-      </div> */}
       {/* border-slate-800 border border-y-0 h-screen */}
     </div>
   );
diff --git a/apps/X/src/components/ui/home/HomeLeft.tsx b/apps/X/src/components/ui/home/HomeLeft.tsx
index b8000a7..6d96e9b 100644
--- a/apps/X/src/components/ui/home/HomeLeft.tsx
+++ b/apps/X/src/components/ui/home/HomeLeft.tsx
@@ -6,112 +6,134 @@ import { FaRegBookmark } from "react-icons/fa";
 import { FaRegUser } from "react-icons/fa6";
 import { GoHome } from "react-icons/go";
 import { IoMdSearch } from "react-icons/io";
+import { TbOctagonPlus } from "react-icons/tb";
 import { MdOutlineMail } from "react-icons/md";
 import { RiGroupLine, RiNotification2Line } from "react-icons/ri";
 import { Button, UserAvatar, X_logo } from "..";
 import GrokIcon from "../Grok";
 import X_Icon from "../X_Icon";
+import Link from "next/link";
+import { useState } from "react";
 export const HomeLeft = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onPostClick = () => {
+    console.log("Click");
+    setIsOpen(!isOpen);
+  };
   return (
     <div>
       <div className="h-screen flex flex-col justify-between pt-6">
         <div className="flex flex-col items-end">
-          <div className="flex flex-col align-baseline">
-            <div>
-              <div className="mb-4 ml-4">
-                <X_logo />
-              </div>
+          <div className="flex flex-col ">
+            <div className="w-8 custom:w-full">
+              <Link href={"/home"}>
+                <div className="mb-4 ml-4">
+                  <X_logo />
+                </div>
+              </Link>
               <div className="flex items-center text-xl mb-3 ">
-                <div className="hover:bg-neutral-900 flex gap-4  hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
-                  <div className="text-2xl ">
-                    <GoHome />
+                <Link href={"/home"}>
+                  <div className="custom:hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
+                    <div className="text-2xl hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl">
+                      <GoHome />
+                    </div>
+                    <div className="custom:visible invisible">Home</div>
                   </div>
-                  Home
-                </div>
+                </Link>
               </div>
               <div className="flex items-center text-xl mb-3">
-                <div className="hover:bg-neutral-900 flex gap-4  hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2 items-center">
-                  <div className="text-2xl">
+                <div className="custom:hover:bg-neutral-900 flex gap-4  custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2 items-center">
+                  <div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
                     <IoMdSearch />
                   </div>
-                  Explore
+                  <div className="custom:visible invisible">Explore</div>
                 </div>
               </div>
               <div className="flex items-center text-xl mb-3">
-                <div className="hover:bg-neutral-900 flex gap-4  hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
-                  <div className="text-2xl">
+                <div className="custom:hover:bg-neutral-900 flex gap-4  custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2">
+                  <div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
                     <RiNotification2Line />
                   </div>
-                  Notifications
+                  <div className="custom:visible invisible">Notifications</div>
                 </div>
               </div>
               <div className="flex items-center text-xl mb-3">
-                <div className="hover:bg-neutral-900 flex gap-4  hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
-                  <div className="text-2xl">
+                <div className="custom:hover:bg-neutral-900 flex gap-4  custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2">
+                  <div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
                     <MdOutlineMail />
                   </div>
-                  Messages
+                  <div className="custom:visible invisible">Messages</div>
                 </div>
               </div>
               <div className="flex items-center text-xl mb-3">
-                <div className="hover:bg-neutral-900 flex gap-4  hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
-                  <div className="text-2xl">
+                <div className="custom:hover:bg-neutral-900 flex gap-4  custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2">
+                  <div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
                     <GrokIcon />
                   </div>
-                  Grok
+                  <div className="custom:visible invisible">Grok</div>
                 </div>
               </div>
               <div className="flex items-center text-xl mb-3">
-                <div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2 items-center">
-                  <div className="text-3xl">
+                <div className="custom:hover:bg-neutral-900 flex gap-4 custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2 items-center">
+                  <div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
                     <X_Icon />
                   </div>
-                  Premium
+                  <div className="custom:visible invisible">Premium</div>
                 </div>
               </div>
               <div className="flex items-center text-xl mb-3">
-                <div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
-                  <div className="text-2xl">
+                <div className="custom:hover:bg-neutral-900 flex gap-4 custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2">
+                  <div className="hover:bg-neutral-800 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
                     <FaRegBookmark />
                   </div>
-                  Bookmarks
+                  <div className="custom:visible invisible">Bookmarks</div>
                 </div>
               </div>
               <div className="flex items-center text-xl mb-3">
-                <div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
-                  <div className="text-2xl">
+                <div className="custom:hover:bg-neutral-900 flex gap-4 custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2">
+                  <div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
                     <RiGroupLine />
                   </div>
-                  Communities
+                  <div className="custom:visible invisible">Communities</div>
                 </div>
               </div>
               <div className="flex items-center text-xl mb-3">
-                <div className="hover:bg-neutral-900 flex gap-4  hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
-                  <div className="text-2xl">
+                <div className="custom:hover:bg-neutral-900 flex gap-4 custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2">
+                  <div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
                     <AiOutlineThunderbolt />
                   </div>
-                  Verified Orgs
+                  <div className="custom:visible invisible">Communities</div>
                 </div>
               </div>
               <div className="flex items-center text-xl mb-3">
-                <div className="hover:bg-neutral-900 flex gap-4  hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
-                  <div className="text-2xl">
+                <div className="custom:hover:bg-neutral-900 flex gap-4 custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2">
+                  <div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
                     <FaRegUser />
                   </div>
-                  Profile
+                  <div className="custom:visible invisible">Profile</div>
                 </div>
               </div>
-              <div className="flex items-center py-0.5 gap-4 text-xl mb-3">
-                <div className="hover:bg-neutral-900 flex gap-4  hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
-                  <div className="text-2xl">
+              <div className="flex items-center py-0.5 gap-4 text-xl">
+                <div className="custom:hover:bg-neutral-900 flex gap-4 custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2">
+                  <div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
                     <CgMoreO />
                   </div>
-                  More
+                  <div className="custom:visible invisible">More</div>
                 </div>
               </div>
-              <Button className="rounded-3xl w-full mt-6 px-20 py-6 font-semibold ">
-                Post
-              </Button>
+              <div className="">
+                <Button
+                  className="invisible custom:visible rounded-3xl w-full custom:mt-3 px-20 py-6 font-semibold"
+                  onClick={onPostClick}
+                >
+                  Post
+                </Button>
+                <TbOctagonPlus
+                  className="custom:hidden block text-4xl ml-3 cursor-pointer hover:bg-white hover:rounded-3xl hover:text-black "
+                  onClick={onPostClick}
+                />
+              </div>
             </div>
             <div className="mt-28">
               <div>
diff --git a/apps/X/tailwind.config.js b/apps/X/tailwind.config.js
index 5076d01..c8339c5 100644
--- a/apps/X/tailwind.config.js
+++ b/apps/X/tailwind.config.js
@@ -12,7 +12,7 @@ export default {
   theme: {
     extend: {
       screens: {
-        custom: "927px",
+        custom: "961px",
       },
       borderRadius: {
         lg: "var(--radius)",