diff --git a/apps/web/src/api/dropbox.ts b/apps/web/src/api/dropbox.ts
index b13788ec..a1fd9821 100644
--- a/apps/web/src/api/dropbox.ts
+++ b/apps/web/src/api/dropbox.ts
@@ -1,34 +1,41 @@
 import axios from "axios";
+import { client } from ".";
 import { API_URL } from "../consts";
 
 export const getFiles = async (id?: string) => {
-  const response = await axios.get<{
-    cursor: string;
-    entries: {
-      ".tag": string;
+  const response = await client.get<{
+    directories: {
+      id: string;
+      name: string;
+      fileId: string;
+      path: string;
+      parentId?: string;
+    }[];
+    files: {
       id: string;
       name: string;
-      path_display: string;
+      fileId: string;
+      directoryId: string;
+      trackId: string;
     }[];
-    has_more: boolean;
-  }>(`${API_URL}/dropbox/files`, {
+  }>("/xrpc/app.rocksky.dropbox.getFiles", {
     headers: {
       Authorization: `Bearer ${localStorage.getItem("token")}`,
     },
     params: {
-      path: id,
+      at: id,
     },
   });
   return response.data;
 };
 
 export const getFile = async (id: string) => {
-  const response = await axios.get<{
+  const response = await client.get<{
     ".tag": string;
     id: string;
     name: string;
     path_display: string;
-  }>(`${API_URL}/dropbox/file`, {
+  }>("/xrpc/app.rocksky.dropbox.getFiles", {
     headers: {
       Authorization: `Bearer ${localStorage.getItem("token")}`,
     },
diff --git a/apps/web/src/api/googledrive.ts b/apps/web/src/api/googledrive.ts
index c3482cbb..6adb78c9 100644
--- a/apps/web/src/api/googledrive.ts
+++ b/apps/web/src/api/googledrive.ts
@@ -1,37 +1,45 @@
-import axios from "axios";
-import { API_URL } from "../consts";
+import { client } from ".";
 
 export const getFiles = async (parent_id?: string) => {
-  const response = await axios.get<{
+  const response = await client.get<{
+    directories: {
+      id: string;
+      name: string;
+      fileId: string;
+      path: string;
+      parentId?: string;
+    }[];
     files: {
       id: string;
-      mimeType: string;
       name: string;
-      parents: string[];
+      fileId: string;
+      directoryId: string;
+      trackId: string;
     }[];
-    authUrl?: string;
-    error?: string;
-  }>(`${API_URL}/googledrive/files`, {
+  }>("/xrpc/app.rocksky.googledrive.getFiles", {
     headers: {
       Authorization: `Bearer ${localStorage.getItem("token")}`,
     },
     params: {
-      parent_id,
+      at: parent_id,
     },
   });
   return response.data;
 };
 
 export const getFile = async (id: string) => {
-  const response = await axios.get<{
+  const response = await client.get<{
     id: string;
     mimeType: string;
     name: string;
     parents: string[];
-  }>(`${API_URL}/googledrive/files/${id}`, {
+  }>("/xrpc/app.rocksky.googledrive.getFile", {
     headers: {
       Authorization: `Bearer ${localStorage.getItem("token")}`,
     },
+    params: {
+      id,
+    },
   });
   return response.data;
 };
diff --git a/apps/web/src/atoms/dropbox.ts b/apps/web/src/atoms/dropbox.ts
index acfaa162..e8a06ccc 100644
--- a/apps/web/src/atoms/dropbox.ts
+++ b/apps/web/src/atoms/dropbox.ts
@@ -10,12 +10,6 @@ export const dropboxAtom = atom<{
       current_dir?: string;
       parent_dir?: string;
       parent_id?: string;
-      files: {
-        ".tag": string;
-        id: string;
-        name: string;
-        path_display: string;
-      }[];
     }
   >;
 } | null>(null);
diff --git a/apps/web/src/atoms/googledrive.ts b/apps/web/src/atoms/googledrive.ts
index 9b7df559..f7e49900 100644
--- a/apps/web/src/atoms/googledrive.ts
+++ b/apps/web/src/atoms/googledrive.ts
@@ -10,12 +10,6 @@ const googleDriveAtom = atom<{
       parent_id?: string;
       parent_dir?: string;
       current_dir?: string;
-      files: {
-        id: string;
-        name: string;
-        mime_type: string;
-        parents: string[];
-      }[];
     }
   >;
 } | null>(null);
diff --git a/apps/web/src/hooks/useDropbox.tsx b/apps/web/src/hooks/useDropbox.tsx
index 60f50521..6efc10c0 100644
--- a/apps/web/src/hooks/useDropbox.tsx
+++ b/apps/web/src/hooks/useDropbox.tsx
@@ -21,44 +21,6 @@ export const useTemporaryLinkQuery = (id: string) =>
   });
 
 function useDropbox() {
-  const getFiles = async (id?: string) => {
-    const response = await client.get<{
-      cursor: string;
-      entries: {
-        ".tag": string;
-        id: string;
-        name: string;
-        path_display: string;
-      }[];
-      has_more: boolean;
-    }>(`/dropbox/files`, {
-      headers: {
-        Authorization: `Bearer ${localStorage.getItem("token")}`,
-      },
-      params: {
-        path: id,
-      },
-    });
-    return response.data;
-  };
-
-  const getFile = async (id: string) => {
-    const response = await client.get<{
-      ".tag": string;
-      id: string;
-      name: string;
-      path_display: string;
-    }>(`/dropbox/file`, {
-      headers: {
-        Authorization: `Bearer ${localStorage.getItem("token")}`,
-      },
-      params: {
-        path: id,
-      },
-    });
-    return response.data;
-  };
-
   const getTemporaryLink = async (id: string) => {
     const response = await client.get<{
       link: string;
@@ -74,8 +36,6 @@ function useDropbox() {
   };
 
   return {
-    getFiles,
-    getFile,
     getTemporaryLink,
   };
 }
diff --git a/apps/web/src/hooks/useGoogleDrive.tsx b/apps/web/src/hooks/useGoogleDrive.tsx
index 029cdfa7..d78a080e 100644
--- a/apps/web/src/hooks/useGoogleDrive.tsx
+++ b/apps/web/src/hooks/useGoogleDrive.tsx
@@ -1,7 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import axios from "axios";
 import { getFile, getFiles } from "../api/googledrive";
-import { API_URL } from "../consts";
 
 export const useFilesQuery = (id?: string) =>
   useQuery({
@@ -14,47 +12,3 @@ export const useFileQuery = (id: string) =>
     queryKey: ["googledrive", "file", id],
     queryFn: () => getFile(id),
   });
-
-function useGoogleDrive() {
-  const getFiles = async (parent_id?: string) => {
-    const response = await axios.get<{
-      files: {
-        id: string;
-        mimeType: string;
-        name: string;
-        parents: string[];
-      }[];
-      authUrl?: string;
-      error?: string;
-    }>(`${API_URL}/googledrive/files`, {
-      headers: {
-        Authorization: `Bearer ${localStorage.getItem("token")}`,
-      },
-      params: {
-        parent_id,
-      },
-    });
-    return response.data;
-  };
-
-  const getFile = async (id: string) => {
-    const response = await axios.get<{
-      id: string;
-      mimeType: string;
-      name: string;
-      parents: string[];
-    }>(`${API_URL}/googledrive/files/${id}`, {
-      headers: {
-        Authorization: `Bearer ${localStorage.getItem("token")}`,
-      },
-    });
-    return response.data;
-  };
-
-  return {
-    getFiles,
-    getFile,
-  };
-}
-
-export default useGoogleDrive;
diff --git a/apps/web/src/pages/album/Album.tsx b/apps/web/src/pages/album/Album.tsx
index f0375b1c..b78ed946 100644
--- a/apps/web/src/pages/album/Album.tsx
+++ b/apps/web/src/pages/album/Album.tsx
@@ -182,7 +182,7 @@ const Album = () => {
                 </div>
                 <div className="flex items-center justify-end flex-1 mr-[10px]">
                   <a
-                    href={`https://pdsls.dev/at/${uri}`}
+                    href={`https://pdsls.dev/at/${uri.replace("at://", "")}`}
                     target="_blank"
                     className="text-[var(--color-text)] no-underline bg-[var(--color-default-button)] rounded-[10px] p-[16px] pl-[25px] pr-[25px]"
                   >
diff --git a/apps/web/src/pages/artist/Artist.tsx b/apps/web/src/pages/artist/Artist.tsx
index 6e4f82e8..1ed8e965 100644
--- a/apps/web/src/pages/artist/Artist.tsx
+++ b/apps/web/src/pages/artist/Artist.tsx
@@ -188,7 +188,7 @@ const Artist = () => {
                 </div>
                 <div className="flex items-center justify-end flex-1 mr-[10px]">
                   <a
-                    href={`https://pdsls.dev/at/${uri}`}
+                    href={`https://pdsls.dev/at/${uri.replace("at://", "")}`}
                     target="_blank"
                     className="text-[var(--color-text)] no-underline bg-[var(--color-default-button)] rounded-[10px] p-[16px] pl-[25px] pr-[25px]"
                   >
diff --git a/apps/web/src/pages/dropbox/Dropbox.tsx b/apps/web/src/pages/dropbox/Dropbox.tsx
index 8ad00499..ed73be96 100644
--- a/apps/web/src/pages/dropbox/Dropbox.tsx
+++ b/apps/web/src/pages/dropbox/Dropbox.tsx
@@ -1,23 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Folder2, MusicNoteBeamed } from "@styled-icons/bootstrap";
-import { Link, useRouter } from "@tanstack/react-router";
 import { createColumnHelper } from "@tanstack/react-table";
-import { Breadcrumbs } from "baseui/breadcrumbs";
-import { HeadingMedium } from "baseui/typography";
-import { useAtom } from "jotai";
-import _ from "lodash";
-import { useEffect, useState } from "react";
 import ContentLoader from "react-content-loader";
-import { dropboxAtom } from "../../atoms/dropbox";
 import Table from "../../components/Table";
-import { AUDIO_EXTENSIONS } from "../../consts";
-import useDropbox, {
-  useFileQuery,
-  useFilesQuery,
-  useTemporaryLinkQuery,
-} from "../../hooks/useDropbox";
+import { useFilesQuery } from "../../hooks/useDropbox";
 import Main from "../../layouts/Main";
-import Metadata from "../../lib/metadata";
 import { File } from "../../types/file";
 import { AudioFile, Directory } from "./styles";
 
@@ -28,25 +15,17 @@ export type DropboxProps = {
 };
 
 const Dropbox = (props: DropboxProps) => {
-  const [dropbox, setDropbox] = useAtom(dropboxAtom);
-  useFilesQuery();
-  useFileQuery(props.fileId!);
-  useTemporaryLinkQuery(props.fileId!);
-
-  const { getFiles, getFile, getTemporaryLink } = useDropbox();
-  const [loading, setLoading] = useState(true);
-  const {
-    state: {
-      location: { pathname },
-    },
-  } = useRouter();
+  const { data, isLoading } = useFilesQuery(props.fileId);
 
   const playFile = async (id: string) => {
+    console.log(">> Playing file:", id);
+    /*
     const { link } = await getTemporaryLink(id);
     console.log(">> Playing file:", link);
     const m = new Metadata();
     await m.load(link);
     console.log(">> Metadata:", m.get_metadata());
+    */
   };
 
   const columns = [
@@ -87,6 +66,7 @@ const Dropbox = (props: DropboxProps) => {
     }),
   ];
 
+  /*
   useEffect(() => {
     const fetchFiles = async () => {
       setLoading(true);
@@ -136,18 +116,13 @@ const Dropbox = (props: DropboxProps) => {
     fetchFiles();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.fileId]);
+  */
 
-  const parent_dir =
-    dropbox?.cache[props.fileId || "/Music"]?.parent_dir || dropbox?.parent_dir;
-  const current_dir =
-    dropbox?.cache[props.fileId || "/Music"]?.current_dir ||
-    dropbox?.current_dir;
-  const parent_id =
-    dropbox?.cache[props.fileId || "/Music"]?.parent_id || dropbox?.parent_id;
   return (
     <Main>
-      {((props.fileId && dropbox?.cache[props.fileId]) ||
-        !loading ||
+      {/*
+      ((props.fileId && dropbox?.cache[props.fileId]) ||
+        !isLoading ||
         pathname === "/dropbox") && (
         <div className="pt-[80px] fixed bg-[var(--color-background)] top-[19px] w-[770px]">
           <Breadcrumbs>
@@ -169,10 +144,11 @@ const Dropbox = (props: DropboxProps) => {
             {current_dir === "Music" ? "Dropbox" : current_dir}
           </HeadingMedium>
         </div>
-      )}
+      )
+        */}
 
       <div className="mt-[100px] overflow-x-hidden mb-[140px] ">
-        {loading && !dropbox?.cache[props.fileId || "/Music"] && (
+        {isLoading && (
           <ContentLoader
             width={700}
             height={350}
@@ -193,16 +169,21 @@ const Dropbox = (props: DropboxProps) => {
             <circle cx="20" cy="271" r="15" />
           </ContentLoader>
         )}
-        {(!loading || dropbox?.cache[props.fileId || "/Music"]) && (
+        {!isLoading && (
           <Table
             columns={columns as any}
-            files={
-              dropbox?.cache[props.fileId || "/Music"]?.files.map((entry) => ({
-                id: entry.id,
-                name: entry.name,
-                tag: entry[".tag"],
-              })) || []
-            }
+            files={[
+              ...data!.directories.map((dir) => ({
+                id: dir.fileId,
+                name: dir.name,
+                tag: "folder",
+              })),
+              ...data!.files.map((file) => ({
+                id: file.fileId,
+                name: file.name,
+                tag: "file",
+              })),
+            ]}
           />
         )}
       </div>
diff --git a/apps/web/src/pages/googledrive/GoogleDrive.tsx b/apps/web/src/pages/googledrive/GoogleDrive.tsx
index d6e4a304..b69ee5e4 100644
--- a/apps/web/src/pages/googledrive/GoogleDrive.tsx
+++ b/apps/web/src/pages/googledrive/GoogleDrive.tsx
@@ -1,20 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Folder2, MusicNoteBeamed } from "@styled-icons/bootstrap";
-import { Link, useRouter } from "@tanstack/react-router";
 import { createColumnHelper } from "@tanstack/react-table";
-import { Breadcrumbs } from "baseui/breadcrumbs";
-import { HeadingMedium } from "baseui/typography";
-import { useAtom } from "jotai";
-import _ from "lodash";
-import { useEffect, useState } from "react";
 import ContentLoader from "react-content-loader";
-import googleDriveAtom from "../../atoms/googledrive";
 import Table from "../../components/Table";
-import { AUDIO_EXTENSIONS } from "../../consts";
-import useGoogleDrive, {
-  useFileQuery,
-  useFilesQuery,
-} from "../../hooks/useGoogleDrive";
+import { useFilesQuery } from "../../hooks/useGoogleDrive";
 import Main from "../../layouts/Main";
 import { File } from "../../types/file";
 import { AudioFile, Directory } from "./styles";
@@ -26,17 +15,7 @@ export type GoogleDriveProps = {
 };
 
 const GoogleDrive = (props: GoogleDriveProps) => {
-  const [googleDrive, setGoogleDrive] = useAtom(googleDriveAtom);
-  useFilesQuery();
-  useFileQuery(props.fileId!);
-
-  const { getFiles, getFile } = useGoogleDrive();
-  const [loading, setLoading] = useState(true);
-  const {
-    state: {
-      location: { pathname },
-    },
-  } = useRouter();
+  const { data, isLoading } = useFilesQuery(props.fileId);
 
   const columns = [
     columnHelper.accessor("name", {
@@ -74,6 +53,7 @@ const GoogleDrive = (props: GoogleDriveProps) => {
     }),
   ];
 
+  /*
   useEffect(() => {
     const fetchGoogleDrive = async () => {
       setLoading(true);
@@ -130,20 +110,13 @@ const GoogleDrive = (props: GoogleDriveProps) => {
     fetchGoogleDrive();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.fileId]);
+  */
 
-  const parent_dir =
-    googleDrive?.cache[props.fileId || "/Music"]?.parent_dir ||
-    googleDrive?.parent_dir;
-  const current_dir =
-    googleDrive?.cache[props.fileId || "/Music"]?.current_dir ||
-    googleDrive?.current_dir;
-  const parent_id =
-    googleDrive?.cache[props.fileId || "/Music"]?.parent_id ||
-    googleDrive?.parent_id;
   return (
     <Main>
-      {((props.fileId && googleDrive?.cache[props.fileId]) ||
-        !loading ||
+      {/*
+      ((props.fileId && googleDrive?.cache[props.fileId]) ||
+        !isLoading ||
         pathname === "/googledrive") && (
         <div className="pt-[80px] fixed bg-[var(--color-background)] top-[19px] w-[770px]">
           <Breadcrumbs>
@@ -167,10 +140,10 @@ const GoogleDrive = (props: GoogleDriveProps) => {
             {current_dir === "Music" ? "Google Drive" : current_dir}
           </HeadingMedium>
         </div>
-      )}
+      )*/}
 
       <div className="mt-[100px] overflow-x-hidden mb-[140px]">
-        {loading && !googleDrive?.cache[props.fileId || "/Music"]?.files && (
+        {isLoading && (
           <ContentLoader
             width={700}
             height={350}
@@ -191,18 +164,21 @@ const GoogleDrive = (props: GoogleDriveProps) => {
             <circle cx="20" cy="271" r="15" />
           </ContentLoader>
         )}
-        {(!loading || googleDrive?.cache[props.fileId || "/Music"]?.files) && (
+        {!isLoading && (
           <Table
             columns={columns as any}
-            files={
-              googleDrive?.cache[props.fileId || "/Music"]?.files.map(
-                (entry) => ({
-                  id: entry.id,
-                  name: entry.name,
-                  tag: entry.mime_type.includes("folder") ? "folder" : "file",
-                })
-              ) || []
-            }
+            files={[
+              ...data!.directories.map((dir) => ({
+                id: dir.fileId,
+                name: dir.name,
+                tag: "folder",
+              })),
+              ...data!.files.map((file) => ({
+                id: file.fileId,
+                name: file.name,
+                tag: "file",
+              })),
+            ]}
           />
         )}
       </div>
diff --git a/apps/web/src/pages/playlist/Playlist.tsx b/apps/web/src/pages/playlist/Playlist.tsx
index 2ac210fa..9c2a168b 100644
--- a/apps/web/src/pages/playlist/Playlist.tsx
+++ b/apps/web/src/pages/playlist/Playlist.tsx
@@ -140,7 +140,7 @@ function Playlist() {
                 </div>
                 <div className="flex items-center justify-end flex-1 mr-[10px]">
                   <a
-                    href={`https://pdsls.dev/at/${uri}`}
+                    href={`https://pdsls.dev/at/${uri.replace("at://", "")}`}
                     target="_blank"
                     className="text-[var(--color-text)] no-underline p-[16px] bg-[var(--color-default-button)]  rounded-[10px] pl-[25px] pr-[25px]"
                   >
diff --git a/apps/web/src/pages/song/Song.tsx b/apps/web/src/pages/song/Song.tsx
index a1b5b0bc..ac4f4089 100644
--- a/apps/web/src/pages/song/Song.tsx
+++ b/apps/web/src/pages/song/Song.tsx
@@ -303,7 +303,7 @@ const Song = () => {
                   </div>
                   <div className="flex items-center justify-end flex-1 mr-[10px]">
                     <a
-                      href={`https://pdsls.dev/at/${uri}`}
+                      href={`https://pdsls.dev/at/${uri.replace("at://", "")}`}
                       target="_blank"
                       className="text-[var(--color-text)] no-underline bg-[var(--color-default-button)] rounded-[10px] p-[16px] pl-[25px] pr-[25px]"
                     >