diff --git a/client/src/components/profile/profile.css b/client/src/components/profile/profile.css
index 0b34088..e587eeb 100644
--- a/client/src/components/profile/profile.css
+++ b/client/src/components/profile/profile.css
@@ -1,99 +1,151 @@
-.profile {
-  display: flex;
+.container {
+  justify-content: center;
   align-items: center;
-  margin-bottom: 16px;
+  height: 100vh;
+  width: 100%;
+  padding-top: 30px;
+  padding-left: 450px;
+}
+.box {
+  display: flex;
+  flex-direction:column;
+  width: 100%;
+  height: 480px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+  padding: 15px;
+}
+.box-1{
+  display: flex;
+  flex-direction: row;
+}
+.skills{ 
+  display: flex;
+  flex-direction: row;
+  padding-top: 3%;
+  padding-left: 0%;
+  
+}
+.left{
+  flex-direction:row;
+  padding-right: 13%;
+  padding-left: 12%;
+}
+.left button{
+  border-radius: 7%;
+  
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 10px;
+  padding-right: 10px;
+  border: 2px solid black;
+}
+.right{
+
+  display: flex;
+  flex-direction: row;
+  padding: 0%;
+ 
+}
+.right p{
+  width: fit-content;
+  border: 2px solid black;
+  border-radius: 7%;
+  padding: 0px 5px;
+  margin: 0 10px;
+}
+.box-3{
+  display: flex;
+  flex-direction: row;
+  padding-top: 3%;
+  padding-left: 33%;
+}
+.box-4{
+  padding-top: 8%;
+}
+.box-4 button{
+  margin-left: 85%;
+  margin-bottom: 20%;
+  border-radius: 7%;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 10px;
+  padding-right: 10px;
+  border: 2px solid black;
 }
 
 .avatar-container {
-  position: relative;
-  width: 80px;
-  height: 80px;
-  margin-right: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: fit-content;
+  padding-right: 10px;
 }
 
 .avatar {
-  width: 100%;
-  height: 100%;
+  border:2px solid black;
+  width: 140px;
+  height: 130px;
   border-radius: 50%;
-  object-fit: cover;
 }
 
 .upload-button {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
+  width: 50%;
+  align-items: center;
+  margin-top: 8px;
   cursor: pointer;
   z-index: 1;
+  height: fit-content;
+  block-size: fit-content;
 }
 
 .info {
+  height: fit-content;
+  block-size: fit-content;
   display: flex;
   flex-direction: column;
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 }
 
 h2 {
-  font-size: 24px;
+  font-size: 30px;
   margin-bottom: 8px;
 }
 
 p {
-  font-size: 16px;
+  font-size: 22px;
   margin-bottom: 4px;
 }
 
-.profile {
+
+.loc-icon{
+  padding-left: 0%;
+  width: 30px;
+  height: 30px;
+  margin-right: 10px;
+}
+.info .loc{
   display: flex;
+  flex-direction: row;
   align-items: center;
-  margin-bottom: 16px;
-  background-color: #FFFDD0;
-  padding: 16px;
-  border-radius: 8px;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.avatar-container {
-  position: relative;
-  width: 80px;
-  height: 80px;
-  margin-right: 16px;
-  border: 2px solid #ffffff;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  border-radius: 50%;
+  margin-bottom: 10px;
 }
 
-.avatar {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.info .loc-name{
+  padding-top: 10px;
 }
 
-.upload-button {
-  position: absolute;
-  top: 0;
-  left: 0;
+.another-box{
+  margin-top: 5%;
+  padding: 3% 10%;
+  /* display: flex;
+  flex-direction:column; */
   width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-  z-index: 1;
+  height: 500px; 
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+  padding: 15px;
 }
 
-.info {
-  display: flex;
-  flex-direction: column;
-}
-
-h2 {
-  font-size: 24px;
-  margin-bottom: 8px;
-}
-
-p {
-  font-size: 16px;
-  margin-bottom: 4px;
-}
+.another-box-1 p{
+  padding-left: 44%;
+  font-size: xx-large;
+}
\ No newline at end of file
diff --git a/client/src/components/profile/profile.jsx b/client/src/components/profile/profile.jsx
index d5539e3..aa644cf 100644
--- a/client/src/components/profile/profile.jsx
+++ b/client/src/components/profile/profile.jsx
@@ -1,7 +1,10 @@
 import React, { useState } from 'react';
-import './profile.css'
+import './Profile.css'
+import LocationOnIcon from '@mui/icons-material/LocationOn';
+import InstagramIcon from '@mui/icons-material/Instagram';
+import LinkedInIcon from '@mui/icons-material/LinkedIn';
 
-const Profile = ({ name, email, bio, avatarUrl }) => {
+const Profile = ({ name, email, bio, avatarUrl,loc }) => {
   const [avatar, setAvatar] = useState(avatarUrl);
 
   const handleUpload = (event) => {
@@ -13,24 +16,64 @@ const Profile = ({ name, email, bio, avatarUrl }) => {
     };
   };
 
-  
   return (
-    <div className="profile">
-      <div className="avatar-container">
-        <img className="avatar" src={avatar} alt={`upload`} />
+  <div class="container">
+  <div class="box">
+    <div className='box-1'>
+   <div className="avatar-container">
+        <img className="avatar" src={avatar} alt={`p  UPLOAD`} />
         <input
           type="file"
           accept="image/*"
           onChange={handleUpload}
           className="upload-button"
         />
-      </div>
-      <div className="info">
+    </div>
+    <div className="info">
         <h2>{name}</h2>
         <p>{email}</p>
         <p>{bio}</p>
+        <div className='loc'>
+        <LocationOnIcon fontSize='large' padding-left="0px"  className='loc-icon'/>
+        <p className='loc-name'>{loc}</p>
+        </div>
+    </div>
+    </div>
+  <div className='box-2'>
+  <div className='skills'>
+      <div class="left">
+      <button> Follow+</button>  
       </div>
+      <div class="right">
+      <p>C++</p>
+      <p>React JS</p>
+      <p>Node Js</p>
+      <p>Express Js</p>
+      <p>MongoDB</p>
+      </div>
+      
+  </div>
+
+  </div>
+  <div className='box-3'>
+  <div className='social'>
+      <InstagramIcon color="secondary" fontSize='large' padding-left="0px"  className='icons'/>
+      <LinkedInIcon color="primary" fontSize='large' padding-left="0px"  className='icons'/>
+  </div>
+  </div>
+  <div className='box-4'>
+    <button className='btn-edit'>Edit Profile</button>
+    </div>
+  </div>
+  <div className='another-box'>
+    <div className='another-box-1'>
+    <p>Projects</p>
+    </div>
+    <div className='another-box-2'>
+      
     </div>
+  </div>
+  </div>
   );
 };