diff --git a/server/routes/page_devices_add.go b/server/routes/page_devices_add.go
new file mode 100644
index 0000000..42fb486
--- /dev/null
+++ b/server/routes/page_devices_add.go
@@ -0,0 +1,20 @@
+package routes
+
+import (
+	"net/http"
+
+	"github.com/tigorlazuardi/redmage/pkg/log"
+	"github.com/tigorlazuardi/redmage/views"
+	"github.com/tigorlazuardi/redmage/views/devicesview/adddevice"
+)
+
+func (routes *Routes) PageDevicesAdd(rw http.ResponseWriter, req *http.Request) {
+	ctx, span := tracer.Start(req.Context(), "*Routes.PageDevicesAdd")
+	defer span.End()
+
+	c := views.NewContext(routes.Config, req)
+
+	if err := adddevice.View(c).Render(ctx, rw); err != nil {
+		log.New(ctx).Err(err).Error("failed to render add device page")
+	}
+}
diff --git a/server/routes/routes.go b/server/routes/routes.go
index e1056f5..49520ef 100644
--- a/server/routes/routes.go
+++ b/server/routes/routes.go
@@ -82,6 +82,7 @@ func (routes *Routes) registerWWWRoutes(router chi.Router) {
 		r.Get("/subreddits/add", routes.PageSubredditsAdd)
 		r.Get("/config", routes.PageConfig)
 		r.Get("/devices", routes.PageDevices)
+		r.Get("/devices/add", routes.PageDevicesAdd)
 		r.Get("/devices/details/{slug}", routes.PageDeviceDetails)
 		r.Get("/schedules", routes.PageScheduleHistory)
 	})
diff --git a/views/devicesview/adddevice/view.templ b/views/devicesview/adddevice/view.templ
new file mode 100644
index 0000000..72e2449
--- /dev/null
+++ b/views/devicesview/adddevice/view.templ
@@ -0,0 +1,22 @@
+package adddevice
+
+import "github.com/tigorlazuardi/redmage/views"
+import "github.com/tigorlazuardi/redmage/views/components"
+
+templ View(c *views.Context) {
+	@components.Doctype() {
+		@components.Head(c, components.HeadTitle("Device - Add"))
+		@components.Body(c) {
+			@Content(c)
+		}
+	}
+}
+
+templ Content(c *views.Context) {
+	<main class="prose min-w-full">
+		@components.Container() {
+			<h1>Add Device</h1>
+			<div class="divider"></div>
+		}
+	</main>
+}
diff --git a/views/devicesview/filter.templ b/views/devicesview/filter.templ
index ee7814d..2f9dd13 100644
--- a/views/devicesview/filter.templ
+++ b/views/devicesview/filter.templ
@@ -13,7 +13,7 @@ templ filter(data Data) {
 		hx-select="main"
 		hx-swap="outerHTML"
 		hx-push-url="true"
-		class="grid md:grid-cols-2 gap-4"
+		class="grid md:grid-cols-[1fr,3fr] lg:grid-cols-2 gap-4"
 	>
 		<label class="input input-bordered flex items-center gap-2">
 			<input
diff --git a/views/devicesview/view.templ b/views/devicesview/view.templ
index 7646038..941c539 100644
--- a/views/devicesview/view.templ
+++ b/views/devicesview/view.templ
@@ -30,7 +30,10 @@ templ DevicesContent(c *views.Context, data Data) {
 			if data.Error != "" {
 				@components.ErrorToast(data.Error)
 			} else {
-				<h1>Devices</h1>
+				<div class="flex justify-between items-center">
+					<h1 class="my-auto">Devices</h1>
+					<a href="/devices/add" class="btn btn-primary no-underline text-base-100">Add Device</a>
+				</div>
 				<div class="divider"></div>
 				@filter(data)
 				<h2>{ strconv.FormatInt(data.Total, 10) } Devices</h2>