diff --git a/src/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.tsx b/src/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.tsx
index 6758ec4f7..909168150 100644
--- a/src/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.tsx
+++ b/src/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.tsx
@@ -1,5 +1,6 @@
 import { FC, useContext } from 'react'
 
+import { SETTINGS_TITLE } from '../../../../config'
 import { profileContext, ProfileContextData } from '../../../../lib'
 import '../../../../lib/styles/index.scss'
 
@@ -23,7 +24,7 @@ const ProfileSelector: FC<{}> = () => {
     return (
         <div className={styles['profile-selector']}>
             {!isLoggedIn && <ProfileNotLoggedIn />}
-            {isLoggedIn && <ProfileLoggedIn />}
+            {isLoggedIn && <ProfileLoggedIn settingsTitle={SETTINGS_TITLE} />}
         </div>
     )
 }
diff --git a/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx b/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx
index 8c5ed4118..59c01a6af 100644
--- a/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx
+++ b/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx
@@ -11,7 +11,11 @@ import {
 import { ProfilePanel } from './profile-panel'
 import styles from './ProfileLoggedIn.module.scss'
 
-const ProfileLoggedIn: FC<{}> = () => {
+interface ProfileLoggedInProps {
+    settingsTitle: string
+}
+
+const ProfileLoggedIn: FC<ProfileLoggedInProps> = (props: ProfileLoggedInProps) => {
 
     const { profile }: ProfileContextData = useContext(profileContext)
     const [profilePanelOpen, setProfilePanelOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
@@ -41,7 +45,12 @@ const ProfileLoggedIn: FC<{}> = () => {
                     </div>
                 )}
             </div>
-            {profilePanelOpen && <ProfilePanel toggleProfilePanel={toggleProfilePanel} />}
+            {profilePanelOpen && (
+                <ProfilePanel
+                    settingsTitle={props.settingsTitle}
+                    toggleProfilePanel={toggleProfilePanel}
+                />
+            )}
         </>
     )
 }
diff --git a/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx b/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx
index e76f1dcb8..a6af31c73 100644
--- a/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx
+++ b/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx
@@ -1,7 +1,6 @@
 import { FC, useContext } from 'react'
 import { Link } from 'react-router-dom'
 
-import { SETTINGS_TITLE } from '../../../../../../config'
 import {
     authUrlLogout,
     profileContext,
@@ -13,6 +12,7 @@ import {
 import styles from './ProfilePanel.module.scss'
 
 interface ProfilePanelProps {
+    settingsTitle: string
     toggleProfilePanel: () => void
 }
 
@@ -34,9 +34,9 @@ const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
             <Link
                 className={styles.profile}
                 onClick={() => props.toggleProfilePanel()}
-                to={getPath(SETTINGS_TITLE)}
+                to={getPath(props.settingsTitle)}
             >
-                {SETTINGS_TITLE}
+                {props.settingsTitle}
             </Link>
             <a href={authUrlLogout} className={styles.logout}>
                 Log Out
diff --git a/src/lib/content-layout/ContentLayout.module.scss b/src/lib/content-layout/ContentLayout.module.scss
index c644e9e2f..758a18b42 100644
--- a/src/lib/content-layout/ContentLayout.module.scss
+++ b/src/lib/content-layout/ContentLayout.module.scss
@@ -4,7 +4,6 @@
     @include content-height;
     padding: 0;
     display: grid;
-    background-color: $tc-white;
     grid-template-columns: 1fr;
     justify-content: center;
 
@@ -14,7 +13,6 @@
 
         .content-inner {
             flex: 1;
-            background-color: $tc-white;
             max-width: $xl-max-content;
             padding: 0;
         }
diff --git a/src/lib/content-layout/ContentLayout.tsx b/src/lib/content-layout/ContentLayout.tsx
index 666b463bc..100be616a 100644
--- a/src/lib/content-layout/ContentLayout.tsx
+++ b/src/lib/content-layout/ContentLayout.tsx
@@ -7,6 +7,7 @@ import styles from './ContentLayout.module.scss'
 
 export interface ContentLayoutProps {
     children?: ReactNode
+    contentClass?: string
     title: string
     titleClass?: string
 }
@@ -14,7 +15,7 @@ export interface ContentLayoutProps {
 const ContentLayout: FC<ContentLayoutProps> = (props: ContentLayoutProps) => {
 
     return (
-        <div className={classNames(styles.content)}>
+        <div className={classNames(styles.content, props.contentClass)}>
 
             <div className={styles['content-outer']}>
 
diff --git a/src/lib/styles/_cards.scss b/src/lib/styles/_cards.scss
index 39a362570..dbf27fef6 100644
--- a/src/lib/styles/_cards.scss
+++ b/src/lib/styles/_cards.scss
@@ -9,6 +9,7 @@
 
     .card-title {
         @include font-weight-semi-bold;
+        @include font-barlow;
         text-transform: uppercase;
     }
-}
\ No newline at end of file
+}
diff --git a/src/utils/settings/Settings.module.scss b/src/utils/settings/Settings.module.scss
index c95087225..152255883 100644
--- a/src/utils/settings/Settings.module.scss
+++ b/src/utils/settings/Settings.module.scss
@@ -1,5 +1,9 @@
-.page-header {
+.content {
     background: url('./profile-settings-background.svg');
+    background-size: 100% 100%;
+}
+
+.page-header {
     padding: 48px 180px;
 
     h1 {
diff --git a/src/utils/settings/Settings.tsx b/src/utils/settings/Settings.tsx
index 4d2cd170e..345e03b6d 100644
--- a/src/utils/settings/Settings.tsx
+++ b/src/utils/settings/Settings.tsx
@@ -31,6 +31,7 @@ const Settings: FC<{}> = () => {
 
     return (
         <ContentLayout
+            contentClass={styles.content}
             title={SETTINGS_TITLE}
             titleClass={classNames('font-tc-white', styles['page-header'])}
         >
@@ -51,15 +52,15 @@ const Settings: FC<{}> = () => {
                 <div className={styles['page-content']}>
 
                     <div className='card'>
-                        <span className='card-title'>
-                        Basic Information
-                        </span>
+                        <div className='card-title'>
+                            Basic Information
+                        </div>
                     </div>
 
                     <div className='card'>
-                        <span className='card-title'>
-                        Reset Password
-                        </span>
+                        <div className='card-title'>
+                            Reset Password
+                        </div>
                     </div>
 
                 </div>
diff --git a/src/utils/settings/profile-settings-background.svg b/src/utils/settings/profile-settings-background.svg
index f81063e50..f890f36be 100644
--- a/src/utils/settings/profile-settings-background.svg
+++ b/src/utils/settings/profile-settings-background.svg
@@ -1,24 +1,15 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-    <path 
-        fill-rule="evenodd" 
-        clip-rule="evenodd" 
-        d="M1440 0H0V75C48.6326 87.3333 179.41 112 352.202 112C561.824 112 736.694 91.1985 883.855 73.6932C990.757 60.9769 1083.04 50 1163.39 50C1316.17 50 1395.72 65 1440 75V0Z" 
-        fill="url(#paint0_linear_2021_29273)"
-    />
-    <defs>
-        <linearGradient 
-            id="paint0_linear_2021_29273" 
-            x1="2.70659e-06"
-            y1="86.8"
-            x2="493.66" 
-            y2="-627.9" 
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stop-color="#7B21A7"/>
-            <stop 
-                offset="1" 
-                stop-color="#1974AD"
-            />
-        </linearGradient>
-    </defs>
+<svg
+ width="1440"
+  height="112" 
+  viewBox="0 0 1440 112" 
+  fill="none" 
+  preserveAspectRatio="xMinYMin"
+ xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1440 0H0V75C48.6326 87.3333 179.41 112 352.202 112C561.824 112 736.694 91.1985 883.855 73.6932C990.757 60.9769 1083.04 50 1163.39 50C1316.17 50 1395.72 65 1440 75V0Z" fill="url(#paint0_linear_2021_29273)"/>
+<defs>
+<linearGradient id="paint0_linear_2021_29273" x1="2.70659e-06" y1="86.8" x2="493.66" y2="-627.9" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7B21A7"/>
+<stop offset="1" stop-color="#1974AD"/>
+</linearGradient>
+</defs>
 </svg>