diff --git a/apps/web/app/(admin)/admin/page.tsx b/apps/web/app/(admin)/admin/page.tsx
index 559c36f9..9585ea4b 100644
--- a/apps/web/app/(admin)/admin/page.tsx
+++ b/apps/web/app/(admin)/admin/page.tsx
@@ -3,16 +3,18 @@
 import { useEffect } from "react";
 import getSession from "@/lib/Authentication/JWT/getSession";
 import { useRouter } from "next/navigation";
+import { useSession } from "@/components/Providers/AuthProvider";
 
 export default function AdminPage() {
+  const { session } = useSession()
   const { push } = useRouter();
 
   useEffect(() => {
-    const session = getSession();
+
     if (session?.role !== "admin") {
       push("/home");
     }
-  }, [push]);
+  }, [push, session?.role]);
 
   return (
     <h1 className="text-white text-3xl flex justify-center min-h-screen">You are admin!</h1>
diff --git a/apps/web/app/(app)/artist/ArtistComponent.tsx b/apps/web/app/(app)/artist/ArtistComponent.tsx
index 49b13272..83819268 100644
--- a/apps/web/app/(app)/artist/ArtistComponent.tsx
+++ b/apps/web/app/(app)/artist/ArtistComponent.tsx
@@ -7,7 +7,6 @@ import ScrollButtons from "@/components/Home/ScrollButtons";
 import PageGradient from "@/components/Layout/PageGradient";
 import AlbumCard from "@/components/Music/Card/Album/AlbumCard";
 import SongCard from "@/components/Music/Card/SongCard";
-import getSession from "@/lib/Authentication/JWT/getSession";
 import { getArtistInfo } from "@music/sdk";
 import { Album, Artist, LibrarySong } from "@music/sdk/types";
 import { useSearchParams } from "next/navigation";
diff --git a/apps/web/app/(app)/history/page.tsx b/apps/web/app/(app)/history/page.tsx
index 81e5b442..ad5d3bfe 100644
--- a/apps/web/app/(app)/history/page.tsx
+++ b/apps/web/app/(app)/history/page.tsx
@@ -2,6 +2,7 @@
 
 
 import SongCard from "@/components/Music/Card/SongCard";
+import { useSession } from "@/components/Providers/AuthProvider";
 import getSession from "@/lib/Authentication/JWT/getSession";
 import { getListenHistory, getSongInfo } from "@music/sdk";
 import { LibrarySong } from "@music/sdk/types";
@@ -11,9 +12,10 @@ import { useEffect, useState } from "react";
 export default function HistoryPage() {
   const [listenHistorySongs, setListenHistorySongs] = useState<LibrarySong[]>([]);
 
+  const { session } = useSession()
+
   useEffect(() => {
     const fetchListenHistory = async () => {
-      const session = getSession()
 
       if (session) {
         const listenHistoryItems = await getListenHistory(Number(session.sub));
@@ -25,7 +27,7 @@ export default function HistoryPage() {
     };
   
     fetchListenHistory();
-  }, []);
+  }, [session]);
 
   return (
     <>
diff --git a/apps/web/app/(app)/layout.tsx b/apps/web/app/(app)/layout.tsx
index bc3b9362..90125715 100644
--- a/apps/web/app/(app)/layout.tsx
+++ b/apps/web/app/(app)/layout.tsx
@@ -4,6 +4,7 @@ import { Metadata, Viewport } from "next";
 import MainLayout from "./main-layout";
 import SplashScreen from "@/components/Layout/SplashScreen";
 import { cn } from "@music/ui/lib/utils";
+import AuthProvider from "@/components/Providers/AuthProvider";
 
 export const metadata: Metadata = {
   applicationName: "ParsonLabs Music",
@@ -48,9 +49,13 @@ export default async function RootLayout({ children }: any) {
           "min-h-screen bg-background font-sans antialiased bg-gray-900 texxt-white",
           fontSans.variable
         )}>
-        <SplashScreen>
-          <MainLayout>{children}</MainLayout>
-        </SplashScreen>
+        <AuthProvider>
+          <SplashScreen>
+            <MainLayout>
+              {children}
+            </MainLayout>
+          </SplashScreen>
+        </AuthProvider>
       </body>
     </html>
   );
diff --git a/apps/web/app/(app)/profile/UsernameComponent.tsx b/apps/web/app/(app)/profile/UsernameComponent.tsx
index 11223342..b7785df3 100644
--- a/apps/web/app/(app)/profile/UsernameComponent.tsx
+++ b/apps/web/app/(app)/profile/UsernameComponent.tsx
@@ -6,6 +6,7 @@ import PageGradient from "@/components/Layout/PageGradient";
 import ArtistCard from "@/components/Music/Artist/ArtistCard";
 import AlbumCard from "@/components/Music/Card/Album/AlbumCard";
 import SongCard from "@/components/Music/Card/SongCard";
+import { useSession } from "@/components/Providers/AuthProvider";
 import getSession from "@/lib/Authentication/JWT/getSession";
 import { getCache } from "@/lib/Caching/cache";
 import { getListenHistory, getProfilePicture, getSongInfo, getUserInfo, LibraryAlbum } from "@music/sdk";
@@ -23,8 +24,8 @@ export default function UsernameComponent() {
   const [topAlbums, setTopAlbums] = useState<(LibraryAlbum & { count: number, artist: Artist })[]>([]);
   const [topSongs, setTopSongs] = useState<(LibrarySong & { count: number })[]>([]);
   const [profilePicture, setProfilePicture] = useState<string | null>(null);
+  const { session } = useSession();
 
-  const session = getSession();
   useEffect(() => {
     async function fetchData() {
       const userCacheKey = `userInfo_${username}`;
diff --git a/apps/web/app/(app)/social/page.tsx b/apps/web/app/(app)/social/page.tsx
index 3037979f..018dbdfb 100644
--- a/apps/web/app/(app)/social/page.tsx
+++ b/apps/web/app/(app)/social/page.tsx
@@ -9,9 +9,10 @@ import FollowButton from "@/components/Friends/FollowButton";
 import ArtistCard from "@/components/Music/Artist/ArtistCard";
 import { User } from "@music/sdk/types";
 import UserCard from "@/components/Music/Card/User/UserCard";
+import { useSession } from "@/components/Providers/AuthProvider";
 
 export default function SocialPage() {
-  const session = getSession();
+  const { session } = useSession()
   const id = session?.sub;
 
   const [followers, setFollowers] = useState<User[]>([]);
diff --git a/apps/web/app/(dashboard)/layout.tsx b/apps/web/app/(dashboard)/layout.tsx
index d9a51730..1e24c0c2 100644
--- a/apps/web/app/(dashboard)/layout.tsx
+++ b/apps/web/app/(dashboard)/layout.tsx
@@ -11,6 +11,7 @@ import Image from "next/image"
 import { usePathname, useRouter } from "next/navigation"
 import { useEffect } from "react"
 import getSession from "@/lib/Authentication/JWT/getSession"
+import { useSession } from "@/components/Providers/AuthProvider"
 
 const fontSans = FontSans({
   subsets: ["latin"],
@@ -22,7 +23,7 @@ type RootLayoutProps = {
 }
 
 export default function RootLayout({ children }: RootLayoutProps) {
-  const session = getSession()
+  const { session } = useSession()
   const isAdmin = session?.role === "admin"
   const pathname = usePathname()
   const router = useRouter()
diff --git a/apps/web/app/(dashboard)/settings/page.tsx b/apps/web/app/(dashboard)/settings/page.tsx
index dd90116a..5f67b8e4 100644
--- a/apps/web/app/(dashboard)/settings/page.tsx
+++ b/apps/web/app/(dashboard)/settings/page.tsx
@@ -19,6 +19,7 @@ import { Avatar, AvatarImage, AvatarFallback } from "@radix-ui/react-avatar"
 import { useState, useEffect } from "react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
+import { useSession } from "@/components/Providers/AuthProvider"
 
 const FormSchema = z.object({
   picture: z.instanceof(File).optional(),
@@ -36,10 +37,10 @@ export default function SettingsPage() {
   const [message, setMessage] = useState<string | null>(null)
   const [profilePicture, setProfilePicture] = useState<string | null>(null)
   const [username, setUsername] = useState<string>("")
+  const { session } = useSession()
 
   useEffect(() => {
     const fetchSessionAndProfilePicture = async () => {
-      const session = getSession()
       if (session) {
         setUsername(session.username)
         const profilePic = await getProfilePicture(Number(session.sub))
@@ -51,10 +52,9 @@ export default function SettingsPage() {
       }
     }
     fetchSessionAndProfilePicture()
-  }, [])
+  }, [session])
 
   async function onSubmit(data: z.infer<typeof FormSchema>) {
-    const session = getSession()
     const userId = Number(session?.sub)
 
     if (file) {
diff --git a/apps/web/app/(unprotected)/layout.tsx b/apps/web/app/(unprotected)/layout.tsx
index 9e38680c..682e5d6f 100644
--- a/apps/web/app/(unprotected)/layout.tsx
+++ b/apps/web/app/(unprotected)/layout.tsx
@@ -5,6 +5,7 @@ import pl from "@/assets/pl-tp.png"
 import { cn } from "@music/ui/lib/utils"
 import { Metadata } from "next"
 import Image from "next/image"
+import AuthProvider from "@/components/Providers/AuthProvider"
 
 const fontSans = FontSans({
   subsets: ["latin"],
@@ -34,7 +35,10 @@ export default function RootLayout({ children }: RootLayoutProps) {
               ParsonLabs Music
             </div>
           </div>
-        {children}
+
+        <AuthProvider>
+          {children}
+        </AuthProvider>
       </body>
     </html>
   )
diff --git a/apps/web/app/(unprotected)/page.tsx b/apps/web/app/(unprotected)/page.tsx
index fd5c6970..3969c088 100644
--- a/apps/web/app/(unprotected)/page.tsx
+++ b/apps/web/app/(unprotected)/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import pl from "@/assets/pl-tp.png";
+import { useSession } from "@/components/Providers/AuthProvider";
 import ServerSelectIcon from "@/components/Setup/Server/ServerSelectIcon";
 import getSession from "@/lib/Authentication/JWT/getSession";
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -18,7 +19,7 @@ import {
 import { Input } from '@music/ui/components/input';
 import { Loader2Icon } from "lucide-react";
 import Image from "next/image";
-import { useRouter } from "next/navigation";
+import { useRouter, useSelectedLayoutSegment } from "next/navigation";
 import { useEffect, useState } from "react";
 import { SubmitHandler, useForm } from 'react-hook-form';
 import * as z from 'zod';
@@ -34,6 +35,7 @@ export default function MainPage() {
   const [showServerURLInput, setShowServerURLInput] = useState(false);
   const [showServerSelect, setShowServerSelect] = useState(false);
   const { push } = useRouter();
+  const { session } = useSession()
 
   useEffect(() => {
     const checkServerUrl = async () => {
@@ -46,7 +48,6 @@ export default function MainPage() {
         );
         let serverInfo: ServerInfo = await response.json();
 
-        const session = getSession();
         if (serverInfo.product_name && serverInfo.startup_wizard_completed) {
           localStorage.setItem("server", JSON.stringify(serverInfo));
 
@@ -76,7 +77,7 @@ export default function MainPage() {
     };
 
     checkServerUrl();
-  }, [push]);
+  }, [push, session]);
 
   const form = useForm<FormData>({
     resolver: zodResolver(schema),
@@ -91,7 +92,6 @@ export default function MainPage() {
       localStorage.setItem("server", JSON.stringify({ local_address: data.serverUrl }));
       let serverInfo = await getServerInfo();
 
-      const session = getSession();
       if (serverInfo.product_name && serverInfo.startup_wizard_completed) {
         localStorage.setItem("server", JSON.stringify(serverInfo));
 
diff --git a/apps/web/components/Artist/SongsInLibrary.tsx b/apps/web/components/Artist/SongsInLibrary.tsx
index 897f890f..87bd008f 100644
--- a/apps/web/components/Artist/SongsInLibrary.tsx
+++ b/apps/web/components/Artist/SongsInLibrary.tsx
@@ -5,6 +5,7 @@ import { useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import ScrollButtons from "../Home/ScrollButtons";
 import SongCard from "../Music/Card/SongCard";
+import { useSession } from "../Providers/AuthProvider";
 
 async function getSongsFromYourLibrary(user_id: number, artist_id: string) {
   const playlists = await getPlaylists(user_id);
@@ -32,9 +33,9 @@ export default function FromYourLibrary() {
 
   const searchParams = useSearchParams();
   const id = searchParams?.get("id");
+  const { session } = useSession()
 
   useEffect(() => {
-    const session = getSession();
 
     async function fetchSongs() {
       if (session && id) {
@@ -45,7 +46,7 @@ export default function FromYourLibrary() {
     }
 
     fetchSongs();
-  }, [id]);
+  }, [id, session]);
 
   return librarySongs.length > 0 && (
     <ScrollButtons heading="In your Library" id="InYourLibrary">
diff --git a/apps/web/components/Friends/FollowButton.tsx b/apps/web/components/Friends/FollowButton.tsx
index afcbec6f..2f7993f9 100644
--- a/apps/web/components/Friends/FollowButton.tsx
+++ b/apps/web/components/Friends/FollowButton.tsx
@@ -3,13 +3,14 @@
 import getSession from "@/lib/Authentication/JWT/getSession"
 import { follow } from "@music/sdk"
 import { Button } from "@music/ui/components/button"
+import { useSession } from "../Providers/AuthProvider"
 
 type FollowButtonProps = {
   userIDToFollow: number 
 }
 
 export default function FollowButton({ userIDToFollow }: FollowButtonProps) {
-  const session = getSession()
+  const { session } = useSession()
 
   return session && <Button onClick={() => follow(Number(session.sub), userIDToFollow)}>Follow</Button>
 }
\ No newline at end of file
diff --git a/apps/web/components/Friends/FriendActivity.tsx b/apps/web/components/Friends/FriendActivity.tsx
index c1c2129d..068f9d9a 100644
--- a/apps/web/components/Friends/FriendActivity.tsx
+++ b/apps/web/components/Friends/FriendActivity.tsx
@@ -8,6 +8,7 @@ import { Disc3Icon } from 'lucide-react';
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { getProfilePicture } from "@music/sdk";
+import { useSession } from "../Providers/AuthProvider";
 
 type Friend = User & {
   nowPlaying: {
@@ -20,9 +21,9 @@ type Friend = User & {
 
 export default function FriendActivity() {
   const [friends, setFriends] = useState<Friend[]>([])
+  const { session } = useSession()
 
   useEffect(() => {
-    const session = getSession();
     async function getActivity() {
       if (session) {
         const followingIDs = await getFollowing(Number(session?.sub) ?? "");
@@ -63,7 +64,7 @@ export default function FriendActivity() {
     return () => {
       clearInterval(intervalId);
     };
-  }, []);
+  }, [session]);
 
   return friends && (
     <>
diff --git a/apps/web/components/Home/FromYourLibrary.tsx b/apps/web/components/Home/FromYourLibrary.tsx
index 2b81429f..957b752a 100644
--- a/apps/web/components/Home/FromYourLibrary.tsx
+++ b/apps/web/components/Home/FromYourLibrary.tsx
@@ -7,6 +7,7 @@ import { LibrarySong } from "@music/sdk/types";
 import { useEffect, useState } from "react";
 import SongCard from "../Music/Card/SongCard";
 import ScrollButtons from "./ScrollButtons";
+import { useSession } from "../Providers/AuthProvider";
 
 async function getSongsFromYourLibrary(user_id: number, genre?: string) {
   const playlists = await getPlaylists(user_id);
@@ -41,9 +42,9 @@ interface FromYourLibraryProps {
 export default function FromYourLibrary({ genre }: FromYourLibraryProps) {
   const [librarySongs, setLibrarySongs] = useState<LibrarySong[]>([]);
   const [loading, setLoading] = useState(true);
+  const { session } = useSession()
   
   useEffect(() => {
-    const session = getSession();
   
     async function fetchSongs() {
       const cacheKey = "fromYourLibrary";
@@ -65,11 +66,11 @@ export default function FromYourLibrary({ genre }: FromYourLibraryProps) {
     }
   
     fetchSongs();
-  }, [genre]);
+  }, [genre, session]);
 
   if (loading) return null;
   if (!librarySongs || librarySongs.length === 0) return null;
-
+``
   return (
     <ScrollButtons heading="From Your Library" id="FromYourLibrary">
       <div className="flex flex-row pb-28">
diff --git a/apps/web/components/Home/ListenAgain.tsx b/apps/web/components/Home/ListenAgain.tsx
index 4fbc3bc5..b53411b9 100644
--- a/apps/web/components/Home/ListenAgain.tsx
+++ b/apps/web/components/Home/ListenAgain.tsx
@@ -9,6 +9,7 @@ import PageGradient from "../Layout/PageGradient";
 import AlbumCard from "../Music/Card/Album/AlbumCard";
 import SongCard from "../Music/Card/SongCard";
 import ScrollButtons from "./ScrollButtons";
+import { useSession } from "../Providers/AuthProvider";
 
 interface ListenAgainProps {
   genre?: string;
@@ -16,16 +17,16 @@ interface ListenAgainProps {
 
 export default function ListenAgain({ genre }: ListenAgainProps) {
   const [listenHistorySongs, setListenHistorySongs] = useState<SongInfo[]>([]);
-
+  const { session } = useSession()
+  
   useEffect(() => {
     const fetchListenHistory = async () => {
-      const session = getSession();
       const listenHistory = await getListenAgain(Number(session?.sub));
       setListenHistorySongs(listenHistory);
     };
 
     fetchListenHistory();
-  }, [genre]);
+  }, [genre, session?.sub]);
 
   if (!(listenHistorySongs[0]) || listenHistorySongs.length === 0) return null;
 
diff --git a/apps/web/components/Home/RandomSongs.tsx b/apps/web/components/Home/RandomSongs.tsx
index 1f518ab4..a6b3b968 100644
--- a/apps/web/components/Home/RandomSongs.tsx
+++ b/apps/web/components/Home/RandomSongs.tsx
@@ -1,6 +1,5 @@
 "use client"
 
-import getSession from "@/lib/Authentication/JWT/getSession";
 import setCache, { getCache } from "@/lib/Caching/cache";
 import { getRandomSong } from "@music/sdk";
 import { LibrarySong } from "@music/sdk/types";
diff --git a/apps/web/components/Home/RecommendedAlbums.tsx b/apps/web/components/Home/RecommendedAlbums.tsx
index 396f8722..738bedf2 100644
--- a/apps/web/components/Home/RecommendedAlbums.tsx
+++ b/apps/web/components/Home/RecommendedAlbums.tsx
@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 import AlbumCard from "../Music/Card/Album/AlbumCard";
 import ScrollButtons from "./ScrollButtons";
 import { LibrarySong } from "@music/sdk/types";
+import { useSession } from "../Providers/AuthProvider";
 
 async function getSongsFromYourLibrary(user_id: number, genre?: string) {
   const playlists = await getPlaylists(user_id);
@@ -41,9 +42,9 @@ interface RecommendedAlbumsProps {
 export default function RecommendedAlbums({ genre }: RecommendedAlbumsProps) {
   const [librarySongs, setLibrarySongs] = useState<LibrarySong[]>([]);
   const [loading, setLoading] = useState(true);
+  const { session } = useSession()
   
   useEffect(() => {
-    const session = getSession();
   
     async function fetchSongs() {
       const cacheKey = genre ? `recommendedAlbums_${genre}` : "recommendedAlbums";
@@ -65,7 +66,7 @@ export default function RecommendedAlbums({ genre }: RecommendedAlbumsProps) {
     }
   
     fetchSongs();
-  }, [genre]);
+  }, [genre, session]);
 
   if (loading) return null;
   if (!librarySongs || librarySongs.length === 0) return null;
diff --git a/apps/web/components/Home/ScrollButtons.tsx b/apps/web/components/Home/ScrollButtons.tsx
index a64d5967..afc5f464 100644
--- a/apps/web/components/Home/ScrollButtons.tsx
+++ b/apps/web/components/Home/ScrollButtons.tsx
@@ -8,6 +8,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Image from 'next/image';
 import { Popover, PopoverContent, PopoverTrigger } from '@music/ui/components/popover';
 import { useLayoutConfig } from '../Providers/LayoutConfigContext';
+import { useSession } from '../Providers/AuthProvider';
 
 type ScrollButtonsProps = {
   id?: string;
@@ -36,9 +37,10 @@ export default function ScrollButtons({ id, children, heading, showUser, topText
     }
   }, []);
 
+  const { session } = useSession()
+
   useEffect(() => {
     const fetchUserData = async () => {
-      const session = getSession();
       const profilePictureBlob = await getProfilePicture(Number(session?.sub));
       const profilePictureUrl = URL.createObjectURL(profilePictureBlob);
       setProfilePicture(profilePictureUrl);
@@ -59,7 +61,7 @@ export default function ScrollButtons({ id, children, heading, showUser, topText
         currentScrollRef.removeEventListener('scroll', checkScrollPosition);
       }
     };
-  }, [checkScrollPosition, showUser]);
+  }, [checkScrollPosition, showUser, session?.username, session?.sub]);
 
   const scrollLeft = useCallback(() => {
     if (scrollRef.current) {
diff --git a/apps/web/components/Home/SimilarTo.tsx b/apps/web/components/Home/SimilarTo.tsx
index 1dc03ea0..0a1d4bd7 100644
--- a/apps/web/components/Home/SimilarTo.tsx
+++ b/apps/web/components/Home/SimilarTo.tsx
@@ -8,6 +8,7 @@ import PageGradient from "../Layout/PageGradient";
 import AlbumCard from "../Music/Card/Album/AlbumCard";
 import ScrollButtons from "./ScrollButtons";
 import { Skeleton } from "@music/ui/components/skeleton";
+import { useSession } from "../Providers/AuthProvider";
 
 function capitalizeWords(str: string): string {
   return str.replace(/\b\w/g, char => char.toUpperCase());
@@ -17,11 +18,11 @@ export default function SimilarTo() {
   const [similarAlbums, setSimilarAlbums] = useState<AlbumCardProps[]>([]);
   const [genre, setGenre] = useState<string | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
+  const { session } = useSession()
 
   useEffect(() => {
     const fetchSimilarAlbums = async () => {
       try {
-        const session = getSession();
         if (!session || !session.sub) {
           throw new Error("Invalid session");
         }
@@ -38,7 +39,7 @@ export default function SimilarTo() {
     };
 
     fetchSimilarAlbums();
-  }, []);
+  }, [session]);
 
   const albumCoverSrc = similarAlbums[0]?.album_cover?.length === 0
     ? "/snf.png"
diff --git a/apps/web/components/Layout/LibraryButtons.tsx b/apps/web/components/Layout/LibraryButtons.tsx
index 75553e71..2469c40b 100644
--- a/apps/web/components/Layout/LibraryButtons.tsx
+++ b/apps/web/components/Layout/LibraryButtons.tsx
@@ -10,6 +10,7 @@ import ArtistCard from "../Music/Artist/ArtistCard";
 import AlbumCard from "../Music/Card/Album/AlbumCard";
 import SongCard from "../Music/Card/SongCard";
 import { useGradientHover } from "../Providers/GradientHoverProvider";
+import { useSession } from "../Providers/AuthProvider";
 
 function capitalizeWords(str: string): string {
   return str.replace(/\b\w/g, char => char.toUpperCase());
@@ -31,6 +32,8 @@ export default function LibraryButtons() {
   const { setGradient } = useGradientHover();
   setGradient("#000000");
 
+  const { session } = useSession()
+
   useEffect(() => {
     const fetchListenHistory = async () => {
       const cacheKey = "listenAgain";
@@ -41,7 +44,6 @@ export default function LibraryButtons() {
         return;
       }
 
-      const session = getSession();
       if (session && session.sub) {
         const userId = Number(session.sub);
         if (!isNaN(userId) && userId > 0) {
@@ -57,7 +59,7 @@ export default function LibraryButtons() {
     };
 
     fetchListenHistory();
-  }, []);
+  }, [session]);
 
   useEffect(() => {
     const albumsMap = listenHistorySongs.reduce((acc: { [key: string]: LibrarySong[] }, song: LibrarySong) => {
diff --git a/apps/web/components/Layout/Playlists.tsx b/apps/web/components/Layout/Playlists.tsx
index 9d22dacb..419f032c 100644
--- a/apps/web/components/Layout/Playlists.tsx
+++ b/apps/web/components/Layout/Playlists.tsx
@@ -9,6 +9,7 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import CreatePlaylistDialog from "../Music/Playlist/CreatePlaylistDialog";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@music/ui/components/accordion"
+import { useSession } from "../Providers/AuthProvider";
 
 interface Playlist extends OriginalPlaylist {
   users: string[];
@@ -16,10 +17,10 @@ interface Playlist extends OriginalPlaylist {
 
 export default function Playlists() {
   const [playlists, setPlaylists] = useState<Playlist[] | null>(null);
+  const { session } = useSession()
 
   useEffect(() => {
     async function fetchData() {
-      const session = getSession();
       const playlistsData = await getPlaylists((Number(session?.sub)) ?? 0);
 
       const transformedPlaylists: Playlist[] = await Promise.all(
@@ -43,7 +44,7 @@ export default function Playlists() {
       setPlaylists(transformedPlaylists);
     }
     fetchData();
-  }, []);
+  }, [session?.sub]);
 
   return (
     <div>
diff --git a/apps/web/components/Layout/Settings/Sidebar.tsx b/apps/web/components/Layout/Settings/Sidebar.tsx
index 8311bc3b..ebc2423b 100644
--- a/apps/web/components/Layout/Settings/Sidebar.tsx
+++ b/apps/web/components/Layout/Settings/Sidebar.tsx
@@ -1,12 +1,13 @@
 "use client"
 
+import { useSession } from "@/components/Providers/AuthProvider"
 import getSession from "@/lib/Authentication/JWT/getSession"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { useEffect, useState } from "react"
 
 export default function SettingsSidebar() {
-  const session = getSession()
+  const { session } = useSession()
   const isAdmin = session?.role === "admin"
 
   const pathname = usePathname()
diff --git a/apps/web/components/Layout/SplashScreen.tsx b/apps/web/components/Layout/SplashScreen.tsx
index 7274bdfb..9af9f9ed 100644
--- a/apps/web/components/Layout/SplashScreen.tsx
+++ b/apps/web/components/Layout/SplashScreen.tsx
@@ -6,6 +6,7 @@ import { Loader2Icon } from 'lucide-react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
+import { useSession } from '../Providers/AuthProvider';
 
 interface SplashScreenProps {
   children: React.ReactNode;
@@ -37,6 +38,7 @@ const getItemWithExpiry = (key: string) => {
 const SplashScreen: React.FC<SplashScreenProps> = ({ children }) => {
   const [loading, setLoading] = useState(true);
   const { push } = useRouter();
+  const { session } = useSession()
 
   useEffect(() => {
     const checkServerUrl = async () => {
@@ -46,7 +48,6 @@ const SplashScreen: React.FC<SplashScreenProps> = ({ children }) => {
       );
   
       if (response.ok) {
-        const session = getSession();
         if (session) {
           const currentPath = window.location.pathname;
           const queryParams = window.location.search;
@@ -71,7 +72,7 @@ const SplashScreen: React.FC<SplashScreenProps> = ({ children }) => {
     };
   
     checkServerUrl();
-  }, [push]);
+  }, [push, session]);
 
   useEffect(() => {
     const storedLoading = getItemWithExpiry("loading");
diff --git a/apps/web/components/Music/Album/AlbumTable.tsx b/apps/web/components/Music/Album/AlbumTable.tsx
index d3dce45e..1494f653 100644
--- a/apps/web/components/Music/Album/AlbumTable.tsx
+++ b/apps/web/components/Music/Album/AlbumTable.tsx
@@ -9,6 +9,7 @@ import PlaylistCard from '../Playlist/PlaylistCard';
 import SongContextMenu from "../SongContextMenu";
 import { getArtistInfo } from "@music/sdk";
 import Link from "next/link";
+import { useSession } from "@/components/Providers/AuthProvider";
 
 type PlaylistTableProps = {
   songs: LibrarySong[]
@@ -34,7 +35,7 @@ export default function AlbumTable({ songs, album, artist }: PlaylistTableProps)
   const [orderedSongs, setOrderedSongs] = useState<LibrarySong[]>([]);
   const [contributingArtists, setContributingArtists] = useState<{ [key: string]: Artist[] }>({});
 
-  const session = getSession();
+  const { session } = useSession()
   const bitrate = session?.bitrate ?? 0;
 
   useEffect(() => {
diff --git a/apps/web/components/Music/Card/HorizontalCard.tsx b/apps/web/components/Music/Card/HorizontalCard.tsx
index 3807409b..cfe2b565 100644
--- a/apps/web/components/Music/Card/HorizontalCard.tsx
+++ b/apps/web/components/Music/Card/HorizontalCard.tsx
@@ -13,6 +13,7 @@ import { FastAverageColor } from "fast-average-color";
 import Image from "next/image";
 import Link from "next/link";
 import { usePlayer } from "../Player/usePlayer";
+import { useSession } from "@/components/Providers/AuthProvider";
 
 type HorizontalCardProps = {
   item: CombinedItem
@@ -21,7 +22,7 @@ type HorizontalCardProps = {
 export default function HorizontalCard({ item }: HorizontalCardProps) {
   const { item_type, name, artist_object, album_object, song_object } = item;
   const imagePath = album_object?.cover_url || artist_object?.icon_url || "";
-  const session = getSession();
+  const { session } = useSession()
 
   const {
     setImageSrc,
diff --git a/apps/web/components/Music/Card/SongCard.tsx b/apps/web/components/Music/Card/SongCard.tsx
index 99671030..0ab013fb 100644
--- a/apps/web/components/Music/Card/SongCard.tsx
+++ b/apps/web/components/Music/Card/SongCard.tsx
@@ -9,6 +9,7 @@ import Link from "next/link";
 import { usePlayer } from "../Player/usePlayer";
 import SongContextMenu from "../SongContextMenu";
 import { getSongInfo } from "@music/sdk";
+import { useSession } from "@/components/Providers/AuthProvider";
 
 type SongCardProps = {
   song_name: string;
@@ -40,7 +41,7 @@ export default function SongCard({
     setPlayedFromAlbum,
   } = usePlayer();
 
-  const session = getSession();
+  const { session } = useSession()
 
   const artist = { id: artist_id, name: artist_name };
   const album = { id: album_id, name: album_name, cover_url: album_cover };
diff --git a/apps/web/components/Music/Player.tsx b/apps/web/components/Music/Player.tsx
index 6acd6a01..23ea0de6 100644
--- a/apps/web/components/Music/Player.tsx
+++ b/apps/web/components/Music/Player.tsx
@@ -28,6 +28,7 @@ import VideoPlayerDialog from "./Player/VideoPlayerDialog";
 import { PanelContext } from "./Queue/QueuePanelContext";
 import { Input } from "@music/ui/components/input";
 import { Label } from "@radix-ui/react-label";
+import { useSession } from "../Providers/AuthProvider";
 
 export default function Player() {
   const [liked, setLiked] = useState(false);
@@ -74,6 +75,7 @@ export default function Player() {
   const reverbEffect = useRef<Tone.Reverb | null>(null);
   const pitchShift = useRef<Tone.PitchShift | null>(null);
   const [isLoaded, setIsLoaded] = useState(false);
+  const { session } = useSession()
 
   useEffect(() => {
     reverbEffect.current = new Tone.Reverb().toDestination();
@@ -81,7 +83,6 @@ export default function Player() {
   }, []);
 
   useEffect(() => {
-    const session = getSession();
     let songURL = `${getBaseURL()}/api/stream/${encodeURIComponent(song.path)}?bitrate=${session && session.bitrate || 0}`;
     if (reverb) {
       songURL += "&slowed_reverb=true";
@@ -100,7 +101,7 @@ export default function Player() {
     //     console.error('Error loading player:', error);
     //   }
     // }).toDestination();
-  }, [reverb, song, setAudioSource]);
+  }, [reverb, song, setAudioSource, session]);
 
   const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
diff --git a/apps/web/components/Music/Player/AddToPlaylistDropdown.tsx b/apps/web/components/Music/Player/AddToPlaylistDropdown.tsx
index 0df3d69b..0e6438ac 100644
--- a/apps/web/components/Music/Player/AddToPlaylistDropdown.tsx
+++ b/apps/web/components/Music/Player/AddToPlaylistDropdown.tsx
@@ -10,6 +10,7 @@ import { ScrollArea } from "@music/ui/components/scroll-area"
 import { CircleDashed } from "lucide-react"
 import { useEffect, useState } from "react"
 import { usePlayer } from "./usePlayer"
+import { useSession } from "@/components/Providers/AuthProvider"
 
 type AddToPlaylistDropdownProps = {
   children: React.ReactNode;
@@ -28,13 +29,13 @@ type PlaylistWithSongs = BasePlaylist & {
 
 export default function AddToPlaylistDropdown({ children }: AddToPlaylistDropdownProps) {
   const { song, isPlaying } = usePlayer();
+  const { session: sessionData } = useSession();
   
   const [playlists, setPlaylists] = useState<PlaylistWithSongs[]>([]);
   const [playlistAddedNow, setPlaylistAddedNow] = useState("");
 
   useEffect(() => {
     const getPlaylistsRequest = async () => {
-      const sessionData = getSession();
       if (sessionData) {
         const playlistsResponse = await getPlaylists(Number(sessionData.sub));
         const detailedPlaylistsPromises = playlistsResponse.map(playlist => getPlaylist(playlist.id));
@@ -63,7 +64,7 @@ export default function AddToPlaylistDropdown({ children }: AddToPlaylistDropdow
     if (isPlaying) {
       getPlaylistsRequest();
     }
-  }, [isPlaying]);
+  }, [isPlaying, sessionData]);
 
   return (
     <DropdownMenu>
diff --git a/apps/web/components/Music/Player/usePlayer.tsx b/apps/web/components/Music/Player/usePlayer.tsx
index 67ccaf52..d0061a46 100644
--- a/apps/web/components/Music/Player/usePlayer.tsx
+++ b/apps/web/components/Music/Player/usePlayer.tsx
@@ -19,6 +19,7 @@ import {
   setNowPlaying,
 } from "@music/sdk";
 import { Album, Artist, Genre, LibrarySong, Song } from "@music/sdk/types";
+import { useSession } from "@/components/Providers/AuthProvider";
 
 const isBrowser = typeof window !== "undefined";
 const audioElement = isBrowser ? new Audio() : null;
@@ -154,7 +155,7 @@ export function PlayerProvider({ children }: PlayerProviderProps) {
 
   let bitrate = 0;
 
-  const session = getSession();
+  const { session } = useSession()
 
   useEffect(() => {
     if (song.id && lastAddedSongIdRef.current != String(song.id)) {
diff --git a/apps/web/components/Music/Playlist/CreatePlaylistDialog.tsx b/apps/web/components/Music/Playlist/CreatePlaylistDialog.tsx
index a2973261..cf73ec23 100644
--- a/apps/web/components/Music/Playlist/CreatePlaylistDialog.tsx
+++ b/apps/web/components/Music/Playlist/CreatePlaylistDialog.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { useSession } from "@/components/Providers/AuthProvider"
 import getSession from "@/lib/Authentication/JWT/getSession"
 import { createPlaylist } from "@music/sdk"
 import { Button } from "@music/ui/components/button"
@@ -25,8 +26,8 @@ export default function CreatePlaylistDialog({ children }: CreatePlaylistDialog)
   const [playlistName, setPlaylistName] = useState("")
   const [openDialog, setOpenDialog] = useState(false)
   const [isPending, startTransition] = useTransition()
+  const { session } = useSession()
 
-  const session = getSession()
   const username = session?.username
 
   const open = () => setOpenDialog(true)
diff --git a/apps/web/components/Music/Playlist/PlaylistTable.tsx b/apps/web/components/Music/Playlist/PlaylistTable.tsx
index 499d87ed..019ebf1a 100644
--- a/apps/web/components/Music/Playlist/PlaylistTable.tsx
+++ b/apps/web/components/Music/Playlist/PlaylistTable.tsx
@@ -16,6 +16,7 @@ import {
 } from "@music/ui/components/table";
 import Link from "next/link";
 import SongContextMenu from "../SongContextMenu";
+import { useSession } from "@/components/Providers/AuthProvider";
 
 type PlaylistTableProps = {
   songsWithMetadata: (LibrarySong & { date_added: string })[];
@@ -24,7 +25,7 @@ type PlaylistTableProps = {
 export default function PlaylistTable({ songsWithMetadata }: PlaylistTableProps) {
   const { setImageSrc, setSong, setArtist, setAudioSource, setAlbum } = usePlayer()
 
-  const session = getSession()
+  const { session } = useSession()
 
   const handlePlay = async (coverURL: string, song: LibrarySong, songURL: string, artist: Artist, album: Album) => {
     setImageSrc(`${getBaseURL()}/image/${encodeURIComponent(coverURL)}`)
diff --git a/apps/web/components/Music/SongContextMenu.tsx b/apps/web/components/Music/SongContextMenu.tsx
index fac71f14..25f8dad7 100644
--- a/apps/web/components/Music/SongContextMenu.tsx
+++ b/apps/web/components/Music/SongContextMenu.tsx
@@ -31,6 +31,7 @@ import { useEffect, useState, useTransition } from "react";
 import Bars3Left from "../Icons/Bars3Left";
 import { usePlayer } from "./Player/usePlayer";
 import { LibrarySong } from "@music/sdk/types";
+import { useSession } from "../Providers/AuthProvider";
 
 type SongContextMenuProps = {
   children: React.ReactNode;
@@ -53,15 +54,15 @@ export default function SongContextMenu({
 }: SongContextMenuProps) {
   const [playlists, setPlaylists] = useState<PlaylistsResponse[] | null>(null);
   const [songInfo, setSongInfo] = useState<LibrarySong | null>(null);
+  const { session } = useSession()
 
   useEffect(() => {
     const getPlaylistsRequest = async () => {
-      const session = getSession();
       let playlists = await getPlaylists(Number(session?.sub) ?? 0);
       setPlaylists(playlists);
     };
     getPlaylistsRequest();
-  }, []);
+  }, [session?.sub]);
 
   const [isPending, startTransition] = useTransition();
 
diff --git a/apps/web/components/Providers/AuthProvider.tsx b/apps/web/components/Providers/AuthProvider.tsx
new file mode 100644
index 00000000..f56d707a
--- /dev/null
+++ b/apps/web/components/Providers/AuthProvider.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import { ReactNode, createContext, useState, useContext, useEffect } from 'react';
+import getSession, { type ExtendedJWTPayload } from '@/lib/Authentication/JWT/getSession';
+
+interface AuthContextType {
+  session: ExtendedJWTPayload | null;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export default function AuthProvider({ children }: { children: ReactNode }) {
+  const [session, setSession] = useState<ExtendedJWTPayload | null>(null);
+
+  useEffect(() => {
+    const session = getSession();
+    setSession(session);
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ session }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useSession() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error("useSession must be used within an AuthProvider");
+  }
+  return context;
+}
\ No newline at end of file
diff --git a/apps/web/components/Providers/SideBarProvider.tsx b/apps/web/components/Providers/SideBarProvider.tsx
index 715a9be5..4ec00b47 100644
--- a/apps/web/components/Providers/SideBarProvider.tsx
+++ b/apps/web/components/Providers/SideBarProvider.tsx
@@ -35,4 +35,4 @@ export const useSidebar = () => {
     throw new Error('useSidebar must be used within a SidebarProvider');
   }
   return context;
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/apps/web/components/Search/SearchBar.tsx b/apps/web/components/Search/SearchBar.tsx
index 690ff07b..0c97fcd4 100644
--- a/apps/web/components/Search/SearchBar.tsx
+++ b/apps/web/components/Search/SearchBar.tsx
@@ -10,6 +10,7 @@ import { useRouter } from "next/navigation";
 import { FormEvent, useContext, useEffect, useState } from "react";
 import { LyricsContext } from "../Lyrics/LyricsOverlayContext";
 import { ScrollContext } from "../Providers/ScrollProvider";
+import { useSession } from "../Providers/AuthProvider";
 
 type SearchBarProps = {
   isSearchActive: boolean;
@@ -25,11 +26,11 @@ export default function SearchBar({
   const [isSearchBoxClicked, setIsSearchBoxClicked] = useState(false);
   const { onTopOfPage } = useContext(ScrollContext);
   const { areLyricsVisible } = useContext(LyricsContext)
+  const { session } = useSession()
 
   const router = useRouter();
   
   const handleSubmit = (event: FormEvent) => {
-    const session = getSession()
     event.preventDefault();
     session && addSearchHistory({ user_id: Number(session.sub), search: query })
     router.push(`/search?q=${query}`);
@@ -37,7 +38,6 @@ export default function SearchBar({
   };
   
   useEffect(() => {
-    const session = getSession()
     async function getLastSearchedQueriesFn() {
         if (session) {
             const queries = await getLastSearchedQueries({ user_id: Number(session.sub) });
@@ -49,7 +49,7 @@ export default function SearchBar({
     }
 
       getLastSearchedQueriesFn();
-  }, []);
+  }, [session]);
 
   return (
     <div className="flex flex-col relative">
diff --git a/apps/web/components/User/ChangeBitrate.tsx b/apps/web/components/User/ChangeBitrate.tsx
index 76a4667c..5c012f9d 100644
--- a/apps/web/components/User/ChangeBitrate.tsx
+++ b/apps/web/components/User/ChangeBitrate.tsx
@@ -24,6 +24,7 @@ import {
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { useState } from "react";
+import { useSession } from "../Providers/AuthProvider";
 
 const FormSchema = z.object({
   bitrate: z.string({
@@ -33,6 +34,7 @@ const FormSchema = z.object({
 });
 
 export default function ChangeBitrate() {
+  const { session } = useSession()
   const [message, setMessage] = useState<string | null>(null);
 
   const bitrateMapping: { [key: string]: number } = {
@@ -68,7 +70,6 @@ export default function ChangeBitrate() {
       data.bitrate === "custom" ? Number(data.customBitrate) : bitrateMapping[data.bitrate];
 
     if (newBitrate !== undefined) {
-      const session = getSession();
       setBitrate(Number(session?.sub), newBitrate);
       setMessage("Bitrate changed successfully!");
     } else {
diff --git a/apps/web/components/User/ChangePassword.tsx b/apps/web/components/User/ChangePassword.tsx
index d144e61f..479a4f16 100644
--- a/apps/web/components/User/ChangePassword.tsx
+++ b/apps/web/components/User/ChangePassword.tsx
@@ -9,6 +9,7 @@ import { FormItem, FormLabel, FormControl, FormMessage } from "@music/ui/compone
 import { Input } from "@music/ui/components/input";
 import { Form, useForm, FormProvider } from "react-hook-form";
 import { z } from "zod";
+import { useSession } from "../Providers/AuthProvider";
 
 const changePasswordSchema = z.object({
   password: z
@@ -21,7 +22,7 @@ const changePasswordSchema = z.object({
 
 export function ChangePassword() {
   const [isClient, setIsClient] = useState(false);
-  const session = getSession();
+  const { session } = useSession()
 
   useEffect(() => {
     setIsClient(true);
diff --git a/apps/web/components/User/NavbarProfilePicture.tsx b/apps/web/components/User/NavbarProfilePicture.tsx
index b6101f3f..106c800b 100644
--- a/apps/web/components/User/NavbarProfilePicture.tsx
+++ b/apps/web/components/User/NavbarProfilePicture.tsx
@@ -33,6 +33,7 @@ import { Inter as FontSans } from "next/font/google"
 import { useRouter } from "next/navigation"
 import { useEffect, useState } from "react"
 import { cn } from "@music/ui/lib/utils"
+import { useSession } from "../Providers/AuthProvider"
 
 const fontSans = FontSans({
   subsets: ["latin"],
@@ -42,10 +43,10 @@ const fontSans = FontSans({
 export default function NavbarProfilePicture() {
   const [username, setUsername] = useState("")
   const [profilePicture, setProfilePicture] = useState<string | null>(null)
+  const { session } = useSession()
 
   useEffect(() => {
     const fetchSessionAndProfilePicture = async () => {
-      const session = getSession()
       if (session) {
         setUsername(session.username)
         const profilePic = await getProfilePicture(Number(session.sub))
@@ -57,7 +58,7 @@ export default function NavbarProfilePicture() {
       }
     }
     fetchSessionAndProfilePicture()
-  }, [])
+  }, [session])
 
   const { push } = useRouter()
   function signOut() {
diff --git a/apps/web/components/User/Username.tsx b/apps/web/components/User/Username.tsx
index f97b5a7c..9cc8163c 100644
--- a/apps/web/components/User/Username.tsx
+++ b/apps/web/components/User/Username.tsx
@@ -16,9 +16,10 @@ import {
   FormLabel,
   FormMessage,
 } from "@music/ui/components/form"
+import { useSession } from "../Providers/AuthProvider"
 
 export default function Username() {
-  const session = getSession()
+  const { session } = useSession()
   const username = session?.username
 
   const FormSchema = z.object({