diff --git a/bfor.html b/bfor.html
index 1b7deb5..918ff32 100644
--- a/bfor.html
+++ b/bfor.html
@@ -2263,7 +2263,7 @@
         </div>
       </div>
 	  
-	  <section id="content"></section>
+	  <section id="content" class="team_content"></section>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
     <script>
        $.ajax({
@@ -2273,12 +2273,12 @@
           var newContent = '';       // Variable to hold HTML
        
           for (var i = 0; i < data.length; i++) {    // Loop through object
-            newContent += '<div id="event">';
+            newContent += '<div id="event" class="team_item">';
             newContent += '<img class="image crop" src="' + data[i].image + '" ';
             newContent += 'alt="' + data[i].member + '" />';
             newContent += '<h3><b>' + data[i].member + '</b></h3>';
-            newContent += '<p>' + data[i].descriptions + '<br>';
-            newContent += '<i>&quot;' + data[i].email + '&quot;</i></p>';
+            newContent += '<p class="team_data_text">' + data[i].descriptions + '</p>';
+            newContent += '<p class="team_data_text"><i>&quot;' + data[i].email + '&quot;</i></p>';
             newContent += '</div>';
           }
     
diff --git a/css/table.css b/css/table.css
index b4ea35e..a8f7292 100644
--- a/css/table.css
+++ b/css/table.css
@@ -1,187 +1,21 @@
-.box-table table{
-  border-collapse:collapse;
-  text-align:left;
-  width:100%;
-  margin:0;
-  padding:0;
-  background:#7f8c8d;
-  animation: responsive 5s infinite ease-in-out;
-}
-.box-table{
-  font:normal 12px/150% Arial, Helvetica, sans-serif;
-  overflow:hidden;
-  margin:0 auto;
-  display:block;
-  width:95%;
-  padding:2.5%;
-}
-.box-table table thead th{
-  background-color:#7f8c8d;
-  color:#bdc3c7;
-  text-align:center;
-  padding: 0.75em;
-  font-family: 'Vollkorn', serif;
-  font-weight: bold;
-  font-size: 1.5em;
-  height: 1.5em;
-  vertical-align: top;
-  border-left:0.25em double #95a5a6;
-
-}
-.box-table table tbody td,
-.box-table table tbody tr{
-  font-family: 'Vollkorn', serif;
-  font-size:1em;
-  border:none;
-  padding:1em;
-}
-.box-table table tbody tr:nth-child(odd){
-  background:#ecf0f1;
-  color:#95a5a6;
-}
-.box-table table tbody tr:nth-child(even){
-  background:#bdc3c7;
-  color:#7f8c8d;
-}
-.box-table table tbody tr a{
-  text-decoration:none;
-  color:#e67e22;
-}
-.box-table table tbody tr a:hover{
-  color:#d35400;
-}
-.box-table .user-photo{
-  background:#bdc3c7;
-}
-.box-table .user-tumb{
-  width:6em;
-  height:6em;
-  padding:0;
-  display:table-cell;
-  text-align:center;
-  margin:0 auto;
-  -webkit-border-radius:100%;
-  -moz-border-radius:100%;
-  border-radius:100%;
+.team_content {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  row-gap: 50px;
+  margin-top: 80px;
 }
 
-#content{
-  width:100%;
-  padding: 5px;
-  overflow:hidden;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;}
-#event{
-  width: 208.6px;
-  float: left;
-  text-align: center;
-  padding: 10px;
-  margin: 5px 5px 5px 5px;
-  display: inline-table;}
-#container{ /* center for demo only */
-  max-width:725px;
-  width:100%;
-  overflow:hidden;
-  position:absolute;
-  top:50%;
-  left:50%;
-  margin-right:-50%;
-  transform:translate(-50%, -50%);}
-.image{
-  width:200px;
-  padding-bottom:5px;
-  border-radius:50%;}
-/* = Responsive table
-------------------------*/
+.image {
+  width: 190px;
+  height: auto;
+  border-radius: 100%;
+  margin: 0 auto 20px auto;
+}
 
-/* http://elvery.net/demo/responsive-tables/  */
-@media only screen and (max-width: 800px){
-  .box-table table{
-    width:100%;
-    border-collapse:collapse;
-    border-spacing:0;
-  }
-  .box-table th,
-  .box-table td{
-    margin:0;
-    vertical-align:top;
-  }
-  .box-table th{
-    text-align:left;
-  }
-  .box-table table{
-    display:block;
-    position:relative;
-    width:100%;
-  }
-  .box-table thead{
-    display:block;
-    float:left;
-  }
-  .box-table tbody{
-    display:block;
-    width:auto;
-    position:relative;
-    overflow-x:auto;
-    white-space:nowrap;
-  }
-  .box-table thead tr{
-    display:block;
-  }
-  .box-table th{
-    display:block;
-    text-align:right;
-  }
-  .box-table tbody tr{
-    display:inline-block;
-    vertical-align:top;
-  }
-  .box-table td{
-    display:block;
-    min-height:1.25em;
-    text-align:left;
-  }
-  .box-table th{
-    border-bottom:0;
-    border-left:0;
-  }
-  .box-table td{
-    border-left:0;
-    border-right:0;
-    border-bottom:0;
-  }
-}
-/* = Error
-------------------------*/
-.error_table {
-  display: block;
-  background: #E05E5E;
-  color: #D1D1D1;
-  font-family: 'Vollkorn', serif;
+.team_item {
   text-align: center;
-  font-size: 3em;
-  width: 90%;
-  padding: 5%;
 }
-/* = Loader
-------------------------*/
-.loading_table{
-  background:#d35400;
-  color:#ecf0f1;
-  font-family: 'Vollkorn', serif;
-  text-align: center;
-  font-size: 1em;
-  width: 0;
-  display: block;
-  overflow: hidden;
-  height: 1em;
-  /*padding:0.5em; */
-  animation: table_loader 10s infinite ease;
-}
-@keyframes table_loader{50%{width:100%}}
-@-webkit-keyframes table_loader{50%{width:100%}}
-@-moz-keyframes table_loader{50%{width:100%}}
-@-ms-keyframes table_loader{50%{width:100%}}
-@-o-keyframes table_loader{ 50%{width:100%}}
\ No newline at end of file
+
+.team_data_text {
+  margin: 0;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 9e73858..4c763a6 100644
--- a/index.html
+++ b/index.html
@@ -428,7 +428,7 @@
         </div>
       </div>
 	  
-	  <section id="content"></section>
+	  <section id="content" class="team_content"></section>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
     <script>
        $.ajax({
@@ -438,12 +438,12 @@
           var newContent = '';       // Variable to hold HTML
        
           for (var i = 0; i < data.length; i++) {    // Loop through object
-            newContent += '<div id="event">';
+            newContent += '<div id="event" class="team_item">';
             newContent += '<img class="image crop" src="' + data[i].image + '" ';
             newContent += 'alt="' + data[i].member + '" />';
             newContent += '<h3><b>' + data[i].member + '</b></h3>';
-            newContent += '<p>' + data[i].descriptions + '<br>';
-            newContent += '<i>&quot;' + data[i].email + '&quot;</i></p>';
+            newContent += '<p class="team_data_text">' + data[i].descriptions + '</p>';
+            newContent += '<p class="team_data_text"><i>&quot;' + data[i].email + '&quot;</i></p>';
             newContent += '</div>';
           }