diff --git a/src/components/Image/Image.scss b/src/components/Image/Image.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2e6768d96587f10d3178fc1a4a2839d35d57a732
--- /dev/null
+++ b/src/components/Image/Image.scss
@@ -0,0 +1,11 @@
+
+.card-profile-image  {
+  position: absolute;
+  left: 50%;
+  max-width: 140px;
+  transition: all .15s ease;
+  transform: translate(-50%,-50%) scale(1);
+  border: 3px solid #fff;
+  border-radius: 0.375rem;
+  vertical-align: middle;
+}
diff --git a/src/components/Image/index.jsx b/src/components/Image/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..f6e840ed42e527c5f6a3c0cf2bdd920c34344812
--- /dev/null
+++ b/src/components/Image/index.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./Image.scss";
+
+// Profile Image common components
+function Image({src, width}) {
+    return (
+        <>
+            <div className="mt-7 card-profile-image">  
+                <img src={src} width={width}  className="rounded-circle card-profile-image"/>
+            </div>
+        </>
+    );
+}
+
+Image.propTypes = {
+    src: PropTypes.string,
+    width: PropTypes.string
+};
+
+export default Image;
diff --git a/src/components/index.js b/src/components/index.js
index 1fdf4382e5bd73f112a978acdddd4aa444265db1..e4f3c34bc38bfd1e20de5b11d630b343c8349734 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1 +1,3 @@
 export { default as Button } from "./Button";
+export { default as Image } from "./image";
+