diff --git a/account-console/src/main/resources/theme/learning-layers-account/account/.gitignore b/account-console/src/main/resources/theme/learning-layers-account/account/.gitignore
index 53c766c..28a0fec 100644
--- a/account-console/src/main/resources/theme/learning-layers-account/account/.gitignore
+++ b/account-console/src/main/resources/theme/learning-layers-account/account/.gitignore
@@ -1,5 +1,5 @@
 src/node_modules
 src/web_modules
-/resources/
+/resources/*
 
 !/resources/content.json
\ No newline at end of file
diff --git a/account-console/src/main/resources/theme/learning-layers-account/account/src/app/content/learning-layers-account/ManageClientPage.tsx b/account-console/src/main/resources/theme/learning-layers-account/account/src/app/content/learning-layers-account/ManageClientPage.tsx
index 832be60..9bf1983 100644
--- a/account-console/src/main/resources/theme/learning-layers-account/account/src/app/content/learning-layers-account/ManageClientPage.tsx
+++ b/account-console/src/main/resources/theme/learning-layers-account/account/src/app/content/learning-layers-account/ManageClientPage.tsx
@@ -7,12 +7,13 @@ import {
     ActionGroup,
     Button, ButtonVariant, ExpandableSection,
     Form,
-    FormGroup, Grid, GridItem, InputGroup,
+    FormGroup, Grid, GridItem, InputGroup, PageSectionVariants,
     Select,
     SelectOption,
     SelectVariant,
     Switch, Text,
-    TextInput
+    TextInput,
+    Stack, PageSection
 } from "@patternfly/react-core";
 import {ClientRepresentation} from "./ClientRepresentation";
 import {HttpResponse} from "../../account-service/account.service";
@@ -405,616 +406,619 @@ export class ManageClient extends React.Component<ManagePageProps, ManagePageSta
         return(
             <ContentPage title={(this.state.noClient ? 'Create new client' : Msg.localize("manageClientTitle") + ' ' + this.state.client.clientId)}
                          introMessage={(this.state.noClient ? '' : Msg.localize("manageClientDescription"))}>
-                {!this.state.noClient && (
-                    <React.Fragment>
-                        <Grid>
-                            <GridItem offset={12}>
-                                <Button id="admin-token-btn" variant="tertiary" onClick={this.handleCopyAdminTok}>
-                                    <Msg msgKey="doCopyAdminToken" />
-                                </Button>
-                            </GridItem>
-                        </Grid>
-                        <div className="pf-c-divider pf-m-vertical pf-m-inset-md" role="separator"> </div>
-                    </React.Fragment>
-                )}
-                <Form isHorizontal onSubmit={event => this.handleSubmit(event)}>
-                    {this.state.noClient ?
-                        <React.Fragment>
-                            <FormGroup
-                                label={Msg.localize('clientId')}
-                                isRequired
-                                fieldId='client-id'
-                            >
-                                <TextInput
-                                    isRequired
-                                    type='text'
-                                    id='client-id'
-                                    name='clientId'
-                                    maxLength={254}
-                                    value={client.clientId}
-                                    onChange={this.handleChange}
-                                />
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize('clientRootUrl')}
-                                fieldId='client-root-url'
-                            >
-                                <TextInput
-                                    type='url'
-                                    id='client-root-url'
-                                    name='rootUrl'
-                                    maxLength={254}
-                                    value={client.rootUrl ? client.rootUrl : ''}
-                                    onChange={this.handleChange}
-                                />
-                            </FormGroup>
-                        </React.Fragment>
-                        :
-                        <React.Fragment>
-                            <FormGroup
-                                label={Msg.localize('clientId')}
-                                isRequired
-                                fieldId='client-id'
-                            >
-                                <TextInput
-                                    isRequired
-                                    type='text'
-                                    id='client-id'
-                                    name='clientId'
-                                    maxLength={254}
-                                    value={client.clientId}
-                                    onChange={this.handleChange}
-                                />
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize('clientName')}
-                                fieldId='client-name'
-                            >
-                                <TextInput
-                                    type='text'
-                                    id='client-name'
-                                    name='name'
-                                    maxLength={254}
-                                    value={client.name ? client.name : ''}
-                                    onChange={this.handleChange}
-                                />
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize('clientDescription')}
-                                fieldId='client-description'
-                            >
-                                <TextInput
-                                    type='text'
-                                    id='client-description'
-                                    name='description'
-                                    maxLength={254}
-                                    value={client.description ? client.description : ''}
-                                    onChange={this.handleChange}
-                                />
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize('clientSecret')}
-                                isRequired={!client.publicClient && !client.bearerOnly}
-                                fieldId='client-secret'
-                            >
-                                <TextInput
-                                    isRequired={!client.publicClient && !client.bearerOnly}
-                                    isDisabled={client.publicClient || client.bearerOnly}
-                                    type='text'
-                                    id='client-secret'
-                                    name='secret'
-                                    maxLength={254}
-                                    value={(!client.secret && (client.publicClient || client.bearerOnly)) ? 'This type of clients do not have secrets' : (!client.secret ? '' : client.secret) }
-                                    onChange={this.handleChange}
-                                />
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize('clientEnabled')}
-                                fieldId='client-enabled'
-                            >
-                                <Switch
-                                    id='client-enabled'
-                                    name='enabled'
-                                    label=' '
-                                    labelOff=' '
-                                    isChecked={client.enabled}
-                                    onChange={this.handleChange}
-                                />
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize('clientAlwaysDisplayInConsole')}
-                                fieldId='client-always-display-in-console'
-                            >
-                                <Switch
-                                    id='client-always-display-in-console'
-                                    name='alwaysDisplayInConsole'
-                                    label=' '
-                                    labelOff=' '
-                                    isChecked={client.alwaysDisplayInConsole}
-                                    onChange={this.handleChange}
-                                />
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize('clientConsentRequired')}
-                                fieldId='client-consent-required'
-                            >
-                                <Switch
-                                    id='client-consent-required'
-                                    name='consentRequired'
-                                    label=' '
-                                    labelOff=' '
-                                    isChecked={client.consentRequired}
-                                    onChange={this.handleChange}
-                                />
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize('clientAccessType')}
-                                fieldId='client-access-type'
-                            >
-                                <Select
-                                    direction='down'
-                                    variant={SelectVariant.single}
-                                    aria-label="Select the access type"
-                                    onToggle={this.toggleAccessType}
-                                    onSelect={this.selectAccessType}
-                                    selections={this.state.accessTypeSelected}
-                                    isOpen={this.state.accessTypeExpanded}
-                                >
-                                    {[
-                                        <SelectOption key={0} value={accessTypes.confidential}/>,
-                                        <SelectOption key={1} value={accessTypes.public}/>,
-                                        <SelectOption key={2} value={accessTypes.bearer_only}/>
-                                    ]}
-                                </Select>
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize('clientStandardFlowEnabled')}
-                                fieldId='client-standard-flow-enabled'
-                            >
-                                <Switch
-                                    id='client-standard-flow-enabled'
-                                    name='standardFlowEnabled'
-                                    label=' '
-                                    labelOff=' '
-                                    isChecked={client.standardFlowEnabled}
-                                    onChange={this.handleChange}
-                                />
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize('clientImplicitFlowEnabled')}
-                                fieldId='client-implicit-flow-enabled'
-                            >
-                                <Switch
-                                    id='client-implicit-flow-enabled'
-                                    name='implicitFlowEnabled'
-                                    label=' '
-                                    labelOff=' '
-                                    isChecked={client.implicitFlowEnabled}
-                                    onChange={this.handleChange}
-                                />
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize('clientDirectAccessGrantsEnabled')}
-                                fieldId='client-direct-access-grants-enabled'
-                            >
-                                <Switch
-                                    id='client-direct-access-grants-enabled'
-                                    name='directAccessGrantsEnabled'
-                                    label=' '
-                                    labelOff=' '
-                                    isChecked={client.directAccessGrantsEnabled}
-                                    onChange={this.handleChange}
-                                />
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize('clientServiceAccountsEnabled')}
-                                fieldId='client-service-accounts-enabled'
-                            >
-                                <Switch
-                                    id='client-service-accounts-enabled'
-                                    name='serviceAccountsEnabled'
-                                    label=' '
-                                    labelOff=' '
-                                    isChecked={client.serviceAccountsEnabled}
-                                    onChange={this.handleChange}
-                                />
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize('clientOauth2DeviceEnabled')}
-                                fieldId='client-oauth2-device-enabled'
-                            >
-                                <Switch
-                                    id='client-oauth2-device-enabled'
-                                    name='oauth2.device.authorization.grant.enabled'
-                                    label=' '
-                                    labelOff=' '
-                                    isChecked={client.attributes["oauth2.device.authorization.grant.enabled"] === 'true'}
-                                    onChange={this.handleAttrChange}
-                                />
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize('clientRootUrl')}
-                                fieldId='client-root-url'
-                            >
-                                <TextInput
-                                    type='url'
-                                    id='client-root-url'
-                                    name='rootUrl'
-                                    maxLength={254}
-                                    value={client.rootUrl ? client.rootUrl : ''}
-                                    onChange={this.handleChange}
-                                />
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize("clientRedirectUris")}
-                                fieldId="client-redirect-uri"
-                                isRequired
-                                // labelIcon={
-                                //     <HelpItem
-                                //         helpText="clients-help:validRedirectURIs"
-                                //         forLabel={t("validRedirectUri")}
-                                //         forID={t(`common:helpLabel`, { label: t("validRedirectUri") })}
-                                //     />
-                                // }
-                            >
-                                {client.redirectUris.length > 1 ?
-                                    client.redirectUris.map((uri: string, index: number) => {
-                                        return (
-                                            <React.Fragment>
-                                                <InputGroup>
-                                                    <TextInput
-                                                        type='text'
-                                                        isRequired
-                                                        id='client-redirect-uri'
-                                                        name={'redirectUris-' + index}
-                                                        value={uri}
-                                                        onChange={this.handleArrayChange}
-                                                    />
-                                                    <Button
-                                                        variant={ButtonVariant.link}
-                                                        onClick={() => this.removeUri(index, 'redirectUris')}
-                                                        tabIndex={-1}
-                                                        aria-label='remove'
-                                                    >
-                                                        <MinusCircleIcon/>
-                                                    </Button>
-                                                </InputGroup>
-                                            </React.Fragment>
-                                        )
-                                    }) :
-                                    <InputGroup>
+                <PageSection isFilled variant={PageSectionVariants.light}>
+                    <Stack hasGutter>
+                        {!this.state.noClient && (
+                            <React.Fragment>
+                                <Grid>
+                                    <GridItem offset={12}>
+                                        <Button id="admin-token-btn" variant="tertiary" onClick={this.handleCopyAdminTok}>
+                                            <Msg msgKey="doCopyAdminToken" />
+                                        </Button>
+                                    </GridItem>
+                                </Grid>
+                            </React.Fragment>
+                        )}
+                        <Form isHorizontal onSubmit={event => this.handleSubmit(event)}>
+                            {this.state.noClient ?
+                                <React.Fragment>
+                                    <FormGroup
+                                        label={Msg.localize('clientId')}
+                                        isRequired
+                                        fieldId='client-id'
+                                    >
                                         <TextInput
+                                            isRequired
                                             type='text'
+                                            id='client-id'
+                                            name='clientId'
+                                            maxLength={254}
+                                            value={client.clientId}
+                                            onChange={this.handleChange}
+                                        />
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize('clientRootUrl')}
+                                        fieldId='client-root-url'
+                                    >
+                                        <TextInput
+                                            type='url'
+                                            id='client-root-url'
+                                            name='rootUrl'
+                                            maxLength={254}
+                                            value={client.rootUrl ? client.rootUrl : ''}
+                                            onChange={this.handleChange}
+                                        />
+                                    </FormGroup>
+                                </React.Fragment>
+                                :
+                                <React.Fragment>
+                                    <FormGroup
+                                        label={Msg.localize('clientId')}
+                                        isRequired
+                                        fieldId='client-id'
+                                    >
+                                        <TextInput
                                             isRequired
-                                            id='client-redirect-uri'
-                                            name={'redirectUris-' + 0}
-                                            value={client.redirectUris[0] ? client.redirectUris[0] : ''}
-                                            onChange={this.handleArrayChange}
+                                            type='text'
+                                            id='client-id'
+                                            name='clientId'
+                                            maxLength={254}
+                                            value={client.clientId}
+                                            onChange={this.handleChange}
+                                        />
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize('clientName')}
+                                        fieldId='client-name'
+                                    >
+                                        <TextInput
+                                            type='text'
+                                            id='client-name'
+                                            name='name'
+                                            maxLength={254}
+                                            value={client.name ? client.name : ''}
+                                            onChange={this.handleChange}
+                                        />
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize('clientDescription')}
+                                        fieldId='client-description'
+                                    >
+                                        <TextInput
+                                            type='text'
+                                            id='client-description'
+                                            name='description'
+                                            maxLength={254}
+                                            value={client.description ? client.description : ''}
+                                            onChange={this.handleChange}
+                                        />
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize('clientSecret')}
+                                        isRequired={!client.publicClient && !client.bearerOnly}
+                                        fieldId='client-secret'
+                                    >
+                                        <TextInput
+                                            isRequired={!client.publicClient && !client.bearerOnly}
+                                            isDisabled={client.publicClient || client.bearerOnly}
+                                            type='text'
+                                            id='client-secret'
+                                            name='secret'
+                                            maxLength={254}
+                                            value={(!client.secret && (client.publicClient || client.bearerOnly)) ? 'This type of clients do not have secrets' : (!client.secret ? '' : client.secret) }
+                                            onChange={this.handleChange}
+                                        />
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize('clientEnabled')}
+                                        fieldId='client-enabled'
+                                    >
+                                        <Switch
+                                            id='client-enabled'
+                                            name='enabled'
+                                            label=' '
+                                            labelOff=' '
+                                            isChecked={client.enabled}
+                                            onChange={this.handleChange}
+                                        />
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize('clientAlwaysDisplayInConsole')}
+                                        fieldId='client-always-display-in-console'
+                                    >
+                                        <Switch
+                                            id='client-always-display-in-console'
+                                            name='alwaysDisplayInConsole'
+                                            label=' '
+                                            labelOff=' '
+                                            isChecked={client.alwaysDisplayInConsole}
+                                            onChange={this.handleChange}
+                                        />
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize('clientConsentRequired')}
+                                        fieldId='client-consent-required'
+                                    >
+                                        <Switch
+                                            id='client-consent-required'
+                                            name='consentRequired'
+                                            label=' '
+                                            labelOff=' '
+                                            isChecked={client.consentRequired}
+                                            onChange={this.handleChange}
+                                        />
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize('clientAccessType')}
+                                        fieldId='client-access-type'
+                                    >
+                                        <Select
+                                            direction='down'
+                                            variant={SelectVariant.single}
+                                            aria-label="Select the access type"
+                                            onToggle={this.toggleAccessType}
+                                            onSelect={this.selectAccessType}
+                                            selections={this.state.accessTypeSelected}
+                                            isOpen={this.state.accessTypeExpanded}
+                                        >
+                                            {[
+                                                <SelectOption key={0} value={accessTypes.confidential}/>,
+                                                <SelectOption key={1} value={accessTypes.public}/>,
+                                                <SelectOption key={2} value={accessTypes.bearer_only}/>
+                                            ]}
+                                        </Select>
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize('clientStandardFlowEnabled')}
+                                        fieldId='client-standard-flow-enabled'
+                                    >
+                                        <Switch
+                                            id='client-standard-flow-enabled'
+                                            name='standardFlowEnabled'
+                                            label=' '
+                                            labelOff=' '
+                                            isChecked={client.standardFlowEnabled}
+                                            onChange={this.handleChange}
                                         />
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize('clientImplicitFlowEnabled')}
+                                        fieldId='client-implicit-flow-enabled'
+                                    >
+                                        <Switch
+                                            id='client-implicit-flow-enabled'
+                                            name='implicitFlowEnabled'
+                                            label=' '
+                                            labelOff=' '
+                                            isChecked={client.implicitFlowEnabled}
+                                            onChange={this.handleChange}
+                                        />
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize('clientDirectAccessGrantsEnabled')}
+                                        fieldId='client-direct-access-grants-enabled'
+                                    >
+                                        <Switch
+                                            id='client-direct-access-grants-enabled'
+                                            name='directAccessGrantsEnabled'
+                                            label=' '
+                                            labelOff=' '
+                                            isChecked={client.directAccessGrantsEnabled}
+                                            onChange={this.handleChange}
+                                        />
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize('clientServiceAccountsEnabled')}
+                                        fieldId='client-service-accounts-enabled'
+                                    >
+                                        <Switch
+                                            id='client-service-accounts-enabled'
+                                            name='serviceAccountsEnabled'
+                                            label=' '
+                                            labelOff=' '
+                                            isChecked={client.serviceAccountsEnabled}
+                                            onChange={this.handleChange}
+                                        />
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize('clientOauth2DeviceEnabled')}
+                                        fieldId='client-oauth2-device-enabled'
+                                    >
+                                        <Switch
+                                            id='client-oauth2-device-enabled'
+                                            name='oauth2.device.authorization.grant.enabled'
+                                            label=' '
+                                            labelOff=' '
+                                            isChecked={client.attributes["oauth2.device.authorization.grant.enabled"] === 'true'}
+                                            onChange={this.handleAttrChange}
+                                        />
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize('clientRootUrl')}
+                                        fieldId='client-root-url'
+                                    >
+                                        <TextInput
+                                            type='url'
+                                            id='client-root-url'
+                                            name='rootUrl'
+                                            maxLength={254}
+                                            value={client.rootUrl ? client.rootUrl : ''}
+                                            onChange={this.handleChange}
+                                        />
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize("clientRedirectUris")}
+                                        fieldId="client-redirect-uri"
+                                        isRequired
+                                        // labelIcon={
+                                        //     <HelpItem
+                                        //         helpText="clients-help:validRedirectURIs"
+                                        //         forLabel={t("validRedirectUri")}
+                                        //         forID={t(`common:helpLabel`, { label: t("validRedirectUri") })}
+                                        //     />
+                                        // }
+                                    >
+                                        {client.redirectUris.length > 1 ?
+                                            client.redirectUris.map((uri: string, index: number) => {
+                                                return (
+                                                    <React.Fragment>
+                                                        <InputGroup>
+                                                            <TextInput
+                                                                type='text'
+                                                                isRequired
+                                                                id='client-redirect-uri'
+                                                                name={'redirectUris-' + index}
+                                                                value={uri}
+                                                                onChange={this.handleArrayChange}
+                                                            />
+                                                            <Button
+                                                                variant={ButtonVariant.link}
+                                                                onClick={() => this.removeUri(index, 'redirectUris')}
+                                                                tabIndex={-1}
+                                                                aria-label='remove'
+                                                            >
+                                                                <MinusCircleIcon/>
+                                                            </Button>
+                                                        </InputGroup>
+                                                    </React.Fragment>
+                                                )
+                                            }) :
+                                            <InputGroup>
+                                                <TextInput
+                                                    type='text'
+                                                    isRequired
+                                                    id='client-redirect-uri'
+                                                    name={'redirectUris-' + 0}
+                                                    value={client.redirectUris[0] ? client.redirectUris[0] : ''}
+                                                    onChange={this.handleArrayChange}
+                                                />
+                                                <Button
+                                                    variant={ButtonVariant.link}
+                                                    onClick={() => this.removeUri(0, 'redirectUris')}
+                                                    tabIndex={-1}
+                                                    aria-label='remove'
+                                                    isDisabled={client.redirectUris.length !== 1}
+                                                >
+                                                    <MinusCircleIcon/>
+                                                </Button>
+                                            </InputGroup>
+                                        }
                                         <Button
                                             variant={ButtonVariant.link}
-                                            onClick={() => this.removeUri(0, 'redirectUris')}
+                                            onClick={() => this.addUri('redirectUris')}
                                             tabIndex={-1}
-                                            aria-label='remove'
-                                            isDisabled={client.redirectUris.length !== 1}
+                                            ara-label='add'
                                         >
-                                            <MinusCircleIcon/>
+                                            <PlusCircleIcon/> {'add URI'}
                                         </Button>
-                                    </InputGroup>
-                                }
-                                <Button
-                                    variant={ButtonVariant.link}
-                                    onClick={() => this.addUri('redirectUris')}
-                                    tabIndex={-1}
-                                    ara-label='add'
-                                >
-                                    <PlusCircleIcon/> {'add URI'}
-                                </Button>
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize('clientBaseUrl')}
-                                fieldId='client-base-url'
-                            >
-                                <TextInput
-                                    type='text'
-                                    id='client-base-url'
-                                    name='baseUrl'
-                                    maxLength={254}
-                                    value={client.baseUrl ? client.baseUrl : ''}
-                                    onChange={this.handleChange}
-                                />
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize('clientAdminUrl')}
-                                fieldId='client-admin-url'
-                            >
-                                <TextInput
-                                    type='text'
-                                    id='client-admin-url'
-                                    name='adminUrl'
-                                    maxLength={254}
-                                    value={client.adminUrl ? client.adminUrl : ''}
-                                    onChange={this.handleChange}
-                                />
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize("clientWebOrigins")}
-                                fieldId="client-web-origins"
-                                // labelIcon={
-                                //     <HelpItem
-                                //         helpText="clients-help:validRedirectURIs"
-                                //         forLabel={t("validRedirectUri")}
-                                //         forID={t(`common:helpLabel`, { label: t("validRedirectUri") })}
-                                //     />
-                                // }
-                            >
-                                {client.webOrigins.length > 1 ?
-                                    client.webOrigins.map((origin: string, index: number) => (
-                                        <React.Fragment>
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize('clientBaseUrl')}
+                                        fieldId='client-base-url'
+                                    >
+                                        <TextInput
+                                            type='text'
+                                            id='client-base-url'
+                                            name='baseUrl'
+                                            maxLength={254}
+                                            value={client.baseUrl ? client.baseUrl : ''}
+                                            onChange={this.handleChange}
+                                        />
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize('clientAdminUrl')}
+                                        fieldId='client-admin-url'
+                                    >
+                                        <TextInput
+                                            type='text'
+                                            id='client-admin-url'
+                                            name='adminUrl'
+                                            maxLength={254}
+                                            value={client.adminUrl ? client.adminUrl : ''}
+                                            onChange={this.handleChange}
+                                        />
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize("clientWebOrigins")}
+                                        fieldId="client-web-origins"
+                                        // labelIcon={
+                                        //     <HelpItem
+                                        //         helpText="clients-help:validRedirectURIs"
+                                        //         forLabel={t("validRedirectUri")}
+                                        //         forID={t(`common:helpLabel`, { label: t("validRedirectUri") })}
+                                        //     />
+                                        // }
+                                    >
+                                        {client.webOrigins.length > 1 ?
+                                            client.webOrigins.map((origin: string, index: number) => (
+                                                <React.Fragment>
+                                                    <InputGroup>
+                                                        <TextInput
+                                                            type='text'
+                                                            id='client-web-origins'
+                                                            name={'webOrigins-' + index}
+                                                            value={origin}
+                                                            onChange={this.handleArrayChange}
+                                                        />
+                                                        <Button
+                                                            variant={ButtonVariant.link}
+                                                            onClick={() => this.removeUri(index, 'webOrigins')}
+                                                            tabIndex={-1}
+                                                            aria-label='remove'
+                                                        >
+                                                            <MinusCircleIcon/>
+                                                        </Button>
+                                                    </InputGroup>
+                                                </React.Fragment>
+                                            )) :
                                             <InputGroup>
                                                 <TextInput
                                                     type='text'
                                                     id='client-web-origins'
-                                                    name={'webOrigins-' + index}
-                                                    value={origin}
+                                                    name={'webOrigins-' + 0}
+                                                    value={client.webOrigins[0] ? client.webOrigins[0] : ''}
                                                     onChange={this.handleArrayChange}
                                                 />
                                                 <Button
                                                     variant={ButtonVariant.link}
-                                                    onClick={() => this.removeUri(index, 'webOrigins')}
+                                                    onClick={() => this.removeUri(0, 'webOrigins')}
                                                     tabIndex={-1}
                                                     aria-label='remove'
+                                                    isDisabled={client.webOrigins.length !== 1}
                                                 >
                                                     <MinusCircleIcon/>
                                                 </Button>
                                             </InputGroup>
-                                        </React.Fragment>
-                                    )) :
-                                    <InputGroup>
-                                        <TextInput
-                                            type='text'
-                                            id='client-web-origins'
-                                            name={'webOrigins-' + 0}
-                                            value={client.webOrigins[0] ? client.webOrigins[0] : ''}
-                                            onChange={this.handleArrayChange}
-                                        />
+                                        }
                                         <Button
                                             variant={ButtonVariant.link}
-                                            onClick={() => this.removeUri(0, 'webOrigins')}
+                                            onClick={() => this.addUri('webOrigins')}
                                             tabIndex={-1}
-                                            aria-label='remove'
-                                            isDisabled={client.webOrigins.length !== 1}
+                                            ara-label='add'
                                         >
-                                            <MinusCircleIcon/>
+                                            <PlusCircleIcon/> {'add URI'}
                                         </Button>
-                                    </InputGroup>
-                                }
-                                <Button
-                                    variant={ButtonVariant.link}
-                                    onClick={() => this.addUri('webOrigins')}
-                                    tabIndex={-1}
-                                    ara-label='add'
-                                >
-                                    <PlusCircleIcon/> {'add URI'}
-                                </Button>
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize('clientBackchannelLogoutUrl')}
-                                fieldId='client-backchannel-logout-url'
-                            >
-                                <TextInput
-                                    type='text'
-                                    id='client-backchannel-logout-url'
-                                    name='backchannel.logout.url'
-                                    maxLength={254}
-                                    value={client.attributes["backchannel.logout.url"] ? client.attributes["backchannel.logout.url"] : ''}
-                                    onChange={this.handleAttrChange}
-                                />
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize('clientBackchannelRequired')}
-                                fieldId='client-backchannel-required'
-                            >
-                                <Switch
-                                    id='client-backchannel-required'
-                                    name='backchannel.logout.session.required'
-                                    label=' '
-                                    labelOff=' '
-                                    isChecked={client.attributes["backchannel.logout.session.required"] === 'true'}
-                                    onChange={this.handleAttrChange}
-                                />
-                            </FormGroup>
-                            <FormGroup
-                                label={Msg.localize('clientBackchannelRevokeOfflineTokens')}
-                                fieldId='client-backchannel-revoke-offline-tokens'
-                            >
-                                <Switch
-                                    id='client-backchannel-revoke-offline-tokens'
-                                    name='backchannel.logout.revoke.offline.tokens'
-                                    label=' '
-                                    labelOff=' '
-                                    isChecked={client.attributes["backchannel.logout.revoke.offline.tokens"] === 'true'}
-                                    onChange={this.handleAttrChange}
-                                />
-                            </FormGroup>
-                            <ExpandableSection
-                                toggleText='OpenID Connect Compatibility Modes'
-                                onToggle={() => this.onToggle(0)}
-                                isExpanded={this.state.isExtended[0]}
-                            >
-                                <FormGroup
-                                    label={Msg.localize('clientExcludeSessionState')}
-                                    fieldId='client-exclude-session-state'
-                                >
-                                    <Switch
-                                        id='client-exclude-session-state'
-                                        name='exclude.session.state.from.auth.response'
-                                        label=' '
-                                        labelOff=' '
-                                        isChecked={client.attributes["exclude.session.state.from.auth.response"] === 'true'}
-                                        onChange={this.handleAttrChange}
-                                    />
-                                </FormGroup>
-                                <FormGroup
-                                    label={Msg.localize('clientUseRefreshTokens')}
-                                    fieldId='client-use-refresh-tokens'
-                                >
-                                    <Switch
-                                        id='client-use-refresh-tokens'
-                                        name='use.refresh.tokens'
-                                        label=' '
-                                        labelOff=' '
-                                        isChecked={client.attributes["use.refresh.tokens"] === 'true'}
-                                        onChange={this.handleAttrChange}
-                                    />
-                                </FormGroup>
-                                <FormGroup
-                                    label={Msg.localize('clientUseRefreshTokensCredentialGrant')}
-                                    fieldId='client-use-refresh-tokens-for-credential-grant'
-                                >
-                                    <Switch
-                                        id='client-use-refresh-tokens-for-credential-grant'
-                                        name='client_credentials.use_refresh_token'
-                                        label=' '
-                                        labelOff=' '
-                                        isChecked={client.attributes["client_credentials.use_refresh_token"] === 'true'}
-                                        onChange={this.handleAttrChange}
-                                    />
-                                </FormGroup>
-                            </ExpandableSection>
-                            <ExpandableSection
-                                toggleText='Advanced Settings'
-                                onToggle={() => this.onToggle(1)}
-                                isExpanded={this.state.isExtended[1]}
-                            >
-                                <FormGroup
-                                    label={Msg.localize('clientAccessTokenLifeSpan')}
-                                    fieldId='client-access-token-lifespan'
-                                >
-                                    <InputGroup>
-                                        <TextInput
-                                            type='number'
-                                            id='client-access-token-lifespan'
-                                            name='access.token.lifespan'
-                                            value={client.attributes["access.token.lifespan"] ? parseInt(client.attributes["access.token.lifespan"])/60 : ''}
-                                            onChange={this.handleAttrChange}
-                                        />
-                                        <Text>Minutes</Text>
-                                    </InputGroup>
-                                </FormGroup>
-                                <FormGroup
-                                    label={Msg.localize('clientSessionIdle')}
-                                    fieldId='client-session-idle'
-                                >
-                                    <InputGroup>
-                                        <TextInput
-                                            type='number'
-                                            id='client-session-idle'
-                                            name='client.session.idle.timeout'
-                                            value={client.attributes["client.session.idle.timeout"] ? parseInt(client.attributes["client.session.idle.timeout"])/60 : '' }
-                                            onChange={this.handleAttrChange}
-                                        />
-                                        <Text>Minutes</Text>
-                                    </InputGroup>
-                                </FormGroup>
-                                <FormGroup
-                                    label={Msg.localize('clientSessionMax')}
-                                    fieldId='client-session-max'
-                                >
-                                    <InputGroup>
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize('clientBackchannelLogoutUrl')}
+                                        fieldId='client-backchannel-logout-url'
+                                    >
                                         <TextInput
-                                            type='number'
-                                            id='client-session-max'
-                                            name='client.session.max.lifespan'
-                                            value={client.attributes["client.session.max.lifespan"] ? parseInt(client.attributes["client.session.max.lifespan"])/60 : ''}
+                                            type='text'
+                                            id='client-backchannel-logout-url'
+                                            name='backchannel.logout.url'
+                                            maxLength={254}
+                                            value={client.attributes["backchannel.logout.url"] ? client.attributes["backchannel.logout.url"] : ''}
                                             onChange={this.handleAttrChange}
                                         />
-                                        <Text>Minutes</Text>
-                                    </InputGroup>
-                                </FormGroup>
-                                <FormGroup
-                                    label={Msg.localize('clientOfflineSessionIdle')}
-                                    fieldId='client-offline-session-idle'
-                                >
-                                    <InputGroup>
-                                        <TextInput
-                                            type='number'
-                                            id='client-offline-session-idle'
-                                            name='client.offline.session.idle.timeout'
-                                            value={client.attributes["client.offline.session.idle.timeout"] ? parseInt(client.attributes["client.offline.session.idle.timeout"])/60 : ''}
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize('clientBackchannelRequired')}
+                                        fieldId='client-backchannel-required'
+                                    >
+                                        <Switch
+                                            id='client-backchannel-required'
+                                            name='backchannel.logout.session.required'
+                                            label=' '
+                                            labelOff=' '
+                                            isChecked={client.attributes["backchannel.logout.session.required"] === 'true'}
                                             onChange={this.handleAttrChange}
                                         />
-                                        <Text>Minutes</Text>
-                                    </InputGroup>
-                                </FormGroup>
-                                <FormGroup
-                                    label={Msg.localize('clientOfflineSessionMax')}
-                                    fieldId='client-offline-session-max'
-                                >
-                                    <InputGroup>
-                                        <TextInput
-                                            type='number'
-                                            id='client-offline-session-max'
-                                            name='client.offline.session.max.lifespan'
-                                            value={client.attributes["client.offline.session.max.lifespan"] ? parseInt(client.attributes["client.offline.session.max.lifespan"])/60 : ''}
+                                    </FormGroup>
+                                    <FormGroup
+                                        label={Msg.localize('clientBackchannelRevokeOfflineTokens')}
+                                        fieldId='client-backchannel-revoke-offline-tokens'
+                                    >
+                                        <Switch
+                                            id='client-backchannel-revoke-offline-tokens'
+                                            name='backchannel.logout.revoke.offline.tokens'
+                                            label=' '
+                                            labelOff=' '
+                                            isChecked={client.attributes["backchannel.logout.revoke.offline.tokens"] === 'true'}
                                             onChange={this.handleAttrChange}
                                         />
-                                        <Text>Minutes</Text>
-                                    </InputGroup>
-                                </FormGroup>
-                                <FormGroup
-                                    label={Msg.localize('clientTlsCertBoundAccessTokens')}
-                                    fieldId='client-tls-cert-bound-access-tokens'
+                                    </FormGroup>
+                                    <ExpandableSection
+                                        toggleText='OpenID Connect Compatibility Modes'
+                                        onToggle={() => this.onToggle(0)}
+                                        isExpanded={this.state.isExtended[0]}
+                                    >
+                                        <FormGroup
+                                            label={Msg.localize('clientExcludeSessionState')}
+                                            fieldId='client-exclude-session-state'
+                                        >
+                                            <Switch
+                                                id='client-exclude-session-state'
+                                                name='exclude.session.state.from.auth.response'
+                                                label=' '
+                                                labelOff=' '
+                                                isChecked={client.attributes["exclude.session.state.from.auth.response"] === 'true'}
+                                                onChange={this.handleAttrChange}
+                                            />
+                                        </FormGroup>
+                                        <FormGroup
+                                            label={Msg.localize('clientUseRefreshTokens')}
+                                            fieldId='client-use-refresh-tokens'
+                                        >
+                                            <Switch
+                                                id='client-use-refresh-tokens'
+                                                name='use.refresh.tokens'
+                                                label=' '
+                                                labelOff=' '
+                                                isChecked={client.attributes["use.refresh.tokens"] === 'true'}
+                                                onChange={this.handleAttrChange}
+                                            />
+                                        </FormGroup>
+                                        <FormGroup
+                                            label={Msg.localize('clientUseRefreshTokensCredentialGrant')}
+                                            fieldId='client-use-refresh-tokens-for-credential-grant'
+                                        >
+                                            <Switch
+                                                id='client-use-refresh-tokens-for-credential-grant'
+                                                name='client_credentials.use_refresh_token'
+                                                label=' '
+                                                labelOff=' '
+                                                isChecked={client.attributes["client_credentials.use_refresh_token"] === 'true'}
+                                                onChange={this.handleAttrChange}
+                                            />
+                                        </FormGroup>
+                                    </ExpandableSection>
+                                    <ExpandableSection
+                                        toggleText='Advanced Settings'
+                                        onToggle={() => this.onToggle(1)}
+                                        isExpanded={this.state.isExtended[1]}
+                                    >
+                                        <FormGroup
+                                            label={Msg.localize('clientAccessTokenLifeSpan')}
+                                            fieldId='client-access-token-lifespan'
+                                        >
+                                            <InputGroup>
+                                                <TextInput
+                                                    type='number'
+                                                    id='client-access-token-lifespan'
+                                                    name='access.token.lifespan'
+                                                    value={client.attributes["access.token.lifespan"] ? parseInt(client.attributes["access.token.lifespan"])/60 : ''}
+                                                    onChange={this.handleAttrChange}
+                                                />
+                                                <Text>Minutes</Text>
+                                            </InputGroup>
+                                        </FormGroup>
+                                        <FormGroup
+                                            label={Msg.localize('clientSessionIdle')}
+                                            fieldId='client-session-idle'
+                                        >
+                                            <InputGroup>
+                                                <TextInput
+                                                    type='number'
+                                                    id='client-session-idle'
+                                                    name='client.session.idle.timeout'
+                                                    value={client.attributes["client.session.idle.timeout"] ? parseInt(client.attributes["client.session.idle.timeout"])/60 : '' }
+                                                    onChange={this.handleAttrChange}
+                                                />
+                                                <Text>Minutes</Text>
+                                            </InputGroup>
+                                        </FormGroup>
+                                        <FormGroup
+                                            label={Msg.localize('clientSessionMax')}
+                                            fieldId='client-session-max'
+                                        >
+                                            <InputGroup>
+                                                <TextInput
+                                                    type='number'
+                                                    id='client-session-max'
+                                                    name='client.session.max.lifespan'
+                                                    value={client.attributes["client.session.max.lifespan"] ? parseInt(client.attributes["client.session.max.lifespan"])/60 : ''}
+                                                    onChange={this.handleAttrChange}
+                                                />
+                                                <Text>Minutes</Text>
+                                            </InputGroup>
+                                        </FormGroup>
+                                        <FormGroup
+                                            label={Msg.localize('clientOfflineSessionIdle')}
+                                            fieldId='client-offline-session-idle'
+                                        >
+                                            <InputGroup>
+                                                <TextInput
+                                                    type='number'
+                                                    id='client-offline-session-idle'
+                                                    name='client.offline.session.idle.timeout'
+                                                    value={client.attributes["client.offline.session.idle.timeout"] ? parseInt(client.attributes["client.offline.session.idle.timeout"])/60 : ''}
+                                                    onChange={this.handleAttrChange}
+                                                />
+                                                <Text>Minutes</Text>
+                                            </InputGroup>
+                                        </FormGroup>
+                                        <FormGroup
+                                            label={Msg.localize('clientOfflineSessionMax')}
+                                            fieldId='client-offline-session-max'
+                                        >
+                                            <InputGroup>
+                                                <TextInput
+                                                    type='number'
+                                                    id='client-offline-session-max'
+                                                    name='client.offline.session.max.lifespan'
+                                                    value={client.attributes["client.offline.session.max.lifespan"] ? parseInt(client.attributes["client.offline.session.max.lifespan"])/60 : ''}
+                                                    onChange={this.handleAttrChange}
+                                                />
+                                                <Text>Minutes</Text>
+                                            </InputGroup>
+                                        </FormGroup>
+                                        <FormGroup
+                                            label={Msg.localize('clientTlsCertBoundAccessTokens')}
+                                            fieldId='client-tls-cert-bound-access-tokens'
+                                        >
+                                            <Switch
+                                                id='client-tls-cert-bound-access-tokens'
+                                                name='tls.client.certificate.bound.access.tokens'
+                                                label=' '
+                                                labelOff=' '
+                                                isChecked={client.attributes["tls.client.certificate.bound.access.tokens"] === 'true'}
+                                                onChange={this.handleAttrChange}
+                                            />
+                                        </FormGroup>
+                                        <FormGroup
+                                            label={Msg.localize('clientPKCECodeChallenge')}
+                                            fieldId='client-pkce-code-challenge'
+                                        >
+                                            <Select
+                                                direction='down'
+                                                variant={SelectVariant.single}
+                                                aria-label="Select the PKCE code challenge"
+                                                onToggle={this.togglePKCEChallenge}
+                                                onSelect={this.selectPKCEChallenge}
+                                                selections={this.state.pkceChallengeSelected}
+                                                isOpen={this.state.pkceChallengeExpanded}
+                                            >
+                                                {[
+                                                    <SelectOption key={0} value={pkceChallence.S256}/>,
+                                                    <SelectOption key={1} value={pkceChallence.plain} />,
+                                                    <SelectOption key={2} value={pkceChallence.none} />
+                                                ]}
+                                            </Select>
+                                        </FormGroup>
+                                    </ExpandableSection>
+                                </React.Fragment>
+                            }
+                            <ActionGroup>
+                                <Button
+                                    type="submit"
+                                    id="save-client-btn"
+                                    variant="primary"
                                 >
-                                    <Switch
-                                        id='client-tls-cert-bound-access-tokens'
-                                        name='tls.client.certificate.bound.access.tokens'
-                                        label=' '
-                                        labelOff=' '
-                                        isChecked={client.attributes["tls.client.certificate.bound.access.tokens"] === 'true'}
-                                        onChange={this.handleAttrChange}
-                                    />
-                                </FormGroup>
-                                <FormGroup
-                                    label={Msg.localize('clientPKCECodeChallenge')}
-                                    fieldId='client-pkce-code-challenge'
+                                    <Msg msgKey="doSaveClient" />
+                                </Button>
+                                <Button
+                                    id="cancel-client-btn"
+                                    variant="secondary"
+                                    onClick={this.handleCancel}
                                 >
-                                    <Select
-                                        direction='down'
-                                        variant={SelectVariant.single}
-                                        aria-label="Select the PKCE code challenge"
-                                        onToggle={this.togglePKCEChallenge}
-                                        onSelect={this.selectPKCEChallenge}
-                                        selections={this.state.pkceChallengeSelected}
-                                        isOpen={this.state.pkceChallengeExpanded}
-                                    >
-                                        {[
-                                            <SelectOption key={0} value={pkceChallence.S256}/>,
-                                            <SelectOption key={1} value={pkceChallence.plain} />,
-                                            <SelectOption key={2} value={pkceChallence.none} />
-                                        ]}
-                                    </Select>
-                                </FormGroup>
-                            </ExpandableSection>
-                        </React.Fragment>
-                    }
-                    <ActionGroup>
-                        <Button
-                            type="submit"
-                            id="save-client-btn"
-                            variant="primary"
-                        >
-                            <Msg msgKey="doSaveClient" />
-                        </Button>
-                        <Button
-                            id="cancel-client-btn"
-                            variant="secondary"
-                            onClick={this.handleCancel}
-                        >
-                            <Msg msgKey="doCancelClient" />
-                        </Button>
-                    </ActionGroup>
-                </Form>
+                                    <Msg msgKey="doCancelClient" />
+                                </Button>
+                            </ActionGroup>
+                        </Form>
+                    </Stack>
+                </PageSection>
             </ContentPage>
         );
     }
diff --git a/account-console/src/main/resources/theme/learning-layers-account/account/src/app/content/learning-layers-account/UserClientPage.tsx b/account-console/src/main/resources/theme/learning-layers-account/account/src/app/content/learning-layers-account/UserClientPage.tsx
index f57d748..6b0aa23 100644
--- a/account-console/src/main/resources/theme/learning-layers-account/account/src/app/content/learning-layers-account/UserClientPage.tsx
+++ b/account-console/src/main/resources/theme/learning-layers-account/account/src/app/content/learning-layers-account/UserClientPage.tsx
@@ -4,7 +4,7 @@ import {
     DataList, DataListCell, DataListItem, DataListItemCells, DataListItemRow, DataListToggle,
     Form, FormGroup,
     Grid,
-    GridItem, TextInput,
+    GridItem, PageSection, PageSectionVariants, Stack, TextInput,
 } from '@patternfly/react-core';
 import { ContentPage } from '../ContentPage'
 import { Msg } from '../../widgets/Msg'
@@ -168,176 +168,183 @@ export class UserClientPage extends React.Component<ClientsPageProps, ClientsPag
     public render(): React.ReactNode {
         return (
             <ContentPage title="personalClientTitle" introMessage="personalClientDescription">
-                <Grid>
-                    <GridItem offset={11} span={1}>
-                        <Button id="add-client-btn" variant="control" onClick={this.toggleLinkClient}>
-                            <Msg msgKey="doAddClient" />
-                        </Button>
-                    </GridItem>
-                    <GridItem offset={12} span={1}>
-                        <Button id="create-btn" variant="control" onClick={this.handleCreate}>
-                            <Msg msgKey="doCreateClient" />
-                        </Button>
-                    </GridItem>
-                </Grid>
-                {this.state.tokenInputEnabled && (
-                    <React.Fragment>
-                        <Form isHorizontal onSubmit={event => this.handleAddClient(event)}>
-                            <FormGroup label={Msg.localize('adminToken')}
-                                       fieldId='admin-token'
-                            >
-                                <TextInput
-                                    type='text'
-                                    id='admin-token'
-                                    name='adminTok'
-                                    value={this.state.adminTok}
-                                    onChange={this.handleChangeAdminTok}
-                                />
-                                <Grid>
-                                    <GridItem span={1}>
-                                        <Button
-                                            type="submit"
-                                            id="add-client-btn"
-                                            variant="primary"
-                                        >
-                                            <Msg msgKey="doAddClient" />
-                                        </Button>
-                                    </GridItem>
-                                    <GridItem offset={1} span={1}>
-                                        <Button
-                                            id='clear-tok-field-btn'
-                                            variant='tertiary'
-                                            onClick={() => this.setState({ adminTok: ''})}
-                                        >
-                                            <Msg msgKey='doClearTokenField' />
-                                        </Button>
-                                    </GridItem>
-                                </Grid>
-                            </FormGroup>
-                        </Form>
-                        <div className="pf-c-divider pf-m-vertical pf-m-inset-md" role="separator"> </div>
-                    </React.Fragment>
-                )}
-                <DataList id="client-list" aria-label="Clients" isCompact>
-                    <DataListItem id="client-list-header" aria-labelledby="Column names">
-                        <DataListItemRow>
-                            // invisible toggle allows headings to line up properly
-                            <span style={{ visibility: 'hidden' }}>
-                                <DataListToggle
-                                    isExpanded={false}
-                                    id='applications-list-header-invisible-toggle'
-                                    aria-controls="hidden"
-                                />
-                            </span>
-                            <DataListItemCells
-                                dataListCells={[
-                                    <DataListCell key='client-list-client-id-header' width={2}>
-                                        <strong><Msg msgKey='clientId' /></strong>
-                                    </DataListCell>,
-                                    <DataListCell key='client-list-client-name-header' width={2}>
-                                        <strong><Msg msgKey='clientName' /></strong>
-                                    </DataListCell>,
-                                    <DataListCell key='client-list-client-description-header' width={2}>
-                                        <strong><Msg msgKey='clientDescription' /></strong>
-                                    </DataListCell>,
-                                    <DataListCell key='client-list-client-delete-header' width={1}>
+                <PageSection isFilled variant={PageSectionVariants.light}>
+                    <Stack>
+                        <Grid>
+                            <GridItem offset={12} span={1}>
+                                <div style={{float: 'left'}}>
+                                    <Button id="add-client-btn" variant="control" onClick={this.toggleLinkClient}>
+                                        <Msg msgKey="doAddClient" />
+                                    </Button>
+                                </div>
+                                <div style={{float: 'right'}}>
+                                    <Button id="create-btn" variant="control" onClick={this.handleCreate}>
+                                        <Msg msgKey="doCreateClient" />
+                                    </Button>
+                                </div>
+                            </GridItem>
+                        </Grid>
+                        {this.state.tokenInputEnabled && (
+                            <React.Fragment>
+                                <Form isHorizontal onSubmit={event => this.handleAddClient(event)}>
+                                    <FormGroup label={Msg.localize('adminToken')}
+                                               fieldId='admin-token'
+                                    >
+                                        <TextInput
+                                            type='text'
+                                            id='admin-token'
+                                            name='adminTok'
+                                            value={this.state.adminTok}
+                                            onChange={this.handleChangeAdminTok}
+                                        />
                                         <Grid>
-                                            <GridItem span={6}>
-                                                <strong><Msg msgKey='clientUnlink'/></strong>
-                                            </GridItem>
-                                            <GridItem span={6}>
-                                                <strong><Msg msgKey='clientDelete'/></strong>
+                                            <GridItem offset={12} span={1}>
+                                                <div style={{float: 'left'}}>
+                                                    <Button
+                                                        id='clear-tok-field-btn'
+                                                        variant='tertiary'
+                                                        onClick={() => this.setState({ adminTok: ''})}
+                                                    >
+                                                        <Msg msgKey='doClearTokenField' />
+                                                    </Button>
+                                                </div>
+                                                <div style={{float: 'right'}}>
+                                                    <Button
+                                                        type="submit"
+                                                        id="add-client-btn"
+                                                        variant="primary"
+                                                    >
+                                                        <Msg msgKey="doAddClient" />
+                                                    </Button>
+                                                </div>
                                             </GridItem>
                                         </Grid>
-                                    </DataListCell>,
-                                ]}
-                            />
-                        </DataListItemRow>
-                    </DataListItem>
-                    {this.state.clients.map((client: Client, appIndex: number) => {
-                        return (
-                            <DataListItem id={this.elementId("client-id", client)} key={'client-' + appIndex} aria-labelledby="client-list" isExpanded={this.state.isRowOpen[appIndex]}>
+                                    </FormGroup>
+                                </Form>
+                            </React.Fragment>
+                        )}
+                        <DataList id="client-list" aria-label="Clients">
+                            <DataListItem id="client-list-header" aria-labelledby="Column names">
                                 <DataListItemRow>
-                                    {/*<DataListToggle*/}
-                                    {/*    onClick={() => this.onToggle(appIndex)}*/}
-                                    {/*    isExpanded={this.state.isRowOpen[appIndex]}*/}
-                                    {/*    id={this.elementId('toggle', application)}*/}
-                                    {/*    aria-controls={this.elementId("expandable", application)}*/}
-                                    {/*/>*/}
+                                    // invisible toggle allows headings to line up properly
+                                    <span style={{ visibility: 'hidden', height: 55 }}>
+                                        <DataListToggle
+                                            isExpanded={false}
+                                            id='applications-list-header-invisible-toggle'
+                                            aria-controls="hidden"
+                                        />
+                                    </span>
                                     <DataListItemCells
                                         dataListCells={[
-                                            <DataListCell id={this.elementId('id', client)} width={2} key={'id-' + appIndex}>
-                                                <Button component="a" variant="link" onClick={() => this.handleManageClient(client.clientId)}>
-                                                    { client.clientId }
-                                                </Button>
+                                            <DataListCell key='client-list-client-id-header' width={2} className="pf-u-pt-md">
+                                                <strong><Msg msgKey='clientId' /></strong>
                                             </DataListCell>,
-                                            <DataListCell id={this.elementId('name', client)} width={2} key={'name-' + appIndex}>
-                                                { client.name || '---' }
+                                            <DataListCell key='client-list-client-name-header' width={2} className="pf-u-pt-md">
+                                                <strong><Msg msgKey='clientName' /></strong>
                                             </DataListCell>,
-                                            <DataListCell id={this.elementId('description', client)} width={2} key={'description-' + appIndex}>
-                                                { client.description || '---'}
+                                            <DataListCell key='client-list-client-description-header' width={2} className="pf-u-pt-md">
+                                                <strong><Msg msgKey='clientDescription' /></strong>
                                             </DataListCell>,
-                                            <DataListCell id={this.elementId('delete', client)} width={1} key={'delete-' + appIndex}>
+                                            <DataListCell key='client-list-client-delete-header' width={1} className="pf-u-pt-md">
                                                 <Grid>
                                                     <GridItem span={6}>
-                                                        <Grid>
-                                                            {this.state.isUnlinkEnabled[appIndex] && (
-                                                                <GridItem span={12}>
-                                                                    <p style={{color: 'red'}}>
-                                                                        <Msg msgKey="deleteClientWarning" />
-                                                                    </p>
-                                                                </GridItem>
-                                                            )}
-                                                            <GridItem span={6}>
-                                                                <Button component="a" variant="secondary" onClick={() => this.handleUnlinkClient(client.clientId, appIndex)}>
-                                                                    <MinusCircleIcon/>
-                                                                </Button>
-                                                            </GridItem>
-                                                            {this.state.isUnlinkEnabled[appIndex] && (
-                                                                <GridItem span={6}>
-                                                                    <Button component="a" variant="tertiary" onClick={() => this.setState({
-                                                                        isUnlinkEnabled: new Array(this.state.clients.length).fill(false)
-                                                                    })}>
-                                                                        <AngleUpIcon/>
-                                                                    </Button>
-                                                                </GridItem>
-                                                            )}
-                                                        </Grid>
+                                                        <strong><Msg msgKey='clientUnlink'/></strong>
                                                     </GridItem>
                                                     <GridItem span={6}>
-                                                        <Grid>
-                                                            {this.state.isDeleteEnabled[appIndex] && (
-                                                                <GridItem span={12} >
-                                                                    <p style={{color: 'red'}}>
-                                                                        <Msg msgKey="deleteClientWarning" />
-                                                                    </p>
-                                                                </GridItem>
-                                                            )}
-                                                            <GridItem span={6}>
-                                                                <Button component="a" variant="danger" onClick={() => this.handleDeleteClient(client.clientId, appIndex)}>
-                                                                    <TrashIcon/>
-                                                                </Button>
-                                                            </GridItem>
-                                                            {this.state.isDeleteEnabled[appIndex] && (
-                                                                <GridItem span={6}>
-                                                                    <Button component="a" variant="tertiary" onClick={() => this.setState({
-                                                                        isDeleteEnabled: new Array(this.state.clients.length).fill(false)
-                                                                    })}>
-                                                                        <AngleUpIcon/>
-                                                                    </Button>
-                                                                </GridItem>
-                                                            )}
-                                                        </Grid>
+                                                        <strong><Msg msgKey='clientDelete'/></strong>
                                                     </GridItem>
                                                 </Grid>
-                                            </DataListCell>
+                                            </DataListCell>,
                                         ]}
                                     />
                                 </DataListItemRow>
                             </DataListItem>
-                        )
-                    })}
-                </DataList>
+                            {this.state.clients.map((client: Client, appIndex: number) => {
+                                return (
+                                    <DataListItem id={this.elementId("client-id", client)} key={'client-' + appIndex} aria-labelledby="client-list" isExpanded={this.state.isRowOpen[appIndex]}>
+                                        <DataListItemRow>
+                                            {/*<DataListToggle*/}
+                                            {/*    onClick={() => this.onToggle(appIndex)}*/}
+                                            {/*    isExpanded={this.state.isRowOpen[appIndex]}*/}
+                                            {/*    id={this.elementId('toggle', application)}*/}
+                                            {/*    aria-controls={this.elementId("expandable", application)}*/}
+                                            {/*/>*/}
+                                            <DataListItemCells
+                                                dataListCells={[
+                                                    <DataListCell id={this.elementId('id', client)} width={2} key={'id-' + appIndex}>
+                                                        <Button component="a" variant="link" onClick={() => this.handleManageClient(client.clientId)}>
+                                                            { client.clientId }
+                                                        </Button>
+                                                    </DataListCell>,
+                                                    <DataListCell id={this.elementId('name', client)} width={2} key={'name-' + appIndex}>
+                                                        { client.name || '---' }
+                                                    </DataListCell>,
+                                                    <DataListCell id={this.elementId('description', client)} width={2} key={'description-' + appIndex}>
+                                                        { client.description || '---'}
+                                                    </DataListCell>,
+                                                    <DataListCell id={this.elementId('delete', client)} width={1} key={'delete-' + appIndex}>
+                                                        <Grid>
+                                                            <GridItem span={6}>
+                                                                <Grid>
+                                                                    {this.state.isUnlinkEnabled[appIndex] && (
+                                                                        <GridItem span={12}>
+                                                                            <p style={{color: 'red'}}>
+                                                                                <Msg msgKey="deleteClientWarning" />
+                                                                            </p>
+                                                                        </GridItem>
+                                                                    )}
+                                                                    <GridItem span={6}>
+                                                                        <Button component="a" variant="secondary" onClick={() => this.handleUnlinkClient(client.clientId, appIndex)}>
+                                                                            <MinusCircleIcon/>
+                                                                        </Button>
+                                                                    </GridItem>
+                                                                    {this.state.isUnlinkEnabled[appIndex] && (
+                                                                        <GridItem span={6}>
+                                                                            <Button component="a" variant="tertiary" onClick={() => this.setState({
+                                                                                isUnlinkEnabled: new Array(this.state.clients.length).fill(false)
+                                                                            })}>
+                                                                                <AngleUpIcon/>
+                                                                            </Button>
+                                                                        </GridItem>
+                                                                    )}
+                                                                </Grid>
+                                                            </GridItem>
+                                                            <GridItem span={6}>
+                                                                <Grid>
+                                                                    {this.state.isDeleteEnabled[appIndex] && (
+                                                                        <GridItem span={12} >
+                                                                            <p style={{color: 'red'}}>
+                                                                                <Msg msgKey="deleteClientWarning" />
+                                                                            </p>
+                                                                        </GridItem>
+                                                                    )}
+                                                                    <GridItem span={6}>
+                                                                        <Button component="a" variant="danger" onClick={() => this.handleDeleteClient(client.clientId, appIndex)}>
+                                                                            <TrashIcon/>
+                                                                        </Button>
+                                                                    </GridItem>
+                                                                    {this.state.isDeleteEnabled[appIndex] && (
+                                                                        <GridItem span={6}>
+                                                                            <Button component="a" variant="tertiary" onClick={() => this.setState({
+                                                                                isDeleteEnabled: new Array(this.state.clients.length).fill(false)
+                                                                            })}>
+                                                                                <AngleUpIcon/>
+                                                                            </Button>
+                                                                        </GridItem>
+                                                                    )}
+                                                                </Grid>
+                                                            </GridItem>
+                                                        </Grid>
+                                                    </DataListCell>
+                                                ]}
+                                            />
+                                        </DataListItemRow>
+                                    </DataListItem>
+                                )
+                            })}
+                        </DataList>
+                    </Stack>
+                </PageSection>
             </ContentPage>
         );
     };