diff --git a/src/tabs/Chars.php b/src/tabs/Chars.php
index 2c98bdc..a7376bc 100644
--- a/src/tabs/Chars.php
+++ b/src/tabs/Chars.php
@@ -22,43 +22,88 @@ EOT;
     <?php
     foreach ($charData as $c) {
 
-        $quests = '';
-        foreach ($c->cData['Quests'] as $quest) {
-            foreach ($quest as $difficulty => $q) {
-                $quests .= "<h2 style='text-align: center'>$difficulty</h2>";
+$quests = '';
+$accordionCounter = 1;
 
-                foreach ($q as $k => $v) {
-                    $kD = str_replace("_", " ", $k);
-                    $kD = str_replace([" NM", " Hell"], "", $kD);
-                    $checked = ($v == 1) ? 'checked' : '';
+foreach ($c->cData['Quests'] as $quest) {
+    foreach ($quest as $difficulty => $q) {
+        $isExpanded = ($accordionCounter === 1) ? 'show' : '';
+        $collapseId = 'collapseq-' . $accordionCounter;
+        $headingId = 'headingq-' . $accordionCounter;
 
-                    $quests .= "<div class='qcheckgroup' ><input class='qcheck' diff='$difficulty' type='checkbox' value='1' name='$k' id='$k' $checked>";
-                    $quests .= "<label for='$k'>$kD</label><br></div>";
-                }
-            }
+        $quests .= "<div class='card'>";
+        $quests .= "<div class='card-header' id='{$headingId}'>";
+        $quests .= "<h5 class='mb-0'>";
+        $quests .= "<button class='btn btn-link' data-toggle='collapse' data-target='#{$collapseId}' aria-expanded='" . ($accordionCounter === 1 ? 'true' : 'false') . "' aria-controls='{$collapseId}'>{$difficulty}</button>";
+        $quests .= "</h5>";
+        $quests .= "</div>";
+
+        $quests .= "<div id='{$collapseId}' class='collapse {$isExpanded}' aria-labelledby='{$headingId}' data-parent='#accordionExample'>";
+        $quests .= "<div class='card-body'>";
+
+        foreach ($q as $k => $v) {
+            $kD = str_replace("_", " ", $k);
+            $kD = str_replace([" NM", " Hell"], "", $kD);
+            $checked = ($v == 1) ? 'checked' : '';
+
+            $quests .= "<div class='qcheckgroup'>";
+            $quests .= "<input class='qcheck' diff='{$difficulty}' type='checkbox' value='1' name='{$k}' id='{$k}' {$checked}>";
+            $quests .= "<label for='{$k}'>{$kD}</label><br>";
+            $quests .= "</div>";
         }
 
+        $quests .= "</div>";
+        $quests .= "</div>";
+
+        $quests .= "</div>";
+        $accordionCounter++;
+    }
+}
+
         $wps = '';
         //$wps .= "<input type='radio' value='1' name='wp_all' id='wp_all'>";
         //$wps .= "<label style='font-size: 1.3em;color:green;' for='wp_all'>Enable All Waypoints</label><br>";
         //$wps .= "<input type='radio' value='0' name='wp_all' id='wp_all_off'>";
         //$wps .= "<label style='font-size: 1.3em; color: red;' for='wp_all_off'>Disable All Waypoints</label><hr>";
 
-        foreach ($c->cData['Waypoints'] as $diff => $waypoints) { // diff is difficulty
-            $wps .= "<h2 style='text-align: center'>$diff</h2>";
-            array_pop($waypoints);
-            $wp_count = 0;
-            foreach ($waypoints as $k => $v) {
+$wps = '';
+$accordionCounter = 1;
 
-                $kD = str_replace("_", " ", $k);
-                $kD = str_replace([" NM", " Hell"], "", $kD);
-                $checked = ($v == 1 && $k != '') ? 'checked ' : '';
+foreach ($c->cData['Waypoints'] as $diff => $waypoints) {
+    $isExpanded = ($accordionCounter === 1) ? 'show' : '';
+    $collapseId = 'collapsewps-' . $accordionCounter;
+    $headingId = 'headingwps-' . $accordionCounter;
 
-                $wps .= "<div class='wcheckgroup' ><input diff='$diff' class='wpcheck' type='checkbox' value='1' name='$wp_count' id='$k' $checked>";
-                $wps .= "<label for='$k'>$kD</label><br></div>";
-                $wp_count++;
-            }
-        }
+    $wps .= "<div class='card'>";
+    $wps .= "<div class='card-header' id='{$headingId}'>";
+    $wps .= "<h5 class='mb-0'>";
+    $wps .= "<button class='btn btn-link' data-toggle='collapse' data-target='#{$collapseId}' aria-expanded='" . ($accordionCounter === 1 ? 'true' : 'false') . "' aria-controls='{$collapseId}'>{$diff}</button>";
+    $wps .= "</h5>";
+    $wps .= "</div>";
+
+    $wps .= "<div id='{$collapseId}' class='collapse {$isExpanded}' aria-labelledby='{$headingId}' data-parent='#accordionExample'>";
+    $wps .= "<div class='card-body'>";
+
+    array_pop($waypoints);
+    $wp_count = 0;
+    foreach ($waypoints as $k => $v) {
+        $kD = str_replace("_", " ", $k);
+        $kD = str_replace([" NM", " Hell"], "", $kD);
+        $checked = ($v == 1 && $k != '') ? 'checked ' : '';
+
+        $wps .= "<div class='wcheckgroup'>";
+        $wps .= "<input diff='{$diff}' class='wpcheck' type='checkbox' value='1' name='{$wp_count}' id='{$k}' {$checked}>";
+        $wps .= "<label for='{$k}'>{$kD}</label><br>";
+        $wps .= "</div>";
+        $wp_count++;
+    }
+
+    $wps .= "</div>";
+    $wps .= "</div>";
+
+    $wps .= "</div>";
+    $accordionCounter++;
+}
 
         $classOptions = [
             'Amazon', 'Assassin', 'Barbarian', 'Druid', 'Paladin', 'Necromancer', 'Sorceress'
@@ -106,8 +151,42 @@ EOT;
             $skills .= "<input cmd='skills' style='width: 64px;' class='skill-$k skill' name='$skillcounter' type='number' min='0' max='255' value='{$skill['points']}'>:  {$skill['skill']}<hr>";
             $skillcounter++;
         }
+        
+$skillsByPage = array();
+foreach ($c->cData['skills']['skills'] as $skill) {
+    $page = $skill['page'];
+    if (!isset($skillsByPage[$page])) {
+        $skillsByPage[$page] = array();
+    }
+    $skillsByPage[$page][] = $skill;
+}
 
-        // ddump($c->cData['CharacterStatusDied']);
+$skillDivs = '';
+$accordionCounter = 1;
+foreach ($skillsByPage as $page => $skills) {
+    $isExpanded = ($accordionCounter === 1) ? 'show' : '';
+    $collapseId = 'collapseskills-' . $accordionCounter;
+    $headingId = 'headingskills-' . $accordionCounter;
+
+    $skillDivs .= '<div class="card">';
+    $skillDivs .= '<div class="card-header" id="' . $headingId . '">';
+    $skillDivs .= '<h5 class="mb-0">';
+    $skillDivs .= '<button class="btn btn-link" data-toggle="collapse" data-target="#' . $collapseId . '" aria-expanded="' . ($accordionCounter === 1 ? 'true' : 'false') . '" aria-controls="' . $collapseId . '">Page ' . $page . '</button>';
+    $skillDivs .= '</h5>';
+    $skillDivs .= '</div>';
+
+    $skillDivs .= '<div id="' . $collapseId . '" class="collapse ' . $isExpanded . '" aria-labelledby="' . $headingId . '" data-parent="#accordionExample">';
+    $skillDivs .= '<div class="card-body">';
+    foreach ($skills as $skill) {
+        $skillcounter++;
+        $skillDivs .= "<input cmd='skills' style='width: 64px;' class='skill-$k skill' name='$skillcounter' type='number' min='0' max='255' value='{$skill['points']}'>:  {$skill['skill']}<hr>";
+    }
+    $skillDivs .= '</div>';
+    $skillDivs .= '</div>';
+
+    $skillDivs .= '</div>';
+    $accordionCounter++;
+}
 
 
         $statuses = [
@@ -129,30 +208,81 @@ EOT;
 HTML;
         }
 
-        $items = "<div  class='container'><div class='row'>";
-        foreach($c->cData['items'] as $item) {
-            $i = array_filter($item->iData);  
-            
-            $items .= "<div style='border: 1px solid #ccc;' class='col-md-3'>
-                <p style='font-size: 120%;'>
-                {$i['basename']}<br>
-                    <img src='/docs/{$_SESSION['modname']}/img/items/inv{$i['code']}.png'>
-                </p>
-                    <ul>
-                    <li>Code: {$i['code']}</li>
-                    <li>Socketed: {$i['gems_in']}</li>
-                    <li>Item Level{$i['ilvl']}</li>
-                    <li>Identified: {$i['identified']}</li>
-                    <li>Starting Item: {$i['startingItem']}</li>
-                    <li>Ethereal: {$i['ethereal']}</li>
-                    <li>Quality: {$i['iquality']}</li>
-                    <li>Container: {$i['container']}</li>
-                    <li>Runeword:{$i['runeword']}</li>
-                    </ul>
-                </div>";
-            
+        // Create a new array to store objects sorted by container
+        $sortedArray = [];
+        // Iterate over the original array
+        foreach ($c->cData['items'] as $item) {
+            // Get the value of 'container' property
+            $container = $item->iData['container'];
+
+            // Check if the container key already exists in the sorted array
+            if (!array_key_exists($container, $sortedArray)) {
+                // If not, create a new empty array for the container
+                $sortedArray[$container] = [];
+            }
+
+            // Add the current object to the corresponding container in the sorted array
+            $sortedArray[$container][] = $item;
         }
-        $items .= "</div></div>";
+
+// Sort the sub-arrays (objects with the same container) by the container property
+        foreach ($sortedArray as &$containerArray) {
+            usort($containerArray, function ($a, $b) {
+                return strcmp($a->iData['container'], $b->iData['container']);
+            });
+        }
+
+  
+
+$items = "<div class='accordion' id='accordionExample'>";
+
+foreach ($sortedArray as $index => $container) {
+    $containerId = "container_" . $index;
+
+    // Create accordion card for the container
+    $items .= "<div class='card'>";
+    $items .= "<div class='card-header' id='{$containerId}-heading'>";
+    $items .= "<h5 class='mb-0'>";
+    $items .= "<button class='btn btn-link' data-toggle='collapse' data-target='#{$containerId}-collapse' aria-expanded='" . ($index === 0 ? "true" : "false") . "' aria-controls='{$containerId}-collapse'>{$index}</button>";
+    $items .= "</h5>";
+    $items .= "</div>";
+
+    // Create accordion content for the container
+    $isExpanded = ($index === 0) ? "show" : "";
+    $items .= "<div id='{$containerId}-collapse' class='collapse {$isExpanded}' aria-labelledby='{$containerId}-heading' data-parent='#accordionExample'>";
+    $items .= "<div class='card-body'>";
+    $items .= "<div class='row'>";
+
+    foreach ($container as $item) {
+        $i = array_filter($item->iData);
+
+        $items .= "<div style='border: 1px solid #ccc;' class='col-md-3'>";
+        $items .= "<p style='font-size: 120%;'>";
+        $items .= "{$i['basename']}<br>";
+        $items .= "<img src='/docs/{$_SESSION['modname']}/img/items/{$i['txt']['invfile']}.png'>";
+        $items .= "</p>";
+        $items .= "<ul>";
+        $items .= "<li>Code: {$i['code']}</li>";
+        $items .= "<li>Socketed: {$i['gems_in']}</li>";
+        $items .= "<li>Item Level: {$i['ilvl']}</li>";
+        $items .= "<li>Identified: {$i['identified']}</li>";
+        $items .= "<li>Starting Item: {$i['startingItem']}</li>";
+        $items .= "<li>Ethereal: {$i['ethereal']}</li>";
+        $items .= "<li>Quality: {$i['iquality']}</li>";
+        $items .= "<li>Container: {$i['container']}</li>";
+        $items .= "<li>Runeword: {$i['runeword']}</li>";
+        $items .= "</ul>";
+        $items .= "</div>";
+    }
+
+    $items .= "</div>";
+    $items .= "</div>";
+    $items .= "</div>";
+
+    $items .= "</div>";
+}
+
+$items .= "</div>";
 
 
         $tabContent .= <<<EOT
@@ -239,7 +369,9 @@ $checkboxes
                     <hr>
                     <div style="background:;">
                         <h3 style="text-align: center">Skills</h3>
-                        $skills
+    <div class="accordion" id="accordionExample">
+         $skillDivs
+    </div>
                     </div>
                 </div>
                 <div class="col">
@@ -253,7 +385,7 @@ $checkboxes
             </div>
           
           
-          
+          <h2>Items on Character</h2>
           $items
         </div>
         <!--<input class="btn btn-danger" style="" type="submit" value="Save Character">-->