diff --git a/src/App.tsx b/src/App.tsx
index 55f0cf9..3534d11 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,24 +1,14 @@
 import { useEffect, useState } from "react";
-
-// import { invoke } from "@tauri-apps/api/core";
 import "./App.css";
-
-// import { isRegistered, register } from "@tauri-apps/plugin-global-shortcut";
+import { Settings } from "./components/settings/Settings";
 import {
   checkAccessibilityPermissions,
   requestAccessibilityPermissions,
 } from "tauri-plugin-macos-permissions-api";
 
 function App() {
-  // const [greetMsg, setGreetMsg] = useState("");
-  // const [name, setName] = useState("");
   const [hasAccessibility, setHasAccessibility] = useState(false);
 
-  // async function greet() {
-  //   // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
-  //   setGreetMsg(await invoke("greet", { name }));
-  // }
-
   useEffect(() => {
     checkAccessibilityPermissions().then((hasPermissions) => {
       if (!hasPermissions) {
@@ -32,14 +22,21 @@ function App() {
   }, []);
 
   return (
-    <main className="container">
-      <h1 className="text-6xl text-stroke tracking-widest">handy</h1>
-
-      <div className="grid grid-cols-2">
-        accessibility perns: {hasAccessibility ? "true" : "false"}
-      </div>
-    </main>
+    <div className="min-h-screen bg-gray-100">
+      {!hasAccessibility && (
+        <div className="bg-yellow-50 p-4">
+          <div className="flex">
+            <div className="ml-3">
+              <p className="text-sm font-medium text-yellow-800">
+                Accessibility permissions are required for keyboard shortcuts.
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+      <Settings />
+    </div>
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/settings/KeyboardShortcuts.tsx b/src/components/settings/KeyboardShortcuts.tsx
new file mode 100644
index 0000000..e48df55
--- /dev/null
+++ b/src/components/settings/KeyboardShortcuts.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+
+interface Shortcut {
+  id: string;
+  name: string;
+  description: string;
+  keys: string[];
+}
+
+export const KeyboardShortcuts: React.FC = () => {
+  // These would normally come from the backend configuration
+  const shortcuts: Shortcut[] = [
+    {
+      id: 'transcribe',
+      name: 'Transcribe',
+      description: 'Convert speech to text',
+      keys: ['⌃', '⌘'],
+    },
+    {
+      id: 'instruct',
+      name: 'AI Chat',
+      description: 'Start a conversation with AI',
+      keys: ['⇧', '⌥'],
+    },
+    {
+      id: 'code',
+      name: 'Generate Code',
+      description: 'Generate code from voice input',
+      keys: ['⌃', '⌥', '⌘'],
+    },
+  ];
+
+  return (
+    <div className="space-y-4">
+      {shortcuts.map((shortcut) => (
+        <div
+          key={shortcut.id}
+          className="flex items-center justify-between p-4 rounded-lg border border-gray-200 hover:bg-gray-50"
+        >
+          <div>
+            <h3 className="text-sm font-medium text-gray-900">{shortcut.name}</h3>
+            <p className="text-sm text-gray-500">{shortcut.description}</p>
+          </div>
+          <div className="flex items-center space-x-1">
+            {shortcut.keys.map((key, index) => (
+              <React.Fragment key={index}>
+                <kbd className="px-2 py-1 text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded">
+                  {key}
+                </kbd>
+                {index < shortcut.keys.length - 1 && (
+                  <span className="text-gray-500">+</span>
+                )}
+              </React.Fragment>
+            ))}
+          </div>
+        </div>
+      ))}
+
+      <div className="mt-4 rounded-md bg-yellow-50 p-4">
+        <div className="flex">
+          <div className="ml-3">
+            <p className="text-sm text-yellow-700">
+              Note: Keyboard shortcuts are currently managed by the system. 
+              Custom configuration will be available in a future update.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/settings/Settings.tsx b/src/components/settings/Settings.tsx
new file mode 100644
index 0000000..215fc0d
--- /dev/null
+++ b/src/components/settings/Settings.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+// import { AIConfig } from "./AIConfig";
+import { KeyboardShortcuts } from "./KeyboardShortcuts";
+
+export const Settings: React.FC = () => {
+  return (
+    <div className="min-h-screen bg-gray-100 py-8 px-4">
+      <div className="max-w-3xl mx-auto space-y-8">
+        <h1 className="text-3xl font-bold text-gray-900">Settings</h1>
+
+        {/* AI Configuration Section */}
+        <div className="bg-white shadow rounded-lg p-6">
+          <h2 className="text-xl font-semibold text-gray-900 mb-4">
+            AI Configuration
+          </h2>
+          {/* <AIConfig /> */}
+        </div>
+
+        {/* Keyboard Shortcuts Section */}
+        <div className="bg-white shadow rounded-lg p-6">
+          <h2 className="text-xl font-semibold text-gray-900 mb-4">
+            Keyboard Shortcuts
+          </h2>
+          <KeyboardShortcuts />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..89a305e
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
\ No newline at end of file