diff --git a/frontend/app/user/components/ThemeSelect/DarkModeToggle.tsx b/frontend/app/user/components/ThemeSelect/DarkModeToggle.tsx
deleted file mode 100644
index d3ed68664b1..00000000000
--- a/frontend/app/user/components/ThemeSelect/DarkModeToggle.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/* eslint-disable */
-"use client";
-import { MdDarkMode, MdLightMode } from "react-icons/md";
-
-import Button from "@/lib/components/ui/Button";
-import { useTheme } from "./hooks/useTheme";
-
-export const DarkModeToggle = (): JSX.Element => {
-  const { isDark, setTheme } = useTheme();
-
-  return (
-    <Button
-      aria-label="toggle dark mode"
-      className="focus:outline-none text-3xl"
-      onClick={() => setTheme(isDark ? "light" : "dark")}
-      variant={"tertiary"}
-    >
-      {isDark ? <MdLightMode /> : <MdDarkMode />}
-    </Button>
-  );
-};
diff --git a/frontend/app/user/components/ThemeSelect/ThemeSelect.tsx b/frontend/app/user/components/ThemeSelect/ThemeSelect.tsx
deleted file mode 100644
index 706d484dd0b..00000000000
--- a/frontend/app/user/components/ThemeSelect/ThemeSelect.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-"use client";
-
-import { FormEvent } from "react";
-import { useTranslation } from "react-i18next";
-
-/* eslint-disable-next-line sort-imports */
-import { useTheme, type Theme } from "./hooks/useTheme";
-
-const ThemeSelect = (): JSX.Element => {
-  const { theme, setTheme } = useTheme();
-  const { t } = useTranslation(["translation"]);
-  const handleChange = (e: FormEvent<HTMLSelectElement>) => {
-    setTheme(e.currentTarget.value as Theme);
-  };
-
-  return (
-    <fieldset name="theme" className="mb-2">
-      <label
-        className="block text-slate-700 dark:text-slate-300 mb-2"
-        htmlFor="theme"
-      >
-        {t("themeSelect")}
-      </label>
-
-      <select
-        data-testid="theme-select"
-        name="theme"
-        id="theme"
-        value={theme}
-        onChange={handleChange}
-        className="bg-slate-50 focus:outline-none focus-visible:ring-none border rounded dark:bg-black dark:text-white p-2 w-full md:w-1/2 lg:w-1/3"
-      >
-        <option data-testid="theme-dark" value="dark">
-          Dark
-        </option>
-        <option data-testid="theme-light" value="light">
-          Light
-        </option>
-      </select>
-    </fieldset>
-  );
-};
-
-ThemeSelect.displayName = "ThemeSelect";
-
-export default ThemeSelect;
diff --git a/frontend/app/user/components/ThemeSelect/__tests__/ThemeSelect.test.tsx b/frontend/app/user/components/ThemeSelect/__tests__/ThemeSelect.test.tsx
deleted file mode 100644
index b2df4f4f230..00000000000
--- a/frontend/app/user/components/ThemeSelect/__tests__/ThemeSelect.test.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { fireEvent, render } from "@testing-library/react";
-import { afterEach, describe, expect, it, vi } from "vitest";
-
-import ThemeSelect from "../ThemeSelect";
-
-const useTranslationMock = vi.fn(() => ({
-  t: (str: string): string => str,
-}));
-
-vi.mock("react-i18next", () => ({
-  useTranslation: () => useTranslationMock(),
-}));
-
-describe("ThemeSelect", () => {
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it("should render ThemeSelect component", () => {
-    const { getByTestId } = render(<ThemeSelect />);
-    const select = getByTestId("theme-select");
-    expect(select).toBeDefined();
-    expect(getByTestId("theme-dark")).toBeDefined();
-
-    // defaults to light
-    const lightOption = getByTestId("theme-light") as HTMLOptionElement;
-    expect(lightOption).toBeDefined();
-    expect(lightOption.selected).toBeTruthy();
-  });
-
-  it.each([
-    { input: "dark", expected: { dark: true, light: false } },
-    { input: "light", expected: { dark: false, light: true } },
-  ])("should select $input theme option", ({ input, expected }) => {
-    const { getByTestId } = render(<ThemeSelect />);
-    const select = getByTestId("theme-select");
-    const darkOption = getByTestId("theme-dark") as HTMLOptionElement;
-    const lightOption = getByTestId("theme-light") as HTMLOptionElement;
-
-    fireEvent.change(select, { target: { value: input } });
-
-    expect(darkOption.selected).toBe(expected.dark);
-    expect(lightOption.selected).toBe(expected.light);
-  });
-});
diff --git a/frontend/app/user/components/ThemeSelect/hooks/useTheme.ts b/frontend/app/user/components/ThemeSelect/hooks/useTheme.ts
deleted file mode 100644
index b3020eb5110..00000000000
--- a/frontend/app/user/components/ThemeSelect/hooks/useTheme.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useEffect, useLayoutEffect, useState } from "react";
-
-export type Theme = "dark" | "light" | "system";
-
-/**
- * @todo implement "system" theme
- */
-export const useTheme = (): {
-  isDark: boolean;
-  isLight: boolean;
-  theme: Theme;
-  setTheme: (t: Theme) => void;
-} => {
-  const [theme, setTheme] = useState<Theme>("light");
-  const isDark = theme === "dark";
-  const isLight = theme === "light";
-
-  useLayoutEffect(() => {
-    const savedTheme = localStorage.getItem("theme");
-
-    if (savedTheme === "dark") {
-      document.body.parentElement?.classList.add("dark");
-
-      setTheme(savedTheme);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (isDark) {
-      document.body.parentElement?.classList.add("dark");
-    } else {
-      document.body.parentElement?.classList.remove("dark");
-    }
-
-    localStorage.setItem("theme", theme);
-  }, [theme, isDark]);
-
-  return {
-    isDark,
-    isLight,
-    theme,
-    setTheme,
-  };
-};
diff --git a/frontend/app/user/page.tsx b/frontend/app/user/page.tsx
index cd667713d92..ae59da822db 100644
--- a/frontend/app/user/page.tsx
+++ b/frontend/app/user/page.tsx
@@ -11,7 +11,6 @@ import { StripePricingOrManageButton, UserStatistics } from "./components";
 import { ApiKeyConfig } from "./components/ApiKeyConfig";
 import LanguageSelect from "./components/LanguageSelect/LanguageSelect";
 import { LogoutModal } from "./components/LogoutCard/LogoutModal";
-import ThemeSelect from "./components/ThemeSelect/ThemeSelect";
 
 const UserPage = (): JSX.Element => {
   const { session } = useSupabase();
@@ -58,8 +57,6 @@ const UserPage = (): JSX.Element => {
 
           <CardBody>
             <LanguageSelect />
-
-            <ThemeSelect />
           </CardBody>
         </Card>
         <Card className="mb-5 shadow-sm hover:shadow-none">