diff --git a/CHANGELOG.md b/CHANGELOG.md
index 85229deb5..389967293 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,35 @@
+## v2.107.12 - 2024-11-15
+
+[Full Changelog](https://github.com/ORCID/orcid-angular/compare/v2.107.11...v2.107.12)
+
+## v2.107.11 - 2024-11-13
+
+[Full Changelog](https://github.com/ORCID/orcid-angular/compare/v2.107.10...v2.107.11)
+
+## v2.107.10 - 2024-11-13
+
+[Full Changelog](https://github.com/ORCID/orcid-angular/compare/v2.107.9...v2.107.10)
+
+- [#2396](https://github.com/ORCID/orcid-angular/pull/2396): 9497 resolve the issues integrators are having when embedding summaries into iframes
+- [#2393](https://github.com/ORCID/orcid-angular/pull/2393): Bump rollup from 3.29.4 to 3.29.5
+- [#2395](https://github.com/ORCID/orcid-angular/pull/2395): scroll to top on email interstitial
+- [#2394](https://github.com/ORCID/orcid-angular/pull/2394): convert to matrix format and bump all action versions for node version
+
+### Fix
+
+- bump linting action versions
+
+## 2.108.0 - 2024-11-13
+
+[Full Changelog](https://github.com/ORCID/orcid-angular/compare/v2.107.9...2.108.0)
+
+- [#2395](https://github.com/ORCID/orcid-angular/pull/2395): scroll to top on email interstitial
+- [#2394](https://github.com/ORCID/orcid-angular/pull/2394): convert to matrix format and bump all action versions for node version
+
+### Fix
+
+- bump linting action versions
+
 ## 2.107.10 - 2024-11-12
 
 [Full Changelog](https://github.com/ORCID/orcid-angular/compare/v2.107.9...2.107.10)
diff --git a/src/app/cdk/trusted-summary/component/trusted-summary/trusted-summary.component.scss b/src/app/cdk/trusted-summary/component/trusted-summary/trusted-summary.component.scss
index b1b65eadf..5c2863a67 100644
--- a/src/app/cdk/trusted-summary/component/trusted-summary/trusted-summary.component.scss
+++ b/src/app/cdk/trusted-summary/component/trusted-summary/trusted-summary.component.scss
@@ -2,7 +2,6 @@
   width: 100%;
   display: flex;
   justify-content: center;
-  height: 100vh;
 }
 
 main.stand-alone-mode {
@@ -17,6 +16,7 @@ main.inside-iframe {
   align-content: start;
   grid-gap: 0;
   box-sizing: border-box;
+  height: 100vh;
 
   .panel-body {
     padding-top: 16px;
diff --git a/src/app/developer-tools/components/terms-of-use/terms-of-use.component.html b/src/app/developer-tools/components/terms-of-use/terms-of-use.component.html
index cd639f1d4..15b512002 100644
--- a/src/app/developer-tools/components/terms-of-use/terms-of-use.component.html
+++ b/src/app/developer-tools/components/terms-of-use/terms-of-use.component.html
@@ -132,6 +132,25 @@ <h2 class="orc-font-body-large" i18n="@@developerTools.additionalResources">
   </ng-container>
 </p>
 
+<app-alert-message *ngIf="!hasVerifiedEmailAddress">
+  <strong class="orc-font-body" i18n="@@developerTools.noVerifiedEmailAddresses"
+    >No verified email addresses found</strong
+  >
+
+  <p class="orc-font-body-small">
+    <ng-container i18n="@@developerTools.youMustHaveAtLeastOneVerifiedEmail"
+      >You must have at least one verified email address in your ORCID account
+      to register for your Public API credentials. Manage your email addresses
+      in the</ng-container
+    >
+    <a
+      (click)="openEmailModal()"
+      i18n="@@developerTools.emailsAndDomainsSection"
+      >Emails and domains section of your ORCID record</a
+    >.
+  </p>
+</app-alert-message>
+
 <div class="info" *ngIf="!checked && dirty">
   <div class="col">
     <mat-icon class="large-material-icon outline">warning</mat-icon>
diff --git a/src/app/developer-tools/components/terms-of-use/terms-of-use.component.scss b/src/app/developer-tools/components/terms-of-use/terms-of-use.component.scss
index 119a7b114..0746ee38e 100644
--- a/src/app/developer-tools/components/terms-of-use/terms-of-use.component.scss
+++ b/src/app/developer-tools/components/terms-of-use/terms-of-use.component.scss
@@ -45,3 +45,14 @@ h2 {
 .mat-button-wrap-text {
   margin-bottom: 32px;
 }
+
+app-alert-message {
+  line-height: 21px;
+  margin-top: 16px;
+  a {
+    text-decoration: underline;
+  }
+  p {
+    margin-bottom: 0;
+  }
+}
diff --git a/src/app/developer-tools/components/terms-of-use/terms-of-use.component.spec.ts b/src/app/developer-tools/components/terms-of-use/terms-of-use.component.spec.ts
index d89be9998..5830ed280 100644
--- a/src/app/developer-tools/components/terms-of-use/terms-of-use.component.spec.ts
+++ b/src/app/developer-tools/components/terms-of-use/terms-of-use.component.spec.ts
@@ -7,6 +7,8 @@ import { RecordService } from 'src/app/core/record/record.service'
 import { of } from 'rxjs'
 
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import { MatLegacyDialog } from '@angular/material/legacy-dialog'
+import { useAnimation } from '@angular/animations'
 
 describe('TermsOfUseComponent', () => {
   let component: TermsOfUseComponent
@@ -19,6 +21,7 @@ describe('TermsOfUseComponent', () => {
         { provide: DeveloperToolsService, useValue: {} },
         { provide: PlatformInfoService, useValue: {} },
         { provide: RecordService, useValue: { getRecord: () => of() } },
+        { provide: MatLegacyDialog, useValue: {} },
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents()
diff --git a/src/app/developer-tools/components/terms-of-use/terms-of-use.component.ts b/src/app/developer-tools/components/terms-of-use/terms-of-use.component.ts
index e0f049baa..0d14e464b 100644
--- a/src/app/developer-tools/components/terms-of-use/terms-of-use.component.ts
+++ b/src/app/developer-tools/components/terms-of-use/terms-of-use.component.ts
@@ -9,9 +9,11 @@ import {
   ViewChild,
 } from '@angular/core'
 import { MatLegacyCheckbox as MatCheckbox } from '@angular/material/legacy-checkbox'
+import { MatLegacyDialog } from '@angular/material/legacy-dialog'
 import { Subject } from 'rxjs'
 import { takeUntil } from 'rxjs/operators'
 import { PlatformInfoService } from 'src/app/cdk/platform-info'
+import { ModalEmailComponent } from 'src/app/cdk/side-bar/modals/modal-email/modal-email.component'
 import { DeveloperToolsService } from 'src/app/core/developer-tools/developer-tools.service'
 import { RecordService } from 'src/app/core/record/record.service'
 
@@ -31,10 +33,12 @@ export class TermsOfUseComponent implements OnInit, OnDestroy {
   @Output() developerToolsEnable = new EventEmitter<boolean>()
   $destroy = new Subject<boolean>()
   emailAlreadyVerified: boolean
+  hasVerifiedEmailAddress: boolean
 
   constructor(
     private developerToolsService: DeveloperToolsService,
     private _record: RecordService,
+    private _dialog: MatLegacyDialog,
     private _changeDetectorRef: ChangeDetectorRef
   ) {}
   ngOnDestroy(): void {
@@ -50,6 +54,9 @@ export class TermsOfUseComponent implements OnInit, OnDestroy {
         const primaryEmail = userRecord?.emails?.emails?.filter(
           (email) => email.primary
         )[0]
+        this.hasVerifiedEmailAddress = userRecord.emails.emails.some(
+          (email) => email.verified
+        )
         if (primaryEmail?.verified) {
           this.emailAlreadyVerified = true
           this._changeDetectorRef.detectChanges()
@@ -57,6 +64,17 @@ export class TermsOfUseComponent implements OnInit, OnDestroy {
       })
   }
 
+  openEmailModal() {
+    return this._dialog
+      .open(ModalEmailComponent, {
+        width: '850px',
+        maxWidth: '99%',
+        // data: this.userRecord,
+        // ariaLabel: getAriaLabel(this.editModalComponent, this.type),
+      })
+      .afterClosed()
+  }
+
   registerForPublicApi() {
     this.dirty = true
     if (!this.checked) {
diff --git a/src/app/developer-tools/developer-tools.module.ts b/src/app/developer-tools/developer-tools.module.ts
index b4d50e3a0..81061d8d3 100644
--- a/src/app/developer-tools/developer-tools.module.ts
+++ b/src/app/developer-tools/developer-tools.module.ts
@@ -22,6 +22,7 @@ import { ModalModule } from '../cdk/modal/modal.module'
 import { A11yLinkModule } from '../cdk/a11y-link/a11y-link.module'
 import { TopBarVerificationEmailModule } from '../cdk/top-bar-verification-email/top-bar-verification-email.module'
 import { DeveloperToolsComponent } from './pages/developer-tools/developer-tools.component'
+import { AlertMessageModule } from '../cdk/alert-message/alert-message.module'
 
 @NgModule({
   declarations: [
@@ -49,6 +50,7 @@ import { DeveloperToolsComponent } from './pages/developer-tools/developer-tools
     ModalModule,
     A11yLinkModule,
     TopBarVerificationEmailModule,
+    AlertMessageModule,
   ],
 })
 export class DeveloperToolsModule {}
diff --git a/src/app/developer-tools/pages/developer-tools/developer-tools.component.html b/src/app/developer-tools/pages/developer-tools/developer-tools.component.html
index ace05d21e..03406c9f3 100644
--- a/src/app/developer-tools/pages/developer-tools/developer-tools.component.html
+++ b/src/app/developer-tools/pages/developer-tools/developer-tools.component.html
@@ -204,56 +204,47 @@ <h2 class="orc-font-body-large" i18n="@@developerTools.redirectUris">
             your integration users will experience an error.
           </p>
 
-          <div class="info">
-            <div class="col">
-              <mat-icon class="material-icons-outlined large-material-icon"
-                >info</mat-icon
-              >
-            </div>
-            <div class="col l11 m6 s3">
-              <strong i18n="@@developerTools.pleaseNote">Please note</strong>
-              <ul>
-                <li>
-                  <ng-container i18n="@@developerTools.only">
-                    Only</ng-container
-                  >
-                  <strong i18n="@@developerTools.httpsURI">HTTPS URIs</strong>
-                  <ng-container i18n="@@developerTools.areAccepted">
-                    are accepted in production
-                  </ng-container>
-                </li>
-                <li>
-                  <ng-container i18n="@@developerTools.domainsRegisted"
-                    >Domains registered</ng-container
-                  >
-                  <strong i18n="@@developerTools.must">MUST</strong>
-                  <ng-container i18n="@@developerTools.exactlyMatchTheDomains"
-                    >exactly match the domains used, including
-                    subdomains</ng-container
-                  >
-                </li>
-                <li>
-                  <strong i18n="@@developerTools.registerAllRedirectURIs"
-                    >Register all redirect URIs fully where possible.</strong
-                  >
-                  <ng-container i18n="@@developerTools.thisIsTheMostSecure"
-                    >This is the most secure option and what we recommend. For
-                    more information about redirect URIs, please see
-                    our</ng-container
-                  >
-
-                  <a
-                    class="underline"
-                    i18n="@@developerTools.redirectUriFaq"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                    href="https://info.orcid.org/ufaqs/how-do-redirect-uris-work/"
-                    >redirect URI FAQ</a
-                  >
-                </li>
-              </ul>
-            </div>
-          </div>
+          <app-alert-message class="redirect-uri-notice">
+            <strong i18n="@@developerTools.pleaseNote">Please note</strong>
+            <ul>
+              <li>
+                <ng-container i18n="@@developerTools.only"> Only</ng-container>
+                <strong i18n="@@developerTools.httpsURI">HTTPS URIs</strong>
+                <ng-container i18n="@@developerTools.areAccepted">
+                  are accepted in production
+                </ng-container>
+              </li>
+              <li>
+                <ng-container i18n="@@developerTools.domainsRegisted"
+                  >Domains registered</ng-container
+                >
+                <strong i18n="@@developerTools.must">MUST</strong>
+                <ng-container i18n="@@developerTools.exactlyMatchTheDomains"
+                  >exactly match the domains used, including
+                  subdomains</ng-container
+                >
+              </li>
+              <li>
+                <strong i18n="@@developerTools.registerAllRedirectURIs"
+                  >Register all redirect URIs fully where possible.</strong
+                >
+                <ng-container i18n="@@developerTools.thisIsTheMostSecure"
+                  >This is the most secure option and what we recommend. For
+                  more information about redirect URIs, please see
+                  our</ng-container
+                >
+
+                <a
+                  class="underline"
+                  i18n="@@developerTools.redirectUriFaq"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  href="https://info.orcid.org/ufaqs/how-do-redirect-uris-work/"
+                  >redirect URI FAQ</a
+                >
+              </li>
+            </ul>
+          </app-alert-message>
 
           <div class="warn" *ngIf="triedToSaveWithoutUrls">
             <div class="col">
@@ -453,6 +444,27 @@ <h3 class="orc-font-body" i18n="@@developerTools.exampleCode">
               Redirect URIs must be unique
             </mat-error>
           </p>
+          <app-alert-message class="notice-panel"
+            ><ng-container
+              i18n="
+                @@developerTools.theOrcidPublicApiAllowsYouToRequestPermission"
+              >The ORCID Public API is free for non-commercial use by
+              individuals as stated in the</ng-container
+            >
+            <a
+              href="https://info.orcid.org/public-client-terms-of-service/"
+              target="_blank"
+              class="underline"
+              i18n="@@developerTools.publicClientTermsOfService"
+              >Public APIs Terms of Service.</a
+            >
+            <ng-container i18n="@@developerTools.byRegisteringForPublicApi"
+              >By “non-commercial” we mean that you may not charge any re-use
+              fees for the Public API, and you may not make use of the Public
+              API in connection with any revenue-generating product or
+              service.</ng-container
+            ></app-alert-message
+          >
 
           <button
             mat-raised-button
diff --git a/src/app/developer-tools/pages/developer-tools/developer-tools.component.scss b/src/app/developer-tools/pages/developer-tools/developer-tools.component.scss
index d186745cb..1d7edbdbf 100644
--- a/src/app/developer-tools/pages/developer-tools/developer-tools.component.scss
+++ b/src/app/developer-tools/pages/developer-tools/developer-tools.component.scss
@@ -73,6 +73,7 @@ p {
 
 ul {
   padding-left: 16px;
+  margin-bottom: 0;
 }
 
 .add-more {
@@ -148,6 +149,19 @@ app-client-secret {
   margin-top: 16px;
 }
 
+.notice-panel {
+  line-height: 21px;
+  margin-top: 32px;
+}
+
+.redirect-uri-notice {
+  strong {
+    display: inline;
+  }
+  line-height: 21px;
+  margin-bottom: 32px;
+}
+
 .save-button {
   margin-top: 32px;
   margin-bottom: 32px;
diff --git a/src/app/environment-banner/environment-banner/environment-banner.component.ts b/src/app/environment-banner/environment-banner/environment-banner.component.ts
index 522b8a7a7..282df0394 100644
--- a/src/app/environment-banner/environment-banner/environment-banner.component.ts
+++ b/src/app/environment-banner/environment-banner/environment-banner.component.ts
@@ -14,12 +14,17 @@ export class EnvironmentBannerComponent implements OnInit {
   canDismiss = environment['CAN_DISABLE_TEST_WARNING_BANNER']
   @HostBinding('style.display') display = 'none'
   labelWarning = $localize`:@@environmentBanner.ariaLabelWarning:Warning, testing website`
+  notInsideIframe: boolean
   constructor(
     @Inject(WINDOW) private window: Window,
     private _cookieService: CookieService
   ) {
+    this.notInsideIframe = window.self === window.top
     this.hostUrl = window.location.host
-    if (!this._cookieService.get('testWarningCookie') || !this.canDismiss) {
+    if (
+      (!this._cookieService.get('testWarningCookie') || !this.canDismiss) &&
+      this.notInsideIframe
+    ) {
       this.display = 'auto'
     }
   }
diff --git a/src/locale/properties/developer-tools/developer-tools.en.properties b/src/locale/properties/developer-tools/developer-tools.en.properties
index 11594b966..c5a51af0d 100644
--- a/src/locale/properties/developer-tools/developer-tools.en.properties
+++ b/src/locale/properties/developer-tools/developer-tools.en.properties
@@ -82,3 +82,6 @@ developerTools.publicClientApplicationsAreGranted2=If you need access to an ORCI
 developerTools.memberApi=Member API
 developerTools.mayBeMoreAppropriate=is available to ORCID member organizations.
 developerTools.byRegisteringForPublicApi=By “non-commercial” we mean that you may not charge any re-use fees for the Public API, and you may not make use of the Public API in connection with any revenue-generating product or service.
+developerTools.noVerifiedEmailAddresses=No verified email addresses found
+developerTools.youMustHaveAtLeastOneVerifiedEmail=You must have at least one verified email address in your ORCID account to register for your Public API credentials. Manage your email addresses in the
+developerTools.emailsAndDomainsSection=Emails and domains section of your ORCID record
diff --git a/src/locale/properties/developer-tools/developer-tools.lr.properties b/src/locale/properties/developer-tools/developer-tools.lr.properties
index bb632f179..b33563e4b 100644
--- a/src/locale/properties/developer-tools/developer-tools.lr.properties
+++ b/src/locale/properties/developer-tools/developer-tools.lr.properties
@@ -82,3 +82,6 @@ developerTools.publicClientApplicationsAreGranted2=LR
 developerTools.memberApi=LR
 developerTools.mayBeMoreAppropriate=LR
 developerTools.byRegisteringForPublicApi=LR
+developerTools.noVerifiedEmailAddresses=LR
+developerTools.youMustHaveAtLeastOneVerifiedEmail=LR
+developerTools.emailsAndDomainsSection=LR
diff --git a/src/locale/properties/developer-tools/developer-tools.rl.properties b/src/locale/properties/developer-tools/developer-tools.rl.properties
index ba5794198..97d36bd8d 100644
--- a/src/locale/properties/developer-tools/developer-tools.rl.properties
+++ b/src/locale/properties/developer-tools/developer-tools.rl.properties
@@ -82,3 +82,6 @@ developerTools.publicClientApplicationsAreGranted2=RL
 developerTools.memberApi=RL
 developerTools.mayBeMoreAppropriate=RL
 developerTools.byRegisteringForPublicApi=RL
+developerTools.noVerifiedEmailAddresses=RL
+developerTools.youMustHaveAtLeastOneVerifiedEmail=RL
+developerTools.emailsAndDomainsSection=RL
diff --git a/src/locale/properties/developer-tools/developer-tools.xx.properties b/src/locale/properties/developer-tools/developer-tools.xx.properties
index 55317fc15..f161ce459 100644
--- a/src/locale/properties/developer-tools/developer-tools.xx.properties
+++ b/src/locale/properties/developer-tools/developer-tools.xx.properties
@@ -82,3 +82,6 @@ developerTools.publicClientApplicationsAreGranted2=X
 developerTools.memberApi=X
 developerTools.mayBeMoreAppropriate=X
 developerTools.byRegisteringForPublicApi=X
+developerTools.noVerifiedEmailAddresses=X
+developerTools.youMustHaveAtLeastOneVerifiedEmail=X
+developerTools.emailsAndDomainsSection=X
diff --git a/summary-iframe-implementation-sample.html b/summary-iframe-implementation-sample.html
new file mode 100644
index 000000000..06bdb838f
--- /dev/null
+++ b/summary-iframe-implementation-sample.html
@@ -0,0 +1,247 @@
+<!-- 
+This file is published via GitHub Pages at the URL: https://orcid.github.io/orcid-angular.
+To make it publicly accessible, it must be included in the `gh-pages` branch of the repository. 
+If you need to update this file ensure the changes are correctly committed 
+and pushed to the `gh-pages` branch.
+For more information about GitHub Pages and the `gh-pages` branch, visit:
+https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ORCID Summary iFrame Display Tester</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+      .controls {
+        margin-bottom: 20px;
+      }
+      label {
+        font-weight: bold;
+        margin-right: 10px;
+      }
+      select,
+      input,
+      button {
+        margin: 5px;
+        padding: 5px 10px;
+      }
+      .dialog-box {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: white;
+        padding: 20px;
+        border-radius: 10px;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+        display: none;
+        overflow: hidden;
+      }
+      .dialog-box iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+      }
+      .close-button {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        background: #ff5e5e;
+        border: none;
+        border-radius: 50%;
+        width: 25px;
+        height: 25px;
+        cursor: pointer;
+        font-size: 16px;
+        color: white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .close-button:hover {
+        background: #ff3d3d;
+      }
+      .header {
+        text-align: center;
+        margin-bottom: 30px;
+      }
+      h1 {
+        margin: 0;
+        font-size: 2em;
+      }
+      p {
+        margin: 10px 0 0;
+        font-size: 1.2em;
+        color: #555;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="header">
+      <h1>ORCID Summary iFrame Display Tester</h1>
+      <p>
+        This tool allows you to display ORCID IDs within iframes of various
+        sizes. Test how the content adapts to different iframe dimensions.
+      </p>
+    </div>
+
+    <!-- Controls to set URL -->
+    <div class="controls">
+      <label for="iframe-url">Previously Open URLs:</label>
+      <select id="iframe-url" onchange="selectUrl()">
+        <option value="">-- Select a URL --</option>
+      </select>
+      <input type="text" id="new-url" placeholder="Enter ORCID URL" size="50" />
+    </div>
+
+    <!-- Buttons to open dialogs -->
+    <div class="controls">
+      <button onclick="openDialog(400, 600)">Open Dialog (400x600)</button>
+      <button onclick="openDialog(840, 500)">Open Dialog (840x500)</button>
+      <button onclick="openDialog(840, 700)">Open Dialog (840x700)</button>
+      <button onclick="openDialog(1200, 1200)">Open Dialog (1200x1200)</button>
+    </div>
+
+    <!-- Single Dialog Box -->
+    <div class="dialog-box" id="dialog-box">
+      <button class="close-button" onclick="closeDialog()">×</button>
+      <iframe id="dialog-iframe" src=""></iframe>
+    </div>
+
+    <script>
+      // Default URLs
+      const defaultUrls = [
+        'https://orcid.org/0000-0001-9389-7387/summary',
+        'https://sandbox.orcid.org/0000-0003-3363-7801/summary',
+        'https://qa.orcid.org/0009-0006-7603-4444/summary',
+        'https://qa.orcid.org/0009-0007-9334-3617/summary',
+        'http://localhost:4200/0009-0006-7603-4444/summary',
+        'http://localhost:4200/0009-0007-9334-3617/summary',
+      ]
+
+      // Validate ORCID URL
+      function validateUrl(url) {
+        const orcidRegex =
+          /https?:\/\/.*\/\d{4}-\d{4}-\d{4}-\d{3}[0-9X](\/summary)$/
+        if (!orcidRegex.test(url)) {
+          throw new Error(
+            "Invalid URL. The URL must contain a valid ORCID ID and optionally end with '/summary'."
+          )
+        }
+      }
+
+      // Initialize URLs from localStorage or defaults
+      function loadUrls() {
+        let savedUrls = JSON.parse(localStorage.getItem('iframeUrls')) || []
+        savedUrls = savedUrls.concat(defaultUrls)
+        savedUrls = savedUrls.filter(
+          (url, index, self) => self.indexOf(url) === index
+        ) // Remove duplicates
+        localStorage.setItem('iframeUrls', JSON.stringify(savedUrls)) // Ensure defaults are saved
+        updateDropdown(savedUrls)
+      }
+
+      function groupUrlsByDomain(urls) {
+        const grouped = {}
+        urls.forEach((url) => {
+          try {
+            const { hostname } = new URL(url) // Extract base domain
+            if (!grouped[hostname]) grouped[hostname] = []
+            grouped[hostname].push(url)
+          } catch (e) {
+            console.error(`Invalid URL skipped: ${url}`)
+          }
+        })
+        return grouped
+      }
+
+      // Update dropdown with URLs
+      function updateDropdown(urls) {
+        const urlDropdown = document.getElementById('iframe-url')
+        urlDropdown.innerHTML = '<option value="">-- Select a URL --</option>' // Reset dropdown
+
+        // Group URLs by domain
+        const groupedUrls = groupUrlsByDomain(urls)
+
+        // Create optgroups for each domain
+        Object.keys(groupedUrls).forEach((domain) => {
+          const optgroup = document.createElement('optgroup')
+          optgroup.label = domain // Set the group label to the domain
+          groupedUrls[domain].forEach((url) => {
+            const option = document.createElement('option')
+            option.value = url
+            option.textContent = url
+            optgroup.appendChild(option)
+          })
+          urlDropdown.appendChild(optgroup) // Add the group to the dropdown
+        })
+      }
+
+      // Select a URL from the dropdown
+      function selectUrl() {
+        const selectedUrl = document.getElementById('iframe-url').value
+        document.getElementById('new-url').value = selectedUrl
+      }
+
+      // Open the dialog with the selected or entered URL
+      function openDialog(width, height) {
+        const url = document.getElementById('new-url').value.trim()
+        if (!url) {
+          alert('Please enter or select a URL.')
+          return
+        }
+
+        try {
+          validateUrl(url) // Validate the URL before proceeding
+        } catch (error) {
+          alert(error.message)
+          return
+        }
+
+        // Save URL to "Previously Open URLs" if not already present
+        let urls = JSON.parse(localStorage.getItem('iframeUrls')) || []
+        if (!urls.includes(url)) {
+          urls.push(url)
+          localStorage.setItem('iframeUrls', JSON.stringify(urls))
+          updateDropdown(urls)
+        }
+
+        const dialog = document.getElementById('dialog-box')
+        const iframe = document.getElementById('dialog-iframe')
+
+        // Set iframe URL and dialog dimensions
+        iframe.src = url
+        dialog.style.width = `${width}px`
+        dialog.style.height = `${height}px`
+
+        // Display the dialog
+        dialog.style.display = 'block'
+      }
+
+      // Close the dialog
+      function closeDialog() {
+        const dialog = document.getElementById('dialog-box')
+        const iframe = document.getElementById('dialog-iframe')
+
+        // Hide the dialog and clear the iframe URL
+        dialog.style.display = 'none'
+        iframe.src = ''
+      }
+
+      // Load URLs when the page loads
+      window.onload = loadUrls
+    </script>
+  </body>
+</html>
diff --git a/yarn.lock b/yarn.lock
index 54027b35c..24456a326 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14291,9 +14291,9 @@ robots-parser@^2.0.1:
   integrity sha512-oO8f2SI04dJk3pbj2KOMJ4G6QfPAgqcGmrYGmansIcpRewIPT2ljWEt5I+ip6EgiyaLo+RXkkUWw74M25HDkMA==
 
 rollup@^3.25.2:
-  version "3.29.4"
-  resolved "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz"
-  integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==
+  version "3.29.5"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.5.tgz#8a2e477a758b520fb78daf04bca4c522c1da8a54"
+  integrity sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==
   optionalDependencies:
     fsevents "~2.3.2"