diff --git a/frontend/src/components/ACLPage/List/List.tsx b/frontend/src/components/ACLPage/List/List.tsx
index 07255011e..58d10e2c8 100644
--- a/frontend/src/components/ACLPage/List/List.tsx
+++ b/frontend/src/components/ACLPage/List/List.tsx
@@ -20,6 +20,7 @@ import ACLFormContext from 'components/ACLPage/Form/AclFormContext';
 import PlusIcon from 'components/common/Icons/PlusIcon';
 import ActionButton from 'components/common/ActionComponent/ActionButton/ActionButton';
 import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
+import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
 
 import * as S from './List.styled';
 
@@ -56,6 +57,7 @@ const ACList: React.FC = () => {
         header: 'Principal',
         accessorKey: 'principal',
         size: 257,
+        cell: BreakableTextCell,
       },
       {
         header: 'Resource',
diff --git a/frontend/src/components/Brokers/BrokersList/lib/utils.ts b/frontend/src/components/Brokers/BrokersList/lib/utils.ts
index 6998aa2a2..82ba68518 100644
--- a/frontend/src/components/Brokers/BrokersList/lib/utils.ts
+++ b/frontend/src/components/Brokers/BrokersList/lib/utils.ts
@@ -3,6 +3,7 @@ import * as Cell from 'components/Brokers/BrokersList/TableCells/TableCells';
 import { createColumnHelper } from '@tanstack/react-table';
 import { keyBy } from 'lib/functions/keyBy';
 import SkewHeader from 'components/Brokers/BrokersList/SkewHeader/SkewHeader';
+import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
 
 import { BrokersTableRow } from './types';
 import { NA_DISK_USAGE } from './constants';
@@ -75,6 +76,6 @@ export const getBrokersTableColumns = () => {
       cell: Cell.Skew,
     }),
     columnHelper.accessor('port', { header: 'Port' }),
-    columnHelper.accessor('host', { header: 'Host' }),
+    columnHelper.accessor('host', { header: 'Host', cell: BreakableTextCell }),
   ];
 };
diff --git a/frontend/src/components/Connect/List/List.tsx b/frontend/src/components/Connect/List/List.tsx
index 87b4d56db..5318cc850 100644
--- a/frontend/src/components/Connect/List/List.tsx
+++ b/frontend/src/components/Connect/List/List.tsx
@@ -6,6 +6,7 @@ import { FullConnectorInfo } from 'generated-sources';
 import { useConnectors } from 'lib/hooks/api/kafkaConnect';
 import { ColumnDef } from '@tanstack/react-table';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
 
 import ActionsCell from './ActionsCell';
 import TopicsCell from './TopicsCell';
@@ -22,10 +23,14 @@ const List: React.FC = () => {
 
   const columns = React.useMemo<ColumnDef<FullConnectorInfo>[]>(
     () => [
-      { header: 'Name', accessorKey: 'name' },
-      { header: 'Connect', accessorKey: 'connect' },
+      { header: 'Name', accessorKey: 'name', cell: BreakableTextCell },
+      { header: 'Connect', accessorKey: 'connect', cell: BreakableTextCell },
       { header: 'Type', accessorKey: 'type' },
-      { header: 'Plugin', accessorKey: 'connectorClass' },
+      {
+        header: 'Plugin',
+        accessorKey: 'connectorClass',
+        cell: BreakableTextCell,
+      },
       { header: 'Topics', cell: TopicsCell },
       { header: 'Status', accessorKey: 'status.state', cell: TagCell },
       { header: 'Running Tasks', cell: RunningTasksCell },
diff --git a/frontend/src/components/ConsumerGroups/List.tsx b/frontend/src/components/ConsumerGroups/List.tsx
index 40d454d8f..675aab34d 100644
--- a/frontend/src/components/ConsumerGroups/List.tsx
+++ b/frontend/src/components/ConsumerGroups/List.tsx
@@ -42,6 +42,7 @@ const List = () => {
         // eslint-disable-next-line react/no-unstable-nested-components
         cell: ({ getValue }) => (
           <LinkCell
+            style={{ wordBreak: 'break-word', whiteSpace: 'pre-wrap' }}
             value={`${getValue<string | number>()}`}
             to={encodeURIComponent(`${getValue<string | number>()}`)}
           />
@@ -51,11 +52,13 @@ const List = () => {
         id: ConsumerGroupOrdering.MEMBERS,
         header: 'Num Of Members',
         accessorKey: 'members',
+        size: 140,
       },
       {
         id: ConsumerGroupOrdering.TOPIC_NUM,
         header: 'Num Of Topics',
         accessorKey: 'topics',
+        size: 140,
       },
       {
         id: ConsumerGroupOrdering.MESSAGES_BEHIND,
@@ -64,11 +67,13 @@ const List = () => {
         cell: (args) => {
           return args.getValue() ?? 'N/A';
         },
+        size: 124,
       },
       {
         header: 'Coordinator',
         accessorKey: 'coordinator.id',
         enableSorting: false,
+        size: 104,
       },
       {
         id: ConsumerGroupOrdering.STATE,
@@ -85,6 +90,7 @@ const List = () => {
             />
           );
         },
+        size: 124,
       },
     ],
     []
diff --git a/frontend/src/components/Dashboard/ClusterName.tsx b/frontend/src/components/Dashboard/ClusterName.tsx
index 7ab581d40..70bcc9b76 100644
--- a/frontend/src/components/Dashboard/ClusterName.tsx
+++ b/frontend/src/components/Dashboard/ClusterName.tsx
@@ -8,10 +8,10 @@ type ClusterNameProps = CellContext<Cluster, unknown>;
 const ClusterName: React.FC<ClusterNameProps> = ({ row }) => {
   const { readOnly, name } = row.original;
   return (
-    <>
+    <div style={{ wordBreak: 'break-word', whiteSpace: 'pre-wrap' }}>
       {readOnly && <Tag color="blue">readonly</Tag>}
       {name}
-    </>
+    </div>
   );
 };
 
diff --git a/frontend/src/components/Dashboard/Dashboard.tsx b/frontend/src/components/Dashboard/Dashboard.tsx
index 1fb8076fd..a750e0375 100644
--- a/frontend/src/components/Dashboard/Dashboard.tsx
+++ b/frontend/src/components/Dashboard/Dashboard.tsx
@@ -38,12 +38,30 @@ const Dashboard: React.FC = () => {
   const columns = React.useMemo<ColumnDef<Cluster>[]>(() => {
     const initialColumns: ColumnDef<Cluster>[] = [
       { header: 'Cluster name', accessorKey: 'name', cell: ClusterName },
-      { header: 'Version', accessorKey: 'version' },
-      { header: 'Brokers count', accessorKey: 'brokerCount' },
-      { header: 'Partitions', accessorKey: 'onlinePartitionCount' },
-      { header: 'Topics', accessorKey: 'topicCount' },
-      { header: 'Production', accessorKey: 'bytesInPerSec', cell: SizeCell },
-      { header: 'Consumption', accessorKey: 'bytesOutPerSec', cell: SizeCell },
+      { header: 'Version', accessorKey: 'version', size: 100 },
+      {
+        header: 'Brokers count',
+        accessorKey: 'brokerCount',
+        size: 120,
+      },
+      {
+        header: 'Partitions',
+        accessorKey: 'onlinePartitionCount',
+        size: 100,
+      },
+      { header: 'Topics', accessorKey: 'topicCount', size: 80 },
+      {
+        header: 'Production',
+        accessorKey: 'bytesInPerSec',
+        cell: SizeCell,
+        size: 100,
+      },
+      {
+        header: 'Consumption',
+        accessorKey: 'bytesOutPerSec',
+        cell: SizeCell,
+        size: 116,
+      },
     ];
 
     if (appInfo.hasDynamicConfig) {
@@ -51,6 +69,7 @@ const Dashboard: React.FC = () => {
         header: '',
         id: 'actions',
         cell: ClusterTableActionsCell,
+        size: 140,
       });
     }
 
diff --git a/frontend/src/components/KsqlDb/TableView.tsx b/frontend/src/components/KsqlDb/TableView.tsx
index 538345954..c40b8fe0a 100644
--- a/frontend/src/components/KsqlDb/TableView.tsx
+++ b/frontend/src/components/KsqlDb/TableView.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { KsqlStreamDescription, KsqlTableDescription } from 'generated-sources';
 import Table from 'components/common/NewTable';
 import { ColumnDef } from '@tanstack/react-table';
+import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
 
 interface TableViewProps {
   fetching: boolean;
@@ -13,8 +14,8 @@ const TableView: React.FC<TableViewProps> = ({ fetching, rows }) => {
     ColumnDef<KsqlTableDescription | KsqlStreamDescription>[]
   >(
     () => [
-      { header: 'Name', accessorKey: 'name' },
-      { header: 'Topic', accessorKey: 'topic' },
+      { header: 'Name', accessorKey: 'name', cell: BreakableTextCell },
+      { header: 'Topic', accessorKey: 'topic', cell: BreakableTextCell },
       { header: 'Key Format', accessorKey: 'keyFormat' },
       { header: 'Value Format', accessorKey: 'valueFormat' },
       {
diff --git a/frontend/src/components/NavBar/NavBar.styled.ts b/frontend/src/components/NavBar/NavBar.styled.ts
index eb7dbfa4a..57a68cb8b 100644
--- a/frontend/src/components/NavBar/NavBar.styled.ts
+++ b/frontend/src/components/NavBar/NavBar.styled.ts
@@ -15,7 +15,7 @@ export const Navbar = styled.nav(
     left: 0;
     right: 0;
     z-index: 30;
-    background-color: ${theme.menu.primary.backgroundColor.normal};
+    background-color: ${theme.menu.header.backgroundColor};
     min-height: 3.25rem;
   `
 );
diff --git a/frontend/src/components/Schemas/List/List.tsx b/frontend/src/components/Schemas/List/List.tsx
index f04f3acd1..670c9e7f8 100644
--- a/frontend/src/components/Schemas/List/List.tsx
+++ b/frontend/src/components/Schemas/List/List.tsx
@@ -45,15 +45,20 @@ const List: React.FC = () => {
         // eslint-disable-next-line react/no-unstable-nested-components
         cell: ({ getValue }) => (
           <LinkCell
+            style={{ wordBreak: 'break-word', whiteSpace: 'pre-wrap' }}
             value={`${getValue<string | number>()}`}
             to={encodeURIComponent(`${getValue<string | number>()}`)}
           />
         ),
       },
-      { header: 'Id', accessorKey: 'id' },
-      { header: 'Type', accessorKey: 'schemaType' },
-      { header: 'Version', accessorKey: 'version' },
-      { header: 'Compatibility', accessorKey: 'compatibilityLevel' },
+      { header: 'Id', accessorKey: 'id', size: 120 },
+      { header: 'Type', accessorKey: 'schemaType', size: 120 },
+      { header: 'Version', accessorKey: 'version', size: 120 },
+      {
+        header: 'Compatibility',
+        accessorKey: 'compatibilityLevel',
+        size: 160,
+      },
     ],
     []
   );
diff --git a/frontend/src/components/Topics/List/TopicTable.tsx b/frontend/src/components/Topics/List/TopicTable.tsx
index 6ebf9b0b1..a2451ec16 100644
--- a/frontend/src/components/Topics/List/TopicTable.tsx
+++ b/frontend/src/components/Topics/List/TopicTable.tsx
@@ -44,11 +44,13 @@ const TopicTable: React.FC = () => {
         id: TopicColumnsToSort.TOTAL_PARTITIONS,
         header: 'Partitions',
         accessorKey: 'partitionCount',
+        size: 100,
       },
       {
         id: TopicColumnsToSort.OUT_OF_SYNC_REPLICAS,
         header: 'Out of sync replicas',
         accessorKey: 'partitions',
+        size: 154,
         cell: ({ getValue }) => {
           const partitions = getValue<Topic['partitions']>();
           if (partitions === undefined || partitions.length === 0) {
@@ -64,11 +66,13 @@ const TopicTable: React.FC = () => {
         header: 'Replication Factor',
         accessorKey: 'replicationFactor',
         enableSorting: false,
+        size: 148,
       },
       {
         header: 'Number of messages',
         accessorKey: 'partitions',
         enableSorting: false,
+        size: 146,
         cell: ({ getValue }) => {
           const partitions = getValue<Topic['partitions']>();
           if (partitions === undefined || partitions.length === 0) {
@@ -83,12 +87,14 @@ const TopicTable: React.FC = () => {
         id: TopicColumnsToSort.SIZE,
         header: 'Size',
         accessorKey: 'segmentSize',
+        size: 100,
         cell: SizeCell,
       },
       {
         id: 'actions',
         header: '',
         cell: ActionsCell,
+        size: 60,
       },
     ],
     []
diff --git a/frontend/src/components/Topics/List/TopicTitleCell.tsx b/frontend/src/components/Topics/List/TopicTitleCell.tsx
index fd32304be..59ef6c53a 100644
--- a/frontend/src/components/Topics/List/TopicTitleCell.tsx
+++ b/frontend/src/components/Topics/List/TopicTitleCell.tsx
@@ -9,7 +9,11 @@ export const TopicTitleCell: React.FC<CellContext<Topic, unknown>> = ({
 }) => {
   const { internal, name } = original;
   return (
-    <NavLink to={name} title={name}>
+    <NavLink
+      to={name}
+      title={name}
+      style={{ wordBreak: 'break-word', whiteSpace: 'pre-wrap' }}
+    >
       {internal && (
         <>
           <Tag color="gray">IN</Tag>
diff --git a/frontend/src/components/common/NewTable/BreakableTextCell.tsx b/frontend/src/components/common/NewTable/BreakableTextCell.tsx
new file mode 100644
index 000000000..dc6d15248
--- /dev/null
+++ b/frontend/src/components/common/NewTable/BreakableTextCell.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { CellContext } from '@tanstack/react-table';
+
+const BreakableTextCell = <T,>({ getValue }: CellContext<T, unknown>) => {
+  return (
+    <div
+      style={{
+        wordBreak: 'break-word',
+        whiteSpace: 'pre-wrap',
+      }}
+    >
+      {getValue<string>()}
+    </div>
+  );
+};
+
+export default BreakableTextCell;
diff --git a/frontend/src/components/common/NewTable/LinkCell.tsx b/frontend/src/components/common/NewTable/LinkCell.tsx
index e400fa0b9..23e3a0587 100644
--- a/frontend/src/components/common/NewTable/LinkCell.tsx
+++ b/frontend/src/components/common/NewTable/LinkCell.tsx
@@ -2,10 +2,18 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const LinkCell = ({ value, to = '' }: any) => {
+const LinkCell = ({
+  value,
+  to = '',
+  style = {},
+}: {
+  value: string;
+  to?: string;
+  style?: React.CSSProperties;
+}) => {
   const handleClick: React.MouseEventHandler = (e) => e.stopPropagation();
   return (
-    <NavLink to={to} title={value} onClick={handleClick}>
+    <NavLink to={to} title={value} onClick={handleClick} style={style}>
       {value}
     </NavLink>
   );
diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts
index 5429481b1..99ccfad87 100644
--- a/frontend/src/theme/theme.ts
+++ b/frontend/src/theme/theme.ts
@@ -566,6 +566,9 @@ export const theme = {
     },
   },
   menu: {
+    header: {
+      backgroundColor: Colors.brand[0],
+    },
     primary: {
       backgroundColor: {
         normal: 'transparent',
@@ -1098,6 +1101,9 @@ export const darkTheme: ThemeType = {
     },
   },
   menu: {
+    header: {
+      backgroundColor: Colors.brand[90],
+    },
     primary: {
       backgroundColor: {
         normal: 'transparent',