diff --git a/components/RingSelect/index.tsx b/components/RingSelect/index.tsx
index a6846090..69bbd6a9 100644
--- a/components/RingSelect/index.tsx
+++ b/components/RingSelect/index.tsx
@@ -16,114 +16,25 @@ import './index.scss'
 // Types
 import { CharacterOverMastery } from '~types'
 
-type SelectOpenStates = {
-  [key: string]: boolean
-  modifier1: boolean
-  modifier2: boolean
-  modifier3: boolean
-  modifier4: boolean
-  strength1: boolean
-  strength2: boolean
-  strength3: boolean
-  strength4: boolean
-}
-
-interface Ring {
-  open: boolean
-  modifier: number
-  strength: number
-  error: string
-}
-
-interface RingMap {
-  [index: number]: Ring
-  1: Ring
-  2: Ring
-  3: Ring
-  4: Ring
-}
-
-const emptyRing: Ring = {
-  open: false,
+const emptyRing: ExtendedMastery = {
   modifier: 0,
   strength: 0,
-  error: '',
 }
 
 interface Props {
   gridCharacter: GridCharacter
-  onOpenChange: (index: 1 | 2 | 3 | 4, open: boolean) => void
-  sendValidity: (isValid: boolean) => void
   sendValues: (overMastery: CharacterOverMastery) => void
 }
 
 const RingSelect = (props: Props) => {
-  const router = useRouter()
-  const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
-  const { t } = useTranslation('common')
-
   // Ring value states
-  const [ringModifier1, setRingModifier1] = useState(0)
-  const [ringModifier2, setRingModifier2] = useState(0)
-  const [ringModifier3, setRingModifier3] = useState(0)
-  const [ringModifier4, setRingModifier4] = useState(0)
-
-  const [ringStrength1, setRingStrength1] = useState(0)
-  const [ringStrength2, setRingStrength2] = useState(0)
-  const [ringStrength3, setRingStrength3] = useState(0)
-  const [ringStrength4, setRingStrength4] = useState(0)
-
-  // UI states
-  const [openStates, setOpenStates] = useState<SelectOpenStates>({
-    modifier1: false,
-    modifier2: false,
-    modifier3: false,
-    modifier4: false,
-    strength1: false,
-    strength2: false,
-    strength3: false,
-    strength4: false,
-  })
-
-  // Rings
-  let rings: RingMap = {
+  const [rings, setRings] = useState<CharacterOverMastery>({
     1: { ...emptyRing, modifier: 1 },
     2: { ...emptyRing, modifier: 2 },
     3: emptyRing,
     4: emptyRing,
-  }
+  })
 
-  function setOpen(
-    index: number,
-    side: 'modifier' | 'strength',
-    value: boolean
-  ) {
-    const key = `${side}${index}`
-    setOpenStates({
-      ...openStates,
-      [key]: value,
-    })
-  }
-
-  const errorClasses = {
-    1: classNames({
-      errors: true,
-      visible: rings[1].error.length > 0,
-    }),
-    2: classNames({
-      errors: true,
-      visible: rings[2].error.length > 0,
-    }),
-    3: classNames({
-      errors: true,
-      visible: rings[3].error.length > 0,
-    }),
-    4: classNames({
-      errors: true,
-      visible: rings[4].error.length > 0,
-    }),
-  }
 
   function dataSet(index: number) {
     const noValue = {
@@ -154,126 +65,8 @@ const RingSelect = (props: Props) => {
     }
   }
 
-  // useEffect(() => {
-  //   props.sendValues(
-  //     primaryAxModifier,
-  //     primaryAxValue,
-  //     secondaryAxModifier,
-  //     secondaryAxValue
-  //   )
-  // }, [
-  //   props,
-  //   primaryAxModifier,
-  //   primaryAxValue,
-  //   secondaryAxModifier,
-  //   secondaryAxValue,
-  // ])
-
-  // useEffect(() => {
-  //   if (
-  //     props.currentSkills &&
-  //     props.currentSkills[0].modifier != null &&
-  //     props.currentSkills[0].modifier >= 0
-  //   ) {
-  //     setPrimaryAxModifier(props.currentSkills[0].modifier)
-  //     setPrimaryAxValue(props.currentSkills[0].strength)
-  //   } else setPrimaryAxModifier(-1)
-  // }, [props.currentSkills, setPrimaryAxModifier])
-
-  // useEffect(() => {
-  //   if (props.currentSkills && props.currentSkills[1].modifier) {
-  //     setSecondaryAxModifier(props.currentSkills[1].modifier)
-  //     setSecondaryAxValue(props.currentSkills[1].strength)
-  //   } else {
-  //     setSecondaryAxModifier(-1)
-  //   }
-  // }, [props.currentSkills, setSecondaryAxModifier])
-
-  // useEffect(() => {
-  //   let noErrors = false
-
-  //   // if (errors.axValue1 === '' && errors.axValue2 === '') {
-
-  //   //     noErrors = true
-  //   // }
-
-  //   props.sendValidity(noErrors)
-  // }, [errors])
-
-  function openChange(index: 1 | 2 | 3 | 4, side: 'modifier' | 'strength') {
-    switch (index) {
-      case 1:
-        props.onOpenChange(1, !ring1Open)
-        setRing1Open(!ring1Open)
-        break
-      case 2:
-        props.onOpenChange(2, !ring2Open)
-        setRing2Open(!ring2Open)
-        break
-      case 3:
-        props.onOpenChange(3, !ring3Open)
-        setRing3Open(!ring3Open)
-        break
-      case 4:
-        props.onOpenChange(4, !ring4Open)
-        setRing4Open(!ring4Open)
-        break
-    }
   }
 
-  function onClose(index: 1 | 2 | 3 | 4) {
-    props.onOpenChange(index, false)
-  }
-
-  // function generateOptions(modifierSet: number) {
-  //   const axOptions = ax[props.axType - 1]
-
-  //   let axOptionElements: React.ReactNode[] = []
-  //   if (modifierSet == 0) {
-  //     axOptionElements = axOptions.map((ax, i) => {
-  //       return (
-  //         <SelectItem key={i} value={ax.id}>
-  //           {ax.name[locale]}
-  //         </SelectItem>
-  //       )
-  //     })
-  //   } else {
-  //     // If we are loading data from the server, state doesn't set before render,
-  //     // so our defaultValue is undefined.
-  //     let modifier = -1
-  //     if (primaryAxModifier >= 0) modifier = primaryAxModifier
-  //     else if (props.currentSkills) modifier = props.currentSkills[0].modifier
-
-  //     if (modifier >= 0 && axOptions[modifier]) {
-  //       const primarySkill = axOptions[modifier]
-
-  //       if (primarySkill.secondary) {
-  //         const secondaryAxOptions = primarySkill.secondary
-  //         axOptionElements = secondaryAxOptions.map((ax, i) => {
-  //           return (
-  //             <SelectItem key={i} value={ax.id}>
-  //               {ax.name[locale]}
-  //             </SelectItem>
-  //           )
-  //         })
-  //       }
-  //     }
-  //   }
-
-  //   axOptionElements?.unshift(
-  //     <SelectItem key={-1} value={-1}>
-  //       {t('ax.no_skill')}
-  //     </SelectItem>
-  //   )
-  //   return axOptionElements
-  // }
-
-  function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {}
-
-  function handleErrors(number: number) {}
-
-  function receiveRingValues(left: number, right: number) {}
-
   return (
     <div className="Rings">
       {[...Array(4)].map((element, i) => {
diff --git a/components/SelectWithInput/index.tsx b/components/SelectWithInput/index.tsx
index 99f638a1..156b92ff 100644
--- a/components/SelectWithInput/index.tsx
+++ b/components/SelectWithInput/index.tsx
@@ -20,7 +20,7 @@ interface Props {
   selectDisabled: boolean
   inputValue: number
   awakeningLevel?: number
-  onOpenChange: (open: boolean) => void
+  onOpenChange?: (open: boolean) => void
   sendValidity: (isValid: boolean) => void
   sendValues: (type: number, level: number) => void
 }
@@ -80,12 +80,12 @@ const SelectWithInput = ({
   function changeOpen() {
     if (!selectDisabled) {
       setOpen(!open)
-      onOpenChange(!open)
+      if (onOpenChange) onOpenChange(!open)
     }
   }
 
   function onClose() {
-    onOpenChange(false)
+    if (onOpenChange) onOpenChange(false)
   }
 
   // Methods: Rendering
diff --git a/components/SelectWithSelect/index.tsx b/components/SelectWithSelect/index.tsx
index 9dc43e94..094fbe9e 100644
--- a/components/SelectWithSelect/index.tsx
+++ b/components/SelectWithSelect/index.tsx
@@ -19,7 +19,6 @@ interface Props {
   leftSelectValue: number
   leftSelectDisabled: boolean
   rightSelectValue: number
-  onOpenChange: (index: 'left' | 'right', open: boolean) => void
   sendValues: (left: number, right: number) => void
 }
 
@@ -34,7 +33,6 @@ const SelectWithInput = ({
   leftSelectDisabled,
   leftSelectValue,
   rightSelectValue,
-  onOpenChange,
   sendValues,
 }: Props) => {
   const router = useRouter()
@@ -63,16 +61,14 @@ const SelectWithInput = ({
   function changeOpen(side: 'left' | 'right') {
     if (side === 'left' && !leftSelectDisabled) {
       setLeftSelectOpen(!leftSelectOpen)
-      onOpenChange('left', !open)
     } else if (side === 'right') {
       setRightSelectOpen(!rightSelectOpen)
-      onOpenChange('right', !open)
     }
   }
 
   function onClose() {
-    onOpenChange('left', false)
-    onOpenChange('right', false)
+    setLeftSelectOpen(false)
+    setRightSelectOpen(false)
   }
 
   // Methods: Rendering