diff --git a/client/tou.js b/client/tou.js
new file mode 100644
index 0000000..9c3453e
--- /dev/null
+++ b/client/tou.js
@@ -0,0 +1,11 @@
+import Route from "../route.js";
+import auth from "../form/auth.js";
+
+let main = new Route([auth], async function (req, res, input) {
+    let { username } = input;
+    return res.render('guidelines', {
+        username
+    });
+});
+
+export default main;
\ No newline at end of file
diff --git a/routes.js b/routes.js
index 21aefe4..f73affd 100644
--- a/routes.js
+++ b/routes.js
@@ -6,6 +6,7 @@ import player from "./client/player.js";
 import user from "./client/user.js";
 import settings from "./client/settings.js";
 import e404 from "./client/e404.js";
+import tou from "./client/tou.js";
 
 import loginB from "./form/login.js";
 import registerB from "./form/register.js";
@@ -31,7 +32,8 @@ routes.client = {
     video: player,
     user,
     settings,
-    e404
+    e404,
+    tou
 }
 
 routes.get = {
diff --git a/static/main.css b/static/main.css
index 3688e89..77ca73a 100644
--- a/static/main.css
+++ b/static/main.css
@@ -2,161 +2,152 @@
     --black: rgb(16, 16, 16);
     --gray: rgb(38, 38, 38);
     --white: rgb(240, 240, 240);
-
     --primary-dark: rgb(230, 78, 78);
     --primary-light: rgb(255, 200, 200);
-
     --elem-width: min(800px, 90vw);
     --elem-height: 300px;
-
     --border-radius: 15px;
-
+    --font: system-ui, sans-serif;
     color: var(--white);
     background: var(--black);
+    font-family: var(--font) !important;
+}
 
-    font-family: system-ui, sans-serif;
+.banner,
+body {
+    display: flex;
+    flex-direction: column
 }
 
 body {
-    display: flex;
-    flex-direction: column;
     align-items: center;
-
     overflow-x: hidden;
-
-    margin-top: 0;
+    margin-top: 0
 }
 
 .banner {
-    display: flex;
-    flex-direction: column;
     justify-content: center;
+    margin-bottom: calc(-1*var(--elem-height))
+}
 
-    margin-bottom: calc(-1 * var(--elem-height));
+.banner-background,
+.banner-content {
+    height: var(--elem-height);
+    overflow-y: auto
 }
 
 .banner-background {
     border-radius: var(--border-radius);
     background-color: var(--gray);
     opacity: 30%;
-    object-fit: cover;
-}
-
-.banner-background,
-.banner-content {
-    height: var(--elem-height);
-    overflow-y: auto;
+    object-fit: cover
 }
 
 .banner-content {
     margin-left: 10px;
     margin-right: 10px;
     position: relative;
-    top: calc(-1 * var(--elem-height));
+    top: calc(-1*var(--elem-height))
 }
 
 .header {
     z-index: 5;
-
     position: sticky;
     top: 0;
     display: flex;
-
     background: var(--gray);
     color: var(--white);
-
     padding: 10px;
     margin-bottom: 10px;
-
     align-items: center;
-
     font-size: 1.2em;
-
-    width: calc(100vw - 20px);
+    width: calc(100vw - 20px)
 }
 
 .header-link,
 .link {
     text-decoration: none;
-    font-weight: bold;
-    color: var(--white);
+    font-weight: 700;
+    color: var(--white)
 }
 
 .header-link {
-    padding-left: 0.5em;
-    margin-left: 0.5em;
-    border-left: solid var(--white) 2px;
+    padding-left: .5em;
+    margin-left: .5em;
+    border-left: solid var(--white) 2px
 }
 
 .header-img {
     height: 2em;
     width: 2em;
-    object-fit: cover;
+    object-fit: cover
 }
 
-.content,
-.form,
 .banner,
-.banner-background {
-    width: var(--elem-width);
+.banner-background,
+.content,
+.form {
+    width: var(--elem-width)
 }
 
 .form {
-    grid-template-columns: 0.7fr 1fr;
-    display: grid;
+    grid-template-columns: .51fr 1fr;
+    display: grid
 }
 
 .form-key {
-    margin-right: 10px;
+    margin-right: 10px
 }
 
-.form-input,
 .comment,
+.content,
 .form-button,
-.content {
+.form-input,
+.form {
     border: solid var(--gray) 3px;
     background: var(--black);
     border-radius: var(--border-radius);
-
     color: var(--white);
+    padding: .5rem;
+    margin-bottom: .5rem;
+    text-decoration: none
+}
 
-    padding: 0.5rem;
-    margin-bottom: 0.5rem;
-
-    text-decoration: none;
+.form-button,
+.form-heading,
+.form-message {
+    grid-column: span 2;
 }
 
 .content {
     margin-top: 10px;
-    width: calc(var(--elem-width) - 1rem);
-}
-
-.form-button {
-    font-weight: bold;
+    width: calc(var(--elem-width) - 1rem)
 }
 
 .form-button {
+    font-weight: 700;
+    display: inline-block;
     background: var(--primary-dark);
-    border-color: var(--primary-light);
+    border-color: var(--primary-light)
 }
 
 .form-message {
     margin-top: 10px;
-    font-style: italic;
+    font-style: italic
 }
 
 .avatar {
-    display: flex;
+    display: flex
 }
 
 .avatar-img {
     width: 50px;
     height: 50px;
-    margin-right: 15px;
+    margin-right: 15px
 }
 
 .content-header {
-    width: var(--elem-width);
+    width: var(--elem-width)
 }
 
 .videos {
@@ -164,109 +155,104 @@ body {
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-around;
-
-    width: 90vw;
+    width: 90vw
 }
 
-.controls {}
-
 .videos a {
-    color: var(--dark);
+    color: var(--dark)
+}
+
+.progressbar,
+.progressbar-div {
+    border-radius: var(--border-radius)
 }
 
 .progressbar {
     background-color: var(--black);
     border: solid var(--primary-light) 2px;
-    border-radius: 13px;
     padding: 3px;
     margin: 0;
     position: relative;
     top: -40px;
     width: calc(var(--elem-width) - 7px);
-    max-width: 89vmin;
+    max-width: 89vmin
 }
 
 .progressbar>div {
     background-color: var(--primary-dark);
     width: 40%;
-    height: 20px;
-    border-radius: 10px;
+    height: 20px
 }
 
-
 .controls img {
     height: 45px;
     width: 45px;
     object-fit: contain;
-    margin: 5px;
+    margin: 5px
 }
 
 .video {
-    border: solid var(--gray) 3px;
-    border-radius: 5px;
     background: var(--dark);
-
-    font-size: 1rem;
-    padding: 0.5rem;
-    margin-bottom: 0.5rem;
-
+    padding: .5rem;
     width: 135px;
     height: 140px;
-    overflow: hidden;
+    overflow: hidden
 }
 
 .video div {
     max-height: 22px;
-    overflow: hidden;
+    overflow: hidden
 }
 
 .video img {
     width: 135px;
     height: 90px;
-    object-fit: cover;
+    object-fit: cover
 }
 
 .video-wrapper.full {
-    background: rgba(0, 0, 0, 0.5);
+    background: rgba(0, 0, 0, .5);
     width: 100vw;
     height: 100vh;
     position: absolute;
     top: 0;
-    left: 0;
+    left: 0
 }
 
 .header.full {
-    display: none;
+    display: none
 }
 
-video {
-    width: 180px;
-    height: 200px;
-    overflow-y: auto;
-
-    font-size: 1rem;
-    margin-bottom: 0.5rem;
-
+.controls,
+.video,
+.player {
     border: solid var(--gray) 3px;
     border-radius: var(--border-radius);
+    font-size: 1rem;
+    margin-bottom: .5rem
+}
+
+.player {
+    width: 180px;
+    overflow-y: auto;
     width: var(--elem-width);
     height: auto;
     max-height: 50vh;
-    max-width: 90vmin;
+    max-width: 90vmin
 }
 
-.full video {
+.full .player {
     width: 100vw;
     height: 80vh;
     max-width: none;
     max-height: none;
-    border: none;
+    border: 0
 }
 
 .full .progressbar {
     width: 95vw;
     max-width: 95vw;
-    margin: auto;
+    margin: auto
 }
 
 .controls {
@@ -274,24 +260,15 @@ video {
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
-    border: solid var(--gray) 3px;
-    border-radius: 5px;
     background: var(--dark);
-
     margin-top: -30px;
-    font-size: 1rem;
-    padding: 0.5rem;
-    margin-bottom: 0.5rem;
-}
-
-.form-input {
-    font-family: system-ui, sans-serif;
+    padding: .5rem
 }
 
 img {
-    user-select: none;
+    user-select: none
 }
 
 pre {
-    white-space: pre-wrap;
+    white-space: pre-wrap
 }
\ No newline at end of file
diff --git a/views/comments.ejs b/views/comments.ejs
index 3d22617..4e216cc 100644
--- a/views/comments.ejs
+++ b/views/comments.ejs
@@ -1,28 +1,24 @@
-<form enctype='multipart/form-data' method='POST' action='/api/form/comment'>
-    <h1 class='content-header'>Comments</h1>
-    <div class='form-message'></div>
-    <input name='targetId' hidden value='<%= id %>'>
-    <input name='targetType' hidden value='<%= route %>'>
-    <textarea class='form-input' name='content'></textarea>
-    <br />
-    <input class='form-input' type='submit'>
+<%- include('form_bare.ejs', { data: [ { label: "" , type: "text" , name: "targetId" , hidden: id }, { label: "" ,
+    type: "text" , name: "targetType" , hidden: route }, { label: "Your thoughts..." , type: "textarea" ,
+    name: "content" , hidden: route }, ], 'route' : '/api/form/comment' , 'title' : 'Comments' , }) -%>
 
-    <% for (let comment of comments) { %>
-        <div class='comment'>
-            <div class='avatar'>
-                <img src='/pfp/<%= comment.username %>.png' class='avatar-img'>
-                <div>
-                    <div><b>
-                            <a class='link' href='/client/user?id=<%= comment.username %>'>
-                                <%= comment.username %>
-                            </a>
-                        </b></div>
-                    <div><b>
-                            <%= (new Date(comment.date)+'').split(/(GMT|UTC)/g)[0] %>
-                        </b></div>
-                    <pre><%= comment.content %></pre>
+    <div class="content">
+        <% for (let comment of comments) { %>
+            <div class='comment'>
+                <div class='avatar'>
+                    <img src='/pfp/<%= comment.username %>.png' class='avatar-img'>
+                    <div>
+                        <div><b>
+                                <a class='link' href='/client/user?id=<%= comment.username %>'>
+                                    <%= comment.username %>
+                                </a>
+                            </b></div>
+                        <div><b>
+                                <%= (new Date(comment.date)+'').split(/(GMT|UTC)/g)[0] %>
+                            </b></div>
+                        <pre><%= comment.content %></pre>
+                    </div>
                 </div>
             </div>
-        </div>
-        <% } %>
-</form>
\ No newline at end of file
+            <% } %>
+    </div>
\ No newline at end of file
diff --git a/views/footer.ejs b/views/footer.ejs
index 691287b..9870926 100644
--- a/views/footer.ejs
+++ b/views/footer.ejs
@@ -1,2 +1,3 @@
 </body>
+
 </html>
\ No newline at end of file
diff --git a/views/form.ejs b/views/form.ejs
index b33ca4e..1303e71 100644
--- a/views/form.ejs
+++ b/views/form.ejs
@@ -1,19 +1,3 @@
 <%- include('header.ejs') -%>
-    <form class='form' enctype='multipart/form-data' method='POST' action='<%= route %>'>
-        <h1>
-            <%= title %>
-        </h1>
-        <div class='form-message'></div>
-        <% for (let elem of data) { %>
-            <span class='form-key'>
-                <%= elem.label %>
-            </span>
-            <% if (elem.type=='textarea' ) { %>
-                <textarea class='form-input' name='<%= elem.name %>'></textarea>
-                <% } else { %>
-                    <input class='form-input' type='<%= elem.type %>' name='<%= elem.name %>'>
-                    <% } %>
-                        <% } %>
-                            <input  class='form-input' type='Submit' name='Submit'>
-    </form>
-    <%- include('footer.ejs') -%>
\ No newline at end of file
+    <%- include('form_bare.ejs') -%>
+        <%- include('footer.ejs') -%>
\ No newline at end of file
diff --git a/views/form_bare.ejs b/views/form_bare.ejs
new file mode 100644
index 0000000..860ba57
--- /dev/null
+++ b/views/form_bare.ejs
@@ -0,0 +1,18 @@
+<form class='form' enctype='multipart/form-data' method='POST' action='<%= route %>'>
+    <h1 class='form-heading'>
+        <%= title %>
+    </h1>
+    <div class='form-message'></div>
+    <% for (let elem of data) { %>
+        <span class='form-key'>
+            <%= elem.label %>
+        </span>
+        <% if (elem.type=='textarea' ) { %>
+            <textarea class='form-input' name='<%= elem.name %>'></textarea>
+            <% } else { %>
+                <input class='form-input' type='<%= elem.type %>' name='<%= elem.name %>' value='<%= elem.hidden %>'
+                    <%=elem.hidden ? 'hidden ' : '' %>>
+                <% } %>
+                    <% } %>
+                        <input class='form-button' type='Submit' name='Submit'>
+</form>
\ No newline at end of file
diff --git a/views/guidelines.ejs b/views/guidelines.ejs
index d91248b..b9ff146 100644
--- a/views/guidelines.ejs
+++ b/views/guidelines.ejs
@@ -1,12 +1,21 @@
-<ol>
-    <li>Respect users and communities. Bigotry, bullying, and hacking are prohibited.</li>
-    <li>Contact staff via Discord as needed.</li>
-    <li>Stay within the law of the United States.</li>
-    <li>Don't exploit or clog Xuyezo services, regardless of utility value. Feature requests and glitches
-        can be reported on <a class='link' href='https://discord.gg/wZ3mg58JMT'>Discord</a> or <a class='link'
-            href='https://git.xuyezo.net/explore/repos'>Git</a>.</li>
-    <li>Respect other users' creative work. Inspiration is allowed, although re-used assets must be
-        properly credited.</li>
-    <li>Don't post sexually motivated content.</li>
-    <li>The moderation isn't responsible for behavior on other instances.</li>
-</ol>
\ No newline at end of file
+<%- include('header.ejs') -%>
+    <div class="content">
+        <h1 class='content-header'>Terms of Use</h1>
+        <h2>1. Respect</h2>
+        <p>While BiglyChat encourages good-faith discussion, some topics put the site's community at harm:</p>
+        <ol>
+            <li>Repeated personal attacks</li>
+            <li>Not safe for work content</li>
+            <li>Exposing non-public personal information</li>
+            <li>Illegal activity in the United States</li>
+        </ol>
+        <h2>2. Communication</h2>
+        <p>The community is held responsible for contacting staff via Discord. This functionality is used for reporting
+            misbehavior and communicating suggestions or bug fixes.</p>
+        <h2>3. Exploits</h2>
+        <p>Don't exploit or clog Xuyezo services, regardless of potential utility or publicity.</p>
+        <h2>4. Limitations</h2>
+        <p>The moderation isn't responsible for behavior on other instances of Xuyezo software.</p>
+        <!-- todo: guidelines for project lifecycle + stop derv killing everything-->
+    </div>
+    <%- include('footer.ejs') -%>
\ No newline at end of file
diff --git a/views/header.ejs b/views/header.ejs
index 09892d9..9ca8160 100644
--- a/views/header.ejs
+++ b/views/header.ejs
@@ -7,7 +7,7 @@
     <meta name="description" content="Collab on videos... make creative animations... and more!">
     <script src='/static/main.js'></script>
     <link rel='stylesheet' href='/static/main.css'>
-	<meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 
 <body>
diff --git a/views/main.ejs b/views/main.ejs
index 5bf262a..99c781c 100644
--- a/views/main.ejs
+++ b/views/main.ejs
@@ -2,25 +2,23 @@
     <div class='banner'><img class='banner-background' src='/static/img/bg.svg'>
         <div class='banner-content'>
             <h1>BiglyChat</h1>
-            <p>BiglyChat is a niche community for broadcasting videos to your fanbase, with integrated games and active developers.</p>
+            <p>BiglyChat is a niche community for broadcasting videos to your fanbase, with integrated games and active
+                developers.</p>
             <h2>Community</h2>
             <%if (username=='!nobody' ) { %>
                 <a class='form-button' href="/client/register">Join the Community</a>
+                <br />
                 <% } %>
+                    <a class='form-button' href="/client/tou">Terms of Use</a>
                     <a class='form-button' href="https://discord.gg/wZ3mg58JMT">Discord Server</a>
                     <a class='form-button' href="https://git.xuyezo.net/Zuxxied/bigly-chat">Developer Portal</a>
         </div>
     </div>
-    <div class='content'>
-        <details>
-            <summary><b>Terms of Use</b></summary>
-            <%- include ('guidelines.ejs') -%>
-        </details>
-    </div>
     <h1 class='content-header'>Follow Feed</h1>
     <div class=' videos'>
         <%- include('videos.ejs', {videos: videosFollow}) -%>
     </div>
+
     <h1 class='content-header'>Recent Videos</h1>
     <div class=' videos'>
         <%- include('videos.ejs') -%>
diff --git a/views/player.ejs b/views/player.ejs
index 55df112..30f6d37 100644
--- a/views/player.ejs
+++ b/views/player.ejs
@@ -1,8 +1,8 @@
 <%- include('header.ejs') -%>
     <div class='video-wrapper'>
-        <video src='/videos/<%= videoData.id %>.webm'></video>
+        <video class='player' src='/videos/<%= videoData.id %>.webm'></video>
         <div class="progressbar">
-            <div></div>
+            <div class="progressbar-div"></div>
         </div>
         <div class='controls'>
             <div class='play'><img src='/static/img/play.svg' class='dark'></div>
diff --git a/views/user.ejs b/views/user.ejs
index 6dca0c2..41376b1 100644
--- a/views/user.ejs
+++ b/views/user.ejs
@@ -7,11 +7,11 @@
                 <img src='/pfp/<%= id %>.png' class='avatar-img'>
                 <div>
                     <b>@<%= id %></b>
-                    <input class='form-input' type='submit' value="Follow">
+                    <input class='form-button' type='submit' value="Follow">
                 </div>
             </div>
             <input name='target' hidden value="<%= id %>">
-           
+
             <pre class='form-input'><%= user[0] ? user[0].bio : 'This user has not set a bio.' %></pre>
         </div>
     </form>