diff --git a/pages/app/components/header.scss b/pages/app/components/header.scss
index 379790ef35..86755e6980 100644
--- a/pages/app/components/header.scss
+++ b/pages/app/components/header.scss
@@ -27,3 +27,9 @@
     color: #eee;
   }
 }
+
+/* stylelint-disable */
+body[data-hide-header='true'] .header {
+  display: none;
+}
+/* stylelint-enable */
diff --git a/pages/app/components/theme-switcher.tsx b/pages/app/components/theme-switcher.tsx
index 14e4322d23..4e74d4cb12 100644
--- a/pages/app/components/theme-switcher.tsx
+++ b/pages/app/components/theme-switcher.tsx
@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 
 import { Density, Mode } from '@cloudscape-design/global-styles';
 
@@ -28,6 +28,78 @@ export default function ThemeSwitcher() {
     };
   }
 
+  useEffect(() => {
+    let keyPressed: any = {};
+
+    const handleKeyDown = (e: any) => {
+      keyPressed[e.key + e.location] = true;
+
+      if (keyPressed.Control1 === true && (keyPressed.d0 || keyPressed.x0) === true) {
+        // Left shift+CONTROL pressed!
+        if (mode === 'dark') {
+          setMode(Mode.Light);
+          keyPressed = {}; // reset key map
+        } else if (mode === 'light') {
+          setMode(Mode.Dark);
+          keyPressed = {}; // reset key map
+        }
+      }
+
+      if (keyPressed.Control1 === true && keyPressed.c0 === true) {
+        e.preventDefault();
+        if (urlParams.density === 'comfortable') {
+          setUrlParams({ density: Density.Compact });
+        } else if (urlParams.density === 'compact') {
+          setUrlParams({ density: Density.Comfortable });
+        }
+        keyPressed = {}; // reset key map
+      }
+
+      if (keyPressed.Control1 === true && keyPressed.m0 === true) {
+        e.preventDefault();
+        setUrlParams({ motionDisabled: !urlParams.motionDisabled });
+        keyPressed = {}; // reset key map
+      }
+
+      if (keyPressed.Control1 === true && keyPressed.r0 === true) {
+        e.preventDefault();
+        document.documentElement.setAttribute('dir', 'rtl');
+        keyPressed = {}; // reset key map
+      }
+
+      if (keyPressed.Control1 === true && keyPressed.l0 === true) {
+        e.preventDefault();
+        document.documentElement.setAttribute('dir', 'ltr');
+        keyPressed = {}; // reset key map
+      }
+
+      if (keyPressed.Control1 === true && keyPressed.v0 === true) {
+        e.preventDefault();
+        if (ALWAYS_VISUAL_REFRESH) {
+          setUrlParams({ visualRefresh: true });
+        } else {
+          setUrlParams({ visualRefresh: !urlParams.visualRefresh });
+          window.location.reload();
+        }
+        keyPressed = {}; // reset key map
+      }
+    };
+
+    const handleKeyUp = (e: any) => {
+      keyPressed[e.key + e.location] = false;
+
+      keyPressed = {};
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('keyup', handleKeyUp);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('keyup', handleKeyUp);
+    };
+  }, [mode, urlParams.density, urlParams.motionDisabled, urlParams.visualRefresh, setMode, setUrlParams]);
+
   return (
     <SpaceBetween direction="horizontal" size="xs">
       <label>
diff --git a/pages/keyboard-shortcut-hackathon/add-new-shortcut.tsx b/pages/keyboard-shortcut-hackathon/add-new-shortcut.tsx
new file mode 100644
index 0000000000..d2c39e8b2e
--- /dev/null
+++ b/pages/keyboard-shortcut-hackathon/add-new-shortcut.tsx
@@ -0,0 +1,95 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { Box, Button, FormField, Input, Multiselect, Select, SpaceBetween } from '~components';
+
+import { shortcuts } from './shortcuts';
+
+function AddNewShortcut({ customItems, setCustomItems }: any) {
+  const shortcutNames = shortcuts.map(shortcut => shortcut.name);
+  const [actions, setActions] = React.useState<any>([]);
+  const [keyCombo, setKeyCombo] = React.useState<any>({ key1: { label: 'Command', value: '1' }, key2: null });
+  const [shortcutName, setShortcutName] = React.useState('');
+
+  const actionOptions = shortcutNames.map((name, index) => ({
+    label: name,
+    value: `${index}`,
+    disabled: !actions.map((action: any) => action.label).includes(name) && actions.length >= 3,
+  }));
+
+  return (
+    <SpaceBetween size="xl">
+      <FormField label="Action" description="Select up to 3 actions that can take place at once.">
+        <SpaceBetween size="xs">
+          <Multiselect
+            selectedOptions={actions}
+            onChange={({ detail }) => setActions(detail.selectedOptions)}
+            options={actionOptions}
+            placeholder="Choose options"
+          />
+        </SpaceBetween>
+      </FormField>
+      <FormField label="Key combination">
+        <SpaceBetween direction="horizontal" size="xs">
+          <Select
+            selectedOption={keyCombo.key1}
+            onChange={({ detail }) => setKeyCombo({ key1: detail.selectedOption, key2: keyCombo.key2 })}
+            options={[
+              { label: 'Command', value: '1' },
+              { label: 'Control', value: '2' },
+              { label: 'Option', value: '3' },
+              { label: 'Shift', value: '4' },
+            ]}
+          />
+          <Select
+            selectedOption={keyCombo.key2}
+            onChange={({ detail }) => setKeyCombo({ key1: keyCombo.key1, key2: detail.selectedOption })}
+            options={[
+              { label: 'A', value: '1' },
+              { label: 'B', value: '2' },
+              { label: 'C', value: '3' },
+              { label: 'D', value: '4' },
+              { label: 'E', value: '5' },
+              { label: 'F', value: '6' },
+              { label: 'X', value: '7' },
+            ]}
+          />
+        </SpaceBetween>
+      </FormField>
+      <FormField label="Shortcut name" description="Add an optional name for the shortcut. Will default to the action.">
+        <Input
+          placeholder="Go into focus mode"
+          value={shortcutName}
+          onChange={({ detail }) => setShortcutName(detail.value)}
+        />
+      </FormField>
+      <Box float="right">
+        <SpaceBetween direction="horizontal" size="xs">
+          <Button>Cancel</Button>
+          <Button
+            variant="primary"
+            onClick={() => {
+              setCustomItems([
+                ...customItems,
+                {
+                  name: shortcutName || `${actions[0].label} + ${actions[1]?.label} + ${actions[2]?.label}`,
+                  shortcut: `${keyCombo.key1.label} + ${keyCombo.key2.label}`,
+                  actions: actions,
+                  status: 'Enabled',
+                },
+              ]);
+              setActions([]);
+              setShortcutName('');
+              setKeyCombo({ key1: null, key2: null });
+            }}
+          >
+            Submit
+          </Button>
+        </SpaceBetween>
+      </Box>
+    </SpaceBetween>
+  );
+}
+
+export default AddNewShortcut;
diff --git a/pages/keyboard-shortcut-hackathon/app-layout.tsx b/pages/keyboard-shortcut-hackathon/app-layout.tsx
new file mode 100644
index 0000000000..5d8205ebaa
--- /dev/null
+++ b/pages/keyboard-shortcut-hackathon/app-layout.tsx
@@ -0,0 +1,274 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext, useEffect, useRef, useState } from 'react';
+
+import { AppLayout, ContentLayout, Drawer, Input, SplitPanel, TopNavigation } from '~components';
+import { AppLayoutProps } from '~components/app-layout';
+
+import AppContext, { AppContextType } from '../app/app-context';
+import { drawerLabels } from '../app-layout/utils/drawers';
+import appLayoutLabels from '../app-layout/utils/labels';
+import ScreenshotArea from '../utils/screenshot-area';
+import AddNewShortcut from './add-new-shortcut';
+import AWSLogo from './aws-logo.svg';
+
+type DemoContext = React.Context<
+  AppContextType<{
+    hasDrawers: boolean | undefined;
+    splitPanelPosition: AppLayoutProps.SplitPanelPreferences['position'];
+    disableContentPaddings: boolean | undefined;
+  }>
+>;
+
+export default function CustomAppLayout({
+  header,
+  children,
+  splitPanelOpen,
+  setSplitPanelOpen,
+  customItems,
+  setCustomItems,
+}: any) {
+  const { urlParams, setUrlParams } = useContext(AppContext as DemoContext);
+  const [activeDrawerId, setActiveDrawerId] = useState<string | null>(null);
+
+  //const [splitPanelOpen, setSplitPanelOpen] = useState(false);
+  const [navigationOpen, setNavigationOpen] = useState(false);
+
+  const disableContentPaddings = urlParams.disableContentPaddings ?? false;
+  const appLayoutRef = useRef<AppLayoutProps.Ref>(null);
+
+  useEffect(() => {
+    let keyPressed: any = {};
+
+    const handleKeyDown = (event: any) => {
+      keyPressed[event.key + event.location] = true;
+
+      if (keyPressed.Control1 === true && keyPressed.h0 === true) {
+        // Check for spacebar press
+        event.preventDefault(); // Prevent default spacebar behavior
+        if (activeDrawerId !== null) {
+          setActiveDrawerId(null);
+        } else if (activeDrawerId === null) {
+          setActiveDrawerId('help-panel');
+        }
+
+        keyPressed = {};
+      }
+
+      if (keyPressed.Control1 === true && keyPressed.s0 === true) {
+        // Check for spacebar press
+        event.preventDefault(); // Prevent default spacebar behavior
+        setSplitPanelOpen(!splitPanelOpen);
+
+        keyPressed = {};
+      }
+
+      if (keyPressed.Control1 === true && (keyPressed.q0 || keyPressed.x0) === true) {
+        // Check for spacebar press
+        event.preventDefault(); // Prevent default spacebar behavior
+        if (activeDrawerId !== null) {
+          setActiveDrawerId(null);
+        } else if (activeDrawerId === null) {
+          setActiveDrawerId('amazon-q');
+        }
+
+        keyPressed = {};
+      }
+
+      if (keyPressed.Control1 === true && keyPressed.n0 === true) {
+        // Check for spacebar press
+        event.preventDefault(); // Prevent default spacebar behavior
+        setNavigationOpen(!navigationOpen);
+
+        keyPressed = {};
+      }
+
+      if (keyPressed.Control1 === true && keyPressed.f0 === true) {
+        // Check for spacebar press
+        event.preventDefault(); // Prevent default spacebar behavior
+        setNavigationOpen(false);
+        if (activeDrawerId !== null) {
+          setActiveDrawerId(null);
+        } else if (activeDrawerId === null) {
+          setActiveDrawerId('help-panel');
+        }
+        setSplitPanelOpen(false);
+
+        keyPressed = {};
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [activeDrawerId, splitPanelOpen, navigationOpen, setSplitPanelOpen]);
+
+  return (
+    <ScreenshotArea gutters={false}>
+      <TopNavigation
+        identity={{
+          href: '#',
+          logo: { src: AWSLogo, alt: 'AWS logo' },
+        }}
+        search={
+          <>
+            <Input value="" type="search" placeholder="Search" ariaLabel="Search" />
+            <div />
+          </>
+        }
+        utilities={[
+          {
+            type: 'button',
+            iconName: 'notification',
+            title: 'Notifications',
+            ariaLabel: 'Notifications (unread)',
+            badge: true,
+            disableUtilityCollapse: false,
+          },
+          {
+            type: 'menu-dropdown',
+            iconName: 'settings',
+            ariaLabel: 'Settings',
+            title: 'Settings',
+            onItemClick: event => {
+              if (event.detail.id === 'keyboard-shortcuts') {
+                setActiveDrawerId('keyboard-shortcuts');
+              }
+            },
+            items: [
+              {
+                id: 'keyboard-shortcuts',
+                text: 'Keyboard shortcuts',
+              },
+            ],
+          },
+          {
+            type: 'menu-dropdown',
+            text: 'Customer Name',
+            description: 'email@example.com',
+            iconName: 'user-profile',
+            items: [
+              { id: 'profile', text: 'Profile' },
+              { id: 'preferences', text: 'Preferences' },
+              { id: 'security', text: 'Security' },
+              {
+                id: 'support-group',
+                text: 'Support',
+                items: [
+                  {
+                    id: 'documentation',
+                    text: 'Documentation',
+                    href: '#',
+                    external: true,
+                    externalIconAriaLabel: ' (opens in new tab)',
+                  },
+                  { id: 'support', text: 'Support' },
+                  {
+                    id: 'feedback',
+                    text: 'Feedback',
+                    href: '#',
+                    external: true,
+                    externalIconAriaLabel: ' (opens in new tab)',
+                  },
+                ],
+              },
+              { id: 'signout', text: 'Sign out' },
+            ],
+          },
+        ]}
+      />
+      <AppLayout
+        ref={appLayoutRef}
+        ariaLabels={{ ...appLayoutLabels, ...drawerLabels }}
+        content={
+          <ContentLayout data-test-id="content" header={header}>
+            {children}
+          </ContentLayout>
+        }
+        splitPanelPreferences={{
+          position: 'side',
+        }}
+        onSplitPanelPreferencesChange={event => {
+          const { position } = event.detail;
+          setUrlParams({ splitPanelPosition: position === 'side' ? position : undefined });
+        }}
+        disableContentPaddings={disableContentPaddings}
+        splitPanelOpen={splitPanelOpen}
+        onSplitPanelToggle={event => setSplitPanelOpen(event.detail.open)}
+        navigationOpen={navigationOpen}
+        onNavigationChange={event => setNavigationOpen(event.detail.open)}
+        splitPanel={
+          <SplitPanel
+            closeBehavior="hide"
+            header="Add new shortcut"
+            hidePreferencesButton={true}
+            i18nStrings={{
+              preferencesTitle: 'Preferences',
+              preferencesPositionLabel: 'Split panel position',
+              preferencesPositionDescription: 'Choose the default split panel position for the service.',
+              preferencesPositionSide: 'Side',
+              preferencesPositionBottom: 'Bottom',
+              preferencesConfirm: 'Confirm',
+              preferencesCancel: 'Cancel',
+              closeButtonAriaLabel: 'Close panel',
+              openButtonAriaLabel: 'Open panel',
+              resizeHandleAriaLabel: 'Slider',
+            }}
+          >
+            <AddNewShortcut customItems={customItems} setCustomItems={setCustomItems} />
+          </SplitPanel>
+        }
+        drawers={[
+          {
+            ariaLabels: {
+              closeButton: `Close button`,
+              drawerName: `Keyboard shortcuts`,
+              triggerButton: `Trigger button`,
+              resizeHandle: `Resize handle`,
+            },
+            resizable: true,
+
+            content: <Drawer header={<h2>Help panel</h2>}>Keyboard shortcuts help you become superpowered.</Drawer>,
+            id: 'help-panel',
+            trigger: {
+              iconName: 'status-info',
+            },
+          },
+          {
+            ariaLabels: {
+              closeButton: `Close button`,
+              drawerName: `Keyboard shortcuts`,
+              triggerButton: `Trigger button`,
+              resizeHandle: `Resize handle`,
+            },
+            resizable: true,
+
+            content: <Drawer header={<h2>Amazon Q</h2>}>This is Amazon Q</Drawer>,
+            id: 'amazon-q',
+            trigger: {
+              iconSvg: (
+                <svg
+                  viewBox="0 0 16 16"
+                  data-analytics-type="widgetDetail"
+                  data-analytics="ChatExperienceEntry"
+                  data-analytics-render="true"
+                  data-analytics-processed="true"
+                >
+                  <path
+                    d="m14.22,3.41L8.87.32c-.24-.14-.55-.21-.87-.21s-.63.07-.87.21L1.78,3.41c-.48.27-.87.95-.87,1.5v6.18c0,.55.39,1.22.87,1.5l5.36,3.09c.24.14.55.21.87.21s.63-.07.87-.21l5.36-3.09c.48-.28.87-.95.87-1.5v-6.18c0-.55-.39-1.23-.87-1.5Zm-6.22,10.47l-5.09-2.94v-5.88l5.09-2.94,5.09,2.94v4.72l-3.09-1.78v-.74c0-.26-.14-.49-.36-.62l-1.28-.74c-.11-.06-.24-.1-.36-.1s-.25.03-.36.1l-1.28.74c-.22.13-.36.37-.36.62v1.48c0,.26.14.49.36.62l1.28.74c.11.06.24.1.36.1s.25-.03.36-.1l.64-.37,3.09,1.78-4.09,2.36Z"
+                    fill="currentColor"
+                    strokeWidth="0"
+                  ></path>
+                </svg>
+              ),
+            },
+          },
+        ]}
+        onDrawerChange={event => setActiveDrawerId(event.detail.activeDrawerId)}
+        activeDrawerId={activeDrawerId}
+      />
+    </ScreenshotArea>
+  );
+}
diff --git a/pages/keyboard-shortcut-hackathon/aws-logo.svg b/pages/keyboard-shortcut-hackathon/aws-logo.svg
new file mode 100644
index 0000000000..9ed25f9dce
--- /dev/null
+++ b/pages/keyboard-shortcut-hackathon/aws-logo.svg
@@ -0,0 +1,5 @@
+<svg width="33px" xmlns="http://www.w3.org/2000/svg" version="2.0" focusable="false" aria-hidden="true" viewBox="0 0 29 17">
+<path fill="#fff" d="M8.38 6.17a2.6 2.6 0 00.11.83c.08.232.18.456.3.67a.4.4 0 01.07.21.36.36 0 01-.18.28l-.59.39a.43.43 0 01-.24.08.38.38 0 01-.28-.13 2.38 2.38 0 01-.34-.43c-.09-.16-.18-.34-.28-.55a3.44 3.44 0 01-2.74 1.29 2.54 2.54 0 01-1.86-.67 2.36 2.36 0 01-.68-1.79 2.43 2.43 0 01.84-1.92 3.43 3.43 0 012.29-.72 6.75 6.75 0 011 .07c.35.05.7.12 1.07.2V3.3a2.06 2.06 0 00-.44-1.49 2.12 2.12 0 00-1.52-.43 4.4 4.4 0 00-1 .12 6.85 6.85 0 00-1 .32l-.33.12h-.14c-.14 0-.2-.1-.2-.29v-.46A.62.62 0 012.3.87a.78.78 0 01.27-.2A6 6 0 013.74.25 5.7 5.7 0 015.19.07a3.37 3.37 0 012.44.76 3 3 0 01.77 2.29l-.02 3.05zM4.6 7.59a3 3 0 001-.17 2 2 0 00.88-.6 1.36 1.36 0 00.32-.59 3.18 3.18 0 00.09-.81V5A7.52 7.52 0 006 4.87h-.88a2.13 2.13 0 00-1.38.37 1.3 1.3 0 00-.46 1.08 1.3 1.3 0 00.34 1c.278.216.63.313.98.27zm7.49 1a.56.56 0 01-.36-.09.73.73 0 01-.2-.37L9.35.93a1.39 1.39 0 01-.08-.38c0-.15.07-.23.22-.23h.92a.56.56 0 01.36.09.74.74 0 01.19.37L12.53 7 14 .79a.61.61 0 01.18-.37.59.59 0 01.37-.09h.75a.62.62 0 01.38.09.74.74 0 01.18.37L17.31 7 18.92.76a.74.74 0 01.19-.37.56.56 0 01.36-.09h.87a.21.21 0 01.23.23 1 1 0 010 .15s0 .13-.06.23l-2.26 7.2a.74.74 0 01-.19.37.6.6 0 01-.36.09h-.8a.53.53 0 01-.37-.1.64.64 0 01-.18-.37l-1.45-6-1.44 6a.64.64 0 01-.18.37.55.55 0 01-.37.1l-.82.02zm12 .24a6.29 6.29 0 01-1.44-.16 4.21 4.21 0 01-1.07-.37.69.69 0 01-.29-.26.66.66 0 01-.06-.27V7.3c0-.19.07-.29.21-.29a.57.57 0 01.18 0l.23.1c.32.143.656.25 1 .32.365.08.737.12 1.11.12a2.47 2.47 0 001.36-.31 1 1 0 00.48-.88.88.88 0 00-.25-.65 2.29 2.29 0 00-.94-.49l-1.35-.43a2.83 2.83 0 01-1.49-.94 2.24 2.24 0 01-.47-1.36 2 2 0 01.25-1c.167-.3.395-.563.67-.77a3 3 0 011-.48A4.1 4.1 0 0124.4.08a4.4 4.4 0 01.62 0l.61.1.53.15.39.16c.105.062.2.14.28.23a.57.57 0 01.08.31v.44c0 .2-.07.3-.21.3a.92.92 0 01-.36-.12 4.35 4.35 0 00-1.8-.36 2.51 2.51 0 00-1.24.26.92.92 0 00-.44.84c0 .249.1.488.28.66.295.236.635.41 1 .51l1.32.42a2.88 2.88 0 011.44.9 2.1 2.1 0 01.43 1.31 2.38 2.38 0 01-.24 1.08 2.34 2.34 0 01-.68.82 3 3 0 01-1 .53 4.59 4.59 0 01-1.35.22l.03-.01z"></path>
+<path fill="#F8991D" d="M25.82 13.43a20.07 20.07 0 01-11.35 3.47A20.54 20.54 0 01.61 11.62c-.29-.26 0-.62.32-.42a27.81 27.81 0 0013.86 3.68 27.54 27.54 0 0010.58-2.16c.52-.22.96.34.45.71z"></path>
+<path fill="#F8991D" d="M27.1 12c-.4-.51-2.6-.24-3.59-.12-.3 0-.34-.23-.07-.42 1.75-1.23 4.63-.88 5-.46.37.42-.09 3.3-1.74 4.68-.25.21-.49.09-.38-.18.34-.95 1.17-3.02.78-3.5z"></path>
+</svg>
\ No newline at end of file
diff --git a/pages/keyboard-shortcut-hackathon/demo.page.tsx b/pages/keyboard-shortcut-hackathon/demo.page.tsx
new file mode 100644
index 0000000000..d2f56e9017
--- /dev/null
+++ b/pages/keyboard-shortcut-hackathon/demo.page.tsx
@@ -0,0 +1,38 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import { Header, SpaceBetween, Toggle } from '~components';
+
+import CustomAppLayout from './app-layout';
+import UnifiedSettings from './unified-settings';
+
+export default function Demo() {
+  const [hideHeader, setHideHeader] = useState(false);
+  return (
+    <CustomAppLayout
+      header={
+        <SpaceBetween size="m">
+          <Header
+            variant="h1"
+            description="Manage settings for the current user. These settings do not apply to other IAM users or accounts."
+          >
+            Unified settings
+          </Header>
+
+          <Toggle
+            onChange={() => {
+              document.body.setAttribute('data-hide-header', `${!hideHeader}`);
+              setHideHeader(!hideHeader);
+            }}
+            checked={hideHeader}
+          >
+            Hide header
+          </Toggle>
+        </SpaceBetween>
+      }
+    >
+      <UnifiedSettings />
+    </CustomAppLayout>
+  );
+}
diff --git a/pages/keyboard-shortcut-hackathon/kvp-table.tsx b/pages/keyboard-shortcut-hackathon/kvp-table.tsx
new file mode 100644
index 0000000000..7e6d56ef57
--- /dev/null
+++ b/pages/keyboard-shortcut-hackathon/kvp-table.tsx
@@ -0,0 +1,32 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { Box, ExpandableSection } from '~components';
+
+import styles from './styles.scss';
+
+interface KeyValuePairProps {
+  items: Array<{
+    key: string;
+    value: string;
+  }>;
+  header?: string;
+}
+
+function KeyValuePairTable(props: KeyValuePairProps) {
+  return (
+    <ExpandableSection defaultExpanded={true} variant="footer" headerText={props.header}>
+      {props.items.map((item, index) => (
+        <div className={styles.kvp} key={index}>
+          <Box fontWeight="bold">{item.key}</Box>
+          <Box>
+            <div className={styles.shortcut}>{item.value}</div>
+          </Box>
+        </div>
+      ))}
+    </ExpandableSection>
+  );
+}
+
+export default KeyValuePairTable;
diff --git a/pages/keyboard-shortcut-hackathon/shortcut-page.page.tsx b/pages/keyboard-shortcut-hackathon/shortcut-page.page.tsx
new file mode 100644
index 0000000000..5bc33a904c
--- /dev/null
+++ b/pages/keyboard-shortcut-hackathon/shortcut-page.page.tsx
@@ -0,0 +1,235 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import { Button, Container, Header, Select, SpaceBetween, StatusIndicator, Table } from '~components';
+
+import CustomAppLayout from './app-layout';
+import { shortcuts } from './shortcuts';
+
+import styles from './styles.scss';
+
+export default function ShortcutPage() {
+  const [selectedItems, setSelectedItems] = useState<any>([]);
+  const [submitting, setSubmitting] = useState(false);
+  const [splitPanelOpen, setSplitPanelOpen] = useState(false);
+
+  const [tableItems, setTableItems] = useState(shortcuts);
+  const [customItems, setCustomItems] = useState([]);
+
+  const removeFiles = () => {
+    const newValue = customItems.filter(file => !selectedItems.includes(file));
+    setCustomItems(newValue);
+
+    setSelectedItems([]);
+  };
+
+  const handleSubmit = async (currentItem: any, column: any, value: any) => {
+    setSubmitting(true);
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    const fullCollection = tableItems;
+
+    const newItem = { ...currentItem, [column.id]: value };
+
+    setTableItems(fullCollection.map(item => (item === currentItem ? newItem : item)));
+    setSubmitting(false);
+  };
+
+  console.log(customItems);
+
+  return (
+    <CustomAppLayout
+      setSplitPanelOpen={setSplitPanelOpen}
+      splitPanelOpen={splitPanelOpen}
+      header={
+        <Header
+          actions={
+            <Button variant="primary" href="#/light/keyboard-shortcut-hackathon/demo">
+              Save
+            </Button>
+          }
+        >
+          Keyboard shortcuts
+        </Header>
+      }
+      customItems={customItems}
+      setCustomItems={setCustomItems}
+    >
+      <SpaceBetween size="xl">
+        <Container header={<Header>Default shortcuts</Header>}>
+          <Table
+            variant="embedded"
+            empty={'No files uploaded'}
+            //selectionType={'multi'}
+            //onSelectionChange={({ detail }) => setSelectedItems(detail.selectedItems)}
+            //selectedItems={selectedItems}
+            trackBy="name"
+            columnDefinitions={[
+              {
+                id: 'name',
+                header: 'Action name',
+                cell: item => item.name || '-',
+                sortingField: 'name',
+                isRowHeader: true,
+              },
+              {
+                id: 'type',
+                header: 'Shortcut',
+                cell: item => <span className={styles.shortcut}>{item.shortcut}</span> || '-',
+                sortingField: 'alt',
+              },
+              {
+                id: 'status',
+                header: 'Status',
+                cell: item =>
+                  (
+                    <StatusIndicator type={item.status === 'Disabled' ? 'error' : 'success'}>
+                      {item.status}
+                    </StatusIndicator>
+                  ) || '-',
+                editConfig: {
+                  ariaLabel: 'Type',
+                  editIconAriaLabel: 'editable',
+                  editingCell: (item, { currentValue, setValue }) => {
+                    const value = currentValue ?? item.status;
+                    return (
+                      <Select
+                        autoFocus={true}
+                        expandToViewport={true}
+                        selectedOption={
+                          [
+                            { label: 'Enabled', value: 'Enabled' },
+                            { label: 'Disabled', value: 'Disabled' },
+                          ].find(option => option.value === value) ?? null
+                        }
+                        onChange={event => {
+                          setValue(event.detail.selectedOption.value ?? item.status);
+                        }}
+                        options={[
+                          { label: 'Enabled', value: 'Enabled' },
+                          { label: 'Disabled', value: 'Disabled' },
+                        ]}
+                      />
+                    );
+                  },
+                },
+              },
+            ]}
+            submitEdit={handleSubmit}
+            enableKeyboardNavigation={true}
+            ariaLabels={{
+              activateEditLabel: (column, item) => `Edit ${item.name} ${column.header}`,
+              cancelEditLabel: column => `Cancel editing ${column.header}`,
+              submitEditLabel: column => `Submit editing ${column.header}`,
+              tableLabel: 'Table with inline editing',
+              selectionGroupLabel: 'group label',
+              allItemsSelectionLabel: ({ selectedItems }) => `${selectedItems.length} item selected`,
+              itemSelectionLabel: ({ selectedItems }, item) =>
+                `${item.name} is ${selectedItems.indexOf(item) < 0 ? 'not ' : ''}selected`,
+            }}
+            items={tableItems}
+            loadingText="Loading resources"
+            sortingDisabled={true}
+          />
+        </Container>
+        <Container
+          header={
+            <Header
+              actions={
+                <SpaceBetween direction="horizontal" size="xs">
+                  <Button disabled={selectedItems.length === 0 || submitting} onClick={removeFiles}>
+                    Delete
+                  </Button>
+                  <Button disabled={selectedItems.length === 0 || submitting}>Edit</Button>
+                  <Button onClick={() => setSplitPanelOpen(true)}>Add new shortcut</Button>
+                </SpaceBetween>
+              }
+            >
+              Custom shortcuts
+            </Header>
+          }
+        >
+          <Table
+            variant="embedded"
+            empty={'No custom keyboard shortcuts'}
+            selectionType={'multi'}
+            onSelectionChange={({ detail }) => setSelectedItems(detail.selectedItems)}
+            selectedItems={selectedItems}
+            trackBy="name"
+            columnDefinitions={[
+              {
+                id: 'name',
+                header: 'Action name',
+                cell: item => item.name || '-',
+                sortingField: 'name',
+                isRowHeader: true,
+              },
+              {
+                id: 'type',
+                header: 'Shortcut',
+                cell: item =>
+                  (
+                    <>
+                      <span className={styles.shortcut}>{item.shortcut}</span>
+                    </>
+                  ) || '-',
+                sortingField: 'alt',
+              },
+              {
+                id: 'status',
+                header: 'Status',
+                cell: item =>
+                  (
+                    <StatusIndicator type={item.status === 'Disabled' ? 'error' : 'success'}>
+                      {item.status}
+                    </StatusIndicator>
+                  ) || '-',
+                editConfig: {
+                  ariaLabel: 'Type',
+                  editIconAriaLabel: 'editable',
+                  editingCell: (item, { currentValue, setValue }) => {
+                    const value = currentValue ?? item.status;
+                    return (
+                      <Select
+                        autoFocus={true}
+                        expandToViewport={true}
+                        selectedOption={
+                          [
+                            { label: 'Enabled', value: 'Enabled' },
+                            { label: 'Disabled', value: 'Disabled' },
+                          ].find(option => option.value === value) ?? null
+                        }
+                        onChange={event => {
+                          setValue(event.detail.selectedOption.value ?? item.status);
+                        }}
+                        options={[
+                          { label: 'Enabled', value: 'Enabled' },
+                          { label: 'Disabled', value: 'Disabled' },
+                        ]}
+                      />
+                    );
+                  },
+                },
+              },
+            ]}
+            submitEdit={handleSubmit}
+            enableKeyboardNavigation={true}
+            ariaLabels={{
+              activateEditLabel: (column, item) => `Edit ${item.name} ${column.header}`,
+              cancelEditLabel: column => `Cancel editing ${column.header}`,
+              submitEditLabel: column => `Submit editing ${column.header}`,
+              tableLabel: 'Table with inline editing',
+              selectionGroupLabel: 'group label',
+              allItemsSelectionLabel: ({ selectedItems }) => `${selectedItems.length} item selected`,
+              itemSelectionLabel: ({ selectedItems }, item) =>
+                `${item.name} is ${selectedItems.indexOf(item) < 0 ? 'not ' : ''}selected`,
+            }}
+            items={customItems}
+            loadingText="Loading resources"
+            sortingDisabled={true}
+          />
+        </Container>
+      </SpaceBetween>
+    </CustomAppLayout>
+  );
+}
diff --git a/pages/keyboard-shortcut-hackathon/shortcuts.ts b/pages/keyboard-shortcut-hackathon/shortcuts.ts
new file mode 100644
index 0000000000..bb7f245be2
--- /dev/null
+++ b/pages/keyboard-shortcut-hackathon/shortcuts.ts
@@ -0,0 +1,54 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export const shortcuts = [
+  {
+    name: 'Toggle navigation',
+    shortcut: 'Control + N',
+    status: 'Enabled',
+  },
+  {
+    name: 'Toggle split panel',
+    shortcut: 'Control + S',
+    status: 'Enabled',
+  },
+  {
+    name: 'Toggle help panel',
+    shortcut: 'Control + H',
+    status: 'Enabled',
+  },
+  {
+    name: 'Toggle Amazon Q',
+    shortcut: 'Control + Q',
+    status: 'Enabled',
+  },
+  {
+    name: 'Toggle dark mode',
+    shortcut: 'Control + D',
+    status: 'Enabled',
+  },
+  {
+    name: 'Toggle compact mode',
+    shortcut: 'Control + C',
+    status: 'Enabled',
+  },
+  {
+    name: 'Toggle visual refresh',
+    shortcut: 'Control + V',
+    status: 'Enabled',
+  },
+  {
+    name: 'Toggle motion disabled',
+    shortcut: 'Control + M',
+    status: 'Enabled',
+  },
+  {
+    name: 'RTL direction',
+    shortcut: 'Control + R',
+    status: 'Enabled',
+  },
+  {
+    name: 'LTR direction',
+    shortcut: 'Control + L',
+    status: 'Enabled',
+  },
+];
diff --git a/pages/keyboard-shortcut-hackathon/styles.scss b/pages/keyboard-shortcut-hackathon/styles.scss
new file mode 100644
index 0000000000..ffb994a733
--- /dev/null
+++ b/pages/keyboard-shortcut-hackathon/styles.scss
@@ -0,0 +1,30 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '~design-tokens' as awsui;
+
+.kvp {
+  display: flex;
+  justify-content: space-between;
+  padding-block: awsui.$space-scaled-s;
+
+  &:not(:last-child) {
+    border-block-end: 1px solid awsui.$color-border-divider-default;
+  }
+}
+
+.shortcut {
+  //background: awsui.$color-background-input-disabled;
+  color: awsui.$color-text-body-secondary;
+  border-block: 1px solid awsui.$color-border-divider-default;
+  border-inline: 1px solid awsui.$color-border-divider-default;
+  border-start-start-radius: awsui.$border-radius-badge;
+  border-start-end-radius: awsui.$border-radius-badge;
+  border-end-start-radius: awsui.$border-radius-badge;
+  border-end-end-radius: awsui.$border-radius-badge;
+  padding-block: 2px;
+  padding-inline: 4px;
+  font-family: monospace;
+}
diff --git a/pages/keyboard-shortcut-hackathon/unified-settings.tsx b/pages/keyboard-shortcut-hackathon/unified-settings.tsx
new file mode 100644
index 0000000000..6712a4b0fc
--- /dev/null
+++ b/pages/keyboard-shortcut-hackathon/unified-settings.tsx
@@ -0,0 +1,91 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { Button, Container, Header, KeyValuePairs, SpaceBetween } from '~components';
+
+function UnifiedSettings() {
+  return (
+    <SpaceBetween size="xl">
+      <Container
+        header={
+          <Header
+            actions={<Button>Edit</Button>}
+            description="Choose the language and locale settings in the AWS Console, and control which region is active when you sign in."
+          >
+            Localization and default region
+          </Header>
+        }
+      >
+        <KeyValuePairs
+          columns={2}
+          items={[
+            {
+              label: 'Language',
+              value: 'English (US)',
+            },
+            { label: 'Default region', value: 'Last used region' },
+          ]}
+        />
+      </Container>
+      <Container
+        header={
+          <Header actions={<Button>Edit</Button>} description="Customize the appearanec of AWS console elements.">
+            Display
+          </Header>
+        }
+      >
+        <KeyValuePairs
+          columns={3}
+          items={[
+            {
+              label: 'Visual mode',
+              value: 'Light',
+            },
+            { label: 'Favorites bar display', value: 'Service icons only' },
+            { label: 'Favorites bar icon size', value: 'Large' },
+          ]}
+        />
+      </Container>
+      <Container
+        header={
+          <Header actions={<Button>Edit</Button>} description="Decide if the AWS Console remembers your activity.">
+            Settings management
+          </Header>
+        }
+      >
+        <KeyValuePairs
+          columns={3}
+          items={[
+            {
+              label: 'Remember recently visited services',
+              value: 'Yes',
+            },
+          ]}
+        />
+      </Container>
+      <Container
+        header={
+          <Header
+            actions={<Button href="#/light/keyboard-shortcut-hackathon/shortcut-page">Edit</Button>}
+            description="Configure keyboard shortcuts for common actions."
+          >
+            Keyboard shortcuts
+          </Header>
+        }
+      >
+        <KeyValuePairs
+          columns={3}
+          items={[
+            {
+              label: 'Keyboard shortcuts',
+              value: 'Enabled',
+            },
+          ]}
+        />
+      </Container>
+    </SpaceBetween>
+  );
+}
+
+export default UnifiedSettings;