diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
index 287e073ec8..934371db72 100644
--- a/assets/scss/_custom.scss
+++ b/assets/scss/_custom.scss
@@ -514,6 +514,36 @@ body {
   h1:first-of-type + .alert.callout {
     margin-top: 1.5em;
   }
+
+  div.feature-state-notice {
+    background-color: #daeaf9;
+    border-radius: 0.75rem;
+    padding: 1rem;
+    margin-bottom: 1em;
+
+    font-size: 1.2em;
+
+    > .feature-state-name::before {
+      content: 'ⓘ  ';
+      color: #326ce5; // Kubernetes blue
+    }
+    > .feature-state-name {
+      display: inline-block;
+      font-size: 0.95em;
+      font-weight: bold;
+      color: #000;
+      background-color: #daeaf9;
+    }
+
+    code {
+      color: #000;
+      font-size: 1em;
+      background-color: #daeaf9;
+    }
+
+    margin-right: 2em;
+    max-width: 80%;
+  }
 }
 
 // Special color for third party content disclaimers
diff --git a/layouts/shortcodes/feature-state.html b/layouts/shortcodes/feature-state.html
index 822f68d822..47abccdc51 100644
--- a/layouts/shortcodes/feature-state.html
+++ b/layouts/shortcodes/feature-state.html
@@ -9,8 +9,8 @@
   {{ if not $is_valid }}
     {{ errorf "%q is not a valid feature-state, use one of %q" $state $valid_states }}
   {{ else }}
-  <div class="my-2 feature-state-notice feature-{{ $state }}">
-    <b>{{ T "feature_state" }}</b> <code>{{T "feature_state_kubernetes_label" }} {{ $for_k8s_version }} [{{ $state }}]</code>
+  <div class="feature-state-notice feature-{{ $state }}">
+    <span class="feature-state-name">{{ T "feature_state" }}</span> <code>{{T "feature_state_kubernetes_label" }} {{ $for_k8s_version }} [{{ $state }}]</code>
   </div>
   {{ end }}
 
@@ -31,19 +31,19 @@
       <!-- Iterate through feature gate files -->
       {{- range $featureGateFile := $sortedFeatureGates -}}
         {{- $featureGateNameFromFile := $featureGateFile.Params.Title -}}
-        
+
         {{- if eq $featureGateNameFromFile $feature_gate_name -}}
           <!-- Extract information from the final stage of the feature gate -->
           {{- $currentStage := index $featureGateFile.Params.stages (sub (len $featureGateFile.Params.stages) 1) -}}
-          {{- with $currentStage -}}  
+          {{- with $currentStage -}}
            
           <!-- Display feature state information  -->
-          <div class="my-2 feature-state-notice feature-{{ .stage }}" title="{{ printf "%s %s" (T "feature_state_feature_gate_tooltip") $feature_gate_name }}">
-            <b>{{ T "feature_state" }}</b> <code>{{T "feature_state_kubernetes_label" }} v{{ .fromVersion }} [{{ .stage }}]</code>
-          </div>       
+          <div class="feature-state-notice feature-{{ .stage }}" title="{{ printf "%s %s" (T "feature_state_feature_gate_tooltip") $feature_gate_name }}">
+            <span class="feature-state-name">{{ T "feature_state" }}</span> <code>{{T "feature_state_kubernetes_label" }} v{{ .fromVersion }} [{{ .stage }}]</code>
+          </div>
 
-            {{- $featureGateFound = true -}}        
-          {{- end -}}        
+            {{- $featureGateFound = true -}}
+          {{- end -}}
         {{- end -}}
       {{- end -}}
 
diff --git a/static/css/feature-states.css b/static/css/feature-states.css
deleted file mode 100644
index 725cf9e0fc..0000000000
--- a/static/css/feature-states.css
+++ /dev/null
@@ -1,39 +0,0 @@
-/* Feature States */
-
-.beta, .stable, .alpha, .deprecated {
-    margin-top: 20px;
-    padding: 15px;
-    background-color: #fafafa;
-    border: 1px solid transparent;
-    border-radius:4px;
-}
-
-.beta {    
-    color: #31708f;
-    border-color: #bce8f1;
-}
-
-
-.stable {    
-    color: #3c763d;
-    border-color: #d6e9c6;
-}
-
-.alpha {    
-    color: #8a6d3b;
-    border-color: #faebcc;
-}
-
-.deprecated {    
-    color: #a94442;
-    border-color: #ebccd1;
-}
-
-.deprecation_file_warning {
-    padding: 20px;
-    margin: 20px 0;
-    border: 1px solid #eee;
-    border-left-color: #d9534f;
-    border-left-width: 5px;
-    border-radius: 3px;
-}