diff --git a/client/components/Application/Dialogs/FileUpload.tsx b/client/components/Application/Dialogs/FileUpload.tsx
index 96a0e3cf2..f13b26bfb 100644
--- a/client/components/Application/Dialogs/FileUpload.tsx
+++ b/client/components/Application/Dialogs/FileUpload.tsx
@@ -20,18 +20,12 @@ import InputAdornment from '@mui/material/InputAdornment'
 import * as helpers from '../../../helpers'
 
 export default function FileUploadDialog() {
-  const [errorMessage, setErrorMessage] = React.useState('')
+  const [value, setValue] = React.useState(0)
 
   const handleClose = () => {
     store.closeDialog()
   }
 
-  const [value, setValue] = React.useState(0)
-
-  const [remoteUrlValue, setRemoteUrlValue] = React.useState('')
-
-  const [loading, setLoading] = React.useState(false)
-
   function a11yProps(index: number) {
     return {
       id: `simple-tab-${index}`,
@@ -55,46 +49,6 @@ export default function FileUploadDialog() {
     setValue(newValue)
   }
 
-  const inputFileRef = React.useRef<HTMLInputElement>(null)
-  const inputFolderRef = React.useRef<HTMLInputElement>(null)
-
-  const onAddRemoteTextfieldChange = (url: string) => {
-    if (errorMessage) {
-      setErrorMessage('')
-    } else {
-      setRemoteUrlValue(url)
-    }
-  }
-
-  const onAddRemoteConfirm = async (url: string) => {
-    if (!url) {
-      setErrorMessage('The URL is blank')
-      return
-    }
-
-    if (!helpers.isUrlValid(url)) {
-      setErrorMessage('The URL is not valid')
-      return
-    }
-
-    try {
-      setLoading(true)
-      await store.fetchFile(url)
-      store.openDialog('openLocation')
-    } catch (error) {
-      if (url.includes('docs.google.com/spreadsheets')) {
-        setErrorMessage(
-          'The Google Sheets URL is not valid or the table is not publically available'
-        )
-      } else {
-        setErrorMessage('The URL is not associated with a table')
-      }
-      return
-    } finally {
-      setLoading(false)
-    }
-  }
-
   const isWebkitDirectorySupported = 'webkitdirectory' in document.createElement('input')
   if (!isWebkitDirectorySupported) return null
 
@@ -141,111 +95,188 @@ export default function FileUploadDialog() {
           </Tabs>
         </Box>
         <CustomTabPanel value={value} index={0}>
-          <Box ref={tabRefForHeight}>
-            <Columns columns={2} spacing={4}>
-              <FileSelectBox
-                sx={{
-                  ':hover': {
-                    borderColor: (theme) => theme.palette.primary.main,
-                  },
-                }}
-              >
-                <input
-                  type="file"
-                  multiple
-                  ref={inputFileRef}
-                  onChange={async (ev: React.ChangeEvent<HTMLInputElement>) => {
-                    if (ev.target.files) {
-                      await store.addFiles(ev.target.files)
-                      store.openDialog('openLocation')
-                    }
-                  }}
-                />
-                <Box sx={{ padding: '32px 48px 24px 48px' }}>
-                  <Box>
-                    <img src={iconUploadFileImg} alt="Icon Upload File" />
-                  </Box>
-                  <Box>Add one or more Excel or csv files </Box>
-                  <StyledSelectBox className="file-select__button">
-                    Select
-                  </StyledSelectBox>
-                </Box>
-              </FileSelectBox>
-              <FileSelectBox
-                sx={{
-                  ':hover': {
-                    borderColor: (theme) => theme.palette.primary.main,
-                  },
-                }}
-              >
-                <input
-                  type="file"
-                  multiple
-                  ref={inputFolderRef}
-                  onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
-                    if (ev.target.files) {
-                      store.addFiles(ev.target.files)
-                      store.closeDialog()
-                    }
-                  }}
-                  // @ts-expect-error
-                  webkitdirectory=""
-                />
-                <Box sx={{ padding: '32px 48px 24px 48px' }}>
-                  <Box>
-                    <img src={iconUploadFolderImg} alt="Icon Upload File" />
-                  </Box>
-                  <Box>Add one or more folders</Box>
-                  <StyledSelectBox className="file-select__button">
-                    Select
-                  </StyledSelectBox>
-                </Box>
-              </FileSelectBox>
-            </Columns>
-          </Box>
+          <LocalFileForm tabRefForHeight={tabRefForHeight} />
         </CustomTabPanel>
         <CustomTabPanel value={value} index={1}>
-          <Box sx={{ paddingLeft: '140px', paddingRight: '140px', minHeight: tabHeight }}>
-            <Box
-              sx={{
-                fontSize: '14px',
-              }}
-            >
-              Link to the external table:
-            </Box>
-            <Box sx={{ display: 'flex' }}>
-              <AddRemoteTextfield
-                value={remoteUrlValue}
-                errorMessage={errorMessage}
-                onChange={onAddRemoteTextfieldChange}
-              />
-              {loading ? (
-                <CircularProgress
-                  size={'2rem'}
-                  sx={{
-                    '& .MuiLinearProgress-bar': {
-                      backgroundColor: '#00D1FF',
-                    },
-                    padding: '10px',
-                  }}
-                />
-              ) : null}
-            </Box>
-            <SimpleButton
-              label={'Add'}
-              sx={{ my: 0.5, marginTop: '53px' }}
-              variant="contained"
-              aria-label="accept"
-              disabled={!remoteUrlValue}
-              onClick={() => onAddRemoteConfirm(remoteUrlValue)}
-            />
-          </Box>
+          <RemoteFileForm tabHeight={tabHeight} />
         </CustomTabPanel>
       </DialogContent>
     </Dialog>
   )
 }
 
+function LocalFileForm(props: { tabRefForHeight: React.Ref<HTMLDivElement> }) {
+  const inputFileRef = React.useRef<HTMLInputElement>(null)
+  const inputFolderRef = React.useRef<HTMLInputElement>(null)
+
+  return (
+    <Box ref={props.tabRefForHeight}>
+      <Columns columns={2} spacing={4}>
+        <FileSelectBox
+          sx={{
+            ':hover': {
+              borderColor: (theme) => theme.palette.primary.main,
+            },
+          }}
+        >
+          <input
+            type="file"
+            multiple
+            ref={inputFileRef}
+            onChange={async (ev: React.ChangeEvent<HTMLInputElement>) => {
+              if (ev.target.files) {
+                await store.addFiles(ev.target.files)
+                store.openDialog('openLocation')
+              }
+            }}
+          />
+          <Box sx={{ padding: '32px 48px 24px 48px' }}>
+            <Box>
+              <img src={iconUploadFileImg} alt="Icon Upload File" />
+            </Box>
+            <Box>Add one or more Excel or csv files </Box>
+            <StyledSelectBox className="file-select__button">Select</StyledSelectBox>
+          </Box>
+        </FileSelectBox>
+        <FileSelectBox
+          sx={{
+            ':hover': {
+              borderColor: (theme) => theme.palette.primary.main,
+            },
+          }}
+        >
+          <input
+            type="file"
+            multiple
+            ref={inputFolderRef}
+            onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
+              if (ev.target.files) {
+                store.addFiles(ev.target.files)
+                store.closeDialog()
+              }
+            }}
+            // @ts-expect-error
+            webkitdirectory=""
+          />
+          <Box sx={{ padding: '32px 48px 24px 48px' }}>
+            <Box>
+              <img src={iconUploadFolderImg} alt="Icon Upload File" />
+            </Box>
+            <Box>Add one or more folders</Box>
+            <StyledSelectBox className="file-select__button">Select</StyledSelectBox>
+          </Box>
+        </FileSelectBox>
+      </Columns>
+    </Box>
+  )
+}
+
+function RemoteFileForm(props: { tabHeight: number }) {
+  const [errorMessage, setErrorMessage] = React.useState('')
+  const [loading, setLoading] = React.useState(false)
+  const [value, setValue] = React.useState('')
+
+  const handleChange = (value: string) => {
+    setValue(value)
+
+    if (errorMessage) {
+      setErrorMessage('')
+    }
+  }
+
+  const handleUpload = async () => {
+    if (!value) {
+      setErrorMessage('The URL is blank')
+      return
+    }
+
+    if (!helpers.isUrlValid(value)) {
+      setErrorMessage('The URL is not valid')
+      return
+    }
+
+    try {
+      setLoading(true)
+      await store.fetchFile(value)
+      store.openDialog('openLocation')
+    } catch (error) {
+      if (value.includes('docs.google.com/spreadsheets')) {
+        setErrorMessage(
+          'The Google Sheets URL is not valid or the table is not publically available'
+        )
+      } else {
+        setErrorMessage('The URL is not associated with a table')
+      }
+      return
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Box sx={{ paddingLeft: '140px', paddingRight: '140px', minHeight: props.tabHeight }}>
+      <Box
+        sx={{
+          fontSize: '14px',
+        }}
+      >
+        Link to the external table:
+      </Box>
+      <Box sx={{ display: 'flex' }}>
+        <StyledTextField
+          id="remote-file-input"
+          autoFocus
+          fullWidth
+          size="small"
+          error={!!errorMessage}
+          helperText={errorMessage || ' '}
+          placeholder="Enter or paste URL"
+          InputLabelProps={{
+            sx: {
+              fontSize: '14px',
+            },
+          }}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <img src={iconLinkTextField} alt="" />
+              </InputAdornment>
+            ),
+            sx: {
+              '& ::placeholder': {
+                color: '#D1D4DB',
+                opacity: 1, // otherwise firefox shows a lighter colorS
+                fontSize: '14px',
+              },
+            },
+          }}
+          value={value}
+          onChange={(e) => handleChange(e.target.value)}
+        />
+        {loading ? (
+          <CircularProgress
+            size={'2rem'}
+            sx={{
+              '& .MuiLinearProgress-bar': {
+                backgroundColor: '#00D1FF',
+              },
+              padding: '10px',
+            }}
+          />
+        ) : null}
+      </Box>
+      <SimpleButton
+        label={'Add'}
+        sx={{ my: 0.5, marginTop: '53px' }}
+        variant="contained"
+        aria-label="accept"
+        disabled={!value}
+        onClick={handleUpload}
+      />
+    </Box>
+  )
+}
+
 function CustomTabPanel(props: {
   children?: React.ReactNode
   index: number
@@ -261,48 +292,11 @@ function CustomTabPanel(props: {
       aria-labelledby={`simple-tab-${index}`}
       {...other}
     >
-      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+      <Box sx={{ p: 3 }}>{children}</Box>
     </div>
   )
 }
 
-function AddRemoteTextfield(props: {
-  errorMessage?: string
-  value: string
-  onChange(value: string): void
-}) {
-  return (
-    <StyledTextField
-      fullWidth
-      size="small"
-      error={!!props.errorMessage}
-      helperText={props.errorMessage || ' '}
-      placeholder="Enter or paste URL"
-      InputLabelProps={{
-        sx: {
-          fontSize: '14px',
-        },
-      }}
-      InputProps={{
-        startAdornment: (
-          <InputAdornment position="start">
-            <img src={iconLinkTextField} alt="" />
-          </InputAdornment>
-        ),
-        sx: {
-          '& ::placeholder': {
-            color: '#D1D4DB',
-            opacity: 1, // otherwise firefox shows a lighter colorS
-            fontSize: '14px',
-          },
-        },
-      }}
-      value={props.value}
-      onChange={(e) => props.onChange(e.target.value)}
-    />
-  )
-}
-
 const FileSelectBox = styled(Box)(() => ({
   border: '1px solid #E7E9E9',
   borderRadius: '8px',
diff --git a/package.json b/package.json
index bb168726e..c3d65b2b8 100644
--- a/package.json
+++ b/package.json
@@ -52,9 +52,9 @@
     "@inovua/reactdatagrid-community": "5.10.1",
     "@modyfi/vite-plugin-yaml": "1.1.0",
     "@monaco-editor/react": "4.5.1",
-    "@mui/icons-material": "5.14.1",
-    "@mui/material": "5.14.2",
-    "@mui/system": "5.14.1",
+    "@mui/icons-material": "5.16.7",
+    "@mui/material": "5.16.7",
+    "@mui/system": "5.16.7",
     "@mui/x-date-pickers": "6.10.1",
     "@mui/x-tree-view": "6.0.0-alpha.4",
     "@types/js-yaml": "4.0.5",