diff --git a/package-lock.json b/package-lock.json
index e1c3c2e..f49303f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10530,6 +10530,14 @@
         }
       }
     },
+    "react-particles-js": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/react-particles-js/-/react-particles-js-2.7.0.tgz",
+      "integrity": "sha512-gsYIr55plOMB6nZW2iBjgXoqOZqBvggW9trNTk0mYHkvqQUpuxhcCDGwRwnts10XQ442PjzxZbklwMlhSOcfgA==",
+      "requires": {
+        "lodash": "^4.17.11"
+      }
+    },
     "react-popper": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.4.tgz",
diff --git a/package.json b/package.json
index 68f219e..07ceaa5 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "react": "^16.9.0",
     "react-bootstrap": "^1.0.0-beta.12",
     "react-dom": "^16.9.0",
+    "react-particles-js": "^2.7.0",
     "react-scripts": "3.1.2"
   },
   "scripts": {
diff --git a/src/App.css b/src/App.css
index 617e847..7e53343 100644
--- a/src/App.css
+++ b/src/App.css
@@ -13,15 +13,24 @@
 
 .App-heading {
   background-color: #2c003e;
-  min-height: 100vh;
+  width: 100%;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: 40px;
+  padding: 0px;
   color: white;
 }
 
+
+.particle-container {
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+}
+
 p {
   margin: 1px
 }
diff --git a/src/App.js b/src/App.js
index df5b247..f85a46f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,11 +6,15 @@ import HoverButton from './Components/HoverButton.js'
 import About from './Components/About.js'
 import Projects from './Components/Projects.js'
 import Contact from './Components/Contact.js'
+import Particles from 'react-particles-js';
+import particleConfig from './files/particlesjs-config.json'
 import AOS from 'aos'
 import 'aos/dist/aos.css';
 
 AOS.init()
 
+console.log(particleConfig)
+
 function App() {
   return (
     <div className="App">
@@ -18,16 +22,19 @@ function App() {
       <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>
       <header className="App-heading" id="home" data-aos="fade-up" data-aos-duration="1000">
-        <div>
+        <Particles className="particle-container" params={particleConfig} />
+        <div style={{position: "absolute"}}>
+           
+            <p className="greeting">
+              Hello, my name is <span className="name" >Raman Gupta</span>.
+            </p>
+            <p>
+              I am a Creator.
+            </p>
+            <br/>
+            <HoverButton page="#about" text="See my work"></HoverButton>
+          
           
-          <p className="greeting">
-            Hello, my name is <span className="name" >Raman Gupta</span>.
-          </p>
-          <p>
-            I am a Creator.
-          </p>
-          <br/>
-          <HoverButton page="#about" text="See my work"></HoverButton>
         </div>
         
       </header>
diff --git a/src/Components/About.css b/src/Components/About.css
index 0df57ed..bc8c71f 100644
--- a/src/Components/About.css
+++ b/src/Components/About.css
@@ -1,6 +1,7 @@
 .about {
     margin-top: 0px;
     padding: 60px;
+    overflow: auto;
 }
 
 hr {
diff --git a/src/Components/Contact.css b/src/Components/Contact.css
index b177359..d0662fc 100644
--- a/src/Components/Contact.css
+++ b/src/Components/Contact.css
@@ -5,9 +5,9 @@
 
 .information {
     margin: auto;
-    width: 50%;
-    min-width: 650px;
+    width: 60%;
     justify-content: space-evenly;
+    text-align: center;
 }
 
 .information p{
diff --git a/src/Components/NavBar.css b/src/Components/NavBar.css
index a05caf8..2fcc5bf 100644
--- a/src/Components/NavBar.css
+++ b/src/Components/NavBar.css
@@ -13,7 +13,7 @@ ul {
     margin: 0;
     padding: 0;
     overflow: hidden;
-    background-color: #282c34;;
+    background-color: #282c34;
   }
   
 li {
diff --git a/src/files/particlesjs-config.json b/src/files/particlesjs-config.json
new file mode 100644
index 0000000..bc57868
--- /dev/null
+++ b/src/files/particlesjs-config.json
@@ -0,0 +1,110 @@
+{
+  "particles": {
+    "number": {
+      "value": 80,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#ffffff"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "polygon": {
+        "nb_sides": 5
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 100,
+        "height": 100
+      }
+    },
+    "opacity": {
+      "value": 0.5,
+      "random": false,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 3,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 40,
+        "size_min": 0.1,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": true,
+      "distance": 150,
+      "color": "#ffffff",
+      "opacity": 0.4,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 6,
+      "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": true,
+        "mode": "repulse"
+      },
+      "onclick": {
+        "enable": true,
+        "mode": "push"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 400,
+        "size": 40,
+        "duration": 2,
+        "opacity": 8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 200,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}
\ No newline at end of file
diff --git a/src/images/github-circle.png b/src/images/github-circle.png
deleted file mode 100644
index 2a0cfdb..0000000
Binary files a/src/images/github-circle.png and /dev/null differ
diff --git a/src/images/linkedin.png b/src/images/linkedin.png
deleted file mode 100644
index 0126aec..0000000
Binary files a/src/images/linkedin.png and /dev/null differ
diff --git a/src/images/twitter.png b/src/images/twitter.png
deleted file mode 100644
index e63f3c9..0000000
Binary files a/src/images/twitter.png and /dev/null differ