diff --git a/src/@types/fdp-storage.d.ts b/src/@types/fdp-storage.d.ts
new file mode 100644
index 00000000..98964aac
--- /dev/null
+++ b/src/@types/fdp-storage.d.ts
@@ -0,0 +1,13 @@
+import type {
+  DirectoryItem as FdpDirectoryItem,
+  FileItem as FdpFileItem,
+} from '@fairdatasociety/fdp-storage';
+
+declare module '@fairdatasociety/fdp-storage' {
+  interface DirectoryItem extends FdpDirectoryItem {
+    path?: string;
+  }
+  interface FileItem extends FdpFileItem {
+    path?: string;
+  }
+}
diff --git a/src/components/Dropdowns/DriveItemDropdown/DriveItemDropdown.tsx b/src/components/Dropdowns/DriveItemDropdown/DriveItemDropdown.tsx
index 358e8e7b..267d0f19 100644
--- a/src/components/Dropdowns/DriveItemDropdown/DriveItemDropdown.tsx
+++ b/src/components/Dropdowns/DriveItemDropdown/DriveItemDropdown.tsx
@@ -10,12 +10,14 @@ interface DriveItemDropdownProps extends UpdateDriveProps {
   data: {
     name: string;
   };
+  mobileAlign?: 'left' | 'right';
   handlePreviewClick?: () => void;
 }
 
 const DriveDropdown: FC<DriveItemDropdownProps> = ({
   type,
   data,
+  mobileAlign,
   updateDrive,
   handlePreviewClick,
 }) => {
@@ -29,6 +31,7 @@ const DriveDropdown: FC<DriveItemDropdownProps> = ({
       <DriveItemMenu
         data={data}
         type={type}
+        mobileAlign={mobileAlign}
         updateDrive={updateDrive}
         handlePreviewClick={handlePreviewClick}
       />
diff --git a/src/components/Dropdowns/DriveItemDropdown/DriveItemMenu.tsx b/src/components/Dropdowns/DriveItemDropdown/DriveItemMenu.tsx
index 649e9df6..f039a7a9 100644
--- a/src/components/Dropdowns/DriveItemDropdown/DriveItemMenu.tsx
+++ b/src/components/Dropdowns/DriveItemDropdown/DriveItemMenu.tsx
@@ -23,12 +23,14 @@ interface DriveItemMenuProps extends UpdateDriveProps {
   data: {
     name: string;
   };
+  mobileAlign?: 'left' | 'right';
   handlePreviewClick?: () => void;
 }
 
 const DriveItemMenu: FC<DriveItemMenuProps> = ({
   type,
   data,
+  mobileAlign,
   updateDrive,
   handlePreviewClick,
 }) => {
@@ -147,7 +149,11 @@ const DriveItemMenu: FC<DriveItemMenuProps> = ({
   return (
     <>
       <DropdownTransition>
-        <Menu.Items className="absolute sm:-left-32 w-48 p-5 z-10 bg-color-shade-dark-1-day dark:bg-color-shade-dark-3-night text-left rounded-md shadow">
+        <Menu.Items
+          className={`absolute ${
+            mobileAlign === 'right' ? 'right-4' : 'sm:-left-32'
+          } w-48 p-5 z-10 bg-color-shade-dark-1-day dark:bg-color-shade-dark-3-night text-left rounded-md shadow`}
+        >
           <Menu.Item
             as="h4"
             className="mb-3 pb-3 font-semibold text-color-shade-white-day dark:text-color-shade-white-night text-base border-b-2 border-color-shade-light-1-day dark:border-color-shade-light-1-night cursor-pointer"
diff --git a/src/components/Inputs/SearchBar/SearchBar.tsx b/src/components/Inputs/SearchBar/SearchBar.tsx
index f9498380..af193210 100644
--- a/src/components/Inputs/SearchBar/SearchBar.tsx
+++ b/src/components/Inputs/SearchBar/SearchBar.tsx
@@ -10,42 +10,59 @@ import CloseDarkIcon from '@media/UI/close-light.svg';
 
 import classes from './SearchBar.module.scss';
 import { useLocales } from '@context/LocalesContext';
+import { useForm } from 'react-hook-form';
+import PodContext from '@context/PodContext';
 
 interface SearchBarProps {}
 
 const SearchBar: FC<SearchBarProps> = () => {
   const { theme } = useContext(ThemeContext);
-  const { search, updateSearch } = useContext(SearchContext);
+  const { updateSearch, searchDisabled } = useContext(SearchContext);
+  const { activePod, loading } = useContext(PodContext);
   const { intl } = useLocales();
+  const { register, handleSubmit, reset } = useForm<{ search: '' }>();
+
+  const onSubmitInternal = ({ search }) => updateSearch(search);
 
   return (
-    <div className="flex justify-center items-center w-80 md:w-98 h-10 py-2 px-4 bg-color-shade-dark-4-day dark:bg-color-shade-dark-4-night border border-color-shade-black-day dark:border-color-shade-dark-1-night effect-style-small-button-drop-shadow rounded">
-      {theme === 'light' ? (
-        <SearchLightIcon className="inline-block mr-1" />
-      ) : (
-        <SearchDarkIcon className="inline-block mr-1" />
-      )}
+    <form
+      className="flex justify-center items-center w-80 md:w-98 h-10 py-2 px-4 bg-color-shade-dark-4-day dark:bg-color-shade-dark-4-night border border-color-shade-black-day dark:border-color-shade-dark-1-night effect-style-small-button-drop-shadow rounded"
+      onSubmit={handleSubmit(onSubmitInternal)}
+    >
+      <span className="cursor-pointer" onClick={handleSubmit(onSubmitInternal)}>
+        {theme === 'light' ? (
+          <SearchLightIcon className="inline-block mr-1" />
+        ) : (
+          <SearchDarkIcon className="inline-block mr-1" />
+        )}
+      </span>
 
       <input
         type="text"
         id="search"
         name="search"
+        disabled={!activePod || loading || searchDisabled}
         placeholder={intl.get('SEARCH')}
         className={`${classes.searchBar} ${
           theme === 'light' ? classes.searchBarLight : classes.searchBarDark
         }`}
-        value={search}
-        onChange={(e) => updateSearch(e.target.value)}
+        {...register('search', { required: true })}
       />
 
-      <div className="cursor-pointer" onClick={() => updateSearch('')}>
+      <div
+        className="cursor-pointer"
+        onClick={() => {
+          reset();
+          updateSearch('');
+        }}
+      >
         {theme === 'light' ? (
           <CloseLightIcon className="inline-block mr-1" />
         ) : (
           <CloseDarkIcon className="inline-block mr-1" />
         )}
       </div>
-    </div>
+    </form>
   );
 };
 
diff --git a/src/components/Modals/PreviewFileModal/PreviewFileModal.tsx b/src/components/Modals/PreviewFileModal/PreviewFileModal.tsx
index 2d6b64f3..490749c0 100644
--- a/src/components/Modals/PreviewFileModal/PreviewFileModal.tsx
+++ b/src/components/Modals/PreviewFileModal/PreviewFileModal.tsx
@@ -70,7 +70,7 @@ const PreviewFileModal: FC<PreviewModalProps> = ({
     setLoading(true);
     downloadFile(fdpClientRef.current, {
       filename: previewFile?.name,
-      directory: directoryName,
+      directory: previewFile.path || directoryName,
       podName: activePod,
     })
       .then(async (response) => {
diff --git a/src/components/NavigationBars/DriveActionBar/DriveActionHeaderMobile.tsx b/src/components/NavigationBars/DriveActionBar/DriveActionHeaderMobile.tsx
index 633ae1d9..1159a290 100644
--- a/src/components/NavigationBars/DriveActionBar/DriveActionHeaderMobile.tsx
+++ b/src/components/NavigationBars/DriveActionBar/DriveActionHeaderMobile.tsx
@@ -1,21 +1,40 @@
+import { Button } from '@components/Buttons';
 import DirectoryPath from '@components/DirectoryPath/DirectoryPath';
 import PodDropdown from '@components/Dropdowns/PodDropdown/PodDropdown';
+import ThemeContext from '@context/ThemeContext';
+import { useContext } from 'react';
+
+import DriveViewListLight from '@media/UI/drive-view-list-light.svg';
+import DriveViewListDark from '@media/UI/drive-view-list-dark.svg';
+import DriveViewGridLight from '@media/UI/drive-view-grid-light.svg';
+import DriveViewGridDark from '@media/UI/drive-view-grid-dark.svg';
+
+import SortLight from '@media/UI/sort-light.svg';
+import SortDark from '@media/UI/sort-dark.svg';
 
 interface DriveActionHeaderMobileProps {
   podName: string;
+  driveView: 'grid' | 'list';
   directory: string;
   onDirectorySelect: (newDirectory: string) => void;
   onBackToDrive: () => void;
+  toggleView: () => void;
+  toggleSort: () => void;
 }
 
 const DriveActionHeaderMobile = ({
   podName,
+  driveView,
   directory,
   onDirectorySelect,
   onBackToDrive,
+  toggleView,
+  toggleSort,
 }: DriveActionHeaderMobileProps) => {
+  const { theme } = useContext(ThemeContext);
+
   return (
-    <>
+    <div className="flex w-full mb-2">
       <PodDropdown />
       <DirectoryPath
         podName={podName}
@@ -23,7 +42,38 @@ const DriveActionHeaderMobile = ({
         onDirectorySelect={onDirectorySelect}
         onBackToDrive={onBackToDrive}
       />
-    </>
+      <div className="ml-auto flex md:hidden">
+        <Button
+          type="button"
+          variant="primary"
+          icon={
+            driveView === 'grid' ? (
+              theme === 'light' ? (
+                <DriveViewListLight />
+              ) : (
+                <DriveViewListDark />
+              )
+            ) : theme === 'light' ? (
+              <DriveViewGridLight />
+            ) : (
+              <DriveViewGridDark />
+            )
+          }
+          className="mx-1"
+          padding="p-3"
+          onClick={toggleView}
+        />
+
+        <Button
+          type="button"
+          variant="primary"
+          icon={theme === 'light' ? <SortLight /> : <SortDark />}
+          className="mx-1"
+          padding="p-3"
+          onClick={toggleSort}
+        />
+      </div>
+    </div>
   );
 };
 
diff --git a/src/components/NavigationBars/MainNavigationBar/MainNavigationBar.tsx b/src/components/NavigationBars/MainNavigationBar/MainNavigationBar.tsx
index 27bf6296..6242c184 100644
--- a/src/components/NavigationBars/MainNavigationBar/MainNavigationBar.tsx
+++ b/src/components/NavigationBars/MainNavigationBar/MainNavigationBar.tsx
@@ -44,10 +44,9 @@ const MainNavigationBar: FC<Record<string, never>> = () => {
         </div>
 
         <div className="flex justify-between items-center">
-          {/* TODO: Search functionality should be implemented */}
-          {/* <div className="hidden sm:block mr-16">
+          <div className="hidden sm:block mr-16">
             <SearchBar />
-          </div> */}
+          </div>
           <div className="flex flex-nowrap space-x-5">
             <UserDropdownToggle
               address={wallet?.address || 'Blossom'}
diff --git a/src/components/Tables/DriveTableFooter/DriveTableFooter.tsx b/src/components/Tables/DriveTableFooter/DriveTableFooter.tsx
index 3099de08..1ca4ea72 100644
--- a/src/components/Tables/DriveTableFooter/DriveTableFooter.tsx
+++ b/src/components/Tables/DriveTableFooter/DriveTableFooter.tsx
@@ -57,7 +57,9 @@ const DriveTableFooter: FC<DriveTableFooterProps> = ({
   return (
     <div className="flex justify-end items-center w-full h-16 pr-4 font-medium text-color-accents-plum-black dark:text-color-shade-light-1-night bg-color-shade-dark-4-day dark:bg-color-shade-dark-3-night shadow">
       <div className="px-5">
-        <span className="inline-block mr-2">{intl.get('ROWS_PER_PAGE')}</span>
+        <span className="mr-2 hidden sm:inline-block">
+          {intl.get('ROWS_PER_PAGE')}
+        </span>
 
         <Select
           name="Rows Per Page"
@@ -68,15 +70,14 @@ const DriveTableFooter: FC<DriveTableFooterProps> = ({
 
       <div className="px-5">
         {`
-        ${page * rowsPerPage + 1}-${
+            ${page * rowsPerPage + 1}-${
           page * rowsPerPage + rowsPerPage > totalDriveItems
             ? totalDriveItems
             : page * rowsPerPage + rowsPerPage
-        } of
-        ${totalDriveItems}`}
+        } of ${totalDriveItems}`}
       </div>
 
-      <div className="px-5">
+      <div className="px-5 flex items-center">
         <span className="inline-block mr-3 cursor-pointer" onClick={pageDown}>
           {theme === 'light' ? <PageDownLight /> : <PageDownDark />}
         </span>
diff --git a/src/components/Tables/DriveTableHeader/DriveTableHeader.tsx b/src/components/Tables/DriveTableHeader/DriveTableHeader.tsx
index f2b26e0f..7c7c9b28 100644
--- a/src/components/Tables/DriveTableHeader/DriveTableHeader.tsx
+++ b/src/components/Tables/DriveTableHeader/DriveTableHeader.tsx
@@ -8,13 +8,17 @@ const DriveTableHeader: FC = () => {
     'pl-4 font-medium text-color-accents-plum-black dark:text-color-shade-light-1-night text-left text-base';
 
   return (
-    <tr className="relative w-full h-16 bg-color-shade-dark-4-day border dark:bg-color-shade-dark-3-night border-color-shade-dark-4-day dark:border-color-shade-dark-3-night shadow-sm">
-      <th className={tableHeadingClasses}>{intl.get('FILE_NAME')}</th>
-      <th className={tableHeadingClasses}>{intl.get('FILE_TYPE')}</th>
-      <th className={tableHeadingClasses}>{intl.get('FILE_SIZE')}</th>
-      <th className={tableHeadingClasses}>{intl.get('CREATED')}</th>
-      <th>{/* Empty Table Header for Dropdown Menu */}</th>
-    </tr>
+    <thead>
+      <tr className="relative w-full h-16 bg-color-shade-dark-4-day border dark:bg-color-shade-dark-3-night border-color-shade-dark-4-day dark:border-color-shade-dark-3-night shadow-sm">
+        <th className={tableHeadingClasses}>{intl.get('FILE_NAME')}</th>
+        <th className={tableHeadingClasses}>{intl.get('FILE_TYPE')}</th>
+        <th className={tableHeadingClasses}>{intl.get('FILE_SIZE')}</th>
+        <th className={`${tableHeadingClasses} hidden md:table-cell`}>
+          {intl.get('CREATED')}
+        </th>
+        <th>{/* Empty Table Header for Dropdown Menu */}</th>
+      </tr>
+    </thead>
   );
 };
 
diff --git a/src/components/Tables/DriveTableItem/DrivaTableItem.module.scss b/src/components/Tables/DriveTableItem/DrivaTableItem.module.scss
new file mode 100644
index 00000000..94cab4e6
--- /dev/null
+++ b/src/components/Tables/DriveTableItem/DrivaTableItem.module.scss
@@ -0,0 +1,3 @@
+.name-column {
+  max-width: 200px;
+}
diff --git a/src/components/Tables/DriveTableItem/DriveTableItem.tsx b/src/components/Tables/DriveTableItem/DriveTableItem.tsx
index 3d3cfb6c..2ef69d9e 100644
--- a/src/components/Tables/DriveTableItem/DriveTableItem.tsx
+++ b/src/components/Tables/DriveTableItem/DriveTableItem.tsx
@@ -9,6 +9,8 @@ import formatDate from '@utils/formatDate';
 import { extractFileExtension } from '@utils/filename';
 import { UpdateDriveProps } from '@interfaces/handlers';
 
+import classes from './DrivaTableItem.module.scss';
+
 interface DriveTableItemProps extends UpdateDriveProps {
   type: 'folder' | 'file';
   data: {
@@ -33,7 +35,9 @@ const DriveTableItem: FC<DriveTableItemProps> = ({
       className="w-full h-14 even:bg-color-shade-dark-3-day odd:bg-color-shade-dark-4-day dark:odd:bg-color-shade-dark-4-night dark:even:bg-color-shade-white-day border border-color-shade-black-day dark:border-color-accents-purple-black shadow-sm cursor-pointer"
       onClick={onClick}
     >
-      <td className={`${tableDataClasses} dark:text-color-shade-light-1-night`}>
+      <td
+        className={`${tableDataClasses} ${classes['name-column']} overflow-hidden dark:text-color-shade-light-1-night`}
+      >
         {shortenString(data.name.split('.').shift(), 24)}
       </td>
       <td className={`${tableDataClasses} dark:text-color-shade-light-2-night`}>
@@ -42,7 +46,9 @@ const DriveTableItem: FC<DriveTableItemProps> = ({
       <td className={`${tableDataClasses} dark:text-color-shade-light-2-night`}>
         {type === 'file' ? prettyBytes(data?.size) : '-'}
       </td>
-      <td className={`${tableDataClasses} dark:text-color-shade-light-2-night`}>
+      <td
+        className={`${tableDataClasses} hidden md:table-cell dark:text-color-shade-light-2-night`}
+      >
         {formatDate(data?.creationTime, false)}
       </td>
       <td className="text-center">
@@ -50,6 +56,8 @@ const DriveTableItem: FC<DriveTableItemProps> = ({
           <DriveItemDropdown
             type={type}
             data={data}
+            mobileAlign="right"
+            handlePreviewClick={onClick}
             updateDrive={updateDrive}
           />
         </Menu>
diff --git a/src/components/Views/DriveGridView/DriveGridView.tsx b/src/components/Views/DriveGridView/DriveGridView.tsx
index 492627be..e1dbd9e5 100644
--- a/src/components/Views/DriveGridView/DriveGridView.tsx
+++ b/src/components/Views/DriveGridView/DriveGridView.tsx
@@ -6,7 +6,7 @@ import { UpdateDriveProps } from '@interfaces/handlers';
 interface DriveGridViewProps extends UpdateDriveProps {
   directories: DirectoryItem[];
   files: FileItem[];
-  directoryOnClick: (directoryName: string) => void;
+  directoryOnClick: (directory: DirectoryItem) => void;
   fileOnClick: (data: FileItem) => void;
 }
 
@@ -28,7 +28,7 @@ const DriveGridView: FC<DriveGridViewProps> = ({
             size: directory.size,
             creationTime: (directory.raw as any)?.meta?.creationTime,
           }}
-          onClick={() => directoryOnClick(directory.name)}
+          onClick={() => directoryOnClick(directory)}
           updateDrive={updateDrive}
         />
       ))}
diff --git a/src/components/Views/DriveListView/DriveListView.tsx b/src/components/Views/DriveListView/DriveListView.tsx
index a605630c..b70ab931 100644
--- a/src/components/Views/DriveListView/DriveListView.tsx
+++ b/src/components/Views/DriveListView/DriveListView.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { FC, useMemo, useState } from 'react';
 
 import {
   DriveTableHeader,
@@ -11,7 +11,7 @@ import { UpdateDriveProps } from '@interfaces/handlers';
 interface DriveListViewProps extends UpdateDriveProps {
   directories: DirectoryItem[];
   files: FileItem[];
-  directoryOnClick: (directoryName: string) => void;
+  directoryOnClick: (directory: DirectoryItem) => void;
   fileOnClick: (data: FileItem) => void;
 }
 
@@ -24,6 +24,19 @@ const DriveListView: FC<DriveListViewProps> = ({
 }) => {
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(10);
+  const startIndex = page * rowsPerPage;
+  const endIndex = startIndex + rowsPerPage;
+
+  const { pageDirectories, pageFiles } = useMemo(
+    () => ({
+      pageDirectories: (directories || []).slice(startIndex, endIndex),
+      pageFiles: (files || []).slice(
+        startIndex - directories.length,
+        endIndex - directories.length
+      ),
+    }),
+    [directories, files, startIndex, endIndex]
+  );
 
   const handlePageUp = () => {
     if (
@@ -41,13 +54,12 @@ const DriveListView: FC<DriveListViewProps> = ({
   };
 
   return (
-    <div className="h-full">
+    <div className="h-full mb-32">
       <table className="w-full h-auto table-auto shadow">
         <DriveTableHeader />
 
-        {directories
-          ?.slice(page * rowsPerPage, page * rowsPerPage + (rowsPerPage + 1))
-          .map((directory) => (
+        <tbody>
+          {pageDirectories.map((directory) => (
             <DriveTableItem
               key={directory.name}
               type="folder"
@@ -56,14 +68,12 @@ const DriveListView: FC<DriveListViewProps> = ({
                 size: directory.size,
                 creationTime: (directory.raw as any)?.meta?.creationTime,
               }}
-              onClick={() => directoryOnClick(directory.name)}
+              onClick={() => directoryOnClick(directory)}
               updateDrive={updateDrive}
             />
           ))}
 
-        {files
-          ?.slice(page * rowsPerPage, page * rowsPerPage + (rowsPerPage + 1))
-          .map((data) => (
+          {pageFiles.map((data) => (
             <DriveTableItem
               key={data.name}
               type="file"
@@ -78,6 +88,7 @@ const DriveListView: FC<DriveListViewProps> = ({
               updateDrive={updateDrive}
             />
           ))}
+        </tbody>
       </table>
 
       <DriveTableFooter
diff --git a/src/context/SearchContext.tsx b/src/context/SearchContext.tsx
index 6d78b35f..d64d5515 100644
--- a/src/context/SearchContext.tsx
+++ b/src/context/SearchContext.tsx
@@ -2,7 +2,9 @@ import { FC, ReactNode, createContext, useState } from 'react';
 
 interface SearchContext {
   search: string;
+  searchDisabled: boolean;
   updateSearch: (newSearch: string) => void;
+  setSearchDisabled: (disabled: boolean) => void;
 }
 
 interface SearchContextProps {
@@ -11,14 +13,18 @@ interface SearchContextProps {
 
 const searchContextDefaultValues: SearchContext = {
   search: '',
+  searchDisabled: false,
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   updateSearch: () => {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setSearchDisabled: () => {},
 };
 
 const SearchContext = createContext<SearchContext>(searchContextDefaultValues);
 
 const SearchProvider: FC<SearchContextProps> = ({ children }) => {
   const [search, setSearch] = useState('');
+  const [searchDisabled, setSearchDisabled] = useState<boolean>(false);
 
   const updateSearch = (newSearch: string) => {
     setSearch(newSearch.trim());
@@ -28,7 +34,9 @@ const SearchProvider: FC<SearchContextProps> = ({ children }) => {
     <SearchContext.Provider
       value={{
         search,
+        searchDisabled,
         updateSearch,
+        setSearchDisabled,
       }}
     >
       {children}
diff --git a/src/pages/drive/index.tsx b/src/pages/drive/index.tsx
index 45e7fc7f..e81efa75 100644
--- a/src/pages/drive/index.tsx
+++ b/src/pages/drive/index.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { FC, useContext, useEffect, useState } from 'react';
+import { FC, useContext, useEffect, useRef, useState } from 'react';
 import { useMatomo } from '@datapunt/matomo-tracker-react';
 import { useFdpStorage } from '@context/FdpStorageContext';
 import ThemeContext from '@context/ThemeContext';
@@ -41,6 +41,7 @@ import {
 } from '@utils/error';
 import PodList from '@components/Views/PodList/PodList';
 import FeedbackMessage from '@components/FeedbackMessage/FeedbackMessage';
+import { constructPath, rootPathToRelative } from '@utils/filename';
 
 const Drive: FC = () => {
   const { trackPageView } = useMatomo();
@@ -69,6 +70,7 @@ const Drive: FC = () => {
   const [driveSort, setDriveSort] = useState('a-z');
   const { fdpClientRef, getAccountAddress } = useFdpStorage();
   const [error, setError] = useState<string | null>(null);
+  const searchControllerRef = useRef<AbortController | null>(null);
 
   useEffect(() => {
     trackPageView({
@@ -91,6 +93,7 @@ const Drive: FC = () => {
       return;
     }
     setError(null);
+    updateSearch('');
 
     const userAddress = await getAccountAddress();
     const directory = directoryName || 'root';
@@ -187,7 +190,7 @@ const Drive: FC = () => {
     }
   };
 
-  const handleDirectoryOnClick = (newDirectoryName: string) => {
+  const handleDirectoryOnClick = (newDirectory: DirectoryItem) => {
     if (loading) {
       return;
     }
@@ -196,10 +199,14 @@ const Drive: FC = () => {
 
     setLoading(true);
 
-    if (directoryName !== 'root') {
-      setDirectoryName(directoryName + '/' + newDirectoryName);
+    if (newDirectory.path) {
+      setDirectoryName(
+        rootPathToRelative(constructPath(newDirectory.path, newDirectory.name))
+      );
+    } else if (directoryName !== 'root') {
+      setDirectoryName(directoryName + '/' + newDirectory.name);
     } else {
-      setDirectoryName(newDirectoryName);
+      setDirectoryName(newDirectory.name);
     }
 
     setLoading(false);
@@ -225,10 +232,6 @@ const Drive: FC = () => {
     setShowPreviewModal(true);
   };
 
-  const handleSearchFilter = (driveItem: DirectoryItem | FileItem) => {
-    return driveItem.name.toLowerCase().includes(search.toLocaleLowerCase());
-  };
-
   const handlePodSelect = (pod: string) => {
     setError(null);
     setActivePod(pod);
@@ -241,15 +244,106 @@ const Drive: FC = () => {
     setDirectoryName('');
   };
 
+  const handleSearch = async () => {
+    try {
+      if (loading || !activePod) {
+        return;
+      }
+
+      searchControllerRef.current = new AbortController();
+
+      setLoading(true);
+
+      let matchedFiles: FileItem[] = [];
+      let matchedDirectories: DirectoryItem[] = [];
+      let folders: { path: string; depth: number }[] = [
+        { path: '/', depth: 0 },
+      ];
+      const maxDepth = 3;
+
+      while (folders.length > 0) {
+        const { path, depth } = folders.shift();
+
+        let content: DirectoryItem;
+        try {
+          content = await getFilesAndDirectories(
+            fdpClientRef.current,
+            activePod,
+            path === '/' ? 'root' : path
+          );
+
+          // eslint-disable-next-line no-empty
+        } catch (error) {
+          console.error(error);
+        }
+
+        if (searchControllerRef.current.signal.aborted) {
+          return;
+        }
+
+        if (Array.isArray(content?.files)) {
+          matchedFiles = matchedFiles
+            .concat(content.files.filter(({ name }) => name.includes(search)))
+            .map((file) => {
+              file.path = path;
+              return file;
+            });
+        }
+
+        if (Array.isArray(content?.directories)) {
+          matchedDirectories = matchedDirectories.concat(
+            content.directories
+              .filter(({ name }) => name.includes(search))
+              .map((directory) => {
+                directory.path = path;
+                return directory;
+              })
+          );
+
+          if (depth < maxDepth) {
+            folders = folders.concat(
+              content.directories.map(({ name }) => ({
+                path: constructPath(path, name),
+                depth: depth + 1,
+              }))
+            );
+          }
+        }
+      }
+
+      setFiles(matchedFiles);
+      setDirectories(matchedDirectories);
+    } catch (error) {
+      setError(errorToString(error));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (searchControllerRef.current) {
+      searchControllerRef.current.abort();
+    }
+
+    if (search) {
+      handleSearch();
+    } else {
+      handleUpdateDrive();
+    }
+  }, [search]);
+
   return (
     <MainLayout updateDrive={handleUpdateDrive} refreshPods={handleFetchPods}>
       <div className="flex flex-col">
         <div className="flex md:hidden">
           <DriveActionHeaderMobile
             podName={activePod}
+            driveView={driveView}
             directory={directoryName}
             onDirectorySelect={handleDirectoryPathChange}
             onBackToDrive={onBackToDrive}
+            toggleView={handleToggleView}
+            toggleSort={handleToggleSort}
           />
         </div>
         <MainHeader
@@ -298,10 +392,8 @@ const Drive: FC = () => {
                 <div>
                   {driveView === 'grid' ? (
                     <DriveGridView
-                      directories={handleSort(
-                        directories?.filter(handleSearchFilter)
-                      )}
-                      files={handleSort(files?.filter(handleSearchFilter))}
+                      directories={handleSort(directories)}
+                      files={handleSort(files)}
                       directoryOnClick={handleDirectoryOnClick}
                       fileOnClick={handleFileOnClick}
                       updateDrive={handleUpdateDrive}
@@ -310,10 +402,8 @@ const Drive: FC = () => {
 
                   {driveView === 'list' ? (
                     <DriveListView
-                      directories={handleSort(
-                        directories?.filter(handleSearchFilter)
-                      )}
-                      files={handleSort(files?.filter(handleSearchFilter))}
+                      directories={handleSort(directories)}
+                      files={handleSort(files)}
                       directoryOnClick={handleDirectoryOnClick}
                       fileOnClick={handleFileOnClick}
                       updateDrive={handleUpdateDrive}
diff --git a/src/utils/filename.ts b/src/utils/filename.ts
index 7f607bff..bc682671 100644
--- a/src/utils/filename.ts
+++ b/src/utils/filename.ts
@@ -59,3 +59,11 @@ export function combine(...parts: string[]): string {
 
   return getPathFromParts(parts);
 }
+
+export function constructPath(path: string, folder: string): string {
+  return path?.endsWith('/') ? path + folder : `${path}/${folder}`;
+}
+
+export function rootPathToRelative(path: string): string {
+  return path.startsWith('/') ? path.substring(1) : path;
+}