diff --git a/frontend/src/components/pages/topics/Tab.Messages/index.tsx b/frontend/src/components/pages/topics/Tab.Messages/index.tsx
index fa9997601..62601860a 100644
--- a/frontend/src/components/pages/topics/Tab.Messages/index.tsx
+++ b/frontend/src/components/pages/topics/Tab.Messages/index.tsx
@@ -51,6 +51,7 @@ import { isServerless } from '../../../../config';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import { PublishMessagePayloadOptions, PublishMessageRequest } from '../../../../protogen/redpanda/api/console/v1alpha1/publish_messages_pb';
 import { CompressionType, KafkaRecordHeader, PayloadEncoding } from '../../../../protogen/redpanda/api/console/v1alpha1/common_pb';
+import { appGlobal } from '../../../../state/appGlobal';
 import { WarningIcon } from '@chakra-ui/icons';
 
 interface TopicMessageViewProps {
@@ -311,7 +312,9 @@ export class TopicMessageView extends Component<TopicMessageViewProps> {
                             </MenuButton>
                             <MenuList>
                                 <MenuItem
-                                    onClick={() => this.showPublishRecordsModal({ topicName: this.props.topic.topicName })}
+                                    onClick={() => {
+                                        appGlobal.history.push(`/topics/${encodeURIComponent(topic.topicName)}/publish`);
+                                    }}
                                 >
                                     Publish Message
                                 </MenuItem>
diff --git a/frontend/src/components/pages/topics/Topic.Publish.tsx b/frontend/src/components/pages/topics/Topic.Publish.tsx
new file mode 100644
index 000000000..9ba56336b
--- /dev/null
+++ b/frontend/src/components/pages/topics/Topic.Publish.tsx
@@ -0,0 +1,518 @@
+import { Alert, Box, Button, Flex, FormControl, Grid, GridItem, Heading, HStack, IconButton, Input, Link, Text, useToast } from '@redpanda-data/ui';
+import { PageComponent, PageInitHelper } from '../Page';
+import { autorun, computed } from 'mobx';
+import { api } from '../../../state/backendApi';
+import { observer } from 'mobx-react';
+import { Controller, SubmitHandler, useFieldArray, useForm } from 'react-hook-form'
+import { FC, useEffect } from 'react';
+import { SingleSelect } from '../../misc/Select';
+import { Label } from '../../../utils/tsxUtils';
+import { proto3 } from '@bufbuild/protobuf';
+import { CompressionType, KafkaRecordHeader, PayloadEncoding } from '../../../protogen/redpanda/api/console/v1alpha1/common_pb';
+import { HiOutlineTrash } from 'react-icons/hi';
+import KowlEditor, { IStandaloneCodeEditor, Monaco } from '../../misc/KowlEditor';
+import { Link as ReactRouterLink } from 'react-router-dom'
+import { PublishMessagePayloadOptions, PublishMessageRequest } from '../../../protogen/redpanda/api/console/v1alpha1/publish_messages_pb';
+import { uiSettings } from '../../../state/ui';
+import { appGlobal } from '../../../state/appGlobal';
+
+type EncodingOption = {
+    value: PayloadEncoding | 'base64',
+    label: string,
+    tooltip: string, // React.ReactNode | (() => React.ReactNode),
+};
+const encodingOptions: EncodingOption[] = [
+    {value: PayloadEncoding.NONE, label: 'None (Tombstone)', tooltip: 'Message value will be null'},
+    {value: PayloadEncoding.TEXT, label: 'Text', tooltip: 'Text in the editor will be encoded to UTF-8 bytes'},
+    {value: PayloadEncoding.JSON, label: 'JSON', tooltip: 'Syntax higlighting for JSON, otherwise the same as text'},
+
+    {value: PayloadEncoding.AVRO, label: 'Avro', tooltip: 'The given JSON will be serialized using the selected schema'},
+    {value: PayloadEncoding.PROTOBUF, label: 'Protobuf', tooltip: 'The given JSON will be serialized using the selected schema'},
+
+    {value: 'base64', label: 'Binary (Base64)', tooltip: 'Message value is binary, represented as a base64 string in the editor'},
+];
+
+const protoBufInfoElement = <Text>
+    Protobuf schemas can define multiple types. Specify which type you want to use for this
+    message. <Link target="_blank" rel="noopener noreferrer" href="https://protobuf.dev/reference/protobuf/google.protobuf/">Learn more here.</Link>
+</Text>
+
+function encodingToLanguage(encoding: PayloadEncoding | 'base64') {
+    if (encoding == PayloadEncoding.AVRO) return 'json';
+    if (encoding == PayloadEncoding.JSON) return 'json';
+    if (encoding == PayloadEncoding.PROTOBUF) return 'protobuf';
+    return undefined;
+}
+
+type PayloadOptions = {
+    encoding: PayloadEncoding | 'base64';
+    data: string;
+
+    // Schema name
+    schemaName?: string;
+    schemaVersion?: number;
+    schemaId?: number;
+
+    protobufIndex?: number; // if encoding is protobuf, we also need an index
+}
+
+type Inputs = {
+    partition: number;
+    compressionType: CompressionType;
+    headers: { key: string; value: string }[];
+    key: PayloadOptions;
+    value: PayloadOptions;
+}
+
+const PublishTopicForm: FC<{ topicName: string }> = observer(({topicName}) => {
+    const toast = useToast()
+
+    const {
+        control,
+        register,
+        setValue,
+        handleSubmit,
+        setError,
+        formState: {
+            isSubmitting,
+            errors
+        },
+        watch
+    } = useForm<Inputs>({
+        defaultValues: {
+            partition: -1,
+            compressionType: CompressionType.UNCOMPRESSED,
+            headers: [{key: '', value: ''}],
+            key: {
+                data: '',
+                encoding: PayloadEncoding.TEXT,
+            },
+            value: {
+                data: '',
+                encoding: PayloadEncoding.TEXT,
+            },
+        }
+    })
+
+    const {fields, append, remove} = useFieldArray({
+        control,
+        name: 'headers',
+    });
+
+
+    const keyPayloadOptions = watch('key')
+    const valuePayloadOptions = watch('value')
+
+    const showKeySchemaSelection = keyPayloadOptions.encoding === PayloadEncoding.AVRO || keyPayloadOptions.encoding === PayloadEncoding.PROTOBUF
+    const showValueSchemaSelection = valuePayloadOptions.encoding === PayloadEncoding.AVRO || valuePayloadOptions.encoding === PayloadEncoding.PROTOBUF
+
+    const compressionTypes = proto3.getEnumType(CompressionType).values
+        // .filter(x => x.no != CompressionType.UNSPECIFIED)
+        .map(x => ({label: x.localName, value: x.no as CompressionType}))
+
+    const availablePartitions = computed(() => {
+        const partitions: { label: string, value: number; }[] = [
+            {label: 'Auto (CRC32)', value: -1},
+        ];
+
+        const count = api.topics?.first(t => t.topicName == topicName)?.partitionCount;
+        if (count == undefined) {
+            // topic not found
+            return partitions;
+        }
+
+        if (count == 1) {
+            // only one partition to select
+            return partitions;
+        }
+
+        for (let i = 0; i < count; i++) {
+            partitions.push({label: `Partition ${i}`, value: i});
+        }
+
+        return partitions;
+    })
+
+    useEffect(() => {
+        return autorun(() => {
+            api.schemaSubjects
+                ?.filter(x => uiSettings.schemaList.showSoftDeleted || (!uiSettings.schemaList.showSoftDeleted && !x.isSoftDeleted))
+                ?.filter(x => x.name.toLowerCase().includes(uiSettings.schemaList.quickSearch.toLowerCase()))
+                .forEach(x => {
+                    void api.refreshSchemaDetails(x.name);
+                })
+        })
+    }, []);
+
+    const availableValues = Array.from(api.schemaDetails.values())
+
+    const keySchemaName = watch('key.schemaName')
+    const valueSchemaName = watch('value.schemaName')
+
+    const onSubmit: SubmitHandler<Inputs> = async (data) => {
+        const req = new PublishMessageRequest();
+        req.topic = topicName
+        req.partitionId = data.partition
+        req.compression = data.compressionType
+
+        // Headers
+        for (const h of data.headers) {
+            if (!h.value && !h.value) {
+                continue;
+            }
+            const kafkaHeader = new KafkaRecordHeader();
+            kafkaHeader.key = h.key;
+            kafkaHeader.value = new TextEncoder().encode(h.value);
+            req.headers.push(kafkaHeader);
+        }
+
+        // Value
+        if (data.value.encoding != PayloadEncoding.NONE) {
+            req.value = new PublishMessagePayloadOptions();
+            req.value.data = new TextEncoder().encode(data.value.data);
+            req.value.encoding = data.value.encoding as PayloadEncoding;
+            req.value.schemaId = data.value.schemaId;
+            req.value.index = data.value.protobufIndex;
+        }
+
+        const result = await api.publishMessage(req).catch(err => {
+            setError('root.serverError', {
+                message: err.rawMessage,
+            })
+        })
+
+        if (result) {
+            toast({
+                status: 'success',
+                description: <>Record published on partition <span className="codeBox">{result.partitionId}</span> with offset <span className="codeBox">{Number(result.offset)}</span></>,
+                duration: 3000
+            })
+            appGlobal.history.push(`/topics/${encodeURIComponent(topicName)}`)
+        }
+    }
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <Grid width={['100%', '100%', 600]} gap={4} flexDirection="column">
+                <Flex gap={4} flexDirection="row">
+                    <Box flexGrow={1}>
+                        <Label text="Partition">
+                            <Controller
+                                control={control}
+                                name="partition"
+                                render={({
+                                             field: {onChange, value,},
+                                         }) => (
+                                    <SingleSelect<number>
+                                        options={availablePartitions.get()}
+                                        value={value}
+                                        onChange={onChange}
+                                    />
+                                )}
+                            />
+                        </Label>
+                    </Box>
+                    <Box flexGrow={1}>
+                        <Label text="Compression Type">
+                            <Controller
+                                control={control}
+                                name="compressionType"
+                                render={({
+                                             field: {onChange, value,},
+                                         }) => (
+                                    <SingleSelect<CompressionType>
+                                        options={compressionTypes}
+                                        value={value}
+                                        onChange={onChange}
+                                    />
+                                )}
+                            />
+                        </Label>
+                    </Box>
+                </Flex>
+
+                <Label text="Headers">
+                    <>
+                        <Flex gap={4} flexDirection="column">
+                            {fields.map((field, index) => (
+                                <HStack key={field.id} spacing={2}>
+                                    <FormControl>
+                                        <Input {...register(`headers.${index}.key`)} placeholder="Key"/>
+                                    </FormControl>
+                                    <FormControl>
+                                        <Input {...register(`headers.${index}.value`)} placeholder="Value"/>
+                                    </FormControl>
+                                    <IconButton
+                                        icon={<HiOutlineTrash/>}
+                                        aria-label="Remove item"
+                                        variant="outline"
+                                        onClick={() => remove(index)}
+                                    />
+                                </HStack>
+                            ))}
+                        </Flex>
+                        <Button type="button" variant="outline" onClick={() => append({key: '', value: ''})} size="sm" my={2}>
+                            Add row
+                        </Button>
+                    </>
+                </Label>
+
+                <Grid templateColumns="repeat(5, 1fr)" gap={2}>
+                    <GridItem colSpan={2}>
+                        <Label text="Type">
+                            <Controller
+                                control={control}
+                                name="key.encoding"
+                                render={({
+                                             field: {onChange, value,},
+                                         }) => (
+                                    <SingleSelect<PayloadEncoding | 'base64'>
+                                        options={encodingOptions}
+                                        value={value}
+                                        onChange={onChange}
+                                    />
+                                )}
+                            />
+                        </Label>
+                    </GridItem>
+                    <GridItem colSpan={2}>
+                        {showKeySchemaSelection &&
+                            <Label text="Schema">
+                                <Controller
+                                    control={control}
+                                    name="key.schemaName"
+                                    render={({
+                                                 field: {onChange, value,},
+                                             }) => (
+                                        <SingleSelect<string | undefined>
+                                            options={availableValues.map((value) => ({key: value.name, value: value.name}))}
+                                            value={value}
+                                            onChange={newVal => {
+                                                onChange(newVal);
+
+                                                const detail = availableValues
+                                                    .filter(value => value.name === newVal)
+                                                    .first()
+                                                setValue('key.schemaVersion', detail?.latestActiveVersion)
+                                            }}
+                                        />
+                                    )}
+                                />
+                            </Label>
+                        }
+                    </GridItem>
+                    <GridItem colSpan={1}>
+                        {showKeySchemaSelection && <Label text="Version">
+                            <Controller
+                                control={control}
+                                name="key.schemaVersion"
+                                render={({
+                                             field: {onChange, value,},
+                                         }) => (
+                                    <SingleSelect<number | undefined>
+                                        options={
+                                            availableValues
+                                                .filter(value => value.name === keySchemaName)
+                                                .flatMap(value => value.versions)
+                                                .sort(({version: version1}, {version: version2}) => version2 - version1)
+                                                .map(({version}) => ({label: version, value: version}))
+                                        }
+                                        value={value}
+                                        onChange={onChange}
+                                    />
+                                )}
+                            />
+                        </Label>}
+                    </GridItem>
+                </Grid>
+
+                {keyPayloadOptions.encoding === PayloadEncoding.PROTOBUF && <Label text="Index">
+                    <>
+                        {protoBufInfoElement}
+                        <Input my={2} type="number" {...register('key.protobufIndex')} />
+                    </>
+                </Label>}
+
+                <Label text="Data">
+                    <Controller
+                        control={control}
+                        name="key.data"
+                        render={({
+                                     field: {onChange, value},
+                                 }) => (
+                            <KowlEditor
+                                onMount={setTheme}
+                                height={300}
+                                value={value}
+                                onChange={onChange}
+                                language={encodingToLanguage(keyPayloadOptions?.encoding)}
+                            />
+                        )}
+                    />
+                </Label>
+
+                <Flex gap={2} flexDirection="column">
+                    <Grid templateColumns="repeat(5, 1fr)" gap={2}>
+                        <GridItem colSpan={2}>
+                            <Label text="Type">
+                                <Controller
+                                    control={control}
+                                    name="value.encoding"
+                                    render={({
+                                                 field: {onChange, value,},
+                                             }) => (
+                                        <SingleSelect<PayloadEncoding | 'base64'>
+                                            options={encodingOptions}
+                                            value={value}
+                                            onChange={onChange}
+                                        />
+                                    )}
+                                />
+                            </Label>
+                        </GridItem>
+                        <GridItem colSpan={2}>
+                            {showValueSchemaSelection && <Label text="Schema">
+                                <Controller
+                                    control={control}
+                                    name="value.schemaName"
+                                    render={({
+                                                 field: {onChange, value,},
+                                             }) => (
+                                        <SingleSelect<string | undefined>
+                                            options={availableValues.map((value) => ({key: value.name, value: value.name}))}
+                                            value={value}
+                                            onChange={newVal => {
+                                                onChange(newVal);
+
+                                                const detail = availableValues
+                                                    .filter(value => value.name === newVal)
+                                                    .first()
+                                                setValue('value.schemaVersion', detail?.latestActiveVersion)
+                                            }}
+                                        />
+                                    )}
+                                />
+                            </Label>}
+                        </GridItem>
+                        <GridItem colSpan={1}>
+                            {showValueSchemaSelection && <Label text="Version">
+                                <Controller
+                                    control={control}
+                                    name="value.schemaVersion"
+                                    render={({
+                                                 field: {onChange, value,},
+                                             }) => (
+                                        <SingleSelect<number | undefined>
+                                            options={
+                                                availableValues
+                                                    .filter(value => value.name === valueSchemaName)
+                                                    .flatMap(value => value.versions)
+                                                    .sort(({version: version1}, {version: version2}) => version2 - version1)
+                                                    .map(({version}) => ({label: version, value: version}))
+                                            }
+                                            value={value}
+                                            onChange={onChange}
+                                        />
+                                    )}
+                                />
+                            </Label>}
+                        </GridItem>
+                    </Grid>
+
+                    {valuePayloadOptions.encoding === PayloadEncoding.PROTOBUF && <Label text="Index">
+                        <>
+                            {protoBufInfoElement}
+                            <Input my={2} type="number" {...register('value.protobufIndex')} />
+                        </>
+                    </Label>}
+
+                    <Label text="Data">
+                        <Controller
+                            control={control}
+                            name="value.data"
+                            render={({
+                                         field: {onChange, value},
+                                     }) => (
+                                <KowlEditor
+                                    onMount={setTheme}
+                                    height={300}
+                                    value={value}
+                                    onChange={onChange}
+                                    language={encodingToLanguage(valuePayloadOptions?.encoding)}
+                                />
+                            )}
+                        />
+                    </Label>
+                </Flex>
+
+                {!!errors?.root?.serverError &&
+                    <Alert status="error">
+                        {errors.root.serverError.message}
+                    </Alert>}
+
+                <Flex gap={4} alignItems="center">
+                    <Button type="submit" colorScheme="brand" isLoading={isSubmitting}>Produce</Button>
+                    <Link to={`/topics/${encodeURIComponent(topicName)}`} as={ReactRouterLink}>Go Back</Link>
+                </Flex>
+            </Grid>
+        </form>
+    )
+})
+
+
+@observer
+export class TopicPublishPage extends PageComponent<{ topicName: string }> {
+    initPage(p: PageInitHelper): void {
+        const topicName = this.props.topicName;
+        p.title = 'Publish'
+        p.addBreadcrumb('Topics', '/topics');
+        p.addBreadcrumb(topicName, '/topics/' + topicName);
+        p.addBreadcrumb('Publish', '/publish')
+        this.refreshData(true);
+        appGlobal.onRefresh = () => this.refreshData(true);
+    }
+
+    refreshData(force?: boolean) {
+        api.refreshSchemaSubjects(force);
+    }
+
+    render() {
+        return (
+            <Box>
+                <Heading as="h1" noOfLines={1} py={2}>Produce message</Heading>
+                <Text fontSize="lg">This will produce a single message to the <strong>{this.props.topicName}</strong> topic.</Text>
+
+                <Box my={6}>
+                    <PublishTopicForm topicName={this.props.topicName}/>
+                </Box>
+            </Box>
+        )
+    }
+}
+
+
+function setTheme(editor: IStandaloneCodeEditor, monaco: Monaco) {
+    monaco.editor.defineTheme('kowl', {
+        base: 'vs',
+        inherit: true,
+        colors: {
+            'editor.background': '#fcfcfc',
+            'editor.foreground': '#ff0000',
+
+            'editorGutter.background': '#00000018',
+
+            'editor.lineHighlightBackground': '#aaaaaa20',
+            'editor.lineHighlightBorder': '#00000000',
+            'editorLineNumber.foreground': '#8c98a8',
+
+            'scrollbarSlider.background': '#ff0000',
+            // "editorOverviewRuler.border": "#0000",
+            'editorOverviewRuler.background': '#606060',
+            'editorOverviewRuler.currentContentForeground': '#ff0000'
+            //         background: #0001;
+            // border-left: 1px solid #0002;
+        },
+        rules: []
+    })
+    monaco.editor.setTheme('kowl');
+}
diff --git a/frontend/src/components/routes.tsx b/frontend/src/components/routes.tsx
index 6a0e88759..de859bca5 100644
--- a/frontend/src/components/routes.tsx
+++ b/frontend/src/components/routes.tsx
@@ -42,6 +42,7 @@ import Overview from './pages/overview/Overview';
 import { BrokerDetails } from './pages/overview/Broker.Details';
 import EditSchemaCompatibilityPage from './pages/schemas/EditCompatibility';
 import { SchemaCreatePage, SchemaAddVersionPage } from './pages/schemas/Schema.Create';
+import { TopicPublishPage } from './pages/topics/Topic.Publish';
 
 //
 //	Route Types
@@ -273,6 +274,7 @@ export const APP_ROUTES: IRouteEntry[] = [
 
     MakeRoute<{}>('/topics', TopicList, 'Topics', CollectionIcon),
     MakeRoute<{ topicName: string }>('/topics/:topicName', TopicDetails, 'Topics'),
+    MakeRoute<{ topicName: string }>('/topics/:topicName/publish', TopicPublishPage, 'Publish Message'),
 
     MakeRoute<{}>('/schema-registry', SchemaList, 'Schema Registry', CubeTransparentIcon),
     MakeRoute<{}>('/schema-registry/create', SchemaCreatePage, 'Create schema'),