diff --git a/app/extensions/_module.js b/app/extensions/_module.js
index 5a936d2cf..7ad877aa6 100644
--- a/app/extensions/_module.js
+++ b/app/extensions/_module.js
@@ -1,3 +1,4 @@
 angular.module('portainer.extensions', [
-  'portainer.extensions.registrymanagement'
+  'portainer.extensions.registrymanagement',
+  'portainer.extensions.oauth'
 ]);
diff --git a/app/extensions/oauth/__module.js b/app/extensions/oauth/__module.js
new file mode 100644
index 000000000..80b17e495
--- /dev/null
+++ b/app/extensions/oauth/__module.js
@@ -0,0 +1 @@
+angular.module('portainer.extensions.oauth', []);
\ No newline at end of file
diff --git a/app/extensions/oauth/components/oauth-settings/oauth-settings-controller.js b/app/extensions/oauth/components/oauth-settings/oauth-settings-controller.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/app/extensions/oauth/components/oauth-settings/oauth-settings.html b/app/extensions/oauth/components/oauth-settings/oauth-settings.html
new file mode 100644
index 000000000..49f923e12
--- /dev/null
+++ b/app/extensions/oauth/components/oauth-settings/oauth-settings.html
@@ -0,0 +1,164 @@
+<div>
+  <div class="col-sm-12 form-section-title">OAuth Configuration</div>
+
+  <div class="form-group">
+    <label for="oauth_client_id" class="col-sm-3 col-lg-2 control-label text-left">
+      Client ID
+      <portainer-tooltip position="bottom" message="Client ID that authorization server supports"></portainer-tooltip>
+    </label>
+    <div class="col-sm-9 col-lg-10">
+      <input
+        type="text"
+        class="form-control"
+        id="oauth_client_id"
+        ng-model="$ctrl.settings.ClientID"
+        placeholder="xxxxxxxxxxxxxxxxxxxx"
+      />
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="oauth_client_secret" class="col-sm-3 col-lg-2 control-label text-left">
+      Client Secret
+      <portainer-tooltip
+        position="bottom"
+        message="Client secret that authorization server supports"
+      ></portainer-tooltip>
+    </label>
+    <div class="col-sm-9 col-lg-10">
+      <input
+        type="password"
+        class="form-control"
+        id="oauth_client_secret"
+        ng-model="$ctrl.settings.ClientSecret"
+        placeholder="xxxxxxxxxxxxxxxxxxxx"
+      />
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="oauth_authorization_uri" class="col-sm-3 col-lg-2 control-label text-left">
+      Authorization URI
+      <portainer-tooltip
+        position="bottom"
+        message="URI where the user is redirected in order to login with OAuth provider"
+      ></portainer-tooltip>
+    </label>
+    <div class="col-sm-9 col-lg-10">
+      <input
+        type="text"
+        class="form-control"
+        id="oauth_authorization_uri"
+        ng-model="$ctrl.settings.AuthorizationURI"
+        placeholder="https://example.com/oauth/authorize"
+      />
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="oauth_access_token_uri" class="col-sm-3 col-lg-2 control-label text-left">
+      Access Token URI
+      <portainer-tooltip
+        position="bottom"
+        message="URI where portainer will attempt to obtain an access token"
+      ></portainer-tooltip>
+    </label>
+    <div class="col-sm-9 col-lg-10">
+      <input
+        type="text"
+        class="form-control"
+        id="oauth_access_token_uri"
+        ng-model="$ctrl.settings.AccessTokenURI"
+        placeholder="https://example.com/oauth/token"
+      />
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="oauth_resource_uri" class="col-sm-3 col-lg-2 control-label text-left">
+      Resource URI
+      <portainer-tooltip
+        position="bottom"
+        message="URI where portainer will attempt to retrieve the user identifier value"
+      ></portainer-tooltip>
+    </label>
+    <div class="col-sm-9 col-lg-10">
+      <input
+        type="text"
+        class="form-control"
+        id="oauth_resource_uri"
+        ng-model="$ctrl.settings.ResourceURI"
+        placeholder="https://example.com/user"
+      />
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="oauth_redirect_uri" class="col-sm-3 col-lg-2 control-label text-left">
+      Redirect URI
+      <portainer-tooltip position="bottom" message="Set this as your portainer index"></portainer-tooltip>
+    </label>
+    <div class="col-sm-9 col-lg-10">
+      <input
+        type="text"
+        class="form-control"
+        id="oauth_redirect_uri"
+        ng-model="$ctrl.settings.RedirectURI"
+        placeholder="http://yourportainer.com/"
+      />
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="oauth_user_identifier" class="col-sm-3 col-lg-2 control-label text-left">
+      User Identifier
+      <portainer-tooltip
+        position="bottom"
+        message="Key that identifies the user in the resource server request"
+      ></portainer-tooltip>
+    </label>
+    <div class="col-sm-9 col-lg-10">
+      <input
+        type="text"
+        class="form-control"
+        id="oauth_user_identifier"
+        ng-model="$ctrl.settings.UserIdentifier"
+        placeholder="id"
+      />
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="oauth_scopes" class="col-sm-3 col-lg-2 control-label text-left">
+      Scopes
+      <portainer-tooltip
+        position="bottom"
+        message="Scopes that are required to obtain the user identifier separated by delimiter if server expects it"
+      ></portainer-tooltip>
+    </label>
+    <div class="col-sm-9 col-lg-10">
+      <input
+        type="text"
+        class="form-control"
+        id="oauth_scopes"
+        ng-model="$ctrl.settings.Scopes"
+        placeholder="id,email,name"
+      />
+    </div>
+  </div>
+
+  <div class="form-group">
+    <span class="col-sm-12 text-muted small">
+      With automatic user provisioning enabled, Portainer will create user(s) automatically with standard user role. If
+      disabled, users must be created in Portainer in order to login.
+    </span>
+  </div>
+  <div class="form-group">
+    <div class="col-sm-12">
+      <label for="oauth_provisioning"> Automatic user provisioning </label>
+      <label class="switch" style="margin-left: 20px">
+        <input type="checkbox" ng-model="$ctrl.settings.OAuthAutoCreateUsers" /><i></i>
+      </label>
+    </div>
+  </div>
+</div>
diff --git a/app/extensions/oauth/components/oauth-settings/oauth-settings.js b/app/extensions/oauth/components/oauth-settings/oauth-settings.js
new file mode 100644
index 000000000..9301a0e12
--- /dev/null
+++ b/app/extensions/oauth/components/oauth-settings/oauth-settings.js
@@ -0,0 +1,7 @@
+angular.module('portainer.extensions.oauth').component('oauthSettings', {
+  templateUrl: 'app/extensions/oauth/components/oauth-settings/oauth-settings.html',
+  bindings: {
+    settings: '<'
+  }
+  // controller: 'oauthSettingsController'
+});
diff --git a/app/portainer/views/auth/authController.js b/app/portainer/views/auth/authController.js
index 8499a1a20..9c80ba721 100644
--- a/app/portainer/views/auth/authController.js
+++ b/app/portainer/views/auth/authController.js
@@ -11,9 +11,6 @@ function (urlHelper, $q, $scope, $state, $stateParams, $sanitize, Authentication
   $scope.state = {
     AuthenticationError: ''
   };
-  
-  
-
 
   $scope.authenticateUser = function() {
     var username = $scope.formValues.Username;
diff --git a/app/portainer/views/settings/authentication/settingsAuthentication.html b/app/portainer/views/settings/authentication/settingsAuthentication.html
index 1cef110f7..8c46a5aca 100644
--- a/app/portainer/views/settings/authentication/settingsAuthentication.html
+++ b/app/portainer/views/settings/authentication/settingsAuthentication.html
@@ -321,108 +321,7 @@
             <!-- !group-search-settings -->
           </div>
 
-          <div ng-if="settings.AuthenticationMethod === 3">
-
-            <div class="col-sm-12 form-section-title">
-              OAuth Configuration
-            </div>
-
-            <div class="form-group">
-              <label for="oauth_client_id" class="col-sm-3 col-lg-2 control-label text-left">
-                 Client ID
-                <portainer-tooltip position="bottom" message="Client ID that authorization server supports"></portainer-tooltip>
-              </label>
-              <div class="col-sm-9 col-lg-10">
-                <input type="text" class="form-control" id="oauth_client_id" ng-model="OAuthSettings.ClientID" placeholder="xxxxxxxxxxxxxxxxxxxx">
-              </div>
-            </div>
-
-            <div class="form-group">
-              <label for="oauth_client_secret" class="col-sm-3 col-lg-2 control-label text-left">
-                Client Secret
-                <portainer-tooltip position="bottom" message="Client secret that authorization server supports"></portainer-tooltip>
-              </label>
-                <div class="col-sm-9 col-lg-10">
-                  <input type="password" class="form-control" id="oauth_client_secret" ng-model="OAuthSettings.ClientSecret" placeholder="xxxxxxxxxxxxxxxxxxxx">
-	            </div>
-            </div>
-
-            <div class="form-group">
-              <label for="oauth_authorization_uri" class="col-sm-3 col-lg-2 control-label text-left">
-                Authorization URI
-                <portainer-tooltip position="bottom" message="URI where the user is redirected in order to login with OAuth provider"></portainer-tooltip>
-              </label>
-                <div class="col-sm-9 col-lg-10">
-                  <input type="text" class="form-control" id="oauth_authorization_uri" ng-model="OAuthSettings.AuthorizationURI" placeholder="https://example.com/oauth/authorize">
-                </div>
-            </div>
-
-            <div class="form-group">
-              <label for="oauth_access_token_uri" class="col-sm-3 col-lg-2 control-label text-left">
-                Access Token URI
-                <portainer-tooltip position="bottom" message="URI where portainer will attempt to obtain an access token"></portainer-tooltip>
-              </label>
-	          <div class="col-sm-9 col-lg-10">
-                <input type="text" class="form-control" id="oauth_access_token_uri" ng-model="OAuthSettings.AccessTokenURI" placeholder="https://example.com/oauth/token">
-              </div>
-            </div>
-
-            <div class="form-group">
-              <label for="oauth_resource_uri" class="col-sm-3 col-lg-2 control-label text-left">
-                Resource URI
-                <portainer-tooltip position="bottom" message="URI where portainer will attempt to retrieve the user identifier value"></portainer-tooltip>
-              </label>
-              <div class="col-sm-9 col-lg-10">
-                <input type="text" class="form-control" id="oauth_resource_uri" ng-model="OAuthSettings.ResourceURI" placeholder="https://example.com/user">
-              </div>
-            </div>
-
-            <div class="form-group">
-              <label for="oauth_redirect_uri" class="col-sm-3 col-lg-2 control-label text-left">
-                Redirect URI
-                <portainer-tooltip position="bottom" message="Set this as your portainer index"></portainer-tooltip>
-              </label>
-              <div class="col-sm-9 col-lg-10">
-                <input type="text" class="form-control" id="oauth_redirect_uri" ng-model="OAuthSettings.RedirectURI" placeholder="http://yourportainer.com/">
-              </div>
-            </div>
-
-            <div class="form-group">
-              <label for="oauth_user_identifier" class="col-sm-3 col-lg-2 control-label text-left">
-                User Identifier
-                <portainer-tooltip position="bottom" message="Key that identifies the user in the resource server request"></portainer-tooltip>
-              </label>
-              <div class="col-sm-9 col-lg-10">
-                <input type="text" class="form-control" id="oauth_user_identifier" ng-model="OAuthSettings.UserIdentifier" placeholder="id">
-              </div>
-            </div>
-
-            <div class="form-group">
-              <label for="oauth_scopes" class="col-sm-3 col-lg-2 control-label text-left">
-                Scopes
-                <portainer-tooltip position="bottom" message="Scopes that are required to obtain the user identifier separated by delimiter if server expects it"></portainer-tooltip>
-              </label>
-              <div class="col-sm-9 col-lg-10">
-                <input type="text" class="form-control" id="oauth_scopes" ng-model="OAuthSettings.Scopes" placeholder="id,email,name">
-              </div>
-            </div>
-
-            <div class="form-group">
-              <span class="col-sm-12 text-muted small">
-                With automatic user provisioning enabled, Portainer will create user(s) automatically with standard user role. If disabled, users must be created in Portainer in order to login.
-              </span>
-            </div>
-            <div class="form-group">
-              <div class="col-sm-12">
-                <label for="oauth_provisioning">
-                  Automatic user provisioning
-                </label>
-                <label class="switch" style="margin-left: 20px">
-                  <input type="checkbox" ng-model="OAuthSettings.OAuthAutoCreateUsers"><i></i>
-                </label>
-              </div>
-            </div>
-          </div>
+          <oauth-settings ng-if="settings.AuthenticationMethod === 3" settings="OAuthSettings"></oauth-settings>
 
             <!-- actions -->
           <div class="form-group">
diff --git a/app/portainer/views/settings/authentication/settingsAuthenticationController.js b/app/portainer/views/settings/authentication/settingsAuthenticationController.js
index 81f096942..a94dfd658 100644
--- a/app/portainer/views/settings/authentication/settingsAuthenticationController.js
+++ b/app/portainer/views/settings/authentication/settingsAuthenticationController.js
@@ -14,6 +14,10 @@ function ($q, $scope, Notifications, SettingsService, FileUploadService) {
     TLSCACert: ''
   };
 
+  $scope.isOauthEnabled = function isOauthEnabled() {
+    return $scope.settings.AuthenticationMethod === 3;
+  };
+
   $scope.addSearchConfiguration = function() {
     $scope.LDAPSettings.SearchSettings.push({ BaseDN: '', UserNameAttribute: '', Filter: '' });
   };