diff --git a/websrc/components/App.tsx b/websrc/components/App.tsx
index 26601b6..9be7d16 100644
--- a/websrc/components/App.tsx
+++ b/websrc/components/App.tsx
@@ -4,10 +4,8 @@ import {CurrencyPair, FirstConnectMessage, NewEventMessage, NewTickMessage, Posi
 import {socket} from "../index";
 import {symbolToPair} from "../utils";
 import {Helmet} from "react-helmet";
-import {Navbar} from "./Navbars";
-import {SidebarCard} from "./HCard";
-import {ClockIcon, DollarIcon} from "./Icons";
-import RPlot from "./RPlot";
+import {Navbar, Sidebar} from "./Navbars";
+import {Statusbar} from "./Statusbar";
 
 type AppState = {
     current_price: number,
@@ -68,9 +66,9 @@ class App extends Component<{}, AppState> {
 
                 this.event_id += 1
 
-                this.setState({
-                    events: [...this.state.events, new_event]
-                })
+                this.setState((state) => ({
+                    events: [...state.events, new_event]
+                }))
             }
         })
     }
@@ -83,29 +81,29 @@ class App extends Component<{}, AppState> {
                         - {String(this.state.active_pair.base) + "/" + String(this.state.active_pair.quote)} {String(this.state.current_price)} </title>
                 </Helmet>
                 <div className="bg-gray-800">
-                    <div className="h-screen max-w-screen-2xl flex mx-auto">
+                    <div className="h-screen max-w-screen flex mx-auto">
                         <Navbar/>
                         <main
-                            className="my-1 pt-2 pb-2 px-10 flex-1 bg-gray-200 dark:bg-black rounded-l-lg*
+                            className="my-1 py-2 px-10 flex-1 bg-gray-200 dark:bg-black rounded-l-lg*
                     transition duration-500 ease-in-out overflow-y-auto flex flex-col">
                             <div className="flex justify-center text-2xl my-4">
-                                <SidebarCard logo={<DollarIcon width={10} height={10}/>} title={""}
-                                             content={"$" + this.state.current_price.toFixed(2).toString()}/>
-                                <SidebarCard logo={<ClockIcon width={10} height={10}/>} title={""}
-                                             content={this.state.current_tick.toString()}/>
+                                <Statusbar positions={this.state.positions} price={this.state.current_price}
+                                           tick={this.state.current_tick}/>
                             </div>
 
-                            <div className="flex flex-col flex-grow mx-3 my-8 shadow-md hover:shadow-lg">
+                            <div className="flex flex-col flex-grow my-8 shadow-md hover:shadow-lg">
                                 <div
                                     className="py-2 flex-grow bg-white dark:bg-gray-600 rounded-lg">
-                                    <RPlot/>
+                                    {/*<RPlot/>*/}
                                 </div>
                             </div>
 
-                            <footer className="flex rounded-lg justify-center bg-gray-600 mt-4 border-t text-gray-300">
-                                <span className="my-1 mx-1">Made with ❤️ by the Peperone in a scantinato</span>
-                            </footer>
+
+                            {/*<footer className="flex rounded-lg justify-center bg-gray-600 mt-4 border-t text-gray-300">*/}
+                            {/*    <span className="my-1 mx-1">Made with ❤️ by the Peperone in a scantinato</span>*/}
+                            {/*</footer>*/}
                         </main>
+                        <Sidebar tick={1} price={1} positions={[]}/>
                     </div>
                 </div>
             </>