diff --git a/src/app/private/[uid]/chapter-leader/pending/PendingHomePage.tsx b/src/app/private/[uid]/chapter-leader/pending/PendingHomePage.tsx
index 963bf477..27167fcc 100644
--- a/src/app/private/[uid]/chapter-leader/pending/PendingHomePage.tsx
+++ b/src/app/private/[uid]/chapter-leader/pending/PendingHomePage.tsx
@@ -16,6 +16,7 @@ const PendingHomePage = ({ users }: MembersHomePageProps) => {
       </h1>
       {users.length > 0 ? (
         <CardGrid
+          column_count={2}
           tiles={users.map((user, index) => {
             return (
               <PendingCard key={index} name={user.name ?? ""} uid={user.id} />
diff --git a/src/app/private/[uid]/user/home/@joinChapter/page.tsx b/src/app/private/[uid]/user/home/@joinChapter/page.tsx
deleted file mode 100644
index 6440defe..00000000
--- a/src/app/private/[uid]/user/home/@joinChapter/page.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { UserJoinRequest } from "@components/user";
-import { prisma } from "@server/db/client";
-
-interface UserHomePageParams {
-  params: {
-    uid: string;
-  };
-}
-
-const UserJoinChapterPage = async ({ params }: UserHomePageParams) => {
-  const chapters = await prisma.chapter.findMany({
-    include: {
-      students: true,
-    },
-  });
-  const joinRequest = await prisma.userRequest.findFirst({
-    where: {
-      uid: params.uid,
-    },
-  });
-
-  return (
-    <UserJoinRequest
-      chapters={chapters}
-      joinRequest={joinRequest}
-      uid={params.uid}
-    />
-  );
-};
-
-export default UserJoinChapterPage;
diff --git a/src/app/private/[uid]/user/home/layout.tsx b/src/app/private/[uid]/user/home/layout.tsx
index db94c44b..90038e3d 100644
--- a/src/app/private/[uid]/user/home/layout.tsx
+++ b/src/app/private/[uid]/user/home/layout.tsx
@@ -1,22 +1,21 @@
 import { prisma } from "@server/db/client";
 import { HeaderContainer } from "@components/container/index";
 import { faHouse } from "@fortawesome/free-solid-svg-icons";
+import { UserJoinRequest } from "@components/user";
 
 interface LayoutProps {
   children: React.ReactNode;
-  joinChapter: React.ReactNode;
   params: {
     uid: string;
   };
 }
 
-const Layout = async ({ children, params, joinChapter }: LayoutProps) => {
+const Layout = async ({ children, params }: LayoutProps) => {
   const user = await prisma.user.findFirstOrThrow({
     where: {
       id: params.uid,
     },
   });
-
   if (user.ChapterID != null) {
     return (
       <HeaderContainer
@@ -28,7 +27,15 @@ const Layout = async ({ children, params, joinChapter }: LayoutProps) => {
       </HeaderContainer>
     );
   } else {
-    return joinChapter;
+    const chapters = await prisma.chapter.findMany({
+      include: { students: true },
+    });
+    const joinRequest = await prisma.userRequest.findFirst({
+      where: {
+        uid: params.uid,
+      },
+    });
+    return <UserJoinRequest chapters={chapters} joinRequest={joinRequest} />;
   }
 };
 
diff --git a/src/app/private/[uid]/user/home/page.tsx b/src/app/private/[uid]/user/home/page.tsx
index 7ceb9441..d03aac98 100644
--- a/src/app/private/[uid]/user/home/page.tsx
+++ b/src/app/private/[uid]/user/home/page.tsx
@@ -13,6 +13,11 @@ const UserHomePage = async ({ params }: UserHomePageParams) => {
       id: params.uid,
     },
   });
+
+  if (user.ChapterID == null) {
+    return null;
+  }
+
   const chapter = await prisma.chapter.findFirstOrThrow({
     where: {
       id: user.ChapterID ?? "",
diff --git a/src/components/TileGrid/UserRequestTile.tsx b/src/components/TileGrid/UserRequestTile.tsx
deleted file mode 100644
index 58c70192..00000000
--- a/src/components/TileGrid/UserRequestTile.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-"use client";
-
-import React from "react";
-import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
-import "@fortawesome/fontawesome-svg-core/styles.css";
-
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Prisma } from "@prisma/client";
-import Link from "next/link";
-
-type ChapterWithUser = Prisma.ChapterGetPayload<{
-  include: { students: true };
-}>;
-
-interface ChapterTileProps {
-  chapter: ChapterWithUser;
-  topRightButton?: React.ReactNode;
-}
-
-export function UserRequestTile({ chapter, topRightButton }: ChapterTileProps) {
-  let yearsActive =
-    (new Date().getTime() - chapter.dateCreated.getTime()) / 1000;
-  yearsActive /= 60 * 60 * 24;
-  yearsActive = Math.abs(Math.round(yearsActive / 365.25));
-
-  const president = React.useMemo(() => {
-    return chapter.students.find((user) => user.role === "CHAPTER_LEADER");
-  }, [chapter]);
-
-  return (
-    <div className="w-full rounded-xl bg-white p-6">
-      <div className="mb-2.5 flex items-center justify-between gap-2.5">
-        <div className="text-2xl underline">{chapter.chapterName}</div>
-        {topRightButton}
-      </div>
-      <div className="flex w-full gap-2.5">
-        <div className="flex w-6/12 flex-col gap-2.5">
-          <div>
-            No. of members:&nbsp;
-            <span className="font-bold">{chapter.students.length}</span>
-          </div>
-          <div>
-            Years active:&nbsp;<span className="font-bold">{yearsActive}</span>
-          </div>
-        </div>
-        <div className="flex w-6/12 flex-col gap-2.5">
-          <div className="w-full truncate">
-            President:&nbsp;
-            <span className="font-bold">{president?.name ?? ""}</span>
-          </div>
-          <div className="flex items-center gap-1">
-            <FontAwesomeIcon icon={faEnvelope} />
-            <span className="w-full truncate">{president?.email ?? ""}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/user/UserJoinRequest.tsx b/src/components/user/UserJoinRequest.tsx
index 0e7d087e..34538683 100644
--- a/src/components/user/UserJoinRequest.tsx
+++ b/src/components/user/UserJoinRequest.tsx
@@ -1,17 +1,23 @@
 "use client";
 
-import { UserRequestTile } from "@components/TileGrid/UserRequestTile";
 import { Prisma, UserRequest } from "@prisma/client";
 import { TileEdit } from "../TileGrid/TileEdit";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEllipsis, faRotateLeft } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCheck,
+  faEllipsis,
+  faRotateLeft,
+} from "@fortawesome/free-solid-svg-icons";
 import {
   handleJoinChapterRequest,
   handleManageChapterRequest,
 } from "@api/user-request/route.client";
 import { useRouter } from "next/navigation";
 import { CardGrid } from "@components/container";
-import { Card } from "@material-tailwind/react";
+import { UserContext } from "@context/UserProvider";
+import React from "react";
+import { InfoTile } from "@components/TileGrid";
+import { fullName } from "@utils";
 
 type ChapterWithUser = Prisma.ChapterGetPayload<{
   include: { students: true };
@@ -20,86 +26,77 @@ type ChapterWithUser = Prisma.ChapterGetPayload<{
 interface UserJoinRequestProps {
   chapters: ChapterWithUser[];
   joinRequest: UserRequest | null;
-  uid: string;
 }
 
 const UserJoinRequest = (props: UserJoinRequestProps) => {
   const { chapters, joinRequest } = props;
+  const userContext = React.useContext(UserContext);
   const router = useRouter();
 
   return (
-    // TODO(nickbar01234) - Add padding bottom
-    <div className="flex h-full w-full flex-col gap-y-6  px-7 pt-[104px]">
+    <div className="flex h-full w-full flex-col gap-y-6  px-7 py-[104px]">
       <p className="text-center text-4xl"> Welcome To The Legacy Project</p>
       <p className="text-2xl font-bold">Join a Chapter Below:</p>
       <CardGrid
         column_count={2}
         tiles={chapters.map((chapter) => {
-          const options: Parameters<typeof TileEdit>[0]["options"] = [
-            {
-              name: "Undo request",
-              onClick: () => {
-                handleManageChapterRequest({
-                  body: {
-                    userId: props.uid,
-                  },
-                }).then((res) => {
-                  console.log(res);
-                  router.refresh();
-                });
-              },
-              color: "#22555A",
-              icon: <FontAwesomeIcon icon={faRotateLeft} />,
-            },
-          ];
+          let yearsActive =
+            (new Date().getTime() - chapter.dateCreated.getTime()) / 1000;
+          yearsActive /= 60 * 60 * 24;
+          yearsActive = Math.abs(Math.round(yearsActive / 365.25));
+
+          const prez = chapter.students.find(
+            (user) => user.role === "CHAPTER_LEADER"
+          );
+
           return (
-            <div
-              className="col-span-2 flex w-full flex-col gap-y-1.5 md:col-span-1"
+            <InfoTile
               key={chapter.id}
-            >
-              <UserRequestTile
-                chapter={chapter}
-                topRightButton={
-                  joinRequest?.chapterId === chapter.id ? (
-                    <TileEdit
-                      options={options}
-                      icon={<FontAwesomeIcon icon={faEllipsis} size="lg" />}
-                    />
-                  ) : undefined
-                }
-              />
-              {joinRequest?.chapterId === chapter.id ? (
-                <div className="w-full rounded-xl bg-[#A6A6A6] py-1 text-center text-white">
-                  Request Pending
-                </div>
-              ) : (
-                <div
-                  className={`w-full rounded-xl py-1 text-center text-white 
-                  ${
-                    joinRequest == null
-                      ? "cursor-pointer bg-dark-green hover:bg-[#1b4448]"
-                      : "bg-[#A6A6A6]"
-                  }`}
-                  //Bug of not updating buttons
-                  onClick={
-                    joinRequest == null
-                      ? () => {
-                          handleJoinChapterRequest({
-                            body: {
-                              chapterId: chapter.id,
-                            },
-                          }).then((res) => {
-                            console.log(res);
-                            router.refresh();
-                          });
-                        }
-                      : undefined
-                  }
-                >
-                  Join
-                </div>
-              )}
-            </div>
+              title={chapter.chapterName}
+              information={[
+                { key: "No. of members", value: chapter.students.length },
+                {
+                  key: "President",
+                  value:
+                    prez != undefined
+                      ? fullName(prez)
+                      : "This chapter has no president",
+                },
+                {
+                  key: "Years active",
+                  value: yearsActive,
+                },
+                {
+                  key: "Email",
+                  value: prez?.email ?? "",
+                },
+              ]}
+              topRightButton={
+                joinRequest == null ? (
+                  <button
+                    className="rounded bg-dark-teal px-5 py-2 text-sm text-white transition duration-300 ease-in-out hover:-translate-y-1"
+                    onClick={() =>
+                      handleJoinChapterRequest({
+                        body: { chapterId: chapter.id },
+                      }).then(() => router.refresh())
+                    }
+                  >
+                    Join
+                  </button>
+                ) : joinRequest.chapterId === chapter.id ? (
+                  <button
+                    className="rounded bg-dark-teal px-5 py-2 text-sm text-white transition duration-300 ease-in-out hover:-translate-y-1"
+                    onClick={() =>
+                      handleManageChapterRequest({
+                        body: { userId: userContext.user.id },
+                      }).then(() => router.refresh())
+                    }
+                  >
+                    Undo
+                  </button>
+                ) : null
+              }
+            />
           );
         })}
       />