diff --git a/src/App.css b/src/App.css
index 541dd5c..03ad873 100644
--- a/src/App.css
+++ b/src/App.css
@@ -48,3 +48,7 @@ a {
 main {
   margin-top: 2rem;
 }
+
+.slick-arrow {
+  display: none !important;
+}
diff --git a/src/Title.jsx b/src/Title.jsx
new file mode 100644
index 0000000..361afe2
--- /dev/null
+++ b/src/Title.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { styled } from 'styled-components';
+import PropTypes from 'prop-types';
+import { glowingText } from './features/animations/GlowingText';
+
+const Title = ({ title }) => (
+  <TitleWrapper className="text-center">
+    {title}
+  </TitleWrapper>
+);
+
+const TitleWrapper = styled.h3`
+    font-size: 4rem;
+    font-weight: 700;
+    animation: ${glowingText} 3s infinite;
+
+    @media screen and (max-width: 769px) {
+      font-size: 3rem;
+    }
+    @media screen and (max-width: 426px) {
+      font-size: 2rem;
+    }
+`;
+
+Title.propTypes = {
+  title: PropTypes.string.isRequired,
+};
+
+export default Title;
diff --git a/src/features/animations/GlowingText.js b/src/features/animations/GlowingText.js
index 0485912..fedeebf 100644
--- a/src/features/animations/GlowingText.js
+++ b/src/features/animations/GlowingText.js
@@ -1,6 +1,6 @@
 import { keyframes } from 'styled-components';
 
-const glowingAnimation = keyframes`
+export const glowingAnimation = keyframes`
   0% {
     opacity: 1;
     box-shadow: 0 0 10px #ac89f6;
@@ -15,4 +15,27 @@ const glowingAnimation = keyframes`
   }
 `;
 
-export default glowingAnimation;
+export const glowingText = keyframes`
+  0% {
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
+  }
+  50% {
+    text-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
+  }
+  100% {
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
+  }
+
+`;
+
+export const glowingBackground = keyframes`
+  0% {
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
+  }
+  50% {
+    text-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
+  }
+  100% {
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
+  }
+`;
diff --git a/src/features/animations/StyleVars.js b/src/features/animations/StyleVars.js
index 229f959..e1a3d87 100644
--- a/src/features/animations/StyleVars.js
+++ b/src/features/animations/StyleVars.js
@@ -15,3 +15,12 @@ export const greenPinkGradient = `
     background: linear-gradient(90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
     background: -webkit-linear-gradient(-90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
 `;
+
+export const blackGradient = {
+  background:
+    `linear-gradient(
+      to right,
+      #434343,
+      #000
+    )`,
+};
diff --git a/src/features/hero/Social.jsx b/src/features/hero/Social.jsx
index 7f04f83..416b7d2 100644
--- a/src/features/hero/Social.jsx
+++ b/src/features/hero/Social.jsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { styled } from 'styled-components';
-import glowingAnimation from '../animations/GlowingText';
+import { glowingAnimation } from '../animations/GlowingText';
 
 const Social = () => (
   <SocialWrap className="d-flex flex-column gap-4 mt-5">
diff --git a/src/features/nav/Desktop.jsx b/src/features/nav/Desktop.jsx
index 8295856..5691d08 100644
--- a/src/features/nav/Desktop.jsx
+++ b/src/features/nav/Desktop.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { styled } from 'styled-components';
-import glowingAnimation from '../animations/GlowingText';
+import { glowingAnimation } from '../animations/GlowingText';
 
 const Desktop = () => (
   <Wrap>
@@ -15,8 +15,10 @@ const Wrap = styled.ul`
   display: flex;
   width: 60%;
   justify-content: space-around;
+  align-items: center;
   list-style-type:  none;
   font-size: 1.2rem;
+  margin: 0;
   a {
     color: #c3b0ec;
     border-radius: .3rem;
diff --git a/src/features/nav/MobileMenu.jsx b/src/features/nav/MobileMenu.jsx
index cd10e71..a6c36cb 100644
--- a/src/features/nav/MobileMenu.jsx
+++ b/src/features/nav/MobileMenu.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from 'styled-components';
 import logo from '../../media/adarsh-logo.png';
-import glowingAnimation from '../animations/GlowingText';
+import { glowingAnimation } from '../animations/GlowingText';
 
 const MobileMenu = ({ open, onClick }) => (
   <Mobile style={{ width: open ? '100%' : 0, backgroundColor: open ? 'rgba(0,0,0, 0.9)' : 'rgba(0,0,0, 0)' }}>
diff --git a/src/features/nav/Navigation.jsx b/src/features/nav/Navigation.jsx
index 58fb4f2..5f5a5fc 100644
--- a/src/features/nav/Navigation.jsx
+++ b/src/features/nav/Navigation.jsx
@@ -4,11 +4,30 @@ import { Turn as Hamburger } from 'hamburger-react';
 import logo from '../../media/adarsh-logo.png';
 import MobileMenu from './MobileMenu';
 import Desktop from './Desktop';
-import glowingAnimation from '../animations/GlowingText';
+import { glowingAnimation } from '../animations/GlowingText';
+import { blackGradient } from '../animations/StyleVars';
 
 const Navigation = () => {
   const [isOpen, setOpen] = useState(false);
   const [width, setWidth] = useState(window.innerWidth);
+
+  const [scrolled, setScrolled] = useState(false);
+
+  const handleScroll = () => {
+    if (window.scrollY >= window.innerHeight) {
+      setScrolled(true);
+    } else {
+      setScrolled(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
   useEffect(() => {
     function handleResize() {
       setWidth(window.innerWidth);
@@ -17,7 +36,7 @@ const Navigation = () => {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
   return (
-    <NavWrap>
+    <NavWrap style={scrolled ? blackGradient : { background: 'transparent' }}>
       <div className="logo-wrap">
         <img src={logo} alt="logo" />
       </div>
@@ -36,13 +55,14 @@ const Navigation = () => {
 const NavWrap = styled.nav`
   display: flex;
   width: 100%;
+  height: 8vh;
   position: fixed;
   z-index: 9;
   justify-content: space-between;
   align-items: center;
-  padding: 2rem 1rem;
+  padding: 0rem 1rem;
   .logo-wrap {
-    width: 50px;
+    width: 40px;
     display: grid;
     place-items: center;
     img {
diff --git a/src/features/skills/SkillCard.jsx b/src/features/skills/SkillCard.jsx
index 30dfcb0..1ccafaf 100644
--- a/src/features/skills/SkillCard.jsx
+++ b/src/features/skills/SkillCard.jsx
@@ -1,25 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { styled } from 'styled-components';
+import { violetGradient } from '../animations/StyleVars';
 
 const SkillCard = ({
-  image, title, details, features,
-}) => {
-  const anything = 'helot bc';
-  return (
-    <div style={{ width: 'inherit' }}>
-      <img src={image} alt={title} />
-      <h1>{details}</h1>
-      <h1>{features}</h1>
-      <h1>{anything}</h1>
+  image, title, details,
+}) => (
+  <CardWrapper className="card gap-5 mx-auto rounded" style={{ width: '320px', height: '470px' }}>
+    <h5 className="card-header">{title}</h5>
+    <img src={image} className="card-img-top mx-auto" alt={title} />
+    <div className="card-body h-25">
+      <p className="card-text">{details}</p>
     </div>
-  );
-};
+  </CardWrapper>
+);
+
+const CardWrapper = styled.div`
+  ${violetGradient}
+  img {
+    width: 50%;
+    height: 140px;
+  }
+`;
 
 SkillCard.propTypes = {
   image: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   details: PropTypes.string.isRequired,
-  features: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
 export default SkillCard;
diff --git a/src/features/skills/Slider.jsx b/src/features/skills/Slider.jsx
index a536950..c2b0286 100644
--- a/src/features/skills/Slider.jsx
+++ b/src/features/skills/Slider.jsx
@@ -1,21 +1,27 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Slider from 'react-slick';
-import data from './data';
+import { styled } from 'styled-components';
+import { data, techLogos } from './data';
 import SkillCard from './SkillCard';
+import Title from '../../Title';
+import { violetGradient } from '../animations/StyleVars';
+import { glowingText } from '../animations/GlowingText';
 
 const SkillSlider = () => {
+  const [isOpen, setOpen] = useState(false);
   const settings = {
-    dots: true,
-    infinite: false,
+    dots: false,
+    infinite: true,
     speed: 500,
-    slidesToShow: 4,
-    slidesToScroll: 4,
+    slidesToShow: 3,
+    slidesToScroll: 3,
     initialSlide: 0,
+    autoplay: true,
     responsive: [
       {
         breakpoint: 1024,
         settings: {
-          slidesToShow: 3,
+          slidesToShow: 2,
           slidesToScroll: 3,
           infinite: true,
           dots: true,
@@ -38,40 +44,84 @@ const SkillSlider = () => {
       },
     ],
   };
+
+  const handleOpen = () => {
+    setOpen(() => !isOpen);
+  };
   return (
-    <div className="mx-auto" style={{ maxWidth: '1200px' }}>
-      <h2> Responsive </h2>
-      <Slider {...settings}>
+    <SliderWrapper className="mx-auto">
+      <Title title="Tech and Tool" />
+      <Slider {...settings} className="slider">
         {data.map((card) => (
           <SkillCard key={card.id} {...card} />
         ))}
-        <div>
-          <h3>1</h3>
-        </div>
-        <div>
-          <h3>2</h3>
-        </div>
-        <div>
-          <h3>3</h3>
-        </div>
-        <div>
-          <h3>4</h3>
-        </div>
-        <div>
-          <h3>5</h3>
-        </div>
-        <div>
-          <h3>6</h3>
-        </div>
-        <div>
-          <h3>7</h3>
-        </div>
-        <div>
-          <h3>8</h3>
-        </div>
       </Slider>
-    </div>
+      <div className="accordion bg-transparent accordion-flush" id="accordionFlushExample">
+        <div className="accordion-item bg-transparent">
+          <div id="flush-collapseOne" className="accordion-collapse bg-transparent collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
+            <div className="accordion-body bg-transparent">
+              <div className="mx-auto" style={{ maxWidth: '1200px' }}>
+                <div className="header card-header mt-5">
+                  <h3>Tech Tools Framework</h3>
+                </div>
+                <div className="card logo-wrapper">
+                  {techLogos.map((logo) => (
+                    <div key={logo.id} className="card logo">
+                      <img src={logo.image} alt={logo.title} className="card-img-top" />
+                      <small className="text-center">{logo.title}</small>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+          <h2 className="accordion-header text-center mt-3 fs-1 bg-transparent" id="flush-headingOne">
+            <button className="badge text-light fs-3 bg-transparent text-center collapsed" onClick={handleOpen} type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
+              {isOpen ? 'Collapse 💀' : 'See More 🚀'}
+            </button>
+          </h2>
+        </div>
+      </div>
+    </SliderWrapper>
   );
 };
 
+const SliderWrapper = styled.section`
+  max-width: 1200px;
+  margin: 6rem 0 3rem 0;
+  .slider {
+    margin-top: 1rem;
+  }
+
+  .header {
+    padding: 0 !important;
+  }
+
+  .accordion {
+    background-color: transparent;
+  }
+
+  button {
+    border-color: transparent !important;
+    animation: ${glowingText} 2s infinite;
+  }
+
+  .logo-wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    gap: 1rem;
+    background: transparent;
+  }
+
+  .logo {
+    img {
+      width: 100px;
+      height: 100px;
+    }
+    ${violetGradient}
+  }
+`;
+
 export default SkillSlider;
diff --git a/src/features/skills/data.js b/src/features/skills/data.js
index b0d7e0b..1327f4e 100644
--- a/src/features/skills/data.js
+++ b/src/features/skills/data.js
@@ -1,21 +1,38 @@
-const data = [
+import bootstrap from '../../media/tech-logo/bootstrap.png';
+import css from '../../media/tech-logo/css.png';
+import figma from '../../media/tech-logo/figma.png';
+import github from '../../media/tech-logo/github.png';
+import html from '../../media/tech-logo/html.png';
+import js from '../../media/tech-logo/js.png';
+import mentor from '../../media/tech-logo/mentor.png';
+import psql from '../../media/tech-logo/psql.png';
+import python from '../../media/tech-logo/python.png';
+import r from '../../media/tech-logo/r.png';
+import rails from '../../media/tech-logo/rails.png';
+import react from '../../media/tech-logo/react.png';
+import ruby from '../../media/tech-logo/ruby.png';
+import redux from '../../media/tech-logo/redux.png';
+import sass from '../../media/tech-logo/sass.png';
+import vscode from '../../media/tech-logo/vscode.png';
+
+export const data = [
   {
     id: 1,
-    image: '../../media/tech-logo/js.png',
+    image: js,
     title: 'JavaScript',
     details: 'JavaScript is a high-level programming language commonly used for web development. It allows you to create dynamic and interactive web pages. It is widely supported by all major browsers and can be used for both front-end and back-end development.',
     features: [
       'Event handling',
       'DOM manipulation',
-      'Asynchronous programming with Promises and async/await',
-      'Building Single Page Applications (SPAs) using libraries like React and Angular',
+      'Asynchronous with Promises',
+      'Building Single Page Applications',
     ],
   },
   {
     id: 2,
-    image: '../../media/tech-logo/Sass.png',
-    title: 'Sass (Syntactically Awesome Style Sheets)',
-    details: 'Sass is a CSS preprocessor that extends the capabilities of CSS with variables, nesting, and other programming constructs. It simplifies the process of styling web pages and allows for easier code organization.',
+    image: sass,
+    title: 'Sass',
+    details: 'Sass is a CSS preprocessor that extends the capabilities of CSS with variables, nesting, and other programming constructs. It simplifies the process of styling web pages and allows for easier code organization with mixins, inheritance and many more features.',
     features: [
       'Variables',
       'Mixins',
@@ -25,9 +42,9 @@ const data = [
   },
   {
     id: 3,
-    image: '../../media/tech-logo/ruby.png',
+    image: ruby,
     title: 'Ruby',
-    details: 'Ruby is a dynamic, object-oriented programming language known for its simplicity and productivity. It is often used for web development, particularly with the Ruby on Rails framework.',
+    details: 'Ruby is a dynamic, object-oriented programming language known for its simplicity and productivity. It is often used for web development, Ruby is great for building desktop applications, static websites, data processing services, and even automation tools.',
     features: [
       'Easy-to-read syntax',
       'Object-oriented design',
@@ -37,40 +54,121 @@ const data = [
   },
   {
     id: 4,
-    image: '../../media/tech-logo/rails.png',
+    image: rails,
     title: 'Ruby on Rails',
     details: 'Ruby on Rails (often called Rails) is a popular web application framework built on Ruby. It follows the Model-View-Controller (MVC) pattern and emphasizes convention over configuration, making it quick to develop web applications.',
     features: [
       'MVC architecture',
       'Automatic code generation',
       'RESTful routing',
-      'Large ecosystem of gems for extending functionality',
+      'Large ecosystem of gems',
     ],
   },
   {
     id: 5,
-    image: '../../media/tech-logo/react.png',
+    image: react,
     title: 'React',
-    details: 'React is a JavaScript library used for building user interfaces and UI components. It is maintained by Facebook and provides a declarative approach to creating interactive UIs.',
+    details: 'React is a JavaScript library used for building user interfaces and User Interface(UI) components. It is maintained by Facebook and provides a declarative approach to creating interactive User Interfaces with the help of Virtual DOM for efficient Rendering.',
     features: [
       'Component-based architecture',
-      'Virtual DOM for efficient rendering',
+      'Virtual DOM efficient rendering',
       'One-way data flow',
-      'Rich ecosystem with various libraries and tools',
+      'various libraries and tools',
     ],
   },
   {
     id: 6,
-    image: '../../media/tech-logo/redux.png',
+    image: redux,
     title: 'Redux',
-    details: 'Redux is a predictable state management library for JavaScript applications, especially those built with React. It helps manage application state in a centralized store and facilitates predictable updates.',
+    details: 'Redux is a predictable state management library for JavaScript applications, especially those built with React. It helps manage application state in a centralized store and facilitates predictable updates along with Time Travel Debugging.',
     features: [
       'Centralized state management',
-      'Actions and reducers for state manipulation',
+      'State manipulation',
       'Time-travel debugging',
-      'Middleware support for additional functionality',
+      'Enhance React',
     ],
   },
 ];
 
-export default data;
+export const techLogos = [
+  {
+    id: 1,
+    image: html,
+    title: 'HTML',
+  },
+  {
+    id: 2,
+    image: css,
+    title: 'CSS',
+  },
+  {
+    id: 3,
+    image: sass,
+    title: 'SASS',
+  },
+  {
+    id: 4,
+    image: js,
+    title: 'JavaScript',
+  },
+  {
+    id: 5,
+    image: react,
+    title: 'React',
+  },
+  {
+    id: 6,
+    image: redux,
+    title: 'Redux',
+  },
+  {
+    id: 7,
+    image: bootstrap,
+    title: 'Bootstrap',
+  },
+  {
+    id: 8,
+    image: ruby,
+    title: 'Ruby',
+  },
+  {
+    id: 9,
+    image: rails,
+    title: 'Rails',
+  },
+  {
+    id: 10,
+    image: psql,
+    title: 'PostgreSQL',
+  },
+  {
+    id: 11,
+    image: python,
+    title: 'Python',
+  },
+  {
+    id: 12,
+    image: r,
+    title: 'R-Software',
+  },
+  {
+    id: 13,
+    image: github,
+    title: 'GitHub',
+  },
+  {
+    id: 14,
+    image: figma,
+    title: 'Figma',
+  },
+  {
+    id: 15,
+    image: mentor,
+    title: 'Mentor',
+  },
+  {
+    id: 16,
+    image: vscode,
+    title: 'Vs-Code',
+  },
+];
diff --git a/src/index.txt b/src/index.txt
index 969ab49..16e2a4c 100644
--- a/src/index.txt
+++ b/src/index.txt
@@ -7,22 +7,7 @@
   display: block;
 }
 
-.black-gradient {
-  background: #000; 
-  background:
-    -webkit-linear-gradient(
-      to right,
-      #434343,
-      #000
-    ); /* Chrome 10-25, Safari 5.1-6 */
-
-  background:
-    linear-gradient(
-      to right,
-      #434343,
-      #000
-    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-}
+.black-gradient 
 
 .violet-gradient {
   background: #804dee;
diff --git a/src/media/tech-logo/bootstrap.png b/src/media/tech-logo/bootstrap.png
new file mode 100644
index 0000000..7cae17f
Binary files /dev/null and b/src/media/tech-logo/bootstrap.png differ
diff --git a/src/media/tech-logo/css.png b/src/media/tech-logo/css.png
new file mode 100644
index 0000000..a37e16e
Binary files /dev/null and b/src/media/tech-logo/css.png differ
diff --git a/src/media/tech-logo/figma.png b/src/media/tech-logo/figma.png
new file mode 100644
index 0000000..ed25b36
Binary files /dev/null and b/src/media/tech-logo/figma.png differ
diff --git a/src/media/tech-logo/github.png b/src/media/tech-logo/github.png
new file mode 100644
index 0000000..fac8ff1
Binary files /dev/null and b/src/media/tech-logo/github.png differ
diff --git a/src/media/tech-logo/html.png b/src/media/tech-logo/html.png
new file mode 100644
index 0000000..81d1fcb
Binary files /dev/null and b/src/media/tech-logo/html.png differ
diff --git a/src/media/tech-logo/mentor.png b/src/media/tech-logo/mentor.png
new file mode 100644
index 0000000..3dafc04
Binary files /dev/null and b/src/media/tech-logo/mentor.png differ
diff --git a/src/media/tech-logo/python.png b/src/media/tech-logo/python.png
new file mode 100644
index 0000000..52648f6
Binary files /dev/null and b/src/media/tech-logo/python.png differ
diff --git a/src/media/tech-logo/r.png b/src/media/tech-logo/r.png
new file mode 100644
index 0000000..06c1eef
Binary files /dev/null and b/src/media/tech-logo/r.png differ
diff --git a/src/media/tech-logo/sass.png b/src/media/tech-logo/sass.png
new file mode 100644
index 0000000..587a811
Binary files /dev/null and b/src/media/tech-logo/sass.png differ
diff --git a/src/media/tech-logo/vscode.png b/src/media/tech-logo/vscode.png
new file mode 100644
index 0000000..00556e9
Binary files /dev/null and b/src/media/tech-logo/vscode.png differ