Merge branch 'add-custom-bridge-to-gui-des-431'

19 files changed, 1120 insertions, 686 deletions

diff --git a/gui/src/renderer/components/AppRouter.tsx b/gui/src/renderer/components/AppRouter.tsx
index 9e4a13adc8..0f85601a92 100644
--- a/gui/src/renderer/components/AppRouter.tsx
+++ b/gui/src/renderer/components/AppRouter.tsx
@@ -12,6 +12,7 @@ import Connect from './Connect';
 import Debug from './Debug';
 import { DeviceRevokedView } from './DeviceRevokedView';
 import { EditApiAccessMethod } from './EditApiAccessMethod';
+import { EditCustomBridge } from './EditCustomBridge';
 import {
   SetupFinished,
   TimeAdded,
@@ -92,6 +93,7 @@ export default function AppRouter() {
             <Route exact path={RoutePath.problemReport} component={ProblemReport} />
             <Route exact path={RoutePath.debug} component={Debug} />
             <Route exact path={RoutePath.selectLocation} component={SelectLocation} />
+            <Route exact path={RoutePath.editCustomBridge} component={EditCustomBridge} />
             <Route exact path={RoutePath.filter} component={Filter} />
           </Switch>
         </TransitionView>
diff --git a/gui/src/renderer/components/ConnectionPanel.tsx b/gui/src/renderer/components/ConnectionPanel.tsx
index 07547363a0..a99140bb43 100644
--- a/gui/src/renderer/components/ConnectionPanel.tsx
+++ b/gui/src/renderer/components/ConnectionPanel.tsx
@@ -6,7 +6,6 @@ import { colors } from '../../config.json';
 import {
   EndpointObfuscationType,
   ProxyType,
-  proxyTypeToString,
   RelayProtocol,
   TunnelType,
   tunnelTypeToString,
@@ -164,10 +163,9 @@ export default class ConnectionPanel extends React.Component<IProps> {
           entry: this.props.entryHostname,
         },
       );
-    } else if (this.props.bridgeInfo?.ip) {
-      return sprintf(messages.pgettext('connection-info', '%(relay)s via %(entry)s'), {
+    } else if (this.props.bridgeInfo !== undefined) {
+      return sprintf(messages.pgettext('connection-info', '%(relay)s via Custom bridge'), {
         relay: this.props.hostname,
-        entry: this.props.bridgeInfo.ip,
       });
     } else {
       return this.props.hostname || '';
@@ -181,7 +179,7 @@ export default class ConnectionPanel extends React.Component<IProps> {
       const tunnelType = tunnelTypeToString(inAddress.tunnelType);
 
       if (bridgeInfo) {
-        const bridgeType = proxyTypeToString(bridgeInfo.bridgeType);
+        const bridgeType = this.bridgeType();
 
         return sprintf(
           // TRANSLATORS: The tunnel type line displayed below the hostname line on the main screen
@@ -201,4 +199,12 @@ export default class ConnectionPanel extends React.Component<IProps> {
       return '';
     }
   }
+
+  private bridgeType() {
+    if (this.props.bridgeHostname && this.props.bridgeInfo?.bridgeType === 'shadowsocks') {
+      return 'Shadowsocks bridge';
+    } else {
+      return 'Custom bridge';
+    }
+  }
 }
diff --git a/gui/src/renderer/components/EditApiAccessMethod.tsx b/gui/src/renderer/components/EditApiAccessMethod.tsx
index b5b3bd6d48..59a5f2ff37 100644
--- a/gui/src/renderer/components/EditApiAccessMethod.tsx
+++ b/gui/src/renderer/components/EditApiAccessMethod.tsx
@@ -1,38 +1,27 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { useParams } from 'react-router';
 import { sprintf } from 'sprintf-js';
 
 import {
-  AccessMethod,
-  AccessMethodSetting,
   CustomProxy,
+  NamedCustomProxy,
   NewAccessMethodSetting,
-  RelayProtocol,
-  ShadowsocksAccessMethod,
-  Socks5LocalAccessMethod,
-  Socks5RemoteAccessMethod,
 } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { useScheduler } from '../../shared/scheduler';
 import { useAppContext } from '../context';
 import { useApiAccessMethodTest } from '../lib/api-access-methods';
 import { useHistory } from '../lib/history';
-import { IpAddress } from '../lib/ip';
 import { useSelector } from '../redux/store';
-import * as Cell from './cell';
-import { SettingsForm, useSettingsFormSubmittable } from './cell/SettingsForm';
-import { SettingsGroup } from './cell/SettingsGroup';
-import { SettingsRadioGroup } from './cell/SettingsRadioGroup';
-import { SettingsRow } from './cell/SettingsRow';
-import { SettingsSelect, SettingsSelectItem } from './cell/SettingsSelect';
-import { SettingsNumberInput, SettingsTextInput } from './cell/SettingsTextInput';
+import { SettingsForm } from './cell/SettingsForm';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
 import { ModalAlert, ModalAlertType } from './Modal';
 import { NavigationBar, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
+import { NamedProxyForm } from './ProxyForm';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
 import { StyledContent, StyledNavigationScrollbars, StyledSettingsContent } from './SettingsStyles';
-import { SmallButton, SmallButtonGroup } from './SmallButton';
+import { SmallButton } from './SmallButton';
 
 export function EditApiAccessMethod() {
   return (
@@ -45,7 +34,7 @@ export function EditApiAccessMethod() {
 function AccessMethodForm() {
   const history = useHistory();
   const { addApiAccessMethod, updateApiAccessMethod } = useAppContext();
-  const methods = useSelector((state) => state.settings.apiAccessMethods);
+  const methods = useSelector((state) => state.settings.apiAccessMethods.custom);
 
   const [testing, testResult, testApiAccessMethod, resetTestResult] = useApiAccessMethodTest(
     false,
@@ -55,19 +44,9 @@ function AccessMethodForm() {
 
   // Use id in url to figure out which method is to be edited. undefined means this is a new method.
   const { id } = useParams<{ id: string | undefined }>();
-  // Ugly way of iterating over all access methods, but it works.
-  const method = [methods.direct, methods.mullvadBridges, ...methods.custom].find(
-    (method) => method.id === id,
-  );
-
-  const updatedMethod = useRef<NewAccessMethodSetting | undefined>(method);
-  const updateMethod = useCallback(
-    (method: NewAccessMethodSetting) => (updatedMethod.current = method),
-    [],
-  );
+  const method = methods.find((method) => method.id === id);
 
-  // Contains form submittability to know whether or not to enable the Add/Save button.
-  const formSubmittable = useSettingsFormSubmittable();
+  const updatedMethod = useRef<NewAccessMethodSetting<CustomProxy> | undefined>(method);
 
   const save = useCallback(() => {
     if (updatedMethod.current !== undefined) {
@@ -81,15 +60,20 @@ function AccessMethodForm() {
     }
   }, [updatedMethod.current, id]);
 
-  const onSave = useCallback(async () => {
-    if (
-      updatedMethod.current !== undefined &&
-      (await testApiAccessMethod(updatedMethod.current as CustomProxy))
-    ) {
-      // Hide the save dialog after 1.5 seconds.
-      saveScheduler.schedule(save, 1500);
-    }
-  }, [updatedMethod, save, history.pop]);
+  const onSave = useCallback(
+    async (newMethod: NamedCustomProxy) => {
+      const enabled = id === undefined ? true : method?.enabled ?? true;
+      updatedMethod.current = { ...newMethod, enabled };
+      if (
+        updatedMethod.current !== undefined &&
+        (await testApiAccessMethod(updatedMethod.current as CustomProxy))
+      ) {
+        // Hide the save dialog after 1.5 seconds.
+        saveScheduler.schedule(save, 1500);
+      }
+    },
+    [updatedMethod, save, history.pop],
+  );
 
   const title = getTitle(id === undefined);
   const subtitle = getSubtitle(id === undefined);
@@ -116,15 +100,8 @@ function AccessMethodForm() {
                   {id !== undefined && method === undefined ? (
                     <span>Failed to open method</span>
                   ) : (
-                    <AccessMethodFormImpl method={method} updateMethod={updateMethod} />
+                    <NamedProxyForm proxy={method} onSave={onSave} onCancel={history.pop} />
                   )}
-
-                  <SmallButtonGroup>
-                    <SmallButton onClick={history.pop}>{messages.gettext('Cancel')}</SmallButton>
-                    <SmallButton onClick={onSave} disabled={!formSubmittable}>
-                      {id === undefined ? messages.gettext('Add') : messages.gettext('Save')}
-                    </SmallButton>
-                  </SmallButtonGroup>
                 </StyledSettingsContent>
 
                 <TestingDialog
@@ -257,387 +234,3 @@ function getTestingDialogButtons(type: ModalAlertType, save: () => void, cancel:
       return [cancelButton];
   }
 }
-
-interface EditApiAccessMethodImplProps {
-  method?: AccessMethodSetting;
-  updateMethod: (method: NewAccessMethodSetting) => void;
-}
-
-function AccessMethodFormImpl(props: EditApiAccessMethodImplProps) {
-  // Available method types.
-  const types = useMemo<Array<SettingsSelectItem<AccessMethod['type']>>>(
-    () => [
-      { value: 'shadowsocks', label: 'Shadowsocks' },
-      {
-        value: 'socks5-remote',
-        label: messages.pgettext('api-access-methods-view', 'SOCKS5 remote'),
-      },
-      {
-        value: 'socks5-local',
-        label: messages.pgettext('api-access-methods-view', 'SOCKS5 local'),
-      },
-    ],
-    [],
-  );
-  const [type, setType] = useState(props.method?.type ?? 'shadowsocks');
-
-  // State for the name input.
-  const name = useRef(props.method?.name ?? '');
-  const method = useRef<AccessMethod | undefined>(props.method);
-
-  // When the form makes up a valid method the parent is updated.
-  const onUpdate = useCallback(() => {
-    if (method.current !== undefined && name.current !== '') {
-      props.updateMethod({ ...method.current, name: name.current, enabled: true });
-    }
-  }, []);
-
-  const updateName = useCallback(
-    (value: string) => {
-      name.current = value;
-      onUpdate();
-    },
-    [onUpdate],
-  );
-
-  const updateMethod = useCallback(
-    (value: AccessMethod) => {
-      method.current = value;
-      onUpdate();
-    },
-    [onUpdate],
-  );
-
-  return (
-    <>
-      <SettingsRow label={messages.gettext('Name')}>
-        <SettingsTextInput
-          defaultValue={name.current}
-          placeholder={messages.pgettext('api-access-methods-view', 'Enter name')}
-          onUpdate={updateName}
-        />
-      </SettingsRow>
-
-      <SettingsRow label={messages.gettext('Type')}>
-        <SettingsSelect defaultValue={type} onUpdate={setType} items={types} />
-      </SettingsRow>
-
-      {type === 'shadowsocks' && (
-        <EditShadowsocks
-          onUpdate={updateMethod}
-          method={props.method?.type === 'shadowsocks' ? props.method : undefined}
-        />
-      )}
-      {type === 'socks5-remote' && (
-        <EditSocks5Remote
-          onUpdate={updateMethod}
-          method={props.method?.type === 'socks5-remote' ? props.method : undefined}
-        />
-      )}
-      {type === 'socks5-local' && (
-        <EditSocks5Local
-          onUpdate={updateMethod}
-          method={props.method?.type === 'socks5-local' ? props.method : undefined}
-        />
-      )}
-    </>
-  );
-}
-
-interface EditMethodProps<T> {
-  method?: T;
-  onUpdate: (method: AccessMethod) => void;
-}
-
-function EditShadowsocks(props: EditMethodProps<ShadowsocksAccessMethod>) {
-  const [ip, setIp] = useState(props.method?.ip ?? '');
-  const [port, setPort] = useState(props.method?.port);
-  const [password, setPassword] = useState(props.method?.password ?? '');
-  const [cipher, setCipher] = useState(props.method?.cipher);
-
-  const ciphers = useMemo(
-    () =>
-      [
-        { value: 'aes-128-cfb', label: 'aes-128-cfb' },
-        { value: 'aes-128-cfb1', label: 'aes-128-cfb1' },
-        { value: 'aes-128-cfb8', label: 'aes-128-cfb8' },
-        { value: 'aes-128-cfb128', label: 'aes-128-cfb128' },
-        { value: 'aes-256-cfb', label: 'aes-256-cfb' },
-        { value: 'aes-256-cfb1', label: 'aes-256-cfb1' },
-        { value: 'aes-256-cfb8', label: 'aes-256-cfb8' },
-        { value: 'aes-256-cfb128', label: 'aes-256-cfb128' },
-        { value: 'rc4', label: 'rc4' },
-        { value: 'rc4-md5', label: 'rc4-md5' },
-        { value: 'chacha20', label: 'chacha20' },
-        { value: 'salsa20', label: 'salsa20' },
-        { value: 'chacha20-ietf', label: 'chacha20-ietf' },
-        { value: 'aes-128-gcm', label: 'aes-128-gcm' },
-        { value: 'aes-256-gcm', label: 'aes-256-gcm' },
-        { value: 'chacha20-ietf-poly1305', label: 'chacha20-ietf-poly1305' },
-        { value: 'xchacha20-ietf-poly1305', label: 'xchacha20-ietf-poly1305' },
-        { value: 'aes-128-pmac-siv', label: 'aes-128-pmac-siv' },
-        { value: 'aes-256-pmac-siv', label: 'aes-256-pmac-siv' },
-      ].sort((a, b) => a.label.localeCompare(b.label)),
-    [],
-  );
-
-  // Report back to form component with the method values when all required values are set.
-  useEffect(() => {
-    if (ip !== '' && port !== undefined && cipher !== undefined) {
-      props.onUpdate({
-        type: 'shadowsocks',
-        ip,
-        port,
-        password,
-        cipher,
-      });
-    }
-  }, [ip, port, password, cipher]);
-
-  return (
-    <SettingsGroup title={messages.pgettext('api-access-methods-view', 'Server details')}>
-      <SettingsRow
-        label={messages.pgettext('api-access-methods-view', 'Server')}
-        errorMessage={messages.pgettext(
-          'api-access-methods-view',
-          'Please enter a valid IPv4 or IPv6 address.',
-        )}>
-        <SettingsTextInput
-          value={ip}
-          placeholder={messages.pgettext('api-access-methods-view', 'Enter IP')}
-          onUpdate={setIp}
-          validate={validateIp}
-        />
-      </SettingsRow>
-
-      <SettingsRow
-        label={messages.gettext('Port')}
-        errorMessage={messages.pgettext(
-          'api-access-methods-view',
-          'Please enter a valid remote server port.',
-        )}>
-        <SettingsNumberInput
-          value={port ?? ''}
-          placeholder={messages.pgettext('api-access-methods-view', 'Enter port')}
-          onUpdate={setPort}
-          validate={validatePort}
-        />
-      </SettingsRow>
-
-      <SettingsRow label={messages.gettext('Password')}>
-        <SettingsTextInput
-          value={password}
-          placeholder={messages.gettext('Optional')}
-          onUpdate={setPassword}
-          optionalInForm
-        />
-      </SettingsRow>
-
-      <SettingsRow label={messages.gettext('Cipher')}>
-        <SettingsSelect
-          data-testid="ciphers"
-          direction="up"
-          defaultValue={cipher}
-          onUpdate={setCipher}
-          items={ciphers}
-        />
-      </SettingsRow>
-    </SettingsGroup>
-  );
-}
-
-function EditSocks5Remote(props: EditMethodProps<Socks5RemoteAccessMethod>) {
-  const [ip, setIp] = useState(props.method?.ip ?? '');
-  const [port, setPort] = useState(props.method?.port);
-  const [authentication, setAuthentication] = useState(props.method?.authentication !== undefined);
-  const [username, setUsername] = useState(props.method?.authentication?.username ?? '');
-  const [password, setPassword] = useState(props.method?.authentication?.password ?? '');
-
-  // Report back to form component with the method values when all required values are set.
-  useEffect(() => {
-    if (
-      ip !== '' &&
-      port !== undefined &&
-      (!authentication || (username !== '' && password !== ''))
-    ) {
-      props.onUpdate({
-        type: 'socks5-remote',
-        ip,
-        port,
-        authentication: authentication ? { username, password } : undefined,
-      });
-    }
-  }, [ip, port, username, password]);
-
-  return (
-    <SettingsGroup title={messages.pgettext('api-access-methods-view', 'Remote Server')}>
-      <SettingsRow
-        label={messages.pgettext('api-access-methods-view', 'Server')}
-        errorMessage={messages.pgettext(
-          'api-access-methods-view',
-          'Please enter a valid IPv4 or IPv6 address.',
-        )}>
-        <SettingsTextInput
-          value={ip}
-          placeholder={messages.pgettext('api-access-methods-view', 'Enter IP')}
-          onUpdate={setIp}
-          validate={validateIp}
-        />
-      </SettingsRow>
-
-      <SettingsRow
-        label={messages.gettext('Port')}
-        errorMessage={messages.pgettext(
-          'api-access-methods-view',
-          'Please enter a valid remote server port.',
-        )}>
-        <SettingsNumberInput
-          value={port ?? ''}
-          placeholder={messages.pgettext('api-access-methods-view', 'Enter port')}
-          onUpdate={setPort}
-          validate={validatePort}
-        />
-      </SettingsRow>
-
-      <SettingsRow label={messages.pgettext('api-access-methods-view', 'Authentication')}>
-        <Cell.Switch isOn={authentication} onChange={setAuthentication} />
-      </SettingsRow>
-
-      {authentication && (
-        <>
-          <SettingsRow label={messages.gettext('Username')}>
-            <SettingsTextInput
-              value={username}
-              placeholder={messages.gettext('Required')}
-              onUpdate={setUsername}
-            />
-          </SettingsRow>
-
-          <SettingsRow label={messages.gettext('Password')}>
-            <SettingsTextInput
-              value={password}
-              placeholder={messages.gettext('Required')}
-              onUpdate={setPassword}
-            />
-          </SettingsRow>
-        </>
-      )}
-    </SettingsGroup>
-  );
-}
-
-function EditSocks5Local(props: EditMethodProps<Socks5LocalAccessMethod>) {
-  const [remoteIp, setRemoteIp] = useState(props.method?.remoteIp ?? '');
-  const [remotePort, setRemotePort] = useState(props.method?.remotePort);
-  const [remoteTransportProtocol, setRemoteTransportProtocol] = useState<RelayProtocol>(
-    props.method?.remoteTransportProtocol ?? 'tcp',
-  );
-  const [localPort, setLocalPort] = useState(props.method?.localPort);
-
-  const remoteTransportProtocols = useMemo<Array<SettingsSelectItem<RelayProtocol>>>(
-    () => [
-      { value: 'tcp', label: 'TCP' },
-      { value: 'udp', label: 'UDP' },
-    ],
-    [],
-  );
-
-  useEffect(() => {
-    if (remoteIp !== '' && remotePort !== undefined && localPort !== undefined) {
-      props.onUpdate({
-        type: 'socks5-local',
-        remoteIp,
-        remotePort,
-        remoteTransportProtocol,
-        localPort,
-      });
-    }
-  }, [remoteIp, remotePort, localPort, remoteTransportProtocol]);
-
-  return (
-    <>
-      <SettingsGroup
-        title={messages.pgettext('api-access-methods-view', 'Local SOCKS5 server')}
-        infoMessage={messages.pgettext(
-          'api-access-methods-view',
-          'The TCP port where your local SOCKS5 server is listening.',
-        )}>
-        <SettingsRow
-          label={messages.gettext('Port')}
-          errorMessage={messages.pgettext(
-            'api-access-methods-view',
-            'Please enter a valid localhost port.',
-          )}>
-          <SettingsNumberInput
-            value={localPort}
-            placeholder={messages.pgettext('api-access-methods-view', 'Enter port')}
-            onUpdate={setLocalPort}
-            validate={validatePort}
-          />
-        </SettingsRow>
-      </SettingsGroup>
-
-      <SettingsGroup
-        title={messages.pgettext('api-access-methods-view', 'Remote Server')}
-        infoMessage={[
-          messages.pgettext(
-            'api-access-methods-view',
-            'The app needs the remote server details, where your local SOCKS5 server will forward your traffic.',
-          ),
-          messages.pgettext(
-            'api-access-methods-view',
-            'This is needed so our app can allow that traffic in the firewall.',
-          ),
-        ]}>
-        <SettingsRow
-          label={messages.pgettext('api-access-methods-view', 'Server')}
-          errorMessage={messages.pgettext(
-            'api-access-methods-view',
-            'Please enter a valid IPv4 or IPv6 address.',
-          )}>
-          <SettingsTextInput
-            value={remoteIp}
-            placeholder={messages.pgettext('api-access-methods-view', 'Enter IP')}
-            onUpdate={setRemoteIp}
-            validate={validateIp}
-          />
-        </SettingsRow>
-
-        <SettingsRow
-          label={messages.gettext('Port')}
-          errorMessage={messages.pgettext(
-            'api-access-methods-view',
-            'Please enter a valid remote server port.',
-          )}>
-          <SettingsNumberInput
-            value={remotePort ?? ''}
-            placeholder={messages.pgettext('api-access-methods-view', 'Enter port')}
-            onUpdate={setRemotePort}
-            validate={validatePort}
-          />
-        </SettingsRow>
-
-        <SettingsRow label={messages.pgettext('api-access-methods-view', 'Transport protocol')}>
-          <SettingsRadioGroup<'tcp' | 'udp'>
-            defaultValue={remoteTransportProtocol}
-            onUpdate={setRemoteTransportProtocol}
-            items={remoteTransportProtocols}
-          />
-        </SettingsRow>
-      </SettingsGroup>
-    </>
-  );
-}
-
-function validateIp(ip: string): boolean {
-  try {
-    void IpAddress.fromString(ip);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-function validatePort(port: number): boolean {
-  return port > 0 && port <= 65535;
-}
diff --git a/gui/src/renderer/components/EditCustomBridge.tsx b/gui/src/renderer/components/EditCustomBridge.tsx
new file mode 100644
index 0000000000..2692217ea0
--- /dev/null
+++ b/gui/src/renderer/components/EditCustomBridge.tsx
@@ -0,0 +1,116 @@
+import { useCallback } from 'react';
+
+import { CustomProxy } from '../../shared/daemon-rpc-types';
+import { messages } from '../../shared/gettext';
+import { useBridgeSettingsUpdater } from '../lib/constraint-updater';
+import { useHistory } from '../lib/history';
+import { useBoolean } from '../lib/utilityHooks';
+import { useSelector } from '../redux/store';
+import { SettingsForm } from './cell/SettingsForm';
+import { BackAction } from './KeyboardNavigation';
+import { Layout, SettingsContainer } from './Layout';
+import { ModalAlert, ModalAlertType } from './Modal';
+import { NavigationBar, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
+import { ProxyForm } from './ProxyForm';
+import SettingsHeader, { HeaderTitle } from './SettingsHeader';
+import { StyledContent, StyledNavigationScrollbars, StyledSettingsContent } from './SettingsStyles';
+import { SmallButton, SmallButtonColor } from './SmallButton';
+
+export function EditCustomBridge() {
+  return (
+    <SettingsForm>
+      <CustomBridgeForm />
+    </SettingsForm>
+  );
+}
+
+function CustomBridgeForm() {
+  const history = useHistory();
+  const bridgeSettingsUpdater = useBridgeSettingsUpdater();
+  const bridgeSettings = useSelector((state) => state.settings.bridgeSettings);
+
+  const [deleteDialogVisible, showDeleteDialog, hideDeleteDialog] = useBoolean();
+
+  // If there are no custom bridge settings, we should prompt the user to add a custom bridge.
+  // Otherwise, we should prompt them to edit the existing custom bridge settings.
+  const title =
+    bridgeSettings.custom === undefined
+      ? messages.pgettext('custom-bridge', 'Add custom bridge')
+      : messages.pgettext('custom-bridge', 'Edit custom bridge');
+
+  const onSave = useCallback(
+    (newBridge: CustomProxy) => {
+      void bridgeSettingsUpdater((bridgeSettings) => {
+        bridgeSettings.type = 'custom';
+        bridgeSettings.custom = newBridge;
+        return bridgeSettings;
+      });
+      history.pop();
+    },
+    [bridgeSettingsUpdater, history.pop],
+  );
+
+  const onDelete = useCallback(() => {
+    if (bridgeSettings.custom !== undefined) {
+      hideDeleteDialog();
+      void bridgeSettingsUpdater((bridgeSettings) => {
+        bridgeSettings.type = 'normal';
+        delete bridgeSettings.custom;
+        return bridgeSettings;
+      });
+      history.pop();
+    }
+  }, [bridgeSettingsUpdater, history.pop]);
+
+  return (
+    <BackAction action={history.pop}>
+      <Layout>
+        <SettingsContainer>
+          <NavigationContainer>
+            <NavigationBar>
+              <NavigationItems>
+                <TitleBarItem>{title}</TitleBarItem>
+              </NavigationItems>
+            </NavigationBar>
+
+            <StyledNavigationScrollbars fillContainer>
+              <StyledContent>
+                <SettingsHeader>
+                  <HeaderTitle>{title}</HeaderTitle>
+                </SettingsHeader>
+
+                <StyledSettingsContent>
+                  <ProxyForm
+                    proxy={bridgeSettings.custom}
+                    onSave={onSave}
+                    onCancel={history.pop}
+                    onDelete={bridgeSettings.custom === undefined ? undefined : showDeleteDialog}
+                  />
+                </StyledSettingsContent>
+
+                <ModalAlert
+                  isOpen={deleteDialogVisible}
+                  type={ModalAlertType.warning}
+                  gridButtons={[
+                    <SmallButton key="cancel" onClick={hideDeleteDialog}>
+                      {messages.gettext('Cancel')}
+                    </SmallButton>,
+                    <SmallButton key="delete" color={SmallButtonColor.red} onClick={onDelete}>
+                      {messages.gettext('Delete')}
+                    </SmallButton>,
+                  ]}
+                  close={hideDeleteDialog}
+                  title={messages.pgettext('custom-bridge', 'Delete custom bridge?')}
+                  message={messages.pgettext(
+                    'custom-bridge',
+                    'Deleting the custom bridge will take you back to the select location view and the Automatic option will be selected instead.',
+                  )}
+                />
+              </StyledContent>
+            </StyledNavigationScrollbars>
+          </NavigationContainer>
+        </SettingsContainer>
+      </Layout>
+    </BackAction>
+  );
+}
diff --git a/gui/src/renderer/components/OpenVpnSettings.tsx b/gui/src/renderer/components/OpenVpnSettings.tsx
index 679794d831..dee1e64089 100644
--- a/gui/src/renderer/components/OpenVpnSettings.tsx
+++ b/gui/src/renderer/components/OpenVpnSettings.tsx
@@ -18,13 +18,12 @@ import { useHistory } from '../lib/history';
 import { formatHtml } from '../lib/html-formatter';
 import { useBoolean } from '../lib/utilityHooks';
 import { useSelector } from '../redux/store';
-import * as AppButton from './AppButton';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
 import Selector, { SelectorItem } from './cell/Selector';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
-import { ModalAlert, ModalAlertType } from './Modal';
+import { ModalAlert, ModalAlertType, ModalMessage } from './Modal';
 import {
   NavigationBar,
   NavigationContainer,
@@ -33,6 +32,7 @@ import {
   TitleBarItem,
 } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
+import { SmallButton } from './SmallButton';
 
 const MIN_MSSFIX_VALUE = 1000;
 const MAX_MSSFIX_VALUE = 1450;
@@ -308,6 +308,8 @@ function BridgeModeSelector() {
     await setBridgeState('on');
   }, [hideConfirmationDialog, setBridgeState]);
 
+  const footerText = bridgeModeFooterText(bridgeState === 'on', tunnelProtocol, transportProtocol);
+
   return (
     <>
       <AriaInputGroup>
@@ -317,31 +319,57 @@ function BridgeModeSelector() {
               // TRANSLATORS: The title for the shadowsocks bridge selector section.
               messages.pgettext('openvpn-settings-view', 'Bridge mode')
             }
+            infoTitle={messages.pgettext('openvpn-settings-view', 'Bridge mode')}
+            details={
+              <>
+                <ModalMessage>
+                  {sprintf(
+                    // TRANSLATORS: This is used as a description for the bridge mode
+                    // TRANSLATORS: setting.
+                    // TRANSLATORS: Available placeholders:
+                    // TRANSLATORS: %(openvpn)s - will be replaced with OpenVPN
+                    messages.pgettext(
+                      'openvpn-settings-view',
+                      'Helps circumvent censorship, by routing your traffic through a bridge server before reaching an %(openvpn)s server. Obfuscation is added to make fingerprinting harder.',
+                    ),
+                    { openvpn: strings.openvpn },
+                  )}
+                </ModalMessage>
+                <ModalMessage>
+                  {messages.gettext('This setting increases latency. Use only if needed.')}
+                </ModalMessage>
+              </>
+            }
             items={options}
             value={bridgeState}
             onSelect={onSelectBridgeState}
             automaticValue={'auto' as const}
           />
         </StyledSelectorContainer>
-        <Cell.CellFooter>
-          <AriaDescription>
-            <Cell.CellFooterText>
-              {bridgeModeFooterText(tunnelProtocol, transportProtocol)}
-            </Cell.CellFooterText>
-          </AriaDescription>
-        </Cell.CellFooter>
+        {footerText !== undefined && (
+          <Cell.CellFooter>
+            <AriaDescription>
+              <Cell.CellFooterText>{footerText}</Cell.CellFooterText>
+            </AriaDescription>
+          </Cell.CellFooter>
+        )}
       </AriaInputGroup>
       <ModalAlert
         isOpen={confirmationDialogVisible}
         type={ModalAlertType.caution}
-        message={messages.gettext('This setting increases latency. Use only if needed.')}
-        buttons={[
-          <AppButton.RedButton key="confirm" onClick={confirmBridgeState}>
-            {messages.gettext('Enable anyway')}
-          </AppButton.RedButton>,
-          <AppButton.BlueButton key="back" onClick={hideConfirmationDialog}>
-            {messages.gettext('Back')}
-          </AppButton.BlueButton>,
+        title={messages.pgettext('openvpn-settings-view', 'Enable bridge mode?')}
+        message={
+          // TRANSLATORS: Warning shown in dialog to users when they enable setting that increases
+          // TRANSLATORS: network latency (decreases performance).
+          messages.gettext('This setting increases latency. Use only if needed.')
+        }
+        gridButtons={[
+          <SmallButton key="cancel" onClick={hideConfirmationDialog}>
+            {messages.gettext('Cancel')}
+          </SmallButton>,
+          <SmallButton key="confirm" onClick={confirmBridgeState}>
+            {messages.gettext('Enable')}
+          </SmallButton>,
         ]}
         close={hideConfirmationDialog}
       />
@@ -350,10 +378,18 @@ function BridgeModeSelector() {
 }
 
 function bridgeModeFooterText(
+  bridgeModeOn: boolean,
   tunnelProtocol: TunnelProtocol | null,
   transportProtocol: RelayProtocol | null,
-) {
-  if (tunnelProtocol !== 'openvpn') {
+): React.ReactNode | void {
+  if (bridgeModeOn) {
+    // TRANSLATORS: This text is shown beneath the bridge mode setting to instruct users how to
+    // TRANSLATORS: configure the feature further.
+    return messages.pgettext(
+      'openvpn-settings-view',
+      'To select a specific bridge server, go to the Select location view.',
+    );
+  } else if (tunnelProtocol !== 'openvpn') {
     return formatHtml(
       sprintf(
         // TRANSLATORS: This is used to instruct users how to make the bridge mode setting
@@ -391,18 +427,6 @@ function bridgeModeFooterText(
         },
       ),
     );
-  } else {
-    return sprintf(
-      // TRANSLATORS: This is used as a description for the bridge mode
-      // TRANSLATORS: setting.
-      // TRANSLATORS: Available placeholders:
-      // TRANSLATORS: %(openvpn)s - will be replaced with OpenVPN
-      messages.pgettext(
-        'openvpn-settings-view',
-        'Helps circumvent censorship, by routing your traffic through a bridge server before reaching an %(openvpn)s server. Obfuscation is added to make fingerprinting harder.',
-      ),
-      { openvpn: strings.openvpn },
-    );
   }
 }
 
diff --git a/gui/src/renderer/components/ProxyForm.tsx b/gui/src/renderer/components/ProxyForm.tsx
new file mode 100644
index 0000000000..5fbcf34d0f
--- /dev/null
+++ b/gui/src/renderer/components/ProxyForm.tsx
@@ -0,0 +1,532 @@
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React from 'react';
+
+import {
+  CustomProxy,
+  NamedCustomProxy,
+  RelayProtocol,
+  ShadowsocksCustomProxy,
+  Socks5LocalCustomProxy,
+  Socks5RemoteCustomProxy,
+} from '../../shared/daemon-rpc-types';
+import { messages } from '../../shared/gettext';
+import { IpAddress } from '../lib/ip';
+import * as Cell from './cell';
+import { SettingsForm, useSettingsFormSubmittable } from './cell/SettingsForm';
+import { SettingsGroup } from './cell/SettingsGroup';
+import { SettingsRadioGroup } from './cell/SettingsRadioGroup';
+import { SettingsRow } from './cell/SettingsRow';
+import { SettingsSelect, SettingsSelectItem } from './cell/SettingsSelect';
+import { SettingsNumberInput, SettingsTextInput } from './cell/SettingsTextInput';
+import {
+  SmallButton,
+  SmallButtonColor,
+  SmallButtonGroup,
+  SmallButtonGroupStart,
+} from './SmallButton';
+
+interface ProxyFormContext {
+  proxy?: CustomProxy;
+  setProxy: (proxy: CustomProxy) => void;
+  onSave: () => void;
+  onCancel: () => void;
+  onDelete?: () => void;
+}
+
+const proxyFormContext = React.createContext<ProxyFormContext>({
+  get proxy(): CustomProxy {
+    throw new Error('Missing ProxyFromContext provider');
+  },
+  setProxy(): void {
+    throw new Error('Missing ProxyFromContext provider');
+  },
+  onSave(): void {
+    throw new Error('Missing ProxyFromContext provider');
+  },
+  onCancel(): void {
+    throw new Error('Missing ProxyFromContext provider');
+  },
+  onDelete(): void {
+    throw new Error('Missing ProxyFromContext provider');
+  },
+});
+
+interface ProxyFormContextProviderProps {
+  proxy?: CustomProxy;
+  onSave: (proxy: CustomProxy) => void;
+  onCancel: () => void;
+  onDelete?: () => void;
+}
+
+function ProxyFormContextProvider(props: React.PropsWithChildren<ProxyFormContextProviderProps>) {
+  const [proxy, setProxy] = useState<CustomProxy | undefined>(props.proxy);
+
+  const onSave = useCallback(() => {
+    if (proxy !== undefined) {
+      props.onSave(proxy);
+    }
+  }, [proxy, props.onSave]);
+
+  const value = useMemo(
+    () => ({ proxy, setProxy, onSave, onCancel: props.onCancel, onDelete: props.onDelete }),
+    [proxy, onSave, props.onCancel, props.onDelete],
+  );
+
+  return <proxyFormContext.Provider value={value}>{props.children}</proxyFormContext.Provider>;
+}
+
+export function ProxyForm(props: ProxyFormContextProviderProps) {
+  return (
+    <ProxyFormContextProvider {...props}>
+      <SettingsForm>
+        <ProxyFormInner />
+        <ProxyFormButtons />
+      </SettingsForm>
+    </ProxyFormContextProvider>
+  );
+}
+
+interface NamedProxyFormContext {
+  name?: string;
+  setName: (name: string) => void;
+}
+
+const namedProxyFormContext = React.createContext<NamedProxyFormContext>({
+  get name(): string {
+    throw new Error('Missing NamedProxyFromContext provider');
+  },
+  setName(): void {
+    throw new Error('Missing NamedProxyFromContext provider');
+  },
+});
+
+interface NamedProxyFormContainerProps
+  extends Omit<ProxyFormContextProviderProps, 'proxy' | 'onSave'> {
+  proxy?: NamedCustomProxy;
+  onSave: (proxy: NamedCustomProxy) => void;
+}
+
+export function NamedProxyForm(props: NamedProxyFormContainerProps) {
+  const { onSave, ...otherProps } = props;
+
+  const [name, setName] = useState<string>(props.proxy?.name ?? '');
+
+  const save = useCallback(
+    (proxy: CustomProxy) => {
+      if (name !== '') {
+        onSave({ ...proxy, name });
+      }
+    },
+    [name, onSave],
+  );
+
+  const nameContextValue = useMemo(() => ({ name, setName }), [name]);
+
+  return (
+    <namedProxyFormContext.Provider value={nameContextValue}>
+      <ProxyFormContextProvider {...otherProps} onSave={save}>
+        <SettingsForm>
+          <ProxyFormNameField />
+          <ProxyFormInner />
+          <ProxyFormButtons />
+        </SettingsForm>
+      </ProxyFormContextProvider>
+    </namedProxyFormContext.Provider>
+  );
+}
+
+function ProxyFormNameField() {
+  const { name, setName } = useContext(namedProxyFormContext);
+
+  return (
+    <SettingsRow label={messages.gettext('Name')}>
+      <SettingsTextInput
+        defaultValue={name}
+        placeholder={messages.pgettext('api-access-methods-view', 'Enter name')}
+        onUpdate={setName}
+      />
+    </SettingsRow>
+  );
+}
+
+export function ProxyFormButtons() {
+  const { proxy, onSave, onCancel, onDelete } = useContext(proxyFormContext);
+
+  // Contains form submittability to know whether or not to enable the Add/Save button.
+  const formSubmittable = useSettingsFormSubmittable();
+
+  return (
+    <SmallButtonGroup>
+      {onDelete !== undefined && (
+        <SmallButtonGroupStart>
+          <SmallButton color={SmallButtonColor.red} onClick={onDelete}>
+            {messages.gettext('Delete')}
+          </SmallButton>
+        </SmallButtonGroupStart>
+      )}
+      <SmallButton onClick={onCancel}>{messages.gettext('Cancel')}</SmallButton>
+      <SmallButton onClick={onSave} disabled={!formSubmittable}>
+        {proxy === undefined ? messages.gettext('Add') : messages.gettext('Save')}
+      </SmallButton>
+    </SmallButtonGroup>
+  );
+}
+
+function ProxyFormInner() {
+  const { proxy, setProxy } = useContext(proxyFormContext);
+
+  // Available custom proxies
+  const types = useMemo<Array<SettingsSelectItem<CustomProxy['type']>>>(
+    () => [
+      { value: 'shadowsocks', label: 'Shadowsocks' },
+      {
+        value: 'socks5-remote',
+        label: messages.pgettext('api-access-methods-view', 'SOCKS5 remote'),
+      },
+      {
+        value: 'socks5-local',
+        label: messages.pgettext('api-access-methods-view', 'SOCKS5 local'),
+      },
+    ],
+    [],
+  );
+  const [type, setType] = useState(proxy?.type ?? 'shadowsocks');
+  const proxyRef = useRef<CustomProxy | undefined>(proxy);
+
+  const updateProxy = useCallback(
+    (value: CustomProxy) => {
+      proxyRef.current = value;
+
+      // When the form makes up a valid proxy the parent is updated.
+      if (proxyRef.current !== undefined) {
+        setProxy(proxyRef.current);
+      }
+    },
+    [setProxy],
+  );
+
+  return (
+    <>
+      <SettingsRow label={messages.gettext('Type')}>
+        <SettingsSelect defaultValue={type} onUpdate={setType} items={types} />
+      </SettingsRow>
+
+      {type === 'shadowsocks' && (
+        <EditShadowsocks
+          onUpdate={updateProxy}
+          proxy={proxy?.type === 'shadowsocks' ? proxy : undefined}
+        />
+      )}
+      {type === 'socks5-remote' && (
+        <EditSocks5Remote
+          onUpdate={updateProxy}
+          proxy={proxy?.type === 'socks5-remote' ? proxy : undefined}
+        />
+      )}
+      {type === 'socks5-local' && (
+        <EditSocks5Local
+          onUpdate={updateProxy}
+          proxy={proxy?.type === 'socks5-local' ? proxy : undefined}
+        />
+      )}
+    </>
+  );
+}
+
+interface EditProxyProps<T> {
+  proxy?: T;
+  onUpdate: (proxy: CustomProxy) => void;
+}
+
+function EditShadowsocks(props: EditProxyProps<ShadowsocksCustomProxy>) {
+  const [ip, setIp] = useState(props.proxy?.ip ?? '');
+  const [port, setPort] = useState(props.proxy?.port);
+  const [password, setPassword] = useState(props.proxy?.password ?? '');
+  const [cipher, setCipher] = useState(props.proxy?.cipher);
+
+  const ciphers = useMemo(
+    () =>
+      [
+        { value: 'aes-128-cfb', label: 'aes-128-cfb' },
+        { value: 'aes-128-cfb1', label: 'aes-128-cfb1' },
+        { value: 'aes-128-cfb8', label: 'aes-128-cfb8' },
+        { value: 'aes-128-cfb128', label: 'aes-128-cfb128' },
+        { value: 'aes-256-cfb', label: 'aes-256-cfb' },
+        { value: 'aes-256-cfb1', label: 'aes-256-cfb1' },
+        { value: 'aes-256-cfb8', label: 'aes-256-cfb8' },
+        { value: 'aes-256-cfb128', label: 'aes-256-cfb128' },
+        { value: 'rc4', label: 'rc4' },
+        { value: 'rc4-md5', label: 'rc4-md5' },
+        { value: 'chacha20', label: 'chacha20' },
+        { value: 'salsa20', label: 'salsa20' },
+        { value: 'chacha20-ietf', label: 'chacha20-ietf' },
+        { value: 'aes-128-gcm', label: 'aes-128-gcm' },
+        { value: 'aes-256-gcm', label: 'aes-256-gcm' },
+        { value: 'chacha20-ietf-poly1305', label: 'chacha20-ietf-poly1305' },
+        { value: 'xchacha20-ietf-poly1305', label: 'xchacha20-ietf-poly1305' },
+        { value: 'aes-128-pmac-siv', label: 'aes-128-pmac-siv' },
+        { value: 'aes-256-pmac-siv', label: 'aes-256-pmac-siv' },
+      ].sort((a, b) => a.label.localeCompare(b.label)),
+    [],
+  );
+
+  // Report back to form component with the proxy values when all required values are set.
+  useEffect(() => {
+    if (ip !== '' && port !== undefined && cipher !== undefined) {
+      props.onUpdate({
+        type: 'shadowsocks',
+        ip,
+        port,
+        password,
+        cipher,
+      });
+    }
+  }, [ip, port, password, cipher]);
+
+  return (
+    <SettingsGroup title={messages.pgettext('api-access-methods-view', 'Server details')}>
+      <SettingsRow
+        label={messages.pgettext('api-access-methods-view', 'Server')}
+        errorMessage={messages.pgettext(
+          'api-access-methods-view',
+          'Please enter a valid IPv4 or IPv6 address.',
+        )}>
+        <SettingsTextInput
+          value={ip}
+          placeholder={messages.pgettext('api-access-methods-view', 'Enter IP')}
+          onUpdate={setIp}
+          validate={validateIp}
+        />
+      </SettingsRow>
+
+      <SettingsRow
+        label={messages.gettext('Port')}
+        errorMessage={messages.pgettext(
+          'api-access-methods-view',
+          'Please enter a valid remote server port.',
+        )}>
+        <SettingsNumberInput
+          value={port ?? ''}
+          placeholder={messages.pgettext('api-access-methods-view', 'Enter port')}
+          onUpdate={setPort}
+          validate={validatePort}
+        />
+      </SettingsRow>
+
+      <SettingsRow label={messages.gettext('Password')}>
+        <SettingsTextInput
+          value={password}
+          placeholder={messages.gettext('Optional')}
+          onUpdate={setPassword}
+          optionalInForm
+        />
+      </SettingsRow>
+
+      <SettingsRow label={messages.gettext('Cipher')}>
+        <SettingsSelect
+          data-testid="ciphers"
+          direction="up"
+          defaultValue={cipher}
+          onUpdate={setCipher}
+          items={ciphers}
+        />
+      </SettingsRow>
+    </SettingsGroup>
+  );
+}
+
+function EditSocks5Remote(props: EditProxyProps<Socks5RemoteCustomProxy>) {
+  const [ip, setIp] = useState(props.proxy?.ip ?? '');
+  const [port, setPort] = useState(props.proxy?.port);
+  const [authentication, setAuthentication] = useState(props.proxy?.authentication !== undefined);
+  const [username, setUsername] = useState(props.proxy?.authentication?.username ?? '');
+  const [password, setPassword] = useState(props.proxy?.authentication?.password ?? '');
+
+  // Report back to form component with the proxy values when all required values are set.
+  useEffect(() => {
+    if (
+      ip !== '' &&
+      port !== undefined &&
+      (!authentication || (username !== '' && password !== ''))
+    ) {
+      props.onUpdate({
+        type: 'socks5-remote',
+        ip,
+        port,
+        authentication: authentication ? { username, password } : undefined,
+      });
+    }
+  }, [ip, port, username, password]);
+
+  return (
+    <SettingsGroup title={messages.pgettext('api-access-methods-view', 'Remote Server')}>
+      <SettingsRow
+        label={messages.pgettext('api-access-methods-view', 'Server')}
+        errorMessage={messages.pgettext(
+          'api-access-methods-view',
+          'Please enter a valid IPv4 or IPv6 address.',
+        )}>
+        <SettingsTextInput
+          value={ip}
+          placeholder={messages.pgettext('api-access-methods-view', 'Enter IP')}
+          onUpdate={setIp}
+          validate={validateIp}
+        />
+      </SettingsRow>
+
+      <SettingsRow
+        label={messages.gettext('Port')}
+        errorMessage={messages.pgettext(
+          'api-access-methods-view',
+          'Please enter a valid remote server port.',
+        )}>
+        <SettingsNumberInput
+          value={port ?? ''}
+          placeholder={messages.pgettext('api-access-methods-view', 'Enter port')}
+          onUpdate={setPort}
+          validate={validatePort}
+        />
+      </SettingsRow>
+
+      <SettingsRow label={messages.pgettext('api-access-methods-view', 'Authentication')}>
+        <Cell.Switch isOn={authentication} onChange={setAuthentication} />
+      </SettingsRow>
+
+      {authentication && (
+        <>
+          <SettingsRow label={messages.gettext('Username')}>
+            <SettingsTextInput
+              value={username}
+              placeholder={messages.gettext('Required')}
+              onUpdate={setUsername}
+            />
+          </SettingsRow>
+
+          <SettingsRow label={messages.gettext('Password')}>
+            <SettingsTextInput
+              value={password}
+              placeholder={messages.gettext('Required')}
+              onUpdate={setPassword}
+            />
+          </SettingsRow>
+        </>
+      )}
+    </SettingsGroup>
+  );
+}
+
+function EditSocks5Local(props: EditProxyProps<Socks5LocalCustomProxy>) {
+  const [remoteIp, setRemoteIp] = useState(props.proxy?.remoteIp ?? '');
+  const [remotePort, setRemotePort] = useState(props.proxy?.remotePort);
+  const [remoteTransportProtocol, setRemoteTransportProtocol] = useState<RelayProtocol>(
+    props.proxy?.remoteTransportProtocol ?? 'tcp',
+  );
+  const [localPort, setLocalPort] = useState(props.proxy?.localPort);
+
+  const remoteTransportProtocols = useMemo<Array<SettingsSelectItem<RelayProtocol>>>(
+    () => [
+      { value: 'tcp', label: 'TCP' },
+      { value: 'udp', label: 'UDP' },
+    ],
+    [],
+  );
+
+  useEffect(() => {
+    if (remoteIp !== '' && remotePort !== undefined && localPort !== undefined) {
+      props.onUpdate({
+        type: 'socks5-local',
+        remoteIp,
+        remotePort,
+        remoteTransportProtocol,
+        localPort,
+      });
+    }
+  }, [remoteIp, remotePort, localPort, remoteTransportProtocol]);
+
+  return (
+    <>
+      <SettingsGroup
+        title={messages.pgettext('api-access-methods-view', 'Local SOCKS5 server')}
+        infoMessage={messages.pgettext(
+          'api-access-methods-view',
+          'The TCP port where your local SOCKS5 server is listening.',
+        )}>
+        <SettingsRow
+          label={messages.gettext('Port')}
+          errorMessage={messages.pgettext(
+            'api-access-methods-view',
+            'Please enter a valid localhost port.',
+          )}>
+          <SettingsNumberInput
+            value={localPort}
+            placeholder={messages.pgettext('api-access-methods-view', 'Enter port')}
+            onUpdate={setLocalPort}
+            validate={validatePort}
+          />
+        </SettingsRow>
+      </SettingsGroup>
+
+      <SettingsGroup
+        title={messages.pgettext('api-access-methods-view', 'Remote Server')}
+        infoMessage={[
+          messages.pgettext(
+            'api-access-methods-view',
+            'The app needs the remote server details, where your local SOCKS5 server will forward your traffic.',
+          ),
+          messages.pgettext(
+            'api-access-methods-view',
+            'This is needed so our app can allow that traffic in the firewall.',
+          ),
+        ]}>
+        <SettingsRow
+          label={messages.pgettext('api-access-methods-view', 'Server')}
+          errorMessage={messages.pgettext(
+            'api-access-methods-view',
+            'Please enter a valid IPv4 or IPv6 address.',
+          )}>
+          <SettingsTextInput
+            value={remoteIp}
+            placeholder={messages.pgettext('api-access-methods-view', 'Enter IP')}
+            onUpdate={setRemoteIp}
+            validate={validateIp}
+          />
+        </SettingsRow>
+
+        <SettingsRow
+          label={messages.gettext('Port')}
+          errorMessage={messages.pgettext(
+            'api-access-methods-view',
+            'Please enter a valid remote server port.',
+          )}>
+          <SettingsNumberInput
+            value={remotePort ?? ''}
+            placeholder={messages.pgettext('api-access-methods-view', 'Enter port')}
+            onUpdate={setRemotePort}
+            validate={validatePort}
+          />
+        </SettingsRow>
+
+        <SettingsRow label={messages.pgettext('api-access-methods-view', 'Transport protocol')}>
+          <SettingsRadioGroup<'tcp' | 'udp'>
+            defaultValue={remoteTransportProtocol}
+            onUpdate={setRemoteTransportProtocol}
+            items={remoteTransportProtocols}
+          />
+        </SettingsRow>
+      </SettingsGroup>
+    </>
+  );
+}
+
+function validateIp(ip: string): boolean {
+  try {
+    void IpAddress.fromString(ip);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function validatePort(port: number): boolean {
+  return port > 0 && port <= 65535;
+}
diff --git a/gui/src/renderer/components/RelayStatusIndicator.tsx b/gui/src/renderer/components/RelayStatusIndicator.tsx
index 549fec4e70..1060121b9e 100644
--- a/gui/src/renderer/components/RelayStatusIndicator.tsx
+++ b/gui/src/renderer/components/RelayStatusIndicator.tsx
@@ -1,13 +1,19 @@
 import styled from 'styled-components';
+import { Styles } from 'styled-components/dist/types';
 
 import { colors } from '../../config.json';
 import * as Cell from './cell';
 
-const StyledRelayStatus = styled.div<{ $active: boolean }>((props) => ({
+const indicatorStyles: Styles<
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+> = {
   width: '16px',
   height: '16px',
   borderRadius: '8px',
   margin: '0 12px 0 4px',
+};
+
+const StyledRelayStatus = styled.div<{ $active: boolean }>(indicatorStyles, (props) => ({
   backgroundColor: props.$active ? colors.green90 : colors.red95,
 }));
 
@@ -28,3 +34,7 @@ export default function RelayStatusIndicator(props: IProps) {
     <StyledRelayStatus $active={props.active} />
   );
 }
+
+export const SpecialLocationIndicator = styled.div(indicatorStyles, {
+  backgroundColor: colors.white90,
+});
diff --git a/gui/src/renderer/components/SmallButton.tsx b/gui/src/renderer/components/SmallButton.tsx
index 181a557fd2..ba82f15cd4 100644
--- a/gui/src/renderer/components/SmallButton.tsx
+++ b/gui/src/renderer/components/SmallButton.tsx
@@ -37,6 +37,11 @@ const StyledSmallButton = styled.button<{ $color?: SmallButtonColor; disabled?:
       borderRadius: '4px',
       marginLeft: '12px',
 
+      [`${SmallButtonGroupStart} &&`]: {
+        marginLeft: 0,
+        marginRight: '12px',
+      },
+
       [`${StyledSmallButtonGrid} &&`]: {
         marginLeft: 0,
       },
@@ -67,6 +72,12 @@ export const SmallButtonGroup = styled.div<{ $noMarginTop?: boolean }>((props) =
   marginTop: props.$noMarginTop ? 0 : '30px',
 }));
 
+export const SmallButtonGroupStart = styled(SmallButtonGroup)({
+  flex: 1,
+  justifyContent: 'start',
+  margin: 0,
+});
+
 const StyledSmallButtonGrid = styled.div<{ $columns: number }>((props) => ({
   display: 'grid',
   gridTemplateColumns: `repeat(${props.$columns}, 1fr)`,
diff --git a/gui/src/renderer/components/cell/Selector.tsx b/gui/src/renderer/components/cell/Selector.tsx
index debcdbef38..e527017435 100644
--- a/gui/src/renderer/components/cell/Selector.tsx
+++ b/gui/src/renderer/components/cell/Selector.tsx
@@ -25,6 +25,7 @@ interface CommonSelectorProps<T, U> {
   value: T | U;
   selectedCellRef?: React.Ref<HTMLElement>;
   className?: string;
+  infoTitle?: string;
   details?: React.ReactElement;
   expandable?: { expandable: boolean; id: string };
   disabled?: boolean;
@@ -82,7 +83,7 @@ export default function Selector<T, U>(props: SelectorProps<T, U>) {
       </AriaLabel>
       {props.details && (
         <AriaDetails>
-          <InfoButton>{props.details}</InfoButton>
+          <InfoButton title={props.infoTitle}>{props.details}</InfoButton>
         </AriaDetails>
       )}
     </>
diff --git a/gui/src/renderer/components/select-location/CustomLists.tsx b/gui/src/renderer/components/select-location/CustomLists.tsx
index 737d66bf89..ca4638360c 100644
--- a/gui/src/renderer/components/select-location/CustomLists.tsx
+++ b/gui/src/renderer/components/select-location/CustomLists.tsx
@@ -12,7 +12,7 @@ import * as Cell from '../cell';
 import { measurements } from '../common-styles';
 import { BackAction } from '../KeyboardNavigation';
 import SimpleInput from '../SimpleInput';
-import { StyledLocationRowIcon } from './LocationRow';
+import { StyledLocationRowIcon } from './LocationRowStyles';
 import { useRelayListContext } from './RelayListContext';
 import RelayLocationList from './RelayLocationList';
 import { useScrollPositionContext } from './ScrollPositionContext';
diff --git a/gui/src/renderer/components/select-location/LocationRow.tsx b/gui/src/renderer/components/select-location/LocationRow.tsx
index 79b44d372a..f76b5d3f61 100644
--- a/gui/src/renderer/components/select-location/LocationRow.tsx
+++ b/gui/src/renderer/components/select-location/LocationRow.tsx
@@ -1,8 +1,6 @@
 import React, { useCallback, useRef } from 'react';
 import { sprintf } from 'sprintf-js';
-import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import {
   compareRelayLocation,
   compareRelayLocationGeographical,
@@ -16,11 +14,18 @@ import { useSelector } from '../../redux/store';
 import Accordion from '../Accordion';
 import * as Cell from '../cell';
 import ChevronButton from '../ChevronButton';
-import { measurements, normalText } from '../common-styles';
-import ImageView from '../ImageView';
 import RelayStatusIndicator from '../RelayStatusIndicator';
 import { AddToListDialog, DeleteConfirmDialog, EditListDialog } from './CustomListDialogs';
 import {
+  getButtonColor,
+  StyledHoverIcon,
+  StyledHoverIconButton,
+  StyledLocationRowButton,
+  StyledLocationRowContainer,
+  StyledLocationRowIcon,
+  StyledLocationRowLabel,
+} from './LocationRowStyles';
+import {
   CitySpecification,
   CountrySpecification,
   getLocationChildren,
@@ -28,110 +33,6 @@ import {
   RelaySpecification,
 } from './select-location-types';
 
-interface IButtonColorProps {
-  $backgroundColor: string;
-  $backgroundColorHover: string;
-}
-
-const buttonColor = (props: IButtonColorProps) => {
-  return {
-    backgroundColor: props.$backgroundColor,
-    '&&:not(:disabled):hover': {
-      backgroundColor: props.$backgroundColorHover,
-    },
-  };
-};
-
-export const StyledLocationRowContainer = styled(Cell.Container)({
-  display: 'flex',
-  padding: 0,
-  background: 'none',
-});
-
-export const StyledLocationRowButton = styled(Cell.Row)<IButtonColorProps & { $level: number }>(
-  buttonColor,
-  (props) => {
-    const paddingLeft = (props.$level + 1) * 16 + 2;
-
-    return {
-      display: 'flex',
-      flex: 1,
-      overflow: 'hidden',
-      border: 'none',
-      padding: `0 10px 0 ${paddingLeft}px`,
-      margin: 0,
-    };
-  },
-);
-
-export const StyledLocationRowIcon = styled.button<IButtonColorProps>(buttonColor, {
-  position: 'relative',
-  alignSelf: 'stretch',
-  paddingLeft: measurements.viewMargin,
-  paddingRight: measurements.viewMargin,
-
-  '&&::before': {
-    content: '""',
-    position: 'absolute',
-    margin: 'auto',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    height: '50%',
-    width: '1px',
-    backgroundColor: colors.darkBlue,
-  },
-});
-
-export const StyledLocationRowLabel = styled(Cell.Label)(normalText, {
-  flex: 1,
-  minWidth: 0,
-  fontWeight: 400,
-  lineHeight: '24px',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-});
-
-const StyledHoverIconButton = styled.button<IButtonColorProps & { $isLast?: boolean }>(
-  buttonColor,
-  (props) => ({
-    flex: 0,
-    display: 'none',
-    padding: '0 10px',
-    paddingRight: props.$isLast ? '17px' : '10px',
-    margin: 0,
-    border: 0,
-    height: measurements.rowMinHeight,
-    appearance: 'none',
-
-    '&&:last-child': {
-      paddingRight: '25px',
-    },
-
-    '&&:not(:disabled):hover': {
-      backgroundColor: props.$backgroundColor,
-    },
-    [`${StyledLocationRowContainer}:hover &&`]: {
-      display: 'block',
-    },
-    [`${StyledLocationRowButton}:hover ~ &&`]: {
-      backgroundColor: props.$backgroundColorHover,
-    },
-  }),
-);
-
-const StyledHoverIcon = styled(ImageView).attrs({
-  width: 18,
-  height: 18,
-  tintColor: colors.white60,
-  tintHoverColor: colors.white,
-})({
-  [`${StyledHoverIconButton}:hover &&`]: {
-    backgroundColor: colors.white,
-  },
-});
-
 interface IProps<C extends LocationSpecification> {
   source: C;
   level: number;
@@ -336,24 +237,6 @@ function LocationRow<C extends LocationSpecification>(props: IProps<C>) {
 // a lot more work than necessary
 export default React.memo(LocationRow, compareProps);
 
-export function getButtonColor(selected: boolean, level: number, disabled?: boolean) {
-  let backgroundColor = colors.blue60;
-  if (selected) {
-    backgroundColor = colors.green;
-  } else if (level === 1) {
-    backgroundColor = colors.blue40;
-  } else if (level === 2) {
-    backgroundColor = colors.blue20;
-  } else if (level === 3) {
-    backgroundColor = colors.blue10;
-  }
-
-  return {
-    $backgroundColor: backgroundColor,
-    $backgroundColorHover: selected || disabled ? backgroundColor : colors.blue80,
-  };
-}
-
 function compareProps<C extends LocationSpecification>(
   oldProps: IProps<C>,
   nextProps: IProps<C>,
diff --git a/gui/src/renderer/components/select-location/LocationRowStyles.tsx b/gui/src/renderer/components/select-location/LocationRowStyles.tsx
new file mode 100644
index 0000000000..6a159f4054
--- /dev/null
+++ b/gui/src/renderer/components/select-location/LocationRowStyles.tsx
@@ -0,0 +1,150 @@
+import styled from 'styled-components';
+import { Styles } from 'styled-components/dist/types';
+
+import { colors } from '../../../config.json';
+import * as Cell from '../cell';
+import { measurements, normalText } from '../common-styles';
+import ImageView from '../ImageView';
+import InfoButton from '../InfoButton';
+
+interface ButtonColorProps {
+  $backgroundColor: string;
+  $backgroundColorHover: string;
+}
+
+export const buttonColor = (props: ButtonColorProps) => {
+  return {
+    backgroundColor: props.$backgroundColor,
+    '&&:not(:disabled):hover': {
+      backgroundColor: props.$backgroundColorHover,
+    },
+  };
+};
+
+export const StyledLocationRowContainer = styled(Cell.Container)({
+  display: 'flex',
+  padding: 0,
+  background: 'none',
+});
+
+export const StyledLocationRowContainerWithMargin = styled(StyledLocationRowContainer)({
+  marginBottom: 1,
+});
+
+export const StyledLocationRowLabel = styled(Cell.Label)(normalText, {
+  flex: 1,
+  minWidth: 0,
+  fontWeight: 400,
+  lineHeight: '24px',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+export const StyledLocationRowButton = styled(Cell.Row)<ButtonColorProps & { $level: number }>(
+  buttonColor,
+  (props) => {
+    const paddingLeft = (props.$level + 1) * 16 + 2;
+
+    return {
+      display: 'flex',
+      flex: 1,
+      overflow: 'hidden',
+      border: 'none',
+      padding: `0 10px 0 ${paddingLeft}px`,
+      margin: 0,
+    };
+  },
+);
+
+export const StyledLocationRowIcon = styled.button<ButtonColorProps>(buttonColor, {
+  position: 'relative',
+  alignSelf: 'stretch',
+  paddingLeft: measurements.viewMargin,
+  paddingRight: measurements.viewMargin,
+  border: 0,
+
+  '&&::before': {
+    content: '""',
+    position: 'absolute',
+    margin: 'auto',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    height: '50%',
+    width: '1px',
+    backgroundColor: colors.darkBlue,
+  },
+});
+
+interface HoverButtonProps {
+  $isLast?: boolean;
+}
+
+const hoverButton = (
+  props: ButtonColorProps & HoverButtonProps,
+): Styles<
+  React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+> => ({
+  flex: 0,
+  display: 'none',
+  padding: '0 10px',
+  paddingRight: props.$isLast ? '17px' : '10px',
+  margin: 0,
+  border: 0,
+  height: measurements.rowMinHeight,
+  appearance: 'none',
+
+  '&&:last-child': {
+    paddingRight: '25px',
+  },
+
+  '&&:not(:disabled):hover': {
+    backgroundColor: props.$backgroundColor,
+  },
+  [`${StyledLocationRowContainer}:hover &&`]: {
+    display: 'block',
+  },
+  [`${StyledLocationRowButton}:hover ~ &&`]: {
+    backgroundColor: props.$backgroundColorHover,
+  },
+});
+
+export const StyledHoverIconButton = styled.button<ButtonColorProps & HoverButtonProps>(
+  buttonColor,
+  hoverButton,
+);
+
+export const StyledHoverIcon = styled(ImageView).attrs({
+  width: 18,
+  height: 18,
+  tintColor: colors.white60,
+  tintHoverColor: colors.white,
+})({
+  [`${StyledHoverIconButton}:hover &&`]: {
+    backgroundColor: colors.white,
+  },
+});
+
+export const StyledHoverInfoButton = styled(InfoButton)<ButtonColorProps & HoverButtonProps>(
+  buttonColor,
+  hoverButton,
+);
+
+export function getButtonColor(selected: boolean, level: number, disabled?: boolean) {
+  let backgroundColor = colors.blue60;
+  if (selected) {
+    backgroundColor = colors.green;
+  } else if (level === 1) {
+    backgroundColor = colors.blue40;
+  } else if (level === 2) {
+    backgroundColor = colors.blue20;
+  } else if (level === 3) {
+    backgroundColor = colors.blue10;
+  }
+
+  return {
+    $backgroundColor: backgroundColor,
+    $backgroundColorHover: selected || disabled ? backgroundColor : colors.blue80,
+  };
+}
diff --git a/gui/src/renderer/components/select-location/RelayListContext.tsx b/gui/src/renderer/components/select-location/RelayListContext.tsx
index d0ee5d6e85..86dd7e5467 100644
--- a/gui/src/renderer/components/select-location/RelayListContext.tsx
+++ b/gui/src/renderer/components/select-location/RelayListContext.tsx
@@ -135,6 +135,15 @@ function useRelayList(
   const selectedLocation = useSelectedLocation();
   const disabledLocation = useDisabledLocation();
 
+  const preventDueToCustomBridgeSelected = usePreventDueToCustomBridgeSelected();
+
+  const isLocationSelected = useCallback(
+    (location: RelayLocation) => {
+      return preventDueToCustomBridgeSelected ? false : isSelected(location, selectedLocation);
+    },
+    [preventDueToCustomBridgeSelected, selectedLocation],
+  );
+
   return useMemo(() => {
     return relayList
       .map((country) => {
@@ -149,7 +158,7 @@ function useRelayList(
           disabled: countryDisabledReason !== undefined,
           disabledReason: countryDisabledReason,
           expanded: isExpanded(countryLocation, expandedLocations),
-          selected: isSelected(countryLocation, selectedLocation),
+          selected: isLocationSelected(countryLocation),
           cities: country.cities
             .map((city) => {
               const cityLocation: RelayLocation = { country: country.code, city: city.code };
@@ -164,7 +173,7 @@ function useRelayList(
                 disabled: cityDisabledReason !== undefined,
                 disabledReason: cityDisabledReason,
                 expanded: isExpanded(cityLocation, expandedLocations),
-                selected: isSelected(cityLocation, selectedLocation),
+                selected: isLocationSelected(cityLocation),
                 relays: city.relays
                   .map((relay) => {
                     const relayLocation: RelayLocation = {
@@ -183,7 +192,7 @@ function useRelayList(
                       location: relayLocation,
                       disabled: relayDisabledReason !== undefined,
                       disabledReason: relayDisabledReason,
-                      selected: isSelected(relayLocation, selectedLocation),
+                      selected: isLocationSelected(relayLocation),
                     };
                   })
                   .sort((a, b) => a.hostname.localeCompare(b.hostname, locale, { numeric: true })),
@@ -193,7 +202,17 @@ function useRelayList(
         };
       })
       .sort((a, b) => a.label.localeCompare(b.label, locale));
-  }, [locale, expandedLocations, relayList, selectedLocation, disabledLocation]);
+  }, [locale, expandedLocations, relayList, disabledLocation, isLocationSelected]);
+}
+
+export function usePreventDueToCustomBridgeSelected(): boolean {
+  const relaySettings = useNormalRelaySettings();
+  const { locationType } = useSelectLocationContext();
+  const bridgeSettings = useSelector((state) => state.settings.bridgeSettings);
+  const isBridgeSelection =
+    relaySettings?.tunnelProtocol === 'openvpn' && locationType === LocationType.entry;
+
+  return isBridgeSelection && bridgeSettings.type === 'custom';
 }
 
 // Return all RelayLocations that should be expanded
diff --git a/gui/src/renderer/components/select-location/SelectLocation.tsx b/gui/src/renderer/components/select-location/SelectLocation.tsx
index 6bf0fcff6f..5ba0203939 100644
--- a/gui/src/renderer/components/select-location/SelectLocation.tsx
+++ b/gui/src/renderer/components/select-location/SelectLocation.tsx
@@ -9,7 +9,7 @@ import { filterSpecialLocations } from '../../lib/filter-locations';
 import { useHistory } from '../../lib/history';
 import { formatHtml } from '../../lib/html-formatter';
 import { RoutePath } from '../../lib/routes';
-import { useNormalBridgeSettings, useNormalRelaySettings } from '../../lib/utilityHooks';
+import { useNormalRelaySettings } from '../../lib/utilityHooks';
 import { useSelector } from '../../redux/store';
 import * as Cell from '../cell';
 import { useFilteredProviders } from '../Filter';
@@ -34,12 +34,7 @@ import {
   useOnSelectEntryLocation,
   useOnSelectExitLocation,
 } from './select-location-hooks';
-import {
-  LocationType,
-  SpecialBridgeLocationType,
-  SpecialLocation,
-  SpecialLocationIcon,
-} from './select-location-types';
+import { LocationType, SpecialBridgeLocationType, SpecialLocation } from './select-location-types';
 import { useSelectLocationContext } from './SelectLocationContainer';
 import {
   StyledClearFilterButton,
@@ -54,6 +49,11 @@ import {
   StyledSearchBar,
 } from './SelectLocationStyles';
 import { SpacePreAllocationView } from './SpacePreAllocationView';
+import {
+  AutomaticLocationRow,
+  CustomBridgeLocationRow,
+  CustomExitLocationRow,
+} from './SpecialLocationList';
 
 export default function SelectLocation() {
   const history = useHistory();
@@ -260,22 +260,21 @@ function SelectLocationContent() {
   const [onSelectBridgeRelay, onSelectBridgeSpecial] = useOnSelectBridgeLocation();
 
   const relaySettings = useNormalRelaySettings();
-  const bridgeSettings = useNormalBridgeSettings();
+  const bridgeSettings = useSelector((state) => state.settings.bridgeSettings);
 
   const allowAddToCustomList = useSelector((state) => state.settings.customLists.length > 0);
 
   if (locationType === LocationType.exit) {
     // Add "Custom" item if a custom relay is selected
-    const specialList: Array<SpecialLocation<undefined>> =
-      relaySettings === undefined
-        ? [
-            {
-              label: messages.gettext('Custom'),
-              value: undefined,
-              selected: true,
-            },
-          ]
-        : [];
+    const specialList: Array<SpecialLocation<undefined>> = [];
+    if (relaySettings === undefined) {
+      specialList.push({
+        label: messages.gettext('Custom'),
+        value: undefined,
+        selected: true,
+        component: CustomExitLocationRow,
+      });
+    }
 
     const specialLocations = filterSpecialLocations(searchTerm, specialList);
     return (
@@ -320,14 +319,17 @@ function SelectLocationContent() {
     // Add the "Automatic" item
     const specialList: Array<SpecialLocation<SpecialBridgeLocationType>> = [
       {
+        label: messages.pgettext('select-location-view', 'Custom bridge'),
+        value: SpecialBridgeLocationType.custom,
+        selected: bridgeSettings?.type === 'custom',
+        disabled: bridgeSettings?.custom === undefined,
+        component: CustomBridgeLocationRow,
+      },
+      {
         label: messages.gettext('Automatic'),
-        icon: SpecialLocationIcon.geoLocation,
-        info: messages.pgettext(
-          'select-location-view',
-          'The app selects a random bridge server, but servers have a higher probability the closer they are to you.',
-        ),
         value: SpecialBridgeLocationType.closestToExit,
-        selected: bridgeSettings?.location === 'any',
+        selected: bridgeSettings?.type === 'normal' && bridgeSettings.normal?.location === 'any',
+        component: AutomaticLocationRow,
       },
     ];
 
diff --git a/gui/src/renderer/components/select-location/SelectLocationContainer.tsx b/gui/src/renderer/components/select-location/SelectLocationContainer.tsx
index 5843d5e6f4..1d0e5251f7 100644
--- a/gui/src/renderer/components/select-location/SelectLocationContainer.tsx
+++ b/gui/src/renderer/components/select-location/SelectLocationContainer.tsx
@@ -1,5 +1,8 @@
 import React, { useContext, useMemo, useState } from 'react';
 
+import useActions from '../../lib/actionsHook';
+import { useSelector } from '../../redux/store';
+import userInterface from '../../redux/userinterface/actions';
 import { RelayListContextProvider } from './RelayListContext';
 import { ScrollPositionContextProvider } from './ScrollPositionContext';
 import { LocationType } from './select-location-types';
@@ -20,13 +23,14 @@ export function useSelectLocationContext() {
 }
 
 export default function SelectLocationContainer() {
-  const [locationType, setLocationType] = useState(LocationType.exit);
+  const locationType = useSelector((state) => state.userInterface.selectLocationView);
+  const { setSelectLocationView } = useActions(userInterface);
   const [searchTerm, setSearchTerm] = useState('');
 
-  const value = useMemo(() => ({ locationType, setLocationType, searchTerm, setSearchTerm }), [
-    locationType,
-    searchTerm,
-  ]);
+  const value = useMemo(
+    () => ({ locationType, setLocationType: setSelectLocationView, searchTerm, setSearchTerm }),
+    [locationType, searchTerm],
+  );
 
   return (
     <selectLocationContext.Provider value={value}>
diff --git a/gui/src/renderer/components/select-location/SpecialLocationList.tsx b/gui/src/renderer/components/select-location/SpecialLocationList.tsx
index 030520fc73..9579a6b4b5 100644
--- a/gui/src/renderer/components/select-location/SpecialLocationList.tsx
+++ b/gui/src/renderer/components/select-location/SpecialLocationList.tsx
@@ -3,16 +3,21 @@ import styled from 'styled-components';
 
 import { colors } from '../../../config.json';
 import { messages } from '../../../shared/gettext';
-import * as Cell from '../cell';
+import { useHistory } from '../../lib/history';
+import { RoutePath } from '../../lib/routes';
+import { useSelector } from '../../redux/store';
+import ImageView from '../ImageView';
 import InfoButton from '../InfoButton';
+import { SpecialLocationIndicator } from '../RelayStatusIndicator';
 import {
   getButtonColor,
+  StyledHoverInfoButton,
   StyledLocationRowButton,
-  StyledLocationRowContainer,
+  StyledLocationRowContainerWithMargin,
   StyledLocationRowIcon,
   StyledLocationRowLabel,
-} from './LocationRow';
-import { SpecialLocation } from './select-location-types';
+} from './LocationRowStyles';
+import { SpecialBridgeLocationType, SpecialLocation } from './select-location-types';
 
 interface SpecialLocationsProps<T> {
   source: Array<SpecialLocation<T>>;
@@ -30,21 +35,8 @@ export default function SpecialLocationList<T>({ source, ...props }: SpecialLoca
   );
 }
 
-const StyledLocationRowContainerWithMargin = styled(StyledLocationRowContainer)({
-  marginBottom: 1,
-});
-
-const StyledSpecialLocationIcon = styled(Cell.Icon)({
-  flex: 0,
-  marginLeft: '2px',
-  marginRight: '8px',
-});
-
-const StyledSpecialLocationInfoButton = styled(InfoButton)({
-  margin: 0,
-  padding: '0 25px',
-  backgroundColor: colors.blue,
-});
+const StyledSpecialLocationInfoButton = styled(InfoButton)({ padding: '0 25px', margin: 0 });
+const StyledSpecialLocationSideButton = styled(ImageView)({ padding: '0 3px' });
 
 interface SpecialLocationRowProps<T> {
   source: SpecialLocation<T>;
@@ -59,30 +51,98 @@ function SpecialLocationRow<T>(props: SpecialLocationRowProps<T>) {
     }
   }, [props.source.selected, props.onSelect, props.source.value]);
 
-  const icon = props.source.selected ? 'icon-tick' : props.source.icon ?? undefined;
+  const innerProps: SpecialLocationRowInnerProps<T> = {
+    ...props,
+    onSelect,
+  };
+  return <props.source.component {...innerProps} />;
+}
+
+export interface SpecialLocationRowInnerProps<T>
+  extends Omit<SpecialLocationRowProps<T>, 'onSelect'> {
+  onSelect: () => void;
+}
+
+export function AutomaticLocationRow(
+  props: SpecialLocationRowInnerProps<SpecialBridgeLocationType>,
+) {
   const selectedRef = props.source.selected ? props.selectedElementRef : undefined;
   const background = getButtonColor(props.source.selected, 0, props.source.disabled);
   return (
     <StyledLocationRowContainerWithMargin ref={selectedRef}>
-      <StyledLocationRowButton onClick={onSelect} $level={0} {...background}>
-        {icon && (
-          <StyledSpecialLocationIcon
-            source={icon}
-            tintColor={colors.white}
-            height={22}
-            width={22}
-          />
+      <StyledLocationRowButton onClick={props.onSelect} $level={0} {...background}>
+        <SpecialLocationIndicator />
+        <StyledLocationRowLabel>{props.source.label}</StyledLocationRowLabel>
+      </StyledLocationRowButton>
+      <StyledLocationRowIcon
+        as={StyledSpecialLocationInfoButton}
+        title={messages.gettext('Automatic')}
+        message={messages.pgettext(
+          'select-location-view',
+          'The app selects a random bridge server, but servers have a higher probability the closer they are to you.',
         )}
+        aria-label={messages.pgettext('accessibility', 'info')}
+        {...background}
+      />
+    </StyledLocationRowContainerWithMargin>
+  );
+}
+
+export function CustomExitLocationRow(props: SpecialLocationRowInnerProps<undefined>) {
+  const selectedRef = props.source.selected ? props.selectedElementRef : undefined;
+  const background = getButtonColor(props.source.selected, 0, props.source.disabled);
+  return (
+    <StyledLocationRowContainerWithMargin ref={selectedRef}>
+      <StyledLocationRowButton $level={0} {...background}>
         <StyledLocationRowLabel>{props.source.label}</StyledLocationRowLabel>
       </StyledLocationRowButton>
-      {props.source.info && (
-        <StyledLocationRowIcon
-          as={StyledSpecialLocationInfoButton}
-          message={props.source.info}
-          aria-label={messages.pgettext('accessibility', 'info')}
-          {...background}
+    </StyledLocationRowContainerWithMargin>
+  );
+}
+
+const StyledInfoButton = styled(StyledHoverInfoButton)({ display: 'block' });
+
+export function CustomBridgeLocationRow(
+  props: SpecialLocationRowInnerProps<SpecialBridgeLocationType>,
+) {
+  const history = useHistory();
+
+  const bridgeSettings = useSelector((state) => state.settings.bridgeSettings);
+  const icon = bridgeSettings.custom !== undefined ? 'icon-edit' : 'icon-add';
+
+  const selectedRef = props.source.selected ? props.selectedElementRef : undefined;
+  const background = getButtonColor(props.source.selected, 0, props.source.disabled);
+
+  const navigate = useCallback(() => history.push(RoutePath.editCustomBridge), [history.push]);
+
+  return (
+    <StyledLocationRowContainerWithMargin ref={selectedRef} disabled={props.source.disabled}>
+      <StyledLocationRowButton
+        as="button"
+        onClick={props.onSelect}
+        $level={0}
+        disabled={props.source.disabled}
+        {...background}>
+        <SpecialLocationIndicator />
+        <StyledLocationRowLabel>{props.source.label}</StyledLocationRowLabel>
+      </StyledLocationRowButton>
+      <StyledInfoButton
+        {...background}
+        $isLast
+        title={messages.pgettext('select-location-view', 'Custom bridge')}
+        message={messages.pgettext(
+          'select-location-view',
+          'A custom bridge server can be used to circumvent censorship when regular Mullvad bridge servers don’t work.',
+        )}
+      />
+      <StyledLocationRowIcon {...background} onClick={navigate}>
+        <StyledSpecialLocationSideButton
+          source={icon}
+          width={18}
+          tintColor={colors.white}
+          tintHoverColor={colors.white80}
         />
-      )}
+      </StyledLocationRowIcon>
     </StyledLocationRowContainerWithMargin>
   );
 }
diff --git a/gui/src/renderer/components/select-location/custom-list-helpers.ts b/gui/src/renderer/components/select-location/custom-list-helpers.ts
index 799deb8ed3..5cb6d695b8 100644
--- a/gui/src/renderer/components/select-location/custom-list-helpers.ts
+++ b/gui/src/renderer/components/select-location/custom-list-helpers.ts
@@ -4,7 +4,11 @@ import { ICustomList, RelayLocation } from '../../../shared/daemon-rpc-types';
 import { hasValue } from '../../../shared/utils';
 import { searchMatch } from '../../lib/filter-locations';
 import { useSelector } from '../../redux/store';
-import { useDisabledLocation, useSelectedLocation } from './RelayListContext';
+import {
+  useDisabledLocation,
+  usePreventDueToCustomBridgeSelected,
+  useSelectedLocation,
+} from './RelayListContext';
 import { isCustomListDisabled, isExpanded, isSelected } from './select-location-helpers';
 import {
   CitySpecification,
@@ -26,6 +30,8 @@ export function useCustomListsRelayList(
   const { searchTerm } = useSelectLocationContext();
   const customLists = useSelector((state) => state.settings.customLists);
 
+  const preventDueToCustomBridgeSelected = usePreventDueToCustomBridgeSelected();
+
   // Populate all custom lists with the real location trees for the list locations.
   return useMemo(
     () =>
@@ -34,6 +40,7 @@ export function useCustomListsRelayList(
           list,
           relayList,
           searchTerm,
+          preventDueToCustomBridgeSelected,
           selectedLocation,
           disabledLocation,
           expandedLocations,
@@ -48,6 +55,7 @@ function prepareCustomList(
   list: ICustomList,
   fullRelayList: GeographicalRelayList,
   searchTerm: string,
+  preventDueToCustomBridgeSelected: boolean,
   selectedLocation?: RelayLocation,
   disabledLocation?: { location: RelayLocation; reason: DisabledReason },
   expandedLocations?: Array<RelayLocation>,
@@ -64,7 +72,7 @@ function prepareCustomList(
     disabled: disabledReason !== undefined,
     disabledReason,
     expanded: isExpanded(location, expandedLocations),
-    selected: isSelected(location, selectedLocation),
+    selected: preventDueToCustomBridgeSelected ? false : isSelected(location, selectedLocation),
     visible: searchMatch(searchTerm, list.name),
     locations,
   };
diff --git a/gui/src/renderer/components/select-location/select-location-hooks.ts b/gui/src/renderer/components/select-location/select-location-hooks.ts
index b795f4a74f..08ed2dccf3 100644
--- a/gui/src/renderer/components/select-location/select-location-hooks.ts
+++ b/gui/src/renderer/components/select-location/select-location-hooks.ts
@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
 
-import BridgeSettingsBuilder from '../../../shared/bridge-settings-builder';
 import {
   BridgeSettings,
   RelayLocation,
@@ -10,8 +9,8 @@ import {
 import log from '../../../shared/logging';
 import { useAppContext } from '../../context';
 import { useRelaySettingsModifier } from '../../lib/constraint-updater';
+import { useBridgeSettingsModifier } from '../../lib/constraint-updater';
 import { useHistory } from '../../lib/history';
-import { useSelector } from '../../redux/store';
 import { LocationType, SpecialBridgeLocationType } from './select-location-types';
 import { useSelectLocationContext } from './SelectLocationContainer';
 
@@ -89,7 +88,7 @@ function useOnSelectLocation() {
 export function useOnSelectBridgeLocation() {
   const { updateBridgeSettings } = useAppContext();
   const { setLocationType } = useSelectLocationContext();
-  const bridgeSettings = useSelector((state) => state.settings.bridgeSettings);
+  const bridgeSettingsModifier = useBridgeSettingsModifier();
 
   const setLocation = useCallback(async (bridgeUpdate: BridgeSettings) => {
     if (bridgeUpdate) {
@@ -105,21 +104,38 @@ export function useOnSelectBridgeLocation() {
 
   const onSelectRelay = useCallback(
     (location: RelayLocation) => {
-      const bridgeUpdate = new BridgeSettingsBuilder().location.fromRaw(location).build();
-      bridgeUpdate.custom = bridgeSettings.custom;
-      return setLocation(bridgeUpdate);
+      return setLocation(
+        bridgeSettingsModifier((bridgeSettings) => {
+          bridgeSettings.type = 'normal';
+          bridgeSettings.normal.location = wrapConstraint(location);
+          return bridgeSettings;
+        }),
+      );
     },
-    [bridgeSettings],
+    [bridgeSettingsModifier],
   );
 
-  const onSelectSpecial = useCallback((location: SpecialBridgeLocationType) => {
-    switch (location) {
-      case SpecialBridgeLocationType.closestToExit: {
-        const bridgeUpdate = new BridgeSettingsBuilder().location.any().build();
-        return setLocation(bridgeUpdate);
+  const onSelectSpecial = useCallback(
+    (location: SpecialBridgeLocationType) => {
+      switch (location) {
+        case SpecialBridgeLocationType.closestToExit:
+          return setLocation(
+            bridgeSettingsModifier((bridgeSettings) => {
+              bridgeSettings.normal.location = 'any';
+              return bridgeSettings;
+            }),
+          );
+        case SpecialBridgeLocationType.custom:
+          return setLocation(
+            bridgeSettingsModifier((bridgeSettings) => {
+              bridgeSettings.type = 'custom';
+              return bridgeSettings;
+            }),
+          );
       }
-    }
-  }, []);
+    },
+    [bridgeSettingsModifier],
+  );
 
   return [onSelectRelay, onSelectSpecial] as const;
 }
diff --git a/gui/src/renderer/components/select-location/select-location-types.ts b/gui/src/renderer/components/select-location/select-location-types.ts
index c42cc45f6b..ca6afecf74 100644
--- a/gui/src/renderer/components/select-location/select-location-types.ts
+++ b/gui/src/renderer/components/select-location/select-location-types.ts
@@ -11,6 +11,7 @@ import {
   IRelayLocationCountryRedux,
   IRelayLocationRelayRedux,
 } from '../../redux/settings/reducers';
+import { SpecialLocationRowInnerProps } from './SpecialLocationList';
 
 export enum LocationType {
   entry = 0,
@@ -21,11 +22,8 @@ export type RelayList = GeographicalRelayList | Array<CustomListSpecification>;
 export type GeographicalRelayList = Array<CountrySpecification>;
 
 export enum SpecialBridgeLocationType {
-  closestToExit = 0,
-}
-
-export enum SpecialLocationIcon {
-  geoLocation = 'icon-nearest',
+  closestToExit,
+  custom,
 }
 
 export interface LocationVisibility {
@@ -40,9 +38,8 @@ interface CommonLocationSpecification {
 }
 
 export interface SpecialLocation<T> extends CommonLocationSpecification {
-  icon?: SpecialLocationIcon;
-  info?: string;
   value: T;
+  component: React.ComponentType<SpecialLocationRowInnerProps<T>>;
 }
 
 type GeographicalLocationSpecification =