diff --git a/client/src/components/userProfilePages/MainBox.js b/client/src/components/userProfilePages/MainBox.js
index 05fd8c9b..1685f012 100644
--- a/client/src/components/userProfilePages/MainBox.js
+++ b/client/src/components/userProfilePages/MainBox.js
@@ -84,7 +84,9 @@ function MainBox({
   };
   return (
     <div className={classes.root}>
-      <Typography variant='h2'>{option__names[option]}</Typography>
+      <Typography variant='h2' className={classes.option}>
+        {option__names[option]}
+      </Typography>
       <Card className={classes.wrapper}>{renderOption()}</Card>
     </div>
   );
@@ -93,6 +95,11 @@ function MainBox({
 export default MainBox;
 
 const useStyles = makeStyles((theme) => ({
+  option: {
+    [theme.breakpoints.down('sm')]: {
+      display: 'none',
+    },
+  },
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/client/src/components/userProfilePages/Profile.js b/client/src/components/userProfilePages/Profile.js
index dc24ed31..02d11ce9 100644
--- a/client/src/components/userProfilePages/Profile.js
+++ b/client/src/components/userProfilePages/Profile.js
@@ -1,4 +1,4 @@
-import { Typography } from '@mui/material';
+import { Container, useMediaQuery } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import React from 'react';
 import { Edit2 } from 'react-feather';
@@ -6,77 +6,93 @@ import { PROFILEPAGES } from '../../assets/placeholder/profile';
 import theme from '../../config/themes/light';
 import profile from '../../assets/images/profile/profilePic.png';
 import pp from '../../assets/images/profile.png';
-import ImageBox from './widgets/ImageBox';
-import Image from 'next/image';
+import Image from 'next/dist/client/image';
+import EditTextfield from '../userProfilePages/widgets/EditTextfield';
 
 function Profile() {
   const classes = useStyles(theme);
+  const matches = useMediaQuery(theme.breakpoints.down('sm'));
+
   return (
-    <div className={classes.root}>
-      <div className={classes.wrapper}>
-        <div className={classes.content}>
-          <div className={classes.profilePic}>
-            <Image
-              src={pp}
-              alt=''
-              height='115px'
-              width='115px'
-              className={classes.pp}
-            />
-            <Edit2 size={30} className={classes.invertedIcon} />
-          </div>
-          <div className={classes.infoBlocks}>
-            {PROFILEPAGES.PROFILE.INFO.map(({ head, value }, key) => (
-              <div className={classes.infoBlock} key={key}>
-                <div className={classes.infoHead}>
-                  <Typography variant='h2'>{head}</Typography>
-                  <div className={classes.editButton}>
-                    <Edit2 size={18} />
-                  </div>
-                </div>
-                <Typography className={classes.subInfo}>{value}</Typography>
-              </div>
-            ))}
+    <Container>
+      <div className={classes.root}>
+        <div className={classes.option}>Profile</div>
+        <div className={classes.wrapper}>
+          <div className={classes.content}>
+            <div className={classes.profilePic}>
+              <Image
+                src={pp}
+                alt=''
+                height={!matches ? '115px' : '70px'}
+                width={!matches ? '115px' : '70px'}
+                className={classes.pp}
+              />
+              <Edit2
+                size={!matches ? '30' : '25'}
+                className={classes.invertedIcon}
+              />
+            </div>
+            <div className={classes.infoBlocks}>
+              {PROFILEPAGES.PROFILE.INFO.map(({ head, value }) => (
+                <EditTextfield
+                  className={classes.editTextfield}
+                  head={head}
+                  value={value}
+                />
+              ))}
+            </div>
           </div>
+          <Image
+            width={!matches ? '400px' : '210px'}
+            height={!matches ? '400px' : '210px'}
+            src={profile}
+          />
         </div>
-        <ImageBox widthImage='44.3%' img={profile} />
-      </div>
-      <div className={classes.subLine}>
-        <div className={classes.emailSub}>
-          Your email is not yet verified. <span>Verify Now</span>
-        </div>
-
-        <div className={classes.joined}>
-          <span>Joined on:</span> {PROFILEPAGES.PROFILE.JOINDATE}
+        <div className={classes.subLine}>
+          <div className={classes.emailSub}>
+            Your email is not yet verified. <span>Verify Now</span>
+          </div>
+          <div className={classes.joined}>
+            <span>Joined on:</span> {PROFILEPAGES.PROFILE.JOINDATE}
+          </div>
         </div>
       </div>
-    </div>
+    </Container>
   );
 }
 
 export default Profile;
 
 const useStyles = makeStyles((theme) => ({
+  option: {
+    display: 'none',
+    [theme.breakpoints.down('sm')]: {
+      display: 'inline-flex',
+      fontWeight: '600',
+      marginTop: '15px',
+      fontFamily: 'IBM Plex Sans',
+      fontSize: '18px',
+    },
+  },
   root: {
     display: 'flex',
-
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       flexWrap: 'wrap',
       paddingInline: '5%',
       paddingBottom: '7%',
+      alignItems: 'flex-start',
     },
   },
   wrapper: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    marginTop: '2rem',
-    width: '84%',
-    [theme.breakpoints.down('sm')]: {
-      justifyContent: 'center',
-      marginLeft: '0',
+    [theme.breakpoints.up('sm')]: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      marginTop: '2rem',
+      padding: '10px',
+      width: '84%',
     },
   },
   content: {
@@ -84,12 +100,22 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: 'column',
     [theme.breakpoints.down('sm')]: {
       alignItems: 'center',
+      display: 'inline-flex',
+      flexDirection: 'row-reverse',
+      alignItems: 'flex-start',
+      justifyContent: 'space-between',
+      paddingRight: '10px',
     },
   },
   profilePic: {
     height: '115px',
     width: '115px',
     position: 'relative',
+    [theme.breakpoints.down('sm')]: {
+      marginRight: '10px',
+      height: '70px',
+      width: '70px',
+    },
   },
   pp: {
     borderRadius: '50%',
@@ -100,6 +126,12 @@ const useStyles = makeStyles((theme) => ({
     right: '-3px',
     borderRadius: '50%',
     background: theme.palette.secondary.neutral50,
+    [theme.breakpoints.down('sm')]: {
+      position: 'absolute',
+      bottom: '-0.5px',
+      right: '-0.5px',
+      borderRadius: '50%',
+    },
   },
   infoBlocks: {
     display: 'flex',
@@ -107,34 +139,10 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: 'space-between',
     [theme.breakpoints.down('sm')]: {
       alignItems: 'center',
+      display: 'inline',
+      marginBottom: '20px',
     },
   },
-  infoBlock: {
-    marginTop: '2.5rem',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  infoHead: {
-    display: 'flex',
-    [theme.breakpoints.down('sm')]: {
-      justifyContent: 'center',
-    },
-  },
-  editButton: {
-    display: 'flex',
-    alignItems: 'center',
-    marginLeft: '0.25rem',
-  },
-  subInfo: {
-    textAlign: 'center',
-    fontSize: '1.5rem',
-    fontWeight: '400',
-    marginTop: '0.25rem',
-    [theme.breakpoints.down('sm')]: {
-      fontSize: '1.25rem',
-    },
-  },
-
   subLine: {
     fontFamily: 'Source Sans Pro',
     width: '84%',
@@ -143,8 +151,7 @@ const useStyles = makeStyles((theme) => ({
     alignItems: 'baseline',
     flexWrap: 'wrap',
     color: theme.palette.common.black,
-
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       marginTop: '1rem',
       flexDirection: 'column',
       justifyContent: 'space-around',
@@ -157,10 +164,10 @@ const useStyles = makeStyles((theme) => ({
     fontWeight: '400',
     color: theme.palette.secondary.neutral80,
     [theme.breakpoints.down('sm')]: {
-      fontSize: '1rem',
+      fontSize: '16px',
+      lineHeight: '24px',
       whiteSpace: 'wrap',
       textAlign: 'center',
-      marginTop: '0.4rem',
     },
     '& span': {
       '&:hover': {
@@ -169,7 +176,7 @@ const useStyles = makeStyles((theme) => ({
       whiteSpace: 'nowrap',
       fontSize: '1rem',
       textDecoration: 'underline',
-      color: theme.palette.secondary.main,
+      color: '#006DCC',
     },
   },
   joined: {
@@ -180,6 +187,11 @@ const useStyles = makeStyles((theme) => ({
     '& span': {
       fontWeight: '600',
       whiteSpace: 'nowrap',
+      [theme.breakpoints.down('sm')]: {
+        fontWeight: '700',
+        fontSize: '14px',
+        fontFamily: 'Source Sans Pro',
+      },
     },
   },
 }));
diff --git a/client/src/components/userProfilePages/widgets/EditTextfield.js b/client/src/components/userProfilePages/widgets/EditTextfield.js
new file mode 100644
index 00000000..809c180e
--- /dev/null
+++ b/client/src/components/userProfilePages/widgets/EditTextfield.js
@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { Edit2 } from 'react-feather';
+import { Typography, TextField } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import theme from '../../../config/themes/light';
+
+function EditTextfield({ head, value }) {
+  const classes = useStyles(theme);
+  const [toggle, setToggle] = useState(false);
+
+  return (
+    <div className={classes.infoBlock}>
+      <div className={classes.infoHead}>
+        <Typography variant='h2' className={classes.head}>
+          {head}
+        </Typography>
+        <div className={classes.editButton}>
+          <Edit2
+            className={classes.edit}
+            size={18}
+            onClick={() => {
+              setToggle(true);
+            }}
+          />
+        </div>
+      </div>
+      <div className={classes.typo}>
+        {toggle && (
+          <TextField
+            variant='standard'
+            className={classes.subInfo}
+            InputProps={{ disableUnderline: true }}
+            defaultValue={value}
+          />
+        )}
+        {!toggle && (
+          <Typography className={classes.subInfo}> {value} </Typography>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default EditTextfield;
+
+const useStyles = makeStyles((theme) => ({
+  head: {
+    fontFamily: 'IBM Plex Sans',
+    [theme.breakpoints.down('sm')]: {
+      fontSize: '16px',
+      fontWeight: '800',
+    },
+  },
+  typo: {
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  infoBlock: {
+    marginTop: '2.5rem',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+  },
+  edit: {
+    cursor: 'pointer',
+  },
+  infoHead: {
+    display: 'flex',
+    [theme.breakpoints.down('sm')]: {
+      justifyContent: 'center',
+    },
+  },
+  editButton: {
+    display: 'flex',
+    alignItems: 'center',
+    marginLeft: '0.25rem',
+  },
+  subInfo: {
+    fontFamily: 'Source Sans Pro',
+    textAlign: 'center',
+    fontSize: '24px',
+    fontWeight: '400',
+    marginTop: '0.25rem',
+    [theme.breakpoints.down('sm')]: {
+      fontSize: '16px',
+    },
+  },
+}));
diff --git a/client/src/screens/UserProfile.js b/client/src/screens/UserProfile.js
index 167b4275..e7c9b05d 100644
--- a/client/src/screens/UserProfile.js
+++ b/client/src/screens/UserProfile.js
@@ -1,4 +1,10 @@
-import { Button, Card, Container, Typography } from '@mui/material';
+import {
+  Button,
+  Card,
+  Container,
+  Typography,
+  useMediaQuery,
+} from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import React, { useState } from 'react';
 import theme from '../config/themes/light';
@@ -18,6 +24,7 @@ function UserProfile() {
   ];
 
   const classes = useStyles(theme);
+  const matches = useMediaQuery(theme.breakpoints.down('md'));
 
   const [option, setOption] = useState(0);
   const [nLOption, setNLOption] = useState(0);
@@ -52,21 +59,36 @@ function UserProfile() {
         <div className={classes.body}>
           <div className={classes.menu}>
             <ProfileCard />
-            <Card className={classes.options}>
-              {options.map((option__value, key) => (
-                <Button
-                  className={`${key ? classes.option1 : classes.option0} 
+            {!matches ? (
+              <Card className={classes.options}>
+                {options.map((option__value, key) => (
+                  <Button
+                    className={`${key ? classes.option1 : classes.option0} 
                   ${option == key ? classes.selectedOption : ''}
                   `}
-                  key={key}
-                  onClick={() => handleOptionClick(key)}
-                >
-                  {option__value}
+                    key={key}
+                    onClick={() => handleOptionClick(key)}
+                  >
+                    {option__value}
 
-                  <ChevronRight size={18} />
-                </Button>
-              ))}
-            </Card>
+                    <ChevronRight size={18} />
+                  </Button>
+                ))}
+              </Card>
+            ) : (
+              <div className={classes.mobButtons}>
+                {options.map((option__value, key) => (
+                  <Button
+                    className={`${classes.button} 
+                    ${option == key ? classes.selectedOptionMobile : ''} `}
+                    key={key}
+                    onClick={() => handleOptionClick(key)}
+                  >
+                    {option__value}
+                  </Button>
+                ))}
+              </div>
+            )}
           </div>
           <MainBox
             className={classes.mainBox}
@@ -97,15 +119,17 @@ const useStyles = makeStyles((theme) => ({
   head: {
     color: theme.palette.primary.blue60,
     marginTop: '2rem',
+    marginBottom: '2rem',
     [theme.breakpoints.down('md')]: {
+      color: 'black',
       textAlign: 'center',
       marginTop: '0.75rem',
+      marginBottom: '0.75rem',
     },
   },
   body: {
     display: 'flex',
     [theme.breakpoints.down('md')]: {
-      // display: 'none',
       justifyContent: 'center',
       flexWrap: 'wrap',
     },
@@ -136,12 +160,13 @@ const useStyles = makeStyles((theme) => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    color: theme.palette.secondary.neutral70,
+    color: '#999999',
     width: '276px',
     height: '49px',
     borderTop: '1px solid',
     borderColor: theme.palette.secondary.neutral60,
     borderRadius: '0',
+    fontFamily: 'Source Sans Pro',
     [theme.breakpoints.down('md')]: {
       width: '100%',
     },
@@ -150,17 +175,35 @@ const useStyles = makeStyles((theme) => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    color: theme.palette.secondary.neutral70,
+    color: '#999999',
     width: '276px',
     height: '49px',
     borderRadius: '0',
+    fontFamily: 'Source Sans Pro',
     [theme.breakpoints.down('md')]: {
       width: '100%',
     },
   },
+  button: {
+    display: 'inline-block',
+    marginRight: '10px',
+    marginTop: '10px',
+    backgroundColor: theme.palette.primary.blue10,
+    color: theme.palette.common.black,
+    borderRadius: '4px',
+    padding: '2px 6px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    fontWeight: '400',
+    lineHeight: '20px',
+  },
   selectedOption: {
     color: `${theme.palette.secondary.main} !important`,
   },
+  selectedOptionMobile: {
+    color: `${theme.palette.common.white} !important`,
+    backgroundColor: `${theme.palette.primary.blue50} !important`,
+  },
   mainBox: {
     width: '100%',
   },