diff --git a/app/controllers/customization_controller.rb b/app/controllers/customization_controller.rb
index 5384de9d..246a883d 100644
--- a/app/controllers/customization_controller.rb
+++ b/app/controllers/customization_controller.rb
@@ -1,4 +1,6 @@
 class CustomizationController < ApplicationController
+  layout 'tailwind'
+
   # todo require login for all actions :O
 
   before_action :verify_content_type_can_be_toggled, only: [:toggle_content_type]
diff --git a/app/views/customization/content_types.html.erb b/app/views/customization/content_types.html.erb
index d818fbef..af8def98 100644
--- a/app/views/customization/content_types.html.erb
+++ b/app/views/customization/content_types.html.erb
@@ -1,3 +1,99 @@
+<fieldset>
+  <legend class="text-base font-medium text-gray-900">Select a mailing list</legend>
+
+  <div class="mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-3 sm:gap-x-4">
+    <!--
+      Checked: "border-transparent", Not Checked: "border-gray-300"
+      Active: "ring-2 ring-indigo-500"
+    -->
+    <label class="relative bg-white border rounded-lg shadow-sm p-4 flex cursor-pointer focus:outline-none">
+      <input type="radio" name="project-type" value="Newsletter" class="sr-only" aria-labelledby="project-type-0-label" aria-describedby="project-type-0-description-0 project-type-0-description-1">
+      <div class="flex-1 flex">
+        <div class="flex flex-col">
+          <span id="project-type-0-label" class="block text-sm font-medium text-gray-900"> Newsletter </span>
+          <span id="project-type-0-description-0" class="mt-1 flex items-center text-sm text-gray-500"> Last message sent an hour ago </span>
+          <span id="project-type-0-description-1" class="mt-6 text-sm font-medium text-gray-900"> 621 users </span>
+        </div>
+      </div>
+      <!--
+        Not Checked: "invisible"
+
+        Heroicon name: solid/check-circle
+      -->
+      <svg class="h-5 w-5 text-indigo-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+      </svg>
+      <!--
+        Active: "border", Not Active: "border-2"
+        Checked: "border-indigo-500", Not Checked: "border-transparent"
+      -->
+      <div class="absolute -inset-px rounded-lg border-2 pointer-events-none" aria-hidden="true"></div>
+    </label>
+
+    <!--
+      Checked: "border-transparent", Not Checked: "border-gray-300"
+      Active: "ring-2 ring-indigo-500"
+    -->
+    <label class="relative bg-white border rounded-lg shadow-sm p-4 flex cursor-pointer focus:outline-none">
+      <input type="radio" name="project-type" value="Existing Customers" class="sr-only" aria-labelledby="project-type-1-label" aria-describedby="project-type-1-description-0 project-type-1-description-1">
+      <div class="flex-1 flex">
+        <div class="flex flex-col">
+          <span id="project-type-1-label" class="block text-sm font-medium text-gray-900"> Existing Customers </span>
+          <span id="project-type-1-description-0" class="mt-1 flex items-center text-sm text-gray-500"> Last message sent 2 weeks ago </span>
+          <span id="project-type-1-description-1" class="mt-6 text-sm font-medium text-gray-900"> 1200 users </span>
+        </div>
+      </div>
+      <!--
+        Not Checked: "invisible"
+
+        Heroicon name: solid/check-circle
+      -->
+      <svg class="h-5 w-5 text-indigo-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+      </svg>
+      <!--
+        Active: "border", Not Active: "border-2"
+        Checked: "border-indigo-500", Not Checked: "border-transparent"
+      -->
+      <div class="absolute -inset-px rounded-lg border-2 pointer-events-none" aria-hidden="true"></div>
+    </label>
+
+    <!--
+      Checked: "border-transparent", Not Checked: "border-gray-300"
+      Active: "ring-2 ring-indigo-500"
+    -->
+    <label class="relative bg-white border rounded-lg shadow-sm p-4 flex cursor-pointer focus:outline-none">
+      <input type="radio" name="project-type" value="Trial Users" class="sr-only" aria-labelledby="project-type-2-label" aria-describedby="project-type-2-description-0 project-type-2-description-1">
+      <div class="flex-1 flex">
+        <div class="flex flex-col">
+          <span id="project-type-2-label" class="block text-sm font-medium text-gray-900"> Trial Users </span>
+          <span id="project-type-2-description-0" class="mt-1 flex items-center text-sm text-gray-500"> Last message sent 4 days ago </span>
+          <span id="project-type-2-description-1" class="mt-6 text-sm font-medium text-gray-900"> 2740 users </span>
+        </div>
+      </div>
+      <!--
+        Not Checked: "invisible"
+
+        Heroicon name: solid/check-circle
+      -->
+      <svg class="h-5 w-5 text-indigo-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+      </svg>
+      <!--
+        Active: "border", Not Active: "border-2"
+        Checked: "border-indigo-500", Not Checked: "border-transparent"
+      -->
+      <div class="absolute -inset-px rounded-lg border-2 pointer-events-none" aria-hidden="true"></div>
+    </label>
+  </div>
+</fieldset>
+
+
+
+
+
+
+
 <div class="row">
   <div class="col s12">
     <ul class="collapsible white">
diff --git a/app/views/layouts/tailwind.html.erb b/app/views/layouts/tailwind.html.erb
index 5d2499f2..18cd981d 100644
--- a/app/views/layouts/tailwind.html.erb
+++ b/app/views/layouts/tailwind.html.erb
@@ -5,7 +5,9 @@
   <%= csrf_meta_tags %>
 
   <%= stylesheet_link_tag 'application', media: 'all' %>
+  <!--
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />
+  -->
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 
   <%= render 'layouts/favicon' %>
@@ -13,6 +15,8 @@
   <%= javascript_pack_tag 'application' %>
   <%= render 'layouts/seo' %>
   <script defer type="text/javascript" src="https://js.stripe.com/v2/"></script>
+
+  <!-- todo mirror this in-repo? -->
   <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
 </head>
 <body data-in-app="true"