diff --git a/pdb-js/src/app/app.component.scss b/pdb-js/src/app/app.component.scss
index ec7bf38..4e03b90 100644
--- a/pdb-js/src/app/app.component.scss
+++ b/pdb-js/src/app/app.component.scss
@@ -5,7 +5,7 @@
   width: 100%;
   padding-bottom: 0.5em;
   border-bottom: solid 1px black;
-  background-color: #eee;
+  background-color: #ccc;
 }
   
 .right{
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.html b/pdb-js/src/app/visualization-page/visualization-page.component.html
index cefb7f9..8b6f6d9 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.html
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.html
@@ -2,4 +2,9 @@
 
 </style>
 
-visualization-page works!
\ No newline at end of file
+<div id="visualization">
+  <div id="filters">
+    filters
+  </div>
+  <div id="results"></div>
+</div>
\ No newline at end of file
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.scss b/pdb-js/src/app/visualization-page/visualization-page.component.scss
index 0787be9..e1a3c71 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.scss
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.scss
@@ -1,16 +1,39 @@
 :host{
   font-weight: bold;
   width: 100%;
-  height: 100%;
+  height: calc(100% - 29px);
   position: absolute;
+  display: grid;
 }
 
 @media screen {
-  * {
-    background-color: #aaa;
+  #visualization {
+    display: grid;
+    height: 100%;
+    margin: 0;
+    grid:
+      "filters results" 1fr
+      / minmax(200px, 1fr) 3fr;
   }
 }
 
 @media screen and (max-width: 800px) {
-  
+  #visualization {
+    display: grid;
+    height: 100%;
+    margin: 0;
+    grid:
+      "filters" auto
+      "results" 1fr
+      / 1fr;
+  }
+}
+
+#filters {
+  grid-area: filters;
+  background-color: #eee;
+}
+
+#results {
+  grid-area: results;
 }
\ No newline at end of file