diff --git a/ui/app/api/peers/route.ts b/ui/app/api/peers/route.ts
index 5d43442bd8..0691212af8 100644
--- a/ui/app/api/peers/route.ts
+++ b/ui/app/api/peers/route.ts
@@ -10,6 +10,7 @@ import {
   BigqueryConfig,
   ClickhouseConfig,
   DBType,
+  KafkaConfig,
   Peer,
   PostgresConfig,
   S3Config,
@@ -63,6 +64,12 @@ const constructPeer = (
         type: DBType.S3,
         s3Config: config as S3Config,
       };
+    case 'KAFKA':
+      return {
+        name,
+        type: DBType.KAFKA,
+        kafkaConfig: config as KafkaConfig,
+      };
     default:
       return;
   }
diff --git a/ui/app/dto/PeersDTO.ts b/ui/app/dto/PeersDTO.ts
index a015439d83..6e6a720914 100644
--- a/ui/app/dto/PeersDTO.ts
+++ b/ui/app/dto/PeersDTO.ts
@@ -1,6 +1,7 @@
 import {
   BigqueryConfig,
   ClickhouseConfig,
+  KafkaConfig,
   PostgresConfig,
   S3Config,
   SnowflakeConfig,
@@ -43,7 +44,8 @@ export type PeerConfig =
   | SnowflakeConfig
   | BigqueryConfig
   | ClickhouseConfig
-  | S3Config;
+  | S3Config
+  | KafkaConfig;
 export type CatalogPeer = {
   id: number;
   name: string;
diff --git a/ui/app/peers/create/[peerType]/helpers/ka.ts b/ui/app/peers/create/[peerType]/helpers/ka.ts
index 7aa58e5642..051ef2e226 100644
--- a/ui/app/peers/create/[peerType]/helpers/ka.ts
+++ b/ui/app/peers/create/[peerType]/helpers/ka.ts
@@ -1,30 +1,36 @@
 import { KafkaConfig } from '@/grpc_generated/peers';
-import {PeerSetting } from './common';
+import { PeerSetting } from './common';
 
 export const kaSetting: PeerSetting[] = [
   {
     label: 'Servers',
-    stateHandler: (value, setter) => setter((curr) => ({...cur, servers: value.split(',') })),
+    stateHandler: (value, setter) =>
+      setter((curr) => ({ ...curr, servers: (value as string).split(',') })),
     tips: 'Brokers',
-    helpfulLink: 'https://pkg.go.dev/github.com/twmb/franz-go/pkg/kgo#SeedBrokers',
+    helpfulLink:
+      'https://pkg.go.dev/github.com/twmb/franz-go/pkg/kgo#SeedBrokers',
   },
   {
     label: 'Username',
-    stateHandler: (value, setter) => setter((curr) => ({...cur, username: value })),
+    stateHandler: (value, setter) =>
+      setter((curr) => ({ ...curr, username: value as string })),
   },
   {
     label: 'Password',
     type: 'password',
-    stateHandler: (value, setter) => setter((curr) => ({...cur, password: value })),
+    stateHandler: (value, setter) =>
+      setter((curr) => ({ ...curr, password: value as string })),
   },
   {
     label: 'SASL Mechanism',
-    stateHandler: (value, setter) => setter((curr) => ({...cur, sasl: value })),
-    helpfulLink: 'https://docs.redpanda.com/current/manage/security/authentication/#scram',
+    stateHandler: (value, setter) =>
+      setter((curr) => ({ ...curr, sasl: value as string })),
+    helpfulLink:
+      'https://docs.redpanda.com/current/manage/security/authentication/#scram',
   },
 ];
 
-export const blankKaSetting: S3Config = {
+export const blankKaSetting: KafkaConfig = {
   servers: [],
   username: '',
   password: '',
diff --git a/ui/app/peers/create/[peerType]/page.tsx b/ui/app/peers/create/[peerType]/page.tsx
index 625348264d..1bc714c6b7 100644
--- a/ui/app/peers/create/[peerType]/page.tsx
+++ b/ui/app/peers/create/[peerType]/page.tsx
@@ -3,7 +3,7 @@ import { PeerConfig } from '@/app/dto/PeersDTO';
 import GuideForDestinationSetup from '@/app/mirrors/create/cdc/guide';
 import BigqueryForm from '@/components/PeerForms/BigqueryConfig';
 import ClickhouseForm from '@/components/PeerForms/ClickhouseConfig';
-import KafkaForm from '@/components/PeerForms/KafkaForm';
+import KafkaForm from '@/components/PeerForms/KafkaConfig';
 import PostgresForm from '@/components/PeerForms/PostgresForm';
 import S3Form from '@/components/PeerForms/S3Form';
 import SnowflakeForm from '@/components/PeerForms/SnowflakeForm';
diff --git a/ui/components/PeerForms/KafkaConfig.tsx b/ui/components/PeerForms/KafkaConfig.tsx
index f3c580f155..b318b19b09 100644
--- a/ui/components/PeerForms/KafkaConfig.tsx
+++ b/ui/components/PeerForms/KafkaConfig.tsx
@@ -2,11 +2,9 @@
 import { PeerSetter } from '@/app/dto/PeersDTO';
 import { kaSetting } from '@/app/peers/create/[peerType]/helpers/ka';
 import { Label } from '@/lib/Label';
-import { RowWithRadiobutton, RowWithTextField } from '@/lib/Layout';
-import { RadioButton, RadioButtonGroup } from '@/lib/RadioButtonGroup';
+import { RowWithTextField } from '@/lib/Layout';
 import { TextField } from '@/lib/TextField';
 import { Tooltip } from '@/lib/Tooltip';
-import { useEffect, useState } from 'react';
 import { InfoPopover } from '../InfoPopover';
 
 interface KafkaProps {
@@ -15,60 +13,54 @@ interface KafkaProps {
 const KafkaForm = ({ setter }: KafkaProps) => {
   return (
     <div>
-      <Label>
-      TODO TEXT
-      </Label>
+      <Label>TODO TEXT</Label>
       {kaSetting.map((setting, index) => {
-        if (displayCondition(setting.label))
-          return (
-            <RowWithTextField
-              key={index}
-              label={
-                <Label>
-                  {setting.label}{' '}
-                  {!setting.optional && (
-                    <Tooltip
-                      style={{ width: '100%' }}
-                      content={'This is a required field.'}
-                    >
-                      <Label colorName='lowContrast' colorSet='destructive'>
-                        *
-                      </Label>
-                    </Tooltip>
-                  )}
-                </Label>
-              }
-              action={
-                <div
-                  style={{
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                  }}
-                >
-                  <TextField
-                    variant='simple'
-                    style={
-                      setting.type === 'file'
-                        ? { border: 'none', height: 'auto' }
-                        : { border: 'auto' }
-                    }
-                    type={setting.type}
-                    defaultValue={setting.default}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                      setting.stateHandler(e.target.value, setter)
-                    }
-                  />
-                  {setting.tips && (
-                    <InfoPopover
-                      tips={setting.tips}
-                      link={setting.helpfulLink}
-                    />
-                  )}
-                </div>
-              }
-            />
-          );
+        return (
+          <RowWithTextField
+            key={index}
+            label={
+              <Label>
+                {setting.label}{' '}
+                {!setting.optional && (
+                  <Tooltip
+                    style={{ width: '100%' }}
+                    content={'This is a required field.'}
+                  >
+                    <Label colorName='lowContrast' colorSet='destructive'>
+                      *
+                    </Label>
+                  </Tooltip>
+                )}
+              </Label>
+            }
+            action={
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                }}
+              >
+                <TextField
+                  variant='simple'
+                  style={
+                    setting.type === 'file'
+                      ? { border: 'none', height: 'auto' }
+                      : { border: 'auto' }
+                  }
+                  type={setting.type}
+                  defaultValue={setting.default}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    setting.stateHandler(e.target.value, setter)
+                  }
+                />
+                {setting.tips && (
+                  <InfoPopover tips={setting.tips} link={setting.helpfulLink} />
+                )}
+              </div>
+            }
+          />
+        );
       })}
     </div>
   );