diff --git a/src/components/components.tsx b/src/components/components.tsx
index 6450f5a..7ee7f0d 100644
--- a/src/components/components.tsx
+++ b/src/components/components.tsx
@@ -1,113 +1,25 @@
-import { useState } from 'react';
+import { useState } from 'react'
 
-export default function Counter() {
-  const [customText, setCustomText] = useState("");
-  const [selectedGesture, setSelectedGesture] = useState("animations/Stand/BodyTalk/Speaking/BodyTalk_1");
-
-  // Reusable helper to talk to the backend
-  const send = async (type: string, context: string) => {
-    try {
-      await fetch("http://localhost:8000/button_pressed", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ type, context }),
-      });
-      // Backticks restored here:
-      console.log(`Sent ${type}: ${context}`);
-    } catch (err) {
-      // Backticks restored here:
-      console.error(`Error sending ${type}:`, err);
-    }
-  };
-
-  function list_generator(header: string, items: string[]) {
-    return (
-      <div style={{ flex: 1, minWidth: '200px' }}>
-        <strong style={{ display: 'block', marginBottom: '10px', borderBottom: '1px solid #eee' }}>{header}</strong>
-        <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
-          {items.map((item, index) => (
-            <li key={index} style={{ 
-              display: 'flex', 
-              justifyContent: 'space-between', 
-              alignItems: 'center', 
-              marginBottom: '8px',
-              fontSize: '14px' 
-            }}>
-              <span>{item}</span>
-              <button 
-                onClick={() => send("override", "2")} 
-                style={{ 
-                  width: '20px', 
-                  height: '20px', 
-                  padding: 0, 
-                  display: 'flex', 
-                  alignItems: 'center', 
-                  justifyContent: 'center',
-                  cursor: 'pointer',
-                  fontSize: '12px'
-                }}
-                title="Send Override 2"
-              >
-                ▶
-              </button>
-            </li>
-          ))}
-        </ul>
-      </div>
-    );
-  }
+/**
+ * A minimal counter component that demonstrates basic React state handling.
+ *
+ * Maintains an internal count value and provides buttons to increment and reset it.
+ *
+ * @returns A JSX element rendering the counter UI.
+ */
+function Counter() {
+  /** The current counter value. */
+  const [count, setCount] = useState(0)
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', padding: '20px' }}>
-      
-      <div style={{ display: 'flex', gap: '10px' }}>
-        <input 
-          type="text" 
-          value={customText} 
-          onChange={(e) => setCustomText(e.target.value)}
-          placeholder="Type something for Pepper to say..."
-          style={{ padding: '8px', flex: 1 }}
-        />
-        <button onClick={() => send("speech", customText)} style={{ padding: '8px 16px' }}>
-          Say Custom Text
-        </button>
-      </div>
-
-      <div style={{ display: 'flex', gap: '10px' }}>
-        <button onClick={() => send("speech", "Hello, I'm Pepper")}>
-          "Hello, I'm Pepper"
-        </button>
-        <button onClick={() => send("speech", "Could you repeat that please")}>
-          "Repeat please"
-        </button>
-        <button onClick={() => send("speech", "Tell me something about yourself")}>
-          "About yourself"
-        </button>
-      </div>
-
-      <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
-        <label htmlFor="gesture-select">Select Gesture:</label>
-        <select 
-          id="gesture-select"
-          value={selectedGesture} 
-          onChange={(e) => setSelectedGesture(e.target.value)}
-          style={{ padding: '8px', borderRadius: '4px', flex: 1 }}
-        >
-          <option value="animations/Stand/BodyTalk/Speaking/BodyTalk_1">Body Talk 1</option>
-          <option value="animations/Stand/Gestures/Thinking_8">Thinking "8"</option>
-          <option value="animations/Stand/Gestures/Thinking_1">Thinking "1"</option>
-          <option value="animations/Stand/Emotions/Positive/Happy_1">Happy</option>
-        </select>
-        <button onClick={() => send("gesture", selectedGesture)} style={{ padding: '8px 16px' }}>
-          Actuate Gesture
-        </button>
-      </div>
-
-      <div style={{ display: 'flex', gap: '30px', flexWrap: 'wrap' }}>
-        {list_generator("Goals to complete:", ["Greet user", "Introduce self", "Ask for name"])}
-        {list_generator("Conditional norms:", ["If {user_tired}, be less energetic", "If {play_mundo}, go where you please"])}
-        {list_generator("Activate triggers:", ["If {user_thirsty}, offer drink", "If {name == Karen}, be triggered"])}
-      </div>
+    <div className="card">
+      <button onClick={() => setCount((count) => count + 1)}>
+        count is {count}
+      </button>
+      <button className='reset' onClick={() => setCount(0)}>
+        Reset Counter
+      </button>
     </div>
-  );
-}
\ No newline at end of file
+  )
+}
+export default Counter
\ No newline at end of file