diff --git a/Websites/BankModern/src/App.jsx b/Websites/BankModern/src/App.jsx
index c22607c..3aab359 100644
--- a/Websites/BankModern/src/App.jsx
+++ b/Websites/BankModern/src/App.jsx
@@ -1,5 +1,5 @@
-import React from "react";
-import styles from "./styles";
+// import React from "react";
+// import styles from "./styles";
 
 import {Navbar, Billing, CardDeal, Business, Clients, CTA, Stats, 
   Footer, Testimonials, Hero,} from "../../BankModern/src/components/Index";
diff --git a/Websites/BankModern/src/components/Billing/Billing.jsx b/Websites/BankModern/src/components/Billing/Billing.jsx
index 968f46e..0333198 100644
--- a/Websites/BankModern/src/components/Billing/Billing.jsx
+++ b/Websites/BankModern/src/components/Billing/Billing.jsx
@@ -1,9 +1,34 @@
-import React from 'react'
+import { apple, bill, google } from "../../assets";
+import styles, { layout } from "../../styles";
 
-const Billing = () => {
-  return (
-    <div>Billing</div>
-  )
-}
+const Billing = () => (
+  <section id="product" className={layout.sectionReverse}>
+    <div className={layout.sectionImgReverse}>
+      <img src={bill} alt="billing" className="w-[100%] h-[100%] relative z-[5]" />
 
-export default Billing
\ No newline at end of file
+      {/* gradient start */}
+      <div className="absolute z-[3] -left-1/2 top-0 w-[50%] h-[50%] rounded-full white__gradient" />
+      <div className="absolute z-[0] w-[50%] h-[50%] -left-1/2 bottom-0 rounded-full pink__gradient" />
+      {/* gradient end */}
+    </div>
+
+    <div className={layout.sectionInfo}>
+      <h2 className={styles.heading2}>
+        Easily control your <br className="sm:block hidden" /> billing &
+        invoicing
+      </h2>
+      <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
+        Elit enim sed massa etiam. Mauris eu adipiscing ultrices ametodio
+        aenean neque. Fusce ipsum orci rhoncus aliporttitor integer platea
+        placerat.
+      </p>
+
+      <div className="flex flex-row flex-wrap sm:mt-10 mt-6">
+        <img src={apple} alt="google_play" className="w-[128.86px] h-[42.05px] object-contain mr-5 cursor-pointer" />
+        <img src={google} alt="google_play" className="w-[144.17px] h-[43.08px] object-contain cursor-pointer" />
+      </div>
+    </div>
+  </section>
+);
+
+export default Billing;
\ No newline at end of file
diff --git a/Websites/BankModern/src/components/Business/Business.jsx b/Websites/BankModern/src/components/Business/Business.jsx
index 1819737..a83585d 100644
--- a/Websites/BankModern/src/components/Business/Business.jsx
+++ b/Websites/BankModern/src/components/Business/Business.jsx
@@ -1,9 +1,45 @@
-import React from 'react'
+import { features } from "../../constants";
+import styles, { layout } from "../../styles";
+import Button from "../Button/Button";
 
-const Business = () => {
-  return (
-    <div>Business</div>
-  )
-}
+const FeatureCard = ({ icon, title, content, index }) => (
+  <div className={`flex flex-row p-6 rounded-[20px] ${index !== features.length - 1 ? "mb-6" : "mb-0"} feature-card`}>
+    <div className={`w-[64px] h-[64px] rounded-full ${styles.flexCenter} bg-dimBlue`}>
+      <img src={icon} alt="star" className="w-[50%] h-[50%] object-contain" />
+    </div>
+    <div className="flex-1 flex flex-col ml-3">
+      <h4 className="font-poppins font-semibold text-white text-[18px] leading-[23.4px] mb-1">
+        {title}
+      </h4>
+      <p className="font-poppins font-normal text-dimWhite text-[16px] leading-[24px]">
+        {content}
+      </p>
+    </div>
+  </div>
+);
 
-export default Business
\ No newline at end of file
+const Business = () =>  (
+  <section id="features" className={layout.section}>
+    <div className={layout.sectionInfo}>
+      <h2 className={styles.heading2}>
+        You do the business, <br className="sm:block hidden" /> we’ll handle
+        the money.
+      </h2>
+      <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
+        With the right credit card, you can improve your financial life by
+        building credit, earning rewards and saving money. But with hundreds
+        of credit cards on the market.
+      </p>
+
+      <Button styles={`mt-10`} />
+    </div>
+
+    <div className={`${layout.sectionImg} flex-col`}>
+      {features.map((feature, index) => (
+        <FeatureCard key={feature.id} {...feature} index={index} />
+      ))}
+    </div>
+  </section>
+);
+
+export default Business;
\ No newline at end of file
diff --git a/Websites/BankModern/src/components/CTA/CTA.jsx b/Websites/BankModern/src/components/CTA/CTA.jsx
index af5ff34..57e4888 100644
--- a/Websites/BankModern/src/components/CTA/CTA.jsx
+++ b/Websites/BankModern/src/components/CTA/CTA.jsx
@@ -1,9 +1,20 @@
-import React from 'react'
+import styles from "../../styles";
+import Button from "../Button/Button";
 
-const CTA = () => {
-  return (
-    <div>CTA</div>
-  )
-}
+const CTA = () => (
+  <section className={`${styles.flexCenter} ${styles.marginY} ${styles.padding} sm:flex-row flex-col bg-black-gradient-2 rounded-[20px] box-shadow`}>
+    <div className="flex-1 flex flex-col">
+      <h2 className={styles.heading2}>Let’s try our service now!</h2>
+      <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
+        Everything you need to accept card payments and grow your business
+        anywhere on the planet.
+      </p>
+    </div>
 
-export default CTA
\ No newline at end of file
+    <div className={`${styles.flexCenter} sm:ml-10 ml-0 sm:mt-0 mt-10`}>
+      <Button />
+    </div>
+  </section>
+);
+
+export default CTA;
\ No newline at end of file
diff --git a/Websites/BankModern/src/components/CardDeal/CardDeal.jsx b/Websites/BankModern/src/components/CardDeal/CardDeal.jsx
index 5085635..813c3b5 100644
--- a/Websites/BankModern/src/components/CardDeal/CardDeal.jsx
+++ b/Websites/BankModern/src/components/CardDeal/CardDeal.jsx
@@ -1,9 +1,26 @@
-import React from 'react'
+import { card } from "../../assets";
+import styles, { layout } from "../../styles";
+import Button from "../Button/Button";
 
-const CardDeal = () => {
-  return (
-    <div>CardDeal</div>
-  )
-}
+const CardDeal = () => (
+  <section className={layout.section}>
+    <div className={layout.sectionInfo}>
+      <h2 className={styles.heading2}>
+        Find a better card deal <br className="sm:block hidden" /> in few easy
+        steps.
+      </h2>
+      <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
+        Arcu tortor, purus in mattis at sed integer faucibus. Aliquet quis
+        aliquet eget mauris tortor.ç Aliquet ultrices ac, ametau.
+      </p>
 
-export default CardDeal
\ No newline at end of file
+      <Button styles={`mt-10`} />
+    </div>
+
+    <div className={layout.sectionImg}>
+      <img src={card} alt="billing" className="w-[100%] h-[100%]" />
+    </div>
+  </section>
+);
+
+export default CardDeal;
\ No newline at end of file
diff --git a/Websites/BankModern/src/components/Clients/Clients.jsx b/Websites/BankModern/src/components/Clients/Clients.jsx
index dd5809e..8c6eb92 100644
--- a/Websites/BankModern/src/components/Clients/Clients.jsx
+++ b/Websites/BankModern/src/components/Clients/Clients.jsx
@@ -1,9 +1,16 @@
-import React from 'react'
+import { clients } from "../../constants";
+import styles from "../../styles";
 
-const Clients = () => {
-  return (
-    <div>Clients</div>
-  )
-}
+const Clients = () => (
+  <section className={`${styles.flexCenter} my-4`}>
+    <div className={`${styles.flexCenter} flex-wrap w-full`}>
+      {clients.map((client) => (
+        <div key={client.id} className={`flex-1 ${styles.flexCenter} sm:min-w-[192px] min-w-[120px] m-5`}>
+          <img src={client.logo} alt="client_logo" className="sm:w-[192px] w-[100px] object-contain" />
+        </div>
+      ))}
+    </div>
+  </section>
+);
 
-export default Clients
\ No newline at end of file
+export default Clients;
\ No newline at end of file
diff --git a/Websites/BankModern/src/components/FeedbackCard/FeedbackCard.jsx b/Websites/BankModern/src/components/FeedbackCard/FeedbackCard.jsx
index 0f80d4f..2f9daf4 100644
--- a/Websites/BankModern/src/components/FeedbackCard/FeedbackCard.jsx
+++ b/Websites/BankModern/src/components/FeedbackCard/FeedbackCard.jsx
@@ -1,9 +1,25 @@
-import React from 'react'
+import { quotes } from "../../assets";
 
-const FeedbackCard = () => {
-  return (
-    <div>FeedbackCard</div>
-  )
-}
+const FeedbackCard = ({ content, name, title, img }) => (
+  <div className="flex justify-between flex-col px-10 py-12 rounded-[20px]  max-w-[370px] md:mr-10 sm:mr-5 mr-0 my-5 feedback-card">
+    <img src={quotes} alt="double_quotes" className="w-[42.6px] h-[27.6px] object-contain" />
+    <p className="font-poppins font-normal text-[18px] leading-[32.4px] text-white my-10">
+      {content}
+    </p>
 
-export default FeedbackCard
\ No newline at end of file
+    <div className="flex flex-row">
+      <img src={img} alt={name} className="w-[48px] h-[48px] rounded-full" />
+      <div className="flex flex-col ml-4">
+        <h4 className="font-poppins font-semibold text-[20px] leading-[32px] text-white">
+          {name}
+        </h4>
+        <p className="font-poppins font-normal text-[16px] leading-[24px] text-dimWhite">
+          {title}
+        </p>
+      </div>
+    </div>
+  </div>
+);
+
+
+export default FeedbackCard;
\ No newline at end of file
diff --git a/Websites/BankModern/src/components/Footer/Footer.jsx b/Websites/BankModern/src/components/Footer/Footer.jsx
index 09379a2..303b21a 100644
--- a/Websites/BankModern/src/components/Footer/Footer.jsx
+++ b/Websites/BankModern/src/components/Footer/Footer.jsx
@@ -1,9 +1,64 @@
-import React from 'react'
+import styles from "../../styles";
+import { logo } from "../../assets";
+import { footerLinks, socialMedia } from "../../constants";
 
-const Footer = () => {
-  return (
-    <div>Footer</div>
-  )
-}
+const Footer = () => (
+  <section className={`${styles.flexCenter} ${styles.paddingY} flex-col`}>
+    <div className={`${styles.flexStart} md:flex-row flex-col mb-8 w-full`}>
+      <div className="flex-[1] flex flex-col justify-start mr-10">
+        <img
+          src={logo}
+          alt="hoobank"
+          className="w-[266px] h-[72.14px] object-contain"
+        />
+        <p className={`${styles.paragraph} mt-4 max-w-[312px]`}>
+          A new way to make the payments easy, reliable and secure.
+        </p>
+      </div>
 
-export default Footer
\ No newline at end of file
+      <div className="flex-[1.5] w-full flex flex-row justify-between flex-wrap md:mt-0 mt-10">
+        {footerLinks.map((footerlink) => (
+          <div key={footerlink.title} className={`flex flex-col ss:my-0 my-4 min-w-[150px]`}>
+            <h4 className="font-poppins font-medium text-[18px] leading-[27px] text-white">
+              {footerlink.title}
+            </h4>
+            <ul className="list-none mt-4">
+              {footerlink.links.map((link, index) => (
+                <li
+                  key={link.name}
+                  className={`font-poppins font-normal text-[16px] leading-[24px] text-dimWhite hover:text-secondary cursor-pointer ${
+                    index !== footerlink.links.length - 1 ? "mb-4" : "mb-0"
+                  }`}
+                >
+                  {link.name}
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <div className="w-full flex justify-between items-center md:flex-row flex-col pt-6 border-t-[1px] border-t-[#3F3E45]">
+      <p className="font-poppins font-normal text-center text-[18px] leading-[27px] text-white">
+        Copyright Ⓒ 2022 HooBank. All Rights Reserved.
+      </p>
+
+      <div className="flex flex-row md:mt-0 mt-6">
+        {socialMedia.map((social, index) => (
+          <img
+            key={social.id}
+            src={social.icon}
+            alt={social.id}
+            className={`w-[21px] h-[21px] object-contain cursor-pointer ${
+              index !== socialMedia.length - 1 ? "mr-6" : "mr-0"
+            }`}
+            onClick={() => window.open(social.link)}
+          />
+        ))}
+      </div>
+    </div>
+  </section>
+);
+
+export default Footer;
\ No newline at end of file
diff --git a/Websites/BankModern/src/components/GetStarted/GetStarted.jsx b/Websites/BankModern/src/components/GetStarted/GetStarted.jsx
index 5fe0628..0c41191 100644
--- a/Websites/BankModern/src/components/GetStarted/GetStarted.jsx
+++ b/Websites/BankModern/src/components/GetStarted/GetStarted.jsx
@@ -1,9 +1,21 @@
-import React from 'react'
+import styles from "../../styles";
+import { arrowUp } from "../../assets";
 
-const GetStarted = () => {
-  return (
-    <div>GetStarted</div>
-  )
-}
+const GetStarted = () => (
+  <div className={`${styles.flexCenter} w-[140px] h-[140px] rounded-full bg-blue-gradient p-[2px] cursor-pointer`}>
+    <div className={`${styles.flexCenter} flex-col bg-primary w-[100%] h-[100%] rounded-full`}>
+      <div className={`${styles.flexStart} flex-row`}>
+        <p className="font-poppins font-medium text-[18px] leading-[23.4px]">
+          <span className="text-gradient">Get</span>
+        </p>
+        <img src={arrowUp} alt="arrow-up" className="w-[23px] h-[23px] object-contain" />
+      </div>
+      
+      <p className="font-poppins font-medium text-[18px] leading-[23.4px]">
+        <span className="text-gradient">Started</span>
+      </p>
+    </div>
+  </div>
+);
 
-export default GetStarted
\ No newline at end of file
+export default GetStarted;
\ No newline at end of file
diff --git a/Websites/BankModern/src/components/Hero/Hero.jsx b/Websites/BankModern/src/components/Hero/Hero.jsx
index 90b45f6..a8ff859 100644
--- a/Websites/BankModern/src/components/Hero/Hero.jsx
+++ b/Websites/BankModern/src/components/Hero/Hero.jsx
@@ -1,9 +1,54 @@
-import React from 'react'
+import styles from "../../styles";
+import { discount, robot } from "../../assets";
+import GetStarted from "../GetStarted/GetStarted";
 
 const Hero = () => {
   return (
-    <div>Hero</div>
-  )
-}
+    <section id="home" className={`flex md:flex-row flex-col ${styles.paddingY}`}>
+      <div className={`flex-1 ${styles.flexStart} flex-col xl:px-0 sm:px-16 px-6`}>
+        <div className="flex flex-row items-center py-[6px] px-4 bg-discount-gradient rounded-[10px] mb-2">
+          <img src={discount} alt="discount" className="w-[32px] h-[32px]" />
+          <p className={`${styles.paragraph} ml-2`}>
+            <span className="text-white">20%</span> Discount For{" "}
+            <span className="text-white">1 Month</span> Account
+          </p>
+        </div>
 
-export default Hero
\ No newline at end of file
+        <div className="flex flex-row justify-between items-center w-full">
+          <h1 className="flex-1 font-poppins font-semibold ss:text-[72px] text-[52px] text-white ss:leading-[100.8px] leading-[75px]">
+            The Next <br className="sm:block hidden" />{" "}
+            <span className="text-gradient">Generation</span>{" "}
+          </h1>
+          <div className="ss:flex hidden md:mr-4 mr-0">
+            <GetStarted />
+          </div>
+        </div>
+
+        <h1 className="font-poppins font-semibold ss:text-[68px] text-[52px] text-white ss:leading-[100.8px] leading-[75px] w-full">
+          Payment Method.
+        </h1>
+        <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
+          Our team of experts uses a methodology to identify the credit cards
+          most likely to fit your needs. We examine annual percentage rates,
+          annual fees.
+        </p>
+      </div>
+
+      <div className={`flex-1 flex ${styles.flexCenter} md:my-0 my-10 relative`}>
+        <img src={robot} alt="billing" className="w-[100%] h-[100%] relative z-[5]" />
+
+        {/* gradient start */}
+        <div className="absolute z-[0] w-[40%] h-[35%] top-0 pink__gradient" />
+        <div className="absolute z-[1] w-[80%] h-[80%] rounded-full white__gradient bottom-40" />
+        <div className="absolute z-[0] w-[50%] h-[50%] right-20 bottom-20 blue__gradient" />
+        {/* gradient end */}
+      </div>
+
+      <div className={`ss:hidden ${styles.flexCenter}`}>
+        <GetStarted />
+      </div>
+    </section>
+  );
+};
+
+export default Hero;
\ No newline at end of file
diff --git a/Websites/BankModern/src/components/Navbar/Navbar.jsx b/Websites/BankModern/src/components/Navbar/Navbar.jsx
index bb35bab..a094974 100644
--- a/Websites/BankModern/src/components/Navbar/Navbar.jsx
+++ b/Websites/BankModern/src/components/Navbar/Navbar.jsx
@@ -1,22 +1,60 @@
-import React from "react";
 import { useState } from "react";
-// import {close, log, menu} from '../../assets/index';
-import { navlinks } from "../../constants/index";
+
+import { close, logo, menu } from "../../assets";
+import { navLinks } from "../../constants";
 
 const Navbar = () => {
+  const [active, setActive] = useState("Home");
+  const [toggle, setToggle] = useState(false);
+
   return (
     <nav className="w-full flex py-6 justify-between items-center navbar">
-      <img src="{logo}" alt="hoobank" className="w-[124px] h-[32px]" />
+      <img src={logo} alt="hoobank" className="w-[124px] h-[32px]" />
+
       <ul className="list-none sm:flex hidden justify-end items-center flex-1">
-        {navlinks.map((nav, index) => (
-          <li key={nav.id} className={"font-poppin font-normal cursor-pointer"}>
-            <a href={"#${nav.id}"}>{nav.title}</a>
+        {navLinks.map((nav, index) => (
+          <li
+            key={nav.id}
+            className={`font-poppins font-normal cursor-pointer text-[16px] ${
+              active === nav.title ? "text-white" : "text-dimWhite"
+            } ${index === navLinks.length - 1 ? "mr-5" : "mr-10"}`}
+            onClick={() => setActive(nav.title)}
+          >
+            <a href={`#${nav.id}`}>{nav.title}</a>
           </li>
         ))}
-        ;
       </ul>
+
+      <div className="sm:hidden flex flex-1 justify-end items-center">
+        <img
+          src={toggle ? close : menu}
+          alt="menu"
+          className="w-[28px] h-[28px] object-contain"
+          onClick={() => setToggle(!toggle)}
+        />
+
+        <div
+          className={`${
+            !toggle ? "hidden" : "flex"
+          } p-6 bg-black-gradient absolute top-20 right-0 mx-4 my-2 min-w-[140px] rounded-xl sidebar`}
+        >
+          <ul className="list-none flex justify-end items-start flex-1 flex-col">
+            {navLinks.map((nav, index) => (
+              <li
+                key={nav.id}
+                className={`font-poppins font-medium cursor-pointer text-[16px] ${
+                  active === nav.title ? "text-white" : "text-dimWhite"
+                } ${index === navLinks.length - 1 ? "mb-0" : "mb-4"}`}
+                onClick={() => setActive(nav.title)}
+              >
+                <a href={`#${nav.id}`}>{nav.title}</a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
     </nav>
   );
 };
 
-export default Navbar;
+export default Navbar;
\ No newline at end of file
diff --git a/Websites/BankModern/src/components/Stats/Stats.jsx b/Websites/BankModern/src/components/Stats/Stats.jsx
index 1d8b6c0..6072bcc 100644
--- a/Websites/BankModern/src/components/Stats/Stats.jsx
+++ b/Websites/BankModern/src/components/Stats/Stats.jsx
@@ -1,9 +1,19 @@
-import React from 'react'
+import { stats } from "../../constants";
+import styles from "../../styles";
 
-const Stats = () => {
-  return (
-    <div>Stats</div>
-  )
-}
+const Stats = () => (
+  <section className={`${styles.flexCenter} flex-row flex-wrap sm:mb-20 mb-6`}>
+    {stats.map((stat) => (
+      <div key={stat.id} className={`flex-1 flex justify-start items-center flex-row m-3`} >
+        <h4 className="font-poppins font-semibold xs:text-[40.89px] text-[30.89px] xs:leading-[53.16px] leading-[43.16px] text-white">
+          {stat.value}
+        </h4>
+        <p className="font-poppins font-normal xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px] text-gradient uppercase ml-3">
+          {stat.title}
+        </p>
+      </div>
+    ))}
+  </section>
+);
 
-export default Stats
\ No newline at end of file
+export default Stats;
\ No newline at end of file
diff --git a/Websites/BankModern/src/components/Testimonials/Testimonials.jsx b/Websites/BankModern/src/components/Testimonials/Testimonials.jsx
index f52821e..66184f2 100644
--- a/Websites/BankModern/src/components/Testimonials/Testimonials.jsx
+++ b/Websites/BankModern/src/components/Testimonials/Testimonials.jsx
@@ -1,9 +1,27 @@
-import React from 'react'
+import { feedback } from "../../constants";
+import styles from "../../styles";
+import FeedbackCard from "../FeedbackCard/FeedbackCard";
 
-const Testimonials = () => {
-  return (
-    <div>Testimonials</div>
-  )
-}
+const Testimonials = () => (
+  <section id="clients" className={`${styles.paddingY} ${styles.flexCenter} flex-col relative `}>
+    <div className="absolute z-[0] w-[60%] h-[60%] -right-[50%] rounded-full blue__gradient bottom-40" />
 
-export default Testimonials
\ No newline at end of file
+    <div className="w-full flex justify-between items-center md:flex-row flex-col sm:mb-16 mb-6 relative z-[1]">
+      <h2 className={styles.heading2}>
+        What People are <br className="sm:block hidden" /> saying about us
+      </h2>
+      <div className="w-full md:mt-0 mt-6">
+        <p className={`${styles.paragraph} text-left max-w-[450px]`}>
+          Everything you need to accept card payments and grow your business
+          anywhere on the planet.
+        </p>
+      </div>
+    </div>
+
+    <div className="flex flex-wrap sm:justify-start justify-center w-full feedback-container relative z-[1]">
+      {feedback.map((card) => <FeedbackCard key={card.id} {...card} />)}
+    </div>
+  </section>
+);
+
+export default Testimonials;
\ No newline at end of file
diff --git a/Websites/BankModern/src/constants/index.js b/Websites/BankModern/src/constants/index.js
index 1efe123..da7b1f1 100644
--- a/Websites/BankModern/src/constants/index.js
+++ b/Websites/BankModern/src/constants/index.js
@@ -13,21 +13,21 @@ import {
   send,
   shield,
   star,
-} from "../assets";
+} from "../assets/index";
 
 export const navLinks = [
   {
     id: "home",
     title: "Home",
   },
-  {
-    id: "features",
-    title: "Features",
-  },
   {
     id: "product",
     title: "Product",
   },
+  {
+    id: "features",
+    title: "Features",
+  },
   {
     id: "clients",
     title: "Clients",
@@ -63,14 +63,14 @@ export const feedback = [
     id: "feedback-1",
     content:
       "Money is only a tool. It will take you wherever you wish, but it will not replace you as the driver.",
-    name: "Herman Jensen",
+    name: "Nicole Nguyen",
     title: "Founder & Leader",
     img: people01,
   },
   {
     id: "feedback-2",
     content:
-      "Money makes your life easier. If you're lucky to have it, you're lucky.",
+      "Money makes your life easier. If you're lucky to have it, do your best to grow it.",
     name: "Steve Mark",
     title: "Founder & Leader",
     img: people02,