diff --git a/src/board/Board.ts b/src/board/Board.ts
index 82f43eb..2dbd878 100644
--- a/src/board/Board.ts
+++ b/src/board/Board.ts
@@ -62,7 +62,11 @@ class Board {
   private tempCanvas: HTMLCanvasElement = document.createElement("canvas");
   public canvas: HTMLCanvasElement = document.createElement("canvas");
 
-  constructor(config: Partial<BoardConfig> = {}) {
+  constructor(config: Partial<BoardConfig> = {}, canvas?: HTMLCanvasElement) {
+    if (canvas) {
+      this.canvas = canvas;
+    }
+
     const ctx = this.canvas.getContext("2d");
     const tempCtx = this.tempCanvas.getContext("2d");
     this.canvas.classList.add("board");
diff --git a/src/board/styles-board/index.ts b/src/board/styles-board/index.ts
index 53e10e5..ac93ba2 100644
--- a/src/board/styles-board/index.ts
+++ b/src/board/styles-board/index.ts
@@ -1,17 +1,23 @@
-import standard from "./mono/standard";
-import chesscom from "./mono/chesscom";
-import lichess from "./mono/lichess";
-import leko from "./mono/leko";
-import patina from "./mono/patina";
-import lila from "./mono/lila";
-import peach from "./mono/peach";
-import violet from "./mono/violet";
-import danya from "./mono/danya";
-import botez from "./mono/botez";
-import mud from "./mono/mud";
-import rose from "./mono/rose";
-
-import avocado from "./colorful/avocado";
+import standard from "./solid/standard";
+import danny from "./solid/danny";
+import dannyGreen from "./solid/danny-green";
+import dannyCyan from "./solid/danny-cyan";
+import dannyBlue from "./solid/danny-blue";
+import dannyPurple from "./solid/danny-purple";
+import dannyPink from "./solid/danny-pink";
+import dannyRed from "./solid/danny-red";
+import dannyYellow from "./solid/danny-yellow";
+import lichess from "./solid/lichess";
+import leko from "./solid/leko";
+import patina from "./solid/patina";
+import lila from "./solid/lila";
+import peach from "./solid/peach";
+import violet from "./solid/violet";
+import danya from "./solid/danya";
+import botez from "./solid/botez";
+import mud from "./solid/mud";
+import rose from "./solid/rose";
+import avocado from "./solid/avocado";
 
 import calm from "./gradient/calm";
 import laguna from "./gradient/laguna";
@@ -30,7 +36,14 @@ const styles = {
   mud,
   peach,
   violet,
-  chesscom,
+  danny,
+  dannyGreen,
+  dannyCyan,
+  dannyBlue,
+  dannyPurple,
+  dannyPink,
+  dannyRed,
+  dannyYellow,
   lichess,
   danya,
   botez,
diff --git a/src/board/styles-board/colorful/avocado.ts b/src/board/styles-board/solid/avocado.ts
similarity index 96%
rename from src/board/styles-board/colorful/avocado.ts
rename to src/board/styles-board/solid/avocado.ts
index 11514e3..ae72045 100644
--- a/src/board/styles-board/colorful/avocado.ts
+++ b/src/board/styles-board/solid/avocado.ts
@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Avocado",
-  category: "colorful",
+  category: "solid",
   background: {
     type: "solid",
     data: {
diff --git a/src/board/styles-board/mono/botez.ts b/src/board/styles-board/solid/botez.ts
similarity index 96%
rename from src/board/styles-board/mono/botez.ts
rename to src/board/styles-board/solid/botez.ts
index ef2cdf9..bab227d 100644
--- a/src/board/styles-board/mono/botez.ts
+++ b/src/board/styles-board/solid/botez.ts
@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Botez",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {
diff --git a/src/board/styles-board/solid/danny-blue.ts b/src/board/styles-board/solid/danny-blue.ts
new file mode 100644
index 0000000..4903604
--- /dev/null
+++ b/src/board/styles-board/solid/danny-blue.ts
@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Danny Blue",
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#566696",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#eeeed2",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#ffff007f",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#2B2E31",
+    },
+  },
+  coords: {
+    onLight: "#2F3752",
+    onDark: "#fcfce1",
+    onBorder: "#eeeed2",
+  },
+};
+
+export default style;
diff --git a/src/board/styles-board/solid/danny-cyan.ts b/src/board/styles-board/solid/danny-cyan.ts
new file mode 100644
index 0000000..39d42c1
--- /dev/null
+++ b/src/board/styles-board/solid/danny-cyan.ts
@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Danny Cyan",
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#569696",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#eeeed2",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#ffff007f",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#2B3130",
+    },
+  },
+  coords: {
+    onLight: "#2F5152",
+    onDark: "#fcfce1",
+    onBorder: "#eeeed2",
+  },
+};
+
+export default style;
diff --git a/src/board/styles-board/solid/danny-green.ts b/src/board/styles-board/solid/danny-green.ts
new file mode 100644
index 0000000..cccfcbc
--- /dev/null
+++ b/src/board/styles-board/solid/danny-green.ts
@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Danny Green",
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#569666",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#eeeed2",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#ffff007f",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#2B312B",
+    },
+  },
+  coords: {
+    onLight: "#2F5238",
+    onDark: "#fcfce1",
+    onBorder: "#eeeed2",
+  },
+};
+
+export default style;
diff --git a/src/board/styles-board/solid/danny-pink.ts b/src/board/styles-board/solid/danny-pink.ts
new file mode 100644
index 0000000..55f033c
--- /dev/null
+++ b/src/board/styles-board/solid/danny-pink.ts
@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Danny Pink",
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#965686",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#eeeed2",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#ffff007f",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#312B31",
+    },
+  },
+  coords: {
+    onLight: "#522F49",
+    onDark: "#fcfce1",
+    onBorder: "#eeeed2",
+  },
+};
+
+export default style;
diff --git a/src/board/styles-board/solid/danny-purple.ts b/src/board/styles-board/solid/danny-purple.ts
new file mode 100644
index 0000000..54a2ce1
--- /dev/null
+++ b/src/board/styles-board/solid/danny-purple.ts
@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Danny Purple",
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#765696",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#eeeed2",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#ffff007f",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#2D2B31",
+    },
+  },
+  coords: {
+    onLight: "#412F52",
+    onDark: "#fcfce1",
+    onBorder: "#eeeed2",
+  },
+};
+
+export default style;
diff --git a/src/board/styles-board/solid/danny-red.ts b/src/board/styles-board/solid/danny-red.ts
new file mode 100644
index 0000000..5673f6e
--- /dev/null
+++ b/src/board/styles-board/solid/danny-red.ts
@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Danny Red",
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#965656",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#eeeed2",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#ffff007f",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#312B2D",
+    },
+  },
+  coords: {
+    onLight: "#522F2F",
+    onDark: "#fcfce1",
+    onBorder: "#eeeed2",
+  },
+};
+
+export default style;
diff --git a/src/board/styles-board/solid/danny-yellow.ts b/src/board/styles-board/solid/danny-yellow.ts
new file mode 100644
index 0000000..1e13c50
--- /dev/null
+++ b/src/board/styles-board/solid/danny-yellow.ts
@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Danny Yellow",
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#968656",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#eeeed2",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#ffff007f",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#312E2B",
+    },
+  },
+  coords: {
+    onLight: "#524A2F",
+    onDark: "#fcfce1",
+    onBorder: "#eeeed2",
+  },
+};
+
+export default style;
diff --git a/src/board/styles-board/mono/chesscom.ts b/src/board/styles-board/solid/danny.ts
similarity index 93%
rename from src/board/styles-board/mono/chesscom.ts
rename to src/board/styles-board/solid/danny.ts
index 4f868d9..b671fde 100644
--- a/src/board/styles-board/mono/chesscom.ts
+++ b/src/board/styles-board/solid/danny.ts
@@ -1,8 +1,8 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Chessc*m",
-  category: "mono",
+  name: "Danny",
+  category: "solid",
   background: {
     type: "solid",
     data: {
diff --git a/src/board/styles-board/mono/danya.ts b/src/board/styles-board/solid/danya.ts
similarity index 96%
rename from src/board/styles-board/mono/danya.ts
rename to src/board/styles-board/solid/danya.ts
index c3aee7c..b25adc5 100644
--- a/src/board/styles-board/mono/danya.ts
+++ b/src/board/styles-board/solid/danya.ts
@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Danya",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {
diff --git a/src/board/styles-board/mono/leko.ts b/src/board/styles-board/solid/leko.ts
similarity index 96%
rename from src/board/styles-board/mono/leko.ts
rename to src/board/styles-board/solid/leko.ts
index 9fe6fad..7db3a41 100644
--- a/src/board/styles-board/mono/leko.ts
+++ b/src/board/styles-board/solid/leko.ts
@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Leko",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {
diff --git a/src/board/styles-board/mono/lichess.ts b/src/board/styles-board/solid/lichess.ts
similarity index 96%
rename from src/board/styles-board/mono/lichess.ts
rename to src/board/styles-board/solid/lichess.ts
index a27ece1..8afef2d 100644
--- a/src/board/styles-board/mono/lichess.ts
+++ b/src/board/styles-board/solid/lichess.ts
@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Lichess",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {
diff --git a/src/board/styles-board/mono/lila.ts b/src/board/styles-board/solid/lila.ts
similarity index 96%
rename from src/board/styles-board/mono/lila.ts
rename to src/board/styles-board/solid/lila.ts
index 5971291..3722b4e 100644
--- a/src/board/styles-board/mono/lila.ts
+++ b/src/board/styles-board/solid/lila.ts
@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Lila",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {
diff --git a/src/board/styles-board/mono/mono.ts b/src/board/styles-board/solid/mono.ts
similarity index 96%
rename from src/board/styles-board/mono/mono.ts
rename to src/board/styles-board/solid/mono.ts
index 1be50ee..cd765dc 100644
--- a/src/board/styles-board/mono/mono.ts
+++ b/src/board/styles-board/solid/mono.ts
@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Mono",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {
diff --git a/src/board/styles-board/mono/mud.ts b/src/board/styles-board/solid/mud.ts
similarity index 96%
rename from src/board/styles-board/mono/mud.ts
rename to src/board/styles-board/solid/mud.ts
index db2e499..3176784 100644
--- a/src/board/styles-board/mono/mud.ts
+++ b/src/board/styles-board/solid/mud.ts
@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Beige",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {
diff --git a/src/board/styles-board/mono/patina.ts b/src/board/styles-board/solid/patina.ts
similarity index 96%
rename from src/board/styles-board/mono/patina.ts
rename to src/board/styles-board/solid/patina.ts
index d550c74..b7d5274 100644
--- a/src/board/styles-board/mono/patina.ts
+++ b/src/board/styles-board/solid/patina.ts
@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Beige",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {
diff --git a/src/board/styles-board/mono/peach.ts b/src/board/styles-board/solid/peach.ts
similarity index 96%
rename from src/board/styles-board/mono/peach.ts
rename to src/board/styles-board/solid/peach.ts
index 18a4ab8..72d7a36 100644
--- a/src/board/styles-board/mono/peach.ts
+++ b/src/board/styles-board/solid/peach.ts
@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Peach",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {
diff --git a/src/board/styles-board/mono/rose.ts b/src/board/styles-board/solid/rose.ts
similarity index 96%
rename from src/board/styles-board/mono/rose.ts
rename to src/board/styles-board/solid/rose.ts
index 1f05f1d..365159b 100644
--- a/src/board/styles-board/mono/rose.ts
+++ b/src/board/styles-board/solid/rose.ts
@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Rose",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {
diff --git a/src/board/styles-board/mono/standard.ts b/src/board/styles-board/solid/standard.ts
similarity index 96%
rename from src/board/styles-board/mono/standard.ts
rename to src/board/styles-board/solid/standard.ts
index dd5d537..fa53ead 100644
--- a/src/board/styles-board/mono/standard.ts
+++ b/src/board/styles-board/solid/standard.ts
@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Standard",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {
diff --git a/src/board/styles-board/mono/violet.ts b/src/board/styles-board/solid/violet.ts
similarity index 96%
rename from src/board/styles-board/mono/violet.ts
rename to src/board/styles-board/solid/violet.ts
index 2e65a6a..c82629f 100644
--- a/src/board/styles-board/mono/violet.ts
+++ b/src/board/styles-board/solid/violet.ts
@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Violet",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {
diff --git a/src/board/styles-pieces/_.ts b/src/board/styles-pieces/_.ts
deleted file mode 100755
index 81dba1d..0000000
--- a/src/board/styles-pieces/_.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-const harlequin = {
-  kw: "/pieces/harlequin/kw.svg",
-  qw: "/pieces/harlequin/qw.svg",
-  rw: "/pieces/harlequin/rw.svg",
-  bw: "/pieces/harlequin/bw.svg",
-  nw: "/pieces/harlequin/nw.svg",
-  pw: "/pieces/harlequin/pw.svg",
-  kb: "/pieces/harlequin/kb.svg",
-  qb: "/pieces/harlequin/qb.svg",
-  rb: "/pieces/harlequin/rb.svg",
-  bb: "/pieces/harlequin/bb.svg",
-  nb: "/pieces/harlequin/nb.svg",
-  pb: "/pieces/harlequin/pb.svg",
-};
-
-export default harlequin;
diff --git a/src/types.ts b/src/types.ts
index 5fde8f1..6876ba8 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -52,13 +52,7 @@ export type MoveIndicator =
   | { type: "hueShift"; data: number }
   | { type: "color"; data: string };
 
-export type StyleCategory =
-  | "mono"
-  | "colorful"
-  | "gradient"
-  | "material"
-  | "pic"
-  | "custom";
+export type StyleCategory = "solid" | "gradient" | "pic" | "custom";
 
 export type Style = {
   name: string;
diff --git a/src/ui/App.css b/src/ui/App.css
index 585b713..fba087b 100644
--- a/src/ui/App.css
+++ b/src/ui/App.css
@@ -180,12 +180,6 @@ a:hover {
   }
 }
 
-@media (orientation: landscape) and (max-width: 1366px) {
-  html {
-    font-size: 8px;
-  }
-}
-
 @media (orientation: landscape) and (max-width: 1365px) {
   .layout {
     grid-template-columns: 2fr 1fr;