diff --git a/ui/app/mirrors/create/cdc.tsx b/ui/app/mirrors/create/cdc.tsx
index 45595c7fa..226167b2d 100644
--- a/ui/app/mirrors/create/cdc.tsx
+++ b/ui/app/mirrors/create/cdc.tsx
@@ -45,29 +45,8 @@ export default function CDCConfigForm(props: MirrorConfigProps) {
     );
   };
   const handleChange = (val: string | boolean, setting: MirrorSetting) => {
-    let stateVal: string | boolean | Peer | QRepSyncMode = val;
-    if (setting.label.includes('Peer')) {
-      stateVal = props.peers.find((peer) => peer.name === val)!;
-      if (setting.label === 'Destination Peer') {
-        if (stateVal.type === DBType.POSTGRES) {
-          props.setter((curr) => {
-            return {
-              ...curr,
-              cdcSyncMode: QRepSyncMode.QREP_SYNC_MODE_MULTI_INSERT,
-              snapshotSyncMode: QRepSyncMode.QREP_SYNC_MODE_MULTI_INSERT,
-            };
-          });
-        } else if (stateVal.type === DBType.SNOWFLAKE) {
-          props.setter((curr) => {
-            return {
-              ...curr,
-              cdcSyncMode: QRepSyncMode.QREP_SYNC_MODE_STORAGE_AVRO,
-              snapshotSyncMode: QRepSyncMode.QREP_SYNC_MODE_STORAGE_AVRO,
-            };
-          });
-        }
-      }
-    } else if (setting.label.includes('Sync Mode')) {
+    let stateVal: string | boolean | QRepSyncMode = val;
+    if (setting.label.includes('Sync Mode')) {
       stateVal =
         val === 'AVRO'
           ? QRepSyncMode.QREP_SYNC_MODE_STORAGE_AVRO
@@ -92,55 +71,6 @@ export default function CDCConfigForm(props: MirrorConfigProps) {
 
   return (
     <>
-      <RowWithSelect
-        label={
-          <Label>
-            Source Peer
-            {RequiredIndicator(true)}
-          </Label>
-        }
-        action={
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'center',
-            }}
-          >
-            <Select
-              placeholder='Select the source peer'
-              onValueChange={(val) =>
-                handleChange(val, {
-                  label: 'Source Peer',
-                  stateHandler: (value, setter) =>
-                    setter((curr: CDCConfig) => ({
-                      ...curr,
-                      source: value as Peer,
-                    })),
-                })
-              }
-            >
-              {(props.peers ?? [])
-                .map((peer) => peer.name)
-                .map((peerName, id) => {
-                  return (
-                    <SelectItem key={id} value={peerName}>
-                      {peerName}
-                    </SelectItem>
-                  );
-                })}
-            </Select>
-            <InfoPopover
-              tips={
-                'The peer from which we will be replicating data. Ensure the prerequisites for this peer are met.'
-              }
-              link={
-                'https://docs.peerdb.io/usecases/Real-time%20CDC/postgres-to-snowflake#prerequisites'
-              }
-            />
-          </div>
-        }
-      />
       {props.mirrorConfig.source && (
         <TableMapping
           sourcePeerName={props.mirrorConfig.source.name}
@@ -210,10 +140,7 @@ export default function CDCConfigForm(props: MirrorConfigProps) {
                         : undefined
                     }
                   >
-                    {(setting.label.includes('Peer')
-                      ? (props.peers ?? []).map((peer) => peer.name)
-                      : ['AVRO', 'Copy with Binary']
-                    ).map((item, id) => {
+                    {['AVRO', 'Copy with Binary'].map((item, id) => {
                       return (
                         <SelectItem key={id} value={item.toString()}>
                           {item.toString()}
diff --git a/ui/app/mirrors/create/helpers/cdc.ts b/ui/app/mirrors/create/helpers/cdc.ts
index b1b03e8bd..af79f83c5 100644
--- a/ui/app/mirrors/create/helpers/cdc.ts
+++ b/ui/app/mirrors/create/helpers/cdc.ts
@@ -1,16 +1,7 @@
 import { QRepSyncMode } from '@/grpc_generated/flow';
-import { Peer } from '@/grpc_generated/peers';
 import { CDCConfig } from '../../../dto/MirrorsDTO';
 import { MirrorSetting } from './common';
 export const cdcSettings: MirrorSetting[] = [
-  {
-    label: 'Destination Peer',
-    stateHandler: (value, setter) =>
-      setter((curr: CDCConfig) => ({ ...curr, destination: value as Peer })),
-    tips: 'The peer to which data will be replicated.',
-    type: 'select',
-    required: true,
-  },
   {
     label: 'Initial Copy',
     stateHandler: (value, setter) =>
@@ -55,10 +46,10 @@ export const cdcSettings: MirrorSetting[] = [
     stateHandler: (value, setter) =>
       setter((curr: CDCConfig) => ({
         ...curr,
-        snapshotMaxParallelWorkers: parseInt(value as string, 10) || 8,
+        snapshotMaxParallelWorkers: parseInt(value as string, 10) || 1,
       })),
     tips: 'PeerDB spins up parallel threads for each partition. This setting controls the number of partitions to sync in parallel. The default value is 8.',
-    default: '8',
+    default: '1',
     type: 'number',
   },
   {
diff --git a/ui/app/mirrors/create/helpers/common.ts b/ui/app/mirrors/create/helpers/common.ts
index 01fb3bd5d..87e3358a3 100644
--- a/ui/app/mirrors/create/helpers/common.ts
+++ b/ui/app/mirrors/create/helpers/common.ts
@@ -32,7 +32,7 @@ export const blankCDCSetting: FlowConnectionConfigs = {
   doInitialCopy: false,
   publicationName: '',
   snapshotNumRowsPerPartition: 500000,
-  snapshotMaxParallelWorkers: 8,
+  snapshotMaxParallelWorkers: 1,
   snapshotNumTablesInParallel: 1,
   snapshotSyncMode: 0,
   cdcSyncMode: 0,
@@ -57,7 +57,7 @@ export const blankQRepSetting: QRepConfig = {
   syncMode: 0,
   batchSizeInt: 0,
   batchDurationSeconds: 0,
-  maxParallelWorkers: 8,
+  maxParallelWorkers: 1,
   waitBetweenBatchesSeconds: 30,
   writeMode: undefined,
   stagingPath: '',
diff --git a/ui/app/mirrors/create/helpers/qrep.ts b/ui/app/mirrors/create/helpers/qrep.ts
index f0f594bd5..9d518cd98 100644
--- a/ui/app/mirrors/create/helpers/qrep.ts
+++ b/ui/app/mirrors/create/helpers/qrep.ts
@@ -4,30 +4,8 @@ import {
   QRepWriteMode,
   QRepWriteType,
 } from '@/grpc_generated/flow';
-import { Peer } from '@/grpc_generated/peers';
 import { MirrorSetting } from './common';
 export const qrepSettings: MirrorSetting[] = [
-  {
-    label: 'Source Peer',
-    stateHandler: (value, setter) =>
-      setter((curr: QRepConfig) => ({ ...curr, sourcePeer: value as Peer })),
-    tips: 'The peer from which we will be replicating data. Ensure the prerequisites for this peer are met.',
-    helpfulLink:
-      'https://docs.peerdb.io/usecases/Real-time%20CDC/postgres-to-snowflake#prerequisites',
-    type: 'select',
-    required: true,
-  },
-  {
-    label: 'Destination Peer',
-    stateHandler: (value, setter) =>
-      setter((curr: QRepConfig) => ({
-        ...curr,
-        destinationPeer: value as Peer,
-      })),
-    tips: 'The peer to which data will be replicated.',
-    type: 'select',
-    required: true,
-  },
   {
     label: 'Table',
     stateHandler: (value, setter) =>
@@ -84,10 +62,10 @@ export const qrepSettings: MirrorSetting[] = [
     stateHandler: (value, setter) =>
       setter((curr: QRepConfig) => ({
         ...curr,
-        maxParallelWorkers: parseInt(value as string, 10) || 8,
+        maxParallelWorkers: parseInt(value as string, 10) || 1,
       })),
     tips: 'PeerDB spins up parallel threads for each partition. This setting controls the number of partitions to sync in parallel. The default value is 8.',
-    default: '8',
+    default: '1',
     type: 'number',
   },
   {
diff --git a/ui/app/mirrors/create/page.tsx b/ui/app/mirrors/create/page.tsx
index a58c54c37..94c9a7478 100644
--- a/ui/app/mirrors/create/page.tsx
+++ b/ui/app/mirrors/create/page.tsx
@@ -1,22 +1,31 @@
 'use client';
-import { QRepConfig } from '@/grpc_generated/flow';
-import { Peer } from '@/grpc_generated/peers';
+import { DBTypeToImageMapping } from '@/components/PeerComponent';
+import { RequiredIndicator } from '@/components/RequiredIndicator';
+import { QRepConfig, QRepSyncMode } from '@/grpc_generated/flow';
+import { DBType, Peer } from '@/grpc_generated/peers';
 import { Button } from '@/lib/Button';
 import { ButtonGroup } from '@/lib/ButtonGroup';
 import { Label } from '@/lib/Label';
-import { RowWithRadiobutton, RowWithTextField } from '@/lib/Layout';
+import {
+  RowWithRadiobutton,
+  RowWithSelect,
+  RowWithTextField,
+} 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 { InfoPopover } from '../../../components/InfoPopover';
 import { CDCConfig, TableMapRow } from '../../dto/MirrorsDTO';
 import CDCConfigForm from './cdc';
 import { handleCreateCDC, handleCreateQRep } from './handlers';
 import { cdcSettings } from './helpers/cdc';
-import { blankCDCSetting, blankQRepSetting } from './helpers/common';
+import { blankCDCSetting } from './helpers/common';
 import { qrepSettings } from './helpers/qrep';
 import QRepConfigForm from './qrep';
 import QRepQuery from './query';
@@ -24,7 +33,7 @@ import QRepQuery from './query';
 export default function CreateMirrors() {
   const router = useRouter();
   const [mirrorName, setMirrorName] = useState<string>('');
-  const [mirrorType, setMirrorType] = useState<string>('CDC');
+  const [mirrorType, setMirrorType] = useState<string>('');
   const [formMessage, setFormMessage] = useState<{ ok: boolean; msg: string }>({
     ok: true,
     msg: '',
@@ -34,7 +43,11 @@ export default function CreateMirrors() {
   const [peers, setPeers] = useState<Peer[]>([]);
   const [rows, setRows] = useState<TableMapRow[]>([]);
   const [sourceSchema, setSourceSchema] = useState('public');
-  const [qrepQuery, setQrepQuery] = useState<string>('');
+  const [qrepQuery, setQrepQuery] =
+    useState<string>(`-- Here's a sample template:
+    SELECT * FROM <table_name> 
+    WHERE <watermark_column> 
+    BETWEEN {{.start}} AND {{.end}}`);
 
   useEffect(() => {
     fetch('/api/peers')
@@ -44,7 +57,6 @@ export default function CreateMirrors() {
       });
 
     if (mirrorType === 'Query Replication' || mirrorType === 'XMIN') {
-      setConfig(blankQRepSetting);
       if (mirrorType === 'XMIN') {
         setConfig((curr) => {
           return { ...curr, setupWatermarkTableOnDestination: true };
@@ -53,13 +65,51 @@ export default function CreateMirrors() {
         setConfig((curr) => {
           return { ...curr, setupWatermarkTableOnDestination: false };
         });
-    } else setConfig(blankCDCSetting);
+    }
   }, [mirrorType]);
 
   let listMirrorsPage = () => {
     router.push('/mirrors');
   };
 
+  const handlePeer = (val: string, peerEnd: 'src' | 'dst') => {
+    const stateVal = peers.find((peer) => peer.name === val)!;
+    console.log('/handelPeer: val:', stateVal);
+    if (peerEnd === 'dst') {
+      if (stateVal.type === DBType.POSTGRES) {
+        setConfig((curr) => {
+          return {
+            ...curr,
+            cdcSyncMode: QRepSyncMode.QREP_SYNC_MODE_MULTI_INSERT,
+            snapshotSyncMode: QRepSyncMode.QREP_SYNC_MODE_MULTI_INSERT,
+            syncMode: QRepSyncMode.QREP_SYNC_MODE_MULTI_INSERT,
+          };
+        });
+      } else if (stateVal.type === DBType.SNOWFLAKE) {
+        setConfig((curr) => {
+          return {
+            ...curr,
+            cdcSyncMode: QRepSyncMode.QREP_SYNC_MODE_STORAGE_AVRO,
+            snapshotSyncMode: QRepSyncMode.QREP_SYNC_MODE_STORAGE_AVRO,
+            syncMode: QRepSyncMode.QREP_SYNC_MODE_STORAGE_AVRO,
+          };
+        });
+      }
+      setConfig((curr) => ({
+        ...curr,
+        destination: stateVal,
+        destinationPeer: stateVal,
+      }));
+    } else {
+      setConfig((curr) => ({
+        ...curr,
+        source: stateVal,
+        sourcePeer: stateVal,
+      }));
+    }
+    console.log('/handelPeer: val:', config);
+  };
+
   return (
     <div style={{ width: '60%', alignSelf: 'center', justifySelf: 'center' }}>
       <Panel>
@@ -78,7 +128,9 @@ export default function CreateMirrors() {
         >
           Mirror type
         </Label>
-        <RadioButtonGroup onValueChange={(value) => setMirrorType(value)}>
+        <RadioButtonGroup
+          onValueChange={(value: string) => setMirrorType(value)}
+        >
           <div
             style={{
               display: 'flex',
@@ -90,12 +142,11 @@ export default function CreateMirrors() {
               style={{
                 padding: '0.5rem',
                 width: '35%',
-                height: '20vh',
+                height: '22vh',
                 display: 'flex',
                 flexDirection: 'column',
                 justifyContent: 'space-between',
                 boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.1)',
-                backgroundColor: 'ghostwhite',
                 borderRadius: '1rem',
               }}
             >
@@ -111,8 +162,8 @@ export default function CreateMirrors() {
                 <Label>
                   <div style={{ fontSize: 14 }}>
                     Change-data Capture or CDC refers to replication of changes
-                    on the source table to the destination table, including
-                    initial load.{' '}
+                    on the source table to the target table with initial load.
+                    This is recommended.
                   </div>
                 </Label>
               </div>
@@ -131,12 +182,11 @@ export default function CreateMirrors() {
                 width: '35%',
                 marginLeft: '0.5rem',
                 marginRight: '0.5rem',
-                height: '20vh',
+                height: '22vh',
                 display: 'flex',
                 flexDirection: 'column',
                 justifyContent: 'space-between',
                 boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.1)',
-                backgroundColor: 'ghostwhite',
                 borderRadius: '1rem',
               }}
             >
@@ -171,12 +221,11 @@ export default function CreateMirrors() {
               style={{
                 padding: '1rem',
                 width: '35%',
-                height: '20vh',
+                height: '22vh',
                 display: 'flex',
                 flexDirection: 'column',
                 justifyContent: 'space-between',
                 boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.1)',
-                backgroundColor: 'ghostwhite',
                 borderRadius: '1rem',
               }}
             >
@@ -217,13 +266,113 @@ export default function CreateMirrors() {
             />
           }
         />
+
+        <RowWithSelect
+          label={
+            <Label>
+              Source Peer
+              {RequiredIndicator(true)}
+            </Label>
+          }
+          action={
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+              }}
+            >
+              <Select
+                placeholder='Select the source peer'
+                onValueChange={(val) => handlePeer(val, 'src')}
+              >
+                {(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}
+                            objectFit={'cover'}
+                          />
+                        </div>
+                        <div style={{ marginLeft: '1rem' }}>{peer.name}</div>
+                      </div>
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+              <InfoPopover
+                tips={
+                  'The peer from which we will be replicating data. Ensure the prerequisites for this peer are met.'
+                }
+                link={
+                  'https://docs.peerdb.io/usecases/Real-time%20CDC/postgres-to-snowflake#prerequisites'
+                }
+              />
+            </div>
+          }
+        />
+
+        <RowWithSelect
+          label={
+            <Label>
+              Destination Peer
+              {RequiredIndicator(true)}
+            </Label>
+          }
+          action={
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+              }}
+            >
+              <Select
+                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}
+                            objectFit={'cover'}
+                          />
+                        </div>
+                        <div style={{ marginLeft: '1rem' }}>{peer.name}</div>
+                      </div>
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+              <InfoPopover
+                tips={
+                  'The peer from which we will be replicating data. Ensure the prerequisites for this peer are met.'
+                }
+                link={
+                  'https://docs.peerdb.io/usecases/Real-time%20CDC/postgres-to-snowflake#prerequisites'
+                }
+              />
+            </div>
+          }
+        />
         <Divider style={{ marginTop: '1rem', marginBottom: '1rem' }} />
 
         {mirrorType === 'Query Replication' && (
           <QRepQuery query={qrepQuery} setter={setQrepQuery} />
         )}
 
-        <Label colorName='lowContrast'>Configuration</Label>
+        {mirrorType && <Label colorName='lowContrast'>Configuration</Label>}
         {!loading && formMessage.msg.length > 0 && (
           <Label
             colorName='lowContrast'
@@ -233,7 +382,9 @@ export default function CreateMirrors() {
             {formMessage.msg}
           </Label>
         )}
-        {mirrorType === 'CDC' ? (
+        {mirrorType === '' ? (
+          <></>
+        ) : mirrorType === 'CDC' ? (
           <CDCConfigForm
             settings={cdcSettings}
             mirrorConfig={config as CDCConfig}
@@ -255,36 +406,38 @@ export default function CreateMirrors() {
         )}
       </Panel>
       <Panel>
-        <ButtonGroup className='justify-end'>
-          <Button as={Link} href='/mirrors'>
-            Cancel
-          </Button>
-          <Button
-            variant='normalSolid'
-            onClick={() =>
-              mirrorType === 'CDC'
-                ? handleCreateCDC(
-                    mirrorName,
-                    rows,
-                    config as CDCConfig,
-                    setFormMessage,
-                    setLoading,
-                    listMirrorsPage
-                  )
-                : handleCreateQRep(
-                    mirrorName,
-                    qrepQuery,
-                    config as QRepConfig,
-                    setFormMessage,
-                    setLoading,
-                    listMirrorsPage,
-                    mirrorType === 'XMIN' // for handling xmin specific
-                  )
-            }
-          >
-            Create Mirror
-          </Button>
-        </ButtonGroup>
+        {mirrorType && (
+          <ButtonGroup className='justify-end'>
+            <Button as={Link} href='/mirrors'>
+              Cancel
+            </Button>
+            <Button
+              variant='normalSolid'
+              onClick={() =>
+                mirrorType === 'CDC'
+                  ? handleCreateCDC(
+                      mirrorName,
+                      rows,
+                      config as CDCConfig,
+                      setFormMessage,
+                      setLoading,
+                      listMirrorsPage
+                    )
+                  : handleCreateQRep(
+                      mirrorName,
+                      qrepQuery,
+                      config as QRepConfig,
+                      setFormMessage,
+                      setLoading,
+                      listMirrorsPage,
+                      mirrorType === 'XMIN' // for handling xmin specific
+                    )
+              }
+            >
+              Create Mirror
+            </Button>
+          </ButtonGroup>
+        )}
       </Panel>
     </div>
   );
diff --git a/ui/app/mirrors/create/qrep.tsx b/ui/app/mirrors/create/qrep.tsx
index ed8677bcb..58806a994 100644
--- a/ui/app/mirrors/create/qrep.tsx
+++ b/ui/app/mirrors/create/qrep.tsx
@@ -31,33 +31,9 @@ export default function QRepConfigForm(props: QRepConfigProps) {
   };
 
   const handleChange = (val: string | boolean, setting: MirrorSetting) => {
-    let stateVal:
-      | string
-      | boolean
-      | Peer
-      | QRepSyncMode
-      | QRepWriteType
-      | string[] = val;
-    if (setting.label.includes('Peer')) {
-      stateVal = props.peers.find((peer) => peer.name === val)!;
-      if (setting.label === 'Destination Peer') {
-        if (stateVal.type === DBType.POSTGRES) {
-          props.setter((curr) => {
-            return {
-              ...curr,
-              syncMode: QRepSyncMode.QREP_SYNC_MODE_MULTI_INSERT,
-            };
-          });
-        } else if (stateVal.type === DBType.SNOWFLAKE) {
-          props.setter((curr) => {
-            return {
-              ...curr,
-              syncMode: QRepSyncMode.QREP_SYNC_MODE_STORAGE_AVRO,
-            };
-          });
-        }
-      }
-    } else if (setting.label.includes('Sync Mode')) {
+    let stateVal: string | boolean | QRepSyncMode | QRepWriteType | string[] =
+      val;
+    if (setting.label.includes('Sync Mode')) {
       stateVal =
         val === 'AVRO'
           ? QRepSyncMode.QREP_SYNC_MODE_STORAGE_AVRO
@@ -150,9 +126,7 @@ export default function QRepConfigForm(props: QRepConfigProps) {
                   }}
                 >
                   <Select
-                    placeholder={`Select ${
-                      setting.label.includes('Peer') ? 'a peer' : 'a mode'
-                    }`}
+                    placeholder={`Select a mode`}
                     onValueChange={(val) => handleChange(val, setting)}
                     disabled={setToDefault(setting)}
                     value={
@@ -163,9 +137,7 @@ export default function QRepConfigForm(props: QRepConfigProps) {
                         : undefined
                     }
                   >
-                    {(setting.label.includes('Peer')
-                      ? (props.peers ?? []).map((peer) => peer.name)
-                      : setting.label.includes('Sync')
+                    {(setting.label.includes('Sync')
                       ? ['AVRO', 'Copy with Binary']
                       : ['Append', 'Upsert', 'Overwrite']
                     ).map((item, id) => {
diff --git a/ui/app/mirrors/create/tablemapping.tsx b/ui/app/mirrors/create/tablemapping.tsx
index 28f89a051..30e524626 100644
--- a/ui/app/mirrors/create/tablemapping.tsx
+++ b/ui/app/mirrors/create/tablemapping.tsx
@@ -111,15 +111,16 @@ const TableMapping = ({
   useEffect(() => {
     if (searchQuery.length > 0) {
       setAllTables(
-        allTables?.filter((table) => {
-          return table.toLowerCase().includes(searchQuery.toLowerCase());
-        })
+        (curr) =>
+          curr?.filter((table) => {
+            return table.toLowerCase().includes(searchQuery.toLowerCase());
+          })
       );
     }
     if (searchQuery.length == 0) {
       getTablesOfSchema(schema);
     }
-  }, [searchQuery]);
+  }, [searchQuery, getTablesOfSchema]);
 
   useEffect(() => {
     fetchSchemas(sourcePeerName, setLoading).then((res) => setAllSchemas(res));
@@ -204,7 +205,7 @@ const TableMapping = ({
                 <div>
                   <div style={{ display: 'flex', alignItems: 'center' }}>
                     <Switch
-                      checked={getRow(sourceTableName)}
+                      checked={!!getRow(sourceTableName)}
                       onCheckedChange={(state: boolean) =>
                         handleSwitch(state, sourceTableName)
                       }
diff --git a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
index aac82fb60..ff8263dc6 100644
--- a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
+++ b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
@@ -16,7 +16,7 @@ import * as Tabs from '@radix-ui/react-tabs';
 import moment, { Duration, Moment } from 'moment';
 import { useQueryState } from 'next-usequerystate';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import styled from 'styled-components';
 import CDCDetails from './cdcDetails';
 
@@ -96,24 +96,9 @@ type SnapshotStatusProps = {
   status: SnapshotStatus;
 };
 const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => {
-  const [searchQuery, setSearchQuery] = useState('');
   const [snapshotRows, setSnapshotRows] = useState(
     status.clones.map(summarizeTableClone)
   );
-  useEffect(() => {
-    if (searchQuery.length > 0) {
-      setSnapshotRows(
-        status.clones.map(summarizeTableClone).filter((row: any) => {
-          return row.tableName
-            .toLowerCase()
-            .includes(searchQuery.toLowerCase());
-        })
-      );
-    }
-    if (searchQuery.length == 0) {
-      setSnapshotRows(status.clones.map(summarizeTableClone));
-    }
-  }, [searchQuery, status.clones]);
   return (
     <Table
       title={<Label variant='headline'>Initial Copy</Label>}
diff --git a/ui/app/peers/[peerName]/datatables.tsx b/ui/app/peers/[peerName]/datatables.tsx
index 265420a13..e06a3cec1 100644
--- a/ui/app/peers/[peerName]/datatables.tsx
+++ b/ui/app/peers/[peerName]/datatables.tsx
@@ -146,9 +146,7 @@ export const StatTable = ({ data }: { data: StatInfo[] }) => {
                 </Label>
               </TableCell>
               <TableCell>
-                <Label as='label' style={{ fontSize: 14 }}>
-                  {<TimeLabel timeVal={stat.queryStart} /> || 'N/A'}
-                </Label>
+                <TimeLabel timeVal={stat.queryStart} fontSize={14} />
               </TableCell>
               <TableCell variant='extended'>
                 <div
diff --git a/ui/app/peers/peersTable.tsx b/ui/app/peers/peersTable.tsx
index 36b5b1f59..24630cc0a 100644
--- a/ui/app/peers/peersTable.tsx
+++ b/ui/app/peers/peersTable.tsx
@@ -17,7 +17,6 @@ function PeerRow({ peer }: { peer: Peer }) {
       <TableCell>
         <PeerTypeLabel ptype={peer.type} />
       </TableCell>
-      <TableCell></TableCell>
       <TableCell>
         <DropDialog
           mode='PEER'
@@ -62,11 +61,6 @@ function PeersTable({ title, peers }: { title: string; peers: Peer[] }) {
               Peer Type
             </Label>
           </TableCell>
-          <TableCell as='th'>
-            <Label as='label' style={{ fontWeight: 'bold' }}>
-              Status
-            </Label>
-          </TableCell>
           <TableCell as='th'></TableCell>
         </TableRow>
       }
diff --git a/ui/components/PeerComponent.tsx b/ui/components/PeerComponent.tsx
index 338ecc0d6..e6a2f49b2 100644
--- a/ui/components/PeerComponent.tsx
+++ b/ui/components/PeerComponent.tsx
@@ -7,15 +7,15 @@ import { useRouter } from 'next/navigation';
 export const DBTypeToImageMapping = (peerType: DBType) => {
   switch (peerType) {
     case DBType.POSTGRES:
-      return 'svgs/pg.svg';
+      return '/svgs/pg.svg';
     case DBType.SNOWFLAKE:
-      return 'svgs/sf.svg';
+      return '/svgs/sf.svg';
     case DBType.BIGQUERY:
-      return 'svgs/bq.svg';
+      return '/svgs/bq.svg';
     case DBType.EVENTHUB_GROUP:
-      return 'svgs/ms.svg';
+      return '/svgs/ms.svg';
     case DBType.EVENTHUB:
-      return 'svgs/ms.svg';
+      return '/svgs/ms.svg';
     default:
       return '';
   }
@@ -31,13 +31,11 @@ const PeerButton = ({
   const router = useRouter();
   return (
     <Button
+      variant='peer'
       style={{
-        backgroundColor: 'white',
-        color: 'white',
         fontSize: 13,
         padding: '0.5rem',
-        boxShadow: '2px 1px 2px 2px rgba(0,0,0,0.1)',
-        borderRadius: '0.5rem',
+        borderRadius: '0.6rem',
       }}
       onClick={() => router.push(`/peers/${peerName}`)}
     >
diff --git a/ui/components/Search.tsx b/ui/components/Search.tsx
index e95f7eaf9..cd7b917fc 100644
--- a/ui/components/Search.tsx
+++ b/ui/components/Search.tsx
@@ -16,7 +16,7 @@ const SearchBar = (props: SearchProps) => {
     if (searchQuery.length == 0) {
       props.setItems(props.allItems);
     }
-  }, [searchQuery, props]);
+  }, [searchQuery]);
 
   return (
     <SearchField
diff --git a/ui/components/TimeComponent.tsx b/ui/components/TimeComponent.tsx
index 9a378f7b4..427befa69 100644
--- a/ui/components/TimeComponent.tsx
+++ b/ui/components/TimeComponent.tsx
@@ -3,7 +3,13 @@ import useTZStore from '@/app/globalstate/time';
 import { Label } from '@/lib/Label';
 import moment from 'moment-timezone';
 
-const TimeLabel = ({ timeVal }: { timeVal: Date | string }) => {
+const TimeLabel = ({
+  timeVal,
+  fontSize,
+}: {
+  timeVal: Date | string;
+  fontSize?: number;
+}) => {
   const timezone = useTZStore((state) => state.timezone);
   const formattedTimestamp = (zone: string) => {
     switch (zone) {
@@ -17,7 +23,11 @@ const TimeLabel = ({ timeVal }: { timeVal: Date | string }) => {
         return moment(timeVal).utc().format('YYYY-MM-DD HH:mm:ss');
     }
   };
-  return <Label>{formattedTimestamp(timezone)}</Label>;
+  return (
+    <Label as='label' style={{ fontSize: fontSize }}>
+      {formattedTimestamp(timezone)}
+    </Label>
+  );
 };
 
 export default TimeLabel;
diff --git a/ui/lib/Button/Button.styles.ts b/ui/lib/Button/Button.styles.ts
index 396f54457..8336f4534 100644
--- a/ui/lib/Button/Button.styles.ts
+++ b/ui/lib/Button/Button.styles.ts
@@ -88,6 +88,15 @@ const normalSolidStyle = css<BaseStyleProps>`
   --background-color-focus: ${({ theme }) => theme.colors.accent.fill.normal};
 `;
 
+const peerSolidStyle = css<BaseStyleProps>`
+  --focus-border-color: ${({ theme }) => theme.colors.accent.border.normal};
+  --text-color: ${({ theme }) => theme.colors.special.fixed.black};
+  --background-color-default: ${({ theme, $loading }) =>
+    $loading ? 'rgba(0,0,0,0.07)' : 'rgba(0,0,0,0.03)'};
+  --background-color-hover: ${({ theme }) => 'rgba(0,0,0,0.07)'};
+  --background-color-focus: ${({ theme }) => theme.colors.accent.fill.normal};
+`;
+
 const destructiveSolidStyle = css<BaseStyleProps>`
   --focus-border-color: ${({ theme }) => theme.colors.accent.border.normal};
   --text-color: ${({ theme }) => theme.colors.special.fixed.white};
@@ -126,6 +135,7 @@ const variants = {
   normalSolid: normalSolidStyle,
   destructiveSolid: destructiveSolidStyle,
   drop: dropStyle,
+  peer: peerSolidStyle,
   normalBorderless: normalBorderlessStyle,
   destructiveBorderless: destructiveBorderlessStyle,
 } as const;