diff --git a/components/ShoutBox/shoutbox.tsx b/components/ShoutBox/shoutbox.tsx
index ed49295..641e75e 100644
--- a/components/ShoutBox/shoutbox.tsx
+++ b/components/ShoutBox/shoutbox.tsx
@@ -22,7 +22,7 @@ export const ChatWrapper = () => {
 
   return (
     <div
-      className={`w-full flex-col items-center ${
+      className={`max-w-[61rem] flex-col items-center ${
         shoutboxOpen ? 'flex' : 'hidden'
       }`}
     >
diff --git a/components/footer.tsx b/components/footer.tsx
index 302b9b3..153d186 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -16,7 +16,7 @@ interface FooterProps {
 
 const Footer = ({ navigationItems }: FooterProps) => {
   return (
-    <footer className="pb-32 z-15 flex max-w-full flex-col flex-wrap items-center justify-center bg-blue-darkest py-14 text-white lg:flex-row">
+    <footer className="z-15 flex max-w-full flex-col flex-wrap items-center justify-center bg-blue-darkest py-14 pb-32 text-white lg:flex-row">
       <div className="flex w-64 max-w-full justify-center lg:justify-start xl:w-128">
         <div className="flex w-fit flex-col items-center">
           <div className="relative flex h-36 w-36 md:h-52 md:w-52">
diff --git a/components/playerControlPanel.tsx b/components/playerControlPanel.tsx
index 83f21b6..d25e181 100644
--- a/components/playerControlPanel.tsx
+++ b/components/playerControlPanel.tsx
@@ -36,7 +36,7 @@ const PlayerControlPanel = ({
           </div>
 
           {showMeta && (
-            <div className="flex max-w-[50%] py-6 flex-col text-right lg:text-center">
+            <div className="flex max-w-[50%] flex-col py-6 text-right lg:text-center">
               <span className="font-bold md:text-xl">{song}</span>
               <span className="text-sm opacity-80 md:text-base">{artist}</span>
             </div>
diff --git a/components/videoPlayer.tsx b/components/videoPlayer.tsx
index 5c6f495..e0cb86d 100644
--- a/components/videoPlayer.tsx
+++ b/components/videoPlayer.tsx
@@ -10,7 +10,7 @@ const VideoPlayer = () => {
 
   return (
     videoOpen && (
-      <div className="mx-auto block w-full max-w-6xl">
+      <div className="block w-full max-w-[61rem]">
         <div className="flex w-full items-end justify-end text-coral">
           <button
             onClick={handleClose}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 835d665..fa1efc3 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,4 +1,4 @@
-import { createRef, useState } from 'react';
+import { createRef, useEffect, useState } from 'react';
 import { AppProps } from 'next/app';
 import 'tailwindcss/tailwind.css';
 
@@ -15,6 +15,28 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
   const [muted, setMuted] = useState(false);
   const [playClicked, setPlayClicked] = useState(false);
 
+  const [playerMounted, setPlayerMounted] = useState(true);
+
+  const handleEnded = () => {
+    // remount the audio element to reset the audio stream
+    setPlayerMounted(false);
+  };
+
+  useEffect(() => {
+    audioEl?.current?.addEventListener('ended', handleEnded);
+    return () => audioEl?.current?.removeEventListener('ended', handleEnded);
+  }, [audioEl]);
+
+  useEffect(() => {
+    if (!playerMounted) {
+      setPlayerMounted(true);
+    }
+    if (playerMounted && playing) {
+      audioEl?.current?.play();
+      setPlaying(true);
+    }
+  }, [playerMounted]);
+
   const handlePlayPause = () => {
     setPlayClicked(true);
 
@@ -34,9 +56,11 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
 
   return (
     <ShoutBoxAndVideoProvider>
-      <audio ref={audioEl}>
-        <source src={AUDIO_STREAM_URL} type="audio/mpeg" />
-      </audio>
+      {playerMounted && (
+        <audio ref={audioEl}>
+          <source src={AUDIO_STREAM_URL} type="audio/mpeg" />
+        </audio>
+      )}
       <Component
         {...pageProps}
         playing={playing}
@@ -45,7 +69,7 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
         onMute={handleMute}
       />
       <div className="fixed bottom-0 z-50 w-full">
-        <div className="flex flex-col bg-blue-darkest md:flex-row">
+        <div className="flex w-full flex-col justify-center bg-blue-darkest md:flex-row">
           <VideoPlayer />
           <ChatWrapper />
         </div>