diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 5921135..2dd3753 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import clsx from "clsx";
 
 interface BadgeProps {
   children: React.ReactNode;
@@ -6,7 +7,13 @@ interface BadgeProps {
 
 const Badge = ({ children }: BadgeProps) => {
   return (
-    <div className="rounded-full bg-[#1E88E5] px-3 py-1 text-sm font-semibold text-gray-100 transition-all hover:scale-110">
+    <div
+      className={clsx(
+        "mt-2 rounded-full bg-[#1E88E5] font-semibold text-gray-100 transition-all hover:scale-110",
+        "px-1 py-1 text-xs",
+        "sm:px-3 sm:py-1 sm:text-sm"
+      )}
+    >
       {children}
     </div>
   );
diff --git a/src/components/ChatWindow.tsx b/src/components/ChatWindow.tsx
index 226887c..fc92c47 100644
--- a/src/components/ChatWindow.tsx
+++ b/src/components/ChatWindow.tsx
@@ -58,7 +58,7 @@ const MacWindowHeader = () => {
 
 const ChatMessage = ({ message }: { message: Message }) => {
   return (
-    <div className="mx-4 my-1 rounded-lg border-[2px] border-white/10 bg-white/20 p-3 font-mono hover:border-[#1E88E5]">
+    <div className="mx-4 my-1 rounded-lg border-[2px] border-white/10 bg-white/20 p-3 font-mono hover:border-[#1E88E5]/40">
       <div className="mr-2 inline-block h-[0.9em]">
         {getMessageIcon(message)}
       </div>
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 14bc137..9ce4f1f 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -17,7 +17,7 @@ const Input = ({
   disabled,
 }: InputProps) => {
   return (
-    <div className="flex w-full items-center rounded-xl bg-[#3a3a3a] font-mono text-lg text-white/75 shadow-2xl">
+    <div className="z-10 flex w-full items-center rounded-xl bg-[#3a3a3a] font-mono text-lg text-white/75 shadow-2xl">
       {left && (
         <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}
@@ -25,7 +25,7 @@ const Input = ({
       )}
       <input
         className={clsx(
-          "border:black delay-50 w-full rounded-xl border-[2px] border-white/10 bg-transparent px-2 py-3 tracking-wider outline-0 transition-all placeholder:text-white/20 hover:border-[#1E88E5]/25 focus:border-[#1E88E5]",
+          "border:black delay-50 w-full rounded-xl border-[2px] border-white/10 bg-transparent px-2 py-3 tracking-wider outline-0 transition-all placeholder:text-white/20 hover:border-[#1E88E5]/40 focus:border-[#1E88E5]",
           disabled && " cursor-not-allowed hover:border-white/10",
           left && "rounded-l-none"
         )}
diff --git a/src/layout/default.tsx b/src/layout/default.tsx
index 143646a..f86a0b7 100644
--- a/src/layout/default.tsx
+++ b/src/layout/default.tsx
@@ -13,7 +13,7 @@ const DefaultLayout = (props: LayoutProps) => {
   return (
     <div className="flex min-h-screen min-h-screen flex-col bg-gradient-to-b from-[#2B2B2B] to-[#1F1F1F]">
       <Head>
-        <title>Agent-GPT</title>
+        <title>AgentGPT</title>
         <meta name="description" content={description} />
         <link rel="icon" href="/favicon.ico" />
         <meta property="og:url" content="https://agentgpt.reworkd.ai/" />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 49c976d..985f1e7 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -37,26 +37,24 @@ const Home: NextPage = () => {
         <Drawer />
         <div
           id="content"
-          className="flex h-screen w-full items-center justify-center p-2"
+          className="flex h-screen w-full items-center justify-center p-2 px-4"
         >
           <div
             id="layout"
-            className="flex h-full w-full max-w-screen-lg flex-col items-center gap-3 py-10 md:justify-center"
+            className="flex h-full w-full max-w-screen-lg flex-col items-center justify-between gap-3 py-5 md:justify-center"
           >
             <div
               id="title"
               className="relative flex flex-col items-center font-mono"
             >
-              <div className="flex flex-row items-center shadow-2xl">
+              <div className="flex flex-row items-start shadow-2xl">
                 <span className="text-6xl font-bold text-[#C0C0C0]">Agent</span>
-                <span className="mr-5 text-6xl font-bold text-white">GPT</span>
-                <span className="absolute right-10 top-0 block hidden md:flex">
-                  <PopIn delay={0.5}>
-                    <Badge>Beta 🚀</Badge>
-                  </PopIn>
-                </span>
+                <span className="text-6xl font-bold text-white">GPT</span>
+                <PopIn delay={0.5}>
+                  <Badge>Beta 🚀</Badge>
+                </PopIn>
               </div>
-              <div className="mt-1 font-mono text-[0.8em] font-bold text-white">
+              <div className="mt-1 text-center font-mono text-[0.7em] font-bold text-white">
                 Assemble, configure, and deploy autonomous AI Agents in your
                 browser.
               </div>
@@ -66,31 +64,33 @@ const Home: NextPage = () => {
               <ChatWindow className="mt-4" messages={messages} />
             </Expand>
 
-            <Input
-              left={
-                <>
-                  <FaRobot />
-                  <span className="ml-2">Name:</span>
-                </>
-              }
-              value={name}
-              disabled={agent != null}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="AgentGPT (Note: this field doesn't do anything right now)"
-            />
+            <div className="mt-10 flex w-full flex-col gap-2">
+              <Input
+                left={
+                  <>
+                    <FaRobot />
+                    <span className="ml-2">Name:</span>
+                  </>
+                }
+                value={name}
+                disabled={agent != null}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="AgentGPT (Note: this field doesn't do anything right now)"
+              />
 
-            <Input
-              left={
-                <>
-                  <FaStar />
-                  <span className="ml-2">Goal:</span>
-                </>
-              }
-              disabled={agent != null}
-              value={goalInput}
-              onChange={(e) => setGoalInput(e.target.value)}
-              placeholder="Make the world a better place."
-            />
+              <Input
+                left={
+                  <>
+                    <FaStar />
+                    <span className="ml-2">Goal:</span>
+                  </>
+                }
+                disabled={agent != null}
+                value={goalInput}
+                onChange={(e) => setGoalInput(e.target.value)}
+                placeholder="Make the world a better place."
+              />
+            </div>
 
             <Button
               disabled={agent != null || name === "" || goalInput === ""}
