diff --git a/index.html b/index.html
index 8a2abec..fa6d121 100644
--- a/index.html
+++ b/index.html
@@ -5,148 +5,25 @@
     Files: <INJECT>cd $CURRENT && ls *.html | python3 $HOME/bscripts/ls_to_a.py</INJECT>
 </p>
 
-        <h1>
-            Welcome, to my WEBSITE!
-        </h1>
-        <div>
-            <p>
-                Welcome to my awesome website,
-                I will Attempt to learn html using it,
-                and you can view my progress here(i guess)...
-            </p>
-            <p>
-                Why am i doing this for myself?
-                Because it is about time I learn to make websites
-                (and i want to really know how bad js is and if ts is actually any good)
-            </p>
-            <p style="background-color: whitesmoke; color: black; text-align: left;">
-                Imma do a lot of dumb shit here, like not centering this text.
-                <br>
-                And also giving it different colors
-            </p>
-            <p>
-                But enough with the games!
-                <h1>
-                    I PRESENT TO YOU: &#129345;&#129345;&#129345;
-                </h1>
-            </p>
-            <p>
-                A button
-            </p>
-            <button onclick="onCoolButtonClick()">This is a cool button, click me</button>
-        </div>
-        <div id="appearing-div" style="visibility: hidden;">
-            <p>
-                As you can see, clicking that button changes the background.
-                <br>
-                But something to note here, while you set colors usually using "#012345"
-                when you retrieve those colors using js, it gives you a string
-                like "rgb(1, 35, 69)" instead, which i find dumb and annoying...
-            </p>
-            <p>
-                Also, i made this part appear only after you clicked the button,
-                because i can!
-            </p>
-            <p>
-                Another thing to note here, is that even tho some stuff
-                might have 2 options(technically) and could be used as a bool,
-                since CSS and everything, you have multiple values for them,
-                so instead of doing "visibility = true" you do "visibility = inherit"
-                <br>
-                (i use inherit because you might never know if the parent is visible
-                or not and we are trying to not cause weird bugs on our first day)
-            </p>
-        </div>
-        <div id="rangeDiv">
-            <p>
-                Now imma make a slider, which may or may not do something extre
-                <br>
-                Only one way to find out!
-            </p>
-            <input type="range" min="0" max="100" value="100" id="alphaSlider" oninput="onSliderInput()">
-        </div>
-        <div id="animated">
-            <p>
-                And now, I will attempt to animate this div
-            </p>
-            <button onclick="animateDiv()">Start the show please</button>
-        </div>
-        <div id="keyframeAnimated">
-            <p>
-                The last animation was made using the `setInterval` and `clearInterval`
-                built in function,
-                but this one will use the `animate` built in function
-                (I really hope it works well)
-            </p>
-            <button onclick="animateDivAgain()">I hope this is better</button>
-            <p>
-                This is indeed MUCH MUCH better. BUT, it is experimental
-            and not supported on everything or something
-            (like Safari, and also IE but that is deprecated).
-            <br>
-            Basically you can set keyframes, and pass some more stuff,
-            but most noteable you dont need to store the id of the interval
-            anywhere and you can simply fire and forget
-            (but just in case you can give it an id which is great)
-        </p>
-        <p>
-            This page is getting crowded so imma attemp at creating an hyper link
-            to another page on the site
-            <br>
-            <a href="another_page.html">I am really not sure how it works</a>
-        </p>
+    <div>
+		<p>
+			Hello and welcome to my personal website
+			<br><br>
+			<i>(if you are looking for the old index it is now <a href = "old_index.html">here</a>)</i>
+		</p>
     </div>
+    <div>
+        <p>
+            While you are here, feel free to navigate the site using the 
+            <code>Folders</code> and <code>Files</code> listings above
+            <br><br>
+            Sometimes pages will link directly to other pages
+            (like <a href = "old_index.html">old_index</a> 
+            which links to <a href = "another_age.html">another_page</a>,
+            or like how this page links to other pages as part of pointing stuff out)
+            
+        </p>
 
-    
-    <script>
-        function onCoolButtonClick() {
-            let bg = document.body.style.getPropertyValue("background-color");
-            if (bg == "rgb(1, 2, 47)") {
-                document.body.style.setProperty("background-color", "rgb(5, 0, 11)");
-            }
-            else {
-                document.body.style.setProperty("background-color", "rgb(1, 2, 47)");
-            }
-            if (document.getElementById("appearing-div").style.visibility == "hidden") {
-                document.getElementById("appearing-div").style.visibility = "inherit";
-            }
-        }
-        function onSliderInput() {
-            let slider = document.getElementById("alphaSlider");
-            let div = document.getElementById("rangeDiv");
-            let value = Number(slider.value) / 100;
-            console.log(value);
-            div.style.color = "rgba(255, 150, 150, " + value + ")";
-        }
-        var divAnimationId = null;
-        function animateDiv() {
-            clearInterval(divAnimationId);
-            let div = document.getElementById("animated");
-            let dir = -0.1;
-            let curr = 0.99;
-            let frame = function() {
-                if(curr <= 0.0) {
-                    dir = 0.1;
-                }
-                if (curr >= 1.0) {
-                    clearInterval(divAnimationId);
-                }
-                else {
-                    curr += dir;
-                    div.style.color = "rgba(255, 150, 150, " + curr + ")";
-                }
-            }
-            divAnimationId = setInterval(frame, 25);
-        }
-        function animateDivAgain() {
-            let div = document.getElementById("keyframeAnimated");
-            div.animate([
-                { color: "rgba(255,150,150, 1.0"},
-                { color: "rgba(255,150,150, 0.0"},
-                { color: "rgba(255,150,150, 1.0"},
-            ],
-            { duration: 500, iterations: 2 }
-            )
-        }
-    </script>
-<INJECT>cat $HOME/template/footer.html</INJECT>
\ No newline at end of file
+    </div>
+        
+<INJECT>cat $HOME/template/footer.html</INJECT>
diff --git a/old_index.html b/old_index.html
new file mode 100644
index 0000000..8a2abec
--- /dev/null
+++ b/old_index.html
@@ -0,0 +1,152 @@
+<INJECT>cat $HOME/template/header.html | sed "s/__PAGE TITLE__/Rusty's website/"</INJECT>
+<p>
+    Folders: <INJECT>cd $CURRENT && ls */ -d | sed 's/\///' | python3 $HOME/bscripts/ls_to_a.py</INJECT>
+    <br>
+    Files: <INJECT>cd $CURRENT && ls *.html | python3 $HOME/bscripts/ls_to_a.py</INJECT>
+</p>
+
+        <h1>
+            Welcome, to my WEBSITE!
+        </h1>
+        <div>
+            <p>
+                Welcome to my awesome website,
+                I will Attempt to learn html using it,
+                and you can view my progress here(i guess)...
+            </p>
+            <p>
+                Why am i doing this for myself?
+                Because it is about time I learn to make websites
+                (and i want to really know how bad js is and if ts is actually any good)
+            </p>
+            <p style="background-color: whitesmoke; color: black; text-align: left;">
+                Imma do a lot of dumb shit here, like not centering this text.
+                <br>
+                And also giving it different colors
+            </p>
+            <p>
+                But enough with the games!
+                <h1>
+                    I PRESENT TO YOU: &#129345;&#129345;&#129345;
+                </h1>
+            </p>
+            <p>
+                A button
+            </p>
+            <button onclick="onCoolButtonClick()">This is a cool button, click me</button>
+        </div>
+        <div id="appearing-div" style="visibility: hidden;">
+            <p>
+                As you can see, clicking that button changes the background.
+                <br>
+                But something to note here, while you set colors usually using "#012345"
+                when you retrieve those colors using js, it gives you a string
+                like "rgb(1, 35, 69)" instead, which i find dumb and annoying...
+            </p>
+            <p>
+                Also, i made this part appear only after you clicked the button,
+                because i can!
+            </p>
+            <p>
+                Another thing to note here, is that even tho some stuff
+                might have 2 options(technically) and could be used as a bool,
+                since CSS and everything, you have multiple values for them,
+                so instead of doing "visibility = true" you do "visibility = inherit"
+                <br>
+                (i use inherit because you might never know if the parent is visible
+                or not and we are trying to not cause weird bugs on our first day)
+            </p>
+        </div>
+        <div id="rangeDiv">
+            <p>
+                Now imma make a slider, which may or may not do something extre
+                <br>
+                Only one way to find out!
+            </p>
+            <input type="range" min="0" max="100" value="100" id="alphaSlider" oninput="onSliderInput()">
+        </div>
+        <div id="animated">
+            <p>
+                And now, I will attempt to animate this div
+            </p>
+            <button onclick="animateDiv()">Start the show please</button>
+        </div>
+        <div id="keyframeAnimated">
+            <p>
+                The last animation was made using the `setInterval` and `clearInterval`
+                built in function,
+                but this one will use the `animate` built in function
+                (I really hope it works well)
+            </p>
+            <button onclick="animateDivAgain()">I hope this is better</button>
+            <p>
+                This is indeed MUCH MUCH better. BUT, it is experimental
+            and not supported on everything or something
+            (like Safari, and also IE but that is deprecated).
+            <br>
+            Basically you can set keyframes, and pass some more stuff,
+            but most noteable you dont need to store the id of the interval
+            anywhere and you can simply fire and forget
+            (but just in case you can give it an id which is great)
+        </p>
+        <p>
+            This page is getting crowded so imma attemp at creating an hyper link
+            to another page on the site
+            <br>
+            <a href="another_page.html">I am really not sure how it works</a>
+        </p>
+    </div>
+
+    
+    <script>
+        function onCoolButtonClick() {
+            let bg = document.body.style.getPropertyValue("background-color");
+            if (bg == "rgb(1, 2, 47)") {
+                document.body.style.setProperty("background-color", "rgb(5, 0, 11)");
+            }
+            else {
+                document.body.style.setProperty("background-color", "rgb(1, 2, 47)");
+            }
+            if (document.getElementById("appearing-div").style.visibility == "hidden") {
+                document.getElementById("appearing-div").style.visibility = "inherit";
+            }
+        }
+        function onSliderInput() {
+            let slider = document.getElementById("alphaSlider");
+            let div = document.getElementById("rangeDiv");
+            let value = Number(slider.value) / 100;
+            console.log(value);
+            div.style.color = "rgba(255, 150, 150, " + value + ")";
+        }
+        var divAnimationId = null;
+        function animateDiv() {
+            clearInterval(divAnimationId);
+            let div = document.getElementById("animated");
+            let dir = -0.1;
+            let curr = 0.99;
+            let frame = function() {
+                if(curr <= 0.0) {
+                    dir = 0.1;
+                }
+                if (curr >= 1.0) {
+                    clearInterval(divAnimationId);
+                }
+                else {
+                    curr += dir;
+                    div.style.color = "rgba(255, 150, 150, " + curr + ")";
+                }
+            }
+            divAnimationId = setInterval(frame, 25);
+        }
+        function animateDivAgain() {
+            let div = document.getElementById("keyframeAnimated");
+            div.animate([
+                { color: "rgba(255,150,150, 1.0"},
+                { color: "rgba(255,150,150, 0.0"},
+                { color: "rgba(255,150,150, 1.0"},
+            ],
+            { duration: 500, iterations: 2 }
+            )
+        }
+    </script>
+<INJECT>cat $HOME/template/footer.html</INJECT>
\ No newline at end of file