diff --git a/src/app/app.component.html b/src/app/app.component.html
index 3a095a0..cdd78ea 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -2,17 +2,17 @@
   fxFlexFill
   gdAreas="header | main  "
   gdGap="0px"
-  gdRows="64px auto"
+  gdRows="15% auto"
   gdAreas.lt-md="header | main "
-  gdRows.lt-md="64px auto "
+  gdRows.lt-md="15% auto "
   gdColumns.lt-md="100% 100% "
   gdAreas.xs="header | main "
-  gdRows.xs="64px 100% "
+  gdRows.xs="15% auto"
   gdColumns.xs="100% 100% "
 >
   <ngcommunity-header gdArea="header"></ngcommunity-header>
   <ngcommunity-main
-    *ngIf="(communitie$ | async) as communities"
+    *ngIf="communitie$ | async as communities"
     gdArea="main"
     [communities]="communities"
   >
diff --git a/src/app/pages/main/components/community-preview/community-preview.component.html b/src/app/pages/main/components/community-preview/community-preview.component.html
index dc9ae57..83cc770 100644
--- a/src/app/pages/main/components/community-preview/community-preview.component.html
+++ b/src/app/pages/main/components/community-preview/community-preview.component.html
@@ -1,4 +1,4 @@
-<div fxLayout="column">
+<div fxLayout="column" style="height: 100%">
   <mat-form-field>
     <input
       placeholder="Search communities"
diff --git a/src/app/pages/main/components/community-preview/community-preview.component.scss b/src/app/pages/main/components/community-preview/community-preview.component.scss
index 64dbba6..b2565ff 100644
--- a/src/app/pages/main/components/community-preview/community-preview.component.scss
+++ b/src/app/pages/main/components/community-preview/community-preview.component.scss
@@ -5,8 +5,9 @@ div {
 .community-preview-list-container {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 210px);
-  padding: 20px;
+  height: 100%;
+  padding: 10px 20px;
+  word-break: break-word;
 }
 
 .community-preview-list-view-port {
@@ -19,9 +20,3 @@ mat-form-field {
   margin-top: 20px;
   padding: 10px;
 }
-
-@media (max-width: 599px) {
-  .community-preview-list-container {
-    height: calc(100vh - 434px);
-  }
-}
diff --git a/src/app/pages/main/components/sidenav/sidenav.component.html b/src/app/pages/main/components/sidenav/sidenav.component.html
index 048b324..4f2e334 100644
--- a/src/app/pages/main/components/sidenav/sidenav.component.html
+++ b/src/app/pages/main/components/sidenav/sidenav.component.html
@@ -79,7 +79,7 @@
   </mat-sidenav-content>
   <ng-template #search class="content">
     <mat-sidenav-content>
-      <ngcommunity-preview (selected)="onSelected($event)" [communities]="communities">
+      <ngcommunity-preview (selected)="onSelected($event)" [communities]="communities" style="height: 100%">
       </ngcommunity-preview>
     </mat-sidenav-content>
   </ng-template>
diff --git a/src/app/pages/main/components/sidenav/sidenav.component.scss b/src/app/pages/main/components/sidenav/sidenav.component.scss
index a8c2870..4166b8f 100644
--- a/src/app/pages/main/components/sidenav/sidenav.component.scss
+++ b/src/app/pages/main/components/sidenav/sidenav.component.scss
@@ -1,17 +1,14 @@
 mat-sidenav-content {
-  height: calc(100vh - 64px);
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-flow: column;
 }
 
 mat-sidenav-container {
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 }
 
-@media (max-width: 599px) {
-  mat-sidenav-content {
-    height: calc(100vh - 222px);
-  }
-}
-
 div {
   font-size: 19px;
 }
diff --git a/src/app/shared/components/community-item/community-item.component.scss b/src/app/shared/components/community-item/community-item.component.scss
index f29059c..1a07339 100644
--- a/src/app/shared/components/community-item/community-item.component.scss
+++ b/src/app/shared/components/community-item/community-item.component.scss
@@ -8,6 +8,8 @@ img {
   border-radius: 10px;
   margin-bottom: 13px;
   padding: 10px 5px 10px 5px;
+  height: fit-content;
+  min-height: 150px;
   &:hover {
     cursor: pointer;
     background-color: #f5f5f5;
diff --git a/src/app/shared/components/header/header.component.scss b/src/app/shared/components/header/header.component.scss
index 6218e25..0a00898 100644
--- a/src/app/shared/components/header/header.component.scss
+++ b/src/app/shared/components/header/header.component.scss
@@ -15,5 +15,11 @@ img {
 }
 
 .main-header {
+  width: 100%;
+  height: 100%;
+  min-height: 40px;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 }
+.main-header-content {
+  height: 100%;
+}