diff --git a/src/app/playground/page.js b/src/app/playground/page.js
index a8015cf5..2562cf4b 100644
--- a/src/app/playground/page.js
+++ b/src/app/playground/page.js
@@ -5,7 +5,7 @@ import { PrimaryButton, SecondaryButton } from '@/components/shared/Typography/B
 import { NavbarLink } from '@/components/shared/Typography/Links';
 import { NavBar } from '@/components/NavBar/Nav';
 
-import { EventCarousalMain } from '@/components/eventsCaraousal/main';
+import { EventCarousalMain } from '@/components/eventsCarousel/layoutComponents/Main';
 
 const Page = () => {
   return (
diff --git a/src/components/NavBar/Nav.jsx b/src/components/NavBar/Nav.jsx
index 117a9549..3afa99a5 100644
--- a/src/components/NavBar/Nav.jsx
+++ b/src/components/NavBar/Nav.jsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import { NavContainer, NavItem } from './styles';
 import { NavData } from '@/config/content/NavData';
-import { NavbarLink } from '@/components/shared/Typography/Links';
-import Link from 'next/link';
 
 export const NavBar = () => {
   return (
diff --git a/src/components/eventsCaraousal/eventCard.jsx b/src/components/eventsCaraousal/eventCard.jsx
deleted file mode 100644
index d6a66fe8..00000000
--- a/src/components/eventsCaraousal/eventCard.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { EventImage } from './image';
-import { ParentEventCardComponent } from './parent';
-import { CarouselButton } from '../shared/Typography/Buttons';
-import { Heading2 } from '../shared/Typography/Headings';
-import { EventCaraouselParagraph } from '../shared/Typography/Paragraphs';
-
-export const EventCard = ({ head, url, desc }) => {
-  return (
-    <>
-      <ParentEventCardComponent>
-        <EventImage imgurl={url} alt={head} />
-        <Heading2>{head}</Heading2>
-        <EventCaraouselParagraph>{desc}</EventCaraouselParagraph>
-        <div className='flex justify-end mt-16'>
-          <CarouselButton>REGISTER</CarouselButton>
-        </div>
-      </ParentEventCardComponent>
-    </>
-  );
-};
diff --git a/src/components/eventsCarousel/eventCardComponents/EventCard.jsx b/src/components/eventsCarousel/eventCardComponents/EventCard.jsx
new file mode 100644
index 00000000..6312063e
--- /dev/null
+++ b/src/components/eventsCarousel/eventCardComponents/EventCard.jsx
@@ -0,0 +1,20 @@
+import { EventImage } from '../utils/Image';
+import { ParentEventCardComponent } from './Parent';
+// import { CarouselButton } from '../../shared/Typography/Buttons';
+
+import { CarouselButton, CarouselHead, CarouselParagraph } from './eventCard.style';
+
+export const EventCard = ({ head, url, desc }) => {
+  return (
+    <>
+      <ParentEventCardComponent>
+        <EventImage imgurl={url} alt={head} />
+        <CarouselHead>{head}</CarouselHead>
+        <CarouselParagraph>{desc}</CarouselParagraph>
+        <div className='flex justify-end mt-16'>
+          <CarouselButton>REGISTER</CarouselButton>
+        </div>
+      </ParentEventCardComponent>
+    </>
+  );
+};
diff --git a/src/components/eventsCaraousal/parent.Style.jsx b/src/components/eventsCarousel/eventCardComponents/Parent.Style.jsx
similarity index 100%
rename from src/components/eventsCaraousal/parent.Style.jsx
rename to src/components/eventsCarousel/eventCardComponents/Parent.Style.jsx
diff --git a/src/components/eventsCaraousal/parent.jsx b/src/components/eventsCarousel/eventCardComponents/Parent.jsx
similarity index 90%
rename from src/components/eventsCaraousal/parent.jsx
rename to src/components/eventsCarousel/eventCardComponents/Parent.jsx
index f5405b47..8fa54ff5 100644
--- a/src/components/eventsCaraousal/parent.jsx
+++ b/src/components/eventsCarousel/eventCardComponents/Parent.jsx
@@ -1,4 +1,4 @@
-import { ChildContainer, GradientOverlay, InnerBackground, StyledParentCard } from './parent.Style';
+import { ChildContainer, GradientOverlay, InnerBackground, StyledParentCard } from './Parent.Style';
 
 export const ParentEventCardComponent = ({ children }) => {
   return (
diff --git a/src/components/eventsCarousel/eventCardComponents/eventCard.style.jsx b/src/components/eventsCarousel/eventCardComponents/eventCard.style.jsx
new file mode 100644
index 00000000..29c67dbb
--- /dev/null
+++ b/src/components/eventsCarousel/eventCardComponents/eventCard.style.jsx
@@ -0,0 +1,17 @@
+import tw from 'twin.macro';
+import styled from 'styled-components';
+import { PrimaryButton } from '@/components/shared/Typography/Buttons';
+import { Heading2 } from '@/components/shared/Typography/Headings';
+import { SmallParagraph } from '@/components/shared/Typography/Paragraphs';
+
+export const CarouselButton = styled(PrimaryButton)`
+  ${tw`w-[125.89px] h-[42.94px] flex justify-center items-center text-black font-share_tech rounded-[7.59px]`}
+`;
+
+export const CarouselHead = styled(Heading2)`
+  ${tw`font-bold `}
+`;
+
+export const CarouselParagraph = styled(SmallParagraph)`
+  ${tw`max-w-[414.1px] h-[76px] font-montserrat text-[rgba(224, 229, 237, 0.75)]  mt-5 text-[12.66px] font-[400] leading-[18.99px] text-left flex text-wrap max-w-[500px]`}
+`;
diff --git a/src/components/eventsCaraousal/main.jsx b/src/components/eventsCarousel/layoutComponents/Main.jsx
similarity index 67%
rename from src/components/eventsCaraousal/main.jsx
rename to src/components/eventsCarousel/layoutComponents/Main.jsx
index 14a52737..82489e30 100644
--- a/src/components/eventsCaraousal/main.jsx
+++ b/src/components/eventsCarousel/layoutComponents/Main.jsx
@@ -1,5 +1,5 @@
-import { Heading1 } from '../shared/Typography/Headings';
-import { SliderEventsWrapper } from './eventWrapper';
+import { Heading1 } from '../../shared/Typography/Headings';
+import { SliderEventsWrapper } from '../wrapperComponents/EventWrapper';
 
 export const EventCarousalMain = () => {
   return (
diff --git a/src/components/eventsCaraousal/image.jsx b/src/components/eventsCarousel/utils/Image.jsx
similarity index 78%
rename from src/components/eventsCaraousal/image.jsx
rename to src/components/eventsCarousel/utils/Image.jsx
index 77bf7400..f9febbd6 100644
--- a/src/components/eventsCaraousal/image.jsx
+++ b/src/components/eventsCarousel/utils/Image.jsx
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import { StyledImageContainer } from './imageContainer.style';
+import { StyledImageContainer } from './ImageContainer.style';
 
 export const EventImage = ({ imgurl, alt }) => {
   return (
diff --git a/src/components/eventsCaraousal/imageContainer.style.jsx b/src/components/eventsCarousel/utils/ImageContainer.style.jsx
similarity index 100%
rename from src/components/eventsCaraousal/imageContainer.style.jsx
rename to src/components/eventsCarousel/utils/ImageContainer.style.jsx
diff --git a/src/components/eventsCaraousal/paginationBullet.jsx b/src/components/eventsCarousel/utils/PaginationBullet.jsx
similarity index 86%
rename from src/components/eventsCaraousal/paginationBullet.jsx
rename to src/components/eventsCarousel/utils/PaginationBullet.jsx
index 00ff8988..0cd92073 100644
--- a/src/components/eventsCaraousal/paginationBullet.jsx
+++ b/src/components/eventsCarousel/utils/PaginationBullet.jsx
@@ -1,6 +1,6 @@
 // import { sliderData } from '@/app/config/content/sliderData';
 
-import { SliderData } from '../../config/content/eventsCarauselData';
+import { SliderData } from '../../../config/content/eventsCarauselData';
 
 export const PaBullets = ({ currentindex }) => {
   return (
diff --git a/src/components/eventsCaraousal/sliderButtons.jsx b/src/components/eventsCarousel/utils/SliderButtons.jsx
similarity index 75%
rename from src/components/eventsCaraousal/sliderButtons.jsx
rename to src/components/eventsCarousel/utils/SliderButtons.jsx
index 1964f512..3ebf16e1 100644
--- a/src/components/eventsCaraousal/sliderButtons.jsx
+++ b/src/components/eventsCarousel/utils/SliderButtons.jsx
@@ -1,5 +1,5 @@
-import { SecondaryButton } from '../shared/Typography/Buttons';
-import { PaBullets } from './paginationBullet';
+import { SecondaryButton } from '../../shared/Typography/Buttons';
+import { PaBullets } from './PaginationBullet';
 
 export const SButtons = ({ fn1, fn2, currentindex }) => {
   return (
diff --git a/src/components/eventsCaraousal/caraouselMapping.jsx b/src/components/eventsCarousel/wrapperComponents/CaraouselMapping.jsx
similarity index 93%
rename from src/components/eventsCaraousal/caraouselMapping.jsx
rename to src/components/eventsCarousel/wrapperComponents/CaraouselMapping.jsx
index e013856b..86db592a 100644
--- a/src/components/eventsCaraousal/caraouselMapping.jsx
+++ b/src/components/eventsCarousel/wrapperComponents/CaraouselMapping.jsx
@@ -1,6 +1,6 @@
 import { SliderData } from '@/config/content/eventsCarauselData';
-import { EventCard } from './eventCard';
-import { motion, useAnimation } from 'framer-motion';
+import { EventCard } from '../eventCardComponents/EventCard';
+import { motion } from 'framer-motion';
 
 export const CarouselMapping = ({ currentIndex }) => {
   return (
@@ -55,7 +55,7 @@ export const CarouselMapping = ({ currentIndex }) => {
             }}
             transition={{
               type: 'tween',
-              duration: 0.5,
+              duration: 0.3,
               ease: [0.42, 0, 0.58, 1],
             }}
           >
diff --git a/src/components/eventsCaraousal/eventWrapper.jsx b/src/components/eventsCarousel/wrapperComponents/EventWrapper.jsx
similarity index 92%
rename from src/components/eventsCaraousal/eventWrapper.jsx
rename to src/components/eventsCarousel/wrapperComponents/EventWrapper.jsx
index 885d50df..c401b027 100644
--- a/src/components/eventsCaraousal/eventWrapper.jsx
+++ b/src/components/eventsCarousel/wrapperComponents/EventWrapper.jsx
@@ -1,16 +1,16 @@
 'use client';
 import { useState, useEffect, useRef } from 'react';
 import { useAnimate } from 'framer-motion';
-import { SButtons } from './sliderButtons';
-import { CarouselMapping } from './caraouselMapping';
+import { SButtons } from '../utils/SliderButtons';
+import { CarouselMapping } from './CaraouselMapping';
 import { SliderData } from '@/config/content/eventsCarauselData';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
 import './swiper.css';
 import 'swiper/css/pagination';
 import { Pagination } from 'swiper/modules';
-import { EventCard } from './eventCard';
-import { SliderContainer, SwiperConatiner, Wrapper } from './eventWrapper.styles';
+import { EventCard } from '../eventCardComponents/EventCard';
+import { SliderContainer, SwiperConatiner, Wrapper } from './EventWrapper.styles';
 
 export const SliderEventsWrapper = () => {
   const [scope, animate] = useAnimate();
diff --git a/src/components/eventsCaraousal/eventWrapper.styles.jsx b/src/components/eventsCarousel/wrapperComponents/EventWrapper.styles.jsx
similarity index 100%
rename from src/components/eventsCaraousal/eventWrapper.styles.jsx
rename to src/components/eventsCarousel/wrapperComponents/EventWrapper.styles.jsx
diff --git a/src/components/eventsCaraousal/swiper.css b/src/components/eventsCarousel/wrapperComponents/swiper.css
similarity index 100%
rename from src/components/eventsCaraousal/swiper.css
rename to src/components/eventsCarousel/wrapperComponents/swiper.css
diff --git a/src/components/shared/Typography/Buttons.jsx b/src/components/shared/Typography/Buttons.jsx
index 36b9c241..f5471178 100644
--- a/src/components/shared/Typography/Buttons.jsx
+++ b/src/components/shared/Typography/Buttons.jsx
@@ -17,7 +17,3 @@ export const SecondaryButton = styled.button`
 
   ${tw`p-4 text-[#fff] text-[16px] rounded-full font-montserrat font-medium cursor-pointer border-[0.9px] border-[#ffffff66] hover:opacity-90 transition-all duration-300 bg-[#ffffff0d]`}
 `;
-
-export const CarouselButton = styled.div`
-  ${tw`flex justify-center items-center text-black font-share_tech bg-[rgba(255,61,127,1)] border-[0.76px] border-[rgba(137,137,137,1)] rounded-[7.59px] w-[125.89px] h-[42.94px] shadow-[inset_0px_2.28px_0.68px_0px_rgba(255,255,255,0.33),0px_3.03px_8.04px_0px_rgba(195,195,195,0.21),0px_0px_0.83px_3.32px_rgba(255,255,255,0.1),0px_10px_149.47px_0px_rgba(255,227,105,0.48),inset_0px_1.66px_0.83px_0px_rgba(255,255,255,0.25),inset_0px_-3.32px_1.66px_0px_rgba(0,0,0,0.25)]`}
-`;
diff --git a/src/components/shared/Typography/Headings.jsx b/src/components/shared/Typography/Headings.jsx
index f9514edc..dec7b7a0 100644
--- a/src/components/shared/Typography/Headings.jsx
+++ b/src/components/shared/Typography/Headings.jsx
@@ -20,7 +20,3 @@ export const SubLogoText = styled.h1`
   -webkit-text-stroke: 2px #ffffffe6;
   text-shadow: none;
 `;
-
-export const EventHead = styled.h2`
-  ${tw`text-[48px] font-orbitron mb-3 font-bold text-[#00FFD1]`}
-`;
diff --git a/src/components/shared/Typography/Paragraphs.jsx b/src/components/shared/Typography/Paragraphs.jsx
index 550f8a43..e1e10183 100644
--- a/src/components/shared/Typography/Paragraphs.jsx
+++ b/src/components/shared/Typography/Paragraphs.jsx
@@ -12,7 +12,3 @@ export const SubParagraph = styled.p`
 export const SmallParagraph = styled.p`
   ${tw`text-[12px] xsm:text-[14px] md:text-[16px] lg:text-[18px] mb-2 text-center text-white font-montserrat font-[400] leading-[150%]`}
 `;
-
-export const EventCaraouselParagraph = styled.p`
-  ${tw`max-w-[414.1px] h-[76px] font-montserrat text-[rgba(224, 229, 237, 0.75)]  mt-5 text-[12.66px] font-[400] leading-[18.99px] text-left flex text-wrap max-w-[500px]`}
-`;