diff --git a/fab-ui/index.html b/fab-ui/index.html
index 512fff4..c29f6df 100644
--- a/fab-ui/index.html
+++ b/fab-ui/index.html
@@ -4,34 +4,38 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Lit + TS</title>
+    <title>FaB Cards</title>
     <link rel="stylesheet" href="./src/index.css" />
     <script type="module" src="/src/fab-card.ts"></script>
   </head>
   <body>
     <div class="cards-list">
       <fab-card
-        cardSetId="ROS154"
-        cardName="Arcane Cussing"
-        cardColor="Blue"
-        cardImageSrc="http://localhost:8000/p/ROS154/w400"
-        cardComment="A comment about the card"
+        setId="ROS152"
+        name="Arcane Cussing"
+        color="Red"
+        rarity="C"
       ></fab-card>
       <fab-card
-        cardSetId="ROS154"
-        cardName="Arcane Cussing"
-        cardColor="Blue"
-        cardImageSrc="http://localhost:8000/p/ROS154/w400"
-        cardComment="A comment about the card"
+        setId="ROS153"
+        name="Arcane Cussing"
+        color="Yellow"
         foiling="R"
+        rarity="C"
       ></fab-card>
       <fab-card
-        cardSetId="ROS154"
-        cardName="Arcane Cussing"
-        cardColor="Blue"
-        cardImageSrc="http://localhost:8000/p/ROS154/w400"
-        cardComment="A comment about the card"
+        setId="ROS154"
+        name="Arcane Cussing"
+        color="Blue"
         foiling="C"
+        rarity="C"
+      ></fab-card>
+      <fab-card
+        setId="HNT076"
+        name="Art of the Dragon: Scale"
+        comment="Longer name"
+        color="Red"
+        rarity="R"
       ></fab-card>
     </div>
   </body>
diff --git a/fab-ui/src/fab-card.ts b/fab-ui/src/fab-card.ts
index 64c02a1..af8aeca 100644
--- a/fab-ui/src/fab-card.ts
+++ b/fab-ui/src/fab-card.ts
@@ -1,16 +1,64 @@
 import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+@customElement("fab-rarity-symbol")
+export class FabRaritySymbol extends LitElement {
+    @property({ type: String })
+    rarity = '';
+
+    render() {
+        return html`
+            <code class="fab-rarity-icon fab-rarity-${this.rarity.toLowerCase()}">${this.rarity}</code>
+        `;
+    }
+
+    static styles = css`
+    .fab-rarity-icon {
+        font-family: monospace;
+        display: inline-block;
+        width: 1.2em;
+        height: 1.2em;
+        line-height: 1.1em;
+        text-align: center;
+        border-radius: 50%;
+        color: #fff;
+        font-size: 0.7em;
+    }
+
+    .fab-rarity-icon.fab-rarity-m {
+        background-color: red;
+    }
+
+    .fab-rarity-icon.fab-rarity-r {
+        background-color: blue;
+    }
+
+    .fab-rarity-icon.fab-rarity-p {
+        background-color: green;
+    }
+
+    .fab-rarity-icon.fab-rarity-c {
+        background-color: gray;
+    }
+
+    .fab-rarity-icon.fab-rarity-l {
+        background-color: orange;
+    }
+    `;
+}
+
 @customElement('fab-card')
 export class FabCard extends LitElement {
     @property({ type: String })
-    cardSetId = '';
+    setId = '';
     @property({ type: String })
-    cardName = '';
+    name = '';
     @property({ type: String })
-    cardColor = '';
+    color = '';
     @property({ type: String })
-    cardComment = '';
+    rarity = '';
+    @property({ type: String })
+    comment = '';
     @property({ type: String })
     foiling = 'S';
 
@@ -18,14 +66,15 @@ export class FabCard extends LitElement {
         return html`
     <div class="card  ${this.foiling != 'S' ? (this.foiling == 'R' ? 'rainbow-foiling' : 'cold-foiling') : ''}">
         <div class="card-img">
-            <img class="single-card-img" src="http://localhost:8000/p/${this.cardSetId}/w400" alt="${this.cardName}">
+            <img class="single-card-img" src="http://localhost:8000/p/${this.setId}/w400" alt="${this.name}">
         </div>
         <div class="card-details">
-            <span class="printing-id">${this.cardSetId}</span>
-            <span class="card-name">${this.cardName}</span>
-            <span class="card-color color-${this.cardColor}">(${this.cardColor})</span>
+            <fab-rarity-symbol rarity="${this.rarity}"></fab-rarity-symbol>
+            <span class="printing-id">${this.setId}</span>
+            <span class="card-name">${this.name}</span>
+            <span class="card-color color-${this.color.toLowerCase()}">(${this.color})</span>
             <span class="card-foiling">${this.foiling == "S" ? '' : this.foiling }</span>
-            <!--<span class="comment">${this.cardComment}</span>-->
+            <!--<span class="comment">${this.comment}</span>-->
         </div>
     </div>
         `;
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8b9e75c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Lit Example</title>
+  <!-- Import Lit via CDN -->
+  <script type="module" src="https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js"></script>
+</head>
+<body>
+  <script type="module">
+    import {LitElement, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';
+
+    class FabCard extends LitElement {
+      @property({type: String}) imgSrc = '';
+      @property({type: String}) printingId = '';
+      @property({type: String}) cardName = '';
+      @property({type: String}) cardColor = '';
+      @property({type: String}) comment = '';
+
+      render() {
+        return html`
+          <div class="card ">
+            <div class="card-img">
+                <img class="single-card-img" src="${this.imgSrc}" alt="${this.cardName}">
+            </div>
+            <div class="card-details">
+            <span class="printing-id">${this.printingId}</span>
+            <span class="card-name">${this.cardName}</span>
+            <span class="card-color color-blue">${this.cardColor}</span>
+            <span class="comment">${this.comment}</span>
+        </div>
+    </div>
+        `;
+      }
+    }
+
+    customElements.define('fab-card', FabCard);
+  </script>
+
+  <fab-card
+    imgSrc="http://localhost:8000/p/ROS154/w400"
+    printingId="ROS154"
+    cardName="Arcane Cussing"
+    cardColor="(Blue)"
+    comment=""
+  ></fab-card>
+</body>
+</html>
\ No newline at end of file
