diff --git a/.DS_Store b/.DS_Store
index 39087b3..f5ab156 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/public/.DS_Store b/public/.DS_Store
index 83167ea..2f3196d 100644
Binary files a/public/.DS_Store and b/public/.DS_Store differ
diff --git a/public/css/main.css b/public/css/main.css
index 21c3ac3..407653f 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -17,6 +17,11 @@
   }
 }
 
+html, body {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
 header > .container-fluid {
   width: 500px;
 }
@@ -1003,3 +1008,1358 @@ img[alt="Modeled Hypoxia for Summer 2015"] {
 }
 
 /* END comt/projects/:project/:dataset */
+
+
+
+/* START IOOS-US 2022 redesign */
+
+.model-viewer {
+  background-image      : url("/images/ioos-eds.png");
+  height: 300px;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.sensor-map {
+  background-image      : url("/images/all-stations-new.png");
+  height: 300px;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.sanct-sound {
+  background-image      : url("/images/sanct-sound.png");
+  height: 300px;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.hf-radar {
+  background-image    : url("/images/codar-combined-TX_RX_2_2.jpg");
+  height: 300px;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.regional-associations {
+  background-image: url("/images/r-a-tile-3.jpg");
+  height: 300px;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.atn {
+  background-image    : url("/images/ATN.png");
+  height: 300px;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.glider-dac {
+  background-image      : url("/images/glider.png");
+  height: 300px;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.data-discovery {
+  background-image    : url("/images/new-data-catalog-lightmap.png");
+  height: 300px;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.new-design > h1 {
+  color: #fff;
+  text-align: center;
+  margin-top: 50%;
+  font-size: 22px;
+}
+
+.new-title {
+  font-size: 28px;
+  color: #55D6F8;
+  background-color: #003087;
+  text-align: center;
+  padding: 25px;
+  display: block;
+  margin: auto;
+}
+
+.nopadding {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+.flip-box {
+  background-color: transparent;
+  height: 300px;
+  perspective: 1000px;
+}
+
+.flip-box-inner-model-viewer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.flip-box:hover .flip-box-inner-model-viewer {
+  transform: rotateY(180deg);
+}
+
+.flip-box-front-model-viewer, .flip-box-back-model-viewer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-box-front-model-viewer {
+  background-image      : url("/images/ioos-eds.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.flip-box-front-model-viewer > h1 {
+  margin-top: 50%;
+  font-size: 22px;
+}
+
+.flip-box-back-model-viewer {
+  background-image      : url("/images/ioos-eds.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.8);
+  background-size: cover;
+  transform: rotateY(180deg);
+}
+
+.flip-box-back-model-viewer > h2 {
+  margin-top: 20px;
+  font-size: 18px;
+}
+
+.flip-box-back-model-viewer > p {
+  padding: 10px 20px;
+  font-size: 16px;
+}
+
+.flip-box-back-model-viewer > button {
+  padding: 10px 30px;
+  background-color: #003087;
+  font-size: 16px;
+  border: none;
+  border-radius: 10px;
+}
+
+.flip-box-back-model-viewer > button > a {
+  color: #ffffff;
+}
+
+/* START .sanct-sound */
+
+.flip-box-sanct-sound {
+  background-color: transparent;
+  height: 300px;
+  perspective: 1000px;
+}
+
+.flip-box-inner-sanct-sound {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.flip-box-sanct-sound:hover .flip-box-inner-sanct-sound {
+  transform: rotateY(180deg);
+}
+
+.flip-box-front-sanct-sound, .flip-box-back-sanct-sound {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-box-front-sanct-sound {
+  background-image      : url("/images/sanct-sound.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.flip-box-front-sanct-sound > h1 {
+  margin-top: 50%;
+  font-size: 22px;
+}
+
+.flip-box-back-sanct-sound {
+  background-image      : url("/images/sanct-sound.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.8);
+  background-size: cover;
+  transform: rotateY(180deg);
+}
+
+.flip-box-back-sanct-sound > h2 {
+  margin-top: 20px;
+  font-size: 18px;
+}
+
+.flip-box-back-sanct-sound > p {
+  padding: 10px 20px;
+  font-size: 16px;
+}
+
+.flip-box-back-sanct-sound > button {
+  padding: 10px 30px;
+  background-color: #003087;
+  font-size: 16px;
+  border: none;
+  border-radius: 10px;
+}
+
+.flip-box-back-sanct-sound > button > a {
+  color: #ffffff;
+}
+
+/* START .sensor-map */
+
+.flip-box-sensor-map {
+  background-color: transparent;
+  height: 300px;
+  perspective: 1000px;
+}
+
+.flip-box-inner-sensor-map {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.flip-box-sensor-map:hover .flip-box-inner-sensor-map {
+  transform: rotateY(180deg);
+}
+
+.flip-box-front-sensor-map, .flip-box-back-sensor-map {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-box-front-sensor-map {
+  background-image      : url("/images/all-stations-new.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.flip-box-front-sensor-map > h1 {
+  margin-top: 50%;
+  font-size: 22px;
+}
+
+.flip-box-back-sensor-map {
+  background-image      : url("/images/all-stations-new.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.8);
+  background-size: cover;
+  transform: rotateY(180deg);
+}
+
+.flip-box-back-sensor-map > h2 {
+  margin-top: 20px;
+  font-size: 18px;
+}
+
+.flip-box-back-sensor-map > p {
+  padding: 10px 20px;
+  font-size: 16px;
+}
+
+.flip-box-back-sensor-map > button {
+  padding: 10px 30px;
+  background-color: #003087;
+  font-size: 16px;
+  border: none;
+  border-radius: 10px;
+}
+
+.flip-box-back-sensor-map > button > a {
+  color: #ffffff;
+}
+
+/* START .data-discovery */
+
+.flip-box-data-discovery {
+  background-color: transparent;
+  height: 300px;
+  perspective: 1000px;
+}
+
+.flip-box-inner-data-discovery {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.flip-box-data-discovery:hover .flip-box-inner-data-discovery {
+  transform: rotateY(180deg);
+}
+
+.flip-box-front-data-discovery, .flip-box-back-data-discovery {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-box-front-data-discovery {
+  background-image    : url("/images/new-data-catalog-lightmap.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.flip-box-front-data-discovery > h1 {
+  margin-top: 50%;
+  font-size: 22px;
+}
+
+.flip-box-back-data-discovery {
+  background-image    : url("/images/new-data-catalog-lightmap.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.8);
+  background-size: cover;
+  transform: rotateY(180deg);
+}
+
+.flip-box-back-data-discovery > h2 {
+  margin-top: 20px;
+  font-size: 18px;
+}
+
+.flip-box-back-data-discovery > p {
+  padding: 10px 20px;
+  font-size: 16px;
+}
+
+.flip-box-back-data-discovery > button {
+  padding: 10px 30px;
+  background-color: #003087;
+  font-size: 16px;
+  border: none;
+  border-radius: 10px;
+}
+
+.flip-box-back-data-discovery > button > a {
+  color: #ffffff;
+}
+
+/* START .atn */
+
+.flip-box-atn {
+  background-color: transparent;
+  height: 300px;
+  perspective: 1000px;
+}
+
+.flip-box-inner-atn {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.flip-box-atn:hover .flip-box-inner-atn {
+  transform: rotateY(180deg);
+}
+
+.flip-box-front-atn, .flip-box-back-atn {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-box-front-atn {
+  background-image    : url("/images/ATN.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.flip-box-front-atn > h1 {
+  margin-top: 50%;
+  font-size: 22px;
+}
+
+.flip-box-back-atn {
+  background-image    : url("/images/ATN.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.8);
+  background-size: cover;
+  transform: rotateY(180deg);
+}
+
+.flip-box-back-atn > h2 {
+  margin-top: 20px;
+  font-size: 18px;
+}
+
+.flip-box-back-atn > p {
+  padding: 10px 20px;
+  font-size: 16px;
+}
+
+.flip-box-back-atn > button {
+  padding: 10px 30px;
+  background-color: #003087;
+  font-size: 16px;
+  border: none;
+  border-radius: 10px;
+}
+
+.flip-box-back-atn > button > a {
+  color: #ffffff;
+}
+
+/* START .glider-dac */
+
+.flip-box-glider-dac {
+  background-color: transparent;
+  height: 300px;
+  perspective: 1000px;
+}
+
+.flip-box-inner-glider-dac {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.flip-box-glider-dac:hover .flip-box-inner-glider-dac {
+  transform: rotateY(180deg);
+}
+
+.flip-box-front-glider-dac, .flip-box-back-glider-dac {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-box-front-glider-dac {
+  background-image      : url("/images/glider.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.flip-box-front-glider-dac > h1 {
+  margin-top: 50%;
+  font-size: 22px;
+}
+
+.flip-box-back-glider-dac {
+  background-image      : url("/images/glider.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.8);
+  background-size: cover;
+  transform: rotateY(180deg);
+}
+
+.flip-box-back-glider-dac > h2 {
+  margin-top: 20px;
+  font-size: 18px;
+}
+
+.flip-box-back-glider-dac > p {
+  padding: 10px 20px;
+  font-size: 16px;
+}
+
+.flip-box-back-glider-dac > button {
+  padding: 10px 30px;
+  background-color: #003087;
+  font-size: 16px;
+  border: none;
+  border-radius: 10px;
+}
+
+.flip-box-back-glider-dac > button > a {
+  color: #ffffff;
+}
+
+/* START .hf-radar */
+
+.flip-box-hf-radar {
+  background-color: transparent;
+  height: 300px;
+  perspective: 1000px;
+}
+
+.flip-box-inner-hf-radar {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.flip-box-hf-radar:hover .flip-box-inner-hf-radar {
+  transform: rotateY(180deg);
+}
+
+.flip-box-front-hf-radar, .flip-box-back-hf-radar {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-box-front-hf-radar {
+  background-image    : url("/images/codar-combined-TX_RX_2_2.jpg");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.flip-box-front-hf-radar > h1 {
+  margin-top: 50%;
+  font-size: 22px;
+}
+
+.flip-box-back-hf-radar {
+  background-image    : url("/images/codar-combined-TX_RX_2_2.jpg");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.8);
+  background-size: cover;
+  transform: rotateY(180deg);
+}
+
+.flip-box-back-hf-radar > h2 {
+  margin-top: 20px;
+  font-size: 18px;
+}
+
+.flip-box-back-hf-radar > p {
+  padding: 10px 20px;
+  font-size: 16px;
+}
+
+.flip-box-back-hf-radar > button {
+  padding: 10px 30px;
+  background-color: #003087;
+  font-size: 16px;
+  border: none;
+  border-radius: 10px;
+}
+
+.flip-box-back-hf-radar > button > a {
+  color: #ffffff;
+}
+
+/* START .regional-associations */
+
+.flip-box-regional-associations {
+  background-color: transparent;
+  height: 300px;
+  perspective: 1000px;
+}
+
+.flip-box-inner-regional-associations {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.flip-box-regional-associations:hover .flip-box-inner-regional-associations {
+  transform: rotateY(180deg);
+}
+
+.flip-box-front-regional-associations, .flip-box-back-regional-associations {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-box-front-regional-associations {
+  background-image: url("/images/r-a-tile-3.jpg");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.flip-box-front-regional-associations > h1 {
+  margin-top: 50%;
+  font-size: 22px;
+}
+
+.flip-box-back-regional-associations {
+  background-image: url("/images/r-a-tile-3.jpg");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.8);
+  background-size: cover;
+  transform: rotateY(180deg);
+}
+
+.flip-box-back-regional-associations > h2 {
+  margin-top: 20px;
+  font-size: 18px;
+}
+
+.flip-box-back-regional-associations > p {
+  padding: 10px 20px;
+  font-size: 16px;
+}
+
+.flip-box-back-regional-associations > button {
+  padding: 10px 30px;
+  background-color: #003087;
+  font-size: 16px;
+  border: none;
+  border-radius: 10px;
+}
+
+.flip-box-back-regional-associations > button > a {
+  color: #ffffff;
+}
+
+/* START .ioos-by-numbers */
+
+.flip-box-ioos-by-numbers {
+  background-color: transparent;
+  height: 300px;
+  perspective: 1000px;
+}
+
+.flip-box-inner-ioos-by-numbers {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.flip-box-ioos-by-numbers:hover .flip-box-inner-ioos-by-numbers {
+  transform: rotateY(180deg);
+}
+
+.flip-box-front-ioos-by-numbers, .flip-box-back-ioos-by-numbers {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-box-front-ioos-by-numbers {
+  background-image: url("/images/ioos-by-the-numbers-22.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.flip-box-front-ioos-by-numbers > h1 {
+  margin-top: 50%;
+  font-size: 22px;
+}
+
+.flip-box-back-ioos-by-numbers {
+  background-image: url("/images/ioos-by-the-numbers-22.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.8);
+  background-size: cover;
+  transform: rotateY(180deg);
+}
+
+.flip-box-back-ioos-by-numbers > h2 {
+  margin-top: 20px;
+  font-size: 18px;
+}
+
+.flip-box-back-ioos-by-numbers > p {
+  padding: 10px 20px;
+  font-size: 16px;
+}
+
+.flip-box-back-ioos-by-numbers > button {
+  padding: 10px 30px;
+  background-color: #003087;
+  font-size: 16px;
+  border: none;
+  border-radius: 10px;
+}
+
+.flip-box-back-ioos-by-numbers > button > a {
+  color: #ffffff;
+}
+
+/* START .compliance-checker */
+
+.flip-box-compliance-checker {
+  background-color: transparent;
+  height: 300px;
+  perspective: 1000px;
+}
+
+.flip-box-inner-compliance-checker {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.flip-box-compliance-checker:hover .flip-box-inner-compliance-checker {
+  transform: rotateY(180deg);
+}
+
+.flip-box-front-compliance-checker, .flip-box-back-compliance-checker {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-box-front-compliance-checker {
+  background-image: url("/images/compliance-checker.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.flip-box-front-compliance-checker > h1 {
+  margin-top: 50%;
+  font-size: 22px;
+}
+
+.flip-box-back-compliance-checker {
+  background-image: url("/images/compliance-checker.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.8);
+  background-size: cover;
+  transform: rotateY(180deg);
+}
+
+.flip-box-back-compliance-checker > h2 {
+  margin-top: 20px;
+  font-size: 18px;
+}
+
+.flip-box-back-compliance-checker > p {
+  padding: 10px 20px;
+  font-size: 16px;
+}
+
+.flip-box-back-compliance-checker > button {
+  padding: 10px 30px;
+  background-color: #003087;
+  font-size: 16px;
+  border: none;
+  border-radius: 10px;
+}
+
+.flip-box-back-compliance-checker > button > a {
+  color: #ffffff;
+}
+
+/* START .mbon */
+
+.flip-box-mbon {
+  background-color: transparent;
+  height: 300px;
+  perspective: 1000px;
+}
+
+.flip-box-inner-mbon {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.flip-box-mbon:hover .flip-box-inner-mbon {
+  transform: rotateY(180deg);
+}
+
+.flip-box-front-mbon, .flip-box-back-mbon {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-box-front-mbon {
+  background-image: url("/images/demonstrations-tile.jpg");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.flip-box-front-mbon > h1 {
+  margin-top: 50%;
+  font-size: 22px;
+}
+
+.flip-box-back-mbon {
+  background-image: url("/images/demonstrations-tile.jpg");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.8);
+  background-size: cover;
+  transform: rotateY(180deg);
+}
+
+.flip-box-back-mbon > h2 {
+  margin-top: 20px;
+  font-size: 18px;
+}
+
+.flip-box-back-mbon > p {
+  padding: 10px 20px;
+  font-size: 16px;
+}
+
+.flip-box-back-mbon > button {
+  padding: 10px 30px;
+  background-color: #003087;
+  font-size: 16px;
+  border: none;
+  border-radius: 10px;
+}
+
+.flip-box-back-mbon > button > a {
+  color: #ffffff;
+}
+
+/* START .comt */
+
+.flip-box-comt {
+  background-color: transparent;
+  height: 300px;
+  perspective: 1000px;
+}
+
+.flip-box-inner-comt {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.flip-box-comt:hover .flip-box-inner-comt {
+  transform: rotateY(180deg);
+}
+
+.flip-box-front-comt, .flip-box-back-comt {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-box-front-comt {
+  background-image: url("/images/comt-tile.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.flip-box-front-comt > h1 {
+  margin-top: 50%;
+  font-size: 22px;
+}
+
+.flip-box-back-comt {
+  background-image: url("/images/comt-tile.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.8);
+  background-size: cover;
+  transform: rotateY(180deg);
+}
+
+.flip-box-back-comt > h2 {
+  margin-top: 20px;
+  font-size: 18px;
+}
+
+.flip-box-back-comt > p {
+  padding: 10px 20px;
+  font-size: 16px;
+}
+
+.flip-box-back-comt > button {
+  padding: 10px 30px;
+  background-color: #003087;
+  font-size: 16px;
+  border: none;
+  border-radius: 10px;
+}
+
+.flip-box-back-comt > button > a {
+  color: #ffffff;
+}
+
+/* START .video-portal */
+
+.flip-box-video-portal {
+  background-color: transparent;
+  height: 300px;
+  perspective: 1000px;
+}
+
+.flip-box-inner-video-portal {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.flip-box-video-portal:hover .flip-box-inner-video-portal {
+  transform: rotateY(180deg);
+}
+
+.flip-box-front-video-portal, .flip-box-back-video-portal {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-box-front-video-portal {
+  background-image: url("/images/video_portal.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.flip-box-front-video-portal > h1 {
+  margin-top: 50%;
+  font-size: 22px;
+}
+
+.flip-box-back-video-portal {
+  background-image: url("/images/video_portal.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.8);
+  background-size: cover;
+  transform: rotateY(180deg);
+}
+
+.flip-box-back-video-portal > h2 {
+  margin-top: 20px;
+  font-size: 18px;
+}
+
+.flip-box-back-video-portal > p {
+  padding: 10px 20px;
+  font-size: 16px;
+}
+
+.flip-box-back-video-portal > button {
+  padding: 10px 30px;
+  background-color: #003087;
+  font-size: 16px;
+  border: none;
+  border-radius: 10px;
+}
+
+.flip-box-back-video-portal > button > a {
+  color: #ffffff;
+}
+
+/* START .code-lab */
+
+.flip-box-code-lab {
+  background-color: transparent;
+  height: 300px;
+  perspective: 1000px;
+}
+
+.flip-box-inner-code-lab {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.flip-box-code-lab:hover .flip-box-inner-code-lab {
+  transform: rotateY(180deg);
+}
+
+.flip-box-front-code-lab, .flip-box-back-code-lab {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-box-front-code-lab {
+  background-image: url("/images/ioos_CodeLab.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.flip-box-front-code-lab > h1 {
+  margin-top: 50%;
+  font-size: 22px;
+}
+
+.flip-box-back-code-lab {
+  background-image: url("/images/ioos_CodeLab.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.8);
+  background-size: cover;
+  transform: rotateY(180deg);
+}
+
+.flip-box-back-code-lab > h2 {
+  margin-top: 20px;
+  font-size: 18px;
+}
+
+.flip-box-back-code-lab > p {
+  padding: 10px 20px;
+  font-size: 16px;
+}
+
+.flip-box-back-code-lab > button {
+  padding: 10px 30px;
+  background-color: #003087;
+  font-size: 16px;
+  border: none;
+  border-radius: 10px;
+}
+
+.flip-box-back-code-lab > button > a {
+  color: #ffffff;
+}
+
+/* START .osmc */
+
+.flip-box-osmc {
+  background-color: transparent;
+  height: 300px;
+  perspective: 1000px;
+}
+
+.flip-box-inner-osmc {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.flip-box-osmc:hover .flip-box-inner-osmc {
+  transform: rotateY(180deg);
+}
+
+.flip-box-front-osmc, .flip-box-back-osmc {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-box-front-osmc {
+  background-image: url("/images/osmc-tile.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.flip-box-front-osmc > h1 {
+  margin-top: 50%;
+  font-size: 22px;
+}
+
+.flip-box-back-osmc {
+  background-image: url("/images/osmc-tile.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.8);
+  background-size: cover;
+  transform: rotateY(180deg);
+}
+
+.flip-box-back-osmc > h2 {
+  margin-top: 20px;
+  font-size: 18px;
+}
+
+.flip-box-back-osmc > p {
+  padding: 10px 20px;
+  font-size: 16px;
+}
+
+.flip-box-back-osmc > button {
+  padding: 10px 30px;
+  background-color: #003087;
+  font-size: 16px;
+  border: none;
+  border-radius: 10px;
+}
+
+.flip-box-back-osmc > button > a {
+  color: #ffffff;
+}
+
+/* START .oa */
+
+.flip-box-oa {
+  background-color: transparent;
+  height: 300px;
+  perspective: 1000px;
+}
+
+.flip-box-inner-oa {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.flip-box-oa:hover .flip-box-inner-oa {
+  transform: rotateY(180deg);
+}
+
+.flip-box-front-oa, .flip-box-back-oa {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-box-front-oa {
+  background-image: url("/images/ocean-acidification.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
+  background-size: cover;
+}
+
+.flip-box-front-oa > h1 {
+  margin-top: 50%;
+  font-size: 22px;
+}
+
+.flip-box-back-oa {
+  background-image: url("/images/ocean-acidification.png");
+  color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.8);
+  background-size: cover;
+  transform: rotateY(180deg);
+}
+
+.flip-box-back-oa > h2 {
+  margin-top: 20px;
+  font-size: 18px;
+}
+
+.flip-box-back-oa > p {
+  padding: 10px 20px;
+  font-size: 16px;
+}
+
+.flip-box-back-oa > button {
+  padding: 10px 30px;
+  background-color: #003087;
+  font-size: 16px;
+  border: none;
+  border-radius: 10px;
+}
+
+.flip-box-back-oa > button > a {
+  color: #ffffff;
+}
+
+@media screen and (max-width: 992px) {
+  .flip-box {
+    padding: 15px;
+  }
+  .flip-box-front-model-viewer > h1 {
+    margin-top: 38%;
+  }
+  .flip-box-sanct-sound {
+    padding: 15px;
+  }
+  .flip-box-front-sanct-sound > h1 {
+    margin-top: 38%;
+  }
+  .flip-box-sensor-map {
+    padding: 15px;
+  }
+  .flip-box-front-sensor-map > h1 {
+    margin-top: 38%;
+  }
+  .flip-box-data-discovery {
+    padding: 15px;
+  }
+  .flip-box-front-data-discovery > h1 {
+    margin-top: 38%;
+  }
+  .flip-box-atn {
+    padding: 15px;
+  }
+  .flip-box-front-atn > h1 {
+    margin-top: 38%;
+  }
+  .flip-box-glider-dac {
+    padding: 15px;
+  }
+  .flip-box-front-glider-dac > h1 {
+    margin-top: 38%;
+  }
+  .flip-box-hf-radar {
+    padding: 15px;
+  }
+  .flip-box-front-hf-radar > h1 {
+    margin-top: 38%;
+  }
+  .flip-box-regional-associations {
+    padding: 15px;
+  }
+  .flip-box-front-regional-associations > h1 {
+    margin-top: 38%;
+  }
+  .flip-box-ioos-by-numbers {
+    padding: 15px;
+  }
+  .flip-box-front-ioos-by-numbers > h1 {
+    margin-top: 38%;
+  }
+  .flip-box-compliance-checker {
+    padding: 15px;
+  }
+  .flip-box-front-compliance-checker > h1 {
+    margin-top: 38%;
+  }
+  .flip-box-mbon {
+    padding: 15px;
+  }
+  .flip-box-front-mbon > h1 {
+    margin-top: 38%;
+  }
+  .flip-box-comt {
+    padding: 15px;
+  }
+  .flip-box-front-comt > h1 {
+    margin-top: 38%;
+  }
+  .flip-box-video-portal {
+    padding: 15px;
+  }
+  .flip-box-front-video-portal > h1 {
+    margin-top: 38%;
+  }
+  .flip-box-code-lab {
+    padding: 15px;
+  }
+  .flip-box-front-code-lab > h1 {
+    margin-top: 38%;
+  }
+  .flip-box-osmc {
+    padding: 15px;
+  }
+  .flip-box-front-osmc > h1 {
+    margin-top: 38%;
+  }
+  .flip-box-oa {
+    padding: 15px;
+  }
+  .flip-box-front-oa > h1 {
+    margin-top: 38%;
+  }
+}
\ No newline at end of file
diff --git a/public/images/compliance-checker.png b/public/images/compliance-checker.png
new file mode 100644
index 0000000..b86eeb7
Binary files /dev/null and b/public/images/compliance-checker.png differ
diff --git a/public/images/ioos-by-the-numbers-22.png b/public/images/ioos-by-the-numbers-22.png
new file mode 100644
index 0000000..fcf78be
Binary files /dev/null and b/public/images/ioos-by-the-numbers-22.png differ
diff --git a/views/index.html b/views/index.html
index 552cf2d..f3f74dd 100644
--- a/views/index.html
+++ b/views/index.html
@@ -8,18 +8,17 @@
 }(document, 'script', 'facebook-jssdk'));</script>
 <div id="grid-container" class="container">
   <div class="container">
-    <div class="row">
-      
-      <div class="col-md-12" style="padding-bottom: 8px;">
+    <div class="row justify-content-center">
+      <div class="col-md-6 col-md-offset-3" style="padding-bottom: 8px;">
         <!-- <button id="search-data-button" class="btn btn-default open" type="button" data-toggle="collapse" data-target="#search-input-collapse" aria-expanded="false" aria-controls="search-input-collapse">
           <span>Search IOOS Data</span>
         </button> -->
         <div id="search-input-collapse">
           <div class="well search-bar">
-            <div class="col-md-3">
-              <p class="search-title">Search IOOS Data:</p>
+            <div class="col-md-6">
+              <p class="search-title">Search IOOS Data Catalog:</p>
             </div>
-            <div class="input-group col-md-9">
+            <div class="input-group col-md-6">
               <input type="text" class="form-control" placeholder="E.g. Environment" aria-describedby="basic-addon">
               <span class="input-group-btn">
                 <button class="btn btn-default" type="button">
@@ -34,106 +33,221 @@
   </div>
   <div class="row">
     <div class="col-md-12">
-      <!-- <div class="center-block"> -->
-        <div class="grid" data-masonry='{"itemSelector": ".grid-item", "columnWidth": ".grid-item.onexone"}'>
-          <a class="grid-item twoxone ioos-eds" href="https://eds.ioos.us/">
-            <div class="tile-wrap">
-              <h1>IOOS Model Viewer</h1>
-            </div>
-          </a>
-          <a class="grid-item onexone sanct-sound" href="#" target="_blank">
-            <div class="tile-wrap">
-              <h1>Sanctuary Soundscape <br />(SanctSound)</h1>
-            </div>
-          </a>
-          <a class="grid-item onexone metrics orange" href="//ioos.noaa.gov/about/ioos-by-the-numbers/" target="_blank">
-            <div class="tile-wrap">
-              <h1>IOOS By The Numbers</h1>
-              <span class="glyphicon glyphicon-signal" aria-hidden="true"></span>
-            </div>
-          </a>
-          <a class="grid-item onexone glider-dac" href="https://gliders.ioos.us/">
-            <div class="tile-wrap">
-              <h1>Profiling Gliders</h1>
-            </div>
-          </a>
-          <a class="grid-item onexone regional-associations orange" href="/regions">
-            <div class="tile-wrap">
-              <h1>Regional Associations</h1>
-            </div>
-          </a>
-          <a class="grid-item twoxone data-discovery aqua" href="https://data.ioos.us">
-            <div class="tile-wrap">
-              <h1>IOOS Data Catalog</h1>
-              <!-- <span class="glyphicon glyphicon-search" aria-hidden="true"></span> -->
-            </div>
-          </a>
-          <a class="grid-item twoxone sensor-map" href="https://sensors.ioos.us/">
-            <div class="tile-wrap">
-              <h1>Environmental Sensor Map</h1>
-            </div>
-          </a>
-          <a class="grid-item onexone mbon" href="https://mbon.ioos.us">
-            <div class="tile-wrap">
-              <h1>Marine Biodiversity (MBON) Data</h1>
-            </div>
-          </a>
-          <a class="grid-item onexone comt aqua" href="https://comt.ioos.us">
-            <div class="tile-wrap">
-              <h1>Coastal and Ocean Modeling Testbed</h1>
-            </div>
-          </a>
-          <a class="grid-item twoxone atn" href="//atn.ioos.us">
-            <div class="tile-wrap">
-              <h1>Animal Telemetry Network</h1>
-            </div>
-          </a>
-          <!-- <a class="grid-item onexone surf-cam" href="/surf-cam">
-            <div class="tile-wrap">
-              <h1>Live Surf Camera</h1>
-            </div>
-          </a> -->
-          <a class="grid-item onexone video-portal" href="https://video.ioos.us/">
-            <div class="tile-wrap">
-              <h1>Video Portal</h1>
-            </div>
-          </a>
-          <a class="grid-item onexone data-demo-center" href="https://ioos.github.io/ioos_code_lab/content/intro.html" target="_blank">
-            <div class="tile-wrap">
-              <h1>CodeLab</h1>
-            </div>
-          </a>
-          <a class="grid-item onexone hf-radar" href="//hfradar.ioos.us">
-            <div class="tile-wrap">
-              <h1>HF Radar</h1>
-            </div>
-          </a>
-          <a class="grid-item onexone compliance-checker aqua" href="/compliance-checker">
-            <div class="tile-wrap">
-              <h1>Compliance Checker</h1>
-              <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
-            </div>
-          </a>
-          <a class="grid-item onexone osmc" href="//osmc.ioos.us">
-            <div class="tile-wrap">
-              <h1>NOAA Observing System Monitoring Center</h1>
-            </div>
-          </a>
-          <a class="grid-item onexone ocean-acidification" href="//oa.ioos.us">
-            <div class="tile-wrap">
-              <h1>Ocean Acidification</h1>
-            </div>
-          </a>
+      <!-- <h1 class="new-title">DATA AND VIEWERS</h1> -->
+      <div class="flip-box col-md-3 col-xs-6">
+        <div class="flip-box-inner-model-viewer new-design">
+          <div class="flip-box-front-model-viewer">
+            <h1>IOOS Model Viewer</h1>
+          </div>
+          <div class="flip-box-back-model-viewer">
+            <h2>IOOS Model Viewer</h2>
+            <p>The IOOS Model Viewer provides a platform for visualization and analysis of integrated model output.</p>
+            <button><a href="https://eds.ioos.us/">Learn More</a></button>
+          </div>
+        </div>
+      </div>
+      <div class="flip-box-sanct-sound col-md-3 col-xs-6">
+        <div class="flip-box-inner-sanct-sound new-design">
+          <div class="flip-box-front-sanct-sound">
+            <h1>Sanctuary Soundscape <br>(SanctSound)</h1>
+          </div>
+          <div class="flip-box-back-sanct-sound">
+            <h2>Sanctuary Soundscape (SanctSound)</h2>
+            <p>NOAA and the U.S. Navy will work with partners to study sound within seven national marine sanctuaries and one marine national monument.</p>
+            <button><a href="https://sanctsound.ioos.us/">Learn More</a></button>
+          </div>
         </div>
-      <!-- </div> -->
+      </div>
+      <div class="flip-box-sensor-map col-md-3 col-xs-6">
+        <div class="flip-box-inner-sensor-map new-design">
+          <div class="flip-box-front-sensor-map">
+            <h1>Environmental Sensor Map</h1>
+          </div>
+          <div class="flip-box-back-sensor-map">
+            <h2>Environmental Sensor Map</h2>
+            <p>The Environmental Sensor Map integrates regional, national, and global real-time (past 4-hours) data across the IOOS enterprise.</p>
+            <button><a href="https://sensors.ioos.us/">Learn More</a></button>
+          </div>
+        </div>
+      </div>
+      <div class="flip-box-data-discovery col-md-3 col-xs-6">
+        <div class="flip-box-inner-data-discovery new-design">
+          <div class="flip-box-front-data-discovery">
+            <h1>IOOS Data Catalog</h1>
+          </div>
+          <div class="flip-box-back-data-discovery">
+            <h2>IOOS Data Catalog</h2>
+            <p>The IOOS Catalog is the master inventory of IOOS datasets and data access services provided by our network of 11 Regional Associations, functional data assembly centers (DACs), and federal partners.</p>
+            <button><a href="https://data.ioos.us/">Learn More</a></button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
   <div class="row">
-    <div class="col-md-6 col-md-offset-1">
+    <div class="col-md-12">
+      <div class="flip-box-atn col-md-3 col-xs-6">
+        <div class="flip-box-inner-atn new-design">
+          <div class="flip-box-front-atn">
+            <h1>Animal Telemetry <br>Network</h1>
+          </div>
+          <div class="flip-box-back-atn">
+            <h2>Animal Telemetry Network</h2>
+            <p>The ATN data management vision includes a regionally distributed data collection, management and sharing capacity that builds on and integrates as many existing data links as possible.</p>
+            <button><a href="https://atn.ioos.us/">Learn More</a></button>
+          </div>
+        </div>
+      </div>
+      <div class="flip-box-glider-dac col-md-3 col-xs-6">
+        <div class="flip-box-inner-glider-dac new-design">
+          <div class="flip-box-front-glider-dac">
+            <h1>Profiling Gliders</h1>
+          </div>
+          <div class="flip-box-back-glider-dac">
+            <h2>Profiling Gliders</h2>
+            <p>The mission of the Glider DAC is to provide glider operators with a simple process for submitting glider data sets to a centralized location.</p>
+            <button><a href="https://gliders.ioos.us/">Learn More</a></button>
+          </div>
+        </div>
+      </div>
+      <div class="flip-box-hf-radar col-md-3 col-xs-6">
+        <div class="flip-box-inner-hf-radar new-design">
+          <div class="flip-box-front-hf-radar">
+            <h1>HF Radar</h1>
+          </div>
+          <div class="flip-box-back-hf-radar">
+            <h2>HF Radar</h2>
+            <p>IOOS operates the nation’s only high-frequency (HF) radar network, providing real-time information on the speed and direction of surface currents.</p>
+            <button><a href="https://hfradar.ioos.us/">Learn More</a></button>
+          </div>
+        </div>
+      </div>
+      <div class="flip-box-regional-associations col-md-3 col-xs-6">
+        <div class="flip-box-inner-regional-associations new-design">
+          <div class="flip-box-front-regional-associations">
+            <h1>Regional Portals</h1>
+          </div>
+          <div class="flip-box-back-regional-associations">
+            <h2>Regional Portals</h2>
+            <p>Click here to view an interactive map of all of IOOS regional associations.</p>
+            <button><a href="https://ioos.us/regions">Learn More</a></button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="flip-box-ioos-by-numbers col-md-3 col-xs-6">
+        <div class="flip-box-inner-ioos-by-numbers new-design">
+          <div class="flip-box-front-ioos-by-numbers">
+            <h1>IOOS By The <br>Numbers</h1>
+          </div>
+          <div class="flip-box-back-ioos-by-numbers">
+            <h2>IOOS By The Numbers</h2>
+            <p>U.S. IOOS® is a vital tool for tracking, predicting, managing, and adapting to changes in our ocean, coastal and Great Lakes environment.</p>
+            <button><a href="https://ioos.noaa.gov/about/ioos-by-the-numbers/">Learn More</a></button>
+          </div>
+        </div>
+      </div>
+      <div class="flip-box-compliance-checker col-md-3 col-xs-6">
+        <div class="flip-box-inner-compliance-checker new-design">
+          <div class="flip-box-front-compliance-checker">
+            <h1>Compliance Checker</h1>
+          </div>
+          <div class="flip-box-back-compliance-checker">
+            <h2>Compliance Checker</h2>
+            <p>The objective of the IOOS Compliance Checker is to check your file against our interpretation of select dataset metadata standards to use as a guideline in generating compliant files.</p>
+            <button><a href="https://ioos.us/compliance-checker">Learn More</a></button>
+          </div>
+        </div>
+      </div>
+      <div class="flip-box-mbon col-md-3 col-xs-6">
+        <div class="flip-box-inner-mbon new-design">
+          <div class="flip-box-front-mbon">
+            <h1>Marine Biodiversity (MBON) Data</h1>
+          </div>
+          <div class="flip-box-back-mbon">
+            <h2>Marine Biodiversity (MBON) Data</h2>
+            <p>Search and download real-time, delayed-mode, and historical data for in situ and remotely-sensed physical, chemical, and biological observations.</p>
+            <button><a href="https://mbon.ioos.us/">Learn More</a></button>
+          </div>
+        </div>
+      </div>
+      <div class="flip-box-comt col-md-3 col-xs-6">
+        <div class="flip-box-inner-comt new-design">
+          <div class="flip-box-front-comt">
+            <h1>Coastal and Ocean Modeling Testbed</h1>
+          </div>
+          <div class="flip-box-back-comt">
+            <h2>Coastal and Ocean Modeling Testbed</h2>
+            <p>The COMT serves as a conduit between the federal operational and research communities and allows sharing of numerical models, observations and software tools.</p>
+            <button><a href="https://comt.ioos.us/">Learn More</a></button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="flip-box-video-portal col-md-3 col-xs-6">
+        <div class="flip-box-inner-video-portal new-design">
+          <div class="flip-box-front-video-portal">
+            <h1>Video Portal</h1>
+          </div>
+          <div class="flip-box-back-video-portal">
+            <h2>Video Portal</h2>
+            <p>This portal contains video and photography of the seafloor and aerial imagery along much of the coastal U.S.</p>
+            <button><a href="https://video.ioos.us/">Learn More</a></button>
+          </div>
+        </div>
+      </div>
+      <div class="flip-box-code-lab col-md-3 col-xs-6">
+        <div class="flip-box-inner-code-lab new-design">
+          <div class="flip-box-front-code-lab">
+            <h1>CodeLab</h1>
+          </div>
+          <div class="flip-box-back-code-lab">
+            <h2>CodeLab</h2>
+            <p>The IOOS CodeLab is a collection of tutorials and examples of how to access and utilize the many IOOS technologies and data sources available.</p>
+            <button><a href="https://ioos.github.io/ioos_code_lab/content/intro.html">Learn More</a></button>
+          </div>
+        </div>
+      </div>
+      <div class="flip-box-osmc col-md-3 col-xs-6">
+        <div class="flip-box-inner-osmc new-design">
+          <div class="flip-box-front-osmc">
+            <h1>Observing System Monitoring Center</h1>
+          </div>
+          <div class="flip-box-back-osmc">
+            <h2>Observing System Monitoring Center</h2>
+            <p>This project exists to join the discrete “networks” of global in situ ocean observing platforms -- ships, surface floats, profiling floats, tide gauges, etc. – into a single, integrated system.</p>
+            <button><a href="https://osmc.ioos.us/">Learn More</a></button>
+          </div>
+        </div>
+      </div>
+      <div class="flip-box-oa col-md-3 col-xs-6">
+        <div class="flip-box-inner-oa new-design">
+          <div class="flip-box-front-oa">
+            <h1>Ocean Acidification</h1>
+          </div>
+          <div class="flip-box-back-oa">
+            <h2>Ocean Acidification</h2>
+            <p>IOOS, in collaboration with NOAA’s Ocean Acidification Program (OAP), is making real-time ocean acidification data more accessible.</p>
+            <button><a href="https://oa.ioos.us/">Learn More</a></button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="row">
+    <div class="col-md-3 col-md-offset-3 col-xs-6">
       <a class="twitter-timeline" data-dnt="true" href="https://twitter.com/usioosgov" data-widget-id="711944329313574912">Tweets by @usioosgov</a>
       <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
     </div>
-    <div class="col-md-5">
+    <div class="col-md-5 col-xs-6">
       <div class="fb-page" data-href="https://www.facebook.com/usioosgov" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-height="600" data-show-facepile="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/usioosgov"><a href="https://www.facebook.com/usioosgov">U.S. Integrated Ocean Observing System</a></blockquote></div></div>
     </div>
   </div>