1 files changed, 24 insertions, 3 deletions
diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index 09a51d0bb..29a3e2b1e 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 
 import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { ActionLink } from 'ts/pages/instant/action_link';
 import { CodeDemo } from 'ts/pages/instant/code_demo';
 import { colors } from 'ts/style/colors';
 
@@ -9,8 +11,27 @@ export interface ConfiguratorProps {
 }
 
 export const Configurator = (props: ConfiguratorProps) => (
-    <Container className="flex" id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground}>
-        <Container> Forms </Container>
-        <CodeDemo />
+    <Container
+        className="flex justify-center py4 px3"
+        id={props.hash}
+        backgroundColor={colors.instantTertiaryBackground}
+    >
+        <Container className="mx3">
+            <Container className="mb3">
+                <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
+                    0x Instant Configurator
+                </Text>
+            </Container>
+            <Container height="400px" width="300px" backgroundColor="white" />
+        </Container>
+        <Container className="mx3">
+            <Container className="mb3 flex justify-between">
+                <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
+                    Code Snippet
+                </Text>
+                <ActionLink displayText="Explore the Docs" linkSrc="/docs/instant" color={colors.grey} />
+            </Container>
+            <CodeDemo />
+        </Container>
     </Container>
 );