diff --git a/package.json b/package.json
index 4bbbcad..60bfb99 100644
--- a/package.json
+++ b/package.json
@@ -9,16 +9,22 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
-    "vue": "^3.2.13"
+    "primeicons": "^7.0.0",
+    "vue": "^3.2.13",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
+    "@tailwindcss/postcss": "^4.1.13",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "autoprefixer": "^10.4.21",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
+    "eslint-plugin-vue": "^8.0.3",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17"
   },
   "eslintConfig": {
     "root": true,
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..c3d6d5d
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    // '@tailwindcss/postcss': {}, // ganti ini
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/images/bghero-select.jpg b/public/images/bghero-select.jpg
new file mode 100644
index 0000000..27899ab
Binary files /dev/null and b/public/images/bghero-select.jpg differ
diff --git a/public/images/bghero.jpg b/public/images/bghero.jpg
new file mode 100644
index 0000000..0203278
Binary files /dev/null and b/public/images/bghero.jpg differ
diff --git a/public/images/but-nav-hiburan.png b/public/images/but-nav-hiburan.png
new file mode 100644
index 0000000..3312142
Binary files /dev/null and b/public/images/but-nav-hiburan.png differ
diff --git a/public/images/but-nav-hiburan.svg b/public/images/but-nav-hiburan.svg
new file mode 100644
index 0000000..ba29a65
--- /dev/null
+++ b/public/images/but-nav-hiburan.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.665988in" height="0.666071in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 150 150"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#F4F8F8}
+   ]]>
+  </style>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M50 119l0 15c0,11 10,18 20,15 3,-1 8,-5 11,-7 7,-7 11,-13 15,-22 7,-15 -2,-4 16,-20 22,-18 36,-43 37,-72 1,-7 1,-10 -2,-16 -2,-4 -5,-7 -9,-9 -4,-3 -9,-3 -15,-3 -11,1 -20,3 -30,6 -9,4 -17,8 -24,13 -3,3 -7,6 -10,8 -3,3 -6,6 -9,10 -3,3 -5,6 -8,10 -1,1 -1,1 -2,2 -1,2 -1,2 -3,2 -10,4 -21,9 -28,17 -6,7 -13,16 -6,25 6,10 16,6 30,7 9,0 17,9 17,19zm44 -81c-5,1 -7,2 -10,6 -5,6 -4,16 4,22 11,8 26,-2 24,-16 -1,-7 -9,-14 -18,-12zm-73 74c-7,1 -8,3 -11,8 -3,4 -12,22 -9,27 3,5 9,2 13,0 5,-1 14,-6 19,-9 4,-4 6,-14 1,-20 -3,-4 -7,-6 -13,-6zm21 -30l1 1c2,1 6,1 14,9 2,1 4,4 6,6 2,5 2,6 4,9 1,0 10,-5 13,-6 2,-1 3,-3 5,-4 5,-3 12,-9 17,-12 3,-4 6,-6 9,-10 13,-13 18,-29 20,-47 1,-9 0,-10 -9,-9 -3,0 -6,1 -8,1 -6,1 -11,2 -16,4 -18,7 -30,19 -42,34 -2,4 -5,8 -7,12 -2,3 -5,9 -7,12z"/>
+ </g>
+</svg>
diff --git a/public/images/but-nav-home.png b/public/images/but-nav-home.png
new file mode 100644
index 0000000..c8c9999
Binary files /dev/null and b/public/images/but-nav-home.png differ
diff --git a/public/images/but-nav-home.svg b/public/images/but-nav-home.svg
new file mode 100644
index 0000000..355d0fe
--- /dev/null
+++ b/public/images/but-nav-home.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.666748in" height="0.666299in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 59 59"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#F4F8F8}
+   ]]>
+  </style>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M0 28l0 25c0,3 3,6 6,6l47 0c3,0 6,-3 6,-6l0 -25c0,-5 -3,-7 -5,-9l-15 -15c-2,-2 -5,-4 -10,-4 -4,0 -7,2 -10,4 -2,3 -4,5 -7,7 -1,2 -9,10 -10,11 -1,2 -2,3 -2,6zm7 0l0 23c3,0 11,0 13,0 0,-2 0,-4 0,-6 0,-3 0,-4 1,-6 3,-6 14,-6 17,0 2,4 1,8 1,12l12 0c1,-1 0,-17 0,-20 0,-1 0,-2 0,-3 0,-1 0,-2 -1,-2 -4,-5 -9,-9 -13,-14 -3,-2 -5,-6 -9,-5 -2,1 -3,2 -4,3l-15 15c-1,1 -2,2 -2,3z"/>
+ </g>
+</svg>
diff --git a/public/images/but-nav-koleksi.png b/public/images/but-nav-koleksi.png
new file mode 100644
index 0000000..8cf7e63
Binary files /dev/null and b/public/images/but-nav-koleksi.png differ
diff --git a/public/images/but-nav-koleksi.svg b/public/images/but-nav-koleksi.svg
new file mode 100644
index 0000000..a86154f
--- /dev/null
+++ b/public/images/but-nav-koleksi.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.666362in" height="0.667362in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 71 71"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#F4F8F8}
+   ]]>
+  </style>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M34 30c-2,0 -2,0 -4,1 -5,2 -7,4 -10,7 -4,4 -7,9 -8,16 -1,6 1,13 7,16 2,1 6,2 9,1 4,-1 5,-3 9,-2 2,0 3,2 9,2 3,1 6,-1 8,-3 3,-2 4,-3 5,-7 2,-9 -3,-18 -9,-24 -3,-3 -10,-8 -16,-7zm-27 -12c-8,2 -9,14 -4,20 1,2 4,4 6,4 7,-2 10,-14 4,-21 -1,-2 -3,-4 -6,-3zm48 12l0 0c0,6 2,12 9,12 2,-1 4,-3 5,-5 4,-7 3,-19 -6,-19 -3,0 -5,2 -6,4 -2,2 -2,4 -2,8zm-40 -20c0,4 0,6 2,9 1,2 3,4 6,5 6,1 9,-5 10,-11 0,-3 -1,-6 -2,-8 -5,-9 -16,-5 -16,5zm31 -10c-2,1 -4,2 -6,5 -4,7 0,20 9,19 2,-1 4,-3 5,-5 4,-5 4,-16 -3,-18 -2,-1 -3,-1 -5,-1zm-10 39c-4,0 -7,3 -9,5 -9,8 -7,18 -2,18 2,1 3,-1 5,-1 3,-2 8,-2 12,0 2,1 6,4 8,-2 1,-2 0,-5 0,-7 -2,-5 -9,-13 -14,-13z"/>
+ </g>
+</svg>
diff --git a/public/images/char-select-bg.png b/public/images/char-select-bg.png
new file mode 100644
index 0000000..5413cf0
Binary files /dev/null and b/public/images/char-select-bg.png differ
diff --git a/public/images/char/bear.png b/public/images/char/bear.png
new file mode 100644
index 0000000..f95d628
Binary files /dev/null and b/public/images/char/bear.png differ
diff --git a/public/images/char/bunny.png b/public/images/char/bunny.png
new file mode 100644
index 0000000..4a7e3b6
Binary files /dev/null and b/public/images/char/bunny.png differ
diff --git a/public/images/char/char-select-bg.png b/public/images/char/char-select-bg.png
new file mode 100644
index 0000000..fd709d0
Binary files /dev/null and b/public/images/char/char-select-bg.png differ
diff --git a/public/images/char/fox.png b/public/images/char/fox.png
new file mode 100644
index 0000000..5e763f8
Binary files /dev/null and b/public/images/char/fox.png differ
diff --git a/public/images/char/horse.png b/public/images/char/horse.png
new file mode 100644
index 0000000..d948914
Binary files /dev/null and b/public/images/char/horse.png differ
diff --git a/public/images/char/lion.png b/public/images/char/lion.png
new file mode 100644
index 0000000..02e384c
Binary files /dev/null and b/public/images/char/lion.png differ
diff --git a/public/images/char/monkey.png b/public/images/char/monkey.png
new file mode 100644
index 0000000..00570ae
Binary files /dev/null and b/public/images/char/monkey.png differ
diff --git a/public/images/char/pig.png b/public/images/char/pig.png
new file mode 100644
index 0000000..ee67667
Binary files /dev/null and b/public/images/char/pig.png differ
diff --git a/public/images/char/sheep.png b/public/images/char/sheep.png
new file mode 100644
index 0000000..51ac71d
Binary files /dev/null and b/public/images/char/sheep.png differ
diff --git a/public/images/char/tiger.png b/public/images/char/tiger.png
new file mode 100644
index 0000000..e312511
Binary files /dev/null and b/public/images/char/tiger.png differ
diff --git a/public/images/footer.png b/public/images/footer.png
new file mode 100644
index 0000000..09c608f
Binary files /dev/null and b/public/images/footer.png differ
diff --git a/public/images/icon-edit.svg b/public/images/icon-edit.svg
new file mode 100644
index 0000000..f24265b
--- /dev/null
+++ b/public/images/icon-edit.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.666638in" height="0.666665in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 60 60"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#49509E}
+   ]]>
+  </style>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M27 0c-2,1 -3,0 -6,1 -1,1 -2,1 -3,1 0,1 -1,1 -2,2 -3,1 -6,4 -9,6 -8,9 -9,23 -3,34 4,8 12,14 21,15 4,1 7,1 11,0 1,0 0,0 3,-1 5,-1 10,-4 13,-8 3,-3 5,-6 6,-10 1,-3 2,-8 2,-13 -1,-2 -1,-3 -2,-6 -2,-7 -6,-13 -13,-17 -1,-1 -3,-1 -5,-2 -4,-1 -9,-3 -13,-2zm10 16c-2,1 -2,1 -3,3 -1,0 -2,1 -2,1 0,1 1,1 1,2 2,1 4,4 6,5 1,1 1,1 2,0 1,-2 3,-3 2,-6 0,-3 -3,-5 -6,-5zm-20 23c0,3 1,3 4,3 5,0 8,-4 12,-7 2,-2 1,-1 -1,-4 -1,-1 -2,-2 -3,-2 -3,-4 -2,-4 -5,-1 -3,3 -7,6 -7,11zm10 -31c-3,0 -5,1 -8,2 -8,5 -12,13 -11,23 1,11 12,21 25,19 3,0 6,-1 8,-3 2,-1 4,-3 6,-5 2,-2 3,-4 4,-7 3,-8 0,-18 -7,-24 -4,-4 -11,-6 -17,-5z"/>
+ </g>
+</svg>
diff --git a/public/images/logo.png b/public/images/logo.png
new file mode 100644
index 0000000..17fb591
Binary files /dev/null and b/public/images/logo.png differ
diff --git a/public/images/logobig.png b/public/images/logobig.png
new file mode 100644
index 0000000..8d870c0
Binary files /dev/null and b/public/images/logobig.png differ
diff --git a/public/images/propic-001.svg b/public/images/propic-001.svg
new file mode 100644
index 0000000..1b03a0e
--- /dev/null
+++ b/public/images/propic-001.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1.34067in" height="1.34067in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 438 438"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil11 {fill:none}
+    .fil0 {fill:#F4F8F8}
+    .fil2 {fill:#FEFEFE;fill-rule:nonzero}
+    .fil4 {fill:#F7C3B9;fill-rule:nonzero}
+    .fil6 {fill:#F4B3AC;fill-rule:nonzero}
+    .fil5 {fill:#F4AEA1;fill-rule:nonzero}
+    .fil8 {fill:#F3ADB2;fill-rule:nonzero}
+    .fil7 {fill:#F29F96;fill-rule:nonzero}
+    .fil10 {fill:#EE817C;fill-rule:nonzero}
+    .fil1 {fill:#EC6F54;fill-rule:nonzero}
+    .fil3 {fill:#3B4A9A;fill-rule:nonzero}
+    .fil9 {fill:#2E3778;fill-rule:nonzero}
+    .fil12 {fill:#49509E;fill-rule:nonzero}
+   ]]>
+  </style>
+    <clipPath id="id0">
+     <path d="M219 427c115,0 208,-93 208,-208 0,-115 -93,-208 -208,-208 -115,0 -208,93 -208,208 0,115 93,208 208,208z"/>
+    </clipPath>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_1359329921408">
+   <path class="fil0" d="M219 427c115,0 208,-93 208,-208 0,-115 -93,-208 -208,-208 -115,0 -208,93 -208,208 0,115 93,208 208,208z"/>
+   <g style="clip-path:url(#id0)">
+    <g>
+     <g>
+      <path id="1" class="fil1" d="M219 321c89,0 134,-31 144,-63 6,-21 -31,11 -35,-106 -1,-57 -30,-102 -109,-102 -79,0 -106,45 -109,102 -7,130 -47,76 -36,108 10,30 56,61 145,61z"/>
+      <path class="fil2" d="M331 427l-224 0 0 -9c0,-62 50,-112 112,-112 62,0 112,50 112,112l0 9z"/>
+      <path class="fil3" d="M271 317c0,6 -1,46 0,56 0,13 -105,14 -106,1 0,-10 -1,-27 -1,-56 -34,17 -57,53 -57,94l0 15 224 0 0 -15c0,-42 -24,-78 -60,-95z"/>
+      <path class="fil4" d="M136 198c-3,-10 -14,-18 -24,-16 -11,2 -19,12 -18,23 1,11 11,20 21,23 11,3 23,2 34,-1l-13 -29z"/>
+      <path class="fil5" d="M134 218c0,0 -1,0 -1,-1 -2,-5 -6,-11 -11,-14 -5,-4 -11,-6 -18,-6 -1,0 -1,-1 -1,-2 0,-1 1,-1 1,-1 0,0 0,0 0,0 7,0 14,2 20,6 5,4 9,10 12,16 0,1 0,2 -1,2l-1 0z"/>
+      <path class="fil4" d="M302 198c2,-10 13,-18 24,-16 10,2 19,12 18,23 -1,11 -11,20 -22,23 -11,3 -22,2 -34,-1l14 -29z"/>
+      <path class="fil5" d="M303 218l0 0c-1,0 -2,-1 -1,-2 2,-6 6,-12 12,-16 6,-4 12,-6 19,-6 0,0 0,0 0,0 1,0 2,0 2,1 0,1 -1,2 -2,2 -6,0 -12,2 -17,6 -5,3 -9,9 -11,14 -1,1 -1,1 -2,1z"/>
+      <path class="fil6" d="M219 361c-20,0 -35,-16 -35,-35l0 -63 70 0 0 63c0,19 -16,35 -35,35z"/>
+      <path class="fil7" d="M184 319l0 -56 70 0 0 42c-22,10 -46,13 -70,14z"/>
+      <path class="fil4" d="M219 300l0 0c-51,0 -93,-41 -93,-92l0 -20c0,-51 42,-93 93,-93 51,0 92,42 92,93l0 20c0,51 -41,92 -92,92z"/>
+      <path class="fil8" d="M258 211c2,8 13,12 24,10 11,-3 18,-11 16,-20 -1,-8 -12,-12 -23,-10 -11,3 -19,11 -17,20zm-78 0c-2,8 -13,12 -24,10 -11,-3 -19,-11 -17,-20 2,-8 13,-12 24,-10 11,3 18,11 17,20z"/>
+      <path class="fil9" d="M255 177c0,-3 -6,-3 -7,0 -1,5 -1,11 1,14 1,2 4,2 5,0 3,-3 2,-9 1,-14zm-66 14c-2,2 -4,2 -6,0 -2,-3 -1,-9 -1,-14 1,-3 7,-3 8,0 1,5 1,11 -1,14z"/>
+      <path class="fil10" d="M219 223c-7,0 -13,-6 -13,-13l0 -2c0,-1 1,-2 2,-2 1,0 1,1 1,2l0 2c0,6 5,10 10,10 5,0 9,-4 9,-10l0 -2c0,-1 1,-2 2,-2 1,0 1,1 1,2l0 2c0,7 -5,13 -12,13z"/>
+      <path class="fil10" d="M219 196c0,0 0,0 -1,-1 -2,0 -4,-2 -5,-4 -1,-2 -1,-5 1,-7 1,-2 3,-3 5,-3 2,0 4,1 5,2 0,0 0,1 -1,2 0,0 -1,0 -1,-1 -1,0 -2,0 -3,0 -1,0 -2,0 -3,1 -1,2 -1,3 -1,5 1,2 2,3 4,3 1,0 3,-1 4,-2 0,0 1,-1 2,0 0,0 0,1 0,1 -1,2 -3,4 -6,4z"/>
+      <path class="fil1" d="M121 187c38,4 130,-22 139,-75 0,0 6,51 56,75 0,0 23,-124 -95,-124 -119,0 -100,124 -100,124z"/>
+     </g>
+    </g>
+   </g>
+   <path class="fil11" d="M219 427c115,0 208,-93 208,-208 0,-115 -93,-208 -208,-208 -115,0 -208,93 -208,208 0,115 93,208 208,208z"/>
+   <path class="fil12" d="M219 416c54,0 103,-22 139,-58 36,-36 58,-85 58,-139 0,-55 -22,-104 -58,-140 -36,-35 -85,-57 -139,-57 -55,0 -104,22 -140,57 -35,36 -57,85 -57,140 0,54 22,103 57,139 36,36 85,58 140,58zm155 -42c-40,39 -95,64 -155,64 -61,0 -115,-25 -155,-64 -40,-40 -64,-95 -64,-155 0,-61 24,-115 64,-155 40,-40 94,-64 155,-64 60,0 115,24 155,64 39,40 64,94 64,155 0,60 -25,115 -64,155z"/>
+  </g>
+ </g>
+</svg>
diff --git a/public/images/propic-blank.svg b/public/images/propic-blank.svg
new file mode 100644
index 0000000..7a43c6b
--- /dev/null
+++ b/public/images/propic-blank.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1.34166in" height="1.34166in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 427 427"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil5 {fill:none}
+    .fil0 {fill:#F4F8F8}
+    .fil2 {fill:#F7C3B9;fill-rule:nonzero}
+    .fil3 {fill:#F4B3AC;fill-rule:nonzero}
+    .fil4 {fill:#F29F96;fill-rule:nonzero}
+    .fil1 {fill:#49509E;fill-rule:nonzero}
+   ]]>
+  </style>
+    <clipPath id="id0">
+     <path d="M214 416c111,0 202,-91 202,-202 0,-112 -91,-202 -202,-202 -112,0 -202,90 -202,202 0,111 90,202 202,202z"/>
+    </clipPath>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_1359325661072">
+   <path class="fil0" d="M214 416c111,0 202,-91 202,-202 0,-112 -91,-202 -202,-202 -112,0 -202,90 -202,202 0,111 90,202 202,202z"/>
+   <g style="clip-path:url(#id0)">
+    <g>
+     <g>
+      <path id="1" class="fil1" d="M323 416l-218 0 0 -8c0,-61 48,-109 109,-109 60,0 109,48 109,109l0 8z"/>
+      <path class="fil2" d="M133 194c-2,-10 -13,-18 -24,-16 -10,2 -18,12 -17,22 1,11 11,20 21,23 11,3 22,1 33,-1l-13 -28z"/>
+      <path class="fil2" d="M294 194c3,-10 14,-18 24,-16 10,2 18,12 17,22 -1,11 -10,20 -21,23 -11,3 -22,1 -33,-1l13 -28z"/>
+      <path class="fil3" d="M214 352c-19,0 -34,-16 -34,-34l0 -62 68 0 0 62c0,18 -16,34 -34,34z"/>
+      <path class="fil4" d="M180 311l0 -55 68 0 0 42c-21,9 -45,12 -68,13z"/>
+      <path class="fil2" d="M214 293l0 0c-50,0 -90,-41 -90,-90l0 -20c0,-49 40,-89 90,-89 49,0 89,40 89,89l0 20c0,49 -40,90 -89,90z"/>
+     </g>
+    </g>
+   </g>
+   <path class="fil5" d="M214 416c111,0 202,-91 202,-202 0,-112 -91,-202 -202,-202 -112,0 -202,90 -202,202 0,111 90,202 202,202z"/>
+   <path class="fil1" d="M214 404c52,0 100,-21 134,-56 35,-34 56,-82 56,-134 0,-53 -21,-101 -56,-135 -34,-35 -82,-56 -134,-56 -53,0 -101,21 -135,56 -35,34 -56,82 -56,135 0,52 21,100 56,134 34,35 82,56 135,56zm151 -39c-39,38 -92,62 -151,62 -59,0 -113,-24 -151,-62 -39,-39 -63,-92 -63,-151 0,-59 24,-113 63,-151 38,-39 92,-63 151,-63 59,0 112,24 151,63 38,38 62,92 62,151 0,59 -24,112 -62,151z"/>
+  </g>
+ </g>
+</svg>
diff --git a/public/images/qicon1.png b/public/images/qicon1.png
new file mode 100644
index 0000000..1c09c2b
Binary files /dev/null and b/public/images/qicon1.png differ
diff --git a/public/images/qicon2.png b/public/images/qicon2.png
new file mode 100644
index 0000000..7dcf148
Binary files /dev/null and b/public/images/qicon2.png differ
diff --git a/public/images/qicon3.png b/public/images/qicon3.png
new file mode 100644
index 0000000..0a0bc77
Binary files /dev/null and b/public/images/qicon3.png differ
diff --git a/public/images/qtime.png b/public/images/qtime.png
new file mode 100644
index 0000000..9d9ab3d
Binary files /dev/null and b/public/images/qtime.png differ
diff --git a/public/images/qup.png b/public/images/qup.png
new file mode 100644
index 0000000..edcdca2
Binary files /dev/null and b/public/images/qup.png differ
diff --git a/public/images/token-coin.svg b/public/images/token-coin.svg
new file mode 100644
index 0000000..ec88104
--- /dev/null
+++ b/public/images/token-coin.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1.425in" height="1.425in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 726 726"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil4 {fill:none}
+    .fil1 {fill:#FDD54E}
+    .fil5 {fill:#FBE5B9}
+    .fil3 {fill:#F7BF4E}
+    .fil2 {fill:#F4B03D}
+    .fil6 {fill:#F0A230}
+    .fil0 {fill:#D17D2B}
+    .fil7 {fill:#3A3B3A}
+   ]]>
+  </style>
+     <clipPath id="id0">
+      <path d="M344 617c152,0 274,-123 274,-274 0,-151 -122,-274 -274,-274 -151,0 -273,123 -273,274 0,151 122,274 273,274z"/>
+     </clipPath>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_1359330850544">
+   <g>
+    <circle class="fil0" cx="363" cy="363" r="363"/>
+    <path class="fil1" d="M344 671c182,0 328,-147 328,-328 0,-181 -146,-328 -328,-328 -181,0 -327,147 -327,328 0,181 146,328 327,328zm0 -40c160,0 288,-129 288,-288 0,-159 -128,-288 -288,-288 -159,0 -287,129 -287,288 0,159 128,288 287,288z"/>
+    <path class="fil2" d="M344 617c152,0 274,-123 274,-274 0,-151 -122,-274 -274,-274 -151,0 -273,123 -273,274 0,151 122,274 273,274z"/>
+    <g style="clip-path:url(#id0)">
+     <g>
+      <circle class="fil3" cx="343" cy="126" r="274"/>
+     </g>
+    </g>
+    <path class="fil4" d="M344 617c152,0 274,-123 274,-274 0,-151 -122,-274 -274,-274 -151,0 -273,123 -273,274 0,151 122,274 273,274z"/>
+    <path class="fil5" d="M170 142c13,-13 29,-18 35,-9 6,8 -1,26 -14,40 -14,13 -29,18 -35,9 -6,-8 0,-26 14,-40zm44 -9c7,0 12,-6 12,-12 0,-7 -5,-12 -12,-12 -6,0 -12,5 -12,12 0,6 6,12 12,12z"/>
+    <path class="fil6" d="M511 503c13,-14 29,-18 35,-10 6,9 0,27 -14,40 -13,14 -29,18 -35,10 -6,-9 0,-26 14,-40zm44 -10c7,0 12,-5 12,-12 0,-6 -5,-11 -12,-11 -6,0 -11,5 -11,11 0,7 5,12 11,12z"/>
+   </g>
+   <path class="fil7" d="M486 205c7,0 12,0 15,0 4,1 7,2 11,5 5,2 8,6 9,11 2,6 3,13 3,22 0,9 -1,17 -3,22 -1,6 -4,10 -9,12 -4,2 -8,3 -11,4 -4,0 -9,0 -16,0l-132 0 0 44 85 0c7,0 12,0 16,1 3,0 7,1 11,4 8,4 11,15 11,34 0,20 -5,32 -16,36 -5,1 -12,2 -22,2l-85 0 0 81c0,7 0,12 0,16 -1,3 -2,6 -4,11 -5,8 -16,11 -34,11 -20,0 -32,-5 -36,-16 -1,-5 -2,-12 -2,-22l0 -81 -36 0c-10,0 -18,-1 -22,-2 -11,-4 -17,-16 -17,-36 0,-19 4,-30 12,-34 4,-3 8,-4 11,-4 3,-1 9,-1 15,-1l37 0 0 -82c0,-15 3,-25 8,-30 5,-6 16,-8 31,-8l170 0z"/>
+  </g>
+ </g>
+</svg>
diff --git a/public/images/token-poin.svg b/public/images/token-poin.svg
new file mode 100644
index 0000000..ae6fca3
--- /dev/null
+++ b/public/images/token-poin.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1.425in" height="1.425in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 4353 4353"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil4 {fill:none}
+    .fil1 {fill:#FDD54E}
+    .fil5 {fill:#FBE5B9}
+    .fil3 {fill:#F7BF4E}
+    .fil2 {fill:#F4B03D}
+    .fil6 {fill:#F0A230}
+    .fil0 {fill:#D17D2B}
+    .fil7 {fill:#3A3B3A}
+   ]]>
+  </style>
+     <clipPath id="id0">
+      <path d="M2065 3697c906,0 1641,-735 1641,-1641 0,-907 -735,-1642 -1641,-1642 -907,0 -1641,735 -1641,1642 0,906 734,1641 1641,1641z"/>
+     </clipPath>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_1359333286720">
+   <g>
+    <circle class="fil0" cx="2177" cy="2177" r="2177"/>
+    <path class="fil1" d="M2065 4021c1085,0 1965,-880 1965,-1965 0,-1086 -880,-1966 -1965,-1966 -1086,0 -1965,880 -1965,1966 0,1085 879,1965 1965,1965zm0 -240c953,0 1726,-772 1726,-1725 0,-953 -773,-1726 -1726,-1726 -953,0 -1726,773 -1726,1726 0,953 773,1725 1726,1725z"/>
+    <path class="fil2" d="M2065 3697c906,0 1641,-735 1641,-1641 0,-907 -735,-1642 -1641,-1642 -907,0 -1641,735 -1641,1642 0,906 734,1641 1641,1641z"/>
+    <g style="clip-path:url(#id0)">
+     <g>
+      <circle class="fil3" cx="2058" cy="752" r="1641"/>
+     </g>
+    </g>
+    <path class="fil4" d="M2065 3697c906,0 1641,-735 1641,-1641 0,-907 -735,-1642 -1641,-1642 -907,0 -1641,735 -1641,1642 0,906 734,1641 1641,1641z"/>
+    <path class="fil5" d="M1017 854c81,-83 175,-108 211,-58 35,50 -3,157 -84,239 -81,83 -175,108 -210,58 -35,-50 2,-157 83,-239zm266 -59c39,0 70,-32 70,-71 0,-39 -31,-70 -70,-70 -39,0 -71,31 -71,70 0,39 32,71 71,71z"/>
+    <path class="fil6" d="M3062 3014c81,-82 176,-108 211,-58 35,50 -3,158 -84,240 -81,82 -175,108 -210,57 -35,-50 2,-157 83,-239zm266 -59c39,0 70,-31 70,-70 0,-39 -31,-71 -70,-71 -39,0 -70,32 -70,71 0,39 31,70 70,70z"/>
+   </g>
+   <path class="fil7" d="M2463 1163c-36,4 -79,4 -112,14 -34,10 -66,14 -101,25 -67,22 -116,46 -174,83 -45,28 -98,85 -123,132 -61,116 -3,174 -45,171 -183,-13 -335,2 -480,60 -119,48 -223,128 -262,249 -15,46 -7,726 -8,882 0,54 0,72 12,117 5,17 35,68 45,81 31,42 87,92 135,116 29,14 58,28 89,41 74,32 133,39 205,51 75,13 218,18 298,1 53,-12 84,-10 157,-34 147,-49 309,-139 329,-310 2,-17 -1,-50 2,-63 4,-19 30,-11 52,-10 198,6 371,-16 529,-106 15,-8 26,-17 39,-27 82,-65 96,-79 137,-183 16,-40 7,-188 7,-243l0 -638c1,-120 -31,-181 -120,-260 -140,-123 -422,-174 -611,-149zm126 249c-108,0 -161,3 -267,34 -34,10 -155,60 -144,101 11,40 118,79 154,90 90,27 123,30 219,30 64,0 159,-3 218,-26 40,-15 137,-39 164,-85 30,-51 -142,-116 -177,-122 -55,-10 -111,-22 -167,-22zm-829 679c100,0 182,1 274,-35 107,-42 212,-82 67,-156 -165,-84 -449,-83 -613,-1 -103,52 -86,78 -24,118 72,46 202,74 296,74zm416 188c-14,-1 -110,39 -176,49 -163,25 -240,24 -412,0 -28,-4 -63,-14 -88,-22 -24,-8 -65,-28 -86,-27 -4,24 -2,51 -2,76 0,34 -2,41 17,60 45,46 155,80 217,91 48,9 95,9 149,9 120,0 168,-7 266,-43 33,-12 76,-34 97,-55 19,-19 19,-23 18,-58 0,-26 2,-55 0,-80zm-1 425c-15,-2 -77,23 -97,30 -165,52 -425,46 -591,-7 -16,-5 -30,-12 -47,-19 -34,-12 -28,6 -28,36 1,58 -11,71 29,106 37,34 128,63 186,77 136,31 334,14 465,-43 20,-9 64,-36 77,-55 13,-17 11,-101 6,-125zm402 -359l-118 -4c-41,-2 -29,9 -29,132 0,40 12,38 48,40 142,8 290,-2 411,-72 64,-37 54,-61 51,-160 -22,-2 -59,15 -81,23 -79,28 -194,41 -282,41zm12 -422l-158 -6c-2,27 -1,56 -1,83 0,12 1,25 0,38 0,57 -4,51 159,51 98,0 135,-9 214,-35 35,-11 59,-22 88,-39 60,-36 53,-61 48,-160 -26,0 -97,36 -162,46 -33,5 -52,13 -89,14 -39,0 -60,8 -99,8z"/>
+  </g>
+ </g>
+</svg>
diff --git a/src/App.vue b/src/App.vue
index 591a031..fce1f6f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,48 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div class="min-h-screen flex flex-col bg-gradient-to-b from-green-100 to-green-300 pb-24">
+    <!-- Page Content -->
+    <router-view v-slot="{ Component }">
+      <div class="flex-1">
+        <component :is="Component" />
+      </div>
+    </router-view>
+
+    <!-- Bottom Navigation -->
+    <nav v-if="!['/register', '/login'].includes($route.path)" class="fixed bottom-0 left-0 w-full border-t shadow-lg flex justify-center gap-[100px] items-center z-50 h-[90px] bg-lime-200">
+      <router-link 
+        to="/" 
+        class="flex flex-col items-center text-gray-600 hover:text-green-500 p-2"
+        active-class="text-green-600 font-bold"
+        exact
+      >
+        <img src="/images/but-nav-home.png" class="w-10 h-10" />
+        <span class="text-xs font-bold">Home</span>
+      </router-link>
+
+      <router-link 
+        to="/character" 
+        class="flex flex-col items-center text-gray-600 hover:text-green-500 p-2"
+        active-class="text-green-600 font-bold"
+      >
+        <img src="/images/but-nav-koleksi.png" class="w-10 h-10" />
+        <span class="text-xs font-bold">Koleksi</span>
+      </router-link>
+
+      <router-link 
+        to="/hiburan" 
+        class="flex flex-col items-center text-gray-600 hover:text-green-500 p-2"
+        active-class="text-green-600 font-bold"
+      >
+        <img src="/images/but-nav-hiburan.png" class="w-10 h-10" />
+        <span class="text-xs font-bold">Hiburan</span>
+      </router-link>
+
+    </nav>
+  </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
+  name: "App",
 }
 </script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
diff --git a/src/assets/images/bghero-select.jpg b/src/assets/images/bghero-select.jpg
new file mode 100644
index 0000000..27899ab
Binary files /dev/null and b/src/assets/images/bghero-select.jpg differ
diff --git a/src/assets/images/bghero.jpg b/src/assets/images/bghero.jpg
new file mode 100644
index 0000000..0203278
Binary files /dev/null and b/src/assets/images/bghero.jpg differ
diff --git a/src/assets/images/but-nav-hiburan.png b/src/assets/images/but-nav-hiburan.png
new file mode 100644
index 0000000..3312142
Binary files /dev/null and b/src/assets/images/but-nav-hiburan.png differ
diff --git a/src/assets/images/but-nav-hiburan.svg b/src/assets/images/but-nav-hiburan.svg
new file mode 100644
index 0000000..ba29a65
--- /dev/null
+++ b/src/assets/images/but-nav-hiburan.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.665988in" height="0.666071in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 150 150"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#F4F8F8}
+   ]]>
+  </style>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M50 119l0 15c0,11 10,18 20,15 3,-1 8,-5 11,-7 7,-7 11,-13 15,-22 7,-15 -2,-4 16,-20 22,-18 36,-43 37,-72 1,-7 1,-10 -2,-16 -2,-4 -5,-7 -9,-9 -4,-3 -9,-3 -15,-3 -11,1 -20,3 -30,6 -9,4 -17,8 -24,13 -3,3 -7,6 -10,8 -3,3 -6,6 -9,10 -3,3 -5,6 -8,10 -1,1 -1,1 -2,2 -1,2 -1,2 -3,2 -10,4 -21,9 -28,17 -6,7 -13,16 -6,25 6,10 16,6 30,7 9,0 17,9 17,19zm44 -81c-5,1 -7,2 -10,6 -5,6 -4,16 4,22 11,8 26,-2 24,-16 -1,-7 -9,-14 -18,-12zm-73 74c-7,1 -8,3 -11,8 -3,4 -12,22 -9,27 3,5 9,2 13,0 5,-1 14,-6 19,-9 4,-4 6,-14 1,-20 -3,-4 -7,-6 -13,-6zm21 -30l1 1c2,1 6,1 14,9 2,1 4,4 6,6 2,5 2,6 4,9 1,0 10,-5 13,-6 2,-1 3,-3 5,-4 5,-3 12,-9 17,-12 3,-4 6,-6 9,-10 13,-13 18,-29 20,-47 1,-9 0,-10 -9,-9 -3,0 -6,1 -8,1 -6,1 -11,2 -16,4 -18,7 -30,19 -42,34 -2,4 -5,8 -7,12 -2,3 -5,9 -7,12z"/>
+ </g>
+</svg>
diff --git a/src/assets/images/but-nav-home.png b/src/assets/images/but-nav-home.png
new file mode 100644
index 0000000..c8c9999
Binary files /dev/null and b/src/assets/images/but-nav-home.png differ
diff --git a/src/assets/images/but-nav-home.svg b/src/assets/images/but-nav-home.svg
new file mode 100644
index 0000000..355d0fe
--- /dev/null
+++ b/src/assets/images/but-nav-home.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.666748in" height="0.666299in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 59 59"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#F4F8F8}
+   ]]>
+  </style>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M0 28l0 25c0,3 3,6 6,6l47 0c3,0 6,-3 6,-6l0 -25c0,-5 -3,-7 -5,-9l-15 -15c-2,-2 -5,-4 -10,-4 -4,0 -7,2 -10,4 -2,3 -4,5 -7,7 -1,2 -9,10 -10,11 -1,2 -2,3 -2,6zm7 0l0 23c3,0 11,0 13,0 0,-2 0,-4 0,-6 0,-3 0,-4 1,-6 3,-6 14,-6 17,0 2,4 1,8 1,12l12 0c1,-1 0,-17 0,-20 0,-1 0,-2 0,-3 0,-1 0,-2 -1,-2 -4,-5 -9,-9 -13,-14 -3,-2 -5,-6 -9,-5 -2,1 -3,2 -4,3l-15 15c-1,1 -2,2 -2,3z"/>
+ </g>
+</svg>
diff --git a/src/assets/images/but-nav-koleksi.png b/src/assets/images/but-nav-koleksi.png
new file mode 100644
index 0000000..8cf7e63
Binary files /dev/null and b/src/assets/images/but-nav-koleksi.png differ
diff --git a/src/assets/images/but-nav-koleksi.svg b/src/assets/images/but-nav-koleksi.svg
new file mode 100644
index 0000000..a86154f
--- /dev/null
+++ b/src/assets/images/but-nav-koleksi.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.666362in" height="0.667362in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 71 71"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#F4F8F8}
+   ]]>
+  </style>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M34 30c-2,0 -2,0 -4,1 -5,2 -7,4 -10,7 -4,4 -7,9 -8,16 -1,6 1,13 7,16 2,1 6,2 9,1 4,-1 5,-3 9,-2 2,0 3,2 9,2 3,1 6,-1 8,-3 3,-2 4,-3 5,-7 2,-9 -3,-18 -9,-24 -3,-3 -10,-8 -16,-7zm-27 -12c-8,2 -9,14 -4,20 1,2 4,4 6,4 7,-2 10,-14 4,-21 -1,-2 -3,-4 -6,-3zm48 12l0 0c0,6 2,12 9,12 2,-1 4,-3 5,-5 4,-7 3,-19 -6,-19 -3,0 -5,2 -6,4 -2,2 -2,4 -2,8zm-40 -20c0,4 0,6 2,9 1,2 3,4 6,5 6,1 9,-5 10,-11 0,-3 -1,-6 -2,-8 -5,-9 -16,-5 -16,5zm31 -10c-2,1 -4,2 -6,5 -4,7 0,20 9,19 2,-1 4,-3 5,-5 4,-5 4,-16 -3,-18 -2,-1 -3,-1 -5,-1zm-10 39c-4,0 -7,3 -9,5 -9,8 -7,18 -2,18 2,1 3,-1 5,-1 3,-2 8,-2 12,0 2,1 6,4 8,-2 1,-2 0,-5 0,-7 -2,-5 -9,-13 -14,-13z"/>
+ </g>
+</svg>
diff --git a/src/assets/images/char-select-bg.png b/src/assets/images/char-select-bg.png
new file mode 100644
index 0000000..5413cf0
Binary files /dev/null and b/src/assets/images/char-select-bg.png differ
diff --git a/src/assets/images/char/bear.png b/src/assets/images/char/bear.png
new file mode 100644
index 0000000..f95d628
Binary files /dev/null and b/src/assets/images/char/bear.png differ
diff --git a/src/assets/images/char/bunny.png b/src/assets/images/char/bunny.png
new file mode 100644
index 0000000..4a7e3b6
Binary files /dev/null and b/src/assets/images/char/bunny.png differ
diff --git a/src/assets/images/char/char-select-bg.png b/src/assets/images/char/char-select-bg.png
new file mode 100644
index 0000000..fd709d0
Binary files /dev/null and b/src/assets/images/char/char-select-bg.png differ
diff --git a/src/assets/images/char/fox.png b/src/assets/images/char/fox.png
new file mode 100644
index 0000000..5e763f8
Binary files /dev/null and b/src/assets/images/char/fox.png differ
diff --git a/src/assets/images/char/horse.png b/src/assets/images/char/horse.png
new file mode 100644
index 0000000..d948914
Binary files /dev/null and b/src/assets/images/char/horse.png differ
diff --git a/src/assets/images/char/lion.png b/src/assets/images/char/lion.png
new file mode 100644
index 0000000..02e384c
Binary files /dev/null and b/src/assets/images/char/lion.png differ
diff --git a/src/assets/images/char/monkey.png b/src/assets/images/char/monkey.png
new file mode 100644
index 0000000..00570ae
Binary files /dev/null and b/src/assets/images/char/monkey.png differ
diff --git a/src/assets/images/char/pig.png b/src/assets/images/char/pig.png
new file mode 100644
index 0000000..ee67667
Binary files /dev/null and b/src/assets/images/char/pig.png differ
diff --git a/src/assets/images/char/sheep.png b/src/assets/images/char/sheep.png
new file mode 100644
index 0000000..51ac71d
Binary files /dev/null and b/src/assets/images/char/sheep.png differ
diff --git a/src/assets/images/char/tiger.png b/src/assets/images/char/tiger.png
new file mode 100644
index 0000000..e312511
Binary files /dev/null and b/src/assets/images/char/tiger.png differ
diff --git a/src/assets/images/footer.png b/src/assets/images/footer.png
new file mode 100644
index 0000000..09c608f
Binary files /dev/null and b/src/assets/images/footer.png differ
diff --git a/src/assets/images/icon-edit.svg b/src/assets/images/icon-edit.svg
new file mode 100644
index 0000000..f24265b
--- /dev/null
+++ b/src/assets/images/icon-edit.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.666638in" height="0.666665in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 60 60"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#49509E}
+   ]]>
+  </style>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M27 0c-2,1 -3,0 -6,1 -1,1 -2,1 -3,1 0,1 -1,1 -2,2 -3,1 -6,4 -9,6 -8,9 -9,23 -3,34 4,8 12,14 21,15 4,1 7,1 11,0 1,0 0,0 3,-1 5,-1 10,-4 13,-8 3,-3 5,-6 6,-10 1,-3 2,-8 2,-13 -1,-2 -1,-3 -2,-6 -2,-7 -6,-13 -13,-17 -1,-1 -3,-1 -5,-2 -4,-1 -9,-3 -13,-2zm10 16c-2,1 -2,1 -3,3 -1,0 -2,1 -2,1 0,1 1,1 1,2 2,1 4,4 6,5 1,1 1,1 2,0 1,-2 3,-3 2,-6 0,-3 -3,-5 -6,-5zm-20 23c0,3 1,3 4,3 5,0 8,-4 12,-7 2,-2 1,-1 -1,-4 -1,-1 -2,-2 -3,-2 -3,-4 -2,-4 -5,-1 -3,3 -7,6 -7,11zm10 -31c-3,0 -5,1 -8,2 -8,5 -12,13 -11,23 1,11 12,21 25,19 3,0 6,-1 8,-3 2,-1 4,-3 6,-5 2,-2 3,-4 4,-7 3,-8 0,-18 -7,-24 -4,-4 -11,-6 -17,-5z"/>
+ </g>
+</svg>
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
new file mode 100644
index 0000000..17fb591
Binary files /dev/null and b/src/assets/images/logo.png differ
diff --git a/src/assets/images/logobig.png b/src/assets/images/logobig.png
new file mode 100644
index 0000000..8d870c0
Binary files /dev/null and b/src/assets/images/logobig.png differ
diff --git a/src/assets/images/propic-001.svg b/src/assets/images/propic-001.svg
new file mode 100644
index 0000000..1b03a0e
--- /dev/null
+++ b/src/assets/images/propic-001.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1.34067in" height="1.34067in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 438 438"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil11 {fill:none}
+    .fil0 {fill:#F4F8F8}
+    .fil2 {fill:#FEFEFE;fill-rule:nonzero}
+    .fil4 {fill:#F7C3B9;fill-rule:nonzero}
+    .fil6 {fill:#F4B3AC;fill-rule:nonzero}
+    .fil5 {fill:#F4AEA1;fill-rule:nonzero}
+    .fil8 {fill:#F3ADB2;fill-rule:nonzero}
+    .fil7 {fill:#F29F96;fill-rule:nonzero}
+    .fil10 {fill:#EE817C;fill-rule:nonzero}
+    .fil1 {fill:#EC6F54;fill-rule:nonzero}
+    .fil3 {fill:#3B4A9A;fill-rule:nonzero}
+    .fil9 {fill:#2E3778;fill-rule:nonzero}
+    .fil12 {fill:#49509E;fill-rule:nonzero}
+   ]]>
+  </style>
+    <clipPath id="id0">
+     <path d="M219 427c115,0 208,-93 208,-208 0,-115 -93,-208 -208,-208 -115,0 -208,93 -208,208 0,115 93,208 208,208z"/>
+    </clipPath>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_1359329921408">
+   <path class="fil0" d="M219 427c115,0 208,-93 208,-208 0,-115 -93,-208 -208,-208 -115,0 -208,93 -208,208 0,115 93,208 208,208z"/>
+   <g style="clip-path:url(#id0)">
+    <g>
+     <g>
+      <path id="1" class="fil1" d="M219 321c89,0 134,-31 144,-63 6,-21 -31,11 -35,-106 -1,-57 -30,-102 -109,-102 -79,0 -106,45 -109,102 -7,130 -47,76 -36,108 10,30 56,61 145,61z"/>
+      <path class="fil2" d="M331 427l-224 0 0 -9c0,-62 50,-112 112,-112 62,0 112,50 112,112l0 9z"/>
+      <path class="fil3" d="M271 317c0,6 -1,46 0,56 0,13 -105,14 -106,1 0,-10 -1,-27 -1,-56 -34,17 -57,53 -57,94l0 15 224 0 0 -15c0,-42 -24,-78 -60,-95z"/>
+      <path class="fil4" d="M136 198c-3,-10 -14,-18 -24,-16 -11,2 -19,12 -18,23 1,11 11,20 21,23 11,3 23,2 34,-1l-13 -29z"/>
+      <path class="fil5" d="M134 218c0,0 -1,0 -1,-1 -2,-5 -6,-11 -11,-14 -5,-4 -11,-6 -18,-6 -1,0 -1,-1 -1,-2 0,-1 1,-1 1,-1 0,0 0,0 0,0 7,0 14,2 20,6 5,4 9,10 12,16 0,1 0,2 -1,2l-1 0z"/>
+      <path class="fil4" d="M302 198c2,-10 13,-18 24,-16 10,2 19,12 18,23 -1,11 -11,20 -22,23 -11,3 -22,2 -34,-1l14 -29z"/>
+      <path class="fil5" d="M303 218l0 0c-1,0 -2,-1 -1,-2 2,-6 6,-12 12,-16 6,-4 12,-6 19,-6 0,0 0,0 0,0 1,0 2,0 2,1 0,1 -1,2 -2,2 -6,0 -12,2 -17,6 -5,3 -9,9 -11,14 -1,1 -1,1 -2,1z"/>
+      <path class="fil6" d="M219 361c-20,0 -35,-16 -35,-35l0 -63 70 0 0 63c0,19 -16,35 -35,35z"/>
+      <path class="fil7" d="M184 319l0 -56 70 0 0 42c-22,10 -46,13 -70,14z"/>
+      <path class="fil4" d="M219 300l0 0c-51,0 -93,-41 -93,-92l0 -20c0,-51 42,-93 93,-93 51,0 92,42 92,93l0 20c0,51 -41,92 -92,92z"/>
+      <path class="fil8" d="M258 211c2,8 13,12 24,10 11,-3 18,-11 16,-20 -1,-8 -12,-12 -23,-10 -11,3 -19,11 -17,20zm-78 0c-2,8 -13,12 -24,10 -11,-3 -19,-11 -17,-20 2,-8 13,-12 24,-10 11,3 18,11 17,20z"/>
+      <path class="fil9" d="M255 177c0,-3 -6,-3 -7,0 -1,5 -1,11 1,14 1,2 4,2 5,0 3,-3 2,-9 1,-14zm-66 14c-2,2 -4,2 -6,0 -2,-3 -1,-9 -1,-14 1,-3 7,-3 8,0 1,5 1,11 -1,14z"/>
+      <path class="fil10" d="M219 223c-7,0 -13,-6 -13,-13l0 -2c0,-1 1,-2 2,-2 1,0 1,1 1,2l0 2c0,6 5,10 10,10 5,0 9,-4 9,-10l0 -2c0,-1 1,-2 2,-2 1,0 1,1 1,2l0 2c0,7 -5,13 -12,13z"/>
+      <path class="fil10" d="M219 196c0,0 0,0 -1,-1 -2,0 -4,-2 -5,-4 -1,-2 -1,-5 1,-7 1,-2 3,-3 5,-3 2,0 4,1 5,2 0,0 0,1 -1,2 0,0 -1,0 -1,-1 -1,0 -2,0 -3,0 -1,0 -2,0 -3,1 -1,2 -1,3 -1,5 1,2 2,3 4,3 1,0 3,-1 4,-2 0,0 1,-1 2,0 0,0 0,1 0,1 -1,2 -3,4 -6,4z"/>
+      <path class="fil1" d="M121 187c38,4 130,-22 139,-75 0,0 6,51 56,75 0,0 23,-124 -95,-124 -119,0 -100,124 -100,124z"/>
+     </g>
+    </g>
+   </g>
+   <path class="fil11" d="M219 427c115,0 208,-93 208,-208 0,-115 -93,-208 -208,-208 -115,0 -208,93 -208,208 0,115 93,208 208,208z"/>
+   <path class="fil12" d="M219 416c54,0 103,-22 139,-58 36,-36 58,-85 58,-139 0,-55 -22,-104 -58,-140 -36,-35 -85,-57 -139,-57 -55,0 -104,22 -140,57 -35,36 -57,85 -57,140 0,54 22,103 57,139 36,36 85,58 140,58zm155 -42c-40,39 -95,64 -155,64 -61,0 -115,-25 -155,-64 -40,-40 -64,-95 -64,-155 0,-61 24,-115 64,-155 40,-40 94,-64 155,-64 60,0 115,24 155,64 39,40 64,94 64,155 0,60 -25,115 -64,155z"/>
+  </g>
+ </g>
+</svg>
diff --git a/src/assets/images/propic-blank.svg b/src/assets/images/propic-blank.svg
new file mode 100644
index 0000000..7a43c6b
--- /dev/null
+++ b/src/assets/images/propic-blank.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1.34166in" height="1.34166in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 427 427"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil5 {fill:none}
+    .fil0 {fill:#F4F8F8}
+    .fil2 {fill:#F7C3B9;fill-rule:nonzero}
+    .fil3 {fill:#F4B3AC;fill-rule:nonzero}
+    .fil4 {fill:#F29F96;fill-rule:nonzero}
+    .fil1 {fill:#49509E;fill-rule:nonzero}
+   ]]>
+  </style>
+    <clipPath id="id0">
+     <path d="M214 416c111,0 202,-91 202,-202 0,-112 -91,-202 -202,-202 -112,0 -202,90 -202,202 0,111 90,202 202,202z"/>
+    </clipPath>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_1359325661072">
+   <path class="fil0" d="M214 416c111,0 202,-91 202,-202 0,-112 -91,-202 -202,-202 -112,0 -202,90 -202,202 0,111 90,202 202,202z"/>
+   <g style="clip-path:url(#id0)">
+    <g>
+     <g>
+      <path id="1" class="fil1" d="M323 416l-218 0 0 -8c0,-61 48,-109 109,-109 60,0 109,48 109,109l0 8z"/>
+      <path class="fil2" d="M133 194c-2,-10 -13,-18 -24,-16 -10,2 -18,12 -17,22 1,11 11,20 21,23 11,3 22,1 33,-1l-13 -28z"/>
+      <path class="fil2" d="M294 194c3,-10 14,-18 24,-16 10,2 18,12 17,22 -1,11 -10,20 -21,23 -11,3 -22,1 -33,-1l13 -28z"/>
+      <path class="fil3" d="M214 352c-19,0 -34,-16 -34,-34l0 -62 68 0 0 62c0,18 -16,34 -34,34z"/>
+      <path class="fil4" d="M180 311l0 -55 68 0 0 42c-21,9 -45,12 -68,13z"/>
+      <path class="fil2" d="M214 293l0 0c-50,0 -90,-41 -90,-90l0 -20c0,-49 40,-89 90,-89 49,0 89,40 89,89l0 20c0,49 -40,90 -89,90z"/>
+     </g>
+    </g>
+   </g>
+   <path class="fil5" d="M214 416c111,0 202,-91 202,-202 0,-112 -91,-202 -202,-202 -112,0 -202,90 -202,202 0,111 90,202 202,202z"/>
+   <path class="fil1" d="M214 404c52,0 100,-21 134,-56 35,-34 56,-82 56,-134 0,-53 -21,-101 -56,-135 -34,-35 -82,-56 -134,-56 -53,0 -101,21 -135,56 -35,34 -56,82 -56,135 0,52 21,100 56,134 34,35 82,56 135,56zm151 -39c-39,38 -92,62 -151,62 -59,0 -113,-24 -151,-62 -39,-39 -63,-92 -63,-151 0,-59 24,-113 63,-151 38,-39 92,-63 151,-63 59,0 112,24 151,63 38,38 62,92 62,151 0,59 -24,112 -62,151z"/>
+  </g>
+ </g>
+</svg>
diff --git a/src/assets/images/qicon1.png b/src/assets/images/qicon1.png
new file mode 100644
index 0000000..1c09c2b
Binary files /dev/null and b/src/assets/images/qicon1.png differ
diff --git a/src/assets/images/qicon2.png b/src/assets/images/qicon2.png
new file mode 100644
index 0000000..7dcf148
Binary files /dev/null and b/src/assets/images/qicon2.png differ
diff --git a/src/assets/images/qicon3.png b/src/assets/images/qicon3.png
new file mode 100644
index 0000000..0a0bc77
Binary files /dev/null and b/src/assets/images/qicon3.png differ
diff --git a/src/assets/images/qtime.png b/src/assets/images/qtime.png
new file mode 100644
index 0000000..9d9ab3d
Binary files /dev/null and b/src/assets/images/qtime.png differ
diff --git a/src/assets/images/qup.png b/src/assets/images/qup.png
new file mode 100644
index 0000000..edcdca2
Binary files /dev/null and b/src/assets/images/qup.png differ
diff --git a/src/assets/images/token-coin.svg b/src/assets/images/token-coin.svg
new file mode 100644
index 0000000..ec88104
--- /dev/null
+++ b/src/assets/images/token-coin.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1.425in" height="1.425in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 726 726"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil4 {fill:none}
+    .fil1 {fill:#FDD54E}
+    .fil5 {fill:#FBE5B9}
+    .fil3 {fill:#F7BF4E}
+    .fil2 {fill:#F4B03D}
+    .fil6 {fill:#F0A230}
+    .fil0 {fill:#D17D2B}
+    .fil7 {fill:#3A3B3A}
+   ]]>
+  </style>
+     <clipPath id="id0">
+      <path d="M344 617c152,0 274,-123 274,-274 0,-151 -122,-274 -274,-274 -151,0 -273,123 -273,274 0,151 122,274 273,274z"/>
+     </clipPath>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_1359330850544">
+   <g>
+    <circle class="fil0" cx="363" cy="363" r="363"/>
+    <path class="fil1" d="M344 671c182,0 328,-147 328,-328 0,-181 -146,-328 -328,-328 -181,0 -327,147 -327,328 0,181 146,328 327,328zm0 -40c160,0 288,-129 288,-288 0,-159 -128,-288 -288,-288 -159,0 -287,129 -287,288 0,159 128,288 287,288z"/>
+    <path class="fil2" d="M344 617c152,0 274,-123 274,-274 0,-151 -122,-274 -274,-274 -151,0 -273,123 -273,274 0,151 122,274 273,274z"/>
+    <g style="clip-path:url(#id0)">
+     <g>
+      <circle class="fil3" cx="343" cy="126" r="274"/>
+     </g>
+    </g>
+    <path class="fil4" d="M344 617c152,0 274,-123 274,-274 0,-151 -122,-274 -274,-274 -151,0 -273,123 -273,274 0,151 122,274 273,274z"/>
+    <path class="fil5" d="M170 142c13,-13 29,-18 35,-9 6,8 -1,26 -14,40 -14,13 -29,18 -35,9 -6,-8 0,-26 14,-40zm44 -9c7,0 12,-6 12,-12 0,-7 -5,-12 -12,-12 -6,0 -12,5 -12,12 0,6 6,12 12,12z"/>
+    <path class="fil6" d="M511 503c13,-14 29,-18 35,-10 6,9 0,27 -14,40 -13,14 -29,18 -35,10 -6,-9 0,-26 14,-40zm44 -10c7,0 12,-5 12,-12 0,-6 -5,-11 -12,-11 -6,0 -11,5 -11,11 0,7 5,12 11,12z"/>
+   </g>
+   <path class="fil7" d="M486 205c7,0 12,0 15,0 4,1 7,2 11,5 5,2 8,6 9,11 2,6 3,13 3,22 0,9 -1,17 -3,22 -1,6 -4,10 -9,12 -4,2 -8,3 -11,4 -4,0 -9,0 -16,0l-132 0 0 44 85 0c7,0 12,0 16,1 3,0 7,1 11,4 8,4 11,15 11,34 0,20 -5,32 -16,36 -5,1 -12,2 -22,2l-85 0 0 81c0,7 0,12 0,16 -1,3 -2,6 -4,11 -5,8 -16,11 -34,11 -20,0 -32,-5 -36,-16 -1,-5 -2,-12 -2,-22l0 -81 -36 0c-10,0 -18,-1 -22,-2 -11,-4 -17,-16 -17,-36 0,-19 4,-30 12,-34 4,-3 8,-4 11,-4 3,-1 9,-1 15,-1l37 0 0 -82c0,-15 3,-25 8,-30 5,-6 16,-8 31,-8l170 0z"/>
+  </g>
+ </g>
+</svg>
diff --git a/src/assets/images/token-poin.svg b/src/assets/images/token-poin.svg
new file mode 100644
index 0000000..ae6fca3
--- /dev/null
+++ b/src/assets/images/token-poin.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1.425in" height="1.425in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 4353 4353"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil4 {fill:none}
+    .fil1 {fill:#FDD54E}
+    .fil5 {fill:#FBE5B9}
+    .fil3 {fill:#F7BF4E}
+    .fil2 {fill:#F4B03D}
+    .fil6 {fill:#F0A230}
+    .fil0 {fill:#D17D2B}
+    .fil7 {fill:#3A3B3A}
+   ]]>
+  </style>
+     <clipPath id="id0">
+      <path d="M2065 3697c906,0 1641,-735 1641,-1641 0,-907 -735,-1642 -1641,-1642 -907,0 -1641,735 -1641,1642 0,906 734,1641 1641,1641z"/>
+     </clipPath>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_1359333286720">
+   <g>
+    <circle class="fil0" cx="2177" cy="2177" r="2177"/>
+    <path class="fil1" d="M2065 4021c1085,0 1965,-880 1965,-1965 0,-1086 -880,-1966 -1965,-1966 -1086,0 -1965,880 -1965,1966 0,1085 879,1965 1965,1965zm0 -240c953,0 1726,-772 1726,-1725 0,-953 -773,-1726 -1726,-1726 -953,0 -1726,773 -1726,1726 0,953 773,1725 1726,1725z"/>
+    <path class="fil2" d="M2065 3697c906,0 1641,-735 1641,-1641 0,-907 -735,-1642 -1641,-1642 -907,0 -1641,735 -1641,1642 0,906 734,1641 1641,1641z"/>
+    <g style="clip-path:url(#id0)">
+     <g>
+      <circle class="fil3" cx="2058" cy="752" r="1641"/>
+     </g>
+    </g>
+    <path class="fil4" d="M2065 3697c906,0 1641,-735 1641,-1641 0,-907 -735,-1642 -1641,-1642 -907,0 -1641,735 -1641,1642 0,906 734,1641 1641,1641z"/>
+    <path class="fil5" d="M1017 854c81,-83 175,-108 211,-58 35,50 -3,157 -84,239 -81,83 -175,108 -210,58 -35,-50 2,-157 83,-239zm266 -59c39,0 70,-32 70,-71 0,-39 -31,-70 -70,-70 -39,0 -71,31 -71,70 0,39 32,71 71,71z"/>
+    <path class="fil6" d="M3062 3014c81,-82 176,-108 211,-58 35,50 -3,158 -84,240 -81,82 -175,108 -210,57 -35,-50 2,-157 83,-239zm266 -59c39,0 70,-31 70,-70 0,-39 -31,-71 -70,-71 -39,0 -70,32 -70,71 0,39 31,70 70,70z"/>
+   </g>
+   <path class="fil7" d="M2463 1163c-36,4 -79,4 -112,14 -34,10 -66,14 -101,25 -67,22 -116,46 -174,83 -45,28 -98,85 -123,132 -61,116 -3,174 -45,171 -183,-13 -335,2 -480,60 -119,48 -223,128 -262,249 -15,46 -7,726 -8,882 0,54 0,72 12,117 5,17 35,68 45,81 31,42 87,92 135,116 29,14 58,28 89,41 74,32 133,39 205,51 75,13 218,18 298,1 53,-12 84,-10 157,-34 147,-49 309,-139 329,-310 2,-17 -1,-50 2,-63 4,-19 30,-11 52,-10 198,6 371,-16 529,-106 15,-8 26,-17 39,-27 82,-65 96,-79 137,-183 16,-40 7,-188 7,-243l0 -638c1,-120 -31,-181 -120,-260 -140,-123 -422,-174 -611,-149zm126 249c-108,0 -161,3 -267,34 -34,10 -155,60 -144,101 11,40 118,79 154,90 90,27 123,30 219,30 64,0 159,-3 218,-26 40,-15 137,-39 164,-85 30,-51 -142,-116 -177,-122 -55,-10 -111,-22 -167,-22zm-829 679c100,0 182,1 274,-35 107,-42 212,-82 67,-156 -165,-84 -449,-83 -613,-1 -103,52 -86,78 -24,118 72,46 202,74 296,74zm416 188c-14,-1 -110,39 -176,49 -163,25 -240,24 -412,0 -28,-4 -63,-14 -88,-22 -24,-8 -65,-28 -86,-27 -4,24 -2,51 -2,76 0,34 -2,41 17,60 45,46 155,80 217,91 48,9 95,9 149,9 120,0 168,-7 266,-43 33,-12 76,-34 97,-55 19,-19 19,-23 18,-58 0,-26 2,-55 0,-80zm-1 425c-15,-2 -77,23 -97,30 -165,52 -425,46 -591,-7 -16,-5 -30,-12 -47,-19 -34,-12 -28,6 -28,36 1,58 -11,71 29,106 37,34 128,63 186,77 136,31 334,14 465,-43 20,-9 64,-36 77,-55 13,-17 11,-101 6,-125zm402 -359l-118 -4c-41,-2 -29,9 -29,132 0,40 12,38 48,40 142,8 290,-2 411,-72 64,-37 54,-61 51,-160 -22,-2 -59,15 -81,23 -79,28 -194,41 -282,41zm12 -422l-158 -6c-2,27 -1,56 -1,83 0,12 1,25 0,38 0,57 -4,51 159,51 98,0 135,-9 214,-35 35,-11 59,-22 88,-39 60,-36 53,-61 48,-160 -26,0 -97,36 -162,46 -33,5 -52,13 -89,14 -39,0 -60,8 -99,8z"/>
+  </g>
+ </g>
+</svg>
diff --git a/src/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index f3d2503..0000000
Binary files a/src/assets/logo.png and /dev/null differ
diff --git a/src/assets/tailwind.css b/src/assets/tailwind.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/src/assets/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/main.js b/src/main.js
index 01433bc..fe6c3fa 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import './assets/tailwind.css'
+import router from './router'
+
+
+createApp(App).use(router).mount('#app')
 
-createApp(App).mount('#app')
diff --git a/src/pages/Character.vue b/src/pages/Character.vue
new file mode 100644
index 0000000..f741194
--- /dev/null
+++ b/src/pages/Character.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-green-100 to-green-300 pb-28 pr-2 pl-2">
+    <div class="w-full max-w-md flex flex-col items-center z-60 " >
+        <div class="relative flex items-end justify-center z-30 px-[10px] mt-[40px]">
+          <img
+            src="/images/logo.png"
+            :alt="selectedCharacter.name"
+            class="object-contain relative z-30 pb-0"
+          />
+        </div>
+        <h2 class="mt-6 text-xl font-bold text-gray-700">
+          {{ selectedCharacter.name }}
+        </h2>
+        <div class="relative w-40 h-50 flex items-end justify-center z-30 px-[10px]">
+          <img
+            :src="selectedProfile.img"
+            :alt="selectedCharacter.name"
+            class="w-40 h-60 object-contain relative z-30 pb-12"
+          />
+          <div
+              class="absolute w-[30px] h-[30px] right-0 top-[100px] z-40 bg-green-600 hover:bg-green-400 transition"
+              style="
+                -webkit-mask: url('/images/icon-edit.svg') no-repeat center;
+                -webkit-mask-size: contain;
+                mask: url('/images/icon-edit.svg') no-repeat center;
+                mask-size: contain;
+              "
+              @click="changeAva('profile')"
+            ></div>
+
+        </div>
+     </div>
+    <div class="w-full max-w-md flex flex-col items-center z-60">
+      <div class="bg-lime-200 shadow-xl rounded-2xl p-6 flex flex-col items-center 
+        relative w-full px-[10px] mx-[10px] bg-cover bg-center bg-no-repeat" 
+        style="background-image: url('/images/bghero.jpg')">
+        <div class="relative w-40 h-50 flex items-end justify-center z-30 px-[10px] mt-[40px]">
+          <img
+            :src="selectedCharacter.img"
+            :alt="selectedCharacter.name"
+            class="w-40 h-60 object-contain relative z-30 pb-12"
+          />
+        </div>
+
+        <!-- <div class="absolute bottom-9 w-32 h-16 flex items-center justify-center perspective-800">
+          <div class="w-28 h-4 bg-gradient-to-r from-gray-400 to-gray-500 rounded-full absolute top-3 left-0 blur-sm opacity-70"></div>
+          <div
+            class="absolute w-28 h-8 rounded-full bg-white transform-gpu rotate-x-60 scale-y-50 shadow-md z-10 top-1"
+          ></div>
+          <div
+            class="absolute w-28 h-8 rounded-full bg-grey transform-gpu rotate-x-60 scale-y-50 shadow-md z-10 top-3"
+          ></div>
+          <div
+            class="absolute w-28 h-5 rounded-full bg-black opacity-30 blur-md bottom-5"
+          ></div>
+        </div> -->
+        
+        <!-- <div class="flex items-center justify-center w-[30px] h-[30px] rounded-full border-4 border-green-500 absolute top-2 right-2">
+        <img src="/images/but-nav-koleksi.png" alt="img" class="w-[20px] h-[20px] " 
+        @click="changeAva('character')">
+        </div> -->
+      </div>
+    </div>
+
+    <!-- Character Selection -->
+     <div class="w-full max-w-md flex flex-col items-center z-60 " >
+        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-6 w-full max-w-2xl">
+
+          <div 
+            v-for="char in characters" 
+            :key="char.name"
+            @click="selectedCharacter = char"
+            class="cursor-pointer flex flex-col items-center p-4 rounded-xl shadow-md hover:shadow-lg transition bg-white"
+            :class="{'ring-4 ring-green-400': selectedCharacter.name === char.name}"
+          >
+            <img :src="char.img" :alt="char.name" class="w-20 h-20 object-contain" />
+            <!-- <p class="mt-2 text-gray-600 font-medium">{{ char.name }}</p> -->
+          </div>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "App",
+  data() {
+    return {
+      characters: [
+        { name: "Bear", img: "../images/char/bear.png" },
+        { name: "Rabbit", img: "../images/char/rabbit.png" },
+        { name: "Fox", img: "../images/char/fox.png" },
+        { name: "Brown Bear", img: "../images/char/brownbear.png" },
+        { name: "Lion", img: "../images/char/lion.png" },
+        { name: "Monkey", img: "../images/char/monkey.png" },
+        { name: "Pig", img: "../images/char/pig.png" },
+        { name: "Sheep", img: "../images/char/sheep.png" },
+        { name: "Tiger", img: "../images/char/tiger.png" },
+      ],
+
+      profiles : [
+        {name : "profile", img: "/images/propic-001.svg"},
+        {name : "profile", img: "/images/propic-blank.svg"},
+      ],
+
+      selectedCharacter: { name: "Tiger", img: "../images/char/tiger.png" },
+      showModal:false,
+      selectedProfile : {name : "profile", img: "/images/propic-001.svg"},
+      modalType : "profile",
+    };
+  },
+  methods: {
+    clickCharacter(char) {
+      this.selectedCharacter = char;
+      this.showModal = false;
+    },
+    changeAva(type) {
+      this.modalType = type;
+      this.showModal = true;
+    },
+     profileListSelected(profile) {
+      this.selectedProfile = profile;
+      this.showModal = false;
+    }
+  },
+};
+</script>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
new file mode 100644
index 0000000..a8e94c4
--- /dev/null
+++ b/src/pages/Home.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-green-100 to-green-300 pb-28 pr-2 pl-2">
+    <!-- Character Preview -->
+     <div class="w-full max-w-md flex flex-col items-center z-60 " >
+        <div class="relative flex items-end justify-center z-30 px-[10px] mt-[40px]">
+          <img
+            src="/images/logo.png"
+            :alt="selectedCharacter.name"
+            class="object-contain relative z-30 pb-0"
+          />
+        </div>
+        <div class="relative w-40 h-50 flex items-end justify-center z-30 px-[10px]">
+          <img
+            :src="selectedProfile.img"
+            :alt="selectedCharacter.name"
+            class="w-40 h-60 object-contain relative z-30 pb-12"
+          />
+          <div
+              class="absolute w-[30px] h-[30px] right-0 top-[100px] z-40 bg-green-600 hover:bg-green-400 transition"
+              style="
+                -webkit-mask: url('/images/icon-edit.svg') no-repeat center;
+                -webkit-mask-size: contain;
+                mask: url('/images/icon-edit.svg') no-repeat center;
+                mask-size: contain;
+              "
+              @click="changeAva('profile')"
+            ></div>
+
+        </div>
+     </div>
+    <div class="w-full max-w-md flex flex-col items-center z-60">
+      <div class="bg-lime-200 shadow-xl rounded-2xl p-6 flex flex-col items-center 
+        relative w-full px-[10px] mx-[10px] bg-cover bg-center bg-no-repeat" 
+        style="background-image: url('/images/bghero.jpg')">
+        <div class="relative w-40 h-50 flex items-end justify-center z-30 px-[10px] mt-[40px]">
+          <img
+            :src="selectedCharacter.img"
+            :alt="selectedCharacter.name"
+            class="w-40 h-60 object-contain relative z-30 pb-12"
+          />
+        </div>
+        <div class="flex flex-row items-start justify-between gap-12 w-full pt-5 absolute bottom-2 left-2 pr-5">
+          <div class="bg-white w-[90px] h-[60px] rounded-xl p-1 shadow-lg flex flex-col bottom-0">
+            <span class="text-xs font-bold text-gray-800 items-center text-center">{{ 'KOIN' }}</span>
+            <div class="flex items-end justify-center gap-2 p-1">
+              <img src="/images/token-poin.svg" alt="coin" class="w-6 h-6" />
+              <span>100</span>
+            </div>
+          </div>
+          <div class="bg-white w-[90px] h-[60px] rounded-xl p-1 shadow-lg flex flex-col bottom-0">
+            <span class="text-xs font-bold text-gray-800 items-center text-center">{{ 'Dayly Quest' }}</span>
+            <div class="flex items-end justify-center gap-2 p-1">
+              <span>3/10</span>
+            </div>
+          </div>
+        </div>
+        <div class="flex items-center justify-center w-[30px] h-[30px] rounded-full border-4 border-green-500 absolute top-2 right-2">
+        <img src="/images/but-nav-koleksi.png" alt="img" class="w-[20px] h-[20px] " 
+        @click="changeAva('character')">
+        </div>
+      </div>
+    </div>
+
+
+    <div class="logo w-full max-w-md flex flex-col items-center mt-4">
+      <div class="bg-grey shadow-xl rounded-2xl px-16 py-1 flex flex-col items-center">
+        <h2 class="mt-4 mb-4 text-md font-bold text-grey-400">Level 10 - Hari ke-2</h2>
+      </div>
+    </div>
+
+    <!-- Character Selection -->
+     <div class="w-full max-w-md flex flex-col items-center bg-green-grey py-[0px] mx-[10px] md:mx-0
+     transform transition-transform duration-300 hover:scale-105
+     ">
+        <div class="bg-lime-500 rounded-3xl p-6 shadow-2xl-soft flex items-start gap-4 w-full py-[10px] my-[20px]">
+          <div class="flex-shrink-0 mt-1">
+            <img src="/images/qicon1.png" alt="Quest Icon" class="w-12 h-12" />
+          </div>
+
+          <div class="flex-1">
+            <h2 class="text-xl font-bold text-gray-800">{{ 'BANGUN PAGI' }}</h2>
+            <p class="text-sm text-gray-600 mb-2">{{ 'Mulai hari dengan semangat.!' }}</p>
+
+            <div class="flex items-center gap-4 text-xs text-gray-700">
+              <span class="flex items-center gap-1">
+                <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 11V5a1 1 0 012 0v6a1 1 0 01-2 0zM10 13a1 1 0 100 2 1 1 0 000-2z"/></svg>
+                {{ '12:20' }}
+              </span>
+              <span class="flex items-center gap-1">
+                <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15a5 5 0 100-10 5 5 0 000 10z"/><path fill-rule="evenodd" d="M10 0a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"/></svg>
+                +{{ '1000' }} koin
+              </span>
+              <span class="flex items-center gap-1">
+                <svg class="w-4 h-4 text-green-600 transform rotate-180" fill="currentColor" viewBox="0 0 20 20"><path d="M10 14a1 1 0 01-.707-.293l-4-4a1 1 0 011.414-1.414L10 11.586l3.293-3.293a1 1 0 011.414 1.414l-4 4A1 1 0 0110 14z"/></svg>
+                +{{ '100' }}mm
+              </span>
+            </div>
+            <div class="flex items-center gap-4 text-xs text-gray-700">
+              <button class="w-full mt-4 py-2 px-4 rounded-lg bg-green-600 text-white font-bold hover:bg-green-700 transition">MULAI QUEST</button>
+            </div>
+          </div>
+        </div>
+    </div>
+    <div class="w-full max-w-md flex flex-col items-center bg-white-grey py-[0px] mx-2.5 md:mx-5 
+    transform transition-transform duration-300 hover:scale-105
+    ">
+        <div class="bg-white rounded-3xl p-6 shadow-2xl-soft flex items-start gap-4 w-full py-[10px] my-[20px]">
+          <div class="flex-shrink-0 mt-1">
+            <img src="/images/qicon2.png" alt="Quest Icon" class="w-12 h-12" />
+          </div>
+
+          <div class="flex-1">
+            <h2 class="text-xl font-bold text-gray-800">{{ 'MAKAN SIANG' }}</h2>
+            <p class="text-sm text-gray-600 mb-2">{{ 'Waktunya makan siang dan istirahat.' }}</p>
+
+            <div class="flex items-center gap-4 text-xs text-gray-700">
+              <span class="flex items-center gap-1">
+                <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 11V5a1 1 0 012 0v6a1 1 0 01-2 0zM10 13a1 1 0 100 2 1 1 0 000-2z"/></svg>
+                {{ '12:20' }}
+              </span>
+              <span class="flex items-center gap-1">
+                <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15a5 5 0 100-10 5 5 0 000 10z"/><path fill-rule="evenodd" d="M10 0a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"/></svg>
+                +{{ '1000' }} koin
+              </span>
+              <span class="flex items-center gap-1">
+                <svg class="w-4 h-4 text-green-600 transform rotate-180" fill="currentColor" viewBox="0 0 20 20"><path d="M10 14a1 1 0 01-.707-.293l-4-4a1 1 0 011.414-1.414L10 11.586l3.293-3.293a1 1 0 011.414 1.414l-4 4A1 1 0 0110 14z"/></svg>
+                +{{ '100' }}mm
+              </span>
+            </div>
+            <div class="flex items-center gap-4 text-xs text-gray-700">
+              <button class="w-full mt-4 py-2 px-4 rounded-lg bg-red-600 text-white font-bold hover:bg-green-700 transition">MULAI QUEST</button>
+            </div>
+          </div>
+        </div>
+    </div>
+    <div class="w-full max-w-md flex flex-col items-center bg-green-grey py-[0px] mx-2.5 md:mx-5
+    transform transition-transform duration-300 hover:scale-105
+    ">
+        <div class="bg-white rounded-3xl p-6 shadow-2xl-soft flex items-start gap-4 w-full py-[10px] my-[20px]">
+          <div class="flex-shrink-0 mt-1">
+            <img src="/images/qicon3.png" alt="Quest Icon" class="w-12 h-12" />
+          </div>
+
+          <div class="flex-1">
+            <h2 class="text-xl font-bold text-gray-800">{{ 'CERITA HARI INI' }}</h2>
+            <p class="text-sm text-gray-600 mb-2">{{ 'Berbagi cerita seru hari ini' }}</p>
+
+            <div class="flex items-center gap-4 text-xs text-gray-700">
+              <span class="flex items-center gap-1">
+                <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 11V5a1 1 0 012 0v6a1 1 0 01-2 0zM10 13a1 1 0 100 2 1 1 0 000-2z"/></svg>
+                {{ '12:20' }}
+              </span>
+              <span class="flex items-center gap-1">
+                <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15a5 5 0 100-10 5 5 0 000 10z"/><path fill-rule="evenodd" d="M10 0a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"/></svg>
+                +{{ '1000' }} koin
+              </span>
+              <span class="flex items-center gap-1">
+                <svg class="w-4 h-4 text-red-600 transform rotate-180" fill="currentColor" viewBox="0 0 20 20"><path d="M10 14a1 1 0 01-.707-.293l-4-4a1 1 0 011.414-1.414L10 11.586l3.293-3.293a1 1 0 011.414 1.414l-4 4A1 1 0 0110 14z"/></svg>
+                +{{ '100' }}mm
+              </span>
+            </div>
+            <div class="flex items-center gap-4 text-xs text-gray-700">
+              <button class="w-full mt-4 py-2 px-4 rounded-lg bg-red-600 text-white font-bold hover:bg-green-700 transition">MULAI QUEST</button>
+            </div>
+          </div>
+        </div>
+    </div>
+    <!-- Modal -->
+    <div
+      v-if="showModal"
+      class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"
+    >
+      <div class="bg-white rounded-lg p-6 w-80 max-h-[80vh] overflow-auto relative">
+        <h2 class="text-xl font-bold mb-4">Pilih {{ modalType === 'profile' ? 'Profil' : 'Karakter' }}</h2>
+
+        <!-- Tombol close -->
+        <button
+          @click="showModal = false"
+          class="absolute top-2 right-2 text-gray-500 hover:text-gray-800"
+        >
+          ✕
+        </button>
+
+        <!-- List karakter -->
+        <div class="grid grid-cols-3 gap-4" v-if="modalType === 'profile'">
+          <div 
+            v-for="prof in profiles" 
+            :key="prof.name"
+            @click="profileListSelected(prof)"
+            class="cursor-pointer hover:scale-105 transform transition flex flex-col items-center"
+          >
+            <img :src="prof.img" :alt="prof.name" class="w-16 h-16 rounded"/>
+            <span class="text-sm mt-1">{{ prof.name }}</span>
+          </div>
+        </div>
+        <div class="grid grid-cols-3 gap-4" v-if="modalType === 'character'">
+          <div 
+            v-for="char in characters" 
+            :key="char.name"
+            @click="clickCharacter(char)"
+            class="cursor-pointer hover:scale-105 transform transition flex flex-col items-center"
+          >
+            <img :src="char.img" :alt="char.name" class="w-16 h-16 rounded"/>
+            <span class="text-sm mt-1">{{ char.name }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "App",
+  data() {
+    return {
+      characters: [
+        { name: "Bear", img: "../images/char/bear.png" },
+        { name: "Rabbit", img: "../images/char/rabbit.png" },
+        { name: "Fox", img: "../images/char/fox.png" },
+        { name: "Brown Bear", img: "../images/char/brownbear.png" },
+        { name: "Lion", img: "../images/char/lion.png" },
+        { name: "Monkey", img: "../images/char/monkey.png" },
+        { name: "Pig", img: "../images/char/pig.png" },
+        { name: "Sheep", img: "../images/char/sheep.png" },
+        { name: "Tiger", img: "../images/char/tiger.png" },
+      ],
+
+      profiles : [
+        {name : "profile", img: "/images/propic-001.svg"},
+        {name : "profile", img: "/images/propic-blank.svg"},
+      ],
+
+      selectedCharacter: { name: "Tiger", img: "../images/char/tiger.png" },
+      showModal:false,
+      selectedProfile : {name : "profile", img: "/images/propic-001.svg"},
+      modalType : "profile",
+    };
+  },
+  methods: {
+    clickCharacter(char) {
+      this.selectedCharacter = char;
+      this.showModal = false;
+    },
+    changeAva(type) {
+      this.modalType = type;
+      this.showModal = true;
+    },
+     profileListSelected(profile) {
+      this.selectedProfile = profile;
+      this.showModal = false;
+    }
+  },
+}; 
+</script>
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
new file mode 100644
index 0000000..c221a94
--- /dev/null
+++ b/src/pages/Login.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="flex flex-col items-center justify-center bg-gradient-to-b from-green-100 to-green-300">
+    <div class="w-full max-w-md flex flex-col items-center z-60 mt-10">
+        <div class="relative flex items-end justify-center z-30">
+          <img
+            src="/images/logo.png"
+            :alt="selectedCharacter.name"
+            class="object-contain relative z-30 pb-0"
+          />
+        </div>
+        <div class="relative w-40 h-50 flex items-end justify-center z-30 px-[10px]">
+          <img
+            :src="selectedProfile.img"
+            :alt="selectedCharacter.name"
+            class="w-40 h-60 object-contain relative z-30"
+          />
+        </div>
+     </div>
+    <!-- Character Selection -->
+     <div class="w-full flex flex-col items-center z-60">
+        <div class="w-full p-4">
+          <div class="mb-4">
+              <input type="text" placeholder="email"
+              class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl 
+              focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300"
+              />
+          </div>
+          <div class="mb-4">
+              <input type="text" placeholder="Password"
+              class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300"
+              />
+          </div>
+          
+          <button class="w-full mt-6 h-[60px] bg-lime-500 border border-transparent rounded-lg px-4 py-2 text-sm font-medium text-white hover:bg-lime-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500"> R E G I S T E R </button>
+          <div class="w-full flex items-center justify-center mt-2">
+            <router-link to="/register">
+              <span class="cursor-pointer justify-center text-center text-sm mt-2 text-blue-600 font-bold">R E G I S T E R</span>
+            </router-link>
+          </div>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "App",
+  data() {
+    return {
+      characters: [
+        { name: "Bear", img: "../images/char/bear.png" },
+        { name: "Rabbit", img: "../images/char/rabbit.png" },
+        { name: "Fox", img: "../images/char/fox.png" },
+        { name: "Brown Bear", img: "../images/char/brownbear.png" },
+        { name: "Lion", img: "../images/char/lion.png" },
+        { name: "Monkey", img: "../images/char/monkey.png" },
+        { name: "Pig", img: "../images/char/pig.png" },
+        { name: "Sheep", img: "../images/char/sheep.png" },
+        { name: "Tiger", img: "../images/char/tiger.png" },
+      ],
+
+      profiles : [
+        {name : "profile", img: "/images/propic-001.svg"},
+        {name : "profile", img: "/images/propic-blank.svg"},
+      ],
+
+      selectedCharacter: { name: "Tiger", img: "../images/char/tiger.png" },
+      showModal:false,
+      selectedProfile : {name : "profile", img: "/images/propic-001.svg"},
+      modalType : "profile",
+    };
+  },
+  methods: {
+    clickCharacter(char) {
+      this.selectedCharacter = char;
+      this.showModal = false;
+    },
+    changeAva(type) {
+      this.modalType = type;
+      this.showModal = true;
+    },
+     profileListSelected(profile) {
+      this.selectedProfile = profile;
+      this.showModal = false;
+    }
+  },
+};
+</script>
diff --git a/src/pages/Register.vue b/src/pages/Register.vue
new file mode 100644
index 0000000..fae6e38
--- /dev/null
+++ b/src/pages/Register.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="flex flex-col items-center justify-center bg-gradient-to-b from-green-100 to-green-300 pb-28 pr-4 pl-4">
+    <div class="max-w-md flex flex-col items-center z-60" >
+        <div class="relative flex items-end justify-center z-30 px-[10px] mt-[10px]">
+          <img
+            src="/images/logo.png"
+            :alt="selectedCharacter.name"
+            class="object-contain relative z-30 pb-0"
+          />
+        </div>
+        <h2 class="mt-6 text-xl font-bold text-gray-700">
+          {{ selectedCharacter.name }}
+        </h2>
+        <div class="relative w-40 h-50 flex items-end justify-center z-30 px-[10px]">
+          <img
+            :src="selectedProfile.img"
+            :alt="selectedCharacter.name"
+            class="w-40 h-60 object-contain relative z-30 pb-12"
+          />
+        </div>
+     </div>
+    <!-- Character Selection -->
+     <div class="w-full flex flex-col items-center z-60" >
+        <div class="w-full ">
+          <div class="mb-4">
+              <input type="text" placeholder="Real Name"
+              class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl 
+              focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300 shadow-lg"
+              />
+          </div>
+          <div class="mb-4">
+              <input type="text" placeholder="Email"
+              class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl 
+              focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300 shadow-lg"
+              />
+          </div>
+          <div class="mb-4">
+              <input type="text" placeholder="Phone"
+              class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl 
+              focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300 shadow-lg"
+              />
+          </div>
+          <div >
+              <input type="text" placeholder="Password"
+              class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl 
+              focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300 shadow-lg"
+              />
+          </div>
+          <button class="w-full mt-6 h-[60px] bg-lime-500 border border-transparent rounded-lg px-4 py-2 text-sm font-medium text-white hover:bg-lime-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500"> R E G I S T E R </button>
+          <div class="flex items-center justify-center  mt-4">
+            <router-link  to ="/login">
+            <span class="font-bold text-sm text-blue-600">L O G I N</span>
+            </router-link>
+          </div>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "App",
+  data() {
+    return {
+      characters: [
+        { name: "Bear", img: "../images/char/bear.png" },
+        { name: "Rabbit", img: "../images/char/rabbit.png" },
+        { name: "Fox", img: "../images/char/fox.png" },
+        { name: "Brown Bear", img: "../images/char/brownbear.png" },
+        { name: "Lion", img: "../images/char/lion.png" },
+        { name: "Monkey", img: "../images/char/monkey.png" },
+        { name: "Pig", img: "../images/char/pig.png" },
+        { name: "Sheep", img: "../images/char/sheep.png" },
+        { name: "Tiger", img: "../images/char/tiger.png" },
+      ],
+
+      profiles : [
+        {name : "profile", img: "/images/propic-001.svg"},
+        {name : "profile", img: "/images/propic-blank.svg"},
+      ],
+
+      selectedCharacter: { name: "Tiger", img: "../images/char/tiger.png" },
+      showModal:false,
+      selectedProfile : {name : "profile", img: "/images/propic-001.svg"},
+      modalType : "profile",
+    };
+  },
+  methods: {
+    clickCharacter(char) {
+      this.selectedCharacter = char;
+      this.showModal = false;
+    },
+    changeAva(type) {
+      this.modalType = type;
+      this.showModal = true;
+    },
+     profileListSelected(profile) {
+      this.selectedProfile = profile;
+      this.showModal = false;
+    }
+  },
+};
+</script>
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..b4acb62
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomePage from '../pages/Home.vue'
+import ContentPage from '../pages/Home.vue'
+import CharacterPage from '../pages/Character.vue'
+import RegistePage from '../pages/Register.vue'
+import loginPage from '../pages/Login.vue'
+
+const routes = [
+  { path: '/', name: 'home', component: HomePage },
+  { path: '/content', name: 'content', component: ContentPage },
+  { path: '/character', name: 'character', component: CharacterPage },
+  {path: '/register', name: 'register', component: RegistePage},
+  {path: '/login', name:'login', component:loginPage}
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+export default router
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..d1fd553
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,31 @@
+import defaultTheme from "tailwindcss/defaultTheme";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./public/index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        green: {
+          50: "#f0fdf4",
+          100: "#dcfce7",
+          200: "#bbf7d0",
+          300: "#86efac",
+          400: "#4ade80",
+          500: "#22c55e",
+          600: "#16a34a",
+          700: "#15803d",
+          800: "#166534",
+          900: "#14532d",
+        },
+        red: {
+          500: "#ef4444",
+        },
+      },
+    },
+  },
+  presets: [defaultTheme],
+};