diff --git a/components/declarations.d.ts b/components/declarations.d.ts
new file mode 100644
index 00000000..31e44ff3
--- /dev/null
+++ b/components/declarations.d.ts
@@ -0,0 +1,2 @@
+declare module '*.css';
+declare module '*.svg';
diff --git a/components/forms/LoginForm.js b/components/forms/LoginForm.js
index 894bc9b9..aad3f97d 100644
--- a/components/forms/LoginForm.js
+++ b/components/forms/LoginForm.js
@@ -1,4 +1,3 @@
-import { useRef } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import {
   Form,
@@ -20,19 +19,15 @@ export default function LoginForm() {
   const router = useRouter();
   const { post } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post('/auth/login', data));
-  const ref = useRef();
 
   const handleSubmit = async data => {
     mutate(data, {
-      onSuccess: async ({ token, account }) => {
+      onSuccess: async ({ token, user }) => {
         setAuthToken(token);
-        setUser(account);
+        setUser(user);
 
         await router.push('/websites');
       },
-      onError: async () => {
-        ref.current.reset(undefined, { keepDirty: true, keepValues: true });
-      },
     });
   };
 
@@ -44,7 +39,7 @@ export default function LoginForm() {
         </Icon>
         <p>umami</p>
       </div>
-      <Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
+      <Form className={styles.form} onSubmit={handleSubmit} error={error}>
         <FormInput name="username" label="Username" rules={{ required: 'Required' }}>
           <TextField autoComplete="off" />
         </FormInput>
diff --git a/next-env.d.ts b/next-env.d.ts
index 62b8a52d..4f11a03d 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,5 +1,5 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/next.config.js b/next.config.js
index a1dbb4e8..eac47415 100644
--- a/next.config.js
+++ b/next.config.js
@@ -49,7 +49,7 @@ module.exports = {
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/,
-      issuer: /\.js$/,
+      issuer: /\.{js|jsx|ts|tsx}$/,
       use: ['@svgr/webpack'],
     });
 
diff --git a/pages/_app.js b/pages/_app.js
index fb4e8e44..15ab7245 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -2,6 +2,7 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Container } from 'react-basics';
 import useLocale from 'hooks/useLocale';
 import useConfig from 'hooks/useConfig';
 import 'react-basics/dist/styles.css';
@@ -12,9 +13,8 @@ import '@fontsource/inter/600.css';
 const client = new QueryClient();
 
 export default function App({ Component, pageProps }) {
-  const { locale, messages } = useLocale();
+  const { locale, messages, dir } = useLocale();
   const { basePath } = useRouter();
-  const { dir } = useLocale();
   useConfig();
 
   const Wrapper = ({ children }) => <span className={locale}>{children}</span>;
@@ -38,9 +38,9 @@ export default function App({ Component, pageProps }) {
           <meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
         </Head>
-        <div className="container" dir={dir}>
+        <Container dir={dir}>
           <Component {...pageProps} />
-        </div>
+        </Container>
       </IntlProvider>
     </QueryClientProvider>
   );