Finished site setup, finished lesson links and sites, added notes (not done yet)

author: altaf-creator <athaalaa@gmail.com> 2023-07-27 10:39:43 +0700
committer: altaf-creator <athaalaa@gmail.com> 2023-07-27 10:39:43 +0700
commit: 1efbdf493533ad11f4a961f1ec9759e8cfd14a96 (patch)
tree: 9826dfe09266e35dc723c3dfe7916678f3197c36
parent: e71f6203faf13574ef45bf80e23a546ac7866d5d (diff)
51 files changed, 6425 insertions, 125 deletions
diff --git a/404.html b/404.html
index 6803d58..174cda9 100644
--- a/404.html
+++ b/404.html
@@ -6,7 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/style.css">
     <link rel="icon" href="/assets/images/master.png">
-    <title>Al Azhar 9th Grade Lesson Notes</title>     
+    <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>
@@ -21,9 +25,6 @@
         <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>
-            <a href="/lessons/1/" class="sidebar-link link sidebar-sublink">Lesson 1</a>
-            <a href="/lessons/2/" class="sidebar-link link sidebar-sublink">Lesson 2</a>
-            <a href="/lessons/3/" class="sidebar-link link sidebar-sublink">Lesson 3</a>
         
         <hr class="divider">
         <div id="toc">
@@ -33,10 +34,11 @@
 
     <div id="main">
         <section>
-            <h1 style="text-align: center; font-size: 5rem; margin-bottom: 0;">404</h1>
+            <h1 style="text-align: center; font-size: 5rem; margin-bottom: 0;">HTTP 404</h1>
             <h2 style="text-align: center;">Whoops! It seeems like you're lost, or we couldn't find your page.</h2>
 
             <div style="text-align: center;">
+                <a href="../" style="margin: 20px" class="link">Go Back</a>
                 <a href="/" style="margin: 20px" class="link">Home</a>
                 <a href="/lessons/" style="margin: 20px" class="link">Lessons</a>
             </div>
diff --git a/about/author.html b/about/author.html
index 9dc270b..bdd6539 100644
--- a/about/author.html
+++ b/about/author.html
@@ -21,9 +21,6 @@
         <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>
-            <a href="/lessons/1/" class="sidebar-link link sidebar-sublink">Lesson 1</a>
-            <a href="/lessons/2/" class="sidebar-link link sidebar-sublink">Lesson 2</a>
-            <a href="/lessons/3/" class="sidebar-link link sidebar-sublink">Lesson 3</a>
         
         <hr class="divider">
         <div id="toc">
@@ -38,11 +35,11 @@
                 <h1 id="author">Website Developer and Author</h1>
                 <p>Athaalaa Altaf Hafidz</p>
                 <h1 id="description">Description</h1>
-                <p>A student from SMP Islam Al Azhar 25 Tangerang Selatan, currently sitting in 8th grade. He is the website developer and author of this website. He created this website for easier learning for exams, final exams, etc.</p>
+                <p>A student from SMP Islam Al Azhar 25 Tangerang Selatan, currently sitting in 9th grade. He is the website developer and author of this website. He created this website for easier learning for exams, final exams, etc.</p>
                 <h1 id="school">School Information</h1>
                 <p>
                     <b>School:</b> SMP Islam Al Azhar 25 Tangerang Selatan<br>
-                    <b>Grade:</b> 8B
+                    <b>Grade:</b> 9B
                 </p>
                 <h1 id="contact">Contact and Socials</h1>
                 <ul>
@@ -52,6 +49,7 @@
                     <li><i class="fa-brands fa-github"></i> <a href="https://github.com/@altafcreator" class="link"></i>altaf-creator</a></li>
                     <li><i class="fa-solid fa-envelope"></i> <a href="mailto:athaalaaaltafhafidz@gmail.com" class="link"></i>For School: athaalaaaltafhafidz@gmail.com</a></li>
                     <li><i class="fa-solid fa-envelope"></i> <a href="mailto:athaalaa@gmail.com" class="link"></i>General: athaalaaa@gmail.com</a></li>
+                    <li><i class="fa-brands fa-steam"></i> <a href="https://store.steampowered.com/app/2381230/simpliCity/" class="link"></i>play simpliCity on Steam</a></li>
                 </ul>
             </div>
         </section>
diff --git a/about/school.html b/about/school.html
index eb572f1..d37fc10 100644
--- a/about/school.html
+++ b/about/school.html
@@ -21,9 +21,6 @@
         <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>
-            <a href="/lessons/1/" class="sidebar-link link sidebar-sublink">Lesson 1</a>
-            <a href="/lessons/2/" class="sidebar-link link sidebar-sublink">Lesson 2</a>
-            <a href="/lessons/3/" class="sidebar-link link sidebar-sublink">Lesson 3</a>
         
         <hr class="divider">
         <div id="toc">
@@ -39,11 +36,13 @@
     <div id="main">
         <section>
             <div class="highlight">
-                <i class="fa-solid fa-triangle-exclamation" style="font-size: 2rem;"></i> <span>WARNING: THIS WEBSITE IS <strong>NOT AFFILIATED</strong> BY YPI AL AZHAR OR SMP ISLAM AL AZHAR 25 TANGERANG SELATAN. PLEASE CHECK <a href="/about/author.html" class="link">"About the Author"</a> PAGE FOR CONTACTING THE AUTHOR AND TAKEDOWN REQUESTS.</span>
+                <i class="fa-solid fa-triangle-exclamation" style="font-size: 2rem;"></i> <span>HEADS UP: This website is <strong>NOT AFFILIATED</strong> by YPI Al Azhar <strong>NOR</strong> SMP Islam Al Azhar 25 Tangerang Selatan. Please check <a href="/about/author.html" class="link">"About the Author"</a> page for contacting the author and for further discussion.</span>
             </div>
             <br>
-            <br>
+            <h1 id="introduction">Author's Introduction</h1>
+            <p>This website was created by Athaalaa Altaf Hafidz, a student from <strong>SMP Islam Al Azhar 25 Tangerang Selatan</strong></p>
             <i class="fa-solid fa-globe"></i> <a href="https://smpia25.al-azhar.sch.id" class="link"></i>https://smpia25.al-azhar.sch.id</a>
+            <hr style="margin-top: 2rem;">
             <h1 id="tentang">Tentang Kami</h1>
             <p>SMP Islam Al Azhar 25 Tangerang Selatan merupakan sekolah Islam unggulan yang menjadi bagian dari keluarga besar Yayasan Pesantren Islam Al Azhar Jakarta Yang sudah berusia 69 tahun.</p>
             <p>
@@ -70,7 +69,7 @@
                 <li>Menumbuhkan kecintaan dan kepedulian terhadap lingkungan</li>
             </ol>
 
-            <h1 id="guru">Guru</h1>
+            <h1 id="guru">Guru (OUTDATED)</h1>
             <div class="card-container">
                 <div class="card">
                     <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2022/10/B6-300x343.png" alt="" class="card-person">
diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png
new file mode 100644
index 0000000..d27d925
--- /dev/null
+++ b/android-chrome-192x192.png
diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png
new file mode 100644
index 0000000..18d8328
--- /dev/null
+++ b/android-chrome-512x512.png
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
new file mode 100644
index 0000000..aa0faae
--- /dev/null
+++ b/apple-touch-icon.png
diff --git a/assets/images/atoms/electron_configuration.svg b/assets/images/atoms/electron_configuration.svg
new file mode 100644
index 0000000..4323221
--- /dev/null
+++ b/assets/images/atoms/electron_configuration.svg
@@ -0,0 +1,1091 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1920"
+   height="1080"
+   viewBox="0 0 1920 1080"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   sodipodi:docname="electron_configuration.svg"
+   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="namedview7"
+     pagecolor="#000000"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="0.44562459"
+     inkscape:cx="635.0637"
+     inkscape:cy="428.6119"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient5075">
+      <stop
+         style="stop-color:#2ca02c;stop-opacity:1"
+         offset="0"
+         id="stop5071" />
+      <stop
+         style="stop-color:#8dd35f;stop-opacity:1"
+         offset="1"
+         id="stop5073" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient4421">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="0"
+         id="stop4417" />
+      <stop
+         style="stop-color:#7a7a7a;stop-opacity:1;"
+         offset="1"
+         id="stop4419" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient1378">
+      <stop
+         style="stop-color:#008000;stop-opacity:1"
+         offset="0"
+         id="stop1374" />
+      <stop
+         style="stop-color:#8dd35f;stop-opacity:1"
+         offset="1"
+         id="stop1376" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient7274"
+       id="linearGradient7276"
+       x1="143.83966"
+       y1="141.71466"
+       x2="285.75"
+       y2="0"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(6.7191603,0,0,3.7795276,-2.0375977e-6,1.0046844e-8)" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient7274">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="0"
+         id="stop7270" />
+      <stop
+         style="stop-color:#e5e5e5;stop-opacity:1;"
+         offset="1"
+         id="stop7272" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1378"
+       id="linearGradient1380"
+       x1="122.18182"
+       y1="207.86777"
+       x2="242.77686"
+       y2="87.272736"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1378"
+       id="linearGradient3208"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="122.18182"
+       y1="207.86777"
+       x2="242.77686"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1378"
+       id="linearGradient3218"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="122.18182"
+       y1="207.86777"
+       x2="242.77686"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1378"
+       id="linearGradient3236"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="122.18182"
+       y1="207.86777"
+       x2="242.77686"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1378"
+       id="linearGradient3238"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="122.18182"
+       y1="207.86777"
+       x2="242.77686"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1378"
+       id="linearGradient3248"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="122.18182"
+       y1="207.86777"
+       x2="242.77686"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1378"
+       id="linearGradient3274"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="122.18182"
+       y1="207.86777"
+       x2="242.77686"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1378"
+       id="linearGradient3276"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="122.18182"
+       y1="207.86777"
+       x2="242.77686"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1378"
+       id="linearGradient3278"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="122.18182"
+       y1="207.86777"
+       x2="242.77686"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1378"
+       id="linearGradient3288"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="122.18182"
+       y1="207.86777"
+       x2="242.77686"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1378"
+       id="linearGradient3322"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="122.18182"
+       y1="207.86777"
+       x2="242.77686"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1378"
+       id="linearGradient3324"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="122.18182"
+       y1="207.86777"
+       x2="242.77686"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1378"
+       id="linearGradient3326"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="122.18182"
+       y1="207.86777"
+       x2="242.77686"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1378"
+       id="linearGradient3328"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="122.18182"
+       y1="207.86777"
+       x2="242.77686"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1378"
+       id="linearGradient3362"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="122.18182"
+       y1="207.86777"
+       x2="242.77686"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1378"
+       id="linearGradient3364"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="122.18182"
+       y1="207.86777"
+       x2="242.77686"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1378"
+       id="linearGradient3366"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="122.18182"
+       y1="207.86777"
+       x2="242.77686"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1378"
+       id="linearGradient3368"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="122.18182"
+       y1="207.86777"
+       x2="242.77686"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4421"
+       id="linearGradient4352"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="182.47932"
+       y1="207.86777"
+       x2="182.47932"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4421"
+       id="linearGradient4427"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="182.47932"
+       y1="207.86777"
+       x2="182.47932"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4421"
+       id="linearGradient4433"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="182.47932"
+       y1="207.86777"
+       x2="182.47932"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4421"
+       id="linearGradient4439"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(136.46282,97.289244)"
+       x1="182.47932"
+       y1="207.86777"
+       x2="182.47932"
+       y2="87.272736" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient5075"
+       id="linearGradient5077"
+       x1="49.368912"
+       y1="149.17371"
+       x2="49.368912"
+       y2="78.323471"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1,0,0,1.3003407,81.122021,25.650339)" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:url(#linearGradient7276);fill-opacity:1;stroke:none;stroke-width:4.81765;stroke-dasharray:none;stroke-opacity:1"
+       id="rect6490"
+       width="1920"
+       height="1080"
+       x="0"
+       y="0"
+       ry="80.000008"
+       sodipodi:insensitive="true" />
+    <g
+       id="g4972"
+       transform="translate(417.39169,97.907817)">
+      <g
+         id="g3192"
+         transform="matrix(0.95161081,0,0,0.95161081,350.84326,-151.766)">
+        <circle
+           style="fill:url(#linearGradient1380);fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="path1312"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+        <text
+           xml:space="preserve"
+           style="font-weight:300;font-size:63.375px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#8dd35f;fill-rule:evenodd;stroke-width:3.56485;stroke-linecap:round;stroke-linejoin:round"
+           x="317.93658"
+           y="267.15521"
+           id="text1500"><tspan
+             sodipodi:role="line"
+             id="tspan1498"
+             x="317.93658"
+             y="267.15521"
+             style="fill:#ffffff;stroke-width:3.56485">1s</tspan></text>
+      </g>
+      <g
+         id="g3165"
+         transform="matrix(0.5332819,0.14289245,-0.14289245,0.5332819,392.28637,-211.52992)"
+         style="stroke:#808080;stroke-width:9.48001;stroke-dasharray:none">
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:9.48001;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="M 769.70619,88.078623 674.78901,252.47999 663.70905,211.12903"
+           id="path1829"
+           sodipodi:nodetypes="ccc" />
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:9.48001;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 714.27638,241.89938 -39.48737,10.58061"
+           id="path2257"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-18.32615"
+           inkscape:transform-center-y="-10.580615" />
+      </g>
+      <g
+         id="g3206"
+         transform="matrix(0.95161081,0,0,0.95161081,350.84326,-17.97424)">
+        <circle
+           style="fill:url(#linearGradient3208);fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle3200"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+        <text
+           xml:space="preserve"
+           style="font-weight:300;font-size:63.375px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#8dd35f;fill-rule:evenodd;stroke-width:3.56485;stroke-linecap:round;stroke-linejoin:round"
+           x="317.93658"
+           y="267.15521"
+           id="text3204"><tspan
+             sodipodi:role="line"
+             id="tspan3202"
+             x="317.93658"
+             y="267.15521"
+             style="fill:#ffffff;stroke-width:3.56485">2s</tspan></text>
+      </g>
+      <g
+         id="g3216"
+         transform="matrix(0.95161081,0,0,0.95161081,503.66724,-17.97424)">
+        <circle
+           style="fill:url(#linearGradient3218);fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle3210"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+        <text
+           xml:space="preserve"
+           style="font-weight:300;font-size:63.375px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#8dd35f;fill-rule:evenodd;stroke-width:3.56485;stroke-linecap:round;stroke-linejoin:round"
+           x="317.93658"
+           y="267.15521"
+           id="text3214"><tspan
+             sodipodi:role="line"
+             id="tspan3212"
+             x="317.93658"
+             y="267.15521"
+             style="fill:#ffffff;stroke-width:3.56485">2p</tspan></text>
+      </g>
+      <g
+         id="g3226"
+         transform="matrix(0.95161081,0,0,0.95161081,350.84326,115.81752)">
+        <circle
+           style="fill:url(#linearGradient3238);fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle3220"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+        <text
+           xml:space="preserve"
+           style="font-weight:300;font-size:63.375px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#8dd35f;fill-rule:evenodd;stroke-width:3.56485;stroke-linecap:round;stroke-linejoin:round"
+           x="317.93658"
+           y="267.15521"
+           id="text3224"><tspan
+             sodipodi:role="line"
+             id="tspan3222"
+             x="317.93658"
+             y="267.15521"
+             style="fill:#ffffff;stroke-width:3.56485">3s</tspan></text>
+      </g>
+      <g
+         id="g3234"
+         transform="matrix(0.95161081,0,0,0.95161081,503.66724,115.81752)">
+        <circle
+           style="fill:url(#linearGradient3236);fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle3228"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+        <text
+           xml:space="preserve"
+           style="font-weight:300;font-size:63.375px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#8dd35f;fill-rule:evenodd;stroke-width:3.56485;stroke-linecap:round;stroke-linejoin:round"
+           x="317.93658"
+           y="267.15521"
+           id="text3232"><tspan
+             sodipodi:role="line"
+             id="tspan3230"
+             x="317.93658"
+             y="267.15521"
+             style="fill:#ffffff;stroke-width:3.56485">3p</tspan></text>
+      </g>
+      <g
+         id="g3246"
+         transform="matrix(0.95161081,0,0,0.95161081,656.49121,115.81752)">
+        <circle
+           style="fill:url(#linearGradient3248);fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle3240"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+        <text
+           xml:space="preserve"
+           style="font-weight:300;font-size:63.375px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#8dd35f;fill-rule:evenodd;stroke-width:3.56485;stroke-linecap:round;stroke-linejoin:round"
+           x="317.93658"
+           y="267.15521"
+           id="text3244"><tspan
+             sodipodi:role="line"
+             id="tspan3242"
+             x="317.93658"
+             y="267.15521"
+             style="fill:#ffffff;stroke-width:3.56485">3d</tspan></text>
+      </g>
+      <g
+         id="g3256"
+         transform="matrix(0.95161081,0,0,0.95161081,350.84326,249.60928)">
+        <circle
+           style="fill:url(#linearGradient3278);fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle3250"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+        <text
+           xml:space="preserve"
+           style="font-weight:300;font-size:63.375px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#8dd35f;fill-rule:evenodd;stroke-width:3.56485;stroke-linecap:round;stroke-linejoin:round"
+           x="317.93658"
+           y="267.15521"
+           id="text3254"><tspan
+             sodipodi:role="line"
+             id="tspan3252"
+             x="317.93658"
+             y="267.15521"
+             style="fill:#ffffff;stroke-width:3.56485">4s</tspan></text>
+      </g>
+      <g
+         id="g3264"
+         transform="matrix(0.95161081,0,0,0.95161081,503.66724,249.60928)">
+        <circle
+           style="fill:url(#linearGradient3276);fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle3258"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+        <text
+           xml:space="preserve"
+           style="font-weight:300;font-size:63.375px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#8dd35f;fill-rule:evenodd;stroke-width:3.56485;stroke-linecap:round;stroke-linejoin:round"
+           x="317.93658"
+           y="267.15521"
+           id="text3262"><tspan
+             sodipodi:role="line"
+             id="tspan3260"
+             x="317.93658"
+             y="267.15521"
+             style="fill:#ffffff;stroke-width:3.56485">4p</tspan></text>
+      </g>
+      <g
+         id="g3272"
+         transform="matrix(0.95161081,0,0,0.95161081,656.49121,249.60928)">
+        <circle
+           style="fill:url(#linearGradient3274);fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle3266"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+        <text
+           xml:space="preserve"
+           style="font-weight:300;font-size:63.375px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#8dd35f;fill-rule:evenodd;stroke-width:3.56485;stroke-linecap:round;stroke-linejoin:round"
+           x="317.93658"
+           y="267.15521"
+           id="text3270"><tspan
+             sodipodi:role="line"
+             id="tspan3268"
+             x="317.93658"
+             y="267.15521"
+             style="fill:#ffffff;stroke-width:3.56485">1d</tspan></text>
+      </g>
+      <g
+         id="g3286"
+         transform="matrix(0.95161081,0,0,0.95161081,809.31519,249.60928)">
+        <circle
+           style="fill:url(#linearGradient3288);fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle3280"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+        <text
+           xml:space="preserve"
+           style="font-weight:300;font-size:63.375px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#8dd35f;fill-rule:evenodd;stroke-width:3.56485;stroke-linecap:round;stroke-linejoin:round"
+           x="317.93658"
+           y="267.15521"
+           id="text3284"><tspan
+             sodipodi:role="line"
+             id="tspan3282"
+             x="317.93658"
+             y="267.15521"
+             style="fill:#ffffff;stroke-width:3.56485">1f</tspan></text>
+      </g>
+      <g
+         id="g3296"
+         transform="matrix(0.95161081,0,0,0.95161081,350.84326,383.40104)">
+        <circle
+           style="fill:url(#linearGradient3328);fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle3290"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+        <text
+           xml:space="preserve"
+           style="font-weight:300;font-size:63.375px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#8dd35f;fill-rule:evenodd;stroke-width:3.56485;stroke-linecap:round;stroke-linejoin:round"
+           x="317.93658"
+           y="267.15521"
+           id="text3294"><tspan
+             sodipodi:role="line"
+             id="tspan3292"
+             x="317.93658"
+             y="267.15521"
+             style="fill:#ffffff;stroke-width:3.56485">5s</tspan></text>
+      </g>
+      <g
+         id="g3304"
+         transform="matrix(0.95161081,0,0,0.95161081,503.66724,383.40104)">
+        <circle
+           style="fill:url(#linearGradient3326);fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle3298"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+        <text
+           xml:space="preserve"
+           style="font-weight:300;font-size:63.375px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#8dd35f;fill-rule:evenodd;stroke-width:3.56485;stroke-linecap:round;stroke-linejoin:round"
+           x="317.93658"
+           y="267.15521"
+           id="text3302"><tspan
+             sodipodi:role="line"
+             id="tspan3300"
+             x="317.93658"
+             y="267.15521"
+             style="fill:#ffffff;stroke-width:3.56485">5p</tspan></text>
+      </g>
+      <g
+         id="g3312"
+         transform="matrix(0.95161081,0,0,0.95161081,656.49121,383.40104)">
+        <circle
+           style="fill:url(#linearGradient3324);fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle3306"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+        <text
+           xml:space="preserve"
+           style="font-weight:300;font-size:63.375px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#8dd35f;fill-rule:evenodd;stroke-width:3.56485;stroke-linecap:round;stroke-linejoin:round"
+           x="317.93658"
+           y="267.15521"
+           id="text3310"><tspan
+             sodipodi:role="line"
+             id="tspan3308"
+             x="317.93658"
+             y="267.15521"
+             style="fill:#ffffff;stroke-width:3.56485">5d</tspan></text>
+      </g>
+      <g
+         id="g3320"
+         transform="matrix(0.95161081,0,0,0.95161081,809.31519,383.40104)">
+        <circle
+           style="fill:url(#linearGradient3322);fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle3314"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+        <text
+           xml:space="preserve"
+           style="font-weight:300;font-size:63.375px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#8dd35f;fill-rule:evenodd;stroke-width:3.56485;stroke-linecap:round;stroke-linejoin:round"
+           x="317.93658"
+           y="267.15521"
+           id="text3318"><tspan
+             sodipodi:role="line"
+             id="tspan3316"
+             x="317.93658"
+             y="267.15521"
+             style="fill:#ffffff;stroke-width:3.56485">5f</tspan></text>
+      </g>
+      <g
+         id="g3336"
+         transform="matrix(0.95161081,0,0,0.95161081,350.84326,517.1928)">
+        <circle
+           style="fill:url(#linearGradient3368);fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle3330"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+        <text
+           xml:space="preserve"
+           style="font-weight:300;font-size:63.375px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#8dd35f;fill-rule:evenodd;stroke-width:3.56485;stroke-linecap:round;stroke-linejoin:round"
+           x="317.93658"
+           y="267.15521"
+           id="text3334"><tspan
+             sodipodi:role="line"
+             id="tspan3332"
+             x="317.93658"
+             y="267.15521"
+             style="fill:#ffffff;stroke-width:3.56485">6s</tspan></text>
+      </g>
+      <g
+         id="g3344"
+         transform="matrix(0.95161081,0,0,0.95161081,503.66724,517.1928)">
+        <circle
+           style="fill:url(#linearGradient3366);fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle3338"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+        <text
+           xml:space="preserve"
+           style="font-weight:300;font-size:63.375px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#8dd35f;fill-rule:evenodd;stroke-width:3.56485;stroke-linecap:round;stroke-linejoin:round"
+           x="317.93658"
+           y="267.15521"
+           id="text3342"><tspan
+             sodipodi:role="line"
+             id="tspan3340"
+             x="317.93658"
+             y="267.15521"
+             style="fill:#ffffff;stroke-width:3.56485">6p</tspan></text>
+      </g>
+      <g
+         id="g3352"
+         transform="matrix(0.95161081,0,0,0.95161081,656.49121,517.1928)">
+        <circle
+           style="fill:url(#linearGradient3364);fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle3346"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+        <text
+           xml:space="preserve"
+           style="font-weight:300;font-size:63.375px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#8dd35f;fill-rule:evenodd;stroke-width:3.56485;stroke-linecap:round;stroke-linejoin:round"
+           x="317.93658"
+           y="267.15521"
+           id="text3350"><tspan
+             sodipodi:role="line"
+             id="tspan3348"
+             x="317.93658"
+             y="267.15521"
+             style="fill:#ffffff;stroke-width:3.56485">6d</tspan></text>
+      </g>
+      <g
+         id="g3360"
+         transform="matrix(0.95161081,0,0,0.95161081,809.31519,517.1928)">
+        <circle
+           style="fill:url(#linearGradient3362);fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle3354"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+        <text
+           xml:space="preserve"
+           style="font-weight:300;font-size:63.375px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#8dd35f;fill-rule:evenodd;stroke-width:3.56485;stroke-linecap:round;stroke-linejoin:round"
+           x="317.93658"
+           y="267.15521"
+           id="text3358"><tspan
+             sodipodi:role="line"
+             id="tspan3356"
+             x="317.93658"
+             y="267.15521"
+             style="fill:#ffffff;stroke-width:3.56485">6f</tspan></text>
+      </g>
+      <g
+         id="g3374"
+         transform="matrix(0.5332819,0.14289245,-0.14289245,0.5332819,545.11034,-77.738156)"
+         style="stroke:#808080;stroke-width:9.48002;stroke-dasharray:none">
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="M 769.70619,88.078623 674.78901,252.47999 663.70905,211.12903"
+           id="path3370"
+           sodipodi:nodetypes="ccc" />
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 714.27638,241.89938 -39.48737,10.58061"
+           id="path3372"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-18.32615"
+           inkscape:transform-center-y="-10.580615" />
+      </g>
+      <g
+         id="g3380"
+         transform="matrix(0.5332819,0.14289245,-0.14289245,0.5332819,697.93432,56.053604)"
+         style="stroke:#808080;stroke-width:9.48002;stroke-dasharray:none">
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="M 769.70619,88.078623 674.78901,252.47999 663.70905,211.12903"
+           id="path3376"
+           sodipodi:nodetypes="ccc" />
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 714.27638,241.89938 -39.48737,10.58061"
+           id="path3378"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-18.32615"
+           inkscape:transform-center-y="-10.580615" />
+      </g>
+      <g
+         id="g3386"
+         transform="matrix(0.5332819,0.14289245,-0.14289245,0.5332819,545.11034,56.053604)"
+         style="stroke:#808080;stroke-width:9.48002;stroke-dasharray:none">
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="M 867.20993,-80.802815 674.78901,252.47999 663.70905,211.12903"
+           id="path3382"
+           sodipodi:nodetypes="ccc" />
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 714.27638,241.89938 -39.48737,10.58061"
+           id="path3384"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-18.32615"
+           inkscape:transform-center-y="-10.580615" />
+      </g>
+      <g
+         id="g3392"
+         transform="matrix(0.5332819,0.14289245,-0.14289245,0.5332819,392.28637,-77.738156)"
+         style="stroke:#808080;stroke-width:9.48002;stroke-dasharray:none">
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="M 867.20993,-80.802815 674.78901,252.47999 663.70905,211.12903"
+           id="path3388"
+           sodipodi:nodetypes="ccc" />
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 714.27638,241.89938 -39.48737,10.58061"
+           id="path3390"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-18.32615"
+           inkscape:transform-center-y="-10.580615" />
+      </g>
+      <g
+         id="g3398"
+         transform="matrix(0.5332819,0.14289245,-0.14289245,0.5332819,850.75829,189.84536)"
+         style="stroke:#808080;stroke-width:9.48002;stroke-dasharray:none">
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="M 769.70619,88.078623 674.78901,252.47999 663.70905,211.12903"
+           id="path3394"
+           sodipodi:nodetypes="ccc" />
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 714.27638,241.89938 -39.48737,10.58061"
+           id="path3396"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-18.32615"
+           inkscape:transform-center-y="-10.580615" />
+      </g>
+      <g
+         id="g3404"
+         transform="matrix(0.5332819,0.14289245,-0.14289245,0.5332819,697.93432,189.84536)"
+         style="stroke:#808080;stroke-width:9.48002;stroke-dasharray:none">
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="M 867.20993,-80.802815 674.78901,252.47999 663.70905,211.12903"
+           id="path3400"
+           sodipodi:nodetypes="ccc" />
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 714.27638,241.89938 -39.48737,10.58061"
+           id="path3402"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-18.32615"
+           inkscape:transform-center-y="-10.580615" />
+      </g>
+      <g
+         id="g3418"
+         transform="matrix(0.5332819,0.14289245,-0.14289245,0.5332819,392.28637,56.053604)"
+         style="stroke:#808080;stroke-width:9.48002;stroke-dasharray:none">
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 720.95432,172.51934 -46.16531,79.96065 -11.07996,-41.35096"
+           id="path3414"
+           sodipodi:nodetypes="ccc" />
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 714.27638,241.89938 -39.48737,10.58061"
+           id="path3416"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-18.32615"
+           inkscape:transform-center-y="-10.580615" />
+      </g>
+      <g
+         id="g3424"
+         transform="matrix(0.5332819,0.14289245,-0.14289245,0.5332819,391.28719,190.84454)"
+         style="stroke:#808080;stroke-width:9.48002;stroke-dasharray:none">
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 720.95432,172.51934 -46.16531,79.96065 -11.07996,-41.35096"
+           id="path3420"
+           sodipodi:nodetypes="ccc" />
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 714.27638,241.89938 -39.48737,10.58061"
+           id="path3422"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-18.32615"
+           inkscape:transform-center-y="-10.580615" />
+      </g>
+      <g
+         id="g3436"
+         transform="matrix(0.5332819,0.14289245,-0.14289245,0.5332819,392.28637,323.63712)"
+         style="stroke:#808080;stroke-width:9.48002;stroke-dasharray:none">
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 720.95432,172.51934 -46.16531,79.96065 -11.07996,-41.35096"
+           id="path3432"
+           sodipodi:nodetypes="ccc" />
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 714.27638,241.89938 -39.48737,10.58061"
+           id="path3434"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-18.32615"
+           inkscape:transform-center-y="-10.580615" />
+      </g>
+      <g
+         id="g3442"
+         transform="matrix(0.5332819,0.14289245,-0.14289245,0.5332819,391.28719,458.42806)"
+         style="stroke:#808080;stroke-width:9.48002;stroke-dasharray:none">
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 720.95432,172.51934 -46.16531,79.96065 -11.07996,-41.35096"
+           id="path3438"
+           sodipodi:nodetypes="ccc" />
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 714.27638,241.89938 -39.48737,10.58061"
+           id="path3440"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-18.32615"
+           inkscape:transform-center-y="-10.580615" />
+      </g>
+      <g
+         id="g3448"
+         transform="matrix(0.5332819,0.14289245,-0.14289245,0.5332819,545.11034,323.63712)"
+         style="stroke:#808080;stroke-width:9.48002;stroke-dasharray:none">
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 720.95432,172.51934 -46.16531,79.96065 -11.07996,-41.35096"
+           id="path3444"
+           sodipodi:nodetypes="ccc" />
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 714.27638,241.89938 -39.48737,10.58061"
+           id="path3446"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-18.32615"
+           inkscape:transform-center-y="-10.580615" />
+      </g>
+      <g
+         id="g3454"
+         transform="matrix(0.5332819,0.14289245,-0.14289245,0.5332819,544.11116,458.42806)"
+         style="stroke:#808080;stroke-width:9.48002;stroke-dasharray:none">
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 720.95432,172.51934 -46.16531,79.96065 -11.07996,-41.35096"
+           id="path3450"
+           sodipodi:nodetypes="ccc" />
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 714.27638,241.89938 -39.48737,10.58061"
+           id="path3452"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-18.32615"
+           inkscape:transform-center-y="-10.580615" />
+      </g>
+      <g
+         id="g3460"
+         transform="matrix(0.5332819,0.14289245,-0.14289245,0.5332819,544.11116,190.84454)"
+         style="stroke:#808080;stroke-width:9.48002;stroke-dasharray:none">
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 720.95432,172.51934 -46.16531,79.96065 -11.07996,-41.35096"
+           id="path3456"
+           sodipodi:nodetypes="ccc" />
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 714.27638,241.89938 -39.48737,10.58061"
+           id="path3458"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-18.32615"
+           inkscape:transform-center-y="-10.580615" />
+      </g>
+      <g
+         id="g3466"
+         transform="matrix(0.5332819,0.14289245,-0.14289245,0.5332819,697.93432,323.63712)"
+         style="stroke:#808080;stroke-width:9.48002;stroke-dasharray:none">
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 720.95432,172.51934 -46.16531,79.96065 -11.07996,-41.35096"
+           id="path3462"
+           sodipodi:nodetypes="ccc" />
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 714.27638,241.89938 -39.48737,10.58061"
+           id="path3464"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-18.32615"
+           inkscape:transform-center-y="-10.580615" />
+      </g>
+      <g
+         id="g3472"
+         transform="matrix(0.5332819,0.14289245,-0.14289245,0.5332819,696.93514,458.42806)"
+         style="stroke:#808080;stroke-width:9.48002;stroke-dasharray:none">
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 720.95432,172.51934 -46.16531,79.96065 -11.07996,-41.35096"
+           id="path3468"
+           sodipodi:nodetypes="ccc" />
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 714.27638,241.89938 -39.48737,10.58061"
+           id="path3470"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-18.32615"
+           inkscape:transform-center-y="-10.580615" />
+      </g>
+      <g
+         id="g3478"
+         transform="matrix(0.5332819,0.14289245,-0.14289245,0.5332819,849.7591,324.63631)"
+         style="stroke:#808080;stroke-width:9.48002;stroke-dasharray:none">
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="M 842.834,-38.582456 674.78901,252.47999 663.70905,211.12903"
+           id="path3474"
+           sodipodi:nodetypes="ccc" />
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 714.27638,241.89938 -39.48737,10.58061"
+           id="path3476"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-18.32615"
+           inkscape:transform-center-y="-10.580615" />
+      </g>
+      <g
+         id="g3484"
+         transform="matrix(0.5332819,0.14289245,-0.14289245,0.5332819,849.75911,458.42806)"
+         style="stroke:#808080;stroke-width:9.48002;stroke-dasharray:none">
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="M 915.96181,-165.24353 674.78901,252.47999 663.70905,211.12903"
+           id="path3480"
+           sodipodi:nodetypes="ccc" />
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#808080;stroke-width:12.0655;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           d="m 714.27638,241.89938 -39.48737,10.58061"
+           id="path3482"
+           sodipodi:nodetypes="cc"
+           inkscape:transform-center-x="-18.32615"
+           inkscape:transform-center-y="-10.580615" />
+      </g>
+      <g
+         id="g4320"
+         transform="matrix(0.95161081,0,0,0.95161081,350.84326,650.98456)">
+        <circle
+           style="fill:url(#linearGradient4352);fill-opacity:1;fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle4314"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+      </g>
+      <g
+         id="g4425"
+         transform="matrix(0.95161081,0,0,0.95161081,503.66724,650.98456)">
+        <circle
+           style="fill:url(#linearGradient4427);fill-opacity:1;fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle4423"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+      </g>
+      <g
+         id="g4431"
+         transform="matrix(0.95161081,0,0,0.95161081,656.49121,650.98456)">
+        <circle
+           style="fill:url(#linearGradient4433);fill-opacity:1;fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle4429"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+      </g>
+      <g
+         id="g4437"
+         transform="matrix(0.95161081,0,0,0.95161081,809.31519,650.98456)">
+        <circle
+           style="fill:url(#linearGradient4439);fill-opacity:1;fill-rule:evenodd;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round"
+           id="circle4435"
+           cx="318.94214"
+           cy="244.8595"
+           r="60.29752" />
+      </g>
+    </g>
+    <text
+       xml:space="preserve"
+       style="font-weight:300;font-size:96px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4.31846;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+       x="178.33624"
+       y="193.07347"
+       id="text4976"><tspan
+         sodipodi:role="line"
+         id="tspan4974"
+         x="178.33624"
+         y="193.07347"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:96px;font-family:Roboto;-inkscape-font-specification:Roboto;text-align:start;text-anchor:start;stroke-width:4.31846">Electron </tspan><tspan
+         sodipodi:role="line"
+         x="178.33624"
+         y="313.07349"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:96px;font-family:Roboto;-inkscape-font-specification:Roboto;text-align:start;text-anchor:start;stroke-width:4.31846"
+         id="tspan5028">Configuration</tspan></text>
+    <path
+       style="fill:#8dd35f;fill-opacity:1;fill-rule:evenodd;stroke:url(#linearGradient5077);stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 130.49093,131.07347 v 84.97756"
+       id="path5030" />
+  </g>
+</svg>
diff --git a/assets/images/atoms/natrium_symbol.svg b/assets/images/atoms/natrium_symbol.svg
new file mode 100644
index 0000000..bfdad89
--- /dev/null
+++ b/assets/images/atoms/natrium_symbol.svg
@@ -0,0 +1,501 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1080"
+   height="1080"
+   viewBox="0 0 285.74999 285.75"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   sodipodi:docname="natrium_symbol.svg"
+   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="namedview7"
+     pagecolor="#000000"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.52221046"
+     inkscape:cx="148.4076"
+     inkscape:cy="574.48102"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient7274">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="0"
+         id="stop7270" />
+      <stop
+         style="stop-color:#e5e5e5;stop-opacity:1;"
+         offset="1"
+         id="stop7272" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3529">
+      <stop
+         style="stop-color:#c83737;stop-opacity:1"
+         offset="0"
+         id="stop3525" />
+      <stop
+         style="stop-color:#ffb380;stop-opacity:1"
+         offset="1"
+         id="stop3527" />
+    </linearGradient>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter1278"
+       x="-0.075946687"
+       y="-0.076911961"
+       width="1.1518934"
+       height="1.1538239">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.98634731"
+         id="feGaussianBlur1280" />
+    </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient3523"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient3537"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient3549"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4335"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4361"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4363"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4365"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4367"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient7274"
+       id="linearGradient7276"
+       x1="143.83966"
+       y1="141.71466"
+       x2="285.75"
+       y2="0"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient568"
+       id="linearGradient570"
+       x1="102.78811"
+       y1="103.80765"
+       x2="120.66234"
+       y2="82.935143"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient568">
+      <stop
+         style="stop-color:#5f8dd3;stop-opacity:1"
+         offset="0"
+         id="stop564" />
+      <stop
+         style="stop-color:#afdde9;stop-opacity:1"
+         offset="1"
+         id="stop566" />
+    </linearGradient>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter1278-8"
+       x="-0.075946687"
+       y="-0.076911961"
+       width="1.1518934"
+       height="1.1538239">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.98634731"
+         id="feGaussianBlur1280-2" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter2603"
+       x="-0.012571142"
+       y="-0.012571142"
+       width="1.0251423"
+       height="1.0251423">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.74895363"
+         id="feGaussianBlur2605" />
+    </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient462"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient470"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient478"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="opacity:1;fill:url(#linearGradient7276);fill-opacity:1;stroke:none;stroke-width:0.956;stroke-dasharray:none;stroke-opacity:1"
+       id="rect6490"
+       width="285.75"
+       height="285.75"
+       x="0"
+       y="0"
+       ry="21.166668"
+       sodipodi:insensitive="true" />
+    <g
+       id="g396"
+       style="display:inline;opacity:0.432177;filter:url(#filter2603)"
+       transform="matrix(1.1006133,0,0,1.1006133,-14.542283,-14.20806)">
+      <circle
+         style="fill:none;fill-opacity:1;stroke:#676767;stroke-width:0.956;stroke-dasharray:none;stroke-opacity:1"
+         id="path2789"
+         cx="141.69138"
+         cy="144.0587"
+         r="48.87215" />
+      <g
+         id="g3521"
+         transform="matrix(0.28737677,0,0,0.28737677,152.96637,139.68504)">
+        <circle
+           style="fill:url(#linearGradient3523);fill-opacity:1;stroke-width:0.264583"
+           id="circle3517"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path3519"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g3535"
+         transform="matrix(0.28737677,0,0,0.28737677,69.491461,89.844408)">
+        <circle
+           style="fill:url(#linearGradient3537);fill-opacity:1;stroke-width:0.264583"
+           id="circle3531"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path3533"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <circle
+         style="fill:none;fill-opacity:1;stroke:#676767;stroke-width:0.956;stroke-dasharray:none;stroke-opacity:1"
+         id="circle3539"
+         cx="141.69138"
+         cy="144.0587"
+         r="69.444046" />
+      <circle
+         style="fill:none;fill-opacity:1;stroke:#676767;stroke-width:0.905019;stroke-dasharray:none;stroke-opacity:1"
+         id="circle3541"
+         cx="141.69138"
+         cy="144.0587"
+         r="89.490608" />
+      <g
+         id="g3547"
+         transform="matrix(0.28737677,0,0,0.28737677,98.989036,49.742262)">
+        <circle
+           style="fill:url(#linearGradient3549);fill-opacity:1;stroke-width:0.264583"
+           id="circle3543"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path3545"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g4333"
+         transform="matrix(0.28737677,0,0,0.28737677,92.37046,185.41593)">
+        <circle
+           style="fill:url(#linearGradient4335);fill-opacity:1;stroke-width:0.264583"
+           id="circle4329"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path4331"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g4341"
+         transform="matrix(0.28737677,0,0,0.28737677,178.70414,118.42254)">
+        <circle
+           style="fill:url(#linearGradient4367);fill-opacity:1;stroke-width:0.264583"
+           id="circle4337"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path4339"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g4347"
+         transform="matrix(0.28737677,0,0,0.28737677,47.246318,148.80032)">
+        <circle
+           style="fill:url(#linearGradient4365);fill-opacity:1;stroke-width:0.264583"
+           id="circle4343"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path4345"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g4353"
+         transform="matrix(0.28737677,0,0,0.28737677,43.721565,97.47858)">
+        <circle
+           style="fill:url(#linearGradient4363);fill-opacity:1;stroke-width:0.264583"
+           id="circle4349"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path4351"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g4359"
+         transform="matrix(0.28737677,0,0,0.28737677,147.73932,59.947859)">
+        <circle
+           style="fill:url(#linearGradient4361);fill-opacity:1;stroke-width:0.264583"
+           id="circle4355"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path4357"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g17076">
+        <g
+           id="g1335"
+           transform="translate(30.022169,53.667605)">
+          <circle
+             style="fill:url(#linearGradient570);fill-opacity:1;stroke-width:0.264583"
+             id="path502"
+             cx="112.85283"
+             cy="89.207481"
+             r="17.733112" />
+          <path
+             id="circle711"
+             style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278-8)"
+             d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+             transform="rotate(180,112.85286,89.207478)" />
+        </g>
+      </g>
+      <g
+         id="g460"
+         transform="matrix(0.28737677,0,0,0.28737677,170.72608,150.73985)">
+        <circle
+           style="fill:url(#linearGradient462);fill-opacity:1;stroke-width:0.264583"
+           id="circle456"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path458"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g468"
+         transform="matrix(0.28737677,0,0,0.28737677,137.49025,182.26496)">
+        <circle
+           style="fill:url(#linearGradient470);fill-opacity:1;stroke-width:0.264583"
+           id="circle464"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path466"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g476"
+         transform="matrix(0.28737677,0,0,0.28737677,49.157794,51.317757)">
+        <circle
+           style="fill:url(#linearGradient478);fill-opacity:1;stroke-width:0.264583"
+           id="circle472"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path474"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+    </g>
+    <g
+       id="g2554"
+       transform="translate(-9.0322887,-22.134172)"
+       style="display:inline;opacity:1">
+      <text
+         xml:space="preserve"
+         style="font-size:137.408px;fill:#ffffff;stroke-width:11.4506"
+         x="149.82796"
+         y="194.14777"
+         id="text236"><tspan
+           sodipodi:role="line"
+           id="tspan234"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:Roboto;text-align:center;text-anchor:middle;fill:#000000;stroke-width:11.4506"
+           x="149.82796"
+           y="194.14777">Na</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:33.315px;font-family:Roboto;-inkscape-font-specification:Roboto;fill:#ffffff;stroke-width:5.5525"
+         x="154.27536"
+         y="226.68983"
+         id="text2548"><tspan
+           sodipodi:role="line"
+           id="tspan2546"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:33.315px;font-family:Roboto;-inkscape-font-specification:Roboto;text-align:center;text-anchor:middle;fill:#666666;stroke-width:5.5525"
+           x="154.27536"
+           y="226.68983">Sodium</tspan></text>
+    </g>
+    <text
+       xml:space="preserve"
+       style="font-size:33.315px;fill:#ffffff;stroke-width:5.5525"
+       x="24.734022"
+       y="45.026928"
+       id="text1088"><tspan
+         sodipodi:role="line"
+         id="tspan1086"
+         style="font-style:italic;font-variant:normal;font-weight:300;font-stretch:normal;font-size:33.315px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:#000000;stroke-width:5.5525"
+         x="24.734022"
+         y="45.026928">23</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:33.315px;fill:#ffffff;stroke-width:5.5525"
+       x="19.442356"
+       y="264.25803"
+       id="text1092"><tspan
+         sodipodi:role="line"
+         id="tspan1090"
+         style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:33.315px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:#000000;stroke-width:5.5525"
+         x="19.442356"
+         y="264.25803">11</tspan></text>
+  </g>
+</svg>
diff --git a/assets/images/atoms/oxygen.svg b/assets/images/atoms/oxygen.svg
new file mode 100644
index 0000000..6476bcb
--- /dev/null
+++ b/assets/images/atoms/oxygen.svg
@@ -0,0 +1,484 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1080"
+   height="1080"
+   viewBox="0 0 285.74999 285.75"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   sodipodi:docname="oxygen.svg"
+   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="namedview7"
+     pagecolor="#000000"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.36925856"
+     inkscape:cx="257.2723"
+     inkscape:cy="449.5495"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient7274">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="0"
+         id="stop7270" />
+      <stop
+         style="stop-color:#e5e5e5;stop-opacity:1;"
+         offset="1"
+         id="stop7272" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient6326">
+      <stop
+         style="stop-color:#333333;stop-opacity:1;"
+         offset="0"
+         id="stop6322" />
+      <stop
+         style="stop-color:#cccccc;stop-opacity:1"
+         offset="1"
+         id="stop6324" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3529">
+      <stop
+         style="stop-color:#c83737;stop-opacity:1"
+         offset="0"
+         id="stop3525" />
+      <stop
+         style="stop-color:#ffb380;stop-opacity:1"
+         offset="1"
+         id="stop3527" />
+    </linearGradient>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter1278"
+       x="-0.075946687"
+       y="-0.076911961"
+       width="1.1518934"
+       height="1.1538239">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.98634731"
+         id="feGaussianBlur1280" />
+    </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient3523"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient3537"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient3549"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4335"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4361"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4363"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4365"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4367"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient6326"
+       id="linearGradient6328"
+       x1="140.60326"
+       y1="238.69911"
+       x2="140.60326"
+       y2="248.73122"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient7274"
+       id="linearGradient7276"
+       x1="143.83966"
+       y1="141.71466"
+       x2="285.75"
+       y2="0"
+       gradientUnits="userSpaceOnUse" />
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter16972"
+       x="-0.21763576"
+       y="-0.21763576"
+       width="1.4352715"
+       height="1.4352715">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="3.2161328"
+         id="feGaussianBlur16974" />
+    </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient568"
+       id="linearGradient570"
+       x1="102.78811"
+       y1="103.80765"
+       x2="120.66234"
+       y2="82.935143"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient568">
+      <stop
+         style="stop-color:#5f8dd3;stop-opacity:1"
+         offset="0"
+         id="stop564" />
+      <stop
+         style="stop-color:#afdde9;stop-opacity:1"
+         offset="1"
+         id="stop566" />
+    </linearGradient>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter1278-8"
+       x="-0.075946687"
+       y="-0.076911961"
+       width="1.1518934"
+       height="1.1538239">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.98634731"
+         id="feGaussianBlur1280-2" />
+    </filter>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="opacity:1;fill:url(#linearGradient7276);fill-opacity:1;stroke:none;stroke-width:0.956;stroke-dasharray:none;stroke-opacity:1"
+       id="rect6490"
+       width="285.75"
+       height="285.75"
+       x="0"
+       y="0"
+       ry="21.166668"
+       sodipodi:insensitive="true" />
+    <circle
+       style="fill:none;fill-opacity:1;stroke:#676767;stroke-width:0.956;stroke-dasharray:none;stroke-opacity:1"
+       id="path2789"
+       cx="141.69138"
+       cy="144.0587"
+       r="48.87215" />
+    <g
+       id="g3521"
+       transform="matrix(0.28737677,0,0,0.28737677,152.96637,139.68504)">
+      <circle
+         style="fill:url(#linearGradient3523);fill-opacity:1;stroke-width:0.264583"
+         id="circle3517"
+         cx="112.85283"
+         cy="89.207481"
+         r="17.733112" />
+      <path
+         id="path3519"
+         style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+         d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+         transform="rotate(180,112.85286,89.207478)" />
+    </g>
+    <g
+       id="g3535"
+       transform="matrix(0.28737677,0,0,0.28737677,69.491461,89.844408)">
+      <circle
+         style="fill:url(#linearGradient3537);fill-opacity:1;stroke-width:0.264583"
+         id="circle3531"
+         cx="112.85283"
+         cy="89.207481"
+         r="17.733112" />
+      <path
+         id="path3533"
+         style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+         d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+         transform="rotate(180,112.85286,89.207478)" />
+    </g>
+    <circle
+       style="fill:none;fill-opacity:1;stroke:#676767;stroke-width:0.956;stroke-dasharray:none;stroke-opacity:1"
+       id="circle3539"
+       cx="141.69138"
+       cy="144.0587"
+       r="69.444046" />
+    <circle
+       style="fill:none;fill-opacity:1;stroke:#676767;stroke-width:0.905019;stroke-dasharray:none;stroke-opacity:1"
+       id="circle3541"
+       cx="141.69138"
+       cy="144.0587"
+       r="89.490608" />
+    <g
+       id="g3547"
+       transform="matrix(0.28737677,0,0,0.28737677,98.989036,49.742262)">
+      <circle
+         style="fill:url(#linearGradient3549);fill-opacity:1;stroke-width:0.264583"
+         id="circle3543"
+         cx="112.85283"
+         cy="89.207481"
+         r="17.733112" />
+      <path
+         id="path3545"
+         style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+         d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+         transform="rotate(180,112.85286,89.207478)" />
+    </g>
+    <g
+       id="g4333"
+       transform="matrix(0.28737677,0,0,0.28737677,120.66799,186.92319)">
+      <circle
+         style="fill:url(#linearGradient4335);fill-opacity:1;stroke-width:0.264583"
+         id="circle4329"
+         cx="112.85283"
+         cy="89.207481"
+         r="17.733112" />
+      <path
+         id="path4331"
+         style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+         d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+         transform="rotate(180,112.85286,89.207478)" />
+    </g>
+    <g
+       id="g4341"
+       transform="matrix(0.28737677,0,0,0.28737677,178.70414,118.42254)">
+      <circle
+         style="fill:url(#linearGradient4367);fill-opacity:1;stroke-width:0.264583"
+         id="circle4337"
+         cx="112.85283"
+         cy="89.207481"
+         r="17.733112" />
+      <path
+         id="path4339"
+         style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+         d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+         transform="rotate(180,112.85286,89.207478)" />
+    </g>
+    <g
+       id="g4347"
+       transform="matrix(0.28737677,0,0,0.28737677,57.467032,164.68218)">
+      <circle
+         style="fill:url(#linearGradient4365);fill-opacity:1;stroke-width:0.264583"
+         id="circle4343"
+         cx="112.85283"
+         cy="89.207481"
+         r="17.733112" />
+      <path
+         id="path4345"
+         style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+         d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+         transform="rotate(180,112.85286,89.207478)" />
+    </g>
+    <g
+       id="g4353"
+       transform="matrix(0.28737677,0,0,0.28737677,41.650019,102.56842)">
+      <circle
+         style="fill:url(#linearGradient4363);fill-opacity:1;stroke-width:0.264583"
+         id="circle4349"
+         cx="112.85283"
+         cy="89.207481"
+         r="17.733112" />
+      <path
+         id="path4351"
+         style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+         d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+         transform="rotate(180,112.85286,89.207478)" />
+    </g>
+    <g
+       id="g4359"
+       transform="matrix(0.28737677,0,0,0.28737677,161.51475,72.684956)">
+      <circle
+         style="fill:url(#linearGradient4361);fill-opacity:1;stroke-width:0.264583"
+         id="circle4355"
+         cx="112.85283"
+         cy="89.207481"
+         r="17.733112" />
+      <path
+         id="path4357"
+         style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+         d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+         transform="rotate(180,112.85286,89.207478)" />
+    </g>
+    <text
+       xml:space="preserve"
+       style="font-size:25.4px;fill:#ffffff;stroke-width:4.23333"
+       x="251.77174"
+       y="39.472527"
+       id="text5147"><tspan
+         sodipodi:role="line"
+         id="tspan5145"
+         style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:25.4px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:#000000;stroke-width:4.23333"
+         x="251.77174"
+         y="39.472527">8</tspan></text>
+    <g
+       id="g5935"
+       transform="translate(-1.5130856,-2.5366667e-5)">
+      <text
+         xml:space="preserve"
+         style="font-size:50.8px;fill:#ffffff;stroke-width:4.23333"
+         x="14.461133"
+         y="238.11827"
+         id="text236"><tspan
+           sodipodi:role="line"
+           id="tspan234"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:Roboto;fill:#000000;stroke-width:4.23333"
+           x="14.461133"
+           y="238.11827">O</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-size:22.147px;fill:#ffffff;stroke-width:1.84558;stroke:none"
+         x="16.036341"
+         y="265.14932"
+         id="text5877"><tspan
+           sodipodi:role="line"
+           id="tspan5875"
+           style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:#808080;stroke-width:1.84558;stroke:none"
+           x="16.036341"
+           y="265.14932">Oxygen</tspan></text>
+    </g>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:14.1111px;font-family:Roboto;-inkscape-font-specification:'Roboto Medium';fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.414342;stroke-dasharray:none;stroke-opacity:1;text-anchor:middle;text-align:center"
+       x="140.42358"
+       y="188.11717"
+       id="text5939"><tspan
+         sodipodi:role="line"
+         id="tspan5937"
+         style="font-size:14.1111px;stroke:none;stroke-width:0.414342;text-anchor:middle;text-align:center;-inkscape-font-specification:'Roboto Medium';font-family:Roboto;font-weight:500;font-style:normal;font-stretch:normal;font-variant:normal;fill:#333333"
+         x="136.73389"
+         y="188.11717">K</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:14.1111px;font-family:Roboto;-inkscape-font-specification:'Roboto Medium';text-align:center;text-anchor:middle;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.414342;stroke-dasharray:none;stroke-opacity:1"
+       x="140.42358"
+       y="208.68907"
+       id="text6108"><tspan
+         sodipodi:role="line"
+         id="tspan6106"
+         style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:14.1111px;font-family:Roboto;-inkscape-font-specification:'Roboto Medium';text-align:center;text-anchor:middle;fill:#333333;stroke:none;stroke-width:0.414342"
+         x="140.42358"
+         y="208.68907">L</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:14.1111px;font-family:Roboto;-inkscape-font-specification:'Roboto Medium';text-align:center;text-anchor:middle;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.414342;stroke-dasharray:none;stroke-opacity:1"
+       x="140.61359"
+       y="228.71014"
+       id="text6112"><tspan
+         sodipodi:role="line"
+         id="tspan6110"
+         style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:14.1111px;font-family:Roboto;-inkscape-font-specification:'Roboto Medium';text-align:center;text-anchor:middle;fill:#333333;stroke:none;stroke-width:0.414342"
+         x="140.61359"
+         y="228.71014">M</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:14.1111px;font-family:Roboto;-inkscape-font-specification:'Roboto Medium';text-align:center;text-anchor:middle;fill:url(#linearGradient6328);fill-opacity:1;stroke:none;stroke-width:0.414342;stroke-dasharray:none;stroke-opacity:1;opacity:0.58044164"
+       x="140.61359"
+       y="248.73122"
+       id="text6270"><tspan
+         sodipodi:role="line"
+         id="tspan6268"
+         style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:14.1111px;font-family:Roboto;-inkscape-font-specification:'Roboto Medium';text-align:center;text-anchor:middle;fill:url(#linearGradient6328);stroke:none;stroke-width:0.414342;fill-opacity:1"
+         x="140.61359"
+         y="248.73122">N</tspan></text>
+    <g
+       id="g17076">
+      <circle
+         style="opacity:0.302839;fill:#000000;fill-opacity:1;stroke-width:0.264583;filter:url(#filter16972)"
+         id="circle16941"
+         cx="138.51634"
+         cy="147.23373"
+         r="17.733112"
+         transform="matrix(0.9584666,0,0,0.9584666,6.8101551,5.0580161)" />
+      <g
+         id="g1335"
+         transform="translate(30.022169,53.667605)">
+        <circle
+           style="fill:url(#linearGradient570);fill-opacity:1;stroke-width:0.264583"
+           id="path502"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="circle711"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278-8)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/assets/images/atoms/oxygen_symbol.svg b/assets/images/atoms/oxygen_symbol.svg
new file mode 100644
index 0000000..a809676
--- /dev/null
+++ b/assets/images/atoms/oxygen_symbol.svg
@@ -0,0 +1,429 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1080"
+   height="1080"
+   viewBox="0 0 285.74999 285.75"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   sodipodi:docname="oxygen - Copy.svg"
+   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="namedview7"
+     pagecolor="#000000"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.18462928"
+     inkscape:cx="-855.76892"
+     inkscape:cy="352.05684"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient7274">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="0"
+         id="stop7270" />
+      <stop
+         style="stop-color:#e5e5e5;stop-opacity:1;"
+         offset="1"
+         id="stop7272" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3529">
+      <stop
+         style="stop-color:#c83737;stop-opacity:1"
+         offset="0"
+         id="stop3525" />
+      <stop
+         style="stop-color:#ffb380;stop-opacity:1"
+         offset="1"
+         id="stop3527" />
+    </linearGradient>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter1278"
+       x="-0.075946687"
+       y="-0.076911961"
+       width="1.1518934"
+       height="1.1538239">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.98634731"
+         id="feGaussianBlur1280" />
+    </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient3523"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient3537"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient3549"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4335"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4361"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4363"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4365"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4367"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient7274"
+       id="linearGradient7276"
+       x1="143.83966"
+       y1="141.71466"
+       x2="285.75"
+       y2="0"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient568"
+       id="linearGradient570"
+       x1="102.78811"
+       y1="103.80765"
+       x2="120.66234"
+       y2="82.935143"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient568">
+      <stop
+         style="stop-color:#5f8dd3;stop-opacity:1"
+         offset="0"
+         id="stop564" />
+      <stop
+         style="stop-color:#afdde9;stop-opacity:1"
+         offset="1"
+         id="stop566" />
+    </linearGradient>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter1278-8"
+       x="-0.075946687"
+       y="-0.076911961"
+       width="1.1518934"
+       height="1.1538239">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.98634731"
+         id="feGaussianBlur1280-2" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter2603"
+       x="-0.012571142"
+       y="-0.012571142"
+       width="1.0251423"
+       height="1.0251423">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.74895363"
+         id="feGaussianBlur2605" />
+    </filter>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="opacity:1;fill:url(#linearGradient7276);fill-opacity:1;stroke:none;stroke-width:0.956;stroke-dasharray:none;stroke-opacity:1"
+       id="rect6490"
+       width="285.75"
+       height="285.75"
+       x="0"
+       y="0"
+       ry="21.166668"
+       sodipodi:insensitive="true" />
+    <g
+       id="g396"
+       style="opacity:0.432177;filter:url(#filter2603)"
+       transform="matrix(1.1006133,0,0,1.1006133,-14.542283,-14.20806)">
+      <circle
+         style="fill:none;fill-opacity:1;stroke:#676767;stroke-width:0.956;stroke-dasharray:none;stroke-opacity:1"
+         id="path2789"
+         cx="141.69138"
+         cy="144.0587"
+         r="48.87215" />
+      <g
+         id="g3521"
+         transform="matrix(0.28737677,0,0,0.28737677,152.96637,139.68504)">
+        <circle
+           style="fill:url(#linearGradient3523);fill-opacity:1;stroke-width:0.264583"
+           id="circle3517"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path3519"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g3535"
+         transform="matrix(0.28737677,0,0,0.28737677,69.491461,89.844408)">
+        <circle
+           style="fill:url(#linearGradient3537);fill-opacity:1;stroke-width:0.264583"
+           id="circle3531"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path3533"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <circle
+         style="fill:none;fill-opacity:1;stroke:#676767;stroke-width:0.956;stroke-dasharray:none;stroke-opacity:1"
+         id="circle3539"
+         cx="141.69138"
+         cy="144.0587"
+         r="69.444046" />
+      <circle
+         style="fill:none;fill-opacity:1;stroke:#676767;stroke-width:0.905019;stroke-dasharray:none;stroke-opacity:1"
+         id="circle3541"
+         cx="141.69138"
+         cy="144.0587"
+         r="89.490608" />
+      <g
+         id="g3547"
+         transform="matrix(0.28737677,0,0,0.28737677,98.989036,49.742262)">
+        <circle
+           style="fill:url(#linearGradient3549);fill-opacity:1;stroke-width:0.264583"
+           id="circle3543"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path3545"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g4333"
+         transform="matrix(0.28737677,0,0,0.28737677,120.66799,186.92319)">
+        <circle
+           style="fill:url(#linearGradient4335);fill-opacity:1;stroke-width:0.264583"
+           id="circle4329"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path4331"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g4341"
+         transform="matrix(0.28737677,0,0,0.28737677,178.70414,118.42254)">
+        <circle
+           style="fill:url(#linearGradient4367);fill-opacity:1;stroke-width:0.264583"
+           id="circle4337"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path4339"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g4347"
+         transform="matrix(0.28737677,0,0,0.28737677,57.467032,164.68218)">
+        <circle
+           style="fill:url(#linearGradient4365);fill-opacity:1;stroke-width:0.264583"
+           id="circle4343"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path4345"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g4353"
+         transform="matrix(0.28737677,0,0,0.28737677,41.650019,102.56842)">
+        <circle
+           style="fill:url(#linearGradient4363);fill-opacity:1;stroke-width:0.264583"
+           id="circle4349"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path4351"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g4359"
+         transform="matrix(0.28737677,0,0,0.28737677,161.51475,72.684956)">
+        <circle
+           style="fill:url(#linearGradient4361);fill-opacity:1;stroke-width:0.264583"
+           id="circle4355"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path4357"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g17076">
+        <g
+           id="g1335"
+           transform="translate(30.022169,53.667605)">
+          <circle
+             style="fill:url(#linearGradient570);fill-opacity:1;stroke-width:0.264583"
+             id="path502"
+             cx="112.85283"
+             cy="89.207481"
+             r="17.733112" />
+          <path
+             id="circle711"
+             style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278-8)"
+             d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+             transform="rotate(180,112.85286,89.207478)" />
+        </g>
+      </g>
+    </g>
+    <g
+       id="g2554"
+       transform="translate(-9.0322887,-22.134172)"
+       style="opacity:1">
+      <text
+         xml:space="preserve"
+         style="font-size:137.408px;fill:#ffffff;stroke-width:11.4506"
+         x="106.65077"
+         y="193.7238"
+         id="text236"><tspan
+           sodipodi:role="line"
+           id="tspan234"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:Roboto;fill:#000000;stroke-width:11.4506"
+           x="106.65077"
+           y="193.7238">O</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:33.315px;font-family:Roboto;-inkscape-font-specification:Roboto;fill:#ffffff;stroke-width:5.5525"
+         x="99.901421"
+         y="222.39435"
+         id="text2548"><tspan
+           sodipodi:role="line"
+           id="tspan2546"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:33.315px;font-family:Roboto;-inkscape-font-specification:Roboto;fill:#666666;stroke-width:5.5525"
+           x="99.901421"
+           y="222.39435">Oxygen</tspan></text>
+    </g>
+    <text
+       xml:space="preserve"
+       style="font-size:33.315px;fill:#ffffff;stroke-width:5.5525"
+       x="24.734022"
+       y="45.026928"
+       id="text1088"><tspan
+         sodipodi:role="line"
+         id="tspan1086"
+         style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:33.315px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:#000000;stroke-width:5.5525"
+         x="24.734022"
+         y="45.026928">15.999  </tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:33.315px;fill:#ffffff;stroke-width:5.5525"
+       x="19.442356"
+       y="264.25803"
+       id="text1092"><tspan
+         sodipodi:role="line"
+         id="tspan1090"
+         style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:33.315px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:#000000;stroke-width:5.5525"
+         x="19.442356"
+         y="264.25803">8</tspan></text>
+  </g>
+</svg>
diff --git a/assets/images/atoms/parts.svg b/assets/images/atoms/parts.svg
new file mode 100644
index 0000000..dacd0e7
--- /dev/null
+++ b/assets/images/atoms/parts.svg
@@ -0,0 +1,545 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1920"
+   height="1080"
+   viewBox="0 0 507.99998 285.75"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   sodipodi:docname="parts.svg"
+   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="namedview7"
+     pagecolor="#000000"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.26110523"
+     inkscape:cx="1597.0572"
+     inkscape:cy="202.98329"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g28464"
+     showguides="true" />
+  <defs
+     id="defs2">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient28103">
+      <stop
+         style="stop-color:#2a7fff;stop-opacity:1"
+         offset="0"
+         id="stop28099" />
+      <stop
+         style="stop-color:#afdde9;stop-opacity:1"
+         offset="1"
+         id="stop28101" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient26637">
+      <stop
+         style="stop-color:#373748;stop-opacity:1"
+         offset="0"
+         id="stop26633" />
+      <stop
+         style="stop-color:#6f6f91;stop-opacity:1"
+         offset="1"
+         id="stop26635" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient7274">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="0"
+         id="stop7270" />
+      <stop
+         style="stop-color:#e5e5e5;stop-opacity:1;"
+         offset="1"
+         id="stop7272" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3529">
+      <stop
+         style="stop-color:#c83737;stop-opacity:1"
+         offset="0"
+         id="stop3525" />
+      <stop
+         style="stop-color:#ffb380;stop-opacity:1"
+         offset="1"
+         id="stop3527" />
+    </linearGradient>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter1278"
+       x="-0.075946687"
+       y="-0.076911961"
+       width="1.1518934"
+       height="1.1538239">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.98634731"
+         id="feGaussianBlur1280" />
+    </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient28103"
+       id="linearGradient3523"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient3549"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4335"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient7274"
+       id="linearGradient7276"
+       x1="143.83966"
+       y1="141.71466"
+       x2="285.75"
+       y2="0"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(1.7777778,1)" />
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter16972"
+       x="-0.21763576"
+       y="-0.21763576"
+       width="1.4352715"
+       height="1.4352715">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="3.2161328"
+         id="feGaussianBlur16974" />
+    </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient568"
+       id="linearGradient570"
+       x1="102.78811"
+       y1="103.80765"
+       x2="120.66234"
+       y2="82.935143"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient568">
+      <stop
+         style="stop-color:#5f8dd3;stop-opacity:1"
+         offset="0"
+         id="stop564" />
+      <stop
+         style="stop-color:#afdde9;stop-opacity:1"
+         offset="1"
+         id="stop566" />
+    </linearGradient>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter1278-8"
+       x="-0.075946687"
+       y="-0.076911961"
+       width="1.1518934"
+       height="1.1538239">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.98634731"
+         id="feGaussianBlur1280-2" />
+    </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient26607"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient26615"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient26637"
+       id="linearGradient26629"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient26637"
+       id="linearGradient26645"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient28105"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient28103"
+       id="linearGradient28224"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient28103"
+       id="linearGradient30413"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="opacity:1;fill:url(#linearGradient7276);fill-opacity:1;stroke:none;stroke-width:1.27467;stroke-dasharray:none;stroke-opacity:1"
+       id="rect6490"
+       width="508"
+       height="285.75"
+       x="0"
+       y="0"
+       ry="21.166668"
+       sodipodi:insensitive="true" />
+    <g
+       id="g28464"
+       transform="translate(22.818016,-1.1837006)">
+      <circle
+         style="fill:none;fill-opacity:1;stroke:#676767;stroke-width:0.956;stroke-dasharray:none;stroke-opacity:1"
+         id="path2789"
+         cx="141.69138"
+         cy="144.0587"
+         r="48.87215" />
+      <g
+         id="g3521"
+         transform="matrix(0.28737677,0,0,0.28737677,152.96637,139.68504)">
+        <circle
+           style="fill:url(#linearGradient3523);fill-opacity:1;stroke-width:0.264583"
+           id="circle3517"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path3519"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g3535"
+         transform="matrix(0.28737677,0,0,0.28737677,69.491461,89.844408)">
+        <circle
+           style="fill:url(#linearGradient28105);fill-opacity:1;stroke-width:0.264583"
+           id="circle3531"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path3533"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <circle
+         style="fill:none;fill-opacity:1;stroke:#676767;stroke-width:0.956;stroke-dasharray:none;stroke-opacity:1"
+         id="circle3539"
+         cx="141.69138"
+         cy="144.0587"
+         r="69.444046" />
+      <circle
+         style="fill:none;fill-opacity:1;stroke:#676767;stroke-width:0.905019;stroke-dasharray:none;stroke-opacity:1"
+         id="circle3541"
+         cx="141.69138"
+         cy="144.0587"
+         r="89.490608" />
+      <g
+         id="g3547"
+         transform="matrix(0.28737677,0,0,0.28737677,98.989036,49.742262)">
+        <circle
+           style="fill:url(#linearGradient3549);fill-opacity:1;stroke-width:0.264583"
+           id="circle3543"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path3545"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g4333"
+         transform="matrix(0.28737677,0,0,0.28737677,120.66799,186.92319)">
+        <circle
+           style="fill:url(#linearGradient4335);fill-opacity:1;stroke-width:0.264583"
+           id="circle4329"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path4331"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g17076"
+         style="opacity:0.492114">
+        <circle
+           style="opacity:0.302839;fill:#000000;fill-opacity:1;stroke-width:0.264583;filter:url(#filter16972)"
+           id="circle16941"
+           cx="138.51634"
+           cy="147.23373"
+           r="17.733112"
+           transform="matrix(0.9584666,0,0,0.9584666,6.8101551,5.0580161)" />
+        <g
+           id="g1335"
+           transform="translate(30.022169,53.667605)">
+          <circle
+             style="fill:url(#linearGradient570);fill-opacity:1;stroke-width:0.264583"
+             id="path502"
+             cx="112.85283"
+             cy="89.207481"
+             r="17.733112" />
+          <path
+             id="circle711"
+             style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278-8)"
+             d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+             transform="rotate(180,112.85286,89.207478)" />
+        </g>
+      </g>
+      <g
+         id="g26605"
+         transform="matrix(0.28737677,0,0,0.28737677,104.08512,110.84487)">
+        <circle
+           style="fill:url(#linearGradient26607);fill-opacity:1;stroke-width:0.264583"
+           id="circle26601"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path26603"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g26613"
+         transform="matrix(0.28737677,0,0,0.28737677,116.91429,109.26419)">
+        <circle
+           style="fill:url(#linearGradient26615);fill-opacity:1;stroke-width:0.264583"
+           id="circle26609"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path26611"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g26627"
+         transform="matrix(0.28737677,0,0,0.28737677,114.95758,125.46644)">
+        <circle
+           style="fill:url(#linearGradient26629);fill-opacity:1;stroke-width:0.264583"
+           id="circle26623"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path26625"
+           style="opacity:0.671924;fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g26643"
+         transform="matrix(0.28737677,0,0,0.28737677,102.64229,122.6899)">
+        <circle
+           style="fill:url(#linearGradient26645);fill-opacity:1;stroke-width:0.264583"
+           id="circle26639"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path26641"
+           style="opacity:0.671924;fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g28222"
+         transform="matrix(0.28737677,0,0,0.28737677,170.21273,85.147177)">
+        <circle
+           style="fill:url(#linearGradient28224);fill-opacity:1;stroke-width:0.264583"
+           id="circle28218"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path28220"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <path
+         style="opacity:0.671924;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#808080;stroke-width:0.956;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 300.50412,79.309535 -119.87971,-2e-6 -27.27578,49.148447"
+         id="path28533"
+         sodipodi:nodetypes="ccc" />
+      <path
+         style="opacity:0.671924;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#808080;stroke-width:0.956;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 300.50412,108.12723 H 180.62441 l -27.45917,38.44525"
+         id="path28649"
+         sodipodi:nodetypes="ccc" />
+      <path
+         style="opacity:0.671924;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#808080;stroke-width:0.956;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 300.50412,136.79764 h -88.71083 l -21.29955,23.42747"
+         id="path28651"
+         sodipodi:nodetypes="ccc" />
+      <path
+         style="opacity:0.671924;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#808080;stroke-width:0.956;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 300.50412,168.47633 h -12.56711 l -11.04713,10.13321 h -96.26547 l -24.07855,-24.9628"
+         id="path28653"
+         sodipodi:nodetypes="ccccc" />
+      <path
+         style="opacity:0.671924;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#808080;stroke-width:0.956;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 300.50412,203.37138 h -40.8407 l -69.8764,16.15505"
+         id="path28655"
+         sodipodi:nodetypes="ccc" />
+      <g
+         id="g30411"
+         transform="matrix(0.28737677,0,0,0.28737677,47.370797,149.9216)">
+        <circle
+           style="fill:url(#linearGradient30413);fill-opacity:1;stroke-width:0.264583"
+           id="circle30407"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path30409"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+    </g>
+    <g
+       id="g28416"
+       transform="translate(27.204101,22.755938)">
+      <text
+         xml:space="preserve"
+         style="font-size:25.4px;fill:#ffffff;stroke-width:4.23333"
+         x="299.18585"
+         y="153.45967"
+         id="text5147"><tspan
+           sodipodi:role="line"
+           id="tspan5145"
+           style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:25.4px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:#000000;stroke-width:4.23333"
+           x="299.18585"
+           y="153.45967">Nucleus</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-size:16.9333px;fill:#ffffff;stroke-width:2.11666"
+         x="300.35995"
+         y="61.306473"
+         id="text26599"><tspan
+           sodipodi:role="line"
+           id="tspan26597"
+           style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:16.9333px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:#000000;stroke-width:2.11666"
+           x="300.35995"
+           y="61.306473">Proton</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-size:16.9333px;fill:#ffffff;stroke-width:2.11666"
+         x="300.35995"
+         y="89.646164"
+         id="text28330"><tspan
+           sodipodi:role="line"
+           id="tspan28328"
+           style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:16.9333px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:#000000;stroke-width:2.11666"
+           x="300.35995"
+           y="89.646164">Neutron</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-size:16.9333px;fill:#ffffff;stroke-width:2.11666"
+         x="299.94653"
+         y="118.64731"
+         id="text28334"><tspan
+           sodipodi:role="line"
+           id="tspan28332"
+           style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:16.9333px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:#000000;stroke-width:2.11666"
+           x="299.94653"
+           y="118.64731">Electron</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-size:25.4px;fill:#ffffff;stroke-width:4.23333"
+         x="299.18585"
+         y="188.35472"
+         id="text28392"><tspan
+           sodipodi:role="line"
+           id="tspan28390"
+           style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:25.4px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:#000000;stroke-width:4.23333"
+           x="299.18585"
+           y="188.35472">Shell</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/assets/images/atoms/symbol.svg b/assets/images/atoms/symbol.svg
new file mode 100644
index 0000000..fcb9a9e
--- /dev/null
+++ b/assets/images/atoms/symbol.svg
@@ -0,0 +1,429 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1080"
+   height="1080"
+   viewBox="0 0 285.74999 285.75"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   sodipodi:docname="symbol.svg"
+   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="namedview7"
+     pagecolor="#000000"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.36925856"
+     inkscape:cx="-136.76054"
+     inkscape:cy="574.12345"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient7274">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="0"
+         id="stop7270" />
+      <stop
+         style="stop-color:#e5e5e5;stop-opacity:1;"
+         offset="1"
+         id="stop7272" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3529">
+      <stop
+         style="stop-color:#c83737;stop-opacity:1"
+         offset="0"
+         id="stop3525" />
+      <stop
+         style="stop-color:#ffb380;stop-opacity:1"
+         offset="1"
+         id="stop3527" />
+    </linearGradient>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter1278"
+       x="-0.075946687"
+       y="-0.076911961"
+       width="1.1518934"
+       height="1.1538239">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.98634731"
+         id="feGaussianBlur1280" />
+    </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient3523"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient3537"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient3549"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4335"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4361"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4363"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4365"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3529"
+       id="linearGradient4367"
+       gradientUnits="userSpaceOnUse"
+       x1="99.414001"
+       y1="100.77732"
+       x2="123.55016"
+       y2="77.759682" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient7274"
+       id="linearGradient7276"
+       x1="143.83966"
+       y1="141.71466"
+       x2="285.75"
+       y2="0"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient568"
+       id="linearGradient570"
+       x1="102.78811"
+       y1="103.80765"
+       x2="120.66234"
+       y2="82.935143"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient568">
+      <stop
+         style="stop-color:#5f8dd3;stop-opacity:1"
+         offset="0"
+         id="stop564" />
+      <stop
+         style="stop-color:#afdde9;stop-opacity:1"
+         offset="1"
+         id="stop566" />
+    </linearGradient>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter1278-8"
+       x="-0.075946687"
+       y="-0.076911961"
+       width="1.1518934"
+       height="1.1538239">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.98634731"
+         id="feGaussianBlur1280-2" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter2603"
+       x="-0.012571142"
+       y="-0.012571142"
+       width="1.0251423"
+       height="1.0251423">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.74895363"
+         id="feGaussianBlur2605" />
+    </filter>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="opacity:1;fill:url(#linearGradient7276);fill-opacity:1;stroke:none;stroke-width:0.956;stroke-dasharray:none;stroke-opacity:1"
+       id="rect6490"
+       width="285.75"
+       height="285.75"
+       x="0"
+       y="0"
+       ry="21.166668"
+       sodipodi:insensitive="true" />
+    <g
+       id="g396"
+       style="opacity:0.432177;filter:url(#filter2603)"
+       transform="matrix(1.1006133,0,0,1.1006133,-14.542283,-14.20806)">
+      <circle
+         style="fill:none;fill-opacity:1;stroke:#676767;stroke-width:0.956;stroke-dasharray:none;stroke-opacity:1"
+         id="path2789"
+         cx="141.69138"
+         cy="144.0587"
+         r="48.87215" />
+      <g
+         id="g3521"
+         transform="matrix(0.28737677,0,0,0.28737677,152.96637,139.68504)">
+        <circle
+           style="fill:url(#linearGradient3523);fill-opacity:1;stroke-width:0.264583"
+           id="circle3517"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path3519"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g3535"
+         transform="matrix(0.28737677,0,0,0.28737677,69.491461,89.844408)">
+        <circle
+           style="fill:url(#linearGradient3537);fill-opacity:1;stroke-width:0.264583"
+           id="circle3531"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path3533"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <circle
+         style="fill:none;fill-opacity:1;stroke:#676767;stroke-width:0.956;stroke-dasharray:none;stroke-opacity:1"
+         id="circle3539"
+         cx="141.69138"
+         cy="144.0587"
+         r="69.444046" />
+      <circle
+         style="fill:none;fill-opacity:1;stroke:#676767;stroke-width:0.905019;stroke-dasharray:none;stroke-opacity:1"
+         id="circle3541"
+         cx="141.69138"
+         cy="144.0587"
+         r="89.490608" />
+      <g
+         id="g3547"
+         transform="matrix(0.28737677,0,0,0.28737677,98.989036,49.742262)">
+        <circle
+           style="fill:url(#linearGradient3549);fill-opacity:1;stroke-width:0.264583"
+           id="circle3543"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path3545"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g4333"
+         transform="matrix(0.28737677,0,0,0.28737677,120.66799,186.92319)">
+        <circle
+           style="fill:url(#linearGradient4335);fill-opacity:1;stroke-width:0.264583"
+           id="circle4329"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path4331"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g4341"
+         transform="matrix(0.28737677,0,0,0.28737677,178.70414,118.42254)">
+        <circle
+           style="fill:url(#linearGradient4367);fill-opacity:1;stroke-width:0.264583"
+           id="circle4337"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path4339"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g4347"
+         transform="matrix(0.28737677,0,0,0.28737677,57.467032,164.68218)">
+        <circle
+           style="fill:url(#linearGradient4365);fill-opacity:1;stroke-width:0.264583"
+           id="circle4343"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path4345"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g4353"
+         transform="matrix(0.28737677,0,0,0.28737677,41.650019,102.56842)">
+        <circle
+           style="fill:url(#linearGradient4363);fill-opacity:1;stroke-width:0.264583"
+           id="circle4349"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path4351"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g4359"
+         transform="matrix(0.28737677,0,0,0.28737677,161.51475,72.684956)">
+        <circle
+           style="fill:url(#linearGradient4361);fill-opacity:1;stroke-width:0.264583"
+           id="circle4355"
+           cx="112.85283"
+           cy="89.207481"
+           r="17.733112" />
+        <path
+           id="path4357"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278)"
+           d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+           transform="rotate(180,112.85286,89.207478)" />
+      </g>
+      <g
+         id="g17076">
+        <g
+           id="g1335"
+           transform="translate(30.022169,53.667605)">
+          <circle
+             style="fill:url(#linearGradient570);fill-opacity:1;stroke-width:0.264583"
+             id="path502"
+             cx="112.85283"
+             cy="89.207481"
+             r="17.733112" />
+          <path
+             id="circle711"
+             style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583;filter:url(#filter1278-8)"
+             d="m 100.84501,76.162276 a 17.733112,17.733112 0 0 0 -5.725235,13.045199 17.733112,17.733112 0 0 0 17.733285,17.733285 17.733112,17.733112 0 0 0 13.43639,-6.17947 17.733112,17.733112 0 0 1 -12.00805,4.68757 17.733112,17.733112 0 0 1 -17.733288,-17.733284 17.733112,17.733112 0 0 1 4.296898,-11.5533 z"
+             transform="rotate(180,112.85286,89.207478)" />
+        </g>
+      </g>
+    </g>
+    <g
+       id="g2554"
+       transform="translate(-7.5624219,-18.896155)"
+       style="opacity:1">
+      <text
+         xml:space="preserve"
+         style="font-size:137.408px;fill:#ffffff;stroke-width:11.4506"
+         x="106.65077"
+         y="193.7238"
+         id="text236"><tspan
+           sodipodi:role="line"
+           id="tspan234"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:Roboto;fill:#000000;stroke-width:11.4506"
+           x="106.65077"
+           y="193.7238">X</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:33.315px;font-family:Roboto;-inkscape-font-specification:Roboto;fill:#ffffff;stroke-width:5.5525"
+         x="149.66473"
+         y="227.18167"
+         id="text2548"><tspan
+           sodipodi:role="line"
+           id="tspan2546"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:33.315px;font-family:Roboto;-inkscape-font-specification:Roboto;text-align:center;text-anchor:middle;fill:#666666;stroke-width:5.5525"
+           x="149.66473"
+           y="227.18167">Name</tspan></text>
+    </g>
+    <text
+       xml:space="preserve"
+       style="font-size:33.315px;fill:#ffffff;stroke-width:5.5525"
+       x="24.734022"
+       y="45.026928"
+       id="text1088"><tspan
+         sodipodi:role="line"
+         id="tspan1086"
+         style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:33.315px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:#000000;stroke-width:5.5525"
+         x="24.734022"
+         y="45.026928">Mass</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:33.315px;fill:#ffffff;stroke-width:5.5525"
+       x="19.442356"
+       y="264.25803"
+       id="text1092"><tspan
+         sodipodi:role="line"
+         id="tspan1090"
+         style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:33.315px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:#000000;stroke-width:5.5525"
+         x="19.442356"
+         y="264.25803">Number</tspan></text>
+  </g>
+</svg>
diff --git a/assets/images/math/fractional_exponent.svg b/assets/images/math/fractional_exponent.svg
new file mode 100644
index 0000000..26a9544
--- /dev/null
+++ b/assets/images/math/fractional_exponent.svg
@@ -0,0 +1,258 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1920"
+   height="1080"
+   viewBox="0 0 1920 1080"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   sodipodi:docname="fractional_exponent.svg"
+   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="namedview7"
+     pagecolor="#000000"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="0.31510417"
+     inkscape:cx="980.6281"
+     inkscape:cy="606.14876"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient11946">
+      <stop
+         style="stop-color:#2a7fff;stop-opacity:1"
+         offset="0"
+         id="stop11942" />
+      <stop
+         style="stop-color:#87cdde;stop-opacity:1"
+         offset="1"
+         id="stop11944" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient11938">
+      <stop
+         style="stop-color:#ff9955;stop-opacity:1"
+         offset="0"
+         id="stop11934" />
+      <stop
+         style="stop-color:#c83737;stop-opacity:1"
+         offset="1"
+         id="stop11936" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient11930">
+      <stop
+         style="stop-color:#ffb380;stop-opacity:1"
+         offset="0"
+         id="stop11926" />
+      <stop
+         style="stop-color:#c83737;stop-opacity:1"
+         offset="1"
+         id="stop11928" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient11858">
+      <stop
+         style="stop-color:#0055d4;stop-opacity:1"
+         offset="0"
+         id="stop11854" />
+      <stop
+         style="stop-color:#87cdde;stop-opacity:1"
+         offset="1"
+         id="stop11856" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient7274"
+       id="linearGradient7276"
+       x1="143.83966"
+       y1="141.71466"
+       x2="285.75"
+       y2="0"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(6.7191603,0,0,3.7795276,-4.8046875e-5,-1.1147461e-6)" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient7274">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="0"
+         id="stop7270" />
+      <stop
+         style="stop-color:#e5e5e5;stop-opacity:1;"
+         offset="1"
+         id="stop7272" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient11858"
+       id="linearGradient11860"
+       x1="658.4162"
+       y1="313.46875"
+       x2="743.9162"
+       y2="171.0625"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient11930"
+       id="linearGradient11932"
+       x1="661.32245"
+       y1="395.94446"
+       x2="741.1037"
+       y2="497.38196"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient11938"
+       id="linearGradient11940"
+       x1="1559.8409"
+       y1="370.47629"
+       x2="1619.2157"
+       y2="469.36926"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient11946"
+       id="linearGradient11948"
+       x1="1086.8601"
+       y1="394.33063"
+       x2="1142.2635"
+       y2="323.88809"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:url(#linearGradient7276);fill-opacity:1;stroke:none;stroke-width:4.81765;stroke-dasharray:none;stroke-opacity:1"
+       id="rect6490"
+       width="1920"
+       height="1080"
+       x="0"
+       y="0"
+       ry="80.000008" />
+    <g
+       id="g1613"
+       transform="translate(-53.844823)">
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:192px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:#8b8b8b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         x="959.34375"
+         y="604.40625"
+         id="text1509"><tspan
+           sodipodi:role="line"
+           id="tspan1507"
+           x="959.34375"
+           y="604.40625"
+           style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:#8b8b8b;fill-opacity:1;stroke:none;stroke-width:5">=</tspan></text>
+      <g
+         id="g1505"
+         transform="translate(9.1360543,116.84375)">
+        <text
+           xml:space="preserve"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:512px;font-family:Roboto;-inkscape-font-specification:Roboto;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:28.9058;stroke-linecap:round;stroke-linejoin:round"
+           x="455.51263"
+           y="675.25"
+           id="text236"><tspan
+             sodipodi:role="line"
+             id="tspan234"
+             x="455.51263"
+             y="675.25"
+             style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:#000000;fill-opacity:1;stroke:none;stroke-width:28.9058">x</tspan></text>
+        <text
+           xml:space="preserve"
+           style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:192px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:url(#linearGradient11860);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:14.4529;stroke-linecap:round;stroke-linejoin:round"
+           x="701.02557"
+           y="272.5"
+           id="text1010"><tspan
+             sodipodi:role="line"
+             id="tspan1008"
+             x="701.02557"
+             y="272.5"
+             style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:192px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:url(#linearGradient11860);fill-opacity:1;stroke:none;stroke-width:14.4529">y</tspan></text>
+        <text
+           xml:space="preserve"
+           style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:192px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:url(#linearGradient11932);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:14.4529;stroke-linecap:round;stroke-linejoin:round"
+           x="699.8537"
+           y="497.38196"
+           id="text1116"><tspan
+             sodipodi:role="line"
+             id="tspan1114"
+             x="699.8537"
+             y="497.38196"
+             style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:192px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:url(#linearGradient11932);fill-opacity:1;stroke:none;stroke-width:14.4529">z</tspan></text>
+        <path
+           style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#808080;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 617.30589,354.7066 H 785.12025"
+           id="path1181" />
+      </g>
+      <g
+         id="g1591"
+         transform="translate(36.702557,20.106488)"
+         style="stroke-width:7.5;stroke-dasharray:none">
+        <text
+           xml:space="preserve"
+           style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:133.333px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:url(#linearGradient11948);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           x="1113.6178"
+           y="394.33063"
+           id="text1576"><tspan
+             sodipodi:role="line"
+             id="tspan1574"
+             x="1113.6178"
+             y="394.33063"
+             style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:133.333px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:url(#linearGradient11948);fill-opacity:1;stroke:none;stroke-width:7.5;stroke-dasharray:none">z</tspan></text>
+        <text
+           xml:space="preserve"
+           style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:133.333px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';text-align:center;text-anchor:middle;fill:url(#linearGradient11940);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           x="1589.4307"
+           y="440.91882"
+           id="text1580"><tspan
+             sodipodi:role="line"
+             id="tspan1578"
+             x="1589.4307"
+             y="440.91882"
+             style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:133.333px;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:url(#linearGradient11940);fill-opacity:1;stroke:none;stroke-width:7.5;stroke-dasharray:none">y</tspan></text>
+        <path
+           style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#808080;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="m 1094.3601,459.44817 56.2589,208.73995 90.7731,-336.80002 h 394.0713"
+           id="path1568" />
+        <text
+           xml:space="preserve"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:512px;font-family:Roboto;-inkscape-font-specification:Roboto;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+           x="1413.9906"
+           y="599.05518"
+           id="text1572"
+           transform="translate(9.1360543,116.84375)"><tspan
+             sodipodi:role="line"
+             id="tspan1570"
+             x="1413.9906"
+             y="599.05518"
+             style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Light';fill:#000000;fill-opacity:1;stroke:none;stroke-width:7.5;stroke-dasharray:none">x</tspan></text>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/favicon-16x16.png b/favicon-16x16.png
new file mode 100644
index 0000000..206374a
--- /dev/null
+++ b/favicon-16x16.png
diff --git a/favicon-32x32.png b/favicon-32x32.png
new file mode 100644
index 0000000..150f3fc
--- /dev/null
+++ b/favicon-32x32.png
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..18cfc65
--- /dev/null
+++ b/favicon.ico
diff --git a/index.html b/index.html
index 2ff63aa..54d3019 100644
--- a/index.html
+++ b/index.html
@@ -6,8 +6,11 @@
     <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.png">
     <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>
 
@@ -24,9 +27,7 @@
         <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>
-        <a href="/lessons/1/" class="sidebar-link link sidebar-sublink">Lesson 1</a>
-        <a href="/lessons/2/" class="sidebar-link link sidebar-sublink">Lesson 2</a>
-        <a href="/lessons/3/" class="sidebar-link link sidebar-sublink">Lesson 3</a>
+
 
         <hr class="divider">
         <div id="toc">
@@ -35,7 +36,8 @@
     </div>
 
     <div class="banner-container" id="banner">
-        <div class="banner-bg" id="img-main"></div>
+        <div class="banner-bg" id="img-alazhar"></div>
+        <div class="gradient-bg"></div>
         <h1 class="banner-text" id="banner-txt">Al Azhar 9th Grade Lesson Notes</h1>
     </div>
 
@@ -50,121 +52,138 @@
                 <div class="card">
                     <a href="/lessons/matematika/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/1/">
-                        <h2>Matematika</h2>
+            <h2>Matematika</h2>
                     </a>
-                    <p>Pak Hidayatullah, S.Pd.</p>
+                    <p>Hidayatullah, S.Pd.</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/fisika/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/2/">
-                        <h2>Fisika</h2>
+            <h2>Fisika</h2>
                     </a>
-                    <p>Bu Ayu Rezky Yulita, M.Pd.</p>
+                    <p>Ayu Rezky Yulita, M.Pd.</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/biologi/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>Biologi</h2>
+            <h2>Biologi</h2>
                     </a>
-                    <p>Bu Ir. Hj. Wiwit Parminta</p>
+                    <p>Ir. Hj. Wiwit Parminta</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/ips/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>IPS</h2>
+            <h2>IPS</h2>
                     </a>
-                    <p>Bu Uaeni Jahroh S.Pd.</p>
+                    <p>Uaeni Jahroh S.Pd.</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/agama/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>Agama</h2>
+            <h2>Agama</h2>
                     </a>
-                    <p>Pak Akrom Hasani, S.Ag.</p>
+                    <p>Akrom Hasani, S.Ag.</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/quran/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>Al-Qur'an</h2>
+            <h2>Al-Qur'an</h2>
                     </a>
-                    <p>Pak Muhammad Fathan S.Ag</p>
+                    <p>Muhammad Fathan S.Ag</p>
+                </div>
+                <div class="card">
+                    <a href="/lessons/arab/" class="link-card"></a>
+                    <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
+            alt="" class="card-img">
+                    <a href="/lessons/3/">
+            <h2>Bahasa Arab</h2>
+                    </a>
+                    <p>Mohammad Amar, Lc.</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/ppkn/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>PPKn</h2>
+            <h2>PPKn</h2>
                     </a>
-                    <p>Bu Andini Nurlaily Hikmah, S.Pd.</p>
+                    <p>Andini Nurlaily Hikmah, S.Pd.</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/informatika/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>Informatika</h2>
+            <h2>Informatika</h2>
                     </a>
-                    <p>Bu Nurbaeti, SE., M.Ak</p>
+                    <p>Nurbaeti, SE., M.Ak</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/english/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>English</h2>
+            <h2>English</h2>
                     </a>
-                    <p>Bu Sofia Nurbaiti, S.Pd.</p>
+                    <p>Sofia Nurbaiti, S.Pd.</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/indonesia/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>Bahasa Indonesia</h2>
+            <h2>Bahasa Indonesia</h2>
                     </a>
-                    <p>Pak Maman Sulaeman, S.Pd.</p>
+                    <p>Maman Sulaeman, S.Pd.</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/musik/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>Seni Musik</h2>
+            <h2>Seni Musik</h2>
                     </a>
-                    <p>Bu Dra. Kusnun Indrawati</p>
+                    <p>Dra. Kusnun Indrawati</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/lukis/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>Seni Rupa</h2>
+            <h2>Seni Rupa</h2>
                     </a>
-                    <p>Pak Miftah Izharul Haq, S.Pd</p>
+                    <p>Miftah Izharul Haq, S.Pd</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/pjok/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>Penjasorkes</h2>
+            <h2>Penjasorkes</h2>
                     </a>
-                    <p>Pak Supatri, S.Pd</p>
+                    <p>Supatri, S.Pd</p>
                 </div>
             </div>
+
+            <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!
+            </p>
+            <p>Link: <a href="https://github.com/Al-Azhar-Notes/al-azhar-notes.github.io" class="link"><i
+            class="fa-brands fa-github"></i> https://github.com/Al-Azhar-Notes/al-azhar-notes.github.io</a>
+            </p>
         </section>
     </div>
 
diff --git a/lessons/1/1/materi1.html b/lessons/agama/chapter/note.html
index 641daa6..5a31626 100644
--- a/lessons/1/1/materi1.html
+++ b/lessons/agama/chapter/note.html
@@ -6,7 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/style.css">
     <link rel="icon" href="/assets/images/master.png">
-    <title>Al Azhar 9th Grade Lesson Notes</title>     
+    <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>
@@ -22,9 +26,6 @@
         <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>
-            <a href="/lessons/1/" class="sidebar-link link sidebar-sublink">Lesson 1</a>
-            <a href="/lessons/2/" class="sidebar-link link sidebar-sublink">Lesson 2</a>
-            <a href="/lessons/3/" class="sidebar-link link sidebar-sublink">Lesson 3</a>
         
         <hr class="divider">
         <div id="toc">
diff --git a/lessons/agama/index.html b/lessons/agama/index.html
new file mode 100644
index 0000000..eeec830
--- /dev/null
+++ b/lessons/agama/index.html
@@ -0,0 +1,50 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Agama</h1>
+    </div>
+
+    <div id="main">
+        <section>
+            <p style="text-align: center; width: 100%;"><i class="fa-solid fa-file-circle-question"></i> Hm. It seems like there is nothing here yet.</p>
+        </section>
+    </div>
+    
+    <script src="/scripts/toc.js"></script>
+    <script src="/scripts/sidebar.js"></script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/lessons/arab/chapter/note.html b/lessons/arab/chapter/note.html
new file mode 100644
index 0000000..5a31626
--- /dev/null
+++ b/lessons/arab/chapter/note.html
@@ -0,0 +1,130 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Lesson 1: Bab 1 - Materi 1</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+        </section>
+    </div>
+    
+    <script src="/scripts/toc.js"></script>
+    <script src="/scripts/sidebar.js"></script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/lessons/1/index.html b/lessons/arab/index.html
index a7265d1..08379e9 100644
--- a/lessons/1/index.html
+++ b/lessons/arab/index.html
@@ -6,7 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/style.css">
     <link rel="icon" href="/assets/images/master.png">
-    <title>Al Azhar 9th Grade Lesson Notes</title>     
+    <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>
@@ -22,9 +26,6 @@
         <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>
-            <a href="/lessons/1/" class="sidebar-link link sidebar-sublink">Lesson 1</a>
-            <a href="/lessons/2/" class="sidebar-link link sidebar-sublink">Lesson 2</a>
-            <a href="/lessons/3/" class="sidebar-link link sidebar-sublink">Lesson 3</a>
         
         <hr class="divider">
         <div id="toc">
@@ -34,16 +35,12 @@
 
     <div class="banner-container" id="banner">
         <div class="banner-bg" id="img-supplies"></div>
-        <h1 class="banner-text" id="banner-txt">Lesson 1</h1>
+        <h1 class="banner-text" id="banner-txt">Bahasa Arab</h1>
     </div>
 
     <div id="main">
         <section>   
-            <h1 id="bab1">Bab 1</h1>
-            <p><a href="1/materi1.html" class="link">Materi 1</a></p>
-            <hr class="divider">
-            <h1 id="bab1">Bab 2</h1>
-            <p><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="link">Materi 1</a></p>
+            <p style="text-align: center; width: 100%;"><i class="fa-solid fa-file-circle-question"></i> Hm. It seems like there is nothing here yet.</p>
         </section>
     </div>
     
diff --git a/lessons/biologi/chapter/note.html b/lessons/biologi/chapter/note.html
new file mode 100644
index 0000000..5a31626
--- /dev/null
+++ b/lessons/biologi/chapter/note.html
@@ -0,0 +1,130 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Lesson 1: Bab 1 - Materi 1</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..2c3bf1b
--- /dev/null
+++ b/lessons/biologi/index.html
@@ -0,0 +1,50 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Biologi</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <p style="text-align: center; width: 100%;"><i class="fa-solid fa-file-circle-question"></i> Hm. It seems like there is nothing here yet.</p>
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..5a31626
--- /dev/null
+++ b/lessons/english/chapter/note.html
@@ -0,0 +1,130 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Lesson 1: Bab 1 - Materi 1</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..fd604f5
--- /dev/null
+++ b/lessons/english/index.html
@@ -0,0 +1,50 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">English</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <p style="text-align: center; width: 100%;"><i class="fa-solid fa-file-circle-question"></i> Hm. It seems like there is nothing here yet.</p>
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..bc75271
--- /dev/null
+++ b/lessons/fisika/atom/atom.html
@@ -0,0 +1,84 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Atom: Introduction</h1>
+    </div>
+
+    <div id="main">
+        <section>
+            <h1 id="parts-of-atom">Parts of An Atom</h1>
+            <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>
+            <h1 id="symbol">Symbol of An Atom</h1>
+            <div class="flex flex-center" style="width: 100%;">
+                <img src="/assets/images/atoms/oxygen_symbol.svg" alt=""
+                    style="flex: 1 200px; margin: 30px; min-width: 0px; max-width: 600px;">
+                <img src="/assets/images/atoms/symbol.svg" alt=""
+                    style="flex: 1 200px; margin: 30px; min-width: 0px; max-width: 600px;">
+            </div>
+            <p class="subtitle">(picture on the left) An example of an atom symbol, (picture on the right) The format of
+                an atom symbol</p>
+            <h1 id="proton-electron-neutron-count">Determining the number of Protons, Electrons, and Neutrons</h1>
+            <h2 id="proton-electron-neutron-count--protons-and-electrons">Protons and Electrons</h2>
+            <p>If not electrically charged (will be discussed later), the proton and electron number will be the same as
+                the <strong>atom number</strong>.</p>
+            <h2 id="proton-electron-neutron-count--neutrons">Neutrons</h2>
+            <p>Neutrons can be determined by using this following formula: <br>
+                <strong>Atomic Mass</strong> - <strong>Atomic Number</strong> = Neutron Number
+            <h2 id="proton-electron-neutron-count--example">Examples</h2>
+            <div class="flex" style="width: 100%;">
+                <img src="/assets/images/atoms/natrium_symbol.svg" alt="" style="max-width: 200px; margin: 20px;">
+                <p>
+                    <strong>Proton:</strong> 11<br>
+                    <strong>Electron:</strong> 11<br>
+                    <strong>Neutron:</strong> 23 - 11 = 12
+                </p>
+            </div>
+            <h1 id="ions">Ions</h1>
+        </section>
+    </div>
+
+    <script src="/scripts/toc.js"></script>
+    <script src="/scripts/sidebar.js"></script>
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/lessons/fisika/atom/electron-config.html b/lessons/fisika/atom/electron-config.html
new file mode 100644
index 0000000..02120f8
--- /dev/null
+++ b/lessons/fisika/atom/electron-config.html
@@ -0,0 +1,77 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Electron Configuration</h1>
+    </div>
+
+    <div id="main">
+        <section>
+            <h1 id="electron-config">Electron Configuration</h1>
+            <div class="flex flex-center">
+                <img src="/assets/images/atoms/electron_configuration.svg" alt="">
+            </div>
+            <h2 id="electron-config--how-to-read">How to Read / Order</h2>
+            <ol>
+                <li>Start from the top-most arrow</li>
+                <li>Follow the direction of the arrow. For example;</li>
+                <ol>
+                    <li>1s, 2s, 2p, 3s</li>
+                </ol>
+                <li>Exponent the electron with maximum number of electron until the total of exponents is equals to Atom Number.</li>
+                <li>If the total is more than Atom Number, subtract the the last electron's exponent to make the total equals to the atom number.</li>
+            </ol>
+            <h2 id="electron-config--examples">Examples</h2>
+            <h1 id="electron-config-based-on-shell">Electron Configuration Based on Shell</h1>
+            <div class="flex flex-center">
+                <img src="/assets/images/atoms/oxygen.svg" alt="" style="max-width: 300px;">
+            </div>
+            <p class="subtitle">an atom figure with shell labels (Oxygen)</p>
+            <h2 id="electron-config-based-on-shell--example">How to Determine Electron Count</h2>
+            <table></table>
+            <h2 id="electron-config-based-on-shell--examples">Examples</h2>
+        </section>
+    </div>
+
+    <script src="/scripts/toc.js"></script>
+    <script src="/scripts/sidebar.js"></script>
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/lessons/fisika/index.html b/lessons/fisika/index.html
new file mode 100644
index 0000000..e47ecef
--- /dev/null
+++ b/lessons/fisika/index.html
@@ -0,0 +1,52 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Fisika</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <h1 id="bab1">Chapter 1 - Atoms & Molecules</h1>
+            <p><a href="atom/atom.html" class="link">Atom: Introduction</a></p>
+            <p><a href="atom/electron-config.html" class="link">Electron Configuration</a></p>
+        </section>
+    </div>
+    
+    <script src="/scripts/toc.js"></script>
+    <script src="/scripts/sidebar.js"></script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/lessons/index.html b/lessons/index.html
index 884758f..db128b6 100644
--- a/lessons/index.html
+++ b/lessons/index.html
@@ -6,7 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/style.css">
     <link rel="icon" href="/assets/images/master.png">
-    <title>Al Azhar 9th Grade Lesson Notes</title>     
+    <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>
@@ -21,9 +25,6 @@
         <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>
-            <a href="/lessons/matematika/" class="sidebar-link link sidebar-sublink">Matematika</a>
-            <a href="/lessons/fisika/" class="sidebar-link link sidebar-sublink">Fisika</a>
-            <a href="/lessons/biologi/" class="sidebar-link link sidebar-sublink">Lesson 3</a>
         
         <hr class="divider">
         <div id="toc">
@@ -42,119 +43,128 @@
                 <div class="card">
                     <a href="/lessons/matematika/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/1/">
-                        <h2>Matematika</h2>
+            <h2>Matematika</h2>
                     </a>
-                    <p>Pak Hidayatullah, S.Pd.</p>
+                    <p>Hidayatullah, S.Pd.</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/fisika/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/2/">
-                        <h2>Fisika</h2>
+            <h2>Fisika</h2>
                     </a>
-                    <p>Bu Ayu Rezky Yulita, M.Pd.</p>
+                    <p>Ayu Rezky Yulita, M.Pd.</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/biologi/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>Biologi</h2>
+            <h2>Biologi</h2>
                     </a>
-                    <p>Bu Ir. Hj. Wiwit Parminta</p>
+                    <p>Ir. Hj. Wiwit Parminta</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/ips/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>IPS</h2>
+            <h2>IPS</h2>
                     </a>
-                    <p>Bu Uaeni Jahroh S.Pd.</p>
+                    <p>Uaeni Jahroh S.Pd.</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/agama/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>Agama</h2>
+            <h2>Agama</h2>
                     </a>
-                    <p>Pak Akrom Hasani, S.Ag.</p>
+                    <p>Akrom Hasani, S.Ag.</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/quran/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>Al-Qur'an</h2>
+            <h2>Al-Qur'an</h2>
                     </a>
-                    <p>Pak Muhammad Fathan S.Ag</p>
+                    <p>Muhammad Fathan S.Ag</p>
+                </div>
+                <div class="card">
+                    <a href="/lessons/arab/" class="link-card"></a>
+                    <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
+            alt="" class="card-img">
+                    <a href="/lessons/3/">
+            <h2>Bahasa Arab</h2>
+                    </a>
+                    <p>Mohammad Amar, Lc.</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/ppkn/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>PPKn</h2>
+            <h2>PPKn</h2>
                     </a>
-                    <p>Bu Andini Nurlaily Hikmah, S.Pd.</p>
+                    <p>Andini Nurlaily Hikmah, S.Pd.</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/informatika/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>Informatika</h2>
+            <h2>Informatika</h2>
                     </a>
-                    <p>Bu Nurbaeti, SE., M.Ak</p>
+                    <p>Nurbaeti, SE., M.Ak</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/english/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>English</h2>
+            <h2>English</h2>
                     </a>
-                    <p>Bu Sofia Nurbaiti, S.Pd.</p>
+                    <p>Sofia Nurbaiti, S.Pd.</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/indonesia/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>Bahasa Indonesia</h2>
+            <h2>Bahasa Indonesia</h2>
                     </a>
-                    <p>Pak Maman Sulaeman, S.Pd.</p>
+                    <p>Maman Sulaeman, S.Pd.</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/musik/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>Seni Musik</h2>
+            <h2>Seni Musik</h2>
                     </a>
-                    <p>Bu Dra. Kusnun Indrawati</p>
+                    <p>Dra. Kusnun Indrawati</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/lukis/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>Seni Rupa</h2>
+            <h2>Seni Rupa</h2>
                     </a>
-                    <p>Pak Miftah Izharul Haq, S.Pd</p>
+                    <p>Miftah Izharul Haq, S.Pd</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/pjok/" class="link-card"></a>
                     <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-                        alt="" class="card-img">
+            alt="" class="card-img">
                     <a href="/lessons/3/">
-                        <h2>Penjasorkes</h2>
+            <h2>Penjasorkes</h2>
                     </a>
-                    <p>Pak Supatri, S.Pd</p>
+                    <p>Supatri, S.Pd</p>
                 </div>
             </div>
         </section>
diff --git a/lessons/indonesia/index.html b/lessons/indonesia/index.html
new file mode 100644
index 0000000..9eec6aa
--- /dev/null
+++ b/lessons/indonesia/index.html
@@ -0,0 +1,51 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Bahasa Indonesia</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <h1 id="bab1">Bab 1 - Teks Laporan Percobaan</h1>
+            <p><a href="laporan-percobaan/pengertian.html" class="link">Note 1: Pengertian</a></p>
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..d19eea2
--- /dev/null
+++ b/lessons/indonesia/laporan-percobaan/pengertian.html
@@ -0,0 +1,51 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Teks Laporan Percobaan: Pengertian</h1>
+    </div>
+
+    <div id="main">
+        <section>
+            <h1 id="pengertian">Pengertian</h1>
+            
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..5a31626
--- /dev/null
+++ b/lessons/informatika/chapter/note.html
@@ -0,0 +1,130 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Lesson 1: Bab 1 - Materi 1</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..27c44db
--- /dev/null
+++ b/lessons/informatika/index.html
@@ -0,0 +1,50 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Informatika</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <p style="text-align: center; width: 100%;"><i class="fa-solid fa-file-circle-question"></i> Hm. It seems like there is nothing here yet.</p>
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..5a31626
--- /dev/null
+++ b/lessons/ips/chapter/note.html
@@ -0,0 +1,130 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Lesson 1: Bab 1 - Materi 1</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..7955ab5
--- /dev/null
+++ b/lessons/ips/index.html
@@ -0,0 +1,50 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">IPS</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <p style="text-align: center; width: 100%;"><i class="fa-solid fa-file-circle-question"></i> Hm. It seems like there is nothing here yet.</p>
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..5a31626
--- /dev/null
+++ b/lessons/lukis/chapter/note.html
@@ -0,0 +1,130 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Lesson 1: Bab 1 - Materi 1</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..866ea30
--- /dev/null
+++ b/lessons/lukis/index.html
@@ -0,0 +1,50 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Seni Rupa</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <p style="text-align: center; width: 100%;"><i class="fa-solid fa-file-circle-question"></i> Hm. It seems like there is nothing here yet.</p>
+        </section>
+    </div>
+    
+    <script src="/scripts/toc.js"></script>
+    <script src="/scripts/sidebar.js"></script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/lessons/matematika/index.html b/lessons/matematika/index.html
new file mode 100644
index 0000000..5fcdabc
--- /dev/null
+++ b/lessons/matematika/index.html
@@ -0,0 +1,51 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Matematika</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <h1 id="bab1">Chapter 1 - Bentuk Pangkat dan Akar</h1>
+            <p><a href="pangkat-akar/pangkat.html" class="link">Materi 1: Exponent</a></p>
+        </section>
+    </div>
+    
+    <script src="/scripts/toc.js"></script>
+    <script src="/scripts/sidebar.js"></script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/lessons/matematika/pangkat-akar/pangkat.html b/lessons/matematika/pangkat-akar/pangkat.html
new file mode 100644
index 0000000..f3af1a2
--- /dev/null
+++ b/lessons/matematika/pangkat-akar/pangkat.html
@@ -0,0 +1,97 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Bentuk Pangkat dan Akar: Exponent</h1>
+    </div>
+
+    <div id="main">
+        <section>
+            <h1 id="exponent">Exponents</h1>
+            x<sup>n</sup> = x<sub>1</sub> &times; x<sub>2</sub> &times; ... &times; x<sub>n</sub>
+            <h2 id="exponent--examples">Examples</h2>
+            <ul>
+                <li>2<sup>5</sup> = 2 &times; 2 &times; 2 &times; 2 &times; 2 = 32</li>
+                <li>5<sup>7</sup> = 5 &times; 5 &times; 5 &times; 5 &times; 5 &times; 5 &times; 5 = 78.125</li>
+            </ul>
+            <h1 id="exponent-operations">Exponent Operations</h1>
+            <h2 id="exponent-operations--multiplication">Multiplication</h2>
+            a<sup>x</sup> &times; b<sup>y</sup> = (a &times; b)<sup>x + y</sup>
+            <h2 id="exponent-operations--division">Division</h2>
+            a<sup>x</sup> &divide; b<sup>y</sup> = (a &divide; b)<sup>x - y</sup>
+            <h2 id="exponent-operations--exponent">Exponent</h2>
+            a<sup>x<sup>y</sup></sup> = a<sup>x &times; y</sup>
+
+            <h1 id="zero-exponent">Zero Exponent</h1>
+            <p>a<sup>0</sup> = 1</p>
+            <h2 id="zero-exponent--examples">Examples</h2>
+            <ul>
+                <li>5<sup>0</sup> = 1</li>
+                <li>7<sup>0</sup> = 1</li>
+                <li>100<sup>0</sup> = 1</li>
+                <li>28,67<sup>0</sup> = 1</li>
+            </ul>
+            <h1 id="one-exponent">One Exponent</h1>
+            <p>a<sup>1</sup> = a</p>
+            <h2 id="one-exponent--examples">Examples</h2>
+            <ul>
+                <li>5<sup>1</sup> = 5</li>
+                <li>7<sup>1</sup> = 7</li>
+                <li>100<sup>1</sup> = 100</li>
+                <li>28,67<sup>1</sup> = 28,67</li>
+            </ul>
+            <h1 id="fractional-exponent">Fractional Exponent</h1>
+            <img src="/assets/images/math/fractional_exponent.svg" alt="">
+            <p>x&nbsp;<sup><span class="frac"><sup>y</sup><span>&frasl;</span><sub>z</sub></span></sup> =
+                <sup>z</sup><span>√(x</span><sup style="font-size: small;">y</sup><span>)</span></p>
+            <h2 id="fractional-exponent--examples">Examples</h2>
+            <ul>
+                <li>5&nbsp;<sup><span class="frac"><sup>1</sup><span>&frasl;</span><sub>2</sub></span></sup> =
+                    <sup>2</sup><span>√5</span></li>
+                <li>7&nbsp;<sup><span class="frac"><sup>2</sup><span>&frasl;</span><sub>3</sub></span></sup> =
+                    <sup>3</sup><span>√(5<sup>2</sup>)</span></li>
+            </ul>
+        </section>
+    </div>
+
+    <script src="/scripts/toc.js"></script>
+    <script src="/scripts/sidebar.js"></script>
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/lessons/musik/chapter/note.html b/lessons/musik/chapter/note.html
new file mode 100644
index 0000000..5a31626
--- /dev/null
+++ b/lessons/musik/chapter/note.html
@@ -0,0 +1,130 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Lesson 1: Bab 1 - Materi 1</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..fed6a7c
--- /dev/null
+++ b/lessons/musik/index.html
@@ -0,0 +1,50 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Seni Musik</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <p style="text-align: center; width: 100%;"><i class="fa-solid fa-file-circle-question"></i> Hm. It seems like there is nothing here yet.</p>
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..5a31626
--- /dev/null
+++ b/lessons/pjok/chapter/note.html
@@ -0,0 +1,130 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Lesson 1: Bab 1 - Materi 1</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..606c693
--- /dev/null
+++ b/lessons/pjok/index.html
@@ -0,0 +1,50 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Penjasorkes</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <p style="text-align: center; width: 100%;"><i class="fa-solid fa-file-circle-question"></i> Hm. It seems like there is nothing here yet.</p>
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..5a31626
--- /dev/null
+++ b/lessons/ppkn/chapter/note.html
@@ -0,0 +1,130 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Lesson 1: Bab 1 - Materi 1</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..22e6be2
--- /dev/null
+++ b/lessons/ppkn/index.html
@@ -0,0 +1,50 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">PPKn</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <p style="text-align: center; width: 100%;"><i class="fa-solid fa-file-circle-question"></i> Hm. It seems like there is nothing here yet.</p>
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..5a31626
--- /dev/null
+++ b/lessons/quran/chapter/note.html
@@ -0,0 +1,130 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Lesson 1: Bab 1 - Materi 1</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..ffb779c
--- /dev/null
+++ b/lessons/quran/index.html
@@ -0,0 +1,50 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Al-Qur'an</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <p style="text-align: center; width: 100%;"><i class="fa-solid fa-file-circle-question"></i> Hm. It seems like there is nothing here yet.</p>
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..5a31626
--- /dev/null
+++ b/lessons/subject/chapter/note.html
@@ -0,0 +1,130 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Lesson 1: Bab 1 - Materi 1</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p><h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading2">Heading 2</h1>
+            <h2 id="subheading1">Sub Heading 1</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h2 id="subheading2">Sub Heading 2</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+            <h1 id="heading1">Heading 1</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus.
+            </p>
+        </section>
+    </div>
+    
+    <script src="/scripts/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
new file mode 100644
index 0000000..bf24659
--- /dev/null
+++ b/lessons/subject/index.html
@@ -0,0 +1,50 @@
+<!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.png">
+    <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>
+    <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" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a>
+    <div id="console"></div>
+    <div id="sidebar">
+        <a href="/index.html">
+            <img src="/assets/images/master.png" alt="" class="sidebar-logo">
+        </a>
+        <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        <hr class="divider">
+        <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 class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <h1 class="banner-text" id="banner-txt">Subject Title</h1>
+    </div>
+
+    <div id="main">
+        <section>   
+            <p style="text-align: center; width: 100%;"><i class="fa-solid fa-file-circle-question"></i> Hm. It seems like there is nothing here yet.</p>
+        </section>
+    </div>
+    
+    <script src="/scripts/toc.js"></script>
+    <script src="/scripts/sidebar.js"></script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/site.webmanifest b/site.webmanifest
new file mode 100644
index 0000000..45dc8a2
--- /dev/null
+++ b/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+\ No newline at end of file
diff --git a/style.css b/style.css
index 0418df6..0a1a217 100644
--- a/style.css
+++ b/style.css
@@ -72,7 +72,32 @@ a:focus {
     color: var(--black-color-3);
 }
 
+img {
+    max-width: 600px;
+    border-radius: 10px;
+}
+
+td,
+th {
+    border: 1px solid #e4e4e4;
+    padding: 8px;
+    margin: 0;
+}
+
+th {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    text-align: center;
+    background-color: #e4e4e4;
+}
+
+table {
+    border-collapse: collapse;
+}
+
 .link {
+    padding-left: 5px;
+    padding-right: 5px;
     text-decoration: none;
     background-color: rgba(0, 0, 0, 0.05);
     display: inline-block;
@@ -107,7 +132,7 @@ img {
     width: 340px;
     position: fixed;
     z-index: 9999;
-    box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.116);
+    box-shadow: 7px 0px 10px rgba(0, 0, 0, 0.06);
     padding: 20px;
     background-color: var(--white-accent-bg);
     transition: all .3s;
@@ -177,7 +202,6 @@ img {
     color: var(--black-color-1);
     transition: all .2s;
     z-index: 10000;
-    background-color: #00000000;
     padding: 10px;
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
@@ -186,6 +210,7 @@ img {
     height: 22px;
     display: flex;
     place-content: center;
+    background-color: #FFFFFFAA;
 }
 
 .fa-bars {
@@ -214,6 +239,19 @@ img {
     align-items: center;
 }
 
+.flex-center {
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+.subtitle {
+    opacity: 0.8;
+    text-align: center;
+    font-size: 0.9rem;
+}
+
 .flex-element {
     margin: 30px;
 }
@@ -234,12 +272,14 @@ img {
     background-repeat: no-repeat !important;
     border-radius: 0;
     background-attachment: fixed;
-    box-shadow: inset 0 -20px 10px -10px #00000075;
+    box-shadow: inset 0 -15px 10px -10px rgba(0, 0, 0, 0.2);
     object-fit: cover;
+    right: 0;
 }
 
 .banner-text {
     position: absolute;
+    z-index: 3;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -280,6 +320,7 @@ img {
 
 .card-img {
     width: calc(100% + 40px);
+    max-width: 200% !important;
     height: 300px;
     object-fit: cover;
     margin: -20px;
@@ -291,8 +332,9 @@ img {
 .link-card {
     width: 100%;
     height: 100%;
-    margin: -20px;
     position: absolute;
+    top: 0;
+    left: 0;
     text-decoration: none;
     border-radius: 10px;
 }
@@ -301,7 +343,7 @@ img {
     background-color: rgba(0, 0, 0, 0.1);
 }
 
-.card > a {
+.card>a {
     text-decoration: none;
 }
 
@@ -316,10 +358,55 @@ img {
     place-items: center;
 }
 
-.highlight > * {
+.highlight>* {
     margin: 15px;
 }
 
+span.frac {
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+}
+
+span.frac>sup,
+span.frac>sub {
+    display: block;
+    font-size: small;
+    padding: 0 0.3em;
+}
+
+span.frac>sup {
+    border-bottom: 0.08em solid;
+    padding: 0.3em;
+}
+
+span.frac>span {
+    display: none;
+}
+
+sup>.frac {
+    vertical-align: super;
+    font-size: small;
+}
+
+sup>sup {
+    font-size: smaller;
+}
+
+#img-alazhar {
+    background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/ad/Masjid_Agung_Al-Azhar_2021.jpg);
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.gradient-bg {
+    position: inherit;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+    background: linear-gradient(45deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
+}
+
 #img-main {
     background-image: url(https://img-cdn.inc.com/image/upload/w_1920,h_1080,c_fill/images/panoramic/GettyImages-577674005_492115_zfpgiw.jpg);
     background-position: center;
@@ -372,6 +459,7 @@ li>a:hover {
 
     .fixed-top-btn {
         color: var(--white-color-1);
+        background-color: #00000022;
     }
 
     .fixed-top-btn:hover {
@@ -404,6 +492,7 @@ li>a:hover {
 
     .menu-btn {
         outline: solid 0px var(--white-color-1);
+        background-color: #00000022;
     }
 
     .menu-btn:focus {
@@ -417,11 +506,11 @@ li>a:hover {
     .link {
         background-color: rgba(255, 255, 255, 0.1);
     }
-    
+
     .link:hover {
         background-color: rgba(255, 255, 255, 0.2);
     }
-    
+
     .link:focus {
         background-color: rgba(255, 255, 255, 0.15);
     }
@@ -453,4 +542,8 @@ li>a:hover {
     .highlight {
         flex-direction: column;
     }
+
+    img {
+        max-width: 100% !important;
+    }
 }
 \ No newline at end of file
author	altaf-creator <athaalaa@gmail.com>	2023-07-27 10:39:43 +0700
committer	altaf-creator <athaalaa@gmail.com>	2023-07-27 10:39:43 +0700
commit	1efbdf493533ad11f4a961f1ec9759e8cfd14a96 (patch)
tree	9826dfe09266e35dc723c3dfe7916678f3197c36
parent	e71f6203faf13574ef45bf80e23a546ac7866d5d (diff)