diff --git a/groups/new-homepage-5/homepage5-js-css.html b/groups/new-homepage-5/homepage5-js-css.html
new file mode 100644
index 0000000..413bc39
--- /dev/null
+++ b/groups/new-homepage-5/homepage5-js-css.html
@@ -0,0 +1,245 @@
+<style>
+
+body {
+        color: #111;
+}
+
+/* style navbar */
+
+.navbar-default {
+        background-color: #eee;
+        border: none;
+        font-size: 1.4em;
+        color: #111;
+        margin-top: -15px;
+        margin-bottom: 28px;
+        border-radius: 0px;
+}
+
+
+.navbar-default .navbar-nav>li>a {
+        color: #111;
+}
+
+.faux-card {
+        margin-left: 16px;
+}
+
+/* style jumbotron */
+
+.jumbotron {
+        color: #003466;
+        border-radius: 0px !important;
+        background-color: white;
+}
+
+.zero-margin {
+        margin-left: -4px;
+        margin-right: -4px;
+}
+
+#dropdownMenu1 {
+        border-radius: 0px;
+}
+
+/* style link list */
+.link-list {
+        font-size: 2em;
+}
+
+/* style for nav by the jumbotron */
+.nav-by-jumbotron {
+        margin-top: -6px;
+}
+
+.nav-divs-by-jumbotron {
+        border: solid #003466 1px;
+        text-align: center;
+        padding: 8px;
+        margin: 6px 0px;
+        color: #003466;
+}
+
+.nav-divs-by-jumbotron>h2 {
+        font-size: 1.5em;
+        margin-bottom: 4px;
+        margin-top: 4px;
+}
+
+.nav-divs-by-jumbotron:hover {
+       background-color: #ddd;
+}
+
+/* style the panels with the text content */
+.panel>.show-panel > .panel-title { 
+        color: #003466;
+        text-align: center;
+}
+
+.panel > .show-panel {
+        background-color: white;
+        border-bottom: solid #003466 7px;
+}
+
+.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 0px;
+        font-size: 1em;
+}
+
+.panel-heading {
+       padding: 2px;
+}
+
+.slick-slide img {
+        padding: 2px;
+}
+
+/* style the gallery */
+img {
+        max-height: 350px !important;
+        object-fit: contain;
+        margin: 0px;
+}
+
+.s-lib-public-side-header {
+        display: none;
+}
+
+.slick-active {
+        outline: 0;
+}
+
+/* style the hours */
+.hours {
+        text-align:center;
+}
+
+.hours-panel-body {
+        padding: 10px 5px 10px 5px;
+}
+
+.padding-0 {
+        padding-left: 4px;
+        padding-right: 4px;
+        flex:1 1 auto;
+        display: flex;
+}
+
+.equal {
+        display: -webkit-box;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+}
+
+.panel {
+        flex:1 0 100%;
+}
+
+.panel-outline-color {
+        border: solid #003466 1px;
+}
+
+.vertical-align {
+        display: flex;
+        align-items: center;
+        height: 100%;
+}
+
+.more-link {
+        text-align: center;
+        width: 100%;
+}
+
+/* style the yamm menu */
+.dropdown-margin {
+        margin-right: 50px;
+}
+
+.yamm1 {
+        max-width: 900px;
+}
+
+.yamm2 {
+        max-width: 675px;
+}
+
+.yamm3 {
+        max-width: 300px;
+}
+
+/*!
+ * Yamm!3 - Yet another megamenu for Bootstrap 3
+ * http://geedmo.github.com/yamm3
+ *
+ * @geedmo - Licensed under the MIT license
+ */
+.yamm .nav,
+.yamm .collapse,
+.yamm .dropup,
+.yamm .dropdown {
+  position: static;
+}
+.yamm .container {
+  position: relative;
+}
+.yamm .dropdown-menu {
+  left: auto;
+}
+.yamm .yamm-content {
+  padding: 20px 30px;
+}
+.yamm .dropdown.yamm-fw .dropdown-menu {
+  left: 0;
+  right: 0;
+}
+/* End of Yamm */
+</style>
+
+<!-- the configuration file for the hours widget -->
+<script type="text/javascript" src="//libapps.s3.amazonaws.com/sites/2365/include/hours.js"></script>
+
+<!-- the code for the hours widget -->
+<script type="text/javascript">
+window.onload = function () {
+        const h = JSON.parse(hours)
+        const options_weekday = { weekday: 'long' };
+        const options_date = { month: 'short', day: 'numeric' }
+        for (var i = 0; i < h.length; i++) {
+                let targetDate = new Date(h[i]["Date"] + "T00:00:00.000-05:00");
+                let today = new Date();
+                if (targetDate.getFullYear() === today.getFullYear() &&
+                    targetDate.getMonth() === today.getMonth() &&
+                    targetDate.getDate() === today.getDate()) {
+                           document.getElementById('hours0').innerHTML = "<p><strong>Today</strong><br />" + targetDate.toLocaleDateString("en-US", options_date) + "</p><p>" + h[i]["Hours"] + "</p>"
+                           var start = true;
+                           var count = 1;
+                } else if (start === true && count < 5 && h[i]["Hours"] === "Closed" ) {
+                        document.getElementById('hours' + count).innerHTML = "<span style='color:#666;'><p>" + targetDate.toLocaleDateString("en-US", options_weekday) + "<br />" + targetDate.toLocaleDateString("en-US", options_date) + "</p><p>" + h[i]["Hours"] + "</p></span>"
+                        count++;
+               } else if (start === true && count < 5 && h[i]["Hours"] != "Closed") {
+                        document.getElementById('hours' + count).innerHTML = "<p>" + targetDate.toLocaleDateString("en-US", options_weekday) + "<br />" + targetDate.toLocaleDateString("en-US", options_date) + "</p><p>" + h[i]["Hours"] + "</p>"
+                        count++;
+               };
+        };
+};
+</script>
+
+<!-- Load bootstrap accessibility libraries (https://github.com/paypal/bootstrap-accessibility-plugin) -->
+<link rel="stylesheet" type="text/css" href="//libapps.s3.amazonaws.com/sites/2365/include/bootstrap-accessibility.min.css">	
+<script type="text/javascript" src="//libapps.s3.amazonaws.com/sites/2365/include/bootstrap-accessibility.min.js"></script>
diff --git a/groups/new-homepage-5/homepage5-template.html b/groups/new-homepage-5/homepage5-template.html
new file mode 100644
index 0000000..270dbbf
--- /dev/null
+++ b/groups/new-homepage-5/homepage5-template.html
@@ -0,0 +1,353 @@
+<body class="s-lib-public-body">
+	<!-- BEGIN: content -->
+	<div id="s-lib-public-main" class="s-lib-main container-fluid s-lib-side-borders">
+		<div  id="s-lg-index-cols" class="row container-fluid">
+                        <div class="row">
+                                <div class="col-xs-12">
+                                        {{public_header}}
+                                </div>
+                         </div>
+                         <div class="row">
+                                <div class="col-xs-12">
+                                        <nav class="navbar navbar-default yamm">
+                                                <div class="container-fluid">
+                                                        <div>
+                                                                <ul class="nav navbar-nav">
+                                                                        <li><a href="#">Library Account</a></li>
+                                                                        <li class="dropdown">
+                                                                                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Find It<span class="caret"></span></a>
+                                                                                <ul class="dropdown-menu dropdown-margin">
+                                                                                        <li>
+                                                                                                <div class="yamm-content yamm1">
+                                                                                                        <div class="row">
+                                                                                                                <div class="col-xs-12 col-md-4 col-lg-3">
+                                                                                                                        <span class="glyphicon glyphicon-music"></span> 
+                                                                                                                        <strong>Peer Reviewed Articles</strong> 
+                                                                                                                        <p class="faux-card">Find scholarly articles in the Kingsborough collections</p>
+                                                                                                                </div>
+                                                                                                                <div class="col-xs-12 col-md-4 col-lg-3">
+                                                                                                                        <span class="glyphicon glyphicon-off"></span> 
+                                                                                                                        <strong>Print Books</strong> 
+                                                                                                                        <p class="faux-card">Find hard copy books available at Kingsborough and across CUNY</p>
+                                                                                                                </div>
+                                                                                                                <div class="col-xs-12 col-md-4 col-lg-3">
+                                                                                                                        <span class="glyphicon glyphicon-time"></span> 
+                                                                                                                        <strong>Databases A-Z</strong> 
+                                                                                                                        <p class="faux-card">An alphabetical listing of the library's electronic collections</p>
+                                                                                                                </div>
+                                                                                                                <div class="clearfix visible-md-block"></div>
+                                                                                                                <div class="col-xs-12 col-md-4 col-lg-3">
+                                                                                                                        <span class="glyphicon glyphicon-home"></span> 
+                                                                                                                        <strong>eReserves</strong>
+                                                                                                                        <p class="faux-card">Find class materials through the library</p>
+                                                                                                                </div>
+                                                                                                                <div class="clearfix visible-lg-block"></div>
+                                                                                                                <div class="col-xs-12 col-md-4 col-lg-3">
+                                                                                                                        <span class="glyphicon glyphicon-refresh"></span>
+                                                                                                                        <strong>Journal Search</strong>
+                                                                                                                        <p class="faux-card">Find newspapers, magazines and scholarly journals</p>
+                                                                                                                </div>
+                                                                                                                <div class="col-xs-12 col-md-4 col-lg-3">
+                                                                                                                        <span class="glyphicon glyphicon-repeat"></span>
+                                                                                                                        <strong>eBooks</strong>
+                                                                                                                        <p class="faux-card">Find electronic books in the Kingsborough collections</p>
+                                                                                                                </div>
+                                                                                                                <div class="clearfix visible-md-block"></div>
+                                                                                                                <div class="col-xs-12 col-md-4 col-lg-3">
+                                                                                                                        <span class="glyphicon glyphicon-download"></span>
+                                                                                                                        <strong>CUNY Academic Works</strong>
+                                                                                                                        <p class="faux-card">Research and publications from scholars across CUNY</p>
+                                                                                                                </div>
+                                                                                                                <div class="col-xs-12 col-md-4 col-lg-3">
+                                                                                                                        <span class="glyphicon glyphicon-tag"></span>
+                                                                                                                        <strong>KBCC Bookstore</strong>
+                                                                                                                        <p class="faux-card">Search for and purchase your textbook from KBCC</p>
+                                                                                                                </div>
+                                                                                                                <div class="clearfix visible-lg-block"></div>
+                                                                                                                <div class="col-xs-12 col-md-4 col-lg-3">
+                                                                                                                        <span class="glyphicon glyphicon-music"></span> 
+                                                                                                                        <strong>Newspaper Search</strong> 
+                                                                                                                        <p class="faux-card">Find newspaper articles using OneSearch</p>
+                                                                                                                </div>
+                                                                                                                <div class="clearfix visible-md-block"></div>
+                                                                                                                <div class="col-xs-12 col-md-4 col-lg-3">
+                                                                                                                        <span class="glyphicon glyphicon-off"></span> 
+                                                                                                                        <strong>Video</strong> 
+                                                                                                                        <p class="faux-card">Find DVDs and streaming media</p>
+                                                                                                                </div>
+                                                                                                                <div class="col-xs-12 col-md-4 col-lg-3">
+                                                                                                                        <span class="glyphicon glyphicon-time"></span> 
+                                                                                                                        <strong>Research Guides</strong> 
+                                                                                                                        <p class="faux-card">Guides and tutorials from the KBCC librarians</p>
+                                                                                                                </div>
+                                                                                                                <div class="col-xs-12 col-md-4 col-lg-3">
+                                                                                                                        <span class="glyphicon glyphicon-home"></span> 
+                                                                                                                        <strong>Google Scholar</strong>
+                                                                                                                        <p class="faux-card">Search for scholarly articles at Kingsborough and beyond, using Google</p>
+                                                                                                                </div>
+                                                                                                        </div>
+                                                                                                </div>
+                                                                                        </li>
+                                                                              </ul>
+                                                                       </li>
+                                                                        <li class="dropdown">
+                                                                                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
+                                                                                <ul class="dropdown-menu dropdown-margin">
+                                                                                        <li>
+                                                                                                <div class="yamm-content yamm2">
+                                                                                                        <div class="row">
+                                                                                                                <div class="col-xs-12 col-md-4">
+                                                                                                                        <span class="glyphicon glyphicon-music"></span> 
+                                                                                                                        <strong>Library Instruction</strong> 
+                                                                                                                        <p class="faux-card">Book an instruction session with a librarian</p>
+                                                                                                                </div>
+                                                                                                                <div class="col-xs-12 col-md-4">
+                                                                                                                        <span class="glyphicon glyphicon-off"></span> 
+                                                                                                                        <strong>Interlibrary Loan</strong> 
+                                                                                                                        <p class="faux-card">Borrow books and articles from other libraries</p>
+                                                                                                                </div>
+                                                                                                                <div class="col-xs-12 col-md-4">
+                                                                                                                        <span class="glyphicon glyphicon-time"></span> 
+                                                                                                                        <strong>Give feedback</strong> 
+                                                                                                                        <p class="faux-card">Help us make the library better</p>
+                                                                                                                </div>
+                                                                                                                <div class="clearfix visible-md-block visible-lg-block"></div>
+                                                                                                                <div class="col-xs-12 col-md-4">
+                                                                                                                        <span class="glyphicon glyphicon-home"></span> 
+                                                                                                                        <strong>Media Services</strong>
+                                                                                                                        <p class="faux-card">Equipment requests and DVD borrowing</p>
+                                                                                                                </div>
+                                                                                                                <div class="col-xs-12 col-md-4">
+                                                                                                                        <span class="glyphicon glyphicon-home"></span> 
+                                                                                                                        <strong>Purchase or add to reserve</strong>
+                                                                                                                        <p class="faux-card">Suggest a book to purchase or to add to reserve</p>
+                                                                                                                </div>
+                                                                                                                <div class="col-xs-12 col-md-4">
+                                                                                                                        <span class="glyphicon glyphicon-home"></span> 
+                                                                                                                        <strong>Library FAQ</strong>
+                                                                                                                        <p class="faux-card">Find answers to frequently asked questions about KBCC Library</p>
+                                                                                                                </div>
+                                                                                                        </div>
+                                                                                                </div>
+                                                                                        </li>
+                                                                                </ul>
+                                                                        </li>
+                                                                        <li class="dropdown">
+                                                                                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us<span class="caret"></span></a>
+                                                                                <ul class="dropdown-menu dropdown-margin">
+                                                                                        <li>
+                                                                                                <div class="yamm-content yamm3">
+                                                                                                        <div class="row">
+                                                                                                                <div class="col-xs-12">
+                                                                                                                        <span class="glyphicon glyphicon-music"></span> 
+                                                                                                                        <strong>Faculty & Staff</strong> 
+                                                                                                                        <p class="faux-card">Meet the Kingsborough Library</p>
+                                                                                                                </div>
+                                                                                                                <div class="col-xs-12">
+                                                                                                                        <span class="glyphicon glyphicon-off"></span> 
+                                                                                                                        <strong>Subject Liaisons</strong> 
+                                                                                                                        <p class="faux-card">Find your library liaison</p>
+                                                                                                                </div>
+                                                                                                                <div class="col-xs-12">
+                                                                                                                        <span class="glyphicon glyphicon-time"></span> 
+                                                                                                                        <strong>Library Departments</strong> 
+                                                                                                                        <p class="faux-card">Explore the library's functions</p>
+                                                                                                                </div>
+                                                                                                                <div class="col-xs-12">
+                                                                                                                        <span class="glyphicon glyphicon-time"></span> 
+                                                                                                                        <strong>Campus Map</strong> 
+                                                                                                                        <p class="faux-card">How to find us</p>
+                                                                                                                </div>
+                                                                                                                <div class="col-xs-12">
+                                                                                                                        <span class="glyphicon glyphicon-time"></span> 
+                                                                                                                        <strong>Hours</strong> 
+                                                                                                                        <p class="faux-card">See the library's opening hours</p>
+                                                                                                                </div>
+                                                                                                        </div>
+                                                                                                </div>
+                                                                                        </li>
+                                                                                </ul>
+                                                                        </li>
+                                                               </ul>
+                                                       </div>
+                                               </div>
+                                        </nav>
+                                </div>
+                        </div>
+                </div>
+                <div class="container">
+			<div class="row">
+                                 <div class="col-sm-8">
+
+<form class="form-inline" style="text-align: center;">
+  <div class="form-group">
+
+<div class="dropdown input-group zero-margin">
+  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    Dropdown
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+    <label class="sr-only" for="searchterms">Search terms</label>
+    <div class="input-group zero-margin">
+      <input type="text" class="form-control" id="searchterms" placeholder="Search terms">
+    </div>
+
+    <div class="input-group zero-margin">
+      <button type="submit" class="btn btn-default form-control">Search</button>
+    </div>
+
+  </div>
+</form>
+
+                                 </div>
+                                 <div class="col-sm-4">
+                                         <div class="nav-by-jumbotron">
+                                                 <div class="nav-divs-by-jumbotron"><h2>Databases</h2></div>
+                                                 <div class="nav-divs-by-jumbotron"><h2>Ask a Librarian</h2></div>
+                                                 <div class="nav-divs-by-jumbotron"><h2>Research Consultations</h2></div>
+                                                 <div class="nav-divs-by-jumbotron"><h2>Research Guides</h2></div>
+                                                 </ul>
+                                          </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>A list of links</h2></span>
+                                               </div>
+                                               <div class="panel-body">
+                                                       <div class="row">
+                                                               <div class="col-sm-6">
+                                                                       <ul class="link-list">
+                                                                               <li><a href="#">One</a></li>
+                                                                               <li><a href="#">Two</a></li>
+                                                                               <li><a href="#">Three</a></li>
+                                                                               <li><a href="#">Four</a></li>
+                                                                       </ul>
+                                                              </div>
+                                                              <div class="col-sm-6">
+                                                                       <ul class="link-list">
+                                                                               <li><a href="#">Five</a></li>
+                                                                               <li><a href="#">Six</a></li>
+                                                                               <li><a href="#">Seven</a></li>
+                                                                               <li><a href="#">Eight</a></li>
+                                                                       </ul>
+                                                               </div>
+                                                       </div>
+                                               </div>
+                                        </div>
+                                       <div class="panel panel-default hide-body-border">
+                                               <div class="panel-heading show-panel">
+                                                       <span class="panel-title content-panel-title"><h2>Upcoming library hours</h2></span>
+                                               </div>
+                                               <div class="panel-body">
+                                                       <div class="row equal">
+                                                               <div class="col-xs-3 col-sm-2 padding-0">
+                                                                        <div class="panel panel-default panel-outline-color">
+                                                                               <div class="panel-body hours-panel-body">
+                                                                                      <span id="hours0" class="hours"></span>
+                                                                               </div>
+                                                                       </div>
+                                                               </div>
+                                                               <div class="col-xs-3 col-sm-2 padding-0">
+                                                                       <div class="panel panel-default panel-outline-color">
+                                                                               <div class="panel-body hours-panel-body">
+                                                                                      <span id="hours1" class="hours"></span>
+                                                                               </div>
+                                                                       </div>
+                                                               </div>
+                                                               <div class="col-xs-3 col-sm-2 padding-0">
+                                                                       <div class="panel panel-default panel-outline-color">
+                                                                               <div class="panel-body hours-panel-body">
+                                                                                       <span id="hours2" class="hours"></span>
+                                                                               </div>
+                                                                       </div>
+                                                               </div>
+                                                               <div class="col-sm-2 col hidden-xs padding-0">
+                                                                       <div class="panel panel-default panel-outline-color">
+                                                                               <div class="panel-body hours-panel-body">
+                                                                                       <span id="hours3" class="hours"></span>
+                                                                               </div>
+                                                                       </div>
+                                                               </div>
+                                                               <div class="col-sm-2 hidden-xs padding-0">
+                                                                       <div class="panel panel-default panel-outline-color">
+                                                                               <div class="panel-body hours-panel-body">
+                                                                                       <span id="hours4" class="hours"></span>
+                                                                               </div>
+                                                                       </div>
+                                                               </div>
+                                                               <div class="col-xs-3 col-sm-2 padding-0">
+                                                                       <div class="panel panel-default panel-outline-color">
+                                                                               <div class="panel-body hours-panel-body vertical-align">
+                                                                                       <div class="more-link"><a href="https://kbcc.cuny.libguides.com/calendar">More hours</a></div>
+                                                                               </div>
+                                                                       </div>
+                                                               </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>What's new in the library</h2></span>
+                                               </div>
+                                               <div class="panel-body">
+                                                       {{content_boxes}}                             
+                                               </div>
+                                        </div>
+                                </div>
+                        </div>
+                </div>
+                <div class="container-fluid">
+                        <div class="row">
+	                        <!-- BEGIN: Page Footer -->
+	                        <div style="height:10px; background-color:#ff4e00"></div>
+		                <div style="height:50px; background-color:#003466; color:white; padding:5px 20px 0px 20px">
+		                        <span>
+			                        Robert J. Kibbee Library, 2001 Oriental Blvd, Brooklyn, NY, 11235<br>
+		                        </span>
+                                        <span style="float:right" class="whiteahrefs">
+			                        <a href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365">Login to LibApps</a>
+		                        </span>
+		                        <span style="clear:both" class="whiteahrefs">
+			                        718-368-5632 | <a href="mailto:reference.desk@kbcc.cuny.edu">reference.desk@kbcc.cuny.edu</a> | 
+		                                <a href="https://www.twitter.com/kbcclibrary">@kbcclibrary</a>
+		                        </span>
+	                        </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>
+	<!-- BEGIN: Custom Footer -->
+	{{public_footer}}
+	<!-- END: Custom Footer -->
+</body>