diff --git a/README.md b/README.md
index ea49870..669b6e8 100644
--- a/README.md
+++ b/README.md
@@ -38,10 +38,10 @@ according to their age, food choices and hobbies.**
 <hr/>
 
 ## Functionalities
+
 - SignIn
 - Login
 
-
 ## Project as
 
 - ### **Frontend**
@@ -50,8 +50,8 @@ according to their age, food choices and hobbies.**
 - ### **Web Socket**
 
 <br/><br/>
+
 ## 🤝 **_Collaborators_**
-## 🤝 **Team Name:- Web-Sprit**
 
 # 👨🏻 **Nikhil Sahni** `Team Leader`
 
@@ -59,7 +59,6 @@ according to their age, food choices and hobbies.**
 - Linkedin: [Nikhil Sahni](https://www.linkedin.com/in/nikhil-sahni-8a3562239/)
 - Email: (nikhilsahni2001@gmail.com)
 
-
 # 👩🏼 **Akanksha Malviya**
 
 - Github: [@Utopian-Akanksha](https://github.com/Utopian-Akanksha)
@@ -78,8 +77,8 @@ according to their age, food choices and hobbies.**
 - Linkedin: [Ankit Singh](https://www.linkedin.com/in/ankit-singh-rajawat-08579521a/)
 - Email: (ankit.s8080@gmail.com)
 
-
 <br/><br/>
+
 # ** Tech Stacks used **
 
 <ul>
@@ -103,26 +102,27 @@ according to their age, food choices and hobbies.**
 
 Form validation
 <br/><br/>
+
 <div width="100%">
 <h3>Signin Page</h3>
-![Alt text](img/Sweetmeet_signup.PNG)
+<img src="https://github.com/snikhil2001/web-spirits/blob/main/img/Sweetmeet_signup.PNG" />
 </div>
 User Can Create their Sign in details and after that he can able to Login to website. 
 <br/><br/>
 <div width="100%">
 <h3>Login Page</h3>
-![Alt text](img/Sweetmeet_login.PNG)
+<img src="https://github.com/snikhil2001/web-spirits/blob/main/img/Sweetmeet_login.PNG" />
 </div>
 User Can Create their Sign in details and after that he can able to Login to website. 
 <br/><br/>
 <div width="100%">
 <h3>Landing page</h3>
-![Alt text](img/Sweetmeet_Landing.PNG)
+<img src="https://github.com/snikhil2001/web-spirits/blob/main/img/Sweetmeet_Landing.PNG" />
 </div>
 <br/><br/>
 <div width="100%">
 <h3>Chatting Page</h3>
-![Alt text](img/Sweetmeet_Chattingapp.PNG)
+<img src="https://github.com/snikhil2001/web-spirits/blob/main/img/Sweetmeet_Chatting.PNG" />
 <div/>
 <br/><br/>
 
diff --git a/sweetmeet/components/Card.js b/sweetmeet/components/Card.js
index 5c7cf6c..7136d2f 100644
--- a/sweetmeet/components/Card.js
+++ b/sweetmeet/components/Card.js
@@ -9,6 +9,7 @@ import {
   useColorModeValue,
   HStack,
   Stack,
+  Image
 } from '@chakra-ui/react';
 import { BsArrowUpRight, BsHeartFill, BsHeart } from 'react-icons/bs';
 
@@ -26,68 +27,68 @@ export default function PostWithLike({disable,data}) {
   return (
     <Center py={6}>
       <Box
-        w="sm"
+        w="lg"
         rounded={'lg'}
         my={5}
         mx={[0, 5]}
-        // minH={'500px'}
+        minH={'80vh'}
         overflow={'hidden'}
-        bg="white"
-        border={'1px'}
-        borderColor="black"
-        boxShadow={useColorModeValue('6px 6px 0 black', '6px 6px 0 cyan')}>
-        <Box h={'200px'} borderBottom={'1px'} borderColor="black">
+        bg={'		#F5F5F5'}
+        borderBottomRadius={'10px'}
+       >
+        <Box h={'400px'}>
           <Img
             src={
-              'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png'
+              'https://hips.hearstapps.com/digitalspyuk.cdnds.net/18/24/1528725844-call-me-by-your-name-poster.jpg'
             }
             roundedTop={'sm'}
+            roundedBottom={'md'}
             objectFit="cover"
             h="full"
             w="full"
             alt={'Blog Image'}
           />
         </Box>
-        <Box p={4}>
-          
-          <Heading color={'black'} fontSize={'2xl'} noOfLines={1}>
+        
+        <Box px={'2'}>
+          <Text color={'black'} fontSize={'4xl'} fontWeight={'semibold'} noOfLines={1}>
             {data?data.name:null}
-          </Heading>
+          </Text>
+        </Box>
+
+        <Box p={3} >
           <Box
-            bg="black"
-            display={'inline-block'}
-            px={2}
-            py={1}
-            color="white"
-            mb={2}>
-              <Text fontSize={'xs'} fontWeight="medium">
-              {data?data.age:null},{data?data.gender:null}
-            </Text>
+            display={'flex'}
+            justifyContent={'left'}
+            alignItems={'center'}>
+              <Text fontSize={'3xl'} fontWeight="medium" color={'gray.500'} >{data?data.age:null},{data?data.gender:null}</Text>
+              <Image src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Gender_neutral.svg/791px-Gender_neutral.svg.png" width="35px" />
+             
           </Box>
-          <Text color={'gray.500'} noOfLines={2}>
+
+          <Text color={'gray.500'} fontSize={'18px'} noOfLines={2}>
             {data.desc}
           </Text>
         </Box>
-        <Stack fontSize={'16px'}
-            fontWeight={'bold'} color={useColorModeValue('gray.700', 'gray.400')}  align={'center'} justify={'flex-start'} direction={'column'} mt={6}>
-        
-            <Box>My hobbies: {data.hobbies?data.hobbies.join(","):null}</Box>
-            <Box>Favourite cuisine:{data.food?data.food:null}</Box>
-          </Stack>
-        <HStack borderTop={'1px'} color="black">
+
+        <Stack align={'left'} p={'4'} justify={'flex-start'} direction={'column'}>
+            <Box color="red.300" fontSize={'18px'}  fontWeight={'semibold'} >My hobbies: {data.hobbies?data.hobbies.join(","):null}</Box>
+            <Box color="red.300" fontSize={'18px'}  fontWeight={'semibold'}>Favourite cuisine: {data.food?data.food:null}</Box>
+        </Stack>
+
+        <Flex bgGradient={"linear(to-r, red.400, orange.500)"} p={'4'}>
          
           <Flex
             p={4}
             alignItems="center"
             justifyContent={'space-between'}
             roundedBottom={'sm'}
-            borderLeft={'1px'}
             cursor="pointer"
             onClick={() => setLiked(!liked)}>
             {liked ? (
-              <BsHeartFill fill="red" fontSize={'24px'} />
+              <BsHeartFill fill="red" fontSize={'50px'} />
             ) : (
-              <BsHeart fontSize={'24px'} />
+              <BsHeart fontSize={'50px'} />
             )}
           </Flex>
           <Flex
@@ -97,12 +98,12 @@ export default function PostWithLike({disable,data}) {
             roundedBottom={'sm'}
             cursor={'pointer'}
             w="full">
-            <Text fontSize={'md'} fontWeight={'semibold'} onClick={handleDisable} >
+            <Text fontSize={'4xl'} fontWeight={'semibold'} color={'white'} onClick={handleDisable} >
               Chat
             </Text>
             <BsArrowUpRight />
           </Flex>
-        </HStack>
+        </Flex>
       </Box>
     </Center>
   );
diff --git a/sweetmeet/components/Conversation.js b/sweetmeet/components/Conversation.js
index 4c1d11e..b04f963 100644
--- a/sweetmeet/components/Conversation.js
+++ b/sweetmeet/components/Conversation.js
@@ -9,12 +9,13 @@ export default function Conversation({ name, conversation, currentUser }) {
           <WrapItem>
             <Avatar
               name="Dan Abrahmov"
-              src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWT3tmbUw0_yhTou2zV5X8RD24eQUt7sO8mZdLFDF4&s"
+              size="lg"
+              src="https://cdn-icons-png.flaticon.com/128/236/236832.png"
             />
           </WrapItem>
         </Box>
         <Box>
-          <Text fontSize={'20px'} color={'white'}>{name}</Text>
+          <Text fontSize={'25px'} color={'white'}>{name}</Text>
         </Box>
       </Flex>
     </Box>
diff --git a/sweetmeet/components/Messenger.js b/sweetmeet/components/Messenger.js
index 22ca500..311e296 100644
--- a/sweetmeet/components/Messenger.js
+++ b/sweetmeet/components/Messenger.js
@@ -10,6 +10,7 @@ import { io } from "socket.io-client";
 import axios from "axios";
 import Navbar from "./Navbar";
 import Card from "./Card";
+import { BsArrowLeftShort} from 'react-icons/bs';
 
 let conversationId = "";
 
@@ -159,20 +160,13 @@ export default function Messenger({ data }) {
           className={styles.chatMenu}
           bgGradient={"linear(to-r, red.400, orange.500)"}
         >
-          <Heading align={"center"} color={"white"}>
+          <Text fontSize={'30px'} fontWeight={'semibold'} align={"center"} color={"white"}>
             My Profile
-          </Heading>
+          </Text>
           <SocialProfile token={tokenDetails} />
         </Box>
 
         {show ? (
-          <Flex>
-            {data &&
-              data.map((item, index) => (
-                <Card key={index} disable={disable} data={item} />
-              ))}
-          </Flex>
-        ) : (
           <>
             <Box w="45%" className={styles.chatBox}>
               <Box overflowY="auto" h="600px">
@@ -191,17 +185,20 @@ export default function Messenger({ data }) {
                   </Box>
                 ) : (
                   <Flex justify={"space-evenly"}>
-                    <Heading as="h1" bg="pink.200" align={"center"}>
+                    <Text fontSize={'25px'} fontWeight={'semibold'} color="teal" align={"center"}>
                       Start a conversation{" "}
-                    </Heading>
-                    <Text
-                      onClick={() => setShow(true)}
-                      fontSize={"18px"}
-                      fontWeight={"bold"}
+                    </Text>
+                    <Flex justifyContent={'center'} alignItems={'center'}>
+                      <BsArrowLeftShort fontSize={'25px'} />
+                      <Text
+                      onClick={() => setShow(false)}
+                      fontSize={"20px"}
                       cursor={"pointer"}
-                    >
+                      fontWeight={'semibold'}
+                      >
                       Go back
-                    </Text>
+                      </Text>
+                    </Flex>
                   </Flex>
                 )}
               </Box>
@@ -219,7 +216,7 @@ export default function Messenger({ data }) {
             </Box>
 
             <Box w="25%" className={styles.chatMenu} p={"2"} bg="black">
-              <Heading color="white">Most Recent</Heading>
+              <Text color="white" fontSize={'30px'} fontWeight={'semibold'} >Most Recent</Text>
 
               {data &&
                 data.map((el, index) => (
@@ -241,6 +238,13 @@ export default function Messenger({ data }) {
                 ))}
             </Box>
           </>
+        ):(
+          <Flex>
+            {data &&
+              data.map((item, index) => (
+                <Card key={index} disable={disable} data={item} />
+              ))}
+          </Flex>
         )}
       </Flex>
     </Box>