diff --git a/src/handbook/src/backend/server.ts b/src/handbook/src/backend/server.ts
new file mode 100644
index 000000000..b015287c7
--- /dev/null
+++ b/src/handbook/src/backend/server.ts
@@ -0,0 +1,34 @@
+import type { CommandResponse } from "@backend/types";
+
+let targetPlayer = 0; // The UID of the target player.
+
+/**
+ * Sets the target player.
+ *
+ * @param player The UID of the target player.
+ */
+export function setTargetPlayer(player: number): void {
+    targetPlayer = player;
+    console.log(`Target Player is now: ${targetPlayer}`);
+}
+
+/**
+ * Grants an avatar to a player.
+ *
+ * @param avatar The avatar's ID.
+ * @param level The avatar's level.
+ * @param constellations The avatar's unlocked constellations.
+ * @param talents The level for the avatar's talents.
+ */
+export async function grantAvatar(
+    avatar: number, level = 90,
+    constellations = 6, talents = 6
+): Promise<CommandResponse> {
+    return await fetch(`https://localhost:443/handbook/avatar`, {
+        method: "POST", body: JSON.stringify({
+            player: targetPlayer.toString(),
+            avatar: avatar.toString(),
+            level, constellations, talentLevels: talents
+        })
+    }).then(res => res.json());
+}
diff --git a/src/handbook/src/backend/types.ts b/src/handbook/src/backend/types.ts
index 5213fe621..deb6a4c04 100644
--- a/src/handbook/src/backend/types.ts
+++ b/src/handbook/src/backend/types.ts
@@ -118,6 +118,11 @@ export enum ItemCategory {
     Miscellaneous
 }
 
+export type CommandResponse = {
+    status: number | 200 | 500;
+    message: string;
+}
+
 /**
  * Checks if a string is a page.
  *
diff --git a/src/handbook/src/ui/pages/AvatarsPage.tsx b/src/handbook/src/ui/pages/AvatarsPage.tsx
index a5e93b988..c51b99f8a 100644
--- a/src/handbook/src/ui/pages/AvatarsPage.tsx
+++ b/src/handbook/src/ui/pages/AvatarsPage.tsx
@@ -2,11 +2,23 @@ import React from "react";
 
 import Character from "@app/ui/widgets/Character";
 
+import type { Avatar } from "@backend/types";
 import { listAvatars } from "@backend/data";
+import { grantAvatar } from "@backend/server";
 
 import "@css/pages/AvatarsPage.scss";
 
 class AvatarsPage extends React.PureComponent {
+    /**
+     * Grants the avatar to the user.
+     *
+     * @param avatar The avatar to grant.
+     * @private
+     */
+    private async grantAvatar(avatar: Avatar): Promise<void> {
+        console.log(await grantAvatar(avatar.id));
+    }
+
     render() {
         return (
             <div className={"AvatarsPage"}>
@@ -14,7 +26,11 @@ class AvatarsPage extends React.PureComponent {
 
                 <div className={"AvatarsPage_List"}>
                     {listAvatars().map((avatar) =>
-                        avatar.id > 11000000 ? undefined : <Character key={avatar.id} data={avatar} />
+                        avatar.id > 11000000 ? undefined :
+                            <Character
+                                key={avatar.id} data={avatar}
+                                onClick={this.grantAvatar.bind(this, avatar)}
+                            />
                     )}
                 </div>
             </div>
diff --git a/src/handbook/src/ui/views/SideBar.tsx b/src/handbook/src/ui/views/SideBar.tsx
index b7eb8c96d..7181acd92 100644
--- a/src/handbook/src/ui/views/SideBar.tsx
+++ b/src/handbook/src/ui/views/SideBar.tsx
@@ -5,6 +5,7 @@ import SideBarButton from "@app/ui/widgets/SideBarButton";
 import { navigate } from "@app/backend/events";
 
 import "@css/views/SideBar.scss";
+import { setTargetPlayer } from "@backend/server";
 
 interface IState {
     uid: string | null;
@@ -31,6 +32,7 @@ class SideBar extends React.Component<{}, IState> {
         if (uid && uid.length > 10) return;
 
         this.setState({ uid });
+        setTargetPlayer(parseInt(uid ?? "0"));
     }
 
     render() {
diff --git a/src/handbook/src/ui/widgets/Character.tsx b/src/handbook/src/ui/widgets/Character.tsx
index ee1ae6265..c2b2a8fa1 100644
--- a/src/handbook/src/ui/widgets/Character.tsx
+++ b/src/handbook/src/ui/widgets/Character.tsx
@@ -18,6 +18,8 @@ const nameSwitch: { [key: number]: string } = {
 
 interface IProps {
     data: Avatar;
+
+    onClick?: () => void;
 }
 
 class Character extends React.PureComponent<IProps> {
@@ -33,7 +35,11 @@ class Character extends React.PureComponent<IProps> {
         if (ignored.includes(id)) return undefined;
 
         return (
-            <div className={"Character"} style={{ backgroundColor: `var(${qualityColor})` }}>
+            <div
+                className={"Character"}
+                style={{ backgroundColor: `var(${qualityColor})` }}
+                onClick={this.props.onClick}
+            >
                 <img
                     className={"Character_Icon"}
                     alt={name}