diff --git a/desktop/plugins/network/ManageMockResponsePanel.tsx b/desktop/plugins/network/ManageMockResponsePanel.tsx
index 10c735d20..5f3d902de 100644
--- a/desktop/plugins/network/ManageMockResponsePanel.tsx
+++ b/desktop/plugins/network/ManageMockResponsePanel.tsx
@@ -13,7 +13,6 @@ import {
   Text,
   FlexBox,
   FlexRow,
-  FlexColumn,
   Glyph,
   styled,
   colors,
@@ -48,24 +47,6 @@ const Button = styled(FlexBox)({
   textOverflow: 'ellipsis',
 });
 
-const Container = styled(FlexRow)({
-  flex: 1,
-  justifyContent: 'space-around',
-  alignItems: 'stretch',
-  height: '100%',
-  width: '100%',
-});
-
-const LeftPanel = styled(FlexColumn)({
-  height: '100%',
-  width: '35%',
-});
-
-const RightPanel = styled(FlexColumn)({
-  flex: 2,
-  height: '100%',
-});
-
 const TextEllipsis = styled(Text)({
   overflowX: 'hidden',
   textOverflow: 'ellipsis',
@@ -189,73 +170,74 @@ export function ManageMockResponsePanel(props: Props) {
     props.routes,
   ]);
   return (
-    <Container style={{height: 560}}>
-      <LeftPanel>
-        <Button
-          onClick={() => {
-            networkRouteManager.addRoute();
-          }}>
-          <Glyph
-            name="plus-circle"
-            size={16}
-            variant="outline"
-            color={colors.blackAlpha30}
-          />
-          &nbsp;Add Route
-        </Button>
-        <Button
-          onClick={() => {
-            networkRouteManager.copyHighlightedCalls(
-              props.highlightedRows as Set<string>,
-              props.requests,
-              props.responses,
-            );
-          }}>
-          <Glyph
-            name="plus-circle"
-            size={16}
-            variant="outline"
-            color={colors.blackAlpha30}
-          />
-          &nbsp;Copy Highlighted Calls
-        </Button>
-        <hr
-          style={{
-            height: 1,
-            backgroundColor: colors.grey,
-            width: '95%',
-          }}
-        />
-        <ManagedTable
-          hideHeader={true}
-          multiline={true}
-          columnSizes={ColumnSizes}
-          columns={Columns}
-          rows={_buildRows(props.routes, duplicatedIds, (id) => {
-            networkRouteManager.removeRoute(id);
-            setSelectedId(null);
-          })}
-          stickyBottom={true}
-          autoHeight={false}
-          floating={false}
-          zebra={false}
-          onRowHighlighted={(selectedIds) => {
-            const newSelectedId =
-              selectedIds.length === 1 ? selectedIds[0] : null;
-            setSelectedId(newSelectedId);
-          }}
-          highlightedRows={new Set(selectedId)}
-        />
-      </LeftPanel>
-      <RightPanel>
-        {selectedId && props.routes.hasOwnProperty(selectedId) && (
-          <ManagedMockResponseRightPanel
-            id={selectedId}
-            route={props.routes[selectedId]}
-            isDuplicated={duplicatedIds.includes(selectedId)}
-          />
-        )}
-      </RightPanel>
-    </Container>
+    <Layout.Container style={{height: 550}}>
+      <Layout.Left>
+        <Layout.Container width={450} pad={10} gap={5}>
+          <Button
+            onClick={() => {
+              networkRouteManager.addRoute();
+            }}>
+            <Glyph
+              name="plus-circle"
+              size={16}
+              variant="outline"
+              color={colors.blackAlpha30}
+            />
+            &nbsp;Add Route
+          </Button>
+          <Button
+            onClick={() => {
+              networkRouteManager.copyHighlightedCalls(
+                props.highlightedRows as Set<string>,
+                props.requests,
+                props.responses,
+              );
+            }}>
+            <Glyph
+              name="plus-circle"
+              size={16}
+              variant="outline"
+              color={colors.blackAlpha30}
+            />
+            &nbsp;Copy Highlighted Calls
+          </Button>
+          <Panel
+            grow={true}
+            collapsable={false}
+            floating={false}
+            heading={'Routes'}>
+            <ManagedTable
+              hideHeader={true}
+              multiline={false}
+              columnSizes={ColumnSizes}
+              columns={Columns}
+              rows={_buildRows(props.routes, duplicatedIds, (id) => {
+                networkRouteManager.removeRoute(id);
+                setSelectedId(null);
+              })}
+              stickyBottom={true}
+              autoHeight={false}
+              floating={false}
+              zebra={false}
+              onRowHighlighted={(selectedIds) => {
+                const newSelectedId =
+                  selectedIds.length === 1 ? selectedIds[0] : null;
+                setSelectedId(newSelectedId);
+              }}
+              highlightedRows={new Set(selectedId)}
+            />
+          </Panel>
+        </Layout.Container>
+        <Layout.Container>
+          {selectedId && props.routes.hasOwnProperty(selectedId) && (
+            <ManagedMockResponseRightPanel
+              id={selectedId}
+              route={props.routes[selectedId]}
+              isDuplicated={duplicatedIds.includes(selectedId)}
+            />
+          )}
+        </Layout.Container>
+      </Layout.Left>
+    </Layout.Container>
   );
 }
diff --git a/desktop/plugins/network/MockResponseDialog.tsx b/desktop/plugins/network/MockResponseDialog.tsx
index 3d7aa10ec..7c7df38ed 100644
--- a/desktop/plugins/network/MockResponseDialog.tsx
+++ b/desktop/plugins/network/MockResponseDialog.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-import {FlexColumn, Button, styled, Layout, Spacer} from 'flipper';
+import {Button, styled, Layout, Spacer} from 'flipper';
 
 import {ManageMockResponsePanel} from './ManageMockResponsePanel';
 import {Route, Request, Response} from './types';
@@ -30,30 +30,24 @@ const Title = styled('div')({
   marginTop: 8,
 });
 
-const Container = styled(FlexColumn)({
+const StyledContainer = styled(Layout.Container)({
   padding: 10,
-  width: 800,
-  height: 550,
-});
-
-const Row = styled(FlexColumn)({
-  alignItems: 'flex-end',
-  marginTop: 16,
+  width: 1200,
 });
 
 export function MockResponseDialog(props: Props) {
   const networkRouteManager = useContext(NetworkRouteContext);
   return (
-    <Layout.Container pad width={1200}>
+    <StyledContainer pad gap width={1200}>
       <Title>Mock Network Responses</Title>
-      <Layout.Horizontal>
+      <Layout.Container>
         <ManageMockResponsePanel
           routes={props.routes}
           highlightedRows={props.highlightedRows}
           requests={props.requests}
           responses={props.responses}
         />
-      </Layout.Horizontal>
+      </Layout.Container>
       <Layout.Horizontal gap>
         <Button
           compact
@@ -84,6 +78,6 @@ export function MockResponseDialog(props: Props) {
           Close
         </Button>
       </Layout.Horizontal>
-    </Layout.Container>
+    </StyledContainer>
   );
 }
diff --git a/desktop/plugins/network/index.tsx b/desktop/plugins/network/index.tsx
index e1fea2983..bc15b3443 100644
--- a/desktop/plugins/network/index.tsx
+++ b/desktop/plugins/network/index.tsx
@@ -14,8 +14,7 @@ import {message} from 'antd';
 
 import {
   ContextMenu,
-  FlexColumn,
-  FlexRow,
+  Layout,
   Button,
   Text,
   Glyph,
@@ -592,7 +591,7 @@ export function Component() {
   const networkRouteManager = useValue(instance.networkRouteManager);
 
   return (
-    <FlexColumn grow={true}>
+    <Layout.Container grow={true}>
       <NetworkRouteContext.Provider value={networkRouteManager}>
         <NetworkTable
           requests={requests || {}}
@@ -610,7 +609,7 @@ export function Component() {
         />
         <Sidebar />
       </NetworkRouteContext.Provider>
-    </FlexColumn>
+    </Layout.Container>
   );
 }
 
@@ -898,7 +897,7 @@ class NetworkTable extends PureComponent<NetworkTableProps, NetworkTableState> {
       <>
         <NetworkTable.ContextMenu
           items={this.contextMenuItems()}
-          component={FlexColumn}>
+          component={Layout.Container}>
           <SearchableTable
             virtual={true}
             multiline={false}
@@ -918,12 +917,12 @@ class NetworkTable extends PureComponent<NetworkTableProps, NetworkTableState> {
             clearSearchTerm={this.props.searchTerm !== ''}
             defaultSearchTerm={this.props.searchTerm}
             actions={
-              <FlexRow>
+              <Layout.Horizontal gap>
                 <Button onClick={this.props.clear}>Clear Table</Button>
                 {this.props.isMockResponseSupported && (
                   <Button onClick={this.props.onMockButtonPressed}>Mock</Button>
                 )}
-              </FlexRow>
+              </Layout.Horizontal>
             }
           />
         </NetworkTable.ContextMenu>