diff --git a/index.html b/index.html
index f5c876f..c32686d 100644
--- a/index.html
+++ b/index.html
@@ -1,105 +1,132 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
-        <title>Blorb</title>
-        <link href="https://raw.githubusercontent.com/confusedcatgirl/confusedcatgirl.github.io/main/icon.png" rel="shortcut icon" type="image/x-icon">
-    </head>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Blorb's Website</title>
+        <link rel="icon" type="image/x-icon" href="https://confusedblorb.org/icon.png">
+        <link rel="stylesheet" href="style.css">
+
+        <script>
+            var getJSON = function(url, callback) {
+                var xhr = new XMLHttpRequest();
+                xhr.open('GET', url, true);
+                xhr.responseType = 'json';
+                xhr.onload = function() {
+                    var status = xhr.status;
+                    if (status === 200) {
+                        callback(null, xhr.response);
+                    } else {
+                        callback(status, xhr.response);
+                    }
+                };
+                xhr.send();
+            };
     
-    <body class="body">
+            getJSON('https://confusedblorb.org/news.json', function(err, data) {
+                news1title.textContent = data.articles[0].title
+                news1date.textContent = data.articles[0].date
+                news1image.src = data.articles[0].image
     
-        <div class="box">
-            <div>
-                <img src="https://raw.githubusercontent.com/confusedcatgirl/confusedcatgirl.github.io/main/blorb.webp" class="banner">
-                <a><br><br><br></a>
-            </div>
-            
-            <div style="display: flex; justify-content: center; align-items: center;">
-                <a href="https://twitch.tv/confusedcatgirl" id="twitch"><img src="https://raw.githubusercontent.com/confusedcatgirl/confusedcatgirl.github.io/main/icons/twitch.webp" class="icon"></a>
-                <a href="https://github.com/confusedcatgirl" id="github"><img src="https://raw.githubusercontent.com/confusedcatgirl/confusedcatgirl.github.io/main/icons/github.webp" class="icon"></a>
-                <a href="https://soundcloud.com/confusedcatgirl" id="soundcloud"><img src="https://raw.githubusercontent.com/confusedcatgirl/confusedcatgirl.github.io/main/icons/soundcloud.webp" class="icon"></a>
+                news2title.textContent = data.articles[1].title
+                news2date.textContent = data.articles[1].date
+                news2image.src = data.articles[1].image
+    
+                news3title.textContent = data.articles[2].title
+                news3date.textContent = data.articles[2].date
+                news3image.src = data.articles[2].image
+            }); 
+        </script>
+    </head>
+
+    <body>
+        <img src="https://confusedblorb.org/blorb.webp" class="banner">
+        
+        <div class="topnav">
+            <a class="active" href="#home">Home</a>
+            <a class="inactive" href="#news">News</a>
+            <a class="inactive" href="#cloud">Cloud</a>
+            <a class="inactive" href="#contact">Contact</a>
+            <a class="inactive" href="#about">About</a>
+        </div>
+        
+        <div class="text_area" id="home">
+            <h2>Home</h2>
+            <p>Welcome to my little page!</p>
+            <p>I am Blorb, also known as confusedcatgirl, and I generate AI Artifacts as a Hobby!</p>
+            <p>I also like to draw sometimes, and code in various languages from time to time.</p>
+            <p>Most of the time, I am pretty laid back, and I like to talk about video games too!</p>
+            <p>I like to mess around with game engines, and see what I can make with them.</p>
+            <br>
+            <p>While I like to use AI tools, I am extremely hypocritical about using AI in business,</p>
+            <p>or aggressively promoting it, or calling things that should not be called that an "AI".</p>
+            <p>I also believe that AI is a tool that should be used more carefully, and not to create</p>
+            <p>stuff like deepfakes. Another one of my beliefs is that AI media should be something</p>
+            <p>that cannot be demanded money for. After all, it is essentially just copying homework.</p>
+            <br>
+            <p>This page is rather short as of right now, but I hope to extend it into a lot more!</p>
+        </div>
+
+        <div class="text_area" id="news">
+            <h2>News</h2>
+            <div class="news_area">
+                <div class="news_div">
+                    <h3 id="news1title"></h3>
+                    <p id="news1date"></p>
+                    <img class="news_image" id="news1image" src="">
+                </div>
+
+                <div class="news_div">
+                    <h3 id="news2title"></h3>
+                    <p id="news2date"></p>
+                    <img class="news_image" id="news2image" src="">
+                </div>
+
+                <div class="news_div">
+                    <h3 id="news3title"></h3>
+                    <p id="news3date"></p>
+                    <img class="news_image" id="news3image" src="">
+                </div>
             </div>
-            
-            <a><br></a><p id="separator1">Partially NSFW</p>
-            
-            <div>
-                <a href="https://x.com/darkmothlady" id="twitter"><img src="https://raw.githubusercontent.com/confusedcatgirl/confusedcatgirl.github.io/main/icons/twitter.webp" class="icon"></a>
-                <a href="https://anilist.co/user/confusedcatgirl" id="anilist"><img src="https://raw.githubusercontent.com/confusedcatgirl/confusedcatgirl.github.io/main/icons/anilist.webp" class="icon"></a>
+            <a href="news.html" class="button">More News</a>
+        </div>
+
+        <div class="text_area" id="cloud">
+            <h2>Cloud</h2>
+            <p>Running locally at my place, this server is only available to a select few. It has been properly configured to utilize HSTS and HTTPS.</p>
+            <p>Only a select few, including myself, have access to it, mostly to manage tasks more easily, but also to store files etc.</p>
+            <p>It is based on nextcloud, and is very easy to set up for your own home usage, so go check them out!</p>
+            <a href="https://cloud.confusedblorb.org/index.php/" style="display: block; margin: 10px; text-align: center; max-width: 100%;" class="button">
+                Continue to the Cloud Login</a>
+        </div>
+
+        <div class="text_area" id="contact">
+            <h2>Contact</h2>
+
+            <p class="centered">Safe for Work:</p>
+            <div class="centered">
+                <a href="https://twitch.tv/confusedcatgirl"><img src="https://confusedblorb.org/icons/twitch.webp" class="icon"></a>
+                <a href="https://github.com/confusedcatgirl"><img src="https://confusedblorb.org/icons/github.webp" class="icon"></a>
             </div>
             
-            <a><br></a><p id="separator2">NSFW</p>
-            
-            <div style="display: flex; justify-content: center; align-items: center;">
-                <a href="https://www.deviantart.com/confusedcatgirl" id="deviantart"><img src="https://raw.githubusercontent.com/confusedcatgirl/confusedcatgirl.github.io/main/icons/deviantart.webp" class="icon"></a>
+            <p class="centered">Can contain NSFW content:</p>
+            <div class="centered">
+                <a href="https://x.com/darkmothlady"><img src="https://confusedblorb.org/icons/twitter.webp" class="icon"></a>
+                <a href="https://anilist.co/user/confusedcatgirl"><img src="https://confusedblorb.org/icons/anilist.webp" class="icon"></a>
             </div>
             
-            <div id="info" style="font-size: 75%; display: inline;">
-                <a><br>© 2023 - 2024 confusedcatgirl - Banner by </a>
-                <a href="https://mooshieblob.com">mooshieblob</a>
+            <p class="centered">Exclusively NSFW:</p>
+            <div class="centered">
+                <a href="https://www.deviantart.com/confusedcatgirl"><img src="https://confusedblorb.org/icons/deviantart.webp" class="icon"></a>
             </div>
         </div>
-    
-    
-    <style>
-        html { height: 100%; }
-    
-        * { font-family: 'Trebuchet MS', sans-serif; }
-    
-        body {
-            margin: 0;
-            color: #333;
-            background-color: #fff;
-            min-height: 100%;
-            margin: 0;
-            font-size: 16px;
-            line-height: 20px;
-            background-color: #eef3ff;
-            background-image: url("https://raw.githubusercontent.com/confusedcatgirl/confusedcatgirl.github.io/main/background.webp");
-            background-position: 50%;
-            background-size: cover;
-            background-clip: border-box;
-            background-repeat: no-repeat;
-            background-attachment: fixed;
-            padding-top: 38px;
-            padding-left: 59px;
-            padding-right: 59px;
-        }
-    
-        html, body {
-            margin: 0;
-            height: 100%;
-            overflow: hidden
-        }
-    
-        .box {
-            background-color: rgba(160, 160, 255, 0.95);
-            border-radius: 15px;
-            display: flex;
-            justify-content: center;
-            flex-direction: column;
-            align-items: center;
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            font-size: 120%;
-            padding: 25px 25px 5px 25px;
-            width: 55%;
-            box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.9), 0 6px 50px 0 rgba(0, 0, 0, 0.40);
-        }
-        
-        .banner {
-            width: 75%;
-            transform: translate(16%, 0%);
-        }
-        
-        .icon {
-            max-width: 64px;
-        }
-    
-        p {
-            font-size: 75%;
-        }
-    </style>
 
-</body></html>
+        <div class="text_area">
+            <h2 id="about">About</h2>
+            <p>© 2023 - 2024 confusedcatgirl</p>
+            <p>Images used in the News Section have their links in "confusedblorb.org/news.json". These belong to their respective owners.</p>
+            <a style="padding-left: 32px">Banner by </a><a href="https://www.mooshieblob.com/">mooshieblob 2024</a><br><br>
+            <a style="padding-left: 32px">Image by </a><a href="https://danbooru.donmai.us/posts/1029426">Yuuki Tatsuya 2011</a>
+            <p></p>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/news.html b/news.html
new file mode 100644
index 0000000..5509009
--- /dev/null
+++ b/news.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Blorb's Website - News</title>
+        <link rel="icon" type="image/x-icon" href="https://confusedblorb.org/icon.png">
+        <link rel="stylesheet" href="style.css">
+    </head>
+
+    <body>
+        <img src="https://confusedblorb.org/blorb.webp" class="banner">
+        
+        <div class="topnav">
+            <a class="active" href="index.html">Home</a>
+            <a class="inactive" href="#news">News</a>
+            <a class="inactive" href="#about">About</a>
+        </div>
+        
+        <div class="text_area">
+            <h2>News</h2>
+            <div class="news_area" id="news">
+
+            </div>
+        </div>
+
+        <div class="text_area">
+            <h2 id="about">About</h2>
+            <p>© 2023 - 2024 confusedcatgirl</p>
+            <p>Images used in the News Section have their links in "confusedblorb.org/news.json". These belong to their respective owners.</p>
+            <a style="padding-left: 32px">Banner by </a><a href="https://www.mooshieblob.com/">mooshieblob 2024</a><br><br>
+            <a style="padding-left: 32px">Image by </a><a href="https://danbooru.donmai.us/posts/1029426">Yuuki Tatsuya 2011</a>
+            <p></p>
+        </div>
+    </body>
+
+    <script>
+        var getJSON = function(url, callback) {
+            var xhr = new XMLHttpRequest();
+            xhr.open('GET', url, true);
+            xhr.responseType = 'json';
+            xhr.onload = function() {
+                var status = xhr.status;
+                if (status === 200) {
+                    callback(null, xhr.response);
+                } else {
+                    callback(status, xhr.response);
+                }
+            };
+            xhr.send();
+        };
+
+        getJSON('https://confusedblorb.org/news.json', function(err, data) {
+            data.articles.forEach(article => {
+                const news_container = document.createElement("div");
+                const title_container = document.createElement("h3");
+                const date_container = document.createElement("p");
+                const image_container = document.createElement("img");
+
+                title_container.appendChild(document.createTextNode(article.title));
+                date_container.appendChild(document.createTextNode(article.date));
+                image_container.src = article.image;
+
+                news_container.className = "news_div";
+                image_container.className = "news_image";
+
+                news_container.appendChild(title_container);
+                news_container.appendChild(date_container);
+                news_container.appendChild(image_container);
+
+                const element = document.getElementById("news");
+                element.appendChild(news_container);
+            });
+        });
+    </script>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..11574bd
--- /dev/null
+++ b/style.css
@@ -0,0 +1,132 @@
+body {
+    margin: 0;
+    
+    background-image: url('https://raw.githubusercontent.com/confusedcatgirl/confusedcatgirl.github.io/refs/heads/main/background.webp');
+    background-attachment: fixed;
+    background-size: cover;
+}
+
+p {
+    padding-left: 32px;
+}
+
+h2 {
+    padding-left: 16px;
+}
+
+.banner {
+    width: 38%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 1%;
+}
+
+.button {
+    background-image: linear-gradient(#ddddff, #aaaaff);
+    color: black;
+    margin: 10px 10px 10px auto;
+    border-radius: 15px;
+    font-size: large;
+    font-family: 'Trebuchet MS', sans-serif;
+    max-width: 100px;
+    padding: 10px 30px 10px 40px;
+    text-decoration: none;
+    display: flex;
+}
+
+.button:hover {
+    background-image: linear-gradient(#aaaaff, #ddddff);
+}
+
+.text_area {
+    overflow: hidden;
+    background-color: rgba(124, 124, 182, 0.4);
+    color: white;
+    display: inline-flexbox;
+    border-radius: 20px;
+    margin: 2%;
+    backdrop-filter: blur(6px);
+    padding: 0% 1% 1% 1%;
+    font-family: 'Trebuchet MS', sans-serif;
+}
+
+.news_area {
+    display: flex;
+    overflow: hidden;
+    margin-bottom: 10px;
+}
+
+.news_div {
+    background-color:  rgb(221, 221, 255);
+    color: black;
+    font-family: 'Trebuchet MS', sans-serif;
+    width: 31.4%; height: 10%;
+    padding: 1px 10px 5px 10px;
+    margin-left: 10px;
+    border-radius: 15px;
+}
+
+.news_image {
+    width: 100%;
+    border-radius: 15px;
+    height: 300px;
+    object-fit: cover;
+}
+
+.icon {
+    width: 64px;
+    display: flex;
+    filter: invert(1);
+}
+
+.centered {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.topnav {
+    overflow: hidden;
+    background-color: rgba(51, 51, 112, 0.4);
+    color: white;
+    border-radius: 10px;
+    margin: 1%;
+    backdrop-filter: blur(6px);
+}
+
+.topnav a {
+    float: left;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
+    border-radius: 10px;
+    font-family: 'Trebuchet MS', sans-serif;
+}
+
+.topnav a.active {
+    background-image: linear-gradient(#6666aa, #444488);
+    color: white;
+    font-size: large;
+    margin: 10px 0px 10px 10px;
+    height: 23px;
+}
+
+.topnav a.active:hover {
+    background-image: linear-gradient(#444488, #6666aa);
+}
+
+.topnav a.inactive {
+    background-image: linear-gradient(#ddddff, #aaaaff);
+    color: black;
+    margin: 14px 0px 14px 10px;
+    font-size: small;
+    height: 15px;
+    display: block;
+}
+
+.topnav a.inactive:hover {
+    background-image: linear-gradient(#aaaaff, #ddddff);
+}
\ No newline at end of file
