diff --git a/src/components/Blogss/design1/index.js b/src/components/Blogss/design1/index.js
index cba9423..220f667 100644
--- a/src/components/Blogss/design1/index.js
+++ b/src/components/Blogss/design1/index.js
@@ -1,13 +1,12 @@
-import RelativeCircle from "../../RelativeCircle";
+import CommentIcon from "../../MiniComponents/CommentIcon";
+import RelativeCircle from "../../MiniComponents/RelativeCircle";
 
 const BlogDesign1 = ({
   blogTitle,
   blogExcerpt,
   blogAuthor,
   blogComments,
-  commentNum,
   featuredImage,
-  commentIcon,
 }) => {
   return (
     <div className="w-fit flex items-strech justify-around p-4 bg-white">
@@ -39,14 +38,11 @@ const BlogDesign1 = ({
               <p className="text-sm text-[#818181] ml-2 font-light">
                 {blogComments}
               </p>
-              <div class="relative">
-                <img class="w-7 rounded-full" src={commentIcon} alt="" />
-                <RelativeCircle
-                  className={
-                    "font-sansbold absolute top-0 right-0 transform translate-x-2 -translate-y-2 text-[10px] bg-[#818181] text-white "
-                  }
-                />
-              </div>
+              <CommentIcon
+                commentClassName="w-7"
+                commentNum={"26"}
+                className="w-5 h-5 bg-[#818181] text-white text-[10px] font-sansbold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
+              />
             </div>
           )}
         </div>
@@ -68,5 +64,4 @@ BlogDesign1.defaultProps = {
   commentNum: `26`,
 
   featuredImage: "images/blog-featured-image.jpg",
-  commentIcon: "images/light-gray-comment-icon.svg",
 };
diff --git a/src/components/CardTrelloDesign/index.js b/src/components/CardTrelloDesign/index.js
index 6a49c28..000fbc6 100644
--- a/src/components/CardTrelloDesign/index.js
+++ b/src/components/CardTrelloDesign/index.js
@@ -9,6 +9,9 @@ import messageText from "./images/message-text.svg";
 import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
 import AnimatedProgressBar from "../AnimatedProgressBar";
 
+import RelativeCircle from "../MiniComponents/RelativeCircle";
+import CommentIcon from "../MiniComponents/CommentIcon";
+
 const CardTrelloDesign = ({
   circle,
   commnets,
@@ -72,14 +75,12 @@ const CardTrelloDesign = ({
               <span className="text-xs ml-0.5 text-[10px] text-[#707070]">
                 10
               </span>
-              <div className="relative">
-                <img
-                  src={messageText}
-                  alt="comment-icon"
-                  class="w-5 rounded-full"
-                />
-                <span class="absolute bottom-3 right-3 w-2.5 h-2.5 border-2 border-white bg-[#0AABFF] rounded-full"></span>
-              </div>
+              <CommentIcon
+                icon={messageText}
+                commentClassName="w-5"
+                commentNum={false}
+                className="w-2.5 h-2.5 bg-[#0AABFF] absolute top-0 left-0 transfrom -translate-x-0.5 border-white"
+              />
             </div>
           )}
           {showTag &&
diff --git a/src/components/MiniComponents/CommentIcon/index.js b/src/components/MiniComponents/CommentIcon/index.js
new file mode 100644
index 0000000..3f7bdd7
--- /dev/null
+++ b/src/components/MiniComponents/CommentIcon/index.js
@@ -0,0 +1,18 @@
+import React from "react";
+import RelativeCircle from "../RelativeCircle";
+
+const CommentIcon = ({ icon, commentClassName, className, commentNum }) => {
+  return (
+    <div className="relative">
+      <img className={`${commentClassName}`} src={icon} alt="comment-icon" />
+      <RelativeCircle commentNum={commentNum} className={className} />
+    </div>
+  );
+};
+
+export default CommentIcon;
+
+CommentIcon.defaultProps = {
+  icon: "images/light-gray-comment-icon.svg",
+  commentClassName: "w-10",
+};
diff --git a/src/components/RelativeCircle/index.js b/src/components/MiniComponents/RelativeCircle/index.js
similarity index 55%
rename from src/components/RelativeCircle/index.js
rename to src/components/MiniComponents/RelativeCircle/index.js
index a488b92..a0e4da0 100644
--- a/src/components/RelativeCircle/index.js
+++ b/src/components/MiniComponents/RelativeCircle/index.js
@@ -3,7 +3,7 @@ import React from "react";
 const RelativeCircle = ({ commentNum, className }) => {
   return (
     <span
-      class={`w-6 h-6 flex flex-col items-center justify-center text-center rounded-full border-2 ${className}`}
+      class={`flex flex-col items-center justify-center rounded-full border-2 ${className}`}
     >
       {commentNum}
     </span>
@@ -13,6 +13,6 @@ const RelativeCircle = ({ commentNum, className }) => {
 export default RelativeCircle;
 
 RelativeCircle.defaultProps = {
-  commentNum: "26",
-  className: "",
+  commentNum: "44",
+  className: "w-7 w-7 bg-red-600 text-white border-blue-400",
 };
diff --git a/src/components/MiniComponents/index.js b/src/components/MiniComponents/index.js
new file mode 100644
index 0000000..674824d
--- /dev/null
+++ b/src/components/MiniComponents/index.js
@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+
+import CommentIcon from "./CommentIcon";
+import RelativeCircle from "./RelativeCircle";
+
+function Blogs() {
+  const list = {
+    1: <CommentIcon />,
+    2: <RelativeCircle />,
+  };
+  const [type, setType] = useState(1);
+
+  return (
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="w-20 bg-gray-200 mb-20"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default Blogs;
diff --git a/src/redux/data.js b/src/redux/data.js
index 1bb775b..27def74 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -9,6 +9,9 @@ import Banners from "../components/Banners";
 import Blogss from "../components/Blogss";
 import CardTrelloDesign from "../components/CardTrelloDesign";
 
+// mini components
+import MiniComponents from "../components/MiniComponents";
+
 // import ButtonDesign from "./components/buttonDesign/ButtonDesign";
 // import ProductDesign from "./components/productDesign/ProductDesign";
 // import ProductTags from "./components/productTags/ProductTags";
@@ -199,6 +202,17 @@ const components = [
       code: null,
     },
   },
+  // mini components
+  {
+    name: "Mini Components",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Mini Components used in Main Components",
+      component: <MiniComponents />,
+      code: null,
+    },
+  },
 ];
 
 export default components;