diff --git a/cypress/fixtures/hooks_5.json b/cypress/fixtures/hooks_5.json
index 494c0862a..4864ccf1b 100644
--- a/cypress/fixtures/hooks_5.json
+++ b/cypress/fixtures/hooks_5.json
@@ -51,8 +51,8 @@
     "host": "github.com",
     "event": "push",
     "branch": "main",
-    "error": "",
-    "status": "success",
+    "error": "skipping build since only init and clone steps found — it is likely no rulesets matched for the webhook payload",
+    "status": "skipped",
     "link": "https://github.com/github/octocat/settings/hooks"
   },
   {
diff --git a/cypress/integration/hooks.spec.js b/cypress/integration/hooks.spec.js
index 920901530..a574d097f 100644
--- a/cypress/integration/hooks.spec.js
+++ b/cypress/integration/hooks.spec.js
@@ -69,6 +69,7 @@ context('Hooks', () => {
       beforeEach(() => {
         cy.get('[data-test=hooks-row]').first().as('firstHook');
         cy.get('[data-test=hooks-row]').last().as('lastHook');
+        cy.get('[data-test=hooks-row]').last().prev().prev().as('skipHook');
       });
       it('should show source id', () => {
         cy.get('@firstHook').within(() => {
@@ -106,6 +107,26 @@ context('Hooks', () => {
           });
         });
       });
+      context('skipped', () => {
+        beforeEach(() => {
+          cy.get('@skipHook').within(() => {
+            cy.get('.hook-status').as('skipped');
+          });
+        });
+        it('should have failure styles', () => {
+          cy.get('@skipped').should('have.class', '-skipped');
+        });
+        context('message', () => {
+          beforeEach(() => {
+            cy.get('[data-test=hooks-skipped]').as('message');
+          });
+          it('should show skip message', () => {
+            cy.get('@message').contains(
+              'skipping build since only init and clone steps found — it is likely no rulesets matched for the webhook payload',
+            );
+          });
+        });
+      });
       context('successful redeliver hook', () => {
         beforeEach(() => {
           cy.redeliverHook();
diff --git a/src/elm/Pages/Hooks.elm b/src/elm/Pages/Hooks.elm
index d75617f28..950651916 100644
--- a/src/elm/Pages/Hooks.elm
+++ b/src/elm/Pages/Hooks.elm
@@ -209,13 +209,26 @@ renderHookError hook =
                     )
                 |> Array.toList
                 |> List.filterMap identity
+
+        msgRow =
+            case hook.status of
+                "skipped" ->
+                    tr [ class "skipped-data", Util.testAttribute "hooks-skipped" ]
+                        [ td [ attribute "colspan" "6" ]
+                            [ code [ class "skipped-content" ]
+                                lines
+                            ]
+                        ]
+
+                _ ->
+                    tr [ class "error-data", Util.testAttribute "hooks-error" ]
+                        [ td [ attribute "colspan" "6" ]
+                            [ code [ class "error-content" ]
+                                lines
+                            ]
+                        ]
     in
-    tr [ class "error-data", Util.testAttribute "hooks-error" ]
-        [ td [ attribute "colspan" "6" ]
-            [ code [ class "error-content" ]
-                lines
-            ]
-        ]
+    msgRow
 
 
 {-| hookStatusToRowClass : takes hook status string and returns style class
@@ -226,5 +239,8 @@ hookStatusToRowClass status =
         "success" ->
             class "-success"
 
+        "skipped" ->
+            class "-skipped"
+
         _ ->
             class "-error"
diff --git a/src/elm/SvgBuilder.elm b/src/elm/SvgBuilder.elm
index f1f60ce88..367ddf9b5 100644
--- a/src/elm/SvgBuilder.elm
+++ b/src/elm/SvgBuilder.elm
@@ -323,6 +323,24 @@ hookSuccess =
         ]
 
 
+{-| hookSkipped: produces the svg for the hook status skipped
+-}
+hookSkipped : Html msg
+hookSkipped =
+    svg
+        [ class "hook-status"
+        , class "-skipped"
+        , strokeWidth "2"
+        , viewBox "0 0 44 44"
+        , width "20"
+        , height "20"
+        , ariaHidden
+        ]
+        [ Svg.path [ attribute "vector-effect" "non-scaling-stroke", d "M15 20.1l6.923 6.9L42 5" ] []
+        , Svg.path [ attribute "vector-effect" "non-scaling-stroke", d "M43 22v16.333A4.668 4.668 0 0138.333 43H5.667A4.668 4.668 0 011 38.333V5.667A4.668 4.668 0 015.667 1h25.666" ] []
+        ]
+
+
 {-| hookFailure: produces the svg for the hook status failure
 -}
 hookFailure : Html msg
@@ -484,6 +502,9 @@ hookStatusToIcon status =
         "success" ->
             hookSuccess
 
+        "skipped" ->
+            hookSkipped
+
         _ ->
             hookFailure
 
diff --git a/src/scss/_table.scss b/src/scss/_table.scss
index c4c7d170f..19615e648 100644
--- a/src/scss/_table.scss
+++ b/src/scss/_table.scss
@@ -102,17 +102,39 @@ td .key .list-item {
   }
 }
 
+.table-base tr.skipped-data {
+  color: var(--color-text);
+
+  border-bottom: 1px solid var(--color-bg-light);
+  border-left: 2px solid var(--color-cyan);
+
+  td {
+    padding-top: 0;
+  }
+}
+
 .table-base tr.-error {
   border-bottom: none;
   border-left: 2px solid var(--color-red);
 }
 
+.table-base tr.-skipped {
+  border-bottom: none;
+  border-left: 2px solid var(--color-cyan);
+}
+
 .table-base .error-content {
   color: var(--color-red-light);
   font-size: 0.8em;
   white-space: pre-wrap;
 }
 
+.table-base .skipped-content {
+  color: var(--color-text);
+  font-size: 0.8em;
+  white-space: pre-wrap;
+}
+
 .hook-status {
   fill: none;
 }
@@ -121,6 +143,10 @@ td .key .list-item {
   stroke: var(--color-green);
 }
 
+.hook-status.-skipped {
+  stroke: var(--color-cyan);
+}
+
 .hook-status.-failure {
   stroke: var(--color-red);
 }