diff --git a/docs/src/gatsby-theme-docz/index.js b/docs/src/gatsby-theme-docz/index.js
index 3da76d840..1aba7e002 100644
--- a/docs/src/gatsby-theme-docz/index.js
+++ b/docs/src/gatsby-theme-docz/index.js
@@ -15,7 +15,6 @@ const bsaeComponents = {
 
 const Theme = ({ children }) => {
   const config = useConfig();
-  console.log(config)
   return (
     <ThemeProvider theme={config.themeConfig}>
       <ComponentsProvider components={bsaeComponents}>
diff --git a/packages/plugins/connection-manager/screens/settings.ts b/packages/plugins/connection-manager/screens/settings.ts
index 11274b976..b99696d5f 100644
--- a/packages/plugins/connection-manager/screens/settings.ts
+++ b/packages/plugins/connection-manager/screens/settings.ts
@@ -7,7 +7,9 @@ import { DatabaseDialect } from '@sqltools/core/interface';
 
 const relativeToWorkspace = (file: string) => {
   const fileUri = workspace.asRelativePath(Uri.file(file), true);
-  return file === fileUri ? file : `.${path.sep}${fileUri}`;
+  if (file === fileUri) return file;
+  if (fileUri.startsWith('/') || fileUri.startsWith('.//')) return file;
+  return `.${path.sep}${fileUri}`;
 }
 
 export default class SettingsWebview extends WebviewProvider {
@@ -34,8 +36,8 @@ export default class SettingsWebview extends WebviewProvider {
     });
   }
 
-  private updateConnection = async ({ connInfo, globalSetting, editId }) => {
-    if (connInfo.dialect === DatabaseDialect.SQLite) {
+  private updateConnection = async ({ connInfo, globalSetting, transformToRelative, editId }) => {
+    if (connInfo.dialect === DatabaseDialect.SQLite && transformToRelative) {
       connInfo.database = relativeToWorkspace(connInfo.database);
     }
     return commands.executeCommand(`${EXT_NAME}.updateConnection`, editId, connInfo, globalSetting ? 'Global' : undefined)
@@ -49,8 +51,8 @@ export default class SettingsWebview extends WebviewProvider {
     });
   }
 
-  private createConnection = async ({ connInfo, globalSetting }) => {
-    if (connInfo.dialect === DatabaseDialect.SQLite) {
+  private createConnection = async ({ connInfo, globalSetting, transformToRelative }) => {
+    if (connInfo.dialect === DatabaseDialect.SQLite && transformToRelative) {
       connInfo.database = relativeToWorkspace(connInfo.database);
     }
     return commands.executeCommand(`${EXT_NAME}.addConnection`, connInfo, globalSetting ? 'Global' : undefined)
diff --git a/packages/ui/screens/Settings/Drivers/SQLite.tsx b/packages/ui/screens/Settings/Drivers/SQLite.tsx
index b6ce3dcca..e9de5b52f 100644
--- a/packages/ui/screens/Settings/Drivers/SQLite.tsx
+++ b/packages/ui/screens/Settings/Drivers/SQLite.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import Text from '../Fields/Text';
 import FileInput from '../Fields/FileInput';
 
-const SQLite = ({ settings, updateSettings }) => (
+const SQLite = ({ settings, updateSettings, toggleUseRelative }) => (
   <>
     <Text label='Connection Name*' onChange={name => updateSettings({ name })} value={settings.name} />
-    <FileInput label='Database File*' onChange={database => updateSettings({ database })} value={settings.database} />
+    <FileInput label='Database File*' onChange={({ file: database, transformToRelative }) => (updateSettings({ database }), toggleUseRelative(transformToRelative))} value={settings.database} />
   </>
 );
 // @TODO: add driver specific settings here
diff --git a/packages/ui/screens/Settings/Drivers/lib/GenericSettings.tsx b/packages/ui/screens/Settings/Drivers/lib/GenericSettings.tsx
index 6f18c7e3e..99464681e 100644
--- a/packages/ui/screens/Settings/Drivers/lib/GenericSettings.tsx
+++ b/packages/ui/screens/Settings/Drivers/lib/GenericSettings.tsx
@@ -91,7 +91,7 @@ const GenericSettings = ({ settings, updateSettings, dbFieldName = 'Database', d
         method === ConnectionMethod.SocketFile &&
         <FileInput
           label="Socket File*"
-          onChange={socketPath => updateSettings({ socketPath })}
+          onChange={({ file: socketPath }) => updateSettings({ socketPath })}
           value={settings.socketPath}
           hasError={hasError.socketPath}
         />
diff --git a/packages/ui/screens/Settings/Fields/FileInput.tsx b/packages/ui/screens/Settings/Fields/FileInput.tsx
index 53c1b0b6b..db903f6ca 100644
--- a/packages/ui/screens/Settings/Fields/FileInput.tsx
+++ b/packages/ui/screens/Settings/Fields/FileInput.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 interface State {
   value: string;
   name: string;
+  useRaw: boolean;
 }
 
 interface Props {
@@ -25,11 +26,11 @@ class FileInput extends React.Component<Props, State> {
           name = name.substring(1);
       }
     }
-    this.state = { value, name };
+    this.state = { value, name, useRaw: false };
   }
 
   onChange = () => {
-    return this.props.onChange(this.state.value);
+    return this.props.onChange({ file: this.state.value, transformToRelative: !this.state.useRaw });
   };
 
   onChangeFile = () => {
@@ -39,36 +40,46 @@ class FileInput extends React.Component<Props, State> {
     this.setState({
       value,
       name,
+      useRaw: false
     }, this.onChange);
   }
 
+  onTypePath = (value) => this.setState({ value, name: value, useRaw: true }, this.onChange);
+
   fileField = React.createRef<HTMLInputElement>();
 
   render() {
     return (
       <div className={`field ${this.props.hasError ? 'has-error' : ''}`}>
         <label>{this.props.label}</label>
-        <div style={{ position: 'relative', display: 'flex' }} title={this.state.value}>
+        <div style={{ display: 'flex' }} title={this.state.value}>
           <input
             style={{ flex: 1 }}
             type="text"
-            placeholder="Click to select a file"
+            placeholder="File or remote path"
             value={this.state.name || ''}
-            disabled
-          />
-          <input
-            style={{
-              opacity: 0,
-              position: 'absolute',
-              flex: 1,
-              cursor: 'pointer',
-              width: '100%',
-              padding: '4px 0',
-            }}
-            type="file"
-            ref={this.fileField}
-            onChange={this.onChangeFile}
+            onChange={e => this.onTypePath(e.target.value || '')}
+            disabled={this.props.disabled || false}
           />
+          <button type="button" style={{ position: 'relative' }}>
+            <input
+              style={{
+                opacity: 0,
+                position: 'absolute',
+                flex: 1,
+                cursor: 'pointer',
+                width: '100%',
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+              }}
+              type="file"
+              ref={this.fileField}
+              onChange={this.onChangeFile}
+            />
+            Select file
+          </button>
         </div>
       </div>
     );
diff --git a/packages/ui/screens/Settings/Screen.tsx b/packages/ui/screens/Settings/Screen.tsx
index f1c5e1bcc..737cbca5e 100644
--- a/packages/ui/screens/Settings/Screen.tsx
+++ b/packages/ui/screens/Settings/Screen.tsx
@@ -28,6 +28,7 @@ interface SettingsScreenState {
   action: 'create' | 'update' | 'updateConnectionSuccess' | 'createConnectionSuccess';
   saved?: boolean;
   globalSetting?: boolean;
+  transformToRelative?: boolean;
 }
 
 export default class SettingsScreen extends React.Component<{}, SettingsScreenState> {
@@ -106,6 +107,8 @@ export default class SettingsScreen extends React.Component<{}, SettingsScreenSt
 
   toggleGlobal = globalSetting => this.setState({ globalSetting });
 
+  toggleUseRelative = transformToRelative => this.setState({ transformToRelative });
+
   updateConnectionSettings = (options: Partial<ConnectionInterface> = {}, cb?: any) => this.setState({
     connectionSettings: {
       ...this.state.connectionSettings,
@@ -156,7 +159,8 @@ export default class SettingsScreen extends React.Component<{}, SettingsScreenSt
           payload: {
             editId,
             connInfo,
-            globalSetting: !!this.state.globalSetting
+            globalSetting: !!this.state.globalSetting,
+            transformToRelative: this.state.transformToRelative
           }
         });
       });
@@ -211,6 +215,7 @@ export default class SettingsScreen extends React.Component<{}, SettingsScreenSt
               testConnection={this.testConnection}
               state={this.state}
               toggleGlobal={this.toggleGlobal}
+              toggleUseRelative={this.toggleUseRelative}
             />
           )}
           {step === Step.CONNECTION_CREATED && (
diff --git a/packages/ui/screens/Settings/Widget/ConnectionInfo.tsx b/packages/ui/screens/Settings/Widget/ConnectionInfo.tsx
index 85f5c8d7c..766d7605d 100644
--- a/packages/ui/screens/Settings/Widget/ConnectionInfo.tsx
+++ b/packages/ui/screens/Settings/Widget/ConnectionInfo.tsx
@@ -5,7 +5,7 @@ import './ConnectionInfo.scss';
 import DriverSettings from './../Drivers';
 import Checkbox from '../Fields/Checkbox';
 
-const ConnectionInfo = ({ updateSettings, submit, toggleGlobal, testConnection, state: { connectionSettings, errors = {}, defaultMethod = null, ...state } }) => {
+const ConnectionInfo = ({ updateSettings, submit, toggleGlobal, toggleUseRelative, testConnection, state: { connectionSettings, errors = {}, defaultMethod = null, ...state } }) => {
   const SelectedDriverSettings = DriverSettings[connectionSettings.dialect] || (() => null) as any;
   return (
     <>
@@ -18,6 +18,7 @@ const ConnectionInfo = ({ updateSettings, submit, toggleGlobal, testConnection,
           updateSettings={updateSettings}
           defaultMethod={defaultMethod}
           errors={errors}
+          toggleUseRelative={toggleUseRelative}
         />
         {`${state.action || 'create'}`.startsWith('create') && <Checkbox
           label='Save To Global Settings?'