diff --git a/browser-extensions/chrome/src/components/App.tsx b/browser-extensions/chrome/src/components/App.tsx
index 983528ca0..acc846b59 100644
--- a/browser-extensions/chrome/src/components/App.tsx
+++ b/browser-extensions/chrome/src/components/App.tsx
@@ -1,10 +1,20 @@
 import React from 'react';
 import '../styles/tailwind.css';
+import Button from './Button';
 
 const App: React.FC = () => {
+  const handleClick = () => {
+    alert('Button clicked!');
+  };
+
   return (
     <div className="bg-blue-500 text-white p-4">
       <h1>Hello, AliasVault Chrome Extension!</h1>
+      <div className="mt-4">
+        <Button onClick={handleClick}>
+          Click me!
+        </Button>
+      </div>
     </div>
   );
 };
diff --git a/browser-extensions/chrome/src/components/Button.tsx b/browser-extensions/chrome/src/components/Button.tsx
new file mode 100644
index 000000000..c36c4659f
--- /dev/null
+++ b/browser-extensions/chrome/src/components/Button.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+interface ButtonProps {
+  onClick: () => void;
+  children: React.ReactNode;
+}
+
+const Button: React.FC<ButtonProps> = ({ onClick, children }) => {
+  return (
+    <button
+      className="bg-white text-blue-500 px-4 py-2 rounded hover:bg-blue-100 transition-colors"
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;
\ No newline at end of file