diff --git a/package.json b/package.json
index 395585e5..d4c08312 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@lightningtv/core": "2.7.7",
     "@lightningtv/l3-ui-theme-base": "^1.0.0",
     "@lightningtv/solid": "2.7.14",
+    "@lightningtv/solid-ui": "^1.0.0",
     "@solid-primitives/list": "^0.1.0",
     "@solid-primitives/scheduled": "^1.5.0",
     "@solidjs/router": "^0.15.3",
diff --git a/src/index.tsx b/src/index.tsx
index 58c54c51..ace2ada1 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -23,6 +23,7 @@ import { browsePreload } from "./api/browsePreload";
 import { entityPreload } from "./api/entityPreload";
 import Player from "./pages/Player";
 import LeftNavWrapper from "./pages/LeftNavWrapper";
+import KeyboardPage from './pages/Keyboard';
 
 const Grid = lazy(() => import("./pages/Grid"));
 const Loops = lazy(() => import("./pages/Loops"));
@@ -158,6 +159,7 @@ render(() => (
         <Route path="flexcolumn" component={FlexColumnPage} />
         <Route path="flexgrow" component={FlexGrowPage} />
         <Route path="superflex" component={SuperFlexPage} />
+        <Route path="keyboard" component={KeyboardPage} />
         <Route path="buttonsmaterial" component={ButtonsMaterialPage} />
         <Route path="entity/people/:id" component={People} />
         <Route path="entity/:type/:id" component={Entity} preload={entityPreload} />
diff --git a/src/pages/Keyboard.tsx b/src/pages/Keyboard.tsx
new file mode 100644
index 00000000..6891cd0f
--- /dev/null
+++ b/src/pages/Keyboard.tsx
@@ -0,0 +1,25 @@
+import { View } from "@lightningtv/solid";
+import { Text } from "@lightningtv/solid";
+import { Keyboard } from "@lightningtv/solid-ui";
+import { createSignal } from "solid-js";
+
+const KeyboardPage = () => {
+  const [keySignal, setKeySignal] = createSignal<string>("");
+  return (
+    <View x={0} y={600}>
+      <Keyboard
+        keySignal={[keySignal, setKeySignal]}
+        rowWrap={true}
+        screenW={1100}
+        centerKeyboard={true}
+        centerKeys={true}
+        autofocus
+      />
+      <Text x={400} y={200} contain="both" width={900}>
+        {keySignal()}
+      </Text>
+    </View>
+  );
+};
+
+export default KeyboardPage;
diff --git a/vite.config.js b/vite.config.js
index d6a13edd..5c4837cf 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -47,7 +47,8 @@ export default defineConfig({
     exclude: [
       "@lightningtv/solid",
       "@lightningtv/core",
-      "@lightningjs/renderer"
+      "@lightningjs/renderer",
+      "@lightningtv/solid-ui"
     ]
   },
   server: {