diff --git a/src/assets/edit-password.png b/src/assets/edit-password.png
new file mode 100644
index 0000000..2f90123
Binary files /dev/null and b/src/assets/edit-password.png differ
diff --git a/src/assets/edit-profile.png b/src/assets/edit-profile.png
new file mode 100644
index 0000000..90659de
Binary files /dev/null and b/src/assets/edit-profile.png differ
diff --git a/src/assets/login.png b/src/assets/login.png
new file mode 100644
index 0000000..6bf8e7c
Binary files /dev/null and b/src/assets/login.png differ
diff --git a/src/assets/logout.png b/src/assets/logout.png
new file mode 100644
index 0000000..d0a9be7
Binary files /dev/null and b/src/assets/logout.png differ
diff --git a/src/assets/register.png b/src/assets/register.png
new file mode 100644
index 0000000..b432fd4
Binary files /dev/null and b/src/assets/register.png differ
diff --git a/src/assets/settings.png b/src/assets/settings.png
new file mode 100644
index 0000000..c0ac4f1
Binary files /dev/null and b/src/assets/settings.png differ
diff --git a/src/assets/splash.png b/src/assets/splash.png
new file mode 100644
index 0000000..a115e97
Binary files /dev/null and b/src/assets/splash.png differ
diff --git a/src/assets/unavailable.png b/src/assets/unavailable.png
new file mode 100644
index 0000000..92c3e20
Binary files /dev/null and b/src/assets/unavailable.png differ
diff --git a/src/components/Screenshots.tsx b/src/components/Screenshots.tsx
index 9dbf9d7..c04aa91 100644
--- a/src/components/Screenshots.tsx
+++ b/src/components/Screenshots.tsx
@@ -1,19 +1,30 @@
 import Step from "./Step";
-import phoneImage from "../assets/phone.png";
+import splashImage from "../assets/splash.png";
+import loginImage from "../assets/login.png";
+import registerImage from "../assets/register.png";
+import takePhotoImage from "../assets/take-photo.png";
+import verifyImage from "../assets/verify-ingredients.png";
+import suggestionImage from "../assets/get-suggestions.png";
+import unavailableImage from "../assets/unavailable.png";
+import settingsImage from "../assets/settings.png";
+import editProfileImage from "../assets/edit-profile.png"
+import editPassword from "../assets/edit-password.png";
 
 function Screenshots() {
   return (
     <div className="flex flex-col gap-8 items-center">
       <h2 className="text-4xl uppercase text-center font-bold">Screenshots</h2>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 w-full gap-4 container place-items-center">
-        <Step image={phoneImage} />
-        <Step image={phoneImage} />
-        <Step image={phoneImage} />
-        <Step image={phoneImage} />
-        <Step image={phoneImage} />
-        <Step image={phoneImage} />
-        <Step image={phoneImage} />
-        <Step image={phoneImage} />
+        <Step image={splashImage} />
+        <Step image={loginImage} />
+        <Step image={registerImage} />
+        <Step image={takePhotoImage} />
+        <Step image={verifyImage} />
+        <Step image={suggestionImage} />
+        <Step image={unavailableImage} />
+        <Step image={settingsImage} />
+        <Step image={editProfileImage} />
+        <Step image={editPassword} />
       </div>
     </div>
   );