diff --git a/web/ui/dashboard/src/app/private/components/config-button/config-button.component.html b/web/ui/dashboard/src/app/private/components/config-button/config-button.component.html
index cc7c05dd12..32a9bba989 100644
--- a/web/ui/dashboard/src/app/private/components/config-button/config-button.component.html
+++ b/web/ui/dashboard/src/app/private/components/config-button/config-button.component.html
@@ -1,8 +1,8 @@
 <button convoy-button size="sm" fill="outline" color="grey" texture="light" type="button" class="!px-0 !py-0 rounded-4px" (click)="onClick.emit()">
-	<div class="px-10px">
+	<div class="px-10px whitespace-nowrap">
 		<ng-content></ng-content>
 	</div>
-	<div class="flex items-center justify-center bg-new.gray-100 ml-4px py-8px px-10px">
+	<div class="flex items-center justify-center bg-new.gray-200 ml-4px py-8px px-10px min-h-[26px] min-w-[30px]">
 		<img src="assets/img/svg/plus-icon.svg" class="" alt="plus icon" />
 	</div>
 </button>
diff --git a/web/ui/dashboard/src/app/private/components/create-endpoint/create-endpoint.component.ts b/web/ui/dashboard/src/app/private/components/create-endpoint/create-endpoint.component.ts
index 2f74ccb40c..a66ada58b4 100644
--- a/web/ui/dashboard/src/app/private/components/create-endpoint/create-endpoint.component.ts
+++ b/web/ui/dashboard/src/app/private/components/create-endpoint/create-endpoint.component.ts
@@ -75,7 +75,10 @@ export class CreateEndpointComponent implements OnInit {
 	token: string = this.route.snapshot.params.token;
 	@Input('endpointId') endpointUid: string = this.route.snapshot.params.id;
 	enableMoreConfig = false;
-	configurations = [{ uid: 'http_timeout', name: 'Timeout ', show: false }];
+	configurations = [
+		{ uid: 'http_timeout', name: 'Timeout ', show: false },
+		{ uid: 'owner_id', name: 'Owner ID ', show: false }
+	];
 	endpointCreated: boolean = false;
 	endpointSecret?: SECRET;
 	private rbacService = inject(RbacService);
@@ -92,13 +95,7 @@ export class CreateEndpointComponent implements OnInit {
 
 	async ngOnInit() {
 		if (this.type !== 'portal')
-			this.configurations.push(
-				{ uid: 'owner_id', name: 'Owner ID ', show: false },
-				{ uid: 'rate_limit', name: 'Rate Limit ', show: false },
-				{ uid: 'alert_config', name: 'Notifications', show: false },
-				{ uid: 'auth', name: 'Auth', show: false },
-				{ uid: 'signature', name: 'Signature Format', show: false }
-			);
+			this.configurations.push({ uid: 'rate_limit', name: 'Rate Limit ', show: false }, { uid: 'alert_config', name: 'Notifications', show: false }, { uid: 'auth', name: 'Auth', show: false }, { uid: 'signature', name: 'Signature Format', show: false });
 		if (this.endpointUid && this.editMode) this.getEndpointDetails();
 		if (!(await this.rbacService.userCanAccess('Endpoints|MANAGE'))) this.addNewEndpointForm.disable();
 	}
diff --git a/web/ui/dashboard/src/app/public/app/app.component.html b/web/ui/dashboard/src/app/public/app/app.component.html
index f91578f02f..7d94e17acb 100644
--- a/web/ui/dashboard/src/app/public/app/app.component.html
+++ b/web/ui/dashboard/src/app/public/app/app.component.html
@@ -66,7 +66,7 @@ <h2 class="font-medium text-14 text-new.gray-400">Endpoints</h2>
 							</button>
 						</li>
 						<li class="mb-10px hover:bg-new.primary-25 transition-all duration-300 rounded-8px" *ngIf="portalDetails?.can_manage_endpoint">
-							<button convoy-dropdown-option convoy-button size="sm" fill="clear" class="w-full !justify-start px-8px py-4px" color="grey" (click)="showEndpointSecret = true; activeEndpoint = endpoint">
+							<button convoy-dropdown-option convoy-button size="sm" fill="clear" class="w-full !justify-start px-8px py-4px" color="grey" (click)="activeEndpoint = endpoint; secretDialog.showModal()">
 								<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-8px">
 									<path
 										d="M6.99344 1.48703L3.66677 2.74036C2.9001 3.02703 2.27344 3.9337 2.27344 4.74703V9.70036C2.27344 10.487 2.79344 11.5204 3.42677 11.9937L6.29344 14.1337C7.23344 14.8404 8.7801 14.8404 9.7201 14.1337L12.5868 11.9937C13.2201 11.5204 13.7401 10.487 13.7401 9.70036V4.74703C13.7401 3.92703 13.1134 3.02036 12.3468 2.7337L9.0201 1.48703C8.45344 1.28036 7.54677 1.28036 6.99344 1.48703Z"
@@ -290,9 +290,11 @@ <h2 class="font-medium text-14 text-new.gray-400">Endpoints</h2>
 
 	<div id="convoy-app"></div>
 
-	<convoy-endpoint-secret class="z-20 relative" *ngIf="showEndpointSecret" [endpointDetails]="activeEndpoint" (closeSecretModal)="showEndpointSecret = false" (expireCurrentSecret)="getEndpoints()"></convoy-endpoint-secret>
-
 	<div class="fixed top-0 left-0 right-0 bottom-0 bg-[#fff] z-20 pb-100px overflow-auto" *ngIf="showCreateEndpoint === true">
 		<convoy-create-portal-endpoint (onAction)="onCloseEndpointForm()" [endpoint]="activeEndpoint"></convoy-create-portal-endpoint>
 	</div>
 </div>
+
+<dialog #secretDialog convoy-dialog position="center">
+	<convoy-endpoint-secret [endpointDetails]="activeEndpoint" (closeSecretModal)="secretDialog.close()" (expireCurrentSecret)="getEndpoints(); secretDialog.close()"></convoy-endpoint-secret>
+</dialog>
diff --git a/web/ui/dashboard/src/app/public/app/app.component.ts b/web/ui/dashboard/src/app/public/app/app.component.ts
index ca4c65f737..68ee9ce0dc 100644
--- a/web/ui/dashboard/src/app/public/app/app.component.ts
+++ b/web/ui/dashboard/src/app/public/app/app.component.ts
@@ -27,7 +27,6 @@ export class AppComponent implements OnInit {
 	activeEndpoint?: PORTAL_ENDPOINT;
 	eventDeliveryFilteredByEventId!: string;
 	isloadingSubscriptions = false;
-	showEndpointSecret: boolean = false;
 	showCreateEndpoint = false;
 	isTogglingEndpoint = false;
 	portalDetails!: PORTAL_LINK;
diff --git a/web/ui/dashboard/src/app/public/app/app.module.ts b/web/ui/dashboard/src/app/public/app/app.module.ts
index e67e728b6d..36d1853854 100644
--- a/web/ui/dashboard/src/app/public/app/app.module.ts
+++ b/web/ui/dashboard/src/app/public/app/app.module.ts
@@ -13,6 +13,7 @@ import { DropdownComponent, DropdownOptionDirective } from 'src/app/components/d
 import { CreateEndpointComponent } from 'src/app/private/components/create-endpoint/create-endpoint.component';
 import { CreatePortalEndpointComponent } from '../create-endpoint/create-endpoint.component';
 import { EndpointSecretComponent } from 'src/app/private/pages/project/endpoints/endpoint-secret/endpoint-secret.component';
+import { DialogDirective } from 'src/app/components/dialog/dialog.directive';
 
 const routes: Routes = [{ path: '', component: AppComponent }];
 
@@ -32,7 +33,8 @@ const routes: Routes = [{ path: '', component: AppComponent }];
 		DropdownOptionDirective,
 		TagComponent,
 		EndpointSecretComponent,
-		CreatePortalEndpointComponent
+		CreatePortalEndpointComponent,
+        DialogDirective
 	]
 })
 export class AppModule {}