diff --git a/src/config.jsx b/src/config.jsx
index 6367663..e3fbc6a 100644
--- a/src/config.jsx
+++ b/src/config.jsx
@@ -32,36 +32,72 @@
             this.handleInputChange = this.handleInputChange.bind(this);
             this.handleSubmit = this.handleSubmit.bind(this);
             this.setConfig = this.setConfig.bind(this);
-            this.prepareConfig = this.prepareConfig.bind(this);
             this.fileReadFailed = this.fileReadFailed.bind(this);
+            this.readConfig = this.readConfig.bind(this);
             this.file = null;
+            this.config = null;
             this.state = {
-                config: null,
-                file_error: null,
+                config_loaded: false,
+                file_error: false,
                 submitting: "none",
+                shell: "",
+                notice: "",
+                latency: "",
+                payload: "",
+                log_input: false,
+                log_output: true,
+                log_window: true,
+                limit_rate: "",
+                limit_burst: "",
+                limit_action: "",
+                file_path: "",
+                syslog_facility: "",
+                syslog_priority: "",
+                journal_augment: "",
+                journal_priority: "",
+                writer: "",
             };
         }
 
         handleInputChange(e) {
             const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
             const name = e.target.name;
-            const config = this.state.config;
-            config[name] = value;
-
-            this.forceUpdate();
-        }
-
-        prepareConfig() {
-            this.state.config.latency = parseInt(this.state.config.latency);
-            if (this.state.config.input === true) {
-                // log.input
-            }
+            const state = {};
+            state[name] = value;
+            this.setState(state);
         }
 
         handleSubmit(event) {
             this.setState({submitting:"block"});
-            this.prepareConfig();
-            this.file.replace(this.state.config).done(() => {
+            let config = {
+                shell:  this.state.shell,
+                notice:  this.state.notice,
+                latency:  parseInt(this.state.latency),
+                payload:  parseInt(this.state.payload),
+                log:  {
+                    input:  this.state.log_input,
+                    output:  this.state.log_output,
+                    window:  this.state.log_window,
+                },
+                limit:  {
+                    rate:  parseInt(this.state.limit_rate),
+                    burst:  parseInt(this.state.limit_burst),
+                    action:  this.state.limit_action,
+                },
+                file:  {
+                    path:  this.state.file_path,
+                },
+                syslog:  {
+                    facility:  this.state.syslog_facility,
+                    priority:  this.state.syslog_priority,
+                },
+                journal:  {
+                    priority:  this.state.journal_priority,
+                    augment:  this.state.journal_augment
+                },
+                writer:  this.state.writer
+            };
+            this.file.replace(config).done(() => {
                 this.setState({submitting:"none"});
             })
                     .fail((error) => {
@@ -71,15 +107,47 @@
         }
 
         setConfig(data) {
-            this.setState({config: data});
+            delete data.configuration;
+            delete data.args;
+            var flattenObject = function(ob) {
+                var toReturn = {};
+
+                for (var i in ob) {
+                    if (!ob.hasOwnProperty(i)) continue;
+
+                    if ((typeof ob[i]) == 'object') {
+                        var flatObject = flattenObject(ob[i]);
+                        for (var x in flatObject) {
+                            if (!flatObject.hasOwnProperty(x)) continue;
+
+                            toReturn[i + '_' + x] = flatObject[x];
+                        }
+                    } else {
+                        toReturn[i] = ob[i];
+                    }
+                }
+                return toReturn;
+            };
+            let state = flattenObject(data);
+            state.config_loaded = true;
+            this.setState(state);
         }
 
-        fileReadFailed(reason) {
-            console.log(reason);
-            this.setState({file_error: reason});
+        getConfig() {
+            let proc = cockpit.spawn(["tlog-rec-session", "--configuration"]);
+
+            proc.stream((data) => {
+                this.setConfig(json.parse(data, null, true));
+                proc.close();
+            });
+
+            proc.fail((fail) => {
+                console.log(fail);
+                this.readConfig();
+            });
         }
 
-        componentDidMount() {
+        readConfig() {
             let parseFunc = function(data) {
                 return json.parse(data, null, true);
             };
@@ -95,27 +163,37 @@
 
             this.file = cockpit.file("/etc/tlog/tlog-rec-session.conf", {
                 syntax: syntax_object,
-                // binary: boolean,
-                // max_read_size: int,
                 superuser: true,
-                // host: string
             });
-
+            /*
             let promise = this.file.read();
 
             promise.done((data) => {
                 if (data === null) {
                     this.fileReadFailed();
-                    return;
                 }
-                this.setConfig(data);
             }).fail((data) => {
                 this.fileReadFailed(data);
             });
+            */
+        }
+
+        fileReadFailed(reason) {
+            console.log(reason);
+            this.setState({file_error: reason});
+        }
+
+        componentWillMount() {
+            this.getConfig();
+            this.readConfig();
         }
 
         render() {
-            if (this.state.config != null && this.state.file_error === null) {
+            if (this.state.config_loaded === false && this.state.file_error === false) {
+                return (
+                    <div>Loading</div>
+                );
+            } else if (this.state.config_loaded === true && this.state.file_error === false) {
                 return (
                     <form onSubmit={this.handleSubmit}>
                         <table className="form-table-ct col-sm-3">
@@ -123,71 +201,68 @@
                                 <tr>
                                     <td className="top"><label htmlFor="shell" className="control-label">Shell</label></td>
                                     <td>
-                                        <input type="text" id="shell" name="shell" value={this.state.config.shell}
+                                        <input type="text" id="shell" name="shell" value={this.state.shell}
                                            className="form-control" onChange={this.handleInputChange} />
                                     </td>
                                 </tr>
                                 <tr>
                                     <td className="top"><label htmlFor="notice" className="control-label">Notice</label></td>
                                     <td>
-                                        <input type="text" id="notice" name="notice" value={this.state.config.notice}
+                                        <input type="text" id="notice" name="notice" value={this.state.notice}
                                            className="form-control" onChange={this.handleInputChange} />
                                     </td>
                                 </tr>
                                 <tr>
                                     <td className="top"><label htmlFor="latency" className="control-label">Latency</label></td>
                                     <td>
-                                        <input type="text" id="latency" name="latency" value={this.state.config.latency}
+                                        <input type="number" step="1" id="latency" name="latency" value={this.state.latency}
                                            className="form-control" onChange={this.handleInputChange} />
                                     </td>
                                 </tr>
                                 <tr>
                                     <td className="top"><label htmlFor="latency" className="control-label">Payload Size, bytes</label></td>
                                     <td>
-                                        <input type="text" id="payload" name="payload" value={this.state.config.payload}
+                                        <input type="number" step="1" id="payload" name="payload" value={this.state.payload}
                                            className="form-control" onChange={this.handleInputChange} />
                                     </td>
                                 </tr>
                                 <tr>
-                                    <td className="top"><label htmlFor="input" className="control-label">Log User's Input</label></td>
+                                    <td className="top"><label htmlFor="log_input" className="control-label">Log User's Input</label></td>
                                     <td>
-                                        <input type="checkbox" id="input" name="input" defaultChecked={this.state.config.log.input}
-                                           onChange={this.handleInputChange} />
+                                        <input type="checkbox" id="log_input" name="log_input" defaultChecked={this.state.log_input} onChange={this.handleInputChange} />
                                     </td>
                                 </tr>
                                 <tr>
-                                    <td className="top"><label htmlFor="output" className="control-label">Log User's Output</label></td>
+                                    <td className="top"><label htmlFor="log_output" className="control-label">Log User's Output</label></td>
                                     <td>
-                                        <input type="checkbox" id="output" name="output" defaultChecked={this.state.config.log.output}
-                                           onChange={this.handleInputChange} />
+                                        <input type="checkbox" id="log_output" name="log_output" defaultChecked={this.state.log_output} onChange={this.handleInputChange} />
                                     </td>
                                 </tr>
                                 <tr>
-                                    <td className="top"><label htmlFor="window" className="control-label">Log Window Resize</label></td>
+                                    <td className="top"><label htmlFor="log_window" className="control-label">Log Window Resize</label></td>
                                     <td>
-                                        <input type="checkbox" id="window" name="window" defaultChecked={this.state.config.log.window}
-                                           onChange={this.handleInputChange} />
+                                        <input type="checkbox" id="log_window" name="log_window" defaultChecked={this.state.log_window} onChange={this.handleInputChange} />
                                     </td>
                                 </tr>
 
                                 <tr>
-                                    <td className="top"><label htmlFor="rate" className="control-label">Limit Rate, bytes/sec</label></td>
+                                    <td className="top"><label htmlFor="limit_rate" className="control-label">Limit Rate, bytes/sec</label></td>
                                     <td>
-                                        <input type="text" id="rate" name="rate" value={this.state.config.limit.rate}
+                                        <input type="number" step="1" id="limit_rate" name="limit_rate" value={this.state.limit_rate}
                                            className="form-control" onChange={this.handleInputChange} />
                                     </td>
                                 </tr>
                                 <tr>
-                                    <td className="top"><label htmlFor="burst" className="control-label">Burst, bytes</label></td>
+                                    <td className="top"><label htmlFor="limit_burst" className="control-label">Burst, bytes</label></td>
                                     <td>
-                                        <input type="text" id="burst" name="burst" value={this.state.config.limit.burst}
+                                        <input type="number" step="1" id="limit_burst" name="limit_burst" value={this.state.limit_burst}
                                            className="form-control" onChange={this.handleInputChange} />
                                     </td>
                                 </tr>
                                 <tr>
-                                    <td className="top"><label htmlFor="action" className="control-label">Logging Limit Action</label></td>
+                                    <td className="top"><label htmlFor="limit_action" className="control-label">Logging Limit Action</label></td>
                                     <td>
-                                        <select name="action" id="action" onChange={this.handleInputChange} value={this.state.config.limit.action}>
+                                        <select name="limit_action" id="limit_action" onChange={this.handleInputChange} value={this.state.limit_action} className="form-control">
                                             <option value="" />
                                             <option value="pass">Pass</option>
                                             <option value="delay">Delay</option>
@@ -196,59 +271,62 @@
                                     </td>
                                 </tr>
                                 <tr>
-                                    <td className="top"><label htmlFor="path" className="control-label">File Path</label></td>
+                                    <td className="top"><label htmlFor="file_path" className="control-label">File Path</label></td>
                                     <td>
-                                        <input type="text" id="path" name="path" defaultChecked={this.state.config.file.path}
+                                        <input type="text" id="file_path" name="file_path" defaultChecked={this.state.file_path}
                                            className="form-control" onChange={this.handleInputChange} />
                                     </td>
                                 </tr>
                                 <tr>
-                                    <td className="top"><label htmlFor="facility" className="control-label">Syslog Facility</label></td>
+                                    <td className="top"><label htmlFor="syslog_facility" className="control-label">Syslog Facility</label></td>
                                     <td>
-                                        <input type="text" id="facility" name="facility" value={this.state.config.syslog.facility}
+                                        <input type="text" id="syslog_facility" name="syslog_facility" value={this.state.syslog_facility}
                                            className="form-control" onChange={this.handleInputChange} />
                                     </td>
                                 </tr>
                                 <tr>
                                     <td className="top"><label htmlFor="syslog_priority" className="control-label">Syslog Priority</label></td>
                                     <td>
-                                        <input type="text" id="syslog_priority" name="syslog_priority" value={this.state.config.syslog.priority}
-                                           className="form-control" onChange={this.handleInputChange} />
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td className="top"><label htmlFor="path" className="control-label">Journal Priority</label></td>
-                                    <td>
-                                        <select name="journal_priority" id="journal_priority" onChange={this.handleInputChange} value={this.state.config.journal.priority}>
+                                        <select name="syslog_priority" id="syslog_priority" onChange={this.handleInputChange} value={this.state.syslog_priority} className="form-control">
                                             <option value="" />
                                             <option value="info">Info</option>
                                         </select>
                                     </td>
                                 </tr>
                                 <tr>
-                                    <td className="top"><label htmlFor="path" className="control-label">Journal Augment</label></td>
+                                    <td className="top"><label htmlFor="journal_priority" className="control-label">Journal Priority</label></td>
                                     <td>
-                                        <input type="checkbox" id="augment" name="augment" defaultChecked={this.state.config.journal.augment}
-                                           onChange={this.handleInputChange} />
+                                        <select name="journal_priority" id="journal_priority" onChange={this.handleInputChange} value={this.state.journal_priority} className="form-control">
+                                            <option value="" />
+                                            <option value="info">Info</option>
+                                        </select>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td className="top"><label htmlFor="journal_augment" className="control-label">Journal Augment</label></td>
+                                    <td>
+                                        <input type="checkbox" id="journal_augment" name="journal_augment" defaultChecked={this.state.journal_augment} onChange={this.handleInputChange} />
                                     </td>
 
                                 </tr>
                                 <tr>
-                                    <td className="top"><label htmlFor="path" className="control-label">Writer</label></td>
+                                    <td className="top"><label htmlFor="writer" className="control-label">Writer</label></td>
                                     <td>
-                                        <select name="writer" id="writer" onChange={this.handleInputChange} value={this.state.config.writer}>
+                                        <select name="writer" id="writer" onChange={this.handleInputChange} value={this.state.writer} className="form-control">
                                             <option value="" />
                                             <option value="journal">Journal</option>
                                             <option value="syslog">Syslog</option>
                                             <option value="file">File</option>
                                         </select>
+
                                     </td>
                                 </tr>
                                 <tr>
-                                    <td className="top" />
-                                    <td>
+                                    <td className="top">
                                         <button className="btn btn-default" type="submit">Save</button>
-                                        <div className="spinner spinner-sm" style={{display: this.state.submitting}} />
+                                    </td>
+                                    <td>
+                                        <span style={{display: this.state.submitting}}>Saving...</span>
                                     </td>
                                 </tr>
                             </tbody>
@@ -292,11 +370,12 @@
         }
 
         setConfig(data) {
+            console.log(data);
             const config = {...data['session_recording']};
             this.setState(config);
         }
 
-        componentDidMount() {
+        componentWillMount() {
             let syntax_object = {
                 parse:     ini.parse,
                 stringify: ini.stringify
@@ -319,10 +398,11 @@
         handleSubmit(e) {
             this.setState({submitting:"block"});
             const obj = {};
-            obj.users = this.state.users;
-            obj.groups = this.state.groups;
-            obj.scope = this.state.scope;
-            obj['session_recording'] = this.state;
+            obj.session_recording = {};
+            obj.session_recording.scope = this.state.scope;
+            obj.session_recording.users = this.state.users;
+            obj.session_recording.groups = this.state.groups;
+
             let _this = this;
             this.file.replace(obj).done(function() {
                 _this.setState({submitting:"none"});
@@ -350,6 +430,7 @@
                                     </select>
                                 </td>
                             </tr>
+                            {this.state.scope === "some" &&
                             <tr>
                                 <td><label htmlFor="users">Users</label></td>
                                 <td>
@@ -358,19 +439,21 @@
                                        className="form-control" onChange={this.handleInputChange} />
                                 </td>
                             </tr>
+                            }
+                            {this.state.scope === "some" &&
                             <tr>
                                 <td><label htmlFor="groups">Groups</label></td>
                                 <td>
                                     <input type="text" id="groups" name="groups"
-                                       value={this.state.groups}
-                                       className="form-control" onChange={this.handleInputChange} />
+                                           value={this.state.groups}
+                                           className="form-control" onChange={this.handleInputChange} />
                                 </td>
                             </tr>
+                            }
                             <tr>
-                                <td />
+                                <td><button className="btn btn-default" type="submit">Save</button></td>
                                 <td>
-                                    <button className="btn btn-default" type="submit">Save</button>
-                                    <span className="spinner spinner-sm" style={{display: this.state.submitting}} />
+                                    <span style={{display: this.state.submitting}}>Saving...</span>
                                 </td>
                             </tr>
                         </tbody>