diff --git a/package-lock.json b/package-lock.json
index e03d6a413..c63b56171 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9455,9 +9455,9 @@
       "dev": true
     },
     "dnd-core": {
-      "version": "10.0.2",
-      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-10.0.2.tgz",
-      "integrity": "sha512-PrxEjxF0+6Y1n1n1Z9hSWZ1tvnDXv9syL+BccV1r1RC08uWNsyetf8AnWmUF3NgYPwy0HKQJwTqGkZK+1NlaFA==",
+      "version": "11.1.3",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-11.1.3.tgz",
+      "integrity": "sha512-QugF55dNW+h+vzxVJ/LSJeTeUw9MCJ2cllhmVThVPEtF16ooBkxj0WBE5RB+AceFxMFo1rO6bJKXtqKl+JNnyA==",
       "requires": {
         "@react-dnd/asap": "^4.0.0",
         "@react-dnd/invariant": "^2.0.0",
@@ -16075,8 +16075,7 @@
     "it-first": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/it-first/-/it-first-1.0.2.tgz",
-      "integrity": "sha512-hU5ObR14987PR7l0J7dfWAgKYiWoKbXcoXKqhQDGgHSZML6UPmHSS9ILBGucZkoA2B152kEqEOllS4tVQq11fg==",
-      "dev": true
+      "integrity": "sha512-hU5ObR14987PR7l0J7dfWAgKYiWoKbXcoXKqhQDGgHSZML6UPmHSS9ILBGucZkoA2B152kEqEOllS4tVQq11fg=="
     },
     "it-glob": {
       "version": "0.0.8",
@@ -22774,22 +22773,22 @@
       }
     },
     "react-dnd": {
-      "version": "10.0.2",
-      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-10.0.2.tgz",
-      "integrity": "sha512-SC2Ymvntynhoqtf5zaFhZscm9xenCoMofilxPdlwUlaelAzmbl9fw82C4ZJ//+lNm3kWAKXjGDZg2/aWjKEAtg==",
+      "version": "11.1.3",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-11.1.3.tgz",
+      "integrity": "sha512-8rtzzT8iwHgdSC89VktwhqdKKtfXaAyC4wiqp0SywpHG12TTLvfOoL6xNEIUWXwIEWu+CFfDn4GZJyynCEuHIQ==",
       "requires": {
         "@react-dnd/shallowequal": "^2.0.0",
         "@types/hoist-non-react-statics": "^3.3.1",
-        "dnd-core": "^10.0.2",
+        "dnd-core": "^11.1.3",
         "hoist-non-react-statics": "^3.3.0"
       }
     },
     "react-dnd-html5-backend": {
-      "version": "10.0.2",
-      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-10.0.2.tgz",
-      "integrity": "sha512-ny17gUdInZ6PIGXdzfwPhoztRdNVVvjoJMdG80hkDBamJBeUPuNF2Wv4D3uoQJLjXssX1+i9PhBqc7EpogClwQ==",
+      "version": "11.1.3",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-11.1.3.tgz",
+      "integrity": "sha512-/1FjNlJbW/ivkUxlxQd7o3trA5DE33QiRZgxent3zKme8DwF4Nbw3OFVhTRFGaYhHFNL1rZt6Rdj1D78BjnNLw==",
       "requires": {
-        "dnd-core": "^10.0.2"
+        "dnd-core": "^11.1.3"
       }
     },
     "react-docgen": {
diff --git a/package.json b/package.json
index f5a7d2439..11835faed 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "is-binary": "^0.1.0",
     "is-ipfs": "^1.0.3",
     "it-all": "^1.0.2",
+    "it-first": "^1.0.2",
     "it-last": "^1.0.2",
     "it-map": "^1.0.2",
     "milliseconds": "^1.0.3",
@@ -68,8 +69,8 @@
     "react-copy-to-clipboard": "^5.0.2",
     "react-country-flag": "^1.1.0",
     "react-debounce-render": "^5.0.0",
-    "react-dnd": "^10.0.2",
-    "react-dnd-html5-backend": "^10.0.2",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
     "react-dom": "^16.13.1",
     "react-faux-dom": "^4.5.0",
     "react-helmet": "^5.2.1",
diff --git a/public/locales/en/files.json b/public/locales/en/files.json
index 5e0c6a60f..dcedc86b9 100644
--- a/public/locales/en/files.json
+++ b/public/locales/en/files.json
@@ -91,7 +91,10 @@
     },
     "step2": {
       "title": "Breadcrumbs",
-      "paragraph1": "The current work directory, you can navigate through the folder hierarchy by clicking on them."
+      "paragraph1": "These breadcrumbs display the path to your current directory. You can…",
+      "bullet1": "Click an individual breadcrumb to go to that directory",
+      "bullet2": "Right-click a breadcrumb to get the actions menu for that directory",
+      "bullet3": "Drag files onto a breadcrumb to move or import them"
     },
     "step3": {
       "title": "Add files",
diff --git a/public/locales/en/notify.json b/public/locales/en/notify.json
index 49a6e90e2..5f1e943a6 100644
--- a/public/locales/en/notify.json
+++ b/public/locales/en/notify.json
@@ -4,7 +4,7 @@
   "ipfsApiRequestFailed": "Could not connect. Please check if your daemon is running.",
   "windowIpfsRequestFailed": "IPFS request failed. Please check your IPFS Companion settings.",
   "ipfsIsBack": "Normal IPFS service has resumed. Enjoy!",
-  "folderExists": "A folder with that name already exists. Please choose another.",
+  "folderExists": "An item with that name already exists. Please choose another.",
   "filesFetchFailed": "Failed to get those files. Please check the path and try again.",
   "filesRenameFailed": "Failed to rename the files. Please try again.",
   "filesMakeDirFailed": "Failed to create directory. Please try again.",
diff --git a/src/bundles/ipfs-provider.js b/src/bundles/ipfs-provider.js
index a673f5fed..1a0532154 100644
--- a/src/bundles/ipfs-provider.js
+++ b/src/bundles/ipfs-provider.js
@@ -3,6 +3,7 @@
 import multiaddr from 'multiaddr'
 import HttpClient from 'ipfs-http-client'
 import { getIpfs, providers } from 'ipfs-provider'
+import first from 'it-first'
 import last from 'it-last'
 
 /**
@@ -169,9 +170,12 @@ const writeSetting = (id, value) => {
 /**
  * @typedef {Object} IPFSAPI
  * @property {(callback?:Function) => Promise<void>} stop
+ * @property {Object} files
+ * @property {(path:string) => Promise<Object>} files.stat
+ * @property {Object} pin
+ * @property {(options:Object) => Iterator} pin.ls
  */
-
-/** @type {IPFSAPI|void} */
+/** @type {IPFSAPI|null} */
 let ipfs = null
 
 /**
@@ -232,6 +236,17 @@ const bundle = {
 
   doDismissIpfsInvalidAddress: () => (store) => {
     store.dispatch({ type: 'IPFS_API_ADDRESS_INVALID_DISMISS' })
+  },
+
+  doGetPathInfo: (path) => async () => {
+    return await ipfs.files.stat(path)
+  },
+
+  doCheckIfPinned: (cid) => async () => {
+    try {
+      const value = await first(ipfs.pin.ls({ paths: [cid] }))
+      return !!value
+    } catch (_) { return false }
   }
 }
 
diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index ad25a0295..5e439af52 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -225,7 +225,7 @@ class FilesPage extends React.Component {
           translateX={contextMenu.translateX}
           translateY={contextMenu.translateY}
           handleClick={this.handleContextMenu}
-          isUpperDir={contextMenu.file && contextMenu.file.name === '..'}
+          isDirectory={contextMenu.file && contextMenu.file.type === 'directory'}
           isMfs={filesPathInfo ? filesPathInfo.isMfs : false}
           isUnknown={!!(contextMenu.file && contextMenu.file.type === 'unknown')}
           pinned={contextMenu.file && contextMenu.file.pinned}
@@ -246,6 +246,7 @@ class FilesPage extends React.Component {
           files={files}
           onNavigate={this.props.doFilesNavigateTo}
           onAddFiles={this.onAddFiles}
+          onMove={this.props.doFilesMove}
           onAddByPath={(files) => this.showModal(ADD_BY_PATH, files)}
           onNewFolder={(files) => this.showModal(NEW_FOLDER, files)}
           onCliTutorMode={() => this.showModal(CLI_TUTOR_MODE)}
diff --git a/src/files/breadcrumbs/Breadcrumbs.css b/src/files/breadcrumbs/Breadcrumbs.css
new file mode 100644
index 000000000..dfc8b752e
--- /dev/null
+++ b/src/files/breadcrumbs/Breadcrumbs.css
@@ -0,0 +1,23 @@
+.BreadcrumbsButton::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -4px;
+    height: 2px;
+    background: currentColor;
+    transition: opacity 0.2s ease-in-out;
+    opacity: 0;
+}
+
+.BreadcrumbsButton.white::after {
+    background: inherit;
+}
+
+.BreadcrumbsButton.dragging::after {
+    opacity: 1;
+}
+
+.BreadcrumbsButton.no-events {
+    pointer-events: none;
+}
diff --git a/src/files/breadcrumbs/Breadcrumbs.js b/src/files/breadcrumbs/Breadcrumbs.js
index 559ba2639..6db259019 100644
--- a/src/files/breadcrumbs/Breadcrumbs.js
+++ b/src/files/breadcrumbs/Breadcrumbs.js
@@ -1,18 +1,123 @@
-import React from 'react'
+import React, { useEffect, useState, useRef, useMemo } from 'react'
+import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import { basename, join } from 'path'
+import { connect } from 'redux-bundler-react'
 import { withTranslation } from 'react-i18next'
+import { useDrop } from 'react-dnd'
+import { NativeTypes } from 'react-dnd-html5-backend'
+
+import { normalizeFiles } from '../../lib/files'
+
+import './Breadcrumbs.css'
+
+const DropableBreadcrumb = ({ index, link, immutable, onAddFiles, onMove, onClick, onContextMenuHandle, getPathInfo, checkIfPinned }) => {
+  const [{ isOver }, drop] = useDrop({
+    accept: [NativeTypes.FILE, 'FILE'],
+    drop: async ({ files, filesPromise, path: filePath }) => {
+      if (files) {
+        (async () => {
+          const files = await filesPromise
+          onAddFiles(await normalizeFiles(files), link.path)
+        })()
+      } else {
+        const src = filePath
+        const dst = join(link.path, basename(filePath))
+
+        try { await onMove(src, dst) } catch (e) { console.error(e) }
+      }
+    },
+    collect: (monitor) => ({
+      isOver: monitor.isOver()
+    })
+  })
+
+  const buttonRef = useRef()
+
+  const handleOnContextMenuHandle = async (ev) => {
+    ev.preventDefault()
+
+    const { path } = link
+    const sanitizedPath = path.substring(path.indexOf('/', 1), path.length)
+    const { cid, type } = await getPathInfo(sanitizedPath)
+    const pinned = await checkIfPinned(cid)
+
+    onContextMenuHandle(undefined, buttonRef.current, {
+      ...link,
+      type,
+      cid,
+      pinned
+    })
+  }
+
+  return (
+    <span className='dib pv1 pr1' ref={drop}>
+      <button ref={buttonRef} title={link.realName}
+        className={classNames('BreadcrumbsButton relative',
+          index !== 0 && 'navy',
+          index === 0 && 'f7 pa1 br2 mr2',
+          index === 0 && (immutable ? 'bg-charcoal-muted white' : 'bg-navy white'),
+          immutable && (link.last || index === 0) && 'no-events',
+          link.last && 'b', isOver && 'dragging')}
+        onClick={() => onClick(link.path)} onContextMenu={(ev) => index !== 0 && handleOnContextMenuHandle(ev)}>
+        {link.name}
+      </button>
+    </span>
+  )
+}
+
+const Breadcrumbs = ({ t, tReady, path, onClick, className, onContextMenuHandle, onAddFiles, onMove, doGetPathInfo, doCheckIfPinned, ...props }) => {
+  const [overflows, setOverflows] = useState(false)
+  const [isImmutable, setImmutable] = useState(false)
+  const anchors = useRef()
+
+  useEffect(() => {
+    const a = anchors.current
+
+    const newOverflows = a ? (a.offsetHeight < a.scrollHeight || a.offsetWidth < a.scrollWidth) : false
+    if (newOverflows !== overflows) {
+      setOverflows(newOverflows)
+    }
+  }, [overflows])
+
+  const bread = useMemo(() =>
+    makeBread(path, t, isImmutable, setImmutable)
+  , [isImmutable, path, t])
+
+  return (
+    <nav aria-label={t('breadcrumbs')} className={classNames('Breadcrumbs flex items-center sans-serif overflow-hidden sticky top-0', className)} {...props}>
+      <div className='nowrap overflow-hidden relative flex flex-wrap' ref={ anchors }>
+        <div className={`absolute left-0 top-0 h-100 w1 ${overflows ? '' : 'dn'}`} style={{ background: 'linear-gradient(to right, #ffffff 0%, transparent 100%)' }} />
+
+        { bread.map((link, index) => (
+          <div key={`${index}link`}>
+            <DropableBreadcrumb index={index} link={link} immutable={isImmutable}
+              onAddFiles={onAddFiles} onMove={onMove} onClick={onClick} onContextMenuHandle={onContextMenuHandle} getPathInfo={doGetPathInfo} checkIfPinned={doCheckIfPinned} />
+            { index !== bread.length - 1 && <span className='dib pr1 pv1 mid-gray v-top'>/</span>}
+          </div>
+        ))}
+
+      </div>
+    </nav>
+  )
+}
 
-function makeBread (root) {
+Breadcrumbs.propTypes = {
+  path: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired,
+  onContextMenuHandle: PropTypes.func
+}
+
+function makeBread (root, t, isImmutable, setImmutable) {
   if (root.endsWith('/')) {
     root = root.substring(0, root.length - 1)
   }
 
-  const parts = root.split('/').map(part => {
-    return {
-      name: part,
-      path: part
-    }
-  })
+  const parts = root.split('/').map(part => ({
+    name: part,
+    path: part
+  }))
 
   for (let i = 1; i < parts.length; i++) {
     const name = parts[i].name
@@ -29,83 +134,19 @@ function makeBread (root) {
   }
 
   parts.shift()
-  parts[0].disabled = true
 
-  parts[parts.length - 1].last = true
-  return parts
-}
-
-class Breadcrumbs extends React.Component {
-  state = {
-    overflows: false
+  if (parts[0].name === 'ipfs' || parts[0].name === 'ipns') {
+    !isImmutable && setImmutable(true)
   }
 
-  componentDidUpdate (_, prevState) {
-    const a = this.anchors
-    const overflows = a ? (a.offsetHeight < a.scrollHeight || a.offsetWidth < a.scrollWidth) : false
-
-    if (prevState.overflows !== overflows) {
-      this.setState({ overflows })
-    }
-  }
+  parts[0].name = t(parts[0].name)
 
-  render () {
-    const { t, tReady, path, onClick, className = '', ...props } = this.props
-
-    const cls = `Breadcrumbs flex items-center sans-serif overflow-hidden ${className}`
-    const bread = makeBread(path)
-    const root = bread[0]
-
-    if (root.name === 'files' || root.name === 'pins') {
-      bread.shift()
-    }
-
-    const res = bread.map((link, index) => ([
-      <span key={`${index}link`} className='dib pv1 pr1' style={{ direction: 'ltr' }}>
-        { link.disabled
-          ? <span title={link.realName} className='gray'>{link.name}</span>
-          : <button title={link.realName} className={`pointer navy ${link.last ? 'b' : ''}`} onClick={() => onClick(link.path)}>
-            {link.name}
-          </button>
-        }
-      </span>,
-      /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
-      <a key={`${index}divider`} className='dib pr1 pv1 mid-gray v-top'>/</a>
-    ]))
-
-    if (res.length === 0) {
-      /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
-      res.push(<a key='root-divider' className='dib pv1 mid-gray v-top'>/</a>)
-    }
-
-    res.reverse()
-
-    return (
-      <nav aria-label={t('breadcrumbs')} className={cls} {...props}>
-        { (root.name === 'files' || root.name === 'pins') &&
-        /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
-        <button key={`${root.name}-label`}
-          title={root.realName}
-          onClick={() => onClick(root.path)}
-          className='f7 pointer pa1 bg-navy br2 mr2 white'>
-          {t(root.name)}
-        </button>
-        }
-
-        <div className='nowrap overflow-hidden relative' ref={(el) => { this.anchors = el }} style={{ direction: 'rtl' }}>
-          <div className={`absolute left-0 top-0 h-100 w1 ${this.state.overflows ? '' : 'dn'}`} style={{ background: 'linear-gradient(to right, #ffffff 0%, transparent 100%)' }} />
-          {res}
-        </div>
-      </nav>
-    )
-  }
-}
-
-Breadcrumbs.propTypes = {
-  path: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired,
-  tReady: PropTypes.bool.isRequired
+  parts[parts.length - 1].last = true
+  return parts
 }
 
-export default withTranslation('files')(Breadcrumbs)
+export default connect(
+  'doGetPathInfo',
+  'doCheckIfPinned',
+  withTranslation('files')(Breadcrumbs)
+)
diff --git a/src/files/context-menu/ContextMenu.js b/src/files/context-menu/ContextMenu.js
index e3bf67295..f7131ba74 100644
--- a/src/files/context-menu/ContextMenu.js
+++ b/src/files/context-menu/ContextMenu.js
@@ -45,7 +45,7 @@ class ContextMenu extends React.Component {
     const {
       t, onRename, onDelete, onDownload, onInspect, onShare,
       translateX, translateY, className,
-      isUpperDir, isMfs, isUnknown, pinned, isCliTutorModeEnabled
+      isDirectory, isMfs, isUnknown, pinned, isCliTutorModeEnabled
     } = this.props
     return (
       <Dropdown className={className}>
@@ -58,7 +58,7 @@ class ContextMenu extends React.Component {
           translateY={-translateY}
           open={this.props.isOpen}
           onDismiss={this.props.handleClick}>
-          { !isUpperDir && onShare &&
+          { !isDirectory && onShare &&
             <Option onClick={this.wrap('onShare')}>
               <StrokeShare className='w2 mr2 fill-aqua' />
               {t('actions.share')}
@@ -81,21 +81,21 @@ class ContextMenu extends React.Component {
             <StrokePin className='w2 mr2 fill-aqua' />
             { pinned ? t('actions.unpin') : t('actions.pin') }
           </Option>
-          { !isUpperDir && !isUnknown && onDownload &&
+          { !isDirectory && !isUnknown && onDownload &&
             <Option onClick={this.wrap('onDownload')} isCliTutorModeEnabled={isCliTutorModeEnabled}
               onCliTutorMode={this.wrap('onCliTutorMode', cliCmdKeys.DOWNLOAD_OBJECT_COMMAND)}>
               <StrokeDownload className='w2 mr2 fill-aqua' />
               {t('actions.download')}
             </Option>
           }
-          { !isUpperDir && !isUnknown && isMfs && onRename &&
+          { !isDirectory && !isUnknown && isMfs && onRename &&
             <Option onClick={this.wrap('onRename')} isCliTutorModeEnabled={isCliTutorModeEnabled}
               onCliTutorMode={this.wrap('onCliTutorMode', cliCmdKeys.RENAME_IPFS_OBJECT)}>
               <StrokePencil className='w2 mr2 fill-aqua' />
               {t('actions.rename')}
             </Option>
           }
-          { !isUpperDir && !isUnknown && isMfs && onDelete &&
+          { !isDirectory && !isUnknown && isMfs && onDelete &&
             <Option onClick={this.wrap('onDelete')} isCliTutorModeEnabled={isCliTutorModeEnabled}
               onCliTutorMode={this.wrap('onCliTutorMode', cliCmdKeys.DELETE_FILE_FROM_IPFS)}
             >
@@ -114,7 +114,7 @@ ContextMenu.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   isUnknown: PropTypes.bool.isRequired,
   hash: PropTypes.string,
-  isUpperDir: PropTypes.bool,
+  isDirectory: PropTypes.bool,
   pinned: PropTypes.bool,
   handleClick: PropTypes.func,
   translateX: PropTypes.number.isRequired,
@@ -134,7 +134,7 @@ ContextMenu.propTypes = {
 ContextMenu.defaultProps = {
   isMfs: false,
   isOpen: false,
-  isUpperDir: false,
+  isDirectory: false,
   isUnknown: false,
   top: 0,
   left: 0,
diff --git a/src/files/context-menu/ContextMenu.stories.js b/src/files/context-menu/ContextMenu.stories.js
index be9932cb4..818d11d89 100644
--- a/src/files/context-menu/ContextMenu.stories.js
+++ b/src/files/context-menu/ContextMenu.stories.js
@@ -15,7 +15,6 @@ storiesOf('Files', module)
       <ContextMenu
         isOpen={boolean('isOpen', false)}
         isMfs={boolean('isMfs', false)}
-        isUpperDir={boolean('isUpperDir', false)}
         pinned={boolean('pinned', false)}
         top={10}
         left={10}
diff --git a/src/files/file-preview/FilePreview.js b/src/files/file-preview/FilePreview.js
index e20ec817d..0979beb50 100644
--- a/src/files/file-preview/FilePreview.js
+++ b/src/files/file-preview/FilePreview.js
@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 import { connect } from 'redux-bundler-react'
 import isBinary from 'is-binary'
 import { Trans, withTranslation } from 'react-i18next'
@@ -7,79 +8,86 @@ import typeFromExt from '../type-from-ext'
 import ComponentLoader from '../../loader/ComponentLoader.js'
 import './FilePreview.css'
 import CID from 'cids'
+import { useDrag } from 'react-dnd'
 
-class Preview extends React.Component {
-  state = {
-    content: null
-  }
+const Preview = (props) => {
+  const { name, size, cid, path } = props
+  const [, drag] = useDrag({
+    item: { name, size, cid, path, type: 'FILE' }
+  })
 
-  async loadContent () {
-    const buf = await this.props.read()
-    this.setState({ content: buf.toString('utf-8') })
-  }
+  const type = typeFromExt(name)
 
-  render () {
-    const { t, name, cid, size, availableGatewayUrl: gatewayUrl } = this.props
+  return <div className={ classNames(type !== 'pdf' && 'dib') } ref={drag}>
+    <PreviewItem {...props} type={type} />
+  </div>
+}
 
-    const type = typeFromExt(name)
-    const src = `${gatewayUrl}/ipfs/${cid}`
-    const className = 'mw-100 mt3 bg-snow-muted pa2 br2 border-box'
+const PreviewItem = ({ t, name, cid, size, type, availableGatewayUrl: gatewayUrl, read }) => {
+  const [content, setContent] = useState(null)
 
-    switch (type) {
-      case 'audio':
-        return (
-          // eslint-disable-next-line jsx-a11y/media-has-caption
-          <audio width='100%' controls>
-            <source src={src} />
-          </audio>
-        )
-      case 'pdf':
-        return (
-          <object className="FilePreviewPDF w-100" data={src} type='application/pdf'>
-            {t('noPDFSupport')}
-            <a href={src} download target='_blank' rel='noopener noreferrer' className='underline-hover navy-muted'>{t('downloadPDF')}</a>
-          </object>
-        )
-      case 'video':
-        return (
-          // eslint-disable-next-line jsx-a11y/media-has-caption
-          <video controls className={className}>
-            <source src={src} />
-          </video>
-        )
-      case 'image':
-        return <img className={className} alt={name} src={src} />
-      default: {
-        const cantPreview = (
-          <div className='mt4'>
-            <p className='b'>{t('cantBePreviewed')} <span role='img' aria-label='sad'>😢</span></p>
-            <p>
-              <Trans i18nKey='downloadInstead' t={t}>
-                Try <a href={src} download target='_blank' rel='noopener noreferrer' className='link blue' >downloading</a> it instead.
-              </Trans>
-            </p>
-          </div>
-        )
+  const loadContent = async () => {
+    const buf = await read()
+    setContent(buf.toString('utf-8'))
+  }
 
-        if (size > 1024 * 1024 * 4) {
-          return cantPreview
-        }
+  const src = `${gatewayUrl}/ipfs/${cid}`
+  const className = 'mw-100 mt3 bg-snow-muted pa2 br2 border-box'
 
-        if (!this.state.content) {
-          this.loadContent()
-          return <ComponentLoader pastDelay />
-        }
+  switch (type) {
+    case 'audio':
+      return (
+      // eslint-disable-next-line jsx-a11y/media-has-caption
+        <audio width='100%' controls>
+          <source src={src} />
+        </audio>
+      )
+    case 'pdf':
+      return (
+        <object className="FilePreviewPDF w-100" data={src} type='application/pdf'>
+          {t('noPDFSupport')}
+          <a href={src} download target='_blank' rel='noopener noreferrer' className='underline-hover navy-muted'>{t('downloadPDF')}</a>
+        </object>
+      )
+    case 'video':
+      return (
+      // eslint-disable-next-line jsx-a11y/media-has-caption
+        <video controls className={className}>
+          <source src={src} />
+        </video>
+      )
+    case 'image':
+      return <img className={className} alt={name} src={src} />
+    default: {
+      const cantPreview = (
+        <div className='mt4'>
+          <p className='b'>{t('cantBePreviewed')} <span role='img' aria-label='sad'>😢</span></p>
+          <p>
+            <Trans i18nKey='downloadInstead' t={t}>
+                Try <a href={src} download target='_blank' rel='noopener noreferrer' className='link blue' >downloading</a> it instead.
+            </Trans>
+          </p>
+        </div>
+      )
 
-        if (isBinary(this.state.content)) {
-          return cantPreview
-        }
+      if (size > 1024 * 1024 * 4) {
+        return cantPreview
+      }
 
-        return (
-          <pre className={`${className} overflow-auto monospace`}>
-            {this.state.content}
-          </pre>
-        )
+      if (!content) {
+        loadContent()
+        return <ComponentLoader pastDelay />
       }
+
+      if (isBinary(content)) {
+        return cantPreview
+      }
+
+      return (
+        <pre className={`${className} overflow-auto monospace`}>
+          {content}
+        </pre>
+      )
     }
   }
 }
diff --git a/src/files/file/File.js b/src/files/file/File.js
index ff61ac959..29a01f402 100644
--- a/src/files/file/File.js
+++ b/src/files/file/File.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import PropTypes from 'prop-types'
 import { join, basename } from 'path'
 import filesize from 'filesize'
@@ -6,8 +6,7 @@ import { withTranslation } from 'react-i18next'
 import classnames from 'classnames'
 import { normalizeFiles } from '../../lib/files'
 // React DnD
-import { DropTarget, DragSource } from 'react-dnd'
-import { NativeTypes } from 'react-dnd-html5-backend'
+import { useDrag, useDrop } from 'react-dnd'
 // Components
 import GlyphDots from '../../icons/GlyphDots'
 import GlyphPin from '../../icons/GlyphPin'
@@ -15,108 +14,118 @@ import Tooltip from '../../components/tooltip/Tooltip'
 import Checkbox from '../../components/checkbox/Checkbox'
 import FileIcon from '../file-icon/FileIcon'
 import CID from 'cids'
+import { NativeTypes } from 'react-dnd-html5-backend'
 
-class File extends React.Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired,
-    path: PropTypes.string.isRequired,
-    size: PropTypes.number,
-    cid: PropTypes.instanceOf(CID),
-    selected: PropTypes.bool,
-    focused: PropTypes.bool,
-    onSelect: PropTypes.func,
-    onNavigate: PropTypes.func.isRequired,
-    onAddFiles: PropTypes.func.isRequired,
-    onMove: PropTypes.func.isRequired,
-    coloured: PropTypes.bool,
-    translucent: PropTypes.bool,
-    handleContextMenuClick: PropTypes.func,
-    pinned: PropTypes.bool,
-    isMfs: PropTypes.bool,
-    // Injected by DragSource and DropTarget
-    isOver: PropTypes.bool.isRequired,
-    canDrop: PropTypes.bool.isRequired,
-    isDragging: PropTypes.bool.isRequired,
-    connectDropTarget: PropTypes.func.isRequired,
-    connectDragSource: PropTypes.func.isRequired
-  }
-
-  static defaultProps = {
-    coloured: false,
-    translucent: false
-  }
+const File = ({
+  name, type, size, cid, path, pinned, t, selected, focused, translucent, coloured, cantSelect, cantDrag, isMfs,
+  onAddFiles, onMove, onSelect, onNavigate, handleContextMenuClick
+}) => {
+  const dotsWrapper = useRef()
 
-  handleCtxLeftClick = (ev) => {
-    const { name, type, size, cid, path, pinned } = this.props
-    const pos = this.dotsWrapper.getBoundingClientRect()
-    this.props.handleContextMenuClick(ev, 'LEFT', { name, size, type, cid, path, pinned }, pos)
+  const handleCtxLeftClick = (ev) => {
+    const pos = dotsWrapper.current.getBoundingClientRect()
+    handleContextMenuClick(ev, 'LEFT', { name, size, type, cid, path, pinned }, pos)
   }
 
-  handleCtxRightClick = (ev) => {
-    const { name, type, size, cid, path, pinned } = this.props
-    this.props.handleContextMenuClick(ev, 'RIGHT', { name, size, type, cid, path, pinned })
+  const handleCtxRightClick = (ev) => {
+    handleContextMenuClick(ev, 'RIGHT', { name, size, type, cid, path, pinned })
   }
 
-  render () {
-    let {
-      t, selected, focused, translucent, coloured, cid, name, type, size, pinned, onSelect, onNavigate,
-      isOver, canDrop, cantDrag, cantSelect, connectDropTarget, connectDragPreview, connectDragSource,
-      styles = {}
-    } = this.props
+  const [, drag, preview] = useDrag({
+    item: { name, size, cid, path, pinned, type: 'FILE' },
+    canDrag: !cantDrag && isMfs
+  })
 
-    let className = 'File b--light-gray relative flex items-center bt'
+  const checkIfDir = (monitor) => {
+    if (!isMfs) return false
+    const item = monitor.getItem()
+    if (!item) return false
 
-    if (selected) {
-      className += ' selected'
+    if (item.name) {
+      return type === 'directory' &&
+        name !== item.name &&
+        !selected
     }
 
-    if (focused || (selected && !translucent) || coloured || (isOver && canDrop)) {
-      styles.backgroundColor = '#F0F6FA'
-    } else if (translucent) {
-      className += ' o-70'
-    }
+    return type === 'directory'
+  }
 
-    if (focused) {
-      styles.border = '1px dashed #9ad4db'
-    } else {
-      styles.border = '1px solid transparent'
-      styles.borderTop = '1px solid #eee'
-    }
+  const [{ isOver, canDrop }, drop] = useDrop({
+    accept: [NativeTypes.FILE, 'FILE'],
+    drop: (_, monitor) => {
+      const item = monitor.getItem()
+
+      if (item.files) {
+        (async () => {
+          const files = await item.filesPromise
+          onAddFiles(normalizeFiles(files), path)
+        })()
+      } else {
+        const src = item.path
+        const dst = join(path, basename(item.path))
+
+        onMove(src, dst)
+      }
+    },
+    canDrop: (_, monitor) => checkIfDir(monitor),
+    collect: (monitor) => ({
+      canDrop: checkIfDir(monitor),
+      isOver: monitor.isOver()
+    })
+  })
+
+  let className = 'File b--light-gray relative flex items-center bt'
+
+  if (selected) {
+    className += ' selected'
+  }
+
+  const styles = { height: 55, overflow: 'hidden' }
+
+  if (focused || (selected && !translucent) || coloured || (isOver && canDrop)) {
+    styles.backgroundColor = '#F0F6FA'
+  } else if (translucent) {
+    className += ' o-70'
+  }
 
-    styles.height = 55
-    styles.overflow = 'hidden'
+  if (focused) {
+    styles.border = '1px dashed #9ad4db'
+  } else {
+    styles.border = '1px solid transparent'
+    styles.borderTop = '1px solid #eee'
+  }
 
-    size = size ? filesize(size, { round: 0 }) : '-'
-    const hash = cid.toString() || t('hashUnavailable')
+  size = size ? filesize(size, { round: 0 }) : '-'
+  const hash = cid.toString() || t('hashUnavailable')
 
-    const select = (select) => onSelect(name, select)
+  const select = (select) => onSelect(name, select)
 
-    const checkBoxCls = classnames({
-      'o-70 glow': !cantSelect,
-      'o-1': selected || focused
-    }, ['pl2 w2'])
+  const checkBoxCls = classnames({
+    'o-70 glow': !cantSelect,
+    'o-1': selected || focused
+  }, ['pl2 w2'])
 
-    const element = connectDropTarget(
-      <div className={className} style={styles} onContextMenu={this.handleCtxRightClick}>
+  return (
+    <div ref={drop}>
+      <div className={className} style={styles} onContextMenu={handleCtxRightClick} ref={drag}>
         <div className={checkBoxCls}>
           <Checkbox disabled={cantSelect} checked={selected} onChange={select} aria-label={ t('checkboxLabel', { name })} />
         </div>
-        {connectDragPreview(
-          <button onClick={onNavigate} className='relative pointer flex items-center flex-grow-1 ph2 pv1 w-40' aria-label={ name === '..' ? t('previousFolder') : t('fileLabel', { name, type, size }) }>
-            <div className='dib flex-shrink-0 mr2'>
-              <FileIcon name={name} type={type} />
-            </div>
-            <div style={{ width: 'calc(100% - 3.25rem)' }}>
-              <Tooltip text={name}>
-                <div className='f6 truncate charcoal'>{name}</div>
-              </Tooltip>
-              <Tooltip text={hash}>
-                <div className='f7 mt1 gray truncate monospace'>{hash}</div>
-              </Tooltip>
-            </div>
-          </button>
-        )}
+
+        <button ref={preview} onClick={onNavigate} className='relative pointer flex items-center flex-grow-1 ph2 pv1 w-40' aria-label={ name === '..' ? t('previousFolder') : t('fileLabel', { name, type, size }) }>
+          <div className='dib flex-shrink-0 mr2'>
+            <FileIcon name={name} type={type} />
+          </div>
+          <div style={{ width: 'calc(100% - 3.25rem)' }}>
+            <Tooltip text={name}>
+              <div className='f6 truncate charcoal'>{name}</div>
+            </Tooltip>
+            <Tooltip text={hash}>
+              <div className='f7 mt1 gray truncate monospace'>{hash}</div>
+            </Tooltip>
+          </div>
+        </button>
+
         <div className='ph2 pv1 flex-none dn db-l tr mw3'>
           { pinned && <div className='bg-snow br-100 o-70' title={t('pinned')} style={{ width: '1.5rem', height: '1.5rem' }}>
             <GlyphPin className='fill-teal-muted' />
@@ -125,78 +134,36 @@ class File extends React.Component {
         <div className='size pl2 pr4 pv1 flex-none f6 dn db-l tr charcoal-muted w-10 mw4'>
           {size}
         </div>
-        <button ref={el => { this.dotsWrapper = el }} className='ph2 db button-inside-focus' style={{ width: '2.5rem' }} onClick={this.handleCtxLeftClick} aria-label={ t('checkboxLabel', { name })} >
+        <button ref={dotsWrapper} className='ph2 db button-inside-focus' style={{ width: '2.5rem' }} onClick={handleCtxLeftClick} aria-label={ t('checkboxLabel', { name })} >
           <GlyphDots className='fill-gray-muted pointer hover-fill-gray transition-all'/>
         </button>
       </div>
-    )
-
-    if (cantDrag) {
-      return element
-    }
-
-    return connectDragSource(element)
-  }
+    </div>
+  )
 }
 
-File.TYPE = Symbol('file')
-
-const dragSource = {
-  isDragging: (props, monitor) => monitor.getItem().name === props.name,
-  beginDrag: ({ name, type, path, setIsDragging }) => {
-    setIsDragging()
-    return { name, type, path }
-  },
-  canDrag: props => props.isMfs,
-  endDrag: (props) => { props.setIsDragging(false) }
+File.propTypes = {
+  name: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+  size: PropTypes.number,
+  cid: PropTypes.instanceOf(CID),
+  selected: PropTypes.bool,
+  focused: PropTypes.bool,
+  onSelect: PropTypes.func,
+  onNavigate: PropTypes.func.isRequired,
+  onAddFiles: PropTypes.func.isRequired,
+  onMove: PropTypes.func.isRequired,
+  coloured: PropTypes.bool,
+  translucent: PropTypes.bool,
+  handleContextMenuClick: PropTypes.func,
+  pinned: PropTypes.bool,
+  isMfs: PropTypes.bool
 }
 
-const dragCollect = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  connectDragPreview: connect.dragPreview(),
-  isDragging: monitor.isDragging()
-})
-
-const dropTarget = {
-  drop: (props, monitor) => {
-    const item = monitor.getItem()
-
-    // eslint-disable-next-line no-prototype-builtins
-    if (item.hasOwnProperty('files')) {
-      (async () => {
-        const files = await item.filesPromise
-        props.onAddFiles(normalizeFiles(files), props.path)
-      })()
-    } else {
-      const src = item.path
-      const dst = join(props.path, basename(item.path))
-
-      props.onMove(src, dst)
-    }
-  },
-  canDrop: (props, monitor) => {
-    if (!props.isMfs) return false
-    const item = monitor.getItem()
-
-    // eslint-disable-next-line no-prototype-builtins
-    if (item.hasOwnProperty('name')) {
-      return props.type === 'directory' &&
-        props.name !== item.name &&
-        !props.selected
-    }
-
-    return props.type === 'directory'
-  }
+File.defaultProps = {
+  coloured: false,
+  translucent: false
 }
 
-const dropCollect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop()
-})
-
-export default DragSource(File.TYPE, dragSource, dragCollect)(
-  DropTarget([File.TYPE, NativeTypes.FILE], dropTarget, dropCollect)(
-    withTranslation('files')(File)
-  )
-)
+export default withTranslation('files')(File)
diff --git a/src/files/files-list/FilesList.js b/src/files/files-list/FilesList.js
index 0c5a044be..2bdd63b12 100644
--- a/src/files/files-list/FilesList.js
+++ b/src/files/files-list/FilesList.js
@@ -27,7 +27,6 @@ export class FilesList extends React.Component {
   static propTypes = {
     className: PropTypes.string,
     files: PropTypes.array.isRequired,
-    upperDir: PropTypes.object,
     filesSorting: PropTypes.shape({
       by: PropTypes.string.isRequired,
       asc: PropTypes.bool.isRequired
@@ -52,7 +51,7 @@ export class FilesList extends React.Component {
     onMove: PropTypes.func.isRequired,
     // From i18next
     t: PropTypes.func.isRequired,
-    tReady: PropTypes.bool.isRequired
+    tReady: PropTypes.bool
   }
 
   static defaultProps = {
@@ -75,10 +74,6 @@ export class FilesList extends React.Component {
   }
 
   get focusedFile () {
-    if (this.state.focused === '..') {
-      return this.props.upperDir
-    }
-
     return this.props.files.find(el => el.name === this.state.focused)
   }
 
@@ -133,7 +128,7 @@ export class FilesList extends React.Component {
   }
 
   keyHandler = (e) => {
-    const { files, upperDir, filesIsFetching } = this.props
+    const { files, filesIsFetching } = this.props
     const { selected, focused, firstVisibleRow } = this.state
 
     // Disable keyboard controls if fetching files
@@ -146,7 +141,7 @@ export class FilesList extends React.Component {
       return this.listRef.current.forceUpdateGrid()
     }
 
-    if (e.key === 'F2' && focused !== null && focused !== '..') {
+    if (e.key === 'F2' && focused !== null) {
       return this.props.onRename([this.focusedFile])
     }
 
@@ -154,7 +149,7 @@ export class FilesList extends React.Component {
       return this.props.onDelete(this.selectedFiles)
     }
 
-    if (e.key === ' ' && focused !== null && focused !== '..') {
+    if (e.key === ' ' && focused !== null) {
       e.preventDefault()
       return this.toggleOne(focused, true)
     }
@@ -165,25 +160,19 @@ export class FilesList extends React.Component {
 
     if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
       e.preventDefault()
-      let index = upperDir ? -1 : 0
+      let index = 0
 
       if (focused !== null) {
         const prev = files.findIndex(el => el.name === focused)
         index = (e.key === 'ArrowDown') ? prev + 1 : prev - 1
       }
 
-      if (index === -1 && !upperDir) {
+      if (index === -1) {
         return
       }
 
-      if (index >= -1 && index < files.length) {
-        let name
-
-        if (index === -1) {
-          name = '..'
-        } else {
-          name = files[index].name
-        }
+      if (index < files.length) {
+        let name = files[index].name
 
         // If the file we are going to focus is out of view (removed
         // from the DOM by react-virtualized), focus the first visible file
@@ -280,69 +269,26 @@ export class FilesList extends React.Component {
   }
 
   emptyRowsRenderer = () => {
-    const { t, upperDir, isOver, canDrop, onNavigate, onAddFiles } = this.props
-    const { isDragging, focused } = this.state
+    const { t } = this.props
 
     return (
-      <Fragment>
-        { upperDir && <File
-          ref={r => { this.filesRefs['..'] = r }}
-          onNavigate={() => onNavigate(upperDir.path)}
-          onAddFiles={onAddFiles}
-          onMove={this.move}
-          setIsDragging={this.isDragging}
-          handleContextMenuClick={this.props.handleContextMenuClick}
-          translucent={isDragging || (isOver && canDrop)}
-          name='..'
-          focused={focused === '..'}
-          cantDrag
-          cantSelect
-          {...upperDir} /> }
-
-        <Trans i18nKey='filesList.noFiles' t={t}>
-          <div className='pv3 b--light-gray bt tc gray f6'>
+      <Trans i18nKey='filesList.noFiles' t={t}>
+        <div className='pv3 b--light-gray bt tc gray f6'>
             There are no available files. Add some!
-          </div>
-        </Trans>
-      </Fragment>
+        </div>
+      </Trans>
     )
   }
 
   rowRenderer = ({ index, key, style }) => {
-    const { files, pins, upperDir, filesPathInfo, isOver, canDrop, onNavigate, onInspect, onAddFiles } = this.props
+    const { files, pins, filesPathInfo, isOver, canDrop, onNavigate, onInspect, onAddFiles } = this.props
     const { selected, focused, isDragging } = this.state
 
-    if (upperDir) {
-      // We want the `upperDir` to be the first item on the list
-      if (index === 0) {
-        return (
-          <div key={key} style={style}>
-            <File
-              ref={r => { this.filesRefs[upperDir.name] = r }}
-              onNavigate={() => onNavigate(upperDir.path)}
-              onAddFiles={onAddFiles}
-              onMove={this.move}
-              setIsDragging={this.isDragging}
-              handleContextMenuClick={this.props.handleContextMenuClick}
-              isMfs={filesPathInfo.isMfs}
-              translucent={isDragging || (isOver && canDrop)}
-              focused={focused === upperDir.name}
-              cantDrag
-              cantSelect
-              {...upperDir} />
-          </div>
-        )
-      }
-      // Decrease the index to stay inside the `files` array range
-      index--
-    }
-
     return (
-      <div key={key} style={style}>
+      <div key={key} style={style} ref={r => { this.filesRefs[files[index].name] = r }}>
         <File
           {...files[index]}
           pinned={pins.includes(files[index].cid.toString())}
-          ref={r => { this.filesRefs[files[index].name] = r }}
           isMfs={filesPathInfo.isMfs}
           name={files[index].name}
           onSelect={this.toggleOne}
@@ -367,10 +313,10 @@ export class FilesList extends React.Component {
   onRowsRendered = ({ startIndex }) => this.setState({ firstVisibleRow: startIndex })
 
   render () {
-    let { t, files, className, upperDir, showLoadingAnimation, connectDropTarget } = this.props
+    let { t, files, className, showLoadingAnimation, connectDropTarget } = this.props
     const { selected } = this.state
     const allSelected = selected.length !== 0 && selected.length === files.length
-    const rowCount = files.length && upperDir ? files.length + 1 : files.length
+    const rowCount = files.length
     const checkBoxCls = classnames({
       'o-1': allSelected,
       'o-70': !allSelected
@@ -454,7 +400,7 @@ const dropTarget = {
 
 const dropCollect = (connect, monitor) => ({
   connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
+  isOver: monitor.isOver({ shallow: true }),
   canDrop: monitor.canDrop()
 })
 
diff --git a/src/files/header/Header.js b/src/files/header/Header.js
index 87ae220d0..2fbd44c2e 100644
--- a/src/files/header/Header.js
+++ b/src/files/header/Header.js
@@ -40,6 +40,11 @@ class Header extends React.Component {
     }, pos)
   }
 
+  handleBreadCrumbsContextMenu = (ev, breadcrumbsRef, file) => {
+    const pos = breadcrumbsRef.getBoundingClientRect()
+    this.props.handleContextMenu(ev, 'TOP', file, pos)
+  }
+
   render () {
     const {
       files,
@@ -55,7 +60,9 @@ class Header extends React.Component {
     return (
       <div className='db flex-l justify-between items-center'>
         <div className='mb3 overflow-hidden mr2'>
-          <Breadcrumbs className="joyride-files-breadcrumbs" path={files ? files.path : '/404'} onClick={onNavigate} />
+          <Breadcrumbs className="joyride-files-breadcrumbs" path={files ? files.path : '/404'}
+            onClick={onNavigate} onContextMenuHandle={(...args) => this.handleBreadCrumbsContextMenu(...args)}
+            onAddFiles={this.props.onAddFiles} onMove={this.props.onMove}/>
         </div>
 
         <div className='mb3 flex justify-between items-center bg-snow-muted joyride-files-add'>
diff --git a/src/lib/dnd-backend.js b/src/lib/dnd-backend.js
index c4bf55599..4ff80298e 100644
--- a/src/lib/dnd-backend.js
+++ b/src/lib/dnd-backend.js
@@ -1,5 +1,5 @@
 import { getFilesFromDataTransferItems } from 'datatransfer-files-promise'
-import HTML5Backend from 'react-dnd-html5-backend'
+import { HTML5Backend } from 'react-dnd-html5-backend'
 
 // If you drop a dir "foo" which contains "cat.jpg" & "dog.png" we receive a
 // single item in the `event.dataTransfer.items` for the directory.
@@ -32,6 +32,9 @@ export default (manager) => {
   backend.handleTopDropCapture = (event) => {
     handler.call(backend, event)
     if (backend.currentNativeSource && event.dataTransfer.items) {
+      // Prevent handling drag & drop of text inside webui
+      if ([...event.dataTransfer.items].every(({ kind }) => kind === 'string')) return
+
       const filesPromise = getFilesFromDataTransferItems(event.dataTransfer.items)
       backend.currentNativeSource.item.filesPromise = filesPromise
     }
diff --git a/src/lib/tours.js b/src/lib/tours.js
index 5f87f0019..d4473de2b 100644
--- a/src/lib/tours.js
+++ b/src/lib/tours.js
@@ -125,6 +125,11 @@ export const filesTour = {
       content: <div className='montserrat charcoal'>
         <h2 className='f3 fw4'>{t('tour.step2.title')}</h2>
         <p className='tl f6'>{t('tour.step2.paragraph1')}</p>
+        <ul className='pl4'>
+          <li className='tl f6'>{t('tour.step2.bullet1')}</li>
+          <li className='tl f6'>{t('tour.step2.bullet2')}</li>
+          <li className='tl f6'>{t('tour.step2.bullet3')}</li>
+        </ul>
       </div>,
       placement: 'bottom',
       target: '.joyride-files-breadcrumbs'