diff --git a/client/modules/IDE/actions/preferences.js b/client/modules/IDE/actions/preferences.js
index 56527720..2fb93ee2 100644
--- a/client/modules/IDE/actions/preferences.js
+++ b/client/modules/IDE/actions/preferences.js
@@ -1,30 +1,84 @@
 import * as ActionTypes from '../../../constants';
-// import axios from 'axios';
+import axios from 'axios';
 
-// const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
+const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
+
+function updatePreferences(formParams, dispatch) {
+  axios.put(`${ROOT_URL}/preferences`, formParams, { withCredentials: true })
+    .then(() => {
+    })
+    .catch((response) => dispatch({
+      type: ActionTypes.ERROR,
+      error: response.data
+    }));
+}
 
 export function setFontSize(value) {
-  return {
-    type: ActionTypes.SET_FONT_SIZE,
-    value
+  return (dispatch, getState) => { // eslint-disable-line
+    dispatch({
+      type: ActionTypes.SET_FONT_SIZE,
+      value
+    });
+    const state = getState();
+    if (state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          textSize: value
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
   };
 }
 
 export function setIndentation(value) {
-  return {
-    type: ActionTypes.SET_INDENTATION,
-    value
+  return (dispatch, getState) => {
+    dispatch({
+      type: ActionTypes.SET_INDENTATION,
+      value
+    });
+    const state = getState();
+    if (state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          indentationAmount: value
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
   };
 }
 
 export function indentWithTab() {
-  return {
-    type: ActionTypes.INDENT_WITH_TAB
+  return (dispatch, getState) => {
+    dispatch({
+      type: ActionTypes.INDENT_WITH_TAB
+    });
+    const state = getState();
+    if (state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          isTabIndent: true
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
   };
 }
 
 export function indentWithSpace() {
-  return {
-    type: ActionTypes.INDENT_WITH_SPACE
+  return (dispatch, getState) => {
+    dispatch({
+      type: ActionTypes.INDENT_WITH_SPACE
+    });
+    const state = getState();
+    if (state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          isTabIndent: false
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
   };
 }
diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js
index 84412e7c..2eb6baba 100644
--- a/client/modules/IDE/components/Preferences.js
+++ b/client/modules/IDE/components/Preferences.js
@@ -1,9 +1,9 @@
 import React, { PropTypes } from 'react';
 import InlineSVG from 'react-inlinesvg';
 import classNames from 'classnames';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
-import * as PreferencesActions from '../actions/preferences';
+// import { bindActionCreators } from 'redux';
+// import { connect } from 'react-redux';
+// import * as PreferencesActions from '../actions/preferences';
 
 const exitUrl = require('../../../images/exit.svg');
 const plusUrl = require('../../../images/plus.svg');
@@ -111,16 +111,6 @@ class Preferences extends React.Component {
   }
 }
 
-function mapStateToProps(state) {
-  return {
-    ...state.preferences
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators(PreferencesActions, dispatch);
-}
-
 Preferences.propTypes = {
   isVisible: PropTypes.bool.isRequired,
   closePreferences: PropTypes.func.isRequired,
@@ -133,4 +123,4 @@ Preferences.propTypes = {
   setFontSize: PropTypes.func.isRequired
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(Preferences);
+export default Preferences;
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index 29e3aa36..5f5f09de 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/client/modules/IDE/pages/IDEView.js
@@ -12,6 +12,7 @@ import { connect } from 'react-redux';
 import * as FileActions from '../actions/files';
 import * as IDEActions from '../actions/ide';
 import * as ProjectActions from '../actions/project';
+import * as PreferencesActions from '../actions/preferences';
 import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files';
 
 class IDEView extends React.Component {
@@ -60,6 +61,13 @@ class IDEView extends React.Component {
         <Preferences
           isVisible={this.props.ide.preferencesIsVisible}
           closePreferences={this.props.closePreferences}
+          fontSize={this.props.preferences.fontSize}
+          indentationAmount={this.props.preferences.indentationAmount}
+          setIndentation={this.props.setIndentation}
+          indentWithSpace={this.props.indentWithSpace}
+          indentWithTab={this.props.indentWithTab}
+          isTabIndent={this.props.preferences.isTabIndent}
+          setFontSize={this.props.setFontSize}
         />
         <div className="editor-preview-container">
           <Sidebar
@@ -158,6 +166,10 @@ IDEView.propTypes = {
     isTabIndent: PropTypes.bool.isRequired
   }).isRequired,
   closePreferences: PropTypes.func.isRequired,
+  setFontSize: PropTypes.func.isRequired,
+  setIndentation: PropTypes.func.isRequired,
+  indentWithTab: PropTypes.func.isRequired,
+  indentWithSpace: PropTypes.func.isRequired,
   files: PropTypes.array.isRequired,
   updateFileContent: PropTypes.func.isRequired,
   selectedFile: PropTypes.shape({
@@ -203,7 +215,8 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators(Object.assign({},
     FileActions,
     ProjectActions,
-    IDEActions),
+    IDEActions,
+    PreferencesActions),
   dispatch);
 }
 
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index fd6a3cf6..ca877fb0 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -69,6 +69,7 @@
 .preference__vertical-list {
 	display: flex;
 	flex-direction: column;
+	width: #{90 / $base-font-size}rem;
 }
 
 .preference__option {
diff --git a/server/controllers/user.controller.js b/server/controllers/user.controller.js
index 209e254b..113bd0f5 100644
--- a/server/controllers/user.controller.js
+++ b/server/controllers/user.controller.js
@@ -28,3 +28,15 @@ export function createUser(req, res, next) {
       });
     });
 }
+
+export function updatePreferences(req, res) {
+  User.findByIdAndUpdate(req.user._id,
+  {
+    $set: req.body
+  })
+  .populate('preferences')
+  .exec((err, updatedPreferences) => {
+    if (err) return res.json({ success: false });
+    return res.json(updatedPreferences);
+  });
+}
diff --git a/server/routes/user.routes.js b/server/routes/user.routes.js
index 47c26571..5dde252a 100644
--- a/server/routes/user.routes.js
+++ b/server/routes/user.routes.js
@@ -4,4 +4,6 @@ const router = new Router();
 
 router.route('/signup').post(UserController.createUser);
 
+router.route('/preferences').put(UserController.updatePreferences);
+
 export default router;