diff --git a/src/Components/Configuration/EditCard/Base.tsx b/src/Components/Configuration/EditCard/Base.tsx
index a75a14d35..0cc429e92 100644
--- a/src/Components/Configuration/EditCard/Base.tsx
+++ b/src/Components/Configuration/EditCard/Base.tsx
@@ -92,8 +92,8 @@ function Base(props: BaseExtendedProps): ReactElement | null {
               className={classes.textField}
               InputLabelProps={{ shrink: true }}
               label="Title"
-              placeholder={'Card Title'}
-              value={props.card.title}
+              placeholder="Card Title"
+              value={props.card.title || 'Card'}
               onChange={props.handleChange && props.handleChange('title')}
             />
           </Grid>
@@ -112,7 +112,7 @@ function Base(props: BaseExtendedProps): ReactElement | null {
           <FormControl className={classes.textField}>
             <InputLabel htmlFor="type">Type</InputLabel>
             <Select
-              value={props.card.type}
+              value={props.card.type || 'entity'}
               onChange={props.handleSelectChange}
               inputProps={{
                 name: 'type',
@@ -140,7 +140,7 @@ function Base(props: BaseExtendedProps): ReactElement | null {
             type="number"
             label="Elevation"
             placeholder="1"
-            value={props.card.elevation}
+            value={props.card.elevation || '1'}
             onChange={props.handleChange && props.handleChange('elevation')}
           />
         </Grid>
@@ -158,7 +158,7 @@ function Base(props: BaseExtendedProps): ReactElement | null {
                 />
               ),
             }}
-            value={props.card.background}
+            value={props.card.background || 'default'}
             onChange={props.handleChange && props.handleChange('background')}
           />
         </Grid>
@@ -175,7 +175,7 @@ function Base(props: BaseExtendedProps): ReactElement | null {
             InputLabelProps={{ shrink: true }}
             label="Padding"
             placeholder="12px"
-            value={props.card.padding}
+            value={props.card.padding || '12px'}
             onChange={props.handleChange && props.handleChange('padding')}
           />
         </Grid>
@@ -206,7 +206,7 @@ function Base(props: BaseExtendedProps): ReactElement | null {
             type="number"
             label="Width"
             placeholder="1"
-            value={props.card.width}
+            value={props.card.width || '1'}
             onChange={props.handleChange && props.handleChange('width')}
           />
         </Grid>
@@ -218,7 +218,7 @@ function Base(props: BaseExtendedProps): ReactElement | null {
               type="number"
               label="Height"
               placeholder="1"
-              value={props.card.height}
+              value={props.card.height || '1'}
               onChange={props.handleChange && props.handleChange('height')}
             />
           </Grid>
@@ -235,7 +235,7 @@ function Base(props: BaseExtendedProps): ReactElement | null {
             <FormControl className={classes.textField}>
               <InputLabel htmlFor="title_justify">Title Justify</InputLabel>
               <Select
-                value={props.card.title_justify}
+                value={props.card.title_justify || 'left'}
                 onChange={props.handleSelectChange}
                 inputProps={{
                   name: 'title_justify',
@@ -257,7 +257,7 @@ function Base(props: BaseExtendedProps): ReactElement | null {
               type="text"
               label="Title Font Size"
               placeholder="initial"
-              value={props.card.title_size}
+              value={props.card.title_size || 'initial'}
               onChange={props.handleChange && props.handleChange('title_size')}
             />
           </Grid>
diff --git a/src/Components/Configuration/EditCard/Entity.tsx b/src/Components/Configuration/EditCard/Entity.tsx
index e43ffda80..aa5c34af9 100644
--- a/src/Components/Configuration/EditCard/Entity.tsx
+++ b/src/Components/Configuration/EditCard/Entity.tsx
@@ -102,7 +102,7 @@ function Entity(props: EntityProps): ReactElement {
               InputLabelProps={{ shrink: true }}
               label="Entity"
               placeholder="sensor.myamazingsensor"
-              value={props.card.entity}
+              value={props.card.entity || ''}
               onChange={props.handleChange && props.handleChange('entity')}
             />
           )}
@@ -121,7 +121,7 @@ function Entity(props: EntityProps): ReactElement {
                 InputLabelProps={{ shrink: true }}
                 label="Icon"
                 placeholder="thermometer"
-                value={props.card.icon}
+                value={props.card.icon || ''}
                 onChange={props.handleChange && props.handleChange('icon')}
               />
             </Grid>
@@ -152,7 +152,7 @@ function Entity(props: EntityProps): ReactElement {
                 type="text"
                 label="Icon Size"
                 placeholder="initial"
-                value={props.card.icon_size}
+                value={props.card.icon_size || 'initial'}
                 onChange={props.handleChange && props.handleChange('icon_size')}
               />
             </Grid>
@@ -165,7 +165,7 @@ function Entity(props: EntityProps): ReactElement {
                 type="text"
                 label="State Font Size"
                 placeholder="initial"
-                value={props.card.state_size}
+                value={props.card.state_size || 'initial'}
                 onChange={
                   props.handleChange && props.handleChange('state_size')
                 }
@@ -184,7 +184,7 @@ function Entity(props: EntityProps): ReactElement {
               <FormControl className={classes.textField}>
                 <InputLabel htmlFor="chart">Chart</InputLabel>
                 <Select
-                  value={props.card.chart ? props.card.chart : ''}
+                  value={props.card.chart || ''}
                   onChange={props.handleSelectChange}
                   inputProps={{
                     name: 'chart',
@@ -214,9 +214,7 @@ function Entity(props: EntityProps): ReactElement {
                 <FormControl className={classes.textField}>
                   <InputLabel htmlFor="chart_detail">Chart Detail</InputLabel>
                   <Select
-                    value={
-                      props.card.chart_detail ? props.card.chart_detail : 3
-                    }
+                    value={props.card.chart_detail || 3}
                     onChange={props.handleSelectChange}
                     inputProps={{
                       name: 'chart_detail',
@@ -245,7 +243,7 @@ function Entity(props: EntityProps): ReactElement {
                     min: 1,
                     max: 48,
                   }}
-                  value={props.card.chart_from}
+                  value={props.card.chart_from || '6'}
                   onChange={
                     props.handleChange && props.handleChange('chart_from')
                   }
diff --git a/src/Components/Configuration/EditCard/Frame.tsx b/src/Components/Configuration/EditCard/Frame.tsx
index ea6497e5e..3d2d38d0a 100644
--- a/src/Components/Configuration/EditCard/Frame.tsx
+++ b/src/Components/Configuration/EditCard/Frame.tsx
@@ -23,7 +23,7 @@ function Frame(props: BaseProps): ReactElement {
           InputLabelProps={{ shrink: true }}
           label="URL"
           placeholder="https://timmo.dev/home-panel"
-          value={props.card.url}
+          value={props.card.url || ''}
           onChange={props.handleChange && props.handleChange('url')}
         />
       </Grid>
@@ -33,7 +33,7 @@ function Frame(props: BaseProps): ReactElement {
           InputLabelProps={{ shrink: true }}
           label="Height"
           placeholder="auto"
-          value={props.card.height}
+          value={props.card.height || 'auto'}
           onChange={props.handleChange && props.handleChange('height')}
         />
       </Grid>
diff --git a/src/Components/Configuration/EditCard/Image.tsx b/src/Components/Configuration/EditCard/Image.tsx
index 1c5e80cce..a8acaf683 100644
--- a/src/Components/Configuration/EditCard/Image.tsx
+++ b/src/Components/Configuration/EditCard/Image.tsx
@@ -23,7 +23,7 @@ function Image(props: BaseProps): ReactElement {
           InputLabelProps={{ shrink: true }}
           label="URL"
           placeholder="https://timmo.dev/home-panel"
-          value={props.card.url}
+          value={props.card.url || ''}
           onChange={props.handleChange && props.handleChange('url')}
         />
       </Grid>
diff --git a/src/Components/Configuration/EditCard/Markdown.tsx b/src/Components/Configuration/EditCard/Markdown.tsx
index 86962cbf0..64e10cbf6 100644
--- a/src/Components/Configuration/EditCard/Markdown.tsx
+++ b/src/Components/Configuration/EditCard/Markdown.tsx
@@ -24,7 +24,7 @@ function Markdown(props: BaseProps): ReactElement {
           multiline
           label="Content"
           placeholder="- Markdown"
-          value={props.card.content}
+          value={props.card.content || ''}
           onChange={props.handleChange && props.handleChange('content')}
         />
       </Grid>
@@ -34,7 +34,7 @@ function Markdown(props: BaseProps): ReactElement {
           InputLabelProps={{ shrink: true }}
           label="Height"
           placeholder="auto"
-          value={props.card.height}
+          value={props.card.height || 'auto'}
           onChange={props.handleChange && props.handleChange('height')}
         />
       </Grid>
diff --git a/src/Components/Configuration/EditCard/News.tsx b/src/Components/Configuration/EditCard/News.tsx
index e4b319a94..778e9c129 100644
--- a/src/Components/Configuration/EditCard/News.tsx
+++ b/src/Components/Configuration/EditCard/News.tsx
@@ -28,7 +28,7 @@ const useStyles = makeStyles(() => ({
 
 function News(props: BaseProps): ReactElement {
   const [sources, setSources] = useState<Option[]>();
-  const [source, setSource] = useState<Option | null>();
+  const [source, setSource] = useState<Option | null>(null);
   const [error, setError] = useState<string>();
 
   function handleChange(
@@ -81,7 +81,7 @@ function News(props: BaseProps): ReactElement {
             disabled
             InputLabelProps={{ shrink: true }}
             label="Source"
-            value={error}
+            value={error || ''}
           />
         ) : (
           sources && (
@@ -90,6 +90,9 @@ function News(props: BaseProps): ReactElement {
               fullWidth
               options={sources}
               getOptionLabel={(option: Option): string => option.label}
+              getOptionSelected={(option: Option): boolean =>
+                option.value === source?.value
+              }
               value={source}
               onChange={handleChange}
               renderInput={(params): ReactElement => (
@@ -105,7 +108,7 @@ function News(props: BaseProps): ReactElement {
           InputLabelProps={{ shrink: true }}
           label="Height"
           placeholder="auto"
-          value={props.card.height}
+          value={props.card.height || 'auto'}
           onChange={props.handleChange && props.handleChange('height')}
         />
       </Grid>
diff --git a/src/Components/Configuration/EditCard/RSS.tsx b/src/Components/Configuration/EditCard/RSS.tsx
index 08fd58a48..4a43e7a30 100644
--- a/src/Components/Configuration/EditCard/RSS.tsx
+++ b/src/Components/Configuration/EditCard/RSS.tsx
@@ -23,7 +23,7 @@ function RSS(props: BaseProps): ReactElement {
           InputLabelProps={{ shrink: true }}
           label="URL"
           placeholder="https://status.home-assistant.io/history.rss"
-          value={props.card.url}
+          value={props.card.url || ''}
           onChange={props.handleChange && props.handleChange('url')}
         />
       </Grid>
@@ -33,7 +33,7 @@ function RSS(props: BaseProps): ReactElement {
           InputLabelProps={{ shrink: true }}
           label="Height"
           placeholder="auto"
-          value={props.card.height}
+          value={props.card.height || 'auto'}
           onChange={props.handleChange && props.handleChange('height')}
         />
       </Grid>
diff --git a/src/Components/Configuration/EditGroup.tsx b/src/Components/Configuration/EditGroup.tsx
index de73e38cc..9733c327c 100644
--- a/src/Components/Configuration/EditGroup.tsx
+++ b/src/Components/Configuration/EditGroup.tsx
@@ -81,7 +81,7 @@ function EditGroup(props: EditGroupProps): ReactElement {
               InputLabelProps={{ shrink: true }}
               label="Name"
               placeholder={'Group Name'}
-              defaultValue={props.group.name}
+              defaultValue={props.group.name || ''}
               onChange={handleChange('name')}
             />
           </Grid>
@@ -92,7 +92,7 @@ function EditGroup(props: EditGroupProps): ReactElement {
               type="number"
               label="Width"
               placeholder="2"
-              defaultValue={props.group.width}
+              defaultValue={props.group.width || ''}
               onChange={handleChange('width')}
             />
           </Grid>
diff --git a/src/Components/Configuration/EditPage.tsx b/src/Components/Configuration/EditPage.tsx
index d6ee52e7e..f98306233 100644
--- a/src/Components/Configuration/EditPage.tsx
+++ b/src/Components/Configuration/EditPage.tsx
@@ -121,7 +121,7 @@ function EditPage(props: EditPageProps): ReactElement {
               InputLabelProps={{ shrink: true }}
               label="Name"
               placeholder={'Page Name'}
-              defaultValue={props.page.name}
+              defaultValue={props.page.name || ''}
               onChange={handleChange('name')}
             />
           </Grid>
@@ -131,7 +131,7 @@ function EditPage(props: EditPageProps): ReactElement {
               InputLabelProps={{ shrink: true }}
               label="Icon"
               placeholder={'home'}
-              defaultValue={props.page.icon}
+              defaultValue={props.page.icon || ''}
               onChange={handleChange('icon')}
             />
           </Grid>
diff --git a/src/Components/Configuration/Item.tsx b/src/Components/Configuration/Item.tsx
index 7c8a7fa63..e45bef9a8 100644
--- a/src/Components/Configuration/Item.tsx
+++ b/src/Components/Configuration/Item.tsx
@@ -183,7 +183,7 @@ function Item(props: ItemProps): ReactElement {
               />
             ),
           }}
-          value={value}
+          value={value || ''}
           onChange={handleChange(props.path, 'color')}
         />
       );
@@ -200,7 +200,7 @@ function Item(props: ItemProps): ReactElement {
           className={classes.root}
           placeholder={String(props.item.default)}
           type={typeof props.item.default === 'number' ? 'number' : 'text'}
-          value={value}
+          value={value || ''}
           onChange={handleChange(
             props.path,
             typeof props.item.default === 'number' ? 'number' : 'string'
@@ -213,7 +213,7 @@ function Item(props: ItemProps): ReactElement {
           className={classes.root}
           type={showPassword ? 'text' : 'password'}
           placeholder={String(props.item.default)}
-          value={value}
+          value={value || ''}
           onChange={handleChange(
             props.path,
             typeof props.item.default === 'number' ? 'number' : 'string'
@@ -239,7 +239,7 @@ function Item(props: ItemProps): ReactElement {
             className={classes.radioGroup}
             aria-label={props.item.title}
             name={typeof props.item.name === 'string' ? props.item.name : ''}
-            value={value}
+            value={value || ''}
             onChange={handleRadioChange(props.path)}>
             {props.item.items &&
               props.item.items.map(
@@ -252,7 +252,7 @@ function Item(props: ItemProps): ReactElement {
                   return (
                     <FormControlLabel
                       key={key}
-                      value={key}
+                      value={key || ''}
                       label={rItem}
                       control={<Radio color="primary" />}
                     />
diff --git a/src/Components/HomeAssistant/Cards/AlarmPanel.tsx b/src/Components/HomeAssistant/Cards/AlarmPanel.tsx
index 204555c61..d9bd0acc5 100644
--- a/src/Components/HomeAssistant/Cards/AlarmPanel.tsx
+++ b/src/Components/HomeAssistant/Cards/AlarmPanel.tsx
@@ -128,7 +128,7 @@ function AlarmPanel(props: EntityProps): ReactElement | null {
               disabled={props.entity.state === 'pending'}
               placeholder="1234"
               type="number"
-              value={code}
+              value={code || ''}
               onChange={handleCodeChange}
             />
           </Grid>
diff --git a/src/Components/HomeAssistant/Cards/Media.tsx b/src/Components/HomeAssistant/Cards/Media.tsx
index 95e466fb3..2ee5684ac 100644
--- a/src/Components/HomeAssistant/Cards/Media.tsx
+++ b/src/Components/HomeAssistant/Cards/Media.tsx
@@ -223,7 +223,7 @@ function Media(props: EntityProps): ReactElement | null {
         {(!props.card.width || props.card.width > 2) && (
           <Grid item>
             <Select
-              value={props.entity.attributes.source}
+              value={props.entity.attributes.source || ''}
               disabled={
                 !props.entity.attributes.source_list ||
                 props.entity.state === 'off'
diff --git a/src/Components/HomeAssistant/Cards/Number.tsx b/src/Components/HomeAssistant/Cards/Number.tsx
index 94b28d1c8..876bcbe6b 100644
--- a/src/Components/HomeAssistant/Cards/Number.tsx
+++ b/src/Components/HomeAssistant/Cards/Number.tsx
@@ -104,7 +104,7 @@ function NumberEntity(props: EntityProps): ReactElement {
               <Slider
                 onChange={handleSliderChange}
                 onChangeCommitted={handleSliderChangeComplete}
-                value={number}
+                value={number || 0}
                 getAriaValueText={(value: number): string => `${value}`}
                 aria-labelledby="input-slider"
                 valueLabelDisplay="auto"
@@ -120,7 +120,7 @@ function NumberEntity(props: EntityProps): ReactElement {
           ) : (
             <Grid item>
               <Input
-                value={number}
+                value={number || 0}
                 margin="dense"
                 onChange={handleInputChange}
                 onBlur={handleBlur}
diff --git a/src/Components/HomeAssistant/Cards/Text.tsx b/src/Components/HomeAssistant/Cards/Text.tsx
index bd6f4bdbe..a782944ef 100644
--- a/src/Components/HomeAssistant/Cards/Text.tsx
+++ b/src/Components/HomeAssistant/Cards/Text.tsx
@@ -77,7 +77,7 @@ function TextEntity(props: EntityProps): ReactElement {
           justify="center">
           <Grid item>
             <Input
-              value={text}
+              value={text || ''}
               margin="dense"
               onChange={handleInputChange}
               inputProps={{
diff --git a/src/Components/HomeAssistant/HomeAssistantLogin.tsx b/src/Components/HomeAssistant/HomeAssistantLogin.tsx
index 326b39cd8..2fb01b3bd 100644
--- a/src/Components/HomeAssistant/HomeAssistantLogin.tsx
+++ b/src/Components/HomeAssistant/HomeAssistantLogin.tsx
@@ -116,7 +116,7 @@ function HomeAssistantLogin(props: HomeAssistantLoginProps): ReactElement {
                   autoCapitalize: 'none',
                   autoComplete: 'url',
                 }}
-                value={url}
+                value={url || ''}
                 onChange={handleChange}
               />
             </FormControl>
diff --git a/src/Components/HomeAssistant/Utils/EntitySelect.tsx b/src/Components/HomeAssistant/Utils/EntitySelect.tsx
index fa9d2ed41..6837bc478 100644
--- a/src/Components/HomeAssistant/Utils/EntitySelect.tsx
+++ b/src/Components/HomeAssistant/Utils/EntitySelect.tsx
@@ -28,7 +28,7 @@ function EntitySelect(props: EntitySelectProps): ReactElement {
   const classes = useStyles();
 
   const [options, setOptions] = useState<Option[]>([]);
-  const [value, setValue] = useState<Option | null>();
+  const [value, setValue] = useState<Option | null>(null);
 
   function handleChange(
     _event: React.ChangeEvent<{}>,
@@ -75,7 +75,10 @@ function EntitySelect(props: EntitySelectProps): ReactElement {
           properCase(option.value.split('.')[0])
         }
         getOptionLabel={(option: Option): string => option.label}
-        value={value}
+        getOptionSelected={(option: Option): boolean =>
+          option.value === value?.value
+        }
+        value={value || null}
         onChange={handleChange}
         renderInput={(params): ReactElement => (
           <TextField
diff --git a/src/Components/Login.tsx b/src/Components/Login.tsx
index b3f34be27..9469e8983 100644
--- a/src/Components/Login.tsx
+++ b/src/Components/Login.tsx
@@ -215,7 +215,7 @@ function Login(props: LoginProps): ReactElement {
                 autoCapitalize: 'none',
                 autoComplete: 'username',
               }}
-              value={values.username}
+              value={values.username || ''}
               onChange={handleChange('username')}
               onKeyPress={handleKeyPress}
             />
@@ -233,7 +233,7 @@ function Login(props: LoginProps): ReactElement {
                   ? 'new-password'
                   : 'current-password',
               }}
-              value={values.password}
+              value={values.password || ''}
               onChange={handleChange('password')}
               onKeyPress={handleKeyPress}
               endAdornment={