diff --git a/Eplant/Eplant.tsx b/Eplant/Eplant.tsx
index 1d9de465..2c810bc1 100644
--- a/Eplant/Eplant.tsx
+++ b/Eplant/Eplant.tsx
@@ -1,4 +1,5 @@
-import { Add, CallMade, CallReceived, Close } from '@mui/icons-material'
+import useStateWithStorage from '@eplant/util/useStateWithStorage'
+import { Add, OpenInNew, CallReceived, Close } from '@mui/icons-material'
 import {
   Box,
   CircularProgress,
@@ -8,6 +9,7 @@ import {
   DrawerProps,
   IconButton,
   LinearProgress,
+  Tooltip,
   ThemeProvider,
 } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
@@ -44,7 +46,7 @@ import { dark, light } from './theme'
 
 // TODO: Make this drawer support opening/closing on mobile
 
-const sideBarWidth = 300
+const sideBarWidth = 240
 
 function ResponsiveDrawer(props: DrawerProps) {
   const [open, setOpen] = React.useState(props.open)
@@ -342,6 +344,7 @@ function EplantLayout() {
         right: '0px',
         position: 'absolute',
         margin: theme.spacing(1),
+        marginRight: 0,
         boxSizing: 'border-box',
       })}
     >
@@ -391,7 +394,7 @@ function EplantLayout() {
                   }}
                   size="small"
                 >
-                  <Close />
+                  <Close fontSize="inherit" />
                 </IconButton>,
               ]
             }}
@@ -463,20 +466,22 @@ function EplantLayout() {
         size="small"
         key="add-tab"
       >
-        <Add />
-      </IconButton>,
+        <Add fontSize="inherit" />
+      </IconButton>
     )
     renderValues.buttons.push(
-      <IconButton
-        onClick={() => {
-          const id = node.getSelectedNode()?.getId()
-          if (id) makePopout(id)
-        }}
-        size="small"
-        key="make-popout"
-      >
-        <CallMade />
-      </IconButton>,
+      <Tooltip title="Open in new window">
+        <IconButton
+          onClick={() => {
+            const id = node.getSelectedNode()?.getId()
+            if (id) makePopout(id)
+          }}
+          size="small"
+          key="make-popout"
+        >
+          <OpenInNew fontSize="inherit" />
+        </IconButton>
+      </Tooltip>
     )
   }
 }
diff --git a/Eplant/UI/Dropdown.tsx b/Eplant/UI/Dropdown.tsx
index fcc48b7c..fc1f6394 100644
--- a/Eplant/UI/Dropdown.tsx
+++ b/Eplant/UI/Dropdown.tsx
@@ -83,6 +83,8 @@ export default function Dropdown({
           'aria-labelledby': buttonId,
         }}
         anchorEl={anchorEl}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
         open={open}
         onClose={handleClose}
       >
diff --git a/Eplant/UI/GeneticElementComponent.tsx b/Eplant/UI/GeneticElementComponent.tsx
index 8cd16dc3..810dd119 100644
--- a/Eplant/UI/GeneticElementComponent.tsx
+++ b/Eplant/UI/GeneticElementComponent.tsx
@@ -188,6 +188,7 @@ export default function GeneticElementComponent({
                   ? theme.palette.background.selected
                   : theme.palette.background.default
               })`,
+
               width: '100%',
               height: '100%',
               position: 'absolute',
@@ -195,7 +196,7 @@ export default function GeneticElementComponent({
               zIndex: 5,
             },
             ':hover::before': {
-              background: `linear-gradient(to right, transparent, 95%, ${theme.palette.background.hover})`,
+              background: `linear-gradient(to right, transparent, 95%, ${theme.palette.background.selected})`,
             },
           }}
           ref={textContainerRef}
@@ -211,14 +212,21 @@ export default function GeneticElementComponent({
                 : '',
               position: 'absolute',
               userSelect: 'none',
+              top: '2px',
             })}
             ref={textGroupRef}
           >
-            <Typography sx={{ fontWeight: selected ? 'bold' : 'regular' }}>
+            <Typography
+              variant="body2"
+              // sx={{ fontWeight: selected ? 'bold' : 'regular' }}
+            >
               {geneticElement.id}
             </Typography>
             <Divider orientation="vertical" flexItem></Divider>
-            <Typography sx={{ fontWeight: selected ? 'bold' : 'regular' }}>
+            <Typography
+              variant="body2"
+              // sx={{ fontWeight: selected ? 'bold' : 'regular' }}
+            >
               {geneticElement.aliases.join(', ')}
             </Typography>
           </Stack>
diff --git a/Eplant/UI/Layout/ViewContainer/index.tsx b/Eplant/UI/Layout/ViewContainer/index.tsx
index daef2a6d..ea24599e 100644
--- a/Eplant/UI/Layout/ViewContainer/index.tsx
+++ b/Eplant/UI/Layout/ViewContainer/index.tsx
@@ -76,17 +76,38 @@ export function ViewContainer<T, S, A>({
         position="sticky"
         elevation={0}
       >
-        <Toolbar style={{ gap: '8px' }}>
+        <Toolbar style={{ gap: '8px', padding: 8, paddingRight: 16 }}>
           <Stack
             direction="row"
             gap={2}
-            sx={{ flexGrow: 1, height: '100%', alignItems: 'center' }}
+            sx={{
+              flexGrow: 1,
+              height: '100%',
+              alignItems: 'center',
+            }}
           >
             {/* View selector dropdown */}
             <FormControl variant="standard">
-              {/* <InputLabel id={idLabel}>View</InputLabel> */}
               <Select
                 value={view.id}
+                renderValue={() => {
+                  if (view.id == 'get-started') {
+                    return <span style={{ paddingLeft: 8 }}>View selector</span>
+                  }
+                  return (
+                    <span
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                      }}
+                    >
+                      <Box sx={{ paddingRight: 1.5, marginTop: 0.5 }}>
+                        {view.icon && <view.icon />}
+                      </Box>
+                      {view.name}
+                    </span>
+                  )
+                }}
                 labelId={idLabel}
                 label={'View'}
                 id={selectId}
@@ -94,19 +115,32 @@ export function ViewContainer<T, S, A>({
                   const view = views.find((view) => view.id == e?.target?.value)
                   if (view) setView(view)
                 }}
+                sx={{
+                  '& .MuiSelect-select': {
+                    paddingRight: '36px !important',
+                  },
+                }}
                 inputProps={{
-                  sx: {
+                  sx: (theme: {
+                    palette: { background: { paperOverlay: any } }
+                  }) => ({
                     display: 'flex',
                     alignItems: 'center',
-
+                    backgroundColor: theme.palette.background.paperOverlay,
+                    padding: 1,
+                    borderRadius: 1,
                     ':focus': {
-                      backgroundColor: 'transparent',
+                      backgroundColor: theme.palette.background.paperOverlay,
+                      borderRadius: 1,
                     },
                     '& legend': { display: 'none' },
                     '& fieldset': { top: 0 },
-                  },
+                  }),
                 }}
               >
+                <MenuItem disabled value="">
+                  Select a view
+                </MenuItem>
                 {userViews.map((view) => (
                   <MenuItem
                     key={view.id}
@@ -117,7 +151,7 @@ export function ViewContainer<T, S, A>({
                         : 'none',
                       paddingTop: 8,
                       paddingBottom: 8,
-                      marginBottom: 8,
+                      marginBottom: 0,
                     }}
                   >
                     <Box sx={{ paddingRight: 2, marginTop: 0.5 }}>
@@ -207,7 +241,7 @@ export function ViewContainer<T, S, A>({
       {topBar}
       <Box
         sx={(theme) => ({
-          padding: '2rem',
+          padding: '1rem',
           flexGrow: 1,
           display: 'flex',
           gap: theme.spacing(4),
@@ -240,12 +274,12 @@ export function ViewContainer<T, S, A>({
             />
           ) : (
             <>
-              <view.header
+              {/* <view.header
                 state={state}
                 activeData={activeData}
                 dispatch={dispatch}
                 geneticElement={gene}
-              />
+              /> */}
               <view.component
                 state={state}
                 geneticElement={gene}
diff --git a/Eplant/UI/Layout/ViewNotSupported.tsx b/Eplant/UI/Layout/ViewNotSupported.tsx
index 8534be63..0cef9c1c 100644
--- a/Eplant/UI/Layout/ViewNotSupported.tsx
+++ b/Eplant/UI/Layout/ViewNotSupported.tsx
@@ -10,7 +10,7 @@ const Illustration = ({
 }: { color: string } & SVGProps<SVGSVGElement>) => (
   <svg
     width="204"
-    height="386"
+    height="200"
     viewBox="0 0 204 386"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -31,8 +31,18 @@ export default function NotSupported(props: {
 }) {
   const theme = useTheme()
   return (
-    <Stack gap={2} alignItems="center" direction="column" width="100%">
-      <Typography variant="h5">
+    <Stack
+      gap={2}
+      alignItems="center"
+      textAlign="center"
+      justifyContent="center"
+      direction="column"
+      width="100%"
+      minHeight="70vh"
+    >
+      <Illustration color={theme.palette.primary.dark} />
+
+      <Typography variant="h6">
         {props.geneticElement
           ? `Cannot view ${props.view.name.toLowerCase()} for ${
               props.geneticElement.id
@@ -43,20 +53,12 @@ export default function NotSupported(props: {
         variant="body1"
         sx={(theme) => ({
           color: theme.palette.text.secondary,
-          marginBottom: 8,
         })}
       >
         {props.geneticElement
           ? 'No data is available for this gene.'
           : `The ${props.view.name.toLowerCase()} requires a selected gene.`}
       </Typography>
-      <Illustration
-        color={theme.palette.primary.dark}
-        style={{
-          marginTop: 8,
-          maxHeight: '200px',
-        }}
-      />
     </Stack>
   )
 }
diff --git a/Eplant/UI/LeftNav/Collections.tsx b/Eplant/UI/LeftNav/Collections.tsx
index 32dc7fea..cb957339 100644
--- a/Eplant/UI/LeftNav/Collections.tsx
+++ b/Eplant/UI/LeftNav/Collections.tsx
@@ -151,11 +151,11 @@ export function Collection({
       <Card
         elevation={0}
         sx={(theme) => ({
-          borderRadius: theme.shape.borderRadius,
+          borderRadius: theme.shape.borderRadius + 'px',
           color: theme.palette.text.secondary,
           backgroundColor:
             genes.length > 0 && !open
-              ? theme.palette.background.active
+              ? theme.palette.background.paper
               : theme.palette.background.default,
         })}
       >
@@ -202,9 +202,10 @@ export function Collection({
             <div
               style={{
                 display: 'flex',
-                flexFlow: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
+                flexFlow: 'column',
+                lineHeight: 'normal',
+                padding: '8px 0px',
+                // justifyContent: 'space-between',
               }}
             >
               <span>{name}</span>
@@ -235,7 +236,7 @@ export function Collection({
           )}
         </Stack>
       </Card>
-      <Collapse in={open}>
+      <Collapse in={open} sx={{ marginTop: '0px !important' }}>
         <SortableContext items={genes} strategy={verticalListSortingStrategy}>
           <Stack
             direction="column"
@@ -256,15 +257,19 @@ export function Collection({
               ))
             ) : (
               <Stack spacing={1} direction="row">
-                <div style={{ width: '24px' }} />
                 <Typography
                   variant="caption"
                   fontStyle="italic"
                   sx={(theme) => ({
-                    color: theme.palette.text.disabled,
+                    color: theme.palette.background.hover,
+                    padding: '0.25rem 0.75rem',
+                    flexGrow: 1,
+                    border: 'dashed 1px',
+                    borderColor: theme.palette.background.hover,
+                    borderRadius: theme.shape.borderRadius + 'px',
                   })}
                 >
-                  Drag genes here
+                  Drag genes to reorder them
                 </Typography>
               </Stack>
             )}
diff --git a/Eplant/UI/LeftNav/GeneSearch/index.tsx b/Eplant/UI/LeftNav/GeneSearch/index.tsx
index 0e2ad510..2e433743 100644
--- a/Eplant/UI/LeftNav/GeneSearch/index.tsx
+++ b/Eplant/UI/LeftNav/GeneSearch/index.tsx
@@ -43,7 +43,7 @@ export function SearchGroup({
         onChange={(e) =>
           setSpecies(speciesList.find((s) => s.name == e.target.value))
         }
-        label="Species"
+        // label="Species"
         variant="standard"
         inputProps={{
           sx: {
@@ -60,7 +60,7 @@ export function SearchGroup({
         ))}
       </TextField>
       <SearchBar
-        label="Search by gene name"
+        label="Search for genes"
         inputProps={{
           // TODO: Make these clickable
           helperText: <span>Example ABI3 or AT5G60200</span>,
diff --git a/Eplant/UI/LeftNav/index.tsx b/Eplant/UI/LeftNav/index.tsx
index 94a15a3e..848acbbd 100644
--- a/Eplant/UI/LeftNav/index.tsx
+++ b/Eplant/UI/LeftNav/index.tsx
@@ -30,7 +30,7 @@ export function LeftNav(props: {
     if (uniq.length != geneticElements.length) setGeneticElements(uniq)
   }, [geneticElements])
   return (
-    <Stack gap={4} direction="column" height={'100%'}>
+    <Stack gap={2} direction="column" height={'100%'}>
       <LogoWithText text="ePlant" />
       <SearchGroup
         addGeneticElements={(s) => {
@@ -66,7 +66,7 @@ export function LeftNav(props: {
               checked={darkMode}
             />
           }
-          label="Dark Mode"
+          label="Dark mode"
         />
       </FormGroup>
     </Stack>
diff --git a/Eplant/UI/Logo.tsx b/Eplant/UI/Logo.tsx
index 1360ee4b..38c69497 100644
--- a/Eplant/UI/Logo.tsx
+++ b/Eplant/UI/Logo.tsx
@@ -13,8 +13,8 @@ export function Logo(props: SVGProps<SVGSVGElement>) {
     <a href="http://bar.utoronto.ca/" rel="noreferrer" target="_blank">
       <svg
         {...props}
-        width="48"
-        height="48"
+        width="42"
+        height="42"
         viewBox="0 0 24 24"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -43,7 +43,11 @@ export function LogoWithText({
   return (
     <Stack direction={'row'} gap={'12px'} style={{ alignItems: 'center' }}>
       <Logo {...props}></Logo>
-      <Typography variant="h6" color={theme.palette.primary.main}>
+      <Typography
+        variant="h6"
+        color={theme.palette.primary.main}
+        sx={{ paddingBottom: 1 }}
+      >
         {text}
       </Typography>
     </Stack>
diff --git a/Eplant/View/viewData.ts b/Eplant/View/viewData.ts
index 948ede94..25d1e62f 100644
--- a/Eplant/View/viewData.ts
+++ b/Eplant/View/viewData.ts
@@ -87,6 +87,7 @@ export function useViewData<T, S, A>(
   const id = (view?.id ?? 'generic-view') + '-' + useViewID()
   const [viewData, setViewData] = useAtom(getViewAtom(key))
   const [viewState, setViewState] = useAtom(getViewStateAtom(id))
+  // console.log(viewData)
 
   // If there is no cached viewData then load it using the view's loader
   React.useEffect(() => {
diff --git a/Eplant/main.tsx b/Eplant/main.tsx
index 19ea1b45..9e858f83 100644
--- a/Eplant/main.tsx
+++ b/Eplant/main.tsx
@@ -25,7 +25,6 @@ const genericViews = [GetStartedView, FallbackView]
 // List of views that a user can select from
 // Can contain views from the genericViews list too
 const userViews = [
-  GetStartedView,
   GeneInfoView,
   PublicationViewer,
   DebugView,
@@ -68,7 +67,7 @@ const registerServiceWorker = async () => {
   if ('serviceWorker' in navigator) {
     try {
       const registration = await navigator.serviceWorker.register(
-        import.meta.env.BASE_URL + '/sw.js',
+        import.meta.env.BASE_URL + '/sw.js'
       )
       if (registration.installing) {
         console.log('Service worker installing')
diff --git a/Eplant/theme.tsx b/Eplant/theme.tsx
index 9fd13a7e..b8cab8a2 100644
--- a/Eplant/theme.tsx
+++ b/Eplant/theme.tsx
@@ -71,9 +71,9 @@ export const dark = createTheme({
       contrastText: '#fff',
     },
     background: {
-      default: '#111111',
-      paper: '#222222',
-      paperOverlay: '#333333',
+      default: '#181818',
+      paper: '#1F1F1F',
+      paperOverlay: '#2C2C2C',
       transparentOverlay: '#333333DD',
       selected: '#333333',
       active: '#3a3a3a',
diff --git a/Eplant/views/GeneInfoView/component.tsx b/Eplant/views/GeneInfoView/component.tsx
index 714dbd9d..8defeffb 100644
--- a/Eplant/views/GeneInfoView/component.tsx
+++ b/Eplant/views/GeneInfoView/component.tsx
@@ -299,21 +299,16 @@ function ViewSwitcher({ geneticElement }: { geneticElement: GeneticElement }) {
         sx={{
           display: 'flex',
           flexDirection: 'column',
-          gap: 3,
-          background: (theme) => theme.palette.background.paperOverlay,
-          border: '1px solid',
-          borderRadius: 1,
-          borderColor: (theme) => theme.palette.background.active,
-          padding: 2,
+          gap: 2,
+          padding: 0,
           position: 'relative',
-          left: -16,
-          top: -16,
+          top: -8,
           overflow: 'hidden',
           whiteSpace: 'nowrap',
         }}
       >
         <Typography variant="body2" color="secondary">
-          Views available for this gene
+          Available views
         </Typography>
         {userViews.map((view) => (
           <ViewButton
diff --git a/Eplant/views/GetStartedView/Tile.tsx b/Eplant/views/GetStartedView/Tile.tsx
index 6c3c447b..ef70f3f2 100644
--- a/Eplant/views/GetStartedView/Tile.tsx
+++ b/Eplant/views/GetStartedView/Tile.tsx
@@ -34,8 +34,11 @@ export default function Tile({ view }: TileProps) {
     <Card
       sx={(theme) => ({
         background: theme.palette.background.paperOverlay,
-        boxShadow: '0px 3px 6px rgb(0,0,0,0.25)',
+        border: '1px solid',
+        borderColor: theme.palette.background.selected,
+        boxShadow: '0px 4px 8px rgb(0,0,0,0.25)',
         height: '100%',
+        marginRight: 1,
       })}
     >
       <CardMedia
@@ -47,8 +50,13 @@ export default function Tile({ view }: TileProps) {
 
       <CardContent>
         <div>
-          <Typography variant="h5">{view.name}</Typography>
-          <Typography variant="body2">{view.description}</Typography>
+          <Typography variant="h6">{view.name}</Typography>
+          <Typography
+            variant="body2"
+            color={(theme) => theme.palette.secondary.main}
+          >
+            {view.description}
+          </Typography>
         </div>
       </CardContent>
 
diff --git a/Eplant/views/GetStartedView/component.tsx b/Eplant/views/GetStartedView/component.tsx
index a8376369..85ab7133 100644
--- a/Eplant/views/GetStartedView/component.tsx
+++ b/Eplant/views/GetStartedView/component.tsx
@@ -11,7 +11,7 @@ export default function GetStartedView({
   const theme = useTheme()
   const { views } = useConfig()
   return (
-    <Stack spacing={4}>
+    <Stack spacing={3}>
       <div>
         <Typography variant="h2">ePlant 3</Typography>
         <Typography variant="h4" color={theme.palette.secondary.main}>
@@ -20,15 +20,15 @@ export default function GetStartedView({
       </div>
       <Stack spacing={1}>
         <Typography variant="h5">Start</Typography>
-        <Stack direction="row" spacing={1}>
+        <Stack direction="row" spacing={2}>
           <Filter1 color="primary" />
           <Typography>Select a species</Typography>
         </Stack>
-        <Stack direction="row" spacing={1}>
+        <Stack direction="row" spacing={2}>
           <Filter2 color="primary" />
           <Typography>Enter a gene of interest</Typography>
         </Stack>
-        <Stack direction="row" spacing={1}>
+        <Stack direction="row" spacing={2}>
           <Filter3 color="primary" />
           <Typography>
             Use the view selector to navigate between views
@@ -37,7 +37,7 @@ export default function GetStartedView({
       </Stack>
       <Stack>
         <Typography
-          sx={{ width: '100%', maxWidth: 600 }}
+          sx={{ width: '100%', maxWidth: 860 }}
           variant="body2"
           color={theme.palette.secondary.main}
         >
@@ -63,11 +63,11 @@ export default function GetStartedView({
           .
         </Typography>
       </Stack>
-      <Grid container spacing={0} columns={4}>
+      <Grid container spacing={1} columns={3}>
         {views.map((view) => {
           if (view.description && view.thumbnail) {
             return (
-              <Grid item key={view.id} xs={1} sx={{ marginRight: 2 }}>
+              <Grid item key={view.id} xs={1}>
                 <Tile view={view} />
               </Grid>
             )
diff --git a/Eplant/views/PublicationViewer/index.tsx b/Eplant/views/PublicationViewer/index.tsx
index 619ef07f..f983e964 100644
--- a/Eplant/views/PublicationViewer/index.tsx
+++ b/Eplant/views/PublicationViewer/index.tsx
@@ -9,7 +9,7 @@ import Thumbnail from '../../../thumbnails/publication_viewer.png'
 import { ViewDataError } from '@eplant/View/viewData'
 
 const PublicationViewer: View<PublicationViewerData> = {
-  name: 'Publication Viewer',
+  name: 'Publication viewer',
   id: 'publication-viewer',
   component({
     geneticElement,
diff --git a/Eplant/views/eFP/Tooltips/EFPTooltip.tsx b/Eplant/views/eFP/Tooltips/EFPTooltip.tsx
index 9325ddcf..531eedda 100644
--- a/Eplant/views/eFP/Tooltips/EFPTooltip.tsx
+++ b/Eplant/views/eFP/Tooltips/EFPTooltip.tsx
@@ -31,6 +31,30 @@ export const setStroke = (
   }
 }
 
+function KeyValueRow(props: {
+  label: string,
+  value: string | number
+}) {
+
+  return <TableRow>
+  <TableCell
+    sx={theme => ({
+      color: theme.palette.text.secondary,
+      textAlign: 'left',
+      border: 'none',
+    })}
+  >
+    {props.label}
+  </TableCell>
+  <TableCell
+      sx={theme => ({
+      color: theme.palette.text.primary,
+      textAlign: 'right',
+      border: 'none'
+    })}>{props.value}</TableCell>
+</TableRow>
+}
+
 function SVGTooltip(props: {
   el: SVGElement | null
   group: EFPGroup
@@ -75,78 +99,19 @@ function SVGTooltip(props: {
           >
             <Table size="small">
               <TableBody>
-                <TableRow>
-                  <TableCell
-                    sx={{
-                      color: theme.palette.secondary.main,
-                      textAlign: 'right',
-                    }}
-                  >
-                    Sample name
-                  </TableCell>
-                  <TableCell>{props.tissue.name}</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell
-                    sx={{
-                      color: theme.palette.secondary.main,
-                      textAlign: 'right',
-                    }}
-                  >
-                    Level
-                  </TableCell>
-                  <TableCell>
-                    {props.tissue.mean.toFixed(2)}±{props.tissue.std.toFixed(2)}
+                <TableRow> 
+                  <TableCell colSpan={2} sx={{
+                    fontSize: 'medium',
+                    fontWeight: '500',
+                    border: 'none'
+                  }}>
+                  {props.tissue.name}
                   </TableCell>
                 </TableRow>
-                {props.state.colorMode == 'relative' ? (
-                  <>
-                    <TableRow>
-                      <TableCell
-                        sx={{
-                          color: theme.palette.secondary.main,
-                          textAlign: 'right',
-                        }}
-                      >
-                        Samples
-                      </TableCell>
-                      <TableCell>{props.tissue.samples}</TableCell>
-                    </TableRow>
-                    <TableRow>
-                      <TableCell
-                        sx={{
-                          color: theme.palette.secondary.main,
-                          textAlign: 'right',
-                          borderBottom: 'none',
-                        }}
-                      >
-                        Log2 fold change vs control
-                      </TableCell>
-                      <TableCell sx={{ borderBottom: 'none' }}>
-                        {Math.log2(
+                <KeyValueRow label="Level" value={`${props.tissue.mean.toFixed(2)}±${props.tissue.std.toFixed(2)}`}/>
+                <KeyValueRow label="Log2 fold change vs control" value={Math.log2(
                           props.tissue.mean / (props.data.control ?? 1),
-                        ).toFixed(2)}
-                      </TableCell>
-                    </TableRow>
-                  </>
-                ) : (
-                  <>
-                    <TableRow>
-                      <TableCell
-                        sx={{
-                          color: theme.palette.secondary.main,
-                          textAlign: 'right',
-                          borderBottom: 'none',
-                        }}
-                      >
-                        Samples
-                      </TableCell>
-                      <TableCell sx={{ borderBottom: 'none' }}>
-                        {props.tissue.samples}
-                      </TableCell>
-                    </TableRow>
-                  </>
-                )}
+                        ).toFixed(2)}/>
               </TableBody>
             </Table>
           </Box>
diff --git a/Eplant/views/eFP/Viewer/index.tsx b/Eplant/views/eFP/Viewer/index.tsx
index 4de4bbc1..f57037ad 100644
--- a/Eplant/views/eFP/Viewer/index.tsx
+++ b/Eplant/views/eFP/Viewer/index.tsx
@@ -17,6 +17,7 @@ import { EFPData } from '../types'
 import Legend from './legend'
 import NotSupported from '@eplant/UI/Layout/ViewNotSupported'
 import Dropdown from '@eplant/UI/Dropdown'
+import { red } from '@mui/material/colors'
 import GeneDistributionChart from './GeneDistributionChart'
 import MaskModal from './MaskModal'
 
@@ -96,6 +97,7 @@ export const EFPListMemoized = function EFPList(props: EFPListProps) {
       width={130}
       style={{
         zIndex: 10,
+        scrollbarWidth: 'none',
       }}
       itemData={props}
     >
@@ -289,29 +291,24 @@ export default class EFPViewer
             flexDirection: 'row',
             alignItems: 'stretch',
             justifyContent: 'stretch',
+            overflow: 'hidden',
           }}
         >
           {/* Left column of EFP Previews */}
           <Box
             sx={{
-              background: (theme) => theme.palette.background.paperOverlay,
-              border: '1px solid',
-              borderRadius: 1,
-              borderColor: (theme) => theme.palette.background.active,
-              padding: 2,
+              padding: 0,
               position: 'relative',
-              left: -16,
-              top: -16,
-              overflow: 'hidden',
             }}
           >
-            {/* Dropdown menus for selecting a view and sort options
-
-            //TODO: Make the dropdown menus appear closer to the button, left aligned and with a max height */}
-            <Box sx={{ marginBottom: 1 }}>
+            {/* Dropdown menus for selecting a view and sort options */}
+            <Box sx={{ marginBottom: 1, display: 'flex', gap: 1 }}>
               <Dropdown
                 color="secondary"
                 variant="text"
+                size="small"
+                sx={{ padding: '0.25rem 0.5rem', minWidth: 'fit-content' }}
+                endIcon={undefined}
                 options={sortedViews.map((view) => (
                   <MenuItem
                     selected={props.state.activeView == view.id ? true : false}
@@ -324,10 +321,13 @@ export default class EFPViewer
                   </MenuItem>
                 ))}
               >
-                Select
+                View
               </Dropdown>
               <Dropdown
                 variant="text"
+                size="small"
+                sx={{ padding: '0.25rem 0.5rem', minWidth: 'fit-content' }}
+                endIcon={undefined}
                 color="secondary"
                 options={[
                   <MenuItem
@@ -370,11 +370,17 @@ export default class EFPViewer
               maskThreshold={props.state.maskThreshold}
             />
           </Box>
+          {/* main canvas area */}
           <Box
-            sx={{
+            sx={(theme) => ({
               flexGrow: 1,
               position: 'relative',
-            }}
+              overflow: 'hidden',
+              background: theme.palette.background.paperOverlay,
+              border: `1px solid`,
+              borderColor: theme.palette.background.active,
+              borderRadius: theme.shape.borderRadius + 'px',
+            })}
           >
             {props.activeData.viewData[activeViewIndex].supported ? (
               <>
@@ -397,7 +403,7 @@ export default class EFPViewer
                   sx={(theme) => ({
                     position: 'absolute',
                     left: theme.spacing(2),
-                    bottom: 0,
+                    bottom: theme.spacing(2),
                     zIndex: 10,
                   })}
                   data={{
@@ -412,8 +418,8 @@ export default class EFPViewer
                 <PanZoom
                   sx={(theme) => ({
                     position: 'absolute',
-                    top: theme.spacing(4),
-                    left: theme.spacing(2),
+                    top: theme.spacing(0),
+                    left: theme.spacing(0),
                     width: '100%',
                     height: '100%',
                     zIndex: 0,
diff --git a/index.html b/index.html
index 4f53998e..ca175723 100644
--- a/index.html
+++ b/index.html
@@ -1,20 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="Eplant/index.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto Mono:300,400,500,700&display=swap" />
-    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
-    <link rel="manifest" href="static/site.webmanifest">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="Eplant/index.css" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto Mono:300,400,500,700&display=swap"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="static/apple-touch-icon.png"
+    />
+    <link rel="icon" type="image/svg+xml" href="static/favicon.svg" />
+    <link rel="icon" type="image/png" href="static/favicon.png" />
+    <link rel="manifest" href="static/site.webmanifest" />
     <script type="module" src="Eplant/main.tsx"></script>
     <title>Eplant</title>
-</head>
-<body>
+  </head>
+  <body>
     <div id="root"></div>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/static/android-chrome-192x192.png b/static/android-chrome-192x192.png
deleted file mode 100644
index f270bf85..00000000
Binary files a/static/android-chrome-192x192.png and /dev/null differ
diff --git a/static/android-chrome-512x512.png b/static/android-chrome-512x512.png
deleted file mode 100644
index c30d070b..00000000
Binary files a/static/android-chrome-512x512.png and /dev/null differ
diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png
deleted file mode 100644
index 0e82ed28..00000000
Binary files a/static/apple-touch-icon.png and /dev/null differ
diff --git a/static/favicon-16x16.png b/static/favicon-16x16.png
deleted file mode 100644
index d1cfb285..00000000
Binary files a/static/favicon-16x16.png and /dev/null differ
diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png
deleted file mode 100644
index 30c70a5d..00000000
Binary files a/static/favicon-32x32.png and /dev/null differ
diff --git a/static/favicon.ico b/static/favicon.ico
deleted file mode 100644
index 0c5fed4c..00000000
Binary files a/static/favicon.ico and /dev/null differ
diff --git a/static/favicon.png b/static/favicon.png
new file mode 100644
index 00000000..6851b630
Binary files /dev/null and b/static/favicon.png differ
diff --git a/static/favicon.svg b/static/favicon.svg
new file mode 100644
index 00000000..efeedca5
--- /dev/null
+++ b/static/favicon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="800px" height="800px"><svg fill="#99CC00" width="800px" height="800px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<title>ePlant</title>
+<path d="M30.039 2.719c-0.143-0.544-0.631-0.939-1.211-0.939-0.395 0-0.748 0.184-0.977 0.47l-0.002 0.002c-1.639 1.931-3.786 3.384-6.235 4.158l-0.096 0.026c-1.66 0.54-3.592 0.925-5.588 1.079l-0.086 0.005c-2.296 0.094-4.448 0.609-6.414 1.468l0.114-0.045c-3.466 1.876-5.78 5.485-5.78 9.633 0 0.064 0.001 0.127 0.002 0.19l-0-0.010c0.010 0.318 0.031 0.631 0.068 0.945 0.144 1.149 0.443 2.193 0.877 3.163l-0.028-0.070c-1.472 1.947-2.758 4.166-3.758 6.536l-0.076 0.204c-0.064 0.145-0.101 0.314-0.101 0.492 0 0.512 0.309 0.953 0.75 1.146l0.008 0.003c0.144 0.064 0.311 0.102 0.487 0.102 0.001 0 0.003 0 0.004 0h-0c0 0 0.001 0 0.001 0 0.512 0 0.953-0.308 1.146-0.75l0.003-0.008c0.863-2.053 1.833-3.813 2.96-5.455l-0.066 0.102c1.149 1.549 2.642 2.78 4.37 3.593l0.070 0.030c1.482 0.678 3.216 1.072 5.041 1.072 0.026 0 0.052-0 0.077-0l-0.004 0c1.957-0.008 3.82-0.406 5.517-1.119l-0.095 0.035c5.424-2.452 9.281-7.517 9.983-13.546l0.008-0.079c0.151-1.153 0.237-2.486 0.237-3.839 0-3.061-0.441-6.020-1.264-8.815l0.056 0.22zM28.537 14.781c-0.578 5.22-3.848 9.56-8.373 11.642l-0.090 0.037c-1.28 0.561-2.772 0.888-4.34 0.888-1.522 0-2.972-0.308-4.292-0.864l0.073 0.027c-1.604-0.758-2.91-1.921-3.822-3.358l-0.022-0.037c3.354-3.495 8.014-5.715 13.193-5.872l0.029-0.001c0.636-0.064 1.129-0.596 1.129-1.244 0-0.69-0.56-1.25-1.25-1.25-0.043 0-0.085 0.002-0.126 0.006l0.005-0c-5.472 0.226-10.391 2.428-14.097 5.906l0.012-0.011c-0.102-0.347-0.188-0.766-0.242-1.196l-0.004-0.042c-0.027-0.24-0.045-0.482-0.051-0.723-0.001-0.048-0.002-0.105-0.002-0.162 0-3.16 1.757-5.909 4.348-7.325l0.044-0.022c1.6-0.679 3.456-1.104 5.402-1.174l0.027-0.001c2.288-0.177 4.409-0.604 6.429-1.258l-0.195 0.055c2.238-0.74 4.171-1.848 5.83-3.267l-0.023 0.020c0.404 1.735 0.635 3.727 0.635 5.773 0 1.216-0.082 2.414-0.24 3.587l0.015-0.137z"></path>
+</svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+</style></svg>
\ No newline at end of file