diff --git a/client/src/components/profile/__snapshots__/profile.test.tsx.snap b/client/src/components/profile/__snapshots__/profile.test.tsx.snap
index cdba6c2afb4..f09252c9cde 100644
--- a/client/src/components/profile/__snapshots__/profile.test.tsx.snap
+++ b/client/src/components/profile/__snapshots__/profile.test.tsx.snap
@@ -14,6 +14,9 @@ exports[`<Profile/> renders correctly 1`] = `
     <div
       class="bio-container"
     >
+      <div
+        class="h-[30px]"
+      />
       <div
         class="mx-[-15px] "
       >
diff --git a/client/src/components/profile/components/camper.tsx b/client/src/components/profile/components/camper.tsx
index c03c619e041..4c230a72c55 100644
--- a/client/src/components/profile/components/camper.tsx
+++ b/client/src/components/profile/components/camper.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { Spacer } from '@freecodecamp/ui';
 import type { User } from '../../../redux/prop-types';
 import { FullWidthRow } from '../../helpers';
 import './camper.css';
@@ -29,6 +30,7 @@ function Camper({
   return (
     <>
       <div className='bio-container'>
+        <Spacer size={'m'} />
         <Bio
           user={user}
           setIsEditing={setIsEditing}