diff --git a/app/static/css/partials/_film.scss b/app/static/css/partials/_film.scss
index 85d34f1..8dd2edb 100755
--- a/app/static/css/partials/_film.scss
+++ b/app/static/css/partials/_film.scss
@@ -104,11 +104,26 @@ main > .film {
         text-decoration: none;
       }
       figure {
+        position: relative;
         img {
           max-width: 100%;
           max-height: 100%;
           object-fit: contain;
         }
+        .overlay {
+          position: absolute;
+          height: 100%;
+          width: 100%;
+          display: flex;
+          img {
+            width: 50%;
+            margin: auto;
+            padding-bottom: 64px;
+            &:hover {
+              filter: invert(1);
+            }
+          }
+        }
       }
     }
     @media screen and (max-width: 799px) {
diff --git a/app/static/svg/play.svg b/app/static/svg/play.svg
new file mode 100644
index 0000000..4f679c9
--- /dev/null
+++ b/app/static/svg/play.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
+    <polygon points="56,32 248,128 56,224" fill="#F0F0F080"/>
+</svg>
+
diff --git a/app/templates/film.html b/app/templates/film.html
index 4ad7730..c5b21e7 100644
--- a/app/templates/film.html
+++ b/app/templates/film.html
@@ -79,6 +79,9 @@ body {
 			<div class="item">
 				<a href="play/{{  item.id }}">
 					<figure>
+						<div class="overlay">
+							<img src="{% static 'svg/play.svg' %}">
+						</div>
 						<img src="https://archive.njp.ma/{{ item.id }}/480p.jpg">
 						<figcaption>
 							{{ item.title | safe }}