diff --git a/.github/assets/slrn_groups-dark.gif b/.github/assets/slrn_groups-dark.gif
new file mode 100644
index 0000000..78cdebd
Binary files /dev/null and b/.github/assets/slrn_groups-dark.gif differ
diff --git a/.github/assets/slrn_groups-light.gif b/.github/assets/slrn_groups-light.gif
new file mode 100644
index 0000000..f28105d
Binary files /dev/null and b/.github/assets/slrn_groups-light.gif differ
diff --git a/README.md b/README.md
index 4c947bf..82b6dc6 100644
--- a/README.md
+++ b/README.md
@@ -1,19 +1,41 @@
 # slrn_groups
+![Lint](https://github.com/solareon/slrn_groups/actions/workflows/lint.yml/badge.svg)
+![CI](https://github.com/solareon/slrn_groups/actions/workflows/ci.yml/badge.svg)
+
 A group app for [lb-phone](https://lbphone.com/) the provides `qb-phone` compatible exports. This should work with most resources that expect a `qb-phone` style group.
 
 **QBOX/QB/ESX/ND/OX supported with bridge**
 
-![CI](https://github.com/solareon/slrn_groups/actions/workflows/ci.yml/badge.svg)
-![Lint](https://github.com/solareon/slrn_groups/actions/workflows/lint.yml/badge.svg)
+# Preview
+
+Light Mode             |  Dark Mode
+:-------------------------:|:-------------------------:
+![Light mode preview image](.github/assets/slrn_groups-light.gif)  |  ![Dark mode preview image](.github/assets/slrn_groups-dark.gif)
 
-## Installation
+
+# Installation
 Download the [release version](https://github.com/solareon/slrn_groups/releases) and copy to your server.
 
+# Customizing and building from source
+Download the latest commit and navigate to the ui folder
+```bash copy
+pnpm i
+```
+Then to preview the UI. You can also switch the UI path in the app registration (switch the commented lines) and then the game will display the preview running from vite.
+```bash copy
+pnpm start
+```
+Or to build for production
+```bash copy
+pnpm build
+```
+
 # Support
 - [Discord](https://discord.gg/TZFBBHvG6E)
 
 # Credits
 - [FjamZoo](https://github.com/FjamZoo) for rewriting groups layer
+- [MaxReinold](https://github.com/MaxReinold) for making a slick UI
 - [RijayJH](https://github.com/RijayJH/rj_groups-for-lb_phone) for original idea
 - [overextended](https://github.com/overextended) for ox_lib
 
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index a8c11f1..7de0b80 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -92,7 +92,7 @@ const App = () => {
   return (
     <AppProvider>
       <div
-        className="size-full text-center text-text gap-4 bg-background"
+        className="size-full text-center text-text gap-4 bg-background h-screen p-4 px-6"
         ref={appDiv}
         data-theme={theme}
       >
@@ -102,7 +102,7 @@ const App = () => {
           </button>
         )}
         <div>&nbsp;</div>
-        <div className="text-left text-4xl font-bold mt-6 mb-2 pt-2">Groups</div>
+        <div className="text-left text-4xl font-extralight mt-6 mb-2 pt-2">Groups</div>
         {currentPage === "GroupDashboard" && (
           <GroupDashboard
             setCurrentPage={setCurrentPage} fetchNui={fetchNui}
diff --git a/ui/src/components/ConfirmationDialog.tsx b/ui/src/components/ConfirmationDialog.tsx
index 571f01c..585f29a 100644
--- a/ui/src/components/ConfirmationDialog.tsx
+++ b/ui/src/components/ConfirmationDialog.tsx
@@ -4,18 +4,18 @@ const ConfirmationDialog = ({ onClose, onConfirm, confirmation}) => {
   return (
     <div className="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center">
       <div className="bg-background border border-primary rounded-lg p-6 w-11/12">
-        <h2 className="text-text text-xl font-semibold mb-4">
+        <h2 className="text-text text-xl font-normal mb-8">
           {confirmation.message}
         </h2>
         <div className="flex justify-end space-x-4">
           <button
-            className="px-4 py-2 bg-primary rounded hover:bg-secondary"
+            className="px-4 py-2 bg-primary rounded-lg transition-all shadow-sm hover:bg-secondary hover:scale-105 hover:shadow-lg w-1/2"
             onClick={onClose}
           >
             No
           </button>
           <button
-            className="px-4 py-2 bg-primary rounded hover:bg-danger"
+            className="px-4 py-2 bg-primary hover:bg-danger rounded-lg transition-all shadow-sm hover:scale-105 hover:shadow-lg w-1/2"
             onClick={onConfirm}
           >
             Yes
@@ -26,4 +26,4 @@ const ConfirmationDialog = ({ onClose, onConfirm, confirmation}) => {
   );
 };
 
-export default ConfirmationDialog;
+export default ConfirmationDialog
\ No newline at end of file
diff --git a/ui/src/components/CreateGroup.tsx b/ui/src/components/CreateGroup.tsx
index eeb3499..b1f21db 100644
--- a/ui/src/components/CreateGroup.tsx
+++ b/ui/src/components/CreateGroup.tsx
@@ -4,6 +4,7 @@ import { faXmark } from "@fortawesome/free-solid-svg-icons";
 
 const CreateGroup: React.FC<any> = ({ onSelect, onClose }) => {
   const [groupName, setGroupName] = useState("");
+  const [first, setFirst] = useState(true);
   const [disabledReason, setDisabledReason] = useState("");
   const [password, setPassword] = useState("");
   const [verifyPassword, setVerifyPassword] = useState("");
@@ -18,7 +19,12 @@ const CreateGroup: React.FC<any> = ({ onSelect, onClose }) => {
     } else if (password !== verifyPassword) {
       reason = "Passwords do not match";
     }
-    setDisabledReason(reason);
+    if(first) {
+      setFirst(false);
+      setDisabledReason('')
+    } else {
+      setDisabledReason(reason);
+    }
     setIsSubmitDisabled(reason !== "");
   }, [password, verifyPassword, groupName]);
 
@@ -32,13 +38,13 @@ const CreateGroup: React.FC<any> = ({ onSelect, onClose }) => {
     <div className="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center">
       <div
         className="bg-background
-       border border-border-primary-light dark:border-none p-6 rounded-lg shadow-md w-11/12"
+       dark:border-none p-6 rounded-lg shadow-md w-11/12"
       >
         <div className="flex justify-between items-center mb-4">
-          <h2 className="text-2xl font-bold">Create Group</h2>
+          <h2 className="text-3xl font-light">Create Group</h2>
           <FontAwesomeIcon icon={faXmark} onClick={onClose} size="2xl"/>
         </div>
-        <form className="text-left text-xl" onSubmit={handleSubmit}>
+        <form className="text-left text-xl font-extralight" onSubmit={handleSubmit}>
           <div className="mb-4">
             <label htmlFor="groupName" className="block mb-2">
               Group Name
@@ -48,7 +54,7 @@ const CreateGroup: React.FC<any> = ({ onSelect, onClose }) => {
               id="groupName"
               value={groupName}
               onChange={(e) => setGroupName(e.target.value)}
-              className="w-full p-2 rounded bg-secondary border dark:border-none border-secondary"
+              className="w-full p-2 rounded bg-primary focus-visible:outline-none focus:scale-105 hover:scale-105 transition-all"
             />
           </div>
           <div className="mb-4">
@@ -60,7 +66,7 @@ const CreateGroup: React.FC<any> = ({ onSelect, onClose }) => {
               id="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
-              className="w-full p-2 rounded bg-secondary border dark:border-none border-secondary"
+              className="w-full p-2 rounded bg-primary focus-visible:outline-none focus:scale-105 hover:scale-105 transition-all"
             />
           </div>
           <div className="mb-4">
@@ -72,32 +78,32 @@ const CreateGroup: React.FC<any> = ({ onSelect, onClose }) => {
               id="verifyPassword"
               value={verifyPassword}
               onChange={(e) => setVerifyPassword(e.target.value)}
-              className="w-full p-2 rounded bg-secondary border dark:border-none border-secondary"
+              className="w-full p-2 rounded bg-primary focus-visible:outline-none focus:scale-105 hover:scale-105 transition-all"
             />
           </div>
           <div className="flex justify-end">
             <button
               type="button"
               onClick={onClose}
-              className="mr-2 px-4 py-2 rounded bg-primary hover:bg-secondary"
+              className="mr-2 px-4 py-2 rounded bg-primary hover:bg-primary w-1/2 hover:scale-105"
             >
               Cancel
             </button>
             <button
               type="submit"
               disabled={isSubmitDisabled}
-              className={`px-4 py-2 rounded
+              className={`px-4 py-2 rounded w-1/2
                 bg-primary
                 ${
                   isSubmitDisabled
-                    ? "cursor-not-allowed"
-                    : "hover:bg-success"
+                    ? "cursor-not-allowed brightness-50 opacity-50 hover"
+                    : "hover:bg-success hover:scale-105"
                 }`}
             >
               Submit
             </button>
           </div>
-          <div className="mt-4 text-center text-danger">
+          <div className="mt-4 text-center font-semibold text-red-400">
             {disabledReason ? disabledReason : String.fromCharCode(160)}
           </div>
         </form>
diff --git a/ui/src/components/GroupDashboard.tsx b/ui/src/components/GroupDashboard.tsx
index 4296f14..e44a000 100644
--- a/ui/src/components/GroupDashboard.tsx
+++ b/ui/src/components/GroupDashboard.tsx
@@ -54,25 +54,17 @@ const GroupDashboard = ({ setCurrentPage, fetchNui }) => {
           <FontAwesomeIcon
             icon={faList}
             className="mx-1 hover:text-background"
-            size="xl"
+            size="lg"
             onClick={() => setShowPlayerList(true)}
           />
           {isLeader && (
             <FontAwesomeIcon
               icon={faTrash}
               className="mx-1 hover:text-danger"
-              size="xl"
+              size="lg"
               onClick={() => deleteGroup(group)}
             />
           )}
-          {isMember && !isLeader && (
-            <FontAwesomeIcon
-              icon={faRightFromBracket}
-              className="mx-1 hover:text-danger"
-              onClick={() => leaveGroup(group)}
-              size="xl"
-            />
-          )}
         </div>
       </>
     );
@@ -82,34 +74,31 @@ const GroupDashboard = ({ setCurrentPage, fetchNui }) => {
     <div className="flex items-center select-none">
       <div className="w-full p-2">
         <div className="mb-4 flex gap-x-2">
-          <button
+          {!inGroup?(<button
             onClick={() => setShowCreateGroup(true)}
-            disabled={inGroup}
-            className={`py-2 w-1/3 text-lg bg-primary rounded
-              ${inGroup ? "cursor-not-allowed" : "hover:bg-secondary"}`}
+            className={`py-12 w-full text-lg bg-primary transition-all rounded-3xl shadow-sm
+              ${inGroup ? "cursor-not-allowed" : "hover:scale-105 hover:shadow-lg"}`}
           >
             Create Group
-          </button>
-          <button
+          </button>):''}
+          {inGroup?(<button
             onClick={() => setCurrentPage("GroupJob")}
-            disabled={!inGroup}
-            className={`py-2 w-1/3 text-lg bg-primary rounded
-              ${!inGroup ? "cursor-not-allowed" : "hover:bg-secondary"}`}
+            className={`py-6 w-1/2 text-lg bg-primary transition-all rounded-2xl shadow-sm
+              ${!inGroup ? "cursor-not-allowed" : "hover:scale-105 hover:shadow-lg hover:bg-secondary"}`}
           >
             Show Tasks
-          </button>
-          <button
+          </button>):''}
+          {inGroup?(<button
             onClick={() => leaveGroup()}
-            disabled={!inGroup}
-            className={`py-2 w-1/3 text-lg bg-primary rounded
-              ${!inGroup ? "cursor-not-allowed" : "hover:bg-danger"}`}
+            className={`py-6 w-1/2 text-lg bg-primary transition-all rounded-2xl shadow-sm
+              ${!inGroup ? "cursor-not-allowed" : "hover:bg-danger hover:scale-105 hover:shadow-lg"}`}
           >
             Leave Group
-          </button>
+          </button>):''}
         </div>
         <h2 className="mb-4 text-2xl">
         {currentGroups?.length > 0 ? (
-          'Create a group or join an existing group below'
+          inGroup?'You are already in a group.':'Create a group or join an existing group below'
           ) : (
           'Create a group to get started'
         )}
@@ -120,10 +109,9 @@ const GroupDashboard = ({ setCurrentPage, fetchNui }) => {
               let isMember = group.id === inGroup;
 
               return (
-                // <div className="bg-secondary p-4 rounded-lg shadow-inner">
                 <div
                   key={index}
-                  className={`p-4 bg-secondary rounded-md flex justify-between items-center mb-2 ${
+                  className={`p-4 bg-primary rounded-xl flex justify-between items-center mb-2 ${
                     !inGroup && "hover:bg-accent"
                   }`}
                   onClick={() => {
@@ -132,21 +120,19 @@ const GroupDashboard = ({ setCurrentPage, fetchNui }) => {
                     }
                   }}
                 >
-                  <div className="flex items-center">
-                    <FontAwesomeIcon icon={faUsers} className="mr-2" size="xl"/>
-                    <span className="text-2xl font-bold">{group.name}</span>
+                  <div className="flex items-center text-lg">
+                    <span>
+                      {group.memberCount}
+                    </span>
+                    <FontAwesomeIcon icon={faUserGroup} className="mx-2 mr-4" size="xs"/>
+                    <span className="border-l pl-4">{group.name}</span>
                   </div>
                   <div className="flex items-center">
                     <>
                       {isMember && renderIcons(isLeader, isMember, group)}
-                      <FontAwesomeIcon icon={faUserGroup} size="xl"/>
-                      <span className="mx-2 font-semibold">
-                        {group.memberCount}
-                      </span>
                     </>
                   </div>
                 </div>
-                // </div>
               );
             })}
           </>
diff --git a/ui/src/components/GroupJob.tsx b/ui/src/components/GroupJob.tsx
index 4df1d1b..f32212b 100644
--- a/ui/src/components/GroupJob.tsx
+++ b/ui/src/components/GroupJob.tsx
@@ -44,23 +44,23 @@ const GroupJob: React.FC<GroupJobProps> = ({ setCurrentPage, fetchNui }) => {
     return (
         <div className="flex items-center">
             <div className="w-full">
-                <div className="mb-4 flex gap-x-2 text-xl px-2">
+                <div className="mb-4 flex gap-x-2 text-lg p-2">
                     <button
                         onClick={() => setCurrentPage("GroupDashboard")}
-                        className={`p-2 w-1/2 bg-primary rounded
-              ${!inGroup ? "cursor-not-allowed" : "hover:bg-secondary"}`}
+                        className={`py-6 w-1/2 bg-primary transition-all rounded-2xl shadow-sm
+              ${!inGroup ? "cursor-not-allowed" : "hover:bg-secondary hover:scale-105 hover:shadow-lg"}`}
                     >
                         Show Groups
                     </button>
                     <button
                         onClick={() => leaveGroup()}
-                        className={`px-4 py-2 w-1/2 bg-primary rounded
-              ${!inGroup ? "cursor-not-allowed" : "hover:bg-danger"}`}
+                        className={`p-6 w-1/2 bg-primary transition-all rounded-2xl shadow-sm
+              ${!inGroup ? "cursor-not-allowed" : "hover:bg-danger hover:scale-105 hover:shadow-lg"}`}
                     >
                         Leave Group
                     </button>
                 </div>
-                <span className="mb-6 text-2xl">
+                <span className="mb-6 text-xl">
                     {groupJobSteps && groupJobSteps.length > 0
                         ? "Here are the current group tasks"
                         : "No tasks available"}
@@ -81,10 +81,7 @@ const GroupJob: React.FC<GroupJobProps> = ({ setCurrentPage, fetchNui }) => {
                                     />
                                 </span>
                                 <div className="ml-8">
-                                    {/* <div className="text-sm mx-2">
-                                      {step.isDone ? "1 / 1" : "0 / 1"}
-                                    </div> */}
-                                    <div className="text-2xl">{step.name}</div>
+                                    <div className="text-lg">{step.name}</div>
                                 </div>
                             </div>
                         ))}
diff --git a/ui/src/components/JoinGroup.tsx b/ui/src/components/JoinGroup.tsx
index b56e4a0..847aaeb 100644
--- a/ui/src/components/JoinGroup.tsx
+++ b/ui/src/components/JoinGroup.tsx
@@ -2,12 +2,7 @@ import React, { useState, useEffect } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
 
-const JoinGroup: React.FC<any> = ({
-  groupId,
-  groupName,
-  onSelect,
-  onClose,
-}) => {
+const JoinGroup: React.FC<any> = ({ groupId, groupName, onSelect, onClose }) => {
   const [password, setPassword] = useState("");
   const [disabledReason, setDisabledReason] = useState("");
   const [isSubmitDisabled, setIsSubmitDisabled] = useState(true);
@@ -29,28 +24,14 @@ const JoinGroup: React.FC<any> = ({
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center">
-      <div
-        className="bg-background
-       border border-border-primary-light dark:border-none p-6 rounded-lg shadow-md w-11/12 text-2xl"
-      >
+      <div className="bg-background dark:border-none p-6 rounded-lg shadow-md w-11/12">
         <div className="flex justify-between items-center mb-4">
-          <h2 className="text-2xl font-bold">
-            Join Group
-          </h2>
+          <h2 className="text-3xl font-light">Join {groupName}</h2>
           <FontAwesomeIcon icon={faXmark} onClick={onClose} size="2xl"/>
         </div>
-        <form className="text-left" onSubmit={handleSubmit}>
+        <form className="text-left text-xl font-extralight" onSubmit={handleSubmit}>
           <div className="mb-4">
-            <label
-              className="block mb-2"
-            >
-              Group: {groupName}
-            </label>
-          </div>
-          <div className="mb-4">
-            <label
-              className="block mb-2 text-2xl"
-            >
+            <label htmlFor="password" className="block mb-2">
               Password
             </label>
             <input
@@ -58,31 +39,30 @@ const JoinGroup: React.FC<any> = ({
               id="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
-              className="w-full p-2 rounded bg-secondary border border-secondary dark:border-none text-2xl"
+              className="w-full p-2 rounded bg-primary focus-visible:outline-none focus:scale-105 hover:scale-105 transition-all"
             />
           </div>
           <div className="flex justify-end">
             <button
               type="button"
               onClick={onClose}
-              className="mr-2 px-4 py-2 rounded bg-secondary text-2xl hover:bg-accent"
+              className="mr-2 px-4 py-2 rounded bg-primary hover:bg-primary w-1/2 hover:scale-105"
             >
               Cancel
             </button>
             <button
               type="submit"
               disabled={isSubmitDisabled}
-              className={`px-4 py-2 rounded bg-secondary text-2xl
-                ${
+              className={`px-4 py-2 rounded w-1/2 bg-primary ${
                 isSubmitDisabled
-                  ? "cursor-not-allowed"
-                  : "hover:bg-accent"
+                  ? "cursor-not-allowed brightness-50 opacity-50 hover"
+                  : "hover:bg-success hover:scale-105"
               }`}
             >
               Submit
             </button>
           </div>
-          <div className="mt-4 text-center text-danger text-2xl">
+          <div className="mt-4 text-center font-semibold text-red-400">
             {disabledReason ? disabledReason : String.fromCharCode(160)}
           </div>
         </form>
diff --git a/ui/src/components/PlayerList.tsx b/ui/src/components/PlayerList.tsx
index 2dc92be..d007d0e 100644
--- a/ui/src/components/PlayerList.tsx
+++ b/ui/src/components/PlayerList.tsx
@@ -30,38 +30,27 @@ const PlayerList: React.FC = ({ onClose, fetchNui }) => {
                         return (
                             <div
                                 key={index}
-                                className="flex p-3 items-center rounded-md my-2 gap-x-2 bg-secondary"
+                                className="flex p-3 items-center rounded-md my-2 gap-x-2 bg-primary"
                             >
-                                <FontAwesomeIcon icon={faUser} size="xl" />
-                                <>
-                                    {isLeader &&
-                                        member.playerId !==
-                                            playerData.source && (
-                                            <>
-                                                <FontAwesomeIcon
-                                                    icon={faTrash}
-                                                    className="self-right hover:text-danger"
-                                                    size="xl"
-                                                    onClick={() =>
-                                                        removeGroupMember(
-                                                            member
-                                                        )
-                                                    }
-                                                />
-                                            </>
-                                        )}
-                                </>
-                                <span className="text-xl">{member.name}</span>
+                                <FontAwesomeIcon icon={faUser} size="sm" />
+                                <span className="text-lg border-l pl-4 flex justify-between w-full items-center">{member.name}{(isLeader && member.playerId !== playerData.source) && (
+                                    <FontAwesomeIcon
+                                    icon={faTrash}
+                                    className="self-right hover:text-danger"
+                                    size="sm"
+                                    onClick={() => removeGroupMember(member)}
+                                    />
+                                )}</span>
                             </div>
                         );
                     })}
                 </div>
                 <div className="pb-4 px-4 rounded-b-md">
                     <button
-                        className="w-full py-2 bg-secondary hover:bg-accent rounded-lg"
+                        className="w-full py-2 bg-primary rounded-lg hover:scale-105"
                         onClick={onClose}
                     >
-                        RETURN
+                        Return
                     </button>
                 </div>
             </div>
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
index 021a6d8..fc63ff3 100644
--- a/ui/tailwind.config.js
+++ b/ui/tailwind.config.js
@@ -17,17 +17,17 @@ module.exports = {
     createThemes({
       light: {
         text: '#030704',
-        background: '#fcfdfd',
-        primary: '#57b277',
+        background: '#e6ebed',
+        primary: '#fff',
         secondary: '#a7b7d7',
         accent: '#8981c5',
         danger: '#ff0000',
         success: '#8981c5',
       },
       dark: {
-        text: '#f8fcf9',
-        background: '#020303',
-        primary: '#4da86d',
+        text: '#e5e7eb',
+        background: '#0d1016',
+        primary: '#191c21',
         secondary: '#283858',
         accent: '#423a7e',
         danger: '#ff0000',