diff --git a/ui/components/table.js b/ui/components/table.js
index a2ebda25ca..594f75c3f2 100644
--- a/ui/components/table.js
+++ b/ui/components/table.js
@@ -14,6 +14,7 @@ export default function Table({
   columns,
   data,
   href,
+  type = '',
   empty = 'No data',
   count = data?.length,
   allowDelete = false,
@@ -105,10 +106,7 @@ export default function Table({
             return (
               <tr key={headerGroup.id}>
                 {allowDelete && data?.length > 0 && (
-                  <th
-                    scope='col'
-                    className='relative w-12 px-6 sm:w-16 sm:px-8'
-                  >
+                  <th scope='col' className='relative w-5 px-6'>
                     <input
                       type='checkbox'
                       className='left-4 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-30 disabled:focus:ring-0 sm:left-6'
@@ -123,7 +121,7 @@ export default function Table({
                 )}
                 {headerGroup.headers.map(header => (
                   <th
-                    className='w-auto py-2 px-5 text-left font-medium first:max-w-[40%]'
+                    className='py-2 px-5 text-left font-medium'
                     key={header.id}
                   >
                     {header.isPlaceholder
@@ -149,7 +147,7 @@ export default function Table({
                     href && href(row)
                       ? 'cursor-pointer hover:bg-gray-50/50'
                       : ''
-                  }`}
+                  } ${type === 'detail' ? 'h-[60px]' : ''}`}
                   key={row.id}
                 >
                   {allowDelete && data?.length > 0 && (
@@ -172,32 +170,39 @@ export default function Table({
                       />
                     </th>
                   )}
-                  {row.getVisibleCells().map(cell => (
-                    <td
-                      className={`border-gray-100 text-sm  ${
-                        href && href(row) ? '' : 'px-5 py-2'
-                      }`}
-                      key={cell.id}
-                    >
-                      {href && href(row) ? (
-                        <Link
-                          href={href(row)}
-                          tabIndex='-1'
-                          className='block px-5 py-2'
-                        >
-                          {flexRender(
+                  {row.getVisibleCells().map(cell => {
+                    return (
+                      <td
+                        className={`border-gray-100 text-sm ${
+                          href && href(row) ? '' : 'px-5 py-2'
+                        }`}
+                        key={cell.id}
+                        {...{
+                          style: {
+                            minWidth: cell.column.getSize(),
+                          },
+                        }}
+                      >
+                        {href && href(row) ? (
+                          <Link
+                            href={href(row)}
+                            tabIndex='-1'
+                            className='block px-5 py-2'
+                          >
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext()
+                            )}
+                          </Link>
+                        ) : (
+                          flexRender(
                             cell.column.columnDef.cell,
                             cell.getContext()
-                          )}
-                        </Link>
-                      ) : (
-                        flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )
-                      )}
-                    </td>
-                  ))}
+                          )
+                        )}
+                      </td>
+                    )
+                  })}
                 </tr>
               )
             })}
diff --git a/ui/pages/access-control/index.js b/ui/pages/access-control/index.js
index 5e2243b3d3..57a0297104 100644
--- a/ui/pages/access-control/index.js
+++ b/ui/pages/access-control/index.js
@@ -78,12 +78,6 @@ function CreateAccessDialog({ setOpen, onCreated = () => {} }) {
     setRoles(sortByRole(selectedResource?.roles))
   }, [selectedResource])
 
-  useEffect(() => {
-    if (roles.length > 0) {
-      setSelectedRoles([roles[0]])
-    }
-  }, [roles])
-
   async function onSubmit(e) {
     e.preventDefault()
     try {
@@ -301,7 +295,7 @@ function CreateAccessDialog({ setOpen, onCreated = () => {} }) {
                       multiple
                     >
                       <div className='relative'>
-                        <Listbox.Button className='relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-8 text-left text-xs shadow-sm hover:cursor-pointer hover:bg-gray-100 focus:outline-none'>
+                        <Listbox.Button className='relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-8 text-left text-xs shadow-sm hover:cursor-pointer hover:bg-gray-100 focus:border-blue-500 focus:ring-blue-500'>
                           <div className='flex space-x-1 truncate'>
                             <span className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2'>
                               <ChevronDownIcon
@@ -377,9 +371,6 @@ function CreateAccessDialog({ setOpen, onCreated = () => {} }) {
                       value={selectedRoles}
                       onChange={v => {
                         setError({})
-                        if (selectedRoles.length === 1 && v.length === 0) {
-                          return
-                        }
 
                         const add = v.filter(x => !selectedRoles.includes(x))
                         const remove = selectedRoles.filter(x => !v.includes(x))
@@ -395,7 +386,7 @@ function CreateAccessDialog({ setOpen, onCreated = () => {} }) {
                       multiple
                     >
                       <div className='relative'>
-                        <Listbox.Button className='relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-8 text-left text-xs shadow-sm hover:cursor-pointer hover:bg-gray-100 focus:outline-none'>
+                        <Listbox.Button className='relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-8 text-left text-xs shadow-sm hover:cursor-pointer hover:bg-gray-100 focus:border-blue-500 focus:ring-blue-50'>
                           <div className='flex space-x-1 truncate'>
                             <span className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2'>
                               <ChevronDownIcon
@@ -404,7 +395,9 @@ function CreateAccessDialog({ setOpen, onCreated = () => {} }) {
                               />
                             </span>
                             <span className='text-gray-700'>
-                              {selectedRoles.join(', ')}
+                              {selectedRoles.length > 0
+                                ? selectedRoles.join(', ')
+                                : 'Select roles'}
                             </span>
                           </div>
                         </Listbox.Button>
@@ -469,7 +462,9 @@ function CreateAccessDialog({ setOpen, onCreated = () => {} }) {
           </button>
           <button
             type='submit'
-            disabled={!selected || !selectedResource}
+            disabled={
+              !selected || !selectedResource || selectedRoles.length === 0
+            }
             className='inline-flex items-center rounded-md border border-transparent bg-black px-4 py-2 text-xs font-medium text-white shadow-sm hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-30'
           >
             Add
@@ -482,7 +477,12 @@ function CreateAccessDialog({ setOpen, onCreated = () => {} }) {
 
 export default function AccessControl() {
   const router = useRouter()
-  const page = router.query.p === undefined ? 1 : router.query.p
+  const page =
+    router.query.p === undefined ||
+    isNaN(Number(router.query.p)) ||
+    Number(router.query.p) < 1
+      ? 1
+      : router.query.p
   const limit = 10
 
   const { user, isAdmin } = useUser()
@@ -516,12 +516,21 @@ export default function AccessControl() {
       allGrants
         ?.map(g => {
           if (newCreatedGrants.length > 0) {
-            const result = newCreatedGrants.filter(
-              ng =>
+            const result = newCreatedGrants.filter(ng => {
+              if (g.group) {
+                return (
+                  ng.privilege === g.privilege &&
+                  ng.resource === g.resource &&
+                  ng.group === g.group
+                )
+              }
+
+              return (
                 ng.privilege === g.privilege &&
                 ng.resource === g.resource &&
-                (ng.group === g.group || ng.user === g.user)
-            )
+                ng.user === g.user
+              )
+            })
 
             return { ...g, newCreate: result.length > 0 }
           }
@@ -549,8 +558,9 @@ export default function AccessControl() {
 
   if (isAdmin) {
     columns.push({
-      header: <span>User / group </span>,
+      header: <span>User / Group </span>,
       id: 'identity',
+      maxSize: 60,
       accessorKey: 'identityId',
       cell: function Cell(info) {
         const name =
@@ -560,7 +570,7 @@ export default function AccessControl() {
         return (
           <div className='flex flex-col'>
             <div className='text-sm font-medium text-gray-700'>{name}</div>
-            <div className='text-2xs text-gray-500'>
+            <div className='text-2xs capitalize text-gray-500'>
               {info.row.original.type}
             </div>
           </div>
@@ -646,9 +656,11 @@ export default function AccessControl() {
         onDelete={() => {
           setOpenSelectedDeleteModal(true)
         }}
+        type='detail'
         columns={[
           {
             id: 'infrastructure',
+            minSize: 250,
             cell: function Cell(info) {
               const { kind, connected, connection } = destinations?.find(
                 d => d.name === info.getValue().split('.')[0]
@@ -674,7 +686,7 @@ export default function AccessControl() {
                       <AdjustmentsHorizontalIcon className='h-4 text-blue-500' />
                     )}
                     {kind === 'ssh' && (
-                      <CommandLineIcon className='h-5 text-black' />
+                      <CommandLineIcon className='h-[18px] text-black' />
                     )}
                     {kind === 'kubernetes' && (
                       <img
@@ -709,11 +721,11 @@ export default function AccessControl() {
           },
           {
             cell: info => (
-              <div className='hidden sm:table-cell'>
+              <div className='hidden lg:table-cell'>
                 {info.getValue() ? dayjs(info.getValue()).fromNow() : '-'}
               </div>
             ),
-            header: () => <span>Created</span>,
+            header: () => <span className='hidden lg:table-cell'>Created</span>,
             accessorKey: 'created',
           },
           {
@@ -731,7 +743,7 @@ export default function AccessControl() {
                       className='flex items-center text-xs font-medium text-red-500 hover:text-red-500/50'
                     >
                       <TrashIcon className='mr-2 h-3.5 w-3.5' />
-                      <span className='hidden sm:block'>Remove</span>
+                      <span>Remove</span>
                     </button>
                   </div>
                 )
diff --git a/ui/pages/destinations/index.js b/ui/pages/destinations/index.js
index 410630c6e9..660db30fb7 100644
--- a/ui/pages/destinations/index.js
+++ b/ui/pages/destinations/index.js
@@ -85,24 +85,12 @@ export default function Destinations() {
                   <div className='text-sm font-medium text-gray-700'>
                     {info.getValue()}
                   </div>
-                  {info.row.original.kind !== 'ssh' ? (
-                    <div className='text-2xs text-gray-500'>
-                      {info.row.original.resources?.length > 0 && (
-                        <span>
-                          {info.row.original.resources?.length}&nbsp;
-                          {info.row.original.resources?.length === 1
-                            ? 'namespace'
-                            : 'namespaces'}
-                        </span>
-                      )}
-                    </div>
-                  ) : (
-                    <div className='text-2xs text-gray-500'>
-                      {info.row.original.connection.url === ''
-                        ? '-'
-                        : info.row.original.connection.url}
-                    </div>
-                  )}
+
+                  <div className='text-2xs text-gray-500'>
+                    {info.row.original.connection.url === ''
+                      ? '-'
+                      : info.row.original.connection.url}
+                  </div>
                 </div>
               </div>
             ),