diff --git a/static/images/nav-about-icon.svg b/static/images/nav-about-icon.svg
new file mode 100644
index 00000000..3dcf440e
--- /dev/null
+++ b/static/images/nav-about-icon.svg
@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 23.0233C15.578 23.0233 16.0465 22.5547 16.0465 21.9767V13.6046C16.0465 13.0267 15.578 12.5581 15 12.5581C14.422 12.5581 13.9535 13.0267 13.9535 13.6046V21.9767C13.9535 22.5547 14.422 23.0233 15 23.0233Z" fill="white"/>
+<path d="M15 8.02323C15.7706 8.02323 16.3953 8.64796 16.3953 9.41858C16.3953 10.1892 15.7706 10.8139 15 10.8139C14.2293 10.8139 13.6046 10.1892 13.6046 9.41858C13.6046 8.64796 14.2293 8.02323 15 8.02323Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 15C0 6.71573 6.71573 0 15 0C23.2843 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15ZM15 2.09302C7.87168 2.09302 2.09302 7.87168 2.09302 15C2.09302 22.1283 7.87168 27.907 15 27.907C22.1283 27.907 27.907 22.1283 27.907 15C27.907 7.87168 22.1283 2.09302 15 2.09302Z" fill="white"/>
+</svg>
diff --git a/static/images/nav-about-selected-icon.svg b/static/images/nav-about-selected-icon.svg
new file mode 100644
index 00000000..0f4f6192
--- /dev/null
+++ b/static/images/nav-about-selected-icon.svg
@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 23.0233C15.578 23.0233 16.0465 22.5547 16.0465 21.9767V13.6046C16.0465 13.0267 15.578 12.5581 15 12.5581C14.422 12.5581 13.9535 13.0267 13.9535 13.6046V21.9767C13.9535 22.5547 14.422 23.0233 15 23.0233Z" fill="#4C8C36"/>
+<path d="M15 8.02322C15.7706 8.02322 16.3953 8.64795 16.3953 9.41857C16.3953 10.1892 15.7706 10.8139 15 10.8139C14.2293 10.8139 13.6046 10.1892 13.6046 9.41857C13.6046 8.64795 14.2293 8.02322 15 8.02322Z" fill="#4C8C36"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 15C0 6.71573 6.71573 0 15 0C23.2843 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15ZM15 2.09302C7.87168 2.09302 2.09302 7.87168 2.09302 15C2.09302 22.1283 7.87168 27.907 15 27.907C22.1283 27.907 27.907 22.1283 27.907 15C27.907 7.87168 22.1283 2.09302 15 2.09302Z" fill="#4C8C36"/>
+</svg>
diff --git a/static/images/nav-home-icon.svg b/static/images/nav-home-icon.svg
new file mode 100644
index 00000000..f1339730
--- /dev/null
+++ b/static/images/nav-home-icon.svg
@@ -0,0 +1,3 @@
+<svg width="38" height="30" viewBox="0 0 38 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.7725 28.5444C12.7725 29.346 13.4223 29.9958 14.2239 29.9958C15.0254 29.9958 15.6753 29.346 15.6753 28.5444H12.7725ZM14.2239 24.227L12.7735 24.1714C12.7728 24.19 12.7725 24.2084 12.7725 24.227H14.2239ZM18.8684 19.9115L18.8173 21.3619C18.8513 21.3631 18.8854 21.3631 18.9194 21.3619L18.8684 19.9115ZM23.5128 24.227H24.9642C24.9642 24.2084 24.9638 24.19 24.9633 24.1714L23.5128 24.227ZM22.0614 28.5444C22.0614 29.346 22.7113 29.9958 23.5128 29.9958C24.3144 29.9958 24.9642 29.346 24.9642 28.5444H22.0614ZM14.2239 27.093C13.4223 27.093 12.7725 27.7428 12.7725 28.5444C12.7725 29.346 13.4223 29.9958 14.2239 29.9958V27.093ZM23.5128 29.9958C24.3144 29.9958 24.9642 29.346 24.9642 28.5444C24.9642 27.7428 24.3144 27.093 23.5128 27.093V29.9958ZM14.2239 29.9958C15.0254 29.9958 15.6753 29.346 15.6753 28.5444C15.6753 27.7428 15.0254 27.093 14.2239 27.093V29.9958ZM13.0628 28.5444V27.093C13.0457 27.093 13.0287 27.0932 13.0117 27.0938L13.0628 28.5444ZM6.09603 22.0692H4.64463C4.64463 22.0874 4.64498 22.1058 4.64567 22.1242L6.09603 22.0692ZM7.54743 9.0917C7.54743 8.29012 6.89761 7.6403 6.09603 7.6403C5.29445 7.6403 4.64463 8.29012 4.64463 9.0917H7.54743ZM0.636443 11.0433C-0.0268087 11.4933 -0.199525 12.3959 0.250641 13.0593C0.700827 13.7225 1.60342 13.8951 2.26666 13.445L0.636443 11.0433ZM6.91114 10.2926C7.57439 9.84243 7.7471 8.93983 7.29694 8.2766C6.84675 7.61336 5.94416 7.44063 5.28092 7.89081L6.91114 10.2926ZM5.28092 7.89081C4.61765 8.34094 4.44496 9.2435 4.89508 9.90675C5.34523 10.57 6.24789 10.7427 6.91114 10.2926L5.28092 7.89081ZM16.19 2.24109L15.4026 1.02186C15.3933 1.02786 15.384 1.03395 15.3749 1.04017L16.19 2.24109ZM21.5467 2.24109L22.3618 1.04017C22.3527 1.03395 22.3434 1.02786 22.3341 1.02186L21.5467 2.24109ZM30.8256 10.2926C31.489 10.7428 32.3915 10.57 32.8417 9.90675C33.2918 9.2435 33.119 8.3409 32.4558 7.89078L30.8256 10.2926ZM23.5128 27.093C22.7113 27.093 22.0614 27.7428 22.0614 28.5444C22.0614 29.346 22.7113 29.9958 23.5128 29.9958V27.093ZM24.674 28.5444L24.725 27.0938C24.708 27.0932 24.691 27.093 24.674 27.093V28.5444ZM31.6407 22.0692L33.0911 22.1242C33.0917 22.1058 33.0921 22.0874 33.0921 22.0692H31.6407ZM33.0921 9.0917C33.0921 8.29012 32.4422 7.6403 31.6407 7.6403C30.8391 7.6403 30.1893 8.29012 30.1893 9.0917H33.0921ZM35.4704 13.4433C36.1338 13.8934 37.0364 13.7204 37.4863 13.057C37.9363 12.3936 37.7633 11.491 37.0999 11.0411L35.4704 13.4433ZM32.4558 7.89078C31.7924 7.44078 30.8896 7.61358 30.4395 8.27694C29.9896 8.94031 30.1622 9.84266 30.8256 10.2926L32.4558 7.89078ZM15.6753 28.5444V24.227H12.7725V28.5444H15.6753ZM15.6743 24.2823C15.7382 22.6091 17.1439 21.3029 18.8173 21.3619L18.9194 18.4608C15.6472 18.3457 12.8985 20.8996 12.7735 24.1714L15.6743 24.2823ZM18.9194 21.3619C20.5928 21.3029 21.9985 22.6091 22.0624 24.2823L24.9633 24.1714C24.8383 20.8996 22.0895 18.3457 18.8173 18.4608L18.9194 21.3619ZM22.0614 24.227V28.5444H24.9642V24.227H22.0614ZM14.2239 29.9958H23.5128V27.093H14.2239V29.9958ZM14.2239 27.093H13.0628V29.9958H14.2239V27.093ZM13.0117 27.0938C10.1012 27.1963 7.65673 24.9242 7.54639 22.0143L4.64567 22.1242C4.81663 26.6332 8.60428 30.1537 13.1138 29.9948L13.0117 27.0938ZM7.54743 22.0692V9.0917H4.64463V22.0692H7.54743ZM2.26666 13.445L6.91114 10.2926L5.28092 7.89081L0.636443 11.0433L2.26666 13.445ZM6.91114 10.2926L17.0051 3.44204L15.3749 1.04017L5.28092 7.89081L6.91114 10.2926ZM16.9775 3.46033C18.1285 2.71696 19.6082 2.71696 20.7592 3.46033L22.3341 1.02186C20.2245 -0.34062 17.5122 -0.34062 15.4026 1.02186L16.9775 3.46033ZM20.7316 3.44204L30.8256 10.2926L32.4558 7.89078L22.3618 1.04017L20.7316 3.44204ZM23.5128 29.9958H24.674V27.093H23.5128V29.9958ZM24.6229 29.9948C29.1325 30.1537 32.92 26.6332 33.0911 22.1242L30.1902 22.0143C30.0799 24.9242 27.6354 27.1963 24.725 27.0938L24.6229 29.9948ZM33.0921 22.0692V9.0917H30.1893V22.0692H33.0921ZM37.0999 11.0411L32.4558 7.89078L30.8256 10.2926L35.4704 13.4433L37.0999 11.0411Z" fill="white"/>
+</svg>
diff --git a/static/images/nav-home-selected-icon.svg b/static/images/nav-home-selected-icon.svg
new file mode 100644
index 00000000..a8c875de
--- /dev/null
+++ b/static/images/nav-home-selected-icon.svg
@@ -0,0 +1,3 @@
+<svg width="38" height="30" viewBox="0 0 38 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.7725 28.5444C12.7725 29.346 13.4223 29.9958 14.2239 29.9958C15.0254 29.9958 15.6753 29.346 15.6753 28.5444H12.7725ZM14.2239 24.227L12.7735 24.1714C12.7728 24.19 12.7725 24.2084 12.7725 24.227H14.2239ZM18.8684 19.9115L18.8173 21.3619C18.8513 21.3631 18.8854 21.3631 18.9194 21.3619L18.8684 19.9115ZM23.5128 24.227H24.9642C24.9642 24.2084 24.9638 24.19 24.9633 24.1714L23.5128 24.227ZM22.0614 28.5444C22.0614 29.346 22.7113 29.9958 23.5128 29.9958C24.3144 29.9958 24.9642 29.346 24.9642 28.5444H22.0614ZM14.2239 27.093C13.4223 27.093 12.7725 27.7428 12.7725 28.5444C12.7725 29.346 13.4223 29.9958 14.2239 29.9958V27.093ZM23.5128 29.9958C24.3144 29.9958 24.9642 29.346 24.9642 28.5444C24.9642 27.7428 24.3144 27.093 23.5128 27.093V29.9958ZM14.2239 29.9958C15.0254 29.9958 15.6753 29.346 15.6753 28.5444C15.6753 27.7428 15.0254 27.093 14.2239 27.093V29.9958ZM13.0628 28.5444V27.093C13.0457 27.093 13.0287 27.0932 13.0117 27.0938L13.0628 28.5444ZM6.09603 22.0692H4.64463C4.64463 22.0874 4.64498 22.1058 4.64567 22.1242L6.09603 22.0692ZM7.54743 9.0917C7.54743 8.29012 6.89761 7.6403 6.09603 7.6403C5.29445 7.6403 4.64463 8.29012 4.64463 9.0917H7.54743ZM0.636443 11.0433C-0.0268087 11.4933 -0.199525 12.3959 0.250641 13.0593C0.700827 13.7225 1.60342 13.8951 2.26666 13.445L0.636443 11.0433ZM6.91114 10.2926C7.57439 9.84243 7.7471 8.93983 7.29694 8.2766C6.84675 7.61336 5.94416 7.44063 5.28092 7.89081L6.91114 10.2926ZM5.28092 7.89081C4.61765 8.34094 4.44496 9.2435 4.89508 9.90675C5.34523 10.57 6.24789 10.7427 6.91114 10.2926L5.28092 7.89081ZM16.19 2.24109L15.4026 1.02186C15.3933 1.02786 15.384 1.03395 15.3749 1.04017L16.19 2.24109ZM21.5467 2.24109L22.3618 1.04017C22.3527 1.03395 22.3434 1.02786 22.3341 1.02186L21.5467 2.24109ZM30.8256 10.2926C31.489 10.7428 32.3915 10.57 32.8417 9.90675C33.2918 9.2435 33.119 8.3409 32.4558 7.89078L30.8256 10.2926ZM23.5128 27.093C22.7113 27.093 22.0614 27.7428 22.0614 28.5444C22.0614 29.346 22.7113 29.9958 23.5128 29.9958V27.093ZM24.674 28.5444L24.725 27.0938C24.708 27.0932 24.691 27.093 24.674 27.093V28.5444ZM31.6407 22.0692L33.0911 22.1242C33.0917 22.1058 33.0921 22.0874 33.0921 22.0692H31.6407ZM33.0921 9.0917C33.0921 8.29012 32.4422 7.6403 31.6407 7.6403C30.8391 7.6403 30.1893 8.29012 30.1893 9.0917H33.0921ZM35.4704 13.4433C36.1338 13.8934 37.0364 13.7204 37.4863 13.057C37.9363 12.3936 37.7633 11.491 37.0999 11.0411L35.4704 13.4433ZM32.4558 7.89078C31.7924 7.44078 30.8896 7.61358 30.4395 8.27694C29.9896 8.94031 30.1622 9.84266 30.8256 10.2926L32.4558 7.89078ZM15.6753 28.5444V24.227H12.7725V28.5444H15.6753ZM15.6743 24.2823C15.7382 22.6091 17.1439 21.3029 18.8173 21.3619L18.9194 18.4608C15.6472 18.3457 12.8985 20.8996 12.7735 24.1714L15.6743 24.2823ZM18.9194 21.3619C20.5928 21.3029 21.9985 22.6091 22.0624 24.2823L24.9633 24.1714C24.8383 20.8996 22.0895 18.3457 18.8173 18.4608L18.9194 21.3619ZM22.0614 24.227V28.5444H24.9642V24.227H22.0614ZM14.2239 29.9958H23.5128V27.093H14.2239V29.9958ZM14.2239 27.093H13.0628V29.9958H14.2239V27.093ZM13.0117 27.0938C10.1012 27.1963 7.65673 24.9242 7.54639 22.0143L4.64567 22.1242C4.81663 26.6332 8.60428 30.1537 13.1138 29.9948L13.0117 27.0938ZM7.54743 22.0692V9.0917H4.64463V22.0692H7.54743ZM2.26666 13.445L6.91114 10.2926L5.28092 7.89081L0.636443 11.0433L2.26666 13.445ZM6.91114 10.2926L17.0051 3.44204L15.3749 1.04017L5.28092 7.89081L6.91114 10.2926ZM16.9775 3.46033C18.1285 2.71696 19.6082 2.71696 20.7592 3.46033L22.3341 1.02186C20.2245 -0.34062 17.5122 -0.34062 15.4026 1.02186L16.9775 3.46033ZM20.7316 3.44204L30.8256 10.2926L32.4558 7.89078L22.3618 1.04017L20.7316 3.44204ZM23.5128 29.9958H24.674V27.093H23.5128V29.9958ZM24.6229 29.9948C29.1325 30.1537 32.92 26.6332 33.0911 22.1242L30.1902 22.0143C30.0799 24.9242 27.6354 27.1963 24.725 27.0938L24.6229 29.9948ZM33.0921 22.0692V9.0917H30.1893V22.0692H33.0921ZM37.0999 11.0411L32.4558 7.89078L30.8256 10.2926L35.4704 13.4433L37.0999 11.0411Z" fill="#4C8C36"/>
+</svg>
diff --git a/static/images/nav-playlists-icon.svg b/static/images/nav-playlists-icon.svg
new file mode 100644
index 00000000..fbdd76a2
--- /dev/null
+++ b/static/images/nav-playlists-icon.svg
@@ -0,0 +1,7 @@
+<svg width="39" height="29" viewBox="0 0 39 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27 1.5C27 2.32842 26.3284 3 25.5 3H1.5C0.671581 3 0 2.32842 0 1.5C0 0.671581 0.671581 0 1.5 0H25.5C26.3284 0 27 0.671581 27 1.5Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 9.50002C23 10.3284 22.3284 11 21.5 11H1.5C0.671581 11 0 10.3284 0 9.50002C0 8.6716 0.671581 8.00002 1.5 8.00002H21.5C22.3284 8.00002 23 8.6716 23 9.50002Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 17.5C15 18.3284 14.3284 19 13.5 19H1.5C0.671581 19 0 18.3284 0 17.5C0 16.6716 0.671581 16 1.5 16H13.5C14.3284 16 15 16.6716 15 17.5Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 25.5C13 26.3284 12.3284 27 11.5 27H1.5C0.671581 27 0 26.3284 0 25.5C0 24.6716 0.671581 24 1.5 24H11.5C12.3284 24 13 24.6716 13 25.5Z" fill="white"/>
+<path d="M29.5001 3.99977C30.3285 3.99977 31.0001 4.67135 31.0001 5.49977C31.0001 9.08964 33.9103 11.9998 37.5001 11.9998C38.3285 11.9998 39.0001 12.6714 39.0001 13.4998C39.0001 14.3282 38.3285 14.9998 37.5001 14.9998C34.9857 14.9998 32.6995 14.023 31.0001 12.428V22.4998C31.0001 26.0896 28.0899 28.9998 24.5001 28.9998C20.9103 28.9998 18.0001 26.0896 18.0001 22.4998C18.0001 18.91 20.9103 15.9998 24.5001 15.9998C25.7887 15.9998 26.9899 16.3748 28.0001 17.0216V5.49977C28.0001 4.67135 28.6717 3.99977 29.5001 3.99977Z" fill="white"/>
+</svg>
diff --git a/static/images/nav-playlists-selected-icon.svg b/static/images/nav-playlists-selected-icon.svg
new file mode 100644
index 00000000..6a932f74
--- /dev/null
+++ b/static/images/nav-playlists-selected-icon.svg
@@ -0,0 +1,7 @@
+<svg width="39" height="29" viewBox="0 0 39 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27 1.5C27 2.32842 26.3284 3 25.5 3H1.5C0.671581 3 0 2.32842 0 1.5C0 0.671581 0.671581 0 1.5 0H25.5C26.3284 0 27 0.671581 27 1.5Z" fill="#4C8C36"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 9.50002C23 10.3284 22.3284 11 21.5 11H1.5C0.671581 11 0 10.3284 0 9.50002C0 8.6716 0.671581 8.00002 1.5 8.00002H21.5C22.3284 8.00002 23 8.6716 23 9.50002Z" fill="#4C8C36"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 17.5C15 18.3284 14.3284 19 13.5 19H1.5C0.671581 19 0 18.3284 0 17.5C0 16.6716 0.671581 16 1.5 16H13.5C14.3284 16 15 16.6716 15 17.5Z" fill="#4C8C36"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 25.5C13 26.3284 12.3284 27 11.5 27H1.5C0.671581 27 0 26.3284 0 25.5C0 24.6716 0.671581 24 1.5 24H11.5C12.3284 24 13 24.6716 13 25.5Z" fill="#4C8C36"/>
+<path d="M29.5001 3.99977C30.3285 3.99977 31.0001 4.67135 31.0001 5.49977C31.0001 9.08964 33.9103 11.9998 37.5001 11.9998C38.3285 11.9998 39.0001 12.6714 39.0001 13.4998C39.0001 14.3282 38.3285 14.9998 37.5001 14.9998C34.9857 14.9998 32.6995 14.023 31.0001 12.428V22.4998C31.0001 26.0896 28.0899 28.9998 24.5001 28.9998C20.9103 28.9998 18.0001 26.0896 18.0001 22.4998C18.0001 18.91 20.9103 15.9998 24.5001 15.9998C25.7887 15.9998 26.9899 16.3748 28.0001 17.0216V5.49977C28.0001 4.67135 28.6717 3.99977 29.5001 3.99977Z" fill="#4C8C36"/>
+</svg>
diff --git a/static/images/nav-profile-icon.svg b/static/images/nav-profile-icon.svg
new file mode 100644
index 00000000..1ab3caeb
--- /dev/null
+++ b/static/images/nav-profile-icon.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.8438 27H5.15726C4.09768 27 3.31523 25.9545 3.71487 24.993C5.56915 20.547 9.9254 18 14.9998 18C20.0757 18 24.432 20.547 26.2862 24.993C26.6859 25.9545 25.9034 27 24.8438 27ZM8.87501 8.99998C8.87501 5.69098 11.6235 2.99998 14.9998 2.99998C18.3776 2.99998 21.1246 5.69098 21.1246 8.99998C21.1246 12.309 18.3776 15 14.9998 15C11.6235 15 8.87501 12.309 8.87501 8.99998ZM29.9335 26.454C28.8204 21.4155 25.3384 17.697 20.7556 16.0095C23.184 14.0939 24.6004 10.9964 24.0798 7.6049C23.4765 3.6704 20.1354 0.521966 16.1023 0.0629653C10.5348 -0.571535 5.81261 3.67348 5.81261 8.99998C5.81261 11.835 7.15394 14.3609 9.24555 16.0095C4.66116 17.697 1.18075 21.4155 0.066036 26.454C-0.3382 28.2855 1.1685 30 3.08096 30H26.9186C28.8326 30 30.3393 28.2855 29.9335 26.454Z" fill="white"/>
+</svg>
diff --git a/static/images/nav-profile-selected-icon.svg b/static/images/nav-profile-selected-icon.svg
new file mode 100644
index 00000000..d032cffb
--- /dev/null
+++ b/static/images/nav-profile-selected-icon.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.8438 27H5.15726C4.09768 27 3.31523 25.9545 3.71487 24.993C5.56915 20.547 9.9254 18 14.9998 18C20.0757 18 24.432 20.547 26.2862 24.993C26.6859 25.9545 25.9034 27 24.8438 27ZM8.87501 8.99998C8.87501 5.69098 11.6235 2.99998 14.9998 2.99998C18.3776 2.99998 21.1246 5.69098 21.1246 8.99998C21.1246 12.309 18.3776 15 14.9998 15C11.6235 15 8.87501 12.309 8.87501 8.99998ZM29.9335 26.454C28.8204 21.4155 25.3384 17.697 20.7556 16.0095C23.184 14.0939 24.6004 10.9964 24.0798 7.6049C23.4765 3.6704 20.1354 0.521966 16.1023 0.0629653C10.5348 -0.571535 5.81261 3.67348 5.81261 8.99998C5.81261 11.835 7.15394 14.3609 9.24555 16.0095C4.66116 17.697 1.18075 21.4155 0.066036 26.454C-0.3382 28.2855 1.1685 30 3.08096 30H26.9186C28.8326 30 30.3393 28.2855 29.9335 26.454Z" fill="#4C8C36"/>
+</svg>
diff --git a/views/components/mobilenav/mobilenav.templ b/views/components/mobilenav/mobilenav.templ
new file mode 100644
index 00000000..29838dd3
--- /dev/null
+++ b/views/components/mobilenav/mobilenav.templ
@@ -0,0 +1,32 @@
+package mobilenav
+
+templ MobileNav() {
+	<div
+		class={ "fixed", "bottom-0", "left-0", "h-auto", "w-full" }
+	>
+		<nav
+			class={ "bg-primary",  "h-[70px]", "m-[5px]", "rounded-[10px]", "flex", "justify-center", "items-center" }
+		>
+			<ul class={ "w-full", "m-0", "p-5", "list-none", "flex", "justify-between" }>
+				<li>
+					<a href="/"><img src="/static/images/nav-home-icon.svg" alt="Home"/></a>
+				</li>
+				<li>
+					<a href="/playlists"><img src="/static/images/nav-playlists-icon.svg" alt="Playlists"/></a>
+				</li>
+				<li>
+					<a href="/profile"><img src="/static/images/nav-profile-icon.svg" alt="Profile"/></a>
+				</li>
+				<li>
+					<a href="/about"><img src="/static/images/nav-about-icon.svg" alt="About"/></a>
+				</li>
+			</ul>
+		</nav>
+	</div>
+	<div class="hidden">
+		<img src="/static/images/nav-home-selected-icon.svg" alt="Home"/>
+		<img src="/static/images/nav-playlists-selected-icon.svg" alt="Playlists"/>
+		<img src="/static/images/nav-profile-selected-icon.svg" alt="Profile"/>
+		<img src="/static/images/nav-about-selected-icon.svg" alt="About"/>
+	</div>
+}
diff --git a/views/components/player/mobile_player.templ b/views/components/player/mobile_player.templ
index d8ffc8cb..5546a1c6 100644
--- a/views/components/player/mobile_player.templ
+++ b/views/components/player/mobile_player.templ
@@ -3,7 +3,7 @@ package player
 templ mobilePlayer() {
 	<div
 		class={
-			"absolute", "bottom-0", "w-screen", "h-[120px]", "bg-accent", "rounded-t-3xl",
+			"absolute", "bottom-[80px]", "w-screen", "h-[120px]", "bg-accent", "rounded-[30px]",
 			"font-Ubuntu", "flex", "items-center", "justify-between", "gap-x-1", "p-[10px]",
 			"text-white",
 		}
diff --git a/views/layouts/default.templ b/views/layouts/default.templ
index ecf85321..901450a4 100644
--- a/views/layouts/default.templ
+++ b/views/layouts/default.templ
@@ -5,6 +5,7 @@ import (
 	"dankmuzikk/views/components/player"
 	"dankmuzikk/views/components/loading"
 	"fmt"
+	"dankmuzikk/views/components/mobilenav"
 )
 
 templ Default(isMobile bool, themeName string, children ...templ.Component) {
@@ -63,10 +64,19 @@ templ Default(isMobile bool, themeName string, children ...templ.Component) {
 			for _, child := range children {
 				@child
 			}
+			<!--
+                For when opened on a desktop and the client's width is really small,
+                and a similar thing isn't being done for mobile, since mobile clients can't change width w/o reloading.
+                And since desktops don't really mind rendering the same shit twice.
+            -->
+			<div style="display: contents" class={ "md:hidden" }>
+				@mobilenav.MobileNav()
+			</div>
 			<div id="loading" class="hidden">
 				@loading.Loading()
 			</div>
 			@player.PlayerSticky(isMobile)
+			//
 			<script src="/static/js/utils.js"></script>
 			<script type="module">
 			    function registerServiceWorkers() {