diff --git a/pkg/interface/src/views/landscape/components/GroupSummary.tsx b/pkg/interface/src/views/landscape/components/GroupSummary.tsx
index 8e3d42299..e4eb205bd 100644
--- a/pkg/interface/src/views/landscape/components/GroupSummary.tsx
+++ b/pkg/interface/src/views/landscape/components/GroupSummary.tsx
@@ -23,7 +23,7 @@ export function GroupSummary(props: GroupSummaryProps & PropFunc<typeof Col>): R
     anchorRef
   );
   return (
-    <Col {...rest} ref={anchorRef} gapY="4">
+    <Col {...rest} ref={anchorRef} gapY="4" maxWidth={['100%', '288px']}>
       <Row gapX="2" width="100%">
         <MetadataIcon
           width="40px"
diff --git a/pkg/interface/src/views/landscape/components/JoinGroup.tsx b/pkg/interface/src/views/landscape/components/JoinGroup.tsx
index b0a6d0c47..13a214b60 100644
--- a/pkg/interface/src/views/landscape/components/JoinGroup.tsx
+++ b/pkg/interface/src/views/landscape/components/JoinGroup.tsx
@@ -151,47 +151,50 @@ export function JoinGroup(props: JoinGroupProps): ReactElement {
           </StatelessAsyncButton>
         </Col>
       ) : preview ? (
-        <GroupSummary
-          metadata={preview.metadata}
-          memberCount={preview?.members}
-          channelCount={preview?.['channel-count']}
-        >
-          { Object.keys(preview.channels).length > 0 && (
-            <Col
-              gapY="2"
-              p="2"
-              borderRadius="2"
-              border="1"
-              borderColor="washedGray"
-              bg="washedBlue"
-              maxHeight="300px"
-              overflowY="auto"
-            >
-              <Text gray fontSize="1">
-                Channels
-              </Text>
-              <Box width="100%" flexShrink="0">
-                {Object.values(preview.channels).map(({ metadata }: any) => (
-                  <Row width="100%">
-                    <Icon
-                      mr="2"
-                      color="blue"
-                      icon={getModuleIcon(metadata?.config?.graph) as any}
-                    />
-                    <Text color="blue">{metadata.title} </Text>
-                  </Row>
-                ))}
-                </Box>
-            </Col>
-          )}
+        <>
+          <GroupSummary
+            metadata={preview.metadata}
+            memberCount={preview?.members}
+            channelCount={preview?.['channel-count']}
+          >
+            { Object.keys(preview.channels).length > 0 && (
+              <Col
+                gapY="2"
+                p="2"
+                borderRadius="2"
+                border="1"
+                borderColor="washedGray"
+                bg="washedBlue"
+                maxHeight="300px"
+                overflowY="auto"
+              >
+                <Text gray fontSize="1">
+                  Channels
+                </Text>
+                <Box width="100%" flexShrink="0">
+                  {Object.values(preview.channels).map(({ metadata }: any) => (
+                    <Row width="100%">
+                      <Icon
+                        mr="2"
+                        color="blue"
+                        icon={getModuleIcon(metadata?.config?.graph) as any}
+                      />
+                      <Text color="blue">{metadata.title} </Text>
+                    </Row>
+                  ))}
+                  </Box>
+              </Col>
+            )}
+          </GroupSummary>
           <StatelessAsyncButton
+            marginTop={3}
             primary
             name="join"
             onClick={() => onConfirm(preview.group)}
           >
             Join {preview.metadata.title}
           </StatelessAsyncButton>
-        </GroupSummary>
+        </>
       ) : (
         <Col width="100%" gapY="4">
           <Formik