diff --git a/package-lock.json b/package-lock.json
index d906767..c7d45c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9595,6 +9595,11 @@
         "pify": "^3.0.0"
       }
     },
+    "pathseg": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pathseg/-/pathseg-1.2.0.tgz",
+      "integrity": "sha512-+pQS7lTaoVIXhaCW7R3Wd/165APzZHWzYVqe7dxzdupxQwebgpBaCmf0/XZwmoA/rkDq3qvzO0qv4d5oFVrBRw=="
+    },
     "pbkdf2": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.1.tgz",
@@ -11117,6 +11122,15 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-particles-js": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/react-particles-js/-/react-particles-js-3.3.0.tgz",
+      "integrity": "sha512-pc9oJWEHH3UR1sJurL98TPrEWr0Yf2E8j+f8PLDpgbnQirTRqfwEvTRNJ/Ibvt6233WycCrndn6ImfL0PDEr7A==",
+      "requires": {
+        "lodash": "^4.17.11",
+        "tsparticles": "^1.17.1"
+      }
+    },
     "react-router": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
@@ -13175,6 +13189,22 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
       "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q=="
     },
+    "tsparticles": {
+      "version": "1.17.10",
+      "resolved": "https://registry.npmjs.org/tsparticles/-/tsparticles-1.17.10.tgz",
+      "integrity": "sha512-ZPadfL/zcXwTASwdQ6G/hAaabkzXBcV7FGtdeAa92GsoHgUexgpGwlMK9HI9yCQxDvigOaa2Y6A3jEDGXiNOXA==",
+      "requires": {
+        "pathseg": "^1.2.0",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+          "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+        }
+      }
+    },
     "tsutils": {
       "version": "3.17.1",
       "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz",
diff --git a/package.json b/package.json
index 0ba1d43..d9e96ff 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-particles-js": "^3.3.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3"
   },
diff --git a/src/pages/Particles.js b/src/pages/Particles.js
new file mode 100644
index 0000000..b387d85
--- /dev/null
+++ b/src/pages/Particles.js
@@ -0,0 +1,119 @@
+import React, { Component, useState, useEffect } from "react";
+import Particles from "react-particles-js";
+
+class Canvas extends Component {
+  state = { width: "0px", height: "0px" };
+  componentDidMount() {
+    this.useEffect();
+    window.addEventListener("resize", this.useEffect);
+  }
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.useEffect);
+  }
+  useEffect = () => {
+    this.setState({
+      width: `${window.innerWidth}px`,
+      height: `${window.innerHeight}px`,
+    });
+  };
+  render() {
+    const { width, height } = this.state;
+    console.log(width, height);
+    return (
+      <Particles
+        {...this.state}
+        params={{
+          particles: {
+            number: {
+              value: 40,
+              density: {
+                enable: true,
+                value_area: 800,
+              },
+            },
+            color: {
+              value: "#ef233c",
+            },
+            shape: {
+              type: "circle",
+              stroke: {
+                width: 0,
+                color: "#ef233c",
+              },
+              image: {
+                src: "img/github.svg",
+                width: 100,
+                height: 100,
+              },
+            },
+            opacity: {
+              value: 0.4,
+              random: true,
+              anim: {
+                enable: true,
+                speed: 1,
+                opacity_min: 0.1,
+                sync: false,
+              },
+            },
+            size: {
+              value: 3,
+              random: true,
+              anim: {
+                enable: true,
+                speed: 2,
+                size_min: 0.1,
+                sync: false,
+              },
+            },
+            line_linked: {
+              enable_auto: true,
+              distance: 100,
+              color: "#ef233c",
+              opacity: 1,
+              width: 1,
+              condensed_mode: {
+                enable: false,
+                rotateX: 600,
+                rotateY: 600,
+              },
+            },
+            move: {
+              enable: true,
+              speed: 1,
+              direction: "none",
+              random: false,
+              straight: false,
+              out_mode: "out",
+              bounce: false,
+              attract: {
+                enable: false,
+                rotateX: 600,
+                rotateY: 1200,
+              },
+            },
+          },
+          interactivity: {
+            detect_on: "canvas",
+            events: {
+              onhover: {
+                enable: false,
+              },
+              onclick: {
+                enable: false,
+              },
+              resize: true,
+            },
+          },
+          retina_detect: true,
+        }}
+      />
+    );
+  }
+}
+
+export default Canvas;
+
+{
+  /* updateWindowDimensions */
+}
diff --git a/src/pages/home.css b/src/pages/home.css
index 9856d66..865b501 100644
--- a/src/pages/home.css
+++ b/src/pages/home.css
@@ -1,14 +1,23 @@
 .body {
-  background-color: #2b2d42;
+  background-color: white;
 }
 
 .slogan {
-  color: #8d99ae;
+  color: #2b2d42;
+  font-size: x-large;
+  padding-bottom: 20px;
+  letter-spacing: 5px;
+}
+
+#particles-js {
+  height: 100%;
+  background-color: white;
 }
 
 #title {
   color: #d90429;
   font-size: 80px;
+  letter-spacing: 40px;
 }
 
 #start-btn {
diff --git a/src/pages/home.js b/src/pages/home.js
index 616053b..59aad28 100644
--- a/src/pages/home.js
+++ b/src/pages/home.js
@@ -2,6 +2,7 @@ import React from "react";
 import "./home.css";
 import logo from "./img/logo-img.png";
 import { Link } from "react-router-dom";
+import Particles from "./Particles";
 
 export default function Home() {
   return (
@@ -23,6 +24,7 @@ export default function Home() {
                 <strong>GET STARTED</strong>
               </button>
             </Link>
+            <Particles />
           </div>
         </div>
       </section>