diff --git a/app/components/OrganizationForm.tsx b/app/components/OrganizationForm.tsx
index a38df1b..937f780 100644
--- a/app/components/OrganizationForm.tsx
+++ b/app/components/OrganizationForm.tsx
@@ -1,18 +1,20 @@
 import { Form } from "@remix-run/react";
+import { Radio } from "@material-tailwind/react";
+
+import { OrganizationUpdate } from "@app-types/graphql";
+import { ChangeEventHandler } from "react";
+
 import {
-  Input,
-  Typography,
-  Radio,
+  Button,
+  TextField as Input,
+  TextareaAutosize,
   Card,
+  CardContent,
   List,
   ListItem,
-  CardBody,
-  Textarea,
-} from "@material-tailwind/react";
-
-import { OrganizationUpdate } from "@app-types/graphql";
-import { ChangeEventHandler } from "react";
-import { Button } from "@mui/material";
+  Typography,
+  CardHeader,
+} from "@mui/material";
 
 export type OrganizationFormData = Omit<OrganizationUpdate, "aiEngines"> & {
   isPersonal: boolean;
@@ -64,35 +66,23 @@ export function OrganizationForm<T extends OrganizationFormData>({
           <div className="mb-1 flex flex-col gap-6">
             {!organization.isPersonal && !organization.isSystem && (
               <>
-                <Typography variant="h6" color="blue-gray" className="-mb-3">
-                  Name
-                </Typography>
                 <Input
-                  size="lg"
-                  className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
-                  labelProps={{
-                    className: "before:content-none after:content-none",
-                  }}
-                  crossOrigin={undefined}
+                  label="Name"
                   value={organization.name ?? ""}
-                  readOnly={organization.isSystem}
+                  InputProps={{
+                    readOnly: organization.isSystem,
+                  }}
                   onChange={({ target }) => {
                     updateData({ ...organization, name: target.value });
                   }}
                 />
 
-                <Typography variant="h6" color="blue-gray" className="-mb-3">
-                  Owner
-                </Typography>
                 <Input
-                  size="lg"
-                  className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
-                  labelProps={{
-                    className: "before:content-none after:content-none",
-                  }}
-                  crossOrigin={undefined}
+                  label="Owner Email"
                   value={organization.ownerEmail ?? ""}
-                  readOnly={organization.isSystem}
+                  InputProps={{
+                    readOnly: organization.isSystem,
+                  }}
                   onChange={({ target }) => {
                     updateData({ ...organization, ownerEmail: target.value });
                   }}
@@ -101,16 +91,8 @@ export function OrganizationForm<T extends OrganizationFormData>({
             )}
             {!organization.isSystem && (
               <>
-                <Typography variant="h6" color="blue-gray" className="-mb-3">
-                  Github Organizations (comma separated)
-                </Typography>
                 <Input
-                  size="lg"
-                  className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
-                  labelProps={{
-                    className: "before:content-none after:content-none",
-                  }}
-                  crossOrigin={undefined}
+                  label="Github Organizations (comma separated)"
                   value={organization.githubOrgs ?? ""}
                   onChange={({ target }) => {
                     updateData({ ...organization, githubOrgs: target.value });
@@ -118,128 +100,118 @@ export function OrganizationForm<T extends OrganizationFormData>({
                 />
               </>
             )}
-            <Typography variant="h6" color="blue-gray" className="-mb-3">
-              Github API Key
-            </Typography>
 
-            <Card>
-              <List>
-                {!organization.isSystem && (
-                  <ListItem className="p-0">
+            <Card variant="outlined">
+              <CardHeader subheader="Github API Key" />
+              <CardContent>
+                <List>
+                  {!organization.isSystem && (
+                    <ListItem>
+                      <Radio
+                        name="github_token"
+                        label="system default"
+                        crossOrigin={undefined}
+                        value={true.toString()}
+                        checked={organization.useSystemGithubToken}
+                        onChange={onUseSystemDefaultGithubToken}
+                      />
+                    </ListItem>
+                  )}
+                  <ListItem>
                     <Radio
                       name="github_token"
-                      label="system default"
+                      label="custom: "
+                      labelProps={{
+                        className: "text-nowrap",
+                      }}
                       crossOrigin={undefined}
-                      value={true.toString()}
-                      checked={organization.useSystemGithubToken}
+                      value={false.toString()}
+                      checked={!organization.useSystemGithubToken}
                       onChange={onUseSystemDefaultGithubToken}
                     />
+                    <Input
+                      value={
+                        organization.useSystemGithubToken
+                          ? ""
+                          : organization.githubToken ?? ""
+                      }
+                      disabled={organization.useSystemGithubToken}
+                      onChange={({ target }) => {
+                        updateData({
+                          ...organization,
+                          githubToken: target.value,
+                        });
+                      }}
+                    />
                   </ListItem>
-                )}
-                <ListItem className="p-0">
-                  <Radio
-                    name="github_token"
-                    label="custom: "
-                    labelProps={{
-                      className: "text-nowrap",
-                    }}
-                    crossOrigin={undefined}
-                    value={false.toString()}
-                    checked={!organization.useSystemGithubToken}
-                    onChange={onUseSystemDefaultGithubToken}
-                  />
-                  <Input
-                    size="lg"
-                    className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
-                    labelProps={{
-                      className: "before:content-none after:content-none",
-                    }}
-                    crossOrigin={undefined}
-                    value={
-                      organization.useSystemGithubToken
-                        ? ""
-                        : organization.githubToken ?? ""
-                    }
-                    disabled={organization.useSystemGithubToken}
-                    onChange={({ target }) => {
-                      updateData({
-                        ...organization,
-                        githubToken: target.value,
-                      });
-                    }}
-                  />
-                </ListItem>
-              </List>
+                </List>
+              </CardContent>
             </Card>
 
-            <Typography variant="h6" color="blue-gray" className="-mb-3">
-              AI Engines Settings
-            </Typography>
             {!organization.isSystem && (
-              <Card>
-                <List>
-                  <ListItem className="p-0">
-                    <Radio
-                      name="ai_engine"
-                      label={
-                        <div>
-                          <Typography color="blue-gray" className="font-medium">
-                            system default
-                          </Typography>
-                          {!organization.isSystem && (
+              <Card variant="outlined">
+                <CardHeader subheader="AI Engines Settings" />
+                <CardContent>
+                  <List>
+                    <ListItem>
+                      <Radio
+                        name="ai_engine"
+                        label={
+                          <div>
                             <Typography
-                              variant="small"
-                              color="gray"
-                              className="font-normal italic"
+                              color="blue-gray"
+                              className="font-medium"
                             >
-                              consumed{" "}
-                              {(
-                                organization.systemAiEngineUsedCompletionTokens +
-                                organization.systemAiEngineUsedPromptTokens
-                              ).toLocaleString()}{" "}
-                              of{" "}
-                              {organization.systemAiEngineMaxTokens.toLocaleString()}{" "}
-                              allowed tokens.
+                              system default
                             </Typography>
-                          )}
-                        </div>
-                      }
-                      crossOrigin={undefined}
-                      value={true.toString()}
-                      checked={organization.useSystemAiEngine}
-                      onChange={onUseSystemAiEngine}
-                    />
-                  </ListItem>
-                  <ListItem className="p-0">
-                    <Radio
-                      name="ai_engine"
-                      label="custom"
-                      crossOrigin={undefined}
-                      value={false.toString()}
-                      checked={!organization.useSystemAiEngine}
-                      onChange={onUseSystemAiEngine}
-                    />
-                  </ListItem>
-                </List>
+                            {!organization.isSystem && (
+                              <Typography
+                                variant="body2"
+                                color="gray"
+                                className="font-normal italic"
+                              >
+                                consumed{" "}
+                                {(
+                                  organization.systemAiEngineUsedCompletionTokens +
+                                  organization.systemAiEngineUsedPromptTokens
+                                ).toLocaleString()}{" "}
+                                of{" "}
+                                {organization.systemAiEngineMaxTokens.toLocaleString()}{" "}
+                                allowed tokens.
+                              </Typography>
+                            )}
+                          </div>
+                        }
+                        crossOrigin={undefined}
+                        value={true.toString()}
+                        checked={organization.useSystemAiEngine}
+                        onChange={onUseSystemAiEngine}
+                      />
+                    </ListItem>
+                    <ListItem>
+                      <Radio
+                        name="ai_engine"
+                        label="custom"
+                        crossOrigin={undefined}
+                        value={false.toString()}
+                        checked={!organization.useSystemAiEngine}
+                        onChange={onUseSystemAiEngine}
+                      />
+                    </ListItem>
+                  </List>
+                </CardContent>
               </Card>
             )}
             {!organization.useSystemAiEngine && (
               <>
                 {organization?.aiEngines?.map(({ id, title, settings }) => (
                   <div key={id}>
-                    <Card>
-                      <CardBody>
-                        <Typography color="blue-gray" variant="h6">
-                          {title}
-                        </Typography>
-                        <Textarea
-                          size="lg"
-                          className=" h-48 !border-t-blue-gray-200 focus:!border-t-gray-900"
-                          resize={true}
-                          rows={15}
-                          labelProps={{
-                            className: "before:content-none after:content-none",
-                          }}
+                    <Card variant="outlined">
+                      <CardHeader subheader={title} />
+                      <CardContent>
+                        <TextareaAutosize
+                          className=" w-full"
+                          maxRows={15}
                           value={formatJson(settings)}
                           onChange={({ target }) => {
                             const aiEngines = [
@@ -257,7 +229,7 @@ export function OrganizationForm<T extends OrganizationFormData>({
                             });
                           }}
                         />
-                      </CardBody>
+                      </CardContent>
                     </Card>
                   </div>
                 ))}
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
index 8d63423..4ff620d 100644
--- a/app/entry.client.tsx
+++ b/app/entry.client.tsx
@@ -13,7 +13,7 @@ import {
   AuthenticationClientProvider,
   SettingsClientProvider,
 } from "./contexts";
-import { MuiClientProvider } from "./mui/MuiClientProvider";
+import { MuiProvider } from "./mui/MuiProvider";
 
 startTransition(() => {
   hydrateRoot(
@@ -23,9 +23,9 @@ startTransition(() => {
         <AuthenticationClientProvider>
           <ApolloClientProvider>
             <ThemeProvider>
-              <MuiClientProvider>
+              <MuiProvider>
                 <RemixBrowser />
-              </MuiClientProvider>
+              </MuiProvider>
             </ThemeProvider>
           </ApolloClientProvider>
         </AuthenticationClientProvider>
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
index beead41..88a3fb6 100644
--- a/app/entry.server.tsx
+++ b/app/entry.server.tsx
@@ -23,7 +23,7 @@ import {
   SettingsServerProvider,
 } from "./contexts";
 import { User } from "./models/user";
-import { MuiServerProvider } from "./mui/MuiServerProvider";
+import { MuiProvider } from "./mui/MuiProvider";
 
 const ABORT_DELAY = 5_000;
 // process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0"; //TODO: remove this line. It is dangerous. We have it because there is an issue with the SSL certificate chain of render.com in production
@@ -208,11 +208,11 @@ function getServerApp(
       }
     >
       <AuthenticationServerProvider user={user}>
-        <MuiServerProvider>
+        <MuiProvider>
           <ApolloServerProvider client={client}>
             {remixServer}
           </ApolloServerProvider>
-        </MuiServerProvider>
+        </MuiProvider>
       </AuthenticationServerProvider>
     </SettingsServerProvider>
   );
diff --git a/app/mui/MuiClientProvider.tsx b/app/mui/MuiClientProvider.tsx
deleted file mode 100644
index 91ca424..0000000
--- a/app/mui/MuiClientProvider.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { CacheProvider } from "@emotion/react";
-import { ThemeProvider } from "@mui/material/styles";
-import CssBaseline from "@mui/material/CssBaseline";
-
-import ClientStyleContext from "./ClientStyleContext";
-import createEmotionCache from "./createEmotionCache";
-import { useMemo, useState } from "react";
-import theme from "./theme";
-
-interface ClientCacheProviderProps {
-  children: React.ReactNode;
-}
-
-function ClientCacheProvider({ children }: ClientCacheProviderProps) {
-  const [cache, setCache] = useState(createEmotionCache());
-
-  const clientStyleContextValue = useMemo(
-    () => ({
-      reset() {
-        setCache(createEmotionCache());
-      },
-    }),
-    [],
-  );
-
-  return (
-    <ClientStyleContext.Provider value={clientStyleContextValue}>
-      <CacheProvider value={cache}>{children}</CacheProvider>
-    </ClientStyleContext.Provider>
-  );
-}
-
-export function MuiClientProvider({ children }: { children: React.ReactNode }) {
-  return (
-    <ClientCacheProvider>
-      <ThemeProvider theme={theme}>
-        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-        <CssBaseline />
-        {children}
-      </ThemeProvider>
-    </ClientCacheProvider>
-  );
-}
diff --git a/app/mui/MuiDocument.tsx b/app/mui/MuiDocument.tsx
index 27f918f..6315dbb 100644
--- a/app/mui/MuiDocument.tsx
+++ b/app/mui/MuiDocument.tsx
@@ -1,35 +1,10 @@
-import { EmotionCache, withEmotionCache } from "@emotion/react";
-import { unstable_useEnhancedEffect as useEnhancedEffect } from "@mui/material";
-import { useContext } from "react";
-import ClientStyleContext from "./ClientStyleContext";
-
-interface DocumentProps {
-  children: React.ReactNode;
-  title?: string;
+import { CssBaseline } from "@mui/material";
+
+export function MuiDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <CssBaseline />
+      {children}
+    </>
+  );
 }
-
-//TODO: Do we really need this one???
-export const MuiDocument = withEmotionCache(
-  ({ children }: DocumentProps, emotionCache: EmotionCache) => {
-    const clientStyleData = useContext(ClientStyleContext);
-
-    // Only executed on client
-    useEnhancedEffect(() => {
-      debugger;
-      // re-link sheet container
-      emotionCache.sheet.container = document.head;
-      // re-inject tags
-      const tags = emotionCache.sheet.tags;
-      emotionCache.sheet.flush();
-      tags.forEach((tag) => {
-        // eslint-disable-next-line no-underscore-dangle
-        (emotionCache.sheet as any)._insertTag(tag);
-      });
-      // reset cache to reapply global styles
-      clientStyleData.reset();
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    return children;
-  },
-);
diff --git a/app/mui/MuiMeta.tsx b/app/mui/MuiMeta.tsx
new file mode 100644
index 0000000..40767c4
--- /dev/null
+++ b/app/mui/MuiMeta.tsx
@@ -0,0 +1,5 @@
+import theme from "./theme";
+
+export function MuiMeta() {
+  return <meta name="theme-color" content={theme.palette.primary.main} />;
+}
diff --git a/app/mui/MuiProvider.tsx b/app/mui/MuiProvider.tsx
new file mode 100644
index 0000000..920e8e5
--- /dev/null
+++ b/app/mui/MuiProvider.tsx
@@ -0,0 +1,19 @@
+import { CacheProvider } from "@emotion/react";
+
+import { ThemeProvider } from "@mui/material";
+import theme from "./theme";
+import createCache from "@emotion/cache";
+
+function createEmotionCache() {
+  return createCache({ key: "css" });
+}
+
+export function MuiProvider({ children }: { children: React.ReactNode }) {
+  const cache = createEmotionCache();
+
+  return (
+    <CacheProvider value={cache}>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </CacheProvider>
+  );
+}
diff --git a/app/mui/MuiServerProvider.tsx b/app/mui/MuiServerProvider.tsx
deleted file mode 100644
index 8f24d08..0000000
--- a/app/mui/MuiServerProvider.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { CacheProvider } from "@emotion/react";
-import { ThemeProvider } from "@mui/material/styles";
-import CssBaseline from "@mui/material/CssBaseline";
-
-import createEmotionCache from "./createEmotionCache";
-
-import theme from "./theme";
-
-export function MuiServerProvider({ children }: { children: React.ReactNode }) {
-  const cache = createEmotionCache();
-
-  return (
-    <CacheProvider value={cache}>
-      <ThemeProvider theme={theme}>
-        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-        <CssBaseline />
-        {children}
-      </ThemeProvider>
-    </CacheProvider>
-  );
-}
diff --git a/app/mui/getMuiMeta.ts b/app/mui/getMuiMeta.ts
deleted file mode 100644
index dbc6006..0000000
--- a/app/mui/getMuiMeta.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import theme from "./theme";
-import { MetaDescriptor } from "@remix-run/react";
-
-export const getMuiMeta = (): MetaDescriptor[] => [
-  { name: "theme-color", content: theme.palette.primary.main },
-];
diff --git a/app/mui/theme.ts b/app/mui/theme.ts
index e308a97..3f44a8f 100644
--- a/app/mui/theme.ts
+++ b/app/mui/theme.ts
@@ -1,9 +1,9 @@
-import { createTheme } from "@mui/material/styles";
-import { red } from "@mui/material/colors";
+import { createTheme, colors } from "@mui/material";
 
 // Create a theme instance.
 const theme = createTheme({
   palette: {
+    // mode: "dark",
     primary: {
       main: "#556cd6",
     },
@@ -11,7 +11,7 @@ const theme = createTheme({
       main: "#19857b",
     },
     error: {
-      main: red.A400,
+      main: colors.red.A400,
     },
   },
 });
diff --git a/app/root.tsx b/app/root.tsx
index 2395fe7..69bdc16 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,19 +1,16 @@
 import { cssBundleHref } from "@remix-run/css-bundle";
-import type { LinksFunction } from "@remix-run/node";
+import stylesheet from "~/tailwind.css";
 import {
   Links,
-  LiveReload,
   Meta,
-  MetaFunction,
   Outlet,
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
 
-import stylesheet from "~/tailwind.css";
-
 import { getMuiLinks } from "./mui/getMuiLinks";
-import { getMuiMeta } from "./mui/getMuiMeta";
+import { MuiMeta } from "./mui/MuiMeta";
+import { LinksFunction } from "@remix-run/node";
 import { MuiDocument } from "./mui/MuiDocument";
 
 export const links: LinksFunction = () => [
@@ -22,26 +19,33 @@ export const links: LinksFunction = () => [
 
   ...getMuiLinks(),
 ];
-
-export const meta: MetaFunction = () => [...getMuiMeta()];
-
 export default function App() {
   return (
-    <MuiDocument>
-      <html lang="en">
-        <head>
-          <meta charSet="utf-8" />
-          <meta name="viewport" content="width=device-width,initial-scale=1" />
-          <Meta />
-          <Links />
-        </head>
-        <body>
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <MuiMeta />
+        <Links />
+      </head>
+      <body>
+        <MuiDocument>
           <Outlet />
-          <ScrollRestoration />
-          <Scripts />
-          <LiveReload />
-        </body>
-      </html>
-    </MuiDocument>
+        </MuiDocument>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
   );
 }
+
+// export default function Apps() {
+//   return (
+//     <>
+//       <MuiDocument>
+//         <Outlet />
+//       </MuiDocument>
+//     </>
+//   );
+// }
diff --git a/package.json b/package.json
index 30bdb33..bec52de 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "build": "remix build",
     "dev": "PORT=4000 remix dev",
-    "start": "remix-serve build",
+    "start": "PORT=4000 remix-serve ./build/index.js",
     "typecheck": "tsc",
     "graphql": "graphql-codegen --config graphql.codegen.ts",
     "lint": "eslint .",