diff --git a/x-pack/plugins/observability_solution/investigate_app/kibana.jsonc b/x-pack/plugins/observability_solution/investigate_app/kibana.jsonc
index c7e860a047366..ecfe77b5a0584 100644
--- a/x-pack/plugins/observability_solution/investigate_app/kibana.jsonc
+++ b/x-pack/plugins/observability_solution/investigate_app/kibana.jsonc
@@ -24,7 +24,6 @@
       "esql",
       "kibanaReact",
       "kibanaUtils",
-      "esqlDataGrid",
     ],
     "optionalPlugins": [],
     "extraPublicDirs": []
diff --git a/x-pack/plugins/observability_solution/investigate_app/public/components/investigation_edit_form/fields/status_field.tsx b/x-pack/plugins/observability_solution/investigate_app/public/components/investigation_edit_form/fields/status_field.tsx
new file mode 100644
index 0000000000000..aa3f071b36dec
--- /dev/null
+++ b/x-pack/plugins/observability_solution/investigate_app/public/components/investigation_edit_form/fields/status_field.tsx
@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiIcon, EuiFormRow, EuiComboBox } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { InvestigationForm } from '../investigation_edit_form';
+
+const I18N_STATUS_LABEL = i18n.translate(
+  'xpack.investigateApp.investigationEditForm.span.statusLabel',
+  { defaultMessage: 'Status' }
+);
+
+const options = [
+  {
+    label: 'Ongoing',
+    value: 'ongoing',
+    prepend: <EuiIcon size="s" type="dot" color="danger" />,
+  },
+  {
+    label: 'Closed',
+    value: 'closed',
+    prepend: <EuiIcon size="s" type="dot" color="success" />,
+  },
+];
+
+export function StatusField() {
+  const { control, getFieldState } = useFormContext<InvestigationForm>();
+
+  return (
+    <EuiFormRow label={I18N_STATUS_LABEL} fullWidth isInvalid={getFieldState('status').invalid}>
+      <Controller
+        control={control}
+        name="status"
+        rules={{ required: true }}
+        render={({ field, fieldState }) => (
+          <EuiComboBox
+            {...field}
+            fullWidth
+            isInvalid={fieldState.invalid}
+            isClearable={false}
+            aria-label={I18N_STATUS_LABEL}
+            placeholder={I18N_STATUS_LABEL}
+            options={options}
+            selectedOptions={options.filter((option) => option.value === field.value)}
+            onChange={(selected) => {
+              return field.onChange(selected[0].value);
+            }}
+            singleSelection={{ asPlainText: true }}
+          />
+        )}
+      />
+    </EuiFormRow>
+  );
+}
diff --git a/x-pack/plugins/observability_solution/investigate_app/public/components/investigation_edit_form/investigation_edit_form.tsx b/x-pack/plugins/observability_solution/investigate_app/public/components/investigation_edit_form/investigation_edit_form.tsx
new file mode 100644
index 0000000000000..5ea7486c2f612
--- /dev/null
+++ b/x-pack/plugins/observability_solution/investigate_app/public/components/investigation_edit_form/investigation_edit_form.tsx
@@ -0,0 +1,183 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiFormRow,
+  EuiLoadingSpinner,
+  EuiTitle,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { pick } from 'lodash';
+import React from 'react';
+import { Controller, FormProvider, useForm } from 'react-hook-form';
+import { v4 as uuidv4 } from 'uuid';
+import { useCreateInvestigation } from '../../hooks/use_create_investigation';
+import { useFetchInvestigation } from '../../hooks/use_fetch_investigation';
+import { useUpdateInvestigation } from '../../hooks/use_update_investigation';
+import { InvestigationNotFound } from '../investigation_not_found/investigation_not_found';
+import { StatusField } from './fields/status_field';
+import { useKibana } from '../../hooks/use_kibana';
+import { paths } from '../../../common/paths';
+
+export interface InvestigationForm {
+  title: string;
+  status: 'ongoing' | 'closed';
+}
+
+interface Props {
+  investigationId?: string;
+  onClose: () => void;
+}
+
+export function InvestigationEditForm({ investigationId, onClose }: Props) {
+  const {
+    core: {
+      http: { basePath },
+      application: { navigateToUrl },
+    },
+  } = useKibana();
+  const isEditing = Boolean(investigationId);
+
+  const {
+    data: investigation,
+    isLoading,
+    isError,
+    refetch,
+  } = useFetchInvestigation({ id: investigationId });
+
+  const { mutateAsync: updateInvestigation } = useUpdateInvestigation();
+  const { mutateAsync: createInvestigation } = useCreateInvestigation();
+
+  const methods = useForm<InvestigationForm>({
+    defaultValues: { title: 'New investigation', status: 'ongoing' },
+    values: investigation ? pick(investigation, ['title', 'status']) : undefined,
+    mode: 'all',
+  });
+
+  if (isError) {
+    return <InvestigationNotFound />;
+  }
+
+  if (isEditing && (isLoading || !investigation)) {
+    return <EuiLoadingSpinner size="xl" />;
+  }
+
+  const onSubmit = async (data: InvestigationForm) => {
+    if (isEditing) {
+      await updateInvestigation({
+        investigationId: investigationId!,
+        payload: { title: data.title, status: data.status },
+      });
+      refetch();
+      onClose();
+    } else {
+      const resp = await createInvestigation({
+        id: uuidv4(),
+        title: data.title,
+        params: {
+          timeRange: {
+            from: new Date(new Date().getTime() - 30 * 60 * 1000).getTime(),
+            to: new Date().getTime(),
+          },
+        },
+        origin: {
+          type: 'blank',
+        },
+      });
+      navigateToUrl(basePath.prepend(paths.investigationDetails(resp.id)));
+    }
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(onSubmit)}>
+        <EuiFlyout ownFocus onClose={() => onClose()} size="s">
+          <EuiFlyoutHeader hasBorder>
+            <EuiTitle size="m">
+              <h2>
+                {isEditing
+                  ? i18n.translate('xpack.investigateApp.investigationDetailsPage.h2.editLabel', {
+                      defaultMessage: 'Edit',
+                    })
+                  : i18n.translate('xpack.investigateApp.investigationDetailsPage.h2.createLabel', {
+                      defaultMessage: 'Create',
+                    })}
+              </h2>
+            </EuiTitle>
+          </EuiFlyoutHeader>
+          <EuiFlyoutBody>
+            <EuiFlexGroup direction="column" gutterSize="l">
+              <EuiFlexItem grow>
+                <EuiFormRow
+                  fullWidth
+                  label={i18n.translate(
+                    'xpack.investigateApp.investigationEditForm.span.titleLabel',
+                    { defaultMessage: 'Title' }
+                  )}
+                  isInvalid={methods.getFieldState('title').invalid}
+                >
+                  <Controller
+                    name="title"
+                    control={methods.control}
+                    rules={{ required: true }}
+                    render={({ field: { ref, ...field }, fieldState }) => (
+                      <EuiFieldText
+                        {...field}
+                        fullWidth
+                        data-test-subj="titleInput"
+                        required
+                        isInvalid={fieldState.invalid}
+                        value={field.value}
+                        onChange={(event) => field.onChange(event.target.value)}
+                      />
+                    )}
+                  />
+                </EuiFormRow>
+              </EuiFlexItem>
+              <EuiFlexItem grow>
+                <StatusField />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlyoutBody>
+          <EuiFlyoutFooter>
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  data-test-subj="closeBtn"
+                  iconType="cross"
+                  onClick={() => onClose()}
+                  flush="left"
+                >
+                  {i18n.translate(
+                    'xpack.investigateApp.investigationDetailsPage.closeButtonEmptyLabel',
+                    { defaultMessage: 'Close' }
+                  )}
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButton data-test-subj="saveBtn" onClick={methods.handleSubmit(onSubmit)} fill>
+                  {i18n.translate('xpack.investigateApp.investigationDetailsPage.saveButtonLabel', {
+                    defaultMessage: 'Save',
+                  })}
+                </EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlyoutFooter>
+        </EuiFlyout>
+      </form>
+    </FormProvider>
+  );
+}
diff --git a/x-pack/plugins/observability_solution/investigate_app/public/components/investigation_not_found/investigation_not_found.tsx b/x-pack/plugins/observability_solution/investigate_app/public/components/investigation_not_found/investigation_not_found.tsx
new file mode 100644
index 0000000000000..3c3f6fc1c400d
--- /dev/null
+++ b/x-pack/plugins/observability_solution/investigate_app/public/components/investigation_not_found/investigation_not_found.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiEmptyPrompt } from '@elastic/eui';
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+
+export function InvestigationNotFound() {
+  return (
+    <EuiEmptyPrompt
+      iconType="error"
+      color="danger"
+      title={
+        <h2>
+          {i18n.translate('xpack.investigateApp.investigationEditForm.h2.unableToLoadTheLabel', {
+            defaultMessage: 'Unable to load the investigation form',
+          })}
+        </h2>
+      }
+      body={
+        <p>
+          {i18n.translate('xpack.investigateApp.investigationEditForm.p.thereWasAnErrorLabel', {
+            defaultMessage:
+              'There was an error loading the Investigation. Contact your administrator for help.',
+          })}
+        </p>
+      }
+    />
+  );
+}
diff --git a/x-pack/plugins/observability_solution/investigate_app/public/hooks/use_create_investigation.tsx b/x-pack/plugins/observability_solution/investigate_app/public/hooks/use_create_investigation.tsx
new file mode 100644
index 0000000000000..31fda25640224
--- /dev/null
+++ b/x-pack/plugins/observability_solution/investigate_app/public/hooks/use_create_investigation.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { IHttpFetchError, ResponseErrorBody } from '@kbn/core/public';
+import {
+  CreateInvestigationParams,
+  CreateInvestigationResponse,
+  FindInvestigationsResponse,
+} from '@kbn/investigation-shared';
+import { QueryKey, useMutation } from '@tanstack/react-query';
+import { useKibana } from './use_kibana';
+
+type ServerError = IHttpFetchError<ResponseErrorBody>;
+
+export function useCreateInvestigation() {
+  const {
+    core: {
+      http,
+      notifications: { toasts },
+    },
+  } = useKibana();
+
+  return useMutation<
+    CreateInvestigationResponse,
+    ServerError,
+    CreateInvestigationParams,
+    { previousData?: FindInvestigationsResponse; queryKey?: QueryKey }
+  >(
+    ['createInvestigation'],
+    (investigation) => {
+      const body = JSON.stringify(investigation);
+      return http.post<CreateInvestigationResponse>(`/api/observability/investigations`, {
+        body,
+        version: '2023-10-31',
+      });
+    },
+
+    {
+      onSuccess: (response, investigation, context) => {
+        toasts.addSuccess('Investigation created');
+      },
+      onError: (error, investigation, context) => {
+        toasts.addError(new Error(error.body?.message ?? 'An error occurred'), { title: 'Error' });
+      },
+    }
+  );
+}
diff --git a/x-pack/plugins/observability_solution/investigate_app/public/hooks/use_fetch_investigation.ts b/x-pack/plugins/observability_solution/investigate_app/public/hooks/use_fetch_investigation.ts
index 19b12364fd034..d9f2379593df4 100644
--- a/x-pack/plugins/observability_solution/investigate_app/public/hooks/use_fetch_investigation.ts
+++ b/x-pack/plugins/observability_solution/investigate_app/public/hooks/use_fetch_investigation.ts
@@ -16,7 +16,7 @@ import { investigationKeys } from './query_key_factory';
 import { useKibana } from './use_kibana';
 
 export interface Params {
-  id: string;
+  id?: string;
   initialInvestigation?: GetInvestigationResponse;
 }
 
@@ -45,13 +45,14 @@ export function useFetchInvestigation({
 
   const { isInitialLoading, isLoading, isError, isSuccess, isRefetching, data, refetch } = useQuery(
     {
-      queryKey: investigationKeys.fetch({ id }),
+      queryKey: investigationKeys.fetch({ id: id! }),
       queryFn: async ({ signal }) => {
         return await http.get<GetInvestigationResponse>(`/api/observability/investigations/${id}`, {
           version: '2023-10-31',
           signal,
         });
       },
+      enabled: Boolean(id),
       initialData: initialInvestigation,
       refetchOnWindowFocus: false,
       refetchInterval: 15 * 1000,
diff --git a/x-pack/plugins/observability_solution/investigate_app/public/items/esql_item/register_esql_item.tsx b/x-pack/plugins/observability_solution/investigate_app/public/items/esql_item/register_esql_item.tsx
index 695daf1f48cb2..6ecab29020eba 100644
--- a/x-pack/plugins/observability_solution/investigate_app/public/items/esql_item/register_esql_item.tsx
+++ b/x-pack/plugins/observability_solution/investigate_app/public/items/esql_item/register_esql_item.tsx
@@ -8,7 +8,6 @@ import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
 import { css } from '@emotion/css';
 import type { DataView } from '@kbn/data-views-plugin/common';
 import type { ESQLSearchResponse } from '@kbn/es-types';
-import { ESQLDataGrid } from '@kbn/esql-datagrid/public';
 import { i18n } from '@kbn/i18n';
 import { type GlobalWidgetParameters } from '@kbn/investigate-plugin/public';
 import type { Suggestion } from '@kbn/lens-plugin/public';
@@ -30,9 +29,6 @@ interface Props {
   suggestion: Suggestion;
   dataView: DataView;
   esqlQuery: string;
-  columns: ESQLSearchResponse['columns'];
-  allColumns: ESQLSearchResponse['all_columns'];
-  values: ESQLSearchResponse['values'];
   dateHistogramResults?: {
     query: string;
     columns: ESQLSearchResponse['columns'];
@@ -48,8 +44,6 @@ interface EsqlItemParams {
 
 interface EsqlItemData {
   dataView: DataView;
-  columns: ESQLSearchResponse['columns'];
-  values: ESQLSearchResponse['values'];
   suggestion: Suggestion;
   dateHistoResponse?: {
     query: string;
@@ -61,60 +55,20 @@ interface EsqlItemData {
 
 export const ESQL_ITEM_TYPE = 'esql';
 
-export function EsqlWidget({
-  suggestion,
-  dataView,
-  esqlQuery,
-  columns,
-  allColumns,
-  values,
-  dateHistogramResults,
-}: Props) {
+export function EsqlWidget({ suggestion, dataView, esqlQuery, dateHistogramResults }: Props) {
   const {
     dependencies: {
       start: { lens },
     },
   } = useKibana();
 
-  const datatable = useMemo(() => {
-    return getDatatableFromEsqlResponse({
-      columns,
-      values,
-      all_columns: allColumns,
-    });
-  }, [columns, values, allColumns]);
-
   const input = useMemo(() => {
     return getLensAttrsForSuggestion({
       suggestion,
       dataView,
       query: esqlQuery,
-      table: datatable,
     });
-  }, [suggestion, dataView, esqlQuery, datatable]);
-
-  const memoizedQueryObject = useMemo(() => {
-    return { esql: esqlQuery };
-  }, [esqlQuery]);
-
-  const initialColumns = useMemo(() => {
-    const timestampColumn = datatable.columns.find((column) => column.name === '@timestamp');
-    const messageColumn = datatable.columns.find((column) => column.name === 'message');
-
-    if (datatable.columns.length > 20 && timestampColumn && messageColumn) {
-      const hasDataForBothColumns = datatable.rows.every((row) => {
-        const timestampValue = row['@timestamp'];
-        const messageValue = row.message;
-
-        return timestampValue !== null && timestampValue !== undefined && !!messageValue;
-      });
-
-      if (hasDataForBothColumns) {
-        return [timestampColumn, messageColumn];
-      }
-    }
-    return datatable.columns;
-  }, [datatable.columns, datatable.rows]);
+  }, [suggestion, dataView, esqlQuery]);
 
   const previewInput = useAbortableAsync(
     async ({ signal }) => {
@@ -188,23 +142,12 @@ export function EsqlWidget({
           grow={false}
           className={css`
             > div {
-              height: 128px;
+              height: 196px;
             }
           `}
         >
           {innerElement}
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <ESQLDataGrid
-            rows={values}
-            columns={datatable.columns}
-            dataView={dataView}
-            query={memoizedQueryObject}
-            flyoutType="overlay"
-            initialColumns={initialColumns}
-            initialRowHeight={1}
-          />
-        </EuiFlexItem>
       </EuiFlexGroup>
     );
   }
@@ -214,7 +157,7 @@ export function EsqlWidget({
       grow={true}
       className={css`
         > div {
-          height: 128px;
+          height: 196px;
         }
       `}
     >
@@ -273,8 +216,6 @@ export function registerEsqlItem({
 
       return {
         dataView: mainResponse.meta.dataView,
-        columns: mainResponse.query.columns,
-        values: mainResponse.query.values,
         suggestion,
         dateHistoResponse,
       };
@@ -288,9 +229,6 @@ export function registerEsqlItem({
       return (
         <EsqlWidget
           dataView={data.dataView}
-          columns={data.columns}
-          allColumns={undefined}
-          values={data.values}
           suggestion={data.suggestion}
           esqlQuery={itemParams.esql}
           dateHistogramResults={data.dateHistoResponse}
diff --git a/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/add_investigation_item/esql_widget_preview.tsx b/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/add_investigation_item/esql_widget_preview.tsx
index 7ceedaed3b312..6fdba0224b7d5 100644
--- a/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/add_investigation_item/esql_widget_preview.tsx
+++ b/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/add_investigation_item/esql_widget_preview.tsx
@@ -181,9 +181,6 @@ export function EsqlWidgetPreview({
         <PreviewContainer>
           <EsqlWidget
             suggestion={selectedSuggestion}
-            columns={displayedProps.value.columns}
-            allColumns={displayedProps.value.allColumns}
-            values={displayedProps.value.values}
             dataView={displayedProps.value.dataView}
             esqlQuery={esqlQuery}
             dateHistogramResults={dateHistoResponse.value}
diff --git a/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/investigation_details/investigation_details.tsx b/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/investigation_details/investigation_details.tsx
index 284a350032e73..0a2952f09e1ee 100644
--- a/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/investigation_details/investigation_details.tsx
+++ b/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/investigation_details/investigation_details.tsx
@@ -5,9 +5,15 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { AuthenticatedUser } from '@kbn/security-plugin/common';
-import React from 'react';
+import React, { useState } from 'react';
+import { paths } from '../../../../../common/paths';
+import { InvestigationEditForm } from '../../../../components/investigation_edit_form/investigation_edit_form';
+import { useKibana } from '../../../../hooks/use_kibana';
+import { useInvestigation } from '../../contexts/investigation_context';
+import { InvestigationHeader } from '../investigation_header/investigation_header';
 import { InvestigationItems } from '../investigation_items/investigation_items';
 import { InvestigationNotes } from '../investigation_notes/investigation_notes';
 
@@ -16,15 +22,69 @@ interface Props {
 }
 
 export function InvestigationDetails({ user }: Props) {
+  const {
+    core: {
+      http: { basePath },
+    },
+    dependencies: {
+      start: { observabilityShared },
+    },
+  } = useKibana();
+
+  const ObservabilityPageTemplate = observabilityShared.navigation.PageTemplate;
+  const { investigation } = useInvestigation();
+  const [isEditFormFlyoutVisible, setEditFormFlyoutVisible] = useState<boolean>(false);
+
   return (
-    <EuiFlexGroup direction="row">
-      <EuiFlexItem grow={8}>
-        <InvestigationItems />
-      </EuiFlexItem>
+    <ObservabilityPageTemplate
+      pageHeader={{
+        breadcrumbs: [
+          {
+            href: basePath.prepend(paths.investigations),
+            text: i18n.translate('xpack.investigateApp.detailsPage.breadcrumb.list', {
+              defaultMessage: 'Investigations',
+            }),
+          },
+          {
+            text: i18n.translate('xpack.investigateApp.detailsPage.breadcrumb.details', {
+              defaultMessage: 'Investigation details',
+            }),
+          },
+        ],
+        pageTitle: <InvestigationHeader />,
+        rightSideItems: [
+          <EuiButton fill data-test-subj="escalateButton">
+            {i18n.translate('xpack.investigateApp.investigationDetails.escalateButtonLabel', {
+              defaultMessage: 'Escalate',
+            })}
+          </EuiButton>,
+          <EuiButton
+            data-test-subj="editButton"
+            fill
+            onClick={() => setEditFormFlyoutVisible(true)}
+          >
+            {i18n.translate('xpack.investigateApp.investigationDetails.editButtonLabel', {
+              defaultMessage: 'Edit',
+            })}
+          </EuiButton>,
+        ],
+      }}
+    >
+      <EuiFlexGroup direction="row">
+        <EuiFlexItem grow={8}>
+          <InvestigationItems />
+        </EuiFlexItem>
 
-      <EuiFlexItem grow={2}>
-        <InvestigationNotes user={user} />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+        <EuiFlexItem grow={2}>
+          <InvestigationNotes user={user} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      {isEditFormFlyoutVisible && investigation && (
+        <InvestigationEditForm
+          investigationId={investigation.id}
+          onClose={() => setEditFormFlyoutVisible(false)}
+        />
+      )}
+    </ObservabilityPageTemplate>
   );
 }
diff --git a/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/investigation_header/investigation_header.tsx b/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/investigation_header/investigation_header.tsx
new file mode 100644
index 0000000000000..dd27039cac27e
--- /dev/null
+++ b/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/investigation_header/investigation_header.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiButtonEmpty, EuiText } from '@elastic/eui';
+import { alertOriginSchema } from '@kbn/investigation-shared';
+import { ALERT_RULE_CATEGORY } from '@kbn/rule-registry-plugin/common/technical_rule_data_field_names';
+import React from 'react';
+import { useFetchAlert } from '../../../../hooks/use_get_alert_details';
+import { useKibana } from '../../../../hooks/use_kibana';
+import { useInvestigation } from '../../contexts/investigation_context';
+
+export function InvestigationHeader() {
+  const {
+    core: {
+      http: { basePath },
+    },
+  } = useKibana();
+
+  const { investigation } = useInvestigation();
+
+  const alertId = alertOriginSchema.is(investigation?.origin)
+    ? investigation?.origin.id
+    : undefined;
+  const { data: alertDetails } = useFetchAlert({ id: alertId });
+
+  return (
+    <>
+      {alertDetails && (
+        <EuiButtonEmpty
+          data-test-subj="investigationDetailsAlertLink"
+          iconType="arrowLeft"
+          size="xs"
+          href={basePath.prepend(`/app/observability/alerts/${alertId}`)}
+        >
+          <EuiText size="s">{`[Alert] ${alertDetails?.[ALERT_RULE_CATEGORY]} breached`}</EuiText>
+        </EuiButtonEmpty>
+      )}
+      {investigation && <div>{investigation.title}</div>}
+    </>
+  );
+}
diff --git a/x-pack/plugins/observability_solution/investigate_app/public/pages/details/investigation_details_page.tsx b/x-pack/plugins/observability_solution/investigate_app/public/pages/details/investigation_details_page.tsx
index 559d8c32628b1..8eadd0de879bd 100644
--- a/x-pack/plugins/observability_solution/investigate_app/public/pages/details/investigation_details_page.tsx
+++ b/x-pack/plugins/observability_solution/investigate_app/public/pages/details/investigation_details_page.tsx
@@ -5,121 +5,44 @@
  * 2.0.
  */
 
-import { EuiButton, EuiButtonEmpty, EuiText } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { alertOriginSchema } from '@kbn/investigation-shared';
-import { ALERT_RULE_CATEGORY } from '@kbn/rule-data-utils/src/default_alerts_as_data';
+import { EuiLoadingSpinner } from '@elastic/eui';
 import React from 'react';
 import { useParams } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
-import { paths } from '../../../common/paths';
+import { InvestigationNotFound } from '../../components/investigation_not_found/investigation_not_found';
 import { useFetchInvestigation } from '../../hooks/use_fetch_investigation';
-import { useFetchAlert } from '../../hooks/use_get_alert_details';
 import { useKibana } from '../../hooks/use_kibana';
 import { InvestigationDetails } from './components/investigation_details/investigation_details';
-import { InvestigationProvider } from './contexts/investigation_context';
 import { InvestigationDetailsPathParams } from './types';
+import { InvestigationProvider } from './contexts/investigation_context';
 
 export function InvestigationDetailsPage() {
   const {
-    core: {
-      http: { basePath },
-      security,
-    },
-    dependencies: {
-      start: { observabilityShared },
-    },
+    core: { security },
   } = useKibana();
+  const { investigationId } = useParams<InvestigationDetailsPathParams>();
 
   const user = useAsync(() => {
     return security.authc.getCurrentUser();
   }, [security]);
 
-  const { investigationId } = useParams<InvestigationDetailsPathParams>();
-
-  const ObservabilityPageTemplate = observabilityShared.navigation.PageTemplate;
-
   const {
     data: investigation,
     isLoading: isFetchInvestigationLoading,
     isError: isFetchInvestigationError,
   } = useFetchInvestigation({ id: investigationId });
 
-  const alertId = alertOriginSchema.is(investigation?.origin)
-    ? investigation?.origin.id
-    : undefined;
-
-  const { data: alertDetails } = useFetchAlert({ id: alertId });
-
-  if (!user.value) {
-    return null;
-  }
-
-  if (isFetchInvestigationLoading || investigation === undefined) {
-    return (
-      <h1>
-        {i18n.translate('xpack.investigateApp.fetchInvestigation.loadingLabel', {
-          defaultMessage: 'Loading...',
-        })}
-      </h1>
-    );
+  if (isFetchInvestigationLoading || user.loading) {
+    return <EuiLoadingSpinner size="xl" />;
   }
 
-  if (isFetchInvestigationError) {
-    return (
-      <h1>
-        {i18n.translate('xpack.investigateApp.fetchInvestigation.errorLabel', {
-          defaultMessage: 'Error while fetching investigation',
-        })}
-      </h1>
-    );
+  if (isFetchInvestigationError || !investigation || !user.value) {
+    return <InvestigationNotFound />;
   }
 
   return (
     <InvestigationProvider initialInvestigation={investigation}>
-      <ObservabilityPageTemplate
-        pageHeader={{
-          breadcrumbs: [
-            {
-              href: basePath.prepend(paths.investigations),
-              text: i18n.translate('xpack.investigateApp.detailsPage.breadcrumb.list', {
-                defaultMessage: 'Investigations',
-              }),
-            },
-            {
-              text: i18n.translate('xpack.investigateApp.detailsPage.breadcrumb.details', {
-                defaultMessage: 'Investigation details',
-              }),
-            },
-          ],
-          pageTitle: (
-            <>
-              {alertDetails && (
-                <EuiButtonEmpty
-                  data-test-subj="investigationDetailsAlertLink"
-                  iconType="arrowLeft"
-                  size="xs"
-                  href={basePath.prepend(`/app/observability/alerts/${alertId}`)}
-                >
-                  <EuiText size="s">
-                    {`[Alert] ${alertDetails?.[ALERT_RULE_CATEGORY]} breached`}
-                  </EuiText>
-                </EuiButtonEmpty>
-              )}
-              {investigation && <div>{investigation.title}</div>}
-            </>
-          ),
-          rightSideItems: [
-            <EuiButton fill data-test-subj="investigationDetailsEscalateButton">
-              {i18n.translate('xpack.investigateApp.investigationDetails.escalateButtonLabel', {
-                defaultMessage: 'Escalate',
-              })}
-            </EuiButton>,
-          ],
-        }}
-      >
-        <InvestigationDetails user={user.value} />
-      </ObservabilityPageTemplate>
+      <InvestigationDetails user={user.value} />
     </InvestigationProvider>
   );
 }
diff --git a/x-pack/plugins/observability_solution/investigate_app/public/pages/list/investigation_list_page.tsx b/x-pack/plugins/observability_solution/investigate_app/public/pages/list/investigation_list_page.tsx
index fa83cb4e1be54..74bdac54073a0 100644
--- a/x-pack/plugins/observability_solution/investigate_app/public/pages/list/investigation_list_page.tsx
+++ b/x-pack/plugins/observability_solution/investigate_app/public/pages/list/investigation_list_page.tsx
@@ -6,22 +6,20 @@
  */
 import { EuiButton } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
+import React, { useState } from 'react';
+import { InvestigationEditForm } from '../../components/investigation_edit_form/investigation_edit_form';
 import { useKibana } from '../../hooks/use_kibana';
 import { InvestigationList } from './components/investigation_list';
-import { paths } from '../../../common/paths';
 
 export function InvestigationListPage() {
   const {
-    core: {
-      http: { basePath },
-    },
     dependencies: {
       start: { observabilityShared },
     },
   } = useKibana();
 
   const ObservabilityPageTemplate = observabilityShared.navigation.PageTemplate;
+  const [isCreateFormFlyoutVisible, setCreateFormFlyoutVisible] = useState<boolean>(false);
 
   return (
     <ObservabilityPageTemplate
@@ -40,7 +38,7 @@ export function InvestigationListPage() {
           <EuiButton
             data-test-subj="investigateAppInvestigationListPageCreateButton"
             fill
-            href={basePath.prepend(paths.create)}
+            onClick={() => setCreateFormFlyoutVisible(true)}
           >
             {i18n.translate('xpack.investigateApp.investigationListPage.createButtonLabel', {
               defaultMessage: 'Create',
@@ -50,6 +48,9 @@ export function InvestigationListPage() {
       }}
     >
       <InvestigationList />
+      {isCreateFormFlyoutVisible && (
+        <InvestigationEditForm onClose={() => setCreateFormFlyoutVisible(false)} />
+      )}
     </ObservabilityPageTemplate>
   );
 }
diff --git a/x-pack/plugins/observability_solution/investigate_app/tsconfig.json b/x-pack/plugins/observability_solution/investigate_app/tsconfig.json
index b452b80b821ca..d689dd6086473 100644
--- a/x-pack/plugins/observability_solution/investigate_app/tsconfig.json
+++ b/x-pack/plugins/observability_solution/investigate_app/tsconfig.json
@@ -48,11 +48,9 @@
     "@kbn/server-route-repository",
     "@kbn/security-plugin",
     "@kbn/ui-actions-plugin",
-    "@kbn/esql-datagrid",
     "@kbn/server-route-repository-utils",
     "@kbn/core-saved-objects-server",
     "@kbn/rule-registry-plugin",
-    "@kbn/rule-data-utils",
     "@kbn/shared-ux-router",
     "@kbn/investigation-shared",
     "@kbn/core-security-common",