diff --git a/handlers/home.go b/handlers/home.go
index d35c8df..2c216ed 100644
--- a/handlers/home.go
+++ b/handlers/home.go
@@ -2,6 +2,8 @@ package handlers
 
 import (
 	"net/http"
+	"templ-test/domain"
+	"templ-test/models"
 	"templ-test/views/home"
 
 	"github.com/labstack/echo/v4"
@@ -12,13 +14,27 @@ func (h *Handlers) HomeHandler(c echo.Context) error {
 }
 
 func (h *Handlers) Settings(c echo.Context) error {
-	return Render(c, http.StatusOK, home.UserSettings())
+	m := models.SettingsViewModel{}
+	darkMode, err := c.Cookie(domain.CookieSettingsDarkMode)
+	if err == nil {
+		m.DarkMode = darkMode.Value
+	}
+
+	return Render(c, http.StatusOK, home.UserSettings(m))
 }
 
 func (h *Handlers) SettingsPost(c echo.Context) error {
 	// take in the updated values from he user and write the cookies... tbd
+	useDarkMode := c.FormValue(domain.CookieSettingsDarkMode)
+	if useDarkMode != "" {
+		darkModeCookie := new(http.Cookie)
+		darkModeCookie.Name = domain.CookieSettingsDarkMode
+		darkModeCookie.Value = useDarkMode
 
-	return Render(c, http.StatusOK, home.UserSettings())
+		c.SetCookie(darkModeCookie)
+	}
+
+	return Render(c, http.StatusOK, home.SettingsUpdated())
 }
 
 //func (h *Handlers) ListHandler(c echo.Context) error {
diff --git a/views/home/settings.templ b/views/home/settings.templ
index 30da693..2c50972 100644
--- a/views/home/settings.templ
+++ b/views/home/settings.templ
@@ -1,9 +1,33 @@
 package home
 
 import "templ-test/views/layout"
+import "templ-test/views/components/bootstrap"
+import "templ-test/models"
+import "templ-test/domain"
 
-templ UserSettings() {
-	@layout.Testing("Settings") {
-		<h2>This is not ready yet</h2>
+const (
+	test = "t"
+)
+
+templ UserSettings(model models.SettingsViewModel) {
+	@layout.WithLayout("Settings") {
+		<form hx-post="/settings">
+			<div class="mb-3">
+				if useDarkMode(model.DarkMode) {
+					@bootstrap.Switch("darkmode", bootstrap.SwitchTypeCheckbox, test, true)
+				} else {
+					@bootstrap.Switch("darkmode", bootstrap.SwitchTypeCheckbox, "flexSwitchCheckDefault", true)
+				}
+				@bootstrap.Label("form-check-label", domain.CookieSettingsDarkMode, "flexSwitchCheckDefault", "Use Dark Mode")
+			</div>
+			@bootstrap.BootstrapButton("Submit", bootstrap.VariantInfo, bootstrap.ButtonTypeSubmit)
+		</form>
 	}
 }
+
+func useDarkMode(value string) bool {
+	if value == "on" {
+		return true
+	}
+	return false
+}
\ No newline at end of file
diff --git a/views/home/settingsUpdated.templ b/views/home/settingsUpdated.templ
new file mode 100644
index 0000000..33440c1
--- /dev/null
+++ b/views/home/settingsUpdated.templ
@@ -0,0 +1,9 @@
+package home
+
+import "templ-test/views/layout"
+
+templ SettingsUpdated() {
+    @layout.WithLayout("Settings Updated") {
+        <p>You are now free to move about the cabin.  Thank you for saving with us!</p>
+    }
+}
\ No newline at end of file