diff --git a/tdrive/frontend/src/app/components/search-popup/parts/drive-item-result.tsx b/tdrive/frontend/src/app/components/search-popup/parts/drive-item-result.tsx
index 8e0b3ad4..f85f2f66 100644
--- a/tdrive/frontend/src/app/components/search-popup/parts/drive-item-result.tsx
+++ b/tdrive/frontend/src/app/components/search-popup/parts/drive-item-result.tsx
@@ -15,6 +15,7 @@ import {
 } from '@atoms/icons-colored';
 import * as Text from '@atoms/text';
 import { useCompanyApplications } from '@features/applications/hooks/use-company-applications';
+import useRouterCompany from '@features/router/hooks/use-router-company';
 import { DriveItem } from '@features/drive/types';
 import FileUploadAPIClient from '@features/files/api/file-upload-api-client';
 import { formatDate } from '@features/global/utils/format-date';
@@ -27,8 +28,11 @@ import { useFileViewerModal } from '@features/viewer/hooks/use-viewer';
 import { useDrivePreview } from '@features/drive/hooks/use-drive-preview';
 import Media from '@molecules/media';
 import { DriveCurrentFolderAtom } from '@views/client/body/drive/browser';
+import { useHistory } from 'react-router-dom';
+import RouterServices from '@features/router/services/router-service';
 
 export default (props: { driveItem: DriveItem & { user?: UserType } }) => {
+  const history = useHistory();
   const input = useRecoilValue(SearchInputState);
   const currentWorkspaceId = useRouterWorkspace();
   const companyApplications = useCompanyApplications();
@@ -44,11 +48,12 @@ export default (props: { driveItem: DriveItem & { user?: UserType } }) => {
   const { setOpen } = useSearchModal();
   const { open: openViewer } = useFileViewerModal();
   const { open } = useDrivePreview();
+  const company = useRouterCompany();
 
   return (
     <div
       className="flex items-center p-2 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-md cursor-pointer"
-      onClick={() => open(file)}
+      onClick={() => {history.push(RouterServices.generateRouteFromState({companyId: company, itemId: file.id})); open(file)}}
     >
       <FileResultMedia file={file} className="w-16 h-16 mr-3" />
       <div className="grow mr-3 overflow-hidden">
diff --git a/tdrive/frontend/src/app/features/drive/hooks/use-drive-preview.ts b/tdrive/frontend/src/app/features/drive/hooks/use-drive-preview.ts
index 8238182c..dd4d751d 100644
--- a/tdrive/frontend/src/app/features/drive/hooks/use-drive-preview.ts
+++ b/tdrive/frontend/src/app/features/drive/hooks/use-drive-preview.ts
@@ -6,8 +6,13 @@ import { useRecoilState } from 'recoil';
 import { DriveApiClient } from '../api-client/api-client';
 import { DriveViewerState } from '../state/viewer';
 import { DriveItem } from '../types';
+import { useHistory } from 'react-router-dom';
+import RouterServices from '@features/router/services/router-service';
+import useRouterCompany from '@features/router/hooks/use-router-company';
 
 export const useDrivePreviewModal = () => {
+  const history = useHistory();
+  const company = useRouterCompany();
   const [status, setStatus] = useRecoilState(DriveViewerState);
 
   const open: (item: DriveItem) => void = (item: DriveItem) => {
@@ -16,7 +21,10 @@ export const useDrivePreviewModal = () => {
     }
   };
 
-  const close = () => setStatus({ item: null, loading: true });
+  const close = () => {
+    setStatus({ item: null, loading: true });
+    history.push(RouterServices.generateRouteFromState({companyId: company, viewId: "", itemId: ""}));
+  }
 
   return { open, close, isOpen: !!status.item };
 };
diff --git a/tdrive/frontend/src/app/features/router/services/router-service.ts b/tdrive/frontend/src/app/features/router/services/router-service.ts
index 2e70c678..06235326 100644
--- a/tdrive/frontend/src/app/features/router/services/router-service.ts
+++ b/tdrive/frontend/src/app/features/router/services/router-service.ts
@@ -26,6 +26,7 @@ export type RouteType = {
 export type ClientStateType = {
   companyId?: string;
   viewId?: string;
+  itemId?: string;
   workspaceId?: string;
   channelId?: string;
   messageId?: string;
@@ -49,6 +50,7 @@ class RouterServices extends Observable {
   clientSubPathnames: Readonly<string[]> = [
     '/client/:companyId',
     '/client/:companyId/v/:viewId',
+    '/client/:companyId/preview/:itemId',
     '/client/:companyId/w/:workspaceId',
     '/client/:companyId/w/:workspaceId/c/:channelId',
     '/client/:companyId/w/:workspaceId/c/:channelId/t/:threadId',
@@ -73,6 +75,7 @@ class RouterServices extends Observable {
 
   UUIDsToTranslate: Readonly<string[]> = [
     'companyId',
+    'itemId',
     'workspaceId',
     'channelId',
     'messageId',
@@ -180,6 +183,7 @@ class RouterServices extends Observable {
     const reducedState: any = {
       companyId: match?.params?.companyId || '',
       viewId: match?.params?.viewId || '',
+      itemId: match?.params?.itemId || '',
       workspaceId: match?.params?.workspaceId || '',
       channelId: match?.params?.channelId || '',
       messageId: match?.params?.messageId || '',
@@ -285,6 +289,7 @@ class RouterServices extends Observable {
       `${this.pathnames.CLIENT}` +
       (state.companyId ? `/${state.companyId}` : '') +
       (state.viewId ? `/v/${state.viewId}` : '') +
+      (state.itemId ? `/preview/${state.itemId}` : '') +
       (state.sharedWithMe ? `/shared-with-me` : '') +
       (state.workspaceId ? `/w/${state.workspaceId}` : '') +
       (state.channelId ? `/c/${state.channelId}` : '') +
diff --git a/tdrive/frontend/src/app/features/router/state/selectors/router-selector.ts b/tdrive/frontend/src/app/features/router/state/selectors/router-selector.ts
index 940b7eca..0464fcef 100644
--- a/tdrive/frontend/src/app/features/router/state/selectors/router-selector.ts
+++ b/tdrive/frontend/src/app/features/router/state/selectors/router-selector.ts
@@ -11,6 +11,11 @@ export const RouteViewSelector = selector<string>({
   get: ({ get }) => get(RouterState)?.viewId || '',
 });
 
+export const RoutePreviewSelector = selector<string>({
+  key: 'RouterPreviewSelector',
+  get: ({ get }) => get(RouterState)?.itemId || '',
+});
+
 export const RouterWorkspaceSelector = selector<string>({
   key: 'RouterWorkspaceSelector',
   get: ({ get }) => get(RouterState)?.workspaceId || '',
diff --git a/tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx b/tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx
index 3bda2df3..2bc65396 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx
@@ -12,14 +12,18 @@ import {
 } from '@atoms/icons-colored';
 import { Base, BaseSmall } from '@atoms/text';
 import Menu from '@components/menus/menu';
+import useRouterCompany from '@features/router/hooks/use-router-company';
 import { useDrivePreview } from '@features/drive/hooks/use-drive-preview';
 import { formatBytes } from '@features/drive/utils';
 import fileUploadApiClient from '@features/files/api/file-upload-api-client';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Avatar from '../../../../../atoms/avatar';
 import { PublicIcon } from '../components/public-icon';
 import { CheckableIcon, DriveItemProps } from './common';
 import { getDevice } from '../../../../../features/global/utils/device';
+import { useHistory } from 'react-router-dom';
+import RouterServices from '@features/router/services/router-service';
+import useRouteState from 'app/features/router/hooks/use-route-state';
 
 export const DocumentRow = ({
   item,
@@ -29,8 +33,11 @@ export const DocumentRow = ({
   onClick,
   onBuildContextMenu,
 }: DriveItemProps) => {
+  const history = useHistory();
   const [hover, setHover] = useState(false);
   const { open } = useDrivePreview();
+  const company = useRouterCompany();
+  const { itemId } = useRouteState();
 
   const fileType = fileUploadApiClient.mimeToType(
     item?.last_version_cache?.file_metadata?.mime || '',
@@ -39,10 +46,17 @@ export const DocumentRow = ({
   const metadata = item.last_version_cache?.file_metadata || {};
   const hasThumbnails = !!metadata.thumbnails?.length || false;
 
+  useEffect(() => {
+    if(itemId == item.id) {
+      open(item);
+    }
+  }, [itemId]);
+
   const preview = () => {
     const device = getDevice();
     console.log("DEVICE:: " + device);
     if (device != "ios" && device != "android") {
+      history.push(RouterServices.generateRouteFromState({companyId: company, viewId: "", itemId: item.id}));
       open(item);
     }
   };
diff --git a/tdrive/frontend/src/app/views/client/side-bar/index.tsx b/tdrive/frontend/src/app/views/client/side-bar/index.tsx
index b337dc38..9c6a6105 100644
--- a/tdrive/frontend/src/app/views/client/side-bar/index.tsx
+++ b/tdrive/frontend/src/app/views/client/side-bar/index.tsx
@@ -9,6 +9,7 @@ import {
   UserIcon,
   UserGroupIcon,
 } from '@heroicons/react/outline';
+import { useEffect } from 'react';
 import useRouterCompany from '@features/router/hooks/use-router-company';
 import useRouterWorkspace from '@features/router/hooks/use-router-workspace';
 import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
@@ -23,7 +24,6 @@ import Actions from './actions';
 import { useHistory, useLocation } from 'react-router-dom';
 import RouterServices from '@features/router/services/router-service';
 import Languages from "features/global/services/languages-service";
-import shared from '../body/drive/shared';
 
 export default () => {
   const history = useHistory();
@@ -42,7 +42,10 @@ export default () => {
   if ((path || [])[0]?.id === 'user_' + user?.id) folderType = 'personal';
   if (inTrash) folderType = 'trash';
   if (sharedWithMe) folderType = 'shared';
-  const { viewId } = RouterServices.getStateFromRoute();
+  const { viewId, itemId } = RouterServices.getStateFromRoute();
+  useEffect(() => {
+    !itemId && viewId && setParentId(viewId);
+  }, [viewId, itemId]);
   return (
     <div className="grow flex flex-col overflow-auto -m-4 p-4 relative">
       <div className="grow">
@@ -63,7 +66,7 @@ export default () => {
         <div className="mt-4" />
         <Title>Drive</Title>
         <Button
-          onClick={() => {history.push(RouterServices.generateRouteFromState({companyId: company, viewId: ""})); setParentId('user_' + user?.id)}}
+          onClick={() => {history.push(RouterServices.generateRouteFromState({companyId: company, viewId: 'user_' + user?.id})); setParentId('user_' + user?.id)}}
           size="lg"
           theme="white"
           className={'w-full mb-1 ' + (folderType === 'personal' && viewId == '' ? activeClass : '')}
@@ -71,15 +74,15 @@ export default () => {
           <UserIcon className="w-5 h-5 mr-4" /> {Languages.t('components.side_menu.my_drive')}
         </Button>
         <Button
-          onClick={() => {history.push(RouterServices.generateRouteFromState({companyId: company, viewId: ""})); setParentId('root')}}
+          onClick={() => {history.push(RouterServices.generateRouteFromState({companyId: company, viewId: "root"})); setParentId('root')}}
           size="lg"
           theme="white"
-          className={'w-full mt-2 mb-1 ' + (folderType === 'home' && viewId == '' ? activeClass : '')}
+          className={'w-full mb-1 ' + (folderType === 'home' && viewId == '' ? activeClass : '')}
         >
           <CloudIcon className="w-5 h-5 mr-4" /> {Languages.t('components.side_menu.home')}
         </Button>
         <Button
-          onClick={() => {setParentId('shared_with_me')}}
+          onClick={() => {history.push(RouterServices.generateRouteFromState({companyId: company, viewId: "shared_with_me"})); setParentId('shared_with_me')}}
           size="lg"
           theme="white"
           className={'w-full mb-1 ' + (folderType === 'shared' && viewId == ''? activeClass : '')}