diff --git a/groups/home/bootstrap3/Vue3-v.6-css.html b/groups/home/bootstrap3/Vue3-v.6-css.html
deleted file mode 100644
index 013b6bc..0000000
--- a/groups/home/bootstrap3/Vue3-v.6-css.html
+++ /dev/null
@@ -1,592 +0,0 @@
-<style>
-  :root {
-    --kbccblue: #003466;
-    --kbccorange: #ff4e00;
-    --text: #111;
-  }
-
-  body {
-    color: var(--text);
-    overflow-x: hidden;
-  }
-
-  a,
-  a:hover {
-    text-decoration: none;
-  }
-
-  /* style slide out chat */
-  #lcs_slide_out_button-21944 {
-    font-size: 1.5em;
-  }
-
-  /* style header */
-  #header-div {
-    padding: 30px;
-  }
-
-  /* style the hamburger menu */
-  #hamburger-container {
-    float: left;
-  }
-  #hamburger,
-  #hamburger:active {
-    border: none;
-    outline: none;
-    background-color: #fff;
-    color: var(--kbccblue);
-  }
-  #hamburger-ul > li > .searchmenu {
-    background-color: #fff;
-  }
-  #hamburger-ul {
-    padding: 25px 0;
-  }
-
-  /* have bootstrap dropdowns fade in and out */
-  .dropdown-menu.fade {
-    display: block;
-    opacity: 0;
-    pointer-events: none;
-  }
-  .open > .dropdown-menu.fade {
-    pointer-events: auto;
-    opacity: 1;
-  }
-  .fade {
-    -webkit-transition-duration: 5s; /* Safari */
-    transition-duration: 0.5s;
-  }
-  .dropdown:hover .dropdown-menu {
-    display: block;
-  }
-
-  /* style the login at the top right */
-  #login-div {
-    float: right;
-    padding: 8px 15px 0 0;
-    color: var(--kbccblue);
-    font-size: 1.5em;
-  }
-  #login-text {
-    display: inline-block;
-    vertical-align: -2px;
-  }
-  #login-icon {
-    display: inline-block;
-    margin-left: 5px;
-  }
-
-  /* Accessible focus indicators for primary navigation elements */
-  #hamburger:focus,
-  #hamburger:focus-visible,
-  #login-div:focus,
-  #login-div:focus-visible,
-  .searchmenu:focus,
-  .searchmenu:focus-visible,
-  .nav-jumbotron-link:focus,
-  .nav-jumbotron-link:focus-visible,
-  /* OneSearch widget (central search form) */
-  .onesearch-jumbotron input:focus,
-  .onesearch-jumbotron input:focus-visible,
-  .onesearch-jumbotron button:focus,
-  .onesearch-jumbotron button:focus-visible {
-    outline: 3px solid #0056b3; /* high-contrast blue */
-    outline-offset: 2px;
-  }
-
-  /* style alert */
-  #hours-content-container {    /* this id comes from the components libguide */
-    background-color: var(--kbccblue);
-    color: #fff;
-    text-align: center;
-    font-size: 1.5em;
-    padding: 4px;
-    margin: -10px -11px -30px -11px;
-    border-radius: 3px;
-  }
-  #hours-content-container > a {
-    color: #fff
-  }
-
-  /* style navbar */
-  nav.navbar-default.main-nav-container {
-    background-color: white;
-    border: none;
-    font-size: 1.4em;
-    color: var(--text);
-    border-radius: 0;
-  }
-  .nav .open > a,
-  .nav .open > a:focus,
-  .nav .open > a:hover {
-    background-color: #fff;
-  }
-  .nav > li > a:hover {
-    outline: none;
-  }
-  .navbar-default .navbar-nav > li > a {
-    color: var(--text);
-  }
-  #navbar-center {
-    display: flex;
-    justify-content: left;
-    float: none;
-  }
-  .ga-main-navbar {
-    font-size: 1.3em;
-  }
-  #dropdownMenu1 {
-    border-radius: 0;
-  }
-  a.searchmenu {
-    color: var(--text);
-  }
-  .highlight-menu-item {
-    padding: 5px;
-  }
-  .highlight-menu-item:hover {
-    cursor: pointer;
-  }
-
-  /* style background image */
-  .kbcc-background-image {
-    background: linear-gradient(
-        to bottom,
-        rgba(255, 255, 255, 0.6) 0%,
-        rgba(255, 255, 255, 0.6) 100%
-      ),
-      url("https://libapps.s3.amazonaws.com/accounts/16298/images/library_front_view.jpg");
-    background-position: 50% 71%;
-    padding: 20px 0;
-    border-radius: 5px;
-    background-size: cover;
-    margin: -30px 0 30px 0;
-  }
-
-  /* style jumbotron */
-  .onesearch-jumbotron {
-    text-align: center;
-    margin-top: -40px;
-  }
-  #app2 {
-    margin: auto;
-    width: 80%;
-  }
-  #onesearch-header {
-    font-size: 10em;
-    margin-bottom: 0;
-  }
-  .form-width {
-    width: 100%;
-  }
-  .zero-margin {
-    margin: -2px;
-  }
-  #radios {
-    float: left;
-  }
-  .radiocontainer {
-     margin-left: 10px;
-  }
-  .radiocontainer {
-    display: inline-block;
-  }
-  #booksradio, #articlesradio, #everythingradio {
-    margin-right: 3px;
-  }
-  #advanced {
-    float: right;
-    margin-top: 10px;
-  }
-  #advanced > strong > a {
-    color: black;
-  }
-  /* add flex so that blue box-shadows line up */
-  #flex-search-form {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-  }
-  .inherit-height-from-flex {
-    height: inherit;
-  }
-
-  /* shadow for the search bar */
-  #blue-border2 {
-    box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue),
-      -5px -5px 0 var(--kbccblue), -5px 5px 0 var(--kbccblue);
-  }
-  /*#blue-border2 {
-    box-shadow: 0 -5px 0 var(--kbccblue), 0 5px 0 var(--kbccblue);
-  }*/
-  #blue-border3 {
-    box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue),
-      5px -5px 0 var(--kbccblue), 5px 5px 0 var(--kbccblue);
-  }
-
-  /* style for nav by the jumbotron */
-	.kbcc-background-image > .col-sm-4 {
-		margin-top: 10px;
-	}
-  .nav-divs-by-jumbotron {
-    text-align: center;
-    padding: 6px;
-    margin: 6px 0;
-    color: white;
-    background-color: var(--kbccblue);
-    border-radius: 3px;
-  }
-  .nav-divs-by-jumbotron > h2 {
-    font-size: 1.5em;
-    margin-bottom: 4px;
-    margin-top: 4px;
-  }
-  .nav-divs-by-jumbotron:hover {
-    background-color: #444;
-  }
-  #eq_32886 {
-    background-color: var(--kbccblue);
-    border: none;
-  }
-  .nav-divs-by-jumbotron:hover > h2 > #eq_32886,
-  #eq_32886:hover {
-    background-color: #444;
-  }
-  #bookastudyroom {
-    cursor: pointer;
-  }
-
-  /* Ensure nav-jumbotron buttons match link width */
-  .nav-jumbotron-link.btn-link {
-    display: block;
-    width: 100%;
-    padding: 0;        /* remove default Bootstrap padding */
-    border: none;      /* ensure no extra border height */
-    background: none;  /* keep background controlled by inner div */
-  }
-
-  /* Remove default heading margin for uniform button height */
-  #bookastudyroom-heading {
-    margin: 0px;
-  }
-
-  /* style link list */
-  .link-list {
-    font-size: 1.7em;
-  }
-
-  /* style the panels with the text content */
-  .panel > .show-panel {
-    background-color: var(--kbccblue);
-    text-align: center;
-  }
-  .hide-body-border {
-    border: none;
-    box-shadow: none;
-  }
-  .glyphicon-panel-title {
-    font-size: 2em;
-  }
-  .content-panel-title {
-    color: white;
-    font-size: 2em;
-  }
-  .content-panel-title > h2 {
-    margin: 7px 0;
-    font-size: 1em;
-  }
-  .panel-heading {
-    padding: 2px;
-  }
-
-  /* style the gallery */
-  .slick-slide img {
-    padding: 2px;
-    max-height: 350px !important;
-    object-fit: contain;
-    margin: 0;
-  }
-  .s-lib-public-side-header {
-    display: none;
-  }
-  .slick-active {
-    outline: 0;
-  }
-
-  /* make the slick arrows bigger; adjust margin and padding around big arrows */
-  .slick-prev:before, .slick-next:before {
-    font-size: 40px !important;
-  }
-  .slick-prev:before {
-    margin-left: -30px;
-  }
-  button.slick-next.slick-arrow, button.slick-prev.slick-arrow {
-    height: 40px !important;
-    width: 40px !important;
-  }
-  button.slick-next.slick-arrow {
-    padding-top: 3px;
-  }
-  button.slick-prev.slick-arrow {
-    padding: 3px;
-    padding-left: 30px;
-  }
-
-  /* style to make all imported boxes floating */
-  .s-lib-box-title {
-    display: none;
-  }
-  .s-lg-box {
-    box-shadow: none !important;
-  }
-  .s-lib-box .s-lib-box-title {
-    display: none;
-  }
-  .s-lib-box {
-    box-shadow: none !important;
-    border: 0 !important;
-  }
-
-  /* style the dropdown menus */
-  .dropdown-margin {
-    padding: 20px 0;
-  }
-  .bigger-fancy-text {
-    font-size: 1.2em;
-    padding: 5px;
-  }
-  .bigger-icon {
-    font-size: 1.5em;
-    margin-right: 8px;
-  }
-  .caret-text {
-    display: inline-block;
-    color: var(--kbccblue);
-    font-weight: bold;
-  }
-  .fancy-caret {
-    display: inline-block;
-    margin-left: 8px;
-    color: var(--kbccorange);
-  }
-  .open > a > .fancy-caret {
-    margin-bottom: -4px;
-    vertical-align: -4px;
-    display: inline-block;
-  }
-  .open > a > .caret-text {
-    vertical-align: -1px;
-  }
-
-  /* style footer */
-  #orange-line {
-    height: 10px;
-    background-color: var(--kbccorange);
-  }
-  #main-blue-footer {
-    background-color: var(--kbccblue);
-    color: white;
-    padding: 30px;
-  }
-  .whiteahrefs a:link,
-  .whiteahrefs a:hover,
-  .whiteahrefs a:visited,
-  .whiteahrefs a:active {
-    color: white;
-  }
-  .whiteahrefs a i {
-    margin: 4px 5px 0 0;
-    font-size: 1.5em;
-  }
-  .whiteahrefs {
-    margin-top: 10px;
-  }
-  #lighthouse-logo > a > img {
-    max-width: 150px;
-  }
-
-  /* media queries */
-
-  @media only screen and (min-width: 1px) {
-    #library-logo {
-      max-width: 100%;
-      max-height: 150px;
-    }
-    nav.navbar-default.main-nav-container {
-      margin-top: -20px;
-    }
-    .nav-by-jumbotron {
-      margin-top: 40px !important;
-    }
-    #main-blue-footer {
-      min-height: 450px;
-    }
-    .library-address {
-      float: left;
-    }
-    #cuny-logo {
-      float: left;
-      clear: both;
-      margin-top: 10px;
-    }
-    .libapps {
-      float: left;
-      clear: left;
-    }
-  }
-
-  @media only screen and (max-width: 472px) {
-    #app2 { margin-bottom: 65px; }
-    #radios > label, #radios > div > label { margin-bottom: -5px; }
-  }
-
-  @media only screen and (max-width: 360px) {
-    #app2 { margin-bottom: 85px; }
-  }
-
-  @media only screen and (max-width: 992px) {
-    #advanced {
-      display: none;
-    }
-  }
-
-  @media only screen and (max-width: 768px) {
-    #login-text {
-      display: none;
-    }
-    #radios, #advanced {
-      margin-top: -8px;
-      margin-bottom: 50px;
-   }
-    #defineYourSearch {
-      display: none;
-    }
-  }
-
-  @media only screen and (min-width: 768px) {
-    #radios {
-      margin-top: 8px;
-    }
-    .nav-by-jumbotron {
-      margin-top: 0 !important;
-    }
-    #lighthouse-logo {
-      display: inline-block;
-      float: left;
-    }
-    #main-blue-footer {
-      min-height: 210px;
-    }
-    .library-address {
-      display: inline-block;
-      margin: -10px 30px;
-      font-size: 1.1em;
-    }
-    #cuny-logo {
-      float: right;
-      clear: none;
-      margin: -10px 0;
-    }
-    .libapps {
-      float: right;
-      clear: both;
-    }
-    .libapps.whiteahrefs {
-      margin-top: -10px;
-    }
-  }
-
-  @media only screen and (min-width: 1px) and (max-width: 992px) {
-    #hamburger-alternative {
-      display: none;
-    }
-  }
-
-  @media only screen and (min-width: 992px) {
-    #header-div {
-      text-align: center;
-    }
-    #hamburger,
-    #hamburger-ul {
-      display: none;
-    }
-    #library-logo {
-      max-width: 100%;
-      max-height: 350px;
-    }
-  }
-
-  @media only screen and (min-width: 1200px) {
-    #library-logo {
-      margin-top: -3px;
-    }
-  }
-</style>
-
-<!-- scripts to make the Book a Study Room widget run -->
-<script src="https://kbcc-cuny.libcal.com/js/equipment.min.js"></script>
-<script>
-  jQuery(function () {
-    jQuery("#eq_32886, #bookastudyroom").LibCalEquipmentBooking({
-      iid: 5570,
-      gid: 32886,
-      eid: 0,
-      width: 560,
-      height: 680,
-    });
-  });
-</script>
-
-<!-- If browser is pre-ES6, show a warning-->
-<script>
-  window.isES6 = false;
-</script>
-<script>
-  <!-- test ES6 functionality -->
-  // Arrow functions support
-  () => {};
-
-  // Class support
-  class __ES6FeatureDetectionTest {}
-
-  // Object initializer property and method shorthands
-  let es6a = true;
-  let es6b = {
-    es6a,
-    es6c() {
-      return true;
-    },
-    es6d: [1, 2, 3],
-  };
-
-  // Object destructuring
-  let { es6c, es6d } = es6b;
-
-  // Spread operator
-  let es6e = [...es6d, 4];
-
-  // ternary operator
-  let es6f = es6a ? "ternary" : "no ternary";
-
-  // nullish coalescing
-  es6a ??= 10;
-
-  window.isES6 = true;
-</script>
-
-<script type="text/javascript">
-  window.onload = function () {
-    <!-- display the error message if feature detection flags old browser -->
-    if (window.isES6 == false) {
-      document.getElementById("obsolete_browser_alert").innerHTML =
-        '<div class="alert alert-danger" style="text-align: center;"><strong>WARNING! Unsupported browser!</strong><br />It looks like you\'re using an old browser.<br />This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge.<br />If you continue with this browser, many parts of this site will not work and you will see unexpected results.</div>';
-    }
-  };
-</script>
-
-<!-- FontAwesome -->
-<script
-  src="https://kit.fontawesome.com/4c28f38a07.js"
-  crossorigin="anonymous"
-></script>
diff --git a/groups/home/bootstrap3/Vue3-v.6.html b/groups/home/bootstrap3/Vue3-v.6.html
deleted file mode 100644
index 8aa4b45..0000000
--- a/groups/home/bootstrap3/Vue3-v.6.html
+++ /dev/null
@@ -1,356 +0,0 @@
-<body class="s-lib-public-body">
-  <!-- Google Tag Manager (noscript) -->
-  <noscript>
-    <iframe
-      src="https://www.googletagmanager.com/ns.html?id=GTM-NXHWQX3"
-      height="0"
-      width="0"
-      style="display: none; visibility: hidden"
-    ></iframe>
-  </noscript>
-  <!-- End Google Tag Manager (noscript) -->
-  <!-- BEGIN: content -->
-  <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
-    <div id="s-lg-index-cols">
-      <div id="app1">
-        <!-- vue app1 -->
-        <div class="row">
-          <div id="obsolete_browser_alert"></div>
-          <div class="col-xs-12" id="header-div">
-            <div class="dropdown" id="hamburger-container">
-              <button
-                class="btn btn-default dropdown-toggle"
-                type="button"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="true"
-                aria-label="Hamburger Menu"
-                id="hamburger"
-              >
-                <i class="fas fa-bars" style="font-size: 2em"></i>
-              </button>
-              <ul
-                class="dropdown-menu fade"
-                aria-labelledby="hamburger"
-                id="hamburger-ul"
-              >
-                <li
-                  v-for="item in hamburger"
-                  v-bind:key="item.id"
-                >
-                  <a
-                    class="searchmenu"
-                    v-bind:aria-label="item.description"
-                    v-bind:href="item.link"
-                    v-bind:target="item.target_blank"
-                  >
-                    <hamburger-component v-bind:item="item"></hamburger-component>
-                  </a>
-                </li>
-              </ul>
-            </div>
-            <!-- end of hamburger container -->
-            <a
-              href="https://cuny-kb.primo.exlibrisgroup.com/discovery/account?vid=01CUNY_KB:CUNY_KB"
-              id="login-div"
-              aria-labelledby="login-text"
-            >
-              <div id="login-text">Login</div>
-              <div id="login-icon"><i class="fas fa-user"></i></div>
-            </a>
-            <img
-              id="library-logo"
-              class="image-fail"
-              alt="Kibbee Library logo"
-              src="https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg"
-            />
-            {{content_box_33471502}}
-          </div>
-          <!-- end of header div -->
-        </div>
-        <!-- end of row -->
-        <div class="row" id="hamburger-alternative">
-          <div class="col-xs-12">
-            <navig-component v-bind:navlistofmenus="navlistofmenus"></navig-component>
-          </div>
-          <!-- end of col-xs-12 -->
-        </div>
-        <!--end of row-->
-      </div>
-      <!--end of Vue app1-->
-    </div>
-    <div class="container" style="margin-top: 14px">
-      <div class="row kbcc-background-image">
-        <div class="col-sm-8">
-          <div id="app2" style="clear: both;">
-            <onesearch-component></onesearch-component>
-          </div><!-- end of Vue app2 -->
-        </div>
-        <div class="col-sm-4">
-          <div class="nav-by-jumbotron">
-            <button
-              id="eq_32886"
-              type="button"
-              class="ga-by-jumbotron ga-by-jumbotron-rooms nav-jumbotron-link btn-link"
-              style="display:block;width:100%;"
-              aria-label="Book A Study Room"
-            >
-              <div class="nav-divs-by-jumbotron" id="bookastudyroom">
-                <h2 id="bookastudyroom-heading">Book A Study Room</h2>
-              </div>
-            </button>
-            <a
-              href="https://library.kbcc.cuny.edu/az.php"
-              class="ga-by-jumbotron ga-by-jumbotron-databases"
-            >
-              <div class="nav-divs-by-jumbotron">
-                <h2>Databases</h2>
-              </div>
-            </a>
-            <a
-              href="https://library.kbcc.cuny.edu/guides"
-              class="ga-by-jumbotron ga-by-jumbotron-guides"
-            >
-              <div class="nav-divs-by-jumbotron">
-                <h2>Research Guides</h2>
-              </div>
-            </a>
-            <a
-              href="https://library.kbcc.cuny.edu/faq"
-              class="ga-by-jumbotron ga-by-jumbotron-print"
-            >
-              <div class="nav-divs-by-jumbotron">
-                <h2>FAQ</h2>
-              </div>
-            </a>
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-7 col-lg-6">
-          <div class="panel panel-default hide-body-border">
-            <div class="panel-heading show-panel">
-              <span class="panel-title content-panel-title">
-                <h2>Library Links</h2>
-              </span>
-            </div>
-            <div class="panel-body">
-              <div class="row">
-                <div class="col-sm-6">
-                  <ul class="link-list">
-                    <li>
-                      <a
-                        href="https://library.kbcc.cuny.edu/ENGLISH24"
-                        class="ga-library-links"
-                      >
-                        How to Use the Library
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8155422080006129"
-                        class="ga-library-links"
-                      >
-                        2024-2025 Textbooks
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8150905740006129"
-                        class="ga-library-links"
-                      >
-                        Streaming Video
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8156195890006129"
-                        class="ga-library-links"
-                      >
-                        Comic Books &amp; Graphic Novels
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-                <div class="col-sm-6">
-                  <ul class="link-list">
-                    <li>
-                      <a
-                        href="http://kbcc.ezproxy.cuny.edu/login?url=https://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h"
-                        target="_blank"
-                        class="ga-library-links"
-                      >
-                        Academic Search Complete
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="http://kbcc.ezproxy.cuny.edu/login?url=https://search.proquest.com/usmajordailies/advanced/news/fromDatabasesLayer?accountid=38336"
-                        target="_blank"
-                        class="ga-library-links"
-                      >
-                        US Newspapers
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="http://www.nytimes.com/passes"
-                        target="_blank"
-                        class="ga-library-links"
-                      >
-                        NY Times Free Pass
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="https://library.kbcc.cuny.edu/newarrivals/leisure"
-                        class="ga-library-links"
-                      >
-                        Leisure Reading Collection
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="col-md-5 col-lg-6">
-          <div class="panel panel-default hide-body-border">
-            <div class="panel-heading show-panel">
-              <span class="panel-title content-panel-title">
-                <h2>Featured in the Library</h2>
-              </span>
-            </div>
-            <div class="panel-body">{{content_box_25912431}}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="container">
-      <div class="row">
-        <!-- BEGIN: Page Footer -->
-        <div id="orange-line"></div>
-        <div id="main-blue-footer">
-          <div id="lighthouse-logo">
-            <a href="https://www.kbcc.cuny.edu">
-              <img
-                src="https://libapps.s3.amazonaws.com/accounts/16298/images/Orange_Vector_Mac_Building.png"
-                alt="Kingsborough Lighthouse logo"
-                loading="lazy"
-              />
-            </a>
-          </div>
-          <div class="library-address">
-            <div class="whiteahrefs">
-              <strong>Robert J. Kibbee Library</strong><br />
-              2001 Oriental Blvd<br />
-              Brooklyn, NY, 11209<br />
-              <a href="tel:+1-718-368-5632">718-368-5632</a>
-            </div>
-            <div class="whiteahrefs">
-              <a
-                aria-label="Instagram"
-                href="https://www.instagram.com/kbcclibrary/"
-                target="_blank"
-              >
-                <i aria-hidden="true" class="fab fa-instagram"></i>
-              </a>
-              <a
-                aria-label="Goodreads"
-                href="https://www.goodreads.com/user/show/51717966-kingsborough-library"
-                target="_blank"
-              >
-                <i aria-hidden="true" class="fab fa-goodreads"></i>
-              </a>
-              <a
-                aria-label="TikTok"
-                href="https://www.tiktok.com/@kbcclibrary?lang=en"
-                target="_blank"
-              >
-                <i aria-hidden="true" class="fab fa-tiktok"></i>
-              </a>
-              <a
-                aria-label="YouTube"
-                href="https://www.youtube.com/channel/UCpeJWrnzLXEizw8cMvVp-_Q/videos"
-                target="_blank"
-              >
-                <i aria-hidden="true" class="fab fa-youtube"></i>
-              </a>
-              <a
-                aria-label="Spotify"
-                href="https://open.spotify.com/user/313lfmvr4ezmkb2mhodzd5ubzg4a"
-                target="_blank"
-              >
-                <i aria-hidden="true" class="fab fa-spotify"></i>
-              </a>
-            </div>
-          </div>
-          <div id="cuny-logo">
-            <a href="https://www.cuny.edu" target="_blank">
-              <img
-                src="https://libapps.s3.amazonaws.com/accounts/16298/images/CUNYlogo-white.png"
-                alt="CUNY logo"
-                loading="lazy"
-              />
-            </a>
-          </div>
-          <div class="whiteahrefs libapps">
-            <a
-              href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365"
-            >
-              LibApps
-            </a>
-            |
-            <a
-              href="https://cuny-kb.alma.exlibrisgroup.com/mng/login?auth=SAML"
-            >
-              Alma
-            </a>
-          </div>
-          <div style="height: 10px"></div>
-        </div>
-        <!-- END: Page Footer -->
-      </div>
-    </div>
-  </div>
-
-  <div id="s-lib-alert" title="">
-    <div id="s-lib-alert-content"></div>
-  </div>
-  <div id="s-lib-popover-title" class="hide">
-    <span class="text-info"><strong>title</strong></span>
-    <button
-      type="button"
-      id="popclose"
-      class="close"
-      onclick="jQuery('.s-lib-popover').popover('hide')"
-    >
-      &times;
-    </button>
-  </div>
-  <div id="s-lib-popover-content" class="hide">
-    <i class="fa fa-refresh fa-spin"></i> Loading...
-    <button class="btn btn-default btn-sm popclose" type="button">Close</button>
-  </div>
-  <div id="s-lib-scroll-top" title="Back to Top">
-    <span class="fa-stack fa-lg">
-      <i class="fa fa-square-o fa-stack-2x"></i>
-      <i
-        class="fa fa-angle-double-up fa-stack-1x"
-        style="position: relative; bottom: 2px"
-      ></i>
-    </span>
-  </div>
-
-  <!-- LibChat widget script -->
-  <script src="https://kbcc-cuny.libanswers.com/load_chat.php?hash=f7d1629a91e178fd0f799322e803b6e7"></script>
-
-  <!-- add Vue scripts -->
-  <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> development -->
-  <script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script><!-- production -->
-  <script
-    type="text/javascript"
-    src="https://libapps.s3.amazonaws.com/sites/2365/include/main6.js"
-  ></script>
-</body>
diff --git a/groups/home/bootstrap5/Kibbee library logo inverted.jpg b/groups/home/bootstrap5/Kibbee library logo inverted.jpg
new file mode 100644
index 0000000..6a844d7
Binary files /dev/null and b/groups/home/bootstrap5/Kibbee library logo inverted.jpg differ
diff --git a/groups/home/bootstrap5/home1.css b/groups/home/bootstrap5/home1.css
index 0e1e405..6f76ab0 100644
--- a/groups/home/bootstrap5/home1.css
+++ b/groups/home/bootstrap5/home1.css
@@ -3,11 +3,27 @@
     --kbccblue: #003466;
     --kbccorange: #ff4e00;
     --text: #111;
+    --bg: #fff;
+    --bg-surface: #fff;
+    --hover-dark: #444;
+    --focus-outline: #0056b3;
+    --link-color: black;
+  }
+
+  [data-bs-theme="dark"] {
+    --text: #e0e0e0;
+    --bg: #1a1a2e;
+    --bg-surface: #25253e;
+    --hover-dark: #555;
+    --focus-outline: #ff4e00;
+    --link-color: #ccc;
   }
 
   body {
     color: var(--text);
+    background-color: var(--bg);
     overflow-x: hidden;
+    transition: background-color 0.2s ease, color 0.2s ease;
   }
 
   a,
@@ -53,14 +69,14 @@
   #hamburger:active {
     border: none;
     outline: none;
-    background-color: #fff;
+    background-color: var(--bg-surface);
     color: var(--kbccblue);
   }
   #hamburger::after {
     display: none;
   }
   #hamburger-ul > li > .searchmenu {
-    background-color: #fff;
+    background-color: var(--bg-surface);
   }
   #hamburger-ul {
     padding: 25px 0;
@@ -112,31 +128,37 @@
     margin-left: 5px;
   }
 
-  /* Accessible focus indicators for primary navigation elements */
-  #hamburger:focus,
-  #hamburger:focus-visible,
-  #login-div:focus,
-  #login-div:focus-visible,
-  .searchmenu:focus,
-  .searchmenu:focus-visible,
-  .nav-jumbotron-link:focus,
-  .nav-jumbotron-link:focus-visible,
-  .ga-by-jumbotron:focus,
-  .ga-by-jumbotron:focus-visible,
-  .ga-library-links:focus,
-  .ga-library-links:focus-visible,
-  /* OneSearch widget (central search form) */
-  .onesearch-jumbotron input:focus,
-  .onesearch-jumbotron input:focus-visible,
-  .onesearch-jumbotron button:focus,
-  .onesearch-jumbotron button:focus-visible,
-  /* Navigation dropdown toggles */
-  .dropdown-toggle:focus,
-  .dropdown-toggle:focus-visible {
-    outline: 3px solid #0056b3; /* high-contrast blue */
-    outline-offset: 2px;
+  [data-bs-theme="dark"] #hamburger,
+  [data-bs-theme="dark"] #hamburger:active {
+    background-color: var(--bg);
+    color: white;
   }
 
+  [data-bs-theme="dark"] #login-div {
+    color: white;
+  }
+
+  /* Ensure jumbotron links fill full width (prevents shrinking on focus) */
+  a.ga-by-jumbotron {
+    display: block;
+  }
+
+  /* Accessible focus indicators for all interactive elements */
+  a:focus,
+  a:focus-visible,
+  button:focus,
+  button:focus-visible,
+  input:focus,
+  input:focus-visible,
+  select:focus,
+  select:focus-visible,
+  [tabindex]:focus,
+  [tabindex]:focus-visible {
+    outline: 3px solid var(--focus-outline) !important;
+    outline-offset: 2px !important;
+  }
+
+
   /* style alert */
   #hours-content-container {    /* this id comes from the components libguide */
     background-color: var(--kbccblue);
@@ -150,16 +172,37 @@
   #hours-content-container > a {
     color: #fff
   }
+  [data-bs-theme="dark"] #hours-content-container {
+    background-color: var(--kbccblue);
+    color: var(--text);
+  }
+  [data-bs-theme="dark"] #hours-content-container > a {
+    color: var(--text);
+  }
 
   /* style navbar */
   nav.navbar-light.main-nav-container {
-    background-color: white !important;
-    background: white !important;
+    background-color: var(--bg-surface) !important;
+    background: var(--bg-surface) !important;
     border: none;
     font-size: 1.4em;
     color: var(--text);
     border-radius: 0;
     padding: 5px 0;
+    margin-left: 12px;
+    margin-right: 12px;
+  }
+  [data-bs-theme="dark"] nav.navbar-light.main-nav-container {
+    background-color: var(--kbccblue) !important;
+    background: var(--bg) !important;
+    color: white;
+    border-radius: 5px;
+    margin-left: 12px;
+    margin-right: 12px;
+  }
+  [data-bs-theme="dark"] .navbar-light .navbar-nav > li > a,
+  [data-bs-theme="dark"] .caret-text {
+    color: white;
   }
   .main-nav-dropdown {
     margin: 0 8px;
@@ -167,7 +210,7 @@
   .nav .show > a,
   .nav .show > a:focus,
   .nav .show > a:hover {
-    background-color: #fff;
+    background-color: var(--bg-surface);
   }
   .nav > li > a:hover {
     outline: none;
@@ -204,12 +247,6 @@
 
   /* style background image */
   .kbcc-background-image {
-    background: linear-gradient(
-        to bottom,
-        rgba(255, 255, 255, 0.6) 0%,
-        rgba(255, 255, 255, 0.6) 100%
-      ),
-      url("https://libapps.s3.amazonaws.com/accounts/16298/images/library_front_view.jpg");
     background-position: 50% 71%;
     padding: 20px 0;
     border-radius: 5px;
@@ -253,12 +290,18 @@
   #radios label {
     font-weight: bolder;
   }
+  [data-bs-theme="dark"] #radios label {
+    color: white;
+  }
+  [data-bs-theme="dark"] #radios input[type="radio"] {
+    accent-color: white;
+  }
   #advanced {
     float: right;
     margin-top: 10px;
   }
   #advanced > strong > a {
-    color: black;
+    color: var(--link-color);
   }
   /* add flex so that blue box-shadows line up */
   #flex-search-form {
@@ -274,15 +317,26 @@
   #primoQueryTemp {
     border-radius: 0;
   }
+  [data-bs-theme="dark"] #primoQueryTemp {
+    background-color: #fff;
+    color: #111;
+  }
+  [data-bs-theme="dark"] #primoQueryTemp::placeholder {
+    color: #666;
+  }
   .onesearchsubmit {
     border-radius: 0;
     padding: 6px 12px;
   }
+  [data-bs-theme="dark"] .onesearchsubmit {
+    margin: 1px;
+  }
   #blue-border2 {
     flex: 5;
   }
   #blue-border3 {
     flex: 1;
+    padding: 0;
   }
 
   /* shadow for the search bar */
@@ -316,7 +370,7 @@
     margin-top: 4px;
   }
   .nav-divs-by-jumbotron:hover {
-    background-color: #444;
+    background-color: var(--hover-dark);
   }
   #eq_32886 {
     background-color: var(--kbccblue);
@@ -324,7 +378,7 @@
   }
   .nav-divs-by-jumbotron:hover > h2 > #eq_32886,
   #eq_32886:hover {
-    background-color: #444;
+    background-color: var(--hover-dark);
   }
   #bookastudyroom {
     cursor: pointer;
@@ -337,6 +391,7 @@
     padding: 0;        /* remove default Bootstrap padding */
     border: none;      /* ensure no extra border height */
     background: none;  /* keep background controlled by inner div */
+    text-decoration: none;
   }
 
   /* Remove default heading margin for uniform button height */
@@ -349,6 +404,10 @@
     font-size: 1.7em;
   }
 
+  [data-bs-theme="dark"] .link-list a {
+    color: white;
+  }
+
   /* External link icon styling (WCAG 2.4.4) */
   .external-link-icon {
     font-size: 0.7em;
@@ -409,6 +468,10 @@
     padding: 3px;
     padding-left: 30px;
   }
+  [data-bs-theme="dark"] .slick-prev:before,
+  [data-bs-theme="dark"] .slick-next:before {
+    color: white;
+  }
 
   /* style to make all imported boxes floating */
   .s-lib-box-title {
@@ -424,6 +487,10 @@
     box-shadow: none !important;
     border: 0 !important;
   }
+  [data-bs-theme="dark"] .s-lib-box,
+  [data-bs-theme="dark"] .s-lg-box {
+    background-color: var(--bg);
+  }
 
   /* style the dropdown menus */
   .dropdown-margin {
@@ -453,7 +520,7 @@
   }
 
   /* style footer */
-  #orange-line {
+  .orange-line {
     height: 10px;
     background-color: var(--kbccorange);
   }
@@ -462,6 +529,9 @@
     color: white;
     padding: 30px;
   }
+  [data-bs-theme="dark"] #main-blue-footer {
+    background-color: var(--bg);
+  }
   .whiteahrefs a:link,
   .whiteahrefs a:hover,
   .whiteahrefs a:visited,
@@ -479,6 +549,51 @@
     max-width: 150px;
   }
 
+  /* dark mode toggle button */
+  #theme-toggle {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 9999;
+    background: none;
+    border: 2px solid var(--kbccblue);
+    color: var(--kbccblue);
+    border-radius: 50%;
+    width: 44px;
+    height: 44px;
+    font-size: 1.2em;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+    background-color: var(--bg);
+  }
+  #theme-toggle:hover {
+    background-color: var(--kbccblue);
+    color: #fff;
+  }
+  [data-bs-theme="dark"] #theme-toggle {
+    border-color: #ffc107;
+    color: #ffc107;
+  }
+  [data-bs-theme="dark"] #theme-toggle:hover {
+    background-color: #ffc107;
+    color: #1a1a2e;
+  }
+
+  /* card body dark mode background */
+  .card-body {
+    background-color: var(--bg);
+    transition: background-color 0.2s ease;
+  }
+
+  /* dropdown menu dark mode background */
+  .dropdown-menu {
+    background-color: var(--bg-surface);
+    transition: background-color 0.2s ease;
+  }
+
   /* media queries */
 
   @media only screen and (min-width: 1px) {
@@ -614,53 +729,6 @@
   });
 </script>
 
-<!-- If browser is pre-ES6, show a warning-->
-<script>
-  window.isES6 = false;
-</script>
-<script>
-  <!-- test ES6 functionality -->
-  // Arrow functions support
-  () => {};
-
-  // Class support
-  class __ES6FeatureDetectionTest {}
-
-  // Object initializer property and method shorthands
-  let es6a = true;
-  let es6b = {
-    es6a,
-    es6c() {
-      return true;
-    },
-    es6d: [1, 2, 3],
-  };
-
-  // Object destructuring
-  let { es6c, es6d } = es6b;
-
-  // Spread operator
-  let es6e = [...es6d, 4];
-
-  // ternary operator
-  let es6f = es6a ? "ternary" : "no ternary";
-
-  // nullish coalescing
-  es6a ??= 10;
-
-  window.isES6 = true;
-</script>
-
-<script type="text/javascript">
-  window.onload = function () {
-    <!-- display the error message if feature detection flags old browser -->
-    if (window.isES6 == false) {
-      document.getElementById("obsolete_browser_alert").innerHTML =
-        '<div class="alert alert-danger" role="alert" style="text-align: center;"><strong>WARNING! Unsupported browser!</strong><br />It looks like you\'re using an old browser.<br />This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge.<br />If you continue with this browser, many parts of this site will not work and you will see unexpected results.</div>';
-    }
-  };
-</script>
-
 <!-- FontAwesome -->
 <script
   src="https://kit.fontawesome.com/4c28f38a07.js"
diff --git a/groups/home/bootstrap5/home1.html b/groups/home/bootstrap5/home1.html
index 522bf90..afb35e0 100644
--- a/groups/home/bootstrap5/home1.html
+++ b/groups/home/bootstrap5/home1.html
@@ -1,4 +1,15 @@
 <body class="s-lib-public-body">
+  <script>
+    // Prevent flash of wrong theme by applying saved/OS preference immediately
+    (function() {
+      var stored = localStorage.getItem("kbcc-theme");
+      var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+      var isDark = stored ? stored === "dark" : prefersDark;
+      if (isDark) {
+        document.body.setAttribute("data-bs-theme", "dark");
+      }
+    })();
+  </script>
   <!-- Google Tag Manager (noscript) -->
   <noscript>
     <iframe
@@ -69,7 +80,7 @@
               id="library-logo"
               class="image-fail"
               alt="Kibbee Library logo"
-              src="https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg"
+              :src="isDark ? 'https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/Kibbee_library_logo_inverted2.jpg' : 'https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg'"
             />
             {{content_box_33471502}}
           </div>
@@ -83,6 +94,14 @@
           <!-- end of col-xs-12 -->
         </div>
         <!--end of row-->
+        <button
+          id="theme-toggle"
+          @click="toggleTheme"
+          :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+          type="button"
+        >
+          <i :class="isDark ? 'fas fa-sun' : 'fas fa-moon'" aria-hidden="true"></i>
+        </button>
       </div>
       <!--end of Vue app1-->
     </div>
@@ -243,7 +262,7 @@
     <div class="container">
       <div class="row">
         <!-- BEGIN: Page Footer -->
-        <div id="orange-line"></div>
+        <div class="orange-line"></div>
         <div id="main-blue-footer">
           <div id="lighthouse-logo">
             <a href="https://www.kbcc.cuny.edu">
@@ -327,7 +346,8 @@
           </div>
           <div style="height: 10px"></div>
         </div>
-        <!-- END: Page Footer -->
+				<div class="orange-line"></div>
+				<!-- END: Page Footer -->
       </div>
     </div>
   </div>
diff --git a/groups/home/bootstrap5/home1.js b/groups/home/bootstrap5/home1.js
index 4d2edcb..e0cde50 100644
--- a/groups/home/bootstrap5/home1.js
+++ b/groups/home/bootstrap5/home1.js
@@ -1,3 +1,46 @@
+// ES6 feature detection
+(function () {
+  window.isES6 = false;
+  try {
+    new Function([
+      "// Arrow functions",
+      "() => {};",
+      "",
+      "// Class support",
+      "class __ES6FeatureDetectionTest {}",
+      "",
+      "// Object initializer property and method shorthands",
+      "let es6a = true;",
+      "let es6b = {",
+      "  es6a,",
+      "  es6c() { return true; },",
+      "  es6d: [1, 2, 3],",
+      "};",
+      "",
+      "// Object destructuring",
+      "let { es6c, es6d } = es6b;",
+      "",
+      "// Spread operator",
+      "let es6e = [...es6d, 4];",
+      "",
+      "// Ternary operator",
+      "let es6f = es6a ? 'ternary' : 'no ternary';",
+      "",
+      "// Nullish coalescing",
+      "es6a ??= 10;",
+    ].join("\n"))();
+    window.isES6 = true;
+  } catch (e) {}
+})();
+
+// Display warning if ES6 detection failed
+window.onload = function () {
+  if (window.isES6 == false) {
+    document.getElementById("obsolete_browser_alert").innerHTML =
+      '<div class="alert alert-danger" role="alert" style="text-align: center;"><strong>WARNING! Unsupported browser!</strong><br />It looks like you\'re using an old browser.<br />This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge.<br />If you continue with this browser, many parts of this site will not work and you will see unexpected results.</div>';
+  }
+};
+
 const hamburgerComponent = {
   template: `<div class="bigger-fancy-text">
     <i v-bind:class="item.icon" aria-hidden="true"></i>
@@ -179,6 +222,7 @@ const app1 = createApp({
   },
   data() {
     return {
+      isDark: false,
       hamburger: [
         {
           link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
@@ -411,7 +455,56 @@ const app1 = createApp({
       },
     };
   },
+  methods: {
+    toggleTheme() {
+      this.isDark = !this.isDark;
+      this.applyTheme(this.isDark);
+      localStorage.setItem("kbcc-theme", this.isDark ? "dark" : "light");
+    },
+    applyTheme(isDark) {
+      if (isDark) {
+        document.body.setAttribute("data-bs-theme", "dark");
+      } else {
+        document.body.removeAttribute("data-bs-theme");
+      }
+      this.updateBackgroundOverlay(isDark);
+    },
+    updateBackgroundOverlay(isDark) {
+      var el = document.querySelector(".kbcc-background-image");
+      if (el && el.style.backgroundImage) {
+        // Extract the url() part from the existing background-image
+        var match = el.style.backgroundImage.match(/url\([^)]+\)/);
+        if (match) {
+          var overlay = isDark
+            ? "rgba(0,0,0,0.4)"
+            : "rgba(255,255,255,0.6)";
+          el.style.backgroundImage =
+            "linear-gradient(to bottom, " + overlay + " 0%, " + overlay + " 100%), " + match[0];
+        }
+      }
+    }
+  },
   mounted() {
+    // Theme initialization
+    var stored = localStorage.getItem("kbcc-theme");
+    var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+    if (stored) {
+      this.isDark = stored === "dark";
+    } else {
+      this.isDark = prefersDark;
+    }
+    this.applyTheme(this.isDark);
+
+    // Listen for OS preference changes (only applies when no manual override)
+    var self = this;
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function(e) {
+      if (!localStorage.getItem("kbcc-theme")) {
+        self.isDark = e.matches;
+        self.applyTheme(self.isDark);
+      }
+    });
+
     // Dynamic aria-expanded for hamburger menu (WCAG 4.1.2)
     const hamburger = document.getElementById('hamburger');
     const hamburgerContainer = document.getElementById('hamburger-container');
@@ -436,3 +529,24 @@ const app2 = createApp({
 });
 app2.mount("#app2");
 
+// Randomly set the background image for .kbcc-background-image
+(function () {
+  const images = [
+    "https://libapps.s3.amazonaws.com/accounts/16298/images/library_front_view.jpg",
+    "https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/copy_for_it.jpg",
+    "https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/Library_Website_Background_Images_005.jpg",
+    "https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/Library_Website_Background_Images_002.jpg",
+  ];
+  var picked = images[Math.floor(Math.random() * images.length)];
+  var el = document.querySelector(".kbcc-background-image");
+  if (el) {
+    // Check theme for correct overlay color
+    var stored = localStorage.getItem("kbcc-theme");
+    var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+    var isDark = stored ? stored === "dark" : prefersDark;
+    var overlay = isDark ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.6)";
+    el.style.backgroundImage =
+      "linear-gradient(to bottom, " + overlay + " 0%, " + overlay + " 100%), url('" + picked + "')";
+  }
+})();
+