diff --git a/webui/src/web-components/sketch-diff-empty-view.ts b/webui/src/web-components/sketch-diff-empty-view.ts
index 753c926..5881e03 100644
--- a/webui/src/web-components/sketch-diff-empty-view.ts
+++ b/webui/src/web-components/sketch-diff-empty-view.ts
@@ -1,80 +1,40 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
 import { customElement } from "lit/decorators.js";
+import { SketchTailwindElement } from "./sketch-tailwind-element.js";
 
 /**
  * A component that displays helpful information when the diff view is empty
  */
 @customElement("sketch-diff-empty-view")
-export class SketchDiffEmptyView extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      width: 100%;
-      box-sizing: border-box;
-    }
+export class SketchDiffEmptyView extends SketchTailwindElement {
 
-    .empty-diff-box {
-      margin: 2rem auto;
-      max-width: 1200px;
-      width: 90%;
-      padding: 2rem;
-      border: 2px solid #e0e0e0;
-      border-radius: 8px;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-      background-color: #ffffff;
-      text-align: center;
-    }
-
-    .empty-diff-title {
-      font-size: 1.5rem;
-      font-weight: 600;
-      margin-bottom: 1.5rem;
-      text-align: center;
-      color: #333;
-    }
-
-    .empty-diff-content {
-      color: #666;
-      line-height: 1.6;
-      font-size: 1rem;
-      text-align: left;
-      margin-bottom: 1rem;
-    }
-
-    strong {
-      font-weight: 600;
-      color: #333;
-    }
-  `;
 
   render() {
     return html`
-      <div class="empty-diff-box">
-        <h2 class="empty-diff-title">How to use the Diff View</h2>
+      <div class="flex flex-col items-center justify-center h-full w-full box-border">
+        <div class="m-8 mx-auto max-w-4xl w-11/12 p-8 border-2 border-gray-300 rounded-lg shadow-sm bg-white text-center">
+          <h2 class="text-2xl font-semibold mb-6 text-center text-gray-800">How to use the Diff View</h2>
 
-        <p class="empty-diff-content">
-          By default, the diff view shows differences between when you started
-          Sketch (the "sketch-base" tag) and the current state. Choose a commit
-          to look at, or, a range of commits, and navigate across files.
-        </p>
+          <p class="text-gray-600 leading-relaxed text-base text-left mb-4">
+            By default, the diff view shows differences between when you started
+            Sketch (the "sketch-base" tag) and the current state. Choose a commit
+            to look at, or, a range of commits, and navigate across files.
+          </p>
 
-        <p class="empty-diff-content">
-          You can select text to leave comments on the code. These will be added
-          to your chat window, and you can click Send to send them along to the
-          agent, which will respond in the chat window.
-        </p>
+          <p class="text-gray-600 leading-relaxed text-base text-left mb-4">
+            You can select text to leave comments on the code. These will be added
+            to your chat window, and you can click Send to send them along to the
+            agent, which will respond in the chat window.
+          </p>
 
-        <p class="empty-diff-content">
-          If the range includes <strong>Uncommitted Changes</strong>, you can
-          <strong>edit</strong> the text as well, and it auto-saves. If you want
-          to clear up a comment or write your own text, just go ahead and do it!
-          Once you're done, though, be sure to commit your changes, either by
-          asking the agent to do so or in the Terminal view.
-        </p>
+          <p class="text-gray-600 leading-relaxed text-base text-left mb-4">
+            If the range includes <strong class="font-semibold text-gray-800">Uncommitted Changes</strong>, you can
+            <strong class="font-semibold text-gray-800">edit</strong> the text as well, and it auto-saves. If you want
+            to clear up a comment or write your own text, just go ahead and do it!
+            Once you're done, though, be sure to commit your changes, either by
+            asking the agent to do so or in the Terminal view.
+          </p>
+        </div>
       </div>
     `;
   }