diff --git a/src/renderer/components/+extensions/extensions.scss b/src/renderer/components/+extensions/extensions.scss
index 89d3aeda5b..242853343c 100644
--- a/src/renderer/components/+extensions/extensions.scss
+++ b/src/renderer/components/+extensions/extensions.scss
@@ -1,8 +1,4 @@
 .Extensions {
-  .content {
-    height: 100%;
-  }
-
   .Badge.extension {
     display: flex;
     margin: 0;
@@ -13,4 +9,8 @@
       padding-bottom: $padding;
     }
   }
+
+  .info-col {
+    flex: 0.6;
+  }
 }
\ No newline at end of file
diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx
index 06a7370c5e..974b3840fe 100644
--- a/src/renderer/components/+extensions/extensions.tsx
+++ b/src/renderer/components/+extensions/extensions.tsx
@@ -1,30 +1,34 @@
 import "./extensions.scss";
 
-import React from "react";
+import React, { Fragment } from "react";
 import { Trans } from "@lingui/macro";
 import { observer } from "mobx-react";
-import { PageLayout } from "../layout/page-layout";
 import { Badge } from "../badge";
 import { Button } from "../button";
+import { extensionLoader } from "../../../extensions/extension-loader";
+import { WizardLayout } from "../layout/wizard-layout";
 
 @observer
 export class Extensions extends React.Component {
-  disable() {
+  disable(name: string) {
+  }
+
+  renderInfo() {
+    return (
+      <Fragment>
+        <h2>Lens Extension API</h2>
+        <p>
+          The Extensions API in Lens allows users to customize and enhance the Lens experience by creating their own menus or page content that is extended from the existing pages. Many of the core features of Lens are built as extensions and use the same Extension API.
+        </p>
+        <p>
+          <a href="https://docs.k8slens.dev/extensions/overview/" target="_blank">Check out documentation to learn more</a>.
+        </p>
+      </Fragment>
+    )
   }
 
   renderExtensions() {
-    const extensions = [
-      {
-        id: "1",
-        name: "hello-world",
-        description: "Basic hello world example"
-      },
-      {
-        id: "2",
-        name: "light theme",
-        description: "Classic light theme for lens"
-      }
-    ]
+    const extensions = extensionLoader.userExtensions;
     if (!extensions.length) {
       return (
         <div className="flex align-center box grow justify-center gaps">
@@ -45,18 +49,23 @@ export class Extensions extends React.Component {
               {description}
             </div>
           </div>
-          <Button>Disable</Button>
+          <Button onClick={() => this.disable(name)}>Disable</Button>
         </Badge>
       )
     })
   }
 
   render() {
-    const header = <h2><Trans>Extensions</Trans></h2>;
     return (
-      <PageLayout showOnTop className="Extensions" header={header}>
-        {this.renderExtensions()}
-      </PageLayout>
+      <WizardLayout
+        className="Extensions"
+        infoPanel={this.renderInfo()}
+      >
+        <h2><Trans>Extensions</Trans></h2>
+        <div className="extension-list">
+          {this.renderExtensions()}
+        </div>
+      </WizardLayout>
     );
   }
 }
\ No newline at end of file