diff --git a/src/components/bootstrap/BadgeCustomColours.tsx b/src/components/bootstrap/BadgeCustomColours.tsx
deleted file mode 100644
index e9c23207..00000000
--- a/src/components/bootstrap/BadgeCustomColours.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-// Badge.tsx, sourced from https://github.com/react-bootstrap/react-bootstrap/blob/1498aba5c3ab6e52191178ff4dfa472e234a79de/src/Badge.tsx
-
-import PropTypes from "prop-types";
-import classNames from "classnames";
-import * as React from "react";
-
-import { useBootstrapPrefix } from "react-bootstrap/ThemeProvider";
-import { BsPrefixProps, BsPrefixRefForwardingComponent } from "react-bootstrap/helpers";
-import { Color, Variant } from "react-bootstrap/types";
-
-export interface BadgeCustomColoursProps extends BsPrefixProps, React.HTMLAttributes<HTMLElement> {
-	bg?: Variant;
-	pill?: boolean;
-	text?: Color;
-}
-
-const propTypes = {
-	/** @default 'badge' */
-	bsPrefix: PropTypes.string,
-
-	/**
-	 * The visual style of the badge
-	 *
-	 *
-	 */
-	bg: PropTypes.string,
-
-	/**
-	 * Add the `pill` modifier to make badges more rounded with
-	 * some additional horizontal padding
-	 */
-	pill: PropTypes.bool,
-
-	/**
-	 * Sets badge text color
-	 *
-	 * @type {('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark')}
-	 */
-	text: PropTypes.string,
-
-	/** @default span */
-	as: PropTypes.elementType,
-};
-
-const BadgeCustomColours: BsPrefixRefForwardingComponent<"span", BadgeCustomColoursProps> =
-	React.forwardRef<HTMLElement, BadgeCustomColoursProps>(
-		(
-			{ bsPrefix, bg = "blue", pill = false, text, className, as: Component = "span", ...props },
-			ref
-		) => {
-			const prefix = useBootstrapPrefix(bsPrefix, "badge");
-			return (
-				<Component
-					ref={ref}
-					{...props}
-					className={classNames(className, prefix, pill && `rounded-pill`, text && `text-${text}`)}
-					style={{
-						backgroundColor: bg,
-					}}
-				/>
-			);
-		}
-	);
-
-BadgeCustomColours.displayName = "Badge";
-BadgeCustomColours.propTypes = propTypes;
-
-export default BadgeCustomColours;
diff --git a/src/components/team/creditEntry.tsx b/src/components/team/creditEntry.tsx
index b6db9397..e9dbf93e 100644
--- a/src/components/team/creditEntry.tsx
+++ b/src/components/team/creditEntry.tsx
@@ -5,10 +5,10 @@ import Row from "react-bootstrap/Row";
 import Modal from "react-bootstrap/Modal";
 
 import { TeamBadges } from "./teamBadges";
-import { TeamMemberNode } from "../../types/teamMemberNode";
+import { TeamMemberNode } from "../../types/graphql/teamMemberNode";
 import { GatsbyImage, getImage } from "gatsby-plugin-image";
 
-import TeamTag from "../../types/teamTag";
+import TeamTag from "../../types/team/teamTag";
 import { Theme } from "@mui/material";
 
 type CreditEntryArgs = {
diff --git a/src/components/team/filterMenu.tsx b/src/components/team/filterMenu.tsx
new file mode 100644
index 00000000..7bb5ea2e
--- /dev/null
+++ b/src/components/team/filterMenu.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+
+import { Button, Menu } from "@mui/material";
+
+import { FilterMenuProps } from "../../types/team/filterMenuProps";
+
+const FilterMenu = (props: FilterMenuProps) => {
+	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+	const open = Boolean(anchorEl);
+	const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+
+	return (
+		<>
+			<Button
+				id="chip-filter-menu-button"
+				aria-controls={open ? "chip-filter-menu" : undefined}
+				aria-haspopup="true"
+				aria-expanded={open ? "true" : undefined}
+				onClick={handleClick}
+			>
+				Filters
+			</Button>
+			<Menu id="chip-filter-menu" anchorEl={anchorEl} open={open} onClose={handleClose}>
+				{props.elements}
+			</Menu>
+		</>
+	);
+};
+
+export default FilterMenu;
diff --git a/src/components/team/teamBadges.tsx b/src/components/team/teamBadges.tsx
index a418164c..37fa65d9 100644
--- a/src/components/team/teamBadges.tsx
+++ b/src/components/team/teamBadges.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import TeamTag from "../../types/teamTag";
+import TeamTag from "../../types/team/teamTag";
 import { Chip, Theme } from "@mui/material";
 import capitalizeWords from "../../capitalizeWords";
 
diff --git a/src/filters/teamEntryFilter.ts b/src/filters/teamEntryFilter.ts
index b9ccb33f..b86e2371 100644
--- a/src/filters/teamEntryFilter.ts
+++ b/src/filters/teamEntryFilter.ts
@@ -1,5 +1,5 @@
 import { CreditEntry } from "../components/team/creditEntry";
-import { FilterChip } from "../types/filterChip";
+import { FilterChip } from "../types/team/filterChip";
 
 const teamEntryFilter = (
 	entries: React.JSX.Element[],
diff --git a/src/pages/team.tsx b/src/pages/team.tsx
index 83f3358e..25bc7463 100644
--- a/src/pages/team.tsx
+++ b/src/pages/team.tsx
@@ -4,10 +4,11 @@ import { graphql, PageProps } from "gatsby";
 
 import "bootstrap/dist/css/bootstrap.min.css";
 import { CreditEntry } from "../components/team/creditEntry";
-import { TeamMemberNode } from "../types/teamMemberNode";
+import { TeamMemberNode } from "../types/graphql/teamMemberNode";
 import {
 	Chip,
 	createTheme,
+	MenuItem,
 	SimplePaletteColorOptions,
 	TextField,
 	Theme,
@@ -17,14 +18,15 @@ import AddIcon from "@mui/icons-material/Add";
 
 import update from "immutability-helper";
 
-import { TeamTagColourNode } from "../types/teamTagColourNode";
-import TeamTag from "../types/teamTag";
+import { TeamTagColourNode } from "../types/graphql/teamTagColourNode";
+import TeamTag from "../types/team/teamTag";
 import ExtendablePalette from "../types/extendablePalette";
-import { FilterChip, FilterChipEntry } from "../types/filterChip";
+import { FilterChip, FilterChipEntry } from "../types/team/filterChip";
 
 import capitalizeWords from "../capitalizeWords";
 import teamEntryFilter from "../filters/teamEntryFilter";
 import Navbar from "../components/navbar";
+import FilterMenu from "../components/team/filterMenu";
 
 // TypeScript type def for the component state
 // https://stackoverflow.com/questions/46987816/using-state-in-react-with-typescript
@@ -212,38 +214,24 @@ export default class TeamPage extends React.PureComponent<
 							variant="outlined"
 							onChange={event => this.setState({ searchQuery: event.target.value })}
 						/>
-						{/**
-						 * Filter chips
-						 */}
-						{this.state.filterChip.map(entry => {
-							if (entry.enabled) {
+						<FilterMenu
+							elements={this.state.filterChip.map(entry => {
+								// Filter chips
 								return (
-									<span style={{ paddingLeft: 16 }}>
+									<MenuItem>
 										<Chip
+											variant={entry.enabled ? "filled" : "outlined"}
+											deleteIcon={entry.enabled ? <></> : <AddIcon />}
 											onClick={(event: any) => this.handleChipClick(event, entry)}
 											label={capitalizeWords(entry.tag.name)}
 											color={entry.tag.paletteName}
 											size="small"
 											sx={{ fontWeight: "bold" }}
 										/>
-									</span>
+									</MenuItem>
 								);
-							} else {
-								return (
-									<span style={{ paddingLeft: 16 }}>
-										<Chip
-											variant="outlined"
-											deleteIcon={<AddIcon />}
-											onClick={(event: any) => this.handleChipClick(event, entry)}
-											label={capitalizeWords(entry.tag.name)}
-											color={entry.tag.paletteName}
-											size="small"
-											sx={{ fontWeight: "bold" }}
-										/>
-									</span>
-								);
-							}
-						})}
+							})}
+						/>
 					</div>
 					{teamEntryFilter(this.entries, this.state.searchQuery, this.state.filterChip)}
 				</ThemeProvider>
diff --git a/src/types/nodeUnneededKeys.ts b/src/types/graphql/nodeUnneededKeys.ts
similarity index 100%
rename from src/types/nodeUnneededKeys.ts
rename to src/types/graphql/nodeUnneededKeys.ts
diff --git a/src/types/teamMemberNode.ts b/src/types/graphql/teamMemberNode.ts
similarity index 100%
rename from src/types/teamMemberNode.ts
rename to src/types/graphql/teamMemberNode.ts
diff --git a/src/types/teamTagColourNode.ts b/src/types/graphql/teamTagColourNode.ts
similarity index 100%
rename from src/types/teamTagColourNode.ts
rename to src/types/graphql/teamTagColourNode.ts
diff --git a/src/types/filterChip.ts b/src/types/team/filterChip.ts
similarity index 100%
rename from src/types/filterChip.ts
rename to src/types/team/filterChip.ts
diff --git a/src/types/team/filterMenuProps.ts b/src/types/team/filterMenuProps.ts
new file mode 100644
index 00000000..49079547
--- /dev/null
+++ b/src/types/team/filterMenuProps.ts
@@ -0,0 +1,3 @@
+export type FilterMenuProps = {
+	elements: React.JSX.Element[];
+};
diff --git a/src/types/teamTag.ts b/src/types/team/teamTag.ts
similarity index 100%
rename from src/types/teamTag.ts
rename to src/types/team/teamTag.ts