diff --git a/src/App.tsx b/src/App.tsx
index 54cf22f..bb8411f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -26,18 +26,20 @@ const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     mainContainer: {
       "& > div:not(:last-child)": {
-        paddingBottom: theme.spacing(6)
+        paddingBottom: theme.spacing(3)
       },
       "& > div": {
         "& > div": {
           paddingTop: "0 !important"
         }
-      }
+      },
+      paddingBottom: theme.spacing(9)
     },
     paper: {
       width: "100%",
       height: "100%",
-      minHeight: 310
+      minHeight: 310,
+      backgroundColor: "#293640"
     },
     box: {
       padding: theme.spacing(3, 3),
@@ -48,7 +50,7 @@ const useStyles = makeStyles((theme: Theme) =>
       height: theme.spacing(headerOffset),
       display: "flex",
       alignItems: "center",
-      borderBottom: "1px solid #e0e0e0"
+      borderBottom: "1px solid #313d47"
     },
     boxChart: {
       width: "100%",
@@ -61,8 +63,8 @@ const useStyles = makeStyles((theme: Theme) =>
       paddingLeft: "5px"
     },
     header: {
-      backgroundColor: "#070a0e",
-      color: "#f5f7f8",
+      backgroundColor: "#0b1216",
+      color: "#f8f8f8",
       padding: theme.spacing(9, 0, 6 + headerOffset),
       marginBottom: -theme.spacing(headerOffset)
     },
@@ -89,7 +91,7 @@ export default function App() {
    * to re-render too often
    */
   const setCurveParamsThrottle = useMemo(
-    () => throttle(setCurveParams, 500),
+    () => throttle(setCurveParams, 1000),
     []
   );
 
@@ -240,57 +242,31 @@ export default function App() {
 
       <Container fixed className={classes.mainContainer}>
         <Grid container spacing={3}>
-          <Grid item xs={12} md={6}>
+          <Grid item xs={12} sm={12} md={6} lg={4}>
             <Paper className={classes.paper}>
               <Box className={classes.boxHeader}>
-                <Grid
-                  container
-                  direction="row"
-                  justify="space-between"
-                  alignItems="center"
-                >
-                  <Typography variant="h6">
-                    {simulationActive ? "Results" : "Curve Design"}
-                  </Typography>
-                  <Fade in={simulationActive}>
-                    <Button variant="contained" onClick={clearSimulation}>
-                      Back to design
-                    </Button>
-                  </Fade>
-                </Grid>
+                <Typography variant="h6">Curve Design</Typography>
               </Box>
 
               <Box className={classes.box}>
-                {simulationActive ? (
-                  <ResultParams resultFields={resultFields} />
-                ) : (
-                  <InputParams setCurveParams={setCurveParamsThrottle} />
-                )}
+                <InputParams setCurveParams={setCurveParamsThrottle} />
               </Box>
             </Paper>
           </Grid>
 
-          <Grid item xs={12} md={6}>
+          <Grid item xs={12} sm={12} md={6} lg={8}>
             <Paper className={classes.paper}>
               <Box className={classes.boxHeader}>
                 <Typography variant="h6">Preview</Typography>
               </Box>
 
               <Box className={classes.boxChart}>
-                {simulationActive ? (
-                  <PriceSimulationChart
-                    priceTimeseries={priceTimeseries}
-                    withdrawFeeTimeseries={withdrawFeeTimeseries}
-                    p0={p0}
-                  />
-                ) : (
-                  <SupplyVsDemandChart
-                    returnF={returnF}
-                    theta={theta}
-                    d0={d0}
-                    p0={p0}
-                  />
-                )}
+                <SupplyVsDemandChart
+                  returnF={returnF}
+                  theta={theta}
+                  d0={d0}
+                  p0={p0}
+                />
               </Box>
             </Paper>
           </Grid>
@@ -319,6 +295,38 @@ export default function App() {
             </Paper>
           </Grid>
         </Grid>
+
+        {simulationActive && (
+          <Grid container spacing={3}>
+            <Grid item xs={12} sm={12} md={6} lg={8}>
+              <Paper className={classes.paper}>
+                <Box className={classes.boxHeader}>
+                  <Typography variant="h6">Price walk</Typography>
+                </Box>
+
+                <Box className={classes.boxChart}>
+                  <PriceSimulationChart
+                    priceTimeseries={priceTimeseries}
+                    withdrawFeeTimeseries={withdrawFeeTimeseries}
+                    p0={p0}
+                  />
+                </Box>
+              </Paper>
+            </Grid>
+
+            <Grid item xs={12} sm={12} md={6} lg={4}>
+              <Paper className={classes.paper}>
+                <Box className={classes.boxHeader}>
+                  <Typography variant="h6">Results</Typography>
+                </Box>
+
+                <Box className={classes.box}>
+                  <ResultParams resultFields={resultFields} />
+                </Box>
+              </Paper>
+            </Grid>
+          </Grid>
+        )}
       </Container>
     </>
   );
diff --git a/src/Header.tsx b/src/Header.tsx
index ca386d6..6182c01 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -3,8 +3,6 @@ import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import Link from "@material-ui/core/Link";
 import Typography from "@material-ui/core/Typography";
 
-const strongColor = "#4ab47c";
-
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
@@ -15,7 +13,7 @@ const useStyles = makeStyles((theme: Theme) =>
       marginRight: theme.spacing(1)
     },
     link: {
-      color: strongColor
+      color: theme.palette.primary.main
     }
   })
 );
diff --git a/src/InputParams.tsx b/src/InputParams.tsx
index f39b667..35d3158 100644
--- a/src/InputParams.tsx
+++ b/src/InputParams.tsx
@@ -14,14 +14,8 @@ import InputAdornment from "@material-ui/core/InputAdornment";
 import NumberFormat from "react-number-format";
 import { throttle } from "lodash";
 
-const grayColor = "#90a4ae";
-const blackColor = "#141e27";
-// const commonsGradient = "#67de69 #1c709c";
-const strongColor = "#4ab47c";
-
 const PrettoSlider = withStyles({
   root: {
-    color: strongColor,
     height: 8
   },
   thumb: {
@@ -48,7 +42,6 @@ const PrettoSlider = withStyles({
     borderRadius: 4
   },
   markLabel: {
-    color: grayColor,
     top: 30
   }
 })(Slider);
@@ -63,20 +56,19 @@ const useStyles = makeStyles((theme: Theme) =>
       marginRight: theme.spacing(1)
     },
     leftContainer: {
-      color: grayColor
+      color: theme.palette.text.secondary
     },
     centerContainer: {
-      color: blackColor
+      // color: blackColor
     },
     listBoxContainer: {
       "& > div:not(:last-child)": {
         paddingBottom: "12px",
         marginBottom: "12px",
-        borderBottom: "1px solid #e0e0e0"
+        borderBottom: "1px solid #313d47"
       }
     },
     listBox: {
-      height: "48px",
       "& > div": {
         display: "flex",
         alignItems: "center",
@@ -87,6 +79,9 @@ const useStyles = makeStyles((theme: Theme) =>
       "& > div:not(:last-child)": {
         paddingRight: "12px"
       }
+    },
+    slider: {
+      color: theme.palette.primary.main
     }
   })
 );
@@ -160,7 +155,7 @@ export default function InputParams({
       toNum: (n: string) => Math.floor(parseFloat(n) * 1e6)
     },
     {
-      label: "Allocation to the project",
+      label: "Allocation to project",
       value: theta,
       setter: setTheta,
       min: 0,
@@ -181,6 +176,8 @@ export default function InputParams({
       step: 0.01,
       unit: "$",
       prefix: "$",
+      toText: (n: number) => String(+n.toFixed(2)),
+      toNum: (n: string) => parseFloat(n),
       format: (n: number) => `$${n}`
     },
     {
@@ -192,6 +189,8 @@ export default function InputParams({
       step: 0.1,
       unit: "x",
       suffix: "x",
+      toText: (n: number) => String(+n.toFixed(1)),
+      toNum: (n: string) => parseFloat(n),
       format: (n: number) => `${n}x`
     },
     {
@@ -265,6 +264,7 @@ export default function InputParams({
 
               <Grid item xs={4}>
                 <PrettoSlider
+                  className={classes.slider}
                   valueLabelDisplay="auto"
                   aria-label={label}
                   defaultValue={value}
diff --git a/src/PriceSimulationChart.tsx b/src/PriceSimulationChart.tsx
index 42a8f63..a14848c 100644
--- a/src/PriceSimulationChart.tsx
+++ b/src/PriceSimulationChart.tsx
@@ -9,10 +9,7 @@ import {
   ResponsiveContainer,
   Tooltip
 } from "recharts";
-
-const grayColor = "#90a4ae";
-const strongColor = "#4ab47c";
-const strongOpositeColor = "#b44a9b";
+import { useTheme } from "@material-ui/styles";
 
 function PriceSimulationChart({
   priceTimeseries,
@@ -42,8 +39,12 @@ function PriceSimulationChart({
     });
   }
 
+  // Chart components
+
+  const theme: any = useTheme();
+
   function renderColorfulLegendText(value: string) {
-    return <span style={{ color: grayColor }}>{value}</span>;
+    return <span style={{ color: theme.palette.text.secondary }}>{value}</span>;
   }
 
   const formatter = (n: number) => (+n.toPrecision(3)).toLocaleString();
@@ -64,15 +65,15 @@ function PriceSimulationChart({
         <CartesianGrid strokeDasharray="3 3" />
         <XAxis
           dataKey={keyHorizontal}
-          tick={{ fill: grayColor }}
-          stroke={grayColor}
+          tick={{ fill: theme.palette.text.secondary }}
+          stroke={theme.palette.text.secondary}
         />
         <YAxis
           yAxisId="left"
           domain={[Math.min(...priceTimeseries), Math.max(...priceTimeseries)]}
           tickFormatter={formatter}
-          tick={{ fill: grayColor }}
-          stroke={grayColor}
+          tick={{ fill: theme.palette.text.secondary }}
+          stroke={theme.palette.text.secondary}
         />
 
         {/* Capital collected from withdraw fees - AXIS */}
@@ -83,8 +84,8 @@ function PriceSimulationChart({
           //   Math.ceil(Math.max(...withdrawFeeTimeseries))
           // ]}
           orientation="right"
-          tick={{ fill: grayColor }}
-          stroke={grayColor}
+          tick={{ fill: theme.palette.text.secondary }}
+          stroke={theme.palette.text.secondary}
         />
 
         <Tooltip formatter={value => Number(value)} />
@@ -93,8 +94,8 @@ function PriceSimulationChart({
           yAxisId="left"
           type="monotone"
           dataKey={keyVerticalLeft}
-          stroke={strongColor}
-          fill={strongColor}
+          stroke={theme.palette.primary.main}
+          fill={theme.palette.primary.main}
         />
 
         {/* Capital collected from withdraw fees - AREA */}
@@ -103,8 +104,8 @@ function PriceSimulationChart({
           yAxisId="right"
           type="monotone"
           dataKey={keyVerticalRight}
-          stroke={strongOpositeColor}
-          fill={strongOpositeColor}
+          stroke={theme.palette.secondary.main}
+          fill={theme.palette.secondary.main}
         />
 
         {/* <ReferenceLine
diff --git a/src/ResultParams.tsx b/src/ResultParams.tsx
index 5819c30..26ff4b6 100644
--- a/src/ResultParams.tsx
+++ b/src/ResultParams.tsx
@@ -3,9 +3,6 @@ import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import Grid from "@material-ui/core/Grid";
 
-const grayColor = "#90a4ae";
-const blackColor = "#141e27";
-
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
@@ -16,19 +13,18 @@ const useStyles = makeStyles((theme: Theme) =>
       marginRight: theme.spacing(1)
     },
     leftContainer: {
-      color: grayColor
+      color: theme.palette.text.secondary
     },
     centerContainer: {
-      color: blackColor
+      // color: blackColor
     },
     listBoxContainer: {
       "& > div:not(:last-child)": {
         marginBottom: "12px",
-        borderBottom: "1px solid #e0e0e0"
+        borderBottom: "1px solid #313d47"
       }
     },
     listBox: {
-      height: "48px",
       paddingBottom: "12px",
       "& > div": {
         display: "flex",
diff --git a/src/SupplyVsDemandChart.tsx b/src/SupplyVsDemandChart.tsx
index e31286f..44b53f1 100644
--- a/src/SupplyVsDemandChart.tsx
+++ b/src/SupplyVsDemandChart.tsx
@@ -11,11 +11,7 @@ import {
   Tooltip
 } from "recharts";
 import { linspace } from "./utils";
-
-const grayColor = "#90a4ae";
-// const blackColor = "#141e27";
-const strongColor = "#4ab47c";
-const softColor = "#bbe3cd";
+import { useTheme } from "@material-ui/styles";
 
 function SupplyVsDemandChart({
   returnF,
@@ -75,11 +71,29 @@ function SupplyVsDemandChart({
     });
   }
 
+  // Chart components
+
+  const theme: any = useTheme();
+
   const formatter = (n: number) =>
     (+(n / scaling).toPrecision(2)).toLocaleString();
 
   function renderColorfulLegendText(value: string) {
-    return <span style={{ color: grayColor }}>{value}</span>;
+    return <span style={{ color: theme.palette.text.secondary }}>{value}</span>;
+  }
+
+  function ReferenceLabel(props: any) {
+    const { textAnchor, viewBox } = props;
+    return (
+      <text
+        x={viewBox.x + 10}
+        y={30}
+        fill={theme.palette.text.secondary}
+        textAnchor={textAnchor}
+      >
+        Initial value
+      </text>
+    );
   }
 
   return (
@@ -102,25 +116,25 @@ function SupplyVsDemandChart({
           dataKey={keyHorizontal}
           tickFormatter={formatter}
           unit={unit}
-          tick={{ fill: grayColor }}
-          stroke={grayColor}
+          tick={{ fill: theme.palette.text.secondary }}
+          stroke={theme.palette.text.secondary}
         />
         <YAxis
           interval={"preserveStartEnd"}
           ticks={linspace({ to: f(to), steps: 3 })}
           tickFormatter={formatter}
           unit={unit}
-          tick={{ fill: grayColor }}
+          tick={{ fill: theme.palette.text.secondary }}
           domain={[0, f(to)]}
-          stroke={grayColor}
+          stroke={theme.palette.text.secondary}
         />
         <Tooltip formatter={value => formatter(Number(value))} />
         <Area
           isAnimationActive={false}
           type="monotone"
           dataKey={keyVertical}
-          stroke={strongColor}
-          fill={softColor}
+          stroke={theme.palette.primary.main}
+          fill={theme.palette.primary.main}
         />
         <ReferenceLine
           x={R0}
@@ -134,13 +148,4 @@ function SupplyVsDemandChart({
   );
 }
 
-function ReferenceLabel(props: any) {
-  const { textAnchor, viewBox } = props;
-  return (
-    <text x={viewBox.x + 10} y={30} fill={grayColor} textAnchor={textAnchor}>
-      Initial value
-    </text>
-  );
-}
-
 export default SupplyVsDemandChart;
diff --git a/src/app.css b/src/app.css
index 003fe5f..65ee8bc 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,4 +1,4 @@
 #root {
-  background-color: #f5f7f8;
+  background-color: #202930;
   min-height: 100vh;
 }
diff --git a/src/theme.tsx b/src/theme.tsx
index f9c08b4..f38aa4a 100644
--- a/src/theme.tsx
+++ b/src/theme.tsx
@@ -1,22 +1,35 @@
-import red from '@material-ui/core/colors/red';
-import { createMuiTheme } from '@material-ui/core/styles';
+import red from "@material-ui/core/colors/red";
+import { createMuiTheme } from "@material-ui/core/styles";
 
 // A custom theme for this app
 const theme = createMuiTheme({
   palette: {
+    type: "dark",
     primary: {
-      main: '#556cd6',
+      main: "#2ecd79"
     },
     secondary: {
-      main: '#19857b',
+      main: "#b44a9b"
     },
     error: {
-      main: red.A400,
+      main: red.A400
     },
     background: {
-      default: '#fff',
+      default: "#fff",
+      paper: "#293640"
     },
+    text: {
+      primary: "#fff",
+      secondary: "#9aa3ad"
+    }
   },
+  typography: {
+    h6: {
+      fontWeight: 400
+    }
+  }
 });
 
+console.log(theme);
+
 export default theme;