diff --git a/packages/app/src/Pages/settings/Profile.tsx b/packages/app/src/Pages/settings/Profile.tsx
index 28d59df6..664c6777 100644
--- a/packages/app/src/Pages/settings/Profile.tsx
+++ b/packages/app/src/Pages/settings/Profile.tsx
@@ -109,7 +109,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
   function editor() {
     return (
       <div className="editor form">
-        <div className="form-group">
+        <div className="form-group card">
           <div>
             <FormattedMessage {...messages.Name} />:
           </div>
@@ -117,7 +117,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
             <input type="text" value={name} onChange={e => setName(e.target.value)} />
           </div>
         </div>
-        <div className="form-group">
+        <div className="form-group card">
           <div>
             <FormattedMessage {...messages.DisplayName} />:
           </div>
@@ -125,7 +125,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
             <input type="text" value={displayName} onChange={e => setDisplayName(e.target.value)} />
           </div>
         </div>
-        <div className="form-group form-col">
+        <div className="form-group card">
           <div>
             <FormattedMessage {...messages.About} />:
           </div>
@@ -133,7 +133,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
             <textarea className="w-max" onChange={e => setAbout(e.target.value)} value={about}></textarea>
           </div>
         </div>
-        <div className="form-group">
+        <div className="form-group card">
           <div>
             <FormattedMessage {...messages.Website} />:
           </div>
@@ -141,7 +141,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
             <input type="text" value={website} onChange={e => setWebsite(e.target.value)} />
           </div>
         </div>
-        <div className="form-group">
+        <div className="form-group card">
           <div>
             <FormattedMessage {...messages.Nip05} />:
           </div>
@@ -153,7 +153,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
             </button>
           </div>
         </div>
-        <div className="form-group">
+        <div className="form-group card">
           <div>
             <FormattedMessage {...messages.LnAddress} />:
           </div>
@@ -161,7 +161,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
             <input type="text" value={lud16} onChange={e => setLud16(e.target.value)} />
           </div>
         </div>
-        <div className="form-group">
+        <div className="form-group card">
           <div></div>
           <div>
             <button type="button" onClick={() => saveProfile()}>