diff --git a/src/App.js b/src/App.js
index f29f3bb..5ff5aff 100644
--- a/src/App.js
+++ b/src/App.js
@@ -92,6 +92,7 @@ import UserProfileInfo from "./components/UserProfileInfo";
 import CurrentTime from "./components/CurrentTime";
 import CurrentDateShamsi from "./components/CurrentDateShamsi";
 import DateTime from "./components/DateTime";
+import CardDesign3 from "./components/CardDesign3";
 
 function App() {
   return (
@@ -144,6 +145,7 @@ function App() {
         {/* <DistributedData /> */}
         <CardDesign1 />
         {/* <CardDesign2 /> */}
+        <CardDesign3 />
         {/* <LeafletMap /> */}
 
         {/* *************************************************** mini components ***************************************************  */}
diff --git a/src/components/CardDesign3/index.js b/src/components/CardDesign3/index.js
new file mode 100644
index 0000000..7a5ba5b
--- /dev/null
+++ b/src/components/CardDesign3/index.js
@@ -0,0 +1,27 @@
+import React from "react";
+
+const CardDesign3 = () => {
+  return (
+    <div className="flex flex-row items-center bg-[#F8F8F8] border border-[#BCBCBC] rounded">
+      CardDesign3
+    </div>
+  );
+};
+
+export default CardDesign3;
+
+// #BCBCBC
+
+// #B9D1F3
+
+// #2483E1
+
+// #C9E2B3
+
+// #0F0543
+
+// #2A527A
+
+// #468722
+
+// #DAF6E5