diff --git a/components/GlobalPlayer.tsx b/components/GlobalPlayer.tsx
index 7dbb5d63..f83ebfee 100644
--- a/components/GlobalPlayer.tsx
+++ b/components/GlobalPlayer.tsx
@@ -3,9 +3,11 @@ import { usePlayer } from '@/providers/audio/PlayerProvider';
 import Image from 'next/image';
 import Scrubber from '@/components/Scrubber';
 import PlayerButtons from './PlayerButtons';
+import { Button } from './ui/button';
+import { Cross1Icon } from '@radix-ui/react-icons';
 
 export default function GlobalPlayer() {
-  const [player] = usePlayer();
+  const [player, dispatch] = usePlayer();
   const { metadata } = player;
 
   if (!metadata) return <></>;
@@ -16,6 +18,13 @@ export default function GlobalPlayer() {
       className="sticky bottom-0 left-0 mt-auto w-screen space-y-6 overflow-hidden bg-white py-3 shadow-2xl shadow-black"
     >
       <div className="container relative flex items-center gap-3">
+        <Button
+          variant="ghost"
+          className="h-auto rounded-full p-2"
+          onClick={() => dispatch({ type: 'STOP' })}
+        >
+          <Cross1Icon />
+        </Button>
         <div className="relative my-auto size-16 overflow-hidden rounded-lg shadow-md">
           <Image
             src={metadata.artworkUrl}
@@ -26,7 +35,7 @@ export default function GlobalPlayer() {
           />
         </div>
 
-        <div className=" max-w-[33%] space-y-0.5 self-center">
+        <div className="max-w-[33%] space-y-0.5 self-center">
           <div className="line-clamp-2 text-sm font-bold">{metadata.trackName}</div>
           <div className="line-clamp-2 text-xs font-extralight text-muted-foreground">
             {metadata.artistName}
@@ -34,7 +43,7 @@ export default function GlobalPlayer() {
         </div>
         <div className="absolute left-1/4 w-full">
           <div className="ml-6 flex max-w-2xl grow flex-col items-center gap-1">
-            {metadata && <PlayerButtons metadata={metadata} />}
+            <PlayerButtons metadata={metadata} />
             <Scrubber className="w-full max-md:hidden" />
           </div>
         </div>
diff --git a/providers/audio/PlayerProvider.tsx b/providers/audio/PlayerProvider.tsx
index 86e82d81..0fa27ff9 100644
--- a/providers/audio/PlayerProvider.tsx
+++ b/providers/audio/PlayerProvider.tsx
@@ -44,6 +44,9 @@ export type PlayerAction =
         id: string;
       };
     }
+  | {
+      type: 'STOP';
+    }
   | {
       type: 'SEEK';
       payload: {
@@ -76,6 +79,7 @@ const initialState: Player = {
   loading: false,
   seekTo: null,
   feedId: -1,
+  metadata: undefined,
 };
 
 const PlayerContext = createContext<[Player, Dispatch<PlayerAction>]>([initialState, () => {}]);
@@ -103,6 +107,9 @@ const playerReducer = (state: Player, action: PlayerAction) => {
       if (state.metadata?.id !== id) return state;
       return { ...state, playing: false };
     }
+    case 'STOP': {
+      return initialState;
+    }
     case 'SEEK':
       return { ...state, seekTo: action.payload.position };
     case 'SEEKED':
@@ -142,7 +149,7 @@ export default function PlayerProvider({ children }: { children: ReactNode }) {
     soundController,
     spotifyController,
     youtubeController,
-    zoraController
+    zoraController,
   ]);
 
   useEffect(() => {