diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index f5a48621..56ebe835 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -7460,6 +7460,117 @@
     margin: unset !important;
   }
 }
+@supports not -moz-bool-pref("userChrome.tab.photon_like_contextline") {
+  @supports -moz-bool-pref("userChrome.tab.supernova_like_contextline") {
+    .tab-context-line {
+      display: inline-flex !important;
+      display: -moz-inline-box !important;
+      height: 1px !important;
+      border-radius: 9999px !important;
+      margin-top: 3px;
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+    /* Override container tab style */
+    tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
+      margin-top: 3px !important;
+      margin-left: 5px !important;
+      margin-right: 5px !important;
+    }
+    tab.tabbrowser-tab[usercontextid]:not([selected="true"], [multiselected])
+      > .tab-stack
+      > .tab-background
+      > .tab-context-line {
+      opacity: 0;
+      transition: all 0.2s cubic-bezier(0, 0.9, 0.15, 1) !important;
+    }
+    :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]),
+    :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] .tab-context-line,
+    :root[lwtheme-mozlightdark][lwthemetextcolor="bright"],
+    :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line {
+      --tab-line-color: #45a1ff;
+    }
+    .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
+      background-color: var(--tab-line-color, #45a1ff) !important;
+    }
+    /* Set the active effect */
+    tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .tab-context-line {
+      margin-left: 6px !important;
+      margin-right: 6px !important;
+    }
+    .tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line {
+      background: #217ddb !important;
+      margin-left: 6px;
+      margin-right: 6px;
+    }
+    /* Set the hover effect */
+    .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
+      background-color: rgba(0, 0, 0, 0.2) !important;
+      opacity: 1 !important;
+      transform: none !important;
+    }
+    #TabsToolbar[brighttext]
+      .tabbrowser-tab:hover:not([selected="true"], [multiselected])
+      > .tab-stack
+      > .tab-background
+      > .tab-context-line {
+      background-color: rgba(255, 255, 255, 0.3137254902) !important;
+    }
+    /* Animation */
+    @media (prefers-reduced-motion: no-preference) {
+      .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
+        animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
+      }
+      /* Animation for container tab can't have width change... */
+      tab.tabbrowser-tab[usercontextid]:hover:not([selected="true"], [multiselected])
+        > .tab-stack
+        > .tab-background
+        > .tab-context-line {
+        opacity: 1;
+      }
+    }
+    /* Animation for hover effect */
+    @keyframes toWide {
+      0% {
+        opacity: 0.8;
+        margin-left: 40%;
+        margin-right: 40%;
+      }
+      100% {
+        opacity: 1;
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+    /* --- copied (not modified) from _photon_like_contextline.scss --- */
+    /* Prevent identity color flashing */
+    .tabbrowser-tab[usercontextid] .tab-context-line {
+      --identity-icon-color: none;
+    }
+    :root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before,
+    :root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after {
+      /* As Selected Tab - Box Shadow */
+      stroke: var(--toolbar-color) !important;
+    }
+    /* Remove side's background color border */
+    :root:is(:-moz-lwtheme, [lwtheme])
+      #TabsToolbar[brighttext]
+      #tabbrowser-tabs:not([noshadowfortests])
+      .tabbrowser-tab:is([visuallyselected], [multiselected])
+      > .tab-stack
+      > .tab-background {
+      --tabs-border-color: rgba(0, 0, 0, 0.3) !important;
+      box-shadow: 0 0 1px var(--tabs-border-color) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) */
+    }
+    #TabsToolbar:not([brighttext])
+      #tabbrowser-tabs:not([noshadowfortests])
+      .tabbrowser-tab:is([visuallyselected], [multiselected])
+      > .tab-stack
+      > .tab-background {
+      box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
+    }
+  }
+}
 /*= Unselected Tab - Divide line =============================================*/
 /*= Unselected Tab - Dynamic Separator =======================================*/
 @supports -moz-bool-pref("userChrome.tab.dynamic_separator") {
@@ -21798,6 +21909,125 @@
     margin: unset !important;
   }
 }
+@media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") {
+  .tab-context-line {
+    display: inline-flex !important;
+    display: -moz-inline-box !important;
+    height: 1px !important;
+    border-radius: 9999px !important;
+    margin-top: 3px;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+  /* Override container tab style */
+  tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
+    margin-top: 3px !important;
+    margin-left: 5px !important;
+    margin-right: 5px !important;
+  }
+  tab.tabbrowser-tab[usercontextid]:not([selected="true"], [multiselected])
+    > .tab-stack
+    > .tab-background
+    > .tab-context-line {
+    opacity: 0;
+    transition: all 0.2s cubic-bezier(0, 0.9, 0.15, 1) !important;
+  }
+  :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]),
+  :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] .tab-context-line,
+  :root[lwtheme-mozlightdark][lwthemetextcolor="bright"],
+  :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line {
+    --tab-line-color: #45a1ff;
+  }
+  .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
+    background-color: var(--tab-line-color, #45a1ff) !important;
+  }
+  /* Set the active effect */
+  tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .tab-context-line {
+    margin-left: 6px !important;
+    margin-right: 6px !important;
+  }
+  .tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line {
+    background: #217ddb !important;
+    margin-left: 6px;
+    margin-right: 6px;
+  }
+  /* Set the hover effect */
+  .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
+    background-color: rgba(0, 0, 0, 0.2) !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+  #TabsToolbar[brighttext]
+    .tabbrowser-tab:hover:not([selected="true"], [multiselected])
+    > .tab-stack
+    > .tab-background
+    > .tab-context-line {
+    background-color: rgba(255, 255, 255, 0.3137254902) !important;
+  }
+  /* Animation */
+  /* Animation for hover effect */
+  /* --- copied (not modified) from _photon_like_contextline.scss --- */
+  /* Prevent identity color flashing */
+  /* Remove side's background color border */
+}
+@media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") and (prefers-reduced-motion: no-preference) {
+  .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
+    animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
+  }
+  /* Animation for container tab can't have width change... */
+  tab.tabbrowser-tab[usercontextid]:hover:not([selected="true"], [multiselected])
+    > .tab-stack
+    > .tab-background
+    > .tab-context-line {
+    opacity: 1;
+  }
+}
+@media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") {
+  @keyframes toWide {
+    0% {
+      opacity: 0.8;
+      margin-left: 40%;
+      margin-right: 40%;
+    }
+    100% {
+      opacity: 1;
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+  }
+}
+@media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") {
+  .tabbrowser-tab[usercontextid] .tab-context-line {
+    --identity-icon-color: none;
+  }
+}
+@media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") {
+  :root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before,
+  :root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after {
+    /* As Selected Tab - Box Shadow */
+    stroke: var(--toolbar-color) !important;
+  }
+}
+@media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") {
+  :root:is(:-moz-lwtheme, [lwtheme])
+    #TabsToolbar[brighttext]
+    #tabbrowser-tabs:not([noshadowfortests])
+    .tabbrowser-tab:is([visuallyselected], [multiselected])
+    > .tab-stack
+    > .tab-background {
+    --tabs-border-color: rgba(0, 0, 0, 0.3) !important;
+    box-shadow: 0 0 1px var(--tabs-border-color) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) */
+  }
+}
+@media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") {
+  #TabsToolbar:not([brighttext])
+    #tabbrowser-tabs:not([noshadowfortests])
+    .tabbrowser-tab:is([visuallyselected], [multiselected])
+    > .tab-stack
+    > .tab-background {
+    box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
+  }
+}
 /*= Unselected Tab - Divide line =============================================*/
 /*= Unselected Tab - Dynamic Separator =======================================*/
 @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") {
diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css
index 013dd517..7837d158 100644
--- a/css/leptonChromeESR.css
+++ b/css/leptonChromeESR.css
@@ -7890,6 +7890,117 @@
     margin: unset !important;
   }
 }
+@supports not -moz-bool-pref("userChrome.tab.photon_like_contextline") {
+  @supports -moz-bool-pref("userChrome.tab.supernova_like_contextline") {
+    .tab-context-line {
+      display: inline-flex !important;
+      display: -moz-inline-box !important;
+      height: 1px !important;
+      border-radius: 9999px !important;
+      margin-top: 3px;
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+    /* Override container tab style */
+    tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
+      margin-top: 3px !important;
+      margin-left: 5px !important;
+      margin-right: 5px !important;
+    }
+    tab.tabbrowser-tab[usercontextid]:not([selected="true"], [multiselected])
+      > .tab-stack
+      > .tab-background
+      > .tab-context-line {
+      opacity: 0;
+      transition: all 0.2s cubic-bezier(0, 0.9, 0.15, 1) !important;
+    }
+    :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]),
+    :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] .tab-context-line,
+    :root[lwtheme-mozlightdark][lwthemetextcolor="bright"],
+    :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line {
+      --tab-line-color: #45a1ff;
+    }
+    .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
+      background-color: var(--tab-line-color, #45a1ff) !important;
+    }
+    /* Set the active effect */
+    tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .tab-context-line {
+      margin-left: 6px !important;
+      margin-right: 6px !important;
+    }
+    .tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line {
+      background: #217ddb !important;
+      margin-left: 6px;
+      margin-right: 6px;
+    }
+    /* Set the hover effect */
+    .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
+      background-color: rgba(0, 0, 0, 0.2) !important;
+      opacity: 1 !important;
+      transform: none !important;
+    }
+    #TabsToolbar[brighttext]
+      .tabbrowser-tab:hover:not([selected="true"], [multiselected])
+      > .tab-stack
+      > .tab-background
+      > .tab-context-line {
+      background-color: rgba(255, 255, 255, 0.3137254902) !important;
+    }
+    /* Animation */
+    @media (prefers-reduced-motion: no-preference) {
+      .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
+        animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
+      }
+      /* Animation for container tab can't have width change... */
+      tab.tabbrowser-tab[usercontextid]:hover:not([selected="true"], [multiselected])
+        > .tab-stack
+        > .tab-background
+        > .tab-context-line {
+        opacity: 1;
+      }
+    }
+    /* Animation for hover effect */
+    @keyframes toWide {
+      0% {
+        opacity: 0.8;
+        margin-left: 40%;
+        margin-right: 40%;
+      }
+      100% {
+        opacity: 1;
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+    /* --- copied (not modified) from _photon_like_contextline.scss --- */
+    /* Prevent identity color flashing */
+    .tabbrowser-tab[usercontextid] .tab-context-line {
+      --identity-icon-color: none;
+    }
+    :root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before,
+    :root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after {
+      /* As Selected Tab - Box Shadow */
+      stroke: var(--toolbar-color) !important;
+    }
+    /* Remove side's background color border */
+    :root:is(:-moz-lwtheme, [lwtheme])
+      #TabsToolbar[brighttext]
+      #tabbrowser-tabs:not([noshadowfortests])
+      .tabbrowser-tab:is([visuallyselected], [multiselected])
+      > .tab-stack
+      > .tab-background {
+      --tabs-border-color: rgba(0, 0, 0, 0.3) !important;
+      box-shadow: 0 0 1px var(--tabs-border-color) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) */
+    }
+    #TabsToolbar:not([brighttext])
+      #tabbrowser-tabs:not([noshadowfortests])
+      .tabbrowser-tab:is([visuallyselected], [multiselected])
+      > .tab-stack
+      > .tab-background {
+      box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
+    }
+  }
+}
 /*= Unselected Tab - Divide line =============================================*/
 /*= Unselected Tab - Dynamic Separator =======================================*/
 @supports -moz-bool-pref("userChrome.tab.dynamic_separator") {
diff --git a/src/tab/_selected_tab.scss b/src/tab/_selected_tab.scss
index c2c35922..774b4741 100644
--- a/src/tab/_selected_tab.scss
+++ b/src/tab/_selected_tab.scss
@@ -67,3 +67,9 @@
 @include Option("userChrome.tab.photon_like_contextline") {
   @import "selected_tab/photon_like_contextline";
 }
+
+@include NotOption("userChrome.tab.photon_like_contextline") {
+  @include Option("userChrome.tab.supernova_like_contextline") {
+    @import "selected_tab/supernova_like_contextline";
+  }
+}
diff --git a/src/tab/selected_tab/_supernova_like_contextline.scss b/src/tab/selected_tab/_supernova_like_contextline.scss
new file mode 100644
index 00000000..b769a39e
--- /dev/null
+++ b/src/tab/selected_tab/_supernova_like_contextline.scss
@@ -0,0 +1,117 @@
+.tab-context-line {
+  @include InlineBox(true);
+  height: 1px !important;
+  border-radius: 9999px !important;
+  margin-top: 3px;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+/* Override container tab style */
+tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
+  margin-top: 3px !important;
+  margin-left: 5px !important;
+  margin-right: 5px !important;
+}
+
+tab.tabbrowser-tab[usercontextid]:not([selected="true"], [multiselected])
+  > .tab-stack
+  > .tab-background
+  > .tab-context-line {
+  opacity: 0;
+  transition: all 0.2s cubic-bezier(0, 0.9, 0.15, 1) !important;
+}
+
+#{built-in-light-theme()} .tab-context-line,
+#{built-in-dark-theme()} .tab-context-line {
+  --tab-line-color: #45a1ff;
+}
+.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
+  background-color: var(--tab-line-color, #45a1ff) !important;
+}
+
+/* Set the active effect */
+tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .tab-context-line {
+  margin-left: 6px !important;
+  margin-right: 6px !important;
+}
+
+.tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line {
+  background: #217ddb !important;
+  margin-left: 6px;
+  margin-right: 6px;
+}
+
+/* Set the hover effect */
+.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
+  background-color: rgba(0, 0, 0, 0.2) !important;
+  opacity: 1 !important;
+  transform: none !important;
+}
+
+#TabsToolbar[brighttext]
+  .tabbrowser-tab:hover:not([selected="true"], [multiselected])
+  > .tab-stack
+  > .tab-background
+  > .tab-context-line {
+  background-color: #ffffff50 !important;
+}
+
+/* Animation */
+@media (prefers-reduced-motion: no-preference) {
+  .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
+    animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
+  }
+
+  /* Animation for container tab can't have width change... */
+  tab.tabbrowser-tab[usercontextid]:hover:not([selected="true"], [multiselected])
+    > .tab-stack
+    > .tab-background
+    > .tab-context-line {
+    opacity: 1;
+  }
+}
+
+/* Animation for hover effect */
+@keyframes toWide {
+  0% {
+    opacity: 0.8;
+    margin-left: 40%;
+    margin-right: 40%;
+  }
+  100% {
+    opacity: 1;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+}
+
+/* --- copied (not modified) from _photon_like_contextline.scss --- */
+
+/* Prevent identity color flashing */
+.tabbrowser-tab[usercontextid] .tab-context-line {
+  --identity-icon-color: none;
+}
+:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before,
+:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after {
+  /* As Selected Tab - Box Shadow */
+  stroke: var(--toolbar-color) !important;
+}
+
+/* Remove side's background color border */
+:root#{$lwtheme}
+  #TabsToolbar[brighttext]
+  #tabbrowser-tabs:not([noshadowfortests])
+  .tabbrowser-tab:is([visuallyselected], [multiselected])
+  > .tab-stack
+  > .tab-background {
+  --tabs-border-color: rgba(0, 0, 0, 0.3) !important;
+  box-shadow: 0 0 1px var(--tabs-border-color) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) */
+}
+#TabsToolbar:not([brighttext])
+  #tabbrowser-tabs:not([noshadowfortests])
+  .tabbrowser-tab:is([visuallyselected], [multiselected])
+  > .tab-stack
+  > .tab-background {
+  box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
+}
diff --git a/user.js b/user.js
index 2bcd415d..2fe73768 100644
--- a/user.js
+++ b/user.js
@@ -47,6 +47,9 @@ user_pref("userChrome.tab.bottom_rounded_corner",      true);
 user_pref("userChrome.tab.photon_like_contextline",   false);
 user_pref("userChrome.rounding.square_tab",           false);
 
+// Proton Only
+// user_pref("userChrome.tab.supernova_like_contextline",   true);
+
 // == Theme Compatibility Settings =============================================
 // user_pref("userChrome.compatibility.accent_color",         true); // Firefox v103 Below
 // user_pref("userChrome.compatibility.covered_header_image", true);