diff --git a/tem/html/pages/sc.html b/tem/html/pages/sc.html
new file mode 100644
index 0000000..49df2e4
--- /dev/null
+++ b/tem/html/pages/sc.html
@@ -0,0 +1,30 @@
+{{ template "head.html" .}}
+
+<div style='height: 44px; width: 100%;'></div>
+
+<div
+  style="
+    display: flex;
+    align-items: baseline;
+    width: 100%;
+    justify-content: left;
+    padding-left: 12px;
+  "
+>
+  <h1 style='word-wrap: break-word; hyphens: auto;'>
+    {{ .Title }}
+  </h1>
+  <p>{{ .Desc }}</p>
+</div>
+
+<img src="/public/img/spatial.svg" width="100%" />
+
+<div style='height: 12px; width: 100%;'></div>
+
+<h2>spatial computing</h2>
+<p>signed unbounded 3d space</p>
+
+<h2>paper computing</h2>
+<p>unsigned bounded 2d space</p>
+
+<div style='height: 128px; width: 100%;'></div>
diff --git a/web/pages/sc/sc.go b/web/pages/sc/sc.go
new file mode 100644
index 0000000..a8b8a4c
--- /dev/null
+++ b/web/pages/sc/sc.go
@@ -0,0 +1,20 @@
+package sc
+
+import (
+	"net/http"
+
+	"dofdev/tem"
+)
+
+// func Handler(ctx *gin.Context) {
+func Handler(w http.ResponseWriter, r *http.Request) {
+	data := struct {
+	}{}
+	tem.Render(
+		w, r,
+		"sc.html",
+		"sc",
+		"spatial computing vs paper computing",
+		data,
+	)
+}