diff --git a/packages/completer-extension/src/index.ts b/packages/completer-extension/src/index.ts
index 31b08acadcce..c41df4493565 100644
--- a/packages/completer-extension/src/index.ts
+++ b/packages/completer-extension/src/index.ts
@@ -136,10 +136,11 @@ const consoles: JupyterFrontEndPlugin<void> = {
   ): void => {
     // Create a handler for each console that is created.
     consoles.widgetAdded.connect((sender, widget) => {
-      const anchor = widget.content.console;
+      const anchor = widget.console;
       const editor = anchor.promptCell?.editor ?? null;
       const session = anchor.sessionContext.session;
       // TODO: CompletionConnector assumes editor and session are not null
+
       const connector = new CompletionConnector({ session, editor });
       const handler = manager.register({ connector, editor, parent: widget });
 
diff --git a/packages/console-extension/src/foreign.ts b/packages/console-extension/src/foreign.ts
index 5158cdc2142f..1be32fe75bc0 100644
--- a/packages/console-extension/src/foreign.ts
+++ b/packages/console-extension/src/foreign.ts
@@ -39,7 +39,7 @@ function activateForeign(
 ) {
   const { shell } = app;
   tracker.widgetAdded.connect((sender, widget) => {
-    const console = widget.content.console;
+    const console = widget.console;
 
     const handler = new ForeignHandler({
       sessionContext: console.sessionContext,
@@ -62,7 +62,7 @@ function activateForeign(
     if (activate && widget) {
       shell.activateById(widget.id);
     }
-    return widget?.content ?? null;
+    return widget;
   }
 
   commands.addCommand(toggleShowAllActivity, {
@@ -79,9 +79,8 @@ function activateForeign(
     },
     isToggled: () =>
       tracker.currentWidget !== null &&
-      !!Private.foreignHandlerProperty.get(
-        tracker.currentWidget.content.console
-      )?.enabled,
+      !!Private.foreignHandlerProperty.get(tracker.currentWidget.console)
+        ?.enabled,
     isEnabled: () =>
       tracker.currentWidget !== null &&
       tracker.currentWidget === shell.currentWidget
diff --git a/packages/console-extension/src/index.ts b/packages/console-extension/src/index.ts
index 7ab55ddbaa41..d4e8f2494400 100644
--- a/packages/console-extension/src/index.ts
+++ b/packages/console-extension/src/index.ts
@@ -13,7 +13,6 @@ import {
   ISessionContext,
   ISessionContextDialogs,
   ICommandPalette,
-  MainAreaWidget,
   sessionContextDialogs,
   showDialog,
   WidgetTracker
@@ -54,7 +53,7 @@ import {
 
 import { DisposableSet } from '@lumino/disposable';
 
-import { DockLayout, Menu } from '@lumino/widgets';
+import { DockLayout, Menu, Panel } from '@lumino/widgets';
 
 import foreign from './foreign';
 
@@ -155,7 +154,7 @@ async function activateConsole(
   sessionDialogs = sessionDialogs ?? sessionContextDialogs;
 
   // Create a widget tracker for all console panels.
-  const tracker = new WidgetTracker<MainAreaWidget<ConsolePanel>>({
+  const tracker = new WidgetTracker<ConsolePanel>({
     namespace: 'console'
   });
 
@@ -163,16 +162,14 @@ async function activateConsole(
   void restorer.restore(tracker, {
     command: CommandIDs.create,
     args: widget => ({
-      path: widget.content.console.sessionContext.session?.path,
-      name: widget.content.console.sessionContext.session?.name,
+      path: widget.console.sessionContext.session?.path,
+      name: widget.console.sessionContext.session?.name,
       kernelPreference: {
-        name: widget.content.console.sessionContext.kernelPreference.name,
-        language:
-          widget.content.console.sessionContext.kernelPreference.language
+        name: widget.console.sessionContext.kernelPreference.name,
+        language: widget.console.sessionContext.kernelPreference.language
       }
     }),
-    name: widget =>
-      widget.content.console.sessionContext.session?.path ?? UUID.uuid4(),
+    name: widget => widget.console.sessionContext.session?.path ?? UUID.uuid4(),
     when: manager.ready
   });
 
@@ -242,7 +239,7 @@ async function activateConsole(
     /**
      * Whether to activate the widget.  Defaults to `true`.
      */
-    activate?: boolean;
+    isActivate?: boolean;
   }
 
   /**
@@ -252,6 +249,7 @@ async function activateConsole(
     await manager.ready;
 
     const panel = new ConsolePanel({
+      content: new Panel(),
       manager,
       contentFactory,
       mimeTypeService: editorServices.mimeTypeService,
@@ -259,7 +257,6 @@ async function activateConsole(
       setBusy: (status && (() => status.setBusy())) ?? undefined,
       ...(options as Partial<ConsolePanel.IOptions>)
     });
-    const widget = new MainAreaWidget<ConsolePanel>({ content: panel });
 
     const interactionMode: string = (
       await settingRegistry.get(
@@ -271,13 +268,13 @@ async function activateConsole(
 
     // Add the console panel to the tracker. We want the panel to show up before
     // any kernel selection dialog, so we do not await panel.session.ready;
-    await tracker.add(widget);
-    panel.sessionContext.propertyChanged.connect(() => tracker.save(widget));
+    await tracker.add(panel);
+    panel.sessionContext.propertyChanged.connect(() => tracker.save(panel));
 
     shell.add(panel, 'main', {
       ref: options.ref,
       mode: options.insertMode,
-      activate: options.activate
+      activate: options.isActivate
     });
     return panel;
   }
@@ -288,7 +285,7 @@ async function activateConsole(
     interactionMode = (await settingRegistry.get(pluginId, 'interactionMode'))
       .composite as string;
     tracker.forEach(widget => {
-      widget.content.console.node.dataset.jpInteractionMode = interactionMode;
+      widget.console.node.dataset.jpInteractionMode = interactionMode;
     });
   }
   settingRegistry.pluginChanged.connect((sender, plugin) => {
@@ -302,9 +299,10 @@ async function activateConsole(
    * Whether there is an active console.
    */
   function isEnabled(): boolean {
+    console.log({ tracker, shell });
     return (
       tracker.currentWidget !== null &&
-      tracker.currentWidget.content === shell.currentWidget
+      tracker.currentWidget === shell.currentWidget
     );
   }
 
@@ -315,7 +313,7 @@ async function activateConsole(
     /**
      * Whether to activate the console.  Defaults to `true`.
      */
-    activate?: boolean;
+    isActivate?: boolean;
   }
 
   let command = CommandIDs.open;
@@ -323,10 +321,10 @@ async function activateConsole(
     execute: (args: IOpenOptions) => {
       let path = args['path'];
       let widget = tracker.find(value => {
-        return value.content.console.sessionContext.session?.path === path;
+        return value.console.sessionContext.session?.path === path;
       });
       if (widget) {
-        if (args['activate'] !== false) {
+        if (args['isActivate'] !== false) {
           shell.activateById(widget.id);
         }
         return widget;
@@ -378,7 +376,7 @@ async function activateConsole(
     if (activate && widget) {
       shell.activateById(widget.id);
     }
-    return widget?.content ?? null;
+    return widget ?? null;
   }
 
   commands.addCommand(CommandIDs.clear, {
@@ -485,11 +483,11 @@ async function activateConsole(
     execute: args => {
       let path = args['path'];
       tracker.find(widget => {
-        if (widget.content.console.sessionContext.session?.path === path) {
+        if (widget.console.sessionContext.session?.path === path) {
           if (args['activate'] !== false) {
             shell.activateById(widget.id);
           }
-          void widget.content.console.inject(
+          void widget.console.inject(
             args['code'] as string,
             args['metadata'] as JSONObject
           );
@@ -536,14 +534,14 @@ async function activateConsole(
     tracker,
     action: 'Shutdown',
     name: 'Console',
-    closeAndCleanup: (current: MainAreaWidget<ConsolePanel>) => {
+    closeAndCleanup: (current: ConsolePanel) => {
       return showDialog({
         title: 'Shut down the console?',
         body: `Are you sure you want to close "${current.title.label}"?`,
         buttons: [Dialog.cancelButton(), Dialog.warnButton()]
       }).then(result => {
         if (result.button.accept) {
-          return current.content.console.sessionContext.shutdown().then(() => {
+          return current.console.sessionContext.shutdown().then(() => {
             current.dispose();
           });
         } else {
@@ -551,13 +549,13 @@ async function activateConsole(
         }
       });
     }
-  } as IFileMenu.ICloseAndCleaner<MainAreaWidget<ConsolePanel>>);
+  } as IFileMenu.ICloseAndCleaner<ConsolePanel>);
 
   // Add a kernel user to the Kernel menu
   mainMenu.kernelMenu.kernelUsers.add({
     tracker,
     interruptKernel: current => {
-      let kernel = current.content.console.sessionContext.session?.kernel;
+      let kernel = current.console.sessionContext.session?.kernel;
       if (kernel) {
         return kernel.interrupt();
       }
@@ -565,38 +563,38 @@ async function activateConsole(
     },
     noun: 'Console',
     restartKernel: current =>
-      sessionDialogs!.restart(current.content.console.sessionContext),
+      sessionDialogs!.restart(current.console.sessionContext),
     restartKernelAndClear: current => {
       return sessionDialogs!
-        .restart(current.content.console.sessionContext)
+        .restart(current.console.sessionContext)
         .then(restarted => {
           if (restarted) {
-            current.content.console.clear();
+            current.console.clear();
           }
           return restarted;
         });
     },
     changeKernel: current =>
-      sessionDialogs!.selectKernel(current.content.console.sessionContext),
-    shutdownKernel: current => current.content.console.sessionContext.shutdown()
-  } as IKernelMenu.IKernelUser<MainAreaWidget<ConsolePanel>>);
+      sessionDialogs!.selectKernel(current.console.sessionContext),
+    shutdownKernel: current => current.console.sessionContext.shutdown()
+  } as IKernelMenu.IKernelUser<ConsolePanel>);
 
   // Add a code runner to the Run menu.
   mainMenu.runMenu.codeRunners.add({
     tracker,
     noun: 'Cell',
     pluralNoun: 'Cells',
-    run: current => current.content.console.execute(true)
-  } as IRunMenu.ICodeRunner<MainAreaWidget<ConsolePanel>>);
+    run: current => current.console.execute(true)
+  } as IRunMenu.ICodeRunner<ConsolePanel>);
 
   // Add a clearer to the edit menu
   mainMenu.editMenu.clearers.add({
     tracker,
     noun: 'Console Cells',
-    clearCurrent: (current: MainAreaWidget<ConsolePanel>) => {
-      return current.content.console.clear();
+    clearCurrent: (current: ConsolePanel) => {
+      return current.console.clear();
     }
-  } as IEditMenu.IClearer<MainAreaWidget<ConsolePanel>>);
+  } as IEditMenu.IClearer<ConsolePanel>);
 
   // For backwards compatibility and clarity, we explicitly label the run
   // keystroke with the actual effected change, rather than the generic
@@ -649,8 +647,8 @@ async function activateConsole(
   // Add kernel information to the application help menu.
   mainMenu.helpMenu.kernelUsers.add({
     tracker,
-    getKernel: current => current.content.sessionContext.session?.kernel
-  } as IHelpMenu.IKernelUser<MainAreaWidget<ConsolePanel>>);
+    getKernel: current => current.sessionContext.session?.kernel
+  } as IHelpMenu.IKernelUser<ConsolePanel>);
 
   app.contextMenu.addItem({
     command: CommandIDs.clear,
diff --git a/packages/console/src/panel.ts b/packages/console/src/panel.ts
index 4ecd388447a8..db76647173ef 100644
--- a/packages/console/src/panel.ts
+++ b/packages/console/src/panel.ts
@@ -4,7 +4,8 @@
 import {
   ISessionContext,
   SessionContext,
-  sessionContextDialogs
+  sessionContextDialogs,
+  MainAreaWidget
 } from '@jupyterlab/apputils';
 
 import { IEditorMimeTypeService } from '@jupyterlab/codeeditor';
@@ -39,12 +40,12 @@ const CONSOLE_ICON_CLASS = 'jp-CodeConsoleIcon';
 /**
  * A panel which contains a console and the ability to add other children.
  */
-export class ConsolePanel extends Panel {
+export class ConsolePanel extends MainAreaWidget<Panel> {
   /**
    * Construct a console panel.
    */
   constructor(options: ConsolePanel.IOptions) {
-    super();
+    super(options);
     this.addClass(PANEL_CLASS);
     let {
       rendermime,
@@ -85,20 +86,20 @@ export class ConsolePanel extends Panel {
       contentFactory,
       modelFactory
     });
-    this.addWidget(this.console);
+    this.content.addWidget(this.console);
 
     void sessionContext.initialize().then(async value => {
       if (value) {
         await sessionContextDialogs.selectKernel(sessionContext);
       }
       this._connected = new Date();
-      this._updateTitle();
+      this._updateTitlePanel();
     });
 
     this.console.executed.connect(this._onExecuted, this);
-    this._updateTitle();
-    sessionContext.kernelChanged.connect(this._updateTitle, this);
-    sessionContext.propertyChanged.connect(this._updateTitle, this);
+    this._updateTitlePanel();
+    sessionContext.kernelChanged.connect(this._updateTitlePanel, this);
+    sessionContext.propertyChanged.connect(this._updateTitlePanel, this);
 
     this.title.icon = CONSOLE_ICON_CLASS;
     this.title.closable = true;
@@ -113,7 +114,7 @@ export class ConsolePanel extends Panel {
   /**
    * The console widget used by the panel.
    */
-  readonly console: CodeConsole;
+  console: CodeConsole;
 
   /**
    * The session used by the panel.
@@ -154,13 +155,13 @@ export class ConsolePanel extends Panel {
    */
   private _onExecuted(sender: CodeConsole, args: Date) {
     this._executed = args;
-    this._updateTitle();
+    this._updateTitlePanel();
   }
 
   /**
    * Update the console panel title.
    */
-  private _updateTitle(): void {
+  private _updateTitlePanel(): void {
     Private.updateTitle(this, this._connected, this._executed);
   }
 
@@ -177,6 +178,7 @@ export namespace ConsolePanel {
    * The initialization options for a console panel.
    */
   export interface IOptions {
+    content: Panel;
     /**
      * The rendermime instance used by the panel.
      */
diff --git a/packages/console/src/tokens.ts b/packages/console/src/tokens.ts
index d13e511577cd..c5089716e6ca 100644
--- a/packages/console/src/tokens.ts
+++ b/packages/console/src/tokens.ts
@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { IWidgetTracker, MainAreaWidget } from '@jupyterlab/apputils';
+import { IWidgetTracker } from '@jupyterlab/apputils';
 
 import { Token } from '@lumino/coreutils';
 
@@ -19,5 +19,4 @@ export const IConsoleTracker = new Token<IConsoleTracker>(
 /**
  * A class that tracks console widgets.
  */
-export interface IConsoleTracker
-  extends IWidgetTracker<MainAreaWidget<ConsolePanel>> {}
+export interface IConsoleTracker extends IWidgetTracker<ConsolePanel> {}
diff --git a/packages/fileeditor-extension/src/commands.ts b/packages/fileeditor-extension/src/commands.ts
index 842dc1621ca5..3e11ba665ab9 100644
--- a/packages/fileeditor-extension/src/commands.ts
+++ b/packages/fileeditor-extension/src/commands.ts
@@ -877,19 +877,17 @@ export namespace Commands {
       noun: 'Code',
       isEnabled: current =>
         !!consoleTracker.find(
-          widget =>
-            widget.content.sessionContext.session?.path === current.context.path
+          widget => widget.sessionContext.session?.path === current.context.path
         ),
       run: () => commands.execute(CommandIDs.runCode),
       runAll: () => commands.execute(CommandIDs.runAllCode),
       restartAndRunAll: current => {
         const widget = consoleTracker.find(
-          widget =>
-            widget.content.sessionContext.session?.path === current.context.path
+          widget => widget.sessionContext.session?.path === current.context.path
         );
         if (widget) {
           return (sessionDialogs || sessionContextDialogs)
-            .restart(widget.content.sessionContext)
+            .restart(widget.sessionContext)
             .then(restarted => {
               if (restarted) {
                 void commands.execute(CommandIDs.runAllCode);
diff --git a/packages/inspector-extension/src/index.ts b/packages/inspector-extension/src/index.ts
index 800142a317f2..cb5a431fdb75 100644
--- a/packages/inspector-extension/src/index.ts
+++ b/packages/inspector-extension/src/index.ts
@@ -135,9 +135,8 @@ const consoles: JupyterFrontEndPlugin<void> = {
 
     // Create a handler for each console that is created.
     consoles.widgetAdded.connect((sender, parent) => {
-      const content = parent.content;
-      const sessionContext = content.console.sessionContext;
-      const rendermime = content.console.rendermime;
+      const sessionContext = parent.console.sessionContext;
+      const rendermime = parent.console.rendermime;
       const connector = new KernelConnector({ sessionContext });
       const handler = new InspectionHandler({ connector, rendermime });
 
@@ -145,11 +144,11 @@ const consoles: JupyterFrontEndPlugin<void> = {
       handlers[parent.id] = handler;
 
       // Set the initial editor.
-      let cell = content.console.promptCell;
+      let cell = parent.console.promptCell;
       handler.editor = cell && cell.editor;
 
       // Listen for prompt creation.
-      content.console.promptCellCreated.connect((sender, cell) => {
+      parent.console.promptCellCreated.connect((sender, cell) => {
         handler.editor = cell && cell.editor;
       });
 
diff --git a/packages/tooltip-extension/src/index.ts b/packages/tooltip-extension/src/index.ts
index d122973536c1..3fa58d6f4122 100644
--- a/packages/tooltip-extension/src/index.ts
+++ b/packages/tooltip-extension/src/index.ts
@@ -105,7 +105,7 @@ const consoles: JupyterFrontEndPlugin<void> = {
           return;
         }
 
-        const anchor = parent.content.console;
+        const anchor = parent.console;
         const editor = anchor.promptCell?.editor;
         const kernel = anchor.sessionContext.session?.kernel;
         const rendermime = anchor.rendermime;