diff --git a/pages/app/components/Milestone.tsx b/pages/app/components/Milestone.tsx
new file mode 100644
index 0000000..49f10dd
--- /dev/null
+++ b/pages/app/components/Milestone.tsx
@@ -0,0 +1,31 @@
+import { IntlDate } from '~/components/IntlDate'
+
+export const Milestone = ({
+  name,
+  date,
+}: {
+  name: string
+  date: Date | string | undefined
+}) => {
+  return (
+    (date && (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <strong>
+          <IntlDate date={new Date(date)} />
+        </strong>
+        <small
+          style={{
+            textTransform: 'uppercase',
+          }}
+        >
+          {name}d
+        </small>
+      </div>
+    )) || <></>
+  )
+}
diff --git a/pages/app/components/Rule.tsx b/pages/app/components/Rule.tsx
index 15920d7..5c42cd5 100644
--- a/pages/app/components/Rule.tsx
+++ b/pages/app/components/Rule.tsx
@@ -1,41 +1,47 @@
-import { Form } from '@remix-run/react'
-import { IntlDate } from '~/components/IntlDate'
+import { Milestone } from './Milestone.js'
 
 export const Rule = ({ rule }: { rule: Rule }) => {
   return (
-    <tr>
-      <th scope="row">{rule.matchers[0].value}</th>
-      <td>
-        <kbd>
-          {rule.enabled
-            ? rule.actions[0].type === 'worker'
-              ? 'Deprecated'
-              : 'Active'
-            : 'Expired'}
-        </kbd>
-      </td>
-      <td>
-        <IntlDate date={new Date(rule.data?.expire)} />
-      </td>
-      <td>
-        {/* <Form method="delete">
-          <input type="text" name="zone" hidden value={rule.zone.id} />
-          <input type="text" name="rule" hidden value={rule.tag} />
-          <button type="submit" role="button" className="secondary">
-            🗑️
-          </button>
-        </Form> */}
-      </td>
-    </tr>
+    <details>
+      <summary
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          width: '100%',
+        }}
+      >
+        <header
+          style={{
+            display: 'flex',
+            flexGrow: '1',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          {rule.matchers[0].value}
+          <code>
+            {rule.enabled
+              ? rule.actions[0].type === 'worker'
+                ? '⏲️ Deprecated'
+                : '📨 Active'
+              : '🗃️ Expired'}
+          </code>
+        </header>
+      </summary>
+
+      <article className="grid">
+        <Milestone name="📨 Activate" date={rule.data?.activate} />
+        <Milestone name="🗃️ Expire" date={rule.data?.expire} />
+        <Milestone name="⏲️ Deprecate" date={rule.data?.deprecate} />
+        <Milestone name="🗑️ Remove" date={rule.data?.remove} />
+      </article>
+      {/* <Form method="delete">
+        <input type="text" name="zone" hidden value={rule.zone.id} readOnly />
+        <input type="text" name="rule" hidden value={rule.tag} readOnly />
+        <button type="submit" role="button" className="secondary">
+          🗑️
+        </button>
+      </Form> */}
+    </details>
   )
 }
-
-// <article className="text-blue-600 underline">
-//   <div className="grid">
-//     <h4>{rule.matchers[0].value}</h4>
-//     <IntlDate date={new Date(rule.data?.expire)} />
-//     <button type="button" className="secondary">
-//       🗑️
-//     </button>
-//   </div>
-// </article>
diff --git a/pages/app/components/RulesList.tsx b/pages/app/components/RulesList.tsx
deleted file mode 100644
index e486669..0000000
--- a/pages/app/components/RulesList.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { defer, LoaderArgs, SerializeFrom } from '@remix-run/cloudflare'
-import { Await, useAsyncValue, useLoaderData } from '@remix-run/react'
-import { Suspense } from 'react'
-import { Rule } from '~/components/Rule'
-import { getRules } from '~/models/rule.server'
-import { getZones } from '~/models/zone.server'
-
-export const loader = async ({ context }: LoaderArgs) => {
-  const zones = await getZones(context)
-  const rules = getRules(zones, context)
-
-  return defer({
-    rules,
-  })
-}
-
-export const RulesList = () => {
-  const data = useLoaderData<typeof loader>()
-
-  return (
-    <Suspense fallback={<article aria-busy="true" />}>
-      <Await
-        resolve={data.rules}
-        errorElement={<p>Error loading rules list</p>}
-      >
-        <table role="grid">
-          <thead>
-            <tr>
-              <th scope="col">Rule address</th>
-              <th scope="col">Status</th>
-              <th scope="col">Expire on</th>
-              <th scope="col"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <RulesListTable />
-          </tbody>
-        </table>
-      </Await>
-    </Suspense>
-  )
-}
-
-function RulesListTable() {
-  const rules: Rule[] = useAsyncValue<SerializeFrom<typeof loader>['rules']>()
-
-  return (
-    <tbody>
-      {rules.map((rule) => (
-        <Rule rule={rule} />
-      ))}
-    </tbody>
-  )
-}
diff --git a/pages/app/components/Setting.tsx b/pages/app/components/Setting.tsx
index 8363466..419ab43 100644
--- a/pages/app/components/Setting.tsx
+++ b/pages/app/components/Setting.tsx
@@ -50,7 +50,7 @@ export const Setting = ({
           }
         >
           {(valueResolved) => {
-            setValue(valueResolved)
+            setValue(valueResolved || setting.value)
             return (
               <input
                 type="text"
diff --git a/pages/app/models/rule.server.ts b/pages/app/models/rule.server.ts
index 87f8acf..689db4c 100644
--- a/pages/app/models/rule.server.ts
+++ b/pages/app/models/rule.server.ts
@@ -46,6 +46,7 @@ export async function createRule(
       ],
       name: JSON.stringify({
         dispoflare: true,
+        activate: new Date(),
         expire,
         remove,
       }),
diff --git a/pages/app/routes/manage.tsx b/pages/app/routes/manage.tsx
index 6346262..a26e022 100644
--- a/pages/app/routes/manage.tsx
+++ b/pages/app/routes/manage.tsx
@@ -45,21 +45,11 @@ export default function Manage() {
           }
         >
           {(rules: Rule[]) => (
-            <table role="grid">
-              <thead>
-                <tr>
-                  <th scope="col">Rule address</th>
-                  <th scope="col">Status</th>
-                  <th scope="col">Expire on</th>
-                  <th scope="col"></th>
-                </tr>
-              </thead>
-              <tbody>
-                {rules.map((rule) => (
-                  <Rule rule={rule} key={rule.tag} />
-                ))}
-              </tbody>
-            </table>
+            <div className="">
+              {rules.map((rule) => (
+                <Rule rule={rule} key={rule.tag} />
+              ))}
+            </div>
           )}
         </Await>
       </Suspense>
diff --git a/sdk/api.d.ts b/sdk/api.d.ts
index cf7e693..e29cf59 100644
--- a/sdk/api.d.ts
+++ b/sdk/api.d.ts
@@ -35,6 +35,7 @@ type Rule = {
 
 type DispoflareData = {
   dispoflare: true
+  activate: Date | string
   expire: Date | string
   remove: Date | string | undefined
   deprecate: Date | string | undefined