diff --git a/css/components/separator.css b/css/components/separator.css
index 7aa1cb6..1412575 100644
--- a/css/components/separator.css
+++ b/css/components/separator.css
@@ -1,87 +1,71 @@
-/* Base Separator Styles */
+/* Base Separator Styling */
 .separator {
-    width: 100%;
-    border: none;
-    margin: clamp(var(--space-2), 1vw, var(--space-4)) 0;
-    position: relative;
-  }
-  
-  /* Line Style Variants */
-  .separator-solid {
-    border-top: 1px solid var(--neutral-300);
-  }
-  
-  .separator-dashed {
-    border-top: 1px dashed var(--neutral-300);
-  }
-  
-  .separator-dotted {
-    border-top: 1px dotted var(--neutral-300);
+  width: 100%;
+  border: none;
+  margin: clamp(var(--space-2), 1vw, var(--space-4)) 0;
+  position: relative;
+}
+
+/* Line Style Variants */
+.separator[data-style="solid"] {
+  border-top: 1px solid var(--neutral-300);
+}
+.separator[data-style="dashed"] {
+  border-top: 1px dashed var(--neutral-300);
+}
+.separator[data-style="dotted"] {
+  border-top: 1px dotted var(--neutral-300);
+}
+
+/* Thickness Variants */
+.separator[data-thickness="thin"] { border-top-width: 1px; }
+.separator[data-thickness="md"] { border-top-width: 2px; }
+.separator[data-thickness="lg"] { border-top-width: 4px; }
+
+/* Color Variants */
+.separator[data-variant="primary"] { border-top-color: var(--primary); }
+.separator[data-variant="secondary"] { border-top-color: var(--secondary); }
+.separator[data-variant="success"] { border-top-color: var(--success); }
+.separator[data-variant="warning"] { border-top-color: var(--warning); }
+.separator[data-variant="danger"] { border-top-color: var(--danger); }
+
+/* Separator with Text */
+.separator-text {
+  display: flex;
+  align-items: center;
+  color: var(--neutral-600);
+  font-size: clamp(0.75rem, 1vw, 0.875rem);
+}
+.separator-text::before,
+.separator-text::after {
+  content: "";
+  flex: 1;
+  border-top: 1px solid var(--neutral-300);
+  margin: 0 clamp(var(--space-2), 0.5vw, var(--space-4));
+}
+.separator-text[data-variant="primary"]::before,
+.separator-text[data-variant="primary"]::after { border-top-color: var(--primary); }
+/* Additional color variants for text separators */
+.separator-text[data-variant="secondary"]::before,
+.separator-text[data-variant="secondary"]::after { border-top-color: var(--secondary); }
+/* Repeat for success, warning, and danger */
+
+/* Alignment Variants for Text */
+.separator-text[data-align="left"]::before {
+  flex: 0;
+  margin-right: clamp(var(--space-2), 0.5vw, var(--space-4));
+}
+.separator-text[data-align="right"]::after {
+  flex: 0;
+  margin-left: clamp(var(--space-2), 0.5vw, var(--space-4));
+}
+
+/* Responsive Adjustments */
+@media (max-width: 600px) {
+  .separator {
+      margin: clamp(var(--space-1), 0.5vw, var(--space-2)) 0;
   }
-  
-  /* Thickness Variants */
-  .separator-thin { border-top-width: 1px; }
-  .separator-md { border-top-width: 2px; }
-  .separator-lg { border-top-width: 4px; }
-  
-  /* Color Variants */
-  .separator-primary { border-top-color: var(--primary); }
-  .separator-secondary { border-top-color: var(--secondary); }
-  .separator-success { border-top-color: var(--success); }
-  .separator-warning { border-top-color: var(--warning); }
-  .separator-danger { border-top-color: var(--danger); }
-  
-  /* Separator with Text */
   .separator-text {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    color: var(--neutral-600);
-    font-size: clamp(0.75rem, 1vw, 0.875rem);
-  }
-  
-  .separator-text::before,
-  .separator-text::after {
-    content: "";
-    flex: 1;
-    border-top: 1px solid var(--neutral-300);
-    margin: 0 clamp(var(--space-2), 0.5vw, var(--space-4));
-  }
-  
-  /* Color Variants for Text Separator */
-  .separator-text.separator-primary::before,
-  .separator-text.separator-primary::after { border-top-color: var(--primary); }
-  
-  .separator-text.separator-secondary::before,
-  .separator-text.separator-secondary::after { border-top-color: var(--secondary); }
-  
-  .separator-text.separator-success::before,
-  .separator-text.separator-success::after { border-top-color: var(--success); }
-  
-  .separator-text.separator-warning::before,
-  .separator-text.separator-warning::after { border-top-color: var(--warning); }
-  
-  .separator-text.separator-danger::before,
-  .separator-text.separator-danger::after { border-top-color: var(--danger); }
-  
-  /* Alignment Variants */
-  .separator-text-left::before {
-    flex: 0;
-    margin-right: clamp(var(--space-2), 0.5vw, var(--space-4));
-  }
-  
-  .separator-text-right::after {
-    flex: 0;
-    margin-left: clamp(var(--space-2), 0.5vw, var(--space-4));
-  }
-  
-  /* Responsive Adjustments */
-  @media (max-width: 600px) {
-    .separator {
-      margin: clamp(var(--space-1), 0.5vw, var(--space-2)) 0;
-    }
-  
-    .separator-text {
       font-size: clamp(0.625rem, 1vw, 0.75rem);
-    }
-  }
\ No newline at end of file
+  }
+}