diff --git a/package.json b/package.json
index 162af44..25b335a 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "@vue/component-compiler-utils": "^3.0.2",
+    "sass": "^1.24.0",
     "typescript": "^3.7.3",
     "vue-template-compiler": "^2.6.10"
   }
diff --git a/src/Job.vue b/src/Job.vue
index 53f839c..800e032 100644
--- a/src/Job.vue
+++ b/src/Job.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="job" v-show="!hidden">
-    <h3>
-      <span v-if="startEvent">
+  <details class="job" v-show="!hidden">
+    <summary>
+      <span v-if="startEvent" class="job-name">
         {{ startEvent.data.fun }}
         {{ startEvent.data.arg }}
       </span>
-      <span class="header-jid"> {{ jid }}</span>
-    </h3>
+      <span class="jid"> {{ jid }}</span>
+    </summary>
     <div v-for="(events, minion) in minionEvents" :key="minion">
       <details class="minion">
         <summary>
@@ -33,7 +33,7 @@
         </details>
       </details>
     </div>
-  </div>
+  </details>
 </template>
 
 <script lang="ts">
@@ -115,14 +115,17 @@ export default class Job extends Vue {
 }
 </script>
 
-<style>
-.minion .event {
-  margin-left: 2ex;
+<style lang="scss">
+.job-name {
+  font-size: larger;
+  font-weight: bold;
+}
+.jid {
+  font-size: x-small;
 }
 
-.header-jid {
-  font-size: x-small;
-  font-weight: normal;
+.minion .event {
+  margin-left: 2ex;
 }
 
 pre {