diff --git a/frontend/src/components/Bookmarkers.tsx b/frontend/src/components/Bookmarkers.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/components/NavbarLayout.tsx b/frontend/src/components/NavbarLayout.tsx
index 2bfcc243..d716854f 100644
--- a/frontend/src/components/NavbarLayout.tsx
+++ b/frontend/src/components/NavbarLayout.tsx
@@ -27,7 +27,7 @@ import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
 import { SearchBar } from "./SearchBar";
 import useAuthStore from "../services/auth";
 import { FullscreenLoading } from "./FullscreenLoading";
-import { useNavigate } from "react-router-dom";
+import Bookmark from "@/assets/Icon/General/Bookmark.svg?react";
 
 const links = [{ name: "Home", path: "/" }] as const;
 
@@ -127,7 +127,7 @@ export const NavbarLayout = () => {
                 <DropdownMenuSeparator />
                 <DropdownMenuItem asChild>
                   <Link to="/bookmarks">
-                    <User className="mr-2 h-4 w-4" />
+                    <Bookmark className="mr-2 h-4 w-4 fill-white" />
                     <span>Bookmarks</span>
                   </Link>
                 </DropdownMenuItem>
diff --git a/frontend/src/components/Profile.tsx b/frontend/src/components/Profile.tsx
new file mode 100644
index 00000000..972f1de0
--- /dev/null
+++ b/frontend/src/components/Profile.tsx
@@ -0,0 +1,25 @@
+import { Button } from "@/components/ui/button";
+import { UserSummary } from "@/services/api/semanticBrowseSchemas";
+import { Link } from "react-router-dom";
+
+interface ProfileProps {
+  profile: UserSummary;
+}
+
+export const Profile = ({ profile }: ProfileProps) => {
+  return (
+    <div className="flex justify-between items-center"> 
+        <Link to={`/users/${profile.id}`} className="flex items-center gap-5"> 
+        <img
+            src={profile.profilePicture}
+            alt="Author"
+            className="mr-2 h-10 w-10 rounded-full"
+        />
+        <span className="text-lg font-medium text-gray-900">
+            {profile.username}
+        </span>
+        </Link>
+        <Button> Follow </Button>
+    </div>
+  );
+};
diff --git a/frontend/src/components/Recipe.tsx b/frontend/src/components/Recipe.tsx
index 51cb2549..df786beb 100644
--- a/frontend/src/components/Recipe.tsx
+++ b/frontend/src/components/Recipe.tsx
@@ -2,7 +2,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import LinkIcon from "@/assets/Icon/General/Link.svg";
-import BookmarkIcon from "@/assets/Icon/General/Bookmark.svg";
+import Bookmark from "@/assets/Icon/General/Bookmark.svg?react";
 import TimeIcon from "@/assets/Icon/General/Clock.svg";
 import StarIcon from "@/assets/Icon/General/Star.svg";
 import FoodIcon from "@/assets/Icon/General/Food.svg";
@@ -43,7 +43,9 @@ export const Recipe = ({
                 size="icon"
                 variant="secondary"
               >
-                <img src={BookmarkIcon} alt="Bookmark icon" />
+                <div className="flex items-center gap-4">
+                    <Bookmark className="h-4 w-4 fill-white" />
+                </div>
               </Button>
             </div>
           </div>