diff --git a/web/components/groups/create-group-button.tsx b/web/components/groups/create-group-button.tsx
index 7c7b6f1e..e0324c4e 100644
--- a/web/components/groups/create-group-button.tsx
+++ b/web/components/groups/create-group-button.tsx
@@ -16,10 +16,18 @@ export function CreateGroupButton(props: {
   label?: string
   onOpenStateChange?: (isOpen: boolean) => void
   goToGroupOnSubmit?: boolean
+  addGroupIdParamOnSubmit?: boolean
   icon?: JSX.Element
 }) {
-  const { user, className, label, onOpenStateChange, goToGroupOnSubmit, icon } =
-    props
+  const {
+    user,
+    className,
+    label,
+    onOpenStateChange,
+    goToGroupOnSubmit,
+    addGroupIdParamOnSubmit,
+    icon,
+  } = props
 
   const [name, setName] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
@@ -53,6 +61,12 @@ export function CreateGroupButton(props: {
           console.log(e)
           setErrorText(e.message)
         })
+      else if (addGroupIdParamOnSubmit) {
+        router.replace({
+          pathname: router.pathname,
+          query: { ...router.query, groupId: result.group.id },
+        })
+      }
       setIsSubmitting(false)
       return true
     } else {
diff --git a/web/components/groups/group-selector.tsx b/web/components/groups/group-selector.tsx
index 54fc0764..a04a91af 100644
--- a/web/components/groups/group-selector.tsx
+++ b/web/components/groups/group-selector.tsx
@@ -131,7 +131,7 @@ export function GroupSelector(props: {
                         )}
                         <span
                           className={clsx(
-                            'ml-3 mt-1 block flex flex-row justify-between',
+                            'ml-3 mt-1 flex flex-row justify-between',
                             selected && 'font-semibold'
                           )}
                         >
@@ -166,7 +166,7 @@ export function GroupSelector(props: {
                     'w-full justify-start rounded-none border-0 bg-white pl-2 font-normal text-gray-900 hover:bg-indigo-500 hover:text-white'
                   }
                   label={'Create a new Group'}
-                  goToGroupOnSubmit={false}
+                  addGroupIdParamOnSubmit
                   icon={
                     <PlusCircleIcon className="text-primary mr-2 h-5 w-5" />
                   }
diff --git a/web/hooks/use-warn-unsaved-changes.ts b/web/hooks/use-warn-unsaved-changes.ts
index b871b8b2..53620aae 100644
--- a/web/hooks/use-warn-unsaved-changes.ts
+++ b/web/hooks/use-warn-unsaved-changes.ts
@@ -13,7 +13,11 @@ export const useWarnUnsavedChanges = (hasUnsavedChanges: boolean) => {
       return confirmationMessage
     }
 
-    const beforeRouteHandler = () => {
+    const beforeRouteHandler = (href: string) => {
+      const pathname = href.split('?')[0]
+      // Don't warn if the user is navigating to the same page.
+      if (pathname === location.pathname) return
+
       if (!confirm(confirmationMessage)) {
         Router.events.emit('routeChangeError')
         throw 'Abort route change. Please ignore this error.'
@@ -21,7 +25,7 @@ export const useWarnUnsavedChanges = (hasUnsavedChanges: boolean) => {
     }
 
     window.addEventListener('beforeunload', warnUnsavedChanges)
-    Router.events.on('routeChangeStart', beforeRouteHandler)
+    Router.events.on('routeChangeStart', (href) => beforeRouteHandler(href))
 
     return () => {
       window.removeEventListener('beforeunload', warnUnsavedChanges)