diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 40624c92c68f57ed099ba72037ae801785d25ce5..80a425d9fd098e76485aebbd1c1d1fea237d6956 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -6,71 +6,93 @@
     <div>
       <div class="covex bar-left">
 
-        <div class="card bar-small">
+        <div class="card bar-large">
           <header class="card-header">
             <p class="card-header-title">
           <span class="icon">
         <i class="fas fa-database" aria-hidden="true"></i>
       </span> Choose Dataset
             </p>
+            <a (click)="collabsData = !collabsData" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options">
+             <span class="icon">
+               <i class="fas fa-angle-down" aria-hidden="true"></i>
+             </span>
+            </a>
           </header>
-          <div class="card-content">
-            <app-select-dataset [datasetItems]="datasetItems"  [selectedDataset]="selectedDataset"
-                                (selectedDatasetChange)="selectedDataset = $event; createNetwork($event.data)">
-            </app-select-dataset>
+          <div *ngIf="collabsData">
 
+            <div class="card-content">
+              <app-select-dataset [datasetItems]="datasetItems"  [selectedDataset]="selectedDataset"
+                                  (selectedDatasetChange)="selectedDataset = $event; createNetwork($event.data)">
+              </app-select-dataset>
+
+            </div>
           </div>
         </div>
 
-        <div class="card bar-medium">
+        <div class="card bar-large">
           <header class="card-header">
             <p class="card-header-title">
           <span class="icon">
         <i class="fas fa-info" aria-hidden="true"></i>
       </span> Network Overview
             </p>
+            <a (click)="collabsOverview= !collabsOverview" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options">
+             <span class="icon">
+               <i class="fas fa-angle-down" aria-hidden="true"></i>
+             </span>
+            </a>
           </header>
-          <div class="card-content">
-            <nav class="level" *ngIf="proteinData">
-              <div class="level-item has-text-centered">
-                <div>
-                  <p class="heading">Viral<br>Proteins</p>
-                  <p class="title"> {{ proteinData.effects.length }}</p>
+          <div *ngIf="collabsOverview">
+            <div class="card-content">
+              <nav class="level" *ngIf="proteinData">
+                <div class="level-item has-text-centered">
+                  <div>
+                    <p class="heading">Viral<br>Proteins</p>
+                    <p class="title"> {{ proteinData.effects.length }}</p>
+                  </div>
                 </div>
-              </div>
-              <div class="level-item has-text-centered">
-                <div>
-                  <p class="heading">Host<br>Proteins</p>
-                  <p class="title">{{ proteinData.proteins.length }}</p>
+                <div class="level-item has-text-centered">
+                  <div>
+                    <p class="heading">Host<br>Proteins</p>
+                    <p class="title">{{ proteinData.proteins.length }}</p>
+                  </div>
                 </div>
-              </div>
-              <div class="level-item has-text-centered">
-                <div>
-                  <p class="heading">Virus-Host<br>Interactions</p>
-                  <p class="title">{{ proteinData.edges.length }}</p>
+                <div class="level-item has-text-centered">
+                  <div>
+                    <p class="heading">Virus-Host<br>Interactions</p>
+                    <p class="title">{{ proteinData.edges.length }}</p>
+                  </div>
                 </div>
-              </div>
-            </nav>
+              </nav>
+            </div>
           </div>
         </div>
 
-        <div class="card bar-small">
+        <div class="card bar-large" >
           <header class="card-header">
             <p class="card-header-title">
           <span class="icon">
         <i class="fas fa-search" aria-hidden="true"></i>
       </span> Query Protein
             </p>
-          </header>
-          <div class="card-content">
-            <div class="field">
-              <div class="control">
-                <app-query-component [queryItems]="queryItems"
-                                     (selectItem)="queryAction($event)"></app-query-component>
+            <a (click)="collabsQuery = !collabsQuery" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options">
+           <span class="icon">
+             <i class="fas fa-angle-down" aria-hidden="true"></i>
+           </span>
+          </a>
+          </header >
+          <div *ngIf="collabsQuery">
+            <div class="card-content">
+              <div class="field">
+                <div class="control">
+                  <app-query-component [queryItems]="queryItems"
+                                       (selectItem)="queryAction($event)"></app-query-component>
+                </div>
               </div>
             </div>
           </div>
-        </div>
+      </div>
 
         <div class="card bar-large">
           <header class="card-header">
@@ -95,7 +117,6 @@
                 </label>
               </div>
             </div>
-          </div>
           <footer class="card-footer">
             <a (click)="reset($event);" class="card-footer-item has-text-danger">
               <span class="icon">
@@ -108,6 +129,7 @@
           </footer>
         </div>
       </div>
+      </div>
 
       <div class="covex network">
         <div class="card network">
@@ -309,7 +331,6 @@
             To select proteins, click them while pressing CTRL.
           </i>
         </div>
-      </div>
       <footer class="card-footer">
         <a (click)="addAllHostProteins()" class="card-footer-item has-text-success">
           <span class="icon">
@@ -339,6 +360,7 @@
         </a>
       </footer>
     </div>
+    </div>
 
 
   </div>
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 1ff727b29f26fedf48c7c7b2cb02b43a851905c7..92db3b0fb00451c85d59f4a314fdf98900791ea5 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -28,6 +28,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
   public collabsTask = true;
   public collabsSelection = true;
   public collabsDFilter = true;
+  public collabsQuery = true;
+  public collabsData = true;
+  public collabsOverview = true;
   public currentProteinAc = '';
   public geneNames: Array<string> = [];
   public proteinNames: Array<string> = [];