diff --git a/src/App.js b/src/App.js
index dae6bf5cf7b10c9301d2890bcefe624f022c632b..927c5da38af36a6012ab7455359682437c82d145 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,17 @@
-import Hello from "./components/images";
+import Image from "./components/images";
+import "./components/images/style.module.scss"
 
 function App() {
   return (<>
-   <Hello/>
-   <Hello/>
+   
+        <Image
+          src={"./gani.jpg"}
+          alt="Image not found"
+          className={""}
+          width={"200px"}
+          height={"200px"}
+        />
+        
    </>
   )
 }
diff --git a/src/components/images/index.jsx b/src/components/images/index.jsx
index c0cba66d64184844a3d86c99c00a96c6879e3176..a95e3efb14078bd721b77523575a5f457199b3ec 100644
--- a/src/components/images/index.jsx
+++ b/src/components/images/index.jsx
@@ -1,12 +1,21 @@
 import React from "react";
-import "./style.css";
-
-const Hello= () => {
-    return(
-        <div className="primary">
-            <img src="./gani.jpg" alt="image not found"/>
-        </div>
-    )
+
+
+
+function Image(props) {
+  const { imageClass, src, alt, width,height,id} = props;
+
+  return (
+    <img
+    id={id}
+      className={imageClass }
+      src={src}
+      alt={alt}
+      height={height}
+      width={width}
+    />
+  );
 }
 
-export default Hello;
\ No newline at end of file
+
+export default Image;
\ No newline at end of file
diff --git a/src/components/images/style.module.scss b/src/components/images/style.module.scss
index 007f66f8d853cd55f57c7ccd50cf94968868fefa..787c374812471192906e3b53c33f54ad9a284e42 100644
--- a/src/components/images/style.module.scss
+++ b/src/components/images/style.module.scss
@@ -1,12 +1,8 @@
-.primary {
-    width: 110px;
-    height: 110px;
-    border: 2px solid rgb(172, 70, 78);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.primary img {
-    width: 100px;
-    height: 100px;
+.imageStyleClass {
+    
+    border-radius: 50%;
+    
+    
+    
+
 }