diff --git a/packages/base/src/annotations/components/Annotation.tsx b/packages/base/src/annotations/components/Annotation.tsx
index f3aa8196d..a4118f30b 100644
--- a/packages/base/src/annotations/components/Annotation.tsx
+++ b/packages/base/src/annotations/components/Annotation.tsx
@@ -9,37 +9,25 @@ import { showDialog, Dialog } from '@jupyterlab/apputils';
 import { Button } from '@jupyterlab/ui-components';
 import React, { useMemo, useState } from 'react';
 
-import { IControlPanelModel } from '@/src/types';
 import { Message } from './Message';
 
 export interface IAnnotationProps {
   itemId: string;
   annotationModel: IAnnotationModel;
-  rightPanelModel?: IControlPanelModel;
+  jgisModel?: IJupyterGISModel;
   children?: JSX.Element[] | JSX.Element;
 }
 
 const Annotation: React.FC<IAnnotationProps> = ({
   itemId,
   annotationModel,
-  rightPanelModel,
+  jgisModel,
   children,
 }) => {
   const [messageContent, setMessageContent] = useState('');
-  const [jgisModel, setJgisModel] = useState<IJupyterGISModel | undefined>(
-    rightPanelModel?.jGISModel,
-  );
-
   const annotation = annotationModel.getAnnotation(itemId);
   const contents = useMemo(() => annotation?.contents ?? [], [annotation]);
 
-  /**
-   * Update the model when it changes.
-   */
-  rightPanelModel?.documentChanged.connect((_, widget) => {
-    setJgisModel(widget?.model);
-  });
-
   const handleSubmit = () => {
     annotationModel.addContent(itemId, messageContent);
     setMessageContent('');
@@ -98,7 +86,7 @@ const Annotation: React.FC<IAnnotationProps> = ({
         <Button className="jp-mod-styled jp-mod-warn" onClick={handleDelete}>
           <FontAwesomeIcon icon={faTrash} />
         </Button>
-        {rightPanelModel && (
+        {jgisModel && (
           <Button
             className="jp-mod-styled jp-mod-accept"
             onClick={centerOnAnnotation}
diff --git a/packages/base/src/index.ts b/packages/base/src/index.ts
index 1a9096e83..9c33714cb 100644
--- a/packages/base/src/index.ts
+++ b/packages/base/src/index.ts
@@ -8,8 +8,8 @@ export * from './icons';
 export * from './mainview';
 export * from './menus';
 export * from './panelview';
-export * from './stacBrowser';
 export * from './store';
+export * from './stacBrowser';
 export * from './toolbar';
 export * from './tools';
 export * from './types';
diff --git a/packages/base/src/keybindings.json b/packages/base/src/keybindings.json
index 8e4bea9a2..d0f7cdf3f 100644
--- a/packages/base/src/keybindings.json
+++ b/packages/base/src/keybindings.json
@@ -37,7 +37,7 @@
   {
     "command": "jupytergis:renameLayer",
     "keys": ["F2"],
-    "selector": ".data-jgis-keybinding .jp-gis-layerItem"
+    "selector": ".jp-gis-layerItem"
   },
   {
     "command": "jupytergis:removeGroup",
@@ -47,7 +47,7 @@
   {
     "command": "jupytergis:renameGroup",
     "keys": ["F2"],
-    "selector": ".data-jgis-keybinding .jp-gis-layerGroupHeader"
+    "selector": ".jp-gis-layerGroupHeader"
   },
   {
     "command": "jupytergis:executeConsole",
diff --git a/packages/base/src/mainview/mainView.tsx b/packages/base/src/mainview/mainView.tsx
index 8b0a1ece8..1f786e6fe 100644
--- a/packages/base/src/mainview/mainView.tsx
+++ b/packages/base/src/mainview/mainView.tsx
@@ -1,6 +1,7 @@
 import { MapChange } from '@jupyter/ydoc';
 import {
   IAnnotation,
+  IAnnotationModel,
   IDict,
   IGeoTiffSource,
   IHeatmapLayer,
@@ -8,6 +9,7 @@ import {
   IImageLayer,
   IImageSource,
   IJGISFilterItem,
+  IJGISFormSchemaRegistry,
   IJGISLayer,
   IJGISLayerDocChange,
   IJGISLayerTreeDocChange,
@@ -34,6 +36,7 @@ import {
 import { showErrorMessage } from '@jupyterlab/apputils';
 import { IObservableMap, ObservableMap } from '@jupyterlab/observables';
 import { User } from '@jupyterlab/services';
+import { IStateDB } from '@jupyterlab/statedb';
 import { CommandRegistry } from '@lumino/commands';
 import { JSONValue, UUID } from '@lumino/coreutils';
 import { ContextMenu } from '@lumino/widgets';
@@ -90,6 +93,7 @@ import CollaboratorPointers, { ClientPointer } from './CollaboratorPointers';
 import { FollowIndicator } from './FollowIndicator';
 import TemporalSlider from './TemporalSlider';
 import { MainViewModel } from './mainviewmodel';
+import { LeftPanel, RightPanel } from '../panelview';
 
 type OlLayerTypes =
   | TileLayer
@@ -102,6 +106,9 @@ type OlLayerTypes =
   | ImageLayer<any>;
 interface IProps {
   viewModel: MainViewModel;
+  state?: IStateDB;
+  formSchemaRegistry?: IJGISFormSchemaRegistry;
+  annotationModel?: IAnnotationModel;
 }
 
 interface IStates {
@@ -123,6 +130,11 @@ interface IStates {
 export class MainView extends React.Component<IProps, IStates> {
   constructor(props: IProps) {
     super(props);
+    this._state = props.state;
+
+    this._formSchemaRegistry = props.formSchemaRegistry;
+
+    this._annotationModel = props.annotationModel;
 
     // Enforce the map to take the full available width in the case of Jupyter Notebook viewer
     const el = document.getElementById('main-panel');
@@ -2220,6 +2232,21 @@ export class MainView extends React.Component<IProps, IStates> {
             scale={this.state.scale}
           />
         </div>
+
+        {this._state && (
+          <LeftPanel
+            model={this._model}
+            commands={this._mainViewModel.commands}
+            state={this._state}
+          ></LeftPanel>
+        )}
+        {this._formSchemaRegistry && this._annotationModel && (
+          <RightPanel
+            model={this._model}
+            formSchemaRegistry={this._formSchemaRegistry}
+            annotationModel={this._annotationModel}
+          ></RightPanel>
+        )}
       </>
     );
   }
@@ -2240,4 +2267,7 @@ export class MainView extends React.Component<IProps, IStates> {
   private _originalFeatures: IDict<Feature<Geometry>[]> = {};
   private _highlightLayer: VectorLayer<VectorSource>;
   private _updateCenter: CallableFunction;
+  private _state?: IStateDB;
+  private _formSchemaRegistry?: IJGISFormSchemaRegistry;
+  private _annotationModel?: IAnnotationModel;
 }
diff --git a/packages/base/src/mainview/mainviewwidget.tsx b/packages/base/src/mainview/mainviewwidget.tsx
index 465d77a8b..c04aa80c3 100644
--- a/packages/base/src/mainview/mainviewwidget.tsx
+++ b/packages/base/src/mainview/mainviewwidget.tsx
@@ -1,22 +1,40 @@
+import { IAnnotationModel, IJGISFormSchemaRegistry } from '@jupytergis/schema';
 import { ReactWidget } from '@jupyterlab/apputils';
+import { IStateDB } from '@jupyterlab/statedb';
 import * as React from 'react';
 
 import { MainView } from './mainView';
 import { MainViewModel } from './mainviewmodel';
 
+export interface IOptions {
+  mainViewModel: MainViewModel;
+  state?: IStateDB;
+  formSchemaRegistry?: IJGISFormSchemaRegistry;
+  annotationModel?: IAnnotationModel;
+}
+
 export class JupyterGISMainViewPanel extends ReactWidget {
   /**
    * Construct a `JupyterGISPanel`.
    */
-  constructor(options: { mainViewModel: MainViewModel }) {
+  constructor(options: IOptions) {
     super();
-    this._mainViewModel = options.mainViewModel;
+    this._state = options.state;
     this.addClass('jp-jupytergis-panel');
+    this._options = options;
   }
 
   render(): JSX.Element {
-    return <MainView viewModel={this._mainViewModel} />;
+    return (
+      <MainView
+        state={this._state}
+        viewModel={this._options.mainViewModel}
+        formSchemaRegistry={this._options.formSchemaRegistry}
+        annotationModel={this._options.annotationModel}
+      />
+    );
   }
 
-  private _mainViewModel: MainViewModel;
+  private _state?: IStateDB;
+  private _options: IOptions;
 }
diff --git a/packages/base/src/panelview/annotationPanel.tsx b/packages/base/src/panelview/annotationPanel.tsx
index abc5d1b94..54a515e85 100644
--- a/packages/base/src/panelview/annotationPanel.tsx
+++ b/packages/base/src/panelview/annotationPanel.tsx
@@ -1,13 +1,11 @@
-import { IAnnotationModel } from '@jupytergis/schema';
-import { PanelWithToolbar, ReactWidget } from '@jupyterlab/ui-components';
+import { IAnnotationModel, IJupyterGISModel } from '@jupytergis/schema';
 import React, { Component } from 'react';
 
 import Annotation from '@/src/annotations/components/Annotation';
-import { IControlPanelModel } from '@/src/types';
 
 interface IAnnotationPanelProps {
   annotationModel: IAnnotationModel;
-  rightPanelModel: IControlPanelModel;
+  jgisModel: IJupyterGISModel;
 }
 
 export class AnnotationsPanel extends Component<IAnnotationPanelProps> {
@@ -19,20 +17,10 @@ export class AnnotationsPanel extends Component<IAnnotationPanelProps> {
     };
 
     this._annotationModel = props.annotationModel;
-    this._rightPanelModel = props.rightPanelModel;
+    this._jgisModel = props.jgisModel;
 
-    this._annotationModel.modelChanged.connect(async () => {
-      // await this._annotationModel?.context?.ready;
-
-      this._annotationModel?.model?.sharedMetadataChanged.disconnect(
-        updateCallback,
-      );
-      this._annotationModel = props.annotationModel;
-      this._annotationModel?.model?.sharedMetadataChanged.connect(
-        updateCallback,
-      );
-      this.forceUpdate();
-    });
+    this._annotationModel?.model?.sharedMetadataChanged.connect(updateCallback);
+    this.forceUpdate();
   }
 
   render(): JSX.Element {
@@ -46,7 +34,7 @@ export class AnnotationsPanel extends Component<IAnnotationPanelProps> {
       return (
         <div>
           <Annotation
-            rightPanelModel={this._rightPanelModel}
+            jgisModel={this._jgisModel}
             annotationModel={this._annotationModel}
             itemId={id}
           />
@@ -59,37 +47,5 @@ export class AnnotationsPanel extends Component<IAnnotationPanelProps> {
   }
 
   private _annotationModel: IAnnotationModel;
-  private _rightPanelModel: IControlPanelModel;
-}
-
-export class Annotations extends PanelWithToolbar {
-  constructor(options: Annotations.IOptions) {
-    super({});
-
-    this.title.label = 'Annotations';
-    this.addClass('jgis-scrollable');
-
-    this._annotationModel = options.annotationModel;
-    this._rightPanelModel = options.rightPanelModel;
-
-    this._widget = ReactWidget.create(
-      <AnnotationsPanel
-        rightPanelModel={this._rightPanelModel}
-        annotationModel={this._annotationModel}
-      />,
-    );
-
-    this.addWidget(this._widget);
-  }
-
-  private _widget: ReactWidget;
-  private _annotationModel: IAnnotationModel;
-  private _rightPanelModel: IControlPanelModel;
-}
-
-export namespace Annotations {
-  export interface IOptions {
-    annotationModel: IAnnotationModel;
-    rightPanelModel: IControlPanelModel;
-  }
+  private _jgisModel: IJupyterGISModel;
 }
diff --git a/packages/base/src/panelview/components/filter-panel/Filter.tsx b/packages/base/src/panelview/components/filter-panel/Filter.tsx
index ce694754d..76e8c3830 100644
--- a/packages/base/src/panelview/components/filter-panel/Filter.tsx
+++ b/packages/base/src/panelview/components/filter-panel/Filter.tsx
@@ -3,58 +3,20 @@ import {
   IDict,
   IJGISFilterItem,
   IJupyterGISModel,
-  IJupyterGISTracker,
 } from '@jupytergis/schema';
-import { Button, ReactWidget } from '@jupyterlab/ui-components';
-import { Panel } from '@lumino/widgets';
+import { Button } from '@jupyterlab/ui-components';
 import { cloneDeep } from 'lodash';
 import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
 
 import { debounce, loadFile } from '@/src/tools';
-import { IControlPanelModel } from '@/src/types';
 import FilterRow from './FilterRow';
 
-/**
- * The filters panel widget.
- */
-export class FilterPanel extends Panel {
-  constructor(options: FilterPanel.IOptions) {
-    super();
-    this._model = options.model;
-    this._tracker = options.tracker;
-
-    this.id = 'jupytergis::layerTree';
-    // this.addClass(LAYERS_PANEL_CLASS);
-
-    this.addWidget(
-      ReactWidget.create(
-        <FilterComponent
-          model={this._model}
-          tracker={this._tracker}
-        ></FilterComponent>,
-      ),
-    );
-  }
-
-  private _model: IControlPanelModel | undefined;
-  private _tracker: IJupyterGISTracker;
-}
-
-export namespace FilterPanel {
-  export interface IOptions {
-    model: IControlPanelModel;
-    tracker: IJupyterGISTracker;
-  }
-}
-
 interface IFilterComponentProps {
-  model: IControlPanelModel;
-  tracker: IJupyterGISTracker;
+  model: IJupyterGISModel;
 }
 
-const FilterComponent: React.FC<IFilterComponentProps> = props => {
+const FilterComponent: React.FC<IFilterComponentProps> = ({ model }) => {
   const featuresInLayerRef = useRef({});
-  const [widgetId, setWidgetId] = useState('');
   const [logicalOp, setLogicalOp] = useState('all');
   const [selectedLayer, setSelectedLayer] = useState('');
   const [shouldDisplay, setShouldDisplay] = useState(false);
@@ -62,42 +24,13 @@ const FilterComponent: React.FC<IFilterComponentProps> = props => {
   const [featuresInLayer, setFeaturesInLayer] = useState<
     Record<string, Set<string | number>>
   >({});
-  const [model, setModel] = useState<IJupyterGISModel | undefined>(
-    props.model.jGISModel,
-  );
-
-  props.model?.documentChanged.connect((_, widget) => {
-    setModel(widget?.model);
-  });
-
-  // Reset state values when current widget changes
-  useEffect(() => {
-    const handleCurrentChanged = () => {
-      if (props.tracker.currentWidget?.id === widgetId) {
-        return;
-      }
-
-      if (props.tracker.currentWidget) {
-        setWidgetId(props.tracker.currentWidget.id);
-      }
-      setFeaturesInLayer({});
-      setFilterRows([]);
-      setLogicalOp('all');
-      setSelectedLayer('');
-    };
-    props.tracker.currentChanged.connect(handleCurrentChanged);
-
-    return () => {
-      props.tracker.currentChanged.disconnect(handleCurrentChanged);
-    };
-  }, []);
 
   useEffect(() => {
     // Keep layer selected when widget changes
     if (model?.localState?.selected?.value) {
       setSelectedLayer(Object.keys(model?.localState?.selected?.value)[0]);
     }
-  }, [widgetId]);
+  }, []);
 
   useEffect(() => {
     const handleClientStateChanged = () => {
@@ -112,7 +45,7 @@ const FilterComponent: React.FC<IFilterComponentProps> = props => {
 
     const handleSharedOptionsChanged = (_: any, keys: any) => {
       // model changes when current widget changes, don't want this to run in that case
-      if (props.tracker.currentWidget?.id === widgetId && keys.has('zoom')) {
+      if (keys.has('zoom')) {
         if (!model?.localState?.selected?.value) {
           return;
         }
@@ -261,7 +194,10 @@ const FilterComponent: React.FC<IFilterComponentProps> = props => {
       return;
     }
 
-    layer.filters = { logicalOp: op ?? logicalOp, appliedFilters: filters };
+    layer.filters = {
+      logicalOp: op ?? logicalOp,
+      appliedFilters: filters,
+    };
     model?.sharedModel.updateLayer(selectedLayer, layer);
   };
 
@@ -293,7 +229,11 @@ const FilterComponent: React.FC<IFilterComponentProps> = props => {
             ))}
           </div>
           <div className="jp-gis-filter-button-container">
-            <div style={{ justifyContent: 'flex-start' }}>
+            <div
+              style={{
+                justifyContent: 'flex-start',
+              }}
+            >
               <Button
                 className="jp-Dialog-button jp-mod-accept jp-mod-styled"
                 onClick={addFilterRow}
@@ -316,6 +256,9 @@ const FilterComponent: React.FC<IFilterComponentProps> = props => {
           </div>
         </div>
       )}
+      {!shouldDisplay && (
+        <div style={{ textAlign: 'center' }}>No layer selected</div>
+      )}
     </>
   );
 };
diff --git a/packages/base/src/panelview/components/identify-panel/IdentifyPanel.tsx b/packages/base/src/panelview/components/identify-panel/IdentifyPanel.tsx
index 842f1111f..e8269d75d 100644
--- a/packages/base/src/panelview/components/identify-panel/IdentifyPanel.tsx
+++ b/packages/base/src/panelview/components/identify-panel/IdentifyPanel.tsx
@@ -4,93 +4,27 @@ import {
   IDict,
   IJupyterGISClientState,
   IJupyterGISModel,
-  IJupyterGISTracker,
 } from '@jupytergis/schema';
 import { User } from '@jupyterlab/services';
-import { LabIcon, ReactWidget, caretDownIcon } from '@jupyterlab/ui-components';
-import { Panel } from '@lumino/widgets';
+import { LabIcon, caretDownIcon } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { IControlPanelModel } from '@/src/types';
-
-export class IdentifyPanel extends Panel {
-  constructor(options: IdentifyPanel.IOptions) {
-    super();
-    this._model = options.model;
-    this._tracker = options.tracker;
-
-    this.id = 'jupytergis::identifyPanel';
-    this.title.caption = 'Identify';
-    this.title.label = 'Identify';
-    this.addClass('jgis-scrollable');
-
-    this.addWidget(
-      ReactWidget.create(
-        <IdentifyPanelComponent
-          controlPanelModel={this._model}
-          tracker={this._tracker}
-        />,
-      ),
-    );
-  }
-
-  private _model: IControlPanelModel | undefined;
-  private _tracker: IJupyterGISTracker;
-}
-
-export namespace IdentifyPanel {
-  export interface IOptions {
-    model: IControlPanelModel;
-    tracker: IJupyterGISTracker;
-  }
-}
-
 interface IIdentifyComponentProps {
-  controlPanelModel: IControlPanelModel;
-  tracker: IJupyterGISTracker;
+  model: IJupyterGISModel;
 }
 
-const IdentifyPanelComponent: React.FC<IIdentifyComponentProps> = ({
-  controlPanelModel,
-  tracker,
+export const IdentifyPanelComponent: React.FC<IIdentifyComponentProps> = ({
+  model,
 }) => {
-  const [widgetId, setWidgetId] = useState('');
   const [features, setFeatures] = useState<IDict<any>>();
   const [visibleFeatures, setVisibleFeatures] = useState<IDict<any>>({
     0: true,
   });
   const [remoteUser, setRemoteUser] = useState<User.IIdentity | null>(null);
-  const [jgisModel, setJgisModel] = useState<IJupyterGISModel | undefined>(
-    controlPanelModel?.jGISModel,
-  );
 
   const featuresRef = useRef(features);
-  /**
-   * Update the model when it changes.
-   */
-  controlPanelModel?.documentChanged.connect((_, widget) => {
-    setJgisModel(widget?.model);
-  });
 
   // Reset state values when current widget changes
-  useEffect(() => {
-    const handleCurrentChanged = () => {
-      if (tracker.currentWidget?.id === widgetId) {
-        return;
-      }
-
-      if (tracker.currentWidget) {
-        setWidgetId(tracker.currentWidget.id);
-      }
-      setFeatures({});
-      setVisibleFeatures({ 0: true });
-    };
-    tracker.currentChanged.connect(handleCurrentChanged);
-
-    return () => {
-      tracker.currentChanged.disconnect(handleCurrentChanged);
-    };
-  }, []);
 
   useEffect(() => {
     featuresRef.current = features;
@@ -101,7 +35,7 @@ const IdentifyPanelComponent: React.FC<IIdentifyComponentProps> = ({
       sender: IJupyterGISModel,
       clients: Map<number, IJupyterGISClientState>,
     ) => {
-      const remoteUserId = jgisModel?.localState?.remoteUser;
+      const remoteUserId = model?.localState?.remoteUser;
 
       // If following a collaborator
       if (remoteUserId) {
@@ -117,34 +51,30 @@ const IdentifyPanelComponent: React.FC<IIdentifyComponentProps> = ({
       }
 
       // If not following a collaborator
-      const identifiedFeatures =
-        jgisModel?.localState?.identifiedFeatures?.value;
+      const identifiedFeatures = model?.localState?.identifiedFeatures?.value;
 
       if (!identifiedFeatures) {
         setFeatures({});
         return;
       }
 
-      if (
-        jgisModel.isIdentifying &&
-        featuresRef.current !== identifiedFeatures
-      ) {
+      if (model.isIdentifying && featuresRef.current !== identifiedFeatures) {
         setFeatures(identifiedFeatures);
       }
     };
 
-    jgisModel?.clientStateChanged.connect(handleClientStateChanged);
+    model?.clientStateChanged.connect(handleClientStateChanged);
 
     return () => {
-      jgisModel?.clientStateChanged.disconnect(handleClientStateChanged);
+      model?.clientStateChanged.disconnect(handleClientStateChanged);
     };
-  }, [jgisModel]);
+  }, [model]);
 
   const highlightFeatureOnMap = (feature: any) => {
-    jgisModel?.highlightFeatureSignal?.emit(feature);
+    model?.highlightFeatureSignal?.emit(feature);
 
     const geometry = feature.geometry || feature._geometry;
-    jgisModel?.flyToGeometrySignal?.emit(geometry);
+    model?.flyToGeometrySignal?.emit(geometry);
   };
 
   const toggleFeatureVisibility = (index: number) => {
@@ -158,7 +88,7 @@ const IdentifyPanelComponent: React.FC<IIdentifyComponentProps> = ({
     <div
       className="jgis-identify-wrapper"
       style={{
-        border: jgisModel?.localState?.remoteUser
+        border: model?.localState?.remoteUser
           ? `solid 3px ${remoteUser?.color}`
           : 'unset',
       }}
@@ -216,7 +146,9 @@ const IdentifyPanelComponent: React.FC<IIdentifyComponentProps> = ({
                       {typeof value === 'string' &&
                       /<\/?[a-z][\s\S]*>/i.test(value) ? (
                         <span
-                          dangerouslySetInnerHTML={{ __html: `${value}` }}
+                          dangerouslySetInnerHTML={{
+                            __html: `${value}`,
+                          }}
                         />
                       ) : (
                         <span>{String(value)}</span>
@@ -230,5 +162,3 @@ const IdentifyPanelComponent: React.FC<IIdentifyComponentProps> = ({
     </div>
   );
 };
-
-export default IdentifyPanel;
diff --git a/packages/base/src/panelview/components/layers.tsx b/packages/base/src/panelview/components/layers.tsx
index e5069a0b3..4014ae92f 100644
--- a/packages/base/src/panelview/components/layers.tsx
+++ b/packages/base/src/panelview/components/layers.tsx
@@ -3,32 +3,24 @@ import {
   IJGISLayerTree,
   IJupyterGISClientState,
   IJupyterGISModel,
+  ISelection,
+  SelectionType,
 } from '@jupytergis/schema';
 import { DOMUtils } from '@jupyterlab/apputils';
 import { IStateDB } from '@jupyterlab/statedb';
-import {
-  Button,
-  LabIcon,
-  ReactWidget,
-  caretDownIcon,
-} from '@jupyterlab/ui-components';
-import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
-import { Panel } from '@lumino/widgets';
+import { Button, LabIcon, caretDownIcon } from '@jupyterlab/ui-components';
+import { CommandRegistry } from '@lumino/commands';
+import { ReadonlyPartialJSONObject, UUID } from '@lumino/coreutils';
 import React, {
   MouseEvent as ReactMouseEvent,
   useEffect,
   useState,
 } from 'react';
 
-import { icons } from '@/src/constants';
+import { CommandIDs, icons } from '@/src/constants';
 import { nonVisibilityIcon, visibilityIcon } from '@/src/icons';
-import {
-  ILayerPanelOptions,
-  ILeftPanelClickHandlerParams,
-} from '@/src/panelview/leftpanel';
-import { IControlPanelModel } from '@/src/types';
+import { ILeftPanelClickHandlerParams } from '@/src/panelview/leftpanel';
 
-const LAYERS_PANEL_CLASS = 'jp-gis-layerPanel';
 const LAYER_GROUP_CLASS = 'jp-gis-layerGroup';
 const LAYER_GROUP_HEADER_CLASS = 'jp-gis-layerGroupHeader';
 const LAYER_GROUP_COLLAPSER_CLASS = 'jp-gis-layerGroupCollapser';
@@ -38,48 +30,39 @@ const LAYER_TITLE_CLASS = 'jp-gis-layerTitle';
 const LAYER_ICON_CLASS = 'jp-gis-layerIcon';
 const LAYER_TEXT_CLASS = 'jp-gis-layerText data-jgis-keybinding';
 
-/**
- * The layers panel widget.
- */
-export class LayersPanel extends Panel {
-  constructor(options: ILayerPanelOptions) {
-    super();
-    this._model = options.model;
-    this._onSelect = options.onSelect;
-    this._state = options.state;
-
-    this.id = 'jupytergis::layerTree';
-    this.addClass(LAYERS_PANEL_CLASS);
-
-    this.addWidget(
-      ReactWidget.create(
-        <LayersBodyComponent
-          model={this._model}
-          onSelect={this._onSelect}
-          state={this._state}
-        ></LayersBodyComponent>,
-      ),
-    );
-    this.node.ondragover = this._onDragOver;
-    this.node.ondrop = this._onDrop;
-  }
+interface IBodyProps {
+  model: IJupyterGISModel;
+  commands: CommandRegistry;
+  state: IStateDB;
+}
+
+export const LayersBodyComponent: React.FC<IBodyProps> = props => {
+  const model = props.model;
+  const id = UUID.uuid4();
+
+  const [layerTree, setLayerTree] = useState<IJGISLayerTree>(
+    model?.getLayerTree() || [],
+  );
+
+  const notifyCommands = () => {
+    // Notify commands that need updating
+    props.commands.notifyCommandChanged(CommandIDs.identify);
+    props.commands.notifyCommandChanged(CommandIDs.temporalController);
+  };
 
-  // This happens when dragging over empty space below the tree.
-  private _onDragOver = (e: DragEvent) => {
+  const _onDragOver = (e: React.DragEvent) => {
     e.stopPropagation();
     e.preventDefault();
-    this.node.appendChild(Private.dragIndicator);
     Private.dragInfo.dragOverElement = null;
     Private.dragInfo.dragOverPosition = null;
   };
 
-  private _onDrop = (e: DragEvent) => {
+  const _onDrop = (e: React.DragEvent) => {
     Private.dragIndicator.style.display = 'none';
 
-    if (this._model === undefined) {
+    if (model === undefined) {
       return;
     }
-    const { jGISModel: model } = this._model;
 
     const { draggedElement, dragOverElement, dragOverPosition } =
       Private.dragInfo;
@@ -124,34 +107,83 @@ export class LayersPanel extends Panel {
     );
   };
 
-  private _model: IControlPanelModel | undefined;
-  private _state: IStateDB;
-  private _onSelect: ({
+  const onSelect = ({
     type,
     item,
     nodeId,
-  }: ILeftPanelClickHandlerParams) => void;
-}
+    event,
+  }: ILeftPanelClickHandlerParams) => {
+    if (!props.model || !nodeId) {
+      return;
+    }
 
-/**
- * Properties of the layers body component.
- */
-interface IBodyProps {
-  model: IControlPanelModel;
-  state: IStateDB;
-  onSelect: ({ type, item, nodeId }: ILeftPanelClickHandlerParams) => void;
-}
+    const selectedValue = props.model.localState?.selected?.value;
+    const node = document.getElementById(nodeId);
 
-/**
- * The body component of the panel.
- */
-const LayersBodyComponent: React.FC<IBodyProps> = props => {
-  const [model, setModel] = useState<IJupyterGISModel | undefined>(
-    props.model?.jGISModel,
-  );
-  const [layerTree, setLayerTree] = useState<IJGISLayerTree>(
-    model?.getLayerTree() || [],
-  );
+    if (!node) {
+      return;
+    }
+
+    node.tabIndex = 0;
+    node.focus();
+
+    // Early return if no selection exists
+    if (!selectedValue) {
+      resetSelected(type, nodeId, item);
+      return;
+    }
+
+    // Don't want to reset selected if right clicking a selected item
+    if (!event.ctrlKey && event.button === 2 && item in selectedValue) {
+      return;
+    }
+
+    // Reset selection for normal left click
+    if (!event.ctrlKey) {
+      resetSelected(type, nodeId, item);
+      return;
+    }
+
+    if (nodeId) {
+      // Check if new selection is the same type as previous selections
+      const isSelectedSameType = Object.values(selectedValue).some(
+        selection => selection.type === type,
+      );
+
+      if (!isSelectedSameType) {
+        // Selecting a new type, so reset selected
+        resetSelected(type, nodeId, item);
+        return;
+      }
+
+      // If types are the same add the selection
+      const updatedSelectedValue = {
+        ...selectedValue,
+        [item]: { type, selectedNodeId: nodeId },
+      };
+
+      props.model.syncSelected(updatedSelectedValue, id);
+
+      notifyCommands();
+    }
+  };
+
+  const resetSelected = (
+    type: SelectionType,
+    nodeId?: string,
+    item?: string,
+  ) => {
+    const selection: { [key: string]: ISelection } = {};
+    if (item && nodeId) {
+      selection[item] = {
+        type,
+        selectedNodeId: nodeId,
+      };
+    }
+    props.model.syncSelected(selection, id);
+
+    notifyCommands();
+  };
 
   /**
    * Propagate the layer selection.
@@ -162,7 +194,7 @@ const LayersBodyComponent: React.FC<IBodyProps> = props => {
     nodeId,
     event,
   }: ILeftPanelClickHandlerParams) => {
-    props.onSelect({ type, item, nodeId, event });
+    onSelect({ type, item, nodeId, event });
   };
 
   /**
@@ -182,16 +214,8 @@ const LayersBodyComponent: React.FC<IBodyProps> = props => {
     };
   }, [model]);
 
-  /**
-   * Update the model when it changes.
-   */
-  props.model?.documentChanged.connect((_, widget) => {
-    setModel(widget?.model);
-    setLayerTree(widget?.model?.getLayerTree() || []);
-  });
-
   return (
-    <div id="jp-gis-layer-tree">
+    <div id="jp-gis-layer-tree" onDrop={_onDrop} onDragOver={_onDragOver}>
       {layerTree
         .slice()
         .reverse()
@@ -404,7 +428,12 @@ const LayerComponent: React.FC<ILayerProps> = props => {
 
   const setSelection = (event: ReactMouseEvent<HTMLElement>) => {
     const childId = event.currentTarget.children.namedItem(id)?.id;
-    onClick({ type: 'layer', item: layerId, nodeId: childId, event });
+    onClick({
+      type: 'layer',
+      item: layerId,
+      nodeId: childId,
+      event,
+    });
   };
 
   return (
diff --git a/packages/base/src/panelview/index.ts b/packages/base/src/panelview/index.ts
index 111735d1a..5e1b8ed00 100644
--- a/packages/base/src/panelview/index.ts
+++ b/packages/base/src/panelview/index.ts
@@ -1,5 +1,4 @@
 export * from './header';
 export * from './leftpanel';
-export * from './model';
 export * from './objectproperties';
 export * from './rightpanel';
diff --git a/packages/base/src/panelview/leftpanel.tsx b/packages/base/src/panelview/leftpanel.tsx
index 29ad9c1e0..43b712f04 100644
--- a/packages/base/src/panelview/leftpanel.tsx
+++ b/packages/base/src/panelview/leftpanel.tsx
@@ -1,34 +1,18 @@
-import {
-  IJupyterGISModel,
-  IJupyterGISTracker,
-  ISelection,
-  JupyterGISDoc,
-  SelectionType,
-} from '@jupytergis/schema';
+import { IJupyterGISModel, SelectionType } from '@jupytergis/schema';
 import { IStateDB } from '@jupyterlab/statedb';
-import { SidePanel } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
-import { Message } from '@lumino/messaging';
 import { MouseEvent as ReactMouseEvent } from 'react';
+import * as React from 'react';
 
-import { CommandIDs } from '@/src/constants';
-import StacPanel from '@/src/stacBrowser/StacPanel';
-import { IControlPanelModel } from '@/src/types';
-import { FilterPanel } from './components/filter-panel/Filter';
-import { LayersPanel } from './components/layers';
-import { ControlPanelHeader } from './header';
-
-/**
- * Options of the left panel widget.
- */
-export interface ILeftPanelOptions {
-  model: IControlPanelModel;
-  onSelect: ({ type, item, nodeId }: ILeftPanelClickHandlerParams) => void;
-}
-
-export interface ILayerPanelOptions extends ILeftPanelOptions {
-  state: IStateDB;
-}
+import { LayersBodyComponent } from './components/layers';
+import {
+  PanelTabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '../shared/components/Tabs';
+import StacPanel from '../stacBrowser/components/StacPanel';
+import FilterComponent from './components/filter-panel/Filter';
 
 export interface ILeftPanelClickHandlerParams {
   type: SelectionType;
@@ -37,208 +21,63 @@ export interface ILeftPanelClickHandlerParams {
   event: ReactMouseEvent;
 }
 
-export class LeftPanelWidget extends SidePanel {
-  constructor(options: LeftPanelWidget.IOptions) {
-    super();
-    this.addClass('jGIS-sidepanel-widget');
-    this.addClass('data-jgis-keybinding');
-    this.node.tabIndex = 0;
-
-    this._model = options.model;
-    this._state = options.state;
-    this._commands = options.commands;
-
-    const header = new ControlPanelHeader();
-    this.header.addWidget(header);
-
-    const layerTree = new LayersPanel({
-      model: this._model,
-      state: this._state,
-      onSelect: this._onSelect,
-    });
-
-    layerTree.title.caption = 'Layer tree';
-    layerTree.title.label = 'Layers';
-    this.addWidget(layerTree);
-
-    const stacPanel = new StacPanel({
-      model: this._model,
-      tracker: options.tracker,
-    });
-
-    stacPanel.title.caption = 'STAC';
-    stacPanel.title.label = 'STAC';
-    this.addWidget(stacPanel);
-
-    const filterPanel = new FilterPanel({
-      model: this._model,
-      tracker: options.tracker,
-    });
-
-    filterPanel.title.caption = 'Filters';
-    filterPanel.title.label = 'Filters';
-    this.addWidget(filterPanel);
-
-    this._handleFileChange = () => {
-      header.title.label = this._currentModel?.filePath || '-';
-    };
-
-    options.tracker.currentChanged.connect((_, changed) => {
-      if (changed) {
-        if (this._currentModel) {
-          this._currentModel.pathChanged.disconnect(this._handleFileChange);
-        }
-        this._currentModel = changed.model;
-        header.title.label = changed.model.filePath;
-        this._currentModel.pathChanged.connect(this._handleFileChange);
-      } else {
-        header.title.label = '-';
-        this._currentModel = null;
-      }
-    });
-  }
-
-  dispose(): void {
-    super.dispose();
-  }
-
-  protected onAfterAttach(msg: Message): void {
-    super.onAfterAttach(msg);
-    const node = this.node;
-    node.addEventListener('mouseup', this);
-  }
-
-  protected onBeforeDetach(msg: Message): void {
-    super.onBeforeDetach(msg);
-    const node = this.node;
-    node.removeEventListener('mouseup', this);
-  }
-
-  handleEvent(event: Event): void {
-    switch (event.type) {
-      case 'mouseup':
-        this._mouseUpEvent(event as MouseEvent);
-        break;
-      default:
-        break;
-    }
-  }
-
-  private _mouseUpEvent(event: MouseEvent): void {
-    // If we click on empty space in the layer panel, keep the focus on the last selected element
-    const node = document.getElementById(this._lastSelectedNodeId);
-    if (!node) {
-      return;
-    }
-
-    node.focus();
-  }
-
-  /**
-   * Function to call when a layer is selected from a component of the panel.
-   *
-   * @param item - the selected layer or group.
-   */
-  private _onSelect = ({
-    type,
-    item,
-    nodeId,
-    event,
-  }: ILeftPanelClickHandlerParams) => {
-    if (!this._model || !nodeId) {
-      return;
-    }
-
-    const { jGISModel } = this._model;
-    const selectedValue = jGISModel?.localState?.selected?.value;
-    const node = document.getElementById(nodeId);
-
-    if (!node) {
-      return;
-    }
-
-    node.tabIndex = 0;
-    node.focus();
-
-    // Early return if no selection exists
-    if (!selectedValue) {
-      this.resetSelected(type, nodeId, item);
-      return;
-    }
-
-    // Don't want to reset selected if right clicking a selected item
-    if (!event.ctrlKey && event.button === 2 && item in selectedValue) {
-      return;
-    }
-
-    // Reset selection for normal left click
-    if (!event.ctrlKey) {
-      this.resetSelected(type, nodeId, item);
-      return;
-    }
-
-    if (nodeId) {
-      // Check if new selection is the same type as previous selections
-      const isSelectedSameType = Object.values(selectedValue).some(
-        selection => selection.type === type,
-      );
-
-      if (!isSelectedSameType) {
-        // Selecting a new type, so reset selected
-        this.resetSelected(type, nodeId, item);
-        return;
-      }
-
-      // If types are the same add the selection
-      const updatedSelectedValue = {
-        ...selectedValue,
-        [item]: { type, selectedNodeId: nodeId },
-      };
-      this._lastSelectedNodeId = nodeId;
-
-      jGISModel.syncSelected(updatedSelectedValue, this.id);
-
-      this._notifyCommands();
-    }
-  };
-
-  resetSelected(type: SelectionType, nodeId?: string, item?: string) {
-    const selection: { [key: string]: ISelection } = {};
-    if (item && nodeId) {
-      selection[item] = {
-        type,
-        selectedNodeId: nodeId,
-      };
-      this._lastSelectedNodeId = nodeId;
-    }
-    this._model?.jGISModel?.syncSelected(selection, this.id);
-    this._notifyCommands();
-  }
-
-  private _notifyCommands() {
-    // Notify commands that need updating
-    this._commands.notifyCommandChanged(CommandIDs.identify);
-    this._commands.notifyCommandChanged(CommandIDs.temporalController);
-  }
-
-  private _handleFileChange: () => void;
-  private _currentModel: IJupyterGISModel | null;
-  private _lastSelectedNodeId: string;
-  private _model: IControlPanelModel;
-  private _state: IStateDB;
-  private _commands: CommandRegistry;
+interface ILeftPanelProps {
+  model: IJupyterGISModel;
+  state: IStateDB;
+  commands: CommandRegistry;
 }
 
-export namespace LeftPanelWidget {
-  export interface IOptions {
-    model: IControlPanelModel;
-    tracker: IJupyterGISTracker;
-    state: IStateDB;
-    commands: CommandRegistry;
-  }
-
-  export interface IProps {
-    filePath?: string;
-    sharedModel?: JupyterGISDoc;
-  }
-}
+export const LeftPanel: React.FC<ILeftPanelProps> = (
+  props: ILeftPanelProps,
+) => {
+  const tabInfo = [
+    { name: 'layers', title: 'Layers' },
+    { name: 'stac', title: 'Stac Browser' },
+    { name: 'filters', title: 'Filters' },
+  ];
+  const [curTab, setCurTab] = React.useState<string | undefined>(
+    tabInfo[0].name,
+  );
+
+  return (
+    <div className="jgis-left-panel-container">
+      <PanelTabs curTab={curTab} className="jgis-panel-tabs">
+        <TabsList>
+          {tabInfo.map(e => {
+            return (
+              <TabsTrigger
+                className="jGIS-layer-browser-category"
+                value={e.name}
+                onClick={() => {
+                  if (curTab !== e.name) {
+                    setCurTab(e.name);
+                  } else {
+                    setCurTab('');
+                  }
+                }}
+              >
+                {e.title}
+              </TabsTrigger>
+            );
+          })}
+        </TabsList>
+        <TabsContent
+          value="layers"
+          className="jgis-panel-tab-content jp-gis-layerPanel"
+        >
+          <LayersBodyComponent
+            model={props.model}
+            commands={props.commands}
+            state={props.state}
+          ></LayersBodyComponent>
+        </TabsContent>
+        <TabsContent value="stac">
+          <StacPanel model={props.model}></StacPanel>
+        </TabsContent>
+        <TabsContent value="filters" className="jgis-panel-tab-content">
+          <FilterComponent model={props.model}></FilterComponent>,
+        </TabsContent>
+      </PanelTabs>
+    </div>
+  );
+};
diff --git a/packages/base/src/panelview/model.ts b/packages/base/src/panelview/model.ts
deleted file mode 100644
index 03f8ff96d..000000000
--- a/packages/base/src/panelview/model.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import {
-  IJupyterGISDoc,
-  IJupyterGISModel,
-  IJupyterGISTracker,
-  IJupyterGISWidget,
-} from '@jupytergis/schema';
-import { ISignal } from '@lumino/signaling';
-
-import { IControlPanelModel } from '@/src/types';
-
-export class ControlPanelModel implements IControlPanelModel {
-  constructor(options: ControlPanelModel.IOptions) {
-    this._tracker = options.tracker;
-    this._documentChanged = this._tracker.currentChanged;
-  }
-
-  get documentChanged(): ISignal<IJupyterGISTracker, IJupyterGISWidget | null> {
-    return this._documentChanged;
-  }
-
-  get filePath(): string | undefined {
-    return this._tracker.currentWidget?.model.filePath;
-  }
-
-  get jGISModel(): IJupyterGISModel | undefined {
-    return this._tracker.currentWidget?.model;
-  }
-
-  get sharedModel(): IJupyterGISDoc | undefined {
-    return this._tracker.currentWidget?.model.sharedModel;
-  }
-
-  disconnect(f: any): void {
-    this._tracker.forEach(w => {
-      w.model.sharedLayersChanged.disconnect(f);
-      w.model.sharedSourcesChanged.disconnect(f);
-      w.model.sharedOptionsChanged.disconnect(f);
-    });
-    this._tracker.forEach(w => w.model.themeChanged.disconnect(f));
-    this._tracker.forEach(w => w.model.clientStateChanged.disconnect(f));
-  }
-
-  private readonly _tracker: IJupyterGISTracker;
-  private _documentChanged: ISignal<
-    IJupyterGISTracker,
-    IJupyterGISWidget | null
-  >;
-}
-
-namespace ControlPanelModel {
-  export interface IOptions {
-    tracker: IJupyterGISTracker;
-  }
-}
diff --git a/packages/base/src/panelview/objectproperties.tsx b/packages/base/src/panelview/objectproperties.tsx
index 86f57d73e..78b88d109 100644
--- a/packages/base/src/panelview/objectproperties.tsx
+++ b/packages/base/src/panelview/objectproperties.tsx
@@ -2,87 +2,46 @@ import {
   IJGISFormSchemaRegistry,
   IJupyterGISClientState,
   IJupyterGISModel,
-  IJupyterGISTracker,
 } from '@jupytergis/schema';
-import { ReactWidget } from '@jupyterlab/apputils';
-import { PanelWithToolbar } from '@jupyterlab/ui-components';
-import { Panel } from '@lumino/widgets';
 import * as React from 'react';
 import { v4 as uuid } from 'uuid';
 
 import { EditForm } from '@/src/formbuilder/editform';
-import { IControlPanelModel } from '@/src/types';
-
-export class ObjectProperties extends PanelWithToolbar {
-  constructor(params: ObjectProperties.IOptions) {
-    super(params);
-    this.title.label = 'Objects Properties';
-    const body = ReactWidget.create(
-      <ObjectPropertiesReact
-        cpModel={params.controlPanelModel}
-        tracker={params.tracker}
-        formSchemaRegistry={params.formSchemaRegistry}
-      />,
-    );
-    this.addWidget(body);
-    this.addClass('jGIS-sidebar-propertiespanel');
-  }
-}
 
 interface IStates {
   model: IJupyterGISModel | undefined;
-  selectedObject?: string;
   clientId: number | null; // ID of the yjs client
   id: string; // ID of the component, it is used to identify which component
-  //is the source of awareness updates.
+  selectedObject?: string;
+  setSelectedObject: any;
 }
 
 interface IProps {
-  cpModel: IControlPanelModel;
-  tracker: IJupyterGISTracker;
   formSchemaRegistry: IJGISFormSchemaRegistry;
+  model: IJupyterGISModel;
+  selectedObject: string | undefined;
+  setSelectedObject: any;
 }
 
-class ObjectPropertiesReact extends React.Component<IProps, IStates> {
+export class ObjectPropertiesReact extends React.Component<IProps, IStates> {
   constructor(props: IProps) {
     super(props);
     this.state = {
-      model: props.tracker.currentWidget?.model,
-      clientId: null,
+      clientId: props.model.getClientId(),
       id: uuid(),
+      model: props.model,
+      selectedObject: props.selectedObject,
+      setSelectedObject: props.setSelectedObject,
     };
 
-    this.props.cpModel.jGISModel?.sharedLayersChanged.connect(
-      this._sharedJGISModelChanged,
+    this.props.model.clientStateChanged.connect(
+      this._onClientSharedStateChanged,
     );
-    this.props.cpModel.jGISModel?.sharedSourcesChanged.connect(
+
+    this.props.model?.sharedLayersChanged.connect(this._sharedJGISModelChanged);
+    this.props.model?.sharedSourcesChanged.connect(
       this._sharedJGISModelChanged,
     );
-    this.props.cpModel.documentChanged.connect((_, changed) => {
-      if (changed) {
-        this.props.cpModel.disconnect(this._sharedJGISModelChanged);
-        this.props.cpModel.disconnect(this._onClientSharedStateChanged);
-
-        changed.model.sharedLayersChanged.connect(this._sharedJGISModelChanged);
-        changed.model.sharedSourcesChanged.connect(
-          this._sharedJGISModelChanged,
-        );
-        changed.model.clientStateChanged.connect(
-          this._onClientSharedStateChanged,
-        );
-        this.setState(old => ({
-          ...old,
-          model: changed.model,
-          filePath: changed.model.filePath,
-          clientId: changed.model.getClientId(),
-        }));
-      } else {
-        this.setState({
-          model: undefined,
-          selectedObject: undefined,
-        });
-      }
-    });
   }
 
   private _sharedJGISModelChanged = (): void => {
@@ -110,6 +69,7 @@ class ObjectPropertiesReact extends React.Component<IProps, IStates> {
       const selectedObjectIds = Object.keys(selection || {});
       // Only show object properties if ONE object is selected
       if (selection === undefined || selectedObjectIds.length !== 1) {
+        this.state.setSelectedObject(undefined);
         this.setState(old => ({
           ...old,
           selectedObject: undefined,
@@ -119,6 +79,7 @@ class ObjectPropertiesReact extends React.Component<IProps, IStates> {
 
       const selectedObject = selectedObjectIds[0];
       if (selectedObject !== this.state.selectedObject) {
+        this.state.setSelectedObject(selectedObject);
         this.setState(old => ({
           ...old,
           selectedObject,
@@ -131,7 +92,7 @@ class ObjectPropertiesReact extends React.Component<IProps, IStates> {
     const selectedObject = this.state.selectedObject;
 
     if (!selectedObject || !this.state.model) {
-      return <div></div>;
+      return <div style={{ textAlign: 'center' }}>No layer selected</div>;
     }
 
     let layerId: string | undefined = undefined;
@@ -158,14 +119,3 @@ class ObjectPropertiesReact extends React.Component<IProps, IStates> {
     );
   }
 }
-
-export namespace ObjectProperties {
-  /**
-   * Instantiation options for `ObjectProperties`.
-   */
-  export interface IOptions extends Panel.IOptions {
-    controlPanelModel: IControlPanelModel;
-    formSchemaRegistry: IJGISFormSchemaRegistry;
-    tracker: IJupyterGISTracker;
-  }
-}
diff --git a/packages/base/src/panelview/rightpanel.tsx b/packages/base/src/panelview/rightpanel.tsx
index 49d985c25..8e056468c 100644
--- a/packages/base/src/panelview/rightpanel.tsx
+++ b/packages/base/src/panelview/rightpanel.tsx
@@ -2,108 +2,82 @@ import {
   IAnnotationModel,
   IJGISFormSchemaRegistry,
   IJupyterGISModel,
-  IJupyterGISTracker,
-  JupyterGISDoc,
 } from '@jupytergis/schema';
-import { SidePanel } from '@jupyterlab/ui-components';
+import * as React from 'react';
 
-import { IControlPanelModel } from '@/src/types';
-import { Annotations } from './annotationPanel';
-import IdentifyPanel from './components/identify-panel/IdentifyPanel';
-import { ControlPanelHeader } from './header';
-import { ObjectProperties } from './objectproperties';
-
-export class RightPanelWidget extends SidePanel {
-  constructor(options: RightPanelWidget.IOptions) {
-    super();
-    this.addClass('jGIS-sidepanel-widget');
-    this.addClass('data-jgis-keybinding');
-    this.node.tabIndex = 0;
-
-    this._model = options.model;
-    this._annotationModel = options.annotationModel;
-
-    const header = new ControlPanelHeader();
-    this.header.addWidget(header);
-    const properties = new ObjectProperties({
-      controlPanelModel: this._model,
-      formSchemaRegistry: options.formSchemaRegistry,
-      tracker: options.tracker,
-    });
-
-    this.addWidget(properties);
-
-    const annotations = new Annotations({
-      rightPanelModel: this._model,
-      annotationModel: this._annotationModel,
-    });
-    this.addWidget(annotations);
-
-    const identifyPanel = new IdentifyPanel({
-      model: this._model,
-      tracker: options.tracker,
-    });
-    identifyPanel.title.caption = 'Identify';
-    identifyPanel.title.label = 'Identify';
-    identifyPanel.addClass('jgis-scrollable');
-    this.addWidget(identifyPanel);
+import { AnnotationsPanel } from './annotationPanel';
+import { IdentifyPanelComponent } from './components/identify-panel/IdentifyPanel';
+import { ObjectPropertiesReact } from './objectproperties';
+import {
+  PanelTabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '../shared/components/Tabs';
 
-    this._handleFileChange = () => {
-      header.title.label = this._currentModel?.filePath || '-';
-    };
+interface IRightPanelProps {
+  formSchemaRegistry: IJGISFormSchemaRegistry;
+  annotationModel: IAnnotationModel;
+  model: IJupyterGISModel;
+}
 
-    this._model.documentChanged.connect((_, changed) => {
-      if (changed) {
-        if (changed.model.sharedModel.editable) {
-          header.title.label = changed.model.filePath;
-          properties.show();
-        } else {
-          header.title.label = `${changed.model.filePath} - Read Only`;
-          properties.hide();
-        }
-      } else {
-        header.title.label = '-';
-      }
-    });
+export const RightPanel: React.FC<IRightPanelProps> = props => {
+  const [selectedObjectProperties, setSelectedObjectProperties] =
+    React.useState(undefined);
 
-    options.tracker.currentChanged.connect(async (_, changed) => {
-      if (changed) {
-        if (this._currentModel) {
-          this._currentModel.pathChanged.disconnect(this._handleFileChange);
-        }
-        this._currentModel = changed.model;
-        header.title.label = this._currentModel.filePath;
-        this._currentModel.pathChanged.connect(this._handleFileChange);
-        this._annotationModel.model =
-          options.tracker.currentWidget?.model || undefined;
-        // await changed.context.ready;
-      } else {
-        header.title.label = '-';
-        this._currentModel = null;
-        this._annotationModel.model = undefined;
-      }
-    });
-  }
+  const tabInfo = [
+    { name: 'objectProperties', title: 'Object Properties' },
+    { name: 'annotations', title: 'Annotations' },
+    { name: 'identifyPanel', title: 'Identify Features' },
+  ];
 
-  dispose(): void {
-    super.dispose();
-  }
+  const [curTab, setCurTab] = React.useState<string | undefined>(
+    tabInfo[0].name,
+  );
 
-  private _currentModel: IJupyterGISModel | null;
-  private _handleFileChange: () => void;
-  private _model: IControlPanelModel;
-  private _annotationModel: IAnnotationModel;
-}
-
-export namespace RightPanelWidget {
-  export interface IOptions {
-    model: IControlPanelModel;
-    tracker: IJupyterGISTracker;
-    formSchemaRegistry: IJGISFormSchemaRegistry;
-    annotationModel: IAnnotationModel;
-  }
-  export interface IProps {
-    filePath?: string;
-    sharedModel?: JupyterGISDoc;
-  }
-}
+  return (
+    <div className="jgis-right-panel-container">
+      <PanelTabs className="jgis-panel-tabs" curTab={curTab}>
+        <TabsList>
+          {tabInfo.map(e => {
+            return (
+              <TabsTrigger
+                className="jGIS-layer-browser-category"
+                value={e.name}
+                onClick={() => {
+                  if (curTab !== e.name) {
+                    setCurTab(e.name);
+                  } else {
+                    setCurTab('');
+                  }
+                }}
+              >
+                {e.title}
+              </TabsTrigger>
+            );
+          })}
+        </TabsList>
+        <TabsContent
+          value="objectProperties"
+          className="jgis-panel-tab-content"
+        >
+          <ObjectPropertiesReact
+            setSelectedObject={setSelectedObjectProperties}
+            selectedObject={selectedObjectProperties}
+            formSchemaRegistry={props.formSchemaRegistry}
+            model={props.model}
+          />
+        </TabsContent>
+        <TabsContent value="annotations">
+          <AnnotationsPanel
+            annotationModel={props.annotationModel}
+            jgisModel={props.model}
+          ></AnnotationsPanel>
+        </TabsContent>
+        <TabsContent value="identifyPanel" className="jgis-panel-tab-content">
+          <IdentifyPanelComponent model={props.model}></IdentifyPanelComponent>
+        </TabsContent>
+      </PanelTabs>
+    </div>
+  );
+};
diff --git a/packages/base/src/shared/components/Tabs.tsx b/packages/base/src/shared/components/Tabs.tsx
index a09fd4738..b9cab62a2 100644
--- a/packages/base/src/shared/components/Tabs.tsx
+++ b/packages/base/src/shared/components/Tabs.tsx
@@ -3,6 +3,11 @@ import * as React from 'react';
 
 import { cn } from './utils';
 
+interface IPanelTabProps {
+  className: string;
+  curTab: string | undefined;
+  children: any;
+}
 const Tabs: React.FC<React.ComponentProps<typeof TabsPrimitive.Root>> = ({
   className,
   ...props
@@ -16,6 +21,24 @@ const Tabs: React.FC<React.ComponentProps<typeof TabsPrimitive.Root>> = ({
   );
 };
 
+const PanelTabs: React.FC<IPanelTabProps> = ({
+  className,
+  curTab,
+  children,
+}) => {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn('TabsList', className)}
+      value={curTab}
+      onValueChange={() => {
+        return;
+      }}
+      children={children}
+    />
+  );
+};
+
 const TabsList: React.FC<React.ComponentProps<typeof TabsPrimitive.List>> = ({
   className,
   ...props
@@ -53,4 +76,4 @@ const TabsContent: React.FC<
   );
 };
 
-export { Tabs, TabsContent, TabsList, TabsTrigger };
+export { Tabs, TabsContent, TabsList, TabsTrigger, PanelTabs };
diff --git a/packages/base/src/stacBrowser/StacBrowser.tsx b/packages/base/src/stacBrowser/StacBrowser.tsx
deleted file mode 100644
index 5fa0ca456..000000000
--- a/packages/base/src/stacBrowser/StacBrowser.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import {
-  IJupyterGISModel,
-  IJupyterGISTracker,
-  IJupyterGISWidget,
-} from '@jupytergis/schema';
-import React, { useEffect, useState } from 'react';
-
-import StacPanelView from '@/src/stacBrowser/components/StacPanelView';
-import { IControlPanelModel } from '@/src/types';
-
-interface IStacBrowserDialogProps {
-  controlPanelModel: IControlPanelModel;
-}
-
-const StacBrowser = ({ controlPanelModel }: IStacBrowserDialogProps) => {
-  const [jgisModel, setJgisModel] = useState<IJupyterGISModel | undefined>(
-    controlPanelModel?.jGISModel,
-  );
-
-  useEffect(() => {
-    const handleCurrentChanged = (
-      _: IJupyterGISTracker,
-      widget: IJupyterGISWidget | null,
-    ) => {
-      setJgisModel(widget?.model);
-    };
-
-    controlPanelModel.documentChanged.connect(handleCurrentChanged);
-
-    return () => {
-      controlPanelModel.documentChanged.disconnect(handleCurrentChanged);
-    };
-  }, [controlPanelModel]);
-
-  return <StacPanelView model={jgisModel} />;
-};
-export default StacBrowser;
diff --git a/packages/base/src/stacBrowser/StacPanel.tsx b/packages/base/src/stacBrowser/StacPanel.tsx
deleted file mode 100644
index d8f2dfc78..000000000
--- a/packages/base/src/stacBrowser/StacPanel.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { IJupyterGISTracker } from '@jupytergis/schema';
-import { ReactWidget } from '@jupyterlab/ui-components';
-import { Panel } from '@lumino/widgets';
-import React from 'react';
-
-import StacBrowser from '@/src/stacBrowser/StacBrowser';
-import { IControlPanelModel } from '@/src/types';
-
-export class StacPanel extends Panel {
-  constructor(options: StacPanel.IOptions) {
-    super();
-    this._model = options.model;
-
-    this.id = 'jupytergis::stacPanel';
-    this.title.caption = 'STAC';
-    this.title.label = 'STAC';
-    this.addClass('jgis-scrollable');
-
-    this.addWidget(
-      ReactWidget.create(
-        <StacBrowser controlPanelModel={this._model}></StacBrowser>,
-      ),
-    );
-  }
-
-  private _model: IControlPanelModel | undefined;
-}
-
-export namespace StacPanel {
-  export interface IOptions {
-    model: IControlPanelModel;
-    tracker: IJupyterGISTracker;
-  }
-}
-
-export default StacPanel;
diff --git a/packages/base/src/stacBrowser/components/StacPanelView.tsx b/packages/base/src/stacBrowser/components/StacPanel.tsx
similarity index 92%
rename from packages/base/src/stacBrowser/components/StacPanelView.tsx
rename to packages/base/src/stacBrowser/components/StacPanel.tsx
index 06f3dcdba..db89cb31a 100644
--- a/packages/base/src/stacBrowser/components/StacPanelView.tsx
+++ b/packages/base/src/stacBrowser/components/StacPanel.tsx
@@ -14,7 +14,7 @@ import StacPanelResults from './StacPanelResults';
 interface IStacViewProps {
   model?: IJupyterGISModel;
 }
-const StacPanelView = ({ model }: IStacViewProps) => {
+const StacPanel = ({ model }: IStacViewProps) => {
   const {
     filterState,
     filterSetters,
@@ -39,7 +39,7 @@ const StacPanelView = ({ model }: IStacViewProps) => {
   }
 
   return (
-    <Tabs defaultValue="filters" className="jgis-stac-browser-main">
+    <Tabs defaultValue="filters" className="jgis-panel-tabs">
       <TabsList style={{ borderRadius: 0 }}>
         <TabsTrigger className="jGIS-layer-browser-category" value="filters">
           Filters
@@ -76,4 +76,4 @@ const StacPanelView = ({ model }: IStacViewProps) => {
   );
 };
 
-export default StacPanelView;
+export default StacPanel;
diff --git a/packages/base/src/stacBrowser/index.ts b/packages/base/src/stacBrowser/index.ts
index 2e8049a34..19e4e8a3e 100644
--- a/packages/base/src/stacBrowser/index.ts
+++ b/packages/base/src/stacBrowser/index.ts
@@ -1 +1 @@
-export * from './StacBrowser';
+export * from './components/StacPanel';
diff --git a/packages/base/src/types.ts b/packages/base/src/types.ts
index 3048db673..a0c9d872f 100644
--- a/packages/base/src/types.ts
+++ b/packages/base/src/types.ts
@@ -1,12 +1,5 @@
-import {
-  IDict,
-  IJupyterGISDoc,
-  IJupyterGISModel,
-  IJupyterGISTracker,
-  IJupyterGISWidget,
-} from '@jupytergis/schema';
+import { IDict, IJupyterGISWidget } from '@jupytergis/schema';
 import { WidgetTracker } from '@jupyterlab/apputils';
-import { ISignal } from '@lumino/signaling';
 import { Map } from 'ol';
 
 export { IDict };
@@ -14,14 +7,6 @@ export type ValueOf<T> = T[keyof T];
 
 export type JupyterGISTracker = WidgetTracker<IJupyterGISWidget>;
 
-export interface IControlPanelModel {
-  disconnect(f: any): void;
-  documentChanged: ISignal<IJupyterGISTracker, IJupyterGISWidget | null>;
-  filePath: string | undefined;
-  jGISModel: IJupyterGISModel | undefined;
-  sharedModel: IJupyterGISDoc | undefined;
-}
-
 export type SymbologyTab = 'color' | 'radius';
 
 export type VectorRenderType =
diff --git a/packages/base/src/widget.ts b/packages/base/src/widget.ts
index 474e114ae..21ba98d41 100644
--- a/packages/base/src/widget.ts
+++ b/packages/base/src/widget.ts
@@ -1,4 +1,6 @@
 import {
+  IAnnotationModel,
+  IJGISFormSchemaRegistry,
   IJupyterGISDocumentWidget,
   IJupyterGISModel,
   IJupyterGISOutputWidget,
@@ -7,6 +9,7 @@ import { MainAreaWidget } from '@jupyterlab/apputils';
 import { ConsolePanel, IConsoleTracker } from '@jupyterlab/console';
 import { DocumentWidget } from '@jupyterlab/docregistry';
 import { IObservableMap, ObservableMap } from '@jupyterlab/observables';
+import { IStateDB } from '@jupyterlab/statedb';
 import { CommandRegistry } from '@lumino/commands';
 import { JSONValue } from '@lumino/coreutils';
 import { MessageLoop } from '@lumino/messaging';
@@ -94,12 +97,20 @@ export namespace JupyterGISOutputWidget {
 }
 
 export class JupyterGISPanel extends SplitPanel {
-  constructor(options: JupyterGISPanel.IOptions) {
+  constructor({
+    model,
+    consoleTracker,
+    state,
+    commandRegistry,
+    formSchemaRegistry,
+    annotationModel,
+    ...consoleOption
+  }: JupyterGISPanel.IOptions) {
     super({ orientation: 'vertical', spacing: 0 });
-    const { model, consoleTracker, commandRegistry, ...consoleOption } =
-      options;
+
+    this._state = state;
     this._initModel({ model, commandRegistry });
-    this._initView();
+    this._initView(formSchemaRegistry, annotationModel);
     this._consoleOption = { commandRegistry, ...consoleOption };
     this._consoleTracker = consoleTracker;
   }
@@ -116,9 +127,15 @@ export class JupyterGISPanel extends SplitPanel {
     });
   }
 
-  _initView() {
+  _initView(
+    formSchemaRegistry?: IJGISFormSchemaRegistry,
+    annotationModel?: IAnnotationModel,
+  ) {
     this._jupyterGISMainViewPanel = new JupyterGISMainViewPanel({
       mainViewModel: this._mainViewModel,
+      state: this._state,
+      formSchemaRegistry: formSchemaRegistry,
+      annotationModel: annotationModel,
     });
     this.addWidget(this._jupyterGISMainViewPanel);
     SplitPanel.setStretch(this._jupyterGISMainViewPanel, 1);
@@ -233,6 +250,7 @@ export class JupyterGISPanel extends SplitPanel {
     }, 250);
   }
 
+  private _state: IStateDB | undefined;
   private _mainViewModel: MainViewModel;
   private _view: ObservableMap<JSONValue>;
   private _jupyterGISMainViewPanel: JupyterGISMainViewPanel;
@@ -246,6 +264,9 @@ export namespace JupyterGISPanel {
   export interface IOptions extends Partial<ConsoleView.IOptions> {
     model: IJupyterGISModel;
     commandRegistry: CommandRegistry;
+    state?: IStateDB;
     consoleTracker?: IConsoleTracker;
+    formSchemaRegistry?: IJGISFormSchemaRegistry;
+    annotationModel?: IAnnotationModel;
   }
 }
diff --git a/packages/base/style/base.css b/packages/base/style/base.css
index 71e35404a..7561673b6 100644
--- a/packages/base/style/base.css
+++ b/packages/base/style/base.css
@@ -10,7 +10,7 @@
 @import url('./symbologyDialog.css');
 @import url('./statusBar.css');
 @import url('./temporalSlider.css');
-@import url('./stacBrowser.css');
+@import url('./tabPanel.css');
 @import url('ol/ol.css');
 @import url('./shared/button.css');
 @import url('./shared/toggle.css');
@@ -34,7 +34,7 @@
 /* Overwrite forms CSS */
 .jGIS-property-panel .array-item-list {
   display: flex;
-  gap: 1rem;
+  background-color: var(--jp-layout-color0);
 }
 
 .jGIS-property-panel .rjsf .array-item:not(:last-child) {
@@ -85,3 +85,19 @@ button.jp-mod-styled.jp-mod-reject {
   white-space: nowrap;
   border-width: 0;
 }
+
+.jgis-right-panel-container {
+  width: 330px;
+  top: 30px;
+  right: 0px;
+  position: absolute;
+  margin: 5px;
+}
+
+.jgis-left-panel-container {
+  position: absolute;
+  width: 250px;
+  top: 30px;
+  left: 0px;
+  margin: 5px;
+}
diff --git a/packages/base/style/shared/tabs.css b/packages/base/style/shared/tabs.css
index fe5606cf8..b071a5926 100644
--- a/packages/base/style/shared/tabs.css
+++ b/packages/base/style/shared/tabs.css
@@ -1,14 +1,26 @@
+.jgis-panel-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--jp-layout-color0);
+  box-shadow:
+    0 4px 8px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  border-radius: 5px;
+}
 .jgis-tabs-list {
   display: inline-flex;
   height: 2.5rem;
   align-items: center;
   justify-content: space-evenly;
-  border-radius: 0.375rem;
   background-color: var(--jp-layout-color2);
-  padding: 0.25rem;
   color: var(--jp-ui-font-color0);
   gap: 1rem;
   width: 100%;
+  font-size: 9px;
+  border-radius: 5px;
 }
 
 .jgis-tabs-trigger {
@@ -47,6 +59,8 @@
 .jgis-tabs-content {
   outline: none;
   width: 100%;
+  overflow-y: scroll;
+  max-height: 480px;
 }
 
 .jgis-tabs-content:focus-visible {
diff --git a/packages/base/style/stacBrowser.css b/packages/base/style/stacBrowser.css
index 3085f83dd..9ff06b24c 100644
--- a/packages/base/style/stacBrowser.css
+++ b/packages/base/style/stacBrowser.css
@@ -1,9 +1,3 @@
-.jgis-stac-browser-main {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
 .jgis-stac-browser-collection {
   flex-wrap: wrap;
   margin-top: 0.5rem;
diff --git a/packages/base/style/tabPanel.css b/packages/base/style/tabPanel.css
new file mode 100644
index 000000000..5be5249f0
--- /dev/null
+++ b/packages/base/style/tabPanel.css
@@ -0,0 +1,91 @@
+.jgis-panel-tab-content {
+  border-radius: 5px;
+  font-size: 10px;
+  padding-bottom: 50px;
+}
+
+.jgis-stac-browser-collection {
+  flex-wrap: wrap;
+  margin-top: 0.5rem;
+}
+
+.jgis-stac-browser-section-item {
+  border-radius: 1rem !important;
+  cursor: pointer;
+}
+
+.jgis-stac-browser-results-item {
+  border-radius: 1rem !important;
+  cursor: pointer;
+  white-space: normal !important;
+  height: auto !important;
+}
+
+.jgis-stac-browser-results-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  word-break: break-word;
+  padding: 0.25rem;
+  margin-right: 0.5rem;
+}
+
+.jgis-stac-browser-date-picker {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.jgis-stac-browser-filters-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: flex-start;
+  padding: 0 0.5rem;
+}
+
+.jgis-stac-filter-trigger {
+  max-width: fit-content;
+  border: 1px solid var(--jp-border-color0);
+  padding: 0.5rem;
+  cursor: pointer;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  gap: 0.15rem;
+}
+
+.jgis-stac-filter-trigger:disabled {
+  cursor: not-allowed;
+}
+
+.jgis-stac-filter-section-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.jgis-stac-filter-section-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.jgis-stac-datepicker-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.jgis-stac-badge {
+  gap: 0.25rem;
+  padding-right: 0.3rem !important;
+}
+
+.jgis-stac-badge-icon:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--jp-error-color0),
+    transparent 20%
+  ) !important;
+}
diff --git a/packages/base/style/temporalSlider.css b/packages/base/style/temporalSlider.css
index 4df1df185..df15f3c79 100644
--- a/packages/base/style/temporalSlider.css
+++ b/packages/base/style/temporalSlider.css
@@ -5,6 +5,7 @@
   padding: 0.5rem;
   background-color: var(--jp-layout-color1);
   border-bottom: 1px solid var(--jp-border-color1);
+  z-index: 99;
 }
 
 .jp-gis-temporal-slider-container span,
diff --git a/python/jupytergis_core/src/factory.ts b/python/jupytergis_core/src/factory.ts
index a1a16979e..5817e5e6c 100644
--- a/python/jupytergis_core/src/factory.ts
+++ b/python/jupytergis_core/src/factory.ts
@@ -8,12 +8,15 @@ import {
   JupyterGISModel,
   IJupyterGISTracker,
   IJGISExternalCommandRegistry,
+  IJGISFormSchemaRegistry,
+  IAnnotationModel,
 } from '@jupytergis/schema';
 import { IEditorMimeTypeService } from '@jupyterlab/codeeditor';
 import { ConsolePanel, IConsoleTracker } from '@jupyterlab/console';
 import { ABCWidgetFactory, DocumentRegistry } from '@jupyterlab/docregistry';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { Contents, ServiceManager } from '@jupyterlab/services';
+import { IStateDB } from '@jupyterlab/statedb';
 import { CommandRegistry } from '@lumino/commands';
 
 interface IOptions extends DocumentRegistry.IWidgetFactoryOptions {
@@ -27,6 +30,9 @@ interface IOptions extends DocumentRegistry.IWidgetFactoryOptions {
   consoleTracker?: IConsoleTracker;
   backendCheck?: () => boolean;
   drive?: ICollaborativeDrive | null;
+  formSchemaRegistry: IJGISFormSchemaRegistry;
+  state: IStateDB;
+  annotationModel: IAnnotationModel;
 }
 
 export class JupyterGISDocumentWidgetFactory extends ABCWidgetFactory<
@@ -65,6 +71,7 @@ export class JupyterGISDocumentWidgetFactory extends ABCWidgetFactory<
     if (this._contentsManager) {
       model.contentsManager = this._contentsManager;
     }
+
     const content = new JupyterGISPanel({
       model,
       manager: this.options.manager,
@@ -73,13 +80,20 @@ export class JupyterGISDocumentWidgetFactory extends ABCWidgetFactory<
       rendermime: this.options.rendermime,
       consoleTracker: this.options.consoleTracker,
       commandRegistry: this.options.commands,
+      state: this.options.state,
+      formSchemaRegistry: this.options.formSchemaRegistry,
+      annotationModel: this.options.annotationModel,
     });
     const toolbar = new ToolbarWidget({
       commands: this._commands,
       model,
       externalCommands: this._externalCommandRegistry.getCommands(),
     });
-    return new JupyterGISDocumentWidget({ context, content, toolbar });
+    return new JupyterGISDocumentWidget({
+      context,
+      content,
+      toolbar,
+    });
   }
 
   private _commands: CommandRegistry;
diff --git a/python/jupytergis_core/src/jgisplugin/plugins.ts b/python/jupytergis_core/src/jgisplugin/plugins.ts
index d3c390680..f1139b060 100644
--- a/python/jupytergis_core/src/jgisplugin/plugins.ts
+++ b/python/jupytergis_core/src/jgisplugin/plugins.ts
@@ -13,6 +13,8 @@ import {
   JupyterGISDoc,
   SCHEMA_VERSION,
   ProcessingMerge,
+  IJGISFormSchemaRegistry,
+  IJGISFormSchemaRegistryToken,
 } from '@jupytergis/schema';
 import {
   JupyterFrontEnd,
@@ -31,6 +33,7 @@ import { IFileBrowserFactory } from '@jupyterlab/filebrowser';
 import { ILauncher } from '@jupyterlab/launcher';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { IStateDB } from '@jupyterlab/statedb';
 
 import { JupyterGISDocumentWidgetFactory } from '../factory';
 import { JupyterGISModelFactory } from './modelfactory';
@@ -53,10 +56,13 @@ const activate = async (
   consoleTracker: IConsoleTracker,
   annotationModel: IAnnotationModel,
   settingRegistry: ISettingRegistry,
+  formSchemaRegistry: IJGISFormSchemaRegistry,
+  state: IStateDB,
   launcher: ILauncher | null,
   palette: ICommandPalette | null,
   drive: ICollaborativeDrive | null,
 ): Promise<void> => {
+  formSchemaRegistry && state;
   if (PageConfig.getOption('jgis_expose_maps')) {
     window.jupytergisMaps = {};
   }
@@ -82,7 +88,10 @@ const activate = async (
     contentFactory,
     rendermime,
     mimeTypeService: editorServices.mimeTypeService,
+    formSchemaRegistry: formSchemaRegistry,
     consoleTracker,
+    state: state,
+    annotationModel: annotationModel,
   });
 
   // Registering the widget factory
@@ -261,6 +270,8 @@ const jGISPlugin: JupyterFrontEndPlugin<void> = {
     IConsoleTracker,
     IAnnotationToken,
     ISettingRegistry,
+    IJGISFormSchemaRegistryToken,
+    IStateDB,
   ],
   optional: [ILauncher, ICommandPalette, ICollaborativeDrive],
   autoStart: true,
diff --git a/python/jupytergis_lab/src/index.ts b/python/jupytergis_lab/src/index.ts
index 205f4b7c3..33c76502d 100644
--- a/python/jupytergis_lab/src/index.ts
+++ b/python/jupytergis_lab/src/index.ts
@@ -1,30 +1,22 @@
 import {
   CommandIDs,
-  ControlPanelModel,
   GlobalStateDbManager,
-  LeftPanelWidget,
-  RightPanelWidget,
   addCommands,
   createDefaultLayerRegistry,
-  logoMiniIcon,
   rasterSubMenu,
   vectorSubMenu,
 } from '@jupytergis/base';
 import {
-  IAnnotationModel,
-  IAnnotationToken,
   IJGISFormSchemaRegistry,
   IJGISFormSchemaRegistryToken,
   IJGISLayerBrowserRegistry,
   IJGISLayerBrowserRegistryToken,
   IJGISLayerItem,
   IJupyterGISDocTracker,
-  IJupyterGISTracker,
   IJupyterGISWidget,
   ProcessingMerge,
 } from '@jupytergis/schema';
 import {
-  ILayoutRestorer,
   JupyterFrontEnd,
   JupyterFrontEndPlugin,
 } from '@jupyterlab/application';
@@ -37,8 +29,6 @@ import { ContextMenu, Menu } from '@lumino/widgets';
 
 import { notebookRendererPlugin } from './notebookrenderer';
 
-const NAME_SPACE = 'jupytergis';
-
 const plugin: JupyterFrontEndPlugin<void> = {
   id: 'jupytergis:lab:main-menu',
   autoStart: true,
@@ -225,55 +215,6 @@ const plugin: JupyterFrontEndPlugin<void> = {
   },
 };
 
-const controlPanel: JupyterFrontEndPlugin<void> = {
-  id: 'jupytergis:lab:controlpanel',
-  autoStart: true,
-  requires: [
-    ILayoutRestorer,
-    IJupyterGISDocTracker,
-    IJGISFormSchemaRegistryToken,
-    IStateDB,
-    IAnnotationToken,
-  ],
-  activate: (
-    app: JupyterFrontEnd,
-    restorer: ILayoutRestorer,
-    tracker: IJupyterGISTracker,
-    formSchemaRegistry: IJGISFormSchemaRegistry,
-    state: IStateDB,
-    annotationModel: IAnnotationModel,
-  ) => {
-    const controlModel = new ControlPanelModel({ tracker });
-
-    const leftControlPanel = new LeftPanelWidget({
-      model: controlModel,
-      tracker,
-      state,
-      commands: app.commands,
-    });
-    leftControlPanel.id = 'jupytergis::leftControlPanel';
-    leftControlPanel.title.caption = 'JupyterGIS Control Panel';
-    leftControlPanel.title.icon = logoMiniIcon;
-
-    const rightControlPanel = new RightPanelWidget({
-      model: controlModel,
-      tracker,
-      formSchemaRegistry,
-      annotationModel,
-    });
-    rightControlPanel.id = 'jupytergis::rightControlPanel';
-    rightControlPanel.title.caption = 'JupyterGIS Control Panel';
-    rightControlPanel.title.icon = logoMiniIcon;
-
-    if (restorer) {
-      restorer.add(leftControlPanel, `${NAME_SPACE}-left`);
-      restorer.add(rightControlPanel, `${NAME_SPACE}-right`);
-    }
-    app.shell.add(leftControlPanel, 'left', { rank: 2000 });
-    app.shell.add(rightControlPanel, 'right', { rank: 2000 });
-  },
-};
-
 /**
  * Populates the application menus for the notebook.
  */
@@ -360,4 +301,4 @@ function buildGroupsMenu(
   });
 }
 
-export default [plugin, controlPanel, notebookRendererPlugin];
+export default [plugin, notebookRendererPlugin];
diff --git a/python/jupytergis_lab/src/notebookrenderer.ts b/python/jupytergis_lab/src/notebookrenderer.ts
index e86b9d751..50915250a 100644
--- a/python/jupytergis_lab/src/notebookrenderer.ts
+++ b/python/jupytergis_lab/src/notebookrenderer.ts
@@ -11,6 +11,10 @@ import {
   IJupyterGISDoc,
   IJupyterGISDocTracker,
   JupyterGISModel,
+  IJGISFormSchemaRegistry,
+  IAnnotationModel,
+  IJGISFormSchemaRegistryToken,
+  IAnnotationToken,
 } from '@jupytergis/schema';
 import {
   JupyterFrontEnd,
@@ -21,6 +25,7 @@ import { ConsolePanel } from '@jupyterlab/console';
 import { PathExt } from '@jupyterlab/coreutils';
 import { NotebookPanel } from '@jupyterlab/notebook';
 import { Contents } from '@jupyterlab/services';
+import { IStateDB } from '@jupyterlab/statedb';
 import { Toolbar } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
 import { MessageLoop } from '@lumino/messaging';
@@ -80,8 +85,22 @@ export class YJupyterGISLuminoWidget extends Panel {
    * @param options
    */
   private _buildWidget = (options: IOptions) => {
-    const { commands, model, externalCommands, tracker } = options;
-    const content = new JupyterGISPanel({ model, commandRegistry: commands });
+    const {
+      commands,
+      model,
+      externalCommands,
+      tracker,
+      formSchemaRegistry,
+      state,
+      annotationModel,
+    } = options;
+    const content = new JupyterGISPanel({
+      model,
+      commandRegistry: commands,
+      formSchemaRegistry,
+      state,
+      annotationModel,
+    });
     let toolbar: Toolbar | undefined = undefined;
     if (model.filePath) {
       toolbar = new ToolbarWidget({
@@ -107,6 +126,9 @@ interface IOptions {
   model: JupyterGISModel;
   externalCommands?: IJGISExternalCommandRegistry;
   tracker?: JupyterGISTracker;
+  formSchemaRegistry?: IJGISFormSchemaRegistry;
+  state?: IStateDB;
+  annotationModel?: IAnnotationModel;
 }
 
 export const notebookRendererPlugin: JupyterFrontEndPlugin<void> = {
@@ -117,6 +139,9 @@ export const notebookRendererPlugin: JupyterFrontEndPlugin<void> = {
     IJupyterGISDocTracker,
     IJupyterYWidgetManager,
     ICollaborativeDrive,
+    IStateDB,
+    IJGISFormSchemaRegistryToken,
+    IAnnotationToken,
   ],
   activate: (
     app: JupyterFrontEnd,
@@ -124,6 +149,9 @@ export const notebookRendererPlugin: JupyterFrontEndPlugin<void> = {
     jgisTracker?: JupyterGISTracker,
     yWidgetManager?: IJupyterYWidgetManager,
     drive?: ICollaborativeDrive,
+    formSchemaRegistry?: IJGISFormSchemaRegistry,
+    state?: IStateDB,
+    annotationModel?: IAnnotationModel,
   ): void => {
     if (!yWidgetManager) {
       console.error('Missing IJupyterYWidgetManager token!');
@@ -204,7 +232,11 @@ export const notebookRendererPlugin: JupyterFrontEndPlugin<void> = {
           commands: app.commands,
           model: yModel.jupyterGISModel,
           externalCommands: externalCommandRegistry,
+
           tracker: jgisTracker,
+          annotationModel,
+          state,
+          formSchemaRegistry,
         });
         this._jgisWidget = widget.jgisWidget;
 
diff --git a/python/jupytergis_qgis/src/plugins.ts b/python/jupytergis_qgis/src/plugins.ts
index 00008cdec..21e5141ce 100644
--- a/python/jupytergis_qgis/src/plugins.ts
+++ b/python/jupytergis_qgis/src/plugins.ts
@@ -17,6 +17,8 @@ import {
   IJupyterGISWidget,
   IAnnotationModel,
   IAnnotationToken,
+  IJGISFormSchemaRegistry,
+  IJGISFormSchemaRegistryToken,
 } from '@jupytergis/schema';
 import {
   JupyterFrontEnd,
@@ -36,6 +38,7 @@ import { ConsolePanel, IConsoleTracker } from '@jupyterlab/console';
 import { PathExt } from '@jupyterlab/coreutils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { IStateDB } from '@jupyterlab/statedb';
 import { Widget } from '@lumino/widgets';
 
 import { QGSModelFactory, QGZModelFactory } from './modelfactory';
@@ -80,6 +83,8 @@ const activate = async (
   consoleTracker: IConsoleTracker,
   annotationModel: IAnnotationModel,
   settingRegistry: ISettingRegistry,
+  formSchemaRegistry: IJGISFormSchemaRegistry,
+  state: IStateDB,
   commandPalette: ICommandPalette | null,
 ): Promise<void> => {
   const fcCheck = await requestAPI<{ installed: boolean }>(
@@ -113,6 +118,9 @@ const activate = async (
     rendermime,
     mimeTypeService: editorServices.mimeTypeService,
     consoleTracker,
+    formSchemaRegistry,
+    state,
+    annotationModel,
   });
   const QGZWidgetFactory = new JupyterGISDocumentWidgetFactory({
     name: 'JupyterGIS QGZ Factory',
@@ -128,6 +136,9 @@ const activate = async (
     rendermime,
     mimeTypeService: editorServices.mimeTypeService,
     consoleTracker,
+    formSchemaRegistry,
+    state,
+    annotationModel,
   });
 
   // Registering the widget factory
@@ -285,7 +296,9 @@ const activate = async (
         } else if (response.logs.warnings.length) {
           const bodyElement = document.createElement('pre');
           bodyElement.textContent = `${filepath} has been exported with warnings\n  - ${response.logs.warnings.join('\n  - ')}`;
-          const body = new Widget({ node: bodyElement });
+          const body = new Widget({
+            node: bodyElement,
+          });
           await showDialog<HTMLPreElement>({
             title: 'Export the project to QGZ file',
             body,
@@ -319,6 +332,8 @@ export const qgisplugin: JupyterFrontEndPlugin<void> = {
     IConsoleTracker,
     IAnnotationToken,
     ISettingRegistry,
+    IJGISFormSchemaRegistryToken,
+    IStateDB,
   ],
   optional: [ICommandPalette],
   autoStart: true,
diff --git a/ui-tests/tests/annotations.spec.ts b/ui-tests/tests/annotations.spec.ts
index d6d7e8f6a..38f3ff237 100644
--- a/ui-tests/tests/annotations.spec.ts
+++ b/ui-tests/tests/annotations.spec.ts
@@ -23,31 +23,42 @@ test.describe('#annotations', () => {
     const main = page.locator('.jGIS-Mainview');
     await expect(main).toBeVisible();
 
-    await page.locator('canvas').click({
-      button: 'right',
-      position: {
-        x: 253,
-        y: 194,
-      },
+    await page.getByText('Annotations').click();
+    await page.evaluate(() => {
+      const el = document.querySelector('canvas');
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      el.dispatchEvent(
+        new MouseEvent('contextmenu', {
+          bubbles: true,
+          cancelable: true,
+          button: 2,
+          clientX: rect.left + 10,
+          clientY: rect.top + 10,
+        }),
+      );
     });
+
     await page.getByText('Add annotation').click();
     await page
       .getByLabel('annotation-test.jGIS')
       .getByPlaceholder('Ctrl+Enter to submit')
+      .first()
       .click();
     await page
       .getByLabel('annotation-test.jGIS')
       .getByPlaceholder('Ctrl+Enter to submit')
+      .first()
       .fill('this is a test');
     await page
-      .getByRole('region', { name: 'notebook content' })
-      .getByRole('button')
+      .locator('.jGIS-Annotation-Buttons')
+      .locator('button')
       .nth(1)
       .click();
 
     // Check map
     await expect(
-      page.getByLabel('annotation-test.jGIS').getByRole('paragraph'),
+      page.locator('.jGIS-Annotation-Message').first(),
     ).toContainText('this is a test');
 
     // Check side panel
@@ -57,8 +68,8 @@ test.describe('#annotations', () => {
 
     // Delete
     await page
-      .getByRole('region', { name: 'notebook content' })
-      .getByRole('button')
+      .locator('.jGIS-Annotation-Buttons')
+      .locator('button')
       .first()
       .click();
     await page.getByRole('button', { name: 'Delete' }).click();
diff --git a/ui-tests/tests/filters.spec.ts b/ui-tests/tests/filters.spec.ts
index ce3cef02a..8a4c47d5b 100644
--- a/ui-tests/tests/filters.spec.ts
+++ b/ui-tests/tests/filters.spec.ts
@@ -26,6 +26,7 @@ test.describe('#filters', () => {
     /// Open Layer
     await page.getByText('Custom GeoJSON Layer', { exact: true }).click();
 
+    await page.getByText('Filters').click();
     // Add first filter
     await page.getByRole('button', { name: 'Add' }).click();
     await page.locator('#jp-gis-feature-select-0').selectOption('mag');
diff --git a/ui-tests/tests/filters.spec.ts-snapshots/no-filter-chromium-linux.png b/ui-tests/tests/filters.spec.ts-snapshots/no-filter-chromium-linux.png
index a11243ac6..9696d6b2d 100644
Binary files a/ui-tests/tests/filters.spec.ts-snapshots/no-filter-chromium-linux.png and b/ui-tests/tests/filters.spec.ts-snapshots/no-filter-chromium-linux.png differ
diff --git a/ui-tests/tests/filters.spec.ts-snapshots/no-filter-linux.png b/ui-tests/tests/filters.spec.ts-snapshots/no-filter-linux.png
new file mode 100644
index 000000000..4560370fe
Binary files /dev/null and b/ui-tests/tests/filters.spec.ts-snapshots/no-filter-linux.png differ
diff --git a/ui-tests/tests/filters.spec.ts-snapshots/one-filter-chromium-linux.png b/ui-tests/tests/filters.spec.ts-snapshots/one-filter-chromium-linux.png
index bb5f5853e..2852bee1d 100644
Binary files a/ui-tests/tests/filters.spec.ts-snapshots/one-filter-chromium-linux.png and b/ui-tests/tests/filters.spec.ts-snapshots/one-filter-chromium-linux.png differ
diff --git a/ui-tests/tests/filters.spec.ts-snapshots/one-filter-linux.png b/ui-tests/tests/filters.spec.ts-snapshots/one-filter-linux.png
new file mode 100644
index 000000000..fd55e38d0
Binary files /dev/null and b/ui-tests/tests/filters.spec.ts-snapshots/one-filter-linux.png differ
diff --git a/ui-tests/tests/filters.spec.ts-snapshots/two-filter-chromium-linux.png b/ui-tests/tests/filters.spec.ts-snapshots/two-filter-chromium-linux.png
index 23ffad6e1..0a9d20668 100644
Binary files a/ui-tests/tests/filters.spec.ts-snapshots/two-filter-chromium-linux.png and b/ui-tests/tests/filters.spec.ts-snapshots/two-filter-chromium-linux.png differ
diff --git a/ui-tests/tests/filters.spec.ts-snapshots/two-filter-linux.png b/ui-tests/tests/filters.spec.ts-snapshots/two-filter-linux.png
new file mode 100644
index 000000000..c62687e6f
Binary files /dev/null and b/ui-tests/tests/filters.spec.ts-snapshots/two-filter-linux.png differ
diff --git a/ui-tests/tests/geojson-layers.spec.ts-snapshots/geoJSON-layer-chromium-linux.png b/ui-tests/tests/geojson-layers.spec.ts-snapshots/geoJSON-layer-chromium-linux.png
index 0e3b4712d..a98985e95 100644
Binary files a/ui-tests/tests/geojson-layers.spec.ts-snapshots/geoJSON-layer-chromium-linux.png and b/ui-tests/tests/geojson-layers.spec.ts-snapshots/geoJSON-layer-chromium-linux.png differ
diff --git a/ui-tests/tests/left-panel.spec.ts b/ui-tests/tests/left-panel.spec.ts
index 7f948430d..89cfc298c 100644
--- a/ui-tests/tests/left-panel.spec.ts
+++ b/ui-tests/tests/left-panel.spec.ts
@@ -7,24 +7,9 @@ import {
 import { Locator } from '@playwright/test';
 import path from 'path';
 
-async function openLeftPanel(page: IJupyterLabPageFixture): Promise<Locator> {
-  const sidePanel = page.locator('#jupytergis\\:\\:leftControlPanel');
-  if (!(await sidePanel.isVisible())) {
-    const panelIcon = page.getByTitle('JupyterGIS Control Panel');
-    await panelIcon.first().click();
-    await page.waitForCondition(async () => await sidePanel.isVisible());
-  }
-  return sidePanel;
-}
-
 async function openLayerTree(page: IJupyterLabPageFixture): Promise<Locator> {
-  const sidePanel = await openLeftPanel(page);
-  const layerTree = sidePanel.locator('.jp-gis-layerPanel');
-  if (!(await layerTree.isVisible())) {
-    const layerTitle = sidePanel.getByTitle('Layer tree');
-    await layerTitle.click();
-    await page.waitForCondition(async () => await layerTree.isVisible());
-  }
+  const layerTree = page.locator('#jp-gis-layer-tree');
+  expect(await layerTree.isVisible());
   return layerTree;
 }
 
@@ -33,6 +18,7 @@ async function getOpenLayerIds(
 ): Promise<string[]> {
   return await page.evaluate(() => {
     const olMap = Object.values(window.jupytergisMaps)[0];
+    console.log(jupytergisMaps);
     return olMap
       .getLayers()
       .getArray()
@@ -52,28 +38,7 @@ async function getOpenLayerVisibility(
   });
 }
 
-test.describe('#overview', () => {
-  test('should have a left panel', async ({ page }) => {
-    const panelIcon = page.getByTitle('JupyterGIS Control Panel');
-    await expect(panelIcon).toHaveCount(2);
-
-    await panelIcon.first().click();
-
-    const sidePanel = page.locator('#jupytergis\\:\\:leftControlPanel');
-    await expect(sidePanel).toBeVisible();
-
-    await expect(sidePanel.getByTitle('Layer tree')).toHaveCount(1);
-  });
-});
-
 test.describe('#layerPanel', () => {
-  test.describe('without GIS document', () => {
-    test('should have empty layer panel', async ({ page }) => {
-      const layerTree = await openLayerTree(page);
-      await expect(layerTree).toBeEmpty();
-    });
-  });
-
   test.describe('with GIS document', () => {
     test.beforeAll(async ({ request }) => {
       const content = galata.newContentsHelper(request);
@@ -96,12 +61,6 @@ test.describe('#layerPanel', () => {
       await expect(layerTree).not.toBeEmpty();
     });
 
-    test('should restore empty layer panel', async ({ page }) => {
-      const layerTree = await openLayerTree(page);
-      await page.activity.closeAll();
-      await expect(layerTree).toBeEmpty();
-    });
-
     test('raster layer should have icons', async ({ page }) => {
       const layerTree = await openLayerTree(page);
       const layerIcons = layerTree.locator(
@@ -197,83 +156,5 @@ test.describe('#layerPanel', () => {
       const showLayerButton = layerTree.getByTitle('Show layer');
       await showLayerButton.last().click();
     });
-
-    test('drag indicator should move', async ({ page }) => {
-      const dragIndicatorId = 'jp-drag-indicator';
-      const layerTree = await openLayerTree(page);
-      const layerPanel = layerTree.locator('#jp-gis-layer-tree');
-      const layers = layerTree.locator('.jp-gis-layer');
-      const layerItems = layerTree.locator('.jp-gis-layerItem');
-      const layerGroup = layerTree.locator('.jp-gis-layerGroup');
-      const dragIndicator = layerTree.locator(`#${dragIndicatorId}`);
-
-      // Open the first level group
-      await layerGroup.last().click();
-      await page.waitForCondition(async () => (await layerGroup.count()) === 2);
-      // Open the second level group
-      await layerGroup.last().click();
-      await page.waitForCondition(async () => (await layerItems.count()) === 5);
-
-      const topLayerBox = await layers.nth(1).boundingBox();
-      const firstItemBox = await layerItems.first().boundingBox();
-
-      await page.mouse.move(topLayerBox!.x + 10, topLayerBox!.y + 10);
-      await page.mouse.down();
-      await page.mouse.move(firstItemBox!.x + 10, firstItemBox!.y + 10);
-      // We need to force hover
-      await layerItems.first().hover({ position: { x: 10, y: 10 } });
-
-      await expect(dragIndicator).toBeVisible();
-
-      let children = await layerPanel.evaluate(div => div.children);
-      expect(children[0].id === dragIndicatorId);
-
-      await page.mouse.move(
-        firstItemBox!.x + 10,
-        firstItemBox!.y + firstItemBox!.height - 10,
-      );
-      // We need to force hover
-      await layerItems
-        .first()
-        .hover({ position: { x: 10, y: firstItemBox!.height - 10 } });
-
-      children = await layerPanel.evaluate(div => div.children);
-      expect(children[1].id === dragIndicatorId);
-    });
-
-    test('should move the top raster layer using drag and drop', async ({
-      page,
-    }) => {
-      const layerTree = await openLayerTree(page);
-      const layers = layerTree.locator('.jp-gis-layer');
-      const layerGroup = layerTree.locator('.jp-gis-layerGroup');
-
-      // Wait for the map to be loaded;
-      await page.waitForCondition(
-        async () => (await getOpenLayerIds(page)).length === 3,
-      );
-
-      const layerIds = await getOpenLayerIds(page);
-
-      // Open the first level group
-      await layerGroup.last().click();
-      await page.waitForCondition(async () => (await layerGroup.count()) === 2);
-
-      const topLayerBox = await layers.first().boundingBox();
-      const lowLayerBox = await layers.last().boundingBox();
-      await page.mouse.move(topLayerBox!.x + 10, topLayerBox!.y + 10);
-      await page.mouse.down();
-      await page.mouse.move(
-        lowLayerBox!.x + 10,
-        lowLayerBox!.y + lowLayerBox!.height + 10,
-      );
-      await page.mouse.up();
-
-      const newLayerIds = await getOpenLayerIds(page);
-
-      // expect 2 layers to be inverted
-      expect(newLayerIds[0]).toBe(layerIds[1]);
-      expect(newLayerIds[1]).toBe(layerIds[0]);
-    });
   });
 });
diff --git a/ui-tests/tests/lite.spec.ts-snapshots/Render-notebook-chromium-linux.png b/ui-tests/tests/lite.spec.ts-snapshots/Render-notebook-chromium-linux.png
index dc8b53d24..f544e4ed2 100644
Binary files a/ui-tests/tests/lite.spec.ts-snapshots/Render-notebook-chromium-linux.png and b/ui-tests/tests/lite.spec.ts-snapshots/Render-notebook-chromium-linux.png differ
diff --git a/ui-tests/tests/lite.spec.ts-snapshots/Render-shapefile-jGIS-chromium-linux.png b/ui-tests/tests/lite.spec.ts-snapshots/Render-shapefile-jGIS-chromium-linux.png
index 1b339a9e8..a5022416e 100644
Binary files a/ui-tests/tests/lite.spec.ts-snapshots/Render-shapefile-jGIS-chromium-linux.png and b/ui-tests/tests/lite.spec.ts-snapshots/Render-shapefile-jGIS-chromium-linux.png differ
diff --git a/ui-tests/tests/lite.spec.ts-snapshots/Render-test-jGIS-chromium-linux.png b/ui-tests/tests/lite.spec.ts-snapshots/Render-test-jGIS-chromium-linux.png
index 7455d20ba..41f77ff25 100644
Binary files a/ui-tests/tests/lite.spec.ts-snapshots/Render-test-jGIS-chromium-linux.png and b/ui-tests/tests/lite.spec.ts-snapshots/Render-test-jGIS-chromium-linux.png differ
diff --git a/ui-tests/tests/new-file.spec.ts b/ui-tests/tests/new-file.spec.ts
index 5f96525f9..6dba9adb0 100644
--- a/ui-tests/tests/new-file.spec.ts
+++ b/ui-tests/tests/new-file.spec.ts
@@ -6,13 +6,12 @@ test.describe('#newFile', () => {
   });
 
   test('New file should open with no errors', async ({ page }) => {
-    await page.getByLabel('notebook content').getByText('GIS Project').click();
+    await page.getByText('GIS Project').click();
+    const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 
-    const tab = page.getByLabel('notebook content');
     const layers = page.getByText('Layers', { exact: true });
     const map = page.locator('.ol-unselectable').first();
 
-    await expect(tab).toBeVisible();
     await expect(layers).toBeVisible();
     await expect(map).toBeAttached();
   });
diff --git a/ui-tests/tests/notebook.spec.ts b/ui-tests/tests/notebook.spec.ts
index c45aed4d1..b56b76c3b 100644
--- a/ui-tests/tests/notebook.spec.ts
+++ b/ui-tests/tests/notebook.spec.ts
@@ -9,7 +9,9 @@ const testCellOutputs = async (
   tmpPath: string,
   theme: 'JupyterLab Light' | 'JupyterLab Dark',
 ) => {
-  const paths = klaw(path.resolve(__dirname, './notebooks'), { nodir: true });
+  const paths = klaw(path.resolve(__dirname, './notebooks'), {
+    nodir: true,
+  });
   const notebooks = paths.map(item => path.basename(item.path));
 
   const contextPrefix = theme == 'JupyterLab Light' ? 'light' : 'dark';
@@ -22,9 +24,6 @@ const testCellOutputs = async (
     await page.notebook.activate(notebook);
 
     await page.waitForTimeout(1000);
-    if (await page.getByRole('button', { name: 'Ok' }).isVisible()) {
-      await page.getByRole('button', { name: 'Ok' }).click();
-    }
     let numCellImages = 0;
 
     const getCaptureImageName = (
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-0-chromium-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-0-chromium-linux.png
index c4bca1e50..fdf6fb68f 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-0-chromium-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-0-chromium-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-1-chromium-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-1-chromium-linux.png
index c66542ecd..f2723d5ad 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-1-chromium-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-1-chromium-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-2-chromium-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-2-chromium-linux.png
index 3fc598efc..30671d7c9 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-2-chromium-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-2-chromium-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-3-chromium-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-3-chromium-linux.png
index 29733e4de..c5427f1aa 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-3-chromium-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-3-chromium-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-0-chromium-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-0-chromium-linux.png
index 18bf84cb1..b86800e94 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-0-chromium-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-0-chromium-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-1-chromium-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-1-chromium-linux.png
index deb3199e6..ff90e001d 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-1-chromium-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-1-chromium-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-2-chromium-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-2-chromium-linux.png
index dc9495847..13b84be0e 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-2-chromium-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-2-chromium-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-3-chromium-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-3-chromium-linux.png
index 9fb07dd90..f0d697de7 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-3-chromium-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-3-chromium-linux.png differ
diff --git a/ui-tests/tests/stac-browser.spec.ts b/ui-tests/tests/stac-browser.spec.ts
index ffc41a862..ea3346d11 100644
--- a/ui-tests/tests/stac-browser.spec.ts
+++ b/ui-tests/tests/stac-browser.spec.ts
@@ -70,6 +70,8 @@ test.describe('#stac-browser', () => {
     const main = page.locator('.jGIS-Mainview');
     await expect(main).toBeVisible();
 
+    await page.getByText('Stac Browser').click();
+
     await page.getByRole('button', { name: 'Collection' }).click();
     await page.getByRole('menuitem', { name: 'Sentinel 2' }).hover();
     await page.getByRole('menuitemcheckbox', { name: 'PEPS_S2_L1C' }).click();
diff --git a/ui-tests/tests/ui.spec.ts b/ui-tests/tests/ui.spec.ts
index 7a7dbced9..9d2e7bf9d 100644
--- a/ui-tests/tests/ui.spec.ts
+++ b/ui-tests/tests/ui.spec.ts
@@ -49,17 +49,19 @@ test.describe('UI Test', () => {
         await page.notebook.activate(fullPath);
         await page.locator('div.jGIS-Spinner').waitFor({ state: 'hidden' });
         await page.waitForTimeout(1000);
-        if (await page.getByRole('button', { name: 'Ok' }).isVisible()) {
-          await page.getByRole('button', { name: 'Ok' }).click();
+        if (
+          await page
+            .getByRole('button', {
+              name: 'Ok',
+            })
+            .isVisible()
+        ) {
+          await page
+            .getByRole('button', {
+              name: 'Ok',
+            })
+            .click();
         }
-        await page
-          .getByRole('tablist', { name: 'main sidebar' })
-          .getByRole('tab', { name: 'JupyterGIS Control Panel' })
-          .click();
-        await page
-          .getByRole('tablist', { name: 'alternate sidebar' })
-          .getByRole('tab', { name: 'JupyterGIS Control Panel' })
-          .click();
         await page.waitForTimeout(1000);
         expect(errors).toBe(0);