diff --git a/app/controllers/shared/web.php b/app/controllers/shared/web.php
index 43eaf74d09..526a4dbb62 100644
--- a/app/controllers/shared/web.php
+++ b/app/controllers/shared/web.php
@@ -11,13 +11,18 @@ App::init(function ($utopia, $request, $response, $layout) {
 
     /* AJAX check  */
     if (!empty($request->getQuery('version', ''))) {
-        $layout->setPath(__DIR__.'/../../views/layouts/empty.phtml');
+        $layout->setPath(__DIR__ . '/../../views/layouts/empty.phtml');
     }
-    
+
+    $port = $request->getPort();
+    $protocol = $request->getProtocol();
+    $domain = $request->getHostname();
+
     $layout
         ->setParam('title', APP_NAME)
-        ->setParam('protocol', $request->getProtocol())
-        ->setParam('domain', $request->getHostname())
+        ->setParam('protocol', $protocol)
+        ->setParam('domain', $domain)
+        ->setParam('endpoint', $protocol . '://' . $domain . ($port != 80 && $port != 443 ? ':' . $port : ''))
         ->setParam('home', App::getEnv('_APP_HOME'))
         ->setParam('setup', App::getEnv('_APP_SETUP'))
         ->setParam('class', 'unknown')
@@ -34,10 +39,10 @@ App::init(function ($utopia, $request, $response, $layout) {
     $time = (60 * 60 * 24 * 45); // 45 days cache
 
     $response
-        ->addHeader('Cache-Control', 'public, max-age='.$time)
-        ->addHeader('Expires', \date('D, d M Y H:i:s', \time() + $time).' GMT') // 45 days cache
+        ->addHeader('Cache-Control', 'public, max-age=' . $time)
+        ->addHeader('Expires', \date('D, d M Y H:i:s', \time() + $time) . ' GMT') // 45 days cache
         ->addHeader('X-Frame-Options', 'SAMEORIGIN') // Avoid console and homepage from showing in iframes
-        ->addHeader('X-XSS-Protection', '1; mode=block; report=/v1/xss?url='.\urlencode($request->getURI()))
+        ->addHeader('X-XSS-Protection', '1; mode=block; report=/v1/xss?url=' . \urlencode($request->getURI()))
         ->addHeader('X-UA-Compatible', 'IE=Edge') // Deny IE browsers from going into quirks mode
     ;
 
diff --git a/app/views/console/database/collection.phtml b/app/views/console/database/collection.phtml
index afe0365ee8..45d3287cf5 100644
--- a/app/views/console/database/collection.phtml
+++ b/app/views/console/database/collection.phtml
@@ -114,7 +114,7 @@ $maxCells = 10;
                                                     <?php if(!$array): ?>
                                                         <?php switch($type):
                                                             case 'fileId': ?>
-                                                                <img data-ls-if="{{node.<?php echo $this->escape($key); ?>}} != ''" src="" data-ls-attrs="src=//{{env.DOMAIN}}/v1/storage/files/{{node.<?php echo $this->escape($key); ?>}}/preview?width=65&height=65&project={{router.params.project}}&mode=admin" class="avatar" width="30" height="30" loading="lazy" />
+                                                                <img data-ls-if="{{node.<?php echo $this->escape($key); ?>}} != ''" src="" data-ls-attrs="src={{env.ENDPOINT}}/v1/storage/files/{{node.<?php echo $this->escape($key); ?>}}/preview?width=65&height=65&project={{router.params.project}}&mode=admin" class="avatar" width="30" height="30" loading="lazy" />
                                                             <?php break; ?>
                                                             <?php case 'document': ?>
                                                                 {...}
diff --git a/app/views/console/database/search/documents.phtml b/app/views/console/database/search/documents.phtml
index 1b656dc4e4..6fb67feab1 100644
--- a/app/views/console/database/search/documents.phtml
+++ b/app/views/console/database/search/documents.phtml
@@ -72,7 +72,7 @@ $rules = $collection->getAttribute('rules', []);
                                     <?php if(!$array): ?>
                                         <?php switch($type):
                                             case 'fileId': ?>
-                                                <img data-ls-if="{{node.<?php echo $this->escape($key); ?>}} != ''" src="" data-ls-attrs="src=//{{env.DOMAIN}}/v1/storage/files/{{node.<?php echo $this->escape($key); ?>}}/preview?width=65&height=65&project={{router.params.project}}&mode=admin" class="avatar" width="30" height="30" loading="lazy" />
+                                                <img data-ls-if="{{node.<?php echo $this->escape($key); ?>}} != ''" src="" data-ls-attrs="src={{env.ENDPOINT}}/v1/storage/files/{{node.<?php echo $this->escape($key); ?>}}/preview?width=65&height=65&project={{router.params.project}}&mode=admin" class="avatar" width="30" height="30" loading="lazy" />
                                             <?php break; ?>
                                             <?php case 'document': ?>
                                                 {...}
diff --git a/app/views/console/database/search/files.phtml b/app/views/console/database/search/files.phtml
index f8c39f4a87..ac9f76e0ea 100644
--- a/app/views/console/database/search/files.phtml
+++ b/app/views/console/database/search/files.phtml
@@ -54,7 +54,7 @@
                                 <input type="radio" name="selected" data-ls-attrs="value={{file.$id}}" data-ls-bind="{{search.selected}}" />
                             </td>
                             <td data-title="x" class="">
-                                <img src="" data-ls-attrs="src=//{{env.DOMAIN}}/v1/storage/files/{{file.$id}}/preview?width=65&height=65&project={{router.params.project}}&mode=admin" class="pull-start avatar" width="30" height="30" loading="lazy" />
+                                <img src="" data-ls-attrs="src={{env.ENDPOINT}}/v1/storage/files/{{file.$id}}/preview?width=65&height=65&project={{router.params.project}}&mode=admin" class="pull-start avatar" width="30" height="30" loading="lazy" />
                             </td>
                             <td data-title="Name: " class="text-one-liner">
                                 <span data-ls-bind="{{file.name}}" data-ls-attrs="title={{file.name}}" class="text-fade text-size-small"></span>
diff --git a/app/views/console/settings/index.phtml b/app/views/console/settings/index.phtml
index 5eedb6388a..45f039d383 100644
--- a/app/views/console/settings/index.phtml
+++ b/app/views/console/settings/index.phtml
@@ -135,7 +135,7 @@ $customDomainsTarget = $this->getParam('customDomainsTarget', false);
 
                         <label for="name">API Endpoint</label>
                         <div class="input-copy">
-                            <input data-forms-copy type="text" disabled data-ls-bind="{{env.PROTOCOL}}://{{env.DOMAIN}}/v1" />
+                            <input data-forms-copy type="text" disabled data-ls-bind="{{env.ENDPOINT}}/v1" />
                         </div>
 
                         <ul class="margin-bottom-large text-fade text-size-small">
@@ -453,7 +453,7 @@ $customDomainsTarget = $this->getParam('customDomainsTarget', false);
                                         data-failure-param-alert-classname="error">
 
                                         <input name="teamId" type="hidden" data-ls-bind="{{member.teamId}}">
-                                        <input name="url" type="hidden" data-ls-bind="{{env.PROTOCOL}}://{{env.DOMAIN}}/auth/join?project={{router.params.project}}" />
+                                        <input name="url" type="hidden" data-ls-bind="{{env.ENDPOINT}}/auth/join?project={{router.params.project}}" />
                                         <input name="email" type="hidden" data-ls-bind="{{member.email}}">
                                         <input name="name" type="hidden" data-ls-bind="{{member.name}}">
                                         <input name="roles" type="hidden" data-ls-bind="{{member.roles}}" data-cast-to="json">
@@ -493,7 +493,7 @@ $customDomainsTarget = $this->getParam('customDomainsTarget', false);
                             data-failure-param-alert-classname="error">
 
                             <input name="teamId" id="team-teamId" type="hidden" data-ls-bind="{{console-project.teamId}}">
-                            <input name="url" type="hidden" data-ls-bind="{{env.PROTOCOL}}://{{env.DOMAIN}}/auth/join?project={{router.params.project}}" />
+                            <input name="url" type="hidden" data-ls-bind="{{env.ENDPOINT}}/auth/join?project={{router.params.project}}" />
                             
                             <label for="email">Email</label>
                             <input name="email" id="email" type="email" autocomplete="email" required>
diff --git a/app/views/console/storage/index.phtml b/app/views/console/storage/index.phtml
index 934189f93c..bd39699592 100644
--- a/app/views/console/storage/index.phtml
+++ b/app/views/console/storage/index.phtml
@@ -113,7 +113,7 @@ $fileLimitHuman = $this->getParam('fileLimitHuman', 0);
                             <tbody data-ls-loop="project-files.files" data-ls-as="file">
                                 <tr>
                                     <td class="hide">
-                                        <img src="" data-ls-attrs="src=//{{env.DOMAIN}}/v1/storage/files/{{file.$id}}/preview?width=65&height=65&project={{router.params.project}}&mode=admin" class="pull-start avatar" width="30" height="30" loading="lazy" />
+                                        <img src="" data-ls-attrs="src={{env.ENDPOINT}}/v1/storage/files/{{file.$id}}/preview?width=65&height=65&project={{router.params.project}}&mode=admin" class="pull-start avatar" width="30" height="30" loading="lazy" />
                                     </td>
                                     <td data-title="Name: " class="text-one-liner" data-ls-attrs="title={{file.name}}" >
                                         <div data-ui-modal class="box modal sticky-footer width-large close" data-button-text="{{file.name}}" data-button-class="link" data-button-element="span">
@@ -180,15 +180,15 @@ $fileLimitHuman = $this->getParam('fileLimitHuman', 0);
                                                     <div class="margin-bottom-small">File Preview</div>
                                                     
                                                     <div class="margin-bottom-small">
-                                                        <img src="" class="file-preview" data-ls-attrs="src=//{{env.DOMAIN}}/v1/storage/files/{{file.$id}}/preview?width=350&height=250&project={{router.params.project}}&mode=admin" loading="lazy" width="225" height="160" />
+                                                        <img src="" class="file-preview" data-ls-attrs="src={{env.ENDPOINT}}/v1/storage/files/{{file.$id}}/preview?width=350&height=250&project={{router.params.project}}&mode=admin" loading="lazy" width="225" height="160" />
                                                     </div>
 
                                                     <div class="margin-bottom-tiny">
-                                                        <a href="" data-ls-attrs="href=//{{env.DOMAIN}}/v1/storage/files/{{file.$id}}/view?project={{router.params.project}}&mode=admin" target="_blank" rel="noopener"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> New Window <i class="icon-link-ext"></i></a>
+                                                        <a href="" data-ls-attrs="href={{env.ENDPOINT}}/v1/storage/files/{{file.$id}}/view?project={{router.params.project}}&mode=admin" target="_blank" rel="noopener"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> New Window <i class="icon-link-ext"></i></a>
                                                     </div>
 
                                                     <div class="margin-bottom">
-                                                        <a href="" data-ls-attrs="href=//{{env.DOMAIN}}/v1/storage/files/{{file.$id}}/download?project={{router.params.project}}&mode=admin" target="_blank" rel="noopener"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Download <i class="icon-link-ext"></i></a>
+                                                        <a href="" data-ls-attrs="href={{env.ENDPOINT}}/v1/storage/files/{{file.$id}}/download?project={{router.params.project}}&mode=admin" target="_blank" rel="noopener"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Download <i class="icon-link-ext"></i></a>
                                                     </div>
                                                 </div>
                                             </div>
diff --git a/app/views/console/users/index.phtml b/app/views/console/users/index.phtml
index 8debcd9b4c..b41730baf9 100644
--- a/app/views/console/users/index.phtml
+++ b/app/views/console/users/index.phtml
@@ -361,7 +361,7 @@ $providers = $this->getParam('providers', []);
                                             <p>To complete set up, add this OAuth2 redirect URI to your <?php echo $this->escape(ucfirst($provider)); ?> app configuration.</p>
 
                                             <div class="input-copy">
-                                                <input data-forms-copy type="text" disabled data-ls-bind="{{env.PROTOCOL}}://{{env.DOMAIN}}/v1/account/sessions/oauth2/callback/<?php echo $this->escape($provider); ?>/{{router.params.project}}" class="margin-bottom-no" />
+                                                <input data-forms-copy type="text" disabled data-ls-bind="{{env.ENDPOINT}}/v1/account/sessions/oauth2/callback/<?php echo $this->escape($provider); ?>/{{router.params.project}}" class="margin-bottom-no" />
                                             </div>
                                         </div>
                                     </div>
diff --git a/app/views/console/users/team.phtml b/app/views/console/users/team.phtml
index 659fe3bd5a..ad6d263fac 100644
--- a/app/views/console/users/team.phtml
+++ b/app/views/console/users/team.phtml
@@ -145,7 +145,7 @@
                                     data-failure-param-alert-classname="error">
 
                                     <input name="teamId" id="team-teamId" type="hidden" data-ls-bind="{{team.$id}}">
-                                    <input name="url" type="hidden" data-ls-bind="{{env.PROTOCOL}}://{{env.DOMAIN}}" />
+                                    <input name="url" type="hidden" data-ls-bind="{{env.ENDPOINT}}" />
                                     
                                     <label for="email">Email</label>
                                     <input name="email" id="email" type="email" autocomplete="email" required>
diff --git a/app/views/home/auth/recovery.phtml b/app/views/home/auth/recovery.phtml
index 575227a158..6f633b9a0c 100644
--- a/app/views/home/auth/recovery.phtml
+++ b/app/views/home/auth/recovery.phtml
@@ -23,7 +23,7 @@
         <label>Email</label>
         <input name="email" type="email" class="full-width" autocomplete="email" placeholder="me@example.com" required>
 
-        <input name="url" type="hidden" data-ls-bind="{{env.PROTOCOL}}://{{env.DOMAIN}}/auth/recovery/reset" />
+        <input name="url" type="hidden" data-ls-bind="{{env.ENDPOINT}}/auth/recovery/reset" />
 
         <button type="submit" class="btn btn-primary"><i class="fa fa-sign-in"></i> Recover</button>
     </form>
diff --git a/app/views/layouts/default.phtml b/app/views/layouts/default.phtml
index 1f0c686494..b019baa0df 100644
--- a/app/views/layouts/default.phtml
+++ b/app/views/layouts/default.phtml
@@ -2,6 +2,7 @@
 
 $protocol       = $this->getParam('protocol', '');
 $domain         = $this->getParam('domain', '');
+$endpoint       = $this->getParam('endpoint', '');
 $platforms      = $this->getParam('platforms', []);
 $version        = $this->getParam('version', '0.0.0');
 $isDev          = $this->getParam('isDev', false);
@@ -56,7 +57,7 @@ if(!empty($platforms)) {
     <?php if (!empty($canonical)): ?>
         <meta property="og:url" content="<?php echo $canonical; ?>" />
     <?php endif; ?>
-    <meta property="og:image"  content="<?php echo $protocol; ?>://<?php echo $domain; ?>/images/logo.png?v=<?php echo APP_CACHE_BUSTER; ?>" />
+    <meta property="og:image"  content="<?php echo $endpoint; ?>/images/logo.png?v=<?php echo APP_CACHE_BUSTER; ?>" />
     <script>
 
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -71,6 +72,7 @@ if(!empty($platforms)) {
             VERSION: '<?php echo $version; ?>',
             CACHEBUSTER: '<?php echo $version; ?>/<?php echo APP_CACHE_BUSTER; ?>',
             PROTOCOL: '<?php echo $protocol; ?>',
+            ENDPOINT: '<?php echo $endpoint; ?>',
             DOMAIN: '<?php echo $domain; ?>',
             HOME: '<?php echo $this->escape($this->getParam('home')); ?>',
             SETUP: '<?php echo $this->escape($this->getParam('setup')); ?>',
@@ -142,4 +144,4 @@ if(!empty($platforms)) {
 
     <!-- Version <?php echo $version; ?> -->
 </body>
-</html>
\ No newline at end of file
+</html>