diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
index 3d142ed4..0c0ed4cc 100644
--- a/src/pages/profile.tsx
+++ b/src/pages/profile.tsx
@@ -50,27 +50,32 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	};
 }, sessionOptions);
 
-export default function Home() {
-	const [bio, setBio] = useState("");
-	const [name, setName] = useState("");
-	const [email, setEmail] = useState("");
+interface Props {
+	user: User;
+	mutateUser: Function,
+}
+
+function UserProfile({
+	user,
+	mutateUser,
+}: Props) {
+	const [bio, setBio] = useState(user.bio || '');
+	const [name, setName] = useState(user.name || '');
+	const [email, setEmail] = useState(user.email || '');
 	const [password, setPassword] = useState("");
 	const [newPassword, setNewPassword] = useState("");
 	const [isLoading, setIsLoading] = useState(false);
-	const [profilePicture, setProfilePicture] = useState("");
+	const [profilePicture, setProfilePicture] = useState(user.profilePicture);
 
-	const [country, setCountry] = useState<string>();
-	const [phone, setPhone] = useState<string>();
-	const [gender, setGender] = useState<Gender>();
-	const [employment, setEmployment] = useState<EmploymentStatus>();
-	const [position, setPosition] = useState<string>();
-	const [companyName, setCompanyName] = useState<string>("");
-	const [commercialRegistration, setCommercialRegistration] = useState<string>("");
+	const [country, setCountry] = useState<string>(user.demographicInformation?.country || '');
+	const [phone, setPhone] = useState<string>(user.demographicInformation?.phone || '');
+	const [gender, setGender] = useState<Gender | undefined>(user.demographicInformation?.gender || undefined);
+	const [employment, setEmployment] = useState<EmploymentStatus | undefined>(user.type === "corporate" ? undefined : user.demographicInformation?.employment);
+	const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
+	const [companyName, setCompanyName] = useState<string | undefined>(user.type === 'agent' ? user.agentInformation?.companyName : undefined);
+	const [commercialRegistration, setCommercialRegistration] = useState<string | undefined>(user.type === 'agent' ? user.agentInformation?.commercialRegistration : undefined);
 
 	const profilePictureInput = useRef(null);
-
-	const {user, mutateUser} = useUser({redirectTo: "/login"});
-
 	const expirationDateColor = (date: Date) => {
 		const momentDate = moment(date);
 		const today = moment(new Date());
@@ -80,24 +85,6 @@ export default function Home() {
 		if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
 	};
 
-	useEffect(() => {
-		if (user) {
-			setName(user.name);
-			setEmail(user.email);
-			setBio(user.bio);
-			setProfilePicture(user.profilePicture);
-			setCountry(user.demographicInformation?.country);
-			setPhone(user.demographicInformation?.phone);
-			setGender(user.demographicInformation?.gender);
-			setEmployment(user.type === "corporate" ? undefined : user.demographicInformation?.employment);
-			setPosition(user.type === "corporate" ? user.demographicInformation?.position : undefined);
-			if(user.type === 'agent') {
-				setCompanyName(user.agentInformation?.companyName)
-				setCommercialRegistration(user.agentInformation?.commercialRegistration)
-			}
-		}
-	}, [user]);
-
 	const convertBase64 = (file: File) => {
 		return new Promise((resolve, reject) => {
 			const fileReader = new FileReader();
@@ -159,6 +146,258 @@ export default function Home() {
 		setIsLoading(false);
 	};
 
+	return (
+		<Layout user={user}>
+			<section className="w-full flex flex-col gap-4 md:gap-8 px-4 py-8">
+				<h1 className="text-4xl font-bold mb-6 md:hidden">Edit Profile</h1>
+				<div className="flex -md:flex-col-reverse -md:items-center w-full justify-between">
+					<div className="flex flex-col gap-8 w-full md:w-2/3">
+						<h1 className="text-4xl font-bold mb-6 -md:hidden">Edit Profile</h1>
+						<form className="flex flex-col items-center gap-6 w-full">
+							<div className="flex flex-col md:flex-row gap-8 w-full">
+								<Input
+									label="Name"
+									type="text"
+									name="name"
+									onChange={(e) => setName(e)}
+									placeholder="Enter your name"
+									defaultValue={name}
+									required
+								/>
+								<Input
+									label="E-mail Address"
+									type="email"
+									name="email"
+									onChange={(e) => setEmail(e)}
+									placeholder="Enter email address"
+									defaultValue={email}
+									required
+								/>
+							</div>
+							<div className="flex flex-col md:flex-row gap-8 w-full">
+								<Input
+									label="Old Password"
+									type="password"
+									name="password"
+									onChange={(e) => setPassword(e)}
+									placeholder="Enter your password"
+									required
+								/>
+								<Input
+									label="New Password"
+									type="password"
+									name="newPassword"
+									onChange={(e) => setNewPassword(e)}
+									placeholder="Enter your new password (optional)"
+								/>
+							</div>
+
+							{user.type === "agent" && (
+								<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
+									<Input
+										label="Corporate Name"
+										type="text"
+										name="companyName"
+										onChange={() => null}
+										placeholder="Enter corporate name"
+										defaultValue={companyName}
+										disabled
+									/>
+									<Input
+										label="Commercial Registration"
+										type="text"
+										name="commercialRegistration"
+										onChange={() => null}
+										placeholder="Enter commercial registration"
+										defaultValue={commercialRegistration}
+										disabled
+									/>
+								</div>
+							)}
+
+							<div className="flex flex-col md:flex-row gap-8 w-full">
+								<div className="flex flex-col gap-3 w-full">
+									<label className="font-normal text-base text-mti-gray-dim">Country *</label>
+									<CountrySelect value={country} onChange={setCountry} />
+								</div>
+								<Input
+									type="tel"
+									name="phone"
+									label="Phone number"
+									onChange={(e) => setPhone(e)}
+									placeholder="Enter phone number"
+									defaultValue={phone}
+									required
+								/>
+							</div>
+							<div className="flex flex-col md:flex-row gap-8 w-full">
+								{user.type === "corporate" && (
+									<Input
+										name="position"
+										onChange={setPosition}
+										defaultValue={position}
+										type="text"
+										label="Position"
+										placeholder="CEO, Head of Marketing..."
+										required
+									/>
+								)}
+								{user.type !== "corporate" && (
+									<div className="relative flex flex-col gap-3 w-full">
+										<label className="font-normal text-base text-mti-gray-dim">Employment Status *</label>
+										<RadioGroup
+											value={employment}
+											onChange={setEmployment}
+											className="grid grid-cols-2 items-center gap-4 place-items-center">
+											{EMPLOYMENT_STATUS.map(({status, label}) => (
+												<RadioGroup.Option value={status} key={status}>
+													{({checked}) => (
+														<span
+															className={clsx(
+																"px-6 py-4 w-40 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+																"transition duration-300 ease-in-out",
+																!checked
+																	? "bg-white border-mti-gray-platinum"
+																	: "bg-mti-purple-light border-mti-purple-dark text-white",
+															)}>
+															{label}
+														</span>
+													)}
+												</RadioGroup.Option>
+											))}
+										</RadioGroup>
+									</div>
+								)}
+								<div className="flex flex-col gap-8 w-full">
+									<div className="relative flex flex-col gap-3 w-full">
+										<label className="font-normal text-base text-mti-gray-dim">Gender *</label>
+										<RadioGroup value={gender} onChange={setGender} className="flex flex-row gap-4 justify-between">
+											<RadioGroup.Option value="male">
+												{({checked}) => (
+													<span
+														className={clsx(
+															"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+															"transition duration-300 ease-in-out",
+															!checked
+																? "bg-white border-mti-gray-platinum"
+																: "bg-mti-purple-light border-mti-purple-dark text-white",
+														)}>
+														Male
+													</span>
+												)}
+											</RadioGroup.Option>
+											<RadioGroup.Option value="female">
+												{({checked}) => (
+													<span
+														className={clsx(
+															"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+															"transition duration-300 ease-in-out",
+															!checked
+																? "bg-white border-mti-gray-platinum"
+																: "bg-mti-purple-light border-mti-purple-dark text-white",
+														)}>
+														Female
+													</span>
+												)}
+											</RadioGroup.Option>
+											<RadioGroup.Option value="other">
+												{({checked}) => (
+													<span
+														className={clsx(
+															"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+															"transition duration-300 ease-in-out",
+															!checked
+																? "bg-white border-mti-gray-platinum"
+																: "bg-mti-purple-light border-mti-purple-dark text-white",
+														)}>
+														Other
+													</span>
+												)}
+											</RadioGroup.Option>
+										</RadioGroup>
+									</div>
+									<div className="flex flex-col gap-3">
+										<label className="font-normal text-base text-mti-gray-dim">Expiry Date (click to purchase)</label>
+										<Link
+											href="/payment"
+											className={clsx(
+												"p-6 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+												"transition duration-300 ease-in-out",
+												!user.subscriptionExpirationDate
+													? "!bg-mti-green-ultralight !border-mti-green-light"
+													: expirationDateColor(user.subscriptionExpirationDate),
+												"bg-white border-mti-gray-platinum",
+											)}>
+											{!user.subscriptionExpirationDate && "Unlimited"}
+											{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
+										</Link>
+									</div>
+								</div>
+							</div>
+						</form>
+					</div>
+					<div className="flex flex-col gap-6 w-48">
+						<div
+							className="flex flex-col gap-3 items-center h-fit cursor-pointer group"
+							onClick={() => (profilePictureInput.current as any)?.click()}>
+							<div className="relative overflow-hidden h-48 w-48 rounded-full">
+								<div
+									className={clsx(
+										"absolute top-0 left-0 bg-mti-purple-light/60 w-full h-full z-20 flex items-center justify-center opacity-0 group-hover:opacity-100",
+										"transition ease-in-out duration-300",
+									)}>
+									<BsCamera className="text-6xl text-mti-purple-ultralight/80" />
+								</div>
+								<img src={profilePicture} alt={user.name} className="aspect-square drop-shadow-xl self-end object-cover" />
+							</div>
+							<input type="file" className="hidden" onChange={uploadProfilePicture} accept="image/*" ref={profilePictureInput} />
+							<span
+								onClick={() => (profilePictureInput.current as any)?.click()}
+								className="cursor-pointer text-mti-purple-light text-sm">
+								Change picture
+							</span>
+							<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6>
+						</div>
+						{user.type === 'agent' && (
+							<div className="flag items-center h-fit">
+								<img
+									alt={user.demographicInformation?.country.toLowerCase() + '_flag'}
+									src={`https://flagcdn.com/w320/${user.demographicInformation?.country.toLowerCase()}.png`}
+									width="320"
+								/>
+							</div>
+						)}
+					</div>
+				</div>
+				<div className="flex flex-col gap-4 mt-8 mb-20">
+					<span className="text-lg font-bold">Bio</span>
+					<textarea
+						className="w-full h-full min-h-[148px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"
+						onChange={(e) => setBio(e.target.value)}
+						defaultValue={bio}
+						placeholder="Write your text here..."
+					/>
+				</div>
+
+				<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+					<Link href="/" className="max-w-[200px] self-end w-full">
+						<Button color="purple" variant="outline" className="max-w-[200px] self-end w-full">
+							Back
+						</Button>
+					</Link>
+					<Button color="purple" className="max-w-[200px] self-end w-full" onClick={updateUser} disabled={isLoading}>
+						Save Changes
+					</Button>
+				</div>
+			</section>
+		</Layout>
+	);
+}
+
+
+export default function Home() {
+	const {user, mutateUser } = useUser({redirectTo: "/login"});
+
 	return (
 		<>
 			<Head>
@@ -171,252 +410,9 @@ export default function Home() {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<ToastContainer />
-			{user && (
-				<Layout user={user}>
-					<section className="w-full flex flex-col gap-4 md:gap-8 px-4 py-8">
-						<h1 className="text-4xl font-bold mb-6 md:hidden">Edit Profile</h1>
-						<div className="flex -md:flex-col-reverse -md:items-center w-full justify-between">
-							<div className="flex flex-col gap-8 w-full md:w-2/3">
-								<h1 className="text-4xl font-bold mb-6 -md:hidden">Edit Profile</h1>
-								<form className="flex flex-col items-center gap-6 w-full">
-									<div className="flex flex-col md:flex-row gap-8 w-full">
-										<Input
-											label="Name"
-											type="text"
-											name="name"
-											onChange={(e) => setName(e)}
-											placeholder="Enter your name"
-											defaultValue={name}
-											required
-										/>
-										<Input
-											label="E-mail Address"
-											type="email"
-											name="email"
-											onChange={(e) => setEmail(e)}
-											placeholder="Enter email address"
-											defaultValue={email}
-											required
-										/>
-									</div>
-									<div className="flex flex-col md:flex-row gap-8 w-full">
-										<Input
-											label="Old Password"
-											type="password"
-											name="password"
-											onChange={(e) => setPassword(e)}
-											placeholder="Enter your password"
-											required
-										/>
-										<Input
-											label="New Password"
-											type="password"
-											name="newPassword"
-											onChange={(e) => setNewPassword(e)}
-											placeholder="Enter your new password (optional)"
-										/>
-									</div>
-
-									{user.type === "agent" && (
-										<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
-											<Input
-												label="Corporate Name"
-												type="text"
-												name="companyName"
-												onChange={() => null}
-												placeholder="Enter corporate name"
-												defaultValue={companyName}
-												disabled
-											/>
-											<Input
-												label="Commercial Registration"
-												type="text"
-												name="commercialRegistration"
-												onChange={() => null}
-												placeholder="Enter commercial registration"
-												defaultValue={commercialRegistration}
-												disabled
-											/>
-										</div>
-									)}
-
-									<div className="flex flex-col md:flex-row gap-8 w-full">
-										<div className="flex flex-col gap-3 w-full">
-											<label className="font-normal text-base text-mti-gray-dim">Country *</label>
-											<CountrySelect value={country} onChange={setCountry} />
-										</div>
-										<Input
-											type="tel"
-											name="phone"
-											label="Phone number"
-											onChange={(e) => setPhone(e)}
-											placeholder="Enter phone number"
-											defaultValue={phone}
-											required
-										/>
-									</div>
-									<div className="flex flex-col md:flex-row gap-8 w-full">
-										{user.type === "corporate" && (
-											<Input
-												name="position"
-												onChange={setPosition}
-												defaultValue={position}
-												type="text"
-												label="Position"
-												placeholder="CEO, Head of Marketing..."
-												required
-											/>
-										)}
-										{user.type !== "corporate" && (
-											<div className="relative flex flex-col gap-3 w-full">
-												<label className="font-normal text-base text-mti-gray-dim">Employment Status *</label>
-												<RadioGroup
-													value={employment}
-													onChange={setEmployment}
-													className="grid grid-cols-2 items-center gap-4 place-items-center">
-													{EMPLOYMENT_STATUS.map(({status, label}) => (
-														<RadioGroup.Option value={status} key={status}>
-															{({checked}) => (
-																<span
-																	className={clsx(
-																		"px-6 py-4 w-40 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-																		"transition duration-300 ease-in-out",
-																		!checked
-																			? "bg-white border-mti-gray-platinum"
-																			: "bg-mti-purple-light border-mti-purple-dark text-white",
-																	)}>
-																	{label}
-																</span>
-															)}
-														</RadioGroup.Option>
-													))}
-												</RadioGroup>
-											</div>
-										)}
-										<div className="flex flex-col gap-8 w-full">
-											<div className="relative flex flex-col gap-3 w-full">
-												<label className="font-normal text-base text-mti-gray-dim">Gender *</label>
-												<RadioGroup value={gender} onChange={setGender} className="flex flex-row gap-4 justify-between">
-													<RadioGroup.Option value="male">
-														{({checked}) => (
-															<span
-																className={clsx(
-																	"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-																	"transition duration-300 ease-in-out",
-																	!checked
-																		? "bg-white border-mti-gray-platinum"
-																		: "bg-mti-purple-light border-mti-purple-dark text-white",
-																)}>
-																Male
-															</span>
-														)}
-													</RadioGroup.Option>
-													<RadioGroup.Option value="female">
-														{({checked}) => (
-															<span
-																className={clsx(
-																	"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-																	"transition duration-300 ease-in-out",
-																	!checked
-																		? "bg-white border-mti-gray-platinum"
-																		: "bg-mti-purple-light border-mti-purple-dark text-white",
-																)}>
-																Female
-															</span>
-														)}
-													</RadioGroup.Option>
-													<RadioGroup.Option value="other">
-														{({checked}) => (
-															<span
-																className={clsx(
-																	"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-																	"transition duration-300 ease-in-out",
-																	!checked
-																		? "bg-white border-mti-gray-platinum"
-																		: "bg-mti-purple-light border-mti-purple-dark text-white",
-																)}>
-																Other
-															</span>
-														)}
-													</RadioGroup.Option>
-												</RadioGroup>
-											</div>
-											<div className="flex flex-col gap-3">
-												<label className="font-normal text-base text-mti-gray-dim">Expiry Date (click to purchase)</label>
-												<Link
-													href="/payment"
-													className={clsx(
-														"p-6 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-														"transition duration-300 ease-in-out",
-														!user.subscriptionExpirationDate
-															? "!bg-mti-green-ultralight !border-mti-green-light"
-															: expirationDateColor(user.subscriptionExpirationDate),
-														"bg-white border-mti-gray-platinum",
-													)}>
-													{!user.subscriptionExpirationDate && "Unlimited"}
-													{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
-												</Link>
-											</div>
-										</div>
-									</div>
-								</form>
-							</div>
-							<div className="flex flex-col gap-6 w-48">
-								<div
-									className="flex flex-col gap-3 items-center h-fit cursor-pointer group"
-									onClick={() => (profilePictureInput.current as any)?.click()}>
-									<div className="relative overflow-hidden h-48 w-48 rounded-full">
-										<div
-											className={clsx(
-												"absolute top-0 left-0 bg-mti-purple-light/60 w-full h-full z-20 flex items-center justify-center opacity-0 group-hover:opacity-100",
-												"transition ease-in-out duration-300",
-											)}>
-											<BsCamera className="text-6xl text-mti-purple-ultralight/80" />
-										</div>
-										<img src={profilePicture} alt={user.name} className="aspect-square drop-shadow-xl self-end object-cover" />
-									</div>
-									<input type="file" className="hidden" onChange={uploadProfilePicture} accept="image/*" ref={profilePictureInput} />
-									<span
-										onClick={() => (profilePictureInput.current as any)?.click()}
-										className="cursor-pointer text-mti-purple-light text-sm">
-										Change picture
-									</span>
-									<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6>
-								</div>
-								{user.type === 'agent' && (
-									<div className="flag items-center h-fit">
-										<img
-											alt={user.demographicInformation?.country.toLowerCase() + '_flag'}
-											src={`https://flagcdn.com/w320/${user.demographicInformation?.country.toLowerCase()}.png`}
-											width="320"
-										/>
-									</div>
-								)}
-							</div>
-						</div>
-						<div className="flex flex-col gap-4 mt-8 mb-20">
-							<span className="text-lg font-bold">Bio</span>
-							<textarea
-								className="w-full h-full min-h-[148px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"
-								onChange={(e) => setBio(e.target.value)}
-								defaultValue={bio}
-								placeholder="Write your text here..."
-							/>
-						</div>
-
-						<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
-							<Link href="/" className="max-w-[200px] self-end w-full">
-								<Button color="purple" variant="outline" className="max-w-[200px] self-end w-full">
-									Back
-								</Button>
-							</Link>
-							<Button color="purple" className="max-w-[200px] self-end w-full" onClick={updateUser} disabled={isLoading}>
-								Save Changes
-							</Button>
-						</div>
-					</section>
-				</Layout>
-			)}
+			{user && <UserProfile user={user} mutateUser={mutateUser} /> }
 		</>
 	);
-}
+				
+
+}
\ No newline at end of file