diff --git a/websrc/components/Statusbar.tsx b/websrc/components/Statusbar.tsx
new file mode 100644
index 0000000..0fdccfa
--- /dev/null
+++ b/websrc/components/Statusbar.tsx
@@ -0,0 +1,207 @@
+import React, {Component} from "react";
+import {NewTickMessage} from "../types";
+
+type QuoteStatusProps = {
+    percentage?: boolean,
+    quote_symbol?: string,
+    amount: number,
+    subtitle: string,
+    sign?: boolean
+}
+
+export class QuoteStatus extends Component<QuoteStatusProps> {
+    private whole: number;
+    private decimal: number;
+    private sign: string;
+    private signClass: string;
+
+    constructor(props) {
+        super(props);
+
+        console.log("SUB")
+        console.log(this.props.amount)
+        this.deriveProps()
+    }
+
+    deriveProps() {
+        this.whole = Math.abs(Math.trunc(this.props.amount))
+        this.decimal = Math.trunc(this.props.amount % 1 * 100)
+        this.sign = this.props.amount > 0 ? "+" : "-"
+
+        this.signClass = this.props.amount > 0 ? "text-green-500" : "text-red-500"
+    }
+
+    renderSign() {
+        if (this.props.sign) {
+            return (
+                <span
+                    className={this.signClass}>{this.sign}</span>
+            )
+        }
+        return null
+    }
+
+    symbolOrPercentageRender() {
+        if (this.props.percentage) {
+            return (
+                <>
+                <span className="text-4xl text-bold align-top">
+                    {this.renderSign()}</span>
+                    <span className="text-5xl">{Math.abs(this.props.amount).toFixed(2)}</span>
+                    <span className="text-3xl align-top">%</span>
+                </>
+            )
+        } else {
+            return (
+                <>
+                    <span className="text-4xl text-bold align-top">{this.renderSign()}{this.props.quote_symbol}</span>
+                    <span className="text-5xl">{this.whole}</span>
+                    <span className="text-3xl align-top">.{this.decimal}</span>
+                </>
+            )
+        }
+    }
+
+    render() {
+        return (
+            <>
+                <div className="text-gray-700 mb-2">
+                    {this.symbolOrPercentageRender()}
+                </div>
+                <div className="text-sm uppercase text-gray-300 tracking-wide">
+                    {this.props.subtitle}
+                </div>
+            </>
+        )
+    }
+}
+
+type DateButtonProps = {
+    label: string
+}
+
+type DateButtonState = {
+    selected: boolean
+}
+
+class DateButton extends Component<DateButtonProps, DateButtonState> {
+    private classSelected: string = "appearance-none py-4 text-blue-600 border-b border-blue-600 mr-3";
+    private classNotSelected: string = "appearance-none py-4 text-gray-600 border-b border-transparent hover:border-gray-800 mr-3";
+    private currentClass: string;
+
+    state = {
+        selected: false
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.updateClass()
+    }
+
+    toggleState() {
+        this.setState({selected: !this.state.selected})
+        this.updateClass()
+    }
+
+    updateClass() {
+        this.currentClass = this.state.selected ? this.classSelected : this.classNotSelected;
+    }
+
+    render() {
+        return (
+            <button type="button"
+                    className={this.currentClass} onClick={() => this.toggleState()}>
+                {this.props.label}
+            </button>
+        )
+    }
+}
+
+export class Statusbar extends Component<NewTickMessage> {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        console.log("MAIN")
+        console.log(this.props.price)
+        return (
+            <div className="bg-white border-t border-b sm:border-l sm:border-r sm:rounded shadow flex-grow mb-6">
+                <div className="border-b px-6">
+                    <div className="flex justify-between -mb-px">
+                        <div className="lg:hidden text-blue-600 py-4 text-lg">
+                            Price Charts
+                        </div>
+                        <div className="hidden lg:flex">
+                            <button type="button"
+                                    className="appearance-none py-4 text-blue-600 border-b border-blue-dark mr-6">
+                                Bitcoin &middot; CA$21,404.74
+                            </button>
+                            <button type="button"
+                                    className="appearance-none py-4 text-gray-600 border-b border-transparent hover:border-grey-dark mr-6">
+                                Ethereum &middot; CA$884.80
+                            </button>
+                            <button type="button"
+                                    className="appearance-none py-4 text-gray-600 border-b border-transparent hover:border-grey-dark">
+                                Litecoin &middot; CA$358.24
+                            </button>
+                        </div>
+                        <div className="flex text-sm">
+                            <DateButton label={"1m"}/>
+                            <DateButton label={"1D"}/>
+                            <DateButton label={"1W"}/>
+                            <DateButton label={"1M"}/>
+                            <DateButton label={"1Y"}/>
+                            <DateButton label={"ALL"}/>
+                        </div>
+                    </div>
+                </div>
+                <div className="flex items-center px-6 lg:hidden">
+                    <div className="flex-grow flex-no-shrink py-6">
+                        <div className="text-gray-700 mb-2">
+                            <span className="text-3xl align-top">CA$</span>
+                            <span className="text-5xl">21,404</span>
+                            <span className="text-3xl align-top">.74</span>
+                        </div>
+                        <div className="text-green-300 text-sm">
+                            &uarr; CA$12,955.35 (154.16%)
+                        </div>
+                    </div>
+                    <div className="flex-shrink w-32 inline-block relative">
+                        <select
+                            className="block appearance-none w-full bg-white border border-grey-light px-4 py-2 pr-8 rounded">
+                            <option>BTC</option>
+                            <option>ETH</option>
+                            <option>LTC</option>
+                        </select>
+                        <div className="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-gray-300">
+                            <svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
+                                 viewBox="0 0 20 20">
+                                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+                <div className="hidden lg:flex">
+                    <div className="w-1/3 text-center py-8">
+                        <div className="border-r">
+                            <QuoteStatus key={this.props.price} quote_symbol={"USD"} amount={this.props.price}
+                                         subtitle={"Bitcoin price"}/>
+                        </div>
+                    </div>
+                    <div className="w-1/3 text-center py-8">
+                        <div className="border-r">
+                            <QuoteStatus quote_symbol={"GBP"} sign={true} amount={12134.20} subtitle={"since last month"}/>
+                        </div>
+                    </div>
+                    <div className="w-1/3 text-center py-8">
+                        <div>
+                            <QuoteStatus percentage={true} sign={true} amount={-100.45} subtitle={"since last month"}/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file