diff --git a/.changeset/brave-dolls-wait.md b/.changeset/brave-dolls-wait.md
new file mode 100644
index 0000000..50913ae
--- /dev/null
+++ b/.changeset/brave-dolls-wait.md
@@ -0,0 +1,5 @@
+---
+"ada-ui": minor
+---
+
+Added first version of Tile component (WIP)
diff --git a/index.html b/index.html
index abc9279..c094b18 100644
--- a/index.html
+++ b/index.html
@@ -41,6 +41,7 @@
         data-abbr="Cmd"
       ></a>
       <a href="#panel" class="command shade2">Panel</a>
+      <a href="#tile" class="command shade2">Tile</a>
       <a href="#input" class="command">Input</a>
       <a href="#spinner" class="command">Spinner</a>
       <div style="flex: 1" class="spacer"></div>
@@ -95,6 +96,11 @@
               <span>0.85rem</span>
               <span>Small Text, Panel Footer</span>
             </p>
+            <p>
+              <code style="font-size: var(--scale-xs)">--scale-xs</code>
+              <span>0.75rem</span>
+              <span>Tile Footer</span>
+            </p>
           </article>
           <footer></footer>
         </div>
@@ -359,6 +365,39 @@ <h3>Stacking</h3>
           </article>
           <footer></footer>
         </div>
+        <div class="panel">
+          <header><h2 id="tile">Tile</h2></header>
+          <article
+            style="display: grid; grid-auto-flow: column; gap: var(--spacing)"
+          >
+            <div class="tile">
+              <header></header>
+              <article>Tile</article>
+              <footer></footer>
+            </div>
+            <div class="tile shade1">
+              <header></header>
+              <article>Tile</article>
+              <footer></footer>
+            </div>
+            <div class="tile shade2">
+              <header></header>
+              <article>Tile</article>
+              <footer></footer>
+            </div>
+            <div class="tile shade3">
+              <header></header>
+              <article>Tile</article>
+              <footer></footer>
+            </div>
+            <div class="tile warn">
+              <header></header>
+              <article>Tile</article>
+              <footer></footer>
+            </div>
+          </article>
+          <footer></footer>
+        </div>
         <div class="panel">
           <header><h2 id="input">Input</h2></header>
           <article style="display: grid; gap: var(--spacing)">
diff --git a/scss/_global.scss b/scss/_global.scss
index 89540e0..c338acf 100644
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -1,6 +1,7 @@
 :root {
   --font-family: "Open Sans", sans-serif;
   --font-size: 16px;
+  --scale-xs: 0.75rem;
   --scale-sm: 0.85rem;
   --scale-base: 1rem;
   --scale-lg: 1.2rem;
@@ -12,6 +13,7 @@
   --spacing-sm: 6px;
   --spacing: 10px;
   --spacing-lg: 14px;
+  --border-width-sm: 1px;
   --border-width: 2px;
   --border-radius: 0.3rem;
 
diff --git a/scss/_panel.scss b/scss/_panel.scss
index cd85025..de64898 100644
--- a/scss/_panel.scss
+++ b/scss/_panel.scss
@@ -6,6 +6,16 @@
   height: 1rem;
   width: 1rem;
   z-index: 2;
+
+  --thickness: var(--border-width);
+
+  .tile > & {
+    height: 0.75rem;
+    width: 0.75rem;
+    border-color: var(--color600);
+
+    --thickness: var(--border-width-sm);
+  }
 }
 
 .panel {
@@ -19,7 +29,7 @@
   > header {
     position: relative;
     @extend %header;
-    font-size: var(--scale-xl);
+    font-size: var(--scale-2xl);
 
     padding: var(--spacing-sm) var(--spacing);
 
@@ -29,14 +39,14 @@
 
     &::before {
       @extend %corner-base;
-      border-width: var(--border-width) 0 0 var(--border-width);
+      border-width: var(--thickness) 0 0 var(--thickness);
       border-radius: var(--border-radius) 0 0 0;
       left: 0;
       top: 0;
     }
     &::after {
       @extend %corner-base;
-      border-width: var(--border-width) var(--border-width) 0 0;
+      border-width: var(--thickness) var(--thickness) 0 0;
       border-radius: 0 var(--border-radius) 0 0;
       right: 0;
       top: 0;
@@ -63,17 +73,31 @@
 
     &::before {
       @extend %corner-base;
-      border-width: 0 0 var(--border-width) var(--border-width);
+      border-width: 0 0 var(--thickness) var(--thickness);
       border-radius: 0 0 0 var(--border-radius);
       left: 0;
       bottom: 0;
     }
     &::after {
       @extend %corner-base;
-      border-width: 0 var(--border-width) var(--border-width) 0;
+      border-width: 0 var(--thickness) var(--thickness) 0;
       border-radius: 0 0 var(--border-radius) 0;
       right: 0;
       bottom: 0;
     }
   }
 }
+
+.tile {
+  @extend .panel;
+
+  background: oklch(var(--800) / 0.75);
+
+  > header {
+    font-size: var(--scale-lg);
+  }
+
+  > footer {
+    font-size: var(--scale-xs);
+  }
+}