diff --git a/src/main/java/io/bitsquare/gui/bitsquare.css b/src/main/java/io/bitsquare/gui/bitsquare.css
index d53968bf31..ae5d846f98 100644
--- a/src/main/java/io/bitsquare/gui/bitsquare.css
+++ b/src/main/java/io/bitsquare/gui/bitsquare.css
@@ -1,7 +1,30 @@
+/* Create offer screen */
+#input-description-label {
+    -fx-font-size: 11;
+    -fx-alignment: center;
+}
+
+#create-offer-calc-label {
+    -fx-font-weight: bold;
+    -fx-font-size: 20;
+    -fx-padding: 15 5 0 5;
+}
+
+#currency-info-label {
+    -fx-border-radius: 0 4 4 0;
+    -fx-padding: 4 4 4 4;
+    -fx-background-color: linear-gradient(to bottom, #eee, #ddd);
+    -fx-border-color: #aaa;
+    -fx-border-style:  solid  solid solid none;
+    -fx-border-insets: 0 0 0 -2;
+}
+
+/* Splash screen */
 #splash {
     -fx-background-color: #ffffff;
 }
 
+/* Mmain UI screen */
 #logo-sub-title-label {
     -fx-font-weight: bold;
     -fx-font-size: 24;
@@ -174,14 +197,21 @@
     -fx-font-size: 14;
 }
 
-#form-group-label {
+#form-group-title {
     -fx-font-weight: bold;
     -fx-font-size: 14;
     -fx-text-fill: #111;
     -fx-background-color: #f4f4f4;
 }
 
-#form-group-border {
+#form-group-title-active {
+    -fx-font-weight: bold;
+    -fx-font-size: 14;
+    -fx-text-fill: #0096c9;
+    -fx-background-color: #f4f4f4;
+}
+
+#form-group-background {
     -fx-body-color: linear-gradient(to bottom, #f4f4f4, #F0F0F0);
     -fx-outer-border: linear-gradient(to bottom, #ddd, #ccc);
     -fx-background-color: -fx-shadow-highlight-color,
@@ -191,6 +221,17 @@
     -fx-background-insets: 0 0 -1 0, 0, 1, 2;
     -fx-background-radius: 3px, 3px, 2px, 1px;
 }
+#form-group-background-active {
+    -fx-body-color: linear-gradient(to bottom, #f4f4f4, #F0F0F0);
+    -fx-outer-border: linear-gradient(to bottom, #9bbdc9, #57acc9);
+    -fx-background-color: -fx-shadow-highlight-color,
+    -fx-outer-border,
+    -fx-inner-border,
+    -fx-body-color;
+    -fx-background-insets: 0 0 -1 0, 0, 1.5, 2;
+    -fx-background-radius: 3px, 3px, 2px, 1px;
+}
+
 
 #form-title {
     -fx-font-weight: bold;
diff --git a/src/main/java/io/bitsquare/msg/MessageFacade.java b/src/main/java/io/bitsquare/msg/MessageFacade.java
index 7b771e29e0..ef9c9fa141 100644
--- a/src/main/java/io/bitsquare/msg/MessageFacade.java
+++ b/src/main/java/io/bitsquare/msg/MessageFacade.java
@@ -172,7 +172,7 @@ public class MessageFacade implements MessageBroker {
         Number160 locationKey = Number160.createHash(offer.getCurrency().getCurrencyCode());
         try {
             final Data offerData = new Data(offer);
-            
+
             // the offer is default 30 days valid
             int defaultOfferTTL = 30 * 24 * 60 * 60 * 1000;
             offerData.ttlSeconds(defaultOfferTTL);
@@ -189,7 +189,7 @@ public class MessageFacade implements MessageBroker {
 
                             // TODO will be removed when we don't use polling anymore
                             setDirty(locationKey);
-                            log.trace("Add offer to DHT was successful. Stored data: [locationKey: " + locationKey + 
+                            log.trace("Add offer to DHT was successful. Stored data: [locationKey: " + locationKey +
                                     ", " +
                                     "value: " + offerData + "]");
                         });
@@ -220,7 +220,7 @@ public class MessageFacade implements MessageBroker {
     }
 
     //TODO remove is failing, probably due Coin or Fiat class (was working before)
-    // objects are identical but returned object form network might have soem problem with serialisation?
+    // objects are identical but returned object form network might have some problem with serialisation?
     public void removeOffer(Offer offer) {
         Number160 locationKey = Number160.createHash(offer.getCurrency().getCurrencyCode());
         try {
diff --git a/src/main/resources/images/buy_black_62_54.png b/src/main/resources/images/buy_black_62_54.png
new file mode 100644
index 0000000000..eb3f19e0e9
Binary files /dev/null and b/src/main/resources/images/buy_black_62_54.png differ
diff --git a/src/main/resources/images/info_44.png b/src/main/resources/images/info_44.png
new file mode 100644
index 0000000000..0273cd564b
Binary files /dev/null and b/src/main/resources/images/info_44.png differ
diff --git a/src/test/java/io/bitsquare/gui/trade/createoffer/uimock/CreateOfferControllerUIMock.java b/src/test/java/io/bitsquare/gui/trade/createoffer/uimock/CreateOfferControllerUIMock.java
new file mode 100644
index 0000000000..359f93c939
--- /dev/null
+++ b/src/test/java/io/bitsquare/gui/trade/createoffer/uimock/CreateOfferControllerUIMock.java
@@ -0,0 +1,226 @@
+/*
+ * This file is part of Bitsquare.
+ *
+ * Bitsquare is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * Bitsquare is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public
+ * License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Bitsquare. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+package io.bitsquare.gui.trade.createoffer.uimock;
+
+import io.bitsquare.gui.components.confidence.ConfidenceProgressIndicator;
+
+import java.net.URL;
+
+import java.util.ResourceBundle;
+
+import javax.inject.Inject;
+
+import javafx.fxml.FXML;
+import javafx.scene.control.*;
+import javafx.scene.image.*;
+import javafx.scene.layout.*;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+public class CreateOfferControllerUIMock {
+    private static final Logger log = LoggerFactory.getLogger(CreateOfferControllerUIMock.class);
+
+    public VBox priceAmountMinAmountBox;
+    public HBox priceAmountHBox;
+    public VBox priceAmountBuyIconBox;
+
+
+    @FXML private GridPane gridPane;
+    @FXML private ImageView priceAmountInfoIcon, payFundsInfoIcon, paymentInfoIcon, showDetailsInfoIcon;
+    @FXML private Separator totalsSeparator;
+
+    @FXML private Pane priceAmountPane, paymentInfoPane, payFundsPane, showDetailsPane;
+    @FXML private Label priceAmountInfoLabel, priceAmountTitleLabel, paymentInfoTitleLabel, addressLabel,
+            balanceLabel, paymentInfoLabel,
+            payFundsInfoLabel, payFundsTitleLabel, offerFeeLabel, networkFeeLabel, summaryBtcLabel, totalToPayLabel,
+            showDetailsTitleLabel, bankAccountTypeLabel, bankAccountCurrencyLabel, bankAccountCountyLabel,
+            acceptedCountriesLabel, acceptedLanguagesLabel, acceptedArbitratorsLabel, showDetailsInfoLabel;
+    @FXML private Button showPaymentInfoScreenButton, showPayFundsScreenButton, showDetailsButton;
+    @FXML private TextField offerFeeTextField, networkFeeTextField, acceptedArbitratorsTextField;
+    @FXML private TextField addressTextField;
+    @FXML private TextField balanceTextField;
+
+    @FXML private Label buyLabel, confirmationLabel, txTitleLabel, collateralLabel;
+    @FXML private TextField amountTextField, minAmountTextField, priceTextField, volumeTextField;
+    @FXML private Button placeOfferButton, closeButton;
+    @FXML private TextField totalToPayTextField, collateralTextField, bankAccountTypeTextField,
+            bankAccountCurrencyTextField, bankAccountCountyTextField, acceptedCountriesTextField,
+            acceptedLanguagesTextField,
+            summaryBtcTextField, transactionIdTextField;
+    @FXML private ConfidenceProgressIndicator progressIndicator;
+
+
+    @Inject
+    private CreateOfferControllerUIMock() {
+    }
+
+
+    public void initialize(URL url, ResourceBundle rb) {
+
+        paymentInfoPane.setVisible(false);
+        collateralLabel.setVisible(false);
+        collateralTextField.setVisible(false);
+        offerFeeLabel.setVisible(false);
+        offerFeeTextField.setVisible(false);
+        networkFeeLabel.setVisible(false);
+        networkFeeTextField.setVisible(false);
+        totalsSeparator.setVisible(false);
+        summaryBtcLabel.setVisible(false);
+        summaryBtcTextField.setVisible(false);
+        paymentInfoLabel.setVisible(false);
+        paymentInfoIcon.setVisible(false);
+        showPayFundsScreenButton.setVisible(false);
+
+        payFundsPane.setVisible(false);
+        totalToPayLabel.setVisible(false);
+        totalToPayTextField.setVisible(false);
+        addressLabel.setVisible(false);
+        addressTextField.setVisible(false);
+        balanceLabel.setVisible(false);
+        balanceTextField.setVisible(false);
+        payFundsInfoIcon.setVisible(false);
+        payFundsInfoLabel.setVisible(false);
+        placeOfferButton.setVisible(false);
+        showDetailsButton.setVisible(false);
+
+        showDetailsPane.setVisible(false);
+        showDetailsTitleLabel.setVisible(false);
+        acceptedCountriesLabel.setVisible(false);
+        acceptedCountriesTextField.setVisible(false);
+        acceptedLanguagesLabel.setVisible(false);
+        acceptedLanguagesTextField.setVisible(false);
+        acceptedArbitratorsLabel.setVisible(false);
+        acceptedArbitratorsTextField.setVisible(false);
+        bankAccountTypeLabel.setVisible(false);
+        bankAccountTypeTextField.setVisible(false);
+        bankAccountCurrencyLabel.setVisible(false);
+        bankAccountCurrencyTextField.setVisible(false);
+        bankAccountCountyLabel.setVisible(false);
+        bankAccountCountyTextField.setVisible(false);
+        showDetailsInfoIcon.setVisible(false);
+        showDetailsInfoLabel.setVisible(false);
+    }
+
+   /* @FXML
+    private void collapsePriceAmountPane() {
+        for (int i = 1; i < 4; i++) {
+            gridPane.getRowConstraints().get(i).setMaxHeight(0);
+        }
+
+        GridPane.setRowSpan(priceAmountPane, 1);
+        priceAmountBuyIconBox.setMaxHeight(0);
+
+       // priceAmountPane.setVisible(false);
+       // priceAmountTitleLabel.setVisible(false);
+        priceAmountBuyIconBox.setVisible(false);
+        priceAmountHBox.setVisible(false);
+        priceAmountMinAmountBox.setVisible(false);
+        priceAmountInfoIcon.setVisible(false);
+        priceAmountInfoLabel.setVisible(false);
+    }*/
+
+    @FXML
+    private void showPaymentInfoScreen() {
+
+        priceAmountPane.setId("form-group-background");
+        priceAmountTitleLabel.setId("form-group-title");
+        showPaymentInfoScreenButton.setVisible(false);
+
+        paymentInfoPane.setVisible(true);
+        collateralLabel.setVisible(true);
+        collateralTextField.setVisible(true);
+        offerFeeLabel.setVisible(true);
+        offerFeeTextField.setVisible(true);
+        networkFeeLabel.setVisible(true);
+        networkFeeTextField.setVisible(true);
+        totalsSeparator.setVisible(true);
+        summaryBtcLabel.setVisible(true);
+        summaryBtcTextField.setVisible(true);
+        paymentInfoLabel.setVisible(true);
+        paymentInfoIcon.setVisible(true);
+        showPayFundsScreenButton.setVisible(true);
+
+        showPayFundsScreen();
+    }
+
+    @FXML
+    private void showPayFundsScreen() {
+        paymentInfoPane.setId("form-group-background");
+        paymentInfoTitleLabel.setId("form-group-title");
+
+        showPayFundsScreenButton.setVisible(false);
+
+        payFundsPane.setVisible(true);
+        totalToPayLabel.setVisible(true);
+        totalToPayTextField.setVisible(true);
+        addressLabel.setVisible(true);
+        addressTextField.setVisible(true);
+        balanceLabel.setVisible(true);
+        balanceTextField.setVisible(true);
+        payFundsInfoIcon.setVisible(true);
+        payFundsInfoLabel.setVisible(true);
+        placeOfferButton.setVisible(true);
+        showDetailsButton.setVisible(true);
+
+    }
+
+    @FXML
+    private void showDetailsScreen() {
+        payFundsPane.setId("form-group-background");
+        payFundsTitleLabel.setId("form-group-title");
+
+        showDetailsButton.setManaged(false);
+        showDetailsButton.setVisible(false);
+
+        showDetailsPane.setVisible(true);
+        showDetailsTitleLabel.setVisible(true);
+
+        acceptedCountriesLabel.setVisible(true);
+        acceptedCountriesTextField.setVisible(true);
+        acceptedLanguagesLabel.setVisible(true);
+        acceptedLanguagesTextField.setVisible(true);
+        acceptedArbitratorsLabel.setVisible(true);
+        acceptedArbitratorsTextField.setVisible(true);
+
+        bankAccountTypeLabel.setVisible(true);
+        bankAccountTypeTextField.setVisible(true);
+        bankAccountCurrencyLabel.setVisible(true);
+        bankAccountCurrencyTextField.setVisible(true);
+        bankAccountCountyLabel.setVisible(true);
+        bankAccountCountyTextField.setVisible(true);
+
+        showDetailsInfoIcon.setVisible(true);
+        showDetailsInfoLabel.setVisible(true);
+
+    }
+
+    @FXML
+    private void showAdvancedScreen() {
+
+    }
+
+
+    @FXML
+    private void showSummaryScreen() {
+
+    }
+
+
+}
+
diff --git a/src/test/java/io/bitsquare/gui/trade/createoffer/uimock/CreateOfferUIMockRunner.java b/src/test/java/io/bitsquare/gui/trade/createoffer/uimock/CreateOfferUIMockRunner.java
new file mode 100644
index 0000000000..0b36eedf16
--- /dev/null
+++ b/src/test/java/io/bitsquare/gui/trade/createoffer/uimock/CreateOfferUIMockRunner.java
@@ -0,0 +1,87 @@
+package io.bitsquare.gui.trade.createoffer.uimock;
+
+import io.bitsquare.di.BitSquareModule;
+import io.bitsquare.di.GuiceFXMLLoader;
+
+import com.google.inject.Guice;
+import com.google.inject.Injector;
+
+import java.io.IOException;
+
+import java.net.MalformedURLException;
+import java.net.URL;
+
+import javafx.application.Application;
+import javafx.scene.*;
+import javafx.scene.input.*;
+import javafx.scene.layout.*;
+import javafx.stage.Stage;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+/**
+ * For testing single isolated UI screens
+ */
+public class CreateOfferUIMockRunner extends Application {
+    private static final Logger log = LoggerFactory.getLogger(CreateOfferUIMockRunner.class);
+    private Scene scene;
+    private Parent view;
+    private Pane pane;
+    private boolean devTest = true;
+
+    public static void main(String[] args) {
+        launch(args);
+    }
+
+    @Override
+    public void start(Stage primaryStage) throws IOException {
+        Injector injector = Guice.createInjector(new BitSquareModule());
+        GuiceFXMLLoader.setInjector(injector);
+
+        pane = new StackPane();
+        scene = new Scene(pane, 1000, 1200);
+        scene.getAccelerators().put(KeyCombination.valueOf("Shortcut+S"), this::loadMainWindow);
+        loadMainWindow();
+        primaryStage.setScene(scene);
+        primaryStage.show();
+    }
+
+    public void loadMainWindow() {
+        log.debug("re load");
+        pane.getChildren().removeAll();
+        GuiceFXMLLoader loader = new GuiceFXMLLoader(
+                getUrl("/io/bitsquare/gui/trade/createoffer/uimock/CreateOfferViewUIMock.fxml"), false);
+
+        try {
+            view = loader.load();
+        } catch (IOException e) {
+            e.printStackTrace();
+        }
+
+        pane.getChildren().setAll(view);
+        refreshStylesheets();
+    }
+
+    private void refreshStylesheets() {
+        scene.getStylesheets().clear();
+        scene.getStylesheets().setAll(getUrl("/io/bitsquare/gui/bitsquare.css").toExternalForm());
+    }
+
+    private URL getUrl(String subPath) {
+        if (devTest) {
+            try {
+                // load from file system location to make a reload possible. makes dev process easier with hot reload
+                return new URL("file:///Users/mk/Documents/_intellij/bitsquare/src/test/java" + subPath);
+            } catch (MalformedURLException e) {
+                e.printStackTrace();
+                return null;
+            }
+        }
+        else {
+            return getClass().getResource(subPath);
+        }
+    }
+
+
+}
diff --git a/src/test/java/io/bitsquare/gui/trade/createoffer/uimock/CreateOfferViewUIMock.fxml b/src/test/java/io/bitsquare/gui/trade/createoffer/uimock/CreateOfferViewUIMock.fxml
new file mode 100644
index 0000000000..76d0e10c23
--- /dev/null
+++ b/src/test/java/io/bitsquare/gui/trade/createoffer/uimock/CreateOfferViewUIMock.fxml
@@ -0,0 +1,427 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+  ~ This file is part of Bitsquare.
+  ~
+  ~ Bitsquare is free software: you can redistribute it and/or modify it
+  ~ under the terms of the GNU Affero General Public License as published by
+  ~ the Free Software Foundation, either version 3 of the License, or (at
+  ~ your option) any later version.
+  ~
+  ~ Bitsquare is distributed in the hope that it will be useful, but WITHOUT
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public
+  ~ License for more details.
+  ~
+  ~ You should have received a copy of the GNU Affero General Public License
+  ~ along with Bitsquare. If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.image.*?>
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.text.*?>
+<AnchorPane fx:id="root" prefHeight="1500.0" prefWidth="1000.0" style="-fx-background-color: f4f4f4;"
+            stylesheets="@../../../../../../../../main/java/io/bitsquare/gui/bitsquare.css"
+            AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="10.0"
+            AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="10.0" xmlns="http://javafx.com/javafx/8"
+            xmlns:fx="http://javafx.com/fxml/1"
+            fx:controller="io.bitsquare.gui.trade.createoffer.uimock.CreateOfferControllerUIMock">
+    <children>
+        <GridPane fx:id="gridPane" hgap="5.0" vgap="5.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0"
+                  AnchorPane.topAnchor="40.0">
+            <children>
+                <Pane id="form-group-background-active" fx:id="priceAmountPane" GridPane.columnSpan="3"
+                      GridPane.rowSpan="3">
+                    <GridPane.margin>
+                        <Insets bottom="-10" left="-10" right="-10" top="-10"/>
+                    </GridPane.margin>
+                    <children>
+                        <Label id="form-group-title-active" fx:id="priceAmountTitleLabel" layoutX="8" layoutY="-8"
+                               text="Create your offer">
+                            <padding>
+                                <Insets left="5" right="7"/>
+                            </padding>
+                        </Label>
+                    </children>
+                </Pane>
+
+                <VBox fx:id="priceAmountBuyIconBox" alignment="CENTER" spacing="6" GridPane.rowSpan="2">
+                    <children>
+                        <ImageView fitHeight="54.0" fitWidth="62.0" pickOnBounds="true" preserveRatio="true">
+                            <image>
+                                <Image url="@../../../../../../../../main/resources/images/buy_black_62_54.png"/>
+                            </image>
+                        </ImageView>
+                        <Label fx:id="buyLabel" alignment="CENTER" style="-fx-font-weight:bold; -fx-font-size:16;"
+                               text="Buy Bitcoins" textAlignment="CENTER">
+                            <padding>
+                                <Insets top="-5.0"/>
+                            </padding>
+                        </Label>
+                    </children>
+                    <GridPane.margin>
+                        <Insets bottom="10.0" left="10.0" right="10.0" top="20.0"/>
+                    </GridPane.margin>
+                </VBox>
+
+                <HBox fx:id="priceAmountHBox" alignment="CENTER_LEFT" spacing="5" GridPane.columnIndex="1"
+                      GridPane.columnSpan="2">
+                    <children>
+                        <VBox spacing="4">
+                            <children>
+                                <Label id="input-description-label" prefWidth="200.0" text="Amount of Bitcoin to buy:"/>
+                                <HBox>
+                                    <children>
+                                        <TextField id="text-input-with-currency-text-field" fx:id="amountTextField"
+                                                   alignment="CENTER_RIGHT" prefWidth="200.0" text="1.00"/>
+                                        <Label id="currency-info-label" text="BTC"/>
+                                    </children>
+                                </HBox>
+                            </children>
+                        </VBox>
+                        <Label text="x">
+                            <font>
+                                <Font name="Helvetica" size="20.0"/>
+                            </font>
+                            <padding>
+                                <Insets top="14.0"/>
+                            </padding>
+                        </Label>
+
+                        <VBox spacing="4">
+                            <children>
+                                <Label id="input-description-label" prefWidth="200.0" text="Price per Bitcoin in EUR:"/>
+                                <HBox>
+                                    <children>
+                                        <TextField id="text-input-with-currency-text-field" fx:id="priceTextField"
+                                                   alignment="CENTER_RIGHT" prefWidth="200.0" text="500.00"/>
+                                        <Label id="currency-info-label" text="EUR"/>
+                                    </children>
+                                </HBox>
+                            </children>
+                        </VBox>
+
+                        <Label text="=">
+                            <font>
+                                <Font name="Helvetica" size="20.0"/>
+                            </font>
+                            <padding>
+                                <Insets top="14.0"/>
+                            </padding>
+                        </Label>
+
+                        <VBox spacing="4">
+                            <children>
+                                <Label id="input-description-label" prefWidth="200.0" text="Amount in EUR to spend:"/>
+                                <HBox>
+                                    <children>
+                                        <TextField id="text-input-with-currency-text-field" fx:id="volumeTextField"
+                                                   alignment="CENTER_RIGHT" prefWidth="200.0" text="500.00"/>
+                                        <Label id="currency-info-label" text="EUR"/>
+                                    </children>
+                                </HBox>
+                            </children>
+                        </VBox>
+                    </children>
+                    <GridPane.margin>
+                        <Insets right="10.0" top="20.0"/>
+                    </GridPane.margin>
+                </HBox>
+
+                <VBox fx:id="priceAmountMinAmountBox" spacing="4" GridPane.columnIndex="1" GridPane.columnSpan="2"
+                      GridPane.rowIndex="1">
+                    <children>
+                        <Label id="input-description-label" prefWidth="200.0" text="Minimum amount of Bitcoin:"/>
+                        <HBox>
+                            <children>
+                                <TextField id="text-input-with-currency-text-field" fx:id="minAmountTextField"
+                                           alignment="CENTER_RIGHT" prefWidth="200.0" text="0.10"/>
+                                <Label id="currency-info-label" text="BTC"/>
+                            </children>
+                        </HBox>
+                    </children>
+                    <GridPane.margin>
+                        <Insets right="10.0" top="5.0"/>
+                    </GridPane.margin>
+                </VBox>
+
+                <ImageView fx:id="priceAmountInfoIcon" fitHeight="24.0" fitWidth="24.0" pickOnBounds="true"
+                           preserveRatio="true" GridPane.rowIndex="2" GridPane.valignment="TOP">
+                    <image>
+                        <Image url="@../../../../../../../../main/resources/images/info_44.png"/>
+                    </image>
+                    <GridPane.margin>
+                        <Insets right="2.0" top="4.0"/>
+                    </GridPane.margin>
+                </ImageView>
+                <Label fx:id="priceAmountInfoLabel" prefWidth="740.0"
+                       text="With the minimum amount you can attract more potential traders with giving more flexibility. Your offer will be removed when it got executed. There is no automatic offer creation for the remaining amount. Open the help menu for more information."
+                       wrapText="true" GridPane.columnIndex="1" GridPane.rowIndex="2">
+                    <GridPane.margin>
+                        <Insets bottom="5.0"/>
+                    </GridPane.margin>
+                </Label>
+
+                <Button fx:id="showPaymentInfoScreenButton" defaultButton="true" onAction="#showPaymentInfoScreen"
+                        text="Next step" visible="true" GridPane.columnIndex="1" GridPane.rowIndex="3">
+                    <GridPane.margin>
+                        <Insets top="15.0"/>
+                    </GridPane.margin>
+                </Button>
+
+                <!-- 
+                
+                payment info   
+                
+                -->
+                <Pane id="form-group-background-active" fx:id="paymentInfoPane" visible="true" GridPane.columnSpan="3"
+                      GridPane.rowIndex="4" GridPane.rowSpan="6">
+                    <GridPane.margin>
+                        <Insets bottom="-10" left="-10" right="-10" top="-10"/>
+                    </GridPane.margin>
+                    <children>
+                        <Label id="form-group-title-active" fx:id="paymentInfoTitleLabel" layoutX="8" layoutY="-8"
+                               text="Funding information">
+                            <padding>
+                                <Insets left="5" right="7"/>
+                            </padding>
+                        </Label>
+                    </children>
+                </Pane>
+
+
+                <Label fx:id="collateralLabel" text="Collateral:" visible="true" GridPane.rowIndex="4"/>
+                <TextField fx:id="collateralTextField" editable="false" focusTraversable="false" text="0.01 BTC"
+                           visible="true" GridPane.columnIndex="1" GridPane.columnSpan="2" GridPane.rowIndex="4"/>
+
+                <Label fx:id="offerFeeLabel" text="Offer fee:" visible="true" GridPane.rowIndex="5"/>
+                <TextField fx:id="offerFeeTextField" editable="false" focusTraversable="false" text="0.001 BTC"
+                           visible="true" GridPane.columnIndex="1" GridPane.columnSpan="2" GridPane.rowIndex="5"/>
+
+                <Label fx:id="networkFeeLabel" text="Bitcoin network fee:" visible="true" GridPane.rowIndex="6"/>
+                <TextField fx:id="networkFeeTextField" editable="false" focusTraversable="false" text="0.0001 BTC"
+                           visible="true" GridPane.columnIndex="1" GridPane.columnSpan="2" GridPane.rowIndex="6"/>
+
+                <Separator fx:id="totalsSeparator" maxWidth="100" orientation="HORIZONTAL" visible="true"
+                           GridPane.columnIndex="1" GridPane.rowIndex="7">
+                    <GridPane.margin>
+                        <Insets bottom="-2"/>
+                    </GridPane.margin>
+                </Separator>
+
+                <Label fx:id="summaryBtcLabel" text="Total funds needed:" visible="true"
+                       GridPane.rowIndex="8"/>
+                <TextField fx:id="summaryBtcTextField" editable="false" focusTraversable="false" text="0.0111 BTC"
+                           visible="true" GridPane.columnIndex="1" GridPane.columnSpan="2" GridPane.rowIndex="8"/>
+
+
+                <ImageView fx:id="paymentInfoIcon" fitHeight="24.0" fitWidth="24.0" pickOnBounds="true"
+                           preserveRatio="true" visible="true" GridPane.rowIndex="9" GridPane.valignment="TOP">
+                    <image>
+                        <Image url="@../../../../../../../../main/resources/images/info_44.png"/>
+                    </image>
+                    <GridPane.margin>
+                        <Insets right="2.0" top="4.0"/>
+                    </GridPane.margin>
+                </ImageView>
+                <Label fx:id="paymentInfoLabel" prefWidth="740.0"
+                       text="The collateral helps to protect the trade process. It will be returned after a successful trade to your wallet. The offer fee will be used to support the arbitration system and the project. Open the help menu for more information."
+                       visible="true" wrapText="true" GridPane.columnIndex="1" GridPane.rowIndex="9">
+                    <GridPane.margin>
+                        <Insets bottom="5.0"/>
+                    </GridPane.margin>
+                </Label>
+
+                <Button fx:id="showPayFundsScreenButton" defaultButton="true" onAction="#showPayFundsScreen"
+                        text="Continue" visible="true" GridPane.columnIndex="1" GridPane.rowIndex="10">
+                    <GridPane.margin>
+                        <Insets top="20.0"/>
+                    </GridPane.margin>
+                </Button>
+
+
+                <!-- 
+               
+                pay funds   
+               
+                -->
+                <Pane id="form-group-background-active" fx:id="payFundsPane" visible="true" GridPane.columnSpan="3"
+                      GridPane.rowIndex="11" GridPane.rowSpan="4">
+                    <GridPane.margin>
+                        <Insets bottom="-10.0" left="-10.0" right="-10.0" top="-10.0"/>
+                    </GridPane.margin>
+                    <children>
+                        <Label id="form-group-title-active" fx:id="payFundsTitleLabel" layoutX="8" layoutY="-8"
+                               text="Fund your trade wallet">
+                            <padding>
+                                <Insets left="5" right="7"/>
+                            </padding>
+                        </Label>
+                    </children>
+                </Pane>
+
+                <Label fx:id="totalToPayLabel" text="Funds needed for that trade:" visible="true"
+                       GridPane.rowIndex="11">
+                    <GridPane.margin>
+                        <Insets top="10.0"/>
+                    </GridPane.margin>
+                </Label>
+                <TextField fx:id="totalToPayTextField" editable="false" focusTraversable="false" text="0.111 BTC"
+                           visible="true" GridPane.columnIndex="1" GridPane.columnSpan="2" GridPane.rowIndex="11">
+                    <GridPane.margin>
+                        <Insets top="10.0"/>
+                    </GridPane.margin>
+                </TextField>
+
+                <Label fx:id="addressLabel" text="Trading wallet BTC address:" visible="true" GridPane.rowIndex="12"/>
+                <TextField fx:id="addressTextField" editable="false" focusTraversable="false"
+                           text="mkpymjfTk7WmG9YC4N9c9h1UzwPvMX3aNG" visible="true" GridPane.columnIndex="1"
+                           GridPane.columnSpan="2" GridPane.rowIndex="12"/>
+
+                <Label fx:id="balanceLabel" text="Trading wallet balance:" visible="true" GridPane.rowIndex="13"/>
+                <TextField fx:id="balanceTextField" editable="false" focusTraversable="false" text="0.00 BTC"
+                           visible="true" GridPane.columnIndex="1" GridPane.columnSpan="2" GridPane.rowIndex="13">
+                    <GridPane.margin>
+                        <Insets bottom="5.0"/>
+                    </GridPane.margin>
+                </TextField>
+
+                <ImageView fx:id="payFundsInfoIcon" fitHeight="24.0" fitWidth="24.0" pickOnBounds="true"
+                           preserveRatio="true" visible="true" GridPane.rowIndex="14" GridPane.valignment="TOP">
+                    <image>
+                        <Image url="@../../../../../../../../main/resources/images/info_44.png"/>
+                    </image>
+                    <GridPane.margin>
+                        <Insets right="2.0" top="4.0"/>
+                    </GridPane.margin>
+                </ImageView>
+
+                <Label fx:id="payFundsInfoLabel" prefWidth="740.0"
+                       text="You need to pay in the funds needed to your trade wallet. The fund will be reserved for the case that your offer get executed when accepted by a trader. If you cancel your offer you can withdraw your funds from that trading wallet. The only payment which will be done when placing the offer is the offer fee payment. Open the help menu for more information."
+                       visible="true" wrapText="true" GridPane.columnIndex="1" GridPane.rowIndex="14">
+                    <GridPane.margin>
+                        <Insets bottom="5.0"/>
+                    </GridPane.margin>
+                </Label>
+
+                <HBox spacing="10" GridPane.columnIndex="1" GridPane.rowIndex="15">
+                    <GridPane.margin>
+                        <Insets bottom="30" top="20.0"/>
+                    </GridPane.margin>
+                    <children>
+                        <Button fx:id="showDetailsButton" defaultButton="true" onAction="#showDetailsScreen"
+                                text="Show offer restrictions" visible="true"/>
+                        <Button fx:id="placeOfferButton" defaultButton="true" text="Place offer" visible="true"/>
+                    </children>
+                </HBox>
+
+                <!-- 
+                
+                payment bank details screen
+                
+                -->
+                <Pane id="form-group-background-active" fx:id="showDetailsPane" visible="true" GridPane.columnSpan="3"
+                      GridPane.rowIndex="16" GridPane.rowSpan="7">
+                    <GridPane.margin>
+                        <Insets bottom="-10" left="-10" right="-10" top="-10"/>
+                    </GridPane.margin>
+                    <children>
+                        <Label id="form-group-title-active" fx:id="showDetailsTitleLabel" layoutX="8" layoutY="-8"
+                               text="Offer restrictions">
+                            <padding>
+                                <Insets left="5" right="7"/>
+                            </padding>
+                        </Label>
+                    </children>
+                </Pane>
+
+
+                <Label fx:id="acceptedCountriesLabel" text="Accepted countries:" visible="true"
+                       GridPane.rowIndex="16"/>
+                <TextField fx:id="acceptedCountriesTextField" editable="false" focusTraversable="false"
+                           text="Spain, Austria, Germany" visible="true" GridPane.columnIndex="1"
+                           GridPane.columnSpan="2" GridPane.rowIndex="16"/>
+
+                <Label fx:id="acceptedLanguagesLabel" text="Accepted languages:" visible="true"
+                       GridPane.rowIndex="17"/>
+                <TextField fx:id="acceptedLanguagesTextField" editable="false" focusTraversable="false"
+                           text="English, German, Spanish" visible="true" GridPane.columnIndex="1"
+                           GridPane.columnSpan="2" GridPane.rowIndex="17"/>
+
+                <Label fx:id="acceptedArbitratorsLabel" text="Accepted arbitrators:" visible="true"
+                       GridPane.rowIndex="18"/>
+                <TextField fx:id="acceptedArbitratorsTextField" editable="false" focusTraversable="false"
+                           text="Manfred Karrer, okapacific, Adam Gibson" visible="true" GridPane.columnIndex="1"
+                           GridPane.columnSpan="2" GridPane.rowIndex="18"/>
+
+                <Label fx:id="bankAccountTypeLabel" text="Bank account type:" visible="true" GridPane.rowIndex="19"/>
+                <TextField fx:id="bankAccountTypeTextField" editable="false" focusTraversable="false" text="Sepa"
+                           visible="true" GridPane.columnIndex="1" GridPane.columnSpan="2" GridPane.rowIndex="19"/>
+
+                <Label fx:id="bankAccountCurrencyLabel" text="Bank account currency:" visible="true"
+                       GridPane.rowIndex="20"/>
+                <TextField fx:id="bankAccountCurrencyTextField" editable="false" focusTraversable="false" text="EUR"
+                           visible="true" GridPane.columnIndex="1" GridPane.columnSpan="2" GridPane.rowIndex="20"/>
+
+                <Label fx:id="bankAccountCountyLabel" text="Bank account county:" visible="true"
+                       GridPane.rowIndex="21"/>
+                <TextField fx:id="bankAccountCountyTextField" editable="false" focusTraversable="false" text="Spain"
+                           visible="true" GridPane.columnIndex="1" GridPane.columnSpan="2" GridPane.rowIndex="21"/>
+
+                <ImageView fx:id="showDetailsInfoIcon" fitHeight="24.0" fitWidth="24.0" pickOnBounds="true"
+                           preserveRatio="true" visible="true" GridPane.rowIndex="22" GridPane.valignment="TOP">
+                    <image>
+                        <Image url="@../../../../../../../../main/resources/images/info_44.png"/>
+                    </image>
+                    <GridPane.margin>
+                        <Insets right="2.0" top="4.0"/>
+                    </GridPane.margin>
+                </ImageView>
+
+                <Label fx:id="showDetailsInfoLabel" prefWidth="740.0"
+                       text="Your trading partners must fulfill your offer restrictions. You can edit the accepted countries, languages and arbitrators in the settings. The bank account details are used from your current selected bank account (if you have multiple bank accounts). Open the help menu for more information."
+                       visible="true" wrapText="true" GridPane.columnIndex="1" GridPane.rowIndex="22">
+                    <GridPane.margin>
+                        <Insets bottom="5.0"/>
+                    </GridPane.margin>
+                </Label>
+
+            </children>
+
+
+            <columnConstraints>
+                <ColumnConstraints halignment="RIGHT" hgrow="SOMETIMES"/>
+                <ColumnConstraints hgrow="ALWAYS"/>
+                <ColumnConstraints hgrow="NEVER" prefWidth="25.0"/>
+            </columnConstraints>
+            <rowConstraints>
+                <RowConstraints/>
+                <RowConstraints/>
+                <RowConstraints/>
+                <RowConstraints/>
+                <RowConstraints/>
+                <RowConstraints/>
+                <RowConstraints/>
+                <RowConstraints/>
+                <RowConstraints/>
+                <RowConstraints minHeight="10.0" prefHeight="30.0"/>
+                <RowConstraints/>
+                <RowConstraints/>
+                <RowConstraints/>
+                <RowConstraints/>
+                <RowConstraints/>
+                <RowConstraints/>
+                <RowConstraints/>
+                <RowConstraints/>
+                <RowConstraints minHeight="10.0" prefHeight="30.0"/>
+                <RowConstraints/>
+                <RowConstraints/>
+                <RowConstraints/>
+                <RowConstraints/>
+            </rowConstraints>
+
+        </GridPane>
+    </children>
+</AnchorPane>