diff --git a/go.mod b/go.mod
index 867c3e4..f110f6a 100644
--- a/go.mod
+++ b/go.mod
@@ -1,11 +1,12 @@
 module github.com/matbur/image-text
 
-go 1.21
+go 1.23
 
 toolchain go1.23.0
 
 require (
 	github.com/a-h/templ v0.2.793
+	github.com/elliotchance/pie/v2 v2.9.1
 	github.com/go-chi/chi/v5 v5.1.0
 	github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0
 	github.com/hashicorp/go-multierror v1.1.1
@@ -18,5 +19,6 @@ require (
 	github.com/davecgh/go-spew v1.1.1 // indirect
 	github.com/hashicorp/errwrap v1.0.0 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
+	golang.org/x/exp v0.0.0-20220321173239-a90fa8a75705 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 )
diff --git a/go.sum b/go.sum
index 015e924..138591b 100644
--- a/go.sum
+++ b/go.sum
@@ -2,6 +2,8 @@ github.com/a-h/templ v0.2.793 h1:Io+/ocnfGWYO4VHdR0zBbf39PQlnzVCVVD+wEEs6/qY=
 github.com/a-h/templ v0.2.793/go.mod h1:lq48JXoUvuQrU0VThrK31yFwdRjTCnIE5bcPCM9IP1w=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/elliotchance/pie/v2 v2.9.1 h1:v7TdC6ZdNZJ1HACofpLXvGKHUk307AjY/bttwDPWKEQ=
+github.com/elliotchance/pie/v2 v2.9.1/go.mod h1:18t0dgGFH006g4eVdDtWfgFZPQEgl10IoEO8YWEq3Og=
 github.com/go-chi/chi/v5 v5.1.0 h1:acVI1TYaD+hhedDJ3r54HyA6sExp3HfXq7QWEEY/xMw=
 github.com/go-chi/chi/v5 v5.1.0/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
 github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0 h1:DACJavvAHhabrF08vX0COfcOBJRhZ8lUbR+ZWIs0Y5g=
@@ -18,6 +20,8 @@ github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZb
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
 github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+golang.org/x/exp v0.0.0-20220321173239-a90fa8a75705 h1:ba9YlqfDGTTQ5aZ2fwOoQ1hf32QySyQkR6ODGDzHlnE=
+golang.org/x/exp v0.0.0-20220321173239-a90fa8a75705/go.mod h1:lgLbSvA5ygNOMpwM/9anMpWVlVJ7Z+cHWq/eFuinpGE=
 golang.org/x/image v0.0.0-20191214001246-9130b4cfad52 h1:2fktqPPvDiVEEVT/vSTeoUPXfmRxRaGy6GU8jypvEn0=
 golang.org/x/image v0.0.0-20191214001246-9130b4cfad52/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
diff --git a/server/server.go b/server/server.go
index 635b86a..a3b9087 100644
--- a/server/server.go
+++ b/server/server.go
@@ -9,6 +9,7 @@ import (
 	"time"
 
 	"github.com/a-h/templ"
+	"github.com/elliotchance/pie/v2"
 	"github.com/go-chi/chi/v5"
 	"github.com/go-chi/chi/v5/middleware"
 
@@ -57,11 +58,13 @@ func handleMain(w http.ResponseWriter, r *http.Request) {
 	u = u.JoinPath(size, bgColor, fgColor)
 
 	params := templates.IndexPageParams{
-		Text:    text,
-		BgColor: bgColor,
-		FgColor: fgColor,
-		Size:    size,
-		Image:   u.String(),
+		Text:         text,
+		BgColor:      bgColor,
+		FgColor:      fgColor,
+		Size:         size,
+		Image:        u.String(),
+		ColorOptions: pie.Keys(image.KnownColors()),
+		SizeOptions:  pie.Keys(image.KnownSizes()),
 	}
 	templ.Handler(templates.IndexPage(params)).ServeHTTP(w, r)
 }
@@ -100,6 +103,8 @@ func handlePost(w http.ResponseWriter, r *http.Request) {
 	slog.Info("Image url", "url", u.String())
 
 	params.Image = u.String()
+	params.ColorOptions = pie.Keys(image.KnownColors())
+	params.SizeOptions = pie.Keys(image.KnownSizes())
 	templ.Handler(templates.IndexPage(params)).ServeHTTP(w, r)
 }
 
diff --git a/templates/templates.templ b/templates/templates.templ
index 3eed139..6ca7d4f 100644
--- a/templates/templates.templ
+++ b/templates/templates.templ
@@ -66,68 +66,100 @@ type IndexPageParams struct {
 	FgColor string `json:"fg_color"`
 	Size    string `json:"size"`
 	Image   string `json:"-"`
+
+	ColorOptions []string `json:"-"`
+	SizeOptions  []string `json:"-"`
 }
 
 templ IndexPage(params IndexPageParams) {
 	@layout() {
 		<div class="container mt-5">
-			<a href="/">
-				<h1>image-text</h1>
-			</a>
-			<a href="/docs" hx-boost="false">docs</a>
-			<form
-				id="dynamicForm"
-				method="post"
-				action="/"
-				hx-post="/post"
-				hx-target="body"
-			>
-				<div class="form-group">
-					<label for="textInput">Text:</label>
-					<input
-						type="text"
-						id="textInput"
-						class="form-control"
-						value={ params.Text }
-						name="text"
-					/>
-				</div>
-				<div class="form-group">
-					<label for="bgColor">Background Color:</label>
-					<input
-						type="text"
-						id="bgColor"
-						class="form-control"
-						value={ params.BgColor }
-						name="bg_color"
-					/>
-				</div>
-				<div class="form-group">
-					<label for="fgColor">Foreground Color:</label>
-					<input
-						type="text"
-						id="fgColor"
-						class="form-control"
-						value={ params.FgColor }
-						name="fg_color"
-					/>
+			<div class="row">
+				<div class="col">
+					<a href="/">
+						<h1>image-text</h1>
+					</a>
+					<a href="/docs" hx-boost="false">docs</a>
+					<form
+						method="post"
+						action="/"
+						hx-post="/post"
+						hx-target="body"
+					>
+						<div class="row mb-3">
+							<label for="bg_color" class="col-sm-2 col-form-label">Background color</label>
+							<div class="col-sm-10">
+								<input
+									type="text"
+									class="form-control"
+									id="bg_color"
+									value={ params.BgColor }
+									name="bg_color"
+									list="bg_color_options"
+								/>
+								<datalist id="bg_color_options">
+									for _, c := range params.ColorOptions {
+										<option value={ c }></option>
+									}
+								</datalist>
+							</div>
+						</div>
+						<div class="row mb-3">
+							<label for="fg_color" class="col-sm-2 col-form-label">Text color</label>
+							<div class="col-sm-10">
+								<input
+									type="text"
+									class="form-control"
+									id="fg_color"
+									value={ params.FgColor }
+									name="fg_color"
+									list="fg_color_options"
+								/>
+								<datalist id="fg_color_options">
+									for _, c := range params.ColorOptions {
+										<option value={ c }></option>
+									}
+								</datalist>
+							</div>
+						</div>
+						<div class="row mb-3">
+							<label for="size" class="col-sm-2 col-form-label">Size</label>
+							<div class="col-sm-10">
+								<input
+									type="size"
+									class="form-control"
+									id="size"
+									value={ params.Size }
+									name="size"
+									list="size_options"
+								/>
+								<datalist id="size_options">
+									for _, c := range params.SizeOptions {
+										<option value={ c }></option>
+									}
+								</datalist>
+							</div>
+						</div>
+						<div class="row mb-3">
+							<label for="text" class="col-sm-2 col-form-label">Text</label>
+							<div class="col-sm-10">
+								<input
+									type="text"
+									class="form-control"
+									id="text"
+									value={ params.Text }
+									name="text"
+								/>
+							</div>
+						</div>
+						<button type="submit" class="btn btn-primary">Submit</button>
+					</form>
+					<div class="mt-3">
+						if params.Image != "" {
+							<img src={ params.Image }/>
+						}
+					</div>
 				</div>
-				<div class="form-group">
-					<label for="size">Size:</label>
-					<input
-						type="text"
-						id="size"
-						class="form-control"
-						value={ params.Size }
-						name="size"
-					/>
-				</div>
-				<button type="submit" class="btn btn-primary">Submit</button>
-			</form>
-			<div class="mt-3">
-				if params.Image != "" {
-					<img src={ params.Image }/>
-				}
 			</div>
 		</div>
 	}
diff --git a/templates/templates_templ.go b/templates/templates_templ.go
index ff4a7de..48ee2f9 100644
--- a/templates/templates_templ.go
+++ b/templates/templates_templ.go
@@ -121,6 +121,9 @@ type IndexPageParams struct {
 	FgColor string `json:"fg_color"`
 	Size    string `json:"size"`
 	Image   string `json:"-"`
+
+	ColorOptions []string `json:"-"`
+	SizeOptions  []string `json:"-"`
 }
 
 func IndexPage(params IndexPageParams) templ.Component {
@@ -156,59 +159,128 @@ func IndexPage(params IndexPageParams) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container mt-5\"><a href=\"/\"><h1>image-text</h1></a> <a href=\"/docs\" hx-boost=\"false\">docs</a><form id=\"dynamicForm\" method=\"post\" action=\"/\" hx-post=\"/post\" hx-target=\"body\"><div class=\"form-group\"><label for=\"textInput\">Text:</label> <input type=\"text\" id=\"textInput\" class=\"form-control\" value=\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container mt-5\"><div class=\"row\"><div class=\"col\"><a href=\"/\"><h1>image-text</h1></a> <a href=\"/docs\" hx-boost=\"false\">docs</a><form method=\"post\" action=\"/\" hx-post=\"/post\" hx-target=\"body\"><div class=\"row mb-3\"><label for=\"bg_color\" class=\"col-sm-2 col-form-label\">Background color</label><div class=\"col-sm-10\"><input type=\"text\" class=\"form-control\" id=\"bg_color\" value=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var6 string
-			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(params.Text)
+			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(params.BgColor)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/templates.templ`, Line: 91, Col: 25}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/templates.templ`, Line: 96, Col: 31}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"text\"></div><div class=\"form-group\"><label for=\"bgColor\">Background Color:</label> <input type=\"text\" id=\"bgColor\" class=\"form-control\" value=\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"bg_color\" list=\"bg_color_options\"> <datalist id=\"bg_color_options\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for _, c := range params.ColorOptions {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<option value=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var7 string
+				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(c)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/templates.templ`, Line: 102, Col: 27}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></option>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</datalist></div></div><div class=\"row mb-3\"><label for=\"fg_color\" class=\"col-sm-2 col-form-label\">Text color</label><div class=\"col-sm-10\"><input type=\"text\" class=\"form-control\" id=\"fg_color\" value=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(params.BgColor)
+			var templ_7745c5c3_Var8 string
+			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(params.FgColor)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/templates.templ`, Line: 101, Col: 28}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/templates.templ`, Line: 114, Col: 31}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"bg_color\"></div><div class=\"form-group\"><label for=\"fgColor\">Foreground Color:</label> <input type=\"text\" id=\"fgColor\" class=\"form-control\" value=\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"fg_color\" list=\"fg_color_options\"> <datalist id=\"fg_color_options\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var8 string
-			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(params.FgColor)
+			for _, c := range params.ColorOptions {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<option value=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var9 string
+				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(c)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/templates.templ`, Line: 120, Col: 27}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></option>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</datalist></div></div><div class=\"row mb-3\"><label for=\"size\" class=\"col-sm-2 col-form-label\">Size</label><div class=\"col-sm-10\"><input type=\"size\" class=\"form-control\" id=\"size\" value=\"")
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/templates.templ`, Line: 111, Col: 28}
+				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+			var templ_7745c5c3_Var10 string
+			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(params.Size)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/templates.templ`, Line: 132, 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 = templ_7745c5c3_Buffer.WriteString("\" name=\"size\" list=\"size_options\"> <datalist id=\"size_options\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"fg_color\"></div><div class=\"form-group\"><label for=\"size\">Size:</label> <input type=\"text\" id=\"size\" class=\"form-control\" value=\"")
+			for _, c := range params.SizeOptions {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<option value=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var11 string
+				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(c)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/templates.templ`, Line: 138, Col: 27}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></option>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</datalist></div></div><div class=\"row mb-3\"><label for=\"text\" class=\"col-sm-2 col-form-label\">Text</label><div class=\"col-sm-10\"><input type=\"text\" class=\"form-control\" id=\"text\" value=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var9 string
-			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(params.Size)
+			var templ_7745c5c3_Var12 string
+			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(params.Text)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/templates.templ`, Line: 121, Col: 25}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/templates.templ`, Line: 150, Col: 28}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"size\"></div><button type=\"submit\" class=\"btn btn-primary\">Submit</button></form><div class=\"mt-3\">")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"text\"></div></div><button type=\"submit\" class=\"btn btn-primary\">Submit</button></form><div class=\"mt-3\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -217,12 +289,12 @@ func IndexPage(params IndexPageParams) templ.Component {
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var10 string
-				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(params.Image)
+				var templ_7745c5c3_Var13 string
+				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(params.Image)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/templates.templ`, Line: 129, Col: 28}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/templates.templ`, Line: 159, Col: 30}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -231,7 +303,7 @@ func IndexPage(params IndexPageParams) templ.Component {
 					return templ_7745c5c3_Err
 				}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}