diff --git a/assets/css/default.css b/assets/css/default.css
index 79489c8c..f9e6a2ea 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -309,8 +309,6 @@ footer {
   color: #919191;
   margin-top: auto;
   padding: 1.5em 0;
-  text-align: center;
-  max-height: 30vh;
 }
 
 footer a {
@@ -318,6 +316,42 @@ footer a {
   text-decoration: underline;
 }
 
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-top: 20px;
+}
+
+.footer-content #about-invidious-description > b {
+  font-size: 30px;
+}
+
+.footer-section {
+  margin-right: 20px;
+  margin-top: 20px;
+}
+
+.footer-section-list {
+  margin-top: 8px;
+}
+
+.footer-section-item {
+  margin-bottom: 4px;
+}
+
+@media screen and (max-width: 929px) {
+  #about-invidious-description {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 916px) {
+  #about-invidious-description {
+    display: none;
+  }
+}
+
 /* keyframes */
 
 @keyframes spin {
@@ -368,6 +402,10 @@ span > select {
   color: #565d64;
 }
 
+.light-theme footer {
+  background: #f2f2f2;
+}
+
 @media (prefers-color-scheme: light) {
   .no-theme a:hover,
   .no-theme a:active,
@@ -391,9 +429,13 @@ span > select {
     color: #303030;
   }
 
-  .light-theme .pure-menu-heading {
+  .no-theme .pure-menu-heading {
     color: #565d64;
   }
+  
+  .no-theme footer {
+    background: #f2f2f2;
+  }
 }
 
 /*
@@ -406,12 +448,19 @@ span > select {
   color: rgb(0, 182, 240);
 }
 
-.dark-theme a,
-.dark-theme .footer {
+.dark-theme a {
   color: #A8A095;
   text-decoration: none;
 }
 
+.dark-theme footer {
+  background: #16191a;
+}
+
+.dark-theme .footer-content #about-invidious-description > b {
+  color: #e5e5e5;
+}
+
 body.dark-theme {
   background-color: rgba(26, 29, 30, 1);
   color: #f0f0f0;
@@ -448,7 +497,6 @@ body.dark-theme {
     color: #CFCBC1;
 }
 
-
 .dark-theme .pure-menu-link:hover, .dark-theme .pure-menu-link:active, .dark-theme .pure-menu-link:focus {
   background-color: rgb(34, 36, 38)
 }
@@ -495,6 +543,14 @@ body.dark-theme {
     background-color: inherit;
     color: inherit;
   }
+  
+  .no-theme footer {
+    background: #16191a;
+  }
+
+  .no-theme footer #about-invidious-description > b {
+    color: #e5e5e5;
+  }
 }
 
 /*With commit d9528f5 all contents of the page is now within a flexbox. However,
diff --git a/locales/en-US.json b/locales/en-US.json
index 020c22ee..2c6cebb1 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -430,5 +430,20 @@
     "Stats": "Stats",
     "Joined": "Joined",
     "Links": "Links",
-    "This channel doesn't feature any other channels.": "This channel doesn't feature any other channels."
+    "This channel doesn't feature any other channels.": "This channel doesn't feature any other channels.",
+    "Navigation": "Navigation",
+    "Home": "Home",
+    "Project Homepage": "Project Homepage",
+    "Source Code": "Source Code",
+    "Issue tracker": "Issue tracker",
+    "Public instances": "Public instances",
+    "Donate": "Donate",
+    "Matrix": "Matrix",
+    "Support": "Support",
+    "Contact instance maintainer": "Contact instance maintainer",
+    "Report a bug": "Report a bug",
+    "FAQs": "FAQs",
+    "Legal": "Legal",
+    "Licences": "Licences",
+    "Privacy": "Privacy"
 }
diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr
index ec8408c8..bf650a9d 100644
--- a/src/invidious/views/template.ecr
+++ b/src/invidious/views/template.ecr
@@ -114,42 +114,6 @@
             <% end %>
 
             <%= content %>
-
-            <footer>
-                <div class="pure-g">
-                    <div class="pure-u-1 pure-u-md-1-3">
-                        <a href="https://github.com/iv-org/invidious">
-                            <%= translate(locale, "Released under the AGPLv3 by Omar Roth.") %>
-                        </a>
-                    </div>
-                    <div class="pure-u-1 pure-u-md-1-3">
-                        <i class="icon ion-ios-wallet"></i>
-                        BTC: <a href="bitcoin:bc1qfhe7rq3lqzuayzjxzyt9waz9ytrs09kla3tsgr">bc1qfhe7rq3lqzuayzjxzyt9waz9ytrs09kla3tsgr</a>
-                    </div>
-                    <div class="pure-u-1 pure-u-md-1-3">
-                        <i class="icon ion-ios-wallet"></i>
-                        XMR: <a href="monero:41nMCtek197boJtiUvGnTFYMatrLEpnpkQDmUECqx5Es2uX3sTKKWVhSL76suXsG3LXqkEJBrCZBgPTwJrDp1FrZJfycGPR">Click here</a>
-                    </div>
-                    <div class="pure-u-1 pure-u-md-1-3">
-                        <a href="https://github.com/iv-org/documentation">Documentation</a>
-                    </div>
-                    <div class="pure-u-1 pure-u-md-1-3">
-                        <i class="icon ion-logo-javascript"></i>
-                        <a rel="jslicense" href="/licenses">
-                            <%= translate(locale, "View JavaScript license information.") %>
-                        </a>
-                        /
-                        <i class="icon ion-ios-paper"></i>
-                        <a href="/privacy">
-                            <%= translate(locale, "View privacy policy.") %>
-                        </a>
-                    </div>
-                    <div class="pure-u-1 pure-u-md-1-3">
-                        <i class="icon ion-logo-github"></i>
-                        <%= translate(locale, "Current version: ") %> <%= CURRENT_VERSION %>-<%= CURRENT_COMMIT %> @ <%= CURRENT_BRANCH %>
-                    </div>
-                </div>
-            </footer>
         </div>
         <div class="pure-u-1 pure-u-md-2-24"></div>
     </div>
@@ -167,6 +131,142 @@
         </script>
         <script src="/js/notifications.js?v=<%= ASSET_COMMIT %>"></script>
     <% end %>
+    
+    <footer class="pure-g">
+        <div class="pure-u-1 pure-u-md-2-24"></div>
+        <div class="h-box pure-u-1 pure-u-md-20-24">
+            <div class="pure-u-1 footer-content">
+                <div class="footer-section pure-u-1-4" id="about-invidious-description">
+                    <b>Invidious</b>
+                    <p>A free and open source frontend for Youtube that that respects your privacy! Now you can watch videos (ad-free), subscribe to channels, create playlist and much more all without the prying eyes of Google!</p>
+                </div>
+                <div class="footer-section">
+                    <b class="footer-section-header"><%= translate(locale, "Navigation")%></b>
+                    <ul class="pure-menu-list footer-section-list">
+                        <li class="pure-menu-item footer-section-item">
+                            <a href="/" title="<%= translate(locale, "Home")%>">
+                                <%= translate(locale, "Home") %>
+                            </a>
+                        </li>
+                        <li class="pure-menu-item footer-section-item">
+                            <a href="/feed/popular" title="<%= translate(locale, "Popular")%>">
+                                <%= translate(locale, "Popular") %>
+                            </a>
+                        </li>
+                        <li class="pure-menu-item footer-section-item">
+                            <a href="/feed/trending" title="<%= translate(locale, "Trending")%>" style="">
+                                <%= translate(locale, "Trending") %>
+                            </a>
+                        </li>
+                        <li class="pure-menu-item footer-section-item">
+                            <a href="/search" title="<%= translate(locale, "Search")%>">
+                                <%= translate(locale, "Search") %>
+                            </a>
+                        </li>
+                        <li class="pure-menu-item footer-section-item">
+                            <br>
+                        </li>
+                        <li class="pure-menu-item footer-section-item">
+                            <a href="/preferences?referer=<%= env.get?("current_page") %>" title="<%= translate(locale, "Preferences")%>">
+                                <%= translate(locale, "Preferences") %>
+                            </a>
+                        </li>
+                        <% if CONFIG.login_enabled %>
+                            <li class="pure-menu-item footer-section-item">
+                                <% if env.get? "user" %>
+                                    <form action="/signout?referer=<%= env.get?("current_page") %>" method="post">
+                                        <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
+                                        <a href="#" title="<%= translate(locale, "Log out") %>">
+                                            <input style="all:unset" type="submit" value="<%= translate(locale, "Log out") %>">
+                                        </a>
+                                    </form>
+                                <% else %>
+                                    <a href="/login?referer=<%= env.get?("current_page") %>" title="<%= translate(locale, "Log in") %>">
+                                        <%= translate(locale, "Log in") %>
+                                    </a>
+                                <% end %>
+                            </li>
+                        <% end %>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                  <b class="footer-section-header">Invidious</b>
+                  <ul class="pure-menu-list footer-section-list">
+                      <li class="pure-menu-item footer-section-item">
+                          <a href="https://invidious.io" title="<%= translate(locale, "Project Homepage")%>">
+                              <%= translate(locale, "Project Homepage") %>
+                          </a>
+                      </li>
+                      <li class="pure-menu-item footer-section-item">
+                          <a href="https://github.com/iv-org/invidious" title="<%= translate(locale, "Source Code")%>">
+                              <%= translate(locale, "Source Code") %>
+                          </a>
+                      </li>
+                      <li class="pure-menu-item footer-section-item">
+                          <a href="https://github.com/iv-org/invidious/issues" title="<%= translate(locale, "Issue tracker")%>" style="">
+                              <%= translate(locale, "Issue tracker") %>
+                          </a>
+                      </li>
+                      <li class="pure-menu-item footer-section-item">
+                          <a href="https://redirect.invidious.io" title="<%= translate(locale, "Public instances")%>">
+                              <%= translate(locale, "Public instances") %>
+                          </a>
+                      </li>
+                      <li class="pure-menu-item footer-section-item">
+                          <a href="https://invidious.io/donate" title="<%= translate(locale, "Donate")%>">
+                              <%= translate(locale, "Donate") %>
+                          </a>
+                      </li>
+                      <li class="pure-menu-item footer-section-item">
+                          <a href="https://matrix.to/#/#invidious:matrix.org" title="<%= translate(locale, "Matrix")%>">
+                              <%= translate(locale, "Matrix") %>
+                          </a>
+                      </li>
+
+                  </ul>                </div>
+                <div class="footer-section">
+                  <b class="footer-section-header"><%= translate(locale, "Support")%></b>
+                  <ul class="pure-menu-list footer-section-list">
+                      <li class="pure-menu-item footer-section-item">
+                        <!-- TODO -->
+                          <a href="#" title="<%= translate(locale, "Contact instance maintainer")%>">
+                              <%= translate(locale, "Contact instance maintainer") %>
+                          </a>
+                      </li>
+                      <li class="pure-menu-item footer-section-item">
+                          <a href="https://github.com/iv-org/invidious/issues/new" title="<%= translate(locale, "Report a bug")%>">
+                              <%= translate(locale, "Report a bug") %>
+                          </a>
+                      </li>
+                      <li class="pure-menu-item footer-section-item">
+                          <a href="#" title="<%= translate(locale, "FAQs")%>" style="">
+                              <%= translate(locale, "FAQs") %>
+                          </a>
+                      </li>
+                  </ul>                
+                </div>
+                <div class="footer-section">
+                  <b class="footer-section-header"><%= translate(locale, "Legal")%></b>
+                  <ul class="pure-menu-list footer-section-list">
+                      <li class="pure-menu-item footer-section-item">
+                          <a href="/licences" title="<%= translate(locale, "Licences")%>">
+                              <%= translate(locale, "Licences") %>
+                          </a>
+                      </li>
+                      <!-- TODO -->
+                      <li class="pure-menu-item footer-section-item">
+                          <a href="/privacy" title="<%= translate(locale, "Privacy")%>">
+                              <%= translate(locale, "Privacy") %>
+                          </a>
+                      </li>
+                  </ul>                
+                </div>
+            </div>
+        </div>
+        <!-- <%= translate(locale, "Current version: ") %> <%= CURRENT_VERSION %>-<%= CURRENT_COMMIT %> @ <%= CURRENT_BRANCH %> -->
+        </div>
+        <div class="pure-u-1 pure-u-md-2-24"></div>
+    </footer>
 </body>
 
 </html>