diff --git a/server/handlers/console/buckets/objects.go b/server/handlers/console/buckets/objects.go
index 729d115..7d8ac59 100644
--- a/server/handlers/console/buckets/objects.go
+++ b/server/handlers/console/buckets/objects.go
@@ -10,6 +10,7 @@ import (
 	"github.com/mojatter/s2"
 	"github.com/mojatter/s2/internal/numconv"
 	"github.com/mojatter/s2/server"
+	"github.com/mojatter/s2/server/handlers/console"
 	"github.com/mojatter/s2/server/middleware"
 )
 
@@ -63,8 +64,14 @@ func handleObjects(s *server.Server, w http.ResponseWriter, r *http.Request) {
 		parentPrefix = ""
 	}
 
+	// Non-HTMX requests get redirected to the index page where the
+	// sidebar navigation triggers the htmx load.
+	if r.Header.Get("HX-Request") != "true" {
+		http.Redirect(w, r, "/", http.StatusFound)
+		return
+	}
+
 	data := struct {
-		Buckets       []string
 		BucketName    string
 		Objects       []s2.Object
 		Prefixes      []string
@@ -82,27 +89,8 @@ func handleObjects(s *server.Server, w http.ResponseWriter, r *http.Request) {
 		HasParent:     prefix != "" && prefix != "/",
 	}
 
-	// Use a partial template for HTMX requests
-	if r.Header.Get("HX-Request") == "true" {
-		var buf bytes.Buffer
-		if err := s.Template.ExecuteTemplate(&buf, "buckets/objects.html", data); err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-			return
-		}
-		_, _ = buf.WriteTo(w)
-		return
-	}
-
-	// Fallback to full page if accessed directly
-	bucketNames, err := s.Buckets.Names()
-	if err != nil {
-		http.Error(w, err.Error(), http.StatusInternalServerError)
-		return
-	}
-	data.Buckets = bucketNames
-
 	var buf bytes.Buffer
-	if err := s.Template.ExecuteTemplate(&buf, "index.html", data); err != nil {
+	if err := s.Template.ExecuteTemplate(&buf, "buckets/objects.html", data); err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
 	}
@@ -220,6 +208,6 @@ func init() {
 	server.RegisterConsoleHandleFunc("POST /buckets/{name}/folders", middleware.BasicAuth(handleCreateFolder))
 	server.RegisterConsoleHandleFunc("POST /buckets/{name}/upload", middleware.BasicAuth(handleUploadFile))
 	server.RegisterConsoleHandleFunc("DELETE /buckets/{name}/objects", middleware.BasicAuth(handleDeleteObject))
-	server.RegisterTemplate("buckets/objects.html")
+	console.RegisterTemplateWithScripts("buckets/objects.html")
 }
 
diff --git a/server/handlers/console/buckets/objects/view.go b/server/handlers/console/buckets/objects/view.go
index a7659a5..c8b874e 100644
--- a/server/handlers/console/buckets/objects/view.go
+++ b/server/handlers/console/buckets/objects/view.go
@@ -1,6 +1,7 @@
 package objects
 
 import (
+	"bytes"
 	"encoding/json"
 	"fmt"
 	"io"
@@ -106,7 +107,78 @@ func handleMeta(s *server.Server, w http.ResponseWriter, r *http.Request) {
 	_ = json.NewEncoder(w).Encode(resp)
 }
 
+func handlePreview(s *server.Server, w http.ResponseWriter, r *http.Request) {
+	ctx := r.Context()
+	bucketName := r.PathValue("name")
+	objectName := r.PathValue("object")
+
+	strg, err := s.Buckets.Get(ctx, bucketName)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusNotFound)
+		return
+	}
+
+	obj, err := strg.Get(ctx, objectName)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusNotFound)
+		return
+	}
+
+	ext := strings.ToLower(path.Ext(objectName))
+	viewURL := fmt.Sprintf("/buckets/%s/view/%s", bucketName, objectName)
+	previewType := server.PreviewType(ext)
+
+	var textContent string
+	if previewType == "text" {
+		rc, err := obj.Open()
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		defer func() { _ = rc.Close() }()
+
+		b, err := io.ReadAll(rc)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		textContent = string(b)
+	}
+
+	data := struct {
+		Filename     string
+		ViewURL      string
+		ContentType  string
+		Size         uint64
+		LastModified string
+		Metadata     map[string]string
+		PreviewType  string
+		TextContent  string
+	}{
+		Filename:     path.Base(objectName),
+		ViewURL:      viewURL,
+		ContentType:  contentTypeByExt(ext),
+		Size:         obj.Length(),
+		LastModified: obj.LastModified().Format("2006-01-02 15:04:05"),
+		PreviewType:  previewType,
+		TextContent:  textContent,
+	}
+	if md := obj.Metadata(); len(md) > 0 {
+		data.Metadata = md
+	}
+
+	var buf bytes.Buffer
+	if err := s.Template.ExecuteTemplate(&buf, "buckets/preview.html", data); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	_, _ = buf.WriteTo(w)
+}
+
 func init() {
 	server.RegisterConsoleHandleFunc("GET /buckets/{name}/view/{object...}", middleware.BasicAuth(handleView))
 	server.RegisterConsoleHandleFunc("GET /buckets/{name}/meta/{object...}", middleware.BasicAuth(handleMeta))
+	server.RegisterConsoleHandleFunc("GET /buckets/{name}/preview/{object...}", middleware.BasicAuth(handlePreview))
 }
diff --git a/server/handlers/console/buckets/objects_test.go b/server/handlers/console/buckets/objects_test.go
index 86aeb25..34e0978 100644
--- a/server/handlers/console/buckets/objects_test.go
+++ b/server/handlers/console/buckets/objects_test.go
@@ -101,7 +101,7 @@ func (s *ObjectsTestSuite) TestHandleObjects() {
 		s.Equal(http.StatusNotFound, w.Code)
 	})
 
-	s.Run("full page without HX-Request", func() {
+	s.Run("full page without HX-Request redirects to index", func() {
 		s.createBucket("full")
 
 		req := httptest.NewRequest("GET", "/buckets/full", nil)
@@ -109,8 +109,8 @@ func (s *ObjectsTestSuite) TestHandleObjects() {
 		w := httptest.NewRecorder()
 		handleObjects(s.server, w, req)
 
-		s.Equal(http.StatusOK, w.Code)
-		s.Contains(w.Body.String(), "<!DOCTYPE html>")
+		s.Equal(http.StatusFound, w.Code)
+		s.Equal("/", w.Header().Get("Location"))
 	})
 }
 
diff --git a/server/handlers/console/console_test.go b/server/handlers/console/console_test.go
index 7aef0de..ff18793 100644
--- a/server/handlers/console/console_test.go
+++ b/server/handlers/console/console_test.go
@@ -73,7 +73,9 @@ func (s *IndexTestSuite) TestHandleCreateBucket() {
 		w := httptest.NewRecorder()
 		handleCreateBucket(s.server, w, req)
 
-		s.Equal(http.StatusFound, w.Code)
+		s.Equal(http.StatusOK, w.Code)
+		s.Contains(w.Body.String(), "new-bucket")
+
 		exists, err := s.server.Buckets.Exists("new-bucket")
 		s.Require().NoError(err)
 		s.True(exists)
@@ -102,7 +104,8 @@ func (s *IndexTestSuite) TestHandleDeleteBucket() {
 		handleDeleteBucket(s.server, w, req)
 
 		s.Equal(http.StatusOK, w.Code)
-		s.Equal("/", w.Header().Get("HX-Redirect"))
+		s.Equal("/", w.Header().Get("HX-Push-Url"))
+		s.Contains(w.Body.String(), "bucket-list")
 
 		exists, err := s.server.Buckets.Exists("to-delete")
 		s.Require().NoError(err)
diff --git a/server/handlers/console/index.go b/server/handlers/console/index.go
index c22a196..b69c1e0 100644
--- a/server/handlers/console/index.go
+++ b/server/handlers/console/index.go
@@ -42,8 +42,7 @@ func handleCreateBucket(s *server.Server, w http.ResponseWriter, r *http.Request
 		return
 	}
 
-	// For HTMX, just redirect or re-render (usually redirect to index is fine)
-	http.Redirect(w, r, "/", http.StatusFound)
+	renderBucketList(s, w)
 }
 
 func handleDeleteBucket(s *server.Server, w http.ResponseWriter, r *http.Request) {
@@ -57,11 +56,52 @@ func handleDeleteBucket(s *server.Server, w http.ResponseWriter, r *http.Request
 		return
 	}
 
-	// For HTMX DELETE request, redirect to index
-	w.Header().Set("HX-Redirect", "/")
-	w.WriteHeader(http.StatusOK)
+	names, err := s.Buckets.Names()
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	data := struct{ Buckets []string }{Buckets: names}
+
+	var buf bytes.Buffer
+	if err := s.Template.ExecuteTemplate(&buf, "buckets/list.html", data); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	// OOB swap to reset main content to empty state
+	buf.WriteString(`<div id="main-content" hx-swap-oob="innerHTML">`)
+
+	if err := s.Template.ExecuteTemplate(&buf, "empty.html", nil); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	buf.WriteString(`</div>`)
+
+	w.Header().Set("HX-Push-Url", "/")
+	_, _ = buf.WriteTo(w)
 }
 
+// renderBucketList renders the sidebar bucket list fragment.
+func renderBucketList(s *server.Server, w http.ResponseWriter) {
+	names, err := s.Buckets.Names()
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	data := struct{ Buckets []string }{Buckets: names}
+
+	var buf bytes.Buffer
+	if err := s.Template.ExecuteTemplate(&buf, "buckets/list.html", data); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	_, _ = buf.WriteTo(w)
+}
 
 func init() {
 	server.RegisterConsoleHandleFunc("GET /{$}", middleware.BasicAuth(handleIndex))
diff --git a/server/handlers/console/scripts.go b/server/handlers/console/scripts.go
new file mode 100644
index 0000000..4bb264a
--- /dev/null
+++ b/server/handlers/console/scripts.go
@@ -0,0 +1,39 @@
+package console
+
+import (
+	"bytes"
+	"net/http"
+
+	"github.com/mojatter/s2/server"
+	"github.com/mojatter/s2/server/middleware"
+)
+
+// scriptTemplates lists the {{define "scripts:..."}} blocks to render.
+// Populated automatically by RegisterTemplateWithScripts.
+var scriptTemplates []string
+
+// RegisterTemplateWithScripts registers a template that contains a
+// {{define "scripts:<name>"}} block. It registers both the template
+// itself (via server.RegisterTemplate) and the scripts block for the
+// GET /scripts endpoint.
+func RegisterTemplateWithScripts(name string) {
+	server.RegisterTemplate(name)
+	scriptTemplates = append(scriptTemplates, "scripts:"+name)
+}
+
+func handleScripts(s *server.Server, w http.ResponseWriter, r *http.Request) {
+	var buf bytes.Buffer
+	for _, name := range scriptTemplates {
+		if err := s.Template.ExecuteTemplate(&buf, name, nil); err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+	}
+
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	_, _ = buf.WriteTo(w)
+}
+
+func init() {
+	server.RegisterConsoleHandleFunc("GET /scripts", middleware.BasicAuth(handleScripts))
+}
diff --git a/server/templates.go b/server/templates.go
index 946f8b9..2d3c267 100644
--- a/server/templates.go
+++ b/server/templates.go
@@ -20,8 +20,11 @@ var templatesFS embed.FS
 var (
 	templatesMux  sync.Mutex
 	templateNames = []string{
-		"index.html",
+		"empty.html",
+		"buckets/list.html",
 		"buckets/objects.html",
+		"buckets/preview.html",
+		"index.html",
 	}
 )
 
@@ -61,6 +64,36 @@ var imageExts = map[string]bool{
 	".png": true, ".jpg": true, ".jpeg": true, ".gif": true, ".webp": true, ".svg": true, ".bmp": true, ".ico": true,
 }
 
+// videoExts is the set of file extensions recognized as video for preview.
+var videoExts = map[string]bool{
+	".mp4": true, ".webm": true, ".ogg": true,
+}
+
+// audioExts is the set of file extensions recognized as audio for preview.
+var audioExts = map[string]bool{
+	".mp3": true, ".wav": true, ".aac": true, ".flac": true,
+}
+
+// PreviewType returns the preview category for the given file extension:
+// "image", "video", "audio", "pdf", "text", or "" (unsupported).
+func PreviewType(ext string) string {
+	ext = strings.ToLower(ext)
+	switch {
+	case imageExts[ext]:
+		return "image"
+	case videoExts[ext]:
+		return "video"
+	case audioExts[ext]:
+		return "audio"
+	case ext == ".pdf":
+		return "pdf"
+	case textPreviewExts[ext]:
+		return "text"
+	default:
+		return ""
+	}
+}
+
 // previewableExts is the set of file extensions that can be previewed in the Web Console.
 var previewableExts = map[string]bool{
 	// Images
diff --git a/server/templates/buckets/list.html b/server/templates/buckets/list.html
new file mode 100644
index 0000000..a69a652
--- /dev/null
+++ b/server/templates/buckets/list.html
@@ -0,0 +1,30 @@
+<ul class="bucket-list">
+  {{range .Buckets}}
+  <li>
+    <div class="bucket-item-wrap">
+      <a hx-get="/buckets/{{.}}" hx-target="#main-content" hx-push-url="true" class="bucket-item"
+        onclick="document.querySelectorAll('.bucket-item').forEach(el => el.classList.remove('active')); this.classList.add('active')">
+        <span class="obj-icon">
+          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+          </svg>
+        </span>
+        {{.}}
+      </a>
+      <button class="btn-delete-sm"
+        hx-delete="/buckets/{{.}}"
+        hx-confirm="Are you sure you want to delete bucket '{{.}}' and all its contents?"
+        hx-target="closest .bucket-list"
+        hx-swap="outerHTML"
+        title="Delete Bucket">
+        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+        </svg>
+      </button>
+    </div>
+  </li>
+  {{else}}
+  <li style="padding: 1rem; color: var(--text-muted); font-size: 0.875rem;">No buckets found</li>
+  {{end}}
+</ul>
diff --git a/server/templates/buckets/objects.html b/server/templates/buckets/objects.html
index 3af1ca3..cead397 100644
--- a/server/templates/buckets/objects.html
+++ b/server/templates/buckets/objects.html
@@ -129,7 +129,7 @@ <h1>{{.BucketName}}</h1>
           <td>
             <div class="actions-cell">
               {{if isPreviewable .Name .Length}}
-              <button class="btn-view" title="Preview File" onclick="openPreview('/buckets/{{$.BucketName}}/view/{{.Name}}', '{{baseName .Name}}', '/buckets/{{$.BucketName}}/meta/{{.Name}}')">
+              <button class="btn-view" title="Preview File" onclick="openPreview('/buckets/{{$.BucketName}}/preview/{{.Name}}')">
                 <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle>
                 </svg>
@@ -194,7 +194,7 @@ <h1>{{.BucketName}}</h1>
 
     {{range .Objects}}
     {{if isImage .Name}}
-    <div class="gallery-card gallery-image" onclick="openPreview('/buckets/{{$.BucketName}}/view/{{.Name}}', '{{baseName .Name}}', '/buckets/{{$.BucketName}}/meta/{{.Name}}')">
+    <div class="gallery-card gallery-image" onclick="openPreview('/buckets/{{$.BucketName}}/preview/{{.Name}}')">
       <div class="gallery-thumb" data-src="/buckets/{{$.BucketName}}/view/{{.Name}}">
         <div class="gallery-thumb-placeholder">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
@@ -208,7 +208,7 @@ <h1>{{.BucketName}}</h1>
       <span class="gallery-size">{{formatSize .Length}}</span>
     </div>
     {{else}}
-    <div class="gallery-card gallery-file" onclick="{{if isPreviewable .Name .Length}}openPreview('/buckets/{{$.BucketName}}/view/{{.Name}}', '{{baseName .Name}}', '/buckets/{{$.BucketName}}/meta/{{.Name}}'){{end}}">
+    <div class="gallery-card gallery-file" onclick="{{if isPreviewable .Name .Length}}openPreview('/buckets/{{$.BucketName}}/preview/{{.Name}}'){{end}}">
       <div class="gallery-file-icon">
         <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
@@ -236,3 +236,84 @@ <h1>{{.BucketName}}</h1>
   </div>
 </div>
 
+{{define "scripts:buckets/objects.html"}}
+<script>
+  function openPreview(previewUrl) {
+    var modal = document.getElementById('preview-modal');
+    htmx.ajax('GET', previewUrl, {target: '#preview-modal', swap: 'innerHTML'}).then(function() {
+      modal.classList.add('active');
+      document.addEventListener('keydown', previewKeyHandler);
+    });
+  }
+
+  function closePreview() {
+    var modal = document.getElementById('preview-modal');
+    modal.classList.remove('active');
+    modal.innerHTML = '';
+    document.removeEventListener('keydown', previewKeyHandler);
+  }
+
+  function previewKeyHandler(e) {
+    if (e.key === 'Escape') closePreview();
+  }
+
+  function setViewMode(mode, btn) {
+    var listView = document.getElementById('list-view');
+    var galleryView = document.getElementById('gallery-view');
+    if (!listView || !galleryView) return;
+
+    var btns = document.querySelectorAll('.view-toggle-btn');
+    btns.forEach(function(b) { b.classList.remove('active'); });
+    if (btn) {
+      btn.classList.add('active');
+    } else {
+      var idx = mode === 'gallery' ? 1 : 0;
+      if (btns[idx]) btns[idx].classList.add('active');
+    }
+
+    if (mode === 'gallery') {
+      listView.style.display = 'none';
+      galleryView.style.display = '';
+    } else {
+      listView.style.display = '';
+      galleryView.style.display = 'none';
+    }
+    localStorage.setItem('s2-view-mode', mode);
+  }
+
+  function initGalleryView() {
+    var thumbs = document.querySelectorAll('.gallery-thumb[data-src]');
+    if (thumbs.length > 0) {
+      var observer = new IntersectionObserver(function(entries) {
+        entries.forEach(function(entry) {
+          if (!entry.isIntersecting) return;
+          var el = entry.target;
+          var src = el.getAttribute('data-src');
+          if (!src) return;
+          var img = new Image();
+          img.onload = function() {
+            el.innerHTML = '';
+            el.appendChild(img);
+          };
+          img.src = src;
+          img.alt = '';
+          el.removeAttribute('data-src');
+          observer.unobserve(el);
+        });
+      }, {rootMargin: '200px'});
+
+      thumbs.forEach(function(el) { observer.observe(el); });
+    }
+
+    var mode = localStorage.getItem('s2-view-mode') || 'list';
+    setViewMode(mode);
+  }
+
+  document.addEventListener('htmx:afterSettle', function(evt) {
+    if (evt.detail.target.id === 'main-content') {
+      initGalleryView();
+    }
+  });
+</script>
+{{end}}
+
diff --git a/server/templates/buckets/preview.html b/server/templates/buckets/preview.html
new file mode 100644
index 0000000..8e7314f
--- /dev/null
+++ b/server/templates/buckets/preview.html
@@ -0,0 +1,43 @@
+<div class="modal-content">
+  <div class="modal-header">
+    <span>{{.Filename}}</span>
+    <div class="modal-header-actions">
+      <a href="{{.ViewURL}}" class="btn-view" title="Open in new tab" target="_blank">
+        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>
+        </svg>
+      </a>
+      <button class="modal-close" onclick="closePreview()">&times;</button>
+    </div>
+  </div>
+
+  <div class="modal-body">
+    {{if eq .PreviewType "image"}}
+    <img src="{{.ViewURL}}" alt="{{.Filename}}">
+    {{else if eq .PreviewType "video"}}
+    <video controls autoplay><source src="{{.ViewURL}}"></video>
+    {{else if eq .PreviewType "audio"}}
+    <audio controls autoplay><source src="{{.ViewURL}}"></audio>
+    {{else if eq .PreviewType "pdf"}}
+    <iframe src="{{.ViewURL}}"></iframe>
+    {{else if eq .PreviewType "text"}}
+    <pre>{{.TextContent}}</pre>
+    {{else}}
+    <div class="preview-unsupported">
+      <p>Preview not available for this file type.</p>
+      <a href="{{.ViewURL}}" target="_blank" class="btn-primary-sm">Open in New Tab</a>
+    </div>
+    {{end}}
+  </div>
+
+  <div class="modal-meta">
+    <table class="meta-table">
+      <tr><th>Content-Type</th><td>{{.ContentType}}</td></tr>
+      <tr><th>Size</th><td>{{formatSize .Size}}</td></tr>
+      <tr><th>Last Modified</th><td>{{.LastModified}}</td></tr>
+      {{range $k, $v := .Metadata}}
+      <tr><th>{{$k}}</th><td>{{$v}}</td></tr>
+      {{end}}
+    </table>
+  </div>
+</div>
diff --git a/server/templates/empty.html b/server/templates/empty.html
new file mode 100644
index 0000000..9753291
--- /dev/null
+++ b/server/templates/empty.html
@@ -0,0 +1,21 @@
+<div class="header">
+  <div class="welcome-msg">
+    <h1>Storage Overview</h1>
+    <p>Select a bucket from the sidebar to view its objects.</p>
+  </div>
+</div>
+
+<div class="main-view">
+  <div class="empty-state">
+    <div class="empty-icon">
+      <svg viewBox="0 0 24 24" width="80" height="80" fill="none" stroke="currentColor" stroke-width="1.5"
+        stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10"></circle>
+        <line x1="12" y1="8" x2="12" y2="12"></line>
+        <line x1="12" y1="16" x2="12.01" y2="16"></line>
+      </svg>
+    </div>
+    <h2>No Bucket Selected</h2>
+    <p>Navigate through your cloud storage buckets using the sidebar on the left.</p>
+  </div>
+</div>
diff --git a/server/templates/index.html b/server/templates/index.html
index 7386741..cbbe138 100644
--- a/server/templates/index.html
+++ b/server/templates/index.html
@@ -38,62 +38,19 @@ <h3>Buckets</h3>
           </button>
         </div>
 
-        <form class="new-bucket-form" hx-post="/buckets" hx-target="body" hx-push-url="false">
+        <form class="new-bucket-form" hx-post="/buckets" hx-target=".bucket-list" hx-swap="outerHTML"
+          hx-on::after-request="if(event.detail.successful){this.reset();this.classList.remove('active')}">
           <input type="text" name="name" placeholder="New bucket name..." required>
           <button type="submit">Create</button>
         </form>
 
-        <ul class="bucket-list">
-          {{range .Buckets}}
-          <li>
-            <div class="bucket-item-wrap">
-              <a hx-get="/buckets/{{.}}" hx-target="#main-content" hx-push-url="true" class="bucket-item"
-                onclick="document.querySelectorAll('.bucket-item').forEach(el => el.classList.remove('active')); this.classList.add('active')">
-                <span class="obj-icon">
-                  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"
-                    stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
-                  </svg>
-                </span>
-                {{.}}
-              </a>
-              <button class="btn-delete-sm" hx-delete="/buckets/{{.}}" hx-confirm="Are you sure you want to delete bucket '{{.}}' and all its contents?" title="Delete Bucket">
-                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-                </svg>
-              </button>
-            </div>
-          </li>
-          {{else}}
-          <li style="padding: 1rem; color: var(--text-muted); font-size: 0.875rem;">No buckets found</li>
-          {{end}}
-        </ul>
+        {{template "buckets/list.html" .}}
       </div>
     </aside>
 
     <main class="content">
       <div id="main-content">
-        <div class="header">
-          <div class="welcome-msg">
-            <h1>Storage Overview</h1>
-            <p>Select a bucket from the sidebar to view its objects.</p>
-          </div>
-        </div>
-
-        <div class="main-view">
-          <div class="empty-state">
-            <div class="empty-icon">
-              <svg viewBox="0 0 24 24" width="80" height="80" fill="none" stroke="currentColor" stroke-width="1.5"
-                stroke-linecap="round" stroke-linejoin="round">
-                <circle cx="12" cy="12" r="10"></circle>
-                <line x1="12" y1="8" x2="12" y2="12"></line>
-                <line x1="12" y1="16" x2="12.01" y2="16"></line>
-              </svg>
-            </div>
-            <h2>No Bucket Selected</h2>
-            <p>Navigate through your cloud storage buckets using the sidebar on the left.</p>
-          </div>
-        </div>
+        {{template "empty.html" .}}
       </div>
 
       <div id="loading" class="htmx-indicator">
@@ -103,168 +60,9 @@ <h2>No Bucket Selected</h2>
   </div>
 
   <div id="preview-modal" class="modal-overlay" onclick="if(event.target===this)closePreview()">
-    <div class="modal-content">
-      <div class="modal-header">
-        <span id="preview-filename"></span>
-        <div class="modal-header-actions">
-          <a id="preview-download" href="#" class="btn-view" title="Open in new tab" target="_blank">
-            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>
-            </svg>
-          </a>
-          <button class="modal-close" onclick="closePreview()">&times;</button>
-        </div>
-      </div>
-      <div id="preview-body" class="modal-body"></div>
-      <div id="preview-meta" class="modal-meta"></div>
-    </div>
   </div>
 
-  <script>
-    function openPreview(url, filename, metaUrl) {
-      var modal = document.getElementById('preview-modal');
-      var body = document.getElementById('preview-body');
-      var meta = document.getElementById('preview-meta');
-      var fname = document.getElementById('preview-filename');
-      var dl = document.getElementById('preview-download');
-      fname.textContent = filename;
-      dl.href = url;
-      meta.innerHTML = '';
-
-      var ext = filename.split('.').pop().toLowerCase();
-      var imageExts = ['png','jpg','jpeg','gif','webp','svg','bmp','ico'];
-      var videoExts = ['mp4','webm','ogg'];
-      var audioExts = ['mp3','wav','ogg','aac','flac'];
-      var pdfExts = ['pdf'];
-      var textExts = ['txt','md','json','xml','csv','log','yaml','yml','toml','ini','cfg','conf','html','css','js','ts','go','py','rb','rs','java','c','h','cpp','sh','sql','makefile','dockerfile'];
-
-      if (imageExts.indexOf(ext) !== -1) {
-        body.innerHTML = '<img src="'+url+'" alt="'+filename+'">';
-      } else if (videoExts.indexOf(ext) !== -1) {
-        body.innerHTML = '<video controls autoplay><source src="'+url+'"></video>';
-      } else if (audioExts.indexOf(ext) !== -1) {
-        body.innerHTML = '<audio controls autoplay><source src="'+url+'"></audio>';
-      } else if (pdfExts.indexOf(ext) !== -1) {
-        body.innerHTML = '<iframe src="'+url+'"></iframe>';
-      } else if (textExts.indexOf(ext) !== -1) {
-        body.innerHTML = '<div class="preview-loading"><div class="spinner"></div></div>';
-        fetch(url).then(function(r){return r.text()}).then(function(text){
-          var pre = document.createElement('pre');
-          pre.textContent = text;
-          body.innerHTML = '';
-          body.appendChild(pre);
-        });
-      } else {
-        body.innerHTML = '<div class="preview-unsupported"><p>Preview not available for this file type.</p><a href="'+url+'" target="_blank" class="btn-primary-sm">Open in New Tab</a></div>';
-      }
-
-      if (metaUrl) {
-        fetch(metaUrl).then(function(r){return r.json()}).then(function(data) {
-          var html = '<table class="meta-table">';
-          html += '<tr><th>Content-Type</th><td>' + (data.contentType || '-') + '</td></tr>';
-          html += '<tr><th>Size</th><td>' + formatBytes(data.size || 0) + '</td></tr>';
-          html += '<tr><th>Last Modified</th><td>' + (data.lastModified || '-') + '</td></tr>';
-          if (data.metadata) {
-            for (var key in data.metadata) {
-              html += '<tr><th>' + escapeHtml(key) + '</th><td>' + escapeHtml(data.metadata[key]) + '</td></tr>';
-            }
-          }
-          html += '</table>';
-          meta.innerHTML = html;
-        });
-      }
-
-      modal.classList.add('active');
-      document.addEventListener('keydown', previewKeyHandler);
-    }
-
-    function closePreview() {
-      var modal = document.getElementById('preview-modal');
-      modal.classList.remove('active');
-      document.getElementById('preview-body').innerHTML = '';
-      document.getElementById('preview-meta').innerHTML = '';
-      document.removeEventListener('keydown', previewKeyHandler);
-    }
-
-    function previewKeyHandler(e) {
-      if (e.key === 'Escape') closePreview();
-    }
-
-    function formatBytes(bytes) {
-      if (bytes === 0) return '0 B';
-      var units = ['B','KB','MB','GB','TB'];
-      var i = Math.floor(Math.log(bytes) / Math.log(1024));
-      return (bytes / Math.pow(1024, i)).toFixed(i ? 1 : 0) + ' ' + units[i];
-    }
-
-    function escapeHtml(str) {
-      var div = document.createElement('div');
-      div.textContent = str;
-      return div.innerHTML;
-    }
-
-    function setViewMode(mode, btn) {
-      var listView = document.getElementById('list-view');
-      var galleryView = document.getElementById('gallery-view');
-      if (!listView || !galleryView) return;
-
-      var btns = document.querySelectorAll('.view-toggle-btn');
-      btns.forEach(function(b) { b.classList.remove('active'); });
-      if (btn) {
-        btn.classList.add('active');
-      } else {
-        // Find the correct button by index
-        var idx = mode === 'gallery' ? 1 : 0;
-        if (btns[idx]) btns[idx].classList.add('active');
-      }
-
-      if (mode === 'gallery') {
-        listView.style.display = 'none';
-        galleryView.style.display = '';
-      } else {
-        listView.style.display = '';
-        galleryView.style.display = 'none';
-      }
-      localStorage.setItem('s2-view-mode', mode);
-    }
-
-    function initGalleryView() {
-      // Set up Intersection Observer for lazy-loading thumbnails
-      var thumbs = document.querySelectorAll('.gallery-thumb[data-src]');
-      if (thumbs.length > 0) {
-        var observer = new IntersectionObserver(function(entries) {
-          entries.forEach(function(entry) {
-            if (!entry.isIntersecting) return;
-            var el = entry.target;
-            var src = el.getAttribute('data-src');
-            if (!src) return;
-            var img = new Image();
-            img.onload = function() {
-              el.innerHTML = '';
-              el.appendChild(img);
-            };
-            img.src = src;
-            img.alt = '';
-            el.removeAttribute('data-src');
-            observer.unobserve(el);
-          });
-        }, {rootMargin: '200px'});
-
-        thumbs.forEach(function(el) { observer.observe(el); });
-      }
-
-      // Restore view mode from localStorage
-      var mode = localStorage.getItem('s2-view-mode') || 'list';
-      setViewMode(mode);
-    }
-
-    // Re-initialize gallery after HTMX content settles into the DOM
-    document.addEventListener('htmx:afterSettle', function(evt) {
-      if (evt.detail.target.id === 'main-content') {
-        initGalleryView();
-      }
-    });
-  </script>
+  <div hx-get="/scripts" hx-trigger="load" hx-swap="innerHTML" style="display:none;"></div>
 </body>
 
 </html>
\ No newline at end of file