diff --git a/src/lib/components/admin/Users/Groups.svelte b/src/lib/components/admin/Users/Groups.svelte
index ede1cc378..8da1b9e44 100644
--- a/src/lib/components/admin/Users/Groups.svelte
+++ b/src/lib/components/admin/Users/Groups.svelte
@@ -12,18 +12,15 @@
 
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Plus from '$lib/components/icons/Plus.svelte';
-	import Badge from '$lib/components/common/Badge.svelte';
 	import UsersSolid from '$lib/components/icons/UsersSolid.svelte';
 	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
-	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
 	import Search from '$lib/components/icons/Search.svelte';
-	import User from '$lib/components/icons/User.svelte';
-	import UserCircleSolid from '$lib/components/icons/UserCircleSolid.svelte';
 	import EditGroupModal from './Groups/EditGroupModal.svelte';
-	import Pencil from '$lib/components/icons/Pencil.svelte';
-	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
-	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	import GroupItem from './Groups/GroupItem.svelte';
+	import XMark from '$lib/components/icons/XMark.svelte';
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+	import Check from '$lib/components/icons/Check.svelte';
+	import { Select } from 'bits-ui';
 	import { createNewGroup, getGroups } from '$lib/apis/groups';
 	import {
 		getUserDefaultPermissions,
@@ -38,17 +35,12 @@
 	let groups = [];
 
 	let query = '';
-	let orderBy = '';
-	let direction = 'asc';
+	let sortBy = 'members';
 
-	const setSortKey = (key) => {
-		if (orderBy === key) {
-			direction = direction === 'asc' ? 'desc' : 'asc';
-		} else {
-			orderBy = key;
-			direction = 'asc';
-		}
-	};
+	const sortItems = [
+		{ value: 'name', label: $i18n.t('Name') },
+		{ value: 'members', label: $i18n.t('Members') }
+	];
 
 	$: filteredGroups = groups
 		.filter((group) => {
@@ -61,12 +53,10 @@
 			}
 		})
 		.sort((a, b) => {
-			if (orderBy === 'name') {
-				const cmp = a.name.localeCompare(b.name);
-				return direction === 'asc' ? cmp : -cmp;
-			} else if (orderBy === 'members') {
-				const cmp = (a.member_count ?? 0) - (b.member_count ?? 0);
-				return direction === 'asc' ? cmp : -cmp;
+			if (sortBy === 'name') {
+				return a.name.localeCompare(b.name);
+			} else if (sortBy === 'members') {
+				return (b.member_count ?? 0) - (a.member_count ?? 0);
 			}
 			return 0;
 		});
@@ -129,144 +119,153 @@
 		onSubmit={addGroupHandler}
 	/>
 
-	<div class="mt-0.5 mb-2 gap-1 flex flex-col md:flex-row justify-between">
-		<div class="flex items-center md:self-center text-xl font-medium px-0.5 gap-2 shrink-0">
-			<div>
-				{$i18n.t('Groups')}
-			</div>
-
-			<div class="text-lg font-medium text-gray-500 dark:text-gray-500">
-				{groups.length}
-			</div>
-		</div>
-
-		<div class="flex gap-1">
-			<div class=" flex w-full space-x-2">
-				<div class="flex flex-1">
-					<div class=" self-center ml-1 mr-3">
-						<Search />
-					</div>
-					<input
-						class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
-						bind:value={query}
-						placeholder={$i18n.t('Search')}
-					/>
+	<div class="flex flex-col gap-1 px-1 mt-1.5 mb-3">
+		<div class="flex justify-between items-center">
+			<div class="flex items-center md:self-center text-xl font-medium px-0.5 gap-2 shrink-0">
+				<div>
+					{$i18n.t('Groups')}
 				</div>
 
-				<div>
-					<Tooltip content={$i18n.t('Create Group')}>
+				<div class="text-lg font-medium text-gray-500 dark:text-gray-500">
+					{groups.length}
+				</div>
+			</div>
+
+			<div class="flex w-full justify-end gap-1.5">
+				<button
+					class="px-2 py-1.5 rounded-xl bg-black text-white dark:bg-white dark:text-black transition font-medium text-sm flex items-center"
+					on:click={() => {
+						showAddGroupModal = !showAddGroupModal;
+					}}
+				>
+					<Plus className="size-3" strokeWidth="2.5" />
+
+					<div class="hidden md:block md:ml-1 text-xs">{$i18n.t('New Group')}</div>
+				</button>
+			</div>
+		</div>
+	</div>
+
+	<div
+		class="py-2 bg-white dark:bg-gray-900 rounded-3xl border border-gray-100/30 dark:border-gray-850/30"
+	>
+		<div class="flex items-center w-full space-x-2 py-0.5 px-3.5">
+			<div class="flex flex-1">
+				<div class="self-center ml-1 mr-3">
+					<Search className="size-3.5" />
+				</div>
+				<input
+					class="w-full text-sm py-1 rounded-r-xl outline-hidden bg-transparent"
+					bind:value={query}
+					placeholder={$i18n.t('Search Groups')}
+				/>
+				{#if query}
+					<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
 						<button
-							class=" p-2 rounded-xl hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition font-medium text-sm flex items-center space-x-1"
+							class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
 							on:click={() => {
-								showAddGroupModal = !showAddGroupModal;
+								query = '';
 							}}
 						>
-							<Plus className="size-3.5" />
+							<XMark className="size-3" strokeWidth="2" />
 						</button>
-					</Tooltip>
+					</div>
+				{/if}
+			</div>
+
+			<Select.Root
+				selected={sortItems.find((item) => item.value === sortBy)}
+				items={sortItems}
+				onSelectedChange={(selectedItem) => {
+					sortBy = selectedItem.value;
+				}}
+			>
+				<Select.Trigger
+					class="relative flex items-center gap-0.5 px-2.5 py-1.5 text-sm bg-gray-50 dark:bg-gray-850 rounded-xl shrink-0"
+					aria-label={$i18n.t('Sort by')}
+				>
+					<Select.Value
+						class="inline-flex h-input px-0.5 outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
+						placeholder={$i18n.t('Sort by')}
+					/>
+					<ChevronDown className="size-3.5" strokeWidth="2.5" />
+				</Select.Trigger>
+
+				<Select.Content
+					class="rounded-2xl min-w-[170px] p-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
+					sameWidth={false}
+					align="end"
+				>
+					{#each sortItems as item}
+						<Select.Item
+							class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+							value={item.value}
+							label={item.label}
+						>
+							{item.label}
+
+							{#if sortBy === item.value}
+								<div class="ml-auto">
+									<Check />
+								</div>
+							{/if}
+						</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		</div>
+
+		{#if filteredGroups.length !== 0}
+			<div class="my-2 px-3 grid grid-cols-1 gap-1">
+				{#each filteredGroups as group}
+					<GroupItem {group} {setGroups} {defaultPermissions} />
+				{/each}
+			</div>
+		{:else}
+			<div class="w-full h-full flex flex-col justify-center items-center my-16 mb-24">
+				<div class="max-w-md text-center">
+					<div class="text-3xl mb-3">👥</div>
+					<div class="text-lg font-medium mb-1">{$i18n.t('No groups found')}</div>
+					<div class="text-gray-500 text-center text-xs">
+						{$i18n.t('Use groups to organize your users and assign permissions.')}
+					</div>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<hr class="mb-2 border-gray-100/30 dark:border-gray-850/30" />
+
+	<EditGroupModal
+		bind:show={showDefaultPermissionsModal}
+		tabs={['permissions']}
+		bind:permissions={defaultPermissions}
+		custom={false}
+		onSubmit={updateDefaultPermissionsHandler}
+	/>
+
+	<button
+		class="flex items-center justify-between rounded-lg w-full transition pt-1"
+		on:click={() => {
+			showDefaultPermissionsModal = true;
+		}}
+	>
+		<div class="flex items-center gap-2.5">
+			<div class="p-1.5 bg-black/5 dark:bg-white/10 rounded-full">
+				<UsersSolid className="size-4" />
+			</div>
+
+			<div class="text-left">
+				<div class=" text-sm font-medium">{$i18n.t('Default permissions')}</div>
+
+				<div class="flex text-xs mt-0.5">
+					{$i18n.t('applies to all users with the "user" role')}
 				</div>
 			</div>
 		</div>
-	</div>
 
-	<div>
-		{#if filteredGroups.length === 0}
-			<div class="flex flex-col items-center justify-center h-40">
-				<div class=" text-xl font-medium">
-					{$i18n.t('Organize your users')}
-				</div>
-
-				<div class="mt-1 text-sm dark:text-gray-300">
-					{$i18n.t('Use groups to group your users and assign permissions.')}
-				</div>
-
-				<div class="mt-3">
-					<button
-						class=" px-4 py-1.5 text-sm rounded-full bg-black hover:bg-gray-800 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition font-medium flex items-center space-x-1"
-						aria-label={$i18n.t('Create Group')}
-						on:click={() => {
-							showAddGroupModal = true;
-						}}
-					>
-						{$i18n.t('Create Group')}
-					</button>
-				</div>
-			</div>
-		{:else}
-			<div>
-				<div class=" flex items-center gap-3 justify-between text-xs uppercase px-1 font-medium">
-					<button
-						class="w-full basis-3/5 flex items-center gap-1 hover:text-gray-900 dark:hover:text-gray-100 transition cursor-pointer"
-						on:click={() => setSortKey('name')}
-					>
-						{$i18n.t('Group')}
-						{#if orderBy === 'name'}
-							{#if direction === 'asc'}
-								<ChevronUp className="size-3" strokeWidth="2.5" />
-							{:else}
-								<ChevronDown className="size-3" strokeWidth="2.5" />
-							{/if}
-						{/if}
-					</button>
-
-					<button
-						class="w-full basis-2/5 flex items-center gap-1 justify-end hover:text-gray-900 dark:hover:text-gray-100 transition cursor-pointer"
-						on:click={() => setSortKey('members')}
-					>
-						{$i18n.t('Users')}
-						{#if orderBy === 'members'}
-							{#if direction === 'asc'}
-								<ChevronUp className="size-3" strokeWidth="2.5" />
-							{:else}
-								<ChevronDown className="size-3" strokeWidth="2.5" />
-							{/if}
-						{/if}
-					</button>
-				</div>
-
-				<hr class="mt-1.5 border-gray-100/30 dark:border-gray-850/30" />
-
-				{#each filteredGroups as group}
-					<div class="my-2">
-						<GroupItem {group} {setGroups} {defaultPermissions} />
-					</div>
-				{/each}
-			</div>
-		{/if}
-
-		<hr class="mb-2 border-gray-100/30 dark:border-gray-850/30" />
-
-		<EditGroupModal
-			bind:show={showDefaultPermissionsModal}
-			tabs={['permissions']}
-			bind:permissions={defaultPermissions}
-			custom={false}
-			onSubmit={updateDefaultPermissionsHandler}
-		/>
-
-		<button
-			class="flex items-center justify-between rounded-lg w-full transition pt-1"
-			on:click={() => {
-				showDefaultPermissionsModal = true;
-			}}
-		>
-			<div class="flex items-center gap-2.5">
-				<div class="p-1.5 bg-black/5 dark:bg-white/10 rounded-full">
-					<UsersSolid className="size-4" />
-				</div>
-
-				<div class="text-left">
-					<div class=" text-sm font-medium">{$i18n.t('Default permissions')}</div>
-
-					<div class="flex text-xs mt-0.5">
-						{$i18n.t('applies to all users with the "user" role')}
-					</div>
-				</div>
-			</div>
-
-			<div>
-				<ChevronRight strokeWidth="2.5" />
-			</div>
-		</button>
-	</div>
+		<div>
+			<ChevronRight strokeWidth="2.5" />
+		</div>
+	</button>
 {/if}
diff --git a/src/lib/components/admin/Users/Groups/GroupItem.svelte b/src/lib/components/admin/Users/Groups/GroupItem.svelte
index 944e824d1..86348f3d7 100644
--- a/src/lib/components/admin/Users/Groups/GroupItem.svelte
+++ b/src/lib/components/admin/Users/Groups/GroupItem.svelte
@@ -8,7 +8,6 @@
 	import { deleteGroupById, updateGroupById } from '$lib/apis/groups';
 
 	import Pencil from '$lib/components/icons/Pencil.svelte';
-	import User from '$lib/components/icons/User.svelte';
 	import EditGroupModal from './EditGroupModal.svelte';
 
 	export let group = {
@@ -63,26 +62,34 @@
 />
 
 <button
-	class="flex items-center gap-3 justify-between px-1 text-xs w-full transition"
+	class="flex space-x-4 cursor-pointer text-left w-full px-3.5 py-2.5 dark:hover:bg-gray-850/50 hover:bg-gray-50 transition rounded-2xl"
 	on:click={() => {
 		showEdit = true;
 	}}
 >
-	<div class="flex items-center gap-1.5 w-full font-medium flex-1">
-		<div class="line-clamp-1">
-			{group.name}
-		</div>
-	</div>
+	<div class="w-full">
+		<div class="flex items-center justify-between">
+			<div class="flex-1">
+				<div class="flex items-center gap-2">
+					<div class="text-sm font-medium line-clamp-1">{group.name}</div>
+				</div>
 
-	<div class="flex items-center gap-1.5 w-fit font-medium text-right justify-end">
-		{group?.member_count}
+				<div class="flex items-center gap-2 mt-0.5 line-clamp-1">
+					<div class="text-xs text-gray-500 shrink-0">
+						{$i18n.t('{{COUNT}} members', { COUNT: group?.member_count ?? 0 })}
+					</div>
 
-		<div>
-			<User className="size-3.5" />
-		</div>
+					{#if group?.description}
+						<div class="text-xs text-gray-500 line-clamp-1">
+							{group.description}
+						</div>
+					{/if}
+				</div>
+			</div>
 
-		<div class=" rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-850 transition">
-			<Pencil className="size-3.5" />
+			<div class="flex self-center ml-2">
+				<Pencil className="size-3.5" />
+			</div>
 		</div>
 	</div>
 </button>