diff --git a/lib/gui/forms/options-form/options-project.tsx b/lib/gui/forms/options-form/options-project.tsx
index 2c3acd3..5998469 100644
--- a/lib/gui/forms/options-form/options-project.tsx
+++ b/lib/gui/forms/options-form/options-project.tsx
@@ -5,6 +5,7 @@ module Animate {
 
     export interface IOptionsProjectState {
         infoServerMsg?: string;
+        imageUploadErr?: string;
         loading?: boolean;
         error?: boolean;
     }
@@ -24,10 +25,36 @@ module Animate {
             this.state = {
                 loading: false,
                 error: false,
-                infoServerMsg: null
+                infoServerMsg: null,
+                imageUploadErr: null
             };
         }
 
+        /**
+         * Sets the project image url
+         * @param {Engine.IFile} file
+         */
+        setProjectImageUrl(file: Engine.IFile) {
+
+            var project = User.get.project;
+            this.setState({
+                loading: true,
+                imageUploadErr: null
+            });
+
+            project.updateDetails({ image: (file ? file.url : null) }).then( () => {
+                this.setState({
+                    loading: false
+                });
+
+            }).catch( (err: Error) => {
+                this.setState({
+                    loading: false,
+                    imageUploadErr: err.message
+                });
+            });
+        }
+
         /**
          * Attempts to update the project
          * @param {any} project details
@@ -119,8 +146,9 @@ module Animate {
                             <br/><br/><span className="nb">Your application must have an image in order to be shown in the gallery.</span><br/><br/>
                             Your project image should be either a .png or .jpg image that is 200 by 200 pixels.
                         </div>
+                        {( this.state.imageUploadErr ? <Attention allowClose={false} mode={AttentionType.ERROR}>{this.state.imageUploadErr}</Attention> : null )}
                     </div>
-                    <ImageUploader label="Upload Image" src={project.image} />
+                    <ImageUploader label="Upload Image" src={project.image} onImage={(f) => {this.setProjectImageUrl(f); }} />
                     <div className="fix"></div>
                 </Group>
             </div>
diff --git a/lib/gui/forms/options-form/options-user.tsx b/lib/gui/forms/options-form/options-user.tsx
index 58b3a60..0ad5cb0 100644
--- a/lib/gui/forms/options-form/options-user.tsx
+++ b/lib/gui/forms/options-form/options-user.tsx
@@ -4,16 +4,15 @@ module Animate {
     }
 
     export interface IOptionsUserStats {
-        loadingPercent: number;
-        errorMsgUserImg: string;
+        bioUpdateErr?: string;
+        imageUploadErr?: string;
+        loading?: boolean;
     }
 
-
-
 	/**
 	 * A component for editing the user properties
 	 */
-	export class OptionsUser extends React.Component<IOptionsUserProps, any> {
+	export class OptionsUser extends React.Component<IOptionsUserProps, IOptionsUserStats> {
 		static defaultProps: IOptionsUserProps = {
 		}
 
@@ -23,62 +22,110 @@ module Animate {
         constructor( props : IOptionsUserProps) {
             super(props);
             this.state = {
-                loadingPercent: 0,
-                errorMsgUserImg: null
+                imageUploadErr: null,
+                bioUpdateErr: null,
+                loading: false
             };
         }
 
+        /**
+		 * Updates the user bio information
+		 * @param {string} bio The new bio data
+		 */
+        updateBio(bio:string) {
+            this.setState({
+                loading: true,
+                bioUpdateErr: null
+            });
+
+            User.get.updateDetails( { bio : bio } as Engine.IUserMeta ).catch( (err: Error) => {
+                this.setState({
+                    bioUpdateErr: err.message
+                });
+            }).then( () => {
+                this.setState({
+                    loading: false
+                });
+            });
+        }
+
+        /**
+         * Sets the user's avatar image
+         */
+        setAvatarUrl(file) {
+
+            this.setState({
+                loading: true,
+                imageUploadErr: null
+            });
+
+             User.get.updateDetails({ image: (file ? file.url : null) }).then( () => {
+                this.setState({
+                    loading: false
+                });
+
+            }).catch( (err: Error) => {
+                this.setState({
+                    loading: false,
+                    imageUploadErr: err.message
+                });
+            });
+        }
+
         /**
          * Draws the options JSX
          * @returns {JSX.Element}
          */
         render() : JSX.Element {
-            let user = User.get;
+            let user = User.get.entry;
+            let loadingSymbol : JSX.Element;
+
+            if (this.state.loading)
+                loadingSymbol = <i className="fa fa-cog fa-spin fa-3x fa-fw"></i>;
 
             return <div id='options-user'>
                 <Group label="Details">
-                    <div className="field-option">
-                        <div className="label">Username: <span className="soft-text">{user.entry.username}</span></div>
-                        <div className="fix"></div>
+                    <div className="tr">
+                        <div className="td">Username:</div>
+                        <div className="td">{user.username}</div>
                     </div>
-                    <div className="field-option">
-                        <div className="label">Email: <span className="soft-text">{user.entry.email}</span></div>
-                        <div className="fix"></div>
+                    <div className="tr">
+                        <div className="td">Email:</div>
+                        <div className="td">{user.email}</div>
                     </div>
-                    <div className="field-option">
-                        <div className="label">Joined On: <span className="soft-text">{new Date(user.entry.createdOn).toLocaleDateString()} {new Date(user.entry.createdOn).toLocaleTimeString()}</span></div>
-                        <div className="fix"></div>
+                    <div className="tr">
+                        <div className="td">Joined On:</div>
+                        <div className="td">{new Date(user.createdOn).toLocaleDateString()} {new Date(user.createdOn).toLocaleTimeString()}</div>
                     </div>
-                    <div className="field-option">
-                        <div className="label">Joined On: <span className="soft-text">{new Date(user.entry.lastLoggedIn).toLocaleDateString()} {new Date(user.entry.lastLoggedIn).toLocaleTimeString()}</span></div>
-                        <div className="fix"></div>
+                    <div className="tr">
+                        <div className="td">Last Logged In:</div>
+                        <div className="td">{new Date(user.lastLoggedIn).toLocaleDateString()} {new Date(user.lastLoggedIn).toLocaleTimeString()}</div>
                     </div>
                 </Group>
                 <Group label="Avatar">
-                    <div className="img-preview unselectable">
-                        <div className="preview-child">
-                            <div className="background-tiles inner ng-scope">
-                                <img className="vert-align" en-src="( Animate.User.get.meta.image && Animate.User.get.meta.image.trim() != '' ? Animate.User.get.meta.image : './media/appling.png')" />
-                                <div className="div-center"></div>
-                            </div>
-                        </div>
-                        <div className="item-name reg-gradient" id="upload-projet-img" en-click="ctrl.pickAvatar()"><div className="cross"></div>Upload Image {this.state.loadingPercent}</div>
-                    </div>
+                    <ImageUploader label="Upload Image" src={user.meta ? user.meta.image : null} onImage={(f) => {this.setAvatarUrl(f); }} />
                     <div className="img-data">
                         <div className="info">Your avatar is the image others see you as. Use the upload button to change your profile picture.</div>
+                        {( this.state.imageUploadErr ? <Attention allowClose={false} mode={AttentionType.ERROR}>{this.state.imageUploadErr}</Attention> : null )}
                     </div>
-                    <div className="error" en-show="ctrl.$errorMsgUserImg && ctrl.$errorMsgUserImg != ''">{this.state.errorMsgUserImg}</div>
                     <div className="fix"></div>
                 </Group>
                 <Group label="User Information">
-                    <div className="field-option">
-                        <div className="label">Bio</div>
-                        <textarea id="meta-bio" className="background-view-light">{user.meta.bio}</textarea>
-                        <div className="soft-text info">Use the above pad to write about yourself. This will show up on Webinate next to your projects.</div>
-                        <div className="fix"></div>
-                    </div>
-                    <div className="error" en-show="ctrl.$errorMsgImg != ''">{this.state.errorMsgUserImg}</div>
-                    <div className="button reg-gradient curve-small"  en-click="ctrl.updateBio(jQuery('#meta-bio').val());" en-className="{ disabled : ctrl.$loading }">Update Information</div>
+                    <h3>Bio</h3>
+                    <textarea id="meta-bio" className="background-view-light">{user.meta ? user.meta.bio : null}</textarea>
+                    <div className="info">Use the above pad to write about yourself. This will show up on Webinate next to your projects.</div>
+
+                    {( this.state.bioUpdateErr ? <Attention mode={AttentionType.ERROR} allowClose={false}>{this.state.bioUpdateErr}</Attention> : null )}
+
+                    <button className="button reg-gradient curve-small" disabled={this.state.loading} onClick={(e) => {
+                        e.preventDefault();
+                        this.updateBio( jQuery('#meta-bio').val() );
+                    }}>
+                        Update Information
+                    </button>
+
+                    {loadingSymbol}
+                    <div className="fix" />
                 </Group>
             </div>
         }
diff --git a/lib/gui/forms/options-form/style.scss b/lib/gui/forms/options-form/style.scss
index 0459532..efb1ebb 100644
--- a/lib/gui/forms/options-form/style.scss
+++ b/lib/gui/forms/options-form/style.scss
@@ -19,7 +19,6 @@
     }
 
     button {
-        margin: 10px 0 0 0;
         float: right;
     }
 
@@ -34,6 +33,11 @@
         display: inline-block;
     }
 
+    .attention {
+        margin: 0 0 10px 0;
+    }
+
+
     /**
     *  OPTIONS WINDOW - PROJECT
     *  =========================
@@ -54,50 +58,6 @@
         color:#000;
     }
 
-
-
-    // .field-option .label {
-    //     font-weight: bold;
-    //     margin: 0 0 5px 5px;
-    // }
-    // .field-option .dropdown {
-    //     line-height: 26px;
-    // }
-    // .field-option input, .field-option textarea {
-    //     display:block;
-    //     padding:10px;
-    //     width:100%;
-    // }
-    // .build-options-form .button{
-    //     min-width:150px;
-    //     padding: 10px 15px;
-    // }
-
-    // /**
-    // *  OPTIONS WINDOW - PROJECT
-    // *  =========================
-    // */
-    // #options-project .cross {
-    //     width:30px;
-    //     height:30px;
-    //     margin: 0 10px;
-    // }
-    // #options-project .img-preview {
-    //     position:relative;
-    //     overflow:hidden;
-    //     width: 200px;
-    //     height: 200px;
-    //     float: left;
-    //     margin-right:10px;
-    // }
-    // #upload-projet-img {
-    //     cursor:pointer;
-    // }
-    // #options-project .error {
-    //     margin: 10px 0;
-    //     font-weight: bold;
-    // }
-
     /**
     *  OPTIONS WINDOW - BUILD
     *  =========================
@@ -109,28 +69,26 @@
         display: inline-block;
     }
 
+
     /**
     *  OPTIONS WINDOW - USER
     *  =========================
     */
-    #options-user .img-preview {
-        position:relative;
-        overflow:hidden;
-        width: 200px;
-        height: 200px;
-        float: left;
-        margin-right:10px;
-    }
-    #options-user .error {
-        margin: 10px 0 0 0;
-        font-weight: bold;
+    #options-user .group .group-content {
+        display: table;
+        width:100%;
+        .tr {
+            display: table-row;
+        }
+        .td {
+            display: table-cell;
+             &:first-child {
+                font-weight: bold;
+                padding: 5px 0;
+            }
+            &:last-child {
+                text-align: right;
+            }
+        }
     }
-    #options-user .soft-text {
-        font-weight: normal;
-        float:right;
-    }
-    #options-user .field-option {
-        margin:10px 0px;
-    }
-
 }
\ No newline at end of file