diff --git a/bloglist_frontend/src/Blog.js b/bloglist_frontend/src/Blog.js
new file mode 100644
index 0000000000000000000000000000000000000000..f1143781367d96a1c3c648e4ddf94c6915a7a22d
--- /dev/null
+++ b/bloglist_frontend/src/Blog.js
@@ -0,0 +1,41 @@
+import '../index.css'
+import PropTypes from 'prop-types'
+
+const Blog = ({
+      blog, 
+      addLike, 
+      deleteBlog,
+      user
+    }) => {
+
+  Blog.propTypes = {
+    blog: PropTypes.object.isRequired,
+    user: PropTypes.object.isRequired,
+  }
+
+  const loggedUsername = user.valueOf().username;
+  const blogUser = blog.user
+
+  if (loggedUsername === blogUser.username) {
+    return (
+      <div className="div1">
+        {blog.title} by {blog.author}
+        <li>url: {blog.url}</li>
+        <li>likes: {blog.likes}<button onClick={addLike} className="button1">like</button></li>
+        <button onClick={deleteBlog} className="button2">remove</button>
+      </div>  
+      )
+  }
+  else {
+    return (
+      <div className="div1">
+        {blog.title} by {blog.author}
+        <li>url: {blog.url}</li>
+        <li>likes: {blog.likes}<button onClick={addLike} className="button1">like</button></li>
+      </div>  
+      )
+  }
+  
+}
+
+export default Blog