diff --git a/components/BotCard.tsx b/components/BotCard.tsx
index 92e01fe..876111a 100644
--- a/components/BotCard.tsx
+++ b/components/BotCard.tsx
@@ -3,44 +3,92 @@ import { formatNumber } from '../utils/Tools'
 import { Status } from '../utils/Constants'
 import Divider from './Divider'
 import Tag from './Tag'
+import Link from 'next/link'
 
-const BotCard = ({ bot }:BotProps):JSX.Element => {
-	return <div className='container mb-20'>
-		<div className="relative h-80">
-			<div className="container mx-auto h-full">
-				<div className='h-full'>
+const BotCard = ({ bot }: BotProps): JSX.Element => {
+	console.log(`${bot.vanity}`)
+	return (
+		<div className="container mb-20">
+			<div className="relative">
+				<div className="container mx-auto">
+					<div className="h-full">
+						<div className="relative mx-auto h-full text-black dark:text-white dark:bg-discord-black bg-little-white rounded-sm shadow-xl">
+							<div className="flex mb-16 h-48">
+								<div className="w-2/3">
+									<div className="flex justify-start">
+										<img
+											alt="Avatar"
+											src={
+												bot.avatar
+													? `https://cdn.discordapp.com/avatars/${bot.id}/${bot.avatar}.png?size=1024`
+													: `https://cdn.discordapp.com/embed/avatars/${Number(bot.tag) %
+															5}.png?size=1024`
+											}
+											className="absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white"
+										/>
+									</div>
 
-					<div className="flex bg-little-white dark:bg-discord-black text-black dark:text-white rounded-sm relative shadow-xl mx-auto h-full">
-						<div className='w-2/3'>
-							<div className="flex justify-start">
-								<img src={bot.avatar ? `https://cdn.discordapp.com/avatars/${bot.id}/${bot.avatar}.png?size=1024` : `https://cdn.discordapp.com/embed/avatars/${Number(bot.tag) % 5}.png?size=1024`} alt="" className="mx-auto absolute -top-16 -left-2 w-32 h-32 bg-white" />
+									<div className="mt-28 px-4">
+										<h2 className="px-1 text-sm">
+											<i className={`fas fa-circle text-${Status[bot.status]?.color}`} />
+											{Status[bot.status]?.text}
+										</h2>
+										<h1 className="mb-3 text-left text-3xl font-bold">
+											{bot.name}{' '}
+											{bot.trusted && (
+												<span className="text-koreanbots-blue text-3xl">
+													<i className="fas fa-award" />
+												</span>
+											)}
+										</h1>
+										<p className="text-left text-gray-400 text-sm font-medium">{bot.intro}</p>
+									</div>
+								</div>
+								<div className="grid grid-cols-1 pr-5 py-5 w-1/3 h-0">
+									<Tag
+										text={
+											<>
+												<i className="fas fa-heart text-red-600" /> {formatNumber(bot.votes)}
+											</>
+										}
+										dark
+									/>
+									<Tag blurple text={<>{formatNumber(bot.servers)} 서버</>} dark />
+								</div>
 							</div>
-                
-							<div className="mt-20 px-4">
-								<h2 className='px-1 text-sm'><i className={`fas fa-circle text-${Status[bot.status]?.color}`}/>{Status[bot.status]?.text}</h2>
-								<h1 className="font-bold text-left text-3xl mb-3">{bot.name} {bot.trusted && <span className='text-green-500 text-3xl'><i className='fas fa-award' /></span>}</h1>
-								<p className="text-left text-sm text-gray-400 font-medium">{bot.intro}</p>
-								{/* <div className="flex justify-evenly my-5">
-								<a href="" className="bg font-bold text-sm text-blue-800 w-full text-center py-3 hover:bg-blue-800 hover:text-white hover:shadow-lg">Facebook</a>
-								<a href="" className="bg font-bold text-sm text-blue-400 w-full text-center py-3 hover:bg-blue-400 hover:text-white hover:shadow-lg">Twitter</a>
-								<a href="" className="bg font-bold text-sm text-yellow-600 w-full text-center py-3 hover:bg-yellow-600 hover:text-white hover:shadow-lg">Instagram</a>
-								<a href="" className="bg font-bold text-sm text-gray-600 w-full text-center py-3 hover:bg-gray-600 hover:text-white hover:shadow-lg">Email</a>
-							</div> */}
+							<div className="category">
+								{bot.category.slice(5).map(el => (
+									<Tag key={el} text={el} href={`/categories/${el}`} />
+								))}
+							</div>
+							<Divider />
+							<div className="flex justify-evenly">
+								<Link
+									href={`/bots/${
+										(bot.partnered || bot.trusted) && bot.vanity ? bot.vanity : bot.id
+									}`}
+								>
+									<a className="bg py-3 w-full text-center text-koreanbots-blue hover:text-white text-sm font-bold hover:bg-koreanbots-blue hover:shadow-lg">
+										보기
+									</a>
+								</Link>
+								<a
+									href="#"
+									className="bg py-3 w-full text-center text-discord-blurple hover:text-white text-sm font-bold hover:bg-discord-blurple hover:shadow-lg"
+								>
+									초대하기
+								</a>
 							</div>
-						</div>
-						<div className='grid grid-cols-1 w-1/3 py-5 h-0 pr-5'>
-							<Tag text={<><i className='fas fa-heart text-red-600' /> {formatNumber(bot.votes)}</>} dark/>
-							<Tag blurple text={<>{formatNumber(bot.servers)} 서버</>} dark/>
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
-	</div>
+	)
 }
 
 interface BotProps {
-  bot: Bot
+	bot: Bot
 }
 
 export default BotCard