diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index bd8df38..41ff26a 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -1,7 +1,7 @@
 enum RoleValue {
     USER
     ADMIN
-    MATT
+    VIP
 }
 
 generator client {
diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
index d66a1cd..0a081d0 100644
--- a/src/pages/admin/index.tsx
+++ b/src/pages/admin/index.tsx
@@ -5,6 +5,7 @@ import { AiOutlineClear } from "react-icons/ai";
 import { FaShieldAlt } from "react-icons/fa";
 import { IoTrashBinOutline } from "react-icons/io5";
 import { SiGithub, SiGoogle } from "react-icons/si";
+import { GiStarFormation } from "react-icons/gi";
 import { api } from "~/utils/api";
 import type { Role } from "~/utils/types";
 import { getServerAuthSession } from "../../server/auth";
@@ -158,70 +159,70 @@ const AdminBody: React.FC = () => {
         <div className="stat">
           <div className="stat-title">Users</div>
           <div className="stat-value">
-            { usersCountLoading || usersCountFetching ? (
+            {usersCountLoading || usersCountFetching ? (
               <span className="loading loading-dots loading-lg"></span>
             ) : (
-              <>{ usersCount ? usersCount : "0" }</>
-            ) }
+              <>{usersCount ? usersCount : "0"}</>
+            )}
           </div>
         </div>
 
         <div className="stat">
           <div className="stat-title">Rooms</div>
           <div className="stat-value">
-            { roomsCountLoading || roomsCountFetching ? (
+            {roomsCountLoading || roomsCountFetching ? (
               <span className="loading loading-dots loading-lg"></span>
             ) : (
-              <>{ roomsCount ? roomsCount : "0" }</>
-            ) }
+              <>{roomsCount ? roomsCount : "0"}</>
+            )}
           </div>
         </div>
 
         <div className="stat">
           <div className="stat-title">Votes</div>
           <div className="stat-value">
-            { votesCountLoading || votesCountFetching ? (
+            {votesCountLoading || votesCountFetching ? (
               <span className="loading loading-dots loading-lg"></span>
             ) : (
-              <>{ votesCount ? votesCount : "0" }</>
-            ) }
+              <>{votesCount ? votesCount : "0"}</>
+            )}
           </div>
         </div>
       </div>
 
-      { usersCountFetching ||
-        usersFetching ||
-        roomsCountFetching ||
-        votesCountFetching ? (
+      {usersCountFetching ||
+      usersFetching ||
+      roomsCountFetching ||
+      votesCountFetching ? (
         <span className="loading loading-dots loading-lg"></span>
       ) : (
         <div className="flex flex-row flex-wrap text-center items-center justify-center gap-2">
           <button
             className="btn btn-primary m-2"
-            onClick={ () => void clearSessionsHandler() }
+            onClick={() => void clearSessionsHandler()}
           >
             Delete All Sessions
           </button>
 
           <button
             className="btn btn-primary"
-            onClick={ () => void refetchData() }
+            onClick={() => void refetchData()}
           >
             Re-fetch
           </button>
         </div>
-      ) }
+      )}
 
       <div className="card max-w-[80vw] bg-neutral shadow-xl m-4">
         <div className="card-body">
           <h2 className="card-title">Users:</h2>
 
-          { usersLoading || usersFetching ? (
+          {usersLoading || usersFetching ? (
             <span className="loading loading-dots loading-lg"></span>
           ) : (
             <div className="overflow-x-scroll">
               <table className="table text-center">
-                {/* head */ }
+                {/* head */}
                 <thead>
                   <tr className="border-white">
                     <th>ID</th>
@@ -233,55 +234,72 @@ const AdminBody: React.FC = () => {
                   </tr>
                 </thead>
                 <tbody className="">
-                  { users
+                  {users
                     ?.sort((user1, user2) =>
                       user2.createdAt > user1.createdAt ? 1 : -1
                     )
                     .map((user) => {
                       return (
-                        <tr key={ user.id } className="hover">
+                        <tr key={user.id} className="hover">
                           <td className="max-w-[100px] break-words">
-                            { user.id }
+                            {user.id}
                           </td>
 
                           <td className="max-w-[100px] break-normal">
-                            { user.name }
+                            {user.name}
                           </td>
                           <td className="max-w-[100px] break-normal">
-                            { user.createdAt.toLocaleDateString() }
+                            {user.createdAt.toLocaleDateString()}
                           </td>
                           <td className="max-w-[100px] break-normal">
-                            { user.sessions.length }
+                            {user.sessions.length}
                           </td>
                           <td className="max-w-[100px] break-normal">
-                            { getProviders(user).includes("google") && (
+                            {getProviders(user).includes("google") && (
                               <SiGoogle className="text-xl m-1 inline-block hover:text-secondary" />
-                            ) }
-                            { getProviders(user).includes("github") && (
+                            )}
+                            {getProviders(user).includes("github") && (
                               <SiGithub className="text-xl m-1 inline-block hover:text-secondary" />
-                            ) }
+                            )}
                           </td>
                           <td>
                             <button className="m-2">
-                              { user.role === "ADMIN" ? (
+                              {user.role === "ADMIN" ? (
                                 <FaShieldAlt
                                   className="text-xl inline-block text-primary"
-                                  onClick={ () =>
+                                  onClick={() =>
                                     void setUserRoleHandler(user.id, "USER")
                                   }
                                 />
                               ) : (
                                 <FaShieldAlt
                                   className="text-xl inline-block"
-                                  onClick={ () =>
+                                  onClick={() =>
                                     void setUserRoleHandler(user.id, "ADMIN")
                                   }
                                 />
-                              ) }
+                              )}
+                            </button>
+                            <button className="m-2">
+                              {user.role === "VIP" ? (
+                                <GiStarFormation
+                                  className="text-xl inline-block text-secondary"
+                                  onClick={() =>
+                                    void setUserRoleHandler(user.id, "USER")
+                                  }
+                                />
+                              ) : (
+                                <GiStarFormation
+                                  className="text-xl inline-block"
+                                  onClick={() =>
+                                    void setUserRoleHandler(user.id, "VIP")
+                                  }
+                                />
+                              )}
                             </button>
                             <button
                               className="m-2"
-                              onClick={ () =>
+                              onClick={() =>
                                 void clearSessionsByUserHandler(user.id)
                               }
                             >
@@ -289,18 +307,18 @@ const AdminBody: React.FC = () => {
                             </button>
                             <button
                               className="m-2"
-                              onClick={ () => void deleteUserHandler(user.id) }
+                              onClick={() => void deleteUserHandler(user.id)}
                             >
                               <IoTrashBinOutline className="text-xl inline-block hover:text-error" />
                             </button>
                           </td>
                         </tr>
                       );
-                    }) }
+                    })}
                 </tbody>
               </table>
             </div>
-          ) }
+          )}
         </div>
       </div>
     </>
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 6ad31f0..7ed5495 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -8,6 +8,7 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import { FaShieldAlt } from "react-icons/fa";
 import { getServerAuthSession } from "~/server/auth";
+import { GiStarFormation } from "react-icons/gi";
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const session = await getServerAuthSession(ctx);
@@ -57,20 +58,23 @@ const HomePageBody: React.FC = () => {
   return (
     <>
       <h1 className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-4xl font-bold mx-auto">
-        Hi, { sessionData?.user.name }!{ " " }
-        { sessionData?.user.role === "ADMIN" && (
+        Hi, {sessionData?.user.name}!{" "}
+        {sessionData?.user.role === "ADMIN" && (
           <FaShieldAlt className="inline-block text-primary" />
-        ) }
+        )}
+        {sessionData?.user.role === "VIP" && (
+          <GiStarFormation className="inline-block text-secondary" />
+        )}
       </h1>
       <div className="tabs tabs-boxed border-2 border-cyan-500 mb-4">
         <a
           className={
             tabIndex === 0 ? "tab no-underline tab-active" : "tab no-underline"
           }
-          onClick={ () => {
+          onClick={() => {
             setTabIndex(0);
             localStorage.setItem("dashboardTabIndex", "0");
-          } }
+          }}
         >
           Join a Room
         </a>
@@ -78,36 +82,36 @@ const HomePageBody: React.FC = () => {
           className={
             tabIndex === 1 ? "tab no-underline tab-active" : "tab no-underline"
           }
-          onClick={ () => {
+          onClick={() => {
             setTabIndex(1);
             localStorage.setItem("dashboardTabIndex", "1");
-          } }
+          }}
         >
           Room List
         </a>
       </div>
 
-      { tabIndex === 0 && (
+      {tabIndex === 0 && (
         <>
           <input
             type="text"
             placeholder="Enter Room ID"
             className="input input-bordered input-primary mb-4"
-            onChange={ (event) => {
+            onChange={(event) => {
               console.log(event.target.value);
               setJoinRoomTextBox(event.target.value);
-            } }
+            }}
           />
           <Link
-            href={ joinRoomTextBox.length > 0 ? `/room/${joinRoomTextBox}` : "/" }
+            href={joinRoomTextBox.length > 0 ? `/room/${joinRoomTextBox}` : "/"}
             className="btn btn-secondary"
           >
             Join Room
           </Link>
         </>
-      ) }
+      )}
 
-      { tabIndex === 1 && <RoomList /> }
+      {tabIndex === 1 && <RoomList />}
     </>
   );
 };
diff --git a/src/pages/room/[id].tsx b/src/pages/room/[id].tsx
index 68652a1..29c15d0 100644
--- a/src/pages/room/[id].tsx
+++ b/src/pages/room/[id].tsx
@@ -311,10 +311,10 @@ const RoomBody: React.FC = ({}) => {
                                 <FaShieldAlt className="inline-block text-primary" />
                               </div>
                             )}{" "}
-                            {presenceItem.data.role === "MATT" && (
+                            {presenceItem.data.role === "VIP" && (
                               <div
                                 className="tooltip tooltip-secondary"
-                                data-tip="Matt"
+                                data-tip="VIP"
                               >
                                 <GiStarFormation className="inline-block text-secondary" />
                               </div>
diff --git a/src/server/api/routers/user.ts b/src/server/api/routers/user.ts
index d7eff4f..f5995cf 100644
--- a/src/server/api/routers/user.ts
+++ b/src/server/api/routers/user.ts
@@ -153,7 +153,11 @@ export const userRouter = createTRPCRouter({
     .input(
       z.object({
         userId: z.string(),
-        role: z.union([z.literal("ADMIN"), z.literal("USER")]),
+        role: z.union([
+          z.literal("ADMIN"),
+          z.literal("USER"),
+          z.literal("VIP"),
+        ]),
       })
     )
     .mutation(async ({ ctx, input }) => {
diff --git a/src/utils/types.ts b/src/utils/types.ts
index f2a5477..cf71bb6 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -10,7 +10,7 @@ export type EventType = BetterEnum<typeof EventTypes>;
 const RoleValues = {
   ADMIN: "ADMIN",
   USER: "USER",
-  MATT: "MATT",
+  VIP: "VIP",
 } as const;
 export type Role = BetterEnum<typeof RoleValues>;