diff --git a/src/components/ProfileOverview/ProfileOverview.tsx b/src/components/ProfileOverview/ProfileOverview.tsx
new file mode 100644
index 00000000..0507faf6
--- /dev/null
+++ b/src/components/ProfileOverview/ProfileOverview.tsx
@@ -0,0 +1,24 @@
+import React, { Fragment, ReactElement } from "react";
+import ProfileInfo from "../ProfileInfo/ProfileInfo";
+import ProfileChangePassword from "../ProfileChangePassword/ProfileChangePassword";
+import ProfileEmailPreferances from "../ProfileEmailPreferances/ProfileEmailPreferances";
+import ProfileConnectedApps from "../ProfileConnectedApps/ProfileConnectedApps";
+import ProfileNotifications from "../ProfileNotifications/ProfileNotifications";
+import ProfileDeactive from "../ProfileDeactive/ProfileDeactive";
+
+export default function ProfileOverview(): ReactElement {
+  return (
+    <Fragment>
+      <div className="col-span-1 flex flex-col gap-6">
+        <ProfileInfo className="col-span-1" />
+        <ProfileChangePassword className="col-span-1" />
+        <ProfileEmailPreferances className="col-span-1" />
+      </div>
+      <div className="col-span-1 flex flex-col gap-6">
+        <ProfileConnectedApps className="col-span-1" />
+        <ProfileNotifications className="col-span-1" />
+        <ProfileDeactive className="col-span-1" />
+      </div>
+    </Fragment>
+  );
+}
diff --git a/src/pages/Profile/ProfilePage.tsx b/src/pages/Profile/ProfilePage.tsx
index ed95e0bc..82a89400 100644
--- a/src/pages/Profile/ProfilePage.tsx
+++ b/src/pages/Profile/ProfilePage.tsx
@@ -6,6 +6,7 @@ import ProfileEmailPreferances from "../../components/ProfileEmailPreferances/Pr
 import ProfileDeactive from "../../components/ProfileDeactive/ProfileDeactive";
 import ProfileNotifications from "../../components/ProfileNotifications/ProfileNotifications";
 import ProfileChangePassword from "../../components/ProfileChangePassword/ProfileChangePassword";
+import ProfileOverview from "../../components/ProfileOverview/ProfileOverview";
 
 export default function Profile(): ReactElement {
   const [activeTab, setActiveTab] = useState("Overview");
@@ -20,20 +21,7 @@ export default function Profile(): ReactElement {
       {(() => {
         switch (activeTab) {
           case "Overview":
-            return (
-              <Fragment>
-                <div className="col-span-1 flex flex-col gap-6">
-                  <ProfileInfo className="col-span-1" />
-                  <ProfileChangePassword className="col-span-1" />
-                  <ProfileEmailPreferances className="col-span-1" />
-                </div>
-                <div className="col-span-1 flex flex-col gap-6">
-                  <ProfileConnectedApps className="col-span-1" />
-                  <ProfileNotifications className="col-span-1" />
-                  <ProfileDeactive className="col-span-1" />
-                </div>
-              </Fragment>
-            );
+            return <ProfileOverview />;
           case "Profile Info":
             return <ProfileInfo className="col-span-2" />;
           case "Connected Apps":