diff --git a/src/NRPlusGatewayTile.tsx b/src/NRPlusGatewayTile.tsx
index 7cfba197..a73eca43 100644
--- a/src/NRPlusGatewayTile.tsx
+++ b/src/NRPlusGatewayTile.tsx
@@ -70,7 +70,7 @@ export const NRPlusGatewayTile = ({ gateway }: { gateway: NRPlusGateway }) => {
 				<>
 					<NRPlusTopology
 						topology={gateway.state.topology}
-						size={{ width: 250, height: 100 }}
+						size={{ width: 250, height: 150 }}
 					/>
 				</>
 			)}
diff --git a/src/nrplus/TopologyApp.tsx b/src/nrplus/TopologyApp.tsx
index db2daa39..6b4e048a 100644
--- a/src/nrplus/TopologyApp.tsx
+++ b/src/nrplus/TopologyApp.tsx
@@ -21,21 +21,29 @@ export const App = () => {
 	return (
 		<div class="container">
 			<div class="row">
-				<main class="col-8">
-					<NRPlusTopology
-						topology={parsedTopology}
-						size={{ width: 250, height: 150 }}
-						showHelpers
-					/>
+				<main class="col-4">
+					<div class="m-4">
+						<NRPlusTopology
+							topology={parsedTopology}
+							size={{ width: 250, height: 150 }}
+							showHelpers
+						/>
+						<div class="mt-4">
+							<textarea
+								onInput={(e) =>
+									setTopology((e.target as HTMLInputElement).value)
+								}
+								value={topology}
+								rows={topology.split('\n').length}
+								cols={Math.max(...topology.split('\n').map((s) => s.length))}
+							></textarea>
+						</div>
+					</div>
 				</main>
-				<aside class="col-4 text-white">
-					<textarea
-						onInput={(e) => setTopology((e.target as HTMLInputElement).value)}
-						value={topology}
-						rows={topology.split('\n').length}
-					></textarea>
-
-					<pre>{JSON.stringify({ topology: parsedTopology }, null, 2)}</pre>
+				<aside class="col-8 text-white">
+					<pre class="m-4">
+						{JSON.stringify({ topology: parsedTopology }, null, 2)}
+					</pre>
 				</aside>
 			</div>
 		</div>