diff --git a/src/assets/pages/about/index.js b/src/assets/pages/about/index.js
index 3bdd58c..cabca31 100644
--- a/src/assets/pages/about/index.js
+++ b/src/assets/pages/about/index.js
@@ -14,7 +14,7 @@ import AOS from "aos";
 import "aos/dist/aos.css";
 
 //Pages
-import Error from "../error"
+import Error from "../error500";
 
 //Components
 import Layout from "../../components/layout";
diff --git a/src/assets/pages/contact/index.js b/src/assets/pages/contact/index.js
index 6faba08..87568b5 100644
--- a/src/assets/pages/contact/index.js
+++ b/src/assets/pages/contact/index.js
@@ -6,7 +6,7 @@ import Loading from "../../components/loading";
 import Ghost from "../../components/ghost";
 
 //Pages
-import Error from "../error";
+import Error from "../error500";
 
 //EmailJs
 import emailjs from "@emailjs/browser";
@@ -24,6 +24,7 @@ export default function Index() {
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [message, setMessage] = useState("");
+  const [focus, setFocus] = useState(false);
 
   const send = document.querySelector(".button");
 
@@ -52,6 +53,7 @@ export default function Index() {
         (response) => {
           send.classList.add("success");
           console.log("SUCCESS!", response.status, response.text);
+          alert("Email enviado com sucesso!");
           setName("");
           setEmail("");
           setMessage("");
@@ -70,6 +72,20 @@ export default function Index() {
 
   const { contact } = data;
 
+  const handleFocus = () => {
+    if (!focus) {
+      setFocus(true);
+    }
+  };
+  
+  document.addEventListener("click", (e) => {
+    if (e.target.classList.contains("row")) return;
+    else {
+      setFocus(false);
+    }
+  }
+  );
+
   return (
     <Layout positionFooter="absolute">
       <S.CanvasWrapper>
@@ -89,47 +105,65 @@ export default function Index() {
               ></p>
             </S.DescriptionWrapper>
           </S.ContactWrapper>
-          <S.Conatiner>
+          <S.Container>
             <S.GhostContainer>
-              <S.Ghost>
-                <S.GhostFace class="ghost-face">
-                  <div class="ghost-eyes">
-                    <div class="ghost-eyes-l"></div>
-                    <div class="ghost-eyes-r"></div>
+              <S.Ghost onFocus={handleFocus} className={focus ? "focus" : ""}>
+                <S.GhostFace className="ghost-face">
+                  <div
+                    onFocus={handleFocus}
+                    className={`ghost-eyes ${focus ? "focus" : ""}`}
+                  >
+                    <div className="ghost-eyes-l"></div>
+                    <div className="ghost-eyes-r"></div>
                   </div>
-                  <div class="ghost-mouth"></div>
+                  <div className="ghost-mouth"></div>
                 </S.GhostFace>
-                <S.GhostTorso class="ghost-torso"></S.GhostTorso>
+                <S.GhostTorso
+                  onFocus={handleFocus}
+                  className={`ghost-torso ${focus ? "focus" : ""}`}
+                ></S.GhostTorso>
+                <S.GhostHands
+                  onFocus={handleFocus}
+                  className={`ghost-hands ${focus ? "focus" : ""}`}
+                >
+                  <div
+                    onFocus={handleFocus}
+                    className={`ghost-hands-l ${focus ? "focus" : ""}`}
+                  ></div>
+                  <div
+                    onFocus={handleFocus}
+                    className={`ghost-hands-r ${focus ? "focus" : ""}`}
+                  ></div>
+                </S.GhostHands>
               </S.Ghost>
-              <S.GhostHands class="ghost-hands">
-                <div class="ghost-hands-l"></div>
-                <div class="ghost-hands-r"></div>
-              </S.GhostHands>
             </S.GhostContainer>
             <S.FormContact>
               <input
-                className="input"
+                className="input row"
                 type="text"
-                placeholder="Digite seu nome"
+                placeholder="Your name"
                 onChange={(e) => setName(e.target.value)}
                 value={name}
+                onFocus={handleFocus}
                 required
-              />
+                />
 
               <input
-                className="input"
+                className="input row"
                 type="text"
-                placeholder="Digite seu email"
+                placeholder="Your most spooky email"
                 onChange={(e) => setEmail(e.target.value)}
                 value={email}
+                onFocus={handleFocus}
                 required
-              />
+                />
 
               <textarea
-                className="textarea"
-                placeholder="Digite sua mensagem..."
+                className="textarea row"
+                placeholder="Tell me a spooky thing..."
                 onChange={(e) => setMessage(e.target.value)}
                 value={message}
+                onFocus={handleFocus}
                 required
               />
 
@@ -137,7 +171,7 @@ export default function Index() {
                 <span>Send</span>
               </button>
             </S.FormContact>
-          </S.Conatiner>
+          </S.Container>
         </S.ContentWrapper>
       </S.Main>
     </Layout>
diff --git a/src/assets/pages/contact/style.js b/src/assets/pages/contact/style.js
index 5d3e876..3c451fd 100644
--- a/src/assets/pages/contact/style.js
+++ b/src/assets/pages/contact/style.js
@@ -21,7 +21,7 @@ export const Main = styled.main`
   align-items: center;
   background: #0a0b0c;
 
-  @media only screen and (width <= 600px) {
+  @media only screen and (width <= 650px) {
     padding: 6rem 0 0 0;
   }
 `;
@@ -53,7 +53,7 @@ export const ContactWrapper = styled.div`
   z-index: 0;
   gap: 1rem;
 
-  @media only screen and (width <= 600px) {
+  @media only screen and (width <= 650px) {
     gap: 0.5rem;
   }
 `;
@@ -67,7 +67,7 @@ export const TitleWrapper = styled.div`
   font: 400 4rem/3rem "Amatic SC", sans-serif;
   color: #ff6000;
 
-  @media only screen and (width <= 600px) {
+  @media only screen and (width <= 650px) {
     font-size: 3rem;
   }
 `;
@@ -79,13 +79,42 @@ export const DescriptionWrapper = styled.div`
   color: #ffa559;
 `;
 
-export const Conatiner = styled.div`
+export const Container = styled.div`
   animation: ${float} 3s infinite alternate;
 
-  @media only screen and (width <= 600px) {
+  @media only screen and (width <= 650px) {
     position: relative;
     top: 1rem;
   }
+
+  .focus {
+    background: rgba(255, 255, 255, 0.2);
+    color: transparent;
+    .ghost-torso {
+      transform: translate(-50%, 42px) scaleY(0.9);
+    }
+    .ghost-eyes {
+      .ghost-eyes-l,
+      .ghost-eyes-r {
+        background: rgba(255, 255, 255, 0.6);
+      }
+    }
+    .ghost-face {
+      transform: translate(-50%, 0.4em);
+    }
+    .ghost-mouth {
+      transform: scaleY(0.6);
+      border-color: rgba(255, 255, 255, 0.6);
+    }
+    .ghost-hands {
+      transform: translate(-50%, 0.2em);
+
+      .ghost-hands-l,
+      .ghost-hands-r {
+        background: rgba(255, 255, 255, 0.2);
+      }
+    }
+  }
 `;
 
 export const FormContact = styled.form`
@@ -97,15 +126,13 @@ export const FormContact = styled.form`
   flex-direction: column;
   gap: 1rem;
   padding: 1rem;
-  position: relative;
   backdrop-filter: blur(16px) saturate(180%);
   background-color: rgba(34, 39, 42, 0.75);
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.125);
-  z-index: 2;
 
   .input {
-    width: 14.5rem;
+    width: 95%;
     padding: 1em;
     border: none;
     border-radius: 0.2em;
@@ -125,7 +152,7 @@ export const FormContact = styled.form`
   }
 
   .textarea {
-    width: 14.5rem;
+    width: 95%;
     height: 5rem;
     min-height: 5rem;
     max-height: 8rem;
@@ -175,7 +202,7 @@ export const FormContact = styled.form`
     }
   }
 
-  @media only screen and (width <= 600px) {
+  @media only screen and (width <= 650px) {
     width: 100%;
   }
 `;
@@ -234,11 +261,6 @@ export const GhostFace = styled.div`
     border-top-right-radius: 0;
     position: relative;
     top: 0.5rem;
-
-    &--open {
-      border-top: 0.2em solid ${bg};
-      height: 0.2em;
-    }
   }
 `;
 
@@ -264,22 +286,14 @@ export const GhostHands = styled.div`
     height: 1.5em;
     background: white;
     box-shadow: 0 4px 4px rgba(51, 51, 51, 0.3);
-    top: -0.1rem;
+    top: -0.15rem;
     position: absolute;
   }
 
   .ghost-hands-r {
-    transform: translateX(17em) rotate(15deg);
-
-    @media only screen and (width <= 600px) {
-      transform: translateX(10em) rotate(15deg);
-    }
+    transform: translateX(2em) rotate(15deg);
   }
   .ghost-hands-l {
-    transform: translateX(12em) rotate(-15deg);
-
-    @media only screen and (width <= 600px) {
-      transform: translateX(5.5em) rotate(-15deg);
-    }
+    transform: translateX(-3em) rotate(-15deg);
   }
 `;
diff --git a/src/assets/pages/error404/index.js b/src/assets/pages/error404/index.js
new file mode 100644
index 0000000..8d759b8
--- /dev/null
+++ b/src/assets/pages/error404/index.js
@@ -0,0 +1,58 @@
+import React from "react";
+
+//React router dom
+import { Link } from "react-router-dom";
+
+//Style
+import * as S from "./style";
+
+//Components
+import Forest from "../../components/forest";
+
+export default function index() {
+  return (
+    <>
+      <S.Main>
+        <S.Box>
+          <div class="box_ghost">
+            <div class="symbol"></div>
+            <div class="symbol"></div>
+            <div class="symbol"></div>
+            <div class="symbol"></div>
+            <div class="symbol"></div>
+            <div class="symbol"></div>
+
+            <div class="box_ghost-container">
+              <div class="box_ghost-eyes">
+                <div class="box_eye left"></div>
+                <div class="box_eye right"></div>
+              </div>
+              <div class="box_ghost-mouth"></div>
+              <div class="box_ghost-bottom">
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+              </div>
+            </div>
+            <div class="box_ghost-shadow"></div>
+          </div>
+
+          <div class="box_description">
+            <div class="box_description-container">
+              <div class="box_description-title">Whoops!</div>
+              <div class="box_description-text">
+                It seems like we couldn't find the page you were looking for
+              </div>
+            </div>
+            <Link to="/" class="box_button">
+              Go back
+            </Link>
+          </div>
+        </S.Box>
+        <Forest />
+      </S.Main>
+    </>
+  );
+}
diff --git a/src/assets/pages/error404/style.js b/src/assets/pages/error404/style.js
new file mode 100644
index 0000000..23ed081
--- /dev/null
+++ b/src/assets/pages/error404/style.js
@@ -0,0 +1,346 @@
+import styled, { keyframes } from "styled-components";
+
+const DarkGreen = "#194022";
+const Purple = "#8C8AA7";
+const Orange = "#FF6000";
+const white = "#fff";
+
+const shine = keyframes`
+  0% {opacity: .2;}
+  25% {opacity: .1;}
+  50% {opacity: .2;}
+  100% {opacity: .2;}
+`;
+
+const upndown = keyframes`
+  0% {transform: translateY(5px);}
+  50% {transform: translateY(15px);}
+  100% {transform: translateY(5px);}
+`;
+
+const smallnbig = keyframes`
+  0% {width: 90px;}
+  50% {width: 100px;}
+  100% {width: 90px;}
+`;
+
+const blink = keyframes`
+  21% {
+    transform: scale(1, 1);
+  }
+  22% {
+    transform: scale(1, .1);
+  }
+  23% {
+    transform: scale(1, 1);
+  }
+  48% {
+    transform: scale(1, 1);
+  }
+  49% {
+    transform: scale(1, .1);
+  }
+  50% {
+    transform: scale(1, 1);
+  }
+`;
+
+export const Main = styled.main`
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  z-index: 2;
+`;
+
+export const Box = styled.div`
+  width: 350px;
+  height: 100%;
+  max-height: 600px;
+  min-height: 450px;
+  background: ${DarkGreen};
+  border-radius: 20px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  padding: 30px 50px;
+
+  .box_ghost {
+    padding: 15px 25px 25px;
+    position: absolute;
+    left: 50%;
+    top: 30%;
+    transform: translate(-50%, -30%);
+
+    .symbol {
+      &:nth-child(1) {
+        opacity: 0.2;
+        animation: ${shine} 4s ease-in-out 3s infinite;
+
+        &:before,
+        &:after {
+          content: "";
+          width: 12px;
+          height: 4px;
+          background: ${white};
+          position: absolute;
+          border-radius: 5px;
+          bottom: 65px;
+          left: 0;
+        }
+        &:before {
+          transform: rotate(45deg);
+        }
+        &:after {
+          transform: rotate(-45deg);
+        }
+      }
+      &:nth-child(2) {
+        position: absolute;
+        left: -5px;
+        top: 30px;
+        height: 18px;
+        width: 18px;
+        border: 4px solid;
+        border-radius: 50%;
+        border-color: $white;
+        opacity: 0.2;
+        animation: ${shine} 4s ease-in-out 1.3s infinite;
+      }
+      &:nth-child(3) {
+        opacity: 0.2;
+        animation: ${shine} 3s ease-in-out 0.5s infinite;
+
+        &:before,
+        &:after {
+          content: "";
+          width: 12px;
+          height: 4px;
+          background: ${white};
+          position: absolute;
+          border-radius: 5px;
+          top: 5px;
+          left: 40px;
+        }
+        &:before {
+          transform: rotate(90deg);
+        }
+        &:after {
+          transform: rotate(180deg);
+        }
+      }
+      &:nth-child(4) {
+        opacity: 0.2;
+        animation: ${shine} 6s ease-in-out 1.6s infinite;
+
+        &:before,
+        &:after {
+          content: "";
+          width: 15px;
+          height: 4px;
+          background: ${white};
+          position: absolute;
+          border-radius: 5px;
+          top: 10px;
+          right: 30px;
+        }
+        &:before {
+          transform: rotate(45deg);
+        }
+        &:after {
+          transform: rotate(-45deg);
+        }
+      }
+      &:nth-child(5) {
+        position: absolute;
+        right: 5px;
+        top: 40px;
+        height: 12px;
+        width: 12px;
+        border: 3px solid;
+        border-radius: 50%;
+        border-color: ${white};
+        opacity: 0.2;
+        animation: ${shine} 1.7s ease-in-out 7s infinite;
+      }
+      &:nth-child(6) {
+        opacity: 0.2;
+        animation: ${shine} 2s ease-in-out 6s infinite;
+
+        &:before,
+        &:after {
+          content: "";
+          width: 15px;
+          height: 4px;
+          background: ${white};
+          position: absolute;
+          border-radius: 5px;
+          bottom: 65px;
+          right: -5px;
+        }
+        &:before {
+          transform: rotate(90deg);
+        }
+        &:after {
+          transform: rotate(180deg);
+        }
+      }
+    }
+
+    .box_ghost-container {
+      background: ${white};
+      width: 100px;
+      height: 100px;
+      border-radius: 100px 100px 0 0;
+      position: relative;
+      margin: 0 auto;
+      animation: ${upndown} 3s ease-in-out infinite;
+
+      .box_ghost-eyes {
+        position: absolute;
+        left: 1.26rem;
+        top: 2.3rem;
+        height: 12px;
+        width: 60px;
+        animation: ${blink} 5s infinite linear;
+
+        .left {
+          width: 14px;
+          height: 14px;
+          background: ${DarkGreen};
+          border-radius: 50%;
+          margin: 0 10px;
+          position: absolute;
+          left: 0;
+        }
+        .right {
+          width: 14px;
+          height: 14px;
+          background: ${DarkGreen};
+          border-radius: 50%;
+          margin: 0 10px;
+          position: absolute;
+          right: 0;
+        }
+      }
+
+      .box_ghost-mouth {
+        width: 1em;
+        height: 0.6em;
+        border-radius: 50px;
+        border: 0.2em solid ${DarkGreen};
+        border-top: none;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        position: relative;
+        top: 3.5rem;
+        left: 2.65rem;
+        transform: rotate(180deg);
+      }
+
+      .box_ghost-bottom {
+        display: flex;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+
+        div {
+          flex-grow: 1;
+          position: relative;
+          top: -10px;
+          height: 20px;
+          border-radius: 100%;
+          background-color: ${white};
+
+          &:nth-child(2n) {
+            top: -12px;
+            margin: 0 -0px;
+            border-top: 15px solid ${DarkGreen};
+            background: transparent;
+          }
+        }
+      }
+    }
+
+    .box_ghost-shadow {
+      height: 20px;
+      box-shadow: 0 50px 15px 5px ${Purple};
+      opacity: .3;
+      border-radius: 50%;
+      margin: 0 auto;
+      animation: ${smallnbig} 3s ease-in-out infinite;
+    }
+  }
+
+  .box_description {
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+
+    .box_description-container {
+      color: ${white};
+      text-align: center;
+      width: 200px;
+      height: 150px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-evenly;
+
+      .box_description-title {
+        font: 700 44px/0.5px "Amatic SC", sans-serif;
+      }
+
+      .box_description-text {
+        color: ${Purple};
+        font: 400 16px/20px "Poppins", sans-serif;
+      }
+    }
+
+    .box_button {
+      display: block;
+      position: relative;
+      background: ${Orange};
+      border: 1px solid transparent;
+      border-radius: 50px;
+      height: 50px;
+      text-align: center;
+      text-decoration: none;
+      color: ${white};
+      font: 700 18px/50px "Poppins", sans-serif;
+      padding: 0 70px;
+      white-space: nowrap;
+      margin-top: 25px;
+      transition: background 0.5s ease;
+      overflow: hidden;
+      mask-image: radial-gradient(white, black);
+
+      &:before {
+        content: "";
+        position: absolute;
+        width: 20px;
+        height: 100px;
+        background: ${white};
+        bottom: -25px;
+        left: 0;
+        border: 2px solid ${white};
+        transform: translateX(-50px) rotate(45deg);
+        transition: transform 0.5s ease;
+      }
+
+      &:hover {
+        background: transparent;
+        border-color: ${white};
+
+        &:before {
+          transform: translateX(250px) rotate(45deg);
+        }
+      }
+    }
+  }
+`;
diff --git a/src/assets/pages/error/index.js b/src/assets/pages/error500/index.js
similarity index 100%
rename from src/assets/pages/error/index.js
rename to src/assets/pages/error500/index.js
diff --git a/src/assets/pages/error/style.js b/src/assets/pages/error500/style.js
similarity index 100%
rename from src/assets/pages/error/style.js
rename to src/assets/pages/error500/style.js
diff --git a/src/assets/pages/home/index.js b/src/assets/pages/home/index.js
index c4b4d86..4c6fa65 100644
--- a/src/assets/pages/home/index.js
+++ b/src/assets/pages/home/index.js
@@ -1,97 +1,138 @@
 import React, { useEffect } from "react";
 
 //Apollo
-import { useQuery } from '@apollo/client';
+import { useQuery } from "@apollo/client";
 
 //Services
-import HOME_QUERY from '../../services/querys/homeQuery';
+import HOME_QUERY from "../../services/querys/homeQuery";
 
 //Styles
-import * as S from './style';
+import * as S from "./style";
 
 //AOS
-import AOS from 'aos';
-import 'aos/dist/aos.css';
+import AOS from "aos";
+import "aos/dist/aos.css";
 
 //Helmet
-import { Helmet } from 'react-helmet';
+import { Helmet } from "react-helmet";
 
 //User Location
-import { useLocation } from 'react-router-dom';
+import { useLocation } from "react-router-dom";
 
 //Pages
-import Error from "../error"
+import Error from "../error500";
 
 //Components
-import Layout from '../../components/layout';
-import Loading from '../../components/loading';
+import Layout from "../../components/layout";
+import Loading from "../../components/loading";
 import Forest from "../../components/forest";
 
 export default function Home() {
-
-    const SetBodyClass = () => {
-        const path = useLocation().pathname;
-        let location = '';
-
-        if (path === '/') {
-            location = 'home'
-        } else {
-            location = path.slice(1)
-        };
-
-        return location
-    };
-
-    useEffect(() => {
-        AOS.init();
-    });
-
-    const { data, loading, error } = useQuery(HOME_QUERY);
-
-    if (loading) return <Loading />;
-    if (error) return <Error />;
-
-    console.log(data);
-
-    const { home } = data;
-
-    return (
-        <>
-            <Helmet>
-                <body className={SetBodyClass()} />
-            </Helmet>
-            <Layout positionHeader="fixed" backgroundHeader="transparent" positionFooter="absolute" backgroundFooter="transparent">
-                <S.Main>
-                    <S.ContentWrapper data-aos="fade-up" data-aos-duration="2000">
-                        <h1 dangerouslySetInnerHTML={{ __html: home.title.text.replace(/\\n/g, '') }}></h1>
-                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-                            <defs>
-                                <filter id="squiggly-0">
-                                    <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0" />
-                                    <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6" />
-                                </filter>
-                                <filter id="squiggly-1">
-                                    <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1" />
-                                    <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
-                                </filter>
-                                <filter id="squiggly-2">
-                                    <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2" />
-                                    <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
-                                </filter>
-                                <filter id="squiggly-3">
-                                    <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3" />
-                                    <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
-                                </filter>
-                                <filter id="squiggly-4">
-                                    <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4" />
-                                    <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
-                                </filter>
-                            </defs>
-                        </svg>
-                    </S.ContentWrapper>
-                    <Forest />
-                </S.Main>
-            </Layout>
-        </>
-    )
+  const SetBodyClass = () => {
+    const path = useLocation().pathname;
+    let location = "";
+
+    if (path === "/") {
+      location = "home";
+    } else {
+      location = path.slice(1);
+    }
+
+    return location;
+  };
+
+  useEffect(() => {
+    AOS.init();
+  });
+
+  const { data, loading, error } = useQuery(HOME_QUERY);
+
+  if (loading) return <Loading />;
+  if (error) return <Error />;
+
+  console.log(data);
+
+  const { home } = data;
+
+  return (
+    <>
+      <Helmet>
+        <body className={SetBodyClass()} />
+      </Helmet>
+      <Layout
+        positionFooter="absolute"
+        backgroundFooter="transparent"
+      >
+        <S.Main>
+          <S.ContentWrapper data-aos="fade-up" data-aos-duration="2000">
+            <h1
+              dangerouslySetInnerHTML={{
+                __html: home.title.text.replace(/\\n/g, ""),
+              }}
+            ></h1>
+            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+              <defs>
+                <filter id="squiggly-0">
+                  <feTurbulence
+                    id="turbulence"
+                    baseFrequency="0.02"
+                    numOctaves="3"
+                    result="noise"
+                    seed="0"
+                  />
+                  <feDisplacementMap
+                    id="displacement"
+                    in="SourceGraphic"
+                    in2="noise"
+                    scale="6"
+                  />
+                </filter>
+                <filter id="squiggly-1">
+                  <feTurbulence
+                    id="turbulence"
+                    baseFrequency="0.02"
+                    numOctaves="3"
+                    result="noise"
+                    seed="1"
+                  />
+                  <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
+                </filter>
+                <filter id="squiggly-2">
+                  <feTurbulence
+                    id="turbulence"
+                    baseFrequency="0.02"
+                    numOctaves="3"
+                    result="noise"
+                    seed="2"
+                  />
+                  <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
+                </filter>
+                <filter id="squiggly-3">
+                  <feTurbulence
+                    id="turbulence"
+                    baseFrequency="0.02"
+                    numOctaves="3"
+                    result="noise"
+                    seed="3"
+                  />
+                  <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
+                </filter>
+                <filter id="squiggly-4">
+                  <feTurbulence
+                    id="turbulence"
+                    baseFrequency="0.02"
+                    numOctaves="3"
+                    result="noise"
+                    seed="4"
+                  />
+                  <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
+                </filter>
+              </defs>
+            </svg>
+          </S.ContentWrapper>
+          <Forest />
+        </S.Main>
+      </Layout>
+    </>
+  );
 }
diff --git a/src/assets/pages/projects/index.js b/src/assets/pages/projects/index.js
index 8357129..9ba0f39 100644
--- a/src/assets/pages/projects/index.js
+++ b/src/assets/pages/projects/index.js
@@ -14,7 +14,7 @@ import AOS from "aos";
 import "aos/dist/aos.css";
 
 //Pages
-import Error from "../error";
+import Error from "../error500";
 
 //Components
 import Layout from "../../components/layout";
diff --git a/src/assets/pages/techStack/index.js b/src/assets/pages/techStack/index.js
index aa5b263..0c6e7b6 100644
--- a/src/assets/pages/techStack/index.js
+++ b/src/assets/pages/techStack/index.js
@@ -14,7 +14,7 @@ import AOS from "aos";
 import "aos/dist/aos.css";
 
 //Pages
-import Error from "../error"
+import Error from "../error500";
 
 //Components
 import Layout from "../../components/layout";
diff --git a/src/assets/services/routes/index.js b/src/assets/services/routes/index.js
index 5f6206e..20cc922 100644
--- a/src/assets/services/routes/index.js
+++ b/src/assets/services/routes/index.js
@@ -1,36 +1,36 @@
-import React from 'react';
+import React from "react";
 
 //React router dom
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 //Components
-import { AudioProvider } from '../../components/audioContext';
-import Header from '../../components/header';
+import { AudioProvider } from "../../components/audioContext";
+import Header from "../../components/header";
 
 //Pages
-import Home from '../../pages/home';
-import Error from '../../pages/error';
-import Projects from '../../pages/projects';
-import TechStack from '../../pages/techStack';
-import About from '../../pages/about';
-import Contact from '../../pages/contact';
+import Home from "../../pages/home";
+import Error from "../../pages/error404";
+import Projects from "../../pages/projects";
+import TechStack from "../../pages/techStack";
+import About from "../../pages/about";
+import Contact from "../../pages/contact";
 
 export default function index() {
-    return (
-        <>
-            <Router>
-                <AudioProvider>
-                    <Header />
-                    <Routes>
-                        <Route path="/" element={<Home />} />
-                        <Route path="*" element={<Error />} />
-                        <Route path="/projects" element={<Projects />} />
-                        <Route path="/techStack" element={<TechStack />} />
-                        <Route path="/about" element={<About />} />
-                        <Route path="/contact" element={<Contact />} />
-                    </Routes>
-                </AudioProvider>
-            </Router>
-        </>
-    )
+  return (
+    <>
+      <Router>
+        <AudioProvider>
+          <Header />
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="*" element={<Error />} />
+            <Route path="/projects" element={<Projects />} />
+            <Route path="/techStack" element={<TechStack />} />
+            <Route path="/about" element={<About />} />
+            <Route path="/contact" element={<Contact />} />
+          </Routes>
+        </AudioProvider>
+      </Router>
+    </>
+  );
 }