diff --git a/package.json b/package.json
index 81354d2a..69de231c 100644
--- a/package.json
+++ b/package.json
@@ -49,10 +49,12 @@
     "@emotion/styled": "^11.3.0",
     "@haleos/ra-language-german": "^1.0.0",
     "@haxqer/ra-language-chinese": "^4.16.2",
+    "@matrix-org/spec": "^1.10.1",
     "@mui/icons-material": "^5.15.16",
     "@mui/material": "^5.16.0",
     "history": "^5.1.0",
     "lodash": "^4.17.21",
+    "openapi-fetch": "^0.9.5",
     "papaparse": "^5.4.1",
     "query-string": "^7.1.1",
     "ra-core": "^4.16.17",
@@ -91,8 +93,8 @@
     ],
     "extends": [
       "eslint:recommended",
-      "plugin:@typescript-eslint/recommended",
-      "plugin:@typescript-eslint/stylistic",
+      "plugin:@typescript-eslint/recommended-type-checked",
+      "plugin:@typescript-eslint/stylistic-type-checked",
       "plugin:import/typescript",
       "plugin:yaml/recommended"
     ],
diff --git a/src/App.tsx b/src/App.tsx
index 698c66f7..e3c2f40b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import { Admin, CustomRoutes, Resource, resolveBrowserLocale } from "react-admin
 import { Route } from "react-router-dom";
 
 import { ImportFeature } from "./components/ImportFeature";
+import { SynapseTranslationMessages } from "./i18n";
 import germanMessages from "./i18n/de";
 import englishMessages from "./i18n/en";
 import frenchMessages from "./i18n/fr";
@@ -30,7 +31,7 @@ const messages = {
   zh: chineseMessages,
 };
 const i18nProvider = polyglotI18nProvider(
-  locale => (messages[locale] ? merge({}, messages.en, messages[locale]) : messages.en),
+  locale => (messages[locale] ? (merge({}, messages.en, messages[locale]) as SynapseTranslationMessages) : messages.en),
   resolveBrowserLocale(),
   [
     { locale: "en", name: "English" },
diff --git a/src/components/AvatarField.tsx b/src/components/AvatarField.tsx
index 0a8e2328..e4edbdd2 100644
--- a/src/components/AvatarField.tsx
+++ b/src/components/AvatarField.tsx
@@ -1,11 +1,11 @@
 import { get } from "lodash";
 
-import { Avatar } from "@mui/material";
+import { Avatar, AvatarProps } from "@mui/material";
 import { useRecordContext } from "react-admin";
 
-const AvatarField = ({ source, ...rest }) => {
+const AvatarField = ({ source, ...rest }: AvatarProps & { source: string }) => {
   const record = useRecordContext(rest);
-  const src = get(record, source)?.toString();
+  const src = get(record, source, "") as string;
   const { alt, classes, sizes, sx, variant } = rest;
   return <Avatar alt={alt} classes={classes} sizes={sizes} src={src} sx={sx} variant={variant} />;
 };
diff --git a/src/components/ImportFeature.tsx b/src/components/ImportFeature.tsx
index 062af3da..13552db3 100644
--- a/src/components/ImportFeature.tsx
+++ b/src/components/ImportFeature.tsx
@@ -21,7 +21,7 @@ const LOGGING = true;
 
 const expectedFields = ["id", "displayname"].sort();
 
-function TranslatableOption({ value, text }) {
+function TranslatableOption({ value, text }: { value: string; text: string }) {
   const translate = useTranslate();
   return <option value={value}>{translate(text)}</option>;
 }
@@ -81,7 +81,7 @@ const FilePicker = () => {
 
   const dataProvider = useDataProvider();
 
-  const onFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
+  const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (progress !== null) return;
 
     setValues([]);
@@ -106,11 +106,11 @@ const FilePicker = () => {
         skipEmptyLines: true /* especially for a final EOL in the csv file */,
         complete: result => {
           if (result.errors) {
-            setError(result.errors.map(e => e.toString()));
+            setError(result.errors.map(e => String(e)));
           }
           /* Papaparse is very lenient, we may be able to salvage
            * the data in the file. */
-          verifyCsv(result, { setValues, setStats, setError });
+          verifyCsv(result, setValues, setStats, setError);
         },
       });
     } catch {
@@ -119,7 +119,12 @@ const FilePicker = () => {
     }
   };
 
-  const verifyCsv = ({ data, meta, errors }: ParseResult<ImportLine>, { setValues, setStats, setError }) => {
+  const verifyCsv = (
+    { data, meta, errors }: ParseResult<ImportLine>,
+    setValues: (values: ImportLine[]) => void,
+    setStats: (stats: ChangeStats | null) => void,
+    setError: (error: string | string[] | null) => void
+  ) => {
     /* First, verify the presence of required fields */
     const missingFields = expectedFields.filter(eF => meta.fields?.find(mF => eF === mF));
 
@@ -206,29 +211,23 @@ const FilePicker = () => {
     return true;
   };
 
-  const runImport = async () => {
+  const runImport = () => {
     if (progress !== null) {
       notify("import_users.errors.already_in_progress");
       return;
     }
 
-    const results = await doImport(
-      dataProvider,
-      values,
-      conflictMode,
-      passwordMode,
-      useridMode,
-      dryRun,
-      setProgress,
-      setError
+    void doImport(dataProvider, values, conflictMode, passwordMode, useridMode, dryRun, setProgress, setError).then(
+      results => {
+        setImportResults(results);
+        // offer CSV download of skipped or errored records
+        // (so that the user doesn't have to filter out successful
+        // records manually when fixing stuff in the CSV)
+        setSkippedRecords(unparseCsv(results.skippedRecords));
+        if (LOGGING) console.log("Skipped records:");
+        if (LOGGING) console.log(skippedRecords);
+      }
     );
-    setImportResults(results);
-    // offer CSV download of skipped or errored records
-    // (so that the user doesn't have to filter out successful
-    // records manually when fixing stuff in the CSV)
-    setSkippedRecords(unparseCsv(results.skippedRecords));
-    if (LOGGING) console.log("Skipped records:");
-    if (LOGGING) console.log(skippedRecords);
   };
 
   // XXX every single one of the requests will restart the activity indicator
@@ -370,7 +369,7 @@ const FilePicker = () => {
     element.click();
   };
 
-  const onConflictModeChanged = async (e: ChangeEvent<HTMLSelectElement>) => {
+  const onConflictModeChanged = (e: ChangeEvent<HTMLSelectElement>) => {
     if (progress !== null) {
       return;
     }
@@ -387,7 +386,7 @@ const FilePicker = () => {
     setPasswordMode(e.target.checked);
   };
 
-  const onUseridModeChanged = async (e: ChangeEvent<HTMLSelectElement>) => {
+  const onUseridModeChanged = (e: ChangeEvent<HTMLSelectElement>) => {
     if (progress !== null) {
       return;
     }
diff --git a/src/components/ServerNotices.tsx b/src/components/ServerNotices.tsx
index f269a7fb..5fcd87d9 100644
--- a/src/components/ServerNotices.tsx
+++ b/src/components/ServerNotices.tsx
@@ -40,6 +40,7 @@ const ServerNoticeDialog = ({ open, onClose, onSubmit }) => {
       <DialogContent>
         <DialogContentText>{translate("resources.servernotices.helper.send")}</DialogContentText>
         <SimpleForm toolbar={<ServerNoticeToolbar />} onSubmit={onSubmit}>
+          {/* TODO: Use MUI form (does not require a record) */}
           <TextInput
             source="body"
             label="resources.servernotices.fields.body"
diff --git a/src/components/devices.tsx b/src/components/devices.tsx
index 3165a401..db8f7028 100644
--- a/src/components/devices.tsx
+++ b/src/components/devices.tsx
@@ -14,7 +14,7 @@ export const DeviceRemoveButton = (props: DeleteWithConfirmButtonProps) => {
       redirect={false}
       translateOptions={{
         id: record.id,
-        name: record.display_name ? record.display_name : record.id,
+        name: String(record.display_name ?? record.id),
       }}
     />
   );
diff --git a/src/components/media.tsx b/src/components/media.tsx
index 893b1af7..39c4299c 100644
--- a/src/components/media.tsx
+++ b/src/components/media.tsx
@@ -35,7 +35,13 @@ import { dateParser } from "./date";
 import { DeleteMediaParams, SynapseDataProvider } from "../synapse/dataProvider";
 import { getMediaUrl } from "../synapse/synapse";
 
-const DeleteMediaDialog = ({ open, onClose, onSubmit }) => {
+interface DeleteMediaDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (params: DeleteMediaParams) => void;
+}
+
+const DeleteMediaDialog = ({ open, onClose, onSubmit }: DeleteMediaDialogProps) => {
   const translate = useTranslate();
 
   const DeleteMediaToolbar = (props: ToolbarProps) => (
@@ -53,6 +59,7 @@ const DeleteMediaDialog = ({ open, onClose, onSubmit }) => {
       <DialogContent>
         <DialogContentText>{translate("delete_media.helper.send")}</DialogContentText>
         <SimpleForm toolbar={<DeleteMediaToolbar />} onSubmit={onSubmit}>
+          {/* TODO: Use MUI form (does not require a record) */}
           <DateTimeInput
             fullWidth
             source="before_ts"
diff --git a/src/i18n/it.ts b/src/i18n/it.ts
index bb813c5e..09251166 100644
--- a/src/i18n/it.ts
+++ b/src/i18n/it.ts
@@ -1,9 +1,11 @@
 import italianMessages from "ra-language-italian";
 
+import { TranslationMessages } from "ra-core";
+
 import { SynapseTranslationMessages } from ".";
 
 const it: SynapseTranslationMessages = {
-  ...italianMessages,
+  ...(italianMessages as TranslationMessages),
   synapseadmin: {
     auth: {
       base_url: "URL dell'homeserver",
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index dfb93714..e3ac4804 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -19,14 +19,13 @@ import {
 import { useFormContext } from "react-hook-form";
 
 import { useAppContext } from "../AppContext";
-import {
-  getServerVersion,
-  getSupportedFeatures,
-  getSupportedLoginFlows,
-  getWellKnownUrl,
-  isValidBaseUrl,
-  splitMxid,
-} from "../synapse/synapse";
+import { getServerVersion, getWellKnownUrl, isValidBaseUrl, splitMxid, useSynapse } from "../synapse/synapse";
+
+interface UserDataFields {
+  base_url: string;
+  username: string;
+  password: string;
+}
 
 const FormBox = styled(Box)(({ theme }) => ({
   display: "flex",
@@ -115,20 +114,14 @@ const LoginPage = () => {
       console.log("Base URL is:", baseUrl);
       console.log("SSO Token is:", ssoToken);
       console.log("Let's try token login...");
-      login(auth).catch(error => {
-        alert(
-          typeof error === "string"
-            ? error
-            : typeof error === "undefined" || !error.message
-              ? "ra.auth.sign_in_error"
-              : error.message
-        );
+      login(auth).catch((error: Error | string | undefined) => {
+        alert(typeof error === "string" ? error : !error?.message ? "ra.auth.sign_in_error" : error.message);
         console.error(error);
       });
     }
   }
 
-  const validateBaseUrl = value => {
+  const validateBaseUrl = (value: string) => {
     if (!value.match(/^(http|https):\/\//)) {
       return translate("synapseadmin.auth.protocol_error");
     } else if (!value.match(/^(http|https):\/\/[a-zA-Z0-9\-.]+(:\d{1,5})?[^?&\s]*$/)) {
@@ -140,16 +133,11 @@ const LoginPage = () => {
 
   const handleSubmit = auth => {
     setLoading(true);
-    login(auth).catch(error => {
+    login(auth).catch((error: Error | string | undefined) => {
       setLoading(false);
-      notify(
-        typeof error === "string"
-          ? error
-          : typeof error === "undefined" || !error.message
-            ? "ra.auth.sign_in_error"
-            : error.message,
-        { type: "warning" }
-      );
+      notify(typeof error === "string" ? error : !error?.message ? "ra.auth.sign_in_error" : error.message, {
+        type: "warning",
+      });
     });
   };
 
@@ -161,7 +149,7 @@ const LoginPage = () => {
     window.location.href = ssoFullUrl;
   };
 
-  const UserData = ({ formData }) => {
+  const UserData = ({ formData }: { formData: UserDataFields }) => {
     const form = useFormContext();
     const [serverVersion, setServerVersion] = useState("");
     const [matrixVersions, setMatrixVersions] = useState("");
@@ -171,7 +159,7 @@ const LoginPage = () => {
       // check if username is a full qualified userId then set base_url accordingly
       const domain = splitMxid(formData.username)?.domain;
       if (domain) {
-        getWellKnownUrl(domain).then(url => {
+        void getWellKnownUrl(domain).then(url => {
           if (allowAnyBaseUrl || (allowMultipleBaseUrls && restrictBaseUrl.includes(url)))
             form.setValue("base_url", url);
         });
@@ -183,22 +171,25 @@ const LoginPage = () => {
         form.setValue("base_url", restrictBaseUrl[0]);
       }
       if (!isValidBaseUrl(formData.base_url)) return;
+      const synapseClient = useSynapse(formData.base_url);
 
       getServerVersion(formData.base_url)
         .then(serverVersion => setServerVersion(`${translate("synapseadmin.auth.server_version")} ${serverVersion}`))
         .catch(() => setServerVersion(""));
 
-      getSupportedFeatures(formData.base_url)
+      synapseClient
+        .getSupportedFeatures()
         .then(features =>
-          setMatrixVersions(`${translate("synapseadmin.auth.supports_specs")} ${features.versions.join(", ")}`)
+          setMatrixVersions(`${translate("synapseadmin.auth.supports_specs")} ${features?.versions.join(", ")}`)
         )
         .catch(() => setMatrixVersions(""));
 
       // Set SSO Url
-      getSupportedLoginFlows(formData.base_url)
+      synapseClient
+        .getSupportedLoginFlows()
         .then(loginFlows => {
-          const supportPass = loginFlows.find(f => f.type === "m.login.password") !== undefined;
-          const supportSSO = loginFlows.find(f => f.type === "m.login.sso") !== undefined;
+          const supportPass = loginFlows?.find(f => f.type === "m.login.password") !== undefined;
+          const supportSSO = loginFlows?.find(f => f.type === "m.login.sso") !== undefined;
           setSupportPassAuth(supportPass);
           setSSOBaseUrl(supportSSO ? formData.base_url : "");
         })
@@ -286,7 +277,7 @@ const LoginPage = () => {
                 </MenuItem>
               ))}
             </Select>
-            <FormDataConsumer>{formDataProps => <UserData {...formDataProps} />}</FormDataConsumer>
+            <FormDataConsumer<UserDataFields>>{formDataProps => <UserData {...formDataProps} />}</FormDataConsumer>
             <CardActions className="actions">
               <Button
                 variant="contained"
diff --git a/src/resources/destinations.tsx b/src/resources/destinations.tsx
index 8a249a1b..68a12cb3 100644
--- a/src/resources/destinations.tsx
+++ b/src/resources/destinations.tsx
@@ -46,13 +46,13 @@ export const DestinationReconnectButton = () => {
   const [handleReconnect, { isLoading }] = useDelete();
 
   // Reconnect is not required if no error has occurred. (`failure_ts`)
-  if (!record || !record.failure_ts) return null;
+  if (!record?.failure_ts) return null;
 
   const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
     // Prevents redirection to the detail page when clicking in the list
     e.stopPropagation();
 
-    handleReconnect(
+    void handleReconnect(
       "destinations",
       { id: record.id },
       {
diff --git a/src/resources/room_directory.tsx b/src/resources/room_directory.tsx
index a9017fdd..f928e996 100644
--- a/src/resources/room_directory.tsx
+++ b/src/resources/room_directory.tsx
@@ -73,7 +73,7 @@ export const RoomDirectoryBulkPublishButton = (props: ButtonProps) => {
   const { mutate, isLoading } = useMutation(
     () =>
       dataProvider.createMany("room_directory", {
-        ids: selectedIds,
+        /* TODO: Use custom dataProvider function */ ids: selectedIds,
         data: {},
       }),
     {
@@ -103,7 +103,7 @@ export const RoomDirectoryPublishButton = (props: ButtonProps) => {
   const [create, { isLoading }] = useCreate();
 
   const handleSend = () => {
-    create(
+    void create(
       "room_directory",
       { data: { id: record.id } },
       {
@@ -140,12 +140,7 @@ export const RoomDirectoryList = () => (
       bulkActionButtons={<RoomDirectoryBulkUnpublishButton />}
       omit={["room_id", "canonical_alias", "topic"]}
     >
-      <AvatarField
-        source="avatar_src"
-        sortable={false}
-        sx={{ height: "40px", width: "40px" }}
-        label="resources.rooms.fields.avatar"
-      />
+      <AvatarField source="avatar_src" sx={{ height: "40px", width: "40px" }} />
       <TextField source="name" sortable={false} label="resources.rooms.fields.name" />
       <TextField source="room_id" sortable={false} label="resources.rooms.fields.room_id" />
       <TextField source="canonical_alias" sortable={false} label="resources.rooms.fields.canonical_alias" />
diff --git a/src/resources/rooms.tsx b/src/resources/rooms.tsx
index 6da77dbd..0b277338 100644
--- a/src/resources/rooms.tsx
+++ b/src/resources/rooms.tsx
@@ -36,6 +36,7 @@ import {
   TopToolbar,
   useRecordContext,
   useTranslate,
+  RaRecord,
 } from "react-admin";
 
 import {
@@ -53,7 +54,7 @@ const RoomTitle = () => {
   const translate = useTranslate();
   let name = "";
   if (record) {
-    name = record.name !== "" ? record.name : record.id;
+    name = String(record.name !== "" ? record.name : record.id);
   }
 
   return (
@@ -255,7 +256,10 @@ export const RoomList = (props: ListProps) => {
             [`& [data-testid="false"]`]: { color: theme.palette.error.main },
           }}
         />
-        <FunctionField source="name" render={record => record["name"] || record["canonical_alias"] || record["id"]} />
+        <FunctionField
+          source="name"
+          render={(record: RaRecord) => String(record.name ?? record.canonical_alias ?? record.id)}
+        />
         <TextField source="joined_members" />
         <TextField source="joined_local_members" />
         <TextField source="state_events" />
diff --git a/src/resources/users.tsx b/src/resources/users.tsx
index 7544ee2b..e51e804f 100644
--- a/src/resources/users.tsx
+++ b/src/resources/users.tsx
@@ -113,7 +113,7 @@ export const UserList = (props: ListProps) => (
     pagination={<UserPagination />}
   >
     <Datagrid rowClick="edit" bulkActionButtons={<UserBulkActionButtons />}>
-      <AvatarField source="avatar_src" sx={{ height: "40px", width: "40px" }} sortBy="avatar_url" />
+      <AvatarField source="avatar_src" sx={{ height: "40px", width: "40px" }} />
       <TextField source="id" sortBy="name" />
       <TextField source="displayname" />
       <BooleanField source="is_guest" />
@@ -195,7 +195,7 @@ export const UserEdit = (props: EditProps) => {
     <Edit {...props} title={<UserTitle />} actions={<UserEditActions />}>
       <TabbedForm>
         <FormTab label={translate("resources.users.name", { smart_count: 1 })} icon={<PersonPinIcon />}>
-          <AvatarField source="avatar_src" sortable={false} sx={{ height: "120px", width: "120px", float: "right" }} />
+          <AvatarField source="avatar_src" sx={{ height: "120px", width: "120px", float: "right" }} />
           <TextInput source="id" disabled />
           <TextInput source="displayname" />
           <PasswordInput source="password" autoComplete="new-password" helperText="resources.users.helper.password" />
diff --git a/src/synapse/authProvider.ts b/src/synapse/authProvider.ts
index d84fab1a..827d562d 100644
--- a/src/synapse/authProvider.ts
+++ b/src/synapse/authProvider.ts
@@ -45,11 +45,18 @@ const authProvider: AuthProvider = {
     const decoded_base_url = window.decodeURIComponent(base_url);
     const login_api_url = decoded_base_url + "/_matrix/client/r0/login";
 
-    const { json } = await fetchUtils.fetchJson(login_api_url, options);
-    localStorage.setItem("home_server", json.home_server);
-    localStorage.setItem("user_id", json.user_id);
-    localStorage.setItem("access_token", json.access_token);
-    localStorage.setItem("device_id", json.device_id);
+    interface LoginResponse {
+      home_server: string;
+      user_id: string;
+      access_token: string;
+      device_id: string;
+    }
+    const response = await fetchUtils.fetchJson(login_api_url, options);
+    const data = response.json as LoginResponse;
+    localStorage.setItem("home_server", data.home_server);
+    localStorage.setItem("user_id", data.user_id);
+    localStorage.setItem("access_token", data.access_token);
+    localStorage.setItem("device_id", data.device_id);
   },
   // called when the user clicks on the logout button
   logout: async () => {
diff --git a/src/synapse/synapse.ts b/src/synapse/synapse.ts
index fc8cc0ea..2bad92b9 100644
--- a/src/synapse/synapse.ts
+++ b/src/synapse/synapse.ts
@@ -1,26 +1,56 @@
+import type { paths } from "@matrix-org/spec/client-server";
+import createClient, { Middleware } from "openapi-fetch";
+
 import { fetchUtils } from "react-admin";
 
-export const splitMxid = mxid => {
+const throwOnError: Middleware = {
+  async onResponse(res) {
+    if (res.status >= 400) {
+      const body = await res.clone().text();
+      throw new Error(body);
+    }
+    return undefined;
+  },
+};
+
+export const useSynapse = (baseUrl: string) => {
+  const client = createClient<paths>({ baseUrl: baseUrl });
+  client.use(throwOnError);
+
+  return {
+    getWellKnownUrl: async () => {
+      const { data } = await client.GET("/.well-known/matrix/client");
+      return data ? data["m.homeserver"].base_url : baseUrl;
+    },
+    getSupportedFeatures: async () => (await client.GET("/_matrix/client/versions")).data,
+    getSupportedLoginFlows: async () => (await client.GET("/_matrix/client/v3/login")).data?.flows,
+  };
+};
+
+export const splitMxid = (mxid: string) => {
   const re = /^@(?<name>[a-zA-Z0-9._=\-/]+):(?<domain>[a-zA-Z0-9\-.]+\.[a-zA-Z]+)$/;
   return re.exec(mxid)?.groups;
 };
 
-export const isValidBaseUrl = baseUrl => /^(http|https):\/\/[a-zA-Z0-9\-.]+(:\d{1,5})?$/.test(baseUrl);
+export const isValidBaseUrl = (baseUrl: string | object | null | undefined) =>
+  typeof baseUrl === "string" ? /^(http|https):\/\/[a-zA-Z0-9\-.]+(:\d{1,5})?$/.test(baseUrl) : false;
 
 /**
  * Resolve the homeserver URL using the well-known lookup
  * @param domain  the domain part of an MXID
  * @returns homeserver base URL
  */
-export const getWellKnownUrl = async domain => {
-  const wellKnownUrl = `https://${domain}/.well-known/matrix/client`;
+export const getWellKnownUrl = async (domain: string): Promise<string> => {
+  const client = createClient<paths>({ baseUrl: `https://${domain}` });
   try {
-    const response = await fetchUtils.fetchJson(wellKnownUrl, { method: "GET" });
-    return response.json["m.homeserver"].base_url;
-  } catch {
-    // if there is no .well-known entry, return the domain itself
-    return `https://${domain}`;
+    const { data, error } = await client.GET("/.well-known/matrix/client");
+    if (error) throw new Error(error);
+    else return data["m.homeserver"].base_url;
+  } catch (e) {
+    console.warn(e);
   }
+  // if there is no .well-known entry, return the domain itself
+  return `https://${domain}`;
 };
 
 /**
@@ -28,17 +58,18 @@ export const getWellKnownUrl = async domain => {
  * @param base_url  the base URL of the homeserver
  * @returns server version
  */
-export const getServerVersion = async baseUrl => {
+export const getServerVersion = async (baseUrl: string) => {
   const versionUrl = `${baseUrl}/_synapse/admin/v1/server_version`;
   const response = await fetchUtils.fetchJson(versionUrl, { method: "GET" });
-  return response.json.server_version;
+  const data = response.json as { server_version: string };
+  return data.server_version;
 };
 
 /** Get supported Matrix features */
-export const getSupportedFeatures = async baseUrl => {
-  const versionUrl = `${baseUrl}/_matrix/client/versions`;
-  const response = await fetchUtils.fetchJson(versionUrl, { method: "GET" });
-  return response.json;
+export const getSupportedFeatures = async (baseUrl: string) => {
+  const client = createClient<paths>({ baseUrl: baseUrl });
+  const { data } = await client.GET("/_matrix/client/versions");
+  return data;
 };
 
 /**
@@ -46,13 +77,13 @@ export const getSupportedFeatures = async baseUrl => {
  * @param baseUrl  the base URL of the homeserver
  * @returns array of supported login flows
  */
-export const getSupportedLoginFlows = async baseUrl => {
-  const loginFlowsUrl = `${baseUrl}/_matrix/client/r0/login`;
-  const response = await fetchUtils.fetchJson(loginFlowsUrl, { method: "GET" });
-  return response.json.flows;
+export const getSupportedLoginFlows = async (baseUrl: string) => {
+  const client = createClient<paths>({ baseUrl: baseUrl });
+  const { data } = await client.GET("/_matrix/client/v3/login");
+  return data?.flows;
 };
 
-export const getMediaUrl = media_id => {
+export const getMediaUrl = (media_id: string) => {
   const baseUrl = localStorage.getItem("base_url");
   return `${baseUrl}/_matrix/media/v1/download/${media_id}?allow_redirect=true`;
 };
diff --git a/yarn.lock b/yarn.lock
index b1c579d5..e1e2dbb4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1220,6 +1220,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@matrix-org/spec@npm:^1.10.1":
+  version: 1.10.1
+  resolution: "@matrix-org/spec@npm:1.10.1"
+  checksum: 10c0/2901e745cf379770fb4ec5b89d141ccd3e5331d899f6f41958a3e91f75d64e4caa79ed06d33931d26fbffd23c430f63708e2b4989f3b22c8b12df470a6678711
+  languageName: node
+  linkType: hard
+
 "@mui/base@npm:5.0.0-beta.40":
   version: 5.0.0-beta.40
   resolution: "@mui/base@npm:5.0.0-beta.40"
@@ -6398,6 +6405,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"openapi-fetch@npm:^0.9.5":
+  version: 0.9.5
+  resolution: "openapi-fetch@npm:0.9.5"
+  dependencies:
+    openapi-typescript-helpers: "npm:^0.0.8"
+  checksum: 10c0/57e01b9b9a3d58106d94f294ef17bbf95e166de67212a6cbc158d087591ffd3af2c3347ee563d43a3c9a23401cc6677f53cfa59befc23388b88b1ab650d2723b
+  languageName: node
+  linkType: hard
+
+"openapi-typescript-helpers@npm:^0.0.8":
+  version: 0.0.8
+  resolution: "openapi-typescript-helpers@npm:0.0.8"
+  checksum: 10c0/b31a326c67d65f947732e32126f79976ecc67597f911f7ed43ea9ea23b1e2df7a012026327b6e39df5897a70781f9c57f9fcdd86f8a05c0f67ab2b23ee5d708a
+  languageName: node
+  linkType: hard
+
 "optionator@npm:^0.9.3":
   version: 0.9.3
   resolution: "optionator@npm:0.9.3"
@@ -7726,6 +7749,7 @@ __metadata:
     "@eslint/js": "npm:^9.6.0"
     "@haleos/ra-language-german": "npm:^1.0.0"
     "@haxqer/ra-language-chinese": "npm:^4.16.2"
+    "@matrix-org/spec": "npm:^1.10.1"
     "@mui/icons-material": "npm:^5.15.16"
     "@mui/material": "npm:^5.16.0"
     "@testing-library/dom": "npm:^10.0.0"
@@ -7752,6 +7776,7 @@ __metadata:
     jest-environment-jsdom: "npm:^29.7.0"
     jest-fetch-mock: "npm:^3.0.3"
     lodash: "npm:^4.17.21"
+    openapi-fetch: "npm:^0.9.5"
     papaparse: "npm:^5.4.1"
     prettier: "npm:^3.2.5"
     query-string: "npm:^7.1.1"