diff --git a/KeyBorad/KeyBorad/APP/AppKeyboardPage.cpp b/KeyBorad/KeyBorad/APP/AppKeyboardPage.cpp
new file mode 100644
index 0000000..fdfc140
--- /dev/null
+++ b/KeyBorad/KeyBorad/APP/AppKeyboardPage.cpp
@@ -0,0 +1,133 @@
+#include "APP/AppKeyboardPage.h"
+
+#include "APP/AppKeyButton.h"
+#include "APP/AppTheme.h"
+
+#include <QtWidgets/QFrame>
+#include <QtWidgets/QGridLayout>
+#include <QtWidgets/QLabel>
+#include <QtWidgets/QVBoxLayout>
+
+namespace APP
+{
+
+namespace
+{
+
+struct App_KeySpec
+{
+    quint16 Usage;
+    const char* Text;
+    int Row;
+    int Column;
+    int RowSpan;
+    int ColumnSpan;
+};
+
+const App_KeySpec kKeySpecList[] = {
+    { 0x0053, "Num",   0, 0, 1, 1 },
+    { 0x0054, "/",     0, 1, 1, 1 },
+    { 0x0055, "*",     0, 2, 1, 1 },
+    { 0x0056, "-",     0, 3, 1, 1 },
+    { 0x005F, "7",     1, 0, 1, 1 },
+    { 0x0060, "8",     1, 1, 1, 1 },
+    { 0x0061, "9",     1, 2, 1, 1 },
+    { 0x0057, "+",     1, 3, 2, 1 },
+    { 0x005C, "4",     2, 0, 1, 1 },
+    { 0x005D, "5",     2, 1, 1, 1 },
+    { 0x005E, "6",     2, 2, 1, 1 },
+    { 0x0059, "1",     3, 0, 1, 1 },
+    { 0x005A, "2",     3, 1, 1, 1 },
+    { 0x005B, "3",     3, 2, 1, 1 },
+    { 0x0058, "Enter", 3, 3, 2, 1 },
+    { 0x0062, "0",     4, 0, 1, 2 },
+    { 0x0063, ".",     4, 2, 1, 1 },
+};
+
+} // namespace
+
+App_KeyboardPage::App_KeyboardPage(QWidget* p_Parent)
+    : QWidget(p_Parent)
+{
+    App_Func_CreateLayout();
+}
+
+void App_KeyboardPage::App_Func_SetPressedUsages(const QVector<quint16>& UsageList)
+{
+    for (auto It = appButtonMap.begin(); It != appButtonMap.end(); ++It)
+    {
+        It.value()->App_Func_SetPressedState(UsageList.contains(It.key()));
+    }
+}
+
+void App_KeyboardPage::App_Func_SetLatchedUsage(quint16 Usage, bool IsLatched)
+{
+    App_KeyButton* const p_Button = appButtonMap.value(Usage, nullptr);
+    if (p_Button != nullptr)
+    {
+        p_Button->App_Func_SetLatchedState(IsLatched);
+    }
+}
+
+void App_KeyboardPage::App_Func_SetFeatureLabel(quint16 Usage, const QString& Text)
+{
+    App_KeyButton* const p_Button = appButtonMap.value(Usage, nullptr);
+    if (p_Button != nullptr)
+    {
+        p_Button->App_Func_SetFeatureText(Text);
+    }
+}
+
+void App_KeyboardPage::App_Func_CreateLayout()
+{
+    const App_ThemePalette Palette = App_Theme_DefaultPalette();
+
+    QVBoxLayout* const p_RootLayout = new QVBoxLayout(this);
+    p_RootLayout->setContentsMargins(0, 0, 0, 0);
+    p_RootLayout->setSpacing(12);
+
+    QFrame* const p_Card = new QFrame(this);
+    p_Card->setStyleSheet(App_Theme_BuildCardStyleSheet());
+    p_RootLayout->addWidget(p_Card);
+
+    QVBoxLayout* const p_CardLayout = new QVBoxLayout(p_Card);
+    p_CardLayout->setContentsMargins(20, 20, 20, 20);
+    p_CardLayout->setSpacing(14);
+
+    QLabel* const p_Title = new QLabel(QStringLiteral("Keyboard"), p_Card);
+    p_Title->setProperty("role", "title");
+    p_CardLayout->addWidget(p_Title);
+
+    QLabel* const p_Body = new QLabel(
+        QStringLiteral("Start from one button, then grow into the whole keypad layout."),
+        p_Card);
+    p_Body->setProperty("role", "body");
+    p_Body->setWordWrap(true);
+    p_CardLayout->addWidget(p_Body);
+
+    QGridLayout* const p_GridLayout = new QGridLayout();
+    p_GridLayout->setSpacing(12);
+    p_CardLayout->addLayout(p_GridLayout);
+
+    for (const App_KeySpec& KeySpec : kKeySpecList)
+    {
+        App_KeyButton* const p_Button =
+            new App_KeyButton(KeySpec.Usage, QString::fromUtf8(KeySpec.Text), p_Card);
+        p_GridLayout->addWidget(
+            p_Button,
+            KeySpec.Row,
+            KeySpec.Column,
+            KeySpec.RowSpan,
+            KeySpec.ColumnSpan);
+        appButtonMap.insert(KeySpec.Usage, p_Button);
+    }
+
+    for (int Column = 0; Column < 4; ++Column)
+    {
+        p_GridLayout->setColumnStretch(Column, 1);
+    }
+
+    Q_UNUSED(Palette);
+}
+
+} // namespace APP
diff --git a/KeyBorad/KeyBorad/APP/AppKeyboardPage.h b/KeyBorad/KeyBorad/APP/AppKeyboardPage.h
new file mode 100644
index 0000000..3bc313c
--- /dev/null
+++ b/KeyBorad/KeyBorad/APP/AppKeyboardPage.h
@@ -0,0 +1,27 @@
+#pragma once
+
+#include <QtCore/QHash>
+#include <QtCore/QVector>
+#include <QtWidgets/QWidget>
+
+namespace APP
+{
+
+class App_KeyButton;
+
+class App_KeyboardPage : public QWidget
+{
+public:
+    explicit App_KeyboardPage(QWidget* p_Parent = nullptr);
+
+    void App_Func_SetPressedUsages(const QVector<quint16>& UsageList);
+    void App_Func_SetLatchedUsage(quint16 Usage, bool IsLatched);
+    void App_Func_SetFeatureLabel(quint16 Usage, const QString& Text);
+
+private:
+    void App_Func_CreateLayout();
+
+    QHash<quint16, App_KeyButton*> appButtonMap;
+};
+
+} // namespace APP