diff --git a/frontend/src/app.js b/frontend/src/app.js
index 93c7223..d165a01 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -55,11 +55,26 @@ class NoEntry extends React.Component {
 
     render() {
         const logbookId = parseInt(this.props.match.params.logbookId);
+        const {hideLogbook, hideLogbookTree, eventbus} = this.props;
         console.log(this.props.match.location);
         return (
             <div className="empty">
-                <i className="fa fa-arrow-left" /> Select an entry to read it
-                {logbookId ? (
+                <div>
+                {hideLogbookTree &&
+                    <span>
+                        <a href="#" onClick={() => eventbus.publish("logbooktree.hide", false)}>Show logbooks</a>
+
+                    </span>
+                }
+                {hideLogbookTree && hideLogbook && <span>&nbsp;|&nbsp;</span> }
+                {hideLogbook &&
+                    <span>
+                        <a href="#" onClick={() => eventbus.publish("logbook.hide", false)}>Show logbook</a>
+                    </span>
+                }
+                </div>
+                {!hideLogbook && <i className="fa fa-arrow-left" > Select an entry to read it </i>}
+                {logbookId && !hideLogbook ? (
                     <div>
                         {" "}
                         or{" "}
@@ -72,19 +87,53 @@ class NoEntry extends React.Component {
                             click here to make a new entry.
                         </Link>
                     </div>
+                    
                 ) : null}
             </div>
         );
     }
 }
+class Elogy extends React.Component {
+
+    constructor() {
+        super();
+        this.state = {
+            hideLogbookTree: false,
+            hideLogbook: false
+        };
+        this._hideLogbookTree = this._hideLogbookTree.bind(this);
+        this._hideLogbook = this._hideLogbook.bind(this);
+    }
 
-const Elogy = () => (
+    componentDidMount() {
+        eventbus.subscribe("logbooktree.hide", this._hideLogbookTree);
+        eventbus.subscribe("logbook.hide", this._hideLogbook);
+    }
+
+    componentWillUnmount() {
+        eventbus.unsubscribe("logbooktree.hide", this._hideLogbookTree);
+        eventbus.unsubscribe("logbook.hide", this._hideLogbook);
+    }
+
+    _hideLogbookTree(hide) {
+        this.setState({hideLogbookTree: hide});
+    }
+
+    _hideLogbook(hide) {
+        this.setState({hideLogbook: hide});
+    }
+
+    render() { 
+    const EntryWithEventbus = withProps(Entry, { "eventbus": eventbus, "hideLogbookTree": this.state.hideLogbookTree, "hideLogbook": this.state.hideLogbook });
+    const NoEntryWithEventbus = withProps(NoEntry, { "eventbus": eventbus, "hideLogbookTree": this.state.hideLogbookTree, "hideLogbook": this.state.hideLogbook });
+
+    return (
     /* Set up a browser router that will render the correct component
        in the right places, all depending on the current URL.  */
 
     <Router>
         <div id="app">
-            <div id="logbooks">
+            {!this.state.hideLogbookTree ? <div id="logbooks">
                 <Switch>
                     <Route
                         path="/logbooks/:logbookId"
@@ -99,9 +148,9 @@ const Elogy = () => (
                     />
                     <Route component={QuickSearch} />
                 </Switch>
-            </div>
+            </div> : null}
 
-            <div id="logbook">
+            {!this.state.hideLogbook ? <div id="logbook">
                 <Switch>
                     <Route
                         path="/logbooks/:logbookId/entries/:entryId"
@@ -113,7 +162,7 @@ const Elogy = () => (
                     />
                     <Route component={NoLogbook} />
                 </Switch>
-            </div>
+            </div> : null}
 
             <div id="entry">
                 <Switch>
@@ -128,7 +177,7 @@ const Elogy = () => (
 
                     <Route
                         path="/logbooks/:logbookId/entries/:entryId"
-                        component={Entry}
+                        component={EntryWithEventbus}
                     />
 
                     <Route
@@ -140,11 +189,12 @@ const Elogy = () => (
                         component={LogbookEditorWithEventbus}
                     />
 
-                    <Route path="/logbooks/:logbookId" component={NoEntry} />
+                    <Route path="/logbooks/:logbookId" component={NoEntryWithEventbus} />
                 </Switch>
             </div>
         </div>
     </Router>
 );
-
+}
+}
 export default Elogy;
diff --git a/frontend/src/entry.js b/frontend/src/entry.js
index 4b99858..7d7bdea 100644
--- a/frontend/src/entry.js
+++ b/frontend/src/entry.js
@@ -253,6 +253,18 @@ class Entry extends React.Component {
                 <header>
                     {this.state.logbook ? (
                         <span className="commands">
+                            {this.props.hideLogbookTree &&
+                                <span>
+                                    <a href="#" onClick={() => this.props.eventbus.publish("logbooktree.hide", false)}>Show logbooks</a>
+                                    &nbsp;|&nbsp;
+                                </span>
+                            }
+                            {this.props.hideLogbook &&
+                                <span>
+                                    <a href="#" onClick={() => this.props.eventbus.publish("logbook.hide", false)}>Show logbook</a>
+                                    &nbsp;|&nbsp;
+                                </span>
+                            }
                             {this.state.follows ? (
                                 <Link
                                     to={{
diff --git a/frontend/src/logbook.css b/frontend/src/logbook.css
index a56497d..082b483 100644
--- a/frontend/src/logbook.css
+++ b/frontend/src/logbook.css
@@ -21,6 +21,10 @@
     border-bottom: 1px solid #aaa;
 }
 
+#logbook header .commands {
+    float: right;
+}
+
 #logbook header .name {
     font-size: 120%;
     font-weight: bold;
diff --git a/frontend/src/logbook.js b/frontend/src/logbook.js
index e6cc261..a64a018 100644
--- a/frontend/src/logbook.js
+++ b/frontend/src/logbook.js
@@ -188,6 +188,10 @@ class Logbook extends React.Component {
         this.props.history.push(`?sort_by=${sortBy}`);
     }
 
+    hide(){
+        this.props.eventbus.publish("logbook.hide", true);
+    }
+
     render() {
         const logbook = this.state.logbook,
             entryId = this.props.match.params.entryId
@@ -239,7 +243,12 @@ class Logbook extends React.Component {
                         <i className="fa fa-book" />
                         {logbook.id === 0 ? "[All logbooks]" : logbook.name}
                     </span>
-
+                    <div className="commands">
+                        <a href="#">
+                            <i className="fa fa-minus"  onClick={() => this.hide()}/>
+                        </a>
+                    &nbsp;
+                    </div>
                     <div>
                         {logbook.id ? (
                             <span>
diff --git a/frontend/src/logbooktree.js b/frontend/src/logbooktree.js
index ab2d696..6d5eb62 100644
--- a/frontend/src/logbooktree.js
+++ b/frontend/src/logbooktree.js
@@ -106,6 +106,10 @@ class LogbookTree extends React.Component {
         this.props.eventbus.unsubscribe("logbook.reload", this._reload);
     }
 
+    hide(){
+        this.props.eventbus.publish("logbooktree.hide", true);
+    }
+
     reload() {
         console.log("reload logbook tree");
         this.fetch(this.props.location.search);
@@ -148,6 +152,10 @@ class LogbookTree extends React.Component {
                         </Link>
                     </span>
                     <div className="commands">
+                        <a href="#">
+                            <i className="fa fa-minus"  onClick={() => this.hide()}/>
+                        </a>
+                        &nbsp;
                         {logbookId !== this.state.id ? (
                             <Link
                                 to={{