diff --git a/package.json b/package.json
index 182da9f4c..9bbaf7918 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "teledrive",
-  "version": "1.8.0",
+  "version": "1.8.3",
   "repository": "git@github.com:mgilangjanuar/teledrive.git",
   "author": "M Gilang Januar <mgilangjanuar@gmail.com>",
   "license": "MIT",
diff --git a/server/package.json b/server/package.json
index b8518f09a..b947f5e01 100644
--- a/server/package.json
+++ b/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "server",
-  "version": "1.8.0",
+  "version": "1.8.3",
   "main": "dist/index.js",
   "license": "MIT",
   "private": true,
diff --git a/server/src/api/v1/Files.ts b/server/src/api/v1/Files.ts
index 9fbc4833a..8aac50d43 100644
--- a/server/src/api/v1/Files.ts
+++ b/server/src/api/v1/Files.ts
@@ -18,7 +18,7 @@ export class Files {
 
   @Endpoint.GET('/', { middlewares: [AuthMaybe] })
   public async find(req: Request, res: Response): Promise<any> {
-    const { sort, offset, limit, shared, t: _t, ...filters } = req.query
+    const { sort, offset, limit, shared, exclude_parts: excludeParts, t: _t, ...filters } = req.query
     const parent = filters?.parent_id ? await Model.findOne(filters.parent_id as string) : null
     if (filters?.parent_id && !parent) {
       throw { status: 404, body: { error: 'Parent not found' } }
@@ -39,6 +39,9 @@ export class Files {
       .where(where, {
         user: shared ? req.user?.username : req.user?.id  })
       .andWhere(buildWhereQuery(filters, 'files.') || 'true')
+    if (excludeParts === 'true' || excludeParts === '1') {
+      query = query.andWhere('(files.name ~ \'.part0*1$\' or files.name !~ \'.part[0-9]+$\')')
+    }
     if (shared && where !== 'true') {
       query = query.leftJoin('files.parent', 'parent')
     }
diff --git a/server/src/api/v1/Users.ts b/server/src/api/v1/Users.ts
index b00c3f6d2..2aeb9f2cb 100644
--- a/server/src/api/v1/Users.ts
+++ b/server/src/api/v1/Users.ts
@@ -65,7 +65,7 @@ export class Users {
   @Endpoint.PATCH('/me/settings', { middlewares: [Auth] })
   public async settings(req: Request, res: Response): Promise<any> {
     const { settings } = req.body
-    if (settings.theme === 'dark' && (!req.user.plan || req.user.plan === 'free')) {
+    if (settings.theme === 'dark' && (!req.user.plan || req.user.plan === 'free') && moment().format('l') !== '2/2/2022') {
       throw { status: 402, body: { error: 'You need to upgrade your plan to use dark theme' } }
     }
     req.user.settings = {
diff --git a/web/package.json b/web/package.json
index d572dcf0e..2a8644d7b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "1.8.0",
+  "version": "1.8.3",
   "private": true,
   "dependencies": {
     "@ideasio/add-to-homescreen-react": "^1.0.10",
diff --git a/web/public/index.html b/web/public/index.html
index 4ba5b9fa5..1b0e35f9d 100644
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -31,7 +31,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>TeleDrive - The Free Unlimited Cloud Storage</title>
-    <script async src="https://cdn.splitbee.io/sb.js"></script>
+    <script async defer data-website-id="d189cc62-88d7-46dd-897c-5d5c88e4085b" src="https://analytics.teledriveapp.com/umami.js"></script>
     <style>
       @font-face { font-family: 'Plus Jakarta Display Medium'; src: url('PlusJakartaDisplay-Medium.woff'); }
       @font-face { font-family: 'Plus Jakarta Display Medium'; src: url('PlusJakartaDisplay-Medium.woff2'); }
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 23af0e901..58226eabb 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -12,6 +12,7 @@ import Navbar from './pages/components/Navbar'
 import { fetcher } from './utils/Fetcher'
 
 import 'antd-country-phone-input/dist/index.css'
+import moment from 'moment'
 
 const Dashboard = lazy(
   () => import(/* webpackChunkName: 'DashboardPage' */ './pages/dashboard')
@@ -23,7 +24,7 @@ const Home = lazy(
   () => import(/* webpackChunkName: 'HomePage' */ './pages/Home')
 )
 const View = lazy(
-  () => import(/* webpackChunkName: 'ViewPage' */ './pages/View')
+  () => import(/* webpackChunkName: 'ViewPage' */ './pages/view/index')
 )
 const Login = lazy(
   () => import(/* webpackChunkName: 'LoginPage' */ './pages/Login')
@@ -59,10 +60,12 @@ function App(): React.ReactElement {
   useEffect(() => document.querySelector('.App')?.scrollIntoView(), [pathname])
 
   useEffect(() => {
-    if (me?.user.settings?.theme === 'dark') {
+    if (me?.user.settings?.theme === 'dark' && (moment().format('l') === '2/2/2022' || me?.user.plan && me?.user.plan !== 'free')) {
       switcher({ theme: 'dark' })
-    } else {
+    } else if (me?.user.settings?.theme === 'light') {
       switcher({ theme: 'light' })
+    } else {
+      switcher({ theme: moment().format('l') === '2/2/2022' ? 'dark' : 'light' })
     }
   }, [me])
 
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index d1a1c5c20..4616fe1a9 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -2,6 +2,7 @@ import { ArrowRightOutlined, CloudOutlined, DollarCircleOutlined, SecurityScanOu
 import { Avatar, Button, Card, Carousel, Col, Image, Layout, Row, Space, Tooltip, Typography } from 'antd'
 import millify from 'millify'
 import React, { useEffect, useState } from 'react'
+import { useThemeSwitcher } from 'react-css-theme-switcher'
 import GitHubButton from 'react-github-btn'
 import { useHistory } from 'react-router-dom'
 import { Follow, Tweet } from 'react-twitter-widgets'
@@ -17,6 +18,7 @@ const Home: React.FC<Props> = ({ me }) => {
   const { data } = useSWRImmutable('/github/contributors', fetcher)
   const { data: dataAnalytics } = useSWRImmutable('/utils/simpleAnalytics', fetcher)
   const [visiblePreview, setVisiblePreview] = useState<boolean>()
+  const { currentTheme } = useThemeSwitcher()
   const history = useHistory()
 
   useEffect(() => {
@@ -177,7 +179,7 @@ const Home: React.FC<Props> = ({ me }) => {
                 <Space wrap size={30}>
                   <Tooltip placement="bottom" title="Bahasa.ai - Chatbot Which Serves Customers Fully" key="bahasa-ai">
                     <a href="https://bahasa.ai" target="_blank">
-                      <img style={{ width: '100%', maxWidth: '212px' }} src={me?.user.settings?.theme === 'dark' ? 'https://uploads-ssl.webflow.com/5fb8f118741e70818f103554/5fefb0768f76054a6f40c1e5_Bahasa-ai%20white%20(logo).svg' : 'https://uploads-ssl.webflow.com/5fb8f118741e70818f103554/5feefbc08ef40333bbd2f92e_bahasa-ai-logo-blue%20(2021)%404x-p-500.png'} />
+                      <img style={{ width: '100%', maxWidth: '212px' }} src={currentTheme === 'dark' ? 'https://uploads-ssl.webflow.com/5fb8f118741e70818f103554/5fefb0768f76054a6f40c1e5_Bahasa-ai%20white%20(logo).svg' : 'https://uploads-ssl.webflow.com/5fb8f118741e70818f103554/5feefbc08ef40333bbd2f92e_bahasa-ai-logo-blue%20(2021)%404x-p-500.png'} />
                     </a>
                   </Tooltip>
                   <Tooltip  placement="bottom" title="DigitalOcean – The developer cloud" key="digitalocean">
diff --git a/web/src/pages/Login.tsx b/web/src/pages/Login.tsx
index 1631fb02e..02ee06912 100644
--- a/web/src/pages/Login.tsx
+++ b/web/src/pages/Login.tsx
@@ -1,9 +1,10 @@
-import { ArrowRightOutlined, CheckCircleTwoTone, LoginOutlined, GlobalOutlined } from '@ant-design/icons'
+import { ArrowRightOutlined, CheckCircleTwoTone, GlobalOutlined, LoginOutlined } from '@ant-design/icons'
 import { Button, Card, Col, Collapse, Form, Input, Layout, notification, Row, Spin, Steps, Typography } from 'antd'
 import CountryPhoneInput, { ConfigProvider } from 'antd-country-phone-input'
 import { useForm } from 'antd/lib/form/Form'
 import JSCookie from 'js-cookie'
 import React, { useEffect, useState } from 'react'
+import { useThemeSwitcher } from 'react-css-theme-switcher'
 import OtpInput from 'react-otp-input'
 import QRCode from 'react-qr-code'
 import { useHistory } from 'react-router'
@@ -31,6 +32,7 @@ const Login: React.FC<Props> = ({ me }) => {
   const [method, setMethod] = useState<'phoneNumber' | 'qrCode'>('phoneNumber')
   const { data: _ } = useSWRImmutable('/utils/ipinfo', fetcher, { onSuccess: ({ ipinfo }) => setPhoneData(phoneData?.short ? phoneData : { short: ipinfo?.country || 'ID' }) })
   const [qrCode, setQrCode] = useState<{ loginToken: string, accessToken: string, session?: string }>()
+  const { currentTheme } = useThemeSwitcher()
 
   useEffect(() => {
     if (window.location.host === 'ge.teledriveapp.com') {
@@ -322,7 +324,7 @@ const Login: React.FC<Props> = ({ me }) => {
                       margin: '0 0.3rem 1rem 0',
                       borderRadius: '4px',
                       fontSize: '1.2rem',
-                      background: me?.user.settings?.theme === 'dark' ? 'rgba(255, 255, 255, 0.04)' : undefined,
+                      background: currentTheme === 'dark' ? 'rgba(255, 255, 255, 0.04)' : undefined,
                       border: '1px solid rgba(0, 0, 0, 0.3)' }} />
                     {countdown ? <Typography.Paragraph type="secondary">Re-send in {countdown}s...</Typography.Paragraph> : <Typography.Paragraph>
                       <Button type="link" onClick={() => sendCode()}>Re-send code</Button>
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index 3cc222ce3..173f0fc09 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -3,6 +3,7 @@ import { Avatar, Button, Card, Col, Form, Input, Layout, List, Modal, notificati
 import { useForm } from 'antd/es/form/Form'
 import pwaInstallHandler from 'pwa-install-handler'
 import React, { useEffect, useState } from 'react'
+import { useThemeSwitcher } from 'react-css-theme-switcher'
 import { useHistory } from 'react-router-dom'
 import useSWRImmutable from 'swr/immutable'
 import * as serviceWorkerRegistration from '../serviceWorkerRegistration'
@@ -22,6 +23,7 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
   const [pwa, setPwa] = useState<{ canInstall: boolean, install: () => Promise<boolean> }>()
   const [formRemoval] = useForm()
   const { data: respVersion } = useSWRImmutable('/utils/version', fetcher)
+  const { currentTheme } = useThemeSwitcher()
 
   const save = async (settings: any): Promise<void> => {
     try {
@@ -112,7 +114,7 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
                 </List.Item>
 
                 <List.Item key="dark-mode" actions={[<Form.Item name="dark_mode">
-                  <Switch onChange={(val: boolean) => save({ theme: val ? 'dark' : 'light' }).then(window.location.reload)} checked={me?.user.settings?.theme === 'dark'} defaultChecked={me?.user.settings?.theme === 'dark'} />
+                  <Switch onChange={(val: boolean) => save({ theme: val ? 'dark' : 'light' }).then(window.location.reload)} checked={currentTheme === 'dark'} defaultChecked={currentTheme === 'dark'} />
                 </Form.Item>]}>
                   <List.Item.Meta title="Dark Mode" description="Join the dark side" />
                 </List.Item>
diff --git a/web/src/pages/components/Footer.tsx b/web/src/pages/components/Footer.tsx
index c031ef948..fe7b0bc00 100644
--- a/web/src/pages/components/Footer.tsx
+++ b/web/src/pages/components/Footer.tsx
@@ -1,13 +1,15 @@
 import { GithubOutlined, TwitterOutlined } from '@ant-design/icons'
 import { Button, Col, Divider, Layout, Row, Space, Typography } from 'antd'
 import React from 'react'
+import { useThemeSwitcher } from 'react-css-theme-switcher'
 import { Link } from 'react-router-dom'
 
 interface Props {
   me?: any
 }
 
-const Footer: React.FC<Props> = ({ me }) => {
+const Footer: React.FC<Props> = () => {
+  const { currentTheme } = useThemeSwitcher()
   return <>
     <Layout.Footer style={{ background: '#f0f2f5', paddingTop: '50px' }}>
       <Row>
@@ -16,7 +18,7 @@ const Footer: React.FC<Props> = ({ me }) => {
             <Col md={6} sm={12} span={24} style={{ marginBottom: '30px' }}>
               <Typography.Paragraph>
                 <Button type="link" href="/" style={{ fontSize: '20px', fontWeight: 'bolder' }}
-                  icon={<img src={me?.user.settings?.theme === 'dark' ? '/teledrive-logo/logoteledrive-white.png' : '/teledrive-logo/logoteledrive.png'} style={{ height: '24px' }} />}>
+                  icon={<img src={currentTheme === 'dark' ? '/teledrive-logo/logoteledrive-white.png' : '/teledrive-logo/logoteledrive.png'} style={{ height: '24px' }} />}>
                 </Button>
               </Typography.Paragraph>
               <Typography.Paragraph type="secondary">
diff --git a/web/src/pages/components/Navbar.tsx b/web/src/pages/components/Navbar.tsx
index 37295b066..769708f89 100644
--- a/web/src/pages/components/Navbar.tsx
+++ b/web/src/pages/components/Navbar.tsx
@@ -1,8 +1,9 @@
-import { CrownOutlined, DashboardOutlined, LoginOutlined, LogoutOutlined, MenuOutlined, SettingOutlined, UserOutlined, WarningOutlined } from '@ant-design/icons'
+import { CrownOutlined, LoginOutlined, LogoutOutlined, MenuOutlined, SettingOutlined, UserOutlined, WarningOutlined } from '@ant-design/icons'
 import { Button, Layout, Menu, Modal, Popover, Progress, Tag, Tooltip, Typography } from 'antd'
 import moment from 'moment'
 import prettyBytes from 'pretty-bytes'
 import React, { useState } from 'react'
+import { useThemeSwitcher } from 'react-css-theme-switcher'
 import { useHistory } from 'react-router'
 import { Link } from 'react-router-dom'
 import useSWR from 'swr'
@@ -15,6 +16,7 @@ interface Props {
 
 const Navbar: React.FC<Props> = ({ user }) => {
   const history = useHistory()
+  const { currentTheme } = useThemeSwitcher()
   const [logoutConfirmation, setLogoutConfirmation] = useState<boolean>(false)
   const [popoverVisibility, setPopoverVisibility] = useState<boolean>(false)
   const { data: usage } = useSWR('/users/me/usage', fetcher)
@@ -25,7 +27,7 @@ const Navbar: React.FC<Props> = ({ user }) => {
   }
 
   return <>
-    <Layout.Header style={{ background: user?.settings?.theme === 'dark' ? '#1f1f1f' : '#0088CC', padding: '0 30px' }}>
+    <Layout.Header style={{ background: currentTheme === 'dark' ? '#1f1f1f' : '#0088CC', padding: '0 30px' }}>
       <div key="logo" className="logo" style={{ marginRight: '30px' }}>
         <Link to="/" style={{ color: '#fff' }}>
           <img src="/teledrive-logo/logoteledrive-white.png" style={{ height: '24px' }} /> {user?.plan === 'premium' && <Popover placement="bottom" content={<Layout style={{ padding: '7px 13px' }}>Premium</Layout>}>
@@ -39,7 +41,7 @@ const Navbar: React.FC<Props> = ({ user }) => {
               ? <Tag color="blue">Staging</Tag> : !/^(\w*\.)?teledriveapp\.com$/.test(location.host) && <Tag color="red">Unofficial</Tag>}
         </span>
       </div>
-      {user ?
+      {user ? <>
         <Popover visible={popoverVisibility} onVisibleChange={setPopoverVisibility} placement="bottomRight" trigger={['click']} content={<div>
           <div style={{ padding: '10px' }}>
             Bandwidth usage: { }
@@ -49,24 +51,23 @@ const Navbar: React.FC<Props> = ({ user }) => {
           </div>
           <Menu selectable={false} triggerSubMenuAction="click" onClick={({ key }) => {
             setPopoverVisibility(false)
-            if (key === 'dashboard') {
-              history.push('/dashboard')
-            } else if (key === 'settings') {
+            if (key === 'settings') {
               history.push('/settings')
             } else if (key === 'logout') {
               setLogoutConfirmation(true)
             }
           }}>
-            <Menu.Item key="dashboard" icon={<DashboardOutlined />}>Dashboard</Menu.Item>
             <Menu.Item key="settings" icon={<SettingOutlined />}>Settings</Menu.Item>
             <Menu.Item danger key="logout" icon={<LogoutOutlined />}>Logout</Menu.Item>
           </Menu>
         </div>}>
           <Button type="link" style={{ color: '#ffff', float: 'right', top: '16px' }} icon={<UserOutlined />} />
-        </Popover> :
+        </Popover>
+      </> :
         <Button onClick={() => history.push('/login')} type="link" style={{ color: '#ffff', float: 'right', top: '16px' }} icon={<LoginOutlined />}>Login</Button>}
-      <Menu selectable={false} overflowedIndicator={<MenuOutlined />} mode="horizontal" triggerSubMenuAction="click" theme={user?.settings?.theme === 'dark' ? 'light' : 'dark'}
-        style={{ background: user?.settings?.theme === 'dark' ? '#1f1f1f' : '#0088CC', position: 'relative', display: 'flex', justifyContent: 'right' }}>
+      <Menu selectable={false} overflowedIndicator={<MenuOutlined />} mode="horizontal" triggerSubMenuAction="click" theme={currentTheme === 'dark' ? 'light' : 'dark'}
+        style={{ background: currentTheme === 'dark' ? '#1f1f1f' : '#0088CC', position: 'relative', display: 'flex', justifyContent: 'right' }}>
+        {user && <Menu.Item onClick={() => history.push('/dashboard')} key="dashboard">Dashboard</Menu.Item>}
         <Menu.Item onClick={() => history.push('/pricing')} key="pricing">Pricing</Menu.Item>
         <Menu.Item onClick={() => history.push('/faq')} key="faq">FAQ</Menu.Item>
         <Menu.Item onClick={() => history.push('/contact')} key="contact">Contact Us</Menu.Item>
diff --git a/web/src/pages/dashboard/components/Messaging.tsx b/web/src/pages/dashboard/components/Messaging.tsx
index dd0ba2469..512b00991 100644
--- a/web/src/pages/dashboard/components/Messaging.tsx
+++ b/web/src/pages/dashboard/components/Messaging.tsx
@@ -26,6 +26,7 @@ import {
 } from 'antd'
 import prettyBytes from 'pretty-bytes'
 import React, { useEffect, useRef, useState } from 'react'
+import { useThemeSwitcher } from 'react-css-theme-switcher'
 import { ChatItem, ChatList, MessageBox } from 'react-chat-elements'
 import ReactMarkdown from 'react-markdown'
 import { useHistory, useLocation } from 'react-router'
@@ -64,6 +65,7 @@ const Messaging: React.FC<Props> = ({ me, collapsed, parent, setCollapsed }) =>
   const inputSend = useRef<any | null>()
   const history = useHistory()
   const { search: searchParams } = useLocation()
+  const { currentTheme } = useThemeSwitcher()
 
   const { data: dialogs, mutate: refetchDialogs } = useSWR(!collapsed && !q && !message ? `/dialogs?limit=10${chatListOffset ? `&offset=${chatListOffset}` : ''}` : null, fetcher, { onSuccess: data => {
     setChatListOffset(undefined)
@@ -437,7 +439,7 @@ const Messaging: React.FC<Props> = ({ me, collapsed, parent, setCollapsed }) =>
   }
 
   return <Layout.Sider
-    theme={me?.user.settings?.theme === 'dark' ? 'dark' : 'light'}
+    theme={currentTheme === 'dark' ? 'dark' : 'light'}
     className="messaging"
     trigger={null}
     collapsedWidth={0}
@@ -446,7 +448,7 @@ const Messaging: React.FC<Props> = ({ me, collapsed, parent, setCollapsed }) =>
     style={{
       overflowX: 'hidden',
       boxShadow: '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
-      background: me?.user.settings?.theme === 'dark' ? undefined : 'rgb(240, 242, 245) none repeat scroll 0% 0%',
+      background: currentTheme === 'dark' ? undefined : 'rgb(240, 242, 245) none repeat scroll 0% 0%',
       position: 'absolute',
       right: 0,
       top: 0,
@@ -455,7 +457,7 @@ const Messaging: React.FC<Props> = ({ me, collapsed, parent, setCollapsed }) =>
       overflowY: 'auto',
       zIndex: 1,
       marginBottom: 0 }}>
-    <Layout.Header style={{ background: me?.user.settings?.theme === 'dark' ? '#1f1f1f' : '#0088CC', position: 'fixed', zIndex: 2, padding: '0 15px', width: width || '100%' }}>
+    <Layout.Header style={{ background: currentTheme === 'dark' ? '#1f1f1f' : '#0088CC', position: 'fixed', zIndex: 2, padding: '0 15px', width: width || '100%' }}>
       <div key="logo" className="logo" style={{ display: 'inline', width: '100%' }}>
         <div style={{ float: 'left' }}>
           <Button icon={<ArrowLeftOutlined />} size="large" type="link" style={{ color: '#fff' }} onClick={back} />
diff --git a/web/src/pages/dashboard/components/Upload.tsx b/web/src/pages/dashboard/components/Upload.tsx
index 378bd329d..39a5b99c5 100644
--- a/web/src/pages/dashboard/components/Upload.tsx
+++ b/web/src/pages/dashboard/components/Upload.tsx
@@ -2,6 +2,7 @@ import { CloudUploadOutlined } from '@ant-design/icons'
 import { notification, Upload as BaseUpload } from 'antd'
 import mime from 'mime-types'
 import React, { useEffect, useRef } from 'react'
+import { CHUNK_SIZE, MAX_UPLOAD_SIZE } from '../../../utils/Constant'
 import { req } from '../../../utils/Fetcher'
 
 interface Props {
@@ -38,11 +39,7 @@ const Upload: React.FC<Props> = ({ dataFileList: [fileList, setFileList], parent
       await new Promise(res => setTimeout(res, 3000))
     }
 
-    // const maxSize = 1024 * 1024 * 1024 * 2
-    const maxSize = 2_000_000_000
-    const chunkSize = 512 * 1024
-
-    const fileParts = Math.ceil(file.size / maxSize)
+    const fileParts = Math.ceil(file.size / MAX_UPLOAD_SIZE)
     let deleted = false
 
     try {
@@ -85,11 +82,11 @@ const Upload: React.FC<Props> = ({ dataFileList: [fileList, setFileList], parent
 
       const responses: any[] = []
       let totalParts: number = 0
-      const totalAllParts = Math.ceil(file.size % maxSize / chunkSize) + (fileParts - 1) * Math.ceil(maxSize / chunkSize)
+      const totalAllParts = Math.ceil(file.size % MAX_UPLOAD_SIZE / CHUNK_SIZE) + (fileParts - 1) * Math.ceil(MAX_UPLOAD_SIZE / CHUNK_SIZE)
 
       await Promise.all(Array.from(Array(fileParts).keys()).map(async j => {
-        const fileBlob = file.slice(j * maxSize, Math.min(j * maxSize + maxSize, file.size))
-        const parts = Math.ceil(fileBlob.size / chunkSize)
+        const fileBlob = file.slice(j * MAX_UPLOAD_SIZE, Math.min(j * MAX_UPLOAD_SIZE + MAX_UPLOAD_SIZE, file.size))
+        const parts = Math.ceil(fileBlob.size / CHUNK_SIZE)
 
         if (!deleted) {
           const uploadPart = async (i: number) => {
@@ -105,22 +102,34 @@ const Upload: React.FC<Props> = ({ dataFileList: [fileList, setFileList], parent
               deleted = true
               window.onbeforeunload = undefined as any
             } else {
-              const blobPart = fileBlob.slice(i * chunkSize, Math.min(i * chunkSize + chunkSize, file.size))
+              const blobPart = fileBlob.slice(i * CHUNK_SIZE, Math.min(i * CHUNK_SIZE + CHUNK_SIZE, file.size))
               const data = new FormData()
               data.append('upload', blobPart)
 
-              const { data: response } = await req.post(`/files/upload${i > 0 && responses[j]?.file?.id ? `/${responses[j]?.file.id}` : ''}`, data, {
-                params: {
-                  // ...parent?.id ? { parent_id: parent.link_id || parent.id || undefined } : {},
-                  ...parentId ? { parent_id: parentId } : {},
-                  name: `${file.name}${fileParts > 1 ? `.part${String(j + 1).padStart(3, '0')}` : ''}`,
-                  size: fileBlob.size,
-                  mime_type: file.type || mime.lookup(file.name) || 'application/octet-stream',
-                  part: i,
-                  total_part: parts,
-                },
-              })
-              responses[j] = response
+              const beginUpload = async () => {
+                const { data: response } = await req.post(`/files/upload${i > 0 && responses[j]?.file?.id ? `/${responses[j]?.file.id}` : ''}`, data, {
+                  params: {
+                    ...parentId ? { parent_id: parentId } : {},
+                    name: `${file.name}${fileParts > 1 ? `.part${String(j + 1).padStart(3, '0')}` : ''}`,
+                    size: fileBlob.size,
+                    mime_type: file.type || mime.lookup(file.name) || 'application/octet-stream',
+                    part: i,
+                    total_part: parts,
+                  },
+                })
+                return response
+              }
+
+              let trial = 0
+              while (trial < 10) {
+                try {
+                  responses[j] = await beginUpload()
+                  trial = 10
+                } catch (error) {
+                  await new Promise(res => setTimeout(res, 1500))
+                  trial++
+                }
+              }
 
               const percent = (++totalParts / totalAllParts * 100).toFixed(1)
               onProgress({ percent }, file)
diff --git a/web/src/pages/dashboard/index.tsx b/web/src/pages/dashboard/index.tsx
index 097a0fcb7..964195afb 100644
--- a/web/src/pages/dashboard/index.tsx
+++ b/web/src/pages/dashboard/index.tsx
@@ -69,10 +69,10 @@ const Dashboard: React.FC<PageProps & { me?: any, errorMe?: any }> = ({ match })
 
   const { data: me, error: errorMe } = useSWR('/users/me', fetcher)
   const { data: filesUpload } = useSWR(fileList?.filter(file => file.response?.file)?.length
-    ? `/files?name.notmatch=${encodeURIComponent('\.part0*[2-9]+$')}&sort=created_at:desc&id.in=(${fileList?.filter(file => file.response?.file).map(file => `'${file.response.file.id}'`).join(',')})` : null, fetcher, {
+    ? `/files?exclude_parts=1&sort=created_at:desc&id.in=(${fileList?.filter(file => file.response?.file).map(file => `'${file.response.file.id}'`).join(',')})` : null, fetcher, {
     refreshInterval: 5000
   })
-  const { data: files, mutate: refetch } = useSWR(params ? `/files?name.notmatch=${encodeURIComponent('\.part0*[2-9]+$')}&${qs.stringify(params)}` : null, fetcher, { onSuccess: files => {
+  const { data: files, mutate: refetch } = useSWR(params ? `/files?exclude_parts=1&${qs.stringify(params)}` : null, fetcher, { onSuccess: files => {
     setLoading(false)
     if (files?.files) {
       let newData: any[] = []
diff --git a/web/src/pages/view/components/Error.tsx b/web/src/pages/view/components/Error.tsx
new file mode 100644
index 000000000..3fc9a1053
--- /dev/null
+++ b/web/src/pages/view/components/Error.tsx
@@ -0,0 +1,21 @@
+import { Button, Col, Layout, Result, Row } from 'antd'
+import React from 'react'
+import Footer from '../../components/Footer'
+import Navbar from '../../components/Navbar'
+
+const Error: React.FC<{ error: any, me: any }> = ({ error, me }) => {
+  return <>
+    <Navbar user={me?.user} />
+    <Layout.Content className="container" style={{ minHeight: '80vh', paddingTop: '12vh' }}>
+      <Row>
+        <Col md={{ span: 20, offset: 2 }} span={24}>
+          {error ? <Result status={[403, 404, 500].includes(error?.status) ? error?.status : 500} title={error?.data?.error || 'Something error'} extra={<Button type="primary" href="/">Home</Button>} />
+            : <Result status={404} title="File not found" extra={<Button type="primary" href="/">Home</Button>} />}
+        </Col>
+      </Row>
+    </Layout.Content>
+    <Footer me={me} />
+  </>
+}
+
+export default Error
\ No newline at end of file
diff --git a/web/src/pages/view/components/Icon.tsx b/web/src/pages/view/components/Icon.tsx
new file mode 100644
index 000000000..35bd0e54c
--- /dev/null
+++ b/web/src/pages/view/components/Icon.tsx
@@ -0,0 +1,25 @@
+import {
+  AudioOutlined, FileImageOutlined,
+  FileOutlined,
+  FilePdfOutlined,
+  FolderOpenOutlined, VideoCameraOutlined
+} from '@ant-design/icons'
+import React from 'react'
+
+const Icon: React.FC<{ type: string }> = ({ type }) => {
+  if (type === 'image') {
+    return <FileImageOutlined />
+  } else if (type === 'video') {
+    return <VideoCameraOutlined />
+  } else if (type === 'document') {
+    return <FilePdfOutlined />
+  } else if (type === 'folder') {
+    return <FolderOpenOutlined />
+  } else if (type === 'audio') {
+    return <AudioOutlined />
+  } else {
+    return <FileOutlined />
+  }
+}
+
+export default Icon
\ No newline at end of file
diff --git a/web/src/pages/View.tsx b/web/src/pages/view/components/TableFiles.tsx
similarity index 52%
rename from web/src/pages/View.tsx
rename to web/src/pages/view/components/TableFiles.tsx
index 3ece03da4..4e6973fd2 100644
--- a/web/src/pages/View.tsx
+++ b/web/src/pages/view/components/TableFiles.tsx
@@ -1,79 +1,30 @@
 import {
-  ArrowLeftOutlined,
-  ArrowRightOutlined,
-  AudioOutlined,
-  BranchesOutlined,
-  CopyOutlined,
-  DeleteOutlined,
-  DownloadOutlined,
-  EditOutlined,
-  EllipsisOutlined,
-  FileImageOutlined,
-  FileOutlined,
-  FilePdfOutlined,
-  FolderOpenOutlined,
-  GlobalOutlined,
+  BranchesOutlined, GlobalOutlined,
   HomeOutlined,
-  LinkOutlined,
-  MenuFoldOutlined,
-  MenuUnfoldOutlined,
   ProfileOutlined,
-  ShareAltOutlined,
-  TeamOutlined,
-  VideoCameraOutlined
+  TeamOutlined
 } from '@ant-design/icons'
-import {
-  Button, Col,
-  Descriptions,
-  Divider,
-  Dropdown, Input,
-  Layout, Menu, message,
-  Modal,
-  notification,
-  Result,
-  Row,
-  Space,
-  Spin,
-  Table,
-  TablePaginationConfig,
-  Typography
-} from 'antd'
+import { Button, Col, Descriptions, Input, Layout, Menu, Modal, Row, Table, TablePaginationConfig, Typography } from 'antd'
 import { FilterValue, SorterResult, TableCurrentDataSource } from 'antd/lib/table/interface'
-import * as clipboardy from 'clipboardy'
 import moment from 'moment'
 import prettyBytes from 'pretty-bytes'
-import qs from 'qs'
+import QueryString from 'qs'
 import React, { useEffect, useState } from 'react'
-import { RouteComponentProps, useHistory } from 'react-router'
+import { useHistory } from 'react-router-dom'
 import useSWR from 'swr'
-import useSWRImmutable from 'swr/immutable'
-import { useDebounce } from 'use-debounce/lib'
-import { apiUrl, fetcher } from '../utils/Fetcher'
-import Footer from './components/Footer'
-import Navbar from './components/Navbar'
-import Breadcrumb from './dashboard/components/Breadcrumb'
-import Remove from './dashboard/components/Remove'
-import Rename from './dashboard/components/Rename'
-import Share from './dashboard/components/Share'
+import { fetcher } from '../../../utils/Fetcher'
+import Footer from '../../components/Footer'
+import Navbar from '../../components/Navbar'
+import Breadcrumb from '../../dashboard/components/Breadcrumb'
+import Icon from './Icon'
 
-interface PageProps extends RouteComponentProps<{
-  id: string
-}> {}
+interface Props {
+  me: any,
+  data: any
+}
 
-const View: React.FC<PageProps> = ({ match }) => {
-  const { data: me } = useSWRImmutable('/users/me', fetcher)
-  const [collapsed, setCollapsed] = useState<boolean>()
+const TableFiles: React.FC<Props> = ({ me, data }) => {
   const history = useHistory()
-  const { data, error, mutate } = useSWR(`/files/${match.params.id}`, fetcher)
-  const { data: user } = useSWRImmutable(data?.file ? `/users/${data.file.user_id}` : null, fetcher)
-  const { data: datafilesParts } = useSWR(data?.file.name && /\.part0*\d+$/.test(data.file.name) ? `/files?name.match=${encodeURIComponent('\.part0*[0-9]+$')}&name.like=${data.file.name.replace(/\.part0*\d+$/, '')}%&user_id=${data.file.user_id}${me?.user.id !== data.file.user_id ? '&shared=1' : ''}&parent_id${data.file.parent_id ? `=${data.file.parent_id}` : '.is=null'}` : null, fetcher)
-  const [links, setLinks] = useState<{ raw: string, download: string, share: string }>()
-  const [showContent] = useDebounce(collapsed, 250)
-  const [contentStyle, setContentStyle] = useState<{ display: string } | undefined>()
-  const [selectShare, setSelectShare] = useState<any>()
-  const [fileRename, setFileRename] = useState<any>()
-  const [selectDeleted, setSelectDeleted] = useState<any>()
-
   const [dataChanges, setDataChanges] = useState<{
     pagination?: TablePaginationConfig,
     filters?: Record<string, FilterValue | null>,
@@ -89,7 +40,7 @@ const View: React.FC<PageProps> = ({ match }) => {
   const [showDetails, setShowDetails] = useState<any>()
   const { data: filesParts } = useSWR(showDetails ? `/files?name.match=${encodeURIComponent('\.part0*[0-9]+$')}&name.like=${showDetails.name.replace(/\.part0*\d+$/, '')}%&user_id=${showDetails.user_id}${me?.user.id !== showDetails.user_id ? '&shared=1' : ''}&parent_id${showDetails.parent_id ? `=${showDetails.parent_id}` : '.is=null'}` : null, fetcher)
   const [popup, setPopup] = useState<{ visible: boolean, x?: number, y?: number, row?: any }>()
-  const { data: files, mutate: _refetch } = useSWR(data?.file.type === 'folder' && data?.file.sharing_options?.includes('*') && params ? `/files?name.notmatch=${encodeURIComponent('\.part0*[2-9]+$')}&${qs.stringify(params)}` : null, fetcher, { onSuccess: files => {
+  const { data: files, mutate: _refetch } = useSWR(data?.file.type === 'folder' && data?.file.sharing_options?.includes('*') && params ? `/files?exclude_parts=1&${QueryString.stringify(params)}` : null, fetcher, { onSuccess: files => {
     setLoading(false)
     if (files?.files) {
       let newData: any[] = []
@@ -108,84 +59,6 @@ const View: React.FC<PageProps> = ({ match }) => {
     }
   } })
 
-  useEffect(() => {
-    if (data?.file.type === 'folder') {
-      if (me?.user) {
-        if (data.file.user_id === me.user.id) {
-          return history.replace(`/dashboard?parent=${data.file.id}`)
-        } else if (data.file.shared_options?.includes(me.user.id)) {
-          return history.replace(`/dashboard/shared?parent=${data.file.id}`)
-        }
-      } else if (data.file.sharing_options?.includes('*')) {
-        // setParent(data.file)
-        // setBreadcrumbs([data.file])
-        // const searchParams = new URLSearchParams(window.location.search)
-        // searchParams.set('parent', data.file.id)
-        // return history.replace(`${location.pathname}?${searchParams.toString()}`)
-      }
-    }
-  }, [data, me])
-
-  useEffect(() => {
-    if (data?.file) {
-      setLinks({
-        raw: `${process.env.REACT_APP_API_URL || window.location.origin}/api/v1/files/${match.params.id}?raw=1`,
-        download: `${process.env.REACT_APP_API_URL || window.location.origin}/api/v1/files/${match.params.id}?raw=1&dl=1`,
-        share: `${window.location.origin}/view/${match.params.id}`
-      })
-    }
-  }, [data])
-
-  useEffect(() => {
-    if (collapsed) {
-      setContentStyle({ display: 'none' })
-    }
-  }, [collapsed])
-
-  useEffect(() => {
-    if (!showContent) {
-      setContentStyle(undefined)
-    }
-  }, [showContent])
-
-  useEffect(() => {
-    if (error?.status === 402) {
-      notification.error({
-        message: 'Premium Feature',
-        description: error.data?.error || 'Upgrade your plan to view this file',
-      })
-      return history.replace('/pricing')
-    }
-  }, [error])
-
-  const copy = (val: string) => {
-    clipboardy.write(val)
-    return message.info('Copied!')
-  }
-
-  const back = () => {
-    // if (errorMe) {
-    //   return history.push('/login')
-    // }
-    return history.goBack()
-  }
-
-  const Icon = ({ type }: { type: string }) => {
-    if (type === 'image') {
-      return <FileImageOutlined />
-    } else if (type === 'video') {
-      return <VideoCameraOutlined />
-    } else if (type === 'document') {
-      return <FilePdfOutlined />
-    } else if (type === 'folder') {
-      return <FolderOpenOutlined />
-    } else if (type === 'audio') {
-      return <AudioOutlined />
-    } else {
-      return <FileOutlined />
-    }
-  }
-
   const PAGE_SIZE = 10
 
   const fetch = (pagination?: TablePaginationConfig, filters?: Record<string, FilterValue | null>, sorter?: SorterResult<any> | SorterResult<any>[], actions?: TableCurrentDataSource<any>) => {
@@ -268,18 +141,7 @@ const View: React.FC<PageProps> = ({ match }) => {
     return <></>
   }
 
-  return <>{!data && !error ? <Layout style={{ paddingTop: '45vh', minHeight: '100vh' }}><Spin /></Layout> : error || data && data.file.upload_progress !== null ? <>
-    <Navbar user={me?.user} />
-    <Layout.Content className="container">
-      <Row>
-        <Col md={{ span: 20, offset: 2 }} span={24}>
-          {error ? <Result status={[403, 404, 500].includes(error?.status) ? error?.status : 500} title={error?.data?.error || 'Something error'} extra={<Button type="primary" href="/">Home</Button>} />
-            : <Result status={404} title="File not found" extra={<Button type="primary" href="/">Home</Button>} />}
-        </Col>
-      </Row>
-    </Layout.Content>
-    <Footer me={me} />
-  </> : data?.file.type === 'folder' && data?.file.sharing_options?.includes('*') ? <Layout>
+  return <Layout>
     <Layout.Content>
       <Navbar user={me?.user} />
       <Row style={{ minHeight: '80vh', marginBottom: '100px', padding: '20px 12px 0' }}>
@@ -418,85 +280,7 @@ const View: React.FC<PageProps> = ({ match }) => {
         <Descriptions.Item label="Uploaded At">{moment(showDetails?.uploaded_at).local().format('lll')}</Descriptions.Item>
       </Descriptions>
     </Modal>
-  </Layout> : <>
-    <Layout style={{ minHeight: '100vh', overflow: 'hidden', background: '#2a2a2a', color: 'rgb(251,251,254)' }}>
-      <Layout.Content>
-        {data?.file.type === 'image' ? <img style={{ maxHeight: '100%', maxWidth: '100%', position: 'absolute', margin: 'auto', top: 0, right: 0, bottom: 0, left: 0, imageOrientation: 'from-image' }} src={links?.raw} /> : <iframe onLoad={(e: any) => {
-          try {
-            e.target.contentWindow.document.body.style.margin = 0
-            e.target.contentWindow.document.body.style.color = 'rgb(251,251,254)'
-          } catch (error) {
-            // ignore
-          }
-        }} className="viewContent" style={{ height: '100%', width: '100%', position: 'absolute' }} src={links?.raw} frameBorder={0}>Browser not compatible.</iframe> }
-
-      </Layout.Content>
-      <Layout.Sider width={320} trigger={null} collapsedWidth={0} breakpoint="lg" collapsed={collapsed} onCollapse={setCollapsed}>
-        <Layout.Content className="container" style={{ ...contentStyle || {}, color: '#fff', margin: '70px 10px' }}>
-          <Descriptions
-            title={<Typography.Text style={{ color: '#fff' }}><Icon type={data?.file.type} /> &nbsp; {data?.file.name.replace(/\.part0*\d+$/, '')}</Typography.Text>}
-            contentStyle={{ color: '#fff' }}
-            labelStyle={{ color: '#fff' }} column={1}>
-
-            <Descriptions.Item label="Size">
-              {datafilesParts?.length ? prettyBytes(datafilesParts?.files.reduce((res: number, file: any) => res + Number(file.size), 0)) + ` (${datafilesParts?.length} parts)` : data?.file.size && prettyBytes(Number(data?.file.size || 0))}
-            </Descriptions.Item>
-            <Descriptions.Item label="Uploaded At">{moment(data?.file.uploaded_at).local().format('lll')}</Descriptions.Item>
-            {user?.user && <Descriptions.Item label="Uploaded By">
-              <a href={`https://t.me/${user?.user.username}`} target="_blank">@{user?.user.username}</a>
-            </Descriptions.Item>}
-          </Descriptions>
-          <Divider />
-          <Descriptions colon={false} layout="vertical"
-            labelStyle={{ color: '#fff' }} column={1}>
-            <Descriptions.Item label={<><LinkOutlined /> &nbsp; Raw URL</>}>
-              <Input.Search className="input-search-round" readOnly enterButton={<CopyOutlined />} value={links?.raw} onSearch={copy} />
-            </Descriptions.Item>
-            <Descriptions.Item label={<><DownloadOutlined /> &nbsp; Download URL</>}>
-              <Input.Search className="input-search-round" readOnly enterButton={<CopyOutlined />} value={links?.download} onSearch={copy} />
-            </Descriptions.Item>
-            {data?.file.sharing_options?.length && <Descriptions.Item label={<><ShareAltOutlined /> &nbsp; Share URL</>}>
-              <Input.Search className="input-search-round" readOnly enterButton={<CopyOutlined />} value={links?.share} onSearch={copy} />
-            </Descriptions.Item>}
-          </Descriptions>
-        </Layout.Content>
-      </Layout.Sider>
-      <div style={{ position: 'absolute', right: 20, top: 30 }}>
-        <Space direction="horizontal">
-          {!showContent && <Button shape="circle" icon={<ArrowLeftOutlined />} onClick={back} />}
-          {!showContent && me?.user.id === data?.file.user_id ? <Dropdown placement="bottomCenter" trigger={['click']} overlay={<Menu>
-            <Menu.Item key="rename" onClick={() => setFileRename(data?.file)} icon={<EditOutlined />}>Rename</Menu.Item>
-            <Menu.Item key="share" onClick={() => setSelectShare({ action: 'share', row: data?.file })} icon={<ShareAltOutlined />}>Share</Menu.Item>
-            <Menu.Item key="send" onClick={() => setSelectShare({ action: 'forward', row: data?.file })} icon={<ArrowRightOutlined />}>Send to</Menu.Item>
-            <Menu.Item key="download" onClick={() => location.replace(`${apiUrl}/files/${data?.file.id}?raw=1&dl=1`)} icon={<DownloadOutlined />}>Download</Menu.Item>
-            <Menu.Item key="remove" danger onClick={() => setSelectDeleted([data?.file])} icon={<DeleteOutlined />}>Delete</Menu.Item>
-          </Menu>}>
-            <Button shape="circle" icon={<EllipsisOutlined />} />
-          </Dropdown> : <Button shape="circle" onClick={() => location.replace(`${apiUrl}/files/${data?.file.id}?raw=1&dl=1`)} icon={<DownloadOutlined />} />}
-          <Button shape="circle" icon={collapsed ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />} onClick={() => setCollapsed(!collapsed)} />
-        </Space>
-      </div>
-    </Layout>
-
-    <Rename
-      dataSelect={[fileRename, setFileRename]}
-      onFinish={mutate} />
-
-    <Remove
-      dataSelect={[selectDeleted, setSelectDeleted]}
-      onFinish={() => {
-        if (me?.user.id === data?.file.user_id) {
-          return history.replace(`/dashboard${data?.file.parent_id ? `?parent=${data?.file.parent_id}` : ''}`)
-        } else {
-          return history.replace('/dashboard/shared')
-        }
-      }} />
-
-    <Share
-      me={me}
-      dataSelect={[selectShare, setSelectShare]}
-      onFinish={mutate} />
-  </>}</>
+  </Layout>
 }
 
-export default View
\ No newline at end of file
+export default TableFiles
\ No newline at end of file
diff --git a/web/src/pages/view/components/Viewer.tsx b/web/src/pages/view/components/Viewer.tsx
new file mode 100644
index 000000000..6671a643b
--- /dev/null
+++ b/web/src/pages/view/components/Viewer.tsx
@@ -0,0 +1,179 @@
+import {
+  ArrowLeftOutlined,
+  ArrowRightOutlined,
+  CopyOutlined,
+  DeleteOutlined,
+  DownloadOutlined,
+  EditOutlined,
+  EllipsisOutlined,
+  LinkOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  ShareAltOutlined
+} from '@ant-design/icons'
+import {
+  Button, Descriptions,
+  Divider,
+  Dropdown, Input,
+  Layout, Menu, message, notification, Space, Typography
+} from 'antd'
+import * as clipboardy from 'clipboardy'
+import moment from 'moment'
+import prettyBytes from 'pretty-bytes'
+import React, { useEffect, useState } from 'react'
+import { useHistory } from 'react-router'
+import useSWR from 'swr'
+import useSWRImmutable from 'swr/immutable'
+import { useDebounce } from 'use-debounce/lib'
+import { apiUrl, fetcher } from '../../../utils/Fetcher'
+import Remove from '../../dashboard/components/Remove'
+import Rename from '../../dashboard/components/Rename'
+import Share from '../../dashboard/components/Share'
+import Icon from './Icon'
+
+interface Props {
+  me: any,
+  data: any,
+  error: any,
+  mutate: () => void,
+  pageParams: { id: string }
+}
+
+const Viewer: React.FC<Props> = ({ data, me, error, mutate, pageParams }) => {
+  const history = useHistory()
+  const [collapsed, setCollapsed] = useState<boolean>()
+  const { data: user } = useSWRImmutable(data?.file ? `/users/${data.file.user_id}` : null, fetcher)
+  const { data: datafilesParts } = useSWR(data?.file.name && /\.part0*\d+$/.test(data.file.name) ? `/files?name.match=${encodeURIComponent('\.part0*[0-9]+$')}&name.like=${data.file.name.replace(/\.part0*\d+$/, '')}%&user_id=${data.file.user_id}${me?.user.id !== data.file.user_id ? '&shared=1' : ''}&parent_id${data.file.parent_id ? `=${data.file.parent_id}` : '.is=null'}` : null, fetcher)
+  const [links, setLinks] = useState<{ raw: string, download: string, share: string }>()
+  const [showContent] = useDebounce(collapsed, 250)
+  const [contentStyle, setContentStyle] = useState<{ display: string } | undefined>()
+  const [selectShare, setSelectShare] = useState<any>()
+  const [fileRename, setFileRename] = useState<any>()
+  const [selectDeleted, setSelectDeleted] = useState<any>()
+
+  useEffect(() => {
+    if (data?.file) {
+      setLinks({
+        raw: `${process.env.REACT_APP_API_URL || window.location.origin}/api/v1/files/${pageParams.id}?raw=1`,
+        download: `${process.env.REACT_APP_API_URL || window.location.origin}/api/v1/files/${pageParams.id}?raw=1&dl=1`,
+        share: `${window.location.origin}/view/${pageParams.id}`
+      })
+    }
+  }, [data])
+
+  useEffect(() => {
+    if (collapsed) {
+      setContentStyle({ display: 'none' })
+    }
+  }, [collapsed])
+
+  useEffect(() => {
+    if (!showContent) {
+      setContentStyle(undefined)
+    }
+  }, [showContent])
+
+  useEffect(() => {
+    if (error?.status === 402) {
+      notification.error({
+        message: 'Premium Feature',
+        description: error.data?.error || 'Upgrade your plan to view this file',
+      })
+      return history.replace('/pricing')
+    }
+  }, [error])
+
+  const copy = (val: string) => {
+    clipboardy.write(val)
+    return message.info('Copied!')
+  }
+
+  const back = () => {
+    // if (errorMe) {
+    //   return history.push('/login')
+    // }
+    return history.goBack()
+  }
+
+  return <>
+    <Layout style={{ minHeight: '100vh', overflow: 'hidden', background: '#2a2a2a', color: 'rgb(251,251,254)' }}>
+      <Layout.Content>
+        {data?.file.type === 'image' ? <img style={{ maxHeight: '100%', maxWidth: '100%', position: 'absolute', margin: 'auto', top: 0, right: 0, bottom: 0, left: 0, imageOrientation: 'from-image' }} src={links?.raw} /> : <iframe onLoad={(e: any) => {
+          try {
+            e.target.contentWindow.document.body.style.margin = 0
+            e.target.contentWindow.document.body.style.color = 'rgb(251,251,254)'
+          } catch (error) {
+            // ignore
+          }
+        }} className="viewContent" style={{ height: '100%', width: '100%', position: 'absolute' }} src={links?.raw} frameBorder={0}>Browser not compatible.</iframe> }
+
+      </Layout.Content>
+      <Layout.Sider width={320} trigger={null} collapsedWidth={0} breakpoint="lg" collapsed={collapsed} onCollapse={setCollapsed}>
+        <Layout.Content className="container" style={{ ...contentStyle || {}, color: '#fff', margin: '70px 10px' }}>
+          <Descriptions
+            title={<Typography.Text style={{ color: '#fff' }}><Icon type={data?.file.type} /> &nbsp; {data?.file.name.replace(/\.part0*\d+$/, '')}</Typography.Text>}
+            contentStyle={{ color: '#fff' }}
+            labelStyle={{ color: '#fff' }} column={1}>
+
+            <Descriptions.Item label="Size">
+              {datafilesParts?.length ? prettyBytes(datafilesParts?.files.reduce((res: number, file: any) => res + Number(file.size), 0)) + ` (${datafilesParts?.length} parts)` : data?.file.size && prettyBytes(Number(data?.file.size || 0))}
+            </Descriptions.Item>
+            <Descriptions.Item label="Uploaded At">{moment(data?.file.uploaded_at).local().format('lll')}</Descriptions.Item>
+            {user?.user && <Descriptions.Item label="Uploaded By">
+              <a href={`https://t.me/${user?.user.username}`} target="_blank">@{user?.user.username}</a>
+            </Descriptions.Item>}
+          </Descriptions>
+          <Divider />
+          <Descriptions colon={false} layout="vertical"
+            labelStyle={{ color: '#fff' }} column={1}>
+            <Descriptions.Item label={<><LinkOutlined /> &nbsp; Raw URL</>}>
+              <Input.Search className="input-search-round" readOnly enterButton={<CopyOutlined />} value={links?.raw} onSearch={copy} />
+            </Descriptions.Item>
+            <Descriptions.Item label={<><DownloadOutlined /> &nbsp; Download URL</>}>
+              <Input.Search className="input-search-round" readOnly enterButton={<CopyOutlined />} value={links?.download} onSearch={copy} />
+            </Descriptions.Item>
+            {data?.file.sharing_options?.length && <Descriptions.Item label={<><ShareAltOutlined /> &nbsp; Share URL</>}>
+              <Input.Search className="input-search-round" readOnly enterButton={<CopyOutlined />} value={links?.share} onSearch={copy} />
+            </Descriptions.Item>}
+          </Descriptions>
+        </Layout.Content>
+      </Layout.Sider>
+      <div style={{ position: 'absolute', right: 20, top: 30 }}>
+        <Space direction="horizontal">
+          {!showContent && <Button shape="circle" icon={<ArrowLeftOutlined />} onClick={back} />}
+          {!showContent && me?.user.id === data?.file.user_id ? <Dropdown placement="bottomCenter" trigger={['click']} overlay={<Menu>
+            <Menu.Item key="rename" onClick={() => setFileRename(data?.file)} icon={<EditOutlined />}>Rename</Menu.Item>
+            <Menu.Item key="share" onClick={() => setSelectShare({ action: 'share', row: data?.file })} icon={<ShareAltOutlined />}>Share</Menu.Item>
+            <Menu.Item key="send" onClick={() => setSelectShare({ action: 'forward', row: data?.file })} icon={<ArrowRightOutlined />}>Send to</Menu.Item>
+            <Menu.Item key="download" onClick={() => location.replace(`${apiUrl}/files/${data?.file.id}?raw=1&dl=1`)} icon={<DownloadOutlined />}>Download</Menu.Item>
+            <Menu.Item key="remove" danger onClick={() => setSelectDeleted([data?.file])} icon={<DeleteOutlined />}>Delete</Menu.Item>
+          </Menu>}>
+            <Button shape="circle" icon={<EllipsisOutlined />} />
+          </Dropdown> : <Button shape="circle" onClick={() => location.replace(`${apiUrl}/files/${data?.file.id}?raw=1&dl=1`)} icon={<DownloadOutlined />} />}
+          <Button shape="circle" icon={collapsed ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />} onClick={() => setCollapsed(!collapsed)} />
+        </Space>
+      </div>
+    </Layout>
+
+    <Rename
+      dataSelect={[fileRename, setFileRename]}
+      onFinish={mutate} />
+
+    <Remove
+      dataSelect={[selectDeleted, setSelectDeleted]}
+      onFinish={() => {
+        if (me?.user.id === data?.file.user_id) {
+          return history.replace(`/dashboard${data?.file.parent_id ? `?parent=${data?.file.parent_id}` : ''}`)
+        } else {
+          return history.replace('/dashboard/shared')
+        }
+      }} />
+
+    <Share
+      me={me}
+      dataSelect={[selectShare, setSelectShare]}
+      onFinish={mutate} />
+  </>
+}
+
+export default Viewer
\ No newline at end of file
diff --git a/web/src/pages/view/index.tsx b/web/src/pages/view/index.tsx
new file mode 100644
index 000000000..f251d2285
--- /dev/null
+++ b/web/src/pages/view/index.tsx
@@ -0,0 +1,47 @@
+import { Layout, Spin } from 'antd'
+import React, { useEffect } from 'react'
+import { RouteComponentProps, useHistory } from 'react-router'
+import useSWR from 'swr'
+import useSWRImmutable from 'swr/immutable'
+import { fetcher } from '../../utils/Fetcher'
+import Error from './components/Error'
+import TableFiles from './components/TableFiles'
+import Viewer from './components/Viewer'
+
+interface PageProps extends RouteComponentProps<{
+  id: string
+}> {}
+
+const View: React.FC<PageProps> = ({ match }) => {
+  const history = useHistory()
+  const { data: me } = useSWRImmutable('/users/me', fetcher)
+  const { data, error, mutate } = useSWR(`/files/${match.params.id}`, fetcher)
+
+  useEffect(() => {
+    if (data?.file.type === 'folder') {
+      if (me?.user) {
+        if (data.file.user_id === me.user.id) {
+          return history.replace(`/dashboard?parent=${data.file.id}`)
+        } else if (data.file.shared_options?.includes(me.user.id)) {
+          return history.replace(`/dashboard/shared?parent=${data.file.id}`)
+        }
+      } else if (data.file.sharing_options?.includes('*')) {
+        // setParent(data.file)
+        // setBreadcrumbs([data.file])
+        // const searchParams = new URLSearchParams(window.location.search)
+        // searchParams.set('parent', data.file.id)
+        // return history.replace(`${location.pathname}?${searchParams.toString()}`)
+      }
+    }
+  }, [data, me])
+
+  return <>{!data && !error
+    ? <Layout style={{ paddingTop: '45vh', minHeight: '100vh' }}><Spin /></Layout>
+    : error || data && data.file.upload_progress !== null
+      ? <Error error={error} me={me} />
+      : data?.file.type === 'folder' && data?.file.sharing_options?.includes('*')
+        ? <TableFiles me={me} data={data} />
+        : <Viewer me={me} data={data} error={error} mutate={mutate} pageParams={match.params} />}</>
+}
+
+export default View
\ No newline at end of file
diff --git a/web/src/utils/Constant.ts b/web/src/utils/Constant.ts
new file mode 100644
index 000000000..05c4ca711
--- /dev/null
+++ b/web/src/utils/Constant.ts
@@ -0,0 +1,2 @@
+export const MAX_UPLOAD_SIZE = 2_000_000_000
+export const CHUNK_SIZE = 512 * 1024
\ No newline at end of file