diff --git a/src/App.tsx b/src/App.tsx
index c70669e..e9039e8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
 import { ThemeProvider } from "@emotion/react";
 import { useEffect, useState, useReducer, useMemo } from "react";
-import Log_Menu from "./components/Log_Menu.tsx";
+import FilterMenu from "./components/FilterMenu.tsx";
 import { theme } from "./theme";
 import BoxBasic from "./components/Box";
 import {
@@ -16,14 +16,13 @@ import {
 import { payload } from "./schema/payload.ts";
 
 import Table from "@mui/material/Table";
-import TextField from "@mui/material/TextField";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableRow from "@mui/material/TableRow";
 import Paper from "@mui/material/Paper";
 import { TableHead } from "@mui/material";
-import { log_levels } from "./schema/Log_Levels.ts";
+import { LogLevel } from "./schema/level.ts";
 
 function App() {
   // Initialize information for Queries and Auth
@@ -136,24 +135,15 @@ function App() {
   return (
     <ThemeProvider theme={theme}>
       <h1>Athena Logpanel </h1>
-      <Log_Menu
-        logFilterValue={logFilter}
-        onLogFilterChange={handleLogFilterChange}
-      />
-      <TextField
-        id="app-name"
-        label="Application Name"
-        variant="outlined"
-        margin="normal"
-        onChange={e => handleAppName(e.target.value)}
-      />
-      <TextField
-        id="beamline"
-        label="Beamline"
-        variant="outlined"
-        margin="normal"
-        onChange={e => handleBeamline(e.target.value)}
+      <FilterMenu
+        level={logFilter}
+        onLevelChange={handleLogFilterChange}
+        beamline=""
+        onBeamlineChange={handleBeamline}
+        application=""
+        onApplicationChange={handleAppName}
       />
+
       <BoxBasic>
         <TableContainer component={Paper}>
           <Table sx={{ minWidth: 650 }} aria-label="simple table">
@@ -230,14 +220,14 @@ function getMessage(logging: JSON): LogRecord | undefined {
     // Type Checking of API Response
     if (MessageType(message)) {
       app_name.push(message.application_name);
-      const level_str = log_levels[message.level] || "UNKNOWN";
+      const level_str = LogLevel[message.level] || "UNKNOWN";
       log_level_str.push(level_str);
       log_message.push(message.full_message);
       log_level.push(message.level);
     }
     if (isLogMessageCluster(message)) {
       app_name.push(message.cluster_name);
-      const level_str = log_levels[message.level] || "UNKNOWN";
+      const level_str = LogLevel[message.level] || "UNKNOWN";
       log_level_str.push(level_str);
       log_message.push(message.message);
       log_level.push(message.level);
diff --git a/src/components/FilterMenu.tsx b/src/components/FilterMenu.tsx
new file mode 100644
index 0000000..7473ebe
--- /dev/null
+++ b/src/components/FilterMenu.tsx
@@ -0,0 +1,70 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import FormControl from "@mui/material/FormControl";
+import { allLogLevels } from "../schema/level";
+import { Grid, Select, TextField } from "@mui/material";
+
+interface Props {
+  level: number;
+  onLevelChange: (level: number) => void;
+  beamline: string;
+  onBeamlineChange: (beamline: string) => void;
+  application: string;
+  onApplicationChange: (application: string) => void;
+}
+
+const FilterMenu: React.FC<Props> = (props: Props) => {
+  return (
+    <Box sx={{ padding: "1vw" }}>
+      <Grid container spacing={2}>
+        <Grid item xs={1}>
+          <FormControl fullWidth margin="normal">
+            <InputLabel id="log-filter-id">Level</InputLabel>
+            <Select
+              id="log-filter-label"
+              value={props.level}
+              label="Level"
+              onChange={e =>
+                props.onLevelChange(e.target.value as unknown as number)
+              }
+            >
+              {allLogLevels().map(([level, num]) => (
+                <MenuItem key={level} value={num}>
+                  {level}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Grid>
+        <Grid item xs>
+          <TextField
+            id="app-name"
+            label="Application"
+            variant="outlined"
+            margin="normal"
+            onChange={e => props.onApplicationChange(e.target.value)}
+            fullWidth
+          >
+            {props.application}
+          </TextField>
+        </Grid>
+        <Grid item xs>
+          <TextField
+            id="beamline"
+            label="Beamline"
+            variant="outlined"
+            margin="normal"
+            onChange={e => props.onBeamlineChange(e.target.value)}
+            fullWidth
+          >
+            {props.beamline}
+          </TextField>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default FilterMenu;
diff --git a/src/components/Log_Menu.tsx b/src/components/Log_Menu.tsx
deleted file mode 100644
index e5f63cf..0000000
--- a/src/components/Log_Menu.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from "react";
-import Box from "@mui/material/Box";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select, { SelectChangeEvent } from "@mui/material/Select";
-import { log_levels } from "../schema/Log_Levels";
-
-interface Props {
-  logFilterValue: number;
-  onLogFilterChange: (newLogFilterValue: number) => void;
-}
-
-const BasicSelect: React.FC<Props> = ({
-  logFilterValue,
-  onLogFilterChange,
-}) => {
-  const handleChange = (event: SelectChangeEvent) => {
-    const newLogFilterValue = event.target.value as unknown as number;
-    onLogFilterChange(newLogFilterValue);
-  };
-
-  return (
-    <Box sx={{ minWidth: 120 }}>
-      <FormControl fullWidth>
-        <InputLabel id="log-filter-id">Minimum Log Filter</InputLabel>
-        <Select
-          labelId="log-filter-id"
-          id="log-filter-label"
-          value={logFilterValue.toString()}
-          label="Minimum Log Filter"
-          onChange={handleChange}
-        >
-          {Object.entries(log_levels).map(([level_value, level_name]) => (
-            <MenuItem key={level_value} value={parseInt(level_value)}>
-              {level_name}
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-    </Box>
-  );
-};
-
-export default BasicSelect;
diff --git a/src/schema/Log_Levels.ts b/src/schema/Log_Levels.ts
deleted file mode 100644
index 80ae625..0000000
--- a/src/schema/Log_Levels.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export const log_levels: { [key: number]: string } = {
-  0: "EMERG",
-  1: "ALERT",
-  2: "CRIT",
-  3: "ERROR",
-  4: "WARN",
-  5: "NOTICE",
-  6: "INFO",
-  7: "DEBUG",
-};
diff --git a/src/schema/level.ts b/src/schema/level.ts
new file mode 100644
index 0000000..1d92252
--- /dev/null
+++ b/src/schema/level.ts
@@ -0,0 +1,17 @@
+export enum LogLevel {
+  EMERG = 0,
+  ALERT = 1,
+  CRITICAL = 2,
+  ERROR = 3,
+  WARN = 4,
+  NOTICE = 5,
+  INFO = 6,
+  DEBUG = 7,
+}
+
+export function allLogLevels(): [string, number][] {
+  // Typescript annoyance, there doesn't seem to be a nice solution
+  // https://stackoverflow.com/questions/56044872/typescript-enum-object-values-return-value
+  const entries = Object.entries(LogLevel);
+  return entries.slice(entries.length / 2) as [string, number][];
+}