diff --git a/package.json b/package.json
index d134d8c32..4f3d7672e 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,10 @@
   "version": "0.47.3",
   "main": "dist/index.js",
   "module": "dist/index.js",
-  "author": "Huw Wilkins <huw.wilkins@canonical.com>",
+  "author": {
+    "email": "webteam@canonical.com",
+    "name": "Canonical Webteam"
+  },
   "license": "LGPL-3.0",
   "files": [
     "dist/**/*.js",
diff --git a/src/components/ApplicationLayout/AppAside/AppAside.stories.tsx b/src/components/ApplicationLayout/AppAside/AppAside.stories.tsx
new file mode 100644
index 000000000..64dbe67b4
--- /dev/null
+++ b/src/components/ApplicationLayout/AppAside/AppAside.stories.tsx
@@ -0,0 +1,139 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Application from "components/ApplicationLayout/Application";
+import AppMain from "components/ApplicationLayout/AppMain";
+import Button from "components/Button";
+import Col from "components/Col";
+import Form from "components/Form";
+import Icon from "components/Icon";
+import Input from "components/Input";
+import Panel from "components/Panel";
+import Row from "components/Row";
+
+import AppAside from "./AppAside";
+
+const meta: Meta<typeof AppAside> = {
+  component: AppAside,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AppAside>;
+
+/**
+ * In most common cases an `AppAside` should contain a `<Panel>` to display the
+ * content as intended in the application layout.
+ *
+ * `AppAside` should be a direct child of an `<Application>` or passed to the
+ * application layout `<ApplicationLayout aside={<AppAside .../>}>`.
+ */
+export const Default: Story = {
+  render: (args) => {
+    const [pinned, setPinned] = useState(false);
+    const [width, setWidth] = useState(null);
+    const [collapsed, setCollapsed] = useState(false);
+    return (
+      <Application>
+        <AppMain>
+          <p>Scroll to the right to see the panel.</p>
+          <Button onClick={() => setCollapsed(false)}>Open</Button>
+          <Button onClick={() => setWidth("narrow")}>Narrow</Button>
+          <Button onClick={() => setWidth(null)}>Default</Button>
+          <Button onClick={() => setWidth("wide")}>Wide</Button>
+        </AppMain>
+        <AppAside
+          {...args}
+          pinned={pinned}
+          wide={width === "wide"}
+          narrow={width === "narrow"}
+          collapsed={collapsed}
+        >
+          <Panel
+            controls={
+              <>
+                <Button
+                  onClick={() => setPinned(!pinned)}
+                  dense
+                  className="u-no-margin--bottom"
+                >
+                  Pin
+                </Button>
+                <Button
+                  appearance="base"
+                  className="u-no-margin--bottom"
+                  hasIcon
+                  onClick={() => setCollapsed(!collapsed)}
+                >
+                  <Icon name="close">Close</Icon>
+                </Button>
+              </>
+            }
+            title="App aside"
+          >
+            <Form stacked>
+              <Input
+                label="Full name"
+                type="text"
+                name="fullName"
+                autoComplete="name"
+                stacked
+              />
+              <Input
+                label="Username"
+                type="text"
+                name="username-stacked"
+                autoComplete="username"
+                aria-describedby="exampleHelpTextMessage"
+                stacked
+                help="30 characters or fewer."
+              />
+              <Input
+                type="text"
+                label="Email address"
+                aria-invalid="true"
+                name="username-stackederror"
+                autoComplete="email"
+                required
+                error="This field is required."
+                stacked
+              />
+              <Input
+                label="Address line 1"
+                type="text"
+                name="address-optional-stacked"
+                autoComplete="address-line1"
+                stacked
+              />
+              <Input
+                label="Address line 2"
+                type="text"
+                name="address-optional-stacked"
+                autoComplete="address-line3"
+                stacked
+              />
+              <Row>
+                <Col size={12}>
+                  <Button
+                    appearance="positive"
+                    className="u-float-right"
+                    name="add-details"
+                  >
+                    Add details
+                  </Button>
+                </Col>
+              </Row>
+            </Form>
+          </Panel>
+        </AppAside>
+      </Application>
+    );
+  },
+};
diff --git a/src/components/ApplicationLayout/AppAside/AppAside.test.tsx b/src/components/ApplicationLayout/AppAside/AppAside.test.tsx
new file mode 100644
index 000000000..e746e7562
--- /dev/null
+++ b/src/components/ApplicationLayout/AppAside/AppAside.test.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import AppAside from "./AppAside";
+
+it("displays collapsed", async () => {
+  render(<AppAside collapsed>Content</AppAside>);
+  expect(screen.queryByRole("complementary")).toHaveClass("is-collapsed");
+});
+
+it("displays as narrow", async () => {
+  render(<AppAside narrow>Content</AppAside>);
+  expect(screen.queryByRole("complementary")).toHaveClass("is-narrow");
+});
+
+it("displays pinned", async () => {
+  render(<AppAside pinned>Content</AppAside>);
+  expect(screen.queryByRole("complementary")).toHaveClass("is-pinned");
+});
+
+it("displays as wide", async () => {
+  render(<AppAside wide>Content</AppAside>);
+  expect(screen.queryByRole("complementary")).toHaveClass("is-wide");
+});
diff --git a/src/components/ApplicationLayout/AppAside/AppAside.tsx b/src/components/ApplicationLayout/AppAside/AppAside.tsx
new file mode 100644
index 000000000..2cb15b63e
--- /dev/null
+++ b/src/components/ApplicationLayout/AppAside/AppAside.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import type { PropsWithSpread } from "types";
+import classNames from "classnames";
+import { type HTMLProps, type PropsWithChildren } from "react";
+
+export type Props = PropsWithSpread<
+  {
+    /**
+     * Whether the aside panel should be collapsed. Toggling this state will animate
+     * the panel open or closed.
+     */
+    collapsed?: boolean;
+    /**
+     * The panel content.
+     */
+    children?: PropsWithChildren["children"];
+    /**
+     * A ref that will be passed to the wrapping `<aside>` element.
+     */
+    forwardRef?: React.Ref<HTMLElement> | null;
+    /**
+     * Whether the aside panel should be narrow.
+     */
+    narrow?: boolean;
+    /**
+     * Whether the aside panel should be pinned. When pinned the panel will appear
+     * beside the main content, instead of above it.
+     */
+    pinned?: boolean;
+    /**
+     * Whether the aside panel should be wide.
+     */
+    wide?: boolean;
+  },
+  HTMLProps<HTMLElement>
+>;
+
+const AppAside = ({
+  children,
+  className,
+  collapsed,
+  narrow,
+  forwardRef,
+  pinned,
+  wide,
+  ...props
+}: Props) => {
+  return (
+    <aside
+      className={classNames("l-aside", className, {
+        "is-collapsed": collapsed,
+        "is-narrow": narrow,
+        "is-pinned": pinned,
+        "is-wide": wide,
+      })}
+      {...props}
+      ref={forwardRef}
+    >
+      {children}
+    </aside>
+  );
+};
+export default AppAside;
diff --git a/src/components/ApplicationLayout/AppAside/index.ts b/src/components/ApplicationLayout/AppAside/index.ts
new file mode 100644
index 000000000..9780bf6be
--- /dev/null
+++ b/src/components/ApplicationLayout/AppAside/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./AppAside";
+export type { Props as AppAsideProps } from "./AppAside";
diff --git a/src/components/ApplicationLayout/AppMain/AppMain.stories.tsx b/src/components/ApplicationLayout/AppMain/AppMain.stories.tsx
new file mode 100644
index 000000000..21689af1a
--- /dev/null
+++ b/src/components/ApplicationLayout/AppMain/AppMain.stories.tsx
@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Application from "components/ApplicationLayout/Application";
+import Button from "components/Button";
+import React from "react";
+import Panel from "components/Panel";
+
+import AppMain from "./AppMain";
+
+const meta: Meta<typeof AppMain> = {
+  component: AppMain,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AppMain>;
+
+/**
+ * In most common cases an `AppMain` should contain a `<Panel>` to display the
+ * content as intended in the application layout.
+ *
+ * `AppMain` should be a direct child of an `<Application>` or when using `ApplicationLayout`
+ * it will automatically wrap the component's children.
+ */
+export const Default: Story = {
+  args: {
+    children: "AppMain",
+  },
+};
+
+export const Content: Story = {
+  render: (args) => {
+    return (
+      <Application>
+        <AppMain {...args}>
+          <Panel
+            controls={
+              <>
+                <Button
+                  appearance="positive"
+                  onClick={() => {}}
+                  className="u-no-margin--bottom"
+                >
+                  Add
+                </Button>
+                <Button
+                  appearance="negative"
+                  onClick={() => {}}
+                  className="u-no-margin--bottom"
+                >
+                  Delete
+                </Button>
+              </>
+            }
+            title="App main"
+          >
+            <p>App main content.</p>
+            <p>Scroll to the right to see the controls.</p>
+          </Panel>
+        </AppMain>
+      </Application>
+    );
+  },
+};
diff --git a/src/components/ApplicationLayout/AppMain/AppMain.test.tsx b/src/components/ApplicationLayout/AppMain/AppMain.test.tsx
new file mode 100644
index 000000000..959048fbf
--- /dev/null
+++ b/src/components/ApplicationLayout/AppMain/AppMain.test.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import AppMain from "./AppMain";
+
+it("displays children", () => {
+  const children = "Test content";
+  render(<AppMain>{children}</AppMain>);
+  expect(screen.getByText(children)).toBeInTheDocument();
+});
diff --git a/src/components/ApplicationLayout/AppMain/AppMain.tsx b/src/components/ApplicationLayout/AppMain/AppMain.tsx
new file mode 100644
index 000000000..c7009627f
--- /dev/null
+++ b/src/components/ApplicationLayout/AppMain/AppMain.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import classNames from "classnames";
+import type { HTMLProps, PropsWithChildren } from "react";
+
+export type Props = {
+  /**
+   * The main content.
+   */
+  children?: PropsWithChildren["children"];
+} & HTMLProps<HTMLDivElement>;
+
+/**
+ * This is a [React](https://reactjs.org/) component for main content area in the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ */
+const AppMain = ({ children, className, ...props }: Props) => {
+  return (
+    <main className={classNames("l-main", className)} {...props}>
+      {children}
+    </main>
+  );
+};
+
+export default AppMain;
diff --git a/src/components/ApplicationLayout/AppMain/index.ts b/src/components/ApplicationLayout/AppMain/index.ts
new file mode 100644
index 000000000..17de941a5
--- /dev/null
+++ b/src/components/ApplicationLayout/AppMain/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./AppMain";
+export type { Props as AppMainProps } from "./AppMain";
diff --git a/src/components/ApplicationLayout/AppNavigation/AppNavigation.stories.tsx b/src/components/ApplicationLayout/AppNavigation/AppNavigation.stories.tsx
new file mode 100644
index 000000000..5f741b762
--- /dev/null
+++ b/src/components/ApplicationLayout/AppNavigation/AppNavigation.stories.tsx
@@ -0,0 +1,127 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useState } from "react";
+import classNames from "classnames";
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Application from "components/ApplicationLayout/Application";
+import AppMain from "components/ApplicationLayout/AppMain";
+import Button from "components/Button";
+import Icon from "components/Icon";
+import Panel from "components/Panel";
+import SideNavigation from "components/SideNavigation";
+import Strip from "components/Strip";
+
+import AppNavigation from "./AppNavigation";
+
+const meta: Meta<typeof AppNavigation> = {
+  component: AppNavigation,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AppNavigation>;
+
+/**
+ * In most common cases an `AppNavigation` should contain a `<Panel>` and `<SideNavigation>`.
+ *
+ * `AppNavigation` should be a direct child of an `<Application>` or when using `ApplicationLayout`
+ * it will wrap `navItems` and `sideNavigation`.
+ */
+export const Default: Story = {
+  render: (args) => {
+    const [pinned, setPinned] = useState(false);
+    const [collapsed, setCollapsed] = useState(true);
+    return (
+      <Application>
+        <AppNavigation {...args} pinned={pinned} collapsed={collapsed}>
+          <Panel
+            dark
+            controls={
+              <>
+                <Button
+                  hasIcon
+                  appearance="base"
+                  className={classNames("u-no-margin u-hide--medium", {
+                    "is-dark": true,
+                  })}
+                  onClick={(evt) => {
+                    setCollapsed(true);
+                    // The menu stays open while its content has focus, so the
+                    // close button must blur to actually close the menu.
+                    evt.currentTarget.blur();
+                  }}
+                >
+                  <Icon
+                    name="close"
+                    className={classNames({ "is-light": true })}
+                  >
+                    Close menu
+                  </Icon>
+                </Button>
+                <Button
+                  hasIcon
+                  appearance="base"
+                  className={classNames("u-no-margin u-hide--small", {
+                    "is-dark": true,
+                  })}
+                  onClick={() => {
+                    setPinned(!pinned);
+                  }}
+                >
+                  <Icon
+                    name={pinned ? "close" : "pin"}
+                    className={classNames({ "is-light": true })}
+                  >
+                    {pinned ? "Unpin menu" : "Pin menu"}
+                  </Icon>
+                </Button>
+              </>
+            }
+            controlsClassName="u-hide--large"
+            stickyHeader
+            logo={{
+              icon: "https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg",
+              name: "https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg",
+              nameAlt: "JAAS",
+              href: "/",
+            }}
+          >
+            <SideNavigation
+              dark
+              items={[
+                {
+                  items: [
+                    {
+                      icon: "drag",
+                      label: "Models",
+                      href: "/models",
+                    },
+                    {
+                      icon: "menu",
+                      label: "Controllers",
+                      href: "/controllers",
+                    },
+                    {
+                      icon: "user",
+                      label: "Permissions",
+                      href: "/permissions",
+                    },
+                  ],
+                },
+              ]}
+            />
+          </Panel>
+        </AppNavigation>
+        <AppMain>
+          <Strip>
+            <p>These behaviours are only available at smaller screen sizes:</p>
+            <Button onClick={() => setPinned(!pinned)}>Pin</Button>
+            <Button onClick={() => setCollapsed(!collapsed)}>Toggle</Button>
+          </Strip>
+        </AppMain>
+      </Application>
+    );
+  },
+};
diff --git a/src/components/ApplicationLayout/AppNavigation/AppNavigation.test.tsx b/src/components/ApplicationLayout/AppNavigation/AppNavigation.test.tsx
new file mode 100644
index 000000000..fc9027fa3
--- /dev/null
+++ b/src/components/ApplicationLayout/AppNavigation/AppNavigation.test.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import AppNavigation from "./AppNavigation";
+
+it("displays children", () => {
+  const children = "Test content";
+  render(<AppNavigation>{children}</AppNavigation>);
+  expect(screen.getByText(children)).toBeInTheDocument();
+});
+
+it("displays as collapsed", () => {
+  const { container } = render(<AppNavigation collapsed />);
+  expect(container.firstChild).toHaveClass("is-collapsed");
+});
+
+it("displays as pinned", () => {
+  const { container } = render(<AppNavigation pinned />);
+  expect(container.firstChild).toHaveClass("is-pinned");
+});
diff --git a/src/components/ApplicationLayout/AppNavigation/AppNavigation.tsx b/src/components/ApplicationLayout/AppNavigation/AppNavigation.tsx
new file mode 100644
index 000000000..302b5ce75
--- /dev/null
+++ b/src/components/ApplicationLayout/AppNavigation/AppNavigation.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import type { PropsWithSpread } from "types";
+import classNames from "classnames";
+import type { HTMLProps, PropsWithChildren } from "react";
+
+export type Props = PropsWithSpread<
+  {
+    /**
+     * Whether the navigation panel should be collapsed.
+     */
+    collapsed?: boolean;
+    /**
+     * The navigation drawer content.
+     */
+    children?: PropsWithChildren["children"];
+    /**
+     * Whether the navigation panel should be pinned.
+     */
+    pinned?: boolean;
+  },
+  HTMLProps<HTMLDivElement>
+>;
+
+/**
+ * This is a [React](https://reactjs.org/) component for the navigation panel in the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ *
+ * This component is used to display the left navigation panel. It should be
+ * used alongside [`AppNavigationBar`](/docs/components-applicationlayout-appnavigationbar--docs).
+ */
+const AppNavigation = ({
+  children,
+  className,
+  collapsed,
+  pinned,
+  ...props
+}: Props) => {
+  return (
+    <header
+      className={classNames("l-navigation", className, {
+        "is-collapsed": collapsed,
+        "is-pinned": pinned,
+      })}
+      {...props}
+    >
+      <div className="l-navigation__drawer">{children}</div>
+    </header>
+  );
+};
+
+export default AppNavigation;
diff --git a/src/components/ApplicationLayout/AppNavigation/index.ts b/src/components/ApplicationLayout/AppNavigation/index.ts
new file mode 100644
index 000000000..aed9b0247
--- /dev/null
+++ b/src/components/ApplicationLayout/AppNavigation/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./AppNavigation";
+export type { Props as AppNavigationProps } from "./AppNavigation";
diff --git a/src/components/ApplicationLayout/AppNavigationBar/AppNavigationBar.stories.tsx b/src/components/ApplicationLayout/AppNavigationBar/AppNavigationBar.stories.tsx
new file mode 100644
index 000000000..0b20d0705
--- /dev/null
+++ b/src/components/ApplicationLayout/AppNavigationBar/AppNavigationBar.stories.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+import Application from "components/ApplicationLayout/Application";
+import AppMain from "components/ApplicationLayout/AppMain";
+import Panel from "components/Panel";
+import Strip from "components/Strip";
+
+import AppNavigationBar from "./AppNavigationBar";
+
+const meta: Meta<typeof AppNavigationBar> = {
+  component: AppNavigationBar,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AppNavigationBar>;
+
+/**
+ * In most common cases an `AppNavigationBar` should contain a `<Panel>`.
+ *
+ * `AppNavigationBar` should be a direct child of an `<Application>` or when using `ApplicationLayout`
+ * it will already be included.
+ *
+ * The toggle state should control the collapsed state of `AppNavigation`.
+ */
+export const Default: Story = {
+  args: {
+    children: "AppNavigation",
+  },
+};
+
+export const States: Story = {
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [collapsed, setCollapsed] = useState(true);
+    return (
+      <Application>
+        <AppNavigationBar {...args}>
+          <Panel
+            dark
+            logo={{
+              icon: "https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg",
+              name: "https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg",
+              nameAlt: "JAAS",
+              href: "/",
+            }}
+            toggle={{
+              label: "Menu",
+              onClick: () => setCollapsed(!collapsed),
+            }}
+          />
+        </AppNavigationBar>
+        <AppMain>
+          <Strip>
+            <p>Reduce your window size to mobile to see the navigation bar.</p>
+            <p>
+              Pass the collapsed state to the main menu:{" "}
+              <code>{`<AppNavigation collapsed={${collapsed}} />`}</code>
+            </p>
+          </Strip>
+        </AppMain>
+      </Application>
+    );
+  },
+};
diff --git a/src/components/ApplicationLayout/AppNavigationBar/AppNavigationBar.test.tsx b/src/components/ApplicationLayout/AppNavigationBar/AppNavigationBar.test.tsx
new file mode 100644
index 000000000..c7ac1d557
--- /dev/null
+++ b/src/components/ApplicationLayout/AppNavigationBar/AppNavigationBar.test.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import AppNavigationBar from "./AppNavigationBar";
+
+it("displays children", () => {
+  const children = "Test content";
+  render(<AppNavigationBar>{children}</AppNavigationBar>);
+  expect(screen.getByText(children)).toBeInTheDocument();
+});
diff --git a/src/components/ApplicationLayout/AppNavigationBar/AppNavigationBar.tsx b/src/components/ApplicationLayout/AppNavigationBar/AppNavigationBar.tsx
new file mode 100644
index 000000000..02b7c6f42
--- /dev/null
+++ b/src/components/ApplicationLayout/AppNavigationBar/AppNavigationBar.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import type { PropsWithSpread } from "types";
+import classNames from "classnames";
+import type { HTMLProps, PropsWithChildren } from "react";
+
+export type Props = PropsWithSpread<
+  {
+    /**
+     * The navigation content.
+     */
+    children?: PropsWithChildren["children"];
+  },
+  HTMLProps<HTMLElement>
+>;
+
+/**
+ * This is a [React](https://reactjs.org/) component for navigation bar in the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ *
+ * This component is used to display the navigation panel on mobile or small
+ * screens. It should be used alongside [`AppNavigation`](/docs/components-applicationlayout-appnavigation--docs).
+ */
+const AppNavigationBar = ({ children, className, ...props }: Props) => {
+  return (
+    <header className={classNames("l-navigation-bar", className)} {...props}>
+      {children}
+    </header>
+  );
+};
+
+export default AppNavigationBar;
diff --git a/src/components/ApplicationLayout/AppNavigationBar/index.ts b/src/components/ApplicationLayout/AppNavigationBar/index.ts
new file mode 100644
index 000000000..c36c09b40
--- /dev/null
+++ b/src/components/ApplicationLayout/AppNavigationBar/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./AppNavigationBar";
+export type { Props as AppNavigationBarProps } from "./AppNavigationBar";
diff --git a/src/components/ApplicationLayout/AppStatus/AppStatus.stories.tsx b/src/components/ApplicationLayout/AppStatus/AppStatus.stories.tsx
new file mode 100644
index 000000000..6acb58a38
--- /dev/null
+++ b/src/components/ApplicationLayout/AppStatus/AppStatus.stories.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Application from "components/ApplicationLayout/Application";
+import Button from "components/Button";
+import Panel from "components/Panel";
+
+import AppStatus from "./AppStatus";
+import AppMain from "../AppMain";
+import Strip from "components/Strip";
+import Spinner from "components/Spinner";
+
+const meta: Meta<typeof AppStatus> = {
+  component: AppStatus,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AppStatus>;
+
+/**
+ * `AppStatus` can contain a `<Panel>` to display the content as intended in the
+ * application layout.
+ *
+ * `AppStatus` should be a direct child of an `<Application>` or when using `ApplicationLayout`
+ * it will automatically wrap the content passed to the `status` prop.
+ */
+export const Default: Story = {
+  render: (args) => {
+    return (
+      <Application>
+        <AppMain>
+          <Strip>
+            <p>Scroll to the bottom to see the status bar.</p>
+          </Strip>
+        </AppMain>
+        <AppStatus {...args}>
+          <Panel wrapContent={false}>
+            <p className="u-no-margin--bottom">
+              <Spinner /> Update in progress...{" "}
+              <Button
+                appearance="base"
+                onClick={() => {}}
+                dense
+                className="u-no-margin"
+              >
+                Retry
+              </Button>
+            </p>
+          </Panel>
+        </AppStatus>
+      </Application>
+    );
+  },
+};
diff --git a/src/components/ApplicationLayout/AppStatus/AppStatus.test.tsx b/src/components/ApplicationLayout/AppStatus/AppStatus.test.tsx
new file mode 100644
index 000000000..2a96e889c
--- /dev/null
+++ b/src/components/ApplicationLayout/AppStatus/AppStatus.test.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import AppStatus from "./AppStatus";
+
+it("displays children", () => {
+  const children = "Test content";
+  render(<AppStatus>{children}</AppStatus>);
+  expect(screen.getByText(children)).toBeInTheDocument();
+});
diff --git a/src/components/ApplicationLayout/AppStatus/AppStatus.tsx b/src/components/ApplicationLayout/AppStatus/AppStatus.tsx
new file mode 100644
index 000000000..4df045594
--- /dev/null
+++ b/src/components/ApplicationLayout/AppStatus/AppStatus.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import classNames from "classnames";
+import type { HTMLProps, PropsWithChildren } from "react";
+
+export type Props = {
+  /**
+   * The status content.
+   */
+  children?: PropsWithChildren["children"];
+} & HTMLProps<HTMLDivElement>;
+
+/**
+ * This is a [React](https://reactjs.org/) component for status area in the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ */
+const AppStatus = ({ children, className, ...props }: Props) => {
+  return (
+    <aside className={classNames("l-status", className)} {...props}>
+      {children}
+    </aside>
+  );
+};
+
+export default AppStatus;
diff --git a/src/components/ApplicationLayout/AppStatus/index.ts b/src/components/ApplicationLayout/AppStatus/index.ts
new file mode 100644
index 000000000..6ee9fc435
--- /dev/null
+++ b/src/components/ApplicationLayout/AppStatus/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./AppStatus";
+export type { Props as AppStatusProps } from "./AppStatus";
diff --git a/src/components/ApplicationLayout/Application/Application.stories.tsx b/src/components/ApplicationLayout/Application/Application.stories.tsx
new file mode 100644
index 000000000..e1b57381c
--- /dev/null
+++ b/src/components/ApplicationLayout/Application/Application.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Application from "./Application";
+
+const meta: Meta<typeof Application> = {
+  component: Application,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Application>;
+
+export const Default: Story = {
+  args: {},
+};
diff --git a/src/components/ApplicationLayout/Application/Application.test.tsx b/src/components/ApplicationLayout/Application/Application.test.tsx
new file mode 100644
index 000000000..5749fd726
--- /dev/null
+++ b/src/components/ApplicationLayout/Application/Application.test.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import Application from "./Application";
+
+it("displays children", () => {
+  const children = "Test content";
+  render(<Application>{children}</Application>);
+  expect(screen.getByText(children)).toBeInTheDocument();
+});
diff --git a/src/components/ApplicationLayout/Application/Application.tsx b/src/components/ApplicationLayout/Application/Application.tsx
new file mode 100644
index 000000000..978546559
--- /dev/null
+++ b/src/components/ApplicationLayout/Application/Application.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import type { PropsWithSpread } from "types";
+import classNames from "classnames";
+import type { HTMLProps, PropsWithChildren } from "react";
+
+export type Props = PropsWithSpread<
+  {
+    /**
+     * The application content.
+     */
+    children?: PropsWithChildren["children"];
+  },
+  HTMLProps<HTMLDivElement>
+>;
+
+/**
+ * This is a [React](https://reactjs.org/) component for the application wrapper in the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ */
+const Application = ({ children, className, ...props }: Props) => {
+  return (
+    <div
+      className={classNames("l-application", className)}
+      role="presentation"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Application;
diff --git a/src/components/ApplicationLayout/Application/index.ts b/src/components/ApplicationLayout/Application/index.ts
new file mode 100644
index 000000000..8eb57177e
--- /dev/null
+++ b/src/components/ApplicationLayout/Application/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./Application";
+export type { Props as ApplicationProps } from "./Application";
diff --git a/src/components/ApplicationLayout/ApplicationLayout.stories.tsx b/src/components/ApplicationLayout/ApplicationLayout.stories.tsx
new file mode 100644
index 000000000..6c71a657a
--- /dev/null
+++ b/src/components/ApplicationLayout/ApplicationLayout.stories.tsx
@@ -0,0 +1,276 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Form from "components/Form";
+import Input from "components/Input";
+import Button from "components/Button";
+import Row from "components/Row";
+import Col from "components/Col";
+
+import ApplicationLayout from "./ApplicationLayout";
+import AppAside from "./AppAside";
+import Panel from "components/Panel";
+import Icon from "components/Icon";
+import SideNavigation from "components/SideNavigation";
+
+const meta: Meta<typeof ApplicationLayout> = {
+  component: ApplicationLayout,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ApplicationLayout>;
+
+export const Default: Story = {
+  render: () => {
+    const [showAside, setShowAside] = useState(true);
+    const [asidePinned, setAsidePinned] = useState(false);
+
+    return (
+      <ApplicationLayout
+        logo={{
+          icon: "https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg",
+          name: "https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg",
+          nameAlt: "JAAS",
+          href: "/",
+        }}
+        navItems={[
+          {
+            items: [
+              {
+                icon: "drag",
+                label: "Models",
+                href: "/models",
+              },
+              {
+                icon: "menu",
+                label: "Controllers",
+                href: "/controllers",
+              },
+              {
+                icon: "user",
+                label: "Permissions",
+                href: "/users",
+              },
+            ],
+          },
+        ]}
+        aside={
+          showAside ? (
+            <AppAside title="Aside panel" pinned={asidePinned}>
+              <Panel
+                controls={
+                  <>
+                    <Button
+                      onClick={() => setAsidePinned(!asidePinned)}
+                      dense
+                      className="u-no-margin"
+                    >
+                      Pin aside
+                    </Button>
+                    <Button
+                      appearance="base"
+                      className="u-no-margin--bottom"
+                      hasIcon
+                      onClick={() => {
+                        setShowAside(false);
+                        setAsidePinned(false);
+                      }}
+                    >
+                      <Icon name="close">Close</Icon>
+                    </Button>
+                  </>
+                }
+              >
+                <Form stacked>
+                  <Input
+                    label="Full name"
+                    type="text"
+                    name="fullName"
+                    autoComplete="name"
+                    stacked
+                  />
+                  <Input
+                    label="Username"
+                    type="text"
+                    name="username-stacked"
+                    autoComplete="username"
+                    aria-describedby="exampleHelpTextMessage"
+                    stacked
+                    help="30 characters or fewer."
+                  />
+                  <Input
+                    type="text"
+                    label="Email address"
+                    aria-invalid="true"
+                    name="username-stackederror"
+                    autoComplete="email"
+                    required
+                    error="This field is required."
+                    stacked
+                  />
+                  <Input
+                    label="Address line 1"
+                    type="text"
+                    name="address-optional-stacked"
+                    autoComplete="address-line1"
+                    stacked
+                  />
+                  <Input
+                    label="Address line 2"
+                    type="text"
+                    name="address-optional-stacked"
+                    autoComplete="address-line3"
+                    stacked
+                  />
+                  <Row>
+                    <Col size={12}>
+                      <Button
+                        appearance="positive"
+                        className="u-float-right"
+                        name="add-details"
+                      >
+                        Add details
+                      </Button>
+                    </Col>
+                  </Row>
+                </Form>
+              </Panel>
+            </AppAside>
+          ) : null
+        }
+        status={
+          <Button
+            onClick={() => setShowAside(!showAside)}
+            dense
+            appearance="base"
+            className="u-no-margin"
+          >
+            Toggle aside
+          </Button>
+        }
+      >
+        <Panel title="Application Layout">
+          <Row>
+            <Col size={12}>Content</Col>
+          </Row>
+        </Panel>
+      </ApplicationLayout>
+    );
+  },
+};
+
+/**
+ * The pinned and collapsed states can be handled externally if you need access
+ * to these outside the application layout.
+ */
+export const ExternalStates: Story = {
+  render: () => {
+    const [menuPinned, setMenuPinned] = useState(false);
+    const [menuCollapsed, setMenuCollapsed] = useState(true);
+
+    return (
+      <ApplicationLayout
+        menuPinned={menuPinned}
+        onPinMenu={setMenuPinned}
+        menuCollapsed={menuCollapsed}
+        onCollapseMenu={setMenuCollapsed}
+        logo={{
+          icon: "https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg",
+          name: "https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg",
+          nameAlt: "JAAS",
+          href: "/",
+        }}
+        navItems={[
+          {
+            items: [
+              {
+                icon: "drag",
+                label: "Models",
+                href: "/models",
+              },
+              {
+                icon: "menu",
+                label: "Controllers",
+                href: "/controllers",
+              },
+              {
+                icon: "user",
+                label: "Permissions",
+                href: "/users",
+              },
+            ],
+          },
+        ]}
+      >
+        <Panel title="Application Layout">
+          <Row>
+            <Col size={12}>Content</Col>
+          </Row>
+        </Panel>
+      </ApplicationLayout>
+    );
+  },
+};
+
+/**
+ * Menu items can either be provided as an array given to `navItems` or when
+ * more control is needed then by proving `sideNavigation`.
+ *
+ * For more details about how to provide navigation items see the
+ * [`SideNavigation`](/docs/components-sidenavigation--docs) docs.
+ */
+export const Navigation: Story = {
+  render: () => {
+    const [menuPinned, setMenuPinned] = useState(false);
+    const [menuCollapsed, setMenuCollapsed] = useState(true);
+
+    return (
+      <ApplicationLayout
+        menuPinned={menuPinned}
+        onPinMenu={setMenuPinned}
+        menuCollapsed={menuCollapsed}
+        onCollapseMenu={setMenuCollapsed}
+        logo={{
+          icon: "https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg",
+          name: "https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg",
+          nameAlt: "JAAS",
+          href: "/",
+        }}
+        sideNavigation={
+          <SideNavigation
+            items={[
+              {
+                items: [
+                  {
+                    icon: "drag",
+                    label: "Models",
+                    href: "/models",
+                  },
+                  {
+                    icon: "menu",
+                    label: "Controllers",
+                    href: "/controllers",
+                  },
+                  {
+                    icon: "user",
+                    label: "Permissions",
+                    href: "/users",
+                  },
+                ],
+              },
+            ]}
+          />
+        }
+      >
+        <Panel title="Application Layout">
+          <Row>
+            <Col size={12}>Content</Col>
+          </Row>
+        </Panel>
+      </ApplicationLayout>
+    );
+  },
+};
diff --git a/src/components/ApplicationLayout/ApplicationLayout.test.tsx b/src/components/ApplicationLayout/ApplicationLayout.test.tsx
new file mode 100644
index 000000000..a6650a702
--- /dev/null
+++ b/src/components/ApplicationLayout/ApplicationLayout.test.tsx
@@ -0,0 +1,113 @@
+import React from "react";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import AppAside from "./AppAside";
+import ApplicationLayout from "./ApplicationLayout";
+
+const logo = {
+  icon: "icon.svg",
+  href: "http://example.com",
+  name: "name.svg",
+  nameAlt: "Juju",
+};
+
+it("displays a logo", () => {
+  render(<ApplicationLayout logo={logo} navItems={[]} />);
+  const link = screen.getAllByRole("link", { name: "Juju" })[0];
+  expect(within(link).getByRole("img", { name: "Juju" })).toHaveAttribute(
+    "src",
+    "name.svg"
+  );
+});
+
+it("displays as light", () => {
+  render(<ApplicationLayout dark={false} logo={logo} navItems={[]} />);
+  expect(document.querySelectorAll(".is-dark")).toHaveLength(0);
+  expect(document.querySelectorAll(".is-light")).toHaveLength(0);
+});
+
+it("displays as dark", () => {
+  render(<ApplicationLayout dark logo={logo} navItems={[]} />);
+  expect(document.querySelectorAll(".is-dark")).toHaveLength(5);
+  // Two icons are light so that they appear over the dark background.
+  expect(document.querySelectorAll(".is-light")).toHaveLength(2);
+});
+
+it("displays main content", () => {
+  const content = "Main content";
+  render(
+    <ApplicationLayout logo={logo} navItems={[]}>
+      {content}
+    </ApplicationLayout>
+  );
+  expect(screen.getByText(content)).toBeInTheDocument();
+});
+
+it("displays a status bar", () => {
+  const content = "Status content";
+  render(<ApplicationLayout logo={logo} navItems={[]} status={content} />);
+  expect(screen.getByText(content)).toBeInTheDocument();
+  expect(screen.getByText(content)).toHaveClass("l-status");
+});
+
+it("displays an aside", () => {
+  const content = "Aside content";
+  render(
+    <ApplicationLayout
+      logo={logo}
+      navItems={[]}
+      aside={<AppAside>{content}</AppAside>}
+    />
+  );
+  expect(screen.getByText(content)).toBeInTheDocument();
+  expect(document.querySelector(".l-aside")).toBeInTheDocument();
+});
+
+it("pins the menu", async () => {
+  render(<ApplicationLayout logo={logo} navItems={[]} />);
+  expect(document.querySelector(".l-navigation")).not.toHaveClass("is-pinned");
+  await userEvent.click(screen.getByRole("button", { name: "Pin menu" }));
+  expect(document.querySelector(".l-navigation")).toHaveClass("is-pinned");
+});
+
+it("pins the menu using external state", async () => {
+  const onPinMenu = jest.fn();
+  render(
+    <ApplicationLayout
+      logo={logo}
+      navItems={[]}
+      menuPinned={true}
+      onPinMenu={onPinMenu}
+    />
+  );
+  expect(document.querySelector(".l-navigation")).toHaveClass("is-pinned");
+  await userEvent.click(screen.getByRole("button", { name: "Unpin menu" }));
+  expect(onPinMenu).toHaveBeenCalledWith(false);
+});
+
+it("opens and collapses the menu", async () => {
+  render(<ApplicationLayout logo={logo} navItems={[]} />);
+  expect(document.querySelector(".l-navigation")).toHaveClass("is-collapsed");
+  await userEvent.click(screen.getByRole("button", { name: "Menu" }));
+  expect(document.querySelector(".l-navigation")).not.toHaveClass(
+    "is-collapsed"
+  );
+  await userEvent.click(screen.getByRole("button", { name: "Close menu" }));
+  expect(document.querySelector(".l-navigation")).toHaveClass("is-collapsed");
+});
+
+it("collapses the menu using external state", async () => {
+  const onCollapseMenu = jest.fn();
+  render(
+    <ApplicationLayout
+      logo={logo}
+      navItems={[]}
+      menuCollapsed={true}
+      onCollapseMenu={onCollapseMenu}
+    />
+  );
+  expect(document.querySelector(".l-navigation")).toHaveClass("is-collapsed");
+  await userEvent.click(screen.getByRole("button", { name: "Menu" }));
+  expect(onCollapseMenu).toHaveBeenCalledWith(false);
+});
diff --git a/src/components/ApplicationLayout/ApplicationLayout.tsx b/src/components/ApplicationLayout/ApplicationLayout.tsx
new file mode 100644
index 000000000..b0ec921e5
--- /dev/null
+++ b/src/components/ApplicationLayout/ApplicationLayout.tsx
@@ -0,0 +1,227 @@
+import React from "react";
+import type { PropsWithSpread } from "types";
+import classNames from "classnames";
+import type { ReactNode } from "react";
+import { useState, type HTMLProps, type PropsWithChildren } from "react";
+
+import Panel from "components/Panel";
+import type { PanelProps } from "components/Panel";
+import type { PanelLogoDefaultElement } from "components/Panel";
+import type { ExclusiveProps } from "types";
+
+import type { SideNavigationProps } from "../SideNavigation";
+import SideNavigation from "../SideNavigation";
+import type { SideNavigationLinkDefaultElement } from "../SideNavigation/SideNavigationLink/index";
+
+import AppMain from "./AppMain";
+import AppNavigation from "./AppNavigation";
+import AppNavigationBar from "./AppNavigationBar";
+import AppStatus from "./AppStatus";
+import Application from "./Application";
+import Button from "components/Button";
+import Icon from "components/Icon";
+
+export type BaseProps<
+  NI = SideNavigationLinkDefaultElement,
+  PL = PanelLogoDefaultElement,
+> = PropsWithSpread<
+  {
+    /**
+     * The aside panel. This prop puts the panel in the correct position inside the
+     * application layout DOM structure, but does not wrap the content in an aside,
+     * so the content provided to this prop should include an `<AppAside>` or equivalent.
+     */
+    aside?: ReactNode;
+    /**
+     * The content for the main area.
+     */
+    children?: PropsWithChildren["children"];
+    /**
+     * Whether to use the dark theme.
+     * @default true
+     */
+    dark?: boolean;
+    /**
+     * The logo to appear in the navigation panels.
+     */
+    logo: NonNullable<PanelProps<PL>["logo"]>;
+    /**
+     * The component to use to render links inside the navigation e.g. when
+     * using react-router you'd pass `Link` to this prop.
+     */
+    navLinkComponent?: SideNavigationProps<NI>["linkComponent"];
+    /**
+     * Whether the navigation menu should be collapsed.
+     */
+    menuCollapsed?: boolean;
+    /**
+     * Whether the navigation menu should be pinned.
+     */
+    menuPinned?: boolean;
+    /**
+     * A function that is called to collapse the navigation menu.
+     */
+    onCollapseMenu?: (menuCollapsed: boolean) => void;
+    /**
+     * A function that is called to pin the navigation menu.
+     */
+    onPinMenu?: (menuPinned: boolean) => void;
+    /**
+     * The content to appear inside the status area.
+     */
+    status?: ReactNode;
+    /**
+     * Classes to apply to the navigation bar.
+     */
+    navigationBarClassName?: string;
+    /**
+     * Classes to apply to the navigation menu.
+     */
+    navigationClassName?: string;
+    /**
+     * Classes to apply to the main area.
+     */
+    mainClassName?: string;
+    /**
+     * Classes to apply to the status area.
+     */
+    statusClassName?: string;
+  },
+  HTMLProps<HTMLDivElement>
+>;
+
+export type Props<
+  NI = SideNavigationLinkDefaultElement,
+  PL = PanelLogoDefaultElement,
+> = BaseProps<NI, PL> &
+  ExclusiveProps<
+    {
+      navItems: NonNullable<SideNavigationProps<NI>["items"]>;
+    },
+    {
+      sideNavigation: ReactNode;
+    }
+  >;
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ *
+ * This component combines the various sub-components that make up the
+ * Application Layout to make it easier to consume. For some applications this
+ * component maybe not be flexible enough, in which case you may choose to use
+ * the sub-components directly. Be aware that the application layout requires a
+ * specific structure and states to function correctly so there will be a
+ * trade-off when using the sub-components directly.
+ */
+const ApplicationLayout = <
+  NI = SideNavigationLinkDefaultElement,
+  PL = PanelLogoDefaultElement,
+>({
+  aside,
+  children,
+  dark = true,
+  logo,
+  mainClassName,
+  menuCollapsed,
+  menuPinned,
+  navigationBarClassName,
+  navigationClassName,
+  navItems,
+  navLinkComponent,
+  onCollapseMenu,
+  onPinMenu,
+  sideNavigation,
+  status,
+  statusClassName,
+  ...props
+}: Props<NI, PL>) => {
+  const [internalMenuPinned, setInternalMenuPinned] = useState(false);
+  const [internalMenuCollapsed, setInternalMenuCollapsed] = useState(true);
+  const menuIsPinned = menuPinned ?? internalMenuPinned;
+  const setMenuPinned = onPinMenu ?? setInternalMenuPinned;
+  const menuIsCollapsed = menuCollapsed ?? internalMenuCollapsed;
+  const setMenuCollapsed = onCollapseMenu ?? setInternalMenuCollapsed;
+
+  return (
+    <Application {...props}>
+      <AppNavigationBar className={navigationBarClassName}>
+        <Panel<PL>
+          dark={dark}
+          logo={logo}
+          toggle={{
+            label: "Menu",
+            onClick: () => setMenuCollapsed(!menuIsCollapsed),
+          }}
+        />
+      </AppNavigationBar>
+      <AppNavigation
+        className={navigationClassName}
+        collapsed={menuIsCollapsed}
+        pinned={menuIsPinned}
+      >
+        <Panel<PL>
+          dark={dark}
+          controls={
+            <>
+              <Button
+                hasIcon
+                appearance="base"
+                className={classNames("u-no-margin u-hide--medium", {
+                  "is-dark": dark,
+                })}
+                onClick={(evt) => {
+                  setMenuCollapsed(true);
+                  // The menu stays open while its content has focus, so the
+                  // close button must blur to actually close the menu.
+                  evt.currentTarget.blur();
+                }}
+              >
+                <Icon name="close" className={classNames({ "is-light": dark })}>
+                  Close menu
+                </Icon>
+              </Button>
+              <Button
+                hasIcon
+                appearance="base"
+                className={classNames("u-no-margin u-hide--small", {
+                  "is-dark": dark,
+                })}
+                onClick={() => {
+                  setMenuPinned(!menuIsPinned);
+                }}
+              >
+                <Icon
+                  name={menuIsPinned ? "close" : "pin"}
+                  className={classNames({ "is-light": dark })}
+                >
+                  {menuIsPinned ? "Unpin menu" : "Pin menu"}
+                </Icon>
+              </Button>
+            </>
+          }
+          controlsClassName="u-hide--large"
+          stickyHeader
+          logo={logo}
+        >
+          {navItems ? (
+            <SideNavigation<NI>
+              dark={dark}
+              items={navItems}
+              linkComponent={navLinkComponent}
+            />
+          ) : (
+            sideNavigation
+          )}
+        </Panel>
+      </AppNavigation>
+      <AppMain className={mainClassName}>{children}</AppMain>
+      {aside}
+      {status ? (
+        <AppStatus className={statusClassName}>{status}</AppStatus>
+      ) : null}
+    </Application>
+  );
+};
+
+export default ApplicationLayout;
diff --git a/src/components/ApplicationLayout/index.ts b/src/components/ApplicationLayout/index.ts
new file mode 100644
index 000000000..0b8309e56
--- /dev/null
+++ b/src/components/ApplicationLayout/index.ts
@@ -0,0 +1,16 @@
+export {
+  default,
+  type Props as ApplicationLayoutProps,
+} from "./ApplicationLayout";
+export { default as AppAside, type AppAsideProps } from "./AppAside";
+export { default as Application, type ApplicationProps } from "./Application";
+export { default as AppMain, type AppMainProps } from "./AppMain";
+export {
+  default as AppNavigation,
+  type AppNavigationProps,
+} from "./AppNavigation";
+export {
+  default as AppNavigationBar,
+  type AppNavigationBarProps,
+} from "./AppNavigationBar";
+export { default as AppStatus, type AppStatusProps } from "./AppStatus";
diff --git a/src/index.ts b/src/index.ts
index 1b147ad04..4860d2e87 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,13 @@
 export { default as Accordion } from "./components/Accordion";
 export { default as ActionButton } from "./components/ActionButton";
 export { default as ArticlePagination } from "./components/ArticlePagination";
+export { default as ApplicationLayout } from "./components/ApplicationLayout";
+export { default as AppAside } from "./components/ApplicationLayout/AppAside";
+export { default as Application } from "./components/ApplicationLayout/Application";
+export { default as AppMain } from "./components/ApplicationLayout/AppMain";
+export { default as AppNavigation } from "./components/ApplicationLayout/AppNavigation";
+export { default as AppNavigationBar } from "./components/ApplicationLayout/AppNavigationBar";
+export { default as AppStatus } from "./components/ApplicationLayout/AppStatus";
 export { default as Badge } from "./components/Badge";
 export { default as Button, ButtonAppearance } from "./components/Button";
 export { default as Card } from "./components/Card";
@@ -77,6 +84,13 @@ export { default as TablePagination } from "./components/TablePagination";
 export type { AccordionProps } from "./components/Accordion";
 export type { ActionButtonProps } from "./components/ActionButton";
 export type { ArticlePaginationProps } from "./components/ArticlePagination";
+export type { ApplicationLayoutProps } from "./components/ApplicationLayout";
+export type { AppAsideProps } from "./components/ApplicationLayout/AppAside";
+export type { ApplicationProps } from "./components/ApplicationLayout/Application";
+export type { AppMainProps } from "./components/ApplicationLayout/AppMain";
+export type { AppNavigationProps } from "./components/ApplicationLayout/AppNavigation";
+export type { AppNavigationBarProps } from "./components/ApplicationLayout/AppNavigationBar";
+export type { AppStatusProps } from "./components/ApplicationLayout/AppStatus";
 export type { BadgeProps } from "./components/Badge";
 export type { ButtonProps } from "./components/Button";
 export type { CardProps } from "./components/Card";