diff --git a/src/app/Pages/feet/page.tsx b/src/app/Pages/feet/page.tsx
index ce519f6..b529280 100644
--- a/src/app/Pages/feet/page.tsx
+++ b/src/app/Pages/feet/page.tsx
@@ -10,22 +10,32 @@ import Navbar from "@/modal/Navbar";
 import Postbox from "@/modal/Postbox";
 import RightSidebar from "@/modal/RightSidebar";
 import Stories from "@/modal/Stories";
-import { collection, onSnapshot, orderBy, query } from "firebase/firestore";
+import { collection, onSnapshot, orderBy, query, where } from "firebase/firestore";
 import React, { useEffect, useState } from "react";
 
 function Feed({ userInfo }: any) {
-  const [logout, setLogout] = useState(true);
-  const [getPost, setGetPost] = useState<any>([]);
+  const [logout, setLogout] = useState<any>(true);
+  const [getPosts, setGetPosts] = useState<any>([]);
+  const [currentUserInfo, setCurrentUserInfo] = useState<any>(null)
   useEffect(() => {
     return onSnapshot(
-      query(collection(getInfo, "post"), orderBy("id", "desc")),
+      query(collection(getInfo, "posts"), orderBy("id", "desc")),
       (snapshot) => {
-        setGetPost(snapshot.docs);
+        setGetPosts(snapshot.docs);
       }
     );
   }, []);
 
-  console.log(getPost);
+  useEffect(()=>{
+    return onSnapshot(
+      query(collection(getInfo, `users/${userInfo?.uid}`)),
+      (snapshot)=> {
+        setCurrentUserInfo(snapshot.docs)
+      }
+    );
+  }, [userInfo])
+
+  console.log(getPosts);
   return (
     <div>
       <FeetContent>
@@ -35,8 +45,12 @@ function Feed({ userInfo }: any) {
         <FeetContainer>
           <PostHolder>
             <Stories />
-            <Postbox userInfo={userInfo} />
-            <FeedCard />
+            <Postbox
+              userInfo={userInfo}
+              getPosts={getPosts}
+              currentUserInfo={currentUserInfo}
+            />
+            <FeedCard getPosts={getPosts} currentUserInfo={currentUserInfo} />
           </PostHolder>
           <RightSidebar />
         </FeetContainer>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4b4f503..bf240e2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -79,12 +79,14 @@ export default function Home() {
         </LeftHolder>
         <RightForm onSubmit={handleLogin}>
           <Input
+          type="email"
             placeholder="Email or phone number"
             onChange={(e) => {
               setData((prev) => ({ ...prev, email: e.target.value }));
             }}
           />
           <Input
+          type="password"
             placeholder="Password"
             onChange={(e) => {
               setData((prev) => ({ ...prev, password: e.target.value }));
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
index cff726a..b065322 100644
--- a/src/context/AuthContext.tsx
+++ b/src/context/AuthContext.tsx
@@ -17,11 +17,7 @@ export const useAuth = () => useContext(AuthContext);
 const app = initFirebase()
 const auth = getAuth(app);
 
-export const AuthContextPRovider = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
+export const AuthContextPRovider = ({children}: {children: React.ReactNode}) => {
   const [user, setUser] = useState<any>(null);
   const [isLoading, setIsLoading] = useState(true);
   useEffect(() => {
diff --git a/src/modal/FeedCard.tsx b/src/modal/FeedCard.tsx
index 4f6ca82..0f5ad86 100644
--- a/src/modal/FeedCard.tsx
+++ b/src/modal/FeedCard.tsx
@@ -1,3 +1,6 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @next/next/no-img-element */
+"use client";
 import { FeedCards } from "@/Components/Organism";
 import ProfilePicture from "../assets/images/persons/5.jpeg";
 /* import { Post } from "../assets/Dommydata"; */
@@ -49,8 +52,17 @@ import {
 
 import Liked from "../assets/images/like.png";
 import Loved from "../assets/images/heart.png";
-import { CSSProperties, useRef, useState } from "react";
+import { CSSProperties, useEffect, useRef, useState } from "react";
 import { Submit__comments } from "@/Components/Atoms/IconsAtoms";
+import {
+  collection,
+  deleteDoc,
+  doc,
+  onSnapshot,
+  setDoc,
+} from "firebase/firestore";
+import { getInfo } from "@/firebase/config";
+import { useAuth } from "@/context/AuthContext";
 
 interface ImgProps {
   width: any;
@@ -58,11 +70,12 @@ interface ImgProps {
   style?: CSSProperties;
 }
 FeedMainImg;
-function FeedCard({}) {
+function FeedCard({ getPosts }: any) {
+  // function FeedCard() {
 
-  const[like, setLike] = useState(1)
-  const[isLike, setIslike] = useState(false)
-   const[liked, setLiked]= useState(false) 
+  const { user } = useAuth();
+  const [likes, setLikes] = useState([]);
+  const [liked, setLiked] = useState(false);
 
   const [comment, setComment] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -71,20 +84,39 @@ function FeedCard({}) {
     setComment((prev) => !prev);
   };
 
+  useEffect(() => {
+    const unsubscribe = onSnapshot(
+      collection(getInfo, "posts", getPosts[0].id, "likes"),
+      (snapshot: any) => setLikes(snapshot.docs)
+    );
+  }, [getPosts[0].id]);
+
+  useEffect(() => {
+    setLiked(
+      likes.findIndex((like: { id: any }) => like?.id === user?.uid) !== -1
+    );
+  }, [likes]);
+
   const closeComment = () => {
     setComment(false);
   };
 
   const handleInputChange = (event: any) => {
     setInputValue(event.target.value);
-    console.log(inputValue)
+    console.log(inputValue);
   };
 
-  const handlelike = () => {
-    setLike( isLike ? like-1: like+1)
-    setIslike(!isLike)
-    setLiked(prev => !prev)
-  }
+  const handlelike = async () => {
+    if (liked) {
+      await deleteDoc(
+        doc(getInfo, "posts", getPosts[0].id, "likes", user?.uid)
+      );
+    } else {
+      await setDoc(doc(getInfo, "posts", getPosts[0].id, "likes", user?.uid), {
+        currentUser: user?.displayName,
+      });
+    }
+  };
 
   return (
     <FeedCards>
@@ -116,20 +148,26 @@ function FeedCard({}) {
           <p>Every moment is a fresh beginning.</p>
         </Feedpost__message>
         <FeedMainImg>
-          <Image src={Snoop} alt="snoop" style={MainPis} />
+          <img
+            src={getPosts[0]?.data()?.fileUrl}
+            alt="snoop"
+            style={MainPis}
+            width={50}
+            height={50}
+          />
         </FeedMainImg>
         <FeedPost__bottom>
           <PostBottom>
             <Image src={Liked} alt="gh" height={30} width={30} />
             <Image src={Loved} alt="gh" height={30} width={30} />
-            <span>{like}</span>
+            <span>{likes}</span>
           </PostBottom>
           <p>45 comments ...</p>
         </FeedPost__bottom>
         <Feed__multimedia>
           <Multi__smallcontainers onClick={() => handlelike()}>
             <p>
-              <LikedPost liked={liked}/>
+              <LikedPost liked={liked} />
               Like
             </p>
           </Multi__smallcontainers>
@@ -142,9 +180,8 @@ function FeedCard({}) {
             <p>Share</p>
           </Multi__smallcontainers>
         </Feed__multimedia>
-        
+
         {comment && (
-          
           <Comment__set>
             <Image
               src={ProfilePicture}
@@ -153,7 +190,7 @@ function FeedCard({}) {
               margin-rigth="22px"
               border-radius="50%"
             />
-            
+
             <CommentWrapper>
               <Whappys />
               <CommentInput
@@ -161,7 +198,7 @@ function FeedCard({}) {
                 placeholder="Write a public here comment"
               />
             </CommentWrapper>
-            <Submit__commentsbtn  onClick={handleInputChange}>
+            <Submit__commentsbtn onClick={handleInputChange}>
               <Submit__comments />
             </Submit__commentsbtn>
           </Comment__set>
@@ -170,5 +207,4 @@ function FeedCard({}) {
     </FeedCards>
   );
 }
-
 export default FeedCard;
diff --git a/src/modal/Modal.tsx b/src/modal/Modal.tsx
index f611ba7..6e0cdf1 100644
--- a/src/modal/Modal.tsx
+++ b/src/modal/Modal.tsx
@@ -44,10 +44,10 @@ function Register({
     month: "",
     year: "",
   });
-  const { user } = useAuth();
-  const id = user?.uid;
-  console.log(user);
-  const [custom, setCustom] = useState("");
+  const {user} = useAuth()
+  const id = user?.uid
+  console.log(user)
+  const [custom, setCustom] = useState("")
   const [data, setData] = useState({
     firstName: "",
     lastName: "",
@@ -55,13 +55,14 @@ function Register({
     password: "",
     gender: "",
   });
-  const router = useRouter();
+   const router = useRouter()
   const { signUp, confirmEmail } = useAuth();
 
   const handleSubmit = async (e: any) => {
     e.preventDefault();
-    const user = await addDoc(collection(getInfo, `users/${id}`), {
-      id: id,
+    await signUp(data.email, data.password);
+    const userInfo = await addDoc(collection(getInfo, `users/${user?.uid}`), {
+      id: user?.uid,
       firstName: data.firstName,
       lastName: data.lastName,
       email: data.email,
@@ -70,9 +71,9 @@ function Register({
       ).toDateString(),
       gender: data.gender,
     });
-    await signUp(data.email, data.password);
+    await signUp(data.email, data.password)
     router.push("/Pages/feet");
-    await confirmEmail();
+    await confirmEmail()
     console.log(user);
     setSee(!see);
   };
diff --git a/src/modal/PostPopForm.tsx b/src/modal/PostPopForm.tsx
index 0edbc79..5edf5c3 100644
--- a/src/modal/PostPopForm.tsx
+++ b/src/modal/PostPopForm.tsx
@@ -45,18 +45,17 @@ import { useAuth } from "@/context/AuthContext";
 import ProfilePicture from "../assets/images/lady.png"
 import AuthGaurd from "@/HOC/AuthGuard";
 
-const PostPopForm = ({ setOpen, userInfo }: any) => {
+const PostPopForm = ({ setOpen, currentUserInfo }: any) => {
   const [imageList, setImageList] = useState<any>([]);
   const [isOpen, setIsOpen] = useState(false);
-  const [imageUpload, setImageUpload] = useState();
   const [textValue, setTextValue] = useState("");
-  const [imgUrl, setImgUrl] = useState("")
+  const [imgUrl, setImgUrl] = useState<any>(null);
   const [data, setData] = useState({
     title: "",
     fileUrl: imageList,
   });
 
-    console.log(userInfo);
+  console.log(currentUserInfo);
 
   const handleSubmit = async (e: any) => {
     e.preventDefault();
@@ -65,7 +64,7 @@ const PostPopForm = ({ setOpen, userInfo }: any) => {
       title: data.title,
       fileUrl: imgUrl,
       doc: serverTimestamp(),
-      postedBy: userInfo?.uid,
+      postedBy: currentUserInfo?.uid,
       likes: 2,
     });
   };
@@ -101,7 +100,7 @@ const PostPopForm = ({ setOpen, userInfo }: any) => {
               />
             </Profile__holder>
             <StatusPreference>
-              <p>{userInfo?.displayName}</p>
+              <p>{currentUserInfo?.displayName}</p>
               <LockedDiv>
                 <Lock />
                 only me
@@ -111,14 +110,12 @@ const PostPopForm = ({ setOpen, userInfo }: any) => {
           </CreatePost__profile__prefence>
           <WriteStatus>
             <WrtieMind__status
-              placeholder={`What is your mind, ${userInfo?.displayName}?`}
+              placeholder={`What is your mind, ${currentUserInfo?.displayName}?`}
               onChange={handleTextChange}
             />
             {isOpen && (
               <Postpopupse
                 setIsOpen={setIsOpen}
-                setImageUpload={setImageUpload}
-                imageUpload={imageUpload}
                 setImageList={setImageList}
                 setImgUrl={setImgUrl}
               />
@@ -156,10 +153,10 @@ const PostPopForm = ({ setOpen, userInfo }: any) => {
               </List__li>
             </List>
           </PostDiv>
-
           <Postsub__Button active={!!textValue} onClick={handleSubmit}>
             Post
-          </Postsub__Button>https://www.youtube.com/watch?v=k4mjF4sPITE&pp=ygUYY2hhdCBhcHAgbmV4dGpzIGZpcmViYXNl
+          </Postsub__Button>
+          https://www.youtube.com/watch?v=k4mjF4sPITE&pp=ygUYY2hhdCBhcHAgbmV4dGpzIGZpcmViYXNl
         </PopForm>
       </Bg>
     </>
diff --git a/src/modal/Postbox.tsx b/src/modal/Postbox.tsx
index a50353b..85866e8 100644
--- a/src/modal/Postbox.tsx
+++ b/src/modal/Postbox.tsx
@@ -19,7 +19,7 @@ import { useState } from "react";
 
 import { ImageStyle, ImageIcons } from "@/Components/Atoms/Atoms";
 
-const Postbox = ({ userInfo }: any) => {
+const Postbox = ({ userInfo, getPosts, currentUserInfo }: any) => {
   const [open, setOpen] = useState(false);
   const handlesub = (e: any) => {
     e.preventDefault();
@@ -27,7 +27,9 @@ const Postbox = ({ userInfo }: any) => {
 
   return (
     <PostForm>
-      {open && <PostPopForm setOpen={setOpen} userInfo={userInfo} />}
+      {open && (
+        <PostPopForm setOpen={setOpen} currentUserInfo={currentUserInfo} />
+      )}
 
       <PostForm__innerContainer>
         <Onyourmind>
@@ -42,7 +44,7 @@ const Postbox = ({ userInfo }: any) => {
           <Mind__input
             onClick={() => setOpen(true)}
             type="text"
-            placeholder="What is your mind, Bata?"
+            placeholder={`What is your mind, ${currentUserInfo?.firstName}?`}
           />
         </Onyourmind>
         <Multi__media>
diff --git a/src/modal/Postpopupse.tsx b/src/modal/Postpopupse.tsx
index e81cb32..42cd697 100644
--- a/src/modal/Postpopupse.tsx
+++ b/src/modal/Postpopupse.tsx
@@ -16,44 +16,54 @@ import {
   UploadFile__cont,
 } from "@/Components/Molecules";
 import { PopupHiddenCont } from "@/Components/Organism";
-import { storage } from "@/firebase/config";
+import { getInfo, storage } from "@/firebase/config";
 import AuthGaurd from "@/HOC/AuthGuard";
-import { getDownloadURL, listAll, ref, uploadBytes } from "firebase/storage";
-import { useEffect } from "react";
+import { doc, updateDoc } from "firebase/firestore";
+import {
+  getDownloadURL,
+  listAll,
+  ref,
+  uploadBytes,
+  uploadString,
+} from "firebase/storage";
+import { useEffect, useState } from "react";
 import { v4 } from "uuid";
 
-const Postpopupse = ({
-  setIsOpen,
-  setImageUpload,
-  imageUpload,
-  setImageList,
-  setImgUrl,
-  userInfo
-}: any) => {
+const Postpopupse = ({ setIsOpen, setImageList, userInfo }: any) => {
   const imageListRef = ref(storage, "posts/");
-  const uploadImage = (e: any) => {
+  const [imageUpload, setImageUpload] = useState<any>(null);
+  const uploadImage = async (e: any) => {
     e.preventDefault();
-    if (imageUpload == null) return;
-    const imageRef = ref(storage, `posts/${userInfo?.uid}/${v4()}`);
-    uploadBytes(imageRef, imageUpload).then((snapshot) => {
-      getDownloadURL(snapshot.ref).then((url) => {
-        setImgUrl(url);
-        setImageList((prev: []) => [...prev, url]);
+    const imageRef = ref(storage, `posts/${userInfo?.uid}/image`);
+    if (imageUpload) {
+      await uploadString(imageRef, imageUpload, "data_url").then(async () => {
+        const downloadUrl = await getDownloadURL(imageRef);
+        await updateDoc(doc(getInfo, "post", userInfo?.uid), {
+          image: downloadUrl,
+        });
       });
-      setIsOpen(false);
-      console.log("Image uploaded");
-    });
+    }
   };
 
-  useEffect(() => {
-    listAll(imageListRef).then((res) => {
-      res.items.forEach((item) => {
-        getDownloadURL(item).then((url) => {
-          setImageList((prev: []) => [...prev, url]);
-        });
-      });
-    });
-  }, [imageListRef]);
+  const addImageToPost = (e: any) => {
+    const reader = new FileReader();
+    if (e.target.files[0]) {
+      reader.readAsDataURL(e.target.files[0]);
+    }
+    reader.onload = (readerEvent: any) => {
+      setImageUpload(readerEvent.target.result);
+    };
+  };
+
+  // useEffect(() => {
+  //   listAll(imageListRef).then((res) => {
+  //     res.items.forEach((item) => {
+  //       getDownloadURL(item).then((url) => {
+  //         setImageList((prev: []) => [...prev, url]);
+  //       });
+  //     });
+  //   });
+  // }, [imageListRef]);
 
   return (
     <Popse>
@@ -66,13 +76,7 @@ const Postpopupse = ({
           </CloseUpload>
           <CloseUpload__inne>
             <UploadIcon />
-            <input
-              type="file"
-              onChange={(e) => {
-                setImageUpload(e.target.value);
-              }}
-            />
-
+            <input type="file" onChange={addImageToPost} />
             <p>Add Photo/Videos</p>
             <span>or drag and drop</span>
           </CloseUpload__inne>