diff --git a/public/assets/audio/hook-arround.mp3 b/public/assets/audio/hook-around.mp3
similarity index 100%
rename from public/assets/audio/hook-arround.mp3
rename to public/assets/audio/hook-around.mp3
diff --git a/public/assets/audio/slide-around.mp3 b/public/assets/audio/slide-around.mp3
new file mode 100755
index 0000000..bfff4a4
Binary files /dev/null and b/public/assets/audio/slide-around.mp3 differ
diff --git a/public/assets/capital-letter/J_l1.svg b/public/assets/capital-letter/J_l1.svg
new file mode 100755
index 0000000..c430ace
--- /dev/null
+++ b/public/assets/capital-letter/J_l1.svg
@@ -0,0 +1,231 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="h_l3.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="d_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="31.19192,73.869705"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="36.906258,27.301511"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="36.037285,19.413344"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="54.122374,93.823341"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.786217,21.819752"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g14176"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g18697"
+       style="display:inline"
+       transform="translate(25.852585,1.525942)">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 34.100666,7.7142687 C 34.111679,8.7911418 33.956611,44.705584 33.811595,66.223261 34.192049,90.582857 -2.9162649,87.11519 2.1020547,57.916134"
+         id="path127"
+         sodipodi:nodetypes="ccc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="33.212013"
+         y="10.601716"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="33.212013"
+           y="10.601716">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-34.323376"
+         cy="-8.5520439"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 34.119937,21.49086 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <g
+       id="g18704"
+       style="display:none"
+       transform="matrix(1.2524894,0,0,1.0646672,-14.203764,-38.140054)">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.47293;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 39.142669,73.987028 21.401647,0.110198"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391436;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 48.688134,73.955975 41.183058,73.814371"
+         id="path9576"
+         sodipodi:nodetypes="cc" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.11391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-72.913704"
+         cy="40.918648"
+         transform="matrix(0.01563487,-0.99987777,0.99974017,0.02279479,0,0)"
+         rx="1.140859"
+         ry="0.94491148" />
+      <text
+         xml:space="preserve"
+         style="font-size:1.85538px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.113908;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="43.211548"
+         y="67.832787"
+         id="text9714"
+         transform="scale(0.91001737,1.0988801)"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.113908;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="43.211548"
+           y="67.832787">3</tspan></text>
+    </g>
+    <g
+       id="g18711"
+       style="display:none">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 62.584185,7.8092747 c -0.04579,0.3074089 -0.03422,65.9377763 -0.03422,65.9377763"
+         id="path15674"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="61.848087"
+         y="10.675919"
+         id="text15678"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan15676"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="61.848087"
+           y="10.675919">2</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle15680"
+         cx="-62.801434"
+         cy="-7.9862614"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 62.603456,21.585866 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path15682"
+         sodipodi:nodetypes="cc" />
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/letter/a.svg b/public/assets/capital-letter/a.svg
old mode 100644
new mode 100755
similarity index 81%
rename from public/assets/letter/a.svg
rename to public/assets/capital-letter/a.svg
index a8ff305..28a2619
--- a/public/assets/letter/a.svg
+++ b/public/assets/capital-letter/a.svg
@@ -11,7 +11,7 @@
    inkscape:export-xdpi="96"
    inkscape:export-ydpi="96"
    inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
-   sodipodi:docname="a_l3.svg"
+   sodipodi:docname="a.svg"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
@@ -182,46 +182,6 @@
        sodipodi:nodetypes="cc"
        inkscape:transform-center-x="1.9143729"
        inkscape:transform-center-y="5.0531116" />
-    <g
-       id="g1238"
-       style="display:inline">
-      <path
-         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-         d="m 36.897143,48.164759 26.507248,0.07809"
-         id="path1108" />
-      <path
-         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
-         d="M 48.768524,48.161093 39.639351,48.31565"
-         id="path9576"
-         sodipodi:nodetypes="cc"
-         inkscape:transform-center-x="-4.8199192"
-         inkscape:transform-center-y="0.3134404" />
-      <g
-         id="g21538"
-         transform="translate(-21.46967,-27.579792)"
-         style="display:inline">
-        <ellipse
-           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
-           id="circle9582"
-           cx="-74.661598"
-           cy="60.70055"
-           transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
-           rx="1.2146922"
-           ry="1.1834064" />
-        <text
-           xml:space="preserve"
-           style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
-           x="59.531094"
-           y="75.579971"
-           id="text9714"
-           transform="scale(0.98702867,1.0131418)"><tspan
-             sodipodi:role="line"
-             id="tspan9712"
-             style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
-             x="59.531094"
-             y="75.579971">3</tspan></text>
-      </g>
-    </g>
     <path
        style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
        d="M 49.945039,9.1516334 C 50.028779,9.4481077 73.189935,72.317745 73.189935,72.317745"
@@ -262,6 +222,47 @@
          sodipodi:nodetypes="cc"
          inkscape:transform-center-x="-1.6158511"
          inkscape:transform-center-y="4.8664848" />
+      <g
+         id="g1238"
+         style="display:inline"
+         transform="translate(-0.35203906,-0.62379443)">
+        <path
+           style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="m 36.897143,48.164759 26.507248,0.07809"
+           id="path1108" />
+        <path
+           style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+           d="M 48.768524,48.161093 39.639351,48.31565"
+           id="path9576"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-4.8199192"
+           inkscape:transform-center-y="0.3134404" />
+        <g
+           id="g21538"
+           transform="translate(-21.46967,-27.579792)"
+           style="display:inline">
+          <ellipse
+             style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+             id="circle9582"
+             cx="-74.661598"
+             cy="60.70055"
+             transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
+             rx="1.2146922"
+             ry="1.1834064" />
+          <text
+             xml:space="preserve"
+             style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+             x="59.531094"
+             y="75.579971"
+             id="text9714"
+             transform="scale(0.98702867,1.0131418)"><tspan
+               sodipodi:role="line"
+               id="tspan9712"
+               style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+               x="59.531094"
+               y="75.579971">3</tspan></text>
+        </g>
+      </g>
     </g>
   </g>
 </svg>
diff --git a/public/assets/letter/a_l1.svg b/public/assets/capital-letter/a_l1.svg
similarity index 100%
rename from public/assets/letter/a_l1.svg
rename to public/assets/capital-letter/a_l1.svg
diff --git a/public/assets/letter/a_l2.svg b/public/assets/capital-letter/a_l2.svg
similarity index 100%
rename from public/assets/letter/a_l2.svg
rename to public/assets/capital-letter/a_l2.svg
diff --git a/public/assets/letter/a_l3.svg b/public/assets/capital-letter/a_l3.svg
similarity index 100%
rename from public/assets/letter/a_l3.svg
rename to public/assets/capital-letter/a_l3.svg
diff --git a/public/assets/capital-letter/b.svg b/public/assets/capital-letter/b.svg
new file mode 100755
index 0000000..39b4e08
--- /dev/null
+++ b/public/assets/capital-letter/b.svg
@@ -0,0 +1,169 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-35"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-62" />
+    </marker>
+  </defs>
+  <g
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g344">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 48.503835,7.2773964 48.071477,78.855459"
+         id="path127" />
+      <g
+         id="g2108"
+         transform="translate(-0.7254407,-10.298307)">
+        <text
+           xml:space="preserve"
+           style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="48.182404"
+           y="19.336451"
+           id="text9342"
+           transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+             id="tspan9340"
+             style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+             x="48.182404"
+             y="19.336451">1</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="path9448"
+           cx="-49.550514"
+           cy="-16.824097"
+           r="1.2760839"
+           transform="rotate(-178.67073)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-35);paint-order:stroke fill markers"
+         d="m 48.371278,20.064173 c -0.0082,-2.146546 0.03446,-10.4084144 0.03446,-10.4084144"
+         id="path13743" />
+    </g>
+    <g
+       id="g370"
+       style="display:inline">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 50.078881,42.699475 C 93.874653,51.841734 95.165897,-3.5730008 48.619769,7.2562447"
+         id="path3061" />
+      <g
+         id="g1198"
+         transform="translate(3.2556029,-2.8149031)"
+         style="display:inline">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="49.768463"
+           y="10.649764"
+           id="text15678"
+           transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="49.768463"
+             y="10.649764">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-50.731476"
+           cy="-8.3328476"
+           r="1.2760839"
+           transform="rotate(-178.35508)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
+         d="M 66.047717,6.789157 C 62.831195,5.9433878 59.42289,5.8384944 55.368578,7.0825755"
+         id="path15682" />
+      <g
+         id="g439"
+         style="display:inline">
+        <path
+           style="display:inline;fill:none;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 47.995735,79.091605 C 91.791507,88.233864 96.514851,33.879382 49.968723,44.708634"
+           id="path7796" />
+        <g
+           id="g1149"
+           transform="translate(-27.968881,-7.5584371)">
+          <text
+             xml:space="preserve"
+             style="font-size:2.29383px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.115053;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+             x="79.432571"
+             y="53.184124"
+             id="text9342-1"
+             transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+               id="tspan9340-2"
+               style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.115053;stroke-dasharray:none;stroke-opacity:1"
+               x="79.432571"
+               y="53.184124">3</tspan></text>
+          <circle
+             style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+             id="path9448-7"
+             cx="-81.574226"
+             cy="-49.920895"
+             r="1.2760839"
+             transform="rotate(-178.67073)" />
+        </g>
+        <path
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+           d="m 63.603296,43.623278 c -3.114339,-1.102484 -6.629721,-0.645631 -9.243068,0.45777"
+           id="path9576" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/b_l1.svg b/public/assets/capital-letter/b_l1.svg
new file mode 100755
index 0000000..ba96804
--- /dev/null
+++ b/public/assets/capital-letter/b_l1.svg
@@ -0,0 +1,177 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="b_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="b.svg.2023_09_26_13_13_50.0.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.7011402"
+     inkscape:cx="161.9502"
+     inkscape:cy="153.42651"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="49.994203,105.87826"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="11.638122,-4.3701617"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="86.919797,93.944903"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.78941,19.290555"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.90363,95.255637"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-35"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-62" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 48.503835,7.2773964 48.071477,78.855459"
+       id="path127" />
+    <g
+       id="g2108"
+       transform="translate(-0.7254407,-5.5358067)"
+       style="display:inline">
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="48.182404"
+         y="19.336451"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="48.182404"
+           y="19.336451">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-49.550514"
+         cy="-16.824097"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-35);paint-order:stroke fill markers"
+       d="m 48.371278,24.826676 c -0.0082,-2.146546 0.03446,-10.408415 0.03446,-10.408415"
+       id="path13743"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="0.032609882"
+       inkscape:transform-center-y="5.4034926" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 50.078881,42.699475 C 93.874653,51.841734 95.165897,-3.5730008 48.619769,7.2562447"
+       id="path3061"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g1198"
+       transform="translate(3.2556029,-2.8149031)"
+       style="display:none">
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="49.768463"
+         y="10.649764"
+         id="text15678"
+         transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+           id="tspan15676"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="49.768463"
+           y="10.649764">2</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle15680"
+         cx="-50.731476"
+         cy="-8.3328476"
+         r="1.2760839"
+         transform="rotate(-178.35508)" />
+    </g>
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
+       d="M 66.047717,6.789157 C 62.831195,5.9433878 59.42289,5.8384944 55.368578,7.0825755"
+       id="path15682" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/b_l2.svg b/public/assets/capital-letter/b_l2.svg
new file mode 100755
index 0000000..333b879
--- /dev/null
+++ b/public/assets/capital-letter/b_l2.svg
@@ -0,0 +1,153 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="b_l2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="b.svg.2023_09_26_13_13_50.0.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.7011402"
+     inkscape:cx="161.9502"
+     inkscape:cy="153.42651"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="49.994203,105.87826"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="11.638122,-4.3701617"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="86.919797,93.944903"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.78941,19.290555"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.90363,95.255637"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-35"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-62" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 48.503835,7.2773964 48.071477,78.855459"
+       id="path127" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-35);paint-order:stroke fill markers"
+       d="m 48.371278,24.826676 c -0.0082,-2.146546 0.03446,-10.408415 0.03446,-10.408415"
+       id="path13743"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="0.032609882"
+       inkscape:transform-center-y="5.4034926" />
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 50.078881,42.699475 C 93.874653,51.841734 95.165897,-3.5730008 48.619769,7.2562447"
+       id="path3061"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g1198"
+       transform="translate(3.2556029,-2.8149031)"
+       style="display:inline">
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="49.768463"
+         y="10.649764"
+         id="text15678"
+         transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+           id="tspan15676"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="49.768463"
+           y="10.649764">2</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle15680"
+         cx="-50.731476"
+         cy="-8.3328476"
+         r="1.2760839"
+         transform="rotate(-178.35508)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
+       d="M 66.047717,6.789157 C 62.831195,5.9433878 59.42289,5.8384944 55.368578,7.0825755"
+       id="path15682" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/b_l3.svg b/public/assets/capital-letter/b_l3.svg
new file mode 100755
index 0000000..f392f99
--- /dev/null
+++ b/public/assets/capital-letter/b_l3.svg
@@ -0,0 +1,189 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="b_l2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="b.svg.2023_09_26_13_13_50.0.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.7011402"
+     inkscape:cx="161.9502"
+     inkscape:cy="153.42651"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="49.994203,105.87826"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="11.638122,-4.3701617"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="86.919797,93.944903"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.78941,19.290555"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.90363,95.255637"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-35"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-62" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 48.503835,7.2773964 48.071477,78.855459"
+       id="path127" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-35);paint-order:stroke fill markers"
+       d="m 48.371278,24.826676 c -0.0082,-2.146546 0.03446,-10.408415 0.03446,-10.408415"
+       id="path13743"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="0.032609882"
+       inkscape:transform-center-y="5.4034926" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 50.078881,42.699475 C 93.874653,51.841734 95.165897,-3.5730008 48.619769,7.2562447"
+       id="path3061"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
+       d="M 66.047717,6.789157 C 62.831195,5.9433878 59.42289,5.8384944 55.368578,7.0825755"
+       id="path15682" />
+    <g
+       id="g439"
+       style="display:inline">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 47.995735,79.091605 C 91.791507,88.233864 96.514851,33.879382 49.968723,44.708634"
+         id="path7796"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g1149"
+         transform="translate(-27.968881,-7.5584371)"
+         style="display:inline">
+        <text
+           xml:space="preserve"
+           style="font-size:2.29383px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.115053;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="79.432571"
+           y="53.184124"
+           id="text9342-1"
+           transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan9340-2"
+             style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.115053;stroke-dasharray:none;stroke-opacity:1"
+             x="79.432571"
+             y="53.184124">3</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="path9448-7"
+           cx="-81.574226"
+           cy="-49.920895"
+           r="1.2760839"
+           transform="rotate(-178.67073)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="m 63.603296,43.623278 c -3.114339,-1.102484 -6.629721,-0.645631 -9.243068,0.45777"
+         id="path9576"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="0.89540327"
+         inkscape:transform-center-y="0.2109465" />
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/c_l1.svg b/public/assets/capital-letter/c_l1.svg
new file mode 100755
index 0000000..5b10b82
--- /dev/null
+++ b/public/assets/capital-letter/c_l1.svg
@@ -0,0 +1,128 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="b_l3.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="c_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.7011402"
+     inkscape:cx="161.9502"
+     inkscape:cy="153.42651"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="49.994203,105.87826"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="8.9984311,30.276284"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="39.261739,98.984782"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="117.15336,35.455652"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.90363,95.255637"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       d="M 46.950904,54.58028 C 40.098765,69.618826 9.9533159,69.837474 10.446716,35.540387 9.8782014,1.9943061 40.148611,1.2959928 46.950937,16.579396"
+       id="path3061"
+       sodipodi:nodetypes="ccc" />
+    <g
+       id="g2108"
+       transform="translate(-2.4303795,-1.0560959)">
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="48.182404"
+         y="19.336451"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="48.182404"
+           y="19.336451">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-49.550514"
+         cy="-16.824097"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 37.741355,8.8537233 c 2.994925,1.2362657 6.697855,3.3419177 8.115716,6.5170127"
+       id="path13743"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="4.2043934"
+       inkscape:transform-center-y="-3.3943832" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/d.svg b/public/assets/capital-letter/d.svg
new file mode 100755
index 0000000..e259d8e
--- /dev/null
+++ b/public/assets/capital-letter/d.svg
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="d.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="d.svg.2023_09_26_13_23_34.0.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.7011402"
+     inkscape:cx="161.9502"
+     inkscape:cy="153.42651"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="49.994203,105.87826"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="8.9984311,30.276284"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="39.261739,98.984782"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="116.39667,18.760333"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.90363,95.255637"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-6" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 41.82571,7.2769186 42.049594,78.855937"
+       id="path127"
+       sodipodi:insensitive="true" />
+    <g
+       id="g1669">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 42.16117,78.472117 C 104.80474,82.321666 106.39242,4.6156773 43.051128,7.3391777"
+         id="path7796"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g1198"
+         transform="translate(-5.3351616,-2.2176714)"
+         style="display:inline">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="49.768463"
+           y="10.649764"
+           id="text15678"
+           transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="49.768463"
+             y="10.649764">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-50.731476"
+           cy="-8.3328476"
+           r="1.2760839"
+           transform="rotate(-178.35508)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 57.580998,8.5573639 C 54.492455,7.6343288 51.054759,7.3582273 46.959995,7.4065268"
+         id="path15682"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-5.0800676"
+         inkscape:transform-center-y="0.67042889" />
+    </g>
+    <path
+       style="fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
+       d="M 41.908046,24.029606 41.875038,13.892141"
+       id="path6265"
+       sodipodi:nodetypes="cc" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.7912px;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="41.024876"
+       y="12.991475"
+       id="text9342"
+       transform="scale(0.99960875,1.0003914)"><tspan
+         sodipodi:role="line"
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+         x="41.024876"
+         y="12.991475">1</tspan></text>
+    <circle
+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="41.81303"
+       cy="11.98179"
+       r="1.2760839" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/d_l1.svg b/public/assets/capital-letter/d_l1.svg
new file mode 100755
index 0000000..1035207
--- /dev/null
+++ b/public/assets/capital-letter/d_l1.svg
@@ -0,0 +1,180 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="d.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="d.svg.2023_09_26_13_23_34.0.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.7011402"
+     inkscape:cx="161.9502"
+     inkscape:cy="153.42651"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="72.417594,23.045218"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="8.9984311,30.276284"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="39.261739,98.984782"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="116.39667,18.760333"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.90363,95.255637"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-6" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 41.82571,7.2769186 42.049594,78.855937"
+       id="path127"
+       sodipodi:insensitive="true" />
+    <g
+       id="g1669"
+       style="display:none">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 42.16117,78.472117 C 104.80474,82.321666 106.39242,4.6156773 43.051128,7.3391777"
+         id="path7796"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g1198"
+         transform="translate(-5.3351616,-2.2176714)"
+         style="display:inline">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="49.768463"
+           y="10.649764"
+           id="text15678"
+           transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="49.768463"
+             y="10.649764">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-50.731476"
+           cy="-8.3328476"
+           r="1.2760839"
+           transform="rotate(-178.35508)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 57.580998,8.5573639 C 54.492455,7.6343288 51.054759,7.3582273 46.959995,7.4065268"
+         id="path15682"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-5.0800676"
+         inkscape:transform-center-y="0.67042889" />
+    </g>
+    <path
+       style="fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
+       d="M 41.908046,24.029606 41.875038,13.892141"
+       id="path6265"
+       sodipodi:nodetypes="cc" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.7912px;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="41.024876"
+       y="12.991475"
+       id="text9342"
+       transform="scale(0.99960875,1.0003914)"><tspan
+         sodipodi:role="line"
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+         x="41.024876"
+         y="12.991475">1</tspan></text>
+    <circle
+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="41.81303"
+       cy="11.98179"
+       r="1.2760839" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/d_l2.svg b/public/assets/capital-letter/d_l2.svg
new file mode 100755
index 0000000..46bbf85
--- /dev/null
+++ b/public/assets/capital-letter/d_l2.svg
@@ -0,0 +1,167 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="d_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="d.svg.2023_09_26_13_23_34.0.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.7011402"
+     inkscape:cx="161.9502"
+     inkscape:cy="153.42651"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="72.417594,23.045218"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="8.9984311,30.276284"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="39.261739,98.984782"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="116.39667,18.760333"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.90363,95.255637"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-6" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 41.82571,7.2769186 42.049594,78.855937"
+       id="path127" />
+    <g
+       id="g1669"
+       style="display:inline">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 42.16117,78.472117 C 104.80474,82.321666 106.39242,4.6156773 43.051128,7.3391777"
+         id="path7796"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g1198"
+         transform="translate(-5.3351616,-2.2176714)"
+         style="display:inline">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="49.768463"
+           y="10.649764"
+           id="text15678"
+           transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="49.768463"
+             y="10.649764">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-50.731476"
+           cy="-8.3328476"
+           r="1.2760839"
+           transform="rotate(-178.35508)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 57.580998,8.5573639 C 54.492455,7.6343288 51.054759,7.3582273 46.959995,7.4065268"
+         id="path15682"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-5.0800676"
+         inkscape:transform-center-y="0.67042889" />
+    </g>
+    <path
+       style="display:none;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
+       d="M 41.908046,24.029606 41.875038,13.892141"
+       id="path6265"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="41.81303"
+       cy="11.98179"
+       r="1.2760839" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/e.svg b/public/assets/capital-letter/e.svg
new file mode 100755
index 0000000..0f7b12e
--- /dev/null
+++ b/public/assets/capital-letter/e.svg
@@ -0,0 +1,146 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     id="layer1">
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 41.82571,7.2769186 42.049594,78.855937"
+       id="path127" />
+    <path
+       style="fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 41.90049,23.739752 41.867482,13.602287"
+       id="path6265" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.7912px;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="41.017315"
+       y="12.701729"
+       id="text9342"
+       transform="scale(0.99960875,1.0003914)"><tspan
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+         x="41.017315"
+         y="12.701729">1</tspan></text>
+    <circle
+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="41.805473"
+       cy="11.69193"
+       r="1.2760839" />
+    <g
+       id="g3666"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 41.785464,7.3045297 33.868367,0.105865"
+         id="path548" />
+      <path
+         style="fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.595276,7.2787009 44.458995,7.1203219"
+         id="path9566" />
+      <circle
+         style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9572"
+         cx="-6.3417368"
+         cy="42.675137"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.51339px;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.85751"
+         y="8.0238476"
+         id="text9650"><tspan
+           id="tspan9648"
+           style="stroke-width:0.14;stroke-dasharray:none"
+           x="41.85751"
+           y="8.0238476">2</tspan></text>
+    </g>
+    <g
+       id="g3673"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 41.95325,42.858299 29.472672,0.120987"
+         id="path1108" />
+      <path
+         style="fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,42.562743 44.449435,42.404364"
+         id="path9576" />
+      <circle
+         style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9582"
+         cx="-41.619633"
+         cy="43.331741"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.28038px;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.937611"
+         y="43.216064"
+         id="text9714"><tspan
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="41.937611"
+           y="43.216064">3</tspan></text>
+    </g>
+    <g
+       id="g3680"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586" />
+      <circle
+         style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/e_l1.svg b/public/assets/capital-letter/e_l1.svg
new file mode 100755
index 0000000..7ba35e4
--- /dev/null
+++ b/public/assets/capital-letter/e_l1.svg
@@ -0,0 +1,173 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="c_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="d_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="49.994203,105.87826"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="8.9984311,30.276284"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="39.261739,98.984782"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="116.39667,18.760333"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.90363,95.255637"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="78.794444,101.02008"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 41.82571,7.2769186 42.049594,78.855937"
+       id="path127" />
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 41.785464,7.3045297 33.868367,0.105865"
+       id="path548" />
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 42.014207,78.885553 33.868367,0.105865"
+       id="path1106" />
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 41.95325,42.858299 29.472672,0.120987"
+       id="path1108" />
+    <path
+       style="fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 41.90049,23.739752 41.867482,13.602287"
+       id="path6265"
+       sodipodi:nodetypes="cc" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.7912px;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="41.017315"
+       y="12.701729"
+       id="text9342"
+       transform="scale(0.99960875,1.0003914)"><tspan
+         sodipodi:role="line"
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+         x="41.017315"
+         y="12.701729">1</tspan></text>
+    <circle
+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="41.805473"
+       cy="11.69193"
+       r="1.2760839" />
+    <path
+       style="display:none;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 54.595276,7.2787009 44.458995,7.1203219"
+       id="path9566"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle9572"
+       cx="-6.3417368"
+       cy="42.675137"
+       r="1.2760839"
+       transform="rotate(-88.91827)" />
+    <path
+       style="display:none;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+       d="M 54.843892,42.822434 44.707611,42.664055"
+       id="path9576"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+       id="circle9582"
+       cx="-41.874405"
+       cy="43.594776"
+       r="1.2760839"
+       transform="rotate(-88.91827)" />
+    <path
+       style="display:none;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 54.585716,79.075266 44.449435,78.916887"
+       id="path9586"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle9592"
+       cx="-78.125687"
+       cy="44.021099"
+       r="1.2760839"
+       transform="rotate(-88.91827)" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/e_l2.svg b/public/assets/capital-letter/e_l2.svg
new file mode 100755
index 0000000..ba7c9f3
--- /dev/null
+++ b/public/assets/capital-letter/e_l2.svg
@@ -0,0 +1,173 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="e_l4.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="d_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="49.994203,105.87826"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="8.9984311,30.276284"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="39.261739,98.984782"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="116.39667,18.760333"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.90363,95.255637"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="78.794444,101.02008"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 41.82571,7.2769186 42.049594,78.855937"
+       id="path127" />
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 41.785464,7.3045297 33.868367,0.105865"
+       id="path548" />
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 42.014207,78.885553 33.868367,0.105865"
+       id="path1106" />
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 41.95325,42.858299 29.472672,0.120987"
+       id="path1108" />
+    <path
+       style="display:none;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 41.90049,23.739752 41.867482,13.602287"
+       id="path6265"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="41.805473"
+       cy="11.69193"
+       r="1.2760839" />
+    <path
+       style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 54.595276,7.2787009 44.458995,7.1203219"
+       id="path9566"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle9572"
+       cx="-6.3417368"
+       cy="42.675137"
+       r="1.2760839"
+       transform="rotate(-88.91827)" />
+    <path
+       style="display:none;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+       d="M 54.843892,42.822434 44.707611,42.664055"
+       id="path9576"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+       id="circle9582"
+       cx="-41.874405"
+       cy="43.594776"
+       r="1.2760839"
+       transform="rotate(-88.91827)" />
+    <path
+       style="display:none;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 54.585716,79.075266 44.449435,78.916887"
+       id="path9586"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle9592"
+       cx="-78.125687"
+       cy="44.021099"
+       r="1.2760839"
+       transform="rotate(-88.91827)" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.51339px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="41.85751"
+       y="8.0238476"
+       id="text9650"><tspan
+         sodipodi:role="line"
+         id="tspan9648"
+         style="stroke-width:0.14;stroke-dasharray:none"
+         x="41.85751"
+         y="8.0238476">2</tspan></text>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/e_l3.svg b/public/assets/capital-letter/e_l3.svg
new file mode 100755
index 0000000..c13683c
--- /dev/null
+++ b/public/assets/capital-letter/e_l3.svg
@@ -0,0 +1,172 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="e_l2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="d_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="49.994203,105.87826"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="8.9984311,30.276284"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="39.261739,98.984782"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="116.39667,18.760333"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.90363,95.255637"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="78.794444,101.02008"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 41.82571,7.2769186 42.049594,78.855937"
+       id="path127" />
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 41.785464,7.3045297 33.868367,0.105865"
+       id="path548" />
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 42.014207,78.885553 33.868367,0.105865"
+       id="path1106" />
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 41.95325,42.858299 29.472672,0.120987"
+       id="path1108" />
+    <path
+       style="display:none;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 41.90049,23.739752 41.867482,13.602287"
+       id="path6265"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="41.805473"
+       cy="11.69193"
+       r="1.2760839" />
+    <path
+       style="display:none;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 54.595276,7.2787009 44.458995,7.1203219"
+       id="path9566"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle9572"
+       cx="-6.3417368"
+       cy="42.675137"
+       r="1.2760839"
+       transform="rotate(-88.91827)" />
+    <path
+       style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+       d="M 54.843892,42.822434 44.707611,42.664055"
+       id="path9576"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+       id="circle9582"
+       cx="-41.874405"
+       cy="43.594776"
+       r="1.2760839"
+       transform="rotate(-88.91827)" />
+    <path
+       style="display:none;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 54.585716,79.075266 44.449435,78.916887"
+       id="path9586"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle9592"
+       cx="-78.125687"
+       cy="44.021099"
+       r="1.2760839"
+       transform="rotate(-88.91827)" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.28038px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+       x="42.195786"
+       y="43.475758"
+       id="text9714"><tspan
+         sodipodi:role="line"
+         id="tspan9712"
+         style="stroke:#f9f6f6;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+         x="42.195786"
+         y="43.475758">3</tspan></text>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/e_l4.svg b/public/assets/capital-letter/e_l4.svg
new file mode 100755
index 0000000..fcfa60c
--- /dev/null
+++ b/public/assets/capital-letter/e_l4.svg
@@ -0,0 +1,173 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="e_l3.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="d_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="49.994203,105.87826"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="8.9984311,30.276284"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="39.261739,98.984782"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="116.39667,18.760333"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.90363,95.255637"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="78.794444,101.02008"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 41.82571,7.2769186 42.049594,78.855937"
+       id="path127" />
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 41.785464,7.3045297 33.868367,0.105865"
+       id="path548" />
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 42.014207,78.885553 33.868367,0.105865"
+       id="path1106" />
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 41.95325,42.858299 29.472672,0.120987"
+       id="path1108" />
+    <path
+       style="display:none;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 41.90049,23.739752 41.867482,13.602287"
+       id="path6265"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="41.805473"
+       cy="11.69193"
+       r="1.2760839" />
+    <path
+       style="display:none;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 54.595276,7.2787009 44.458995,7.1203219"
+       id="path9566"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle9572"
+       cx="-6.3417368"
+       cy="42.675137"
+       r="1.2760839"
+       transform="rotate(-88.91827)" />
+    <path
+       style="display:none;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+       d="M 54.843892,42.822434 44.707611,42.664055"
+       id="path9576"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+       id="circle9582"
+       cx="-41.874405"
+       cy="43.594776"
+       r="1.2760839"
+       transform="rotate(-88.91827)" />
+    <path
+       style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 54.585716,79.075266 44.449435,78.916887"
+       id="path9586"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle9592"
+       cx="-78.125687"
+       cy="44.021099"
+       r="1.2760839"
+       transform="rotate(-88.91827)" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="41.672253"
+       y="79.868111"
+       id="text9761"><tspan
+         sodipodi:role="line"
+         id="tspan9759"
+         style="stroke-width:0.117792"
+         x="41.672253"
+         y="79.868111">4</tspan></text>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/f.svg b/public/assets/capital-letter/f.svg
new file mode 100755
index 0000000..932509a
--- /dev/null
+++ b/public/assets/capital-letter/f.svg
@@ -0,0 +1,218 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="e.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="d_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="49.994203,105.87826"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="8.9984311,30.276284"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="39.261739,98.984782"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="116.39667,18.760333"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.90363,95.255637"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="78.794444,101.02008"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 41.82571,7.2769186 42.049594,78.855937"
+       id="path127" />
+    <path
+       style="fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 41.90049,23.739752 41.867482,13.602287"
+       id="path6265"
+       sodipodi:nodetypes="cc" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.7912px;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="41.017315"
+       y="12.701729"
+       id="text9342"
+       transform="scale(0.99960875,1.0003914)"><tspan
+         sodipodi:role="line"
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+         x="41.017315"
+         y="12.701729">1</tspan></text>
+    <circle
+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="41.805473"
+       cy="11.69193"
+       r="1.2760839" />
+    <g
+       id="g3666"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 41.785464,7.3045297 33.868367,0.105865"
+         id="path548" />
+      <path
+         style="fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.595276,7.2787009 44.458995,7.1203219"
+         id="path9566"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9572"
+         cx="-6.3417368"
+         cy="42.675137"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.51339px;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.85751"
+         y="8.0238476"
+         id="text9650"><tspan
+           sodipodi:role="line"
+           id="tspan9648"
+           style="stroke-width:0.14;stroke-dasharray:none"
+           x="41.85751"
+           y="8.0238476">2</tspan></text>
+    </g>
+    <g
+       id="g3673"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 41.95325,42.858299 29.472672,0.120987"
+         id="path1108" />
+      <path
+         style="fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,42.562743 44.449435,42.404364"
+         id="path9576"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9582"
+         cx="-41.619633"
+         cy="43.331741"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.28038px;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.937611"
+         y="43.216064"
+         id="text9714"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="41.937611"
+           y="43.216064">3</tspan></text>
+    </g>
+    <g
+       id="g3680"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/f_l1.svg b/public/assets/capital-letter/f_l1.svg
new file mode 100755
index 0000000..ff29b08
--- /dev/null
+++ b/public/assets/capital-letter/f_l1.svg
@@ -0,0 +1,223 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="e_l2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="d_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="49.994203,105.87826"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="8.9984311,30.276284"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="39.261739,98.984782"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="116.39667,18.760333"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.90363,95.255637"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="78.794444,101.02008"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g11225"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 41.82571,7.2769186 42.049594,78.855937"
+         id="path127" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 41.90049,23.739752 41.867482,13.602287"
+         id="path6265"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.017315"
+         y="12.701729"
+         id="text9342"
+         transform="scale(0.99960875,1.0003914)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="41.017315"
+           y="12.701729">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="41.805473"
+         cy="11.69193"
+         r="1.2760839" />
+    </g>
+    <g
+       id="g11218"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g11232"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 41.785464,7.3045297 33.868367,0.105865"
+         id="path548" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.595276,7.2787009 44.458995,7.1203219"
+         id="path9566"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9572"
+         cx="-6.3417368"
+         cy="42.675137"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.51339px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.85751"
+         y="8.0238476"
+         id="text9650"><tspan
+           sodipodi:role="line"
+           id="tspan9648"
+           style="stroke-width:0.14;stroke-dasharray:none"
+           x="41.85751"
+           y="8.0238476">2</tspan></text>
+    </g>
+    <g
+       id="g11267"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 41.95325,42.858299 29.472672,0.120987"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 54.843892,42.822434 44.707611,42.664055"
+         id="path9576"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-41.874405"
+         cy="43.594776"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.28038px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="42.195786"
+         y="43.475758"
+         id="text9714"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="42.195786"
+           y="43.475758">3</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/f_l2.svg b/public/assets/capital-letter/f_l2.svg
new file mode 100755
index 0000000..5f54242
--- /dev/null
+++ b/public/assets/capital-letter/f_l2.svg
@@ -0,0 +1,223 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="f_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="d_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="49.994203,105.87826"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="8.9984311,30.276284"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="39.261739,98.984782"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="116.39667,18.760333"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.90363,95.255637"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="78.794444,101.02008"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g11225"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 41.82571,7.2769186 42.049594,78.855937"
+         id="path127" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 41.90049,23.739752 41.867482,13.602287"
+         id="path6265"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.017315"
+         y="12.701729"
+         id="text9342"
+         transform="scale(0.99960875,1.0003914)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="41.017315"
+           y="12.701729">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="41.805473"
+         cy="11.69193"
+         r="1.2760839" />
+    </g>
+    <g
+       id="g11218"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g11232"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 41.785464,7.3045297 33.868367,0.105865"
+         id="path548" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.595276,7.2787009 44.458995,7.1203219"
+         id="path9566"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9572"
+         cx="-6.3417368"
+         cy="42.675137"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.51339px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.85751"
+         y="8.0238476"
+         id="text9650"><tspan
+           sodipodi:role="line"
+           id="tspan9648"
+           style="stroke-width:0.14;stroke-dasharray:none"
+           x="41.85751"
+           y="8.0238476">2</tspan></text>
+    </g>
+    <g
+       id="g11267"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 41.95325,42.858299 29.472672,0.120987"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 54.843892,42.822434 44.707611,42.664055"
+         id="path9576"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-41.874405"
+         cy="43.594776"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.28038px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="42.195786"
+         y="43.475758"
+         id="text9714"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="42.195786"
+           y="43.475758">3</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/f_l3.svg b/public/assets/capital-letter/f_l3.svg
new file mode 100755
index 0000000..b385162
--- /dev/null
+++ b/public/assets/capital-letter/f_l3.svg
@@ -0,0 +1,223 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="f_l2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="d_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="49.994203,105.87826"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="8.9984311,30.276284"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="39.261739,98.984782"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="116.39667,18.760333"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.90363,95.255637"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="78.794444,101.02008"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g11225"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 41.82571,7.2769186 42.049594,78.855937"
+         id="path127" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 41.90049,23.739752 41.867482,13.602287"
+         id="path6265"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.017315"
+         y="12.701729"
+         id="text9342"
+         transform="scale(0.99960875,1.0003914)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="41.017315"
+           y="12.701729">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="41.805473"
+         cy="11.69193"
+         r="1.2760839" />
+    </g>
+    <g
+       id="g11218"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g11232"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 41.785464,7.3045297 33.868367,0.105865"
+         id="path548" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.595276,7.2787009 44.458995,7.1203219"
+         id="path9566"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9572"
+         cx="-6.3417368"
+         cy="42.675137"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.51339px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.85751"
+         y="8.0238476"
+         id="text9650"><tspan
+           sodipodi:role="line"
+           id="tspan9648"
+           style="stroke-width:0.14;stroke-dasharray:none"
+           x="41.85751"
+           y="8.0238476">2</tspan></text>
+    </g>
+    <g
+       id="g11267"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 41.95325,42.858299 29.472672,0.120987"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 54.843892,42.822434 44.707611,42.664055"
+         id="path9576"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-41.874405"
+         cy="43.594776"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.28038px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="42.195786"
+         y="43.475758"
+         id="text9714"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="42.195786"
+           y="43.475758">3</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/g.svg b/public/assets/capital-letter/g.svg
new file mode 100755
index 0000000..c320185
--- /dev/null
+++ b/public/assets/capital-letter/g.svg
@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+  </defs>
+  <g
+     id="layer1">
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       d="M 46.950937,16.579396 C 40.148611,1.2959928 7.8076692,2.9074546 8.3761838,36.453535 8.2620678,47.145698 10.670035,55.543308 19.764863,61.164866 29.836796,67.30137 44.886491,63.481212 47.728563,48.02444"
+       id="path3061" />
+    <g
+       id="g2108"
+       transform="translate(-2.4303795,-1.0560959)">
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="48.182404"
+         y="19.336451"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="48.182404"
+           y="19.336451">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-49.550514"
+         cy="-16.824097"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 37.741355,8.8537233 c 2.994925,1.2362657 6.697855,3.3419177 8.115716,6.5170127"
+       id="path13743" />
+    <g
+       id="g1407"
+       transform="translate(0,-6.879167)">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 37.067317,51.370226 21.451293,0.09963"
+         id="path548" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.37143;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
+         d="M 45.1807,51.345919 38.760658,51.196872"
+         id="path9566" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.101462;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9572"
+         cx="-50.410469"
+         cy="38.069817"
+         transform="matrix(0.01771423,-0.99984309,0.99979758,0.02011951,0,0)"
+         rx="0.95471454"
+         ry="0.89585125" />
+      <text
+         xml:space="preserve"
+         style="font-size:1.82152px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.101462;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="37.871422"
+         y="50.200893"
+         id="text9650"
+         transform="scale(0.96865988,1.0323541)"><tspan
+           id="tspan9648"
+           style="stroke-width:0.101462;stroke-dasharray:none"
+           x="37.871422"
+           y="50.200893">2</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/g_l1.svg b/public/assets/capital-letter/g_l1.svg
new file mode 100755
index 0000000..9c02024
--- /dev/null
+++ b/public/assets/capital-letter/g_l1.svg
@@ -0,0 +1,182 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="g.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="c_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.7011402"
+     inkscape:cx="161.9502"
+     inkscape:cy="153.42651"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.466793,49.179612"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="8.9984311,30.276284"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="39.261739,98.984782"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="117.15336,35.455652"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.90363,95.255637"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       d="M 46.950937,16.579396 C 40.148611,1.2959928 7.8076692,2.9074546 8.3761838,36.453535 8.2620678,47.145698 10.670035,55.543308 19.764863,61.164866 29.836796,67.30137 44.886491,63.481212 47.728563,48.02444"
+       id="path3061"
+       sodipodi:nodetypes="cccc" />
+    <g
+       id="g2108"
+       transform="translate(-2.4303795,-1.0560959)"
+       style="display:inline">
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="48.182404"
+         y="19.336451"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="48.182404"
+           y="19.336451">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-49.550514"
+         cy="-16.824097"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 37.741355,8.8537233 c 2.994925,1.2362657 6.697855,3.3419177 8.115716,6.5170127"
+       id="path13743"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="4.2043934"
+       inkscape:transform-center-y="-3.3943832" />
+    <g
+       id="g1407"
+       transform="translate(0,-6.879167)"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 37.067317,51.370226 21.451293,0.09963"
+         id="path548" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.37143;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
+         d="M 45.1807,51.345919 38.760658,51.196872"
+         id="path9566"
+         sodipodi:nodetypes="cc" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.101462;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9572"
+         cx="-50.410469"
+         cy="38.069817"
+         transform="matrix(0.01771423,-0.99984309,0.99979758,0.02011951,0,0)"
+         rx="0.95471454"
+         ry="0.89585125" />
+      <text
+         xml:space="preserve"
+         style="font-size:1.82152px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.101462;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="37.871422"
+         y="50.200893"
+         id="text9650"
+         transform="scale(0.96865988,1.0323541)"><tspan
+           sodipodi:role="line"
+           id="tspan9648"
+           style="stroke-width:0.101462;stroke-dasharray:none"
+           x="37.871422"
+           y="50.200893">2</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/g_l2.svg b/public/assets/capital-letter/g_l2.svg
new file mode 100755
index 0000000..e973d50
--- /dev/null
+++ b/public/assets/capital-letter/g_l2.svg
@@ -0,0 +1,182 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="g_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="c_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.7011402"
+     inkscape:cx="161.9502"
+     inkscape:cy="153.42651"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.466793,49.179612"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="8.9984311,30.276284"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="39.261739,98.984782"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="117.15336,35.455652"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="115.90363,95.255637"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="display:none;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       d="M 46.950937,16.579396 C 40.148611,1.2959928 7.8076692,2.9074546 8.3761838,36.453535 8.2620678,47.145698 10.670035,55.543308 19.764863,61.164866 29.836796,67.30137 44.886491,63.481212 47.728563,48.02444"
+       id="path3061"
+       sodipodi:nodetypes="cccc" />
+    <g
+       id="g2108"
+       transform="translate(-2.4303795,-1.0560959)"
+       style="display:none">
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="48.182404"
+         y="19.336451"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="48.182404"
+           y="19.336451">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-49.550514"
+         cy="-16.824097"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+    </g>
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 37.741355,8.8537233 c 2.994925,1.2362657 6.697855,3.3419177 8.115716,6.5170127"
+       id="path13743"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="4.2043934"
+       inkscape:transform-center-y="-3.3943832" />
+    <g
+       id="g1407"
+       transform="translate(0,-6.879167)"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 37.067317,51.370226 21.451293,0.09963"
+         id="path548" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.37143;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
+         d="M 45.1807,51.345919 38.760658,51.196872"
+         id="path9566"
+         sodipodi:nodetypes="cc" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.101462;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9572"
+         cx="-50.410469"
+         cy="38.069817"
+         transform="matrix(0.01771423,-0.99984309,0.99979758,0.02011951,0,0)"
+         rx="0.95471454"
+         ry="0.89585125" />
+      <text
+         xml:space="preserve"
+         style="font-size:1.82152px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.101462;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="37.871422"
+         y="50.200893"
+         id="text9650"
+         transform="scale(0.96865988,1.0323541)"><tspan
+           sodipodi:role="line"
+           id="tspan9648"
+           style="stroke-width:0.101462;stroke-dasharray:none"
+           x="37.871422"
+           y="50.200893">2</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/h.svg b/public/assets/capital-letter/h.svg
new file mode 100755
index 0000000..75bda53
--- /dev/null
+++ b/public/assets/capital-letter/h.svg
@@ -0,0 +1,194 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="h.svg"
+   inkscape:export-filename="h"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview754"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false" />
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+  </defs>
+  <g
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g14176"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g18697"
+       style="display:inline">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 34.100666,7.7142687 c -0.04579,0.3074089 -0.03422,65.9377763 -0.03422,65.9377763"
+         id="path127" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="33.212013"
+         y="10.601716"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="33.212013"
+           y="10.601716">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-34.323376"
+         cy="-8.5520439"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 34.119937,21.49086 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743" />
+    </g>
+    <g
+       id="g18711"
+       style="display:inline"
+       transform="translate(1.4764245,-0.08508965)">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 62.584185,7.8092747 c -0.04579,0.3074089 -0.03422,65.9377763 -0.03422,65.9377763"
+         id="path15674" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="61.848087"
+         y="10.675919"
+         id="text15678"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan15676"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="61.848087"
+           y="10.675919">2</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle15680"
+         cx="-62.801434"
+         cy="-7.9862614"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
+         d="m 62.603456,21.585866 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path15682" />
+      <g
+         id="g14279"
+         style="display:inline"
+         transform="matrix(1.2524894,0,0,1.0646672,-15.680188,-38.054966)">
+        <g
+           id="g18704"
+           style="display:inline">
+          <path
+             style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.47293;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+             d="m 39.142669,73.987028 21.401647,0.110198"
+             id="path1108" />
+          <path
+             style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391436;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+             d="M 48.688134,73.955975 41.183058,73.814371"
+             id="path9576" />
+          <ellipse
+             style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.11391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+             id="circle9582"
+             cx="-72.913704"
+             cy="40.918648"
+             transform="matrix(0.01563487,-0.99987777,0.99974017,0.02279479,0,0)"
+             rx="1.140859"
+             ry="0.94491148" />
+          <text
+             xml:space="preserve"
+             style="font-size:1.85538px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.113908;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+             x="43.211548"
+             y="67.832787"
+             id="text9714"
+             transform="scale(0.91001737,1.0988801)"><tspan
+               id="tspan9712"
+               style="stroke:#f9f6f6;stroke-width:0.113908;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+               x="43.211548"
+               y="67.832787">3</tspan></text>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/h_l1.svg b/public/assets/capital-letter/h_l1.svg
new file mode 100755
index 0000000..ab7011a
--- /dev/null
+++ b/public/assets/capital-letter/h_l1.svg
@@ -0,0 +1,194 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="h.svg"
+   inkscape:export-filename="h.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview754"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false" />
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+  </defs>
+  <g
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g14176"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g18697"
+       style="display:inline">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 34.100666,7.7142687 c -0.04579,0.3074089 -0.03422,65.9377763 -0.03422,65.9377763"
+         id="path127" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="33.212013"
+         y="10.601716"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="33.212013"
+           y="10.601716">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-34.323376"
+         cy="-8.5520439"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 34.119937,21.49086 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743" />
+    </g>
+    <g
+       id="g18711"
+       style="display:none"
+       transform="translate(1.4764245,-0.08508965)">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 62.584185,7.8092747 c -0.04579,0.3074089 -0.03422,65.9377763 -0.03422,65.9377763"
+         id="path15674" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="61.848087"
+         y="10.675919"
+         id="text15678"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan15676"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="61.848087"
+           y="10.675919">2</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle15680"
+         cx="-62.801434"
+         cy="-7.9862614"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
+         d="m 62.603456,21.585866 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path15682" />
+      <g
+         id="g14279"
+         style="display:inline"
+         transform="matrix(1.2524894,0,0,1.0646672,-15.680188,-38.054966)">
+        <g
+           id="g18704"
+           style="display:inline">
+          <path
+             style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.47293;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+             d="m 39.142669,73.987028 21.401647,0.110198"
+             id="path1108" />
+          <path
+             style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391436;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+             d="M 48.688134,73.955975 41.183058,73.814371"
+             id="path9576" />
+          <ellipse
+             style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.11391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+             id="circle9582"
+             cx="-72.913704"
+             cy="40.918648"
+             transform="matrix(0.01563487,-0.99987777,0.99974017,0.02279479,0,0)"
+             rx="1.140859"
+             ry="0.94491148" />
+          <text
+             xml:space="preserve"
+             style="font-size:1.85538px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.113908;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+             x="43.211548"
+             y="67.832787"
+             id="text9714"
+             transform="scale(0.91001737,1.0988801)"><tspan
+               id="tspan9712"
+               style="stroke:#f9f6f6;stroke-width:0.113908;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+               x="43.211548"
+               y="67.832787">3</tspan></text>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/h_l2.svg b/public/assets/capital-letter/h_l2.svg
new file mode 100755
index 0000000..b3466b3
--- /dev/null
+++ b/public/assets/capital-letter/h_l2.svg
@@ -0,0 +1,192 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="h.svg"
+   inkscape:export-filename="h_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview754"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false" />
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+  </defs>
+  <g
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g14176"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g18697"
+       style="display:none">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 34.100666,7.7142687 c -0.04579,0.3074089 -0.03422,65.9377763 -0.03422,65.9377763"
+         id="path127" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="33.212013"
+         y="10.601716"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="33.212013"
+           y="10.601716">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-34.323376"
+         cy="-8.5520439"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 34.119937,21.49086 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743" />
+    </g>
+    <g
+       id="g1329">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 64.060609,7.724185 c -0.04579,0.307409 -0.03422,65.937776 -0.03422,65.937776"
+         id="path15674" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="63.325699"
+         y="10.60219"
+         id="text15678"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan15676"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="63.325699"
+           y="10.60219">2</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle15680"
+         cx="-64.27549"
+         cy="-7.8669443"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
+         d="m 64.079881,21.500776 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path15682" />
+    </g>
+    <g
+       id="g14279"
+       style="display:none"
+       transform="matrix(1.2524894,0,0,1.0646672,-14.203763,-38.140056)">
+      <g
+         id="g18704"
+         style="display:inline">
+        <path
+           style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.47293;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="m 39.142669,73.987028 21.401647,0.110198"
+           id="path1108" />
+        <path
+           style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391436;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+           d="M 48.688134,73.955975 41.183058,73.814371"
+           id="path9576" />
+        <ellipse
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.11391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="circle9582"
+           cx="-72.913704"
+           cy="40.918648"
+           transform="matrix(0.01563487,-0.99987777,0.99974017,0.02279479,0,0)"
+           rx="1.140859"
+           ry="0.94491148" />
+        <text
+           xml:space="preserve"
+           style="font-size:1.85538px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.113908;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="43.211548"
+           y="67.832787"
+           id="text9714"
+           transform="scale(0.91001737,1.0988801)"><tspan
+             id="tspan9712"
+             style="stroke:#f9f6f6;stroke-width:0.113908;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="43.211548"
+             y="67.832787">3</tspan></text>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/h_l3.svg b/public/assets/capital-letter/h_l3.svg
new file mode 100755
index 0000000..11660ba
--- /dev/null
+++ b/public/assets/capital-letter/h_l3.svg
@@ -0,0 +1,194 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="h.svg"
+   inkscape:export-filename="h_l2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview754"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false" />
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+  </defs>
+  <g
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g14176"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g18697"
+       style="display:none">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 34.100666,7.7142687 c -0.04579,0.3074089 -0.03422,65.9377763 -0.03422,65.9377763"
+         id="path127" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="33.212013"
+         y="10.601716"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="33.212013"
+           y="10.601716">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-34.323376"
+         cy="-8.5520439"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 34.119937,21.49086 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743" />
+    </g>
+    <g
+       id="g1329"
+       transform="translate(-0.12787724,-0.12787724)"
+       style="display:none">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 64.060609,7.724185 c -0.04579,0.307409 -0.03422,65.937776 -0.03422,65.937776"
+         id="path15674" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="63.325699"
+         y="10.60219"
+         id="text15678"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan15676"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="63.325699"
+           y="10.60219">2</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle15680"
+         cx="-64.27549"
+         cy="-7.8669443"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
+         d="m 64.079881,21.500776 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path15682" />
+    </g>
+    <g
+       id="g14279"
+       style="display:inline"
+       transform="matrix(1.2524894,0,0,1.0646672,-14.203763,-38.140056)">
+      <g
+         id="g18704"
+         style="display:inline">
+        <path
+           style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.47293;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="m 39.142669,73.987028 21.401647,0.110198"
+           id="path1108" />
+        <path
+           style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391436;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+           d="M 48.688134,73.955975 41.183058,73.814371"
+           id="path9576" />
+        <ellipse
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.11391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="circle9582"
+           cx="-72.913704"
+           cy="40.918648"
+           transform="matrix(0.01563487,-0.99987777,0.99974017,0.02279479,0,0)"
+           rx="1.140859"
+           ry="0.94491148" />
+        <text
+           xml:space="preserve"
+           style="font-size:1.85538px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.113908;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="43.211548"
+           y="67.832787"
+           id="text9714"
+           transform="scale(0.91001737,1.0988801)"><tspan
+             id="tspan9712"
+             style="stroke:#f9f6f6;stroke-width:0.113908;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="43.211548"
+             y="67.832787">3</tspan></text>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/i.svg b/public/assets/capital-letter/i.svg
new file mode 100755
index 0000000..d568492
--- /dev/null
+++ b/public/assets/capital-letter/i.svg
@@ -0,0 +1,236 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="i.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="i_l3.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="31.19192,73.869705"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="36.906258,27.301511"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="36.037285,19.413344"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="54.122374,93.823341"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.786217,21.819752"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g14176"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g3051">
+      <g
+         id="g15171"
+         style="display:inline">
+        <path
+           style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="m 50.078477,7.5286417 c -0.04579,0.3074089 -0.03422,65.9377763 -0.03422,65.9377763"
+           id="path127"
+           sodipodi:nodetypes="cc" />
+        <text
+           xml:space="preserve"
+           style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="49.168594"
+           y="14.241333"
+           id="text9342"
+           transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan9340"
+             style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+             x="49.168594"
+             y="14.241333">1</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="path9448"
+           cx="-50.37851"
+           cy="-11.698981"
+           r="1.2760839"
+           transform="rotate(-178.67073)" />
+        <path
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+           d="m 50.097748,25.009402 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+           id="path13743"
+           sodipodi:nodetypes="cc" />
+      </g>
+      <g
+         id="g3047"
+         style="display:inline">
+        <g
+           id="g3069">
+          <path
+             style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.47293;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+             d="m 39.142669,73.987028 21.401647,0.110198"
+             id="path1108" />
+          <ellipse
+             style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.11391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+             id="circle9582"
+             cx="-72.913704"
+             cy="40.918648"
+             transform="matrix(0.01563487,-0.99987777,0.99974017,0.02279479,0,0)"
+             rx="1.140859"
+             ry="0.94491148" />
+          <path
+             style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391436;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+             d="M 48.688134,73.955975 41.183058,73.814371"
+             id="path9576"
+             sodipodi:nodetypes="cc" />
+        </g>
+        <text
+           xml:space="preserve"
+           style="font-size:1.85538px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.113908;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="43.211548"
+           y="67.832787"
+           id="text9714"
+           transform="scale(0.91001738,1.0988801)"><tspan
+             sodipodi:role="line"
+             id="tspan9712"
+             style="stroke:#f9f6f6;stroke-width:0.113908;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="43.211548"
+             y="67.832787">3</tspan></text>
+      </g>
+    </g>
+    <g
+       id="g14264"
+       transform="translate(0,-71.966706)"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:4.47466;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 39.141599,78.999807 21.42108,0.189536"
+         id="path548" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.104558;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle13613"
+         cx="78.200455"
+         cy="-40.956722"
+         transform="matrix(-0.02107702,0.99977785,-0.99966338,-0.02594463,0,0)"
+         rx="1.2327613"
+         ry="1.1111807" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.41325px;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.114;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="37.679607"
+         y="80.526085"
+         id="text13723"
+         transform="rotate(-0.68318798)"><tspan
+           sodipodi:role="line"
+           id="tspan13721"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.114;stroke-dasharray:none"
+           x="37.679607"
+           y="80.526085">2</tspan></text>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 51.113705,79.180036 c -2.146501,0.01635 -10.408471,0.0051 -10.408471,0.0051"
+         id="path13749"
+         sodipodi:nodetypes="cc" />
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/i_l1.svg b/public/assets/capital-letter/i_l1.svg
new file mode 100755
index 0000000..18da748
--- /dev/null
+++ b/public/assets/capital-letter/i_l1.svg
@@ -0,0 +1,231 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="i_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="d_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="31.19192,73.869705"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="36.906258,27.301511"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="36.037285,19.413344"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="54.122374,93.823341"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.786217,21.819752"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 38.985247,19.717732 c -0.01675,-2.146498 -0.007,-10.4084704 -0.007,-10.4084704"
+       id="path6265"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g14176"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g14279"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.47293;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 39.142669,73.987028 21.401647,0.110198"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391436;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 48.688134,73.955975 41.183058,73.814371"
+         id="path9576"
+         sodipodi:nodetypes="cc" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.11391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-72.913704"
+         cy="40.918648"
+         transform="matrix(0.01563487,-0.99987777,0.99974017,0.02279479,0,0)"
+         rx="1.140859"
+         ry="0.94491148" />
+      <text
+         xml:space="preserve"
+         style="font-size:1.85538px;display:none;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.113908;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="43.211548"
+         y="67.832787"
+         id="text9714"
+         transform="scale(0.91001737,1.0988801)"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.113908;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="0"
+           y="0">3</tspan></text>
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 50.078477,7.5286417 c -0.04579,0.3074089 -0.03422,65.9377763 -0.03422,65.9377763"
+       id="path127"
+       sodipodi:nodetypes="cc" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="49.168594"
+       y="14.241333"
+       id="text9342"
+       transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+         x="49.168594"
+         y="14.241333">1</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="-50.37851"
+       cy="-11.698981"
+       r="1.2760839"
+       transform="rotate(-178.67073)" />
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 50.097748,25.009402 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+       id="path13743"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g14264"
+       transform="translate(0,-71.966706)"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:4.47466;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 39.141599,78.999807 21.42108,0.189536"
+         id="path548" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.104558;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle13613"
+         cx="78.200455"
+         cy="-40.956722"
+         transform="matrix(-0.02107702,0.99977785,-0.99966338,-0.02594463,0,0)"
+         rx="1.2327613"
+         ry="1.1111807" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.41325px;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.114;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="37.679607"
+         y="80.526085"
+         id="text13723"
+         transform="rotate(-0.68318798)"><tspan
+           sodipodi:role="line"
+           id="tspan13721"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.114;stroke-dasharray:none"
+           x="37.679607"
+           y="80.526085">2</tspan></text>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 51.113705,79.180036 c -2.146501,0.01635 -10.408471,0.0051 -10.408471,0.0051"
+         id="path13749"
+         sodipodi:nodetypes="cc" />
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/i_l2.svg b/public/assets/capital-letter/i_l2.svg
new file mode 100755
index 0000000..404781f
--- /dev/null
+++ b/public/assets/capital-letter/i_l2.svg
@@ -0,0 +1,219 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="i_l2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="d_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="31.19192,73.869705"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="36.906258,27.301511"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="36.037285,19.413344"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="54.122374,93.823341"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.786217,21.819752"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 38.985247,19.717732 c -0.01675,-2.146498 -0.007,-10.4084704 -0.007,-10.4084704"
+       id="path6265"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g14176"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g14279"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.47293;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 39.142669,73.987028 21.401647,0.110198"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391436;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 48.688134,73.955975 41.183058,73.814371"
+         id="path9576"
+         sodipodi:nodetypes="cc" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.11391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-72.913704"
+         cy="40.918648"
+         transform="matrix(0.01563487,-0.99987777,0.99974017,0.02279479,0,0)"
+         rx="1.140859"
+         ry="0.94491148" />
+      <text
+         xml:space="preserve"
+         style="font-size:1.85538px;display:none;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.113908;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="43.211548"
+         y="67.832787"
+         id="text9714"
+         transform="scale(0.91001737,1.0988801)"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.113908;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="0"
+           y="0">3</tspan></text>
+    </g>
+    <path
+       style="display:none;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 50.078477,7.5286417 c -0.04579,0.3074089 -0.03422,65.9377763 -0.03422,65.9377763"
+       id="path127"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="-50.37851"
+       cy="-11.698981"
+       r="1.2760839"
+       transform="rotate(-178.67073)" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 50.097748,25.009402 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+       id="path13743"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g14264"
+       transform="translate(0,-71.966706)"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:4.47466;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 39.141599,78.999807 21.42108,0.189536"
+         id="path548" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.104558;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle13613"
+         cx="78.200455"
+         cy="-40.956722"
+         transform="matrix(-0.02107702,0.99977785,-0.99966338,-0.02594463,0,0)"
+         rx="1.2327613"
+         ry="1.1111807" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.41325px;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.114;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="37.679607"
+         y="80.526085"
+         id="text13723"
+         transform="rotate(-0.68318798)"><tspan
+           sodipodi:role="line"
+           id="tspan13721"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.114;stroke-dasharray:none"
+           x="37.679607"
+           y="80.526085">2</tspan></text>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 51.113705,79.180036 c -2.146501,0.01635 -10.408471,0.0051 -10.408471,0.0051"
+         id="path13749"
+         sodipodi:nodetypes="cc" />
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/i_l3.svg b/public/assets/capital-letter/i_l3.svg
new file mode 100755
index 0000000..0ec2bba
--- /dev/null
+++ b/public/assets/capital-letter/i_l3.svg
@@ -0,0 +1,230 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="i_l2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="d_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="31.19192,73.869705"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="36.906258,27.301511"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="36.037285,19.413344"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="54.122374,93.823341"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.786217,21.819752"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g14176"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g14279"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.47293;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 39.142669,73.987028 21.401647,0.110198"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391436;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 48.688134,73.955975 41.183058,73.814371"
+         id="path9576"
+         sodipodi:nodetypes="cc" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.11391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-72.913704"
+         cy="40.918648"
+         transform="matrix(0.01563487,-0.99987777,0.99974017,0.02279479,0,0)"
+         rx="1.140859"
+         ry="0.94491148" />
+      <text
+         xml:space="preserve"
+         style="font-size:1.85538px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.113908;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="43.211548"
+         y="67.832787"
+         id="text9714"
+         transform="scale(0.91001737,1.0988801)"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.113908;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="43.211548"
+           y="67.832787">3</tspan></text>
+    </g>
+    <g
+       id="g15171"
+       style="display:none">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 50.078477,7.5286417 c -0.04579,0.3074089 -0.03422,65.9377763 -0.03422,65.9377763"
+         id="path127"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="49.168594"
+         y="14.241333"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="49.168594"
+           y="14.241333">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-50.37851"
+         cy="-11.698981"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 50.097748,25.009402 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <g
+       id="g14264"
+       transform="translate(0,-71.966706)"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:4.47466;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 39.141599,78.999807 21.42108,0.189536"
+         id="path548" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.104558;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle13613"
+         cx="78.200455"
+         cy="-40.956722"
+         transform="matrix(-0.02107702,0.99977785,-0.99966338,-0.02594463,0,0)"
+         rx="1.2327613"
+         ry="1.1111807" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.41325px;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.114;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="37.679607"
+         y="80.526085"
+         id="text13723"
+         transform="rotate(-0.68318798)"><tspan
+           sodipodi:role="line"
+           id="tspan13721"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.114;stroke-dasharray:none"
+           x="37.679607"
+           y="80.526085">2</tspan></text>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 51.113705,79.180036 c -2.146501,0.01635 -10.408471,0.0051 -10.408471,0.0051"
+         id="path13749"
+         sodipodi:nodetypes="cc" />
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/k.svg b/public/assets/capital-letter/k.svg
new file mode 100755
index 0000000..cb0616d
--- /dev/null
+++ b/public/assets/capital-letter/k.svg
@@ -0,0 +1,243 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="k_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="k.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="31.19192,73.869705"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="36.906258,27.301511"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-3.3475992,20.912321"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="109.48582,93.369913"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.786217,21.819752"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g19985"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g18697"
+       style="display:inline"
+       transform="translate(-0.30706826,0.0790019)"
+       inkscape:label="green1">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 34.330377,9.3137689 C 34.075442,8.1745231 34.229651,76.194688 34.229651,76.194688"
+         id="path127"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="33.212013"
+         y="10.601716"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="33.212013"
+           y="10.601716">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-34.323376"
+         cy="-8.5520439"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 34.119937,21.49086 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <g
+       id="g21577"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 60.070724,9.4858095 C 59.92985,9.6636375 35.22968,51.950743 35.22968,51.950743"
+         id="path15674"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g21551"
+         transform="rotate(-34.110499,58.86954,9.3216777)">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="54.113926"
+           y="-23.497944"
+           id="text15678"
+           transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="54.113926"
+             y="-23.497944">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-54.018658"
+           cy="25.946033"
+           r="1.2760839"
+           transform="rotate(-144.24458)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 53.416204,20.626295 c 1.082076,-1.853874 5.310849,-8.951603 5.310849,-8.951603"
+         id="path15682"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="2.6429429"
+         inkscape:transform-center-y="4.3941443" />
+      <g
+         id="g21593"
+         style="display:inline">
+        <path
+           style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 43.244577,42.906745 60.539428,76.483297"
+           id="path1108" />
+        <path
+           style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+           d="M 50.370568,55.799982 45.754806,47.922138"
+           id="path9576"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-2.0928027"
+           inkscape:transform-center-y="4.3531649" />
+        <g
+           id="g21538"
+           transform="translate(-14.43004,-29.354333)">
+          <ellipse
+             style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+             id="circle9582"
+             cx="-74.661598"
+             cy="60.70055"
+             transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
+             rx="1.2146922"
+             ry="1.1834064" />
+          <text
+             xml:space="preserve"
+             style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+             x="59.531094"
+             y="75.579971"
+             id="text9714"
+             transform="scale(0.98702867,1.0131418)"><tspan
+               sodipodi:role="line"
+               id="tspan9712"
+               style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+               x="59.531094"
+               y="75.579971">3</tspan></text>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/k_l1.svg b/public/assets/capital-letter/k_l1.svg
new file mode 100755
index 0000000..52d1f4d
--- /dev/null
+++ b/public/assets/capital-letter/k_l1.svg
@@ -0,0 +1,243 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="J_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="d_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="31.19192,73.869705"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="36.906258,27.301511"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-3.3475992,20.912321"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="109.48582,93.369913"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.786217,21.819752"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g19985"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g18697"
+       style="display:inline"
+       transform="translate(-0.30706826,0.0790019)"
+       inkscape:label="green1">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 34.330377,9.3137689 C 34.075442,8.1745231 34.229651,76.194688 34.229651,76.194688"
+         id="path127"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="33.212013"
+         y="10.601716"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="33.212013"
+           y="10.601716">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-34.323376"
+         cy="-8.5520439"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 34.119937,21.49086 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <g
+       id="g21593"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 43.244577,42.906745 60.539428,76.483297"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 50.370568,55.799982 45.754806,47.922138"
+         id="path9576"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-2.0928027"
+         inkscape:transform-center-y="4.3531649" />
+      <g
+         id="g21538"
+         transform="translate(-14.43004,-29.354333)">
+        <ellipse
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="circle9582"
+           cx="-74.661598"
+           cy="60.70055"
+           transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
+           rx="1.2146922"
+           ry="1.1834064" />
+        <text
+           xml:space="preserve"
+           style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="59.531094"
+           y="75.579971"
+           id="text9714"
+           transform="scale(0.98702867,1.0131418)"><tspan
+             sodipodi:role="line"
+             id="tspan9712"
+             style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="59.531094"
+             y="75.579971">3</tspan></text>
+      </g>
+    </g>
+    <g
+       id="g21577"
+       style="display:none">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 60.070724,9.4858095 C 59.92985,9.6636375 35.22968,51.950743 35.22968,51.950743"
+         id="path15674"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g21551"
+         transform="rotate(-34.110499,58.86954,9.3216777)">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="54.113926"
+           y="-23.497944"
+           id="text15678"
+           transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="54.113926"
+             y="-23.497944">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-54.018658"
+           cy="25.946033"
+           r="1.2760839"
+           transform="rotate(-144.24458)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 53.416204,20.626295 c 1.082076,-1.853874 5.310849,-8.951603 5.310849,-8.951603"
+         id="path15682"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="2.6429429"
+         inkscape:transform-center-y="4.3941443" />
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/k_l2.svg b/public/assets/capital-letter/k_l2.svg
new file mode 100755
index 0000000..43adc1d
--- /dev/null
+++ b/public/assets/capital-letter/k_l2.svg
@@ -0,0 +1,243 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="k_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="d_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="31.19192,73.869705"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="36.906258,27.301511"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-3.3475992,20.912321"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="109.48582,93.369913"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.786217,21.819752"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g19985"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g18697"
+       style="display:none"
+       transform="translate(-0.30706826,0.0790019)"
+       inkscape:label="green1">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 34.330377,9.3137689 C 34.075442,8.1745231 34.229651,76.194688 34.229651,76.194688"
+         id="path127"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="33.212013"
+         y="10.601716"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="33.212013"
+           y="10.601716">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-34.323376"
+         cy="-8.5520439"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 34.119937,21.49086 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <g
+       id="g21593"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 43.244577,42.906745 60.539428,76.483297"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 50.370568,55.799982 45.754806,47.922138"
+         id="path9576"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-2.0928027"
+         inkscape:transform-center-y="4.3531649" />
+      <g
+         id="g21538"
+         transform="translate(-14.43004,-29.354333)">
+        <ellipse
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="circle9582"
+           cx="-74.661598"
+           cy="60.70055"
+           transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
+           rx="1.2146922"
+           ry="1.1834064" />
+        <text
+           xml:space="preserve"
+           style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="59.531094"
+           y="75.579971"
+           id="text9714"
+           transform="scale(0.98702867,1.0131418)"><tspan
+             sodipodi:role="line"
+             id="tspan9712"
+             style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="59.531094"
+             y="75.579971">3</tspan></text>
+      </g>
+    </g>
+    <g
+       id="g21577"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 60.070724,9.4858095 C 59.92985,9.6636375 35.22968,51.950743 35.22968,51.950743"
+         id="path15674"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g21551"
+         transform="rotate(-34.110499,58.86954,9.3216777)">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="54.113926"
+           y="-23.497944"
+           id="text15678"
+           transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="54.113926"
+             y="-23.497944">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-54.018658"
+           cy="25.946033"
+           r="1.2760839"
+           transform="rotate(-144.24458)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 53.416204,20.626295 c 1.082076,-1.853874 5.310849,-8.951603 5.310849,-8.951603"
+         id="path15682"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="2.6429429"
+         inkscape:transform-center-y="4.3941443" />
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/k_l3.svg b/public/assets/capital-letter/k_l3.svg
new file mode 100755
index 0000000..a9e859d
--- /dev/null
+++ b/public/assets/capital-letter/k_l3.svg
@@ -0,0 +1,240 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="k.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="k.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="31.19192,73.869705"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="36.906258,27.301511"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-3.3475992,20.912321"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="109.48582,93.369913"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.786217,21.819752"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g19985"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g18697"
+       style="display:none"
+       transform="translate(-0.30706826,0.0790019)"
+       inkscape:label="green1">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 34.330377,9.3137689 C 34.075442,8.1745231 34.229651,76.194688 34.229651,76.194688"
+         id="path127"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="33.212013"
+         y="10.601716"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="33.212013"
+           y="10.601716">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-34.323376"
+         cy="-8.5520439"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 34.119937,21.49086 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <path
+       style="display:none;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 60.070724,9.4858095 C 59.92985,9.6636375 35.22968,51.950743 35.22968,51.950743"
+       id="path15674"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g21551"
+       transform="rotate(-34.110499,58.86954,9.3216777)"
+       style="display:none">
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="54.113926"
+         y="-23.497944"
+         id="text15678"
+         transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan15676"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="54.113926"
+           y="-23.497944">2</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle15680"
+         cx="-54.018658"
+         cy="25.946033"
+         r="1.2760839"
+         transform="rotate(-144.24458)" />
+    </g>
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 53.416204,20.626295 c 1.082076,-1.853874 5.310849,-8.951603 5.310849,-8.951603"
+       id="path15682"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="2.6429429"
+       inkscape:transform-center-y="4.3941443" />
+    <g
+       id="g21593"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 43.244577,42.906745 60.539428,76.483297"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 50.370568,55.799982 45.754806,47.922138"
+         id="path9576"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-2.0928027"
+         inkscape:transform-center-y="4.3531649" />
+      <g
+         id="g21538"
+         transform="translate(-14.43004,-29.354333)">
+        <ellipse
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="circle9582"
+           cx="-74.661598"
+           cy="60.70055"
+           transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
+           rx="1.2146922"
+           ry="1.1834064" />
+        <text
+           xml:space="preserve"
+           style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="59.531094"
+           y="75.579971"
+           id="text9714"
+           transform="scale(0.98702867,1.0131418)"><tspan
+             sodipodi:role="line"
+             id="tspan9712"
+             style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="59.531094"
+             y="75.579971">3</tspan></text>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/l.svg b/public/assets/capital-letter/l.svg
new file mode 100755
index 0000000..81f5463
--- /dev/null
+++ b/public/assets/capital-letter/l.svg
@@ -0,0 +1,178 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="l_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1572"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false" />
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g19985"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g18697"
+       style="display:inline"
+       transform="translate(-0.30706826,0.0790019)">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 34.330377,9.3137689 C 34.075442,8.1745231 34.229651,76.194688 34.229651,76.194688"
+         id="path127" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="33.212013"
+         y="10.601716"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="33.212013"
+           y="10.601716">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-34.323376"
+         cy="-8.5520439"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 34.119937,21.49086 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743" />
+    </g>
+    <g
+       id="g21593"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 43.244577,42.906745 60.539428,76.483297"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 50.370568,55.799982 45.754806,47.922138"
+         id="path9576" />
+      <g
+         id="g21538"
+         transform="translate(-14.43004,-29.354333)">
+        <ellipse
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="circle9582"
+           cx="-74.661598"
+           cy="60.70055"
+           transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
+           rx="1.2146922"
+           ry="1.1834064" />
+        <text
+           xml:space="preserve"
+           style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="59.531094"
+           y="75.579971"
+           id="text9714"
+           transform="scale(0.98702867,1.0131418)"><tspan
+             id="tspan9712"
+             style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="59.531094"
+             y="75.579971">3</tspan></text>
+      </g>
+    </g>
+    <g
+       id="g1687"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 64.473558,76.227599 c -0.139653,-0.04852 -30.573262,0.232173 -30.573262,0.232173"
+         id="path15674" />
+      <g
+         id="g21551"
+         transform="rotate(-34.110499,154.40598,83.041599)">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="54.113926"
+           y="-23.497944"
+           id="text15678"
+           transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="54.113926"
+             y="-23.497944">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-54.018658"
+           cy="25.946033"
+           r="1.2760839"
+           transform="rotate(-144.24458)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 46.910872,76.383828 c -2.146351,0.03029 -10.408221,0.07265 -10.408221,0.07265"
+         id="path15682" />
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/l_l1.svg b/public/assets/capital-letter/l_l1.svg
new file mode 100755
index 0000000..3e94942
--- /dev/null
+++ b/public/assets/capital-letter/l_l1.svg
@@ -0,0 +1,164 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g19985"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g18697"
+       style="display:inline"
+       transform="translate(-0.30706826,0.0790019)">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 34.330377,9.3137689 C 34.075442,8.1745231 34.229651,76.194688 34.229651,76.194688"
+         id="path127" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="33.212013"
+         y="10.601716"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="33.212013"
+           y="10.601716">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-34.323376"
+         cy="-8.5520439"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 34.119937,21.49086 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743" />
+    </g>
+    <g
+       id="g21593"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 43.244577,42.906745 60.539428,76.483297"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 50.370568,55.799982 45.754806,47.922138"
+         id="path9576" />
+      <g
+         id="g21538"
+         transform="translate(-14.43004,-29.354333)">
+        <ellipse
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="circle9582"
+           cx="-74.661598"
+           cy="60.70055"
+           transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
+           rx="1.2146922"
+           ry="1.1834064" />
+        <text
+           xml:space="preserve"
+           style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="59.531094"
+           y="75.579971"
+           id="text9714"
+           transform="scale(0.98702867,1.0131418)"><tspan
+             id="tspan9712"
+             style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="59.531094"
+             y="75.579971">3</tspan></text>
+      </g>
+    </g>
+    <g
+       id="g1687"
+       style="display:none">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 64.473558,76.227599 c -0.139653,-0.04852 -30.573262,0.232173 -30.573262,0.232173"
+         id="path15674" />
+      <g
+         id="g21551"
+         transform="rotate(-34.110499,154.40598,83.041599)">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="54.113926"
+           y="-23.497944"
+           id="text15678"
+           transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="54.113926"
+             y="-23.497944">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-54.018658"
+           cy="25.946033"
+           r="1.2760839"
+           transform="rotate(-144.24458)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 46.910872,76.383828 c -2.146351,0.03029 -10.408221,0.07265 -10.408221,0.07265"
+         id="path15682" />
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/l_l2.svg b/public/assets/capital-letter/l_l2.svg
new file mode 100755
index 0000000..6df2012
--- /dev/null
+++ b/public/assets/capital-letter/l_l2.svg
@@ -0,0 +1,243 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="l_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="k_l3.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="31.19192,73.869705"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="36.906258,27.301511"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-3.3475992,20.912321"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="109.48582,93.369913"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.786217,21.819752"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g19985"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g18697"
+       style="display:none"
+       transform="translate(-0.30706826,0.0790019)"
+       inkscape:label="green1">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 34.330377,9.3137689 C 34.075442,8.1745231 34.229651,76.194688 34.229651,76.194688"
+         id="path127"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="33.212013"
+         y="10.601716"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="33.212013"
+           y="10.601716">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-34.323376"
+         cy="-8.5520439"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 34.119937,21.49086 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <g
+       id="g21593"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 43.244577,42.906745 60.539428,76.483297"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 50.370568,55.799982 45.754806,47.922138"
+         id="path9576"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-2.0928027"
+         inkscape:transform-center-y="4.3531649" />
+      <g
+         id="g21538"
+         transform="translate(-14.43004,-29.354333)">
+        <ellipse
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="circle9582"
+           cx="-74.661598"
+           cy="60.70055"
+           transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
+           rx="1.2146922"
+           ry="1.1834064" />
+        <text
+           xml:space="preserve"
+           style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="59.531094"
+           y="75.579971"
+           id="text9714"
+           transform="scale(0.98702867,1.0131418)"><tspan
+             sodipodi:role="line"
+             id="tspan9712"
+             style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="59.531094"
+             y="75.579971">3</tspan></text>
+      </g>
+    </g>
+    <g
+       id="g1687"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 64.473558,76.227599 c -0.139653,-0.04852 -30.573262,0.232173 -30.573262,0.232173"
+         id="path15674"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g21551"
+         transform="rotate(-34.110499,154.40598,83.041599)">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="54.113926"
+           y="-23.497944"
+           id="text15678"
+           transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="54.113926"
+             y="-23.497944">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-54.018658"
+           cy="25.946033"
+           r="1.2760839"
+           transform="rotate(-144.24458)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 46.910872,76.383828 c -2.146351,0.03029 -10.408221,0.07265 -10.408221,0.07265"
+         id="path15682"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-5.1277311"
+         inkscape:transform-center-y="-0.0048617" />
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/m.svg b/public/assets/capital-letter/m.svg
new file mode 100755
index 0000000..5ca67ae
--- /dev/null
+++ b/public/assets/capital-letter/m.svg
@@ -0,0 +1,255 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="l_l2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="m_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="20.033735,110.59253"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="24.949927,104.14192"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-3.3475992,20.912321"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="109.48582,93.369913"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="75.035526,115.88828"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="80.076389,122.03504"
+       orientation="1,0"
+       id="guide1929"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="50.744659,55.457668"
+       orientation="0,-1"
+       id="guide2737"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g2899"
+       style="display:inline">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 26.230399,9.296406 C 25.975464,8.1571602 26.129673,76.177325 26.129673,76.177325"
+         id="path127"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="24.886662"
+         y="20.667381"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="24.886662"
+           y="20.667381">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-26.316095"
+         cy="-18.873741"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 25.87537,31.624035 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <g
+       id="g2907"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 26.18735,9.2350394 50.004148,41.64969"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.489119;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 34.341676,19.37966 28.125135,11.840027"
+         id="path9576"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-2.0928027"
+         inkscape:transform-center-y="4.3531649" />
+      <g
+         id="g21538"
+         transform="matrix(1.1264863,-0.11756911,0.12908963,1.0259538,-49.64786,-60.366184)">
+        <ellipse
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="circle9582"
+           cx="-74.661598"
+           cy="60.70055"
+           transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
+           rx="1.2146922"
+           ry="1.1834064" />
+        <text
+           xml:space="preserve"
+           style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="59.531094"
+           y="75.579971"
+           id="text9714"
+           transform="scale(0.98702867,1.0131418)"><tspan
+             sodipodi:role="line"
+             id="tspan9712"
+             style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="59.531094"
+             y="75.579971">3</tspan></text>
+      </g>
+    </g>
+    <g
+       id="g2915"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 74.505969,76.328966 C 74.530557,76.025497 74.647657,9.4846426 74.647657,9.4846426"
+         id="path15674"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g21551"
+         transform="rotate(-34.110499,81.193335,-10.67201)">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="54.113926"
+           y="-23.497944"
+           id="text15678"
+           transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="54.113926"
+             y="-23.497944">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-54.018658"
+           cy="25.946033"
+           r="1.2760839"
+           transform="rotate(-144.24458)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 74.672915,31.573444 C 74.648355,29.42702 74.628065,21.165066 74.628065,21.165066"
+         id="path15682"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="0.0088349"
+         inkscape:transform-center-y="5.1277257" />
+      <g
+         id="g2923"
+         style="display:inline">
+        <path
+           style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 49.991348,41.79989 74.535166,9.6531683"
+           id="path1106" />
+        <path
+           style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+           d="m 64.440061,21.83391 6.514261,-7.767476"
+           id="path9586"
+           sodipodi:nodetypes="cc" />
+        <g
+           id="g2892"
+           transform="translate(20.39893,24.948474)">
+          <circle
+             style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+             id="circle9592"
+             cx="13.097849"
+             cy="51.455624"
+             r="1.2760839"
+             transform="rotate(-88.91827)" />
+          <text
+             xml:space="preserve"
+             style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+             x="50.827629"
+             y="-11.198814"
+             id="text9761"><tspan
+               sodipodi:role="line"
+               id="tspan9759"
+               style="stroke-width:0.117792"
+               x="50.827629"
+               y="-11.198814">4</tspan></text>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/m_l1.svg b/public/assets/capital-letter/m_l1.svg
new file mode 100755
index 0000000..b52cc88
--- /dev/null
+++ b/public/assets/capital-letter/m_l1.svg
@@ -0,0 +1,258 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="m.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="m_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="20.033735,110.59253"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="24.949927,104.14192"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-3.3475992,20.912321"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="109.48582,93.369913"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="75.035526,115.88828"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="80.076389,122.03504"
+       orientation="1,0"
+       id="guide1929"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="50.744659,55.457668"
+       orientation="0,-1"
+       id="guide2737"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g2899"
+       style="display:inline">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 26.230399,9.296406 C 25.975464,8.1571602 26.129673,76.177325 26.129673,76.177325"
+         id="path127"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="24.886662"
+         y="20.667381"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="24.886662"
+           y="20.667381">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-26.316095"
+         cy="-18.873741"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 25.87537,31.624035 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <g
+       id="g2907"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 26.18735,9.2350394 50.004148,41.64969"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.489119;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 34.341676,19.37966 28.125135,11.840027"
+         id="path9576"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-2.0928027"
+         inkscape:transform-center-y="4.3531649" />
+      <g
+         id="g21538"
+         transform="matrix(1.1264863,-0.11756911,0.12908963,1.0259538,-49.64786,-60.366184)">
+        <ellipse
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="circle9582"
+           cx="-74.661598"
+           cy="60.70055"
+           transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
+           rx="1.2146922"
+           ry="1.1834064" />
+        <text
+           xml:space="preserve"
+           style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="59.531094"
+           y="75.579971"
+           id="text9714"
+           transform="scale(0.98702867,1.0131418)"><tspan
+             sodipodi:role="line"
+             id="tspan9712"
+             style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="59.531094"
+             y="75.579971">3</tspan></text>
+      </g>
+    </g>
+    <g
+       id="g2915"
+       style="display:none">
+      <path
+         style="display:none;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 74.505969,76.328966 C 74.530557,76.025497 74.647657,9.4846426 74.647657,9.4846426"
+         id="path15674"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g21551"
+         transform="rotate(-34.110499,81.193335,-10.67201)"
+         style="display:none">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="54.113926"
+           y="-23.497944"
+           id="text15678"
+           transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="54.113926"
+             y="-23.497944">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-54.018658"
+           cy="25.946033"
+           r="1.2760839"
+           transform="rotate(-144.24458)" />
+      </g>
+      <path
+         style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 74.672915,31.573444 C 74.648355,29.42702 74.628065,21.165066 74.628065,21.165066"
+         id="path15682"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="0.0088349"
+         inkscape:transform-center-y="5.1277257" />
+      <g
+         id="g2923"
+         style="display:inline"
+         sodipodi:insensitive="true">
+        <path
+           style="display:none;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 49.991348,41.79989 74.535166,9.6531683"
+           id="path1106" />
+        <path
+           style="display:none;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+           d="m 64.440061,21.83391 6.514261,-7.767476"
+           id="path9586"
+           sodipodi:nodetypes="cc" />
+        <g
+           id="g2892"
+           transform="translate(20.39893,24.948474)"
+           style="display:inline">
+          <circle
+             style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+             id="circle9592"
+             cx="13.097849"
+             cy="51.455624"
+             r="1.2760839"
+             transform="rotate(-88.91827)" />
+          <text
+             xml:space="preserve"
+             style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+             x="50.827629"
+             y="-11.198814"
+             id="text9761"><tspan
+               sodipodi:role="line"
+               id="tspan9759"
+               style="stroke-width:0.117792"
+               x="50.827629"
+               y="-11.198814">4</tspan></text>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/m_l2.svg b/public/assets/capital-letter/m_l2.svg
new file mode 100755
index 0000000..80a9506
--- /dev/null
+++ b/public/assets/capital-letter/m_l2.svg
@@ -0,0 +1,218 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="m_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="m_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="20.033735,110.59253"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="24.949927,104.14192"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-3.3475992,20.912321"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="109.48582,93.369913"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="75.035526,115.88828"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="80.076389,122.03504"
+       orientation="1,0"
+       id="guide1929"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="50.744659,55.457668"
+       orientation="0,-1"
+       id="guide2737"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g2899"
+       style="display:none">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 26.230399,9.296406 C 25.975464,8.1571602 26.129673,76.177325 26.129673,76.177325"
+         id="path127"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="24.886662"
+         y="20.667381"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="24.886662"
+           y="20.667381">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-26.316095"
+         cy="-18.873741"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 25.87537,31.624035 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <g
+       id="g2907"
+       style="display:none">
+      <path
+         style="display:none;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 26.18735,9.2350394 50.004148,41.64969"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.489119;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 34.341676,19.37966 28.125135,11.840027"
+         id="path9576"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-2.0928027"
+         inkscape:transform-center-y="4.3531649" />
+      <g
+         id="g21538"
+         transform="matrix(1.1264863,-0.11756911,0.12908963,1.0259538,-49.64786,-60.366184)"
+         style="display:inline">
+        <ellipse
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="circle9582"
+           cx="-74.661598"
+           cy="60.70055"
+           transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
+           rx="1.2146922"
+           ry="1.1834064" />
+        <text
+           xml:space="preserve"
+           style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="59.531094"
+           y="75.579971"
+           id="text9714"
+           transform="scale(0.98702867,1.0131418)"><tspan
+             sodipodi:role="line"
+             id="tspan9712"
+             style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="59.531094"
+             y="75.579971">3</tspan></text>
+      </g>
+    </g>
+    <path
+       style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 74.505969,76.328966 C 74.530557,76.025497 74.647657,9.4846426 74.647657,9.4846426"
+       id="path15674"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g21551"
+       transform="rotate(-34.110499,81.193335,-10.67201)"
+       style="display:inline">
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="54.113926"
+         y="-23.497944"
+         id="text15678"
+         transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan15676"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="54.113926"
+           y="-23.497944">2</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle15680"
+         cx="-54.018658"
+         cy="25.946033"
+         r="1.2760839"
+         transform="rotate(-144.24458)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 74.672915,31.573444 C 74.648355,29.42702 74.628065,21.165066 74.628065,21.165066"
+       id="path15682"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="0.0088349"
+       inkscape:transform-center-y="5.1277257" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/m_l3.svg b/public/assets/capital-letter/m_l3.svg
new file mode 100755
index 0000000..5afe654
--- /dev/null
+++ b/public/assets/capital-letter/m_l3.svg
@@ -0,0 +1,190 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="m_l2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="m_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="20.033735,110.59253"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="24.949927,104.14192"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-3.3475992,20.912321"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="109.48582,93.369913"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="75.035526,115.88828"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="80.076389,122.03504"
+       orientation="1,0"
+       id="guide1929"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="50.744659,55.457668"
+       orientation="0,-1"
+       id="guide2737"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g2899"
+       style="display:none">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 26.230399,9.296406 C 25.975464,8.1571602 26.129673,76.177325 26.129673,76.177325"
+         id="path127"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="24.886662"
+         y="20.667381"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="24.886662"
+           y="20.667381">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-26.316095"
+         cy="-18.873741"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 25.87537,31.624035 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 26.18735,9.2350394 50.004148,41.64969"
+       id="path1108" />
+    <path
+       style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.489119;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+       d="M 34.341676,19.37966 28.125135,11.840027"
+       id="path9576"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="-2.0928027"
+       inkscape:transform-center-y="4.3531649" />
+    <g
+       id="g21538"
+       transform="matrix(1.1264863,-0.11756911,0.12908963,1.0259538,-49.64786,-60.366184)"
+       style="display:inline">
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-74.661598"
+         cy="60.70055"
+         transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
+         rx="1.2146922"
+         ry="1.1834064" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="59.531094"
+         y="75.579971"
+         id="text9714"
+         transform="scale(0.98702867,1.0131418)"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="59.531094"
+           y="75.579971">3</tspan></text>
+    </g>
+    <path
+       style="display:none;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 74.505969,76.328966 C 74.530557,76.025497 74.647657,9.4846426 74.647657,9.4846426"
+       id="path15674"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 74.672915,31.573444 C 74.648355,29.42702 74.628065,21.165066 74.628065,21.165066"
+       id="path15682"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="0.0088349"
+       inkscape:transform-center-y="5.1277257" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/m_l4.svg b/public/assets/capital-letter/m_l4.svg
new file mode 100755
index 0000000..8e96293
--- /dev/null
+++ b/public/assets/capital-letter/m_l4.svg
@@ -0,0 +1,222 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="m_l4.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="m_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="20.033735,110.59253"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="24.949927,104.14192"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-3.3475992,20.912321"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="56.339863,65.327218"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="75.035526,115.88828"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="80.076389,122.03504"
+       orientation="1,0"
+       id="guide1929"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="50.744659,55.457668"
+       orientation="0,-1"
+       id="guide2737"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g2899"
+       style="display:none">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 26.230399,9.296406 C 25.975464,8.1571602 26.129673,76.177325 26.129673,76.177325"
+         id="path127"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="24.886662"
+         y="20.667381"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="24.886662"
+           y="20.667381">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-26.316095"
+         cy="-18.873741"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 25.87537,31.624035 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 26.18735,9.2350394 50.004148,41.64969"
+       id="path1108" />
+    <path
+       style="display:none;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.489119;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+       d="M 34.341676,19.37966 28.125135,11.840027"
+       id="path9576"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="-2.0928027"
+       inkscape:transform-center-y="4.3531649" />
+    <g
+       id="g21538"
+       transform="matrix(1.1264863,-0.11756911,0.12908963,1.0259538,-49.64786,-60.366184)"
+       style="display:none">
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-74.661598"
+         cy="60.70055"
+         transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
+         rx="1.2146922"
+         ry="1.1834064" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="59.531094"
+         y="75.579971"
+         id="text9714"
+         transform="scale(0.98702867,1.0131418)"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="59.531094"
+           y="75.579971">3</tspan></text>
+    </g>
+    <path
+       style="display:none;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 74.505969,76.328966 C 74.530557,76.025497 74.647657,9.4846426 74.647657,9.4846426"
+       id="path15674"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 74.672915,31.573444 C 74.648355,29.42702 74.628065,21.165066 74.628065,21.165066"
+       id="path15682"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="0.0088349"
+       inkscape:transform-center-y="5.1277257" />
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 49.991348,41.79989 74.535166,9.6531683"
+       id="path1106" />
+    <path
+       style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 64.440061,21.83391 6.514261,-7.767476"
+       id="path9586"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g2892"
+       transform="translate(20.39893,24.948474)"
+       style="display:inline">
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="13.097849"
+         cy="51.455624"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="50.827629"
+         y="-11.198814"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="50.827629"
+           y="-11.198814">4</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/n.svg b/public/assets/capital-letter/n.svg
new file mode 100755
index 0000000..6e772a9
--- /dev/null
+++ b/public/assets/capital-letter/n.svg
@@ -0,0 +1,240 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="m_l4.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="n.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="24.949927,104.14192"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-3.3475992,20.912321"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="70.289235,61.138554"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="75.035526,115.88828"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="80.076389,122.03504"
+       orientation="1,0"
+       id="guide1929"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="50.744659,55.457668"
+       orientation="0,-1"
+       id="guide2737"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g925">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 26.230399,9.296406 C 25.975464,8.1571602 26.129673,76.177325 26.129673,76.177325"
+         id="path127"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="24.886662"
+         y="20.667381"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="24.886662"
+           y="20.667381">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-26.316095"
+         cy="-18.873741"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 25.87537,31.624035 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <g
+       id="g1001">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 66.548251,76.109951 C 66.572839,75.806482 66.689939,9.265628 66.689939,9.265628"
+         id="path15674"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g21551"
+         transform="rotate(-34.110499,76.857525,2.1880008)"
+         style="display:inline">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="54.113926"
+           y="-23.497944"
+           id="text15678"
+           transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="54.113926"
+             y="-23.497944">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-54.018658"
+           cy="25.946033"
+           r="1.2760839"
+           transform="rotate(-144.24458)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 66.715197,31.354429 c -0.02456,-2.146424 -0.04485,-10.408378 -0.04485,-10.408378"
+         id="path15682"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="0.0088349"
+         inkscape:transform-center-y="5.1277257" />
+    </g>
+    <g
+       id="g993">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 26.247474,9.2266727 66.651189,76.300324"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.489119;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 32.918443,20.131469 28.042266,11.663037"
+         id="path9576"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-1.3397517"
+         inkscape:transform-center-y="4.6405744" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142347;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-12.740498"
+         cy="25.719242"
+         transform="matrix(-0.10482327,-0.99449087,0.99627769,-0.08620189,0,0)"
+         rx="1.2555509"
+         ry="1.3407919" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.31839px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142334;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="24.872412"
+         y="12.578706"
+         id="text9714"
+         transform="matrix(1.0324615,-0.03671877,0.05488879,0.96660705,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.142334;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="24.872412"
+           y="12.578706">3</tspan></text>
+    </g>
+    <g
+       id="g2750"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 49.991348,41.79989 74.535166,9.6531683"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 64.440061,21.83391 6.514261,-7.767476"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-11.461075"
+         cy="72.321915"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="71.226562"
+         y="13.74966"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="71.226562"
+           y="13.74966">4</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/n_l1.svg b/public/assets/capital-letter/n_l1.svg
new file mode 100755
index 0000000..9f1bcfc
--- /dev/null
+++ b/public/assets/capital-letter/n_l1.svg
@@ -0,0 +1,243 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="n.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="n.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="24.949927,104.14192"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-3.3475992,20.912321"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="70.289235,61.138554"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="75.035526,115.88828"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="80.076389,122.03504"
+       orientation="1,0"
+       id="guide1929"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="50.744659,55.457668"
+       orientation="0,-1"
+       id="guide2737"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g925"
+       style="display:inline">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 26.230399,9.296406 C 25.975464,8.1571602 26.129673,76.177325 26.129673,76.177325"
+         id="path127"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="24.886662"
+         y="20.667381"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="24.886662"
+           y="20.667381">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-26.316095"
+         cy="-18.873741"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 25.87537,31.624035 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <g
+       id="g1001"
+       style="display:none">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 66.548251,76.109951 C 66.572839,75.806482 66.689939,9.265628 66.689939,9.265628"
+         id="path15674"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g21551"
+         transform="rotate(-34.110499,76.857525,2.1880008)"
+         style="display:inline">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="54.113926"
+           y="-23.497944"
+           id="text15678"
+           transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="54.113926"
+             y="-23.497944">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-54.018658"
+           cy="25.946033"
+           r="1.2760839"
+           transform="rotate(-144.24458)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 66.715197,31.354429 c -0.02456,-2.146424 -0.04485,-10.408378 -0.04485,-10.408378"
+         id="path15682"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="0.0088349"
+         inkscape:transform-center-y="5.1277257" />
+    </g>
+    <g
+       id="g993"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 26.247474,9.2266727 66.651189,76.300324"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.489119;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 32.918443,20.131469 28.042266,11.663037"
+         id="path9576"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-1.3397517"
+         inkscape:transform-center-y="4.6405744" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142347;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-12.740498"
+         cy="25.719242"
+         transform="matrix(-0.10482327,-0.99449087,0.99627769,-0.08620189,0,0)"
+         rx="1.2555509"
+         ry="1.3407919" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.31839px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142334;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="24.872412"
+         y="12.578706"
+         id="text9714"
+         transform="matrix(1.0324615,-0.03671877,0.05488879,0.96660705,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.142334;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="24.872412"
+           y="12.578706">3</tspan></text>
+    </g>
+    <g
+       id="g2750"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 49.991348,41.79989 74.535166,9.6531683"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 64.440061,21.83391 6.514261,-7.767476"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-11.461075"
+         cy="72.321915"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="71.226562"
+         y="13.74966"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="71.226562"
+           y="13.74966">4</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/n_l2.svg b/public/assets/capital-letter/n_l2.svg
new file mode 100755
index 0000000..1383360
--- /dev/null
+++ b/public/assets/capital-letter/n_l2.svg
@@ -0,0 +1,243 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="n_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="n.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="24.949927,104.14192"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-3.3475992,20.912321"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="70.289235,61.138554"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="75.035526,115.88828"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="80.076389,122.03504"
+       orientation="1,0"
+       id="guide1929"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="50.744659,55.457668"
+       orientation="0,-1"
+       id="guide2737"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g925"
+       style="display:none">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 26.230399,9.296406 C 25.975464,8.1571602 26.129673,76.177325 26.129673,76.177325"
+         id="path127"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="24.886662"
+         y="20.667381"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="24.886662"
+           y="20.667381">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-26.316095"
+         cy="-18.873741"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 25.87537,31.624035 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <g
+       id="g1001"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 66.548251,76.109951 C 66.572839,75.806482 66.689939,9.265628 66.689939,9.265628"
+         id="path15674"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g21551"
+         transform="rotate(-34.110499,76.857525,2.1880008)"
+         style="display:inline">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="54.113926"
+           y="-23.497944"
+           id="text15678"
+           transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="54.113926"
+             y="-23.497944">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-54.018658"
+           cy="25.946033"
+           r="1.2760839"
+           transform="rotate(-144.24458)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 66.715197,31.354429 c -0.02456,-2.146424 -0.04485,-10.408378 -0.04485,-10.408378"
+         id="path15682"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="0.0088349"
+         inkscape:transform-center-y="5.1277257" />
+    </g>
+    <g
+       id="g993"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 26.247474,9.2266727 66.651189,76.300324"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.489119;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 32.918443,20.131469 28.042266,11.663037"
+         id="path9576"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-1.3397517"
+         inkscape:transform-center-y="4.6405744" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142347;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-12.740498"
+         cy="25.719242"
+         transform="matrix(-0.10482327,-0.99449087,0.99627769,-0.08620189,0,0)"
+         rx="1.2555509"
+         ry="1.3407919" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.31839px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142334;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="24.872412"
+         y="12.578706"
+         id="text9714"
+         transform="matrix(1.0324615,-0.03671877,0.05488879,0.96660705,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.142334;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="24.872412"
+           y="12.578706">3</tspan></text>
+    </g>
+    <g
+       id="g2750"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 49.991348,41.79989 74.535166,9.6531683"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 64.440061,21.83391 6.514261,-7.767476"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-11.461075"
+         cy="72.321915"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="71.226562"
+         y="13.74966"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="71.226562"
+           y="13.74966">4</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/n_l3.svg b/public/assets/capital-letter/n_l3.svg
new file mode 100755
index 0000000..e9e469d
--- /dev/null
+++ b/public/assets/capital-letter/n_l3.svg
@@ -0,0 +1,243 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="n_l2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="n.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="24.949927,104.14192"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-3.3475992,20.912321"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="70.289235,61.138554"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="75.035526,115.88828"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="80.076389,122.03504"
+       orientation="1,0"
+       id="guide1929"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="50.744659,55.457668"
+       orientation="0,-1"
+       id="guide2737"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g925"
+       style="display:none">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 26.230399,9.296406 C 25.975464,8.1571602 26.129673,76.177325 26.129673,76.177325"
+         id="path127"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="24.886662"
+         y="20.667381"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="24.886662"
+           y="20.667381">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-26.316095"
+         cy="-18.873741"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 25.87537,31.624035 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <g
+       id="g1001"
+       style="display:none">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 66.548251,76.109951 C 66.572839,75.806482 66.689939,9.265628 66.689939,9.265628"
+         id="path15674"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g21551"
+         transform="rotate(-34.110499,76.857525,2.1880008)"
+         style="display:inline">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="54.113926"
+           y="-23.497944"
+           id="text15678"
+           transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="54.113926"
+             y="-23.497944">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-54.018658"
+           cy="25.946033"
+           r="1.2760839"
+           transform="rotate(-144.24458)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 66.715197,31.354429 c -0.02456,-2.146424 -0.04485,-10.408378 -0.04485,-10.408378"
+         id="path15682"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="0.0088349"
+         inkscape:transform-center-y="5.1277257" />
+    </g>
+    <g
+       id="g993"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 26.247474,9.2266727 66.651189,76.300324"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.489119;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 32.918443,20.131469 28.042266,11.663037"
+         id="path9576"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-1.3397517"
+         inkscape:transform-center-y="4.6405744" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142347;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-12.740498"
+         cy="25.719242"
+         transform="matrix(-0.10482327,-0.99449087,0.99627769,-0.08620189,0,0)"
+         rx="1.2555509"
+         ry="1.3407919" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.31839px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142334;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="24.872412"
+         y="12.578706"
+         id="text9714"
+         transform="matrix(1.0324615,-0.03671877,0.05488879,0.96660705,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.142334;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="24.872412"
+           y="12.578706">3</tspan></text>
+    </g>
+    <g
+       id="g2750"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 49.991348,41.79989 74.535166,9.6531683"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 64.440061,21.83391 6.514261,-7.767476"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-11.461075"
+         cy="72.321915"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="71.226562"
+         y="13.74966"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="71.226562"
+           y="13.74966">4</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/o.svg b/public/assets/capital-letter/o.svg
new file mode 100755
index 0000000..b41d420
--- /dev/null
+++ b/public/assets/capital-letter/o.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg4061"
+   inkscape:export-filename="o.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview4063"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false" />
+  <defs
+     id="defs4058">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <ellipse
+       style="fill:none;fill-opacity:1;stroke:#009e40;stroke-width:6.26083;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path4236"
+       cx="48.311226"
+       cy="49.748005"
+       rx="15.750484"
+       ry="21.890316" />
+    <g
+       id="g2108"
+       transform="translate(10.906604,18.120039)">
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="48.182404"
+         y="19.336451"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="48.182404"
+           y="19.336451">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-49.550514"
+         cy="-16.824097"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 51.078339,28.029858 c 2.994925,1.236266 6.697855,3.341918 8.115716,6.517013"
+       id="path13743"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="4.2043934"
+       inkscape:transform-center-y="-3.3943832" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/p.svg b/public/assets/capital-letter/p.svg
new file mode 100755
index 0000000..534d095
--- /dev/null
+++ b/public/assets/capital-letter/p.svg
@@ -0,0 +1,175 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="b.svg"
+   inkscape:export-filename="p_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview32"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false" />
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-35"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-62" />
+    </marker>
+  </defs>
+  <path
+     style="display:inline;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 48.503835,7.2773964 48.071477,78.855459"
+     id="path127" />
+  <g
+     id="g2108"
+     transform="translate(-0.7254407,-4.4774733)">
+    <text
+       xml:space="preserve"
+       style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="48.182404"
+       y="19.336451"
+       id="text9342"
+       transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+         x="48.182404"
+         y="19.336451">1</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="-49.550514"
+       cy="-16.824097"
+       r="1.2760839"
+       transform="rotate(-178.67073)" />
+  </g>
+  <path
+     style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-35);paint-order:stroke fill markers"
+     d="m 48.371278,25.88501 c -0.0082,-2.146546 0.03446,-10.408415 0.03446,-10.408415"
+     id="path13743" />
+  <path
+     style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 50.078881,42.699475 C 93.874653,51.841734 95.165897,-3.5730008 48.619769,7.2562447"
+     id="path3061" />
+  <g
+     id="g1198"
+     transform="translate(3.2556029,-2.8149031)"
+     style="display:inline">
+    <text
+       xml:space="preserve"
+       style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="49.768463"
+       y="10.649764"
+       id="text15678"
+       transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+         id="tspan15676"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+         x="49.768463"
+         y="10.649764">2</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle15680"
+       cx="-50.731476"
+       cy="-8.3328476"
+       r="1.2760839"
+       transform="rotate(-178.35508)" />
+  </g>
+  <path
+     style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
+     d="M 66.047717,6.789157 C 62.831195,5.9433878 59.42289,5.8384944 55.368578,7.0825755"
+     id="path15682" />
+  <g
+     id="g439"
+     style="display:none">
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 47.995735,79.091605 C 91.791507,88.233864 96.514851,33.879382 49.968723,44.708634"
+       id="path7796" />
+    <g
+       id="g1149"
+       transform="translate(-27.968881,-7.5584371)">
+      <text
+         xml:space="preserve"
+         style="font-size:2.29383px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.115053;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="79.432571"
+         y="53.184124"
+         id="text9342-1"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan9340-2"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.115053;stroke-dasharray:none;stroke-opacity:1"
+           x="79.432571"
+           y="53.184124">3</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448-7"
+         cx="-81.574226"
+         cy="-49.920895"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+       d="m 63.603296,43.623278 c -3.114339,-1.102484 -6.629721,-0.645631 -9.243068,0.45777"
+       id="path9576" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/p_l1.svg b/public/assets/capital-letter/p_l1.svg
new file mode 100755
index 0000000..6155645
--- /dev/null
+++ b/public/assets/capital-letter/p_l1.svg
@@ -0,0 +1,172 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="b.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview32"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false" />
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-35"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-62" />
+    </marker>
+  </defs>
+  <path
+     style="display:inline;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 48.503835,7.2773964 48.071477,78.855459"
+     id="path127" />
+  <g
+     id="g2108"
+     transform="translate(-0.7254407,-4.4774733)">
+    <text
+       xml:space="preserve"
+       style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="48.182404"
+       y="19.336451"
+       id="text9342"
+       transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+         x="48.182404"
+         y="19.336451">1</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="-49.550514"
+       cy="-16.824097"
+       r="1.2760839"
+       transform="rotate(-178.67073)" />
+  </g>
+  <path
+     style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-35);paint-order:stroke fill markers"
+     d="m 48.371278,25.88501 c -0.0082,-2.146546 0.03446,-10.408415 0.03446,-10.408415"
+     id="path13743" />
+  <path
+     style="display:none;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 50.078881,42.699475 C 93.874653,51.841734 95.165897,-3.5730008 48.619769,7.2562447"
+     id="path3061" />
+  <g
+     id="g1198"
+     transform="translate(3.2556029,-2.8149031)"
+     style="display:none">
+    <text
+       xml:space="preserve"
+       style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="49.768463"
+       y="10.649764"
+       id="text15678"
+       transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+         id="tspan15676"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+         x="49.768463"
+         y="10.649764">2</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle15680"
+       cx="-50.731476"
+       cy="-8.3328476"
+       r="1.2760839"
+       transform="rotate(-178.35508)" />
+  </g>
+  <path
+     style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
+     d="M 66.047717,6.789157 C 62.831195,5.9433878 59.42289,5.8384944 55.368578,7.0825755"
+     id="path15682" />
+  <g
+     id="g439"
+     style="display:none">
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 47.995735,79.091605 C 91.791507,88.233864 96.514851,33.879382 49.968723,44.708634"
+       id="path7796" />
+    <g
+       id="g1149"
+       transform="translate(-27.968881,-7.5584371)">
+      <text
+         xml:space="preserve"
+         style="font-size:2.29383px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.115053;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="79.432571"
+         y="53.184124"
+         id="text9342-1"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan9340-2"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.115053;stroke-dasharray:none;stroke-opacity:1"
+           x="79.432571"
+           y="53.184124">3</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448-7"
+         cx="-81.574226"
+         cy="-49.920895"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+       d="m 63.603296,43.623278 c -3.114339,-1.102484 -6.629721,-0.645631 -9.243068,0.45777"
+       id="path9576" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/p_l2.svg b/public/assets/capital-letter/p_l2.svg
new file mode 100755
index 0000000..d4546b0
--- /dev/null
+++ b/public/assets/capital-letter/p_l2.svg
@@ -0,0 +1,176 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="b.svg"
+   inkscape:export-filename="p_l2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview32"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false" />
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-35"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-62" />
+    </marker>
+  </defs>
+  <path
+     style="display:none;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 48.503835,7.2773964 48.071477,78.855459"
+     id="path127" />
+  <g
+     id="g2108"
+     transform="translate(-0.7254407,-4.4774733)"
+     style="display:none">
+    <text
+       xml:space="preserve"
+       style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="48.182404"
+       y="19.336451"
+       id="text9342"
+       transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+         x="48.182404"
+         y="19.336451">1</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="-49.550514"
+       cy="-16.824097"
+       r="1.2760839"
+       transform="rotate(-178.67073)" />
+  </g>
+  <path
+     style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-35);paint-order:stroke fill markers"
+     d="m 48.371278,25.88501 c -0.0082,-2.146546 0.03446,-10.408415 0.03446,-10.408415"
+     id="path13743" />
+  <path
+     style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 50.078881,42.699475 C 93.874653,51.841734 95.165897,-3.5730008 48.619769,7.2562447"
+     id="path3061" />
+  <g
+     id="g1198"
+     transform="translate(3.2556029,-2.8149031)"
+     style="display:inline">
+    <text
+       xml:space="preserve"
+       style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="49.768463"
+       y="10.649764"
+       id="text15678"
+       transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+         id="tspan15676"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+         x="49.768463"
+         y="10.649764">2</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle15680"
+       cx="-50.731476"
+       cy="-8.3328476"
+       r="1.2760839"
+       transform="rotate(-178.35508)" />
+  </g>
+  <path
+     style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
+     d="M 66.047717,6.789157 C 62.831195,5.9433878 59.42289,5.8384944 55.368578,7.0825755"
+     id="path15682" />
+  <g
+     id="g439"
+     style="display:none">
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 47.995735,79.091605 C 91.791507,88.233864 96.514851,33.879382 49.968723,44.708634"
+       id="path7796" />
+    <g
+       id="g1149"
+       transform="translate(-27.968881,-7.5584371)">
+      <text
+         xml:space="preserve"
+         style="font-size:2.29383px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.115053;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="79.432571"
+         y="53.184124"
+         id="text9342-1"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan9340-2"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.115053;stroke-dasharray:none;stroke-opacity:1"
+           x="79.432571"
+           y="53.184124">3</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448-7"
+         cx="-81.574226"
+         cy="-49.920895"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+       d="m 63.603296,43.623278 c -3.114339,-1.102484 -6.629721,-0.645631 -9.243068,0.45777"
+       id="path9576" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/q.svg b/public/assets/capital-letter/q.svg
new file mode 100755
index 0000000..06f2494
--- /dev/null
+++ b/public/assets/capital-letter/q.svg
@@ -0,0 +1,135 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg4061"
+   inkscape:export-filename="o.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview4063"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false" />
+  <defs
+     id="defs4058">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <ellipse
+       style="fill:none;fill-opacity:1;stroke:#009e40;stroke-width:6.26083;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path4236"
+       cx="48.311226"
+       cy="49.748005"
+       rx="15.750484"
+       ry="21.890316" />
+    <g
+       id="g2108"
+       transform="translate(10.906604,18.120039)">
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="48.182404"
+         y="19.336451"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="48.182404"
+           y="19.336451">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-49.550514"
+         cy="-16.824097"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 51.078339,28.029858 c 2.994925,1.236266 6.697855,3.341918 8.115716,6.517013"
+       id="path13743"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="4.2043934"
+       inkscape:transform-center-y="-3.3943832" />
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:4.80727;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 54.804944,61.442454 15.36525,11.365203"
+       id="path548" />
+    <path
+       style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.37143;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
+       d="M 61.770124,66.700111 56.695423,62.764813"
+       id="path9566" />
+    <ellipse
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.108585;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle9572"
+       cx="44.445934"
+       cy="69.560371"
+       transform="matrix(0.98885329,-0.14889318,0.16343647,0.98655386,0,0)"
+       rx="1.0209966"
+       ry="0.95945787" />
+    <text
+       xml:space="preserve"
+       style="font-size:1.72222px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.0959306;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="56.287392"
+       y="60.568928"
+       id="text9650"
+       transform="matrix(0.92052135,-0.05319485,0.0513381,1.0833742,0,0)"><tspan
+         id="tspan9648"
+         style="stroke-width:0.0959306;stroke-dasharray:none"
+         x="56.287392"
+         y="60.568928">2</tspan></text>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/q_l1.svg b/public/assets/capital-letter/q_l1.svg
new file mode 100755
index 0000000..d357d63
--- /dev/null
+++ b/public/assets/capital-letter/q_l1.svg
@@ -0,0 +1,142 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg4061"
+   inkscape:export-filename="q.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview4063"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false" />
+  <defs
+     id="defs4058">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g8232">
+      <ellipse
+         style="fill:none;fill-opacity:1;stroke:#009e40;stroke-width:6.26083;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path4236"
+         cx="48.311226"
+         cy="49.748005"
+         rx="15.750484"
+         ry="21.890316" />
+      <g
+         id="g2108"
+         transform="translate(10.906604,18.120039)">
+        <text
+           xml:space="preserve"
+           style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="48.182404"
+           y="19.336451"
+           id="text9342"
+           transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan9340"
+             style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+             x="48.182404"
+             y="19.336451">1</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="path9448"
+           cx="-49.550514"
+           cy="-16.824097"
+           r="1.2760839"
+           transform="rotate(-178.67073)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 51.078339,28.029858 c 2.994925,1.236266 6.697855,3.341918 8.115716,6.517013"
+         id="path13743"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="4.2043934"
+         inkscape:transform-center-y="-3.3943832" />
+    </g>
+    <g
+       id="g8224"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:4.80727;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 54.804944,61.442454 15.36525,11.365203"
+         id="path548" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.37143;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
+         d="M 61.770124,66.700111 56.695423,62.764813"
+         id="path9566" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.108585;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9572"
+         cx="44.445934"
+         cy="69.560371"
+         transform="matrix(0.98885329,-0.14889318,0.16343647,0.98655386,0,0)"
+         rx="1.0209966"
+         ry="0.95945787" />
+      <text
+         xml:space="preserve"
+         style="font-size:1.72222px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.0959306;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="56.287392"
+         y="60.568928"
+         id="text9650"
+         transform="matrix(0.92052135,-0.05319485,0.0513381,1.0833742,0,0)"><tspan
+           id="tspan9648"
+           style="stroke-width:0.0959306;stroke-dasharray:none"
+           x="56.287392"
+           y="60.568928">2</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/q_l2.svg b/public/assets/capital-letter/q_l2.svg
new file mode 100755
index 0000000..9af6383
--- /dev/null
+++ b/public/assets/capital-letter/q_l2.svg
@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg4061"
+   inkscape:export-filename="q_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview4063"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false" />
+  <defs
+     id="defs4058">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g8232"
+       style="display:none">
+      <ellipse
+         style="fill:none;fill-opacity:1;stroke:#009e40;stroke-width:6.26083;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path4236"
+         cx="48.311226"
+         cy="49.748005"
+         rx="15.750484"
+         ry="21.890316" />
+      <g
+         id="g2108"
+         transform="translate(10.906604,18.120039)">
+        <text
+           xml:space="preserve"
+           style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="48.182404"
+           y="19.336451"
+           id="text9342"
+           transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan9340"
+             style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+             x="48.182404"
+             y="19.336451">1</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="path9448"
+           cx="-49.550514"
+           cy="-16.824097"
+           r="1.2760839"
+           transform="rotate(-178.67073)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 51.078339,28.029858 c 2.994925,1.236266 6.697855,3.341918 8.115716,6.517013"
+         id="path13743"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="4.2043934"
+         inkscape:transform-center-y="-3.3943832" />
+    </g>
+    <g
+       id="g8224"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:4.80727;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 54.804944,61.442454 15.36525,11.365203"
+         id="path548" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.37143;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
+         d="M 61.770124,66.700111 56.695423,62.764813"
+         id="path9566" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.108585;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9572"
+         cx="44.445934"
+         cy="69.560371"
+         transform="matrix(0.98885329,-0.14889318,0.16343647,0.98655386,0,0)"
+         rx="1.0209966"
+         ry="0.95945787" />
+      <text
+         xml:space="preserve"
+         style="font-size:1.72222px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.0959306;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="56.287392"
+         y="60.568928"
+         id="text9650"
+         transform="matrix(0.92052135,-0.05319485,0.0513381,1.0833742,0,0)"><tspan
+           id="tspan9648"
+           style="stroke-width:0.0959306;stroke-dasharray:none"
+           x="56.287392"
+           y="60.568928">2</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/r.svg b/public/assets/capital-letter/r.svg
new file mode 100755
index 0000000..a6b0c18
--- /dev/null
+++ b/public/assets/capital-letter/r.svg
@@ -0,0 +1,238 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="b.svg"
+   inkscape:export-filename="p_l2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview32"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true">
+    <sodipodi:guide
+       position="85.720873,50.809963"
+       orientation="1,0"
+       id="guide1671"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="54.072871,18.619424"
+       orientation="0,-1"
+       id="guide1673"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-35"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-62" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-6" />
+    </marker>
+  </defs>
+  <path
+     style="display:inline;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 48.503835,7.2773964 48.071477,78.855459"
+     id="path127" />
+  <g
+     id="g2108"
+     transform="translate(-0.7254407,-4.4774733)"
+     style="display:inline">
+    <text
+       xml:space="preserve"
+       style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="48.182404"
+       y="19.336451"
+       id="text9342"
+       transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+         x="48.182404"
+         y="19.336451">1</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="-49.550514"
+       cy="-16.824097"
+       r="1.2760839"
+       transform="rotate(-178.67073)" />
+  </g>
+  <path
+     style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-35);paint-order:stroke fill markers"
+     d="m 48.371278,25.88501 c -0.0082,-2.146546 0.03446,-10.408415 0.03446,-10.408415"
+     id="path13743" />
+  <path
+     style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 50.078881,42.699475 C 93.874653,51.841734 95.165897,-3.5730008 48.619769,7.2562447"
+     id="path3061" />
+  <path
+     style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="m 64.905674,43.301322 18.838674,35.57731"
+     id="path1108" />
+  <path
+     style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.489119;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:normal"
+     d="M 71.506401,54.508662 66.630224,46.04023"
+     id="path9576-7"
+     sodipodi:nodetypes="cc"
+     inkscape:transform-center-x="-1.3397517"
+     inkscape:transform-center-y="4.6405744" />
+  <ellipse
+     style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142347;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+     id="circle9582"
+     cx="-50.322662"
+     cy="60.497169"
+     transform="matrix(-0.10482327,-0.99449087,0.99627769,-0.08620189,0,0)"
+     rx="1.2555509"
+     ry="1.3407919" />
+  <text
+     xml:space="preserve"
+     style="font-size:2.31839px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142334;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+     x="60.284885"
+     y="49.488743"
+     id="text9714"
+     transform="matrix(1.0324615,-0.03671877,0.05488879,0.96660704,0,0)"><tspan
+       sodipodi:role="line"
+       id="tspan9712"
+       style="stroke:#f9f6f6;stroke-width:0.142334;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       x="60.284885"
+       y="49.488743">3</tspan></text>
+  <g
+     id="g1198"
+     transform="translate(3.2556029,-2.8149031)"
+     style="display:inline">
+    <text
+       xml:space="preserve"
+       style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="49.768463"
+       y="10.649764"
+       id="text15678"
+       transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+         id="tspan15676"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+         x="49.768463"
+         y="10.649764">2</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle15680"
+       cx="-50.731476"
+       cy="-8.3328476"
+       r="1.2760839"
+       transform="rotate(-178.35508)" />
+  </g>
+  <path
+     style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
+     d="M 66.047717,6.789157 C 62.831195,5.9433878 59.42289,5.8384944 55.368578,7.0825755"
+     id="path15682" />
+  <g
+     id="g439"
+     style="display:none">
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 47.995735,79.091605 C 91.791507,88.233864 96.514851,33.879382 49.968723,44.708634"
+       id="path7796" />
+    <g
+       id="g1149"
+       transform="translate(-27.968881,-7.5584371)">
+      <text
+         xml:space="preserve"
+         style="font-size:2.29383px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.115053;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="79.432571"
+         y="53.184124"
+         id="text9342-1"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan9340-2"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.115053;stroke-dasharray:none;stroke-opacity:1"
+           x="79.432571"
+           y="53.184124">3</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448-7"
+         cx="-81.574226"
+         cy="-49.920895"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+       d="m 63.603296,43.623278 c -3.114339,-1.102484 -6.629721,-0.645631 -9.243068,0.45777"
+       id="path9576" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/r_l1.svg b/public/assets/capital-letter/r_l1.svg
new file mode 100755
index 0000000..aeb6b26
--- /dev/null
+++ b/public/assets/capital-letter/r_l1.svg
@@ -0,0 +1,219 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="b.svg"
+   inkscape:export-filename="r_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview32"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true">
+    <sodipodi:guide
+       position="85.720873,50.809963"
+       orientation="1,0"
+       id="guide1671"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="54.072871,18.619424"
+       orientation="0,-1"
+       id="guide1673"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-35"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-62" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-6" />
+    </marker>
+  </defs>
+  <path
+     style="display:inline;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 48.503835,7.2773964 48.071477,78.855459"
+     id="path127" />
+  <g
+     id="g2108"
+     transform="translate(-0.7254407,-4.4774733)"
+     style="display:inline">
+    <text
+       xml:space="preserve"
+       style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="48.182404"
+       y="19.336451"
+       id="text9342"
+       transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+         x="48.182404"
+         y="19.336451">1</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="-49.550514"
+       cy="-16.824097"
+       r="1.2760839"
+       transform="rotate(-178.67073)" />
+  </g>
+  <path
+     style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-35);paint-order:stroke fill markers"
+     d="m 48.371278,25.88501 c -0.0082,-2.146546 0.03446,-10.408415 0.03446,-10.408415"
+     id="path13743" />
+  <path
+     style="display:none;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 50.078881,42.699475 C 93.874653,51.841734 95.165897,-3.5730008 48.619769,7.2562447"
+     id="path3061" />
+  <g
+     id="g2571"
+     style="display:none">
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 64.905674,43.301322 18.838674,35.57731"
+       id="path1108" />
+    <path
+       style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.489119;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:normal"
+       d="M 71.506401,54.508662 66.630224,46.04023"
+       id="path9576-7"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="-1.3397517"
+       inkscape:transform-center-y="4.6405744" />
+    <ellipse
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142347;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+       id="circle9582"
+       cx="-50.322662"
+       cy="60.497169"
+       transform="matrix(-0.10482327,-0.99449087,0.99627769,-0.08620189,0,0)"
+       rx="1.2555509"
+       ry="1.3407919" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.31839px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142334;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+       x="60.284885"
+       y="49.488743"
+       id="text9714"
+       transform="matrix(1.0324615,-0.03671877,0.05488879,0.96660704,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan9712"
+         style="stroke:#f9f6f6;stroke-width:0.142334;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+         x="60.284885"
+         y="49.488743">3</tspan></text>
+  </g>
+  <path
+     style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
+     d="M 66.047717,6.789157 C 62.831195,5.9433878 59.42289,5.8384944 55.368578,7.0825755"
+     id="path15682" />
+  <g
+     id="g439"
+     style="display:none">
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 47.995735,79.091605 C 91.791507,88.233864 96.514851,33.879382 49.968723,44.708634"
+       id="path7796" />
+    <g
+       id="g1149"
+       transform="translate(-27.968881,-7.5584371)">
+      <text
+         xml:space="preserve"
+         style="font-size:2.29383px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.115053;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="79.432571"
+         y="53.184124"
+         id="text9342-1"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan9340-2"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.115053;stroke-dasharray:none;stroke-opacity:1"
+           x="79.432571"
+           y="53.184124">3</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448-7"
+         cx="-81.574226"
+         cy="-49.920895"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+       d="m 63.603296,43.623278 c -3.114339,-1.102484 -6.629721,-0.645631 -9.243068,0.45777"
+       id="path9576" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/r_l2.svg b/public/assets/capital-letter/r_l2.svg
new file mode 100755
index 0000000..b610ca4
--- /dev/null
+++ b/public/assets/capital-letter/r_l2.svg
@@ -0,0 +1,226 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="r.svg"
+   inkscape:export-filename="p_l2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview32"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true">
+    <sodipodi:guide
+       position="85.720873,50.809963"
+       orientation="1,0"
+       id="guide1671"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="54.072871,18.619424"
+       orientation="0,-1"
+       id="guide1673"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-35"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-62" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-6" />
+    </marker>
+  </defs>
+  <path
+     style="display:none;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 48.503835,7.2773964 48.071477,78.855459"
+     id="path127" />
+  <g
+     id="g2108"
+     transform="translate(-0.7254407,-4.4774733)"
+     style="display:none">
+    <text
+       xml:space="preserve"
+       style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="48.182404"
+       y="19.336451"
+       id="text9342"
+       transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+         x="48.182404"
+         y="19.336451">1</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="-49.550514"
+       cy="-16.824097"
+       r="1.2760839"
+       transform="rotate(-178.67073)" />
+  </g>
+  <path
+     style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-35);paint-order:stroke fill markers"
+     d="m 48.371278,25.88501 c -0.0082,-2.146546 0.03446,-10.408415 0.03446,-10.408415"
+     id="path13743" />
+  <path
+     style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 50.078881,42.699475 C 93.874653,51.841734 95.165897,-3.5730008 48.619769,7.2562447"
+     id="path3061" />
+  <path
+     style="display:none;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="m 64.905674,43.301322 18.838674,35.57731"
+     id="path1108" />
+  <path
+     style="display:none;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.489119;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:normal"
+     d="M 71.506401,54.508662 66.630224,46.04023"
+     id="path9576-7"
+     sodipodi:nodetypes="cc"
+     inkscape:transform-center-x="-1.3397517"
+     inkscape:transform-center-y="4.6405744" />
+  <ellipse
+     style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142347;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+     id="circle9582"
+     cx="-50.322662"
+     cy="60.497169"
+     transform="matrix(-0.10482327,-0.99449087,0.99627769,-0.08620189,0,0)"
+     rx="1.2555509"
+     ry="1.3407919" />
+  <g
+     id="g1198"
+     transform="translate(3.2556029,-2.8149031)"
+     style="display:inline">
+    <text
+       xml:space="preserve"
+       style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="49.768463"
+       y="10.649764"
+       id="text15678"
+       transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+         id="tspan15676"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+         x="49.768463"
+         y="10.649764">2</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle15680"
+       cx="-50.731476"
+       cy="-8.3328476"
+       r="1.2760839"
+       transform="rotate(-178.35508)" />
+  </g>
+  <path
+     style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
+     d="M 66.047717,6.789157 C 62.831195,5.9433878 59.42289,5.8384944 55.368578,7.0825755"
+     id="path15682" />
+  <g
+     id="g439"
+     style="display:none">
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 47.995735,79.091605 C 91.791507,88.233864 96.514851,33.879382 49.968723,44.708634"
+       id="path7796" />
+    <g
+       id="g1149"
+       transform="translate(-27.968881,-7.5584371)">
+      <text
+         xml:space="preserve"
+         style="font-size:2.29383px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.115053;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="79.432571"
+         y="53.184124"
+         id="text9342-1"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan9340-2"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.115053;stroke-dasharray:none;stroke-opacity:1"
+           x="79.432571"
+           y="53.184124">3</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448-7"
+         cx="-81.574226"
+         cy="-49.920895"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+       d="m 63.603296,43.623278 c -3.114339,-1.102484 -6.629721,-0.645631 -9.243068,0.45777"
+       id="path9576" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/r_l3.svg b/public/assets/capital-letter/r_l3.svg
new file mode 100755
index 0000000..d46e7d1
--- /dev/null
+++ b/public/assets/capital-letter/r_l3.svg
@@ -0,0 +1,242 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="b.svg"
+   inkscape:export-filename="r_l2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview32"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true">
+    <sodipodi:guide
+       position="85.720873,50.809963"
+       orientation="1,0"
+       id="guide1671"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="54.072871,18.619424"
+       orientation="0,-1"
+       id="guide1673"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-35"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-62" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-6" />
+    </marker>
+  </defs>
+  <path
+     style="display:none;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 48.503835,7.2773964 48.071477,78.855459"
+     id="path127" />
+  <g
+     id="g2108"
+     transform="translate(-0.7254407,-4.4774733)"
+     style="display:none">
+    <text
+       xml:space="preserve"
+       style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="48.182404"
+       y="19.336451"
+       id="text9342"
+       transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+         x="48.182404"
+         y="19.336451">1</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="-49.550514"
+       cy="-16.824097"
+       r="1.2760839"
+       transform="rotate(-178.67073)" />
+  </g>
+  <path
+     style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-35);paint-order:stroke fill markers"
+     d="m 48.371278,25.88501 c -0.0082,-2.146546 0.03446,-10.408415 0.03446,-10.408415"
+     id="path13743" />
+  <path
+     style="display:none;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 50.078881,42.699475 C 93.874653,51.841734 95.165897,-3.5730008 48.619769,7.2562447"
+     id="path3061" />
+  <g
+     id="g2571"
+     style="display:inline">
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 64.905674,43.301322 18.838674,35.57731"
+       id="path1108" />
+    <path
+       style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.489119;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:normal"
+       d="M 71.506401,54.508662 66.630224,46.04023"
+       id="path9576-7"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="-1.3397517"
+       inkscape:transform-center-y="4.6405744" />
+    <ellipse
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142347;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+       id="circle9582"
+       cx="-50.322662"
+       cy="60.497169"
+       transform="matrix(-0.10482327,-0.99449087,0.99627769,-0.08620189,0,0)"
+       rx="1.2555509"
+       ry="1.3407919" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.31839px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142334;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+       x="60.284885"
+       y="49.488743"
+       id="text9714"
+       transform="matrix(1.0324615,-0.03671877,0.05488879,0.96660704,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan9712"
+         style="stroke:#f9f6f6;stroke-width:0.142334;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+         x="60.284885"
+         y="49.488743">3</tspan></text>
+  </g>
+  <g
+     id="g1198"
+     transform="translate(3.2556029,-2.8149031)"
+     style="display:none">
+    <text
+       xml:space="preserve"
+       style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="49.768463"
+       y="10.649764"
+       id="text15678"
+       transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+         id="tspan15676"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+         x="49.768463"
+         y="10.649764">2</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle15680"
+       cx="-50.731476"
+       cy="-8.3328476"
+       r="1.2760839"
+       transform="rotate(-178.35508)" />
+  </g>
+  <path
+     style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
+     d="M 66.047717,6.789157 C 62.831195,5.9433878 59.42289,5.8384944 55.368578,7.0825755"
+     id="path15682" />
+  <g
+     id="g439"
+     style="display:none">
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 47.995735,79.091605 C 91.791507,88.233864 96.514851,33.879382 49.968723,44.708634"
+       id="path7796" />
+    <g
+       id="g1149"
+       transform="translate(-27.968881,-7.5584371)">
+      <text
+         xml:space="preserve"
+         style="font-size:2.29383px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.115053;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="79.432571"
+         y="53.184124"
+         id="text9342-1"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan9340-2"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.115053;stroke-dasharray:none;stroke-opacity:1"
+           x="79.432571"
+           y="53.184124">3</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448-7"
+         cx="-81.574226"
+         cy="-49.920895"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+       d="m 63.603296,43.623278 c -3.114339,-1.102484 -6.629721,-0.645631 -9.243068,0.45777"
+       id="path9576" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/s.svg b/public/assets/capital-letter/s.svg
new file mode 100755
index 0000000..530a148
--- /dev/null
+++ b/public/assets/capital-letter/s.svg
@@ -0,0 +1,291 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="r_l2.svg"
+   inkscape:export-filename="r_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview32"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4630334"
+     inkscape:cx="157.54938"
+     inkscape:cy="208.47098"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg5">
+    <sodipodi:guide
+       position="74.94705,112.6059"
+       orientation="1,0"
+       id="guide1671"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="117.23645,89.925671"
+       orientation="0,-1"
+       id="guide1673"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="50.053999,103.69745"
+       orientation="1,0"
+       id="guide345"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="25.012987,100.89064"
+       orientation="1,0"
+       id="guide347"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-13.951606,9.9294676"
+       orientation="0,-1"
+       id="guide349"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-5.0011988,50.06244"
+       orientation="0,-1"
+       id="guide351"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-35"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-62" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-6" />
+    </marker>
+  </defs>
+  <path
+     style="display:none;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.50539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 48.503835,7.2773964 48.071477,78.855459"
+     id="path127" />
+  <g
+     id="g2108"
+     transform="translate(-0.7254407,-4.4774733)"
+     style="display:none">
+    <text
+       xml:space="preserve"
+       style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="48.182404"
+       y="19.336451"
+       id="text9342"
+       transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+         x="48.182404"
+         y="19.336451">1</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="-49.550514"
+       cy="-16.824097"
+       r="1.2760839"
+       transform="rotate(-178.67073)" />
+  </g>
+  <path
+     style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-35);paint-order:stroke fill markers"
+     d="m 48.371278,25.88501 c -0.0082,-2.146546 0.03446,-10.408415 0.03446,-10.408415"
+     id="path13743" />
+  <g
+     id="g2571"
+     style="display:none">
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 64.905674,43.301322 18.838674,35.57731"
+       id="path1108" />
+    <path
+       style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.489119;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:normal"
+       d="M 71.506401,54.508662 66.630224,46.04023"
+       id="path9576-7"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="-1.3397517"
+       inkscape:transform-center-y="4.6405744" />
+    <ellipse
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142347;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+       id="circle9582"
+       cx="-50.322662"
+       cy="60.497169"
+       transform="matrix(-0.10482327,-0.99449087,0.99627769,-0.08620189,0,0)"
+       rx="1.2555509"
+       ry="1.3407919" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.31839px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142334;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+       x="60.284885"
+       y="49.488743"
+       id="text9714"
+       transform="matrix(1.0324615,-0.03671877,0.05488879,0.96660704,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan9712"
+         style="stroke:#f9f6f6;stroke-width:0.142334;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+         x="60.284885"
+         y="49.488743">3</tspan></text>
+  </g>
+  <g
+     id="g439"
+     style="display:none">
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 47.995735,79.091605 C 91.791507,88.233864 96.514851,33.879382 49.968723,44.708634"
+       id="path7796" />
+    <g
+       id="g1149"
+       transform="translate(-27.968881,-7.5584371)">
+      <text
+         xml:space="preserve"
+         style="font-size:2.29383px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.115053;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="79.432571"
+         y="53.184124"
+         id="text9342-1"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan9340-2"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.115053;stroke-dasharray:none;stroke-opacity:1"
+           x="79.432571"
+           y="53.184124">3</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448-7"
+         cx="-81.574226"
+         cy="-49.920895"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+       d="m 63.603296,43.623278 c -3.114339,-1.102484 -6.629721,-0.645631 -9.243068,0.45777"
+       id="path9576" />
+  </g>
+  <g
+     id="g3129"
+     transform="matrix(0.73662732,0,0,0.74604247,6.6854179,2.1682713)">
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 70.914766,64.564687 C 83.12471,97.252847 21.392419,99.725417 28.656741,65.493424"
+       id="path353"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 70.126883,31.912499 C 76.335494,3.3607334 19.731851,3.9445783 29.325533,37.331171"
+       id="path3061"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.648976;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
+       d="m 43.745024,12.478102 c 4.366553,-1.133674 8.993459,-1.274275 14.497344,0.393301"
+       id="path15682" />
+    <text
+       xml:space="preserve"
+       style="font-size:3.12347px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.156667;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="59.988121"
+       y="15.338692"
+       id="text15678"
+       transform="matrix(1.0059743,-0.0021499,0.00217908,0.99405657,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan3265"
+         x="59.988121"
+         y="15.338692"><tspan
+           id="tspan15676"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.156667;stroke-dasharray:none;stroke-opacity:1"
+           x="59.988121"
+           y="15.338692">1</tspan></tspan><tspan
+         sodipodi:role="line"
+         id="tspan3267"
+         x="59.988121"
+         y="19.243029" /></text>
+    <ellipse
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.188852;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle15680"
+       cx="-61.713432"
+       cy="-12.355166"
+       transform="matrix(-0.99959825,-0.02834335,0.02907192,-0.99957732,0,0)"
+       rx="1.7323153"
+       ry="1.710489" />
+    <path
+       style="display:inline;fill:none;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke fill markers"
+       d="M 29.522658,37.935831 C 40.132363,57.954218 61.216726,46.667725 70.537782,63.98682"
+       id="path529"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/t.svg b/public/assets/capital-letter/t.svg
new file mode 100755
index 0000000..bc04af8
--- /dev/null
+++ b/public/assets/capital-letter/t.svg
@@ -0,0 +1,235 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="i_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="i_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="69.991574,94.378716"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="37.721485,113.47323"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="36.037285,19.413344"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="54.122374,93.823341"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.786217,21.819752"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="29.968754,100.36547"
+       orientation="1,0"
+       id="guide4246"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 38.985247,19.717732 c -0.01675,-2.146498 -0.007,-10.4084704 -0.007,-10.4084704"
+       id="path6265"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g14176"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g14279"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.47293;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 39.142669,73.987028 21.401647,0.110198"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391436;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 48.688134,73.955975 41.183058,73.814371"
+         id="path9576"
+         sodipodi:nodetypes="cc" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.11391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-72.913704"
+         cy="40.918648"
+         transform="matrix(0.01563487,-0.99987777,0.99974017,0.02279479,0,0)"
+         rx="1.140859"
+         ry="0.94491148" />
+      <text
+         xml:space="preserve"
+         style="font-size:1.85538px;display:none;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.113908;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="43.211548"
+         y="67.832787"
+         id="text9714"
+         transform="scale(0.91001737,1.0988801)"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.113908;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="0"
+           y="0">3</tspan></text>
+    </g>
+    <g
+       id="g3870"
+       transform="translate(0,7.4083337)">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 50.078477,7.5286417 c -0.04579,0.3074089 -0.03422,65.9377763 -0.03422,65.9377763"
+         id="path127"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="49.168594"
+         y="14.241333"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="49.168594"
+           y="14.241333">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-50.37851"
+         cy="-11.698981"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 50.097748,25.009402 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 31.492526,14.646476 36.989722,0.113523"
+       id="path548" />
+    <ellipse
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.104558;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle13613"
+       cx="13.690505"
+       cy="-38.537907"
+       transform="matrix(-0.02107702,0.99977785,-0.99966338,-0.02594463,0,0)"
+       rx="1.2327613"
+       ry="1.1111807" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.41325px;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.114;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+       x="37.391117"
+       y="15.959682"
+       id="text13723"
+       transform="rotate(-0.68318798)"><tspan
+         sodipodi:role="line"
+         id="tspan13721"
+         style="fill:#ffffff;fill-opacity:1;stroke-width:0.114;stroke-dasharray:none"
+         x="37.391117"
+         y="15.959682">2</tspan></text>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 51.113705,14.621666 c -2.146501,0.01635 -10.408471,0.0051 -10.408471,0.0051"
+       id="path13749"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/t_l1.svg b/public/assets/capital-letter/t_l1.svg
new file mode 100755
index 0000000..a663bc6
--- /dev/null
+++ b/public/assets/capital-letter/t_l1.svg
@@ -0,0 +1,223 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="t.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="i_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="69.991574,94.378716"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="37.721485,113.47323"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="36.037285,19.413344"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="54.122374,93.823341"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.786217,21.819752"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="29.968754,100.36547"
+       orientation="1,0"
+       id="guide4246"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 38.985247,19.717732 c -0.01675,-2.146498 -0.007,-10.4084704 -0.007,-10.4084704"
+       id="path6265"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g14176"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g14279"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.47293;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 39.142669,73.987028 21.401647,0.110198"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391436;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 48.688134,73.955975 41.183058,73.814371"
+         id="path9576"
+         sodipodi:nodetypes="cc" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.11391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-72.913704"
+         cy="40.918648"
+         transform="matrix(0.01563487,-0.99987777,0.99974017,0.02279479,0,0)"
+         rx="1.140859"
+         ry="0.94491148" />
+      <text
+         xml:space="preserve"
+         style="font-size:1.85538px;display:none;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.113908;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="43.211548"
+         y="67.832787"
+         id="text9714"
+         transform="scale(0.91001737,1.0988801)"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.113908;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="0"
+           y="0">3</tspan></text>
+    </g>
+    <g
+       id="g3870"
+       transform="translate(0,7.4083337)">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 50.078477,7.5286417 c -0.04579,0.3074089 -0.03422,65.9377763 -0.03422,65.9377763"
+         id="path127"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="49.168594"
+         y="14.241333"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="49.168594"
+           y="14.241333">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-50.37851"
+         cy="-11.698981"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 50.097748,25.009402 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 31.492526,14.646476 36.989722,0.113523"
+       id="path548" />
+    <ellipse
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.104558;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle13613"
+       cx="13.690505"
+       cy="-38.537907"
+       transform="matrix(-0.02107702,0.99977785,-0.99966338,-0.02594463,0,0)"
+       rx="1.2327613"
+       ry="1.1111807" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 51.113705,14.621666 c -2.146501,0.01635 -10.408471,0.0051 -10.408471,0.0051"
+       id="path13749"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/t_l2.svg b/public/assets/capital-letter/t_l2.svg
new file mode 100755
index 0000000..6847874
--- /dev/null
+++ b/public/assets/capital-letter/t_l2.svg
@@ -0,0 +1,236 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="t_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="i_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="69.991574,94.378716"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="37.721485,113.47323"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="36.037285,19.413344"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="54.122374,93.823341"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.786217,21.819752"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="29.968754,100.36547"
+       orientation="1,0"
+       id="guide4246"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 38.985247,19.717732 c -0.01675,-2.146498 -0.007,-10.4084704 -0.007,-10.4084704"
+       id="path6265"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g14176"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g14279"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.47293;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 39.142669,73.987028 21.401647,0.110198"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391436;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 48.688134,73.955975 41.183058,73.814371"
+         id="path9576"
+         sodipodi:nodetypes="cc" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.11391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-72.913704"
+         cy="40.918648"
+         transform="matrix(0.01563487,-0.99987777,0.99974017,0.02279479,0,0)"
+         rx="1.140859"
+         ry="0.94491148" />
+      <text
+         xml:space="preserve"
+         style="font-size:1.85538px;display:none;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.113908;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="43.211548"
+         y="67.832787"
+         id="text9714"
+         transform="scale(0.91001737,1.0988801)"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.113908;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="0"
+           y="0">3</tspan></text>
+    </g>
+    <g
+       id="g3870"
+       transform="translate(0,7.4083337)"
+       style="display:none">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 50.078477,7.5286417 c -0.04579,0.3074089 -0.03422,65.9377763 -0.03422,65.9377763"
+         id="path127"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="49.168594"
+         y="14.241333"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="49.168594"
+           y="14.241333">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-50.37851"
+         cy="-11.698981"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 50.097748,25.009402 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 31.492526,14.646476 36.989722,0.113523"
+       id="path548" />
+    <ellipse
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.104558;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle13613"
+       cx="13.690505"
+       cy="-38.537907"
+       transform="matrix(-0.02107702,0.99977785,-0.99966338,-0.02594463,0,0)"
+       rx="1.2327613"
+       ry="1.1111807" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.41325px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.114;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+       x="37.391117"
+       y="15.959682"
+       id="text13723"
+       transform="rotate(-0.68318798)"><tspan
+         sodipodi:role="line"
+         id="tspan13721"
+         style="fill:#ffffff;fill-opacity:1;stroke-width:0.114;stroke-dasharray:none"
+         x="37.391117"
+         y="15.959682">2</tspan></text>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 51.113705,14.621666 c -2.146501,0.01635 -10.408471,0.0051 -10.408471,0.0051"
+       id="path13749"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/u.svg b/public/assets/capital-letter/u.svg
new file mode 100755
index 0000000..285f2ea
--- /dev/null
+++ b/public/assets/capital-letter/u.svg
@@ -0,0 +1,219 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="t.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="t_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="69.991574,94.378716"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="37.721485,113.47323"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="36.037285,19.413344"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="49.802782,91.482774"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.786217,21.819752"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="29.968754,100.36547"
+       orientation="1,0"
+       id="guide4246"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 38.985247,19.717732 c -0.01675,-2.146498 -0.007,-10.4084704 -0.007,-10.4084704"
+       id="path6265"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g14176"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g14279"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.47293;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 39.142669,73.987028 21.401647,0.110198"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391436;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 48.688134,73.955975 41.183058,73.814371"
+         id="path9576"
+         sodipodi:nodetypes="cc" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.11391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-72.913704"
+         cy="40.918648"
+         transform="matrix(0.01563487,-0.99987777,0.99974017,0.02279479,0,0)"
+         rx="1.140859"
+         ry="0.94491148" />
+      <text
+         xml:space="preserve"
+         style="font-size:1.85538px;display:none;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.113908;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="43.211548"
+         y="67.832787"
+         id="text9714"
+         transform="scale(0.91001737,1.0988801)"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.113908;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="0"
+           y="0">3</tspan></text>
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 32.268708,11.329463 C 32.026705,41.28471 29.19412,58.328236 50.141441,58.918939 70.369093,58.119536 66.682655,41.503576 67.029392,11.153713"
+       id="path127"
+       sodipodi:nodetypes="ccc" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="31.162289"
+       y="15.161217"
+       id="text9342"
+       transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+         x="31.162289"
+         y="15.161217">1</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="-32.416225"
+       cy="-13.174402"
+       r="1.2760839"
+       transform="rotate(-178.67073)" />
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 32.106076,26.596902 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+       id="path13743"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 31.492526,14.646476 36.989722,0.113523"
+       id="path548" />
+    <ellipse
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.104558;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle13613"
+       cx="13.690505"
+       cy="-38.537907"
+       transform="matrix(-0.02107702,0.99977785,-0.99966338,-0.02594463,0,0)"
+       rx="1.2327613"
+       ry="1.1111807" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 51.113705,14.621666 c -2.146501,0.01635 -10.408471,0.0051 -10.408471,0.0051"
+       id="path13749"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/v.svg b/public/assets/capital-letter/v.svg
new file mode 100755
index 0000000..e9d2007
--- /dev/null
+++ b/public/assets/capital-letter/v.svg
@@ -0,0 +1,225 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="u.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="t_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="69.991574,94.378716"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="37.721485,113.47323"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="54.806926,91.525512"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="45.55631,94.806977"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.786217,21.819752"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="29.968754,100.36547"
+       orientation="1,0"
+       id="guide4246"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="47.818433,99.877236"
+       orientation="0,-1"
+       id="guide2642"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="49.047602,46.21858"
+       orientation="0,-1"
+       id="guide2644"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 38.985247,19.717732 c -0.01675,-2.146498 -0.007,-10.4084704 -0.007,-10.4084704"
+       id="path6265"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g14176"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 32.939949,11.338033 c 0.05549,0.225147 13.456967,33.636249 14.037176,34.997886"
+       id="path127"
+       sodipodi:nodetypes="cc" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="32.260372"
+       y="13.081046"
+       id="text9342"
+       transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+         x="32.260372"
+         y="13.081046">1</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="-33.425175"
+       cy="-11.033753"
+       r="1.2760839"
+       transform="rotate(-178.67073)" />
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 37.780048,23.234805 C 36.971556,21.246319 33.928605,13.565126 33.928605,13.565126"
+       id="path13743"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.63206;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 60.814146,11.295417 46.830701,46.41803"
+       id="path548" />
+    <ellipse
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.104558;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle13613"
+       cx="13.690505"
+       cy="-38.537907"
+       transform="matrix(-0.02107702,0.99977785,-0.99966338,-0.02594463,0,0)"
+       rx="1.2327613"
+       ry="1.1111807" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 51.113705,14.621666 c -2.146501,0.01635 -10.408471,0.0051 -10.408471,0.0051"
+       id="path13749"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 55.996317,23.234805 c 0.808492,-1.988486 3.851443,-9.669679 3.851443,-9.669679"
+       id="path2647"
+       sodipodi:nodetypes="cc" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.40728px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.120744;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="60.986122"
+       y="12.926502"
+       id="text2653"
+       transform="matrix(0.98266721,-0.00780251,0.00754663,1.0175786,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan2651"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.120744;stroke-dasharray:none;stroke-opacity:1"
+         x="60.986122"
+         y="12.926502">2</tspan><tspan
+         sodipodi:role="line"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.120744;stroke-dasharray:none;stroke-opacity:1"
+         x="60.986122"
+         y="15.935602"
+         id="tspan2758" /></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle2655"
+       cx="-60.934528"
+       cy="-10.395414"
+       r="1.2760839"
+       transform="rotate(-178.67073)" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/v_l1.svg b/public/assets/capital-letter/v_l1.svg
new file mode 100755
index 0000000..90d47f0
--- /dev/null
+++ b/public/assets/capital-letter/v_l1.svg
@@ -0,0 +1,229 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="v.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="t_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="69.991574,94.378716"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="37.721485,113.47323"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="54.806926,91.525512"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="45.55631,94.806977"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.786217,21.819752"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="29.968754,100.36547"
+       orientation="1,0"
+       id="guide4246"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="47.818433,99.877236"
+       orientation="0,-1"
+       id="guide2642"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="49.047602,46.21858"
+       orientation="0,-1"
+       id="guide2644"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 38.985247,19.717732 c -0.01675,-2.146498 -0.007,-10.4084704 -0.007,-10.4084704"
+       id="path6265"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g14176"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 32.939949,11.338033 c 0.05549,0.225147 13.456967,33.636249 14.037176,34.997886"
+       id="path127"
+       sodipodi:nodetypes="cc" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="32.260372"
+       y="13.081046"
+       id="text9342"
+       transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+         x="32.260372"
+         y="13.081046">1</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="-33.425175"
+       cy="-11.033753"
+       r="1.2760839"
+       transform="rotate(-178.67073)" />
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 37.780048,23.234805 C 36.971556,21.246319 33.928605,13.565126 33.928605,13.565126"
+       id="path13743"
+       sodipodi:nodetypes="cc" />
+    <ellipse
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.104558;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle13613"
+       cx="13.690505"
+       cy="-38.537907"
+       transform="matrix(-0.02107702,0.99977785,-0.99966338,-0.02594463,0,0)"
+       rx="1.2327613"
+       ry="1.1111807" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 51.113705,14.621666 c -2.146501,0.01635 -10.408471,0.0051 -10.408471,0.0051"
+       id="path13749"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g2939"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.63206;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 60.814146,11.295417 46.830701,46.41803"
+         id="path548" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 55.996317,23.234805 c 0.808492,-1.988486 3.851443,-9.669679 3.851443,-9.669679"
+         id="path2647"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.40728px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.120744;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="60.986122"
+         y="12.926502"
+         id="text2653"
+         transform="matrix(0.98266721,-0.00780251,0.00754663,1.0175786,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan2651"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.120744;stroke-dasharray:none;stroke-opacity:1"
+           x="60.986122"
+           y="12.926502">2</tspan><tspan
+           sodipodi:role="line"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.120744;stroke-dasharray:none;stroke-opacity:1"
+           x="60.986122"
+           y="15.935602"
+           id="tspan2758" /></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle2655"
+         cx="-60.934528"
+         cy="-10.395414"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/v_l2.svg b/public/assets/capital-letter/v_l2.svg
new file mode 100755
index 0000000..49db3e9
--- /dev/null
+++ b/public/assets/capital-letter/v_l2.svg
@@ -0,0 +1,233 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="v_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="t_l1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="69.991574,94.378716"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="37.721485,113.47323"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="54.806926,91.525512"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="45.55631,94.806977"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.786217,21.819752"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="29.968754,100.36547"
+       orientation="1,0"
+       id="guide4246"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="47.818433,99.877236"
+       orientation="0,-1"
+       id="guide2642"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="49.047602,46.21858"
+       orientation="0,-1"
+       id="guide2644"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 38.985247,19.717732 c -0.01675,-2.146498 -0.007,-10.4084704 -0.007,-10.4084704"
+       id="path6265"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g14176"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g3072"
+       style="display:none">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 32.939949,11.338033 c 0.05549,0.225147 13.456967,33.636249 14.037176,34.997886"
+         id="path127"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="32.260372"
+         y="13.081046"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="32.260372"
+           y="13.081046">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-33.425175"
+         cy="-11.033753"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 37.780048,23.234805 C 36.971556,21.246319 33.928605,13.565126 33.928605,13.565126"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <ellipse
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.104558;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle13613"
+       cx="13.690505"
+       cy="-38.537907"
+       transform="matrix(-0.02107702,0.99977785,-0.99966338,-0.02594463,0,0)"
+       rx="1.2327613"
+       ry="1.1111807" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 51.113705,14.621666 c -2.146501,0.01635 -10.408471,0.0051 -10.408471,0.0051"
+       id="path13749"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g2939"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.63206;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 60.814146,11.295417 46.830701,46.41803"
+         id="path548" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 55.996317,23.234805 c 0.808492,-1.988486 3.851443,-9.669679 3.851443,-9.669679"
+         id="path2647"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.40728px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.120744;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="60.986122"
+         y="12.926502"
+         id="text2653"
+         transform="matrix(0.98266721,-0.00780251,0.00754663,1.0175786,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan2651"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.120744;stroke-dasharray:none;stroke-opacity:1"
+           x="60.986122"
+           y="12.926502">2</tspan><tspan
+           sodipodi:role="line"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.120744;stroke-dasharray:none;stroke-opacity:1"
+           x="60.986122"
+           y="15.935602"
+           id="tspan2758" /></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle2655"
+         cx="-60.934528"
+         cy="-10.395414"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/w.svg b/public/assets/capital-letter/w.svg
new file mode 100755
index 0000000..8c3abe2
--- /dev/null
+++ b/public/assets/capital-letter/w.svg
@@ -0,0 +1,280 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="l_l2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="w.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="37.485212,-6.7950955"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="24.949927,104.14192"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="45.843238,25.664552"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="58.298235,90.013389"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="75.035526,115.88828"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.667846,-5.37532"
+       orientation="1,0"
+       id="guide1929"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="9.3359693,-23.144284"
+       orientation="0,-1"
+       id="guide2737"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 36.528589,76.633785 C 36.273654,77.773031 26.129673,9.38668 26.129673,9.38668"
+       id="path127"
+       sodipodi:nodetypes="cc" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="25.600216"
+       y="12.34782"
+       id="text9342"
+       transform="matrix(0.99960352,0.00321601,-0.00321854,1.0003863,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+         x="25.600216"
+         y="12.34782">1</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="-27.39192"
+       cy="-8.6904173"
+       r="1.2760839"
+       transform="rotate(-174.16582)" />
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 28.567521,23.594526 C 28.189417,21.481525 26.66088,13.362173 26.66088,13.362173"
+       id="path13743"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 36.502137,76.727184 50.890169,9.2914059"
+       id="path1108"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g21551"
+       transform="rotate(-34.110499,150.22437,76.26651)">
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="54.113926"
+         y="-23.497944"
+         id="text15678"
+         transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan15676"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="54.113926"
+           y="-23.497944">2</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle15680"
+         cx="-54.018658"
+         cy="25.946033"
+         r="1.2760839"
+         transform="rotate(-144.24458)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 40.517036,60.903915 C 40.024359,62.993176 38.20056,71.051343 38.20056,71.051343"
+       id="path15682"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="0.29958699"
+       inkscape:transform-center-y="0.95870071" />
+    <g
+       id="g2923"
+       style="display:inline;fill:none;fill-opacity:1;stroke:#de0029;stroke-opacity:1"
+       transform="matrix(1,0,0,-1,0,85.564005)">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 50.872907,76.316352 63.354702,9.1213771"
+         id="path1106"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g21538"
+         transform="matrix(1.1264863,0.11756911,0.12908962,-1.0259538,-25.105273,145.05901)"
+         style="display:inline;fill:none;fill-opacity:1;stroke:#de0029;stroke-opacity:1">
+        <ellipse
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#de0029;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="circle9582"
+           cx="-74.661598"
+           cy="60.70055"
+           transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
+           rx="1.2146922"
+           ry="1.1834064" />
+        <text
+           xml:space="preserve"
+           style="font-size:2.14253px;display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#de0029;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="59.531094"
+           y="75.579971"
+           id="text9714"
+           transform="scale(0.98702867,1.0131418)"><tspan
+             sodipodi:role="line"
+             id="tspan9712"
+             style="fill:none;fill-opacity:1;stroke:#de0029;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="59.531094"
+             y="75.579971">3</tspan></text>
+      </g>
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 53.638952,23.259516 C 53.260848,21.146515 51.732311,13.027163 51.732311,13.027163"
+       id="path330"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 40.517036,60.903915 C 40.024359,62.993176 38.20056,71.051343 38.20056,71.051343"
+       id="path332"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="0.29958699"
+       inkscape:transform-center-y="0.95870071" />
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 63.384965,76.425194 74.631503,8.2434807"
+       id="path9026"
+       sodipodi:nodetypes="cc" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="50.617466"
+       y="11.429704"
+       id="text10678"
+       transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan10676"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+         x="50.617466"
+         y="11.429704">3</tspan><tspan
+         sodipodi:role="line"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+         x="50.617466"
+         y="14.324066"
+         id="tspan10789" /></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle10680"
+       cx="-51.603828"
+       cy="-9.086525"
+       r="1.2760839"
+       transform="rotate(-178.35508)" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="62.91116"
+       y="73.848625"
+       id="text10793"
+       transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan10791"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+         x="62.91116"
+         y="73.848625">4</tspan><tspan
+         sodipodi:role="line"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+         x="62.91116"
+         y="76.742989"
+         id="tspan10804" /></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle10795"
+       cx="-65.814407"
+       cy="-71.120781"
+       r="1.2760839"
+       transform="rotate(-178.35508)" />
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 66.446219,60.903915 c -0.492677,2.089261 -2.316476,10.147428 -2.316476,10.147428"
+       id="path10799"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="0.29958699"
+       inkscape:transform-center-y="0.95870071" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/w_l1.svg b/public/assets/capital-letter/w_l1.svg
new file mode 100755
index 0000000..f2faa40
--- /dev/null
+++ b/public/assets/capital-letter/w_l1.svg
@@ -0,0 +1,256 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="l_l2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="w.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="37.485212,-6.7950955"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="24.949927,104.14192"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="45.843238,25.664552"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="58.298235,90.013389"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="75.035526,115.88828"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.667846,-5.37532"
+       orientation="1,0"
+       id="guide1929"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="9.3359693,-23.144284"
+       orientation="0,-1"
+       id="guide2737"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 36.528589,76.633785 C 36.273654,77.773031 26.129673,9.38668 26.129673,9.38668"
+       id="path127"
+       sodipodi:nodetypes="cc" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="25.600216"
+       y="12.34782"
+       id="text9342"
+       transform="matrix(0.99960352,0.00321601,-0.00321854,1.0003863,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+         x="25.600216"
+         y="12.34782">1</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="-27.39192"
+       cy="-8.6904173"
+       r="1.2760839"
+       transform="rotate(-174.16582)" />
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 28.567521,23.594526 C 28.189417,21.481525 26.66088,13.362173 26.66088,13.362173"
+       id="path13743"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 36.791767,76.957835 51.179799,9.522057"
+       id="path1108"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g21551"
+       transform="rotate(-34.110499,150.22437,76.26651)"
+       style="display:none">
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="54.113926"
+         y="-23.497944"
+         id="text15678"
+         transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan15676"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="54.113926"
+           y="-23.497944">2</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle15680"
+         cx="-54.018658"
+         cy="25.946033"
+         r="1.2760839"
+         transform="rotate(-144.24458)" />
+    </g>
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 40.517036,60.903915 C 40.024359,62.993176 38.20056,71.051343 38.20056,71.051343"
+       id="path15682"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="0.29958699"
+       inkscape:transform-center-y="0.95870071" />
+    <g
+       id="g2923"
+       style="display:none"
+       transform="matrix(1,0,0,-1,0,85.564005)">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 51.100614,76.117198 63.354702,9.1213771"
+         id="path1106"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g21538"
+         transform="matrix(1.1264863,0.11756911,0.12908962,-1.0259538,-25.105273,145.05901)"
+         style="display:inline">
+        <ellipse
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="circle9582"
+           cx="-74.661598"
+           cy="60.70055"
+           transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
+           rx="1.2146922"
+           ry="1.1834064" />
+        <text
+           xml:space="preserve"
+           style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="59.531094"
+           y="75.579971"
+           id="text9714"
+           transform="scale(0.98702867,1.0131418)"><tspan
+             sodipodi:role="line"
+             id="tspan9712"
+             style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="59.531094"
+             y="75.579971">3</tspan></text>
+      </g>
+    </g>
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 53.638952,23.259516 C 53.260848,21.146515 51.732311,13.027163 51.732311,13.027163"
+       id="path330"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 40.517036,60.903915 C 40.024359,62.993176 38.20056,71.051343 38.20056,71.051343"
+       id="path332"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="0.29958699"
+       inkscape:transform-center-y="0.95870071" />
+    <g
+       id="g460"
+       style="display:none">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 74.505969,9.235039 c 0.02459,0.303469 -10.968822,67.29474 -10.968822,67.29474"
+         id="path15674"
+         sodipodi:nodetypes="cc" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 66.446219,60.903915 c -0.492677,2.089261 -2.316476,10.147428 -2.316476,10.147428"
+         id="path340"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="0.29958699"
+         inkscape:transform-center-y="0.95870071" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="62.785896"
+         y="73.803139"
+         id="text344"
+         transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan342"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="62.785896"
+           y="73.803139">4</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle346"
+         cx="-65.687851"
+         cy="-71.079163"
+         r="1.2760839"
+         transform="rotate(-178.35508)" />
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/w_l2.svg b/public/assets/capital-letter/w_l2.svg
new file mode 100755
index 0000000..8e5445a
--- /dev/null
+++ b/public/assets/capital-letter/w_l2.svg
@@ -0,0 +1,244 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="w_l1.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="w_l2.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="37.485212,-6.7950955"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="24.949927,104.14192"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="45.843238,25.664552"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="58.298235,90.013389"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="75.035526,115.88828"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.667846,-5.37532"
+       orientation="1,0"
+       id="guide1929"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="9.3359693,-23.144284"
+       orientation="0,-1"
+       id="guide2737"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:none;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 36.528589,76.633785 C 36.273654,77.773031 26.129673,9.38668 26.129673,9.38668"
+       id="path127"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="-27.39192"
+       cy="-8.6904173"
+       r="1.2760839"
+       transform="rotate(-174.16582)" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 28.567521,23.594526 C 28.189417,21.481525 26.66088,13.362173 26.66088,13.362173"
+       id="path13743"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 36.791767,76.957835 51.179799,9.522057"
+       id="path1108"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g21551"
+       transform="rotate(-34.110499,150.22437,76.26651)"
+       style="display:inline">
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="54.113926"
+         y="-23.497944"
+         id="text15678"
+         transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan15676"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="54.113926"
+           y="-23.497944">2</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle15680"
+         cx="-54.018658"
+         cy="25.946033"
+         r="1.2760839"
+         transform="rotate(-144.24458)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 40.517036,60.903915 C 40.024359,62.993176 38.20056,71.051343 38.20056,71.051343"
+       id="path15682"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="0.29958699"
+       inkscape:transform-center-y="0.95870071" />
+    <g
+       id="g2923"
+       style="display:none"
+       transform="matrix(1,0,0,-1,0,85.564005)">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 51.100614,76.117198 63.354702,9.1213771"
+         id="path1106"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g21538"
+         transform="matrix(1.1264863,0.11756911,0.12908962,-1.0259538,-25.105273,145.05901)"
+         style="display:inline">
+        <ellipse
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="circle9582"
+           cx="-74.661598"
+           cy="60.70055"
+           transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
+           rx="1.2146922"
+           ry="1.1834064" />
+        <text
+           xml:space="preserve"
+           style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="59.531094"
+           y="75.579971"
+           id="text9714"
+           transform="scale(0.98702867,1.0131418)"><tspan
+             sodipodi:role="line"
+             id="tspan9712"
+             style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="59.531094"
+             y="75.579971">3</tspan></text>
+      </g>
+    </g>
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 53.638952,23.259516 C 53.260848,21.146515 51.732311,13.027163 51.732311,13.027163"
+       id="path330"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 40.517036,60.903915 C 40.024359,62.993176 38.20056,71.051343 38.20056,71.051343"
+       id="path332"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="0.29958699"
+       inkscape:transform-center-y="0.95870071" />
+    <g
+       id="g460"
+       style="display:none">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 74.505969,9.235039 c 0.02459,0.303469 -10.968822,67.29474 -10.968822,67.29474"
+         id="path15674"
+         sodipodi:nodetypes="cc" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 66.446219,60.903915 c -0.492677,2.089261 -2.316476,10.147428 -2.316476,10.147428"
+         id="path340"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="0.29958699"
+         inkscape:transform-center-y="0.95870071" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="62.785896"
+         y="73.803139"
+         id="text344"
+         transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan342"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="62.785896"
+           y="73.803139">4</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle346"
+         cx="-65.687851"
+         cy="-71.079163"
+         r="1.2760839"
+         transform="rotate(-178.35508)" />
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/w_l3.svg b/public/assets/capital-letter/w_l3.svg
new file mode 100755
index 0000000..de89189
--- /dev/null
+++ b/public/assets/capital-letter/w_l3.svg
@@ -0,0 +1,215 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="w_l2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="w_l3.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="37.485212,-6.7950955"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="24.949927,104.14192"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="45.843238,25.664552"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="58.298235,90.013389"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="75.035526,115.88828"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="62.667846,-5.37532"
+       orientation="1,0"
+       id="guide1929"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="9.3359693,-23.144284"
+       orientation="0,-1"
+       id="guide2737"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:none;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 36.528589,76.633785 C 36.273654,77.773031 26.129673,9.38668 26.129673,9.38668"
+       id="path127"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="-27.39192"
+       cy="-8.6904173"
+       r="1.2760839"
+       transform="rotate(-174.16582)" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 28.567521,23.594526 C 28.189417,21.481525 26.66088,13.362173 26.66088,13.362173"
+       id="path13743"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 36.791767,76.957835 51.179799,9.522057"
+       id="path1108"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 40.517036,60.903915 C 40.024359,62.993176 38.20056,71.051343 38.20056,71.051343"
+       id="path15682"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="0.29958699"
+       inkscape:transform-center-y="0.95870071" />
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 51.100614,9.446807 63.354702,76.442628"
+       id="path1106"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g21538"
+       transform="matrix(1.1264863,-0.11756911,0.12908962,1.0259538,-25.105273,-59.495005)"
+       style="display:inline">
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-74.661598"
+         cy="60.70055"
+         transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
+         rx="1.2146922"
+         ry="1.1834064" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="59.531094"
+         y="75.579971"
+         id="text9714"
+         transform="scale(0.98702867,1.0131418)"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="59.531094"
+           y="75.579971">3</tspan></text>
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 53.638952,23.259516 C 53.260848,21.146515 51.732311,13.027163 51.732311,13.027163"
+       id="path330"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 40.517036,60.903915 C 40.024359,62.993176 38.20056,71.051343 38.20056,71.051343"
+       id="path332"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="0.29958699"
+       inkscape:transform-center-y="0.95870071" />
+    <g
+       id="g460"
+       style="display:none">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 74.505969,9.235039 c 0.02459,0.303469 -10.968822,67.29474 -10.968822,67.29474"
+         id="path15674"
+         sodipodi:nodetypes="cc" />
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 66.446219,60.903915 c -0.492677,2.089261 -2.316476,10.147428 -2.316476,10.147428"
+         id="path340"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="0.29958699"
+         inkscape:transform-center-y="0.95870071" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="62.785896"
+         y="73.803139"
+         id="text344"
+         transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan342"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="62.785896"
+           y="73.803139">4</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle346"
+         cx="-65.687851"
+         cy="-71.079163"
+         r="1.2760839"
+         transform="rotate(-178.35508)" />
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/w_l4.svg b/public/assets/capital-letter/w_l4.svg
new file mode 100755
index 0000000..8aef0dd
--- /dev/null
+++ b/public/assets/capital-letter/w_l4.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:none;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 36.528589,76.633785 C 36.273654,77.773031 26.129673,9.38668 26.129673,9.38668"
+       id="path127" />
+    <circle
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path9448"
+       cx="-27.39192"
+       cy="-8.6904173"
+       r="1.2760839"
+       transform="rotate(-174.16582)" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 28.567521,23.594526 C 28.189417,21.481525 26.66088,13.362173 26.66088,13.362173"
+       id="path13743" />
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 36.791767,76.957835 51.179799,9.522057"
+       id="path1108" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 40.517036,60.903915 C 40.024359,62.993176 38.20056,71.051343 38.20056,71.051343"
+       id="path15682" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 53.638952,23.259516 C 53.260848,21.146515 51.732311,13.027163 51.732311,13.027163"
+       id="path330" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 40.517036,60.903915 C 40.024359,62.993176 38.20056,71.051343 38.20056,71.051343"
+       id="path332" />
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 74.505969,9.235039 c 0.02459,0.303469 -10.968822,67.29474 -10.968822,67.29474"
+       id="path15674" />
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 66.446219,60.903915 c -0.492677,2.089261 -2.316476,10.147428 -2.316476,10.147428"
+       id="path340" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.31549px;display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="62.785896"
+       y="73.803139"
+       id="text344"
+       transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+         id="tspan342"
+         style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+         x="62.785896"
+         y="73.803139">4</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle346"
+       cx="-65.687851"
+       cy="-71.079163"
+       r="1.2760839"
+       transform="rotate(-178.35508)" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/x.svg b/public/assets/capital-letter/x.svg
new file mode 100755
index 0000000..67fc296
--- /dev/null
+++ b/public/assets/capital-letter/x.svg
@@ -0,0 +1,263 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="h.svg"
+   inkscape:export-filename="h"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview754"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true">
+    <sodipodi:guide
+       position="50.127877,62.787723"
+       orientation="1,0"
+       id="guide365"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="75.600923,65.913722"
+       orientation="0,-1"
+       id="guide367"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="85.293118,33.101722"
+       orientation="0,-1"
+       id="guide465"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="93.941815,97.534866"
+       orientation="0,-1"
+       id="guide467"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="32.618186,20.378437"
+       orientation="1,0"
+       id="guide469"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="69.203065,22.701706"
+       orientation="1,0"
+       id="guide471"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+  </defs>
+  <g
+     id="g14176"
+     style="display:none">
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 42.014207,78.885553 33.868367,0.105865"
+       id="path1106" />
+    <path
+       style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 54.585716,79.075266 44.449435,78.916887"
+       id="path9586" />
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle9592"
+       cx="-78.125687"
+       cy="44.021099"
+       r="1.2760839"
+       transform="rotate(-88.91827)" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="41.672253"
+       y="79.868111"
+       id="text9761"><tspan
+         id="tspan9759"
+         style="stroke-width:0.117792"
+         x="41.672253"
+         y="79.868111">4</tspan></text>
+  </g>
+  <path
+     style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 35.187626,4.8827424 C 35.291858,5.1755436 68.467789,65.430405 68.467789,65.430405"
+     id="path127"
+     sodipodi:nodetypes="cc" />
+  <text
+     xml:space="preserve"
+     style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+     x="35.215538"
+     y="7.1380835"
+     id="text9342"
+     transform="matrix(0.99957809,0.00781801,-0.00782413,1.0003609,0,0)"><tspan
+       id="tspan9340"
+       style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+       x="35.215538"
+       y="7.1380835">1</tspan></text>
+  <circle
+     style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+     id="path9448"
+     cx="-36.501934"
+     cy="-1.1128976"
+     r="1.2760839"
+     transform="rotate(-171.78771)"
+     inkscape:transform-center-x="0.0646879"
+     inkscape:transform-center-y="0.049702286" />
+  <path
+     style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+     d="M 41.686586,17.030103 C 40.661867,15.143919 36.783171,7.8489891 36.783171,7.8489891"
+     id="path13743" />
+  <text
+     xml:space="preserve"
+     style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+     x="35.215538"
+     y="7.1380835"
+     id="text682"
+     transform="matrix(0.99957809,0.00781801,-0.00782413,1.0003609,0,0)"><tspan
+       id="tspan680"
+       style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+       x="35.215538"
+       y="7.1380835">1</tspan></text>
+  <g
+     id="g18711"
+     style="display:inline"
+     transform="rotate(28.128208,55.833511,40.085267)">
+    <path
+       style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 48.691107,4.2121653 C 48.645317,4.5195742 46.970914,73.652223 46.970914,73.652223"
+       id="path15674"
+       sodipodi:nodetypes="cc" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.31549px;display:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="61.848087"
+       y="10.675919"
+       id="text15678"
+       transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+         id="tspan15676"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+         x="61.848087"
+         y="10.675919">2</tspan></text>
+    <circle
+       style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle15680"
+       cx="-62.801434"
+       cy="-7.9862614"
+       r="1.2760839"
+       transform="rotate(-178.67073)" />
+    <path
+       style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
+       d="m 62.603456,21.585866 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+       id="path15682" />
+    <g
+       id="g14279"
+       style="display:none"
+       transform="matrix(1.2524894,0,0,1.0646672,-15.680188,-38.054966)">
+      <g
+         id="g18704"
+         style="display:none">
+        <path
+           style="display:none;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.47293;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="m 39.142669,73.987028 21.401647,0.110198"
+           id="path1108" />
+        <path
+           style="display:none;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391436;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+           d="M 48.688134,73.955975 41.183058,73.814371"
+           id="path9576" />
+        <ellipse
+           style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.11391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="circle9582"
+           cx="-72.913704"
+           cy="40.918648"
+           transform="matrix(0.01563487,-0.99987777,0.99974017,0.02279479,0,0)"
+           rx="1.140859"
+           ry="0.94491148"
+           inkscape:transform-center-x="0.14086477"
+           inkscape:transform-center-y="0.27373721" />
+        <text
+           xml:space="preserve"
+           style="font-size:1.85538px;display:none;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.113908;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="43.211548"
+           y="67.832787"
+           id="text9714"
+           transform="scale(0.91001737,1.0988801)"><tspan
+             id="tspan9712"
+             style="stroke:#f9f6f6;stroke-width:0.113908;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="43.211548"
+             y="67.832787">3</tspan></text>
+      </g>
+    </g>
+  </g>
+  <path
+     style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+     d="m 60.080402,16.691065 c 0.993446,-1.902841 4.882789,-9.1921006 4.882789,-9.1921006"
+     id="path490" />
+  <g
+     id="g1198"
+     transform="translate(15.717103,-4.2741213)"
+     style="display:inline">
+    <text
+       xml:space="preserve"
+       style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="49.768463"
+       y="10.649764"
+       id="text15678-3"
+       transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan15676-6"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+         x="49.768463"
+         y="10.649764">2</tspan></text>
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle15680-7"
+       cx="-50.731476"
+       cy="-8.3328476"
+       r="1.2760839"
+       transform="rotate(-178.35508)" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/x_l1.svg b/public/assets/capital-letter/x_l1.svg
new file mode 100755
index 0000000..70f448c
--- /dev/null
+++ b/public/assets/capital-letter/x_l1.svg
@@ -0,0 +1,267 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="h.svg"
+   inkscape:export-filename="x.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview754"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true">
+    <sodipodi:guide
+       position="50.127877,62.787723"
+       orientation="1,0"
+       id="guide365"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="75.600923,65.913722"
+       orientation="0,-1"
+       id="guide367"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="85.293118,33.101722"
+       orientation="0,-1"
+       id="guide465"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="93.941815,97.534866"
+       orientation="0,-1"
+       id="guide467"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="32.618186,20.378437"
+       orientation="1,0"
+       id="guide469"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="69.203065,22.701706"
+       orientation="1,0"
+       id="guide471"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+  </defs>
+  <g
+     id="g14176"
+     style="display:none">
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 42.014207,78.885553 33.868367,0.105865"
+       id="path1106" />
+    <path
+       style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 54.585716,79.075266 44.449435,78.916887"
+       id="path9586" />
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle9592"
+       cx="-78.125687"
+       cy="44.021099"
+       r="1.2760839"
+       transform="rotate(-88.91827)" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="41.672253"
+       y="79.868111"
+       id="text9761"><tspan
+         id="tspan9759"
+         style="stroke-width:0.117792"
+         x="41.672253"
+         y="79.868111">4</tspan></text>
+  </g>
+  <path
+     style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 35.187626,4.8827424 C 35.291858,5.1755436 68.467789,65.430405 68.467789,65.430405"
+     id="path127"
+     sodipodi:nodetypes="cc" />
+  <text
+     xml:space="preserve"
+     style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+     x="35.215538"
+     y="7.1380835"
+     id="text9342"
+     transform="matrix(0.99957809,0.00781801,-0.00782413,1.0003609,0,0)"><tspan
+       id="tspan9340"
+       style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+       x="35.215538"
+       y="7.1380835">1</tspan></text>
+  <circle
+     style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+     id="path9448"
+     cx="-36.501934"
+     cy="-1.1128976"
+     r="1.2760839"
+     transform="rotate(-171.78771)"
+     inkscape:transform-center-x="0.0646879"
+     inkscape:transform-center-y="0.049702286" />
+  <path
+     style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+     d="M 41.686586,17.030103 C 40.661867,15.143919 36.783171,7.8489891 36.783171,7.8489891"
+     id="path13743" />
+  <text
+     xml:space="preserve"
+     style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+     x="35.215538"
+     y="7.1380835"
+     id="text682"
+     transform="matrix(0.99957809,0.00781801,-0.00782413,1.0003609,0,0)"><tspan
+       id="tspan680"
+       style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+       x="35.215538"
+       y="7.1380835">1</tspan></text>
+  <g
+     id="g1211"
+     style="display:none">
+    <g
+       id="g18711"
+       style="display:inline"
+       transform="rotate(28.128208,55.833511,40.085267)">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 48.691107,4.2121653 C 48.645317,4.5195742 46.970914,73.652223 46.970914,73.652223"
+         id="path15674"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="61.848087"
+         y="10.675919"
+         id="text15678"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan15676"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="61.848087"
+           y="10.675919">2</tspan></text>
+      <circle
+         style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle15680"
+         cx="-62.801434"
+         cy="-7.9862614"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
+         d="m 62.603456,21.585866 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path15682" />
+      <g
+         id="g14279"
+         style="display:none"
+         transform="matrix(1.2524894,0,0,1.0646672,-15.680188,-38.054966)">
+        <g
+           id="g18704"
+           style="display:none">
+          <path
+             style="display:none;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.47293;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+             d="m 39.142669,73.987028 21.401647,0.110198"
+             id="path1108" />
+          <path
+             style="display:none;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391436;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+             d="M 48.688134,73.955975 41.183058,73.814371"
+             id="path9576" />
+          <ellipse
+             style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.11391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+             id="circle9582"
+             cx="-72.913704"
+             cy="40.918648"
+             transform="matrix(0.01563487,-0.99987777,0.99974017,0.02279479,0,0)"
+             rx="1.140859"
+             ry="0.94491148"
+             inkscape:transform-center-x="0.14086477"
+             inkscape:transform-center-y="0.27373721" />
+          <text
+             xml:space="preserve"
+             style="font-size:1.85538px;display:none;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.113908;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+             x="43.211548"
+             y="67.832787"
+             id="text9714"
+             transform="scale(0.91001737,1.0988801)"><tspan
+               id="tspan9712"
+               style="stroke:#f9f6f6;stroke-width:0.113908;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+               x="43.211548"
+               y="67.832787">3</tspan></text>
+        </g>
+      </g>
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 60.080402,16.691065 c 0.993446,-1.902841 4.882789,-9.1921006 4.882789,-9.1921006"
+       id="path490" />
+    <g
+       id="g1198"
+       transform="translate(15.717103,-4.2741213)"
+       style="display:inline">
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="49.768463"
+         y="10.649764"
+         id="text15678-3"
+         transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan15676-6"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="49.768463"
+           y="10.649764">2</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle15680-7"
+         cx="-50.731476"
+         cy="-8.3328476"
+         r="1.2760839"
+         transform="rotate(-178.35508)" />
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/x_l2.svg b/public/assets/capital-letter/x_l2.svg
new file mode 100755
index 0000000..fe8e399
--- /dev/null
+++ b/public/assets/capital-letter/x_l2.svg
@@ -0,0 +1,245 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="h.svg"
+   inkscape:export-filename="x_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview754"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true">
+    <sodipodi:guide
+       position="50.127877,62.787723"
+       orientation="1,0"
+       id="guide365"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="75.600923,65.913722"
+       orientation="0,-1"
+       id="guide367"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="85.293118,33.101722"
+       orientation="0,-1"
+       id="guide465"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="93.941815,97.534866"
+       orientation="0,-1"
+       id="guide467"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="32.618186,20.378437"
+       orientation="1,0"
+       id="guide469"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="69.203065,22.701706"
+       orientation="1,0"
+       id="guide471"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-5" />
+    </marker>
+  </defs>
+  <g
+     id="g14176"
+     style="display:none">
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 42.014207,78.885553 33.868367,0.105865"
+       id="path1106" />
+    <path
+       style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 54.585716,79.075266 44.449435,78.916887"
+       id="path9586" />
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="circle9592"
+       cx="-78.125687"
+       cy="44.021099"
+       r="1.2760839"
+       transform="rotate(-88.91827)" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="41.672253"
+       y="79.868111"
+       id="text9761"><tspan
+         id="tspan9759"
+         style="stroke-width:0.117792"
+         x="41.672253"
+         y="79.868111">4</tspan></text>
+  </g>
+  <path
+     style="display:none;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 35.187626,4.8827424 C 35.291858,5.1755436 68.467789,65.430405 68.467789,65.430405"
+     id="path127"
+     sodipodi:nodetypes="cc" />
+  <circle
+     style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+     id="path9448"
+     cx="-36.501934"
+     cy="-1.1128976"
+     r="1.2760839"
+     transform="rotate(-171.78771)"
+     inkscape:transform-center-x="0.0646879"
+     inkscape:transform-center-y="0.049702286" />
+  <path
+     style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+     d="M 41.686586,17.030103 C 40.661867,15.143919 36.783171,7.8489891 36.783171,7.8489891"
+     id="path13743" />
+  <g
+     id="g1211"
+     style="display:inline">
+    <g
+       id="g18711"
+       style="display:inline"
+       transform="rotate(28.128208,55.833511,40.085267)">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 48.691107,4.2121653 C 48.645317,4.5195742 46.970914,73.652223 46.970914,73.652223"
+         id="path15674"
+         sodipodi:nodetypes="cc" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="61.848087"
+         y="10.675919"
+         id="text15678"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           id="tspan15676"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="61.848087"
+           y="10.675919">2</tspan></text>
+      <circle
+         style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle15680"
+         cx="-62.801434"
+         cy="-7.9862614"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+      <path
+         style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
+         d="m 62.603456,21.585866 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
+         id="path15682" />
+      <g
+         id="g14279"
+         style="display:none"
+         transform="matrix(1.2524894,0,0,1.0646672,-15.680188,-38.054966)">
+        <g
+           id="g18704"
+           style="display:none">
+          <path
+             style="display:none;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.47293;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+             d="m 39.142669,73.987028 21.401647,0.110198"
+             id="path1108" />
+          <path
+             style="display:none;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.391436;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+             d="M 48.688134,73.955975 41.183058,73.814371"
+             id="path9576" />
+          <ellipse
+             style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.11391;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+             id="circle9582"
+             cx="-72.913704"
+             cy="40.918648"
+             transform="matrix(0.01563487,-0.99987777,0.99974017,0.02279479,0,0)"
+             rx="1.140859"
+             ry="0.94491148"
+             inkscape:transform-center-x="0.14086477"
+             inkscape:transform-center-y="0.27373721" />
+          <text
+             xml:space="preserve"
+             style="font-size:1.85538px;display:none;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.113908;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+             x="43.211548"
+             y="67.832787"
+             id="text9714"
+             transform="scale(0.91001737,1.0988801)"><tspan
+               id="tspan9712"
+               style="stroke:#f9f6f6;stroke-width:0.113908;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+               x="43.211548"
+               y="67.832787">3</tspan></text>
+        </g>
+      </g>
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 60.080402,16.691065 c 0.993446,-1.902841 4.882789,-9.1921006 4.882789,-9.1921006"
+       id="path490" />
+    <g
+       id="g1198"
+       transform="translate(15.717103,-4.2741213)"
+       style="display:inline">
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="49.768463"
+         y="10.649764"
+         id="text15678-3"
+         transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan15676-6"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="49.768463"
+           y="10.649764">2</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle15680-7"
+         cx="-50.731476"
+         cy="-8.3328476"
+         r="1.2760839"
+         transform="rotate(-178.35508)" />
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/y.svg b/public/assets/capital-letter/y.svg
new file mode 100755
index 0000000..1218579
--- /dev/null
+++ b/public/assets/capital-letter/y.svg
@@ -0,0 +1,244 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="a_l3.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="a.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.03803,52.259761"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-6.8261376,96.826178"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="34.933229,103.49635"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="52.291672,24.857991"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="109.48582,93.369913"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="65.121878,12.99501"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-6" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g19985"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 49.732912,37.7382 c 0.07877,0.532133 -12.6959,-28.9379854 -12.6959,-28.9379854"
+       id="path127"
+       sodipodi:nodetypes="cc" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.58371px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.192263;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="32.750824"
+       y="10.811321"
+       id="text9342"
+       transform="matrix(1.1019552,-0.00695788,0.00846274,0.90742447,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan9340"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.192263;stroke-dasharray:none;stroke-opacity:1"
+         x="32.750824"
+         y="10.811321">1</tspan></text>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.30575;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="M 40.273146,16.633595 C 39.783892,15.401437 37.854859,10.674802 37.854859,10.674802"
+       id="path13743"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="-1.2642289"
+       inkscape:transform-center-y="-3.0904585" />
+    <path
+       style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 49.750577,37.720928 C 49.798146,37.584827 62.955606,8.7234554 62.955606,8.7234554"
+       id="path15674"
+       sodipodi:nodetypes="cc" />
+    <text
+       xml:space="preserve"
+       style="font-size:1.83619px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.164709;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       x="62.28809"
+       y="9.4758034"
+       id="text15678"
+       transform="matrix(1.0012598,-0.00216003,0.00216887,0.9987371,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan15676"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.164709;stroke-dasharray:none;stroke-opacity:1"
+         x="62.28809"
+         y="9.4758034">2</tspan></text>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.30575;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
+       d="m 59.312752,16.534837 c 0.557948,-1.206861 2.660303,-5.869669 2.660303,-5.869669"
+       id="path15682"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="-0.28036688"
+       inkscape:transform-center-y="-0.19078158" />
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 49.779183,33.987517 -0.0622,35.30229"
+       id="path1108" />
+    <path
+       style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+       d="M 49.73712,46.41744 49.68901,37.287086"
+       id="path9576"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="0.2063818"
+       inkscape:transform-center-y="4.8256889" />
+    <ellipse
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+       id="circle9582"
+       cx="36.126961"
+       cy="49.027393"
+       transform="matrix(0.01839222,0.99983085,0.99981223,-0.0193779,0,0)"
+       rx="1.2146922"
+       ry="1.1834064" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+       x="49.771202"
+       y="35.505993"
+       id="text9714"
+       transform="scale(0.98702867,1.0131418)"><tspan
+         sodipodi:role="line"
+         id="tspan9712"
+         style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+         x="49.771202"
+         y="35.505993">3</tspan></text>
+    <ellipse
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+       id="ellipse2536"
+       cx="9.9299078"
+       cy="62.740849"
+       transform="matrix(0.01839222,0.99983085,0.99981223,-0.0193779,0,0)"
+       rx="1.2146922"
+       ry="1.1834064" />
+    <ellipse
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+       id="ellipse2538"
+       cx="9.4274664"
+       cy="36.816143"
+       transform="matrix(0.01839222,0.99983085,0.99981223,-0.0193779,0,0)"
+       rx="1.2146922"
+       ry="1.1834064" />
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/y_l1.svg b/public/assets/capital-letter/y_l1.svg
new file mode 100755
index 0000000..c541011
--- /dev/null
+++ b/public/assets/capital-letter/y_l1.svg
@@ -0,0 +1,261 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="a_l3.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="y.svg.2023_09_26_21_15_33.0.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.03803,52.259761"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-6.8261376,96.826178"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="34.933229,103.49635"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="52.291672,24.857991"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="109.48582,93.369913"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="65.121878,12.99501"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-6" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g19985"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g365"
+       style="display:inline">
+      <g
+         id="g331"
+         style="display:inline">
+        <path
+           style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="m 49.732912,37.7382 c 0.07877,0.532133 -12.6959,-28.9379854 -12.6959,-28.9379854"
+           id="path127"
+           sodipodi:nodetypes="cc" />
+        <g
+           id="g338"
+           style="display:none">
+          <path
+             style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+             d="M 49.750577,37.720928 C 49.798146,37.584827 62.955606,8.7234554 62.955606,8.7234554"
+             id="path15674"
+             sodipodi:nodetypes="cc" />
+          <text
+             xml:space="preserve"
+             style="font-size:1.83619px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.164709;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+             x="62.28809"
+             y="9.4758034"
+             id="text15678"
+             transform="matrix(1.0012598,-0.00216003,0.00216887,0.9987371,0,0)"><tspan
+               sodipodi:role="line"
+               id="tspan15676"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.164709;stroke-dasharray:none;stroke-opacity:1"
+               x="62.28809"
+               y="9.4758034">2</tspan></text>
+          <path
+             style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.30575;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
+             d="m 59.312752,16.534837 c 0.557948,-1.206861 2.660303,-5.869669 2.660303,-5.869669"
+             id="path15682"
+             sodipodi:nodetypes="cc"
+             inkscape:transform-center-x="-0.28036688"
+             inkscape:transform-center-y="-0.19078158" />
+          <ellipse
+             style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+             id="ellipse2536"
+             cx="9.9299078"
+             cy="62.740849"
+             transform="matrix(0.01839222,0.99983085,0.99981223,-0.0193779,0,0)"
+             rx="1.2146922"
+             ry="1.1834064" />
+        </g>
+      </g>
+      <text
+         xml:space="preserve"
+         style="font-size:2.58371px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.192263;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="32.750824"
+         y="10.811321"
+         id="text9342"
+         transform="matrix(1.1019552,-0.00695788,0.00846274,0.90742447,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.192263;stroke-dasharray:none;stroke-opacity:1"
+           x="32.750824"
+           y="10.811321">1</tspan></text>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.30575;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 40.273146,16.633595 C 39.783892,15.401437 37.854859,10.674802 37.854859,10.674802"
+         id="path13743"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-1.2642289"
+         inkscape:transform-center-y="-3.0904585" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="ellipse2538"
+         cx="9.4274664"
+         cy="36.816143"
+         transform="matrix(0.01839222,0.99983085,0.99981223,-0.0193779,0,0)"
+         rx="1.2146922"
+         ry="1.1834064" />
+      <g
+         id="g357"
+         style="display:none"
+         sodipodi:insensitive="true">
+        <path
+           style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="m 49.779183,33.987517 -0.0622,35.30229"
+           id="path1108" />
+        <path
+           style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+           d="M 49.73712,46.41744 49.68901,37.287086"
+           id="path9576"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="0.2063818"
+           inkscape:transform-center-y="4.8256889" />
+        <ellipse
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="circle9582"
+           cx="36.126961"
+           cy="49.027393"
+           transform="matrix(0.01839222,0.99983085,0.99981223,-0.0193779,0,0)"
+           rx="1.2146922"
+           ry="1.1834064" />
+        <text
+           xml:space="preserve"
+           style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="49.771202"
+           y="35.505993"
+           id="text9714"
+           transform="scale(0.98702867,1.0131418)"><tspan
+             sodipodi:role="line"
+             id="tspan9712"
+             style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="49.771202"
+             y="35.505993">3</tspan></text>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/y_l2.svg b/public/assets/capital-letter/y_l2.svg
new file mode 100755
index 0000000..b6beee3
--- /dev/null
+++ b/public/assets/capital-letter/y_l2.svg
@@ -0,0 +1,261 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="y_l1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="y.svg.2023_09_26_21_15_33.0.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.03803,52.259761"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-6.8261376,96.826178"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="34.933229,103.49635"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="52.291672,24.857991"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="109.48582,93.369913"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="65.121878,12.99501"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-6" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g19985"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g365"
+       style="display:inline">
+      <g
+         id="g331"
+         style="display:inline">
+        <path
+           style="display:none;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="m 49.732912,37.7382 c 0.07877,0.532133 -12.6959,-28.9379854 -12.6959,-28.9379854"
+           id="path127"
+           sodipodi:nodetypes="cc" />
+        <g
+           id="g338"
+           style="display:inline">
+          <path
+             style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+             d="M 49.750577,37.720928 C 49.798146,37.584827 62.955606,8.7234554 62.955606,8.7234554"
+             id="path15674"
+             sodipodi:nodetypes="cc" />
+          <text
+             xml:space="preserve"
+             style="font-size:1.83619px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.164709;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+             x="62.28809"
+             y="9.4758034"
+             id="text15678"
+             transform="matrix(1.0012598,-0.00216003,0.00216887,0.9987371,0,0)"><tspan
+               sodipodi:role="line"
+               id="tspan15676"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.164709;stroke-dasharray:none;stroke-opacity:1"
+               x="62.28809"
+               y="9.4758034">2</tspan></text>
+          <path
+             style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.30575;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
+             d="m 59.312752,16.534837 c 0.557948,-1.206861 2.660303,-5.869669 2.660303,-5.869669"
+             id="path15682"
+             sodipodi:nodetypes="cc"
+             inkscape:transform-center-x="-0.28036688"
+             inkscape:transform-center-y="-0.19078158" />
+          <ellipse
+             style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+             id="ellipse2536"
+             cx="9.9299078"
+             cy="62.740849"
+             transform="matrix(0.01839222,0.99983085,0.99981223,-0.0193779,0,0)"
+             rx="1.2146922"
+             ry="1.1834064" />
+        </g>
+      </g>
+      <text
+         xml:space="preserve"
+         style="font-size:2.58371px;display:none;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.192263;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="32.750824"
+         y="10.811321"
+         id="text9342"
+         transform="matrix(1.1019552,-0.00695788,0.00846274,0.90742447,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.192263;stroke-dasharray:none;stroke-opacity:1"
+           x="0"
+           y="0">1</tspan></text>
+      <path
+         style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.30575;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 40.273146,16.633595 C 39.783892,15.401437 37.854859,10.674802 37.854859,10.674802"
+         id="path13743"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-1.2642289"
+         inkscape:transform-center-y="-3.0904585" />
+      <ellipse
+         style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="ellipse2538"
+         cx="9.4274664"
+         cy="36.816143"
+         transform="matrix(0.01839222,0.99983085,0.99981223,-0.0193779,0,0)"
+         rx="1.2146922"
+         ry="1.1834064" />
+      <g
+         id="g357"
+         style="display:none"
+         sodipodi:insensitive="true">
+        <path
+           style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="m 49.779183,33.987517 -0.0622,35.30229"
+           id="path1108" />
+        <path
+           style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+           d="M 49.73712,46.41744 49.68901,37.287086"
+           id="path9576"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="0.2063818"
+           inkscape:transform-center-y="4.8256889" />
+        <ellipse
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="circle9582"
+           cx="36.126961"
+           cy="49.027393"
+           transform="matrix(0.01839222,0.99983085,0.99981223,-0.0193779,0,0)"
+           rx="1.2146922"
+           ry="1.1834064" />
+        <text
+           xml:space="preserve"
+           style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="49.771202"
+           y="35.505993"
+           id="text9714"
+           transform="scale(0.98702867,1.0131418)"><tspan
+             sodipodi:role="line"
+             id="tspan9712"
+             style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="49.771202"
+             y="35.505993">3</tspan></text>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/y_l3.svg b/public/assets/capital-letter/y_l3.svg
new file mode 100755
index 0000000..e5c4b4f
--- /dev/null
+++ b/public/assets/capital-letter/y_l3.svg
@@ -0,0 +1,261 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="y_l2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="y.svg.2023_09_26_21_15_33.0.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.03803,52.259761"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-6.8261376,96.826178"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="34.933229,103.49635"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="52.291672,24.857991"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="109.48582,93.369913"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="65.121878,12.99501"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-6" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g19985"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <g
+       id="g365"
+       style="display:inline">
+      <g
+         id="g331"
+         style="display:none">
+        <path
+           style="display:none;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="m 49.732912,37.7382 c 0.07877,0.532133 -12.6959,-28.9379854 -12.6959,-28.9379854"
+           id="path127"
+           sodipodi:nodetypes="cc" />
+        <g
+           id="g338"
+           style="display:none">
+          <path
+             style="display:none;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+             d="M 49.750577,37.720928 C 49.798146,37.584827 62.955606,8.7234554 62.955606,8.7234554"
+             id="path15674"
+             sodipodi:nodetypes="cc" />
+          <text
+             xml:space="preserve"
+             style="font-size:1.83619px;display:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.164709;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+             x="62.28809"
+             y="9.4758034"
+             id="text15678"
+             transform="matrix(1.0012598,-0.00216003,0.00216887,0.9987371,0,0)"><tspan
+               sodipodi:role="line"
+               id="tspan15676"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.164709;stroke-dasharray:none;stroke-opacity:1"
+               x="0"
+               y="0">2</tspan></text>
+          <path
+             style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.30575;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
+             d="m 59.312752,16.534837 c 0.557948,-1.206861 2.660303,-5.869669 2.660303,-5.869669"
+             id="path15682"
+             sodipodi:nodetypes="cc"
+             inkscape:transform-center-x="-0.28036688"
+             inkscape:transform-center-y="-0.19078158" />
+          <ellipse
+             style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+             id="ellipse2536"
+             cx="9.9299078"
+             cy="62.740849"
+             transform="matrix(0.01839222,0.99983085,0.99981223,-0.0193779,0,0)"
+             rx="1.2146922"
+             ry="1.1834064" />
+        </g>
+      </g>
+      <text
+         xml:space="preserve"
+         style="font-size:2.58371px;display:none;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.192263;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="32.750824"
+         y="10.811321"
+         id="text9342"
+         transform="matrix(1.1019552,-0.00695788,0.00846274,0.90742447,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.192263;stroke-dasharray:none;stroke-opacity:1"
+           x="0"
+           y="0">1</tspan></text>
+      <path
+         style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.30575;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 40.273146,16.633595 C 39.783892,15.401437 37.854859,10.674802 37.854859,10.674802"
+         id="path13743"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-1.2642289"
+         inkscape:transform-center-y="-3.0904585" />
+      <ellipse
+         style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="ellipse2538"
+         cx="9.4274664"
+         cy="36.816143"
+         transform="matrix(0.01839222,0.99983085,0.99981223,-0.0193779,0,0)"
+         rx="1.2146922"
+         ry="1.1834064" />
+      <g
+         id="g357"
+         style="display:inline"
+         sodipodi:insensitive="true">
+        <path
+           style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="m 49.779183,33.987517 -0.0622,35.30229"
+           id="path1108" />
+        <path
+           style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+           d="M 49.73712,46.41744 49.68901,37.287086"
+           id="path9576"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="0.2063818"
+           inkscape:transform-center-y="4.8256889" />
+        <ellipse
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="circle9582"
+           cx="36.126961"
+           cy="49.027393"
+           transform="matrix(0.01839222,0.99983085,0.99981223,-0.0193779,0,0)"
+           rx="1.2146922"
+           ry="1.1834064" />
+        <text
+           xml:space="preserve"
+           style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="49.771202"
+           y="35.505993"
+           id="text9714"
+           transform="scale(0.98702867,1.0131418)"><tspan
+             sodipodi:role="line"
+             id="tspan9712"
+             style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="49.771202"
+             y="35.505993">3</tspan></text>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/z.svg b/public/assets/capital-letter/z.svg
new file mode 100755
index 0000000..c4a9a70
--- /dev/null
+++ b/public/assets/capital-letter/z.svg
@@ -0,0 +1,240 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="m_l4.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="n.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="20.033735,110.59253"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="24.949927,104.14192"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="42.983872,11.2698"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="26.464286,94.371578"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="67.525348,25.270843"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="80.076389,122.03504"
+       orientation="1,0"
+       id="guide1929"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="50.744659,55.457668"
+       orientation="0,-1"
+       id="guide2737"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.44011;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 64.774973,9.7399231 C 65.409698,9.3065526 27.753077,9.521892 27.753077,9.521892"
+       id="path127"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g998"
+       transform="translate(35.483848,-11.719616)">
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="-8.0793381"
+         y="22.280218"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="-8.0793381"
+           y="22.280218">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="6.5714946"
+         cy="-21.503662"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 40.873989,9.6604606 c -2.146422,0.02468 -10.408374,0.04547 -10.408374,0.04547"
+       id="path13743"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.08419;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 27.176758,57.923073 C 27.367321,57.715121 65.149463,9.3083839 65.149463,9.3083839"
+       id="path15674"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g21551"
+       transform="rotate(-34.110499,61.02319,0.3679425)"
+       style="display:inline">
+      <text
+         xml:space="preserve"
+         style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="54.113926"
+         y="-23.497944"
+         id="text15678"
+         transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan15676"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+           x="54.113926"
+           y="-23.497944">2</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle15680"
+         cx="-54.018658"
+         cy="25.946033"
+         r="1.2760839"
+         transform="rotate(-144.24458)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 57.175969,19.843452 c 1.298428,-1.709334 6.354908,-8.243269 6.354908,-8.243269"
+       id="path15682"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="3.1551829"
+       inkscape:transform-center-y="4.0420872" />
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.45665;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 27.371962,57.897675 37.471101,0.182684"
+       id="path1108" />
+    <path
+       style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.489119;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+       d="m 39.969224,58.009522 -9.771933,0.02775"
+       id="path9576"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="-4.6933313"
+       inkscape:transform-center-y="1.1412739" />
+    <ellipse
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142347;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+       id="circle9582"
+       cx="-60.34573"
+       cy="21.683584"
+       transform="matrix(-0.10482327,-0.99449087,0.99627769,-0.08620189,0,0)"
+       rx="1.2555509"
+       ry="1.3407919" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.31839px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142334;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+       x="23.191841"
+       y="61.853271"
+       id="text9714"
+       transform="matrix(1.0324615,-0.03671877,0.05488879,0.96660704,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan9712"
+         style="stroke:#f9f6f6;stroke-width:0.142334;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+         x="23.191841"
+         y="61.853271">3</tspan></text>
+    <g
+       id="g2750"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 49.991348,41.79989 74.535166,9.6531683"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 64.440061,21.83391 6.514261,-7.767476"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-11.461075"
+         cy="72.321915"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="71.226562"
+         y="13.74966"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="71.226562"
+           y="13.74966">4</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/z_1.svg b/public/assets/capital-letter/z_1.svg
new file mode 100755
index 0000000..819a189
--- /dev/null
+++ b/public/assets/capital-letter/z_1.svg
@@ -0,0 +1,251 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="z.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="n.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="20.033735,110.59253"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="24.949927,104.14192"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="42.983872,11.2698"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="26.464286,94.371578"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="67.525348,25.270843"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="80.076389,122.03504"
+       orientation="1,0"
+       id="guide1929"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="50.744659,55.457668"
+       orientation="0,-1"
+       id="guide2737"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g1123">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.44011;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 64.774973,9.7399231 C 64.164156,9.6968128 46.48734,9.6570512 35.75837,9.6000391 31.460319,9.5771999 28.277275,9.5515923 27.753077,9.521892"
+         id="path127"
+         sodipodi:nodetypes="csc" />
+      <g
+         id="g998"
+         transform="translate(35.483848,-11.719616)">
+        <text
+           xml:space="preserve"
+           style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="-8.0793381"
+           y="22.280218"
+           id="text9342"
+           transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan9340"
+             style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+             x="-8.0793381"
+             y="22.280218">1</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="path9448"
+           cx="6.5714946"
+           cy="-21.503662"
+           r="1.2760839"
+           transform="rotate(-178.67073)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 40.873989,9.6604606 c -2.146422,0.02468 -10.408374,0.04547 -10.408374,0.04547"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <g
+       id="g1131"
+       style="display:none">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.08419;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 27.176758,57.923073 C 27.367321,57.715121 65.149463,9.3083839 65.149463,9.3083839"
+         id="path15674"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g21551"
+         transform="rotate(-34.110499,61.02319,0.3679425)"
+         style="display:inline">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="54.113926"
+           y="-23.497944"
+           id="text15678"
+           transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="54.113926"
+             y="-23.497944">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-54.018658"
+           cy="25.946033"
+           r="1.2760839"
+           transform="rotate(-144.24458)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 57.175969,19.843452 c 1.298428,-1.709334 6.354908,-8.243269 6.354908,-8.243269"
+         id="path15682"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="3.1551829"
+         inkscape:transform-center-y="4.0420872" />
+    </g>
+    <g
+       id="g1215"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.45665;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 27.371962,57.897675 37.471101,0.182684"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.489119;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="m 39.969224,58.009522 -9.771933,0.02775"
+         id="path9576"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-4.6933313"
+         inkscape:transform-center-y="1.1412739" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142347;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-60.34573"
+         cy="21.683584"
+         transform="matrix(-0.10482327,-0.99449087,0.99627769,-0.08620189,0,0)"
+         rx="1.2555509"
+         ry="1.3407919" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.31839px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142334;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="23.191841"
+         y="61.853271"
+         id="text9714"
+         transform="matrix(1.0324615,-0.03671877,0.05488879,0.96660704,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.142334;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="23.191841"
+           y="61.853271">3</tspan></text>
+    </g>
+    <g
+       id="g2750"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 49.991348,41.79989 74.535166,9.6531683"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 64.440061,21.83391 6.514261,-7.767476"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-11.461075"
+         cy="72.321915"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="71.226562"
+         y="13.74966"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="71.226562"
+           y="13.74966">4</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/z_2.svg b/public/assets/capital-letter/z_2.svg
new file mode 100755
index 0000000..c77c4c0
--- /dev/null
+++ b/public/assets/capital-letter/z_2.svg
@@ -0,0 +1,252 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="z_1.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="n.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="20.033735,110.59253"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="24.949927,104.14192"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="42.983872,11.2698"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="26.464286,94.371578"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="67.525348,25.270843"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="80.076389,122.03504"
+       orientation="1,0"
+       id="guide1929"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="50.744659,55.457668"
+       orientation="0,-1"
+       id="guide2737"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g1123"
+       style="display:none">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.44011;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 64.774973,9.7399231 C 64.164156,9.6968128 46.48734,9.6570512 35.75837,9.6000391 31.460319,9.5771999 28.277275,9.5515923 27.753077,9.521892"
+         id="path127"
+         sodipodi:nodetypes="csc" />
+      <g
+         id="g998"
+         transform="translate(35.483848,-11.719616)">
+        <text
+           xml:space="preserve"
+           style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="-8.0793381"
+           y="22.280218"
+           id="text9342"
+           transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan9340"
+             style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+             x="-8.0793381"
+             y="22.280218">1</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="path9448"
+           cx="6.5714946"
+           cy="-21.503662"
+           r="1.2760839"
+           transform="rotate(-178.67073)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 40.873989,9.6604606 c -2.146422,0.02468 -10.408374,0.04547 -10.408374,0.04547"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <g
+       id="g1131"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.08419;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 27.176758,57.923073 C 27.367321,57.715121 65.149463,9.3083839 65.149463,9.3083839"
+         id="path15674"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g21551"
+         transform="rotate(-34.110499,61.02319,0.3679425)"
+         style="display:inline">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="54.113926"
+           y="-23.497944"
+           id="text15678"
+           transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="54.113926"
+             y="-23.497944">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-54.018658"
+           cy="25.946033"
+           r="1.2760839"
+           transform="rotate(-144.24458)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 57.175969,19.843452 c 1.298428,-1.709334 6.354908,-8.243269 6.354908,-8.243269"
+         id="path15682"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="3.1551829"
+         inkscape:transform-center-y="4.0420872" />
+    </g>
+    <g
+       id="g1215"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.45665;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 27.371962,57.897675 37.471101,0.182684"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.489119;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="m 39.969224,58.009522 -9.771933,0.02775"
+         id="path9576"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-4.6933313"
+         inkscape:transform-center-y="1.1412739" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142347;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-60.34573"
+         cy="21.683584"
+         transform="matrix(-0.10482327,-0.99449087,0.99627769,-0.08620189,0,0)"
+         rx="1.2555509"
+         ry="1.3407919" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.31839px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142334;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="23.191841"
+         y="61.853271"
+         id="text9714"
+         transform="matrix(1.0324615,-0.03671877,0.05488879,0.96660704,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.142334;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="23.191841"
+           y="61.853271">3</tspan></text>
+    </g>
+    <g
+       id="g2750"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 49.991348,41.79989 74.535166,9.6531683"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 64.440061,21.83391 6.514261,-7.767476"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-11.461075"
+         cy="72.321915"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="71.226562"
+         y="13.74966"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="71.226562"
+           y="13.74966">4</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/capital-letter/z_3.svg b/public/assets/capital-letter/z_3.svg
new file mode 100755
index 0000000..814626d
--- /dev/null
+++ b/public/assets/capital-letter/z_3.svg
@@ -0,0 +1,252 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="z_2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="n.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="20.033735,110.59253"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="24.949927,104.14192"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="42.983872,11.2698"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="26.464286,94.371578"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="67.525348,25.270843"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="80.076389,122.03504"
+       orientation="1,0"
+       id="guide1929"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="50.744659,55.457668"
+       orientation="0,-1"
+       id="guide2737"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g1123"
+       style="display:none">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.44011;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 64.774973,9.7399231 C 64.164156,9.6968128 46.48734,9.6570512 35.75837,9.6000391 31.460319,9.5771999 28.277275,9.5515923 27.753077,9.521892"
+         id="path127"
+         sodipodi:nodetypes="csc" />
+      <g
+         id="g998"
+         transform="translate(35.483848,-11.719616)">
+        <text
+           xml:space="preserve"
+           style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="-8.0793381"
+           y="22.280218"
+           id="text9342"
+           transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan9340"
+             style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+             x="-8.0793381"
+             y="22.280218">1</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="path9448"
+           cx="6.5714946"
+           cy="-21.503662"
+           r="1.2760839"
+           transform="rotate(-178.67073)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 40.873989,9.6604606 c -2.146422,0.02468 -10.408374,0.04547 -10.408374,0.04547"
+         id="path13743"
+         sodipodi:nodetypes="cc" />
+    </g>
+    <g
+       id="g1131"
+       style="display:none">
+      <path
+         style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.08419;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 27.176758,57.923073 C 27.367321,57.715121 65.149463,9.3083839 65.149463,9.3083839"
+         id="path15674"
+         sodipodi:nodetypes="cc" />
+      <g
+         id="g21551"
+         transform="rotate(-34.110499,61.02319,0.3679425)"
+         style="display:inline">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="54.113926"
+           y="-23.497944"
+           id="text15678"
+           transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="54.113926"
+             y="-23.497944">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-54.018658"
+           cy="25.946033"
+           r="1.2760839"
+           transform="rotate(-144.24458)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 57.175969,19.843452 c 1.298428,-1.709334 6.354908,-8.243269 6.354908,-8.243269"
+         id="path15682"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="3.1551829"
+         inkscape:transform-center-y="4.0420872" />
+    </g>
+    <g
+       id="g1215"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.45665;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 27.371962,57.897675 37.471101,0.182684"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.489119;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="m 39.969224,58.009522 -9.771933,0.02775"
+         id="path9576"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-4.6933313"
+         inkscape:transform-center-y="1.1412739" />
+      <ellipse
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142347;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         id="circle9582"
+         cx="-60.34573"
+         cy="21.683584"
+         transform="matrix(-0.10482327,-0.99449087,0.99627769,-0.08620189,0,0)"
+         rx="1.2555509"
+         ry="1.3407919" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.31839px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.142334;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+         x="23.191841"
+         y="61.853271"
+         id="text9714"
+         transform="matrix(1.0324615,-0.03671877,0.05488879,0.96660704,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9712"
+           style="stroke:#f9f6f6;stroke-width:0.142334;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           x="23.191841"
+           y="61.853271">3</tspan></text>
+    </g>
+    <g
+       id="g2750"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 49.991348,41.79989 74.535166,9.6531683"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="m 64.440061,21.83391 6.514261,-7.767476"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-11.461075"
+         cy="72.321915"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="71.226562"
+         y="13.74966"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="71.226562"
+           y="13.74966">4</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/src/pages/guided-tracing/a.astro b/src/pages/guided-tracing/a.astro
new file mode 100644
index 0000000..d4f200e
--- /dev/null
+++ b/src/pages/guided-tracing/a.astro
@@ -0,0 +1,184 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer, thirdLayer;
+  let graphics;
+  let isDrawing = false;
+  
+
+  function preload() {
+    this.load.svg('letterA', '/assets/capital-letter/a.svg');
+    this.load.svg('layer1', '/assets/capital-letter/a_l1.svg');
+    this.load.svg('layer2', '/assets/capital-letter/a_l2.svg');
+    this.load.svg('layer3', '/assets/capital-letter/a_l3.svg');
+    this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
+    this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
+    this.load.audio('slide', '/assets/audio/slide.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+  }
+
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+
+    this.time.delayedCall(2000, () => {
+      this.tweens.add({
+        targets: firstScreen,
+        alpha: 0,
+        scaleX: 0.5,
+        scaleY: 0.5,
+        duration: 1000,
+        onComplete: () => {
+          firstScreen.setVisible(false);
+          firstScreen.setScale(1);
+          showLayersWithFadeIn.call(this);
+        }
+      });
+    }, [], this);
+  }
+  function showLayersWithFadeIn() {
+    this.tweens.add({
+      targets: [firstLayer, secondLayer, thirdLayer],
+      alpha: 1,
+      duration: 1000, // Duration of the tween in milliseconds
+      delay: 500,     // Delay before the fade-in starts
+      ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
+    });
+    
+      let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
+      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const slantLeftAudio = this.sound.add('slantLeft');
+      slantLeftAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
+      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const slantRightAudio = this.sound.add('slantRight');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+      thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
+      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const slideAudio = this.sound.add('slide');
+      thirdTextLayer.setVisible(false);
+      thirdLayer.setDepth(1.1);
+      // thirdLayer.setScale(1.15);
+      thirdLayer.setAlpha(0.5);
+      thirdLayer.setInteractive({ draggable: true });
+      thirdLayer.setVisible(false);
+
+      firstLayer.on('drag', (pointer) => {
+        if (pointer.isDown) {
+          firstTextLayer.setVisible(false);
+          secondTextLayer.setVisible(true);
+          slantRightAudio.play();
+          secondLayer.setVisible(true);
+          firstLayer.setAlpha(1);
+          secondLayer.setAlpha(0.5);
+          thirdLayer.setAlpha(0.5);
+        } else {
+          firstLayer.setAlpha(0.5);
+        }
+      });
+
+      secondLayer.on('drag', (pointer) => {
+        if (pointer.isDown) {
+          secondTextLayer.setVisible(false);
+          thirdTextLayer.setVisible(true);
+          slideAudio.play();
+          thirdLayer.setVisible(true);
+          secondLayer.setAlpha(1);
+          thirdLayer.setAlpha(0.5);
+        } else {
+          secondLayer.setAlpha(0.5);
+        }
+      });
+
+      thirdLayer.on('drag', (pointer) => {
+        if (pointer.isDown) {
+          thirdLayer.setAlpha(1);
+          thirdTextLayer.setVisible(false);
+          // const succesImage = this.add.image(customWidth / 2, customHeight / 2, 'succesImage').setDepth(2);
+          // succesImage.setAlpha(0.2);
+          // this.add.text(customWidth / 2, customHeight / 2, 'OK', { font: '700 40px quicksand', fill: '#05b3a4'}).setDepth(2);
+        } else {
+          thirdLayer.setAlpha(0.5);
+        }
+      });
+      graphics = this.add.graphics();
+      graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha)
+
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+  }
+
+  function update() {
+    // Update any game logic if needed
+  }
+</script>
\ No newline at end of file
diff --git a/src/pages/guided-tracing/b.astro b/src/pages/guided-tracing/b.astro
new file mode 100644
index 0000000..535107c
--- /dev/null
+++ b/src/pages/guided-tracing/b.astro
@@ -0,0 +1,184 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer, thirdLayer;
+  let graphics;
+  let isDrawing = false;
+  
+
+  function preload() {
+    this.load.svg('letterB', '/assets/capital-letter/b.svg');
+    this.load.svg('layer1', '/assets/capital-letter/b_l1.svg');
+    this.load.svg('layer2', '/assets/capital-letter/b_l2.svg');
+    this.load.svg('layer3', '/assets/capital-letter/b_l3.svg');
+
+    this.load.audio('tallDown', '/assets/audio/tall-down.mp3');
+    this.load.audio('slideAround', '/assets/audio/slide-around.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+  }
+
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterB');
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+
+    this.time.delayedCall(2000, () => {
+      this.tweens.add({
+        targets: firstScreen,
+        alpha: 0,
+        scaleX: 0.5,
+        scaleY: 0.5,
+        duration: 1000,
+        onComplete: () => {
+          firstScreen.setVisible(false);
+          firstScreen.setScale(1);
+          showLayersWithFadeIn.call(this);
+        }
+      });
+    }, [], this);
+  }
+  function showLayersWithFadeIn() {
+    this.tweens.add({
+      targets: [firstLayer, secondLayer, thirdLayer],
+      alpha: 1,
+      duration: 1000, // Duration of the tween in milliseconds
+      delay: 500,     // Delay before the fade-in starts
+      ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
+    });
+    
+      let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
+      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const slantLeftAudio = this.sound.add('tallDown');
+      slantLeftAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
+      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Slide Around', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const slantRightAudio = this.sound.add('slideAround');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+      thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
+      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+      const thirdTextLayer = this.add.text(textX, textY, '3. Slide Around', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const slideAudio = this.sound.add('slideAround');
+      thirdTextLayer.setVisible(false);
+      thirdLayer.setDepth(1.1);
+      // thirdLayer.setScale(1.15);
+      thirdLayer.setAlpha(0.5);
+      thirdLayer.setInteractive({ draggable: true });
+      thirdLayer.setVisible(false);
+
+      firstLayer.on('drag', (pointer) => {
+        if (pointer.isDown) {
+          firstTextLayer.setVisible(false);
+          secondTextLayer.setVisible(true);
+          slantRightAudio.play();
+          secondLayer.setVisible(true);
+          firstLayer.setAlpha(1);
+          secondLayer.setAlpha(0.5);
+          thirdLayer.setAlpha(0.5);
+        } else {
+          firstLayer.setAlpha(0.5);
+        }
+      });
+
+      secondLayer.on('drag', (pointer) => {
+        if (pointer.isDown) {
+          secondTextLayer.setVisible(false);
+          thirdTextLayer.setVisible(true);
+          slideAudio.play();
+          thirdLayer.setVisible(true);
+          secondLayer.setAlpha(1);
+          thirdLayer.setAlpha(0.5);
+        } else {
+          secondLayer.setAlpha(0.5);
+        }
+      });
+
+      thirdLayer.on('drag', (pointer) => {
+        if (pointer.isDown) {
+          thirdLayer.setAlpha(1);
+          thirdTextLayer.setVisible(false);
+          // const succesImage = this.add.image(customWidth / 2, customHeight / 2, 'succesImage').setDepth(2);
+          // succesImage.setAlpha(0.2);
+          // this.add.text(customWidth / 2, customHeight / 2, 'OK', { font: '700 40px quicksand', fill: '#05b3a4'}).setDepth(2);
+        } else {
+          thirdLayer.setAlpha(0.5);
+        }
+      });
+      graphics = this.add.graphics();
+      graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha)
+
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+  }
+
+  function update() {
+    // Update any game logic if needed
+  }
+</script>
\ No newline at end of file
diff --git a/src/pages/guided-tracing/c.astro b/src/pages/guided-tracing/c.astro
new file mode 100644
index 0000000..42312b1
--- /dev/null
+++ b/src/pages/guided-tracing/c.astro
@@ -0,0 +1,131 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer, thirdLayer;
+  let graphics;
+  let isDrawing = false;
+  
+
+  function preload() {
+    this.load.svg('letterC', '/assets/capital-letter/c_l1.svg');
+    this.load.svg('layer1', '/assets/capital-letter/c_l1.svg');
+
+    this.load.audio('hookAround', '/assets/audio/hook-around.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+  }
+
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : C", { font: '700 40px quicksand', fill: '#05b3a4', });
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterC');
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : C', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+
+    this.time.delayedCall(2000, () => {
+      this.tweens.add({
+        targets: firstScreen,
+        alpha: 0,
+        scaleX: 0.5,
+        scaleY: 0.5,
+        duration: 1000,
+        onComplete: () => {
+          firstScreen.setVisible(false);
+          firstScreen.setScale(1);
+          showLayersWithFadeIn.call(this);
+        }
+      });
+    }, [], this);
+  }
+  function showLayersWithFadeIn() {
+    this.tweens.add({
+      targets: [firstLayer, secondLayer, thirdLayer],
+      alpha: 1,
+      duration: 1000, // Duration of the tween in milliseconds
+      delay: 500,     // Delay before the fade-in starts
+      ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
+    });
+    
+      let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
+      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const slantLeftAudio = this.sound.add('hookAround');
+      slantLeftAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+
+      firstLayer.on('drag', (pointer) => {
+        if (pointer.isDown) {
+          firstTextLayer.setVisible(false);
+          firstLayer.setAlpha(1);
+        } else {
+          firstLayer.setAlpha(0.5);
+        }
+      });
+      graphics = this.add.graphics();
+      graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha)
+
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+  }
+
+  function update() {
+    // Update any game logic if needed
+  }
+</script>
\ No newline at end of file
diff --git a/src/pages/guided-tracing/d.astro b/src/pages/guided-tracing/d.astro
new file mode 100644
index 0000000..e7168d8
--- /dev/null
+++ b/src/pages/guided-tracing/d.astro
@@ -0,0 +1,158 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer, thirdLayer;
+  let graphics;
+  let isDrawing = false;
+  
+
+  function preload() {
+    this.load.svg('letterD', '/assets/capital-letter/d.svg');
+    this.load.svg('layer1', '/assets/capital-letter/d_l1.svg');
+    this.load.svg('layer2', '/assets/capital-letter/d_l2.svg');
+
+    this.load.audio('tallDown', '/assets/audio/tall-down.mp3');
+    this.load.audio('slideAround', '/assets/audio/slide-around.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+  }
+
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : D", { font: '700 40px quicksand', fill: '#05b3a4', });
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterD');
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : D', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+
+    this.time.delayedCall(2000, () => {
+      this.tweens.add({
+        targets: firstScreen,
+        alpha: 0,
+        scaleX: 0.5,
+        scaleY: 0.5,
+        duration: 1000,
+        onComplete: () => {
+          firstScreen.setVisible(false);
+          firstScreen.setScale(1);
+          showLayersWithFadeIn.call(this);
+        }
+      });
+    }, [], this);
+  }
+  function showLayersWithFadeIn() {
+    this.tweens.add({
+      targets: [firstLayer, secondLayer, thirdLayer],
+      alpha: 1,
+      duration: 1000, // Duration of the tween in milliseconds
+      delay: 500,     // Delay before the fade-in starts
+      ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
+    });
+    
+      let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
+      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const slantLeftAudio = this.sound.add('tallDown');
+      slantLeftAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
+      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Slide Around', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const slantRightAudio = this.sound.add('slideAround');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+
+      firstLayer.on('drag', (pointer) => {
+        if (pointer.isDown) {
+          firstTextLayer.setVisible(false);
+          secondTextLayer.setVisible(true);
+          slantRightAudio.play();
+          secondLayer.setVisible(true);
+          firstLayer.setAlpha(1);
+          secondLayer.setAlpha(0.5);
+        } else {
+          firstLayer.setAlpha(0.5);
+        }
+      });
+
+      secondLayer.on('drag', (pointer) => {
+        if (pointer.isDown) {
+          secondTextLayer.setVisible(false);
+          secondLayer.setAlpha(1);
+        } else {
+          secondLayer.setAlpha(0.5);
+        }
+      });
+
+
+      graphics = this.add.graphics();
+      graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha)
+
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+  }
+
+  function update() {
+    // Update any game logic if needed
+  }
+</script>
\ No newline at end of file