diff --git a/next.config.ts b/next.config.ts
index 20c65a4..5ba45f2 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -2,6 +2,9 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
+  experimental: {
+    optimizePackageImports: ["lucide-react", "@tanstack/react-query"],
+  },
   turbopack: {
     rules: {
       "*.css": {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f20fbce..4ce9e9d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,8 +1,16 @@
 "use client";
 
 import { Play } from "lucide-react";
+import dynamic from "next/dynamic";
 import { PlayerBar } from "@/components/layout/player-bar";
-import { QueuePanel } from "@/components/layout/queue-panel";
+
+const QueuePanel = dynamic(
+  () => import("@/components/layout/queue-panel").then((m) => m.QueuePanel),
+  {
+    ssr: false,
+  },
+);
+
 import { Sidebar } from "@/components/layout/sidebar";
 import { useAlbums, useSongs } from "@/lib/queries";
 import { usePlayer } from "@/stores/player";