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 /lessons
parent: e71f6203faf13574ef45bf80e23a546ac7866d5d (diff)
32 files changed, 2508 insertions, 57 deletions
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
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 /lessons
parent	e71f6203faf13574ef45bf80e23a546ac7866d5d (diff)