diff --git a/src/App.js b/src/App.js
index 3784575..d093eb0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,13 @@
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import { comments } from "./js/commentData";
+import Card from "./components/Card"
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      {comments.map((comment, index) => (
+        <Card key={index} commentObject={comment} />
+      ))}
     </div>
   );
 }
diff --git a/src/components/Body.js b/src/components/Body.js
new file mode 100644
index 0000000..1887b3b
--- /dev/null
+++ b/src/components/Body.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+function Body(props) {
+   return <p>{props.comment}</p>;
+}
+
+export default Body;
\ No newline at end of file
diff --git a/src/components/Card.js b/src/components/Card.js
new file mode 100644
index 0000000..d9c19d5
--- /dev/null
+++ b/src/components/Card.js
@@ -0,0 +1,14 @@
+import React from "react";
+import Body from "./Body";
+import Header from "./Header";
+
+function Card(props) {
+  return (
+    <div>
+      <Header profileImg={props.commentObject.profileImg} username={props.commentObject.username} />
+      <Body comment={props.commentObject.comment} />
+    </div>
+  );
+}
+
+export default Card;
\ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..8e21653
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+function Header(props) {
+  return (
+    <div>
+      <img src={props.profileImg} />
+      <h1>{props.username}</h1>
+    </div>
+  );
+}
+
+export default Header;
\ No newline at end of file
diff --git a/src/css/styles.css b/src/css/styles.css
new file mode 100644
index 0000000..4d3cd64
--- /dev/null
+++ b/src/css/styles.css
@@ -0,0 +1,18 @@
+img {
+  border-radius: 50px;
+  width: 50px;
+  height: 50px;
+  float: left;
+  margin-right: 10px;
+}
+
+h1 {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 50px;
+  margin: 0;
+}
+
+p {
+  margin-left: 70px;
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index d563c0f..0ea4a19 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
+import './css/styles.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
diff --git a/src/js/commentData.js b/src/js/commentData.js
new file mode 100644
index 0000000..fe36c86
--- /dev/null
+++ b/src/js/commentData.js
@@ -0,0 +1,17 @@
+export const comments = [
+  {
+    profileImg: 'https://images.unsplash.com/photo-1609992556706-14a7056ea745?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80',
+    username: 'ScrungeCat',
+    comment: 'My favorite types of cats are slightly weird looking ones!'
+  },
+  {
+    profileImg: 'https://images.unsplash.com/photo-1615751072497-5f5169febe17?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1335&q=80',
+    username: 'ChewToy',
+    comment: 'I don\'t like cats at all.'
+  },
+  {
+    profileImg: 'https://images.unsplash.com/photo-1563482776068-4dac10f9373d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
+    username: 'BuryHeadInSand',
+    comment: 'Wild ostriches make the best pets.'
+  }
+]
\ No newline at end of file
