diff --git a/frontend/src/components/Buttons/button.jsx b/frontend/src/components/Buttons/button.jsx
new file mode 100644
index 0000000..f5fc7e1
--- /dev/null
+++ b/frontend/src/components/Buttons/button.jsx
@@ -0,0 +1,18 @@
+import styles from './button.module.css'
+
+function Button({ children, onClick, className, variant = 'primary', ...rest}) {
+    // Construct dynamic class names using CSS Modules
+    const buttonClasses = `${styles.button} ${styles[variant] || ''} ${className || ''}`
+
+    return (
+        <button
+            className={buttonClasses}
+            onClick= {onClick}
+            {...rest} // Allow passing other props like 'disabled', 'type', etc.
+            >
+                {children}
+        </button>
+    )
+}
+
+export default Button;
\ No newline at end of file
diff --git a/frontend/src/components/Buttons/button.module.css b/frontend/src/components/Buttons/button.module.css
new file mode 100644
index 0000000..78a6d40
--- /dev/null
+++ b/frontend/src/components/Buttons/button.module.css
@@ -0,0 +1,37 @@
+.button {
+
+    padding: .05em .1em;
+
+    border: 3em;
+    border-radius: 3px;
+}
+
+.primary {
+    background-color: #353be5;
+    border-color: #4e53dc;
+}
+
+.primary:hover {
+    background-color: #353be5;
+    border-color: #6b70f7;
+}
+
+.secondary {
+    background-color: #1a1a1a;
+    border-color: #2a2a2a;
+}
+
+.secondary:hover {
+    background-color: #2a2a2a;
+    border-color: #3a3a3a;
+}
+
+.tertiary {
+    background-color: #eaeaea00;
+    border-color: #eaeaea;
+}
+
+.tertiary:hover {
+    background-color: #eaeaea16;
+    border-color: #eaeaea;
+}
\ No newline at end of file
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 008c962..16d686b 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,5 +1,5 @@
 import { render } from 'preact'
 import './styles/index.css'
-import { App } from './app.jsx'
+import { App } from './template-app.jsx'
 
 render(<App />, document.getElementById('app'))
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/template-app.css
similarity index 100%
rename from frontend/src/styles/app.css
rename to frontend/src/styles/template-app.css
diff --git a/frontend/src/app.jsx b/frontend/src/template-app.jsx
similarity index 97%
rename from frontend/src/app.jsx
rename to frontend/src/template-app.jsx
index 9efff17..8e8038e 100644
--- a/frontend/src/app.jsx
+++ b/frontend/src/template-app.jsx
@@ -1,7 +1,7 @@
 import { useState } from 'preact/hooks'
 import preactLogo from './assets/preact.svg'
 import viteLogo from '/vite.svg'
-import './styles/app.css'
+import './styles/template-app.css'
 
 export function App() {
   const [count, setCount] = useState(0)