diff --git a/src/player.jsx b/src/player.jsx
index b8a77f8..53c75c3 100644
--- a/src/player.jsx
+++ b/src/player.jsx
@@ -44,6 +44,13 @@
         return value;
     }
 
+    let scrollToBottom = function(id) {
+        const el = document.getElementById(id);
+        if (el) {
+            el.scrollTop = el.scrollHeight;
+        }
+    }
+
     /*
      * An auto-loading buffer of recording's packets.
      */
@@ -488,7 +495,14 @@
 
         render() {
             return(
-                <textarea name="input" id="input" cols="30" rows="10" disabled>{this.props.input}</textarea>
+                <div id="input-player" className="panel panel-default">
+                    <div className="panel-heading">
+                        <span>Input</span>
+                    </div>
+                    <div className="panel-body">
+                        <textarea name="input" id="input-textarea" cols="30" rows="10" readonly disabled>{this.props.input}</textarea>
+                    </div>
+                </div>
             );
         }
 
@@ -520,6 +534,7 @@
             this.zoom = this.zoom.bind(this);
             this.fastForwardToTS = this.fastForwardToTS.bind(this);
             this.sendInput = this.sendInput.bind(this);
+            this.clearInputPlayer = this.clearInputPlayer.bind(this);
 
             this.state = {
                 cols:               80,
@@ -807,7 +822,12 @@
             this.setState({speedExp: 0});
         }
 
+        clearInputPlayer() {
+            this.setState({input: null});
+        }
+
         rewindToStart() {
+            this.clearInputPlayer();
             this.reset();
             this.sync();
         }
@@ -955,6 +975,9 @@
                 this.speed = Math.pow(2, this.state.speedExp);
                 this.sync();
             }
+            if (this.state.input != prevState.input) {
+                scrollToBottom("input-textarea");
+            }
         }
 
         render() {
@@ -1017,75 +1040,79 @@
 
             // ensure react never reuses this div by keying it with the terminal widget
             return (
-                <div>
-                    <div ref="wrapper" className="panel panel-default">
-                        <div className="panel-heading">
-                            <span>{this.state.title}</span>
-                        </div>
-                        <div className="panel-body">
-                            <div className={(this.state.drag_pan ? "dragnpan" : "")} style={scrollwrap} ref="scrollwrap">
-                                <div ref="term" className="console-ct" key={this.state.term} style={style} />
-                            </div>
-                        </div>
-                        <div className="panel-footer">
-                            <button title="Play/Pause - Hotkey: p" type="button" ref="playbtn"
-                                    className="btn btn-default btn-lg margin-right-btn play-btn"
-                                    onClick={this.playPauseToggle}>
-                                <i className={"fa fa-" + (this.state.paused ? "play" : "pause")}
-                                   aria-hidden="true" />
-                            </button>
-                            <button title="Skip Frame - Hotkey: ." type="button"
-                                    className="btn btn-default btn-lg margin-right-btn"
-                                    onClick={this.skipFrame}>
-                                <i className="fa fa-step-forward" aria-hidden="true" />
-                            </button>
-                            <button title="Restart Playback - Hotkey: Shift-R" type="button"
-                                    className="btn btn-default btn-lg" onClick={this.rewindToStart}>
-                                <i className="fa fa-fast-backward" aria-hidden="true" />
-                            </button>
-                            <button title="Fast-forward to end - Hotkey: Shift-G" type="button"
-                                    className="btn btn-default btn-lg margin-right-btn"
-                                    onClick={this.fastForwardToEnd}>
-                                <i className="fa fa-fast-forward" aria-hidden="true" />
-                            </button>
-                            <button title="Speed /2 - Hotkey: {" type="button"
-                                    className="btn btn-default btn-lg" onClick={this.speedDown}>
-                                /2
-                            </button>
-                            <button title="Reset Speed - Hotkey: Backspace" type="button"
-                                    className="btn btn-default btn-lg" onClick={this.speedReset}>
-                                1:1
-                            </button>
-                            <button title="Speed x2 - Hotkey: }" type="button"
-                                    className="btn btn-default btn-lg margin-right-btn"
-                                    onClick={this.speedUp}>
-                                x2
-                            </button>
-                            <span>{speedStr}</span>
-                            <span style={to_right}>
-                                <button title="Drag'n'Pan" type="button" className="btn btn-default btn-lg"
-                                    onClick={this.dragPan}>
-                                    <i className={"fa fa-" + (this.state.drag_pan ? "hand-rock-o" : "hand-paper-o")}
-                                        aria-hidden="true" /></button>
-                                <button title="Zoom In - Hotkey: =" type="button" className="btn btn-default btn-lg"
-                                    onClick={this.zoomIn} disabled={this.state.term_zoom_max}>
-                                    <i className="fa fa-search-plus" aria-hidden="true" /></button>
-                                <button title="Fit To - Hotkey: Z" type="button" className="btn btn-default btn-lg"
-                                    onClick={this.fitTo}><i className="fa fa-expand" aria-hidden="true" /></button>
-                                <button title="Zoom Out - Hotkey: -" type="button" className="btn btn-default btn-lg"
-                                    onClick={this.zoomOut} disabled={this.state.term_zoom_min}>
-                                    <i className="fa fa-search-minus" aria-hidden="true" /></button>
-                            </span>
-                            <div style={progressbar_style}>
-                                <ProgressBar length={this.buf.pos}
-                                    mark={currentTsPost(this.state.currentTsPost, this.buf.pos)}
-                                    fastForwardFunc={this.fastForwardToTS} />
-                            </div>
-                        </div>
-                        {error}
-                    </div>
+                <div id="recording-wrap">
+                <div id="input-player-wrap" className="col-md-3">
                     <InputPlayer input={this.state.input} />
                 </div>
+                <div className="col-md-6 player-wrap">
+                        <div ref="wrapper" className="panel panel-default">
+                            <div className="panel-heading">
+                                <span>{this.state.title}</span>
+                            </div>
+                            <div className="panel-body">
+                                <div className={(this.state.drag_pan ? "dragnpan" : "")} style={scrollwrap} ref="scrollwrap">
+                                    <div ref="term" className="console-ct" key={this.state.term} style={style} />
+                                </div>
+                            </div>
+                            <div className="panel-footer">
+                                <button title="Play/Pause - Hotkey: p" type="button" ref="playbtn"
+                                        className="btn btn-default btn-lg margin-right-btn play-btn"
+                                        onClick={this.playPauseToggle}>
+                                    <i className={"fa fa-" + (this.state.paused ? "play" : "pause")}
+                                       aria-hidden="true" />
+                                </button>
+                                <button title="Skip Frame - Hotkey: ." type="button"
+                                        className="btn btn-default btn-lg margin-right-btn"
+                                        onClick={this.skipFrame}>
+                                    <i className="fa fa-step-forward" aria-hidden="true" />
+                                </button>
+                                <button title="Restart Playback - Hotkey: Shift-R" type="button"
+                                        className="btn btn-default btn-lg" onClick={this.rewindToStart}>
+                                    <i className="fa fa-fast-backward" aria-hidden="true" />
+                                </button>
+                                <button title="Fast-forward to end - Hotkey: Shift-G" type="button"
+                                        className="btn btn-default btn-lg margin-right-btn"
+                                        onClick={this.fastForwardToEnd}>
+                                    <i className="fa fa-fast-forward" aria-hidden="true" />
+                                </button>
+                                <button title="Speed /2 - Hotkey: {" type="button"
+                                        className="btn btn-default btn-lg" onClick={this.speedDown}>
+                                    /2
+                                </button>
+                                <button title="Reset Speed - Hotkey: Backspace" type="button"
+                                        className="btn btn-default btn-lg" onClick={this.speedReset}>
+                                    1:1
+                                </button>
+                                <button title="Speed x2 - Hotkey: }" type="button"
+                                        className="btn btn-default btn-lg margin-right-btn"
+                                        onClick={this.speedUp}>
+                                    x2
+                                </button>
+                                <span>{speedStr}</span>
+                                <span style={to_right}>
+                                    <button title="Drag'n'Pan" type="button" className="btn btn-default btn-lg"
+                                        onClick={this.dragPan}>
+                                        <i className={"fa fa-" + (this.state.drag_pan ? "hand-rock-o" : "hand-paper-o")}
+                                            aria-hidden="true" /></button>
+                                    <button title="Zoom In - Hotkey: =" type="button" className="btn btn-default btn-lg"
+                                        onClick={this.zoomIn} disabled={this.state.term_zoom_max}>
+                                        <i className="fa fa-search-plus" aria-hidden="true" /></button>
+                                    <button title="Fit To - Hotkey: Z" type="button" className="btn btn-default btn-lg"
+                                        onClick={this.fitTo}><i className="fa fa-expand" aria-hidden="true" /></button>
+                                    <button title="Zoom Out - Hotkey: -" type="button" className="btn btn-default btn-lg"
+                                        onClick={this.zoomOut} disabled={this.state.term_zoom_min}>
+                                        <i className="fa fa-search-minus" aria-hidden="true" /></button>
+                                </span>
+                                <div style={progressbar_style}>
+                                    <ProgressBar length={this.buf.pos}
+                                        mark={currentTsPost(this.state.currentTsPost, this.buf.pos)}
+                                        fastForwardFunc={this.fastForwardToTS} />
+                                </div>
+                            </div>
+                            {error}
+                        </div>
+                    </div>
+                </div>
             );
         }
 
diff --git a/src/recordings.css b/src/recordings.css
index f7d6965..80b7be5 100644
--- a/src/recordings.css
+++ b/src/recordings.css
@@ -377,8 +377,26 @@ table.listing-ct > thead th:last-child, tr.listing-ct-item td:last-child {
     margin-bottom: 0;
 }
 
+#recording-wrap {
+    height: 100%;
+}
+
+#input-textarea {
+    width: 100%;
+    heigth: 100%;
+    font-family: monospace;
+}
+
+#input-player-wrap {
+    height: 100%;
+}
+
 .logs-view-log-time {
     display: inline-block;
     width: 150px;
     vertical-align: middle;
 }
+
+#input-player textarea{
+    resize: none;
+}
diff --git a/src/recordings.jsx b/src/recordings.jsx
index 25c7e79..748c6d8 100644
--- a/src/recordings.jsx
+++ b/src/recordings.jsx
@@ -495,7 +495,7 @@
                             </div>
                         </div>
                         <div className="row">
-                            <div className="col-md-6">
+                            <div className="col-md-3">
                                 <div className="panel panel-default">
                                     <div className="panel-heading">
                                         <span>{_("Recording")}</span>
@@ -539,9 +539,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div className="col-md-6 player-wrap">
-                                {player}
-                            </div>
+                            {player}
                         </div>
                     </div>
                 );