diff --git a/README.md b/README.md
index b55667e3..2d4f597a 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ deployments are successful. All in one overview. This is all done via **webhooks
 
 ## Example
 
-![Dashboard demonstration](docs/images/dashboard.png)
+![Dashboard demonstration](docs/images/dashboard.gif)
 
 # :warning: version 3 :warning:
 
diff --git a/docs/images/dashboard.gif b/docs/images/dashboard.gif
new file mode 100644
index 00000000..7a1c3499
Binary files /dev/null and b/docs/images/dashboard.gif differ
diff --git a/docs/images/dashboard.png b/docs/images/dashboard.png
deleted file mode 100644
index 62bffb5e..00000000
Binary files a/docs/images/dashboard.png and /dev/null differ
diff --git a/docs/index.md b/docs/index.md
index 5449ecb0..82e9bb95 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -5,4 +5,4 @@ deployments are successful. All in one overview. This is all done via **webhooks
 
 The time that deployments were scary is over, lets make them FUN!
 
-![dashboard example](images/dashboard.png)
+![dashboard example](images/dashboard.gif)
diff --git a/frontend/components/Icon/Icon.tsx b/frontend/components/Icon/Icon.tsx
index 6f29c52e..5a9a2d7f 100644
--- a/frontend/components/Icon/Icon.tsx
+++ b/frontend/components/Icon/Icon.tsx
@@ -11,6 +11,18 @@ type Props = {
     title?: string;
 };
 
+type SpanProps = {
+    state?: State;
+};
+
+const Span = styled.span<SpanProps>`
+    ${(props) =>
+        props.state &&
+        css`
+            color: ${stateColor[props.state]};
+        `}
+`;
+
 const Icon = ({ icon, state, title }: Props): ReactElement => {
     const classes = ['icon'];
 
@@ -18,15 +30,8 @@ const Icon = ({ icon, state, title }: Props): ReactElement => {
         classes.push('spin');
     }
 
-    const Span = styled.span`
-        ${state &&
-        css`
-            color: ${stateColor[state]};
-        `}
-    `;
-
     return (
-        <Span className={classes.join(' ')} title={title || ''}>
+        <Span state={state} className={classes.join(' ')} title={title || ''}>
             {icon}
         </Span>
     );