diff --git a/.gitignore b/.gitignore
index 1ee2403f8..11f42415d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,3 +20,4 @@ node_modules
 /cli/build-scripts/dist/
 /libs/jsondiffpatch/coverage/
 /libs/jsondiffpatch/dist/
+/devenv-*
diff --git a/webapps/console/components/DataView/DataView.tsx b/webapps/console/components/DataView/DataView.tsx
index 375f5dbfe..1e11f10ae 100644
--- a/webapps/console/components/DataView/DataView.tsx
+++ b/webapps/console/components/DataView/DataView.tsx
@@ -96,6 +96,7 @@ export function DataView() {
       destroyInactiveTabPane={true}
       type="line"
       items={items}
+      className="w-full"
     />
   );
 }
diff --git a/webapps/console/components/DataView/EventsBrowser.tsx b/webapps/console/components/DataView/EventsBrowser/index.tsx
similarity index 88%
rename from webapps/console/components/DataView/EventsBrowser.tsx
rename to webapps/console/components/DataView/EventsBrowser/index.tsx
index 652b98791..e4b2580c3 100644
--- a/webapps/console/components/DataView/EventsBrowser.tsx
+++ b/webapps/console/components/DataView/EventsBrowser/index.tsx
@@ -1,16 +1,16 @@
 import dayjs, { Dayjs } from "dayjs";
 import utc from "dayjs/plugin/utc";
 import relativeTime from "dayjs/plugin/relativeTime";
-import { EventsLogRecord } from "../../lib/server/events-log";
+import { EventsLogRecord } from "../../../lib/server/events-log";
 import { ColumnsType } from "antd/es/table";
 import { Alert, Collapse, DatePicker, Input, Select, Table, Tag, Tooltip } from "antd";
-import { TableWithDrawer } from "./TableWithDrawer";
-import { JSONView } from "./JSONView";
-import { useAppConfig, useWorkspace } from "../../lib/context";
+import { TableWithDrawer } from "../TableWithDrawer";
+import { JSONView } from "../JSONView";
+import { useAppConfig, useWorkspace } from "../../../lib/context";
 import React, { ReactNode, useCallback, useEffect, useMemo, useReducer, useState } from "react";
-import { WLink } from "../Workspace/WLink";
-import { DestinationTitle } from "../../pages/[workspaceId]/destinations";
-import ExternalLink from "../Icons/ExternalLink";
+import { WLink } from "../../Workspace/WLink";
+import { DestinationTitle } from "../../../pages/[workspaceId]/destinations";
+import ExternalLink from "../../Icons/ExternalLink";
 import { AnalyticsContext, AnalyticsServerEvent, Geo as aGeo } from "@jitsu/protocols/analytics";
 import Icon, {
   GlobalOutlined,
@@ -19,16 +19,16 @@ import Icon, {
   UserOutlined,
   WarningOutlined,
 } from "@ant-design/icons";
-import { get, getConfigApi, useEventsLogApi } from "../../lib/useApi";
-import { FunctionTitle } from "../../pages/[workspaceId]/functions";
-import { FunctionConfig } from "../../lib/schema";
-import { arrayToMap } from "../../lib/shared/arrays";
+import { get, getConfigApi, useEventsLogApi } from "../../../lib/useApi";
+import { FunctionTitle } from "../../../pages/[workspaceId]/functions";
+import { FunctionConfig } from "../../../lib/schema";
+import { arrayToMap } from "../../../lib/shared/arrays";
 import { Bug, Globe, RefreshCw, Server } from "lucide-react";
-import { JitsuButton } from "../JitsuButton/JitsuButton";
-import { ConnectionTitle, ProfileBuilderTitle } from "../../pages/[workspaceId]/connections";
-import { StreamTitle } from "../../pages/[workspaceId]/streams";
-import { trimMiddle } from "../../lib/shared/strings";
-import { countries } from "../../lib/shared/countries";
+import { JitsuButton } from "../../JitsuButton/JitsuButton";
+import { ConnectionTitle, ProfileBuilderTitle } from "../../../pages/[workspaceId]/connections";
+import { StreamTitle } from "../../../pages/[workspaceId]/streams";
+import { trimMiddle } from "../../../lib/shared/strings";
+import { countries } from "../../../lib/shared/countries";
 import type { RefSelectProps } from "antd/es/select";
 
 import zlib from "zlib";
@@ -38,48 +38,16 @@ import {
   useConfigObjectLinks,
   useConfigObjectList,
   useProfileBuilders,
-} from "../../lib/store";
-import { coreDestinationsMap } from "../../lib/schema/destinations";
+} from "../../../lib/store";
+import { coreDestinationsMap } from "../../../lib/schema/destinations";
 import debounce from "lodash/debounce";
+import { defaultState, EventsBrowserState, EventsBrowserProps } from "./types";
 
 dayjs.extend(utc);
 dayjs.extend(relativeTime);
 
 const formatDate = (date: string | Date | Dayjs) => dayjs(date).utc().format("YYYY-MM-DD HH:mm:ss");
 
-type StreamType = "incoming" | "function" | "bulker";
-type Level = "all" | "error" | "info" | "debug" | "warn";
-type DatesRange = [string | null, string | null];
-
-type EventsBrowserProps = {
-  streamType: StreamType;
-  level: Level;
-  actorId: string;
-  dates: DatesRange;
-  search?: string;
-  patchQueryStringState: (key: string, value: any) => void;
-};
-
-type EventsBrowserState = {
-  bulkerMode?: "stream" | "batch";
-  eventsLoading: boolean;
-  events?: EventsLogRecord[];
-  initDate: Date;
-  refreshTime: Date;
-  previousRefreshTime?: Date;
-  beforeDate?: Date;
-  error?: string;
-};
-
-const defaultState: EventsBrowserState = {
-  bulkerMode: undefined,
-  eventsLoading: false,
-  events: undefined,
-  beforeDate: undefined,
-  refreshTime: new Date(),
-  initDate: new Date(),
-};
-
 function eventStreamReducer(state: EventsBrowserState, action: any) {
   if (action.type === "patch") {
     let ev = state.events;
@@ -249,7 +217,7 @@ const EventsBrowser0 = ({
         value: entity[0],
         label:
           entity[1].type === "stream" ? (
-            <StreamTitle stream={entity[1]} size={"small"} />
+            <StreamTitle stream={entity[1]} size="small" />
           ) : entity[1].type === "profile-builder" ? (
             <ProfileBuilderTitle profileBuilder={entity[1]} destination={entity[1].destination} />
           ) : (
@@ -482,9 +450,9 @@ const EventsBrowser0 = ({
   })();
   return (
     <>
-      <div className={"flex flex-row justify-between items-center pb-3.5"}>
-        <div key={"left"}>
-          <div className={"flex flex-row gap-3 mr-2"}>
+      <div className="flex flex-row justify-between items-center pb-3.5">
+        <div key="left">
+          <div className="flex flex-row gap-3 mr-2">
             <div>
               <span>{entityType == "stream" ? "Site: " : "Connection: "}</span>
               <Select
@@ -572,8 +540,8 @@ const EventsBrowser0 = ({
                 />
               </div>
             )}
-            <div className={"flex flex-row items-baseline flex-wrap"}>
-              <span className={"whitespace-nowrap"}>Date range:&nbsp;</span>
+            <div className="flex flex-row items-baseline flex-wrap">
+              <span className="whitespace-nowrap">Date range:&nbsp;</span>
               <div style={{ width: 270 }}>
                 <DatePicker.RangePicker
                   value={
@@ -620,7 +588,7 @@ const EventsBrowser0 = ({
             </div>
           </div>
         </div>
-        <div key={"right"} className={"flex flex-row"}>
+        <div key="right" className="flex flex-row">
           {streamType === "function" && connection && (
             <Tooltip
               title={
@@ -663,7 +631,7 @@ const EventsBrowser0 = ({
         </div>
       </div>
       {debugEnabled && (
-        <div className={"w-full rounded-lg border mb-3.5 p-2 bg-amber-100"}>
+        <div className="w-full rounded-lg border mb-3.5 p-2 bg-amber-100">
           Debug logging is enabled on the selected connection for{" "}
           <RelativeDate date={connection?.data.debugTill} fromNow={false} />.
         </div>
@@ -705,7 +673,7 @@ type TableProps = {
   loadEvents: () => void;
 };
 
-const FunctionsLogTable = ({ loadEvents, loading, streamType, entityType, actorId, events }: TableProps) => {
+const FunctionsLogTable = ({ loadEvents, loading, events }: TableProps) => {
   const workspace = useWorkspace();
   const [funcsMap, setFuncsMap] = useState<Record<string, FunctionConfig>>({});
 
@@ -763,7 +731,7 @@ const FunctionsLogTable = ({ loadEvents, loading, streamType, entityType, actorI
           case "udf":
             return (
               <WLink href={`/functions?id=${d.functionId}`}>
-                <FunctionTitle size={"small"} f={funcsMap[d.functionId]} />
+                <FunctionTitle size="small" f={funcsMap[d.functionId]} />
               </WLink>
             );
           case "profile":
@@ -780,7 +748,7 @@ const FunctionsLogTable = ({ loadEvents, loading, streamType, entityType, actorI
                 </WLink>
               );
             }
-            return <FunctionTitle size={"small"} title={() => d.functionId} />;
+            return <FunctionTitle size="small" title={() => d.functionId} />;
         }
       },
     },
@@ -791,15 +759,15 @@ const FunctionsLogTable = ({ loadEvents, loading, streamType, entityType, actorI
       render: d => {
         switch (d) {
           case "error":
-            return <Tag color={"red"}>ERROR</Tag>;
+            return <Tag color="red">ERROR</Tag>;
           case "info":
-            return <Tag color={"cyan"}>INFO</Tag>;
+            return <Tag color="cyan">INFO</Tag>;
           case "debug":
             return <Tag>DEBUG</Tag>;
           case "warn":
-            return <Tag color={"orange"}>WARN</Tag>;
+            return <Tag color="orange">WARN</Tag>;
           default:
-            return <Tag color={"cyan"}>{d.status}</Tag>;
+            return <Tag color="cyan">{d.status}</Tag>;
         }
       },
     },
@@ -849,7 +817,7 @@ const FunctionsLogTable = ({ loadEvents, loading, streamType, entityType, actorI
   );
 };
 
-const StreamEventsTable = ({ loadEvents, loading, streamType, entityType, actorId, events }: TableProps) => {
+const StreamEventsTable = ({ loadEvents, loading, events }: TableProps) => {
   const streamEvents = events
     ? events.map((e, i) => {
         e = {
@@ -945,7 +913,7 @@ const StreamEventsTable = ({ loadEvents, loading, streamType, entityType, actorI
   );
 };
 
-const BatchTable = ({ loadEvents, loading, streamType, entityType, actorId, events }: TableProps) => {
+const BatchTable = ({ loadEvents, loading, events }: TableProps) => {
   const batchEvents = (events || ([] as EventsLogRecord[])).map((e, i) => ({
     ...e,
     id: e.date + "_" + i,
@@ -1039,7 +1007,7 @@ const IncomingEventDrawer = ({
     if (event) {
       const DestinationsList = (props: { mappedConnections: Record<string, any>; destinationIds: string[] }) => {
         return (
-          <div className={"flex flex-row flex-wrap gap-4"}>
+          <div className="flex flex-row flex-wrap gap-4">
             {props.destinationIds
               .map(d => props.mappedConnections[d]?.destination)
               .filter(d => typeof d !== "undefined")
@@ -1064,13 +1032,12 @@ const IncomingEventDrawer = ({
         value: (st => {
           switch (st) {
             case "FAILED":
-              return <Tag color={"red"}>{st}</Tag>;
+              return <Tag color="red">{st}</Tag>;
             case "SUCCESS":
-              return <Tag color={"cyan"}>{st}</Tag>;
+              return <Tag color="cyan">{st}</Tag>;
             case "SKIPPED":
-              return <Tag color={"orange"}>{st}</Tag>;
+              return <Tag color="orange">{st}</Tag>;
             default:
-              return <Tag>{st}</Tag>;
           }
         })(event.status),
       });
@@ -1087,9 +1054,9 @@ const IncomingEventDrawer = ({
       drawerData.push({
         name: "Page URL",
         value: (
-          <div className={"break-all"}>
-            <a href={event.pageURL} target={"_blank"} rel={"noreferrer nopener"}>
-              <ExternalLink className={"w-4 h-4"} />{" "}
+          <div className="break-all">
+            <a href={event.pageURL} target="_blank" rel="noreferrer nopener">
+              <ExternalLink className="w-4 h-4" />{" "}
             </a>
             {event.pageURL}
           </div>
@@ -1107,14 +1074,14 @@ const IncomingEventDrawer = ({
       drawerData.push({
         name: "HTTP Headers",
         value: (
-          <Collapse className={"headers-collapse"} size={"small"} ghost={true}>
+          <Collapse className="headers-collapse" size="small" ghost={true}>
             <Collapse.Panel header="HTTP headers" key="1" showArrow={true}>
               <Table
                 showHeader={false}
-                className={"headers-table"}
-                rowKey={"name"}
+                className="headers-table"
+                rowKey="name"
                 bordered={true}
-                size={"small"}
+                size="small"
                 pagination={false}
                 columns={[
                   { dataIndex: "name", width: "14em", className: "font-mono" },
@@ -1148,9 +1115,9 @@ const IncomingEventDrawer = ({
   return event ? (
     <Table
       bordered={true}
-      size={"middle"}
+      size="middle"
       showHeader={false}
-      rowKey={"name"}
+      rowKey="name"
       pagination={false}
       columns={drawerColumns}
       dataSource={drawerData}
@@ -1182,7 +1149,7 @@ export const Geo: React.FC<{ geo?: aGeo }> = ({ geo }) => {
     }
     return (
       <Tooltip
-        key={"geo"}
+        key="geo"
         title={
           <div className="whitespace-pre">
             {[
@@ -1218,19 +1185,15 @@ type IncomingEvent = {
   ingestType: string;
   status: string;
   error: string;
-
   ingestPayload: any;
   unparsedPayload: string;
-
   messageId: string;
   type?: string;
   originDomain: string;
   writeKey: string;
   httpHeaders: Record<string, string>;
-
   event?: AnalyticsServerEvent;
   context?: AnalyticsContext;
-
   host?: string;
   pagePath?: string;
   pageURL?: string;
@@ -1239,19 +1202,10 @@ type IncomingEvent = {
   email?: string;
   anonymousId?: string;
   referringDomain?: string;
-
   destinations: string[];
 };
 
-const IncomingEventsTable = ({
-  loadEvents,
-  loading,
-  streamType,
-  entityType,
-  actorId,
-  events,
-  mappedConnections,
-}: TableProps) => {
+const IncomingEventsTable = ({ loadEvents, loading, events, mappedConnections }: TableProps) => {
   const appConfig = useAppConfig();
   const mapEvents = evs =>
     evs
@@ -1273,13 +1227,10 @@ const IncomingEventsTable = ({
             id: ev.date + "_" + i,
             date: ev.date,
             ingestType: ingestPayload.ingestType,
-
             status: ev.content.status,
             error: ev.content.error,
-
             ingestPayload: ingestPayload,
             unparsedPayload: unparsedPayload,
-
             messageId: ingestPayload.messageId,
             type: ingestPayload.type,
             originDomain:
@@ -1289,10 +1240,8 @@ const IncomingEventsTable = ({
                 : ingestPayload.httpHeaders?.["x-forwarded-host"] || appConfig.publicEndpoints.dataHost),
             writeKey: ingestPayload.writeKey,
             httpHeaders: ingestPayload.httpHeaders,
-
             event: event,
             context: context,
-
             host: context?.page?.host,
             pageURL: context?.page?.url,
             pagePath: context?.page?.path,
@@ -1300,9 +1249,7 @@ const IncomingEventsTable = ({
             userId: event?.userId,
             email: context?.traits?.email || event?.traits?.email,
             anonymousId: event?.anonymousId,
-
             referringDomain: context?.page?.referring_domain,
-
             destinations: [...(ev.content.asyncDestinations ?? []), ...(ev.content.tags ?? [])],
           } as IncomingEvent;
         })
@@ -1316,11 +1263,11 @@ const IncomingEventsTable = ({
       render: d => {
         switch (d) {
           case "FAILED":
-            return <Tag color={"red"}>&nbsp;</Tag>;
+            return <Tag color="red">&nbsp;</Tag>;
           case "SUCCESS":
-            return <Tag color={"cyan"}>&nbsp;</Tag>;
+            return <Tag color="cyan">&nbsp;</Tag>;
           case "SKIPPED":
-            return <Tag color={"orange"}>&nbsp;</Tag>;
+            return <Tag color="orange">&nbsp;</Tag>;
           default:
             return <Tag>&nbsp;</Tag>;
         }
@@ -1350,7 +1297,7 @@ const IncomingEventsTable = ({
                   component={() => (isDeviceEvent ? <Globe className="w-3 h-3" /> : <Server className="w-3 h-3" />)}
                 />
               }
-              className={"whitespace-nowrap"}
+              className="whitespace-nowrap"
             >
               {trimMiddle(eventName || "", 16)}
             </Tag>
@@ -1365,9 +1312,9 @@ const IncomingEventsTable = ({
       key: "pagePath",
       render: (d: IncomingEvent) =>
         d.pageURL && (
-          <div className={"whitespace-nowrap"}>
-            <a href={d.pageURL} target={"_blank"} rel={"noreferrer noopener"}>
-              <ExternalLink className={"w-3.5 h-3.5"} />{" "}
+          <div className="whitespace-nowrap">
+            <a href={d.pageURL} target="_blank" rel="noreferrer noopener">
+              <ExternalLink className="w-3.5 h-3.5" />{" "}
             </a>
             {d.pagePath}
           </div>
@@ -1380,11 +1327,11 @@ const IncomingEventsTable = ({
       render: (d: IncomingEvent) => {
         if (d.status == "SKIPPED" || d.status == "FAILED") {
           return (
-            <div className={"flex flex-row"}>
+            <div className="flex flex-row">
               <Tag
                 color={d.status == "SKIPPED" ? "orange" : "error"}
                 icon={<WarningOutlined />}
-                className={"whitespace-nowrap"}
+                className="whitespace-nowrap"
               >
                 {d.error}
               </Tag>
@@ -1392,39 +1339,39 @@ const IncomingEventsTable = ({
           );
         }
         return (
-          <div className={"flex flex-row"}>
+          <div className="flex flex-row">
             <Geo geo={d.context?.geo} />
             {d.host && (
-              <Tooltip title={"Host"} key={"host"}>
-                <Tag color={"geekblue"} icon={<GlobalOutlined />} className={"whitespace-nowrap"}>
+              <Tooltip title="Host" key="host">
+                <Tag color="geekblue" icon={<GlobalOutlined />} className="whitespace-nowrap">
                   {d.host}
                 </Tag>
               </Tooltip>
             )}
             {d.email && (
-              <Tooltip title={"Email"} key={"email"}>
-                <Tag color={"green"} icon={<UserOutlined />} className={"whitespace-nowrap"}>
+              <Tooltip title="Email" key="email">
+                <Tag color="green" icon={<UserOutlined />} className="whitespace-nowrap">
                   {d.email}
                 </Tag>
               </Tooltip>
             )}
             {d.userId && !d.email && (
-              <Tooltip title={"User ID"} key={"userId"}>
-                <Tag color={"green"} icon={<UserOutlined />} className={"whitespace-nowrap"}>
+              <Tooltip title="User ID" key="userId">
+                <Tag color="green" icon={<UserOutlined />} className="whitespace-nowrap">
                   {d.userId.toString()}
                 </Tag>
               </Tooltip>
             )}
             {d.referringDomain && d.host !== d.referringDomain && (
-              <Tooltip title={"Referring Domain"} key={"rDomain"}>
-                <Tag color={"purple"} icon={<LinkOutlined />} className={"whitespace-nowrap"}>
+              <Tooltip title="Referring Domain" key="rDomain">
+                <Tag color="purple" icon={<LinkOutlined />} className="whitespace-nowrap">
                   {d.referringDomain}
                 </Tag>
               </Tooltip>
             )}
             {!d.userId && d.anonymousId && (
-              <Tooltip title={"Anonymous ID"} key={"anonymousId"}>
-                <Tag icon={<QuestionCircleOutlined />} className={"whitespace-nowrap"}>
+              <Tooltip title="Anonymous ID" key="anonymousId">
+                <Tag icon={<QuestionCircleOutlined />} className="whitespace-nowrap">
                   {d.anonymousId.toString()}
                 </Tag>
               </Tooltip>
diff --git a/webapps/console/components/DataView/EventsBrowser/types.tsx b/webapps/console/components/DataView/EventsBrowser/types.tsx
new file mode 100644
index 000000000..11b1e4147
--- /dev/null
+++ b/webapps/console/components/DataView/EventsBrowser/types.tsx
@@ -0,0 +1,34 @@
+import { EventsLogRecord } from "../../../lib/server/events-log";
+
+type StreamType = "incoming" | "function" | "bulker";
+type Level = "all" | "error" | "info" | "debug" | "warn";
+type DatesRange = [string | null, string | null];
+
+export type EventsBrowserProps = {
+  streamType: StreamType;
+  level: Level;
+  actorId: string;
+  dates: DatesRange;
+  search?: string;
+  patchQueryStringState: (key: string, value: any) => void;
+};
+
+export type EventsBrowserState = {
+  bulkerMode?: "stream" | "batch";
+  eventsLoading: boolean;
+  events?: EventsLogRecord[];
+  initDate: Date;
+  refreshTime: Date;
+  previousRefreshTime?: Date;
+  beforeDate?: Date;
+  error?: string;
+};
+
+export const defaultState: EventsBrowserState = {
+  bulkerMode: undefined,
+  eventsLoading: false,
+  events: undefined,
+  beforeDate: undefined,
+  refreshTime: new Date(),
+  initDate: new Date(),
+};
diff --git a/webapps/console/components/PageLayout/WorkspacePageLayout.tsx b/webapps/console/components/PageLayout/WorkspacePageLayout.tsx
index e53134fd8..987aa2175 100644
--- a/webapps/console/components/PageLayout/WorkspacePageLayout.tsx
+++ b/webapps/console/components/PageLayout/WorkspacePageLayout.tsx
@@ -85,16 +85,16 @@ export const WorkspaceMenu: React.FC<{ closeMenu: () => void; classicProject?: s
       <div className="border-t border-textDisabled px-4 py-2 flex flex-col">
         {classicToken && (
           <Link
-            key={"classic"}
+            key="classic"
             href={`${appConfig.jitsuClassicUrl}/?token=${classicToken}`}
-            target={"_blank"}
-            rel={"noopener noreferrer"}
+            target="_blank"
+            rel="noopener noreferrer"
             className="cursor-pointer"
           >
             <Button
-              type={"dashed"}
-              className={"w-full mt-1.5"}
-              icon={<span className={"anticon w-4 h-4"}>{branding.classicLogo}</span>}
+              type="dashed"
+              className="w-full mt-1.5"
+              icon={<span className="anticon w-4 h-4">{branding.classicLogo}</span>}
             >
               Switch to Jitsu Classic
             </Button>
@@ -524,7 +524,7 @@ function PageHeader() {
     { title: "Destinations", path: "/destinations", icon: <Server className="w-full h-full" /> },
     {
       title: "Data",
-      icon: <SearchCode className={"w-full h-full"} />,
+      icon: <SearchCode className="w-full h-full" />,
       items: [
         { title: "Live Events", path: "/data", icon: <Activity className="w-full h-full" /> },
         { title: "Query Data", path: "/sql", icon: <Terminal className="w-full h-full" />, hidden: !appConfig?.ee },
@@ -714,7 +714,7 @@ export const WorkspacePageLayout: React.FC<PropsWithChildren<PageLayoutProps>> =
 
   const pHeader = (
     <VerticalSection className="header border-b border-neutral-300 bg-neutral-50 z-40" key="header">
-      <WidthControl className={"px-4"}>
+      <WidthControl className="px-4">
         <PageHeader />
       </WidthControl>
     </VerticalSection>
@@ -738,17 +738,17 @@ export const WorkspacePageLayout: React.FC<PropsWithChildren<PageLayoutProps>> =
         {fullscreen ? (
           <>
             <div className="flex justify-center fixed w-screen z-50 pointer-events-none">
-              <div className={"z-50 cursor-pointer pointer-events-auto px-2"}>
+              <div className="z-50 cursor-pointer pointer-events-auto px-2">
                 <button
                   className="border-l border-b border-r rounded-b-md px-8 py-0 shadow"
                   onClick={() => setShowDrawer(!showDrawer)}
                 >
-                  <ChevronUp className={"w-6 h-6 block rotate-180"} />
+                  <ChevronUp className="w-6 h-6 block rotate-180" />
                 </button>
               </div>
             </div>
             <Drawer
-              height={"auto"}
+              height="auto"
               bodyStyle={{ padding: 0, minWidth: 1024 }}
               open={showDrawer}
               placement={"top"}
@@ -770,7 +770,7 @@ export const WorkspacePageLayout: React.FC<PropsWithChildren<PageLayoutProps>> =
               <X className="w-8 h-8" />
             </button>
           )}
-          <WidthControl className={"px-8"}>{children}</WidthControl>
+          <WidthControl className="px-8">{children}</WidthControl>
         </VerticalSection>
       </div>
     </div>
diff --git a/webapps/console/pages/[workspaceId]/data.tsx b/webapps/console/pages/[workspaceId]/data.tsx
index 5e3ccfe71..7794fe527 100644
--- a/webapps/console/pages/[workspaceId]/data.tsx
+++ b/webapps/console/pages/[workspaceId]/data.tsx
@@ -1,7 +1,6 @@
 import { WorkspacePageLayout } from "../../components/PageLayout/WorkspacePageLayout";
 import { useTitle } from "../../lib/ui";
 import { branding } from "../../lib/branding";
-import React from "react";
 import { DataView } from "../../components/DataView/DataView";
 
 const DataViewPage: React.FC<any> = () => {
@@ -10,12 +9,8 @@ const DataViewPage: React.FC<any> = () => {
   return (
     <WorkspacePageLayout>
       <div className="flex flex-col">
-        <div className="flex mb-4">
-          <h1 className="text-3xl">Live Events</h1>
-        </div>
-        <div className="w-full">
-          <DataView />
-        </div>
+        <h1 className="text-3xl mb-4">Live Events</h1>
+        <DataView />
       </div>
     </WorkspacePageLayout>
   );