diff --git a/src/public/text-messages-embed.html b/src/public/text-messages-embed.html
index 2609d95..52736d1 100644
--- a/src/public/text-messages-embed.html
+++ b/src/public/text-messages-embed.html
@@ -29,8 +29,21 @@
 <div id="app" v-cloak>
     <div class="h-full flex flex-col overflow-hidden">
 
+        <!-- empty state -->
+        <div v-if="messages.length === 0" class="flex h-full">
+            <div class="flex flex-col mx-auto my-auto p-4 text-gray-500 text-center">
+                <div class="mb-2 mx-auto">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-10">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
+                    </svg>
+                </div>
+                <div class="font-semibold">No Messages</div>
+                <div>There's no messages yet...</div>
+            </div>
+        </div>
+
         <!-- note: must use flex-col-reverse to prevent ui scrolling when adding older messages to ui -->
-        <div id="messages" class="h-full flex flex-col-reverse p-3 overflow-y-auto">
+        <div v-show="messages.length > 0" id="messages" class="h-full flex flex-col-reverse p-3 overflow-y-auto">
 
             <!-- messages -->
             <div :key="message.id" v-for="message of reversedMessages" class="flex flex-col max-w-xl items-start my-1.5">