diff --git a/app/javascript/src/Settings/components/Form.jsx b/app/javascript/src/Settings/components/Form.jsx
new file mode 100644
index 0000000000..3ff29e80d1
--- /dev/null
+++ b/app/javascript/src/Settings/components/Form.jsx
@@ -0,0 +1,58 @@
+// @flow
+
+import * as React from 'react'
+import { useState } from 'react'
+import { FormFieldset, FormLegend } from 'Form'
+import { FormCollection, TextInputGroup, RadioFieldset } from 'Settings/components/Common'
+import { AuthenticationSettingsFieldset } from 'Settings/components/AuthenticationSettingsFieldset'
+import type { SettingsProps as Props } from 'Settings/types'
+
+const SERVICE_MESH_INTEGRATION = 'service_mesh_istio'
+const PROXY_HOSTED_INTEGRATION = 'hosted'
+
+const Form = ({
+  isProxyCustomUrlActive,
+  integrationMethod,
+  authenticationMethod,
+  proxyEndpoints,
+  authenticationSettings,
+  credentialsLocation,
+  security,
+  gatewayResponse
+}: Props) => {
+  const [ selectedIntegrationMethod, setSelectedIntegrationMethod ] = useState(integrationMethod.value)
+  const [ selectedAuthenticationMethod, setSelectedAuthenticationMethod ] = useState(authenticationMethod.value)
+  const onChange = (setState) => (_checked, e) => setState(e.currentTarget.value)
+  const isServiceMesh = selectedIntegrationMethod === SERVICE_MESH_INTEGRATION
+  const isProxyHosted = selectedIntegrationMethod === PROXY_HOSTED_INTEGRATION
+  const isProxyUrlsReadOnly = !isProxyCustomUrlActive && isProxyHosted
+  const customProxyEndpoints = proxyEndpoints.map(endpoint =>
+    ({ ...endpoint, readOnly: isProxyUrlsReadOnly, isDefaultValue: isProxyUrlsReadOnly }))
+
+  return (
+    <React.Fragment>
+      <RadioFieldset {...integrationMethod} onChange={onChange(setSelectedIntegrationMethod)} value={selectedIntegrationMethod} legend='Integration' />
+      { !isServiceMesh && <FormCollection collection={customProxyEndpoints} ItemComponent={TextInputGroup} legend='API gateway' /> }
+      <RadioFieldset {...authenticationMethod} onChange={onChange(setSelectedAuthenticationMethod)} value={selectedAuthenticationMethod} legend='Authentication' />
+      <AuthenticationSettingsFieldset
+        isServiceMesh={isServiceMesh}
+        authenticationMethod={selectedAuthenticationMethod}
+        {...authenticationSettings}
+      />
+      { !isServiceMesh && <React.Fragment>
+        <RadioFieldset {...credentialsLocation} legend='Credentials Location' />
+        <FormCollection collection={security} ItemComponent={TextInputGroup} legend='Security' />
+        <FormFieldset id='fieldset-GatewayResponse'>
+          <FormLegend>Gateway Response</FormLegend>
+          {gatewayResponse.map(settings => (
+            <FormCollection key={settings.legend} collection={settings.collection} ItemComponent={TextInputGroup} legend={settings.legend} />
+          ))}
+        </FormFieldset>
+      </React.Fragment> }
+    </React.Fragment>
+  )
+}
+
+export {
+  Form
+}
diff --git a/app/javascript/src/Settings/index.jsx b/app/javascript/src/Settings/index.jsx
new file mode 100644
index 0000000000..b5b1f1d842
--- /dev/null
+++ b/app/javascript/src/Settings/index.jsx
@@ -0,0 +1,21 @@
+// @flow
+
+import * as React from 'react'
+import { createReactWrapper } from 'utilities/createReactWrapper'
+import { Form } from 'Settings/components/Form'
+import { SETTINGS_DEFAULT } from 'Settings/defaults'
+import type { SettingsProps } from 'Settings/types'
+
+type Props = {
+  settings: SettingsProps,
+  elementId: string
+}
+
+const initSettings = ({
+  settings = SETTINGS_DEFAULT,
+  elementId
+}: Props) => createReactWrapper(<Form {...settings} />, elementId)
+
+export {
+  initSettings
+}
diff --git a/spec/javascripts/Settings/components/Form.spec.jsx b/spec/javascripts/Settings/components/Form.spec.jsx
new file mode 100644
index 0000000000..4dba25e04d
--- /dev/null
+++ b/spec/javascripts/Settings/components/Form.spec.jsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { Form } from 'Settings/components/Form'
+import {
+  SETTINGS_DEFAULT,
+  INTEGRATION_METHOD_DEFAULTS
+} from 'Settings/defaults'
+
+function setup (customProps = {}) {
+  const props = {
+    ...SETTINGS_DEFAULT,
+    ...customProps
+  }
+
+  const view = shallow(<Form {...props} />)
+
+  return { view, props }
+}
+
+it('should render correctly', () => {
+  const { view } = setup()
+  expect(view).toMatchSnapshot()
+})
+
+it('should not render Auth Settings, Security, Credential Locations and API Gateway when Istio is selected', () => {
+  const customProps = { integrationMethod: {...INTEGRATION_METHOD_DEFAULTS, value: 'service_mesh_istio'} }
+  const { view } = setup(customProps)
+  expect(view).toMatchSnapshot()
+})
diff --git a/spec/javascripts/Settings/components/__snapshots__/Form.spec.jsx.snap b/spec/javascripts/Settings/components/__snapshots__/Form.spec.jsx.snap
new file mode 100644
index 0000000000..42bec4b42c
--- /dev/null
+++ b/spec/javascripts/Settings/components/__snapshots__/Form.spec.jsx.snap
@@ -0,0 +1,424 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should not render Auth Settings, Security, Credential Locations and API Gateway when Istio is selected 1`] = `
+<Fragment>
+  <RadioFieldset
+    catalog={
+      Object {
+        "hosted": "APIcast a 3scale managed",
+        "self_managed": "APIcast self-managed",
+        "service_mesh_istio": "Istio",
+      }
+    }
+    legend="Integration"
+    name="deployment_option"
+    onChange={[Function]}
+    value="service_mesh_istio"
+  />
+  <RadioFieldset
+    catalog={
+      Object {
+        "1": "API Key (user_key)",
+        "2": "App_ID and App_Key Pair",
+        "oidc": "OpenID Connect",
+      }
+    }
+    legend="Authentication"
+    name="proxy_authentication_method"
+    onChange={[Function]}
+    value="1"
+  />
+  <AuthenticationSettingsFieldset
+    apiKeySettings={
+      Object {
+        "label": "Auth user key",
+        "name": "auth_user_key",
+        "value": "user_key",
+      }
+    }
+    appIdKeyPairSettings={
+      Array [
+        Object {
+          "hint": "Public address of your API gateway in the staging environment.",
+          "label": "App ID parameter",
+          "name": "auth_app_id",
+          "value": "app_id",
+        },
+        Object {
+          "label": "App Key parameter",
+          "name": "auth_app_key",
+          "value": "app_key",
+        },
+      ]
+    }
+    authenticationMethod="1"
+    isServiceMesh={true}
+    oidcSettings={
+      Object {
+        "basicSettings": Object {
+          "item": Object {
+            "hint": "Location of your OpenID Provider. The format of this endpoint is determined on your OpenID Provider setup. A common guidance would be \\"https://CLIENT_ID:CLIENT_SECRET@HOST:PORT/auth/realms/REALM_NAME\\".",
+            "label": "OpenID Connect Issuer",
+            "name": "oidc_issuer_endpoint",
+            "placeholder": "https://sso.example.com/auth/realms/gateway",
+            "value": "",
+          },
+          "type": Object {
+            "catalog": Object {
+              "keycloak": "Red Hat Single Sign-On",
+              "rest": "REST API",
+            },
+            "label": "OpenID Connect Issuer Type",
+            "name": "oidc_issuer_type",
+            "value": "keycloak",
+          },
+        },
+        "flowSettings": Array [
+          Object {
+            "checked": false,
+            "label": "Service Accounts Flow",
+            "name": "service_accounts_enabled",
+          },
+          Object {
+            "checked": false,
+            "label": "Authorization Code Flow",
+            "name": "standard_flow_enabled",
+          },
+          Object {
+            "checked": false,
+            "label": "Implicit Flow",
+            "name": "implicit_flow_enabled",
+          },
+          Object {
+            "checked": false,
+            "label": "Direct Access Grant Flow",
+            "name": "direct_access_grants_enabled",
+          },
+        ],
+        "jwtSettings": Object {
+          "item": Object {
+            "hint": "The Token Claim that contains the clientID. Defaults to \\"azp\\".",
+            "label": "ClientID Token Claim",
+            "name": "jwt_claim_with_client_id",
+            "placeholder": "azp",
+            "value": "azp",
+          },
+          "type": Object {
+            "catalog": Object {
+              "liquid": "liquid",
+              "plain": "plain",
+            },
+            "hint": "Process the ClientID Token Claim value as a string or as a liquid template. When set to \\"Liquid\\" you can define more complex rules. e.g. If \\"some_claim\\" is an array you can select the first value this like {{ some_claim | first }}.",
+            "label": "ClientID Token Claim Type",
+            "name": "jwt_claim_with_client_id_type",
+            "value": "plain",
+          },
+        },
+      }
+    }
+  />
+</Fragment>
+`;
+
+exports[`should render correctly 1`] = `
+<Fragment>
+  <RadioFieldset
+    catalog={
+      Object {
+        "hosted": "APIcast a 3scale managed",
+        "self_managed": "APIcast self-managed",
+        "service_mesh_istio": "Istio",
+      }
+    }
+    legend="Integration"
+    name="deployment_option"
+    onChange={[Function]}
+    value="hosted"
+  />
+  <FormCollection
+    ItemComponent={[Function]}
+    collection={
+      Array [
+        Object {
+          "defaultValue": "https://api-2.staging.apicast.com",
+          "hint": "Public address of your API gateway in the staging environment.",
+          "inputType": "url",
+          "isDefaultValue": true,
+          "label": "Staging Public Base URL",
+          "name": "sandbox_endpoint",
+          "placeholder": "https://api.provider-name.com",
+          "readOnly": true,
+          "value": "https://custom.api.staging.provider-name.com",
+        },
+        Object {
+          "defaultValue": "https://api-2.apicast.com",
+          "hint": "Public address of your API gateway in the production environment.",
+          "inputType": "url",
+          "isDefaultValue": true,
+          "label": "Staging Public Base URL",
+          "name": "endpoint",
+          "placeholder": "https://api.provider-name.com",
+          "readOnly": true,
+          "value": "https://custom.api.provider-name.com",
+        },
+      ]
+    }
+    legend="API gateway"
+  />
+  <RadioFieldset
+    catalog={
+      Object {
+        "1": "API Key (user_key)",
+        "2": "App_ID and App_Key Pair",
+        "oidc": "OpenID Connect",
+      }
+    }
+    legend="Authentication"
+    name="proxy_authentication_method"
+    onChange={[Function]}
+    value="1"
+  />
+  <AuthenticationSettingsFieldset
+    apiKeySettings={
+      Object {
+        "label": "Auth user key",
+        "name": "auth_user_key",
+        "value": "user_key",
+      }
+    }
+    appIdKeyPairSettings={
+      Array [
+        Object {
+          "hint": "Public address of your API gateway in the staging environment.",
+          "label": "App ID parameter",
+          "name": "auth_app_id",
+          "value": "app_id",
+        },
+        Object {
+          "label": "App Key parameter",
+          "name": "auth_app_key",
+          "value": "app_key",
+        },
+      ]
+    }
+    authenticationMethod="1"
+    isServiceMesh={false}
+    oidcSettings={
+      Object {
+        "basicSettings": Object {
+          "item": Object {
+            "hint": "Location of your OpenID Provider. The format of this endpoint is determined on your OpenID Provider setup. A common guidance would be \\"https://CLIENT_ID:CLIENT_SECRET@HOST:PORT/auth/realms/REALM_NAME\\".",
+            "label": "OpenID Connect Issuer",
+            "name": "oidc_issuer_endpoint",
+            "placeholder": "https://sso.example.com/auth/realms/gateway",
+            "value": "",
+          },
+          "type": Object {
+            "catalog": Object {
+              "keycloak": "Red Hat Single Sign-On",
+              "rest": "REST API",
+            },
+            "label": "OpenID Connect Issuer Type",
+            "name": "oidc_issuer_type",
+            "value": "keycloak",
+          },
+        },
+        "flowSettings": Array [
+          Object {
+            "checked": false,
+            "label": "Service Accounts Flow",
+            "name": "service_accounts_enabled",
+          },
+          Object {
+            "checked": false,
+            "label": "Authorization Code Flow",
+            "name": "standard_flow_enabled",
+          },
+          Object {
+            "checked": false,
+            "label": "Implicit Flow",
+            "name": "implicit_flow_enabled",
+          },
+          Object {
+            "checked": false,
+            "label": "Direct Access Grant Flow",
+            "name": "direct_access_grants_enabled",
+          },
+        ],
+        "jwtSettings": Object {
+          "item": Object {
+            "hint": "The Token Claim that contains the clientID. Defaults to \\"azp\\".",
+            "label": "ClientID Token Claim",
+            "name": "jwt_claim_with_client_id",
+            "placeholder": "azp",
+            "value": "azp",
+          },
+          "type": Object {
+            "catalog": Object {
+              "liquid": "liquid",
+              "plain": "plain",
+            },
+            "hint": "Process the ClientID Token Claim value as a string or as a liquid template. When set to \\"Liquid\\" you can define more complex rules. e.g. If \\"some_claim\\" is an array you can select the first value this like {{ some_claim | first }}.",
+            "label": "ClientID Token Claim Type",
+            "name": "jwt_claim_with_client_id_type",
+            "value": "plain",
+          },
+        },
+      }
+    }
+  />
+  <RadioFieldset
+    catalog={
+      Object {
+        "authorization": "As HTTP Basic Authentication",
+        "headers": "As HTTP Headers",
+        "query": "As query parameters (GET) or body parameters (POST/PUT/DELETE)",
+      }
+    }
+    legend="Credentials Location"
+    name="credentials_location"
+    value="headers"
+  />
+  <FormCollection
+    ItemComponent={[Function]}
+    collection={
+      Array [
+        Object {
+          "defaultValue": "",
+          "hint": "Lets you define a custom Host request header. This is needed if your API backend only accepts traffic from a specific host.",
+          "label": "Host Header",
+          "name": "hostname_rewrite",
+          "placeholder": "https://api.provider-name.com",
+          "readOnly": false,
+          "value": "",
+        },
+        Object {
+          "defaultValue": "",
+          "hint": "Enables you to block any direct developer requests to your API backend; each 3scale API gateway call to your API backend contains a request header called X-3scale-proxy-secret-token. The value of this header can be set by you here. It's up to you ensure your backend only allows calls with this secret header.",
+          "label": "Secret Token",
+          "name": "secret_token",
+          "placeholder": "https://api.provider-name.com",
+          "readOnly": false,
+          "value": "",
+        },
+      ]
+    }
+    legend="Security"
+  />
+  <FormFieldset
+    id="fieldset-GatewayResponse"
+  >
+    <FormLegend>
+      Gateway Response
+    </FormLegend>
+    <FormCollection
+      ItemComponent={[Function]}
+      collection={
+        Array [
+          Object {
+            "inputType": "number",
+            "label": "Response Code",
+            "name": "error_status_auth_failed",
+            "value": "403",
+          },
+          Object {
+            "inputType": "text",
+            "label": "Content-type",
+            "name": "error_headers_auth_failed",
+            "value": "text/plain; charset=us-ascii",
+          },
+          Object {
+            "inputType": "text",
+            "label": "Response Body",
+            "name": "error_auth_failed",
+            "value": "Authentication failed",
+          },
+        ]
+      }
+      key="Authentication Failed Error"
+      legend="Authentication Failed Error"
+    />
+    <FormCollection
+      ItemComponent={[Function]}
+      collection={
+        Array [
+          Object {
+            "inputType": "number",
+            "label": "Response Code",
+            "name": "error_status_auth_missing",
+            "value": "403",
+          },
+          Object {
+            "inputType": "text",
+            "label": "Content-type",
+            "name": "error_headers_auth_missing",
+            "value": "text/plain; charset=us-ascii",
+          },
+          Object {
+            "inputType": "text",
+            "label": "Response Body",
+            "name": "error_auth_missing",
+            "value": "Authentication parameters missing",
+          },
+        ]
+      }
+      key="Authentication Missing Error"
+      legend="Authentication Missing Error"
+    />
+    <FormCollection
+      ItemComponent={[Function]}
+      collection={
+        Array [
+          Object {
+            "inputType": "number",
+            "label": "Response Code",
+            "name": "error_status_no_match",
+            "value": "404",
+          },
+          Object {
+            "inputType": "text",
+            "label": "Content-type",
+            "name": "error_headers_no_match",
+            "value": "text/plain; charset=us-ascii",
+          },
+          Object {
+            "inputType": "text",
+            "label": "Response Body",
+            "name": "error_no_match",
+            "value": "No Mapping Rule matched",
+          },
+        ]
+      }
+      key="Match Error"
+      legend="Match Error"
+    />
+    <FormCollection
+      ItemComponent={[Function]}
+      collection={
+        Array [
+          Object {
+            "inputType": "number",
+            "label": "Response Code",
+            "name": "error_status_limits_exceeded",
+            "value": "429",
+          },
+          Object {
+            "inputType": "text",
+            "label": "Content-type",
+            "name": "error_headers_limits_exceeded",
+            "value": "text/plain; charset=us-ascii",
+          },
+          Object {
+            "inputType": "text",
+            "label": "Response Body",
+            "name": "error_limits_exceeded",
+            "value": "Usage limit exceeded",
+          },
+        ]
+      }
+      key="Usage limit exceeded error"
+      legend="Usage limit exceeded error"
+    />
+  </FormFieldset>
+</Fragment>
+`;