diff --git a/src/renderer/store.js b/src/renderer/store.js
index 60c29026..1e4ae4c5 100644
--- a/src/renderer/store.js
+++ b/src/renderer/store.js
@@ -141,6 +141,9 @@ export const store = new Vuex.Store({
       Makruk: 'makruk',
       Shogi: 'shogi',
       Janggi: 'janggi',
+      Janggicasual: 'janggicasual',
+      Janggimodern: 'janggimodern',
+      Janggitraditional: 'janggitraditional',
       Xiangqi: 'xiangqi',
       Fischerandom: 'fischerandom'
 
@@ -210,7 +213,7 @@ export const store = new Vuex.Store({
       '+ Add Custom', 'xiangqi'
     ],
     janggiVariants: [
-      '+ Add Custom', 'janggi'
+      '+ Add Custom', 'janggi', 'janggicasual', 'janggimodern', 'janggitraditional'
     ],
     shogiVariants: [
       '+ Add Custom', 'shogi'
@@ -1429,7 +1432,7 @@ export const store = new Vuex.Store({
         return 0
       } else {
         const var2Dim = {
-          shogi: 1, xiangqi: 3, janggi: 3, makruk: 0
+          shogi: 1, xiangqi: 3, janggi: 3, makruk: 0, janggicasual: 3, janggimodern: 3, janggitraditional: 3
         }
         return var2Dim[state.variant]
       }
diff --git a/static/board-css/xiangqi/janggicasual/brown.css b/static/board-css/xiangqi/janggicasual/brown.css
new file mode 100644
index 00000000..bc4afb70
--- /dev/null
+++ b/static/board-css/xiangqi/janggicasual/brown.css
@@ -0,0 +1,7 @@
+.cg-board-wrap {
+  background-image: url('../../../board/svg/JanggiBrownCoords.svg');
+  width: 100%;
+  background-size: cover;
+  height: 100%;
+  padding:0;
+}
diff --git a/static/board-css/xiangqi/janggicasual/customJanggi1.css b/static/board-css/xiangqi/janggicasual/customJanggi1.css
new file mode 100644
index 00000000..3d452e66
--- /dev/null
+++ b/static/board-css/xiangqi/janggicasual/customJanggi1.css
@@ -0,0 +1,8 @@
+.cg-board-wrap {
+    background-image: url('../../../board/svg/customJanggi1.svg');
+    width: 100%;
+    background-size: cover;
+    height: 100%;
+    padding:0;
+  }
+  
\ No newline at end of file
diff --git a/static/board-css/xiangqi/janggicasual/customJanggi2.css b/static/board-css/xiangqi/janggicasual/customJanggi2.css
new file mode 100644
index 00000000..01cc67bb
--- /dev/null
+++ b/static/board-css/xiangqi/janggicasual/customJanggi2.css
@@ -0,0 +1,8 @@
+.cg-board-wrap {
+    background-image: url('../../../board/svg/customJanggi2.svg');
+    width: 100%;
+    background-size: cover;
+    height: 100%;
+    padding:0;
+  }
+  
\ No newline at end of file
diff --git a/static/board-css/xiangqi/janggicasual/customJanggi3.css b/static/board-css/xiangqi/janggicasual/customJanggi3.css
new file mode 100644
index 00000000..5fa4dca3
--- /dev/null
+++ b/static/board-css/xiangqi/janggicasual/customJanggi3.css
@@ -0,0 +1,8 @@
+.cg-board-wrap {
+    background-image: url('../../../board/svg/customJanggi3.svg');
+    width: 100%;
+    background-size: cover;
+    height: 100%;
+    padding:0;
+  }
+  
\ No newline at end of file
diff --git a/static/board-css/xiangqi/janggicasual/customJanggi4.css b/static/board-css/xiangqi/janggicasual/customJanggi4.css
new file mode 100644
index 00000000..ff1aa078
--- /dev/null
+++ b/static/board-css/xiangqi/janggicasual/customJanggi4.css
@@ -0,0 +1,8 @@
+.cg-board-wrap {
+    background-image: url('../../../board/svg/customJanggi4.svg');
+    width: 100%;
+    background-size: cover;
+    height: 100%;
+    padding:0;
+  }
+  
\ No newline at end of file
diff --git a/static/board-css/xiangqi/janggicasual/customJanggi5.css b/static/board-css/xiangqi/janggicasual/customJanggi5.css
new file mode 100644
index 00000000..c5f92429
--- /dev/null
+++ b/static/board-css/xiangqi/janggicasual/customJanggi5.css
@@ -0,0 +1,8 @@
+.cg-board-wrap {
+    background-image: url('../../../board/svg/customJanggi5.svg');
+    width: 100%;
+    background-size: cover;
+    height: 100%;
+    padding:0;
+  }
+  
\ No newline at end of file
diff --git a/static/board-css/xiangqi/janggicasual/dark.css b/static/board-css/xiangqi/janggicasual/dark.css
new file mode 100644
index 00000000..7257eb8d
--- /dev/null
+++ b/static/board-css/xiangqi/janggicasual/dark.css
@@ -0,0 +1,7 @@
+.cg-board-wrap {
+  background-image: url('../../../board/svg/JanggiDarkCoords.svg');
+  width: 100%;
+  background-size: cover;
+  height: 100%;
+  padding:0;
+}
diff --git a/static/board-css/xiangqi/janggicasual/darkwood.css b/static/board-css/xiangqi/janggicasual/darkwood.css
new file mode 100644
index 00000000..2ea1a5dc
--- /dev/null
+++ b/static/board-css/xiangqi/janggicasual/darkwood.css
@@ -0,0 +1,7 @@
+.cg-board-wrap {
+  background-image: url('../../../board/svg/JanggiWoodDarkCoords.svg');
+  background-size: cover;
+  padding:0;
+  width: 100%;
+  height: 100%
+}
diff --git a/static/board-css/xiangqi/janggicasual/lightbrown.css b/static/board-css/xiangqi/janggicasual/lightbrown.css
new file mode 100644
index 00000000..b5f6d356
--- /dev/null
+++ b/static/board-css/xiangqi/janggicasual/lightbrown.css
@@ -0,0 +1,7 @@
+.cg-board-wrap {
+  background-image: url('../../../board/svg/JanggiCoords.svg');
+  width: 100%;
+  background-size: cover;
+  height: 100%;
+  padding:0;
+}
diff --git a/static/board-css/xiangqi/janggicasual/stone.css b/static/board-css/xiangqi/janggicasual/stone.css
new file mode 100644
index 00000000..c185724b
--- /dev/null
+++ b/static/board-css/xiangqi/janggicasual/stone.css
@@ -0,0 +1,7 @@
+.cg-board-wrap {
+  background-image: url('../../../board/svg/JanggiStoneCoords.svg');
+  width: 100%;
+  background-size: cover;
+  height: 100%;
+  padding:0;
+}
diff --git a/static/board-css/xiangqi/janggimodern/brown.css b/static/board-css/xiangqi/janggimodern/brown.css
new file mode 100644
index 00000000..bc4afb70
--- /dev/null
+++ b/static/board-css/xiangqi/janggimodern/brown.css
@@ -0,0 +1,7 @@
+.cg-board-wrap {
+  background-image: url('../../../board/svg/JanggiBrownCoords.svg');
+  width: 100%;
+  background-size: cover;
+  height: 100%;
+  padding:0;
+}
diff --git a/static/board-css/xiangqi/janggimodern/customJanggi1.css b/static/board-css/xiangqi/janggimodern/customJanggi1.css
new file mode 100644
index 00000000..3d452e66
--- /dev/null
+++ b/static/board-css/xiangqi/janggimodern/customJanggi1.css
@@ -0,0 +1,8 @@
+.cg-board-wrap {
+    background-image: url('../../../board/svg/customJanggi1.svg');
+    width: 100%;
+    background-size: cover;
+    height: 100%;
+    padding:0;
+  }
+  
\ No newline at end of file
diff --git a/static/board-css/xiangqi/janggimodern/customJanggi2.css b/static/board-css/xiangqi/janggimodern/customJanggi2.css
new file mode 100644
index 00000000..01cc67bb
--- /dev/null
+++ b/static/board-css/xiangqi/janggimodern/customJanggi2.css
@@ -0,0 +1,8 @@
+.cg-board-wrap {
+    background-image: url('../../../board/svg/customJanggi2.svg');
+    width: 100%;
+    background-size: cover;
+    height: 100%;
+    padding:0;
+  }
+  
\ No newline at end of file
diff --git a/static/board-css/xiangqi/janggimodern/customJanggi3.css b/static/board-css/xiangqi/janggimodern/customJanggi3.css
new file mode 100644
index 00000000..5fa4dca3
--- /dev/null
+++ b/static/board-css/xiangqi/janggimodern/customJanggi3.css
@@ -0,0 +1,8 @@
+.cg-board-wrap {
+    background-image: url('../../../board/svg/customJanggi3.svg');
+    width: 100%;
+    background-size: cover;
+    height: 100%;
+    padding:0;
+  }
+  
\ No newline at end of file
diff --git a/static/board-css/xiangqi/janggimodern/customJanggi4.css b/static/board-css/xiangqi/janggimodern/customJanggi4.css
new file mode 100644
index 00000000..ff1aa078
--- /dev/null
+++ b/static/board-css/xiangqi/janggimodern/customJanggi4.css
@@ -0,0 +1,8 @@
+.cg-board-wrap {
+    background-image: url('../../../board/svg/customJanggi4.svg');
+    width: 100%;
+    background-size: cover;
+    height: 100%;
+    padding:0;
+  }
+  
\ No newline at end of file
diff --git a/static/board-css/xiangqi/janggimodern/customJanggi5.css b/static/board-css/xiangqi/janggimodern/customJanggi5.css
new file mode 100644
index 00000000..c5f92429
--- /dev/null
+++ b/static/board-css/xiangqi/janggimodern/customJanggi5.css
@@ -0,0 +1,8 @@
+.cg-board-wrap {
+    background-image: url('../../../board/svg/customJanggi5.svg');
+    width: 100%;
+    background-size: cover;
+    height: 100%;
+    padding:0;
+  }
+  
\ No newline at end of file
diff --git a/static/board-css/xiangqi/janggimodern/dark.css b/static/board-css/xiangqi/janggimodern/dark.css
new file mode 100644
index 00000000..7257eb8d
--- /dev/null
+++ b/static/board-css/xiangqi/janggimodern/dark.css
@@ -0,0 +1,7 @@
+.cg-board-wrap {
+  background-image: url('../../../board/svg/JanggiDarkCoords.svg');
+  width: 100%;
+  background-size: cover;
+  height: 100%;
+  padding:0;
+}
diff --git a/static/board-css/xiangqi/janggimodern/darkwood.css b/static/board-css/xiangqi/janggimodern/darkwood.css
new file mode 100644
index 00000000..2ea1a5dc
--- /dev/null
+++ b/static/board-css/xiangqi/janggimodern/darkwood.css
@@ -0,0 +1,7 @@
+.cg-board-wrap {
+  background-image: url('../../../board/svg/JanggiWoodDarkCoords.svg');
+  background-size: cover;
+  padding:0;
+  width: 100%;
+  height: 100%
+}
diff --git a/static/board-css/xiangqi/janggimodern/lightbrown.css b/static/board-css/xiangqi/janggimodern/lightbrown.css
new file mode 100644
index 00000000..b5f6d356
--- /dev/null
+++ b/static/board-css/xiangqi/janggimodern/lightbrown.css
@@ -0,0 +1,7 @@
+.cg-board-wrap {
+  background-image: url('../../../board/svg/JanggiCoords.svg');
+  width: 100%;
+  background-size: cover;
+  height: 100%;
+  padding:0;
+}
diff --git a/static/board-css/xiangqi/janggimodern/stone.css b/static/board-css/xiangqi/janggimodern/stone.css
new file mode 100644
index 00000000..c185724b
--- /dev/null
+++ b/static/board-css/xiangqi/janggimodern/stone.css
@@ -0,0 +1,7 @@
+.cg-board-wrap {
+  background-image: url('../../../board/svg/JanggiStoneCoords.svg');
+  width: 100%;
+  background-size: cover;
+  height: 100%;
+  padding:0;
+}
diff --git a/static/board-css/xiangqi/janggitraditional/brown.css b/static/board-css/xiangqi/janggitraditional/brown.css
new file mode 100644
index 00000000..bc4afb70
--- /dev/null
+++ b/static/board-css/xiangqi/janggitraditional/brown.css
@@ -0,0 +1,7 @@
+.cg-board-wrap {
+  background-image: url('../../../board/svg/JanggiBrownCoords.svg');
+  width: 100%;
+  background-size: cover;
+  height: 100%;
+  padding:0;
+}
diff --git a/static/board-css/xiangqi/janggitraditional/customJanggi1.css b/static/board-css/xiangqi/janggitraditional/customJanggi1.css
new file mode 100644
index 00000000..3d452e66
--- /dev/null
+++ b/static/board-css/xiangqi/janggitraditional/customJanggi1.css
@@ -0,0 +1,8 @@
+.cg-board-wrap {
+    background-image: url('../../../board/svg/customJanggi1.svg');
+    width: 100%;
+    background-size: cover;
+    height: 100%;
+    padding:0;
+  }
+  
\ No newline at end of file
diff --git a/static/board-css/xiangqi/janggitraditional/customJanggi2.css b/static/board-css/xiangqi/janggitraditional/customJanggi2.css
new file mode 100644
index 00000000..01cc67bb
--- /dev/null
+++ b/static/board-css/xiangqi/janggitraditional/customJanggi2.css
@@ -0,0 +1,8 @@
+.cg-board-wrap {
+    background-image: url('../../../board/svg/customJanggi2.svg');
+    width: 100%;
+    background-size: cover;
+    height: 100%;
+    padding:0;
+  }
+  
\ No newline at end of file
diff --git a/static/board-css/xiangqi/janggitraditional/customJanggi3.css b/static/board-css/xiangqi/janggitraditional/customJanggi3.css
new file mode 100644
index 00000000..5fa4dca3
--- /dev/null
+++ b/static/board-css/xiangqi/janggitraditional/customJanggi3.css
@@ -0,0 +1,8 @@
+.cg-board-wrap {
+    background-image: url('../../../board/svg/customJanggi3.svg');
+    width: 100%;
+    background-size: cover;
+    height: 100%;
+    padding:0;
+  }
+  
\ No newline at end of file
diff --git a/static/board-css/xiangqi/janggitraditional/customJanggi4.css b/static/board-css/xiangqi/janggitraditional/customJanggi4.css
new file mode 100644
index 00000000..ff1aa078
--- /dev/null
+++ b/static/board-css/xiangqi/janggitraditional/customJanggi4.css
@@ -0,0 +1,8 @@
+.cg-board-wrap {
+    background-image: url('../../../board/svg/customJanggi4.svg');
+    width: 100%;
+    background-size: cover;
+    height: 100%;
+    padding:0;
+  }
+  
\ No newline at end of file
diff --git a/static/board-css/xiangqi/janggitraditional/customJanggi5.css b/static/board-css/xiangqi/janggitraditional/customJanggi5.css
new file mode 100644
index 00000000..c5f92429
--- /dev/null
+++ b/static/board-css/xiangqi/janggitraditional/customJanggi5.css
@@ -0,0 +1,8 @@
+.cg-board-wrap {
+    background-image: url('../../../board/svg/customJanggi5.svg');
+    width: 100%;
+    background-size: cover;
+    height: 100%;
+    padding:0;
+  }
+  
\ No newline at end of file
diff --git a/static/board-css/xiangqi/janggitraditional/dark.css b/static/board-css/xiangqi/janggitraditional/dark.css
new file mode 100644
index 00000000..7257eb8d
--- /dev/null
+++ b/static/board-css/xiangqi/janggitraditional/dark.css
@@ -0,0 +1,7 @@
+.cg-board-wrap {
+  background-image: url('../../../board/svg/JanggiDarkCoords.svg');
+  width: 100%;
+  background-size: cover;
+  height: 100%;
+  padding:0;
+}
diff --git a/static/board-css/xiangqi/janggitraditional/darkwood.css b/static/board-css/xiangqi/janggitraditional/darkwood.css
new file mode 100644
index 00000000..2ea1a5dc
--- /dev/null
+++ b/static/board-css/xiangqi/janggitraditional/darkwood.css
@@ -0,0 +1,7 @@
+.cg-board-wrap {
+  background-image: url('../../../board/svg/JanggiWoodDarkCoords.svg');
+  background-size: cover;
+  padding:0;
+  width: 100%;
+  height: 100%
+}
diff --git a/static/board-css/xiangqi/janggitraditional/lightbrown.css b/static/board-css/xiangqi/janggitraditional/lightbrown.css
new file mode 100644
index 00000000..b5f6d356
--- /dev/null
+++ b/static/board-css/xiangqi/janggitraditional/lightbrown.css
@@ -0,0 +1,7 @@
+.cg-board-wrap {
+  background-image: url('../../../board/svg/JanggiCoords.svg');
+  width: 100%;
+  background-size: cover;
+  height: 100%;
+  padding:0;
+}
diff --git a/static/board-css/xiangqi/janggitraditional/stone.css b/static/board-css/xiangqi/janggitraditional/stone.css
new file mode 100644
index 00000000..c185724b
--- /dev/null
+++ b/static/board-css/xiangqi/janggitraditional/stone.css
@@ -0,0 +1,7 @@
+.cg-board-wrap {
+  background-image: url('../../../board/svg/JanggiStoneCoords.svg');
+  width: 100%;
+  background-size: cover;
+  height: 100%;
+  padding:0;
+}