diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index 84b33ac..0000000
--- a/src/App.js
+++ /dev/null
@@ -1,5 +0,0 @@
-function App() {
-  return <>Super Hero App</>;
-}
-
-export default App;
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..b0d6341
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,28 @@
+import React, {
+	useEffect,
+	useState,
+} from "react";
+import SuperHeroCard from "./Components/SuperHeroCard";
+
+function App() {
+	const [superHero, setSuperHero] = useState({});
+
+	useEffect(() => {
+		fetch(
+			`https://superheroapi.com/api.php/10160086797479102/226`
+		)
+			.then((response) => response.json())
+			.then((jsonData) => {
+				setSuperHero(jsonData);
+			});
+		console.log(superHero);
+	}, []);
+
+	return (
+    <div>
+      < SuperHeroCard superHero={superHero} />
+		</div>
+	);
+}
+
+export default App;
diff --git a/src/Components/SuperHeroCard.css b/src/Components/SuperHeroCard.css
new file mode 100644
index 0000000..682f43e
--- /dev/null
+++ b/src/Components/SuperHeroCard.css
@@ -0,0 +1,59 @@
+.Center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgb(20, 20, 20);
+}
+
+.SuperHeroCard {
+    background-color: blanchedalmond;
+    width: 500px;
+    height: fit-content;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-start;
+    padding: 50px;
+    background-image: url("https://e0.pxfuel.com/wallpapers/327/218/desktop-wallpaper-doctor-strange-magic-circle-live-dr-strange-portal.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: -35PX;
+    border-radius: 20px;
+    box-shadow: 0px 0px 20px rgba(255, 230, 230, 0.557);
+}
+
+.H1 {
+    color: rgb(250, 219, 219);
+    font-weight: bold;
+    text-decoration: underline;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.img {
+    width: 200px;
+    height: 200px;
+    border-radius: 20px;
+    object-fit: cover;
+    box-shadow: 0px 0px 20px rgba(247, 211, 211, 0.557);
+    position: relative;
+    left: 20%;
+}
+.Title {
+        color: antiquewhite;
+    font-weight: bold;
+    font-size: 18px;
+    margin-bottom: 10px;
+}
+
+.Paragraph {
+    font-size: 16px;
+    color: antiquewhite;
+    padding-bottom: 20px;
+    padding-left: 20px;
+    width: 50%;
+    line-height: 1.5rem;
+}
\ No newline at end of file
diff --git a/src/Components/SuperHeroCard.jsx b/src/Components/SuperHeroCard.jsx
new file mode 100644
index 0000000..90a5c04
--- /dev/null
+++ b/src/Components/SuperHeroCard.jsx
@@ -0,0 +1,44 @@
+import React from "react";
+import "./SuperHeroCard.css";
+
+function SuperHeroCard({ superHero }) {
+	console.log(superHero);
+	return (
+		<div className='Center'>
+			<div className='SuperHeroCard'>
+				<h1 className='H1'>{superHero.name}</h1>
+
+				<p className='Title'>
+					Occupation : <br></br>
+				</p>
+
+				<span className='Paragraph'>
+					{superHero.work &&
+						superHero.work.occupation}
+				</span>
+
+				<p className='Title'>
+					Group Affiliation : <br></br>
+				</p>
+
+				<span className='Paragraph'>
+					{superHero.connections &&
+						superHero.connections[
+							"group-affiliation"
+						]}
+				</span>
+				<div>
+					{superHero.image && (
+						<img
+							className='img'
+							src={superHero.image.url}
+							alt={superHero.name}
+						/>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default SuperHeroCard;