diff --git a/apps/client/components/Meta.tsx b/apps/client/components/Meta.tsx
index f6512440..e2f25f7a 100644
--- a/apps/client/components/Meta.tsx
+++ b/apps/client/components/Meta.tsx
@@ -18,7 +18,6 @@ export default function Meta() {
                 property="og:description"
                 content="Maybe is modern financial & investment planning"
             />
-            <meta property="og:image" content="https://assets.maybe.co/images/maybe-meta.png" />
 
             {/* <!-- Twitter --> */}
             <meta property="twitter:card" content="summary_large_image" />
@@ -28,10 +27,6 @@ export default function Meta() {
                 property="twitter:description"
                 content="Maybe is modern financial & investment planning"
             />
-            <meta
-                property="twitter:image"
-                content="https://assets.maybe.co/images/maybe-meta.png"
-            />
 
             {/* <!-- Favicons - https://realfavicongenerator.net/favicon_checker#.YUNEifxKhhE --> */}
             <link rel="manifest" href="/assets/site.webmanifest" />
diff --git a/apps/client/pages/api/card.tsx b/apps/client/pages/api/card.tsx
index a87e18ca..c05067bb 100644
--- a/apps/client/pages/api/card.tsx
+++ b/apps/client/pages/api/card.tsx
@@ -14,6 +14,10 @@ const now = DateTime.now()
 
 export default async function handler(req: NextRequest) {
     const fontData = await font
+    const { headers } = req
+    const protocol = headers.get('x-forwarded-proto') || 'http'
+    const host = headers.get('host')
+    const baseUrl = `${protocol}://${host}`
 
     try {
         const { searchParams } = new URL(req.url)
@@ -49,7 +53,7 @@ export default async function handler(req: NextRequest) {
                     >
                         <img
                             alt=""
-                            src="https://assets.maybe.co/images/maybe-card.png"
+                            src={`${baseUrl}/assets/maybe-card.png`}
                             style={{ position: 'absolute', width: '100%' }}
                         />
                         <div
diff --git a/apps/client/public/assets/maybe-card.png b/apps/client/public/assets/maybe-card.png
new file mode 100644
index 00000000..06a00078
Binary files /dev/null and b/apps/client/public/assets/maybe-card.png differ
diff --git a/libs/client/features/src/onboarding/steps/Welcome.tsx b/libs/client/features/src/onboarding/steps/Welcome.tsx
index d46bb700..966f231a 100644
--- a/libs/client/features/src/onboarding/steps/Welcome.tsx
+++ b/libs/client/features/src/onboarding/steps/Welcome.tsx
@@ -53,7 +53,7 @@ export function Welcome({ title: stepTitle, onNext }: StepProps) {
                     await onNext()
                 })}
             >
-                <div className="grow max-w-md">
+                <div className="max-w-md grow">
                     <img src="/assets/maybe.svg" className="h-8" alt="Maybe" />
                     <h3 className="mt-14">{stepTitle}</h3>
                     <p className="mt-2 text-base text-gray-50">
@@ -63,15 +63,15 @@ export function Welcome({ title: stepTitle, onNext }: StepProps) {
                     <Button type="submit" className="mt-14" disabled={!isValid}>
                         Start exploring
                         {isSubmitting ? (
-                            <LoadingIcon className="ml-2 w-5 h-5 animate-spin" />
+                            <LoadingIcon className="w-5 h-5 ml-2 animate-spin" />
                         ) : (
-                            <RiArrowRightLine className="ml-2 w-5 h-5" />
+                            <RiArrowRightLine className="w-5 h-5 ml-2" />
                         )}
                     </Button>
                 </div>
                 <div className="relative shrink-0">
-                    <fieldset className="flex items-center justify-center rounded-3xl border border-dashed border-gray-400">
-                        <legend className="mx-auto px-7 text-sm text-gray-100">
+                    <fieldset className="flex items-center justify-center border border-gray-400 border-dashed rounded-3xl">
+                        <legend className="mx-auto text-sm text-gray-100 px-7">
                             Your Maybe card
                         </legend>
                         <MaybeCard
@@ -86,7 +86,7 @@ export function Welcome({ title: stepTitle, onNext }: StepProps) {
                             card={{ details: data }}
                         />
                     </fieldset>
-                    <div className="mt-6 w-full flex justify-center gap-3">
+                    <div className="flex justify-center w-full gap-3 mt-6">
                         <Tooltip content="Share" placement="bottom">
                             <div className="w-full">
                                 <Button
@@ -115,7 +115,7 @@ export function Welcome({ title: stepTitle, onNext }: StepProps) {
                                         !data && 'opacity-50 pointer-events-none'
                                     )}
                                     href={data?.imageUrl}
-                                    download="maybe-card.png"
+                                    download="/assets/maybe-card.png"
                                 >
                                     <RiDownloadLine className="w-5 h-5 text-gray-50" />
                                 </Button>
diff --git a/libs/client/features/src/user-details/UserDetails.tsx b/libs/client/features/src/user-details/UserDetails.tsx
index 5098b7d0..10da0bfe 100644
--- a/libs/client/features/src/user-details/UserDetails.tsx
+++ b/libs/client/features/src/user-details/UserDetails.tsx
@@ -40,7 +40,7 @@ export function UserDetails() {
     }
 
     return (
-        <div className="mt-6 space-y-10 max-w-lg">
+        <div className="max-w-lg mt-6 space-y-10">
             <section>
                 <h4 className="text-lg uppercase">Profile</h4>
                 <LoadingPlaceholder isLoading={profileQuery.isLoading}>
@@ -64,7 +64,7 @@ export function UserDetails() {
                 <h4 className="text-lg uppercase">Account</h4>
                 <LoadingPlaceholder isLoading={profileQuery.isLoading}>
                     <div className="text-base">
-                        <p className="text-gray-50 mb-2">Email address</p>
+                        <p className="mb-2 text-gray-50">Email address</p>
                         <form>
                             <Input
                                 readOnly
@@ -83,7 +83,7 @@ export function UserDetails() {
 
             <section>
                 <h4 className="text-lg uppercase">Danger Zone</h4>
-                <p className="text-base text-gray-100 mb-4">
+                <p className="mb-4 text-base text-gray-100">
                     Deleting your account is a permanent action. If you delete your account, you
                     will no longer be able to sign and all data will be deleted.
                 </p>
@@ -189,8 +189,8 @@ function MaybeCardSection() {
             className="mt-5 text-base"
             onSubmit={handleSubmit((data) => updateProfile.mutate(data))}
         >
-            <p className="text-gray-50 mb-2">Maybe Card</p>
-            <div className="rounded-lg overflow-hidden">
+            <p className="mb-2 text-gray-50">Maybe Card</p>
+            <div className="overflow-hidden rounded-lg">
                 <MaybeCard variant="settings" flipped={isCardFlipped} details={data} />
                 <MaybeCardShareModal
                     isOpen={isShareModalOpen}
@@ -199,7 +199,7 @@ function MaybeCardSection() {
                     card={{ details: data }}
                 />
             </div>
-            <div className="mt-6 w-full flex justify-center gap-3">
+            <div className="flex justify-center w-full gap-3 mt-6">
                 <Tooltip content="Share" placement="bottom">
                     <div className="w-full">
                         <Button
@@ -226,7 +226,7 @@ function MaybeCardSection() {
                             variant="secondary"
                             className={classNames(!data && 'opacity-50 pointer-events-none')}
                             href={data?.imageUrl}
-                            download="maybe-card.png"
+                            download="/assets/maybe-card.png"
                         >
                             <RiDownloadLine className="w-5 h-5 text-gray-50" />
                         </Button>
@@ -264,12 +264,12 @@ function MaybeCardSection() {
 
             <div className="relative mt-6">
                 <label>
-                    <span className="block mb-1 text-base text-gray-50 font-light leading-6">
+                    <span className="block mb-1 text-base font-light leading-6 text-gray-50">
                         Your Maybe
                     </span>
                     <textarea
                         rows={5}
-                        className="block w-full bg-gray-500 text-base placeholder:text-gray-100 rounded border-0 focus:ring-0 resize-none"
+                        className="block w-full text-base bg-gray-500 border-0 rounded resize-none placeholder:text-gray-100 focus:ring-0"
                         placeholder="What's your Maybe?"
                         {...register('maybe', { required: true })}
                         onKeyDown={(e) => e.key === 'Enter' && e.stopPropagation()}