diff --git a/assets/stylesheets/template/layout/content.scss b/assets/stylesheets/template/layout/content.scss
index 20bbbba..e96d79a 100644
--- a/assets/stylesheets/template/layout/content.scss
+++ b/assets/stylesheets/template/layout/content.scss
@@ -267,8 +267,12 @@ body{
     padding-bottom: 0.5em;
   }
 }
+.box:empty{
+  flex: none;
+  display: none;
+}
 .box{
-  flex: 1;
+  flex: 3;
   color: #666666;
   font-family: "Barlow", Sans-serif;
   font-size: 36px;
@@ -280,7 +284,7 @@ body{
   transition: all .25s;
   @media(min-width: 1025px){
     &:hover{
-      flex: 0 1 25%;
+      flex: 4;
       // img{
       //       transform: scale(1.5);
       //       transition: all .25s;
@@ -288,7 +292,8 @@ body{
     }
   }
   @media(max-width: $screen-xs){
-    flex: 100%;
+    width: 100%;
+    flex-wrap: wrap;
     height: 250px;
     padding-bottom: 0.5em;
   }
diff --git a/home/index.html.erb b/home/index.html.erb
index 7441eab..212d6fd 100644
--- a/home/index.html.erb
+++ b/home/index.html.erb
@@ -24,6 +24,7 @@
           <section class="layout-content-box box " data-pp="4"></section>
           <section class="layout-content-box box " data-pp="1"></section>
         </div>
+        
         <div class="row colorbox">
          <section class="extra-box col-sm-12" data-pp="33"></section>
         </div>
@@ -43,6 +44,13 @@
        <div class="layout-content-box col-sm-12 tab" data-pp="28"></div>
       </div>
       </div>
+      <div class="row group">
+        <section class="layout-content-box box" data-pp="101"></section>
+        <section class="layout-content-box box" data-pp="102"></section>
+        <section class="layout-content-box box" data-pp="103"></section>
+        <section class="layout-content-box box" data-pp="104"></section>
+        <section class="layout-content-box box" data-pp="105"></section>
+      </div>
       <div class="row">
         <div class="extra-box col-sm-12" data-pp="29"></div>
       </div>