diff --git a/public/images/family-illustration.png b/public/images/family-illustration.png
new file mode 100644
index 0000000..e0568a7
Binary files /dev/null and b/public/images/family-illustration.png differ
diff --git a/public/images/memory-bath.jpg b/public/images/memory-bath.jpg
new file mode 100644
index 0000000..dd02bc6
Binary files /dev/null and b/public/images/memory-bath.jpg differ
diff --git a/public/images/memory-milestone.jpg b/public/images/memory-milestone.jpg
new file mode 100644
index 0000000..e7ec5c6
Binary files /dev/null and b/public/images/memory-milestone.jpg differ
diff --git a/public/images/tia-portrait.png b/public/images/tia-portrait.png
new file mode 100644
index 0000000..3c6e109
Binary files /dev/null and b/public/images/tia-portrait.png differ
diff --git a/src/app/(marketing)/about/page.tsx b/src/app/(marketing)/about/page.tsx
index d0966a5..34440df 100644
--- a/src/app/(marketing)/about/page.tsx
+++ b/src/app/(marketing)/about/page.tsx
@@ -542,7 +542,7 @@ export default function AboutPage() {
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
               className="tia-ps-photo"
-              src="/images/tia-portrait.jpg"
+              src="/images/tia-portrait.png"
               alt="Baby Tia"
             />
             <b>P.S.</b>{" "}
diff --git a/src/components/marketing/PhoneMockup.tsx b/src/components/marketing/PhoneMockup.tsx
index a3c507e..f307b50 100644
--- a/src/components/marketing/PhoneMockup.tsx
+++ b/src/components/marketing/PhoneMockup.tsx
@@ -41,9 +41,9 @@ function HomeScreen() {
 
       {/* Baby card */}
       <div className="mx-3 mb-2 bg-white rounded-2xl shadow-sm px-3 py-2 flex items-center gap-3">
-        <div className="w-10 h-10 rounded-full flex-shrink-0 overflow-hidden border-2 border-rose-100">
+        <div className="w-10 h-10 rounded-full flex-shrink-0 overflow-hidden border-2 border-rose-100 bg-white">
           {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src="/images/tia-portrait.jpg" alt="Viradhya" className="w-full h-full object-cover object-top" />
+          <img src="/images/tia-portrait.png" alt="Viradhya" className="w-full h-full object-cover" style={{ objectPosition: "65% top" }} />
         </div>
         <div className="flex-1">
           <p className="font-semibold text-gray-900 text-[11px]">Viradhya</p>
@@ -220,18 +220,18 @@ function MemoriesScreen() {
       {/* Photo grid */}
       <div className="px-3 grid grid-cols-2 gap-2 flex-1 overflow-hidden">
         {[
-          { src: "/images/tia-portrait.jpg",
-            pos: "top center",
+          { src: "/images/tia-portrait.png",
+            pos: "65% top",
             caption: "First smile 😊" },
-          { src: "https://images.unsplash.com/photo-1555252333-9f8e92e65df9?w=300&h=300&fit=crop&auto=format&q=80",
+          { src: "/images/memory-bath.jpg",
             pos: "center",
-            caption: "Bath time 🛁" },
+            caption: "Tiny toes 🛁" },
           { src: "/images/family-illustration.jpg",
             pos: "top center",
             caption: "With family 🌸" },
-          { src: "https://images.unsplash.com/photo-1519689680058-324335c77eba?w=300&h=300&fit=crop&auto=format&q=80",
-            pos: "center",
-            caption: "8 months! 🎉" },
+          { src: "/images/memory-milestone.jpg",
+            pos: "center top",
+            caption: "Summer fun 😎" },
         ].map(photo => (
           <div key={photo.caption} className="rounded-xl overflow-hidden aspect-square relative">
             {/* eslint-disable-next-line @next/next/no-img-element */}