diff --git a/components/bookmark.tsx b/components/bookmark.tsx
new file mode 100644
index 0000000..fff9160
--- /dev/null
+++ b/components/bookmark.tsx
@@ -0,0 +1,22 @@
+import { HeartIcon } from "@heroicons/react/24/solid"
+import type { BookmarkType } from "../app/bookmarks/schema"
+
+export function Bookmark(bookmark: BookmarkType) {
+  return (
+    <div className="flex items-center">
+      <button className="hover:scale-110 transition-transform">
+        <HeartIcon
+          className={`w-7 h-7 mr-3 ${bookmark.fav ? "text-red-500" : "text-slate-300"}`}
+        />
+      </button>
+      <a
+        href={bookmark.url}
+        rel="noopener noreferrer"
+        target="_blank"
+        className="hover:underline"
+      >
+        {bookmark.title} - {bookmark.url}
+      </a>
+    </div>
+  )
+}