diff --git a/core/installer/server/dodo-app/static/main.css b/core/installer/server/dodo-app/static/main.css
index 454fb33..58e639c 100644
--- a/core/installer/server/dodo-app/static/main.css
+++ b/core/installer/server/dodo-app/static/main.css
@@ -11,6 +11,10 @@
   --pico-form-element-background-color: #d6d6d6;
   --pico-form-element-active-background-color: #d6d6d6;
   --pico-form-element-selected-background-color: #d6d6d6;
+  --pico-dropdown-color: #3a3a3a;
+  --pico-dropdown-background-color: #d6d6d6;
+  --pico-dropdown-border-color: #7f9f7f;
+  --pico-dropdown-hover-background-color: #7f9f7f;
   --pico-primary: #7f9f7f;
   --pico-primary-background: #7f9f7f;
   --pico-primary-hover: #d4888d;
@@ -105,3 +109,11 @@
 .app-actions button {
 	width: 150px;
 }
+
+details.dropdown summary:not([role]) {
+  color: var(--pico-color);
+}
+
+details[open] > summary:not([role]):not(:focus) {
+  color: var(--pico-color);
+}
diff --git a/core/installer/server/dodo-app/static/main.js b/core/installer/server/dodo-app/static/main.js
index 15e3bb2..bc2b87f 100644
--- a/core/installer/server/dodo-app/static/main.js
+++ b/core/installer/server/dodo-app/static/main.js
@@ -14,3 +14,11 @@
 	});
   });
 });
+
+function dropdownSelected(elem, value) {
+  while (elem.tagName.toLowerCase() !== "details") {
+	elem = elem.parentNode;
+  }
+  elem.querySelector("summary").innerHTML = value;
+  elem.removeAttribute("open");
+}
diff --git a/core/installer/server/dodo-app/templates/base.html b/core/installer/server/dodo-app/templates/base.html
index eb3a9c3..19aaf52 100644
--- a/core/installer/server/dodo-app/templates/base.html
+++ b/core/installer/server/dodo-app/templates/base.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ block "title" . }}{{ end }}</title>
     <link rel="stylesheet" href="/static/pico.2.0.6.min.css">
-    <link rel="stylesheet" href="/static/main.css?v=0.0.10">
+    <link rel="stylesheet" href="/static/main.css?v=0.0.11">
 </head>
 <body class="container">
 	<nav aria-label="breadcrumb">
@@ -17,7 +17,7 @@
 	</nav>
     {{- block "content" . }}
     {{- end }}
-	<script src="/static/main.js?v=0.0.9"></script>
+	<script src="/static/main.js?v=0.0.10"></script>
 </body>
 </html>
 {{ define "resources" }}
diff --git a/core/installer/server/dodo-app/templates/index.html b/core/installer/server/dodo-app/templates/index.html
index 5ea0a4b..cab3447 100644
--- a/core/installer/server/dodo-app/templates/index.html
+++ b/core/installer/server/dodo-app/templates/index.html
@@ -5,17 +5,33 @@
 <form id="create-app" action="" method="POST">
 	<fieldset class="grid">
 		<input type="text" name="name" placeholder="name (optional)" />
-		<select name="network">
-			{{- range .Networks -}}
-			<option value="{{ .Name }}">{{ .Name }} - {{ .Domain }}</option>
-			{{- end -}}
-		</select>
+		<details class="dropdown">
+			<summary>network</summary>
+			<ul>
+				{{- range $i, $n := .Networks -}}
+				<li>
+					<label>
+						<input type="radio" name="network" oninput="dropdownSelected(this, '{{ $n.Name }}')" value="{{$n.Name}}" />
+						{{ $n.Name }} - {{ $n.Domain }}
+					</label>
+				</li>
+				{{- end -}}
+			</ul>
+		</details>
 		<input type="text" name="subdomain" placeholder="subdomain" />
-		<select name="type">
-			{{- range .Types -}}
-			<option value="{{ . }}">{{ . }}</option>
-			{{- end -}}
-		</select>
+		<details class="dropdown">
+			<summary>template</summary>
+			<ul>
+				{{- range $i, $t := .Types -}}
+				<li>
+					<label>
+						<input type="radio" name="type" oninput="dropdownSelected(this, '{{ $t }}')" value="{{$t}}" />
+						{{ $t }}
+					</label>
+				</li>
+				{{- end -}}
+			</ul>
+		</details>
 		<button id="create-app-button" aria-busy="false" type="submit" name="create-app">create app</button>
 	</fieldset>
 </form>