diff --git a/components/About.tsx b/components/About.tsx
index dbc69fe..00c3d37 100644
--- a/components/About.tsx
+++ b/components/About.tsx
@@ -49,22 +49,37 @@ export function About() {
       ref={ref} 
       className="relative py-20 px-4 overflow-hidden"
     >
+      {/* Background Image */}
       <div 
-        className="absolute inset-0 z-0" 
+        className="absolute inset-0 z-0"
         style={{
-          backgroundColor: isDark ? '#1a1e26' : '#ffffff'
+          // backgroundImage: `url('https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          backgroundRepeat: 'no-repeat',
         }}
       />
+      
+      {/* Subtle overlay for readability - keeping background image clearly visible */}
+      <div 
+        className="absolute inset-0 z-[1]" 
+        style={{
+          backgroundColor: isDark ? 'rgba(0, 0, 0, 0.35)' : 'rgba(255, 255, 255, 0.30)'
+        }}
+      />
+      
+      {/* Very subtle gradient overlay */}
       {!isDark && (
-        <div className="absolute inset-0 z-[1] bg-gradient-to-br from-rose-50/50 via-pink-50/50 to-orange-50/50" />
+        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-rose-50/20 via-pink-50/15 to-orange-50/20" />
       )}
       {isDark && (
-        <div className="absolute inset-0 z-[1] bg-gradient-to-br from-gray-900/80 via-gray-800/80 to-gray-900/80" />
+        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-gray-900/25 via-gray-800/20 to-gray-900/25" />
       )}
 
-      <div className="absolute inset-0 overflow-hidden z-[2]">
+      {/* Subtle animated blobs */}
+      <div className="absolute inset-0 overflow-hidden z-[3]">
         <motion.div
-          className="absolute top-10 left-10 w-64 h-64 bg-cyan-100 dark:bg-cyan-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-40 dark:opacity-60"
+          className="absolute top-10 left-10 w-64 h-64 bg-cyan-100 dark:bg-cyan-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
           animate={{
             x: [0, 80, 0],
             y: [0, 40, 0],
@@ -77,7 +92,7 @@ export function About() {
           }}
         />
         <motion.div
-          className="absolute bottom-20 right-10 w-80 h-80 bg-emerald-100 dark:bg-emerald-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-40 dark:opacity-60"
+          className="absolute bottom-20 right-10 w-80 h-80 bg-emerald-100 dark:bg-emerald-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
           animate={{
             x: [0, -80, 0],
             y: [0, 60, 0],
diff --git a/components/ContactSection.tsx b/components/ContactSection.tsx
index 088e3d7..dbbbeda 100644
--- a/components/ContactSection.tsx
+++ b/components/ContactSection.tsx
@@ -39,24 +39,42 @@ export function ContactSection() {
 
   return (
     <section id="contact" className="relative overflow-hidden py-20" ref={ref}>
-      {/* Theme sync like Hero/About/Navbar */}
-      <div className="absolute inset-0 z-0" style={{ backgroundColor: isDark ? "#1a1e26" : "#ffffff" }} />
+      {/* Background Image */}
+      <div 
+        className="absolute inset-0 z-0"
+        style={{
+          // backgroundImage: `url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          backgroundRepeat: 'no-repeat',
+        }}
+      />
+      
+      {/* Subtle overlay for readability - keeping background image clearly visible */}
+      <div 
+        className="absolute inset-0 z-[1]" 
+        style={{
+          backgroundColor: isDark ? 'rgba(0, 0, 0, 0.35)' : 'rgba(255, 255, 255, 0.30)'
+        }}
+      />
+      
+      {/* Very subtle gradient overlay */}
       {!isDark && (
-        <div className="absolute inset-0 z-[1] bg-gradient-to-br from-rose-50/40 via-pink-50/40 to-orange-50/40" />
+        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-rose-50/20 via-pink-50/15 to-orange-50/20" />
       )}
       {isDark && (
-        <div className="absolute inset-0 z-[1] bg-gradient-to-br from-gray-900/70 via-gray-800/70 to-gray-900/70" />
+        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-gray-900/25 via-gray-800/20 to-gray-900/25" />
       )}
 
       {/* Subtle animated blobs */}
-      <div className="absolute inset-0 z-[2] overflow-hidden">
+      <div className="absolute inset-0 z-[3] overflow-hidden">
         <motion.div
-          className={`absolute -top-10 left-10 h-64 w-64 rounded-full blur-3xl ${isDark ? "bg-pink-900/30 opacity-60" : "bg-pink-100 opacity-50"}`}
+          className={`absolute -top-10 left-10 h-64 w-64 rounded-full blur-3xl ${isDark ? "bg-pink-900/30 opacity-50" : "bg-pink-100 opacity-40"}`}
           animate={{ x: [0, 60, 0], y: [0, 40, 0], scale: [1, 1.05, 1] }}
           transition={{ duration: 18, repeat: Infinity, ease: "easeInOut" }}
         />
         <motion.div
-          className={`absolute -bottom-10 right-10 h-72 w-72 rounded-full blur-3xl ${isDark ? "bg-orange-900/30 opacity-60" : "bg-orange-100 opacity-50"}`}
+          className={`absolute -bottom-10 right-10 h-72 w-72 rounded-full blur-3xl ${isDark ? "bg-orange-900/30 opacity-50" : "bg-orange-100 opacity-40"}`}
           animate={{ x: [0, -60, 0], y: [0, -40, 0], scale: [1, 1.08, 1] }}
           transition={{ duration: 22, repeat: Infinity, ease: "easeInOut" }}
         />
@@ -78,37 +96,66 @@ export function ContactSection() {
           </p>
         </motion.div>
 
-        <div className="grid gap-12 lg:grid-cols-2">
+        <div className="grid gap-12 lg:grid-cols-2 lg:items-stretch">
           {/* Left: Illustration replacing cards */}
           <motion.div
             initial={{ opacity: 0, x: -50 }}
             animate={isInView ? { opacity: 1, x: 0 } : {}}
             transition={{ duration: 0.6, delay: 0.2 }}
-            className="relative"
+            className="relative flex"
           >
-            <Card className="bg-card/60 backdrop-blur-sm border border-border/50 overflow-hidden">
-              <CardContent className="p-0">
-                {/* Use a high-quality, license-friendly illustration */}
-                <div className="relative">
-                  <img
-                    src="/3786819.jpg"
-                    alt="Contact illustration"
-                    className="mx-auto w-full max-w-xl p-6 select-none rounded-xl object-cover"
-                    loading="lazy"
-                  />
-                  <motion.div
-                    className="pointer-events-none absolute inset-0"
-                    animate={{ opacity: [0.3, 0.6, 0.3] }}
-                    transition={{ duration: 3, repeat: Infinity }}
-                    style={{ background: "radial-gradient(600px circle at 20% 10%, rgba(244,114,182,0.15), transparent 40%), radial-gradient(600px circle at 80% 80%, rgba(251,146,60,0.12), transparent 40%)" }}
-                  />
-                </div>
-                <div className="px-6 pb-6">
-                  <h3 className="text-2xl font-bold mb-2 text-foreground">Let's Begin Your Healing Journey</h3>
-                  <p className="text-muted-foreground leading-relaxed">
-                    Taking the first step toward therapy can feel daunting, but you're not alone. I'm here to support
-                    you through every stage of your journey toward wellness and growth.
-                  </p>
+            <Card className="bg-gradient-to-br from-rose-100/30 via-pink-100/30 to-orange-100/30 dark:from-rose-900/20 dark:via-pink-900/20 dark:to-orange-900/20 backdrop-blur-sm border border-border/50 overflow-hidden relative h-full flex flex-col rounded-3xl">
+              <CardContent className="p-0 flex-1 flex flex-col">
+                {/* Background image for the card */}
+                <div 
+                  className="absolute inset-0 z-0 rounded-3xl"
+                  style={{
+                    // backgroundImage: `url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80')`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                    backgroundRepeat: 'no-repeat',
+                    opacity: 0.3,
+                  }}
+                />
+                
+                {/* Content */}
+                <div className="relative z-10 p-6 flex-1 flex flex-col">
+                  {/* Image and text side by side */}
+                  <div className="flex flex-col sm:flex-row items-center sm:items-start gap-6 flex-1">
+                    {/* Modern therapy-related illustration */}
+                    <div className="relative flex-shrink-0">
+                      <img
+                        src="/mmmfil.jpeg"
+                        alt="Nathalie Mac Guffie, LCSW - Your therapist"
+                        className="w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 select-none rounded-full object-cover shadow-lg"
+                        loading="lazy"
+                      />
+                      <motion.div
+                        className="pointer-events-none absolute inset-0 rounded-full"
+                        animate={{ opacity: [0.3, 0.6, 0.3] }}
+                        transition={{ duration: 3, repeat: Infinity }}
+                        style={{ background: "radial-gradient(circle, rgba(244,114,182,0.15), transparent 70%), radial-gradient(circle, rgba(251,146,60,0.12), transparent 70%)" }}
+                      />
+                    </div>
+                    {/* Text content */}
+                    <div className="flex-1 text-center sm:text-left flex flex-col justify-center">
+                      <h3 className="text-2xl font-bold mb-4 text-foreground">Let's Begin Your Healing Journey</h3>
+                      <div className="space-y-3 text-muted-foreground leading-relaxed">
+                        <p>
+                          Taking the first step toward therapy can feel daunting, but you're not alone. I'm here to support
+                          you through every stage of your journey toward wellness and growth.
+                        </p>
+                        <p>
+                          Whether you're seeking help for yourself or your child, I provide a warm, non-judgmental space where 
+                          healing can begin. My approach is relationship-based and tailored to meet your unique needs.
+                        </p>
+                        <p>
+                          Reach out today to schedule a consultation. Together, we can explore how therapy can support you 
+                          in creating positive change and building resilience.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </CardContent>
             </Card>
diff --git a/components/Hero.tsx b/components/Hero.tsx
index 98b1b08..f2ee685 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -28,22 +28,37 @@ export function HeroSection() {
       id="home"
       className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20"
     >
+      {/* Background Image */}
       <div 
-        className="absolute inset-0 z-0" 
+        className="absolute inset-0 z-0"
         style={{
-          backgroundColor: isDark ? '#1a1e26' : '#ffffff'
+          backgroundImage: `url('https://images.unsplash.com/photo-1506126613408-eca07ce68773?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          backgroundRepeat: 'no-repeat',
         }}
       />
+      
+      {/* Subtle dark overlay for better text readability - keeping background image clearly visible */}
+      <div 
+        className="absolute inset-0 z-[1]" 
+        style={{
+          backgroundColor: isDark ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.25)'
+        }}
+      />
+      
+      {/* Very subtle gradient overlay for warmth */}
       {!isDark && (
-        <div className="absolute inset-0 z-[1] bg-gradient-to-br from-rose-50/50 via-pink-50/50 to-orange-50/50" />
+        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-rose-50/20 via-pink-50/15 to-orange-50/20" />
       )}
       {isDark && (
-        <div className="absolute inset-0 z-[1] bg-gradient-to-br from-gray-900/80 via-gray-800/80 to-gray-900/80" />
+        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-gray-900/25 via-gray-800/20 to-gray-900/25" />
       )}
 
-      <div className="absolute inset-0 overflow-hidden z-[2]">
+      {/* Subtle animated blobs for depth */}
+      <div className="absolute inset-0 overflow-hidden z-[3]">
         <motion.div
-          className="absolute top-20 left-10 w-72 h-72 bg-rose-100 dark:bg-rose-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-50 dark:opacity-70"
+          className="absolute top-20 left-10 w-72 h-72 bg-rose-100 dark:bg-rose-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-40 dark:opacity-50"
           animate={{
             x: [0, 100, 0],
             y: [0, 50, 0],
@@ -56,7 +71,7 @@ export function HeroSection() {
           }}
         />
         <motion.div
-          className="absolute top-40 right-10 w-96 h-96 bg-pink-100 dark:bg-pink-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-50 dark:opacity-70"
+          className="absolute top-40 right-10 w-96 h-96 bg-pink-100 dark:bg-pink-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-40 dark:opacity-50"
           animate={{
             x: [0, -100, 0],
             y: [0, 100, 0],
@@ -69,7 +84,7 @@ export function HeroSection() {
           }}
         />
         <motion.div
-          className="absolute bottom-20 left-1/3 w-80 h-80 bg-orange-100 dark:bg-orange-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-50 dark:opacity-70"
+          className="absolute bottom-20 left-1/3 w-80 h-80 bg-orange-100 dark:bg-orange-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-40 dark:opacity-50"
           animate={{
             x: [0, 50, 0],
             y: [0, -50, 0],
@@ -91,7 +106,7 @@ export function HeroSection() {
             transition={{ duration: 0.8 }}
           >
             <motion.h1
-              className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent"
+              className="text-5xl md:text-7xl font-bold mb-6 text-white drop-shadow-lg"
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.8, delay: 0.2 }}
@@ -100,7 +115,7 @@ export function HeroSection() {
             </motion.h1>
 
             <motion.p
-              className="text-xl md:text-2xl text-muted-foreground mb-4"
+              className="text-xl md:text-2xl text-white/95 mb-4 drop-shadow-md"
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.8, delay: 0.4 }}
@@ -109,7 +124,7 @@ export function HeroSection() {
             </motion.p>
 
             <motion.p
-              className="text-lg md:text-xl text-muted-foreground mb-8 max-w-2xl mx-auto"
+              className="text-lg md:text-xl text-white/90 mb-8 max-w-2xl mx-auto drop-shadow-md"
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.8, delay: 0.6 }}
diff --git a/components/Services.tsx b/components/Services.tsx
index 7aaea79..176de53 100644
--- a/components/Services.tsx
+++ b/components/Services.tsx
@@ -30,31 +30,37 @@ export function Services() {
       icon: Brain,
       title: "Trauma-Focused Therapy",
       description: "Evidence-based TF-CBT to help children process and heal from traumatic experiences in a safe, supportive environment.",
+      backgroundImage: "https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
     },
     {
       icon: Sparkles,
       title: "Play Therapy",
       description: "Child-centered play therapy allowing children to express themselves naturally and build emotional regulation skills.",
+      backgroundImage: "https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
     },
     {
       icon: Baby,
       title: "Infant Mental Health",
       description: "Specialized support for infants and toddlers, focusing on early attachment, developmental milestones, and caregiver relationships.",
+      backgroundImage: "https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
     },
     {
       icon: Users2,
       title: "Dyadic Therapy",
       description: "Strengthening parent-child relationships through interactive sessions that enhance communication and connection.",
+      backgroundImage: "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
     },
     {
       icon: HeartHandshake,
       title: "Social-Emotional Support",
       description: "Building emotional literacy and self-regulation skills to help children navigate relationships and challenges.",
+      backgroundImage: "https://images.unsplash.com/photo-1497486751825-1233686d5d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
     },
     {
       icon: Shield,
       title: "Relationship-Based Care",
       description: "Fostering healing through nurturing therapeutic relationships and caregiver collaboration.",
+      backgroundImage: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
     },
   ];
 
@@ -64,22 +70,37 @@ export function Services() {
       ref={ref} 
       className="relative py-20 px-4 overflow-hidden"
     >
+      {/* Background Image */}
       <div 
-        className="absolute inset-0 z-0" 
+        className="absolute inset-0 z-0"
         style={{
-          backgroundColor: isDark ? '#1a1e26' : '#ffffff'
+          backgroundImage: `url('/large.jpeg')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          backgroundRepeat: 'no-repeat',
         }}
       />
+      
+      {/* Minimal overlay - allowing background image to show at near original opaqueness */}
+      <div 
+        className="absolute inset-0 z-[1]" 
+        style={{
+          backgroundColor: isDark ? 'rgba(0, 0, 0, 0.15)' : 'rgba(255, 255, 255, 0.10)'
+        }}
+      />
+      
+      {/* Very subtle gradient overlay */}
       {!isDark && (
-        <div className="absolute inset-0 z-[1] bg-gradient-to-br from-rose-50/50 via-pink-50/50 to-orange-50/50" />
+        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-rose-50/10 via-pink-50/8 to-orange-50/10" />
       )}
       {isDark && (
-        <div className="absolute inset-0 z-[1] bg-gradient-to-br from-gray-900/80 via-gray-800/80 to-gray-900/80" />
+        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-gray-900/10 via-gray-800/8 to-gray-900/10" />
       )}
 
-      <div className="absolute inset-0 overflow-hidden z-[2]">
+      {/* Subtle animated blobs */}
+      <div className="absolute inset-0 overflow-hidden z-[3]">
         <motion.div
-          className="absolute top-20 right-20 w-72 h-72 bg-pink-100 dark:bg-pink-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-40 dark:opacity-60"
+          className="absolute top-20 right-20 w-72 h-72 bg-pink-100 dark:bg-pink-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
           animate={{
             x: [0, -90, 0],
             y: [0, 50, 0],
@@ -92,7 +113,7 @@ export function Services() {
           }}
         />
         <motion.div
-          className="absolute bottom-10 left-20 w-96 h-96 bg-orange-100 dark:bg-orange-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-40 dark:opacity-60"
+          className="absolute bottom-10 left-20 w-96 h-96 bg-orange-100 dark:bg-orange-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
           animate={{
             x: [0, 70, 0],
             y: [0, -60, 0],
@@ -142,29 +163,36 @@ export function Services() {
                 transition={{ duration: 0.5, delay: index * 0.1 }}
                 className="group bg-card/50 backdrop-blur-sm rounded-2xl p-6 border border-border/50 hover:border-rose-500/50 hover:shadow-lg hover:shadow-rose-500/10 hover:scale-105 transition-all duration-300 cursor-pointer"
               >
-                <motion.div 
-                  className="bg-gradient-to-br from-rose-500/20 via-pink-500/20 to-orange-500/20 dark:from-rose-500/30 dark:via-pink-500/30 dark:to-orange-500/30 w-14 h-14 rounded-xl flex items-center justify-center mb-4"
-                  whileHover={{ scale: 1.1, rotate: 5 }}
-                  transition={{ duration: 0.2 }}
-                >
-                  <Icon className="h-7 w-7 text-rose-600 dark:text-rose-400" />
-                </motion.div>
-                <motion.h3
-                  className="text-xl font-semibold mb-3 text-foreground"
-                  initial={{ opacity: 0 }}
-                  animate={isInView ? { opacity: 1 } : {}}
-                  transition={{ duration: 0.5, delay: 0.3 + index * 0.1 }}
-                >
-                  {service.title}
-                </motion.h3>
-                <motion.p
-                  className="text-muted-foreground leading-relaxed"
-                  initial={{ opacity: 0 }}
-                  animate={isInView ? { opacity: 1 } : {}}
-                  transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
-                >
-                  {service.description}
-                </motion.p>
+                {/* Content */}
+                <div className="relative z-10">
+                  <motion.div 
+                    className="w-16 h-16 rounded-xl overflow-hidden mb-4 shadow-lg"
+                    whileHover={{ scale: 1.1, rotate: 5 }}
+                    transition={{ duration: 0.2 }}
+                  >
+                    <img
+                      src={service.backgroundImage}
+                      alt={service.title}
+                      className="w-full h-full object-cover"
+                    />
+                  </motion.div>
+                  <motion.h3
+                    className="text-xl font-semibold mb-3 text-foreground"
+                    initial={{ opacity: 0 }}
+                    animate={isInView ? { opacity: 1 } : {}}
+                    transition={{ duration: 0.5, delay: 0.3 + index * 0.1 }}
+                  >
+                    {service.title}
+                  </motion.h3>
+                  <motion.p
+                    className="text-muted-foreground leading-relaxed"
+                    initial={{ opacity: 0 }}
+                    animate={isInView ? { opacity: 1 } : {}}
+                    transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
+                  >
+                    {service.description}
+                  </motion.p>
+                </div>
               </motion.div>
             );
           })}
diff --git a/components/ui/toaster.tsx b/components/ui/toaster.tsx
index 1d7fb87..896a003 100644
--- a/components/ui/toaster.tsx
+++ b/components/ui/toaster.tsx
@@ -6,3 +6,4 @@ export function Toaster() {
 }
 
 
+
diff --git a/public/hshot.jpeg b/public/hshot.jpeg
new file mode 100644
index 0000000..d3f3552
Binary files /dev/null and b/public/hshot.jpeg differ
diff --git a/public/large.jpeg b/public/large.jpeg
new file mode 100644
index 0000000..d933158
Binary files /dev/null and b/public/large.jpeg differ
diff --git a/public/mmmfil.jpeg b/public/mmmfil.jpeg
new file mode 100644
index 0000000..c56648b
Binary files /dev/null and b/public/mmmfil.jpeg differ