diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/profile/profileStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/profile/profileStyles.js
index 4c2053fa7..8e7dcb698 100644
--- a/zubhub_frontend/zubhub/src/assets/js/styles/views/profile/profileStyles.js
+++ b/zubhub_frontend/zubhub/src/assets/js/styles/views/profile/profileStyles.js
@@ -2,22 +2,30 @@ import { fade } from '@material-ui/core/styles';
 
 const styles = theme => ({
   root: {
+    maxWidth: '940px',
+    margin: 'auto',
     flex: '1 0 auto',
     display: 'flex',
     flexDirection: 'column',
-    gap: 30
+    gap: 30,
+    [theme.breakpoints.down('sm')]: {
+      padding: '0 1.2em'
+    }
+  },
+  nonLoggedInRoot: {
+    marginTop: '1.2em',
+    [theme.breakpoints.down('378')]: {
+      marginTop: '3em'
+    }
   },
   profileHeaderStyle: {
-    paddingTop: '1.5em',
+    paddingTop: '1.2em',
     background: 'var(--primary-color2)',
     background:
       'linear-gradient(to bottom, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
     [theme.breakpoints.down('511')]: {
       paddingTop: '4em',
     },
-    [theme.breakpoints.down('740')]: {
-      margin: '1em',
-    },
     border: 'solid 3px rgb(255 209 24)',
     borderRadius: 8,
     boxShadow: 'unset',
@@ -149,11 +157,7 @@ const styles = theme => ({
     fontSize: '1.9rem',
   },
   profileLowerStyle: {
-    // margin: '1em',
     padding: '1em',
-    [theme.breakpoints.down('740')]: {
-      margin: '1em',
-    },
     borderRadius: 8,
   },
   titleStyle: {
@@ -178,30 +182,26 @@ const styles = theme => ({
   },
   aboutMeBadgeBox: {
     display: 'flex',
-    [theme.breakpoints.down('900')]: {
-      display: 'block',
+    [theme.breakpoints.down('sm')]: {
+      flexDirection: 'column',
+      gap: '1em'
     },
   },
   aboutMeBox: {
     flexGrow: 1,
     padding: '1em',
-    // margin: '1em 0 0 1em',
     borderRadius: '8px 0 0 8px',
-    [theme.breakpoints.down('900')]: {
-      margin: '1em',
+    [theme.breakpoints.down('sm')]: {
       borderRadius: '4px',
     },
   },
   badgeBox: {
     backgroundColor: 'var(--secondary-color3)',
-    // margin: '1em 1em 0 0',
     padding: '1em',
     width: '40%',
     borderRadius: '0 8px 8px 0',
-    [theme.breakpoints.down('900')]: {
+    [theme.breakpoints.down('sm')]: {
       width: 'auto',
-      margin: '1em',
-      padding: '1em',
       borderRadius: '4px',
     },
   },
@@ -230,6 +230,10 @@ const styles = theme => ({
     },
   },
 
+  projectsSection: {
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
   projectGridStyle: {
     marginBottom: '2em',
   },
diff --git a/zubhub_frontend/zubhub/src/views/profile/Profile.jsx b/zubhub_frontend/zubhub/src/views/profile/Profile.jsx
index 17477737b..59deca01e 100644
--- a/zubhub_frontend/zubhub/src/views/profile/Profile.jsx
+++ b/zubhub_frontend/zubhub/src/views/profile/Profile.jsx
@@ -171,7 +171,7 @@ function Profile(props) {
   } else if (profile && Object.keys(profile).length > 0) {
     return (
       <>
-        <Box className={classes.root}>
+        <Box className={clsx(classes.root, !props.auth.username && classes.nonLoggedInRoot )}>
           <Paper className={classes.profileHeaderStyle}>
             <Container maxWidth="md" style={{ padding: '0 3em' }}>
               <Box className={classes.flexClass}>
@@ -377,7 +377,7 @@ function Profile(props) {
                 {...props}
               />
             ) : (
-              <Box style={{ borderRadius: 8, overflow: 'hidden' }}>
+                <Box className={classes.projectsSection} >
                 <Typography gutterBottom component="h2" variant="h6" color="textPrimary" className={classes.titleStyle}>
                   {t('profile.projects.label')}
                   <CustomButton