diff --git a/components/Header/Confetti.js b/components/Header/Confetti.js
index f1808ea..3b5165e 100644
--- a/components/Header/Confetti.js
+++ b/components/Header/Confetti.js
@@ -1,19 +1,8 @@
 // @flow
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, Fragment } from 'react';
 import ReactDOM from 'react-dom';
-import styled from 'styled-components';
+import { ParticleZone } from './style';
 
-const ConfettiZone = styled.div`
-  .particles {
-    position: fixed;
-    top: 0;
-
-    .particle {
-      position: absolute;
-      transition: all 5s ease-out;
-    }
-  }
-`
 
 const COLORS = ['#2ecc71','#3498db','#e67e22','#e67e22','#e74c3c'];
 const TOP_OFFSET = typeof window !== 'undefined' && window.innerHeight;
@@ -31,7 +20,7 @@ export function CircularParticle(props: Props) {
   const ROTATION_RANGE = [0, 45];
 
   const size = generateWholeNumber(...SIZE_RANGE);
-  style = {
+  const style = {
     backgroundColor: generateRandomColor(),
     width: size,
     height: size,
@@ -41,63 +30,66 @@ export function CircularParticle(props: Props) {
     top: generateWholeNumber(-TOP_OFFSET, 0)
   };
 
-  const {left} = style;
-
-  setTimeout(() => {
-    const node = ReactDOM.findDOMNode(currentConfetti);
-    node.style.top = TOP_OFFSET + generateWholeNumber(0, TOP_OFFSET) + 'px';
-    node.style.left = left + generateWholeNumber(-LEFT_OFFSET, LEFT_OFFSET) + 'px';
-  },0);
-  
+  useEffect(() => {
+    const {left} = style;
+    setTimeout(() => {
+      const node = currentConfetti.current;
+      if (node) {
+        node.style.top = TOP_OFFSET + generateWholeNumber(0, TOP_OFFSET) + 'px';
+        node.style.left = left + generateWholeNumber(-LEFT_OFFSET, LEFT_OFFSET) + 'px';
+      }
+    },10);
+   }); 
     
   return (
-    <div ref={currentConfetti} className='particle' style={this.style}/>
+    <div ref={currentConfetti} className='particle' style={style}/>
   );
 }
 
-// function SquiggleParticle(props: Props) {
-  
-//   static SIZE_RANGE = [15, 45];
-//   static ROTATION_RANGE = [-15, 15];
+function SquiggleParticle(props: Props) {
+  const currentConfetti = useRef(null);  
+  const SIZE_RANGE = [15, 45];
+  const ROTATION_RANGE = [-15, 15];
 
-//   const size = generateWholeNumber(...SquiggleParticle.SIZE_RANGE);
-//   this.style = {
-//     fill: generateRandomColor(),
-//     width: size,
-//     height: size,
-//     transform: `rotateZ(${generateWholeNumber(...SquiggleParticle.ROTATION_RANGE)}deg)`,
-//     left: generateWholeNumber(0, window.innerWidth),
-//     top: generateWholeNumber(-TOP_OFFSET, 0)
-//   };
+  const size = generateWholeNumber(...SIZE_RANGE);
+  const style = {
+    fill: generateRandomColor(),
+    width: size,
+    height: size,
+    transform: `rotateZ(${generateWholeNumber(...ROTATION_RANGE)}deg)`,
+    left: generateWholeNumber(0, INNER_WIDTH),
+    top: generateWholeNumber(-TOP_OFFSET, 0)
+  };
 
-//   useEffect(() => {
-//     const {left} = this.style;
-//     const {ROTATION_RANGE} = SquiggleParticle;
-//     setTimeout(() => {
-//       const node = ReactDOM.findDOMNode(this.ref);
-//       node.style.top = window.innerHeight + generateWholeNumber(0, TOP_OFFSET) + 'px';
-//       node.style.left = left + generateWholeNumber(-LEFT_OFFSET, LEFT_OFFSET) + 'px';
-//       node.style.transform = `rotateZ(${generateWholeNumber(...ROTATION_RANGE)}deg)`;
-//     },0);
-//   }
 
-//   return (
-//     <svg 
-//       ref={ref => this.ref = ref} 
-//       className='particle'
-//       style={this.style}
-//       xmlns="http://www.w3.org/2000/svg" 
-//       viewBox="0 0 512 512">
-//       <path fill={this.style.fill} d="M428.127,0l-12.716,10.062l12.718-10.06c8.785,11.101,19.716,24.917,19.716,51.051 s-10.932,39.951-19.716,51.053c-7.382,9.331-12.716,16.072-12.716,30.927c0,14.854,5.334,21.594,12.716,30.925   c8.784,11.101,19.716,24.917,19.716,51.05c0,26.135-10.931,39.949-19.715,51.051c-7.383,9.331-12.717,16.072-12.717,30.927   c0,14.855,5.332,21.593,12.711,30.919l-25.435,20.124c-8.781-11.097-19.708-24.909-19.708-51.042 c0-26.135,10.931-39.949,19.715-51.051c7.383-9.331,12.717-16.072,12.717-30.927c0-14.855-5.335-21.595-12.717-30.926 c-8.784-11.101-19.715-24.916-19.715-51.049s10.931-39.95,19.715-51.051c7.383-9.331,12.717-16.072,12.717-30.928 c0-14.855-5.335-21.596-12.718-30.927L428.127,0z"/>
-//       </svg>
-//   );
-// }
+  useEffect(() => {
+    const {left} = style;
+    setTimeout(() => {
+      const node = currentConfetti.current;
+      if (node){    
+        node.style.top = window.innerHeight + generateWholeNumber(0, TOP_OFFSET) + 'px';
+        node.style.left = left + generateWholeNumber(-LEFT_OFFSET, LEFT_OFFSET) + 'px';
+        node.style.transform = `rotateZ(${generateWholeNumber(...ROTATION_RANGE)}deg)`;
+      }
+    },10);
+  });
+
+  return (
+    <svg 
+      ref={currentConfetti} 
+      className='particle'
+      style={style}
+      xmlns="http://www.w3.org/2000/svg" 
+      viewBox="0 0 512 512">
+      <path fill={style.fill} d="M428.127,0l-12.716,10.062l12.718-10.06c8.785,11.101,19.716,24.917,19.716,51.051 s-10.932,39.951-19.716,51.053c-7.382,9.331-12.716,16.072-12.716,30.927c0,14.854,5.334,21.594,12.716,30.925   c8.784,11.101,19.716,24.917,19.716,51.05c0,26.135-10.931,39.949-19.715,51.051c-7.383,9.331-12.717,16.072-12.717,30.927   c0,14.855,5.332,21.593,12.711,30.919l-25.435,20.124c-8.781-11.097-19.708-24.909-19.708-51.042 c0-26.135,10.931-39.949,19.715-51.051c7.383-9.331,12.717-16.072,12.717-30.927c0-14.855-5.335-21.595-12.717-30.926 c-8.784-11.101-19.715-24.916-19.715-51.049s10.931-39.95,19.715-51.051c7.383-9.331,12.717-16.072,12.717-30.928 c0-14.855-5.335-21.596-12.718-30.927L428.127,0z"/>
+    </svg>
+  );
+}
 
 export function Particles(props: Props) {
   let {count: n} = props;
   const particles = [];
-  // const types = [SquiggleParticle, CircularParticle, CircularParticle];
-  const types = [CircularParticle];
+  const types = [SquiggleParticle, CircularParticle, CircularParticle];
   
   while(n--) {
     const Particle = types[generateWholeNumber(0,3)];
@@ -107,9 +99,9 @@ export function Particles(props: Props) {
   }
   
   return (
-    <div className='particles'>
+    <ParticleZone className='particles'>
       {particles}
-    </div>
+    </ParticleZone>
   );
 }
 
@@ -124,21 +116,25 @@ export default function Confetti(props: Props) {
   }
   
   useEffect(() => {
-    id = id;
-    id++;
+    if (props.fireConfetti) {
+        id = id;
+        id++;
+        
+        setParticles([...particles, id])
     
-    setParticles([...particles, id])
-
-    setTimeout(() => {
-      clean(id);
-    }, 5000);
-  });
+        setTimeout(() => {
+          clean(id);
+        }, 5000);
+      }
+    },
+    [props.fireConfetti]
+  );
 
   return (
-    <ConfettiZone>
-       {particles.map(id => (
+    <Fragment>
+       {props.fireConfetti && particles.map(id => (
          <Particles key={id} count={Math.floor(INNER_WIDTH / 20)}/>
        ))}
-    </ConfettiZone>
+    </Fragment>
   );
 }
diff --git a/components/Header/index.js b/components/Header/index.js
index f9de96d..d791655 100644
--- a/components/Header/index.js
+++ b/components/Header/index.js
@@ -22,12 +22,6 @@ type Props = {
 export default function Header(props: Props) {
   const { showHeaderShadow, totalItemsCount, currentCount, displayProgress } = props;
 
-  const getConfetti = () => {
-    if (currentCount === totalItemsCount) {
-      return (<Confetti />);
-    }
-  };
-
   return (
     <Container showHeaderShadow={showHeaderShadow} data-cy="header">
       <div>
@@ -43,7 +37,7 @@ export default function Header(props: Props) {
         { currentCount === totalItemsCount && `🎉 `}
         {currentCount} of {totalItemsCount} completed
         { currentCount === totalItemsCount && ` 🎉`}
-        { getConfetti() }
+        <Confetti fireConfetti={currentCount === totalItemsCount} />
         <ProgressBar />
       </Progression>
 
diff --git a/components/Header/style.js b/components/Header/style.js
index 4e9ea36..58a03b5 100644
--- a/components/Header/style.js
+++ b/components/Header/style.js
@@ -93,3 +93,17 @@ export const Label = styled.h1`
   left: -9999px;
   visibility: none;
 `;
+
+export const ParticleZone = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  & > div, & > svg {
+    position: absolute;
+    transition: all 5s ease-out;
+  }
+`
+