diff --git a/src/pages/auth/HomePage.jsx b/src/pages/auth/HomePage.jsx
index 182fa91..c03d877 100644
--- a/src/pages/auth/HomePage.jsx
+++ b/src/pages/auth/HomePage.jsx
@@ -1,16 +1,19 @@
-import React, { useContext, useEffect, useState } from "react";
-import { Carousel, Col, Container, Row } from "react-bootstrap";
+import React, { useContext } from "react";
+import { Col, Container, Row } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import { TemplateContext } from "../../context/TemplateContext";
 import { Pattern3Default } from "../../components/common/CustomPatterns";
+import "./home.css"
+
 const HomePage = () => {
+  const [templates] = useContext(TemplateContext);
   return (
     <React.Fragment>
       <section className="wrapper">
         <div className="section section-hero section-shaped">
           <Pattern3Default />
           <div className="page-header">
-            <Container className="shape-container d-flex align-items-center py-lg">
+            <Container className="shape-container d-flex align-items-center py-lg" style={{justifyContent:"center"}}>
               <div className="col px-0">
                 <Row className="align-items-center justify-content-center">
                   <Col lg={6} className="text-center">
@@ -49,7 +52,7 @@ const HomePage = () => {
             </svg>
           </div>
         </div>
-        <div className="section features-1">
+        <div className="section features-1  new-shape">
           <Container>
             <Row>
               <Col md={8} className="mx-auto text-center">
@@ -60,7 +63,23 @@ const HomePage = () => {
                 <p className="lead">I am still working on it</p>
               </Col>
             </Row>
-            <TemplateCarousel />
+            {/* <TemplateCarousel /> */}
+            <div className="card-container">
+              <input type="radio" name="slider" id="item-1" checked />
+              <input type="radio" name="slider" id="item-2" />
+              <input type="radio" name="slider" id="item-3" />
+              <div className="cards">
+                <label className="card" htmlFor="item-1" id="song-1">
+                  <img src={templates[0].img} alt="template" />
+                </label>
+                <label className="card" htmlFor="item-2" id="song-2">
+                  <img src={templates[1].img} alt="template" />
+                </label>
+                <label className="card" htmlFor="item-3" id="song-3">
+                  <img src={templates[2].img} alt="template" />
+                </label>
+              </div>
+            </div>
           </Container>
         </div>
         <br />
@@ -72,31 +91,31 @@ const HomePage = () => {
 
 export default HomePage;
 
-const TemplateCarousel = () => {
-  const [templates] = useContext(TemplateContext);
-  const [index, setIndex] = useState(0);
+// const TemplateCarousel = () => {
+//   const [templates] = useContext(TemplateContext);
+//   const [index, setIndex] = useState(0);
 
-  const handleSelect = (selectedIndex) => {
-    setIndex(selectedIndex);
-  };
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setIndex((prevIndex) => (prevIndex + 1) % templates.length);
-    }, 5000);
-    return () => clearInterval(interval);
-  }, [index]);
+//   const handleSelect = (selectedIndex) => {
+//     setIndex(selectedIndex);
+//   };
+//   useEffect(() => {
+//     const interval = setInterval(() => {
+//       setIndex((prevIndex) => (prevIndex + 1) % templates.length);
+//     }, 5000);
+//     return () => clearInterval(interval);
+//   }, [index]);
 
-  return (
-    <Carousel activeIndex={index} onSelect={handleSelect} interval={null}>
-      {templates.map((template, index) => (
-        <Carousel.Item key={index}>
-          <img className="d-block w-100" src={template.img} alt="...." />
-          <Carousel.Caption>
-            <h3 className="text-white">{template.title}</h3>
-            <p className="text-light">{template.caption} </p>
-          </Carousel.Caption>
-        </Carousel.Item>
-      ))}
-    </Carousel>
-  );
-};
+//   return (
+//     <Carousel activeIndex={index} onSelect={handleSelect} interval={null}>
+//       {templates.map((template, index) => (
+//         <Carousel.Item key={index}>
+//           <img className="d-block w-100" src={template.img} alt="...." />
+//           <Carousel.Caption>
+//             <h3 className="text-white">{template.title}</h3>
+//             <p className="text-light">{template.caption} </p>
+//           </Carousel.Caption>
+//         </Carousel.Item>
+//       ))}
+//     </Carousel>
+//   );
+// };
diff --git a/src/pages/auth/home.css b/src/pages/auth/home.css
new file mode 100644
index 0000000..50fa267
--- /dev/null
+++ b/src/pages/auth/home.css
@@ -0,0 +1,193 @@
+@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");
+
+* {
+  box-sizing: border-box;
+}
+
+/* html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+*/
+.new-shape {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 30px 10px;
+  font-family: 'DM Sans', sans-serif;
+  height: 100vh;
+} 
+
+input[type=radio] {
+  display: none;
+}
+
+.card {
+  position: absolute;
+  width: 60%;
+  height: 100%;
+  left: 0;
+  right: 0;
+  margin: auto;
+  transition: transform .4s ease;
+  cursor: pointer;
+  overflow: hidden;
+
+}
+
+.card-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+ flex-direction: column;
+  width: 100%;
+  max-width: 800px;
+  max-height: 600px;
+  height: 100%;
+  transform-style: preserve-3d;
+  overflow: hidden;
+  height: 600px;
+  transform: translateX(50%);
+  left: -30%;
+}
+
+.cards {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin-bottom: 20px;
+  overflow: hidden;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  border-radius: 20px;
+  object-fit: cover contain;
+ 
+}
+
+#item-1:checked ~ .cards #song-3, #item-2:checked ~ .cards #song-1, #item-3:checked ~ .cards #song-2 {
+  transform: translatex(-40%) scale(.8);
+  opacity: .4;
+  z-index: 0;
+  height: 400px;
+  object-fit: contain;
+}
+
+
+#item-1:checked ~ .cards #song-2, #item-2:checked ~ .cards #song-3, #item-3:checked ~ .cards #song-1 {
+  transform: translatex(40%) scale(.8);
+  opacity: .4;
+  z-index: 0;
+  height: 400px;
+  object-fit: contain;
+}
+
+#item-1:checked ~ .cards #song-1, #item-2:checked ~ .cards #song-2, #item-3:checked ~ .cards #song-3 {
+  transform: translatex(0) scale(1);
+  opacity: 1;
+  z-index: 1;
+  height: 400px;
+  object-fit: contain;
+  
+  img {
+    box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
+  }
+}
+@media (max-width:1100px) {
+  .card-container{
+    transform: translateX(0%);
+  left: 0%;
+  }
+}
+/* 
+.player {
+  background-color: #fff;
+  border-radius: 8px;
+  min-width: 320px;
+  padding: 16px 10px;
+  margin-top: 100px;
+}
+
+.upper-part {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  height: 36px;
+  overflow: hidden;
+}
+
+.play-icon{ margin-right: 10px; }
+
+.song-info {
+  width: calc(100% - 32px);
+  display: block;
+}
+
+.song-info .title {
+  color: #403d40;
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.sub-line {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.subtitle, .time {
+  font-size: 12px;
+  line-height: 16px;
+  color: #c6c5c6;
+}
+
+.time {
+  font-size: 12px;
+  line-height: 16px;
+  color: #a5a5a5;
+  font-weight: 500;
+  margin-left: auto;
+}
+
+.progress-bar {
+  height: 3px;
+  width: 100%;
+  background-color: #e9efff;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.progress {
+  display: block;
+  position: relative;
+  width: 60%;
+  height: 100%;
+  background-color: #2992dc;
+  border-radius: 6px;
+}
+
+.info-area {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 30px;
+  transition: transform .4s ease-in;
+}
+
+#item-2:checked ~ .player #test {
+  transform: translateY(0);
+}
+
+#item-2:checked ~ .player #test  {
+  transform: translateY(-40px);
+}
+
+#item-3:checked ~ .player #test  {
+  transform: translateY(-80px);
+} */
\ No newline at end of file