diff --git a/package-lock.json b/package-lock.json
index fdcddd8..55defc4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11150,6 +11150,12 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
+    "pathseg": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pathseg/-/pathseg-1.2.0.tgz",
+      "integrity": "sha512-+pQS7lTaoVIXhaCW7R3Wd/165APzZHWzYVqe7dxzdupxQwebgpBaCmf0/XZwmoA/rkDq3qvzO0qv4d5oFVrBRw==",
+      "optional": true
+    },
     "pbkdf2": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
@@ -12836,6 +12842,14 @@
         "warning": "^4.0.3"
       }
     },
+    "react-particles-js": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/react-particles-js/-/react-particles-js-3.5.1.tgz",
+      "integrity": "sha512-CrJGA7karrKsnNeRgacW13s59PWrjnGg6mp7wPebA6zU4z/bMqRDdwpTn71fvYIJ0nCmJhAX5YeBcqDvut2Xfg==",
+      "requires": {
+        "lodash": "^4.17.11"
+      }
+    },
     "react-redux": {
       "version": "7.2.4",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz",
@@ -15164,6 +15178,14 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "tsparticles": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/tsparticles/-/tsparticles-1.29.2.tgz",
+      "integrity": "sha512-/oo9B9n0A8jd0uGGlYyhzcwQyoiX5Z4X3TFBzt98B8OxEen5vogLvyD7kCswFQDfiZXvcx8lgoLtJXm96flQ5w==",
+      "requires": {
+        "pathseg": "^1.2.0"
+      }
+    },
     "tsutils": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
diff --git a/package.json b/package.json
index 28d425d..bba333f 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,12 @@
     "react": "^17.0.2",
     "react-bootstrap": "^1.6.0",
     "react-dom": "^17.0.2",
+    "react-particles-js": "^3.5.1",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "redux": "^4.1.0",
+    "tsparticles": "^1.29.2",
     "web-vitals": "^1.1.2"
   },
   "scripts": {
diff --git a/src/App.css b/src/App.css
index 4931613..4cb30d8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,5 @@
 .App {
   text-align: center;
+  background-color: #1e5871;
+  color: aliceblue;
 }
diff --git a/src/App.jsx b/src/App.jsx
index 41a00d6..a520e59 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,12 +1,15 @@
 import './App.css';
 import { Provider } from 'react-redux';
 import React from 'react';
+import Layout from './web-components/layout';
 import store from './store/store';
 
 function App() {
   return (
     <Provider store={store}>
-      <div className="App"> </div>
+      <div className="App">
+        <Layout />
+      </div>
     </Provider>
   );
 }
diff --git a/src/web-components/layout.css b/src/web-components/layout.css
new file mode 100644
index 0000000..e2c97a0
--- /dev/null
+++ b/src/web-components/layout.css
@@ -0,0 +1,24 @@
+.rectangle {
+  position: absolute;
+  width: 100%;
+  /* height: 100%; */
+  left: -30px;
+  right: -50px;
+  top: -130px;
+  /* flex: 1 0 auto; */
+  color: cornsilk;
+  background: black;
+  transform: skew(4deg) rotate(10deg);
+}
+
+.footer {
+  flex-shrink: 0;
+  background: black;
+  height: 3rem;
+  left: 0;
+}
+
+.main {
+  height: 700px;
+  width: 900px;
+}
diff --git a/src/web-components/layout.jsx b/src/web-components/layout.jsx
new file mode 100644
index 0000000..946d0aa
--- /dev/null
+++ b/src/web-components/layout.jsx
@@ -0,0 +1,17 @@
+import './layout.css';
+import React from 'react';
+import Particle from './particleeffect.jsx';
+
+const layout = () => (
+  <>
+    <div className="rectangle">
+      <Particle height="100%" val={150} />
+    </div>
+    <div className="main" />
+    <div className="footer">
+      <Particle height="3rem" val={30} />
+    </div>
+  </>
+);
+
+export default layout;
diff --git a/src/web-components/particleeffect.jsx b/src/web-components/particleeffect.jsx
new file mode 100644
index 0000000..a2c6540
--- /dev/null
+++ b/src/web-components/particleeffect.jsx
@@ -0,0 +1,29 @@
+import Particles from 'react-particles-js';
+
+import React from 'react';
+
+const particleeffect = ({ height, val }) => (
+  <Particles
+    params={{
+      particles: {
+        number: {
+          value: val,
+        },
+        size: {
+          value: 3,
+        },
+      },
+      interactivity: {
+        events: {
+          onhover: {
+            enable: true,
+            mode: 'repulse',
+          },
+        },
+      },
+    }}
+    height={height}
+  />
+);
+
+export default particleeffect;