diff --git a/app/javascript/components/EraShows.jsx b/app/javascript/components/EraShows.jsx
index 7e300f50..6f18aa1c 100644
--- a/app/javascript/components/EraShows.jsx
+++ b/app/javascript/components/EraShows.jsx
@@ -1,6 +1,6 @@
 import { authFetch } from "./helpers/utils";
-import React, { useState, useEffect } from "react";
-import { useLoaderData, Link } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import { useLoaderData, Link, useOutletContext } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import LayoutWrapper from "./layout/LayoutWrapper";
 import Shows from "./Shows";
@@ -25,8 +25,7 @@ export const eraShowsLoader = async ({ params }) => {
 
 const EraShows = () => {
   const { shows: initialShows, year } = useLoaderData();
-  const [viewMode, setViewMode] = useState("grid");
-  const [sortOption, setSortOption] = useState("desc");
+  const { viewMode, setViewMode, sortOption, setSortOption } = useOutletContext();
   const [yearsData, setYearsData] = useState(null);
 
   const sortedShows = [...initialShows].sort((a, b) => {
@@ -51,19 +50,11 @@ const EraShows = () => {
     fetchYearsData();
   }, []);
 
-  const handleViewModeChange = (mode) => {
-    setViewMode(mode);
-  };
-
-  const handleSortOptionChange = (option) => {
-    setSortOption(option);
-  };
-
   const renderViewToggleButtons = () => (
     <div className="view-toggle buttons has-addons">
       <button
         className={`button ${viewMode === "list" ? "is-selected" : ""}`}
-        onClick={() => handleViewModeChange("list")}
+        onClick={() => setViewMode("list")}
         disabled={viewMode === "list"}
       >
         <span className="icon">
@@ -72,7 +63,7 @@ const EraShows = () => {
       </button>
       <button
         className={`button ${viewMode === "grid" ? "is-selected" : ""}`}
-        onClick={() => handleViewModeChange("grid")}
+        onClick={() => setViewMode("grid")}
         disabled={viewMode === "grid"}
       >
         <span className="icon">
@@ -86,7 +77,7 @@ const EraShows = () => {
     <div className="view-toggle buttons has-addons">
       <button
         className={`button ${sortOption === "desc" ? "is-selected" : ""}`}
-        onClick={() => handleSortOptionChange("desc")}
+        onClick={() => setSortOption("desc")}
         disabled={sortOption === "desc"}
       >
         <span className="icon">
@@ -95,7 +86,7 @@ const EraShows = () => {
       </button>
       <button
         className={`button ${sortOption === "asc" ? "is-selected" : ""}`}
-        onClick={() => handleSortOptionChange("asc")}
+        onClick={() => setSortOption("asc")}
         disabled={sortOption === "asc"}
       >
         <span className="icon">
diff --git a/app/javascript/components/Eras.jsx b/app/javascript/components/Eras.jsx
index 7f4e7af5..08699c99 100644
--- a/app/javascript/components/Eras.jsx
+++ b/app/javascript/components/Eras.jsx
@@ -20,8 +20,8 @@ export const erasLoader = async () => {
   return erasData;
 };
 
-import React, { useState } from "react";
-import { Link, useLoaderData } from "react-router-dom";
+import React from "react";
+import { Link, useLoaderData, useOutletContext } from "react-router-dom";
 import { formatNumber } from "./helpers/utils";
 import LayoutWrapper from "./layout/LayoutWrapper";
 import MobileApps from "./pages/MobileApps";
@@ -33,21 +33,17 @@ import { faList, faTh, faSortAmountDown, faSortAmountUp } from "@fortawesome/fre
 
 const Eras = () => {
   const eras = useLoaderData();
-  const [viewMode, setViewMode] = useState("grid");
-  const [sortOption, setSortOption] = useState("desc");
+  const { viewMode, setViewMode, sortOption, setSortOption } = useOutletContext();
 
   const totalShows = Object.keys(eras).reduce((sum, era) => sum + eras[era].total_shows, 0);
   const totalDurationMs = Object.keys(eras).reduce((sum, era) => sum + eras[era].total_duration, 0);
   const totalHours = Math.round(totalDurationMs / (1000 * 60 * 60));
 
-  const handleViewModeChange = (mode) => setViewMode(mode);
-  const handleSortOptionChange = (option) => setSortOption(option);
-
   const renderViewToggleButtons = () => (
     <div className="view-toggle buttons has-addons">
       <button
         className={`button ${viewMode === "list" ? "is-selected" : ""}`}
-        onClick={() => handleViewModeChange("list")}
+        onClick={() => setViewMode("list")}
         disabled={viewMode === "list"}
       >
         <span className="icon">
@@ -56,7 +52,7 @@ const Eras = () => {
       </button>
       <button
         className={`button ${viewMode === "grid" ? "is-selected" : ""}`}
-        onClick={() => handleViewModeChange("grid")}
+        onClick={() => setViewMode("grid")}
         disabled={viewMode === "grid"}
       >
         <span className="icon">
@@ -70,7 +66,7 @@ const Eras = () => {
     <div className="view-toggle buttons has-addons">
       <button
         className={`button ${sortOption === "desc" ? "is-selected" : ""}`}
-        onClick={() => handleSortOptionChange("desc")}
+        onClick={() => setSortOption("desc")}
         disabled={sortOption === "desc"}
       >
         <span className="icon">
@@ -79,7 +75,7 @@ const Eras = () => {
       </button>
       <button
         className={`button ${sortOption === "asc" ? "is-selected" : ""}`}
-        onClick={() => handleSortOptionChange("asc")}
+        onClick={() => setSortOption("asc")}
         disabled={sortOption === "asc"}
       >
         <span className="icon">
@@ -127,59 +123,56 @@ const Eras = () => {
         LIVE PHISH
         <span className="hidden-phone"> AUDIO STREAMS</span>
       </p>
-      <p className="hidden-mobile">🍩 {formatNumber(totalShows)} shows</p>
-      <p className="hidden-mobile mb-4">🎵 {formatNumber(totalHours)} hours of music</p>
+      <p className="hidden-mobile mb-4">
+        {formatNumber(totalShows)} shows • {formatNumber(totalHours)} hours of music
+      </p>
 
       <div className="buttons mb-0">
         {renderViewToggleButtons()}
         {renderSortButtons()}
       </div>
 
-      <MobileApps className="mt-5" />
-
       <div className="hidden-mobile">
-        <p className="has-text-weight-bold mb-2 mt-3 project-open-source">This project is open source</p>
+        <p className="has-text-weight-bold mb-2 mt-5">This project is open source</p>
         <GitHubButton className="mr-2" />
         <DiscordButton />
       </div>
+
+      <p className="has-text-weight-bold mb-2 mt-5">Download mobile app</p>
+      <MobileApps />
     </div>
   );
 
   return (
-    <>
-      <LayoutWrapper sidebarContent={sidebarContent}>
-        <div className="display-phone-only">
-          {renderViewToggleButtons()}
-          {renderSortButtons()}
-        </div>
+    <LayoutWrapper sidebarContent={sidebarContent}>
+      <div className="display-phone-only">
+        {renderViewToggleButtons()}
+        {renderSortButtons()}
+      </div>
 
-        <div>
-          {Object.keys(eras)
-            .sort((a, b) => (sortOption === "asc" ? a.localeCompare(b) : b.localeCompare(a)))
-            .map((era) => (
-              <React.Fragment key={era}>
-                <div className="section-title">
-                  <div className="title-left">{era} Era</div>
-                  <span className="detail-right">{formatNumber(eras[era].total_shows, "show")}</span>
-                </div>
-                <ul className={`${viewMode === "grid" ? "grid-view" : ""} ${viewMode === "grid" && eras[era].periods.length < 3 ? "limited-width" : ""}`}>
-                  {eras[era].periods
-                    .sort((a, b) =>
-                      sortOption === "asc" ? a.period.localeCompare(b.period) : b.period.localeCompare(a.period)
-                    )
-                    .map((periodData) =>
-                      viewMode === "list" ? renderListItem(periodData) : renderGridItem(periodData)
-                    )}
-                </ul>
-              </React.Fragment>
-            )
-          )}
-        </div>
-      </LayoutWrapper>
-    </>
+      <div>
+        {Object.keys(eras)
+          .sort((a, b) => (sortOption === "asc" ? a.localeCompare(b) : b.localeCompare(a)))
+          .map((era) => (
+            <React.Fragment key={era}>
+              <div className="section-title">
+                <div className="title-left">{era} Era</div>
+                <span className="detail-right">{formatNumber(eras[era].total_shows, "show")}</span>
+              </div>
+              <ul className={`${viewMode === "grid" ? "grid-view" : ""} ${viewMode === "grid" && eras[era].periods.length < 3 ? "limited-width" : ""}`}>
+                {eras[era].periods
+                  .sort((a, b) =>
+                    sortOption === "asc" ? a.period.localeCompare(b.period) : b.period.localeCompare(a.period)
+                  )
+                  .map((periodData) =>
+                    viewMode === "list" ? renderListItem(periodData) : renderGridItem(periodData)
+                  )}
+              </ul>
+            </React.Fragment>
+          ))}
+      </div>
+    </LayoutWrapper>
   );
 };
 
 export default Eras;
-
-
diff --git a/app/javascript/components/layout/Layout.jsx b/app/javascript/components/layout/Layout.jsx
index d36cc783..5c8bcefb 100644
--- a/app/javascript/components/layout/Layout.jsx
+++ b/app/javascript/components/layout/Layout.jsx
@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect } from "react";
-import { Outlet, useNavigate, useNavigation, ScrollRestoration} from "react-router-dom";
+import { Outlet, useNavigate, useNavigation, ScrollRestoration } from "react-router-dom";
 import Navbar from "./Navbar";
 import Loader from "../controls/Loader";
 import Player from "../controls/Player";
@@ -28,6 +28,7 @@ const Layout = ({ props }) => {
   const [draftPlaylistMeta, setDraftPlaylistMeta] = useState(initialDraftPlaylistMeta);
   const [isDraftPlaylistSaved, setIsDraftPlaylistSaved] = useState(false);
   const [activeTrack, setActiveTrack] = useState(null);
+  const [viewMode, setViewMode] = useState("grid"); // Add viewMode state here
   const audioRef = useRef(null);
   const { setNotice, setAlert } = useFeedback();
 
@@ -43,7 +44,6 @@ const Layout = ({ props }) => {
         usernameUpdatedAt: props.usernameUpdatedAt,
         email: props.email,
       }, "Google login successful");
-    // Attempt login from jwt stored locally
     } else {
       let jwt = "";
       let username = "";
@@ -60,7 +60,7 @@ const Layout = ({ props }) => {
       if (jwt && username && email) {
         setUser({ jwt, username, usernameUpdatedAt, email });
       } else {
-        setUser('anonymous');
+        setUser("anonymous");
       }
     }
   }, []);
@@ -87,7 +87,7 @@ const Layout = ({ props }) => {
       localStorage.removeItem("usernameUpdatedAt");
       localStorage.removeItem("email");
     }
-    navigate("/")
+    navigate("/");
     setUser("anonymous");
     setNotice("Logged out successfully");
   };
@@ -124,34 +124,38 @@ const Layout = ({ props }) => {
   return (
     <>
       <ScrollRestoration />
-      {navigation.state === 'loading' && <Loader />}
+      {navigation.state === "loading" && <Loader />}
       <Navbar user={user} handleLogout={handleLogout} />
-      <main className={activeTrack ? 'with-player' : ''}>
-        <Outlet context={{
-          ...props,
-          user,
-          setUser,
-          handleLogin,
-          handleLogout,
-          activePlaylist,
-          setActivePlaylist,
-          customPlaylist,
-          setCustomPlaylist,
-          draftPlaylist,
-          setDraftPlaylist,
-          draftPlaylistMeta,
-          setDraftPlaylistMeta,
-          resetDraftPlaylist,
-          isDraftPlaylistSaved,
-          setIsDraftPlaylistSaved,
-          activeTrack,
-          playTrack,
-          audioRef,
-          openAppModal,
-          closeAppModal,
-          openDraftPlaylistModal,
-          closeDraftPlaylistModal,
-        }} />
+      <main className={activeTrack ? "with-player" : ""}>
+        <Outlet
+          context={{
+            ...props,
+            user,
+            setUser,
+            handleLogin,
+            handleLogout,
+            activePlaylist,
+            setActivePlaylist,
+            customPlaylist,
+            setCustomPlaylist,
+            draftPlaylist,
+            setDraftPlaylist,
+            draftPlaylistMeta,
+            setDraftPlaylistMeta,
+            resetDraftPlaylist,
+            isDraftPlaylistSaved,
+            setIsDraftPlaylistSaved,
+            activeTrack,
+            playTrack,
+            audioRef,
+            openAppModal,
+            closeAppModal,
+            openDraftPlaylistModal,
+            closeDraftPlaylistModal,
+            viewMode,
+            setViewMode,
+          }}
+        />
       </main>
       <Player
         activePlaylist={activePlaylist}
diff --git a/app/javascript/stylesheets/content.css.scss b/app/javascript/stylesheets/content.css.scss
index db1aed0c..be2c9305 100644
--- a/app/javascript/stylesheets/content.css.scss
+++ b/app/javascript/stylesheets/content.css.scss
@@ -23,7 +23,7 @@ main {
   background-color: rgba($header-gray, 0.7);
   padding: 1rem;
   flex: 0 0 16rem;
-  border-radius: 5px;
+  border-radius: $radius;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
   max-height: fit-content;
   z-index: 2;
diff --git a/app/javascript/stylesheets/navbar.css.scss b/app/javascript/stylesheets/navbar.css.scss
index 8bf04b43..249f3b84 100644
--- a/app/javascript/stylesheets/navbar.css.scss
+++ b/app/javascript/stylesheets/navbar.css.scss
@@ -64,7 +64,7 @@
   }
 
   .dropdown-menu {
-    border-radius: 5px !important;
+    border-radius: $radius !important;
 
     .icon {
       margin-right: 0.5rem;