diff --git a/src/pages/invite/InviteBot.tsx b/src/pages/invite/InviteBot.tsx
index 8711d4fd..1b337910 100644
--- a/src/pages/invite/InviteBot.tsx
+++ b/src/pages/invite/InviteBot.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-literals */
 import { useParams } from "react-router-dom";
 import { API } from "revolt.js";
 import styled from "styled-components/macro";
@@ -11,21 +12,64 @@ import Markdown from "../../components/markdown/Markdown";
 import { useClient } from "../../controllers/client/ClientController";
 
 const BotInfo = styled.div`
-    gap: 12px;
     display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
     padding: 12px;
+    width: 100%;
+    margin: 20px 0;
+    border-radius: 10px;
 
-    h1,
-    p {
-        margin: 0;
+    .name {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        font-size: 1.5rem;
+        font-weight: 500;
+
+        h1 {
+            margin: 0;
+        }
+    }
+
+    .description {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        font-size: 1rem;
+        line-height: 1;
+        color: #ddd;
+        margin-top: 12px;
+        margin-bottom: 24px;
     }
 `;
 
 const Option = styled.div`
-    gap: 8px;
     display: flex;
-    margin-top: 4px;
-    margin-bottom: 12px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    width: 100%;
+    margin: 20px 0;
+
+    label {
+        font-size: 16px;
+        margin-right: 16px;
+    }
+
+    .select-container {
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+    }
 `;
 
 export default function InviteBot() {
@@ -38,71 +82,113 @@ export default function InviteBot() {
         // eslint-disable-next-line
     }, []);
 
-    const [server, setServer] = useState("none");
-    const [group, setGroup] = useState("none");
+    const [server, setServer] = useState<string | undefined>(undefined);
+    const [group, setGroup] = useState<string | undefined>(undefined);
+    const [selectedOption, setSelectedOption] = useState("");
+
+    const handleAdd = () => {
+        if (selectedOption === "server" && server) {
+            client.bots.invite(data!._id, { server });
+        } else if (selectedOption === "group" && group) {
+            client.bots.invite(data!._id, { group });
+        }
+    };
 
     return (
-        <div style={{ padding: "6em" }}>
+        <div
+            style={{
+                padding: "6em",
+                overflowY: "auto",
+            }}>
             <Tip palette="warning">This section is under construction.</Tip>
             {typeof data === "undefined" && <Preloader type="spinner" />}
             {data && (
                 <>
-                    <BotInfo>
-                        <UserIcon size={64} attachment={data.avatar} />
+                    <BotInfo
+                        style={{
+                            padding: "16px",
+                        }}>
                         <div className="name">
+                            <UserIcon size={64} attachment={data.avatar} />
                             <h1>{data.username}</h1>
-                            {data.description && (
-                                <Markdown content={data.description} />
-                            )}
                         </div>
+                        {data.description && (
+                            <div className="description">
+                                <Markdown content={data.description} />
+                            </div>
+                        )}
                     </BotInfo>
-                    <Category>Add to server</Category>
                     <Option>
-                        <ComboBox
-                            value={server}
-                            onChange={(e) => setServer(e.currentTarget.value)}>
-                            <option value="none">Select a server</option>
-                            {[...client.servers.values()]
-                                .filter((x) => x.havePermission("ManageServer"))
-                                .map((server) => (
-                                    <option value={server._id} key={server._id}>
-                                        {server.name}
-                                    </option>
-                                ))}
-                        </ComboBox>
-                        <Button
-                            palette="secondary"
-                            onClick={() =>
-                                server !== "none" &&
-                                client.bots.invite(data._id, { server })
-                            }>
-                            Add
-                        </Button>
-                    </Option>
-                    <Category>Add to group</Category>
-                    <Option>
-                        <ComboBox
-                            value={group}
-                            onChange={(e) => setGroup(e.currentTarget.value)}>
-                            <option value="none">Select a group</option>
-                            {[...client.channels.values()]
-                                .filter((x) => x.channel_type === "Group")
-                                .map((channel) => (
-                                    <option
-                                        value={channel._id}
-                                        key={channel._id}>
-                                        {channel.name}
-                                    </option>
-                                ))}
-                        </ComboBox>
-                        <Button
-                            palette="secondary"
-                            onClick={() =>
-                                group !== "none" &&
-                                client.bots.invite(data._id, { group })
-                            }>
-                            Add
-                        </Button>
+                        <Category>
+                            Add this bot to your Revolt server, group
+                        </Category>
+                        <div className="select-container">
+                            <ComboBox
+                                id="server-select"
+                                value={selectedOption}
+                                onChange={(e) =>
+                                    setSelectedOption(e.currentTarget.value)
+                                }>
+                                <option value="">Select an option</option>
+                                <option value="server">Server</option>
+                                <option value="group">Group</option>
+                            </ComboBox>
+                            {selectedOption === "server" && (
+                                <div className="select-container">
+                                    <ComboBox
+                                        id="server-select"
+                                        value={server}
+                                        onChange={(e) =>
+                                            setServer(e.currentTarget.value)
+                                        }>
+                                        <option value="none">
+                                            Select a server
+                                        </option>
+                                        {[...client.servers.values()]
+                                            .filter((x) =>
+                                                x.havePermission(
+                                                    "ManageServer",
+                                                ),
+                                            )
+                                            .map((server) => (
+                                                <option
+                                                    value={server._id}
+                                                    key={server._id}>
+                                                    {server.name}
+                                                </option>
+                                            ))}
+                                    </ComboBox>
+                                </div>
+                            )}
+                            {selectedOption === "group" && (
+                                <div className="select-container">
+                                    <ComboBox
+                                        value={group}
+                                        onChange={(e) =>
+                                            setGroup(e.currentTarget.value)
+                                        }>
+                                        <option value="none">
+                                            Select a group
+                                        </option>
+                                        {[...client.channels.values()]
+                                            .filter(
+                                                (x) =>
+                                                    x.channel_type === "Group",
+                                            )
+                                            .map((channel) => (
+                                                <option
+                                                    value={channel._id}
+                                                    key={channel._id}>
+                                                    {channel.name}
+                                                </option>
+                                            ))}
+                                    </ComboBox>
+                                </div>
+                            )}
+                            <Button palette="secondary" onClick={handleAdd}>
+                                Add Bot
+                            </Button>
+                        </div>
                     </Option>
                 </>
             )}