diff --git a/ShhShell/Themes/ColorCodable.swift b/ShhShell/Themes/ColorCodable.swift
index 2a18ab5..70a434e 100644
--- a/ShhShell/Themes/ColorCodable.swift
+++ b/ShhShell/Themes/ColorCodable.swift
@@ -46,7 +46,7 @@ extension ColorCodable {
 			let blue = CGFloat(self.blue)
 			return Color(UIColor(red: red, green: green, blue: blue, alpha: 1))
 		}
-		set {
+		mutating set {
 			let cc = ColorCodable(color: newValue)
 			self.red = cc.red
 			self.green = cc.green
diff --git a/ShhShell/Themes/Theme.swift b/ShhShell/Themes/Theme.swift
index 33bcde0..b5880b4 100644
--- a/ShhShell/Themes/Theme.swift
+++ b/ShhShell/Themes/Theme.swift
@@ -77,6 +77,12 @@ struct Theme: Hashable, Equatable, Identifiable {
 	static var builtinThemes: [Theme] {
 		return ThemesBuiltin.allCases.map({ decodeLocalTheme(fileName: $0.rawValue)! })
 	}
+	
+	static var newTheme: Theme {
+		var result = defaultTheme
+		result.id = UUID().uuidString
+		return result
+	}
 }
 
 enum ThemesBuiltin: String, CaseIterable, Hashable, Equatable {
diff --git a/ShhShell/Views/Themes/ThemeButton.swift b/ShhShell/Views/Themes/ThemeButton.swift
index 760f6ef..03af4d8 100644
--- a/ShhShell/Views/Themes/ThemeButton.swift
+++ b/ShhShell/Views/Themes/ThemeButton.swift
@@ -12,6 +12,9 @@ struct ThemeButton: View {
 	@Binding var theme: Theme
 	@State var canModify: Bool
 	
+	@Binding var themeToEdit: Theme
+	@Binding var showThemeEditor: Bool
+	
 	@State private var showRenameAlert: Bool = false
 	@State private var rename: String = ""
 	
@@ -79,8 +82,9 @@ struct ThemeButton: View {
 		.clipShape(RoundedRectangle(cornerRadius: outerR))
 		.contextMenu {
 			if canModify {
-				NavigationLink {
-					ThemeEditorView(hostsManager: hostsManager, theme: $theme)
+				Button {
+					themeToEdit = theme
+					showThemeEditor = true
 				} label: {
 					Label("Edit", systemImage: "pencil")
 				}
@@ -122,7 +126,9 @@ struct ThemeButton: View {
 	ThemeButton(
 		hostsManager: HostsManager(),
 		theme: .constant(Theme.defaultTheme),
-		canModify: true
+		canModify: true,
+		themeToEdit: .constant(Theme.defaultTheme),
+		showThemeEditor: .constant(false)
 	)
 	.border(Color.red)
 }
diff --git a/ShhShell/Views/Themes/ThemeEditorView.swift b/ShhShell/Views/Themes/ThemeEditorView.swift
index 484ab5f..37edd68 100644
--- a/ShhShell/Views/Themes/ThemeEditorView.swift
+++ b/ShhShell/Views/Themes/ThemeEditorView.swift
@@ -20,15 +20,36 @@ struct ThemeEditorView: View {
 			hostsManager.selectedTheme.background.suiColor.opacity(0.7)
 				.ignoresSafeArea(.all)
 			NavigationStack {
-				ThemeButton(hostsManager: hostsManager, theme: $theme, canModify: false)
-					.id(theme)
-					.padding(.bottom)
-					.fixedSize(horizontal: false, vertical: true)
-					.onChange(of: theme) { _ in
-						print(theme)
+				ZStack {
+					RoundedRectangle(cornerRadius: 20)
+						.foregroundStyle(theme.background.suiColor)
+					VStack {
+						Text(theme.name)
+							.foregroundStyle(theme.foreground.suiColor)
+							.font(.headline)
+							.lineLimit(1)
+						Spacer()
+						VStack(spacing: 0) {
+							ForEach(0...1, id: \.self) { row in
+								HStack(spacing: 0) {
+									let range = row == 0 ? 0..<8 : 8..<16
+									ForEach(range, id: \.self) { col in
+										Rectangle()
+											.aspectRatio(1, contentMode: .fit)
+											.foregroundStyle(theme.ansi[col].suiColor)
+									}
+								}
+							}
+						}
+						.clipShape(RoundedRectangle(cornerRadius: 10))
 					}
+					.padding(10)
+				}
+				.fixedSize(horizontal: false, vertical: true)
+				.background(.black)
+				.padding(.horizontal)
 				
-				List {					
+				List {
 					Section("Main Colors") {
 						ColorPicker("Text", selection: $theme.foreground.suiColor, supportsOpacity: false)
 						ColorPicker("Background", selection: $theme.background.suiColor, supportsOpacity: false)
diff --git a/ShhShell/Views/Themes/ThemeManagerView.swift b/ShhShell/Views/Themes/ThemeManagerView.swift
index 9f68760..c38e292 100644
--- a/ShhShell/Views/Themes/ThemeManagerView.swift
+++ b/ShhShell/Views/Themes/ThemeManagerView.swift
@@ -79,7 +79,13 @@ struct ThemeManagerView: View {
 						} else {
 							LazyVGrid(columns: layout, alignment: .center, spacing: 8) {
 								ForEach($hostsManager.themes) { $theme in
-									ThemeButton(hostsManager: hostsManager, theme: $theme, canModify: true)
+									ThemeButton(
+										hostsManager: hostsManager,
+										theme: $theme,
+										canModify: true,
+										themeToEdit: $newTheme,
+										showThemeEditor: $showNewThemeEditor
+									)
 								}
 							}
 							.padding(.horizontal)
@@ -95,7 +101,13 @@ struct ThemeManagerView: View {
 						}
 						LazyVGrid(columns: layout, alignment: .center, spacing: 8) {
 							ForEach(Theme.builtinThemes) { theme in
-								ThemeButton(hostsManager: hostsManager, theme: .constant(theme), canModify: false)
+								ThemeButton(
+									hostsManager: hostsManager,
+									theme: .constant(theme),
+									canModify: false,
+									themeToEdit: .constant(Theme.defaultTheme),
+									showThemeEditor: .constant(false)
+								)
 							}
 						}
 						.padding(.horizontal)
@@ -134,14 +146,18 @@ struct ThemeManagerView: View {
 						
 						ToolbarItem() {
 							Button() {
-								newTheme = Theme.defaultTheme
+								let createdTheme = Theme.newTheme
+								hostsManager.themes.append(createdTheme)
+								newTheme = createdTheme
 								showNewThemeEditor = true
 							} label: {
 								Label("New", systemImage: "plus")
 							}
 						}
 					}
-					.navigationDestination(isPresented: $showNewThemeEditor) {
+					.sheet(isPresented: $showNewThemeEditor) {
+						hostsManager.updateTheme(newTheme)
+					} content: {
 						ThemeEditorView(hostsManager: hostsManager, theme: $newTheme)
 					}
 				}