diff --git a/src/app/adf-services/df-service-details/df-service-details.component.html b/src/app/adf-services/df-service-details/df-service-details.component.html
index 43069126..8556541e 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.html
+++ b/src/app/adf-services/df-service-details/df-service-details.component.html
@@ -1,126 +1,349 @@
 <form [formGroup]="serviceForm" class="details-section" (ngSubmit)="save()">
-  <mat-form-field subscriptSizing="dynamic" class="fourth-width">
-    <mat-label>{{
-      'services.controls.serviceType.label' | transloco
-    }}</mat-label>
-    <mat-select formControlName="type">
-      <mat-option *ngFor="let type of serviceTypes" [value]="type.name">
-        {{ type.label }}
-      </mat-option>
-    </mat-select>
-    <fa-icon
-      class="tool-tip-trigger"
-      matSuffix
-      [icon]="faCircleInfo"
-      [matTooltip]="'services.controls.serviceType.tooltip' | transloco" />
-  </mat-form-field>
-  <mat-form-field
-    subscriptSizing="dynamic"
-    class="fourth-width"
-    *ngIf="!subscriptionRequired">
-    <mat-label>{{ 'services.controls.namespace.label' | transloco }}</mat-label>
-    <input matInput formControlName="name" />
-    <fa-icon
-      class="tool-tip-trigger"
-      matSuffix
-      [icon]="faCircleInfo"
-      [matTooltip]="'services.controls.namespace.tooltip' | transloco" />
-  </mat-form-field>
-  <mat-form-field
-    subscriptSizing="dynamic"
-    class="dynamic-width"
-    *ngIf="!subscriptionRequired">
-    <mat-label>{{ 'services.controls.label.label' | transloco }}</mat-label>
-    <input matInput formControlName="label" />
-    <fa-icon
-      class="tool-tip-trigger"
-      matSuffix
-      [icon]="faCircleInfo"
-      [matTooltip]="'services.controls.label.tooltip' | transloco" />
-  </mat-form-field>
-  <mat-form-field
-    subscriptSizing="dynamic"
-    class="full-width"
-    *ngIf="!subscriptionRequired">
-    <mat-label>{{
-      'services.controls.description.label' | transloco
-    }}</mat-label>
-    <textarea rows="1" matInput formControlName="description"></textarea>
-    <fa-icon
-      class="tool-tip-trigger"
-      matSuffix
-      [icon]="faCircleInfo"
-      [matTooltip]="'services.controls.description.tooltip' | transloco" />
-  </mat-form-field>
-  <mat-slide-toggle formControlName="isActive" *ngIf="!subscriptionRequired">{{
-    'active' | transloco
-  }}</mat-slide-toggle>
-  <ng-container *ngIf="viewSchema && !subscriptionRequired">
-    <ng-container formGroupName="config">
-      <mat-accordion class="full-width">
-        <mat-expansion-panel
-          [expanded]="
-            !serviceForm.getRawValue().type ||
-            serviceForm.getRawValue().type === 'soap' ||
-            serviceForm.getRawValue().type === 'rws'
-          ">
-          <mat-expansion-panel-header
-            >{{ 'services.options' | transloco }}
-          </mat-expansion-panel-header>
-          <div class="details-section">
-            <ng-container *ngFor="let item of viewSchema">
-              <ng-container
-                *ngIf="
-                  item.type === 'text' && item.name === 'content';
-                  else dynamic
-                ">
-                <df-script-editor
-                  [type]="getControl('type')"
-                  [storageServiceId]="getConfigControl('storageServiceId')"
-                  [storagePath]="getConfigControl('storagePath')"
-                  [content]="getConfigControl('content')"
-                  [cache]="serviceData ? serviceData.name : ''"
-                  class="full-width"></df-script-editor>
-              </ng-container>
-              <ng-template #dynamic>
-                <df-dynamic-field
-                  *ngIf="
-                    [
-                      'integer',
-                      'password',
-                      'string',
-                      'text',
-                      'picklist',
-                      'multi_picklist',
-                      'boolean',
-                      'file_certificate'
-                    ].includes(item.type)
-                  "
-                  [schema]="item"
-                  [formControl]="getConfigControl(item.name)"
-                  [class.dynamic-width]="item.type !== 'file_certificate'"
-                  [class.full-width]="
-                    item.type === 'file_certificate'
-                  "></df-dynamic-field>
-                <df-array-field
-                  *ngIf="item.type === 'array' || item.type === 'object'"
-                  [schema]="item"
-                  [formControl]="getConfigControl(item.name)"
-                  class="full-width"></df-array-field>
-              </ng-template>
-            </ng-container>
+  <ng-container *ngIf="this.isDatabase; else notDatabase">
+    <mat-stepper linear #stepper>
+      <mat-step errorMessage="Service Type is required." [editable]="true">
+        <ng-template matStepLabel>
+          {{ 'services.controls.serviceType.label' | transloco }}</ng-template
+        >
+        <div class="details-section">
+          <div class="section-header">
+            <h3>
+              Search for your
+              {{ 'services.controls.serviceType.label' | transloco }} to get
+              started
+              <fa-icon
+                class="tool-tip-trigger"
+                matSuffix
+                [icon]="faCircleInfo"
+                [matTooltip]="
+                  'services.controls.serviceType.tooltip' | transloco
+                " />
+            </h3>
+            <div>
+              <button mat-button matStepperNext type="button">Next</button>
+            </div>
           </div>
-        </mat-expansion-panel>
-      </mat-accordion>
-    </ng-container>
+          <mat-form-field class="dynamic-width" appearance="outline">
+            <mat-label>Search service types...</mat-label>
+            <input
+              matInput
+              [(ngModel)]="search"
+              placeholder="SQL..."
+              [ngModelOptions]="{ standalone: true }" />
+          </mat-form-field>
+          <!-- <mat-form-field class="dynamic-width" appearance="outline">
+            <mat-label>{{
+              'services.controls.serviceType.label' | transloco
+            }}</mat-label>
+            <mat-select formControlName="type">
+              <mat-option *ngFor="let type of serviceTypes" [value]="type.name">
+                {{ type.label }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field> -->
+          <div class="grid-wrapper grid-col-auto">
+            <label
+              class="radio-card"
+              *ngFor="let type of filteredServiceTypes; let i = index">
+              <input
+                formControlName="type"
+                type="radio"
+                [value]="type.name"
+                (input)="nextStep(stepper)" />
+              <div class="card-content-wrapper">
+                <span class="check-icon"></span>
+                <div class="card-content">
+                  <img
+                    class="card-icon"
+                    [src]="getBackgroundImage(type.name)"
+                    [alt]="type.label" />
+                  <h4 class="text-center">{{ type.label }}</h4>
+                </div>
+              </div>
+            </label>
+          </div>
+          <div>
+            <button mat-button matStepperNext type="button">Next</button>
+          </div>
+        </div>
+      </mat-step>
+      <mat-step>
+        <ng-template matStepLabel>Service Details</ng-template>
+        <br />
+        <div class="details-section">
+          <mat-form-field
+            subscriptSizing="dynamic"
+            class="dynamic-width"
+            *ngIf="!subscriptionRequired"
+            appearance="outline">
+            <mat-label>{{
+              'services.controls.namespace.label' | transloco
+            }}</mat-label>
+            <input matInput formControlName="name" />
+            <fa-icon
+              class="tool-tip-trigger"
+              matSuffix
+              [icon]="faCircleInfo"
+              [matTooltip]="
+                'services.controls.namespace.tooltip' | transloco
+              " />
+          </mat-form-field>
+          <mat-form-field
+            appearance="outline"
+            subscriptSizing="dynamic"
+            class="dynamic-width"
+            *ngIf="!subscriptionRequired">
+            <mat-label>{{
+              'services.controls.label.label' | transloco
+            }}</mat-label>
+            <input matInput formControlName="label" />
+            <fa-icon
+              class="tool-tip-trigger"
+              matSuffix
+              [icon]="faCircleInfo"
+              [matTooltip]="'services.controls.label.tooltip' | transloco" />
+          </mat-form-field>
+          <mat-form-field
+            appearance="outline"
+            subscriptSizing="dynamic"
+            class="full-width"
+            *ngIf="!subscriptionRequired">
+            <mat-label>{{
+              'services.controls.description.label' | transloco
+            }}</mat-label>
+            <textarea
+              rows="1"
+              matInput
+              formControlName="description"></textarea>
+            <fa-icon
+              class="tool-tip-trigger"
+              matSuffix
+              [icon]="faCircleInfo"
+              [matTooltip]="
+                'services.controls.description.tooltip' | transloco
+              " />
+          </mat-form-field>
+          <div class="action-container">
+            <mat-slide-toggle
+              formControlName="isActive"
+              *ngIf="!subscriptionRequired"
+              >{{ 'active' | transloco }}</mat-slide-toggle
+            >
+            <div>
+              <button mat-button matStepperPrevious type="button">Back</button>
+              <button mat-button matStepperNext type="button">Next</button>
+            </div>
+            <div></div>
+          </div>
+        </div>
+      </mat-step>
+      <mat-step>
+        <ng-template matStepLabel>Service Options</ng-template>
+        <br />
+        <ng-container *ngIf="viewSchema && !subscriptionRequired">
+          <ng-container formGroupName="config">
+            <mat-accordion class="full-width">
+              <div class="details-section">
+                <ng-container *ngFor="let item of viewSchema">
+                  <ng-container
+                    *ngIf="
+                      item.type === 'text' && item.name === 'content';
+                      else dynamic
+                    ">
+                    <df-script-editor
+                      [type]="getControl('type')"
+                      [storageServiceId]="getConfigControl('storageServiceId')"
+                      [storagePath]="getConfigControl('storagePath')"
+                      [content]="getConfigControl('content')"
+                      [cache]="serviceData ? serviceData.name : ''"
+                      class="full-width"></df-script-editor>
+                  </ng-container>
+                  <ng-template #dynamic>
+                    <df-dynamic-field
+                      *ngIf="
+                        [
+                          'integer',
+                          'password',
+                          'string',
+                          'text',
+                          'picklist',
+                          'multi_picklist',
+                          'boolean',
+                          'file_certificate'
+                        ].includes(item.type)
+                      "
+                      [schema]="item"
+                      [formControl]="getConfigControl(item.name)"
+                      [class.dynamic-width]="item.type !== 'file_certificate'"
+                      [class.full-width]="
+                        item.type === 'file_certificate'
+                      "></df-dynamic-field>
+                    <df-array-field
+                      *ngIf="item.type === 'array' || item.type === 'object'"
+                      [schema]="item"
+                      [formControl]="getConfigControl(item.name)"
+                      class="full-width"></df-array-field>
+                  </ng-template>
+                </ng-container>
+              </div>
+            </mat-accordion>
+          </ng-container>
+        </ng-container>
+        <div class="full-width action-bar" *ngIf="!subscriptionRequired">
+          <button mat-flat-button type="button" (click)="goBack()">
+            {{ 'cancel' | transloco }}
+          </button>
+          <button mat-flat-button color="primary">
+            {{ 'save' | transloco }}
+          </button>
+        </div>
+      </mat-step>
+      <!-- change default 'edit' & 'done' icon -->
+      <ng-template matStepperIcon="edit" let-index="index">
+        <ng-container [ngSwitch]="index">
+          <mat-icon *ngSwitchCase="0">1</mat-icon>
+          <mat-icon *ngSwitchCase="1">2</mat-icon>
+          <mat-icon *ngSwitchCase="2">3</mat-icon>
+        </ng-container>
+      </ng-template>
+      <ng-template matStepperIcon="done" let-index="index">
+        <ng-container [ngSwitch]="index">
+          <mat-icon *ngSwitchCase="0">1</mat-icon>
+          <mat-icon *ngSwitchCase="1">2</mat-icon>
+          <mat-icon *ngSwitchCase="2">3</mat-icon>
+        </ng-container>
+      </ng-template>
+    </mat-stepper>
   </ng-container>
-  <div class="full-width action-bar" *ngIf="!subscriptionRequired">
-    <button mat-flat-button type="button" (click)="goBack()">
-      {{ 'cancel' | transloco }}
-    </button>
-    <button mat-flat-button color="primary">
-      {{ 'save' | transloco }}
-    </button>
-  </div>
+  <ng-template #notDatabase>
+    <mat-form-field
+      subscriptSizing="dynamic"
+      class="dynamic-width"
+      appearance="outline">
+      <mat-label>{{
+        'services.controls.serviceType.label' | transloco
+      }}</mat-label>
+      <mat-select formControlName="type">
+        <mat-option *ngFor="let type of serviceTypes" [value]="type.name">
+          {{ type.label }}
+        </mat-option>
+      </mat-select>
+      <fa-icon
+        class="tool-tip-trigger"
+        matSuffix
+        [icon]="faCircleInfo"
+        [matTooltip]="'services.controls.serviceType.tooltip' | transloco" />
+    </mat-form-field>
+    <mat-form-field
+      subscriptSizing="dynamic"
+      class="dynamic-width"
+      appearance="outline"
+      *ngIf="!subscriptionRequired">
+      <mat-label>{{
+        'services.controls.namespace.label' | transloco
+      }}</mat-label>
+      <input matInput formControlName="name" />
+      <fa-icon
+        class="tool-tip-trigger"
+        matSuffix
+        [icon]="faCircleInfo"
+        [matTooltip]="'services.controls.namespace.tooltip' | transloco" />
+    </mat-form-field>
+    <mat-form-field
+      subscriptSizing="dynamic"
+      appearance="outline"
+      class="dynamic-width"
+      *ngIf="!subscriptionRequired">
+      <mat-label>{{ 'services.controls.label.label' | transloco }}</mat-label>
+      <input matInput formControlName="label" />
+      <fa-icon
+        class="tool-tip-trigger"
+        matSuffix
+        [icon]="faCircleInfo"
+        [matTooltip]="'services.controls.label.tooltip' | transloco" />
+    </mat-form-field>
+    <mat-form-field
+      subscriptSizing="dynamic"
+      class="full-width"
+      appearance="outline"
+      *ngIf="!subscriptionRequired">
+      <mat-label>{{
+        'services.controls.description.label' | transloco
+      }}</mat-label>
+      <textarea rows="1" matInput formControlName="description"></textarea>
+      <fa-icon
+        class="tool-tip-trigger"
+        matSuffix
+        [icon]="faCircleInfo"
+        [matTooltip]="'services.controls.description.tooltip' | transloco" />
+    </mat-form-field>
+    <mat-slide-toggle
+      formControlName="isActive"
+      *ngIf="!subscriptionRequired"
+      >{{ 'active' | transloco }}</mat-slide-toggle
+    >
+    <ng-container *ngIf="viewSchema && !subscriptionRequired">
+      <ng-container formGroupName="config">
+        <mat-accordion class="full-width">
+          <mat-expansion-panel [expanded]="serviceForm.getRawValue().type">
+            <mat-expansion-panel-header
+              >{{ 'services.options' | transloco }}
+            </mat-expansion-panel-header>
+            <div class="details-section">
+              <ng-container *ngFor="let item of viewSchema">
+                <ng-container
+                  *ngIf="
+                    item.type === 'text' && item.name === 'content';
+                    else dynamic
+                  ">
+                  <df-script-editor
+                    [type]="getControl('type')"
+                    [storageServiceId]="getConfigControl('storageServiceId')"
+                    [storagePath]="getConfigControl('storagePath')"
+                    [content]="getConfigControl('content')"
+                    [cache]="serviceData ? serviceData.name : ''"
+                    class="full-width"></df-script-editor>
+                </ng-container>
+                <ng-template #dynamic>
+                  <df-dynamic-field
+                    *ngIf="
+                      [
+                        'integer',
+                        'password',
+                        'string',
+                        'text',
+                        'picklist',
+                        'multi_picklist',
+                        'boolean',
+                        'file_certificate'
+                      ].includes(item.type)
+                    "
+                    [schema]="item"
+                    [formControl]="getConfigControl(item.name)"
+                    [class.dynamic-width]="item.type !== 'file_certificate'"
+                    [class.full-width]="
+                      item.type === 'file_certificate'
+                    "></df-dynamic-field>
+                  <df-array-field
+                    *ngIf="item.type === 'array' || item.type === 'object'"
+                    [schema]="item"
+                    [formControl]="getConfigControl(item.name)"
+                    class="full-width"></df-array-field>
+                </ng-template>
+              </ng-container>
+            </div>
+          </mat-expansion-panel>
+        </mat-accordion>
+      </ng-container>
+    </ng-container>
+    <div class="full-width action-bar" *ngIf="!subscriptionRequired">
+      <button mat-flat-button type="button" (click)="goBack()">
+        {{ 'cancel' | transloco }}
+      </button>
+      <button mat-flat-button color="primary">
+        {{ 'save' | transloco }}
+      </button>
+    </div>
+  </ng-template>
 </form>
 <df-paywall *ngIf="subscriptionRequired"></df-paywall>
diff --git a/src/app/adf-services/df-service-details/df-service-details.component.scss b/src/app/adf-services/df-service-details/df-service-details.component.scss
index e69de29b..ce960eb2 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.scss
+++ b/src/app/adf-services/df-service-details/df-service-details.component.scss
@@ -0,0 +1,97 @@
+.grid-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+label.radio-card {
+  cursor: pointer;
+
+  .card-content-wrapper {
+    background: #fff;
+    border-radius: 5px;
+    max-width: 200px;
+    min-height: 200px;
+    padding: 12px;
+    display: grid;
+    box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.04);
+    background-size: contain;
+    background-repeat: no-repeat;
+    opacity: 0.8;
+  }
+
+  .check-icon {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    border: solid 2px #e3e3e3;
+    border-radius: 50%;
+    position: relative;
+
+    &:before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.93552 4.58423C0.890286 4.53718 0.854262 4.48209 0.829309 4.42179C0.779553 4.28741 0.779553 4.13965 0.829309 4.00527C0.853759 3.94471 0.889842 3.88952 0.93552 3.84283L1.68941 3.12018C1.73378 3.06821 1.7893 3.02692 1.85185 2.99939C1.91206 2.97215 1.97736 2.95796 2.04345 2.95774C2.11507 2.95635 2.18613 2.97056 2.2517 2.99939C2.31652 3.02822 2.3752 3.06922 2.42456 3.12018L4.69872 5.39851L9.58026 0.516971C9.62828 0.466328 9.68554 0.42533 9.74895 0.396182C9.81468 0.367844 9.88563 0.353653 9.95721 0.354531C10.0244 0.354903 10.0907 0.369582 10.1517 0.397592C10.2128 0.425602 10.2672 0.466298 10.3112 0.516971L11.0651 1.25003C11.1108 1.29672 11.1469 1.35191 11.1713 1.41247C11.2211 1.54686 11.2211 1.69461 11.1713 1.82899C11.1464 1.88929 11.1104 1.94439 11.0651 1.99143L5.06525 7.96007C5.02054 8.0122 4.96514 8.0541 4.90281 8.08294C4.76944 8.13802 4.61967 8.13802 4.4863 8.08294C4.42397 8.0541 4.36857 8.0122 4.32386 7.96007L0.93552 4.58423Z' fill='white'/%3E%3C/svg%3E%0A");
+      background-repeat: no-repeat;
+      background-size: 12px;
+      background-position: center center;
+      transform: scale(1.6);
+      opacity: 0;
+    }
+  }
+
+  input[type='radio'] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    &:checked {
+      + .card-content-wrapper {
+        box-shadow:
+          0 2px 4px 0 rgba(219, 215, 215, 0.5),
+          0 0 0 2px;
+        opacity: 1;
+
+        .check-icon {
+          transform: scale(1.2);
+          &:before {
+            transform: scale(1);
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    &:focus {
+      + .card-content-wrapper {
+        .check-icon {
+          box-shadow: 0 0 0 4px rgba(48, 86, 213, 0.2);
+          border-color: #3056d5;
+        }
+      }
+    }
+  }
+
+  .card-content {
+    width: 100%;
+    img {
+      margin-bottom: 10px;
+      width: 100%;
+      height: 110px;
+    }
+  }
+}
+
+.details-section {
+  .section-header,
+  .action-container {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+}
+mat-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/app/adf-services/df-service-details/df-service-details.component.ts b/src/app/adf-services/df-service-details/df-service-details.component.ts
index 0193469d..59bb671f 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.ts
+++ b/src/app/adf-services/df-service-details/df-service-details.component.ts
@@ -8,6 +8,7 @@ import {
   ReactiveFormsModule,
   Validators,
 } from '@angular/forms';
+import { MatStepper, MatStepperModule } from '@angular/material/stepper';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -38,6 +39,9 @@ import {
   SILVER_SERVICES,
 } from 'src/app/shared/constants/services';
 import { DfPaywallComponent } from 'src/app/shared/components/df-paywall/df-paywall.component';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { HttpClient } from '@angular/common/http';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -66,15 +70,21 @@ import { DfPaywallComponent } from 'src/app/shared/components/df-paywall/df-payw
     MatButtonModule,
     DfScriptEditorComponent,
     DfPaywallComponent,
+    MatStepperModule,
+    CommonModule,
+    MatIconModule,
   ],
 })
 export class DfServiceDetailsComponent implements OnInit {
   edit = false;
+  isDatabase = false;
   serviceTypes: Array<ServiceType>;
   serviceForm: FormGroup;
   faCircleInfo = faCircleInfo;
   serviceData: Service;
   configSchema: Array<ConfigSchema>;
+  images: Array<ImageObject>;
+  search = '';
 
   systemEvents: Array<{ label: string; value: string }>;
 
@@ -84,7 +94,8 @@ export class DfServiceDetailsComponent implements OnInit {
     @Inject(SERVICES_SERVICE_TOKEN)
     private servicesService: DfBaseCrudService,
     private router: Router,
-    private systemConfigDataService: DfSystemConfigDataService
+    private systemConfigDataService: DfSystemConfigDataService,
+    private http: HttpClient
   ) {
     this.serviceForm = this.fb.group({
       type: ['', Validators.required],
@@ -100,6 +111,11 @@ export class DfServiceDetailsComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.http
+      .get<Array<ImageObject>>('assets/img/databaseImages.json')
+      .subscribe(images => {
+        this.images = images;
+      });
     this.systemConfigDataService.environment$
       .pipe(
         switchMap(env =>
@@ -107,6 +123,9 @@ export class DfServiceDetailsComponent implements OnInit {
         )
       )
       .subscribe(({ env, route }) => {
+        if (route['groups'][0] === 'Database') {
+          this.isDatabase = true;
+        }
         const { data, serviceTypes, groups } = route;
         const licenseType = env.platform?.license;
         this.serviceTypes = serviceTypes;
@@ -138,6 +157,11 @@ export class DfServiceDetailsComponent implements OnInit {
           });
         }
       });
+    this.serviceForm.controls['type'].valueChanges.subscribe(value => {
+      this.serviceForm.patchValue({
+        label: value,
+      });
+    });
   }
 
   initializeConfig() {
@@ -234,4 +258,30 @@ export class DfServiceDetailsComponent implements OnInit {
   goBack() {
     this.router.navigate(['../'], { relativeTo: this.activatedRoute });
   }
+
+  getBackgroundImage(typeLable: string) {
+    const image = this.images.find(img => img.label == typeLable);
+    if (!image) {
+      return '';
+    }
+    return image ? image.src : '';
+  }
+
+  get filteredServiceTypes() {
+    return this.serviceTypes.filter(type =>
+      type.label
+        .replace(/\s/g, '')
+        .toLowerCase()
+        .includes(this.search.toLowerCase())
+    );
+  }
+
+  nextStep(stepper: MatStepper) {
+    stepper.next();
+  }
+}
+interface ImageObject {
+  alt: string;
+  src: string;
+  label: string;
 }
diff --git a/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.html b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.html
index 03fa0fff..afde76ea 100644
--- a/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.html
+++ b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.html
@@ -1,5 +1,6 @@
 <mat-form-field
   subscriptSizing="dynamic"
+  appearance="outline"
   *ngIf="
     [
       'integer',
diff --git a/src/assets/img/bigquery.png b/src/assets/img/bigquery.png
new file mode 100644
index 00000000..e850369d
Binary files /dev/null and b/src/assets/img/bigquery.png differ
diff --git a/src/assets/img/databaseImages.json b/src/assets/img/databaseImages.json
new file mode 100644
index 00000000..c19bdc0f
--- /dev/null
+++ b/src/assets/img/databaseImages.json
@@ -0,0 +1,117 @@
+[
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc69_alloy-p-500.png",
+      "alt": "AlloyDB",
+      "label": "alloydb"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc60_API%2520Logo%2520Container-18-p-500.webp",
+      "alt": "aws_dynamodb",
+      "label": "aws_dynamodb"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf5_Redshift-p-500.jpg",
+      "alt": "aws_redshift_db",
+      "label": "aws_redshift_db"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc6c_azure-p-500.png",
+      "alt": "azure_documentdb",
+      "label": "azure_documentdb"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc6e_API%2520Logo%2520Container-p-500.png",
+      "alt": "azure_table",
+      "label": "azure_table"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf3_API%2520Logo%2520Container-p-500.webp",
+      "alt": "cassandra",
+      "label": "cassandra"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf2_API%2520Logo%2520Container-8-p-500.webp",
+      "alt": "couchdb",
+      "label": "couchdb"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf7_API%2520Logo%2520Container-14-p-500.webp",
+      "alt": "firebird",
+      "label": "firebird"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc63_API%2520Logo%2520Container-p-500.webp",
+      "alt": "ibmdb2",
+      "label": "ibmdb2"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc6d_ibm-p-500.png",
+      "alt": "informix",
+      "label": "informix"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc6a_mariaDB-p-500.png",
+      "alt": "mariadb",
+      "label": "mariadb"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb5d_API%2520Logo%2520Container-2-p-500.webp",
+      "alt": "memsql",
+      "label": "memsql"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf1_API%2520Logo%2520Container-21-p-500.webp",
+      "alt": "mongodb",
+      "label": "mongodb"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb7e_API%2520Logo%2520Container-3-p-500.webp",
+      "alt": "mysql",
+      "label": "mysql"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb01_API%2520Logo%2520Container-5-p-500.webp",
+      "alt": "oracle",
+      "label": "oracle"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb1a_API%2520Logo%2520Container-7-p-500.webp",
+      "alt": "pgsql",
+      "label": "pgsql"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc68_Salesforce-p-500.png",
+      "alt": "salesforce_db",
+      "label": "salesforce_db"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc66_Sap%2520SQL-p-500.png",
+      "alt": "sqlanywhere",
+      "label": "sqlanywhere"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbab_API%2520Logo%2520Container-11-p-500.webp",
+      "alt": "sqlite",
+      "label": "sqlite"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbd8_API%2520Logo%2520Container-27-p-500.webp",
+      "alt": "sqlsrv",
+      "label": "sqlsrv"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc67_API%2520Logo%2520Container-p-500.png",
+      "alt": "apache_hive",
+      "label": "apache_hive"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb45_API%2520Logo%2520Container-9-p-500.webp",
+      "alt": "snowflake",
+      "label": "snowflake"
+    },
+    {
+      "src": "assets/img/bigquery.png",
+      "alt": "bigquery",
+      "label": "bigquery"
+    }
+  ]
\ No newline at end of file