diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx
index 3f8e1b6f6422..23b5dc9edef8 100644
--- a/packages/grafana-ui/src/components/Button/Button.tsx
+++ b/packages/grafana-ui/src/components/Button/Button.tsx
@@ -14,7 +14,7 @@ import { PopoverContent, Tooltip, TooltipPlacement } from '../Tooltip';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'success';
 export const allButtonVariants: ButtonVariant[] = ['primary', 'secondary', 'destructive'];
-export type ButtonFill = 'solid' | 'outline' | 'text';
+export type ButtonFill = 'solid' | 'outline' | 'text' | 'ghost';
 export const allButtonFills: ButtonFill[] = ['solid', 'outline', 'text'];
 
 type CommonProps = {
@@ -319,6 +319,17 @@ function getButtonVariantStyles(theme: GrafanaTheme2, color: ThemeRichColor, fil
     };
   }
 
+  if (fill === 'ghost') {
+    return {
+      background: '#5d5a5990',
+      color: color.text,
+      border: `1px solid ${borderColor}`,
+      transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
+        duration: theme.transitions.duration.short,
+      }),
+    };
+  }
+
   return {
     background: color.main,
     color: color.contrastText,
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx
index 1f3f5e1eff7d..420ba63db7bd 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx
@@ -58,7 +58,7 @@ export const TimeRangeContent = (props: Props) => {
     onApply: onApplyFromProps,
     isReversed,
     fiscalYearStartMonth,
-    onError,
+    // onError,
     weekStart,
   } = props;
   const [fromValue, toValue] = valueToState(value.raw.from, value.raw.to, timeZone);
@@ -112,28 +112,28 @@ export const TimeRangeContent = (props: Props) => {
     }
   };
 
-  const onCopy = () => {
-    const raw: RawTimeRange = { from: from.value, to: to.value };
-    navigator.clipboard.writeText(JSON.stringify(raw));
-  };
-
-  const onPaste = async () => {
-    const raw = await navigator.clipboard.readText();
-    let range;
-
-    try {
-      range = JSON.parse(raw);
-    } catch (error) {
-      if (onError) {
-        onError(raw);
-      }
-      return;
-    }
-
-    const [fromValue, toValue] = valueToState(range.from, range.to, timeZone);
-    setFrom(fromValue);
-    setTo(toValue);
-  };
+  // const onCopy = () => {
+  //   const raw: RawTimeRange = { from: from.value, to: to.value };
+  //   navigator.clipboard.writeText(JSON.stringify(raw));
+  // };
+
+  // const onPaste = async () => {
+  //   const raw = await navigator.clipboard.readText();
+  //   let range;
+
+  //   try {
+  //     range = JSON.parse(raw);
+  //   } catch (error) {
+  //     if (onError) {
+  //       onError(raw);
+  //     }
+  //     return;
+  //   }
+
+  //   const [fromValue, toValue] = valueToState(range.from, range.to, timeZone);
+  //   setFrom(fromValue);
+  //   setTo(toValue);
+  // };
 
   const fiscalYear = rangeUtil.convertRawToRange({ from: 'now/fy', to: 'now/fy' }, timeZone, fiscalYearStartMonth);
   const fiscalYearMessage = t('time-picker.range-content.fiscal-year', 'Fiscal year');
@@ -197,7 +197,7 @@ export const TimeRangeContent = (props: Props) => {
       </div>
 
       <div className={style.buttonsContainer}>
-        <Button
+        {/* <Button
           data-testid={selectors.components.TimePicker.copyTimeRange}
           icon="copy"
           variant="secondary"
@@ -212,13 +212,13 @@ export const TimeRangeContent = (props: Props) => {
           tooltip={t('time-picker.copy-paste.tooltip-paste', 'Paste time range')}
           type="button"
           onClick={onPaste}
-        />
+        /> */}
         <Button
           data-testid={selectors.components.TimePicker.applyTimeRange}
           type="button"
           onClick={onApply}
           style={{
-            width: 193,
+            width: 205,
             textAlign: 'center',
             paddingLeft: 45,
           }}
diff --git a/packages/grafana-ui/src/components/Pagination/Pagination.tsx b/packages/grafana-ui/src/components/Pagination/Pagination.tsx
index e1745f1a9c1f..f8be9ad4e56e 100644
--- a/packages/grafana-ui/src/components/Pagination/Pagination.tsx
+++ b/packages/grafana-ui/src/components/Pagination/Pagination.tsx
@@ -34,7 +34,7 @@ export const Pagination = ({
     const pages = [...new Array(numberOfPages).keys()];
 
     const condensePages = numberOfPages > pageLengthToCondense;
-    const getListItem = (page: number, fill?: 'outline') => (
+    const getListItem = (page: number, fill?: 'outline' | 'ghost') => (
       <li key={page} className={styles.item}>
         <Button size="sm" onClick={() => onNavigate(page)} fill={fill}>
           {page}
@@ -44,7 +44,7 @@ export const Pagination = ({
 
     return pages.reduce<JSX.Element[]>((pagesToRender, pageIndex) => {
       const page = pageIndex + 1;
-      const fill: 'outline' | undefined = page === currentPage ? undefined : 'outline';
+      const fill: 'outline' | 'ghost' = page === currentPage ? 'ghost' : 'outline';
 
       // The indexes at which to start and stop condensing pages
       const lowerBoundIndex = pageLengthToCondense;
diff --git a/packages/grafana-ui/src/components/Table/RowsList.tsx b/packages/grafana-ui/src/components/Table/RowsList.tsx
index 7e00eded5bb0..6528e8bf8d45 100644
--- a/packages/grafana-ui/src/components/Table/RowsList.tsx
+++ b/packages/grafana-ui/src/components/Table/RowsList.tsx
@@ -53,6 +53,7 @@ interface RowsListProps {
   initialRowIndex?: number;
   headerGroups: HeaderGroup[];
   longestField?: Field;
+  onClickRow?: (row: Record<string, string | number>) => void;
 }
 
 export const RowsList = (props: RowsListProps) => {
@@ -78,6 +79,7 @@ export const RowsList = (props: RowsListProps) => {
     initialRowIndex = undefined,
     headerGroups,
     longestField,
+    onClickRow,
   } = props;
 
   const [rowHighlightIndex, setRowHighlightIndex] = useState<number | undefined>(initialRowIndex);
@@ -303,6 +305,21 @@ export const RowsList = (props: RowsListProps) => {
       }
       const { key, ...rowProps } = row.getRowProps({ style, ...additionalProps });
 
+      const mapRowValues = () => {
+        const rowValues: Record<string, string | number> = {};
+        for (const [key, val] of Object.entries(row.values)) {
+          const k = (row.cells[Number(key)].column as unknown as { field?: { name: string | undefined } })?.field?.name;
+          if (k === undefined) {
+            continue;
+          }
+          const camelCaseKey = k
+            .replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => (index === 0 ? word.toLowerCase() : word.toUpperCase()))
+            .replace(/\s+/g, '');
+          rowValues[camelCaseKey] = val;
+        }
+        return rowValues;
+      };
+
       return (
         <div
           key={key}
@@ -310,6 +327,22 @@ export const RowsList = (props: RowsListProps) => {
           className={cx(tableStyles.row, expandedRowStyle)}
           onMouseEnter={() => onRowHover(index, data)}
           onMouseLeave={onRowLeave}
+          onClick={() => {
+            if (onClickRow) {
+              onClickRow(mapRowValues());
+            }
+          }}
+          role={onClickRow ? 'button' : undefined}
+          tabIndex={onClickRow ? 0 : undefined}
+          onKeyDown={
+            onClickRow
+              ? (e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                  }
+                }
+              : undefined
+          }
         >
           {/*add the nested data to the DOM first to prevent a 1px border CSS issue on the last cell of the row*/}
           {rowExpanded && (
@@ -343,6 +376,7 @@ export const RowsList = (props: RowsListProps) => {
       );
     },
     [
+      onClickRow,
       cellHeight,
       data,
       nestedDataField,
diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx
index dea703181eb0..43e9ef9ebd07 100644
--- a/packages/grafana-ui/src/components/Table/Table.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.tsx
@@ -58,6 +58,7 @@ export const Table = memo((props: Props) => {
     enableSharedCrosshair = false,
     initialRowIndex = undefined,
     fieldConfig,
+    onClickRow,
   } = props;
 
   const listRef = useRef<VariableSizeList>(null);
@@ -334,6 +335,7 @@ export const Table = memo((props: Props) => {
                 enableSharedCrosshair={enableSharedCrosshair}
                 initialRowIndex={initialRowIndex}
                 longestField={longestField}
+                onClickRow={onClickRow}
               />
             </div>
           ) : (
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index df34ce6656fe..439ac9ef36b0 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/packages/grafana-ui/src/components/Table/styles.ts
@@ -59,8 +59,8 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
         minHeight: `${rowHeight - 1}px`,
         wordBreak: textShouldWrap ? 'break-word' : undefined,
         whiteSpace: textShouldWrap && overflowOnHover ? 'normal' : 'nowrap',
-        boxShadow: overflowOnHover ? `0 0 2px ${theme.colors.primary.main}` : undefined,
-        background: rowStyled ? 'inherit' : (backgroundHover ?? theme.colors.background.primary),
+        //boxShadow: overflowOnHover ? `0 0 2px ${theme.colors.primary.main}` : undefined,
+       // background: 'inherit', //: (backgroundHover ?? theme.colors.background.primary),
         zIndex: 1,
         '.cellActions': {
           color: '#FFF',
diff --git a/packages/grafana-ui/src/components/Table/types.ts b/packages/grafana-ui/src/components/Table/types.ts
index 47801e3acdd2..5c12e625a23d 100644
--- a/packages/grafana-ui/src/components/Table/types.ts
+++ b/packages/grafana-ui/src/components/Table/types.ts
@@ -100,6 +100,7 @@ export interface Props {
   // The index of the field value that the table will initialize scrolled to
   initialRowIndex?: number;
   fieldConfig?: FieldConfigSource;
+  onClickRow?: (row: Record<string, string | number>) => void;
 }
 
 /**
diff --git a/public/app/core/components/Page/usePageTitle.ts b/public/app/core/components/Page/usePageTitle.ts
index 53a7e147ac2e..0c25fe23463a 100644
--- a/public/app/core/components/Page/usePageTitle.ts
+++ b/public/app/core/components/Page/usePageTitle.ts
@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 
 import { NavModel, NavModelItem } from '@grafana/data';
-import { FnGlobalState } from 'app/core/reducers/fn-slice';
 import { HOME_NAV_ID } from 'app/core/reducers/navModel';
 import { useSelector } from 'app/types';
 
@@ -10,7 +9,7 @@ import { buildBreadcrumbs } from '../Breadcrumbs/utils';
 
 export function usePageTitle(navModel?: NavModel, pageNav?: NavModelItem) {
   const homeNav = useSelector((state) => state.navIndex)[HOME_NAV_ID];
-  const { FNDashboard, pageTitle } = useSelector<FnGlobalState>((state) => state.fnGlobalState);
+  const { FNDashboard, pageTitle } = useSelector((state) => state.fnGlobalState);
 
   useEffect(() => {
     const sectionNav = (navModel?.node !== navModel?.main ? navModel?.node : navModel?.main) ?? { text: 'Grafana' };
diff --git a/public/app/core/components/TimePicker/TimePickerWithHistory.tsx b/public/app/core/components/TimePicker/TimePickerWithHistory.tsx
index 12e351ff8044..615ccf2f2c0f 100644
--- a/public/app/core/components/TimePicker/TimePickerWithHistory.tsx
+++ b/public/app/core/components/TimePicker/TimePickerWithHistory.tsx
@@ -1,12 +1,9 @@
-import { isEqual, uniqBy } from 'lodash';
-import { CSSProperties, FC, useEffect, useRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useDispatch, useSelector } from 'react-redux';
+import { uniqBy } from 'lodash';
+import { CSSProperties, FC } from 'react';
 
 import { TimeRange, isDateTime, rangeUtil } from '@grafana/data';
 import { TimeRangePickerProps, TimeRangePicker, useTheme2 } from '@grafana/ui';
-import { FnGlobalState, updatePartialFnStates } from 'app/core/reducers/fn-slice';
-import { StoreState } from 'app/types';
+import { useSelector } from 'app/types';
 
 import { LocalStorageValueProvider } from '../LocalStorageValueProvider';
 
@@ -24,7 +21,7 @@ interface TimePickerHistoryItem {
 type LSTimePickerHistoryItem = TimePickerHistoryItem | TimeRange;
 
 const FnText: React.FC = () => {
-  const { FNDashboard } = useSelector<StoreState, FnGlobalState>(({ fnGlobalState }) => fnGlobalState);
+  const { FNDashboard } = useSelector(({ fnGlobalState }) => fnGlobalState);
   const theme = useTheme2();
 
   const FN_TEXT_STYLE: CSSProperties = { fontWeight: 700, fontSize: 14, marginLeft: 8 };
@@ -47,32 +44,9 @@ export interface PickerProps {
 }
 
 export const Picker: FC<PickerProps> = ({ rawValues, onSaveToStore, pickerProps }) => {
-  const { fnGlobalTimeRange } = useSelector<StoreState, FnGlobalState>(({ fnGlobalState }) => fnGlobalState);
-  const dispatch = useDispatch();
-
   const values = migrateHistory(rawValues);
   const history = deserializeHistory(values);
 
-  const didMountRef = useRef(false);
-  useEffect(() => {
-    /* The condition below skips the first run of useeffect that happens when this component gets mounted */
-    if (didMountRef.current) {
-      /* If the current timerange value has changed, update fnGlobalTimeRange */
-      if (!isEqual(fnGlobalTimeRange?.raw, pickerProps.value.raw)) {
-        dispatch(
-          updatePartialFnStates({
-            fnGlobalTimeRange: pickerProps.value,
-          })
-        );
-      }
-    } else if (fnGlobalTimeRange && !isEqual(fnGlobalTimeRange.raw, pickerProps.value.raw)) {
-      /* If fnGlobalTimeRange exists in the initial render, set the time as that */
-      pickerProps.onChange(fnGlobalTimeRange);
-    }
-
-    didMountRef.current = true;
-  }, [dispatch, fnGlobalTimeRange, pickerProps]);
-
   return (
     <TimeRangePicker
       {...pickerProps}
diff --git a/public/app/core/reducers/fn-slice.ts b/public/app/core/reducers/fn-slice.ts
index 57eb2bf9385d..02455ef0b2e8 100644
--- a/public/app/core/reducers/fn-slice.ts
+++ b/public/app/core/reducers/fn-slice.ts
@@ -1,26 +1,25 @@
 import { createSlice, PayloadAction, SliceCaseReducers, SliceSelectors } from '@reduxjs/toolkit';
 
-import { GrafanaThemeType, TimeRange } from '@grafana/data';
+import { GrafanaThemeType } from '@grafana/data';
 
 import { AnyObject } from '../../fn-app/types';
 
-export interface FnGlobalState {
-  FNDashboard: boolean;
+export interface FnState {
   uid: string;
   slug: string;
   version: number;
-  mode: GrafanaThemeType.Light | GrafanaThemeType.Dark;
   controlsContainer: string | null;
   pageTitle: string;
   queryParams: AnyObject;
   hiddenVariables: readonly string[];
-  fnGlobalTimeRange: TimeRange | null;
   metadata: {
     teams: string[];
+    eventListener: (<T>(event: { type: string; data: T }) => void) | null;
   };
+  portalContainerID: string;
 }
 
-export type UpdateFNGlobalStateAction = PayloadAction<Partial<FnGlobalState>>;
+export type UpdateFNGlobalStateAction = PayloadAction<Partial<Omit<FnGlobalState, 'uid'>> & { uid: string }>;
 
 export type SetFnStateAction = PayloadAction<Omit<FnGlobalState, 'hiddenVariables'>>;
 
@@ -28,15 +27,13 @@ export type FnPropMappedFromState = Extract<
   keyof FnGlobalState,
   'FNDashboard' | 'hiddenVariables' | 'mode' | 'uid' | 'queryParams' | 'slug' | 'version' | 'controlsContainer'
 >;
-export type FnStateProp = keyof FnGlobalState;
+export type FnStateProp = keyof FnState;
 
 export type FnPropsMappedFromState = Pick<FnGlobalState, FnPropMappedFromState>;
 
 export const fnStateProps: FnStateProp[] = [
-  'FNDashboard',
   'controlsContainer',
   'hiddenVariables',
-  'mode',
   'pageTitle',
   'queryParams',
   'slug',
@@ -48,40 +45,46 @@ const INITIAL_MODE = GrafanaThemeType.Light;
 
 export const FN_STATE_KEY = 'fnGlobalState';
 
-export const INITIAL_FN_STATE: FnGlobalState = {
+export const INITIAL_FN_STATE: FnState = {
   // NOTE: initial value is false
-  FNDashboard: false,
   uid: '',
   slug: '',
   version: 1,
-  mode: INITIAL_MODE,
   controlsContainer: null,
   pageTitle: '',
   queryParams: {},
   hiddenVariables: [],
-  fnGlobalTimeRange: null,
   metadata: {
     teams: [],
+    eventListener: null,
   },
+  portalContainerID: 'grafana-portal',
 } as const;
 
+export interface FnGlobalState extends FnState {
+  FNDashboard: boolean;
+  mode: GrafanaThemeType.Light | GrafanaThemeType.Dark;
+}
+
 const reducers: SliceCaseReducers<FnGlobalState> = {
-  updateFnState: (state, action: SetFnStateAction) => {
-    return { ...state, ...action.payload };
-  },
   updatePartialFnStates: (state, action: UpdateFNGlobalStateAction) => {
     return {
       ...state,
       ...action.payload,
+      FNDashboard: true,
     };
   },
 };
 
 const fnSlice = createSlice<FnGlobalState, SliceCaseReducers<FnGlobalState>, string, SliceSelectors<FnGlobalState>>({
   name: FN_STATE_KEY,
-  initialState: INITIAL_FN_STATE,
+  initialState: {
+    ...INITIAL_FN_STATE,
+    FNDashboard: false,
+    mode: INITIAL_MODE,
+  },
   reducers,
 });
 
-export const { updatePartialFnStates, updateFnState } = fnSlice.actions;
+export const { updatePartialFnStates, updateFnTimeRange } = fnSlice.actions;
 export const fnSliceReducer = fnSlice.reducer;
diff --git a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx
index 22d0e0dab3ba..45e103a0b7c7 100644
--- a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx
+++ b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx
@@ -20,6 +20,7 @@ export interface Props {
   onToolbarRefreshClick?: () => void;
   onToolbarZoomClick?: () => void;
   onToolbarTimePickerClick?: () => void;
+  isFnDashboard?: boolean;
 }
 
 export class DashNavTimeControls extends Component<Props> {
@@ -52,7 +53,7 @@ export class DashNavTimeControls extends Component<Props> {
   };
 
   onChangeTimePicker = (timeRange: TimeRange) => {
-    const { dashboard } = this.props;
+    const { dashboard, isFnDashboard } = this.props;
     const panel = dashboard.timepicker;
     const hasDelay = panel.nowDelay && timeRange.raw.to === 'now';
 
@@ -64,6 +65,9 @@ export class DashNavTimeControls extends Component<Props> {
     };
 
     getTimeSrv().setTime(nextRange);
+    if (isFnDashboard) {
+      this.forceUpdate();
+    }
   };
 
   onChangeTimeZone = (timeZone: TimeZone) => {
diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index 5ebe4cbcd006..0c723eb06aa6 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -406,12 +406,22 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
 
     const FNTimeRange = !controlsContainer ? (
       <ToolbarButtonRow alignment="right" style={{ marginBottom: '16px' }}>
-        <DashNavTimeControls dashboard={dashboard} onChangeTimeZone={updateTimeZoneForSession} key="time-controls" />
+        <DashNavTimeControls
+          dashboard={dashboard}
+          onChangeTimeZone={updateTimeZoneForSession}
+          key="time-controls"
+          isFnDashboard={FNDashboard}
+        />
       </ToolbarButtonRow>
     ) : (
       <Portal container={document.getElementById(controlsContainer)!}>
         <ToolbarButtonRow>
-          <DashNavTimeControls dashboard={dashboard} onChangeTimeZone={updateTimeZoneForSession} key="time-controls" />
+          <DashNavTimeControls
+            dashboard={dashboard}
+            onChangeTimeZone={updateTimeZoneForSession}
+            key="time-controls"
+            isFnDashboard={FNDashboard}
+          />
         </ToolbarButtonRow>
       </Portal>
     );
diff --git a/public/app/fn-app/create-mfe.ts b/public/app/fn-app/create-mfe.ts
index 528714d0a3c4..72028f63066e 100644
--- a/public/app/fn-app/create-mfe.ts
+++ b/public/app/fn-app/create-mfe.ts
@@ -16,18 +16,15 @@ import { GrafanaBootConfig } from '@grafana/runtime/src/config';
 import { getTheme } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
 import config from 'app/core/config';
-import {
-  FnGlobalState,
-  updatePartialFnStates,
-  updateFnState,
-  INITIAL_FN_STATE,
-  FnPropMappedFromState,
-  fnStateProps,
-} from 'app/core/reducers/fn-slice';
+import { FnState, INITIAL_FN_STATE, FnPropMappedFromState, fnStateProps } from 'app/core/reducers/fn-slice';
 import { backendSrv } from 'app/core/services/backend_srv';
 import fn_app from 'app/fn_app';
 import { FnLoggerService } from 'app/fn_logger';
-import { dispatch } from 'app/store/store';
+import {
+  mfeDispatch,
+  updateRenderingDashboardUID,
+  updatePartialMfeStates,
+} from 'app/store/configureMfeStore';
 
 import { FNDashboardProps, FailedToMountGrafanaErrorName } from './types';
 
@@ -202,15 +199,13 @@ class createMfe {
           createMfe.loadFnTheme(props.mode);
           createMfe.Component = Component;
 
-          const initialState: FnGlobalState = {
+          const initialState: FnState = {
             ...INITIAL_FN_STATE,
             ...pick(props, ...fnStateProps),
-            FNDashboard: true,
           };
 
           createMfe.logger.info('[FN Grafana] Dispatching initial state.', { initialState });
-
-          dispatch(updateFnState(initialState));
+          mfeDispatch(updatePartialMfeStates(initialState));
 
           createMfe.renderMfeComponent(props, () => {
             createMfe.logger.info('Mounted grafana.', { props });
@@ -258,10 +253,15 @@ class createMfe {
   }
 
   static updateFnApp() {
-    const lifeCycleFn: FrameworkLifeCycles['update'] = ({ mode, ...other }: FNDashboardProps) => {
+    const lifeCycleFn: FrameworkLifeCycles['update'] = ({
+      mode,
+      ...other
+    }: FNDashboardProps & {
+      readonly renderingDashboardUid?: string;
+    }) => {
       if (mode) {
-        dispatch(
-          updatePartialFnStates({
+        mfeDispatch(
+          updatePartialMfeStates({
             mode,
           })
         );
@@ -272,20 +272,21 @@ class createMfe {
       if (other.uid) {
         createMfe.logger.info('Trying to render dashboard using update: ', { updatedProps: other });
 
-        dispatch(
-          updatePartialFnStates({
-            uid: other.uid,
-            hiddenVariables: other.hiddenVariables,
-            slug: other.slug,
-            version: other.version,
-            queryParams: other.queryParams,
-            controlsContainer: other.controlsContainer,
-            metadata: other.metadata,
+        mfeDispatch(updatePartialMfeStates(other));
+      }
+
+      if (other.renderingDashboardUid) {
+        createMfe.logger.info('Trying to update drill down dashboard.', {
+          renderingDashboardUid: other.renderingDashboardUid,
+        });
+
+        mfeDispatch(
+          updateRenderingDashboardUID({
+            renderingDashboardUid: other.renderingDashboardUid,
           })
         );
       }
 
-      // NOTE: The false/true value does not change anything
       return Promise.resolve(true);
     };
 
diff --git a/public/app/fn-app/fn-app-provider.tsx b/public/app/fn-app/fn-app-provider.tsx
index 04d749ecd15c..6ecd22616e16 100644
--- a/public/app/fn-app/fn-app-provider.tsx
+++ b/public/app/fn-app/fn-app-provider.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, FC, PropsWithChildren } from 'react';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
+import { Store } from 'redux';
 
 import { config, navigationLogger } from '@grafana/runtime';
 import { ErrorBoundaryAlert, GlobalStyles } from '@grafana/ui';
@@ -9,13 +10,16 @@ import { ThemeProvider } from 'app/core/utils/ConfigProvider';
 import { FnLoader } from 'app/features/dashboard/components/DashboardLoading/FnLoader';
 import { FnLoggerService } from 'app/fn_logger';
 import { store } from 'app/store/store';
+import { StoreState } from 'app/types';
 
 import { GrafanaContext } from '../core/context/GrafanaContext';
 import app from '../fn_app';
 
 import { FNDashboardProps } from './types';
 
-type FnAppProviderProps = Pick<FNDashboardProps, 'fnError'>;
+type FnAppProviderProps = Pick<FNDashboardProps, 'fnError'> & {
+  store: Store<StoreState>
+};
 
 export const FnAppProvider: FC<PropsWithChildren<FnAppProviderProps>> = (props) => {
   const { children } = props;
@@ -36,7 +40,7 @@ export const FnAppProvider: FC<PropsWithChildren<FnAppProviderProps>> = (props)
   }
 
   return (
-    <Provider store={store}>
+    <Provider store={props.store}>
       <BrowserRouter>
         <ErrorBoundaryAlert style="page">
           <GrafanaContext.Provider value={app.context}>
diff --git a/public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx b/public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx
index 93c50e5d3c52..666223f611ea 100644
--- a/public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx
+++ b/public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx
@@ -1,7 +1,16 @@
-import { FC, useMemo } from 'react';
+import { FC, useEffect, useMemo } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { Provider, shallowEqual, useSelector } from 'react-redux';
 
-import { FnGlobalState, FnPropMappedFromState } from 'app/core/reducers/fn-slice';
-import { useSelector } from 'app/types';
+import { FnPropMappedFromState, FnState, updatePartialFnStates } from 'app/core/reducers/fn-slice';
+import { FnLoggerService } from 'app/fn_logger';
+import {
+  MfeGlobalState,
+  MfeStore,
+  mfeStore,
+  removeGrafanaStoreAndDashboard,
+  updateRenderingDashboardUID,
+} from 'app/store/configureMfeStore';
 
 import { FnAppProvider } from '../fn-app-provider';
 import { FNDashboardProps } from '../types';
@@ -13,48 +22,95 @@ type FNDashboardComponentProps = Omit<FNDashboardProps, FnPropMappedFromState>;
 
 export const FNDashboard: FC<FNDashboardComponentProps> = (props) => {
   return (
-    <FnAppProvider fnError={props.fnError}>
+    <Provider store={mfeStore}>
       <DashboardPortal {...props} />
-    </FnAppProvider>
+    </Provider>
   );
 };
 
 export const DashboardPortal: FC<FNDashboardComponentProps> = (p) => {
-  const globalFnProps = useSelector<FnGlobalState>(({ fnGlobalState }) => fnGlobalState);
-
-  const props = useMemo(
-    () => ({
-      ...p,
-      ...globalFnProps,
-    }),
-    [p, globalFnProps]
-  );
+  const globalFnProps = useSelector(({ fnGlobalReducer }: MfeStore) => fnGlobalReducer, shallowEqual);
+  const dashboards = useMemo(() => {
+    return Object.entries(globalFnProps.dashboards)
+      .filter(([uid, props]) => uid.length)
+      .map(([uid, props]) => [uid, props] satisfies [string, FnState]);
+  }, [globalFnProps.dashboards]);
 
-  const content = useMemo(() => {
-    if (!props.FNDashboard) {
-      return null;
+  useEffect(() => {
+    const timer = isDashboardValidPoller(globalFnProps, dashboards);
+    if (!globalFnProps.renderingDashboardUID.length && dashboards.length > 0) {
+      clearInterval(timer);
     }
+    return () => {
+      clearInterval(timer);
+    };
+  }, [globalFnProps, dashboards]);
 
-    const { uid, queryParams = {} } = props;
+  return useMemo(() => {
+    return dashboards.map(([uid, props]) => {
+      if (!uid.length) {
+        return null;
+      }
 
-    if (!uid) {
-      return null;
-    }
+      const store = globalFnProps.grafanaStores[uid];
+      if (!store) {
+        return null;
+      }
 
-    return (
-      <RenderFNDashboard
-        {...{
-          ...props,
+      if (!document.getElementById(props.portalContainerID)) {
+        FnLoggerService.info("removing dashboard from MfeStore because portalContainerID doesn't exist", {
+          portalID: props.portalContainerID,
           uid,
-          queryParams,
-        }}
-      />
-    );
-  }, [props]);
+        });
+        mfeStore.dispatch(removeGrafanaStoreAndDashboard(uid));
+        return null;
+      }
 
-  return (
-    <RenderPortal ID="grafana-portal">
-      <div className="page-dashboard">{content}</div>
-    </RenderPortal>
-  );
+      mfeStore.dispatch(updateRenderingDashboardUID(uid));
+      store.dispatch(updatePartialFnStates(props));
+
+      return (
+        <RenderPortal ID={props.portalContainerID} key={uid}>
+          <FnAppProvider fnError={p.fnError} store={store}>
+            <div className="page-dashboard">
+              <RenderFNDashboard
+                {...{
+                  ...props,
+                  ...p,
+                  uid,
+                  mode: globalFnProps.mode,
+                }}
+              />
+            </div>
+          </FnAppProvider>
+        </RenderPortal>
+      );
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dashboards, p, globalFnProps.renderingDashboardUID]);
 };
+
+/**
+ * Checks if the dashboard is valid every 500ms.
+ */
+const POLLING_INTERVAL = 500;
+function isDashboardValidPoller(globalFnProps: MfeGlobalState, dashboards: Array<[string, FnState]>) {
+  return setInterval(() => {
+    dashboards.forEach(([uid, props]) => {
+      if (!document.getElementById(props.portalContainerID)) {
+        FnLoggerService.info("[Polling]:: removing dashboard from MfeStore because portalContainerID doesn't exist", {
+          portalID: props.portalContainerID,
+          uid,
+        });
+        mfeStore.dispatch(removeGrafanaStoreAndDashboard(uid));
+      }
+    });
+
+    if (
+      globalFnProps.renderingDashboardUID &&
+      !dashboards.some(([uid]) => uid === globalFnProps.renderingDashboardUID)
+    ) {
+      mfeStore.dispatch(updateRenderingDashboardUID(''));
+    }
+  }, POLLING_INTERVAL);
+}
diff --git a/public/app/fn-app/fn-dashboard-page/render-fn-dashboard.tsx b/public/app/fn-app/fn-dashboard-page/render-fn-dashboard.tsx
index 1f4f168718f8..649844a6f5be 100644
--- a/public/app/fn-app/fn-dashboard-page/render-fn-dashboard.tsx
+++ b/public/app/fn-app/fn-dashboard-page/render-fn-dashboard.tsx
@@ -50,7 +50,17 @@ export const RenderFNDashboard: FC<FNDashboardProps> = (props) => {
   }, [firstError, setErrors]);
 
   useEffect(() => {
-    mfeLocationService.fnPathnameChange(window.location.pathname, queryParams);
+    const params = new URLSearchParams(window.location.search);
+    const queryParamsInUrl = Object.fromEntries(params.entries());
+    mfeLocationService.fnPathnameChange(window.location.pathname, {
+      ...(queryParamsInUrl['from'] && queryParamsInUrl['to']
+        ? {
+            from: queryParamsInUrl['from'],
+            to: queryParamsInUrl['to'],
+          }
+        : {}),
+      ...queryParams,
+    });
   }, [queryParams]);
 
   const dashboardPageProps: DashboardPageProps = useMemo(
@@ -59,7 +69,9 @@ export const RenderFNDashboard: FC<FNDashboardProps> = (props) => {
         ...DEFAULT_DASHBOARD_PAGE_PROPS,
         match: {
           params: {
-            ...props,
+            ...props.queryParams,
+            uid: props.uid,
+            slug: props.slug || '',
           },
         },
         location: mfeLocationService.getLocation(),
diff --git a/public/app/fn-app/types.ts b/public/app/fn-app/types.ts
index 5d39827f2527..0d832fa11c62 100644
--- a/public/app/fn-app/types.ts
+++ b/public/app/fn-app/types.ts
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-import { FnGlobalState } from 'app/core/reducers/fn-slice';
+import { FnGlobalState, FnState } from 'app/core/reducers/fn-slice';
 
 export type FailedToMountGrafanaErrorName = 'FailedToMountGrafana';
 
@@ -16,11 +16,12 @@ export type GrafanaMicroFrontendActions = {
 export type AnyObject<K extends string | number | symbol = string, V = any> = {
   [key in K]: V;
 };
-export interface FNDashboardProps extends FnGlobalState {
+export interface FNDashboardProps extends FnState {
   name: string;
   fnError?: ReactNode;
   isLoading: (isLoading: boolean) => void;
   setErrors: (errors?: { [K: number | string]: string }) => void;
   hiddenVariables: readonly string[];
   container?: HTMLElement | null;
+  mode: FnGlobalState['mode'];
 }
diff --git a/public/app/plugins/panel/table/TablePanel.tsx b/public/app/plugins/panel/table/TablePanel.tsx
index 1e27e99af324..44a39006e602 100644
--- a/public/app/plugins/panel/table/TablePanel.tsx
+++ b/public/app/plugins/panel/table/TablePanel.tsx
@@ -11,6 +11,7 @@ import {
 import { config, PanelDataErrorView } from '@grafana/runtime';
 import { Select, Table, usePanelContext, useTheme2 } from '@grafana/ui';
 import { TableSortByFieldState } from '@grafana/ui/src/components/Table/types';
+import { useSelector } from 'app/types';
 
 import { hasDeprecatedParentRowIndex, migrateFromParentRowIndexToNestedFrames } from './migrations';
 import { Options } from './panelcfg.gen';
@@ -20,6 +21,8 @@ interface Props extends PanelProps<Options> {}
 export function TablePanel(props: Props) {
   const { data, height, width, options, fieldConfig, id, timeRange } = props;
 
+  const eventListener = useSelector((state) => state.fnGlobalState.metadata.eventListener);
+
   const theme = useTheme2();
   const panelContext = usePanelContext();
   const frames = hasDeprecatedParentRowIndex(data.series)
@@ -63,6 +66,7 @@ export function TablePanel(props: Props) {
       timeRange={timeRange}
       enableSharedCrosshair={config.featureToggles.tableSharedCrosshair && enableSharedCrosshair}
       fieldConfig={fieldConfig}
+      onClickRow={eventListener ? (row) => eventListener({ type: 'tableRowClick', data: row }) : undefined}
     />
   );
 
diff --git a/public/app/store/configureMfeStore.ts b/public/app/store/configureMfeStore.ts
new file mode 100644
index 000000000000..9ffaa2c97df4
--- /dev/null
+++ b/public/app/store/configureMfeStore.ts
@@ -0,0 +1,120 @@
+import {
+  createSlice,
+  SliceCaseReducers,
+  SliceSelectors,
+  configureStore as reduxConfigStore,
+  Store,
+  PayloadAction,
+} from '@reduxjs/toolkit';
+import { WritableDraft } from 'immer';
+
+import { GrafanaThemeType } from '@grafana/data';
+import { FnState, INITIAL_FN_STATE, UpdateFNGlobalStateAction } from 'app/core/reducers/fn-slice';
+import { FnLoggerService } from 'app/fn_logger';
+import { StoreState } from 'app/types';
+
+import { configureStore } from './configureStore';
+
+const INITIAL_MODE = GrafanaThemeType.Light;
+const MFE_REDUCER_KEY = 'mfeGlobalState';
+
+interface MfeState {
+  dashboards: Record<string, FnState>;
+  FNDashboard: boolean;
+  mode: GrafanaThemeType.Light | GrafanaThemeType.Dark;
+}
+
+function setGrafanaStore(state: WritableDraft<MfeGlobalState>, uid: string) {
+  const grafanaStore = state.grafanaStores[uid];
+  if (!grafanaStore) {
+    state.grafanaStores = {
+      ...state.grafanaStores,
+      [uid]: configureStore(),
+    };
+  }
+}
+
+const reducers: SliceCaseReducers<MfeGlobalState> = {
+  updatePartialMfeStates: (state, action: UpdateFNGlobalStateAction) => {
+    const { uid, ...partialState } = action.payload;
+    setGrafanaStore(state, uid);
+    const fnState = state.dashboards[uid];
+    state.FNDashboard = true;
+
+    if (!fnState) {
+      state.dashboards = {
+        ...state.dashboards,
+        [uid]: {
+          ...INITIAL_FN_STATE,
+          ...partialState,
+          hiddenVariables: partialState.hiddenVariables
+            ? [...partialState.hiddenVariables]
+            : [...INITIAL_FN_STATE.hiddenVariables],
+          uid,
+        },
+      };
+
+      return;
+    }
+
+    state.dashboards[uid] = {
+      ...fnState,
+      ...partialState,
+      hiddenVariables: partialState.hiddenVariables ? [...partialState.hiddenVariables] : [...fnState.hiddenVariables],
+      uid,
+    };
+  },
+
+  removeGrafanaStoreAndDashboard: (state, action: PayloadAction<string>) => {
+    delete state.grafanaStores[action.payload];
+    delete state.dashboards[action.payload];
+  },
+
+  updateRenderingDashboardUID: (state, action: PayloadAction<string>) => {
+    FnLoggerService.info('Updating drill down dashboard state', {
+      state,
+      renderingDashboardUid: action.payload,
+    });
+
+    state.renderingDashboardUID = action.payload;
+  },
+};
+
+export interface MfeGlobalState extends MfeState {
+  grafanaStores: Record<string, Store<StoreState>>;
+  renderingDashboardUID: string;
+}
+
+const fnSlice = createSlice<MfeGlobalState, SliceCaseReducers<MfeGlobalState>, string, SliceSelectors<MfeGlobalState>>({
+  name: MFE_REDUCER_KEY,
+  initialState: {
+    dashboards: {},
+    FNDashboard: false,
+    mode: INITIAL_MODE,
+    grafanaStores: {},
+    renderingDashboardUID: '',
+  },
+  reducers,
+});
+
+export const { updatePartialMfeStates, removeGrafanaStoreAndDashboard, updateRenderingDashboardUID } = fnSlice.actions;
+export const fnSliceReducer = fnSlice.reducer;
+
+export type MfeStore = {
+  fnGlobalReducer: MfeGlobalState;
+};
+
+export const mfeStore = reduxConfigStore<MfeStore>({
+  reducer: {
+    fnGlobalReducer: fnSliceReducer,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: false,
+      immutableCheck: false,
+      thunk: true,
+    }),
+});
+
+export const mfeDispatch = mfeStore.dispatch;
+export const mfeGetStoreState = () => mfeStore.getState();
diff --git a/public/app/store/store.ts b/public/app/store/store.ts
index 496a3e4b081a..04952fbff82a 100644
--- a/public/app/store/store.ts
+++ b/public/app/store/store.ts
@@ -3,6 +3,8 @@ import { Store } from 'redux';
 import { initialKeyedVariablesState } from 'app/features/variables/state/keyedVariablesReducer';
 import { StoreState } from 'app/types';
 
+import { mfeStore } from './configureMfeStore';
+
 export let store: Store<StoreState>;
 
 export function setStore(newStore: Store<StoreState>) {
@@ -14,6 +16,11 @@ export function getState(): StoreState {
     return { templating: { ...initialKeyedVariablesState, lastKey: 'key' } } as StoreState; // used by tests
   }
 
+  const mfeState = findMfeStore();
+  if (mfeState) {
+    return mfeState.getState();
+  }
+
   return store.getState();
 }
 
@@ -22,5 +29,23 @@ export function dispatch(action: any) {
     return;
   }
 
+  const mfeState = findMfeStore();
+  if (mfeState) {
+    return mfeState.dispatch(action);
+  }
+
   return store.dispatch(action);
 }
+
+function findMfeStore() {
+  const s = mfeStore.getState();
+  if (!s.fnGlobalReducer.FNDashboard) {
+    return null;
+  }
+
+  if (!s.fnGlobalReducer.renderingDashboardUID) {
+    return null;
+  }
+
+  return s.fnGlobalReducer.grafanaStores[s.fnGlobalReducer.renderingDashboardUID];
+}