diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 744417bf1..37258d6ff 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -244,11 +244,6 @@ label {
     .message {
       text-align: center;
     }
-
-    .session-id-editable {
-      width: 30vw;
-      max-width: 400px;
-    }
   }
 
   .group-member-list__selection {
@@ -465,38 +460,6 @@ label {
   transition: var(--default-duration) !important;
 }
 
-.session-id-editable {
-  padding: var(--margins-lg);
-  background: var(--input-background-color);
-  color: var(--input-text-color);
-
-  textarea {
-    width: 30vh;
-  }
-}
-.session-id-editable textarea {
-  resize: none;
-  overflow: hidden;
-  user-select: all;
-  overflow-y: auto;
-  padding: 0px 5px 20px 5px;
-
-  &.session-id-editable-textarea:placeholder-shown {
-    height: 38px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    padding-left: 5px;
-    padding-right: 5px;
-    font-family: var(--font-default);
-    color: var(--input-text-placeholder-color);
-  }
-
-  &.group-id-editable-textarea {
-    margin-top: 15px;
-    white-space: nowrap;
-  }
-}
-
 input {
   user-select: text;
 }
@@ -526,24 +489,6 @@ input {
   }
 }
 
-.create-group-name-input {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-
-  .session-id-editable {
-    height: 60px !important;
-
-    textarea {
-      padding-bottom: 0px !important;
-    }
-
-    &-disabled {
-      border: 1px solid var(--border-color) !important;
-    }
-  }
-}
-
 .module-message__text {
   white-space: pre-wrap;
 }
diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss
index 64425168f..83a7f0bcb 100644
--- a/stylesheets/_session_left_pane.scss
+++ b/stylesheets/_session_left_pane.scss
@@ -107,20 +107,6 @@ $session-compose-margin: 20px;
       align-self: flex-start;
     }
 
-    .session-id-editable {
-      width: 90%;
-
-      textarea::-webkit-inner-spin-button {
-        margin: 0px 20px;
-        width: -webkit-fill-available;
-        flex-shrink: 0;
-      }
-    }
-
-    .session-id-editable-disabled {
-      border: none;
-    }
-
     .session-button {
       min-width: 160px;
       width: fit-content;
diff --git a/ts/components/basic/SessionButton.tsx b/ts/components/basic/SessionButton.tsx
index dfaa20c12..67d769e8a 100644
--- a/ts/components/basic/SessionButton.tsx
+++ b/ts/components/basic/SessionButton.tsx
@@ -48,6 +48,7 @@ const StyledButton = styled.button<{
   background-repeat: no-repeat;
   overflow: hidden;
   height: ${props => (props.buttonType === SessionButtonType.Ghost ? undefined : '34px')};
+  min-height: ${props => (props.buttonType === SessionButtonType.Ghost ? undefined : '34px')};
   padding: ${props =>
     props.buttonType === SessionButtonType.Ghost ? '16px 24px 24px' : '0px 18px'};
   background-color: ${props =>
diff --git a/ts/components/basic/SessionIdEditable.tsx b/ts/components/basic/SessionIdEditable.tsx
deleted file mode 100644
index 0281c9694..000000000
--- a/ts/components/basic/SessionIdEditable.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import classNames from 'classnames';
-import { ChangeEvent, KeyboardEvent, useRef } from 'react';
-import { useFocusMount } from '../../hooks/useFocusMount';
-
-type Props = {
-  placeholder?: string;
-  value?: string;
-  text?: string;
-  editable?: boolean;
-  onChange?: (value: string) => void;
-  onPressEnter?: any;
-  maxLength?: number;
-  isGroup?: boolean;
-  dataTestId?: string;
-};
-
-export const SessionIdEditable = (props: Props) => {
-  const {
-    placeholder,
-    onPressEnter,
-    onChange,
-    editable,
-    text,
-    value,
-    maxLength,
-    isGroup,
-    dataTestId,
-  } = props;
-  const inputRef = useRef(null);
-
-  useFocusMount(inputRef, editable);
-  function handleChange(e: ChangeEvent<HTMLTextAreaElement>) {
-    if (editable && onChange) {
-      const eventValue = e.target.value?.replace(/(\r\n|\n|\r)/gm, '');
-      onChange(eventValue);
-    }
-  }
-
-  function handleKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
-    if (editable && e.key === 'Enter') {
-      e.preventDefault();
-
-      onPressEnter?.();
-    }
-  }
-
-  return (
-    <div className={classNames('session-id-editable', !editable && 'session-id-editable-disabled')}>
-      <textarea
-        className={classNames(
-          isGroup ? 'group-id-editable-textarea' : 'session-id-editable-textarea'
-        )}
-        ref={inputRef}
-        placeholder={placeholder}
-        disabled={!editable}
-        spellCheck={false}
-        onKeyDown={handleKeyDown}
-        onChange={handleChange}
-        onBlur={handleChange}
-        value={value || text}
-        maxLength={maxLength}
-        data-testid={dataTestId}
-      />
-    </div>
-  );
-};
diff --git a/ts/components/dialog/UserDetailsDialog.tsx b/ts/components/dialog/UserDetailsDialog.tsx
index 37fc5edf0..7ad84b901 100644
--- a/ts/components/dialog/UserDetailsDialog.tsx
+++ b/ts/components/dialog/UserDetailsDialog.tsx
@@ -10,8 +10,8 @@ import { openConversationWithMessages } from '../../state/ducks/conversations';
 import { updateUserDetailsModal, UserDetailsModalState } from '../../state/ducks/modalDialog';
 import { Avatar, AvatarSize } from '../avatar/Avatar';
 import { SessionButton, SessionButtonType } from '../basic/SessionButton';
-import { SessionIdEditable } from '../basic/SessionIdEditable';
 import { SpacerLG } from '../basic/Text';
+import { SessionInput } from '../inputs';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 
 export const UserDetailsDialog = (props: UserDetailsModalState) => {
@@ -70,8 +70,13 @@ export const UserDetailsDialog = (props: UserDetailsModalState) => {
       </div>
 
       <SpacerLG />
-      <SessionIdEditable editable={false} text={props.conversationId} />
-
+      <SessionInput
+        value={props.conversationId}
+        isSpecial={true}
+        centerText={true}
+        editable={false}
+      />
+      <SpacerLG />
       <div className="session-modal__button-group__center">
         <SessionButton
           text={window.i18n('startConversation')}
diff --git a/ts/components/inputs/SessionInput.tsx b/ts/components/inputs/SessionInput.tsx
index b3567bc80..001f0c5f0 100644
--- a/ts/components/inputs/SessionInput.tsx
+++ b/ts/components/inputs/SessionInput.tsx
@@ -10,33 +10,6 @@ import { Flex } from '../basic/Flex';
 import { SpacerMD } from '../basic/Text';
 import { SessionIconButton } from '../icon';
 
-const StyledInputContainer = styled(Flex)<{ error: boolean }>`
-  position: relative;
-  width: 100%;
-
-  label {
-    color: var(--text-primary-color);
-    opacity: 0;
-    transition: opacity var(--default-duration);
-    text-align: center;
-
-    &.filled {
-      opacity: 1;
-    }
-
-    &.error {
-      color: var(--danger-color);
-      font-weight: 700;
-    }
-  }
-
-  input::placeholder,
-  textarea::placeholder {
-    transition: opacity var(--default-duration) color var(--default-duration);
-    ${props => props.error && `color: var(--danger-color); opacity: 1;`}
-  }
-`;
-
 const StyledInput = styled(motion.input)<{ centerText?: boolean }>`
   border: 1px solid var(--input-border-color);
   border-radius: 13px;
@@ -62,12 +35,12 @@ const StyledTextAreaContainer = styled(motion.div)<{ centerText?: boolean }>`
   border-radius: 13px;
   outline: 0;
   width: 100%;
+  min-height: 100px;
   background: transparent;
   color: var(--input-text-color);
 
   font-family: var(--font-mono);
   font-size: var(--font-size-md);
-  min-height: 100px;
   line-height: 18px;
 
   ${props => props.centerText && 'text-align: center;'}
@@ -103,6 +76,55 @@ const StyledTextAreaContainer = styled(motion.div)<{ centerText?: boolean }>`
   }
 `;
 
+const StyledInputContainer = styled(Flex)<{ error: boolean; isGroup?: boolean }>`
+  position: relative;
+  width: 100%;
+
+  label {
+    color: var(--text-primary-color);
+    opacity: 0;
+    transition: opacity var(--default-duration);
+    text-align: center;
+
+    &.filled {
+      opacity: 1;
+    }
+
+    &.error {
+      color: var(--danger-color);
+      font-weight: 700;
+    }
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    transition: opacity var(--default-duration) color var(--default-duration);
+    ${props => props.error && `color: var(--danger-color); opacity: 1;`}
+  }
+
+  ${props =>
+    props.isGroup &&
+    `
+    ${StyledInput} {
+      font-family: var(--font-mono);
+      font-size: var(--font-size-md);
+      line-height: 18px;
+    }
+
+    ${StyledTextAreaContainer} {
+      font-family: var(--font-mono);
+      font-size: var(--font-size-md);
+      line-height: 18px;
+
+      textarea {
+        :placeholder-shown {
+          font-family: var(--font-mono);
+        }
+      }
+    }
+  `}
+`;
+
 const ErrorItem = (props: { id: string; error: string }) => {
   return (
     <motion.label
@@ -161,7 +183,7 @@ type Props = {
   error?: string;
   type?: string;
   value?: string;
-  placeholder: string;
+  placeholder?: string;
   maxLength?: number;
   enableShowHide?: boolean;
   onValueChanged?: (value: string) => any;
@@ -172,9 +194,13 @@ type Props = {
   inputDataTestId?: string;
   id?: string;
   ctaButton?: ReactNode;
+  /** Font is larger and monospaced */
+  isGroup?: boolean;
   /** Gives us a textarea with a monospace font. Mostly used for joining conversations, groups or communities */
   isSpecial?: boolean;
   centerText?: boolean;
+  editable?: boolean;
+  className?: string;
 };
 
 export const SessionInput = (props: Props) => {
@@ -192,8 +218,11 @@ export const SessionInput = (props: Props) => {
     inputDataTestId,
     id = 'session-input-floating-label',
     ctaButton,
+    isGroup,
     isSpecial,
     centerText,
+    editable = true,
+    className,
   } = props;
   const [inputValue, setInputValue] = useState('');
   const [errorString, setErrorString] = useState('');
@@ -202,6 +231,9 @@ export const SessionInput = (props: Props) => {
   const correctType = forceShow ? 'text' : type;
 
   const updateInputValue = (e: ChangeEvent<HTMLInputElement>) => {
+    if (!editable) {
+      return;
+    }
     e.preventDefault();
     const val = e.target.value;
     setInputValue(val);
@@ -216,6 +248,7 @@ export const SessionInput = (props: Props) => {
     type: correctType,
     placeholder,
     value,
+    disabled: !editable,
     maxLength,
     autoFocus,
     'data-testid': inputDataTestId,
@@ -223,11 +256,14 @@ export const SessionInput = (props: Props) => {
     style: { paddingInlineEnd: enableShowHide ? '48px' : undefined },
     // just in case onChange isn't triggered
     onBlur: (event: ChangeEvent<HTMLInputElement>) => {
-      if (!disabledOnBlur) {
+      if (editable && !disabledOnBlur) {
         updateInputValue(event);
       }
     },
     onKeyDown: (event: KeyboardEvent) => {
+      if (!editable) {
+        return;
+      }
       if (event.key === 'Enter' && onEnterPressed) {
         if (isSpecial && event.shiftKey) {
           return;
@@ -255,11 +291,13 @@ export const SessionInput = (props: Props) => {
 
   return (
     <StyledInputContainer
+      className={className}
       container={true}
       flexDirection="column"
       justifyContent="center"
       alignItems="center"
       error={Boolean(errorString)}
+      isGroup={isGroup}
     >
       <Flex container={true} width="100%" alignItems="center" style={{ position: 'relative' }}>
         {isSpecial ? (
@@ -269,7 +307,7 @@ export const SessionInput = (props: Props) => {
         ) : (
           <StyledInput {...inputProps} centerText={centerText} />
         )}
-        {enableShowHide && (
+        {editable && enableShowHide && (
           <ShowHideButton
             forceShow={forceShow}
             toggleForceShow={() => {
diff --git a/ts/components/leftpane/LeftPaneSectionHeader.tsx b/ts/components/leftpane/LeftPaneSectionHeader.tsx
index 527fd7238..bd4d649b5 100644
--- a/ts/components/leftpane/LeftPaneSectionHeader.tsx
+++ b/ts/components/leftpane/LeftPaneSectionHeader.tsx
@@ -8,7 +8,7 @@ import { getShowRecoveryPhrasePrompt } from '../../state/selectors/userConfig';
 import { isSignWithRecoveryPhrase } from '../../util/storage';
 import { Flex } from '../basic/Flex';
 import { SessionButton } from '../basic/SessionButton';
-import { SpacerMD } from '../basic/Text';
+import { SpacerMD, SpacerSM } from '../basic/Text';
 import { MenuButton } from '../buttons';
 import { SessionIcon, SessionIconButton } from '../icon';
 
@@ -20,7 +20,6 @@ const StyledLeftPaneSectionHeader = styled(Flex)`
 
 const SectionTitle = styled.h1`
   padding-top: var(--margins-xs);
-  padding-left: var(--margins-sm);
   flex-grow: 1;
   color: var(--text-primary-color);
 `;
@@ -181,7 +180,9 @@ export const LeftPaneSectionHeader = () => {
             iconRotation={90}
             onClick={returnToActionChooser}
           />
-        ) : null}
+        ) : (
+          <SpacerSM />
+        )}
         <SectionTitle>{label}</SectionTitle>
         {isMessageSection && <MenuButton />}
       </StyledLeftPaneSectionHeader>
diff --git a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
index 50f61f814..e4a856563 100644
--- a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
+++ b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
@@ -5,19 +5,19 @@ import useKey from 'react-use/lib/useKey';
 import styled from 'styled-components';
 
 import { SessionButton } from '../../basic/SessionButton';
-import { SessionIdEditable } from '../../basic/SessionIdEditable';
 import { SessionSpinner } from '../../loading';
 import { MemberListItem } from '../../MemberListItem';
 
 import { useSet } from '../../../hooks/useSet';
 import { VALIDATION } from '../../../session/constants';
 import { createClosedGroup } from '../../../session/conversations/createClosedGroup';
-import { ToastUtils } from '../../../session/utils';
 import { resetLeftOverlayMode } from '../../../state/ducks/section';
 import { getPrivateContactsPubkeys } from '../../../state/selectors/conversations';
 import { getSearchResultsContactOnly, isSearching } from '../../../state/selectors/search';
-import { SpacerLG } from '../../basic/Text';
+import { SpacerLG, SpacerMD } from '../../basic/Text';
+import { SessionInput } from '../../inputs';
 import { SessionSearchInput } from '../../SessionSearchInput';
+import { StyledLeftPaneOverlay } from './OverlayMessage';
 
 const StyledMemberListNoContacts = styled.div`
   font-family: var(--font-mono), var(--font-default);
@@ -54,18 +54,18 @@ const NoContacts = () => {
 /**
  * Makes some validity check and return true if the group was indead created
  */
-async function createClosedGroupWithToasts(
+async function createClosedGroupWithErrorHandling(
   groupName: string,
-  groupMemberIds: Array<string>
+  groupMemberIds: Array<string>,
+  errorHandler: (error: string) => void
 ): Promise<boolean> {
   // Validate groupName and groupMembers length
   if (groupName.length === 0) {
-    ToastUtils.pushToastError('invalidGroupName', window.i18n('invalidGroupNameTooShort'));
-
+    errorHandler(window.i18n('invalidGroupNameTooShort'));
     return false;
   }
   if (groupName.length > VALIDATION.MAX_GROUP_NAME_LENGTH) {
-    ToastUtils.pushToastError('invalidGroupName', window.i18n('invalidGroupNameTooLong'));
+    errorHandler(window.i18n('invalidGroupNameTooLong'));
     return false;
   }
 
@@ -73,11 +73,11 @@ async function createClosedGroupWithToasts(
   // the same is valid with groups count < 1
 
   if (groupMemberIds.length < 1) {
-    ToastUtils.pushToastError('pickClosedGroupMember', window.i18n('pickClosedGroupMember'));
+    errorHandler(window.i18n('pickClosedGroupMember'));
     return false;
   }
   if (groupMemberIds.length >= VALIDATION.CLOSED_GROUP_SIZE_LIMIT) {
-    ToastUtils.pushToastError('closedGroupMaxSize', window.i18n('closedGroupMaxSize'));
+    errorHandler(window.i18n('closedGroupMaxSize'));
     return false;
   }
 
@@ -90,7 +90,9 @@ export const OverlayClosedGroup = () => {
   const dispatch = useDispatch();
   const privateContactsPubkeys = useSelector(getPrivateContactsPubkeys);
   const [groupName, setGroupName] = useState('');
+  const [groupNameError, setGroupNameError] = useState<string | undefined>(undefined);
   const [loading, setLoading] = useState(false);
+
   const {
     uniqueValues: selectedMemberIds,
     addTo: addToSelected,
@@ -104,12 +106,17 @@ export const OverlayClosedGroup = () => {
   }
 
   async function onEnterPressed() {
+    setGroupNameError(undefined);
     if (loading) {
       window?.log?.warn('Closed group creation already in progress');
       return;
     }
     setLoading(true);
-    const groupCreated = await createClosedGroupWithToasts(groupName, selectedMemberIds);
+    const groupCreated = await createClosedGroupWithErrorHandling(
+      groupName,
+      selectedMemberIds,
+      setGroupNameError
+    );
     if (groupCreated) {
       closeOverlay();
       return;
@@ -119,9 +126,6 @@ export const OverlayClosedGroup = () => {
 
   useKey('Escape', closeOverlay);
 
-  const buttonText = window.i18n('create');
-  const placeholder = window.i18n('createClosedGroupPlaceholder');
-
   const noContactsForClosedGroup = privateContactsPubkeys.length === 0;
 
   const contactsToRender = isSearch ? searchResultContactsOnly : privateContactsPubkeys;
@@ -129,25 +133,31 @@ export const OverlayClosedGroup = () => {
   const disableCreateButton = !selectedMemberIds.length && !groupName.length;
 
   return (
-    <div className="module-left-pane-overlay">
-      <div className="create-group-name-input">
-        <SessionIdEditable
-          editable={!noContactsForClosedGroup}
-          placeholder={placeholder}
-          value={groupName}
-          isGroup={true}
-          maxLength={VALIDATION.MAX_GROUP_NAME_LENGTH}
-          onChange={setGroupName}
-          onPressEnter={onEnterPressed}
-          dataTestId="new-closed-group-name"
-        />
-      </div>
-
+    <StyledLeftPaneOverlay
+      container={true}
+      flexDirection={'column'}
+      flexGrow={1}
+      alignItems={'center'}
+      padding={'var(--margins-md)'}
+    >
+      <SessionInput
+        autoFocus={true}
+        type="text"
+        placeholder={window.i18n('createClosedGroupPlaceholder')}
+        value={groupName}
+        onValueChanged={setGroupName}
+        onEnterPressed={onEnterPressed}
+        error={groupNameError}
+        maxLength={VALIDATION.MAX_GROUP_NAME_LENGTH}
+        centerText={true}
+        isGroup={true}
+        inputDataTestId="new-closed-group-name"
+      />
+      <SpacerMD />
       <SessionSpinner loading={loading} />
-
       <SpacerLG />
-      <SessionSearchInput />
 
+      <SessionSearchInput />
       <StyledGroupMemberListContainer>
         {noContactsForClosedGroup ? (
           <NoContacts />
@@ -167,15 +177,15 @@ export const OverlayClosedGroup = () => {
         )}
       </StyledGroupMemberListContainer>
 
-      <SpacerLG style={{ flexShrink: 0 }} />
-
+      <SpacerLG />
       <SessionButton
-        text={buttonText}
+        text={window.i18n('create')}
         disabled={disableCreateButton}
         onClick={onEnterPressed}
         dataTestId="next-button"
-        margin="auto 0 var(--margins-lg) 0 " // just to keep that button at the bottom of the overlay (even with an empty list)
+        margin="auto 0 0 " // just to keep that button at the bottom of the overlay (even with an empty list)
       />
-    </div>
+      <SpacerLG />
+    </StyledLeftPaneOverlay>
   );
 };
diff --git a/ts/components/leftpane/overlay/OverlayCommunity.tsx b/ts/components/leftpane/overlay/OverlayCommunity.tsx
index 46f25139a..fae28e29a 100644
--- a/ts/components/leftpane/overlay/OverlayCommunity.tsx
+++ b/ts/components/leftpane/overlay/OverlayCommunity.tsx
@@ -10,36 +10,45 @@ import {
   JoinSogsRoomUICallbackArgs,
 } from '../../../session/apis/open_group_api/opengroupV2/JoinOpenGroupV2';
 import { openGroupV2CompleteURLRegex } from '../../../session/apis/open_group_api/utils/OpenGroupUtils';
-import { ToastUtils } from '../../../session/utils';
 import { resetLeftOverlayMode } from '../../../state/ducks/section';
 import { SessionButton } from '../../basic/SessionButton';
-import { SessionIdEditable } from '../../basic/SessionIdEditable';
 import { SessionSpinner } from '../../loading';
 
+import { VALIDATION } from '../../../session/constants';
 import {
   markConversationInitialLoadingInProgress,
   openConversationWithMessages,
 } from '../../../state/ducks/conversations';
 import { getLeftOverlayMode } from '../../../state/selectors/section';
+import { Spacer2XL } from '../../basic/Text';
+import { SessionInput } from '../../inputs';
+import { StyledLeftPaneOverlay } from './OverlayMessage';
 
 async function joinOpenGroup(
   serverUrl: string,
+  errorHandler: (error: string) => void,
   uiCallback?: (args: JoinSogsRoomUICallbackArgs) => void
 ) {
   // guess if this is an open
   if (serverUrl.match(openGroupV2CompleteURLRegex)) {
-    const groupCreated = await joinOpenGroupV2WithUIEvents(serverUrl, true, false, uiCallback);
+    const groupCreated = await joinOpenGroupV2WithUIEvents(
+      serverUrl,
+      false,
+      false,
+      uiCallback,
+      errorHandler
+    );
     return groupCreated;
   }
-  ToastUtils.pushToastError('invalidOpenGroupUrl', window.i18n('invalidOpenGroupUrl'));
-  window.log.warn('Invalid opengroupv2 url');
-  return false;
+  throw new Error(window.i18n('invalidOpenGroupUrl'));
 }
 
 export const OverlayCommunity = () => {
   const dispatch = useDispatch();
-  const [loading, setLoading] = useState(false);
+
   const [groupUrl, setGroupUrl] = useState('');
+  const [groupUrlError, setGroupUrlError] = useState<string | undefined>(undefined);
+  const [loading, setLoading] = useState(false);
 
   const overlayModeIsCommunity = useSelector(getLeftOverlayMode) === 'open-group';
 
@@ -52,8 +61,10 @@ export const OverlayCommunity = () => {
       if (loading) {
         return;
       }
-      await joinOpenGroup(completeUrl || groupUrl, joinSogsUICallback);
+      setGroupUrlError(undefined);
+      await joinOpenGroup(completeUrl || groupUrl, setGroupUrlError, joinSogsUICallback);
     } catch (e) {
+      setGroupUrlError(e.message);
       window.log.warn(e);
     } finally {
       setLoading(false);
@@ -78,25 +89,31 @@ export const OverlayCommunity = () => {
 
   useKey('Escape', closeOverlay);
 
-  const buttonText = window.i18n('join');
-  const placeholder = window.i18n('enterAnOpenGroupURL');
-
   return (
-    <div className="module-left-pane-overlay">
-      <div className="create-group-name-input">
-        <SessionIdEditable
-          editable={true}
-          placeholder={placeholder}
-          value={groupUrl}
-          isGroup={true}
-          maxLength={300}
-          onChange={setGroupUrl}
-          onPressEnter={onTryJoinRoom}
-        />
-      </div>
-      <SessionButton text={buttonText} disabled={!groupUrl} onClick={onTryJoinRoom} />
+    <StyledLeftPaneOverlay
+      container={true}
+      flexDirection={'column'}
+      flexGrow={1}
+      alignItems={'center'}
+      padding={'var(--margins-md)'}
+    >
+      <SessionInput
+        autoFocus={true}
+        type="text"
+        placeholder={window.i18n('enterAnOpenGroupURL')}
+        value={groupUrl}
+        onValueChanged={setGroupUrl}
+        onEnterPressed={onTryJoinRoom}
+        error={groupUrlError}
+        maxLength={VALIDATION.MAX_COMMUNITY_NAME_LENGTH}
+        centerText={true}
+        isGroup={true}
+      />
+      <Spacer2XL />
+      <SessionButton text={window.i18n('join')} disabled={!groupUrl} onClick={onTryJoinRoom} />
+      {!loading ? <Spacer2XL /> : null}
       <SessionSpinner loading={loading} />
       <SessionJoinableRooms onJoinClick={onTryJoinRoom} alreadyJoining={loading} />
-    </div>
+    </StyledLeftPaneOverlay>
   );
 };
diff --git a/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx b/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx
index 7bd08775f..18df5b7c4 100644
--- a/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx
+++ b/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx
@@ -9,7 +9,7 @@ import { StateType } from '../../../state/reducer';
 import { Avatar, AvatarSize } from '../../avatar/Avatar';
 import { Flex } from '../../basic/Flex';
 import { PillContainerHoverable, StyledPillContainerHoverable } from '../../basic/PillContainer';
-import { H3 } from '../../basic/Text';
+import { H3, SpacerSM } from '../../basic/Text';
 import { SessionSpinner } from '../../loading';
 
 export type JoinableRoomProps = {
@@ -148,6 +148,7 @@ export const SessionJoinableRooms = (props: {
   return (
     <Flex container={true} flexGrow={1} flexDirection="column" width="93%">
       <H3 text={window.i18n('orJoinOneOfThese')} />
+      <SpacerSM />
       <Flex container={true} flexGrow={0} flexWrap="wrap" justifyContent="center">
         {joinableRooms.inProgress ? (
           <SessionSpinner loading={true} />
diff --git a/ts/session/apis/open_group_api/opengroupV2/JoinOpenGroupV2.ts b/ts/session/apis/open_group_api/opengroupV2/JoinOpenGroupV2.ts
index 02457ad4f..b8e6621e9 100644
--- a/ts/session/apis/open_group_api/opengroupV2/JoinOpenGroupV2.ts
+++ b/ts/session/apis/open_group_api/opengroupV2/JoinOpenGroupV2.ts
@@ -133,7 +133,8 @@ export async function joinOpenGroupV2WithUIEvents(
   completeUrl: string,
   showToasts: boolean,
   fromConfigMessage: boolean,
-  uiCallback?: (args: JoinSogsRoomUICallbackArgs) => void
+  uiCallback?: (args: JoinSogsRoomUICallbackArgs) => void,
+  errorHandler?: (error: string) => void
 ): Promise<boolean> {
   try {
     const parsedRoom = parseOpenGroupV2(completeUrl);
@@ -141,6 +142,9 @@ export async function joinOpenGroupV2WithUIEvents(
       if (showToasts) {
         ToastUtils.pushToastError('connectToServer', window.i18n('invalidOpenGroupUrl'));
       }
+      if (errorHandler) {
+        errorHandler(window.i18n('invalidOpenGroupUrl'));
+      }
       return false;
     }
     const alreadyExist = hasExistingOpenGroup(parsedRoom.serverUrl, parsedRoom.roomId);
@@ -153,6 +157,9 @@ export async function joinOpenGroupV2WithUIEvents(
       if (showToasts) {
         ToastUtils.pushToastError('publicChatExists', window.i18n('publicChatExists'));
       }
+      if (errorHandler) {
+        errorHandler(window.i18n('publicChatExists'));
+      }
       return false;
     }
     if (showToasts) {
@@ -177,6 +184,9 @@ export async function joinOpenGroupV2WithUIEvents(
     if (showToasts) {
       ToastUtils.pushToastError('connectToServerFail', window.i18n('connectToServerFail'));
     }
+    if (errorHandler) {
+      errorHandler(window.i18n('connectToServerFail'));
+    }
 
     uiCallback?.({ loadingState: 'failed', conversationKey: conversationID });
   } catch (error) {
@@ -184,6 +194,9 @@ export async function joinOpenGroupV2WithUIEvents(
     if (showToasts) {
       ToastUtils.pushToastError('connectToServerFail', window.i18n('connectToServerFail'));
     }
+    if (errorHandler) {
+      errorHandler(window.i18n('connectToServerFail'));
+    }
     uiCallback?.({ loadingState: 'failed', conversationKey: null });
   }
   return false;
diff --git a/ts/session/constants.ts b/ts/session/constants.ts
index 83497a9b8..d97c1f886 100644
--- a/ts/session/constants.ts
+++ b/ts/session/constants.ts
@@ -63,6 +63,7 @@ export const MAX_ATTACHMENT_FILESIZE_BYTES = 10 * 1000 * 1000;
 
 export const VALIDATION = {
   MAX_GROUP_NAME_LENGTH: 30,
+  MAX_COMMUNITY_NAME_LENGTH: 300,
   CLOSED_GROUP_SIZE_LIMIT: 100,
 };