diff --git a/pages/chat.tsx b/pages/chat.tsx
index 979d91c5..b2c99171 100644
--- a/pages/chat.tsx
+++ b/pages/chat.tsx
@@ -2,8 +2,8 @@ import { useRef } from "react";
 import PageMeta from "../components/seo/page";
 import DiscordEmbed from "../components/DiscordEmbed";
 import { DISCORD_INVITE_URL } from "../constants";
-import { Arrow } from "../icons/arrow";
 import LivePlayer from "../components/livePlayer";
+import { BsDiscord } from "react-icons/bs";
 export default function ChatPage() {
   const ref = useRef<HTMLDivElement>();
 
@@ -13,19 +13,21 @@ export default function ChatPage() {
 
       <div className="h-screen w-screen max-h-lg mx-auto bg-[#36393E]">
         <LivePlayer />
-        <div className="absolute top-12 sm:top-16 left-0 w-full bg-black text-white h-[50px] px-4 border-b border-white">
+        <div className="absolute top-12 sm:top-16 left-0 w-full bg-black text-white h-[50px] px-4 border-b border-white border-t">
           <div className="flex gap-4 items-center h-full">
             <span className="leading-6 flex-grow">Chatroom</span>
             <a
               href={DISCORD_INVITE_URL}
               target="_blank"
               rel="noopener noreferrer"
+              className="flex items-center gap-2 bg-[#36393E] py-2 px-4 rounded-full text-small"
             >
-              <Arrow className="-rotate-45" colour="white" />
+              <p>Join our Discord</p>
+              <BsDiscord color="white" />
             </a>
           </div>
         </div>
-        <div className="w-full h-[calc(100vh-130px)] sm:h-[calc(100vh-55px)] pb-safe">
+        <div className="w-full h-[calc(100vh-40px)] sm:h-[calc(100vh-55px)] mb-safe">
           <DiscordEmbed />
         </div>
       </div>