diff --git a/assets/ComicSansMS3.ttf b/assets/ComicSansMS3.ttf
new file mode 100644
index 0000000..da55369
Binary files /dev/null and b/assets/ComicSansMS3.ttf differ
diff --git a/assets/moon-icon.svg b/assets/moon-icon.svg
new file mode 100644
index 0000000..67f6739
--- /dev/null
+++ b/assets/moon-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon-fill" viewBox="0 0 16 16">
+  <path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/>
+</svg>
\ No newline at end of file
diff --git a/assets/sun-icon.svg b/assets/sun-icon.svg
new file mode 100644
index 0000000..785bd0c
--- /dev/null
+++ b/assets/sun-icon.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="16"
+   height="16"
+   fill="currentColor"
+   class="bi bi-sun-fill"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="sun-icon.svg"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="49.25"
+     inkscape:cx="7.2385787"
+     inkscape:cy="8"
+     inkscape:window-width="1920"
+     inkscape:window-height="986"
+     inkscape:window-x="-11"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"
+     id="path2"
+     style="fill:#ffffff;fill-opacity:1" />
+</svg>
diff --git a/index.html b/index.html
index 1d9d0f1..e6042c4 100644
--- a/index.html
+++ b/index.html
@@ -11,17 +11,67 @@
 
     <title>Jason's Webpage</title>
     <style>
+
+        /* Author (of background texture):
+            Temani Afif
+            November 12, 2022 
+        */
+        html {
+            --s: 50px;
+            --c: #191b22; /* main bg color */
+            --_s: calc(2*var(--s)) calc(2*var(--s));
+            --_g: 35.36% 35.36% at;
+            --_c: #0000 66%,#20222a /* lines color */ 68% 70%,#0000 72%;
+            background: 
+              radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s), 
+              radial-gradient(var(--_g) 0 75%,var(--_c)) var(--s) var(--s)/var(--_s), 
+              radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s), 
+              radial-gradient(var(--_g) 0 75%,var(--_c)) 0 0/var(--_s), 
+              repeating-conic-gradient(var(--c) 0 25%,#0000 0 50%) 0 0/var(--_s), 
+              radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s) var(--c);
+            background-attachment: fixed;
+            transition: background 0.2s linear;
+        }
+        /* Dark mode styles when 'dark-mode' class is added to html */
+        html.light-mode {
+            --c: #f2f2f2; /* main bg color */
+            --_c: #0000 66%, #e3e3e3 /* lines color */ 68% 70%, #0000 72%;
+        }
+
+        @font-face {
+            font-family: 'Comic Sans MS';
+            src: url("assets/ComicSansMS3.ttf");
+        }
         body {
-            background-color: #f0f0f0;
+            /* background-color: #f0f0f0; */
             font-family: "Comic Sans MS", sans-serif;
+            color: #ffffff;
+        }
+        body.light-mode {
             color: #000000;
         }
+        #themeToggle {
+            position: fixed;
+            top: 30px;
+            right: 35px;
+            cursor: pointer;
+            width: 20px;
+            height: 20px;
+            background-size: cover;
+        }
+        /* Light and dark mode SVG images */
+        #themeToggle.light {
+            background-image: url('assets/sun-icon.svg'); /* Path to your light mode SVG */
+        }
+        #themeToggle.dark {
+            background-image: url('assets/moon-icon.svg'); /* Path to your dark mode SVG */
+        }
         .container {
             width: 80%;
             margin: 0 auto;
         }
         a {
-            color: blue;
+            color: #FF90A5;
             text-decoration: none;
         }
         a:hover {
@@ -38,7 +88,7 @@
             color: #000000;
         }
         marquee {
-            color: #FF0000;
+            color: #FF90A5;
             margin-bottom: 20px;
         }
         table {
@@ -112,7 +162,7 @@
         <div style="text-align: center; margin-top: 5px;">
         <h1 id="welcomeText">Jason's Corner of The Web</h1>
         </div>
-        <marquee>Welcome to my website! Enjoy your stay :)</marquee>
+        <marquee>Welcome to my website! Enjoy your stay!  &#x14da;&#x160f;&#x15e2; </marquee>
 
         <table cellpadding="10" cellspacing="0">
             <tr>
@@ -128,6 +178,7 @@ <h3> </h3>
                 <!-- Main Content -->
                 <td width="80%">
                     <h2>Home</h2>
+                    <hr>
                     <p>Hello there! My name is Jason, and this is my webpage. <br> 
             This is how I wanted my site to look when I had just started browsing the internet.
 			</p> 
@@ -147,7 +198,8 @@ <h2>Home</h2>
         <!-- Toggle Nyancat mode -->
         <button id="nyancatToggle">nyancat mode</button>
 	</div>
-        <p>For a more modern experience, <a href="index-new.html">click here to switch to my "modern" site</a> (written up pre-chatgpt <3). </p>
+    <div id="themeToggle" class="light"></div>
+            <p><h6><a href="index-new.html">Click here</a> to switch to my "modern" site (written up pre-chatgpt <3).</h6></p>
 
         <script>
             window.onload = function() {
@@ -167,6 +219,28 @@ <h2>Home</h2>
             };
           </script>
 
+<script>
+    // Get references to HTML and the toggle button
+    const htmlElement = document.documentElement;
+    const bodyElement = document.body;
+    const toggleButton = document.getElementById('themeToggle');
+
+    // Event listener for toggle button
+    toggleButton.addEventListener('click', () => {
+        htmlElement.classList.toggle('light-mode');
+        bodyElement.classList.toggle('light-mode');
+        
+        // Switch the button icon between light and dark mode
+        if (htmlElement.classList.contains('light-mode')) {
+            toggleButton.classList.remove('light');
+            toggleButton.classList.add('dark');
+        } else {
+            toggleButton.classList.remove('dark');
+            toggleButton.classList.add('light');
+        }
+    });
+</script>
+
 <script>
     /******************************************
     * Cursor trailer script adapted from Brian Caputo's code: