diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx
index f4b2751d..d619afd4 100644
--- a/src/components/common/Button.tsx
+++ b/src/components/common/Button.tsx
@@ -1,42 +1,29 @@
 import { forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
 
-const variants = [
-  {
-    name: "primary",
-    className:
-      "border-transparent bg-indigo-600 text-white enabled:hover:bg-indigo-700",
-  },
-  {
-    name: "secondary",
-    className:
-      "border-gray-300 bg-white text-gray-700 enabled:hover:bg-gray-50",
-  },
-  {
-    name: "danger",
-    className:
-      "border-transparent bg-red-600 text-white enabled:hover:bg-red-700 focus:ring-red-500",
-  },
-] as const;
+export enum BUTTON_VARIANT {
+  PRIMARY = "border-transparent bg-indigo-600 text-white enabled:hover:bg-indigo-700",
+  SECONDARY = "border-gray-300 bg-white text-gray-700 enabled:hover:bg-gray-50",
+  DANGER = "border-transparent bg-red-600 text-white enabled:hover:bg-red-700 focus:ring-red-500",
+  TEXT = "rounded-md border-none bg-gray-100 font-medium text-indigo-600 shadow-none hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100",
+}
 
 export const Button = forwardRef<
   HTMLButtonElement,
   JSX.IntrinsicElements["button"] & {
-    variant?: typeof variants[number]["name"];
+    variant?: BUTTON_VARIANT;
   }
->(({ variant = "primary", children, ...props }, ref) => {
+>(({ variant = BUTTON_VARIANT.PRIMARY, className, ...props }, ref) => {
   return (
     <button
-      {...props}
-      ref={ref}
       className={twMerge(
         "inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50",
-        variants.find(({ name }) => variant === name)?.className,
-        props.className,
+        variant,
+        className,
       )}
-    >
-      {children}
-    </button>
+      ref={ref}
+      {...props}
+    />
   );
 });
 
diff --git a/src/components/dashboard/heading/Heading.tsx b/src/components/dashboard/heading/Heading.tsx
new file mode 100644
index 00000000..7eec8af5
--- /dev/null
+++ b/src/components/dashboard/heading/Heading.tsx
@@ -0,0 +1,32 @@
+import { twMerge } from "tailwind-merge";
+
+import type { HTMLAttributes } from "react";
+
+const variants = {
+  1: "text-2xl",
+  2: "text-xl",
+  3: "text-lg",
+  4: "text-base",
+  5: "text-sm",
+  6: "text-xs",
+} as const;
+
+type HeadingProps = Readonly<{
+  level: keyof typeof variants;
+}> &
+  HTMLAttributes<HTMLHeadingElement>;
+
+export const Heading = ({ level, className, ...props }: HeadingProps) => {
+  const Tag = `h${level}` as const;
+
+  return (
+    <Tag
+      className={twMerge(
+        "font-medium leading-6 text-gray-900",
+        variants[level],
+        className,
+      )}
+      {...props}
+    />
+  );
+};
diff --git a/src/components/dashboard/settingsLayout/SettingsLayout.tsx b/src/components/dashboard/settingsLayout/SettingsLayout.tsx
new file mode 100644
index 00000000..d7e06a8b
--- /dev/null
+++ b/src/components/dashboard/settingsLayout/SettingsLayout.tsx
@@ -0,0 +1,26 @@
+import { Heading } from "../heading/Heading";
+import { Tabs } from "../tabs/Tabs";
+
+import type { ReactNode } from "react";
+
+const tabs = [
+  {
+    label: "General",
+    pathname: "/dashboard/settings",
+  },
+];
+
+interface SettingsLayoutProps {
+  readonly title: string;
+  readonly children: ReactNode;
+}
+
+export const SettingsLayout = ({ title, children }: SettingsLayoutProps) => (
+  <section className="mx-auto mt-8 max-w-6xl px-4 sm:px-6 lg:mt-12 lg:px-8">
+    <Heading level={2} className="mb-8">
+      {title}
+    </Heading>
+    <Tabs tabs={tabs} />
+    {children}
+  </section>
+);
diff --git a/src/components/dashboard/settingsRow/RowForm.tsx b/src/components/dashboard/settingsRow/RowForm.tsx
new file mode 100644
index 00000000..1eb095f4
--- /dev/null
+++ b/src/components/dashboard/settingsRow/RowForm.tsx
@@ -0,0 +1,70 @@
+import { twMerge } from "tailwind-merge";
+
+import { useZodForm } from "../../../hooks/useZodForm";
+import { onPromise } from "../../../utils/functions";
+import { Button } from "../../common/Button";
+import { Input } from "../../common/Input";
+
+import {
+  LEFT_SECTION_STYLES,
+  RIGHT_SECTION_STYLES,
+  SECTIONS_WRAPPER_STYLES,
+} from "./SettingsRow";
+
+import type { HTMLInputTypeAttribute } from "react";
+import type { ZodObject, ZodString } from "zod";
+
+interface RowFormProps {
+  readonly schema: ZodObject<{ content: ZodString }>;
+  readonly content: string;
+  readonly contentType: HTMLInputTypeAttribute;
+  readonly onSubmit: (content: string) => void;
+  readonly onCancel?: () => void;
+}
+
+export const RowForm = ({
+  schema,
+  content,
+  contentType,
+  onSubmit,
+  onCancel,
+}: RowFormProps) => {
+  const {
+    handleFormSubmit,
+    register,
+    formState: { errors },
+  } = useZodForm(
+    schema,
+    {
+      onSubmit: ({ content }) => {
+        onSubmit(content);
+      },
+    },
+    { defaultValues: { content } },
+  );
+
+  return (
+    <form
+      className={SECTIONS_WRAPPER_STYLES}
+      onSubmit={onPromise(handleFormSubmit)}
+    >
+      <div className={LEFT_SECTION_STYLES}>
+        <Input type={contentType} {...register("content")} />
+        {errors.content && (
+          <p className="mt-1 text-xs text-red-500">{errors.content.message}</p>
+        )}
+      </div>
+      <div
+        className={twMerge(
+          RIGHT_SECTION_STYLES,
+          errors.content && "mt-1 sm:items-start",
+        )}
+      >
+        <Button type="submit">Save</Button>
+        <Button type="button" onClick={onCancel}>
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};
diff --git a/src/components/dashboard/settingsRow/SettingsRow.tsx b/src/components/dashboard/settingsRow/SettingsRow.tsx
new file mode 100644
index 00000000..0a8d5ad0
--- /dev/null
+++ b/src/components/dashboard/settingsRow/SettingsRow.tsx
@@ -0,0 +1,65 @@
+import { useState } from "react";
+
+import { Button, BUTTON_VARIANT } from "../../common/Button";
+
+import { RowForm } from "./RowForm";
+
+import type { HTMLInputTypeAttribute } from "react";
+import type { ZodObject, ZodString } from "zod";
+
+export const SECTIONS_WRAPPER_STYLES =
+  "mt-1 flex items-start sm:col-span-2 sm:mt-0 sm:items-center";
+export const LEFT_SECTION_STYLES = "grow text-gray-800";
+export const RIGHT_SECTION_STYLES =
+  "ml-2.5 flex h-full flex-shrink-0 flex-col items-stretch gap-1 font-medium sm:flex-row sm:items-center";
+
+interface SettingsRowProps {
+  readonly label: string;
+  readonly schema: ZodObject<{ content: ZodString }>;
+  readonly contentType: HTMLInputTypeAttribute;
+  readonly content?: string;
+  readonly onChange: (content: string) => void;
+}
+
+export const SettingsRow = ({
+  label,
+  schema,
+  contentType,
+  content,
+  onChange,
+}: SettingsRowProps) => {
+  const [isEditMode, setIsEditMode] = useState(false);
+
+  const handleFormSubmit = (content: string) => {
+    onChange(content);
+    setIsEditMode(false);
+  };
+
+  return (
+    <li className="py-4 text-sm sm:grid sm:min-h-[4rem] sm:grid-cols-3 sm:gap-4 sm:py-2">
+      <div className="flex items-center font-medium text-gray-500">{label}</div>
+      {isEditMode ? (
+        <RowForm
+          schema={schema}
+          content={content ?? ""}
+          contentType={contentType}
+          onSubmit={handleFormSubmit}
+          onCancel={() => setIsEditMode(false)}
+        />
+      ) : (
+        <div className={SECTIONS_WRAPPER_STYLES}>
+          <div className={LEFT_SECTION_STYLES}>{content}</div>
+          <div className={RIGHT_SECTION_STYLES}>
+            <Button
+              type="button"
+              variant={BUTTON_VARIANT.TEXT}
+              onClick={() => setIsEditMode(true)}
+            >
+              Edit
+            </Button>
+          </div>
+        </div>
+      )}
+    </li>
+  );
+};
diff --git a/src/components/dashboard/sync/SyncsList.tsx b/src/components/dashboard/sync/SyncsList.tsx
index c40736a1..37963cc9 100644
--- a/src/components/dashboard/sync/SyncsList.tsx
+++ b/src/components/dashboard/sync/SyncsList.tsx
@@ -1,6 +1,6 @@
 import { memo } from "react";
 
-import { Button } from "../../common/Button";
+import { Button, BUTTON_VARIANT } from "../../common/Button";
 
 import { SyncItem } from "./SyncItem";
 
@@ -111,7 +111,7 @@ export const SyncsList = memo<SyncsListProps>(
                   <div className="flex flex-1 justify-between gap-2 sm:justify-end">
                     <Button
                       disabled={page === 1}
-                      variant="secondary"
+                      variant={BUTTON_VARIANT.SECONDARY}
                       onClick={() => onPageChange(page - 1)}
                     >
                       Previous
@@ -119,7 +119,7 @@ export const SyncsList = memo<SyncsListProps>(
 
                     <Button
                       disabled={(total ?? 0) < perPage * page}
-                      variant="secondary"
+                      variant={BUTTON_VARIANT.SECONDARY}
                       onClick={() => onPageChange(page + 1)}
                     >
                       Next
diff --git a/src/components/dashboard/tabs/Tabs.tsx b/src/components/dashboard/tabs/Tabs.tsx
new file mode 100644
index 00000000..55710df7
--- /dev/null
+++ b/src/components/dashboard/tabs/Tabs.tsx
@@ -0,0 +1,60 @@
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { twMerge } from "tailwind-merge";
+
+import type { ChangeEvent } from "react";
+
+interface Tab {
+  readonly label: string;
+  readonly pathname: string;
+}
+
+interface TabsProps {
+  readonly tabs: Tab[];
+}
+
+export const Tabs = ({ tabs }: TabsProps) => {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const handleSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    const tab = tabs.find(({ pathname }) => pathname === event.target.value);
+
+    if (tab) {
+      router.push(tab.pathname);
+    }
+  };
+
+  return (
+    <>
+      <select
+        className="block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-600 focus:outline-none focus:ring-indigo-600 sm:text-sm md:hidden"
+        aria-label="Select a tab"
+        value={pathname ?? ""}
+        onChange={handleSelectChange}
+      >
+        {tabs.map(({ label, pathname }) => (
+          <option key={label} value={pathname}>
+            {label}
+          </option>
+        ))}
+      </select>
+      <nav className="hidden space-x-8 border-b border-gray-200 md:flex">
+        {tabs.map((tab) => (
+          <Link
+            key={tab.pathname}
+            href={tab.pathname}
+            className={twMerge(
+              "cursor-pointer whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium",
+              tab.pathname === pathname
+                ? "border-indigo-600 text-indigo-600"
+                : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
+            )}
+          >
+            {tab.label}
+          </Link>
+        ))}
+      </nav>
+    </>
+  );
+};
diff --git a/src/components/modal/ConfirmModal.tsx b/src/components/modal/ConfirmModal.tsx
index f89a9167..1f606c34 100644
--- a/src/components/modal/ConfirmModal.tsx
+++ b/src/components/modal/ConfirmModal.tsx
@@ -1,6 +1,6 @@
 import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
 
-import { Button } from "../common/Button";
+import { Button, BUTTON_VARIANT } from "../common/Button";
 
 import { BaseModal } from "./BaseModal";
 
@@ -27,7 +27,11 @@ export const ConfirmModal = ({
     <h3 className="text-bold text-3xl text-gray-600">Are you sure?</h3>
     <p className="text-center text-sm text-gray-500">{content}</p>
     <div className="flex gap-4">
-      <Button type="button" variant="secondary" onClick={onClose}>
+      <Button
+        type="button"
+        variant={BUTTON_VARIANT.SECONDARY}
+        onClick={onClose}
+      >
         Cancel
       </Button>
       <Button
diff --git a/src/components/modal/FormModal.tsx b/src/components/modal/FormModal.tsx
index 121c9a3a..369055f7 100644
--- a/src/components/modal/FormModal.tsx
+++ b/src/components/modal/FormModal.tsx
@@ -1,4 +1,4 @@
-import { Button } from "../common/Button";
+import { Button, BUTTON_VARIANT } from "../common/Button";
 
 import { BaseModal } from "./BaseModal";
 
@@ -40,7 +40,11 @@ export const FormModal = ({
         </div>
       </div>
       <div className="flex justify-end gap-2 bg-gray-50 px-6 py-3">
-        <Button type="button" variant="secondary" onClick={onClose}>
+        <Button
+          type="button"
+          variant={BUTTON_VARIANT.SECONDARY}
+          onClick={onClose}
+        >
           Cancel
         </Button>
         <Button type="submit">{submitText}</Button>
diff --git a/src/components/tile/deviceTile/DeviceTile.tsx b/src/components/tile/deviceTile/DeviceTile.tsx
index 2e392678..37858e5c 100644
--- a/src/components/tile/deviceTile/DeviceTile.tsx
+++ b/src/components/tile/deviceTile/DeviceTile.tsx
@@ -4,7 +4,7 @@ import { memo } from "react";
 import RemarkableIcon from "public/svg/remarkable.svg";
 
 import { onPromise } from "../../../utils/functions";
-import { Button } from "../../common/Button";
+import { Button, BUTTON_VARIANT } from "../../common/Button";
 
 import type { Device } from "@prisma/client";
 
@@ -32,7 +32,7 @@ export const DeviceTile = memo<DeviceTileProps>(({ device, onDelete }) => {
         <Button
           onClick={onPromise(onDelete)}
           className="bottom-10 right-10 mt-4 md:absolute lg:right-8 lg:bottom-8 xl:right-12 xl:bottom-12"
-          variant="danger"
+          variant={BUTTON_VARIANT.DANGER}
         >
           Delete device
         </Button>
diff --git a/src/hooks/useZodForm.ts b/src/hooks/useZodForm.ts
new file mode 100644
index 00000000..ac5f1e31
--- /dev/null
+++ b/src/hooks/useZodForm.ts
@@ -0,0 +1,29 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+
+import type {
+  SubmitHandler,
+  SubmitErrorHandler,
+  UseFormProps,
+} from "react-hook-form";
+import type { ZodType, TypeOf } from "zod";
+
+interface Options<T extends ZodType> {
+  onSubmit: SubmitHandler<TypeOf<T>>;
+  onInvalid?: SubmitErrorHandler<TypeOf<T>>;
+}
+
+export const useZodForm = <T extends ZodType>(
+  schema: T,
+  { onSubmit, onInvalid }: Options<T>,
+  props?: Omit<UseFormProps<TypeOf<T>>, "resolver">,
+) => {
+  const { handleSubmit, ...rest } = useForm<TypeOf<T>>({
+    resolver: zodResolver(schema),
+    ...props,
+  });
+
+  const handleFormSubmit = handleSubmit(onSubmit, onInvalid);
+
+  return { handleFormSubmit, ...rest };
+};
diff --git a/src/pages/dashboard/settings.tsx b/src/pages/dashboard/settings.tsx
deleted file mode 100644
index e4366cfb..00000000
--- a/src/pages/dashboard/settings.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { DashboardLayout } from "../../components/dashboard/layout/Layout";
-import { SettingsView } from "../../views/dashboard/settings/Settings";
-
-import type { NextPage } from "next";
-
-const Settings: NextPage = () => {
-  return (
-    <DashboardLayout>
-      <SettingsView />
-    </DashboardLayout>
-  );
-};
-
-export default Settings;
diff --git a/src/pages/dashboard/settings/index.tsx b/src/pages/dashboard/settings/index.tsx
new file mode 100644
index 00000000..c448bbc2
--- /dev/null
+++ b/src/pages/dashboard/settings/index.tsx
@@ -0,0 +1,17 @@
+import { DashboardLayout } from "../../../components/dashboard/layout/Layout";
+import { SettingsLayout } from "../../../components/dashboard/settingsLayout/SettingsLayout";
+import { SettingsView } from "../../../views/dashboard/settings/Settings";
+
+import type { NextPage } from "next";
+
+const Settings: NextPage = () => {
+  return (
+    <DashboardLayout>
+      <SettingsLayout title="General settings">
+        <SettingsView />
+      </SettingsLayout>
+    </DashboardLayout>
+  );
+};
+
+export default Settings;
diff --git a/src/utils/validation.ts b/src/utils/validation.ts
index c7e4312f..46256129 100644
--- a/src/utils/validation.ts
+++ b/src/utils/validation.ts
@@ -67,6 +67,23 @@ export const unregisterAndDisconnectDeviceSchema = z.object({
   id: z.number(),
 });
 
+export const updateUserNameSchema = z.object({
+  content: z.string().min(1, "Name is required."),
+});
+
+export const updateUserEmailSchema = z.object({
+  content: z.string().email("Email must be a valid email."),
+});
+
+export const updateUserPasswordSchema = z.object({
+  content: z
+    .string()
+    .regex(
+      PASSWORD_REGEX,
+      "Password must contain an uppercase letter, a special character, a number and must be at least 8 characters long.",
+    ),
+});
+
 export type RegisterUserInput = TypeOf<typeof registerUserSchema>;
 export type LoginUserInput = TypeOf<typeof loginUserSchema>;
 export type CreateFeedInput = TypeOf<typeof createFeedSchema>;
diff --git a/src/views/dashboard/Home.tsx b/src/views/dashboard/Home.tsx
index 116cc68d..30e36629 100644
--- a/src/views/dashboard/Home.tsx
+++ b/src/views/dashboard/Home.tsx
@@ -4,8 +4,9 @@ import { toast } from "react-hot-toast";
 
 import EmptySyncsIcon from "public/svg/empty-syncs.svg";
 
-import { Button } from "../../components/common/Button";
+import { Button, BUTTON_VARIANT } from "../../components/common/Button";
 import { Empty } from "../../components/common/Empty";
+import { Heading } from "../../components/dashboard/heading/Heading";
 import { Profile } from "../../components/dashboard/profile/Profile";
 import { SyncsList } from "../../components/dashboard/sync/SyncsList";
 import { Tile } from "../../components/dashboard/tile/Tile";
@@ -92,7 +93,7 @@ export const HomeView = () => {
             <Profile user={data?.user} isRegistered={!!device} />
             <div className="mt-6 flex space-x-3 md:mt-0 md:ml-4">
               <Button
-                variant="secondary"
+                variant={BUTTON_VARIANT.SECONDARY}
                 onClick={() => setIsAddModalOpen(true)}
               >
                 Add feed
@@ -105,9 +106,7 @@ export const HomeView = () => {
 
       <div className="mt-8">
         <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
-          <h2 className="text-lg font-medium leading-6 text-gray-900">
-            Overview
-          </h2>
+          <Heading level={2}>Overview</Heading>
           <div className="mt-4 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
             {DASHBOARD_CARDS.map((card, index) => {
               const value = cardsValues[index];
@@ -120,9 +119,9 @@ export const HomeView = () => {
         </div>
 
         <section className="mx-auto mt-10 max-w-6xl sm:px-6 lg:mt-12 lg:px-8">
-          <h2 className="px-4 text-lg font-medium leading-6 text-gray-900 sm:px-0">
+          <Heading level={2} className="px-4 sm:px-0">
             Recent syncs
-          </h2>
+          </Heading>
           {syncs.length ? (
             <div className="mt-4">
               <SyncsList
diff --git a/src/views/dashboard/device/Device.tsx b/src/views/dashboard/device/Device.tsx
index afee9fdb..83e7698a 100644
--- a/src/views/dashboard/device/Device.tsx
+++ b/src/views/dashboard/device/Device.tsx
@@ -4,6 +4,7 @@ import { toast } from "react-hot-toast";
 import EmptyDeviceIcon from "public/svg/empty-device.svg";
 
 import { Empty } from "../../../components/common/Empty";
+import { Heading } from "../../../components/dashboard/heading/Heading";
 import { AddDeviceModal } from "../../../components/modal/device/AddDeviceModal";
 import { DeviceTile } from "../../../components/tile/deviceTile/DeviceTile";
 import { useGenericLoader } from "../../../hooks/useGenericLoader";
@@ -38,9 +39,7 @@ export const DeviceView = () => {
         onClose={() => setIsAddModalOpen(false)}
       />
       <section className="mx-auto mt-8 max-w-6xl px-4 sm:px-6 lg:mt-12 lg:px-8">
-        <h2 className="text-lg font-medium leading-6 text-gray-900">
-          Your device
-        </h2>
+        <Heading level={2}>Your device</Heading>
 
         {device ? (
           <div className="mt-8">
diff --git a/src/views/dashboard/feeds/Feeds.tsx b/src/views/dashboard/feeds/Feeds.tsx
index fd613d8b..eee0c88a 100644
--- a/src/views/dashboard/feeds/Feeds.tsx
+++ b/src/views/dashboard/feeds/Feeds.tsx
@@ -6,6 +6,7 @@ import EmptyFeedsIcon from "public/svg/empty-feeds.svg";
 
 import { Button } from "../../../components/common/Button";
 import { Empty } from "../../../components/common/Empty";
+import { Heading } from "../../../components/dashboard/heading/Heading";
 import { AddFeedModal } from "../../../components/modal/feed/AddFeedModal";
 import { FeedTile } from "../../../components/tile/feedTile/FeedTile";
 import { useGenericLoader } from "../../../hooks/useGenericLoader";
@@ -47,9 +48,7 @@ export const FeedsView = () => {
       />
       <section className="mx-auto mt-8 max-w-6xl px-4 sm:px-6 lg:mt-12 lg:px-8">
         <div className="flex w-full items-center justify-between">
-          <h2 className="text-lg font-medium leading-6 text-gray-900">
-            All feeds
-          </h2>
+          <Heading level={2}>All feeds</Heading>
           <Button onClick={() => setIsAddModalOpen(true)}>
             <PlusIcon className="h-6 w-6" /> Add feed
           </Button>
diff --git a/src/views/dashboard/settings/Settings.tsx b/src/views/dashboard/settings/Settings.tsx
index c15c4c9d..1b94db0e 100644
--- a/src/views/dashboard/settings/Settings.tsx
+++ b/src/views/dashboard/settings/Settings.tsx
@@ -1,7 +1,54 @@
+import { useSession } from "next-auth/react";
+
+import { Heading } from "../../../components/dashboard/heading/Heading";
+import { SettingsRow } from "../../../components/dashboard/settingsRow/SettingsRow";
+import {
+  updateUserEmailSchema,
+  updateUserNameSchema,
+  updateUserPasswordSchema,
+} from "../../../utils/validation";
+
 export const SettingsView = () => {
+  const { data } = useSession();
+
+  const handleRowChange = (content: string) => {
+    console.log("saving...", content);
+  };
+
   return (
-    <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
-      <h1 className="mt-8 text-lg font-bold">Settings view coming soon...</h1>
-    </div>
+    <section className="mt-8">
+      <hgroup>
+        <Heading level={3}>Profile</Heading>
+        <p className="max-w-2xl text-sm text-gray-500">
+          This information will be displayed publicly so be careful what you
+          share.
+        </p>
+      </hgroup>
+
+      {data?.user && (
+        <ul className="mt-6 divide-y divide-gray-300 border-y border-gray-300">
+          <SettingsRow
+            label="Name"
+            contentType="text"
+            content={data.user.name ?? ""}
+            schema={updateUserNameSchema}
+            onChange={handleRowChange}
+          />
+          <SettingsRow
+            label="E-mail"
+            contentType="email"
+            content={data.user.email}
+            schema={updateUserEmailSchema}
+            onChange={handleRowChange}
+          />
+          <SettingsRow
+            label="Passowrd"
+            contentType="password"
+            schema={updateUserPasswordSchema}
+            onChange={handleRowChange}
+          />
+        </ul>
+      )}
+    </section>
   );
 };