diff --git a/.idea/.gitignore b/.idea/.gitignore
index f54ed54..55eca18 100644
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@@ -2,4 +2,5 @@
 /shelf/
 /workspace.xml
 /deploymentTargetSelector.xml
+misc.xml
 /misc.xml
diff --git a/app/src/main/assets/katex.html b/app/src/main/assets/katex.html
index 4a9536e..4188a56 100644
--- a/app/src/main/assets/katex.html
+++ b/app/src/main/assets/katex.html
@@ -9,18 +9,14 @@
     <title>Notation Card</title>
     <style>
         body {
-           margin: 0;
            min-height: 100vh;
-           display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
 
        #katex-render {
-           margin: auto;
            font-size: 22px;
-           /* Additional styling if needed */
        }
     </style>
 </head>
@@ -29,10 +25,9 @@
 <div id="katex-render"></div>
 
 <script>
-    function setTheme(bgColor, textColor) {
-            document.body.style.backgroundColor = bgColor;
-            document.body.style.color = textColor;
-        }
+    function setTheme(textColor) {
+        document.body.style.color = textColor;
+    }
     renderMathInElement(document.body, {
       delimiters: [
         {left: "$$", right: "$$", display: true},
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/DeepLinkerActivity.kt b/app/src/main/java/com/belmontCrest/cardCrafter/DeepLinkerActivity.kt
index ddc43f0..d96d734 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/DeepLinkerActivity.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/DeepLinkerActivity.kt
@@ -23,7 +23,8 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.lifecycle.lifecycleScope
 import com.belmontCrest.cardCrafter.model.application.AppViewModelProvider
-import com.belmontCrest.cardCrafter.model.ui.PreferencesManager
+import com.belmontCrest.cardCrafter.model.application.PreferencesManager
+import com.belmontCrest.cardCrafter.model.application.setPreferenceValues
 import com.belmontCrest.cardCrafter.supabase.controller.viewModels.DeepLinksViewModel
 import com.belmontCrest.cardCrafter.ui.theme.ColorSchemeClass
 import com.belmontCrest.cardCrafter.ui.theme.FlashcardsTheme
@@ -73,14 +74,14 @@ class DeepLinkerActivity : ComponentActivity() {
             val colorScheme = remember { ColorSchemeClass() }
             colorScheme.colorScheme = MaterialTheme.colorScheme
 
+            val pc = setPreferenceValues(preferences)
             val getUIStyle = GetUIStyle(
-                colorScheme, preferences.darkTheme.value,
-                preferences.customScheme.value, preferences.cuteTheme.value
+                colorScheme, pc.darkTheme, pc.dynamicTheme, pc.cuteTheme
             )
             FlashcardsTheme(
-                darkTheme = preferences.darkTheme.value,
-                dynamicColor = preferences.customScheme.value,
-                cuteTheme = preferences.cuteTheme.value
+                darkTheme = pc.darkTheme,
+                dynamicColor = pc.dynamicTheme,
+                cuteTheme = pc.cuteTheme
             ) {
                 Scaffold(
                     modifier = Modifier.fillMaxSize(),
@@ -110,7 +111,7 @@ class DeepLinkerActivity : ComponentActivity() {
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.Center
         ) {
-            Text("Successfully created you account!")
+            Text("Successfully created your account!")
             Text(email)
             Text(createdAt)
             SubmitButton(
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/MainActivity.kt b/app/src/main/java/com/belmontCrest/cardCrafter/MainActivity.kt
index 93219f6..9a5fb71 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/MainActivity.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/MainActivity.kt
@@ -14,6 +14,7 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.coroutineScope
 import androidx.navigation.compose.rememberNavController
 import com.belmontCrest.cardCrafter.model.application.AppViewModelProvider
@@ -22,7 +23,7 @@ import com.belmontCrest.cardCrafter.navigation.navHosts.AppNavHost
 import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.EditingCardListViewModel
 import com.belmontCrest.cardCrafter.controller.viewModels.deckViewsModels.MainViewModel
 import com.belmontCrest.cardCrafter.model.ui.Fields
-import com.belmontCrest.cardCrafter.model.ui.PreferencesManager
+import com.belmontCrest.cardCrafter.model.application.PreferencesManager
 import com.belmontCrest.cardCrafter.supabase.controller.viewModels.SupabaseViewModel
 import com.belmontCrest.cardCrafter.ui.theme.FlashcardsTheme
 import io.github.jan.supabase.annotations.SupabaseInternal
@@ -42,7 +43,7 @@ class MainActivity : ComponentActivity() {
         AppViewModelProvider.Factory
     }
 
-    private val navViewModel : NavViewModel by viewModels{
+    private val navViewModel: NavViewModel by viewModels {
         AppViewModelProvider.Factory
     }
 
@@ -55,11 +56,7 @@ class MainActivity : ComponentActivity() {
         enableEdgeToEdge()
         setContent {
             val navController = rememberNavController()
-            preferences = rememberUpdatedState(
-                PreferencesManager(
-                    applicationContext
-                )
-            ).value
+            preferences = rememberUpdatedState(PreferencesManager(applicationContext)).value
 
             /**
              * Making sure that if it's their first time,
@@ -88,15 +85,14 @@ class MainActivity : ComponentActivity() {
 
 
             if (preferences.getIsFirstTime()) {
-                preferences.darkTheme.value = isSystemDark
                 preferences.setDarkTheme(isSystemDark)
                 preferences.setIsFirstTime()
             }
 
             FlashcardsTheme(
-                darkTheme = preferences.darkTheme.value,
-                dynamicColor = preferences.customScheme.value,
-                cuteTheme = preferences.cuteTheme.value
+                darkTheme = preferences.darkTheme.collectAsStateWithLifecycle().value,
+                dynamicColor = preferences.dynamicTheme.collectAsStateWithLifecycle().value,
+                cuteTheme = preferences.cuteTheme.collectAsStateWithLifecycle().value
             ) {
                 AppNavHost(
                     mainNavController = navController,
@@ -132,6 +128,7 @@ class MainActivity : ComponentActivity() {
             preferences.savePreferences()
         }
     }
+
 }
 
 /*
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/ResetPasswordActivity.kt b/app/src/main/java/com/belmontCrest/cardCrafter/ResetPasswordActivity.kt
index c9bad7e..bf8b83d 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/ResetPasswordActivity.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/ResetPasswordActivity.kt
@@ -29,7 +29,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.lifecycle.lifecycleScope
 import com.belmontCrest.cardCrafter.model.application.AppViewModelProvider
-import com.belmontCrest.cardCrafter.model.ui.PreferencesManager
+import com.belmontCrest.cardCrafter.model.application.PreferencesManager
+import com.belmontCrest.cardCrafter.model.application.setPreferenceValues
 import com.belmontCrest.cardCrafter.supabase.controller.viewModels.DeepLinksViewModel
 import com.belmontCrest.cardCrafter.ui.theme.ColorSchemeClass
 import com.belmontCrest.cardCrafter.ui.theme.FlashcardsTheme
@@ -64,15 +65,13 @@ class ResetPasswordActivity : ComponentActivity() {
                     createdAtState.value = created
                 }
             }
-            preferences = rememberUpdatedState(
-                PreferencesManager(applicationContext)
-            ).value
+            preferences = rememberUpdatedState(PreferencesManager(applicationContext)).value
             val colorScheme = remember { ColorSchemeClass() }
             colorScheme.colorScheme = MaterialTheme.colorScheme
 
+            val pc = setPreferenceValues(preferences)
             val getUIStyle = GetUIStyle(
-                colorScheme, preferences.darkTheme.value,
-                preferences.customScheme.value, preferences.cuteTheme.value
+                colorScheme, pc.darkTheme, pc.dynamicTheme, pc.cuteTheme
             )
             var password by rememberSaveable { mutableStateOf("") }
             var confirmPass by rememberSaveable { mutableStateOf("") }
@@ -80,9 +79,9 @@ class ResetPasswordActivity : ComponentActivity() {
             val coroutineScope = rememberCoroutineScope()
             val context = LocalContext.current
             FlashcardsTheme(
-                darkTheme = preferences.darkTheme.value,
-                dynamicColor = preferences.customScheme.value,
-                cuteTheme = preferences.cuteTheme.value
+                darkTheme = pc.darkTheme,
+                dynamicColor = pc.dynamicTheme,
+                cuteTheme = pc.cuteTheme
             ) {
                 Scaffold(
                     modifier = Modifier.fillMaxSize(),
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/controller/cardHandlers/CTConversionHandler.kt b/app/src/main/java/com/belmontCrest/cardCrafter/controller/cardHandlers/CTConversionHandler.kt
index 8220b60..4735f84 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/controller/cardHandlers/CTConversionHandler.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/controller/cardHandlers/CTConversionHandler.kt
@@ -5,6 +5,8 @@ import com.belmontCrest.cardCrafter.localDatabase.tables.AllCardTypes
 import com.belmontCrest.cardCrafter.localDatabase.tables.CT
 import com.belmontCrest.cardCrafter.localDatabase.tables.Card
 import com.belmontCrest.cardCrafter.localDatabase.tables.Deck
+import com.belmontCrest.cardCrafter.localDatabase.tables.PartOfQorA
+import com.belmontCrest.cardCrafter.model.ui.states.CDetails
 
 
 fun CT.toCard(): Card = when (this) {
@@ -43,6 +45,45 @@ fun List<CT>.toThreeFieldList() = filterIsInstance<CT.ThreeField>().map { it.thr
 fun List<CT>.toMultiChoiceList() = filterIsInstance<CT.MultiChoice>().map { it.multiChoiceCard }
 fun List<CT>.toNotationList() = filterIsInstance<CT.Notation>().map { it.notationCard }
 
+fun CT.Basic.question(): String = this.basicCard.question
+fun CT.Basic.answer(): String = this.basicCard.answer
+
+fun CT.Hint.question(): String = this.hintCard.question
+fun CT.Hint.hint(): String = this.hintCard.hint
+fun CT.Hint.answer(): String = this.hintCard.answer
+
+fun CT.ThreeField.question(): String = this.threeFieldCard.question
+fun CT.ThreeField.middle(): String = this.threeFieldCard.middle
+fun CT.ThreeField.field(): PartOfQorA = this.threeFieldCard.field
+fun CT.ThreeField.answer(): String = this.threeFieldCard.answer
+
+fun CT.MultiChoice.question(): String = this.multiChoiceCard.question
+fun CT.MultiChoice.choices(): List<String> = listOf(
+    this.multiChoiceCard.choiceA, this.multiChoiceCard.choiceB,
+    this.multiChoiceCard.choiceC, this.multiChoiceCard.choiceD
+)
+
+fun CT.MultiChoice.correct(): Char = this.multiChoiceCard.correct
+
+fun CT.Notation.question(): String = this.notationCard.question
+fun CT.Notation.steps(): List<String> = this.notationCard.steps
+fun CT.Notation.answer(): String = this.notationCard.answer
+
+fun CT.toCDetails(): CDetails = when (this) {
+    is CT.Basic -> CDetails(question = this.question(), answer = this.answer())
+    is CT.Hint -> CDetails(question = this.question(), middle = this.hint(), answer = this.answer())
+    is CT.MultiChoice -> CDetails(
+        question = this.question(), choices = this.choices(), correct = this.correct()
+    )
+    is CT.Notation -> CDetails(
+        question = this.question(), steps = this.steps(), answer = this.answer()
+    )
+    is CT.ThreeField -> CDetails(
+        question = this.question(), middle = this.middle(), answer = this.answer(),
+        isQOrA = this.field()
+    )
+}
+
 fun updateCTCard(
     ct: CT, dueCT: CT,
     deck: Deck, vm: CardDeckViewModel,
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/controller/cardHandlers/CardTypeHandler.kt b/app/src/main/java/com/belmontCrest/cardCrafter/controller/cardHandlers/CardTypeHandler.kt
index 29f741a..4efc499 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/controller/cardHandlers/CardTypeHandler.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/controller/cardHandlers/CardTypeHandler.kt
@@ -1,13 +1,7 @@
 package com.belmontCrest.cardCrafter.controller.cardHandlers
 
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.saveable.rememberSaveable
-import com.belmontCrest.cardCrafter.localDatabase.tables.CT
-import com.belmontCrest.cardCrafter.model.ui.Fields
-import com.belmontCrest.cardCrafter.navigation.NavViewModel
+import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.EditCardViewModel
 import com.belmontCrest.cardCrafter.views.cardViews.editCardViews.EditBasicCard
 import com.belmontCrest.cardCrafter.views.cardViews.editCardViews.EditHintCard
 import com.belmontCrest.cardCrafter.views.cardViews.editCardViews.EditThreeCard
@@ -15,140 +9,56 @@ import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 import com.belmontCrest.cardCrafter.uiFunctions.katex.menu.KaTeXMenu
 import com.belmontCrest.cardCrafter.views.cardViews.editCardViews.EditChoiceCard
 import com.belmontCrest.cardCrafter.views.cardViews.editCardViews.EditNotationCard
-import com.belmontCrest.cardCrafter.views.miscFunctions.details.toCardDetails
 
 interface CardTypeHandler {
     @Composable
     fun HandleCardEdit(
-        fields: Fields, ct: CT, vm: NavViewModel,
-        changed: Boolean, getUIStyle: GetUIStyle, onUpdate: () -> KaTeXMenu
+        vm: EditCardViewModel, getUIStyle: GetUIStyle, onUpdate: () -> KaTeXMenu
     )
 }
 
 class BasicCardTypeHandler : CardTypeHandler {
     @Composable
     override fun HandleCardEdit(
-        fields: Fields, ct: CT, vm: NavViewModel,
-        changed: Boolean, getUIStyle: GetUIStyle, onUpdate: () -> KaTeXMenu
+        vm: EditCardViewModel, getUIStyle: GetUIStyle, onUpdate: () -> KaTeXMenu
     ) {
-
-        if (ct is CT.Basic) {
-            if (!changed) {
-                val cardDetails by remember { mutableStateOf(ct.toCardDetails()) }
-                fields.question = rememberSaveable { mutableStateOf(cardDetails.question.value) }
-                fields.answer = rememberSaveable { mutableStateOf(cardDetails.answer.value) }
-            }
-            EditBasicCard(fields)
-        } else {
-            EditBasicCard(fields)
-        }
+        EditBasicCard(vm)
     }
 }
 
 class ThreeCardTypeHandler : CardTypeHandler {
     @Composable
     override fun HandleCardEdit(
-        fields: Fields, ct: CT, vm: NavViewModel,
-        changed: Boolean, getUIStyle: GetUIStyle, onUpdate: () -> KaTeXMenu
+        vm: EditCardViewModel, getUIStyle: GetUIStyle, onUpdate: () -> KaTeXMenu
     ) {
-        if (ct is CT.ThreeField) {
-            if (!changed) {
-                val cardDetails by remember { mutableStateOf(ct.toCardDetails()) }
-                fields.question = rememberSaveable {
-                    mutableStateOf(cardDetails.question.value)
-                }
-                fields.middleField = rememberSaveable {
-                    mutableStateOf(cardDetails.middleField.value)
-                }
-                fields.answer = rememberSaveable {
-                    mutableStateOf(cardDetails.answer.value)
-                }
-                fields.isQOrA = rememberSaveable {
-                    mutableStateOf(cardDetails.isQorA.value)
-                }
-            }
-            EditThreeCard(fields, getUIStyle)
-        } else {
-            EditThreeCard(fields, getUIStyle)
-        }
+        EditThreeCard(vm, getUIStyle)
     }
 }
 
 class HintCardTypeHandler : CardTypeHandler {
     @Composable
     override fun HandleCardEdit(
-        fields: Fields, ct: CT, vm: NavViewModel,
-        changed: Boolean, getUIStyle: GetUIStyle, onUpdate: () -> KaTeXMenu
+        vm: EditCardViewModel, getUIStyle: GetUIStyle, onUpdate: () -> KaTeXMenu
     ) {
-        if (ct is CT.Hint) {
-            if (!changed) {
-                val cardDetails by remember { mutableStateOf(ct.toCardDetails()) }
-                fields.question = rememberSaveable {
-                    mutableStateOf(cardDetails.question.value)
-                }
-                fields.middleField = rememberSaveable {
-                    mutableStateOf(cardDetails.middleField.value)
-                }
-                fields.answer = rememberSaveable {
-                    mutableStateOf(cardDetails.answer.value)
-                }
-            }
-            EditHintCard(fields)
-        } else {
-            EditHintCard(fields)
-        }
+        EditHintCard(vm)
     }
 }
 
 class ChoiceCardTypeHandler : CardTypeHandler {
     @Composable
     override fun HandleCardEdit(
-        fields: Fields, ct: CT, vm: NavViewModel,
-        changed: Boolean, getUIStyle: GetUIStyle, onUpdate: () -> KaTeXMenu
+        vm: EditCardViewModel, getUIStyle: GetUIStyle, onUpdate: () -> KaTeXMenu
     ) {
-        if (ct is CT.MultiChoice) {
-            if (!changed) {
-                val cardDetails by remember { mutableStateOf(ct.toCardDetails()) }
-                fields.question = rememberSaveable { mutableStateOf(cardDetails.question.value) }
-                fields.choices[0].value = rememberSaveable {
-                    cardDetails.choices[0].value
-                }
-                fields.choices[1].value = rememberSaveable {
-                    cardDetails.choices[1].value
-                }
-                fields.choices[2].value = rememberSaveable {
-                    cardDetails.choices[2].value
-                }
-                fields.choices[3].value = rememberSaveable {
-                    cardDetails.choices[3].value
-                }
-                fields.correct = rememberSaveable { mutableStateOf(cardDetails.correct.value) }
-            }
-            EditChoiceCard(fields, getUIStyle)
-        } else {
-            EditChoiceCard(fields, getUIStyle)
-        }
+        EditChoiceCard(vm, getUIStyle)
     }
 }
 
 class NotationCardTypeHandler : CardTypeHandler {
     @Composable
     override fun HandleCardEdit(
-        fields: Fields, ct: CT, vm: NavViewModel,
-        changed: Boolean, getUIStyle: GetUIStyle, onUpdate: () -> KaTeXMenu
+        vm: EditCardViewModel, getUIStyle: GetUIStyle, onUpdate: () -> KaTeXMenu
     ) {
-        if (ct is CT.Notation) {
-            if (!changed) {
-                val cardDetails by remember { mutableStateOf(ct.toCardDetails()) }
-                fields.question = rememberSaveable { mutableStateOf(cardDetails.question.value) }
-                fields.stringList = rememberSaveable { cardDetails.stringList }
-                fields.answer = rememberSaveable { mutableStateOf(cardDetails.answer.value) }
-            }
-            EditNotationCard(fields, vm, getUIStyle, onUpdate)
-        } else {
-            EditNotationCard(fields, vm, getUIStyle, onUpdate)
-        }
-
+        EditNotationCard(vm, getUIStyle, onUpdate)
     }
 }
 
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/controller/cardHandlers/CardUpdaterHandler.kt b/app/src/main/java/com/belmontCrest/cardCrafter/controller/cardHandlers/CardUpdaterHandler.kt
index cb0a169..642795f 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/controller/cardHandlers/CardUpdaterHandler.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/controller/cardHandlers/CardUpdaterHandler.kt
@@ -4,7 +4,7 @@ import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.CardDe
 import com.belmontCrest.cardCrafter.localDatabase.tables.Card
 import com.belmontCrest.cardCrafter.localDatabase.tables.Deck
 import com.belmontCrest.cardCrafter.localDatabase.tables.SavedCard
-import com.belmontCrest.cardCrafter.model.ui.CardState
+import com.belmontCrest.cardCrafter.model.ui.states.CardState
 import java.util.Calendar
 import java.util.Date
 
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/controller/onClickActions/CardOnClickActions.kt b/app/src/main/java/com/belmontCrest/cardCrafter/controller/onClickActions/CardOnClickActions.kt
index d88599e..791669d 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/controller/onClickActions/CardOnClickActions.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/controller/onClickActions/CardOnClickActions.kt
@@ -33,6 +33,7 @@ import com.belmontCrest.cardCrafter.model.TAProp
 import com.belmontCrest.cardCrafter.model.TCProp
 import com.belmontCrest.cardCrafter.model.TextProps
 import com.belmontCrest.cardCrafter.model.Type
+import com.belmontCrest.cardCrafter.model.ui.states.CDetails
 import com.belmontCrest.cardCrafter.navigation.NavViewModel
 import com.belmontCrest.cardCrafter.ui.theme.mainViewModifier
 import com.belmontCrest.cardCrafter.uiFunctions.CustomText
@@ -41,17 +42,17 @@ import com.belmontCrest.cardCrafter.uiFunctions.buttons.SubmitButton
 import kotlinx.coroutines.launch
 
 fun saveCard(
-    fields: Fields,
+    fields: CDetails,
     editCardVM: EditCardViewModel,
     ct: CT
 ): Boolean {
     when (ct) {
         is CT.Basic -> {
-            if (fields.question.value.isNotBlank() && fields.answer.value.isNotBlank()) {
+            if (fields.question.isNotBlank() && fields.answer.isNotBlank()) {
                 editCardVM.updateBasicCard(
                     ct.card.id,
-                    fields.question.value,
-                    fields.answer.value
+                    fields.question,
+                    fields.answer
                 )
                 return true
             } else {
@@ -60,15 +61,12 @@ fun saveCard(
         }
 
         is CT.ThreeField -> {
-            if (fields.question.value.isNotBlank() && fields.answer.value.isNotBlank()
-                && fields.middleField.value.isNotBlank()
+            if (fields.question.isNotBlank() && fields.answer.isNotBlank()
+                && fields.middle.isNotBlank()
             ) {
                 editCardVM.updateThreeCard(
-                    ct.card.id,
-                    fields.question.value,
-                    fields.middleField.value,
-                    fields.answer.value,
-                    fields.isQOrA.value
+                    ct.card.id, fields.question, fields.middle,
+                    fields.answer, fields.isQOrA
                 )
                 return true
             } else {
@@ -78,14 +76,11 @@ fun saveCard(
         }
 
         is CT.Hint -> {
-            if (fields.question.value.isNotBlank() && fields.answer.value.isNotBlank()
-                && fields.middleField.value.isNotBlank()
+            if (fields.question.isNotBlank() && fields.answer.isNotBlank()
+                && fields.middle.isNotBlank()
             ) {
                 editCardVM.updateHintCard(
-                    ct.card.id,
-                    fields.question.value,
-                    fields.middleField.value,
-                    fields.answer.value
+                    ct.card.id, fields.question, fields.middle, fields.answer
                 )
                 return true
             } else {
@@ -95,26 +90,26 @@ fun saveCard(
 
         is CT.MultiChoice -> {
             if (
-                fields.question.value.isNotBlank() &&
-                fields.choices[0].value.isNotBlank() &&
-                fields.choices[1].value.isNotBlank() &&
-                !(fields.choices[2].value.isBlank() &&
-                        fields.choices[3].value.isNotBlank()) &&
-                !((fields.choices[2].value.isBlank() &&
-                        fields.correct.value == 'c') ||
-                        (fields.choices[3].value.isBlank() &&
-                                fields.correct.value == 'd')
+                fields.question.isNotBlank() &&
+                fields.choices[0].isNotBlank() &&
+                fields.choices[1].isNotBlank() &&
+                !(fields.choices[2].isBlank() &&
+                        fields.choices[3].isNotBlank()) &&
+                !((fields.choices[2].isBlank() &&
+                        fields.correct == 'c') ||
+                        (fields.choices[3].isBlank() &&
+                                fields.correct == 'd')
                         ) &&
-                fields.correct.value in 'a'..'d'
+                fields.correct in 'a'..'d'
             ) {
                 editCardVM.updateMultiChoiceCard(
                     ct.card.id,
-                    fields.question.value,
-                    fields.choices[0].value,
-                    fields.choices[1].value,
-                    fields.choices[2].value,
-                    fields.choices[3].value,
-                    fields.correct.value
+                    fields.question,
+                    fields.choices[0],
+                    fields.choices[1],
+                    fields.choices[2],
+                    fields.choices[3],
+                    fields.correct
                 )
                 return true
             } else {
@@ -123,19 +118,17 @@ fun saveCard(
         }
 
         is CT.Notation -> {
-            if (fields.question.value.isNotBlank() &&
-                fields.answer.value.isNotBlank() &&
-                (fields.stringList.isEmpty() ||
-                        fields.stringList.all { it.value.isNotBlank() }
+            if (fields.question.isNotBlank() &&
+                fields.answer.isNotBlank() &&
+                (fields.steps.isEmpty() ||
+                        fields.steps.all { it.isNotBlank() }
                         )
             ) {
                 editCardVM.updateNotationCard(
                     ct.card.id,
-                    fields.question.value,
-                    fields.stringList.map {
-                        it.value
-                    },
-                    fields.answer.value
+                    fields.question,
+                    fields.steps,
+                    fields.answer
                 )
                 return true
             } else {
@@ -148,7 +141,7 @@ fun saveCard(
 
 
 suspend fun updateCardType(
-    fields: Fields,
+    fields: CDetails,
     editCardVM: EditCardViewModel,
     ct: CT,
     newType: String
@@ -156,7 +149,7 @@ suspend fun updateCardType(
     val card = ct.toCard()
     when (newType) {
         Type.BASIC -> {
-            if (fields.question.value.isNotBlank() && fields.answer.value.isNotBlank()) {
+            if (fields.question.isNotBlank() && fields.answer.isNotBlank()) {
                 editCardVM.updateCardType(card.id, newType, fields, ct)
                 return true
             } else {
@@ -165,8 +158,8 @@ suspend fun updateCardType(
         }
 
         Type.THREE -> {
-            if (fields.question.value.isNotBlank() && fields.answer.value.isNotBlank()
-                && fields.middleField.value.isNotBlank()
+            if (fields.question.isNotBlank() && fields.answer.isNotBlank()
+                && fields.middle.isNotBlank()
             ) {
                 editCardVM.updateCardType(card.id, newType, fields, ct)
                 return true
@@ -177,8 +170,8 @@ suspend fun updateCardType(
         }
 
         Type.HINT -> {
-            if (fields.question.value.isNotBlank() && fields.answer.value.isNotBlank()
-                && fields.middleField.value.isNotBlank()
+            if (fields.question.isNotBlank() && fields.answer.isNotBlank()
+                && fields.middle.isNotBlank()
             ) {
                 editCardVM.updateCardType(card.id, newType, fields, ct)
                 return true
@@ -189,17 +182,17 @@ suspend fun updateCardType(
 
         Type.MULTI -> {
             if (
-                fields.question.value.isNotBlank() &&
-                fields.choices[0].value.isNotBlank() &&
-                fields.choices[1].value.isNotBlank() &&
-                !(fields.choices[2].value.isBlank() &&
-                        fields.choices[3].value.isNotBlank()) &&
-                !((fields.choices[2].value.isBlank() &&
-                        fields.correct.value == 'c') ||
-                        (fields.choices[3].value.isBlank() &&
-                                fields.correct.value == 'd')
+                fields.question.isNotBlank() &&
+                fields.choices[0].isNotBlank() &&
+                fields.choices[1].isNotBlank() &&
+                !(fields.choices[2].isBlank() &&
+                        fields.choices[3].isNotBlank()) &&
+                !((fields.choices[2].isBlank() &&
+                        fields.correct == 'c') ||
+                        (fields.choices[3].isBlank() &&
+                                fields.correct == 'd')
                         ) &&
-                fields.correct.value in 'a'..'d'
+                fields.correct in 'a'..'d'
             ) {
                 editCardVM.updateCardType(card.id, newType, fields, ct)
                 return true
@@ -209,10 +202,10 @@ suspend fun updateCardType(
         }
 
         Type.NOTATION -> {
-            if (fields.question.value.isNotBlank() &&
-                fields.answer.value.isNotBlank() &&
-                (fields.stringList.isEmpty() ||
-                        fields.stringList.all { it.value.isNotBlank() }
+            if (fields.question.isNotBlank() &&
+                fields.answer.isNotBlank() &&
+                (fields.steps.isEmpty() ||
+                        fields.steps.all { it.isNotBlank() }
                         )
             ) {
                 editCardVM.updateCardType(card.id, newType, fields, ct)
@@ -250,10 +243,7 @@ fun DeleteCard(
                     onClick = {
                         pressed.value = false
                         fields.mainClicked.value = false
-                        coroutineScope.launch {
-                            navViewModel.deleteCard(card)
-                            onDelete()
-                        }
+                        coroutineScope.launch { navViewModel.deleteCard(card); onDelete() }
                     }, enabled = true, getUIStyle = getUIStyle,
                     string = stringResource(R.string.okay)
                 )
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/cardViewsModels/AddCardViewModel.kt b/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/cardViewsModels/AddCardViewModel.kt
index d11e32d..0d47456 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/cardViewsModels/AddCardViewModel.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/cardViewsModels/AddCardViewModel.kt
@@ -1,33 +1,157 @@
 package com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels
 
 
+import androidx.lifecycle.SavedStateHandle
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import com.belmontCrest.cardCrafter.controller.viewModels.ReusedFunc
 import com.belmontCrest.cardCrafter.localDatabase.dbInterface.repositories.FlashCardRepository
 import com.belmontCrest.cardCrafter.localDatabase.tables.Deck
 import com.belmontCrest.cardCrafter.localDatabase.tables.PartOfQorA
+import com.belmontCrest.cardCrafter.model.ui.states.CDetails
+import com.belmontCrest.cardCrafter.model.ui.states.MyTextRange
+import com.belmontCrest.cardCrafter.views.miscFunctions.details.CDetails.BasicCD
+import com.belmontCrest.cardCrafter.views.miscFunctions.details.CDetails.HintCD
+import com.belmontCrest.cardCrafter.views.miscFunctions.details.CDetails.ThreeCD
+import com.belmontCrest.cardCrafter.views.miscFunctions.details.CDetails.MultiCD
+import com.belmontCrest.cardCrafter.views.miscFunctions.details.CDetails.NotationCD
+import com.belmontCrest.cardCrafter.model.ui.states.SelectedKeyboard
+import com.belmontCrest.cardCrafter.model.ui.states.addStep
+import com.belmontCrest.cardCrafter.model.ui.states.removeStep
+import com.belmontCrest.cardCrafter.model.ui.states.updateAnswer
+import com.belmontCrest.cardCrafter.model.ui.states.updateChoices
+import com.belmontCrest.cardCrafter.model.ui.states.updateCorrect
+import com.belmontCrest.cardCrafter.model.ui.states.updateMiddle
+import com.belmontCrest.cardCrafter.model.ui.states.updateQOrA
+import com.belmontCrest.cardCrafter.model.ui.states.updateQuestion
+import com.belmontCrest.cardCrafter.model.ui.states.updateStep
+import com.belmontCrest.cardCrafter.navigation.KeyboardSelectionRepository
 import com.belmontCrest.cardCrafter.supabase.model.daoAndRepository.repositories.authRepo.IsOwnerOrCoOwnerRepo
-import com.belmontCrest.cardCrafter.views.miscFunctions.details.CDetails
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.asStateFlow
 import kotlinx.coroutines.flow.update
 import kotlinx.coroutines.launch
+import kotlinx.serialization.json.Json
 
 class AddCardViewModel(
     private val flashCardRepository: FlashCardRepository,
     private val isOwnerOrCoOwnerRepo: IsOwnerOrCoOwnerRepo,
+    private val kbRepository: KeyboardSelectionRepository,
+    private val savedStateHandle: SavedStateHandle,
     private val deckUUID: String
 ) : ViewModel() {
+
+    companion object {
+        private const val SELECTED_KB = "selected_keyboard"
+        private const val SHOW_KB = "show_kb"
+        private const val CD = "a_card_details"
+        private const val SELECTION = "a_selection"
+        private const val COMPOSITION = "a_composition"
+    }
+
+    private val _fields = MutableStateFlow(
+        savedStateHandle.get<String>(CD)?.let {
+            Json.decodeFromString(CDetails.serializer(), it)
+        } ?: CDetails())
+    val fields = _fields.asStateFlow()
+
+    private val _selection = MutableStateFlow(
+        savedStateHandle.get<String>(SELECTION)?.let {
+            Json.decodeFromString(MyTextRange.serializer(), it)
+        } ?: MyTextRange()
+    )
+    val selection = _selection.asStateFlow()
+
+    private val _composition = MutableStateFlow(
+        savedStateHandle.get<String>(SELECTION)?.let {
+            Json.decodeFromString(MyTextRange.serializer(), it)
+        }
+    )
+    val composition = _composition.asStateFlow()
+
+    fun updateTRs(tr: MyTextRange, com: MyTextRange?) {
+        _selection.update {
+            savedStateHandle[SELECTION] = Json.encodeToString(MyTextRange.serializer(), tr)
+            tr
+        }
+        _composition.update {
+            if (com != null)
+                savedStateHandle[COMPOSITION] = Json.encodeToString(MyTextRange.serializer(), com)
+            else
+                savedStateHandle[COMPOSITION] = null
+            com
+        }
+    }
+
+    fun updateQ(q: String) = _fields.update {
+        val new = it.updateQuestion(q)
+        savedStateHandle[CD] = Json.encodeToString(CDetails.serializer(), new)
+        new
+    }
+
+    fun updateA(a: String) = _fields.update {
+        val new = it.updateAnswer(a)
+        savedStateHandle[CD] = Json.encodeToString(CDetails.serializer(), new)
+        new
+    }
+
+    fun updateM(m: String) = _fields.update {
+        val new = it.updateMiddle(m)
+        savedStateHandle[CD] = Json.encodeToString(CDetails.serializer(), new)
+        new
+    }
+
+    fun updateCh(c: String, idx: Int) = _fields.update {
+        val new = it.updateChoices(c, idx)
+        savedStateHandle[CD] = Json.encodeToString(CDetails.serializer(), new)
+        new
+    }
+
+    fun updateCor(c: Char) = _fields.update {
+        val new = it.updateCorrect(c)
+        savedStateHandle[CD] = Json.encodeToString(CDetails.serializer(), new)
+        new
+    }
+
+    fun addStep() = _fields.update {
+        val new = it.addStep()
+        savedStateHandle[CD] = Json.encodeToString(CDetails.serializer(), new)
+        new
+    }
+
+    fun removeStep() = _fields.update {
+        val new = it.removeStep()
+        savedStateHandle[CD] = Json.encodeToString(CDetails.serializer(), new)
+        new
+    }
+
+    fun updateStep(s: String, idx: Int) = _fields.update {
+        val new = it.updateStep(s, idx)
+        savedStateHandle[CD] = Json.encodeToString(CDetails.serializer(), new)
+        new
+    }
+
+    fun updateQA(qa: PartOfQorA) = _fields.update {
+        val new = it.updateQOrA(qa)
+        savedStateHandle[CD] = Json.encodeToString(CDetails.serializer(), new)
+        new
+    }
+
+    private fun resetFields() = _fields.update {
+        val new = CDetails()
+        savedStateHandle[CD] = Json.encodeToString(CDetails.serializer(), new)
+        new
+    }
+
     private val _errorMessage: MutableStateFlow<String> = MutableStateFlow("")
     val errorMessage = _errorMessage.asStateFlow()
     private val isOwner = MutableStateFlow(false)
     private val rf = ReusedFunc(flashCardRepository)
 
-    /*companion object {
-        private const val TIMEOUT_MILLIS = 4_000L
-    }*/
+    val showKatexKeyboard = kbRepository.showKatexKeyboard
+    val selectedKB = kbRepository.selectedKB
+    val resetOffset = kbRepository.resetOffset
 
     init {
         viewModelScope.launch {
@@ -35,13 +159,40 @@ class AddCardViewModel(
         }
     }
 
+    fun resetDone() = kbRepository.resetDone()
+
+    fun updateSelectedKB(selectedKeyboard: SelectedKeyboard) {
+        savedStateHandle[SELECTED_KB] =
+            Json.encodeToString(SelectedKeyboard.serializer(), selectedKeyboard)
+        kbRepository.updateSelectedKB(selectedKeyboard)
+    }
+
+    fun onCreate() {
+        val kb = savedStateHandle.get<String>(SELECTED_KB)?.let {
+            Json.decodeFromString(SelectedKeyboard.serializer(), it)
+        }
+        val showKB = savedStateHandle.get<Boolean>(SHOW_KB) == true
+        kbRepository.onCreate(showKB, kb)
+    }
+
+
+    fun toggleKeyboard() {
+        savedStateHandle[SHOW_KB] = !showKatexKeyboard.value
+        kbRepository.toggleKeyboard()
+    }
+
+    fun resetSelectedKB() {
+        savedStateHandle[SELECTED_KB] = null
+        kbRepository.resetSelectedKB()
+    }
+
     fun addBasicCard(deck: Deck, question: String, answer: String) {
         if (question.isNotBlank() && answer.isNotBlank()) {
             println("Is Owner: ${isOwner.value}")
             viewModelScope.launch(Dispatchers.IO) {
                 flashCardRepository.insertBasicCard(
-                    deck, CDetails.BasicCD(question, answer), isOwner.value
-                ).also { updateCardsLeft(deck) }
+                    deck, BasicCD(question, answer), isOwner.value
+                ).also { updateCardsLeft(deck); resetFields() }
             }
         }
     }
@@ -55,8 +206,8 @@ class AddCardViewModel(
         ) {
             viewModelScope.launch(Dispatchers.IO) {
                 flashCardRepository.insertHintCard(
-                    deck, CDetails.HintCD(question, hint, answer), isOwner.value
-                ).also { updateCardsLeft(deck) }
+                    deck, HintCD(question, hint, answer), isOwner.value
+                ).also { updateCardsLeft(deck); resetFields() }
             }
         }
     }
@@ -70,10 +221,8 @@ class AddCardViewModel(
         ) {
             viewModelScope.launch(Dispatchers.IO) {
                 flashCardRepository.insertThreeCard(
-                    deck, CDetails.ThreeCD(question, middle, answer, isQOrA), isOwner.value
-                ).also {
-                    updateCardsLeft(deck)
-                }
+                    deck, ThreeCD(question, middle, answer, isQOrA), isOwner.value
+                ).also { updateCardsLeft(deck); resetFields() }
             }
         }
     }
@@ -92,9 +241,9 @@ class AddCardViewModel(
         ) {
             viewModelScope.launch(Dispatchers.IO) {
                 flashCardRepository.insertMultiCard(
-                    deck, CDetails.MultiCD(question, choiceA, choiceB, choiceC, choiceD, correct),
+                    deck, MultiCD(question, choiceA, choiceB, choiceC, choiceD, correct),
                     isOwner.value
-                ).also { updateCardsLeft(deck) }
+                ).also { updateCardsLeft(deck); resetFields() }
             }
         }
     }
@@ -110,8 +259,8 @@ class AddCardViewModel(
         ) {
             viewModelScope.launch(Dispatchers.IO) {
                 flashCardRepository.insertNotationCard(
-                    deck, CDetails.NotationCD(question, steps, answer), isOwner.value
-                ).also { updateCardsLeft(deck) }
+                    deck, NotationCD(question, steps, answer), isOwner.value
+                ).also { updateCardsLeft(deck); resetFields() }
             }
         }
     }
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/cardViewsModels/CardDeckViewModel.kt b/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/cardViewsModels/CardDeckViewModel.kt
index a4735ca..5103c95 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/cardViewsModels/CardDeckViewModel.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/cardViewsModels/CardDeckViewModel.kt
@@ -12,10 +12,10 @@ import com.belmontCrest.cardCrafter.localDatabase.dbInterface.repositories.CardT
 import com.belmontCrest.cardCrafter.localDatabase.dbInterface.repositories.FlashCardRepository
 import com.belmontCrest.cardCrafter.localDatabase.tables.Card
 import com.belmontCrest.cardCrafter.localDatabase.tables.Deck
-import com.belmontCrest.cardCrafter.model.ui.CardState
+import com.belmontCrest.cardCrafter.model.ui.states.CardState
 import com.belmontCrest.cardCrafter.model.ui.CardUpdateError
-import com.belmontCrest.cardCrafter.model.ui.SavedCardUiState
-import com.belmontCrest.cardCrafter.model.ui.SealedDueCTs
+import com.belmontCrest.cardCrafter.model.ui.states.SavedCardUiState
+import com.belmontCrest.cardCrafter.model.ui.states.SealedDueCTs
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.TimeoutCancellationException
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/cardViewsModels/EditCardViewModel.kt b/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/cardViewsModels/EditCardViewModel.kt
index d8e833f..82222f3 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/cardViewsModels/EditCardViewModel.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/cardViewsModels/EditCardViewModel.kt
@@ -1,27 +1,210 @@
 package com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels
 
+import androidx.lifecycle.SavedStateHandle
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
+import com.belmontCrest.cardCrafter.controller.cardHandlers.getCardType
+import com.belmontCrest.cardCrafter.controller.cardHandlers.toCDetails
 import com.belmontCrest.cardCrafter.localDatabase.dbInterface.repositories.CardTypeRepository
 import com.belmontCrest.cardCrafter.localDatabase.dbInterface.repositories.ScienceSpecificRepository
 import com.belmontCrest.cardCrafter.localDatabase.tables.CT
 import com.belmontCrest.cardCrafter.localDatabase.tables.ListStringConverter
 import com.belmontCrest.cardCrafter.localDatabase.tables.PartOfQorA
-import com.belmontCrest.cardCrafter.model.ui.Fields
+import com.belmontCrest.cardCrafter.model.Type
+import com.belmontCrest.cardCrafter.model.ui.states.CDetails
+import com.belmontCrest.cardCrafter.model.ui.states.MyTextRange
+import com.belmontCrest.cardCrafter.model.ui.states.SelectedKeyboard
+import com.belmontCrest.cardCrafter.model.ui.states.addStep
+import com.belmontCrest.cardCrafter.model.ui.states.removeStep
+import com.belmontCrest.cardCrafter.model.ui.states.updateAnswer
+import com.belmontCrest.cardCrafter.model.ui.states.updateChoices
+import com.belmontCrest.cardCrafter.model.ui.states.updateCorrect
+import com.belmontCrest.cardCrafter.model.ui.states.updateMiddle
+import com.belmontCrest.cardCrafter.model.ui.states.updateQOrA
+import com.belmontCrest.cardCrafter.model.ui.states.updateQuestion
+import com.belmontCrest.cardCrafter.model.ui.states.updateStep
+import com.belmontCrest.cardCrafter.navigation.KeyboardSelectionRepository
+import com.belmontCrest.cardCrafter.uiFunctions.katex.menu.KaTeXMenu
+import com.belmontCrest.cardCrafter.uiFunctions.katex.menu.ListOfKatexMenu
+import com.belmontCrest.cardCrafter.uiFunctions.katex.menu.SelectedAnnotation
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.map
+import kotlinx.coroutines.flow.stateIn
 import kotlinx.coroutines.flow.update
 import kotlinx.coroutines.launch
+import kotlinx.coroutines.withContext
+import kotlinx.serialization.json.Json
 
 class EditCardViewModel(
     private val cardTypeRepository: CardTypeRepository,
-    private val sSRepository: ScienceSpecificRepository
+    private val sSRepository: ScienceSpecificRepository,
+    private val kbRepository: KeyboardSelectionRepository,
+    private val savedStateHandle: SavedStateHandle,
+    private val cardId: Int
 ) : ViewModel() {
+    companion object {
+        private const val SELECTED_KB = "selected_keyboard"
+        private const val SHOW_KB = "show_kb"
+        private const val CD = "e_card_details"
+        private const val SELECTION = "e_selection"
+        private const val COMPOSITION = "e_composition"
+        private const val SELECTED_SL = "e_selected"
+        private val listStringConverter = ListStringConverter()
+    }
+
+    private val _selectedSLSymbols = MutableStateFlow(
+        savedStateHandle.get<String>(SELECTED_SL)?.let {
+            Json.decodeFromString(ListOfKatexMenu.serializer(), it)
+        } ?: ListOfKatexMenu()
+    )
+
+    val selectedSLSymbols = _selectedSLSymbols.map { it.km }.stateIn(
+        scope = viewModelScope,
+        started = SharingStarted.WhileSubscribed(4_000L),
+        initialValue = listOf()
+    )
+    private val _errorMessage = MutableStateFlow("")
+    val errorMessage = _errorMessage.asStateFlow()
+    val showKatexKeyboard = kbRepository.showKatexKeyboard
+    val selectedKB = kbRepository.selectedKB
+    val resetOffset = kbRepository.resetOffset
+
+    private val _fields = MutableStateFlow(
+        savedStateHandle.get<String>(CD)?.let {
+            Json.decodeFromString(CDetails.serializer(), it)
+        } ?: CDetails())
+    val fields = _fields.asStateFlow()
+
+    private val _selection = MutableStateFlow(
+        savedStateHandle.get<String>(SELECTION)?.let {
+            Json.decodeFromString(MyTextRange.serializer(), it)
+        } ?: MyTextRange()
+    )
+    val selection = _selection.asStateFlow()
+
+    private val _composition = MutableStateFlow(
+        savedStateHandle.get<String>(SELECTION)?.let {
+            Json.decodeFromString(MyTextRange.serializer(), it)
+        }
+    )
+    val composition = _composition.asStateFlow()
+
+    fun updateSelectedSymbol(kw: KaTeXMenu, index: Int) = _selectedSLSymbols.update {
+        val new = it.km.toMutableList()
+        new[index] = kw
+        ListOfKatexMenu(new)
+    }
+
+    fun updateTRs(tr: MyTextRange, com: MyTextRange?) {
+        _selection.update {
+            savedStateHandle[SELECTION] = Json.encodeToString(MyTextRange.serializer(), tr)
+            tr
+        }
+        _composition.update {
+            if (com != null)
+                savedStateHandle[COMPOSITION] = Json.encodeToString(MyTextRange.serializer(), com)
+            else
+                savedStateHandle[COMPOSITION] = null
+            com
+        }
+    }
 
-    private val listStringConverter = ListStringConverter()
-    private val privateErrMessage = MutableStateFlow("")
-    val errorMessage = privateErrMessage.asStateFlow()
+    fun updateQ(q: String) = _fields.update {
+        val new = it.updateQuestion(q)
+        savedStateHandle[CD] = Json.encodeToString(CDetails.serializer(), new)
+        new
+    }
+
+    fun updateA(a: String) = _fields.update {
+        val new = it.updateAnswer(a)
+        savedStateHandle[CD] = Json.encodeToString(CDetails.serializer(), new)
+        new
+    }
+
+    fun updateM(m: String) = _fields.update {
+        val new = it.updateMiddle(m)
+        savedStateHandle[CD] = Json.encodeToString(CDetails.serializer(), new)
+        new
+    }
+
+    fun updateCh(c: String, idx: Int) = _fields.update {
+        val new = it.updateChoices(c, idx)
+        savedStateHandle[CD] = Json.encodeToString(CDetails.serializer(), new)
+        new
+    }
+
+    fun updateCor(c: Char) = _fields.update {
+        val new = it.updateCorrect(c)
+        savedStateHandle[CD] = Json.encodeToString(CDetails.serializer(), new)
+        new
+    }
+
+    fun addStep() {
+        _selectedSLSymbols.update {
+            val new = it.km.toMutableList()
+            new.add(KaTeXMenu(null, SelectedAnnotation.Idle))
+            ListOfKatexMenu(new.toList())
+        }
+        _fields.update {
+            val new = it.addStep()
+            savedStateHandle[CD] = Json.encodeToString(CDetails.serializer(), new)
+            new
+        }
+    }
+
+    fun removeStep() {
+        _fields.update {
+            val new = it.removeStep()
+            savedStateHandle[CD] = Json.encodeToString(CDetails.serializer(), new)
+            new
+        }
+        _selectedSLSymbols.update {
+            val new = it.km.toMutableList()
+            new.removeAt(new.lastIndex)
+            ListOfKatexMenu(new.toList())
+        }
+    }
+
+    fun updateStep(s: String, idx: Int) = _fields.update {
+        val new = it.updateStep(s, idx)
+        savedStateHandle[CD] = Json.encodeToString(CDetails.serializer(), new)
+        new
+    }
+
+    fun updateQA(qa: PartOfQorA) = _fields.update {
+        val new = it.updateQOrA(qa)
+        savedStateHandle[CD] = Json.encodeToString(CDetails.serializer(), new)
+        new
+    }
+
+    fun resetDone() = kbRepository.resetDone()
+
+    fun updateSelectedKB(selectedKeyboard: SelectedKeyboard) {
+        savedStateHandle[SELECTED_KB] =
+            Json.encodeToString(SelectedKeyboard.serializer(), selectedKeyboard)
+        kbRepository.updateSelectedKB(selectedKeyboard)
+    }
+
+    fun toggleKeyboard() {
+        savedStateHandle[SHOW_KB] = !showKatexKeyboard.value
+        kbRepository.toggleKeyboard()
+    }
+
+    fun onCreate() {
+        val kb = savedStateHandle.get<String>(SELECTED_KB)?.let {
+            Json.decodeFromString(SelectedKeyboard.serializer(), it)
+        }
+        val showKB = savedStateHandle.get<Boolean>(SHOW_KB) == true
+        kbRepository.onCreate(showKB, kb)
+    }
+
+    fun resetSelectedKB() {
+        savedStateHandle[SELECTED_KB] = null
+        kbRepository.resetSelectedKB()
+    }
 
     fun updateBasicCard(cardId: Int, question: String, answer: String) {
         viewModelScope.launch {
@@ -37,7 +220,7 @@ class EditCardViewModel(
 
     fun updateThreeCard(
         cardId: Int, question: String, middle: String,
-        answer: String, isQOrA : PartOfQorA
+        answer: String, isQOrA: PartOfQorA
     ) {
         viewModelScope.launch {
             cardTypeRepository.updateThreeCard(cardId, question, middle, answer, isQOrA)
@@ -76,7 +259,7 @@ class EditCardViewModel(
     }
 
     suspend fun updateCardType(
-        cardId: Int, type: String, fields: Fields,
+        cardId: Int, type: String, fields: CDetails,
         deleteCT: CT
     ) {
         viewModelScope.launch {
@@ -85,11 +268,30 @@ class EditCardViewModel(
     }
 
     fun setErrorMessage(message: String) {
-        privateErrMessage.update { message }
+        _errorMessage.update { message }
     }
 
     fun clearErrorMessage() {
-        privateErrMessage.update { "" }
+        _errorMessage.update { "" }
+    }
+
+    suspend fun initialCT(): CDetails {
+        return withContext(Dispatchers.IO) {
+            val ct = cardTypeRepository.getACardType(cardId)
+            if (ct.getCardType() == Type.NOTATION) _selectedSLSymbols.update {
+                ListOfKatexMenu(
+                    ct.toCDetails().steps.map { KaTeXMenu(null, SelectedAnnotation.Idle) }
+                )
+            }
+            ct.toCDetails()
+        }
+    }
+
+    init {
+        viewModelScope.launch(Dispatchers.IO) {
+            val cardDetails = initialCT()
+            _fields.update { cardDetails }
+        }
     }
 }
 
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/cardViewsModels/EditingCardListViewModel.kt b/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/cardViewsModels/EditingCardListViewModel.kt
index bc2bf43..e6bdd68 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/cardViewsModels/EditingCardListViewModel.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/cardViewsModels/EditingCardListViewModel.kt
@@ -7,7 +7,7 @@ import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import com.belmontCrest.cardCrafter.localDatabase.dbInterface.repositories.CardTypeRepository
 import com.belmontCrest.cardCrafter.localDatabase.tables.CT
-import com.belmontCrest.cardCrafter.model.ui.SealedAllCTs
+import com.belmontCrest.cardCrafter.model.ui.states.SealedAllCTs
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.SharingStarted
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/deckViewsModels/MainViewModel.kt b/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/deckViewsModels/MainViewModel.kt
index 367eb2f..8acaa05 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/deckViewsModels/MainViewModel.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/controller/viewModels/deckViewsModels/MainViewModel.kt
@@ -7,15 +7,15 @@ import androidx.lifecycle.SavedStateHandle
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import com.belmontCrest.cardCrafter.localDatabase.dbInterface.repositories.FlashCardRepository
-import com.belmontCrest.cardCrafter.model.ui.DeckUiState
+import com.belmontCrest.cardCrafter.model.ui.states.DeckUiState
 import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.stateIn
 import kotlinx.coroutines.launch
-import com.belmontCrest.cardCrafter.model.ui.CardListUiCount
+import com.belmontCrest.cardCrafter.model.ui.states.CardListUiCount
 import com.belmontCrest.cardCrafter.model.ui.CardUpdateError
-import com.belmontCrest.cardCrafter.model.ui.SavedCardUiState
+import com.belmontCrest.cardCrafter.model.ui.states.SavedCardUiState
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.delay
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/daoInterfaces/deckAndCardDao/CardTypesDao.kt b/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/daoInterfaces/deckAndCardDao/CardTypesDao.kt
index 32647cc..352ebc6 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/daoInterfaces/deckAndCardDao/CardTypesDao.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/daoInterfaces/deckAndCardDao/CardTypesDao.kt
@@ -25,7 +25,7 @@ import com.belmontCrest.cardCrafter.model.Type.HINT
 import com.belmontCrest.cardCrafter.model.Type.MULTI
 import com.belmontCrest.cardCrafter.model.Type.NOTATION
 import com.belmontCrest.cardCrafter.model.Type.THREE
-import com.belmontCrest.cardCrafter.model.ui.Fields
+import com.belmontCrest.cardCrafter.model.ui.states.CDetails
 import kotlinx.coroutines.flow.Flow
 import java.util.Date
 
@@ -93,7 +93,7 @@ interface CardTypesDao : InsertOrAbortDao {
 
     @Transaction
     suspend fun updateCT(
-        cardId: Int, type: String, fields: Fields,
+        cardId: Int, type: String, fields: CDetails,
         deleteCT: CT
     ) {
         when (type) {
@@ -101,8 +101,8 @@ interface CardTypesDao : InsertOrAbortDao {
                 insertBasicCard(
                     BasicCard(
                         cardId = cardId,
-                        question = fields.question.value,
-                        answer = fields.answer.value
+                        question = fields.question,
+                        answer = fields.answer
                     )
                 )
             }
@@ -111,10 +111,10 @@ interface CardTypesDao : InsertOrAbortDao {
                 insertThreeCard(
                     ThreeFieldCard(
                         cardId = cardId,
-                        question = fields.question.value,
-                        middle = fields.middleField.value,
-                        answer = fields.answer.value,
-                        field = fields.isQOrA.value
+                        question = fields.question,
+                        middle = fields.middle,
+                        answer = fields.answer,
+                        field = fields.isQOrA
                     )
                 )
 
@@ -124,9 +124,9 @@ interface CardTypesDao : InsertOrAbortDao {
                 insertHintCard(
                     HintCard(
                         cardId = cardId,
-                        question = fields.question.value,
-                        hint = fields.middleField.value,
-                        answer = fields.answer.value
+                        question = fields.question,
+                        hint = fields.middle,
+                        answer = fields.answer
                     )
                 )
             }
@@ -135,12 +135,12 @@ interface CardTypesDao : InsertOrAbortDao {
                 insertMultiChoiceCard(
                     MultiChoiceCard(
                         cardId = cardId,
-                        question = fields.question.value,
-                        choiceA = fields.choices[0].value,
-                        choiceB = fields.choices[1].value,
-                        choiceC = fields.choices[2].value,
-                        choiceD = fields.choices[3].value,
-                        correct = fields.correct.value
+                        question = fields.question,
+                        choiceA = fields.choices[0],
+                        choiceB = fields.choices[1],
+                        choiceC = fields.choices[2],
+                        choiceD = fields.choices[3],
+                        correct = fields.correct
                     )
                 )
             }
@@ -149,9 +149,9 @@ interface CardTypesDao : InsertOrAbortDao {
                 insertNotationCard(
                     NotationCard(
                         cardId = cardId,
-                        question = fields.question.value,
-                        steps = fields.stringList.map { it.value },
-                        answer = fields.answer.value
+                        question = fields.question,
+                        steps = fields.steps,
+                        answer = fields.answer
                     )
                 )
             }
@@ -205,7 +205,7 @@ interface CardTypesDao : InsertOrAbortDao {
     /** Copy the selected cards into a new deck */
     @Transaction
     suspend fun copyCardList(cts: List<CT>, deck: Deck) {
-        cts.map { ct ->
+        cts.forEach { ct ->
             val newDeckCardNumber = returnCardDeckNum(deck.id)
             when (ct) {
                 is CT.Basic -> {
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/daoInterfaces/deckAndCardDao/DeckDao.kt b/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/daoInterfaces/deckAndCardDao/DeckDao.kt
index 57d0f16..d3f3052 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/daoInterfaces/deckAndCardDao/DeckDao.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/daoInterfaces/deckAndCardDao/DeckDao.kt
@@ -7,7 +7,7 @@ import androidx.room.OnConflictStrategy
 import androidx.room.Query
 import androidx.room.Update
 import com.belmontCrest.cardCrafter.localDatabase.tables.Deck
-import com.belmontCrest.cardCrafter.model.ui.DueDeckDetails
+import com.belmontCrest.cardCrafter.model.ui.states.DueDeckDetails
 import kotlinx.coroutines.flow.Flow
 import java.util.Calendar
 import java.util.Date
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/repositories/CardTypeRepository.kt b/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/repositories/CardTypeRepository.kt
index 38a96bd..d58564c 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/repositories/CardTypeRepository.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/repositories/CardTypeRepository.kt
@@ -7,7 +7,7 @@ import com.belmontCrest.cardCrafter.localDatabase.tables.HintCard
 import com.belmontCrest.cardCrafter.localDatabase.tables.MultiChoiceCard
 import com.belmontCrest.cardCrafter.localDatabase.tables.PartOfQorA
 import com.belmontCrest.cardCrafter.localDatabase.tables.ThreeFieldCard
-import com.belmontCrest.cardCrafter.model.ui.Fields
+import com.belmontCrest.cardCrafter.model.ui.states.CDetails
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.StateFlow
 import java.util.Date
@@ -57,7 +57,7 @@ interface CardTypeRepository {
 
     suspend fun moveCardList(deck: Deck)
 
-    suspend fun updateCT(cardId: Int, type: String, fields: Fields, deleteCT: CT)
+    suspend fun updateCT(cardId: Int, type: String, fields: CDetails, deleteCT: CT)
 
     suspend fun deleteCTs()
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/repositories/FlashCardRepository.kt b/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/repositories/FlashCardRepository.kt
index d6800f2..dbd11d2 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/repositories/FlashCardRepository.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/repositories/FlashCardRepository.kt
@@ -3,7 +3,7 @@ package com.belmontCrest.cardCrafter.localDatabase.dbInterface.repositories
 import com.belmontCrest.cardCrafter.localDatabase.tables.Card
 import com.belmontCrest.cardCrafter.localDatabase.tables.Deck
 import com.belmontCrest.cardCrafter.localDatabase.tables.SavedCard
-import com.belmontCrest.cardCrafter.model.ui.DueDeckDetails
+import com.belmontCrest.cardCrafter.model.ui.states.DueDeckDetails
 import com.belmontCrest.cardCrafter.views.miscFunctions.details.CDetails
 import kotlinx.coroutines.flow.Flow
 import java.util.Date
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/repositories/OfflineCardTypeRepository.kt b/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/repositories/OfflineCardTypeRepository.kt
index b7eb4a7..93b0d6f 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/repositories/OfflineCardTypeRepository.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/dbInterface/repositories/OfflineCardTypeRepository.kt
@@ -15,7 +15,7 @@ import com.belmontCrest.cardCrafter.localDatabase.tables.HintCard
 import com.belmontCrest.cardCrafter.localDatabase.tables.MultiChoiceCard
 import com.belmontCrest.cardCrafter.localDatabase.tables.PartOfQorA
 import com.belmontCrest.cardCrafter.localDatabase.tables.ThreeFieldCard
-import com.belmontCrest.cardCrafter.model.ui.Fields
+import com.belmontCrest.cardCrafter.model.ui.states.CDetails
 import com.belmontCrest.cardCrafter.views.miscFunctions.details.toQuestion
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.asStateFlow
@@ -161,7 +161,7 @@ class OfflineCardTypeRepository(
         cardTypesDao.moveCardList(_selectedCards.value, deck)
 
     override suspend fun updateCT(
-        cardId: Int, type: String, fields: Fields, deleteCT: CT
+        cardId: Int, type: String, fields: CDetails, deleteCT: CT
     ) = cardTypesDao.updateCT(cardId, type, fields, deleteCT)
 
     override suspend fun deleteCTs() = cardTypesDao.deleteCardList(_selectedCards.value)
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/tables/CardTypesRelations.kt b/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/tables/CardTypesRelations.kt
index edb5f33..1a9dd7d 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/tables/CardTypesRelations.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/tables/CardTypesRelations.kt
@@ -1,9 +1,7 @@
 package com.belmontCrest.cardCrafter.localDatabase.tables
 
-import android.os.Build
 import android.os.Parcel
 import android.os.Parcelable
-import androidx.annotation.RequiresApi
 import androidx.room.Embedded
 import androidx.room.Relation
 import kotlinx.parcelize.Parceler
@@ -42,14 +40,13 @@ data class AllCardTypes(
     )
     val notationCard: NotationCard?
 ) : Parcelable {
-    @RequiresApi(Build.VERSION_CODES.TIRAMISU)
     constructor(parcel: Parcel) : this(
-        parcel.readParcelable(Card::class.java.classLoader, Card::class.java)!!,
-        parcel.readParcelable(BasicCard::class.java.classLoader, BasicCard::class.java),
-        parcel.readParcelable(HintCard::class.java.classLoader, HintCard::class.java),
-        parcel.readParcelable(ThreeFieldCard::class.java.classLoader, ThreeFieldCard::class.java),
-        parcel.readParcelable(MultiChoiceCard::class.java.classLoader, MultiChoiceCard::class.java),
-        parcel.readParcelable(NotationCard::class.java.classLoader, NotationCard::class.java)
+        toParcelableCard(parcel)!!,
+        toParcelableBasicCard(parcel),
+        toParcelableHintCard(parcel),
+        toParcelableThreeCard(parcel),
+        toParcelableMultiCard(parcel),
+        toParcelableNotationCard(parcel)
     )
 
     companion object : Parceler<AllCardTypes> {
@@ -63,7 +60,6 @@ data class AllCardTypes(
             parcel.writeParcelable(notationCard, flags)
         }
 
-        @RequiresApi(Build.VERSION_CODES.TIRAMISU)
         override fun create(parcel: Parcel): AllCardTypes {
             return AllCardTypes(parcel)
         }
@@ -84,26 +80,22 @@ sealed class CT : Parcelable {
         )
         val basicCard: BasicCard
     ) : CT() {
-        @RequiresApi(Build.VERSION_CODES.TIRAMISU)
         constructor(parcel: Parcel) : this(
-            parcel.readParcelable(Card::class.java.classLoader, Card::class.java)!!,
-            parcel.readParcelable(
-                BasicCard::class.java.classLoader,
-                BasicCard::class.java
-            )!!,
+            toParcelableCard(parcel)!!, toParcelableBasicCard(parcel)!!,
         )
+
         companion object : Parceler<Basic> {
             override fun Basic.write(parcel: Parcel, flags: Int) {
                 parcel.writeParcelable(card, flags)
                 parcel.writeParcelable(basicCard, flags)
             }
 
-            @RequiresApi(Build.VERSION_CODES.TIRAMISU)
             override fun create(parcel: Parcel): Basic {
                 return Basic(parcel)
             }
         }
     }
+
     @Serializable
     @Parcelize
     data class Hint(
@@ -114,13 +106,8 @@ sealed class CT : Parcelable {
         )
         val hintCard: HintCard
     ) : CT() {
-        @RequiresApi(Build.VERSION_CODES.TIRAMISU)
         constructor(parcel: Parcel) : this(
-            parcel.readParcelable(Card::class.java.classLoader, Card::class.java)!!,
-            parcel.readParcelable(
-                HintCard::class.java.classLoader,
-                HintCard::class.java
-            )!!,
+            toParcelableCard(parcel)!!, toParcelableHintCard(parcel)!!
         )
 
         companion object : Parceler<Hint> {
@@ -130,12 +117,12 @@ sealed class CT : Parcelable {
 
             }
 
-            @RequiresApi(Build.VERSION_CODES.TIRAMISU)
             override fun create(parcel: Parcel): Hint {
                 return Hint(parcel)
             }
         }
     }
+
     @Serializable
     @Parcelize
     data class ThreeField(
@@ -146,13 +133,8 @@ sealed class CT : Parcelable {
         )
         val threeFieldCard: ThreeFieldCard
     ) : CT() {
-        @RequiresApi(Build.VERSION_CODES.TIRAMISU)
         constructor(parcel: Parcel) : this(
-            parcel.readParcelable(Card::class.java.classLoader, Card::class.java)!!,
-            parcel.readParcelable(
-                ThreeFieldCard::class.java.classLoader,
-                ThreeFieldCard::class.java
-            )!!,
+            toParcelableCard(parcel)!!, toParcelableThreeCard(parcel)!!
         )
 
         companion object : Parceler<ThreeField> {
@@ -161,12 +143,12 @@ sealed class CT : Parcelable {
                 parcel.writeParcelable(threeFieldCard, flags)
             }
 
-            @RequiresApi(Build.VERSION_CODES.TIRAMISU)
             override fun create(parcel: Parcel): ThreeField {
                 return ThreeField(parcel)
             }
         }
     }
+
     @Serializable
     @Parcelize
     data class MultiChoice(
@@ -177,13 +159,8 @@ sealed class CT : Parcelable {
         )
         val multiChoiceCard: MultiChoiceCard
     ) : CT() {
-        @RequiresApi(Build.VERSION_CODES.TIRAMISU)
         constructor(parcel: Parcel) : this(
-            parcel.readParcelable(Card::class.java.classLoader, Card::class.java)!!,
-            parcel.readParcelable(
-                MultiChoiceCard::class.java.classLoader,
-                MultiChoiceCard::class.java
-            )!!,
+            toParcelableCard(parcel)!!, toParcelableMultiCard(parcel)!!
         )
 
         companion object : Parceler<MultiChoice> {
@@ -192,12 +169,12 @@ sealed class CT : Parcelable {
                 parcel.writeParcelable(multiChoiceCard, flags)
             }
 
-            @RequiresApi(Build.VERSION_CODES.TIRAMISU)
             override fun create(parcel: Parcel): MultiChoice {
                 return MultiChoice(parcel)
             }
         }
     }
+
     @Serializable
     @Parcelize
     data class Notation(
@@ -208,19 +185,15 @@ sealed class CT : Parcelable {
         )
         val notationCard: NotationCard
     ) : CT() {
-        @RequiresApi(Build.VERSION_CODES.TIRAMISU)
         constructor(parcel: Parcel) : this(
-            parcel.readParcelable(Card::class.java.classLoader, Card::class.java)!!,
-            parcel.readParcelable(
-                NotationCard::class.java.classLoader,
-                NotationCard::class.java
-            )!!,
+            toParcelableCard(parcel)!!, toParcelableNotationCard(parcel)!!
         )
-        companion object : Parceler<Notation>  {
-            @RequiresApi(Build.VERSION_CODES.TIRAMISU)
+
+        companion object : Parceler<Notation> {
             override fun create(parcel: Parcel): Notation {
                 return Notation(parcel)
             }
+
             override fun Notation.write(parcel: Parcel, flags: Int) {
                 parcel.writeParcelable(card, flags)
                 parcel.writeParcelable(notationCard, flags)
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/tables/DeckAndCardTables.kt b/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/tables/DeckAndCardTables.kt
index 821d43e..927bf6a 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/tables/DeckAndCardTables.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/tables/DeckAndCardTables.kt
@@ -2,10 +2,8 @@
 
 package com.belmontCrest.cardCrafter.localDatabase.tables
 
-import android.os.Build
 import android.os.Parcel
 import android.os.Parcelable
-import androidx.annotation.RequiresApi
 import androidx.room.Entity
 import androidx.room.ForeignKey
 import androidx.room.Index
@@ -144,7 +142,6 @@ data class Card(
 
     companion object : Parceler<Card> {
 
-        @RequiresApi(Build.VERSION_CODES.Q)
         override fun Card.write(parcel: Parcel, flags: Int) {
             parcel.writeInt(id)
             parcel.writeInt(deckId)
@@ -161,7 +158,6 @@ data class Card(
             parcel.writeString(cardIdentifier)
         }
 
-        @RequiresApi(Build.VERSION_CODES.Q)
         override fun create(parcel: Parcel): Card {
             return Card(parcel)
         }
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/tables/ParcelableConstuctors.kt b/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/tables/ParcelableConstuctors.kt
new file mode 100644
index 0000000..deae426
--- /dev/null
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/localDatabase/tables/ParcelableConstuctors.kt
@@ -0,0 +1,64 @@
+package com.belmontCrest.cardCrafter.localDatabase.tables
+
+import android.os.Parcel
+import java.util.Date
+
+fun toParcelableCard(parcel: Parcel): Card? =
+    Card(
+        id = parcel.readInt(),
+        deckId = parcel.readInt(),
+        deckUUID = parcel.readString()!!,
+        reviewsLeft = parcel.readInt(),
+        nextReview = Date(parcel.readLong()),
+        passes = parcel.readInt(),
+        prevSuccess = parcel.readByte() != 0.toByte(),
+        totalPasses = parcel.readInt(),
+        type = parcel.readString()!!,
+        createdOn = parcel.readLong(),
+        partOfList = parcel.readByte() != 0.toByte(),
+        deckCardNumber = parcel.readInt(),
+        cardIdentifier = parcel.readString()!!
+    )
+
+fun toParcelableBasicCard(parcel: Parcel): BasicCard? =
+    BasicCard(
+        cardId = parcel.readInt(),
+        question = parcel.readString()!!,
+        answer = parcel.readString()!!
+    )
+
+fun toParcelableThreeCard(parcel: Parcel): ThreeFieldCard? =
+    ThreeFieldCard(
+        cardId = parcel.readInt(),
+        question = parcel.readString()!!,
+        middle = parcel.readString()!!,
+        answer = parcel.readString()!!,
+        field = if (parcel.readByte() != 0.toByte()) PartOfQorA.Q else PartOfQorA.A
+    )
+
+fun toParcelableHintCard(parcel: Parcel): HintCard? =
+    HintCard(
+        cardId = parcel.readInt(),
+        question = parcel.readString()!!,
+        hint = parcel.readString()!!,
+        answer = parcel.readString()!!
+    )
+
+fun toParcelableMultiCard(parcel: Parcel): MultiChoiceCard? =
+    MultiChoiceCard(
+        cardId = parcel.readInt(),
+        question = parcel.readString()!!,
+        choiceA = parcel.readString()!!,
+        choiceB = parcel.readString()!!,
+        choiceC = parcel.readString()!!,
+        choiceD = parcel.readString()!!,
+        correct = parcel.readString()!![0]
+    )
+
+fun toParcelableNotationCard(parcel: Parcel): NotationCard? =
+    NotationCard(
+        cardId = parcel.readInt(),
+        question = parcel.readString()!!,
+        steps = listOf(parcel.readString()!!),
+        answer = parcel.readString()!!
+    )
\ No newline at end of file
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/model/ScreenConfig.kt b/app/src/main/java/com/belmontCrest/cardCrafter/model/ScreenConfig.kt
index bab513e..88591a9 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/model/ScreenConfig.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/model/ScreenConfig.kt
@@ -76,7 +76,8 @@ fun getMaxHeight(): Dp {
 }
 
 @Composable
-fun getKatexMenuWidth(): Dp {
+fun getKatexMenuWidth(w: Int): Dp {
+    if (w != Int.MIN_VALUE) return w.dp
     val isLandscape = LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE
     val config = LocalWindowInfo.current.containerSize
     val width = LocalDensity.current.run { config.width.toDp() }
@@ -131,6 +132,60 @@ fun getKatexMenuWidth(): Dp {
     }
 }
 
+@Composable
+fun dialogWidth(): Dp {
+    val config = LocalWindowInfo.current.containerSize
+    val width = LocalDensity.current.run { config.width.toDp() }
+    return when (width) {
+        in 200.dp..250.dp -> {
+            200.dp
+        }
+
+        in 251.dp..350.dp -> {
+            250.dp
+        }
+
+        in 351.dp..500.dp -> {
+            350.dp
+        }
+
+        in 501.dp..700.dp -> {
+            500.dp
+        }
+
+        else -> {
+            700.dp
+        }
+    }
+}
+
+@Composable
+fun dialogHeight(): Dp {
+    val config = LocalWindowInfo.current.containerSize
+    val height = LocalDensity.current.run { config.height.toDp() }
+    return when (height) {
+        in 200.dp..250.dp -> {
+            200.dp
+        }
+
+        in 251.dp..350.dp -> {
+            250.dp
+        }
+
+        in 351.dp..500.dp -> {
+            350.dp
+        }
+
+        in 501.dp..700.dp -> {
+            500.dp
+        }
+
+        else -> {
+            700.dp
+        }
+    }
+}
+
 @Composable
 fun getIsLandScape(): Boolean {
     return LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/model/TextProps.kt b/app/src/main/java/com/belmontCrest/cardCrafter/model/TextProps.kt
index f7d2207..e19398a 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/model/TextProps.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/model/TextProps.kt
@@ -3,7 +3,10 @@
 package com.belmontCrest.cardCrafter.model
 
 
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.TextUnit
@@ -25,6 +28,8 @@ enum class MLProp { One, Two, Three, Default }
 
 enum class TCProp { Button, Default, Disabled }
 
+enum class TSProp { MediumTitle, LargeTitle, Body, Footer }
+
 /** Defining our text props */
 data class TextProps(
     /** Font size */
@@ -36,7 +41,9 @@ data class TextProps(
     /** Max lines */
     val ml: MLProp = MLProp.Default,
     /** Text Colors */
-    val tc: TCProp = TCProp.Default
+    val tc: TCProp = TCProp.Default,
+    /** Text Style */
+    val ts: TSProp = TSProp.Body
 )
 
 fun TAProp.toTextProp(): TextProps = when (this) {
@@ -104,6 +111,14 @@ fun setTextColor(tcProp: TCProp, getUIStyle: GetUIStyle): Color = when (tcProp)
     TCProp.Disabled -> getUIStyle.disabledTextColor()
 }
 
+@Composable
+fun setTextStyle(tsProp: TSProp): TextStyle = when (tsProp) {
+    TSProp.LargeTitle -> MaterialTheme.typography.titleLarge
+    TSProp.MediumTitle -> MaterialTheme.typography.titleMedium
+    TSProp.Body -> MaterialTheme.typography.bodyLarge
+    TSProp.Footer -> MaterialTheme.typography.labelMedium
+}
+
 fun titledTextProp() = TextProps(FSProp.Font22, FWProp.Default, TAProp.Center)
 
 fun cardListTextProp() = TextProps(ml = MLProp.Two, tc = TCProp.Button)
@@ -113,4 +128,17 @@ fun FSProp.toTextProp(textUnit: TextUnit): TextProps = when (textUnit) {
     12.sp -> TextProps(fs = FSProp.Font12)
     14.sp -> TextProps(fs = FSProp.Font14)
     else -> TextProps(fs = FSProp.Default)
+}
+
+fun FWProp.toTextProp(): TextProps = when (this) {
+    FWProp.SemiBold -> TextProps(fw = FWProp.SemiBold)
+    FWProp.Bold -> TextProps(fw = FWProp.Bold)
+    FWProp.Default -> TextProps(fw = FWProp.Default)
+}
+
+fun TSProp.toTextProp(): TextProps = when (this) {
+    TSProp.MediumTitle -> TextProps(ts = TSProp.MediumTitle)
+    TSProp.LargeTitle -> TextProps(ts = TSProp.LargeTitle)
+    TSProp.Body -> TextProps(ts = TSProp.Body)
+    TSProp.Footer -> TextProps(ts = TSProp.Footer)
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/model/application/AppContainer.kt b/app/src/main/java/com/belmontCrest/cardCrafter/model/application/AppContainer.kt
index 427b8d4..6e6e2e6 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/model/application/AppContainer.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/model/application/AppContainer.kt
@@ -57,9 +57,9 @@ interface AppContainer {
     val coOwnerRequestsRepository: CoOwnerRequestsRepository
     val exportRepository: ExportRepository
     val mergeDecksRepository: MergeDecksRepository
-    val isOwnerOrCoOwnerRepo : IsOwnerOrCoOwnerRepo
-    val deepLinkerRepo : DeepLinkerRepository
-    val fpRepository : ForgotPasswordRepository
+    val isOwnerOrCoOwnerRepo: IsOwnerOrCoOwnerRepo
+    val deepLinkerRepo: DeepLinkerRepository
+    val fpRepository: ForgotPasswordRepository
     val kbRepository: KeyboardSelectionRepository
 }
 
@@ -69,6 +69,7 @@ class AppDataContainer(
     sharedSupabase: SupabaseClient,
     syncedSupabase: SupabaseClient
 ) : AppContainer {
+
     override val flashCardRepository: FlashCardRepository by lazy {
         OfflineFlashCardRepository(
             FlashCardDatabase.getDatabase(context, scope).deckDao(),
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/model/application/AppViewModelProvider.kt b/app/src/main/java/com/belmontCrest/cardCrafter/model/application/AppViewModelProvider.kt
index d436532..a738054 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/model/application/AppViewModelProvider.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/model/application/AppViewModelProvider.kt
@@ -65,6 +65,8 @@ object AppViewModelProvider {
             AddCardViewModel(
                 flashCardApplication().container.flashCardRepository,
                 flashCardApplication().container.isOwnerOrCoOwnerRepo,
+                flashCardApplication().container.kbRepository,
+                this.createSavedStateHandle(),
                 this.createSavedStateHandle().get<String>("deckUUID")!!
             )
         }
@@ -84,7 +86,10 @@ object AppViewModelProvider {
         initializer {
             EditCardViewModel(
                 flashCardApplication().container.cardTypeRepository,
-                flashCardApplication().container.scienceSpecificRepository
+                flashCardApplication().container.scienceSpecificRepository,
+                flashCardApplication().container.kbRepository,
+                this.createSavedStateHandle(),
+                this.createSavedStateHandle().get<Int>("card_id")!!
             )
         }
         initializer {
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/model/application/PreferencesManager.kt b/app/src/main/java/com/belmontCrest/cardCrafter/model/application/PreferencesManager.kt
new file mode 100644
index 0000000..47ddc5c
--- /dev/null
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/model/application/PreferencesManager.kt
@@ -0,0 +1,146 @@
+package com.belmontCrest.cardCrafter.model.application
+
+import android.content.Context
+import android.os.Parcelable
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.core.content.edit
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.parcelize.Parcelize
+
+class PreferencesManager(
+    context: Context,
+) {
+    private val sharedPreferences = context.getSharedPreferences("app_prefs", Context.MODE_PRIVATE)
+    private val _dynamicTheme = MutableStateFlow(false)
+    val dynamicTheme = _dynamicTheme.asStateFlow()
+    private val _darkTheme = MutableStateFlow(false)
+    val darkTheme = _darkTheme.asStateFlow()
+    private val _cuteTheme = MutableStateFlow(false)
+    val cuteTheme = _cuteTheme.asStateFlow()
+    private val _cardAmount = MutableStateFlow(20)
+    val cardAmount = _cardAmount.asStateFlow()
+    private val _reviewAmount = MutableStateFlow(1)
+    val reviewAmount = _reviewAmount.asStateFlow()
+    private val _height = MutableStateFlow(200)
+    val height = _height.asStateFlow()
+    private val _width = MutableStateFlow(200)
+    val width = _width.asStateFlow()
+
+    init {
+        _dynamicTheme.update { isDynamicThemeEnabled }
+        _darkTheme.update { isDarkThemeEnabled }
+        _cuteTheme.update { isCuteThemeEnabled }
+        _cardAmount.update { allCardAmounts }
+        _reviewAmount.update { allReviewAmounts }
+        _height.update { katexMenuHeight }
+        _width.update { katexMenuWidth }
+    }
+
+    fun saveDynamicTheme() {
+        _dynamicTheme.update { !it }; isDynamicThemeEnabled = _dynamicTheme.value
+    }
+
+    fun saveDarkTheme() {
+        _darkTheme.update { !it }; isDarkThemeEnabled = _darkTheme.value
+    }
+
+    fun saveCuteTheme(value: Boolean = !_cuteTheme.value) {
+        _cuteTheme.update { value }; isCuteThemeEnabled = _cuteTheme.value
+    }
+
+    fun saveCardAmount(amount: Int) {
+        _cardAmount.update { amount }; allCardAmounts = amount
+    }
+
+    fun saveReviewAmount(amount: Int) {
+        _reviewAmount.update { amount }; allReviewAmounts = amount
+    }
+
+    fun saveKatexMenuHeight(h: Int) {
+        _height.update { h }; katexMenuHeight = h
+    }
+
+    fun saveKatexMenuWidth(w: Int) {
+        _width.update { w }; katexMenuWidth = w
+    }
+
+    fun savePreferences() {
+        isDynamicThemeEnabled = _dynamicTheme.value
+        isDarkThemeEnabled = _darkTheme.value
+        isCuteThemeEnabled = _cuteTheme.value
+        allCardAmounts = _cardAmount.value
+        allReviewAmounts = _reviewAmount.value
+        katexMenuHeight = _height.value
+        katexMenuWidth = _width.value
+    }
+
+    private var isDynamicThemeEnabled: Boolean
+        get() = sharedPreferences.getBoolean("dynamic_theme", false)
+        set(value) = sharedPreferences.edit { putBoolean("dynamic_theme", value) }
+
+    private var isDarkThemeEnabled: Boolean
+        get() = sharedPreferences.getBoolean("dark_theme", false)
+        set(value) = sharedPreferences.edit { putBoolean("dark_theme", value) }
+
+    private var isCuteThemeEnabled: Boolean
+        get() = sharedPreferences.getBoolean("cute_theme", false)
+        set(value) = sharedPreferences.edit { putBoolean("cute_theme", value) }
+
+
+    fun setDarkTheme(isDarkTheme: Boolean) {
+        isDarkThemeEnabled = isDarkTheme
+    }
+
+    private var isFirstTime: Boolean
+        get() = sharedPreferences.getBoolean("first_time", true)
+        set(value) = sharedPreferences.edit { putBoolean("first_time", value) }
+
+    fun getIsFirstTime(): Boolean = isFirstTime
+
+    fun setIsFirstTime() {
+        isFirstTime = false
+    }
+
+    private var allCardAmounts: Int
+        get() = sharedPreferences.getInt("card_amount", 20)
+        set(value) = sharedPreferences.edit { putInt("card_amount", value) }
+
+
+    private var allReviewAmounts: Int
+        get() = sharedPreferences.getInt("review_amount", 1)
+        set(value) = sharedPreferences.edit { putInt("review_amount", value) }
+
+
+    private var katexMenuHeight: Int
+        get() = sharedPreferences.getInt("menu_height", 200)
+        set(value) = sharedPreferences.edit { putInt("menu_height", value) }
+
+    private var katexMenuWidth: Int
+        get() = sharedPreferences.getInt("menu_width", Int.MIN_VALUE)
+        set(value) = sharedPreferences.edit { putInt("menu_width", value) }
+}
+
+@Parcelize
+data class PreferenceValues(
+    val darkTheme: Boolean, val cuteTheme: Boolean, val dynamicTheme: Boolean,
+    val cardAmount: Int, val reviewAmount: Int, val height: Int, val width: Int
+) : Parcelable
+
+@Composable
+fun setPreferenceValues(preferencesManager: PreferencesManager): PreferenceValues {
+    val dt by preferencesManager.darkTheme.collectAsStateWithLifecycle()
+    val ct by preferencesManager.cuteTheme.collectAsStateWithLifecycle()
+    val dynamicTheme by preferencesManager.dynamicTheme.collectAsStateWithLifecycle()
+    val ca by preferencesManager.cardAmount.collectAsStateWithLifecycle()
+    val ra by preferencesManager.reviewAmount.collectAsStateWithLifecycle()
+    val height by preferencesManager.height.collectAsStateWithLifecycle()
+    val width by preferencesManager.width.collectAsStateWithLifecycle()
+    return PreferenceValues(
+        darkTheme = dt, cuteTheme = ct, dynamicTheme = dynamicTheme,
+        cardAmount = ca, reviewAmount = ra, height = height, width = width
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/model/ui/Fields.kt b/app/src/main/java/com/belmontCrest/cardCrafter/model/ui/Fields.kt
index 9b15261..a562682 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/model/ui/Fields.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/model/ui/Fields.kt
@@ -5,7 +5,6 @@ import android.os.Parcelable
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
-import com.belmontCrest.cardCrafter.localDatabase.tables.PartOfQorA
 import kotlinx.parcelize.Parceler
 import kotlinx.parcelize.Parcelize
 
@@ -14,24 +13,12 @@ import kotlinx.parcelize.Parcelize
  */
 @Parcelize
 data class Fields(
-    var question: MutableState<String> = mutableStateOf(""),
-    var middleField: MutableState<String> = mutableStateOf(""),
-    var answer: MutableState<String> = mutableStateOf(""),
-    var choices: List<MutableState<String>> = List(4) { mutableStateOf("") },
-    var correct: MutableState<Char> = mutableStateOf('?'),
     var scrollPosition: MutableState<Int> = mutableIntStateOf(0),
     val mainClicked: MutableState<Boolean> = mutableStateOf(false),
     val inDeckClicked: MutableState<Boolean> = mutableStateOf(false),
     val leftDueCardView: MutableState<Boolean> = mutableStateOf(false),
-    var stringList: MutableList<MutableState<String>> = mutableListOf(),
-    var newType: MutableState<String> = mutableStateOf(""),
-    var isQOrA: MutableState<PartOfQorA> = mutableStateOf(PartOfQorA.A),
     var isEditing: MutableState<Boolean> = mutableStateOf(false)
 ) : Parcelable {
-    fun resetFields() {
-        question.value = ""; middleField.value = ""; answer.value = ""
-        choices.map { it.value = "" }; correct.value = '?'
-    }
 
     fun navigateToDeck() {
         leftDueCardView.value = false
@@ -46,45 +33,23 @@ data class Fields(
     }
 
     fun navigateToCardList() {
-        newType = mutableStateOf(""); isEditing.value = false; inDeckClicked.value = false
+        isEditing.value = false; inDeckClicked.value = false
     }
 
     constructor(parcel: Parcel) : this(
-        question = mutableStateOf(parcel.readString().orEmpty().ifEmpty { "" }),
-        middleField = mutableStateOf(parcel.readString().orEmpty().ifEmpty { "" }),
-        answer = mutableStateOf(parcel.readString().orEmpty().ifEmpty { "" }),
-        choices = List(4) { mutableStateOf(parcel.readString() ?: "") },
-        correct = mutableStateOf(parcel.readString().orEmpty().ifEmpty { "?" }.first()),
         scrollPosition = mutableIntStateOf(parcel.readInt()),
         mainClicked = mutableStateOf(parcel.readByte() != 0.toByte()),
         inDeckClicked = mutableStateOf(parcel.readByte() != 0.toByte()),
         leftDueCardView = mutableStateOf(parcel.readByte() != 0.toByte()),
-        stringList = mutableListOf<MutableState<String>>().apply {
-            parcel.readStringList(this.map { it.value }.toMutableList())
-            addAll(this)
-        },
-        isQOrA = mutableStateOf(
-            if (parcel.readByte() != 0.toByte()) PartOfQorA.Q else PartOfQorA.A
-        ),
-        newType = mutableStateOf(parcel.readString().orEmpty().ifEmpty { "" }),
         isEditing = mutableStateOf(parcel.readByte() != 0.toByte())
     )
 
     companion object : Parceler<Fields> {
         override fun Fields.write(parcel: Parcel, flags: Int) {
-            parcel.writeString(question.value)
-            parcel.writeString(middleField.value)
-            parcel.writeString(answer.value)
-            parcel.writeStringList(choices.map { it.value })
-            parcel.writeString(correct.toString())
             parcel.writeInt(scrollPosition.value)
             parcel.writeByte(if (mainClicked.value) 1 else 0)
             parcel.writeByte(if (inDeckClicked.value) 1 else 0)
             parcel.writeByte(if (leftDueCardView.value) 1 else 0)
-            parcel.writeStringList(stringList.map { it.value })
-            parcel.writeString(newType.value)
-            val byteValue: Byte = if (isQOrA.value is PartOfQorA.Q) 1 else 0
-            parcel.writeByte(byteValue)
             parcel.writeByte(if (isEditing.value) 1 else 0)
         }
 
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/model/ui/PreferencesManager.kt b/app/src/main/java/com/belmontCrest/cardCrafter/model/ui/PreferencesManager.kt
deleted file mode 100644
index 97060a9..0000000
--- a/app/src/main/java/com/belmontCrest/cardCrafter/model/ui/PreferencesManager.kt
+++ /dev/null
@@ -1,94 +0,0 @@
-package com.belmontCrest.cardCrafter.model.ui
-
-import android.content.Context
-import androidx.compose.runtime.MutableIntState
-import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.mutableIntStateOf
-import androidx.compose.runtime.mutableStateOf
-import androidx.core.content.edit
-
-class PreferencesManager(
-    context: Context,
-) {
-    private val sharedPreferences = context.getSharedPreferences("app_prefs", Context.MODE_PRIVATE)
-    val customScheme: MutableState<Boolean> = mutableStateOf(false)
-    val darkTheme: MutableState<Boolean> = mutableStateOf(false)
-    val cuteTheme: MutableState<Boolean> = mutableStateOf(false)
-    val cardAmount: MutableIntState = mutableIntStateOf(20)
-    val reviewAmount: MutableIntState = mutableIntStateOf(1)
-    init {
-        // Initialize themes
-        darkTheme.value = isDarkThemeEnabled
-        cuteTheme.value = isCuteThemeEnabled
-        customScheme.value = isDynamicThemeEnabled
-        cardAmount.intValue = allCardAmounts
-        reviewAmount.intValue = allReviewAmounts
-    }
-
-    fun saveCustomScheme() {
-        isDynamicThemeEnabled = customScheme.value
-    }
-
-    fun saveDarkTheme() {
-        isDarkThemeEnabled = darkTheme.value
-    }
-    fun saveCuteTheme() {
-        isCuteThemeEnabled = cuteTheme.value
-    }
-    fun saveCardAmount() {
-        allCardAmounts = cardAmount.intValue
-    }
-
-    fun saveReviewAmount() {
-        allReviewAmounts = reviewAmount.intValue
-    }
-    fun savePreferences(){
-        isDynamicThemeEnabled = customScheme.value
-        isDarkThemeEnabled = darkTheme.value
-        isCuteThemeEnabled = cuteTheme.value
-        allCardAmounts = cardAmount.intValue
-        allReviewAmounts = reviewAmount.intValue
-    }
-    private var isDynamicThemeEnabled: Boolean
-        get() = sharedPreferences.getBoolean("dynamic_theme", false)
-        set(value) {
-            sharedPreferences.edit { putBoolean("dynamic_theme", value) }
-        }
-    private var isDarkThemeEnabled: Boolean
-        get() = sharedPreferences.getBoolean("dark_theme", false)
-        set(value) {
-            sharedPreferences.edit { putBoolean("dark_theme", value) }
-        }
-    private var isCuteThemeEnabled: Boolean
-        get() = sharedPreferences.getBoolean("cute_theme", false)
-        set(value) {
-            sharedPreferences.edit { putBoolean("cute_theme", value) }
-        }
-
-    fun setDarkTheme(isDarkTheme : Boolean ){
-        isDarkThemeEnabled = isDarkTheme
-    }
-
-    private var isFirstTime: Boolean
-        get() = sharedPreferences.getBoolean("first_time", true)
-        set(value) {
-            sharedPreferences.edit { putBoolean("first_time", value) }
-        }
-    fun getIsFirstTime() : Boolean {
-        return isFirstTime
-    }
-    fun setIsFirstTime() {
-        isFirstTime = false
-    }
-    private var allCardAmounts: Int
-        get() = sharedPreferences.getInt("card_amount", 20)
-        set(value) {
-            sharedPreferences.edit { putInt("card_amount", value) }
-        }
-
-    private var allReviewAmounts: Int
-        get() = sharedPreferences.getInt("review_amount", 1)
-        set(value) {
-            sharedPreferences.edit { putInt("review_amount", value) }
-        }
-}
\ No newline at end of file
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/model/ui/UiStates.kt b/app/src/main/java/com/belmontCrest/cardCrafter/model/ui/states/DB-related.kt
similarity index 56%
rename from app/src/main/java/com/belmontCrest/cardCrafter/model/ui/UiStates.kt
rename to app/src/main/java/com/belmontCrest/cardCrafter/model/ui/states/DB-related.kt
index 4463bcd..c1a97a1 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/model/ui/UiStates.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/model/ui/states/DB-related.kt
@@ -1,5 +1,4 @@
-package com.belmontCrest.cardCrafter.model.ui
-
+package com.belmontCrest.cardCrafter.model.ui.states
 
 import android.os.Parcelable
 import com.belmontCrest.cardCrafter.localDatabase.tables.CT
@@ -63,53 +62,4 @@ data class SealedDueCTs(
 /** Also for our OnCreate MA */
 data class SavedCardUiState(
     var savedCards: List<SavedCard> = emptyList()
-)
-
-@Serializable
-@Parcelize
-sealed class CardState : Parcelable {
-    @Serializable
-    @Parcelize
-    data object Idle : CardState()
-
-    @Serializable
-    @Parcelize
-    data object Loading : CardState()
-
-    @Serializable
-    @Parcelize
-    data object Finished : CardState()
-}
-
-/** Selected keyboard which is tied to NavVM */
-@Serializable
-sealed class SelectedKeyboard {
-    @Serializable
-    data object Question : SelectedKeyboard()
-
-    /** The pertaining step on the steps from stringList. */
-    @Serializable
-    data class Step(val index: Int) : SelectedKeyboard()
-
-    @Serializable
-    data object Answer : SelectedKeyboard()
-}
-
-/** Whether the user decides to move the cards or copy it */
-@Parcelize
-sealed class Decision : Parcelable {
-    @Parcelize
-    data object Move : Decision()
-
-    @Parcelize
-    data object Copy : Decision()
-
-    @Parcelize
-    data object Idle : Decision()
-}
-
-@Parcelize
-data class Dialogs(
-    val showDelete: Boolean, val showMoveCopy: Boolean, val showDuplicate: Boolean
-) : Parcelable
-
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/model/ui/states/Screen-Related.kt b/app/src/main/java/com/belmontCrest/cardCrafter/model/ui/states/Screen-Related.kt
new file mode 100644
index 0000000..3c38675
--- /dev/null
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/model/ui/states/Screen-Related.kt
@@ -0,0 +1,177 @@
+package com.belmontCrest.cardCrafter.model.ui.states
+
+
+import android.os.Parcel
+import android.os.Parcelable
+import androidx.compose.ui.text.TextRange
+import com.belmontCrest.cardCrafter.localDatabase.tables.PartOfQorA
+import kotlinx.parcelize.Parceler
+import kotlinx.parcelize.Parcelize
+import kotlinx.serialization.Serializable
+
+@Serializable
+@Parcelize
+/** The state of the current card */
+sealed class CardState : Parcelable {
+    @Serializable
+    @Parcelize
+    /** Not loading */
+    data object Idle : CardState()
+
+    @Serializable
+    @Parcelize
+    /** Loading */
+    data object Loading : CardState()
+
+    @Serializable
+    @Parcelize
+    /** Finished updating the card || Finished retrieving the cards */
+    data object Finished : CardState()
+}
+
+/** Selected keyboard which is tied to NavVM */
+@Serializable
+@Parcelize
+sealed class SelectedKeyboard : Parcelable {
+    @Serializable
+    data object Question : SelectedKeyboard()
+
+    /** The pertaining step on the steps from stringList. */
+    @Serializable
+    data class Step(val index: Int) : SelectedKeyboard()
+
+    @Serializable
+    data object Answer : SelectedKeyboard()
+}
+
+/** Whether the user decides to move the cards or copy it */
+@Parcelize
+sealed class Decision : Parcelable {
+    @Parcelize
+    data object Move : Decision()
+
+    @Parcelize
+    data object Copy : Decision()
+
+    @Parcelize
+    data object Idle : Decision()
+}
+
+@Parcelize
+data class Dialogs(
+    val showDelete: Boolean, val showMoveCopy: Boolean, val showDuplicate: Boolean
+) : Parcelable
+
+
+@Parcelize
+@Serializable
+data class MyTextRange(val start: Int = 0, val end: Int = 0) : Parcelable {
+    constructor(parcel: Parcel) : this(
+        parcel.readInt(),
+        parcel.readInt()
+    )
+
+    companion object : Parceler<MyTextRange> {
+        override fun MyTextRange.write(parcel: Parcel, flags: Int) {
+            parcel.writeInt(start)
+            parcel.writeInt(end)
+        }
+
+        override fun create(parcel: Parcel): MyTextRange {
+            return MyTextRange(parcel)
+        }
+    }
+}
+
+fun MyTextRange.toTextRange(): TextRange = TextRange(this.start, this.end)
+
+fun TextRange.toMyTextRange(): MyTextRange = MyTextRange(this.start, this.end)
+fun TextRange?.toMyTextRange(): MyTextRange? =
+    if (this != null) MyTextRange(this.start, this.end) else null
+
+@Parcelize
+@Serializable
+data class CDetails(
+    val question: String = "", val middle: String = "", val answer: String = "",
+    val choices: List<String> = List(4) { "" }, val correct: Char = '?',
+    val steps: List<String> = emptyList(), val isQOrA: PartOfQorA = PartOfQorA.A
+) : Parcelable
+
+fun CDetails.updateQuestion(q: String): CDetails =
+    CDetails(
+        question = q, middle = middle, answer = answer,
+        choices = choices, correct = correct,
+        steps = steps, isQOrA = isQOrA
+    )
+
+fun CDetails.updateAnswer(a: String): CDetails =
+    CDetails(
+        question = question, middle = middle, answer = a,
+        choices = choices, correct = correct,
+        steps = steps, isQOrA = isQOrA
+    )
+
+fun CDetails.updateMiddle(m: String): CDetails =
+    CDetails(
+        question = question, middle = m, answer = answer,
+        choices = choices, correct = correct,
+        steps = steps, isQOrA = isQOrA
+    )
+
+fun CDetails.updateChoices(c: String, idx: Int): CDetails {
+    val newChoices = this.choices.mapIndexed { index, string ->
+        val value = if (index == idx) c else string
+        value
+    }
+    return CDetails(
+        question = question, middle = middle, answer = answer,
+        choices = newChoices, correct = correct,
+        steps = steps, isQOrA = isQOrA
+    )
+}
+
+fun CDetails.updateCorrect(c: Char): CDetails =
+    CDetails(
+        question = question, middle = middle, answer = answer,
+        choices = choices, correct = c,
+        steps = steps, isQOrA = isQOrA
+    )
+
+fun CDetails.addStep(): CDetails {
+    val newSteps = steps.toMutableList()
+    newSteps.add("")
+    return CDetails(
+        question = question, middle = middle, answer = answer,
+        choices = choices, correct = correct,
+        steps = newSteps, isQOrA = isQOrA
+    )
+}
+
+fun CDetails.removeStep(): CDetails {
+    val newSteps = steps.toMutableList()
+    newSteps.removeAt(newSteps.lastIndex)
+    return CDetails(
+        question = question, middle = middle, answer = answer,
+        choices = choices, correct = correct,
+        steps = newSteps, isQOrA = isQOrA
+    )
+}
+
+fun CDetails.updateStep(s: String, idx: Int): CDetails {
+    val newSteps = steps.mapIndexed { index, string ->
+        val value = if (index == idx) s else string
+        value
+    }
+    return CDetails(
+        question = question, middle = middle, answer = answer,
+        choices = choices, correct = correct,
+        steps = newSteps, isQOrA = isQOrA
+    )
+}
+
+fun CDetails.updateQOrA(qa: PartOfQorA): CDetails =
+    CDetails(
+        question = question, middle = middle, answer = answer,
+        choices = choices, correct = correct,
+        steps = steps, isQOrA = qa
+    )
\ No newline at end of file
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/KeyboardSelectionRepository.kt b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/KeyboardSelectionRepository.kt
index 70f3fcf..4208628 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/KeyboardSelectionRepository.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/KeyboardSelectionRepository.kt
@@ -1,28 +1,27 @@
 package com.belmontCrest.cardCrafter.navigation
 
-import com.belmontCrest.cardCrafter.model.ui.SelectedKeyboard
+import com.belmontCrest.cardCrafter.model.ui.states.SelectedKeyboard
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.asStateFlow
 import kotlinx.coroutines.flow.update
 
 
-
 interface KeyboardSelectionRepository {
-    val showKatexKeyboard : StateFlow<Boolean>
-    val selectedKB : StateFlow<SelectedKeyboard?>
-    val resetOffset : StateFlow<Boolean>
-
+    val showKatexKeyboard: StateFlow<Boolean>
+    val selectedKB: StateFlow<SelectedKeyboard?>
+    val resetOffset: StateFlow<Boolean>
     fun updateSelectedKB(selectedKeyboard: SelectedKeyboard)
     fun resetSelectedKB()
-    fun retrieveKB(retrievedKB : SelectedKeyboard?)
     fun toggleKeyboard()
     fun resetOffset()
     fun resetDone()
     fun resetKeyboardStuff()
-    fun retrieveShowKB(show : Boolean)
+    fun onCreate(showKB : Boolean, selectedKeyboard: SelectedKeyboard? = null)
 }
+
 class KeyboardSelectionRepoImpl : KeyboardSelectionRepository {
+
     private val _showKatexKeyboard = MutableStateFlow(false)
     override val showKatexKeyboard = _showKatexKeyboard.asStateFlow()
     private val _selectedKB: MutableStateFlow<SelectedKeyboard?> = MutableStateFlow(null)
@@ -38,10 +37,6 @@ class KeyboardSelectionRepoImpl : KeyboardSelectionRepository {
         _selectedKB.update { null }
     }
 
-    override fun retrieveKB(retrievedKB : SelectedKeyboard?) {
-        _selectedKB.update { retrievedKB }
-    }
-
     override fun toggleKeyboard() {
         _showKatexKeyboard.update { !it }
     }
@@ -60,7 +55,7 @@ class KeyboardSelectionRepoImpl : KeyboardSelectionRepository {
         _showKatexKeyboard.update { false }
     }
 
-    override fun retrieveShowKB(show: Boolean) {
-        _showKatexKeyboard.update { show }
+    override fun onCreate(showKB : Boolean, selectedKeyboard: SelectedKeyboard?) {
+        _selectedKB.update { selectedKeyboard }
     }
 }
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/NavViewModel.kt b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/NavViewModel.kt
index a2d8be3..b7ea190 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/NavViewModel.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/NavViewModel.kt
@@ -13,10 +13,9 @@ import com.belmontCrest.cardCrafter.navigation.destinations.SupabaseDestination
 import com.belmontCrest.cardCrafter.localDatabase.dbInterface.repositories.FlashCardRepository
 import com.belmontCrest.cardCrafter.localDatabase.tables.Card
 import com.belmontCrest.cardCrafter.localDatabase.tables.Deck
-import com.belmontCrest.cardCrafter.model.ui.StringVar
-import com.belmontCrest.cardCrafter.model.ui.SelectedCard
-import com.belmontCrest.cardCrafter.model.ui.SelectedKeyboard
-import com.belmontCrest.cardCrafter.model.ui.WhichDeck
+import com.belmontCrest.cardCrafter.model.ui.states.StringVar
+import com.belmontCrest.cardCrafter.model.ui.states.SelectedCard
+import com.belmontCrest.cardCrafter.model.ui.states.WhichDeck
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.flow.MutableStateFlow
@@ -30,7 +29,6 @@ import kotlinx.coroutines.flow.stateIn
 import kotlinx.coroutines.flow.update
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
-import kotlinx.serialization.json.Json
 
 
 /**
@@ -47,10 +45,9 @@ class NavViewModel(
     companion object {
         private const val NAV_VM = "NavViewModel"
         private const val TIMEOUT_MILLIS = 4_000L
-        private const val SHOW_KB = "showKB"
         private const val CT_TYPE = "CT_type"
-        private const val KEY_SELECTED_KB = "selected_kb"
         private const val IS_SELECTING = "is_selecting"
+        private const val SHOW_KB = "show_kb"
     }
 
     private val rf = ReusedFunc(flashCardRepository)
@@ -203,47 +200,28 @@ class NavViewModel(
 
     fun resetIsBlocking() = _isBlocking.update { false }
 
-    val showKatexKeyboard = kbRepository.showKatexKeyboard.stateIn(
-        scope = viewModelScope,
-        started = SharingStarted.WhileSubscribed(TIMEOUT_MILLIS),
-        initialValue = savedStateHandle[SHOW_KB] as Boolean? == true
-    )
+    val showKatexKeyboard = kbRepository.showKatexKeyboard
     val selectedKB = kbRepository.selectedKB
-    val resetOffset = kbRepository.resetOffset
     val selectable = cardTypeRepository.selectedCards.map { it.isNotEmpty() }.stateIn(
         scope = viewModelScope,
         started = SharingStarted.WhileSubscribed(TIMEOUT_MILLIS),
         initialValue = false
     )
 
-    fun updateSelectedKB(selectedKeyboard: SelectedKeyboard) {
-        kbRepository.updateSelectedKB(selectedKeyboard)
-        savedStateHandle[KEY_SELECTED_KB] =
-            Json.encodeToString(SelectedKeyboard.serializer(), selectedKeyboard)
-    }
-
-    fun resetSelectedKB() = kbRepository.resetSelectedKB()
-
-    fun retrieveKB() {
-        val kb = savedStateHandle.get<String>(KEY_SELECTED_KB)
-            ?.let { Json.decodeFromString(SelectedKeyboard.serializer(), it) }
-        kbRepository.retrieveKB(kb)
-    }
-
     fun toggleKeyboard() {
         savedStateHandle[SHOW_KB] = !showKatexKeyboard.value
         kbRepository.toggleKeyboard()
     }
 
-    fun resetOffset() = kbRepository.resetOffset()
+    fun onCreate() {
+        val showKB = savedStateHandle.get<Boolean>(SHOW_KB) == true
+        kbRepository.onCreate(showKB)
+    }
 
-    fun resetDone() = kbRepository.resetDone()
+    fun resetOffset() = kbRepository.resetOffset()
 
     /** Reset the selected keyboard to null and don't show the keyboard */
-    fun resetKeyboardStuff() {
-        kbRepository.resetKeyboardStuff()
-        savedStateHandle[SHOW_KB] = false
-    }
+    fun resetKeyboardStuff() = kbRepository.resetKeyboardStuff()
 
     private val _isSelecting =
         MutableStateFlow(savedStateHandle[IS_SELECTING] as Boolean? == true)
@@ -267,9 +245,4 @@ class NavViewModel(
     suspend fun getAllDecks(): List<Deck> = withContext(Dispatchers.IO) {
         flashCardRepository.getAllDecks()
     }
-
-    init {
-        val show = savedStateHandle[SHOW_KB] as Boolean? == true
-        kbRepository.retrieveShowKB(show)
-    }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/destinations/LocalDestinations.kt b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/destinations/LocalDestinations.kt
index 1e1431b..f57e8f4 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/destinations/LocalDestinations.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/destinations/LocalDestinations.kt
@@ -6,41 +6,47 @@ import kotlinx.serialization.Serializable
 object DeckListDestination : NavigationDestination {
     override val route = "DeckList"
 }
+
 @Serializable
 object SettingsDestination : NavigationDestination {
     override val route = "Settings"
 }
+
 @Serializable
 object AddDeckDestination : NavigationDestination {
     override val route = "AddDeck"
 }
+
 @Serializable
 object DeckViewDestination : NavigationDestination {
     override val route = "DeckView"
 }
+
 @Serializable
-object AddCardDestination : NavigationDestination{
+object AddCardDestination : NavigationDestination {
     override val route = "AddCard/{deckId}/{deckUUID}"
-    fun createRoute(deckId: Int, deckUUID : String): String {
-        return "AddCard/$deckId/$deckUUID"
-    }
+    fun createRoute(deckId: Int, deckUUID: String): String = "AddCard/$deckId/$deckUUID"
 }
+
 @Serializable
-object ViewDueCardsDestination : NavigationDestination{
+object ViewDueCardsDestination : NavigationDestination {
     override val route = "ViewCard"
 }
+
 @Serializable
 object EditDeckDestination : NavigationDestination {
     override val route = "EditDeck/{currentName}"
-    fun createRoute(name: String): String{
-        return "EditDeck/$name"
-    }
+    fun createRoute(name: String): String = "EditDeck/$name"
+
 }
+
 @Serializable
-object ViewAllCardsDestination : NavigationDestination{
+object ViewAllCardsDestination : NavigationDestination {
     override val route = "ViewFlashCards"
 }
+
 @Serializable
 object EditingCardDestination : NavigationDestination {
-    override val route = "EditingCard"
+    override val route = "EditingCard/{card_id}"
+    fun createRoute(cardId: Int): String = "EditingCard/$cardId"
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/drawer/ActionsIconButton.kt b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/drawer/ActionsIconButton.kt
index ece7ed6..beef9e3 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/drawer/ActionsIconButton.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/drawer/ActionsIconButton.kt
@@ -33,8 +33,8 @@ import com.belmontCrest.cardCrafter.navigation.destinations.ViewAllCardsDestinat
 import com.belmontCrest.cardCrafter.navigation.destinations.ViewDueCardsDestination
 import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.CardDeckViewModel
 import com.belmontCrest.cardCrafter.localDatabase.tables.Deck
-import com.belmontCrest.cardCrafter.model.ui.Decision
-import com.belmontCrest.cardCrafter.model.ui.Dialogs
+import com.belmontCrest.cardCrafter.model.ui.states.Decision
+import com.belmontCrest.cardCrafter.model.ui.states.Dialogs
 import com.belmontCrest.cardCrafter.model.ui.Fields
 import com.belmontCrest.cardCrafter.navigation.destinations.AddDeckDestination
 import com.belmontCrest.cardCrafter.navigation.destinations.CoOwnerRequestsDestination
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/drawer/CurrentRouteIconContent.kt b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/drawer/CurrentRouteIconContent.kt
index 563596a..9351d22 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/drawer/CurrentRouteIconContent.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/drawer/CurrentRouteIconContent.kt
@@ -174,9 +174,7 @@ fun MainDLRouteContent(
             pdsVM.syncDecks()
         }
     }) {
-        ci.ContentIcon(
-            "Cloud Sync", painterResource(R.drawable.cloud_sync), Modifier
-        )
+        ci.ContentIcon(painterResource(R.drawable.cloud_sync), "Cloud Sync")
     }
 }
 
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/drawer/CustomNavigationDrawer.kt b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/drawer/CustomNavigationDrawer.kt
index 2f2a365..a73b306 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/drawer/CustomNavigationDrawer.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/drawer/CustomNavigationDrawer.kt
@@ -3,17 +3,26 @@ package com.belmontCrest.cardCrafter.navigation.drawer
 import android.os.Build
 import androidx.annotation.RequiresApi
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Clear
 import androidx.compose.material.icons.filled.Menu
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.DrawerValue
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalDrawerSheet
@@ -25,15 +34,20 @@ import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.rememberDrawerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.InternalComposeApi
+import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.sp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -49,10 +63,17 @@ import com.belmontCrest.cardCrafter.navigation.destinations.ViewDueCardsDestinat
 import com.belmontCrest.cardCrafter.navigation.destinations.SupabaseDestination
 import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.CardDeckViewModel
 import com.belmontCrest.cardCrafter.controller.viewModels.deckViewsModels.updateCurrentTime
+import com.belmontCrest.cardCrafter.model.Type
+import com.belmontCrest.cardCrafter.model.dialogHeight
+import com.belmontCrest.cardCrafter.model.dialogWidth
+import com.belmontCrest.cardCrafter.model.getIsLandScape
 import com.belmontCrest.cardCrafter.model.ui.Fields
+import com.belmontCrest.cardCrafter.navigation.destinations.AddCardDestination
 import com.belmontCrest.cardCrafter.navigation.destinations.ExportSBDestination
 import com.belmontCrest.cardCrafter.supabase.controller.viewModels.SupabaseViewModel
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
+import com.belmontCrest.cardCrafter.uiFunctions.ContentIcons
+import com.belmontCrest.cardCrafter.uiFunctions.katex.SymbolDocumentation
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.launch
 
@@ -60,7 +81,6 @@ import kotlinx.coroutines.launch
 @OptIn(InternalComposeApi::class, ExperimentalMaterial3Api::class)
 @Composable
 fun CustomNavigationDrawer(
-    modifier: Modifier = Modifier,
     mainNavController: NavHostController,
     fields: Fields,
     getUIStyle: GetUIStyle,
@@ -88,6 +108,7 @@ fun CustomNavigationDrawer(
     val deckName by navViewModel.deckName.collectAsStateWithLifecycle()
     val isSelecting by navViewModel.isSelecting.collectAsStateWithLifecycle()
     val owner by supabaseVM.owner.collectAsStateWithLifecycle()
+    val type by navViewModel.type.collectAsStateWithLifecycle()
 
     // Determine the title based on the current route.
     val titleText = when (cr.name) {
@@ -101,10 +122,29 @@ fun CustomNavigationDrawer(
         SBNavDestination.route -> "Online Decks"
         SupabaseDestination.route -> "Online Decks"
         ExportSBDestination.route -> "Select 4 cards here "
+        AddCardDestination.route -> when (type) {
+            Type.HINT -> stringResource(R.string.hint)
+            Type.THREE -> stringResource(R.string.three_fields)
+            Type.MULTI -> stringResource(R.string.multi)
+            Type.NOTATION -> "Notation"
+            else -> stringResource(R.string.basic)
+        }
+
         else -> "CardCrafter"
     }
-
     val isBlocking by navViewModel.isBlocking.collectAsStateWithLifecycle()
+    val ci = ContentIcons(getUIStyle)
+    val helpForNotation = rememberSaveable { mutableStateOf(false) }
+    val isLandScape = getIsLandScape()
+    val widthMod =
+        if (isLandScape)
+            Modifier
+                .fillMaxWidth(.8f)
+                .height(dialogHeight())
+        else Modifier
+            .width(dialogWidth())
+            .fillMaxHeight(.95f)
+    val scrollState = rememberScrollState()
 
     ModalNavigationDrawer(
         drawerState = drawerState,
@@ -131,40 +171,16 @@ fun CustomNavigationDrawer(
                             containerColor = getUIStyle.navBarColor(),
                             titleContentColor = MaterialTheme.colorScheme.primary,
                         ),
-                    title = {
-                        if (titleText == ExportSBDestination.route) {
-                            Text(
-                                text = titleText, color = getUIStyle.titleColor(),
-                                textAlign = TextAlign.End,
-                                maxLines = 2, overflow = TextOverflow.Ellipsis,
-                                style = MaterialTheme.typography.bodyMedium,
-                                fontSize = 22.sp,
-                                modifier = Modifier
-                                    .fillMaxWidth()
-                                    .padding(horizontal = 8.dp)
-                            )
-                        } else {
-                            Text(
-                                text = titleText, color = getUIStyle.titleColor(),
-                                textAlign = TextAlign.Start,
-                                maxLines = 2, overflow = TextOverflow.Ellipsis,
-                                fontSize = 22.sp,
-                                modifier = Modifier
-                                    .fillMaxWidth()
-                                    .padding(horizontal = 10.dp)
-                            )
-                        }
-                    },
+                    title = { Title(titleText, getUIStyle, type, cr.name, helpForNotation) },
                     navigationIcon = {
                         if (isSelecting) {
-                            IconButton(onClick = {
-                                navViewModel.resetSelection()
+                            IconButton(onClick = { navViewModel.resetSelection() }) {
+                                ci.ContentIcon(Icons.Filled.Clear)
                             }
-                            ) { Icon(Icons.Filled.Clear, contentDescription = null) }
                         } else {
                             IconButton(
                                 onClick = { coroutineScope.launch { drawerState.open() } }
-                            ) { Icon(Icons.Filled.Menu, contentDescription = null) }
+                            ) { ci.ContentIcon(Icons.Filled.Menu) }
                         }
                     },
                     actions = {
@@ -176,8 +192,23 @@ fun CustomNavigationDrawer(
                 )
             }
         ) { innerPadding ->
-            Box(modifier.padding(innerPadding)) {
+            Box(Modifier.padding(innerPadding)) {
                 content()
+                SymbolDocumentation(
+                    helpForNotation, getUIStyle, scrollState, widthMod
+                        .padding(20.dp)
+                        .verticalScroll(scrollState)
+                        .border(
+                            width = 2.dp,
+                            shape = RoundedCornerShape(18.dp),
+                            color = if (getUIStyle.getIsDarkTheme()) Color.Gray else Color.Black
+
+                        )
+                        .background(
+                            color = getUIStyle.dialogColor(), shape = RoundedCornerShape(18.dp)
+                        )
+                        .padding(10.dp)
+                )
             }
             if (isBlocking) {
                 // A semi-transparent layer that consumes every pointer event
@@ -204,6 +235,89 @@ fun CustomNavigationDrawer(
     }
 }
 
+@Composable
+private fun Title(
+    titleText: String, getUIStyle: GetUIStyle, type: String, cr: String,
+    helpForNotation: MutableState<Boolean>,
+) {
+    when (cr) {
+        ExportSBDestination.route -> {
+            Text(
+                text = titleText,
+                color =
+                    if (getUIStyle.getIsCuteTheme()) getUIStyle.defaultIconColor()
+                    else getUIStyle.iconColor(),
+                textAlign = TextAlign.End,
+                maxLines = 2, overflow = TextOverflow.Ellipsis,
+                style = MaterialTheme.typography.bodyMedium,
+                fontSize = 22.sp,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 8.dp)
+            )
+        }
+
+        AddCardDestination.route -> {
+            CardType(titleText, getUIStyle, type, helpForNotation)
+        }
+
+        else -> {
+            Text(
+                text = titleText,
+                color =
+                    if (getUIStyle.getIsCuteTheme()) getUIStyle.defaultIconColor()
+                    else getUIStyle.iconColor(),
+                textAlign = TextAlign.Start,
+                maxLines = 2, overflow = TextOverflow.Ellipsis,
+                fontSize = 22.sp,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 10.dp)
+            )
+        }
+    }
+}
+
+@Composable
+private fun CardType(
+    titleText: String, getUIStyle: GetUIStyle, type: String, helpForNotation: MutableState<Boolean>
+) {
+    Row(
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.Bottom
+    ) {
+        Text(
+            text = titleText,
+            fontSize = 22.sp,
+            textAlign = TextAlign.Start,
+            color =
+                if (getUIStyle.getIsCuteTheme()) getUIStyle.defaultIconColor()
+                else getUIStyle.iconColor(),
+            fontWeight = FontWeight.SemiBold,
+            modifier =
+                if (type == Type.NOTATION) {
+                    Modifier.padding(horizontal = 4.dp)
+                } else {
+                    Modifier
+                }
+        )
+        if (type == Type.NOTATION) {
+            Text(
+                text = "?", fontSize = 22.sp,
+                textAlign = TextAlign.Right,
+                color =
+                    if (getUIStyle.getIsCuteTheme()) getUIStyle.defaultIconColor()
+                    else getUIStyle.iconColor(),
+                fontWeight = FontWeight.SemiBold,
+                fontFamily = FontFamily.Cursive,
+                modifier = Modifier
+                    .padding(horizontal = 8.dp)
+                    .clickable { helpForNotation.value = true }
+            )
+
+        }
+    }
+}
 
 fun launchHome(
     coroutineScope: CoroutineScope,
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/drawer/ModalContent.kt b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/drawer/ModalContent.kt
index 277ffe1..f7585e6 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/drawer/ModalContent.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/drawer/ModalContent.kt
@@ -15,6 +15,7 @@ import androidx.compose.material.icons.filled.AccountCircle
 import androidx.compose.material.icons.filled.Home
 import androidx.compose.material.icons.filled.Settings
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
@@ -35,8 +36,8 @@ import com.belmontCrest.cardCrafter.model.paddingForModal
 import com.belmontCrest.cardCrafter.model.returnFontSizeBasedOnDp
 import com.belmontCrest.cardCrafter.model.toTextProp
 import com.belmontCrest.cardCrafter.model.ui.Fields
-import com.belmontCrest.cardCrafter.model.ui.StringVar
-import com.belmontCrest.cardCrafter.model.ui.WhichDeck
+import com.belmontCrest.cardCrafter.model.ui.states.StringVar
+import com.belmontCrest.cardCrafter.model.ui.states.WhichDeck
 import com.belmontCrest.cardCrafter.navigation.destinations.AddCardDestination
 import com.belmontCrest.cardCrafter.navigation.destinations.EditingCardDestination
 import com.belmontCrest.cardCrafter.navigation.destinations.UserEDDestination
@@ -82,7 +83,7 @@ class ModalContent(
             })
         {
             CustomText(text = "Home", getUIStyle, props = FSProp.Default.toTextProp(fontSize))
-            ci.ContentIcon("Home", Icons.Filled.Home, mdModifier)
+            ci.ContentIcon(Icons.Filled.Home, "Home", mdModifier)
         }
     }
 
@@ -97,8 +98,8 @@ class ModalContent(
         }) {
             CustomText("Exported Decks", getUIStyle, props = FSProp.Default.toTextProp(fontSize))
             ci.ContentIcon(
-                "Rounded Playing Cards", painterResource(R.drawable.rounded_playing_cards),
-                mdModifier
+                painterResource(R.drawable.rounded_playing_cards),
+                "Rounded Playing Cards", mdModifier
             )
         }
     }
@@ -116,7 +117,7 @@ class ModalContent(
         )
         {
             CustomText("Settings", getUIStyle, props = FSProp.Default.toTextProp(fontSize))
-            ci.ContentIcon("Main Settings", Icons.Default.Settings, mdModifier)
+            ci.ContentIcon(Icons.Default.Settings, "Main Settings", mdModifier)
         }
     }
 
@@ -141,7 +142,7 @@ class ModalContent(
             }
         ) {
             CustomText("User Profile", getUIStyle, props = FSProp.Default.toTextProp(fontSize))
-            ci.ContentIcon("User Profile", Icons.Default.AccountCircle, mdModifier)
+            ci.ContentIcon(Icons.Default.AccountCircle, "User Profile", mdModifier)
         }
     }
 
@@ -185,6 +186,7 @@ fun CustomRow(
 ) {
     Row(
         horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically,
         modifier = Modifier
             .fillMaxWidth()
             .clickable { onClick() }
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/navHosts/DeckNavHost.kt b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/navHosts/DeckNavHost.kt
index 667b136..b9bc4cc 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/navHosts/DeckNavHost.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/navHosts/DeckNavHost.kt
@@ -29,6 +29,8 @@ import com.belmontCrest.cardCrafter.navigation.destinations.ViewDueCardsDestinat
 import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.CardDeckViewModel
 import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.EditingCardListViewModel
 import com.belmontCrest.cardCrafter.controller.viewModels.deckViewsModels.updateCurrentTime
+import com.belmontCrest.cardCrafter.model.application.PreferencesManager
+import com.belmontCrest.cardCrafter.model.application.setPreferenceValues
 import com.belmontCrest.cardCrafter.model.ui.Fields
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 import com.belmontCrest.cardCrafter.views.cardViews.addCardViews.AddCardView
@@ -45,20 +47,22 @@ import kotlinx.coroutines.launch
 fun DeckNavHost(
     navController: NavHostController, cardDeckVM: CardDeckViewModel,
     fields: Fields, onDeckView: Boolean, navViewModel: NavViewModel,
-    getUIStyle: GetUIStyle, editingCardListVM: EditingCardListViewModel
+    getUIStyle: GetUIStyle, editingCardListVM: EditingCardListViewModel,
+    preferences: PreferencesManager
 ) {
     val deckNavController = rememberNavController()
     val listState = rememberLazyListState()
+    val pc = setPreferenceValues(preferences)
     val startingDeckRoute by navViewModel.startingDeckRoute.collectAsStateWithLifecycle()
     val deckView = DeckView(
         fields, getUIStyle,
     )
-    val addCardView = AddCardView(fields, getUIStyle, navViewModel)
+    val addCardView = AddCardView(getUIStyle, pc, navViewModel)
     val cardDeckView = CardDeckView(
         cardDeckVM, getUIStyle, fields
     )
     val editDeckView = EditDeckView(fields, getUIStyle)
-    val editingCardView = EditingCardView(getUIStyle, navViewModel)
+    val editingCardView = EditingCardView(getUIStyle, pc)
     val editCardsList =
         EditCardsList(
             editingCardListVM,
@@ -79,6 +83,7 @@ fun DeckNavHost(
 
     val wd by navViewModel.wd.collectAsStateWithLifecycle()
     val sc by navViewModel.card.collectAsStateWithLifecycle()
+    val showKB by navViewModel.showKatexKeyboard.collectAsStateWithLifecycle()
 
     NavHost(
         navController = deckNavController,
@@ -139,14 +144,17 @@ fun DeckNavHost(
             )
         ) {
             BackHandler {
-                fields.inDeckClicked.value = false
-                fields.resetFields()
-                navViewModel.resetKeyboardStuff()
-                navViewModel.updateRoute(DeckViewDestination.route)
-                deckNavController.popBackStack(
-                    DeckViewDestination.route,
-                    inclusive = false
-                )
+                if (showKB) {
+                    navViewModel.toggleKeyboard(); navViewModel.resetOffset()
+                } else {
+                    fields.inDeckClicked.value = false
+                    navViewModel.resetKeyboardStuff()
+                    navViewModel.updateRoute(DeckViewDestination.route)
+                    deckNavController.popBackStack(
+                        DeckViewDestination.route,
+                        inclusive = false
+                    )
+                }
             }
 
             wd.deck?.let {
@@ -178,10 +186,7 @@ fun DeckNavHost(
                      *  or the user finished the deck.
                      */
                     coroutineScope.launch(Dispatchers.IO) {
-                        updateDecksCardList(
-                            it,
-                            cardDeckVM
-                        )
+                        updateDecksCardList(it, cardDeckVM)
                     }
 
                 }
@@ -201,8 +206,7 @@ fun DeckNavHost(
                 cardDeckVM.updateWhichDeck(0)
                 updateCurrentTime()
                 deckNavController.popBackStack(
-                    DeckViewDestination.route,
-                    inclusive = false
+                    DeckViewDestination.route, inclusive = false
                 )
             }
             wd.deck?.let {
@@ -241,31 +245,33 @@ fun DeckNavHost(
                 editCardsList.ViewFlashCards(
                     navVM = navViewModel,
                     goToEditCard = { cardId ->
-                        fields.resetFields()
                         coroutineScope.launch { navViewModel.getCardById(cardId) }
                         navViewModel.updateRoute(EditingCardDestination.route)
-                        deckNavController.navigate(EditingCardDestination.route)
+                        deckNavController.navigate(EditingCardDestination.createRoute(cardId))
                     }
                 )
             }
         }
         composable(
-            route = EditingCardDestination.route
+            route = EditingCardDestination.route,
+            arguments = listOf(navArgument("card_id") { type = NavType.IntType })
         ) { backStackEntry ->
             BackHandler {
-                fields.navigateToCardList()
-                navViewModel.resetCard()
-                navViewModel.resetKeyboardStuff()
-                navViewModel.updateRoute(ViewAllCardsDestination.route)
-                deckNavController.popBackStack(
-                    ViewAllCardsDestination.route,
-                    inclusive = false
-                )
+                if (showKB) {
+                    navViewModel.toggleKeyboard(); navViewModel.resetOffset()
+                } else {
+                    fields.navigateToCardList()
+                    navViewModel.resetCard()
+                    navViewModel.resetKeyboardStuff()
+                    navViewModel.updateRoute(ViewAllCardsDestination.route)
+                    deckNavController.popBackStack(
+                        ViewAllCardsDestination.route, inclusive = false
+                    )
+                }
             }
             sc.ct?.let {
                 editingCardView.EditFlashCardView(
-                    ct = it,
-                    fields = fields,
+                    ct = it, newType = navViewModel.type.collectAsStateWithLifecycle().value,
                     onNavigateBack = {
                         navViewModel.resetKeyboardStuff()
                         fields.navigateToCardList()
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/navHosts/MainNavHost.kt b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/navHosts/MainNavHost.kt
index e6f24cd..60724c7 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/navHosts/MainNavHost.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/navHosts/MainNavHost.kt
@@ -39,7 +39,8 @@ import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.Editin
 import com.belmontCrest.cardCrafter.controller.viewModels.deckViewsModels.MainViewModel
 import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.CardDeckViewModel
 import com.belmontCrest.cardCrafter.model.ui.Fields
-import com.belmontCrest.cardCrafter.model.ui.PreferencesManager
+import com.belmontCrest.cardCrafter.model.application.PreferencesManager
+import com.belmontCrest.cardCrafter.model.application.setPreferenceValues
 import com.belmontCrest.cardCrafter.supabase.controller.viewModels.SupabaseViewModel
 import com.belmontCrest.cardCrafter.uiFunctions.showToastMessage
 import com.belmontCrest.cardCrafter.ui.theme.ColorSchemeClass
@@ -65,13 +66,9 @@ fun AppNavHost(
     val colorScheme = remember { ColorSchemeClass() }
     var onDeckView by remember { mutableStateOf(false) }
     colorScheme.colorScheme = MaterialTheme.colorScheme
+    val pc = setPreferenceValues(preferences)
     val getUIStyle = rememberUpdatedState(
-        GetUIStyle(
-            colorScheme,
-            preferences.darkTheme.value,
-            preferences.customScheme.value,
-            preferences.cuteTheme.value
-        )
+        GetUIStyle(colorScheme, pc.darkTheme, pc.dynamicTheme, pc.cuteTheme)
     ).value
     val mainView = MainView(getUIStyle, fields)
     val addDeckView = AddDeckView(getUIStyle)
@@ -187,15 +184,15 @@ fun AppNavHost(
                         navViewModel.updateRoute(DeckListDestination.route)
                         mainNavController.navigate(DeckListDestination.route)
                     },
-                    reviewAmount = preferences.reviewAmount.intValue.toString(),
-                    cardAmount = preferences.cardAmount.intValue.toString()
+                    reviewAmount = pc.reviewAmount.toString(),
+                    cardAmount = pc.cardAmount.toString()
                 )
             }
             /** Our Deck Nav Controller to call*/
             composable(DeckNavDestination.route) {
                 DeckNavHost(
                     mainNavController, cardDeckVM, fields, onDeckView,
-                    navViewModel, getUIStyle, editingCardListVM,
+                    navViewModel, getUIStyle, editingCardListVM, preferences
                 )
             }
         }
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/navHosts/SBNavHost.kt b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/navHosts/SBNavHost.kt
index cd6898e..2e86cd7 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/navigation/navHosts/SBNavHost.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/navigation/navHosts/SBNavHost.kt
@@ -29,7 +29,8 @@ import com.belmontCrest.cardCrafter.navigation.destinations.UserProfileDestinati
 import com.belmontCrest.cardCrafter.controller.viewModels.deckViewsModels.MainViewModel
 import com.belmontCrest.cardCrafter.controller.viewModels.deckViewsModels.updateCurrentTime
 import com.belmontCrest.cardCrafter.model.ui.Fields
-import com.belmontCrest.cardCrafter.model.ui.PreferencesManager
+import com.belmontCrest.cardCrafter.model.application.PreferencesManager
+import com.belmontCrest.cardCrafter.model.application.setPreferenceValues
 import com.belmontCrest.cardCrafter.navigation.destinations.CoOwnerRequestsDestination
 import com.belmontCrest.cardCrafter.navigation.destinations.ForgotPasswordDestination
 import com.belmontCrest.cardCrafter.navigation.destinations.SBCardListDestination
@@ -64,9 +65,11 @@ fun SupabaseNav(
 
     LaunchedEffect(Unit) { supabaseVM.signInSyncedDBUser() }
     LaunchedEffect(Unit) { navViewModel.updateSBNav(sbNavController) }
+    val pc = setPreferenceValues(preferences)
+
     /** Our Supabase Client and Views. */
     val onlineDatabase = OnlineDatabase(getUIStyle, supabaseVM)
-    val importDeck = ImportDeck(getUIStyle, preferences)
+    val importDeck = ImportDeck(getUIStyle, pc)
     val sbDeck by supabaseVM.deck.collectAsStateWithLifecycle()
     val pickedDeck by supabaseVM.pickedDeck.collectAsStateWithLifecycle()
     val coroutineScope = rememberCoroutineScope()
@@ -80,7 +83,7 @@ fun SupabaseNav(
         UserEDDestination.route
     }
     val uEDVM: UserExportedDecksViewModel = viewModel(factory = AppViewModelProvider.Factory)
-    val clv = CardListView(uEDVM, getUIStyle, preferences)
+    val clv = CardListView(uEDVM, getUIStyle, pc)
     NavHost(
         navController = sbNavController,
         startDestination = startDestination,
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/supabase/controller/viewModels/ImportDeckViewModel.kt b/app/src/main/java/com/belmontCrest/cardCrafter/supabase/controller/viewModels/ImportDeckViewModel.kt
index c216b79..1859317 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/supabase/controller/viewModels/ImportDeckViewModel.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/supabase/controller/viewModels/ImportDeckViewModel.kt
@@ -6,7 +6,7 @@ import androidx.lifecycle.viewModelScope
 import com.belmontCrest.cardCrafter.controller.viewModels.deckViewsModels.checkIfDeckExists
 import com.belmontCrest.cardCrafter.controller.viewModels.deckViewsModels.checkIfDeckUUIDExists
 import com.belmontCrest.cardCrafter.localDatabase.dbInterface.repositories.FlashCardRepository
-import com.belmontCrest.cardCrafter.model.ui.PreferencesManager
+import com.belmontCrest.cardCrafter.model.application.PreferenceValues
 import com.belmontCrest.cardCrafter.supabase.controller.converters.cardColsCTToSBCT
 import com.belmontCrest.cardCrafter.supabase.model.ReturnValues.BASIC_CT_ERROR
 import com.belmontCrest.cardCrafter.supabase.model.ReturnValues.CANCELLED
@@ -101,7 +101,7 @@ class ImportDeckViewModel(
     /** Local Imports from online decks */
     suspend fun importDeck(
         sbDeckDto: SBDeckDto,
-        preferences: PreferencesManager,
+        preferences: PreferenceValues,
         onProgress: (Float) -> Unit,
         onError: (String) -> Unit
     ): Int {
@@ -121,8 +121,8 @@ class ImportDeckViewModel(
                 }
                 supabaseToRoomRepository.insertDeckList(
                     sbDeckDto, cardObject.cardList, sbDeckDto.name,
-                    preferences.reviewAmount.intValue,
-                    preferences.cardAmount.intValue,
+                    preferences.reviewAmount,
+                    preferences.cardAmount,
                     onProgress = {
                         onProgress(it)
                     }, cardObject.total
@@ -138,7 +138,7 @@ class ImportDeckViewModel(
 
     suspend fun createNewDeck(
         sbDeckDto: SBDeckDto,
-        preferences: PreferencesManager,
+        preferences: PreferenceValues,
         name: String, onProgress: (Float) -> Unit,
         onError: (String) -> Unit
     ): Int {
@@ -164,8 +164,8 @@ class ImportDeckViewModel(
                 }
                 supabaseToRoomRepository.insertDeckList(
                     sbDeckDto, cardObject.cardList, name,
-                    preferences.reviewAmount.intValue,
-                    preferences.cardAmount.intValue,
+                    preferences.reviewAmount,
+                    preferences.cardAmount,
                     onProgress = {
                         onProgress(it)
                     }, cardObject.total
@@ -181,7 +181,7 @@ class ImportDeckViewModel(
 
     suspend fun replaceDeck(
         sbDeckDto: SBDeckDto,
-        preferences: PreferencesManager,
+        preferences: PreferenceValues,
         onProgress: (Float) -> Unit,
         onError: (String) -> Unit
     ): Pair<Int, String> {
@@ -216,8 +216,8 @@ class ImportDeckViewModel(
                 }
                 supabaseToRoomRepository.replaceDeckList(
                     sbDeckDto, cardObject.cardList,
-                    preferences.reviewAmount.intValue,
-                    preferences.cardAmount.intValue, name,
+                    preferences.reviewAmount,
+                    preferences.cardAmount, name,
                     onProgress = {
                         onProgress(it)
                     }, cardObject.total
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/supabase/controller/viewModels/SupabaseViewModel.kt b/app/src/main/java/com/belmontCrest/cardCrafter/supabase/controller/viewModels/SupabaseViewModel.kt
index e322dbc..708ab90 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/supabase/controller/viewModels/SupabaseViewModel.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/supabase/controller/viewModels/SupabaseViewModel.kt
@@ -10,7 +10,7 @@ import com.belmontCrest.cardCrafter.controller.cardHandlers.toCard
 import com.belmontCrest.cardCrafter.localDatabase.tables.CT
 import com.belmontCrest.cardCrafter.localDatabase.tables.Deck
 import com.belmontCrest.cardCrafter.localDatabase.tables.ImportedDeckInfo
-import com.belmontCrest.cardCrafter.model.ui.SealedAllCTs
+import com.belmontCrest.cardCrafter.model.ui.states.SealedAllCTs
 import com.belmontCrest.cardCrafter.supabase.controller.networkConnectivityFlow
 import com.belmontCrest.cardCrafter.supabase.model.tables.FourSelectedCards
 import com.belmontCrest.cardCrafter.supabase.model.ReturnValues.NULL_CARDS
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/supabase/view/importDeck/ImportDeck.kt b/app/src/main/java/com/belmontCrest/cardCrafter/supabase/view/importDeck/ImportDeck.kt
index 8563b4c..3d06d6a 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/supabase/view/importDeck/ImportDeck.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/supabase/view/importDeck/ImportDeck.kt
@@ -38,7 +38,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.belmontCrest.cardCrafter.R
-import com.belmontCrest.cardCrafter.model.ui.PreferencesManager
+import com.belmontCrest.cardCrafter.model.application.PreferenceValues
 import com.belmontCrest.cardCrafter.supabase.controller.viewModels.ImportDeckViewModel
 import com.belmontCrest.cardCrafter.supabase.model.ReturnValues
 import com.belmontCrest.cardCrafter.supabase.model.ReturnValues.EMPTY_STRING
@@ -57,7 +57,7 @@ import kotlinx.coroutines.launch
 
 @RequiresApi(Build.VERSION_CODES.Q)
 class ImportDeck(
-    private val getUIStyle: GetUIStyle, private val preferences: PreferencesManager
+    private val getUIStyle: GetUIStyle, private val preferences: PreferenceValues
 ) {
     @Composable
     fun GetDeck(deck: SBDeckDto, onNavigate: () -> Unit, importDeckVM: ImportDeckViewModel) {
@@ -175,11 +175,8 @@ class ImportDeck(
                         .border(
                             width = 4.dp,
                             shape = RoundedCornerShape(18.dp),
-                            color = if (getUIStyle.getIsDarkTheme() == true) {
-                                Color.Gray
-                            } else {
-                                Color.Black
-                            }
+                            color = if (getUIStyle.getIsDarkTheme()) Color.Gray else Color.Black
+
                         )
                         .background(
                             color = getUIStyle.dialogColor(), shape = RoundedCornerShape(18.dp)
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/supabase/view/profile/CardListView.kt b/app/src/main/java/com/belmontCrest/cardCrafter/supabase/view/profile/CardListView.kt
index 4e4ffa4..7a85832 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/supabase/view/profile/CardListView.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/supabase/view/profile/CardListView.kt
@@ -34,9 +34,9 @@ import com.belmontCrest.cardCrafter.model.FWProp
 import com.belmontCrest.cardCrafter.model.TAProp
 import com.belmontCrest.cardCrafter.model.TextProps
 import com.belmontCrest.cardCrafter.model.Type
+import com.belmontCrest.cardCrafter.model.application.PreferenceValues
 import com.belmontCrest.cardCrafter.model.cardListTextProp
 import com.belmontCrest.cardCrafter.model.toTextProp
-import com.belmontCrest.cardCrafter.model.ui.PreferencesManager
 import com.belmontCrest.cardCrafter.supabase.controller.viewModels.UserExportedDecksViewModel
 import com.belmontCrest.cardCrafter.supabase.model.ReturnValues.SUCCESS
 import com.belmontCrest.cardCrafter.supabase.model.tables.CoOwnerWithUsername
@@ -59,7 +59,7 @@ import kotlinx.coroutines.launch
 class CardListView(
     private val uEDVM: UserExportedDecksViewModel,
     private val getUIStyle: GetUIStyle,
-    private val preferences: PreferencesManager
+    private val preferences: PreferenceValues
 ) {
     @Composable
     fun AllCards() {
@@ -137,7 +137,7 @@ class CardListView(
                 coroutineScope.launch {
                     enabled = false
                     val result = uEDVM.mergeRemoteWithLocal(
-                        preferences.reviewAmount.intValue, preferences.cardAmount.intValue
+                        preferences.reviewAmount, preferences.cardAmount
                     ) { progress = it }
 
                     if (result != SUCCESS) {
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/ui/theme/GetUIStyle.kt b/app/src/main/java/com/belmontCrest/cardCrafter/ui/theme/GetUIStyle.kt
index d67aa5a..b2f3d0c 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/ui/theme/GetUIStyle.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/ui/theme/GetUIStyle.kt
@@ -25,6 +25,12 @@ class GetUIStyle(
     /** if (!isDarkTheme && isCuteTheme) return true */
     private fun ifNotDarkAndCute(): Boolean = !isDarkTheme && isCuteTheme
 
+    /** if (isDarkTheme && isDynamicTheme) return true */
+    private fun ifDarkAndDynamic(): Boolean = isDarkTheme && isDynamicTheme
+
+    /** if (!isDarkTheme && isDynamicTheme) return true */
+    private fun ifNotDarkAndDynamic(): Boolean = !isDarkTheme && isDynamicTheme
+
     fun getColorScheme(): ColorScheme = cS.colorScheme
 
     fun buttonColor(): Color = cS.colorScheme.primaryContainer
@@ -42,9 +48,9 @@ class GetUIStyle(
 
     fun buttonTextColor(): Color = cS.colorScheme.onSecondaryContainer
 
+    /** Text Title color (colorScheme.onBackground) */
     fun titleColor(): Color = cS.colorScheme.onBackground
 
-
     fun disabledTextColor(): Color = if (isDarkTheme) darkDisabled else lightDisabled
 
     fun tertiaryButtonColor(): Color = cS.colorScheme.tertiaryContainer
@@ -52,29 +58,12 @@ class GetUIStyle(
     fun onTertiaryButtonColor(): Color = cS.colorScheme.onTertiaryContainer
 
     fun choiceColor(): Color = when {
-        isDarkTheme -> {
-            if (isDynamicTheme) {
-                blendColors(cS.colorScheme.onTertiary, darkChoiceColor, 0.25f)
-            } else {
-                if (isCuteTheme) {
-                    darkCuteChoiceColor
-                } else {
-                    darkChoiceColor
-                }
-            }
-        }
-
-        else -> {
-            if (isDynamicTheme) {
-                blendColors(cS.colorScheme.onTertiary, choiceColor, 0.25f)
-            } else {
-                if (isCuteTheme) {
-                    cuteChoiceColor
-                } else {
-                    choiceColor
-                }
-            }
-        }
+        ifDarkAndDynamic() -> blendColors(cS.colorScheme.onTertiary, darkChoiceColor, 0.25f)
+        ifDarkAndCute() -> darkCuteChoiceColor
+        ifDarkAndNotCute() -> darkChoiceColor
+        ifNotDarkAndDynamic() -> blendColors(cS.colorScheme.onTertiary, choiceColor, 0.25f)
+        ifNotDarkAndCute() -> cuteChoiceColor
+        else -> choiceColor
     }
 
     fun pickedChoice(): Color = when {
@@ -91,59 +80,29 @@ class GetUIStyle(
         else -> correctChoice
     }
 
-
     fun onCorrectChoice(): Color = when {
         ifDarkAndCute() -> onDarkCuteCorrectChoice
         ifNotDarkAndCute() -> onCuteCorrectChoice
         else -> cS.colorScheme.onSurfaceVariant
     }
 
-    fun isThemeOn(): Color = if (isDarkTheme) {
-        Color.White
-    } else {
-        darkBackground
-    }
+    fun isThemeOn(): Color = if (isDarkTheme) Color.White else darkBackground
 
     fun altBackground(): Color = when {
-        isDarkTheme -> {
-            if (isCuteTheme) {
-                darkCuteSecondaryBC
-            } else {
-                secondaryDBC
-            }
-        }
-
-        else -> {
-            if (isCuteTheme) {
-                cuteSecondaryBC
-            } else {
-                secondaryBC
-            }
-        }
+        ifDarkAndCute() -> darkCuteSecondaryBC
+        ifDarkAndNotCute() -> secondaryDBC
+        ifNotDarkAndCute() -> cuteSecondaryBC
+        else -> secondaryBC
     }
 
     fun background(): Color = cS.colorScheme.background
 
     fun navBarColor(): Color = when {
-        isDarkTheme -> {
-            if (!isDynamicTheme) {
-                if (isCuteTheme) {
-                    darkCuteButton
-                } else {
-                    darkNavBar
-                }
-            } else {
-                cS.colorScheme.primaryContainer
-            }
-        }
-
-        else -> {
-            if (isCuteTheme && !isDynamicTheme) {
-                cuteButton
-            } else {
-                cS.colorScheme.primaryContainer
-            }
-        }
+        ifDarkAndDynamic() -> cS.colorScheme.primaryContainer
+        ifDarkAndCute() -> darkCuteButton
+        ifDarkAndNotCute() -> darkNavBar
+        ifNotDarkAndCute() -> cuteButton
+        else -> cS.colorScheme.primaryContainer
     }
 
     fun dialogColor(): Color = when {
@@ -154,43 +113,67 @@ class GetUIStyle(
     }
 
     fun importingDeckColor(): Color = when {
-        isDarkTheme -> {
-            if (isCuteTheme) {
-                Color(100, 40, 80)
-            } else {
-                Color.DarkGray
-            }
-        }
-
-        else -> {
-            if (isCuteTheme) {
-                Color(255, 192, 203, 180)
-            } else {
-                Color.Gray
-            }
-        }
+        ifDarkAndCute() -> Color(100, 40, 80)
+        ifDarkAndNotCute() -> Color.DarkGray
+        ifNotDarkAndCute() -> Color(255, 192, 203, 180)
+        else -> Color.Gray
     }
 
-    fun defaultIconColor(): Color = if (isDarkTheme) {
-        Color.White
-    } else {
-        Color.Black
-    }
+    fun defaultIconColor(): Color = if (isDarkTheme) Color.White else Color.Black
 
     fun katexMenuBGColor(): Color = when {
+        ifDarkAndDynamic() -> {
+            val red = cS.colorScheme.onTertiary.red
+            val blue = cS.colorScheme.onTertiary.blue
+            val green = cS.colorScheme.onTertiary.green
+            val color = Color(red, blue, green, 0.8509803922f)
+            blendColors(darkSTBG, color, 0.9f)
+        }
+
         ifDarkAndCute() -> darkCuteSTBG
         ifDarkAndNotCute() -> darkSTBG
+        ifNotDarkAndDynamic() -> {
+            val red = cS.colorScheme.onTertiary.red
+            val blue = cS.colorScheme.onTertiary.blue
+            val green = cS.colorScheme.onTertiary.green
+            val color = Color(red, blue, green, 0.8509803922f)
+            blendColors(semiTransBG, color, 0.9f)
+        }
+
         ifNotDarkAndCute() -> cuteSTBG
         else -> semiTransBG
     }
 
     fun katexMenuHeaderColor(): Color = when {
+        ifDarkAndDynamic() -> {
+            val red = cS.colorScheme.primaryContainer.red
+            val blue = cS.colorScheme.primaryContainer.blue
+            val green = cS.colorScheme.primaryContainer.green
+            val color = Color(red, blue, green, 0.8509803922f)
+            blendColors(darkSTHeader, color, 0.25f)
+        }
+
         ifDarkAndCute() -> darkCuteSTHeader
         ifDarkAndNotCute() -> darkSTHeader
+        ifNotDarkAndDynamic() -> {
+            val red = cS.colorScheme.primaryContainer.red
+            val blue = cS.colorScheme.primaryContainer.blue
+            val green = cS.colorScheme.primaryContainer.green
+            val color = Color(red, blue, green, 0.8509803922f)
+            blendColors(semiTransHeader, color, 0.25f)
+        }
+
         ifNotDarkAndCute() -> cuteSTHeader
         else -> semiTransHeader
     }
 
+    fun redColor(): Color = when {
+        ifDarkAndCute() -> Color(115, 66, 66, 255)
+        ifDarkAndNotCute() -> Color(157, 2, 2, 255)
+        ifNotDarkAndCute() -> Color(112, 1, 1, 255)
+        else -> Color.Red
+    }
+
     fun blendColors(base: Color, overlay: Color, overlayAlpha: Float): Color {
         // overlayAlpha in [0..1]
         val r = overlay.red * overlayAlpha + base.red * (1 - overlayAlpha)
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/ContentIcons.kt b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/ContentIcons.kt
index 71f9f34..59a4f30 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/ContentIcons.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/ContentIcons.kt
@@ -1,16 +1,22 @@
 package com.belmontCrest.cardCrafter.uiFunctions
 
+import android.annotation.SuppressLint
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Delete
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.unit.dp
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 
+@SuppressLint("ModifierParameter")
 class ContentIcons(private val getUIStyle: GetUIStyle) {
     @Composable
-    fun ContentIcon(cd: String, icon: ImageVector, modifier: Modifier) {
+    fun ContentIcon(icon: ImageVector, cd: String? = null, modifier: Modifier = Modifier) {
         Icon(
             imageVector = icon,
             modifier = modifier,
@@ -23,8 +29,8 @@ class ContentIcons(private val getUIStyle: GetUIStyle) {
         )
     }
 
-   @Composable
-    fun ContentIcon(cd: String, icon: Painter, modifier: Modifier) {
+    @Composable
+    fun ContentIcon(icon: Painter, cd: String? = null, modifier: Modifier = Modifier) {
         Icon(
             painter = icon,
             modifier = modifier,
@@ -36,8 +42,9 @@ class ContentIcons(private val getUIStyle: GetUIStyle) {
             }
         )
     }
+
     @Composable
-    fun ContentIcon(cd: String, icon: Painter, modifier: Modifier, tint : Color) {
+    fun ContentIcon(icon: Painter, cd: String, modifier: Modifier, tint: Color) {
         Icon(
             painter = icon,
             modifier = modifier,
@@ -45,4 +52,15 @@ class ContentIcons(private val getUIStyle: GetUIStyle) {
             tint = tint
         )
     }
+
+    @Composable
+    fun DeleteIcon() {
+        Icon(
+            imageVector = Icons.Filled.Delete,
+            modifier = Modifier
+                .size(28.dp),
+            contentDescription = "Delete icon",
+            tint = getUIStyle.redColor()
+        )
+    }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/CustomText.kt b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/CustomText.kt
index 8124eea..feb68f7 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/CustomText.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/CustomText.kt
@@ -4,6 +4,7 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.style.TextOverflow
 import com.belmontCrest.cardCrafter.model.TextProps
 import com.belmontCrest.cardCrafter.model.setFontSize
@@ -11,41 +12,46 @@ import com.belmontCrest.cardCrafter.model.setFontWeight
 import com.belmontCrest.cardCrafter.model.setMaxLines
 import com.belmontCrest.cardCrafter.model.setTextAlign
 import com.belmontCrest.cardCrafter.model.setTextColor
+import com.belmontCrest.cardCrafter.model.setTextStyle
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 
 @Composable
 fun CustomText(
     text: String, getUIStyle: GetUIStyle, modifier: Modifier = Modifier,
-    props: TextProps = TextProps()
+    props: TextProps = TextProps(), fontStyle: FontStyle? = null
 ) {
     val fontWeight = setFontWeight(props.fw)
     val fontSize = setFontSize(props.fs)
     val textAlign = setTextAlign(props.ta)
     val maxLines = setMaxLines(props.ml)
     val textColor = setTextColor(props.tc, getUIStyle)
+    val style = setTextStyle(props.ts)
     Text(
         text = text, color = textColor,
         textAlign = textAlign, modifier = modifier,
         fontSize = fontSize, fontWeight = fontWeight,
-        maxLines = maxLines, overflow = TextOverflow.Ellipsis
+        maxLines = maxLines, overflow = TextOverflow.Ellipsis,
+        style = style, fontStyle = fontStyle
     )
 }
 
 @Composable
 fun CustomText(
     text: AnnotatedString, getUIStyle: GetUIStyle, modifier: Modifier = Modifier,
-    props: TextProps = TextProps()
+    props: TextProps = TextProps(), fontStyle: FontStyle? = null
 ) {
     val fontWeight = setFontWeight(props.fw)
     val fontSize = setFontSize(props.fs)
     val textAlign = setTextAlign(props.ta)
     val maxLines = setMaxLines(props.ml)
     val textColor = setTextColor(props.tc, getUIStyle)
+    val style = setTextStyle(props.ts)
 
     Text(
         text = text, color = textColor,
         textAlign = textAlign, modifier = modifier,
         fontSize = fontSize, fontWeight = fontWeight,
-        maxLines = maxLines, overflow = TextOverflow.Ellipsis
+        maxLines = maxLines, overflow = TextOverflow.Ellipsis,
+        style = style, fontStyle = fontStyle
     )
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/IsPartOfQOrA.kt b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/IsPartOfQOrA.kt
index 19bff7e..25dd551 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/IsPartOfQOrA.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/IsPartOfQOrA.kt
@@ -31,15 +31,13 @@ fun IsPartOfQOrA(getUIStyle: GetUIStyle, isQOrA: Boolean, onClick: () -> Unit) {
     ) {
         if (isQOrA) {
             ci.ContentIcon(
-                "Toggle Q or A",
-                painterResource(R.drawable.toggle_on),
+                painterResource(R.drawable.toggle_on), "Toggle Q or A",
                 Modifier.size(30.dp), getUIStyle.defaultIconColor()
             )
             Text("Part of Question")
         } else {
             ci.ContentIcon(
-                "Toggle Q or A",
-                painterResource(R.drawable.toggle_off),
+                painterResource(R.drawable.toggle_off), "Toggle Q or A",
                 Modifier.size(30.dp), getUIStyle.defaultIconColor()
             )
             Text("Part of Answer")
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/KeyboardInputs.kt b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/KeyboardInputs.kt
index 8b54b65..ed66124 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/KeyboardInputs.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/KeyboardInputs.kt
@@ -20,6 +20,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalFocusManager
@@ -35,6 +36,10 @@ import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.unit.sp
 import com.belmontCrest.cardCrafter.R
+import com.belmontCrest.cardCrafter.model.ui.states.MyTextRange
+import com.belmontCrest.cardCrafter.model.ui.states.SelectedKeyboard
+import com.belmontCrest.cardCrafter.model.ui.states.toMyTextRange
+import com.belmontCrest.cardCrafter.model.ui.states.toTextRange
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 import com.belmontCrest.cardCrafter.ui.theme.textColor
 import com.belmontCrest.cardCrafter.uiFunctions.katex.menu.KaTeXMenu
@@ -121,7 +126,6 @@ fun EditTextFieldNonDone(
             onDone = { focusManager.clearFocus() }
         ),
         textStyle = TextStyle.Default
-
     )
 }
 
@@ -130,25 +134,37 @@ fun EditTextFieldNonDone(
  */
 @Composable
 fun LatexKeyboard(
-    value: String, onValueChanged: (String) -> Unit,
-    labelStr: String,
-    modifier: Modifier,
-    kt: KaTeXMenu, onIdle: () -> Unit,
-    focusRequester: FocusRequester,
+    value: String, onValueChanged: (String) -> Unit, labelStr: String,
+    modifier: Modifier, kt: KaTeXMenu, onIdle: () -> Unit,
+    onFocusChanged: () -> Unit, selectedKeyboard: SelectedKeyboard?,
+    actualKeyboard: SelectedKeyboard, composition: MyTextRange?, selection: MyTextRange,
+    onUpdateTR: (MyTextRange, MyTextRange?) -> Unit
 ) {
     val kk = KeyboardInputs.KK
-    var textFieldValue by remember {
+    val focusRequester = remember { FocusRequester() }
+    val isSelected = actualKeyboard == selectedKeyboard
+    var textFieldValue by rememberSaveable(stateSaver = TextFieldValue.Saver) {
         mutableStateOf(
-            TextFieldValue(
-                text = value
-            )
+            TextFieldValue(value, TextRange(value.length), TextRange(value.length))
         )
     }
+
     val context = LocalContext.current
 
+
     if (value.isEmpty()) {
-        textFieldValue = textFieldValue.copy(text = value)
+        textFieldValue = TextFieldValue()
     }
+
+    LaunchedEffect(Unit) {
+        if (composition != null && isSelected) {
+            focusRequester.requestFocus()
+            Log.d(kk, "updating $actualKeyboard textFieldValue: $value, $selection, $composition")
+            textFieldValue =
+                TextFieldValue(value, selection.toTextRange(), composition.toTextRange())
+        }
+    }
+
     LaunchedEffect(kt) {
         val text = textFieldValue.text
         if (!textFieldValue.selection.collapsed) {
@@ -157,8 +173,10 @@ fun LatexKeyboard(
         }
         if (kt.sa is SelectedAnnotation.CursorChange) {
             try {
-                textFieldValue = updateCursor(kt.sa, textFieldValue, text) { onValueChanged(it) }
-            } catch (e : IsInsideException) {
+                val newTF = updateCursor(kt.sa, textFieldValue, text) { onValueChanged(it) }
+                textFieldValue = newTF
+                onUpdateTR(newTF.selection.toMyTextRange(), newTF.composition.toMyTextRange())
+            } catch (e: IsInsideException) {
                 Log.e(kk, "$e")
                 showToastMessage(context, "Cannot put notation inside a notation")
             } finally {
@@ -175,9 +193,11 @@ fun LatexKeyboard(
         }
         if (!kt.notation.isNullOrEmpty()) {
             try {
-                textFieldValue = updateNotation(kt.sa, kt.notation, text, kk, textFieldValue) {
+                val newTF = updateNotation(kt.sa, kt.notation, text, kk, textFieldValue) {
                     onValueChanged(it)
                 }
+                textFieldValue = newTF
+                onUpdateTR(newTF.selection.toMyTextRange(), newTF.composition.toMyTextRange())
             } catch (e: IllegalStateException) {
                 Log.e(kk, "$e")
             } finally {
@@ -185,21 +205,24 @@ fun LatexKeyboard(
             }
         }
     }
+
     TextField(
         value = textFieldValue,
         onValueChange = { newValue ->
-
             val oldText = textFieldValue.text
             val newText = newValue.text
-
             if (newText.length > oldText.length) {
-
                 if (newValue.selection.collapsed) {
-                    val newInputs = katexMapper(newText, newValue, textFieldValue)
-                    textFieldValue = newInputs.first
-                    onValueChanged(newInputs.second)
+                    val (newTF, newText) = katexMapper(newText, newValue, textFieldValue)
+                    textFieldValue = newTF
+                    onUpdateTR(newTF.selection.toMyTextRange(), newTF.selection.toMyTextRange())
+                    onValueChanged(newText)
                 } else {
                     textFieldValue = newValue
+                    onUpdateTR(
+                        newValue.selection.toMyTextRange(),
+                        newValue.selection.toMyTextRange()
+                    )
                     onValueChanged(newText)
                 }
             } else { // User deletes something.
@@ -210,24 +233,31 @@ fun LatexKeyboard(
                     }
                     textFieldValue = TextFieldValue(
                         text = replaced,
-                        selection = TextRange(insertionPoint)
+                        selection = TextRange(insertionPoint),
+                        composition = TextRange(insertionPoint)
                     )
+                    val newTR = TextRange(insertionPoint).toMyTextRange()
+                    onUpdateTR(newTR, newTR)
+
                     onValueChanged(replaced)
                 } else {
                     textFieldValue = newValue
+                    val newTR = newValue.selection.toMyTextRange()
+                    onUpdateTR(newTR, newTR)
                     onValueChanged(newText)
                 }
             }
         }, singleLine = false,
         label = { Text(labelStr, color = textColor) },
-        keyboardOptions = KeyboardOptions(
-            showKeyboardOnFocus = false,
-        ),
+        keyboardOptions = KeyboardOptions(showKeyboardOnFocus = false),
         keyboardActions = KeyboardActions(
-            onDone = { focusRequester.freeFocus() }
+            onDone = { focusRequester.freeFocus() },
         ),
         modifier = modifier
             .focusRequester(focusRequester)
+            .onFocusChanged { focusState ->
+                if (focusState.hasFocus) onFocusChanged()
+            }
             .focusable(), textStyle = TextStyle.Default
     )
 }
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/buttons/Buttons.kt b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/buttons/Buttons.kt
index bd9528d..b6c85ac 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/buttons/Buttons.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/buttons/Buttons.kt
@@ -11,6 +11,7 @@ import androidx.compose.material.icons.filled.Edit
 import androidx.compose.material.icons.filled.MailOutline
 import androidx.compose.material.icons.outlined.Add
 import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonColors
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
@@ -26,6 +27,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.TextUnit
@@ -140,21 +142,14 @@ fun RedoCardButton(
     modifier: Modifier = Modifier,
     getUIStyle: GetUIStyle
 ) {
+    val ci = ContentIcons(getUIStyle)
     IconButton(
         onClick = {
             onRedoClick()
         },
         modifier = modifier
     ) {
-        val ci = ContentIcons(getUIStyle)
-ci.ContentIcon()
-        Icon(
-            painter = painterResource(R.drawable.return_arrow),
-            modifier = Modifier
-                .size(22.dp),
-            contentDescription = "Redo",
-            tint = getUIStyle.iconColor()
-        )
+        ci.ContentIcon(painterResource(R.drawable.return_arrow), "Redo", Modifier.size(22.dp))
     }
 
 }
@@ -182,7 +177,7 @@ fun SettingsButton(
             )
             .padding(6.dp)
     ) {
-        ci.ContentIcon("Settings", Icons.Filled.Edit, Modifier.size(24.dp))
+        ci.ContentIcon(Icons.Filled.Edit, "Settings", Modifier.size(24.dp))
         DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
             DropdownMenuItem(
                 onClick = {
@@ -226,18 +221,19 @@ fun SubmitButton(
     onClick: () -> Unit, enabled: Boolean,
     getUIStyle: GetUIStyle, string: String,
     modifier: Modifier = Modifier, fontSize: TextUnit = TextUnit.Unspecified,
-    innerModifier: Modifier = Modifier
+    innerModifier: Modifier = Modifier, textColor: Color = Color.Unspecified,
+    colors: ButtonColors = ButtonDefaults.buttonColors(
+        containerColor = getUIStyle.secondaryButtonColor(),
+        contentColor = getUIStyle.buttonTextColor()
+    )
 ) {
     Button(
         onClick = {
             onClick()
         }, enabled = enabled,
-        colors = ButtonDefaults.buttonColors(
-            containerColor = getUIStyle.secondaryButtonColor(),
-            contentColor = getUIStyle.buttonTextColor()
-        ), modifier = modifier
+        colors = colors, modifier = modifier
     ) {
-        Text(text = string, fontSize = fontSize, modifier = innerModifier)
+        Text(text = string, fontSize = fontSize, modifier = innerModifier, color = textColor)
     }
 }
 
@@ -247,6 +243,6 @@ fun MailButton(
 ) {
     val ci = ContentIcons(getUIStyle)
     IconButton(onClick = { onClick() }) {
-        ci.ContentIcon("mail", icon = Icons.Default.MailOutline, Modifier)
+        ci.ContentIcon(Icons.Default.MailOutline, "mail", Modifier)
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/buttons/CardOptionsButtons.kt b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/buttons/CardOptionsButtons.kt
index b0b5b15..b553445 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/buttons/CardOptionsButtons.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/buttons/CardOptionsButtons.kt
@@ -9,12 +9,10 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Delete
 import androidx.compose.material.icons.filled.MoreVert
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.HorizontalDivider
-import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -42,29 +40,30 @@ import com.belmontCrest.cardCrafter.controller.onClickActions.DuplicateCards
 import com.belmontCrest.cardCrafter.localDatabase.tables.Card
 import com.belmontCrest.cardCrafter.localDatabase.tables.Deck
 import com.belmontCrest.cardCrafter.model.Type
-import com.belmontCrest.cardCrafter.model.ui.Decision
-import com.belmontCrest.cardCrafter.model.ui.Dialogs
+import com.belmontCrest.cardCrafter.model.ui.states.Decision
+import com.belmontCrest.cardCrafter.model.ui.states.Dialogs
 import com.belmontCrest.cardCrafter.model.ui.Fields
 import com.belmontCrest.cardCrafter.navigation.NavViewModel
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
+import com.belmontCrest.cardCrafter.uiFunctions.ContentIcons
 import kotlinx.coroutines.delay
 
 @Composable
 fun CardOptionsButton(
-    navVM: NavViewModel,
-    getUIStyle: GetUIStyle, card: Card,
-    fields: Fields,
-    expanded: MutableState<Boolean>,
-    modifier: Modifier,
+    navVM: NavViewModel, getUIStyle: GetUIStyle, card: Card,
+    fields: Fields, expanded: MutableState<Boolean>, modifier: Modifier,
     onDelete: () -> Unit,
 ) {
     val coroutineScope = rememberCoroutineScope()
     val showDialog = remember { mutableStateOf(false) }
+    val ci = ContentIcons(getUIStyle)
+    val type by navVM.type.collectAsState()
+
     Row(
         horizontalArrangement = Arrangement.SpaceBetween,
         verticalAlignment = Alignment.CenterVertically
     ) {
-        ToggleKeyBoard(navVM, getUIStyle, fields.newType.value)
+        ToggleKeyBoard(navVM, getUIStyle, type)
         Box(
             modifier = modifier
                 .wrapContentSize(Alignment.TopEnd)
@@ -75,33 +74,17 @@ fun CardOptionsButton(
                     .size(54.dp)
                     .align(Alignment.TopEnd)
             ) {
-                Icon(
-                    Icons.Default.MoreVert,
-                    contentDescription = "Card Type",
-                    tint = getUIStyle.titleColor()
-                )
+                ci.ContentIcon(Icons.Default.MoreVert, "Card Type")
             }
             DropdownMenu(
                 expanded = expanded.value, onDismissRequest = { expanded.value = false }
             ) {
                 CardItems(
-                    toBasic = {
-                        resetKeyboardStuff(navVM, fields.newType.value)
-                        fields.newType.value = Type.BASIC
-                    },
-                    toThree = {
-                        resetKeyboardStuff(navVM, fields.newType.value)
-                        fields.newType.value = Type.THREE
-                    },
-                    toHint = {
-                        resetKeyboardStuff(navVM, fields.newType.value)
-                        fields.newType.value = Type.HINT
-                    },
-                    toMulti = {
-                        resetKeyboardStuff(navVM, fields.newType.value)
-                        fields.newType.value = Type.MULTI
-                    },
-                    toNotation = { fields.newType.value = Type.NOTATION }
+                    toBasic = { navVM.updateType(Type.BASIC); navVM.resetKeyboardStuff() },
+                    toThree = { navVM.updateType(Type.THREE); navVM.resetKeyboardStuff() },
+                    toHint = { navVM.updateType(Type.HINT); navVM.resetKeyboardStuff() },
+                    toMulti = { navVM.updateType(Type.MULTI); navVM.resetKeyboardStuff() },
+                    toNotation = { navVM.updateType(Type.NOTATION) }
                 )
                 HorizontalDivider()
                 DropdownMenuItem(
@@ -109,15 +92,7 @@ fun CardOptionsButton(
                         showDialog.value = true
                     },
                     text = { Text(stringResource(R.string.delete_card)) },
-                    trailingIcon = {
-                        Icon(
-                            imageVector = Icons.Filled.Delete,
-                            modifier = Modifier
-                                .size(28.dp),
-                            contentDescription = "Delete Card",
-                            tint = getUIStyle.iconColor()
-                        )
-                    }
+                    trailingIcon = { ci.DeleteIcon() }
                 )
             }
             DeleteCard(
@@ -129,16 +104,11 @@ fun CardOptionsButton(
     }
 }
 
-private fun resetKeyboardStuff(navVM: NavViewModel, type: String) {
-    if (type == Type.NOTATION) {
-        navVM.resetKeyboardStuff()
-    }
-}
-
 @Composable
 fun CardTypesButton(getUIStyle: GetUIStyle, navVM: NavViewModel) {
     var expanded by rememberSaveable { mutableStateOf(false) }
     val type by navVM.type.collectAsState()
+    val ci = ContentIcons(getUIStyle)
     Row(
         horizontalArrangement = Arrangement.SpaceBetween,
         verticalAlignment = Alignment.CenterVertically
@@ -154,11 +124,7 @@ fun CardTypesButton(getUIStyle: GetUIStyle, navVM: NavViewModel) {
                     .padding(4.dp)
                     .size(54.dp)
             ) {
-                Icon(
-                    Icons.Default.MoreVert,
-                    contentDescription = "Card Type",
-                    tint = getUIStyle.defaultIconColor()
-                )
+                ci.ContentIcon(Icons.Default.MoreVert, "Card Type")
             }
             DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
                 CardItems(
@@ -206,11 +172,8 @@ fun ToggleKeyBoard(
 ) {
     val showKB by navVM.showKatexKeyboard.collectAsStateWithLifecycle()
     val selectedKB by navVM.selectedKB.collectAsStateWithLifecycle()
-    LaunchedEffect(Unit) {
-        navVM.retrieveKB()
-        delay(1400)
-        Log.d("card types", "type: $type\nshowKB: $showKB\nselectedKB: $selectedKB\n")
-    }
+    val ci = ContentIcons(getUIStyle)
+    LaunchedEffect(Unit) { navVM.onCreate(); delay(1400); Log.d("keyboard", "$selectedKB") }
     if (type == Type.NOTATION && selectedKB != null) {
         Box(
             modifier = Modifier
@@ -223,17 +186,9 @@ fun ToggleKeyBoard(
                 }
         ) {
             if (!showKB) {
-                Icon(
-                    painterResource(R.drawable.twotone_keyboard),
-                    contentDescription = "Keyboard",
-                    tint = getUIStyle.defaultIconColor()
-                )
+                ci.ContentIcon(painterResource(R.drawable.twotone_keyboard), "Keyboard")
             } else {
-                Icon(
-                    painterResource(R.drawable.twotone_keyboard_hide),
-                    contentDescription = "Hide Keyboard",
-                    tint = getUIStyle.defaultIconColor()
-                )
+                ci.ContentIcon(painterResource(R.drawable.twotone_keyboard_hide), "Hide Keyboard")
             }
         }
     }
@@ -249,6 +204,7 @@ fun CardListOptions(
     onDupDialogToggle: (Boolean) -> Unit, deckList: List<Deck>
 ) {
     var decision by rememberSaveable { mutableStateOf<Decision>(Decision.Idle) }
+    val ci = ContentIcons(getUIStyle)
     Box(Modifier.wrapContentSize(Alignment.TopEnd)) {
         IconButton(
             onClick = { expanded.value = true },
@@ -256,9 +212,7 @@ fun CardListOptions(
                 .padding(4.dp)
                 .size(54.dp)
         ) {
-            Icon(
-                Icons.Default.MoreVert, contentDescription = null, tint = getUIStyle.titleColor()
-            )
+            ci.ContentIcon(Icons.Default.MoreVert)
         }
         DropdownMenu(expanded = expanded.value, onDismissRequest = { expanded.value = false }) {
             DropdownMenuItem(
@@ -279,19 +233,13 @@ fun CardListOptions(
             )
             DropdownMenuItem(
                 onClick = { onDupDialogToggle(true) }, enabled = selectable,
-                text = { Text(stringResource(R.string.duplicate_cards)) })
+                text = { Text(stringResource(R.string.duplicate_cards)) }
+            )
+            HorizontalDivider()
             DropdownMenuItem(
                 onClick = { onDelDialogToggle(true) }, enabled = selectable,
                 text = { Text(stringResource(R.string.delete_card_list)) },
-                trailingIcon = {
-                    Icon(
-                        imageVector = Icons.Filled.Delete,
-                        modifier = Modifier
-                            .size(28.dp),
-                        contentDescription = stringResource(R.string.delete_card),
-                        tint = getUIStyle.iconColor()
-                    )
-                }
+                trailingIcon = { ci.DeleteIcon() }
             )
         }
         DeleteCards(
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/katex/KatexView.kt b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/katex/KatexView.kt
index 7109317..d679653 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/katex/KatexView.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/katex/KatexView.kt
@@ -4,7 +4,6 @@ import android.annotation.SuppressLint
 import android.util.Log
 import android.webkit.WebView
 import android.webkit.WebViewClient
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.remember
@@ -13,17 +12,15 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.viewinterop.AndroidView
-import androidx.compose.ui.zIndex
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 
 @OptIn(ExperimentalStdlibApi::class)
 @SuppressLint("SetJavaScriptEnabled")
 @Composable
-fun KaTeXWebView(latexExpression: String, getUIStyle: GetUIStyle) {
+fun KaTeXWebView(latexExpression: String, getUIStyle: GetUIStyle, modifier: Modifier) {
     val context = LocalContext.current
     val webView = remember { WebView(context) }
 
-    val backgroundToHex = getUIStyle.background().toShortHex()
     val textToHex = getUIStyle.titleColor().toShortHex()
 
     DisposableEffect(webView) {
@@ -41,18 +38,15 @@ fun KaTeXWebView(latexExpression: String, getUIStyle: GetUIStyle) {
             webView.apply {
                 settings.javaScriptEnabled = true
                 setBackgroundColor(getUIStyle.background().toArgb())
-
             }
         },
-        modifier = Modifier
-            .fillMaxWidth()
-            .zIndex(-1f),
+        modifier = modifier,
     ) { view ->
         view.loadUrl("file:///android_asset/katex.html")
         view.webViewClient = object : WebViewClient() {
             override fun onPageFinished(view: WebView, url: String) {
                 super.onPageFinished(view, url)
-                val themeJs = "setTheme('$backgroundToHex','$textToHex');"
+                val themeJs = "setTheme('$textToHex');"
                 view.evaluateJavascript(themeJs, null)
                 val insertLatexJs = """
                     | document.getElementById('katex-render').innerHTML = `$latexExpression`;
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/katex/SymbolDocumentation.kt b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/katex/SymbolDocumentation.kt
index 8c79d53..2928d5b 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/katex/SymbolDocumentation.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/katex/SymbolDocumentation.kt
@@ -1,14 +1,12 @@
 package com.belmontCrest.cardCrafter.uiFunctions.katex
 
 
+import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.Text
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.MutableState
@@ -17,19 +15,28 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.setValue
 import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.layout.positionInParent
 import androidx.compose.ui.text.font.FontStyle
-import androidx.compose.ui.unit.sp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import androidx.compose.ui.window.DialogProperties
+import androidx.compose.ui.zIndex
+import com.belmontCrest.cardCrafter.model.FSProp
+import com.belmontCrest.cardCrafter.model.FWProp
+import com.belmontCrest.cardCrafter.model.TSProp
+import com.belmontCrest.cardCrafter.model.TextProps
+import com.belmontCrest.cardCrafter.model.toTextProp
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
+import com.belmontCrest.cardCrafter.uiFunctions.CustomText
 import com.belmontCrest.cardCrafter.uiFunctions.buttons.SubmitButton
 
 @Composable
 fun SymbolDocumentation(
-    pressed: MutableState<Boolean>,
-    getUIStyle: GetUIStyle
+    pressed: MutableState<Boolean>, getUIStyle: GetUIStyle,
+    scrollState: ScrollState, modifier: Modifier
 ) {
     val introduction =
         """|Mapping text to an equation/notation correctly is important.
@@ -80,70 +87,58 @@ fun SymbolDocumentation(
     if (pressed.value) {
         var goToExample by rememberSaveable { mutableStateOf(false) }
         var returnTo0 by rememberSaveable { mutableStateOf(false) }
-        val scrollState = rememberScrollState()
-        AlertDialog(
+        Dialog(
             onDismissRequest = { pressed.value = false },
-            title = { Text("Symbol Documentation") },
-            text = {
-                Column(
-                    Modifier.verticalScroll(scrollState)
-                ) {
-                    Text(
-                        text = introduction, color = getUIStyle.titleColor(),
-                        fontSize = 20.sp, lineHeight = 21.sp
-                    )
-                    Text(
-                        text = clickHere, color = Color.Blue,
-                        fontSize = 20.sp, lineHeight = 21.sp,
-                        modifier = Modifier
-                            .clickable {
-                                goToExample = true
-                            }
-                    )
-                    Text(
-                        text = symbols, color = getUIStyle.titleColor(),
-                        fontSize = 20.sp, lineHeight = 30.sp
-                    )
-                    Text(
-                        text = exampleHeader, fontStyle = FontStyle.Italic,
-                        color = getUIStyle.titleColor(), fontSize = 22.sp,
-                        lineHeight = 22.sp,
-                        modifier = Modifier
-                            .onGloballyPositioned { coordinates ->
-                                secondToLastPosition =
-                                    coordinates.positionInParent().y.toInt()
-                            }
-                    )
-                    Text(
-                        text = example1, color = getUIStyle.titleColor(),
-                        fontSize = 20.sp, lineHeight = 30.sp
-                    )
-                    KaTeXWebView(result, getUIStyle)
-                    Text(
-                        text = explanation, color = getUIStyle.titleColor(),
-                        fontSize = 20.sp, lineHeight = 30.sp
-                    )
-                    KaTeXWebView(example2, getUIStyle)
-                    Text(
-                        text = returnToTop,
-                        color = Color.Blue,
-                        fontSize = 20.sp,
-                        lineHeight = 21.sp,
-                        modifier = Modifier
-                            .clickable {
-                                returnTo0 = true
-                            }
-                    )
-                }
-            },
-            confirmButton = { },
-            dismissButton = {
+            properties = DialogProperties(
+                decorFitsSystemWindows = false, usePlatformDefaultWidth = false
+            )
+        ) {
+            Column(
+                modifier = modifier.zIndex(2f),
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.Top
+            ) {
+                CustomText(
+                    "Symbol Documentation", getUIStyle, Modifier
+                        .fillMaxWidth()
+                        .padding(bottom = 4.dp)
+                        .align(Alignment.Start),
+                    props = TextProps(fs = FSProp.Font20, ts = TSProp.MediumTitle)
+                )
+
+                CustomText(text = introduction, getUIStyle = getUIStyle, Modifier.fillMaxWidth())
+                CustomText(
+                    text = clickHere, getUIStyle = getUIStyle, props = FWProp.SemiBold.toTextProp(),
+                    modifier = Modifier.clickable { goToExample = true }
+                )
+                CustomText(text = symbols, getUIStyle = getUIStyle)
+                CustomText(
+                    text = exampleHeader, getUIStyle = getUIStyle,
+                    modifier = Modifier.onGloballyPositioned { coordinates ->
+                        secondToLastPosition = coordinates.positionInParent().y.toInt()
+                    }, fontStyle = FontStyle.Italic,
+                    props = TSProp.MediumTitle.toTextProp()
+                )
+
+                CustomText(text = example1, getUIStyle = getUIStyle, Modifier.fillMaxWidth())
+                KaTeXWebView(
+                    result, getUIStyle, Modifier
+                        .zIndex(-2f)
+                        .fillMaxWidth()
+                )
+                CustomText(text = explanation, getUIStyle = getUIStyle)
+                KaTeXWebView(
+                    example2, getUIStyle, Modifier
+                        .zIndex(-2f)
+                        .fillMaxWidth()
+                )
+                CustomText(
+                    returnToTop, getUIStyle = getUIStyle, props = FWProp.SemiBold.toTextProp(),
+                    modifier = Modifier.clickable { returnTo0 = true }
+                )
                 SubmitButton(onClick = { pressed.value = false }, true, getUIStyle, "OK")
-            },
-            modifier = Modifier
-                .fillMaxWidth(.975f)
-                .fillMaxHeight(.80f)
-        )
+            }
+        }
         LaunchedEffect(goToExample) {
             if (goToExample) {
                 scrollState.animateScrollTo(secondToLastPosition)
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/katex/menu/BuildKeyboardHtml.kt b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/katex/menu/BuildKeyboardHtml.kt
index f29b734..3c9cb76 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/katex/menu/BuildKeyboardHtml.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/katex/menu/BuildKeyboardHtml.kt
@@ -2,25 +2,71 @@
 
 package com.belmontCrest.cardCrafter.uiFunctions.katex.menu
 
+private val NORMAL_OPS_NUMS = listOf(
+    "x", "y", "a^2", "a^{b}", "(", ")", "\\\\{\\\\}",
+    "\\\\lt", "\\\\gt", "|a|", ",", "\\\\le", "\\\\ge",
+    "\\\\sqrt{x}", "\\\\sqrt[a]{x}", "\\\\pi",
+    "1", "2", "3", "4", "5", "6", "7", "8", "9", "0",
+    ".", "=", "+", "-", "\\\\times", "\\\\div"
+)
 
-private val ACCENTS = listOf(
-    // accent variants
-    "acute{a}", "bar{y}", "breve{a}", "check{a}",
-    "dot{a}", "ddot{a}", "dddot{a}", "ddddot{a}", "grave{a}", "hat{\\\\theta}",
-    "tilde{a}", "mathring{g}", "widetilde{ac}", "utilde{AB}", "vec{F}",
+private val FRACS_AND_BINOS = listOf(
+    "\\\\frac{a}{b}",
+    "\\\\frac{a}{1 + \\\\frac{1}{b}}",
+    "\\\\genfrac ( ] {1pt} {1}a{a+1}",
+    "\\\\binom{n}{k}",
+    "{n\\\\brace k}",
+    "{n\\\\brack k}"
+)
 
-    // Arrow variants
-    "overleftarrow{AB}", "underleftarrow{AB}",
-    "overrightarrow{AB}", "underrightarrow{AB}",
-    "overleftharpoon{ac}", "overrightharpoon{ac}",
-    "overleftrightarrow{AB}", "underleftrightarrow{AB}",
-    "Overrightarrow{AB}",
+private val BIG_OPERATORS = listOf(
+    "sum", "int", "oint", "prod", "coprod",
+    "sum_{i=0}^n", "int_{x_1}^{x_2}",
+    "sum_{\\\\substack{0\\\\lt{i}\\\\lt{m}\\\\\\\\0\\\\lt{j}\\\\lt{n}}}",
+    "bigotimes", "bigoplus", "bigodot", "biguplus",
+    "bigvee", "bigwedge", "bigcap", "bigcup", "bigsqcup",
+    "iint", "iiint", "oiint", "oiiint"
+)
 
-    // Lined variants
-    "overgroup{AB}", "undergroup{AB}", "overline{AB}", "underline{AB}",
-    "widecheck{ac}", "widehat{ac}",
-    "overbrace{AB}", "underbrace{AB}", "overlinesegment{AB}",
-    "underlinesegment{AB}", "underbar{X}",
+private val BINARY_OP = listOf(
+    "bigcirc", "boxdot", "boxminus", "boxplus", "boxtimes",
+    "bullet", "Cap", "cap", "Cup", "cup", "doublecap", "doublecup",
+    "centerdot", "circ", "circledast", "circledcirc", "circleddash",
+    "curlyvee", "curlywedge", "divideontimes", "dotplus", "doublebarwedge",
+    "gtrdot", "lessdot", "land", "lor", "barwedge", "veebar", "lhd", "rhd", "unlhd", "unrhd",
+    "leftthreetimes", "rightthreetimes", "ltimes", "rtimes", "sqcap", "sqcup",
+    "odot", "ominus", "oplus", "otimes", "oslash", "mp", "pm", "uplus", "wr"
+)
+
+private val LOGIC_SET_THEORY = listOf(
+    "forall", "exists", "nexists", "isin", "notin", "ni", "notni",
+    "complement", "subset", "supset", "mid", "land", "lor",
+    "therefore", "because", "mapsto", "to", "gets",
+    "leftrightarrow", "emptyset", "varnothing", "implies", "impliedby",
+    "iff", "neg", "set{ x | x\\\\lt 5 }",
+)
+
+private val RELATIONS = listOf(
+    "=", "\\\\lt", "\\\\gt", "\\\\le", "\\\\ge", "\\\\neq", "\\\\nleq", "\\\\ngeq",
+    "\\\\cong", "\\\\ncong", "\\\\sim", "\\\\nsim", "\\\\simeq",
+    "\\\\propto", "\\\\equiv", "\\\\prec", "\\\\succ",
+    "\\\\subseteq", "\\\\nsubseteq", "\\\\supseteq", "\\\\nsupseteq",
+    "\\\\mid", "\\\\nmid", "\\\\parallel", "\\\\nparallel",
+    "\\\\perp", "\\\\vdash", "\\\\dashv",
+    "\\\\models", "\\\\trianglelefteq", "\\\\trianglerighteq",
+)
+
+private val ADV_RELATIONS = listOf(
+    "lesssim", "gtrsim", "ll", "gg", "lll", "ggg",
+    "preceq", "succeq", "lessapprox", "gtrapprox",
+    "sqsubset", "sqsubseteq", "sqsupset", "sqsupseteq", "bowtie",
+    "lesseqqgtr", "gtreqqless", "lesseqgtr", "gtreqless",
+    "lessgtr", "gtrless", "Subset", "Supset",
+    "Vdash", "Vvdash", "simcolon", "colonsim",
+    "between", "precsim", "succsim", "preccurlyeq", "succcurlyeq",
+    "precapprox", "succapprox", "leqslant", "geqslant",
+    "doteq", "doteqdot", "Doteq", "eqcirc", "circeq",
+    "bumpeq", "Bumpeq", "risingdotseq", "fallingdotseq"
 )
 
 private val GREEK_LETTERS = listOf(
@@ -87,13 +133,24 @@ private val OTHER_LETTERS = listOf(
     "eth", "hslash", "text{\\\\oe}"
 )
 
-private val FRACS_AND_BINOS = listOf(
-    "\\\\frac{a}{b}",
-    "\\\\frac{a}{1 + \\\\frac{1}{b}}",
-    "\\\\genfrac ( ] {1pt} {1}a{a+1}",
-    "\\\\binom{n}{k}",
-    "{n\\\\brace k}",
-    "{n\\\\brack k}"
+private val ACCENTS = listOf(
+    // accent variants
+    "acute{a}", "bar{y}", "breve{a}", "check{a}",
+    "dot{a}", "ddot{a}", "dddot{a}", "ddddot{a}", "grave{a}", "hat{\\\\theta}",
+    "tilde{a}", "mathring{g}", "widetilde{ac}", "utilde{AB}", "vec{F}",
+
+    // Arrow variants
+    "overleftarrow{AB}", "underleftarrow{AB}",
+    "overrightarrow{AB}", "underrightarrow{AB}",
+    "overleftharpoon{ac}", "overrightharpoon{ac}",
+    "overleftrightarrow{AB}", "underleftrightarrow{AB}",
+    "Overrightarrow{AB}",
+
+    // Lined variants
+    "overgroup{AB}", "undergroup{AB}", "overline{AB}", "underline{AB}",
+    "widecheck{ac}", "widehat{ac}",
+    "overbrace{AB}", "underbrace{AB}", "overlinesegment{AB}",
+    "underlinesegment{AB}", "underbar{X}",
 )
 
 private val ARROWS = listOf(
@@ -105,7 +162,7 @@ private val ARROWS = listOf(
     // Two-headed arrow variants
     "twoheadleftarrow", "twoheadrightarrow",
     // Tailed arrow variants
-    "leftarrowtail", "rightarrowtail", "longmapsto", "mapsto",
+    "leftarrowtail", "rightarrowtail", "longmapsto",
     // Outlined arrow variants
     "Downarrow", "Uparrow", "Leftarrow", "Rightarrow",
     "Leftrightarrow", "Updownarrow", "iff", "impliedby", "implies",
@@ -124,6 +181,7 @@ private val ARROWS = listOf(
     // Squigel arrow variants
     "leftrightsquigarrow", "rightsquigarrow"
 )
+
 private val EXTENSIBLE_ARROWS = listOf(
     // `Normal` arrow variants
     "xleftarrow{abc}", "xrightarrow{abc}",
@@ -139,22 +197,6 @@ private val EXTENSIBLE_ARROWS = listOf(
     // Under and over arrow variants (any can be done like this in this list)
     "xrightarrow[b]{a}", "xleftrightarrow[b]{a}"
 )
-private val BIG_OPERATORS = listOf(
-    "sum", "int", "oint", "prod", "coprod",
-    "sum_{i=0}^n", "int_{x_1}^{x_2}",
-    "sum_{\\\\substack{0\\\\lt{i}\\\\lt{m}\\\\\\\\0\\\\lt{j}\\\\lt{n}}}",
-    "bigotimes", "bigoplus", "bigodot", "biguplus",
-    "bigvee", "bigwedge", "bigcap", "bigcup", "bigsqcup",
-    "iint", "iiint", "oiint", "oiiint"
-)
-
-private val NORMAL_OPS_NUMS = listOf(
-    "x", "y", "a^2", "a^{b}", "(", ")", "\\\\{\\\\}",
-    "\\\\lt", "\\\\gt", "|a|", ",", "\\\\le", "\\\\ge",
-    "\\\\sqrt{x}", "\\\\sqrt[a]{x}", "\\\\pi",
-    "1", "2", "3", "4", "5", "6", "7", "8", "9", "0",
-    ".", "=", "+", "-", "\\\\times", "\\\\div"
-)
 
 private const val ON_SYMBOL_SELECTED = "onSymbolSelected"
 private const val ON_ACCENT_SELECTED = "onAccentSelected"
@@ -180,6 +222,30 @@ fun buildKeyboardHtml(): String {
         }
         append(endDiv())
 
+        append(startSection("binary_ops", "Binary Operators"))
+        for (op in BINARY_OP) {
+            append(convertWord(op, ON_SYMBOL_SELECTED, true, SYMBOL))
+        }
+        append(endDiv())
+
+        append(startSection("logic_theory", "Logic and Set Theory"))
+        for (word in LOGIC_SET_THEORY) {
+            append(convertWord(word, ON_SYMBOL_SELECTED, true, SYMBOL))
+        }
+        append(endDiv())
+
+        append(startSection("relations", "Relations"))
+        for (rel in RELATIONS) {
+            append(convertWord(rel, ON_SYMBOL_SELECTED, false, SYMBOL))
+        }
+        append(endDiv())
+
+        append(startSection("adv_relations", "Advanced Relations"))
+        for (rel in ADV_RELATIONS) {
+            append(convertWord(rel, ON_SYMBOL_SELECTED, true, SYMBOL))
+        }
+        append(endDiv())
+
         append(startSection("greek", "Greek Letters"))
         for (greekLetter in GREEK_LETTERS) {
             append(convertWord(greekLetter, ON_SYMBOL_SELECTED, true, SYMBOL))
@@ -210,8 +276,6 @@ fun buildKeyboardHtml(): String {
         }
         append(endDiv())
 
-        append(startSection("logic_theory", "Logic and Set Theory"))
-        append(endDiv())
     }
 }
 
@@ -230,10 +294,9 @@ private fun startSection(id: String, sectionName: String): String =
     |<div id="$id" class="symbols-container">
     """.trimMargin()
 
-
 private fun convertWord(
-    word: String, function: String, backSlash: Boolean, containerType : String
-    ): String {
+    word: String, function: String, backSlash: Boolean, containerType: String
+): String {
     return if (backSlash) {
         val escaped = word.replace("\\\\", "")
         """
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/katex/menu/KaTeXMenu.kt b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/katex/menu/KaTeXMenu.kt
index 25113b9..f8062a9 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/katex/menu/KaTeXMenu.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/uiFunctions/katex/menu/KaTeXMenu.kt
@@ -46,30 +46,45 @@ import com.belmontCrest.cardCrafter.model.getIsLandScape
 import com.belmontCrest.cardCrafter.model.getKatexMenuWidth
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 import kotlinx.parcelize.Parcelize
+import kotlinx.serialization.Serializable
 import kotlin.math.roundToInt
 
 
 @Parcelize
+@Serializable
 data class KaTeXMenu(val notation: String?, val sa: SelectedAnnotation) : Parcelable
 
+
+@Serializable
+data class ListOfKatexMenu(
+    val km: List<KaTeXMenu> = emptyList()
+)
+
 @Parcelize
+@Serializable
 sealed class SelectedAnnotation : Parcelable {
     @Parcelize
+    @Serializable
     data object Letter : SelectedAnnotation()
 
     @Parcelize
+    @Serializable
     data object Accent : SelectedAnnotation()
 
     @Parcelize
+    @Serializable
     data object EQ : SelectedAnnotation()
 
     @Parcelize
+    @Serializable
     data object OP : SelectedAnnotation()
 
     @Parcelize
+    @Serializable
     data object NORM : SelectedAnnotation()
 
     @Parcelize
+    @Serializable
     sealed class CursorChange : SelectedAnnotation() {
         data object Forward : CursorChange()
         data object Backward : CursorChange()
@@ -79,6 +94,7 @@ sealed class SelectedAnnotation : Parcelable {
     }
 
     @Parcelize
+    @Serializable
     data object Idle : SelectedAnnotation()
 }
 
@@ -94,26 +110,16 @@ class IsInsideException :
 fun KaTeXMenu(
     modifier: Modifier, offsetProvider: () -> Offset, onDismiss: () -> Unit,
     onOffset: (Offset) -> Unit, getUIStyle: GetUIStyle,// initialPos: Offset?,
-    webView: WebView, scrollState: ScrollState,
+    webView: WebView, scrollState: ScrollState, height: Int, width: Int,
     onCursorChange: (SelectedAnnotation.CursorChange) -> Unit
 ) {
-
     var expanded by rememberSaveable { mutableStateOf(false) }
-    /*
-        val maxY = getMaxHeight().value
-        val maxX = getMaxWidth().value
-        val isLandscape = getIsLandScape()
-        val midXPoint = getKatexMenuWidth().value / 2
-
-        LaunchedEffect(Unit) {
-            Log.i(KATEX_MENU, "max width: $maxX")
-            Log.i(KATEX_MENU, "max height: $maxY")
-        }*/
-
     val isLandscape = getIsLandScape()
-    val width = if (isLandscape) getKatexMenuWidth() / 2.5.dp else getKatexMenuWidth() / 2.dp
+    val expandedWidth = 150
     val offsetMod =
-        if (!isLandscape) Modifier.offset(y = -(126.dp)) else Modifier.offset(x = -(width.dp))
+        if (!isLandscape) Modifier.offset(y = -(126.dp))
+        else Modifier.offset(x = -(expandedWidth.dp))
+
     Box(
         modifier = modifier
             .offset { IntOffset(offsetProvider().x.roundToInt(), offsetProvider().y.roundToInt()) }
@@ -121,7 +127,7 @@ fun KaTeXMenu(
         if (expanded) {
             Column(
                 modifier = offsetMod
-                    .width(width.dp)
+                    .width(expandedWidth.dp)
                     .height(126.dp)
                     .pointerInput(Unit) {
                         detectDragGestures { change, dragAmount ->
@@ -198,28 +204,12 @@ fun KaTeXMenu(
         }
         Box(
             modifier = Modifier
-                .width(getKatexMenuWidth())
+                .width(getKatexMenuWidth(width))
                 .height(26.dp)
                 .background(getUIStyle.katexMenuHeaderColor())
-                // 4. Only after a long‐press on this bar do we start dragging
                 .pointerInput(Unit) {
                     detectDragGestures { change, dragAmount ->
                         change.consume()
-                        /* val pos = initialPos
-                         if (pos != null) {
-                             val currentY = offsetProvider().y - pos.y + dragAmount.y
-                             val currentX = offsetProvider().x - pos.x + dragAmount.x
-                             if (isOutsideOfBounds(
-                                     isLandscape, pos = pos, midXPoint = midXPoint,
-                                     maxY = maxY, maxX = maxX,
-                                     currentY = currentY, currentX = currentX
-                                 )
-                             ) {
-                                 Log.w(KATEX_MENU, "Out of bounds")
-                                 return@detectDragGestures
-                             }
-                             onOffset(dragAmount)
-                         }*/
                         onOffset(dragAmount)
                     }
                 }
@@ -251,9 +241,9 @@ fun KaTeXMenu(
         AndroidView(
             factory = { webView },
             modifier = Modifier
-                .width(getKatexMenuWidth())
+                .width(getKatexMenuWidth(width))
                 .padding(top = 26.dp)
-                .height(200.dp)
+                .height(height.dp)
                 .background(getUIStyle.katexMenuBGColor())
                 .border(1.5.dp, getUIStyle.defaultIconColor())
                 .verticalScroll(scrollState),
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddBasicCard.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddBasicCard.kt
index bd98f6c..ae1d6bc 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddBasicCard.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddBasicCard.kt
@@ -28,7 +28,6 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.belmontCrest.cardCrafter.R
 import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.AddCardViewModel
 import com.belmontCrest.cardCrafter.localDatabase.tables.Deck
-import com.belmontCrest.cardCrafter.model.ui.Fields
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 import com.belmontCrest.cardCrafter.uiFunctions.EditTextFieldNonDone
 import kotlinx.coroutines.delay
@@ -37,10 +36,10 @@ import kotlinx.coroutines.launch
 @Composable
 fun AddBasicCard(
     vm: AddCardViewModel, deck: Deck,
-    fields: Fields, getUIStyle: GetUIStyle
+    getUIStyle: GetUIStyle
 ) {
     val errorMessage by vm.errorMessage.collectAsStateWithLifecycle()
-
+    val fields by vm.fields.collectAsStateWithLifecycle()
     var successMessage by remember { mutableStateOf("") }
     val fillOutFields = stringResource(R.string.fill_out_all_fields).toString()
     val cardAdded = stringResource(R.string.card_added).toString()
@@ -56,9 +55,7 @@ fun AddBasicCard(
             fontSize = 25.sp,
             textAlign = TextAlign.Center,
             lineHeight = 30.sp,
-            color = getUIStyle.titleColor(),
-            modifier = Modifier
-                .padding(top = 15.dp)
+            color = getUIStyle.titleColor()
         )
         Row(
             modifier = Modifier
@@ -67,10 +64,9 @@ fun AddBasicCard(
             horizontalArrangement = Arrangement.Center
         ) {
             EditTextFieldNonDone(
-                value = fields.question.value,
+                value = fields.question,
                 onValueChanged = { newText ->
-                    fields.question.value =
-                        newText
+                    vm.updateQ(newText)
                 },
                 labelStr = stringResource(R.string.question),
                 modifier = Modifier
@@ -92,10 +88,9 @@ fun AddBasicCard(
             horizontalArrangement = Arrangement.Center
         ) {
             EditTextFieldNonDone(
-                value = fields.answer.value,
+                value = fields.answer,
                 onValueChanged = { newText ->
-                    fields.answer.value =
-                        newText
+                    vm.updateA(newText)
                 },
                 labelStr = stringResource(R.string.answer),
                 modifier = Modifier
@@ -110,16 +105,12 @@ fun AddBasicCard(
         ) {
             Button(
                 onClick = {
-                    if (fields.question.value.isBlank() || fields.answer.value.isBlank()) {
+                    if (fields.question.isBlank() || fields.answer.isBlank()) {
                         vm.setErrorMessage(fillOutFields)
                         successMessage = ""
                     } else {
                         coroutineScope.launch {
-                            vm.addBasicCard(
-                                deck, fields.question.value, fields.answer.value
-                            )
-                            fields.answer.value = ""
-                            fields.question.value = ""
+                            vm.addBasicCard(deck, fields.question, fields.answer)
                             successMessage = cardAdded
                         }
                     }
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddCardView.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddCardView.kt
index 32026cb..cdc7afa 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddCardView.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddCardView.kt
@@ -2,145 +2,71 @@ package com.belmontCrest.cardCrafter.views.cardViews.addCardViews
 
 import android.os.Build
 import androidx.annotation.RequiresApi
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.viewmodel.compose.viewModel
-import com.belmontCrest.cardCrafter.R
 import com.belmontCrest.cardCrafter.model.application.AppViewModelProvider
 import com.belmontCrest.cardCrafter.navigation.NavViewModel
 import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.AddCardViewModel
 import com.belmontCrest.cardCrafter.localDatabase.tables.Deck
 import com.belmontCrest.cardCrafter.model.Type
-import com.belmontCrest.cardCrafter.model.ui.Fields
+import com.belmontCrest.cardCrafter.model.application.PreferenceValues
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 import com.belmontCrest.cardCrafter.ui.theme.boxViewsModifier
-import com.belmontCrest.cardCrafter.views.miscFunctions.getSavableFields
-import com.belmontCrest.cardCrafter.uiFunctions.katex.SymbolDocumentation
-
 
 class AddCardView(
-    private var fields: Fields,
     private var getUIStyle: GetUIStyle,
+    private val preference: PreferenceValues,
     private val navViewModel: NavViewModel
 ) {
     @RequiresApi(Build.VERSION_CODES.Q)
     @Composable
     fun AddCard(deck: Deck) {
         val addCardVM: AddCardViewModel = viewModel(factory = AppViewModelProvider.Factory)
-        val helpForNotation = rememberSaveable { mutableStateOf(false) }
-        fields = getSavableFields(fields)
         val type by navViewModel.type.collectAsStateWithLifecycle()
 
         Box(
             modifier = Modifier
                 .boxViewsModifier(getUIStyle.getColorScheme())
         ) {
-            SymbolDocumentation(helpForNotation, getUIStyle)
             Column(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .padding(top = 10.dp),
+                    .padding(top = 8.dp),
                 horizontalAlignment = Alignment.CenterHorizontally,
                 verticalArrangement = Arrangement.SpaceBetween
             ) {
-                val text = when (type) {
-                    Type.HINT -> {
-                        stringResource(R.string.hint)
-                    }
-
-                    Type.THREE -> {
-                        stringResource(R.string.three_fields)
-                    }
-
-                    Type.MULTI -> {
-                        stringResource(R.string.multi)
-                    }
-
-                    Type.NOTATION -> {
-                        "Notation"
-                    }
-
-                    else -> {
-                        stringResource(R.string.basic)
-                    }
-                }
-                Row(
-                    modifier = Modifier.fillMaxWidth(),
-                    horizontalArrangement = Arrangement.Center
-                ) {
-                    Text(
-                        text = text,
-                        fontSize = 35.sp,
-                        textAlign = TextAlign.Center,
-                        lineHeight = 40.sp,
-                        color = getUIStyle.titleColor(),
-                        fontWeight = FontWeight.Bold,
-                        modifier =
-                            if (type == Type.NOTATION) {
-                                Modifier.padding(start = 8.dp)
-                            } else {
-                                Modifier
-                            }
-                    )
-                    if (type == Type.NOTATION) {
-                        Text(
-                            text = "?", fontSize = 35.sp,
-                            textAlign = TextAlign.Right,
-                            lineHeight = 40.sp,
-                            color = getUIStyle.iconColor(),
-                            fontWeight = FontWeight.Bold,
-                            modifier = Modifier
-                                .padding(horizontal = 4.dp)
-                                .clickable {
-                                    helpForNotation.value = true
-                                }
-                        )
-
-                    }
-                }
                 when (type) {
                     Type.BASIC -> AddBasicCard(
-                        addCardVM, deck,
-                        fields, getUIStyle
+                        addCardVM, deck, getUIStyle
                     )
 
                     Type.THREE -> AddThreeCard(
-                        addCardVM, deck,
-                        fields, getUIStyle
+                        addCardVM, deck, getUIStyle
                     )
 
                     Type.HINT -> AddHintCard(
-                        addCardVM, deck,
-                        fields, getUIStyle
+                        addCardVM, deck, getUIStyle
                     )
 
                     Type.MULTI -> AddMultiChoiceCard(
                         addCardVM, deck,
-                        fields, getUIStyle
+                        getUIStyle
                     )
 
                     Type.NOTATION -> AddNotationCard(
-                        addCardVM, deck, navViewModel,
-                        fields, getUIStyle, Modifier
+                        addCardVM, deck, preference.height, preference.width,
+                        getUIStyle, Modifier
                             .zIndex(2f)
                             .align(Alignment.Start)
                             .padding(6.dp)
@@ -148,7 +74,7 @@ class AddCardView(
 
                     else -> AddBasicCard(
                         addCardVM, deck,
-                        fields, getUIStyle
+                        getUIStyle
                     )
                 }
             }
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddHintCard.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddHintCard.kt
index 1146028..ed59b47 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddHintCard.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddHintCard.kt
@@ -27,7 +27,6 @@ import androidx.compose.ui.unit.sp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.AddCardViewModel
 import com.belmontCrest.cardCrafter.localDatabase.tables.Deck
-import com.belmontCrest.cardCrafter.model.ui.Fields
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 import com.belmontCrest.cardCrafter.uiFunctions.EditTextFieldNonDone
 import com.belmontCrest.cardCrafter.R
@@ -37,9 +36,10 @@ import kotlinx.coroutines.launch
 @Composable
 fun AddHintCard(
     vm: AddCardViewModel, deck: Deck,
-    fields: Fields, getUIStyle: GetUIStyle
+    getUIStyle: GetUIStyle
 ) {
     var successMessage by remember { mutableStateOf("") }
+    val fields by vm.fields.collectAsStateWithLifecycle()
     val errorMessage by vm.errorMessage.collectAsStateWithLifecycle()
     val fillOutFields = stringResource(R.string.fill_out_all_fields).toString()
     val cardAdded = stringResource(R.string.card_added).toString()
@@ -55,9 +55,7 @@ fun AddHintCard(
             fontSize = 25.sp,
             textAlign = TextAlign.Center,
             lineHeight = 30.sp,
-            color = getUIStyle.titleColor(),
-            modifier = Modifier
-                .padding(top = 15.dp)
+            color = getUIStyle.titleColor()
         )
         Row(
             modifier = Modifier
@@ -66,10 +64,9 @@ fun AddHintCard(
             horizontalArrangement = Arrangement.Center
         ) {
             EditTextFieldNonDone(
-                value = fields.question.value,
+                value = fields.question,
                 onValueChanged = { newText ->
-                    fields.question.value =
-                        newText
+                    vm.updateQ(newText)
                 },
                 labelStr = stringResource(R.string.question),
                 modifier = Modifier
@@ -92,10 +89,9 @@ fun AddHintCard(
             horizontalArrangement = Arrangement.Center
         ) {
             EditTextFieldNonDone(
-                value = fields.middleField.value,
+                value = fields.middle,
                 onValueChanged = { newText ->
-                    fields.middleField.value =
-                        newText
+                        vm.updateM(newText)
                 },
                 labelStr = stringResource(R.string.hint_field),
                 modifier = Modifier
@@ -117,10 +113,9 @@ fun AddHintCard(
             horizontalArrangement = Arrangement.Center
         ) {
             EditTextFieldNonDone(
-                value = fields.answer.value,
+                value = fields.answer,
                 onValueChanged = { newText ->
-                    fields.answer.value =
-                        newText
+                        vm.updateA(newText)
                 },
                 labelStr = stringResource(R.string.answer),
                 modifier = Modifier
@@ -135,19 +130,17 @@ fun AddHintCard(
         ) {
             Button(
                 onClick = {
-                    if (fields.question.value.isBlank() ||
-                        fields.answer.value.isBlank() ||
-                        fields.middleField.value.isBlank()
+                    if (fields.question.isBlank() ||
+                        fields.answer.isBlank() ||
+                        fields.middle.isBlank()
                     ) {
                         vm.setErrorMessage(fillOutFields)
                         successMessage = ""
                     } else {
                         coroutineScope.launch {
                             vm.addHintCard(
-                                deck, fields.question.value,
-                                fields.middleField.value, fields.answer.value
+                                deck, fields.question, fields.middle, fields.answer
                             )
-                            fields.resetFields()
                             successMessage = cardAdded
                         }
                     }
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddMultiChoiceCard.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddMultiChoiceCard.kt
index c63fac8..27f18d5 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddMultiChoiceCard.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddMultiChoiceCard.kt
@@ -29,7 +29,6 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.belmontCrest.cardCrafter.R
 import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.AddCardViewModel
 import com.belmontCrest.cardCrafter.localDatabase.tables.Deck
-import com.belmontCrest.cardCrafter.model.ui.Fields
 import com.belmontCrest.cardCrafter.uiFunctions.EditTextField
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 import com.belmontCrest.cardCrafter.uiFunctions.EditTextFieldNonDone
@@ -39,10 +38,10 @@ import kotlinx.coroutines.launch
 
 @Composable
 fun AddMultiChoiceCard(
-    vm: AddCardViewModel, deck: Deck,
-    fields: Fields, getUIStyle: GetUIStyle
+    vm: AddCardViewModel, deck: Deck, getUIStyle: GetUIStyle
 ) {
     var successMessage by remember { mutableStateOf("") }
+    val fields by vm.fields.collectAsStateWithLifecycle()
     val errorMessage by vm.errorMessage.collectAsStateWithLifecycle()
     val fillOutFields = stringResource(R.string.fill_out_all_fields).toString()
     val cardAdded = stringResource(R.string.card_added).toString()
@@ -58,9 +57,7 @@ fun AddMultiChoiceCard(
             fontSize = 25.sp,
             textAlign = TextAlign.Center,
             lineHeight = 30.sp,
-            color = getUIStyle.titleColor(),
-            modifier = Modifier
-                .padding(top = 10.dp)
+            color = getUIStyle.titleColor()
         )
         Row(
             modifier = Modifier
@@ -69,10 +66,9 @@ fun AddMultiChoiceCard(
             horizontalArrangement = Arrangement.Center
         ) {
             EditTextFieldNonDone(
-                value = fields.question.value,
+                value = fields.question,
                 onValueChanged = { newText ->
-                    fields.question.value =
-                        newText
+                    vm.updateQ(newText)
                 },
                 labelStr = stringResource(R.string.question),
                 modifier = Modifier
@@ -89,11 +85,11 @@ fun AddMultiChoiceCard(
                 .padding(top = 8.dp)
                 .background(
                     color =
-                    if (fields.correct.value == 'a') {
-                        getUIStyle.correctChoice()
-                    } else {
-                        Color.Transparent
-                    }
+                        if (fields.correct == 'a') {
+                            getUIStyle.correctChoice()
+                        } else {
+                            Color.Transparent
+                        }
                 )
         )
         Row(
@@ -103,20 +99,19 @@ fun AddMultiChoiceCard(
             horizontalArrangement = Arrangement.Center
         ) {
             EditTextField(
-                value = fields.choices[0].value,
+                value = fields.choices[0],
                 onValueChanged = { newText ->
-                    fields.choices[0].value =
-                        newText
+                    vm.updateCh(newText, 0)
                 },
                 labelStr = stringResource(R.string.choice_a),
                 modifier = Modifier
                     .weight(1f),
                 inputColor =
-                if (fields.correct.value == 'a') {
-                    getUIStyle.onCorrectChoice()
-                } else {
-                    Color.Transparent
-                }
+                    if (fields.correct == 'a') {
+                        getUIStyle.onCorrectChoice()
+                    } else {
+                        Color.Transparent
+                    }
             )
         }
         Text(
@@ -129,11 +124,11 @@ fun AddMultiChoiceCard(
                 .padding(top = 8.dp)
                 .background(
                     color =
-                    if (fields.correct.value == 'b') {
-                        getUIStyle.correctChoice()
-                    } else {
-                        Color.Transparent
-                    }
+                        if (fields.correct == 'b') {
+                            getUIStyle.correctChoice()
+                        } else {
+                            Color.Transparent
+                        }
                 )
         )
         Row(
@@ -143,20 +138,19 @@ fun AddMultiChoiceCard(
             horizontalArrangement = Arrangement.Center
         ) {
             EditTextField(
-                value = fields.choices[1].value,
+                value = fields.choices[1],
                 onValueChanged = { newText ->
-                    fields.choices[1].value =
-                        newText
+                    vm.updateCh(newText, 1)
                 },
                 labelStr = stringResource(R.string.choice_b),
                 modifier = Modifier
                     .weight(1f),
                 inputColor =
-                if (fields.correct.value == 'b') {
-                    getUIStyle.onCorrectChoice()
-                } else {
-                    Color.Transparent
-                }
+                    if (fields.correct == 'b') {
+                        getUIStyle.onCorrectChoice()
+                    } else {
+                        Color.Transparent
+                    }
             )
         }
         Text(
@@ -169,11 +163,11 @@ fun AddMultiChoiceCard(
                 .padding(top = 8.dp)
                 .background(
                     color =
-                    if (fields.correct.value == 'c') {
-                        getUIStyle.correctChoice()
-                    } else {
-                        Color.Transparent
-                    }
+                        if (fields.correct == 'c') {
+                            getUIStyle.correctChoice()
+                        } else {
+                            Color.Transparent
+                        }
                 )
         )
         Row(
@@ -183,20 +177,19 @@ fun AddMultiChoiceCard(
             horizontalArrangement = Arrangement.Center
         ) {
             EditTextField(
-                value = fields.choices[2].value,
+                value = fields.choices[2],
                 onValueChanged = { newText ->
-                    fields.choices[2].value =
-                        newText
+                    vm.updateCh(newText, 2)
                 },
                 labelStr = stringResource(R.string.choice_c),
                 modifier = Modifier
                     .weight(1f),
                 inputColor =
-                if (fields.correct.value == 'c') {
-                    getUIStyle.onCorrectChoice()
-                } else {
-                    Color.Transparent
-                }
+                    if (fields.correct == 'c') {
+                        getUIStyle.onCorrectChoice()
+                    } else {
+                        Color.Transparent
+                    }
             )
         }
         Text(
@@ -209,11 +202,11 @@ fun AddMultiChoiceCard(
                 .padding(top = 8.dp)
                 .background(
                     color =
-                    if (fields.correct.value == 'd') {
-                        getUIStyle.correctChoice()
-                    } else {
-                        Color.Transparent
-                    }
+                        if (fields.correct == 'd') {
+                            getUIStyle.correctChoice()
+                        } else {
+                            Color.Transparent
+                        }
                 )
         )
         Row(
@@ -223,24 +216,25 @@ fun AddMultiChoiceCard(
             horizontalArrangement = Arrangement.Center
         ) {
             EditTextField(
-                value = fields.choices[3].value,
+                value = fields.choices[3],
                 onValueChanged = { newText ->
-                    fields.choices[3].value =
-                        newText
+                    vm.updateCh(newText, 3)
                 },
                 labelStr = stringResource(R.string.choice_d),
                 modifier = Modifier
                     .weight(1f),
                 inputColor =
-                if (fields.correct.value == 'd') {
-                    getUIStyle.onCorrectChoice()
-                } else {
-                    Color.Transparent
-                }
+                    if (fields.correct == 'd') {
+                        getUIStyle.onCorrectChoice()
+                    } else {
+                        Color.Transparent
+                    }
             )
         }
 
-        PickAnswerChar(fields, getUIStyle)
+        PickAnswerChar(fields, getUIStyle) { correct ->
+            vm.updateCor(correct)
+        }
 
         Row(
             modifier = Modifier
@@ -249,36 +243,35 @@ fun AddMultiChoiceCard(
         ) {
             Button(
                 onClick = {
-                    if (fields.question.value.isBlank() ||
-                        fields.choices[0].value.isBlank() ||
-                        fields.choices[1].value.isBlank() ||
-                        fields.correct.value !in 'a'..'d'
+                    if (fields.question.isBlank() ||
+                        fields.choices[0].isBlank() ||
+                        fields.choices[1].isBlank() ||
+                        fields.correct !in 'a'..'d'
                     ) {
                         vm.setErrorMessage(fillOutFields)
                         successMessage = ""
-                    } else if (fields.choices[2].value.isBlank() &&
-                        fields.choices[3].value.isNotBlank()
+                    } else if (fields.choices[2].isBlank() &&
+                        fields.choices[3].isNotBlank()
                     ) {
                         vm.setErrorMessage("Cannot skip choice C and fill choice D")
                         successMessage = ""
-                    } else if ((fields.choices[2].value.isBlank() &&
-                                fields.correct.value == 'c') ||
-                        (fields.choices[3].value.isBlank() &&
-                                fields.correct.value == 'd')
+                    } else if ((fields.choices[2].isBlank() &&
+                                fields.correct == 'c') ||
+                        (fields.choices[3].isBlank() &&
+                                fields.correct == 'd')
                     ) {
                         vm.setErrorMessage("Answer can't be a blank choice")
                         successMessage = ""
                     } else {
                         coroutineScope.launch {
                             vm.addMultiChoiceCard(
-                                deck, fields.question.value,
-                                fields.choices[0].value,
-                                fields.choices[1].value,
-                                fields.choices[2].value,
-                                fields.choices[3].value,
-                                fields.correct.value
+                                deck, fields.question,
+                                fields.choices[0],
+                                fields.choices[1],
+                                fields.choices[2],
+                                fields.choices[3],
+                                fields.correct
                             )
-                            fields.resetFields()
                             successMessage = cardAdded
                         }
                     }
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddNotationCard.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddNotationCard.kt
index 2dd642b..cdd0a41 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddNotationCard.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddNotationCard.kt
@@ -1,8 +1,6 @@
 package com.belmontCrest.cardCrafter.views.cardViews.addCardViews
 
 import android.util.Log
-import androidx.activity.compose.BackHandler
-import androidx.compose.foundation.focusable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -19,7 +17,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
@@ -27,9 +24,6 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.focus.FocusRequester
-import androidx.compose.ui.focus.focusRequester
-import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
@@ -41,9 +35,7 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.belmontCrest.cardCrafter.R
 import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.AddCardViewModel
 import com.belmontCrest.cardCrafter.localDatabase.tables.Deck
-import com.belmontCrest.cardCrafter.model.ui.Fields
-import com.belmontCrest.cardCrafter.model.ui.SelectedKeyboard
-import com.belmontCrest.cardCrafter.navigation.NavViewModel
+import com.belmontCrest.cardCrafter.model.ui.states.SelectedKeyboard
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 import com.belmontCrest.cardCrafter.uiFunctions.katex.menu.KaTeXMenu
 import com.belmontCrest.cardCrafter.uiFunctions.LatexKeyboard
@@ -51,14 +43,19 @@ import com.belmontCrest.cardCrafter.uiFunctions.buttons.SubmitButton
 import com.belmontCrest.cardCrafter.uiFunctions.katex.menu.SelectedAnnotation
 import com.belmontCrest.cardCrafter.uiFunctions.katex.menu.getWebView
 import com.belmontCrest.cardCrafter.uiFunctions.showToastMessage
+import com.belmontCrest.cardCrafter.views.miscFunctions.collectNotationFieldsAsStates
+import com.belmontCrest.cardCrafter.views.miscFunctions.collectTextRangesAsStates
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 
+private object KeyboardInputs {
+    const val KK = "KatexKeyBoard"
+}
 
 @Composable
 fun AddNotationCard(
-    vm: AddCardViewModel, deck: Deck, navVM: NavViewModel,
-    fields: Fields, getUIStyle: GetUIStyle, modifier: Modifier
+    vm: AddCardViewModel, deck: Deck, height: Int, width: Int,
+    getUIStyle: GetUIStyle, modifier: Modifier
 ) {
     val errorMessage by vm.errorMessage.collectAsStateWithLifecycle()
     var successMessage by remember { mutableStateOf("") }
@@ -66,14 +63,8 @@ fun AddNotationCard(
     val cardAdded = stringResource(R.string.card_added).toString()
     val scrollState = rememberScrollState()
     val coroutineScope = rememberCoroutineScope()
-    var steps by rememberSaveable { mutableIntStateOf(0) }
-    fields.stringList = rememberSaveable { mutableListOf() }
-    val showKB by navVM.showKatexKeyboard.collectAsStateWithLifecycle()
-    val selectedKB by navVM.selectedKB.collectAsStateWithLifecycle()
-    //var lastSelectedKB by rememberSaveable { mutableStateOf<SelectedKeyboard?>(null) }
-    // val focusQRequester = remember { FocusRequester() }
-    // val focusARequester = remember { FocusRequester() }
-    val focusRequester = remember { FocusRequester() }
+    val (fields, showKB, selectedKB) = collectNotationFieldsAsStates(vm)
+    val (selection, composition) = collectTextRangesAsStates(vm)
     var selectedQSymbol by rememberSaveable {
         mutableStateOf(KaTeXMenu(null, SelectedAnnotation.Idle))
     }
@@ -84,8 +75,9 @@ fun AddNotationCard(
     var offset by remember { mutableStateOf(Offset.Zero) }
     val context = LocalContext.current
     var enabled by rememberSaveable { mutableStateOf(true) }
-    val resetOffset by navVM.resetOffset.collectAsStateWithLifecycle()
-    // var initialPos by remember { mutableStateOf<Offset?>(null) }
+    val resetOffset by vm.resetOffset.collectAsStateWithLifecycle()
+
+    val kk = KeyboardInputs.KK
     val webScrollState = rememberScrollState()
     val webView = getWebView(getUIStyle) { notation, sa ->
         when (val sel = selectedKB) {
@@ -107,6 +99,7 @@ fun AddNotationCard(
             }
         }
     }
+    LaunchedEffect(Unit) { vm.onCreate() }
     DisposableEffect(webView) {
         onDispose {
             try {
@@ -119,25 +112,16 @@ fun AddNotationCard(
     LaunchedEffect(resetOffset) {
         if (resetOffset) {
             offset = Offset.Zero
-            navVM.resetDone()
+            vm.resetDone()
         }
     }
     Box {
         if (showKB) {
-            BackHandler {
-                navVM.toggleKeyboard()
-                navVM.resetOffset()
-            }
             KaTeXMenu(
-                modifier
-                    .fillMaxSize(),
-                /**.onGloballyPositioned { coordinates ->
-                initialPos = coordinates.localToWindow(Offset.Zero)
-
-                }*/
-                { offset },
-                onDismiss = { navVM.toggleKeyboard() },
-                onOffset = { offset += it }, getUIStyle, //initialPos,
+                modifier.fillMaxSize(), offsetProvider = { offset },
+                height = height, width = width,
+                onDismiss = { vm.toggleKeyboard() },
+                onOffset = { offset += it }, getUIStyle = getUIStyle, //initialPos,
                 webView = webView, scrollState = webScrollState
             ) {
                 when (val sel = selectedKB) {
@@ -160,6 +144,7 @@ fun AddNotationCard(
                 }
             }
         }
+
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
             modifier = Modifier
@@ -170,9 +155,7 @@ fun AddNotationCard(
                 fontSize = 25.sp,
                 textAlign = TextAlign.Center,
                 lineHeight = 30.sp,
-                color = getUIStyle.titleColor(),
-                modifier = Modifier
-                    .padding(top = 15.dp)
+                color = getUIStyle.titleColor()
             )
             Row(
                 modifier = Modifier
@@ -181,27 +164,21 @@ fun AddNotationCard(
                 horizontalArrangement = Arrangement.Center
             ) {
                 LatexKeyboard(
-                    value = fields.question.value,
+                    value = fields.question,
                     onValueChanged = { newText ->
-                        fields.question.value =
-                            newText
+                        vm.updateQ(newText)
                     },
                     labelStr = stringResource(R.string.question),
                     modifier = Modifier
-                        .fillMaxWidth()
-                        //.focusRequester(focusQRequester)
-                        .focusRequester(focusRequester)
-                        .onFocusChanged { focusState ->
-                            if (focusState.hasFocus) {
-                                navVM.updateSelectedKB(SelectedKeyboard.Question)
-                                //lastSelectedKB = SelectedKeyboard.Question
-                                Log.d("AddCardVM", "Focused on Question")
-                            }
-                        }
-                        .focusable(),
-                    //focusRequester = focusQRequester,
-                    focusRequester = focusRequester,
+                        .fillMaxWidth(),
                     kt = selectedQSymbol,
+                    onFocusChanged = {
+                        Log.d(kk, "Focused on Question")
+                        vm.updateSelectedKB(SelectedKeyboard.Question)
+                    },
+                    selection = selection, composition = composition,
+                    onUpdateTR = { sel, com -> vm.updateTRs(sel, com) },
+                    selectedKeyboard = selectedKB, actualKeyboard = SelectedKeyboard.Question,
                     onIdle = { selectedQSymbol = KaTeXMenu(null, SelectedAnnotation.Idle) },
                 )
             }
@@ -219,12 +196,11 @@ fun AddNotationCard(
                     .padding(start = 8.dp, end = 8.dp),
                 horizontalAlignment = Alignment.CenterHorizontally
             ) {
-                if (steps == 0) {
+                if (fields.steps.isEmpty()) {
                     Button(
                         onClick = {
-                            fields.stringList.add(mutableStateOf(""))
+                            vm.addStep()
                             selectedSLSymbols.add(KaTeXMenu(null, SelectedAnnotation.Idle))
-                            steps += 1
                         }, modifier = Modifier
                             .padding(8.dp),
                         colors = ButtonDefaults.buttonColors(
@@ -238,33 +214,30 @@ fun AddNotationCard(
                         )
                     }
                 } else {
-                    fields.stringList.forEachIndexed { index, it ->
-                        //val focusRequester = remember { FocusRequester() }
+                    fields.steps.forEachIndexed { index, it ->
                         Row(
                             modifier = Modifier
                                 .fillMaxWidth(),
                             horizontalArrangement = Arrangement.Center
                         ) {
                             LatexKeyboard(
-                                value = it.value,
+                                value = it,
                                 onValueChanged = { newText ->
-                                    it.value = newText
+                                    vm.updateStep(newText, index)
                                 },
                                 labelStr = "Step: ${index + 1}",
                                 modifier = Modifier
                                     .fillMaxWidth()
-                                    .padding(1.dp)
-                                    .focusRequester(focusRequester)
-                                    .onFocusChanged { focusState ->
-                                        if (focusState.hasFocus) {
-                                            navVM.updateSelectedKB(SelectedKeyboard.Step(index))
-                                            //lastSelectedKB = SelectedKeyboard.Step(index)
-                                            Log.d("AddCardVM", "Focused on Step #${index + 1}")
-                                        }
-                                    }
-                                    .focusable(),
-                                focusRequester = focusRequester,
+                                    .padding(vertical = 2.dp),
+                                onFocusChanged = {
+                                    vm.updateSelectedKB(SelectedKeyboard.Step(index))
+                                    Log.d(kk, "Focused on Step #${index + 1}")
+                                },
+                                selection = selection, composition = composition,
+                                onUpdateTR = { sel, com -> vm.updateTRs(sel, com) },
                                 kt = selectedSLSymbols[index],
+                                selectedKeyboard = selectedKB,
+                                actualKeyboard = SelectedKeyboard.Step(index),
                                 onIdle = {
                                     selectedSLSymbols[index] =
                                         KaTeXMenu(null, SelectedAnnotation.Idle)
@@ -275,13 +248,12 @@ fun AddNotationCard(
 
                     Button(
                         onClick = {
-                            fields.stringList.add(mutableStateOf(""))
+                            vm.addStep()
                             selectedSLSymbols.add(KaTeXMenu(null, SelectedAnnotation.Idle))
-                            steps += 1
                             /*val last = lastSelectedKB
                             if (last != null) {
 
-                               navVM.updateSelectedKB(last)
+                               vm.updateSelectedKB(last)
                                 Log.d("AddCardView", "updated.")
                             }*/
                         }, modifier = Modifier
@@ -299,20 +271,16 @@ fun AddNotationCard(
 
                     Button(
                         onClick = {
-                            if (steps > 0) {
+                            if (fields.steps.isNotEmpty()) {
                                 val currently = selectedKB
                                 if (currently is SelectedKeyboard.Step &&
-                                    (currently.index - 1) == fields.stringList.lastIndex
+                                    (currently.index - 1) == fields.steps.lastIndex
                                 ) {
-                                    navVM.resetSelectedKB()
-                                    Log.d(
-                                        "AddCardVM",
-                                        "Reset since Step #${currently.index} lost focus"
-                                    )
+                                    vm.resetSelectedKB()
+                                    Log.d(kk, "Reset since Step #${currently.index} lost focus")
                                 }
-                                steps -= 1
-                                selectedSLSymbols.removeAt(steps)
-                                fields.stringList.removeAt(steps)
+                                selectedSLSymbols.removeAt(selectedSLSymbols.lastIndex)
+                                vm.removeStep()
                             }
                         },
                         modifier = Modifier.padding(top = 4.dp),
@@ -340,30 +308,20 @@ fun AddNotationCard(
                 horizontalArrangement = Arrangement.Center
             ) {
                 LatexKeyboard(
-                    value = fields.answer.value,
+                    value = fields.answer,
                     onValueChanged = { newText ->
-                        fields.answer.value =
-                            newText
+                        vm.updateA(newText)
                     },
                     labelStr = stringResource(R.string.answer),
                     modifier = Modifier
-                        .weight(1f)
-                        //.focusRequester(focusARequester)
-                        .focusRequester(focusRequester)
-                        .onFocusChanged { focusState ->
-                            if (focusState.hasFocus) {
-                                navVM.updateSelectedKB(SelectedKeyboard.Answer)
-                                //lastSelectedKB = SelectedKeyboard.Answer
-                                Log.d("AddCardVM", "Focused on Answer")
-                            } else {
-                                navVM.resetSelectedKB()
-                                Log.d("AddCardVM", "Answer lost focus.")
-                            }
-                        }
-                        .focusable(),
-                    //focusRequester = focusARequester,
-                    focusRequester = focusRequester,
-                    kt = selectedASymbol,
+                        .fillMaxWidth(),
+                    onFocusChanged = {
+                        vm.updateSelectedKB(SelectedKeyboard.Answer)
+                        //lastSelectedKB = SelectedKeyboard.Answer
+                        Log.d(kk, "Focused on Answer")
+                    }, kt = selectedASymbol, selection = selection, composition = composition,
+                    onUpdateTR = { sel, com -> vm.updateTRs(sel, com) },
+                    selectedKeyboard = selectedKB, actualKeyboard = SelectedKeyboard.Answer,
                     onIdle = { selectedASymbol = KaTeXMenu(null, SelectedAnnotation.Idle) }
                 )
             }
@@ -376,14 +334,14 @@ fun AddNotationCard(
                 SubmitButton(
                     onClick = {
                         if (
-                            fields.question.value.isBlank() ||
-                            fields.answer.value.isBlank()
+                            fields.question.isBlank() ||
+                            fields.answer.isBlank()
                         ) {
                             vm.setErrorMessage(fillOutFields)
                             successMessage = ""
                         } else if (
-                            fields.stringList.isNotEmpty() &&
-                            fields.stringList.all { it.value.isBlank() }
+                            fields.steps.isNotEmpty() &&
+                            fields.steps.all { it.isBlank() }
                         ) {
                             vm.setErrorMessage("Steps can't be blank")
                             successMessage = ""
@@ -391,13 +349,9 @@ fun AddNotationCard(
                             coroutineScope.launch {
                                 enabled = false
                                 vm.addNotationCard(
-                                    deck, fields.question.value,
-                                    fields.stringList.map { it.value }, fields.answer.value
+                                    deck, fields.question,
+                                    fields.steps, fields.answer
                                 )
-                                fields.question.value = ""
-                                fields.stringList.clear()
-                                steps = 0
-                                fields.answer.value = ""
                                 successMessage = cardAdded
                                 enabled = true
                             }
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddThreeCard.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddThreeCard.kt
index df0d82d..37b124c 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddThreeCard.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/addCardViews/AddThreeCard.kt
@@ -29,7 +29,6 @@ import com.belmontCrest.cardCrafter.R
 import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.AddCardViewModel
 import com.belmontCrest.cardCrafter.localDatabase.tables.Deck
 import com.belmontCrest.cardCrafter.localDatabase.tables.PartOfQorA
-import com.belmontCrest.cardCrafter.model.ui.Fields
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 import com.belmontCrest.cardCrafter.uiFunctions.EditTextFieldNonDone
 import com.belmontCrest.cardCrafter.uiFunctions.IsPartOfQOrA
@@ -39,10 +38,11 @@ import kotlinx.coroutines.launch
 @Composable
 fun AddThreeCard(
     vm: AddCardViewModel, deck: Deck,
-    fields: Fields, getUIStyle: GetUIStyle
+    getUIStyle: GetUIStyle
 ) {
     val errorMessage by vm.errorMessage.collectAsStateWithLifecycle()
     var successMessage by remember { mutableStateOf("") }
+    val fields by vm.fields.collectAsStateWithLifecycle()
     val fillOutFields = stringResource(R.string.fill_out_all_fields).toString()
     val cardAdded = stringResource(R.string.card_added).toString()
     val scrollState = rememberScrollState()
@@ -57,9 +57,7 @@ fun AddThreeCard(
             fontSize = 25.sp,
             textAlign = TextAlign.Center,
             lineHeight = 30.sp,
-            color = getUIStyle.titleColor(),
-            modifier = Modifier
-                .padding(top = 15.dp)
+            color = getUIStyle.titleColor()
         )
         Row(
             modifier = Modifier
@@ -68,10 +66,9 @@ fun AddThreeCard(
             horizontalArrangement = Arrangement.Center
         ) {
             EditTextFieldNonDone(
-                value = fields.question.value,
+                value = fields.question,
                 onValueChanged = { newText ->
-                    fields.question.value =
-                        newText
+                    vm.updateQ(newText)
                 },
                 labelStr = stringResource(R.string.question),
                 modifier = Modifier
@@ -87,15 +84,13 @@ fun AddThreeCard(
             modifier = Modifier
                 .padding(top = 8.dp)
         )
-        IsPartOfQOrA(getUIStyle, fields.isQOrA.value is PartOfQorA.Q) {
-            fields.isQOrA.value =
-                if (fields.isQOrA.value is PartOfQorA.Q) PartOfQorA.A else PartOfQorA.Q
+        IsPartOfQOrA(getUIStyle, fields.isQOrA is PartOfQorA.Q) {
+            vm.updateQA(if (fields.isQOrA is PartOfQorA.Q) PartOfQorA.A else PartOfQorA.Q)
         }
         EditTextFieldNonDone(
-            value = fields.middleField.value,
+            value = fields.middle,
             onValueChanged = { newText ->
-                fields.middleField.value =
-                    newText
+                vm.updateM(newText)
             },
             labelStr = stringResource(R.string.middle_field),
             modifier = Modifier
@@ -117,10 +112,9 @@ fun AddThreeCard(
             horizontalArrangement = Arrangement.Center
         ) {
             EditTextFieldNonDone(
-                value = fields.answer.value,
+                value = fields.answer,
                 onValueChanged = { newText ->
-                    fields.answer.value =
-                        newText
+                    vm.updateA(newText)
                 },
                 labelStr = stringResource(R.string.answer),
                 modifier = Modifier
@@ -135,22 +129,19 @@ fun AddThreeCard(
         ) {
             Button(
                 onClick = {
-                    if (fields.question.value.isBlank() ||
-                        fields.answer.value.isBlank() ||
-                        fields.middleField.value.isBlank()
+                    if (fields.question.isBlank() ||
+                        fields.answer.isBlank() ||
+                        fields.middle.isBlank()
                     ) {
                         vm.setErrorMessage(fillOutFields)
                         successMessage = ""
                     } else {
                         coroutineScope.launch {
                             vm.addThreeCard(
-                                deck, fields.question.value,
-                                fields.middleField.value, fields.answer.value,
-                                fields.isQOrA.value
+                                deck, fields.question,
+                                fields.middle, fields.answer,
+                                fields.isQOrA
                             )
-                            fields.question.value = ""
-                            fields.middleField.value = ""
-                            fields.answer.value = ""
                             successMessage = cardAdded
                         }
                     }
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/cardDeckViews/BackCards.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/cardDeckViews/BackCards.kt
index 492c963..9f9f5d9 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/cardDeckViews/BackCards.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/cardDeckViews/BackCards.kt
@@ -18,12 +18,12 @@ import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.compose.ui.zIndex
 import com.belmontCrest.cardCrafter.localDatabase.tables.BasicCard
 import com.belmontCrest.cardCrafter.localDatabase.tables.CT
 import com.belmontCrest.cardCrafter.localDatabase.tables.HintCard
 import com.belmontCrest.cardCrafter.localDatabase.tables.NotationCard
 import com.belmontCrest.cardCrafter.localDatabase.tables.MultiChoiceCard
-import com.belmontCrest.cardCrafter.localDatabase.tables.PartOfQorA
 import com.belmontCrest.cardCrafter.localDatabase.tables.ThreeFieldCard
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 import com.belmontCrest.cardCrafter.uiFunctions.katex.KaTeXWebView
@@ -54,7 +54,11 @@ fun NotationBackCard(notationCard: NotationCard, getUIStyle: GetUIStyle) {
                 }
                 append("<p>${notationCard.answer}</p>")
             }
-            KaTeXWebView(longString, getUIStyle)
+            KaTeXWebView(
+                longString, getUIStyle, Modifier
+                    .zIndex(-1f)
+                    .fillMaxWidth()
+            )
         }
     }
 }
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/cardDeckViews/CardDeckView.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/cardDeckViews/CardDeckView.kt
index 7fb6540..687b21f 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/cardDeckViews/CardDeckView.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/cardDeckViews/CardDeckView.kt
@@ -43,7 +43,7 @@ import com.belmontCrest.cardCrafter.controller.cardHandlers.toCard
 import com.belmontCrest.cardCrafter.controller.cardHandlers.updateCTCard
 import com.belmontCrest.cardCrafter.controller.cardHandlers.updateDecksCardList
 import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.CardDeckViewModel
-import com.belmontCrest.cardCrafter.model.ui.CardState
+import com.belmontCrest.cardCrafter.model.ui.states.CardState
 import com.belmontCrest.cardCrafter.localDatabase.tables.Deck
 import com.belmontCrest.cardCrafter.model.ui.Fields
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/cardDeckViews/FrontCards.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/cardDeckViews/FrontCards.kt
index 60c34c5..835bdf2 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/cardDeckViews/FrontCards.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/cardDeckViews/FrontCards.kt
@@ -24,6 +24,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.compose.ui.zIndex
 import com.belmontCrest.cardCrafter.localDatabase.tables.BasicCard
 import com.belmontCrest.cardCrafter.localDatabase.tables.HintCard
 import com.belmontCrest.cardCrafter.localDatabase.tables.MultiChoiceCard
@@ -346,7 +347,11 @@ fun NotationFrontCard(notationCard: NotationCard, getUIStyle: GetUIStyle) {
                 indication = null
             ) { focusManager.clearFocus() }
         ) {
-            KaTeXWebView(notationCard.question, getUIStyle)
+            KaTeXWebView(
+                notationCard.question, getUIStyle, Modifier
+                    .zIndex(-1f)
+                    .fillMaxWidth()
+            )
         }
     }
 }
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditBasicCard.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditBasicCard.kt
index fa239d6..75fb313 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditBasicCard.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditBasicCard.kt
@@ -2,26 +2,26 @@ package com.belmontCrest.cardCrafter.views.cardViews.editCardViews
 
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.belmontCrest.cardCrafter.R
-import com.belmontCrest.cardCrafter.model.ui.Fields
+import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.EditCardViewModel
 import com.belmontCrest.cardCrafter.uiFunctions.EditTextFieldNonDone
 
 @Composable
-fun EditBasicCard(
-    fields: Fields,
-) {
-
+fun EditBasicCard(vm: EditCardViewModel) {
+    val fields by vm.fields.collectAsStateWithLifecycle()
     EditTextFieldNonDone(
-        value = fields.question.value,
-        onValueChanged = { fields.question.value = it },
+        value = fields.question,
+        onValueChanged = { vm.updateQ(it) },
         labelStr = stringResource(R.string.question),
         modifier = Modifier.fillMaxWidth()
     )
     EditTextFieldNonDone(
-        value = fields.answer.value,
-        onValueChanged = { fields.answer.value = it },
+        value = fields.answer,
+        onValueChanged = { vm.updateA(it) },
         labelStr = stringResource(R.string.answer),
         modifier = Modifier.fillMaxWidth()
     )
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditChoiceCard.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditChoiceCard.kt
index 3495ea4..49622e5 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditChoiceCard.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditChoiceCard.kt
@@ -3,53 +3,49 @@ package com.belmontCrest.cardCrafter.views.cardViews.editCardViews
 
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.belmontCrest.cardCrafter.R
-import com.belmontCrest.cardCrafter.model.ui.Fields
+import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.EditCardViewModel
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 import com.belmontCrest.cardCrafter.uiFunctions.EditTextField
 import com.belmontCrest.cardCrafter.uiFunctions.EditTextFieldNonDone
 import com.belmontCrest.cardCrafter.views.miscFunctions.PickAnswerChar
 
 @Composable
-fun EditChoiceCard(
-    fields: Fields,
-    getUIStyle: GetUIStyle
-) {
-
-
+fun EditChoiceCard(vm: EditCardViewModel, getUIStyle: GetUIStyle) {
+    val fields by vm.fields.collectAsStateWithLifecycle()
     EditTextFieldNonDone(
-        value = fields.question.value,
-        onValueChanged = {
-            fields.question.value = it
-        },
+        value = fields.question,
+        onValueChanged = { vm.updateQ(it) },
         labelStr = stringResource(R.string.question),
         modifier = Modifier.fillMaxWidth()
     )
     EditTextField(
-        value = fields.choices[0].value,
-        onValueChanged = { fields.choices[0].value = it },
+        value = fields.choices[0],
+        onValueChanged = { vm.updateCh(it, 0) },
         labelStr = stringResource(R.string.choice_a),
         modifier = Modifier.fillMaxWidth()
     )
     EditTextField(
-        value = fields.choices[1].value,
-        onValueChanged = { fields.choices[1].value = it },
+        value = fields.choices[1],
+        onValueChanged = { vm.updateCh(it, 1) },
         labelStr = stringResource(R.string.choice_b),
         modifier = Modifier.fillMaxWidth()
     )
     EditTextField(
-        value = fields.choices[2].value,
-        onValueChanged = { fields.choices[2].value = it },
+        value = fields.choices[2],
+        onValueChanged = { vm.updateCh(it, 2) },
         labelStr = stringResource(R.string.choice_c),
         modifier = Modifier.fillMaxWidth()
     )
     EditTextField(
-        value = fields.choices[3].value,
-        onValueChanged = { fields.choices[3].value = it },
+        value = fields.choices[3],
+        onValueChanged = { vm.updateCh(it, 3) },
         labelStr = stringResource(R.string.choice_d),
         modifier = Modifier.fillMaxWidth()
     )
-    PickAnswerChar(fields, getUIStyle)
+    PickAnswerChar(fields, getUIStyle) { correct -> vm.updateCor(correct) }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditHintCard.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditHintCard.kt
index 43d4992..bdc58c4 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditHintCard.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditHintCard.kt
@@ -2,31 +2,32 @@ package com.belmontCrest.cardCrafter.views.cardViews.editCardViews
 
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.belmontCrest.cardCrafter.R
-import com.belmontCrest.cardCrafter.model.ui.Fields
+import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.EditCardViewModel
 import com.belmontCrest.cardCrafter.uiFunctions.EditTextFieldNonDone
 
 @Composable
-fun EditHintCard(
-    fields: Fields
-) {
+fun EditHintCard(vm: EditCardViewModel) {
+    val fields by vm.fields.collectAsStateWithLifecycle()
     EditTextFieldNonDone(
-        value = fields.question.value,
-        onValueChanged = { fields.question.value = it },
+        value = fields.question,
+        onValueChanged = { vm.updateQ(it) },
         labelStr = stringResource(R.string.question),
         modifier = Modifier.fillMaxWidth()
     )
     EditTextFieldNonDone(
-        value = fields.middleField.value,
-        onValueChanged = { fields.middleField.value = it },
+        value = fields.middle,
+        onValueChanged = { vm.updateM(it) },
         labelStr = stringResource(R.string.hint_field),
         modifier = Modifier.fillMaxWidth()
     )
     EditTextFieldNonDone(
-        value = fields.answer.value,
-        onValueChanged = { fields.answer.value = it },
+        value = fields.answer,
+        onValueChanged = { vm.updateA(it) },
         labelStr = stringResource(R.string.answer),
         modifier = Modifier.fillMaxWidth()
     )
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditNotationCard.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditNotationCard.kt
index 911ac17..1ca34b4 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditNotationCard.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditNotationCard.kt
@@ -1,7 +1,6 @@
 package com.belmontCrest.cardCrafter.views.cardViews.editCardViews
 
 import android.util.Log
-import androidx.compose.foundation.focusable
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Button
@@ -11,49 +10,47 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.setValue
-import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.focus.FocusRequester
-import androidx.compose.ui.focus.focusRequester
-import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.belmontCrest.cardCrafter.R
-import com.belmontCrest.cardCrafter.model.ui.Fields
-import com.belmontCrest.cardCrafter.model.ui.SelectedKeyboard
-import com.belmontCrest.cardCrafter.navigation.NavViewModel
+import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.EditCardViewModel
+import com.belmontCrest.cardCrafter.model.ui.states.SelectedKeyboard
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 import com.belmontCrest.cardCrafter.uiFunctions.LatexKeyboard
 import com.belmontCrest.cardCrafter.uiFunctions.katex.menu.KaTeXMenu
 import com.belmontCrest.cardCrafter.uiFunctions.katex.menu.SelectedAnnotation
 import com.belmontCrest.cardCrafter.uiFunctions.showToastMessage
+import com.belmontCrest.cardCrafter.views.miscFunctions.collectNotationFieldsAsStates
+import com.belmontCrest.cardCrafter.views.miscFunctions.collectTextRangesAsStates
+
+
+private object KeyboardInputs {
+    const val KK = "KatexKeyBoard"
+}
 
 @Composable
 fun EditNotationCard(
-    fields: Fields, vm: NavViewModel,
+    vm: EditCardViewModel,
     getUIStyle: GetUIStyle, onUpdate: () -> KaTeXMenu
 ) {
-    var steps by rememberSaveable { mutableIntStateOf(fields.stringList.size) }
-    val focusRequester = remember { FocusRequester() }
+    val (fields, _, selectedKB) = collectNotationFieldsAsStates(vm)
+    val kk = KeyboardInputs.KK
     var selectedQSymbol by rememberSaveable {
         mutableStateOf(KaTeXMenu(null, SelectedAnnotation.Idle))
     }
     var selectedASymbol by rememberSaveable {
         mutableStateOf(KaTeXMenu(null, SelectedAnnotation.Idle))
     }
-    var selectedSLSymbols = rememberSaveable {
-        MutableList<KaTeXMenu>(fields.stringList.size) {
-            KaTeXMenu(null, SelectedAnnotation.Idle)
-        }
-    }
-    val selectedKB by vm.selectedKB.collectAsStateWithLifecycle()
+    val selectedSLSymbols by vm.selectedSLSymbols.collectAsStateWithLifecycle()
+    val (selection, composition) = collectTextRangesAsStates(vm)
     val context = LocalContext.current
+    LaunchedEffect(Unit) { vm.onCreate() }
     LaunchedEffect(onUpdate()) {
         when (val sel = selectedKB) {
             is SelectedKeyboard.Question -> {
@@ -61,7 +58,7 @@ fun EditNotationCard(
             }
 
             is SelectedKeyboard.Step -> {
-                selectedSLSymbols[sel.index] = onUpdate()
+                vm.updateSelectedSymbol(onUpdate(), sel.index)
             }
 
             is SelectedKeyboard.Answer -> {
@@ -78,30 +75,24 @@ fun EditNotationCard(
     }
 
     LatexKeyboard(
-        value = fields.question.value,
-        onValueChanged = { fields.question.value = it },
+        value = fields.question,
+        onValueChanged = { vm.updateQ(it) },
         labelStr = stringResource(R.string.question),
         modifier = Modifier
-            .fillMaxWidth()
-            .focusRequester(focusRequester)
-            .onFocusChanged { focusState ->
-                if (focusState.hasFocus) {
-                    vm.updateSelectedKB(SelectedKeyboard.Question)
-                    //lastSelectedKB = SelectedKeyboard.Question
-                    Log.d("AddCardVM", "Focused on Question")
-                }
-            }
-            .focusable(),
-        focusRequester = focusRequester,
+            .fillMaxWidth(),
         kt = selectedQSymbol,
+        onFocusChanged = {
+            Log.d(kk, "Focused on Question")
+            vm.updateSelectedKB(SelectedKeyboard.Question)
+        }, selection = selection, composition = composition,
+        onUpdateTR = { sel, com -> vm.updateTRs(sel, com) },
+        selectedKeyboard = selectedKB, actualKeyboard = SelectedKeyboard.Question,
         onIdle = { selectedQSymbol = KaTeXMenu(null, SelectedAnnotation.Idle) }
     )
-    if (steps == 0) {
+    if (fields.steps.isEmpty()) {
         Button(
             onClick = {
-                fields.stringList.add(mutableStateOf(""))
-                selectedSLSymbols.add(KaTeXMenu(null, SelectedAnnotation.Idle))
-                steps += 1
+                vm.addStep()
             }, modifier = Modifier
                 .padding(8.dp),
             colors = ButtonDefaults.buttonColors(
@@ -115,40 +106,34 @@ fun EditNotationCard(
             )
         }
     } else {
-        fields.stringList.forEachIndexed { index, string ->
+        fields.steps.forEachIndexed { index, string ->
+            if (selectedSLSymbols.size != fields.steps.size) return@forEachIndexed
             val indexedModifier = if (index == 0) {
                 Modifier.padding(top = 5.dp, start = 0.5.dp, end = 0.5.dp, bottom = 1.dp)
             } else {
-                Modifier.padding(1.dp)
+                Modifier.padding(vertical = 2.dp)
             }
             LatexKeyboard(
-                value = string.value,
-                onValueChanged = { string.value = it },
+                value = string,
+                onValueChanged = { vm.updateStep(it, index) },
                 labelStr = "Step: ${index + 1}",
                 modifier = indexedModifier
-                    .fillMaxWidth()
-                    .focusRequester(focusRequester)
-                    .onFocusChanged { focusState ->
-                        if (focusState.hasFocus) {
-                            vm.updateSelectedKB(SelectedKeyboard.Step(index))
-                            //lastSelectedKB = SelectedKeyboard.Step(index)
-                            Log.d("AddCardVM", "Focused on Step #${index + 1}")
-                        }
-                    }
-                    .focusable(),
-                focusRequester = focusRequester,
-                kt = selectedSLSymbols[index],
+                    .fillMaxWidth(),
+                onFocusChanged = {
+                    vm.updateSelectedKB(SelectedKeyboard.Step(index))
+                    Log.d(kk, "Focused on Step #${index + 1}")
+                }, kt = selectedSLSymbols[index], selection = selection, composition = composition,
+                onUpdateTR = { sel, com -> vm.updateTRs(sel, com) },
+                selectedKeyboard = selectedKB,
+                actualKeyboard = SelectedKeyboard.Step(index),
                 onIdle = {
-                    selectedSLSymbols[index] =
-                        KaTeXMenu(null, SelectedAnnotation.Idle)
+                    vm.updateSelectedSymbol(KaTeXMenu(null, SelectedAnnotation.Idle), index)
                 }
             )
         }
         Button(
             onClick = {
-                fields.stringList.add(mutableStateOf(""))
-                selectedSLSymbols.add(KaTeXMenu(null, SelectedAnnotation.Idle))
-                steps += 1
+                vm.addStep()
             }, modifier = Modifier
                 .padding(8.dp),
             colors = ButtonDefaults.buttonColors(
@@ -163,10 +148,15 @@ fun EditNotationCard(
         }
         Button(
             onClick = {
-                if (steps > 0) {
-                    steps -= 1
-                    fields.stringList.removeAt(steps)
-                    selectedSLSymbols.removeAt(steps)
+                if (fields.steps.isNotEmpty()) {
+                    val currently = selectedKB
+                    if (currently is SelectedKeyboard.Step &&
+                        (currently.index - 1) == fields.steps.lastIndex
+                    ) {
+                        vm.resetSelectedKB()
+                        Log.d(kk, "Reset since Step #${currently.index} lost focus")
+                    }
+                    vm.removeStep()
                 }
             },
             modifier = Modifier.padding(top = 4.dp),
@@ -179,25 +169,18 @@ fun EditNotationCard(
         }
     }
     LatexKeyboard(
-        value = fields.answer.value,
-        onValueChanged = { fields.answer.value = it },
+        value = fields.answer,
+        onValueChanged = { vm.updateA(it) },
         labelStr = stringResource(R.string.answer),
         modifier = Modifier
-            .fillMaxWidth()
-            .focusRequester(focusRequester)
-            .onFocusChanged { focusState ->
-                if (focusState.hasFocus) {
-                    vm.updateSelectedKB(SelectedKeyboard.Answer)
-                    //lastSelectedKB = SelectedKeyboard.Answer
-                    Log.d("AddCardVM", "Focused on Answer")
-                } else {
-                    vm.resetSelectedKB()
-                    Log.d("AddCardVM", "Answer lost focus.")
-                }
-            }
-            .focusable(),
-        focusRequester = focusRequester,
-        kt = selectedASymbol,
+            .fillMaxWidth(),
+        onFocusChanged = {
+            vm.updateSelectedKB(SelectedKeyboard.Answer)
+            //lastSelectedKB = SelectedKeyboard.Answer
+            Log.d(kk, "Focused on Answer")
+        }, kt = selectedASymbol, selection = selection, composition = composition,
+        onUpdateTR = { sel, com -> vm.updateTRs(sel, com) },
+        selectedKeyboard = selectedKB, actualKeyboard = SelectedKeyboard.Answer,
         onIdle = { selectedASymbol = KaTeXMenu(null, SelectedAnnotation.Idle) }
     )
 }
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditThreeCard.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditThreeCard.kt
index 8d2c206..711fb03 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditThreeCard.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditThreeCard.kt
@@ -2,39 +2,38 @@ package com.belmontCrest.cardCrafter.views.cardViews.editCardViews
 
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
-
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.belmontCrest.cardCrafter.R
+import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.EditCardViewModel
 import com.belmontCrest.cardCrafter.localDatabase.tables.PartOfQorA
-import com.belmontCrest.cardCrafter.model.ui.Fields
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 import com.belmontCrest.cardCrafter.uiFunctions.EditTextFieldNonDone
 import com.belmontCrest.cardCrafter.uiFunctions.IsPartOfQOrA
 
 @Composable
-fun EditThreeCard(
-    fields: Fields, getUIStyle: GetUIStyle
-) {
+fun EditThreeCard(vm: EditCardViewModel, getUIStyle: GetUIStyle) {
+    val fields by vm.fields.collectAsStateWithLifecycle()
     EditTextFieldNonDone(
-        value = fields.question.value,
-        onValueChanged = { fields.question.value = it },
+        value = fields.question,
+        onValueChanged = { vm.updateQ(it) },
         labelStr = stringResource(R.string.question),
         modifier = Modifier.fillMaxWidth()
     )
-    IsPartOfQOrA(getUIStyle, fields.isQOrA.value is PartOfQorA.Q) {
-        fields.isQOrA.value =
-            if (fields.isQOrA.value is PartOfQorA.Q) PartOfQorA.A else PartOfQorA.Q
+    IsPartOfQOrA(getUIStyle, fields.isQOrA is PartOfQorA.Q) {
+        vm.updateQA(if (fields.isQOrA is PartOfQorA.Q) PartOfQorA.A else PartOfQorA.Q)
     }
     EditTextFieldNonDone(
-        value = fields.middleField.value,
-        onValueChanged = { fields.middleField.value = it },
+        value = fields.middle,
+        onValueChanged = { vm.updateM(it) },
         labelStr = stringResource(R.string.middle_field),
         modifier = Modifier.fillMaxWidth()
     )
     EditTextFieldNonDone(
-        value = fields.answer.value,
-        onValueChanged = { fields.answer.value = it },
+        value = fields.answer,
+        onValueChanged = { vm.updateA(it) },
         labelStr = stringResource(R.string.answer),
         modifier = Modifier.fillMaxWidth()
     )
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditingCardView.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditingCardView.kt
index 723f1de..99f5ed9 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditingCardView.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditingCardView.kt
@@ -2,7 +2,6 @@ package com.belmontCrest.cardCrafter.views.cardViews.editCardViews
 
 import android.os.Build
 import android.util.Log
-import androidx.activity.compose.BackHandler
 import androidx.annotation.RequiresApi
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -42,8 +41,7 @@ import com.belmontCrest.cardCrafter.controller.onClickActions.saveCard
 import com.belmontCrest.cardCrafter.controller.onClickActions.updateCardType
 import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.EditCardViewModel
 import com.belmontCrest.cardCrafter.localDatabase.tables.CT
-import com.belmontCrest.cardCrafter.model.ui.Fields
-import com.belmontCrest.cardCrafter.navigation.NavViewModel
+import com.belmontCrest.cardCrafter.model.application.PreferenceValues
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 import com.belmontCrest.cardCrafter.ui.theme.boxViewsModifier
 import com.belmontCrest.cardCrafter.ui.theme.editCardModifier
@@ -52,25 +50,27 @@ import com.belmontCrest.cardCrafter.uiFunctions.buttons.SubmitButton
 import com.belmontCrest.cardCrafter.uiFunctions.katex.menu.KaTeXMenu
 import com.belmontCrest.cardCrafter.uiFunctions.katex.menu.SelectedAnnotation
 import com.belmontCrest.cardCrafter.uiFunctions.katex.menu.getWebView
+import com.belmontCrest.cardCrafter.views.miscFunctions.collectNotationFieldsAsStates
 import kotlinx.coroutines.launch
 
 class EditingCardView(
-    private var getUIStyle: GetUIStyle, private val navVM: NavViewModel
+    private var getUIStyle: GetUIStyle,
+    private val pv: PreferenceValues,
 ) {
     @RequiresApi(Build.VERSION_CODES.Q)
     @Composable
     fun EditFlashCardView(
-        ct: CT, fields: Fields, onNavigateBack: () -> Unit
+        ct: CT, newType: String, onNavigateBack: () -> Unit
     ) {
         val editCardVM: EditCardViewModel = viewModel(factory = AppViewModelProvider.Factory)
-        fields.newType = rememberSaveable { mutableStateOf(ct.getCardType()) }
+        val (fields, showKB, _) = collectNotationFieldsAsStates(editCardVM)
+        //fields.newType = rememberSaveable { mutableStateOf(ct.getCardType()) }
         val fillOutfields = stringResource(R.string.fill_out_all_fields).toString()
         val errorMessage by editCardVM.errorMessage.collectAsStateWithLifecycle()
         val coroutineScope = rememberCoroutineScope()
         val cardTypeChanged = rememberSaveable { mutableStateOf(false) }
-        val showKB by navVM.showKatexKeyboard.collectAsStateWithLifecycle()
         var offset by remember { mutableStateOf(Offset.Zero) }
-        val resetOffset by navVM.resetOffset.collectAsStateWithLifecycle()
+        val resetOffset by editCardVM.resetOffset.collectAsStateWithLifecycle()
         var ktm by rememberSaveable { mutableStateOf(KaTeXMenu(null, SelectedAnnotation.Idle)) }
         //var initialPos by remember { mutableStateOf<Offset?>(null) }
         val webView = getWebView(getUIStyle) { notation, sa ->
@@ -89,7 +89,7 @@ class EditingCardView(
         LaunchedEffect(resetOffset) {
             if (resetOffset) {
                 offset = Offset.Zero
-                navVM.resetDone()
+                editCardVM.resetDone()
             }
         }
 
@@ -99,23 +99,14 @@ class EditingCardView(
                 .padding(top = 10.dp)
         ) {
             if (showKB) {
-                BackHandler {
-                    navVM.toggleKeyboard()
-                    navVM.resetOffset()
-                }
                 KaTeXMenu(
                     Modifier
                         .fillMaxSize()
-                        /** .onGloballyPositioned { coordinates ->
-                        initialPos = coordinates.localToWindow(Offset.Zero)
-                        Log.i("KatexMenu", "$initialPos")
-                        // Measure the menu’s total size (header + WebView):
-                        }*/
                         .zIndex(2f)
                         .padding(6.dp),
-                    { offset }, onDismiss = { navVM.toggleKeyboard() },
-                    onOffset = { offset += it }, getUIStyle, //initialPos,
-                    webView = webView, scrollState = webScrollState
+                    offsetProvider = { offset }, onDismiss = { editCardVM.toggleKeyboard() },
+                    onOffset = { offset += it }, getUIStyle = getUIStyle, width = pv.width,
+                    webView = webView, scrollState = webScrollState, height = pv.height
                 ) {
                     ktm = KaTeXMenu("null", it)
                 }
@@ -136,16 +127,12 @@ class EditingCardView(
                     modifier = Modifier.editCardModifier()
                 )
 
-                val cardTypeHandler = returnCardTypeHandler(
-                    fields.newType.value, ct.getCardType()
-                )
-                if (fields.newType.value != ct.getCardType()) {
+                val cardTypeHandler = returnCardTypeHandler(newType, ct.getCardType())
+                if (newType != ct.getCardType()) {
                     cardTypeChanged.value = true
                 }
                 cardTypeHandler?.HandleCardEdit(
-                    ct = ct, fields = fields,
-                    changed = cardTypeChanged.value,
-                    vm = navVM,
+                    vm = editCardVM,
                     getUIStyle = getUIStyle,
                     onUpdate = { ktm }
                 )
@@ -167,7 +154,7 @@ class EditingCardView(
                     SubmitButton(
                         onClick = {
                             coroutineScope.launch {
-                                if (fields.newType.value == ct.getCardType()) {
+                                if (newType == ct.getCardType()) {
                                     val success = saveCard(fields, editCardVM, ct)
                                     if (success) {
                                         editCardVM.clearErrorMessage()
@@ -176,9 +163,7 @@ class EditingCardView(
                                         editCardVM.setErrorMessage(fillOutfields)
                                     }
                                 } else {
-                                    val success = updateCardType(
-                                        fields, editCardVM, ct, fields.newType.value
-                                    )
+                                    val success = updateCardType(fields, editCardVM, ct, newType)
                                     if (success) {
                                         editCardVM.clearErrorMessage()
                                         onNavigateBack()
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditingCardsList.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditingCardsList.kt
index 1d4fb93..4beaf93 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditingCardsList.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/cardViews/editCardViews/EditingCardsList.kt
@@ -31,6 +31,7 @@ import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.belmontCrest.cardCrafter.R
 import com.belmontCrest.cardCrafter.controller.cardHandlers.getCardId
+import com.belmontCrest.cardCrafter.controller.cardHandlers.getCardType
 import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.EditingCardListViewModel
 import com.belmontCrest.cardCrafter.localDatabase.tables.CT
 import com.belmontCrest.cardCrafter.model.TAProp
@@ -114,6 +115,7 @@ class EditCardsList(
                                     enabled = false
                                     fields.scrollPosition.value = index
                                     fields.isEditing.value = true
+                                    navVM.updateType(filtered[index].getCardType())
                                     goToEditCard(filtered[index].getCardId())
                                     enabled = true
                                 }
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/mainViews/BoxedOptions.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/mainViews/BoxedOptions.kt
new file mode 100644
index 0000000..c2a4401
--- /dev/null
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/mainViews/BoxedOptions.kt
@@ -0,0 +1,67 @@
+package com.belmontCrest.cardCrafter.views.mainViews
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.belmontCrest.cardCrafter.R
+import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
+import com.belmontCrest.cardCrafter.ui.theme.generalSettingsOptionsModifier
+import com.belmontCrest.cardCrafter.uiFunctions.EditIntField
+import com.belmontCrest.cardCrafter.uiFunctions.buttons.SubmitButton
+
+@Composable
+fun ExpandedIntBoxedOptions(
+    onClick: () -> Unit, getUIStyle: GetUIStyle, string: MutableState<String>,
+    success: Boolean, text: String
+) {
+    Column(
+        modifier = Modifier.generalSettingsOptionsModifier(getUIStyle.getColorScheme()),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Text(
+            text = text,
+            fontSize = 18.sp,
+            textAlign = TextAlign.Center,
+            lineHeight = 20.sp,
+            fontStyle = FontStyle.Italic,
+            color = getUIStyle.titleColor(),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(vertical = 4.dp)
+        )
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.SpaceAround
+        ) {
+            EditIntField(
+                value = string.value,
+                onValueChanged = { string.value = it },
+                labelStr = text,
+                modifier = Modifier
+                    .fillMaxWidth(0.30f)
+                    .padding(vertical = 1.dp, horizontal = 2.dp)
+            )
+            SubmitButton(
+                onClick = { onClick() }, enabled = !success,
+                modifier = Modifier
+                    .fillMaxWidth(0.44f)
+                    .padding(vertical = 1.dp, horizontal = 2.dp),
+                getUIStyle = getUIStyle,
+                string = stringResource(R.string.save),
+                textColor = getUIStyle.titleColor()
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/mainViews/DefaultDeckOptions.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/mainViews/DefaultDeckOptions.kt
index 25e46ee..dc0a91a 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/mainViews/DefaultDeckOptions.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/mainViews/DefaultDeckOptions.kt
@@ -2,35 +2,27 @@ package com.belmontCrest.cardCrafter.views.mainViews
 
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.belmontCrest.cardCrafter.R
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
-import com.belmontCrest.cardCrafter.ui.theme.generalSettingsOptionsModifier
-import com.belmontCrest.cardCrafter.uiFunctions.EditIntField
 
 @Composable
 fun DefaultDeckOptions(
@@ -40,13 +32,10 @@ fun DefaultDeckOptions(
     cardAmount: MutableState<String>,
     reviewSuccess: Boolean,
     cardSuccess: Boolean,
-    clicked: Boolean,
     getUIStyle: GetUIStyle
 ) {
-    var expanded by remember { mutableStateOf(false) }
-    if (clicked) {
-        expanded = false
-    }
+    var expanded by rememberSaveable { mutableStateOf(false) }
+
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
         modifier = Modifier
@@ -72,151 +61,19 @@ fun DefaultDeckOptions(
             modifier = Modifier
                 .padding(vertical = 4.dp)
                 .fillMaxWidth()
-                .clickable {
-                    if (!clicked) {
-                        expanded = !expanded
-                    }
-                }
+                .clickable { expanded = !expanded }
         )
         if (expanded) {
-            Column(
-                modifier = Modifier
-                    .generalSettingsOptionsModifier(getUIStyle.getColorScheme()),
-            ) {
-                Text(
-                    text = stringResource(R.string.review_amount),
-                    fontSize = 18.sp,
-                    textAlign = TextAlign.Center,
-                    lineHeight = 20.sp,
-                    fontStyle = FontStyle.Italic,
-                    color = getUIStyle.titleColor(),
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(vertical = 4.dp)
-                )
-                Row(
-                    modifier = Modifier.fillMaxWidth(),
-                    horizontalArrangement = Arrangement.SpaceAround
-                ) {
-                    EditIntField(
-                        value = reviewAmount.value,
-                        onValueChanged = {
-                            reviewAmount.value = it
-                        },
-                        labelStr = stringResource(R.string.review_amount),
-                        modifier = Modifier
-                            .fillMaxWidth(0.30f)
-                            .padding(vertical = 1.dp, horizontal = 2.dp)
-                    )
-                    Button(
-                        onClick = { changeReviewAmount() },
-                        modifier = Modifier
-                            .fillMaxWidth(0.44f)
-                            .padding(vertical = 1.dp, horizontal = 2.dp)
-                            .align(Alignment.CenterVertically),
-                        colors = ButtonDefaults.buttonColors(
-                            containerColor = getUIStyle.secondaryButtonColor(),
-                            contentColor = getUIStyle.buttonTextColor()
-                        )
-                    ) {
-                        Text(
-                            text = stringResource(R.string.save),
-                            color = if (!reviewSuccess) {
-                                getUIStyle.titleColor()
-                            } else {
-                                if (getUIStyle.getIsDarkTheme()) {
-                                    Color.Green
-                                } else {
-                                    Color(32, 133, 36, 255)
-                                }
-                            }
-                        )
-                    }
-                }
-            }
-            Column(
-                modifier = Modifier
-                    .generalSettingsOptionsModifier(getUIStyle.getColorScheme()),
-            ) {
-                Text(
-                    text = stringResource(R.string.card_amount),
-                    fontSize = 18.sp,
-                    textAlign = TextAlign.Center,
-                    lineHeight = 20.sp,
-                    fontStyle = FontStyle.Italic,
-                    color = getUIStyle.titleColor(),
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(vertical = 4.dp)
-                )
-                Row(
-                    modifier = Modifier.fillMaxWidth(),
-                    horizontalArrangement = Arrangement.SpaceAround
-                ) {
-                    EditIntField(
-                        value = cardAmount.value,
-                        onValueChanged = {
-                            cardAmount.value = it
-                        },
-                        labelStr = stringResource(R.string.card_amount),
-                        modifier = Modifier
-                            .fillMaxWidth(0.30f)
-                            .padding(vertical = 1.dp, horizontal = 2.dp)
-                    )
-                    Button(
-                        onClick = { changeCardAmount() },
-                        modifier = Modifier
-                            .fillMaxWidth(0.44f)
-                            .padding(vertical = 1.dp, horizontal = 2.dp)
-                            .align(Alignment.CenterVertically),
-                        colors = ButtonDefaults.buttonColors(
-                            containerColor = getUIStyle.secondaryButtonColor(),
-                            contentColor = getUIStyle.buttonTextColor()
-                        )
-                    ) {
-                        Text(
-                            text = stringResource(R.string.save),
-                            color = if (!cardSuccess) {
-                                getUIStyle.titleColor()
-                            } else {
-                                Color.Green
-                            }
-                        )
-                    }
-                }
-            }
+            ExpandedIntBoxedOptions(
+                onClick = changeReviewAmount, getUIStyle = getUIStyle,
+                string = reviewAmount, success = reviewSuccess,
+                text = stringResource(R.string.review_amount)
+            )
+            ExpandedIntBoxedOptions(
+                onClick = changeCardAmount, getUIStyle = getUIStyle,
+                string = cardAmount, success = cardSuccess,
+                text = stringResource(R.string.card_amount)
+            )
         }
     }
-}
-
-@Composable
-fun InvalidXXAmount(
-    pressed: MutableState<Boolean>,
-    getUIStyle: GetUIStyle,
-    error: String
-) {
-    if (pressed.value) {
-        AlertDialog(
-            onDismissRequest = { pressed.value = false },
-            title = { Text("Invalid") },
-            text = {
-                Text(
-                    text = error,
-                    color = getUIStyle.titleColor()
-                )
-            },
-            confirmButton = {},
-            dismissButton = {
-                Button(
-                    onClick = { pressed.value = false },
-                    colors = ButtonDefaults.buttonColors(
-                        containerColor = getUIStyle.secondaryButtonColor(),
-                        contentColor = getUIStyle.buttonTextColor()
-                    )
-                ) {
-                    Text("Ok")
-                }
-            }
-        )
-    }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/mainViews/GeneralSettings.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/mainViews/GeneralSettings.kt
index ff6fe10..4d5dd18 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/mainViews/GeneralSettings.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/mainViews/GeneralSettings.kt
@@ -2,20 +2,26 @@ package com.belmontCrest.cardCrafter.views.mainViews
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
+import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import com.belmontCrest.cardCrafter.R
-import com.belmontCrest.cardCrafter.model.ui.PreferencesManager
+import com.belmontCrest.cardCrafter.model.application.PreferencesManager
+import com.belmontCrest.cardCrafter.model.application.setPreferenceValues
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
-import com.belmontCrest.cardCrafter.ui.theme.boxViewsModifier
+import com.belmontCrest.cardCrafter.ui.theme.scrollableBoxViewModifier
 import kotlinx.coroutines.delay
 
 class GeneralSettings(
@@ -24,78 +30,63 @@ class GeneralSettings(
 ) {
     @Composable
     fun SettingsView() {
-        var themeClicked by remember { mutableStateOf(false) }
-        var deckOptionsClicked by remember { mutableStateOf(false) }
-
-        val darkToggled = if (preferences.darkTheme.value)
+        val pc = setPreferenceValues(preferences)
+        val darkToggled = if (pc.darkTheme)
             painterResource(R.drawable.toggle_on) else
             painterResource(R.drawable.toggle_off)
-        val customToggled = if (!preferences.customScheme.value)
+        val customToggled = if (!pc.dynamicTheme)
             painterResource(R.drawable.toggle_on) else
             painterResource(R.drawable.toggle_off)
-        val cuteToggled = if (preferences.cuteTheme.value)
+        val cuteToggled = if (pc.cuteTheme)
             painterResource(R.drawable.toggle_on) else
             painterResource(R.drawable.toggle_off)
-        val reviewAmount = rememberSaveable {
-            mutableStateOf(preferences.reviewAmount.intValue.toString())
-        }
-        val cardAmount = rememberSaveable {
-            mutableStateOf(preferences.cardAmount.intValue.toString())
+        val reviewAmount = rememberSaveable { mutableStateOf(pc.reviewAmount.toString()) }
+        val cardAmount = rememberSaveable { mutableStateOf(pc.cardAmount.toString()) }
+        val height = rememberSaveable { mutableStateOf(pc.height.toString()) }
+        val width = rememberSaveable {
+            mutableStateOf(if (pc.width == Int.MIN_VALUE) "200" else pc.width.toString())
         }
         val invalid = rememberSaveable { mutableStateOf(false) }
         val errorMessage = rememberSaveable { mutableStateOf("") }
         val invalidReview = stringResource(R.string.review_amount_1_40).toString()
         val invalidCards = stringResource(R.string.card_amount_5_1000).toString()
-        //val scrollState = rememberScrollState()
-        var reviewSuccess by remember { mutableStateOf(false) }
-        var cardSuccess by remember { mutableStateOf(false) }
 
-        LaunchedEffect(cardSuccess) {
-            delay(1500)
-            cardSuccess = false
-        }
-        LaunchedEffect(reviewSuccess) {
-            delay(1500)
-            reviewSuccess = false
-        }
+        val (cardSuccess, reviewSuccess, heightSuccess, widthSuccess) = Infinite(
+            remember { mutableStateOf(false) }, remember { mutableStateOf(false) },
+            remember { mutableStateOf(false) }, remember { mutableStateOf(false) }
+        )
+        LaunchedEffect(cardSuccess.value) { delay(1500); cardSuccess.value = false }
+        LaunchedEffect(reviewSuccess.value) { delay(1500); reviewSuccess.value = false }
+        LaunchedEffect(heightSuccess.value) { delay(1500); heightSuccess.value = false }
+        LaunchedEffect(widthSuccess.value) { delay(1500); widthSuccess.value = false }
         Box(
             modifier = Modifier
-                .boxViewsModifier(getUIStyle.getColorScheme())
+                .scrollableBoxViewModifier(rememberScrollState(), getUIStyle.getColorScheme())
         ) {
             InvalidXXAmount(invalid, getUIStyle, errorMessage.value)
-            Column {
+            Column(
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
                 SystemThemeOptions(
-                    customScheme = {
-                        preferences.customScheme.value =
-                            !preferences.customScheme.value
-                        if (preferences.customScheme.value) {
-                            preferences.cuteTheme.value = false
-                            preferences.saveCuteTheme()
+                    toggleDynamicTheme = {
+                        if (!pc.dynamicTheme) {
+                            preferences.saveCuteTheme(false)
                         }
-                        preferences.saveCustomScheme()
-                    },
-                    darkTheme = {
-                        preferences.darkTheme.value = !preferences.darkTheme.value
-                        preferences.saveDarkTheme()
-                    },
-                    cuteTheme = {
-                        preferences.cuteTheme.value = !preferences.cuteTheme.value
-                        preferences.saveCuteTheme()
+                        preferences.saveDynamicTheme()
                     },
+                    toggleDarkTheme = { preferences.saveDarkTheme() },
+                    toggleCuteTheme = { preferences.saveCuteTheme() },
                     customToggled = customToggled,
                     darkToggled = darkToggled,
                     cuteToggled = cuteToggled,
-                    clicked = themeClicked,
-                    isDynamicTheme = preferences.customScheme.value,
+                    isDynamicTheme = pc.dynamicTheme,
                     getUIStyle = getUIStyle
                 )
                 DefaultDeckOptions(
                     changeReviewAmount = {
                         if ((reviewAmount.value.toIntOrNull() ?: 0) in 1..40) {
-                            preferences.reviewAmount.intValue =
-                                reviewAmount.value.toInt()
-                            preferences.saveReviewAmount()
-                            reviewSuccess = true
+                            preferences.saveReviewAmount(reviewAmount.value.toInt())
+                            reviewSuccess.value = true
                         } else {
                             errorMessage.value = invalidReview
                             invalid.value = true
@@ -103,10 +94,8 @@ class GeneralSettings(
                     },
                     changeCardAmount = {
                         if ((cardAmount.value.toIntOrNull() ?: 1) in 5..1000) {
-                            preferences.cardAmount.intValue =
-                                cardAmount.value.toInt()
-                            preferences.saveCardAmount()
-                            cardSuccess = true
+                            preferences.saveCardAmount(cardAmount.value.toInt())
+                            cardSuccess.value = true
                         } else {
                             errorMessage.value = invalidCards
                             invalid.value = true
@@ -114,12 +103,76 @@ class GeneralSettings(
                     },
                     reviewAmount = reviewAmount,
                     cardAmount = cardAmount,
-                    reviewSuccess = reviewSuccess,
-                    cardSuccess = cardSuccess,
-                    clicked = deckOptionsClicked,
+                    reviewSuccess = reviewSuccess.value,
+                    cardSuccess = cardSuccess.value,
+                    getUIStyle = getUIStyle
+                )
+                KatexMenuOptions(
+                    changeMenuHeight = {
+                        if ((height.value.toIntOrNull() ?: 0) in 150..350) {
+                            preferences.saveKatexMenuHeight(height.value.toInt())
+                            heightSuccess.value = true
+                        } else {
+                            errorMessage.value = "Height must be between 150 and 350"
+                            invalid.value = true
+                        }
+                    },
+                    changeMenuWidth = {
+                        if ((width.value.toIntOrNull() ?: 0) in 150..700) {
+                            preferences.saveKatexMenuWidth(width.value.toInt())
+                            widthSuccess.value = true
+                        } else {
+                            errorMessage.value = "Width must be between 150 and 700"
+                            invalid.value = true
+                        }
+                    },
+                    height = height, width = width,
+                    heightSuccess = heightSuccess.value,
+                    widthSuccess = widthSuccess.value,
                     getUIStyle = getUIStyle
                 )
             }
         }
     }
-}
\ No newline at end of file
+}
+
+
+@Composable
+private fun InvalidXXAmount(
+    pressed: MutableState<Boolean>,
+    getUIStyle: GetUIStyle,
+    error: String
+) {
+    if (pressed.value) {
+        AlertDialog(
+            onDismissRequest = { pressed.value = false },
+            title = { Text("Invalid") },
+            text = {
+                Text(
+                    text = error,
+                    color = getUIStyle.titleColor()
+                )
+            },
+            confirmButton = {},
+            dismissButton = {
+                Button(
+                    onClick = { pressed.value = false },
+                    colors = ButtonDefaults.buttonColors(
+                        containerColor = getUIStyle.secondaryButtonColor(),
+                        contentColor = getUIStyle.buttonTextColor()
+                    )
+                ) {
+                    Text(stringResource(R.string.okay))
+                }
+            }
+        )
+    }
+}
+
+
+private data class Infinite<out A, out B, out C, out D>(
+    val first: A,
+    val second: B,
+    val third: C,
+    val fourth: D
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/mainViews/KatexMenuOptions.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/mainViews/KatexMenuOptions.kt
new file mode 100644
index 0000000..067d353
--- /dev/null
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/mainViews/KatexMenuOptions.kt
@@ -0,0 +1,68 @@
+package com.belmontCrest.cardCrafter.views.mainViews
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
+
+@Composable
+fun KatexMenuOptions(
+    getUIStyle: GetUIStyle, changeMenuHeight: () -> Unit, changeMenuWidth: () -> Unit,
+    height: MutableState<String>, width: MutableState<String>,
+    heightSuccess: Boolean, widthSuccess: Boolean
+) {
+    var expanded by rememberSaveable { mutableStateOf(false) }
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(12.dp)
+            .border(
+                width = 2.dp,
+                shape = RoundedCornerShape(12.dp),
+                color = if (getUIStyle.getIsDarkTheme()) Color.Gray else Color.Black
+            )
+    ) {
+        Text(
+            text = "Katex Menu Options",
+            fontSize = 20.sp,
+            lineHeight = 22.sp,
+            fontWeight = FontWeight.Bold,
+            color = getUIStyle.titleColor(),
+            textAlign = TextAlign.Center,
+            modifier = Modifier
+                .padding(vertical = 4.dp)
+                .fillMaxWidth()
+                .clickable { expanded = !expanded }
+        )
+        if (expanded) {
+            ExpandedIntBoxedOptions(
+                onClick = changeMenuHeight, getUIStyle = getUIStyle,
+                string = height, success = heightSuccess,
+                text = "Height"
+            )
+            ExpandedIntBoxedOptions(
+                onClick = changeMenuWidth, getUIStyle = getUIStyle,
+                string = width, success = widthSuccess,
+                text = "Width"
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/mainViews/SystemThemeOptions.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/mainViews/SystemThemeOptions.kt
index d38a265..414c8d0 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/mainViews/SystemThemeOptions.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/mainViews/SystemThemeOptions.kt
@@ -14,7 +14,7 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -30,20 +30,16 @@ import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 
 @Composable
 fun SystemThemeOptions(
-    customScheme: () -> Unit,
-    darkTheme: () -> Unit,
-    cuteTheme: () -> Unit,
+    toggleDynamicTheme: () -> Unit,
+    toggleDarkTheme: () -> Unit,
+    toggleCuteTheme: () -> Unit,
     customToggled: Painter,
     darkToggled: Painter,
     cuteToggled: Painter,
-    clicked: Boolean,
     isDynamicTheme: Boolean,
     getUIStyle: GetUIStyle
 ) {
-    var expanded by remember { mutableStateOf(false) }
-    if (clicked) {
-        expanded = false
-    }
+    var expanded by rememberSaveable { mutableStateOf(false) }
     Box(
         Modifier
             .fillMaxWidth()
@@ -58,11 +54,7 @@ fun SystemThemeOptions(
                     Color.Black
                 }
             )
-            .clickable {
-                if (!clicked) {
-                    expanded = !expanded
-                }
-            }
+            .clickable { expanded = !expanded }
             .wrapContentSize(Alignment.TopCenter)
     ) {
         Text(
@@ -77,9 +69,7 @@ fun SystemThemeOptions(
         )
         DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
             DropdownMenuItem(
-                onClick = {
-                    customScheme()
-                },
+                onClick = toggleDynamicTheme,
                 text = { Text(stringResource(R.string.custom_theme)) },
                 leadingIcon = {
                     Icon(
@@ -89,9 +79,7 @@ fun SystemThemeOptions(
                     )
                 })
             DropdownMenuItem(
-                onClick = {
-                    darkTheme()
-                },
+                onClick = toggleDarkTheme,
                 text = { Text(stringResource(R.string.dark_theme)) },
                 leadingIcon = {
                     Icon(
@@ -101,9 +89,7 @@ fun SystemThemeOptions(
                     )
                 })
             DropdownMenuItem(
-                onClick = {
-                    cuteTheme()
-                },
+                onClick = toggleCuteTheme,
                 enabled = !isDynamicTheme,
                 text = { Text(stringResource(R.string.cute_theme)) },
                 leadingIcon = {
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/miscFunctions/Functions.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/miscFunctions/Functions.kt
index 536ef2c..a149544 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/miscFunctions/Functions.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/miscFunctions/Functions.kt
@@ -17,6 +17,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.ui.Modifier
@@ -27,13 +28,16 @@ import androidx.compose.ui.unit.dp
 import com.belmontCrest.cardCrafter.R
 import kotlinx.coroutines.delay
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.belmontCrest.cardCrafter.controller.cardHandlers.returnReviewsLeft
-import com.belmontCrest.cardCrafter.localDatabase.tables.PartOfQorA
-import com.belmontCrest.cardCrafter.model.ui.Fields
-import com.belmontCrest.cardCrafter.model.ui.SealedDueCTs
+import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.AddCardViewModel
+import com.belmontCrest.cardCrafter.controller.viewModels.cardViewsModels.EditCardViewModel
+import com.belmontCrest.cardCrafter.model.ui.states.CDetails
+import com.belmontCrest.cardCrafter.model.ui.states.MyTextRange
+import com.belmontCrest.cardCrafter.model.ui.states.SealedDueCTs
+import com.belmontCrest.cardCrafter.model.ui.states.SelectedKeyboard
 import com.belmontCrest.cardCrafter.ui.theme.GetUIStyle
 
 
@@ -112,8 +116,9 @@ fun NoDueCards(getUIStyle: GetUIStyle) {
     }
 }
 
+
 @Composable
-fun PickAnswerChar(fields: Fields, getUIStyle: GetUIStyle) {
+fun PickAnswerChar(fields: CDetails, getUIStyle: GetUIStyle, onUpdate: (Char) -> Unit) {
     var expanded by remember { mutableStateOf(false) }
     Column(
         Modifier
@@ -130,7 +135,7 @@ fun PickAnswerChar(fields: Fields, getUIStyle: GetUIStyle) {
             Row {
                 Text(
                     text = stringResource(R.string.answer) +
-                            ": ${fields.correct.value.uppercase()}",
+                            ": ${fields.correct.uppercase()}",
                     modifier = Modifier.padding(2.dp)
                 )
                 Icon(
@@ -151,7 +156,7 @@ fun PickAnswerChar(fields: Fields, getUIStyle: GetUIStyle) {
             ) {
                 DropdownMenuItem(
                     onClick = {
-                        fields.correct.value = 'a'
+                        onUpdate('a')
                         expanded = false
                     },
                     text = { Text("A") },
@@ -160,17 +165,17 @@ fun PickAnswerChar(fields: Fields, getUIStyle: GetUIStyle) {
                 )
                 DropdownMenuItem(
                     onClick = {
-                        fields.correct.value = 'b'
+                        onUpdate('b')
                         expanded = false
                     },
                     text = { Text("B") },
                     modifier = Modifier
                         .align(Alignment.CenterHorizontally)
                 )
-                if (fields.choices[2].value.isNotBlank()) {
+                if (fields.choices[2].isNotBlank()) {
                     DropdownMenuItem(
                         onClick = {
-                            fields.correct.value = 'c'
+                            onUpdate('c')
                             expanded = false
                         },
                         text = { Text("C") },
@@ -178,10 +183,10 @@ fun PickAnswerChar(fields: Fields, getUIStyle: GetUIStyle) {
                             .align(Alignment.CenterHorizontally)
                     )
                 }
-                if (fields.choices[3].value.isNotBlank()) {
+                if (fields.choices[3].isNotBlank()) {
                     DropdownMenuItem(
                         onClick = {
-                            fields.correct.value = 'd'
+                            onUpdate('d')
                             expanded = false
                         },
                         text = { Text("D") },
@@ -234,19 +239,35 @@ fun returnCardAmountError(): List<String> {
 }
 
 @Composable
-fun getSavableFields(fields: Fields): Fields {
-    return Fields(
-        question = rememberSaveable { mutableStateOf("") },
-        middleField = rememberSaveable { mutableStateOf("") },
-        answer = rememberSaveable { mutableStateOf("") },
-        choices = rememberSaveable { MutableList(4) { mutableStateOf("") } },
-        correct = rememberSaveable { mutableStateOf('?') },
-        scrollPosition = fields.scrollPosition,
-        isQOrA = rememberSaveable { mutableStateOf(PartOfQorA.A) },
-        inDeckClicked = fields.inDeckClicked,
-        isEditing = fields.isEditing,
-        mainClicked = fields.mainClicked,
-        leftDueCardView = fields.leftDueCardView,
-        newType = fields.newType,
-    )
+fun collectTextRangesAsStates(vm: AddCardViewModel): Pair<MyTextRange, MyTextRange?> {
+    val selection by vm.selection.collectAsState()
+    val composition by vm.composition.collectAsState()
+    return Pair(selection, composition)
+}
+
+@Composable
+fun collectTextRangesAsStates(vm: EditCardViewModel): Pair<MyTextRange, MyTextRange?> {
+    val selection by vm.selection.collectAsState()
+    val composition by vm.composition.collectAsState()
+    return Pair(selection, composition)
+}
+
+@Composable
+fun collectNotationFieldsAsStates(
+    vm: AddCardViewModel
+): Triple<CDetails, Boolean, SelectedKeyboard?> {
+    val fields by vm.fields.collectAsStateWithLifecycle()
+    val showKB by vm.showKatexKeyboard.collectAsStateWithLifecycle()
+    val selectedKB by vm.selectedKB.collectAsStateWithLifecycle()
+    return Triple(fields, showKB, selectedKB)
+}
+
+@Composable
+fun collectNotationFieldsAsStates(
+    vm: EditCardViewModel
+): Triple<CDetails, Boolean, SelectedKeyboard?> {
+    val fields by vm.fields.collectAsStateWithLifecycle()
+    val showKB by vm.showKatexKeyboard.collectAsStateWithLifecycle()
+    val selectedKB by vm.selectedKB.collectAsStateWithLifecycle()
+    return Triple(fields, showKB, selectedKB)
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/belmontCrest/cardCrafter/views/miscFunctions/details/CardDetails.kt b/app/src/main/java/com/belmontCrest/cardCrafter/views/miscFunctions/details/CardDetails.kt
index 96c1945..d42b8f6 100644
--- a/app/src/main/java/com/belmontCrest/cardCrafter/views/miscFunctions/details/CardDetails.kt
+++ b/app/src/main/java/com/belmontCrest/cardCrafter/views/miscFunctions/details/CardDetails.kt
@@ -133,6 +133,4 @@ sealed class CDetails {
     data class NotationCD(
         val question: String, val steps: List<String>, val answer: String
     ) : CDetails()
-
-
-}
\ No newline at end of file
+}
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 31ef851..545bcf3 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -1,6 +1,6 @@
 [versions]
 accompanistSwiperefresh = "0.24.13-rc"
-agp = "8.9.2" # to run on koala -> 8.6.1
+agp = "8.10.1" # to run on koala -> 8.6.1
 converterGson = "2.9.0"
 credentials = "1.5.0"
 foundationAndroid = "1.9.0-alpha03"