diff --git a/README.md b/README.md
index 95fa1246..98da5a03 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,10 @@
 
 Tracktor is an open-source web application for comprehensive vehicle management. Easily track fuel consumption, maintenance, insurance, and regulatory documents for all your vehicles in one place.
 
+<p align="center">
+  <img src="app/docs/public/screenshots/dashboard.png" alt="Dashboard" width="90%" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+</p>
+
 ## Features
 
 - **Vehicle Management:** Add, edit, and manage multiple vehicles.
@@ -14,6 +18,33 @@ Tracktor is an open-source web application for comprehensive vehicle management.
 - **Dashboard:** Visualize key metrics and upcoming renewals.
 - **User Authentication:** Secure access to your data.
 
+## Screenshots
+
+<p align="center">
+  <h3>Login Page</h3><br>
+  <img src="app/docs/public/screenshots/login.png" alt="Login Page" width="90%" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+</p>
+<p align="center">
+  <h3>Charts</h3><br>
+  <img src="app/docs/public/screenshots/charts.png" alt="Charts" width="90%" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+</p>
+<p align="center">
+  <h3>Fuel Log</h3><br>
+  <img src="app/docs/public/screenshots/fuel.png" alt="Fuel Log" width="90%" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+</p>
+<p align="center">
+  <h3>Maintenance Log</h3><br>
+  <img src="app/docs/public/screenshots/maintenance.png" alt="Maintenance Log" width="90%" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+</p>
+<p align="center">
+  <h3>Insurance Details</h3><br>
+  <img src="app/docs/public/screenshots/insurance.png" alt="Insurance Details" width="90%" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+</p>
+<p align="center">
+  <h3>PUCC Details</h3><br>
+  <img src="app/docs/public/screenshots/pucc.png" alt="PUCC Details" width="90%" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+</p>
+
 ## Tech Stack
 
 - **Frontend:** SvelteKit, Tailwind CSS
diff --git a/app/docs/index.md b/app/docs/index.md
index 50acfa43..5ae1e404 100644
--- a/app/docs/index.md
+++ b/app/docs/index.md
@@ -38,4 +38,6 @@ features:
   - icon: 🔑
     title: User Authentication
     details: Secure access to your data.
----
\ No newline at end of file
+---
+
+<img src="/screenshots/dashboard.png" alt="Dashboard" style="margin-top: 24px; border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
\ No newline at end of file
diff --git a/app/docs/introduction.md b/app/docs/introduction.md
index 690a5ac9..117b0912 100644
--- a/app/docs/introduction.md
+++ b/app/docs/introduction.md
@@ -30,6 +30,36 @@ At its core, Tracktor is a centralized dashboard for all your vehicle-related in
 * **Maintenance Tracking:** Record service history, schedule upcoming maintenance, and receive reminders (future enhancement).
 * **Insurance & Pollution Certificate Management:** Store policy details, upload documents, and get renewal/expiration alerts (future enhancement).
 
+## Screenshots
+
+### Login Page
+
+<img src="/screenshots/login.png" alt="Login Page" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+
+### Dashboard
+
+<img src="/screenshots/dashboard.png" alt="Dashboard" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+
+### Charts
+
+<img src="/screenshots/charts.png" alt="Charts" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+
+### Fuel Log
+
+<img src="/screenshots/fuel.png" alt="Fuel Log" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+
+### Maintenance Log
+
+<img src="/screenshots/maintenance.png" alt="Maintenance Log" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+
+### Insurance Details
+
+<img src="/screenshots/insurance.png" alt="Insurance Details" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+
+### PUCC Details
+
+<img src="/screenshots/pucc.png" alt="PUCC Details" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
+
 ## Non-Functional Strengths
 
 Tracktor is designed for:
diff --git a/app/docs/public/screenshots/charts.png b/app/docs/public/screenshots/charts.png
new file mode 100644
index 00000000..3b5a9c3a
Binary files /dev/null and b/app/docs/public/screenshots/charts.png differ
diff --git a/app/docs/public/screenshots/dashboard.png b/app/docs/public/screenshots/dashboard.png
new file mode 100644
index 00000000..034a5ad7
Binary files /dev/null and b/app/docs/public/screenshots/dashboard.png differ
diff --git a/app/docs/public/screenshots/fuel.png b/app/docs/public/screenshots/fuel.png
new file mode 100644
index 00000000..132f3396
Binary files /dev/null and b/app/docs/public/screenshots/fuel.png differ
diff --git a/app/docs/public/screenshots/insurance.png b/app/docs/public/screenshots/insurance.png
new file mode 100644
index 00000000..94d0d1c8
Binary files /dev/null and b/app/docs/public/screenshots/insurance.png differ
diff --git a/app/docs/public/screenshots/login.png b/app/docs/public/screenshots/login.png
new file mode 100644
index 00000000..ecee14d8
Binary files /dev/null and b/app/docs/public/screenshots/login.png differ
diff --git a/app/docs/public/screenshots/maintenance.png b/app/docs/public/screenshots/maintenance.png
new file mode 100644
index 00000000..fdf99e14
Binary files /dev/null and b/app/docs/public/screenshots/maintenance.png differ
diff --git a/app/docs/public/screenshots/pucc.png b/app/docs/public/screenshots/pucc.png
new file mode 100644
index 00000000..0abd5538
Binary files /dev/null and b/app/docs/public/screenshots/pucc.png differ