new branch! decided to revive this old project. lessons now support markdown, rebrand?

author: altaf-creator <athaalaa@gmail.com> 2024-03-16 17:48:01 +0700
committer: altaf-creator <athaalaa@gmail.com> 2024-03-16 17:48:01 +0700
commit: 3d0ccfba34d6371b41e877189b78599ae7b2f98a (patch)
tree: ea1acfc1a9c545537144edc18124dd16ed9d5099
parent: 06857f20a528d5e7e5d3d2be5c3d4f836c7f366f (diff)
81 files changed, 1597 insertions, 383 deletions
diff --git a/404.html b/404.html
index 8ab2aca..8191157 100644
--- a/404.html
+++ b/404.html
@@ -56,6 +56,9 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
diff --git a/about/author.html b/about/author.html
index e1d880a..1c279ee 100644
--- a/about/author.html
+++ b/about/author.html
@@ -68,6 +68,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/about/school.html b/about/school.html
index 1eff0c5..b8a4587 100644
--- a/about/school.html
+++ b/about/school.html
@@ -178,6 +178,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png
index d27d925..76c2fee 100644
--- a/android-chrome-192x192.png
+++ b/android-chrome-192x192.png
diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png
index 18d8328..b891c0e 100644
--- a/android-chrome-512x512.png
+++ b/android-chrome-512x512.png
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
index aa0faae..f6ceadb 100644
--- a/apple-touch-icon.png
+++ b/apple-touch-icon.png
diff --git a/assets/images/a.svg b/assets/images/a.svg
new file mode 100644
index 0000000..d082934
--- /dev/null
+++ b/assets/images/a.svg
@@ -0,0 +1,288 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="520mm"
+   height="150.66901mm"
+   viewBox="0 0 519.99994 150.66902"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="learningcentre-full.svg"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   inkscape:export-filename="learningcentre.png"
+   inkscape:export-xdpi="182.06798"
+   inkscape:export-ydpi="182.06798"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.1767767"
+     inkscape:cx="958.83679"
+     inkscape:cy="1363.3019"
+     inkscape:window-width="941"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1">
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect21"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       radius="22"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect17"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       radius="22"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect15"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       radius="22"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect12"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       radius="22"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <linearGradient
+       id="linearGradient9"
+       inkscape:collect="always">
+      <stop
+         style="stop-color:#facf00;stop-opacity:1;"
+         offset="0"
+         id="stop9" />
+      <stop
+         style="stop-color:#ffbf00;stop-opacity:1;"
+         offset="1"
+         id="stop10" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient5"
+       inkscape:collect="always">
+      <stop
+         style="stop-color:#003680;stop-opacity:1;"
+         offset="0"
+         id="stop5" />
+      <stop
+         style="stop-color:#0080d7;stop-opacity:1;"
+         offset="1"
+         id="stop6" />
+    </linearGradient>
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect3"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       radius="22"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient5"
+       id="linearGradient6"
+       x1="87.622772"
+       y1="87.165146"
+       x2="138.55142"
+       y2="33.682411"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.94248116,0.33425926,0,1,-12.243248,-99.201463)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient5"
+       id="linearGradient8"
+       x1="40.944897"
+       y1="93.496025"
+       x2="114.80505"
+       y2="73.436928"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(1e-6,-31.851448)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient9"
+       id="linearGradient10"
+       x1="80.037811"
+       y1="69.554726"
+       x2="70.653793"
+       y2="74.40551"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(1e-6,-31.851448)" />
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter12"
+       x="-0.18019559"
+       y="-0.21636504"
+       width="1.3603912"
+       height="1.4327301">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="5.9285487"
+         id="feGaussianBlur12" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter13"
+       x="-0.45711654"
+       y="-0.45711654"
+       width="1.9142331"
+       height="1.9142331">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="4.2167705"
+         id="feGaussianBlur13" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter14"
+       x="-0.19216635"
+       y="-0.21034212"
+       width="1.3843327"
+       height="1.4206842">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="5.9139309"
+         id="feGaussianBlur14" />
+    </filter>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-26.751462,42.240514)">
+    <circle
+       style="opacity:0.261605;fill:#1a1a1a;fill-opacity:1;stroke-width:1.31761;stroke-linecap:round;stroke-linejoin:round;paint-order:fill markers stroke;filter:url(#filter13)"
+       id="circle12"
+       cx="77.874969"
+       cy="39.618011"
+       r="11.06966"
+       inkscape:label="shadow" />
+    <circle
+       style="fill:url(#linearGradient10);stroke-width:1.31761;stroke-linecap:round;stroke-linejoin:round;paint-order:fill markers stroke"
+       id="path1"
+       cx="77.874969"
+       cy="39.618011"
+       r="11.06966" />
+    <path
+       id="path13"
+       style="opacity:0.441016;mix-blend-mode:normal;fill:#1a1a1a;fill-opacity:1;stroke-width:1.31761;stroke-linecap:round;stroke-linejoin:round;paint-order:fill markers stroke;filter:url(#filter14)"
+       d="m 40.944897,30.538559 c 0.266352,-3.58493 6.765129,-3.29432 10.252657,-0.42348 7.394607,6.08705 7.214323,21.72242 16.262816,25.15208 6.960743,2.63835 18.218414,4.91255 23.287454,1.1511 6.13861,-4.55512 9.825296,-7.9007 16.127096,-16.30928 1.58003,-2.10827 6.38625,-1.76461 7.93012,1.4765 -2.63772,10.80295 -12.46718,16.76267 -16.338086,27.325303 -2.09153,5.70718 -2.12908,16.16765 -2.12908,16.16765 0,0 -2.44136,2.32749 -4.28055,4.03672 -7.27183,6.75798 -31.964161,11.497108 -32.320617,-4.61895 C 59.622383,79.327382 56.7112,71.952692 56.064844,69.377352 53.016619,57.231999 41.937507,43.174579 40.944897,30.538559 Z"
+       sodipodi:nodetypes="csssscscsssc"
+       inkscape:label="shadow" />
+    <path
+       id="rect1"
+       style="fill:url(#linearGradient8);stroke-width:1.31761;stroke-linecap:round;stroke-linejoin:round;paint-order:fill markers stroke"
+       d="m 40.944897,30.538559 c 0.266352,-3.58493 6.765129,-3.29432 10.252657,-0.42348 7.394607,6.08705 7.214323,21.72242 16.262816,25.15208 6.960743,2.63835 18.218414,4.91255 23.287454,1.1511 6.13861,-4.55512 9.825296,-7.9007 16.127096,-16.30928 1.58003,-2.10827 6.38625,-1.76461 7.93012,1.4765 -2.63772,10.80295 -12.46718,16.76267 -16.338086,27.325303 -2.09153,5.70718 -2.12908,16.16765 -2.12908,16.16765 0,0 -2.44136,2.32749 -4.28055,4.03672 -7.27183,6.75798 -31.964161,11.497108 -32.320617,-4.61895 C 59.622383,79.327382 56.7112,71.952692 56.064844,69.377352 53.016619,57.231999 41.937507,43.174579 40.944897,30.538559 Z"
+       sodipodi:nodetypes="csssscscsssc" />
+    <path
+       id="path11"
+       style="display:inline;opacity:0.394897;fill:#1a1a1a;fill-opacity:1;stroke-width:1.68209;stroke-linecap:round;stroke-linejoin:round;paint-order:fill markers stroke;filter:url(#filter12)"
+       inkscape:transform-center-x="18.604938"
+       inkscape:transform-center-y="-6.5984046"
+       d="m 67.882531,50.907727 v 30.436385 a 5.8208936,5.8208936 45.000297 0 0 5.820833,5.820893 l 27.838826,2.89e-4 a 19.180108,19.180108 163.11845 0 0 10.6599,-3.234978 l 29.80289,-19.923953 a 10.893143,10.893143 118.11815 0 0 4.83907,-9.055871 V 24.514107 a 3.11044,3.11044 28.118414 0 0 -4.8391,-2.585839 l -29.80283,19.923524 a 19.180873,19.180873 163.11834 0 1 -10.65993,3.23501 l -27.838826,7.6e-5 a 5.8208492,5.8208492 134.99992 0 0 -5.820833,5.820849 z"
+       transform="matrix(0.94248116,0.33425926,0,1,-12.243249,-99.201463)"
+       inkscape:path-effect="#path-effect12"
+       inkscape:original-d="m 67.882531,45.086894 v 42.078051 l 39.480489,4.09e-4 39.48103,-26.394029 V 18.693274 l -39.48103,26.393512 z"
+       inkscape:label="shadow" />
+    <path
+       id="rect2"
+       style="display:inline;fill:url(#linearGradient6);fill-opacity:1;stroke-width:1.633;stroke-linecap:round;stroke-linejoin:round;paint-order:fill markers stroke"
+       inkscape:transform-center-x="18.604938"
+       inkscape:transform-center-y="-6.5984046"
+       d="m 122.76369,-29.878122 a 3.5928736,2.5378993 54.763751 0 0 -1.16997,0.07131 l -28.088706,9.961668 a 22.155853,15.650238 54.763751 0 1 -10.04642,-0.328146 l -26.237672,-9.305376 a 6.7236711,4.7494018 54.763751 0 0 -5.48597,3.875217 V 4.8329378 a 6.7237224,4.749438 54.763751 0 0 5.48597,7.7664502 l 26.237672,9.305893 a 22.15497,15.649613 54.763751 0 0 10.04642,0.328146 l 28.088706,-9.962185 a 12.582685,8.8880353 54.763751 0 0 4.56097,-7.4383036 V -25.603447 a 3.5928736,2.5378993 54.763751 0 0 -3.391,-4.274675 z" />
+    <text
+       xml:space="preserve"
+       style="font-weight:600;font-size:50.8px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Semi-Bold';text-align:center;text-anchor:middle;opacity:1;fill:#000000;fill-opacity:1;stroke:#16274b;stroke-width:3.81799;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke"
+       x="144.67787"
+       y="11.016197"
+       id="text23"><tspan
+         sodipodi:role="line"
+         style="font-size:50.8px;text-align:start;text-anchor:start;opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:3.818"
+         x="144.67787"
+         y="11.016197"
+         id="tspan24">OpenLearning</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:600;font-size:50.8px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Semi-Bold';text-align:center;text-anchor:middle;opacity:1;fill:#000000;fill-opacity:1;stroke:#16274b;stroke-width:3.81799;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke"
+       x="144.67787"
+       y="79.424576"
+       id="text25"><tspan
+         sodipodi:role="line"
+         style="font-style:normal;font-variant:normal;font-weight:800;font-stretch:normal;font-size:50.8px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Ultra-Bold';text-align:start;text-anchor:start;opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:3.818"
+         x="144.67787"
+         y="79.424576"
+         id="tspan25">Centre</tspan></text>
+  </g>
+</svg>
diff --git a/assets/images/hero/library.jpg b/assets/images/hero/library.jpg
new file mode 100644
index 0000000..8351074
--- /dev/null
+++ b/assets/images/hero/library.jpg
diff --git a/assets/images/master.svg b/assets/images/master.svg
index c352b94..14cf61f 100644
--- a/assets/images/master.svg
+++ b/assets/images/master.svg
@@ -2,288 +2,331 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   width="1222.724mm"
-   height="1222.724mm"
-   viewBox="0 0 1222.7241 1222.724"
+   width="380.42001mm"
+   height="170.17mm"
+   viewBox="0 0 380.41997 170.17001"
    version="1.1"
-   id="svg2513"
-   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
-   sodipodi:docname="al_azhar_book_logo-nooutline.svg"
-   inkscape:export-filename="al_azhar_book_logo-nooutline.png"
-   inkscape:export-xdpi="96"
-   inkscape:export-ydpi="96"
+   id="svg1"
+   sodipodi:docname="learningcentre-full.svg"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   inkscape:export-filename="learningcentre-full.png"
+   inkscape:export-xdpi="200"
+   inkscape:export-ydpi="200"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
   <sodipodi:namedview
-     id="namedview2515"
+     id="namedview1"
      pagecolor="#ffffff"
-     bordercolor="#999999"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
+     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="0.083233507"
-     inkscape:cx="738.88512"
-     inkscape:cy="2943.5261"
+     inkscape:zoom="0.28998744"
+     inkscape:cx="1246.6057"
+     inkscape:cy="594.85336"
      inkscape:window-width="1920"
-     inkscape:window-height="1009"
-     inkscape:window-x="-8"
-     inkscape:window-y="-8"
+     inkscape:window-height="1080"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
      inkscape:window-maximized="1"
      inkscape:current-layer="layer1" />
   <defs
-     id="defs2510">
+     id="defs1">
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect21"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       radius="22"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect17"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       radius="22"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect15"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       radius="22"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect12"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       radius="22"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <linearGradient
+       id="linearGradient9"
+       inkscape:collect="always">
+      <stop
+         style="stop-color:#facf00;stop-opacity:1;"
+         offset="0"
+         id="stop9" />
+      <stop
+         style="stop-color:#ffbf00;stop-opacity:1;"
+         offset="1"
+         id="stop10" />
+    </linearGradient>
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect3"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       radius="22"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect12-9"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       radius="22"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
     <filter
        inkscape:collect="always"
        style="color-interpolation-filters:sRGB"
-       id="filter894"
-       x="-0.083667766"
-       y="-0.10386045"
-       width="1.1673355"
-       height="1.2078115">
+       id="filter13-2"
+       x="-0.45711654"
+       y="-0.45711654"
+       width="1.9142331"
+       height="1.9142331">
       <feGaussianBlur
          inkscape:collect="always"
-         stdDeviation="26.04307"
-         id="feGaussianBlur896" />
+         stdDeviation="4.2167705"
+         id="feGaussianBlur13-0" />
     </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient9"
+       id="linearGradient10-2"
+       x1="80.037811"
+       y1="69.554726"
+       x2="70.653793"
+       y2="74.40551"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(18.927927,-31.851448)" />
     <filter
        inkscape:collect="always"
        style="color-interpolation-filters:sRGB"
-       id="filter898"
-       x="-0.13168387"
-       y="-0.12242871"
-       width="1.2633677"
-       height="1.244865">
+       id="filter14-5"
+       x="-0.20915551"
+       y="-0.22893819"
+       width="1.418311"
+       height="1.4578764">
       <feGaussianBlur
          inkscape:collect="always"
-         stdDeviation="26.04307"
-         id="feGaussianBlur900" />
+         stdDeviation="6.4367736"
+         id="feGaussianBlur14-9" />
     </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient5-2"
+       id="linearGradient8-2"
+       x1="40.944897"
+       y1="93.496025"
+       x2="114.80505"
+       y2="73.436928"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(18.927927,-31.851448)" />
+    <linearGradient
+       id="linearGradient5-2"
+       inkscape:collect="always">
+      <stop
+         style="stop-color:#064495;stop-opacity:1;"
+         offset="0"
+         id="stop5-8" />
+      <stop
+         style="stop-color:#0080d7;stop-opacity:1;"
+         offset="1"
+         id="stop6-9" />
+    </linearGradient>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter3"
+       x="-0.22050377"
+       y="-0.26476402"
+       width="1.4410075"
+       height="1.529528">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="7.2547137"
+         id="feGaussianBlur3" />
+    </filter>
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect12-7"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       radius="22"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3"
+       id="linearGradient6-3"
+       x1="87.622772"
+       y1="87.165146"
+       x2="138.55142"
+       y2="33.682411"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.94248116,0.33425926,0,1,6.684678,-99.201463)" />
+    <linearGradient
+       id="linearGradient3"
+       inkscape:collect="always">
+      <stop
+         style="stop-color:#0a4aad;stop-opacity:1;"
+         offset="0"
+         id="stop2" />
+      <stop
+         style="stop-color:#0080d7;stop-opacity:1;"
+         offset="1"
+         id="stop3" />
+    </linearGradient>
   </defs>
   <g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(34.459777,71.368863)">
+     transform="translate(-26.751462,42.240514)">
+    <text
+       xml:space="preserve"
+       style="font-weight:600;font-size:31.75px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Semi-Bold';text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:#16274b;stroke-width:3.81799;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke"
+       x="153.67108"
+       y="36.748005"
+       id="text23"><tspan
+         sodipodi:role="line"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:31.75px;font-family:Montserrat;-inkscape-font-specification:Montserrat;text-align:start;text-anchor:start;opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:3.818"
+         x="153.67108"
+         y="36.748005"
+         id="tspan24">OpenLearning</tspan><tspan
+         sodipodi:role="line"
+         style="font-weight:bold;font-size:31.75px;text-align:start;text-anchor:start;opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:3.818"
+         x="153.67108"
+         y="76.435501"
+         id="tspan25">Centre</tspan></text>
     <g
-       id="g11780"
-       transform="matrix(1.1606496,0,0,1.1606496,-49.848554,-98.452863)">
-      <path
-         id="path914"
-         style="opacity:0.378049;mix-blend-mode:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:33.7855;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers;filter:url(#filter898)"
-         d="m 658.03304,102.72624 -6.26299,19.82032 -20.65443,-2.34038 16.91508,12.08124 -7.8251,17.19946 c -9.94246,-5.74955 -17.26021,-15.81916 -19.06326,-28.06442 -0.8337,-5.66194 -0.40475,-11.21867 1.07492,-16.38433 -5.83666,7.96949 -8.66601,18.14746 -7.11331,28.6924 2.59365,17.6145 16.59688,30.72973 33.41225,32.95524 -34.64683,76.62962 -294.51337,107.21106 -156.77682,310.44115 h -50.12061 v 36.82421 h 41.72118 v 30.82551 h -94.14588 l -9.23245,-251.57413 h 13.49978 v -21.9847 h -16.86424 v -28.16108 h 16.86424 v -21.98468 h -11.90358 c 44.28718,-68.97656 -48.83248,-80.71008 -54.73378,-109.39661 -5.98346,28.5838 -103.69706,37.1456 -54.72987,109.39661 H 258.4078 v 21.98468 h 16.86424 v 28.16108 H 258.4078 v 21.9847 h 13.49978 l -13.49978,367.84828 279.97991,90.14337 279.97937,-90.14337 h 1.24924 V 544.77664 513.95113 H 861.3375 V 477.12692 H 811.21744 C 935.65233,283.32166 688.45147,244.34798 654.46912,167.00982 c 1.60483,-0.0358 3.22541,-0.1702 4.8545,-0.41008 15.62541,-2.30077 27.70968,-13.58006 31.79316,-27.83592 -4.78059,6.52752 -11.57952,11.57165 -19.64375,14.12105 l -6.58311,-19.7136 18.08554,-10.24704 -20.78573,0.16816 z m -1.89343,36.12753 15.33174,14.03166 c -1.96529,0.6212 -4.00507,1.09631 -6.10989,1.40623 -8.68416,1.2787 -17.11943,-0.41442 -24.27758,-4.31146 z m -367.0119,104.20296 h 15.86863 v 28.16108 h -15.86863 z m 29.7243,0 h 15.86864 v 28.16108 h -15.86864 z m 29.7243,0 h 14.16518 v 28.16108 h -14.16518 z" />
-      <g
-         id="g912"
-         transform="translate(-21.92827,14.330519)"
-         style="opacity:0.432927;mix-blend-mode:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:16.8928;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter894)">
-        <path
-           id="path896"
-           style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:16.8928;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-           d="M 148.95021,337.81697 550.90934,466.5695 c 6.10454,1.95534 0,0 11.01894,3.65982 v 521.30839 c -11.01894,-3.253 -4.9144,-1.2977 -11.01894,-3.253 L 148.95021,859.53212 c -6.1045,-1.95538 -11.01896,-13.85032 -11.01896,-26.67037 V 357.42833 c 0,-12.82005 4.91446,-21.56671 11.01896,-19.61136 z"
-           sodipodi:nodetypes="ssccsssss" />
-        <path
-           id="path898"
-           style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:16.8928;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-           d="M 148.95021,318.2464 550.90934,446.999 c 6.10454,1.95533 0,0 11.01894,3.65982 v 521.30839 c -11.01894,-3.2531 -4.9144,-1.2977 -11.01894,-3.2531 L 148.95021,839.96161 c -6.1045,-1.95537 -11.01896,-13.85037 -11.01896,-26.67041 V 337.85776 c 0,-12.82004 4.91446,-21.56671 11.01896,-19.61136 z"
-           sodipodi:nodetypes="ssccsssss" />
-        <path
-           id="path900"
-           style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:16.8928;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-           d="M 974.90631,337.81697 572.94721,466.5695 c -6.10453,1.95534 0,0 -11.01893,3.65982 v 521.30839 c 11.01893,-3.253 4.9144,-1.2977 11.01893,-3.253 l 401.9591,-128.75259 c 6.10453,-1.95538 11.01898,-13.85032 11.01898,-26.67037 V 357.42833 c 0,-12.82005 -4.91445,-21.56671 -11.01898,-19.61136 z"
-           sodipodi:nodetypes="ssccsssss" />
-        <path
-           id="path902"
-           style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:16.8928;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-           d="M 974.90631,318.2464 572.94721,446.999 c -6.10453,1.95533 0,0 -11.01893,3.65982 v 521.30839 c 11.01893,-3.2531 4.9144,-1.2977 11.01893,-3.2531 l 401.9591,-128.7525 c 6.10453,-1.95537 11.01898,-13.85037 11.01898,-26.67041 V 337.85776 c 0,-12.82004 -4.91445,-21.56671 -11.01898,-19.61136 z"
-           sodipodi:nodetypes="ssccsssss" />
-        <path
-           id="path904"
-           style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:16.8928;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-           d="m 185.77135,338.61428 366.12041,117.27288 c 5.56028,1.781 0,0 10.03652,3.33353 v 474.82852 c -10.03652,-2.9631 -4.47624,-1.182 -10.03652,-2.9631 L 185.77135,813.81322 c -5.56023,-1.781 -10.03651,-12.61543 -10.03651,-24.29245 v -433.0437 c 0,-11.67698 4.47628,-19.6438 10.03651,-17.86279 z"
-           sodipodi:nodetypes="ssccsssss" />
-        <path
-           id="path906"
-           style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:16.8928;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-           d="m 938.08519,338.6143 -366.1204,117.27286 c -5.56028,1.781 0,0 -10.03651,3.33353 v 474.82852 c 10.03651,-2.9631 4.47623,-1.182 10.03651,-2.9631 l 366.1204,-117.27289 c 5.56023,-1.781 10.03651,-12.61543 10.03651,-24.29245 v -433.0437 c 0,-11.67697 -4.47628,-19.64378 -10.03651,-17.86277 z"
-           sodipodi:nodetypes="ssccsssss" />
-        <path
-           id="path908"
-           style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:16.8928;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-           d="m 185.77135,309.25842 366.12041,117.27285 c 5.56028,1.78099 0,0 10.03652,3.33353 v 474.82855 c -10.03652,-2.9631 -4.47624,-1.18205 -10.03652,-2.9631 L 185.77135,784.45732 c -5.56023,-1.78099 -10.03651,-12.61543 -10.03651,-24.29245 V 327.12124 c 0,-11.67701 4.47628,-19.64382 10.03651,-17.86282 z"
-           sodipodi:nodetypes="ssccsssss" />
-        <path
-           id="path910"
-           style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:16.8928;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-           d="m 938.08519,309.25844 -366.1204,117.27283 c -5.56028,1.78099 0,0 -10.03651,3.33353 v 474.82855 c 10.03651,-2.9631 4.47623,-1.18205 10.03651,-2.9631 l 366.1204,-117.27293 c 5.56023,-1.78099 10.03651,-12.61543 10.03651,-24.29245 V 327.12124 c 0,-11.67699 -4.47628,-19.6438 -10.03651,-17.8628 z"
-           sodipodi:nodetypes="ssccsssss" />
-      </g>
-      <g
-         id="g6389"
-         transform="translate(-21.92827,14.330519)"
-         style="opacity:1">
-        <path
-           id="path2845"
-           style="fill:#3a6b9a;fill-opacity:1;stroke-width:9.24594;stroke-linecap:round;stroke-linejoin:round"
-           d="M 148.95021,337.81697 550.90934,466.5695 c 6.10454,1.95534 0,0 11.01894,3.65982 v 521.30839 c -11.01894,-3.253 -4.9144,-1.2977 -11.01894,-3.253 L 148.95021,859.53212 c -6.1045,-1.95538 -11.01896,-13.85032 -11.01896,-26.67037 V 357.42833 c 0,-12.82005 4.91446,-21.56671 11.01896,-19.61136 z"
-           sodipodi:nodetypes="ssccsssss" />
-        <path
-           id="rect1889"
-           style="fill:#397fc3;stroke-width:9.24594;stroke-linecap:round;stroke-linejoin:round"
-           d="M 148.95021,318.2464 550.90934,446.999 c 6.10454,1.95533 0,0 11.01894,3.65982 v 521.30839 c -11.01894,-3.2531 -4.9144,-1.2977 -11.01894,-3.2531 L 148.95021,839.96161 c -6.1045,-1.95537 -11.01896,-13.85037 -11.01896,-26.67041 V 337.85776 c 0,-12.82004 4.91446,-21.56671 11.01896,-19.61136 z"
-           sodipodi:nodetypes="ssccsssss" />
-        <path
-           id="path2847"
-           style="fill:#3a6b9a;fill-opacity:1;stroke-width:9.24594;stroke-linecap:round;stroke-linejoin:round"
-           d="M 974.90631,337.81697 572.94721,466.5695 c -6.10453,1.95534 0,0 -11.01893,3.65982 v 521.30839 c 11.01893,-3.253 4.9144,-1.2977 11.01893,-3.253 l 401.9591,-128.75259 c 6.10453,-1.95538 11.01898,-13.85032 11.01898,-26.67037 V 357.42833 c 0,-12.82005 -4.91445,-21.56671 -11.01898,-19.61136 z"
-           sodipodi:nodetypes="ssccsssss" />
-        <path
-           id="path2849"
-           style="fill:#397fc3;stroke-width:9.24594;stroke-linecap:round;stroke-linejoin:round"
-           d="M 974.90631,318.2464 572.94721,446.999 c -6.10453,1.95533 0,0 -11.01893,3.65982 v 521.30839 c 11.01893,-3.2531 4.9144,-1.2977 11.01893,-3.2531 l 401.9591,-128.7525 c 6.10453,-1.95537 11.01898,-13.85037 11.01898,-26.67041 V 337.85776 c 0,-12.82004 -4.91445,-21.56671 -11.01898,-19.61136 z"
-           sodipodi:nodetypes="ssccsssss" />
-        <path
-           id="path2859"
-           style="fill:#e5e5e5;fill-opacity:1;stroke-width:8.42157;stroke-linecap:round;stroke-linejoin:round"
-           d="m 185.77135,338.61428 366.12041,117.27288 c 5.56028,1.781 0,0 10.03652,3.33353 v 474.82852 c -10.03652,-2.9631 -4.47624,-1.182 -10.03652,-2.9631 L 185.77135,813.81322 c -5.56023,-1.781 -10.03651,-12.61543 -10.03651,-24.29245 v -433.0437 c 0,-11.67698 4.47628,-19.6438 10.03651,-17.86279 z"
-           sodipodi:nodetypes="ssccsssss" />
-        <path
-           id="path2861"
-           style="fill:#e5e5e5;fill-opacity:1;stroke-width:8.42157;stroke-linecap:round;stroke-linejoin:round"
-           d="m 938.08519,338.6143 -366.1204,117.27286 c -5.56028,1.781 0,0 -10.03651,3.33353 v 474.82852 c 10.03651,-2.9631 4.47623,-1.182 10.03651,-2.9631 l 366.1204,-117.27289 c 5.56023,-1.781 10.03651,-12.61543 10.03651,-24.29245 v -433.0437 c 0,-11.67697 -4.47628,-19.64378 -10.03651,-17.86277 z"
-           sodipodi:nodetypes="ssccsssss" />
-        <path
-           id="path2863"
-           style="fill:#ffffff;fill-opacity:1;stroke-width:8.42157;stroke-linecap:round;stroke-linejoin:round"
-           d="m 185.77135,309.25842 366.12041,117.27285 c 5.56028,1.78099 0,0 10.03652,3.33353 v 474.82855 c -10.03652,-2.9631 -4.47624,-1.18205 -10.03652,-2.9631 L 185.77135,784.45732 c -5.56023,-1.78099 -10.03651,-12.61543 -10.03651,-24.29245 V 327.12124 c 0,-11.67701 4.47628,-19.64382 10.03651,-17.86282 z"
-           sodipodi:nodetypes="ssccsssss" />
-        <path
-           id="path2865"
-           style="fill:#ffffff;fill-opacity:1;stroke-width:8.42157;stroke-linecap:round;stroke-linejoin:round"
-           d="m 938.08519,309.25844 -366.1204,117.27283 c -5.56028,1.78099 0,0 -10.03651,3.33353 v 474.82855 c 10.03651,-2.9631 4.47623,-1.18205 10.03651,-2.9631 l 366.1204,-117.27293 c 5.56023,-1.78099 10.03651,-12.61543 10.03651,-24.29245 V 327.12124 c 0,-11.67699 -4.47628,-19.6438 -10.03651,-17.8628 z"
-           sodipodi:nodetypes="ssccsssss" />
-      </g>
-      <path
-         id="rect4371"
-         style="fill:#397fc3;fill-opacity:1;stroke:#ffffff;stroke-width:16.8652;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
-         d="m 658.03304,102.72624 -6.26299,19.82032 -20.65443,-2.34038 16.91508,12.08124 -7.8251,17.19946 c -9.94246,-5.74955 -17.26021,-15.81916 -19.06326,-28.06442 -0.8337,-5.66194 -0.40475,-11.21867 1.07492,-16.38433 -5.83666,7.96949 -8.66601,18.14746 -7.11331,28.6924 2.59365,17.6145 16.59688,30.72973 33.41225,32.95524 -34.64683,76.62962 -294.51337,107.21106 -156.77682,310.44115 h -50.12061 v 36.82421 h 41.72118 v 30.82551 h -94.14588 l -9.23245,-251.57413 h 13.49978 v -21.9847 h -16.86424 v -28.16108 h 16.86424 v -21.98468 h -11.90358 c 44.28718,-68.97656 -48.83248,-80.71008 -54.73378,-109.39661 -5.98346,28.5838 -103.69706,37.1456 -54.72987,109.39661 H 258.4078 v 21.98468 h 16.86424 v 28.16108 H 258.4078 v 21.9847 h 13.49978 l -13.49978,367.84828 279.97991,90.14337 279.97937,-90.14337 h 1.24924 V 544.77664 513.95113 H 861.3375 V 477.12692 H 811.21744 C 935.65233,283.32166 688.45147,244.34798 654.46912,167.00982 c 1.60483,-0.0358 3.22541,-0.1702 4.8545,-0.41008 15.62541,-2.30077 27.70968,-13.58006 31.79316,-27.83592 -4.78059,6.52752 -11.57952,11.57165 -19.64375,14.12105 l -6.58311,-19.7136 18.08554,-10.24704 -20.78573,0.16816 z m -1.89343,36.12753 15.33174,14.03166 c -1.96529,0.6212 -4.00507,1.09631 -6.10989,1.40623 -8.68416,1.2787 -17.11943,-0.41442 -24.27758,-4.31146 z m -367.0119,104.20296 h 15.86863 v 28.16108 h -15.86863 z m 29.7243,0 h 15.86864 v 28.16108 h -15.86864 z m 29.7243,0 h 14.16518 v 28.16108 h -14.16518 z" />
-    </g>
-    <g
-       id="g11750"
-       transform="matrix(1.1668717,0,0,1.1668717,1315.9939,-111.31477)">
-      <path
-         id="path11718"
-         style="fill:#397fc3;fill-opacity:1;stroke-width:7.60053;stroke-linecap:round;stroke-linejoin:round"
-         d="m 360.63074,-39.101977 h 85.6511 L 456.98281,252.48086 H 349.92977 Z"
-         sodipodi:nodetypes="ccccc" />
-      <rect
-         style="fill:#397fc3;fill-opacity:1;stroke:none;stroke-width:9.74587;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
-         id="rect11720"
-         width="107.05305"
-         height="17.426733"
-         x="349.92975"
-         y="-56.528709" />
-      <rect
-         style="fill:#397fc3;fill-opacity:1;stroke:none;stroke-width:9.74587;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
-         id="rect11722"
-         width="107.05305"
-         height="17.426733"
-         x="349.92975"
-         y="-96.27813" />
-      <rect
-         style="fill:#397fc3;fill-opacity:1;stroke:none;stroke-width:8.55009;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
-         id="rect11724"
-         width="10.982793"
-         height="22.322678"
-         x="363.29749"
-         y="-78.851402" />
-      <rect
-         style="fill:#397fc3;fill-opacity:1;stroke:none;stroke-width:8.55009;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
-         id="rect11726"
-         width="10.982793"
-         height="22.322678"
-         x="386.85922"
-         y="-78.851402" />
-      <rect
-         style="fill:#397fc3;fill-opacity:1;stroke:none;stroke-width:8.55009;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
-         id="rect11728"
-         width="10.982793"
-         height="22.322678"
-         x="410.42096"
-         y="-78.851402" />
-      <rect
-         style="fill:#397fc3;fill-opacity:1;stroke:none;stroke-width:8.55009;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
-         id="rect11730"
-         width="10.982793"
-         height="22.322678"
-         x="432.63226"
-         y="-78.851402" />
-      <path
-         id="path11732"
-         style="fill:#397fc3;fill-opacity:1;stroke-width:36.7289;stroke-linecap:round;stroke-linejoin:round"
-         d="M 661.5023,-146.39648 C 647.6597,-80.268497 421.60082,-60.461627 534.88529,106.68944 H 661.5023 788.12671 C 890.58413,-52.886287 675.15481,-80.030867 661.5023,-146.39648 Z"
-         sodipodi:nodetypes="ccccc" />
-      <rect
-         style="fill:#397fc3;fill-opacity:1;stroke:none;stroke-width:8.33521;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
-         id="rect11734"
-         width="332.69965"
-         height="29.189934"
-         x="495.15591"
-         y="106.68943" />
-      <rect
-         style="fill:#397fc3;fill-opacity:1;stroke:none;stroke-width:10.5511;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
-         id="rect11736"
-         width="266.55688"
-         height="58.379883"
-         x="528.22729"
-         y="106.68943" />
-      <path
-         id="path11738"
-         style="fill:#397fc3;stroke-width:17.0613;stroke-linecap:round;stroke-linejoin:round"
-         d="m 353.31226,160.31358 h 441.47189 v 92.16733 l -444.85438,-5e-5 z"
-         sodipodi:nodetypes="ccccc" />
-      <path
-         id="path11740"
-         style="fill:#397fc3;fill-opacity:1;stroke-width:2.11535;stroke-linecap:round;stroke-linejoin:round"
-         d="m 638.31145,-188.25484 c -4.62656,6.3172 -6.86933,14.3849 -5.63855,22.74359 2.4846,16.87391 18.17763,28.53913 35.05154,26.05453 12.38584,-1.82376 21.96484,-10.76445 25.20171,-22.06469 -4.7132,6.43549 -11.90015,11.05458 -20.41536,12.3084 -16.87391,2.4846 -32.56695,-9.18061 -35.05155,-26.05452 -0.66084,-4.48807 -0.32069,-8.89263 0.85221,-12.98731 z" />
+       id="g3"
+       transform="translate(-17.673104,11.756241)">
+      <circle
+         style="opacity:0.291225;fill:#1a1a1a;fill-opacity:1;stroke-width:1.31761;stroke-linecap:round;stroke-linejoin:round;paint-order:fill markers stroke;filter:url(#filter13-2)"
+         id="circle12-1"
+         cx="96.802895"
+         cy="39.618011"
+         r="11.06966"
+         inkscape:label="shadow" />
+      <circle
+         style="fill:url(#linearGradient10-2);stroke-width:1.31761;stroke-linecap:round;stroke-linejoin:round;paint-order:fill markers stroke"
+         id="path1-2"
+         cx="96.802895"
+         cy="39.618011"
+         r="11.06966" />
       <path
-         sodipodi:type="star"
-         style="fill:#397fc3;fill-opacity:1;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"
-         id="path11742"
-         inkscape:flatsided="false"
-         sodipodi:sides="5"
-         sodipodi:cx="662.54303"
-         sodipodi:cy="-191.53944"
-         sodipodi:r1="27.802675"
-         sodipodi:r2="9.0385761"
-         sodipodi:arg1="-0.26179939"
-         sodipodi:arg2="0.36651914"
-         inkscape:rounded="0"
-         inkscape:randomized="0"
-         d="m 689.39835,-198.73531 -18.41708,10.435 6.70418,20.07815 -15.61546,-14.29109 -17.02375,12.58054 8.7662,-19.26738 -17.22544,-12.30294 21.03327,2.3832 6.37784,-20.18419 4.23308,20.74028 z"
-         inkscape:transform-center-x="-0.34999731"
-         inkscape:transform-center-y="-1.7308465"
-         transform="matrix(0.77838285,0,0,0.77838285,149.85672,-19.385008)" />
+         id="path13-9"
+         style="opacity:0.35198;mix-blend-mode:normal;fill:#1a1a1a;fill-opacity:1;stroke-width:1.31761;stroke-linecap:round;stroke-linejoin:round;paint-order:fill markers stroke;filter:url(#filter14-5)"
+         d="m 59.872823,30.538559 c 0.266352,-3.58493 6.765129,-3.29432 10.252657,-0.42348 7.394607,6.08705 7.214323,21.72242 16.262816,25.15208 6.960743,2.63835 18.218414,4.91255 23.287454,1.1511 6.13861,-4.55512 9.8253,-7.9007 16.1271,-16.30928 1.58003,-2.10827 6.38625,-1.76461 7.93012,1.4765 -2.63772,10.80295 -12.46718,16.76267 -16.33809,27.325303 -2.09153,5.70718 -2.12908,16.16765 -2.12908,16.16765 0,0 -2.44136,2.32749 -4.28055,4.03672 -7.27183,6.75798 -31.964161,11.497108 -32.320617,-4.61895 C 78.550309,79.327382 75.639126,71.952692 74.99277,69.377352 71.944545,57.231999 60.865433,43.174579 59.872823,30.538559 Z"
+         sodipodi:nodetypes="csssscscsssc"
+         inkscape:label="shadow" />
       <path
-         id="path11744"
-         style="fill:#397fc3;fill-opacity:1;stroke-width:12.5845;stroke-linecap:round;stroke-linejoin:round"
-         d="m 404.16149,-182.99367 c -4.74293,22.65761 -82.19812,29.4441 -43.38314,86.71554 h 43.38314 43.38568 c 35.10527,-54.67588 -38.70788,-63.9765 -43.38568,-86.71554 z"
-         sodipodi:nodetypes="ccccc" />
+         id="rect1-3"
+         style="fill:url(#linearGradient8-2);stroke-width:1.31761;stroke-linecap:round;stroke-linejoin:round;paint-order:fill markers stroke"
+         d="m 59.872823,30.538559 c 0.266352,-3.58493 6.765129,-3.29432 10.252657,-0.42348 7.394607,6.08705 7.214323,21.72242 16.262816,25.15208 6.960743,2.63835 18.218414,4.91255 23.287454,1.1511 6.13861,-4.55512 9.8253,-7.9007 16.1271,-16.30928 1.58003,-2.10827 6.38625,-1.76461 7.93012,1.4765 -2.63772,10.80295 -12.46718,16.76267 -16.33809,27.325303 -2.09153,5.70718 -2.12908,16.16765 -2.12908,16.16765 0,0 -2.44136,2.32749 -4.28055,4.03672 -7.27183,6.75798 -31.964161,11.497108 -32.320617,-4.61895 C 78.550309,79.327382 75.639126,71.952692 74.99277,69.377352 71.944545,57.231999 60.865433,43.174579 59.872823,30.538559 Z"
+         sodipodi:nodetypes="csssscscsssc" />
       <path
-         id="path11746"
-         style="fill:#397fc3;stroke-width:1.91968;stroke-linecap:round;stroke-linejoin:round"
-         d="m 349.92977,252.48086 h 221.9321 v 71.45443 z"
-         sodipodi:nodetypes="cccc" />
+         id="path11-1"
+         style="display:inline;opacity:0.388559;fill:#1a1a1a;fill-opacity:1;stroke-width:1.68209;stroke-linecap:round;stroke-linejoin:round;paint-order:fill markers stroke;filter:url(#filter3)"
+         inkscape:transform-center-x="18.604938"
+         inkscape:transform-center-y="-6.5984046"
+         d="m 67.882531,50.907727 v 30.436385 a 5.8208936,5.8208936 45.000297 0 0 5.820833,5.820893 l 27.838826,2.89e-4 a 19.180108,19.180108 163.11845 0 0 10.6599,-3.234978 l 29.80289,-19.923953 a 10.893143,10.893143 118.11815 0 0 4.83907,-9.055871 V 24.514107 a 3.11044,3.11044 28.118414 0 0 -4.8391,-2.585839 l -29.80283,19.923524 a 19.180873,19.180873 163.11834 0 1 -10.65993,3.23501 l -27.838826,7.6e-5 a 5.8208492,5.8208492 134.99992 0 0 -5.820833,5.820849 z"
+         transform="matrix(0.94248116,0.33425926,0,1,6.684677,-99.201463)"
+         inkscape:path-effect="#path-effect12-7"
+         inkscape:original-d="m 67.882531,45.086894 v 42.078051 l 39.480489,4.09e-4 39.48103,-26.394029 V 18.693274 l -39.48103,26.393512 z"
+         inkscape:label="shadow" />
       <path
-         id="path11748"
-         style="fill:#397fc3;stroke-width:1.91968;stroke-linecap:round;stroke-linejoin:round"
-         d="m 793.79397,252.48086 h -221.9321 v 71.45443 z"
-         sodipodi:nodetypes="cccc" />
+         id="rect2-9"
+         style="display:inline;fill:url(#linearGradient6-3);fill-opacity:1;stroke-width:1.633;stroke-linecap:round;stroke-linejoin:round;paint-order:fill markers stroke"
+         inkscape:transform-center-x="18.604938"
+         inkscape:transform-center-y="-6.5984046"
+         d="m 141.69162,-29.878122 a 3.5928736,2.5378993 54.763751 0 0 -1.16997,0.07131 l -28.08871,9.961668 a 22.155853,15.650238 54.763751 0 1 -10.04642,-0.328146 l -26.237672,-9.305376 a 6.7236711,4.7494018 54.763751 0 0 -5.48597,3.875217 V 4.8329378 a 6.7237224,4.749438 54.763751 0 0 5.48597,7.7664502 l 26.237672,9.305893 a 22.15497,15.649613 54.763751 0 0 10.04642,0.328146 l 28.08871,-9.962185 a 12.582685,8.8880353 54.763751 0 0 4.56097,-7.4383036 V -25.603447 a 3.5928736,2.5378993 54.763751 0 0 -3.391,-4.274675 z" />
     </g>
   </g>
 </svg>
diff --git a/contribute/index.html b/contribute/index.html
index 420bf72..833ad8a 100644
--- a/contribute/index.html
+++ b/contribute/index.html
@@ -76,6 +76,7 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
diff --git a/favicon-16x16.png b/favicon-16x16.png
index 206374a..e4d0f7c 100644
--- a/favicon-16x16.png
+++ b/favicon-16x16.png
diff --git a/favicon-32x32.png b/favicon-32x32.png
index 150f3fc..473c899 100644
--- a/favicon-32x32.png
+++ b/favicon-32x32.png
diff --git a/favicon.ico b/favicon.ico
index 18cfc65..a6146c5 100644
--- a/favicon.ico
+++ b/favicon.ico
diff --git a/index.html b/index.html
index 9dc01cd..65c3265 100644
--- a/index.html
+++ b/index.html
@@ -26,8 +26,6 @@
             <a href="/index.html">
                 <img src="/assets/images/master.svg" alt="" class="sidebar-logo">
             </a>
-
-            <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
         </div>
 
         <div>
@@ -47,8 +45,8 @@
         <div class="banner-bg" id="img-alazhar"></div>
         <div class="gradient-bg"></div>
         <div class="banner-text-container">
-            <h1 class="banner-text" id="banner-txt">Al Azhar 9th Grade Lesson Notes</h1>
-            <h3 class="banner-text" id="banner-txt">A studying website</h3>
+            <h1 class="banner-text" id="banner-txt">Welcome to OpenLearning Centre!</h1>
+            <h3 class="banner-text" id="banner-txt">A studying website mainly for Al Azhar SMP students.</h3>
         </div>
     </div>
 
@@ -59,8 +57,7 @@
     <div id="main">
         <section>
             <h1 id="welcome">A Warm Welcome</h1>
-            <p>Welcome to the "(Unofficial) Al Azhar Lesson Summary for 9th Grade" website! This website is used for
-                notes taken by Altaf about the subjects. Choose a subuject below to start reading.</p>
+            <p>Welcome to OpenLearning Centre! This is a website meant for middle school students (mainly Al Azhar) to study and / or an extra reference for studying. Choose a subuject below to start reading.</p>
             <h1 id="github">Contributing and Source Code</h1>
             <p>
                 If you want to contribute to the project or want to view the source code, it's all available at GitHub! <br>
@@ -72,119 +69,8 @@
             </p>
             <h1 style="display: inline;" id="lessons">Lessons</h1> <a href="/lessons/"><span
                     style="margin-left: 10px;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span></a>
-            <div class="card-container">
-                <div class="card">
-                    <a href="/lessons/matematika/" class="link-card"></a>
-                    <img src="/assets/images/hero/math.jpg" alt="" class="card-img">
-                    <a href="/lessons/1/">
-                        <h2>Mathematics</h2>
-                    </a>
-                    <p>Hidayatullah, S.Pd.</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/fisika/" class="link-card"></a>
-                    <img src="/assets/images/hero/physics.jpg" alt="" class="card-img">
-                    <a href="/lessons/2/">
-                        <h2>Physics</h2>
-                    </a>
-                    <p>Ayu Rezky Yulita, M.Pd.</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/biologi/" class="link-card"></a>
-                    <img src="/assets/images/hero/biology.jpg" alt="" class="card-img">
-                    <a href="/lessons/3/">
-                        <h2>Biology</h2>
-                    </a>
-                    <p>Ir. Hj. Wiwit Parminta</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/ips/" class="link-card"></a>
-                    <img src="/assets/images/hero/ips.jpg" alt="" class="card-img">
-                    <a href="/lessons/3/">
-                        <h2>Social Studies (IPS)</h2>
-                    </a>
-                    <p>Unaeni Jahroh S.Pd.</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/agama/" class="link-card"></a>
-                    <img src="/assets/images/hero/alazhar.jpg" alt="" class="card-img">
-                    <a href="/lessons/3/">
-                        <h2>Islamic Education (Agama)</h2>
-                    </a>
-                    <p>Akrom Hasani, S.Ag.</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/quran/" class="link-card"></a>
-                    <img src="/assets/images/hero/quran.jpg" alt="" class="card-img">
-                    <a href="/lessons/3/">
-                        <h2>Al-Qur'an</h2>
-                    </a>
-                    <p>Muhammad Fathan S.Ag</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/arab/" class="link-card"></a>
-                    <img src="/assets/images/hero/arabic.png" alt="" class="card-img">
-                    <a href="/lessons/3/">
-                        <h2>Arabic</h2>
-                    </a>
-                    <p>Mohammad Amar, Lc.</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/ppkn/" class="link-card"></a>
-                    <img src="/assets/images/hero/ppkn.jpg" alt="" class="card-img">
-                    <a href="/lessons/3/">
-                        <h2>Civics Education (PPKn)</h2>
-                    </a>
-                    <p>Andini Nurlaily Hikmah, S.Pd.</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/informatika/" class="link-card"></a>
-                    <img src="/assets/images/hero/laptop.jpg" alt="" class="card-img">
-                    <a href="/lessons/3/">
-                        <h2>Informatics (Informatika)</h2>
-                    </a>
-                    <p>Nurbaeti, SE., M.Ak</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/english/" class="link-card"></a>
-                    <img src="https://img-cdn.inc.com/image/upload/w_1920,h_1080,c_fill/images/panoramic/GettyImages-577674005_492115_zfpgiw.jpg" alt="" class="card-img">
-                    <a href="/lessons/3/">
-                        <h2>English</h2>
-                    </a>
-                    <p>Sofia Nurbaiti, S.Pd.</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/indonesia/" class="link-card"></a>
-                    <img src="/assets/images/hero/books.jpg" alt="" class="card-img">
-                    <a href="/lessons/3/">
-                        <h2>Bahasa Indonesia</h2>
-                    </a>
-                    <p>Maman Sulaeman, S.Pd.</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/musik/" class="link-card"></a>
-                    <img src="/assets/images/hero/music.jpg" alt="" class="card-img">
-                    <a href="/lessons/3/">
-                        <h2>Music</h2>
-                    </a>
-                    <p>Dra. Kusnun Indrawati</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/lukis/" class="link-card"></a>
-                    <img src="/assets/images/hero/paint.jpg" alt="" class="card-img">
-                    <a href="/lessons/3/">
-                        <h2>Art</h2>
-                    </a>
-                    <p>Miftah Izharul Haq, S.Pd</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/pjok/" class="link-card"></a>
-                    <img src="/assets/images/hero/sports.jpg" alt="" class="card-img">
-                    <a href="/lessons/3/">
-                        <h2>Sports</h2>
-                    </a>
-                    <p>Supatri, S.Pd</p>
-                </div>
+            <div class="card-container" id="subject-container">
+	    <!-- /scripts/lesson.js - loadSubjects(); -->
             </div>
             <h1 id="contributors">Credits & Contributors</h1>
             <div class="flex">
@@ -270,6 +156,8 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/lesson.js"></script>
+    <script src="/scripts/onload/list.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
diff --git a/indonesia.html b/indonesia.html
index c73792e..3c96df4 100644
--- a/indonesia.html
+++ b/indonesia.html
@@ -269,7 +269,9 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
-</html>
-\ No newline at end of file
+</html>
+
diff --git a/lessons/agama/index.html b/lessons/agama/index.html
index 5625193..5af8124 100644
--- a/lessons/agama/index.html
+++ b/lessons/agama/index.html
@@ -61,6 +61,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/agama/kiamat/index.html b/lessons/agama/kiamat/index.html
index ed7cc01..29638b3 100644
--- a/lessons/agama/kiamat/index.html
+++ b/lessons/agama/kiamat/index.html
@@ -69,6 +69,7 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
diff --git a/lessons/agama/qurban/1.html b/lessons/agama/qurban/1.html
index eabd317..26a624b 100644
--- a/lessons/agama/qurban/1.html
+++ b/lessons/agama/qurban/1.html
@@ -143,6 +143,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/agama/qurban/2.html b/lessons/agama/qurban/2.html
index cf43477..ca5f714 100644
--- a/lessons/agama/qurban/2.html
+++ b/lessons/agama/qurban/2.html
@@ -143,6 +143,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/agama/zakat/index.html b/lessons/agama/zakat/index.html
index 802742c..f474734 100644
--- a/lessons/agama/zakat/index.html
+++ b/lessons/agama/zakat/index.html
@@ -67,6 +67,7 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
diff --git a/lessons/arab/chapter/note.html b/lessons/arab/chapter/note.html
index e2d3780..0e6b168 100644
--- a/lessons/arab/chapter/note.html
+++ b/lessons/arab/chapter/note.html
@@ -133,6 +133,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/arab/index.html b/lessons/arab/index.html
index 7215a93..1391f88 100644
--- a/lessons/arab/index.html
+++ b/lessons/arab/index.html
@@ -57,6 +57,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/biologi/index.html b/lessons/biologi/index.html
index 82444ab..6087fcd 100644
--- a/lessons/biologi/index.html
+++ b/lessons/biologi/index.html
@@ -60,6 +60,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
diff --git a/lessons/biologi/plant-animal-reproduction/index.html b/lessons/biologi/plant-animal-reproduction/index.html
index 7ab1aa5..0dc24a9 100644
--- a/lessons/biologi/plant-animal-reproduction/index.html
+++ b/lessons/biologi/plant-animal-reproduction/index.html
@@ -100,6 +100,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
diff --git a/lessons/biologi/plant-animal-reproduction/indonesia.html b/lessons/biologi/plant-animal-reproduction/indonesia.html
index ff842a8..fe4e3ff 100644
--- a/lessons/biologi/plant-animal-reproduction/indonesia.html
+++ b/lessons/biologi/plant-animal-reproduction/indonesia.html
@@ -100,6 +100,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
diff --git a/lessons/biologi/plant-animal-reproduction/technology.html b/lessons/biologi/plant-animal-reproduction/technology.html
index 504f51b..6b1a4c4 100644
--- a/lessons/biologi/plant-animal-reproduction/technology.html
+++ b/lessons/biologi/plant-animal-reproduction/technology.html
@@ -97,6 +97,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
diff --git a/lessons/biologi/reproduction/introduction.html b/lessons/biologi/reproduction/introduction.html
index 0e77caa..dcca66e 100644
--- a/lessons/biologi/reproduction/introduction.html
+++ b/lessons/biologi/reproduction/introduction.html
@@ -106,6 +106,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/english/chapter/note.html b/lessons/english/chapter/note.html
index e2d3780..0e6b168 100644
--- a/lessons/english/chapter/note.html
+++ b/lessons/english/chapter/note.html
@@ -133,6 +133,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/english/index.html b/lessons/english/index.html
index c2478aa..e281437 100644
--- a/lessons/english/index.html
+++ b/lessons/english/index.html
@@ -59,6 +59,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/fisika-locked/index.html b/lessons/fisika-locked/index.html
index ef2f85c..72260c7 100644
--- a/lessons/fisika-locked/index.html
+++ b/lessons/fisika-locked/index.html
@@ -57,6 +57,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/fisika/atom/atom.html b/lessons/fisika/atom/atom.html
index ef70b0b..57935a1 100644
--- a/lessons/fisika/atom/atom.html
+++ b/lessons/fisika/atom/atom.html
@@ -127,6 +127,7 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
diff --git a/lessons/fisika/atom/electron-config.html b/lessons/fisika/atom/electron-config.html
index 0ba12e4..899eb10 100644
--- a/lessons/fisika/atom/electron-config.html
+++ b/lessons/fisika/atom/electron-config.html
@@ -215,6 +215,7 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
diff --git a/lessons/fisika/dynamic-electricity/calc.html b/lessons/fisika/dynamic-electricity/calc.html
index ca11d34..c95c7ea 100644
--- a/lessons/fisika/dynamic-electricity/calc.html
+++ b/lessons/fisika/dynamic-electricity/calc.html
@@ -68,6 +68,7 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
diff --git a/lessons/fisika/dynamic-electricity/current.html b/lessons/fisika/dynamic-electricity/current.html
index 1fe82e5..e71e00d 100644
--- a/lessons/fisika/dynamic-electricity/current.html
+++ b/lessons/fisika/dynamic-electricity/current.html
@@ -82,6 +82,7 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
diff --git a/lessons/fisika/index.html b/lessons/fisika/index.html
index 13c6986..1c4ab76 100644
--- a/lessons/fisika/index.html
+++ b/lessons/fisika/index.html
@@ -62,6 +62,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/fisika/static-electricity/coulomb.html b/lessons/fisika/static-electricity/coulomb.html
index b459cb5..5c72bb3 100644
--- a/lessons/fisika/static-electricity/coulomb.html
+++ b/lessons/fisika/static-electricity/coulomb.html
@@ -187,6 +187,7 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
diff --git a/lessons/fisika/static-electricity/id-coulomb.html b/lessons/fisika/static-electricity/id-coulomb.html
index a369cac..d5f12f6 100644
--- a/lessons/fisika/static-electricity/id-coulomb.html
+++ b/lessons/fisika/static-electricity/id-coulomb.html
@@ -187,6 +187,7 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
diff --git a/lessons/fisika/static-electricity/id-theory.html b/lessons/fisika/static-electricity/id-theory.html
index acde0ab..a365172 100644
--- a/lessons/fisika/static-electricity/id-theory.html
+++ b/lessons/fisika/static-electricity/id-theory.html
@@ -139,6 +139,7 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
diff --git a/lessons/fisika/static-electricity/theory.html b/lessons/fisika/static-electricity/theory.html
index 9bb09de..de54cb7 100644
--- a/lessons/fisika/static-electricity/theory.html
+++ b/lessons/fisika/static-electricity/theory.html
@@ -138,6 +138,7 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
diff --git a/lessons/index.html b/lessons/index.html
index 760914a..6779357 100644
--- a/lessons/index.html
+++ b/lessons/index.html
@@ -170,6 +170,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/index.json b/lessons/index.json
new file mode 100644
index 0000000..b12465c
--- /dev/null
+++ b/lessons/index.json
@@ -0,0 +1,495 @@
+{ "subjects": [
+	{
+	    "id": 0,
+	    "titleEn": "Mathematics",
+	    "titleId": "Matematika",
+	    "splash": "1 + 1 = 3",
+	    "banner": "/assets/images/hero/math.jpg",
+	    "chapters": [
+		{
+		    "id": 0,
+		    "titleEn": "Exponents and Roots",
+		    "titleId": "Bentuk Pangkat dan Akar",
+		    "lessons": [
+			{
+			    "id": 0,
+			    "type": "lesson",
+			    "titleEn": "Lesson 1: Exponent",
+			    "titleId": "Pelajaran 1: Pangkat",
+			    "grade": 9,
+			    "status": 1,
+			    "authors": [ "Athaalaa Altaf Hafidz", "Athaalaa Altaf Hafidz" ],
+			    "pathEn": "/lessons/matematika/1-exponents/1.md",
+			    "pathId": "/lessons/matematika/1-exponents/1-id.md"
+			},
+			{
+			    "id": 1,
+			    "type": "quiz",
+			    "titleEn": "quiz title",
+			    "titleId": "judul kuis",
+			    "grade": 9,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "pathEn": "path/to/file.json",
+			    "pathId": "path/to/file.json"
+			}
+		    ]
+		}
+	    ]
+	},
+	{
+	    "id": 1,
+	    "titleEn": "Physics",
+	    "titleId": "Fisika",
+	    "splash": "insert funny splash text",
+	    "banner": "/assets/images/hero/physics.jpg",
+	    "chapters": [
+		{
+		    "id": 0,
+		    "titleEn": "chapter title",
+		    "titleId": "judul bab",
+		    "lessons": [
+			{
+			    "id": 0,
+			    "type": "lesson",
+			    "titleEn": "lesson title",
+			    "titleId": "judul materi",
+			    "grade": 9,
+			    "status": 0,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.md"
+			},
+			{
+			    "id": 1,
+			    "type": "quiz",
+			    "titleEn": "quiz title",
+			    "titleId": "judul kuis",
+			    "grade": 9,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.json"
+			}
+		    ]
+		}
+	    ]
+	},
+	{
+	    "id": 2,
+	    "titleEn": "Biology",
+	    "titleId": "Biologi",
+	    "splash": "insert funny splash text",
+	    "banner": "/assets/images/hero/biology.jpg",
+	    "chapters": [
+		{
+		    "id": 0,
+		    "titleEn": "chapter title",
+		    "titleId": "judul bab",
+		    "lessons": [
+			{
+			    "id": 0,
+			    "type": "lesson",
+			    "titleEn": "lesson title",
+			    "titleId": "judul materi",
+			    "grade": 9,
+			    "status": 0,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.md"
+			},
+			{
+			    "id": 1,
+			    "type": "quiz",
+			    "titleEn": "quiz title",
+			    "titleId": "judul kuis",
+			    "grade": 9,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.json"
+			}
+		    ]
+		}
+	    ]
+	},
+	{
+	    "id": 3,
+	    "titleEn": "Social Studies",
+	    "titleId": "Ilmu Pengetahuan Sosial",
+	    "splash": "insert funny splash text",
+	    "banner": "/assets/images/hero/ips.jpg",
+	    "chapters": [
+		{
+		    "id": 0,
+		    "titleEn": "chapter title",
+		    "titleId": "judul bab",
+		    "lessons": [
+			{
+			    "id": 0,
+			    "type": "lesson",
+			    "titleEn": "lesson title",
+			    "titleId": "judul materi",
+			    "grade": 9,
+			    "status": 0,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.md"
+			},
+			{
+			    "id": 1,
+			    "type": "quiz",
+			    "titleEn": "quiz title",
+			    "titleId": "judul kuis",
+			    "grade": 9,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.json"
+			}
+		    ]
+		}
+	    ]
+	},
+	{
+	    "id": 4,
+	    "titleEn": "Islamic Education",
+	    "titleId": "Pendidikan Agama Islam",
+	    "splash": "insert funny splash text",
+	    "banner": "/assets/images/hero/alazhar.jpg",
+	    "chapters": [
+		{
+		    "id": 0,
+		    "titleEn": "chapter title",
+		    "titleId": "judul bab",
+		    "lessons": [
+			{
+			    "id": 0,
+			    "type": "lesson",
+			    "titleEn": "lesson title",
+			    "titleId": "judul materi",
+			    "grade": 9,
+			    "status": 0,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.md"
+			},
+			{
+			    "id": 1,
+			    "type": "quiz",
+			    "titleEn": "quiz title",
+			    "titleId": "judul kuis",
+			    "grade": 9,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.json"
+			}
+		    ]
+		}
+	    ]
+	},
+	{
+	    "id": 5,
+	    "titleEn": "Al-Qur'an",
+	    "titleId": "Al-Qur'an",
+	    "splash": "insert funny splash text",
+	    "banner": "/assets/images/hero/quran.jpg",
+	    "chapters": [
+		{
+		    "id": 0,
+		    "titleEn": "chapter title",
+		    "titleId": "judul bab",
+		    "lessons": [
+			{
+			    "id": 0,
+			    "type": "lesson",
+			    "titleEn": "lesson title",
+			    "titleId": "judul materi",
+			    "grade": 9,
+			    "status": 0,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.md"
+			},
+			{
+			    "id": 1,
+			    "type": "quiz",
+			    "titleEn": "quiz title",
+			    "titleId": "judul kuis",
+			    "grade": 9,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.json"
+			}
+		    ]
+		}
+	    ]
+	},
+	{
+	    "id": 6,
+	    "titleEn": "اللغة العربية",
+	    "titleId": "اللغة العربية",
+	    "splash": "insert funny splash text",
+	    "banner": "/assets/images/hero/arabic.png",
+	    "chapters": [
+		{
+		    "id": 0,
+		    "titleEn": "chapter title",
+		    "titleId": "judul bab",
+		    "lessons": [
+			{
+			    "id": 0,
+			    "type": "lesson",
+			    "titleEn": "lesson title",
+			    "titleId": "judul materi",
+			    "grade": 9,
+			    "status": 0,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.md"
+			},
+			{
+			    "id": 1,
+			    "type": "quiz",
+			    "titleEn": "quiz title",
+			    "titleId": "judul kuis",
+			    "grade": 9,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.json"
+			}
+		    ]
+		}
+	    ]
+	},
+	{
+	    "id": 7,
+	    "titleEn": "Civics Education",
+	    "titleId": "PKN",
+	    "splash": "insert funny splash text",
+	    "banner": "/assets/images/hero/ppkn.jpg",
+	    "chapters": [
+		{
+		    "id": 0,
+		    "titleEn": "chapter title",
+		    "titleId": "judul bab",
+		    "lessons": [
+			{
+			    "id": 0,
+			    "type": "lesson",
+			    "titleEn": "lesson title",
+			    "titleId": "judul materi",
+			    "grade": 9,
+			    "status": 0,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.md"
+			},
+			{
+			    "id": 1,
+			    "type": "quiz",
+			    "titleEn": "quiz title",
+			    "titleId": "judul kuis",
+			    "grade": 9,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.json"
+			}
+		    ]
+		}
+	    ]
+	},
+	{
+	    "id": 8,
+	    "titleEn": "Informatics",
+	    "titleId": "Informatika",
+	    "splash": "insert funny splash text",
+	    "banner": "/assets/images/hero/laptop.jpg",
+	    "chapters": [
+		{
+		    "id": 0,
+		    "titleEn": "chapter title",
+		    "titleId": "judul bab",
+		    "lessons": [
+			{
+			    "id": 0,
+			    "type": "lesson",
+			    "titleEn": "lesson title",
+			    "titleId": "judul materi",
+			    "grade": 9,
+			    "status": 0,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.md"
+			},
+			{
+			    "id": 1,
+			    "type": "quiz",
+			    "titleEn": "quiz title",
+			    "titleId": "judul kuis",
+			    "grade": 9,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.json"
+			}
+		    ]
+		}
+	    ]
+	},
+	{
+	    "id": 9,
+	    "titleEn": "English",
+	    "titleId": "English",
+	    "splash": "insert funny splash text",
+	    "banner": "/assets/images/hero/library.jpg",
+	    "chapters": [
+		{
+		    "id": 0,
+		    "titleEn": "chapter title",
+		    "titleId": "judul bab",
+		    "lessons": [
+			{
+			    "id": 0,
+			    "type": "lesson",
+			    "titleEn": "lesson title",
+			    "titleId": "judul materi",
+			    "grade": 9,
+			    "status": 0,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.md"
+			},
+			{
+			    "id": 1,
+			    "type": "quiz",
+			    "titleEn": "quiz title",
+			    "titleId": "judul kuis",
+			    "grade": 9,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.json"
+			}
+		    ]
+		}
+	    ]
+	},
+	{
+	    "id": 10,
+	    "titleEn": "Bahasa Indonesia",
+	    "titleId": "Bahasa Indonesia",
+	    "splash": "insert funny splash text",
+	    "banner": "/assets/images/hero/books.jpg",
+	    "chapters": [
+		{
+		    "id": 0,
+		    "titleEn": "chapter title",
+		    "titleId": "judul bab",
+		    "lessons": [
+			{
+			    "id": 0,
+			    "type": "lesson",
+			    "titleEn": "lesson title",
+			    "titleId": "judul materi",
+			    "grade": 9,
+			    "status": 0,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.md"
+			},
+			{
+			    "id": 1,
+			    "type": "quiz",
+			    "titleEn": "quiz title",
+			    "titleId": "judul kuis",
+			    "grade": 9,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.json"
+			}
+		    ]
+		}
+	    ]
+	},
+	{
+	    "id": 11,
+	    "titleEn": "Music",
+	    "titleId": "Seni Musik",
+	    "splash": "insert funny splash text",
+	    "banner": "/assets/images/hero/music.jpg",
+	    "chapters": [
+		{
+		    "id": 0,
+		    "titleEn": "chapter title",
+		    "titleId": "judul bab",
+		    "lessons": [
+			{
+			    "id": 0,
+			    "type": "lesson",
+			    "titleEn": "lesson title",
+			    "titleId": "judul materi",
+			    "grade": 9,
+			    "status": 0,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.md"
+			},
+			{
+			    "id": 1,
+			    "type": "quiz",
+			    "titleEn": "quiz title",
+			    "titleId": "judul kuis",
+			    "grade": 9,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.json"
+			}
+		    ]
+		}
+	    ]
+	},
+	{
+	    "id": 12,
+	    "titleEn": "Arts",
+	    "titleId": "Seni Rupa",
+	    "splash": "insert funny splash text",
+	    "banner": "/assets/images/hero/paint.jpg",
+	    "chapters": [
+		{
+		    "id": 0,
+		    "titleEn": "chapter title",
+		    "titleId": "judul bab",
+		    "lessons": [
+			{
+			    "id": 0,
+			    "type": "lesson",
+			    "titleEn": "lesson title",
+			    "titleId": "judul materi",
+			    "grade": 9,
+			    "status": 0,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.md"
+			},
+			{
+			    "id": 1,
+			    "type": "quiz",
+			    "titleEn": "quiz title",
+			    "titleId": "judul kuis",
+			    "grade": 9,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.json"
+			}
+		    ]
+		}
+	    ]
+	},
+	{
+	    "id": 13,
+	    "titleEn": "Sports",
+	    "titleId": "Penjasorkes",
+	    "splash": "insert funny splash text",
+	    "banner": "/assets/images/hero/sports.jpg",
+	    "chapters": [
+		{
+		    "id": 0,
+		    "titleEn": "chapter title",
+		    "titleId": "judul bab",
+		    "lessons": [
+			{
+			    "id": 0,
+			    "type": "lesson",
+			    "titleEn": "lesson title",
+			    "titleId": "judul materi",
+			    "grade": 9,
+			    "status": 0,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.md"
+			},
+			{
+			    "id": 1,
+			    "type": "quiz",
+			    "titleEn": "quiz title",
+			    "titleId": "judul kuis",
+			    "grade": 9,
+			    "authors": [ "John Doe", "Jane Doe" ],
+			    "path": "path/to/file.json"
+			}
+		    ]
+		}
+	    ]
+	}
+    ]
+}
diff --git a/lessons/indonesia/index.html b/lessons/indonesia/index.html
index 3de53cc..e59c826 100644
--- a/lessons/indonesia/index.html
+++ b/lessons/indonesia/index.html
@@ -58,6 +58,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/indonesia/laporan-percobaan/pengertian.html b/lessons/indonesia/laporan-percobaan/pengertian.html
index a0a30b1..b73908a 100644
--- a/lessons/indonesia/laporan-percobaan/pengertian.html
+++ b/lessons/indonesia/laporan-percobaan/pengertian.html
@@ -64,6 +64,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/informatika/chapter/note.html b/lessons/informatika/chapter/note.html
index e2d3780..0e6b168 100644
--- a/lessons/informatika/chapter/note.html
+++ b/lessons/informatika/chapter/note.html
@@ -133,6 +133,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/informatika/index.html b/lessons/informatika/index.html
index 5b60d25..6f193db 100644
--- a/lessons/informatika/index.html
+++ b/lessons/informatika/index.html
@@ -57,6 +57,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/ips/chapter/note.html b/lessons/ips/chapter/note.html
index e2d3780..0e6b168 100644
--- a/lessons/ips/chapter/note.html
+++ b/lessons/ips/chapter/note.html
@@ -133,6 +133,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/ips/index.html b/lessons/ips/index.html
index 50d6068..24234fc 100644
--- a/lessons/ips/index.html
+++ b/lessons/ips/index.html
@@ -57,6 +57,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/lukis/chapter/note.html b/lessons/lukis/chapter/note.html
index e2d3780..0e6b168 100644
--- a/lessons/lukis/chapter/note.html
+++ b/lessons/lukis/chapter/note.html
@@ -133,6 +133,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/lukis/index.html b/lessons/lukis/index.html
index ad0ab0e..e4c3cde 100644
--- a/lessons/lukis/index.html
+++ b/lessons/lukis/index.html
@@ -57,6 +57,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/matematika/1-exponents/1-id.md b/lessons/matematika/1-exponents/1-id.md
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/lessons/matematika/1-exponents/1-id.md
diff --git a/lessons/matematika/1-exponents/1.md b/lessons/matematika/1-exponents/1.md
new file mode 100644
index 0000000..5dc2a6e
--- /dev/null
+++ b/lessons/matematika/1-exponents/1.md
@@ -0,0 +1,27 @@
+# Exponents
+\\( x^n = x_1 \times x_2 \times\ \cdot\cdot\cdot\ \times x_n \\)
+
+## Examples
+* \\(2^5 = 2 \times 2 \times 2 \times 2 \times 2 = 32 \\)
+* \\(5^7 = 5 \times 5 \times 5 \times 5 \times 5 \times 5 \times 5 = 78125 \\)
+
+# Exponent Operations
+## Multiplication
+\\( a^x \times b^y = (a \times b)^{x + y} \\)
+* \\( 10^4 \times 2^2 = (10 \times 2)^{4 + 2} = 20^6 \\)
+
+## Division
+\\( a^x \div b^y = (a \div b)^{x - y} \\)
+* \\( 10^3 \div 2^4 = (10 \div 2)^{(4 - 2)} = 5^2 = 25 \\)
+
+## Exponent
+
+## Zero Exponent
+
+## Negative Exponent
+
+## Fractional Exponent
+
+## Examples
+
+# Exponential Equation
diff --git a/lessons/matematika/index.html b/lessons/matematika/index.html
index 4c800ec..806b43b 100644
--- a/lessons/matematika/index.html
+++ b/lessons/matematika/index.html
@@ -65,6 +65,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
diff --git a/lessons/matematika/locked.html b/lessons/matematika/locked.html
index c6384ec..439eab3 100644
--- a/lessons/matematika/locked.html
+++ b/lessons/matematika/locked.html
@@ -53,6 +53,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/matematika/pangkat-akar/akar.html b/lessons/matematika/pangkat-akar/akar.html
index 1bacf4c..b1e1daa 100644
--- a/lessons/matematika/pangkat-akar/akar.html
+++ b/lessons/matematika/pangkat-akar/akar.html
@@ -164,6 +164,7 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
diff --git a/lessons/matematika/pangkat-akar/latihan.html b/lessons/matematika/pangkat-akar/latihan.html
index 6bdae1d..647f325 100644
--- a/lessons/matematika/pangkat-akar/latihan.html
+++ b/lessons/matematika/pangkat-akar/latihan.html
@@ -161,6 +161,7 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
diff --git a/lessons/matematika/pangkat-akar/pangkat.html b/lessons/matematika/pangkat-akar/pangkat.html
index e8362dd..fd955d7 100644
--- a/lessons/matematika/pangkat-akar/pangkat.html
+++ b/lessons/matematika/pangkat-akar/pangkat.html
@@ -133,6 +133,7 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
diff --git a/lessons/matematika/pangkat-akar/scientific.html b/lessons/matematika/pangkat-akar/scientific.html
index 9394f6e..ce5cb8d 100644
--- a/lessons/matematika/pangkat-akar/scientific.html
+++ b/lessons/matematika/pangkat-akar/scientific.html
@@ -63,6 +63,7 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
diff --git a/lessons/matematika/quadratic-equation/finding-suitable.html b/lessons/matematika/quadratic-equation/finding-suitable.html
index 9e13f01..1fdee6c 100644
--- a/lessons/matematika/quadratic-equation/finding-suitable.html
+++ b/lessons/matematika/quadratic-equation/finding-suitable.html
@@ -111,6 +111,7 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
diff --git a/lessons/matematika/quadratic-equation/index.html b/lessons/matematika/quadratic-equation/index.html
index 288d0d9..292b988 100644
--- a/lessons/matematika/quadratic-equation/index.html
+++ b/lessons/matematika/quadratic-equation/index.html
@@ -271,6 +271,7 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
diff --git a/lessons/matematika/quadratic-function/index.html b/lessons/matematika/quadratic-function/index.html
index 728d1af..2cabc27 100644
--- a/lessons/matematika/quadratic-function/index.html
+++ b/lessons/matematika/quadratic-function/index.html
@@ -69,6 +69,7 @@
     </div>
 
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 
diff --git a/lessons/musik/chapter/note.html b/lessons/musik/chapter/note.html
index e2d3780..0e6b168 100644
--- a/lessons/musik/chapter/note.html
+++ b/lessons/musik/chapter/note.html
@@ -133,6 +133,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/musik/index.html b/lessons/musik/index.html
index c28a769..697a5db 100644
--- a/lessons/musik/index.html
+++ b/lessons/musik/index.html
@@ -57,6 +57,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/pjok/chapter/note.html b/lessons/pjok/chapter/note.html
index e2d3780..0e6b168 100644
--- a/lessons/pjok/chapter/note.html
+++ b/lessons/pjok/chapter/note.html
@@ -133,6 +133,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/pjok/index.html b/lessons/pjok/index.html
index 6401d4e..7f5b891 100644
--- a/lessons/pjok/index.html
+++ b/lessons/pjok/index.html
@@ -57,6 +57,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/ppkn/chapter/note.html b/lessons/ppkn/chapter/note.html
index e2d3780..0e6b168 100644
--- a/lessons/ppkn/chapter/note.html
+++ b/lessons/ppkn/chapter/note.html
@@ -133,6 +133,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/ppkn/index.html b/lessons/ppkn/index.html
index 26aba3a..c243420 100644
--- a/lessons/ppkn/index.html
+++ b/lessons/ppkn/index.html
@@ -57,6 +57,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/quran/chapter/note.html b/lessons/quran/chapter/note.html
index e2d3780..0e6b168 100644
--- a/lessons/quran/chapter/note.html
+++ b/lessons/quran/chapter/note.html
@@ -133,6 +133,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/quran/index.html b/lessons/quran/index.html
index 06630f8..eb06cc7 100644
--- a/lessons/quran/index.html
+++ b/lessons/quran/index.html
@@ -57,6 +57,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/subject/chapter/note.html b/lessons/subject/chapter/note.html
index 0b54139..7842b36 100644
--- a/lessons/subject/chapter/note.html
+++ b/lessons/subject/chapter/note.html
@@ -139,6 +139,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/lessons/subject/index.html b/lessons/subject/index.html
index 1f53820..a254543 100644
--- a/lessons/subject/index.html
+++ b/lessons/subject/index.html
@@ -60,6 +60,7 @@
     </div>
     
     <script src="/scripts/toc.js"></script>
+    <script src="/scripts/onload/toc.js"></script>
     <script src="/scripts/sidebar.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/scripts/lesson.js b/scripts/lesson.js
new file mode 100644
index 0000000..0036fde
--- /dev/null
+++ b/scripts/lesson.js
@@ -0,0 +1,145 @@
+function loadSubject(id) {
+    fetch("/lessons/index.json")
+	.then((response) => response.json())
+        .then((data) => {
+	    var title = document.getElementById("title-banner");
+	    var subtitle = document.getElementById("subtitle");
+	    var container = document.getElementById("container")
+
+	    console.log(data.subjects[id]);
+
+	    title.innerHTML = data.subjects[id].titleEn;
+	    subtitle.innerHTML = data.subjects[id].splash;
+	    container.innerHTML = "";
+
+	    var chapterLength = data.subjects[id].chapters.length;
+
+	    for (var i = 0; i < chapterLength; i++) {
+		var chapterContainer = `
+		    <h1 id="bab${i}">Chapter ${i + 1}: ${data.subjects[id].chapters[i].titleEn}</h1>
+		    <div class="button-group-container">
+		`
+
+		var lessonLength = data.subjects[id].chapters[i].lessons.length;
+
+	    	if (lessonLength > 1) {
+	    	    chapterContainer += `
+	    	        <a class="button-grouped button-grouped-top" href="lesson/?subject=${id}&chapter=${i}&id=0">
+	    	    	<span class="button-char-icon">${(data.subjects[id].chapters[i].lessons[0].type == "lesson") ? '📚' :'✏️' }</span>
+	    	            <span>${data.subjects[id].chapters[i].lessons[0].titleEn}</span>
+	    	    	</a>
+	    	    `
+	    	    for (var j = 1; j < lessonLength - 1; j++) {
+	    	        chapterContainer += `
+	    	    	<a class="button-grouped" href="lesson/?subject=${id}&chapter=${i}&id=${j}">
+	    	    	    <span class="button-char-icon">${(data.subjects[id].chapters[i].lessons[j].type == "lesson") ? '📚' :'✏️' }</span>
+	    	    	    <span>${data.subjects[id].chapters[i].lessons[j].titleEn}</span>
+	    	    	</a>
+	    	        `
+	    	    }
+	    	    chapterContainer += `
+	    	        <a class="button-grouped button-grouped-bottom" href="lesson/?subject=${id}&chapter=${i}&id=${lessonLength - 1}">
+	    	    	<span class="button-char-icon">${(data.subjects[id].chapters[i].lessons[lessonLength - 1].type == "lesson") ? '📚' :'✏️' }</span>
+	    	    	<span>${data.subjects[id].chapters[i].lessons[lessonLength - 1].titleEn}</span>
+	    	        </a>
+	    	    `
+	    	} else {
+
+	    	}
+
+		chapterContainer += `\n</div>`
+
+		container.innerHTML += chapterContainer;
+	    }
+	    // return data.subjects[id];
+    	}
+    );
+}
+
+// DEPENDENCIES:
+// * /scripts/toc.js
+// * markdown-it
+function loadLesson(subject, chapter, lesson) {
+    fetch("/lessons/index.json")
+	.then((response) => response.json())
+        .then((data) => {
+	    var title = document.getElementById("title-banner");
+	    var subtitle = document.getElementById("subtitle");
+	    var container = document.getElementById("container")
+
+	    var chipStatus = document.getElementById("chip-status");
+	    var chipAuthor = document.getElementById("chip-author");
+	    var chipGrade = document.getElementById("chip-grade");
+
+	    var lessonData = data.subjects[subject].chapters[chapter].lessons[lesson];
+
+	    console.log(lessonData);
+
+	    title.innerHTML = lessonData.titleEn;
+	    subtitle.innerHTML = `Chapter ${parseInt(chapter) + 1}`;
+	    container.innerHTML = "";
+	    chipGrade.innerHTML = "Grade " + lessonData.grade;
+	    if (lessonData.authors.length == 1) {
+		chipAuthor.innerHTML = "Written by " + lessonData.authors[0];
+	    } else {
+		chipAuthor.innerHTML = "Written by ";
+		for (var i = 0; i < lessonData.authors.length - 1; i++) {
+		    chipAuthor.innerHTML += lessonData.authors[i] + ", ";
+		}
+		chipAuthor.innerHTML += "and " + lessonData.authors[lessonData.authors.length - 1];
+	    }
+	    // why the heck switch case not working
+	    // guess i'm too stupid for a switch case.
+	    // no i'm not yandev
+	    if (lessonData.status == 0) {    
+		chipStatus.innerHTML = "❓ Not Verified";
+	    } else if (lessonData.status == 1) {
+		    chipStatus.innerHTML = "✅ Verified";
+	    } else if (lessonData.status == 2) {
+		    chipStatus.innerHTML = "⚠️ Contains Wrong Information";
+	    }
+
+	    fetch(lessonData.pathEn)
+		.then((response) => response.text())
+		.then((data) => {
+		    const md = markdownit();
+		    container.innerHTML = md.render(data);
+		}).then(() => {
+		    MathJax.typeset();
+		});
+	}
+    ).then(() => {
+	toc();
+    });
+    console.log(subject);
+    console.log(chapter);
+    console.log(lesson);
+    
+}
+
+function loadQuiz(subject, chapter, lesson) {
+
+}
+
+function listSubjects() {
+    fetch("/lessons/index.json")
+	.then((response) => response.json())
+        .then((data) => {
+	    var container = document.getElementById("subject-container");
+
+	    for (var i = 0; i < data.subjects.length; i++) {
+		var card = `
+                    <div class="card">
+                        <a href="/subject/?id=${i}" class="link-card"></a>
+                        <img src="${data.subjects[i].banner}" alt="" class="card-img">
+                        <a href="/subject/?id=${i}">
+                            <h2>${data.subjects[i].titleEn}</h2>
+                        </a>
+                    </div>
+		`;
+
+		container.innerHTML += card;
+	    }
+    	}
+    );
+}
diff --git a/scripts/onload/lesson.js b/scripts/onload/lesson.js
new file mode 100644
index 0000000..8e6d5e3
--- /dev/null
+++ b/scripts/onload/lesson.js
@@ -0,0 +1,17 @@
+// DEPENDENCIES
+// * /scripts/lesson.js
+// 	* /scripts/toc.js
+window.onload = function() {
+    loadLesson(getUrlVars()['subject'], getUrlVars()['chapter'], getUrlVars()['id']);
+}
+
+function getUrlVars() {
+    var vars = [], hash;
+    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+    for (var i = 0; i < hashes.length; i++) {
+        hash = hashes[i].split('=');
+        vars.push(hash[0]);
+        vars[hash[0]] = hash[1];
+    }
+    return vars;
+}
diff --git a/scripts/onload/list.js b/scripts/onload/list.js
new file mode 100644
index 0000000..496c5dd
--- /dev/null
+++ b/scripts/onload/list.js
@@ -0,0 +1,4 @@
+window.onload = function() {
+    toc();
+    listSubjects();
+}
diff --git a/scripts/onload/subject.js b/scripts/onload/subject.js
new file mode 100644
index 0000000..a22e3e8
--- /dev/null
+++ b/scripts/onload/subject.js
@@ -0,0 +1,16 @@
+window.onload = function() {
+    toc();
+    loadSubject(getUrlVars()['id']);
+}
+
+function getUrlVars() {
+    var vars = [], hash;
+    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+    for (var i = 0; i < hashes.length; i++) {
+        hash = hashes[i].split('=');
+        vars.push(hash[0]);
+        vars[hash[0]] = hash[1];
+    }
+    return vars;
+}
+
diff --git a/scripts/onload/toc.js b/scripts/onload/toc.js
new file mode 100644
index 0000000..f1101fe
--- /dev/null
+++ b/scripts/onload/toc.js
@@ -0,0 +1,3 @@
+window.onload = function() {
+    toc();
+}
diff --git a/scripts/sidebar.js b/scripts/sidebar.js
index 22a54a6..3fcb63d 100644
--- a/scripts/sidebar.js
+++ b/scripts/sidebar.js
@@ -3,7 +3,7 @@ function toggleNav() {
     const sStyle = window.getComputedStyle(sidebar);
 
     if (sStyle.visibility == "hidden") {
-        if (document.body.clientWidth >= 700) {
+        if (document.body.clientWidth >= 1000) {
             document.getElementById("main").style.marginLeft = "360px";
 
             try {
@@ -14,7 +14,7 @@ function toggleNav() {
             }
 
             try {
-                document.getElementById("chip-container").style.marginLeft = "375px";
+                document.getElementById("chip-container").style.marginLeft = "355px";
             } catch {
 
             }
@@ -35,9 +35,9 @@ function toggleNav() {
         }
 
         try {
-            document.getElementById("chip-container").style.marginLeft = "20px";
+            document.getElementById("chip-container").style.marginLeft = "0px";
         } catch {
 
         }
     }
-}
-\ No newline at end of file
+}
diff --git a/scripts/toc.js b/scripts/toc.js
index bfdfe42..107c846 100644
--- a/scripts/toc.js
+++ b/scripts/toc.js
@@ -1,7 +1,7 @@
 // i am a C# developer
 // trying javascript
 
-window.onload = function() {
+function toc() {
     const tocDiv = document.getElementById("toc");
     const content = document.getElementById("main");
     const headers = content.querySelectorAll('h1, h2, h3, h4, h5, h6');
@@ -43,4 +43,4 @@ window.onload = function() {
             }
         }
     }
-}
-\ No newline at end of file
+}
diff --git a/style.css b/style.css
index ddf07c2..02bccec 100644
--- a/style.css
+++ b/style.css
@@ -18,7 +18,7 @@ body {
     margin: 0;
     padding: 0;
     font-family: 'Roboto', serif;
-    font-size: 1.1rem;
+    font-size: 1.05rem;
     background-color: var(--white-bg);
     color: var(--black-color-1);
     overflow: auto;
@@ -184,7 +184,6 @@ img {
     z-index: 9999;
     opacity: 1;
     transition: all .2s;
-    backdrop-filter: blur(25px);
 }
 
 #sidebar > div:first-child {
@@ -224,12 +223,9 @@ img {
 }
 
 .sidebar-logo {
-    width: 180px;
     display: block;
     margin-left: auto;
     margin-right: auto;
-    margin-bottom: 30px;
-    margin-top: 30px;
 }
 
 .sidebar-sublink {
@@ -440,8 +436,8 @@ h3.banner-text {
 }
 
 #chip-container {
-    margin-left: 375px;
     transition: all .5s;
+    margin-left: 355px;
 }
 
 .chip-container {
@@ -449,6 +445,10 @@ h3.banner-text {
     flex-direction: row;
     gap: 15px;
     transition: all .5s;
+    overflow: scroll;
+    padding-left: 20px;
+    padding-bottom: 20px;
+    padding-right: 20px;
 }
 
 .chip {
@@ -466,6 +466,7 @@ h3.banner-text {
     font-size: 0.8em;
     color: #4A4A4A;
     line-height: 24px;
+    white-space: nowrap;
 }
 
 .link-card {
@@ -576,6 +577,49 @@ sup>sup {
     margin-right: 20px;
 }
 
+.button-group-container {
+    display: flex;
+    gap: 10px;
+    flex-direction: column;
+}
+
+.button-grouped {
+    background-color: var(--white-bg);
+    border: 1px solid var(--white-accent-bg);
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    height: 60px;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.10);
+    text-decoration: none;
+    padding-inline: 15px;
+    box-sizing: border-box;
+    color: #1A1A1A;
+}
+
+.button-grouped:active {
+    background-color: var(--white-color-2);
+}
+
+.button-grouped-top {
+    border-top-left-radius: 30px;
+    border-top-right-radius: 30px;
+}
+
+.button-grouped-bottom {
+    border-bottom-left-radius: 30px;
+    border-bottom-right-radius: 30px;
+}
+
+.button-grouped-all {
+    border-radius: 30px;
+}
+
+.button-char-icon {
+    font-size: 1.5rem;
+}
+
 #img-alazhar {
     background-image: url(/assets/images/hero/alazhar.jpg);
     background-position: center;
@@ -618,16 +662,15 @@ li>a:hover {
     text-decoration: underline;
 }
 
-@media(max-width: 700px) {
+@media(max-width: 1000px) { 
     .flex {
         flex-direction: column;
     }
 
     #main {
         margin-left: 0;
-        padding-left: 0px;
-        padding-right: 0px;
-        padding: 30px;
+        padding-left: 30px;
+        padding-right: 30px;
     }
 
     #banner {
@@ -639,6 +682,7 @@ li>a:hover {
         opacity: 0;
         width: 100%;
         background-color: rgba(0, 0, 0, 0.2);
+	backdrop-filter: blur(25px);
     }
 
     .fixed-top-btn-container {
@@ -653,6 +697,18 @@ li>a:hover {
     }
 
     #chip-container {
-        margin-left: 20px;
+	margin-left: 0px;
+    }
+
+    .sidebar-logo {
+	height: 164px;
+	margin-top: 50px;
+    }
+}
+
+@media(max-width: 1200px) {
+    #main {
+	padding-left: 30px;
+	padding-right: 30px;
     }
 }
diff --git a/subject/index.html b/subject/index.html
new file mode 100644
index 0000000..5441400
--- /dev/null
+++ b/subject/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/style.css">
+    <link rel="icon" href="/assets/images/master.svg">
+    <title>Al Azhar 9th Grade Lesson Notes</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">     
+    <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+</head>
+<body onload="loadSubject(0);">
+    <div class="fixed-top-btn-container" id="topbtn">
+        <a class="fixed-top-btn menu-btn" onclick="toggleNav()" href="javascript:void(0)"><i class="fa-solid fa-bars"></i></a>
+        <a href="../" class="fixed-top-btn back-btn"><i class="fa-solid fa-chevron-left"></i></a>
+    </div>
+    <div id="console"></div>
+    <div id="sidebar">
+        <div>
+            <a href="/index.html">
+                <img src="/assets/images/master.svg" alt="" class="sidebar-logo">
+            </a>
+
+            <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        </div>
+
+        <div>
+            <a href="/about/author.html" class="sidebar-link link">About the Author</a>
+            <a href="/about/school.html" class="sidebar-link link">About School</a>
+            <a href="/lessons" class="sidebar-link link">Lessons</a>
+
+
+            <hr class="divider">
+            <div id="toc">
+                <h4>Table of Contents</h4>
+            </div>
+        </div>
+    </div>
+
+    <div class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <div class="gradient-bg"></div>
+        <div class="banner-text-container">
+            <h1 class="banner-text" id="title-banner">Subject Title</h1>
+            <h3 class="banner-text" id="subtitle">funny splash text</h3>
+        </div>
+    </div>
+
+    <div id="main">
+        <section id="container">   
+            <h1 id="bab1">Chapter 1 - Chapter Title</h1>
+	    <div class="button-group-container">
+	        <a class="button-grouped button-grouped-top" href="">
+		    <span class="button-char-icon">📚</span>
+		    <span>Lesson 1: Lesson Title</span>
+		</a>
+	        <a class="button-grouped" href="">
+		    <span class="button-char-icon"></span>
+		    <span></span>
+		</a>
+	        <a class="button-grouped button-grouped-bottom" href="">
+		    <span class="button-char-icon"></span>
+		    <span></span>
+		</a>
+	    </div>
+        </section>
+    </div>
+    
+    <script src="/scripts/toc.js"></script>
+    <script src="/scripts/lesson.js"></script>
+    <script src="/scripts/onload/subject.js"></script>
+    <script src="/scripts/sidebar.js"></script>
+</body>
+</html>
diff --git a/subject/lesson/index.html b/subject/lesson/index.html
new file mode 100644
index 0000000..9ca2b7b
--- /dev/null
+++ b/subject/lesson/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/style.css">
+    <link rel="icon" href="/assets/images/master.svg">
+    <title>Al Azhar 9th Grade Lesson Notes</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+    <script>
+	MathJax = {
+	    tex: {
+		inlineMath: [['\\(', '\\)']]
+	    }
+	};
+    </script>
+    <script type="text/javascript" id="MathJax-script" async
+	src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.2/dist/markdown-it.min.js"></script>
+</head>
+
+<body>
+    <div class="fixed-top-btn-container" id="topbtn">
+        <a class="fixed-top-btn menu-btn" onclick="toggleNav()" href="javascript:void(0)"><i class="fa-solid fa-bars"></i></a>
+        <a href="../" class="fixed-top-btn back-btn"><i class="fa-solid fa-chevron-left"></i></a>
+    </div>
+    <div id="console"></div>
+    <div id="sidebar">
+        <div>
+            <a href="/index.html">
+                <img src="/assets/images/master.svg" alt="" class="sidebar-logo">
+            </a>
+
+            <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        </div>
+
+        <div>
+            <a href="/about/author.html" class="sidebar-link link">About the Author</a>
+            <a href="/about/school.html" class="sidebar-link link">About School</a>
+            <a href="/lessons" class="sidebar-link link">Lessons</a>
+
+
+            <hr class="divider">
+            <div id="toc">
+                <h4>Table of Contents</h4>
+            </div>
+        </div>
+    </div>
+
+    <div class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <div class="gradient-bg"></div>
+        <div class="banner-text-container">
+            <h1 class="banner-text" id="title-banner">Lesson Title</h1>
+            <h3 class="banner-text" id="subtitle">Chapter 1</h3>
+        </div>
+    </div>
+
+    <div class="chip-container" id="chip-container">
+        <div class="chip" id="chip-status"><span>0 = ?; 1 = ✅ Verified; 2 = X;</span></div>
+        <div class="chip" id="chip-author"><span>Written by Fulan bin Fulan</span></div>
+        <div class="chip" id="chip-grade"><span>Grade -2</span></div>
+    </div>
+
+    <div id="main" style="margin-top: -20px;">
+        <section id="container">
+            <h1 id="parts-of-atom">Title</h1>
+	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lorem ipsum, scelerisque vel molestie et, dictum vel urna. Vestibulum id scelerisque sapien. Sed tincidunt ultricies congue. Quisque aliquam lectus nulla, ut auctor dolor aliquam sit amet. Vestibulum interdum varius commodo. Donec finibus elit id lectus commodo, nec convallis enim faucibus. Vivamus nunc nibh, blandit in arcu in, facilisis tincidunt nisl. Sed sollicitudin vulputate fringilla. Vivamus mollis ipsum sed porta varius. Duis mollis condimentum lectus, ac pellentesque sapien volutpat sit amet. Curabitur sagittis est ac eros accumsan, vitae consectetur orci auctor.</p>
+
+	    <p>Vivamus \(c^2 = \sqrt{a^2 - b^2}\) scelerisque magna sit amet ante vulputate aliquet. Praesent pulvinar, libero eget egestas pretium, ligula dui tincidunt odio, vitae ultrices mi arcu eu purus. Nunc nec laoreet mi, sed sodales est. Nam porta sem eget sem condimentum vulputate. Fusce rhoncus aliquet mauris, a dapibus turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam tristique interdum mauris eget convallis. In convallis ultrices justo, ut efficitur sapien congue malesuada. Donec dignissim ante at feugiat suscipit. </p>
+
+	    <p>\( \dfrac{1}{2} = \dfrac{2}{4} \)</p>
+
+            <div class="flex flex-center">
+                <img src="/assets/images/atoms/parts.svg" alt="">
+            </div>
+            <p class="subtitle">artist's representation of an atom. Bohr's Model. Colors may be labelled different.</p>
+        </section>
+    </div>
+
+    <script src="/scripts/toc.js"></script>
+    <script src="/scripts/lesson.js"></script>
+    <script src="/scripts/onload/lesson.js"></script>
+    <script src="/scripts/sidebar.js"></script>
+</body>
+
+</html>
diff --git a/subject/quiz/index.html b/subject/quiz/index.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/subject/quiz/index.html
author	altaf-creator <athaalaa@gmail.com>	2024-03-16 17:48:01 +0700
committer	altaf-creator <athaalaa@gmail.com>	2024-03-16 17:48:01 +0700
commit	3d0ccfba34d6371b41e877189b78599ae7b2f98a (patch)
tree	ea1acfc1a9c545537144edc18124dd16ed9d5099
parent	06857f20a528d5e7e5d3d2be5c3d4f836c7f366f (diff)