diff --git a/app/chat/page.tsx b/app/chat/page.tsx
deleted file mode 100644
index 502e4b3..0000000
--- a/app/chat/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-import Typography from "@mui/material/Typography";
-import Rhf from "@/components/Rhf";
-
-export default function Home() {
-  return (
-    <main className="">
-      <div className="container m-auto">
-        <Typography variant="h1">Chat</Typography>
-        <Rhf />
-      </div>
-    </main>
-  );
-}
diff --git a/components/InputMessage.tsx b/components/InputMessage.tsx
deleted file mode 100644
index d9a0c39..0000000
--- a/components/InputMessage.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import TextField from "@mui/material/TextField";
-import { Controller } from "react-hook-form";
-
-type InputMessageProps = {
-  id: string;
-  label: string;
-  control: any;
-};
-
-export default function InputMessage(props: InputMessageProps) {
-  return (
-    <Controller
-      name={props.id}
-      control={props.control}
-      render={({ field }) => (
-        <TextField
-          {...field}
-          id={props.id}
-          label={props.label}
-          fullWidth
-          multiline
-          maxRows={6}
-        />
-      )}
-    />
-  );
-}
diff --git a/components/InputSlider.tsx b/components/InputSlider.tsx
deleted file mode 100644
index 22998d1..0000000
--- a/components/InputSlider.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "react";
-import { Controller } from "react-hook-form";
-import { InputLabel } from "@mui/material";
-import Slider from "@mui/material/Slider";
-
-type SliderProps = {
-  control: any;
-  id: string;
-  label: string;
-  min: number;
-  max: number;
-  step: number;
-  defaultValue: number;
-};
-
-export default function InputSlider(props: SliderProps) {
-  return (
-    <Controller
-      name={props.id}
-      control={props.control}
-      render={({ field }) => (
-        <div id={props.id}>
-          <InputLabel id="">{props.label}</InputLabel>
-          <Slider
-            {...field}
-            id={props.id}
-            aria-label={props.label}
-            min={props.min}
-            max={props.max}
-            step={props.step}
-            defaultValue={props.defaultValue}
-            valueLabelDisplay="auto"
-          />
-        </div>
-      )}
-    />
-  );
-}
diff --git a/components/ModelSelect.tsx b/components/ModelSelect.tsx
deleted file mode 100644
index 49990e1..0000000
--- a/components/ModelSelect.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import MenuItem from "@mui/material/MenuItem";
-import ListSubheader from "@mui/material/ListSubheader";
-import Select from "@mui/material/Select";
-import { Controller } from "react-hook-form";
-import { InputLabel } from "@mui/material";
-
-interface ModelSelectProps {
-  id: string;
-  label: string;
-  control: any;
-}
-
-export default function ModelSelect(props: ModelSelectProps) {
-  return (
-    <Controller
-      name={props.id}
-      control={props.control}
-      render={({ field }) => (
-        <div id={props.id}>
-          <InputLabel>Model</InputLabel>
-          <Select {...field} fullWidth>
-            <ListSubheader>OpenAI</ListSubheader>
-            <MenuItem value={"gpt-3.5-turbo"}>&nbsp;&nbsp;&nbsp;GPT 3.5</MenuItem>
-            <MenuItem value={"gpt-4"}>&nbsp;&nbsp;&nbsp;GPT 4</MenuItem>
-            <ListSubheader>Anthropic</ListSubheader>
-            <MenuItem value={"claude-2"}>&nbsp;&nbsp;&nbsp;Claude 2</MenuItem>
-          </Select>
-        </div>
-      )}
-    />
-  );
-}
diff --git a/components/Rhf.tsx b/components/Rhf.tsx
deleted file mode 100644
index e078caa..0000000
--- a/components/Rhf.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-"use client";
-
-import React from "react";
-import { useState } from "react";
-import { useForm, SubmitHandler } from "react-hook-form";
-import InputMessage from "./InputMessage";
-import Slider from "./InputSlider";
-import ModelSelect from "./ModelSelect";
-import SendButton from "./SendButton";
-
-type Inputs = {
-  model: string;
-  temperature: number;
-  maxTokens: number;
-  topK: number;
-  message: string;
-};
-
-export default function Rhf() {
-  const [data, setData] = useState<Inputs>();
-
-  // Initialize the useForm hook from react-hook-form
-  const {
-    control,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<Inputs>({
-    defaultValues: {
-      model: "gpt-3.5-turbo",
-      temperature: 1,
-      maxTokens: 256,
-      topK: 2,
-      message: "",
-    },
-  });
-
-  // This is where you'd send the data to your API
-  const processForm: SubmitHandler<Inputs> = (data) => {
-    setData(data);
-    console.log(data);
-    // Process the form data here (e.g., send it to an API)
-  };
-
-  return (
-    <section className="max-w-screen-xl mx-auto p-4">
-      <form
-        onSubmit={handleSubmit(processForm)}
-        className="grid grid-cols-1 sm:grid-cols-2 gap-4"
-      >
-        <ModelSelect id="model" label="Select Model" control={control} />
-
-        <Slider
-          control={control}
-          id="temperature"
-          label="Temperature"
-          min={0}
-          max={2}
-          step={0.1}
-          defaultValue={1}
-        />
-
-        <Slider
-          control={control}
-          id="maxTokens"
-          label="Max. Tokens"
-          min={128}
-          max={2048}
-          step={128}
-          defaultValue={256}
-        />
-
-        <Slider
-          control={control}
-          id="topK"
-          label="Similarity Top K"
-          min={1}
-          max={20}
-          step={1}
-          defaultValue={2}
-        />
-
-        <div className="sm:col-span-2">
-          <InputMessage id="message" label="Message" control={control} />
-        </div>
-
-        <SendButton
-          id="submit"
-          onClick={handleSubmit(processForm)}
-          control={control}
-        />
-      </form>
-      <div>
-        <pre>{JSON.stringify(data, null, 2)}</pre>
-      </div>
-    </section>
-  );
-}
diff --git a/components/SecretInput.tsx b/components/SecretInput.tsx
deleted file mode 100644
index 8b4bc8f..0000000
--- a/components/SecretInput.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from "react";
-import IconButton from "@mui/material/IconButton";
-import OutlinedInput from "@mui/material/OutlinedInput";
-import InputLabel from "@mui/material/InputLabel";
-import InputAdornment from "@mui/material/InputAdornment";
-import FormHelperText from "@mui/material/FormHelperText";
-import TextField from "@mui/material/TextField";
-import Visibility from "@mui/icons-material/Visibility";
-import VisibilityOff from "@mui/icons-material/VisibilityOff";
-
-interface SecretInputProps {
-  label: string;
-  id: string;
-}
-
-export default function SecretInput(props: SecretInputProps) {
-  const [showPassword, setShowPassword] = React.useState(false);
-
-  const handleClickShowPassword = () => setShowPassword((show) => !show);
-
-  const handleMouseDownPassword = (
-    event: React.MouseEvent<HTMLButtonElement>
-  ) => {
-    event.preventDefault();
-  };
-
-  return (
-    <div>
-      <InputLabel htmlFor="outlined-adornment-password">
-        {props.label}
-      </InputLabel>
-      <OutlinedInput
-        id="outlined-adornment-password"
-        type={showPassword ? "text" : "password"}
-        endAdornment={
-          <InputAdornment position="end">
-            <IconButton
-              aria-label="toggle password visibility"
-              onClick={handleClickShowPassword}
-              onMouseDown={handleMouseDownPassword}
-              edge="end"
-            >
-              {showPassword ? <VisibilityOff /> : <Visibility />}
-            </IconButton>
-          </InputAdornment>
-        }
-        label={props.label}
-      />
-    </div>
-  );
-}
diff --git a/components/SendButton.tsx b/components/SendButton.tsx
deleted file mode 100644
index 3965fa9..0000000
--- a/components/SendButton.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import { Controller } from "react-hook-form";
-import { Button } from "@mui/material";
-import SendIcon from "@mui/icons-material/Send";
-
-interface SendButtonProps {
-  id: string;
-  control: any;
-  onClick: any;
-}
-
-export default function SendButton(props: SendButtonProps) {
-  return (
-    <Controller
-      name={props.id}
-      control={props.control}
-      render={({ field }) => (
-        <Button {...field} endIcon={<SendIcon />} onClick={props.onClick}>
-          Submit
-        </Button>
-      )}
-    />
-  );
-}
diff --git a/package.json b/package.json
index ea89f32..10a358b 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.47.0",
+    "react-icons": "^4.11.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fb75547..e122062 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ dependencies:
   react-hook-form:
     specifier: ^7.47.0
     version: 7.47.0(react@18.2.0)
+  react-icons:
+    specifier: ^4.11.0
+    version: 4.11.0(react@18.2.0)
   zod:
     specifier: ^3.22.4
     version: 3.22.4
@@ -2610,6 +2613,14 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-icons@4.11.0(react@18.2.0):
+    resolution: {integrity: sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==}
+    peerDependencies:
+      react: '*'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}