diff --git a/src/App.js b/src/App.js
index 747a80d..ef63201 100644
--- a/src/App.js
+++ b/src/App.js
@@ -91,6 +91,7 @@ import ProfileInfo from "./components/ProfileInfo";
 import UserProfileInfo from "./components/UserProfileInfo";
 import CurrentTime from "./components/CurrentTime";
 import CurrentDateShamsi from "./components/CurrentDateShamsi";
+import DateTime from "./components/DateTime";
 
 function App() {
   return (
@@ -140,7 +141,7 @@ function App() {
         {/* <TimeLineComponent /> */}
         {/* <CardTrelloDesign /> */}
         {/* <ReligiousTimes /> */}
-        <DistributedData />
+        {/* <DistributedData /> */}
         {/* <CardDesign1 /> */}
         {/* <CardDesign2 /> */}
         {/* <LeafletMap /> */}
@@ -182,6 +183,7 @@ function App() {
         <UserProfileInfo />
         {/* <CurrentTime /> */}
         {/* <CurrentDateShamsi /> */}
+        {/* <DateTime /> */}
 
         {/* <div className="flex">
           <SidebarDesign2 className="w-1/5" />
diff --git a/src/components/DateTime/index.js b/src/components/DateTime/index.js
new file mode 100644
index 0000000..821edb7
--- /dev/null
+++ b/src/components/DateTime/index.js
@@ -0,0 +1,25 @@
+import React from "react";
+import CurrentDateShamsi from "../CurrentDateShamsi";
+import CurrentTime from "../CurrentTime";
+import ProfileInfo from "../ProfileInfo";
+
+const DateTime = () => {
+  return (
+    <div className="flex flex-col">
+      {/* ? time */}
+      <div className="flex flex-row items-center mb-2">
+        <span className="text-xs ml-2 text-[#0F0543] ">ساعت</span>
+        <CurrentTime color={"text-[#2A527A]"} fontSize={"text-xs"} />
+      </div>
+      {/* ? date */}
+      <CurrentDateShamsi color={"text-[#2A527A]"} fontSize={"text-xs"} />
+    </div>
+  );
+};
+
+export default DateTime;
+
+ProfileInfo.DateTime = {
+  name: "سبحان قاسمی",
+  role: "خادم محترم",
+};
diff --git a/src/components/ProfileInfo/index.js b/src/components/ProfileInfo/index.js
index b1ae2e0..f997dc6 100644
--- a/src/components/ProfileInfo/index.js
+++ b/src/components/ProfileInfo/index.js
@@ -5,7 +5,7 @@ import arrowDown from "./arrow-down.svg";
 
 const ProfileInfo = ({ name, role }) => {
   return (
-    <div className="flex flex-row items-center bg-red-500">
+    <div className="flex flex-row items-center">
       <img src={profilePic} className="rounded-full" alt="profile-pic" />
       <div className="mx-4">
         <p className="text-[#0F0543] font-bold text-sm">{name}</p>