diff --git a/hypha/static_src/src/sass/apply/components/_traffic-light.scss b/hypha/static_src/src/sass/apply/components/_traffic-light.scss
index 7d28aebcd1524560b2ed9f5e7324694f4650388a..5f1dff17c61a0f12cbdce83e476b9aab8a5a545f 100644
--- a/hypha/static_src/src/sass/apply/components/_traffic-light.scss
+++ b/hypha/static_src/src/sass/apply/components/_traffic-light.scss
@@ -1,26 +1,23 @@
 .traffic-light {
     display: block;
-    width: 15px;
-    height: 15px;
-    font-size: 10px;
-    text-align: center;
-    border-radius: 50%;
+    width: 1rem;
+    aspect-ratio: 1/1;
 
     &--no,
     &--red {
-        color: $color--tomato;
         background-color: $color--tomato;
+        clip-path: polygon(100% 0, 0 0, 50% 100%);
     }
 
     &--maybe,
     &--amber {
-        color: $color--mustard;
         background-color: $color--mustard;
+        border-radius: 50%;
     }
 
     &--yes,
     &--green {
-        color: $color--green;
         background-color: $color--green;
+        clip-path: polygon(50% 0, 0 100%, 100% 100%);
     }
 }