diff --git a/packages/shared/src/components/fields/Autocomplete.tsx b/packages/shared/src/components/fields/Autocomplete.tsx
new file mode 100644
index 00000000000..12d74beb2bc
--- /dev/null
+++ b/packages/shared/src/components/fields/Autocomplete.tsx
@@ -0,0 +1,108 @@
+import { Popover, PopoverAnchor } from '@radix-ui/react-popover';
+import React, { useRef, useState } from 'react';
+import classNames from 'classnames';
+import type { TextFieldProps } from './TextField';
+import { TextField } from './TextField';
+import { PopoverContent } from '../popover/Popover';
+import { Typography } from '../typography/Typography';
+import { GenericLoaderSpinner } from '../utilities/loaders';
+import { IconSize } from '../Icon';
+
+interface AutocompleteProps
+  extends Omit<TextFieldProps, 'inputId' | 'onChange' | 'onSelect'> {
+  name: string;
+  onChange: (value: string) => void;
+  onSelect: (value: string) => void;
+  selectedValue?: string;
+  options: Array<{ value: string; label: string }>;
+  isLoading?: boolean;
+}
+
+const Autocomplete = ({
+  name,
+  isLoading,
+  options,
+  onChange,
+  onSelect,
+  selectedValue,
+  defaultValue,
+  ...restProps
+}: AutocompleteProps) => {
+  const [input, setInput] = useState(defaultValue || '');
+  const [isOpen, setIsOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const handleChange = (val: string) => {
+    setInput(val);
+    onChange(val);
+  };
+  const handleSelect = (opt: { value: string; label: string }) => {
+    setInput(opt.label);
+    onSelect(opt.value);
+    setIsOpen(false);
+    inputRef.current?.focus();
+  };
+  const handleBlur = () => {
+    setIsOpen(false);
+    setInput(options.find((opt) => opt.value === selectedValue)?.label || '');
+  };
+
+  return (
+    <Popover open={isOpen}>
+      <PopoverAnchor asChild>
+        <TextField
+          inputRef={(ref) => {
+            inputRef.current = ref;
+          }}
+          inputId={name}
+          {...restProps}
+          onChange={(e) => {
+            handleChange(e.target.value);
+            setIsOpen(true);
+          }}
+          onFocus={() => setIsOpen(true)}
+          onBlur={handleBlur}
+          value={input}
+          autoComplete="off"
+        />
+      </PopoverAnchor>
+      <PopoverContent
+        className="rounded-16 border border-border-subtlest-tertiary bg-background-popover p-4 data-[side=bottom]:mt-1 data-[side=top]:mb-1"
+        side="bottom"
+        align="start"
+        avoidCollisions
+        sameWidthAsAnchor
+        onOpenAutoFocus={(e) => e.preventDefault()} // keep focus in input
+        onCloseAutoFocus={(e) => e.preventDefault()} // avoid refocus jumps
+      >
+        {!isLoading ? (
+          <div className="flex w-full flex-col">
+            {options?.length > 0 ? (
+              options.map((opt) => (
+                <button
+                  type="button"
+                  className={classNames(
+                    'text-left',
+                    selectedValue === opt.value && 'font-bold',
+                  )}
+                  key={opt.value}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    handleSelect(opt);
+                  }}
+                >
+                  {opt.label}
+                </button>
+              ))
+            ) : (
+              <Typography>No results</Typography>
+            )}
+          </div>
+        ) : (
+          <GenericLoaderSpinner className="mx-auto" size={IconSize.Small} />
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default Autocomplete;
diff --git a/packages/shared/src/components/fields/ControlledTextField.tsx b/packages/shared/src/components/fields/ControlledTextField.tsx
new file mode 100644
index 00000000000..00ff70a4758
--- /dev/null
+++ b/packages/shared/src/components/fields/ControlledTextField.tsx
@@ -0,0 +1,34 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import React from 'react';
+import type { TextFieldProps } from './TextField';
+import { TextField } from './TextField';
+
+type ControlledTextFieldProps = Pick<
+  TextFieldProps,
+  'name' | 'label' | 'leftIcon' | 'placeholder' | 'hint'
+>;
+
+const ControlledTextField = ({
+  name,
+  hint,
+  ...restProps
+}: ControlledTextFieldProps) => {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field, fieldState }) => (
+        <TextField
+          inputId={field.name}
+          {...restProps}
+          {...field}
+          valid={!fieldState.error}
+          hint={fieldState.error ? fieldState.error.message : hint}
+        />
+      )}
+    />
+  );
+};
+export default ControlledTextField;
diff --git a/packages/shared/src/components/fields/ControlledTextarea.tsx b/packages/shared/src/components/fields/ControlledTextarea.tsx
new file mode 100644
index 00000000000..b9120036b2c
--- /dev/null
+++ b/packages/shared/src/components/fields/ControlledTextarea.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import Textarea from './Textarea';
+import type { BaseFieldProps } from './BaseFieldContainer';
+
+const ControlledTextarea = ({
+  name,
+  ...restProps
+}: Pick<BaseFieldProps<HTMLTextAreaElement>, 'name' | 'label'>) => {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field, fieldState }) => (
+        <Textarea
+          inputId={field.name}
+          {...restProps}
+          {...field}
+          valid={!fieldState.error}
+        />
+      )}
+    />
+  );
+};
+
+export default ControlledTextarea;
diff --git a/packages/shared/src/components/fields/MarkdownInput/ControlledMarkdownInput.tsx b/packages/shared/src/components/fields/MarkdownInput/ControlledMarkdownInput.tsx
new file mode 100644
index 00000000000..8ebf1d48326
--- /dev/null
+++ b/packages/shared/src/components/fields/MarkdownInput/ControlledMarkdownInput.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import MarkdownInput from '.';
+
+const ControlledMarkdownInput = ({
+  name,
+  rules,
+  ...props
+}: {
+  name: string;
+  rules?: Record<string, unknown>;
+} & React.ComponentProps<typeof MarkdownInput>) => {
+  const { control, setValue } = useFormContext();
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      render={({ field }) => (
+        <MarkdownInput
+          {...props}
+          {...field}
+          initialContent={field.value}
+          onValueUpdate={(value) => setValue(name, value)}
+        />
+      )}
+    />
+  );
+};
+
+export default ControlledMarkdownInput;
diff --git a/packages/shared/src/components/fields/Select.tsx b/packages/shared/src/components/fields/Select.tsx
new file mode 100644
index 00000000000..3f9475809d9
--- /dev/null
+++ b/packages/shared/src/components/fields/Select.tsx
@@ -0,0 +1,71 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import React from 'react';
+import { ArrowIcon } from '../icons';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuOptions,
+  DropdownMenuTrigger,
+} from '../dropdown/DropdownMenu';
+import type { ButtonProps, IconType } from '../buttons/Button';
+import { Button, ButtonVariant } from '../buttons/Button';
+import type { MenuItemProps } from '../dropdown/common';
+
+type SelectProps = {
+  name: string;
+  options: { value: string; label: string }[];
+  placeholder?: string;
+  icon?: IconType;
+  buttonProps?: ButtonProps<'button'>;
+};
+
+const Select = ({
+  name,
+  options,
+  placeholder,
+  icon,
+  buttonProps,
+}: SelectProps) => {
+  const { control, setValue } = useFormContext();
+
+  const menuItems: MenuItemProps[] = options.map((opt) => {
+    return {
+      label: opt.label,
+      action: () => setValue(name, opt.value),
+    };
+  });
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field }) => (
+        <>
+          <input type="hidden" {...field} />
+          <DropdownMenu>
+            <DropdownMenuTrigger className="w-full" asChild>
+              <Button
+                icon={icon}
+                variant={ButtonVariant.Float}
+                {...buttonProps}
+              >
+                {options.find((opt) => opt.value === field.value)?.label ||
+                  placeholder}
+                <ArrowIcon className="ml-auto rotate-180" secondary />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="start"
+              sideOffset={10}
+              className="flex w-[var(--radix-popper-anchor-width)] flex-col gap-1 overflow-y-auto overflow-x-hidden !p-0"
+            >
+              <DropdownMenuOptions options={menuItems} />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </>
+      )}
+    />
+  );
+};
+
+export default Select;
diff --git a/packages/shared/src/components/profile/ControlledAvatarUpload.tsx b/packages/shared/src/components/profile/ControlledAvatarUpload.tsx
new file mode 100644
index 00000000000..ade7d9e03fa
--- /dev/null
+++ b/packages/shared/src/components/profile/ControlledAvatarUpload.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { CameraIcon, ClearIcon } from '../icons';
+import { IconSize } from '../Icon';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+import { fallbackImages } from '../../lib/config';
+import { useControlledImageUpload } from '../../hooks/useControlledImageUpload';
+
+interface ControlledAvatarUploadProps {
+  name: string;
+  currentImageName: string;
+  fileSizeLimitMB?: number;
+}
+
+const ControlledAvatarUpload = ({
+  name,
+  currentImageName,
+  fileSizeLimitMB = 1,
+}: ControlledAvatarUploadProps) => {
+  const {
+    displayImage,
+    inputRef,
+    onFileChange,
+    onDragOver,
+    onDrop,
+    onUploadClick,
+    onRemove,
+    acceptedTypes,
+  } = useControlledImageUpload({
+    name,
+    fileSizeLimitMB,
+    currentImageName,
+    fallbackImage: fallbackImages.avatar,
+  });
+
+  return (
+    <div
+      className="group relative size-[120px]"
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+    >
+      <div className="relative size-full overflow-hidden rounded-26">
+        <img
+          src={displayImage}
+          alt="Profile avatar"
+          className="size-full object-cover"
+          data-testid="image_avatar_file"
+        />
+      </div>
+      <div className="cursor:pointer absolute top-0 flex h-full w-full items-center justify-center gap-2 rounded-26">
+        <Button
+          type="button"
+          className="bg-shadow-shadow3"
+          variant={ButtonVariant.Float}
+          size={ButtonSize.Small}
+          icon={<CameraIcon size={IconSize.Medium} />}
+          onClick={onUploadClick}
+        />
+        <Button
+          type="button"
+          className="bg-shadow-shadow3"
+          variant={ButtonVariant.Float}
+          size={ButtonSize.Small}
+          icon={<ClearIcon size={IconSize.Medium} />}
+          onClick={onRemove}
+        />
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={acceptedTypes}
+        className="hidden"
+        onChange={onFileChange}
+      />
+    </div>
+  );
+};
+
+export default ControlledAvatarUpload;
diff --git a/packages/shared/src/components/profile/ControlledCoverUpload.tsx b/packages/shared/src/components/profile/ControlledCoverUpload.tsx
new file mode 100644
index 00000000000..b4b0d01cbbb
--- /dev/null
+++ b/packages/shared/src/components/profile/ControlledCoverUpload.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CameraIcon, ClearIcon } from '../icons';
+import { IconSize } from '../Icon';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+import { useControlledImageUpload } from '../../hooks/useControlledImageUpload';
+
+interface ControlledCoverUploadProps {
+  name: string;
+  fileSizeLimitMB?: number;
+  currentImageName: string;
+  className?: string;
+}
+
+const ControlledCoverUpload = ({
+  name,
+  fileSizeLimitMB = 5,
+  currentImageName,
+  className,
+}: ControlledCoverUploadProps) => {
+  const {
+    displayImage,
+    inputRef,
+    onFileChange,
+    onDragOver,
+    onDrop,
+    onRemove,
+    onUploadClick,
+    acceptedTypes,
+  } = useControlledImageUpload({
+    name,
+    fileSizeLimitMB,
+    currentImageName,
+    fallbackImage: undefined,
+  });
+
+  return (
+    <div
+      className={classNames('group relative h-24 w-full', className)}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+    >
+      <div className="relative h-full w-full overflow-hidden rounded-16">
+        {displayImage ? (
+          <img
+            src={displayImage}
+            alt="Profile cover"
+            className="h-full w-full object-cover"
+            data-testid="image_cover_file"
+          />
+        ) : (
+          <div className="h-full w-full bg-surface-float" />
+        )}
+      </div>
+      <div className="absolute right-6 top-1/2 flex -translate-y-1/2 gap-2">
+        <Button
+          type="button"
+          className="bg-shadow-shadow3"
+          variant={ButtonVariant.Float}
+          size={ButtonSize.Small}
+          icon={<CameraIcon size={IconSize.Medium} />}
+          onClick={onUploadClick}
+        />
+        <Button
+          type="button"
+          className="bg-shadow-shadow3"
+          variant={ButtonVariant.Float}
+          size={ButtonSize.Small}
+          icon={<ClearIcon size={IconSize.Medium} />}
+          onClick={onRemove}
+        />
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={acceptedTypes}
+        className="hidden"
+        onChange={onFileChange}
+      />
+    </div>
+  );
+};
+
+export default ControlledCoverUpload;
diff --git a/packages/shared/src/components/profile/ExperienceSelect.tsx b/packages/shared/src/components/profile/ExperienceSelect.tsx
new file mode 100644
index 00000000000..53ebd27825c
--- /dev/null
+++ b/packages/shared/src/components/profile/ExperienceSelect.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import Select from '../fields/Select';
+import { ExperienceLevelOptions } from '../../lib/user';
+import { ButtonSize } from '../buttons/Button';
+import type { IconType } from '../buttons/Button';
+
+type ExperienceSelectProps = {
+  name: string;
+  icon?: IconType;
+  placeholder?: string;
+};
+
+const ExperienceSelect = ({
+  name,
+  icon,
+  placeholder,
+}: ExperienceSelectProps) => {
+  return (
+    <Select
+      icon={icon}
+      options={ExperienceLevelOptions}
+      name={name}
+      placeholder={placeholder}
+      buttonProps={{
+        size: ButtonSize.Large,
+      }}
+    />
+  );
+};
+
+export default ExperienceSelect;
diff --git a/packages/shared/src/components/profile/ProfileActions.tsx b/packages/shared/src/components/profile/ProfileActions.tsx
new file mode 100644
index 00000000000..0bc37775377
--- /dev/null
+++ b/packages/shared/src/components/profile/ProfileActions.tsx
@@ -0,0 +1,173 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useRouter } from 'next/router';
+import type {
+  LoggedUser,
+  PublicProfile,
+  UserShortProfile,
+} from '../../lib/user';
+import { BlockIcon, FlagIcon, GiftIcon } from '../icons';
+import { ButtonVariant } from '../buttons/Button';
+import { ReferralCampaignKey } from '../../lib';
+import { FollowButton } from '../contentPreference/FollowButton';
+import {
+  ContentPreferenceStatus,
+  ContentPreferenceType,
+} from '../../graphql/contentPreference';
+import { useContentPreferenceStatusQuery } from '../../hooks/contentPreference/useContentPreferenceStatusQuery';
+import { usePlusSubscription } from '../../hooks/usePlusSubscription';
+import { LogEvent, TargetId } from '../../lib/log';
+import CustomFeedOptionsMenu from '../CustomFeedOptionsMenu';
+import { useContentPreference } from '../../hooks/contentPreference/useContentPreference';
+import { useLazyModal } from '../../hooks/useLazyModal';
+import { LazyModal } from '../modals/common/types';
+import { MenuIcon } from '../MenuIcon';
+import { AwardButton } from '../award/AwardButton';
+import { useAuthContext } from '../../contexts/AuthContext';
+import { useCanAwardUser } from '../../hooks/useCoresFeature';
+import type { MenuItemProps } from '../dropdown/common';
+
+export interface HeaderProps {
+  user: PublicProfile;
+}
+
+const ProfileActions = ({ user }: HeaderProps): ReactElement => {
+  const { user: loggedUser } = useAuthContext();
+  const { openModal } = useLazyModal();
+  const { follow, unfollow } = useContentPreference();
+  const router = useRouter();
+  const { data: contentPreference } = useContentPreferenceStatusQuery({
+    id: user?.id,
+    entity: ContentPreferenceType.User,
+  });
+  const { unblock, block } = useContentPreference();
+  const { logSubscriptionEvent } = usePlusSubscription();
+  const canAward = useCanAwardUser({
+    sendingUser: loggedUser,
+    receivingUser: user as LoggedUser,
+  });
+
+  const onReportUser = React.useCallback(
+    (defaultBlocked = false) => {
+      openModal({
+        type: LazyModal.ReportUser,
+        props: {
+          offendingUser: {
+            id: user.id,
+            username: user.username,
+          },
+          defaultBlockUser: defaultBlocked,
+        },
+      });
+    },
+    [user, openModal],
+  );
+
+  const blocked = contentPreference?.status === ContentPreferenceStatus.Blocked;
+
+  const options: MenuItemProps[] = [
+    {
+      icon: <MenuIcon Icon={BlockIcon} />,
+      label: `${blocked ? 'Unblock' : 'Block'} ${user.username}`,
+      action: () =>
+        blocked
+          ? unblock({
+              id: user.id,
+              entity: ContentPreferenceType.User,
+              entityName: user.username,
+            })
+          : block({
+              id: user.id,
+              entity: ContentPreferenceType.User,
+              entityName: user.username,
+            }),
+    },
+    {
+      icon: <MenuIcon Icon={FlagIcon} />,
+      label: 'Report',
+      action: () => onReportUser(),
+    },
+  ];
+
+  if (!blocked && !user.isPlus) {
+    options.push({
+      icon: <MenuIcon Icon={GiftIcon} />,
+      label: 'Gift daily.dev Plus',
+      action: () => {
+        logSubscriptionEvent({
+          event_name: LogEvent.GiftSubscription,
+          target_id: TargetId.ProfilePage,
+        });
+        openModal({
+          type: LazyModal.GiftPlus,
+          props: { preselected: user as UserShortProfile },
+        });
+      },
+    });
+  }
+
+  return (
+    <div className="flex h-12 items-center">
+      <div className="flex flex-row gap-2">
+        {!blocked && (
+          <FollowButton
+            entityId={user.id}
+            variant={ButtonVariant.Primary}
+            type={ContentPreferenceType.User}
+            status={contentPreference?.status}
+            entityName={`@${user.username}`}
+            className="flex-row-reverse"
+            alwaysShow
+          />
+        )}
+        {canAward && (
+          <AwardButton
+            type="USER"
+            copy="Award"
+            entity={{
+              id: user.id,
+              receiver: user,
+            }}
+            variant={ButtonVariant.Secondary}
+          />
+        )}
+        <CustomFeedOptionsMenu
+          buttonVariant={ButtonVariant.Tertiary}
+          onAdd={(feedId) =>
+            follow({
+              id: user.id,
+              entity: ContentPreferenceType.User,
+              entityName: user.username,
+              feedId,
+            })
+          }
+          onUndo={(feedId) =>
+            unfollow({
+              id: user.id,
+              entity: ContentPreferenceType.User,
+              entityName: user.username,
+              feedId,
+            })
+          }
+          onCreateNewFeed={() =>
+            router.push(
+              `/feeds/new?entityId=${user.id}&entityType=${ContentPreferenceType.User}`,
+            )
+          }
+          shareProps={{
+            text: `Check out ${user.name}'s profile on daily.dev`,
+            link: user.permalink,
+            cid: ReferralCampaignKey.ShareProfile,
+            logObject: () => ({
+              event_name: LogEvent.ShareProfile,
+              target_id: user.id,
+            }),
+          }}
+          additionalOptions={options}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ProfileActions;
diff --git a/packages/shared/src/components/profile/ProfileHeader.tsx b/packages/shared/src/components/profile/ProfileHeader.tsx
new file mode 100644
index 00000000000..2e358496e57
--- /dev/null
+++ b/packages/shared/src/components/profile/ProfileHeader.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+import { Image } from '../image/Image';
+import { Typography, TypographyType } from '../typography/Typography';
+import { EditIcon, PlusIcon } from '../icons';
+import type { PublicProfile } from '../../lib/user';
+import type { UserStatsProps } from './UserStats';
+import { UserStats } from './UserStats';
+import JoinedDate from './JoinedDate';
+import { Separator } from '../cards/common/common';
+import { Button, ButtonVariant } from '../buttons/Button';
+import { webappUrl } from '../../lib/constants';
+import Link from '../utilities/Link';
+import { useAuthContext } from '../../contexts/AuthContext';
+
+const ProfileActions = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "profileActions" */
+      './ProfileActions'
+    ),
+  {
+    ssr: false,
+  },
+);
+
+type ProfileHeaderProps = {
+  user: PublicProfile;
+  userStats: Omit<UserStatsProps['stats'], 'reputation'>;
+};
+
+const ProfileHeader = ({ user, userStats }: ProfileHeaderProps) => {
+  const { name, username, bio, image, cover, isPlus } = user;
+  const { user: loggedUser } = useAuthContext();
+  const isSameUser = loggedUser?.id === user.id;
+  return (
+    <div className="relative w-full overflow-hidden rounded-t-16">
+      <div className="h-24">
+        <Image src={cover} alt="Cover" className="h-full w-full object-cover" />
+      </div>
+      <Image
+        src={image}
+        alt="Avatar"
+        className="absolute left-6 top-6 h-[7.5rem] w-[7.5rem] rounded-16 object-cover"
+      />
+      <div className="flex flex-col gap-3 px-6">
+        <Link passHref href={`${webappUrl}/settings/profile`}>
+          <Button
+            className="mb-4 ml-auto mt-2 text-text-secondary"
+            tag="a"
+            type={ButtonVariant.Float}
+            icon={<EditIcon />}
+          />
+        </Link>
+        <div className="flex gap-1">
+          <Typography type={TypographyType.Title2} bold>
+            {name}
+          </Typography>
+          {isPlus && <PlusIcon />}
+        </div>
+        <div className="flex flex-col gap-2">
+          {bio && <Typography type={TypographyType.Body}>{bio}</Typography>}
+          {/* TODO: Implement company badge from experience when implemented. We will have to either update the VerifiedCompanyUserBadge component, or add the badge + job separately here */}
+          {/* {user?.companies?.length > 0 && (
+            <div className="flex">
+              <VerifiedCompanyUserBadge
+                size={ProfileImageSize.Small}
+                user={user}
+                showCompanyName
+                showVerified
+              />
+            </div>
+          )} */}
+          <div className="flex items-center">
+            <Typography type={TypographyType.Subhead}>@{username}</Typography>
+            <Separator />
+            <JoinedDate
+              className="text-text-secondary typo-subhead"
+              date={new Date(user.createdAt)}
+              dateFormat="MMM d. yyyy"
+            />
+          </div>
+          {!isSameUser && <ProfileActions user={user} />}
+          <UserStats
+            userId={user.id}
+            stats={{ ...userStats, reputation: user.reputation }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileHeader;
diff --git a/packages/shared/src/components/profile/ProfileLocation.tsx b/packages/shared/src/components/profile/ProfileLocation.tsx
new file mode 100644
index 00000000000..9cf76d71bb2
--- /dev/null
+++ b/packages/shared/src/components/profile/ProfileLocation.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useQuery } from '@tanstack/react-query';
+import Autocomplete from '../fields/Autocomplete';
+import type { TLocation } from '../../graphql/autocomplete';
+import { getAutocompleteLocations } from '../../graphql/autocomplete';
+import { Radio } from '../fields/Radio';
+import { LocationType } from '../../features/opportunity/protobuf/util';
+import { locationToString } from '../../lib/utils';
+import { generateQueryKey, RequestKey } from '../../lib/query';
+import useDebounceFn from '../../hooks/useDebounceFn';
+import { useAuthContext } from '../../contexts/AuthContext';
+
+type ProfileLocationProps = {
+  locationName: string;
+  typeName?: string;
+  defaultValue?: TLocation;
+};
+
+const ProfileLocation = ({
+  locationName,
+  typeName,
+  defaultValue,
+}: ProfileLocationProps) => {
+  const { user } = useAuthContext();
+  const { setValue, watch } = useFormContext();
+  const [locQuery, setLocQuery] = React.useState('');
+  const selectedLoc = watch(locationName);
+  const typeValue = watch(typeName || '');
+  const { data, isLoading } = useQuery({
+    queryKey: generateQueryKey(
+      RequestKey.Autocomplete,
+      user,
+      'location',
+      locQuery,
+    ),
+    queryFn: () => getAutocompleteLocations(locQuery),
+    enabled: !!locQuery,
+  });
+  const handleSearch = (query: string) => {
+    setLocQuery(query);
+  };
+  const [debouncedQuery] = useDebounceFn<string>((q) => handleSearch(q), 300);
+
+  const handleSelect = (val: string) => {
+    setValue(locationName, val);
+  };
+
+  const locationTypeOptions = [
+    { label: 'Remote', value: LocationType.REMOTE },
+    { label: 'Hybrid', value: LocationType.HYBRID },
+    { label: 'On-site', value: LocationType.OFFICE },
+  ];
+
+  return (
+    <div className="flex flex-col gap-1">
+      <Autocomplete
+        defaultValue={locationToString(defaultValue)}
+        label="Location"
+        options={
+          data?.map((loc) => ({
+            label: locationToString(loc),
+            value: loc.id,
+          })) || []
+        }
+        selectedValue={selectedLoc}
+        name={locationName}
+        onSelect={(val) => handleSelect(val)}
+        onChange={(val) => debouncedQuery(val)}
+        isLoading={isLoading}
+      />
+      {typeName && (
+        <Radio
+          className={{
+            container: '!flex-row',
+          }}
+          name={typeName}
+          options={locationTypeOptions}
+          value={typeValue}
+          onChange={(newVal) => setValue(typeName, newVal)}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ProfileLocation;
diff --git a/packages/shared/src/components/profile/ProfileWidgets.spec.tsx b/packages/shared/src/components/profile/ProfileWidgets.spec.tsx
index 2d9ab9756dd..921307e3521 100644
--- a/packages/shared/src/components/profile/ProfileWidgets.spec.tsx
+++ b/packages/shared/src/components/profile/ProfileWidgets.spec.tsx
@@ -194,12 +194,6 @@ it('should show user stats in a proper format', () => {
 
   el = screen.getByTestId('Following');
   expect(el).toHaveTextContent('3KFollowing');
-
-  el = screen.getByTestId('Upvotes');
-  expect(el).toHaveTextContent('5KUpvotes');
-
-  el = screen.getByTestId('Views');
-  expect(el).toHaveTextContent('83KViews');
 });
 
 it('should show bio', () => {
diff --git a/packages/shared/src/components/profile/UserStats.tsx b/packages/shared/src/components/profile/UserStats.tsx
index 390639a1568..8447de41a11 100644
--- a/packages/shared/src/components/profile/UserStats.tsx
+++ b/packages/shared/src/components/profile/UserStats.tsx
@@ -6,17 +6,12 @@ import classed from '../../lib/classed';
 import { LazyModal } from '../modals/common/types';
 import { useLazyModal } from '../../hooks/useLazyModal';
 import { ContentPreferenceType } from '../../graphql/contentPreference';
-import { useAuthContext } from '../../contexts/AuthContext';
-import { UpgradeToPlus } from '../UpgradeToPlus';
-import { TargetId } from '../../lib/log';
-import { usePlusSubscription } from '../../hooks/usePlusSubscription';
-import { ButtonSize } from '../buttons/Button';
+import { ReputationIcon } from '../icons';
+import { IconSize } from '../Icon';
 
 export interface UserStatsProps {
   stats: {
     reputation: number;
-    views: number;
-    upvotes: number;
     numFollowers: number;
     numFollowing: number;
   };
@@ -41,12 +36,9 @@ const Item = ({
 );
 
 export function UserStats({ stats, userId }: UserStatsProps): ReactElement {
-  const { user: loggedUser } = useAuthContext();
   const { openModal } = useLazyModal<
     LazyModal.UserFollowersModal | LazyModal.UserFollowingModal
   >();
-  const { isPlus } = usePlusSubscription();
-  const isSameUser = !!loggedUser && loggedUser?.id === userId;
 
   const defaultModalProps = {
     props: {
@@ -58,16 +50,16 @@ export function UserStats({ stats, userId }: UserStatsProps): ReactElement {
   };
 
   return (
-    <div className="flex flex-wrap items-center text-text-tertiary typo-footnote">
+    <div className="-ml-1 flex flex-wrap items-center text-text-tertiary typo-footnote">
       <div className="flex flex-col gap-3">
-        {isSameUser && !isPlus && (
-          <UpgradeToPlus
-            className="max-w-fit laptop:hidden"
-            size={ButtonSize.Small}
-            target={TargetId.MyProfile}
-          />
-        )}
         <div className="flex flex-row gap-2">
+          <div className="flex">
+            <ReputationIcon
+              className="text-accent-onion-default"
+              size={IconSize.Small}
+            />
+            <Item stat={{ title: 'Reputation', amount: stats.reputation }} />
+          </div>
           <Item
             stat={{ title: 'Followers', amount: stats.numFollowers }}
             className={classNames(stats.numFollowers && 'cursor-pointer')}
@@ -105,11 +97,6 @@ export function UserStats({ stats, userId }: UserStatsProps): ReactElement {
             }}
           />
         </div>
-        <div className="flex flex-row gap-2">
-          <Item stat={{ title: 'Reputation', amount: stats.reputation }} />
-          <Item stat={{ title: 'Views', amount: stats.views }} />
-          <Item stat={{ title: 'Upvotes', amount: stats.upvotes }} />
-        </div>
       </div>
     </div>
   );
diff --git a/packages/shared/src/features/profile/components/AutofillProfileBanner.tsx b/packages/shared/src/features/profile/components/AutofillProfileBanner.tsx
new file mode 100644
index 00000000000..54bbb707940
--- /dev/null
+++ b/packages/shared/src/features/profile/components/AutofillProfileBanner.tsx
@@ -0,0 +1,126 @@
+import type { ReactElement } from 'react';
+import React, { useEffect } from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { autofillProfileCover } from '../../../lib/image';
+
+import { CustomPromptIcon } from '../../../components/icons';
+import { cvUploadBannerBg } from '../../../styles/custom';
+import { FeelingLazy } from './FeelingLazy';
+import { useLogContext } from '../../../contexts/LogContext';
+import { LogEvent, TargetId, TargetType } from '../../../lib/log';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import { UploadIcon } from '../../../components/icons/Upload';
+import { useFileInput } from '../../fileUpload/hooks/useFileInput';
+import { useFileValidation } from '../../fileUpload/hooks/useFileValidation';
+import { useToastNotification } from '../../../hooks';
+import { webappUrl } from '../../../lib/constants';
+import Link from '../../../components/utilities/Link';
+
+interface ProfileUploadBannerProps {
+  targetId?: TargetId;
+  onUpload: (file: File) => Promise<void>;
+  isLoading?: boolean;
+}
+
+export function AutofillProfileBanner({
+  targetId = TargetId.MyProfile,
+  onUpload,
+  isLoading,
+}: ProfileUploadBannerProps): ReactElement {
+  const { logEvent } = useLogContext();
+  const { displayToast } = useToastNotification();
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const { validateFiles } = useFileValidation();
+  const handleFiles = (files: FileList | null) => {
+    const { validFiles, errors } = validateFiles(files);
+
+    if (errors.length > 0) {
+      displayToast(errors[0].message);
+      return;
+    }
+
+    const [valid] = validFiles;
+
+    if (valid) {
+      onUpload(valid).catch(() => {
+        displayToast('Failed to upload file. Please try again.');
+      });
+    }
+  };
+
+  const { input, openFileInput } = useFileInput({
+    inputRef,
+    onFiles: handleFiles,
+    multiple: false,
+    disabled: isLoading,
+    accept: '.pdf,.docx',
+  });
+
+  useEffect(() => {
+    logEvent({
+      event_name: LogEvent.Impression,
+      target_type: TargetType.CvBanner,
+      target_id: targetId,
+    });
+  }, [logEvent, targetId]);
+
+  return (
+    <div
+      style={{ background: cvUploadBannerBg }}
+      className="relative mx-auto my-3 flex w-full flex-col items-center justify-center overflow-hidden rounded-10 border border-border-subtlest-tertiary p-4 laptop:flex-row"
+    >
+      {input}
+      <div className="flex flex-1 flex-col items-center gap-1 laptop:items-baseline">
+        <CustomPromptIcon />
+        <Typography type={TypographyType.Body} bold>
+          Autofill your profile!
+        </Typography>
+        <Typography
+          type={TypographyType.Subhead}
+          color={TypographyColor.Secondary}
+        >
+          Instantly import your details directly from your CV!
+        </Typography>
+        <div className="my-2 flex flex-row gap-3">
+          <Button
+            size={ButtonSize.Small}
+            variant={ButtonVariant.Primary}
+            icon={<UploadIcon />}
+            onClick={openFileInput}
+            disabled={isLoading}
+          >
+            Upload PDF
+          </Button>
+          <Link href={`${webappUrl}settings/profile`} passHref>
+            <Button
+              tag="a"
+              size={ButtonSize.Small}
+              variant={ButtonVariant.Subtle}
+            >
+              Fill in manually
+            </Button>
+          </Link>
+        </div>
+        <FeelingLazy
+          copy=", CV file deleted automatically after import"
+          className="flex-row-reverse items-start justify-end"
+        />
+      </div>
+      <div className="w-60 laptop:w-40">
+        <img
+          className="w-full object-cover"
+          src={autofillProfileCover}
+          alt="Illustration that demonstrates converting document to account profile"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/shared/src/features/profile/components/FeelingLazy.tsx b/packages/shared/src/features/profile/components/FeelingLazy.tsx
index 1e39cabea3a..eaf2bc5fbf3 100644
--- a/packages/shared/src/features/profile/components/FeelingLazy.tsx
+++ b/packages/shared/src/features/profile/components/FeelingLazy.tsx
@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react';
 import React from 'react';
+import classNames from 'classnames';
 import { LazyModal } from '../../../components/modals/common/types';
 import {
   Typography,
@@ -11,19 +12,27 @@ import { useLazyModal } from '../../../hooks/useLazyModal';
 import { OpenLinkIcon } from '../../../components/icons';
 import { ButtonIconPosition } from '../../../components/buttons/common';
 
-export function FeelingLazy(): ReactElement {
+interface FeelingLazyProps {
+  className?: string;
+  copy?: string;
+}
+
+export function FeelingLazy({
+  className = 'gap-1',
+  copy = 'Feeling lazy?',
+}: FeelingLazyProps): ReactElement {
   const { openModal } = useLazyModal();
 
   return (
     <Typography
       type={TypographyType.Footnote}
       color={TypographyColor.Tertiary}
-      className="hidden laptop:flex"
+      className={classNames('hidden laptop:flex', className)}
     >
-      Feeling lazy?
+      {copy}
       <button
         type="button"
-        className="ml-1 underline hover:no-underline"
+        className="underline hover:no-underline"
         onClick={() =>
           openModal({
             type: LazyModal.ActionSuccess,
diff --git a/packages/shared/src/graphql/autocomplete.ts b/packages/shared/src/graphql/autocomplete.ts
new file mode 100644
index 00000000000..fb14cf3e3d1
--- /dev/null
+++ b/packages/shared/src/graphql/autocomplete.ts
@@ -0,0 +1,27 @@
+import { gql } from 'graphql-request';
+import { gqlClient } from './common';
+
+export type TLocation = {
+  id: string;
+  city?: string;
+  country: string;
+  subdivision?: string;
+};
+
+export const AUTOCOMPLETE_LOCATION_QUERY = gql`
+  query AutocompleteLocation($query: String!) {
+    autocompleteLocation(query: $query) {
+      id
+      country
+      city
+      subdivision
+    }
+  }
+`;
+
+export const getAutocompleteLocations = async (
+  query: string,
+): Promise<TLocation[]> => {
+  const res = await gqlClient.request(AUTOCOMPLETE_LOCATION_QUERY, { query });
+  return res.autocompleteLocation;
+};
diff --git a/packages/shared/src/graphql/users.ts b/packages/shared/src/graphql/users.ts
index 5cc4760e0cd..94d352647f1 100644
--- a/packages/shared/src/graphql/users.ts
+++ b/packages/shared/src/graphql/users.ts
@@ -115,7 +115,7 @@ export const PROFILE_V2_EXTRA_QUERY = gql`
     userStats(id: $id) {
       upvotes: numPostUpvotes
       views: numPostViews
-      numFollowers,
+      numFollowers
       numFollowing
     }
     ${publicSourceMemberships}
@@ -296,14 +296,19 @@ export const HIDE_READING_HISTORY_MUTATION = gql`
 `;
 
 export const UPDATE_USER_PROFILE_MUTATION = gql`
-  mutation UpdateUserProfile($data: UpdateUserInput, $upload: Upload) {
-    updateUserProfile(data: $data, upload: $upload) {
+  mutation UpdateUserProfile(
+    $data: UpdateUserInput
+    $upload: Upload
+    $coverUpload: Upload
+  ) {
+    updateUserProfile(data: $data, upload: $upload, coverUpload: $coverUpload) {
       id
       name
       image
       username
       permalink
       bio
+      readme
       twitter
       github
       hashnode
diff --git a/packages/shared/src/hooks/useControlledImageUpload.ts b/packages/shared/src/hooks/useControlledImageUpload.ts
new file mode 100644
index 00000000000..a34346423d0
--- /dev/null
+++ b/packages/shared/src/hooks/useControlledImageUpload.ts
@@ -0,0 +1,116 @@
+import type { ChangeEvent } from 'react';
+import { useRef, useState, useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useFileInput } from './utils/useFileInput';
+import { acceptedTypesList } from '../graphql/posts';
+import { useDragAndDrop } from '../features/fileUpload/hooks/useDragAndDrop';
+import type { DragDropError } from '../features/fileUpload/hooks/useFileValidation';
+import { useFileValidation } from '../features/fileUpload/hooks/useFileValidation';
+
+interface UseControlledImageUploadProps {
+  name: string;
+  fileSizeLimitMB?: number;
+  currentImageName: string;
+  fallbackImage?: string;
+  onRemove?: () => void;
+  onError?: (errors: DragDropError[]) => void;
+}
+
+export const useControlledImageUpload = ({
+  name,
+  fileSizeLimitMB = 5,
+  currentImageName,
+  fallbackImage,
+  onError,
+}: UseControlledImageUploadProps) => {
+  const { setValue, watch } = useFormContext();
+  const currentImage = watch(currentImageName || '');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const fileValue = watch(name);
+  const [preview, setPreview] = useState<string | null>(null);
+
+  const { onFileChange: handleFile } = useFileInput({
+    acceptedTypes: acceptedTypesList,
+    limitMb: fileSizeLimitMB,
+    onChange(base64, file) {
+      if (!base64 || !file) {
+        setValue(name, null);
+        setPreview(null);
+        return;
+      }
+      setValue(name, file);
+      setValue(currentImageName, null);
+      setPreview(base64);
+    },
+  });
+
+  const { validateFiles } = useFileValidation({
+    acceptedTypes: acceptedTypesList,
+    maxSize: fileSizeLimitMB,
+  });
+
+  const onFiles = (files: FileList) => {
+    const { validFiles, errors } = validateFiles(files);
+
+    if (errors.length) {
+      onError(errors);
+      return;
+    }
+
+    if (validFiles.length) {
+      handleFile(validFiles[0]);
+    }
+  };
+
+  const { handleDragOver, handleDrop } = useDragAndDrop({ onFiles });
+
+  useEffect(() => {
+    return () => {
+      if (preview && preview.startsWith('blob:')) {
+        URL.revokeObjectURL(preview);
+      }
+    };
+  }, [preview]);
+
+  const onFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    handleFile(file);
+  };
+
+  const onUploadClick = () => {
+    inputRef.current?.click();
+  };
+
+  const onRemove = () => {
+    setValue(currentImageName, null);
+    setValue(name, null);
+    setPreview(null);
+    if (inputRef.current) {
+      inputRef.current.value = '';
+    }
+  };
+
+  const getDisplayImage = (): string | null => {
+    if (preview) {
+      return preview;
+    }
+
+    if (fileValue === null) {
+      return fallbackImage || null;
+    }
+    return currentImage || fallbackImage || null;
+  };
+
+  const displayImage = getDisplayImage();
+
+  return {
+    displayImage,
+    inputRef,
+    onFileChange,
+    onDragOver: handleDragOver,
+    onDrop: handleDrop,
+    onUploadClick,
+    onRemove,
+    acceptedTypes: acceptedTypesList.join(','),
+  };
+};
diff --git a/packages/shared/src/hooks/useHookForm.ts b/packages/shared/src/hooks/useHookForm.ts
new file mode 100644
index 00000000000..2c31c9ccb23
--- /dev/null
+++ b/packages/shared/src/hooks/useHookForm.ts
@@ -0,0 +1,18 @@
+import type { FieldValues } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+
+type UseHookFormProps = {
+  defaultValues: FieldValues;
+};
+
+const useHookForm = ({ defaultValues }: UseHookFormProps) => {
+  const methods = useForm<typeof defaultValues>({
+    defaultValues,
+  });
+
+  return {
+    methods,
+  };
+};
+
+export default useHookForm;
diff --git a/packages/shared/src/hooks/useProfileForm.ts b/packages/shared/src/hooks/useProfileForm.ts
index a92fe6260ad..771cc5d172a 100644
--- a/packages/shared/src/hooks/useProfileForm.ts
+++ b/packages/shared/src/hooks/useProfileForm.ts
@@ -31,7 +31,8 @@ export interface ProfileFormHint {
 }
 
 export interface UpdateProfileParameters extends Partial<UserProfile> {
-  image?: File;
+  upload?: File;
+  coverUpload?: File;
   onUpdateSuccess?: () => void;
   flags?: UserFlagsPublic;
 }
@@ -130,13 +131,14 @@ const useProfileForm = ({
     ResponseError,
     UpdateProfileParameters
   >({
-    mutationFn: ({ image, onUpdateSuccess, ...data }) =>
+    mutationFn: ({ upload, coverUpload, onUpdateSuccess, ...data }) =>
       gqlClient.request(UPDATE_USER_PROFILE_MUTATION, {
         data,
-        upload: image,
+        upload,
+        coverUpload,
       }),
 
-    onSuccess: async (_, { image, onUpdateSuccess, ...vars }) => {
+    onSuccess: async (_, { onUpdateSuccess, ...vars }) => {
       setHint({});
       await updateUser({ ...user, ...vars });
       onUpdateSuccess?.();
diff --git a/packages/shared/src/lib/image.ts b/packages/shared/src/lib/image.ts
index dd8001d25e7..be9672039f3 100644
--- a/packages/shared/src/lib/image.ts
+++ b/packages/shared/src/lib/image.ts
@@ -373,3 +373,9 @@ export const recruiterSpamCampaign =
   'https://media.daily.dev/image/upload/s--mFR-ciac--/f_auto/v1759242948/public/Recruiter%20-%202';
 export const recruiterSpamCampaignSEO =
   'https://media.daily.dev/image/upload/s--PBa-49xs--/f_auto/v1759245831/public/Recruiter%20-%206';
+
+export const locationProfileImage =
+  'https://media.daily.dev/image/upload/s--RYwMw9py--/f_auto/v1726486879/company_bdage_xwzrnh';
+
+export const autofillProfileCover =
+  'https://media.daily.dev/image/upload/s--0pMFz3kQ--/f_auto/v1757577987/public/Autofill%20your%20profile!';
diff --git a/packages/shared/src/lib/query.ts b/packages/shared/src/lib/query.ts
index 942a07d53e5..a444d1a93df 100644
--- a/packages/shared/src/lib/query.ts
+++ b/packages/shared/src/lib/query.ts
@@ -217,6 +217,7 @@ export enum RequestKey {
   Opportunity = 'opportunity',
   UserCandidatePreferences = 'user_candidate_preferences',
   KeywordAutocomplete = 'keyword_autocomplete',
+  Autocomplete = 'autocomplete',
 }
 
 export const getPostByIdKey = (id: string): QueryKey => [RequestKey.Post, id];
diff --git a/packages/shared/src/lib/user.ts b/packages/shared/src/lib/user.ts
index 095ff5cb1b8..7ec143e17b5 100644
--- a/packages/shared/src/lib/user.ts
+++ b/packages/shared/src/lib/user.ts
@@ -10,6 +10,7 @@ import type { TopReader } from '../components/badges/TopReaderBadge';
 import type { SubscriptionProvider, SubscriptionStatus } from './plus';
 import type { FeaturedAward, UserTransactionPublic } from '../graphql/njord';
 import type { Post } from '../graphql/posts';
+import type { TLocation } from '../graphql/autocomplete';
 
 export enum Roles {
   Moderator = 'moderator',
@@ -68,6 +69,16 @@ export enum UserExperienceLevel {
   NOT_ENGINEER = `I'm not an engineer`,
 }
 
+export const ExperienceLevelOptions = [
+  { label: 'Aspiring engineer (<1 year)', value: 'LESS_THAN_1_YEAR' },
+  { label: 'Entry-level (1 year)', value: 'MORE_THAN_1_YEAR' },
+  { label: 'Mid-level (2-3 years)', value: 'MORE_THAN_2_YEARS' },
+  { label: 'Experienced (4-5 years)', value: 'MORE_THAN_4_YEARS' },
+  { label: 'Highly experienced (6-10 years)', value: 'MORE_THAN_6_YEARS' },
+  { label: `I've suffered enough (10+ years)`, value: 'MORE_THAN_10_YEARS' },
+  { label: `I'm not an engineer`, value: 'NOT_ENGINEER' },
+];
+
 export interface UserProfile {
   name: string;
   email?: string;
@@ -94,6 +105,7 @@ export interface UserProfile {
   experienceLevel?: keyof typeof UserExperienceLevel;
   language?: string;
   defaultFeedId?: string;
+  readme?: string;
 }
 
 export interface UserShortProfile
@@ -160,6 +172,7 @@ export interface LoggedUser extends UserProfile, AnonymousUser {
   flags?: UserFlagsPublic;
   subscriptionFlags?: UserSubscriptionFlags;
   coresRole?: CoresRole;
+  location?: TLocation;
   balance: {
     amount: number;
   };
diff --git a/packages/shared/src/lib/utils.ts b/packages/shared/src/lib/utils.ts
index 31c3f968775..e6c0f2182a1 100644
--- a/packages/shared/src/lib/utils.ts
+++ b/packages/shared/src/lib/utils.ts
@@ -1,4 +1,5 @@
 import { largeNumberFormat } from './numberFormat';
+import type { TLocation } from '../graphql/autocomplete';
 
 export const stringToBoolean = (value: string): boolean => {
   if (typeof value !== 'string') {
@@ -60,3 +61,11 @@ export const snapToHalf = (v: number): 0.0 | 0.5 | 1.0 => {
 
   return 1.0;
 };
+
+export const locationToString = (loc: TLocation) => {
+  if (!loc) {
+    return undefined;
+  }
+
+  return [loc.city, loc.subdivision, loc.country].filter(Boolean).join(', ');
+};
diff --git a/packages/webapp/__tests__/AccountProfilePage.tsx b/packages/webapp/__tests__/AccountProfilePage.tsx
index 4eabff9402f..2cd2c0d61c6 100644
--- a/packages/webapp/__tests__/AccountProfilePage.tsx
+++ b/packages/webapp/__tests__/AccountProfilePage.tsx
@@ -75,15 +75,9 @@ it('should show account information', () => {
 
 it('should show about section', () => {
   renderComponent();
-  const bio = screen.getByPlaceholderText('Bio');
+  const bio = screen.getByPlaceholderText('Headline*');
   expect(bio).toBeInTheDocument();
   expect(bio).toHaveValue(defaultLoggedUser.bio);
-  const company = screen.getByPlaceholderText('Company');
-  expect(company).toBeInTheDocument();
-  expect(company).toHaveValue(defaultLoggedUser.company);
-  const title = screen.getByPlaceholderText('Job Title');
-  expect(title).toBeInTheDocument();
-  expect(title).toHaveValue(defaultLoggedUser.title);
 });
 
 it('should show profile social links', () => {
@@ -111,9 +105,7 @@ it('should show profile social links', () => {
   expect(reddit).toHaveValue(defaultLoggedUser.reddit);
   const stackoverflow = screen.getByPlaceholderText('Stack Overflow');
   expect(stackoverflow).toBeInTheDocument();
-  expect(stackoverflow).toHaveValue(
-    `stackoverflow.com/users/${defaultLoggedUser.stackoverflow}`,
-  );
+  expect(stackoverflow).toHaveValue(defaultLoggedUser.stackoverflow);
   const youtube = screen.getByPlaceholderText('YouTube');
   expect(youtube).toBeInTheDocument();
   expect(youtube).toHaveValue(defaultLoggedUser.youtube);
diff --git a/packages/webapp/__tests__/ProfileIndexPage.tsx b/packages/webapp/__tests__/ProfileIndexPage.tsx
index b17312757b3..ddb191a7e28 100644
--- a/packages/webapp/__tests__/ProfileIndexPage.tsx
+++ b/packages/webapp/__tests__/ProfileIndexPage.tsx
@@ -89,6 +89,14 @@ const defaultProfile: PublicProfile = {
   readmeHtml: 'This is my readme',
 };
 
+const defaultUserStats = {
+  upvotes: 150,
+  views: 5000,
+  numFollowers: 42,
+  numFollowing: 38,
+  reputation: 20,
+};
+
 const renderComponent = (
   mocks: MockedGraphQLResponse[] = [createReadingHistoryMock()],
   profile: Partial<PublicProfile> = {},
@@ -98,7 +106,11 @@ const renderComponent = (
   mocks.forEach(mockGraphQL);
   return render(
     <TestBootProvider client={client} auth={{ user: null }}>
-      <ProfilePage user={{ ...defaultProfile, ...profile }} noindex />
+      <ProfilePage
+        user={{ ...defaultProfile, ...profile }}
+        userStats={defaultUserStats}
+        noindex
+      />
     </TestBootProvider>,
   );
 };
diff --git a/packages/webapp/components/layouts/ProfileLayout/NavBar.module.css b/packages/webapp/components/layouts/ProfileLayout/NavBar.module.css
deleted file mode 100644
index ee24750adb8..00000000000
--- a/packages/webapp/components/layouts/ProfileLayout/NavBar.module.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.nav {
-  &:before {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 0.063rem;
-    margin: 0 auto;
-    background: var(--theme-border-subtlest-quaternary);
-  }
-
-  & > div {
-    position: relative;
-  }
-}
diff --git a/packages/webapp/components/layouts/ProfileLayout/NavBar.tsx b/packages/webapp/components/layouts/ProfileLayout/NavBar.tsx
deleted file mode 100644
index 68128db5ca8..00000000000
--- a/packages/webapp/components/layouts/ProfileLayout/NavBar.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import type { ReactElement } from 'react';
-import React from 'react';
-import type { PublicProfile } from '@dailydotdev/shared/src/lib/user';
-import { ActiveTabIndicator } from '@dailydotdev/shared/src/components/utilities';
-import {
-  Button,
-  ButtonSize,
-  ButtonVariant,
-} from '@dailydotdev/shared/src/components/buttons/Button';
-import classNames from 'classnames';
-import { useFeatureTheme } from '@dailydotdev/shared/src/hooks/utils/useFeatureTheme';
-import { useScrollTopClassName } from '@dailydotdev/shared/src/hooks/useScrollTopClassName';
-import Link from '@dailydotdev/shared/src/components/utilities/Link';
-import styles from './NavBar.module.css';
-
-export type Tab = { path: string; title: string };
-
-const basePath = `/[userId]`;
-export const tabs: Tab[] = [
-  {
-    path: basePath,
-    title: 'Readme',
-  },
-  {
-    path: `${basePath}/posts`,
-    title: 'Posts',
-  },
-  {
-    path: `${basePath}/replies`,
-    title: 'Replies',
-  },
-  {
-    path: `${basePath}/upvoted`,
-    title: 'Upvoted',
-  },
-];
-
-export type NavBarProps = {
-  selectedTab: number;
-  profile: PublicProfile;
-};
-
-export default function NavBar({
-  selectedTab,
-  profile,
-}: NavBarProps): ReactElement {
-  const getTabHref = (tab: Tab) =>
-    tab.path.replace('[userId]', profile.username || profile.id);
-  const featureTheme = useFeatureTheme();
-  const scrollClassname = useScrollTopClassName({ enabled: !!featureTheme });
-
-  return (
-    <div
-      className={classNames(
-        'sticky top-12 z-3 -mt-px flex justify-around bg-background-default tablet:top-0 tablet:justify-start laptop:top-14',
-        scrollClassname,
-        styles.nav,
-      )}
-    >
-      {tabs.map((tab, index) => (
-        <div key={tab.path}>
-          <Link href={getTabHref(tab)} passHref scroll={false}>
-            <Button
-              tag="a"
-              size={ButtonSize.Medium}
-              pressed={selectedTab === index}
-              variant={ButtonVariant.Tertiary}
-            >
-              {tab.title}
-            </Button>
-          </Link>
-          {selectedTab === index && (
-            <ActiveTabIndicator className="bottom-0 w-4" />
-          )}
-        </div>
-      ))}
-    </div>
-  );
-}
diff --git a/packages/webapp/components/layouts/ProfileLayout/index.tsx b/packages/webapp/components/layouts/ProfileLayout/index.tsx
index 77fed663723..f03e37152f9 100644
--- a/packages/webapp/components/layouts/ProfileLayout/index.tsx
+++ b/packages/webapp/components/layouts/ProfileLayout/index.tsx
@@ -1,5 +1,5 @@
 import type { ReactElement, ReactNode } from 'react';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import type { PublicProfile } from '@dailydotdev/shared/src/lib/user';
 import {
   getProfile,
@@ -22,15 +22,9 @@ import { useProfile } from '@dailydotdev/shared/src/hooks/profile/useProfile';
 import CustomAuthBanner from '@dailydotdev/shared/src/components/auth/CustomAuthBanner';
 import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext';
 import { LogEvent, TargetType } from '@dailydotdev/shared/src/lib/log';
-import ConditionalWrapper from '@dailydotdev/shared/src/components/ConditionalWrapper';
-import { ProfileUploadBanner } from '@dailydotdev/shared/src/features/profile/components/ProfileUploadBanner';
-import { useUploadCv } from '@dailydotdev/shared/src/features/profile/hooks/useUploadCv';
-import { ActionType } from '@dailydotdev/shared/src/graphql/actions';
-import { useActions } from '@dailydotdev/shared/src/hooks';
 import { usePostReferrerContext } from '@dailydotdev/shared/src/contexts/PostReferrerContext';
 import { getLayout as getFooterNavBarLayout } from '../FooterNavBarLayout';
 import { getLayout as getMainLayout } from '../MainLayout';
-import NavBar, { tabs } from './NavBar';
 import { getTemplatedTitle } from '../utils';
 import { ProfileWidgets } from '../../../../shared/src/components/profile/ProfileWidgets';
 
@@ -81,15 +75,9 @@ export default function ProfileLayout({
 }: ProfileLayoutProps): ReactElement {
   const router = useRouter();
   const { isFallback } = router;
-  const { user, isUserSame } = useProfile(initialUser);
+  const { user } = useProfile(initialUser);
   const [trackedView, setTrackedView] = useState(false);
   const { logEvent } = useLogContext();
-  const { status, onUpload, shouldShow, onCloseBanner } = useUploadCv();
-  const { checkHasCompleted } = useActions();
-  const hasClosedBanner = useMemo(
-    () => checkHasCompleted(ActionType.ClosedProfileBanner),
-    [checkHasCompleted],
-  );
   const { referrerPost } = usePostReferrerContext();
 
   useEffect(() => {
@@ -119,48 +107,21 @@ export default function ProfileLayout({
     return <></>;
   }
 
-  const selectedTab = tabs.findIndex((tab) => tab.path === router?.pathname);
-
   return (
-    <ConditionalWrapper
-      condition={isUserSame && shouldShow && !hasClosedBanner}
-      wrapper={(component) => (
-        <div className="flex w-full flex-col p-4">
-          <ProfileUploadBanner
-            className={{ container: '!mt-0 tablet:mt-3' }}
-            onClose={onCloseBanner}
-            onUpload={onUpload}
-            status={status}
-          />
-          {component}
-        </div>
-      )}
-    >
-      <div className="m-auto flex w-full max-w-screen-laptop flex-col pb-12 tablet:pb-0 laptop:min-h-page laptop:flex-row laptop:border-l laptop:border-r laptop:border-border-subtlest-tertiary laptop:pb-6 laptopL:pb-0">
-        <Head>
-          <link rel="preload" as="image" href={user.image} />
-        </Head>
-        <main className="relative flex flex-1 flex-col tablet:border-r tablet:border-border-subtlest-tertiary">
-          <ProfileWidgets
-            user={user}
-            userStats={userStats}
-            sources={sources}
-            enableSticky
-            className="laptop:hidden"
-          />
-          <NavBar selectedTab={selectedTab} profile={user} />
-          {children}
-        </main>
-        <PageWidgets className="hidden !px-0 laptop:flex">
-          <ProfileWidgets
-            user={user}
-            userStats={userStats}
-            sources={sources}
-            className="w-full"
-          />
-        </PageWidgets>
-      </div>
-    </ConditionalWrapper>
+    <div className="m-auto flex w-full max-w-screen-laptop flex-col pb-12 tablet:pb-0 laptop:min-h-page laptop:flex-row laptop:pb-6 laptopL:pb-0">
+      <Head>
+        <link rel="preload" as="image" href={user.image} />
+      </Head>
+      <main className="relative flex flex-1 flex-col">{children}</main>
+      <PageWidgets className="hidden !px-0 laptop:flex">
+        <ProfileWidgets
+          user={user}
+          userStats={userStats}
+          sources={sources}
+          className="w-full"
+        />
+      </PageWidgets>
+    </div>
   );
 }
 
diff --git a/packages/webapp/components/layouts/SettingsLayout/Profile/index.tsx b/packages/webapp/components/layouts/SettingsLayout/Profile/index.tsx
index faaa9eb7890..4ddf5368fec 100644
--- a/packages/webapp/components/layouts/SettingsLayout/Profile/index.tsx
+++ b/packages/webapp/components/layouts/SettingsLayout/Profile/index.tsx
@@ -4,10 +4,11 @@ import {
   ButtonVariant,
 } from '@dailydotdev/shared/src/components/buttons/Button';
 import type { ReactElement } from 'react';
-import React, { useCallback, useContext, useRef, useState } from 'react';
+import React, { useContext } from 'react';
+import ControlledTextField from '@dailydotdev/shared/src/components/fields/ControlledTextField';
+import ControlledTextarea from '@dailydotdev/shared/src/components/fields/ControlledTextarea';
 import {
   AtIcon,
-  CameraIcon,
   CodePenIcon,
   GitHubIcon,
   LinkedInIcon,
@@ -21,464 +22,293 @@ import {
   TwitterIcon,
   UserIcon,
   YoutubeIcon,
+  TerminalIcon,
+  PlusIcon,
 } from '@dailydotdev/shared/src/components/icons';
-import { IconSize } from '@dailydotdev/shared/src/components/Icon';
-import ImageInput from '@dailydotdev/shared/src/components/fields/ImageInput';
 import {
   Typography,
   TypographyColor,
   TypographyType,
 } from '@dailydotdev/shared/src/components/typography/Typography';
-import ExperienceLevelDropdown from '@dailydotdev/shared/src/components/profile/ExperienceLevelDropdown';
-import Textarea from '@dailydotdev/shared/src/components/fields/Textarea';
-import { withHttps, withPrefix } from '@dailydotdev/shared/src/lib';
-import { FormWrapper } from '@dailydotdev/shared/src/components/fields/form';
-import {
-  useToastNotification,
-  useViewSize,
-  ViewSize,
-} from '@dailydotdev/shared/src/hooks';
-import type { UpdateProfileParameters } from '@dailydotdev/shared/src/hooks/useProfileForm';
+import { useToastNotification } from '@dailydotdev/shared/src/hooks';
+import type { ProfileFormHint } from '@dailydotdev/shared/src/hooks/useProfileForm';
 import useProfileForm from '@dailydotdev/shared/src/hooks/useProfileForm';
 import AuthContext from '@dailydotdev/shared/src/contexts/AuthContext';
-import { formToJson } from '@dailydotdev/shared/src/lib/form';
-import { useMutation } from '@tanstack/react-query';
-import type { LoggedUser } from '@dailydotdev/shared/src/lib/user';
-import type { ResponseError } from '@dailydotdev/shared/src/graphql/common';
-import { gqlClient } from '@dailydotdev/shared/src/graphql/common';
-import {
-  clearImage,
-  UPLOAD_COVER_MUTATION,
-  UploadPreset,
-} from '@dailydotdev/shared/src/graphql/users';
+
 import { useRouter } from 'next/router';
 import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext';
 import { LogEvent } from '@dailydotdev/shared/src/lib/log';
-import { DragDrop } from '@dailydotdev/shared/src/components/fields/DragDrop';
-import { FeelingLazy } from '@dailydotdev/shared/src/features/profile/components/FeelingLazy';
-import {
-  fileValidation,
-  useUploadCv,
-} from '@dailydotdev/shared/src/features/profile/hooks/useUploadCv';
-import ConditionalWrapper from '@dailydotdev/shared/src/components/ConditionalWrapper';
-import { AccountTextField } from '../common';
-import AccountContentSection from '../AccountContentSection';
+import type { FieldValues } from 'react-hook-form';
+import { FormProvider } from 'react-hook-form';
+import classed from '@dailydotdev/shared/src/lib/classed';
+import ExperienceSelect from '@dailydotdev/shared/src/components/profile/ExperienceSelect';
+import { HorizontalSeparator } from '@dailydotdev/shared/src/components/utilities';
+import ControlledMarkdownInput from '@dailydotdev/shared/src/components/fields/MarkdownInput/ControlledMarkdownInput';
+import ProfileLocation from '@dailydotdev/shared/src/components/profile/ProfileLocation';
+import ControlledAvatarUpload from '@dailydotdev/shared/src/components/profile/ControlledAvatarUpload';
+import ControlledCoverUpload from '@dailydotdev/shared/src/components/profile/ControlledCoverUpload';
+import type { UserProfile } from '@dailydotdev/shared/src/lib/user';
+import { webappUrl } from '@dailydotdev/shared/src/lib/constants';
+import Link from '@dailydotdev/shared/src/components/utilities/Link';
+import useHookForm from '@dailydotdev/shared/src/hooks/useHookForm';
+import { locationProfileImage } from '@dailydotdev/shared/src/lib/image';
+import { Image } from '@dailydotdev/shared/src/components/image/Image';
 import { AccountPageContainer } from '../AccountPageContainer';
-import { VerifiedCompanyBadgeSection } from './VerifiedCompanyBadge/VerifiedCompanyBadgeSection';
-import type { VerifiedCompanyBadgeSectionProps } from './VerifiedCompanyBadge/VerifiedCompanyBadgeSection';
 
-const imageId = 'avatar_file';
-const coverId = 'cover_file';
+const Section = classed('section', 'flex flex-col gap-7');
 
-const ProfileIndex = ({
-  ...props
-}: VerifiedCompanyBadgeSectionProps): ReactElement => {
+const ProfileIndex = (): ReactElement => {
+  const { user } = useContext(AuthContext);
+  const { methods: hookForm } = useHookForm({
+    defaultValues: {
+      name: user?.name,
+      username: user?.username,
+      image: user?.image,
+      cover: user?.cover,
+      bio: user?.bio,
+      github: user?.github,
+      locationId: user?.location?.id,
+      linkedin: user?.linkedin,
+      portfolio: user?.portfolio,
+      twitter: user?.twitter,
+      youtube: user?.youtube,
+      stackoverflow: user?.stackoverflow,
+      reddit: user?.reddit,
+      roadmap: user?.roadmap,
+      codepen: user?.codepen,
+      mastodon: user?.mastodon,
+      bluesky: user?.bluesky,
+      threads: user?.threads,
+      experienceLevel: user?.experienceLevel,
+      readme: user?.readme || '',
+    },
+  });
   const router = useRouter();
-  const formRef = useRef<HTMLFormElement>();
   const { displayToast } = useToastNotification();
   const { logEvent } = useLogContext();
   const onSuccess = () => {
     displayToast('Profile updated');
     logEvent({ event_name: LogEvent.UpdateProfile });
   };
-  const { updateUserProfile, isLoading, hint } = useProfileForm({ onSuccess });
-  const { user, updateUser } = useContext(AuthContext);
-  const [coverImage, setCoverImage] = useState(user?.cover);
-  const currentCoverImage = coverImage || user?.cover;
-  const isMobile = useViewSize(ViewSize.MobileL);
+  const { updateUserProfile, isLoading } = useProfileForm({ onSuccess });
 
-  const onSubmit = (e: React.MouseEvent) => {
-    e.preventDefault();
-    const values = formToJson<UpdateProfileParameters>(formRef.current);
-    const params = {
-      name: values.name,
-      username: values.username,
-      bio: values.bio,
-      company: values.company,
-      title: values.title,
-      twitter: values.twitter,
-      github: values.github,
-      portfolio: values.portfolio ? withHttps(values.portfolio) : null,
-      roadmap: values.roadmap,
-      threads: values.threads,
-      codepen: values.codepen,
-      reddit: values.reddit,
-      stackoverflow: values.stackoverflow,
-      youtube: values.youtube,
-      linkedin: values.linkedin,
-      mastodon: values.mastodon ? withHttps(values.mastodon) : null,
-      bluesky: values.bluesky,
-      experienceLevel: values.experienceLevel,
-      onUpdateSuccess: () =>
-        router.push(`/${values.username.toLowerCase()}`).then(() => {
+  const onSubmit = async (data: FieldValues) => {
+    hookForm.clearErrors();
+    updateUserProfile(data, {
+      onSuccess: () => {
+        router.push(`/${data.username.toLowerCase()}`).then(() => {
           router.reload();
-        }),
-    };
-    updateUserProfile(params);
-  };
-
-  const { mutate: uploadCoverImage } = useMutation<
-    { user: LoggedUser },
-    ResponseError,
-    { image: File }
-  >({
-    mutationFn: ({ image }) =>
-      gqlClient.request(UPLOAD_COVER_MUTATION, {
-        upload: image,
-      }),
-
-    onSuccess: async (res) => {
-      await updateUser({ ...user, cover: res.user.cover } as LoggedUser);
-      displayToast('Cover image updated');
-    },
-
-    onError: (err) => {
-      if (!err?.response?.errors?.length) {
-        return;
-      }
-      displayToast(err.response.errors[0].message);
-    },
-  });
-
-  const { mutateAsync: clearImageMutation } = useMutation({
-    mutationFn: clearImage,
-  });
-
-  const onImageInputChange = useCallback(
-    (file?: File, fileName?: string, isCover = false) => {
-      if (!file) {
-        return clearImageMutation([
-          isCover ? UploadPreset.ProfileCover : UploadPreset.Avatar,
-        ]);
-      }
-
-      if (isCover) {
-        setCoverImage(fileName);
-        uploadCoverImage({
-          image: file,
-        });
-      } else {
-        logEvent({ event_name: LogEvent.UpdateProfileImage });
-        updateUserProfile({
-          image: file,
         });
-      }
-
-      return undefined;
-    },
-    [updateUserProfile, uploadCoverImage, clearImageMutation, logEvent],
-  );
-
-  const CoverHoverIcon = () => (
-    <span className="text-theme-label-secondary ml-26 mr-3 flex flex-wrap items-center justify-center">
-      <CameraIcon size={IconSize.Large} />
-      <span className="ml-1.5 font-bold typo-callout">Upload cover image</span>
-    </span>
-  );
-
-  const { onUpload, status, shouldShow } = useUploadCv();
-
-  const uploadSection = (
-    <AccountContentSection
-      className={{ heading: 'mt-0' }}
-      title="Your next job should apply to you"
-      description="Upload your CV so we can quietly start matching you with roles that actually fit your skills and interests. Nothing is ever shared without your permission, and we’ll only reach out when there’s something genuinely worth your time. No spam, no pressure."
-    >
-      <DragDrop
-        className="my-4 max-w-80"
-        onFilesDrop={([file]) => onUpload(file)}
-        validation={fileValidation}
-        state={status}
-      />
-      {!user?.flags?.cvUploadedAt ? (
-        <FeelingLazy />
-      ) : (
-        <Typography
-          type={TypographyType.Caption1}
-          color={TypographyColor.Quaternary}
-        >
-          Tip: Complete your profile below to improve match quality
-        </Typography>
-      )}
-    </AccountContentSection>
-  );
+      },
+      onError: (error) => {
+        const errData: ProfileFormHint = JSON.parse(
+          error.response.errors[0].message,
+        );
 
-  const form = (
-    <ConditionalWrapper
-      condition={shouldShow}
-      wrapper={(component) => (
-        <>
-          {uploadSection}
-          {component}
-        </>
-      )}
-    >
-      <form ref={formRef} id="submit-profile">
-        <AccountContentSection
-          className={{ heading: !shouldShow ? 'mt-0' : undefined }}
-          title="Profile Picture"
-          description="Upload a picture to make your profile stand out and let people recognize
-        your comments and contributions easily!"
+        Object.entries(errData).forEach(([key, value]) => {
+          hookForm.setError(key as keyof UserProfile, {
+            type: 'manual',
+            message: value,
+          });
+        });
+      },
+    });
+  };
+  return (
+    <FormProvider {...hookForm}>
+      <form className="flex flex-1" onSubmit={hookForm.handleSubmit(onSubmit)}>
+        <AccountPageContainer
+          title="Profile"
+          actions={
+            <Button
+              type="submit"
+              className="ml-auto"
+              variant={ButtonVariant.Primary}
+              size={ButtonSize.Small}
+              disabled={isLoading}
+            >
+              Save
+            </Button>
+          }
         >
-          <div className="relative mt-6 flex">
-            <div className="absolute left-0 top-0 flex w-full max-w-[19.25rem]">
-              <ImageInput
-                id={coverId}
-                className={{
-                  root: 'w-full',
-                  container:
-                    'border-0 bg-background-subtle hover:bg-accent-pepper-subtlest',
-                  img: 'object-cover',
-                }}
-                size="cover"
-                initialValue={currentCoverImage}
-                fallbackImage={null}
-                alwaysShowHover={!currentCoverImage}
-                hoverIcon={<CoverHoverIcon />}
-                fileSizeLimitMB={5}
-                onChange={(fileName, file) =>
-                  onImageInputChange(file, fileName, true)
-                }
-                closeable
+          <div className="flex flex-col gap-6">
+            <div className="relative mb-10">
+              <ControlledCoverUpload
+                name="coverUpload"
+                currentImageName="cover"
+                fileSizeLimitMB={1}
               />
+              <div className="absolute bottom-0 left-6 translate-y-1/2">
+                <ControlledAvatarUpload
+                  name="upload"
+                  currentImageName="image"
+                  fileSizeLimitMB={1}
+                />
+              </div>
             </div>
-            <ImageInput
-              id={imageId}
-              className={{
-                img: 'object-cover',
-                container:
-                  'border-4 !border-background-default bg-background-subtle hover:bg-accent-pepper-subtlest',
-              }}
-              initialValue={user?.image}
-              alwaysShowHover={!user?.image}
-              hoverIcon={<CameraIcon size={IconSize.Large} />}
-              onChange={(_, file) => onImageInputChange(file)}
-              closeable
-            />
+
+            <Section className="mt-6">
+              <ControlledTextField
+                name="name"
+                label="Name"
+                leftIcon={<UserIcon />}
+              />
+              <ControlledTextField
+                name="username"
+                label="Username"
+                leftIcon={<AtIcon />}
+              />
+              <ControlledTextarea name="bio" label="Headline*" />
+              <ExperienceSelect
+                icon={<TerminalIcon />}
+                name="experienceLevel"
+                placeholder="Experience Level"
+              />
+            </Section>
+            <HorizontalSeparator />
+            <Section>
+              <div className="flex justify-between gap-6">
+                <div className="flex flex-1 flex-col flex-wrap gap-1">
+                  <Typography type={TypographyType.Body} bold>
+                    Verified company badge
+                  </Typography>
+                  <Typography
+                    type={TypographyType.Callout}
+                    color={TypographyColor.Secondary}
+                  >
+                    Add your current work location to keep your profile up to
+                    date and reflect where you&apos;re based
+                  </Typography>
+                </div>
+                <Image
+                  src={locationProfileImage}
+                  alt="Location"
+                  loading="lazy"
+                  className="h-16 w-16"
+                />
+                {/* TODO: Verify this is the actual page path */}
+              </div>
+              <Link href={`${webappUrl}/settings/experience`}>
+                <span className="flex cursor-pointer items-center gap-1 text-text-link">
+                  <PlusIcon />
+                  Add company badge
+                </span>
+              </Link>
+              {/* TODO: Implement company badge from experience when implemented */}
+              <ProfileLocation
+                locationName="locationId"
+                defaultValue={user?.location}
+              />
+            </Section>
+            <HorizontalSeparator />
+            <Section>
+              <div>
+                <Typography type={TypographyType.Body} bold>
+                  About me
+                </Typography>
+                <Typography
+                  type={TypographyType.Callout}
+                  color={TypographyColor.Secondary}
+                >
+                  Write a short introduction that highlights who you are.
+                </Typography>
+              </div>
+              <ControlledMarkdownInput
+                name="readme"
+                textareaProps={{ rows: 10 }}
+              />
+            </Section>
+            <HorizontalSeparator />
+            <Section>
+              <div>
+                <Typography type={TypographyType.Body} bold>
+                  Profile Social Links
+                </Typography>
+                <Typography
+                  type={TypographyType.Callout}
+                  color={TypographyColor.Secondary}
+                >
+                  Add your social media profiles so others can connect with you
+                  and you can grow your network!
+                </Typography>
+              </div>
+              <ControlledTextField
+                name="github"
+                label="GitHub"
+                leftIcon={<GitHubIcon />}
+                placeholder="Username or URL"
+              />
+              <ControlledTextField
+                name="linkedin"
+                label="LinkedIn"
+                leftIcon={<LinkedInIcon />}
+                placeholder="Username or URL"
+              />
+              <ControlledTextField
+                name="portfolio"
+                label="Your Website"
+                leftIcon={<LinkIcon />}
+                placeholder="example.com"
+              />
+              <ControlledTextField
+                name="twitter"
+                label="X"
+                leftIcon={<TwitterIcon />}
+                placeholder="Handle or URL"
+              />
+              <ControlledTextField
+                name="youtube"
+                label="YouTube"
+                leftIcon={<YoutubeIcon />}
+                placeholder="Username or URL"
+              />
+              <ControlledTextField
+                name="stackoverflow"
+                label="Stack Overflow"
+                leftIcon={<StackOverflowIcon />}
+                placeholder="stackoverflow.com/users/999999/username"
+              />
+              <ControlledTextField
+                name="reddit"
+                label="Reddit"
+                leftIcon={<RedditIcon />}
+                placeholder="Username or URL"
+              />
+              <ControlledTextField
+                name="roadmap"
+                label="Roadmap.sh"
+                leftIcon={<RoadmapIcon />}
+                placeholder="Username or URL"
+              />
+              <ControlledTextField
+                name="codepen"
+                label="CodePen"
+                leftIcon={<CodePenIcon />}
+                placeholder="Username or URL"
+              />
+              <ControlledTextField
+                name="mastodon"
+                label="Mastodon"
+                leftIcon={<MastodonIcon />}
+                placeholder="mastodon.social/@username"
+              />
+              <ControlledTextField
+                name="bluesky"
+                label="Bluesky"
+                leftIcon={<BlueskyIcon />}
+                placeholder="bsky.app/profile/username"
+              />
+              <ControlledTextField
+                name="threads"
+                label="Threads"
+                leftIcon={<ThreadsIcon />}
+                placeholder="Handle or URL"
+              />
+            </Section>
           </div>
-        </AccountContentSection>
-        <AccountContentSection title="Account Information">
-          <AccountTextField
-            label="Name"
-            inputId="name"
-            name="name"
-            hint={hint.name}
-            valid={!hint.name}
-            leftIcon={<UserIcon />}
-            value={user?.name}
-          />
-          <AccountTextField
-            label="Username"
-            inputId="username"
-            hint={hint.username}
-            valid={!hint.username}
-            name="username"
-            leftIcon={<AtIcon />}
-            value={user?.username}
-          />
-          <ExperienceLevelDropdown
-            defaultValue={user?.experienceLevel}
-            name="experienceLevel"
-            className={{
-              container: 'mt-6 w-full max-w-sm',
-              button:
-                'hover:shadow-[inset_0.125rem_0_0_var(--theme-text-primary)]',
-            }}
-          />
-        </AccountContentSection>
-        <VerifiedCompanyBadgeSection {...props} />
-        <AccountContentSection title="About">
-          <Textarea
-            label="Bio"
-            inputId="bio"
-            name="bio"
-            rows={5}
-            value={user?.bio}
-            className={{ container: 'mt-6 max-w-sm' }}
-          />
-          <AccountTextField
-            label="Company"
-            inputId="company"
-            name="company"
-            value={user?.company}
-          />
-          <AccountTextField
-            label="Job Title"
-            inputId="title"
-            name="title"
-            value={user?.title}
-          />
-        </AccountContentSection>
-        <AccountContentSection
-          title="Profile Social Links"
-          description="Add your social media profiles so others can connect with you and you
-        can grow your network!"
-        >
-          <AccountTextField
-            leftIcon={<GitHubIcon />}
-            label="GitHub"
-            inputId="github"
-            hint={hint.github}
-            valid={!hint.github}
-            name="github"
-            value={user?.github}
-            placeholder="Username or URL"
-          />
-          <AccountTextField
-            leftIcon={<LinkedInIcon />}
-            label="LinkedIn"
-            inputId="linkedin"
-            hint={hint.linkedin}
-            valid={!hint.linkedin}
-            name="linkedin"
-            value={user?.linkedin}
-            placeholder="Username or URL"
-          />
-          <AccountTextField
-            leftIcon={<LinkIcon />}
-            label="Your Website"
-            inputId="portfolio"
-            hint={hint.portfolio}
-            valid={!hint.portfolio}
-            name="portfolio"
-            value={user?.portfolio}
-            placeholder="example.com"
-          />
-          <AccountTextField
-            leftIcon={<TwitterIcon />}
-            label="X"
-            inputId="twitter"
-            hint={hint.twitter}
-            valid={!hint.twitter}
-            name="twitter"
-            value={user?.twitter}
-            placeholder="Handle or URL"
-          />
-          <AccountTextField
-            leftIcon={<YoutubeIcon />}
-            label="YouTube"
-            inputId="youtube"
-            hint={hint.youtube}
-            valid={!hint.youtube}
-            name="youtube"
-            value={user?.youtube}
-            placeholder="Username or URL"
-          />
-          <AccountTextField
-            leftIcon={<StackOverflowIcon />}
-            label="Stack Overflow"
-            inputId="stackoverflow"
-            hint={hint.stackoverflow}
-            valid={!hint.stackoverflow}
-            name="stackoverflow"
-            value={withPrefix('stackoverflow.com/users/', user?.stackoverflow)}
-            placeholder="stackoverflow.com/users/999999/username"
-          />
-          <AccountTextField
-            leftIcon={<RedditIcon />}
-            label="Reddit"
-            inputId="reddit"
-            hint={hint.reddit}
-            valid={!hint.reddit}
-            name="reddit"
-            value={user?.reddit}
-            placeholder="Username or URL"
-          />
-          <AccountTextField
-            leftIcon={<RoadmapIcon />}
-            label="Roadmap.sh"
-            inputId="roadmap"
-            hint={hint.roadmap}
-            valid={!hint.roadmap}
-            name="roadmap"
-            value={user?.roadmap}
-            placeholder="Username or URL"
-          />
-          <AccountTextField
-            leftIcon={<CodePenIcon />}
-            label="CodePen"
-            inputId="codepen"
-            hint={hint.codepen}
-            valid={!hint.codepen}
-            name="codepen"
-            value={user?.codepen}
-            placeholder="Username or URL"
-          />
-          <AccountTextField
-            leftIcon={<MastodonIcon />}
-            label="Mastodon"
-            inputId="mastodon"
-            hint={hint.mastodon}
-            valid={!hint.mastodon}
-            name="mastodon"
-            value={user?.mastodon}
-            placeholder="mastodon.social/@username"
-          />
-          <AccountTextField
-            leftIcon={<BlueskyIcon />}
-            label="Bluesky"
-            inputId="bluesky"
-            hint={hint.bluesky}
-            valid={!hint.bluesky}
-            name="bluesky"
-            value={user?.bluesky}
-            placeholder="bsky.app/profile/username"
-          />
-          <AccountTextField
-            leftIcon={<ThreadsIcon />}
-            label="Threads"
-            inputId="threads"
-            hint={hint.threads}
-            valid={!hint.threads}
-            name="threads"
-            value={user?.threads}
-            placeholder="Handle or URL"
-          />
-        </AccountContentSection>
+        </AccountPageContainer>
       </form>
-    </ConditionalWrapper>
-  );
-
-  if (isMobile) {
-    return (
-      <FormWrapper
-        className={{
-          container: 'relative max-w-[100vw]',
-          title: 'font-bold typo-title3',
-        }}
-        title="Edit Profile"
-        form="submit-profile"
-        rightButtonProps={{ onClick: onSubmit, disabled: isLoading }}
-        leftButtonProps={{
-          onClick: () => {
-            router.push(user?.permalink ?? '/');
-          },
-        }}
-      >
-        <div className="p-4">{form}</div>
-      </FormWrapper>
-    );
-  }
-
-  return (
-    <AccountPageContainer
-      title="Profile"
-      actions={
-        <>
-          <Button
-            className="ml-auto"
-            variant={ButtonVariant.Primary}
-            size={ButtonSize.Small}
-            onClick={onSubmit}
-            disabled={isLoading}
-          >
-            Save
-          </Button>
-        </>
-      }
-    >
-      {form}
-    </AccountPageContainer>
+    </FormProvider>
   );
 };
 export default ProfileIndex;
diff --git a/packages/webapp/pages/[userId]/index.tsx b/packages/webapp/pages/[userId]/index.tsx
index 7f45909a093..cdc5edce600 100644
--- a/packages/webapp/pages/[userId]/index.tsx
+++ b/packages/webapp/pages/[userId]/index.tsx
@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import type { ProfileReadingData } from '@dailydotdev/shared/src/graphql/users';
 import { USER_READING_HISTORY_QUERY } from '@dailydotdev/shared/src/graphql/users';
@@ -13,12 +13,16 @@ import {
 } from '@dailydotdev/shared/src/lib/query';
 import { Readme } from '@dailydotdev/shared/src/components/profile/Readme';
 import { useProfile } from '@dailydotdev/shared/src/hooks/profile/useProfile';
-import { useJoinReferral } from '@dailydotdev/shared/src/hooks';
+import { useActions, useJoinReferral } from '@dailydotdev/shared/src/hooks';
 import { useReadingStreak } from '@dailydotdev/shared/src/hooks/streaks';
 import { gqlClient } from '@dailydotdev/shared/src/graphql/common';
 import { NextSeo } from 'next-seo';
 import type { NextSeoProps } from 'next-seo/lib/types';
 import dynamic from 'next/dynamic';
+import ProfileHeader from '@dailydotdev/shared/src/components/profile/ProfileHeader';
+import { AutofillProfileBanner } from '@dailydotdev/shared/src/features/profile/components/AutofillProfileBanner';
+import { useUploadCv } from '@dailydotdev/shared/src/features/profile/hooks/useUploadCv';
+import { ActionType } from '@dailydotdev/shared/src/graphql/actions';
 import type { ProfileLayoutProps } from '../../components/layouts/ProfileLayout';
 import {
   getLayout as getProfileLayout,
@@ -42,15 +46,22 @@ const BadgesAndAwards = dynamic(
 const ProfilePage = ({
   user: initialUser,
   noindex,
+  userStats,
 }: ProfileLayoutProps): ReactElement => {
   useJoinReferral();
   const { tokenRefreshed } = useAuthContext();
   const { isStreaksEnabled } = useReadingStreak();
+  const { status, onUpload, shouldShow } = useUploadCv();
+  const { checkHasCompleted } = useActions();
+  const hasClosedBanner = useMemo(
+    () => checkHasCompleted(ActionType.ClosedProfileBanner),
+    [checkHasCompleted],
+  );
 
   const { selectedHistoryYear, before, after, yearOptions, fullHistory } =
     useActivityTimeFilter();
 
-  const { user } = useProfile(initialUser);
+  const { user, isUserSame } = useProfile(initialUser);
 
   const { data: readingHistory, isLoading } = useQuery<ProfileReadingData>({
     queryKey: generateQueryKey(
@@ -76,10 +87,20 @@ const ProfilePage = ({
   const seo: NextSeoProps = {
     ...getProfileSeoDefaults(user, {}, noindex),
   };
+
+  const shouldShowBanner = isUserSame && shouldShow && !hasClosedBanner;
+
   return (
-    <>
+    <div className="rounded-16 border border-border-subtlest-tertiary">
       <NextSeo {...seo} />
-      <div className="flex flex-col gap-6 px-4 py-6 tablet:px-6">
+      <ProfileHeader user={user} userStats={userStats} />
+      <div className="flex flex-col gap-6 p-6">
+        {shouldShowBanner && (
+          <AutofillProfileBanner
+            onUpload={onUpload}
+            isLoading={status === 'pending'}
+          />
+        )}
         <Readme user={user} />
         <BadgesAndAwards user={user} />
         {isStreaksEnabled && readingHistory?.userStreakProfile && (
@@ -104,7 +125,7 @@ const ProfilePage = ({
           </>
         )}
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/packages/webapp/pages/settings/profile.tsx b/packages/webapp/pages/settings/profile.tsx
index 9f483ddcbe1..2c02d701750 100644
--- a/packages/webapp/pages/settings/profile.tsx
+++ b/packages/webapp/pages/settings/profile.tsx
@@ -1,12 +1,8 @@
 import type { ReactElement } from 'react';
-import React, { useState } from 'react';
-import TabContainer, {
-  Tab,
-} from '@dailydotdev/shared/src/components/tabs/TabContainer';
+import React from 'react';
+
 import type { NextSeoProps } from 'next-seo';
-import { AccountSecurityDisplay as Display } from '../../components/layouts/SettingsLayout/common';
 import { getSettingsLayout } from '../../components/layouts/SettingsLayout';
-import VerifyWorkEmail from '../../components/layouts/SettingsLayout/Profile/VerifyWorkEmail';
 import ProfileIndex from '../../components/layouts/SettingsLayout/Profile';
 import { defaultSeo } from '../../next-seo';
 import { getTemplatedTitle } from '../../components/layouts/utils';
@@ -17,26 +13,7 @@ const seo: NextSeoProps = {
 };
 
 const AccountProfilePage = (): ReactElement => {
-  const [activeDisplay, setActiveDisplay] = useState(Display.Default);
-  const [workEmail, setWorkEmail] = useState('');
-
-  return (
-    <TabContainer showHeader={false} controlledActive={activeDisplay}>
-      <Tab label={Display.Default}>
-        <ProfileIndex
-          onSwitchDisplay={setActiveDisplay}
-          workEmail={workEmail}
-          setWorkEmail={setWorkEmail}
-        />
-      </Tab>
-      <Tab label={Display.ChangeEmail}>
-        <VerifyWorkEmail
-          onSwitchDisplay={setActiveDisplay}
-          workEmail={workEmail}
-        />
-      </Tab>
-    </TabContainer>
-  );
+  return <ProfileIndex />;
 };
 
 AccountProfilePage.getLayout = getSettingsLayout;