diff --git a/public/assets/css/general.css b/public/assets/css/general.css
index 377ea7a9af8fd0025bc571dd76ece70faffcce80..c5c21497be0917a3ca2a3e1a5a6d33651db1d170 100644
--- a/public/assets/css/general.css
+++ b/public/assets/css/general.css
@@ -14,25 +14,10 @@ body, html {
     height: 100%
 }
 
-.main-wrapper {
-    padding: 30px;
-    min-height: 100%;
-    display: flex;
-    flex-direction: column;
-}
 
-.container-wrapper {
-    flex: 1;
-    background-color: white;
-    border-radius: 5px;
-    opacity: 0.9;
-    display: flex;
-    flex-direction: column;
-}
 
 #footer-content {
     border-radius: 0px 0px 5px 5px;
-
 }
 
 #header-content {
@@ -44,16 +29,11 @@ body, html {
     margin: 10px;
 }
 
-#usercard, #groupcard {
+#groupcard {
     width: 350px;
-    grid-row:1/3
 }
 
 .form_format {
-    grid-column: span 4 ;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     min-height: calc(100vh - 240px);
 }
 
@@ -62,69 +42,24 @@ body, html {
     justify-content: center;
 }
 
-#content {
-    display: grid;
-    grid-template-columns: 30% 25% 25%;
-    grid-gap: 2px;
-    grid-template-rows: repeat(4, var(--row-height));
-}
 
-#members{
-    grid-row: 3/5;
-    grid-column: 1/5;
+.list{
     max-height: 370px;
-}
-
-#usercard {
-    grid-column: 1/2;
-    grid-row:1/2
-}
-#map {
-    grid-row:1/3;
-    grid-column: 2/5;
+    overflow: scroll;
 }
 
 #members_list {
     max-height: 95%;
 }
 
-#groups {
-    grid-row: 2/5;
-    grid-column: 1/2;
-
-}
-
 #list {
     overflow:scroll;
-    grid-row:2/5;
-    grid-column: 1/5;
-}
-
-#center_text {
-    grid-column: span 4 ;
+    max-width: 100%;
 
 }
 
-#list_tchat {
-    grid-column: 1/2;
-    grid-row: 1/3;
-}
-
-.current_tchat{
-    grid-column: 2/5;
-    grid-row: 1/2;
-}
 
-#current_messages{
-    grid-column: 2/5;
-    grid-row: 2/4;
-    overflow: scroll;
-}
 
-.reply {
-    grid-column: 2/5;
-    grid-row: 4/5;
-}
 #map {
     height: 400px;
     width: 100%;
diff --git a/public/assets/css/grid.css b/public/assets/css/grid.css
new file mode 100644
index 0000000000000000000000000000000000000000..0eea98672e2a4c0e5c2e36b8bb98d7455f21ac8c
--- /dev/null
+++ b/public/assets/css/grid.css
@@ -0,0 +1,229 @@
+.main-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    padding: 30px;
+    min-height: 100%;
+
+}
+
+.container-wrapper {
+    flex: 1;
+    background-color: white;
+    border-radius: 5px;
+    opacity: 0.9;
+    display: flex;
+    flex-direction: column;
+}
+
+.col {
+flex-shrink: 1;
+flex-grow: 0;
+justify-content: flex-start;
+box-sizing: border-box;
+}
+
+.row {
+display: flex;
+flex-direction: row;
+}
+
+.col + .col {
+margin-left: 1.2%;
+}
+
+.s1 {
+flex-basis: 7.2333333333%;
+}
+
+.s2 {
+flex-basis: 15.6666666667%;
+}
+
+.s3 {
+flex-basis: 24.1%;
+}
+
+.s4 {
+flex-basis: 32.5333333333%;
+}
+
+.s5 {
+flex-basis: 40.9666666667%;
+}
+
+.s6 {
+flex-basis: 49.4%;
+}
+
+.s7 {
+flex-basis: 57.8333333333%;
+}
+
+.s8 {
+flex-basis: 66.2666666667%;
+}
+
+.s9 {
+flex-basis: 74.7%;
+}
+
+.s10 {
+flex-basis: 83.1333333333%;
+}
+
+.s11 {
+flex-basis: 91.5666666667%;
+}
+
+.s12 {
+flex-basis: 100%;
+}
+
+@media only screen and (min-width: 650px) {
+.m1 {
+    flex-basis: 7.2333333333%;
+}
+
+.m2 {
+    flex-basis: 15.6666666667%;
+}
+
+.m3 {
+    flex-basis: 24.1%;
+}
+
+.m4 {
+    flex-basis: 32.5333333333%;
+}
+
+.m5 {
+    flex-basis: 40.9666666667%;
+}
+
+.m6 {
+    flex-basis: 49.4%;
+}
+
+.m7 {
+    flex-basis: 57.8333333333%;
+}
+
+.m8 {
+    flex-basis: 66.2666666667%;
+}
+
+.m9 {
+    flex-basis: 74.7%;
+}
+
+.m10 {
+    flex-basis: 83.1333333333%;
+}
+
+.m11 {
+    flex-basis: 91.5666666667%;
+}
+
+.m12 {
+    flex-basis: 100%;
+}
+}
+@media only screen and (min-width: 1000px) {
+.l1 {
+    flex-basis: 7.2333333333%;
+}
+
+.l2 {
+    flex-basis: 15.6666666667%;
+}
+
+.l3 {
+    flex-basis: 24.1%;
+}
+
+.l4 {
+    flex-basis: 32.5333333333%;
+}
+
+.l5 {
+    flex-basis: 40.9666666667%;
+}
+
+.l6 {
+    flex-basis: 49.4%;
+}
+
+.l7 {
+    flex-basis: 57.8333333333%;
+}
+
+.l8 {
+    flex-basis: 66.2666666667%;
+}
+
+.l9 {
+    flex-basis: 74.7%;
+}
+
+.l10 {
+    flex-basis: 83.1333333333%;
+}
+
+.l11 {
+    flex-basis: 91.5666666667%;
+}
+
+.l12 {
+    flex-basis: 100%;
+}
+}
+.o1 {
+margin-left: 6.0333333333% !important;
+}
+
+.o2 {
+margin-left: 13.2666666667% !important;
+}
+
+.o3 {
+margin-left: 20.5% !important;
+}
+
+.o4 {
+margin-left: 27.7333333333% !important;
+}
+
+.o5 {
+margin-left: 34.9666666667% !important;
+}
+
+.o6 {
+margin-left: 42.2% !important;
+}
+
+.o7 {
+margin-left: 49.4333333333% !important;
+}
+
+.o8 {
+margin-left: 56.6666666667% !important;
+}
+
+.o9 {
+margin-left: 63.9% !important;
+}
+
+.o10 {
+margin-left: 71.1333333333% !important;
+}
+
+.o11 {
+margin-left: 78.3666666667% !important;
+}
+
+.o12 {
+margin-left: 85.6% !important;
+}
+
+/*# sourceMappingURL=_grid.css.map */