diff --git a/.env.local b/.env.local
index efc3e34..149077b 100644
--- a/.env.local
+++ b/.env.local
@@ -1 +1 @@
-NEXT_PUBLIC_COMMIT_SHA=e43dbbf
+NEXT_PUBLIC_COMMIT_SHA=e88d8b2
diff --git a/.idx/dev.nix b/.idx/dev.nix
new file mode 100644
index 0000000..86601d0
--- /dev/null
+++ b/.idx/dev.nix
@@ -0,0 +1,39 @@
+{ pkgs, ... }: {
+
+  # Which nixpkgs channel to use.
+  channel = "stable-23.11"; # or "unstable"
+
+  # Use https://search.nixos.org/packages to find packages
+  packages = [
+    pkgs.corepack
+  ];
+
+  # Sets environment variables in the workspace
+#   env = {
+    # SOME_ENV_VAR = "hello";
+#   };
+
+  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
+#   idx.extensions = [
+#     "angular.ng-template"
+#   ];
+
+  # Enable previews and customize configuration
+  idx.previews = {
+    enable = true;
+    previews = {
+      web = {
+        command = [
+          "pnpm"
+          "run"
+          "dev"
+          "--port"
+          "$PORT"
+        ];
+        manager = "web";
+        # Optionally, specify a directory that contains your web app
+        # cwd = "app/client";
+      };
+    };
+  };
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..03adc8d
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+    "IDX.aI.enableInlineCompletion": true,
+    "IDX.aI.enableCodebaseIndexing": true
+}
\ No newline at end of file
diff --git a/app/components/AudioPlayer.tsx b/app/components/AudioPlayer.tsx
index 0acd244..46eb797 100644
--- a/app/components/AudioPlayer.tsx
+++ b/app/components/AudioPlayer.tsx
@@ -4,13 +4,13 @@ import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
 import { FullScreenPlayer } from '@/app/components/FullScreenPlayer';
-import { FaPlay, FaPause, FaVolumeHigh, FaForward, FaBackward, FaCompress, FaVolumeXmark, FaExpand } from "react-icons/fa6";
+import { FaPlay, FaPause, FaVolumeHigh, FaForward, FaBackward, FaCompress, FaVolumeXmark, FaExpand, FaShuffle } from "react-icons/fa6";
 import { Progress } from '@/components/ui/progress';
 import { useToast } from '@/hooks/use-toast';
 import { useLastFmScrobbler } from '@/hooks/use-lastfm-scrobbler';
 
 export const AudioPlayer: React.FC = () => {
-  const { currentTrack, playPreviousTrack, addToQueue, playNextTrack, clearQueue, queue } = useAudioPlayer();
+  const { currentTrack, playPreviousTrack, addToQueue, playNextTrack, clearQueue, queue, toggleShuffle, shuffle } = useAudioPlayer();
   const router = useRouter();
   const audioRef = useRef<HTMLAudioElement>(null);
   const preloadAudioRef = useRef<HTMLAudioElement>(null);
@@ -377,8 +377,13 @@ export const AudioPlayer: React.FC = () => {
               <p className="font-semibold truncate text-sm">{currentTrack.name}</p>
               <p className="text-xs text-muted-foreground truncate">{currentTrack.artist}</p>
             </div>
+            {/* faviorte icon or smthing here */}
           </div>
           {/* Control buttons */}
+          <button
+                onClick={toggleShuffle} className={`p-1.5 hover:bg-gray-700/50 rounded-full transition-colors ${   shuffle ? 'text-primary bg-primary/20' : '' }`} title={shuffle ? 'Shuffle On - Queue is shuffled' : 'Shuffle Off - Click to shuffle queue'}>
+                <FaShuffle className="w-3 h-3" />
+              </button>
         <div className="flex items-center justify-center space-x-2">
           <button className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playPreviousTrack}>
             <FaBackward className="w-3 h-3" />
diff --git a/app/page.tsx b/app/page.tsx
index 2d58f93..fc39e85 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -39,7 +39,18 @@ export default function MusicPage() {
 
   return (
     <div className="h-full px-4 py-6 lg:px-8 pb-24">
-      <h1 className="text-3xl font-bold mb-4">{greeting}{userName ? `, ${userName}` : ''}!</h1>
+      <div className="relative rounded-lg p-8">
+          <div className="relative rounded-sm p-10">
+            <div
+              className="absolute inset-0 bg-center bg-cover bg-no-repeat blur-xl bg-gradient-to-r from-primary to-secondary"
+            />
+            <div className="relative z-10 flex items-center space-x-6">
+              <div className="flex-1">
+                <h1 className="text-3xl font-bold mb-4">{greeting}{userName ? `, ${userName}` : ''}!</h1>
+              </div>
+          </div>
+        </div>
+       </div>
       <>
       <Tabs defaultValue="music" className="h-full space-y-6">
         <TabsContent value="music" className="border-none p-0 outline-none">