diff --git a/CHANGELOG.md b/CHANGELOG.md
index af7c93e..3f3f76c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,10 +1,16 @@
 # Changelog
 
+## [1.3.2] - 08-12-2024
+
+* Bug fixes to Browser Development Mode settings:
+    * Now the browser dev url is loaded from an option that is written by edgeboxctl. This is to ensure the environment accounts being ran locally or on a custom or cloud domain name.
+
 ## [1.3.1] - 08-12-2024
 
-* Fixed linting and code style issues across the project
-* Added action to build docker image on push to Pull Requests
-* Optimized the Dockerfile build to include the app and dependencies in different layers
+* Project fixes and improvements:
+    * Fixed linting and code style issues across the project
+    * Added action to build docker image on push to Pull Requests
+    * Optimized the Dockerfile build to include the app and dependencies in different layers
 
 ## [1.3.0] - 05-12-2024
 
diff --git a/src/src/Helper/BrowserDevHelper.php b/src/src/Helper/BrowserDevHelper.php
index 51b85bb..00f329a 100644
--- a/src/src/Helper/BrowserDevHelper.php
+++ b/src/src/Helper/BrowserDevHelper.php
@@ -69,7 +69,7 @@ public function getBrowserDevPassword(): string
 
     public function getBrowserDevUrl(): string
     {
-        return 'https://dev.'.$this->optionRepository->findDomainName();
+        return $this->optionRepository->findBrowserDevUrl() ?? '';
     }
 
     public function getBrowserDevStatus($with_password = false): array
diff --git a/src/src/Repository/OptionRepository.php b/src/src/Repository/OptionRepository.php
index 9ff14d2..ebe90e0 100644
--- a/src/src/Repository/OptionRepository.php
+++ b/src/src/Repository/OptionRepository.php
@@ -64,6 +64,11 @@ public function findBrowserDevPassword(): ?string
         return $this->findOption('BROWSERDEV_PASSWORD');
     }
 
+    public function findBrowserDevUrl(): ?string
+    {
+        return $this->findOption('BROWSERDEV_URL');
+    }
+
     private function findOption(string $name)
     {
         $option = $this->findOneBy(['name' => $name]);
diff --git a/src/templates/pages/settings/index.html.twig b/src/templates/pages/settings/index.html.twig
index f919deb..5d7c97f 100644
--- a/src/templates/pages/settings/index.html.twig
+++ b/src/templates/pages/settings/index.html.twig
@@ -144,8 +144,7 @@
                     <div class="card">
                         <div class="card-header pb-0 p-3">
                             <h6 class="mb-0">External Access</h6>
-                        </div>
-                        <div class="card-body p-3 pb-0">
+                            <p class="text-sm opacity-8">Click any of the titles below to see its option details.</p>
 
                             {% if (alert is not empty and alert.alert == 'remove_custom_domain') %}
 
@@ -164,17 +163,20 @@
                                 </div>
 
                             {% endif %}
-                            
-                            <p class="text-sm opacity-8">Click any of the titles below to see its option details.</p>
-                            
-                            <hr>
-                            <h6 class="text-uppercase text-body text-xs font-weight-bolder" style="cursor: pointer;">
-                                <a class="{% if (tunnel_status_code != "waiting" and tunnel_status_code != "starting") or app.request.query.get('option_changed') != 'external_access' %}collapsed{% endif %}" data-bs-toggle="collapse" data-bs-target="#collapseDomainOptions" aria-expanded="{% if tunnel_status_code == "waiting" or tunnel_status_code == "starting" or app.request.query.get('option_changed') == 'external_access' %}true{% else %}false{% endif %}" aria-controls="collapseDomainOptions">
-                                    ▼ Domain Name Configuration
-                                </a>
-                            </h6>
-                            <p class="text-sm opacity-8"><b>Configure 1-click internet access to your apps and dashboard</b>. Logging in with a Cloudflare account gives your a frictionless experience. Manual Setup requires you to configure a connection yourself.</p>
-                            <div id="collapseDomainOptions" class="collapse {% if (tunnel_status_code != "waiting" and tunnel_status_code != "starting") or app.request.query.get('option_changed') != 'external_access' %}collapsed{% else %}show{% endif %}" style="margin-top: 25px;">
+
+                        </div>
+
+                        {% embed 'blocks/_collapse_card.html.twig' with { 
+                            'title': 'Domain Name Configuration',
+                            'collapse_id': 'collapseDomainOptions',
+                            'is_collapsed': (tunnel_status_code != "waiting" and tunnel_status_code != "starting") or app.request.query.get('option_changed') != 'external_access', 
+                        } %}
+                            {% block card_header %}
+                                <p class="text-sm opacity-8">
+                                    <b>Configure 1-click internet access to your apps and dashboard</b>. Logging in with a Cloudflare account gives your a frictionless experience. Manual Setup requires you to configure a connection yourself.
+                                </p>
+                            {% endblock %}
+                            {% block card_content %}
                                 <div class="nav-wrapper position-relative end-0">
                                     <ul class="nav nav-pills nav-fill p-1" role="tablist">
                                         <li class="nav-item" role="presentation">
@@ -426,9 +428,9 @@
                                         </div>
                                     </div>
                                 </div>
-                            </div>
+                            {% endblock %}
+                        {% endembed %}
 
-                        </div>
                         {% embed 'blocks/_collapse_card.html.twig' with { 
                             'title': 'Web Shell Access',
                             'collapse_id': 'collapseShellOptions',
@@ -474,22 +476,22 @@
                                 </p>
                             {% endblock %}
                         {% endembed %}
-                        <div class="card-body p-3 pt-0">
-                            <hr class="mt-0">
-                            <h6 class="text-uppercase text-body text-xs font-weight-bolder" style="cursor: pointer;">
-                                <a class="{% if app.request.query.get('option_changed') == 'browserdev' %}show{% else %}collapsed{% endif %}" data-bs-toggle="collapse" data-bs-target="#collapseBrowserDevOptions" aria-expanded="{% if app.request.query.get('option_changed') == 'browserdev' %}true{% else %}false{% endif %}" aria-controls="collapseBrowserDevOptions">
-                                    ▼ Browser Dev Environment
-                                </a>
-                            </h6>
-                            <p style="cursor: pointer;" class="text-sm opacity-8 {% if app.request.query.get('option_changed') == 'browserdev' %}show{% else %}collapsed{% endif %}" data-bs-toggle="collapse" data-bs-target="#collapseBrowserDevOptions" aria-expanded="{% if app.request.query.get('option_changed') == 'browserdev' %}true{% else %}false{% endif %}" aria-controls="collapseBrowserDevOptions">
-                                <b>Access the underlying edgebox system via a full fledged web browser development environment.</b> This is an environment with full access to your edgebox instance. This is ideal for advanced users who want to run, debug, and develop their code and apps on the edgebox instance.
-                            </p>
-                            <div id="collapseBrowserDevOptions" class="{% if app.request.query.get('option_changed') == 'browserdev' %}collapse show{% else %}collapse collapsed{% endif %}" style="margin-top: 25px;">
+                        {% embed 'blocks/_collapse_card.html.twig' with { 
+                            'title': 'Browser Dev Environment',
+                            'collapse_id': 'collapseBrowserDevOptions',
+                            'is_collapsed': app.request.query.get('option_changed') != 'browserdev', 
+                        } %}
+                            {% block card_header %}
+                                <p class="text-sm opacity-8">
+                                    <b>Access the underlying edgebox system via a full fledged web browser development environment.</b> This is an environment with full access to your edgebox instance. This is ideal for advanced users who want to run, debug, and develop their code and apps on the edgebox instance.
+                                </p>
+                            {% endblock %}
+                            {% block card_content %}
                                 <p class="text-sm opacity-8">
                                     <div class="form-group browserdev-password-group" id="browserdev-password-settings" style="">
                                         <label for="sshx-timeout-value" class="form-control-label">Your access password:</label>
                                         <div class="row">
-                                            <div class="col-9">
+                                            <div class="col-12">
                                                 {# <input class="form-control" name="sshx-timeout-value" type="password" value="25" id="sshx-timeout-value"> #}
                                                 <div class="input-group">
                                                     <input  type="password" class="form-control btn-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" title="You'll be asked for this password to enter the development environment" data-container="body" data-animation="true" placeholder="Environment Password" value="{{browserdev_status.password}}" id="dev-env-password-input" aria-label="This is the Development Environment Password" aria-describedby="This is the Development Environment Password">
@@ -521,8 +523,8 @@
                                         </div>
                                     {% endif %}
                                 </p>
-                            </div>
-                        </div>
+                            {% endblock %}
+                        {% endembed %}
                     </div>
                     <div class="card mt-4">
                         <div class="card-header pb-0 p-3">