diff --git a/websrc/components/App.tsx b/websrc/components/App.tsx
index f772348..9fc1b7d 100644
--- a/websrc/components/App.tsx
+++ b/websrc/components/App.tsx
@@ -6,15 +6,18 @@ import {PositionTable} from "./Tables";
 import {EventProp, Events} from "./Events";
 import {Helmet} from "react-helmet";
 import {CurrencyDropdown} from "./Currency";
-import {FirstConnectMessage, NewEventMessage, NewTickMessage, PositionState} from "../types";
+import {CurrencyPair, FirstConnectMessage, NewEventMessage, NewTickMessage, PositionProp} from "../types";
 import {socket} from "../index";
+import {symbolToPair} from "../utils";
 
 type AppState = {
     current_price: number,
     current_tick: number,
     last_update: Date,
-    positions: Array<PositionState>,
-    events: Array<EventProp>
+    positions: Array<PositionProp>,
+    events: Array<EventProp>,
+    active_pair: CurrencyPair,
+    available_pairs: Array<CurrencyPair>
 }
 
 class App extends Component<{}, AppState> {
@@ -25,7 +28,9 @@ class App extends Component<{}, AppState> {
         current_tick: 0,
         last_update: new Date(),
         positions: [],
-        events: []
+        events: [],
+        active_pair: symbolToPair("tBTCUSD"),
+        available_pairs: []
     }
 
     constructor(props) {
@@ -81,7 +86,7 @@ class App extends Component<{}, AppState> {
 
                 <Navbar bg="light" expand="lg" className="border-bottom">
                     <Navbar.Brand href="#" className={"mr-auto"}>Rustico - BfxBot</Navbar.Brand>
-                    <CurrencyDropdown active_pair={{base: "BTC", quote: "USD"}} pairs={[{base: "XMR", quote: "USD"}]}/>
+                    <CurrencyDropdown active_pair={this.state.active_pair} pairs={this.state.available_pairs}/>
                 </Navbar>
 
                 <Container fluid className="mt-2 border flex-fill d-flex">