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
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/application/handler/handler.go b/internal/gateway/application/handler/handler.go
index b74703c..e630136 100644
--- a/internal/gateway/application/handler/handler.go
+++ b/internal/gateway/application/handler/handler.go
@@ -19,14 +19,18 @@ 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"
+	"strings"
+
+	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 +51,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 +94,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 +107,18 @@ func (h *ApplicationHandler) List(c *gin.Context) {
 
 	namespace := c.Query("namespace")
 
-	appMetaList, err := h.service.List(c, cluster, namespace)
+	_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", state))
+			return
+		}
+		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..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"
 
@@ -39,7 +38,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)
@@ -109,24 +108,24 @@ 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),
 	}
 
 	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,13 +148,17 @@ 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))
 		}
 
 		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/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 eb3ccd1..e3d528a 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(localClusterRepo, appService, 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/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/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..b894847
--- /dev/null
+++ b/internal/gateway/web/app/main.templ
@@ -0,0 +1,326 @@
+package app
+
+import (
+	"fmt"
+    "time"
+	"github.com/slackhq/spark-gateway/pkg/model"
+    "github.com/kubeflow/spark-operator/v2/api/v1beta2"
+)
+
+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(counts, clusters, applications, selectedCluster, selectedNamespace, namespaces)
+	}
+}
+
+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 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;">{ 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; 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>
+}
+
+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
new file mode 100644
index 0000000..a921090
--- /dev/null
+++ b/internal/gateway/web/app/main_templ.go
@@ -0,0 +1,576 @@
+// 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"
+)
+
+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 {
+			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(counts, 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("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(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 {
+			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 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: 34, 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: 38, 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: 42, 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: 46, 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: 68, 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: 68, 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: 87, 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: 87, 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: 117, 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: 117, 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: 137, 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: 139, 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: 142, 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: 145, 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: 148, 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: 151, 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: 157, 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: 160, 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: 164, 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: 169, 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: 174, 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: 183, 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: 184, 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: 188, 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: 194, 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
+		}
+		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/components/header.templ b/internal/gateway/web/components/header.templ
new file mode 100644
index 0000000..b4eb3a9
--- /dev/null
+++ b/internal/gateway/web/components/header.templ
@@ -0,0 +1,11 @@
+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>
+	</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..9772f36
--- /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></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..0bc6e76
--- /dev/null
+++ b/internal/gateway/web/components/sidebar.templ
@@ -0,0 +1,36 @@
+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"
+						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>
+}
\ 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..42bed43
--- /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\" 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
+		}
+		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..9510e11
--- /dev/null
+++ b/internal/gateway/web/handler.go
@@ -0,0 +1,163 @@
+package web
+
+import (
+	"net/http"
+
+	"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"
+	"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
+	gatewayApplicationService handler.GatewayApplicationService
+	engine                    *gin.Engine
+	routerGroup               *gin.RouterGroup
+}
+
+func NewWebHandler(localClusterRepo *cluster.LocalClusterRepo, gatewayApplicationService handler.GatewayApplicationService, engine *gin.Engine, routerGroup *gin.RouterGroup) *WebHandler {
+	return &WebHandler{
+		localClusterRepo:          localClusterRepo,
+		gatewayApplicationService: gatewayApplicationService,
+		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)
+	uiGroup.GET("/applications/:gatewayId/spec", h.applicationSpec)
+
+}
+
+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(counts, clusters, applications, selectedCluster, selectedNamespace, namespaces))
+		c.Render(http.StatusOK, r)
+	} else {
+		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) {
+	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) 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)
+}
diff --git a/internal/sparkManager/application/handler/handler.go b/internal/sparkManager/application/handler/handler.go
index f36cccd..3348aea 100644
--- a/internal/sparkManager/application/handler/handler.go
+++ b/internal/sparkManager/application/handler/handler.go
@@ -18,9 +18,11 @@ package handler
 import (
 	"context"
 	"fmt"
-	"github.com/slackhq/spark-gateway/pkg/model"
 	"net/http"
 	"strconv"
+	"strings"
+
+	"github.com/slackhq/spark-gateway/pkg/model"
 
 	"github.com/gin-gonic/gin"
 	"github.com/kubeflow/spark-operator/v2/api/v1beta2"
@@ -32,7 +34,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 +80,19 @@ func (h *SparkApplicationHandler) Get(c *gin.Context) {
 }
 
 func (h *SparkApplicationHandler) List(c *gin.Context) {
-	appMetaList, err := h.sparkApplicationService.List(c.Param("namespace"))
+
+	_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", state))
+			return
+		}
+		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/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
+}
diff --git a/pkg/model/application.go b/pkg/model/application.go
index 73a07a7..ebd6724 100644
--- a/pkg/model/application.go
+++ b/pkg/model/application.go
@@ -16,11 +16,13 @@
 package model
 
 import (
+	"errors"
 	"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"
@@ -78,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
@@ -95,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 {
@@ -121,9 +132,24 @@ 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,
 	}
 }
+
+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,
+}