diff --git a/src/web/src/components/LanguageSelector.tsx b/src/web/src/components/LanguageSelector.tsx
index a40d55d130..994daa6c31 100644
--- a/src/web/src/components/LanguageSelector.tsx
+++ b/src/web/src/components/LanguageSelector.tsx
@@ -1,5 +1,6 @@
 import { createContext, ChangeEvent, useState } from 'react';
 import { FormControl, Grid, InputLabel, MenuItem, Select } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 import { setLang, getLang } from '../translations/i18n';
 
@@ -16,7 +17,18 @@ const languages: Array<{ name: string; code: string }> = [
   { name: 'Español', code: 'es' },
 ];
 
+const useStyles = makeStyles((theme) => {
+  return {
+    selectBox: {
+      width: '10rem',
+      fontFamily: 'sans-serif',
+    },
+  };
+});
+
 const LanguageSelector = () => {
+  const classes = useStyles();
+
   // sets the state to use the current i18 language. i18 remembers the language for the page,
   // and is not effected by rendering.
   const [language, setLanguage] = useState(getLang());
@@ -33,7 +45,12 @@ const LanguageSelector = () => {
     <Grid container>
       <FormControl>
         <InputLabel>Language</InputLabel>
-        <Select value={language} label="Language" onChange={changeLanguage}>
+        <Select
+          className={classes.selectBox}
+          value={language}
+          label="Language"
+          onChange={changeLanguage}
+        >
           {languages.map((lang) => {
             return (
               <MenuItem key={lang.code} value={lang.code}>