diff --git a/src/combined.html b/src/combined.html
index 21c7113..6c9b7f1 100644
--- a/src/combined.html
+++ b/src/combined.html
@@ -97,6 +97,7 @@ <h1>Indexing For Near-Sorted Data in Action</h1>
                         <select id="cmp-select-index-1" class="f-i" style="width:250px; text-align: left;">
                             <option value="Tail">Tail leaf optimization</option>
                             <option value="lil">Last-Insertion-Leaf</option>
+                            <option value="BPlusTree">B+ Tree</option>
                             <option value="QuIT">QuIT</option>
                             <option value="SWARE" selected>SWARE</option>
                         </select>
@@ -107,6 +108,7 @@ <h1>Indexing For Near-Sorted Data in Action</h1>
                         <select id="cmp-select-index-2" class="f-i" style="width:250px; text-align: left;">
                             <option value="Tail">Tail leaf optimization</option>
                             <option value="lil">Last-Insertion-Leaf</option>
+                            <option value="BPlusTree">B+ Tree</option>
                             <option value="QuIT" selected>QuIT</option>
                             <option value="SWARE">SWARE</option>
                         </select>
@@ -248,6 +250,17 @@ <h1>Indexing For Near-Sorted Data in Action</h1>
                                 </div>
                             </div>
                         </div>
+                        <div id="structure-panel-bplus" class="panel structure-panel animation-column">
+                            <div class="panel-h">
+                                <span class="panel-t">B+ Tree</span>
+                                <span class="tag a">Tree-based</span>
+                            </div>
+                            <div id="bplus-box" class="tree-container quit-bplus-tree panel-box">
+                                <div class="quit-tree-grid" id="bplus-tree-grid">
+                                    <svg class="quit-tree-links" id="bplus-tree-links"></svg>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
 
@@ -623,6 +636,7 @@ <h3><a target="_blank" href="https://cs-people.bu.edu/mathan/">
     <script type="text/javascript" src="js/algorithms/quit.js"></script>
     <script type="text/javascript" src="js/algorithms/lil.js"></script>
     <script type="text/javascript" src="js/algorithms/tail.js"></script>
+    <script type="text/javascript" src="js/algorithms/b_plus_tree.js"></script>
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <script type="text/javascript">
         if (typeof google !== 'undefined' && google.charts && typeof google.charts.load === 'function') {
@@ -693,4 +707,4 @@ <h3><a target="_blank" href="https://cs-people.bu.edu/mathan/">
     <script src="js/packages/script.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/src/css/redesign.css b/src/css/redesign.css
index 56a365d..2ec2160 100644
--- a/src/css/redesign.css
+++ b/src/css/redesign.css
@@ -723,48 +723,48 @@
     box-shadow: 0 0 0 1px rgba(31, 95, 191, 0.12);
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) {
     gap: 16px;
     min-height: 100%;
     padding: 8px 2px 12px;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-tree-link-path {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-link-path {
     stroke: var(--border-s);
     stroke-width: 1;
     opacity: 1;
     filter: none;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-tree-link-path.quit-tree-link-fast {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-link-path.quit-tree-link-fast {
     stroke: var(--grn);
     stroke-width: 1.8;
     filter: none;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-tree-link-path.quit-tree-link-path-active {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-link-path.quit-tree-link-path-active {
     stroke: var(--red);
     stroke-width: 1.8;
     filter: none;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-tree-row {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-row {
     gap: 9px;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-slot {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-slot {
     width: 82px;
     min-height: 70px;
     max-width: 82px;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-tree-row.quit-row-layer-ellipsis .quit-node-slot {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-row.quit-row-layer-ellipsis .quit-node-slot {
     width: calc((5 * 82px) + (4 * 9px));
     max-width: calc((5 * 82px) + (4 * 9px));
     min-height: 74px;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-ellipsis {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-ellipsis {
     border: 1px dashed var(--border);
     border-radius: 4px;
     background: var(--white);
@@ -774,22 +774,22 @@
     font-size: 0.72rem;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-ellipsis.quit-ellipsis-path-active {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-ellipsis.quit-ellipsis-path-active {
     border-color: var(--red);
     background: var(--red-l);
     color: var(--red);
     box-shadow: 0 0 0 1px rgba(201, 42, 42, 0.14);
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-layer-ellipsis {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-layer-ellipsis {
     min-height: calc(56px + (var(--quit-layer-span, 1) * 8px));
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-layer-dot-line {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-layer-dot-line {
     letter-spacing: 0.16em;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card {
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -802,62 +802,62 @@
     text-align: center;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.internal,
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.leaf {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.internal,
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.leaf {
     border-color: var(--border);
     background: var(--white);
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.root {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.root {
     border-color: var(--grn);
     border-width: 2px;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-pole-node {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node {
     border-color: var(--amb);
     background: var(--amb-l);
     box-shadow: none;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.sware-tail-node {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.sware-tail-node {
     border-color: #7ea3bf;
     background: #f7fbff;
     box-shadow: none;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-path-active {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-path-active {
     border-color: var(--red);
     box-shadow: 0 0 0 2px rgba(201, 42, 42, 0.12);
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-fast-active {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-fast-active {
     border-color: var(--grn);
     background: var(--grn-p);
     box-shadow: 0 0 0 2px rgba(21, 101, 58, 0.12);
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active {
     border-color: var(--grn);
     background: #eef8f2;
     box-shadow: 0 0 0 2px rgba(21, 101, 58, 0.16);
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-node-header,
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-node-range,
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-key-cell,
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-leaf-pointer {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-node-header,
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-node-range,
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-key-cell,
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-leaf-pointer {
     color: var(--grn);
     font-weight: 500;
     text-shadow: none;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-key-empty {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-key-empty {
     border-color: var(--grn-br);
     background: rgba(255, 255, 255, 0.8);
     color: var(--t3);
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-header {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-header {
     font-family: var(--mono);
     font-size: 0.5rem;
     font-weight: 600;
@@ -868,23 +868,23 @@
     border-bottom: none;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-pole-node .quit-node-header {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node .quit-node-header {
     color: var(--amb);
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.sware-tail-node .quit-node-header {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.sware-tail-node .quit-node-header {
     color: #547c9a;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-fast-active .quit-node-header {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-fast-active .quit-node-header {
     color: var(--grn);
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-path-active .quit-node-header {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-path-active .quit-node-header {
     color: var(--red);
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-range {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-range {
     font-family: var(--mono);
     font-size: 0.62rem;
     font-weight: 500;
@@ -893,7 +893,7 @@
     padding: 0;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-keys {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-keys {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
@@ -902,7 +902,7 @@
     min-height: 0;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-key-cell {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-key-cell {
     width: auto;
     min-width: 0;
     height: auto;
@@ -918,21 +918,21 @@
     overflow: visible;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-key-empty {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-key-empty {
     background: var(--white);
     border-style: dashed;
     color: var(--t3);
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-fast-active .quit-key-cell {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-fast-active .quit-key-cell {
     border-color: var(--grn-br);
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-path-active .quit-key-cell {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-path-active .quit-key-cell {
     border-color: #f0b6b6;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-leaf-pointer {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-leaf-pointer {
     margin-top: 3px;
     padding: 0;
     border-top: none;
@@ -942,7 +942,7 @@
     text-transform: uppercase;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .sware-tail-dots-card {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .sware-tail-dots-card {
     border-color: var(--border);
     background: var(--white);
     color: var(--t3);
@@ -950,7 +950,7 @@
     letter-spacing: 0.12em;
 }
 
-.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .sware-tail-dots-card.sware-tail-dots-fast {
+.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .sware-tail-dots-card.sware-tail-dots-fast {
     border-color: var(--grn-br);
     background: var(--grn-p);
     color: var(--grn);
@@ -1111,17 +1111,17 @@
         margin-left: 0;
     }
 
-    .redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-tree-row {
+    .redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-row {
         gap: 6px;
     }
 
-    .redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-slot {
+    .redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-slot {
         width: 74px;
         min-height: 66px;
         max-width: 74px;
     }
 
-    .redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-tree-row.quit-row-layer-ellipsis .quit-node-slot {
+    .redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-row.quit-row-layer-ellipsis .quit-node-slot {
         width: calc((5 * 74px) + (4 * 6px));
         max-width: calc((5 * 74px) + (4 * 6px));
         min-height: 70px;
diff --git a/src/css/styles.css b/src/css/styles.css
index 35894fa..49549cd 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -2227,7 +2227,7 @@ h4.workload-title::after {
     overflow: hidden;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) {
     position: relative;
     display: flex;
     flex-direction: column;
@@ -2243,7 +2243,7 @@ h4.workload-title::after {
     min-width: 100%;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-tree-links {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-links {
     position: absolute;
     top: 0;
     left: 0;
@@ -2251,7 +2251,7 @@ h4.workload-title::after {
     z-index: 0;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-tree-link-path {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-link-path {
     fill: none;
     stroke: #62798f;
     stroke-width: 1.1;
@@ -2260,7 +2260,7 @@ h4.workload-title::after {
     opacity: 0.9;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-tree-link-path.quit-tree-link-fast {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-link-path.quit-tree-link-fast {
     stroke: #1b9d4d;
     stroke-width: 2.8;
     opacity: 1;
@@ -2268,7 +2268,7 @@ h4.workload-title::after {
     animation: quit-fast-link-pulse 220ms ease-out;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-tree-link-path.quit-tree-link-path-active {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-link-path.quit-tree-link-path-active {
     stroke: #cf2f2f;
     stroke-width: 2.2;
     opacity: 1;
@@ -2287,7 +2287,7 @@ h4.workload-title::after {
     }
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-tree-row {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-row {
     display: grid;
     grid-template-columns: repeat(var(--quit-cols, 1), max-content);
     justify-content: center;
@@ -2297,24 +2297,24 @@ h4.workload-title::after {
     z-index: 1;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-tree-row.quit-row-layer-ellipsis {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-row.quit-row-layer-ellipsis {
     grid-template-columns: max-content;
     justify-content: center;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-slot {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-slot {
     width: 84px;
     min-height: 62px;
     max-width: 84px;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-tree-row.quit-row-layer-ellipsis .quit-node-slot {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-row.quit-row-layer-ellipsis .quit-node-slot {
     width: calc((5 * 84px) + (4 * 8px));
     max-width: calc((5 * 84px) + (4 * 8px));
     min-height: 76px;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-ellipsis {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-ellipsis {
     width: 100%;
     height: 100%;
     border: 1px dashed #7f8fa0;
@@ -2329,19 +2329,19 @@ h4.workload-title::after {
     color: #617487;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-ellipsis.quit-ellipsis-path-active {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-ellipsis.quit-ellipsis-path-active {
     border-color: #cf2f2f;
     background: rgba(255, 244, 244, 0.9);
     color: #8f1f1f;
     box-shadow: 0 0 0 2px rgba(207, 47, 47, 0.45), 0 0 14px rgba(207, 47, 47, 0.3);
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-layer-ellipsis {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-layer-ellipsis {
     min-height: calc(42px + (var(--quit-layer-span, 1) * 8px));
     padding: 4px 0;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-layer-dot-stack {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-layer-dot-stack {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -2349,11 +2349,11 @@ h4.workload-title::after {
     line-height: 1;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-layer-dot-line {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-layer-dot-line {
     letter-spacing: 1px;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card {
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -2364,31 +2364,31 @@ h4.workload-title::after {
     overflow: hidden;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.internal {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.internal {
     border-color: #3e607f;
     background: linear-gradient(180deg, #f4f9ff 0%, #dbe8f5 100%);
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.leaf {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.leaf {
     border-color: #3e607f;
     background: linear-gradient(180deg, #f4f9ff 0%, #dbe8f5 100%);
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.root {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.root {
     border-width: 2px;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-pole-node {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node {
     border-color: #c89a12;
     background: linear-gradient(180deg, #fff9d6 0%, #f3e08a 100%);
     box-shadow: 0 0 0 2px rgba(200, 154, 18, 0.52), 0 0 14px rgba(200, 154, 18, 0.3);
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-pole-node .quit-node-header {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node .quit-node-header {
     color: #7a5b00;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-header {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-header {
     font-family: "Courier New", Courier, monospace;
     font-size: 8px;
     font-weight: 700;
@@ -2398,7 +2398,7 @@ h4.workload-title::after {
     letter-spacing: 0.1px;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-range {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-range {
     font-family: "Courier New", Courier, monospace;
     font-size: 7px;
     font-weight: 700;
@@ -2406,7 +2406,7 @@ h4.workload-title::after {
     padding: 2px 4px 0 4px;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-keys {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-keys {
     display: grid;
     grid-template-columns: repeat(var(--quit-key-columns, 4), minmax(0, 1fr));
     gap: 2px;
@@ -2415,7 +2415,7 @@ h4.workload-title::after {
     min-height: calc((var(--quit-key-rows, 1) * 12px) + ((var(--quit-key-rows, 1) - 1) * 2px));
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-key-cell {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-key-cell {
     min-width: 0;
     width: 100%;
     height: 12px;
@@ -2433,13 +2433,13 @@ h4.workload-title::after {
     overflow: hidden;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-key-empty {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-key-empty {
     color: #7f8b99;
     border-style: dashed;
     background: rgba(255, 255, 255, 0.55);
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-leaf-pointer {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-leaf-pointer {
     margin-top: auto;
     border-top: 1px dashed rgba(58, 93, 126, 0.45);
     padding: 1px 4px 2px 4px;
@@ -2450,15 +2450,15 @@ h4.workload-title::after {
     text-transform: uppercase;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-path-active {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-path-active {
     box-shadow: 0 0 0 2px rgba(207, 47, 47, 0.55), 0 0 16px rgba(207, 47, 47, 0.35);
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-fast-active {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-fast-active {
     box-shadow: 0 0 0 2px rgba(37, 156, 78, 0.55), 0 0 16px rgba(37, 156, 78, 0.35);
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active {
     border-color: #178f43;
     background: linear-gradient(180deg, #f4fff8 0%, #ddf6e8 100%);
     box-shadow:
@@ -2468,55 +2468,55 @@ h4.workload-title::after {
     animation: quit-fast-pole-pulse 220ms ease-out;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-node-header,
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-node-range,
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-key-cell,
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-leaf-pointer {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-node-header,
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-node-range,
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-key-cell,
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-leaf-pointer {
     color: #0f6a30;
     font-weight: 800;
     text-shadow: 0 0 5px rgba(27, 157, 77, 0.25);
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-node-header {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-node-header {
     border-bottom-color: rgba(23, 143, 67, 0.55);
     box-shadow: inset 0 -1px 0 rgba(23, 143, 67, 0.55);
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-key-cell {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-key-cell {
     border-color: #1b9d4d;
     box-shadow: inset 0 0 0 1px rgba(27, 157, 77, 0.65);
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-key-empty {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-key-empty {
     border-color: rgba(27, 157, 77, 0.5);
     background: rgba(230, 248, 237, 0.9);
     color: rgba(15, 106, 48, 0.7);
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-leaf-pointer {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-leaf-pointer {
     border-top-color: rgba(23, 143, 67, 0.55);
     box-shadow: inset 0 1px 0 rgba(23, 143, 67, 0.55);
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.sware-tail-node {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.sware-tail-node {
     border-color: #2e5f8a;
     box-shadow: 0 0 0 2px rgba(46, 95, 138, 0.55), 0 0 14px rgba(46, 95, 138, 0.34);
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.sware-tail-node .quit-node-header {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.sware-tail-node .quit-node-header {
     color: #1f4f79;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.sware-tail-node.quit-path-active {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.sware-tail-node.quit-path-active {
     border-color: #cf2f2f;
     box-shadow: 0 0 0 2px rgba(207, 47, 47, 0.55), 0 0 16px rgba(207, 47, 47, 0.35);
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-card.sware-tail-node.quit-path-active .quit-node-header {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.sware-tail-node.quit-path-active .quit-node-header {
     color: #202f3f;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .sware-tail-dots-card {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .sware-tail-dots-card {
     border-color: #7f8fa0;
     background: rgba(247, 250, 255, 0.85);
     color: #617487;
@@ -2524,7 +2524,7 @@ h4.workload-title::after {
     letter-spacing: 1px;
 }
 
-:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .sware-tail-dots-card.sware-tail-dots-fast {
+:is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .sware-tail-dots-card.sware-tail-dots-fast {
     border-color: #178f43;
     background: rgba(235, 251, 241, 0.95);
     color: #178f43;
@@ -2595,24 +2595,24 @@ h4.workload-title::after {
         height: 50px;
     }
 
-    :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-tree-row {
+    :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-row {
         grid-template-columns: repeat(var(--quit-cols, 1), max-content);
         gap: 8px;
     }
 
-    :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-slot {
+    :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-slot {
         width: 76px;
         min-height: 60px;
         max-width: 76px;
     }
 
-    :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-tree-row.quit-row-layer-ellipsis .quit-node-slot {
+    :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-row.quit-row-layer-ellipsis .quit-node-slot {
         width: calc((5 * 76px) + (4 * 8px));
         max-width: calc((5 * 76px) + (4 * 8px));
         min-height: 70px;
     }
 
-    :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid) .quit-node-ellipsis {
+    :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-ellipsis {
         font-size: 12px;
     }
 }
\ No newline at end of file
diff --git a/src/js/algorithms/b_plus_tree.js b/src/js/algorithms/b_plus_tree.js
new file mode 100644
index 0000000..825d759
--- /dev/null
+++ b/src/js/algorithms/b_plus_tree.js
@@ -0,0 +1,240 @@
+class BTree {
+    constructor(t) {
+        this.t = t;
+        this.root = new Node(t, true);
+        this.internalSize = calculate_internal(t);
+        this.fastInserts = 0;
+        this.topInserts = 0;
+        this.size = 0;
+    }
+    insert(page)
+    {
+        this.size++;
+        this.topInserts++;
+        let pageLeaf = this.root;
+        let temp;
+        let stop;
+        let tempNode;
+        while(!(pageLeaf.leaf))
+        {
+            stop = false
+            for(let i = 0;i<pageLeaf.keys.length&&!stop;i++)
+            {
+                if(page<pageLeaf.keys[i])
+                {
+                    stop = true;
+                    temp = i;
+                }
+            }
+            if(!stop)
+            {
+                temp = pageLeaf.keys.length;
+            }
+            pageLeaf = pageLeaf.children[temp];
+        }
+        if(pageLeaf.n<this.t)
+        {
+            this.insertInOrder(page,pageLeaf.keys);
+            pageLeaf.n++;
+        }
+        else{
+            this.insertInOrder(page,pageLeaf.keys);
+            pageLeaf.n++;
+            do
+            {
+                tempNode = this.split(pageLeaf);
+                pageLeaf = tempNode;
+            }
+            while(pageLeaf.n>pageLeaf.t);
+        }
+    }
+    insertInOrder(page,array)
+    {
+        let temp;
+        let stop = false;
+        if(page<array[0])
+        {
+            stop = true;
+            temp = 0;
+        }
+        for(let i = 0; i < array.length - 1 && !stop; i++)
+        {
+            if(page > array[i] && page < array[i+1])
+            {
+                stop = true;
+                temp = i + 1;
+            }
+           
+        }
+        if(!stop)
+        {
+            temp = array.length;
+        }
+        array.splice(temp, 0, page);
+        return temp;
+    }
+    split(pageLeaf)
+    {
+        if(pageLeaf.leaf == true)
+        {
+            if(pageLeaf.parent == null)
+            {
+                let newParent = new Node(this.internalSize,false);
+                let splitNode = new Node(pageLeaf.t,true);
+                let mid = Math.floor(pageLeaf.n/2);
+                splitNode.n = pageLeaf.n - mid;
+                pageLeaf.n = mid;
+                const left = (pageLeaf.keys).slice(0,mid);
+                const right = (pageLeaf.keys).slice(mid);
+                pageLeaf.keys = left;
+                splitNode.keys = right;
+                splitNode.next = pageLeaf.next;
+                pageLeaf.next = splitNode;
+                //console.log(splitNode.keys[0]);
+                newParent.keys[0] = splitNode.keys[0];
+                newParent.children[0] = pageLeaf;
+                newParent.children[1] = splitNode;
+                newParent.n = 1;
+                pageLeaf.parent = newParent;
+                splitNode.parent = newParent;
+                this.root = newParent;
+                return newParent;
+            }
+            else
+            {
+                //console.log("true");
+                let splitNode = new Node(pageLeaf.t,true);
+                let mid = Math.floor(pageLeaf.n/2);
+                splitNode.n = pageLeaf.n - mid;
+                pageLeaf.n = mid;
+                const left = (pageLeaf.keys).slice(0,mid);
+                const right = (pageLeaf.keys).slice(mid);
+                pageLeaf.keys = left;
+                splitNode.keys = right;
+                splitNode.next = pageLeaf.next;
+                pageLeaf.next = splitNode;
+                splitNode.parent = pageLeaf.parent;
+                let index = this.insertInOrder(splitNode.keys[0], pageLeaf.parent.keys);
+                pageLeaf.parent.children.splice(index+1, 0, splitNode);
+                pageLeaf.parent.n++;
+                return pageLeaf.parent;
+            }
+        }
+        else
+        {
+            if(pageLeaf.parent == null)
+            {
+                let newParent = new Node(this.internalSize,false);
+                let splitNode = new Node(this.internalSize,false);
+                let mid = Math.floor(pageLeaf.n/2);
+                splitNode.n = pageLeaf.n - mid-1;
+                pageLeaf.n = mid;
+                newParent.keys[0] = pageLeaf.keys[mid];
+                const left = (pageLeaf.keys).slice(0,mid);
+                const right = (pageLeaf.keys).slice(mid+1);
+                pageLeaf.keys = left;
+                splitNode.keys = right;
+                splitNode.next = pageLeaf.next;
+                pageLeaf.next = splitNode;
+                //console.log(splitNode.keys[0]);
+                const leftChild = (pageLeaf.children).slice(0,mid+1);
+                const rightChild = (pageLeaf.children).slice(mid+1);
+                pageLeaf.children = leftChild;
+                splitNode.children = rightChild;
+                for(let i = 0;i<rightChild.length;i++)
+                {
+                    rightChild[i].parent = splitNode;
+                }
+                newParent.children[0] = pageLeaf;
+                newParent.children[1] = splitNode;
+                newParent.n = 1;
+                pageLeaf.parent = newParent;
+                splitNode.parent = newParent;
+                this.root = newParent;
+                return newParent;
+            }
+            else
+            {
+                //not done
+                console.log("true");
+                let splitNode = new Node(this.internalSize,false);
+                let mid = Math.floor(pageLeaf.n/2);
+                splitNode.n = pageLeaf.n - mid-1;
+                pageLeaf.n = mid;
+                const middle = pageLeaf.keys[mid];
+                const left = (pageLeaf.keys).slice(0,mid);
+                const right = (pageLeaf.keys).slice(mid+1);
+                pageLeaf.keys = left;
+                splitNode.keys = right;
+                splitNode.next = pageLeaf.next;
+                pageLeaf.next = splitNode;
+                const leftChild = (pageLeaf.children).slice(0,mid+1);
+                const rightChild = (pageLeaf.children).slice(mid+1);
+                splitNode.parent = pageLeaf.parent;
+                pageLeaf.children = leftChild;
+                splitNode.children = rightChild;
+                for(let i = 0;i<rightChild.length;i++)
+                {
+                    rightChild[i].parent = splitNode;
+                }
+                let index = this.insertInOrder(middle, pageLeaf.parent.keys);
+                pageLeaf.parent.children.splice(index+1, 0, splitNode);
+                pageLeaf.parent.n++;
+                return pageLeaf.parent;
+            }
+        }
+    }
+
+
+   
+}
+
+function renderBPlusTree(pathNodes)
+{
+    renderAuxiliaryTree(
+        bPlusTree,
+        "bplus-tree-grid",
+        "bplus-tree-links",
+        null,
+        null,
+        pathNodes || [],
+        [],
+        {
+            preferMiddleLeafNodes: true,
+            showFocusNode: false
+        }
+    );
+}
+
+function initializeBPlusVisualization()
+{
+    renderBPlusTree([]);
+}
+
+function runBPlusPhase()
+{
+    return new Promise((resolve) => {
+        if (!Array.isArray(bplus_data) || bplus_data.length === 0) {
+            resolve();
+            return;
+        }
+
+        const page = bplus_data[0];
+        renderBPlusTree(findAuxiliaryPath(bPlusTree, page));
+
+        const commitDelay = Math.max(0, Math.floor(delay * 0.2));
+        const commitInsert = () => {
+            bPlusTree.insert(page);
+            bplus_data.shift();
+            renderBPlusTree([]);
+            resolve();
+        };
+
+        if (commitDelay === 0) {
+            commitInsert();
+            return;
+        }
+
+        setTimeout(commitInsert, commitDelay);
+    });
+}
diff --git a/src/js/algorithms/quit.js b/src/js/algorithms/quit.js
index 2ff80f9..771885b 100644
--- a/src/js/algorithms/quit.js
+++ b/src/js/algorithms/quit.js
@@ -945,25 +945,31 @@ function createAuxiliaryNodeCard(node, depth, range, isPathNode, isFastNode, has
     return card;
 }
 
-function getAuxiliaryDisplayRows(tree, levels, insertionPath, pathSet, focusLeaf)
+function getAuxiliaryDisplayRows(tree, levels, insertionPath, pathSet, focusLeaf, options)
 {
     const displayRows = [];
     if (!levels || levels.length === 0) {
         return displayRows;
     }
 
-    const focusPath = getPathFromRoot(focusLeaf || (insertionPath.length > 0 ? insertionPath[insertionPath.length - 1] : null));
+    const renderOptions = options || {};
+    const preferMiddleLeafNodes = renderOptions.preferMiddleLeafNodes === true;
+    const focusPath = preferMiddleLeafNodes
+        ? []
+        : getPathFromRoot(focusLeaf || (insertionPath.length > 0 ? insertionPath[insertionPath.length - 1] : null));
     const visibleLevels = getQuitVisibleLevelIndexes(levels.length);
 
     for (let i = 0; i < visibleLevels.length; i++) {
         const level = visibleLevels[i];
         const nodes = levels[level];
         const isLeafLevel = nodes.length > 0 && nodes[0].leaf;
-        const focusNode = isLeafLevel ? (focusPath[level] || insertionPath[level] || null) : null;
+        const focusNode = (isLeafLevel && !preferMiddleLeafNodes)
+            ? (focusPath[level] || insertionPath[level] || null)
+            : null;
         displayRows.push({
             type: "level",
             levelIndex: level,
-            items: compressQuitLevel(nodes, focusNode, !isLeafLevel)
+            items: compressQuitLevel(nodes, focusNode, !isLeafLevel || preferMiddleLeafNodes)
         });
 
         if (i < visibleLevels.length - 1) {
@@ -992,19 +998,21 @@ function hasVisibleNextLeafAuxiliary(displayItems, currentIndex)
     return false;
 }
 
-function renderAuxiliaryTree(tree, gridId, linksId, focusNode, focusLabel, pathNodes, fastNodes)
+function renderAuxiliaryTree(tree, gridId, linksId, focusNode, focusLabel, pathNodes, fastNodes, options)
 {
     const grid = document.getElementById(gridId);
     if (!grid) {
         return;
     }
 
+    const renderOptions = options || {};
     const levels = collectAuxiliaryLevels(tree);
     const pathSet = new Set(pathNodes || []);
     const fastSet = new Set(fastNodes || []);
-    const displayRows = getAuxiliaryDisplayRows(tree, levels, pathNodes || [], pathSet, focusNode);
+    const displayRows = getAuxiliaryDisplayRows(tree, levels, pathNodes || [], pathSet, focusNode, renderOptions);
     const nodeSlotMap = new Map();
     const visualRows = getAuxiliaryStructureRows(gridId);
+    const showFocusNode = renderOptions.showFocusNode !== false;
 
     const rangeMap = new Map();
     if (tree && tree.root) {
@@ -1089,8 +1097,8 @@ function renderAuxiliaryTree(tree, gridId, linksId, focusNode, focusLabel, pathN
                 pathSet.has(node),
                 fastSet.has(node),
                 isLeafLevel && hasVisibleNextLeafAuxiliary(displayItems, slotIndex),
-                node === focusNode,
-                focusLabel,
+                showFocusNode && node === focusNode,
+                showFocusNode ? focusLabel : null,
                 tree
             );
             slot.appendChild(card);
diff --git a/src/js/helpers.js b/src/js/helpers.js
index 6d4cb73..b1221f7 100644
--- a/src/js/helpers.js
+++ b/src/js/helpers.js
@@ -284,6 +284,7 @@ function reset_button() {
     sware_data = [];
     tail_data = [];
     lil_data = [];
+    bplus_data = [];
     total_inversion_data = [];
     running = true; 
     nextStepInProgress = false;
@@ -329,6 +330,7 @@ function reset_button() {
     swareTree = new Sware(5);
     tailTree = new Tail(10);
     lilTree = new LilTree(10);
+    bPlusTree = new BTree(10);
     quit_leaf_dict = [];
     initializeQuitVisualization();
     initializeSwareVisualization();
@@ -338,6 +340,9 @@ function reset_button() {
     if (typeof initializeLilVisualization === "function") {
         initializeLilVisualization();
     }
+    if (typeof initializeBPlusVisualization === "function") {
+        initializeBPlusVisualization();
+    }
     if (typeof returnStructurePanelsToStore === "function") {
         returnStructurePanelsToStore();
     }
@@ -560,6 +565,17 @@ function getComparisonMetricsByStructure()
             fastPathResets: lilTree && typeof lilTree.fastPathResets === "number"
                 ? lilTree.fastPathResets
                 : null
+        },
+        BPlusTree: {
+            title: "B+ Tree",
+            manualSortedPages: null,
+            averagePagesPerFlush: null,
+            pagesBulkloaded: null,
+            fastInserts: bPlusTree && typeof bPlusTree.fastInserts === "number"
+                ? bPlusTree.fastInserts
+                : null,
+            topInserts: getTreeTopInsertCount(bPlusTree),
+            fastPathResets: null
         }
     };
 }
@@ -754,8 +770,8 @@ function updateSummaryCards()
             if (labelEls && labelEls.length >= 2) {
                 const leftLabelEl = labelEls[0];
                 const rightLabelEl = labelEls[1];
-                leftLabelEl.textContent = selectedStructures[0] || '';
-                rightLabelEl.textContent = selectedStructures[1] || '';
+                leftLabelEl.textContent = leftMetrics.title || selectedStructures[0] || '';
+                rightLabelEl.textContent = rightMetrics.title || selectedStructures[1] || '';
 
                 // normalize styling classes: 's' for SWARE, 'q' for QuIT
                 leftLabelEl.classList.remove('s', 'q');
@@ -764,6 +780,10 @@ function updateSummaryCards()
                 if ((selectedStructures[0] || '').toUpperCase() === 'QUIT') leftLabelEl.classList.add('q');
                 if ((selectedStructures[1] || '').toUpperCase() === 'SWARE') rightLabelEl.classList.add('s');
                 if ((selectedStructures[1] || '').toUpperCase() === 'QUIT') rightLabelEl.classList.add('q');
+                if (typeof getStructureChartColor === 'function') {
+                    leftLabelEl.style.color = getStructureChartColor(selectedStructures[0]);
+                    rightLabelEl.style.color = getStructureChartColor(selectedStructures[1]);
+                }
             }
         } catch (e) {
             // non-fatal: if DOM shape changed, skip label sync
diff --git a/src/js/main.js b/src/js/main.js
index c61a8d1..252b889 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -28,19 +28,22 @@ var running = true;             // flag to check if animation is running
 let sware_data = [];
 let tail_data = [];
 let lil_data = [];
+let bplus_data = [];
 
 const STRUCTURE_PANEL_IDS = {
     SWARE: "structure-panel-sware",
     QuIT: "structure-panel-quit",
     Tail: "structure-panel-tail",
-    lil: "structure-panel-lil"
+    lil: "structure-panel-lil",
+    BPlusTree: "structure-panel-bplus"
 };
 
 const STRUCTURE_BOX_IDS = {
     SWARE: "sware-box",
     QuIT: "quit-box",
     Tail: "tail-box",
-    lil: "lil-box"
+    lil: "lil-box",
+    BPlusTree: "bplus-box"
 };
 
 /* Parameters for the QuIT algorithm */
@@ -84,7 +87,8 @@ const STRUCTURE_CHART_COLORS = {
     SWARE: "#80CBC4",
     QuIT: "#FFB433",
     Tail: "#5b8ecb",
-    lil: "#d96c6c"
+    lil: "#d96c6c",
+    BPlusTree: "#8b6a42"
 };
 
 /**
@@ -161,6 +165,7 @@ var totalCharts = 0;
 let quitTree = new QuIT(10);
 let lilTree = new LilTree(10);
 let tailTree = new Tail(10);
+let bPlusTree = new BTree(10);
 let swareTree = new Sware(10);
 let nextStepInProgress = false;
 let fastForwardInProgress = false;
@@ -251,6 +256,9 @@ function initializeSelectedStructureVisuals()
         else if (structureName === "lil") {
             initializeLilVisualization();
         }
+        else if (structureName === "BPlusTree") {
+            initializeBPlusVisualization();
+        }
     }
 }
 
@@ -265,6 +273,9 @@ function getStructureDataLength(structureName)
     if (structureName === "lil") {
         return lil_data.length;
     }
+    if (structureName === "BPlusTree") {
+        return bplus_data.length;
+    }
     if (structureName === "QuIT") {
         return total_data.length;
     }
@@ -285,6 +296,9 @@ function getStructurePhaseRunner(structureName)
     if (structureName === "lil") {
         return runLilPhase;
     }
+    if (structureName === "BPlusTree") {
+        return runBPlusPhase;
+    }
     return null;
 }
 
@@ -392,6 +406,11 @@ function fastForwardStructureInsert(structureName)
         lil_data.shift();
         return true;
     }
+    if (structureName === "BPlusTree" && Array.isArray(bplus_data) && bplus_data.length > 0) {
+        bPlusTree.insert(bplus_data[0]);
+        bplus_data.shift();
+        return true;
+    }
     if (structureName === "QuIT" && Array.isArray(total_data) && total_data.length > 0) {
         quitTree.insert(total_data[0]);
         total_data.shift();
@@ -1009,6 +1028,7 @@ function run_operations() {
         swareTree = new Sware(10);
         tailTree = new Tail(10);
         lilTree = new LilTree(10);
+        bPlusTree = new BTree(10);
         resetComparisonMetrics();
         total_data = generate(Math.round((selectedN * selectedK) / 100), Math.round(selectedN * selectedL / 100),
             selectedN, selectedB, selectedA);
@@ -1016,6 +1036,7 @@ function run_operations() {
         sware_data = [...total_data];
         tail_data = [...total_data];
         lil_data = [...total_data];
+        bplus_data = [...total_data];
         console.log("Starting to run the algorithm.");
         //pre-load
         state = 2;
@@ -1302,10 +1323,11 @@ function generate(k, l, n, b, a) {
     return array;
 }
 
-//returns array of length n with i inversionss
+// returns array of length n after i random pair exchanges
+//(elements already exchanged can't be exchanged again)
 function generateInversion(n, i) {
     let array = [];
-    let inversions = i;
+    const swapCount = Math.max(0, Math.min(Math.floor(i), Math.floor(n / 2)));
     for (let a = 1; a < n + 1; a++) {
         array.push(a);
     }
@@ -1321,17 +1343,27 @@ function generateInversion(n, i) {
     return array;
     */
     let taken = new Map();
-    //precautionary so no value not in array is swapped
-    taken.set(0, false);
-    taken.set(n + 1, false);
-    for (let a = 1; a < n + 1; a++) {
-        taken.set(a, true);
+    for (let index = 0; index < n; index++) {
+        taken.set(index, true);
     }
-    //two array to swap
-    let sources1 = generateSources(n, 2 * inversions, taken);
-    let sources2 = generateSources(n, 2 * inversions, taken);
-    for (let a = 0; a < inversions; a++) {
-        swapElements(array, sources1[a], sources2[a])
+
+    function generateExchangeSources(count) {
+        const sources = [];
+        while (sources.length < count) {
+            const candidate = Math.floor(Math.random() * n);
+            if (taken.get(candidate) === true) {
+                taken.set(candidate, false);
+                sources.push(candidate);
+            }
+        }
+        return sources;
+    }
+
+    // Pick two groups of valid indexes swap them
+    let sources1 = generateExchangeSources(swapCount);
+    let sources2 = generateExchangeSources(swapCount);
+    for (let a = 0; a < swapCount; a++) {
+        swapElements(array, sources1[a], sources2[a]);
     }
     return array;
 }