diff --git a/app/page.tsx b/app/page.tsx
index 753a6ea..b64d4c8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -187,38 +187,22 @@ export default function LandingPage() {
         </div>
 
         <div className="grid md:grid-cols-2 gap-8 mt-8">
-          {/* Demo Feature 1 */}
-          <div className="bg-white rounded-xl shadow-lg overflow-hidden">
-            <div className="aspect-video bg-gradient-to-br from-green-100 to-green-200 flex items-center justify-center">
-              <div className="text-center">
-                <svg className="w-16 h-16 text-green-600 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-                </svg>
-                <p className="font-semibold text-gray-700">Device Analytics</p>
-              </div>
-            </div>
+          {/* Demo Feature 1 - Security Dashboard */}
+          <div className="overflow-hidden rounded-xl shadow-lg bg-gray-50">
+            <img
+              src="/security-dashboard-screenshot.png"
+              alt="Security Alert Dashboard"
+              className="w-full h-auto"
+            />
           </div>
 
           {/* Demo Feature 2 - Admin Panel Screenshot */}
-          <div className="bg-white rounded-xl shadow-lg overflow-hidden">
-            <div className="aspect-video bg-gradient-to-br from-purple-100 to-purple-200 relative overflow-hidden">
-              {/* Desktop: Show full screenshot */}
-              <div className="hidden md:block absolute inset-0">
-                <img
-                  src="/admin-panel-screenshot.png"
-                  alt="Admin Panel Dashboard"
-                  className="w-full h-full object-contain p-2"
-                />
-              </div>
-              {/* Mobile: Show cropped/centered portion */}
-              <div className="md:hidden absolute inset-0">
-                <img
-                  src="/admin-panel-screenshot.png"
-                  alt="Admin Panel Dashboard"
-                  className="w-full h-full object-cover object-center"
-                />
-              </div>
-            </div>
+          <div className="overflow-hidden rounded-xl shadow-lg bg-gray-50">
+            <img
+              src="/admin-panel-screenshot.png"
+              alt="Admin Panel Dashboard"
+              className="w-full h-auto"
+            />
           </div>
         </div>
       </section>
diff --git a/public/admin-panel-screenshot.png b/public/admin-panel-screenshot.png
index ef69169..589e8ea 100644
Binary files a/public/admin-panel-screenshot.png and b/public/admin-panel-screenshot.png differ
diff --git a/public/security-dashboard-screenshot.png b/public/security-dashboard-screenshot.png
new file mode 100644
index 0000000..6db0057
Binary files /dev/null and b/public/security-dashboard-screenshot.png differ