diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 2a7219fed..5d8c61c4a 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -153,6 +153,11 @@ export default function Header(): JSX.Element {
                       Admin Page
                     </DropdownMenuItem>
                   )}
+                  <DropdownMenuItem
+                    onClick={() => navigate("/account/settings")}
+                  >
+                    Profile Settings
+                  </DropdownMenuItem>
                   <DropdownMenuItem
                     onClick={() => {
                       logout();
diff --git a/src/frontend/src/pages/ProfileSettingsPage/index.tsx b/src/frontend/src/pages/ProfileSettingsPage/index.tsx
new file mode 100644
index 000000000..2dc90515c
--- /dev/null
+++ b/src/frontend/src/pages/ProfileSettingsPage/index.tsx
@@ -0,0 +1,37 @@
+import { useContext, useEffect } from "react";
+import IconComponent from "../../components/genericIconComponent";
+import Header from "../../components/headerComponent";
+import { Input } from "../../components/ui/input";
+import { alertContext } from "../../contexts/alertContext";
+import { TabsContext } from "../../contexts/tabsContext";
+export default function ProfileSettingsPage(): JSX.Element {
+  const { setTabId } = useContext(TabsContext);
+
+  // set null id
+  useEffect(() => {
+    setTabId("");
+  }, []);
+  const { setErrorData } = useContext(alertContext);
+
+  return (
+    <>
+      <Header />
+
+      <div className="community-page-arrangement">
+        <div className="community-page-nav-arrangement">
+          <span className="community-page-nav-title">
+            <IconComponent name="User" className="w-6" />
+            Profile Settings
+          </span>
+        </div>
+        <span className="community-page-description-text">
+          Change your profile settings like your password and your profile
+          picture.
+        </span>
+        <div className="community-pages-flows-panel">
+          <Input placeholder="Password"></Input>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index cd8f86c9a..e9e6f1858 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -9,6 +9,7 @@ import ApiKeysPage from "./pages/ApiKeysPage";
 import CommunityPage from "./pages/CommunityPage";
 import FlowPage from "./pages/FlowPage";
 import HomePage from "./pages/MainPage";
+import ProfileSettingsPage from "./pages/ProfileSettingsPage";
 import ViewPage from "./pages/ViewPage";
 import DeleteAccountPage from "./pages/deleteAccountPage";
 import LoginPage from "./pages/loginPage";
@@ -95,6 +96,14 @@ const Router = () => {
       />
 
       <Route path="/account">
+        <Route
+          path="settings"
+          element={
+            <ProtectedRoute>
+              <ProfileSettingsPage />
+            </ProtectedRoute>
+          }
+        />
         <Route
           path="delete"
           element={
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index bea021dfc..caba6fc77 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -66,6 +66,7 @@ import {
   Undo,
   Unplug,
   Upload,
+  User,
   UserCog2,
   UserMinus2,
   UserPlus2,
@@ -221,6 +222,7 @@ export const nodeIconsLucide: iconsType = {
   ChatVertexAI: VertexAIIcon,
   VertexAIEmbeddings: VertexAIIcon,
   agents: Rocket,
+  User,
   WikipediaAPIWrapper: SvgWikipedia,
   chains: Link,
   memories: Cpu,