From 1b9c8e00d6fbc42c9fcfaa4bd34f3a66a1e3c9a4 Mon Sep 17 00:00:00 2001
From: jigar-bhalodia <bhalodia.jigar@gmail.com>
Date: Sun, 31 Aug 2025 09:50:15 -0400
Subject: [PATCH 01/14] layout

---
 config/gateway-config-dev.yaml                |  2 +-
 go.mod                                        |  2 +
 go.sum                                        | 12 ++-
 internal/gateway/server/server.go             |  5 ++
 internal/gateway/web/app/layout.templ         | 71 +++++++++++++++
 internal/gateway/web/app/layout_templ.go      | 75 ++++++++++++++++
 internal/gateway/web/app/main.templ           | 63 ++++++++++++++
 internal/gateway/web/app/main_templ.go        | 87 +++++++++++++++++++
 internal/gateway/web/components/header.templ  | 24 +++++
 .../gateway/web/components/header_templ.go    | 40 +++++++++
 internal/gateway/web/components/sidebar.templ | 80 +++++++++++++++++
 .../gateway/web/components/sidebar_templ.go   | 40 +++++++++
 internal/gateway/web/handler.go               | 41 +++++++++
 package-lock.json                             |  3 +
 14 files changed, 540 insertions(+), 5 deletions(-)
 create mode 100644 internal/gateway/web/app/layout.templ
 create mode 100644 internal/gateway/web/app/layout_templ.go
 create mode 100644 internal/gateway/web/app/main.templ
 create mode 100644 internal/gateway/web/app/main_templ.go
 create mode 100644 internal/gateway/web/components/header.templ
 create mode 100644 internal/gateway/web/components/header_templ.go
 create mode 100644 internal/gateway/web/components/sidebar.templ
 create mode 100644 internal/gateway/web/components/sidebar_templ.go
 create mode 100644 internal/gateway/web/handler.go
 create mode 100644 package-lock.json

diff --git a/config/gateway-config-dev.yaml b/config/gateway-config-dev.yaml
index 1c3ee23..598943b 100644
--- a/config/gateway-config-dev.yaml
+++ b/config/gateway-config-dev.yaml
@@ -32,7 +32,7 @@ sparkManagerPort: "8081"
 
 gateway:
   gatewayApiVersion: v1
-  gatewayPort: "8080"
+  gatewayPort: "8082"
 
   middleware:
     - type: RegexBasicAuthAllowMiddleware
diff --git a/go.mod b/go.mod
index adc0a05..02e64c7 100644
--- a/go.mod
+++ b/go.mod
@@ -17,6 +17,8 @@ require (
 )
 
 require (
+	github.com/a-h/templ v0.3.943
+	github.com/a-h/templ/examples/integration-gin v0.0.0-20250818063052-abb427c0fb8d
 	github.com/jackc/pgx/v5 v5.7.4
 	github.com/knadh/koanf/providers/confmap v1.0.0
 	github.com/prometheus/client_golang v1.22.0
diff --git a/go.sum b/go.sum
index 5235bcd..591ec9f 100644
--- a/go.sum
+++ b/go.sum
@@ -1,5 +1,9 @@
 github.com/KyleBanks/depth v1.2.1 h1:5h8fQADFrWtarTdtDudMmGsC7GPbOAu6RVB3ffsVFHc=
 github.com/KyleBanks/depth v1.2.1/go.mod h1:jzSb9d0L43HxTQfT+oSA1EEp2q+ne2uh6XgeJcm8brE=
+github.com/a-h/templ v0.3.943 h1:o+mT/4yqhZ33F3ootBiHwaY4HM5EVaOJfIshvd5UNTY=
+github.com/a-h/templ v0.3.943/go.mod h1:oCZcnKRf5jjsGpf2yELzQfodLphd2mwecwG4Crk5HBo=
+github.com/a-h/templ/examples/integration-gin v0.0.0-20250818063052-abb427c0fb8d h1:L8EvgXLCOLvgMjyWloBGrxWJGjsAAHyR5df79sC6IOc=
+github.com/a-h/templ/examples/integration-gin v0.0.0-20250818063052-abb427c0fb8d/go.mod h1:1t59aGzdEXDnMYwmfWTKqDSASvUPtBe4iH00XPvh54U=
 github.com/aws/aws-sdk-go v1.55.6 h1:cSg4pvZ3m8dgYcgqB97MrcdjUmZ1BeMYKUxMMB89IPk=
 github.com/aws/aws-sdk-go v1.55.6/go.mod h1:eRwEWoyTWFMVYVQzKMNHWP5/RV4xIUGMQfXQHfHkpNU=
 github.com/aws/aws-sdk-go-v2 v1.36.3 h1:mJoei2CxPutQVxaATCzDUjcZEjVRdpsiiXi2o38yqWM=
@@ -70,8 +74,8 @@ github.com/google/go-cmp v0.5.9/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeN
 github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
 github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
 github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
-github.com/google/pprof v0.0.0-20241029153458-d1b30febd7db h1:097atOisP2aRj7vFgYQBbFN4U4JNXUNYpxael3UzMyo=
-github.com/google/pprof v0.0.0-20241029153458-d1b30febd7db/go.mod h1:vavhavw2zAxS5dIdcRluK6cSGGPlZynqzFM8NdvU144=
+github.com/google/pprof v0.0.0-20241210010833-40e02aabc2ad h1:a6HEuzUHeKH6hwfN/ZoQgRgVIWFJljSWa/zetS2WTvg=
+github.com/google/pprof v0.0.0-20241210010833-40e02aabc2ad/go.mod h1:vavhavw2zAxS5dIdcRluK6cSGGPlZynqzFM8NdvU144=
 github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
 github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/jackc/pgpassfile v1.0.0 h1:/6Hmqy13Ss2zCq62VdNG8tM1wchn8zjSGOBJ6icpsIM=
@@ -133,8 +137,8 @@ github.com/modern-go/reflect2 v1.0.2 h1:xBagoLtFs94CBntxluKeaWgTMpvLxC4ur3nMaC9G
 github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
 github.com/munnerz/goautoneg v0.0.0-20191010083416-a7dc8b61c822 h1:C3w9PqII01/Oq1c1nUAm88MOHcQC9l5mIlSMApZMrHA=
 github.com/munnerz/goautoneg v0.0.0-20191010083416-a7dc8b61c822/go.mod h1:+n7T8mK8HuQTcFwEeznm/DIxMOiR9yIdICNftLE1DvQ=
-github.com/onsi/ginkgo/v2 v2.22.0 h1:Yed107/8DjTr0lKCNt7Dn8yQ6ybuDRQoMGrNFKzMfHg=
-github.com/onsi/ginkgo/v2 v2.22.0/go.mod h1:7Du3c42kxCUegi0IImZ1wUQzMBVecgIHjR1C+NkhLQo=
+github.com/onsi/ginkgo/v2 v2.22.2 h1:/3X8Panh8/WwhU/3Ssa6rCKqPLuAkVY2I0RoyDLySlU=
+github.com/onsi/ginkgo/v2 v2.22.2/go.mod h1:oeMosUL+8LtarXBHu/c0bx2D/K9zyQ6uX3cTyztHwsk=
 github.com/onsi/gomega v1.36.1 h1:bJDPBO7ibjxcbHMgSCoo4Yj18UWbKDlLwX1x9sybDcw=
 github.com/onsi/gomega v1.36.1/go.mod h1:PvZbdDc8J6XJEpDK4HCuRBm8a6Fzp9/DmhC9C7yFlog=
 github.com/pelletier/go-toml/v2 v2.2.4 h1:mye9XuhQ6gvn5h28+VilKrrPoQVanw5PMw/TB0t5Ec4=
diff --git a/internal/gateway/server/server.go b/internal/gateway/server/server.go
index eb3ccd1..3390993 100644
--- a/internal/gateway/server/server.go
+++ b/internal/gateway/server/server.go
@@ -28,6 +28,7 @@ import (
 	"github.com/slackhq/spark-gateway/internal/gateway/application/repository"
 	"github.com/slackhq/spark-gateway/internal/gateway/application/service"
 	"github.com/slackhq/spark-gateway/internal/gateway/cluster"
+	"github.com/slackhq/spark-gateway/internal/gateway/web"
 
 	"time"
 
@@ -128,6 +129,10 @@ func NewGateway(ctx context.Context, sgConfig *cfg.SparkGatewayConfig, sparkMana
 		handler.RegisterSwaggerDocs(rootGroup, sgConfig.GatewayConfig.GatewayApiVersion)
 	}
 
+	// Register UI
+	webHandler := web.NewWebHandler(sgConfig, ginRouter, rootGroup)
+	webHandler.RegisterRoutes()
+
 	/// Register versioned handlers
 	versionGroup := ginRouter.Group(fmt.Sprintf("/%s", sgConfig.GatewayConfig.GatewayApiVersion), mwHandlerChain...)
 	appHandler.RegisterRoutes(versionGroup)
diff --git a/internal/gateway/web/app/layout.templ b/internal/gateway/web/app/layout.templ
new file mode 100644
index 0000000..5487744
--- /dev/null
+++ b/internal/gateway/web/app/layout.templ
@@ -0,0 +1,71 @@
+package app
+
+import "github.com/slackhq/spark-gateway/internal/gateway/web/components"
+
+templ Layout(title string) {
+	<!DOCTYPE html>
+	<html lang="en">
+		<head>
+			<meta charset="UTF-8"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+			<title>{ title }</title>
+			<script src="https://unpkg.com/htmx.org@1.9.10"></script>
+			<style>
+				* {
+					margin: 0;
+					padding: 0;
+					box-sizing: border-box;
+				}
+				
+				body {
+					font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+					background-color: #f5f5f5;
+				}
+				
+				.container {
+					display: flex;
+					min-height: 100vh;
+				}
+				
+				.header {
+					position: fixed;
+					top: 0;
+					left: 0;
+					right: 0;
+					height: 60px;
+					background: #fff;
+					border-bottom: 1px solid #e1e5e9;
+					z-index: 1000;
+					display: flex;
+					align-items: center;
+					padding: 0 20px;
+				}
+				
+				.sidebar {
+					width: 250px;
+					background: #fff;
+					border-right: 1px solid #e1e5e9;
+					padding-top: 60px;
+					position: fixed;
+					height: 100vh;
+					overflow-y: auto;
+				}
+				
+				.main-content {
+					flex: 1;
+					margin-left: 250px;
+					padding: 80px 20px 20px;
+				}
+			</style>
+		</head>
+		<body>
+			<div class="container">
+				@components.Header()
+				@components.Sidebar()
+				<main class="main-content">
+					{ children... }
+				</main>
+			</div>
+		</body>
+	</html>
+}
\ No newline at end of file
diff --git a/internal/gateway/web/app/layout_templ.go b/internal/gateway/web/app/layout_templ.go
new file mode 100644
index 0000000..648d15e
--- /dev/null
+++ b/internal/gateway/web/app/layout_templ.go
@@ -0,0 +1,75 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.3.943
+package app
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import templruntime "github.com/a-h/templ/runtime"
+
+import "github.com/slackhq/spark-gateway/internal/gateway/web/components"
+
+func Layout(title string) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/layout.templ`, Line: 11, Col: 17}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</title><script src=\"https://unpkg.com/htmx.org@1.9.10\"></script><style>\n\t\t\t\t* {\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\tbody {\n\t\t\t\t\tfont-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n\t\t\t\t\tbackground-color: #f5f5f5;\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t.container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tmin-height: 100vh;\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t.header {\n\t\t\t\t\tposition: fixed;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\tright: 0;\n\t\t\t\t\theight: 60px;\n\t\t\t\t\tbackground: #fff;\n\t\t\t\t\tborder-bottom: 1px solid #e1e5e9;\n\t\t\t\t\tz-index: 1000;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tpadding: 0 20px;\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t.sidebar {\n\t\t\t\t\twidth: 250px;\n\t\t\t\t\tbackground: #fff;\n\t\t\t\t\tborder-right: 1px solid #e1e5e9;\n\t\t\t\t\tpadding-top: 60px;\n\t\t\t\t\tposition: fixed;\n\t\t\t\t\theight: 100vh;\n\t\t\t\t\toverflow-y: auto;\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t.main-content {\n\t\t\t\t\tflex: 1;\n\t\t\t\t\tmargin-left: 250px;\n\t\t\t\t\tpadding: 80px 20px 20px;\n\t\t\t\t}\n\t\t\t</style></head><body><div class=\"container\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = components.Header().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = components.Sidebar().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<main class=\"main-content\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</main></div></body></html>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+var _ = templruntime.GeneratedTemplate
diff --git a/internal/gateway/web/app/main.templ b/internal/gateway/web/app/main.templ
new file mode 100644
index 0000000..f25810e
--- /dev/null
+++ b/internal/gateway/web/app/main.templ
@@ -0,0 +1,63 @@
+package app
+
+templ Main() {
+	@Layout("Spark Gateway") {
+		@MainContent()
+	}
+}
+
+templ MainContent() {
+	<div id="main-content">
+		<div style="margin-bottom: 30px;">
+			<h1 style="font-size: 28px; font-weight: 600; color: #333; margin-bottom: 10px;">Welcome to Spark Gateway</h1>
+			<p style="color: #666; font-size: 16px;">Monitor and manage your Spark applications and clusters</p>
+		</div>
+		
+		<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px;">
+			<div style="background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9;">
+				<h3 style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 10px;">Active Clusters</h3>
+				<p style="font-size: 24px; font-weight: 700; color: #007bff;">3</p>
+				<p style="color: #666; font-size: 14px;">Currently running</p>
+			</div>
+			
+			<div style="background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9;">
+				<h3 style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 10px;">Running Jobs</h3>
+				<p style="font-size: 24px; font-weight: 700; color: #28a745;">12</p>
+				<p style="color: #666; font-size: 14px;">Currently processing</p>
+			</div>
+			
+			<div style="background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9;">
+				<h3 style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 10px;">Applications</h3>
+				<p style="font-size: 24px; font-weight: 700; color: #6f42c1;">8</p>
+				<p style="color: #666; font-size: 14px;">Deployed applications</p>
+			</div>
+		</div>
+		
+		<div style="background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9;">
+			<h3 style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px;">Quick Actions</h3>
+			<div style="display: flex; gap: 10px; flex-wrap: wrap;">
+				<button 
+					style="padding: 10px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;"
+					hx-get="/ui/clusters/new"
+					hx-target="#main-content"
+				>
+					New Cluster
+				</button>
+				<button 
+					style="padding: 10px 16px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;"
+					hx-get="/ui/jobs/submit"
+					hx-target="#main-content"
+				>
+					Submit Job
+				</button>
+				<button 
+					style="padding: 10px 16px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;"
+					hx-get="/ui/monitoring"
+					hx-target="#main-content"
+				>
+					View Monitoring
+				</button>
+			</div>
+		</div>
+	</div>
+}
diff --git a/internal/gateway/web/app/main_templ.go b/internal/gateway/web/app/main_templ.go
new file mode 100644
index 0000000..f058132
--- /dev/null
+++ b/internal/gateway/web/app/main_templ.go
@@ -0,0 +1,87 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.3.943
+package app
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import templruntime "github.com/a-h/templ/runtime"
+
+func Main() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var2 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+			if !templ_7745c5c3_IsBuffer {
+				defer func() {
+					templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+					if templ_7745c5c3_Err == nil {
+						templ_7745c5c3_Err = templ_7745c5c3_BufErr
+					}
+				}()
+			}
+			ctx = templ.InitializeContext(ctx)
+			templ_7745c5c3_Err = MainContent().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			return nil
+		})
+		templ_7745c5c3_Err = Layout("Spark Gateway").Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func MainContent() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"main-content\"><div style=\"margin-bottom: 30px;\"><h1 style=\"font-size: 28px; font-weight: 600; color: #333; margin-bottom: 10px;\">Welcome to Spark Gateway</h1><p style=\"color: #666; font-size: 16px;\">Monitor and manage your Spark applications and clusters</p></div><div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px;\"><div style=\"background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9;\"><h3 style=\"font-size: 18px; font-weight: 600; color: #333; margin-bottom: 10px;\">Active Clusters</h3><p style=\"font-size: 24px; font-weight: 700; color: #007bff;\">3</p><p style=\"color: #666; font-size: 14px;\">Currently running</p></div><div style=\"background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9;\"><h3 style=\"font-size: 18px; font-weight: 600; color: #333; margin-bottom: 10px;\">Running Jobs</h3><p style=\"font-size: 24px; font-weight: 700; color: #28a745;\">12</p><p style=\"color: #666; font-size: 14px;\">Currently processing</p></div><div style=\"background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9;\"><h3 style=\"font-size: 18px; font-weight: 600; color: #333; margin-bottom: 10px;\">Applications</h3><p style=\"font-size: 24px; font-weight: 700; color: #6f42c1;\">8</p><p style=\"color: #666; font-size: 14px;\">Deployed applications</p></div></div><div style=\"background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9;\"><h3 style=\"font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px;\">Quick Actions</h3><div style=\"display: flex; gap: 10px; flex-wrap: wrap;\"><button style=\"padding: 10px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;\" hx-get=\"/ui/clusters/new\" hx-target=\"#main-content\">New Cluster</button> <button style=\"padding: 10px 16px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;\" hx-get=\"/ui/jobs/submit\" hx-target=\"#main-content\">Submit Job</button> <button style=\"padding: 10px 16px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;\" hx-get=\"/ui/monitoring\" hx-target=\"#main-content\">View Monitoring</button></div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+var _ = templruntime.GeneratedTemplate
diff --git a/internal/gateway/web/components/header.templ b/internal/gateway/web/components/header.templ
new file mode 100644
index 0000000..07a35d3
--- /dev/null
+++ b/internal/gateway/web/components/header.templ
@@ -0,0 +1,24 @@
+package components
+
+templ Header() {
+	<header class="header">
+		<div style="display: flex; align-items: center; width: 100%; justify-content: space-between;">
+			<div style="display: flex; align-items: center;">
+				<h1 style="font-size: 20px; font-weight: 600; color: #333;">Spark Gateway</h1>
+			</div>
+			<div style="display: flex; align-items: center; gap: 15px;">
+				<button 
+					style="padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;"
+					hx-get="/ui/refresh"
+					hx-trigger="click"
+					hx-target="#main-content"
+				>
+					Refresh
+				</button>
+				<div style="width: 32px; height: 32px; background: #6c757d; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600;">
+					U
+				</div>
+			</div>
+		</div>
+	</header>
+}
\ No newline at end of file
diff --git a/internal/gateway/web/components/header_templ.go b/internal/gateway/web/components/header_templ.go
new file mode 100644
index 0000000..4ed6bd0
--- /dev/null
+++ b/internal/gateway/web/components/header_templ.go
@@ -0,0 +1,40 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.3.943
+package components
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import templruntime "github.com/a-h/templ/runtime"
+
+func Header() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<header class=\"header\"><div style=\"display: flex; align-items: center; width: 100%; justify-content: space-between;\"><div style=\"display: flex; align-items: center;\"><h1 style=\"font-size: 20px; font-weight: 600; color: #333;\">Spark Gateway</h1></div><div style=\"display: flex; align-items: center; gap: 15px;\"><button style=\"padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;\" hx-get=\"/ui/refresh\" hx-trigger=\"click\" hx-target=\"#main-content\">Refresh</button><div style=\"width: 32px; height: 32px; background: #6c757d; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600;\">U</div></div></div></header>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+var _ = templruntime.GeneratedTemplate
diff --git a/internal/gateway/web/components/sidebar.templ b/internal/gateway/web/components/sidebar.templ
new file mode 100644
index 0000000..9f71b0d
--- /dev/null
+++ b/internal/gateway/web/components/sidebar.templ
@@ -0,0 +1,80 @@
+package components
+
+templ Sidebar() {
+	<aside class="sidebar">
+		<nav style="padding: 20px 0;">
+			<ul style="list-style: none;">
+				<li style="margin-bottom: 8px;">
+					<a 
+						href="#"
+						style="display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;"
+						hx-get="/ui/dashboard"
+						hx-target="#main-content"
+						hx-push-url="true"
+						onmouseover="this.style.backgroundColor='#f8f9fa'"
+						onmouseout="this.style.backgroundColor='transparent'"
+					>
+						<span style="margin-right: 10px;">📊</span>
+						Dashboard
+					</a>
+				</li>
+				<li style="margin-bottom: 8px;">
+					<a 
+						href="#"
+						style="display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;"
+						hx-get="/ui/clusters"
+						hx-target="#main-content"
+						hx-push-url="true"
+						onmouseover="this.style.backgroundColor='#f8f9fa'"
+						onmouseout="this.style.backgroundColor='transparent'"
+					>
+						<span style="margin-right: 10px;">🏢</span>
+						Clusters
+					</a>
+				</li>
+				<li style="margin-bottom: 8px;">
+					<a 
+						href="#"
+						style="display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;"
+						hx-get="/ui/applications"
+						hx-target="#main-content"
+						hx-push-url="true"
+						onmouseover="this.style.backgroundColor='#f8f9fa'"
+						onmouseout="this.style.backgroundColor='transparent'"
+					>
+						<span style="margin-right: 10px;">📦</span>
+						Applications
+					</a>
+				</li>
+				<li style="margin-bottom: 8px;">
+					<a 
+						href="#"
+						style="display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;"
+						hx-get="/ui/jobs"
+						hx-target="#main-content"
+						hx-push-url="true"
+						onmouseover="this.style.backgroundColor='#f8f9fa'"
+						onmouseout="this.style.backgroundColor='transparent'"
+					>
+						<span style="margin-right: 10px;">⚡</span>
+						Jobs
+					</a>
+				</li>
+				<li style="margin-bottom: 8px;">
+					<a 
+						href="#"
+						style="display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;"
+						hx-get="/ui/settings"
+						hx-target="#main-content"
+						hx-push-url="true"
+						onmouseover="this.style.backgroundColor='#f8f9fa'"
+						onmouseout="this.style.backgroundColor='transparent'"
+					>
+						<span style="margin-right: 10px;">⚙️</span>
+						Settings
+					</a>
+				</li>
+			</ul>
+		</nav>
+	</aside>
+}
\ No newline at end of file
diff --git a/internal/gateway/web/components/sidebar_templ.go b/internal/gateway/web/components/sidebar_templ.go
new file mode 100644
index 0000000..3b30260
--- /dev/null
+++ b/internal/gateway/web/components/sidebar_templ.go
@@ -0,0 +1,40 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.3.943
+package components
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import templruntime "github.com/a-h/templ/runtime"
+
+func Sidebar() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<aside class=\"sidebar\"><nav style=\"padding: 20px 0;\"><ul style=\"list-style: none;\"><li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;\" hx-get=\"/ui/dashboard\" hx-target=\"#main-content\" hx-push-url=\"true\" onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='transparent'\"><span style=\"margin-right: 10px;\">📊</span> Dashboard</a></li><li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;\" hx-get=\"/ui/clusters\" hx-target=\"#main-content\" hx-push-url=\"true\" onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='transparent'\"><span style=\"margin-right: 10px;\">🏢</span> Clusters</a></li><li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;\" hx-get=\"/ui/applications\" hx-target=\"#main-content\" hx-push-url=\"true\" onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='transparent'\"><span style=\"margin-right: 10px;\">📦</span> Applications</a></li><li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;\" hx-get=\"/ui/jobs\" hx-target=\"#main-content\" hx-push-url=\"true\" onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='transparent'\"><span style=\"margin-right: 10px;\">⚡</span> Jobs</a></li><li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;\" hx-get=\"/ui/settings\" hx-target=\"#main-content\" hx-push-url=\"true\" onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='transparent'\"><span style=\"margin-right: 10px;\">⚙️</span> Settings</a></li></ul></nav></aside>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+var _ = templruntime.GeneratedTemplate
diff --git a/internal/gateway/web/handler.go b/internal/gateway/web/handler.go
new file mode 100644
index 0000000..c1c6850
--- /dev/null
+++ b/internal/gateway/web/handler.go
@@ -0,0 +1,41 @@
+package web
+
+import (
+	"net/http"
+
+	"github.com/a-h/templ/examples/integration-gin/gintemplrenderer"
+	"github.com/gin-gonic/gin"
+
+	"github.com/slackhq/spark-gateway/internal/gateway/cluster"
+	"github.com/slackhq/spark-gateway/internal/gateway/web/app"
+)
+
+type WebHandler struct {
+	localClusterRepo *cluster.LocalClusterRepo
+	engine           *gin.Engine
+	routerGroup      *gin.RouterGroup
+}
+
+func NewWebHandler(localClusterRepo *cluster.LocalClusterRepo, engine *gin.Engine, routerGroup *gin.RouterGroup) *WebHandler {
+	return &WebHandler{
+		localClusterRepo: localClusterRepo,
+		engine:           engine,
+		routerGroup:      routerGroup,
+	}
+}
+
+func (h *WebHandler) RegisterRoutes() {
+	uiGroup := h.routerGroup.Group("/ui")
+
+	ginHtmlRenderer := h.engine.HTMLRender
+	h.engine.HTMLRender = &gintemplrenderer.HTMLTemplRenderer{FallbackHtmlRenderer: ginHtmlRenderer}
+
+	uiGroup.GET("/", h.main)
+	uiGroup.GET("/clusters", h.clusters)
+
+}
+
+func (h *WebHandler) main(c *gin.Context) {
+	r := gintemplrenderer.New(c, http.StatusOK, app.Main())
+	c.Render(http.StatusOK, r)
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..48e341a
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}

From f5c9e6ad01376d992d019f19d363a08fb79d4007 Mon Sep 17 00:00:00 2001
From: jigar-bhalodia <bhalodia.jigar@gmail.com>
Date: Mon, 1 Sep 2025 08:15:14 -0400
Subject: [PATCH 02/14] Add state filter to list endpoint

---
 .../gateway/application/handler/handler.go    |  24 +-
 .../handler/mockgatewayapplicationservice.go  |  14 +-
 .../application/repository/repository.go      |  11 +-
 .../service/mocksparkapplicationrepository.go |  14 +-
 .../gateway/application/service/service.go    |   8 +-
 internal/gateway/cluster/local_repo.go        |   2 +-
 internal/gateway/server/server.go             |   2 +-
 internal/gateway/web/app/applications.templ   | 188 +++++++
 .../gateway/web/app/applications_templ.go     | 476 ++++++++++++++++++
 internal/gateway/web/app/clusters.templ       |  81 +++
 internal/gateway/web/app/clusters_templ.go    | 229 +++++++++
 internal/gateway/web/components/sidebar.templ |  30 +-
 .../gateway/web/components/sidebar_templ.go   |   2 +-
 internal/gateway/web/handler.go               |  91 +++-
 .../application/handler/handler.go            |  18 +-
 .../handler/mocksparkapplicationservice.go    |  14 +-
 .../application/repository/repository.go      |   9 +-
 .../service/mocksparkapplicationrepository.go |  14 +-
 .../application/service/service.go            |   6 +-
 pkg/model/application.go                      |  17 +-
 20 files changed, 1172 insertions(+), 78 deletions(-)
 create mode 100644 internal/gateway/web/app/applications.templ
 create mode 100644 internal/gateway/web/app/applications_templ.go
 create mode 100644 internal/gateway/web/app/clusters.templ
 create mode 100644 internal/gateway/web/app/clusters_templ.go

diff --git a/internal/gateway/application/handler/handler.go b/internal/gateway/application/handler/handler.go
index b74703c..cfba1f2 100644
--- a/internal/gateway/application/handler/handler.go
+++ b/internal/gateway/application/handler/handler.go
@@ -19,14 +19,17 @@ import (
 	"context"
 	"errors"
 	"fmt"
-	swaggerDocs "github.com/slackhq/spark-gateway/docs/swagger"
-	swaggerFiles "github.com/swaggo/files"
-	ginSwagger "github.com/swaggo/gin-swagger"
 	"net/http"
 	"strconv"
 
+	swaggerFiles "github.com/swaggo/files"
+	ginSwagger "github.com/swaggo/gin-swagger"
+
+	swaggerDocs "github.com/slackhq/spark-gateway/docs/swagger"
+
 	"github.com/gin-gonic/gin"
 	"github.com/kubeflow/spark-operator/v2/api/v1beta2"
+
 	"github.com/slackhq/spark-gateway/pkg/gatewayerrors"
 	pkgHttp "github.com/slackhq/spark-gateway/pkg/http"
 	"github.com/slackhq/spark-gateway/pkg/model"
@@ -47,7 +50,7 @@ const sparkApplicationPathName = "applications"
 
 type GatewayApplicationService interface {
 	Get(ctx context.Context, gatewayId string) (*model.GatewayApplication, error)
-	List(ctx context.Context, cluster string, namespace string) ([]*model.GatewayApplicationMeta, error)
+	List(ctx context.Context, cluster string, namespace string, appState *v1beta2.ApplicationStateType) ([]*model.GatewayApplicationMeta, error)
 	Create(ctx context.Context, application *v1beta2.SparkApplication, user string) (*model.GatewayApplication, error)
 	Status(ctx context.Context, gatewayId string) (*v1beta2.SparkApplicationStatus, error)
 	Logs(ctx context.Context, gatewayId string, tailLines int) (*string, error)
@@ -90,6 +93,7 @@ func (h *ApplicationHandler) RegisterRoutes(rg *gin.RouterGroup) {
 // @Security BasicAuth
 // @Param cluster query string true "Cluster name"
 // @Param namespace query string false "Namespace (optional)"
+// @Param appState query v1beta2.ApplicationStateType false "Filter by Spark Application state"
 // @Success 200 {array} model.GatewayApplicationMeta "List of SparkApplication metadata"
 // @Router / [get]
 func (h *ApplicationHandler) List(c *gin.Context) {
@@ -102,7 +106,17 @@ func (h *ApplicationHandler) List(c *gin.Context) {
 
 	namespace := c.Query("namespace")
 
-	appMetaList, err := h.service.List(c, cluster, namespace)
+	_appState := c.Param("appState")
+	var appState *v1beta2.ApplicationStateType = nil
+	if _appState != "" {
+		state := v1beta2.ApplicationStateType(_appState)
+		if !model.ValidSparkApplicationStatesMap[state] {
+			c.Error(fmt.Errorf("invalid application state: %s", appState))
+		}
+		appState = &state
+	}
+
+	appMetaList, err := h.service.List(c, cluster, namespace, appState)
 
 	if err != nil {
 		c.Error(err)
diff --git a/internal/gateway/application/handler/mockgatewayapplicationservice.go b/internal/gateway/application/handler/mockgatewayapplicationservice.go
index 935f991..ba67c32 100644
--- a/internal/gateway/application/handler/mockgatewayapplicationservice.go
+++ b/internal/gateway/application/handler/mockgatewayapplicationservice.go
@@ -29,7 +29,7 @@ var _ GatewayApplicationService = &GatewayApplicationServiceMock{}
 //			GetFunc: func(ctx context.Context, gatewayId string) (*model.GatewayApplication, error) {
 //				panic("mock out the Get method")
 //			},
-//			ListFunc: func(ctx context.Context, cluster string, namespace string) ([]*model.GatewayApplicationMeta, error) {
+//			ListFunc: func(ctx context.Context, cluster string, namespace string, appState *v1beta2.ApplicationStateType) ([]*model.GatewayApplicationMeta, error) {
 //				panic("mock out the List method")
 //			},
 //			LogsFunc: func(ctx context.Context, gatewayId string, tailLines int) (*string, error) {
@@ -55,7 +55,7 @@ type GatewayApplicationServiceMock struct {
 	GetFunc func(ctx context.Context, gatewayId string) (*model.GatewayApplication, error)
 
 	// ListFunc mocks the List method.
-	ListFunc func(ctx context.Context, cluster string, namespace string) ([]*model.GatewayApplicationMeta, error)
+	ListFunc func(ctx context.Context, cluster string, namespace string, appState *v1beta2.ApplicationStateType) ([]*model.GatewayApplicationMeta, error)
 
 	// LogsFunc mocks the Logs method.
 	LogsFunc func(ctx context.Context, gatewayId string, tailLines int) (*string, error)
@@ -96,6 +96,8 @@ type GatewayApplicationServiceMock struct {
 			Cluster string
 			// Namespace is the namespace argument value.
 			Namespace string
+			// AppState is the appState argument value.
+			AppState *v1beta2.ApplicationStateType
 		}
 		// Logs holds details about calls to the Logs method.
 		Logs []struct {
@@ -235,7 +237,7 @@ func (mock *GatewayApplicationServiceMock) GetCalls() []struct {
 }
 
 // List calls ListFunc.
-func (mock *GatewayApplicationServiceMock) List(ctx context.Context, cluster string, namespace string) ([]*model.GatewayApplicationMeta, error) {
+func (mock *GatewayApplicationServiceMock) List(ctx context.Context, cluster string, namespace string, appState *v1beta2.ApplicationStateType) ([]*model.GatewayApplicationMeta, error) {
 	if mock.ListFunc == nil {
 		panic("GatewayApplicationServiceMock.ListFunc: method is nil but GatewayApplicationService.List was just called")
 	}
@@ -243,15 +245,17 @@ func (mock *GatewayApplicationServiceMock) List(ctx context.Context, cluster str
 		Ctx       context.Context
 		Cluster   string
 		Namespace string
+		AppState  *v1beta2.ApplicationStateType
 	}{
 		Ctx:       ctx,
 		Cluster:   cluster,
 		Namespace: namespace,
+		AppState:  appState,
 	}
 	mock.lockList.Lock()
 	mock.calls.List = append(mock.calls.List, callInfo)
 	mock.lockList.Unlock()
-	return mock.ListFunc(ctx, cluster, namespace)
+	return mock.ListFunc(ctx, cluster, namespace, appState)
 }
 
 // ListCalls gets all the calls that were made to List.
@@ -262,11 +266,13 @@ func (mock *GatewayApplicationServiceMock) ListCalls() []struct {
 	Ctx       context.Context
 	Cluster   string
 	Namespace string
+	AppState  *v1beta2.ApplicationStateType
 } {
 	var calls []struct {
 		Ctx       context.Context
 		Cluster   string
 		Namespace string
+		AppState  *v1beta2.ApplicationStateType
 	}
 	mock.lockList.RLock()
 	calls = mock.calls.List
diff --git a/internal/gateway/application/repository/repository.go b/internal/gateway/application/repository/repository.go
index a1dca3b..81f0d36 100644
--- a/internal/gateway/application/repository/repository.go
+++ b/internal/gateway/application/repository/repository.go
@@ -99,11 +99,16 @@ func (r *SparkManagerRepository) Get(ctx context.Context, cluster model.KubeClus
 	return kube.Sanitize(&app), nil
 }
 
-func (r *SparkManagerRepository) List(ctx context.Context, cluster model.KubeCluster, namespace string) ([]*model.SparkManagerApplicationMeta, error) {
+func (r *SparkManagerRepository) List(ctx context.Context, cluster model.KubeCluster, namespace string, appState *v1beta2.ApplicationStateType) ([]*model.SparkManagerApplicationMeta, error) {
 
 	clusterEndpoint := r.ClusterEndpoints[cluster.Name]
-	// Url: http://host:port/namespace
-	url := fmt.Sprintf("%s/%s", clusterEndpoint, namespace)
+	// Url: http://host:port/namespace?appState=appState
+	var url string
+	if appState == nil {
+		url = fmt.Sprintf("%s/%s", clusterEndpoint, namespace)
+	} else {
+		url = fmt.Sprintf("%s/%s?appState=%s", clusterEndpoint, namespace, string(*appState))
+	}
 
 	request, err := http.NewRequest(http.MethodGet, url, nil)
 	if err != nil {
diff --git a/internal/gateway/application/service/mocksparkapplicationrepository.go b/internal/gateway/application/service/mocksparkapplicationrepository.go
index 896e497..0c45def 100644
--- a/internal/gateway/application/service/mocksparkapplicationrepository.go
+++ b/internal/gateway/application/service/mocksparkapplicationrepository.go
@@ -29,7 +29,7 @@ var _ SparkApplicationRepository = &SparkApplicationRepositoryMock{}
 //			GetFunc: func(ctx context.Context, cluster model.KubeCluster, namespace string, name string) (*v1beta2.SparkApplication, error) {
 //				panic("mock out the Get method")
 //			},
-//			ListFunc: func(ctx context.Context, cluster model.KubeCluster, namespace string) ([]*model.SparkManagerApplicationMeta, error) {
+//			ListFunc: func(ctx context.Context, cluster model.KubeCluster, namespace string, appState *v1beta2.ApplicationStateType) ([]*model.SparkManagerApplicationMeta, error) {
 //				panic("mock out the List method")
 //			},
 //			LogsFunc: func(ctx context.Context, cluster model.KubeCluster, namespace string, name string, tailLines int) (*string, error) {
@@ -55,7 +55,7 @@ type SparkApplicationRepositoryMock struct {
 	GetFunc func(ctx context.Context, cluster model.KubeCluster, namespace string, name string) (*v1beta2.SparkApplication, error)
 
 	// ListFunc mocks the List method.
-	ListFunc func(ctx context.Context, cluster model.KubeCluster, namespace string) ([]*model.SparkManagerApplicationMeta, error)
+	ListFunc func(ctx context.Context, cluster model.KubeCluster, namespace string, appState *v1beta2.ApplicationStateType) ([]*model.SparkManagerApplicationMeta, error)
 
 	// LogsFunc mocks the Logs method.
 	LogsFunc func(ctx context.Context, cluster model.KubeCluster, namespace string, name string, tailLines int) (*string, error)
@@ -104,6 +104,8 @@ type SparkApplicationRepositoryMock struct {
 			Cluster model.KubeCluster
 			// Namespace is the namespace argument value.
 			Namespace string
+			// AppState is the appState argument value.
+			AppState *v1beta2.ApplicationStateType
 		}
 		// Logs holds details about calls to the Logs method.
 		Logs []struct {
@@ -267,7 +269,7 @@ func (mock *SparkApplicationRepositoryMock) GetCalls() []struct {
 }
 
 // List calls ListFunc.
-func (mock *SparkApplicationRepositoryMock) List(ctx context.Context, cluster model.KubeCluster, namespace string) ([]*model.SparkManagerApplicationMeta, error) {
+func (mock *SparkApplicationRepositoryMock) List(ctx context.Context, cluster model.KubeCluster, namespace string, appState *v1beta2.ApplicationStateType) ([]*model.SparkManagerApplicationMeta, error) {
 	if mock.ListFunc == nil {
 		panic("SparkApplicationRepositoryMock.ListFunc: method is nil but SparkApplicationRepository.List was just called")
 	}
@@ -275,15 +277,17 @@ func (mock *SparkApplicationRepositoryMock) List(ctx context.Context, cluster mo
 		Ctx       context.Context
 		Cluster   model.KubeCluster
 		Namespace string
+		AppState  *v1beta2.ApplicationStateType
 	}{
 		Ctx:       ctx,
 		Cluster:   cluster,
 		Namespace: namespace,
+		AppState:  appState,
 	}
 	mock.lockList.Lock()
 	mock.calls.List = append(mock.calls.List, callInfo)
 	mock.lockList.Unlock()
-	return mock.ListFunc(ctx, cluster, namespace)
+	return mock.ListFunc(ctx, cluster, namespace, appState)
 }
 
 // ListCalls gets all the calls that were made to List.
@@ -294,11 +298,13 @@ func (mock *SparkApplicationRepositoryMock) ListCalls() []struct {
 	Ctx       context.Context
 	Cluster   model.KubeCluster
 	Namespace string
+	AppState  *v1beta2.ApplicationStateType
 } {
 	var calls []struct {
 		Ctx       context.Context
 		Cluster   model.KubeCluster
 		Namespace string
+		AppState  *v1beta2.ApplicationStateType
 	}
 	mock.lockList.RLock()
 	calls = mock.calls.List
diff --git a/internal/gateway/application/service/service.go b/internal/gateway/application/service/service.go
index 270c351..c13b5fc 100644
--- a/internal/gateway/application/service/service.go
+++ b/internal/gateway/application/service/service.go
@@ -39,7 +39,7 @@ import (
 
 type SparkApplicationRepository interface {
 	Get(ctx context.Context, cluster model.KubeCluster, namespace string, name string) (*v1beta2.SparkApplication, error)
-	List(ctx context.Context, cluster model.KubeCluster, namespace string) ([]*model.SparkManagerApplicationMeta, error)
+	List(ctx context.Context, cluster model.KubeCluster, namespace string, appState *v1beta2.ApplicationStateType) ([]*model.SparkManagerApplicationMeta, error)
 	Status(ctx context.Context, cluster model.KubeCluster, namespace string, name string) (*v1beta2.SparkApplicationStatus, error)
 	Logs(ctx context.Context, cluster model.KubeCluster, namespace string, name string, tailLines int) (*string, error)
 	Create(ctx context.Context, cluster model.KubeCluster, application *v1beta2.SparkApplication) (*v1beta2.SparkApplication, error)
@@ -125,8 +125,8 @@ func (s *service) Get(ctx context.Context, gatewayId string) (*model.GatewayAppl
 	return gatewayApp, nil
 }
 
-// List retrieves `num` number of GatewayApplications from specified namespace `namespace` in cluster `cluster`
-func (s *service) List(ctx context.Context, cluster string, namespace string) ([]*model.GatewayApplicationMeta, error) {
+// List retrieves a list of GatewayApplicationMeta from specified namespace `namespace` in cluster `cluster` with appState state
+func (s *service) List(ctx context.Context, cluster string, namespace string, appState *v1beta2.ApplicationStateType) ([]*model.GatewayApplicationMeta, error) {
 
 	kubeCluster, err := s.clusterRepository.GetByName(cluster)
 
@@ -149,7 +149,7 @@ func (s *service) List(ctx context.Context, cluster string, namespace string) ([
 
 	var appMetaList []*model.GatewayApplicationMeta
 	for _, ns := range namespaces {
-		nsAppMetas, err := s.sparkAppRepo.List(ctx, *kubeCluster, ns)
+		nsAppMetas, err := s.sparkAppRepo.List(ctx, *kubeCluster, ns, appState)
 		if err != nil {
 			return nil, gatewayerrors.NewFrom(fmt.Errorf("error getting applications: %w", err))
 		}
diff --git a/internal/gateway/cluster/local_repo.go b/internal/gateway/cluster/local_repo.go
index a21d5b1..5d91c43 100644
--- a/internal/gateway/cluster/local_repo.go
+++ b/internal/gateway/cluster/local_repo.go
@@ -80,7 +80,7 @@ func (r *LocalClusterRepo) GetAll() ([]model.KubeCluster, error) {
 	}
 
 	if len(clusters) == 0 {
-		klog.Warningf("GetAll: no clusters found in clusters config")
+		return nil, fmt.Errorf("GetAll: no clusters found in clusters config")
 	}
 
 	return clusters, nil
diff --git a/internal/gateway/server/server.go b/internal/gateway/server/server.go
index 3390993..e3d528a 100644
--- a/internal/gateway/server/server.go
+++ b/internal/gateway/server/server.go
@@ -130,7 +130,7 @@ func NewGateway(ctx context.Context, sgConfig *cfg.SparkGatewayConfig, sparkMana
 	}
 
 	// Register UI
-	webHandler := web.NewWebHandler(sgConfig, ginRouter, rootGroup)
+	webHandler := web.NewWebHandler(localClusterRepo, appService, ginRouter, rootGroup)
 	webHandler.RegisterRoutes()
 
 	/// Register versioned handlers
diff --git a/internal/gateway/web/app/applications.templ b/internal/gateway/web/app/applications.templ
new file mode 100644
index 0000000..4daaf0a
--- /dev/null
+++ b/internal/gateway/web/app/applications.templ
@@ -0,0 +1,188 @@
+package app
+
+import (
+	"fmt"
+	"time"
+	"github.com/slackhq/spark-gateway/pkg/model"
+	"github.com/kubeflow/spark-operator/v2/api/v1beta2"
+)
+
+templ Applications(clusters []model.KubeCluster, applications []*model.GatewayApplicationMeta, selectedCluster, selectedNamespace string, namespaces []model.KubeNamespace) {
+	@Layout("Applications - Spark Gateway") {
+		@ApplicationsContent(clusters, applications, selectedCluster, selectedNamespace, namespaces)
+	}
+}
+
+templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.GatewayApplicationMeta, selectedCluster, selectedNamespace string, namespaces []model.KubeNamespace) {
+	<div id="main-content">
+		<div style="margin-bottom: 30px;">
+			<h1 style="font-size: 28px; font-weight: 600; color: #333; margin-bottom: 10px;">Applications</h1>
+			<p style="color: #666; font-size: 16px;">Manage your Spark applications</p>
+		</div>
+		
+		<div style="background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9; margin-bottom: 20px;">
+			<h3 style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px;">Filters</h3>
+			<form style="display: flex; gap: 15px; align-items: end;">
+				<div style="flex: 1;">
+					<label style="display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;">Cluster</label>
+					<select 
+						name="cluster" 
+						id="cluster-select"
+						style="width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;"
+						hx-get="/ui/applications"
+						hx-target="#main-content"
+						hx-trigger="change"
+						hx-include="[name='namespace']"
+					>
+						<option value="">Select a cluster...</option>
+						for _, cluster := range clusters {
+							<option value={ cluster.Name } selected?={ cluster.Name == selectedCluster }>{ cluster.Name }</option>
+						}
+					</select>
+				</div>
+				
+				<div style="flex: 1;">
+					<label style="display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;">Namespace</label>
+					<select 
+						name="namespace" 
+						id="namespace-select"
+						style="width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;"
+						disabled?={ selectedCluster == "" }
+						hx-get="/ui/applications"
+						hx-target="#main-content"
+						hx-trigger="change"
+						hx-include="[name='cluster']"
+					>
+						<option value="">Select a namespace...</option>
+						for _, namespace := range namespaces {
+							<option value={ namespace.Name } selected?={ namespace.Name == selectedNamespace }>{ namespace.Name }</option>
+						}
+					</select>
+				</div>
+				
+				<div>
+					<button 
+						type="button"
+						style="padding: 8px 16px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;"
+						hx-get="/ui/applications"
+						hx-target="#main-content"
+						onclick="document.getElementById('cluster-select').value = ''; document.getElementById('namespace-select').value = '';"
+					>
+						Clear
+					</button>
+				</div>
+			</form>
+		</div>
+		
+		<div style="background: white; border-radius: 8px; border: 1px solid #e1e5e9; overflow: hidden;">
+			if selectedCluster == "" {
+				<div style="padding: 40px; text-align: center;">
+					<p style="color: #666; font-size: 16px;">Please select a cluster to view applications</p>
+				</div>
+			} else if selectedNamespace == "" {
+				<div style="padding: 40px; text-align: center;">
+					<p style="color: #666; font-size: 16px;">Please select a namespace to view applications</p>
+				</div>
+			} else if len(applications) == 0 {
+				<div style="padding: 40px; text-align: center;">
+					<p style="color: #666; font-size: 16px;">No applications found in { selectedCluster }/{ selectedNamespace }</p>
+				</div>
+			} else {
+				<div style="overflow-x: auto;">
+					<table style="width: 100%; border-collapse: collapse; min-width: 1200px;">
+						<thead style="background-color: #f8f9fa; border-bottom: 2px solid #e1e5e9;">
+							<tr>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Name</th>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Spark App ID</th>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Submission ID</th>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Last Submission</th>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Termination Time</th>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Driver Info</th>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">App State</th>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Execution Attempts</th>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Submission Attempts</th>
+							</tr>
+						</thead>
+						<tbody>
+							for i, app := range applications {
+								<tr style={ templ.KV("background-color", getRowColor(i)) }>
+									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+										<div style="font-weight: 500; color: #333;">{ app.SparkAppMeta.ObjectMeta.Name }</div>
+										<div style="font-size: 12px; color: #666;">{ app.SparkAppMeta.ObjectMeta.Namespace }</div>
+									</td>
+									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+										<code style="background: #f8f9fa; padding: 2px 6px; border-radius: 3px; font-size: 12px;">{ app.SparkAppMeta.SparkApplicationID }</code>
+									</td>
+									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+										<code style="background: #f8f9fa; padding: 2px 6px; border-radius: 3px; font-size: 12px;">{ app.SparkAppMeta.SubmissionID }</code>
+									</td>
+									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+										<div style="font-size: 14px; color: #333;">{ formatTime(app.SparkAppMeta.LastSubmissionAttemptTime.Time) }</div>
+									</td>
+									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+										<div style="font-size: 14px; color: #333;">{ formatTime(app.SparkAppMeta.TerminationTime.Time) }</div>
+									</td>
+									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+										<div style="font-size: 14px; color: #333;">
+											if app.SparkAppMeta.DriverInfo.PodName != "" {
+												<div>Pod: { app.SparkAppMeta.DriverInfo.PodName }</div>
+											}
+											if app.SparkAppMeta.DriverInfo.WebUIAddress != "" {
+												<div>UI: { app.SparkAppMeta.DriverInfo.WebUIAddress }</div>
+											}
+										</div>
+									</td>
+									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+										<span style={ "background: " + getStateColor(formatAppState(app.SparkAppMeta.AppState)) + "; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500;" }>
+											{ formatAppState(app.SparkAppMeta.AppState) }
+										</span>
+									</td>
+									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;">
+										<span style="font-weight: 500; color: #333;">{ fmt.Sprintf("%d", app.SparkAppMeta.ExecutionAttempts) }</span>
+									</td>
+									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;">
+										<span style="font-weight: 500; color: #333;">{ fmt.Sprintf("%d", app.SparkAppMeta.SubmissionAttempts) }</span>
+									</td>
+								</tr>
+							}
+						</tbody>
+					</table>
+				</div>
+			}
+		</div>
+	</div>
+}
+
+func formatTime(t time.Time) string {
+	if t.IsZero() {
+		return "-"
+	}
+	return t.Format("2006-01-02 15:04:05")
+}
+
+func formatAppState(state v1beta2.ApplicationState) string {
+	return string(state.State)
+}
+
+func getStateColor(state string) string {
+	switch state {
+	case "COMPLETED":
+		return "#28a745"
+	case "RUNNING":
+		return "#007bff"
+	case "FAILED":
+		return "#dc3545"
+	case "PENDING":
+		return "#ffc107"
+	case "SUBMISSION_FAILED":
+		return "#dc3545"
+	case "INVALIDATING":
+		return "#6c757d"
+	case "SUCCEEDING":
+		return "#17a2b8"
+	case "FAILING":
+		return "#fd7e14"
+	default:
+		return "#6c757d"
+	}
+}
\ No newline at end of file
diff --git a/internal/gateway/web/app/applications_templ.go b/internal/gateway/web/app/applications_templ.go
new file mode 100644
index 0000000..295fdec
--- /dev/null
+++ b/internal/gateway/web/app/applications_templ.go
@@ -0,0 +1,476 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.3.943
+package app
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import templruntime "github.com/a-h/templ/runtime"
+
+import (
+	"fmt"
+	"github.com/kubeflow/spark-operator/v2/api/v1beta2"
+	"github.com/slackhq/spark-gateway/pkg/model"
+	"time"
+)
+
+func Applications(clusters []model.KubeCluster, applications []*model.GatewayApplicationMeta, selectedCluster, selectedNamespace string, namespaces []model.KubeNamespace) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var2 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+			if !templ_7745c5c3_IsBuffer {
+				defer func() {
+					templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+					if templ_7745c5c3_Err == nil {
+						templ_7745c5c3_Err = templ_7745c5c3_BufErr
+					}
+				}()
+			}
+			ctx = templ.InitializeContext(ctx)
+			templ_7745c5c3_Err = ApplicationsContent(clusters, applications, selectedCluster, selectedNamespace, namespaces).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			return nil
+		})
+		templ_7745c5c3_Err = Layout("Applications - Spark Gateway").Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func ApplicationsContent(clusters []model.KubeCluster, applications []*model.GatewayApplicationMeta, selectedCluster, selectedNamespace string, namespaces []model.KubeNamespace) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"main-content\"><div style=\"margin-bottom: 30px;\"><h1 style=\"font-size: 28px; font-weight: 600; color: #333; margin-bottom: 10px;\">Applications</h1><p style=\"color: #666; font-size: 16px;\">Manage your Spark applications</p></div><div style=\"background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9; margin-bottom: 20px;\"><h3 style=\"font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px;\">Filters</h3><form style=\"display: flex; gap: 15px; align-items: end;\"><div style=\"flex: 1;\"><label style=\"display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;\">Cluster</label> <select name=\"cluster\" id=\"cluster-select\" style=\"width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;\" hx-get=\"/ui/applications\" hx-target=\"#main-content\" hx-trigger=\"change\" hx-include=\"[name='namespace']\"><option value=\"\">Select a cluster...</option> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, cluster := range clusters {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<option value=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var4 string
+			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(cluster.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 39, Col: 35}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if cluster.Name == selectedCluster {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " selected")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, ">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var5 string
+			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(cluster.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 39, Col: 98}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</option>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</select></div><div style=\"flex: 1;\"><label style=\"display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;\">Namespace</label> <select name=\"namespace\" id=\"namespace-select\" style=\"width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if selectedCluster == "" {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, " disabled")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, " hx-get=\"/ui/applications\" hx-target=\"#main-content\" hx-trigger=\"change\" hx-include=\"[name='cluster']\"><option value=\"\">Select a namespace...</option> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, namespace := range namespaces {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<option value=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var6 string
+			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(namespace.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 58, Col: 37}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if namespace.Name == selectedNamespace {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " selected")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, ">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var7 string
+			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(namespace.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 58, Col: 106}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</option>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</select></div><div><button type=\"button\" style=\"padding: 8px 16px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;\" hx-get=\"/ui/applications\" hx-target=\"#main-content\" onclick=\"document.getElementById('cluster-select').value = ''; document.getElementById('namespace-select').value = '';\">Clear</button></div></form></div><div style=\"background: white; border-radius: 8px; border: 1px solid #e1e5e9; overflow: hidden;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if selectedCluster == "" {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<div style=\"padding: 40px; text-align: center;\"><p style=\"color: #666; font-size: 16px;\">Please select a cluster to view applications</p></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else if selectedNamespace == "" {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<div style=\"padding: 40px; text-align: center;\"><p style=\"color: #666; font-size: 16px;\">Please select a namespace to view applications</p></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else if len(applications) == 0 {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "<div style=\"padding: 40px; text-align: center;\"><p style=\"color: #666; font-size: 16px;\">No applications found in ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var8 string
+			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(selectedCluster)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 88, Col: 88}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "/")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var9 string
+			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(selectedNamespace)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 88, Col: 110}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</p></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<div style=\"overflow-x: auto;\"><table style=\"width: 100%; border-collapse: collapse; min-width: 1200px;\"><thead style=\"background-color: #f8f9fa; border-bottom: 2px solid #e1e5e9;\"><tr><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Name</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Spark App ID</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission ID</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Last Submission</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Termination Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Driver Info</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">App State</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Execution Attempts</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Attempts</th></tr></thead> <tbody>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for i, app := range applications {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<tr style=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var10 string
+				templ_7745c5c3_Var10, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues(templ.KV("background-color", getRowColor(i)))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 108, Col: 64}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "\"><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"font-weight: 500; color: #333;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var11 string
+				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.ObjectMeta.Name)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 110, Col: 88}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</div><div style=\"font-size: 12px; color: #666;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var12 string
+				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.ObjectMeta.Namespace)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 111, Col: 92}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><code style=\"background: #f8f9fa; padding: 2px 6px; border-radius: 3px; font-size: 12px;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var13 string
+				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.SparkApplicationID)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 114, Col: 137}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</code></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><code style=\"background: #f8f9fa; padding: 2px 6px; border-radius: 3px; font-size: 12px;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var14 string
+				templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.SubmissionID)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 117, Col: 131}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "</code></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"font-size: 14px; color: #333;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var15 string
+				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(formatTime(app.SparkAppMeta.LastSubmissionAttemptTime.Time))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 120, Col: 114}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"font-size: 14px; color: #333;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var16 string
+				templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(formatTime(app.SparkAppMeta.TerminationTime.Time))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 123, Col: 104}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"font-size: 14px; color: #333;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				if app.SparkAppMeta.DriverInfo.PodName != "" {
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "<div>Pod: ")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var17 string
+					templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.PodName)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 128, Col: 59}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "</div>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+				}
+				if app.SparkAppMeta.DriverInfo.WebUIAddress != "" {
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<div>UI: ")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var18 string
+					templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.WebUIAddress)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 131, Col: 63}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "</div>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><span style=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var19 string
+				templ_7745c5c3_Var19, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("background: " + getStateColor(formatAppState(app.SparkAppMeta.AppState)) + "; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500;")
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 136, Col: 191}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var20 string
+				templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(formatAppState(app.SparkAppMeta.AppState))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 137, Col: 54}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "</span></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;\"><span style=\"font-weight: 500; color: #333;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var21 string
+				templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", app.SparkAppMeta.ExecutionAttempts))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 141, Col: 110}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "</span></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;\"><span style=\"font-weight: 500; color: #333;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var22 string
+				templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", app.SparkAppMeta.SubmissionAttempts))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 144, Col: 111}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "</span></td></tr>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "</tbody></table></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "</div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func formatTime(t time.Time) string {
+	if t.IsZero() {
+		return "-"
+	}
+	return t.Format("2006-01-02 15:04:05")
+}
+
+func formatAppState(state v1beta2.ApplicationState) string {
+	return string(state.State)
+}
+
+func getStateColor(state string) string {
+	switch state {
+	case "COMPLETED":
+		return "#28a745"
+	case "RUNNING":
+		return "#007bff"
+	case "FAILED":
+		return "#dc3545"
+	case "PENDING":
+		return "#ffc107"
+	case "SUBMISSION_FAILED":
+		return "#dc3545"
+	case "INVALIDATING":
+		return "#6c757d"
+	case "SUCCEEDING":
+		return "#17a2b8"
+	case "FAILING":
+		return "#fd7e14"
+	default:
+		return "#6c757d"
+	}
+}
+
+var _ = templruntime.GeneratedTemplate
diff --git a/internal/gateway/web/app/clusters.templ b/internal/gateway/web/app/clusters.templ
new file mode 100644
index 0000000..f7fa64f
--- /dev/null
+++ b/internal/gateway/web/app/clusters.templ
@@ -0,0 +1,81 @@
+package app
+
+import (
+	"fmt"
+	"github.com/slackhq/spark-gateway/pkg/model"
+)
+
+templ Clusters(clusters []model.KubeCluster) {
+	@Layout("Clusters - Spark Gateway") {
+		@ClustersContent(clusters)
+	}
+}
+
+templ ClustersContent(clusters []model.KubeCluster) {
+	<div id="main-content">
+		<div style="margin-bottom: 30px;">
+			<h1 style="font-size: 28px; font-weight: 600; color: #333; margin-bottom: 10px;">Clusters</h1>
+			<p style="color: #666; font-size: 16px;">Manage your Kubernetes clusters</p>
+		</div>
+		
+		<div style="background: white; border-radius: 8px; border: 1px solid #e1e5e9; overflow: hidden;">
+			if len(clusters) == 0 {
+				<div style="padding: 40px; text-align: center;">
+					<p style="color: #666; font-size: 16px;">No clusters configured</p>
+				</div>
+			} else {
+				<table style="width: 100%; border-collapse: collapse;">
+					<thead style="background-color: #f8f9fa; border-bottom: 2px solid #e1e5e9;">
+						<tr>
+							<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9;">Name</th>
+							<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9;">Cluster ID</th>
+							<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9;">Master URL</th>
+							<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9;">Routing Weight</th>
+							<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9;">Namespaces</th>
+						</tr>
+					</thead>
+					<tbody>
+						for i, cluster := range clusters {
+							<tr style={ templ.KV("background-color", getRowColor(i)) }>
+								<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+									<div style="font-weight: 500; color: #333;">{ cluster.Name }</div>
+								</td>
+								<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+									<code style="background: #f8f9fa; padding: 2px 6px; border-radius: 3px; font-size: 14px;">{ cluster.ClusterId }</code>
+								</td>
+								<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+									<div style="color: #666; font-size: 14px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title={ cluster.MasterURL }>{ cluster.MasterURL }</div>
+								</td>
+								<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+									<span style="background: #e3f2fd; color: #1976d2; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500;">
+										{ formatWeight(cluster.RoutingWeight) }
+									</span>
+								</td>
+								<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+									<div style="display: flex; flex-wrap: wrap; gap: 4px;">
+										for _, namespace := range cluster.Namespaces {
+											<span style="background: #f3e5f5; color: #7b1fa2; padding: 2px 6px; border-radius: 8px; font-size: 11px; font-weight: 500;">
+												{ namespace.Name }
+											</span>
+										}
+									</div>
+								</td>
+							</tr>
+						}
+					</tbody>
+				</table>
+			}
+		</div>
+	</div>
+}
+
+func getRowColor(index int) string {
+	if index%2 == 0 {
+		return "#ffffff"
+	}
+	return "#f8f9fa"
+}
+
+func formatWeight(weight float64) string {
+	return fmt.Sprintf("%.1f", weight)
+}
\ No newline at end of file
diff --git a/internal/gateway/web/app/clusters_templ.go b/internal/gateway/web/app/clusters_templ.go
new file mode 100644
index 0000000..708b55a
--- /dev/null
+++ b/internal/gateway/web/app/clusters_templ.go
@@ -0,0 +1,229 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.3.943
+package app
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import templruntime "github.com/a-h/templ/runtime"
+
+import (
+	"fmt"
+	"github.com/slackhq/spark-gateway/pkg/model"
+)
+
+func Clusters(clusters []model.KubeCluster) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var2 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+			if !templ_7745c5c3_IsBuffer {
+				defer func() {
+					templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+					if templ_7745c5c3_Err == nil {
+						templ_7745c5c3_Err = templ_7745c5c3_BufErr
+					}
+				}()
+			}
+			ctx = templ.InitializeContext(ctx)
+			templ_7745c5c3_Err = ClustersContent(clusters).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			return nil
+		})
+		templ_7745c5c3_Err = Layout("Clusters - Spark Gateway").Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func ClustersContent(clusters []model.KubeCluster) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"main-content\"><div style=\"margin-bottom: 30px;\"><h1 style=\"font-size: 28px; font-weight: 600; color: #333; margin-bottom: 10px;\">Clusters</h1><p style=\"color: #666; font-size: 16px;\">Manage your Kubernetes clusters</p></div><div style=\"background: white; border-radius: 8px; border: 1px solid #e1e5e9; overflow: hidden;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if len(clusters) == 0 {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div style=\"padding: 40px; text-align: center;\"><p style=\"color: #666; font-size: 16px;\">No clusters configured</p></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<table style=\"width: 100%; border-collapse: collapse;\"><thead style=\"background-color: #f8f9fa; border-bottom: 2px solid #e1e5e9;\"><tr><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9;\">Name</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9;\">Cluster ID</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9;\">Master URL</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9;\">Routing Weight</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9;\">Namespaces</th></tr></thead> <tbody>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for i, cluster := range clusters {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<tr style=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var4 string
+				templ_7745c5c3_Var4, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues(templ.KV("background-color", getRowColor(i)))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/clusters.templ`, Line: 39, Col: 63}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\"><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"font-weight: 500; color: #333;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var5 string
+				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(cluster.Name)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/clusters.templ`, Line: 41, Col: 67}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><code style=\"background: #f8f9fa; padding: 2px 6px; border-radius: 3px; font-size: 14px;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var6 string
+				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(cluster.ClusterId)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/clusters.templ`, Line: 44, Col: 118}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</code></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"color: #666; font-size: 14px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\" title=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var7 string
+				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(cluster.MasterURL)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/clusters.templ`, Line: 47, Col: 159}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var8 string
+				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(cluster.MasterURL)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/clusters.templ`, Line: 47, Col: 181}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><span style=\"background: #e3f2fd; color: #1976d2; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var9 string
+				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(formatWeight(cluster.RoutingWeight))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/clusters.templ`, Line: 51, Col: 47}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</span></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"display: flex; flex-wrap: wrap; gap: 4px;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				for _, namespace := range cluster.Namespaces {
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<span style=\"background: #f3e5f5; color: #7b1fa2; padding: 2px 6px; border-radius: 8px; font-size: 11px; font-weight: 500;\">")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var10 string
+					templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(namespace.Name)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/clusters.templ`, Line: 58, Col: 28}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</span>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</div></td></tr>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</tbody></table>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func getRowColor(index int) string {
+	if index%2 == 0 {
+		return "#ffffff"
+	}
+	return "#f8f9fa"
+}
+
+func formatWeight(weight float64) string {
+	return fmt.Sprintf("%.1f", weight)
+}
+
+var _ = templruntime.GeneratedTemplate
diff --git a/internal/gateway/web/components/sidebar.templ b/internal/gateway/web/components/sidebar.templ
index 9f71b0d..85f9913 100644
--- a/internal/gateway/web/components/sidebar.templ
+++ b/internal/gateway/web/components/sidebar.templ
@@ -8,7 +8,7 @@ templ Sidebar() {
 					<a 
 						href="#"
 						style="display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;"
-						hx-get="/ui/dashboard"
+						hx-get="/ui"
 						hx-target="#main-content"
 						hx-push-url="true"
 						onmouseover="this.style.backgroundColor='#f8f9fa'"
@@ -46,34 +46,6 @@ templ Sidebar() {
 						Applications
 					</a>
 				</li>
-				<li style="margin-bottom: 8px;">
-					<a 
-						href="#"
-						style="display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;"
-						hx-get="/ui/jobs"
-						hx-target="#main-content"
-						hx-push-url="true"
-						onmouseover="this.style.backgroundColor='#f8f9fa'"
-						onmouseout="this.style.backgroundColor='transparent'"
-					>
-						<span style="margin-right: 10px;">⚡</span>
-						Jobs
-					</a>
-				</li>
-				<li style="margin-bottom: 8px;">
-					<a 
-						href="#"
-						style="display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;"
-						hx-get="/ui/settings"
-						hx-target="#main-content"
-						hx-push-url="true"
-						onmouseover="this.style.backgroundColor='#f8f9fa'"
-						onmouseout="this.style.backgroundColor='transparent'"
-					>
-						<span style="margin-right: 10px;">⚙️</span>
-						Settings
-					</a>
-				</li>
 			</ul>
 		</nav>
 	</aside>
diff --git a/internal/gateway/web/components/sidebar_templ.go b/internal/gateway/web/components/sidebar_templ.go
index 3b30260..3b5fe17 100644
--- a/internal/gateway/web/components/sidebar_templ.go
+++ b/internal/gateway/web/components/sidebar_templ.go
@@ -29,7 +29,7 @@ func Sidebar() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<aside class=\"sidebar\"><nav style=\"padding: 20px 0;\"><ul style=\"list-style: none;\"><li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;\" hx-get=\"/ui/dashboard\" hx-target=\"#main-content\" hx-push-url=\"true\" onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='transparent'\"><span style=\"margin-right: 10px;\">📊</span> Dashboard</a></li><li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;\" hx-get=\"/ui/clusters\" hx-target=\"#main-content\" hx-push-url=\"true\" onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='transparent'\"><span style=\"margin-right: 10px;\">🏢</span> Clusters</a></li><li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;\" hx-get=\"/ui/applications\" hx-target=\"#main-content\" hx-push-url=\"true\" onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='transparent'\"><span style=\"margin-right: 10px;\">📦</span> Applications</a></li><li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;\" hx-get=\"/ui/jobs\" hx-target=\"#main-content\" hx-push-url=\"true\" onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='transparent'\"><span style=\"margin-right: 10px;\">⚡</span> Jobs</a></li><li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;\" hx-get=\"/ui/settings\" hx-target=\"#main-content\" hx-push-url=\"true\" onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='transparent'\"><span style=\"margin-right: 10px;\">⚙️</span> Settings</a></li></ul></nav></aside>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<aside class=\"sidebar\"><nav style=\"padding: 20px 0;\"><ul style=\"list-style: none;\"><li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;\" hx-get=\"/ui\" hx-target=\"#main-content\" hx-push-url=\"true\" onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='transparent'\"><span style=\"margin-right: 10px;\">📊</span> Dashboard</a></li><li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;\" hx-get=\"/ui/clusters\" hx-target=\"#main-content\" hx-push-url=\"true\" onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='transparent'\"><span style=\"margin-right: 10px;\">🏢</span> Clusters</a></li><li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;\" hx-get=\"/ui/applications\" hx-target=\"#main-content\" hx-push-url=\"true\" onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='transparent'\"><span style=\"margin-right: 10px;\">📦</span> Applications</a></li></ul></nav></aside>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/internal/gateway/web/handler.go b/internal/gateway/web/handler.go
index c1c6850..6d3e525 100644
--- a/internal/gateway/web/handler.go
+++ b/internal/gateway/web/handler.go
@@ -6,21 +6,25 @@ import (
 	"github.com/a-h/templ/examples/integration-gin/gintemplrenderer"
 	"github.com/gin-gonic/gin"
 
+	"github.com/slackhq/spark-gateway/internal/gateway/application/handler"
 	"github.com/slackhq/spark-gateway/internal/gateway/cluster"
 	"github.com/slackhq/spark-gateway/internal/gateway/web/app"
+	"github.com/slackhq/spark-gateway/pkg/model"
 )
 
 type WebHandler struct {
-	localClusterRepo *cluster.LocalClusterRepo
-	engine           *gin.Engine
-	routerGroup      *gin.RouterGroup
+	localClusterRepo          *cluster.LocalClusterRepo
+	gatewayApplicationService handler.GatewayApplicationService
+	engine                    *gin.Engine
+	routerGroup               *gin.RouterGroup
 }
 
-func NewWebHandler(localClusterRepo *cluster.LocalClusterRepo, engine *gin.Engine, routerGroup *gin.RouterGroup) *WebHandler {
+func NewWebHandler(localClusterRepo *cluster.LocalClusterRepo, gatewayApplicationService handler.GatewayApplicationService, engine *gin.Engine, routerGroup *gin.RouterGroup) *WebHandler {
 	return &WebHandler{
-		localClusterRepo: localClusterRepo,
-		engine:           engine,
-		routerGroup:      routerGroup,
+		localClusterRepo:          localClusterRepo,
+		gatewayApplicationService: gatewayApplicationService,
+		engine:                    engine,
+		routerGroup:               routerGroup,
 	}
 }
 
@@ -32,10 +36,79 @@ func (h *WebHandler) RegisterRoutes() {
 
 	uiGroup.GET("/", h.main)
 	uiGroup.GET("/clusters", h.clusters)
+	uiGroup.GET("/applications", h.applications)
 
 }
 
 func (h *WebHandler) main(c *gin.Context) {
-	r := gintemplrenderer.New(c, http.StatusOK, app.Main())
-	c.Render(http.StatusOK, r)
+
+	if c.GetHeader("HX-Request") == "true" {
+		r := gintemplrenderer.New(c, http.StatusOK, app.MainContent())
+		c.Render(http.StatusOK, r)
+	} else {
+		r := gintemplrenderer.New(c, http.StatusOK, app.Main())
+		c.Render(http.StatusOK, r)
+	}
+
+}
+
+func (h *WebHandler) clusters(c *gin.Context) {
+	clusters, err := h.localClusterRepo.GetAll()
+	if err != nil {
+		c.Error(err)
+		return
+	}
+
+	// Check if this is an HTMX request (partial update)
+	if c.GetHeader("HX-Request") == "true" {
+		r := gintemplrenderer.New(c, http.StatusOK, app.ClustersContent(clusters))
+		c.Render(http.StatusOK, r)
+	} else {
+		// Full page load
+		r := gintemplrenderer.New(c, http.StatusOK, app.Clusters(clusters))
+		c.Render(http.StatusOK, r)
+	}
+}
+
+func (h *WebHandler) applications(c *gin.Context) {
+	clusters, err := h.localClusterRepo.GetAll()
+	if err != nil {
+		c.Error(err)
+		return
+	}
+
+	selectedCluster := c.Query("cluster")
+	selectedNamespace := c.Query("namespace")
+
+	var applications []*model.GatewayApplicationMeta
+	var namespaces []model.KubeNamespace
+
+	// Get applications if both cluster and namespace are selected
+	if selectedCluster != "" && selectedNamespace != "" {
+		applications, err = h.gatewayApplicationService.List(c, selectedCluster, selectedNamespace, nil)
+		if err != nil {
+			c.Error(err)
+			return
+		}
+	}
+
+	// Get namespaces if cluster is selected
+	if selectedCluster != "" {
+		for _, cluster := range clusters {
+			if cluster.Name == selectedCluster {
+				namespaces = cluster.Namespaces
+				break
+			}
+		}
+	}
+
+	// Check if this is an HTMX request (partial update)
+	if c.GetHeader("HX-Request") == "true" {
+		r := gintemplrenderer.New(c, http.StatusOK, app.ApplicationsContent(clusters, applications, selectedCluster, selectedNamespace, namespaces))
+		c.Render(http.StatusOK, r)
+	} else {
+		// Full page load
+		r := gintemplrenderer.New(c, http.StatusOK, app.Applications(clusters, applications, selectedCluster, selectedNamespace, namespaces))
+		c.Render(http.StatusOK, r)
+	}
 }
diff --git a/internal/sparkManager/application/handler/handler.go b/internal/sparkManager/application/handler/handler.go
index f36cccd..92d6901 100644
--- a/internal/sparkManager/application/handler/handler.go
+++ b/internal/sparkManager/application/handler/handler.go
@@ -18,10 +18,11 @@ package handler
 import (
 	"context"
 	"fmt"
-	"github.com/slackhq/spark-gateway/pkg/model"
 	"net/http"
 	"strconv"
 
+	"github.com/slackhq/spark-gateway/pkg/model"
+
 	"github.com/gin-gonic/gin"
 	"github.com/kubeflow/spark-operator/v2/api/v1beta2"
 
@@ -32,7 +33,7 @@ import (
 
 type SparkApplicationService interface {
 	Get(namespace string, name string) (*v1beta2.SparkApplication, error)
-	List(namespace string) ([]*model.SparkManagerApplicationMeta, error)
+	List(namespace string, appState *v1beta2.ApplicationStateType) ([]*model.SparkManagerApplicationMeta, error)
 	Status(namespace string, name string) (*v1beta2.SparkApplicationStatus, error)
 	Logs(namespace string, name string, tailLines int64) (*string, error)
 	Create(ctx context.Context, application *v1beta2.SparkApplication) (*v1beta2.SparkApplication, error)
@@ -78,7 +79,18 @@ func (h *SparkApplicationHandler) Get(c *gin.Context) {
 }
 
 func (h *SparkApplicationHandler) List(c *gin.Context) {
-	appMetaList, err := h.sparkApplicationService.List(c.Param("namespace"))
+
+	_appState := c.Param("appState")
+	var appState *v1beta2.ApplicationStateType = nil
+	if _appState != "" {
+		state := v1beta2.ApplicationStateType(_appState)
+		if !model.ValidSparkApplicationStatesMap[state] {
+			c.Error(fmt.Errorf("invalid application state: %s", appState))
+		}
+		appState = &state
+	}
+
+	appMetaList, err := h.sparkApplicationService.List(c.Param("namespace"), appState)
 
 	if err != nil {
 		c.Error(err)
diff --git a/internal/sparkManager/application/handler/mocksparkapplicationservice.go b/internal/sparkManager/application/handler/mocksparkapplicationservice.go
index a033fde..03b7af1 100644
--- a/internal/sparkManager/application/handler/mocksparkapplicationservice.go
+++ b/internal/sparkManager/application/handler/mocksparkapplicationservice.go
@@ -29,7 +29,7 @@ var _ SparkApplicationService = &SparkApplicationServiceMock{}
 //			GetFunc: func(namespace string, name string) (*v1beta2.SparkApplication, error) {
 //				panic("mock out the Get method")
 //			},
-//			ListFunc: func(namespace string) ([]*model.SparkManagerApplicationMeta, error) {
+//			ListFunc: func(namespace string, appState *v1beta2.ApplicationStateType) ([]*model.SparkManagerApplicationMeta, error) {
 //				panic("mock out the List method")
 //			},
 //			LogsFunc: func(namespace string, name string, tailLines int64) (*string, error) {
@@ -55,7 +55,7 @@ type SparkApplicationServiceMock struct {
 	GetFunc func(namespace string, name string) (*v1beta2.SparkApplication, error)
 
 	// ListFunc mocks the List method.
-	ListFunc func(namespace string) ([]*model.SparkManagerApplicationMeta, error)
+	ListFunc func(namespace string, appState *v1beta2.ApplicationStateType) ([]*model.SparkManagerApplicationMeta, error)
 
 	// LogsFunc mocks the Logs method.
 	LogsFunc func(namespace string, name string, tailLines int64) (*string, error)
@@ -92,6 +92,8 @@ type SparkApplicationServiceMock struct {
 		List []struct {
 			// Namespace is the namespace argument value.
 			Namespace string
+			// AppState is the appState argument value.
+			AppState *v1beta2.ApplicationStateType
 		}
 		// Logs holds details about calls to the Logs method.
 		Logs []struct {
@@ -231,19 +233,21 @@ func (mock *SparkApplicationServiceMock) GetCalls() []struct {
 }
 
 // List calls ListFunc.
-func (mock *SparkApplicationServiceMock) List(namespace string) ([]*model.SparkManagerApplicationMeta, error) {
+func (mock *SparkApplicationServiceMock) List(namespace string, appState *v1beta2.ApplicationStateType) ([]*model.SparkManagerApplicationMeta, error) {
 	if mock.ListFunc == nil {
 		panic("SparkApplicationServiceMock.ListFunc: method is nil but SparkApplicationService.List was just called")
 	}
 	callInfo := struct {
 		Namespace string
+		AppState  *v1beta2.ApplicationStateType
 	}{
 		Namespace: namespace,
+		AppState:  appState,
 	}
 	mock.lockList.Lock()
 	mock.calls.List = append(mock.calls.List, callInfo)
 	mock.lockList.Unlock()
-	return mock.ListFunc(namespace)
+	return mock.ListFunc(namespace, appState)
 }
 
 // ListCalls gets all the calls that were made to List.
@@ -252,9 +256,11 @@ func (mock *SparkApplicationServiceMock) List(namespace string) ([]*model.SparkM
 //	len(mockedSparkApplicationService.ListCalls())
 func (mock *SparkApplicationServiceMock) ListCalls() []struct {
 	Namespace string
+	AppState  *v1beta2.ApplicationStateType
 } {
 	var calls []struct {
 		Namespace string
+		AppState  *v1beta2.ApplicationStateType
 	}
 	mock.lockList.RLock()
 	calls = mock.calls.List
diff --git a/internal/sparkManager/application/repository/repository.go b/internal/sparkManager/application/repository/repository.go
index f9e9bb0..332706e 100644
--- a/internal/sparkManager/application/repository/repository.go
+++ b/internal/sparkManager/application/repository/repository.go
@@ -18,10 +18,11 @@ package repository
 import (
 	"context"
 	"fmt"
-	"github.com/slackhq/spark-gateway/pkg/model"
 	"net/http"
 	"time"
 
+	"github.com/slackhq/spark-gateway/pkg/model"
+
 	"github.com/slackhq/spark-gateway/pkg/gatewayerrors"
 	"github.com/slackhq/spark-gateway/pkg/kube"
 	"github.com/slackhq/spark-gateway/pkg/util"
@@ -58,7 +59,7 @@ func (k *SparkApplicationRepository) Get(namespace string, name string) (*v1beta
 
 }
 
-func (k *SparkApplicationRepository) List(namespace string) ([]*model.SparkManagerApplicationMeta, error) {
+func (k *SparkApplicationRepository) List(namespace string, appState *v1beta2.ApplicationStateType) ([]*model.SparkManagerApplicationMeta, error) {
 
 	sparkApps, err := k.controller.SparkLister.SparkApplications(namespace).List(labels.Everything())
 
@@ -69,9 +70,13 @@ func (k *SparkApplicationRepository) List(namespace string) ([]*model.SparkManag
 	var appMetaList []*model.SparkManagerApplicationMeta
 
 	for _, sparkApp := range sparkApps {
+		if appState != nil && sparkApp.Status.AppState.State != *appState {
+			continue
+		}
 		sparkAppMeta := model.NewSparkManagerApplicationMeta(sparkApp)
 		appMetaList = append(appMetaList, sparkAppMeta)
 	}
+	
 	return appMetaList, nil
 
 }
diff --git a/internal/sparkManager/application/service/mocksparkapplicationrepository.go b/internal/sparkManager/application/service/mocksparkapplicationrepository.go
index dbfa8df..f1c8f8c 100644
--- a/internal/sparkManager/application/service/mocksparkapplicationrepository.go
+++ b/internal/sparkManager/application/service/mocksparkapplicationrepository.go
@@ -32,7 +32,7 @@ var _ SparkApplicationRepository = &SparkApplicationRepositoryMock{}
 //			GetLogsFunc: func(namespace string, name string, tailLines int64) (*string, error) {
 //				panic("mock out the GetLogs method")
 //			},
-//			ListFunc: func(namespace string) ([]*model.SparkManagerApplicationMeta, error) {
+//			ListFunc: func(namespace string, appState *v1beta2.ApplicationStateType) ([]*model.SparkManagerApplicationMeta, error) {
 //				panic("mock out the List method")
 //			},
 //		}
@@ -55,7 +55,7 @@ type SparkApplicationRepositoryMock struct {
 	GetLogsFunc func(namespace string, name string, tailLines int64) (*string, error)
 
 	// ListFunc mocks the List method.
-	ListFunc func(namespace string) ([]*model.SparkManagerApplicationMeta, error)
+	ListFunc func(namespace string, appState *v1beta2.ApplicationStateType) ([]*model.SparkManagerApplicationMeta, error)
 
 	// calls tracks calls to the methods.
 	calls struct {
@@ -95,6 +95,8 @@ type SparkApplicationRepositoryMock struct {
 		List []struct {
 			// Namespace is the namespace argument value.
 			Namespace string
+			// AppState is the appState argument value.
+			AppState *v1beta2.ApplicationStateType
 		}
 	}
 	lockCreate  sync.RWMutex
@@ -257,19 +259,21 @@ func (mock *SparkApplicationRepositoryMock) GetLogsCalls() []struct {
 }
 
 // List calls ListFunc.
-func (mock *SparkApplicationRepositoryMock) List(namespace string) ([]*model.SparkManagerApplicationMeta, error) {
+func (mock *SparkApplicationRepositoryMock) List(namespace string, appState *v1beta2.ApplicationStateType) ([]*model.SparkManagerApplicationMeta, error) {
 	if mock.ListFunc == nil {
 		panic("SparkApplicationRepositoryMock.ListFunc: method is nil but SparkApplicationRepository.List was just called")
 	}
 	callInfo := struct {
 		Namespace string
+		AppState  *v1beta2.ApplicationStateType
 	}{
 		Namespace: namespace,
+		AppState:  appState,
 	}
 	mock.lockList.Lock()
 	mock.calls.List = append(mock.calls.List, callInfo)
 	mock.lockList.Unlock()
-	return mock.ListFunc(namespace)
+	return mock.ListFunc(namespace, appState)
 }
 
 // ListCalls gets all the calls that were made to List.
@@ -278,9 +282,11 @@ func (mock *SparkApplicationRepositoryMock) List(namespace string) ([]*model.Spa
 //	len(mockedSparkApplicationRepository.ListCalls())
 func (mock *SparkApplicationRepositoryMock) ListCalls() []struct {
 	Namespace string
+	AppState  *v1beta2.ApplicationStateType
 } {
 	var calls []struct {
 		Namespace string
+		AppState  *v1beta2.ApplicationStateType
 	}
 	mock.lockList.RLock()
 	calls = mock.calls.List
diff --git a/internal/sparkManager/application/service/service.go b/internal/sparkManager/application/service/service.go
index 36b688c..b010383 100644
--- a/internal/sparkManager/application/service/service.go
+++ b/internal/sparkManager/application/service/service.go
@@ -32,7 +32,7 @@ import (
 
 type SparkApplicationRepository interface {
 	Get(namespace string, name string) (*v1beta2.SparkApplication, error)
-	List(namespace string) ([]*model.SparkManagerApplicationMeta, error)
+	List(namespace string, appState *v1beta2.ApplicationStateType) ([]*model.SparkManagerApplicationMeta, error)
 	GetLogs(namespace string, name string, tailLines int64) (*string, error)
 	Create(ctx context.Context, application *v1beta2.SparkApplication) (*v1beta2.SparkApplication, error)
 	Delete(ctx context.Context, namespace string, name string) error
@@ -59,9 +59,9 @@ func (s *SparkApplicationService) Get(namespace string, name string) (*v1beta2.S
 	return sparkApp, nil
 }
 
-func (s *SparkApplicationService) List(namespace string) ([]*model.SparkManagerApplicationMeta, error) {
+func (s *SparkApplicationService) List(namespace string, appState *v1beta2.ApplicationStateType) ([]*model.SparkManagerApplicationMeta, error) {
 
-	appMetaList, err := s.sparkApplicationRepository.List(namespace)
+	appMetaList, err := s.sparkApplicationRepository.List(namespace, appState)
 
 	if err != nil {
 		return nil, gatewayerrors.NewFrom(err)
diff --git a/pkg/model/application.go b/pkg/model/application.go
index 73a07a7..f0c3a0b 100644
--- a/pkg/model/application.go
+++ b/pkg/model/application.go
@@ -17,10 +17,11 @@ package model
 
 import (
 	"fmt"
+	"strings"
+
 	"github.com/google/uuid"
 	"github.com/kubeflow/spark-operator/v2/api/v1beta2"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
-	"strings"
 )
 
 const GATEWAY_USER_LABEL = "spark-gateway/user"
@@ -127,3 +128,17 @@ func NewGatewayApplicationMeta(smAppMeta *SparkManagerApplicationMeta, cluster s
 		Cluster:      cluster,
 	}
 }
+
+var ValidSparkApplicationStatesMap = map[v1beta2.ApplicationStateType]bool{
+	v1beta2.ApplicationStateNew:              true,
+	v1beta2.ApplicationStateSubmitted:        true,
+	v1beta2.ApplicationStateRunning:          true,
+	v1beta2.ApplicationStateCompleted:        true,
+	v1beta2.ApplicationStateFailed:           true,
+	v1beta2.ApplicationStateFailedSubmission: true,
+	v1beta2.ApplicationStatePendingRerun:     true,
+	v1beta2.ApplicationStateInvalidating:     true,
+	v1beta2.ApplicationStateSucceeding:       true,
+	v1beta2.ApplicationStateFailing:          true,
+	v1beta2.ApplicationStateUnknown:          true,
+}

From 849ab0effeee511fcba08fb42aff7a8fae38043c Mon Sep 17 00:00:00 2001
From: jigar-bhalodia <bhalodia.jigar@gmail.com>
Date: Mon, 1 Sep 2025 17:45:58 -0700
Subject: [PATCH 03/14] Update list handler

---
 internal/gateway/application/handler/handler.go      | 6 ++++--
 internal/sparkManager/application/handler/handler.go | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/internal/gateway/application/handler/handler.go b/internal/gateway/application/handler/handler.go
index cfba1f2..e630136 100644
--- a/internal/gateway/application/handler/handler.go
+++ b/internal/gateway/application/handler/handler.go
@@ -21,6 +21,7 @@ import (
 	"fmt"
 	"net/http"
 	"strconv"
+	"strings"
 
 	swaggerFiles "github.com/swaggo/files"
 	ginSwagger "github.com/swaggo/gin-swagger"
@@ -106,12 +107,13 @@ func (h *ApplicationHandler) List(c *gin.Context) {
 
 	namespace := c.Query("namespace")
 
-	_appState := c.Param("appState")
+	_appState := strings.ToUpper(c.Query("appState"))
 	var appState *v1beta2.ApplicationStateType = nil
 	if _appState != "" {
 		state := v1beta2.ApplicationStateType(_appState)
 		if !model.ValidSparkApplicationStatesMap[state] {
-			c.Error(fmt.Errorf("invalid application state: %s", appState))
+			c.Error(fmt.Errorf("invalid application state: %s", state))
+			return
 		}
 		appState = &state
 	}
diff --git a/internal/sparkManager/application/handler/handler.go b/internal/sparkManager/application/handler/handler.go
index 92d6901..3348aea 100644
--- a/internal/sparkManager/application/handler/handler.go
+++ b/internal/sparkManager/application/handler/handler.go
@@ -20,6 +20,7 @@ import (
 	"fmt"
 	"net/http"
 	"strconv"
+	"strings"
 
 	"github.com/slackhq/spark-gateway/pkg/model"
 
@@ -80,12 +81,13 @@ func (h *SparkApplicationHandler) Get(c *gin.Context) {
 
 func (h *SparkApplicationHandler) List(c *gin.Context) {
 
-	_appState := c.Param("appState")
+	_appState := strings.ToUpper(c.Query("appState"))
 	var appState *v1beta2.ApplicationStateType = nil
 	if _appState != "" {
 		state := v1beta2.ApplicationStateType(_appState)
 		if !model.ValidSparkApplicationStatesMap[state] {
-			c.Error(fmt.Errorf("invalid application state: %s", appState))
+			c.Error(fmt.Errorf("invalid application state: %s", state))
+			return
 		}
 		appState = &state
 	}

From 714f3efb596c0a665e61cdc426b2e479b621036c Mon Sep 17 00:00:00 2001
From: jigar-bhalodia <bhalodia.jigar@gmail.com>
Date: Mon, 1 Sep 2025 18:14:12 -0700
Subject: [PATCH 04/14] Update gitignore

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitignore b/.gitignore
index 97c815b..54aa23f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,3 +30,5 @@ go.work.sum
 .run/
 
 .DS_Store
+
+gateway-config-dev*.yaml

From 03c8cba6e86fde05baa49d8048056defc1db9f77 Mon Sep 17 00:00:00 2001
From: jigar-bhalodia <bhalodia.jigar@gmail.com>
Date: Tue, 2 Sep 2025 08:35:20 -0400
Subject: [PATCH 05/14] Update GatewayAppMeta object with user attribute

---
 internal/gateway/application/service/service.go | 15 +++++++++------
 pkg/model/application.go                        | 13 ++++++++++++-
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/internal/gateway/application/service/service.go b/internal/gateway/application/service/service.go
index c13b5fc..97d6e9d 100644
--- a/internal/gateway/application/service/service.go
+++ b/internal/gateway/application/service/service.go
@@ -17,7 +17,6 @@ package service
 
 import (
 	"context"
-	"errors"
 	"fmt"
 	"strings"
 
@@ -109,16 +108,16 @@ func (s *service) Get(ctx context.Context, gatewayId string) (*model.GatewayAppl
 		return nil, gatewayerrors.NewFrom(fmt.Errorf("error getting SparkApplication '%s': %w", gatewayId, err))
 	}
 
-	user, ok := sparkApp.Labels[model.GATEWAY_USER_LABEL]
-	if !ok {
-		return nil, gatewayerrors.NewFrom(errors.New("no gateway user associated with this application, possibly not created through spark-gateway?"))
+	user, err := model.GetUser(sparkApp.Labels)
+	if err != nil {
+		return nil, gatewayerrors.NewFrom(err)
 	}
 
 	gatewayApp := &model.GatewayApplication{
 		SparkApplication: sparkApp,
 		GatewayId:        sparkApp.Name,
 		Cluster:          cluster.Name,
-		User:             user,
+		User:             *user,
 		SparkLogURLs:     GetRenderedURLs(s.config.StatusUrlTemplates, sparkApp),
 	}
 
@@ -155,7 +154,11 @@ func (s *service) List(ctx context.Context, cluster string, namespace string, ap
 		}
 
 		for _, appMeta := range nsAppMetas {
-			appMetaList = append(appMetaList, model.NewGatewayApplicationMeta(appMeta, cluster))
+			user, err := model.GetUser(appMeta.ObjectMeta.Labels)
+			if user == nil || err != nil {
+				continue
+			}
+			appMetaList = append(appMetaList, model.NewGatewayApplicationMeta(appMeta, cluster, *user))
 		}
 
 	}
diff --git a/pkg/model/application.go b/pkg/model/application.go
index f0c3a0b..ebd6724 100644
--- a/pkg/model/application.go
+++ b/pkg/model/application.go
@@ -16,6 +16,7 @@
 package model
 
 import (
+	"errors"
 	"fmt"
 	"strings"
 
@@ -79,6 +80,14 @@ func ParseGatewayIdUUID(gatewayId string) (*uuid.UUID, error) {
 	return nil, fmt.Errorf("error parsing gatewayId (%s). Format must be 'cluster-namespace-uuid'", gatewayId)
 }
 
+func GetUser(sparkAppLabels map[string]string) (*string, error) {
+	user, ok := sparkAppLabels[GATEWAY_USER_LABEL]
+	if !ok {
+		return nil, errors.New("no gateway user associated with this application, possibly not created through spark-gateway")
+	}
+	return &user, nil
+}
+
 type SparkManagerApplicationMeta struct {
 	ObjectMeta metav1.ObjectMeta `json:"metadata"`
 	// All fields below come from v1beta2.SparkApplicationStatus
@@ -96,6 +105,7 @@ type SparkManagerApplicationMeta struct {
 type GatewayApplicationMeta struct {
 	SparkAppMeta SparkManagerApplicationMeta `json:"sparkAppMetadata"`
 	Cluster      string                      `json:"cluster"`
+	User         string                      `json:"user"`
 }
 
 func NewSparkManagerApplicationMeta(sparkApp *v1beta2.SparkApplication) *SparkManagerApplicationMeta {
@@ -122,10 +132,11 @@ func NewSparkManagerApplicationMeta(sparkApp *v1beta2.SparkApplication) *SparkMa
 
 }
 
-func NewGatewayApplicationMeta(smAppMeta *SparkManagerApplicationMeta, cluster string) *GatewayApplicationMeta {
+func NewGatewayApplicationMeta(smAppMeta *SparkManagerApplicationMeta, cluster string, user string) *GatewayApplicationMeta {
 	return &GatewayApplicationMeta{
 		SparkAppMeta: *smAppMeta,
 		Cluster:      cluster,
+		User:         user,
 	}
 }
 

From 928d54a0323e9e27d2448795e319b0093e7235d3 Mon Sep 17 00:00:00 2001
From: jigar-bhalodia <bhalodia.jigar@gmail.com>
Date: Tue, 2 Sep 2025 08:35:49 -0400
Subject: [PATCH 06/14] UI - update driver info col

---
 internal/gateway/web/app/applications.templ   |  58 ++++--
 .../gateway/web/app/applications_templ.go     | 184 ++++++++++--------
 2 files changed, 149 insertions(+), 93 deletions(-)

diff --git a/internal/gateway/web/app/applications.templ b/internal/gateway/web/app/applications.templ
index 4daaf0a..c2cebe9 100644
--- a/internal/gateway/web/app/applications.templ
+++ b/internal/gateway/web/app/applications.templ
@@ -17,7 +17,7 @@ templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.Ga
 	<div id="main-content">
 		<div style="margin-bottom: 30px;">
 			<h1 style="font-size: 28px; font-weight: 600; color: #333; margin-bottom: 10px;">Applications</h1>
-			<p style="color: #666; font-size: 16px;">Manage your Spark applications</p>
+			<p style="color: #666; font-size: 16px;">View your Spark Applications</p>
 		</div>
 		
 		<div style="background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9; margin-bottom: 20px;">
@@ -94,8 +94,7 @@ templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.Ga
 							<tr>
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Name</th>
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Spark App ID</th>
-								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Submission ID</th>
-								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Last Submission</th>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Submission Time</th>
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Termination Time</th>
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Driver Info</th>
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">App State</th>
@@ -108,14 +107,10 @@ templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.Ga
 								<tr style={ templ.KV("background-color", getRowColor(i)) }>
 									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
 										<div style="font-weight: 500; color: #333;">{ app.SparkAppMeta.ObjectMeta.Name }</div>
-										<div style="font-size: 12px; color: #666;">{ app.SparkAppMeta.ObjectMeta.Namespace }</div>
 									</td>
 									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
 										<code style="background: #f8f9fa; padding: 2px 6px; border-radius: 3px; font-size: 12px;">{ app.SparkAppMeta.SparkApplicationID }</code>
 									</td>
-									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
-										<code style="background: #f8f9fa; padding: 2px 6px; border-radius: 3px; font-size: 12px;">{ app.SparkAppMeta.SubmissionID }</code>
-									</td>
 									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
 										<div style="font-size: 14px; color: #333;">{ formatTime(app.SparkAppMeta.LastSubmissionAttemptTime.Time) }</div>
 									</td>
@@ -123,14 +118,33 @@ templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.Ga
 										<div style="font-size: 14px; color: #333;">{ formatTime(app.SparkAppMeta.TerminationTime.Time) }</div>
 									</td>
 									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
-										<div style="font-size: 14px; color: #333;">
-											if app.SparkAppMeta.DriverInfo.PodName != "" {
-												<div>Pod: { app.SparkAppMeta.DriverInfo.PodName }</div>
-											}
-											if app.SparkAppMeta.DriverInfo.WebUIAddress != "" {
-												<div>UI: { app.SparkAppMeta.DriverInfo.WebUIAddress }</div>
-											}
-										</div>
+										if app.SparkAppMeta.DriverInfo.PodName != "" || app.SparkAppMeta.DriverInfo.WebUIAddress != "" {
+											<div 
+												style="cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; font-size: 14px; color: #007bff;"
+												data-target={ "driver-info-" + fmt.Sprintf("%d", i) }
+												onclick="toggleDriverInfo(this.getAttribute('data-target'))"
+											>
+												<span id={ "driver-toggle-" + fmt.Sprintf("%d", i) } style="font-size: 12px;">▶</span>
+												<span>Driver Info</span>
+											</div>
+											<div 
+												id={ "driver-info-" + fmt.Sprintf("%d", i) }
+												style="display: none; margin-top: 8px; padding: 8px; background: #f8f9fa; border-radius: 4px; font-size: 13px;"
+											>
+												if app.SparkAppMeta.DriverInfo.PodName != "" {
+													<div style="margin-bottom: 4px;">
+														<strong>Pod Name:</strong> { app.SparkAppMeta.DriverInfo.PodName }
+													</div>
+												}
+												if app.SparkAppMeta.DriverInfo.WebUIAddress != "" {
+													<div>
+														<strong>Ingress Address:</strong> { app.SparkAppMeta.DriverInfo.WebUIAddress }
+													</div>
+												}
+											</div>
+										} else {
+											<span style="color: #6c757d; font-style: italic;">No driver info</span>
+										}
 									</td>
 									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
 										<span style={ "background: " + getStateColor(formatAppState(app.SparkAppMeta.AppState)) + "; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500;" }>
@@ -151,6 +165,20 @@ templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.Ga
 			}
 		</div>
 	</div>
+	<script>
+		function toggleDriverInfo(elementId) {
+			const content = document.getElementById(elementId);
+			const toggle = document.getElementById(elementId.replace('driver-info-', 'driver-toggle-'));
+			
+			if (content.style.display === 'none' || content.style.display === '') {
+				content.style.display = 'block';
+				toggle.textContent = '▼';
+			} else {
+				content.style.display = 'none';
+				toggle.textContent = '▶';
+			}
+		}
+	</script>
 }
 
 func formatTime(t time.Time) string {
diff --git a/internal/gateway/web/app/applications_templ.go b/internal/gateway/web/app/applications_templ.go
index 295fdec..3c3e27d 100644
--- a/internal/gateway/web/app/applications_templ.go
+++ b/internal/gateway/web/app/applications_templ.go
@@ -83,7 +83,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 			templ_7745c5c3_Var3 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"main-content\"><div style=\"margin-bottom: 30px;\"><h1 style=\"font-size: 28px; font-weight: 600; color: #333; margin-bottom: 10px;\">Applications</h1><p style=\"color: #666; font-size: 16px;\">Manage your Spark applications</p></div><div style=\"background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9; margin-bottom: 20px;\"><h3 style=\"font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px;\">Filters</h3><form style=\"display: flex; gap: 15px; align-items: end;\"><div style=\"flex: 1;\"><label style=\"display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;\">Cluster</label> <select name=\"cluster\" id=\"cluster-select\" style=\"width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;\" hx-get=\"/ui/applications\" hx-target=\"#main-content\" hx-trigger=\"change\" hx-include=\"[name='namespace']\"><option value=\"\">Select a cluster...</option> ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"main-content\"><div style=\"margin-bottom: 30px;\"><h1 style=\"font-size: 28px; font-weight: 600; color: #333; margin-bottom: 10px;\">Applications</h1><p style=\"color: #666; font-size: 16px;\">View your Spark Applications</p></div><div style=\"background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9; margin-bottom: 20px;\"><h3 style=\"font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px;\">Filters</h3><form style=\"display: flex; gap: 15px; align-items: end;\"><div style=\"flex: 1;\"><label style=\"display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;\">Cluster</label> <select name=\"cluster\" id=\"cluster-select\" style=\"width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;\" hx-get=\"/ui/applications\" hx-target=\"#main-content\" hx-trigger=\"change\" hx-include=\"[name='namespace']\"><option value=\"\">Select a cluster...</option> ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -231,7 +231,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				return templ_7745c5c3_Err
 			}
 		} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<div style=\"overflow-x: auto;\"><table style=\"width: 100%; border-collapse: collapse; min-width: 1200px;\"><thead style=\"background-color: #f8f9fa; border-bottom: 2px solid #e1e5e9;\"><tr><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Name</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Spark App ID</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission ID</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Last Submission</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Termination Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Driver Info</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">App State</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Execution Attempts</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Attempts</th></tr></thead> <tbody>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<div style=\"overflow-x: auto;\"><table style=\"width: 100%; border-collapse: collapse; min-width: 1200px;\"><thead style=\"background-color: #f8f9fa; border-bottom: 2px solid #e1e5e9;\"><tr><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Name</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Spark App ID</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Termination Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Driver Info</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">App State</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Execution Attempts</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Attempts</th></tr></thead> <tbody>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -243,7 +243,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var10 string
 				templ_7745c5c3_Var10, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues(templ.KV("background-color", getRowColor(i)))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 108, Col: 64}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 107, Col: 64}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
@@ -256,182 +256,210 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var11 string
 				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.ObjectMeta.Name)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 110, Col: 88}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 109, Col: 88}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</div><div style=\"font-size: 12px; color: #666;\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><code style=\"background: #f8f9fa; padding: 2px 6px; border-radius: 3px; font-size: 12px;\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var12 string
-				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.ObjectMeta.Namespace)
+				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.SparkApplicationID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 111, Col: 92}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 112, Col: 137}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><code style=\"background: #f8f9fa; padding: 2px 6px; border-radius: 3px; font-size: 12px;\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</code></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"font-size: 14px; color: #333;\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var13 string
-				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.SparkApplicationID)
+				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(formatTime(app.SparkAppMeta.LastSubmissionAttemptTime.Time))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 114, Col: 137}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 115, Col: 114}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</code></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><code style=\"background: #f8f9fa; padding: 2px 6px; border-radius: 3px; font-size: 12px;\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"font-size: 14px; color: #333;\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var14 string
-				templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.SubmissionID)
+				templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(formatTime(app.SparkAppMeta.TerminationTime.Time))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 117, Col: 131}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 118, Col: 104}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "</code></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"font-size: 14px; color: #333;\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var15 string
-				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(formatTime(app.SparkAppMeta.LastSubmissionAttemptTime.Time))
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 120, Col: 114}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"font-size: 14px; color: #333;\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var16 string
-				templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(formatTime(app.SparkAppMeta.TerminationTime.Time))
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 123, Col: 104}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"font-size: 14px; color: #333;\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				if app.SparkAppMeta.DriverInfo.PodName != "" {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "<div>Pod: ")
+				if app.SparkAppMeta.DriverInfo.PodName != "" || app.SparkAppMeta.DriverInfo.WebUIAddress != "" {
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "<div style=\"cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; font-size: 14px; color: #007bff;\" data-target=\"")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					var templ_7745c5c3_Var17 string
-					templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.PodName)
+					var templ_7745c5c3_Var15 string
+					templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs("driver-info-" + fmt.Sprintf("%d", i))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 128, Col: 59}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 124, Col: 63}
 					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "</div>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "\" onclick=\"toggleDriverInfo(this.getAttribute('data-target'))\"><span id=\"")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-				}
-				if app.SparkAppMeta.DriverInfo.WebUIAddress != "" {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<div>UI: ")
+					var templ_7745c5c3_Var16 string
+					templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs("driver-toggle-" + fmt.Sprintf("%d", i))
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 127, Col: 62}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "\" style=\"font-size: 12px;\">▶</span> <span>Driver Info</span></div><div id=\"")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var17 string
+					templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs("driver-info-" + fmt.Sprintf("%d", i))
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 131, Col: 54}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					var templ_7745c5c3_Var18 string
-					templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.WebUIAddress)
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "\" style=\"display: none; margin-top: 8px; padding: 8px; background: #f8f9fa; border-radius: 4px; font-size: 13px;\">")
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 131, Col: 63}
+						return templ_7745c5c3_Err
 					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+					if app.SparkAppMeta.DriverInfo.PodName != "" {
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<div style=\"margin-bottom: 4px;\"><strong>Pod Name:</strong> ")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var18 string
+						templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.PodName)
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 136, Col: 78}
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "</div>")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+					}
+					if app.SparkAppMeta.DriverInfo.WebUIAddress != "" {
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "<div><strong>Ingress Address:</strong> ")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var19 string
+						templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.WebUIAddress)
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 141, Col: 90}
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "</div>")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "</div>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "</div>")
+				} else {
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "<span style=\"color: #6c757d; font-style: italic;\">No driver info</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><span style=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "</td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><span style=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var19 string
-				templ_7745c5c3_Var19, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("background: " + getStateColor(formatAppState(app.SparkAppMeta.AppState)) + "; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500;")
+				var templ_7745c5c3_Var20 string
+				templ_7745c5c3_Var20, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("background: " + getStateColor(formatAppState(app.SparkAppMeta.AppState)) + "; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500;")
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 136, Col: 191}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 150, Col: 191}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var20 string
-				templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(formatAppState(app.SparkAppMeta.AppState))
+				var templ_7745c5c3_Var21 string
+				templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(formatAppState(app.SparkAppMeta.AppState))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 137, Col: 54}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 151, Col: 54}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "</span></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;\"><span style=\"font-weight: 500; color: #333;\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "</span></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;\"><span style=\"font-weight: 500; color: #333;\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var21 string
-				templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", app.SparkAppMeta.ExecutionAttempts))
+				var templ_7745c5c3_Var22 string
+				templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", app.SparkAppMeta.ExecutionAttempts))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 141, Col: 110}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 155, Col: 110}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "</span></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;\"><span style=\"font-weight: 500; color: #333;\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "</span></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;\"><span style=\"font-weight: 500; color: #333;\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var22 string
-				templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", app.SparkAppMeta.SubmissionAttempts))
+				var templ_7745c5c3_Var23 string
+				templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", app.SparkAppMeta.SubmissionAttempts))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 144, Col: 111}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 158, Col: 111}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "</span></td></tr>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "</span></td></tr>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "</tbody></table></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "</tbody></table></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "</div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "</div></div><script>\n\t\tfunction toggleDriverInfo(elementId) {\n\t\t\tconst content = document.getElementById(elementId);\n\t\t\tconst toggle = document.getElementById(elementId.replace('driver-info-', 'driver-toggle-'));\n\t\t\t\n\t\t\tif (content.style.display === 'none' || content.style.display === '') {\n\t\t\t\tcontent.style.display = 'block';\n\t\t\t\ttoggle.textContent = '▼';\n\t\t\t} else {\n\t\t\t\tcontent.style.display = 'none';\n\t\t\t\ttoggle.textContent = '▶';\n\t\t\t}\n\t\t}\n\t</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

From b3b71eb2458d7f0ec47b443b63ca0d07bca85d6b Mon Sep 17 00:00:00 2001
From: jigar-bhalodia <bhalodia.jigar@gmail.com>
Date: Tue, 2 Sep 2025 05:53:19 -0700
Subject: [PATCH 07/14] Update app table UI

---
 internal/gateway/web/app/applications.templ   | 10 +---
 .../gateway/web/app/applications_templ.go     | 55 +++++++------------
 2 files changed, 24 insertions(+), 41 deletions(-)

diff --git a/internal/gateway/web/app/applications.templ b/internal/gateway/web/app/applications.templ
index c2cebe9..655cf7d 100644
--- a/internal/gateway/web/app/applications.templ
+++ b/internal/gateway/web/app/applications.templ
@@ -98,7 +98,6 @@ templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.Ga
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Termination Time</th>
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Driver Info</th>
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">App State</th>
-								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Execution Attempts</th>
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Submission Attempts</th>
 							</tr>
 						</thead>
@@ -118,7 +117,7 @@ templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.Ga
 										<div style="font-size: 14px; color: #333;">{ formatTime(app.SparkAppMeta.TerminationTime.Time) }</div>
 									</td>
 									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
-										if app.SparkAppMeta.DriverInfo.PodName != "" || app.SparkAppMeta.DriverInfo.WebUIAddress != "" {
+										if app.SparkAppMeta.DriverInfo.PodName != "" || app.SparkAppMeta.DriverInfo.WebUIIngressAddress != "" {
 											<div 
 												style="cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; font-size: 14px; color: #007bff;"
 												data-target={ "driver-info-" + fmt.Sprintf("%d", i) }
@@ -136,9 +135,9 @@ templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.Ga
 														<strong>Pod Name:</strong> { app.SparkAppMeta.DriverInfo.PodName }
 													</div>
 												}
-												if app.SparkAppMeta.DriverInfo.WebUIAddress != "" {
+												if app.SparkAppMeta.DriverInfo.WebUIIngressAddress != "" {
 													<div>
-														<strong>Ingress Address:</strong> { app.SparkAppMeta.DriverInfo.WebUIAddress }
+														<strong>Ingress Address:</strong> { app.SparkAppMeta.DriverInfo.WebUIIngressAddress }
 													</div>
 												}
 											</div>
@@ -151,9 +150,6 @@ templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.Ga
 											{ formatAppState(app.SparkAppMeta.AppState) }
 										</span>
 									</td>
-									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;">
-										<span style="font-weight: 500; color: #333;">{ fmt.Sprintf("%d", app.SparkAppMeta.ExecutionAttempts) }</span>
-									</td>
 									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;">
 										<span style="font-weight: 500; color: #333;">{ fmt.Sprintf("%d", app.SparkAppMeta.SubmissionAttempts) }</span>
 									</td>
diff --git a/internal/gateway/web/app/applications_templ.go b/internal/gateway/web/app/applications_templ.go
index 3c3e27d..9549b9c 100644
--- a/internal/gateway/web/app/applications_templ.go
+++ b/internal/gateway/web/app/applications_templ.go
@@ -231,7 +231,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				return templ_7745c5c3_Err
 			}
 		} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<div style=\"overflow-x: auto;\"><table style=\"width: 100%; border-collapse: collapse; min-width: 1200px;\"><thead style=\"background-color: #f8f9fa; border-bottom: 2px solid #e1e5e9;\"><tr><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Name</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Spark App ID</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Termination Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Driver Info</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">App State</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Execution Attempts</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Attempts</th></tr></thead> <tbody>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<div style=\"overflow-x: auto;\"><table style=\"width: 100%; border-collapse: collapse; min-width: 1200px;\"><thead style=\"background-color: #f8f9fa; border-bottom: 2px solid #e1e5e9;\"><tr><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Name</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Spark App ID</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Termination Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Driver Info</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">App State</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Attempts</th></tr></thead> <tbody>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -243,7 +243,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var10 string
 				templ_7745c5c3_Var10, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues(templ.KV("background-color", getRowColor(i)))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 107, Col: 64}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 106, Col: 64}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
@@ -256,7 +256,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var11 string
 				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.ObjectMeta.Name)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 109, Col: 88}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 108, Col: 88}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 				if templ_7745c5c3_Err != nil {
@@ -269,7 +269,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var12 string
 				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.SparkApplicationID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 112, Col: 137}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 111, Col: 137}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 				if templ_7745c5c3_Err != nil {
@@ -282,7 +282,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var13 string
 				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(formatTime(app.SparkAppMeta.LastSubmissionAttemptTime.Time))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 115, Col: 114}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 114, Col: 114}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 				if templ_7745c5c3_Err != nil {
@@ -295,7 +295,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var14 string
 				templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(formatTime(app.SparkAppMeta.TerminationTime.Time))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 118, Col: 104}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 117, Col: 104}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 				if templ_7745c5c3_Err != nil {
@@ -305,7 +305,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				if app.SparkAppMeta.DriverInfo.PodName != "" || app.SparkAppMeta.DriverInfo.WebUIAddress != "" {
+				if app.SparkAppMeta.DriverInfo.PodName != "" || app.SparkAppMeta.DriverInfo.WebUIIngressAddress != "" {
 					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "<div style=\"cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; font-size: 14px; color: #007bff;\" data-target=\"")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
@@ -313,7 +313,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 					var templ_7745c5c3_Var15 string
 					templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs("driver-info-" + fmt.Sprintf("%d", i))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 124, Col: 63}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 123, Col: 63}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 					if templ_7745c5c3_Err != nil {
@@ -326,7 +326,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 					var templ_7745c5c3_Var16 string
 					templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs("driver-toggle-" + fmt.Sprintf("%d", i))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 127, Col: 62}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 126, Col: 62}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 					if templ_7745c5c3_Err != nil {
@@ -339,7 +339,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 					var templ_7745c5c3_Var17 string
 					templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs("driver-info-" + fmt.Sprintf("%d", i))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 131, Col: 54}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 130, Col: 54}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
 					if templ_7745c5c3_Err != nil {
@@ -357,7 +357,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 						var templ_7745c5c3_Var18 string
 						templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.PodName)
 						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 136, Col: 78}
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 135, Col: 78}
 						}
 						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
 						if templ_7745c5c3_Err != nil {
@@ -368,15 +368,15 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 							return templ_7745c5c3_Err
 						}
 					}
-					if app.SparkAppMeta.DriverInfo.WebUIAddress != "" {
+					if app.SparkAppMeta.DriverInfo.WebUIIngressAddress != "" {
 						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "<div><strong>Ingress Address:</strong> ")
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
 						var templ_7745c5c3_Var19 string
-						templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.WebUIAddress)
+						templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.WebUIIngressAddress)
 						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 141, Col: 90}
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 140, Col: 97}
 						}
 						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
 						if templ_7745c5c3_Err != nil {
@@ -404,7 +404,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var20 string
 				templ_7745c5c3_Var20, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("background: " + getStateColor(formatAppState(app.SparkAppMeta.AppState)) + "; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500;")
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 150, Col: 191}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 149, Col: 191}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
 				if templ_7745c5c3_Err != nil {
@@ -417,7 +417,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var21 string
 				templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(formatAppState(app.SparkAppMeta.AppState))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 151, Col: 54}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 150, Col: 54}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
 				if templ_7745c5c3_Err != nil {
@@ -428,38 +428,25 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var22 string
-				templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", app.SparkAppMeta.ExecutionAttempts))
+				templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", app.SparkAppMeta.SubmissionAttempts))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 155, Col: 110}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 154, Col: 111}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "</span></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;\"><span style=\"font-weight: 500; color: #333;\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var23 string
-				templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", app.SparkAppMeta.SubmissionAttempts))
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 158, Col: 111}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "</span></td></tr>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "</span></td></tr>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "</tbody></table></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "</tbody></table></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "</div></div><script>\n\t\tfunction toggleDriverInfo(elementId) {\n\t\t\tconst content = document.getElementById(elementId);\n\t\t\tconst toggle = document.getElementById(elementId.replace('driver-info-', 'driver-toggle-'));\n\t\t\t\n\t\t\tif (content.style.display === 'none' || content.style.display === '') {\n\t\t\t\tcontent.style.display = 'block';\n\t\t\t\ttoggle.textContent = '▼';\n\t\t\t} else {\n\t\t\t\tcontent.style.display = 'none';\n\t\t\t\ttoggle.textContent = '▶';\n\t\t\t}\n\t\t}\n\t</script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "</div></div><script>\n\t\tfunction toggleDriverInfo(elementId) {\n\t\t\tconst content = document.getElementById(elementId);\n\t\t\tconst toggle = document.getElementById(elementId.replace('driver-info-', 'driver-toggle-'));\n\t\t\t\n\t\t\tif (content.style.display === 'none' || content.style.display === '') {\n\t\t\t\tcontent.style.display = 'block';\n\t\t\t\ttoggle.textContent = '▼';\n\t\t\t} else {\n\t\t\t\tcontent.style.display = 'none';\n\t\t\t\ttoggle.textContent = '▶';\n\t\t\t}\n\t\t}\n\t</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

From ed1aca4449af4b294ed5339fc5393498b966dfff Mon Sep 17 00:00:00 2001
From: jigar-bhalodia <bhalodia.jigar@gmail.com>
Date: Tue, 2 Sep 2025 09:06:15 -0400
Subject: [PATCH 08/14] Update filters

---
 internal/gateway/web/app/applications.templ | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/internal/gateway/web/app/applications.templ b/internal/gateway/web/app/applications.templ
index 655cf7d..a1df967 100644
--- a/internal/gateway/web/app/applications.templ
+++ b/internal/gateway/web/app/applications.templ
@@ -22,8 +22,8 @@ templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.Ga
 		
 		<div style="background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9; margin-bottom: 20px;">
 			<h3 style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px;">Filters</h3>
-			<form style="display: flex; gap: 15px; align-items: end;">
-				<div style="flex: 1;">
+			<form style="display: flex; flex-direction: column; gap: 15px;">
+				<div>
 					<label style="display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;">Cluster</label>
 					<select 
 						name="cluster" 
@@ -41,7 +41,7 @@ templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.Ga
 					</select>
 				</div>
 				
-				<div style="flex: 1;">
+				<div>
 					<label style="display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;">Namespace</label>
 					<select 
 						name="namespace" 
@@ -63,7 +63,7 @@ templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.Ga
 				<div>
 					<button 
 						type="button"
-						style="padding: 8px 16px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;"
+						style="padding: 8px 16px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; width: fit-content;"
 						hx-get="/ui/applications"
 						hx-target="#main-content"
 						onclick="document.getElementById('cluster-select').value = ''; document.getElementById('namespace-select').value = '';"

From e9fd7a9053f1f10beda1ddbcff0b8ee3ba716ebf Mon Sep 17 00:00:00 2001
From: jigar-bhalodia <bhalodia.jigar@gmail.com>
Date: Tue, 2 Sep 2025 09:06:22 -0400
Subject: [PATCH 09/14] Update filters

---
 internal/gateway/web/app/applications.templ | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/internal/gateway/web/app/applications.templ b/internal/gateway/web/app/applications.templ
index a1df967..206be4e 100644
--- a/internal/gateway/web/app/applications.templ
+++ b/internal/gateway/web/app/applications.templ
@@ -44,7 +44,7 @@ templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.Ga
 				<div>
 					<label style="display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;">Namespace</label>
 					<select 
-						name="namespace" 
+						name="namespace"
 						id="namespace-select"
 						style="width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;"
 						disabled?={ selectedCluster == "" }

From d5fac63c7cf570dc55a075997548f35044bf1a2e Mon Sep 17 00:00:00 2001
From: jigar-bhalodia <bhalodia.jigar@gmail.com>
Date: Tue, 2 Sep 2025 06:25:11 -0700
Subject: [PATCH 10/14] update User column

---
 internal/gateway/web/app/applications.templ   |   6 +-
 .../gateway/web/app/applications_templ.go     | 129 ++++++++++--------
 2 files changed, 76 insertions(+), 59 deletions(-)

diff --git a/internal/gateway/web/app/applications.templ b/internal/gateway/web/app/applications.templ
index 206be4e..4ddea8a 100644
--- a/internal/gateway/web/app/applications.templ
+++ b/internal/gateway/web/app/applications.templ
@@ -89,13 +89,14 @@ templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.Ga
 				</div>
 			} else {
 				<div style="overflow-x: auto;">
-					<table style="width: 100%; border-collapse: collapse; min-width: 1200px;">
+					<table style="width: 100%; border-collapse: collapse; min-width: 1400px;">
 						<thead style="background-color: #f8f9fa; border-bottom: 2px solid #e1e5e9;">
 							<tr>
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Name</th>
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Spark App ID</th>
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Submission Time</th>
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Termination Time</th>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">User</th>
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Driver Info</th>
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">App State</th>
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Submission Attempts</th>
@@ -116,6 +117,9 @@ templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.Ga
 									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
 										<div style="font-size: 14px; color: #333;">{ formatTime(app.SparkAppMeta.TerminationTime.Time) }</div>
 									</td>
+                                    <td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+                                        <div style="font-size: 14px; color: #333;">{ app.User }</div>
+                                    </td>
 									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
 										if app.SparkAppMeta.DriverInfo.PodName != "" || app.SparkAppMeta.DriverInfo.WebUIIngressAddress != "" {
 											<div 
diff --git a/internal/gateway/web/app/applications_templ.go b/internal/gateway/web/app/applications_templ.go
index 9549b9c..9058eac 100644
--- a/internal/gateway/web/app/applications_templ.go
+++ b/internal/gateway/web/app/applications_templ.go
@@ -83,7 +83,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 			templ_7745c5c3_Var3 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"main-content\"><div style=\"margin-bottom: 30px;\"><h1 style=\"font-size: 28px; font-weight: 600; color: #333; margin-bottom: 10px;\">Applications</h1><p style=\"color: #666; font-size: 16px;\">View your Spark Applications</p></div><div style=\"background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9; margin-bottom: 20px;\"><h3 style=\"font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px;\">Filters</h3><form style=\"display: flex; gap: 15px; align-items: end;\"><div style=\"flex: 1;\"><label style=\"display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;\">Cluster</label> <select name=\"cluster\" id=\"cluster-select\" style=\"width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;\" hx-get=\"/ui/applications\" hx-target=\"#main-content\" hx-trigger=\"change\" hx-include=\"[name='namespace']\"><option value=\"\">Select a cluster...</option> ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"main-content\"><div style=\"margin-bottom: 30px;\"><h1 style=\"font-size: 28px; font-weight: 600; color: #333; margin-bottom: 10px;\">Applications</h1><p style=\"color: #666; font-size: 16px;\">View your Spark Applications</p></div><div style=\"background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9; margin-bottom: 20px;\"><h3 style=\"font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px;\">Filters</h3><form style=\"display: flex; flex-direction: column; gap: 15px;\"><div><label style=\"display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;\">Cluster</label> <select name=\"cluster\" id=\"cluster-select\" style=\"width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;\" hx-get=\"/ui/applications\" hx-target=\"#main-content\" hx-trigger=\"change\" hx-include=\"[name='namespace']\"><option value=\"\">Select a cluster...</option> ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -129,7 +129,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</select></div><div style=\"flex: 1;\"><label style=\"display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;\">Namespace</label> <select name=\"namespace\" id=\"namespace-select\" style=\"width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</select></div><div><label style=\"display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;\">Namespace</label> <select name=\"namespace\" id=\"namespace-select\" style=\"width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -185,7 +185,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</select></div><div><button type=\"button\" style=\"padding: 8px 16px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;\" hx-get=\"/ui/applications\" hx-target=\"#main-content\" onclick=\"document.getElementById('cluster-select').value = ''; document.getElementById('namespace-select').value = '';\">Clear</button></div></form></div><div style=\"background: white; border-radius: 8px; border: 1px solid #e1e5e9; overflow: hidden;\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</select></div><div><button type=\"button\" style=\"padding: 8px 16px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; width: fit-content;\" hx-get=\"/ui/applications\" hx-target=\"#main-content\" onclick=\"document.getElementById('cluster-select').value = ''; document.getElementById('namespace-select').value = '';\">Clear</button></div></form></div><div style=\"background: white; border-radius: 8px; border: 1px solid #e1e5e9; overflow: hidden;\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -231,7 +231,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				return templ_7745c5c3_Err
 			}
 		} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<div style=\"overflow-x: auto;\"><table style=\"width: 100%; border-collapse: collapse; min-width: 1200px;\"><thead style=\"background-color: #f8f9fa; border-bottom: 2px solid #e1e5e9;\"><tr><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Name</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Spark App ID</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Termination Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Driver Info</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">App State</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Attempts</th></tr></thead> <tbody>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<div style=\"overflow-x: auto;\"><table style=\"width: 100%; border-collapse: collapse; min-width: 1400px;\"><thead style=\"background-color: #f8f9fa; border-bottom: 2px solid #e1e5e9;\"><tr><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Name</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Spark App ID</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Termination Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">User</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Driver Info</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">App State</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Attempts</th></tr></thead> <tbody>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -243,7 +243,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var10 string
 				templ_7745c5c3_Var10, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues(templ.KV("background-color", getRowColor(i)))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 106, Col: 64}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 107, Col: 64}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
@@ -256,7 +256,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var11 string
 				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.ObjectMeta.Name)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 108, Col: 88}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 109, Col: 88}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 				if templ_7745c5c3_Err != nil {
@@ -269,7 +269,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var12 string
 				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.SparkApplicationID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 111, Col: 137}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 112, Col: 137}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 				if templ_7745c5c3_Err != nil {
@@ -282,7 +282,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var13 string
 				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(formatTime(app.SparkAppMeta.LastSubmissionAttemptTime.Time))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 114, Col: 114}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 115, Col: 114}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 				if templ_7745c5c3_Err != nil {
@@ -295,158 +295,171 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var14 string
 				templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(formatTime(app.SparkAppMeta.TerminationTime.Time))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 117, Col: 104}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 118, Col: 104}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"font-size: 14px; color: #333;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var15 string
+				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(app.User)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 121, Col: 93}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				if app.SparkAppMeta.DriverInfo.PodName != "" || app.SparkAppMeta.DriverInfo.WebUIIngressAddress != "" {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "<div style=\"cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; font-size: 14px; color: #007bff;\" data-target=\"")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "<div style=\"cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; font-size: 14px; color: #007bff;\" data-target=\"")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					var templ_7745c5c3_Var15 string
-					templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs("driver-info-" + fmt.Sprintf("%d", i))
+					var templ_7745c5c3_Var16 string
+					templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs("driver-info-" + fmt.Sprintf("%d", i))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 123, Col: 63}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 127, Col: 63}
 					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "\" onclick=\"toggleDriverInfo(this.getAttribute('data-target'))\"><span id=\"")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "\" onclick=\"toggleDriverInfo(this.getAttribute('data-target'))\"><span id=\"")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					var templ_7745c5c3_Var16 string
-					templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs("driver-toggle-" + fmt.Sprintf("%d", i))
+					var templ_7745c5c3_Var17 string
+					templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs("driver-toggle-" + fmt.Sprintf("%d", i))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 126, Col: 62}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 130, Col: 62}
 					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "\" style=\"font-size: 12px;\">▶</span> <span>Driver Info</span></div><div id=\"")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "\" style=\"font-size: 12px;\">▶</span> <span>Driver Info</span></div><div id=\"")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					var templ_7745c5c3_Var17 string
-					templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs("driver-info-" + fmt.Sprintf("%d", i))
+					var templ_7745c5c3_Var18 string
+					templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs("driver-info-" + fmt.Sprintf("%d", i))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 130, Col: 54}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 134, Col: 54}
 					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "\" style=\"display: none; margin-top: 8px; padding: 8px; background: #f8f9fa; border-radius: 4px; font-size: 13px;\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "\" style=\"display: none; margin-top: 8px; padding: 8px; background: #f8f9fa; border-radius: 4px; font-size: 13px;\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					if app.SparkAppMeta.DriverInfo.PodName != "" {
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<div style=\"margin-bottom: 4px;\"><strong>Pod Name:</strong> ")
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "<div style=\"margin-bottom: 4px;\"><strong>Pod Name:</strong> ")
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
-						var templ_7745c5c3_Var18 string
-						templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.PodName)
+						var templ_7745c5c3_Var19 string
+						templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.PodName)
 						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 135, Col: 78}
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 139, Col: 78}
 						}
-						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "</div>")
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "</div>")
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
 					}
 					if app.SparkAppMeta.DriverInfo.WebUIIngressAddress != "" {
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "<div><strong>Ingress Address:</strong> ")
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "<div><strong>Ingress Address:</strong> ")
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
-						var templ_7745c5c3_Var19 string
-						templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.WebUIIngressAddress)
+						var templ_7745c5c3_Var20 string
+						templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.WebUIIngressAddress)
 						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 140, Col: 97}
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 144, Col: 97}
 						}
-						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "</div>")
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "</div>")
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "</div>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "</div>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				} else {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "<span style=\"color: #6c757d; font-style: italic;\">No driver info</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "<span style=\"color: #6c757d; font-style: italic;\">No driver info</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "</td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><span style=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "</td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><span style=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var20 string
-				templ_7745c5c3_Var20, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("background: " + getStateColor(formatAppState(app.SparkAppMeta.AppState)) + "; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500;")
+				var templ_7745c5c3_Var21 string
+				templ_7745c5c3_Var21, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("background: " + getStateColor(formatAppState(app.SparkAppMeta.AppState)) + "; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500;")
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 149, Col: 191}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 153, Col: 191}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var21 string
-				templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(formatAppState(app.SparkAppMeta.AppState))
+				var templ_7745c5c3_Var22 string
+				templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(formatAppState(app.SparkAppMeta.AppState))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 150, Col: 54}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 154, Col: 54}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "</span></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;\"><span style=\"font-weight: 500; color: #333;\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "</span></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;\"><span style=\"font-weight: 500; color: #333;\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var22 string
-				templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", app.SparkAppMeta.SubmissionAttempts))
+				var templ_7745c5c3_Var23 string
+				templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", app.SparkAppMeta.SubmissionAttempts))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 154, Col: 111}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 158, Col: 111}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "</span></td></tr>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "</span></td></tr>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "</tbody></table></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "</tbody></table></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "</div></div><script>\n\t\tfunction toggleDriverInfo(elementId) {\n\t\t\tconst content = document.getElementById(elementId);\n\t\t\tconst toggle = document.getElementById(elementId.replace('driver-info-', 'driver-toggle-'));\n\t\t\t\n\t\t\tif (content.style.display === 'none' || content.style.display === '') {\n\t\t\t\tcontent.style.display = 'block';\n\t\t\t\ttoggle.textContent = '▼';\n\t\t\t} else {\n\t\t\t\tcontent.style.display = 'none';\n\t\t\t\ttoggle.textContent = '▶';\n\t\t\t}\n\t\t}\n\t</script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "</div></div><script>\n\t\tfunction toggleDriverInfo(elementId) {\n\t\t\tconst content = document.getElementById(elementId);\n\t\t\tconst toggle = document.getElementById(elementId.replace('driver-info-', 'driver-toggle-'));\n\t\t\t\n\t\t\tif (content.style.display === 'none' || content.style.display === '') {\n\t\t\t\tcontent.style.display = 'block';\n\t\t\t\ttoggle.textContent = '▼';\n\t\t\t} else {\n\t\t\t\tcontent.style.display = 'none';\n\t\t\t\ttoggle.textContent = '▶';\n\t\t\t}\n\t\t}\n\t</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

From 3c5b6c62bf01131cc81683026a7e0188a3edbb90 Mon Sep 17 00:00:00 2001
From: jigar-bhalodia <bhalodia.jigar@gmail.com>
Date: Tue, 2 Sep 2025 07:03:58 -0700
Subject: [PATCH 11/14] Add Spec to UI

---
 internal/gateway/web/app/applications.templ   | 83 ++++++++++++++++++-
 .../gateway/web/app/applications_templ.go     | 49 +++++++----
 internal/gateway/web/handler.go               | 31 +++++++
 3 files changed, 144 insertions(+), 19 deletions(-)

diff --git a/internal/gateway/web/app/applications.templ b/internal/gateway/web/app/applications.templ
index 4ddea8a..38b34d4 100644
--- a/internal/gateway/web/app/applications.templ
+++ b/internal/gateway/web/app/applications.templ
@@ -89,7 +89,7 @@ templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.Ga
 				</div>
 			} else {
 				<div style="overflow-x: auto;">
-					<table style="width: 100%; border-collapse: collapse; min-width: 1400px;">
+					<table style="width: 100%; border-collapse: collapse; min-width: 1500px;">
 						<thead style="background-color: #f8f9fa; border-bottom: 2px solid #e1e5e9;">
 							<tr>
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Name</th>
@@ -100,6 +100,7 @@ templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.Ga
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Driver Info</th>
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">App State</th>
 								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Submission Attempts</th>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Spec</th>
 							</tr>
 						</thead>
 						<tbody>
@@ -157,6 +158,15 @@ templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.Ga
 									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;">
 										<span style="font-weight: 500; color: #333;">{ fmt.Sprintf("%d", app.SparkAppMeta.SubmissionAttempts) }</span>
 									</td>
+									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;">
+										<button 
+											style="padding: 6px 12px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;"
+											class="spec-button"
+											data-gateway-id={ app.SparkAppMeta.ObjectMeta.Name }
+										>
+											View Spec
+										</button>
+									</td>
 								</tr>
 							}
 						</tbody>
@@ -178,6 +188,77 @@ templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.Ga
 				toggle.textContent = '▶';
 			}
 		}
+
+		function showSpecPopover(gatewayId) {
+			// Create overlay if it doesn't exist
+			let overlay = document.getElementById('spec-overlay');
+			if (!overlay) {
+				overlay = document.createElement('div');
+				overlay.id = 'spec-overlay';
+				overlay.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; z-index: 1000; justify-content: center; align-items: center;';
+				document.body.appendChild(overlay);
+			}
+
+			// Create popover if it doesn't exist
+			let popover = document.getElementById('spec-popover');
+			if (!popover) {
+				popover = document.createElement('div');
+				popover.id = 'spec-popover';
+				popover.style.cssText = 'background: white; padding: 20px; border-radius: 8px; max-width: 80%; max-height: 80%; overflow: auto; position: relative;';
+				overlay.appendChild(popover);
+			}
+
+			// Show loading state
+			popover.innerHTML = '<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">' +
+				'<h3 style="margin: 0;">Spark Application Spec</h3>' +
+				'<button onclick="hideSpecPopover()" style="background: #dc3545; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer;">Close</button>' +
+				'</div><div>Loading...</div>';
+
+			// Show the overlay
+			overlay.style.display = 'flex';
+
+			// Fetch spec data
+			fetch('/ui/applications/' + gatewayId + '/spec')
+				.then(response => response.json())
+				.then(data => {
+					popover.innerHTML = '<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">' +
+						'<h3 style="margin: 0;">Spark Application Spec</h3>' +
+						'<button onclick="hideSpecPopover()" style="background: #dc3545; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer;">Close</button>' +
+						'</div>' +
+						'<div>' +
+						'<h4>YAML Specification:</h4>' +
+						'<pre style="background: #f8f9fa; padding: 15px; border-radius: 4px; overflow: auto; max-height: 500px; font-size: 12px;"><code>' + data.spec + '</code></pre>' +
+						'</div>';
+				})
+				.catch(error => {
+					popover.innerHTML = '<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">' +
+						'<h3 style="margin: 0;">Spark Application Spec</h3>' +
+						'<button onclick="hideSpecPopover()" style="background: #dc3545; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer;">Close</button>' +
+						'</div>' +
+						'<div style="color: #dc3545;">Error loading spec: ' + error.message + '</div>';
+				});
+		}
+
+		function hideSpecPopover() {
+			const overlay = document.getElementById('spec-overlay');
+			if (overlay) {
+				overlay.style.display = 'none';
+			}
+		}
+
+		// Event delegation for spec buttons
+		document.addEventListener('click', function(event) {
+			if (event.target.classList.contains('spec-button')) {
+				const gatewayId = event.target.getAttribute('data-gateway-id');
+				showSpecPopover(gatewayId);
+			}
+			
+			// Close popover when clicking outside
+			const overlay = document.getElementById('spec-overlay');
+			if (overlay && event.target === overlay) {
+				hideSpecPopover();
+			}
+		});
 	</script>
 }
 
diff --git a/internal/gateway/web/app/applications_templ.go b/internal/gateway/web/app/applications_templ.go
index 9058eac..02e699a 100644
--- a/internal/gateway/web/app/applications_templ.go
+++ b/internal/gateway/web/app/applications_templ.go
@@ -231,7 +231,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				return templ_7745c5c3_Err
 			}
 		} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<div style=\"overflow-x: auto;\"><table style=\"width: 100%; border-collapse: collapse; min-width: 1400px;\"><thead style=\"background-color: #f8f9fa; border-bottom: 2px solid #e1e5e9;\"><tr><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Name</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Spark App ID</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Termination Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">User</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Driver Info</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">App State</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Attempts</th></tr></thead> <tbody>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<div style=\"overflow-x: auto;\"><table style=\"width: 100%; border-collapse: collapse; min-width: 1500px;\"><thead style=\"background-color: #f8f9fa; border-bottom: 2px solid #e1e5e9;\"><tr><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Name</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Spark App ID</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Termination Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">User</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Driver Info</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">App State</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Attempts</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Spec</th></tr></thead> <tbody>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -243,7 +243,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var10 string
 				templ_7745c5c3_Var10, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues(templ.KV("background-color", getRowColor(i)))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 107, Col: 64}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 108, Col: 64}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
@@ -256,7 +256,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var11 string
 				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.ObjectMeta.Name)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 109, Col: 88}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 110, Col: 88}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 				if templ_7745c5c3_Err != nil {
@@ -269,7 +269,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var12 string
 				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.SparkApplicationID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 112, Col: 137}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 113, Col: 137}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 				if templ_7745c5c3_Err != nil {
@@ -282,7 +282,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var13 string
 				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(formatTime(app.SparkAppMeta.LastSubmissionAttemptTime.Time))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 115, Col: 114}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 116, Col: 114}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 				if templ_7745c5c3_Err != nil {
@@ -295,7 +295,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var14 string
 				templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(formatTime(app.SparkAppMeta.TerminationTime.Time))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 118, Col: 104}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 119, Col: 104}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 				if templ_7745c5c3_Err != nil {
@@ -308,7 +308,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var15 string
 				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(app.User)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 121, Col: 93}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 122, Col: 93}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 				if templ_7745c5c3_Err != nil {
@@ -326,7 +326,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 					var templ_7745c5c3_Var16 string
 					templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs("driver-info-" + fmt.Sprintf("%d", i))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 127, Col: 63}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 128, Col: 63}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 					if templ_7745c5c3_Err != nil {
@@ -339,7 +339,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 					var templ_7745c5c3_Var17 string
 					templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs("driver-toggle-" + fmt.Sprintf("%d", i))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 130, Col: 62}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 131, Col: 62}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
 					if templ_7745c5c3_Err != nil {
@@ -352,7 +352,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 					var templ_7745c5c3_Var18 string
 					templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs("driver-info-" + fmt.Sprintf("%d", i))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 134, Col: 54}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 135, Col: 54}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
 					if templ_7745c5c3_Err != nil {
@@ -370,7 +370,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 						var templ_7745c5c3_Var19 string
 						templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.PodName)
 						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 139, Col: 78}
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 140, Col: 78}
 						}
 						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
 						if templ_7745c5c3_Err != nil {
@@ -389,7 +389,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 						var templ_7745c5c3_Var20 string
 						templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.WebUIIngressAddress)
 						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 144, Col: 97}
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 145, Col: 97}
 						}
 						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
 						if templ_7745c5c3_Err != nil {
@@ -417,7 +417,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var21 string
 				templ_7745c5c3_Var21, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("background: " + getStateColor(formatAppState(app.SparkAppMeta.AppState)) + "; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500;")
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 153, Col: 191}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 154, Col: 191}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
 				if templ_7745c5c3_Err != nil {
@@ -430,7 +430,7 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var22 string
 				templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(formatAppState(app.SparkAppMeta.AppState))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 154, Col: 54}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 155, Col: 54}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
 				if templ_7745c5c3_Err != nil {
@@ -443,23 +443,36 @@ func ApplicationsContent(clusters []model.KubeCluster, applications []*model.Gat
 				var templ_7745c5c3_Var23 string
 				templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", app.SparkAppMeta.SubmissionAttempts))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 158, Col: 111}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 159, Col: 111}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "</span></td></tr>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "</span></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;\"><button style=\"padding: 6px 12px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;\" class=\"spec-button\" data-gateway-id=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var24 string
+				templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.ObjectMeta.Name)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 165, Col: 61}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "\">View Spec</button></td></tr>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "</tbody></table></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "</tbody></table></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "</div></div><script>\n\t\tfunction toggleDriverInfo(elementId) {\n\t\t\tconst content = document.getElementById(elementId);\n\t\t\tconst toggle = document.getElementById(elementId.replace('driver-info-', 'driver-toggle-'));\n\t\t\t\n\t\t\tif (content.style.display === 'none' || content.style.display === '') {\n\t\t\t\tcontent.style.display = 'block';\n\t\t\t\ttoggle.textContent = '▼';\n\t\t\t} else {\n\t\t\t\tcontent.style.display = 'none';\n\t\t\t\ttoggle.textContent = '▶';\n\t\t\t}\n\t\t}\n\t</script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, "</div></div><script>\n\t\tfunction toggleDriverInfo(elementId) {\n\t\t\tconst content = document.getElementById(elementId);\n\t\t\tconst toggle = document.getElementById(elementId.replace('driver-info-', 'driver-toggle-'));\n\t\t\t\n\t\t\tif (content.style.display === 'none' || content.style.display === '') {\n\t\t\t\tcontent.style.display = 'block';\n\t\t\t\ttoggle.textContent = '▼';\n\t\t\t} else {\n\t\t\t\tcontent.style.display = 'none';\n\t\t\t\ttoggle.textContent = '▶';\n\t\t\t}\n\t\t}\n\n\t\tfunction showSpecPopover(gatewayId) {\n\t\t\t// Create overlay if it doesn't exist\n\t\t\tlet overlay = document.getElementById('spec-overlay');\n\t\t\tif (!overlay) {\n\t\t\t\toverlay = document.createElement('div');\n\t\t\t\toverlay.id = 'spec-overlay';\n\t\t\t\toverlay.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; z-index: 1000; justify-content: center; align-items: center;';\n\t\t\t\tdocument.body.appendChild(overlay);\n\t\t\t}\n\n\t\t\t// Create popover if it doesn't exist\n\t\t\tlet popover = document.getElementById('spec-popover');\n\t\t\tif (!popover) {\n\t\t\t\tpopover = document.createElement('div');\n\t\t\t\tpopover.id = 'spec-popover';\n\t\t\t\tpopover.style.cssText = 'background: white; padding: 20px; border-radius: 8px; max-width: 80%; max-height: 80%; overflow: auto; position: relative;';\n\t\t\t\toverlay.appendChild(popover);\n\t\t\t}\n\n\t\t\t// Show loading state\n\t\t\tpopover.innerHTML = '<div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;\">' +\n\t\t\t\t'<h3 style=\"margin: 0;\">Spark Application Spec</h3>' +\n\t\t\t\t'<button onclick=\"hideSpecPopover()\" style=\"background: #dc3545; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer;\">Close</button>' +\n\t\t\t\t'</div><div>Loading...</div>';\n\n\t\t\t// Show the overlay\n\t\t\toverlay.style.display = 'flex';\n\n\t\t\t// Fetch spec data\n\t\t\tfetch('/ui/applications/' + gatewayId + '/spec')\n\t\t\t\t.then(response => response.json())\n\t\t\t\t.then(data => {\n\t\t\t\t\tpopover.innerHTML = '<div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;\">' +\n\t\t\t\t\t\t'<h3 style=\"margin: 0;\">Spark Application Spec</h3>' +\n\t\t\t\t\t\t'<button onclick=\"hideSpecPopover()\" style=\"background: #dc3545; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer;\">Close</button>' +\n\t\t\t\t\t\t'</div>' +\n\t\t\t\t\t\t'<div>' +\n\t\t\t\t\t\t'<h4>YAML Specification:</h4>' +\n\t\t\t\t\t\t'<pre style=\"background: #f8f9fa; padding: 15px; border-radius: 4px; overflow: auto; max-height: 500px; font-size: 12px;\"><code>' + data.spec + '</code></pre>' +\n\t\t\t\t\t\t'</div>';\n\t\t\t\t})\n\t\t\t\t.catch(error => {\n\t\t\t\t\tpopover.innerHTML = '<div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;\">' +\n\t\t\t\t\t\t'<h3 style=\"margin: 0;\">Spark Application Spec</h3>' +\n\t\t\t\t\t\t'<button onclick=\"hideSpecPopover()\" style=\"background: #dc3545; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer;\">Close</button>' +\n\t\t\t\t\t\t'</div>' +\n\t\t\t\t\t\t'<div style=\"color: #dc3545;\">Error loading spec: ' + error.message + '</div>';\n\t\t\t\t});\n\t\t}\n\n\t\tfunction hideSpecPopover() {\n\t\t\tconst overlay = document.getElementById('spec-overlay');\n\t\t\tif (overlay) {\n\t\t\t\toverlay.style.display = 'none';\n\t\t\t}\n\t\t}\n\n\t\t// Event delegation for spec buttons\n\t\tdocument.addEventListener('click', function(event) {\n\t\t\tif (event.target.classList.contains('spec-button')) {\n\t\t\t\tconst gatewayId = event.target.getAttribute('data-gateway-id');\n\t\t\t\tshowSpecPopover(gatewayId);\n\t\t\t}\n\t\t\t\n\t\t\t// Close popover when clicking outside\n\t\t\tconst overlay = document.getElementById('spec-overlay');\n\t\t\tif (overlay && event.target === overlay) {\n\t\t\t\thideSpecPopover();\n\t\t\t}\n\t\t});\n\t</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/internal/gateway/web/handler.go b/internal/gateway/web/handler.go
index 6d3e525..cfb8706 100644
--- a/internal/gateway/web/handler.go
+++ b/internal/gateway/web/handler.go
@@ -5,6 +5,7 @@ import (
 
 	"github.com/a-h/templ/examples/integration-gin/gintemplrenderer"
 	"github.com/gin-gonic/gin"
+	"sigs.k8s.io/yaml"
 
 	"github.com/slackhq/spark-gateway/internal/gateway/application/handler"
 	"github.com/slackhq/spark-gateway/internal/gateway/cluster"
@@ -37,6 +38,7 @@ func (h *WebHandler) RegisterRoutes() {
 	uiGroup.GET("/", h.main)
 	uiGroup.GET("/clusters", h.clusters)
 	uiGroup.GET("/applications", h.applications)
+	uiGroup.GET("/applications/:gatewayId/spec", h.applicationSpec)
 
 }
 
@@ -112,3 +114,32 @@ func (h *WebHandler) applications(c *gin.Context) {
 		c.Render(http.StatusOK, r)
 	}
 }
+
+func (h *WebHandler) applicationSpec(c *gin.Context) {
+	gatewayId := c.Param("gatewayId")
+	if gatewayId == "" {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "gatewayId is required"})
+		return
+	}
+
+	// Get the full application data using the service
+	gatewayApp, err := h.gatewayApplicationService.Get(c, gatewayId)
+	if err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+		return
+	}
+
+	// Convert SparkApplication to YAML
+	yamlData, err := yaml.Marshal(gatewayApp.SparkApplication)
+	if err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to marshal application to YAML"})
+		return
+	}
+
+	// Return YAML spec only
+	response := gin.H{
+		"spec": string(yamlData),
+	}
+
+	c.JSON(http.StatusOK, response)
+}

From c39882fccb052e994045d18761dfa4c8266eaf0a Mon Sep 17 00:00:00 2001
From: jigar-bhalodia <bhalodia.jigar@gmail.com>
Date: Tue, 2 Sep 2025 08:05:24 -0700
Subject: [PATCH 12/14] Move applications to main page

---
 internal/gateway/web/app/main.templ           | 319 ++++++++++--
 internal/gateway/web/app/main_templ.go        | 461 +++++++++++++++++-
 internal/gateway/web/components/header.templ  |  13 -
 .../gateway/web/components/header_templ.go    |   2 +-
 internal/gateway/web/handler.go               |  68 ++-
 5 files changed, 796 insertions(+), 67 deletions(-)

diff --git a/internal/gateway/web/app/main.templ b/internal/gateway/web/app/main.templ
index f25810e..3012654 100644
--- a/internal/gateway/web/app/main.templ
+++ b/internal/gateway/web/app/main.templ
@@ -1,63 +1,290 @@
 package app
 
-templ Main() {
+import (
+	"fmt"
+	"github.com/slackhq/spark-gateway/pkg/model"
+)
+
+type ApplicationCounts struct {
+	Submitted  int
+	Running    int
+	Completed  int
+	Failed     int
+}
+
+templ Main(counts ApplicationCounts, clusters []model.KubeCluster, applications []*model.GatewayApplicationMeta, selectedCluster, selectedNamespace string, namespaces []model.KubeNamespace) {
 	@Layout("Spark Gateway") {
-		@MainContent()
+		@MainContent(counts, clusters, applications, selectedCluster, selectedNamespace, namespaces)
 	}
 }
 
-templ MainContent() {
+templ MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applications []*model.GatewayApplicationMeta, selectedCluster, selectedNamespace string, namespaces []model.KubeNamespace) {
 	<div id="main-content">
 		<div style="margin-bottom: 30px;">
 			<h1 style="font-size: 28px; font-weight: 600; color: #333; margin-bottom: 10px;">Welcome to Spark Gateway</h1>
-			<p style="color: #666; font-size: 16px;">Monitor and manage your Spark applications and clusters</p>
+			<p style="color: #666; font-size: 16px;">Monitor and manage your Spark applications</p>
 		</div>
 		
-		<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px;">
-			<div style="background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9;">
-				<h3 style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 10px;">Active Clusters</h3>
-				<p style="font-size: 24px; font-weight: 700; color: #007bff;">3</p>
-				<p style="color: #666; font-size: 14px;">Currently running</p>
-			</div>
-			
-			<div style="background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9;">
-				<h3 style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 10px;">Running Jobs</h3>
-				<p style="font-size: 24px; font-weight: 700; color: #28a745;">12</p>
-				<p style="color: #666; font-size: 14px;">Currently processing</p>
-			</div>
-			
-			<div style="background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9;">
-				<h3 style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 10px;">Applications</h3>
-				<p style="font-size: 24px; font-weight: 700; color: #6f42c1;">8</p>
-				<p style="color: #666; font-size: 14px;">Deployed applications</p>
+		<div style="background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9; margin-bottom: 20px;">
+			<h3 style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px;">Application Status</h3>
+			<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px;">
+				<div style="text-align: center; padding: 10px;">
+					<p style="font-size: 20px; font-weight: 700; color: #ffc107; margin: 0;">{ fmt.Sprintf("%d", counts.Submitted) }</p>
+					<p style="color: #666; font-size: 12px; margin: 5px 0 0 0;">Submitted</p>
+				</div>
+				<div style="text-align: center; padding: 10px;">
+					<p style="font-size: 20px; font-weight: 700; color: #28a745; margin: 0;">{ fmt.Sprintf("%d", counts.Running) }</p>
+					<p style="color: #666; font-size: 12px; margin: 5px 0 0 0;">Running</p>
+				</div>
+				<div style="text-align: center; padding: 10px;">
+					<p style="font-size: 20px; font-weight: 700; color: #007bff; margin: 0;">{ fmt.Sprintf("%d", counts.Completed) }</p>
+					<p style="color: #666; font-size: 12px; margin: 5px 0 0 0;">Completed</p>
+				</div>
+				<div style="text-align: center; padding: 10px;">
+					<p style="font-size: 20px; font-weight: 700; color: #dc3545; margin: 0;">{ fmt.Sprintf("%d", counts.Failed) }</p>
+					<p style="color: #666; font-size: 12px; margin: 5px 0 0 0;">Failed</p>
+				</div>
 			</div>
 		</div>
 		
-		<div style="background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9;">
-			<h3 style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px;">Quick Actions</h3>
-			<div style="display: flex; gap: 10px; flex-wrap: wrap;">
-				<button 
-					style="padding: 10px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;"
-					hx-get="/ui/clusters/new"
-					hx-target="#main-content"
-				>
-					New Cluster
-				</button>
-				<button 
-					style="padding: 10px 16px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;"
-					hx-get="/ui/jobs/submit"
-					hx-target="#main-content"
-				>
-					Submit Job
-				</button>
-				<button 
-					style="padding: 10px 16px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;"
-					hx-get="/ui/monitoring"
-					hx-target="#main-content"
-				>
-					View Monitoring
-				</button>
-			</div>
+		<div style="background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9; margin-bottom: 20px;">
+			<h3 style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px;">Filters</h3>
+			<form style="display: flex; flex-direction: column; gap: 15px;">
+				<div>
+					<label style="display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;">Cluster</label>
+					<select 
+						name="cluster" 
+						id="cluster-select"
+						style="width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;"
+						hx-get="/ui/"
+						hx-target="#main-content"
+						hx-trigger="change"
+						hx-include="[name='namespace']"
+					>
+						<option value="">Select a cluster...</option>
+						for _, cluster := range clusters {
+							<option value={ cluster.Name } selected?={ cluster.Name == selectedCluster }>{ cluster.Name }</option>
+						}
+					</select>
+				</div>
+				
+				<div>
+					<label style="display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;">Namespace</label>
+					<select 
+						name="namespace"
+						id="namespace-select"
+						style="width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;"
+						disabled?={ selectedCluster == "" }
+						hx-get="/ui/"
+						hx-target="#main-content"
+						hx-trigger="change"
+						hx-include="[name='cluster']"
+					>
+						<option value="">Select a namespace...</option>
+						for _, namespace := range namespaces {
+							<option value={ namespace.Name } selected?={ namespace.Name == selectedNamespace }>{ namespace.Name }</option>
+						}
+					</select>
+				</div>
+				
+				<div>
+					<button 
+						type="button"
+						style="padding: 8px 16px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; width: fit-content;"
+						hx-get="/ui/"
+						hx-target="#main-content"
+						onclick="document.getElementById('cluster-select').value = ''; document.getElementById('namespace-select').value = '';"
+					>
+						Clear
+					</button>
+				</div>
+			</form>
+		</div>
+		
+		<div style="background: white; border-radius: 8px; border: 1px solid #e1e5e9; overflow: hidden;">
+			if selectedCluster == "" {
+				<div style="padding: 40px; text-align: center;">
+					<p style="color: #666; font-size: 16px;">Please select a cluster to view applications</p>
+				</div>
+			} else if selectedNamespace == "" {
+				<div style="padding: 40px; text-align: center;">
+					<p style="color: #666; font-size: 16px;">Please select a namespace to view applications</p>
+				</div>
+			} else if len(applications) == 0 {
+				<div style="padding: 40px; text-align: center;">
+					<p style="color: #666; font-size: 16px;">No applications found in { selectedCluster }/{ selectedNamespace }</p>
+				</div>
+			} else {
+				<div style="overflow-x: auto;">
+					<table style="width: 100%; border-collapse: collapse; min-width: 1500px;">
+						<thead style="background-color: #f8f9fa; border-bottom: 2px solid #e1e5e9;">
+							<tr>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Name</th>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Spark App ID</th>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Submission Time</th>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Termination Time</th>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">User</th>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Driver Info</th>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">App State</th>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Submission Attempts</th>
+								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Spec</th>
+							</tr>
+						</thead>
+						<tbody>
+							for i, app := range applications {
+								<tr style={ templ.KV("background-color", getRowColor(i)) }>
+									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+										<div style="font-weight: 500; color: #333;">{ app.SparkAppMeta.ObjectMeta.Name }</div>
+									</td>
+									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+										<code style="background: #f8f9fa; padding: 2px 6px; border-radius: 3px; font-size: 12px;">{ app.SparkAppMeta.SparkApplicationID }</code>
+									</td>
+									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+										<div style="font-size: 14px; color: #333;">{ formatTime(app.SparkAppMeta.LastSubmissionAttemptTime.Time) }</div>
+									</td>
+									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+										<div style="font-size: 14px; color: #333;">{ formatTime(app.SparkAppMeta.TerminationTime.Time) }</div>
+									</td>
+                                    <td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+                                        <div style="font-size: 14px; color: #333;">{ app.User }</div>
+                                    </td>
+									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+										if app.SparkAppMeta.DriverInfo.PodName != "" || app.SparkAppMeta.DriverInfo.WebUIIngressAddress != "" {
+											<div 
+												style="cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; font-size: 14px; color: #007bff;"
+												data-target={ "driver-info-" + fmt.Sprintf("%d", i) }
+												onclick="toggleDriverInfo(this.getAttribute('data-target'))"
+											>
+												<span id={ "driver-toggle-" + fmt.Sprintf("%d", i) } style="font-size: 12px;">▶</span>
+												<span>Driver Info</span>
+											</div>
+											<div 
+												id={ "driver-info-" + fmt.Sprintf("%d", i) }
+												style="display: none; margin-top: 8px; padding: 8px; background: #f8f9fa; border-radius: 4px; font-size: 13px;"
+											>
+												if app.SparkAppMeta.DriverInfo.PodName != "" {
+													<div style="margin-bottom: 4px;">
+														<strong>Pod Name:</strong> { app.SparkAppMeta.DriverInfo.PodName }
+													</div>
+												}
+												if app.SparkAppMeta.DriverInfo.WebUIIngressAddress != "" {
+													<div>
+														<strong>Ingress Address:</strong> { app.SparkAppMeta.DriverInfo.WebUIIngressAddress }
+													</div>
+												}
+											</div>
+										} else {
+											<span style="color: #6c757d; font-style: italic;">No driver info</span>
+										}
+									</td>
+									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
+										<span style={ "background: " + getStateColor(formatAppState(app.SparkAppMeta.AppState)) + "; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500;" }>
+											{ formatAppState(app.SparkAppMeta.AppState) }
+										</span>
+									</td>
+									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;">
+										<span style="font-weight: 500; color: #333;">{ fmt.Sprintf("%d", app.SparkAppMeta.SubmissionAttempts) }</span>
+									</td>
+									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;">
+										<button 
+											style="padding: 6px 12px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;"
+											class="spec-button"
+											data-gateway-id={ app.SparkAppMeta.ObjectMeta.Name }
+										>
+											View Spec
+										</button>
+									</td>
+								</tr>
+							}
+						</tbody>
+					</table>
+				</div>
+			}
 		</div>
 	</div>
+	<script>
+		function toggleDriverInfo(elementId) {
+			const content = document.getElementById(elementId);
+			const toggle = document.getElementById(elementId.replace('driver-info-', 'driver-toggle-'));
+			
+			if (content.style.display === 'none' || content.style.display === '') {
+				content.style.display = 'block';
+				toggle.textContent = '▼';
+			} else {
+				content.style.display = 'none';
+				toggle.textContent = '▶';
+			}
+		}
+
+		function showSpecPopover(gatewayId) {
+			// Create overlay if it doesn't exist
+			let overlay = document.getElementById('spec-overlay');
+			if (!overlay) {
+				overlay = document.createElement('div');
+				overlay.id = 'spec-overlay';
+				overlay.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; z-index: 1000; justify-content: center; align-items: center;';
+				document.body.appendChild(overlay);
+			}
+
+			// Create popover if it doesn't exist
+			let popover = document.getElementById('spec-popover');
+			if (!popover) {
+				popover = document.createElement('div');
+				popover.id = 'spec-popover';
+				popover.style.cssText = 'background: white; padding: 20px; border-radius: 8px; max-width: 80%; max-height: 80%; overflow: auto; position: relative;';
+				overlay.appendChild(popover);
+			}
+
+			// Show loading state
+			popover.innerHTML = '<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">' +
+				'<h3 style="margin: 0;">Spark Application Spec</h3>' +
+				'<button onclick="hideSpecPopover()" style="background: #dc3545; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer;">Close</button>' +
+				'</div><div>Loading...</div>';
+
+			// Show the overlay
+			overlay.style.display = 'flex';
+
+			// Fetch spec data
+			fetch('/ui/applications/' + gatewayId + '/spec')
+				.then(response => response.json())
+				.then(data => {
+					popover.innerHTML = '<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">' +
+						'<h3 style="margin: 0;">Spark Application Spec</h3>' +
+						'<button onclick="hideSpecPopover()" style="background: #dc3545; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer;">Close</button>' +
+						'</div>' +
+						'<div>' +
+						'<h4>YAML Specification:</h4>' +
+						'<pre style="background: #f8f9fa; padding: 15px; border-radius: 4px; overflow: auto; max-height: 500px; font-size: 12px;"><code>' + data.spec + '</code></pre>' +
+						'</div>';
+				})
+				.catch(error => {
+					popover.innerHTML = '<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">' +
+						'<h3 style="margin: 0;">Spark Application Spec</h3>' +
+						'<button onclick="hideSpecPopover()" style="background: #dc3545; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer;">Close</button>' +
+						'</div>' +
+						'<div style="color: #dc3545;">Error loading spec: ' + error.message + '</div>';
+				});
+		}
+
+		function hideSpecPopover() {
+			const overlay = document.getElementById('spec-overlay');
+			if (overlay) {
+				overlay.style.display = 'none';
+			}
+		}
+
+		// Event delegation for spec buttons
+		document.addEventListener('click', function(event) {
+			if (event.target.classList.contains('spec-button')) {
+				const gatewayId = event.target.getAttribute('data-gateway-id');
+				showSpecPopover(gatewayId);
+			}
+			
+			// Close popover when clicking outside
+			const overlay = document.getElementById('spec-overlay');
+			if (overlay && event.target === overlay) {
+				hideSpecPopover();
+			}
+		});
+	</script>
 }
diff --git a/internal/gateway/web/app/main_templ.go b/internal/gateway/web/app/main_templ.go
index f058132..a60b023 100644
--- a/internal/gateway/web/app/main_templ.go
+++ b/internal/gateway/web/app/main_templ.go
@@ -8,7 +8,19 @@ package app
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
-func Main() templ.Component {
+import (
+	"fmt"
+	"github.com/slackhq/spark-gateway/pkg/model"
+)
+
+type ApplicationCounts struct {
+	Submitted int
+	Running   int
+	Completed int
+	Failed    int
+}
+
+func Main(counts ApplicationCounts, clusters []model.KubeCluster, applications []*model.GatewayApplicationMeta, selectedCluster, selectedNamespace string, namespaces []model.KubeNamespace) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -41,7 +53,7 @@ func Main() templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = MainContent().Render(ctx, templ_7745c5c3_Buffer)
+			templ_7745c5c3_Err = MainContent(counts, clusters, applications, selectedCluster, selectedNamespace, namespaces).Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -55,7 +67,7 @@ func Main() templ.Component {
 	})
 }
 
-func MainContent() templ.Component {
+func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applications []*model.GatewayApplicationMeta, selectedCluster, selectedNamespace string, namespaces []model.KubeNamespace) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -76,7 +88,448 @@ func MainContent() templ.Component {
 			templ_7745c5c3_Var3 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"main-content\"><div style=\"margin-bottom: 30px;\"><h1 style=\"font-size: 28px; font-weight: 600; color: #333; margin-bottom: 10px;\">Welcome to Spark Gateway</h1><p style=\"color: #666; font-size: 16px;\">Monitor and manage your Spark applications and clusters</p></div><div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px;\"><div style=\"background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9;\"><h3 style=\"font-size: 18px; font-weight: 600; color: #333; margin-bottom: 10px;\">Active Clusters</h3><p style=\"font-size: 24px; font-weight: 700; color: #007bff;\">3</p><p style=\"color: #666; font-size: 14px;\">Currently running</p></div><div style=\"background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9;\"><h3 style=\"font-size: 18px; font-weight: 600; color: #333; margin-bottom: 10px;\">Running Jobs</h3><p style=\"font-size: 24px; font-weight: 700; color: #28a745;\">12</p><p style=\"color: #666; font-size: 14px;\">Currently processing</p></div><div style=\"background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9;\"><h3 style=\"font-size: 18px; font-weight: 600; color: #333; margin-bottom: 10px;\">Applications</h3><p style=\"font-size: 24px; font-weight: 700; color: #6f42c1;\">8</p><p style=\"color: #666; font-size: 14px;\">Deployed applications</p></div></div><div style=\"background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9;\"><h3 style=\"font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px;\">Quick Actions</h3><div style=\"display: flex; gap: 10px; flex-wrap: wrap;\"><button style=\"padding: 10px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;\" hx-get=\"/ui/clusters/new\" hx-target=\"#main-content\">New Cluster</button> <button style=\"padding: 10px 16px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;\" hx-get=\"/ui/jobs/submit\" hx-target=\"#main-content\">Submit Job</button> <button style=\"padding: 10px 16px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;\" hx-get=\"/ui/monitoring\" hx-target=\"#main-content\">View Monitoring</button></div></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"main-content\"><div style=\"margin-bottom: 30px;\"><h1 style=\"font-size: 28px; font-weight: 600; color: #333; margin-bottom: 10px;\">Welcome to Spark Gateway</h1><p style=\"color: #666; font-size: 16px;\">Monitor and manage your Spark applications</p></div><div style=\"background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9; margin-bottom: 20px;\"><h3 style=\"font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px;\">Application Status</h3><div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px;\"><div style=\"text-align: center; padding: 10px;\"><p style=\"font-size: 20px; font-weight: 700; color: #ffc107; margin: 0;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", counts.Submitted))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 32, Col: 115}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</p><p style=\"color: #666; font-size: 12px; margin: 5px 0 0 0;\">Submitted</p></div><div style=\"text-align: center; padding: 10px;\"><p style=\"font-size: 20px; font-weight: 700; color: #28a745; margin: 0;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", counts.Running))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 36, Col: 113}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</p><p style=\"color: #666; font-size: 12px; margin: 5px 0 0 0;\">Running</p></div><div style=\"text-align: center; padding: 10px;\"><p style=\"font-size: 20px; font-weight: 700; color: #007bff; margin: 0;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", counts.Completed))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 40, Col: 115}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</p><p style=\"color: #666; font-size: 12px; margin: 5px 0 0 0;\">Completed</p></div><div style=\"text-align: center; padding: 10px;\"><p style=\"font-size: 20px; font-weight: 700; color: #dc3545; margin: 0;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", counts.Failed))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 44, Col: 112}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</p><p style=\"color: #666; font-size: 12px; margin: 5px 0 0 0;\">Failed</p></div></div></div><div style=\"background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9; margin-bottom: 20px;\"><h3 style=\"font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px;\">Filters</h3><form style=\"display: flex; flex-direction: column; gap: 15px;\"><div><label style=\"display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;\">Cluster</label> <select name=\"cluster\" id=\"cluster-select\" style=\"width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;\" hx-get=\"/ui/\" hx-target=\"#main-content\" hx-trigger=\"change\" hx-include=\"[name='namespace']\"><option value=\"\">Select a cluster...</option> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, cluster := range clusters {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<option value=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var8 string
+			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(cluster.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 66, Col: 35}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if cluster.Name == selectedCluster {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, " selected")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, ">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var9 string
+			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(cluster.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 66, Col: 98}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</option>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</select></div><div><label style=\"display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;\">Namespace</label> <select name=\"namespace\" id=\"namespace-select\" style=\"width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if selectedCluster == "" {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " disabled")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, " hx-get=\"/ui/\" hx-target=\"#main-content\" hx-trigger=\"change\" hx-include=\"[name='cluster']\"><option value=\"\">Select a namespace...</option> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, namespace := range namespaces {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "<option value=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var10 string
+			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(namespace.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 85, Col: 37}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if namespace.Name == selectedNamespace {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, " selected")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, ">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var11 string
+			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(namespace.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 85, Col: 106}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</option>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</select></div><div><button type=\"button\" style=\"padding: 8px 16px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; width: fit-content;\" hx-get=\"/ui/\" hx-target=\"#main-content\" onclick=\"document.getElementById('cluster-select').value = ''; document.getElementById('namespace-select').value = '';\">Clear</button></div></form></div><div style=\"background: white; border-radius: 8px; border: 1px solid #e1e5e9; overflow: hidden;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if selectedCluster == "" {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "<div style=\"padding: 40px; text-align: center;\"><p style=\"color: #666; font-size: 16px;\">Please select a cluster to view applications</p></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else if selectedNamespace == "" {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<div style=\"padding: 40px; text-align: center;\"><p style=\"color: #666; font-size: 16px;\">Please select a namespace to view applications</p></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else if len(applications) == 0 {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<div style=\"padding: 40px; text-align: center;\"><p style=\"color: #666; font-size: 16px;\">No applications found in ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var12 string
+			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(selectedCluster)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 115, Col: 88}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "/")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var13 string
+			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(selectedNamespace)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 115, Col: 110}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</p></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<div style=\"overflow-x: auto;\"><table style=\"width: 100%; border-collapse: collapse; min-width: 1500px;\"><thead style=\"background-color: #f8f9fa; border-bottom: 2px solid #e1e5e9;\"><tr><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Name</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Spark App ID</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Termination Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">User</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Driver Info</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">App State</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Attempts</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Spec</th></tr></thead> <tbody>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for i, app := range applications {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "<tr style=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var14 string
+				templ_7745c5c3_Var14, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues(templ.KV("background-color", getRowColor(i)))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 135, Col: 64}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "\"><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"font-weight: 500; color: #333;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var15 string
+				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.ObjectMeta.Name)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 137, Col: 88}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><code style=\"background: #f8f9fa; padding: 2px 6px; border-radius: 3px; font-size: 12px;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var16 string
+				templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.SparkApplicationID)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 140, Col: 137}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</code></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"font-size: 14px; color: #333;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var17 string
+				templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(formatTime(app.SparkAppMeta.LastSubmissionAttemptTime.Time))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 143, Col: 114}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"font-size: 14px; color: #333;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var18 string
+				templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(formatTime(app.SparkAppMeta.TerminationTime.Time))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 146, Col: 104}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"font-size: 14px; color: #333;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var19 string
+				templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(app.User)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 149, Col: 93}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				if app.SparkAppMeta.DriverInfo.PodName != "" || app.SparkAppMeta.DriverInfo.WebUIIngressAddress != "" {
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "<div style=\"cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; font-size: 14px; color: #007bff;\" data-target=\"")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var20 string
+					templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs("driver-info-" + fmt.Sprintf("%d", i))
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 155, Col: 63}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "\" onclick=\"toggleDriverInfo(this.getAttribute('data-target'))\"><span id=\"")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var21 string
+					templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs("driver-toggle-" + fmt.Sprintf("%d", i))
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 158, Col: 62}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "\" style=\"font-size: 12px;\">▶</span> <span>Driver Info</span></div><div id=\"")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var22 string
+					templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs("driver-info-" + fmt.Sprintf("%d", i))
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 162, Col: 54}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "\" style=\"display: none; margin-top: 8px; padding: 8px; background: #f8f9fa; border-radius: 4px; font-size: 13px;\">")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					if app.SparkAppMeta.DriverInfo.PodName != "" {
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "<div style=\"margin-bottom: 4px;\"><strong>Pod Name:</strong> ")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var23 string
+						templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.PodName)
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 167, Col: 78}
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "</div>")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+					}
+					if app.SparkAppMeta.DriverInfo.WebUIIngressAddress != "" {
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "<div><strong>Ingress Address:</strong> ")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var24 string
+						templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.WebUIIngressAddress)
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 172, Col: 97}
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "</div>")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "</div>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+				} else {
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "<span style=\"color: #6c757d; font-style: italic;\">No driver info</span>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "</td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><span style=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var25 string
+				templ_7745c5c3_Var25, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("background: " + getStateColor(formatAppState(app.SparkAppMeta.AppState)) + "; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500;")
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 181, Col: 191}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var26 string
+				templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(formatAppState(app.SparkAppMeta.AppState))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 182, Col: 54}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, "</span></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;\"><span style=\"font-weight: 500; color: #333;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var27 string
+				templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", app.SparkAppMeta.SubmissionAttempts))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 186, Col: 111}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 46, "</span></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;\"><button style=\"padding: 6px 12px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;\" class=\"spec-button\" data-gateway-id=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var28 string
+				templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.ObjectMeta.Name)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 192, Col: 61}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 47, "\">View Spec</button></td></tr>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 48, "</tbody></table></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 49, "</div></div><script>\n\t\tfunction toggleDriverInfo(elementId) {\n\t\t\tconst content = document.getElementById(elementId);\n\t\t\tconst toggle = document.getElementById(elementId.replace('driver-info-', 'driver-toggle-'));\n\t\t\t\n\t\t\tif (content.style.display === 'none' || content.style.display === '') {\n\t\t\t\tcontent.style.display = 'block';\n\t\t\t\ttoggle.textContent = '▼';\n\t\t\t} else {\n\t\t\t\tcontent.style.display = 'none';\n\t\t\t\ttoggle.textContent = '▶';\n\t\t\t}\n\t\t}\n\n\t\tfunction showSpecPopover(gatewayId) {\n\t\t\t// Create overlay if it doesn't exist\n\t\t\tlet overlay = document.getElementById('spec-overlay');\n\t\t\tif (!overlay) {\n\t\t\t\toverlay = document.createElement('div');\n\t\t\t\toverlay.id = 'spec-overlay';\n\t\t\t\toverlay.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; z-index: 1000; justify-content: center; align-items: center;';\n\t\t\t\tdocument.body.appendChild(overlay);\n\t\t\t}\n\n\t\t\t// Create popover if it doesn't exist\n\t\t\tlet popover = document.getElementById('spec-popover');\n\t\t\tif (!popover) {\n\t\t\t\tpopover = document.createElement('div');\n\t\t\t\tpopover.id = 'spec-popover';\n\t\t\t\tpopover.style.cssText = 'background: white; padding: 20px; border-radius: 8px; max-width: 80%; max-height: 80%; overflow: auto; position: relative;';\n\t\t\t\toverlay.appendChild(popover);\n\t\t\t}\n\n\t\t\t// Show loading state\n\t\t\tpopover.innerHTML = '<div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;\">' +\n\t\t\t\t'<h3 style=\"margin: 0;\">Spark Application Spec</h3>' +\n\t\t\t\t'<button onclick=\"hideSpecPopover()\" style=\"background: #dc3545; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer;\">Close</button>' +\n\t\t\t\t'</div><div>Loading...</div>';\n\n\t\t\t// Show the overlay\n\t\t\toverlay.style.display = 'flex';\n\n\t\t\t// Fetch spec data\n\t\t\tfetch('/ui/applications/' + gatewayId + '/spec')\n\t\t\t\t.then(response => response.json())\n\t\t\t\t.then(data => {\n\t\t\t\t\tpopover.innerHTML = '<div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;\">' +\n\t\t\t\t\t\t'<h3 style=\"margin: 0;\">Spark Application Spec</h3>' +\n\t\t\t\t\t\t'<button onclick=\"hideSpecPopover()\" style=\"background: #dc3545; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer;\">Close</button>' +\n\t\t\t\t\t\t'</div>' +\n\t\t\t\t\t\t'<div>' +\n\t\t\t\t\t\t'<h4>YAML Specification:</h4>' +\n\t\t\t\t\t\t'<pre style=\"background: #f8f9fa; padding: 15px; border-radius: 4px; overflow: auto; max-height: 500px; font-size: 12px;\"><code>' + data.spec + '</code></pre>' +\n\t\t\t\t\t\t'</div>';\n\t\t\t\t})\n\t\t\t\t.catch(error => {\n\t\t\t\t\tpopover.innerHTML = '<div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;\">' +\n\t\t\t\t\t\t'<h3 style=\"margin: 0;\">Spark Application Spec</h3>' +\n\t\t\t\t\t\t'<button onclick=\"hideSpecPopover()\" style=\"background: #dc3545; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer;\">Close</button>' +\n\t\t\t\t\t\t'</div>' +\n\t\t\t\t\t\t'<div style=\"color: #dc3545;\">Error loading spec: ' + error.message + '</div>';\n\t\t\t\t});\n\t\t}\n\n\t\tfunction hideSpecPopover() {\n\t\t\tconst overlay = document.getElementById('spec-overlay');\n\t\t\tif (overlay) {\n\t\t\t\toverlay.style.display = 'none';\n\t\t\t}\n\t\t}\n\n\t\t// Event delegation for spec buttons\n\t\tdocument.addEventListener('click', function(event) {\n\t\t\tif (event.target.classList.contains('spec-button')) {\n\t\t\t\tconst gatewayId = event.target.getAttribute('data-gateway-id');\n\t\t\t\tshowSpecPopover(gatewayId);\n\t\t\t}\n\t\t\t\n\t\t\t// Close popover when clicking outside\n\t\t\tconst overlay = document.getElementById('spec-overlay');\n\t\t\tif (overlay && event.target === overlay) {\n\t\t\t\thideSpecPopover();\n\t\t\t}\n\t\t});\n\t</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/internal/gateway/web/components/header.templ b/internal/gateway/web/components/header.templ
index 07a35d3..b4eb3a9 100644
--- a/internal/gateway/web/components/header.templ
+++ b/internal/gateway/web/components/header.templ
@@ -6,19 +6,6 @@ templ Header() {
 			<div style="display: flex; align-items: center;">
 				<h1 style="font-size: 20px; font-weight: 600; color: #333;">Spark Gateway</h1>
 			</div>
-			<div style="display: flex; align-items: center; gap: 15px;">
-				<button 
-					style="padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;"
-					hx-get="/ui/refresh"
-					hx-trigger="click"
-					hx-target="#main-content"
-				>
-					Refresh
-				</button>
-				<div style="width: 32px; height: 32px; background: #6c757d; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600;">
-					U
-				</div>
-			</div>
 		</div>
 	</header>
 }
\ No newline at end of file
diff --git a/internal/gateway/web/components/header_templ.go b/internal/gateway/web/components/header_templ.go
index 4ed6bd0..9772f36 100644
--- a/internal/gateway/web/components/header_templ.go
+++ b/internal/gateway/web/components/header_templ.go
@@ -29,7 +29,7 @@ func Header() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<header class=\"header\"><div style=\"display: flex; align-items: center; width: 100%; justify-content: space-between;\"><div style=\"display: flex; align-items: center;\"><h1 style=\"font-size: 20px; font-weight: 600; color: #333;\">Spark Gateway</h1></div><div style=\"display: flex; align-items: center; gap: 15px;\"><button style=\"padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;\" hx-get=\"/ui/refresh\" hx-trigger=\"click\" hx-target=\"#main-content\">Refresh</button><div style=\"width: 32px; height: 32px; background: #6c757d; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600;\">U</div></div></div></header>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<header class=\"header\"><div style=\"display: flex; align-items: center; width: 100%; justify-content: space-between;\"><div style=\"display: flex; align-items: center;\"><h1 style=\"font-size: 20px; font-weight: 600; color: #333;\">Spark Gateway</h1></div></div></header>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/internal/gateway/web/handler.go b/internal/gateway/web/handler.go
index cfb8706..ec8458a 100644
--- a/internal/gateway/web/handler.go
+++ b/internal/gateway/web/handler.go
@@ -5,6 +5,7 @@ import (
 
 	"github.com/a-h/templ/examples/integration-gin/gintemplrenderer"
 	"github.com/gin-gonic/gin"
+	"github.com/kubeflow/spark-operator/v2/api/v1beta2"
 	"sigs.k8s.io/yaml"
 
 	"github.com/slackhq/spark-gateway/internal/gateway/application/handler"
@@ -43,15 +44,76 @@ func (h *WebHandler) RegisterRoutes() {
 }
 
 func (h *WebHandler) main(c *gin.Context) {
+	clusters, err := h.localClusterRepo.GetAll()
+	if err != nil {
+		c.Error(err)
+		return
+	}
+
+	selectedCluster := c.Query("cluster")
+	selectedNamespace := c.Query("namespace")
+
+	var applications []*model.GatewayApplicationMeta
+	var namespaces []model.KubeNamespace
+
+	// Get applications if both cluster and namespace are selected
+	if selectedCluster != "" && selectedNamespace != "" {
+		applications, err = h.gatewayApplicationService.List(c, selectedCluster, selectedNamespace, nil)
+		if err != nil {
+			c.Error(err)
+			return
+		}
+	}
+
+	// Get namespaces if cluster is selected
+	if selectedCluster != "" {
+		for _, cluster := range clusters {
+			if cluster.Name == selectedCluster {
+				namespaces = cluster.Namespaces
+				break
+			}
+		}
+	}
+
+	// Get counts of applications in different states across all clusters
+	counts := app.ApplicationCounts{}
+	if err == nil {
+		// Define the states we want to count
+		states := map[string]v1beta2.ApplicationStateType{
+			"submitted": v1beta2.ApplicationStateSubmitted,
+			"running":   v1beta2.ApplicationStateRunning,
+			"completed": v1beta2.ApplicationStateCompleted,
+			"failed":    v1beta2.ApplicationStateFailed,
+		}
+
+		for _, cluster := range clusters {
+			for _, namespace := range cluster.Namespaces {
+				for stateName, state := range states {
+					apps, err := h.gatewayApplicationService.List(c, cluster.Name, namespace.Name, &state)
+					if err == nil {
+						switch stateName {
+						case "submitted":
+							counts.Submitted += len(apps)
+						case "running":
+							counts.Running += len(apps)
+						case "completed":
+							counts.Completed += len(apps)
+						case "failed":
+							counts.Failed += len(apps)
+						}
+					}
+				}
+			}
+		}
+	}
 
 	if c.GetHeader("HX-Request") == "true" {
-		r := gintemplrenderer.New(c, http.StatusOK, app.MainContent())
+		r := gintemplrenderer.New(c, http.StatusOK, app.MainContent(counts, clusters, applications, selectedCluster, selectedNamespace, namespaces))
 		c.Render(http.StatusOK, r)
 	} else {
-		r := gintemplrenderer.New(c, http.StatusOK, app.Main())
+		r := gintemplrenderer.New(c, http.StatusOK, app.Main(counts, clusters, applications, selectedCluster, selectedNamespace, namespaces))
 		c.Render(http.StatusOK, r)
 	}
-
 }
 
 func (h *WebHandler) clusters(c *gin.Context) {

From dc9522a2f2daa9020a048229f3dfdfc0ef2e6265 Mon Sep 17 00:00:00 2001
From: jigar-bhalodia <bhalodia.jigar@gmail.com>
Date: Tue, 2 Sep 2025 08:19:20 -0700
Subject: [PATCH 13/14] Consolidate pages

---
 internal/gateway/web/app/applications.templ   | 297 ----------
 .../gateway/web/app/applications_templ.go     | 517 ------------------
 internal/gateway/web/app/main.templ           |  36 ++
 internal/gateway/web/app/main_templ.go        |  86 ++-
 internal/gateway/web/components/sidebar.templ |  18 +-
 .../gateway/web/components/sidebar_templ.go   |   2 +-
 internal/gateway/web/handler.go               |  44 --
 7 files changed, 99 insertions(+), 901 deletions(-)
 delete mode 100644 internal/gateway/web/app/applications.templ
 delete mode 100644 internal/gateway/web/app/applications_templ.go

diff --git a/internal/gateway/web/app/applications.templ b/internal/gateway/web/app/applications.templ
deleted file mode 100644
index 38b34d4..0000000
--- a/internal/gateway/web/app/applications.templ
+++ /dev/null
@@ -1,297 +0,0 @@
-package app
-
-import (
-	"fmt"
-	"time"
-	"github.com/slackhq/spark-gateway/pkg/model"
-	"github.com/kubeflow/spark-operator/v2/api/v1beta2"
-)
-
-templ Applications(clusters []model.KubeCluster, applications []*model.GatewayApplicationMeta, selectedCluster, selectedNamespace string, namespaces []model.KubeNamespace) {
-	@Layout("Applications - Spark Gateway") {
-		@ApplicationsContent(clusters, applications, selectedCluster, selectedNamespace, namespaces)
-	}
-}
-
-templ ApplicationsContent(clusters []model.KubeCluster, applications []*model.GatewayApplicationMeta, selectedCluster, selectedNamespace string, namespaces []model.KubeNamespace) {
-	<div id="main-content">
-		<div style="margin-bottom: 30px;">
-			<h1 style="font-size: 28px; font-weight: 600; color: #333; margin-bottom: 10px;">Applications</h1>
-			<p style="color: #666; font-size: 16px;">View your Spark Applications</p>
-		</div>
-		
-		<div style="background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9; margin-bottom: 20px;">
-			<h3 style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px;">Filters</h3>
-			<form style="display: flex; flex-direction: column; gap: 15px;">
-				<div>
-					<label style="display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;">Cluster</label>
-					<select 
-						name="cluster" 
-						id="cluster-select"
-						style="width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;"
-						hx-get="/ui/applications"
-						hx-target="#main-content"
-						hx-trigger="change"
-						hx-include="[name='namespace']"
-					>
-						<option value="">Select a cluster...</option>
-						for _, cluster := range clusters {
-							<option value={ cluster.Name } selected?={ cluster.Name == selectedCluster }>{ cluster.Name }</option>
-						}
-					</select>
-				</div>
-				
-				<div>
-					<label style="display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;">Namespace</label>
-					<select 
-						name="namespace"
-						id="namespace-select"
-						style="width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;"
-						disabled?={ selectedCluster == "" }
-						hx-get="/ui/applications"
-						hx-target="#main-content"
-						hx-trigger="change"
-						hx-include="[name='cluster']"
-					>
-						<option value="">Select a namespace...</option>
-						for _, namespace := range namespaces {
-							<option value={ namespace.Name } selected?={ namespace.Name == selectedNamespace }>{ namespace.Name }</option>
-						}
-					</select>
-				</div>
-				
-				<div>
-					<button 
-						type="button"
-						style="padding: 8px 16px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; width: fit-content;"
-						hx-get="/ui/applications"
-						hx-target="#main-content"
-						onclick="document.getElementById('cluster-select').value = ''; document.getElementById('namespace-select').value = '';"
-					>
-						Clear
-					</button>
-				</div>
-			</form>
-		</div>
-		
-		<div style="background: white; border-radius: 8px; border: 1px solid #e1e5e9; overflow: hidden;">
-			if selectedCluster == "" {
-				<div style="padding: 40px; text-align: center;">
-					<p style="color: #666; font-size: 16px;">Please select a cluster to view applications</p>
-				</div>
-			} else if selectedNamespace == "" {
-				<div style="padding: 40px; text-align: center;">
-					<p style="color: #666; font-size: 16px;">Please select a namespace to view applications</p>
-				</div>
-			} else if len(applications) == 0 {
-				<div style="padding: 40px; text-align: center;">
-					<p style="color: #666; font-size: 16px;">No applications found in { selectedCluster }/{ selectedNamespace }</p>
-				</div>
-			} else {
-				<div style="overflow-x: auto;">
-					<table style="width: 100%; border-collapse: collapse; min-width: 1500px;">
-						<thead style="background-color: #f8f9fa; border-bottom: 2px solid #e1e5e9;">
-							<tr>
-								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Name</th>
-								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Spark App ID</th>
-								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Submission Time</th>
-								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Termination Time</th>
-								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">User</th>
-								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Driver Info</th>
-								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">App State</th>
-								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Submission Attempts</th>
-								<th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;">Spec</th>
-							</tr>
-						</thead>
-						<tbody>
-							for i, app := range applications {
-								<tr style={ templ.KV("background-color", getRowColor(i)) }>
-									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
-										<div style="font-weight: 500; color: #333;">{ app.SparkAppMeta.ObjectMeta.Name }</div>
-									</td>
-									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
-										<code style="background: #f8f9fa; padding: 2px 6px; border-radius: 3px; font-size: 12px;">{ app.SparkAppMeta.SparkApplicationID }</code>
-									</td>
-									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
-										<div style="font-size: 14px; color: #333;">{ formatTime(app.SparkAppMeta.LastSubmissionAttemptTime.Time) }</div>
-									</td>
-									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
-										<div style="font-size: 14px; color: #333;">{ formatTime(app.SparkAppMeta.TerminationTime.Time) }</div>
-									</td>
-                                    <td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
-                                        <div style="font-size: 14px; color: #333;">{ app.User }</div>
-                                    </td>
-									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
-										if app.SparkAppMeta.DriverInfo.PodName != "" || app.SparkAppMeta.DriverInfo.WebUIIngressAddress != "" {
-											<div 
-												style="cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; font-size: 14px; color: #007bff;"
-												data-target={ "driver-info-" + fmt.Sprintf("%d", i) }
-												onclick="toggleDriverInfo(this.getAttribute('data-target'))"
-											>
-												<span id={ "driver-toggle-" + fmt.Sprintf("%d", i) } style="font-size: 12px;">▶</span>
-												<span>Driver Info</span>
-											</div>
-											<div 
-												id={ "driver-info-" + fmt.Sprintf("%d", i) }
-												style="display: none; margin-top: 8px; padding: 8px; background: #f8f9fa; border-radius: 4px; font-size: 13px;"
-											>
-												if app.SparkAppMeta.DriverInfo.PodName != "" {
-													<div style="margin-bottom: 4px;">
-														<strong>Pod Name:</strong> { app.SparkAppMeta.DriverInfo.PodName }
-													</div>
-												}
-												if app.SparkAppMeta.DriverInfo.WebUIIngressAddress != "" {
-													<div>
-														<strong>Ingress Address:</strong> { app.SparkAppMeta.DriverInfo.WebUIIngressAddress }
-													</div>
-												}
-											</div>
-										} else {
-											<span style="color: #6c757d; font-style: italic;">No driver info</span>
-										}
-									</td>
-									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9;">
-										<span style={ "background: " + getStateColor(formatAppState(app.SparkAppMeta.AppState)) + "; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500;" }>
-											{ formatAppState(app.SparkAppMeta.AppState) }
-										</span>
-									</td>
-									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;">
-										<span style="font-weight: 500; color: #333;">{ fmt.Sprintf("%d", app.SparkAppMeta.SubmissionAttempts) }</span>
-									</td>
-									<td style="padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;">
-										<button 
-											style="padding: 6px 12px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;"
-											class="spec-button"
-											data-gateway-id={ app.SparkAppMeta.ObjectMeta.Name }
-										>
-											View Spec
-										</button>
-									</td>
-								</tr>
-							}
-						</tbody>
-					</table>
-				</div>
-			}
-		</div>
-	</div>
-	<script>
-		function toggleDriverInfo(elementId) {
-			const content = document.getElementById(elementId);
-			const toggle = document.getElementById(elementId.replace('driver-info-', 'driver-toggle-'));
-			
-			if (content.style.display === 'none' || content.style.display === '') {
-				content.style.display = 'block';
-				toggle.textContent = '▼';
-			} else {
-				content.style.display = 'none';
-				toggle.textContent = '▶';
-			}
-		}
-
-		function showSpecPopover(gatewayId) {
-			// Create overlay if it doesn't exist
-			let overlay = document.getElementById('spec-overlay');
-			if (!overlay) {
-				overlay = document.createElement('div');
-				overlay.id = 'spec-overlay';
-				overlay.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; z-index: 1000; justify-content: center; align-items: center;';
-				document.body.appendChild(overlay);
-			}
-
-			// Create popover if it doesn't exist
-			let popover = document.getElementById('spec-popover');
-			if (!popover) {
-				popover = document.createElement('div');
-				popover.id = 'spec-popover';
-				popover.style.cssText = 'background: white; padding: 20px; border-radius: 8px; max-width: 80%; max-height: 80%; overflow: auto; position: relative;';
-				overlay.appendChild(popover);
-			}
-
-			// Show loading state
-			popover.innerHTML = '<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">' +
-				'<h3 style="margin: 0;">Spark Application Spec</h3>' +
-				'<button onclick="hideSpecPopover()" style="background: #dc3545; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer;">Close</button>' +
-				'</div><div>Loading...</div>';
-
-			// Show the overlay
-			overlay.style.display = 'flex';
-
-			// Fetch spec data
-			fetch('/ui/applications/' + gatewayId + '/spec')
-				.then(response => response.json())
-				.then(data => {
-					popover.innerHTML = '<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">' +
-						'<h3 style="margin: 0;">Spark Application Spec</h3>' +
-						'<button onclick="hideSpecPopover()" style="background: #dc3545; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer;">Close</button>' +
-						'</div>' +
-						'<div>' +
-						'<h4>YAML Specification:</h4>' +
-						'<pre style="background: #f8f9fa; padding: 15px; border-radius: 4px; overflow: auto; max-height: 500px; font-size: 12px;"><code>' + data.spec + '</code></pre>' +
-						'</div>';
-				})
-				.catch(error => {
-					popover.innerHTML = '<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">' +
-						'<h3 style="margin: 0;">Spark Application Spec</h3>' +
-						'<button onclick="hideSpecPopover()" style="background: #dc3545; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer;">Close</button>' +
-						'</div>' +
-						'<div style="color: #dc3545;">Error loading spec: ' + error.message + '</div>';
-				});
-		}
-
-		function hideSpecPopover() {
-			const overlay = document.getElementById('spec-overlay');
-			if (overlay) {
-				overlay.style.display = 'none';
-			}
-		}
-
-		// Event delegation for spec buttons
-		document.addEventListener('click', function(event) {
-			if (event.target.classList.contains('spec-button')) {
-				const gatewayId = event.target.getAttribute('data-gateway-id');
-				showSpecPopover(gatewayId);
-			}
-			
-			// Close popover when clicking outside
-			const overlay = document.getElementById('spec-overlay');
-			if (overlay && event.target === overlay) {
-				hideSpecPopover();
-			}
-		});
-	</script>
-}
-
-func formatTime(t time.Time) string {
-	if t.IsZero() {
-		return "-"
-	}
-	return t.Format("2006-01-02 15:04:05")
-}
-
-func formatAppState(state v1beta2.ApplicationState) string {
-	return string(state.State)
-}
-
-func getStateColor(state string) string {
-	switch state {
-	case "COMPLETED":
-		return "#28a745"
-	case "RUNNING":
-		return "#007bff"
-	case "FAILED":
-		return "#dc3545"
-	case "PENDING":
-		return "#ffc107"
-	case "SUBMISSION_FAILED":
-		return "#dc3545"
-	case "INVALIDATING":
-		return "#6c757d"
-	case "SUCCEEDING":
-		return "#17a2b8"
-	case "FAILING":
-		return "#fd7e14"
-	default:
-		return "#6c757d"
-	}
-}
\ No newline at end of file
diff --git a/internal/gateway/web/app/applications_templ.go b/internal/gateway/web/app/applications_templ.go
deleted file mode 100644
index 02e699a..0000000
--- a/internal/gateway/web/app/applications_templ.go
+++ /dev/null
@@ -1,517 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.943
-package app
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	"fmt"
-	"github.com/kubeflow/spark-operator/v2/api/v1beta2"
-	"github.com/slackhq/spark-gateway/pkg/model"
-	"time"
-)
-
-func Applications(clusters []model.KubeCluster, applications []*model.GatewayApplicationMeta, selectedCluster, selectedNamespace string, namespaces []model.KubeNamespace) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Var2 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-			templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-			if !templ_7745c5c3_IsBuffer {
-				defer func() {
-					templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-					if templ_7745c5c3_Err == nil {
-						templ_7745c5c3_Err = templ_7745c5c3_BufErr
-					}
-				}()
-			}
-			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = ApplicationsContent(clusters, applications, selectedCluster, selectedNamespace, namespaces).Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			return nil
-		})
-		templ_7745c5c3_Err = Layout("Applications - Spark Gateway").Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-func ApplicationsContent(clusters []model.KubeCluster, applications []*model.GatewayApplicationMeta, selectedCluster, selectedNamespace string, namespaces []model.KubeNamespace) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var3 == nil {
-			templ_7745c5c3_Var3 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"main-content\"><div style=\"margin-bottom: 30px;\"><h1 style=\"font-size: 28px; font-weight: 600; color: #333; margin-bottom: 10px;\">Applications</h1><p style=\"color: #666; font-size: 16px;\">View your Spark Applications</p></div><div style=\"background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9; margin-bottom: 20px;\"><h3 style=\"font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px;\">Filters</h3><form style=\"display: flex; flex-direction: column; gap: 15px;\"><div><label style=\"display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;\">Cluster</label> <select name=\"cluster\" id=\"cluster-select\" style=\"width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;\" hx-get=\"/ui/applications\" hx-target=\"#main-content\" hx-trigger=\"change\" hx-include=\"[name='namespace']\"><option value=\"\">Select a cluster...</option> ")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		for _, cluster := range clusters {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<option value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(cluster.Name)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 39, Col: 35}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if cluster.Name == selectedCluster {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " selected")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(cluster.Name)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 39, Col: 98}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</option>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</select></div><div><label style=\"display: block; margin-bottom: 5px; font-weight: 500; color: #333; font-size: 14px;\">Namespace</label> <select name=\"namespace\" id=\"namespace-select\" style=\"width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if selectedCluster == "" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, " disabled")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, " hx-get=\"/ui/applications\" hx-target=\"#main-content\" hx-trigger=\"change\" hx-include=\"[name='cluster']\"><option value=\"\">Select a namespace...</option> ")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		for _, namespace := range namespaces {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<option value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var6 string
-			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(namespace.Name)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 58, Col: 37}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if namespace.Name == selectedNamespace {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " selected")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(namespace.Name)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 58, Col: 106}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</option>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</select></div><div><button type=\"button\" style=\"padding: 8px 16px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; width: fit-content;\" hx-get=\"/ui/applications\" hx-target=\"#main-content\" onclick=\"document.getElementById('cluster-select').value = ''; document.getElementById('namespace-select').value = '';\">Clear</button></div></form></div><div style=\"background: white; border-radius: 8px; border: 1px solid #e1e5e9; overflow: hidden;\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if selectedCluster == "" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<div style=\"padding: 40px; text-align: center;\"><p style=\"color: #666; font-size: 16px;\">Please select a cluster to view applications</p></div>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		} else if selectedNamespace == "" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<div style=\"padding: 40px; text-align: center;\"><p style=\"color: #666; font-size: 16px;\">Please select a namespace to view applications</p></div>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		} else if len(applications) == 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "<div style=\"padding: 40px; text-align: center;\"><p style=\"color: #666; font-size: 16px;\">No applications found in ")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var8 string
-			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(selectedCluster)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 88, Col: 88}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "/")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var9 string
-			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(selectedNamespace)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 88, Col: 110}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</p></div>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<div style=\"overflow-x: auto;\"><table style=\"width: 100%; border-collapse: collapse; min-width: 1500px;\"><thead style=\"background-color: #f8f9fa; border-bottom: 2px solid #e1e5e9;\"><tr><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Name</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Spark App ID</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Termination Time</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">User</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Driver Info</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">App State</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Submission Attempts</th><th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e1e5e9; white-space: nowrap;\">Spec</th></tr></thead> <tbody>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			for i, app := range applications {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<tr style=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var10 string
-				templ_7745c5c3_Var10, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues(templ.KV("background-color", getRowColor(i)))
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 108, Col: 64}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "\"><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"font-weight: 500; color: #333;\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var11 string
-				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.ObjectMeta.Name)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 110, Col: 88}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><code style=\"background: #f8f9fa; padding: 2px 6px; border-radius: 3px; font-size: 12px;\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var12 string
-				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.SparkApplicationID)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 113, Col: 137}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</code></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"font-size: 14px; color: #333;\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var13 string
-				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(formatTime(app.SparkAppMeta.LastSubmissionAttemptTime.Time))
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 116, Col: 114}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"font-size: 14px; color: #333;\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var14 string
-				templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(formatTime(app.SparkAppMeta.TerminationTime.Time))
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 119, Col: 104}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><div style=\"font-size: 14px; color: #333;\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var15 string
-				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(app.User)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 122, Col: 93}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</div></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				if app.SparkAppMeta.DriverInfo.PodName != "" || app.SparkAppMeta.DriverInfo.WebUIIngressAddress != "" {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "<div style=\"cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; font-size: 14px; color: #007bff;\" data-target=\"")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					var templ_7745c5c3_Var16 string
-					templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs("driver-info-" + fmt.Sprintf("%d", i))
-					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 128, Col: 63}
-					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "\" onclick=\"toggleDriverInfo(this.getAttribute('data-target'))\"><span id=\"")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					var templ_7745c5c3_Var17 string
-					templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs("driver-toggle-" + fmt.Sprintf("%d", i))
-					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 131, Col: 62}
-					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "\" style=\"font-size: 12px;\">▶</span> <span>Driver Info</span></div><div id=\"")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					var templ_7745c5c3_Var18 string
-					templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs("driver-info-" + fmt.Sprintf("%d", i))
-					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 135, Col: 54}
-					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "\" style=\"display: none; margin-top: 8px; padding: 8px; background: #f8f9fa; border-radius: 4px; font-size: 13px;\">")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					if app.SparkAppMeta.DriverInfo.PodName != "" {
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "<div style=\"margin-bottom: 4px;\"><strong>Pod Name:</strong> ")
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-						var templ_7745c5c3_Var19 string
-						templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.PodName)
-						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 140, Col: 78}
-						}
-						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "</div>")
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-					}
-					if app.SparkAppMeta.DriverInfo.WebUIIngressAddress != "" {
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "<div><strong>Ingress Address:</strong> ")
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-						var templ_7745c5c3_Var20 string
-						templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.WebUIIngressAddress)
-						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 145, Col: 97}
-						}
-						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "</div>")
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "</div>")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-				} else {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "<span style=\"color: #6c757d; font-style: italic;\">No driver info</span>")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "</td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9;\"><span style=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var21 string
-				templ_7745c5c3_Var21, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("background: " + getStateColor(formatAppState(app.SparkAppMeta.AppState)) + "; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500;")
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 154, Col: 191}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var22 string
-				templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(formatAppState(app.SparkAppMeta.AppState))
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 155, Col: 54}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "</span></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;\"><span style=\"font-weight: 500; color: #333;\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var23 string
-				templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", app.SparkAppMeta.SubmissionAttempts))
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 159, Col: 111}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "</span></td><td style=\"padding: 12px 16px; border-bottom: 1px solid #e1e5e9; text-align: center;\"><button style=\"padding: 6px 12px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;\" class=\"spec-button\" data-gateway-id=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var24 string
-				templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.ObjectMeta.Name)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/applications.templ`, Line: 165, Col: 61}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "\">View Spec</button></td></tr>")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "</tbody></table></div>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, "</div></div><script>\n\t\tfunction toggleDriverInfo(elementId) {\n\t\t\tconst content = document.getElementById(elementId);\n\t\t\tconst toggle = document.getElementById(elementId.replace('driver-info-', 'driver-toggle-'));\n\t\t\t\n\t\t\tif (content.style.display === 'none' || content.style.display === '') {\n\t\t\t\tcontent.style.display = 'block';\n\t\t\t\ttoggle.textContent = '▼';\n\t\t\t} else {\n\t\t\t\tcontent.style.display = 'none';\n\t\t\t\ttoggle.textContent = '▶';\n\t\t\t}\n\t\t}\n\n\t\tfunction showSpecPopover(gatewayId) {\n\t\t\t// Create overlay if it doesn't exist\n\t\t\tlet overlay = document.getElementById('spec-overlay');\n\t\t\tif (!overlay) {\n\t\t\t\toverlay = document.createElement('div');\n\t\t\t\toverlay.id = 'spec-overlay';\n\t\t\t\toverlay.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; z-index: 1000; justify-content: center; align-items: center;';\n\t\t\t\tdocument.body.appendChild(overlay);\n\t\t\t}\n\n\t\t\t// Create popover if it doesn't exist\n\t\t\tlet popover = document.getElementById('spec-popover');\n\t\t\tif (!popover) {\n\t\t\t\tpopover = document.createElement('div');\n\t\t\t\tpopover.id = 'spec-popover';\n\t\t\t\tpopover.style.cssText = 'background: white; padding: 20px; border-radius: 8px; max-width: 80%; max-height: 80%; overflow: auto; position: relative;';\n\t\t\t\toverlay.appendChild(popover);\n\t\t\t}\n\n\t\t\t// Show loading state\n\t\t\tpopover.innerHTML = '<div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;\">' +\n\t\t\t\t'<h3 style=\"margin: 0;\">Spark Application Spec</h3>' +\n\t\t\t\t'<button onclick=\"hideSpecPopover()\" style=\"background: #dc3545; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer;\">Close</button>' +\n\t\t\t\t'</div><div>Loading...</div>';\n\n\t\t\t// Show the overlay\n\t\t\toverlay.style.display = 'flex';\n\n\t\t\t// Fetch spec data\n\t\t\tfetch('/ui/applications/' + gatewayId + '/spec')\n\t\t\t\t.then(response => response.json())\n\t\t\t\t.then(data => {\n\t\t\t\t\tpopover.innerHTML = '<div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;\">' +\n\t\t\t\t\t\t'<h3 style=\"margin: 0;\">Spark Application Spec</h3>' +\n\t\t\t\t\t\t'<button onclick=\"hideSpecPopover()\" style=\"background: #dc3545; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer;\">Close</button>' +\n\t\t\t\t\t\t'</div>' +\n\t\t\t\t\t\t'<div>' +\n\t\t\t\t\t\t'<h4>YAML Specification:</h4>' +\n\t\t\t\t\t\t'<pre style=\"background: #f8f9fa; padding: 15px; border-radius: 4px; overflow: auto; max-height: 500px; font-size: 12px;\"><code>' + data.spec + '</code></pre>' +\n\t\t\t\t\t\t'</div>';\n\t\t\t\t})\n\t\t\t\t.catch(error => {\n\t\t\t\t\tpopover.innerHTML = '<div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;\">' +\n\t\t\t\t\t\t'<h3 style=\"margin: 0;\">Spark Application Spec</h3>' +\n\t\t\t\t\t\t'<button onclick=\"hideSpecPopover()\" style=\"background: #dc3545; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer;\">Close</button>' +\n\t\t\t\t\t\t'</div>' +\n\t\t\t\t\t\t'<div style=\"color: #dc3545;\">Error loading spec: ' + error.message + '</div>';\n\t\t\t\t});\n\t\t}\n\n\t\tfunction hideSpecPopover() {\n\t\t\tconst overlay = document.getElementById('spec-overlay');\n\t\t\tif (overlay) {\n\t\t\t\toverlay.style.display = 'none';\n\t\t\t}\n\t\t}\n\n\t\t// Event delegation for spec buttons\n\t\tdocument.addEventListener('click', function(event) {\n\t\t\tif (event.target.classList.contains('spec-button')) {\n\t\t\t\tconst gatewayId = event.target.getAttribute('data-gateway-id');\n\t\t\t\tshowSpecPopover(gatewayId);\n\t\t\t}\n\t\t\t\n\t\t\t// Close popover when clicking outside\n\t\t\tconst overlay = document.getElementById('spec-overlay');\n\t\t\tif (overlay && event.target === overlay) {\n\t\t\t\thideSpecPopover();\n\t\t\t}\n\t\t});\n\t</script>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-func formatTime(t time.Time) string {
-	if t.IsZero() {
-		return "-"
-	}
-	return t.Format("2006-01-02 15:04:05")
-}
-
-func formatAppState(state v1beta2.ApplicationState) string {
-	return string(state.State)
-}
-
-func getStateColor(state string) string {
-	switch state {
-	case "COMPLETED":
-		return "#28a745"
-	case "RUNNING":
-		return "#007bff"
-	case "FAILED":
-		return "#dc3545"
-	case "PENDING":
-		return "#ffc107"
-	case "SUBMISSION_FAILED":
-		return "#dc3545"
-	case "INVALIDATING":
-		return "#6c757d"
-	case "SUCCEEDING":
-		return "#17a2b8"
-	case "FAILING":
-		return "#fd7e14"
-	default:
-		return "#6c757d"
-	}
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/internal/gateway/web/app/main.templ b/internal/gateway/web/app/main.templ
index 3012654..e7acccb 100644
--- a/internal/gateway/web/app/main.templ
+++ b/internal/gateway/web/app/main.templ
@@ -2,7 +2,9 @@ package app
 
 import (
 	"fmt"
+    "time"
 	"github.com/slackhq/spark-gateway/pkg/model"
+    "github.com/kubeflow/spark-operator/v2/api/v1beta2"
 )
 
 type ApplicationCounts struct {
@@ -288,3 +290,37 @@ templ MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applic
 		});
 	</script>
 }
+
+func formatTime(t time.Time) string {
+	if t.IsZero() {
+		return "-"
+	}
+	return t.Format("2006-01-02 15:04:05")
+}
+
+func formatAppState(state v1beta2.ApplicationState) string {
+	return string(state.State)
+}
+
+func getStateColor(state string) string {
+	switch state {
+	case "COMPLETED":
+		return "#28a745"
+	case "RUNNING":
+		return "#007bff"
+	case "FAILED":
+		return "#dc3545"
+	case "PENDING":
+		return "#ffc107"
+	case "SUBMISSION_FAILED":
+		return "#dc3545"
+	case "INVALIDATING":
+		return "#6c757d"
+	case "SUCCEEDING":
+		return "#17a2b8"
+	case "FAILING":
+		return "#fd7e14"
+	default:
+		return "#6c757d"
+	}
+}
diff --git a/internal/gateway/web/app/main_templ.go b/internal/gateway/web/app/main_templ.go
index a60b023..7b5a8a0 100644
--- a/internal/gateway/web/app/main_templ.go
+++ b/internal/gateway/web/app/main_templ.go
@@ -10,7 +10,9 @@ import templruntime "github.com/a-h/templ/runtime"
 
 import (
 	"fmt"
+	"github.com/kubeflow/spark-operator/v2/api/v1beta2"
 	"github.com/slackhq/spark-gateway/pkg/model"
+	"time"
 )
 
 type ApplicationCounts struct {
@@ -95,7 +97,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", counts.Submitted))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 32, Col: 115}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 34, Col: 115}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -108,7 +110,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", counts.Running))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 36, Col: 113}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 38, Col: 113}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
@@ -121,7 +123,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 		var templ_7745c5c3_Var6 string
 		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", counts.Completed))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 40, Col: 115}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 42, Col: 115}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
@@ -134,7 +136,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 		var templ_7745c5c3_Var7 string
 		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", counts.Failed))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 44, Col: 112}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 46, Col: 112}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
@@ -152,7 +154,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 			var templ_7745c5c3_Var8 string
 			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(cluster.Name)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 66, Col: 35}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 68, Col: 35}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {
@@ -175,7 +177,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 			var templ_7745c5c3_Var9 string
 			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(cluster.Name)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 66, Col: 98}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 68, Col: 98}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 			if templ_7745c5c3_Err != nil {
@@ -208,7 +210,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 			var templ_7745c5c3_Var10 string
 			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(namespace.Name)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 85, Col: 37}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 87, Col: 37}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 			if templ_7745c5c3_Err != nil {
@@ -231,7 +233,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 			var templ_7745c5c3_Var11 string
 			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(namespace.Name)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 85, Col: 106}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 87, Col: 106}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 			if templ_7745c5c3_Err != nil {
@@ -264,7 +266,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 			var templ_7745c5c3_Var12 string
 			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(selectedCluster)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 115, Col: 88}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 117, Col: 88}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 			if templ_7745c5c3_Err != nil {
@@ -277,7 +279,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 			var templ_7745c5c3_Var13 string
 			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(selectedNamespace)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 115, Col: 110}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 117, Col: 110}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 			if templ_7745c5c3_Err != nil {
@@ -300,7 +302,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 				var templ_7745c5c3_Var14 string
 				templ_7745c5c3_Var14, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues(templ.KV("background-color", getRowColor(i)))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 135, Col: 64}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 137, Col: 64}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 				if templ_7745c5c3_Err != nil {
@@ -313,7 +315,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 				var templ_7745c5c3_Var15 string
 				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.ObjectMeta.Name)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 137, Col: 88}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 139, Col: 88}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 				if templ_7745c5c3_Err != nil {
@@ -326,7 +328,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 				var templ_7745c5c3_Var16 string
 				templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.SparkApplicationID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 140, Col: 137}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 142, Col: 137}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 				if templ_7745c5c3_Err != nil {
@@ -339,7 +341,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 				var templ_7745c5c3_Var17 string
 				templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(formatTime(app.SparkAppMeta.LastSubmissionAttemptTime.Time))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 143, Col: 114}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 145, Col: 114}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
 				if templ_7745c5c3_Err != nil {
@@ -352,7 +354,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 				var templ_7745c5c3_Var18 string
 				templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(formatTime(app.SparkAppMeta.TerminationTime.Time))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 146, Col: 104}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 148, Col: 104}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
 				if templ_7745c5c3_Err != nil {
@@ -365,7 +367,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 				var templ_7745c5c3_Var19 string
 				templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(app.User)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 149, Col: 93}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 151, Col: 93}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
 				if templ_7745c5c3_Err != nil {
@@ -383,7 +385,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 					var templ_7745c5c3_Var20 string
 					templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs("driver-info-" + fmt.Sprintf("%d", i))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 155, Col: 63}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 157, Col: 63}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
 					if templ_7745c5c3_Err != nil {
@@ -396,7 +398,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 					var templ_7745c5c3_Var21 string
 					templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs("driver-toggle-" + fmt.Sprintf("%d", i))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 158, Col: 62}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 160, Col: 62}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
 					if templ_7745c5c3_Err != nil {
@@ -409,7 +411,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 					var templ_7745c5c3_Var22 string
 					templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs("driver-info-" + fmt.Sprintf("%d", i))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 162, Col: 54}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 164, Col: 54}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
 					if templ_7745c5c3_Err != nil {
@@ -427,7 +429,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 						var templ_7745c5c3_Var23 string
 						templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.PodName)
 						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 167, Col: 78}
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 169, Col: 78}
 						}
 						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
 						if templ_7745c5c3_Err != nil {
@@ -446,7 +448,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 						var templ_7745c5c3_Var24 string
 						templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.DriverInfo.WebUIIngressAddress)
 						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 172, Col: 97}
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 174, Col: 97}
 						}
 						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
 						if templ_7745c5c3_Err != nil {
@@ -474,7 +476,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 				var templ_7745c5c3_Var25 string
 				templ_7745c5c3_Var25, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("background: " + getStateColor(formatAppState(app.SparkAppMeta.AppState)) + "; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500;")
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 181, Col: 191}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 183, Col: 191}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
 				if templ_7745c5c3_Err != nil {
@@ -487,7 +489,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 				var templ_7745c5c3_Var26 string
 				templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(formatAppState(app.SparkAppMeta.AppState))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 182, Col: 54}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 184, Col: 54}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
 				if templ_7745c5c3_Err != nil {
@@ -500,7 +502,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 				var templ_7745c5c3_Var27 string
 				templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", app.SparkAppMeta.SubmissionAttempts))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 186, Col: 111}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 188, Col: 111}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
 				if templ_7745c5c3_Err != nil {
@@ -513,7 +515,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 				var templ_7745c5c3_Var28 string
 				templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinStringErrs(app.SparkAppMeta.ObjectMeta.Name)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 192, Col: 61}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/gateway/web/app/main.templ`, Line: 194, Col: 61}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28))
 				if templ_7745c5c3_Err != nil {
@@ -537,4 +539,38 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 	})
 }
 
+func formatTime(t time.Time) string {
+	if t.IsZero() {
+		return "-"
+	}
+	return t.Format("2006-01-02 15:04:05")
+}
+
+func formatAppState(state v1beta2.ApplicationState) string {
+	return string(state.State)
+}
+
+func getStateColor(state string) string {
+	switch state {
+	case "COMPLETED":
+		return "#28a745"
+	case "RUNNING":
+		return "#007bff"
+	case "FAILED":
+		return "#dc3545"
+	case "PENDING":
+		return "#ffc107"
+	case "SUBMISSION_FAILED":
+		return "#dc3545"
+	case "INVALIDATING":
+		return "#6c757d"
+	case "SUCCEEDING":
+		return "#17a2b8"
+	case "FAILING":
+		return "#fd7e14"
+	default:
+		return "#6c757d"
+	}
+}
+
 var _ = templruntime.GeneratedTemplate
diff --git a/internal/gateway/web/components/sidebar.templ b/internal/gateway/web/components/sidebar.templ
index 85f9913..0bc6e76 100644
--- a/internal/gateway/web/components/sidebar.templ
+++ b/internal/gateway/web/components/sidebar.templ
@@ -14,8 +14,7 @@ templ Sidebar() {
 						onmouseover="this.style.backgroundColor='#f8f9fa'"
 						onmouseout="this.style.backgroundColor='transparent'"
 					>
-						<span style="margin-right: 10px;">📊</span>
-						Dashboard
+						Applications
 					</a>
 				</li>
 				<li style="margin-bottom: 8px;">
@@ -28,24 +27,9 @@ templ Sidebar() {
 						onmouseover="this.style.backgroundColor='#f8f9fa'"
 						onmouseout="this.style.backgroundColor='transparent'"
 					>
-						<span style="margin-right: 10px;">🏢</span>
 						Clusters
 					</a>
 				</li>
-				<li style="margin-bottom: 8px;">
-					<a 
-						href="#"
-						style="display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;"
-						hx-get="/ui/applications"
-						hx-target="#main-content"
-						hx-push-url="true"
-						onmouseover="this.style.backgroundColor='#f8f9fa'"
-						onmouseout="this.style.backgroundColor='transparent'"
-					>
-						<span style="margin-right: 10px;">📦</span>
-						Applications
-					</a>
-				</li>
 			</ul>
 		</nav>
 	</aside>
diff --git a/internal/gateway/web/components/sidebar_templ.go b/internal/gateway/web/components/sidebar_templ.go
index 3b5fe17..42bed43 100644
--- a/internal/gateway/web/components/sidebar_templ.go
+++ b/internal/gateway/web/components/sidebar_templ.go
@@ -29,7 +29,7 @@ func Sidebar() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<aside class=\"sidebar\"><nav style=\"padding: 20px 0;\"><ul style=\"list-style: none;\"><li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;\" hx-get=\"/ui\" hx-target=\"#main-content\" hx-push-url=\"true\" onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='transparent'\"><span style=\"margin-right: 10px;\">📊</span> Dashboard</a></li><li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;\" hx-get=\"/ui/clusters\" hx-target=\"#main-content\" hx-push-url=\"true\" onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='transparent'\"><span style=\"margin-right: 10px;\">🏢</span> Clusters</a></li><li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;\" hx-get=\"/ui/applications\" hx-target=\"#main-content\" hx-push-url=\"true\" onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='transparent'\"><span style=\"margin-right: 10px;\">📦</span> Applications</a></li></ul></nav></aside>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<aside class=\"sidebar\"><nav style=\"padding: 20px 0;\"><ul style=\"list-style: none;\"><li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;\" hx-get=\"/ui\" hx-target=\"#main-content\" hx-push-url=\"true\" onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='transparent'\">Applications</a></li><li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"display: block; padding: 12px 20px; color: #333; text-decoration: none; border-radius: 4px; margin: 0 10px;\" hx-get=\"/ui/clusters\" hx-target=\"#main-content\" hx-push-url=\"true\" onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='transparent'\">Clusters</a></li></ul></nav></aside>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/internal/gateway/web/handler.go b/internal/gateway/web/handler.go
index ec8458a..9510e11 100644
--- a/internal/gateway/web/handler.go
+++ b/internal/gateway/web/handler.go
@@ -38,7 +38,6 @@ func (h *WebHandler) RegisterRoutes() {
 
 	uiGroup.GET("/", h.main)
 	uiGroup.GET("/clusters", h.clusters)
-	uiGroup.GET("/applications", h.applications)
 	uiGroup.GET("/applications/:gatewayId/spec", h.applicationSpec)
 
 }
@@ -134,49 +133,6 @@ func (h *WebHandler) clusters(c *gin.Context) {
 	}
 }
 
-func (h *WebHandler) applications(c *gin.Context) {
-	clusters, err := h.localClusterRepo.GetAll()
-	if err != nil {
-		c.Error(err)
-		return
-	}
-
-	selectedCluster := c.Query("cluster")
-	selectedNamespace := c.Query("namespace")
-
-	var applications []*model.GatewayApplicationMeta
-	var namespaces []model.KubeNamespace
-
-	// Get applications if both cluster and namespace are selected
-	if selectedCluster != "" && selectedNamespace != "" {
-		applications, err = h.gatewayApplicationService.List(c, selectedCluster, selectedNamespace, nil)
-		if err != nil {
-			c.Error(err)
-			return
-		}
-	}
-
-	// Get namespaces if cluster is selected
-	if selectedCluster != "" {
-		for _, cluster := range clusters {
-			if cluster.Name == selectedCluster {
-				namespaces = cluster.Namespaces
-				break
-			}
-		}
-	}
-
-	// Check if this is an HTMX request (partial update)
-	if c.GetHeader("HX-Request") == "true" {
-		r := gintemplrenderer.New(c, http.StatusOK, app.ApplicationsContent(clusters, applications, selectedCluster, selectedNamespace, namespaces))
-		c.Render(http.StatusOK, r)
-	} else {
-		// Full page load
-		r := gintemplrenderer.New(c, http.StatusOK, app.Applications(clusters, applications, selectedCluster, selectedNamespace, namespaces))
-		c.Render(http.StatusOK, r)
-	}
-}
-
 func (h *WebHandler) applicationSpec(c *gin.Context) {
 	gatewayId := c.Param("gatewayId")
 	if gatewayId == "" {

From 467a62a44dfa5bda89fe48e1824b1b364b03e559 Mon Sep 17 00:00:00 2001
From: jigar-bhalodia <bhalodia.jigar@gmail.com>
Date: Tue, 2 Sep 2025 08:20:14 -0700
Subject: [PATCH 14/14] Update

---
 internal/gateway/web/app/main.templ    | 2 +-
 internal/gateway/web/app/main_templ.go | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/internal/gateway/web/app/main.templ b/internal/gateway/web/app/main.templ
index e7acccb..b894847 100644
--- a/internal/gateway/web/app/main.templ
+++ b/internal/gateway/web/app/main.templ
@@ -24,7 +24,7 @@ templ MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applic
 	<div id="main-content">
 		<div style="margin-bottom: 30px;">
 			<h1 style="font-size: 28px; font-weight: 600; color: #333; margin-bottom: 10px;">Welcome to Spark Gateway</h1>
-			<p style="color: #666; font-size: 16px;">Monitor and manage your Spark applications</p>
+			<p style="color: #666; font-size: 16px;">Monitor your Spark applications</p>
 		</div>
 		
 		<div style="background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9; margin-bottom: 20px;">
diff --git a/internal/gateway/web/app/main_templ.go b/internal/gateway/web/app/main_templ.go
index 7b5a8a0..a921090 100644
--- a/internal/gateway/web/app/main_templ.go
+++ b/internal/gateway/web/app/main_templ.go
@@ -90,7 +90,7 @@ func MainContent(counts ApplicationCounts, clusters []model.KubeCluster, applica
 			templ_7745c5c3_Var3 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"main-content\"><div style=\"margin-bottom: 30px;\"><h1 style=\"font-size: 28px; font-weight: 600; color: #333; margin-bottom: 10px;\">Welcome to Spark Gateway</h1><p style=\"color: #666; font-size: 16px;\">Monitor and manage your Spark applications</p></div><div style=\"background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9; margin-bottom: 20px;\"><h3 style=\"font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px;\">Application Status</h3><div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px;\"><div style=\"text-align: center; padding: 10px;\"><p style=\"font-size: 20px; font-weight: 700; color: #ffc107; margin: 0;\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"main-content\"><div style=\"margin-bottom: 30px;\"><h1 style=\"font-size: 28px; font-weight: 600; color: #333; margin-bottom: 10px;\">Welcome to Spark Gateway</h1><p style=\"color: #666; font-size: 16px;\">Monitor your Spark applications</p></div><div style=\"background: white; padding: 20px; border-radius: 8px; border: 1px solid #e1e5e9; margin-bottom: 20px;\"><h3 style=\"font-size: 18px; font-weight: 600; color: #333; margin-bottom: 15px;\">Application Status</h3><div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px;\"><div style=\"text-align: center; padding: 10px;\"><p style=\"font-size: 20px; font-weight: 700; color: #ffc107; margin: 0;\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}