diff --git a/css/main.css b/css/main.css
index ab40a93199..d0ce9f80d9 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,4 +1,4 @@
-    /* NAVIGATION BAR AND GENERAL STYLES */
+/* NAVIGATION BAR AND GENERAL STYLES */
     body {
       color: #3c3c3c;
       padding-left: 1em;
@@ -15,8 +15,6 @@
       font-weight: bold;
     }
 
-
-
     header.navbar,
     .navbar-primary {
       margin-left: calc(-1em);
@@ -45,10 +43,6 @@
       gap: 0.75rem;
     }
 
-
-
-
-
     .navbar-brand.mr-2>img {
       margin-left: 0.3rem;
     }
@@ -64,7 +58,6 @@
 
     .panel-header {
       padding-left: 0px;
-
     }
 
     .panel {
@@ -81,35 +74,17 @@
       gap: 0.75rem;
       align-items: stretch;
       justify-content: center;
-
     }
 
     /* BUTTONS */
 
     @keyframes squishAnim {
-      0% {
-        transform: scale(1, 1);
-      }
-
-      15% {
-        transform: scale(1.08, 1.24);
-      }
-
-      40% {
-        transform: scale(1.22, 1.08);
-      }
-
-      65% {
-        transform: scale(1.15, 1.28);
-      }
-
-      85% {
-        transform: scale(1.06, 1.12);
-      }
-
-      100% {
-        transform: scale(1, 1);
-      }
+      0% { transform: scale(1, 1); }
+      15% { transform: scale(1.08, 1.24); }
+      40% { transform: scale(1.22, 1.08); }
+      65% { transform: scale(1.15, 1.28); }
+      85% { transform: scale(1.06, 1.12); }
+      100% { transform: scale(1, 1); }
     }
 
     .btn {
@@ -121,11 +96,30 @@
     }
 
     .btn.input-group-btn {
-
       border-bottom-right-radius: 1em;
       border-top-right-radius: 1em;
     }
 
+    .menu-item {
+      cursor: pointer;
+    }
+
+    .menu .menu-item>a {
+      border-radius: 1em;
+      padding-left: 1em;
+    }
+
+    .menu {
+      border-radius: 1em;
+    }
+
+    .dropdowns-pill {
+      background-color: rgba(87, 85, 217, 0.066);
+      border-radius: 1em;
+      padding-left: 1em;
+      padding-right: 1em;
+    }
+
     .btn.btn-favourite:focus,
     .btn.btn-favourite:focus-visible,
     .btn-favourite:focus,
@@ -144,7 +138,6 @@
 
     .icon.icon-emulator {
       text-indent: 0px;
-      /*override spectre*/
       content: url("data:image/svg+xml,%3Csvg fill='rgb(87, 85, 217)' xmlns='http://www.w3.org/2000/svg' viewBox='4 4 40 40' width='1em' height='1em'%3E%3Cpath d='M 8.5 5 C 6.0324991 5 4 7.0324991 4 9.5 L 4 30.5 C 4 32.967501 6.0324991 35 8.5 35 L 17 35 L 17 40 L 13.5 40 A 1.50015 1.50015 0 1 0 13.5 43 L 18.253906 43 A 1.50015 1.50015 0 0 0 18.740234 43 L 29.253906 43 A 1.50015 1.50015 0 0 0 29.740234 43 L 34.5 43 A 1.50015 1.50015 0 1 0 34.5 40 L 31 40 L 31 35 L 39.5 35 C 41.967501 35 44 32.967501 44 30.5 L 44 9.5 C 44 7.0324991 41.967501 5 39.5 5 L 8.5 5 z M 8.5 8 L 39.5 8 C 40.346499 8 41 8.6535009 41 9.5 L 41 30.5 C 41 31.346499 40.346499 32 39.5 32 L 29.746094 32 A 1.50015 1.50015 0 0 0 29.259766 32 L 18.746094 32 A 1.50015 1.50015 0 0 0 18.259766 32 L 8.5 32 C 7.6535009 32 7 31.346499 7 30.5 L 7 9.5 C 7 8.6535009 7.6535009 8 8.5 8 z M 17.5 12 C 16.136406 12 15 13.136406 15 14.5 L 15 25.5 C 15 26.863594 16.136406 28 17.5 28 L 30.5 28 C 31.863594 28 33 26.863594 33 25.5 L 33 14.5 C 33 13.136406 31.863594 12 30.5 12 L 17.5 12 z M 18 18 L 30 18 L 30 25 L 18 25 L 18 18 z M 20 35 L 28 35 L 28 40 L 20 40 L 20 35 z'/%3E%3C/svg%3E");
     }
 
@@ -152,18 +145,15 @@
       text-indent: 0px;
     }
 
-    /*override spectre*/
     .icon.icon-favourite-active {
       text-indent: 0px;
       color: #EEE
     }
 
-    /*override spectre*/
     .icon.icon-favourite::before {
       content: url("data:image/svg+xml,%3Csvg fill='rgb(255, 0, 0)' xmlns='http://www.w3.org/2000/svg' viewBox='0 -3 50 47' width='1.5em' height='1.5em'%3E%3Cpath d='M 16.375 9 C 10.117188 9 5 14.054688 5 20.28125 C 5 33.050781 19.488281 39.738281 24.375 43.78125 L 25 44.3125 L 25.625 43.78125 C 30.511719 39.738281 45 33.050781 45 20.28125 C 45 14.054688 39.882813 9 33.625 9 C 30.148438 9 27.085938 10.613281 25 13.0625 C 22.914063 10.613281 19.851563 9 16.375 9 Z M 16.375 11 C 19.640625 11 22.480469 12.652344 24.15625 15.15625 L 25 16.40625 L 25.84375 15.15625 C 27.519531 12.652344 30.359375 11 33.625 11 C 38.808594 11 43 15.144531 43 20.28125 C 43 31.179688 30.738281 37.289063 25 41.78125 C 19.261719 37.289063 7 31.179688 7 20.28125 C 7 15.144531 11.1875 11 16.375 11 Z'/%3E%3C/svg%3E");
     }
 
-
     .icon.icon-favourite-active::before {
       content: url("data:image/svg+xml,%3Csvg fill='rgb(255, 0, 0)' xmlns='http://www.w3.org/2000/svg' viewBox='0 -3 50 47' width='1.5em' height='1.5em'%3E%3Cpath d='M 25 44.296875 L 24.363281 43.769531 C 23.363281 42.941406 22.019531 42.027344 20.46875 40.96875 C 14.308594 36.765625 5 30.414063 5 20.285156 C 5 14.0625 10.097656 9 16.363281 9 C 19.714844 9 22.851563 10.457031 25 12.957031 C 27.148438 10.457031 30.289063 9 33.636719 9 C 39.902344 9 45 14.0625 45 20.285156 C 45 30.414063 35.691406 36.765625 29.53125 40.96875 C 27.976563 42.027344 26.636719 42.941406 25.636719 43.769531 Z'/%3E%3C/svg%3E");
     }
@@ -185,10 +175,11 @@
     .icon.icon-interface {
       text-indent: 0px;
     }
+
     .fav-count {
       display: inline-block;
-      margin-right: 0.3rem!important;
-      margin-left:0em!important;
+      margin-right: 0.3rem !important;
+      margin-left: 0em !important;
       font-size: 0.7rem;
       vertical-align: middle;
       text-align: center;
@@ -205,8 +196,6 @@
       padding: 1em;
     }
 
-
-
     .btn.btn-favourite {
       display: inline-flex;
       align-items: center;
@@ -233,7 +222,6 @@
       gap: 0.35rem;
     }
 
-
     /* Collapse to one column for thinner screens */
     @media (max-width: 720px) {
       .tile.column.col-6.col-sm-12.col-xs-12.app-tile {
@@ -243,15 +231,12 @@
       }
     }
 
- 
-
     /* TABS */
     .tab.tab-block .tab-item {
       border-bottom: none;
     }
 
     .tab.tab-item.active {
-
       border-bottom: none;
     }
 
@@ -263,6 +248,13 @@
       gap: 1em;
     }
 
+    .inline-icon {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      vertical-align: sub;
+      margin-right: 5px;
+    }
 
     #tab-navigate {
       position: relative;
@@ -295,25 +287,19 @@
       will-change: transform, width;
     }
 
-    /* Move the indicator to the second tab */
     #tab-navigate:has(li:nth-child(2).active)::after {
       transform: translateX(100%);
     }
 
-    /* Move the indicator to the third tab */
     #tab-navigate:has(li:nth-child(3).active)::after {
       transform: translateX(200%);
     }
 
-
-
     .tab.tab-block .tab-item:focus {
       outline: none;
       box-shadow: none;
     }
 
-
-
     .tab .tab-item a,
     .tab .tab-item a:focus,
     .tab .tab-item a:active,
@@ -325,11 +311,25 @@
       border-bottom-color: transparent !important;
     }
 
-
-
     .dropdown-container {
       padding-left: 1rem;
       padding-right: 1rem;
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      flex-wrap: wrap;
+      justify-content: center;
+      margin-left: 0.7em;
+      margin-right: 0.7em;
+    }
+
+    #searchform {
+      flex: 1;
+      min-width: 450px !important;
+    }
+
+    #searchform .form-input {
+      width: 100%;
     }
 
     a.btn.btn-link.dropdown-toggle {
@@ -377,15 +377,40 @@
       border-bottom: 1px solid #EEE;
       margin-bottom: 4px;
       min-height: 11em;
-      /* reduced so tiles can be thinner */
     }
 
     .tile-content {
       position: relative;
       overflow-wrap: anywhere;
-      /* stop long text like links pushing the width out too far*/
     }
 
+    /* DROPDOWNS */
+    .dropdown {
+      position: relative;
+    }
+
+    .dropdown .menu {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      z-index: 10000;
+    }
+    .long-dropdown{
+      min-height: 520px !important;
+    }
+
+    .dropdown .menu.align-right {
+      left: auto;
+      right: 0;
+    }
+
+    /* Allow tooltips on filter menu items to escape the dropdown */
+    .filter-nav .menu {
+      overflow: visible;
+    }
+    .sort-nav .menu {
+      overflow: visible;
+    }
 
     .tile .tile-content br {
       display: block;
@@ -393,37 +418,32 @@
       padding: 2em;
     }
 
-
     .tile .tile-content p {
       margin: 0 0 0.2rem 0;
     }
 
     .tile.column.col-6.col-sm-12.col-xs-12.app-tile {
       background-color: rgba(87, 85, 217, 0.025);
-      
       box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.025);
-      
       border: solid 1.3px #dadee47c;
       margin: 0;
-      /* spacing handled by container gap */
       padding: 0.9em;
       border-radius: 1em;
-      
-
       box-sizing: border-box;
-      /* allow tiles to be two columns on wide screens, collapse to one on small screens */
       flex: 1 1 calc(50% - 0.75rem);
       max-width: calc(50% - 0.75rem);
-      min-width: 220px; /* ensures tiles wrap down to one column when viewport is too narrow */
+      min-width: 220px;
     }
+
     .tile.column.col-6.col-sm-12.col-xs-12.app-tile.updateTile {
       background-color: rgba(255, 149, 0, 0.069) !important;
       box-shadow: 0px 3px 6px rgba(151, 111, 0, 0.036);
     }
-    .chip{
-      border-radius: 0.7em;
 
+    .chip {
+      border-radius: 0.7em;
     }
+
     .link-github {
       position: absolute;
       top: 36px;
@@ -454,12 +474,10 @@
       height: auto;
     }
 
-
     .modal-container {
       border-radius: 1.5em;
       background-color: rgb(253, 253, 255);
       padding: 1em;
-
     }
 
     .bar {
@@ -467,19 +485,13 @@
     }
 
     .devicechooser {
-
       border-radius: 1em;
-      justify-content: center;
       display: flex;
       justify-content: center;
-      /* Centers horizontally */
       align-items: center;
-      /* Centers vertically */
       text-align: left;
-
     }
 
-    /* Support older index.js which puts the count inside the <i> as a span */
     .btn.btn-favourite .icon.icon-favourite span {
       position: static;
       top: auto;
@@ -501,9 +513,6 @@
       max-width: 99%;
     }
 
-
-
-    /*override spectre*/
     .icon.icon-interface::before {
       position: absolute;
       left: 50%;
@@ -518,15 +527,7 @@
       overflow-y: unset;
     }
 
-    /* Normally tooltips don't wrap, but if you enable it, then they wrap until they are really thin!
-    Not sure how to get 'normal' wrap behaviour (eg fill up until max-width, then wrap) */
-    /*.tooltip:hover::after {
-      white-space: normal;
-      min-width: 160px;
-    }*/
-
     /* Terminal */
-    /* ----------------------------------------------------- */
     .terminal {
       font-size: 12px;
       background-color: #222;
@@ -535,21 +536,18 @@
       border: 0;
       padding: 10px;
       overflow: auto;
-      /* adds scrollbar if needed */
       border-radius: 1em;
       position: absolute;
       left: 0px;
       top: 0px;
       bottom: 0px;
       right: 0px;
-
       -o-user-select: text;
       -moz-user-select: text;
       -webkit-user-select: text;
       user-select: text;
     }
 
-
     .termLine {
       font-family: Fixed, monospace;
       tab-size: 4;
@@ -563,7 +561,6 @@
     .terminal__focus {
       position: absolute;
       top: -100px;
-      /* hide it */
     }
 
     .terminal a {
@@ -581,4 +578,4 @@
     .terminal--webcam.focus .terminal__cursor {
       text-shadow: none;
       animation: blink_webcam 1s step-end 0s infinite;
-    }
+    }
\ No newline at end of file
diff --git a/index.html b/index.html
index 429cd422ad..d052818bfb 100644
--- a/index.html
+++ b/index.html
@@ -21,20 +21,13 @@
   </head>
   <body>
     <header class="navbar-primary navbar">
-      <section class="navbar-section" >
+      <section class="navbar-section">
         <a href="https://banglejs.com" target="_blank" class="navbar-brand mr-2"><img src="img/banglejs-logo-small.svg" alt="Bangle.js">
         <div>App Loader</div></a>
-        <!-- <a href="#" class="btn btn-link">...</a> -->
       </section>
       <section class="navbar-section">
         <button class="btn" id="connectmydevice">Connect</button>
       </section>
-      <!--<section class="navbar-section">
-        <div class="input-group input-inline">
-          <input class="form-input" type="text" placeholder="search">
-          <button class="btn btn-primary input-group-btn">Search</button>
-        </div>
-      </section>-->
     </header>
 
     <div class="container" style="padding-top:4px">
@@ -43,7 +36,6 @@
       </p>
     </div>
 
-
     <ul class="tab tab-block" id="tab-navigate">
       <li class="tab-item active" id="tab-librarycontainer">
         <a href="javascript:showTab('librarycontainer')">Library</a>
@@ -56,53 +48,63 @@
       </li>
     </ul>
 
-    <div class="container"  id="toastcontainer">
-    </div>
+    <div class="container" id="toastcontainer"></div>
 
     <div class="container apploader-tab" id="librarycontainer">
       <div class="dropdown-container">
-        <div class="dropdown devicetype-nav">
-          <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
-            <span>All apps</span><i class="icon icon-caret"></i>
-          </a>
-          <!-- menu component -->
-          <ul class="menu" id="device-dropdown">
-            <li class="menu-item"><a>All apps</a></li>
-          </ul>
-        </div>
-        <div class="filter-nav">
-          <label class="chip active" filterid="" data-tooltip="Show all apps">All</label>
-          <label class="chip tooltip" filterid="clock" data-tooltip="To tell the time!">Clocks</label>
-          <label class="chip tooltip" filterid="launch" data-tooltip="Choose which apps to launch">Launchers</label>
-          <label class="chip tooltip" filterid="game" data-tooltip="Have fun!">Games</label>
-          <label class="chip tooltip" filterid="tool" data-tooltip="Useful applications">Tools</label>
-          <label class="chip tooltip" filterid="textinput" data-tooltip="To allow you to enter text">Keyboards</label>
-          <label class="chip tooltip" filterid="widget" data-tooltip="Appear in the top bar of Bangle.js apps">Widgets</label>
-          <label class="chip tooltip" filterid="bluetooth" data-tooltip="Using Bluetooth Functionality">Bluetooth</label>
-          <label class="chip tooltip" filterid="outdoors" data-tooltip="For outdoor use">Outdoors</label>
-          <label class="chip tooltip" filterid="ram" data-tooltip="Apps that don't save anything to flash memory">Online</label>
-          <label class="chip tooltip" filterid="clkinfo" data-tooltip="Info displayed on clocks, or clocks with info">Clock Info</label>
-          <label class="chip tooltip" filterid="health" data-tooltip="Apps for your health">Health</label>
-          <label class="chip tooltip" filterid="fonts" data-tooltip="Extra fonts for non-latin languages">Fonts</label>
-          <label class="chip tooltip" filterid="favourites" data-tooltip="Apps that you've liked ❤️">Favourites</label>
+        <div class="dropdowns-pill">
+          <div class="dropdown devicetype-nav">
+            <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
+              <span>All apps</span><i class="icon icon-caret"></i>
+            </a>
+            <ul class="menu">
+              <li class="menu-item"><a>All apps</a></li>
+              <li class="menu-item"><a dt="BANGLEJS">Bangle.js 1</a></li>
+              <li class="menu-item"><a dt="BANGLEJS2">Bangle.js 2</a></li>
+            </ul>
+          </div>
+          <div class="dropdown filter-nav">
+            <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
+              <span>All apps</span><i class="icon icon-caret"></i>
+            </a>
+            <ul class="long-dropdown menu">
+              <li class="menu-item tooltip tooltip-right" data-tooltip="Show all apps"><a dt="">All apps</a></li>
+              <li class="menu-item tooltip tooltip-right" data-tooltip="Apps you've liked ❤️"><a dt="favourites">Favourites</a></li>
+              <li class="menu-item tooltip tooltip-right" data-tooltip="To tell the time!"><a dt="clock">Clocks</a></li>
+              <li class="menu-item tooltip tooltip-right" data-tooltip="Choose which apps to launch"><a dt="launch">Launchers</a></li>
+              <li class="menu-item tooltip tooltip-right" data-tooltip="Have fun!"><a dt="game">Games</a></li>
+              <li class="menu-item tooltip tooltip-right" data-tooltip="Useful applications"><a dt="tool">Tools</a></li>
+              <li class="menu-item tooltip tooltip-right" data-tooltip="To allow you to enter text"><a dt="textinput">Keyboards</a></li>
+              <li class="menu-item tooltip tooltip-right" data-tooltip="Appear in the top bar of Bangle.js apps"><a dt="widget">Widgets</a></li>
+              <li class="menu-item tooltip tooltip-right" data-tooltip="Using Bluetooth functionality"><a dt="bluetooth">Bluetooth</a></li>
+              <li class="menu-item tooltip tooltip-right" data-tooltip="For outdoor use"><a dt="outdoors">Outdoors</a></li>
+              <li class="menu-item tooltip tooltip-right" data-tooltip="Apps that don't save to flash memory"><a dt="ram">Online</a></li>
+              <li class="menu-item tooltip tooltip-right" data-tooltip="Info displayed on clocks"><a dt="clkinfo">Clock Info</a></li>
+              <li class="menu-item tooltip tooltip-right" data-tooltip="Apps for your health"><a dt="health">Health</a></li>
+              <li class="menu-item tooltip tooltip-right" data-tooltip="Extra fonts for non-latin languages"><a dt="fonts">Fonts</a></li>
+            </ul>
+          </div>
+          <div class="dropdown sort-nav">
+            <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
+              <span>Sort by:</span><i class="icon icon-caret"></i>
+            </a>
+            <ul class="menu">
+              <li class="menu-item"><a sortid="">None</a></li>
+              <li class="menu-item tooltip tooltip-right hidden" id="newSort" data-tooltip="Newest apps"><a sortid="created">New</a></li>
+              <li class="menu-item tooltip tooltip-right hidden" id="changedSort" data-tooltip="Most recently changed"><a sortid="modified">Updated</a></li>
+              <li class="menu-item tooltip tooltip-right" data-tooltip="Most installed apps"><a sortid="installs">Installed</a></li>
+              <li class="menu-item tooltip tooltip-right" data-tooltip="Most favourited apps"><a sortid="favourites">Favourited</a></li>
+              <li class="menu-item tooltip tooltip-right" data-tooltip="Find something new!"><a sortid="random">Random</a></li>
+            </ul>
+          </div>
         </div>
-        <div class="sort-nav hidden">
-          <span>Sort by:</span>
-          <label class="chip active" sortid="">None</label>
-          <label class="chip hidden tooltip" sortid="created"  data-tooltip="Most recent apps">New</label>
-          <label class="chip hidden tooltip" sortid="modified" data-tooltip="Most recently changed">Updated</label>
-          <label class="chip hidden tooltip" sortid="installs" data-tooltip="Most installed by users">Installed</label>
-          <label class="chip hidden tooltip" sortid="favourites" data-tooltip="Most liked by users">Favourited</label>
+        <div class="input-group" id="searchform">
+          <input class="form-input" type="text" placeholder="Search by app name, ID, author, or description...">
+          <button class="btn btn-primary input-group-btn">Search</button>
         </div>
       </div>
-
       <div class="panel" style="clear:both">
-        <div class="panel-header">
-        <div class="input-group" id="searchform">
-            <input class="form-input" type="text" placeholder="Keywords...">
-            <button class="btn btn-primary input-group-btn">Search</button>
-        </div>
-        </div>
+        <div class="panel-header"></div>
         <div class="panel-body columns"><!-- apps go here --></div>
       </div>
     </div>
@@ -126,7 +128,7 @@ <h2>App Loader</h2>
         </div>
       </div>
       <div class="container" style="padding-top: 8px;">
-        <p><b>Can't connect?</b> Check out the <a href="https://www.espruino.com/Troubleshooting+Bangle.js" target="_blank">Bangle.js Troubleshooting page</a>
+        <p><b>Can't connect?</b> Check out the <a href="https://www.espruino.com/Troubleshooting+Bangle.js" target="_blank">Bangle.js Troubleshooting page</a></p>
         <p id="apploaderlinks"></p>
         <p>Check out <a href="https://github.com/espruino/BangleApps" target="_blank">the Source on GitHub</a>, or
           find out <a href="https://www.espruino.com/Bangle.js+App+Loader" target="_blank">how to add your own app</a></p>
@@ -134,20 +136,20 @@ <h2>App Loader</h2>
 
         <h3>Utilities</h3>
         <p>
-           <button class="btn tooltip" id="settime" data-tooltip="Set the Bangle's time to your Browser's time">Set Bangle.js Time</button>
-           <button class="btn tooltip" id="screenshot" data-tooltip="Create screenshot">Screenshot</button>
-           <button class="btn tooltip" id="downloadallapps" data-tooltip="Download all Bangle.js files to a ZIP file">Backup</button>
-           <button class="btn tooltip" id="uploadallapps" data-tooltip="Restore Bangle.js from a ZIP file">Restore</button>
+          <button class="btn tooltip" id="settime" data-tooltip="Set the Bangle's time to your Browser's time">Set Bangle.js Time</button>
+          <button class="btn tooltip" id="screenshot" data-tooltip="Create screenshot">Screenshot</button>
+          <button class="btn tooltip" id="downloadallapps" data-tooltip="Download all Bangle.js files to a ZIP file">Backup</button>
+          <button class="btn tooltip" id="uploadallapps" data-tooltip="Restore Bangle.js from a ZIP file">Restore</button>
         </p><p>
-           <button class="btn tooltip" id="removeall" data-tooltip="Delete everything, leave it blank">Remove all Apps</button>
-           <button class="btn tooltip" id="reinstallall" data-tooltip="Re-install every app, leave all data">Reinstall apps</button>
-           <button class="btn tooltip" id="installdefault" data-tooltip="Delete everything, install default apps">Install default apps</button>
-           <button class="btn tooltip" id="installfavourite" data-tooltip="Delete everything, install your favourites">Install favourite apps</button>
-           <button class="btn tooltip" id="defaultbanglesettings" data-tooltip="Reset your Bangle's settings to the defaults">Reset Settings</button>
+          <button class="btn tooltip" id="removeall" data-tooltip="Delete everything, leave it blank">Remove all Apps</button>
+          <button class="btn tooltip" id="reinstallall" data-tooltip="Re-install every app, leave all data">Reinstall apps</button>
+          <button class="btn tooltip" id="installdefault" data-tooltip="Delete everything, install default apps">Install default apps</button>
+          <button class="btn tooltip" id="installfavourite" data-tooltip="Delete everything, install your favourites">Install favourite apps</button>
+          <button class="btn tooltip" id="defaultbanglesettings" data-tooltip="Reset your Bangle's settings to the defaults">Reset Settings</button>
         </p><p>
-           <button class="btn tooltip" id="installappfromfiles" data-tooltip="Install an app by selecting its files">Install App from Files</button>
+          <button class="btn tooltip" id="installappfromfiles" data-tooltip="Install an app by selecting its files">Install App from Files</button>
         </p><p>
-           <button class="btn tooltip" id="newGithubIssue" data-tooltip="Create a new issue on GitHub">New issue on GitHub</button>
+          <button class="btn tooltip" id="newGithubIssue" data-tooltip="Create a new issue on GitHub">New issue on GitHub</button>
         </p>
         <h3>Settings</h3>
         <div class="form-group">
@@ -173,7 +175,7 @@ <h3>Settings</h3>
               <small>Used for 'Sort by Installed/Favourited' functionality. See the <a href="http://www.espruino.com/Privacy">privacy policy</a></small>.
           </label>
           <div class="form-group">
-            <select class="form-select form-inline"  id="settings-lang" style="width: 10em">
+            <select class="form-select form-inline" id="settings-lang" style="width: 10em">
               <option value="">None (English)</option>
             </select>&nbsp;&nbsp;<span>Translations (<a href="https://github.com/espruino/BangleApps/issues/1311" target="_blank">BETA - more info</a>). Any apps that are uploaded to Bangle.js after changing this will have any text automatically translated.</span>
           </div>
@@ -210,20 +212,16 @@ <h3>Device info</h3>
     </div>
 
     <footer class="floating hidden">
-      <!-- PWA Install button, hidden by default -->
       <div id="installContainer" class="hidden">
-        <button id="butInstall" type="button">
-          Install
-        </button>
+        <button id="butInstall" type="button">Install</button>
       </div>
     </footer>
 
     <script src="webtools/uart.js"></script>
     <script src="core/js/utils.js"></script>
     <script>
-      UART.ports = UART.ports.filter(e => e.includes("Bluetooth")); // all watches are Bluetooth
-      Const.CONNECTION_DEVICE = "Bluetooth"; // force Bluetooth because we know (don't look it up)#
-      // If "?dev=Bangle.js abcd" specified in URL, filter by that name
+      UART.ports = UART.ports.filter(e => e.includes("Bluetooth"));
+      Const.CONNECTION_DEVICE = "Bluetooth";
       if (window.location.search) {
         let searchParams = new URLSearchParams(window.location.search);
         if (searchParams.has("dev"))
@@ -234,7 +232,7 @@ <h3>Device info</h3>
     <script src="core/lib/marked.min.js"></script>
     <script src="core/lib/espruinotools.js"></script>
     <script src="loader.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script> <!-- for backup.js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
     <script src="backup.js"></script>
     <script src="install_from_files.js"></script>
     <script src="core/js/ui.js"></script>
@@ -245,4 +243,4 @@ <h3>Device info</h3>
     <script src="gadgetbridge.js"></script>
     <script src="emulator.js"></script>
   </body>
-</html>
+</html>
\ No newline at end of file