diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index d7e3501..a083e48 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -5,11 +5,11 @@ const Navbar = (): JSX.Element => {
 	const [navbarOpen, setNavbarOpen] = useState<boolean>(false)
 	return (
 		<>
-			<nav className="z-50 top-0 flex flex-wrap items-center justify-between px-2 py-3 w-full text-gray-100 bg-discord-blurple dark:bg-discord-dark">
+			<nav className="z-50 top-0 flex flex-wrap items-center justify-between px-2 py-3 w-full text-gray-100 bg-discord-blurple dark:bg-discord-black">
 				<div className="container flex flex-wrap items-center justify-between mx-auto px-4">
 					<div className="relative flex justify-between w-full lg:static lg:block lg:justify-start lg:w-auto">
 						<a
-							className="logofont  text-large whitespace-no-wrap inline-block mr-4 py-2 hover:text-gray-400 font-semibold leading-relaxed uppercase sm:text-2xl"
+							className="logofont  text-large whitespace-no-wrap inline-block mr-4 py-2 hover:text-gray-200 font-semibold leading-relaxed uppercase sm:text-2xl"
 							href="/"
 						>
 							KOREANBOTS
@@ -32,35 +32,35 @@ const Navbar = (): JSX.Element => {
 							<li className="flex items-center">
 								<a
 									href="/discord"
-									className="lg:text-gray-100 lg:hover:text-gray-400 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2"
+									className="lg:text-gray-100 lg:hover:text-gray-200 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2"
 								>
 									디스코드
 								</a>
 							</li>
 							<li className="flex items-center">
 								<Link href="/about">
-									<a className="lg:text-gray-100 lg:hover:text-gray-400 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2">
+									<a className="lg:text-gray-100 lg:hover:text-gray-200 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2">
 										소개
 									</a>
 								</Link>
 							</li>
 							<li className="flex items-center">
 								<Link href="/api">
-									<a className="lg:text-gray-100 lg:hover:text-gray-400 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2">
+									<a className="lg:text-gray-100 lg:hover:text-gray-200 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2">
 										API
 									</a>
 								</Link>
 							</li>
 							<li className="flex items-center">
 								<Link href="/addbot">
-									<a className="lg:text-gray-100 lg:hover:text-gray-400 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2">
+									<a className="lg:text-gray-100 lg:hover:text-gray-200 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2">
 										봇 추가하기
 									</a>
 								</Link>
 							</li>
 							<li className="flex items-center">
 								<Link href="/api/auth/discord">
-									<a className="lg:text-gray-100 lg:hover:text-gray-400 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2">
+									<a className="lg:text-gray-100 lg:hover:text-gray-200 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2">
 										로그인
 									</a>
 								</Link>