diff --git a/docker/traefik-config/services.yml b/docker/traefik-config/services.yml
index b202b7ee..50370057 100644
--- a/docker/traefik-config/services.yml
+++ b/docker/traefik-config/services.yml
@@ -15,6 +15,15 @@ http:
       tls: {}
       service: backend
       priority: 20
+
+    subdomain:
+      rule: 'HostRegexp(`{subdomain:.+}.codefox.net`)'
+      entrypoints:
+        - websecure
+      tls: {}
+      service: frontend
+      priority: 30
+
     redirect-all:
       rule: 'hostregexp(`{host:.+}`)'
       entrypoints:
diff --git a/frontend/src/app/api/runProject/route.ts b/frontend/src/app/api/runProject/route.ts
index c8b4faf2..73b44b67 100644
--- a/frontend/src/app/api/runProject/route.ts
+++ b/frontend/src/app/api/runProject/route.ts
@@ -155,7 +155,7 @@ async function buildAndRunDocker(
         -l "traefik.http.routers.${subdomain}.entrypoints=websecure" \
         -l "traefik.http.routers.${subdomain}.tls=true" \
         -l "traefik.http.services.${subdomain}.loadbalancer.server.port=5173" \
-        --network=codefox_traefik_network -p ${exposedPort}:5173 \
+        --network=docker_traefik_network  -p ${exposedPort}:5173 \
         -v "${directory}:/app" \
         ${imageName}`;
         } else {
@@ -163,7 +163,7 @@ async function buildAndRunDocker(
         -l "traefik.http.routers.${subdomain}.rule=Host(\\"${domain}\\")" \
         -l "traefik.http.routers.${subdomain}.entrypoints=web" \
         -l "traefik.http.services.${subdomain}.loadbalancer.server.port=5173" \
-        --network=codefox_traefik_network -p ${exposedPort}:5173 \
+        --network=docker_traefik_network  -p ${exposedPort}:5173 \
         -v "${directory}:/app" \
         ${imageName}`;
         }
diff --git a/frontend/src/components/chat/code-engine/project-context.tsx b/frontend/src/components/chat/code-engine/project-context.tsx
index 79e4c4c0..dcef750d 100644
--- a/frontend/src/components/chat/code-engine/project-context.tsx
+++ b/frontend/src/components/chat/code-engine/project-context.tsx
@@ -20,6 +20,7 @@ import { Project } from '../project-modal';
 import { useRouter } from 'next/navigation';
 import { toast } from 'sonner'; // Assuming you use Sonner for toasts
 import { useAuthContext } from '@/providers/AuthProvider';
+import { URL_PROTOCOL_PREFIX } from '@/utils/const';
 
 export interface ProjectContextType {
   projects: Project[];
@@ -277,7 +278,7 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
         }
 
         const data = await response.json();
-        const baseUrl = `http://${data.domain}`;
+        const baseUrl = `${URL_PROTOCOL_PREFIX}://${data.domain}`;
         const project = projects.find((p) => p.projectPath === projectPath);
         if (project) {
           await takeProjectScreenshot(project.id, baseUrl);
@@ -439,7 +440,7 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
 
               if (response.ok) {
                 const data = await response.json();
-                const baseUrl = `http://${data.domain}`;
+                const baseUrl = `${URL_PROTOCOL_PREFIX}://${data.domain}`;
                 await takeProjectScreenshot(project.id, baseUrl);
               }
             } catch (error) {
diff --git a/frontend/src/components/chat/code-engine/web-view.tsx b/frontend/src/components/chat/code-engine/web-view.tsx
index 6f355520..a0d97122 100644
--- a/frontend/src/components/chat/code-engine/web-view.tsx
+++ b/frontend/src/components/chat/code-engine/web-view.tsx
@@ -14,11 +14,13 @@ import {
 import puppeteer from 'puppeteer';
 import { URL_PROTOCOL_PREFIX } from '@/utils/const';
 
-export default function WebPreview() {
-  const { curProject, getWebUrl } = useContext(ProjectContext);
-  if (!curProject || !getWebUrl) {
-    throw new Error('ProjectContext not properly initialized');
-  }
+function PreviewContent({
+  curProject,
+  getWebUrl,
+}: {
+  curProject: any;
+  getWebUrl: any;
+}) {
   const [baseUrl, setBaseUrl] = useState('');
   const [displayPath, setDisplayPath] = useState('/');
   const [history, setHistory] = useState<string[]>(['/']);
@@ -109,6 +111,7 @@ export default function WebPreview() {
       setDisplayPath(history[currentIndex + 1]);
     }
   };
+
   const reloadIframe = () => {
     const iframe = document.getElementById('myIframe') as HTMLIFrameElement;
     if (iframe) {
@@ -241,3 +244,22 @@ export default function WebPreview() {
     </div>
   );
 }
+
+export default function WebPreview() {
+  const context = useContext(ProjectContext);
+
+  if (!context) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <p className="text-sm text-muted-foreground">Loading project...</p>
+      </div>
+    );
+  }
+
+  return (
+    <PreviewContent
+      curProject={context.curProject}
+      getWebUrl={context.getWebUrl}
+    />
+  );
+}
diff --git a/frontend/src/utils/const.ts b/frontend/src/utils/const.ts
index 326f9fb4..00daabb2 100644
--- a/frontend/src/utils/const.ts
+++ b/frontend/src/utils/const.ts
@@ -3,10 +3,20 @@
  * @type {string}
  * @example 'https://api.example.com'
  */
+/**
+ * Always use HTTPS when the page is loaded over HTTPS
+ */
 export const URL_PROTOCOL_PREFIX =
-  process.env.TLS == 'false' ? 'http' : 'https';
+  typeof window !== 'undefined' && window.location.protocol === 'https:'
+    ? 'https'
+    : process.env.TLS == 'false'
+      ? 'http'
+      : 'https';
 
 /**
  * Validate if the current environment is using TLS
  */
-export const TLS = process.env.TLS == 'true';
+export const TLS =
+  typeof window !== 'undefined' && window.location.protocol === 'https:'
+    ? true
+    : process.env.TLS == 'true';