diff --git a/packages/pl-api/lib/client.ts b/packages/pl-api/lib/client.ts
index 97f49b843..0f70aff84 100644
--- a/packages/pl-api/lib/client.ts
+++ b/packages/pl-api/lib/client.ts
@@ -5952,7 +5952,7 @@ class PlApiClient {
       return v.parse(driveFileSchema, response.json);
     },
 
-    createFile: async (file: File, folderId: string) => {
+    createFile: async (file: File, folderId?: string) => {
       await this.#getIceshrimpAccessToken();
 
       const response = await this.request('/api/iceshrimp/drive', {
@@ -5968,7 +5968,7 @@ class PlApiClient {
       await this.#getIceshrimpAccessToken();
 
       const response = await this.request(`/api/iceshrimp/drive/${id}`, {
-        method: 'PUT',
+        method: 'PATCH',
         body: params,
       });
 
@@ -5993,7 +5993,7 @@ class PlApiClient {
         body: { folderId: targetFolderId },
       });
 
-      return v.parse(driveFolderSchema, response.json);
+      return v.parse(driveFileSchema, response.json);
     },
   };
 
diff --git a/packages/pl-api/lib/params/index.ts b/packages/pl-api/lib/params/index.ts
index 33844c6da..8ed232252 100644
--- a/packages/pl-api/lib/params/index.ts
+++ b/packages/pl-api/lib/params/index.ts
@@ -4,6 +4,7 @@ export * from './apps';
 export * from './chats';
 export * from './circles';
 export type { PaginationParams } from './common';
+export * from './drive';
 export * from './events';
 export * from './filtering';
 export * from './grouped-notifications';
diff --git a/packages/pl-fe/src/features/ui/index.tsx b/packages/pl-fe/src/features/ui/index.tsx
index 45d96af9a..7d1329782 100644
--- a/packages/pl-fe/src/features/ui/index.tsx
+++ b/packages/pl-fe/src/features/ui/index.tsx
@@ -151,6 +151,7 @@ import {
   Privacy,
   UserIndex,
   WrenchedTimeline,
+  Drive,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -315,6 +316,8 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = React.memo(({ chil
       {features.scheduledStatuses && <WrappedRoute path='/scheduled_statuses' layout={DefaultLayout} component={ScheduledStatuses} content={children} />}
       <WrappedRoute path='/draft_statuses' layout={DefaultLayout} component={DraftStatuses} content={children} />
 
+      {features.drive && <WrappedRoute path='/drive/:folderId?' layout={DefaultLayout} component={Drive} content={children} exact />}
+
       <WrappedRoute path='/circle' layout={DefaultLayout} component={Circle} content={children} />
 
       <WrappedRoute path='/settings/profile' layout={DefaultLayout} component={EditProfile} content={children} />
diff --git a/packages/pl-fe/src/features/ui/util/async-components.ts b/packages/pl-fe/src/features/ui/util/async-components.ts
index 103db653a..1477abf59 100644
--- a/packages/pl-fe/src/features/ui/util/async-components.ts
+++ b/packages/pl-fe/src/features/ui/util/async-components.ts
@@ -29,6 +29,7 @@ export const Directory = lazy(() => import('pl-fe/pages/account-lists/directory'
 export const DomainBlocks = lazy(() => import('pl-fe/pages/settings/domain-blocks'));
 export const Domains = lazy(() => import('pl-fe/pages/dashboard/domains'));
 export const DraftStatuses = lazy(() => import('pl-fe/pages/status-lists/draft-statuses'));
+export const Drive = lazy(() => import('pl-fe/pages/drive/drive'));
 export const EditEmail = lazy(() => import('pl-fe/pages/settings/edit-email'));
 export const EditFilter = lazy(() => import('pl-fe/pages/settings/edit-filter'));
 export const EditGroup = lazy(() => import('pl-fe/pages/groups/edit-group'));
diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json
index 2d3f67f42..53b233185 100644
--- a/packages/pl-fe/src/locales/en.json
+++ b/packages/pl-fe/src/locales/en.json
@@ -405,6 +405,7 @@
   "column.dislikes": "Dislikes",
   "column.domain_blocks": "Hidden domains",
   "column.draft_statuses": "Drafts",
+  "column.drive": "Drive",
   "column.edit_profile": "Edit profile",
   "column.event_map": "Event location",
   "column.event_participants": "Event participants",
@@ -708,6 +709,44 @@
   "directory.recently_active": "Recently active",
   "draft_status.cancel": "Delete",
   "draft_status.edit": "Edit",
+  "drive.empty": "There are no files or folders in this folder.",
+  "drive.file.delete": "Delete file",
+  "drive.file.delete.confirm": "Delete",
+  "drive.file.delete.error": "Failed to delete file.",
+  "drive.file.delete.success": "File deleted successfully.",
+  "drive.file.delete.text": "Are you sure you want to delete this file? This action cannot be undone.",
+  "drive.file.download": "Download file",
+  "drive.file.dropdown": "File menu",
+  "drive.file.mark_sensitive": "Mark as sensitive",
+  "drive.file.mark_sensitive.error": "Failed to mark file as sensitive.",
+  "drive.file.mark_sensitive.success": "File marked as sensitive.",
+  "drive.file.move": "Move file",
+  "drive.file.rename": "Rename file",
+  "drive.file.rename.confirm": "Rename",
+  "drive.file.rename.error": "Failed to rename file.",
+  "drive.file.rename.placeholder": "New file name",
+  "drive.file.rename.success": "File renamed successfully.",
+  "drive.file.unmark_sensitive": "Unmark as sensitive",
+  "drive.file.unmark_sensitive.error": "Failed to unmark file as sensitive.",
+  "drive.file.unmark_sensitive.success": "File unmarked as sensitive.",
+  "drive.file.update_description": "Edit description",
+  "drive.file.update_description.confirm": "Save",
+  "drive.file.update_description.error": "Failed to update description.",
+  "drive.file.update_description.placeholder": "New description",
+  "drive.file.update_description.success": "Description updated successfully.",
+  "drive.file.view": "View file",
+  "drive.folder.delete": "Delete folder",
+  "drive.folder.delete.confirm": "Delete",
+  "drive.folder.delete.error": "Failed to delete folder.",
+  "drive.folder.delete.success": "Folder deleted successfully.",
+  "drive.folder.delete.text": "Are you sure you want to delete this folder? This action cannot be undone.",
+  "drive.folder.dropdown": "Folder menu",
+  "drive.folder.rename": "Rename folder",
+  "drive.folder.rename.confirm": "Rename",
+  "drive.folder.rename.error": "Failed to rename folder.",
+  "drive.folder.rename.placeholder": "New folder name",
+  "drive.folder.rename.success": "Folder renamed successfully.",
+  "drive.folder.view": "View folder",
   "edit_bookmark_folder_modal.confirm": "Save",
   "edit_bookmark_folder_modal.header_title": "Edit folder",
   "edit_email.header": "Change email",
diff --git a/packages/pl-fe/src/modals/text-field-modal.tsx b/packages/pl-fe/src/modals/text-field-modal.tsx
index bb380f72a..8aa71cb2f 100644
--- a/packages/pl-fe/src/modals/text-field-modal.tsx
+++ b/packages/pl-fe/src/modals/text-field-modal.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import Input from 'pl-fe/components/ui/input';
 import Modal from 'pl-fe/components/ui/modal';
 import Stack from 'pl-fe/components/ui/stack';
 import Textarea from 'pl-fe/components/ui/textarea';
@@ -16,6 +17,7 @@ interface TextFieldModalProps {
   onCancel?: () => void;
   confirmationTheme?: ButtonThemes;
   text?: string;
+  singleLine?: boolean;
 }
 
 const TextFieldModal: React.FC<TextFieldModalProps & BaseModalProps> = ({
@@ -27,6 +29,7 @@ const TextFieldModal: React.FC<TextFieldModalProps & BaseModalProps> = ({
   onCancel,
   confirmationTheme,
   text,
+  singleLine,
 }) => {
   const [value, setValue] = useState(text || '');
 
@@ -50,12 +53,22 @@ const TextFieldModal: React.FC<TextFieldModalProps & BaseModalProps> = ({
       cancelAction={handleCancel}
     >
       <Stack space={4}>
-        <Textarea
-          value={value}
-          onChange={({ target }) => setValue(target.value)}
-          autoComplete='off'
-          placeholder={placeholder}
-        />
+        {singleLine ? (
+          <Input
+            type='text'
+            value={value}
+            onChange={({ target }) => setValue(target.value)}
+            autoComplete='off'
+            placeholder={placeholder}
+          />
+        ) : (
+          <Textarea
+            value={value}
+            onChange={({ target }) => setValue(target.value)}
+            autoComplete='off'
+            placeholder={placeholder}
+          />
+        )}
       </Stack>
     </Modal>
   );
diff --git a/packages/pl-fe/src/pages/drive/drive.tsx b/packages/pl-fe/src/pages/drive/drive.tsx
new file mode 100644
index 000000000..249ec563c
--- /dev/null
+++ b/packages/pl-fe/src/pages/drive/drive.tsx
@@ -0,0 +1,365 @@
+import defaultIcon from '@phosphor-icons/core/regular/paperclip.svg';
+import React, { useMemo } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import DropdownMenu, { Menu } from 'pl-fe/components/dropdown-menu';
+import { EmptyMessage } from 'pl-fe/components/empty-message';
+import Column from 'pl-fe/components/ui/column';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import IconButton from 'pl-fe/components/ui/icon-button';
+import { MIMETYPE_ICONS } from 'pl-fe/components/upload';
+import ColumnLoading from 'pl-fe/features/ui/components/column-loading';
+import { useDeleteDriveFileMutation, useUpdateDriveFileMutation } from 'pl-fe/queries/drive/use-drive-file';
+import { useDeleteDriveFolderMutation, useDriveFolderQuery, useUpdateDriveFolderMutation } from 'pl-fe/queries/drive/use-drive-folder';
+import { useModalsActions } from 'pl-fe/stores/modals';
+import toast from 'pl-fe/toast';
+
+import type { DriveFile, DriveFolder, MediaAttachment } from 'pl-api';
+
+const messages = defineMessages({
+  heading: { id: 'column.drive', defaultMessage: 'Drive' },
+  folderDropdown: { id: 'drive.folder.dropdown', defaultMessage: 'Folder menu' },
+  folderView: { id: 'drive.folder.view', defaultMessage: 'View folder' },
+  folderRename: { id: 'drive.folder.rename', defaultMessage: 'Rename folder' },
+  folderRenamePlaceholder: { id: 'drive.folder.rename.placeholder', defaultMessage: 'New folder name' },
+  folderRenameSuccess: { id: 'drive.folder.rename.success', defaultMessage: 'Folder renamed successfully.' },
+  folderRenameError: { id: 'drive.folder.rename.error', defaultMessage: 'Failed to rename folder.' },
+  folderDelete: { id: 'drive.folder.delete', defaultMessage: 'Delete folder' },
+  folderDeleteSuccess: { id: 'drive.folder.delete.success', defaultMessage: 'Folder deleted successfully.' },
+  folderDeleteError: { id: 'drive.folder.delete.error', defaultMessage: 'Failed to delete folder.' },
+  fileDropdown: { id: 'drive.file.dropdown', defaultMessage: 'File menu' },
+  fileView: { id: 'drive.file.view', defaultMessage: 'View file' },
+  fileDownload: { id: 'drive.file.download', defaultMessage: 'Download file' },
+  fileRename: { id: 'drive.file.rename', defaultMessage: 'Rename file' },
+  fileRenamePlaceholder: { id: 'drive.file.rename.placeholder', defaultMessage: 'New file name' },
+  fileRenameSuccess: { id: 'drive.file.rename.success', defaultMessage: 'File renamed successfully.' },
+  fileRenameError: { id: 'drive.file.rename.error', defaultMessage: 'Failed to rename file.' },
+  updateDescription: { id: 'drive.file.update_description', defaultMessage: 'Edit description' },
+  updateDescriptionPlaceholder: { id: 'drive.file.update_description.placeholder', defaultMessage: 'New description' },
+  updateDescriptionSuccess: { id: 'drive.file.update_description.success', defaultMessage: 'Description updated successfully.' },
+  updateDescriptionError: { id: 'drive.file.update_description.error', defaultMessage: 'Failed to update description.' },
+  markSensitive: { id: 'drive.file.mark_sensitive', defaultMessage: 'Mark as sensitive' },
+  markSensitiveSuccess: { id: 'drive.file.mark_sensitive.success', defaultMessage: 'File marked as sensitive.' },
+  markSensitiveError: { id: 'drive.file.mark_sensitive.error', defaultMessage: 'Failed to mark file as sensitive.' },
+  unmarkSensitive: { id: 'drive.file.unmark_sensitive', defaultMessage: 'Unmark as sensitive' },
+  unmarkSensitiveSuccess: { id: 'drive.file.unmark_sensitive.success', defaultMessage: 'File unmarked as sensitive.' },
+  unmarkSensitiveError: { id: 'drive.file.unmark_sensitive.error', defaultMessage: 'Failed to unmark file as sensitive.' },
+  fileMove: { id: 'drive.file.move', defaultMessage: 'Move file' },
+  fileDelete: { id: 'drive.file.delete', defaultMessage: 'Delete file' },
+  fileDeleteSuccess: { id: 'drive.file.delete.success', defaultMessage: 'File deleted successfully.' },
+  fileDeleteError: { id: 'drive.file.delete.error', defaultMessage: 'Failed to delete file.' },
+});
+
+interface IFile {
+  file: DriveFile;
+}
+
+const File: React.FC<IFile> = ({ file }) => {
+  const intl = useIntl();
+
+  const { openModal } = useModalsActions();
+  const { mutate: updateFile } = useUpdateDriveFileMutation(file.id);
+  const { mutate: deleteFile } = useDeleteDriveFileMutation(file.id);
+
+  const isMedia = file.content_type.match(/image|video|audio/);
+
+  const items = useMemo(() => {
+    const handleView = () => {
+      const mediaAttachment = {
+        id: file.id,
+        url: file.url,
+        preview_url: file.thumbnail_url,
+        remote_url: file.url,
+        description: file.description || '',
+        type: file.content_type.split('/')[0] as 'image' | 'video' | 'audio' | 'unknown',
+        mime_type: file.content_type,
+        blurhash: null,
+      } as MediaAttachment;
+
+      openModal('MEDIA', {
+        media: [mediaAttachment],
+        index: 0,
+      });
+    };
+
+    const handleRename = () => {
+      openModal('TEXT_FIELD', {
+        heading: <FormattedMessage id='drive.file.rename' defaultMessage='Rename file' />,
+        placeholder: intl.formatMessage(messages.fileRenamePlaceholder),
+        confirm: <FormattedMessage id='drive.file.rename.confirm' defaultMessage='Rename' />,
+        text: file.filename,
+        singleLine: true,
+        onConfirm: (value: string) => {
+          updateFile({
+            sensitive: file.sensitive,
+            description: file.description || undefined,
+            filename: value,
+          }, {
+            onSuccess: () => toast.success(messages.fileRenameSuccess),
+            onError: () => toast.error(messages.fileRenameError),
+          });
+        },
+      });
+    };
+
+    const handleUpdateDescription = () => {
+      openModal('TEXT_FIELD', {
+        heading: <FormattedMessage id='drive.file.update_description' defaultMessage='Edit description' />,
+        placeholder: intl.formatMessage(messages.updateDescriptionPlaceholder),
+        confirm: <FormattedMessage id='drive.file.update_description.confirm' defaultMessage='Save' />,
+        text: file.description || '',
+        onConfirm: (value: string) => {
+          updateFile({
+            sensitive: file.sensitive,
+            filename: file.filename,
+            description: value,
+          }, {
+            onSuccess: () => toast.success(messages.updateDescriptionSuccess),
+            onError: () => toast.error(messages.updateDescriptionError),
+          });
+        },
+      });
+    };
+
+    const handleToggleSensitive = () => {
+      updateFile({
+        sensitive: !file.sensitive,
+        filename: file.filename,
+        description: file.description || undefined,
+      }, {
+        onSuccess: (file) => {
+          if (file.sensitive) {
+            toast.success(messages.markSensitiveSuccess);
+          } else {
+            toast.success(messages.unmarkSensitiveSuccess);
+          }
+        },
+        onError: () => {
+          if (file.sensitive) {
+            toast.error(messages.markSensitiveError);
+          } else {
+            toast.error(messages.unmarkSensitiveError);
+          }
+        },
+      });
+    };
+
+    const handleDelete = () => {
+      openModal('CONFIRM', {
+        heading: <FormattedMessage id='drive.file.delete' defaultMessage='Delete file' />,
+        confirm: <FormattedMessage id='drive.file.delete.confirm' defaultMessage='Delete' />,
+        message: <FormattedMessage id='drive.file.delete.text' defaultMessage='Are you sure you want to delete this file? This action cannot be undone.' />,
+        onConfirm: () => {
+          deleteFile(undefined, {
+            onSuccess: () => toast.success(messages.fileDeleteSuccess),
+            onError: () => toast.error(messages.fileDeleteError),
+          });
+        },
+      });
+    };
+
+    return [
+      isMedia ? {
+        text: intl.formatMessage(messages.fileView),
+        icon: require('@phosphor-icons/core/regular/eye.svg'),
+        action: handleView,
+      } : {
+        text: intl.formatMessage(messages.fileDownload),
+        icon: require('@phosphor-icons/core/regular/download.svg'),
+        href: file.url,
+      },
+      {
+        text: intl.formatMessage(messages.fileRename),
+        icon: require('@phosphor-icons/core/regular/cursor-text.svg'),
+        action: handleRename,
+      },
+      {
+        text: intl.formatMessage(messages.updateDescription),
+        icon: require('@phosphor-icons/core/regular/file-text.svg'),
+        action: handleUpdateDescription,
+      },
+      file.sensitive ? {
+        text: intl.formatMessage(messages.unmarkSensitive),
+        icon: require('@phosphor-icons/core/regular/eye.svg'),
+        action: handleToggleSensitive,
+      } : {
+        text: intl.formatMessage(messages.markSensitive),
+        icon: require('@phosphor-icons/core/regular/eye-slash.svg'),
+        action: handleToggleSensitive,
+      },
+      null,
+      // {
+      //   text: intl.formatMessage(messages.fileMove),
+      //   icon: require('@phosphor-icons/core/regular/folders.svg'),
+      // },
+      {
+        text: intl.formatMessage(messages.fileDelete),
+        icon: require('@phosphor-icons/core/regular/trash.svg'),
+        destructive: true,
+        action: handleDelete,
+      },
+    ];
+  }, [file]);
+
+  return (
+    <div className='group relative flex w-32 flex-col items-center gap-2' tabIndex={0}>
+      <div className='invisible absolute self-end group-hover:visible group-focus:visible'>
+        <DropdownMenu items={items} placement='right-start'>
+          <IconButton
+            src={require('@phosphor-icons/core/regular/dots-three.svg')}
+            title={intl.formatMessage(messages.fileDropdown)}
+            className='text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500'
+            iconClassName='h-4 w-4'
+            theme='secondary'
+          />
+        </DropdownMenu>
+      </div>
+
+      {file.thumbnail_url && isMedia ? (
+        <img
+          className='pointer-events-none size-24 overflow-hidden object-cover'
+          src={file.thumbnail_url}
+          alt={file.description || undefined}
+        />
+      ) : (
+        <Icon
+          className='m-2 size-20 text-gray-800 dark:text-gray-200'
+          src={MIMETYPE_ICONS[file.content_type || ''] || defaultIcon}
+        />
+      )}
+
+      <span className='mt-auto line-clamp-3 inline max-w-full text-ellipsis rounded bg-gray-900 px-2 py-1 text-xs font-medium text-white'>
+        {file.filename}
+      </span>
+    </div>
+  );
+};
+
+interface IFolder {
+  folder: DriveFolder;
+}
+
+const Folder: React.FC<IFolder> = ({ folder }) => {
+  const intl = useIntl();
+
+  const { openModal } = useModalsActions();
+  const { mutate: deleteFolder } = useDeleteDriveFolderMutation(folder.id!);
+  const { mutate: updateFolder } = useUpdateDriveFolderMutation(folder.id!);
+
+  const items: Menu = useMemo(() => {
+    const handleRename = () => {
+      openModal('TEXT_FIELD', {
+        heading: <FormattedMessage id='drive.folder.rename' defaultMessage='Rename folder' />,
+        placeholder: intl.formatMessage(messages.folderRenamePlaceholder),
+        confirm: <FormattedMessage id='drive.folder.rename.confirm' defaultMessage='Rename' />,
+        text: folder.name || '',
+        singleLine: true,
+        onConfirm: (value: string) => {
+          updateFolder(value, {
+            onSuccess: () => toast.success(messages.folderRenameSuccess),
+            onError: () => toast.error(messages.folderRenameError),
+          });
+        },
+      });
+    };
+
+    const handleDelete = () => {
+      openModal('CONFIRM', {
+        heading: <FormattedMessage id='drive.folder.delete' defaultMessage='Delete folder' />,
+        confirm: <FormattedMessage id='drive.folder.delete.confirm' defaultMessage='Delete' />,
+        message: <FormattedMessage id='drive.folder.delete.text' defaultMessage='Are you sure you want to delete this folder? This action cannot be undone.' />,
+        onConfirm: () => {
+          deleteFolder(undefined, {
+            onSuccess: () => toast.success(messages.folderDeleteSuccess),
+            onError: () => toast.error(messages.folderDeleteError),
+          });
+        },
+      });
+    };
+
+    return [
+      {
+        text: intl.formatMessage(messages.folderView),
+        icon: require('@phosphor-icons/core/regular/folder-open.svg'),
+        to: `/drive/${folder.id}`,
+      },
+      {
+        text: intl.formatMessage(messages.folderRename),
+        icon: require('@phosphor-icons/core/regular/cursor-text.svg'),
+        action: handleRename,
+      },
+      {
+        text: intl.formatMessage(messages.folderDelete),
+        icon: require('@phosphor-icons/core/regular/trash.svg'),
+        destructive: true,
+        action: handleDelete,
+      },
+    ];
+  }, [folder]);
+
+  return (
+    <div className='group relative flex w-32 flex-col items-center gap-2' tabIndex={0}>
+      <div className='invisible absolute self-end group-hover:visible group-focus:visible'>
+        <DropdownMenu items={items} placement='right-start'>
+          <IconButton
+            src={require('@phosphor-icons/core/regular/dots-three.svg')}
+            title={intl.formatMessage(messages.folderDropdown)}
+            className='text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500'
+            iconClassName='h-4 w-4'
+            theme='secondary'
+          />
+        </DropdownMenu>
+      </div>
+
+      <Icon
+        className='m-2 size-20 text-gray-800 dark:text-gray-200'
+        src={require('@phosphor-icons/core/regular/folder.svg')}
+      />
+
+      <span className='mt-auto line-clamp-3 inline max-w-full text-ellipsis rounded bg-gray-900 px-2 py-1 text-xs font-medium text-white'>
+        {folder.name}
+      </span>
+    </div>
+  );
+};
+
+interface IDrivePage {
+  params?: {
+    folderId?: string;
+  };
+}
+
+const DrivePage: React.FC<IDrivePage> = ({ params }) => {
+  const intl = useIntl();
+
+  const { data, isPending } = useDriveFolderQuery(params?.folderId);
+
+  if (isPending) {
+    return <ColumnLoading />;
+  }
+
+  const isEmpty = data?.files.length === 0 && data?.folders.length === 0;
+
+  return (
+    <Column
+      label={data?.name || intl.formatMessage(messages.heading)}
+      backHref={data?.id === null ? '/drive' : data?.parent_id ? `/drive/${data.parent_id}` : undefined}
+      // action={<DropdownMenu items={items} src={require('@phosphor-icons/core/regular/dots-three-vertical.svg')} />}
+    >
+      {isEmpty ? (
+        <EmptyMessage
+          text={<FormattedMessage id='drive.empty' defaultMessage='There are no files or folders in this folder.' />}
+          icon={require('@phosphor-icons/core/regular/folder-open.svg')}
+        />
+      ) : (
+        <HStack wrap space={4}>
+          {data?.folders.map((folder) => <Folder key={folder.id} folder={folder} />)}
+          {data?.files.map((file) => <File key={file.id} file={file} />)}
+        </HStack>
+      )}
+    </Column>
+  );
+};
+
+export { DrivePage as default };
diff --git a/packages/pl-fe/src/queries/drive/use-drive-file.ts b/packages/pl-fe/src/queries/drive/use-drive-file.ts
new file mode 100644
index 000000000..04ba353df
--- /dev/null
+++ b/packages/pl-fe/src/queries/drive/use-drive-file.ts
@@ -0,0 +1,74 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { useClient } from 'pl-fe/hooks/use-client';
+import { useFeatures } from 'pl-fe/hooks/use-features';
+
+import type { UpdateFileParams } from 'pl-api';
+
+const useDriveFileQuery = (fileId: string) => {
+  const client = useClient();
+  const features = useFeatures();
+
+  return useQuery({
+    queryKey: ['drive', 'files', fileId],
+    queryFn: () => client.drive.getFile(fileId),
+    enabled: features.drive,
+  });
+};
+
+const useCreateDriveFileMutation = () => {
+  const client = useClient();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: ['drive', 'files'],
+    mutationFn: ({ file, folderId }: { file: File; folderId?: string }) => client.drive.createFile(file, folderId),
+    onSuccess: (file, { folderId }) => {
+      queryClient.setQueryData(['drive', 'files', file.id], file);
+      queryClient.invalidateQueries({ queryKey: ['drive', 'folders', folderId], exact: true });
+    },
+  });
+};
+
+const useUpdateDriveFileMutation = (fileId: string) => {
+  const client = useClient();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: ['drive', 'files'],
+    mutationFn: (params: UpdateFileParams) => client.drive.updateFile(fileId, params),
+    onSuccess: (file) => {
+      queryClient.setQueryData(['drive', 'files', file.id], file);
+      queryClient.invalidateQueries({ queryKey: ['drive', 'folders'], exact: false });
+    },
+  });
+};
+
+const useDeleteDriveFileMutation = (fileId: string) => {
+  const client = useClient();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: ['drive', 'files'],
+    mutationFn: () => client.drive.deleteFile(fileId),
+    onSuccess: (file) => {
+      queryClient.invalidateQueries({ queryKey: ['drive', 'folders'], exact: false });
+    },
+  });
+};
+
+const useMoveDriveFileMutation = (fileId: string) => {
+  const client = useClient();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: ['drive', 'files'],
+    mutationFn: (folderId: string) => client.drive.moveFile(fileId, folderId),
+    onSuccess: (file) => {
+      queryClient.invalidateQueries({ queryKey: ['drive', 'folders'], exact: false });
+      queryClient.setQueryData(['drive', 'files', file.id], file);
+    },
+  });
+};
+
+export { useDriveFileQuery, useCreateDriveFileMutation, useUpdateDriveFileMutation, useDeleteDriveFileMutation, useMoveDriveFileMutation };
diff --git a/packages/pl-fe/src/queries/drive/use-drive-folder.ts b/packages/pl-fe/src/queries/drive/use-drive-folder.ts
index 84e40979d..7df33e8a9 100644
--- a/packages/pl-fe/src/queries/drive/use-drive-folder.ts
+++ b/packages/pl-fe/src/queries/drive/use-drive-folder.ts
@@ -6,7 +6,7 @@ import { useFeatures } from 'pl-fe/hooks/use-features';
 
 import type { DriveFolder } from 'pl-api';
 
-const useDriveFolder = (folderId?: string) => {
+const useDriveFolderQuery = (folderId?: string) => {
   const client = useClient();
   const features = useFeatures();
 
@@ -17,7 +17,7 @@ const useDriveFolder = (folderId?: string) => {
   });
 };
 
-const useCreateDriveFolder = () => {
+const useCreateDriveFolderMutation = () => {
   const client = useClient();
   const queryClient = useQueryClient();
 
@@ -31,20 +31,31 @@ const useCreateDriveFolder = () => {
   });
 };
 
-const useUpdateDriveFolder = (folderId: string) => {
+const useUpdateDriveFolderMutation = (folderId: string) => {
   const client = useClient();
   const queryClient = useQueryClient();
 
+  let previousParentId: string | null;
+
   return useMutation({
     mutationKey: ['drive', 'folders'],
-    mutationFn: (name: string) => client.drive.updateFolder(folderId, name),
+    mutationFn: (name: string) => {
+      const oldFolder = queryClient.getQueryData<DriveFolder>(['drive', 'folders', folderId]);
+      if (oldFolder) {
+        previousParentId = oldFolder.parent_id;
+      } else {
+        previousParentId = null;
+      }
+      return client.drive.updateFolder(folderId, name);
+    },
     onSuccess: (folder) => {
       queryClient.setQueryData(['drive', 'folders', folder.id], folder);
+      queryClient.invalidateQueries({ queryKey: ['drive', 'folders', previousParentId], exact: true });
     },
   });
 };
 
-const useDeleteDriveFolder = (folderId: string) => {
+const useDeleteDriveFolderMutation = (folderId: string) => {
   const client = useClient();
   const queryClient = useQueryClient();
 
@@ -63,12 +74,12 @@ const useDeleteDriveFolder = (folderId: string) => {
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['drive', 'folders', folderId], exact: true });
-      if (previousParentId) queryClient.invalidateQueries({ queryKey: ['drive', 'folders', previousParentId || undefined], exact: true });
+      queryClient.invalidateQueries({ queryKey: ['drive', 'folders', previousParentId], exact: true });
     },
   });
 };
 
-const useMoveDriveFolder = (folderId: string) => {
+const useMoveDriveFolderMutation = (folderId: string) => {
   const client = useClient();
   const queryClient = useQueryClient();
 
@@ -93,4 +104,4 @@ const useMoveDriveFolder = (folderId: string) => {
   });
 };
 
-export { useDriveFolder, useCreateDriveFolder, useUpdateDriveFolder, useDeleteDriveFolder, useMoveDriveFolder };
+export { useDriveFolderQuery, useCreateDriveFolderMutation, useUpdateDriveFolderMutation, useDeleteDriveFolderMutation, useMoveDriveFolderMutation };