diff --git a/components/Demo.js b/components/Demo.js
deleted file mode 100644
index 9fa4ca4..0000000
--- a/components/Demo.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react'
-
-const demo = () => {
-  return <div>demo</div>
-}
-
-export default demo
diff --git a/components/sections/Avatar.js b/components/sections/Avatar.js
new file mode 100644
index 0000000..a05fe05
--- /dev/null
+++ b/components/sections/Avatar.js
@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react'
+import Image from 'next/image'
+import Bg from '../../public/assests/profile/profileBg.png'
+import demo from '../../public/assests/profile/demo.png'
+import { icons } from '../../style-guide/utils/icons'
+import TecnoCoin from '../style-guide/TecnoCoin'
+import EventAttended from '../style-guide/EventAttended'
+
+const Avatar = () => {
+  const [offsetY, setOffsetY] = useState(0)
+  const handleScroll = () => {
+    setOffsetY(window.pageYOffset)
+  }
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll)
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+  return (
+    <div className="relative w-screen bg-bgPrimary overflow-y-hidden">
+      <div className="absolute relative top-0 w-screen h-[30vh] md:h-[60vh]">
+        <Image
+          src={Bg}
+          layout="fill"
+          objectFit="cover"
+          priority="true"
+          style={{ transform: `translateY(${offsetY * 0.4}px)` }}
+        />
+      </div>
+      <div className="relative w-full h-32">
+        <div className="absolute top-[-12vh] relative w-[12rem] h-[12rem] mx-auto z-10">
+          <Image
+            src={demo}
+            layout="fill"
+            objectFit="content"
+            priority="true"
+            className="rounded-full cursor-pointer"
+          />
+          <div className="absolute top-[10rem] right-[2rem] cursor-pointer">
+            {icons.profile.camera}
+          </div>
+        </div>
+      </div>
+      <div className="w-screen md:w-[60vw] mx-auto">
+        <div className="font-semibold text-2xl text-white text-center mb-6">
+          Bhaskar Wary
+        </div>
+        <div className="flex justify-around w-full md:w-4/5 mx-auto pb-8">
+          <EventAttended noOfEvents={6} />
+          <TecnoCoin noOfCoins={600} />
+        </div>
+        <div className="w-[90%] mx-auto mb-8">{icons.profile.cusBorder}</div>
+        <div className="flex justify-between w-4/5 md:w-3/5 mx-auto">
+          <div className="w-1/2 text-white text-center p-3 font-bold text-[1.2rem] bg-gradient-to-r from-[#FF26C2] to-[#FF26C2] rounded-l-lg border-[#FF26C2] cursor-pointer">
+            Details
+          </div>
+          <div className="w-1/2 text-white text-center p-3 font-bold text-[1.2rem] bg-gradient-to-l from-[#4EDFFF] to-[#4EDFFF] rounded-r-lg border-[#4EDFFF] cursor-pointer">
+            Coins
+          </div>
+        </div>
+        <div className="my-8 relative w-full">
+          <div className="w-[90%] mx-auto">{icons.profile.cusBorder}</div>
+          <div className="absolute -top-[1rem] left-[30%] md:left-[35%] flex items-center justify-center text-white w-[40%] md:w-[30%] z-20 bg-bgPrimary p-1">
+            Personal Details
+          </div>
+        </div>
+        <div className="mt-8 w-[90%] mx-auto">
+          <div className="text-white">Name:- Wary</div>
+          <div className="w-full mx-auto my-8">{icons.profile.cusBorder}</div>
+          <div className="text-white">College:- NIT Silchar</div>
+          <div className="w-full mx-auto my-8">{icons.profile.cusBorder}</div>
+          <div className="text-white">Mobile No:- 6543210981</div>
+          <div className="w-full mx-auto my-8">{icons.profile.cusBorder}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Avatar
diff --git a/components/sections/Modules/Modal.js b/components/sections/Modules/Modal.js
new file mode 100644
index 0000000..836288c
--- /dev/null
+++ b/components/sections/Modules/Modal.js
@@ -0,0 +1,29 @@
+import React from 'react'
+//import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IoMdClose } from 'react-icons/io'
+function Modal() {
+  return (
+    <div className="modal-wrapper">
+      <div className="modal">
+        {/*<FontAwesomeIcon  icon="fa-xmark"/>*/}
+        <div className="justify-start heroimg"></div>
+        <div className="justify-start">
+          <div className="text-3xl px-2 py-2 cross">
+            <IoMdClose/>
+          </div>
+        </div>
+        <div className="justify-start">
+          <div >
+            <h1 className="text-3xl title">RoboTron</h1>
+            <div className='heropara'>
+              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque pariatur sint aliquam atque. Blanditiis, laudantium. Nobis quam quasi ducimus architecto vero ipsa itaque minima in omnis voluptates iusto corporis facilis, maxime, sunt quis. Doloremque recusandae cum qui libero, facilis illum quisquam molestiae! Quo at molestiae expedita eos voluptas natus necessitatibus?</p>
+            </div>
+          </div>
+        </div>
+        {/*<h1 className="text-xl">Module Name</h1>*/}
+      </div>
+    </div>
+  )
+}
+
+export default Modal
\ No newline at end of file
diff --git a/components/sections/Modules/Modules.js b/components/sections/Modules/Modules.js
new file mode 100644
index 0000000..e69de29
diff --git a/components/sections/Sidebar/Sidebar.js b/components/sections/Sidebar/Sidebar.js
new file mode 100644
index 0000000..06bf565
--- /dev/null
+++ b/components/sections/Sidebar/Sidebar.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import styles from './Sidebar.module.scss'
+
+const Sidebar = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.head}>
+        <div className={styles.text}>Modules</div>
+      </div>
+      <div className={styles.body}>
+        <div className={styles.item}>Robotron</div>
+      </div>
+    </div>
+  )
+}
+
+export default Sidebar
diff --git a/components/sections/Sidebar/Sidebar.module.scss b/components/sections/Sidebar/Sidebar.module.scss
new file mode 100644
index 0000000..e69de29
diff --git a/components/style-guide/EventAttended.js b/components/style-guide/EventAttended.js
new file mode 100644
index 0000000..84efb25
--- /dev/null
+++ b/components/style-guide/EventAttended.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import { icons } from '../../style-guide/utils/icons'
+
+const EventAttended = ({ noOfEvents }) => {
+  return (
+    <div className="w-2/5 flex flex-col items-center justify-center cursor-pointer">
+      {icons.eventsIcon}
+      <div className="text-white">
+        <span className="font-semibold">{noOfEvents} events</span>
+        <span className="font-normal"> attended</span>
+      </div>
+    </div>
+  )
+}
+
+export default EventAttended
diff --git a/components/style-guide/TecnoCoin.js b/components/style-guide/TecnoCoin.js
new file mode 100644
index 0000000..9360590
--- /dev/null
+++ b/components/style-guide/TecnoCoin.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import Image from 'next/image'
+import tecnoCoin from '../../style-guide/utils/Icons/TecnoCoins.svg'
+
+const TecnoCoin = ({ noOfCoins }) => {
+  return (
+    <div className="w-2/5 flex flex-col items-center justify-center cursor-pointer">
+      <div className="relative w-[60px] h-[60px]">
+        <Image
+          src={tecnoCoin}
+          layout="fill"
+          objectFit="content"
+          priority="true"
+        />
+      </div>
+      <div className="text-white">
+        <span className="font-semibold">Earned {noOfCoins}</span>
+        <span className="font-normal"> Coins</span>
+      </div>
+    </div>
+  )
+}
+
+export default TecnoCoin
diff --git a/components/style-guide/sections/AboutUs.js b/components/style-guide/sections/AboutUs.js
index dd1aaf2..a68e7f5 100644
--- a/components/style-guide/sections/AboutUs.js
+++ b/components/style-guide/sections/AboutUs.js
@@ -4,10 +4,9 @@ const AboutUs = () => {
   return (
     <div className="relative w-screen h-screen overflow-y-hidden bg-black flex flex-col items-center justify-center">
       <div className="w-4/5 md:w-[60vw] text-center">
-        <div className="w-full text-center text-white text-lg md:text-[3rem] tracking-wider font-light font-lemonMilk mb-8">
+        <div className="w-full text-center text-white text-lg md:text-[3rem] tracking-wider font-light font-lemonMilk mb-16">
           ABOUT US
         </div>
-
         <div className="text-offWhite w-full mx-auto text-sm md:text-xl uppercase text-center leading-10 mb-[1.5rem]">
           TECNOESIS is the annual techno-management Festival of NIT Silchar.
           Started with the aim of providing a platform for the student community
@@ -20,7 +19,7 @@ const AboutUs = () => {
           target="_blank"
           rel="noreferrer"
         >
-          <button className=" uppercase text-sm md:ext-[1.25rem] border border-white p-[1rem] hover:bg-white hover:text-black text-white hover:font-semibold transition-all">
+          <button className=" uppercase text-sm md:ext-[1.25rem] border border-white p-[1rem] hover:bg-white text-white hover:text-black hover:font-semibold transition-all">
             Download Brochure
           </button>
         </a>
diff --git a/components/style-guide/sections/Header.jsx b/components/style-guide/sections/Header.jsx
index f759e51..b88be9a 100644
--- a/components/style-guide/sections/Header.jsx
+++ b/components/style-guide/sections/Header.jsx
@@ -4,21 +4,25 @@ import Image from 'next/dist/client/image'
 import LogoPng from '../../../public/assests/landingPage/tecnoesis.png'
 
 function Header() {
-  const [offsetY, setOffsetY] = useState(0);
+  const [offsetY, setOffsetY] = useState(0)
   const handleScroll = () => {
     setOffsetY(window.pageYOffset)
   }
   useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
+    window.addEventListener('scroll', handleScroll)
 
-    return () => { window.removeEventListener('scroll', handleScroll) };
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
   }, [])
   return (
-
     <div className="block">
       <h1
         className="flex justify-center items-center font-roadRage text-4xl drop-shadow-[30px_30px_50px_50px_#FFFFFF]"
-        style={{ filter: 'drop-shadow(0px 4px 20px rgba(78, 223, 255, 0.5))', transform: `translateY(${offsetY*0.2}px)` }}
+        style={{
+          filter: 'drop-shadow(0px 4px 20px rgba(78, 223, 255, 0.5))',
+          transform: `translateY(${offsetY * 0.2}px)`,
+        }}
       >
         Coming Soon
       </h1>
@@ -63,7 +67,6 @@ function Header() {
       <h1 className="text-center text-2xl md:text-4xl font-lemonMilk my-2">
         October
       </h1>
-
     </div>
   )
 }
diff --git a/components/style-guide/sections/Parallax.jsx b/components/style-guide/sections/Parallax.jsx
index 82e3d6d..e171e62 100644
--- a/components/style-guide/sections/Parallax.jsx
+++ b/components/style-guide/sections/Parallax.jsx
@@ -7,35 +7,32 @@ import Header from './Header'
 import Socials from './Socials'
 
 function Parallax() {
-  const [offsetY, setOffsetY] = useState(0);
+  const [offsetY, setOffsetY] = useState(0)
   const handleScroll = () => {
     setOffsetY(window.pageYOffset)
   }
   useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
+    window.addEventListener('scroll', handleScroll)
 
-    return () => { window.removeEventListener('scroll', handleScroll) };
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
   }, [])
   return (
+    <div className="relative h-screen w-screen overflow-y-hidden bg-black">
+      <div className="bg-black bg-opacity-30 z-20  absolute inset-0"></div>
 
-
-    <div
-      className="relative h-screen w-screen overflow-y-hidden bg-black">
-        <div className='bg-black bg-opacity-30 z-20  absolute inset-0'>
-
-        </div>
       <div className="absolute top-[15vh] w-full z-20 text-white">
         <Header />
       </div>
-      <div className='absolute hidden md:block   md:top-48 right-8  md:left-8 z-40'>
-
-
+      <div className="absolute hidden md:block   md:top-48 right-8  md:left-8 z-40">
         <Socials />
       </div>
 
-
-      <div className="absolute relative w-screen h-screen top-0 left-0" style={{transform: `translateY(${offsetY*0.5}px)`}}>
-
+      <div
+        className="absolute relative w-screen h-screen top-0 left-0"
+        style={{ transform: `translateY(${offsetY * 0.5}px)` }}
+      >
         <Image src={BGFIRST} layout="fill" objectFit="cover" />
       </div>
       <div className="absolute relative z-10 w-screen -top-[42vh] left-0 h-[80vh] hidden md:block">
diff --git a/package-lock.json b/package-lock.json
index 34d7258..7e2a744 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,9 @@
         "next": "12.2.4",
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "react-scroll-parallax": "^3.3.0"
+        "react-icons": "^4.4.0",
+        "react-scroll-parallax": "^3.3.0",
+        "sass": "^1.54.7"
       },
       "devDependencies": {
         "autoprefixer": "^10.4.8",
@@ -622,7 +624,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
       "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -789,7 +790,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -808,7 +808,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -910,7 +909,6 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -937,7 +935,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -1798,7 +1795,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -1864,7 +1860,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -2094,6 +2089,11 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2165,7 +2165,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -2232,7 +2231,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2241,7 +2239,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -2265,7 +2262,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -2644,7 +2640,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2911,7 +2906,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -3153,6 +3147,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -3186,7 +3188,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -3303,6 +3304,22 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/sass": {
+      "version": "1.54.7",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.7.tgz",
+      "integrity": "sha512-3q7MQz7sCpVG6TLhUfZwGOcd2/sm2ghYN2JEdRjNiW04ILdvahdo9GuAs+bxsxZ3hDCKv+wUT5w0iFWGU0CxlA==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -3551,7 +3568,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -4131,7 +4147,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
       "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-      "dev": true,
       "requires": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -4248,8 +4263,7 @@
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -4265,7 +4279,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "requires": {
         "fill-range": "^7.0.1"
       }
@@ -4323,7 +4336,6 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
       "requires": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -4339,7 +4351,6 @@
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
           "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-          "dev": true,
           "requires": {
             "is-glob": "^4.0.1"
           }
@@ -5006,7 +5017,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "requires": {
         "to-regex-range": "^5.0.1"
       }
@@ -5053,7 +5063,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "optional": true
     },
     "function-bind": {
@@ -5210,6 +5219,11 @@
       "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
       "dev": true
     },
+    "immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -5266,7 +5280,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -5308,14 +5321,12 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
     },
     "is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
@@ -5329,8 +5340,7 @@
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
     },
     "is-number-object": {
       "version": "1.0.7",
@@ -5596,8 +5606,7 @@
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
     },
     "normalize-range": {
       "version": "0.1.2",
@@ -5785,8 +5794,7 @@
     "picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
     },
     "pify": {
       "version": "2.3.0",
@@ -5917,6 +5925,12 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "requires": {}
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -5943,7 +5957,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "requires": {
         "picomatch": "^2.2.1"
       }
@@ -6012,6 +6025,16 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "sass": {
+      "version": "1.54.7",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.7.tgz",
+      "integrity": "sha512-3q7MQz7sCpVG6TLhUfZwGOcd2/sm2ghYN2JEdRjNiW04ILdvahdo9GuAs+bxsxZ3hDCKv+wUT5w0iFWGU0CxlA==",
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -6186,7 +6209,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "requires": {
         "is-number": "^7.0.0"
       }
diff --git a/package.json b/package.json
index bbb1a62..8adf9fc 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,9 @@
     "next": "12.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-scroll-parallax": "^3.3.0"
+    "react-icons": "^4.4.0",
+    "react-scroll-parallax": "^3.3.0",
+    "sass": "^1.54.7"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.8",
diff --git a/pages/404.js b/pages/404.js
index 6fedfe6..1a024f6 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -4,32 +4,28 @@ import ErrorImage from '../public/assests/Error404/404.png'
 import LogoPng from '../public/assests/landingPage/tecnoesis.png'
 function ErrorNotFoundPage() {
   return (
-
-    <div className='relative'>
-
-      <div className="w-screen h-screen flex justify-center items-center bg-404bg" id="bgerror">
-
-
-
+    <div className="relative">
+      <div
+        className="w-screen h-screen flex justify-center items-center bg-404bg"
+        id="bgerror"
+      >
         <div className="w-full md:w-[60%] h-auto" id="error">
           <Image src={ErrorImage} />
         </div>
-
-        
       </div>
       <div className="absolute bottom-6 left-0 right-0 flex flex-col md:flex-row justify-center items-center">
-          <div className="w-[100px] h-[100px] md:w-[100px] md:h-[100px] md:mb-4 relative">
-            <Image src={LogoPng} />
-          </div>
-          <h1
-            className="text-white flex justify-center items-center font-lemonMilk text-[2.5rem] md:text-[3.5rem] mt-6 tracking-widest  drop-shadow-[30px_30px_50px_50px_#FFFFFF]"
-            style={{
-              filter: 'drop-shadow(2px 8px 20px rgba(78, 223, 255, 0.5))',
-            }}
-          >
-            TECNOESIS
-          </h1>
+        <div className="w-[100px] h-[100px] md:w-[100px] md:h-[100px] md:mb-4 relative">
+          <Image src={LogoPng} />
         </div>
+        <h1
+          className="text-white flex justify-center items-center font-lemonMilk text-[2.5rem] md:text-[3.5rem] mt-6 tracking-widest  drop-shadow-[30px_30px_50px_50px_#FFFFFF]"
+          style={{
+            filter: 'drop-shadow(2px 8px 20px rgba(78, 223, 255, 0.5))',
+          }}
+        >
+          TECNOESIS
+        </h1>
+      </div>
     </div>
   )
 }
diff --git a/pages/_app.js b/pages/_app.js
index ada82b5..3a2a61e 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,15 +1,9 @@
 import '../styles/globals.css'
 
-
-
 function MyApp({ Component, pageProps }) {
   return (
     <div>
-
-
-      
       <Component {...pageProps} />
-
     </div>
   )
 }
diff --git a/pages/index.js b/pages/index.js
index 9da7cd7..3e633b3 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -13,8 +13,6 @@ import {
 } from '@fortawesome/free-brands-svg-icons'
 library.add(faFacebook, faLinkedin, faTwitter, faInstagram)
 
-
-
 export default function Home() {
   return (
     <>
diff --git a/pages/modules.js b/pages/modules.js
new file mode 100644
index 0000000..c3175e0
--- /dev/null
+++ b/pages/modules.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import Modal from '../components/sections/Modules/Modal'
+import Sidebar from '../components/sections/Sidebar/Sidebar'
+
+const Modules = () => {
+  return (
+    <div className="relative">
+      {/* <Sidebar /> */}
+      <Modal/>
+
+
+
+    </div>
+  )
+}
+
+export default Modules
diff --git a/pages/profile.js b/pages/profile.js
new file mode 100644
index 0000000..d986634
--- /dev/null
+++ b/pages/profile.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import Avatar from '../components/sections/Avatar'
+
+const Profile = () => {
+  return (
+    <div>
+      <Avatar />
+    </div>
+  )
+}
+
+export default Profile
diff --git a/pages/profile/[id].js b/pages/profile/[id].js
new file mode 100644
index 0000000..d322e39
--- /dev/null
+++ b/pages/profile/[id].js
@@ -0,0 +1,14 @@
+import React from 'react'
+
+function UserProfile() {
+  return (
+    <div>UserProfile</div>
+  )
+}
+
+export default UserProfile
+
+
+export const getServerSideProps = async ({params}) =>{
+
+}
\ No newline at end of file
diff --git a/public/assests/modal/heroimg.png b/public/assests/modal/heroimg.png
new file mode 100644
index 0000000..ca0e522
Binary files /dev/null and b/public/assests/modal/heroimg.png differ
diff --git a/public/assests/modal/heromob.png b/public/assests/modal/heromob.png
new file mode 100644
index 0000000..549a028
Binary files /dev/null and b/public/assests/modal/heromob.png differ
diff --git a/public/assests/modal/modalbg.png b/public/assests/modal/modalbg.png
new file mode 100644
index 0000000..4ebce5e
Binary files /dev/null and b/public/assests/modal/modalbg.png differ
diff --git a/public/assests/modal/module-phn-view.png b/public/assests/modal/module-phn-view.png
new file mode 100644
index 0000000..7703bae
Binary files /dev/null and b/public/assests/modal/module-phn-view.png differ
diff --git a/public/assests/profile/demo.png b/public/assests/profile/demo.png
new file mode 100644
index 0000000..c6d8ee2
Binary files /dev/null and b/public/assests/profile/demo.png differ
diff --git a/public/assests/profile/profileBg.png b/public/assests/profile/profileBg.png
new file mode 100644
index 0000000..bea2b5f
Binary files /dev/null and b/public/assests/profile/profileBg.png differ
diff --git a/style-guide/utils/Icons/TecnoCoins.svg b/style-guide/utils/Icons/TecnoCoins.svg
new file mode 100644
index 0000000..f470bfc
--- /dev/null
+++ b/style-guide/utils/Icons/TecnoCoins.svg
@@ -0,0 +1,16 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<circle cx="30" cy="30" r="30" fill="url(#paint0_radial_520_1251)"/>
+<circle cx="30.345" cy="30.3448" r="24.1379" fill="#FDE300"/>
+<circle cx="30.3455" cy="30.3448" r="19.3103" fill="#FCA700"/>
+<rect x="20.6895" y="22.069" width="21.4093" height="28.9655" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_520_1251" transform="translate(0 -0.00507244) scale(0.00833333 0.00615942)"/>
+</pattern>
+<radialGradient id="paint0_radial_520_1251" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(30 30) rotate(90) scale(30)">
+<stop offset="0.357292" stop-color="#FDE300"/>
+<stop offset="1" stop-color="#FDE300" stop-opacity="0"/>
+</radialGradient>
+<image id="image0_520_1251" width="120" height="164" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
diff --git a/style-guide/utils/icons.js b/style-guide/utils/icons.js
new file mode 100644
index 0000000..959f43b
--- /dev/null
+++ b/style-guide/utils/icons.js
@@ -0,0 +1,95 @@
+export const icons = {
+  eventsIcon: (
+    <svg
+      width="60"
+      height="60"
+      viewBox="0 0 60 60"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="30" cy="30" r="30" fill="url(#paint0_radial_520_1256)" />
+      <circle cx="30.3445" cy="30.3448" r="24.1379" fill="#FD566D" />
+      <circle cx="30.345" cy="30.3448" r="19.3103" fill="#D62E46" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M34.7071 27.7071C35.0976 27.3166 35.0976 26.6834 34.7071 26.2929C34.3166 25.9024 33.6834 25.9024 33.2929 26.2929L29 30.5858L27.2071 28.7929C26.8166 28.4024 26.1834 28.4024 25.7929 28.7929C25.4024 29.1834 25.4024 29.8166 25.7929 30.2071L28.2929 32.7071C28.6834 33.0976 29.3166 33.0976 29.7071 32.7071L34.7071 27.7071Z"
+        fill="#FD566D"
+      />
+      <path
+        d="M19 30C19 32.4477 19.1325 34.3463 19.4615 35.827C19.7881 37.2963 20.2948 38.2921 21.0014 38.9986C21.7079 39.7052 22.7037 40.2119 24.173 40.5385C25.6537 40.8675 27.5523 41 30 41C32.4477 41 34.3463 40.8675 35.827 40.5385C37.2963 40.2119 38.2921 39.7052 38.9986 38.9986C39.7052 38.2921 40.2119 37.2963 40.5385 35.827C40.8675 34.3463 41 32.4477 41 30C41 27.5523 40.8675 25.6537 40.5385 24.173C40.2119 22.7037 39.7052 21.7079 38.9986 21.0014C38.2921 20.2948 37.2963 19.7881 35.827 19.4615C34.3463 19.1325 32.4477 19 30 19C27.5523 19 25.6537 19.1325 24.173 19.4615C22.7037 19.7881 21.7079 20.2948 21.0014 21.0014C20.2948 21.7079 19.7881 22.7037 19.4615 24.173C19.1325 25.6537 19 27.5523 19 30Z"
+        stroke="#FD566D"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <defs>
+        <radialGradient
+          id="paint0_radial_520_1256"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(30 30) rotate(90) scale(30)"
+        >
+          <stop offset="0.357292" stop-color="#FD566D" />
+          <stop offset="1" stop-color="#FD566D" stop-opacity="0" />
+        </radialGradient>
+      </defs>
+    </svg>
+  ),
+  profile: {
+    camera: (
+      <svg
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4 10.6667C4 11.4 4.6 12 5.33333 12C6.06667 12 6.66667 11.4 6.66667 10.6667V8H9.33333C10.0667 8 10.6667 7.4 10.6667 6.66667C10.6667 5.93334 10.0667 5.33334 9.33333 5.33334H6.66667V2.66667C6.66667 1.93334 6.06667 1.33334 5.33333 1.33334C4.6 1.33334 4 1.93334 4 2.66667V5.33334H1.33333C0.6 5.33334 0 5.93334 0 6.66667C0 7.4 0.6 8 1.33333 8H4V10.6667Z"
+          fill="white"
+        />
+        <path
+          d="M17.333 22.6667C19.5421 22.6667 21.333 20.8758 21.333 18.6667C21.333 16.4575 19.5421 14.6667 17.333 14.6667C15.1239 14.6667 13.333 16.4575 13.333 18.6667C13.333 20.8758 15.1239 22.6667 17.333 22.6667Z"
+          fill="white"
+        />
+        <path
+          d="M28 8H23.7733L22.12 6.2C21.6267 5.65334 20.9067 5.33334 20.16 5.33334H11.6267C11.8533 5.73334 12 6.17334 12 6.66667C12 8.13334 10.8 9.33334 9.33333 9.33334H8V10.6667C8 12.1333 6.8 13.3333 5.33333 13.3333C4.84 13.3333 4.4 13.1867 4 12.96V26.6667C4 28.1333 5.2 29.3333 6.66667 29.3333H28C29.4667 29.3333 30.6667 28.1333 30.6667 26.6667V10.6667C30.6667 9.2 29.4667 8 28 8ZM17.3333 25.3333C13.6533 25.3333 10.6667 22.3467 10.6667 18.6667C10.6667 14.9867 13.6533 12 17.3333 12C21.0133 12 24 14.9867 24 18.6667C24 22.3467 21.0133 25.3333 17.3333 25.3333Z"
+          fill="white"
+        />
+      </svg>
+    ),
+    cusBorder: (
+      <svg
+        width="100%"
+        height="1"
+        viewBox="0 0 100% 1"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <line
+          x1="100%"
+          y1="0.5"
+          y2="0.5"
+          stroke="url(#paint0_linear_609_1699)"
+        />
+        <defs>
+          <linearGradient
+            id="paint0_linear_609_1699"
+            x1="100%"
+            y1="0.500451"
+            x2="4.7222e-05"
+            y2="0.497768"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#C4C4C4" stop-opacity="0.24" />
+            <stop offset="0.513542" stop-color="#C4C4C4" />
+            <stop offset="1" stop-color="#C4C4C4" stop-opacity="0.24" />
+          </linearGradient>
+        </defs>
+      </svg>
+    ),
+  },
+}
diff --git a/styles/globals.css b/styles/globals.css
index cc4cd5d..ae7544f 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -287,4 +287,197 @@ body::-webkit-scrollbar-thumb:hover {
   100%{
     filter: invert(11%);
   }
+}
+
+
+.relative{
+  position: relative;
+}
+
+
+
+
+.justify-start{
+  display: flex;
+  justify-items: start;
+} 
+
+.px-2{
+  padding-left:2rem;
+  padding-right: 2rem;
+}
+
+.py-2{
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.text-3xl{
+  font-size: 4rem;
+  color: #ffffff;
+}
+
+.modal-wrapper{
+
+  display: block;
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  background: url('../public/assests/modal/modalbg.png');
+  /* opacity: 0.5; */
+}
+
+.modal{
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  /* background-color: #040404; */
+  overflow-y: hidden;
+  background-color: rgba(0, 0, 0, 0.4);
+  /* -webkit-backdrop-filter: blur(40px); */
+  backdrop-filter: blur(40px);
+}
+
+.modal .title{
+position: absolute;
+width: 408px;
+height: 29px;
+left: 300px;
+top: 220px;
+
+font-family: 'mokotoGlitch';
+font-style: normal;
+font-weight: 400;
+font-size: 50px;
+line-height: 50px;
+display: flex;
+align-items: center;
+text-align: center;
+text-transform: capitalize;
+
+color: #FFFFFF;
+
+text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
+}
+
+.heropara{
+  position: absolute;
+  width: 587px;
+  height: 236px;
+  left: 233px;
+  top: 357px;
+  
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 24px;
+  /* or 133% */
+  
+  letter-spacing: 0.05em;
+  
+  color: #FFFFFF;
+}
+
+.heroimg{
+  position: absolute;
+  width: 685px;
+  height: 811px;
+  /* left: 755px; */
+  right: 0px;
+  top: 0px;
+  background: linear-gradient(89.69deg, #000000 -25.41%, rgba(0, 0, 0, 0) 102.25%), url(../public/assests/modal/heroimg.png);
+  mask-image: linear-gradient(to left, rgba(0,0,0,1), 92%, rgba(0,0,0,0));
+  backdrop-filter: blur(40px);
+  /* box-shadow: 60px 0 60px 0 black inset; */
+  /* box-shadow: 13px 13px, -1em 0 1.4em black; */
+  /* Note: backdrop-filter has minimal browser support */
+}
+
+/*responsive mobile view*/
+@media screen and (max-width:600px){
+
+  .modal-wrapper {
+    background: url(../public/assests/Modal/module-phn-view.png) #000000;;
+    /* background-repeat: no-repeat; */
+    /* overflow-x: hidden; */
+    position: relative;
+    width: 360px;
+    height: 800px;
+  }
+
+  .modal {
+    position: absolute;
+    width: 366px;
+    height: 800px;
+    left: -6px;
+    top: 0px;
+    background-color: rgba(0, 0, 0, 0.4);
+    -webkit-backdrop-filter: blur(40px);
+    backdrop-filter: blur(40px);
+  }
+
+  .cross{
+  position: absolute;
+  width: 22.02px;
+  height: 22px;
+  left: 1px;
+  top: 1px;
+  }
+
+  .modal .title {
+    position: absolute;
+    width: max-content;
+    height: 29px;
+    left: 35%;
+    top: 480px;
+
+    font-family: 'mokotoGlitch';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 20px;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    text-transform: capitalize;
+
+    color: #FFFFFF;
+  }
+
+  .heropara{
+    position: absolute;
+    width: 302.23px;
+    height: 271px;
+    left: 29.03px;
+    top: 530px;
+
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 24px;
+    /* or 200% */
+
+    text-align: center;
+    letter-spacing: 0.05em;
+
+    color: #FFFFFF;
+  }
+
+
+
+
+  .heroimg {
+    position: absolute;
+    width: 360.27px;
+    height: 517px;
+    left: 0px;
+    top: 0px;
+
+    background: linear-gradient(359.36deg, #000000 4.48%, rgba(0, 0, 0, 0.666513) 39.52%, rgba(0, 0, 0, 0) 99.43%), url(../public/assests/Modal/heromob.png);
+    mask-image: linear-gradient(to bottom, rgba(0,0,0,1), 95%, rgba(0,0,0,0));
+    backdrop-filter: blur(40px);
+  }
 }
\ No newline at end of file
diff --git a/styles/variables.scss b/styles/variables.scss
new file mode 100644
index 0000000..58ae41e
--- /dev/null
+++ b/styles/variables.scss
@@ -0,0 +1,18 @@
+// colors
+
+$bgDark: #120118;
+$bgPrimary: #00132D;
+$fontColor: #FEFFFF;
+$neon1: #4EDFFF;
+$neon2: #D03CAB;
+$offWhite: #E7E7E7;
+
+// font
+
+$lemonMilk: 'lemonMilk';
+$roadRage: 'roadRage';
+$mokotoGlitch: 'mokotoGlitch';
+$babaPro: 'babaPro';
+
+// box Shadow
+$gradient: -3px -3px 8px 4px #D03CAB, 3px 3px 8px 4px #4EDFFF;
diff --git a/tailwind.config.js b/tailwind.config.js
index 6b4a939..59b23ab 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./pages/**/*.{js,jsx}", "./components/**/*.{js,jsx}"],
+  // content: ["./pages/**/*.{js,jsx}", "./components/**/*.{js,jsx}"],
   theme: {
     extend: {