diff --git a/.fastn/config.json b/.fastn/config.json
index 33810105..58450d7e 100644
--- a/.fastn/config.json
+++ b/.fastn/config.json
@@ -1597,8 +1597,8 @@
         },
         "components/label-text.ftd": {
           "name": "components/label-text.ftd",
-          "checksum": "2FD6F02B7A1A3B41417BA48F378B2ED076C494B955F6FB53DCCE061A0B0250B1",
-          "size": 1628
+          "checksum": "7287117D126182A09923CDBC063531F298C124FA9206100084531B4F139B0C12",
+          "size": 1606
         },
         "components/toggle.ftd": {
           "name": "components/toggle.ftd",
@@ -1692,8 +1692,8 @@
         },
         "record.ftd": {
           "name": "record.ftd",
-          "checksum": "9EB82634CCE4C7B004510FBC5C65310AF12584C1BEEA481F6B2C4B88AAF1F100",
-          "size": 291
+          "checksum": "50E29512E4B805A9E862DA2D94AC2C1275DDE4C3B146F3F326D6ACA3D497699E",
+          "size": 320
         },
         "slide.ftd": {
           "name": "slide.ftd",
@@ -1706,8 +1706,8 @@
           "size": 10641
         }
       },
-      "zip_url": "https://github.com/fastn-community/design-system/archive/028b055c914d1ece067673b469d9153cd11b62b9.zip",
-      "checksum": "B68DF5316FE058131C1EB36FFDAF999AB0847EF109B56D800B9C2882EE114AEB"
+      "zip_url": "https://github.com/fastn-community/design-system/archive/f5cfb371265e664227dbf8d901f8b12e4d2bd7af.zip",
+      "checksum": "8BA06F13E94D7FE4196332F6A4E8DCC3C22D724F158AA95B4EBCF9AA273C664D"
     },
     "fastn-community.github.io/doc-site": {
       "files": {
diff --git a/.packages/fastn-community.github.io/design-system/components/label-text.ftd b/.packages/fastn-community.github.io/design-system/components/label-text.ftd
index d92aa23d..04b9007b 100644
--- a/.packages/fastn-community.github.io/design-system/components/label-text.ftd
+++ b/.packages/fastn-community.github.io/design-system/components/label-text.ftd
@@ -19,8 +19,8 @@ string value:
 text-placement placement: horizontal
 ftd.align align-content: left
 
--- ds.section-row:
-margin: $ds.spaces.vertical-gap.zero
+-- ds.container:
+width: hug-content
 
 -- ds.row:
 if: { label-text.placement == horizontal }
@@ -44,7 +44,7 @@ align-content: left
 
 -- end: ds.column
 
--- end: ds.section-row
+-- end: ds.container
 
 -- end: label-text
 
diff --git a/.packages/fastn-community.github.io/design-system/manifest.json b/.packages/fastn-community.github.io/design-system/manifest.json
index 9af5460f..6af65bbf 100644
--- a/.packages/fastn-community.github.io/design-system/manifest.json
+++ b/.packages/fastn-community.github.io/design-system/manifest.json
@@ -287,8 +287,8 @@
     },
     "components/label-text.ftd": {
       "name": "components/label-text.ftd",
-      "checksum": "2FD6F02B7A1A3B41417BA48F378B2ED076C494B955F6FB53DCCE061A0B0250B1",
-      "size": 1628
+      "checksum": "7287117D126182A09923CDBC063531F298C124FA9206100084531B4F139B0C12",
+      "size": 1606
     },
     "components/toggle.ftd": {
       "name": "components/toggle.ftd",
@@ -382,8 +382,8 @@
     },
     "record.ftd": {
       "name": "record.ftd",
-      "checksum": "9EB82634CCE4C7B004510FBC5C65310AF12584C1BEEA481F6B2C4B88AAF1F100",
-      "size": 291
+      "checksum": "50E29512E4B805A9E862DA2D94AC2C1275DDE4C3B146F3F326D6ACA3D497699E",
+      "size": 320
     },
     "slide.ftd": {
       "name": "slide.ftd",
@@ -396,6 +396,6 @@
       "size": 10641
     }
   },
-  "zip_url": "https://github.com/fastn-community/design-system/archive/028b055c914d1ece067673b469d9153cd11b62b9.zip",
-  "checksum": "B68DF5316FE058131C1EB36FFDAF999AB0847EF109B56D800B9C2882EE114AEB"
+  "zip_url": "https://github.com/fastn-community/design-system/archive/f5cfb371265e664227dbf8d901f8b12e4d2bd7af.zip",
+  "checksum": "8BA06F13E94D7FE4196332F6A4E8DCC3C22D724F158AA95B4EBCF9AA273C664D"
 }
diff --git a/.packages/fastn-community.github.io/design-system/record.ftd b/.packages/fastn-community.github.io/design-system/record.ftd
index 4bbc728c..4d395395 100644
--- a/.packages/fastn-community.github.io/design-system/record.ftd
+++ b/.packages/fastn-community.github.io/design-system/record.ftd
@@ -7,6 +7,7 @@ optional string template-name:
 optional body desc:
 optional string updated-on:
 optional string preview-url:
+optional string domain-name:
 optional string github-url:
 string list features:
 string list pages:
diff --git a/actions/sites/settings/environment.ftd b/actions/sites/settings/environment.ftd
new file mode 100644
index 00000000..2fa7ba2f
--- /dev/null
+++ b/actions/sites/settings/environment.ftd
@@ -0,0 +1,24 @@
+-- optional string $key-error:
+-- optional string $value-error:
+
+-- void update(id, key, value):
+integer id:
+string key:
+string value:
+js: $assets.files.assets.functions.js
+
+callAlert("updating env: " + id + " " + key + " " + value)
+
+
+-- void create-env(key, value):
+string key:
+string value:
+js: $assets.files.assets.functions.js
+
+callAlert("creating env: " + key + " " + value)
+
+-- void remove(id):
+integer id:
+js: $assets.files.assets.functions.js
+
+callAlert("deleting env: " + id)
diff --git a/components/sites/setting/page.ftd b/components/sites/setting/page.ftd
index 8dc2199c..63f0fbd9 100644
--- a/components/sites/setting/page.ftd
+++ b/components/sites/setting/page.ftd
@@ -59,6 +59,11 @@ sites-records.site-common-data site:
         is-active if { setting-left-column.current-page == "github" }: true
         link: $setting-left-column.site.github-url
 
+        -- sites-header.tab-link: Environments
+        is-active if { setting-left-column.current-page == "environments" }: true
+        link: $setting-left-column.site.environments-url
+
     -- end: ds.column
 
--- end: setting-left-column
\ No newline at end of file
+-- end: setting-left-column
+
diff --git a/index.ftd b/index.ftd
index 5f535996..8da2f6bc 100644
--- a/index.ftd
+++ b/index.ftd
@@ -52,6 +52,7 @@ spacing: $ds.spaces.vertical-gap.medium.gap
     - [Github (Un-configured)](/scenarios/sites/setting/github/)
     - [Github (Configured)](/scenarios/sites/setting/github-configured/)
     - [Site Tokens](/scenarios/sites/setting/tokens/)
+    - [Environments](/scenarios/sites/setting/environments/)
 
 	-- page-block: Site Editor Pages
 	
diff --git a/pages/sites/setting/environments.ftd b/pages/sites/setting/environments.ftd
new file mode 100644
index 00000000..112e78bf
--- /dev/null
+++ b/pages/sites/setting/environments.ftd
@@ -0,0 +1,160 @@
+-- import: ui.fifthtry.com/components/sites/setting/page as p
+-- import: ui.fifthtry.com/site-data
+-- import: ui.fifthtry.com/records/user-data as ud
+-- import: ui.fifthtry.com/records/sites as sites-records
+-- import: ui.fifthtry.com/actions/sites/settings/environment
+
+
+-- component page:
+module site-data: site-data
+module action: environment
+sites-records.environment list envs:
+ud.user-data user-data:
+sites-records.site-common-data site:
+string dashboard-url:
+optional string top-message:
+private boolean $reveal: false
+private string $current-key: *$ftd.empty
+private string $current-value: *$ftd.empty
+
+-- p.page:
+site-data: $page.site-data
+user-data: $page.user-data
+site: $page.site
+current-page: environments
+dashboard-url: $page.dashboard-url
+top-message: $page.top-message
+
+	-- ds.section-column:
+	inset: $ds.spaces.inset-tall.large
+	
+		-- ds.primary-button: Reveal Config Vars
+		title if { page.reveal }: Hide Config Vars
+		radius: curved
+		$on-click$: $ftd.toggle($a = $page.reveal)
+		
+		-- env-row:
+		action: environment
+		env: $env
+		for: $env in $page.envs
+		if: { page.reveal }
+		
+		-- ds.row:
+		if: { page.reveal }
+		
+			-- ftd.column:
+			
+				-- ftd.text-input:
+				type: text
+				$on-input$: $ftd.set-string($a = $page.current-key, v = $VALUE)
+				height.fixed.px: 32
+				border-radius.px: 4
+				placeholder: KEY
+				background.solid: transparent
+				border-width.px: 1
+				border-color: $inherited.colors.border
+				border-color if { page.action.key-error != NULL }: $inherited.colors.error.border
+				padding.px: 8
+				color: $inherited.colors.text-strong
+				margin-right.px: 8
+				
+				-- ds.copy-small: $page.action.key-error
+				if: { page.action.key-error != NULL }
+				color: $ds.colors.error.text
+				
+			-- end: ftd.column
+
+			-- ftd.column:
+			
+				-- ftd.text-input:
+				type: text
+				$on-input$: $ftd.set-string($a = $page.current-value, v = $VALUE)
+				height.fixed.px: 32
+				border-radius.px: 4
+				placeholder: VALUE
+				background.solid: transparent
+				border-width.px: 1
+				border-color: $inherited.colors.border
+				border-color if { page.action.value-error != NULL }: $inherited.colors.error.border
+				padding.px: 8
+				color: $inherited.colors.text-strong
+				margin-right.px: 8
+				
+				-- ds.copy-small: $page.action.key-error
+				if: { page.action.key-error != NULL }
+				color: $ds.colors.error.text
+				
+			-- end: ftd.column
+
+			-- ds.primary-button: Add
+			$on-click$: $page.action.create-env(key = $page.current-key, value = $page.current-value)
+			
+		-- end: ds.row
+
+	-- end: ds.section-column
+
+-- end: p.page
+
+-- end: page
+
+-- component env-row:
+module action: environment
+sites-records.environment env:
+private string $current-key: *$env-row.env.key
+private string $current-value: *$env-row.env.value
+
+-- ds.row:
+
+	-- ftd.column:
+	
+		-- ftd.text-input:
+		type: text
+		$on-input$: $ftd.set-string($a = $env-row.current-key, v = $VALUE)
+		height.fixed.px: 32
+		border-radius.px: 4
+		value: $env-row.env.key
+		background.solid: transparent
+		border-width.px: 1
+		border-color: $inherited.colors.border
+		border-color if { env-row.action.key-error != NULL }: $inherited.colors.error.border
+		padding.px: 8
+		color: $inherited.colors.text-strong
+		margin-right.px: 8
+		
+		-- ds.copy-small: $env-row.action.key-error
+		if: { env-row.action.key-error != NULL }
+		color: $ds.colors.error.text
+		
+	-- end: ftd.column
+
+	-- ftd.column:
+	
+		-- ftd.text-input:
+		type: text
+		height.fixed.px: 32
+		border-radius.px: 4
+		$on-input$: $ftd.set-string($a = $env-row.current-value, v = $VALUE)
+		value: $env-row.env.value
+		background.solid: transparent
+		border-width.px: 1
+		border-color: $inherited.colors.border
+		border-color if { env-row.action.value-error != NULL }: $inherited.colors.error.border
+		padding.px: 8
+		color: $inherited.colors.text-strong
+		margin-right.px: 8
+		
+		-- ds.copy-small: $env-row.action.value-error
+		if: { env-row.action.value-error != NULL }
+		color: $ds.colors.error.text
+		
+	-- end: ftd.column
+
+	-- ds.primary-button: Save
+	$on-click$: $env-row.action.update(id = $env-row.env.id, key = $env-row.current-key, value = $env-row.current-value)
+	
+	-- ds.primary-button: Remove
+	$on-click$: $env-row.action.remove(id = $env-row.env.id)
+	
+-- end: ds.row
+
+-- end: env-row
diff --git a/records/sites.ftd b/records/sites.ftd
index 1d3c17cd..062a7ce0 100644
--- a/records/sites.ftd
+++ b/records/sites.ftd
@@ -13,6 +13,7 @@ string cr-list-url:
 string domains-url:
 string updated-on:
 ftd.image-src preview-image:
+string environments-url:
 
 
 
@@ -58,3 +59,8 @@ string url:
 optional file-text text:
 optional string error:
 string updated-at:
+
+-- record environment:
+integer id:
+string key:
+string value:
diff --git a/scenarios/sites/setting/environments.ftd b/scenarios/sites/setting/environments.ftd
new file mode 100644
index 00000000..b3206008
--- /dev/null
+++ b/scenarios/sites/setting/environments.ftd
@@ -0,0 +1,27 @@
+-- import: ui.fifthtry.com/pages/sites/setting/environments
+-- import: ui.fifthtry.com/scenarios/john-doe
+-- import: ui.fifthtry.com/records/sites as sites-records
+-- import: ui.fifthtry.com/scenarios/sites/site-info
+-- import: ui.fifthtry.com/scenarios/scenario-site
+
+-- environments.page:
+site-data: scenario-site
+user-data: $john-doe.jd
+site: $site-info.acme-site
+dashboard-url: /scenarios/user/dashboard/
+envs: $envs
+
+
+-- sites-records.environment list envs:
+
+-- sites-records.environment:
+id: 1
+key: BIN_PATH
+value: /usr/bin/
+
+-- sites-records.environment:
+id: 2
+key: DATABASE_URL
+value: postgresql://localhost/my-db
+
+-- end: envs
diff --git a/scenarios/sites/site-info.ftd b/scenarios/sites/site-info.ftd
index d9789a23..cbd7ea89 100644
--- a/scenarios/sites/site-info.ftd
+++ b/scenarios/sites/site-info.ftd
@@ -25,4 +25,4 @@ cr-list-url: /scenarios/sites/cr-list/
 tokens-url: /scenarios/sites/setting/tokens/
 updated-on: 14th Feb
 preview-image: /-/ui.fifthtry.com/assets/sites/placeholder-preview.svg
-
+environments-url: /scenarios/sites/setting/environments/
diff --git a/scenarios/user/dashboard.ftd b/scenarios/user/dashboard.ftd
index c25df5cd..0794e05a 100644
--- a/scenarios/user/dashboard.ftd
+++ b/scenarios/user/dashboard.ftd
@@ -30,6 +30,7 @@ tokens-url: /scenarios/sites/tokens/
 setting-url: /scenarios/sites/setting/domains/
 domains-url: /scenarios/sites/domains/
 cr-list-url: /scenarios/sites/cr-list/
+environments-url: /scenarios/sites/setting/environments/
 updated-on: 14th Feb
 preview-image: /-/ui.fifthtry.com/assets/sites/placeholder-preview.svg