diff --git a/README.md b/README.md
index eae2129..a45fb22 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,16 @@ Being form associated also means that you can send data to your own servers with
 </form>
 ```
 
+Stones can be decorated with markers. The `go-stone-marker` element can be passed as a child to `go-stone` and you can add any icon or html entity that you like.
+
+```html
+<go-board>
+  <go-stone slot="Q4" color="black">
+    <go-stone-marker>&check;</go-stone-marker>
+  </go-stone>
+</go-board>
+```
+
 ## Attributes
 
 | Item              | description                                                           |
diff --git a/dev.html b/dev.html
index 9b3b684..49bb251 100644
--- a/dev.html
+++ b/dev.html
@@ -33,7 +33,11 @@
     </style>
 
     <form action="/save-game">
-      <go-board name="board" sfx="/assets/sfx" disablelastmarker></go-board>
+      <go-board name="board" sfx="/assets/sfx" disablelastmarker>
+        <go-stone slot="Q4" color="black">
+          <go-stone-marker>&#10005;</go-stone-marker>
+        </go-stone>
+      </go-board>
     </form>
   </body>
 </html>
diff --git a/src/lib.ts b/src/lib.ts
index e89c73c..5fe7ffd 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -1,2 +1,3 @@
 export { GoBoardElement } from "./lib/board.js";
 export { GoStoneElement } from "./lib/stone.js";
+export { GoStoneMarkerElement } from "./lib/marker.js";
diff --git a/src/lib/marker.ts b/src/lib/marker.ts
new file mode 100644
index 0000000..89a5b23
--- /dev/null
+++ b/src/lib/marker.ts
@@ -0,0 +1,18 @@
+import { css, element, html, shadow, tagName } from "@joist/element";
+
+@element
+export class GoStoneMarkerElement extends HTMLElement {
+  @tagName static tag = "go-stone-marker";
+
+  @shadow styles = css`
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 50px;
+      width: 50px;
+    }
+  `;
+
+  @shadow dom = html`<slot></slot>`;
+}
diff --git a/src/lib/stone.ts b/src/lib/stone.ts
index b9c90ef..7aa107a 100644
--- a/src/lib/stone.ts
+++ b/src/lib/stone.ts
@@ -1,4 +1,4 @@
-import { attr, css, tagName, shadow, element } from "@joist/element";
+import { attr, css, tagName, shadow, element, html } from "@joist/element";
 
 import { GoBoardElement } from "./board.js";
 
@@ -27,6 +27,7 @@ export class GoStoneElement extends HTMLElement {
     }
 
     :host([color="black"]) {
+      color: #fff;
       background: black;
       background-image: radial-gradient(
         circle at center,
@@ -36,6 +37,7 @@ export class GoStoneElement extends HTMLElement {
     }
 
     :host([color="white"]) {
+      color: #000;
       background: #fff;
       background-image: radial-gradient(
         circle at center,
@@ -45,6 +47,8 @@ export class GoStoneElement extends HTMLElement {
     }
   `;
 
+  @shadow dom = html`<slot></slot>`;
+
   @attr accessor color: StoneColor = "black";
 
   #parent: GoBoardElement | null = null;
diff --git a/src/register.ts b/src/register.ts
index fcef889..05e2e89 100644
--- a/src/register.ts
+++ b/src/register.ts
@@ -1,20 +1,24 @@
 import "./lib/board.js";
 import "./lib/board.js";
 import "./lib/stone.js";
+import "./lib/marker.js";
 
 import { GoBoardElement } from "./lib/board.js";
 import { GoStoneElement } from "./lib/stone.js";
+import { GoStoneMarkerElement } from "./lib/marker.js";
 
 declare global {
   interface HTMLElementTagNameMap {
     "go-board": GoBoardElement;
     "go-stone": GoStoneElement;
+    "go-marker": GoStoneMarkerElement;
   }
 
   namespace JSX {
     interface IntrinsicElements {
       ["go-board"]: any;
       ["go-stone"]: any;
+      ["go-marker"]: any;
     }
   }
 }