diff --git a/package-lock.json b/package-lock.json
index 88a4553..055ece3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,9 @@
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",
+        "chart.js": "^3.7.0",
         "react": "^17.0.2",
+        "react-chartjs-2": "^4.0.1",
         "react-dom": "^17.0.2",
         "react-scripts": "5.0.0",
         "styled-components": "^5.3.3",
@@ -5339,6 +5341,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/chart.js": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.0.tgz",
+      "integrity": "sha512-31gVuqqKp3lDIFmzpKIrBeum4OpZsQjSIAqlOpgjosHDJZlULtvwLEZKtEhIAZc7JMPaHlYMys40Qy9Mf+1AAg=="
+    },
     "node_modules/check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@@ -13313,6 +13320,15 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-chartjs-2": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.0.1.tgz",
+      "integrity": "sha512-q8bgWzKoFvBvD7YcjT/hXG8jt55TaMAuJ1dmI3tKFJ7CijUWYz4pIfOhkTI6PBTwqu/pmeWsClBRd/7HiWzN1g==",
+      "peerDependencies": {
+        "chart.js": "^3.5.0",
+        "react": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
@@ -20146,6 +20162,11 @@
       "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
       "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw=="
     },
+    "chart.js": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.0.tgz",
+      "integrity": "sha512-31gVuqqKp3lDIFmzpKIrBeum4OpZsQjSIAqlOpgjosHDJZlULtvwLEZKtEhIAZc7JMPaHlYMys40Qy9Mf+1AAg=="
+    },
     "check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@@ -25800,6 +25821,12 @@
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-chartjs-2": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.0.1.tgz",
+      "integrity": "sha512-q8bgWzKoFvBvD7YcjT/hXG8jt55TaMAuJ1dmI3tKFJ7CijUWYz4pIfOhkTI6PBTwqu/pmeWsClBRd/7HiWzN1g==",
+      "requires": {}
+    },
     "react-dev-utils": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
diff --git a/package.json b/package.json
index 76c6556..3310a87 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,9 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "chart.js": "^3.7.0",
     "react": "^17.0.2",
+    "react-chartjs-2": "^4.0.1",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
     "styled-components": "^5.3.3",
diff --git a/src/App.jsx b/src/App.jsx
index fbda239..33e1e17 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,14 +1,15 @@
 import Header from "./components/Header/Header";
 import styled from 'styled-components'
+import Cryptos from "./components/Cryptos/Cryptos";
 
 function App() {
 
   const Div = styled.div`
     
-    height: 100%;
+    /* height: 100%; */
 
     background: rgb(46,66,105);
-    background: linear-gradient(180deg, rgba(46,66,105,1) 0%, rgba(0,26,47,1) 100%);
+    background: linear-gradient(180deg, #557ac5 0%, #004a86 100%);
     
     .paths {
 
@@ -19,6 +20,8 @@ function App() {
       top: 0;
       left: 0;
 
+      z-index: 1;
+
       .path {
 
         &::before {
@@ -29,11 +32,11 @@ function App() {
         
         /* background: #ffffff45; */
         background: rgb(255,255,255);
-        background: linear-gradient(135deg, rgba(255,255,255,0.08727240896358546) 0%, rgba(46,66,105,0.07046568627450978) 100%);
+        background: linear-gradient(135deg, #ffffff4e 0%, #2e426965 100%);
 
         position: absolute;
 
-        &:nth-child(1) {
+        &.one {
 
           clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
 
@@ -46,7 +49,7 @@ function App() {
           transform: rotate(14deg)
         }
 
-        &:nth-child(2) {
+        &.two {
           clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
 
           clip-path: circle(50% at 50% 50%);
@@ -58,7 +61,7 @@ function App() {
           height: 170px; 
         }
 
-        &:nth-child(3) {
+        &.three {
 
           clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
           clip-path: circle(50% at 50% 50%);
@@ -71,7 +74,7 @@ function App() {
           height: 180px;
         }
 
-        &:nth-child(4) {
+        &.four {
 
           clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
           
@@ -84,7 +87,7 @@ function App() {
           height: 100px;
         }
 
-        &:nth-child(5) {
+        &.five {
 
           clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 
@@ -97,7 +100,7 @@ function App() {
           height: 80px;
         }
 
-        &:nth-child(6) {
+        &.six {
 
           clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 
@@ -110,7 +113,7 @@ function App() {
           height: 70px;
         }
 
-        &:nth-child(7) {
+        &.seven {
 
           clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 
@@ -123,11 +126,11 @@ function App() {
           height: 100px;
         }
 
-        &:nth-child(8) {
+        &.eight {
 
           clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
         
-          top: 100%;
+          top: 95%;
           left: 20vw;
           transform: rotate(40deg)
         }
@@ -138,16 +141,19 @@ function App() {
   return (
     <Div>
       <Header />
+
       <div className="paths">
-        <div className="path"></div>
-        <div className="path"></div>
-        <div className="path"></div>
-        <div className="path"></div>
-        <div className="path"></div>
-        <div className="path"></div>
-        <div className="path"></div>
-        <div className="path"></div>
+        <div className="path one"></div>
+        <div className="path two"></div>
+        <div className="path three"></div>
+        <div className="path four"></div>
+        <div className="path five"></div>
+        <div className="path six"></div>
+        <div className="path seven"></div>
+        <div className="path eight"></div>
       </div>
+
+      <Cryptos />
     </Div>
   );
 }
diff --git a/src/components/Cryptos/Crypto.jsx b/src/components/Cryptos/Crypto.jsx
new file mode 100644
index 0000000..d8da0f3
--- /dev/null
+++ b/src/components/Cryptos/Crypto.jsx
@@ -0,0 +1,110 @@
+import React from 'react';
+
+import { Card, CardContent, Grid, Typography } from '@mui/material';
+
+import { Chart as ChartJS } from 'chart.js/auto'
+import { Chart, Line }            from 'react-chartjs-2' //WTF https://stackoverflow.com/questions/67727603/error-category-is-not-a-registered-scale
+
+const Crypto = ({CryptoStyles}) => {
+
+  const plugin = {
+    id: 'custom_canvas_background_color',
+    beforeDraw: (chart) => {
+      const ctx = chart.canvas.getContext('2d');
+      ctx.save();
+      ctx.globalCompositeOperation = 'destination-over';
+      ctx.fillStyle = '#000';
+      ctx.fillRect(0, 0, chart.width, chart.height);
+      ctx.restore();
+    }
+  }
+
+  return (
+    <>
+      <CryptoStyles item md={4} sm={6} xs={12}>
+        <Card className="card">
+          <CardContent
+            className="container"  
+          >
+            <Typography
+              variant="h4"
+              color="text.primary"
+              fontWeight="bold"
+              align="center"
+              padding="2vh 0px 0px 0px"
+              fontFamily="Raleway"
+              color="#fff"
+            >
+                Test - Bitcoin
+            </Typography>
+            <Line
+                data={{
+                    labels: ['12-01', '13-01', '14-01', '15-01', '16-01', '17-01', '18-01', '19-01'],
+                    label: false,
+                    datasets: [
+                        {
+                            data: [21, 51, 29, 50, 80, 70, 99, 1],
+                            pointRadius: 0,
+                            borderColor: "#fff"
+                        }
+                    ]
+                }}
+                options={{
+                    responsive: true,
+                    maintainAspectRatio: true,
+                    aspectRatio: 1.5,
+                    scales: {
+                      x: {
+                        grid: {
+                          color: 'rgba(253, 91, 91, 0)',
+                          borderColor: 'rgba(187, 187, 187, 0)',
+                          opacity: 0
+                        },
+                        ticks: {
+                          color: "#fff"
+                        }
+                      },
+                      y: {
+                        grid: {
+                          color: 'rgba(253, 91, 91, 0)',
+                          borderColor: 'rgba(187, 187, 187, 0)',
+                          opacity: 0
+                        },
+                        ticks: {
+                          color: "#fff"
+                        }
+                      }
+                    },
+                    plugins: {
+                        plugin,
+                        legend: {
+                            display: false, // https://stackoverflow.com/a/67055974
+                            labels: {
+                              fontColor: '#666'
+                            }
+                        }
+                    },
+                }}
+                className="line"
+                style={{backgroundColor: "#ffffff0"}}
+            />
+            <Typography
+              variant="h6"
+              color="text.secondary"
+              fontWeight="medium"
+              align="center"
+              padding="5.5vh 0px"
+              marginBottom="8vh"
+              fontFamily="Raleway"
+              color="#eee"
+            >
+                Last 7 days
+            </Typography>
+          </CardContent>
+        </Card>
+      </CryptoStyles>
+    </>
+  )
+};
+
+export default Crypto;
diff --git a/src/components/Cryptos/Cryptos.jsx b/src/components/Cryptos/Cryptos.jsx
new file mode 100644
index 0000000..b65dac9
--- /dev/null
+++ b/src/components/Cryptos/Cryptos.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { Grid } from '@mui/material';
+import styled from 'styled-components';
+import Crypto from './Crypto';
+
+const Cryptos = () => {
+
+    const CryptosStyles = styled.div`
+
+        position: relative;
+
+        z-index: 100;
+
+        margin-top: 5vh;
+
+        .grid {
+
+            padding: 0px 10vw;
+        }
+
+        .item {
+
+            /* width: 100px; */
+            height: 100px;
+
+            background: #101116;
+        }
+    `
+    const CryptoStyles = styled(Grid)` // https://stackoverflow.com/questions/68248337/how-to-override-material-ui-css-with-styled-component
+
+        .card {
+
+            background: rgba( 78, 159, 255, 0) !important;
+        }
+
+        .container {
+            background: rgba( 78, 159, 255, 0.25 );
+            backdrop-filter: blur( 14px );
+            -webkit-backdrop-filter: blur( 14px );
+            border-radius: 10px;
+            border: 1px solid rgba( 255, 255, 255, 0.18 );
+            /* height: 80vh; */
+            user-select: none;
+            cursor: pointer;
+
+            .line {
+
+                /* height: 38vh !important; */
+                /* width: 54.19vh !important;  */
+                margin-top: 7vh;
+                /* margin-bottom: 5vh; */
+                /* margin-bottom: 10vh; */
+                cursor: initial;
+            }
+        }
+    `
+
+//   const data = [{coin: "BTC", price: 400, day: "12-02"}, {coin: "BTC", price: 110, day: "13-02"}, {coin: "BTC", price: 450, day: "14-02"}]
+
+  return (
+      <CryptosStyles>
+            <Grid container columnSpacing={4} rowSpacing={6} className='grid'>
+                    <Crypto CryptoStyles={CryptoStyles} />
+                    <Crypto CryptoStyles={CryptoStyles} />
+                    <Crypto CryptoStyles={CryptoStyles} />
+                    <Crypto CryptoStyles={CryptoStyles} />
+                    <Crypto CryptoStyles={CryptoStyles} />
+                    <Crypto CryptoStyles={CryptoStyles} />
+            </Grid>
+      </CryptosStyles>
+    );
+};
+
+export default Cryptos;