diff --git a/PlexRequests.Core/SecurityExtensions.cs b/PlexRequests.Core/SecurityExtensions.cs
index 28f1df41c..d02b0d5e5 100644
--- a/PlexRequests.Core/SecurityExtensions.cs
+++ b/PlexRequests.Core/SecurityExtensions.cs
@@ -67,12 +67,20 @@ namespace PlexRequests.Core
 
         public bool IsPlexUser(IUserIdentity user)
         {
+            if (user == null)
+            {
+                return false;
+            }
             var plexUser = PlexUsers.GetUserByUsername(user.UserName);
             return plexUser != null;
         }
 
         public bool IsNormalUser(IUserIdentity user)
         {
+            if (user == null)
+            {
+                return false;
+            }
             var dbUser = UserRepository.GetUserByUsername(user.UserName);
 
             return dbUser != null;
diff --git a/PlexRequests.UI/Content/Angular/angular-loading-spinner.js b/PlexRequests.UI/Content/Angular/angular-loading-spinner.js
index c25717c81..afa7a78c0 100644
--- a/PlexRequests.UI/Content/Angular/angular-loading-spinner.js
+++ b/PlexRequests.UI/Content/Angular/angular-loading-spinner.js
@@ -1,25 +1,27 @@
-(function(){
+(function() {
     angular.module('ngLoadingSpinner', ['angularSpinner'])
-    .directive('usSpinner',   ['$http', '$rootScope' ,function ($http, $rootScope){
-        return {
-            link: function (scope, elm, attrs)
-            {
-                $rootScope.spinnerActive = false;
-                scope.isLoading = function () {
-                    return $http.pendingRequests.length > 0;
-                };
+        .directive('usSpinner',
+        [
+            '$http', '$rootScope', function($http, $rootScope) {
+                return {
+                    link: function(scope, elm, attrs) {
+                        $rootScope.spinnerActive = false;
+                        scope.isLoading = function() {
+                            return $http.pendingRequests.length > 0;
+                        };
 
-                scope.$watch(scope.isLoading, function (loading)
-                {
-                    $rootScope.spinnerActive = loading;
-                    if(loading){
-                        elm.removeClass('ng-hide');
-                    }else{
-                        elm.addClass('ng-hide');
+                        scope.$watch(scope.isLoading,
+                            function(loading) {
+                                $rootScope.spinnerActive = loading;
+                                if (loading) {
+                                    elm.removeClass('ng-hide');
+                                } else {
+                                    elm.addClass('ng-hide');
+                                }
+                            });
                     }
-                });
-            }
-        };
+                };
 
-    }]);
+            }
+        ]);
 }).call(this);
\ No newline at end of file
diff --git a/PlexRequests.UI/Content/app/app.js b/PlexRequests.UI/Content/app/app.js
index 197a8a7f6..73e1a5836 100644
--- a/PlexRequests.UI/Content/app/app.js
+++ b/PlexRequests.UI/Content/app/app.js
@@ -1,4 +1,8 @@
 (function() {
     module = angular.module('PlexRequests', ['ngLoadingSpinner']);
     module.constant("moment", moment);
+
+    //module.config(['usSpinnerConfigProvider', function (usSpinnerConfigProvider) {
+    //    usSpinnerConfigProvider.setDefaults({ color: 'white' });
+    //}]);
 }());
\ No newline at end of file
diff --git a/PlexRequests.UI/Content/app/userManagement/Directives/addUser.html b/PlexRequests.UI/Content/app/userManagement/Directives/addUser.html
new file mode 100644
index 000000000..8b329afab
--- /dev/null
+++ b/PlexRequests.UI/Content/app/userManagement/Directives/addUser.html
@@ -0,0 +1,37 @@
+<form name="userform" ng-submit="addUser()" novalidate>
+    <div class="form-group">
+        <input id="username" type="text" placeholder="user" ng-model="user.username" class="form-control form-control-custom" />
+    </div>
+    <div class="form-group">
+        <input id="password" type="password" placeholder="password" ng-model="user.password" class="form-control form-control-custom" />
+    </div>
+    <div class="form-group">
+        <input id="email" type="email" placeholder="email address" ng-model="user.email" class="form-control form-control-custom" />
+    </div>
+    <div class="row">
+        <h3>Permissions: </h3>
+        <div class="col-md-5">
+            <div class="checkbox" ng-repeat="permission in permissions">
+                <input id="permission_{{$id}}" class="checkbox-custom" name="permission[]"
+                       ng-checked="permission.selected" ng-model="permission.selected" type="checkbox" value="{{permission.value}}" />
+                <label for="permission_{{$id}}">{{permission.name}}</label>
+            </div>
+        </div>
+
+        <h3>Features: </h3>
+        <div class="col-md-5">
+            <div class="checkbox" ng-repeat="f in features">
+                <input id="features_{{$id}}" class="checkbox-custom" name="f[]"
+                       ng-checked="f.selected" ng-model="f.selected" type="checkbox" value="{{f.value}}" />
+                <label for="features_{{$id}}">{{f.name}}</label>
+            </div>
+        </div>
+    </div>
+
+
+    <div class="row">
+        <input type="submit" class="btn btn-success-outline" value="Add" />
+
+        <button type="button" ng-click="redirectToSettings()" class="btn btn-primary-outline" style="float: right; margin-right: 10px;">Settings</button>
+    </div>
+</form>
\ No newline at end of file
diff --git a/PlexRequests.UI/Content/app/userManagement/Directives/sidebar.html b/PlexRequests.UI/Content/app/userManagement/Directives/sidebar.html
new file mode 100644
index 000000000..c4d12e8ac
--- /dev/null
+++ b/PlexRequests.UI/Content/app/userManagement/Directives/sidebar.html
@@ -0,0 +1,54 @@
+    <!--Sidebar-->
+<div id="sidebar-wrapper" class="shadow">
+    <div style="margin-left:15px">
+        <br />
+        <br />
+        <img ng-show="selectedUser.plexInfo.thumb" class="col-md-pull-1 img-circle" style="position: absolute" ng-src="{{selectedUser.plexInfo.thumb}}" />
+        <div hidden="hidden" ng-bind="selectedUser.id"></div>
+        <div>
+            <strong>Username: </strong><span ng-bind="selectedUser.username"></span>
+        </div>
+        <div ng-show="selectedUser.emailAddress">
+            <strong>Email Address: </strong><span ng-bind="selectedUser.emailAddress"></span>
+        </div>
+        <div>
+            <strong>User Type: </strong><span ng-bind="selectedUser.type === 1 ? 'Local User' : 'Plex User'"></span>
+        </div>
+        <br />
+        <br />
+        <div ng-show="selectedUser">
+            <!--Edit-->
+
+            <strong>Modify Permissions:</strong>
+            <!--Load all permissions-->
+
+            <div class="checkbox" ng-repeat="p in selectedUser.permissions">
+                <input id="permissionsCheckbox_{{$id}}" class="checkbox-custom" name="permissions[]" ng-checked="p.selected" ng-model="p.selected" type="checkbox" value="{{p.value}}" />
+                <label for="permissionsCheckbox_{{$id}}">{{p.name}}</label>
+            </div>
+
+            <strong>Modify Features:</strong>
+            <!--Load all features-->
+            <div class="checkbox" ng-repeat="p in selectedUser.features">
+                <input id="featuresCheckbox_{{$id}}" class="checkbox-custom" name="features[]" ng-checked="p.selected" ng-model="p.selected" type="checkbox" value="{{p.value}}" />
+                <label for="featuresCheckbox_{{$id}}">{{p.name}}</label>
+            </div>
+
+            <strong>Email Address</strong>
+            <div class="form-group">
+                <input id="emailAddress" type="email" ng-model="selectedUser.emailAddress" ng-disabled="selectedUser.type === 0" class="form-control form-control-custom" />
+            </div>
+
+            <strong>Alias</strong>
+            <div class="form-group">
+                <input id="alias" type="text" ng-model="selectedUser.alias" class="form-control form-control-custom" />
+            </div>
+
+
+            <button ng-click="updateUser()" class="btn btn-primary-outline">Update</button>
+            <button ng-click="deleteUser()" class="btn btn-danger-outline">Delete</button>
+            <button ng-click="closeSidebarClick()" style="float: right; margin-right: 10px;" class="btn btn-danger-outline">Close</button>
+        </div>
+    </div>
+</div>
+<!--SideBar End-->
\ No newline at end of file
diff --git a/PlexRequests.UI/Content/app/userManagement/Directives/table.html b/PlexRequests.UI/Content/app/userManagement/Directives/table.html
new file mode 100644
index 000000000..587acc988
--- /dev/null
+++ b/PlexRequests.UI/Content/app/userManagement/Directives/table.html
@@ -0,0 +1,86 @@
+
+<!--Search-->
+<form>
+    <div class="row">
+        <div class="form-group">
+            <div class="input-group">
+                <div class="input-group-addon">
+                    <i class="fa fa-search"></i>
+                </div>
+
+                <input type="text" class="form-control" placeholder="Search" ng-model="searchTerm">
+
+            </div>
+        </div>
+    </div>
+</form>
+
+<!-- Table -->
+<table class="table table-striped table-hover table-responsive table-condensed">
+    <thead>
+        <tr>
+            <th>
+                <a href="#IDoNotExist" ng-click="sortType = 'username'; sortReverse = !sortReverse">
+                    Username
+                    <span ng-show="sortType == 'username' && !sortReverse" class="fa fa-caret-down"></span>
+                    <span ng-show="sortType == 'username' && sortReverse" class="fa fa-caret-up"></span>
+                </a>
+            </th>
+            <th>
+                <a href="#IDoNotExist" ng-click="sortType = 'alias'; sortReverse = !sortReverse">
+                    Alias
+                    <span ng-show="sortType == 'alias' && !sortReverse" class="fa fa-caret-down"></span>
+                    <span ng-show="sortType == 'alias' && sortReverse" class="fa fa-caret-up"></span>
+                </a>
+            </th>
+            <th>
+                <a href="#IDoNotExist" ng-click="sortType = 'emailAddress'; sortReverse = !sortReverse">
+                    Email
+                    <span ng-show="sortType == 'emailAddress' && !sortReverse" class="fa fa-caret-down"></span>
+                    <span ng-show="sortType == 'emailAddress' && sortReverse" class="fa fa-caret-up"></span>
+                </a>
+            </th>
+            <th>
+                Permissions
+            </th>
+            <th ng-hide="hideColumns">
+                <a href="#IDoNotExist" ng-click="sortType = 'type'; sortReverse = !sortReverse">
+                    User Type
+                    <span ng-show="sortType == 'type' && !sortReverse" class="fa fa-caret-down"></span>
+                    <span ng-show="sortType == 'type' && sortReverse" class="fa fa-caret-up"></span>
+                </a>
+            </th>
+
+            <th ng-hide="hideColumns">
+                <a href="#IDoNotExist" ng-click="sortType = 'lastLoggedIn'; sortReverse = !sortReverse">
+                    Last Logged In
+                    <span ng-show="sortType == 'lastLoggedIn' && !sortReverse" class="fa fa-caret-down"></span>
+                    <span ng-show="sortType == 'lastLoggedIn' && sortReverse" class="fa fa-caret-up"></span>
+                </a>
+            </th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr ng-repeat="u in users | orderBy:sortType:sortReverse | filter:searchTerm">
+            <td>
+                {{u.username}}
+            </td>
+            <td>
+                {{u.alias}}
+            </td>
+            <td>
+                {{u.emailAddress}}
+            </td>
+            <td>
+                {{u.permissionsFormattedString}}
+            </td>
+            <td ng-hide="hideColumns">
+                {{u.type === 1 ? 'Local User' : 'Plex User'}}
+            </td>
+            <td ng-hide="hideColumns" ng-bind="u.lastLoggedIn === minDate ? 'Never' : formatDate(u.lastLoggedIn)"></td>
+            <td>
+                <a href="#IDontExist" ng-click="selectUser(u.id)" class="btn btn-sm btn-info-outline">Details/Edit</a>
+            </td>
+        </tr>
+    </tbody>
+</table>
\ No newline at end of file
diff --git a/PlexRequests.UI/Content/app/userManagement/Directives/userManagementDirective.js b/PlexRequests.UI/Content/app/userManagement/Directives/userManagementDirective.js
new file mode 100644
index 000000000..7477fee52
--- /dev/null
+++ b/PlexRequests.UI/Content/app/userManagement/Directives/userManagementDirective.js
@@ -0,0 +1,25 @@
+(function () {
+
+    module.directive('tableComponent',
+            function () {
+                return {
+                    templateUrl: createBaseUrl(getBaseUrl(), 'Content/app/userManagement/Directives/table.html')
+                };
+            })
+        .directive('addUser',
+            function () {
+                return {
+                    templateUrl: createBaseUrl(getBaseUrl(), 'Content/app/userManagement/Directives/addUser.html')
+                };
+            })
+        .directive('sidebar',
+            function () {
+                return {
+                    templateUrl: createBaseUrl(getBaseUrl(), 'Content/app/userManagement/Directives/sidebar.html')
+                };
+            });
+
+    function getBaseUrl() {
+        return $('#baseUrl').text();
+    }
+})();
\ No newline at end of file
diff --git a/PlexRequests.UI/Content/base.css b/PlexRequests.UI/Content/base.css
index d48d329f8..5623b9155 100644
--- a/PlexRequests.UI/Content/base.css
+++ b/PlexRequests.UI/Content/base.css
@@ -369,7 +369,7 @@ label {
   margin-right: -250px;
   overflow-y: auto;
   background: #4e5d6c;
-  padding-left: 15px;
+  padding-left: 0;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
diff --git a/PlexRequests.UI/Content/base.min.css b/PlexRequests.UI/Content/base.min.css
index b47ab325c..27ab3b50b 100644
--- a/PlexRequests.UI/Content/base.min.css
+++ b/PlexRequests.UI/Content/base.min.css
@@ -1 +1 @@
-@media(min-width:768px){.row{position:relative;}.bottom-align-text{position:absolute;bottom:0;right:0;}.landing-block .media{max-width:450px;}}@media(max-width:48em){.home{padding-top:1rem;}}@media(min-width:48em){.home{padding-top:4rem;}}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{color:#fff;}hr{border:1px dashed #777;}.btn{border-radius:.25rem !important;}.btn-group-separated .btn,.btn-group-separated .btn+.btn{margin-left:3px;}.multiSelect{background-color:#4e5d6c;}.form-control-custom{background-color:#4e5d6c !important;color:#fff !important;border-radius:0;box-shadow:0 0 0 !important;}h1{font-size:3.5rem !important;font-weight:600 !important;}.request-title{margin-top:0 !important;font-size:1.9rem !important;}p{font-size:1.1rem !important;}label{display:inline-block !important;margin-bottom:.5rem !important;font-size:16px !important;}.nav-tabs>li{font-size:13px;line-height:21px;}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{background:#4e5d6c;}.nav-tabs>li>a>.fa{padding:3px 5px 3px 3px;}.nav-tabs>li.nav-tab-right{float:right;}.nav-tabs>li.nav-tab-right a{margin-right:0;margin-left:2px;}.nav-tabs>li.nav-tab-icononly .fa{padding:3px;}.navbar .nav a .fa,.dropdown-menu a .fa{font-size:130%;top:1px;position:relative;display:inline-block;margin-right:5px;}.dropdown-menu a .fa{top:2px;}.btn-danger-outline{color:#d9534f !important;background-color:transparent;background-image:none;border-color:#d9534f !important;}.btn-danger-outline:focus,.btn-danger-outline.focus,.btn-danger-outline:active,.btn-danger-outline.active,.btn-danger-outline:hover,.open>.btn-danger-outline.dropdown-toggle{color:#fff !important;background-color:#d9534f !important;border-color:#d9534f !important;}.btn-primary-outline{color:#ff761b !important;background-color:transparent;background-image:none;border-color:#ff761b !important;}.btn-primary-outline:focus,.btn-primary-outline.focus,.btn-primary-outline:active,.btn-primary-outline.active,.btn-primary-outline:hover,.open>.btn-primary-outline.dropdown-toggle{color:#fff !important;background-color:#df691a !important;border-color:#df691a !important;}.btn-info-outline{color:#5bc0de !important;background-color:transparent;background-image:none;border-color:#5bc0de !important;}.btn-info-outline:focus,.btn-info-outline.focus,.btn-info-outline:active,.btn-info-outline.active,.btn-info-outline:hover,.open>.btn-info-outline.dropdown-toggle{color:#fff !important;background-color:#5bc0de !important;border-color:#5bc0de !important;}.btn-warning-outline{color:#f0ad4e !important;background-color:transparent;background-image:none;border-color:#f0ad4e !important;}.btn-warning-outline:focus,.btn-warning-outline.focus,.btn-warning-outline:active,.btn-warning-outline.active,.btn-warning-outline:hover,.open>.btn-warning-outline.dropdown-toggle{color:#fff !important;background-color:#f0ad4e !important;border-color:#f0ad4e !important;}.btn-success-outline{color:#5cb85c !important;background-color:transparent;background-image:none;border-color:#5cb85c !important;}.btn-success-outline:focus,.btn-success-outline.focus,.btn-success-outline:active,.btn-success-outline.active,.btn-success-outline:hover,.open>.btn-success-outline.dropdown-toggle{color:#fff !important;background-color:#5cb85c !important;border-color:#5cb85c !important;}#movieList .mix{display:none;}#tvList .mix{display:none;}.scroll-top-wrapper{position:fixed;opacity:0;visibility:hidden;overflow:hidden;text-align:center;z-index:99999999;background-color:#4e5d6c;color:#eee;width:50px;height:48px;line-height:48px;right:30px;bottom:30px;padding-top:2px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;}.scroll-top-wrapper:hover{background-color:#637689;}.scroll-top-wrapper.show{visibility:visible;cursor:pointer;opacity:1;}.scroll-top-wrapper i.fa{line-height:inherit;}.no-search-results{text-align:center;}.no-search-results .no-search-results-icon{font-size:10em;color:#4e5d6c;}.no-search-results .no-search-results-text{margin:20px 0;color:#ccc;}.form-control-search{padding:13px 105px 13px 16px;height:100%;}.form-control-withbuttons{padding-right:105px;}.input-group-addon .btn-group{position:absolute;right:45px;z-index:3;top:10px;box-shadow:0 0 0;}.input-group-addon .btn-group .btn{border:1px solid rgba(255,255,255,.7) !important;padding:3px 12px;color:rgba(255,255,255,.7) !important;}.btn-split .btn{border-radius:0 !important;}.btn-split .btn:not(.dropdown-toggle){border-radius:.25rem 0 0 .25rem !important;}.btn-split .btn.dropdown-toggle{border-radius:0 .25rem .25rem 0 !important;padding:12px 8px;}#updateAvailable{background-color:#df691a;text-align:center;font-size:15px;padding:3px 0;}#cacherRunning{background-color:#4e5d6c;text-align:center;font-size:15px;padding:3px 0;}.checkbox label{display:inline-block;cursor:pointer;position:relative;padding-left:25px;margin-right:15px;font-size:13px;margin-bottom:10px;}.checkbox label:before{content:"";display:inline-block;width:18px;height:18px;margin-right:10px;position:absolute;left:0;bottom:1px;border:2px solid #eee;border-radius:3px;}.checkbox input[type=checkbox]{display:none;}.checkbox input[type=checkbox]:checked+label:before{content:"✓";font-size:13px;color:#fafafa;text-align:center;line-height:13px;}.input-group-sm{padding-top:2px;padding-bottom:2px;}.tab-pane .form-horizontal .form-group{margin-right:15px;margin-left:15px;}.bootstrap-datetimepicker-widget.dropdown-menu{background-color:#4e5d6c;}.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after{border-bottom:6px solid #4e5d6c !important;}.bootstrap-datetimepicker-widget table td.active,.bootstrap-datetimepicker-widget table td.active:hover{color:#fff !important;}.landing-header{display:block;margin:60px auto;}.landing-block{background:#2f2f2f !important;padding:5px;}.landing-block .media{margin:30px auto;max-width:450px;}.landing-block .media .media-left{display:inline-block;float:left;width:70px;}.landing-block .media .media-left i.fa{font-size:3em;}.landing-title{font-weight:bold;}.checkbox-custom{margin-top:0 !important;margin-bottom:0 !important;}.tooltip_templates{display:none;}.shadow{-moz-box-shadow:3px 3px 5px 6px #191919;-webkit-box-shadow:3px 3px 5px 6px #191919;box-shadow:3px 3px 5px 6px #191919;}.img-circle{border-radius:50%;}#wrapper{padding-left:0;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;}#wrapper.toggled{padding-right:250px;}#sidebar-wrapper{z-index:1000;position:fixed;right:250px;width:0;height:100%;margin-right:-250px;overflow-y:auto;background:#4e5d6c;padding-left:15px;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;}#wrapper.toggled #sidebar-wrapper{width:500px;}#page-content-wrapper{width:100%;position:absolute;padding:15px;}#wrapper.toggled #page-content-wrapper{position:absolute;margin-left:-250px;}.sidebar-nav{position:absolute;top:0;width:500px;margin:0;padding-left:0;list-style:none;}.sidebar-nav li{text-indent:20px;line-height:40px;}.sidebar-nav li a{display:block;text-decoration:none;color:#999;}.sidebar-nav li a:hover{text-decoration:none;color:#fff;background:rgba(255,255,255,.2);}.sidebar-nav li a:active,.sidebar-nav li a:focus{text-decoration:none;}.sidebar-nav>.sidebar-brand{height:65px;font-size:18px;line-height:60px;}.sidebar-nav>.sidebar-brand a{color:#999;}.sidebar-nav>.sidebar-brand a:hover{color:#fff;background:none;}@media(min-width:768px){#wrapper{padding-right:250px;}#wrapper.toggled{padding-right:0;}#sidebar-wrapper{width:500px;}#wrapper.toggled #sidebar-wrapper{width:0;}#page-content-wrapper{padding:20px;position:relative;}#wrapper.toggled #page-content-wrapper{position:relative;margin-right:0;}}#lightbox{background-color:#808080;filter:alpha(opacity=50);opacity:.5;-moz-opacity:.5;top:0;left:0;z-index:20;height:100%;width:100%;background-repeat:no-repeat;background-position:center;position:absolute;}
\ No newline at end of file
+@media(min-width:768px){.row{position:relative;}.bottom-align-text{position:absolute;bottom:0;right:0;}.landing-block .media{max-width:450px;}}@media(max-width:48em){.home{padding-top:1rem;}}@media(min-width:48em){.home{padding-top:4rem;}}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{color:#fff;}hr{border:1px dashed #777;}.btn{border-radius:.25rem !important;}.btn-group-separated .btn,.btn-group-separated .btn+.btn{margin-left:3px;}.multiSelect{background-color:#4e5d6c;}.form-control-custom{background-color:#4e5d6c !important;color:#fff !important;border-radius:0;box-shadow:0 0 0 !important;}h1{font-size:3.5rem !important;font-weight:600 !important;}.request-title{margin-top:0 !important;font-size:1.9rem !important;}p{font-size:1.1rem !important;}label{display:inline-block !important;margin-bottom:.5rem !important;font-size:16px !important;}.nav-tabs>li{font-size:13px;line-height:21px;}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{background:#4e5d6c;}.nav-tabs>li>a>.fa{padding:3px 5px 3px 3px;}.nav-tabs>li.nav-tab-right{float:right;}.nav-tabs>li.nav-tab-right a{margin-right:0;margin-left:2px;}.nav-tabs>li.nav-tab-icononly .fa{padding:3px;}.navbar .nav a .fa,.dropdown-menu a .fa{font-size:130%;top:1px;position:relative;display:inline-block;margin-right:5px;}.dropdown-menu a .fa{top:2px;}.btn-danger-outline{color:#d9534f !important;background-color:transparent;background-image:none;border-color:#d9534f !important;}.btn-danger-outline:focus,.btn-danger-outline.focus,.btn-danger-outline:active,.btn-danger-outline.active,.btn-danger-outline:hover,.open>.btn-danger-outline.dropdown-toggle{color:#fff !important;background-color:#d9534f !important;border-color:#d9534f !important;}.btn-primary-outline{color:#ff761b !important;background-color:transparent;background-image:none;border-color:#ff761b !important;}.btn-primary-outline:focus,.btn-primary-outline.focus,.btn-primary-outline:active,.btn-primary-outline.active,.btn-primary-outline:hover,.open>.btn-primary-outline.dropdown-toggle{color:#fff !important;background-color:#df691a !important;border-color:#df691a !important;}.btn-info-outline{color:#5bc0de !important;background-color:transparent;background-image:none;border-color:#5bc0de !important;}.btn-info-outline:focus,.btn-info-outline.focus,.btn-info-outline:active,.btn-info-outline.active,.btn-info-outline:hover,.open>.btn-info-outline.dropdown-toggle{color:#fff !important;background-color:#5bc0de !important;border-color:#5bc0de !important;}.btn-warning-outline{color:#f0ad4e !important;background-color:transparent;background-image:none;border-color:#f0ad4e !important;}.btn-warning-outline:focus,.btn-warning-outline.focus,.btn-warning-outline:active,.btn-warning-outline.active,.btn-warning-outline:hover,.open>.btn-warning-outline.dropdown-toggle{color:#fff !important;background-color:#f0ad4e !important;border-color:#f0ad4e !important;}.btn-success-outline{color:#5cb85c !important;background-color:transparent;background-image:none;border-color:#5cb85c !important;}.btn-success-outline:focus,.btn-success-outline.focus,.btn-success-outline:active,.btn-success-outline.active,.btn-success-outline:hover,.open>.btn-success-outline.dropdown-toggle{color:#fff !important;background-color:#5cb85c !important;border-color:#5cb85c !important;}#movieList .mix{display:none;}#tvList .mix{display:none;}.scroll-top-wrapper{position:fixed;opacity:0;visibility:hidden;overflow:hidden;text-align:center;z-index:99999999;background-color:#4e5d6c;color:#eee;width:50px;height:48px;line-height:48px;right:30px;bottom:30px;padding-top:2px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;}.scroll-top-wrapper:hover{background-color:#637689;}.scroll-top-wrapper.show{visibility:visible;cursor:pointer;opacity:1;}.scroll-top-wrapper i.fa{line-height:inherit;}.no-search-results{text-align:center;}.no-search-results .no-search-results-icon{font-size:10em;color:#4e5d6c;}.no-search-results .no-search-results-text{margin:20px 0;color:#ccc;}.form-control-search{padding:13px 105px 13px 16px;height:100%;}.form-control-withbuttons{padding-right:105px;}.input-group-addon .btn-group{position:absolute;right:45px;z-index:3;top:10px;box-shadow:0 0 0;}.input-group-addon .btn-group .btn{border:1px solid rgba(255,255,255,.7) !important;padding:3px 12px;color:rgba(255,255,255,.7) !important;}.btn-split .btn{border-radius:0 !important;}.btn-split .btn:not(.dropdown-toggle){border-radius:.25rem 0 0 .25rem !important;}.btn-split .btn.dropdown-toggle{border-radius:0 .25rem .25rem 0 !important;padding:12px 8px;}#updateAvailable{background-color:#df691a;text-align:center;font-size:15px;padding:3px 0;}#cacherRunning{background-color:#4e5d6c;text-align:center;font-size:15px;padding:3px 0;}.checkbox label{display:inline-block;cursor:pointer;position:relative;padding-left:25px;margin-right:15px;font-size:13px;margin-bottom:10px;}.checkbox label:before{content:"";display:inline-block;width:18px;height:18px;margin-right:10px;position:absolute;left:0;bottom:1px;border:2px solid #eee;border-radius:3px;}.checkbox input[type=checkbox]{display:none;}.checkbox input[type=checkbox]:checked+label:before{content:"✓";font-size:13px;color:#fafafa;text-align:center;line-height:13px;}.input-group-sm{padding-top:2px;padding-bottom:2px;}.tab-pane .form-horizontal .form-group{margin-right:15px;margin-left:15px;}.bootstrap-datetimepicker-widget.dropdown-menu{background-color:#4e5d6c;}.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after{border-bottom:6px solid #4e5d6c !important;}.bootstrap-datetimepicker-widget table td.active,.bootstrap-datetimepicker-widget table td.active:hover{color:#fff !important;}.landing-header{display:block;margin:60px auto;}.landing-block{background:#2f2f2f !important;padding:5px;}.landing-block .media{margin:30px auto;max-width:450px;}.landing-block .media .media-left{display:inline-block;float:left;width:70px;}.landing-block .media .media-left i.fa{font-size:3em;}.landing-title{font-weight:bold;}.checkbox-custom{margin-top:0 !important;margin-bottom:0 !important;}.tooltip_templates{display:none;}.shadow{-moz-box-shadow:3px 3px 5px 6px #191919;-webkit-box-shadow:3px 3px 5px 6px #191919;box-shadow:3px 3px 5px 6px #191919;}.img-circle{border-radius:50%;}#wrapper{padding-left:0;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;}#wrapper.toggled{padding-right:250px;}#sidebar-wrapper{z-index:1000;position:fixed;right:250px;width:0;height:100%;margin-right:-250px;overflow-y:auto;background:#4e5d6c;padding-left:0;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;}#wrapper.toggled #sidebar-wrapper{width:500px;}#page-content-wrapper{width:100%;position:absolute;padding:15px;}#wrapper.toggled #page-content-wrapper{position:absolute;margin-left:-250px;}.sidebar-nav{position:absolute;top:0;width:500px;margin:0;padding-left:0;list-style:none;}.sidebar-nav li{text-indent:20px;line-height:40px;}.sidebar-nav li a{display:block;text-decoration:none;color:#999;}.sidebar-nav li a:hover{text-decoration:none;color:#fff;background:rgba(255,255,255,.2);}.sidebar-nav li a:active,.sidebar-nav li a:focus{text-decoration:none;}.sidebar-nav>.sidebar-brand{height:65px;font-size:18px;line-height:60px;}.sidebar-nav>.sidebar-brand a{color:#999;}.sidebar-nav>.sidebar-brand a:hover{color:#fff;background:none;}@media(min-width:768px){#wrapper{padding-right:250px;}#wrapper.toggled{padding-right:0;}#sidebar-wrapper{width:500px;}#wrapper.toggled #sidebar-wrapper{width:0;}#page-content-wrapper{padding:20px;position:relative;}#wrapper.toggled #page-content-wrapper{position:relative;margin-right:0;}}#lightbox{background-color:#808080;filter:alpha(opacity=50);opacity:.5;-moz-opacity:.5;top:0;left:0;z-index:20;height:100%;width:100%;background-repeat:no-repeat;background-position:center;position:absolute;}
\ No newline at end of file
diff --git a/PlexRequests.UI/Content/base.scss b/PlexRequests.UI/Content/base.scss
index b1e7abe3e..d04464bc8 100644
--- a/PlexRequests.UI/Content/base.scss
+++ b/PlexRequests.UI/Content/base.scss
@@ -460,7 +460,7 @@ $border-radius: 10px;
     margin-right: -250px;
     overflow-y: auto;
     background: #4e5d6c;
-    padding-left:15px;
+    padding-left:0;
     -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
diff --git a/PlexRequests.UI/Helpers/BaseUrlHelper.cs b/PlexRequests.UI/Helpers/BaseUrlHelper.cs
index 15a102fed..513dbd553 100644
--- a/PlexRequests.UI/Helpers/BaseUrlHelper.cs
+++ b/PlexRequests.UI/Helpers/BaseUrlHelper.cs
@@ -224,6 +224,7 @@ namespace PlexRequests.UI.Helpers
 
             sb.Append($"<script src=\"{content}/Content/app/userManagement/userManagementController.js?v={Assembly}\" type=\"text/javascript\"></script>");
             sb.Append($"<script src=\"{content}/Content/app/userManagement/userManagementService.js?v={Assembly}\" type=\"text/javascript\"></script>");
+            sb.Append($"<script src=\"{content}/Content/app/userManagement/Directives/userManagementDirective.js?v={Assembly}\" type=\"text/javascript\"></script>");
             sb.Append($"<script src=\"{content}/Content/moment.min.js\"></script>");
             sb.Append($"<script src=\"{content}/Content/spin.min.js\"></script>");    
             sb.Append($"<script src=\"{content}/Content/Angular/angular-spinner.min.js\"></script>");   
diff --git a/PlexRequests.UI/PlexRequests.UI.csproj b/PlexRequests.UI/PlexRequests.UI.csproj
index 9b9f38de4..f5e804c4d 100644
--- a/PlexRequests.UI/PlexRequests.UI.csproj
+++ b/PlexRequests.UI/PlexRequests.UI.csproj
@@ -304,6 +304,18 @@
     <Content Include="Content\app\requests\requestsService.js">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>
+    <Content Include="Content\app\userManagement\Directives\sidebar.html">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="Content\app\userManagement\Directives\addUser.html">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="Content\app\userManagement\Directives\table.html">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
+    <Content Include="Content\app\userManagement\Directives\userManagementDirective.js">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
     <Content Include="Content\awesome-bootstrap-checkbox.css">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
diff --git a/PlexRequests.UI/Views/UserManagement/Index.cshtml b/PlexRequests.UI/Views/UserManagement/Index.cshtml
index fdb6014a3..3c942f50e 100644
--- a/PlexRequests.UI/Views/UserManagement/Index.cshtml
+++ b/PlexRequests.UI/Views/UserManagement/Index.cshtml
@@ -1,64 +1,13 @@
-@using PlexRequests.UI.Helpers
-@inherits PlexRequests.UI.Helpers.AngularViewBase
-
+@inherits PlexRequests.UI.Helpers.AngularViewBase
+@using PlexRequests.UI.Helpers
 @Html.LoadUserManagementAssets()
-<div id="wrapper" class="toggled" ng-controller="userManagementController" ng-init="init()" ng-cloak>
-    <span us-spinner="{radius:30, width:8, length: 16}"></span>
-    <b>Spinner Active: </b>
-    {{spinnerActive}}
-    <!--Sidebar-->
-    <div id="sidebar-wrapper" class="shadow">
-        <br />
-        <br />
-        <img ng-show="selectedUser.plexInfo.thumb" class="col-md-pull-1 img-circle" style="position: absolute" ng-src="{{selectedUser.plexInfo.thumb}}" />
-        <div hidden="hidden" ng-bind="selectedUser.id"></div>
-        <div>
-            <strong>Username: </strong><span ng-bind="selectedUser.username"></span>
-        </div>
-        <div ng-show="selectedUser.emailAddress">
-            <strong>Email Address: </strong><span ng-bind="selectedUser.emailAddress"></span>
-        </div>
-        <div>
-            <strong>User Type: </strong><span ng-bind="selectedUser.type === 1 ? 'Local User' : 'Plex User'"></span>
-        </div>
-        <br />
-        <br />
-        <div ng-show="selectedUser">
-            <!--Edit-->
-
-            <strong>Modify Permissions:</strong>
-            <!--Load all permissions-->
-
-            <div class="checkbox" ng-repeat="p in selectedUser.permissions">
-                <input id="permissionsCheckbox_{{$id}}" class="checkbox-custom" name="permissions[]" ng-checked="p.selected" ng-model="p.selected" type="checkbox" value="{{p.value}}" />
-                <label for="permissionsCheckbox_{{$id}}">{{p.name}}</label>
-            </div>
-
-            <strong>Modify Features:</strong>
-            <!--Load all features-->
-            <div class="checkbox" ng-repeat="p in selectedUser.features">
-                <input id="featuresCheckbox_{{$id}}" class="checkbox-custom" name="features[]" ng-checked="p.selected" ng-model="p.selected" type="checkbox" value="{{p.value}}" />
-                <label for="featuresCheckbox_{{$id}}">{{p.name}}</label>
-            </div>
-
-            <strong>Email Address</strong>
-            <div class="form-group">
-                <input id="emailAddress" type="email" ng-model="selectedUser.emailAddress" ng-disabled="selectedUser.type === 0" class="form-control form-control-custom" />
-            </div>
 
-            <strong>Alias</strong>
-            <div class="form-group">
-                <input id="alias" type="text" ng-model="selectedUser.alias" class="form-control form-control-custom" />
-            </div>
 
+<div id="wrapper" class="toggled" ng-controller="userManagementController" ng-init="init()" ng-cloak>
+    <span us-spinner="{radius:30, width:8, length: 16, color: '#ffffff' }"></span>
 
-            <button ng-click="updateUser()" class="btn btn-primary-outline">Update</button>
-            <button ng-click="deleteUser()" class="btn btn-danger-outline">Delete</button>
-            <button ng-click="closeSidebarClick()" style="float: right; margin-right: 10px;" class="btn btn-danger-outline">Close</button>
-        </div>
 
-    </div>
-    <!--SideBar End-->
+    <sidebar></sidebar>
 
     <div>
         <div class="container-fluid">
@@ -70,131 +19,14 @@
                     <br>
                     <br>
                     <div ng-show="error.error" ng-bind="error.errorMessage"></div>
-                    <br/>
-                    <br/>
-                    <br/>
-                    <form name="userform" ng-submit="addUser()" novalidate>
-                        <div class="form-group">
-                            <input id="username" type="text" placeholder="user" ng-model="user.username" class="form-control form-control-custom" />
-                        </div>
-                        <div class="form-group">
-                            <input id="password" type="password" placeholder="password" ng-model="user.password" class="form-control form-control-custom" />
-                        </div>
-                        <div class="form-group">
-                            <input id="email" type="email" placeholder="email address" ng-model="user.email" class="form-control form-control-custom" />
-                        </div>
-                        <div class="row">
-                            <h3>Permissions: </h3>
-                            <div class="col-md-5">
-                                <div class="checkbox" ng-repeat="permission in permissions">
-                                    <input id="permission_{{$id}}" class="checkbox-custom" name="permission[]"
-                                           ng-checked="permission.selected" ng-model="permission.selected" type="checkbox" value="{{permission.value}}" />
-                                    <label for="permission_{{$id}}">{{permission.name}}</label>
-                                </div>
-                            </div>
-
-                            <h3>Features: </h3>
-                            <div class="col-md-5">
-                                <div class="checkbox" ng-repeat="f in features">
-                                    <input id="features_{{$id}}" class="checkbox-custom" name="f[]"
-                                           ng-checked="f.selected" ng-model="f.selected" type="checkbox" value="{{f.value}}" />
-                                    <label for="features_{{$id}}">{{f.name}}</label>
-                                </div>
-                            </div>
-                        </div>
-
-
-                        <div class="row">
-                            <input type="submit" class="btn btn-success-outline" value="Add" />
-
-                            <button type="button" ng-click="redirectToSettings()" class="btn btn-primary-outline" style="float: right; margin-right: 10px;">Settings</button>
-                        </div>
-                    </form>
-
-
-                    <form>
-                        <div class="row">
-                            <div class="form-group">
-                                <div class="input-group">
-                                    <div class="input-group-addon">
-                                        <i class="fa fa-search"></i>
-                                    </div>
-
-                                    <input type="text" class="form-control" placeholder="Search" ng-model="searchTerm">
-
-                                </div>
-                            </div>
-                        </div>
-                    </form>
+                    <br />
+                    <br />
+                    <br />
+                    
+                    <add-User></add-User>
 
-                    <table class="table table-striped table-hover table-responsive table-condensed">
-                        <thead>
-                            <tr>
-                                <th>
-                                    <a href="#" ng-click="sortType = 'username'; sortReverse = !sortReverse">
-                                        Username
-                                        <span ng-show="sortType == 'username' && !sortReverse" class="fa fa-caret-down"></span>
-                                        <span ng-show="sortType == 'username' && sortReverse" class="fa fa-caret-up"></span>
-                                    </a>
-                                </th>
-                                <th>
-                                    <a href="#" ng-click="sortType = 'alias'; sortReverse = !sortReverse">
-                                        Alias
-                                        <span ng-show="sortType == 'alias' && !sortReverse" class="fa fa-caret-down"></span>
-                                        <span ng-show="sortType == 'alias' && sortReverse" class="fa fa-caret-up"></span>
-                                    </a>
-                                </th>
-                                <th>
-                                    <a href="#" ng-click="sortType = 'emailAddress'; sortReverse = !sortReverse">
-                                        Email
-                                        <span ng-show="sortType == 'emailAddress' && !sortReverse" class="fa fa-caret-down"></span>
-                                        <span ng-show="sortType == 'emailAddress' && sortReverse" class="fa fa-caret-up"></span>
-                                    </a>
-                                </th>
-                                <th>
-                                    Permissions
-                                </th>
-                                <th ng-hide="hideColumns">
-                                    <a href="#" ng-click="sortType = 'type'; sortReverse = !sortReverse">
-                                        User Type
-                                        <span ng-show="sortType == 'type' && !sortReverse" class="fa fa-caret-down"></span>
-                                        <span ng-show="sortType == 'type' && sortReverse" class="fa fa-caret-up"></span>
-                                    </a>
-                                </th>
 
-                                <th ng-hide="hideColumns">
-                                    <a href="#" ng-click="sortType = 'lastLoggedIn'; sortReverse = !sortReverse">
-                                        Last Logged In
-                                        <span ng-show="sortType == 'lastLoggedIn' && !sortReverse" class="fa fa-caret-down"></span>
-                                        <span ng-show="sortType == 'lastLoggedIn' && sortReverse" class="fa fa-caret-up"></span>
-                                    </a>
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr ng-repeat="u in users | orderBy:sortType:sortReverse | filter:searchTerm">
-                                <td>
-                                    {{u.username}}
-                                </td>
-                                <td>
-                                    {{u.alias}}
-                                </td>
-                                <td>
-                                    {{u.emailAddress}}
-                                </td>
-                                <td>
-                                    {{u.permissionsFormattedString}}
-                                </td>
-                                <td ng-hide="hideColumns">
-                                    {{u.type === 1 ? 'Local User' : 'Plex User'}}
-                                </td>
-                                <td ng-hide="hideColumns" ng-bind="u.lastLoggedIn === minDate ? 'Never' : formatDate(u.lastLoggedIn)"></td>
-                                <td>
-                                    <a href="#IDontExist" ng-click="selectUser(u.id)" class="btn btn-sm btn-info-outline">Details/Edit</a>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
+                    <table-Component></table-Component>
                 </div>
             </div>
         </div>