diff --git a/css/preview-film-section.css b/css/preview-film-section.css
new file mode 100644
index 00000000..184a4f28
--- /dev/null
+++ b/css/preview-film-section.css
@@ -0,0 +1,44 @@
+
+.preview-list {
+  list-style-type: none;
+}
+
+.preview-tile {
+  padding : 10px;
+  overflow: hidden;
+  background-color: gray;
+}
+
+.preview-tile .canvas-container {
+  float: left;
+}
+
+.preview-tile .tile-view {
+  float: left;
+  border: blue 1px solid;
+}
+
+.preview-tile .tile-action {
+  display: none;
+  float: right;
+}
+
+.preview-tile:hover .tile-action {
+  display: block;
+}
+
+.preview-tile:hover {
+  background-color: lightgray;
+}
+
+.preview-tile.selected {
+  background-color: lightyellow;
+}
+
+.preview-tile.droppable-active {
+  background-color: pink;
+}
+
+.preview-tile.droppable-hover-active {
+  background-color: yellow;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index a86fe3d0..f51ba77f 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
   <link rel="stylesheet" href="css/reset.css">
   <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="css/tools.css">
+  <link rel="stylesheet" href="css/preview-film-section.css">
   
   
 </head>
@@ -56,7 +57,7 @@
 
   <div class='left-nav'>
     <!-- List of frames: -->
-    <ul id="preview-list"></ul>
+    <ul class="preview-list" id="preview-list"></ul>
   </div>
 
   <div class='main-panel'>