diff --git a/src/common/components/data-display/text/SectionTitle.tsx b/src/common/components/data-display/text/SectionTitle.tsx
index 78a8ac6..8d2be32 100644
--- a/src/common/components/data-display/text/SectionTitle.tsx
+++ b/src/common/components/data-display/text/SectionTitle.tsx
@@ -1,10 +1,4 @@
-import {
-  createStyles,
-  Grid,
-  makeStyles,
-  Tooltip,
-  Typography,
-} from "@material-ui/core";
+import { createStyles, Grid, makeStyles, Tooltip } from "@material-ui/core";
 import InfoIcon from "@material-ui/icons/InfoOutlined";
 import React, { ReactElement } from "react";
 
@@ -19,6 +13,10 @@ const useStyles = makeStyles(() => {
       display: "flex",
       alignItems: "center",
     },
+    sectionTitle: {
+      color: "#f2f2f2",
+      fontSize: "18px",
+    },
   });
 });
 
@@ -26,18 +24,9 @@ const SectionTitle = (props: SectionTitleProps): ReactElement => {
   const classes = useStyles();
 
   return (
-    <Grid
-      item
-      container
-      justify="center"
-      alignItems="center"
-      wrap="nowrap"
-      spacing={1}
-    >
+    <Grid item>
       <Grid item>
-        <Typography component="h2" variant="overline" align="center">
-          {props.title}
-        </Typography>
+        <h1 className={classes.sectionTitle}>{props.title}</h1>
       </Grid>
 
       {!!props.info && (
diff --git a/src/common/components/input/buttons/ButtonWithLoading.tsx b/src/common/components/input/buttons/ButtonWithLoading.tsx
index f314dc5..aa9aeb2 100644
--- a/src/common/components/input/buttons/ButtonWithLoading.tsx
+++ b/src/common/components/input/buttons/ButtonWithLoading.tsx
@@ -1,9 +1,9 @@
 import {
   CircularProgress,
-  createStyles,
   FormControl,
   FormHelperText,
   makeStyles,
+  Theme,
 } from "@material-ui/core";
 import React, { ReactElement } from "react";
 import Button from "./Button";
@@ -21,23 +21,36 @@ type ButtonWithLoadingProps = {
   helperText?: string;
 };
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    buttonWrapper: {
-      position: "relative",
-    },
-    buttonProgress: {
-      position: "absolute",
-      top: "50%",
-      left: "50%",
-      marginTop: -12,
-      marginLeft: -12,
+const useStyles = makeStyles((theme: Theme) => ({
+  button: (props: ButtonWithLoadingProps) => ({
+    borderRadius: "initial",
+    padding: "12px",
+    fontSize: "16px",
+    color: "#0c0c0c",
+
+    "&.Mui-disabled": {
+      color: "#0c0c0c",
+      backgroundColor:
+        props.color === "primary"
+          ? theme.palette.primary.main
+          : theme.palette.secondary.main,
+      opacity: 0.5,
     },
-  })
-);
+  }),
+  buttonWrapper: {
+    position: "relative",
+  },
+  buttonProgress: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    marginTop: -12,
+    marginLeft: -12,
+  },
+}));
 
 const ButtonWithLoading = (props: ButtonWithLoadingProps): ReactElement => {
-  const classes = useStyles();
+  const classes = useStyles(props);
   const {
     onClick,
     text,
@@ -55,6 +68,7 @@ const ButtonWithLoading = (props: ButtonWithLoadingProps): ReactElement => {
     <FormControl fullWidth={fullWidth}>
       <div className={classes.buttonWrapper}>
         <Button
+          className={classes.button}
           text={text}
           type={submitButton ? "submit" : "button"}
           color={color || "primary"}
diff --git a/src/common/components/input/text/TextField.tsx b/src/common/components/input/text/TextField.tsx
index 31dbc79..960530c 100644
--- a/src/common/components/input/text/TextField.tsx
+++ b/src/common/components/input/text/TextField.tsx
@@ -15,7 +15,6 @@ const TextField = (props: TextFieldProps): ReactElement => {
 
   return (
     <MaterialTextField
-      variant="outlined"
       InputProps={{
         endAdornment: endAdornment,
         startAdornment: startAdornment,
diff --git a/src/dashboard/trade/placeOrder/AmountDetails.tsx b/src/dashboard/trade/placeOrder/AmountDetails.tsx
index f501de0..89bf8c4 100644
--- a/src/dashboard/trade/placeOrder/AmountDetails.tsx
+++ b/src/dashboard/trade/placeOrder/AmountDetails.tsx
@@ -1,10 +1,10 @@
 import {
   createStyles,
+  withStyles,
   Grid,
   makeStyles,
   Slider,
   Tooltip,
-  Typography,
 } from "@material-ui/core";
 import InfoIcon from "@material-ui/icons/InfoOutlined";
 import { inject, observer } from "mobx-react";
@@ -21,12 +21,72 @@ type AmountDetailsProps = {
 const useStyles = makeStyles(() => {
   return createStyles({
     iconContainer: {
+      color: "#979797",
       display: "flex",
       alignItems: "center",
+      fontSize: "16px",
+    },
+    text: {
+      color: "#979797",
+      fontSize: "16px",
+      padding: "2px 0",
+    },
+    textHighlighted: {
+      color: "#f2f2f2",
+    },
+    toolTip: {
+      color: "#f2f2f2",
+      backgroundColor: "#0c0c0c",
+      fontSize: "13px",
     },
   });
 });
 
+const CustomSlider = withStyles({
+  root: {
+    padding: "8px 0",
+  },
+  thumb: {
+    height: "19px",
+    width: "19px",
+    border: "2px solid #f2f2f2",
+  },
+  track: {
+    height: 4,
+    zIndex: 9999,
+  },
+  rail: {
+    height: 2,
+    color: "#636363",
+    opacity: "1",
+  },
+  mark: {
+    height: "10px",
+    width: "1px",
+    color: "#636363",
+    "&[data-index='0']": {
+      display: "none",
+    },
+    "&[data-index='4']": {
+      display: "none",
+    },
+  },
+  markLabel: {
+    color: "#636363",
+    fontSize: "12px",
+    paddingTop: "4px",
+    "&[data-index='0']": {
+      paddingLeft: "8px",
+    },
+    "&[data-index='4']": {
+      paddingRight: "30px",
+    },
+  },
+  markLabelActive: {
+    color: "#f2f2f2",
+  },
+})(Slider);
+
 const AmountDetails = inject(TRADE_STORE)(
   observer(
     (props: AmountDetailsProps): ReactElement => {
@@ -46,15 +106,24 @@ const AmountDetails = inject(TRADE_STORE)(
       return (
         <Grid item container wrap="nowrap" spacing={2} className={className}>
           <Grid item container direction="column" xs={4}>
-            <Typography>Tradable {tradeStore!.baseAsset}</Typography>
+            <span className={classes.text}>
+              Tradable {tradeStore!.baseAsset}
+            </span>
             <Grid item container wrap="nowrap" spacing={1}>
               <Grid item>
-                <Typography>
-                  Max: {Number(tradeStore!.currentMaxAmount.toFixed(8))}
-                </Typography>
+                <span className={classes.text}>
+                  Max:{" "}
+                  <span className={classes.textHighlighted}>
+                    {Number(tradeStore!.currentMaxAmount.toFixed(8))}{" "}
+                    {tradeStore!.baseAsset}
+                  </span>
+                </span>
               </Grid>
               <Grid item className={classes.iconContainer}>
                 <Tooltip
+                  classes={{
+                    tooltip: classes.toolTip,
+                  }}
                   title={
                     <>
                       <div>
@@ -79,11 +148,14 @@ const AmountDetails = inject(TRADE_STORE)(
             </Grid>
           </Grid>
           <Grid item xs={8}>
-            <Slider
+            <CustomSlider
               value={tradeStore!.sliderValue}
               getAriaValueText={(value) => `${value}%`}
               marks={amountMarks.map((mark) => {
-                return { value: mark, label: `${mark}%` };
+                return {
+                  value: mark,
+                  label: mark !== 25 && mark !== 75 ? `${mark}%` : "",
+                };
               })}
               valueLabelDisplay="auto"
               valueLabelFormat={(value) => `${value}%`}
diff --git a/src/dashboard/trade/placeOrder/AmountInput.tsx b/src/dashboard/trade/placeOrder/AmountInput.tsx
index b8667d6..5f3a985 100644
--- a/src/dashboard/trade/placeOrder/AmountInput.tsx
+++ b/src/dashboard/trade/placeOrder/AmountInput.tsx
@@ -7,13 +7,19 @@ import { TradeStore, TRADE_STORE } from "../../../stores/tradeStore";
 type AmountInputProps = {
   onAmountChange: () => void;
   className?: string;
+  InputAdornmentClass?: string;
   tradeStore?: TradeStore;
 };
 
 const AmountInput = inject(TRADE_STORE)(
   observer(
     (props: AmountInputProps): ReactElement => {
-      const { tradeStore, onAmountChange, className } = props;
+      const {
+        tradeStore,
+        onAmountChange,
+        className,
+        InputAdornmentClass,
+      } = props;
       const showError = !tradeStore!.isAmountValid;
 
       const errorMessage = (): string => {
@@ -22,6 +28,7 @@ const AmountInput = inject(TRADE_STORE)(
 
       return (
         <NumberField
+          className={className}
           fullWidth
           id="amount"
           label="Amount"
@@ -32,13 +39,14 @@ const AmountInput = inject(TRADE_STORE)(
           }}
           error={showError}
           helperText={showError && errorMessage()}
-          endAdornment={
-            <InputAdornment position="end">
-              {tradeStore!.baseAsset}
-            </InputAdornment>
-          }
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <p className={InputAdornmentClass}>{tradeStore!.baseAsset}</p>
+              </InputAdornment>
+            ),
+          }}
           decimalScale={8}
-          className={className}
         />
       );
     }
diff --git a/src/dashboard/trade/placeOrder/OrderSideButtons.tsx b/src/dashboard/trade/placeOrder/OrderSideButtons.tsx
index 6164263..001aacf 100644
--- a/src/dashboard/trade/placeOrder/OrderSideButtons.tsx
+++ b/src/dashboard/trade/placeOrder/OrderSideButtons.tsx
@@ -1,4 +1,4 @@
-import { ButtonGroup } from "@material-ui/core";
+import { ButtonGroup, makeStyles } from "@material-ui/core";
 import { inject, observer } from "mobx-react";
 import React, { ReactElement } from "react";
 import Button from "../../../common/components/input/buttons/Button";
@@ -10,9 +10,43 @@ type OrderSideButtonsProps = {
   tradeStore?: TradeStore;
 };
 
+const useStyles = makeStyles((theme) => ({
+  buyButton: (props: OrderSideButtonsProps) => ({
+    fontSize: "16px",
+    color: props.tradeStore!.isBuyActive
+      ? theme.palette.primary.main
+      : "#636363",
+    border: "none",
+    borderBottom: props.tradeStore!.isBuyActive
+      ? `2px solid ${theme.palette.primary.main}`
+      : "2px solid #232322",
+
+    borderRadius: "initial",
+    "&:hover": {
+      backgroundColor: "transparent",
+    },
+  }),
+  sellButton: (props: OrderSideButtonsProps) => ({
+    fontSize: "16px",
+    color: props.tradeStore!.isBuyActive
+      ? "#636363"
+      : theme.palette.secondary.main,
+    border: "none",
+    borderBottom: props.tradeStore!.isBuyActive
+      ? "2px solid #232322"
+      : `2px solid ${theme.palette.secondary.main}`,
+
+    borderRadius: "initial",
+    "&:hover": {
+      backgroundColor: "transparent",
+    },
+  }),
+}));
+
 const OrderSideButtons = inject(TRADE_STORE)(
   observer(
     (props: OrderSideButtonsProps): ReactElement => {
+      const classes = useStyles(props);
       const { tradeStore, onClick, className } = props;
 
       return (
@@ -23,8 +57,7 @@ const OrderSideButtons = inject(TRADE_STORE)(
               tradeStore!.setIsBuyActive(true);
               onClick();
             }}
-            color="primary"
-            variant={tradeStore!.isBuyActive ? "contained" : "outlined"}
+            className={classes.buyButton}
           />
           <Button
             text="Sell"
@@ -32,8 +65,7 @@ const OrderSideButtons = inject(TRADE_STORE)(
               tradeStore!.setIsBuyActive(false);
               onClick();
             }}
-            color="secondary"
-            variant={tradeStore!.isBuyActive ? "outlined" : "contained"}
+            className={classes.sellButton}
           />
         </ButtonGroup>
       );
diff --git a/src/dashboard/trade/placeOrder/OrderTypeButtons.tsx b/src/dashboard/trade/placeOrder/OrderTypeButtons.tsx
new file mode 100644
index 0000000..83ed35f
--- /dev/null
+++ b/src/dashboard/trade/placeOrder/OrderTypeButtons.tsx
@@ -0,0 +1,98 @@
+import React, { ReactElement } from "react";
+import { inject, observer } from "mobx-react";
+import { ButtonGroup, makeStyles } from "@material-ui/core";
+import { OrderType } from "../../../enums";
+import { TradeStore, TRADE_STORE } from "../../../stores/tradeStore";
+import Button from "../../../common/components/input/buttons/Button";
+
+const useStyles = makeStyles(() => ({
+  button: {
+    textTransform: "none",
+    borderRadius: "initial",
+    fontSize: "14px",
+    padding: "2px 14px",
+  },
+  marketActive: {
+    backgroundColor: "#29cc78",
+    color: "#0c0c0c",
+    borderColor: "#29cc78",
+    "&:hover": {
+      backgroundColor: "#29cc78",
+    },
+  },
+  marketInActive: {
+    backgroundColor: "#181818",
+    color: "#e63939",
+    borderColor: "#e63939",
+    "&:hover": {
+      backgroundColor: "#181818",
+    },
+  },
+  limitActive: {
+    backgroundColor: "#e63939",
+    color: "#181818",
+    borderColor: "#e63939",
+    "&:hover": {
+      backgroundColor: "#e63939",
+    },
+  },
+  limitInActive: {
+    backGroundColor: "#181818",
+    color: "#29cc78",
+    borderColor: "#29cc78",
+    "&:hover": {
+      backgroundColor: "#181818",
+    },
+  },
+  buttonGroup: {
+    display: "initial",
+  },
+}));
+
+type OrderTypeButtonsProps = {
+  onOrderTypeChange: () => void;
+  className?: string;
+  tradeStore?: TradeStore;
+};
+
+const OrderTypeButtons = inject(TRADE_STORE)(
+  observer(
+    (props: OrderTypeButtonsProps): ReactElement => {
+      const { onOrderTypeChange, tradeStore } = props;
+      const classes = useStyles();
+
+      return (
+        <ButtonGroup disableElevation className={classes.buttonGroup}>
+          <Button
+            className={
+              tradeStore!.orderType === "Market"
+                ? `${classes.marketActive} ${classes.button}`
+                : `${classes.marketInActive} ${classes.button}`
+            }
+            text="Market"
+            value="Market"
+            onClick={(event) => {
+              tradeStore!.setOrderType(event.currentTarget.value as OrderType);
+              onOrderTypeChange();
+            }}
+          />
+          <Button
+            className={
+              tradeStore!.orderType === "Limit"
+                ? `${classes.limitActive} ${classes.button}`
+                : `${classes.limitInActive} ${classes.button}`
+            }
+            text="Limit"
+            value="Limit"
+            onClick={(event) => {
+              tradeStore!.setOrderType(event.currentTarget.value as OrderType);
+              onOrderTypeChange();
+            }}
+          />
+        </ButtonGroup>
+      );
+    }
+  )
+);
+
+export default OrderTypeButtons;
diff --git a/src/dashboard/trade/placeOrder/PlaceOrder.tsx b/src/dashboard/trade/placeOrder/PlaceOrder.tsx
index 48356ba..4c83aae 100644
--- a/src/dashboard/trade/placeOrder/PlaceOrder.tsx
+++ b/src/dashboard/trade/placeOrder/PlaceOrder.tsx
@@ -1,51 +1,16 @@
-import {
-  createStyles,
-  Grid,
-  makeStyles,
-  Theme,
-  ThemeProvider,
-} from "@material-ui/core";
 import { inject, observer } from "mobx-react";
 import React, { ReactElement, useEffect, useState } from "react";
 import { combineLatest, Subscription, timer } from "rxjs";
 import { exhaustMap, retry } from "rxjs/operators";
 import api from "../../../api";
-import ErrorMessage from "../../../common/components/data-display/ErrorMessage";
 import { getErrorMsg } from "../../../common/utils/errorUtil";
-import Loader from "../../../common/components/data-display/loader/Loader";
 import { TradeStore, TRADE_STORE } from "../../../stores/tradeStore";
-import { darkTheme, tradeTheme } from "../../../themes";
-import SectionTitle from "../../../common/components/data-display/text/SectionTitle";
-import { isMarketOrder } from "../tradeUtil";
-import AmountDetails from "./AmountDetails";
-import AmountInput from "./AmountInput";
-import OrderSideButtons from "./OrderSideButtons";
-import PlaceOrderButton from "./PlaceOrderButton";
-import PriceInput from "./PriceInput";
-import TotalInput from "./TotalInput";
+import PlaceOrderContent from "./PlaceOrderContent";
 
 type PlaceOrderProps = {
   tradeStore?: TradeStore;
 };
 
-const useStyles = makeStyles((theme: Theme) => {
-  return createStyles({
-    wrapper: {
-      padding: theme.spacing(2),
-      position: "relative",
-    },
-    content: {
-      flex: 1,
-    },
-    row: {
-      marginTop: theme.spacing(2),
-    },
-    resultMessageContainer: {
-      margin: `${theme.spacing(2)}px 0`,
-    },
-  });
-});
-
 const resetFormData = (tradeStore: TradeStore) => {
   tradeStore.setAmount("");
   tradeStore.setSliderValue(0);
@@ -57,13 +22,11 @@ const PlaceOrder = inject(TRADE_STORE)(
     (props: PlaceOrderProps): ReactElement => {
       const { tradeStore } = props;
       const activePair = tradeStore!.activePair!;
-      const classes = useStyles();
       const [loadingErrors, setLoadingErrors] = useState<Set<string>>(
         new Set()
       );
       const [orderError, setOrderError] = useState("");
       const [initialLoadCompleted, setInitialLoadCompleted] = useState(false);
-      const id = "placeOrder";
 
       const resetMetaData = () => {
         setLoadingErrors(new Set());
@@ -142,93 +105,16 @@ const PlaceOrder = inject(TRADE_STORE)(
         return () => sub.unsubscribe();
       }, [tradeStore, activePair]);
 
-      const color = tradeStore!.isBuyActive ? "primary" : "secondary";
-
       return (
-        <div className={classes.wrapper} id={id}>
-          <ThemeProvider theme={tradeTheme}>
-            <SectionTitle title="Place Order" />
-            {!initialLoadCompleted || loadingErrors.size ? (
-              <>
-                {!initialLoadCompleted ? (
-                  <Loader />
-                ) : (
-                  <ErrorMessage
-                    details={[...loadingErrors].map((err) => {
-                      return {
-                        detail: err,
-                        key: err.substr(0, 10) + err.substr(err.length - 4),
-                      };
-                    })}
-                  />
-                )}
-                <Grid item container />
-              </>
-            ) : (
-              !!tradeStore!.baseAssetLimits &&
-              !!tradeStore!.quoteAssetLimits && (
-                <Grid
-                  item
-                  container
-                  direction="column"
-                  className={classes.content}
-                >
-                  <OrderSideButtons
-                    onClick={() => resetMetaData()}
-                    className={classes.row}
-                  />
-                  <ThemeProvider theme={darkTheme}>
-                    <PriceInput
-                      onOrderTypeChange={() => resetMetaData()}
-                      onPriceChange={() => resetMetaData()}
-                      className={classes.row}
-                    />
-                    <AmountInput
-                      onAmountChange={() => resetMetaData()}
-                      className={classes.row}
-                    />
-                  </ThemeProvider>
-                  <AmountDetails
-                    onSliderValueChange={() => resetMetaData()}
-                    color={color}
-                    className={classes.row}
-                  />
-                  {!isMarketOrder(tradeStore!.orderType) && (
-                    <ThemeProvider theme={darkTheme}>
-                      <TotalInput
-                        onTotalChange={() => resetMetaData()}
-                        className={classes.row}
-                      />
-                    </ThemeProvider>
-                  )}
-                  <Grid
-                    item
-                    container
-                    className={classes.resultMessageContainer}
-                  >
-                    {orderError && (
-                      <ErrorMessage
-                        mainMessage="Failed to place order"
-                        details={orderError}
-                      />
-                    )}
-                  </Grid>
-                  <PlaceOrderButton
-                    color={color}
-                    contentId={id}
-                    onClick={() => {
-                      setOrderError("");
-                    }}
-                    onSuccess={() => {
-                      resetFormData(tradeStore!);
-                    }}
-                    onError={(err) => setOrderError(getErrorMsg(err))}
-                  />
-                </Grid>
-              )
-            )}
-          </ThemeProvider>
-        </div>
+        <PlaceOrderContent
+          initialLoadCompleted={initialLoadCompleted}
+          loadingErrors={loadingErrors}
+          resetMetaData={resetMetaData}
+          resetFormData={resetFormData}
+          setOrderError={setOrderError}
+          orderError={orderError}
+          tradeStore={tradeStore}
+        />
       );
     }
   )
diff --git a/src/dashboard/trade/placeOrder/PlaceOrderContent.tsx b/src/dashboard/trade/placeOrder/PlaceOrderContent.tsx
new file mode 100644
index 0000000..a0ca684
--- /dev/null
+++ b/src/dashboard/trade/placeOrder/PlaceOrderContent.tsx
@@ -0,0 +1,178 @@
+import {
+  createStyles,
+  Grid,
+  makeStyles,
+  Theme,
+  ThemeProvider,
+} from "@material-ui/core";
+import React, { ReactElement, SetStateAction, Dispatch } from "react";
+import { inject, observer } from "mobx-react";
+import ErrorMessage from "../../../common/components/data-display/ErrorMessage";
+import { getErrorMsg } from "../../../common/utils/errorUtil";
+import Loader from "../../../common/components/data-display/loader/Loader";
+import { TradeStore, TRADE_STORE } from "../../../stores/tradeStore";
+import { tradeTheme } from "../../../themes";
+import { isMarketOrder } from "../tradeUtil";
+import AmountDetails from "./AmountDetails";
+import AmountInput from "./AmountInput";
+import OrderSideButtons from "./OrderSideButtons";
+import PlaceOrderButton from "./PlaceOrderButton";
+import PriceInput from "./PriceInput";
+import TotalInput from "./TotalInput";
+import OrderTypeButtons from "./OrderTypeButtons";
+import SectionTitle from "../../../common/components/data-display/text/SectionTitle";
+
+const useStyles = makeStyles((theme: Theme) => {
+  return createStyles({
+    wrapper: {
+      maxWidth: "550px",
+    },
+    wrapperWithoutPlaceOrderButton: {
+      padding: "10px 20px",
+      position: "relative",
+      backgroundColor: "#181818",
+    },
+    content: {
+      flex: 1,
+    },
+    row: {
+      marginTop: theme.spacing(2),
+    },
+    resultMessageContainer: {
+      margin: `${theme.spacing(2)}px 0`,
+    },
+    inputAdornment: {
+      color: "#636363",
+    },
+    titleAndOrderTypeContainer: {
+      display: "flex",
+      alignItems: "center",
+      width: "100%",
+      justifyContent: "space-between",
+    },
+  });
+});
+
+type PlaceOrderContentProps = {
+  initialLoadCompleted: boolean;
+  loadingErrors: any;
+  resetMetaData: () => void;
+  resetFormData: (tradeStore: TradeStore) => void;
+  tradeStore?: TradeStore;
+  setOrderError: Dispatch<SetStateAction<string>>;
+  orderError: string;
+};
+
+const PlaceOrderContent = inject(TRADE_STORE)(
+  observer(
+    (props: PlaceOrderContentProps): ReactElement => {
+      const classes = useStyles();
+      const id = "placeOrder";
+      const {
+        initialLoadCompleted,
+        loadingErrors,
+        resetMetaData,
+        resetFormData,
+        tradeStore,
+        setOrderError,
+        orderError,
+      } = props;
+
+      const color = tradeStore!.isBuyActive ? "primary" : "secondary";
+
+      return (
+        <ThemeProvider theme={tradeTheme}>
+          <div className={classes.wrapper} id={id}>
+            <div className={classes.wrapperWithoutPlaceOrderButton}>
+              {!initialLoadCompleted || loadingErrors.size ? (
+                <>
+                  {!initialLoadCompleted ? (
+                    <Loader />
+                  ) : (
+                    <ErrorMessage
+                      details={[...loadingErrors].map((err) => {
+                        return {
+                          detail: err,
+                          key: err.substr(0, 10) + err.substr(err.length - 4),
+                        };
+                      })}
+                    />
+                  )}
+                  <Grid item container />
+                </>
+              ) : (
+                !!tradeStore!.baseAssetLimits &&
+                !!tradeStore!.quoteAssetLimits && (
+                  <Grid item container className={classes.content}>
+                    <div className={classes.titleAndOrderTypeContainer}>
+                      <SectionTitle title="Place Order" />
+                      <OrderTypeButtons
+                        onOrderTypeChange={() => resetMetaData()}
+                        className={classes.row}
+                      />
+                    </div>
+
+                    <OrderSideButtons
+                      onClick={() => resetMetaData()}
+                      className={classes.row}
+                    />
+
+                    <PriceInput
+                      onPriceChange={() => resetMetaData()}
+                      className={classes.row}
+                      InputAdornmentClass={classes.inputAdornment}
+                    />
+
+                    <AmountInput
+                      onAmountChange={() => resetMetaData()}
+                      className={classes.row}
+                      InputAdornmentClass={classes.inputAdornment}
+                    />
+
+                    <AmountDetails
+                      onSliderValueChange={() => resetMetaData()}
+                      color={color}
+                      className={classes.row}
+                    />
+                    {!isMarketOrder(tradeStore!.orderType) && (
+                      <TotalInput
+                        onTotalChange={() => resetMetaData()}
+                        className={classes.row}
+                        InputAdornmentClass={classes.inputAdornment}
+                      />
+                    )}
+                    <Grid
+                      item
+                      container
+                      className={classes.resultMessageContainer}
+                    >
+                      {orderError && (
+                        <ErrorMessage
+                          mainMessage="Failed to place order"
+                          details={orderError}
+                        />
+                      )}
+                    </Grid>
+                  </Grid>
+                )
+              )}
+            </div>
+            <PlaceOrderButton
+              color={color}
+              contentId={id}
+              onClick={() => {
+                setOrderError("");
+              }}
+              onSuccess={() => {
+                resetFormData(tradeStore!);
+              }}
+              onError={(err) => setOrderError(getErrorMsg(err))}
+            />
+          </div>
+        </ThemeProvider>
+      );
+    }
+  )
+);
+
+export default PlaceOrderContent;
diff --git a/src/dashboard/trade/placeOrder/PriceInput.tsx b/src/dashboard/trade/placeOrder/PriceInput.tsx
index b88f58f..8d7abc4 100644
--- a/src/dashboard/trade/placeOrder/PriceInput.tsx
+++ b/src/dashboard/trade/placeOrder/PriceInput.tsx
@@ -1,74 +1,51 @@
-import { Grid, InputAdornment } from "@material-ui/core";
+import { InputAdornment } from "@material-ui/core";
 import { inject, observer } from "mobx-react";
 import React, { ReactElement } from "react";
-import Select from "../../../common/components/input/select/Select";
-import { OrderType } from "../../../enums";
 import { TradeStore, TRADE_STORE } from "../../../stores/tradeStore";
 import { isMarketOrder } from "../tradeUtil";
 import NumberField from "../../../common/components/input/text/NumberField";
 
 type PriceInputProps = {
-  onOrderTypeChange: () => void;
   onPriceChange: () => void;
   className?: string;
+  InputAdornmentClass?: string;
   tradeStore?: TradeStore;
 };
 
 const PriceInput = inject(TRADE_STORE)(
   observer(
     (props: PriceInputProps): ReactElement => {
-      const { onOrderTypeChange, onPriceChange, className, tradeStore } = props;
-
-      const orderTypeOpts: { value: OrderType; text: string }[] = [
-        { value: OrderType.LIMIT, text: "Limit" },
-        { value: OrderType.MARKET, text: "Market" },
-      ];
+      const {
+        onPriceChange,
+        className,
+        tradeStore,
+        InputAdornmentClass,
+      } = props;
 
       return (
-        <Grid
-          item
-          container
-          alignItems="center"
-          wrap="nowrap"
-          spacing={2}
+        <NumberField
           className={className}
-        >
-          <Grid item xs={6}>
-            <Select
-              id="type"
-              value={tradeStore!.orderType}
-              onChange={(event) => {
-                tradeStore!.setOrderType(event.target.value as OrderType);
-                onOrderTypeChange();
-              }}
-              options={orderTypeOpts}
-            />
-          </Grid>
-          <Grid item xs={6}>
-            <NumberField
-              fullWidth
-              id="price"
-              label="Price"
-              value={
-                isMarketOrder(tradeStore!.orderType)
-                  ? "Market"
-                  : tradeStore!.price
-              }
-              disabled={isMarketOrder(tradeStore!.orderType)}
-              onChange={(event) => {
-                tradeStore!.setPrice(event.target.value);
-                onPriceChange();
-              }}
-              useTextInput={isMarketOrder(tradeStore!.orderType)}
-              decimalScale={8}
-              endAdornment={
-                <InputAdornment position="end">
-                  {tradeStore!.quoteAsset}
-                </InputAdornment>
-              }
-            />
-          </Grid>
-        </Grid>
+          fullWidth
+          id="price"
+          label="Price"
+          value={
+            isMarketOrder(tradeStore!.orderType) ? "Market" : tradeStore!.price
+          }
+          disabled={isMarketOrder(tradeStore!.orderType)}
+          onChange={(event) => {
+            tradeStore!.setPrice(event.target.value);
+            onPriceChange();
+          }}
+          useTextInput={isMarketOrder(tradeStore!.orderType)}
+          decimalScale={8}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <p className={InputAdornmentClass}>{tradeStore!.quoteAsset}</p>
+              </InputAdornment>
+            ),
+          }}
+        />
       );
     }
   )
diff --git a/src/dashboard/trade/placeOrder/TotalInput.tsx b/src/dashboard/trade/placeOrder/TotalInput.tsx
index b532e6c..bfea841 100644
--- a/src/dashboard/trade/placeOrder/TotalInput.tsx
+++ b/src/dashboard/trade/placeOrder/TotalInput.tsx
@@ -8,12 +8,18 @@ type TotalInputProps = {
   onTotalChange: () => void;
   className?: string;
   tradeStore?: TradeStore;
+  InputAdornmentClass?: string;
 };
 
 const TotalInput = inject(TRADE_STORE)(
   observer(
     (props: TotalInputProps): ReactElement => {
-      const { tradeStore, className, onTotalChange } = props;
+      const {
+        tradeStore,
+        className,
+        onTotalChange,
+        InputAdornmentClass,
+      } = props;
 
       const showError = !tradeStore!.isTotalValid;
 
@@ -36,11 +42,13 @@ const TotalInput = inject(TRADE_STORE)(
           }}
           error={showError}
           helperText={showError && errorMessage()}
-          endAdornment={
-            <InputAdornment position="end">
-              {tradeStore!.quoteAsset}
-            </InputAdornment>
-          }
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <p className={InputAdornmentClass}>{tradeStore!.quoteAsset}</p>
+              </InputAdornment>
+            ),
+          }}
           decimalScale={8}
         />
       );
diff --git a/src/enums.ts b/src/enums.ts
index 2d19108..3f0cf07 100644
--- a/src/enums.ts
+++ b/src/enums.ts
@@ -9,8 +9,8 @@ export enum OrderRole {
 }
 
 export enum OrderType {
-  MARKET = "MARKET",
-  LIMIT = "LIMIT",
+  MARKET = "Market",
+  LIMIT = "Limit",
 }
 
 export enum OrderSide {
diff --git a/src/stories/PlaceOrderContent.stories.tsx b/src/stories/PlaceOrderContent.stories.tsx
new file mode 100644
index 0000000..6c18ec3
--- /dev/null
+++ b/src/stories/PlaceOrderContent.stories.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Provider } from "mobx-react";
+import PlaceOrderContent from "../dashboard/trade/placeOrder/PlaceOrderContent";
+import { useTradeStore } from "../stores/tradeStore";
+import { OrderType } from "../enums";
+
+const tradeStore = useTradeStore({
+  activePair: "ETH/BTC",
+  isBuyActive: true,
+  openBuyOrders: [],
+  openSellOrders: [],
+  orderType: OrderType.MARKET,
+  price: "0",
+  amount: "0",
+  total: "0",
+  sliderValue: 0,
+  baseAssetChannelBalance: 0,
+  quoteAssetChannelBalance: 0,
+  baseAssetLimits: {
+    max_sell: "0",
+    max_buy: "0",
+    reserved_buy: "0",
+    reserved_sell: "0",
+  },
+  quoteAssetLimits: {
+    max_sell: "0",
+    max_buy: "0",
+    reserved_buy: "0",
+    reserved_sell: "0",
+  },
+  currentBuyMarketPrice: 0,
+  currentSellMarketPrice: 0,
+});
+
+storiesOf("PlaceOrder", module).add("PlaceOrderContentDefault", () => (
+  <Provider tradeStore={tradeStore}>
+    <PlaceOrderContent
+      initialLoadCompleted={true}
+      loadingErrors={""}
+      resetMetaData={() => {}}
+      resetFormData={() => {}}
+      setOrderError={() => {}}
+      orderError={""}
+      tradeStore={tradeStore}
+    />
+  </Provider>
+));
diff --git a/src/themes.ts b/src/themes.ts
index fbd7c13..ea5ee0b 100644
--- a/src/themes.ts
+++ b/src/themes.ts
@@ -1,7 +1,5 @@
 import { createMuiTheme } from "@material-ui/core";
 
-const defaultTheme = createMuiTheme();
-
 export const darkTheme = createMuiTheme({
   palette: {
     type: "dark",
@@ -16,9 +14,50 @@ export const darkTheme = createMuiTheme({
 });
 
 export const tradeTheme = createMuiTheme({
+  overrides: {
+    MuiFormLabel: {
+      root: {
+        color: "#979797",
+        "&$focused": {
+          color: "#979797",
+        },
+      },
+    },
+    MuiInput: {
+      underline: {
+        borderBottom: "1px solid #333333",
+        "&:after": {
+          borderBottom: "1px solid #333333",
+          borderBottomStyle: "none",
+        },
+        "&:before": {
+          borderBottom: "1px solid #333333",
+          borderBottomStyle: "none",
+        },
+
+        "&&&:before": {
+          borderBottomStyle: "none",
+        },
+        "&&:after": {
+          borderBottomStyle: "none",
+        },
+      },
+    },
+    MuiInputBase: {
+      input: {
+        "&:-webkit-autofill": {
+          transitionDelay: "9999s",
+          transitionProperty: "background-color, color",
+        },
+      },
+    },
+  },
   palette: {
     primary: {
-      main: defaultTheme.palette.success.light,
+      main: "#29cc78",
+    },
+    secondary: {
+      main: "#e63939",
     },
     type: "dark",
   },