diff --git a/app.js b/app.js
index 8b7e586..fc3dde0 100644
--- a/app.js
+++ b/app.js
@@ -6,13 +6,22 @@ import Hyperdrive from 'hyperdrive';
 import Corestore from 'corestore';
 import { EventEmitter } from 'events';
 import fs from "fs";
+import handleCommand from './commands.js';
 
+const agentAvatarPath = './assets/agent.png';
+let agentAvatar = '';
 const storagePath = `./storage/`;
 const store = new Corestore(storagePath);
 const drive = new Hyperdrive(store);
 
 await drive.ready();
 
+// Load the agent avatar once when the app starts
+if (fs.existsSync(agentAvatarPath)) {
+  const avatarBuffer = fs.readFileSync(agentAvatarPath);
+  agentAvatar = `data:image/png;base64,${b4a.toString(avatarBuffer, 'base64')}`;
+}
+
 let activeRooms = [];
 const eventEmitter = new EventEmitter();
 
@@ -484,7 +493,6 @@ function leaveRoom(topic) {
     document.querySelector('#setup').classList.remove('hidden');
   }
 }
-
 function sendMessage(e) {
   e.preventDefault();
   const message = document.querySelector('#message').value;
@@ -493,6 +501,17 @@ function sendMessage(e) {
   const topic = currentTopic();
   const timestamp = Date.now();
 
+  if (message.startsWith('~')) {
+    // Handle command
+    handleCommand(message, {
+      eventEmitter,
+      currentTopic,
+      clearMessages,
+      addMessage: (from, message, avatar, topic) => onMessageAdded(from, message, avatar, topic, timestamp)
+    });
+    return;
+  }
+
   console.log('Sending message:', message); // Debugging log
 
   onMessageAdded(config.userName, message, config.userAvatar, topic, timestamp);
@@ -715,6 +734,10 @@ function clearMessages() {
   while (messagesContainer.firstChild) {
     messagesContainer.removeChild(messagesContainer.firstChild);
   }
+
+  // Clear the messages from the store for the current room
+  const topic = currentTopic();
+  messagesStore[topic] = [];
 }
 
 function toggleSetupView() {
diff --git a/assets/agent.png b/assets/agent.png
new file mode 100644
index 0000000..edcb376
Binary files /dev/null and b/assets/agent.png differ
diff --git a/commands.js b/commands.js
new file mode 100644
index 0000000..c9610cd
--- /dev/null
+++ b/commands.js
@@ -0,0 +1,27 @@
+// commands.js
+import b4a from 'b4a';
+import fs from 'fs';
+
+const agentAvatarPath = './assets/agent.png';
+let agentAvatar = '';
+
+// Load the agent avatar once when the module is imported
+if (fs.existsSync(agentAvatarPath)) {
+  const avatarBuffer = fs.readFileSync(agentAvatarPath);
+  agentAvatar = `data:image/png;base64,${b4a.toString(avatarBuffer, 'base64')}`;
+}
+
+export default function handleCommand(command, context) {
+  const { eventEmitter, currentTopic, clearMessages, addMessage } = context;
+
+  switch (command.trim().toLowerCase()) {
+    case '~clear':
+      clearMessages();
+      break;
+    case '~ping':
+      addMessage('LinkUp', 'pong', agentAvatar, currentTopic());
+      break;
+    default:
+      console.log('Unknown command:', command);
+  }
+}
\ No newline at end of file