diff --git a/components/Auth.tsx b/components/Auth.tsx
index 29d2ef5..af67829 100644
--- a/components/Auth.tsx
+++ b/components/Auth.tsx
@@ -2,12 +2,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import Image from 'next/image'
 import { useRouter } from 'next/router'
-import { FunctionComponent, useState } from 'react'
+import { FC, useState } from 'react'
 
 import { matchProtectedRoute } from '../utils/protectedRouteHandler'
 import useLocalStorage from '../utils/useLocalStorage'
 
-const Auth: FunctionComponent<{ redirect: string }> = ({ redirect }) => {
+const Auth: FC<{ redirect: string }> = ({ redirect }) => {
   const authTokenPath = matchProtectedRoute(redirect)
 
   const router = useRouter()
diff --git a/components/Breadcrumb.tsx b/components/Breadcrumb.tsx
index fd467b4..a952d7e 100644
--- a/components/Breadcrumb.tsx
+++ b/components/Breadcrumb.tsx
@@ -1,9 +1,8 @@
 import Link from 'next/link'
 
 import { ParsedUrlQuery } from 'querystring'
-import { FunctionComponent } from 'react'
 
-const Breadcrumb: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) => {
+const Breadcrumb: React.FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
   if (query) {
     const { path } = query
     if (Array.isArray(path)) {
diff --git a/components/FileListing.tsx b/components/FileListing.tsx
index 623840b..31200f3 100644
--- a/components/FileListing.tsx
+++ b/components/FileListing.tsx
@@ -4,7 +4,7 @@ import emojiRegex from 'emoji-regex'
 import { useClipboard } from 'use-clipboard-copy'
 
 import { ParsedUrlQuery } from 'querystring'
-import { FunctionComponent, MouseEventHandler, SetStateAction, useEffect, useRef, useState } from 'react'
+import { FC, MouseEventHandler, SetStateAction, useEffect, useRef, useState } from 'react'
 import { ImageDecorator } from 'react-viewer/lib/ViewerProps'
 
 import { useRouter } from 'next/router'
@@ -69,7 +69,7 @@ const queryToPath = (query?: ParsedUrlQuery) => {
   return '/'
 }
 
-const FileListItem: FunctionComponent<{
+const FileListItem: FC<{
   fileContent: { id: string; name: string; size: number; file: Object; lastModifiedDateTime: string }
 }> = ({ fileContent: c }) => {
   const emojiIcon = emojiRegex().exec(c.name)
@@ -107,7 +107,7 @@ const FileListItem: FunctionComponent<{
   )
 }
 
-const Checkbox: FunctionComponent<{
+const Checkbox: FC<{
   checked: 0 | 1 | 2
   onChange: () => void
   title: string
@@ -152,7 +152,7 @@ const Checkbox: FunctionComponent<{
   )
 }
 
-const Downloading: FunctionComponent<{ title: string }> = ({ title }) => {
+const Downloading: FC<{ title: string }> = ({ title }) => {
   return (
     <span title={title} className="p-2 rounded" role="status">
       <LoadingIcon
@@ -164,7 +164,7 @@ const Downloading: FunctionComponent<{ title: string }> = ({ title }) => {
   )
 }
 
-const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) => {
+const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
   const [imageViewerVisible, setImageViewerVisibility] = useState(false)
   const [activeImageIdx, setActiveImageIdx] = useState(0)
   const [selected, setSelected] = useState<{ [key: string]: boolean }>({})
diff --git a/components/previews/EPUBPreview.tsx b/components/previews/EPUBPreview.tsx
index 675e9ba..3da4a5b 100644
--- a/components/previews/EPUBPreview.tsx
+++ b/components/previews/EPUBPreview.tsx
@@ -1,4 +1,4 @@
-import { FunctionComponent, useEffect, useRef, useState } from 'react'
+import { FC, useEffect, useRef, useState } from 'react'
 import { ReactReader } from 'react-reader'
 import type { Rendition } from 'epubjs'
 
@@ -6,7 +6,7 @@ import Loading from '../Loading'
 import DownloadButtonGroup from '../DownloadBtnGtoup'
 import { DownloadBtnContainer } from './Containers'
 
-const EPUBPreview: FunctionComponent<{ file: any }> = ({ file }) => {
+const EPUBPreview: FC<{ file: any }> = ({ file }) => {
   const [epubContainerWidth, setEpubContainerWidth] = useState(400)
   const epubContainer = useRef<HTMLDivElement>(null)
 
diff --git a/components/previews/MarkdownPreview.tsx b/components/previews/MarkdownPreview.tsx
index 6152964..5e3b473 100644
--- a/components/previews/MarkdownPreview.tsx
+++ b/components/previews/MarkdownPreview.tsx
@@ -1,4 +1,4 @@
-import { useEffect, FunctionComponent, CSSProperties } from 'react'
+import { useEffect, FC, CSSProperties } from 'react'
 import Prism from 'prismjs'
 import ReactMarkdown from 'react-markdown'
 import gfm from 'remark-gfm'
@@ -14,7 +14,7 @@ import DownloadButtonGroup from '../DownloadBtnGtoup'
 import useFileContent from '../../utils/fetchOnMount'
 import { DownloadBtnContainer, PreviewContainer } from './Containers'
 
-const MarkdownPreview: FunctionComponent<{ file: any; path: string; standalone?: boolean }> = ({
+const MarkdownPreview: FC<{ file: any; path: string; standalone?: boolean }> = ({
   file,
   path,
   standalone = true,
diff --git a/components/previews/OfficePreview.tsx b/components/previews/OfficePreview.tsx
index 3489076..85128cc 100644
--- a/components/previews/OfficePreview.tsx
+++ b/components/previews/OfficePreview.tsx
@@ -1,10 +1,10 @@
-import { FunctionComponent, useEffect, useRef, useState } from 'react'
+import { FC, useEffect, useRef, useState } from 'react'
 import Preview from 'preview-office-docs'
 
 import DownloadButtonGroup from '../DownloadBtnGtoup'
 import { DownloadBtnContainer } from './Containers'
 
-const OfficePreview: FunctionComponent<{ file: any }> = ({ file }) => {
+const OfficePreview: FC<{ file: any }> = ({ file }) => {
   const docContainer = useRef<HTMLDivElement>(null)
   const [docContainerWidth, setDocContainerWidth] = useState(600)
 
diff --git a/components/previews/PDFPreview.tsx b/components/previews/PDFPreview.tsx
index 5be2e07..5e3ef24 100644
--- a/components/previews/PDFPreview.tsx
+++ b/components/previews/PDFPreview.tsx
@@ -1,9 +1,7 @@
-import { FunctionComponent } from 'react'
-
 import DownloadButtonGroup from '../DownloadBtnGtoup'
 import { DownloadBtnContainer } from './Containers'
 
-const PDFEmbedPreview: FunctionComponent<{ file: any }> = ({ file }) => {
+const PDFEmbedPreview: React.FC<{ file: any }> = ({ file }) => {
   // const url = `/api/proxy?url=${encodeURIComponent(file['@microsoft.graph.downloadUrl'])}&inline=true`
   const url = `https://mozilla.github.io/pdf.js/web/viewer.html?file=${encodeURIComponent(
     file['@microsoft.graph.downloadUrl']
diff --git a/components/previews/VideoPreview.tsx b/components/previews/VideoPreview.tsx
index 1d7e4d7..3334acd 100644
--- a/components/previews/VideoPreview.tsx
+++ b/components/previews/VideoPreview.tsx
@@ -1,4 +1,3 @@
-import { FunctionComponent } from 'react'
 import ReactPlayer from 'react-player'
 import { useRouter } from 'next/router'
 import { useClipboard } from 'use-clipboard-copy'
@@ -8,7 +7,7 @@ import { getBaseUrl } from '../../utils/getBaseUrl'
 import { DownloadButton } from '../DownloadBtnGtoup'
 import { DownloadBtnContainer, PreviewContainer } from './Containers'
 
-const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
+const VideoPreview: React.FC<{ file: any }> = ({ file }) => {
   const { asPath } = useRouter()
   const clipboard = useClipboard()