diff --git a/frontend/src/App.jsx b/frontend/src/App.js
similarity index 65%
rename from frontend/src/App.jsx
rename to frontend/src/App.js
index ffe41c3..94a3a58 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.js
@@ -1,13 +1,10 @@
 import './App.css';
 import { Routes, Route } from "react-router-dom"
 import Layout from './components/Layout';
-import Home from "./components/landing/Home.jsx"
-import About from './components/About.jsx';
-import Internship from './components/Internships/Internship';
-import Footer from './components/Footer';
-import Services from './components/landing/Services';
-import Navbar from './components/Navbar';
-import InternshipDetails from './components/Internships/InternshipDetails';
+import Home from "./components/home/Home"
+import About from './components/About';
+import Internship from './components/internships/Internship';
+import InternshipDetails from './components/internships/InternshipDetails';
 import Accomplishment from './verify/Accomplishment';
 
 
diff --git a/frontend/src/components/About.jsx b/frontend/src/components/About.js
similarity index 84%
rename from frontend/src/components/About.jsx
rename to frontend/src/components/About.js
index ed2e84c..efab6f4 100644
--- a/frontend/src/components/About.jsx
+++ b/frontend/src/components/About.js
@@ -5,7 +5,6 @@ const About = () => {
   return (
     
     <div className='py-10'>
-       <Navbar />
        About
     </div>
   )
diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js
new file mode 100644
index 0000000..20bbe0b
--- /dev/null
+++ b/frontend/src/components/Footer.js
@@ -0,0 +1,50 @@
+import React from 'react'
+import { BsTwitter } from 'react-icons/bs'
+import { FaFacebook } from 'react-icons/fa'
+import { BsLinkedin } from 'react-icons/bs'
+import { BsYoutube } from 'react-icons/bs'
+import img from '../images/codebooter.png'
+import { Link } from 'react-router-dom'
+
+const Footer = () => {
+  return (
+    <>
+      <div className='footer mb-0'>
+
+        <div>
+          <img src={img} className='footer-img' />
+        </div>
+        <div className='footer-deco'>
+          <Link to='/login'>Community</Link> <br />
+          <a href=''>About WEP</a><br />
+          <a href=''>Partners </a><br />
+        </div>
+
+        <div className='footer-deco'>
+          <a href=''>Newsletter</a> <br />
+          <a href=''>Events</a> <br />
+          <a href=''>Disclaimer</a> <br />
+        </div>
+
+        <div className='footer-deco'>
+          <a href=''>FAQ's</a> <br />
+          <a href=''>Feedback</a> <br />
+        </div>
+
+        <div className='footer-deco socials'>
+          <a href=''><BsTwitter /></a> <br />
+          <a href='/'><FaFacebook /></a><br />
+          <a href='' ><BsLinkedin /></a><br />
+          <a href='' ><BsYoutube /></a><br />
+        </div>
+      </div>
+
+      <div className='flex justify-center items-center bg-main-3 pb-6 text-xs copyright'>
+        © 2023 CodeBooter Website. All rights reserved.
+      </div>
+    </>
+
+  )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
deleted file mode 100644
index 11808d3..0000000
--- a/frontend/src/components/Footer.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-
-const Footer = () => {
-  return (
-    <div className='bg-violet-100 h-10 flex justify-center items-center'>
-      &#169; 2023 CodeBooter
-      </div>
-  )
-}
-
-export default Footer
\ No newline at end of file
diff --git a/frontend/src/components/Internships/Internship.jsx b/frontend/src/components/Internships/Internship.jsx
deleted file mode 100644
index e0d66a5..0000000
--- a/frontend/src/components/Internships/Internship.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import { Link } from 'react-router-dom'
-
-const Internship = () => {
-  return (
-    <div className='mt-20 bg-violet-100'>
-    <div className='flex justify-around'>
-    <Link to="/detail">Internship</Link>
-    <Link>Internship</Link>
-    <Link>Internship</Link>
-    </div>
-    </div>
-  )
-}
-
-export default Internship
\ No newline at end of file
diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.js
similarity index 68%
rename from frontend/src/components/Layout.jsx
rename to frontend/src/components/Layout.js
index 90965e5..cac849d 100644
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.js
@@ -1,13 +1,12 @@
 import React from 'react'
 import {Outlet} from "react-router-dom"
-import Navbar from './Navbar.jsx'
-import Footer from './Footer.jsx'
+import Navbar from './Navbar'
+import Footer from './Footer'
 
 
 
 const Layout = () => {
   return (
-   
     <div>
      <Navbar />
      <Outlet />
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.js
similarity index 71%
rename from frontend/src/components/Navbar.jsx
rename to frontend/src/components/Navbar.js
index cb1ac47..8e67ef4 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.js
@@ -10,24 +10,24 @@ function Navbar() {
   const activeStyles = {
     fontWeight: "bold",
     textDecoration: "underline",
-    color: "#FFA8A8"
+    color: "#ff8ba8"
   }
 
   return (
-    <div className="flex justify-between items-center fixed top-0 left-0 right-0 text-white bg-white p-4 h-20 mx-20">
+    <div className="nav flex justify-between items-center fixed top-0 left-0 right-0 p-4 px-8 sh-20">
       <div>
-      <NavLink to='/' className="text-2xl text-black">
+      <NavLink to='/' className="text-2xl nav-text">
       <motion.h6
         whileHover={{scale: 1.1 }}
         transition={{type: 'spring', stiffness: 300
         }}>
-        Code<span className="text-main">Booter</span>
+        <span className="code">Code</span><span className="text-main">Booter</span>
         </motion.h6>
         </NavLink>
       </div>
 
       <div className="flex">
-      <NavLink to='/about' className="p-2 text-black"
+      <NavLink to='/about' className="p-2 nav-text"
       style={({ isActive }) => isActive ? activeStyles : null}>
         <motion.h6
         whileHover={{scale: 1.1 }}
@@ -36,7 +36,7 @@ function Navbar() {
         About
         </motion.h6>
         </NavLink>
-      <NavLink to='/internship' className="p-2 text-black"
+      <NavLink to='/internship' className="p-2 nav-text"
       style={({ isActive }) => isActive ? activeStyles : null}>
       <motion.h6
         whileHover={{scale: 1.1 }}
@@ -45,7 +45,7 @@ function Navbar() {
         Internship
         </motion.h6>
         </NavLink>
-      <NavLink to='/project' className="p-2 text-black"
+      <NavLink to='/project' className="p-2 nav-text"
       style={({ isActive }) => isActive ? activeStyles : null}>
       <motion.h6
         whileHover={{scale: 1.1 }}
@@ -54,7 +54,7 @@ function Navbar() {
         Live Projects
         </motion.h6>
         </NavLink>
-      <NavLink to='/product' className="p-2 text-black"
+      <NavLink to='/product' className="p-2 nav-text"
       style={({ isActive }) => isActive ? activeStyles : null}>
       <motion.h6
         whileHover={{scale: 1.1 }}
@@ -64,7 +64,7 @@ function Navbar() {
         </motion.h6>
         </NavLink>
       <NavLink to='/login'>
-        <motion.button className="text-black border border-2 border-black py-2 px-5 rounded-full"
+        <motion.button className="nav-text border border-2 border-main py-2 px-5 rounded-full"
          whileHover={{scale: 1.1 }}
          transition={{type: 'spring', stiffness: 300
          }}>
diff --git a/frontend/src/components/home/1.png b/frontend/src/components/home/1.png
new file mode 100644
index 0000000..b6b7c47
Binary files /dev/null and b/frontend/src/components/home/1.png differ
diff --git a/frontend/src/components/home/2.png b/frontend/src/components/home/2.png
new file mode 100644
index 0000000..14082e8
Binary files /dev/null and b/frontend/src/components/home/2.png differ
diff --git a/frontend/src/components/home/3.png b/frontend/src/components/home/3.png
new file mode 100644
index 0000000..c3ce570
Binary files /dev/null and b/frontend/src/components/home/3.png differ
diff --git a/frontend/src/components/home/4.png b/frontend/src/components/home/4.png
new file mode 100644
index 0000000..0af211c
Binary files /dev/null and b/frontend/src/components/home/4.png differ
diff --git a/frontend/src/components/Contact.jsx b/frontend/src/components/home/Contact.js
similarity index 71%
rename from frontend/src/components/Contact.jsx
rename to frontend/src/components/home/Contact.js
index 58807f0..5e22b06 100644
--- a/frontend/src/components/Contact.jsx
+++ b/frontend/src/components/home/Contact.js
@@ -4,12 +4,15 @@ import { motion } from "framer-motion"
 const Contact = () => {
   return (
    
-      <div className="mt-20 p-20 flex justify-around bg-cyan-100">
+      <div className="mt-20 flex justify-around">
         <div className="">
-          <p className="text-2xl font-bold">
+          <motion.p className="text-2xl font-bold"
+           whileHover={{scale: 1.1, originX: 0 }}
+           transition={{type: 'spring', stiffness: 300
+           }}>
             Contact
-          </p>
-          <p className="py-6">Submit the form below to get in touch with us</p>
+          </motion.p>
+          <p className="py-6">Submit the form to get in touch with us</p>
         </div>
 
           <form className="flex flex-col">
@@ -17,19 +20,19 @@ const Contact = () => {
               type="text"
               name="name"
               placeholder="Enter your Name"
-              className="p-2 bg-transparent border-2 rounded-md text-white focus:outline-none hover:scale-110 duration-100"
+              className="p-2 bg-transparent border-2 rounded-md text-white"
             />
             <input
               type="text"
               name="email"
               placeholder="Enter your email"
-              className="my-4 p-2 bg-transparent border-2 rounded-md text-white focus:outline-none hover:scale-110 duration-100"
+              className="my-4 p-2 bg-transparent border-2 rounded-md text-white"
             />
             <textarea
               name="message"
               placeholder="Enter your message"
               rows="10"
-              className="p-2 bg-transparent border-2 rounded-md text-white focus:outline-none hover:scale-110 duration-100"
+              className="p-2 bg-transparent border-2 rounded-md text-white"
             ></textarea>
 
             <button className="text-white bg-gradient-to-b from-cyan-500 to-blue-500 px-6 py-3 my-8 mx-auto flex items-center rounded-md hover:scale-110 duration-300">
diff --git a/frontend/src/components/home/Hero.js b/frontend/src/components/home/Hero.js
new file mode 100644
index 0000000..cc0a059
--- /dev/null
+++ b/frontend/src/components/home/Hero.js
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import image from '../../images/study.png'
+import { Link } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import videoFile from './hero-img.mp4'
+
+
+
+
+const Hero = () => {
+
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  const handleLoadedData = () => {
+    setIsLoading(false);
+  };
+  return (
+
+    <div className='flex justify-around items-center my-24 hero-container'>
+
+      <div className='fade-in-from-left bg-' >
+        <h1 className="text-5xl text-bold">WE BUILD<br /><span className='pt-8'>WE PUBLISH</span></h1>
+        <p className="py-5 text-1xl font-bold">We are a Community of Tech Learners. <br />Come on, Let's Learn Together. Join Us.</p>
+        <Link to='/about'>
+          <motion.button className='hero-btn my-5 py-3 px-8 text-lg border-2 border-main-3 rounded-full mr-5'
+            whileHover={{ scale: 1.1 }}
+            transition={{
+              type: 'spring', stiffness: 300
+            }}>
+            JOIN COMMUNITY
+          </motion.button>
+        </Link>
+      </div>
+
+      <div>
+        <video className='image-top' controls={false} autoPlay muted
+          onLoadedData={handleLoadedData}
+          style={{ display: isLoading ? 'none' : 'block' }}
+        >
+          <source src={videoFile} type="video/mp4" />
+          Sorry, your browser doesn't support videos.
+        </video>
+      </div>
+
+    </div>
+
+  )
+}
+
+export default Hero
\ No newline at end of file
diff --git a/frontend/src/components/landing/Home.jsx b/frontend/src/components/home/Home.js
similarity index 56%
rename from frontend/src/components/landing/Home.jsx
rename to frontend/src/components/home/Home.js
index 790b998..a2a616f 100644
--- a/frontend/src/components/landing/Home.jsx
+++ b/frontend/src/components/home/Home.js
@@ -1,14 +1,12 @@
 import React from 'react'
 import Hero from './Hero'
 import Services from './Services'
-import Navbar from '../Navbar'
-import Internship from '../Internships/Internship'
-import Contact from '../Contact'
+import Internship from '../internships/Internship'
+import Contact from './Contact'
 
 const Home = () => {
   return (
-    <div className='m-5'>
-      <Navbar />
+    <div className=''>
       <Hero />
       <Services />
       <Internship />
diff --git a/frontend/src/components/home/Services.js b/frontend/src/components/home/Services.js
new file mode 100644
index 0000000..e9603db
--- /dev/null
+++ b/frontend/src/components/home/Services.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { FaRegHeart, FaRegLightbulb, FaRegChartBar } from 'react-icons/fa';
+import img1 from './1.png';
+import img2 from './2.png';
+import img3 from './3.png';
+import img4 from './4.png';
+
+
+
+const Services = () => {
+  return (
+    <section id="services" className="services-section">
+      <h2 className="section-title">Our Services</h2>
+      <div className="service-list">
+        <div className="service-item">
+          <img src={img1} className='img-icon' />
+          <h3 className="service-title">Android and IOs</h3>
+        </div>
+        <div className="service-item">
+          <img src={img2} className='img-icon' />
+          <h3 className="service-title">Web Solution</h3>
+        </div>
+        <div className="service-item">
+          <img src={img3} className='img-icon' />
+          <h3 className="service-title">Hosting and cloud</h3>
+        </div>
+        <div className="service-item">
+          <img src={img4} className='img-icon' />
+          <h3 className="service-title">Training</h3>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Services;
diff --git a/frontend/src/components/home/android.png b/frontend/src/components/home/android.png
new file mode 100644
index 0000000..504d785
Binary files /dev/null and b/frontend/src/components/home/android.png differ
diff --git a/frontend/src/components/home/hero-img.mp4 b/frontend/src/components/home/hero-img.mp4
new file mode 100644
index 0000000..8d84f8d
Binary files /dev/null and b/frontend/src/components/home/hero-img.mp4 differ
diff --git a/frontend/src/components/internships/Internship.js b/frontend/src/components/internships/Internship.js
new file mode 100644
index 0000000..028645e
--- /dev/null
+++ b/frontend/src/components/internships/Internship.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { FaRegHeart, FaRegLightbulb, FaRegChartBar } from 'react-icons/fa';
+
+
+const Internship = () => {
+  return (
+    <section id="services" className="services-section">
+      <h2 className="section-title">Internships</h2>
+      <div className="service-list">
+        <div className="service-item">
+          <div className="service-icon"><FaRegHeart /></div>
+          <h3 className="service-title">Internship 1</h3>
+          <p className="service-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </div>
+        <div className="service-item">
+          <div className="service-icon"><FaRegLightbulb /></div>
+          <h3 className="service-title">Internship 2</h3>
+          <p className="service-description">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        </div>
+        <div className="service-item">
+          <div className="service-icon"><FaRegChartBar /></div>
+          <h3 className="service-title">Internship 3</h3>
+          <p className="service-description">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+        </div>
+        <div className="service-item">
+          <div className="service-icon"><FaRegChartBar /></div>
+          <h3 className="service-title">Internship 3</h3>
+          <p className="service-description">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Internship
\ No newline at end of file
diff --git a/frontend/src/components/Internships/InternshipDetails.jsx b/frontend/src/components/internships/InternshipDetails.js
similarity index 100%
rename from frontend/src/components/Internships/InternshipDetails.jsx
rename to frontend/src/components/internships/InternshipDetails.js
diff --git a/frontend/src/components/landing/Hero.jsx b/frontend/src/components/landing/Hero.jsx
deleted file mode 100644
index 2568991..0000000
--- a/frontend/src/components/landing/Hero.jsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react'
-import image from '../../images/feature_3.png'
-import { Link } from 'react-router-dom'
-import { motion } from 'framer-motion'
-
-
-
-const Hero = () => {
-  return (
-    <div className="flex justify-between items-center">
-
-      <div className='flex bg-main rounded-xl m-16 p-20 '>
-        <div className=''>
-
-          {/* <h1 className="font-bold text-5xl">CodeBooter</h1> */}
-          <h1 className="mt-5 text-5xl text-bold">WE BUILD<br />
-            <span className='pt-8'>WE PUBLISH</span></h1>
-
-          <p className="my-5 text-1xl font-bold">
-            We are a Community of Tech Learners. Come on, Let's Learn Together. Join Us.
-          </p>
-          <Link to='/about'>
-            <motion.button className='my-5 py-3 px-8 text-lg border-2 border-black rounded-full mr-5'
-             whileHover={{scale: 1.1 }}
-             transition={{type: 'spring', stiffness: 300
-             }}>
-             JOIN COMMUNITY
-            </motion.button>
-          </Link>
-          
-        </div>
-        <div>
-          <motion.img
-            // initial={{ opacity: 0, scale: 0.5 }}
-            // animate={{ opacity: 1, scale: 1 }}
-            // transition={{
-            //   duration: 0.8,
-            //   delay: 0.5,
-            //   ease: [0, 0.71, 0.2, 1.01]
-            // }}
-
-            // initial={{ opacity: 0, scale: 0.5 }}
-            // animate={{ opacity: 1, scale: 1 }}
-            // transition={{
-            //   duration: 0.3,
-            //   ease: [0, 0.71, 0.2, 1.01],
-            //   scale: {
-            //     type: "spring",
-            //     damping: 5,
-            //     stiffness: 100,
-            //     restDelta: 0.001
-            //   }
-            // }}
-
-            // whileHover={{ scale: 1.1 }}
-            // transition={{ type: "spring", stiffness: 400, damping: 10 }}
-
-            src={image} />
-        </div>
-
-      </div>
-    </div>
-  )
-}
-
-export default Hero
\ No newline at end of file
diff --git a/frontend/src/components/landing/Services.jsx b/frontend/src/components/landing/Services.jsx
deleted file mode 100644
index b37dab5..0000000
--- a/frontend/src/components/landing/Services.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-import { motion } from "framer-motion";
-import { BiCheck } from 'react-icons/bi'
-
-
-
-const Services = () => {
-  return (
-    <motion.div className='my-10 bg-yellow-100'
-    initial={{x:'100vw'}}
-    animate={{x:0}}
-    >
-      <div className='flex justify-around'>
-
-        <div>Services</div>
-        <div>Services</div>
-        <div>Services</div>
-
-
-      </div>
-      </motion.div>
-
-
-      )
-}
-
-      export default Services
\ No newline at end of file
diff --git a/frontend/src/images/codebooter.png b/frontend/src/images/codebooter.png
new file mode 100644
index 0000000..124703c
Binary files /dev/null and b/frontend/src/images/codebooter.png differ
diff --git a/frontend/src/images/study.png b/frontend/src/images/study.png
new file mode 100644
index 0000000..00f5f51
Binary files /dev/null and b/frontend/src/images/study.png differ
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f58a1fd..769428a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -4,19 +4,185 @@
 
 * {
     box-sizing: border-box;
-  /* font-family: 'Sora', sans-serif; */
-
 }
 
 html,body {
     margin: 0;
     padding: 0;
     font-family: 'Sora', sans-serif;
+    /* background-color: #AEB6FF; */
 }
 
 body::-webkit-scrollbar {
     display: none;
 }
 
+input{
+    width: 400px;
+}
+
+/* NAVBAR */
+
+.nav{
+    background-color: #281652;
+}
+
+.nav-text{
+    color: #8bffff;
+}
+
+.code{
+    color: white;
+}
+
+
+/* HERO  */
+
+.hero-container{
+    /* background-color: rgb(187, 255, 231); */
+}
+
+.hero-btn{
+    background-color: #281652;
+    color: #8bffff;
+}
+
+.video {
+    background-color: transparent;
+  }
+
+/* ANIMATON  */
+
+@keyframes fadeFromLeft {
+    from {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
+  
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  
+  .fade-in-from-left {
+    animation: fadeFromLeft 1s ease-in-out;
+  }
+
+  @keyframes fadeFromRight {
+    from {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+  
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  
+  .fade-in-from-right {
+    animation: fadeFromRight 1s ease-in-out;
+  }
+  
+  
+
+
+/* SERVICES */
+
+.services-section {
+    padding: 60px 20px;
+    text-align: center;
+  }
+  
+  .section-title {
+    font-size: 32px;
+    margin-bottom: 30px;
+    /* color: #000000; */
+  }
+  
+  .service-list {
+    display: flex;
+    justify-content: center;
+  }
+  
+  .service-item {
+    flex: 1;
+    max-width: 300px;
+    margin: 0 15px;
+    padding: 20px;
+    background-color: #281652;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+  }
+  
+  .service-item:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+  
+  .service-icon {
+    font-size: 48px;
+    margin-bottom: 15px;
+    color: #FFF;
+  }
+  
+  .service-title {
+    font-size: 24px;
+    margin-bottom: 10px;
+    color: #AEB6FF;
+  }
+  
+  .service-description {
+    font-size: 16px;
+    color: #AEB6FF;
+  }
+  
+  /* Media Queries */
+  @media screen and (max-width: 768px) {
+    .service-list {
+      flex-direction: column;
+    }
+  
+    .service-item {
+      margin-bottom: 30px;
+    }
+  }
+  
+
+  
+/* FOOTER  */
+
+.footer{
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    background-color: #281652;
+    height: 50vh;
+    width: 100vw;
+    line-height: 2.5;
+  }
+  
+  .socials {
+    line-height: 1;
+  }
+  
+  .footer-img {
+    height: 100px;
+  }
+  
+  .footer-deco a{
+    text-decoration: none;
+    color: rgb(255, 255, 255);
+  }
+  
+  .footer-deco a:hover{
+    color: #ff8ba8;
+  }
 
+  .copyright{
+    background-color: #281652;
+    color: rgb(255, 255, 255);
 
+  }
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 2f25529..7929737 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -7,8 +7,8 @@ module.exports = {
     extend: {
       colors: {
         'main': '#AEB6FF',
-        'main-2': '#FFA8A8',
-        'main-3': '#9EFFE8'
+        'main-2': '#ff8ba8',
+        'main-3': '#8bffff'
       }
     },
   },