diff --git a/modules/theme/theme.go b/modules/theme/theme.go
index 762926d78f..a1daf31369 100644
--- a/modules/theme/theme.go
+++ b/modules/theme/theme.go
@@ -78,3 +78,15 @@ func loadThemesInner(assetFs *assetfs.LayeredFS) ([]string, error) {
 		return nil, fmt.Errorf("no themes found")
 	}
 }
+
+// GetFriendlyThemeName converts an raw theme name (forgejo-dark) to a friendly name (Forgejo Dark)
+//
+// Example: forgejo-dark -> Forgejo Dark, catppuccin-maroon-auto -> Catppuccin Maroon Auto
+func GetFriendlyThemeName(themeName string) string {
+	themeName = strings.ReplaceAll(themeName, "-", " ")
+
+	themeName = strings.ToLower(themeName)
+	themeName = strings.Title(themeName)
+
+	return themeName
+}
diff --git a/routers/web/user/setting/profile.go b/routers/web/user/setting/profile.go
index 1dee0d641f..7009fb767d 100644
--- a/routers/web/user/setting/profile.go
+++ b/routers/web/user/setting/profile.go
@@ -345,6 +345,10 @@ func Appearance(ctx *context.Context) {
 		if ctx.Locale.HasKey(fullThemeName) {
 			return ctx.Locale.TrString(fullThemeName)
 		}
+
+		// We should probably cache, because this does some operations on the string
+		themeName = theme.GetFriendlyThemeName(themeName)
+
 		return themeName
 	}
 
diff --git a/templates/user/settings/appearance.tmpl b/templates/user/settings/appearance.tmpl
index 12153f78d4..be2b8d9962 100644
--- a/templates/user/settings/appearance.tmpl
+++ b/templates/user/settings/appearance.tmpl
@@ -15,8 +15,7 @@
 			<form class="ui form" action="{{.Link}}/theme" method="post">
 				{{.CsrfTokenHtml}}
 					<div class="field">
-						<label for="ui">{{ctx.Locale.Tr "settings.ui"}}</label>
-						<div class="ui selection dropdown" id="ui">
+						<div class="ui search selection dropdown" id="ui">
 							<input name="theme" type="hidden" value="{{.SignedUser.Theme}}">
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="text">
@@ -53,7 +52,7 @@
 				</div>
 				{{.CsrfTokenHtml}}
 				<div class="field">
-					<div class="ui language selection dropdown" id="language">
+					<div class="ui search language selection dropdown" id="language">
 						<input name="language" type="hidden" value="{{.SignedUser.Language}}">
 						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="text">{{range .AllLangs}}{{if eq $.SignedUser.Language .Lang}}{{.Name}}{{end}}{{end}}</div>