diff --git a/src/components/trays/layers/layer-card.js b/src/components/trays/layers/layer-card.js
index bf1f00d2..6cae3aa0 100644
--- a/src/components/trays/layers/layer-card.js
+++ b/src/components/trays/layers/layer-card.js
@@ -67,7 +67,7 @@ export const LayerCard = ({ index, layer }) => {
             <Avatar variant="outlined">
               <LayerIcon size="lg" color="primary" />
             </Avatar>
-            <Typography level="title-md" sx={{ flex: 1 }}>
+            <Typography level="title-sm" sx={{ flex: 1 }}>
               {layer.properties.product_name}
             </Typography>
             <Switch
diff --git a/src/components/trays/layers/tray-contents.js b/src/components/trays/layers/tray-contents.js
index b3f3eeb0..888dc0fb 100644
--- a/src/components/trays/layers/tray-contents.js
+++ b/src/components/trays/layers/tray-contents.js
@@ -26,7 +26,7 @@ export const TrayContents = () => {
       return (
         <Stack p={ 2 }>
           <Button
-            size="lg"
+            size="md"
             startDecorator={ <AddLayerIcon /> }
             onClick={ handleClickToggleState }
           >Add a Model Run</Button>
@@ -36,7 +36,7 @@ export const TrayContents = () => {
     return (
       <Stack p={ 2 }>
         <Button
-          size="lg"
+          size="md"
           color="warning"
           startDecorator={ <CloseIcon /> }
           onClick={ handleClickToggleState }
diff --git a/src/components/trays/model-selection/DropDownOptions.js b/src/components/trays/model-selection/DropDownOptions.js
index 5ea4537a..73c7b424 100644
--- a/src/components/trays/model-selection/DropDownOptions.js
+++ b/src/components/trays/model-selection/DropDownOptions.js
@@ -36,7 +36,7 @@ export default function DropDownOptions(data) {
             return (
                 <Fragment>
                     {data.data[data.type].filter(item => item !== "").map(item => (
-                        <Option key={item} value={item}>{item}</Option>
+                        <Option key={item} value={item} sx={{ fontSize: "sm" }}>{item}</Option>
                     ))}
                 </Fragment>
             );
diff --git a/src/components/trays/model-selection/catalogItems.js b/src/components/trays/model-selection/catalogItems.js
index 1928d4b0..1665ffcb 100644
--- a/src/components/trays/model-selection/catalogItems.js
+++ b/src/components/trays/model-selection/catalogItems.js
@@ -175,11 +175,11 @@ export default function CatalogItems(data) {
                                     <Stack key={ itemIndex } spacing={ 1 }>
                                         <Accordion
                                             key={ itemIndex }
-                                            sx={{ p: 0 }}
+                                            sx={{ p: 0, fontSize: "sm" }}
                                             expanded={accordianDateIndex === itemIndex}
                                             onChange={(event, expanded) => { setAccordianDateIndex(expanded ? itemIndex : null); }}>
 
-                                            <AccordionSummary sx={{ fontSize: 15 }}> {catalog['id']} </AccordionSummary>
+                                            <AccordionSummary sx={{ fontSize: 'sm' }}> { catalog['id'] } </AccordionSummary>
 
                                             <AccordionDetails> {
                                                 // loop through the data members and put them away
@@ -192,7 +192,7 @@ export default function CatalogItems(data) {
                                                     .map((mbr, mbrIdx) => (
                                                         // create the checkbox
                                                         <Checkbox
-                                                            sx={{ m: .5, fontSize: 12 }}
+                                                            sx={{ m: .5, fontSize: 'sm' }}
                                                             key={ mbrIdx }
                                                             checked={ getCheckedState(mbr.group) }
                                                             label={
diff --git a/src/components/trays/model-selection/synopticTab.js b/src/components/trays/model-selection/synopticTab.js
index f5dbc481..b449d9b9 100644
--- a/src/components/trays/model-selection/synopticTab.js
+++ b/src/components/trays/model-selection/synopticTab.js
@@ -285,7 +285,7 @@ export const SynopticTabForm = () => {
                     <Button type="reset" onClick={ resetForm }>Reset</Button>
                 </Stack>
 
-                <Divider sx={{m: 2}}/>
+                <Divider sx={{ m: 2 }}/>
 
                 <Stack>
                     { <CatalogItems data={ catalogData } isTropical={ false }/> }
diff --git a/src/components/trays/model-selection/tropicalTab.js b/src/components/trays/model-selection/tropicalTab.js
index c5124127..0b4a23ac 100644
--- a/src/components/trays/model-selection/tropicalTab.js
+++ b/src/components/trays/model-selection/tropicalTab.js
@@ -152,7 +152,7 @@ export const TropicalTabForm = () => {
                 <Stack spacing={1}>
                     <Select name="tropical-storm-name" value={ tropicalStorm } placeholder="Please select a tropical storm" onChange={(e, newValue) => {
                         setTropicalStorm(newValue); }}>
-                        <DropDownOptions data={dropDownData} type={'storm_names'} />
+                        <DropDownOptions data={dropDownData} type={'storm_names'}/>
                     </Select>
                     <Select name="tropical-advisory" value={ tropicalAdvisory } placeholder="Please select an advisory" onChange={(e, newValue) => {
                         setTropicalAdvisory(newValue); }}>