diff --git a/components/uncap/TranscendenceStar/index.module.scss b/components/uncap/TranscendenceStar/index.module.scss
index 12e4c940..10b0a6f9 100644
--- a/components/uncap/TranscendenceStar/index.module.scss
+++ b/components/uncap/TranscendenceStar/index.module.scss
@@ -1,4 +1,4 @@
-.TranscendenceStar {
+.star {
   $size: 18px;
   position: relative;
 
@@ -6,35 +6,35 @@
     transform: scale(1.2);
   }
 
-  &.Immutable {
+  &.immutable {
     pointer-events: none;
   }
 
-  &.Empty {
+  &.empty {
     @include hidpiImage('/icons/transcendence/0/stage-0', png, $size, $size);
   }
 
-  &.Stage1 {
+  &.stage1 {
     @include hidpiImage('/icons/transcendence/1/stage-1', png, $size, $size);
   }
 
-  &.Stage2 {
+  &.stage2 {
     @include hidpiImage('/icons/transcendence/2/stage-2', png, $size, $size);
   }
 
-  &.Stage3 {
+  &.stage3 {
     @include hidpiImage('/icons/transcendence/3/stage-3', png, $size, $size);
   }
 
-  &.Stage4 {
+  &.stage4 {
     @include hidpiImage('/icons/transcendence/4/stage-4', png, $size, $size);
   }
 
-  &.Stage5 {
+  &.stage5 {
     @include hidpiImage('/icons/transcendence/5/stage-5', png, $size, $size);
   }
 
-  .Figure {
+  .figure {
     $size: 18px;
     background-repeat: no-repeat;
     background-size: 54px 54px;
@@ -42,7 +42,7 @@
     height: $size;
     width: $size;
 
-    &.Interactive.Base {
+    &.interactive.base {
       $size: $unit-6x;
 
       @include hidpiImage(
diff --git a/components/uncap/TranscendenceStar/index.tsx b/components/uncap/TranscendenceStar/index.tsx
index e093d8fd..8f426549 100644
--- a/components/uncap/TranscendenceStar/index.tsx
+++ b/components/uncap/TranscendenceStar/index.tsx
@@ -36,18 +36,18 @@ const TranscendenceStar = ({
 
   // Classes
   const starClasses = classnames({
-    TranscendenceStar: true,
-    Immutable: immutable,
-    Empty: stage === 0,
-    Stage1: stage === 1,
-    Stage2: stage === 2,
-    Stage3: stage === 3,
-    Stage4: stage === 4,
-    Stage5: stage === 5,
+    [styles.star]: true,
+    [styles.immutable]: immutable,
+    [styles.empty]: stage === 0,
+    [styles.stage1]: stage === 1,
+    [styles.stage2]: stage === 2,
+    [styles.stage3]: stage === 3,
+    [styles.stage4]: stage === 4,
+    [styles.stage5]: stage === 5,
   })
 
   const baseImageClasses = classnames(className, {
-    Figure: true,
+    [styles.figure]: true,
   })
 
   useEffect(() => {
diff --git a/components/uncap/UncapIndicator/index.module.scss b/components/uncap/UncapIndicator/index.module.scss
index 758f4750..87c45f89 100644
--- a/components/uncap/UncapIndicator/index.module.scss
+++ b/components/uncap/UncapIndicator/index.module.scss
@@ -1,18 +1,18 @@
-.UncapWrapper {
+.wrapper {
   position: relative;
-}
 
-.UncapIndicator {
-  display: flex;
-  flex-direction: row;
-  align-content: center;
-  justify-content: center;
-  gap: 2px;
-  list-style: none;
-  margin: 0;
-  padding: 0;
+  .indicator {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    justify-content: center;
+    gap: 2px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
 
-  &:hover {
-    cursor: pointer;
+    &:hover {
+      cursor: pointer;
+    }
   }
 }
diff --git a/components/uncap/UncapIndicator/index.tsx b/components/uncap/UncapIndicator/index.tsx
index 1a603786..1711c171 100644
--- a/components/uncap/UncapIndicator/index.tsx
+++ b/components/uncap/UncapIndicator/index.tsx
@@ -150,8 +150,8 @@ const UncapIndicator = (props: Props) => {
   }
 
   return (
-    <div className="UncapWrapper">
-      <ul className="UncapIndicator">
+    <div className={styles.wrapper}>
+      <ul className={styles.indicator}>
         {Array.from(Array(numStars)).map((x, i) => {
           if (props.type === 'character' && i > 4) {
             if (props.special) return ulb(i)
diff --git a/components/uncap/UncapStar/index.module.scss b/components/uncap/UncapStar/index.module.scss
index ff0a7370..a6f30d90 100644
--- a/components/uncap/UncapStar/index.module.scss
+++ b/components/uncap/UncapStar/index.module.scss
@@ -1,4 +1,4 @@
-.UncapStar {
+.star {
   $size: 18px;
   background-repeat: no-repeat;
   background-size: $size;
diff --git a/components/uncap/UncapStar/index.tsx b/components/uncap/UncapStar/index.tsx
index a714988c..9598d23a 100644
--- a/components/uncap/UncapStar/index.tsx
+++ b/components/uncap/UncapStar/index.tsx
@@ -18,12 +18,12 @@ interface Props
 
 const UncapStar = (props: Props) => {
   const classes = classnames({
-    UncapStar: true,
-    empty: props.empty,
-    special: props.special,
-    mlb: !props.special,
-    flb: props.flb,
-    ulb: props.ulb,
+    [styles.star]: true,
+    [styles.empty]: props.empty,
+    [styles.special]: props.special,
+    [styles.mlb]: !props.special,
+    [styles.flb]: props.flb,
+    [styles.ulb]: props.ulb,
   })
 
   function clicked() {