diff --git a/src/components/ProfileInfo/index.js b/src/components/Avatar/ProfileInfo/index.js
similarity index 100%
rename from src/components/ProfileInfo/index.js
rename to src/components/Avatar/ProfileInfo/index.js
diff --git a/src/components/ProfilePicNextToEachOther/index.js b/src/components/Avatar/ProfilePicNextToEachOther/index.js
similarity index 100%
rename from src/components/ProfilePicNextToEachOther/index.js
rename to src/components/Avatar/ProfilePicNextToEachOther/index.js
diff --git a/src/components/Avatar/index.js b/src/components/Avatar/index.js
new file mode 100644
index 0000000..9b55278
--- /dev/null
+++ b/src/components/Avatar/index.js
@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+
+import ProfileInfo from "./ProfileInfo";
+import ProfilePicNextToEachOther from "./ProfilePicNextToEachOther";
+
+function Avatar() {
+  const list = {
+    1: <ProfileInfo />,
+    2: <ProfilePicNextToEachOther />,
+  };
+  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 Avatar;
diff --git a/src/components/CardDesgin/CardTrelloDesign/index.js b/src/components/CardDesgin/CardTrelloDesign/index.js
index 0ac45fc..42db7b3 100644
--- a/src/components/CardDesgin/CardTrelloDesign/index.js
+++ b/src/components/CardDesgin/CardTrelloDesign/index.js
@@ -3,7 +3,7 @@ import Button from "../../ButtonDesign/Button";
 import CircleInCircle from "../../MiniComponents/CircleInCircle";
 import TagDesign1 from "../../Tag/TagDesign1";
 import AnimatedProgressBar1 from "../../ProgressBar/AnimatedProgressbar1";
-import ProfilePicNextToEachOther from "../../ProfilePicNextToEachOther";
+import ProfilePicNextToEachOther from "../../Avatar/ProfilePicNextToEachOther";
 import CommentIcon from "../../MiniComponents/CommentIcon";
 
 const CardTrelloDesign = ({
diff --git a/src/components/CardDesgin/PopupCard/index.js b/src/components/CardDesgin/PopupCard/index.js
index 900b898..d2d9a29 100644
--- a/src/components/CardDesgin/PopupCard/index.js
+++ b/src/components/CardDesgin/PopupCard/index.js
@@ -6,7 +6,7 @@ import { useForm } from "react-hook-form";
 import Input from "../../AnimatedInput/Input";
 import CancleIcon from "../../MiniComponents/CancleIcon";
 import Button from "../../ButtonDesign/Button";
-import ProfilePicNextToEachOther from "../../ProfilePicNextToEachOther";
+import ProfilePicNextToEachOther from "../../Avatar/ProfilePicNextToEachOther";
 import TitleSubtitle from "../../MiniComponents/TitleSubtitle";
 
 const PopupCard = ({ selectedChecklist, buttons }) => {
diff --git a/src/components/CurrentDateTime/DateTime/index.js b/src/components/CurrentDateTime/DateTime/index.js
index 16d40b7..a6422f7 100644
--- a/src/components/CurrentDateTime/DateTime/index.js
+++ b/src/components/CurrentDateTime/DateTime/index.js
@@ -1,7 +1,7 @@
 import React from "react";
 import CurrentDateShamsi from "../CurrentDateShamsi";
 import CurrentTime from "../CurrentTime";
-import ProfileInfo from "../../ProfileInfo";
+import ProfileInfo from "../../Avatar/ProfileInfo";
 
 const DateTime = () => {
   return (
diff --git a/src/components/DistributedData/index.js b/src/components/DivideX/DistributedData/index.js
similarity index 94%
rename from src/components/DistributedData/index.js
rename to src/components/DivideX/DistributedData/index.js
index b52a766..c56d1c8 100644
--- a/src/components/DistributedData/index.js
+++ b/src/components/DivideX/DistributedData/index.js
@@ -2,7 +2,7 @@ import React from "react";
 
 const DistributedData = ({ items }) => {
   return (
-    <div className="mt-20 flex flex-col items-center gap-y-4 max-w-[750px] mx-auto bg-white shadow-sm rounded-lg pt-3">
+    <div className="w-[750px] flex flex-col items-center gap-y-4 mx-auto bg-white shadow-sm rounded-lg pt-3">
       {items.map((row, index) => (
         <div
           className={`flex flex-row items-center justify-around w-full border-[#9DACD344] pb-3 ${
diff --git a/src/components/ReligiousTimes/index.js b/src/components/DivideX/ReligiousTimes/index.js
similarity index 88%
rename from src/components/ReligiousTimes/index.js
rename to src/components/DivideX/ReligiousTimes/index.js
index 48af3d3..e673ad3 100644
--- a/src/components/ReligiousTimes/index.js
+++ b/src/components/DivideX/ReligiousTimes/index.js
@@ -2,7 +2,7 @@ import React from "react";
 
 const ReligiousTimes = ({ hours }) => {
   return (
-    <div className="flex flex-row items-center justify-center bg-white shadow-sm rounded-lg max-w-[465px] w-1/3 py-3.5 px-0.5 mt-10 mr-10">
+    <div className="w-[550px] flex flex-row items-center justify-around bg-white shadow-sm rounded-lg py-3.5 px-0.5 mt-10 mr-10">
       {hours.map((hour, index) => (
         <div className="flex flex-row items-center" key={index}>
           <span className="text-xs text-[#0F0543] font-sansbold">
diff --git a/src/components/DivideX/index.js b/src/components/DivideX/index.js
new file mode 100644
index 0000000..fd8399f
--- /dev/null
+++ b/src/components/DivideX/index.js
@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+
+import DistributedData from "./DistributedData";
+import ReligiousTimes from "./ReligiousTimes";
+
+function Advertisements() {
+  const list = {
+    1: <DistributedData />,
+    2: <ReligiousTimes />,
+  };
+  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/components/MiniComponents/Folderlist/index.js b/src/components/MiniComponents/Folderlist/index.js
index 0fe85bd..0e30e13 100644
--- a/src/components/MiniComponents/Folderlist/index.js
+++ b/src/components/MiniComponents/Folderlist/index.js
@@ -2,7 +2,7 @@
 
 import React from "react";
 
-import ProfilePicNextToEachOther from "../../ProfilePicNextToEachOther";
+import ProfilePicNextToEachOther from "../../Avatar/ProfilePicNextToEachOther";
 import DropDown from "../DropDown";
 
 const Folderlists = ({ items }) => {
diff --git a/src/redux/data.js b/src/redux/data.js
index 27b7695..23c38d3 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -41,13 +41,14 @@ import BoxNextToEachOther from "../components/BoxNextToEachOther";
 import ContactUs from "../components/ContactUs";
 import CurrentDateTime from "../components/CurrentDateTime";
 import Digikala from "../components/Digikala";
-import DistributedData from "../components/DistributedData";
+import DivideX from "../components/DivideX";
 import FileManager from "../components/FileManager";
 import FormFields from "../components/FormFields";
 import Tabels from "../components/Tabels";
 import LeafletMap from "../components/LeafletMap";
 import ProductGallery from "../components/ProductGallery";
 import ProductSalesAmount from "../components/ProductSalesAmount";
+import Avatar from "../components/Avatar";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -772,12 +773,12 @@ const components = [
     },
   },
   {
-    name: "DistributedData",
+    name: "DivideX",
     author: "Andalib",
     props: [],
     content: {
-      name: "DistributedData",
-      component: <DistributedData />,
+      name: "DivideX",
+      component: <DivideX />,
       code: null,
     },
   },
@@ -841,6 +842,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Avatar",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Avatar",
+      component: <Avatar />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",