diff --git a/src/components/TimeLineComponent/gray-search-icon.svg b/public/images/TimeLineComponentgray-search-icon.svg
similarity index 100%
rename from src/components/TimeLineComponent/gray-search-icon.svg
rename to public/images/TimeLineComponentgray-search-icon.svg
diff --git a/src/components/TimeLineComponent/profilePic1.svg b/public/images/TimeLineComponentprofilePic1.svg
similarity index 100%
rename from src/components/TimeLineComponent/profilePic1.svg
rename to public/images/TimeLineComponentprofilePic1.svg
diff --git a/src/components/TimeLineComponent/profilePic2.svg b/public/images/TimeLineComponentprofilePic2.svg
similarity index 100%
rename from src/components/TimeLineComponent/profilePic2.svg
rename to public/images/TimeLineComponentprofilePic2.svg
diff --git a/src/components/MiniComponents/SelectYear/SelectYearMonth.js b/src/components/MiniComponents/SelectYear/Month.js
similarity index 100%
rename from src/components/MiniComponents/SelectYear/SelectYearMonth.js
rename to src/components/MiniComponents/SelectYear/Month.js
diff --git a/src/components/MiniComponents/SelectYear/index.js b/src/components/MiniComponents/SelectYear/index.js
index c0e21e0..3b5a293 100644
--- a/src/components/MiniComponents/SelectYear/index.js
+++ b/src/components/MiniComponents/SelectYear/index.js
@@ -1,11 +1,6 @@
 // it has style inside index.scss ---> // Start SelectYear && end SelectYear
 
 import React, { useState, useRef } from "react";
-import ScrollContainer from "react-indiana-drag-scroll";
-
-
-import arrowDown from "images/SelectYeararrow-down.svg";
-import arrowUp from "images/SelectYeararrow-up.svg";
 import Month from "./Month.js";
 
 const SelectYear = ({ items }) => {
@@ -25,7 +20,7 @@ const SelectYear = ({ items }) => {
   return (
     <section className="flex flex-row items-center mx-auto w-8/12 my-20">
       <div className="flex flex-col items-center">
-        <img src={arrowUp} onClick={up} alt="" />
+        <img src="images/SelectYeararrow-up.svg" onClick={up} alt="" />
 
         <div
           ignoreElements={"#not-work-drag"}
@@ -68,7 +63,7 @@ const SelectYear = ({ items }) => {
             ))}
           </div>
         </div>
-        <img src={arrowDown} onClick={down} alt="" />
+        <img src="images/SelectYeararrow-down.svg" onClick={down} alt="" />
       </div>
       <div className="bg-[#06BACE] w-1.5 h-96 mx-4 rounded"></div>
       <div className={`flex flex-col items-center`}>
diff --git a/src/components/TimeLineComponent/index.scss b/src/components/TimeLineComponent/index.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/TimeLineComponent/TimeLineItem.js b/src/components/Timeline/TimeLine1/TimeLineItem.js
similarity index 98%
rename from src/components/TimeLineComponent/TimeLineItem.js
rename to src/components/Timeline/TimeLine1/TimeLineItem.js
index 9b8a4ff..ee9de91 100644
--- a/src/components/TimeLineComponent/TimeLineItem.js
+++ b/src/components/Timeline/TimeLine1/TimeLineItem.js
@@ -1,4 +1,4 @@
-import CircleInCircle from "../CircleInCircle";
+import CircleInCircle from "../../";
 import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
 
 const TimeLineItem = ({ data }) => (
diff --git a/src/components/TimeLineComponent/Timeline.js b/src/components/Timeline/TimeLine1/Timeline.js
similarity index 87%
rename from src/components/TimeLineComponent/Timeline.js
rename to src/components/Timeline/TimeLine1/Timeline.js
index f12df0e..7bf6655 100644
--- a/src/components/TimeLineComponent/Timeline.js
+++ b/src/components/Timeline/TimeLine1/Timeline.js
@@ -3,7 +3,7 @@ import React from "react";
 import timeLineData from "./data.js";
 import TimeLineItem from "./TimeLineItem.js";
 
-const TimeLine = () =>
+const TimeLine1 = () =>
   timeLineData.length > 0 && (
     <div className="timeline-container flex flex-col relative  my-10">
       {timeLineData.slice(0, 6).map((data, idx) => (
@@ -12,4 +12,4 @@ const TimeLine = () =>
     </div>
   );
 
-export default TimeLine;
+export default TimeLine1;
diff --git a/src/components/TimeLineComponent/data.js b/src/components/Timeline/TimeLine1/data.js
similarity index 100%
rename from src/components/TimeLineComponent/data.js
rename to src/components/Timeline/TimeLine1/data.js
diff --git a/src/components/TimeLineComponent/index.js b/src/components/Timeline/TimeLine1/index.js
similarity index 100%
rename from src/components/TimeLineComponent/index.js
rename to src/components/Timeline/TimeLine1/index.js
diff --git a/src/components/Timeline/index.js b/src/components/Timeline/index.js
new file mode 100644
index 0000000..183f8f2
--- /dev/null
+++ b/src/components/Timeline/index.js
@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+import TimeLine1 from "./TimeLine1";
+
+function Advertisements() {
+  const list = {
+    1: <TimeLine1 />,
+  };
+  const [type, setType] = useState(1);
+  return (
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="mb-10 w-20 bg-gray-200"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default Advertisements;
diff --git a/src/redux/data.js b/src/redux/data.js
index 23c38d3..f59bde6 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -49,6 +49,7 @@ import LeafletMap from "../components/LeafletMap";
 import ProductGallery from "../components/ProductGallery";
 import ProductSalesAmount from "../components/ProductSalesAmount";
 import Avatar from "../components/Avatar";
+import Timeline from "../components/Timeline";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -852,6 +853,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Time Line",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Time Line",
+      component: <Timeline />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",