diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..600d2d3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.vscode
\ No newline at end of file
diff --git a/account/index.html b/account/index.html
index 9b33c78..2e2483b 100644
--- a/account/index.html
+++ b/account/index.html
@@ -1,7 +1,9 @@
 <!DOCTYPE html>
 <head>
     <title>Account | SPFN</title>
-    <link rel="stylesheet" href="../css/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/style.css">
+    <script type="text/javascript" src="/js/lang.js"></script>
 </head>
 <body>
     <header>
@@ -13,7 +15,7 @@
             <ul class="nav-links">
                 <a href="/"><button class="header-button">Home</button></a>
                 <a href="/guides"><button class="header-button">Guides</button></a>
-                <a href="/account"><button class="header-button">Account</button></a>
+                <a href="/account"><button class="header-button active">Account</button></a>
             </ul>
         </nav>
     </header>
@@ -30,7 +32,7 @@
         <form id="login" style="display: none;">
             <h3 class="center">Please log in before viewing account information</h3>
             <div class="form-group">
-                <label for="username">SFID:</label>
+                <label for="username">SFID / Username:</label>
                 <input type="text" id="username" name="username" required />
             </div>
             <div class="form-group">
@@ -42,12 +44,13 @@
         </form>
 
         <div id="user-info" class="info" style="display: none;">
-            <div id="user-display" class="info-container" style="width: 180px">
+            <div id="user-display" class="info-container" style="width: 180px; align-items: center;">
+                <img src="/res/img/mii-placeholder.png" style="width: 100%">
                 <h3 id="display-name" style="margin: 2px;">Display Name</h3>
                 <p id="sfid" style="margin: 2px;">SFID: Username</p>
-                <button style="font-size: 24px; width: 180px;" onclick="logOut()">Log Out</button>
+                <button style="font-size: 24px; width: 160px;" onclick="logOut()">Log Out</button>
             </div>
-            <div id="user-details" class="info-container", style="flex: 1;">
+            <div id="user-details" class="info-container" style="flex: 1;">
                 <p class="info-text" id="email"><strong>Email: </strong>name@domain.com</p>
                 <p class="info-text" id="dob"><strong>Date of Birth: </strong>dd/mm/yyyy</p>
                 <hr style="margin: 1rem 0; border: none; height: 1px; background: #aaa;">
@@ -58,7 +61,7 @@
             </div>
         </div>
 
-        <script type="text/javascript" src="accounts.js"></script>
+        <script type="text/javascript" src="/js/accounts.js"></script>
     </main>
 
     <footer>
diff --git a/css/style.css b/css/style.css
index 7cf32f5..04f21e9 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,31 +1,83 @@
+body {
+    background-color: #610707;
+    color: white;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    font-family: 'Noto Sans', sans-serif;
+}
+
+button {
+    cursor: pointer;
+    border: 2px solid #a00b0b;
+    border-radius: 10px;
+    background-color: #6d0606;
+    color: white;
+    border-radius: 15px;
+}
+
+img {
+    border-radius: 15px;
+    margin: 8px 8px;
+}
+
 header {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin: 1rem;
     padding: 1rem 2rem;
-    background-color: #b32d28;
+    background-color: #940b0b;
     color: white;
     border-radius: 15px;
 }
 
+footer {
+    padding: 1rem 2rem;
+    background-color: #940b0b;
+    border-radius: 15px;
+    margin: 1rem;
+}
+
+main {
+    flex: 1;
+    padding: 1rem;
+    align-items: center;
+    height: 100vh;
+}
+
+a {
+    color: #00afff;
+}
+
 h1 {
     border-radius: 2px;
     color: white;
     font-size: 64px;
-    -webkit-text-stroke: 1px black;
+    -webkit-text-stroke: 2px black;
     margin: 0;
 }
 
+strong {
+    border-radius: 8px;
+    padding: 4px;
+}
+
+input {
+    background-color: #5f0808;
+    border: 1px solid white;
+    color: white;
+    font-size: 14px;
+    border-radius: 5px;
+    padding: 4px;
+}
+
 .header-button {
     padding: 0.5rem;
     font-size: 1rem;
-    background-color: #9c100c;
-    color: rgb(255, 255, 255);
-    border-color: #b4b4b4;
-    border-radius: 2px;
+    color: white;
     cursor: pointer;
-    border-style: groove;
-    border-radius: 10px;
     height: 64px;
     margin: 0px;
     font-size: 32px;
@@ -38,37 +90,46 @@ h1 {
 form {
     max-width: 300px;
     margin: 0 auto;
-    padding: 8px;
+    padding: 1rem;
     display: flex;
     flex-direction: column;
     gap:1rem;
-    border: 2px solid black;
+    border: 4px solid #a00b0b;
     border-radius: 15px;
+    background: #6d0606;
 }
 
 .form-group {
     display: flex;
     flex-direction: column;
     font-weight: bold;
+    margin: 8px 0;
 }
 
 .info {
-    width: 70%;
+    min-width: 40%;
+    max-width: 800px;
     margin: 0 auto;
-    background-color: black;
+    background-color: #a00b0b;
     padding: 4px;
     display: flex;
+    border-radius: 15px;
 }
 
 .info-container {
-    background-color: #dfdfdf;
+    background-color: #6d0606;
     text-align: center;
-    margin: 2px 2px;
+    margin: 2px;
+    border-radius: 15px;
+    padding: 4px 8px;
+    display: flex;
+    flex-direction: column;
 }
 
 .info-text {
     text-align: left;
     margin: 4px;
+    flex: 1;
 }
 
 .guide-buttons {
@@ -82,34 +143,35 @@ form {
     font-size: 20px;
     height: 48px;
     cursor: pointer;
-    border-style: groove;
+    border: 2px solid #a00b0b;
     border-radius: 10px;
-}
-
-.active {
-    background-color: #afafaf;
+    background-color: #6d0606;
+    color: white;
+    margin: 4px 0;
 }
 
 .guide-content {
     padding: 0.5rem;
     flex: 1;
-    border: 2px solid black;
+    border: 4px solid #a00b0b;
     border-radius: 15px;
+    color: white;
 }
 
 .guide-container {
     display: flex;
     margin: 0 auto;
     width: 70%;
-    background-color: #dfdfdf;
+    background-color: #770505;
     border-radius: 15px;
     padding: 8px
 }
 
 .filepath {
-    background-color: #bfbfbf;
-    color: black;
+    background-color: #610707;
+    color: white;
     border-radius: 5px;
+    padding: 2px;
 }
 
 .error-container {
@@ -118,5 +180,91 @@ form {
     margin: 0 auto;
     color: white;
     text-align: center;
+    border: 2px solid white;
     border-radius: 15px;
+}
+
+.title {
+    height: 80vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: #770505;
+    border-radius: 25px;
+    border: 4px solid #a00b0b;
+}
+
+.title-main {
+    font-size: 84px;
+    margin: 0 auto;
+    -webkit-text-stroke: 2px black;
+}
+
+.title-desc {
+    font-size: 24px;
+}
+
+.home-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #770505;
+    border-radius: 25px;
+    margin: 2rem 0;
+    padding: 24px;
+    border: 4px solid #a00b0b;
+}
+
+.team-members {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8px;
+    max-width: 2000px;
+    margin: 0 auto;
+    flex: 1;
+}
+
+.member-row {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: center;
+}
+
+.team-member {
+    background-color: #a00b0b;
+    margin: 8px 8px;
+    padding: 8px 8px;
+    border-radius: 15px;
+    max-width: 600px;
+    height: 10rem;
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+    flex: 0 1 30%;
+}
+
+.team-link {
+    color: white;
+}
+
+.splatfest-active {
+    background-color: #00af00;
+    border: 2px solid #00ff00;
+    border-radius: 16px;
+    padding: 8px;
+}
+
+.splatfest-notfound {
+    background-color: #6d0606;
+    border: 2px solid #a00b0b;
+    border-radius: 16px;
+    padding: 8px;
+}
+
+.active {
+    background-color: #a00b0b;
+    border-color: #6d0606;
 }
\ No newline at end of file
diff --git a/guides/index.html b/guides/index.html
index 10523c5..b249123 100644
--- a/guides/index.html
+++ b/guides/index.html
@@ -1,7 +1,9 @@
 <!DOCTYPE html>
 <head>
     <title>Guides | SPFN</title>
-    <link rel="stylesheet" href="../css/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/style.css">
+    <script type="text/javascript" src="/js/lang.js"></script>
 </head>
 <body>
     <header>
@@ -12,7 +14,7 @@
         <nav>
             <ul class="nav-links">
                 <a href="/"><button class="header-button">Home</button></a>
-                <a href="/guides"><button class="header-button">Guides</button></a>
+                <a href="/guides"><button class="header-button active">Guides</button></a>
                 <a href="/account"><button class="header-button">Account</button></a>
             </ul>
         </nav>
@@ -129,7 +131,7 @@
             </div>
         </div>
 
-        <script type="text/javascript" src="guides.js"></script>
+        <script type="text/javascript" src="/js/guides.js"></script>
     </main>
 
     <footer>
diff --git a/index.html b/index.html
index 3131e79..5711997 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,11 @@
 <!DOCTYPE html>
 <head>
     <title>Home | SPFN</title>
-    <link rel="stylesheet" href="css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/style.css">
+    <script type="text/javascript" src="/js/lang.js"></script>
 </head>
 <body>
     <header>
@@ -10,14 +14,96 @@
         </div>
         <nav>
             <ul class="nav-links">
-                <a href="/"><button class="header-button">Home</button></a>
+                <a href="/"><button class="header-button active">Home</button></a>
                 <a href="/guides"><button class="header-button">Guides</button></a>
                 <a href="/account"><button class="header-button">Account</button></a>
             </ul>
         </nav>
     </header>
     <main>
-        <p>Splatfestival Network - Restoring Splatfests to Splatoon on the Wii U</p>
+        <div class="title">
+            <h2 class="title-main">Splatfestival Network</h2>
+            <p class="title-desc">Restoring Splatfests to Splatoon on the Wii U</p>
+            <a href="https://github.com/Splatfestival-Network" target="_blank">Find us on Github</a>
+        </div>
+        <div class="home-container">
+            <h2 style="margin: 4px;">Splatfest Information</h2>
+            <p style="margin: 4px;">Check here for information about current or upcoming splatfests</p>
+            <div id="splatfest-active" class="splatfest-active", style="display: none;">
+                <h3 style="margin: 0px;">Splatfest is Active!</h3>
+            </div>
+            <div id="splatfest-notfound" class="splatfest-notfound">
+                <h3 style="margin: 0px;">No splatfests currently active or upcoming</h3>
+            </div>
+            <div id="splatfest-info" style="text-align: center; display: none;">
+                <h3 id="splatfest-title"><strong style="background-color: #e25604;">Team Kid</strong> vs. <strong style="background-color: #0438e2;">Team Squid</strong></h3>
+                <p id="splatfest-starts"><strong>Starts: </strong>dd/mm/yyyy hh/mm</p>
+                <p id="splatfest-ends"><strong>Ends: </strong>dd/mm/yyyy hh/mm</p>
+            </div>
+        </div>
+        <div class="home-container">
+            <h2 style="margin: 0 auto;">Credits</h2>
+            <p>Members or Groups that made Splatfestival Network what it is today</p>
+            <div class="team-members">
+                <div class="member-row">
+                    <div class="team-member">
+                        <img src="/res/img/pretendo.png">
+                        <div style="display: block;">
+                            <a href="https://github.com/PretendoNetwork/" target="_blank" class="team-link"><h2>Pretendo Network</h2></a>
+                            <p>Original Server Code and Reverse Engineering</p>
+                        </div>
+                    </div>
+                    <div class="team-member">
+                        <img src="/res/img/tv.png">
+                        <div style="display: block;">
+                            <a href="https://github.com/DJMrTV" target="_blank" class="team-link"><h2>TV</h2></a>
+                            <p>Owner and Server Developer</p>
+                        </div>
+                    </div>
+                    <div class="team-member">
+                        <img src="/res/img/ceantix.png">
+                        <div style="display: block;">
+                            <a href="https://github.com/ceantixdev" target="_blank" class="team-link"><h2>Ceantix</h2></a>
+                            <p>Server Developer</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="member-row">
+                    <div class="team-member">
+                        <img src="/res/img/bloxerhd.png">
+                        <div style="display: block;">
+                            <a href="https://github.com/BloxerHD018" target="_blank" class="team-link"><h2>BloxerHD</h2></a>
+                            <p>Website Developer</p>
+                        </div>
+                    </div>
+                    <div class="team-member">
+                        <img src="/res/img/kinnay.png">
+                        <div style="display: block;">
+                            <a href="https://github.com/kinnay" target="_blank" class="team-link"><h2>Kinnay</h2></a>
+                            <p>Documentation of PRUDP and RMC</p>
+                        </div>
+                    </div>
+                    <div class="team-member">
+                        <img src="/res/img/purplepote.png">
+                        <div style="display: block;">
+                            <h2>PurplePote</h2>
+                            <p>Splatfestival Admin who Supported Development</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="member-row">
+                    <div class="team-member">
+                        <img src="/res/img/splatfestival.png">
+                        <div style="display: block;">
+                            <a href="https://discord.gg/grMSxZf" target="_blank" class="team-link"><h2>Splatfestival Staff</h2></a>
+                            <p>Supported Development and Deployment of SPFN</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script type="text/javascript" src="/js/home.js"></script>
     </main>
     <footer>
         <p class="center">Need assistance? <a href="https://discord.gg/grMSxZf" target="_blank">Join the Discord</a></p>
diff --git a/account/accounts.js b/js/accounts.js
similarity index 100%
rename from account/accounts.js
rename to js/accounts.js
diff --git a/guides/guides.js b/js/guides.js
similarity index 100%
rename from guides/guides.js
rename to js/guides.js
diff --git a/js/home.js b/js/home.js
new file mode 100644
index 0000000..dea70d8
--- /dev/null
+++ b/js/home.js
@@ -0,0 +1,84 @@
+async function requestFestInfo() {
+    // DO NOT USE THIS - USE ROUTE https://boss-info.spfn.net/api/v2/fest-info
+    const response = await fetch("https://account.spfn.net/api/v2/fest-info", { // ROUTE NOT IMPLEMENTED
+        method: "GET"
+    })
+
+    if (!response.ok) return;
+
+    /*
+    {
+        "active",
+        "a-name",
+        "a-hex",
+        "b-name",
+        "b-hex",
+        "start",
+        "end"
+    }
+    */
+
+    const data = await response.json()
+
+    return data;
+}
+
+window.onload = async function() {
+    // Verify Fest Information
+    let data = localStorage.getItem("fest-info");
+    if (data) { // Fest data previously stored
+        const end = new Date(data["end"] + "Z")
+        const now = new Date()
+        if (end < now) { // Fest is over - Remove and check for new fest
+            localStorage.removeItem("fest-info");
+
+            data = await requestFestInfo();
+
+            if (data) {
+                localStorage.setItem("fest-info", data);
+            }
+        } else { // Fest is either Upcoming or Active - Update active state
+            const start = new Date(data["start"] + "Z");
+            const active = start > now && end < now;
+            if (data["active"] != active) {
+                data["active"] = active;
+                localStorage.setItem("fest-data", data);
+            }
+        }
+    } else { // No saved data - Check for any
+        data = await requestFestInfo();
+
+        if (data) {
+            localStorage.setItem("fest-info", data);
+        }
+    }
+
+
+
+    if (data) { // Active or Upcoming Fest Found
+        document.getElementById("splatfest-notfound").style.display = "none";
+
+        let festTitle = `<strong style="background-color: ${data["a-hex"]};">${data["a-name"]}</strong> vs. <strong style="background-color: ${data["b-hex"]};">${data["b-name"]}</strong>`;
+        document.getElementById("splatfest-title").innerHTML = festTitle;
+
+
+        let start = new Date(data["start"] + "Z");
+        let startStr = `<strong>Starts: </strong>${start.toLocaleString()}`;
+        document.getElementById("splatfest-starts").innerHTML = startStr;
+
+        let end = new Date(data["end"] + "Z");
+        let endStr = `<strong>Ends: </strong>${end.toLocaleString()}`;
+        document.getElementById("splatfest-ends").innerHTML = endStr;
+
+        let now = new Date();
+        if (start > now && end < now) { // Fest is Active
+            console.log("Active fest found!")
+            
+        } else { // Fest is Upcoming
+            console.log("Upcoming fest found!")
+        }
+    } else { // No fest
+        document.getElementById("splatfest-info").style.display = "none";
+        console.log("No fests currently planned or active")
+    }
+}
\ No newline at end of file
diff --git a/res/img/bloxerhd.png b/res/img/bloxerhd.png
new file mode 100644
index 0000000..b0149a0
Binary files /dev/null and b/res/img/bloxerhd.png differ
diff --git a/res/img/ceantix.png b/res/img/ceantix.png
new file mode 100644
index 0000000..0784fb3
Binary files /dev/null and b/res/img/ceantix.png differ
diff --git a/res/img/kinnay.png b/res/img/kinnay.png
new file mode 100644
index 0000000..0168a3b
Binary files /dev/null and b/res/img/kinnay.png differ
diff --git a/res/img/mii-placeholder.png b/res/img/mii-placeholder.png
new file mode 100644
index 0000000..ade2708
Binary files /dev/null and b/res/img/mii-placeholder.png differ
diff --git a/res/img/pretendo.png b/res/img/pretendo.png
new file mode 100644
index 0000000..275639c
Binary files /dev/null and b/res/img/pretendo.png differ
diff --git a/res/img/purplepote.png b/res/img/purplepote.png
new file mode 100644
index 0000000..b089994
Binary files /dev/null and b/res/img/purplepote.png differ
diff --git a/res/img/splatfestival.png b/res/img/splatfestival.png
new file mode 100644
index 0000000..332a01a
Binary files /dev/null and b/res/img/splatfestival.png differ
diff --git a/res/img/tv.png b/res/img/tv.png
new file mode 100644
index 0000000..2ca9313
Binary files /dev/null and b/res/img/tv.png differ
