diff --git a/frontend/src/components/accordion/TitleAccordion.tsx b/frontend/src/components/accordion/TitleAccordion.tsx
index 301387ce..9225dbbe 100644
--- a/frontend/src/components/accordion/TitleAccordion.tsx
+++ b/frontend/src/components/accordion/TitleAccordion.tsx
@@ -9,17 +9,19 @@ import cls from "./Accordion.module.css"
 interface Props {
 	title?: string
 	children?: React.ReactNode
+	initOpen?: boolean
 }
 
 const TitleAccordion: FunctionComponent<Props> = ({
 	title,
 	children,
+	initOpen = true,
 }) => {
 
 	// STORE
 
 	// HOOK
-	const [open, setOpen] = useState(true)
+	const [open, setOpen] = useState(initOpen)
 
 	// HANDLER
 	const handleClick = () => setOpen(!open)
diff --git a/frontend/src/components/stacks/buckets/detail/CreateForm.tsx b/frontend/src/components/stacks/buckets/detail/CreateForm.tsx
index ca7ffe74..0733dcbd 100644
--- a/frontend/src/components/stacks/buckets/detail/CreateForm.tsx
+++ b/frontend/src/components/stacks/buckets/detail/CreateForm.tsx
@@ -12,6 +12,7 @@ import { FunctionComponent } from "react"
 import ListDialog from "../../../dialogs/ListDialog"
 import MaxBytesCmp from "../../../input/MaxBytesCmp"
 import MaxTimeCmp from "../../../input/MaxTimeCmp"
+import TitleAccordion from "@/components/accordion/TitleAccordion"
 
 
 
@@ -41,105 +42,112 @@ const CreateForm: FunctionComponent<Props> = ({
 
 	return <div className="lyt-form">
 
-		<div className="lbl-prop-title">BASE</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">NAME</div>
-			<TextInput
-				value={bucket.bucket}
-				onChange={bucket => handlePropChange({ bucket })}
-			/>
-		</div>
+		<TitleAccordion title="BASE">
+			
+			<div className="lyt-v">
+				<div className="lbl-prop">NAME</div>
+				<TextInput
+					value={bucket.bucket}
+					onChange={bucket => handlePropChange({ bucket })}
+				/>
+			</div>
 
-		<div className="lyt-v">
-			<div className="lbl-prop">DESCRIPTION</div>
-			<TextInput multiline rows={2}
-				value={bucket.description}
-				onChange={description => handlePropChange({ description })}
-			/>
-		</div>
-
-		<div className="lyt-v">
-			<div className="lbl-prop">STORAGE</div>
-			<ListDialog width={80}
-				store={bucketSo}
-				select={Object.values(STORAGE).indexOf(bucket.storage ?? STORAGE.FILE)}
-				items={Object.values(STORAGE)}
-				RenderRow={StringUpRow}
-				onSelect={index => handlePropChange({ storage: Object.values(STORAGE)[index] })}
-			/>
-		</div>
+			<div className="lyt-v">
+				<div className="lbl-prop">DESCRIPTION</div>
+				<TextInput multiline rows={2}
+					value={bucket.description}
+					onChange={description => handlePropChange({ description })}
+				/>
+			</div>
 
-		<div className="lbl-prop-title">KEY/VALUE STORE SETTINGS</div>
+			<div className="lyt-v">
+				<div className="lbl-prop">STORAGE</div>
+				<ListDialog width={80}
+					store={bucketSo}
+					select={Object.values(STORAGE).indexOf(bucket.storage ?? STORAGE.FILE)}
+					items={Object.values(STORAGE)}
+					RenderRow={StringUpRow}
+					onSelect={index => handlePropChange({ storage: Object.values(STORAGE)[index] })}
+				/>
+			</div>
+
+		</TitleAccordion>
 
 
-		<div className="lyt-v">
-			<div className="lbl-prop">HISTORY</div>
-			<NumberInput
-				style={{ flex: 1 }}
-				value={bucket.history}
-				onChange={history => handlePropChange({ history })}
+		<TitleAccordion title="KEY/VALUE STORE SETTINGS">
+
+			<div className="lyt-v">
+				<div className="lbl-prop">HISTORY</div>
+				<NumberInput
+					style={{ flex: 1 }}
+					value={bucket.history}
+					onChange={history => handlePropChange({ history })}
+				/>
+			</div>
+
+			<MaxTimeCmp store={bucketSo}
+				label="TTL"
+				value={bucket.ttl}
+				desiredDefault={0}
+				initDefault={1}
+				onChange={ttl => handlePropChange({ ttl })}
 			/>
-		</div>
-
-		<MaxTimeCmp store={bucketSo}
-			label="TTL"
-			value={bucket.ttl}
-			desiredDefault={0}
-			initDefault={1}
-			onChange={ttl => handlePropChange({ ttl })}
-		/>
-		<MaxBytesCmp store={bucketSo}
-			label="MAX VALUE SIZE"
-			value={bucket.maxValueSize}
-			onChange={maxValueSize => handlePropChange({ maxValueSize })}
-		/>
-		<MaxBytesCmp store={bucketSo}
-			label="MAX BYTES"
-			value={bucket.maxBytes}
-			onChange={maxBytes => handlePropChange({ maxBytes })}
-		/>
-
-		<div className="cmp-h">
-			<IconToggle
-				check={bucket.compression}
-				onChange={compression => handlePropChange({ compression })}
+			<MaxBytesCmp store={bucketSo}
+				label="MAX VALUE SIZE"
+				value={bucket.maxValueSize}
+				onChange={maxValueSize => handlePropChange({ maxValueSize })}
 			/>
-			<div className="lbl-prop">COMPRESSION</div>
-		</div>
-
-		<div className="lbl-prop-title">PLACEMENT</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">NUM REPLICAS</div>
-			<NumberInput
-				style={{ flex: 1 }}
-				value={bucket.replicas}
-				onChange={replicas => handlePropChange({ replicas })}
+			<MaxBytesCmp store={bucketSo}
+				label="MAX BYTES"
+				value={bucket.maxBytes}
+				onChange={maxBytes => handlePropChange({ maxBytes })}
 			/>
-		</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">CLUSTER</div>
-			<div className="lyt-quote">
-				<div className="lyt-v">
-					<div className="lbl-prop">NAME</div>
-					<TextInput
-						value={bucket.placement?.cluster}
-						onChange={cluster => handlePlacementPropChange({ cluster })}
-					/>
-				</div>
-				<div className="lyt-v">
-					<div className="lbl-prop">TAGS</div>
-					<EditList<string>
-						items={bucket.placement?.tags}
-						onItemsChange={tags => handlePlacementPropChange({ tags })}
-						placeholder="ex. client or java"
-						
-						onNewItem={() => ""}
-						fnIsVoid={i => !i || i.trim().length == 0}
-						RenderRow={EditStringRow}
-					/>
+
+			<div className="cmp-h">
+				<IconToggle
+					check={bucket.compression}
+					onChange={compression => handlePropChange({ compression })}
+				/>
+				<div className="lbl-prop">COMPRESSION</div>
+			</div>
+
+		</TitleAccordion>
+
+
+		<TitleAccordion title="PLACEMENT">
+			<div className="lyt-v">
+				<div className="lbl-prop">NUM REPLICAS</div>
+				<NumberInput
+					style={{ flex: 1 }}
+					value={bucket.replicas}
+					onChange={replicas => handlePropChange({ replicas })}
+				/>
+			</div>
+			<div className="lyt-v">
+				<div className="lbl-prop">CLUSTER</div>
+				<div className="lyt-quote">
+					<div className="lyt-v">
+						<div className="lbl-prop">NAME</div>
+						<TextInput
+							value={bucket.placement?.cluster}
+							onChange={cluster => handlePlacementPropChange({ cluster })}
+						/>
+					</div>
+					<div className="lyt-v">
+						<div className="lbl-prop">TAGS</div>
+						<EditList<string>
+							items={bucket.placement?.tags}
+							onItemsChange={tags => handlePlacementPropChange({ tags })}
+							placeholder="ex. client or java"
+
+							onNewItem={() => ""}
+							fnIsVoid={i => !i || i.trim().length == 0}
+							RenderRow={EditStringRow}
+						/>
+					</div>
 				</div>
 			</div>
-		</div>
+		</TitleAccordion>
 
 	</div>
 }
diff --git a/frontend/src/components/stacks/buckets/detail/ShowForm.tsx b/frontend/src/components/stacks/buckets/detail/ShowForm.tsx
index d8898d7b..7090fe91 100644
--- a/frontend/src/components/stacks/buckets/detail/ShowForm.tsx
+++ b/frontend/src/components/stacks/buckets/detail/ShowForm.tsx
@@ -1,3 +1,4 @@
+import TitleAccordion from "@/components/accordion/TitleAccordion"
 import { BucketStore } from "@/stores/stacks/buckets/detail"
 import { useStore } from "@priolo/jon"
 import { FunctionComponent } from "react"
@@ -25,55 +26,64 @@ const ShowForm: FunctionComponent<Props> = ({
 	if (!bucket) return null
 
 	return <div className="lyt-form">
-		
-		<div className="lbl-prop-title">BUCKET</div>
 
-		<div className="lyt-v">
-			<div className="lbl-prop">NAME</div>
-			<div className="lbl-input-readonly">
-				{bucket.bucket}
+		<TitleAccordion title="BASE">
+
+			<div className="lyt-v">
+				<div className="lbl-prop">NAME</div>
+				<div className="lbl-input-readonly">
+					{bucket.bucket}
+				</div>
 			</div>
-		</div>
 
-		<div className="lyt-v">
-			<div className="lbl-prop">VALUES COUNT</div>
-			<div className="lbl-input-readonly">
-				{bucket.values}
+			<div className="lyt-v">
+				<div className="lbl-prop">VALUES COUNT</div>
+				<div className="lbl-input-readonly">
+					{bucket.values}
+				</div>
 			</div>
-		</div>
 
-		<div className="lyt-v">
-			<div className="lbl-prop">BYTES COUNT</div>
-			<div className="lbl-input-readonly">
-				{bucket.bytes}
+			<div className="lyt-v">
+				<div className="lbl-prop">BYTES COUNT</div>
+				<div className="lbl-input-readonly">
+					{bucket.bytes}
+				</div>
 			</div>
-		</div>
 
-		<div className="lbl-prop-title">CONFIG</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">HISTORY</div>
-			<div className="lbl-input-readonly">
-				{bucket.history}
+		</TitleAccordion>
+
+
+		<TitleAccordion title="CONFIG">
+
+			<div className="lyt-v">
+				<div className="lbl-prop">HISTORY</div>
+				<div className="lbl-input-readonly">
+					{bucket.history}
+				</div>
 			</div>
-		</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">TTL</div>
-			<div className="lbl-input-readonly">
-				{bucket.ttl}
+
+			<div className="lyt-v">
+				<div className="lbl-prop">TTL</div>
+				<div className="lbl-input-readonly">
+					{bucket.ttl}
+				</div>
 			</div>
-		</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">BACKING STORE</div>
-			<div className="lbl-input-readonly">
-				{bucket.backingStore}
+
+			<div className="lyt-v">
+				<div className="lbl-prop">BACKING STORE</div>
+				<div className="lbl-input-readonly">
+					{bucket.backingStore}
+				</div>
 			</div>
-		</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">COMPRESSION</div>
-			<div className="lbl-input-readonly">
-				{bucket.compressed ? "YES" : "NO"}
+
+			<div className="lyt-v">
+				<div className="lbl-prop">COMPRESSION</div>
+				<div className="lbl-input-readonly">
+					{bucket.compressed ? "YES" : "NO"}
+				</div>
 			</div>
-		</div>
+
+		</TitleAccordion>
 
 	</div>
 }
diff --git a/frontend/src/components/stacks/buckets/detail/View.tsx b/frontend/src/components/stacks/buckets/detail/View.tsx
index 7f1bce4d..6ee1c06a 100644
--- a/frontend/src/components/stacks/buckets/detail/View.tsx
+++ b/frontend/src/components/stacks/buckets/detail/View.tsx
@@ -51,7 +51,7 @@ const BucketDetailView: FunctionComponent<Props> = ({
 		}
 	>
 		{inRead ? (<>
-			<RowButton
+			<RowButton style={{ marginBottom: 13 }}
 				icon={<KvEntriesIcon />}
 				label="KVENTRIES"
 				selected={isKVEntriesSelect}
diff --git a/frontend/src/components/stacks/connections/detail/Form.tsx b/frontend/src/components/stacks/connections/detail/Form.tsx
index a9913162..1a94952b 100644
--- a/frontend/src/components/stacks/connections/detail/Form.tsx
+++ b/frontend/src/components/stacks/connections/detail/Form.tsx
@@ -9,6 +9,7 @@ import { Auth, EDIT_STATE } from "@/types"
 import { useStore } from "@priolo/jon"
 import { FunctionComponent } from "react"
 import AuthForm from "./AuthForm"
+import TitleAccordion from "@/components/accordion/TitleAccordion"
 
 
 
@@ -62,60 +63,61 @@ const ConnectionDetailForm: FunctionComponent<Props> = ({
 
 	return <div className="lyt-form var-dialog">
 
-		<div className="lbl-prop-title">BASE</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">NAME</div>
-			<TextInput
-				value={name}
-				onChange={handleChangeName}
-				readOnly={inRead}
-			/>
-		</div>
+		<TitleAccordion title="BASE">
+			<div className="lyt-v">
+				<div className="lbl-prop">NAME</div>
+				<TextInput
+					value={name}
+					onChange={handleChangeName}
+					readOnly={inRead}
+				/>
+			</div>
+			<div className="lyt-v">
+				<div className="lbl-prop">HOST</div>
+				<EditList<string>
+					items={hosts}
+					onItemsChange={handleHostsChange}
+					readOnly={inRead}
+					placeholder="ex. demo.nats.io"
 
-		<div className="lyt-v">
-			<div className="lbl-prop">HOST</div>
-			<EditList<string>
-				items={hosts}
-				onItemsChange={handleHostsChange}
-				readOnly={inRead}
-				placeholder="ex. demo.nats.io"
-				
-				onNewItem={() => ""}
-				fnIsVoid={h => !h || h.trim().length == 0}
-				RenderRow={EditStringRow}
-			/>
-		</div>
+					onNewItem={() => ""}
+					fnIsVoid={h => !h || h.trim().length == 0}
+					RenderRow={EditStringRow}
+				/>
+			</div>
+		</TitleAccordion>
 
-		<div className="lbl-prop-title">ADVANCED</div>
 
-		<div className="lyt-v">
-			<div className="lbl-prop">AUTH</div>
-			<ListObjects<Auth>
-				store={cnnDetailSo}
-				items={auths}
-				readOnly={inRead}
-				width={170}
-				RenderLabel={({ item: auth, index }) => (
-					<div className="cmp-h">
-						<IconToggle
-							check={auth.active}
-							onChange={(check, e) => handleActivate(check, index, e)}
+		<TitleAccordion title="ADVANCED">
+			<div className="lyt-v">
+				<div className="lbl-prop">AUTH</div>
+				<ListObjects<Auth>
+					store={cnnDetailSo}
+					items={auths}
+					readOnly={inRead}
+					width={170}
+					RenderLabel={({ item: auth, index }) => (
+						<div className="cmp-h">
+							<IconToggle
+								check={auth.active}
+								onChange={(check, e) => handleActivate(check, index, e)}
+								readOnly={inRead}
+								trueIcon={<CheckRadioOnIcon />}
+							/>
+							{auth?.mode?.toUpperCase()}
+						</div>
+					)}
+					onDelete={handleAuthDelete}
+					RenderForm={({ item, index, onClose }) => (
+						<AuthForm
+							auth={item}
 							readOnly={inRead}
-							trueIcon={<CheckRadioOnIcon />}
+							onClose={(auth) => { onClose(); handleAuthChange(auth, index) }}
 						/>
-						{auth?.mode?.toUpperCase()}
-					</div>
-				)}
-				onDelete={handleAuthDelete}
-				RenderForm={({ item, index, onClose }) => (
-					<AuthForm
-						auth={item}
-						readOnly={inRead}
-						onClose={(auth) => { onClose(); handleAuthChange(auth, index) }}
-					/>
-				)}
-			/>
-		</div>
+					)}
+				/>
+			</div>
+		</TitleAccordion>
 
 	</div>
 }
diff --git a/frontend/src/components/stacks/consumers/detail/ShowForm.tsx b/frontend/src/components/stacks/consumers/detail/ShowForm.tsx
index 84a06752..9b62f7d6 100644
--- a/frontend/src/components/stacks/consumers/detail/ShowForm.tsx
+++ b/frontend/src/components/stacks/consumers/detail/ShowForm.tsx
@@ -27,7 +27,7 @@ const ShowForm: FunctionComponent<Props> = ({
 
 	return <div className="lyt-form">
 
-		<TitleAccordion title="CONSUMER">
+		<TitleAccordion title="BASE">
 
 			<div className="lyt-v">
 				<div className="lbl-prop">NAME</div>
diff --git a/frontend/src/components/stacks/streams/detail/EditForm.tsx b/frontend/src/components/stacks/streams/detail/EditForm.tsx
index f5727a62..8cf2285d 100644
--- a/frontend/src/components/stacks/streams/detail/EditForm.tsx
+++ b/frontend/src/components/stacks/streams/detail/EditForm.tsx
@@ -15,6 +15,7 @@ import MaxBytesCmp from "../../../input/MaxBytesCmp"
 import MaxNumberCmp from "../../../input/MaxNumberCmp"
 import MaxTimeCmp from "../../../input/MaxTimeCmp"
 import SourcesCmp from "./cmp/SourcesCmp"
+import TitleAccordion from "@/components/accordion/TitleAccordion"
 
 
 
@@ -77,319 +78,325 @@ const EditForm: FunctionComponent<Props> = ({
 
 	return <div className="lyt-form var-dialog" style={{ marginBottom: 25 }}>
 
-		<div className="lbl-prop-title">BASE</div>
+		<TitleAccordion title="BASE">
 
-		<div className="lyt-v">
-			<div className="lbl-prop">NAME</div>
-			<TextInput
-				value={config.name}
-				onChange={name => handlePropChange({ name })}
-				readOnly={inRead || !inNew}
-			/>
-		</div>
-
-		<div className="lyt-v">
-			<div className="lbl-prop">DESCRIPTION</div>
-			<TextInput multiline rows={2}
-				value={config.description}
-				onChange={description => handlePropChange({ description })}
-				readOnly={inRead}
-			/>
-		</div>
-
-		<div className="lyt-v">
-			<div className="lbl-prop">STORAGE</div>
-			<ListDialog width={80}
-				store={streamSo}
-				select={Object.values(STORAGE).indexOf(config.storage ?? STORAGE.FILE)}
-				items={Object.values(STORAGE)}
-				RenderRow={StringUpRow}
-				readOnly={inRead || !inNew}
-				onSelect={index => handlePropChange({ storage: Object.values(STORAGE)[index] })}
-			/>
-		</div>
-
-		<div className="lyt-v">
-			<div className="lbl-prop">SUBJECTS</div>
-			<EditList<string>
-				items={config.subjects}
-				onItemsChange={subjects => handlePropChange({ subjects })}
-				placeholder="ex. orders.* or telemetry.>"
-				readOnly={inRead}
-				
-				onNewItem={() => ""}
-				fnIsVoid={i => !i || i.trim().length == 0}
-				RenderRow={EditStringRow}
-			/>
-		</div>
+			<div className="lyt-v">
+				<div className="lbl-prop">NAME</div>
+				<TextInput
+					value={config.name}
+					onChange={name => handlePropChange({ name })}
+					readOnly={inRead || !inNew}
+				/>
+			</div>
 
-		<div className="lyt-v">
-			<div className="lbl-prop">SOURCES</div>
-			<SourcesCmp store={streamSo} />
-		</div>
+			<div className="lyt-v">
+				<div className="lbl-prop">DESCRIPTION</div>
+				<TextInput multiline rows={2}
+					value={config.description}
+					onChange={description => handlePropChange({ description })}
+					readOnly={inRead}
+				/>
+			</div>
 
-		<div className="lyt-v">
-			<div className="cmp-h">
-				<IconToggle
-					check={!!config.mirror}
-					onChange={handleMirrorCheck}
+			<div className="lyt-v">
+				<div className="lbl-prop">STORAGE</div>
+				<ListDialog width={80}
+					store={streamSo}
+					select={Object.values(STORAGE).indexOf(config.storage ?? STORAGE.FILE)}
+					items={Object.values(STORAGE)}
+					RenderRow={StringUpRow}
 					readOnly={inRead || !inNew}
+					onSelect={index => handlePropChange({ storage: Object.values(STORAGE)[index] })}
 				/>
-				<div className="lbl-prop">MIRROR</div>
 			</div>
-			<Accordion open={!!config.mirror}>
-				<div className="lyt-quote">
-					<div className="lyt-v">
-						<div className="lbl-prop">NAME</div>
-						{/* <TextInput
+
+			<div className="lyt-v">
+				<div className="lbl-prop">SUBJECTS</div>
+				<EditList<string>
+					items={config.subjects}
+					onItemsChange={subjects => handlePropChange({ subjects })}
+					placeholder="ex. orders.* or telemetry.>"
+					readOnly={inRead}
+
+					onNewItem={() => ""}
+					fnIsVoid={i => !i || i.trim().length == 0}
+					RenderRow={EditStringRow}
+				/>
+			</div>
+
+			<div className="lyt-v">
+				<div className="lbl-prop">SOURCES</div>
+				<SourcesCmp store={streamSo} />
+			</div>
+
+			<div className="lyt-v">
+				<div className="cmp-h">
+					<IconToggle
+						check={!!config.mirror}
+						onChange={handleMirrorCheck}
+						readOnly={inRead || !inNew}
+					/>
+					<div className="lbl-prop">MIRROR</div>
+				</div>
+				<Accordion open={!!config.mirror}>
+					<div className="lyt-quote">
+						<div className="lyt-v">
+							<div className="lbl-prop">NAME</div>
+							{/* <TextInput
 							value={config.mirror?.name}
 							onChange={name => handleMirrorPropChange({ name })}
 							readOnly={inRead || !inNew}
 						/> */}
-						<ListDialog width={200}
-							store={streamSo}
-							select={allStreams?.indexOf(config?.mirror?.name) ?? -1}
-							items={allStreams}
-							readOnly={inRead || !inNew}
-							onSelect={index => {
-								handleMirrorPropChange({ name: allStreams[index] })
-							}}
-						/>
-					</div>
-					<div className="lyt-v">
-						<div className="lbl-prop">START SEQUENCE</div>
-						<NumberInput
-							style={{ flex: 1 }}
-							value={config.mirror?.optStartSeq}
-							onChange={optStartSeq => handleMirrorPropChange({ optStartSeq })}
-							readOnly={inRead || !inNew}
-						/>
+							<ListDialog width={200}
+								store={streamSo}
+								select={allStreams?.indexOf(config?.mirror?.name) ?? -1}
+								items={allStreams}
+								readOnly={inRead || !inNew}
+								onSelect={index => {
+									handleMirrorPropChange({ name: allStreams[index] })
+								}}
+							/>
+						</div>
+						<div className="lyt-v">
+							<div className="lbl-prop">START SEQUENCE</div>
+							<NumberInput
+								style={{ flex: 1 }}
+								value={config.mirror?.optStartSeq}
+								onChange={optStartSeq => handleMirrorPropChange({ optStartSeq })}
+								readOnly={inRead || !inNew}
+							/>
+						</div>
+						<div className="lyt-v">
+							<div className="lbl-prop">FILTER SUBJECT</div>
+							<TextInput
+								value={config.mirror?.filterSubject}
+								onChange={filterSubject => handleMirrorPropChange({ filterSubject })}
+								readOnly={inRead || !inNew}
+							/>
+						</div>
 					</div>
-					<div className="lyt-v">
-						<div className="lbl-prop">FILTER SUBJECT</div>
-						<TextInput
-							value={config.mirror?.filterSubject}
-							onChange={filterSubject => handleMirrorPropChange({ filterSubject })}
-							readOnly={inRead || !inNew}
-						/>
-					</div>
-				</div>
-			</Accordion>
-		</div>
-
-		<div className="lbl-prop-title">RETENTION</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">POLICY</div>
-			<ListDialog width={100}
-				store={streamSo}
-				select={Object.values(RETENTION).indexOf(config.retention ?? RETENTION.INTEREST)}
-				items={Object.values(RETENTION)}
-				RenderRow={StringUpRow}
+				</Accordion>
+			</div>
+		</TitleAccordion>
+
+
+		<TitleAccordion title="RETENTION">
+			<div className="lyt-v">
+				<div className="lbl-prop">POLICY</div>
+				<ListDialog width={100}
+					store={streamSo}
+					select={Object.values(RETENTION).indexOf(config.retention ?? RETENTION.INTEREST)}
+					items={Object.values(RETENTION)}
+					RenderRow={StringUpRow}
+					readOnly={inRead || !inNew}
+					onSelect={index => handlePropChange({ retention: Object.values(RETENTION)[index] })}
+				/>
+			</div>
+			<div className="lyt-v">
+				<div className="lbl-prop">DISCARD</div>
+				<ListDialog width={80}
+					store={streamSo}
+					select={Object.values(DISCARD).indexOf(config.discard ?? DISCARD.OLD)}
+					items={Object.values(DISCARD)}
+					RenderRow={StringUpRow}
+					readOnly={inRead}
+					onSelect={index => {
+						handlePropChange({ discard: Object.values(DISCARD)[index] })
+					}}
+				/>
+			</div>
+			<div className="cmp-h">
+				<IconToggle
+					check={config.allowRollupHdrs}
+					onChange={allowRollupHdrs => handlePropChange({ allowRollupHdrs })}
+					readOnly={inRead}
+				/>
+				<div className="lbl-prop">ALLOW ROLL UP HDRS</div>
+			</div>
+			<div className="cmp-h">
+				<IconToggle
+					check={config.denyDelete}
+					onChange={denyDelete => handlePropChange({ denyDelete })}
+					readOnly={inRead || !inNew}
+				/>
+				<div className="lbl-prop">DENY DELETE</div>
+			</div>
+			<div className="cmp-h">
+				<IconToggle
+					check={config.denyPurge}
+					onChange={denyPurge => handlePropChange({ denyPurge })}
+					readOnly={inRead || !inNew}
+				/>
+				<div className="lbl-prop">DENY PURGE</div>
+			</div>
+		</TitleAccordion>
+
+
+		<TitleAccordion title="LIMIT">
+			<MaxTimeCmp store={streamSo}
 				readOnly={inRead || !inNew}
-				onSelect={index => handlePropChange({ retention: Object.values(RETENTION)[index] })}
+				label="MAX AGE"
+				value={config.maxAge}
+				desiredDefault={0}
+				onChange={maxAge => streamSo.setStreamConfig({ ...streamSa.stream.config, maxAge })}
 			/>
-		</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">DISCARD</div>
-			<ListDialog width={80}
-				store={streamSo}
-				select={Object.values(DISCARD).indexOf(config.discard ?? DISCARD.OLD)}
-				items={Object.values(DISCARD)}
-				RenderRow={StringUpRow}
-				readOnly={inRead}
-				onSelect={index => {
-					handlePropChange({ discard: Object.values(DISCARD)[index] })
-				}}
+			<MaxBytesCmp store={streamSo}
+				readOnly={inRead || !inNew}
+				label="MAX BYTES"
+				value={config.maxBytes}
+				onChange={maxBytes => streamSo.setStreamConfig({ ...streamSa.stream.config, maxBytes })}
 			/>
-		</div>
-		<div className="cmp-h">
-			<IconToggle
-				check={config.allowRollupHdrs}
-				onChange={allowRollupHdrs => handlePropChange({ allowRollupHdrs })}
-				readOnly={inRead}
+			<MaxNumberCmp
+				readOnly={inRead || !inNew}
+				label="MAX CONSUMERS"
+				value={config.maxConsumers}
+				onChange={maxConsumers => streamSo.setStreamConfig({ ...streamSa.stream.config, maxConsumers })}
 			/>
-			<div className="lbl-prop">ALLOW ROLL UP HDRS</div>
-		</div>
-		<div className="cmp-h">
-			<IconToggle
-				check={config.denyDelete}
-				onChange={denyDelete => handlePropChange({ denyDelete })}
+			<MaxBytesCmp store={streamSo}
 				readOnly={inRead || !inNew}
+				label="MAX MSG SIZE"
+				value={config.maxMsgSize}
+				onChange={maxMsgSize => streamSo.setStreamConfig({ ...streamSa.stream.config, maxMsgSize })}
 			/>
-			<div className="lbl-prop">DENY DELETE</div>
-		</div>
-		<div className="cmp-h">
-			<IconToggle
-				check={config.denyPurge}
-				onChange={denyPurge => handlePropChange({ denyPurge })}
+			<MaxNumberCmp
 				readOnly={inRead || !inNew}
+				label="MAX MESSAGES"
+				value={config.maxMsgs}
+				onChange={maxMsgs => streamSo.setStreamConfig({ ...streamSa.stream.config, maxMsgs })}
 			/>
-			<div className="lbl-prop">DENY PURGE</div>
-		</div>
-
-
-		<div className="lbl-prop-title">LIMIT</div>
-		<MaxTimeCmp store={streamSo}
-			readOnly={inRead || !inNew}
-			label="MAX AGE"
-			value={config.maxAge}
-			desiredDefault={0}
-			onChange={maxAge => streamSo.setStreamConfig({ ...streamSa.stream.config, maxAge })}
-		/>
-		<MaxBytesCmp store={streamSo}
-			readOnly={inRead || !inNew}
-			label="MAX BYTES"
-			value={config.maxBytes}
-			onChange={maxBytes => streamSo.setStreamConfig({ ...streamSa.stream.config, maxBytes })}
-		/>
-		<MaxNumberCmp
-			readOnly={inRead || !inNew}
-			label="MAX CONSUMERS"
-			value={config.maxConsumers}
-			onChange={maxConsumers => streamSo.setStreamConfig({ ...streamSa.stream.config, maxConsumers })}
-		/>
-		<MaxBytesCmp store={streamSo}
-			readOnly={inRead || !inNew}
-			label="MAX MSG SIZE"
-			value={config.maxMsgSize}
-			onChange={maxMsgSize => streamSo.setStreamConfig({ ...streamSa.stream.config, maxMsgSize })}
-		/>
-		<MaxNumberCmp
-			readOnly={inRead || !inNew}
-			label="MAX MESSAGES"
-			value={config.maxMsgs}
-			onChange={maxMsgs => streamSo.setStreamConfig({ ...streamSa.stream.config, maxMsgs })}
-		/>
-		<MaxNumberCmp
-			readOnly={inRead || !inNew}
-			label="MAX MSGS PER SUBJECT"
-			value={config.maxMsgsPerSubject}
-			onChange={maxMsgsPerSubject => streamSo.setStreamConfig({ ...streamSa.stream.config, maxMsgsPerSubject })}
-		/>
-
-
-		<div className="lbl-prop-title">PLACEMENT</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">NUM REPLICAS</div>
-			<NumberInput
-				style={{ flex: 1 }}
-				value={config.numReplicas}
-				onChange={numReplicas => handlePropChange({ numReplicas })}
-				readOnly={inRead}
+			<MaxNumberCmp
+				readOnly={inRead || !inNew}
+				label="MAX MSGS PER SUBJECT"
+				value={config.maxMsgsPerSubject}
+				onChange={maxMsgsPerSubject => streamSo.setStreamConfig({ ...streamSa.stream.config, maxMsgsPerSubject })}
 			/>
-		</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">CLUSTER</div>
-			<div className="lyt-quote">
-				<div className="lyt-v">
-					<div className="lbl-prop">NAME</div>
-					<TextInput
-						value={config.placement?.cluster}
-						onChange={cluster => handlePlacementPropChange({ cluster })}
-						readOnly={inRead}
-					/>
-				</div>
-				<div className="lyt-v">
-					<div className="lbl-prop">TAGS</div>
-					<EditList<string>
-						items={config.placement?.tags}
-						onItemsChange={tags => handlePlacementPropChange({ tags })}
-						placeholder="ex. client or java"
-						readOnly={inRead}
-						onNewItem={() => ""}
-						fnIsVoid={i => !i || i.trim().length == 0}
-						RenderRow={EditStringRow}
-					/>
-				</div>
-			</div>
-		</div>
+		</TitleAccordion>
 
 
-		<div className="lbl-prop-title">PUBLISH</div>
-		<div className="cmp-h">
-			<IconToggle
-				check={config.noAck}
-				onChange={noAck => handlePropChange({ noAck })}
-				readOnly={inRead}
-			/>
-			<div className="lbl-prop">ALLOW NO ACK ON PUBLISH</div>
-		</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">DUPLICATE WINDOW</div>
-			<NumberInput
-				style={{ flex: 1 }}
-				value={config.duplicateWindow}
-				onChange={duplicateWindow => handlePropChange({ duplicateWindow })}
-				readOnly={inRead}
-			/>
-		</div>
-		<div className="lyt-v">
-			<div className="cmp-h">
-				<IconToggle
-					check={!!config.republish}
-					onChange={check => {
-						if (check) {
-							if (!config.republish) {
-								handlePropChange({
-									republish: {
-										src: "",
-										dest: "",
-										headersOnly: false,
-									}
-								})
-							}
-						} else {
-							if (config.republish) {
-								handlePropChange({ republish: null })
-							}
-						}
-					}}
+		<TitleAccordion title="PLACEMENT">
+			<div className="lyt-v">
+				<div className="lbl-prop">NUM REPLICAS</div>
+				<NumberInput
+					style={{ flex: 1 }}
+					value={config.numReplicas}
+					onChange={numReplicas => handlePropChange({ numReplicas })}
 					readOnly={inRead}
 				/>
-				<div className="lbl-prop">REPUBLISH</div>
 			</div>
-			<Accordion open={!!config.republish}>
+			<div className="lyt-v">
+				<div className="lbl-prop">CLUSTER</div>
 				<div className="lyt-quote">
 					<div className="lyt-v">
-						<div className="lbl-prop">SOURCE</div>
+						<div className="lbl-prop">NAME</div>
 						<TextInput
-							value={config.republish?.src}
-							onChange={src => handleRepublishPropChange({ src })}
+							value={config.placement?.cluster}
+							onChange={cluster => handlePlacementPropChange({ cluster })}
 							readOnly={inRead}
 						/>
 					</div>
 					<div className="lyt-v">
-						<div className="lbl-prop">DESTINATION</div>
-						<TextInput
-							value={config.republish?.dest}
-							onChange={dest => handleRepublishPropChange({ dest })}
-							readOnly={inRead}
-						/>
-					</div>
-					<div className="cmp-h">
-						<IconToggle
-							check={config.republish?.headersOnly}
-							onChange={headersOnly => handleRepublishPropChange({ headersOnly })}
+						<div className="lbl-prop">TAGS</div>
+						<EditList<string>
+							items={config.placement?.tags}
+							onItemsChange={tags => handlePlacementPropChange({ tags })}
+							placeholder="ex. client or java"
 							readOnly={inRead}
+							onNewItem={() => ""}
+							fnIsVoid={i => !i || i.trim().length == 0}
+							RenderRow={EditStringRow}
 						/>
-						<div className="lbl-prop">HEADERS ONLY</div>
 					</div>
 				</div>
-			</Accordion>
-		</div>
+			</div>
+		</TitleAccordion>
 
-		<div className="lbl-prop-title">SEAL</div>
 
-		<div className="cmp-h">
-			<IconToggle
-				check={config.sealed}
-				onChange={sealed => handlePropChange({ sealed })}
-				readOnly={inRead}
-			/>
-			<div className="lbl-prop">SEALED</div>
-		</div>
+		<TitleAccordion title="PUBLISH">
+			<div className="cmp-h">
+				<IconToggle
+					check={config.noAck}
+					onChange={noAck => handlePropChange({ noAck })}
+					readOnly={inRead}
+				/>
+				<div className="lbl-prop">ALLOW NO ACK ON PUBLISH</div>
+			</div>
+			<div className="lyt-v">
+				<div className="lbl-prop">DUPLICATE WINDOW</div>
+				<NumberInput
+					style={{ flex: 1 }}
+					value={config.duplicateWindow}
+					onChange={duplicateWindow => handlePropChange({ duplicateWindow })}
+					readOnly={inRead}
+				/>
+			</div>
+			<div className="lyt-v">
+				<div className="cmp-h">
+					<IconToggle
+						check={!!config.republish}
+						onChange={check => {
+							if (check) {
+								if (!config.republish) {
+									handlePropChange({
+										republish: {
+											src: "",
+											dest: "",
+											headersOnly: false,
+										}
+									})
+								}
+							} else {
+								if (config.republish) {
+									handlePropChange({ republish: null })
+								}
+							}
+						}}
+						readOnly={inRead}
+					/>
+					<div className="lbl-prop">REPUBLISH</div>
+				</div>
+				<Accordion open={!!config.republish}>
+					<div className="lyt-quote">
+						<div className="lyt-v">
+							<div className="lbl-prop">SOURCE</div>
+							<TextInput
+								value={config.republish?.src}
+								onChange={src => handleRepublishPropChange({ src })}
+								readOnly={inRead}
+							/>
+						</div>
+						<div className="lyt-v">
+							<div className="lbl-prop">DESTINATION</div>
+							<TextInput
+								value={config.republish?.dest}
+								onChange={dest => handleRepublishPropChange({ dest })}
+								readOnly={inRead}
+							/>
+						</div>
+						<div className="cmp-h">
+							<IconToggle
+								check={config.republish?.headersOnly}
+								onChange={headersOnly => handleRepublishPropChange({ headersOnly })}
+								readOnly={inRead}
+							/>
+							<div className="lbl-prop">HEADERS ONLY</div>
+						</div>
+					</div>
+				</Accordion>
+			</div>
+		</TitleAccordion>
+
+
+		<TitleAccordion title="SEAL">
+			<div className="cmp-h">
+				<IconToggle
+					check={config.sealed}
+					onChange={sealed => handlePropChange({ sealed })}
+					readOnly={inRead}
+				/>
+				<div className="lbl-prop">SEALED</div>
+			</div>
 
-		{/*<div className="lyt-v">
+			{/*<div className="lyt-v">
 			<div className="lbl-prop">TEMPLATE OWNER</div>
 			<TextInput
 				value={config.templateOwner}
@@ -397,6 +404,7 @@ const EditForm: FunctionComponent<Props> = ({
 				readOnly={inRead}
 			/>
 		</div>*/}
+		</TitleAccordion>
 
 	</div>
 }
diff --git a/frontend/src/components/stacks/streams/detail/View.tsx b/frontend/src/components/stacks/streams/detail/View.tsx
index 10eb6851..b5f1d709 100644
--- a/frontend/src/components/stacks/streams/detail/View.tsx
+++ b/frontend/src/components/stacks/streams/detail/View.tsx
@@ -59,23 +59,24 @@ const StreamDetailView: FunctionComponent<Props> = ({
 			</div>
 		}
 	>
-		{inRead ? <>
+		{inRead && <>
 			<RowButton
 				icon={<MessagesIcon />}
 				label="MESSAGES"
 				selected={isMessagesSelect}
 				onClick={handleMessagesClick}
 			/>
-			<RowButton style={{ marginBottom: 12 }}
+			<RowButton style={{ marginBottom: 13 }}
 				icon={<ConsumersIcon />}
 				label="CONSUMERS"
 				selected={isConsumersSelect}
 				onClick={handleConsumersClick}
 			/>
-			<ShowForm store={streamSo} />
-		</> : (
-			<EditForm store={streamSo} />
-		)}
+			
+		</>}
+
+		<EditForm store={streamSo} />
+
 	</FrameworkCard>
 }
 
diff --git a/frontend/src/stores/stacks/streams/index.ts b/frontend/src/stores/stacks/streams/index.ts
index d3719031..fe70520e 100644
--- a/frontend/src/stores/stacks/streams/index.ts
+++ b/frontend/src/stores/stacks/streams/index.ts
@@ -1,16 +1,15 @@
 import strApi from "@/api/streams"
 import cnnSo from "@/stores/connections"
+import { GetAllCards } from "@/stores/docs/cards"
+import { findAll } from "@/stores/docs/utils/manage"
 import { COLOR_VAR } from "@/stores/layout"
+import { MESSAGE_TYPE } from "@/stores/log/utils"
 import { ViewState, ViewStore, default as docSetup, default as viewSetup } from "@/stores/stacks/viewBase"
 import { DOC_TYPE } from "@/types"
 import { StreamInfo } from "@/types/Stream"
 import { StoreCore, mixStores } from "@priolo/jon"
-import { buildConsumers } from "../consumer/utils/factory"
 import loadBaseSetup, { LoadBaseState, LoadBaseStore } from "../loadBase"
-import { buildStream, buildStreamMessages, buildStreamNew } from "./utils/factory"
-import { findAll } from "@/stores/docs/utils/manage"
-import { GetAllCards } from "@/stores/docs/cards"
-import { MESSAGE_TYPE } from "@/stores/log/utils"
+import { buildStream, buildStreamNew } from "./utils/factory"