diff --git a/app/index.html b/app/index.html
index 1655fb3..d0f1ff1 100644
--- a/app/index.html
+++ b/app/index.html
@@ -5,97 +5,34 @@
   <meta charset="UTF-8">
   <link rel="icon" type="image/svg+xml" href="../favicon.svg">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Mortar & Pestle</title>
-  <link rel="stylesheet" href="../assets/index-0e5924d3.css">
-  <!-- <script type="text/javascript">// <![CDATA[
-  function googleTranslateElementInit() {
-  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
-  }
-  // ]]></script>
-  <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script> -->
-  <script>
-    function lockOrientation() {
-    if (screen.orientation) {
-        screen.orientation.lock('landscape');
-    } else if (screen.mozLockOrientation) {
-        screen.mozLockOrientation('landscape');
-    } else if (screen.msLockOrientation) {
-        screen.msLockOrientation('landscape');
-    }
-    }
-    window.addEventListener('load', lockOrientation);
-
-    let questionid = '';
-
-    function toggleModal() {
-      var modal = document.getElementById('modal');
-      modal.classList.toggle('hidden');
-    }
-
-    function toggleMS() {
-      var modal2 = document.getElementById('markscheme');
-      modal2.classList.toggle('hidden');
-    }
-  
-    function toggleR() {
-      var modal3 = document.getElementById('report');
-      modal3.classList.toggle('hidden');
-    }
-
-    function toggleDarkMode() {
-    const body = document.body;
-    body.classList.toggle('dark-mode');    
-    const head = document.head;
-    head.classList.toggle('dark-mode');
-    }    
-  </script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.2/purify.min.js"></script>
-  <script>
-function generatePDF() {
-    const {jsPDF} = window.jspdf
-    const selectedQuestionIds = JSON.parse(sessionStorage.getItem('selectedQuestionIds')) || [];
-    if (selectedQuestionIds.length === 0) {
-        alert("Select some questions first!");
-        return;
-    }
-    const doc = new jsPDF();
-    const options = {
-        filename: 'QuestionBank Test.pdf',
-        margin: [10, 10],
-        image: { type: 'jpeg', quality: 0.98 },
-        html2canvas: { scale: 2 },
-        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
-    };
-    let concatenatedHTML = '';
-    selectedQuestionIds.forEach(questionId => {
-        const questionDiv = document.getElementById(questionId);
-        const h3 = questionDiv.querySelector('h3');
-        const squareContainer = questionDiv.querySelector('.square-container');
-        concatenatedHTML += h3.outerHTML + squareContainer.outerHTML;
-    });
-    html2pdf().from(concatenatedHTML).set(options).save();
-
-  }
-  </script>
-  <style>
-    .hidden {
-      display: none;
-    }
-  </style>
-  <script>
-    function _0x2cff(_0x1f45e1,_0x1a7218){var _0x16a386=_0x16a3();return _0x2cff=function(_0x2cff83,_0x473d3a){_0x2cff83=_0x2cff83-0x75;var _0x2ecbe5=_0x16a386[_0x2cff83];return _0x2ecbe5;},_0x2cff(_0x1f45e1,_0x1a7218);}(function(_0x1cd636,_0x40d568){var _0x8d3270=_0x2cff,_0x4b6a0a=_0x1cd636();while(!![]){try{var _0x32e310=parseInt(_0x8d3270(0x78))/0x1+-parseInt(_0x8d3270(0x7e))/0x2*(-parseInt(_0x8d3270(0x85))/0x3)+-parseInt(_0x8d3270(0x80))/0x4+parseInt(_0x8d3270(0x7a))/0x5+parseInt(_0x8d3270(0x7d))/0x6+-parseInt(_0x8d3270(0x77))/0x7+-parseInt(_0x8d3270(0x82))/0x8*(parseInt(_0x8d3270(0x7f))/0x9);if(_0x32e310===_0x40d568)break;else _0x4b6a0a['push'](_0x4b6a0a['shift']());}catch(_0x3c9c6){_0x4b6a0a['push'](_0x4b6a0a['shift']());}}}(_0x16a3,0x6d602));function _0x900b(_0x1092b4,_0x81a687){var _0x251340=_0x183e();return _0x900b=function(_0xe0a1be,_0x52cf40){_0xe0a1be=_0xe0a1be-(-0xe4b+0x87f+0x758);var _0x35008f=_0x251340[_0xe0a1be];return _0x35008f;},_0x900b(_0x1092b4,_0x81a687);}(function(_0x5e800c,_0x5a0084){var _0x381fc6=_0x2cff,_0x4552c5=_0x900b,_0x42dfd4=_0x5e800c();while(!![]){try{var _0x3a8e59=parseInt(_0x4552c5(0x18d))/(0x1c35+-0x17*-0x35+0x20f7*-0x1)*(parseInt(_0x4552c5(0x190))/(-0x97c+-0x1*0x1733+0x20b1))+-parseInt(_0x4552c5(0x18c))/(-0x3*-0xc9b+-0xff6+0x4*-0x576)+parseInt(_0x4552c5(0x194))/(-0xc7*0x14+-0x1*0x1b83+0x2b13*0x1)*(-parseInt(_0x4552c5(0x195))/(0x5bd+-0x1*-0x1dec+-0x23a4))+-parseInt(_0x4552c5(0x193))/(0x1462+-0x1b2c+-0x4*-0x1b4)+-parseInt(_0x4552c5(0x18f))/(-0x1*0x11c3+0xe5c+0x36e)+-parseInt(_0x4552c5(0x192))/(-0x1792+0x11aa+0x2f8*0x2)*(parseInt(_0x4552c5(0x18e))/(-0x221f+0x146b+0x1*0xdbd))+parseInt(_0x4552c5(0x191))/(0x2b*0x72+-0xdf9+0x107*-0x5);if(_0x3a8e59===_0x5a0084)break;else _0x42dfd4[_0x381fc6(0x83)](_0x42dfd4[_0x381fc6(0x86)]());}catch(_0x5e4be7){_0x42dfd4['push'](_0x42dfd4[_0x381fc6(0x86)]());}}}(_0x183e,-0x4bda5*0x1+0x10e17*0x6+0x9b393),가=(!![]+[])[-0x186c+-0x956*0x4+0x3dc4]+([]+{})[0xaa1*0x1+0x1*0xb95+0x3*-0x767]+(([]+[])[([]+{})[-0x2333+-0x25d*0x4+0x2cac]+([]+{})[0x59*0x3+0x3d*0x9d+-0x2673*0x1]+([][[]]+[])[-0x1147+0x1*-0x1ec9+0x73*0x6b]+(![]+[])[0x1*0x16c7+0x2*0x729+-0x2516]+(!![]+[])[-0x1*-0x1b4f+-0x55d+-0x15f2]+(!![]+[])[0x79d*0x5+-0x1*-0x167d+-0x3c8d*0x1]+([][[]]+[])[0xcf4+-0x1*-0x260f+-0x3303]+([]+{})[0x789+0xa6e+-0x11f2]+(!![]+[])[0x644+-0x14d3*0x1+0xe8f*0x1]+([]+{})[-0x1e36+0x259e+-0x767*0x1]+(!![]+[])[-0x1*-0x137e+-0x2c9+0x42d*-0x4]]+[])[0x1*-0x25ab+0x25fd*0x1+-0x49*0x1]+(!![]+[])[0x35*-0x23+0x3a*0x22+-0x75]+(!![]+[])[0x2d7*-0xb+0x1a40+0x4fe]+([][[]]+[])[-0x1129+0x410+-0x2e*-0x49]+([][[]]+[])[0x1*-0x5f0+-0x25f9+-0x2*-0x15f5]+(([]+[])[([]+{})[0x14c5+-0x41*0x4d+-0x133]+([]+{})[-0x71*0x3b+-0x2*0x92a+0x2c60]+([][[]]+[])[0x1a52+-0x4*-0x735+-0x3725]+(![]+[])[0x1d*-0x95+-0x256*-0xa+0xcf*-0x8]+(!![]+[])[0xad*0x17+0x1955*0x1+-0x28e0]+(!![]+[])[-0x2*-0xc0b+-0x1d55+0x10*0x54]+([][[]]+[])[-0x1*-0x22cd+-0x2476+0x1a9]+([]+{})[-0x270d+0x22b1+0x461]+(!![]+[])[0x1*0x12ef+0x2*0x2ab+-0x1845]+([]+{})[-0xee*0x1a+0x7d3*-0x4+-0x3779*-0x1]+(!![]+[])[0xa*0x23b+0x18df*-0x1+0x2*0x149]]+[])[-0x770+0x714+0x35*0x2],나=([]+{})[-0x1c7+-0x2ea*0x5+-0x1a3*-0xa]+([]+{})[0xb7e+0x1*0x243a+-0x2fb7]+([][[]]+[])[0x2694+-0x17*0x72+-0x1c55]+(![]+[])[-0x8c7+-0x2f6*-0xd+0x1*-0x1db4]+(!![]+[])[0x8a*0x1d+-0x248c+0x14ea]+(!![]+[])[0x269e+0x1d07+-0x43a4]+([][[]]+[])[0x7f8+0xdb1+-0x15a9]+([]+{})[-0x1048+-0x4f5*-0x1+0xb58]+(!![]+[])[-0xc2f+0xce*0x13+-0x109*0x3]+([]+{})[-0x23ab+0x9b9+-0x1*-0x19f3]+(!![]+[])[-0x1ae3+0x84d+0x1297],다=(![]+[])[-0x1*0x2598+-0x1cc6+0x425e]+(![]+[])[-0x1a7b+0x57b+0x1502]+(![]+[])[-0x1*0x7ac+0x1e44+0x1697*-0x1]+(!![]+[])[0x233e+0x17cd+-0x3b0b],あ=(!![]+[])[-0x41a+0xfb4+-0x2d*0x42],い=([][[]]+[])[0x83b+0xc02+-0x143c],う=(!![]+[])[-0x12c2+0x10bb+-0x1*-0x208],$=((0x1*0x24bc+0xd*0x27d+-0x228a*0x2)/(0x832*0x1+0x1*-0x264b+-0x17*-0x14f)+[])[0x1186*0x1+0x26e6+0x1*-0x3865],_=(!![]+[])[-0x1f0d+-0x902+-0x1*-0x2812],가가=(![]+[])[0x15c0+0x2f*-0x49+-0x859],가나=(![]+[])[-0x1582+0x2*-0x11aa+0x38d8],가다=(![]+[])[0x1fba+0x566+0x1*-0x251f],가あ=(![]+[])[0x1408+-0x15bb+0x1b6],가い=([]+{})[0x1*0x85f+0x1899+-0x1*0x20f7],가う=([][[]]+[])[-0x4*-0x782+0x16e8+-0x34f0],가$=([]+{})[0x22f*-0x1+0x3ba*-0x3+-0x2*-0x6b1],가_=((0x25be+0x1028+0x1b*-0x1ff)/(-0x17b9+0x1141*0x1+-0x24*-0x2e)+[])[-0x1*-0x148d+0x88*0x29+-0x1*0x2a55],나가=([][[]]+[])[-0x1c*0x6a+0xd93*0x2+-0xf8c],나나=([][[]]+[])[0x41*-0xb+-0x3f*0x39+0x10d7],[][다][나](가가+가う+い+가$+あ+나나+가い+い+'\x20'+가あ+(-0x1*0xb9d+0x2*0x47a+0x1*0x2ba)[가](-0x1b73+-0x20fb+0xa*0x60d)+가い+(0x88*0x1d+-0x2*-0xc77+-0x2836)[가](-0x2357*-0x1+0x3ad+-0x26e3*0x1)+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0x133a+0x1*-0x1a68+0x2dbb)[가](-0x1b03*-0x1+-0x115e+-0x987)+_+'('+'\x22'+'%'+'5'+'0'+'\x22'+')')()+가い+(0x1f*-0x9+-0x142b+0x155b)[가](-0x1349+-0x17bd+0x4*0xac9)+가う+(0x11e6+0x8f2+0x1abf*-0x1)[가](0xd00+-0x1*-0xc9c+0x2*-0xcbf)+'('+')'+'\x20'+'{'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0x44*0x75+0x120d+-0x690*-0x2)[가](-0xd49+-0x220c+0x2f73*0x1)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+'\x20'+'\x20'+'\x20'+'\x20'+가다+가나+_+う+あ+'('+'\x22'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0xf7d*0x1+0xb2a+-0x4*-0x11b)[가](0x24d9*0x1+0x91+-0x254c)+_+'('+'\x22'+'%'+'5'+'4'+'\x22'+')')()+(0x14cf+0x8f3*-0x1+-0xbcb)[가](0x204c+-0x13cf+-0xc69)+う+가い+가う+(([]+[])[나]+[])[-0x3*0x1ef+0xcc4+-0x6e9]+(-0x1*0x5dd+-0x5*-0x157+-0xc5)[가](0x1b27+0xa1e+-0x2531)+'\x20'+あ+(-0x116c+-0x297*0x1+0x1414)[가](0x17*-0x47+-0x11*-0x27+0xf*0x42)+_+'\x20'+가다+(([]+[])[나]+[])[-0x1281+-0x1f71+0x3200]+_+가あ+','+'\x20'+(-0x2093+0x40*-0x7b+0x3f73)[가](0x5d*-0x33+0xd4f*-0x2+0x7a*0x5f)+나나+가あ+나가+가い+((-0x19e7+0x19ff+0x6*-0x4)[나]+[])[-0x1*0x234d+-0xa33+-0x83*-0x59]+'\x20'+가あ+(0x48b*-0x1+-0x1004+0x8*0x294)[가](-0x1f12+0x162b+0x8fb)+가다+가나+가나+'\x20'+가가+가나+가い+(-0x113b+-0xf4f*0x1+0xe2*0x25)[가](0x15a6+-0x1d08+0x783)+','+'\x5c'+い+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0x1*0xd5f+-0x25*0x4f+0x18e3*0x1)[가](0x53a+0x1bd1*-0x1+-0x1*-0x16b5)+_+'('+'\x22'+'%'+'4'+'7'+'\x22'+')')()+가う+나나+나가+나나+い+(([]+[])[나]+[])[-0x8f0+0xc86+-0x71*0x8]+'\x20'+((0xeed*-0x1+0xf77+-0x8a*0x1)[나]+[])[0x141*-0x13+0x1324+0x4ba]+나나+い+나가+가あ+'\x20'+(-0xb75*-0x1+-0x11*-0x74+-0x1309)[가](-0x2*-0x221+0x6*0x227+-0x110b*0x1)+나나+あ+(0x3*0xc7a+0x18f7+-0x3e54)[가](0x2*-0xbc8+0x43*0x95+0xf5b*-0x1)+'\x20'+(-0x7*-0x362+-0x1*0x2589+0xdef)[가](0x459*0x8+0x1146+-0x33f9)+い+가い+(-0x249a+-0x1*-0x351+0x2169)[가](0x2*0xa76+0x885+0x2*-0xea8)+가나+_+나가+(([]+[])[나]+[])[-0x83*-0x2b+0x269+-0x185c]+_+'\x20'+나나+い+'\x20'+あ+가い+(0x4*0x23+0x1fb7+-0x2023*0x1)[가](-0x64*-0x34+0x181e+-0x407*0xb)+'.'+'\x5c'+い+가_+い+'\x20'+_+([][다]+[])[0x1972+0x169e+-0x2ff9*0x1]+_+う+$+'\x20'+(-0x6b*-0x45+0xa*0x61+0x1*-0x2090)[가](-0x86b*0x2+-0x1*-0x1556+-0x46c)+_+가다+う+あ+','+'\x20'+$+가い+가う+う+'\x20'+가나+_+(([]+[])[나]+[])[-0x1a*0x1e+-0x6af*-0x4+0x17a2*-0x1]+가다+가$+$+'\x20'+(0x4b5+0x1dfa+-0x228f)[가](-0x10*-0xe9+0x2b*-0xbb+-0x6a*-0x29)+나나+가나+가나+'\x20'+(([]+[])[나]+[])[0x14cf*0x1+0x1135+-0x25f6]+う+가い+(-0x1*-0x1a7d+0x964+-0x23c1)[가](0x216e+0x1*-0xdfb+-0x1352)+','+'\x5c'+い+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(0x107*-0x7+0x1*-0x2125+0x286f)[가](0x2b*0x95+0x1232+-0x2b1b)+_+'('+'\x22'+'%'+'4'+가$+'\x22'+')')()+가い+い+(([]+[])[나]+[])[-0x914+0xb*-0x4b+0xc5b]+'\x20'+가나+나나+([][다]+[])[-0x2*0x851+0x1*0x18d2+0x819*-0x1]+_+'\x20'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0x2146+-0x265+0xc*0x2fb)[가](-0x18+-0xbed+-0xef*-0xd)+_+'('+'\x22'+'%'+'5'+'8'+'\x22'+')')()+나나+가나+_+あ+가い+(0x7*0xbd+0x7b+-0x586)[가](-0xf3d+-0xdd*-0x5+-0x17*-0x7b)+'.'+'\x22'+')'+';'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(0x2*0xe59+0x468*0x2+-0x2569)[가](-0x1562+-0x5*0x748+0x39e8)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+'}'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(0x1f6f+0x2390+-0x42e6)[가](0xb*-0xc8+-0x46d*-0x4+-0x8fe)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0xb*-0x2bf+0x13a1+-0x31bd)[가](0x14cb+-0x4d4+-0xfd9)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+가가+가う+い+가$+あ+나나+가い+い+'\x20'+가あ+あ+가다+う+あ+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(0x35d*0x1+-0x1925+0x15e1)[가](0x7fd+0x19f3+-0x21d2)+_+'('+'\x22'+'%'+'5'+'2'+'\x22'+')')()+가다+い+나가+가い+((-0x21fe+-0x15f*-0x9+0x17*0xf1)[나]+[])[-0x14f3+-0x1*0x232+0x1730]+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0x1a64*-0x1+0x20cb+-0x3b16)[가](-0x1fd3+0x9ef+0x1602)+_+'('+'\x22'+'%'+'5'+'4'+'\x22'+')')()+나나+((-0x1c37*0x1+-0x1871*-0x1+0x3c6)[나]+[])[-0x1882+0x1049*-0x1+0x28d6]+_+う+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0x25b3+0x28*-0xbd+-0x4354*-0x1)[가](0xa93+0x85f*-0x1+-0x216)+_+'('+'\x22'+'%'+'4'+가$+'\x22'+')')()+가い+가い+(0x1b00+0x1*-0x1d2f+0x1*0x248)[가](-0x1*0x8a5+0xd93*0x1+0x58*-0xe)+'('+')'+'\x20'+'{'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(0xd*-0x228+0x1d49+-0x128)[가](0x134e*0x2+0xc9b+-0x3319*0x1)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+'\x20'+'\x20'+'\x20'+'\x20'+가$+가い+い+가あ+あ+'\x20'+う+가다+い+나가+가い+((-0x7*-0x441+-0xf31+-0x74b*0x2)[나]+[])[-0x1*0x1f56+-0x1*-0x177a+-0x11*-0x77]+가_+い+あ+_+う+([][다]+[])[0x1*-0x17ae+-0x62f*0x6+0x3cdf]+가다+가나+'\x20'+'='+'\x20'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(0x321+0x4c*0x2c+-0x1018)[가](0x6*0x239+0xdd9+-0x1b11)+_+'('+'\x22'+'%'+'4'+나가+'\x22'+')')()+가다+あ+(0x1*-0x1f57+-0x1*0xcb9+0x4f*0x8f)[가](0x3*0x79c+-0x434+-0x4*0x4a3)+'.'+가가+가나+가い+가い+う+'('+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0x2354+0x1*-0x11e2+0x354f)[가](0xa*-0x21f+-0xf43+0x2497)+_+'('+'\x22'+'%'+'4'+나가+'\x22'+')')()+가다+あ+(0xd1f*-0x2+0x1*0x98e+-0x1*-0x10c1)[가](-0x200c+0x5*-0x665+0x4019)+'.'+う+가다+い+나가+가い+((0x5*0x67+0x12c6+-0x14c9)[나]+[])[-0x1865+0x28e*-0x4+0x22a8]+'('+')'+'\x20'+'*'+'\x20'+'('+'3'+'0'+'\x20'+'-'+'\x20'+'2'+'0'+'\x20'+'+'+'\x20'+'1'+')'+')'+'\x20'+'+'+'\x20'+'2'+'0'+';'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0x10f7+-0x2018+0x3128)[가](0x2311*-0x1+0x1c5d+-0x61*-0x12)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+'\x20'+'\x20'+'\x20'+'\x20'+가あ+_+あ+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0x6ee+0xcd9*0x3+-0x4*0x7e1)[가](-0x1f16+0x1102+0xe32)+_+'('+'\x22'+'%'+'5'+'4'+'\x22'+')')()+나나+((-0xc*0x1af+0x2c9*-0xb+0x32d7)[나]+[])[-0x11d7*0x1+0x251*0xd+0x1f*-0x65]+_+가い+가う+あ+'('+'('+')'+'\x20'+'='+'>'+'\x20'+'{'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(0x12*0x1ab+-0x82+-0x11*0x1bb)[가](-0x12b6*-0x2+0xac1*-0x3+-0x50b)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+'\x20'+'\x20'+'\x20'+'\x20'+'\x20'+'\x20'+'\x20'+'\x20'+가あ+(0x103c+0x2153+-0x317e)[가](0x2*-0x485+-0x1891*0x1+0x21af)+가い+(0x17cf+-0x1*0xb32+0x8b*-0x17)[가](-0x169d*-0x1+0x1906+-0x2f82)+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(0xd5*0x5+-0x126e*-0x1+-0x1*0x167e)[가](0x171+0x1d26+-0x1e79)+_+'('+'\x22'+'%'+'5'+'0'+'\x22'+')')()+가い+(-0x557*-0x5+-0xba7*-0x1+-0x2641)[가](0xdfb+-0x2278+-0x5*-0x41f)+가う+(-0x3a*0x97+0x4*0x777+0x473)[가](0x1d*0xa7+-0x1a3f+0x772)+'('+')'+';'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(0x1665+0x2402+-0x3a4e)[가](-0x12*0x1+0x2*0x747+0x6*-0x265)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+'\x20'+'\x20'+'\x20'+'\x20'+'\x20'+'\x20'+'\x20'+'\x20'+가あ+あ+가다+う+あ+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(0x1be4+-0x1a23+0x35*-0x8)[가](0x81*0xb+-0x252b+0x1fbe)+_+'('+'\x22'+'%'+'5'+'2'+'\x22'+')')()+가다+い+나가+가い+((0x2272+-0x713+-0x1b5f)[나]+[])[-0x1*-0x23a2+-0x1476+-0xf21]+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0xc9d*0x3+0x1*0x8df+-0x1*-0x1d11)[가](-0x2*0xc92+0x1*-0xb11+-0x1*-0x2453)+_+'('+'\x22'+'%'+'5'+'4'+'\x22'+')')()+나나+((-0x14*0x196+-0xd56+-0x2d0e*-0x1)[나]+[])[-0x1aad+0x3e*-0x3+0x6*0x493]+_+う+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(0x1*0xa3+0x22b0+-0x233a)[가](0x2da+0x14d5*-0x1+0x1219)+_+'('+'\x22'+'%'+'4'+가$+'\x22'+')')()+가い+가い+(-0x21be+-0x1a10+0x3be7)[가](0x28*0x80+-0x1dfc+0x3*0x35e)+'('+')'+';'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(0x2*-0x904+-0x9b1+0x1bd2)[가](-0x209e+0x22c6+-0x20a)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+'\x20'+'\x20'+'\x20'+'\x20'+'}'+','+'\x20'+う+가다+い+나가+가い+((-0x50*-0x62+-0x6b1+-0x17ef)[나]+[])[-0x18f5+0x21e6+-0x1*0x8e6]+가_+い+あ+_+う+([][다]+[])[0x1e5d+0x1*-0x1c91+-0x1*0x1b5]+가다+가나+'\x20'+'*'+'\x20'+'6'+'0'+'\x20'+'*'+'\x20'+'1'+'0'+'0'+'0'+')'+';'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0x1801+0x17e2+0x38)[가](0x29a+0x2*-0x113f+0x2002)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+'}'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0x1345+0x1d*-0xc9+0x2a23)[가](0x37*-0xa1+0x117e+0x1137)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0xc61+-0x8b4+0xa97*0x2)[가](-0x1b99+0x178e+0x429)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+가가+가う+い+가$+あ+나나+가い+い+'\x20'+가あ+あ+가다+う+あ+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(0x952*-0x1+0x2b*-0xd3+-0x3*-0xef4)[가](0x1*0x132d+-0xb98+-0x3*0x27d)+_+'('+'\x22'+'%'+'5'+'4'+'\x22'+')')()+나나+((0x11*-0x139+0xc5*0x30+-0x5*0x33b)[나]+[])[0x1*-0x598+0x14*0x65+0x1*-0x241]+_+う+'('+')'+'\x20'+'{'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0x1fd9+-0x8*0x176+0x2ba2*0x1)[가](0xa3*-0x35+-0x2300+-0x3d*-0x121)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+'\x20'+'\x20'+'\x20'+'\x20'+가あ+_+あ+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0xdd3+-0x2*0x502+-0x17f*-0x10)[가](-0xbfc+0x2143*0x1+0x1529*-0x1)+_+'('+'\x22'+'%'+'5'+'4'+'\x22'+')')()+나나+((-0x7*-0x2b9+-0x12a*-0x13+-0x53*0x7f)[나]+[])[0x1*-0x21c7+-0xc4c+0x1*0x2e1e]+_+가い+가う+あ+'('+'('+')'+'\x20'+'='+'>'+'\x20'+'{'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0x2*-0x63a+0x25a3+-0xa2*0x4f)[가](0x98e+0x14*0xe2+-0x44*0x66)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+'\x20'+'\x20'+'\x20'+'\x20'+'\x20'+'\x20'+'\x20'+'\x20'+가あ+あ+가다+う+あ+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(0xe8*0x4+0x4e1+-0x868)[가](-0x2*-0x69d+0x19a8+0xcec*-0x3)+_+'('+'\x22'+'%'+'5'+'2'+'\x22'+')')()+가다+い+나가+가い+((0x13*-0xc1+-0xbd6*0x2+-0x1*-0x25ff)[나]+[])[-0xa2+-0x1*0x263+-0x10*-0x31]+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0x26b4+0x11e3*-0x1+-0x716*-0x8)[가](-0xd7*-0x19+0x11a*-0xe+-0x575)+_+'('+'\x22'+'%'+'5'+'4'+'\x22'+')')()+나나+((-0x1d*-0xa3+-0x59*0xe+-0x3b*0x3b)[나]+[])[0x1457+0x2332+-0x2*0x1bbf]+_+う+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0x163*0x10+-0x28f+0x18d8)[가](0x50e+-0x13af*0x1+0x2f3*0x5)+_+'('+'\x22'+'%'+'4'+가$+'\x22'+')')()+가い+가い+(-0x1*-0xf7+0x1*-0x17b7+0x16d9)[가](-0xdbb+-0xe7+0xec0)+'('+')'+';'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(0xf53+-0x2f0+-0x11e*0xb)[가](0x1e41+0xe57+-0x2c7a)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+'\x20'+'\x20'+'\x20'+'\x20'+'}'+','+'\x20'+'5'+'\x20'+'*'+'\x20'+'6'+'0'+'\x20'+'*'+'\x20'+'1'+'0'+'0'+'0'+')'+';'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0x1*0x17b3+0x55*0x1f+-0x1*-0xd81)[가](-0x739*0x1+0x3*0x5a7+-0x2*0x4cf)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+'}'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0xe*-0x177+0x2*0xe13+-0x308f)[가](0xef*0x9+-0x2048*0x1+0x17ff)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0xe13+-0x848+0x1674)[가](0xd*-0x2e5+-0x1f8+0x27b7)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+(-0x12f8+-0x4*-0x5f+-0x31*-0x5c)[가](0x266c+-0x97*-0x25+0x140a*-0x3)+나나+い+나가+가い+(-0x18e5+-0xb4e+0x11*0x223)[가](0x7*-0x33e+-0x1920+0x1*0x2ff3)+'.'+가い+い+가나+가い+가다+나가+'\x20'+'='+'\x20'+가가+가う+い+가$+あ+나나+가い+い+'('+')'+'\x20'+'{'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(0xd30+0x34*0xa7+-0x2f03)[가](0xad2+0x54+0x4*-0x2c2)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+'\x20'+'\x20'+'\x20'+'\x20'+가あ+あ+가다+う+あ+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0x1fcd+0x8d9*-0x2+0x3198*0x1)[가](0x18d2+-0x5c1*-0x2+-0x2436)+_+'('+'\x22'+'%'+'5'+'4'+'\x22'+')')()+나나+((0x9*-0x68+0x2443+-0x209b)[나]+[])[-0x1b4c+-0x640+0x2197]+_+う+'('+')'+';'+[][다][나](う+_+あ+가う+う+い+'\x20'+가う+い+_+가あ+가$+가다+(-0x132d+-0x398+-0x16de*-0x1)[가](-0x15fb+-0x1caa*0x1+0x32c3)+_+'('+'\x22'+'%'+'0'+가다+'\x22'+')')()+'}'+';')());function _0x16a3(){var _0xf20e4=['10GTdbXA','885605FJTgUf','776402YDzskQ','68444PXTiTF','3752630eaiBqB','265yJrITI','7932426fDhFIX','5157414YHmMhc','24718QcnqRA','29691iJtIts','2639168RdAjUn','46086270nWSaNB','2824OfZmLd','push','81846NykYck','3JUgFTa','shift','408712hMsTrr','15514CPZogf'];_0x16a3=function(){return _0xf20e4;};return _0x16a3();}function _0x183e(){var _0x3e739c=_0x2cff,_0x5579ef=['117MeAxls','7180908qzwHsV',_0x3e739c(0x76),_0x3e739c(0x81),_0x3e739c(0x87),_0x3e739c(0x7c),_0x3e739c(0x79),_0x3e739c(0x7b),_0x3e739c(0x84),_0x3e739c(0x75)];return _0x183e=function(){return _0x5579ef;},_0x183e();}
-  </script>
+  <title>Mortar & Pestle | The Next Generation of Question Grinding</title>
+  <link rel="stylesheet" href="../assets/style.css">
+  <meta name="robots" content="index,follow">
+  <meta name="copyright" content="Public Domain">
+  <meta name="keywords" content="pestle, mortar, mortar & pestle, ib questionbank, pirateib">
+  <meta name="description" content="Practice IB Exam-Style Questions, create topic-wise tests, and much more!">
+  <meta property="og:locale" content="en_US">
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="Mortar & Pestle | The Next Generation of Question Grinding">
+  <meta property="og:description" content="Practice IB Exam-Style Questions, create topic-wise tests, and much more!">
+  <meta property="og:url" content="https://pestle.pages.dev/">
+  <meta property="og:site_name" content="Mortar & Pestle | The Next Generation of Question Grinding">
+  <meta name="twitter:title" content="Mortar & Pestle | The Next Generation of Question Grinding">
+  <meta name="twitter:description" content="Practice IB Exam-Style Questions, create topic-wise tests, and much more!">
+  <link rel="preload" href="./index.js" as="script">
 </head>
 
 <body>
+  <div id="loadingBanner" style="display: none; position: fixed; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); color: white; text-align: center; padding: 20px; z-index: 9999;">
+    Loading, please wait...
+    </div>
   <div id="root">
     <header>
       <div style="position: fixed; right: 15px; z-index: 9999;">
-        <button class="btn-primary" onclick="generatePDF()">Generate PDF!</button>
-        <button class="btn-primary" onclick="toggleDarkMode()">Dark Mode</button>
+        <button id="addalltoPDFbtn" class="btn-primary hidden" onclick="addalltoPDF()">Add all Qs to PDF</button>
+        <button id="generatePDFbtn" class="btn-primary hidden" onclick="generatePDF()">Generate PDF!</button>
+        <button id="darkmodebtn" class="btn-primary" onclick="toggleDarkMode()">Dark Mode</button>
+        <button id="helpbtn" class="btn-secondary" onclick="toggleHelp()">Help</button>
       </div>
     </header>
     <div id="appContainer" class="h-full w-full">
@@ -111,24 +48,19 @@ function generatePDF() {
             <line x1="12" y1="8" x2="12" y2="16"></line>
             <line x1="8" y1="12" x2="16" y2="12"></line>
           </svg>
-          <h3 class="ms-2" style="color: red">Add a QuestionBank</h3>
+          <h3 class="ms-2" style="color: red">Choose a QuestionBank</h3>
         </div>
         <br>
         <hr>
         <br>
         <div id="topic-list"></div>
-        <!-- <div class="mt-2">
-          <h3>Choose your language below:</h3>
-        </div>
-        <div id="google_translate_element"></div>
-        <p><b>Notice:</b> It is advised to load the questionbank first and then select the language.</p> -->
       </div>
       <div id="right-col" class="flex flex-col bg-gray-100 p-2">
       </div>
       <div id="modal" class="fixed left-0 top-0 hidden flex h-full w-full items-center justify-center bg-black/70">
         <div class="flex h-full w-full md:h-3/4 md:w-3/4 flex-col border bg-gray-100 p-4">
           <div class="flex justify-between">
-            <h1>Add QuestionBank</h1>
+            <h1>Select QuestionBank</h1>
             <svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
               class="cursor-pointer text-primary" onclick="toggleModal()">
@@ -335,24 +267,52 @@ function generatePDF() {
                   <h4 class="ms-2">IB SEHS QuestionBank
                   </h4>
                 </div>
-                <!-- <div class="flex items-center mt-2">
-                  <button class="btn-primary flex items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                      fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                      stroke-linejoin="round" class="me-2">
-                      <circle cx="12" cy="12" r="10"></circle>
-                      <line x1="12" y1="8" x2="12" y2="16"></line>
-                      <line x1="8" y1="12" x2="16" y2="12"></line>
-                    </svg> Add
-                  </button>
-                  <input type="text" placeholder="Custom Question Source..."
-                    class="ms-2 p-2 flex-grow rounded">
-                </div> -->
               </div>
             </div>
           </div>
         </div>
       </div>
+      <div id="helpmenu" style="z-index: 99999;" class="fixed left-0 top-0 hidden flex h-full w-full items-center justify-center bg-black/70">
+        <div class="flex h-full w-full md:h-3/4 md:w-3/4 flex-col border bg-gray-100 p-4">
+          <div class="flex justify-between">
+            <h1>Help Menu & FAQ</h1>
+            <svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+              class="cursor-pointer text-primary" onclick="toggleHelp()">
+              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+              <line x1="9" y1="9" x2="15" y2="15"></line>
+              <line x1="15" y1="9" x2="9" y2="15"></line>
+            </svg>
+          </div>
+          <div class="m-0 mt-2 overflow-auto p-0 font-serif max-h-60vh">
+            <div class="font-sans">
+              <h3>· Where are QBv6 questions? This shit is old!</h3>
+              <br>
+              <p>We are going to add them soon. We are also students with busy lives. <b>Be patient!</b></p>
+              <br>
+              <h3>· I tried to save all the questions as PDF, and my computer got frozen!</h3>
+              <br>
+              <p>This is normal behavior and expected. It might take a minute or two to fully load the questions and render the PDF. It is also a very resource-intensive process, so just be patient. <b>To solve this issue, we provide full PDF QuestionBanks with markschemes for all subjects <a style="color:blue;" href="https://buzzheavier.com/5lzuu3dflxbs/" target="_blank">here</a>.</b></p>
+              <br>
+              <h3>· Some questions from the wrong topic are being added to the PDF!</h3>
+              <br>
+              <p>This happens when you uncheck a topic after having selected some questions for exporting to PDF on it. To solve that issue, <b>simply reload the page</b>.</p>
+              <br>
+              <h3>· I tried to load a questionbank, but nothing happened.</h3>
+              <br>
+              <p><b>Most likely it's a bug.</b> Try again until you see the "Loading, please wait..." banner on the bottom.<br>If you don't get any such banner after many tries, perhaps Cloudflare is blocked in your country? <b>Try using a VPN or download our offline version (zipped) <a style="color:blue" href="https://gitlab.com/ibdocs.2/pestlev3/-/archive/main/pestlev3-main.zip" target="_blank">here</a>.</b></p>
+              <br>
+              <h3>· I'm a developer and I want to contribute!</h3>
+              <br>
+              <p><b>The code for Mortar & Pestle is fully open source <a style="color:blue;" href="https://gitlab.com/ibdocs.2/pestlev3/" target="_blank">here</a></b>, feel free to submit pull requests or issues. Emails to <a style="color:blue" href="mailto:pirateib.qfz17@aleeas.com" target="_blank">pirateib.qfz17@aleeas.com</a> are also welcome with ideas/improvements, but please be specific and avoid trolling (DMCA, etc).</p>
+              <br>
+              <h3>· I'm a user and I want to reward you for your work!</h3>
+              <br>
+              <p>See <b><a style="color:blue;" href="https://t.me/pirateIBnew/215" target="_blank">this Telegram post</a></b> for info on how to contribute to pirateIB as a whole. TLDR: We want IB resources, not money.</p>
+            </div>
+          </div>
+        </div>
+      </div>
       <div id="markscheme" class="fixed left-0 top-0 hidden flex h-full w-full items-center justify-center bg-black/70">
         <div id="markscheme-box" class="flex h-full w-full md:h-3/4 md:w-3/4 flex-col border bg-gray-100 p-4">
           <div id="markscheme-box2" class="flex justify-between">
@@ -370,312 +330,7 @@ function generatePDF() {
 
     </div>
   </div>
-  <script>
-    let jsonDataFetched = false;
-    let jsonData = null;
-    let currentFileName = null;
-
-    function loadJSON(filename) {
-        fetch(`../assets/jsonqb/${filename}`)
-            .then(response => response.json())
-            .then(jsonData => {
-                jsonDataFetched = true
-                currentFileName = filename;
-
-                const allTopics = jsonData.flatMap(item => item.topics);
-                topics = [...new Set(allTopics)];
-                renderTopics();
-                
-                jsonData.forEach(item => {
-                    const question = item.Question;
-                    let questionid = item.question_id;
-                    const markscheme = item.Markscheme;
-                    const report = item['Examiners report'];
-                    const topics = item['topics'];
-                    const subtopics = item['subtopics'];
-
-                    const rightCol = document.getElementById("right-col");
-                    const msbox = document.getElementById("markscheme-box");
-                    const reportbox = document.getElementById("report-box")
-
-                    function toggleMScont(questionid) {
-                        const markschemeContainer = document.getElementById(`markscheme-${questionid} ${filename}`);
-                        toggleMSSvg.classList.toggle('hidden');
-                        markschemeContainer.classList.toggle('hidden');
-                    }
-                
-                    function toggleRepcont(questionid) {
-                        const reportContainer = document.getElementById(`report-${questionid} ${filename}`);
-                        toggleRepSvg.classList.toggle('hidden');
-                        reportContainer.classList.toggle('hidden');
-                    }
-                    
-                    const insertHTML = (htmlString, container) => {
-                        container.insertAdjacentHTML('beforeend', htmlString);
-                    }
-
-                    const bigQuestionBox = document.createElement("div");
-                    bigQuestionBox.id = questionid;
-                    topics.forEach(topic => {
-                        bigQuestionBox.classList.add(topic.trim());
-                    });
-                    subtopics.forEach(subtopic => {
-                        bigQuestionBox.classList.add(subtopic.trim());
-                    });
-                    bigQuestionBox.classList.add("hidden")
-                    rightCol.appendChild(bigQuestionBox);
-                    
-                    const h3 = document.createElement("h3");
-                    bigQuestionBox.appendChild(h3);
-                    insertHTML(questionid, h3);
-
-                    const h4_1 = document.createElement("h4");
-                    h4_1.innerHTML = `<b>Topics:</b> ${topics}`;
-                    bigQuestionBox.appendChild(h4_1);
-
-                    const h4_2 = document.createElement("h4");
-                    h4_2.innerHTML = `<b>Subtopics:</b> ${subtopics}`;
-                    bigQuestionBox.appendChild(h4_2);                 
-
-                    const p = document.createElement("p");
-                    bigQuestionBox.appendChild(p);
-
-                    const questionContainer = document.createElement("div");
-                    questionContainer.classList.add("square-container");
-                    bigQuestionBox.appendChild(questionContainer);
-
-                    const btnContainer = document.createElement("div");
-                    btnContainer.classList.add("btn-container");
-
-                    const markschemeBtn = document.createElement("button");
-                    markschemeBtn.classList.add("btn-secondary");
-                    markschemeBtn.textContent = "Markscheme";
-
-                    markschemeBtn.addEventListener('click', function() {
-                        toggleMS();
-                        toggleMScont(questionid);
-                    });
-                    
-                    const reportBtn = document.createElement("button");
-                    reportBtn.classList.add("btn-secondary");
-                    reportBtn.textContent = "Examiners report";
-
-                    reportBtn.addEventListener('click', function() {
-                        toggleR();
-                        toggleRepcont(questionid);
-                    });
-
-                    const addtopdfBtn = document.createElement("button");
-                    addtopdfBtn.classList.add("btn-secondary");
-                    addtopdfBtn.textContent = "Add to PDF";
-
-                    addtopdfBtn.addEventListener('click', function() {
-                      let selectedQuestionIds = JSON.parse(sessionStorage.getItem('selectedQuestionIds')) || [];
-                      const index = selectedQuestionIds.indexOf(questionid);
-                      if (index !== -1) {
-                          // if present, remove it
-                          selectedQuestionIds.splice(index, 1);
-                          addtopdfBtn.style.backgroundColor = '#55ad95';
-                          addtopdfBtn.textContent = 'Add to PDF';
-                      } else {
-                          // if not present, add it
-                          selectedQuestionIds.push(questionid);
-                          addtopdfBtn.style.backgroundColor = '#e03b3b';
-                          addtopdfBtn.textContent = 'Added!';
-                      }
-                      sessionStorage.setItem('selectedQuestionIds', JSON.stringify(selectedQuestionIds));
-                    });
-
-                    btnContainer.appendChild(markschemeBtn);
-                    btnContainer.appendChild(reportBtn);
-                    btnContainer.appendChild(addtopdfBtn);
-                    p.appendChild(btnContainer);
-
-                    insertHTML(question, questionContainer);
-
-                    if (markscheme) {
-                        const markschemeContainer = document.createElement("div");
-                        markschemeContainer.classList.add("square-container");
-                        markschemeContainer.classList.add("hidden");
-                        markschemeContainer.id = `markscheme-${questionid} ${filename}`;
-                        msbox.appendChild(markschemeContainer);
-                        insertHTML(markscheme, markschemeContainer);
-                    }
-
-                    if (report) {
-                        const reportContainer = document.createElement("div");
-                        reportContainer.classList.add("square-container");
-                        reportContainer.classList.add("hidden");
-                        reportContainer.id = `report-${questionid} ${filename}`;
-                        reportbox.appendChild(reportContainer);
-                        insertHTML(report, reportContainer);
-                    }
-                    const toggleMSSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-                    toggleMSSvg.id = `toggleMSSvg-${questionid}`;
-                    toggleMSSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-                    toggleMSSvg.setAttribute("width", "2rem");
-                    toggleMSSvg.setAttribute("height", "2rem");
-                    toggleMSSvg.setAttribute("viewBox", "0 0 24 24");
-                    toggleMSSvg.setAttribute("fill", "none");
-                    toggleMSSvg.setAttribute("stroke", "currentColor");
-                    toggleMSSvg.setAttribute("stroke-width", "2");
-                    toggleMSSvg.setAttribute("stroke-linecap", "round");
-                    toggleMSSvg.setAttribute("stroke-linejoin", "round");
-                    toggleMSSvg.classList.add("cursor-pointer");
-                    toggleMSSvg.classList.add("text-primary");
-                    toggleMSSvg.classList.add("hidden");
-                    toggleMSSvg.innerHTML = `
-                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                    <line x1="9" y1="9" x2="15" y2="15"></line>
-                    <line x1="15" y1="9" x2="9" y2="15"></line>
-                    `;
-                    const msbox2 = document.getElementById("markscheme-box2");
-                    msbox2.appendChild(toggleMSSvg);
-
-                    const toggleRepSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-                    toggleRepSvg.id = `toggleRepSvg-${questionid}`;
-                    toggleRepSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-                    toggleRepSvg.setAttribute("width", "2rem");
-                    toggleRepSvg.setAttribute("height", "2rem");
-                    toggleRepSvg.setAttribute("viewBox", "0 0 24 24");
-                    toggleRepSvg.setAttribute("fill", "none");
-                    toggleRepSvg.setAttribute("stroke", "currentColor");
-                    toggleRepSvg.setAttribute("stroke-width", "2");
-                    toggleRepSvg.setAttribute("stroke-linecap", "round");
-                    toggleRepSvg.setAttribute("stroke-linejoin", "round");
-                    toggleRepSvg.classList.add("cursor-pointer");
-                    toggleRepSvg.classList.add("text-primary");
-                    toggleRepSvg.classList.add("hidden");
-                    toggleRepSvg.innerHTML = `
-                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                    <line x1="9" y1="9" x2="15" y2="15"></line>
-                    <line x1="15" y1="9" x2="9" y2="15"></line>
-                    `;
-                    const repbox2 = document.getElementById("report-box2");
-                    repbox2.appendChild(toggleRepSvg);
-                    
-                    toggleMSSvg.addEventListener('click', function() {
-                    toggleMScont(questionid);
-                    toggleMS();
-                    });
-
-                    toggleRepSvg.addEventListener('click', function() {
-                    toggleRepcont(questionid);
-                    toggleR();
-                    });
-                    
-                    function updateSquareContainers() {
-                    const squareContainers = document.querySelectorAll('.square-container');
-
-                    squareContainers.forEach(container => {
-                        const children = container.children;
-
-                        if (children.length === 1 && children[0].classList.contains('question')) {
-                            children[0].classList.replace('question', 'specification');
-                        }
-                    });
-                    }
-                    updateSquareContainers();
-
-                });
-                
-
-            })
-            .catch(error => console.error('Error fetching JSON:', error));
-    }
-    
-    function renderTopics() {
-    const leftCol = document.getElementById('left-col');
-    topics.sort();
-    topics.forEach(topic => {
-        const label = document.createElement('label');
-        label.classList.add('topic-label');
-        
-        const checkbox = document.createElement('input');
-        checkbox.type = 'checkbox';
-        checkbox.name = 'topic';
-        checkbox.value = topic;
-
-        label.appendChild(checkbox);
-        label.appendChild(document.createTextNode(topic));
-
-        leftCol.appendChild(label);
-
-        checkbox.addEventListener('change', function() {
-            const topicDivs = document.querySelectorAll(`div[class^="${topic}"]`);
-            topicDivs.forEach(div => {
-                div.classList.toggle('hidden');
-            });
-        });
-        });
-    }
-
-    document.addEventListener('DOMContentLoaded', function () {
-    document.addEventListener('click', function (event) {
-        const clickedElement = event.target;
-        const id = clickedElement.id;
-
-        if (id) {
-            let filename;
-            if (id === 'bioqb') {
-                filename = 'Biology QB.json';
-            } else if (id === 'bmqb') {
-                filename = 'Business Management QB.json';
-            } else if (id === 'chemqb') {
-                filename = 'Chemistry QB.json';
-            } else if (id === 'compsciqb') {
-                filename = 'Computer Science QB.json';
-            } else if (id === 'destechqb') {
-                filename = 'Design Technology QB.json';
-            } else if (id === 'digsocqb') {
-                filename = 'Digital Society QB.json';
-            } else if (id === 'econqb') {
-                filename = 'Economics QB.json';
-            } else if (id === 'essqb') {
-                filename = 'ESS QB.json';
-            } else if (id === 'geoqb') {
-                filename = 'Geography QB.json';
-            } else if (id === 'histqb') {
-                filename = 'History QB.json';
-            } else if (id === 'mathaaqb') {
-                filename = 'Math AA QB.json';
-            } else if (id === 'mathaiqb') {
-                filename = 'Math AI QB.json';
-            } else if (id === 'phyqb') {
-                filename = 'Physics QB.json';
-            } else if (id === 'psychqb') {
-                filename = 'Psychology QB.json';
-            } else if (id === 'sehsqb') {
-                filename = 'SEHS QB.json';
-            }
-
-            if (filename) {
-                if (jsonDataFetched && filename !== currentFileName) {
-                      const rightCol = document.getElementById('right-col');
-                      rightCol.innerHTML = '';
-                      const topicLabels = document.querySelectorAll('.topic-label');
-                      topicLabels.forEach(label => label.remove());
-                      let selectedQuestionIds = []
-                      sessionStorage.setItem('selectedQuestionIds', JSON.stringify(selectedQuestionIds));
-                      loadJSON(filename);
-                    } else if (jsonDataFetched && filename == currentFileName) {
-                      const rightCol = document.getElementById('right-col');
-                      rightCol.innerHTML = '';
-                      const topicLabels = document.querySelectorAll('.topic-label');
-                      topicLabels.forEach(label => label.remove());
-                      jsonDataFetched = false;
-                      let selectedQuestionIds = []
-                      sessionStorage.setItem('selectedQuestionIds', JSON.stringify(selectedQuestionIds));
-                    } else if (!jsonDataFetched) {
-                      let selectedQuestionIds = []
-                      sessionStorage.setItem('selectedQuestionIds', JSON.stringify(selectedQuestionIds));
-                      loadJSON(filename);
-                }
-            }
-          }
-          });
-        });
-  </script>  
+  <script src="./index.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/app/index.js b/app/index.js
new file mode 100644
index 0000000..c1e15c0
--- /dev/null
+++ b/app/index.js
@@ -0,0 +1,552 @@
+let questionid="";
+window.onload = () => resetState();
+document.addEventListener('DOMContentLoaded', () => {
+    resetState();
+    jsonDataFetched = false;
+    });
+
+
+function toggleModal(){document.getElementById("modal").classList.toggle("hidden")}
+function toggleMS(){document.getElementById("markscheme").classList.toggle("hidden")}
+function toggleR(){document.getElementById("report").classList.toggle("hidden")}
+function toggleHelp(){document.getElementById("helpmenu").classList.toggle("hidden")}
+function toggleDownAllQs(){document.getElementById("addalltoPDFbtn").classList.remove('hidden');document.getElementById("generatePDFbtn").classList.remove('hidden')}
+
+
+function toggleDarkMode() {
+    var body = document.body;
+    var head = document.head;
+    var toggleButton = document.getElementById("darkmodebtn");
+    
+    if (localStorage.getItem("darkMode") === "disabled") {
+        body.classList.add("dark-mode");
+        head.classList.add("dark-mode");
+        localStorage.setItem("darkMode", "enabled");
+        toggleButton.innerText = "Light Mode";
+    } else {
+        body.classList.remove("dark-mode");
+        head.classList.remove("dark-mode");
+        localStorage.setItem("darkMode", "disabled");
+        toggleButton.innerText = "Dark Mode";
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    const darkModeStatus = localStorage.getItem("darkMode");
+    const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+    if (darkModeStatus === "enabled") {
+        document.body.classList.add("dark-mode");
+        document.head.classList.add("dark-mode");
+        document.getElementById("darkmodebtn").innerText = "Light Mode";
+    } else if (darkModeStatus === "disabled") {
+        document.body.classList.remove("dark-mode");
+        document.head.classList.remove("dark-mode");
+        document.getElementById("darkmodebtn").innerText = "Dark Mode";
+    } else if (prefersDarkScheme) {
+        document.body.classList.add("dark-mode");
+        document.head.classList.add("dark-mode");
+        document.getElementById("darkmodebtn").innerText = "Light Mode";
+        localStorage.setItem("darkMode", "enabled");
+    } else {
+        document.body.classList.remove("dark-mode");
+        document.head.classList.remove("dark-mode");
+        document.getElementById("darkmodebtn").innerText = "Dark Mode";
+        localStorage.setItem("darkMode", "disabled");
+    }
+});
+
+function startRandomTimerLoop() {
+    var randomTime = Math.floor(11 * Math.random()) + 20;
+    setTimeout(() => {
+        alert("Provided by pirateIB\nhttps://pirateib.xyz");
+        startRandomTimerLoop();
+    }, 60 * randomTime * 1000);
+}
+window.onload = function() {
+    setTimeout(() => {
+        startRandomTimerLoop();
+    }, 300000);
+};
+
+/*function generatePDF() {
+  const selectedQuestionIds = JSON.parse(sessionStorage.getItem("selectedQuestionIds")) || [];
+  if (0 === selectedQuestionIds.length) return alert("Select some questions first!");
+  const printWindow = window.open("", "_blank");
+  printWindow.document.write('\n <html>\n <head>\n <title>QuestionBank Test</title>\n <link rel="stylesheet" href="../assets/style.css">\n <style>\n @media print { body { overflow: hidden; } ::-webkit-scrollbar { display: none; } }\n </style>\n </head>\n <body>\n ');
+  let concatenatedHTML = "";
+  let markschemesHTML = '';
+  selectedQuestionIds.forEach((questionId => {
+    const questionDiv = document.getElementById(questionId),
+      h3 = questionDiv.querySelector("h3"),
+      squareContainer = questionDiv.querySelector(".square-container");
+    concatenatedHTML += h3.outerHTML + squareContainer.outerHTML
+    const msDiv = document.querySelector(`[id*="markscheme-${questionId}"]`);
+    const cloneMsDiv = msDiv.cloneNode(true);
+    cloneMsDiv.classList.remove('hidden');
+    markschemesHTML += h3.outerHTML + cloneMsDiv.outerHTML;
+  })), printWindow.document.write(`<h2>Questions</h2><br>${concatenatedHTML}<div style="page-break-after: always;"></div><h2>Markschemes</h2><br>${markschemesHTML}`), printWindow.document.write("\n </body>\n </html>\n "), printWindow.document.close();
+  setTimeout(() => {
+    printWindow.print(), printWindow.onafterprint = () => printWindow.close();
+  }, 1000);}*/
+
+function generatePDF() {
+  const selectedQuestionIds = JSON.parse(sessionStorage.getItem("selectedQuestionIds")) || [];
+  if (0 === selectedQuestionIds.length) return alert("Select some questions first!");
+
+  // Prompt the user for including markschemes
+  let includeMarkschemes = null;
+  while (includeMarkschemes !== "yes" && includeMarkschemes !== "no") {
+    includeMarkschemes = prompt("Do you want to include markschemes? (yes/no)").toLowerCase();
+    if (includeMarkschemes !== "yes" && includeMarkschemes !== "no") {
+      alert("Please answer 'yes' or 'no'.");
+    }
+  }
+
+  const printWindow = window.open("", "_blank");
+  printWindow.document.write('\n <html>\n <head>\n <title>QuestionBank Test</title>\n <link rel="stylesheet" href="../assets/style.css">\n <style>\n @media print { body { overflow: hidden; } ::-webkit-scrollbar { display: none; } }\n </style>\n </head>\n <body>\n ');
+
+  let concatenatedHTML = "";
+  let markschemesHTML = '';
+
+  selectedQuestionIds.forEach((questionId) => {
+    const questionDiv = document.getElementById(questionId),
+      h3 = questionDiv.querySelector("h3"),
+      squareContainer = questionDiv.querySelector(".square-container");
+    concatenatedHTML += h3.outerHTML + squareContainer.outerHTML;
+
+    if (includeMarkschemes === "yes") {
+      const msDiv = document.querySelector(`[id*="markscheme-${questionId}"]`);
+      const cloneMsDiv = msDiv.cloneNode(true);
+      cloneMsDiv.classList.remove('hidden');
+      markschemesHTML += h3.outerHTML + cloneMsDiv.outerHTML;
+    }
+  });
+
+  printWindow.document.write(`<h2>Questions</h2><br>${concatenatedHTML}`);
+  
+  if (includeMarkschemes === "yes") {
+    printWindow.document.write(`<div style="page-break-after: always;"></div><h2>Markschemes</h2><br>${markschemesHTML}`);
+  }
+
+  printWindow.document.write("\n </body>\n </html>\n ");
+  printWindow.document.close();
+
+  setTimeout(() => {
+    printWindow.print();
+    printWindow.onafterprint = () => printWindow.close();
+  }, 1000);
+}
+
+
+function addalltoPDF() {
+  const buttons = document.querySelectorAll('.btn-secondary');
+  buttons.forEach(button => {
+      if (button.textContent.trim() === "Add to PDF" && !button.parentElement.parentElement.classList.contains('hidden')) {
+          button.click();
+      }
+  });
+}
+
+let jsonDataFetched = false;
+let jsonData = null;
+let currentFileName = null;
+let topics = [];
+
+const domCache = {
+  rightCol: document.getElementById("right-col"),
+  msbox: document.getElementById("markscheme-box"),
+  reportbox: document.getElementById("report-box"),
+  msbox2: document.getElementById("markscheme-box2"),
+  repbox2: document.getElementById("report-box2"),
+  leftCol: document.getElementById('left-col')
+};
+
+document.addEventListener('keydown', (event) => {
+if (event.key === 'Escape') {
+  const modal = document.getElementById('modal');
+  const helpmenu = document.getElementById('helpmenu');
+  if (modal && !modal.classList.contains('hidden')) {
+    toggleModal();
+  } else if (helpmenu && !helpmenu.classList.contains('hidden'))  {
+    toggleHelp();
+  }
+  }
+});
+
+const fileNameMap = {
+  'bioqb': 'Biology QB.json',
+  'bmqb': 'Business Management QB.json',
+  'chemqb': 'Chemistry QB.json',
+  'compsciqb': 'Computer Science QB.json',
+  'destechqb': 'Design Technology QB.json',
+  'digsocqb': 'Digital Society QB.json',
+  'econqb': 'Economics QB.json',
+  'essqb': 'ESS QB.json',
+  'geoqb': 'Geography QB.json',
+  'histqb': 'History QB.json',
+  'mathaaqb': 'Math AA QB.json',
+  'mathaiqb': 'Math AI QB.json',
+  'phyqb': 'Physics QB.json',
+  'psychqb': 'Psychology QB.json',
+  'sehsqb': 'SEHS QB.json'
+};
+
+function createSVGElement(questionid) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  const attributes = {
+    "width": "2rem",
+    "height": "2rem",
+    "viewBox": "0 0 24 24",
+    "fill": "none",
+    "stroke": "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  };
+
+  Object.entries(attributes).forEach(([key, value]) => {
+    svg.setAttribute(key, value);
+  });
+
+  svg.classList.add("cursor-pointer", "text-primary", "hidden");
+  svg.innerHTML = `
+        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+        <line x1="9" y1="9" x2="15" y2="15"></line>
+        <line x1="15" y1="9" x2="9" y2="15"></line>
+    `;
+  return svg;
+}
+
+function showLoading() {
+    document.getElementById('loadingBanner').style.display = 'block';
+}
+
+function hideLoading() {
+    document.getElementById('loadingBanner').style.display = 'none';
+}
+
+function openDatabase() {
+    return new Promise((resolve, reject) => {
+        const request = indexedDB.open('myDatabase', 1);
+
+        request.onupgradeneeded = (event) => {
+            const db = event.target.result;
+            if (!db.objectStoreNames.contains('myStore')) {
+                db.createObjectStore('myStore');
+            }
+        };
+
+        request.onsuccess = (event) => {
+            resolve(event.target.result);
+        };
+
+        request.onerror = (event) => {
+            reject('Error opening database:', event.target.error);
+        };
+    });
+}
+
+async function loadJSON(filename) {
+    showLoading(); 
+    const db = await openDatabase();
+
+    const cachedData = await new Promise((resolve, reject) => {
+        const transaction = db.transaction('myStore', 'readonly');
+        const store = transaction.objectStore('myStore');
+        const request = store.get(filename);
+
+        request.onsuccess = (event) => {
+            resolve(event.target.result);
+        };
+
+        request.onerror = (event) => {
+            reject('Error fetching data from IndexedDB:', event.target.error);
+        };
+    });
+
+    if (cachedData) {
+        hideLoading();
+        processData(cachedData, filename);
+        return;
+    }
+
+    try {
+        const response = await fetch(`https://pub-59370068cd854c158959e7ca4578e5bd.r2.dev/${filename}`);
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        const data = await response.json();
+
+        await new Promise((resolve, reject) => {
+            const transaction = db.transaction('myStore', 'readwrite');
+            const store = transaction.objectStore('myStore');
+            const request = store.put(data, filename);
+
+            request.onsuccess = () => {
+                resolve();
+            };
+
+            request.onerror = (event) => {
+                reject('Error storing data in IndexedDB:', event.target.error);
+            };
+        });
+        sessionStorage.setItem('selectedQuestionIds', '[]');
+
+        setTimeout(() => {
+            processData(data, filename);
+            hideLoading();
+            sessionStorage.setItem('selectedQuestionIds', '[]');
+        }, 0);
+
+    } catch (error) {
+        console.error('Error fetching JSON:', error);
+        hideLoading();
+        sessionStorage.setItem('selectedQuestionIds', '[]');
+    }
+}
+
+
+
+function processData(data, filename) {
+      jsonDataFetched = true;
+      currentFileName = filename;
+
+      topics = [...new Set(data.flatMap(item => item.topics))].sort();
+      renderTopics();
+
+      const fragment = document.createDocumentFragment();
+
+      data.forEach(item => {
+        const {
+          Question: question,
+          question_id: questionid,
+          Markscheme: markscheme,
+          'Examiners report': report,
+          topics,
+          subtopics
+        } = item;
+
+        const bigQuestionBox = document.createElement("div");
+        bigQuestionBox.id = questionid;
+
+        const allClasses = [...topics.map(t => t.trim()),
+        ...subtopics.map(s => s.trim()),
+          "hidden"];
+        bigQuestionBox.classList.add(...allClasses);
+
+        const btnContainer = document.createElement("div");
+        btnContainer.classList.add("btn-container");
+
+        function toggleMScont(questionid) {
+          const markschemeContainer = document.getElementById(`markscheme-${questionid} ${currentFileName}`);
+          toggleMSSvg.classList.toggle('hidden');
+          markschemeContainer.classList.toggle('hidden');
+          activeQuestionId = markschemeContainer.classList.contains('hidden') ? null : questionid;
+        }
+
+        function toggleRepcont(questionid) {
+          const reportContainer = document.getElementById(`report-${questionid} ${currentFileName}`);
+          toggleRepSvg.classList.toggle('hidden');
+          reportContainer.classList.toggle('hidden');
+          activeQuestionId = reportContainer.classList.contains('hidden') ? null : questionid;
+        }
+
+        const buttons = [
+          { text: "Markscheme", handler: () => { toggleMS(); toggleMScont(questionid); } },
+          { text: "Examiners report", handler: () => { toggleR(); toggleRepcont(questionid); } },
+          { text: "Add to PDF", handler: createPDFButtonHandler(questionid) }
+        ].map(createButton);
+
+        buttons.forEach(button => btnContainer.appendChild(button));
+
+        const content = `
+                    <h3>${questionid}</h3>
+                    <h4><b>Topics:</b> ${topics.join(', ')}</h4>
+                    <h4><b>Subtopics:</b> ${subtopics.join(', ')}</h4>
+                    <div class="square-container">${question}</div>
+                `;
+
+        bigQuestionBox.innerHTML = content;
+        bigQuestionBox.querySelector('h3').after(btnContainer);
+
+        if (markscheme) {
+          createContainer('markscheme', questionid, filename, markscheme, domCache.msbox);
+        }
+
+        if (report) {
+          createContainer('report', questionid, filename, report, domCache.reportbox);
+        }
+
+        /********** Removed ID appending method since it was slowing down interaction with the X svg *********/
+
+        const toggleMSSvg = createSVGElement(questionid);
+        //toggleMSSvg.id = `toggleMSSvg-${questionid}`;
+
+        const toggleRepSvg = createSVGElement(questionid);
+        //toggleRepSvg.id = `toggleRepSvg-${questionid}`;
+
+        domCache.msbox2.appendChild(toggleMSSvg);
+        domCache.repbox2.appendChild(toggleRepSvg);
+
+        /*toggleMSSvg.addEventListener('click', () => {
+          toggleMScont(questionid);
+          toggleMS();
+        });*/
+        
+        /********** Identifying by active question instead  **********/
+        let activeQuestionId = null;
+
+        const handleToggle = () => {
+          if (activeQuestionId) {
+              const markschemeContainer = document.getElementById(`markscheme-${activeQuestionId} ${currentFileName}`);
+              const reportContainer = document.getElementById(`report-${activeQuestionId} ${currentFileName}`);
+
+              if (markschemeContainer && !markschemeContainer.classList.contains('hidden')) {
+                toggleMSSvg.classList.toggle('hidden');
+                toggleMS();
+                markschemeContainer.classList.toggle('hidden');
+                activeQuestionId = null;
+                
+              } else if (reportContainer && !reportContainer.classList.contains('hidden')) {
+                toggleRepSvg.classList.toggle('hidden');
+                toggleR();
+                reportContainer.classList.toggle('hidden');
+                activeQuestionId = null;
+              }
+            }
+        }
+
+        toggleMSSvg.addEventListener('click', handleToggle);
+        toggleRepSvg.addEventListener('click', handleToggle);
+        document.addEventListener('keydown', (event) => {
+          if (event.key === 'Escape') {
+            handleToggle();
+          }
+        });
+
+
+        /*toggleRepSvg.addEventListener('click', () => {
+          toggleRepcont(questionid);
+          toggleR();
+        });*/
+
+        fragment.appendChild(bigQuestionBox);
+      });
+
+      domCache.rightCol.appendChild(fragment);
+      updateSquareContainers();
+      toggleDownAllQs();
+
+}
+
+
+/******** Old function for fetching JSON, deprecated in favor of IndexedDB ********/
+/*function loadJSON(filename) {
+  fetch(`https://pub-59370068cd854c158959e7ca4578e5bd.r2.dev/${filename}`) // ../assets/jsonqb/
+    .then(response => response.json())
+    .then(data => {
+      jsonDataFetched = true;
+      currentFileName = filename;
+
+      topics = [...new Set(data.flatMap(item => item.topics))].sort();
+      renderTopics();
+
+      const fragment = document.createDocumentFragment();
+
+      data.forEach(item => {});
+
+      domCache.rightCol.appendChild(fragment);
+      updateSquareContainers();
+    })
+    .catch(error => console.error('Error fetching JSON:', error));
+}*/
+
+function createButton({ text, handler, className = 'btn-secondary' }) {
+  const button = document.createElement("button");
+  button.classList.add(className);
+  button.textContent = text;
+  button.addEventListener('click', handler);
+  return button;
+}
+
+function createPDFButtonHandler(questionid) {
+  return function () {
+    let selectedQuestionIds = JSON.parse(sessionStorage.getItem('selectedQuestionIds')) || [];
+    const index = selectedQuestionIds.indexOf(questionid);
+    if (index !== -1) {
+      selectedQuestionIds.splice(index, 1);
+      this.style.backgroundColor = 'rgb(66 165 245)';
+      this.textContent = 'Add to PDF';
+    } else {
+      selectedQuestionIds.push(questionid);
+      this.style.backgroundColor = '#e03b3b';
+      this.textContent = 'Added!';
+    }
+    sessionStorage.setItem('selectedQuestionIds', JSON.stringify(selectedQuestionIds));
+  };
+}
+
+function createContainer(type, questionid, filename, content, parent) {
+  const container = document.createElement("div");
+  container.classList.add("square-container", "hidden");
+  container.id = `${type}-${questionid} ${filename}`;
+  container.innerHTML = content;
+  parent.appendChild(container);
+}
+
+function renderTopics() {
+  const fragment = document.createDocumentFragment();
+
+  topics.forEach(topic => {
+    const label = document.createElement('label');
+    label.classList.add('topic-label');
+
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.name = 'topic';
+    checkbox.value = topic;
+
+    checkbox.addEventListener('change', () => {
+      document.querySelectorAll(`div[class*="${topic}"]`)
+        .forEach(div => div.classList.toggle('hidden'));
+    });
+
+    label.append(checkbox, topic);
+    fragment.appendChild(label);
+  });
+
+  domCache.leftCol.appendChild(fragment);
+}
+
+function updateSquareContainers() {
+  document.querySelectorAll('.square-container').forEach(container => {
+    const firstChild = container.children[0];
+    if (firstChild?.classList.contains('question')) {
+      firstChild.classList.replace('question', 'specification');
+    }
+  });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('click', event => {
+    const filename = fileNameMap[event.target.id];
+    if (!filename) return;
+
+    if (jsonDataFetched && filename !== currentFileName) {
+      resetState();
+      loadJSON(filename);
+    //} else if (jsonDataFetched && filename === currentFileName) {
+      //resetState();
+      //jsonDataFetched = false;
+    } else if (!jsonDataFetched) {
+      loadJSON(filename);
+    }
+  });
+});
+
+function resetState() {
+  domCache.rightCol.innerHTML = '';
+  document.querySelectorAll('.topic-label').forEach(label => label.remove());
+  sessionStorage.setItem('selectedQuestionIds', '[]');
+}
diff --git a/assets/index-0e5924d3.css b/assets/style.css
similarity index 96%
rename from assets/index-0e5924d3.css
rename to assets/style.css
index b0b26b5..46d9003 100644
--- a/assets/index-0e5924d3.css
+++ b/assets/style.css
@@ -254,6 +254,10 @@ video {
   display: none
 }
 
+.mainpage {
+  height: auto !important;
+}
+
 body,
 html,
 #root {
@@ -311,15 +315,15 @@ h4 {
 
 .btn-secondary {
   --tw-text-opacity: 1;
-  color: rgb(3 54 40 / var(--tw-text-opacity));
-  background-color: #55ad95
+  color: rgb(248 248 248 / var(--tw-text-opacity));
+  background-color: rgb(66 165 245 / var(--tw-text-opacity)); /*55ad95*/
 }
 
 .btn-secondary:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(85 173 149 / var(--tw-bg-opacity));
+  background-color: #42a2f5;
   --tw-text-opacity: 1;
-  color: rgb(248 248 248 / var(--tw-text-opacity))
+  color: rgb(0 0 0 / var(--tw-text-opacity))
 }
 
 #left-col {
@@ -343,6 +347,10 @@ h4 {
   position: relative;
 }
 
+#markscheme, #report, #modal {
+  z-index: 9999;
+}
+
 #markscheme-box, #report-box{
   min-height: 100%;
   overflow-y: scroll;
diff --git a/index.html b/index.html
index 969c37c..ee7a16e 100644
--- a/index.html
+++ b/index.html
@@ -1,43 +1,41 @@
+
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Mortar & Pestle</title>
-    <link rel="stylesheet" href="./assets/index-0e5924d3.css">
-    <script>
-        function toggleDarkMode() {
-          const body = document.body;
-          const button = document.querySelector('.btn-primary');
-          body.classList.toggle('dark-mode');
-      
-          if (body.classList.contains('dark-mode')) {
-            button.style.position = 'static';
-            button.style.zIndex = 'auto';
-          } else {
-            button.style.position = 'fixed';
-            button.style.zIndex = '9999';
-            button.style.right = '0';
-          }
-        }
-          </script>
+    <meta charset="UTF-8">
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mortar & Pestle | The Next Generation of Question Grinding</title>
+    <link rel="stylesheet" href="./assets/style.css">
+    <meta name="robots" content="index,follow">
+    <meta name="copyright" content="Public Domain">
+    <meta name="keywords" content="pestle, mortar, mortar & pestle, ib questionbank, pirateib">
+    <meta name="description" content="Practice IB Exam-Style Questions, create topic-wise tests, and much more!">
+    <meta property="og:locale" content="en_US">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="Mortar & Pestle | The Next Generation of Question Grinding">
+    <meta property="og:description" content="Practice IB Exam-Style Questions, create topic-wise tests, and much more!">
+    <meta property="og:url" content="https://pestle.pages.dev/">
+    <meta property="og:site_name" content="Mortar & Pestle">
+    <meta name="twitter:title" content="Mortar & Pestle | The Next Generation of Question Grinding">
+    <meta name="twitter:description" content="Practice IB Exam-Style Questions, create topic-wise tests, and much more!">
+    <script>function toggleDarkMode(){var e=document.body,d=document.head,t=document.getElementById("darkmodebtn");"disabled"===(localStorage.getItem("darkMode")||"disabled")?(e.classList.add("dark-mode"),d.classList.add("dark-mode"),localStorage.setItem("darkMode","enabled"),t.innerText="Light Mode"):(e.classList.remove("dark-mode"),d.classList.remove("dark-mode"),localStorage.setItem("darkMode","disabled"),t.innerText="Dark Mode")}document.addEventListener("DOMContentLoaded",(()=>{const e=localStorage.getItem("darkMode"),d=window.matchMedia("(prefers-color-scheme: dark)").matches;"enabled"===e?(document.body.classList.add("dark-mode"),document.head.classList.add("dark-mode"),document.getElementById("darkmodebtn").innerText="Light Mode"):"disabled"===e?(document.body.classList.remove("dark-mode"),document.head.classList.remove("dark-mode"),document.getElementById("darkmodebtn").innerText="Dark Mode"):d?(document.body.classList.add("dark-mode"),document.head.classList.add("dark-mode"),document.getElementById("darkmodebtn").innerText="Light Mode",localStorage.setItem("darkMode","enabled")):(document.body.classList.remove("dark-mode"),document.head.classList.remove("dark-mode"),document.getElementById("darkmodebtn").innerText="Dark Mode",localStorage.setItem("darkMode","disabled"))}));</script>
 </head>
 
 <body>
     <div id="root">
         <div class="me-auto ms-auto flex flex-col items-center p-4 pt-3" id="landingPage">
             <header class="flex w-full items-start" style="position: fixed">
-                <div style="position: fixed; right: 15px; z-index: 9999;"><button class="btn-primary" onclick="toggleDarkMode()">Dark Mode</button></div>
+                <div style="position: fixed; right: 15px; z-index: 9999;"><button id="darkmodebtn" class="btn-primary" onclick="toggleDarkMode()">Dark Mode</button></div>
             </header>
             <div>
                 <div style="text-align:center;"><h1><b>Mortar & Pestle</b></h1><br></div>
-                <h1>The <em>Next Generation</em> of Question Grinding</h1>
+                <h1 style="text-align:center;">The <em>Next Generation</em> of Question Grinding</h1>
             </div><br>
             <div class="mt-4" style="text-align:center;">
                 <h2>Practice IB Exam-Style Questions, create topic-wise tests, and much more!</h2><br>
-                <h2 style="color:orangered">Warning: This site is on early beta release, and it is <b>NOT</b> optimized for mobile.</h2>
+                <h2 style="color:orangered">Warning: This site is <b>NOT</b> optimized for mobile.</h2>
             </div>
             <br>
             <div class="p-3" style="text-align:center;"><a href="app/index.html"><button class="btn-primary"><h1>Start Grinding!</h1></button></a></div>
@@ -45,7 +43,7 @@
             <div class="mt-8 font-medium text-neutralVariant">
                 <h2>Features</h2>
             </div>
-            <section class="flex w-full justify-evenly pt-5">
+            <section class="flex w-full justify-evenly pt-5 text-center">
                 <div class="flex shrink grow basis-0 flex-col items-center">
                     <div class="rounded-full bg-secondary/30 p-2"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                             height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
@@ -73,16 +71,16 @@
                 <div class="flex shrink grow basis-0 flex-col items-center">
                     <div class="rounded-full bg-gray-400/30 p-2"><img src="./assets/anon.svg"
                             alt="anonymous image"></div>
-                    <div class="font-medium text-gray-500">No trackers/cookies</div>
+                    <div class="font-medium text-gray-500">No trackers / cookies</div>
                 </div>
             </section>
             <br>
         </div>
 
         <footer class="mt-16 flex flex-col text-center">
-            <p><a href="http://pirateib.net">Made by pirateIB</a></p>
+            <p><a href="https://pirateib.xyz">Made by pirateIB</a></p>
         </footer>
         
     </div>
 </body>
-</html>
\ No newline at end of file
+</html>