diff --git a/apps/X/app/(pages)/post/page.tsx b/apps/X/app/(pages)/post/page.tsx
deleted file mode 100644
index 5869bbb..0000000
--- a/apps/X/app/(pages)/post/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-"use client"
-function page() {
-    return <div>This is the Post page</div>
-}
-export default page
\ No newline at end of file
diff --git a/apps/X/app/layout.tsx b/apps/X/app/layout.tsx
index 9ef1e65..f1c2a4c 100644
--- a/apps/X/app/layout.tsx
+++ b/apps/X/app/layout.tsx
@@ -26,7 +26,9 @@ export default function RootLayout({
   return (
     <html lang="en" className="dark">
       <Provider>
-        <body className={`${geistSans.variable} ${geistMono.variable} m-0`}>
+        <body
+          className={`${geistSans.variable} ${geistMono.variable} m-0 bg-black`}
+        >
           <RouteGard>{children}</RouteGard>
         </body>
       </Provider>
diff --git a/apps/X/src/components/TopHeader.tsx b/apps/X/src/components/TopHeader.tsx
index 4ffe690..8570cfd 100644
--- a/apps/X/src/components/TopHeader.tsx
+++ b/apps/X/src/components/TopHeader.tsx
@@ -20,7 +20,7 @@ export const TopHeader = () => {
         </div>
         <div>
           <p className="font-bold text-xl">{session?.user?.name}</p>
-          <p className="text-gray-500">28.3K posts</p>
+          <p className="text-gray-500">33.5K posts</p>
         </div>
       </div>
     </div>
diff --git a/apps/X/src/components/ui/Post/Post.tsx b/apps/X/src/components/ui/Post/Post.tsx
deleted file mode 100644
index 2096881..0000000
--- a/apps/X/src/components/ui/Post/Post.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export const Post = (IsOpen: boolean) => {
-  return <div>
-    
-  </div>;
-};
diff --git a/apps/X/src/components/ui/Post/PostDialogComp.tsx b/apps/X/src/components/ui/Post/PostDialogComp.tsx
new file mode 100644
index 0000000..bc106f5
--- /dev/null
+++ b/apps/X/src/components/ui/Post/PostDialogComp.tsx
@@ -0,0 +1,58 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import axios from "axios";
+import { useSession } from "next-auth/react";
+import { useState } from "react";
+export const PostDialogComp = () => {
+  const { data: session } = useSession();
+  const [userInput, setUserInput] = useState("");
+
+  const handleChange = (e: any) => {
+    console.log(e.target.value);
+    setUserInput(e.target.value);
+  };
+  const handleClick = async () => {
+    if (!session?.user?.id) {
+      console.error("No user Fount");
+      return;
+    }
+    try {
+      const res = await axios.post("/api/post", { content: userInput });
+      console.log("This is the Response :=>", res);
+      setUserInput(" ");
+    } catch (error) {
+      console.log("Error while sending Tweet");
+    }
+  };
+
+  return (
+    <div>
+      <div className="fixed inset-0 flex items-center justify-center ">
+        <div className="bg-black p-6 rounded-lg shadow-lg w-full max-w-lg">
+          <div className="mt-4">
+            <Avatar>
+              <AvatarImage
+                src={session?.user?.image || ""}
+                alt={session?.user?.name || "User"}
+              />
+              <AvatarFallback>{session?.user?.name?.[0]}</AvatarFallback>
+            </Avatar>
+          </div>
+          <textarea
+            onChange={handleChange}
+            placeholder="What's happening?"
+            className="w-full ml-11 h-32 bg-black border-none p-3 rounded-lg text-white focus:outline-none resize-none"
+          />
+          <hr />
+          <div className="flex justify-end mt-4 ">
+            <button
+              className="bg-white px-6 py-2 rounded-full text-black font-bold"
+              onClick={handleClick}
+            >
+              Post
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/X/src/components/ui/Post/TopPostHome.tsx b/apps/X/src/components/ui/Post/TopPostHome.tsx
index e673ddf..0bafca1 100644
--- a/apps/X/src/components/ui/Post/TopPostHome.tsx
+++ b/apps/X/src/components/ui/Post/TopPostHome.tsx
@@ -19,7 +19,7 @@ export const TopPost = () => {
   const [postInput, setPostInput] = useState("");
   const { data: session } = useSession();
 
-  const handelChanges = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handelChanges = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setPostInput(e.target.value);
   };
   const handelClick = async () => {
@@ -31,7 +31,6 @@ export const TopPost = () => {
     try {
       const res = await axios.post("/api/post", { content: postInput });
       console.log("Post saved successfully:", res.data);
-
       setPostInput("");
     } catch (error) {
       console.log("Errro while Posting", error);
@@ -40,21 +39,29 @@ export const TopPost = () => {
   return (
     <div>
       <div className="p-3 border border-x-0">
-        <div className="flex">
+        <div className="flex ">
           <div>
             <UserAvatar />
           </div>
           <div>
-            <Input
+            {/* <Input
               className="focus:outline-none focus-visible:ring-0 border-none"
               placeholder="What is hanppening?!"
               onChange={handelChanges}
               value={postInput}
               name="Post"
+            /> */}
+            <textarea
+              placeholder="What's happening?"
+              className="focus:outline-none focus-visible:ring-0 w-96  ml-3 mt-3 bg-transparent border-none p-3 rounded-lg text-white resize-none overflow-auto "
+              value={postInput}
+              onChange={handelChanges}
+              name="Post"
             />
           </div>
         </div>
-        <div className="flex items-center ml-12">
+        <hr />
+        <div className="flex items-center ml-12 mt-2">
           <div className="flex gap-4 text-blue-500 text-lg cursor-pointer">
             <div className="relative group hover:bg-neutral-900 rounded-xl ">
               <div>
diff --git a/apps/X/src/components/ui/Profile/UserInfo.tsx b/apps/X/src/components/ui/Profile/UserInfo.tsx
index 2999b72..834db7a 100644
--- a/apps/X/src/components/ui/Profile/UserInfo.tsx
+++ b/apps/X/src/components/ui/Profile/UserInfo.tsx
@@ -12,6 +12,7 @@ import { PiBalloon } from "react-icons/pi";
 import { Button } from "../button";
 import { TweetComp } from "../TweetComp";
 import { NextResponse } from "next/server";
+import { LoaderComp } from "@/components/LoaderComp";
 
 interface UserDataProps {
   DOB: string;
@@ -280,9 +281,17 @@ export const UserInfo = () => {
       <br />
       <hr />
       <div>
-        {userTweet.map((tweet) => (
-          <TweetComp key={tweet.id} tweet={tweet} />
-        ))}
+        {loading ? (
+          <div className="flex items-center justify-center h-screen">
+            <LoaderComp />
+          </div>
+        ) : (
+          <div>
+            {userTweet.map((tweet) => (
+              <TweetComp key={tweet.id} tweet={tweet} />
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/apps/X/src/components/ui/TweetComp.tsx b/apps/X/src/components/ui/TweetComp.tsx
index 95e03e8..fc01f78 100644
--- a/apps/X/src/components/ui/TweetComp.tsx
+++ b/apps/X/src/components/ui/TweetComp.tsx
@@ -36,7 +36,7 @@ export const TweetComp = ({ tweet }: TweetProps) => {
   return (
     <div>
       <div>
-        <div className="border border-slate-800 border-spacing-x-0.5">
+        <div className="border border-slate-800 border-spacing-x-0.5 hover:bg-neutral-900/60 transition duration-400 cursor-pointer">
           <div className="flex p-3 gap-2 w-full">
             <div className="mt-1 cursor-pointer">
               <Avatar>
@@ -60,9 +60,9 @@ export const TweetComp = ({ tweet }: TweetProps) => {
                     })}
                   </p>
                 </div>
-                <div className="flex justify-end cursor-pointer hover:bg-black hover:rounded-2xl pr-3">
+                <div className="flex justify-end cursor-pointer hover:bg-neutral-900/40 hover:rounded-2xl pr-3">
                   <Popover>
-                    <PopoverTrigger className="font-bold text-slate-500">
+                    <PopoverTrigger className="font-bold text-slate-500 hover:bg-blue-500/30 hover:text-blue-500 rounded-full h-8 w-8 text-center transition duration-200">
                       ...
                     </PopoverTrigger>
                     <PopoverContent>
diff --git a/apps/X/src/components/ui/dialog.tsx b/apps/X/src/components/ui/dialog.tsx
index 1647513..d0aafb9 100644
--- a/apps/X/src/components/ui/dialog.tsx
+++ b/apps/X/src/components/ui/dialog.tsx
@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -21,13 +21,13 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/60  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -45,13 +45,13 @@ const DialogContent = React.forwardRef<
     >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
+        {/* <X className="h-4 w-4" /> */}
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
   className,
@@ -64,8 +64,8 @@ const DialogHeader = ({
     )}
     {...props}
   />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
   className,
@@ -78,8 +78,8 @@ const DialogFooter = ({
     )}
     {...props}
   />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -93,8 +93,8 @@ const DialogTitle = React.forwardRef<
     )}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -105,8 +105,8 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
@@ -119,4 +119,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
+};
diff --git a/apps/X/src/components/ui/home/HomeComp.tsx b/apps/X/src/components/ui/home/HomeComp.tsx
index e7197b1..e7c926c 100644
--- a/apps/X/src/components/ui/home/HomeComp.tsx
+++ b/apps/X/src/components/ui/home/HomeComp.tsx
@@ -2,7 +2,7 @@ import { CenterComp, HomeLeft, HomeRight } from "@/components/ui";
 
 export const HomeComp = () => {
   return (
-    <div className="flex h-screen overflow-y-auto">
+    <div className="flex h-screen justify-center overflow-y-auto">
       <div className="custom:w-96 w-10 custom:ml-24 ml-16 h-screen sticky top-0 flex-shrink-0 mr-7 custom:mr-10">
         <HomeLeft />
       </div>
diff --git a/apps/X/src/components/ui/home/HomeLeft.tsx b/apps/X/src/components/ui/home/HomeLeft.tsx
index 2dc7645..3eb5f14 100644
--- a/apps/X/src/components/ui/home/HomeLeft.tsx
+++ b/apps/X/src/components/ui/home/HomeLeft.tsx
@@ -16,14 +16,22 @@ import { TbOctagonPlus } from "react-icons/tb";
 import { Button, X_logo } from "..";
 import GrokIcon from "../Grok";
 import X_Icon from "../X_Icon";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { PostDialogComp } from "../Post/PostDialogComp";
 
 export const HomeLeft = () => {
   const router = useRouter();
   const { data: session } = useSession();
 
   const onPostClick = () => {
-    console.log("Click");
-    router.push("/post");
+    // router.push("/post");
   };
   return (
     <div>
@@ -38,8 +46,8 @@ export const HomeLeft = () => {
               </Link>
               <div className="flex items-center text-xl mb-3 ">
                 <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">
+                  <div className="custom:hover:bg-neutral-900/40 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/40 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl">
                       <GoHome />
                     </div>
                     <div className="custom:visible invisible">Home</div>
@@ -48,8 +56,8 @@ export const HomeLeft = () => {
               </div>
               <div className="flex items-center text-xl mb-3">
                 <Link href={"/explore"}>
-                  <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">
+                  <div className="custom:hover:bg-neutral-900/40 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/40 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
                       <IoMdSearch />
                     </div>
                     <div className="custom:visible invisible">Explore</div>
@@ -57,24 +65,24 @@ export const HomeLeft = () => {
                 </Link>
               </div>
               <div className="flex items-center text-xl mb-3">
-                <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">
+                <div className="custom:hover:bg-neutral-900/40 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/40 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
                     <RiNotification2Line />
                   </div>
                   <div className="custom:visible invisible">Notifications</div>
                 </div>
               </div>
               <div className="flex items-center text-xl mb-3">
-                <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">
+                <div className="custom:hover:bg-neutral-900/40 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/40 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
                     <MdOutlineMail />
                   </div>
                   <div className="custom:visible invisible">Messages</div>
                 </div>
               </div>
               <div className="flex items-center text-xl mb-3">
-                <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">
+                <div className="custom:hover:bg-neutral-900/40 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/40 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
                     <GrokIcon />
                   </div>
                   <div className="custom:visible invisible">Grok</div>
@@ -97,16 +105,16 @@ export const HomeLeft = () => {
                 </div>
               </div>
               <div className="flex items-center text-xl mb-3">
-                <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">
+                <div className="custom:hover:bg-neutral-900/40 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/40 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
                     <RiGroupLine />
                   </div>
                   <div className="custom:visible invisible">Communities</div>
                 </div>
               </div>
               <div className="flex items-center text-xl mb-3">
-                <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">
+                <div className="custom:hover:bg-neutral-900/40 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/40 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
                     <AiOutlineThunderbolt />
                   </div>
                   <div className="custom:visible invisible">Communities</div>
@@ -114,8 +122,8 @@ export const HomeLeft = () => {
               </div>
               <div className="flex items-center text-xl mb-3">
                 <Link href={`/${session?.user?.username}`}>
-                  <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">
+                  <div className="custom:hover:bg-neutral-900/40 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/40 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
                       <FaRegUser />
                     </div>
                     <div className="custom:visible invisible">Profile</div>
@@ -123,24 +131,40 @@ export const HomeLeft = () => {
                 </Link>
               </div>
               <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">
+                <div className="custom:hover:bg-neutral-900/40 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/40 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
                     <CgMoreO />
                   </div>
                   <div className="custom:visible invisible">More</div>
                 </div>
               </div>
               <div className="">
-                <Button
+                {/* <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}
-                />
+                </Button> */}
+                <Dialog>
+                  <DialogTrigger className="invisible custom:visible rounded-3xl w-full custom:mt-3 px-20 py-3  font-semibold bg-white text-black items-start">
+                    Post
+                  </DialogTrigger>
+                  <DialogContent className="bg-black w-full">
+                    <PostDialogComp />
+                  </DialogContent>
+                </Dialog>
+
+                <Dialog>
+                  <DialogTrigger className="">
+                    <TbOctagonPlus
+                      className="custom:hidden block text-4xl ml-3 cursor-pointer hover:bg-white hover:rounded-3xl hover:text-black"
+                      onClick={onPostClick}
+                    />
+                  </DialogTrigger>
+                  <DialogContent className="bg-black w-full">
+                    <PostDialogComp />
+                  </DialogContent>
+                </Dialog>
               </div>
             </div>
             <div className="mt-28">
