diff --git a/webapp/src/main/webapp/css/visualization/capabilitymap/graph.css b/webapp/src/main/webapp/css/visualization/capabilitymap/graph.css
index 51cb46c9b1..44b6000ce9 100755
--- a/webapp/src/main/webapp/css/visualization/capabilitymap/graph.css
+++ b/webapp/src/main/webapp/css/visualization/capabilitymap/graph.css
@@ -41,19 +41,34 @@ body {
 
 /* Contains all the graphics. */
 #container {
-    /*width: 1200px;*/width:940px;
+    /*width: 1200px;*/
+    max-width:940px;
+    width: 100%;
     height: auto;
-    /* margin:0 auto; */
-    /*margin-left:-130px;*/
     position:relative;
-    /*box-shadow:0px 0px 20px -6px #000000;*/
     margin-top:15px;
+    transition: 0.5s ease all;
+    flex-wrap: wrap;
+
+}
+
+@media (min-width: 1200px) {
+    #container.wide-container {    
+        width: 1200px;
+        max-width: 1200px;
+        margin-left:-130px;
+        margin-right:-130px;
+    }
+
+    #container > #center-container {
+        width: 66%;
+    }
 }
 
 #left-container,
 #right-container,
 #center-container {
-    height:600px;
+    /* height:600px; */
     position:absolute;
     top:0;
 }
@@ -352,4 +367,4 @@ footer {
 footer p.copyright {
     margin-left:0px;
     padding-left:0px;
-}
+}
\ No newline at end of file
diff --git a/webapp/src/main/webapp/js/visualization/capabilitymap/graph_new.js b/webapp/src/main/webapp/js/visualization/capabilitymap/graph_new.js
index e461dcdcad..b321c46ae3 100755
--- a/webapp/src/main/webapp/js/visualization/capabilitymap/graph_new.js
+++ b/webapp/src/main/webapp/js/visualization/capabilitymap/graph_new.js
@@ -1025,11 +1025,11 @@ var unhide = function() {
     $("#resetButton").removeAttr("disabled");
     if ($(window).width() > 1230) {
         $("#container").css("box-shadow", "0px 0px 20px -6px #000000");
-        $("#container").animate({"height" : "600px", "width" : "1200px", "margin-bottom" : "20px", "margin-left" : (($("#main-content").width() - 1200) / 2) + "px"}, 500);
-        $("#center-container").css("width", "900px");
+        $("#container").animate({"height" : "600px", "width" : "auto", "margin-bottom" : "20px"}, 500);
+        $("#container").addClass("wide-container");
     } else {
-        $("#container").animate({"height" : "600px"});
-        $("#center-container").css("width", "640px");
+        $("#container").animate({"height" : "auto"});
+        // $("#center-container").css("width", "640px");
     }
     $("#helptext").fadeOut();
     $("#center-container").fadeIn();
diff --git a/webapp/src/main/webapp/themes/willow/css/grid.css b/webapp/src/main/webapp/themes/willow/css/grid.css
new file mode 100644
index 0000000000..c42642283c
--- /dev/null
+++ b/webapp/src/main/webapp/themes/willow/css/grid.css
@@ -0,0 +1,164 @@
+.container,
+.container-fluid,
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
+  width: 100%;
+  padding-right: var(--bs-gutter-x, 0.75rem);
+  padding-left: var(--bs-gutter-x, 0.75rem);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.row {
+    --bs-gutter-x: 1.5rem;
+    --bs-gutter-y: 0;
+    display: flex;
+    flex-wrap: wrap;
+    /* margin-top: calc(-1 * var(--bs-gutter-y));
+    margin-right: calc(-0.5 * var(--bs-gutter-x));
+    margin-left: calc(-0.5 * var(--bs-gutter-x)); */
+  }
+  .row > * {
+    box-sizing: border-box;
+    flex-shrink: 0;
+    width: 100%;
+    max-width: 100%;
+    /* padding-right: calc(var(--bs-gutter-x) * 0.5);
+    padding-left: calc(var(--bs-gutter-x) * 0.5); */
+    /* margin-top: var(--bs-gutter-y); */
+  }
+
+.col-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+}
+
+.col-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+}
+
+.col-3 {
+    flex: 0 0 auto;
+    width: 25%;
+}
+
+.col-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+}
+
+.col-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+}
+
+.col-6 {
+    flex: 0 0 auto;
+    width: 50%;
+}
+
+.col-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+}
+
+.col-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+}
+
+.col-9 {
+    flex: 0 0 auto;
+    width: 75%;
+}
+
+.col-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+}
+
+.col-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+}
+
+.col-12 {
+    flex: 0 0 auto;
+    width: 100%;
+}
+
+
+@media (min-width: 768px) {
+    .col-md {
+      flex: 1 0 0%;
+    }
+  
+    .col-md-auto {
+      flex: 0 0 auto;
+      width: auto;
+    }
+  
+    .col-md-1 {
+      flex: 0 0 auto;
+      width: 8.33333333%;
+    }
+  
+    .col-md-2 {
+      flex: 0 0 auto;
+      width: 16.66666667%;
+    }
+  
+    .col-md-3 {
+      flex: 0 0 auto;
+      width: 25%;
+    }
+  
+    .col-md-4 {
+      flex: 0 0 auto;
+      width: 33.33333333%;
+    }
+  
+    .col-md-5 {
+      flex: 0 0 auto;
+      width: 41.66666667%;
+    }
+  
+    .col-md-6 {
+      flex: 0 0 auto;
+      width: 50%;
+    }
+  
+    .col-md-7 {
+      flex: 0 0 auto;
+      width: 58.33333333%;
+    }
+  
+    .col-md-8 {
+      flex: 0 0 auto;
+      width: 66.66666667%;
+    }
+  
+    .col-md-9 {
+      flex: 0 0 auto;
+      width: 75%;
+    }
+  
+    .col-md-10 {
+      flex: 0 0 auto;
+      width: 83.33333333%;
+    }
+  
+    .col-md-11 {
+      flex: 0 0 auto;
+      width: 91.66666667%;
+    }
+  
+    .col-md-12 {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/webapp/src/main/webapp/themes/willow/css/screen.css b/webapp/src/main/webapp/themes/willow/css/screen.css
index 75b62c8356..c109654655 100644
--- a/webapp/src/main/webapp/themes/willow/css/screen.css
+++ b/webapp/src/main/webapp/themes/willow/css/screen.css
@@ -23,6 +23,7 @@ VIVO willow theme: screen styles
 @charset "UTF-8";
 
 @import url("reset.css");
+@import url("grid.css");
 @import url("willow.css");
 @import url("page-createAndLink.css");
 @import url("../../../local/css/local.css");
diff --git a/webapp/src/main/webapp/themes/willow/css/willow.css b/webapp/src/main/webapp/themes/willow/css/willow.css
index 0a7c4fdb26..e16e199085 100644
--- a/webapp/src/main/webapp/themes/willow/css/willow.css
+++ b/webapp/src/main/webapp/themes/willow/css/willow.css
@@ -76,6 +76,52 @@ h5 {
     font-size: .875em;
     color: #064d68;
 }
+
+.clearfix::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+/* ------------------------------------------------->  */
+/* BOOTSTRAP MODIFICATION -------------------------->  */
+/* ------------------------------------------------->  */
+
+
+/* @media (min-width: 1400px) {
+    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+      max-width: 970px;
+    }
+} */
+
+@media (min-width: 970px) {
+    .container-xl, .container-lg, .container-md, .container-sm, .container {
+        max-width: 970px;
+    }
+}
+
+.row-margin-fill {
+    --bs-gutter-x: 1.5rem;
+    --bs-gutter-y: 0;
+    margin-top: calc(-1 * var(--bs-gutter-y));
+    margin-right: calc(-.5 * var(--bs-gutter-x));
+    margin-left: calc(-.5 * var(--bs-gutter-x));
+}
+
+.container {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+/* .row {
+    margin-left: 0;
+    margin-right: 0;;
+} */
+
+* {
+    box-sizing: border-box;
+}
+
 /* ------------------------------------------------->  */
 /* EDITING STYLES ---------------------------------->  */
 /* ------------------------------------------------->  */
@@ -91,6 +137,7 @@ input[type="password"] {
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     margin-bottom: .8em;
+    max-width: 100%;
 }
 input.block {
     margin-bottom: 20px;
@@ -98,6 +145,7 @@ input.block {
 label {
     margin-top: .5em;
     margin-bottom: .5em;
+    display: block;
 }
 label.inline {
     display: inline;
@@ -240,9 +288,23 @@ p.submit {
 .editingForm table {
     border-color: #dfe6e6;
 }
-.editingForm td {
+
+.editingForm > table > tbody > tr > td.verticalfieldlabel {
     padding: 3px;
 }
+
+.editingForm > table > tbody > tr > td.verticalfieldlabel:first-child {
+    width: 40%;
+}
+
+
+@media (min-width: 768px) {
+    .editingForm > table > tbody > tr > td.verticalfieldlabel:first-child {
+        width: 15%;
+    }
+}
+
+
 .editingForm .entryFormHead {
     background-color: #f1f2ee;
     border-color: #dfe6e6;
@@ -308,13 +370,18 @@ a.return:active {
     line-height: 2em !important;
 }
 .row, .rowvert {
+    background-color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+}
+/* .row, .rowvert {
     background-color: #f7f9f9;
     color: #5F6464;
     font-size: 10pt;
     font-style: normal;
     text-align: left;
     line-height: 2em;
-}
+} */
 .rowalternate {
     background-color: #fff;
     color: #5F6464;
@@ -446,24 +513,54 @@ hr.formDivider {
 /* HEADER ------>  */
 #branding {
     position: relative;
-    width: 970px;
+    max-width: 970px;
     height: 114px;
     margin: 0 auto;
 }
 /* BRANDING ------>  */
 h1.vivo-logo {
     position: absolute;
-    width: 442px;
-    height: 59px;
+    /* width: 442px; */
+    max-width: 442px;
+    /* width: 65%; */
+    width: 94px;
+    height: 114px;
+    /* top: 13px; */
     top: 28px;
     left: 0;
     background: url(../images/VIVO-logo.png) 0 0 no-repeat;
+    background-position: top left;
+    background-size: 209px;
+    margin-left: 10px;
+
 }
+
 h1.vivo-logo a {
     display: block;
-    width: 386px;
+    /* width: 386px; */
+    max-width: 138px;
     height: 59px;
 }
+
+@media (min-width: 768px) {
+    #branding {
+        height: 114px;
+    }
+
+    h1.vivo-logo {
+        width: 50%;
+        top: 28px;
+        background-size: contain;
+
+    }
+
+    h1.vivo-logo a {
+        max-width: 386px;
+    }
+}
+
+
+
 /* HEADER NAV------>  */
 ul#header-nav {
     float: right;
@@ -495,18 +592,34 @@ ul#header-nav a.log-out {
     padding-left: 10px;
 }
 /* SEARCH ------>  */
+
 #search {
+    width: 100%;
+    margin-top: 25px;
     position: absolute;
-    width: 396px;
+    /* width: 396px; */
+    max-width: 393px;
     height: 38px;
     top: 40px;
-    right: 10px;
-    padding-top: 5px;
+    right: 0;
+    /* padding-top: 5px; */
+    padding: 5px 10px 0px;
+}
+
+@media (min-width: 768px) {
+    #search {
+        width: 50%;
+        margin-top: 0;
+    }
 }
+
 #search-field {
-    width: 396px;
+    /* width: 396px; */
+    display: flex;
     height: 38px;
     background: url(../images/search-interior-pages.png) 0 0 no-repeat;
+    background-position-x: right;
+    border-radius: 4px;
 }
 #search-field input.search {
     text-decoration: none;
@@ -514,18 +627,19 @@ ul#header-nav a.log-out {
     color: #fff;
     font-size: 14px;
     border: none;
-    padding-left: 25px;
-    padding-top: 8px;
+    padding: 0 20px;
     cursor: pointer;
 }
 input.search-vivo {
     float: left;
-    width: 290px;
+    /* width: 290px; */
+    width: 100%;
     height: 25px;
     border: 0;
     font-size: 16px;
     color: #5e6363;
     margin-left: 10px;
+    margin-right: 10px;
     margin-top: 5px;
     padding: 0;
 }
@@ -534,9 +648,11 @@ input.search-vivo {
 }
 /* MAIN NAVIGATION------>  */
 ul#main-nav {
-    display: block;
-    width: 968px;
-    height: 46px;
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    max-width: 968px;
+    /* height: 46px; */
     border: 1px solid #dce4e3;
     background-color: #f7f9f9;
     margin: 0 auto;
@@ -545,7 +661,6 @@ ul#main-nav {
     color: #706a66;
 }
 #main-nav li {
-    float: left;
     line-height: 46px;
     background: url(../images/separator-main-nav.jpg) right -2px no-repeat;
 }
@@ -564,10 +679,16 @@ ul#main-nav {
     background: url(../images/selected-main-nav.jpg) left -1px no-repeat;
     margin-left: 18px;
 }
+
+ul.dropdown li#user-menu a {
+    margin-right: 0;
+}
+
 /* WRAPPER CONTENT------>  */
 #wrapper-content {
     clear: both;
-    width: 930px;
+    width: 100%;
+    max-width: 970px;
     margin: 0 auto;
     background: #fff;
     min-height: 710px;
@@ -576,11 +697,11 @@ ul#main-nav {
 /* INTRO-BLURB ------>  */
 #intro {
     float: left;
-    width: 570px;
+    /* width: 570px; */
     padding-bottom: 50px;
 }
 body.loggedIn #intro {
-    width: 98%;
+    width: 100%;
 }
 #intro h2 {
     padding: 35px 0 12px 24px;
@@ -607,14 +728,15 @@ ul.individual-urls-people li a {
 }
 /* LOG IN------>  */
 #login {
-    float: right;
-    width: 314px;
+    /* float: right; */
+    max-width: 332px;
     border: 1px solid #e8ece9;
-    margin-right: 25px;
+    /* margin-right: 25px; */
     padding-bottom: 30px;
     margin-bottom: 30px;
     overflow: hidden;
-    margin-top: 20px;
+    margin-top: 30px;
+    padding: 15px;
 }
 body.login #login {
     float: none;
@@ -622,8 +744,8 @@ body.login #login {
 #login h2 {
     font-size: 22px;
     color: #2485ae;
-    padding-left: 15px;
-    padding-top: 18px;
+    /* padding-left: 15px; */
+    /* padding-top: 18px; */
     border-bottom: none;
 }
 h3.internal-auth:hover {
@@ -649,20 +771,27 @@ h3.internal-auth:hover {
     color: #a12424;
     padding-top: 5px;
 }
+
+#login-form > div {
+    padding: 10px 28px;
+}
+
 #login-form label {
     display: block;
     color: #5e6363;
     padding-top: 0;
-    padding-left: 38px;
+    /* padding-left: 38px; */
     font-size: 14px;
 }
+
 #login-form input.text-field {
     border: 0;
     font-size: 14px;
     padding: 5px;
-    width: 219px;
-    height: 24px;
-    margin-left: 38px;
+    /* width: 219px; */
+    width: 100%;
+    height: 43px;
+    /* margin-left: 38px; */
     background: #fff;
     border: 1px solid #e0dfdf;
     border-radius: 5px;
@@ -674,15 +803,14 @@ h3.internal-auth:hover {
     background-color: rgba(57, 138, 172, .1);
 }
 #login-form p.submit {
-    width: 100px;
+    width: 100%;
     height: 40px;
     margin-top: 20px;
-    margin-left: 38px;
+    /* margin-left: 38px; */
 }
 #login-form p.submit-password {
     height: 40px;
     margin-top: 20px;
-    margin-left: 38px;
 }
 #login-form input.checkbox-remember-me {
     float: left;
@@ -739,10 +867,7 @@ p.password-note {
 }
 #flash-msg-container,
 #welcome-msg-container {
-    margin-bottom: 8px;
-    margin-top: -10px;
-    margin-right:-10px;
-    height:34px;
+    padding: 10px;
 }
 p.external-auth {
     margin: 0 auto;
@@ -762,8 +887,11 @@ p.external-auth a.blue:hover {
 /* HOME SEARCH ------>  */
 #search-home {
     float: left;
-    width: 533px;
+    /* width: 533px; */
+    width: 100%;
+    max-width: 533px;
     margin: 30px 0 0 0;
+    /* margin-right: 24px; */
 }
 #search-home h3 {
     padding: 0;
@@ -773,24 +901,26 @@ p.external-auth a.blue:hover {
 		padding-left: 24px;
 }
 #search-home-field {
-    width: 483px;
-    height: 44px;
+    /* width: 483px; */
+    display: flex;
+    width: 100%;
+    height: 43px;
     background: url(../images/search-field-and-button.gif) 0 0 no-repeat;
+    background-position-x: right;
 }
 #search-home-field input.search {
     text-decoration: none;
-    background-color: transparent;
+    background-color: #5e6363;
     color: #fff;
     font-size: 18px;
     border: none;
-    padding-left: 23px;
-    padding-top: 8px;
+    padding: 11px 22px;
     cursor: pointer;
 }
 input.search-home-vivo {
     float: left;
     margin: 10px 0 0 8px;
-    width: 350px;
+    max-width: 350px;
     height: 20px;
     border: 0;
     font-size: 18px;
@@ -801,24 +931,25 @@ input.search-home-vivo {
 
 /* SEARCH HOME------>  */
 
-#search-home-field {
-		background: url(../images/search-field-and-button.gif) 0 0 no-repeat;
-		width: 520px;
-}
-#search-home-field input.search {
-	 	background-color: transparent;
-	 	color: #fff;
-		border: none;
-}
+
 a.filter-search {
-	right: 109px;
+    position: relative;
+	right: initial;
 }
 input.search-homepage {
-		border: 0;
-		background-color: #f9fafa;
-		background-position: right;
-		opacity: .5;
-		text-align:right;
+    border: 0;
+    background-color: #f9fafa;
+    background-position: right;
+    opacity: .5;
+    text-align:right;
+    width: 100%;
+    flex-grow: 1;
+    margin: 0;
+    height: 100%;
+}
+
+#search-homepage .search-home-field .limit-search {
+    position: relative;
 }
 
 .filter-default {
@@ -832,7 +963,7 @@ input.search-homepage {
 		color: #fff;
 		background-color: #2d3535;
 		color: #fff;
-		right: 109px;
+		right: 0;
 }
 #filter-search-nav li {
 		background-image: none;
@@ -883,6 +1014,8 @@ a.view-all-style {
 		border-top: 1px dotted #dbe3e3; /* stroke */
 		border-bottom: 1px dotted #dbe3e3; /* stroke */
 		background-color: #fff; /* layer fill content */
+        position: relative;
+        padding-bottom: 20px;
 }
 .home-sections h4 {
 		border-top: 1px solid rgba(220,228,227,.42); /* stroke */
@@ -892,8 +1025,21 @@ a.view-all-style {
 		color: #fff;
 }
 #home-stats {
-		margin-top: 30px;
+	margin-top: 30px;
+    width: 100%;
+    height: 100%;
+    padding-bottom: 30px;
 }
+
+#stats li:first-child {
+    margin-left: 0;
+}
+
+#stats {
+    width: initial;
+    padding-left: 35px;
+}
+
 #stats li {
 		-moz-border-radius: 6px;
 		-webkit-border-radius: 6px;
@@ -911,11 +1057,26 @@ a.view-all-style {
 		color: #fff;
 		opacity: .5;
 }
-#home-research  {
-	width: 297px;
-	float: left;
-	clear: both;
+
+@media (min-width: 768px) {
+    #home-research  {
+        flex: 0 0 auto;
+        width: 33.3333333%;
+    }
+}
+
+#home-research > ul {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}
+
+#viewMoreFac {
+    position: absolute;
+    bottom: 0;
+    right: 0; 
 }
+
 #home-research table {
 	margin: 0.7em 0 0.6em 35px;
     width: calc(100% - 35px);
@@ -923,6 +1084,11 @@ a.view-all-style {
 #home-research th:nth-child(1) {
     text-align: left;
 }
+
+#home-research th:nth-child(2) {
+    text-align: center;
+}
+
 #home-research td:nth-child(2) {
     text-align: center;
     padding-top: 0.6em;
@@ -946,11 +1112,14 @@ a.view-all-style {
 	margin-left: 4px;
 	text-align: center;
 }
-#home-academic-depts  {
-	width: 297px;
-	margin-left: 15px;
-	float: left;
+
+@media (min-width: 768px) {
+    #home-academic-depts  {
+        flex: 0 0 auto;
+        width: 33.3333333%;
+    }
 }
+
 #home-academic-depts h4,
 #home-faculty-mbrs h4,
 #home-geo-focus h4,
@@ -962,17 +1131,28 @@ a.view-all-style {
     list-style: disc outside url(../../../images/arrowIcon.gif);
 	padding: 0.4em 0 0.6em 1.8em;
 }
+
+#home-academic-depts ul:nth-child(2) {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}
+
+
 #home-academic-depts li {
 	line-height: 1.25em;
 	padding-top: 1.0em;
 	padding-right: 4px;
 	font-size: 0.9em;
 }
-#home-faculty-mbrs  {
-	width: 297px;
-	margin: 0 0 20px 15px;
-	float: left;
+
+@media (min-width: 768px) {
+    #home-faculty-mbrs  {
+        flex: 0 0 auto;
+        width: 33.3333333%;
+    }
 }
+
 div#tempSpacing {
     margin-top:30px;
     padding-left:20px;
@@ -1022,7 +1202,6 @@ div#adjImgHeight {
 	display: inline-block;
     margin-top: 30px;
     height: 632px;
-    width: 921px;
 }
 #home-geo-focus div#timeIndicatorGeo {
     text-align:center;
@@ -1031,7 +1210,7 @@ div#adjImgHeight {
 /* FOOTER------>  */
 footer {
     clear: both;
-    width: 970px;
+    max-width: 970px;
     height: 88px;
     margin: 0 auto;
     font-size: .7em;
@@ -1039,22 +1218,26 @@ footer {
     background-color: #fff;
 }
 footer p.copyright {
-    float: left;
-    padding-top: 55px;
-    padding-left: 30px;
-    width: 600px;
+    padding-left: 10px;
 }
+
 footer p.copyright small {
     font-size: 1em;
 }
+
+footer > .row  {
+    padding-top: 40px;
+}
+
 ul#footer-nav {
     float: right;
     list-style: none;
-    height: 20px;
+    /* height: 20px; */
     margin: 0;
     padding: 0;
-    padding-top: 55px;
-    padding-right: 20px;
+    margin-bottom: 10px;
+    /* padding-top: 55px; */
+    /* padding-right: 20px; */
 }
 ul#footer-nav li {
     float: left;
@@ -1169,7 +1352,7 @@ ul#individual-tools-people li a {
 /* VISUAL GRAPH------>  */
 .property-group,
 #menupage-intro {
-    width: 920px;
+    width: 100%;
     background: #fff;
 }
 #menupage-intro h2 {
@@ -1184,7 +1367,7 @@ ul#individual-tools-people li a {
     border-right: 1px solid #e8ece9;
 }
 #menupage-content {
-    width: 900px;
+    max-width: 900px;
 }
 #menupage-content h3 {
     font-size: 1.5em;
@@ -1249,8 +1432,16 @@ ul#find-filters a.selected {
 }
 /* BROWSE BY ------>  */
 #browse-by {
-    width: 920px;
+    width: 100%;
+    overflow: unset;
 }
+
+/* #browse-by > nav::after {
+    content: "";
+    clear: both;
+    display: table;
+} */
+
 #browse-by h2 {
     background: #5e6363;
     font-size: 1.375em;
@@ -1261,12 +1452,33 @@ ul#browse-classes {
     border: 1px solid #dde4e3;
     border-right: 0;
     background-color: #f1f2ee;
+    width: initial;
+    float: unset;
+    margin-left: 0;
+    padding-left: 10px;
+    padding-right: 10px;
+    width: 100%;
 }
+
+@media (min-width: 768px) {
+    ul#browse-classes {
+        float: left;
+        width: 33.333333%;
+    }
+}
+
 ul#browse-classes li,
 ul#vgraph-classes li {
     border-bottom: 1px solid #dde4e3;
     font-size: 1em;
+    width: initial;
+    margin: 0;
+}
+
+ul#browse-classes a {
+    width: initial;
 }
+
 ul#browse-classes a:hover,
 ul#browse-classes a.selected {
     background: url(../images/arrow.gif) 4px 5px no-repeat;
@@ -1278,6 +1490,10 @@ ul#browse-classes .count-classes {
 /* ALPHA BROWSE------>  */
 ul#alpha-browse-individuals {
     background-color: #fff;
+    width: 100%;
+    float: unset;
+    display: flex;
+    flex-wrap: wrap;
 }
 ul#alpha-browse-individuals a:hover,
 ul#alpha-browse-individuals a.selected {
@@ -1299,13 +1515,35 @@ nav#alpha-browse-container {
     background-color: #fff;
     border-left: 1px solid #dde4e3;
     border-bottom: none;
+    width: 100%;
+    margin: 0;
+    float: unset
+}
+
+@media (min-width: 768px) {
+    nav#alpha-browse-container {
+        float: left;
+        width: 66.6666666%;
+    }
 }
+
 /* BROWSE INDIVIDUALS------>  */
 #individuals-in-class {
-    width: 629px;
+    /* width: 629px; */
+    width: 100%;
     border: 1px solid #dde4e3;
     background-color: #fff;
+    float: none;
+    margin-right: 0;
 }
+
+@media (min-width: 768px) {
+    #individuals-in-class {
+        float: left;
+        width: 66.666666%;
+    }
+}
+
 #individuals-in-class li.individual {
     border-bottom: 1px solid #dde4e3;
 }
@@ -1337,9 +1575,12 @@ article.property ul.property-list {
     border: 1px solid #DDE4E3;
 }
 #photoCropping {
-    margin-left: 20px;
-    padding-left: 40px;
+    /* margin-left: 20px; */
+    padding-left: 60px;
     background: url(../images/pointToCropPreview.jpg) 0 30px no-repeat;
+    background-position-x: 20px;
+    overflow-x: auto;
+    max-width: 100%;
 }
 #photoCroppingPreview {
     width: 210px;
@@ -1394,6 +1635,30 @@ h2#webpage {
 img.individual-photo {
     border: 7px solid #ebebeb;
 }
+
+ul.propertyTabsList {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+ul.propertyTabsList > li {
+    text-wrap: nowrap;
+}
+
+ul.propertyTabsList > li.groupTabSpacer:last-child {
+    width: initial;
+    flex-grow: 1;
+}
+
+.scroll-up {
+    right: -12px;
+}  
+@media (min-width: 768px) {
+    .scroll-up {
+        right: -21px;
+    }    
+}
+
 .rdf-url {
     padding-top: .8em;
     display: block;
@@ -1401,6 +1666,17 @@ img.individual-photo {
 ul#individual-tools {
     color: #8AA149
 }
+
+#share-contact {
+    float: unset;
+}
+
+@media (min-width: 768px) {
+    #share-contact {
+        float: left;
+    }
+}
+
 #share-contact a.email,
 #share-contact a.tel,
 .editingForm .entryFormHead h2,
@@ -1428,6 +1704,15 @@ h2#mainImage,
 h3.internal-auth {
     color: #5e6363;
 }
+
+#individual-info {
+    width: 100%;
+}
+
+#individual-info > header {
+    width: 100%;
+}
+
 #individual-info h1.fn {
     font-size: 1.375em;
     color: #595B5B;
@@ -1442,6 +1727,20 @@ h3.internal-auth {
     font-size: 1.125em;
     line-height: 1.2em;
 }
+
+
+#individual-intro.person #individual-info {
+    width: 100%;
+}
+
+@media (min-width: 768px) {
+
+    #individual-intro.person #individual-info {
+        width: 75%;
+        /* float: unset; */
+    }
+}
+
 ul#individual-personInPosition {
     font-size: 1em;
     list-style: url("../../../images/individual/arrow-green.gif");
@@ -1482,6 +1781,27 @@ a.all-vivo-publications {
 img.co-author {
     border: 2px solid #ebebeb;
 }
+
+section#right-hand-column:after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+#right-hand-column {
+    float: unset;
+    width: 100%;
+    padding: 0 0 20px 0;
+}
+
+@media (min-width: 768px) {
+    #right-hand-column {
+        padding: 0 0 0 20px;
+        width: initial;
+        float: right;
+    }
+}
+
 #co-authors h3,
 #right-hand-column h3 {
     font-size: 1.25em;
@@ -1489,7 +1809,8 @@ img.co-author {
 }
 /* PROPERTY GROUP MENU ------>  */
 #property-group-menu {
-    width: 920px;
+    /* Style not used */
+    max-width: 920px;
     background: #f1f2ee;
 }
 #property-group-menu li {
@@ -1509,7 +1830,8 @@ section.property-group h2,
     font-weight: normal;
 }
 article.property {
-    width: 852px;
+    /* width: 852px; */
+    width: 100%;
 }
 article.property h3 {
     background: #fafaf9;
@@ -1528,6 +1850,7 @@ article.property .data-property-statement {
 article.property ul.property-list li a {
     /*color: #2485ae;*/   /* cappadona: seems unnecessarily specific and is overriding .more-less from individual.css so I'm commenting out for now */
     line-height: 1.6em;
+    word-break: break-all
 }
 /* MISCELLANEOUS ------>  */
 .displace {
@@ -1542,6 +1865,7 @@ a {
 }
 input[type="submit"] {
     cursor: pointer;
+    text-wrap: balance;
 }
 input[type="search" i] {
     margin: 2px;
@@ -1559,9 +1883,27 @@ p.address-line {
 /* ------------------------------------------------->  */
 /* SITE ADMIN DASHBOARD ---------------------------->  */
 /* ------------------------------------------------->  */
+
 #adminDashboard .pageBodyGroup {
   padding: 0 1em .5em 1em;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+    #adminDashboard .pageBodyGroup {
+        flex: 0 0 auto;
+        width: 50%;
+    }
+}
+
+#addIndividualClass #submit {
+    text-wrap: wrap;
 }
+
+#adminDashboard .pageBodyGroup {
+    padding: 0 1em .5em 1em;
+}
+
 #adminDashboard .pageBodyGroup h3 {
   background-color: #fff;
   border-bottom: 1px dotted #AFB2B2;
@@ -1587,7 +1929,14 @@ p.address-line {
 }
 
 
+.staticPageBackground input[type="file"] {
+    width: 100%;
+    text-wrap: wrap;
+}
 
+#pageList {
+    overflow-x: auto;
+}
 
 /* ------------------------------------------------->  */
 /* REVISION INFO ----------------------------------->  */
@@ -1733,3 +2082,391 @@ span.subclassExpandMinus {
     background:url(../images/green_minus_sign.gif) right center no-repeat;
     min-height:18px;
 }
+
+/* ------------------------------------------------->  */
+/* CAPABILITY MAP  --------------------------------->  */
+/* ------------------------------------------------->  */
+
+#wrapper-content #main-content #container {
+    display: flex;
+}
+
+#helptext {
+    width: 100%;
+}
+
+
+#right-container {
+    width: 100%;
+    position: relative;
+    float: left;
+}
+
+.tabs {
+    width: 100%;
+}
+
+.tabs ul.titles li a, .tabs ul.titles li a{
+    width: 50%;
+}
+
+#center-container {
+    position: relative;
+    width: 100%;
+}
+
+@media (min-width: 768px) {
+    #adminDashboard .pageBodyGroup {
+        flex: 0 0 auto;
+        width: 50%;
+    }
+
+    #right-container {
+        width: 34%;
+    }
+
+    #helptext {
+        width: 70%;
+        padding-right: 10px;
+    }
+    
+}
+
+#cutofflabel {
+    width: initial;
+}
+
+#queryform input[type="text"], select, input[type="password"]{
+    max-width: 100%;
+}
+
+#queryCutoff {
+    margin-left: -54px;
+}
+
+/* Author Network */
+
+.propertyTabsList {
+    display: flex;
+}
+
+#body {
+    min-width: initial;
+}
+
+#chord {
+    width: 100%;
+    height: 100%;
+    float: left;
+    overflow: hidden;
+}
+
+
+#chord > svg {
+    transform-origin: 0 50%;
+    -webkit-transform-origin: 0 50%;
+    -ms-transform-origin: 0 50%;
+    transform-origin: 0 50%;
+    height: 100%;
+}
+
+@media (max-width: 360px) {
+    #body > #bodyPannel {
+        height: 360px;
+    }
+
+    #chord > svg > * {
+        scale: 0.3;
+        overflow: hidden;
+    }
+    
+    #chord-info-div {
+        scale: 0.7;
+    }
+}
+
+@media (min-width: 361px) and (max-width: 399px) {
+    #body > #bodyPannel {
+        height: 360px;
+    }
+
+    #chord > svg > * {
+        scale: 0.4;
+    }
+    
+    #chord-info-div {
+        scale: 0.7;
+    }
+}
+
+
+@media (min-width: 400px) and (max-width: 449px) {
+    #body > #bodyPannel {
+        height: 400px;
+    }
+    
+    #chord > svg > * {
+        scale: 0.44;
+    }
+    
+    #chord-info-div {
+        scale: 0.7;
+    }
+}
+
+
+
+@media (min-width: 450px) and (max-width: 499px) {
+    #body > #bodyPannel {
+        height: 450px;
+    }
+    
+    #chord > svg > * {
+        scale: 0.5;
+    }
+    
+    #chord-info-div {
+        scale: 0.7;
+    }
+}
+
+
+
+@media (min-width: 500px) and (max-width: 575px) {
+    #body > #bodyPannel {
+        height: 500px;
+    }
+    
+    #chord > svg > * {
+        scale: 0.55;
+    }
+    
+    #chord-info-div {
+        scale: 0.8;
+    }
+}
+
+@media (min-width: 576px) and (max-width: 767px) {
+    #body > #bodyPannel {
+        height: 576px;
+    }
+    
+    #chord > svg > * {
+        scale: 0.6;
+    }
+}
+
+
+@media (min-width: 768px) and (max-width: 991px) {
+    #body > #bodyPannel {
+        height: 768px;
+    }
+    
+    #chord > svg > * {
+        scale: 0.8;
+    }
+}
+
+
+
+#sparkline-container-full > #publication-count-sparkline-include {
+    width: 100%;
+    margin-bottom: 0px;
+}
+
+
+#sparkline-container-full > #coauthor-count-sparkline-include {
+    width: 100%;
+    margin-bottom: 0px;
+}
+
+#sparkline-container-full .google-visualization-sparkline-default img.google-visualization-sparkline-image {
+    max-width: 100%;
+}
+
+
+#body .vis-tables {
+    width: 100%;
+    margin-bottom: 0px;
+}
+
+@media (min-width: 768px) {
+    #sparkline-container-full > #publication-count-sparkline-include {
+        width: 50%;
+        margin-bottom: 15px;
+    }
+    #sparkline-container-full > #coauthor-count-sparkline-include {
+        width: 50%;
+        margin-bottom: 15px;
+    }
+    #body .vis-tables {
+        width: 48%;
+        margin-bottom: 15px;
+    }
+}
+
+#graphContainer {
+    width: 100%;
+    position: relative;
+    overflow-x: auto;
+    height: 100%;
+}
+
+#leftblock {
+    width: 100%;
+}
+
+#rightblock {
+    width: 100%;
+    margin-right: 0;
+}
+
+@media (min-width: 768px) {
+    #leftblock {
+        width: 39%;
+    }
+    
+    #rightblock {
+        width: 54%;
+    }
+}
+
+#temporal-graph {
+    height: 100%;
+    overflow-x: auto;
+}
+
+#temporal-graph-response > .blockUI  {
+    width: 100%;
+    max-width: 420px;
+    left: 0;
+}
+
+
+.editingForm > table > tbody > tr {
+    text-wrap: wrap;
+    line-break: anywhere;
+    line-height: unset;
+}
+
+/* table.form-background tr td {
+    width: 100%;
+    display: block;
+} */
+
+#wrapper-content > div > div > div > div > table > tbody > tr > td > div > form > div {
+    display: flex;
+    flex-direction: column;
+}
+
+#wrapper-content  table > tbody > tr.header > td.verticalfieldlabel {
+    width: 100px;
+}
+
+#container section table tbody .subclassCell {
+    word-wrap: break-word;
+}
+
+table.classHierarchy {
+    min-width: initial;
+    max-width: initial;
+    width: calc(100% - 25);
+}
+
+section#container div {
+    width: initial;
+}
+
+section#container div {
+    width: initial;
+}
+
+#noLocalOntologyExists {
+    width: 100%;
+}
+
+#noLocalOntologyExists blockquote {
+    text-wrap: wrap;
+    word-break: break-word;
+}
+
+.proxy-profile {
+    width: 100%;
+}
+
+.proxy-profile .proxy {
+    width: 100%;
+}
+
+.proxy-profile .profile {
+    width: 100%;
+    padding-left: 0;
+}
+
+@media (min-width: 768px) {
+    .proxy-profile .proxy {
+        width: 50%;
+    }
+    
+    .proxy-profile .profile {
+        width: 50%;
+        padding-left: 12px;
+    }
+}
+
+ul.menuItems {
+    max-width: 300px;
+    width: initial;
+}
+
+section#floatRight {
+    width: initial;
+}
+
+#managePage #floatRight {
+    width: 100%;
+    float: unset;
+}
+
+#managePage #leftSide {
+    width: 100%;
+}
+
+@media (min-width: 768px) {
+    #managePage #floatRight {
+        width: initial;
+        float: right;
+    }
+    
+    #managePage #leftSide {
+        width: initial;
+    }
+}
+
+.customForm {
+    width: 100%;
+    overflow-x: auto;
+}
+
+.classHierarchy {
+    word-break: break-all;
+}
+
+#startup-trace h4, #startup-trace li{
+    overflow-wrap: anywhere;
+}
+
+#indexer {
+    overflow-x: auto;
+}
+
+form li {
+    overflow-wrap: break-word;
+}
+
+/* HOME PAGE MAP */
+
+#mapGlobal {
+    width: 100%;
+    margin-left: 0;
+}
\ No newline at end of file
diff --git a/webapp/src/main/webapp/themes/willow/templates/head.ftl b/webapp/src/main/webapp/themes/willow/templates/head.ftl
index 8607e2069b..188d617fd8 100644
--- a/webapp/src/main/webapp/themes/willow/templates/head.ftl
+++ b/webapp/src/main/webapp/themes/willow/templates/head.ftl
@@ -4,6 +4,7 @@
 <!-- Google Chrome Frame open source plug-in brings Google Chrome's open web technologies and speedy JavaScript engine to Internet Explorer-->
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="generator" content="VIVO ${version.label}" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <title>${(title?html)!siteName!}</title>
 
diff --git a/webapp/src/main/webapp/themes/willow/templates/page-home.ftl b/webapp/src/main/webapp/themes/willow/templates/page-home.ftl
index 78ce860db9..9f7a177d53 100644
--- a/webapp/src/main/webapp/themes/willow/templates/page-home.ftl
+++ b/webapp/src/main/webapp/themes/willow/templates/page-home.ftl
@@ -26,89 +26,103 @@
 
     <body class="${bodyClasses!}" onload="${bodyOnload!}">
     <#-- supplies the faculty count to the js function that generates a random row number for the search query -->
-        <@lh.facultyMemberCount  vClassGroups! />
-        <#include "identity.ftl">
-
-        <#include "menu.ftl">
-
-        <section id="intro" role="region">
-            <h2>${i18n().intro_title}</h2>
-
-            <p>${i18n().intro_para1}</p>
-            <p>${i18n().intro_para2}</p>
-
-            <section id="search-home" role="region">
-                <h3>${i18n().intro_searchvivo} <span class="search-filter-selected">filteredSearch</span></h3>
-
-                <fieldset>
-                    <legend>${i18n().search_form}</legend>
-                    <form id="search-homepage" action="${urls.search}" name="search-home" role="search" method="GET" >
-                        <div id="search-home-field">
-                            <input type="text" name="querytext" class="search-homepage" value="" autocapitalize="off" />
-                            <input type="submit" value="${i18n().search_button}" class="search" />
-                            <input type="hidden" name="filters_category"  value="" autocapitalize="off" />
-                        </div>
-
-                        <a class="filter-search filter-default" href="#" title="${i18n().intro_filtersearch}">
-                            <span class="displace">${i18n().intro_filtersearch}</span>
-                        </a>
-
-                        <ul id="filter-search-nav">
-                            <li><a class="active" href="">${i18n().all_capitalized}</a></li>
-                            <@lh.allClassGroupNames vClassGroups! />
-                        </ul>
-                    </form>
-                </fieldset>
-            </section> <!-- #search-home -->
-
-        </section> <!-- #intro -->
-
-        <@widget name="login" />
-
-        <!-- List of research classes: e.g., articles, books, collections, conference papers -->
-        <@lh.researchClasses />
-
-        <!-- List of four randomly selected faculty members -->
-        <@lh.facultyMbrHtml />
-
-        <!-- List of randomly selected academic departments -->
-        <@lh.academicDeptsHtml />
-
-        <#if geoFocusMapsEnabled >
-            <!-- Map display of researchers' areas of geographic focus. Must be enabled in runtime.properties -->
-            <@lh.geographicFocusHtml />
-        </#if>
-
-        <!-- Statistical information relating to property groups and their classes; displayed horizontally, not vertically-->
-        <@lh.allClassGroups vClassGroups! />
-
-        <#include "footer.ftl">
-        <#-- builds a json object that is used by js to render the academic departments section -->
-        <@lh.listAcademicDepartments />
-    <script>
-        var i18nStrings = {
-            researcherString: '${i18n().researcher?js_string}',
-            researchersString: '${i18n().researchers?js_string}',
-            currentlyNoResearchers: '${i18n().currently_no_researchers?js_string}',
-            countriesAndRegions: '${i18n().countries_and_regions?js_string}',
-            countriesString: '${i18n().countries?js_string}',
-            regionsString: '${i18n().regions?js_string}',
-            statesString: '${i18n().map_states_string?js_string}',
-            stateString: '${i18n().map_state_string?js_string}',
-            statewideLocations: '${i18n().statewide_locations?js_string}',
-            researchersInString: '${i18n().researchers_in?js_string}',
-            inString: '${i18n().in?js_string}',
-            noFacultyFound: '${i18n().no_faculty_found?js_string}',
-            placeholderImage: '${i18n().placeholder_image?js_string}',
-            viewAllFaculty: '${i18n().view_all_faculty?js_string}',
-            viewAllString: '${i18n().view_all?js_string}',
-            viewAllDepartments: '${i18n().view_all_departments?js_string}',
-            noDepartmentsFound: '${i18n().no_departments_found?js_string}'
-        };
-        // set the 'limmit search' text and alignment
-        if  ( $('input.search-homepage').css('text-align') == "right" ) {
-             $('input.search-homepage').attr("placeholder","${i18n().limit_search} \u2192");
-        }
-    </script>
+        <div class="container">
+            <@lh.facultyMemberCount  vClassGroups! />
+            <#include "identity.ftl">
+
+            <#include "menu.ftl">
+
+            <div class="row">
+                <section id="intro" role="region" class="col-md-7">
+                    <h2>${i18n().intro_title}</h2>
+
+                    <p>${i18n().intro_para1}</p>
+                    <p>${i18n().intro_para2}</p>
+
+                    <section id="search-home" role="region">
+                        <h3>${i18n().intro_searchvivo} <span class="search-filter-selected">filteredSearch</span></h3>
+
+                        <fieldset>
+                            <legend>${i18n().search_form}</legend>
+                            <form id="search-homepage" action="${urls.search}" name="search-home" role="search" method="GET" >
+                                <div id="search-home-field">
+                                    <input type="text" name="querytext" class="search-homepage" value="" autocapitalize="off" />
+                                    <div class="limit-search">
+                                        <a class="filter-search filter-default" href="#" title="${i18n().intro_filtersearch}">
+                                            <span class="displace">${i18n().intro_filtersearch}</span>
+                                        </a>
+
+                                        <ul id="filter-search-nav">
+                                            <li><a class="active" href="">${i18n().all_capitalized}</a></li>
+                                            <@lh.allClassGroupNames vClassGroups! />
+                                        </ul>                                
+                                    </div>
+                                    <input type="submit" value="${i18n().search_button}" class="search" />
+                                    <input type="hidden" name="filters_category"  value="" autocapitalize="off" />
+                                </div>
+
+
+                            </form>
+                        </fieldset>
+                    </section> <!-- #search-home -->
+
+                </section> <!-- #intro -->
+
+                <div class="col-md-5">
+                    <@widget name="login" />
+                </div>
+            </div>
+
+            <div class="row">
+                <!-- List of research classes: e.g., articles, books, collections, conference papers -->
+                <@lh.researchClasses />
+
+                <!-- List of four randomly selected faculty members -->
+                <@lh.facultyMbrHtml />
+
+                <!-- List of randomly selected academic departments -->
+                <@lh.academicDeptsHtml />
+
+                <#if geoFocusMapsEnabled >
+                    <!-- Map display of researchers' areas of geographic focus. Must be enabled in runtime.properties -->
+                    <@lh.geographicFocusHtml />
+                </#if>
+            </div>
+
+            <div class="row">
+
+                <!-- Statistical information relating to property groups and their classes; displayed horizontally, not vertically-->
+                <@lh.allClassGroups vClassGroups! />
+            </div>
+
+            <#include "footer.ftl">
+            <#-- builds a json object that is used by js to render the academic departments section -->
+            <@lh.listAcademicDepartments />
+        </div>
+        <script>
+            var i18nStrings = {
+                researcherString: '${i18n().researcher?js_string}',
+                researchersString: '${i18n().researchers?js_string}',
+                currentlyNoResearchers: '${i18n().currently_no_researchers?js_string}',
+                countriesAndRegions: '${i18n().countries_and_regions?js_string}',
+                countriesString: '${i18n().countries?js_string}',
+                regionsString: '${i18n().regions?js_string}',
+                statesString: '${i18n().map_states_string?js_string}',
+                stateString: '${i18n().map_state_string?js_string}',
+                statewideLocations: '${i18n().statewide_locations?js_string}',
+                researchersInString: '${i18n().researchers_in?js_string}',
+                inString: '${i18n().in?js_string}',
+                noFacultyFound: '${i18n().no_faculty_found?js_string}',
+                placeholderImage: '${i18n().placeholder_image?js_string}',
+                viewAllFaculty: '${i18n().view_all_faculty?js_string}',
+                viewAllString: '${i18n().view_all?js_string}',
+                viewAllDepartments: '${i18n().view_all_departments?js_string}',
+                noDepartmentsFound: '${i18n().no_departments_found?js_string}'
+            };
+            // set the 'limmit search' text and alignment
+            if  ( $('input.search-homepage').css('text-align') == "right" ) {
+                $('input.search-homepage').attr("placeholder","${i18n().limit_search} \u2192");
+            }
+        </script>
     </body>
-</html>
+</html>
\ No newline at end of file