diff --git a/projects/iridium-ui/src/app/components/dashboard/content/application-overview/application-overview.component.ts b/projects/iridium-ui/src/app/components/dashboard/content/application-overview/application-overview.component.ts
index cd02938..03208ad 100644
--- a/projects/iridium-ui/src/app/components/dashboard/content/application-overview/application-overview.component.ts
+++ b/projects/iridium-ui/src/app/components/dashboard/content/application-overview/application-overview.component.ts
@@ -24,6 +24,7 @@ import {
 import { ApplicationTypeService } from '../../../../services/application-type.service';
 import { ApplicationTypeSummary } from '../../domain/application-type-summary';
 import { ApplicationService } from '../../../../services/application.service';
+import { ClientSecretService } from '../../../../services/client-secret.service';
 
 @Component({
   selector: 'update-application-dialog',
@@ -32,6 +33,7 @@ import { ApplicationService } from '../../../../services/application.service';
 })
 export class UpdateApplicationDialog {
   updateApplicationFormGroup: UntypedFormGroup;
+  hide = true;
   constructor(
     public dialogRef: MatDialogRef<ApplicationOverviewComponent>,
     private _formBuilder: UntypedFormBuilder,
@@ -40,6 +42,9 @@ export class UpdateApplicationDialog {
     this.updateApplicationFormGroup = this._formBuilder.group({
       applicationName: [this.data.application.name, Validators.required],
       clientId: [{ value: this.data.application.clientId, disabled: true }],
+      clientSecret: [
+        { value: this.data.application.clientSecret, disabled: true },
+      ],
       homepageURL: [this.data.application.homepageURL, Validators.required],
       description: [this.data.application.description],
       authorizationCallbackURL: [
@@ -81,6 +86,7 @@ export class CreateApplicationDialog {
   }
 
   create() {
+    console.log('form group', this.createApplicationFormGroup);
     this.dialogRef.close({ formGroup: this.createApplicationFormGroup });
   }
 }
@@ -102,8 +108,10 @@ export class ApplicationOverviewComponent
   dataSource: ApplicationSummary[] = [];
   applicationTypes: ApplicationTypeSummary[] = [];
   applicationTypeMap: ApplicationTypeSummaryMapType = {};
+  webServiceApplicationTypeId = '';
 
   constructor(
+    private clientSecretService: ClientSecretService,
     private cookieService: CookieService,
     private route: ActivatedRoute,
     private _formBuilder: UntypedFormBuilder,
@@ -118,13 +126,22 @@ export class ApplicationOverviewComponent
       data: {
         applicationTypes: this.applicationTypes,
         tenantId: this.data.tenantId,
+        webServiceApplicationTypeId: this.webServiceApplicationTypeId,
       },
     });
 
-    dialogRef.afterClosed().subscribe(result => {
+    dialogRef.afterClosed().subscribe(async result => {
       this.applicationService
         .create(result.formGroup, this.data.tenantId)
         .subscribe(response => {
+          if (this.webServiceApplicationTypeId === response.applicationTypeId) {
+            console.log('this is a client secret');
+            this.clientSecretService
+              .create(this.data.tenantId, response.id)
+              .subscribe(result => {
+                console.log('client secret create good ', result);
+              });
+          }
           this.refreshDataSource();
         });
     });
@@ -139,9 +156,11 @@ export class ApplicationOverviewComponent
             applicationTypes: this.applicationTypes,
             tenantId: this.data.tenantId,
             application: applicationResponse,
+            webServiceApplicationTypeId: this.webServiceApplicationTypeId,
           },
         });
         dialogRef.afterClosed().subscribe(updateResult => {
+          console.log('update result', updateResult)
           this.applicationService
             .update(
               updateResult.formGroup,
@@ -161,6 +180,10 @@ export class ApplicationOverviewComponent
       this.applicationTypes = applicationTypes;
 
       for (let i = 0; i < applicationTypes.length; i++) {
+        if (applicationTypes[i].name === 'Web Service Application') {
+          console.log('web service app ', applicationTypes[i]);
+          this.webServiceApplicationTypeId = applicationTypes[i].id;
+        }
         this.applicationTypeMap[applicationTypes[i].id] = applicationTypes[i];
       }
       this.refreshDataSource();
diff --git a/projects/iridium-ui/src/app/components/dashboard/content/application-overview/create-application-dialog.html b/projects/iridium-ui/src/app/components/dashboard/content/application-overview/create-application-dialog.html
index 4cb86c8..aea18d8 100644
--- a/projects/iridium-ui/src/app/components/dashboard/content/application-overview/create-application-dialog.html
+++ b/projects/iridium-ui/src/app/components/dashboard/content/application-overview/create-application-dialog.html
@@ -32,13 +32,21 @@ <h4>Select Application Type</h4>
         <mat-label>Description</mat-label>
         <textarea matInput formControlName="description"></textarea>
       </mat-form-field>
-      <div>
+      <div
+        *ngIf="
+          data.webServiceApplicationTypeId !==
+          createApplicationFormGroup.controls['applicationTypeId'].value
+        ">
         <mat-form-field appearance="fill" class="form-input">
           <mat-label>Authorization Callback URL</mat-label>
           <input matInput formControlName="authorizationCallbackURL" required />
         </mat-form-field>
       </div>
-      <div>
+      <div
+        *ngIf="
+          data.webServiceApplicationTypeId !==
+          createApplicationFormGroup.controls['applicationTypeId'].value
+        ">
         <button
           mat-button
           type="submit"
@@ -47,6 +55,13 @@ <h4>Select Application Type</h4>
           Submit
         </button>
       </div>
+      <div
+        *ngIf="
+          data.webServiceApplicationTypeId ===
+          createApplicationFormGroup.controls['applicationTypeId'].value
+        ">
+        <button mat-button type="submit" (click)="create()">Submit</button>
+      </div>
     </div>
   </form>
 </div>
diff --git a/projects/iridium-ui/src/app/components/dashboard/content/application-overview/update-application-dialog.html b/projects/iridium-ui/src/app/components/dashboard/content/application-overview/update-application-dialog.html
index aa09fac..c88042b 100644
--- a/projects/iridium-ui/src/app/components/dashboard/content/application-overview/update-application-dialog.html
+++ b/projects/iridium-ui/src/app/components/dashboard/content/application-overview/update-application-dialog.html
@@ -25,6 +25,22 @@ <h4>Select Application Type</h4>
         <mat-label>Client Id</mat-label>
         <input matInput formControlName="clientId" />
       </mat-form-field>
+      <div
+        *ngIf="
+          data.webServiceApplicationTypeId ===
+          data.application.applicationTypeId
+        ">
+        <mat-form-field appearance="fill" class="form-input">
+          <mat-label>Client Secret</mat-label>
+          <input
+            [type]="hide ? 'password' : 'text'"
+            matInput
+            formControlName="clientSecret" />
+          <mat-icon matSuffix (click)="hide = !hide">{{
+            hide ? 'visibility_off' : 'visibility'
+          }}</mat-icon>
+        </mat-form-field>
+      </div>
 
       <div>
         <mat-form-field appearance="fill" class="form-input">
@@ -32,10 +48,7 @@ <h4>Select Application Type</h4>
           <input matInput formControlName="homepageURL" required />
         </mat-form-field>
       </div>
-      <mat-form-field appearance="fill" class="form-input">
-        <mat-label>Description</mat-label>
-        <textarea matInput formControlName="description"></textarea>
-      </mat-form-field>
+
       <div>
         <mat-form-field appearance="fill" class="form-input">
           <mat-label>Authorization Callback URL</mat-label>
@@ -48,8 +61,8 @@ <h4>Select Application Type</h4>
         </mat-form-field>
 
         <mat-form-field appearance="fill" class="form-input">
-          <mat-label>Icon URL</mat-label>
-          <input matInput formControlName="iconURL" />
+          <mat-label>Description</mat-label>
+          <textarea matInput formControlName="description"></textarea>
         </mat-form-field>
       </div>
       <div>
diff --git a/projects/iridium-ui/src/app/services/client-secret.service.spec.ts b/projects/iridium-ui/src/app/services/client-secret.service.spec.ts
new file mode 100644
index 0000000..d8fe8fd
--- /dev/null
+++ b/projects/iridium-ui/src/app/services/client-secret.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ClientSecretService } from './client-secret.service';
+
+describe('ClientSecretService', () => {
+  let service: ClientSecretService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ClientSecretService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/iridium-ui/src/app/services/client-secret.service.ts b/projects/iridium-ui/src/app/services/client-secret.service.ts
new file mode 100644
index 0000000..b82db26
--- /dev/null
+++ b/projects/iridium-ui/src/app/services/client-secret.service.ts
@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { ApplicationUpdateRequest } from '../components/dashboard/domain/application-update-request';
+import { ApplicationUpdateResponse } from '../components/dashboard/domain/application-update-response';
+import { environment } from '../../environments/environment';
+import { CookieService } from './cookie.service';
+import { CreateApplicationSecretResponse } from './domain/create-application-secret-response';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ClientSecretService {
+  constructor(
+    private http: HttpClient,
+    private cookieService: CookieService
+  ) {}
+
+  create(tenantId: string, applicationId: string) {
+    console.log('create client secret');
+    const token = this.cookieService.getCookie('iridium-token');
+    const headers = new HttpHeaders({
+      Accept:
+        'application/vnd.iridium.id.authz.client-secret-create-response.1+json',
+      Authorization: 'Bearer ' + token,
+    });
+    const options = { headers: headers };
+
+    return this.http.post<CreateApplicationSecretResponse>(
+      environment.iridium.domain +
+        `tenants/${tenantId}/applications/${applicationId}/client-secrets`,
+      null,
+      options
+    );
+  }
+}
diff --git a/projects/iridium-ui/src/app/services/domain/application-response.ts b/projects/iridium-ui/src/app/services/domain/application-response.ts
index 0ccee3b..c67bf45 100644
--- a/projects/iridium-ui/src/app/services/domain/application-response.ts
+++ b/projects/iridium-ui/src/app/services/domain/application-response.ts
@@ -16,4 +16,6 @@ export class ApplicationResponse {
   callbackURL: string = '';
 
   privacyPolicyUrl: string = '';
+
+  clientSecret: string = '';
 }
diff --git a/projects/iridium-ui/src/app/services/domain/create-application-secret-response.ts b/projects/iridium-ui/src/app/services/domain/create-application-secret-response.ts
new file mode 100644
index 0000000..e41e36b
--- /dev/null
+++ b/projects/iridium-ui/src/app/services/domain/create-application-secret-response.ts
@@ -0,0 +1,7 @@
+export interface CreateApplicationSecretResponse {
+  id: string;
+
+  secretKey: string;
+
+  created: string;
+}