diff --git a/public/design-your-work-future.png b/public/design-your-work-future.png
new file mode 100644
index 0000000..0637c6d
Binary files /dev/null and b/public/design-your-work-future.png differ
diff --git a/src/app/components/StaffplanDemoContainer.tsx b/src/app/components/StaffplanDemoContainer.tsx
index 3f2d0e5..7831b6a 100644
--- a/src/app/components/StaffplanDemoContainer.tsx
+++ b/src/app/components/StaffplanDemoContainer.tsx
@@ -8,10 +8,8 @@ interface StaffplanDemoContainerProps {
 const StaffplanDemoContainer: React.FC<StaffplanDemoContainerProps> = ({ children }) => {
     return (
         <section className="flex flex-col items-center justify-between bg-demo-gradient pb-6 px-4">
-            <div className="relative hidden sm:flex justify-center w-[270px] h-[50px] mt-32">
-                <Image src="/tryStaffplan.png"
-                    fill
-                    className="object-contain" alt="Design Your Work Future" />
+            <div className="sm:flex justify-center h-[60px] mt-32">
+                <h1 style={{ fontWeight: 'bold', fontSize: '2.5rem', }}>Design your work future.</h1>
             </div>
             {children}
             <div className="relative w-full h-full px-8 aspect-[21/19.4] max-w-[1238px] sm:aspect-[21/7] my-6 sm:mb-6 mt-10">
@@ -26,6 +24,7 @@ const StaffplanDemoContainer: React.FC<StaffplanDemoContainerProps> = ({ childre
                     alt="StaffPlan Demo"
                     fill
                     className="sm:hidden block rounded-lg object-cover"
+                    style={{ marginTop: '20px' }}
                 />
             </div>
             <RoundedButton text="Sign up!" variant="filled" size="large" href="https://app.staffplan.com/registrations/new" />