🚀 Fix formatting

src/components/Button.tsx

@@ -35,7 +35,7 @@ const Button = forwardRef(
           "text-gray/50 rounded-lg border-[2px] border-white/30 px-10 py-3 font-bold transition-all " +
           props.className +
           (props.disabled
-            ? " cursor-not-allowed border-white/10 bg-black/60 text-white/30"
+            ? " cursor-not-allowed border-white/10 bg-zinc-900 text-white/30"
             : " mou cursor-pointer bg-[#1E88E5]/70 text-white/80 hover:border-white/80 hover:bg-[#0084f7] hover:text-white hover:shadow-2xl")
         }
         onClick={onClick}

src/components/ChatWindow.tsx

@@ -12,7 +12,7 @@ const ChatWindow = ({ children, className }: ChatWindowProps) => {
   return (
     <div
       className={
-        "border-translucent flex h-80 w-full max-w-screen-md flex-col rounded-3xl bg-black/50 text-white drop-shadow-lg " +
+        "border-translucent flex h-full w-full flex-col rounded-3xl border-2 border-white/20 bg-zinc-900 text-white shadow-2xl drop-shadow-lg " +
         className
       }
     >

src/components/Drawer.tsx

@@ -1,13 +1,17 @@
+import React from "react";
+import { AiFillRobot } from "react-icons/Ai";
+import { BiPlus } from "react-icons/bi";
+
 const Drawer = () => {
   return (
     <div
       id="drawer-example"
-      className="z-50 m-0 flex h-screen w-72 flex-col gap-2 border-b-[1px] border-b-white/10 bg-[#101010]/50 p-0 p-3 text-white backdrop-blur-sm"
+      className="z-50 m-0 flex h-screen w-72 flex-col gap-2 border-b-[1px] border-b-white/10 bg-[#101010]/50 p-0 p-3 font-mono text-white backdrop-blur-sm"
     >
       <NewAgent />
-      <DrawerItem text="HustleGPT" />
+      <DrawerItem icon={<AiFillRobot />} text="HustleGPT" />
-      <DrawerItem text="ChefGPT" />
+      <DrawerItem icon={<AiFillRobot />} text="ChefGPT" />
-      <DrawerItem text="WorldPeaceGPT" />
+      <DrawerItem icon={<AiFillRobot />} text="WorldPeaceGPT" />
       <hr className="my-5 border-white/20" />
     </div>
   );
@@ -16,15 +20,23 @@ const Drawer = () => {
 const NewAgent = () => {
   return (
     <div className="mb-5 flex flex-row items-center rounded-md border-[1px] border-white/20 p-2 hover:bg-white/5">
-      <span className="text-md font-thin">New Agent</span>
+      <BiPlus />
+      <span className="text-md ml-2">New Agent</span>
     </div>
   );
 };
 
-const DrawerItem = ({ text }: { text: string }) => {
+const DrawerItem = ({
+  icon,
+  text,
+}: {
+  icon: React.ReactNode;
+  text: string;
+}) => {
   return (
     <div className="flex flex-row items-center rounded-md p-2 hover:bg-white/5">
-      <span className="text-md font-thin">{text}</span>
+      {icon}
+      <span className="text-md ml-2">{text}</span>
     </div>
   );
 };

src/components/Input.tsx

@@ -9,9 +9,9 @@ interface InputProps {
 
 const Input = ({ placeholder, left, value, onChange }: InputProps) => {
   return (
-    <div className="flex w-[60%] items-center rounded-xl bg-[#3a3a3a] font-mono text-lg text-white/75 shadow-2xl">
+    <div className="flex w-full items-center rounded-xl bg-[#3a3a3a] font-mono text-lg text-white/75 shadow-2xl">
       {left != null ? (
-        <div className="center flex h-full items-center rounded-xl rounded-r-none border-[2px] border-r-0 border-white/10 px-5 text-lg font-semibold tracking-wider transition-all">
+        <div className="center flex items-center rounded-xl rounded-r-none border-[2px] border-r-0 border-white/10 px-5 py-3 text-lg font-semibold tracking-wider transition-all">
           {left}
         </div>
       ) : null}

src/pages/index.tsx

@@ -53,7 +53,11 @@ const Home: NextPage = () => {
         <Drawer />
         <div
           id="content"
-          className="flex h-screen w-full flex-col items-center justify-center gap-3"
+          className="flex h-screen w-full items-center justify-center"
+        >
+          <div
+            id="layout"
+            className="flex h-full w-full max-w-screen-lg flex-col items-center justify-center gap-3 py-10"
           >
             <div
               id="title"
@@ -71,7 +75,10 @@ const Home: NextPage = () => {
 
             <ChatWindow className="m-10">
               {messages.map((message, index) => (
-              <ChatMessage key={`${index}-${message.type}`} message={message} />
+                <ChatMessage
+                  key={`${index}-${message.type}`}
+                  message={message}
+                />
               ))}
               {loading ? <div>LOADING...</div> : null}
             </ChatWindow>
@@ -108,6 +115,7 @@ const Home: NextPage = () => {
               Deploy Agent
             </Button>
           </div>
+        </div>
       </main>
     </DefaultLayout>
   );