diff --git a/src/renderer/assets/banner.png b/src/renderer/assets/banner.png
new file mode 100644
index 00000000..1edba696
Binary files /dev/null and b/src/renderer/assets/banner.png differ
diff --git a/src/renderer/assets/ko_fi.svg b/src/renderer/assets/ko_fi.svg
new file mode 100644
index 00000000..8630f586
--- /dev/null
+++ b/src/renderer/assets/ko_fi.svg
@@ -0,0 +1 @@
+<svg fill="none" height="391" viewBox="0 0 391 391" width="391" xmlns="http://www.w3.org/2000/svg"><path d="m52 102h296v199h-296z" fill="#fff"/><path d="m174 1.09995c-79.2999 8.9-145.5999 65.29995-166.59995 141.70005-15.2 55.6-5.8 114 26.10005 161.7 61.7 92.3 189.4999 114.2 278.7999 47.8 74.8-55.8 99.8-156.6 59.7-241-9.7-20.3001-20.4-35.6001-36.4-52.2001-27.2-27.9-61.3-46.7-99.6-54.99995-18.3-3.900005-43.3-5.1-62-3zm117.8 102.90005c25.2 7 43.6 24.6 50.2 48 7.8 28.1-.1 55.6-21.5 73.9-11.5 9.8-32.5 17.1-49.6 17.1h-7.6l-.8 7.2c-1.9 19.4-11.4 32.5-27 37-2.9.9-25.2 1.2-80 1.2l-75.9999.1-6-2.8c-9.6-4.5-16.9-12.7-19.7-22.2-.4-1.6-.8-36.6-.8-77.8 0-80.7 0-80.6 5.2-82.7 1.4-.5 48.5999-.9 114.2999-.9 109.5-.1 112.2-.1 119.3 1.9z" fill="#579fbf"/><path d="m264 173v34h8.8c15.5 0 25-5.3 31.2-17.4 3.3-6.6 3.5-7.4 3.5-17.5 0-9.6-.3-11.1-2.8-16.3-3-6.2-8.6-11.6-15.2-14.8-3.3-1.6-6.2-2-14.8-2h-10.7z" fill="#579fbf"/><path d="m177.885 147.41c-7.3 2.4-9.6 3.7-15.3 8.4l-4.7 3.9-4.3-3.5c-14.2-11.6-35-12.9-46.7-2.9-5.8 5-8.1996 10.3-8.7996 19.4-.5 8.1 1.2 15.8 4.9996 23.2 1.1 2.2 5.9 8 10.6 13 14.7 15.3 42.4 40.7 44.4 40.7 1.2 0 12.1-10.1 27.3-25.3 22.9-22.8 25.7-25.9 28.6-32.1 4.1-8.7 5-18.8 2.5-26.4-4.9-14.6-23.4-23.4-38.6-18.4z" fill="#ff5f5f"/></svg>
\ No newline at end of file
diff --git a/src/renderer/assets/open_collective.svg b/src/renderer/assets/open_collective.svg
new file mode 100644
index 00000000..ea86a543
--- /dev/null
+++ b/src/renderer/assets/open_collective.svg
@@ -0,0 +1 @@
+<svg height="38" viewBox="0 0 38 38" width="38" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m34.6194245 8.17880011c2.1314244 3.07072649 3.3805755 6.80008579 3.3805755 10.82119989s-1.2491511 7.7504734-3.3805755 10.8211999l-4.9217466-4.9217466c.9664963-1.748848 1.5166078-3.7599079 1.5166078-5.8994533s-.5501115-4.1506053-1.5166078-5.8994533zm-4.7982246-4.79822459-4.9217466 4.92174663c-1.748848-.96649637-3.7599079-1.51660786-5.8994533-1.51660786-6.7457637 0-12.21428571 5.46852201-12.21428571 12.21428571s5.46852201 12.2142857 12.21428571 12.2142857c2.1395454 0 4.1506053-.5501115 5.8994533-1.5166078l4.9217466 4.9217466c-3.0707265 2.1314244-6.8000858 3.3805755-10.8211999 3.3805755-10.49341025 0-19-8.5065898-19-19 0-10.49341025 8.50658975-19 19-19 4.0211141 0 7.7504734 1.24915112 10.8211999 3.38057552z" fill="#7fadf2"/><path d="m34.6194245 8.17880011c2.1314244 3.07072649 3.3805755 6.80008579 3.3805755 10.82119989s-1.2491511 7.7504734-3.3805755 10.8211999l-4.9217466-4.9217466c.9664963-1.748848 1.5166078-3.7599079 1.5166078-5.8994533s-.5501115-4.1506053-1.5166078-5.8994533z" fill="#b8d3f4"/></g></svg>
\ No newline at end of file
diff --git a/src/renderer/style.less b/src/renderer/style.less
index e838b37f..9f29b0df 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -45,6 +45,17 @@ body {
   transition: opacity .10s var(--appleEase);
 }
 
+a:-webkit-any-link {
+  color: var(--keyColor);
+}
+
+hr {
+  appearance: none;
+  border: none;
+  height: 1px;
+  background-color: rgb(255 255 255 / 20%);
+}
+
 body[loading] {
   opacity: 0.5;
   pointer-events: none;
@@ -1828,6 +1839,20 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 /* Cider */
 
+.about-page {
+  .sponsorBtn {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    >img {
+      width: 26px;
+      margin: 0px 16px 0px 0px;
+      pointer-events: none;
+    }
+  }
+}
+
 .md-close-btn {
   -webkit-mask-image: url("ameres://icons/webui/close.svg");
   -webkit-mask-repeat: no-repeat;
@@ -1864,7 +1889,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
   &:active {
     filter: brightness(75%);
-    transform: translateY(2px);
+    transform: scale(0.98);
+    transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase);
   }
 }
 
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 0017746b..33a5cdd0 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -92,9 +92,10 @@
                                             {{ mk.nowPlayingItem["attributes"]["artistName"] }}
                                         </div>
                                         <div class="song-artist item-navigate" style="display: inline-block;"
-                                            @click="getNowPlayingItemDetailed('album')">
+                                             @click="getNowPlayingItemDetailed('album')">
                                             <div class="separator" style="display: inline-block;">{{"-"}}</div>
-                                            {{(mk.nowPlayingItem["attributes"]["albumName"]) ? (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
+                                            {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
+                                            (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
                                         </div>
                                     </div>
 
@@ -127,7 +128,8 @@
                 <div class="app-chrome--right">
                     <div class="app-chrome-item volume display--large">
                         <div class="app-chrome-item volume-icon"></div>
-                        <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1" v-model="mk.volume"
+                        <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1"
+                               v-model="mk.volume"
                                v-if="typeof mk.volume != 'undefined'">
                     </div>
                     <div class="app-chrome-item generic" v-if="false">
@@ -181,21 +183,30 @@
                         <div class="app-sidebar-header-text">
                             Apple Music
                         </div>
-                        <sidebar-library-item name="Home" svg-icon="./assets/feather/home.svg" page="home"></sidebar-library-item>
-                        <sidebar-library-item name="Listen Now" svg-icon="./assets/feather/play-circle.svg" page="listen_now"></sidebar-library-item>
-                        <sidebar-library-item name="Browse" svg-icon="./assets/feather/globe.svg" page="browse"></sidebar-library-item>
-                        <sidebar-library-item name="Radio" svg-icon="./assets/feather/radio.svg" page="radio"></sidebar-library-item>
+                        <sidebar-library-item name="Home" svg-icon="./assets/feather/home.svg"
+                                              page="home"></sidebar-library-item>
+                        <sidebar-library-item name="Listen Now" svg-icon="./assets/feather/play-circle.svg"
+                                              page="listen_now"></sidebar-library-item>
+                        <sidebar-library-item name="Browse" svg-icon="./assets/feather/globe.svg"
+                                              page="browse"></sidebar-library-item>
+                        <sidebar-library-item name="Radio" svg-icon="./assets/feather/radio.svg"
+                                              page="radio"></sidebar-library-item>
                         <div class="app-sidebar-header-text">
                             Library
                         </div>
-                        <sidebar-library-item name="Recently Added" svg-icon="./assets/feather/plus-circle.svg" page="library-recentlyadded"></sidebar-library-item>
-                        <sidebar-library-item name="Songs" svg-icon="./assets/feather/music.svg" page="library-songs"></sidebar-library-item>
-                        <sidebar-library-item name="Albums" svg-icon="./assets/feather/disc.svg" page="library-albums"></sidebar-library-item>
-                        <sidebar-library-item name="Artists" svg-icon="./assets/feather/user.svg" page="library-artists"></sidebar-library-item>
+                        <sidebar-library-item name="Recently Added" svg-icon="./assets/feather/plus-circle.svg"
+                                              page="library-recentlyadded"></sidebar-library-item>
+                        <sidebar-library-item name="Songs" svg-icon="./assets/feather/music.svg"
+                                              page="library-songs"></sidebar-library-item>
+                        <sidebar-library-item name="Albums" svg-icon="./assets/feather/disc.svg"
+                                              page="library-albums"></sidebar-library-item>
+                        <sidebar-library-item name="Artists" svg-icon="./assets/feather/user.svg"
+                                              page="library-artists"></sidebar-library-item>
                         <div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
                             Playlists
                         </div>
-                        <sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')" :item="item"></sidebar-playlist>
+                        <sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')"
+                                          :item="item"></sidebar-playlist>
                     </div>
                     <transition name="wpfade">
                         <div class="usermenu-container" v-if="chrome.menuOpened">
@@ -220,10 +231,11 @@
                                         </div>
                                     </div>
                                 </button>
-                                <button class="usermenu-item" v-if="cfg.advanced.AudioContext && cfg.audio.spatial" @click="modals.spatialProperties = true">
+                                <button class="usermenu-item" v-if="cfg.advanced.AudioContext && cfg.audio.spatial"
+                                        @click="modals.spatialProperties = true">
                                     Spatialized Audio Settings
                                 </button>
-                                <button class="usermenu-item">
+                                <button class="usermenu-item" @click="appRoute('about')">
                                     About
                                 </button>
                                 <button class="usermenu-item" @click="window.open('https://discord.gg/applemusic')">
@@ -240,7 +252,7 @@
                     </transition>
                     <div class="app-sidebar-footer">
 
-                        <div class="app-playback-controls display--small"  v-if="mkReady()"
+                        <div class="app-playback-controls display--small" v-if="mkReady()"
                              @contextmenu="nowPlayingContextMenu">
                             <div class="control-buttons">
                                 <div class="app-chrome-item">
@@ -253,7 +265,8 @@
                                     <button class="playback-button previous" @click="prevButton()"></button>
                                 </div>
                                 <div class="app-chrome-item">
-                                    <button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
+                                    <button class="playback-button pause" @click="mk.pause()"
+                                            v-if="mk.isPlaying"></button>
                                     <button class="playback-button play" @click="mk.play()" v-else></button>
                                 </div>
                                 <div class="app-chrome-item">
@@ -271,7 +284,8 @@
                             <div class="app-chrome-item volume">
                                 <div class="app-chrome-item volume-icon"></div>
                                 <div class="input-container">
-                                    <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1" v-model="mk.volume"
+                                    <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1"
+                                           v-model="mk.volume"
                                            v-if="typeof mk.volume != 'undefined'">
                                 </div>
                             </div>
@@ -304,7 +318,9 @@
                         </button>
                     </div>
                     <div class="app-sidebar-notification libraryNotification" v-if="library.downloadNotification.show">
-                        <div class="message">{{ library.downloadNotification.message }} ({{ library.downloadNotification.progress }} / {{ library.downloadNotification.total }})</div>
+                        <div class="message">{{ library.downloadNotification.message }} ({{
+                            library.downloadNotification.progress }} / {{ library.downloadNotification.total }})
+                        </div>
                     </div>
                 </div>
                 <div id="app-content">
@@ -313,6 +329,12 @@
                         <button class="nav-item"
                                 @click="navigateForward()"><%- include('svg/chevron-right.svg') %></button>
                     </div>
+                    <!-- About -->
+                    <transition name="wpfade">
+                        <template v-if="page == 'about'">
+                            <about-page></about-page>
+                        </template>
+                    </transition>
                     <!-- Artist Page -->
                     <transition name="wpfade">
                         <template v-if="page == 'artist-page' && artistPage.data.attributes">
@@ -493,11 +515,13 @@
                                 <img class="bg-artwork b" :src="$store.state.artwork.playerLCD">
                             </div>
                         </div>
-                            <lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics"
-                                        :richlyrics="richlyrics"></lyrics-view>
-                            <div v-if="drawer.panel == 'lyrics'" class="lyric-footer">
-                                <button class="md-btn" @click="modularUITest(!fullscreenLyrics)">{{fullscreenLyrics ? "Default View":'Fullscreen View'}}</button> 
-                            </div>     
+                        <lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics"
+                                     :richlyrics="richlyrics"></lyrics-view>
+                        <div v-if="drawer.panel == 'lyrics'" class="lyric-footer">
+                            <button class="md-btn" @click="modularUITest(!fullscreenLyrics)">{{fullscreenLyrics ?
+                                "Default View":'Fullscreen View'}}
+                            </button>
+                        </div>
                         <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
                     </div>
                 </transition>
@@ -506,11 +530,13 @@
     </transition>
     <transition name="fsModeSwitch">
         <div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
-            <fullscreen-view :image="currentArtUrl.replace('50x50', '600x600')" :time="lyriccurrenttime" :lyrics="lyrics" :richlyrics="richlyrics"></fullscreen-view>
+            <fullscreen-view :image="currentArtUrl.replace('50x50', '600x600')" :time="lyriccurrenttime"
+                             :lyrics="lyrics" :richlyrics="richlyrics"></fullscreen-view>
         </div>
     </transition>
     <transition name="wpfade">
-        <div class="bg-artwork-container" :class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
+        <div class="bg-artwork-container"
+             :class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
             <img @load="chrome.artworkReady = true" class="bg-artwork a "
             >
             <img class="bg-artwork b"
@@ -596,6 +622,9 @@
 <!-- Search -->
 <%- include('pages/search') %>
 
+<!-- About -->
+<%- include('pages/about') %>
+
 <script type="text/x-template" id="am-musiccovershelf">
     <h1>{{ component.attributes.title.stringForDisplay }}</h1>
 </script>
diff --git a/src/renderer/views/pages/about.ejs b/src/renderer/views/pages/about.ejs
index 47da5814..62914e49 100644
--- a/src/renderer/views/pages/about.ejs
+++ b/src/renderer/views/pages/about.ejs
@@ -1,19 +1,63 @@
-Major thanks to the Cider Development Team and all of our contributors.
+<script type="text/x-template" id="about-page">
+    <div class="content-inner about-page">
+        <div class="row">
+            <div class="col">
+                <img src="assets/banner.png" alt="Cider Logo" style="display:block;margin:0 auto;width: 500px;">
+                <p style="text-align: center">Major thanks to the Cider Collective Team and all of our contributors.</p>
 
-<p>"Apple Music" - Copyright © 2021 <a href="https://www.apple.com/" class="dt-footer__link"
-                                       target="_blank"
-                                       rel="noopener" data-dt-link-to-exclude="">Apple Inc.</a>
-    All Rights
-    Reserved.</p>
+                <p style="text-align: center">"Apple Music" - Copyright © 2021 <a href="https://www.apple.com/" class="dt-footer__link"
+                                                                                  target="_blank"
+                                                                                  rel="noopener" data-dt-link-to-exclude="">Apple Inc.</a>
+                    All Rights
+                    Reserved.</p>
+            </div>
+            <div class="col">
+                <div class="row">
+                    <div class="col">
+                        <h3></h3>
+                        <h3>Contributors</h3>
+                        <img class="md-contributors"
+                             style="cursor:pointer;width:100%;"
+                             onclick="window.open('https://github.com/ciderapp/Cider/graphs/contributors')"
+                             src="https://contrib.rocks/image?repo=ciderapp/Cider"/>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <h3>Cider Team</h3>
+                        <ul>
+                            <li><a href="https://github.com/cryptofyre" target="_blank">cryptofyre - Developer</a></li>
+                            <li><a href="https://github.com/coredev-uk" target="_blank">Core - Developer</a></li>
+                            <li><a href="https://github.com/child-duckling" target="_blank">Quacksire - Developer</a></li>
+                            <li><a href="https://github.com/booploops" target="_blank">booploops - Developer</a></li>
+                            <li><a href="https://github.com/vapormusic" target="_blank">vapormusic - Developer</a></li>
+                            <li><a href="https://twitter.com/MoonyVoid" target="_blank">Void - Social Communications Team</a></li>
+                            <li><a href="https://twitter.com/noah_grose" target="_blank">NoseySG - Social Communications Team</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <hr>
+        <div class="row">
+            <div class="col">
+                <h3>Sponsor this project</h3>
+                <button onclick="window.open('https://ko-fi.com/cryptofyre')" class="md-btn sponsorBtn"><img src="./assets/ko_fi.svg"/>Ko-fi</button>
+                <button onclick="window.open('https://opencollective.com/ciderapp')" class="md-btn sponsorBtn"><img src="./assets/open_collective.svg"/>Open Collective</button>
+                </div>
+            </div>
+        </div>
 
-cryptofyre - Developer - https://github.com/cryptofyre
-Core - Developer - https://github.com/coredev-uk
-Quacksire - Developer - https://github.com/child-duckling
-booploops - Developer - https://github.com/booploops
-vapormusic - Developer - https://github.com/vapormusic
-Void - Social Communications Team - https://twitter.com/MoonyVoid
-NoseySG - Social Communications Team - https://twitter.com/noah_grose
 
-<img class="md-contributors"
-     onclick="window.open('https://github.com/ciderapp/Cider/graphs/contributors')"
-     src="https://contrib.rocks/image?repo=ciderapp/Cider"/>
\ No newline at end of file
+
+
+    </div>
+</script>
+<script>
+    Vue.component('about-page', {
+        template: '#about-page',
+        methods: {
+
+        }
+    });
+</script>
\ No newline at end of file