diff --git a/components/user-item.tsx b/components/user-item.tsx
index b24bb87602410be9681ee3c2a3fda8bcd24b6b5d..0da145d8bdee65dbe40671248f0b64cfcc3106ec 100644
--- a/components/user-item.tsx
+++ b/components/user-item.tsx
@@ -1,23 +1,23 @@
-import { User } from "@/components/ui/user";
 import Image from "next/image";
 import Link from "next/link";
+import FollowButton from "./following-button";
 
 // this is a single user helper-component, only for design purposes
-export default function User({ id, userName, image }: { id: number, userName: string, image: { url: string } }) {
+export default function FollowUser({ id, followId, userName, image }: { id: number, followId: number, userName: string, image: { url: string } }) {
     return (
-        <User>
+        <div>
             <Link href={`/user/${id}`}>
                 <div className="">
                     <Image
                         src={image.url}
                         alt={userName}
-                        width={264}
-                        height={374}
-                        priority={true}
-                        style={{ width: '100%', height: '100%' }} />
+                        width={50}
+                        height={50}
+                        priority={true} />
                 </div>
+                <p>{userName}</p>
+                <FollowButton userId={id} followerId={followId} />
             </Link>
-            <p className="truncate">{userName}</p>
-        </User>
+        </div>
     )
 }
\ No newline at end of file