diff --git a/Visual 2.png b/Visual 2.png
new file mode 100644
index 0000000..9eda826
Binary files /dev/null and b/Visual 2.png differ
diff --git a/darkmode.css b/darkmode.css
new file mode 100644
index 0000000..cee3f62
--- /dev/null
+++ b/darkmode.css
@@ -0,0 +1,14 @@
+
+body.dark-mode {
+  background-color: #121212;
+  color: #e0e0e0;
+}
+
+.dark-mode a {
+  color: #90caf9;
+}
+
+.dark-mode header, .dark-mode footer {
+  background-color: #1f1f1f;
+  color: #fff;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index b756b85..9a31d9c 100644
--- a/index.html
+++ b/index.html
@@ -84,7 +84,7 @@
                 <td><a href="./website/pages/license.html" class="table_link">License</a></td>
             </tr>
             <tr>
-                <td><a href="404.html" class="table_link">Stunning Visuals</a></td>
+                <td><a href="stunningvisuals.html" class="table_link">Stunning Visuals</a></td>
             </tr>
             <tr>
                 <td><a href="https://github.com/multiverseweb/Dataverse" class="table_link">Github Repository</a></td>
diff --git a/stunningvisuals.html b/stunningvisuals.html
new file mode 100644
index 0000000..41e433a
--- /dev/null
+++ b/stunningvisuals.html
@@ -0,0 +1,41 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Stunning Visuals - Dataverse</title>
+  <link rel="stylesheet" href="style.css"/>
+  <link rel="stylesheet" href="darkmode.css" />
+</head>
+<body>
+  <button onclick="toggleDarkMode()" style="position: fixed; top: 10px; right: 10px; z-index: 999;">Toggle Dark Mode</button>
+  <header>
+    <h1 style="text-align: center;">Stunning Visuals</h1>
+  </header>
+  <main style="padding: 20px; text-align: center;">
+    <p>Here are some beautiful examples of what Dataverse can create!</p>
+    <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding-top: 20px;">
+      <img src= "visual 1.png" width="500" height = "500" alt="image 1" />
+      <img src= "Visual 2.png" width="500" height = "500" alt="image 2" />
+      <img src="visual 3.png" width="500" height = "500" alt="image 3" />
+    </div>
+  </main>
+  <footer style="text-align: center; margin-top: 30px;">
+    <a href="index.html">← Back to Home</a>
+  </footer>
+
+  <script>
+    function toggleDarkMode() {
+      document.body.classList.toggle("dark-mode");
+      localStorage.setItem("darkMode", document.body.classList.contains("dark-mode"));
+    }
+
+    window.onload = () => {
+      if (localStorage.getItem("darkMode") === "true") {
+        document.body.classList.add("dark-mode");
+      }
+    };
+  </script>
+</body>
+</html>
diff --git a/visual 1.png b/visual 1.png
new file mode 100644
index 0000000..561c141
Binary files /dev/null and b/visual 1.png differ
diff --git a/visual 3.png b/visual 3.png
new file mode 100644
index 0000000..eaa0f2b
Binary files /dev/null and b/visual 3.png differ
