diff --git a/src/frontend/src/components/gradientChooserComponent/index.tsx b/src/frontend/src/components/gradientChooserComponent/index.tsx
index bff1fbd51..3467aedb8 100644
--- a/src/frontend/src/components/gradientChooserComponent/index.tsx
+++ b/src/frontend/src/components/gradientChooserComponent/index.tsx
@@ -2,7 +2,7 @@ import { gradients } from "../../utils/styleUtils";
 
 export default function GradientChooserComponent({ value, onChange }) {
   return (
-    <div className="flex flex-wrap items-center justify-center gap-4">
+    <div className="flex flex-wrap items-center justify-start gap-2">
       {gradients.map((gradient, idx) => (
         <div
           onClick={() => {
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
index ceeb99697..ac2af4f75 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
@@ -1,8 +1,10 @@
-import { Button } from "../../../../components/ui/button";
-
-import { ColDef, ColGroupDef } from "ag-grid-community";
-import { useState } from "react";
+import * as Form from "@radix-ui/react-form";
+import { cloneDeep } from "lodash";
+import { useContext, useEffect, useState } from "react";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
+import GradientChooserComponent from "../../../../components/gradientChooserComponent";
+import InputComponent from "../../../../components/inputComponent";
+import { Button } from "../../../../components/ui/button";
 import {
   Card,
   CardContent,
@@ -11,71 +13,88 @@ import {
   CardHeader,
   CardTitle,
 } from "../../../../components/ui/card";
-import { Checkbox } from "../../../../components/ui/checkbox";
-import { Input } from "../../../../components/ui/input";
+import {
+  EDIT_PASSWORD_ALERT_LIST,
+  EDIT_PASSWORD_ERROR_ALERT,
+  SAVE_ERROR_ALERT,
+  SAVE_SUCCESS_ALERT,
+} from "../../../../constants/alerts_constants";
+import { CONTROL_PATCH_USER_STATE } from "../../../../constants/constants";
+import { AuthContext } from "../../../../contexts/authContext";
+import { resetPassword, updateUser } from "../../../../controllers/API";
+import useAlertStore from "../../../../stores/alertStore";
+import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import {
+  inputHandlerEventType,
+  patchUserInputStateType,
+} from "../../../../types/components";
+import { gradients } from "../../../../utils/styleUtils";
 
 export default function GeneralPage() {
-  // Column Definitions: Defines the columns to be displayed.
-  const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
-    { headerName: "Variable Name", field: "name", flex: 1 }, //This column will be twice as wide as the others
-    {
-      field: "type",
-      cellEditor: "agSelectCellEditor",
-      cellEditorParams: {
-        values: ["Prompt", "Credential"],
-        valueListGap: 10,
-      },
-      flex: 1,
-      editable: true,
-    },
-    {
-      field: "value",
-      cellEditor: "agLargeTextCellEditor",
-      cellEditorPopup: true,
-      flex: 2,
-      editable: true,
-    },
-    {
-      headerName: "Apply To Fields",
-      field: "defaultFields",
-      flex: 1,
-      editable: true,
-    },
-  ]);
+  const setCurrentFlowId = useFlowsManagerStore(
+    (state) => state.setCurrentFlowId
+  );
 
-  const [rowData, setRowData] = useState([
-    {
-      name: "OpenAI Key",
-      type: "Credential",
-      value: "apijpioj09u302j0982ejf",
-      defaultFields: "Open AI API Key",
-    },
-    {
-      name: "Prompt",
-      type: "Prompt",
-      value: `Answer user's questions based on the document below:
+  const [inputState, setInputState] = useState<patchUserInputStateType>(
+    CONTROL_PATCH_USER_STATE
+  );
 
-    ---
-    
-    {Document}
-    
-    ---
-    
-    Question:
-    {Question}
-    
-    Answer:
-    `,
-      defaultFields: ["Prompt"],
-    },
-    {
-      name: "Azure Key",
-      type: "Credential",
-      value: "awowkdenvoaimojndofunoweoij0293u0n2e08n23",
-      defaultFields: ["Azure API Key"],
-    },
-  ]);
+  const { autoLogin } = useContext(AuthContext);
 
+  // set null id
+  useEffect(() => {
+    setCurrentFlowId("");
+  }, []);
+  const setSuccessData = useAlertStore((state) => state.setSuccessData);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const { userData, setUserData } = useContext(AuthContext);
+  const { password, cnfPassword, gradient } = inputState;
+
+  async function handlePatchPassword() {
+    if (password !== cnfPassword) {
+      setErrorData({
+        title: EDIT_PASSWORD_ERROR_ALERT,
+        list: [EDIT_PASSWORD_ALERT_LIST],
+      });
+      return;
+    }
+    try {
+      if (password !== "") await resetPassword(userData!.id, { password });
+      handleInput({ target: { name: "password", value: "" } });
+      handleInput({ target: { name: "cnfPassword", value: "" } });
+      setSuccessData({ title: SAVE_SUCCESS_ALERT });
+    } catch (error) {
+      setErrorData({
+        title: SAVE_ERROR_ALERT,
+        list: [(error as any).response.data.detail],
+      });
+    }
+  }
+
+  async function handlePatchGradient() {
+    try {
+      if (gradient !== "")
+        await updateUser(userData!.id, { profile_image: gradient });
+      if (gradient !== "") {
+        let newUserData = cloneDeep(userData);
+        newUserData!.profile_image = gradient;
+
+        setUserData(newUserData);
+      }
+      setSuccessData({ title: SAVE_SUCCESS_ALERT });
+    } catch (error) {
+      setErrorData({
+        title: SAVE_ERROR_ALERT,
+        list: [(error as any).response.data.detail],
+      });
+    }
+  }
+
+  function handleInput({
+    target: { name, value },
+  }: inputHandlerEventType): void {
+    setInputState((prev) => ({ ...prev, [name]: value }));
+  }
   return (
     <div className="flex h-full w-full flex-col gap-6">
       <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
@@ -94,51 +113,113 @@ export default function GeneralPage() {
       </div>
 
       <div className="grid gap-6">
-        <Card x-chunk="dashboard-04-chunk-1">
-          <CardHeader>
-            <CardTitle>Store Name</CardTitle>
-            <CardDescription>
-              Used to identify your store in the marketplace.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <form>
-              <Input placeholder="Store Name" />
-            </form>
-          </CardContent>
-          <CardFooter className="border-t px-6 py-4">
-            <Button>Save</Button>
-          </CardFooter>
-        </Card>
-        <Card x-chunk="dashboard-04-chunk-2">
-          <CardHeader>
-            <CardTitle>Plugins Directory</CardTitle>
-            <CardDescription>
-              The directory within your project, in which your plugins are
-              located.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <form className="flex flex-col gap-4">
-              <Input
-                placeholder="Project Name"
-                defaultValue="/content/plugins"
-              />
-              <div className="flex items-center space-x-2">
-                <Checkbox id="include" defaultChecked />
-                <label
-                  htmlFor="include"
-                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                >
-                  Allow administrators to change the directory.
-                </label>
-              </div>
-            </form>
-          </CardContent>
-          <CardFooter className="border-t px-6 py-4">
-            <Button>Save</Button>
-          </CardFooter>
-        </Card>
+        {!autoLogin && (
+          <>
+            <Form.Root
+              onSubmit={(event) => {
+                handlePatchGradient();
+                event.preventDefault();
+              }}
+            >
+              <Card x-chunk="dashboard-04-chunk-1">
+                <CardHeader>
+                  <CardTitle>Profile Gradient</CardTitle>
+                  <CardDescription>
+                    Choose the gradient that appears as your profile picture.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="py-2">
+                    <GradientChooserComponent
+                      value={
+                        gradient == ""
+                          ? userData?.profile_image ??
+                            gradients[
+                              parseInt(userData?.id ?? "", 30) %
+                                gradients.length
+                            ]
+                          : gradient
+                      }
+                      onChange={(value) => {
+                        handleInput({ target: { name: "gradient", value } });
+                      }}
+                    />
+                  </div>
+                </CardContent>
+                <CardFooter className="border-t px-6 py-4">
+                  <Form.Submit asChild>
+                    <Button type="submit">Save</Button>
+                  </Form.Submit>
+                </CardFooter>
+              </Card>
+            </Form.Root>
+            <Form.Root
+              onSubmit={(event) => {
+                handlePatchPassword();
+                event.preventDefault();
+              }}
+            >
+              <Card x-chunk="dashboard-04-chunk-2">
+                <CardHeader>
+                  <CardTitle>Password</CardTitle>
+                  <CardDescription>
+                    Type your new password and confirm it.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="flex w-full gap-4">
+                    <Form.Field name="password" className="w-full">
+                      <InputComponent
+                        id="pasword"
+                        onChange={(value) => {
+                          handleInput({ target: { name: "password", value } });
+                        }}
+                        value={password}
+                        isForm
+                        password={true}
+                        placeholder="Password"
+                        className="w-full"
+                      />
+                      <Form.Message
+                        match="valueMissing"
+                        className="field-invalid"
+                      >
+                        Please enter your password
+                      </Form.Message>
+                    </Form.Field>
+                    <Form.Field name="cnfPassword" className="w-full">
+                      <InputComponent
+                        id="cnfPassword"
+                        onChange={(value) => {
+                          handleInput({
+                            target: { name: "cnfPassword", value },
+                          });
+                        }}
+                        value={cnfPassword}
+                        isForm
+                        password={true}
+                        placeholder="Confirm Password"
+                        className="w-full"
+                      />
+
+                      <Form.Message
+                        className="field-invalid"
+                        match="valueMissing"
+                      >
+                        Please confirm your password
+                      </Form.Message>
+                    </Form.Field>
+                  </div>
+                </CardContent>
+                <CardFooter className="border-t px-6 py-4">
+                  <Form.Submit asChild>
+                    <Button type="submit">Save</Button>
+                  </Form.Submit>
+                </CardFooter>
+              </Card>
+            </Form.Root>
+          </>
+        )}
       </div>
     </div>
   );