diff --git a/desktop/plugins/network/ManageMockResponsePanel.tsx b/desktop/plugins/network/ManageMockResponsePanel.tsx
index 0174d9116..86c6b3fa9 100644
--- a/desktop/plugins/network/ManageMockResponsePanel.tsx
+++ b/desktop/plugins/network/ManageMockResponsePanel.tsx
@@ -8,6 +8,7 @@
  */
 
 import {
+  Layout,
   ManagedTable,
   Text,
   FlexBox,
@@ -61,14 +62,17 @@ const Container = styled(FlexRow)({
   flex: 1,
   justifyContent: 'space-around',
   alignItems: 'stretch',
+  height: '100%',
+  width: '100%',
 });
 
 const LeftPanel = styled(FlexColumn)({
-  flex: 1,
+  height: '100%',
+  width: '35%',
 });
 
 const RightPanel = styled(FlexColumn)({
-  flex: 3,
+  flex: 2,
   height: '100%',
 });
 
@@ -195,7 +199,7 @@ export function ManageMockResponsePanel(props: Props) {
     props.routes,
   ]);
   return (
-    <Container>
+    <Container style={{height: 580}}>
       <LeftPanel>
         <AddRouteButton
           onClick={() => {
@@ -225,6 +229,13 @@ export function ManageMockResponsePanel(props: Props) {
           />
           &nbsp;Copy Highlighted Calls
         </CopyHighlightedCallsButton>
+        <hr
+          style={{
+            height: 1,
+            backgroundColor: colors.grey,
+            width: '95%',
+          }}
+        />
         <ManagedTable
           hideHeader={true}
           multiline={true}
diff --git a/desktop/plugins/network/MockResponseDetails.tsx b/desktop/plugins/network/MockResponseDetails.tsx
index 166e222d5..e28904685 100644
--- a/desktop/plugins/network/MockResponseDetails.tsx
+++ b/desktop/plugins/network/MockResponseDetails.tsx
@@ -53,7 +53,7 @@ const StyledText = styled(Text)({
 const textAreaStyle: React.CSSProperties = {
   width: '100%',
   marginTop: 8,
-  height: 300,
+  height: 430,
   fontSize: 15,
   color: '#333',
   padding: 10,
@@ -240,6 +240,14 @@ export function MockResponseDetails({id, route, isDuplicated}: Props) {
   const [nextHeaderId, setNextHeaderId] = useState(0);
 
   const {requestUrl, requestMethod, responseData, responseStatus} = route;
+
+  let formattedResponse = '';
+  try {
+    formattedResponse = JSON.stringify(JSON.parse(responseData), null, 2);
+  } catch (e) {
+    formattedResponse = responseData;
+  }
+
   return (
     <Container>
       <FlexRow style={{width: '100%'}}>
@@ -298,7 +306,7 @@ export function MockResponseDetails({id, route, isDuplicated}: Props) {
             wrap="soft"
             autoComplete="off"
             spellCheck={false}
-            value={responseData}
+            value={formattedResponse}
             onChange={(event) =>
               networkRouteManager.modifyRoute(id, {
                 responseData: event.target.value,
@@ -308,6 +316,25 @@ export function MockResponseDetails({id, route, isDuplicated}: Props) {
         </Tab>
         <Tab key={'headers'} label={'Headers'}>
           <FlexColumn>
+            <AddHeaderButton
+              onClick={() => {
+                const newHeaders = {
+                  ...route.responseHeaders,
+                  [nextHeaderId.toString()]: {key: '', value: ''},
+                };
+                setNextHeaderId(nextHeaderId + 1);
+                networkRouteManager.modifyRoute(id, {
+                  responseHeaders: newHeaders,
+                });
+              }}>
+              <Glyph
+                name="plus-circle"
+                size={16}
+                variant="outline"
+                color={colors.blackAlpha30}
+              />
+              &nbsp;Add Header
+            </AddHeaderButton>
             <ManagedTable
               hideHeader={true}
               multiline={true}
@@ -322,31 +349,11 @@ export function MockResponseDetails({id, route, isDuplicated}: Props) {
               stickyBottom={true}
               autoHeight={true}
               floating={false}
-              // height={300}
               zebra={false}
               onRowHighlighted={setSelectedHeaderIds}
               highlightedRows={new Set(selectedHeaderIds)}
             />
           </FlexColumn>
-          <AddHeaderButton
-            onClick={() => {
-              const newHeaders = {
-                ...route.responseHeaders,
-                [nextHeaderId.toString()]: {key: '', value: ''},
-              };
-              setNextHeaderId(nextHeaderId + 1);
-              networkRouteManager.modifyRoute(id, {
-                responseHeaders: newHeaders,
-              });
-            }}>
-            <Glyph
-              name="plus-circle"
-              size={16}
-              variant="outline"
-              color={colors.blackAlpha30}
-            />
-            &nbsp;Add Header
-          </AddHeaderButton>
         </Tab>
       </Tabs>
     </Container>
diff --git a/desktop/plugins/network/MockResponseDialog.tsx b/desktop/plugins/network/MockResponseDialog.tsx
index a484c8b0d..9616504b7 100644
--- a/desktop/plugins/network/MockResponseDialog.tsx
+++ b/desktop/plugins/network/MockResponseDialog.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-import {FlexColumn, Button, styled} from 'flipper';
+import {FlexColumn, Button, styled, Layout} from 'flipper';
 
 import {ManageMockResponsePanel} from './ManageMockResponsePanel';
 import {Route, Request, Response} from './types';
@@ -40,19 +40,21 @@ const Row = styled(FlexColumn)({
 
 export function MockResponseDialog(props: Props) {
   return (
-    <Container>
+    <Layout.Container pad width={1200}>
       <Title>Mock Network Responses</Title>
-      <ManageMockResponsePanel
-        routes={props.routes}
-        highlightedRows={props.highlightedRows}
-        requests={props.requests}
-        responses={props.responses}
-      />
-      <Row>
+      <Layout.Horizontal>
+        <ManageMockResponsePanel
+          routes={props.routes}
+          highlightedRows={props.highlightedRows}
+          requests={props.requests}
+          responses={props.responses}
+        />
+      </Layout.Horizontal>
+      <Layout.Horizontal>
         <Button compact padded onClick={props.onHide}>
           Close
         </Button>
-      </Row>
-    </Container>
+      </Layout.Horizontal>
+    </Layout.Container>
   );
 }