diff --git a/ui/app/mirrors/create/cdc.tsx b/ui/app/mirrors/create/cdc.tsx
index fba743a15e..ce7b6b931a 100644
--- a/ui/app/mirrors/create/cdc.tsx
+++ b/ui/app/mirrors/create/cdc.tsx
@@ -4,10 +4,10 @@ import { QRepSyncMode } from '@/grpc_generated/flow';
 import { DBType } from '@/grpc_generated/peers';
 import { Label } from '@/lib/Label';
 import { RowWithSelect, RowWithSwitch, RowWithTextField } from '@/lib/Layout';
-import { Select, SelectItem } from '@/lib/Select';
 import { Switch } from '@/lib/Switch';
 import { TextField } from '@/lib/TextField';
 import { Dispatch, SetStateAction } from 'react';
+import ReactSelect from 'react-select';
 import { InfoPopover } from '../../../components/InfoPopover';
 import { CDCConfig, MirrorSetter, TableMapRow } from '../../dto/MirrorsDTO';
 import { MirrorSetting } from './helpers/common';
@@ -23,6 +23,11 @@ interface MirrorConfigProps {
   setSchema: Dispatch<SetStateAction<string>>;
 }
 
+const SyncModeOptions = ['AVRO', 'Copy with Binary'].map((value) => ({
+  label: value,
+  value,
+}));
+
 export const defaultSyncMode = (dtype: DBType | undefined) => {
   switch (dtype) {
     case DBType.POSTGRES:
@@ -133,24 +138,23 @@ export default function CDCConfigForm({
                       alignItems: 'center',
                     }}
                   >
-                    <Select
-                      placeholder={`Select a sync mode`}
-                      onValueChange={(val) => handleChange(val, setting)}
-                      disabled={setToDefault(setting)}
+                    <ReactSelect
+                      placeholder='Select a sync mode'
+                      onChange={(val, action) =>
+                        val && handleChange(val.value, setting)
+                      }
+                      isDisabled={setToDefault(setting)}
                       value={
                         setToDefault(setting)
-                          ? defaultSyncMode(mirrorConfig.destination?.type)
+                          ? SyncModeOptions.find(
+                              (opt) =>
+                                opt.value ===
+                                defaultSyncMode(mirrorConfig.destination?.type)
+                            )
                           : undefined
                       }
-                    >
-                      {['AVRO', 'Copy with Binary'].map((item, id) => {
-                        return (
-                          <SelectItem key={id} value={item.toString()}>
-                            {item.toString()}
-                          </SelectItem>
-                        );
-                      })}
-                    </Select>
+                      options={SyncModeOptions}
+                    />
                     {setting.tips && (
                       <InfoPopover
                         tips={setting.tips}
diff --git a/ui/app/mirrors/create/page.tsx b/ui/app/mirrors/create/page.tsx
index afc94039be..d2027f1dd8 100644
--- a/ui/app/mirrors/create/page.tsx
+++ b/ui/app/mirrors/create/page.tsx
@@ -13,13 +13,13 @@ import {
 } from '@/lib/Layout';
 import { Panel } from '@/lib/Panel';
 import { RadioButton, RadioButtonGroup } from '@/lib/RadioButtonGroup';
-import { Select, SelectItem } from '@/lib/Select';
 import { TextField } from '@/lib/TextField';
 import { Divider } from '@tremor/react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
+import ReactSelect from 'react-select';
 import { InfoPopover } from '../../../components/InfoPopover';
 import { CDCConfig, TableMapRow } from '../../dto/MirrorsDTO';
 import CDCConfigForm from './cdc';
@@ -30,6 +30,27 @@ import { qrepSettings } from './helpers/qrep';
 import QRepConfigForm from './qrep';
 import QRepQuery from './query';
 
+function getPeerValue(peer: Peer) {
+  return peer.name;
+}
+
+function getPeerLabel(peer: Peer) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <div style={{ width: '5%', height: '5%' }}>
+        <Image
+          src={DBTypeToImageMapping(peer.type)}
+          alt='me'
+          width={500}
+          height={500}
+          style={{ objectFit: 'cover' }}
+        />
+      </div>
+      <div style={{ marginLeft: '1rem' }}>{peer.name}</div>
+    </div>
+  );
+}
+
 export default function CreateMirrors() {
   const router = useRouter();
   const [mirrorName, setMirrorName] = useState<string>('');
@@ -73,10 +94,10 @@ export default function CreateMirrors() {
     router.push('/mirrors');
   };
 
-  const handlePeer = (val: string, peerEnd: 'src' | 'dst') => {
-    const stateVal = peers.find((peer) => peer.name === val)!;
+  const handlePeer = (peer: Peer | null, peerEnd: 'src' | 'dst') => {
+    if (!peer) return;
     if (peerEnd === 'dst') {
-      if (stateVal.type === DBType.POSTGRES) {
+      if (peer.type === DBType.POSTGRES) {
         setConfig((curr) => {
           return {
             ...curr,
@@ -86,8 +107,8 @@ export default function CreateMirrors() {
           };
         });
       } else if (
-        stateVal.type === DBType.SNOWFLAKE ||
-        stateVal.type === DBType.BIGQUERY
+        peer.type === DBType.SNOWFLAKE ||
+        peer.type === DBType.BIGQUERY
       ) {
         setConfig((curr) => {
           return {
@@ -100,14 +121,14 @@ export default function CreateMirrors() {
       }
       setConfig((curr) => ({
         ...curr,
-        destination: stateVal,
-        destinationPeer: stateVal,
+        destination: peer,
+        destinationPeer: peer,
       }));
     } else {
       setConfig((curr) => ({
         ...curr,
-        source: stateVal,
-        sourcePeer: stateVal,
+        source: peer,
+        sourcePeer: peer,
       }));
     }
   };
@@ -287,31 +308,15 @@ export default function CreateMirrors() {
                 alignItems: 'center',
               }}
             >
-              <Select
+              <ReactSelect
                 placeholder='Select the source peer'
-                onValueChange={(val) => handlePeer(val, 'src')}
-              >
-                {(
+                onChange={(val, action) => handlePeer(val, 'src')}
+                options={
                   peers.filter((peer) => peer.type == DBType.POSTGRES) ?? []
-                ).map((peer, id) => {
-                  return (
-                    <SelectItem key={id} value={peer.name}>
-                      <div style={{ display: 'flex', alignItems: 'center' }}>
-                        <div style={{ width: '5%', height: '5%' }}>
-                          <Image
-                            src={DBTypeToImageMapping(peer.type)}
-                            alt='me'
-                            width={500}
-                            height={500}
-                            style={{ objectFit: 'cover' }}
-                          />
-                        </div>
-                        <div style={{ marginLeft: '1rem' }}>{peer.name}</div>
-                      </div>
-                    </SelectItem>
-                  );
-                })}
-              </Select>
+                }
+                getOptionValue={getPeerValue}
+                formatOptionLabel={getPeerLabel}
+              />
               <InfoPopover
                 tips={
                   'The peer from which we will be replicating data. Ensure the prerequisites for this peer are met.'
@@ -339,29 +344,13 @@ export default function CreateMirrors() {
                 alignItems: 'center',
               }}
             >
-              <Select
+              <ReactSelect
                 placeholder='Select the destination peer'
-                onValueChange={(val) => handlePeer(val, 'dst')}
-              >
-                {(peers ?? []).map((peer, id) => {
-                  return (
-                    <SelectItem key={id} value={peer.name}>
-                      <div style={{ display: 'flex', alignItems: 'center' }}>
-                        <div style={{ width: '5%', height: '5%' }}>
-                          <Image
-                            src={DBTypeToImageMapping(peer.type)}
-                            alt='me'
-                            width={500}
-                            height={500}
-                            style={{ objectFit: 'cover' }}
-                          />
-                        </div>
-                        <div style={{ marginLeft: '1rem' }}>{peer.name}</div>
-                      </div>
-                    </SelectItem>
-                  );
-                })}
-              </Select>
+                onChange={(val, action) => handlePeer(val, 'dst')}
+                options={peers ?? []}
+                getOptionValue={getPeerValue}
+                formatOptionLabel={getPeerLabel}
+              />
               <InfoPopover
                 tips={
                   'The peer from which we will be replicating data. Ensure the prerequisites for this peer are met.'
diff --git a/ui/app/mirrors/create/qrep.tsx b/ui/app/mirrors/create/qrep.tsx
index 5cf68abff9..29922b4bb7 100644
--- a/ui/app/mirrors/create/qrep.tsx
+++ b/ui/app/mirrors/create/qrep.tsx
@@ -4,7 +4,6 @@ import { QRepConfig, QRepSyncMode, QRepWriteType } from '@/grpc_generated/flow';
 import { DBType } from '@/grpc_generated/peers';
 import { Label } from '@/lib/Label';
 import { RowWithSelect, RowWithSwitch, RowWithTextField } from '@/lib/Layout';
-import { Select, SelectItem } from '@/lib/Select';
 import { Switch } from '@/lib/Switch';
 import { TextField } from '@/lib/TextField';
 import { Tooltip } from '@/lib/Tooltip';
@@ -30,6 +29,15 @@ interface QRepConfigProps {
   xmin?: boolean;
 }
 
+const SyncModes = ['AVRO', 'Copy with Binary'].map((value) => ({
+  label: value,
+  value,
+}));
+const WriteModes = ['Append', 'Upsert', 'Overwrite'].map((value) => ({
+  label: value,
+  value,
+}));
+
 export default function QRepConfigForm({
   settings,
   mirrorConfig,
@@ -114,10 +122,9 @@ export default function QRepConfigForm({
 
   const handleSourceChange = (
     val: string | undefined,
-    action: string,
     setting: MirrorSetting
   ) => {
-    if (action == 'select-option' && val) {
+    if (val) {
       if (setting.label === 'Table') {
         setter((curr) => ({ ...curr, destinationTableIdentifier: val }));
         loadColumnOptions(val);
@@ -192,33 +199,33 @@ export default function QRepConfigForm({
                       alignItems: 'center',
                     }}
                   >
-                    {setting.label.includes('Sync') ||
-                    setting.label.includes('Write') ? (
-                      <Select
-                        placeholder={`Select a mode`}
-                        onValueChange={(val) => handleChange(val, setting)}
-                        disabled={setToDefault(setting)}
-                        value={
-                          setToDefault(setting)
-                            ? defaultSyncMode(
-                                mirrorConfig.destinationPeer?.type
-                              )
-                            : undefined
-                        }
-                      >
-                        {(setting.label.includes('Sync')
-                          ? ['AVRO', 'Copy with Binary']
-                          : ['Append', 'Upsert', 'Overwrite']
-                        ).map((item, id) => {
-                          return (
-                            <SelectItem key={id} value={item.toString()}>
-                              {item.toString()}
-                            </SelectItem>
-                          );
-                        })}
-                      </Select>
-                    ) : (
-                      <div style={{ width: '100%' }}>
+                    <div style={{ width: '100%' }}>
+                      {setting.label.includes('Sync') ||
+                      setting.label.includes('Write') ? (
+                        <ReactSelect
+                          placeholder='Select a mode'
+                          onChange={(val, action) =>
+                            val && handleChange(val.value, setting)
+                          }
+                          isDisabled={setToDefault(setting)}
+                          defaultValue={
+                            setToDefault(setting)
+                              ? ((mode) =>
+                                  SyncModes.find((opt) => opt.value === mode) ||
+                                  WriteModes.find((opt) => opt.value === mode))(
+                                  defaultSyncMode(
+                                    mirrorConfig.destinationPeer?.type
+                                  )
+                                )
+                              : undefined
+                          }
+                          options={
+                            setting.label.includes('Sync')
+                              ? SyncModes
+                              : WriteModes
+                          }
+                        />
+                      ) : (
                         <ReactSelect
                           placeholder={
                             setting.label.includes('Column')
@@ -226,11 +233,7 @@ export default function QRepConfigForm({
                               : 'Select a table'
                           }
                           onChange={(val, action) =>
-                            handleSourceChange(
-                              val?.value,
-                              action.action,
-                              setting
-                            )
+                            handleSourceChange(val?.value, setting)
                           }
                           isLoading={loading}
                           options={
@@ -239,8 +242,8 @@ export default function QRepConfigForm({
                               : sourceTables
                           }
                         />
-                      </div>
-                    )}
+                      )}
+                    </div>
                     {setting.tips && (
                       <InfoPopover
                         tips={setting.tips}
diff --git a/ui/app/mirrors/create/tablemapping.tsx b/ui/app/mirrors/create/tablemapping.tsx
index 44793b7636..3fef2ad64d 100644
--- a/ui/app/mirrors/create/tablemapping.tsx
+++ b/ui/app/mirrors/create/tablemapping.tsx
@@ -160,9 +160,9 @@ const TableMapping = ({
           <ReactSelect
             placeholder='Select a schema'
             onChange={(val, action) => {
-              if (action.action == 'select-option') {
-                setSchema(val?.value || '');
-                getTablesOfSchema(val?.value || '');
+              if (val) {
+                setSchema(val.value || '');
+                getTablesOfSchema(val.value || '');
               }
             }}
             defaultInputValue={schema.length > 0 ? schema : 'Loading...'}
diff --git a/ui/app/peers/edit/[connectorId]/page.tsx b/ui/app/peers/edit/[connectorId]/page.tsx
deleted file mode 100644
index f7021b8c04..0000000000
--- a/ui/app/peers/edit/[connectorId]/page.tsx
+++ /dev/null
@@ -1,291 +0,0 @@
-'use client';
-
-import { Badge } from '@/lib/Badge';
-import { Button } from '@/lib/Button';
-import { ButtonGroup } from '@/lib/ButtonGroup';
-import { TrackerChart } from '@/lib/Chart';
-import { Checkbox } from '@/lib/Checkbox';
-import { Header } from '@/lib/Header';
-import { Icon } from '@/lib/Icon';
-import { Label } from '@/lib/Label';
-import {
-  LayoutMain,
-  LayoutRightSidebar,
-  Row,
-  RowWithToggleGroup,
-} from '@/lib/Layout';
-import { Panel } from '@/lib/Panel';
-import { SearchField } from '@/lib/SearchField';
-import { Select } from '@/lib/Select';
-import { Table, TableCell, TableRow } from '@/lib/Table';
-import { ToggleGroup, ToggleGroupItem } from '@/lib/Toggle';
-import { Color } from '@tremor/react';
-import { useState } from 'react';
-
-const weekdays = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
-
-interface Tracker {
-  color: Color;
-  tooltip: string;
-}
-
-const weekData = weekdays.map<Tracker>((weekDay) => ({
-  tooltip: weekDay,
-  color: Math.random() > 0.5 ? 'blue' : 'gray',
-}));
-
-const Badges = [
-  <Badge variant='positive' key={1}>
-    <Icon name='play_circle' />
-    Active
-  </Badge>,
-  <Badge variant='warning' key={1}>
-    <Icon name='pause_circle' />
-    Paused
-  </Badge>,
-  <Badge variant='destructive' key={1}>
-    <Icon name='dangerous' />
-    Broken
-  </Badge>,
-  <Badge variant='normal' key={1}>
-    <Icon name='pending' />
-    Incomplete
-  </Badge>,
-];
-
-const ExampleTable = ({ title }: { title: string }) => (
-  <Table
-    title={<Label variant='headline'>{title}</Label>}
-    toolbar={{
-      left: (
-        <>
-          <Button variant='normalBorderless'>
-            <Icon name='chevron_left' />
-          </Button>
-          <Button variant='normalBorderless'>
-            <Icon name='chevron_right' />
-          </Button>
-          <Button
-            variant='normalBorderless'
-            onClick={() => window.location.reload()}
-          >
-            <Icon name='refresh' />
-          </Button>
-          <Button variant='normalBorderless'>
-            <Icon name='help' />
-          </Button>
-          <Button variant='normalBorderless' disabled>
-            <Icon name='download' />
-          </Button>
-        </>
-      ),
-      right: <SearchField placeholder='Search' />,
-    }}
-    header={
-      <TableRow>
-        <TableCell as='th' variant='button'>
-          <Checkbox variant='mixed' defaultChecked />
-        </TableCell>
-        <TableCell as='th'>
-          <Select placeholder='Select' />
-        </TableCell>
-        <TableCell as='th'>
-          <Select placeholder='Select' />
-        </TableCell>
-        <TableCell as='th'>
-          <Select placeholder='Select' />
-        </TableCell>
-        <TableCell as='th'>
-          <Select placeholder='Select' />
-        </TableCell>
-        <TableCell as='th'>
-          <Select placeholder='Select' />
-        </TableCell>
-        <TableCell as='th'>
-          <Select placeholder='Select' />
-        </TableCell>
-        <TableCell as='th' variant='button'>
-          <Button>
-            <Icon name='more_horiz' />
-          </Button>
-        </TableCell>
-      </TableRow>
-    }
-  >
-    {Array(8)
-      .fill(null)
-      .map((_, index) => (
-        <TableRow key={index}>
-          <TableCell variant='button'>
-            <Checkbox />
-          </TableCell>
-          <TableCell variant='extended'>
-            <Label>Lorem</Label>
-          </TableCell>
-          <TableCell>
-            <Label>Label</Label>
-          </TableCell>
-          <TableCell>
-            <Label>Label</Label>
-          </TableCell>
-          <TableCell>
-            <Label>Label</Label>
-          </TableCell>
-          <TableCell>
-            <Label>Label</Label>
-          </TableCell>
-          <TableCell>{Badges[index % Badges.length]}</TableCell>
-          <TableCell variant='button'>
-            <Button>
-              <Icon name='more_horiz' />
-            </Button>
-          </TableCell>
-        </TableRow>
-      ))}
-  </Table>
-);
-
-type EditMirrorProps = {
-  params: { peerId: string };
-};
-export default function EditPeer({ params: { peerId } }: EditMirrorProps) {
-  const [logsOpen, setLogsOpen] = useState(false);
-  return (
-    <>
-      <LayoutMain alignSelf='flex-start' justifySelf='flex-start' width='full'>
-        <Panel>
-          <Header
-            variant='title2'
-            slot={
-              <ButtonGroup>
-                <Button>Disable peer</Button>
-                <Button onClick={() => setLogsOpen(!logsOpen)}>See logs</Button>
-                <Button>Sync now</Button>
-                <Button variant='normalSolid'>Edit peer</Button>
-              </ButtonGroup>
-            }
-          >
-            {peerId}
-          </Header>
-          <Label colorName='lowContrast' variant='footnote'>
-            Created on Jan 2023
-          </Label>
-        </Panel>
-        <Panel>
-          <div className='flex flex-row flex-nowrap'>
-            <Row className='flex-1' preTitle={'Status'} title={'Running'} />
-            <Row className='flex-1' preTitle={'Mirror'} title={'Label'} />
-            <Row className='flex-1' preTitle={'Source'} title={'Label'} />
-            <Row className='flex-1' preTitle={'Destination'} title={'Label'} />
-          </div>
-          <div className='flex flex-row flex-nowrap'>
-            <Row className='flex-1' preTitle={'Last sync'} title={'41 min'} />
-            <Row
-              className='flex-1'
-              preTitle={'Next sync in'}
-              title={'19 min'}
-            />
-            <Row className='flex-1' preTitle={'Rows synced'} title={'27%'} />
-            <Row
-              className='flex-1'
-              preTitle={'Avg. sync time'}
-              title={'8.2min'}
-            />
-          </div>
-          <TrackerChart
-            data={weekData}
-            top={
-              <RowWithToggleGroup
-                label={<Label>Sync history</Label>}
-                action={
-                  <ToggleGroup defaultValue='item1'>
-                    <ToggleGroupItem value='item1'>Month</ToggleGroupItem>
-                    <ToggleGroupItem value='item2'>Week</ToggleGroupItem>
-                    <ToggleGroupItem value='item3'>Day</ToggleGroupItem>
-                  </ToggleGroup>
-                }
-              />
-            }
-          />
-        </Panel>
-        <Panel>
-          <ExampleTable title='Table title' />
-        </Panel>
-      </LayoutMain>
-      <LayoutRightSidebar open={logsOpen}>
-        <Panel>
-          <Header
-            variant='title3'
-            slot={
-              <Button
-                variant='normalBorderless'
-                onClick={() => {
-                  setLogsOpen(false);
-                }}
-              >
-                <Icon name='close' />
-              </Button>
-            }
-          >
-            Logs
-          </Header>
-          <Label colorName='lowContrast'>A list of all activities.</Label>
-          <Button variant='normalBorderless' className='self-start'>
-            Download logs
-          </Button>
-        </Panel>
-        <Panel>
-          <Row
-            title={'Sync succeeded'}
-            titleSuffix={'18:19'}
-            description={'12KB'}
-            descriptionSuffix={'25/8/2023'}
-            footnote={'Job id: 2133'}
-          />
-          <Row
-            title={'Sync succeeded'}
-            titleSuffix={'18:19'}
-            description={'12KB'}
-            descriptionSuffix={'25/8/2023'}
-            footnote={'Job id: 2133'}
-          />
-          <Row
-            title={'Sync succeeded'}
-            titleSuffix={'18:19'}
-            description={'12KB'}
-            descriptionSuffix={'25/8/2023'}
-            footnote={'Job id: 2133'}
-          />
-          <Row
-            title={'Sync succeeded'}
-            titleSuffix={'18:19'}
-            description={'12KB'}
-            descriptionSuffix={'25/8/2023'}
-            footnote={'Job id: 2133'}
-          />
-          <Row
-            title={'Sync succeeded'}
-            titleSuffix={'18:19'}
-            description={'12KB'}
-            descriptionSuffix={'25/8/2023'}
-            footnote={'Job id: 2133'}
-          />
-          <Row
-            title={'Sync succeeded'}
-            titleSuffix={'18:19'}
-            description={'12KB'}
-            descriptionSuffix={'25/8/2023'}
-            footnote={'Job id: 2133'}
-          />
-          <Row
-            title={'Sync succeeded'}
-            titleSuffix={'18:19'}
-            description={'12KB'}
-            descriptionSuffix={'25/8/2023'}
-            footnote={'Job id: 2133'}
-          />
-        </Panel>
-      </LayoutRightSidebar>
-    </>
-  );
-}
diff --git a/ui/components/BigqueryConfig.tsx b/ui/components/BigqueryConfig.tsx
index d58def1d16..9da7c9601d 100644
--- a/ui/components/BigqueryConfig.tsx
+++ b/ui/components/BigqueryConfig.tsx
@@ -58,7 +58,7 @@ export default function BQConfig(props: BQProps) {
       <Label
         as={Link}
         style={{ color: 'teal', textDecoration: 'underline' }}
-        href={`https://cloud.google.com/bigquery/docs/authentication/service-account-file`}
+        href='https://cloud.google.com/bigquery/docs/authentication/service-account-file'
       >
         Creating a service account file
       </Label>
@@ -122,7 +122,7 @@ export default function BQConfig(props: BQProps) {
             />
             <InfoPopover
               tips={'ID of the dataset containing the tables you want to sync.'}
-              link={`https://cloud.google.com/bigquery/docs/datasets`}
+              link='https://cloud.google.com/bigquery/docs/datasets'
             />
           </div>
         }
diff --git a/ui/components/SelectSource.tsx b/ui/components/SelectSource.tsx
index 49fde97c73..695174a2fe 100644
--- a/ui/components/SelectSource.tsx
+++ b/ui/components/SelectSource.tsx
@@ -1,8 +1,8 @@
 'use client';
 import { DBType } from '@/grpc_generated/peers';
-import { Select, SelectItem } from '@/lib/Select';
 import Image from 'next/image';
 import { Dispatch, SetStateAction } from 'react';
+import ReactSelect from 'react-select';
 import { DBTypeToImageMapping } from './PeerComponent';
 
 interface SelectSourceProps {
@@ -10,31 +10,35 @@ interface SelectSourceProps {
   setPeerType: Dispatch<SetStateAction<string>>;
 }
 
-export default function SelectSource({ setPeerType }: SelectSourceProps) {
-  const dbTypes: string[] = Object.values(DBType).filter(
-    (value): value is string =>
-      typeof value === 'string' &&
-      (value === 'POSTGRES' || value === 'SNOWFLAKE' || value === 'BIGQUERY')
+function SourceLabel({ value }: { value: string }) {
+  const peerLogo = DBTypeToImageMapping(value);
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <Image src={peerLogo} alt='peer' height={15} width={15} />
+      <div style={{ marginLeft: 10 }}>{value}</div>
+    </div>
   );
+}
+
+export default function SelectSource({
+  peerType,
+  setPeerType,
+}: SelectSourceProps) {
+  const dbTypes = Object.values(DBType)
+    .filter(
+      (value): value is string =>
+        typeof value === 'string' &&
+        (value === 'POSTGRES' || value === 'SNOWFLAKE' || value === 'BIGQUERY')
+    )
+    .map((value) => ({ label: value, value }));
 
   return (
-    <Select
+    <ReactSelect
       placeholder='Select a source'
-      id='source'
-      onValueChange={(val) => setPeerType(val)}
-    >
-      {dbTypes.map((dbType, id) => {
-        const peerLogo = DBTypeToImageMapping(dbType);
-        return (
-          <SelectItem key={id} value={dbType}>
-            <div style={{ display: 'flex', alignItems: 'center' }}>
-              <Image src={peerLogo} alt='peer' height={15} width={15} />
-
-              <div style={{ marginLeft: 10 }}>{dbType}</div>
-            </div>
-          </SelectItem>
-        );
-      })}
-    </Select>
+      options={dbTypes}
+      defaultValue={dbTypes.find((opt) => opt.value === peerType)}
+      onChange={(val, action) => val && setPeerType(val.value)}
+      formatOptionLabel={SourceLabel}
+    />
   );
 }
diff --git a/ui/lib/Layout/RowWithSelect.stories.tsx b/ui/lib/Layout/RowWithSelect.stories.tsx
index a79c41990e..3af3dfaafa 100644
--- a/ui/lib/Layout/RowWithSelect.stories.tsx
+++ b/ui/lib/Layout/RowWithSelect.stories.tsx
@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Label } from '../Label';
-import { Select, SelectItem } from '../Select';
 import { RowWithSelect } from './Layout';
 
 export default {
@@ -12,19 +11,7 @@ export default {
         Label
       </Label>
     ),
-    action: (
-      <Select
-        placeholder='Select'
-        name='storybook-select'
-        id='storybook-select'
-      >
-        <SelectItem value='apple'>Apple</SelectItem>
-        <SelectItem value='banana'>Banana</SelectItem>
-        <SelectItem value='blueberry'>Blueberry</SelectItem>
-        <SelectItem value='grapes'>Grapes</SelectItem>
-        <SelectItem value='pineapple'>Pineapple</SelectItem>
-      </Select>
-    ),
+    action: <div>select</div>,
     description: <Label>Description</Label>,
   },
 } satisfies Meta<typeof RowWithSelect>;
diff --git a/ui/lib/Select/Select.stories.tsx b/ui/lib/Select/Select.stories.tsx
deleted file mode 100644
index 9a30caf43b..0000000000
--- a/ui/lib/Select/Select.stories.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Separator } from '../Separator';
-import { Select } from './Select';
-import { SelectItem } from './SelectItem';
-
-export default {
-  title: 'Components / Input / Select',
-  component: Select,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Select>;
-
-type Story = StoryObj<typeof Select>;
-export const Default: Story = {
-  render: () => (
-    <Select placeholder='Select' name='storybook-select'>
-      <SelectItem value='apple'>Apple</SelectItem>
-      <SelectItem value='banana'>Banana</SelectItem>
-      <SelectItem value='blueberry'>Blueberry</SelectItem>
-      <Separator />
-      <SelectItem value='grapes'>Grapes</SelectItem>
-      <SelectItem value='pineapple'>Pineapple</SelectItem>
-    </Select>
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <Select placeholder='Select' name='storybook-select' disabled>
-      <SelectItem value='apple'>Apple</SelectItem>
-      <SelectItem value='banana'>Banana</SelectItem>
-      <SelectItem value='blueberry'>Blueberry</SelectItem>
-      <SelectItem value='grapes'>Grapes</SelectItem>
-      <SelectItem value='pineapple'>Pineapple</SelectItem>
-    </Select>
-  ),
-};
diff --git a/ui/lib/Select/Select.styles.ts b/ui/lib/Select/Select.styles.ts
deleted file mode 100644
index 7f7b60c22a..0000000000
--- a/ui/lib/Select/Select.styles.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as RadixSelect from '@radix-ui/react-select';
-import styled, { css } from 'styled-components';
-
-export const StyledSelectIcon = styled(RadixSelect.Icon)`
-  color: ${({ theme }) => theme.colors.base.text.lowContrast};
-`;
-
-export const StyledSelectTrigger = styled(RadixSelect.Trigger)`
-  all: unset;
-
-  min-width: 128px;
-  width: 100%;
-  margin: ${({ theme }) => theme.spacing.xxSmall} 0px;
-  padding: ${({ theme }) => `${theme.spacing.xxSmall} ${theme.spacing.medium}`};
-
-  display: flex;
-  flex-flow: row nowrap;
-
-  border-radius: ${({ theme }) => theme.radius.medium};
-  color: ${({ theme }) => theme.colors.base.text.highContrast};
-  ${({ theme }) => css(theme.text.regular.body)}
-
-  &[data-state='open'],
-  &:focus-visible,
-  &:hover:not([data-disabled]) {
-    justify-content: space-between;
-
-    > i {
-      color: ${({ theme }) => theme.colors.base.text.highContrast};
-    }
-  }
-
-  &[data-state='open'],
-  &:hover:not([data-disabled]) {
-    background-color: ${({ theme }) => theme.colors.base.surface.hovered};
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.colors.accent.border.normal};
-    outline-offset: -2px;
-  }
-
-  &[data-disabled] {
-    opacity: 0.3;
-  }
-`;
diff --git a/ui/lib/Select/Select.tsx b/ui/lib/Select/Select.tsx
deleted file mode 100644
index 13f733e3c5..0000000000
--- a/ui/lib/Select/Select.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-'use client';
-// your-select.jsx
-import * as RadixSelect from '@radix-ui/react-select';
-import { PropsWithChildren } from 'react';
-import { Icon } from '../Icon';
-import { StyledSelectIcon, StyledSelectTrigger } from './Select.styles';
-import { SelectMenu } from './SelectMenu';
-
-type SelectProps = PropsWithChildren<RadixSelect.SelectProps> & {
-  placeholder?: string;
-  id?: string;
-  className?: string;
-};
-export function Select({
-  placeholder,
-  children,
-  id,
-  className,
-  ...selectRootProps
-}: SelectProps) {
-  return (
-    <RadixSelect.Root {...selectRootProps}>
-      <StyledSelectTrigger id={id} className={className}>
-        <RadixSelect.Value placeholder={placeholder} />
-        <StyledSelectIcon asChild>
-          <Icon name='expand_more' />
-        </StyledSelectIcon>
-      </StyledSelectTrigger>
-      <RadixSelect.Portal>
-        <SelectMenu position='popper'>{children}</SelectMenu>
-      </RadixSelect.Portal>
-    </RadixSelect.Root>
-  );
-}
diff --git a/ui/lib/Select/SelectItem.stories.tsx b/ui/lib/Select/SelectItem.stories.tsx
deleted file mode 100644
index e9e01e7603..0000000000
--- a/ui/lib/Select/SelectItem.stories.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as RadixSelect from '@radix-ui/react-select';
-import { Meta, StoryObj } from '@storybook/react';
-import { SelectItem } from './SelectItem';
-
-export default {
-  title: 'Components / Input / Select / SelectItem',
-  component: SelectItem,
-  tags: ['autodocs'],
-  args: {
-    value: 'label',
-  },
-} satisfies Meta<typeof SelectItem>;
-
-type Story = StoryObj<typeof SelectItem>;
-export const Default: Story = {
-  render: (props) => (
-    <RadixSelect.Root open>
-      <RadixSelect.SelectContent>
-        <SelectItem {...props}>Label</SelectItem>
-      </RadixSelect.SelectContent>
-    </RadixSelect.Root>
-  ),
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-  render: (props) => (
-    <RadixSelect.Root open>
-      <RadixSelect.SelectContent>
-        <SelectItem {...props}>Label</SelectItem>
-      </RadixSelect.SelectContent>
-    </RadixSelect.Root>
-  ),
-};
diff --git a/ui/lib/Select/SelectItem.styles.ts b/ui/lib/Select/SelectItem.styles.ts
deleted file mode 100644
index 32c489ad6d..0000000000
--- a/ui/lib/Select/SelectItem.styles.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as RadixSelect from '@radix-ui/react-select';
-import styled, { css } from 'styled-components';
-
-export const StyledItem = styled(RadixSelect.Item)`
-  position: relative;
-  display: flex;
-  justify-content: flex-start;
-
-  padding: 0;
-  padding-left: ${({ theme }) => theme.spacing['4xLarge']};
-  padding-right: ${({ theme }) => theme.spacing.medium};
-
-  border-radius: ${({ theme }) => theme.radius.small};
-
-  color: ${({ theme }) => theme.colors.base.text.highContrast};
-  ${({ theme }) => css(theme.text.regular.body)}
-
-  &[data-state="checked"],
-  &[data-highlighted] {
-    background-color: ${({ theme }) => theme.colors.base.surface.hovered};
-    outline: none;
-  }
-
-  &[data-disabled] {
-    opacity: 0.3;
-  }
-`;
-
-export const StyledIndicator = styled(RadixSelect.ItemIndicator)`
-  position: absolute;
-  left: ${({ theme }) => theme.spacing.medium};
-`;
diff --git a/ui/lib/Select/SelectItem.tsx b/ui/lib/Select/SelectItem.tsx
deleted file mode 100644
index b0ff603e52..0000000000
--- a/ui/lib/Select/SelectItem.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client';
-import * as RadixSelect from '@radix-ui/react-select';
-import type { PropsWithChildren } from 'react';
-import { Icon } from '../Icon';
-import { StyledIndicator, StyledItem } from './SelectItem.styles';
-
-type SelectItemProps = PropsWithChildren<RadixSelect.SelectItemProps>;
-export function SelectItem({ children, ...selectItemProps }: SelectItemProps) {
-  return (
-    <StyledItem {...selectItemProps}>
-      <StyledIndicator>
-        <Icon name='check' />
-      </StyledIndicator>
-      <RadixSelect.ItemText>{children}</RadixSelect.ItemText>
-    </StyledItem>
-  );
-}
diff --git a/ui/lib/Select/SelectMenu.stories.tsx b/ui/lib/Select/SelectMenu.stories.tsx
deleted file mode 100644
index 36cb6f0727..0000000000
--- a/ui/lib/Select/SelectMenu.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as RadixSelect from '@radix-ui/react-select';
-import { Meta, StoryObj } from '@storybook/react';
-import { SelectItem } from './SelectItem';
-import { SelectMenu } from './SelectMenu';
-
-export default {
-  title: 'Components / Input / Select / SelectMenu',
-  component: SelectMenu,
-  tags: ['autodocs'],
-} satisfies Meta<typeof SelectMenu>;
-
-type Story = StoryObj<typeof SelectMenu>;
-export const Default: Story = {
-  render: (props) => (
-    <div style={{ minHeight: '250px' }}>
-      <RadixSelect.Root open>
-        <SelectMenu {...props}>
-          <SelectItem value='item1'>Item one</SelectItem>
-          <SelectItem value='item2'>Item two</SelectItem>
-          <SelectItem value='item3'>Item three</SelectItem>
-          <SelectItem value='item4'>Item four</SelectItem>
-          <SelectItem value='item5'>Item five</SelectItem>
-          <SelectItem value='item6'>Item six</SelectItem>
-        </SelectMenu>
-      </RadixSelect.Root>
-    </div>
-  ),
-};
diff --git a/ui/lib/Select/SelectMenu.styles.ts b/ui/lib/Select/SelectMenu.styles.ts
deleted file mode 100644
index 82c22b3017..0000000000
--- a/ui/lib/Select/SelectMenu.styles.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as RadixSelect from '@radix-ui/react-select';
-import styled, { css } from 'styled-components';
-
-export const SelectContent = styled(RadixSelect.SelectContent)`
-  padding: ${({ theme }) => theme.spacing.medium};
-  border: 1px solid ${({ theme }) => theme.colors.base.border.subtle};
-  border-radius: ${({ theme }) => theme.radius.medium};
-  background-color: ${({ theme }) => theme.colors.base.background.normal};
-  ${({ theme }) => css(theme.dropShadow.large)};
-
-  width: var(--radix-popper-anchor-width, 'auto');
-`;
diff --git a/ui/lib/Select/SelectMenu.tsx b/ui/lib/Select/SelectMenu.tsx
deleted file mode 100644
index 34aa128a37..0000000000
--- a/ui/lib/Select/SelectMenu.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-'use client';
-import * as RadixSelect from '@radix-ui/react-select';
-import { PropsWithChildren } from 'react';
-import { SelectContent } from './SelectMenu.styles';
-
-type SelectMenuProps = PropsWithChildren<RadixSelect.SelectContentProps>;
-export function SelectMenu({ children, ...contentProps }: SelectMenuProps) {
-  return (
-    <SelectContent {...contentProps}>
-      <RadixSelect.Viewport>{children}</RadixSelect.Viewport>
-    </SelectContent>
-  );
-}
diff --git a/ui/lib/Select/index.ts b/ui/lib/Select/index.ts
deleted file mode 100644
index 7669724a89..0000000000
--- a/ui/lib/Select/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './Select';
-export * from './SelectItem';
diff --git a/ui/lib/Table/Table.stories.tsx b/ui/lib/Table/Table.stories.tsx
index 27c41ec3db..9bf333d213 100644
--- a/ui/lib/Table/Table.stories.tsx
+++ b/ui/lib/Table/Table.stories.tsx
@@ -5,7 +5,6 @@ import { Checkbox } from '../Checkbox';
 import { Icon } from '../Icon';
 import { Label } from '../Label';
 import { SearchField } from '../SearchField';
-import { Select } from '../Select';
 import { Table } from './Table';
 import { TableCell } from './TableCell';
 import { TableRow } from './TableRow';
@@ -50,24 +49,6 @@ export default {
           <TableCell as='th' variant='button'>
             <Checkbox variant='mixed' defaultChecked />
           </TableCell>
-          <TableCell as='th'>
-            <Select placeholder='Select' />
-          </TableCell>
-          <TableCell as='th'>
-            <Select placeholder='Select' />
-          </TableCell>
-          <TableCell as='th'>
-            <Select placeholder='Select' />
-          </TableCell>
-          <TableCell as='th'>
-            <Select placeholder='Select' />
-          </TableCell>
-          <TableCell as='th'>
-            <Select placeholder='Select' />
-          </TableCell>
-          <TableCell as='th'>
-            <Select placeholder='Select' />
-          </TableCell>
           <TableCell as='th' variant='button'>
             <Button>
               <Icon name='more_horiz' />
diff --git a/ui/lib/Table/TableCell.stories.tsx b/ui/lib/Table/TableCell.stories.tsx
index 3acbde9466..43a8a52225 100644
--- a/ui/lib/Table/TableCell.stories.tsx
+++ b/ui/lib/Table/TableCell.stories.tsx
@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Checkbox } from '../Checkbox';
 import { Label } from '../Label';
-import { Select } from '../Select';
 import { TableCell } from './TableCell';
 
 export default {
@@ -25,11 +24,7 @@ export const NormalCell: Story = {
   args: {
     variant: 'normal',
   },
-  render: (props) => (
-    <TableCell {...props}>
-      <Select placeholder='Select' />
-    </TableCell>
-  ),
+  render: (props) => <TableCell {...props}></TableCell>,
 };
 
 export const ExtendedCell: Story = {
diff --git a/ui/lib/Table/TableRow.stories.tsx b/ui/lib/Table/TableRow.stories.tsx
index fdd3ffc5bd..e849e5c00f 100644
--- a/ui/lib/Table/TableRow.stories.tsx
+++ b/ui/lib/Table/TableRow.stories.tsx
@@ -4,7 +4,6 @@ import { Button } from '../Button';
 import { Checkbox } from '../Checkbox';
 import { Icon } from '../Icon';
 import { Label } from '../Label';
-import { Select } from '../Select';
 import { TableCell } from './TableCell';
 import { TableRow } from './TableRow';
 
@@ -30,9 +29,7 @@ export default {
           <TableCell>
             <Label>Label</Label>
           </TableCell>
-          <TableCell>
-            <Select placeholder='Select' />
-          </TableCell>
+          <TableCell></TableCell>
           <TableCell>
             <Badge variant='positive'>Active</Badge>
           </TableCell>
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 1801590f3a..bbc92abb66 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -19,7 +19,6 @@
         "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-progress": "^1.0.3",
         "@radix-ui/react-radio-group": "^1.1.3",
-        "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-tabs": "^1.0.4",
         "@radix-ui/react-toast": "^1.1.5",
@@ -3745,6 +3744,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz",
       "integrity": "sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==",
+      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.13.10"
       }
@@ -4325,49 +4325,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-select": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.0.0.tgz",
-      "integrity": "sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/number": "1.0.1",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-collection": "1.0.3",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-direction": "1.0.1",
-        "@radix-ui/react-dismissable-layer": "1.0.5",
-        "@radix-ui/react-focus-guards": "1.0.1",
-        "@radix-ui/react-focus-scope": "1.0.4",
-        "@radix-ui/react-id": "1.0.1",
-        "@radix-ui/react-popper": "1.1.3",
-        "@radix-ui/react-portal": "1.0.4",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-slot": "1.0.2",
-        "@radix-ui/react-use-callback-ref": "1.0.1",
-        "@radix-ui/react-use-controllable-state": "1.0.1",
-        "@radix-ui/react-use-layout-effect": "1.0.1",
-        "@radix-ui/react-use-previous": "1.0.1",
-        "@radix-ui/react-visually-hidden": "1.0.3",
-        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.5"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-separator": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz",
diff --git a/ui/package.json b/ui/package.json
index 442d829dab..4a7939e655 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -25,7 +25,6 @@
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",