diff --git a/packages/shared/src/components/CalendarHeatmap.tsx b/packages/shared/src/components/CalendarHeatmap.tsx
index 0e54d3f2f4..2767f4fcc0 100644
--- a/packages/shared/src/components/CalendarHeatmap.tsx
+++ b/packages/shared/src/components/CalendarHeatmap.tsx
@@ -245,7 +245,7 @@ export function CalendarHeatmap<T extends { date: string }>({
 
   return (
     <svg
-      width={width}
+      width="100%"
       viewBox={`0 0 ${width} ${height}`}
       onMouseDown={(e) => e.preventDefault()}
     >
diff --git a/packages/shared/src/components/ExpandableContent.spec.tsx b/packages/shared/src/components/ExpandableContent.spec.tsx
new file mode 100644
index 0000000000..425765a9bc
--- /dev/null
+++ b/packages/shared/src/components/ExpandableContent.spec.tsx
@@ -0,0 +1,184 @@
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { ExpandableContent } from './ExpandableContent';
+import clearAllMocks = jest.clearAllMocks;
+
+describe('ExpandableContent', () => {
+  const shortContent = <div>Short content that fits</div>;
+  const longContent = (
+    <div>
+      <p>Long content paragraph 1</p>
+      <p>Long content paragraph 2</p>
+      <p>Long content paragraph 3</p>
+      <p>Long content paragraph 4</p>
+      <p>Long content paragraph 5</p>
+      <p>Long content paragraph 6</p>
+      <p>Long content paragraph 7</p>
+      <p>Long content paragraph 8</p>
+      <p>Long content paragraph 9</p>
+      <p>Long content paragraph 10</p>
+    </div>
+  );
+
+  beforeEach(() => {
+    // Reset scrollHeight mock before each test
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 100; // Default value
+      },
+    });
+  });
+
+  afterEach(() => {
+    clearAllMocks();
+  });
+
+  it('should render children content', () => {
+    render(<ExpandableContent>{shortContent}</ExpandableContent>);
+    const element = screen.getByText('Short content that fits');
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it('should not show "See More" button when content is short', async () => {
+    // Mock scrollHeight to be less than maxHeight
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 200; // Less than default 320px
+      },
+    });
+
+    render(<ExpandableContent>{shortContent}</ExpandableContent>);
+
+    // Wait a bit for useEffect to run
+    await waitFor(
+      () => {
+        expect(
+          screen.queryByRole('button', { name: /see more/i }),
+        ).not.toBeInTheDocument();
+      },
+      { timeout: 200 },
+    );
+  });
+
+  it('should show "See More" button when content exceeds maxHeight', async () => {
+    // Mock scrollHeight to be more than maxHeight
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 500; // More than default 320px
+      },
+    });
+
+    render(<ExpandableContent>{longContent}</ExpandableContent>);
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /see more/i }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('should expand content when "See More" button is clicked', async () => {
+    // Mock scrollHeight to be more than maxHeight
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 500;
+      },
+    });
+
+    render(
+      <ExpandableContent maxHeight={320}>{longContent}</ExpandableContent>,
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /see more/i }),
+      ).toBeInTheDocument();
+    });
+
+    const seeMoreButton = screen.getByRole('button', { name: /see more/i });
+    fireEvent.click(seeMoreButton);
+
+    // Button should disappear after expansion
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('button', { name: /see more/i }),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it('should show gradient overlay when content is collapsed', async () => {
+    // Mock scrollHeight to be more than maxHeight
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 500;
+      },
+    });
+
+    render(
+      <ExpandableContent maxHeight={320}>{longContent}</ExpandableContent>,
+    );
+
+    // Wait for See More button to appear, which indicates collapsed state
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /see more/i }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('should hide "See More" button when content is expanded', async () => {
+    // Mock scrollHeight to be more than maxHeight
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 500;
+      },
+    });
+
+    render(
+      <ExpandableContent maxHeight={320}>{longContent}</ExpandableContent>,
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /see more/i }),
+      ).toBeInTheDocument();
+    });
+
+    const seeMoreButton = screen.getByRole('button', { name: /see more/i });
+    fireEvent.click(seeMoreButton);
+
+    // Both button and gradient should be hidden after expansion
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('button', { name: /see more/i }),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it('should apply custom maxHeight', async () => {
+    // Mock scrollHeight to exceed custom maxHeight
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 200; // More than 150px
+      },
+    });
+
+    render(
+      <ExpandableContent maxHeight={150}>{longContent}</ExpandableContent>,
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /see more/i }),
+      ).toBeInTheDocument();
+    });
+  });
+});
diff --git a/packages/shared/src/components/ExpandableContent.tsx b/packages/shared/src/components/ExpandableContent.tsx
new file mode 100644
index 0000000000..518a7385e2
--- /dev/null
+++ b/packages/shared/src/components/ExpandableContent.tsx
@@ -0,0 +1,100 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import {
+  Button,
+  ButtonIconPosition,
+  ButtonSize,
+  ButtonVariant,
+} from './buttons/Button';
+import { MoveToIcon } from './icons';
+import { IconSize } from './Icon';
+
+export interface ExpandableContentProps {
+  children: ReactNode;
+  maxHeight?: number; // in pixels
+  className?: string;
+}
+
+const DEFAULT_MAX_HEIGHT = 320; // pixels
+
+export function ExpandableContent({
+  children,
+  maxHeight = DEFAULT_MAX_HEIGHT,
+  className,
+}: ExpandableContentProps): ReactElement {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [showSeeMore, setShowSeeMore] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const element = contentRef.current;
+    if (!element) {
+      return undefined;
+    }
+
+    const checkHeight = () => {
+      const contentHeight = element.scrollHeight;
+      setShowSeeMore(contentHeight > maxHeight);
+    };
+
+    // Wait for browser to complete layout before checking height
+    // Using double RAF ensures the layout is fully calculated
+    const rafId = requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        checkHeight();
+      });
+    });
+
+    // Only use ResizeObserver if there are images (for async loading)
+    const hasImages = element.querySelector('img') !== null;
+    if (!hasImages) {
+      return () => cancelAnimationFrame(rafId);
+    }
+
+    const resizeObserver = new ResizeObserver(checkHeight);
+    resizeObserver.observe(element);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      resizeObserver.disconnect();
+    };
+  }, [maxHeight, children]);
+
+  return (
+    <>
+      <div
+        ref={contentRef}
+        className={classNames(
+          'relative transition-all duration-500 ease-in-out',
+          {
+            'overflow-hidden': !isExpanded,
+          },
+          className,
+        )}
+        style={{
+          maxHeight: !isExpanded ? `${maxHeight}px` : undefined,
+        }}
+      >
+        {children}
+        {!isExpanded && showSeeMore && (
+          <div className="absolute inset-x-0 bottom-0 h-12 bg-gradient-to-b from-transparent to-background-default" />
+        )}
+      </div>
+
+      {showSeeMore && !isExpanded && (
+        <div className="mt-4 flex w-full items-center justify-center">
+          <Button
+            variant={ButtonVariant.Subtle}
+            size={ButtonSize.Medium}
+            onClick={() => setIsExpanded(true)}
+            icon={<MoveToIcon size={IconSize.XSmall} className="rotate-90" />}
+            iconPosition={ButtonIconPosition.Right}
+          >
+            See More
+          </Button>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/packages/shared/src/components/HorizontalScroll/HorizontalScroll.tsx b/packages/shared/src/components/HorizontalScroll/HorizontalScroll.tsx
index d64a48d3c6..c793d03f08 100644
--- a/packages/shared/src/components/HorizontalScroll/HorizontalScroll.tsx
+++ b/packages/shared/src/components/HorizontalScroll/HorizontalScroll.tsx
@@ -23,7 +23,12 @@ function HorizontalScrollComponent(
   const titleId = `horizontal-scroll-title-${id}`;
   const { ref, header } = useHorizontalScrollHeader({
     ...scrollProps,
-    title: { ...scrollProps?.title, id: titleId },
+    title:
+      scrollProps.title &&
+      typeof scrollProps.title === 'object' &&
+      'copy' in scrollProps.title
+        ? { ...scrollProps.title, id: titleId }
+        : scrollProps.title,
   });
 
   return (
diff --git a/packages/shared/src/components/HorizontalScroll/HorizontalScrollHeader.tsx b/packages/shared/src/components/HorizontalScroll/HorizontalScrollHeader.tsx
index ba14c7f308..188959f46a 100644
--- a/packages/shared/src/components/HorizontalScroll/HorizontalScrollHeader.tsx
+++ b/packages/shared/src/components/HorizontalScroll/HorizontalScrollHeader.tsx
@@ -1,8 +1,9 @@
 import type { MouseEventHandler, ReactElement, ReactNode } from 'react';
 import React from 'react';
+import classNames from 'classnames';
 import Link from '../utilities/Link';
 import { Button } from '../buttons/Button';
-import { ButtonVariant } from '../buttons/common';
+import { ButtonSize, ButtonVariant } from '../buttons/common';
 import ConditionalWrapper from '../ConditionalWrapper';
 import { ArrowIcon } from '../icons';
 import { Typography, TypographyType } from '../typography/Typography';
@@ -15,7 +16,7 @@ export interface HorizontalScrollTitleProps {
 }
 
 export interface HorizontalScrollHeaderProps {
-  title: HorizontalScrollTitleProps;
+  title?: HorizontalScrollTitleProps | ReactNode;
   isAtEnd: boolean;
   isAtStart: boolean;
   onClickNext: MouseEventHandler;
@@ -23,6 +24,8 @@ export interface HorizontalScrollHeaderProps {
   onClickSeeAll?: MouseEventHandler;
   linkToSeeAll?: string;
   canScroll: boolean;
+  className?: string;
+  buttonSize?: ButtonSize;
 }
 
 export const HorizontalScrollTitle = ({
@@ -50,10 +53,25 @@ export function HorizontalScrollHeader({
   onClickSeeAll,
   linkToSeeAll,
   canScroll,
+  className,
+  buttonSize = ButtonSize.Medium,
 }: HorizontalScrollHeaderProps): ReactElement {
+  // Check if title is props object or custom ReactNode
+  const isCustomTitle =
+    title && typeof title === 'object' && !('copy' in title);
+
   return (
-    <div className="mx-4 flex min-h-10 w-auto flex-row items-center justify-between laptop:mx-0 laptop:w-full">
-      <HorizontalScrollTitle {...title} />
+    <div
+      className={classNames(
+        'mx-4 flex min-h-10 w-auto flex-row items-center justify-between laptop:mx-0 laptop:w-full',
+        className,
+      )}
+    >
+      {isCustomTitle
+        ? title
+        : title && (
+            <HorizontalScrollTitle {...(title as HorizontalScrollTitleProps)} />
+          )}
       {canScroll && (
         <div className="hidden flex-row items-center gap-3 tablet:flex">
           <Button
@@ -62,6 +80,7 @@ export function HorizontalScrollHeader({
             disabled={isAtStart}
             onClick={onClickPrevious}
             aria-label="Scroll left"
+            size={buttonSize}
           />
           <Button
             variant={ButtonVariant.Tertiary}
@@ -69,6 +88,7 @@ export function HorizontalScrollHeader({
             disabled={isAtEnd}
             onClick={onClickNext}
             aria-label="Scroll right"
+            size={buttonSize}
           />
           {(onClickSeeAll || linkToSeeAll) && (
             <ConditionalWrapper
diff --git a/packages/shared/src/components/HorizontalScroll/useHorizontalScrollHeader.tsx b/packages/shared/src/components/HorizontalScroll/useHorizontalScrollHeader.tsx
index dd7454f55f..c585662135 100644
--- a/packages/shared/src/components/HorizontalScroll/useHorizontalScrollHeader.tsx
+++ b/packages/shared/src/components/HorizontalScroll/useHorizontalScrollHeader.tsx
@@ -1,5 +1,6 @@
 import type { MouseEventHandler, ReactNode, RefObject } from 'react';
 import React, { useCallback, useRef } from 'react';
+import { ButtonSize } from '../buttons/common';
 import { useScrollManagement } from './useScrollManagement';
 import { useCalculateVisibleElements } from './useCalculateVisibleElements';
 import type { HorizontalScrollTitleProps } from './HorizontalScrollHeader';
@@ -21,7 +22,9 @@ export interface UseHorizontalScrollHeaderProps {
   onScroll?: (ref: RefObject<HTMLElement>) => void;
   onClickSeeAll?: MouseEventHandler;
   linkToSeeAll?: string;
-  title: HorizontalScrollTitleProps;
+  title?: HorizontalScrollTitleProps | ReactNode;
+  className?: string;
+  buttonSize?: ButtonSize;
 }
 
 export const useHorizontalScrollHeader = <
@@ -31,6 +34,8 @@ export const useHorizontalScrollHeader = <
   onClickSeeAll,
   linkToSeeAll,
   title,
+  className,
+  buttonSize = ButtonSize.Medium,
 }: UseHorizontalScrollHeaderProps): HorizontalScrollHeaderReturn<El> => {
   const ref = useRef<El>(null);
   // Calculate the width of elements and the number of visible cards
@@ -70,6 +75,8 @@ export const useHorizontalScrollHeader = <
       onClickPrevious={onClickPrevious}
       onClickSeeAll={onClickSeeAll}
       linkToSeeAll={linkToSeeAll}
+      className={className}
+      buttonSize={buttonSize}
     />
   );
 
diff --git a/packages/shared/src/components/ProgressCircle.tsx b/packages/shared/src/components/ProgressCircle.tsx
index 70d956b7d3..4f75430f9f 100644
--- a/packages/shared/src/components/ProgressCircle.tsx
+++ b/packages/shared/src/components/ProgressCircle.tsx
@@ -2,12 +2,18 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import { VIcon } from './icons';
 import { IconSize } from './Icon';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from './typography/Typography';
 
 type ProgressCircleProps = {
   progress: number;
   size?: number;
   color?: string;
   stroke?: number;
+  showPercentage?: boolean;
 };
 
 const ProgressCircle = ({
@@ -15,6 +21,7 @@ const ProgressCircle = ({
   size = 40,
   stroke = 5,
   color = '#b259f8',
+  showPercentage = false,
 }: ProgressCircleProps): ReactElement => {
   const normalizedCompletion = Math.min(100, Math.max(0, progress));
   const isComplete = normalizedCompletion >= 100;
@@ -24,42 +31,54 @@ const ProgressCircle = ({
 
   return (
     <div
-      className="inline-flex size-10 items-center justify-center"
+      className="relative inline-flex size-10 items-center justify-center"
       style={{ width: size, height: size }}
     >
       {isComplete ? (
         <VIcon size={IconSize.Medium} className="text-brand-default" />
       ) : (
-        <svg
-          width={size}
-          height={size}
-          viewBox={`0 0 ${size} ${size}`}
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle
-            cx={size / 2}
-            cy={size / 2}
-            r={radius}
-            className="stroke-border-subtlest-tertiary"
-            strokeWidth={stroke}
-            fill="transparent"
-          />
+        <>
+          <svg
+            width={size}
+            height={size}
+            viewBox={`0 0 ${size} ${size}`}
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle
+              cx={size / 2}
+              cy={size / 2}
+              r={radius}
+              className="stroke-border-subtlest-tertiary"
+              strokeWidth={stroke}
+              fill="transparent"
+            />
 
-          <circle
-            cx={size / 2}
-            cy={size / 2}
-            r={radius}
-            stroke={color}
-            strokeWidth={stroke}
-            strokeLinecap="round"
-            strokeDasharray={circumference}
-            strokeDashoffset={strokeDashoffset}
-            transform={`rotate(-90 ${size / 2} ${size / 2})`}
-            fill="transparent"
-            className="stroke-brand-default"
-          />
-        </svg>
+            <circle
+              cx={size / 2}
+              cy={size / 2}
+              r={radius}
+              stroke={color}
+              strokeWidth={stroke}
+              strokeLinecap="round"
+              strokeDasharray={circumference}
+              strokeDashoffset={strokeDashoffset}
+              transform={`rotate(-90 ${size / 2} ${size / 2})`}
+              fill="transparent"
+              className="stroke-brand-default"
+            />
+          </svg>
+          {showPercentage && (
+            <Typography
+              bold
+              color={TypographyColor.Brand}
+              type={TypographyType.Callout}
+              className="absolute leading-none"
+            >
+              {Math.round(normalizedCompletion)}%
+            </Typography>
+          )}
+        </>
       )}
     </div>
   );
diff --git a/packages/shared/src/components/VerifiedCompanyUserBadge.tsx b/packages/shared/src/components/VerifiedCompanyUserBadge.tsx
index 6af924dbdb..c851c3ec64 100644
--- a/packages/shared/src/components/VerifiedCompanyUserBadge.tsx
+++ b/packages/shared/src/components/VerifiedCompanyUserBadge.tsx
@@ -15,6 +15,10 @@ export type VerifiedCompanyUserBadgeProps = {
   size?: ProfileImageSize;
   showCompanyName?: boolean;
   showVerified?: boolean;
+  companyNameTypography?: {
+    type: TypographyType;
+    color?: TypographyColor;
+  };
 };
 
 export const VerifiedCompanyUserBadge = ({
@@ -22,6 +26,7 @@ export const VerifiedCompanyUserBadge = ({
   size = ProfileImageSize.Size16,
   showCompanyName,
   showVerified,
+  companyNameTypography,
 }: VerifiedCompanyUserBadgeProps): ReactElement => {
   const { isVerified } = useUserCompaniesQuery();
   const { companies } = user;
@@ -54,8 +59,8 @@ export const VerifiedCompanyUserBadge = ({
         />
         {showCompanyName && (
           <Typography
-            type={TypographyType.Footnote}
-            color={TypographyColor.Secondary}
+            type={companyNameTypography?.type}
+            color={companyNameTypography?.color || TypographyColor.Secondary}
           >
             {companies[0].name}
           </Typography>
diff --git a/packages/shared/src/components/cards/squad/SquadsDirectoryFeed.tsx b/packages/shared/src/components/cards/squad/SquadsDirectoryFeed.tsx
index 62e7aac9b5..db8888e82b 100644
--- a/packages/shared/src/components/cards/squad/SquadsDirectoryFeed.tsx
+++ b/packages/shared/src/components/cards/squad/SquadsDirectoryFeed.tsx
@@ -4,7 +4,10 @@ import { useInView } from 'react-intersection-observer';
 import { useQuery } from '@tanstack/react-query';
 import type { Squad } from '../../../graphql/sources';
 import type { SourcesQueryProps } from '../../../hooks/source/useSources';
-import { useSources } from '../../../hooks/source/useSources';
+import {
+  useSources,
+  getFlatteredNodes,
+} from '../../../hooks/source/useSources';
 import HorizontalScroll from '../../HorizontalScroll/HorizontalScroll';
 import { UnfeaturedSquadGrid } from './UnfeaturedSquadGrid';
 import { SourceCardBorderColor, SquadGrid } from './SquadGrid';
@@ -106,7 +109,7 @@ export function SquadsDirectoryFeed({
   });
   const { squad: squadAd } = useSquad({ handle: ad?.data?.source?.handle });
   const flatSources = useMemo(() => {
-    const map = result.data?.pages.flatMap((page) => page.sources.edges) ?? [];
+    const map = getFlatteredNodes(result);
 
     if (firstItemShouldBeAd && squadAd) {
       const index = map.findIndex(({ node }) => node.id === squadAd.id);
@@ -119,7 +122,7 @@ export function SquadsDirectoryFeed({
     }
 
     return map;
-  }, [result.data?.pages, firstItemShouldBeAd, squadAd]);
+  }, [result, firstItemShouldBeAd, squadAd]);
 
   if (flatSources.length === 0 && isFetched) {
     return null;
diff --git a/packages/shared/src/components/fields/Autocomplete.tsx b/packages/shared/src/components/fields/Autocomplete.tsx
new file mode 100644
index 0000000000..131761186f
--- /dev/null
+++ b/packages/shared/src/components/fields/Autocomplete.tsx
@@ -0,0 +1,158 @@
+import { Popover, PopoverAnchor } from '@radix-ui/react-popover';
+import React, { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import type { TextFieldProps } from './TextField';
+import { TextField } from './TextField';
+import { PopoverContent } from '../popover/Popover';
+import { Typography, TypographyType } from '../typography/Typography';
+import { GenericLoaderSpinner } from '../utilities/loaders';
+import { IconSize } from '../Icon';
+import { Image } from '../image/Image';
+
+type AutocompleteOption = { value: string; label: string; image?: string };
+
+interface AutocompleteProps
+  extends Omit<TextFieldProps, 'inputId' | 'onChange' | 'onSelect'> {
+  name: string;
+  onChange: (value: string) => void;
+  onSelect: (value: string) => void;
+  selectedValue?: string;
+  options: Array<AutocompleteOption>;
+  isLoading: boolean;
+  resetOnBlur?: boolean;
+}
+
+const Autocomplete = ({
+  name,
+  isLoading,
+  options,
+  label,
+  onChange,
+  onSelect,
+  selectedValue,
+  defaultValue,
+  resetOnBlur = true,
+  ...restProps
+}: AutocompleteProps) => {
+  const [input, setInput] = useState(defaultValue || '');
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [selectedOption, setSelectedOption] = useState(undefined);
+
+  /* 
+   To prevent flickering of the selected option image as the user types.
+   We want to set the selected option only when the selected value changes or the user clears the selected value.
+  */
+  useEffect(() => {
+    if (!selectedValue) {
+      setSelectedOption(undefined);
+      return;
+    }
+    if (selectedOption?.value !== selectedValue) {
+      setSelectedOption(options.find((opt) => opt.value === selectedValue));
+    }
+  }, [selectedValue, options, selectedOption]);
+
+  const handleChange = (val: string) => {
+    setInput(val);
+    onChange(val);
+  };
+
+  const handleSelect = (opt: AutocompleteOption) => {
+    setInput(opt.label);
+    onSelect(opt.value);
+    setIsFocused(false);
+    inputRef.current?.focus();
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+    if (resetOnBlur) {
+      setInput(options.find((opt) => opt.value === selectedValue)?.label || '');
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Typography type={TypographyType.Callout} bold>
+        {label}
+      </Typography>
+      <Popover open={isFocused && (isLoading || options.length > 0)}>
+        <PopoverAnchor asChild>
+          <TextField
+            leftIcon={
+              selectedOption?.image ? (
+                <Image
+                  className="size-6 rounded-full"
+                  src={selectedOption.image}
+                  alt={selectedValue}
+                />
+              ) : undefined
+            }
+            label={label}
+            inputRef={(ref) => {
+              inputRef.current = ref;
+            }}
+            inputId={name}
+            {...restProps}
+            onChange={(e) => {
+              handleChange(e.target.value);
+              setIsFocused(true);
+            }}
+            onFocus={() => setIsFocused(true)}
+            onBlur={handleBlur}
+            value={input}
+            autoComplete="off"
+          />
+        </PopoverAnchor>
+        <PopoverContent
+          className="rounded-16 border border-border-subtlest-tertiary bg-background-popover 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(
+                      'flex flex-row items-center gap-2 px-4 py-2 text-left hover:bg-surface-hover',
+                      selectedValue === opt.value &&
+                        'font-bold hover:bg-surface-hover',
+                    )}
+                    key={opt.value}
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      handleSelect(opt);
+                    }}
+                  >
+                    {opt?.image && (
+                      <Image
+                        className="size-6 rounded-full"
+                        src={opt.image}
+                        alt={opt.label}
+                      />
+                    )}
+                    {opt.label}
+                  </button>
+                ))
+              ) : (
+                <div className="px-4 py-2">
+                  <Typography>No results</Typography>
+                </div>
+              )}
+            </div>
+          ) : (
+            <GenericLoaderSpinner className="mx-auto" size={IconSize.Small} />
+          )}
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
+
+export default Autocomplete;
diff --git a/packages/shared/src/components/fields/ControlledSwitch.tsx b/packages/shared/src/components/fields/ControlledSwitch.tsx
new file mode 100644
index 0000000000..f0721f6ed4
--- /dev/null
+++ b/packages/shared/src/components/fields/ControlledSwitch.tsx
@@ -0,0 +1,63 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import React from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../typography/Typography';
+import { Switch } from './Switch';
+
+type ControlledSwitchProps = {
+  name: string;
+  label: string;
+  description?: string | React.ReactNode;
+  disabled?: boolean;
+  onChange?: (value: boolean) => void;
+};
+
+const ControlledSwitch = ({
+  name,
+  label,
+  description,
+  disabled,
+  onChange,
+}: ControlledSwitchProps) => {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <div className="flex flex-col gap-1">
+          <div className="flex flex-row justify-between gap-3">
+            <Typography bold type={TypographyType.Body}>
+              {label}
+            </Typography>
+            <Switch
+              inputId={field.name}
+              name={field.name}
+              checked={field.value ?? false}
+              onToggle={() => {
+                field.onChange(!field.value);
+                onChange?.(!field.value);
+              }}
+              compact={false}
+              disabled={disabled}
+            />
+          </div>
+          {description && (
+            <Typography
+              color={TypographyColor.Tertiary}
+              type={TypographyType.Footnote}
+            >
+              {description}
+            </Typography>
+          )}
+        </div>
+      )}
+    />
+  );
+};
+
+export default ControlledSwitch;
diff --git a/packages/shared/src/components/fields/ControlledTextField.tsx b/packages/shared/src/components/fields/ControlledTextField.tsx
new file mode 100644
index 0000000000..b07493c322
--- /dev/null
+++ b/packages/shared/src/components/fields/ControlledTextField.tsx
@@ -0,0 +1,40 @@
+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'
+  | 'fieldType'
+  | 'className'
+>;
+
+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 0000000000..c0275e0047
--- /dev/null
+++ b/packages/shared/src/components/fields/ControlledTextarea.tsx
@@ -0,0 +1,31 @@
+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' | 'maxLength'
+>) => {
+  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 0000000000..8ebf1d4832
--- /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 0000000000..ee18d3cd04
--- /dev/null
+++ b/packages/shared/src/components/fields/Select.tsx
@@ -0,0 +1,76 @@
+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'>;
+  onSelect?: (value: string) => void;
+};
+
+const Select = ({
+  name,
+  options,
+  placeholder,
+  icon,
+  buttonProps,
+  onSelect,
+}: SelectProps) => {
+  const { control, setValue } = useFormContext();
+
+  const menuItems: MenuItemProps[] = options.map((opt) => {
+    return {
+      label: opt.label,
+      action: () => {
+        setValue(name, opt.value);
+        onSelect?.(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?.toString())
+                  ?.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/icons/Graduation/filled.svg b/packages/shared/src/components/icons/Graduation/filled.svg
new file mode 100644
index 0000000000..e48e764186
--- /dev/null
+++ b/packages/shared/src/components/icons/Graduation/filled.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.76444 4.21549C9.91569 4.15059 10.0868 4.15058 10.2381 4.21549L17.9708 7.17773C18.4554 7.38606 18.4556 8.07387 17.9708 8.28205L15.2128 9.34244L15.6694 13.466C15.7374 13.9781 15.4799 14.4791 15.0232 14.7209L14.7107 14.8861C11.9968 16.3226 8.76081 16.2982 6.0828 14.8608C6.05686 15.373 5.71397 15.5352 5.29749 15.5045C4.8175 15.4664 4.23074 15.1279 3.71708 14.6142C3.20349 14.1006 2.86482 13.5138 2.82678 13.0338C2.79178 12.5569 3.01021 12.1755 3.71708 12.2575C3.89679 12.3221 4.06903 12.3579 4.22815 12.3673C4.70944 12.3982 5.0692 12.1693 5.18437 11.8367C5.35884 11.3458 5.42719 10.7864 5.45374 10.201C5.45982 10.0093 5.49038 9.81784 5.54244 9.63134L2.0317 8.28205C1.57717 8.08687 1.54858 7.47036 1.94625 7.22248L2.0317 7.17773L9.76444 4.21549ZM6.72082 10.0846C6.71087 10.1416 6.70422 10.1995 6.70211 10.258C6.67183 10.9006 6.60024 11.5813 6.36275 12.2542C6.23906 12.6017 6.18331 12.9843 6.14547 13.4513C6.50319 13.6804 6.87559 13.8774 7.25793 14.0438C8.27836 14.6168 9.16787 11.6667 8.7512 10.8333C8.7512 10.8333 8.17849 10.6591 7.82922 10.5111L6.72082 10.0846ZM4.08166 7.7303L6.17069 8.53352C6.43406 8.26057 6.75964 8.04622 7.13098 7.92724L9.11096 7.26724C9.24152 7.22372 9.37266 7.17974 9.50321 7.13622C9.66026 7.08395 9.83201 7.09649 9.9801 7.1704C10.1282 7.24445 10.2409 7.37472 10.2934 7.53173C10.3458 7.68875 10.3339 7.86051 10.2601 8.00862C10.1859 8.15688 10.0552 8.27033 9.89791 8.32274C9.76751 8.36621 9.63687 8.40949 9.50647 8.45295L7.60624 9.08609L10.0013 10.0073L15.92 7.7303L10.0013 5.46223L4.08166 7.7303Z" fill="currentColor"/>
+</svg>
+
diff --git a/packages/shared/src/components/icons/Graduation/index.tsx b/packages/shared/src/components/icons/Graduation/index.tsx
new file mode 100644
index 0000000000..8d9fcaec8b
--- /dev/null
+++ b/packages/shared/src/components/icons/Graduation/index.tsx
@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
+
+export const GraduationIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);
diff --git a/packages/shared/src/components/icons/Graduation/outlined.svg b/packages/shared/src/components/icons/Graduation/outlined.svg
new file mode 100644
index 0000000000..6b345649f2
--- /dev/null
+++ b/packages/shared/src/components/icons/Graduation/outlined.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.76442 4.21543C9.91567 4.15052 10.0868 4.15052 10.238 4.21543L17.9708 7.17767C18.4555 7.38597 18.4556 8.07381 17.9708 8.282L15.2128 9.34238L15.6694 13.4659C15.7374 13.9781 15.4799 14.479 15.0232 14.7208L14.7107 14.886C11.9968 16.3226 8.76077 16.2982 6.08278 14.8608C6.05684 15.373 5.71394 15.5351 5.29746 15.5045C4.81749 15.4664 4.23069 15.1278 3.71705 14.6142C3.20349 14.1005 2.86479 13.5137 2.82675 13.0338C2.79176 12.5569 3.01025 12.1755 3.71705 12.2574C3.89674 12.322 4.06902 12.3579 4.22812 12.3673C4.70941 12.3981 5.06917 12.1692 5.18434 11.8367C5.35881 11.3457 5.42716 10.7863 5.45371 10.2009C5.45978 10.0096 5.49048 9.81836 5.54241 9.6321L2.03167 8.282C1.57716 8.08682 1.54861 7.47032 1.94622 7.22243L2.03167 7.17767L9.76442 4.21543ZM10.0012 11.3468L6.7208 10.0846C6.71085 10.1415 6.70419 10.1994 6.70208 10.2579C6.67181 10.9005 6.60021 11.5812 6.36272 12.2542C6.23903 12.6017 6.18328 12.9843 6.14544 13.4513C8.55092 14.9919 11.6003 15.1175 14.1256 13.7809L14.4291 13.6197L14.0068 9.80625L10.0012 11.3468ZM4.08164 7.73024L6.17067 8.53346C6.43402 8.26052 6.75962 8.04617 7.13095 7.92718L9.11093 7.26719C9.24147 7.22368 9.37265 7.17968 9.50319 7.13617C9.66021 7.0839 9.832 7.09646 9.98007 7.17035C10.1282 7.24439 10.2409 7.37468 10.2934 7.53167C10.3457 7.6887 10.3339 7.86045 10.26 8.00856C10.1859 8.15682 10.0551 8.27027 9.89788 8.32269C9.7675 8.36615 9.63682 8.40944 9.50644 8.4529L7.60621 9.08604L10.0012 10.0073L15.92 7.73024L10.0012 5.46217L4.08164 7.73024Z" fill="currentColor"/>
+</svg>
diff --git a/packages/shared/src/components/icons/Medal/filled.svg b/packages/shared/src/components/icons/Medal/filled.svg
new file mode 100644
index 0000000000..f821350b46
--- /dev/null
+++ b/packages/shared/src/components/icons/Medal/filled.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.50006 9.5C5.50006 5.91015 8.41021 3 12.0001 3C15.5899 3 18.5001 5.91015 18.5001 9.5C18.5001 10.6722 18.1898 11.7719 17.6469 12.7214L19.7294 16.3284C20.5603 17.7675 19.3575 19.5287 17.7147 19.2785L17.3553 19.2238C17.2244 19.2039 17.0972 19.2773 17.049 19.4007L16.9167 19.7392C16.312 21.287 14.1854 21.448 13.3545 20.0089L11.9998 17.6624L10.645 20.0089C9.81414 21.448 7.68749 21.287 7.08276 19.7392L6.9505 19.4007C6.90232 19.2773 6.77507 19.2039 6.64417 19.2238L6.28486 19.2785C4.64203 19.5287 3.43926 17.7675 4.27015 16.3284L6.35291 12.7209C5.81021 11.7714 5.50006 10.6719 5.50006 9.5ZM12.9607 15.9295L14.8256 19.1595C14.9443 19.3651 15.2481 19.3421 15.3345 19.121L15.4668 18.7825C15.8041 17.9191 16.6948 17.4049 17.6111 17.5444L17.9704 17.5992C18.2051 17.6349 18.3769 17.3833 18.2582 17.1777L16.5216 14.1697C15.569 15.0922 14.335 15.7259 12.9607 15.9295ZM7.47817 14.1693C8.43068 15.0919 9.66464 15.7257 11.0388 15.9294L9.1739 19.1595C9.0552 19.3651 8.75139 19.3421 8.665 19.121L8.53274 18.7825C8.19543 17.9191 7.30475 17.4049 6.3884 17.5444L6.02909 17.5992C5.7944 17.6349 5.62257 17.3833 5.74127 17.1777L7.47817 14.1693Z"/>
+</svg>
diff --git a/packages/shared/src/components/icons/Medal/index.tsx b/packages/shared/src/components/icons/Medal/index.tsx
new file mode 100644
index 0000000000..7bd0e7ed4b
--- /dev/null
+++ b/packages/shared/src/components/icons/Medal/index.tsx
@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
+
+export const MedalIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);
diff --git a/packages/shared/src/components/icons/Medal/outlined.svg b/packages/shared/src/components/icons/Medal/outlined.svg
new file mode 100644
index 0000000000..a6d9d862e5
--- /dev/null
+++ b/packages/shared/src/components/icons/Medal/outlined.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.50006 9.5C5.50006 5.91015 8.41021 3 12.0001 3C15.5899 3 18.5001 5.91015 18.5001 9.5C18.5001 10.6722 18.1898 11.7719 17.6469 12.7214L19.7294 16.3284C20.5603 17.7675 19.3575 19.5287 17.7147 19.2785L17.3553 19.2238C17.2244 19.2039 17.0972 19.2773 17.049 19.4007L16.9167 19.7392C16.312 21.287 14.1854 21.448 13.3545 20.0089L11.9998 17.6624L10.645 20.0089C9.81414 21.448 7.68749 21.287 7.08276 19.7392L6.9505 19.4007C6.90232 19.2773 6.77507 19.2039 6.64417 19.2238L6.28486 19.2785C4.64203 19.5287 3.43926 17.7675 4.27015 16.3284L6.35291 12.7209C5.81021 11.7714 5.50006 10.6719 5.50006 9.5ZM12.0001 4.69565C9.34669 4.69565 7.19571 6.84663 7.19571 9.5C7.19571 12.1534 9.34669 14.3043 12.0001 14.3043C14.6534 14.3043 16.8044 12.1534 16.8044 9.5C16.8044 6.84663 14.6534 4.69565 12.0001 4.69565ZM12.9607 15.9295L14.8256 19.1595C14.9443 19.3651 15.2481 19.3421 15.3345 19.121L15.4668 18.7825C15.8041 17.9191 16.6948 17.4049 17.6111 17.5444L17.9704 17.5992C18.2051 17.6349 18.3769 17.3833 18.2582 17.1777L16.5216 14.1697C15.569 15.0922 14.335 15.7259 12.9607 15.9295ZM7.47817 14.1693C8.43068 15.0919 9.66464 15.7257 11.0388 15.9294L9.1739 19.1595C9.0552 19.3651 8.75139 19.3421 8.665 19.121L8.53274 18.7825C8.19543 17.9191 7.30475 17.4049 6.3884 17.5444L6.02909 17.5992C5.7944 17.6349 5.62257 17.3833 5.74127 17.1777L7.47817 14.1693Z"/>
+</svg>
diff --git a/packages/shared/src/components/icons/Volunteering/filled.svg b/packages/shared/src/components/icons/Volunteering/filled.svg
new file mode 100644
index 0000000000..dc20b87313
--- /dev/null
+++ b/packages/shared/src/components/icons/Volunteering/filled.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.042 5.83301C16.8287 5.82541 17.516 6.2906 17.5 7.22363V13.667C17.5 15.3236 16.1566 16.667 14.5 16.667H13.126C12.7809 16.667 12.5012 16.387 12.501 16.042C12.501 15.6968 12.7808 15.417 13.126 15.417H14.6436C15.5309 15.417 16.2501 14.6969 16.25 13.8096V7.28809C16.25 7.24257 16.2288 7.17668 16.1924 7.14941C16.1003 7.0806 15.9973 7.14221 15.9248 7.23145L15.8828 7.2832C15.8533 7.31958 15.8309 7.35852 15.8145 7.40234C15.6378 7.87371 14.532 10.8188 13.9268 12.3896C13.8598 12.6387 13.7399 12.8863 13.5674 13.124C13.3647 13.4034 12.9737 13.4654 12.6943 13.2627C12.415 13.06 12.353 12.669 12.5557 12.3896C12.7371 12.1394 12.7452 11.9832 12.7363 11.917C12.7274 11.8511 12.6905 11.7859 12.6104 11.7305C12.3246 11.4943 12.1664 11.6251 12.0322 11.7725L10.8389 13.6328C10.7164 13.7907 10.6426 13.9807 10.625 14.1797V16.042C10.625 16.3868 10.3457 16.6669 10.001 16.667L10 16.666L9.99902 16.667C9.65438 16.6667 9.375 16.3867 9.375 16.042V14.1797C9.35738 13.9807 9.28366 13.7907 9.16113 13.6328L7.96777 11.7725C7.83358 11.6251 7.67537 11.4943 7.38965 11.7305C7.30957 11.7859 7.27357 11.8512 7.26465 11.917C7.25577 11.9832 7.26284 12.1394 7.44434 12.3896C7.64704 12.669 7.58505 13.06 7.30566 13.2627C7.02628 13.4653 6.6353 13.4034 6.43262 13.124C6.25901 12.8847 6.13794 12.6355 6.07129 12.3848C5.46559 10.8127 4.36302 7.87321 4.18652 7.40234C4.17003 7.35841 4.14677 7.31965 4.11719 7.2832L4.0752 7.23145C4.00268 7.14227 3.89971 7.08063 3.80762 7.14941C3.77124 7.17674 3.75 7.24263 3.75 7.28809V13.8096C3.74993 14.6969 4.46913 15.417 5.35645 15.417H6.87402C7.2192 15.417 7.49902 15.6968 7.49902 16.042C7.49881 16.387 7.21907 16.667 6.87402 16.667H5.5C3.84337 16.667 2.49998 15.3236 2.5 13.667V7.22363C2.48401 6.2907 3.17137 5.8255 3.95801 5.83301C4.99191 5.84306 5.35017 6.94926 5.35547 6.96582C5.35547 6.96582 6.1023 8.96199 6.74609 10.6592C7.35927 10.2708 8.12381 10.2673 8.9248 10.9688C9.29631 11.4032 9.76564 12.1999 10 12.6094C10.2343 12.1999 10.7037 11.4032 11.0752 10.9688C11.8758 10.2676 12.6399 10.2713 13.2529 10.6592C13.8968 8.9619 14.6445 6.96582 14.6445 6.96582C14.6488 6.95243 15.0066 5.84308 16.042 5.83301ZM10.1367 3.66113C11.0174 3.13122 12.1759 3.2433 12.9355 4.00293C13.8301 4.89781 13.8302 6.34827 12.9355 7.24316L11.168 9.01074C10.5985 9.58026 9.67498 9.58026 9.10547 9.01074L8.81055 8.71582C8.75781 8.66305 8.70941 8.60829 8.66309 8.55371C8.61538 8.51385 8.5653 8.47055 8.5166 8.42188L7.33789 7.24316C6.44307 6.34825 6.44309 4.89786 7.33789 4.00293C8.09751 3.24336 9.25599 3.13123 10.1367 3.66113Z" fill="currentColor"/>
+</svg>
diff --git a/packages/shared/src/components/icons/Volunteering/index.tsx b/packages/shared/src/components/icons/Volunteering/index.tsx
new file mode 100644
index 0000000000..25931a9df9
--- /dev/null
+++ b/packages/shared/src/components/icons/Volunteering/index.tsx
@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
+
+export const VolunteeringIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);
diff --git a/packages/shared/src/components/icons/Volunteering/outlined.svg b/packages/shared/src/components/icons/Volunteering/outlined.svg
new file mode 100644
index 0000000000..dc20b87313
--- /dev/null
+++ b/packages/shared/src/components/icons/Volunteering/outlined.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.042 5.83301C16.8287 5.82541 17.516 6.2906 17.5 7.22363V13.667C17.5 15.3236 16.1566 16.667 14.5 16.667H13.126C12.7809 16.667 12.5012 16.387 12.501 16.042C12.501 15.6968 12.7808 15.417 13.126 15.417H14.6436C15.5309 15.417 16.2501 14.6969 16.25 13.8096V7.28809C16.25 7.24257 16.2288 7.17668 16.1924 7.14941C16.1003 7.0806 15.9973 7.14221 15.9248 7.23145L15.8828 7.2832C15.8533 7.31958 15.8309 7.35852 15.8145 7.40234C15.6378 7.87371 14.532 10.8188 13.9268 12.3896C13.8598 12.6387 13.7399 12.8863 13.5674 13.124C13.3647 13.4034 12.9737 13.4654 12.6943 13.2627C12.415 13.06 12.353 12.669 12.5557 12.3896C12.7371 12.1394 12.7452 11.9832 12.7363 11.917C12.7274 11.8511 12.6905 11.7859 12.6104 11.7305C12.3246 11.4943 12.1664 11.6251 12.0322 11.7725L10.8389 13.6328C10.7164 13.7907 10.6426 13.9807 10.625 14.1797V16.042C10.625 16.3868 10.3457 16.6669 10.001 16.667L10 16.666L9.99902 16.667C9.65438 16.6667 9.375 16.3867 9.375 16.042V14.1797C9.35738 13.9807 9.28366 13.7907 9.16113 13.6328L7.96777 11.7725C7.83358 11.6251 7.67537 11.4943 7.38965 11.7305C7.30957 11.7859 7.27357 11.8512 7.26465 11.917C7.25577 11.9832 7.26284 12.1394 7.44434 12.3896C7.64704 12.669 7.58505 13.06 7.30566 13.2627C7.02628 13.4653 6.6353 13.4034 6.43262 13.124C6.25901 12.8847 6.13794 12.6355 6.07129 12.3848C5.46559 10.8127 4.36302 7.87321 4.18652 7.40234C4.17003 7.35841 4.14677 7.31965 4.11719 7.2832L4.0752 7.23145C4.00268 7.14227 3.89971 7.08063 3.80762 7.14941C3.77124 7.17674 3.75 7.24263 3.75 7.28809V13.8096C3.74993 14.6969 4.46913 15.417 5.35645 15.417H6.87402C7.2192 15.417 7.49902 15.6968 7.49902 16.042C7.49881 16.387 7.21907 16.667 6.87402 16.667H5.5C3.84337 16.667 2.49998 15.3236 2.5 13.667V7.22363C2.48401 6.2907 3.17137 5.8255 3.95801 5.83301C4.99191 5.84306 5.35017 6.94926 5.35547 6.96582C5.35547 6.96582 6.1023 8.96199 6.74609 10.6592C7.35927 10.2708 8.12381 10.2673 8.9248 10.9688C9.29631 11.4032 9.76564 12.1999 10 12.6094C10.2343 12.1999 10.7037 11.4032 11.0752 10.9688C11.8758 10.2676 12.6399 10.2713 13.2529 10.6592C13.8968 8.9619 14.6445 6.96582 14.6445 6.96582C14.6488 6.95243 15.0066 5.84308 16.042 5.83301ZM10.1367 3.66113C11.0174 3.13122 12.1759 3.2433 12.9355 4.00293C13.8301 4.89781 13.8302 6.34827 12.9355 7.24316L11.168 9.01074C10.5985 9.58026 9.67498 9.58026 9.10547 9.01074L8.81055 8.71582C8.75781 8.66305 8.70941 8.60829 8.66309 8.55371C8.61538 8.51385 8.5653 8.47055 8.5166 8.42188L7.33789 7.24316C6.44307 6.34825 6.44309 4.89786 7.33789 4.00293C8.09751 3.24336 9.25599 3.13123 10.1367 3.66113Z" fill="currentColor"/>
+</svg>
diff --git a/packages/shared/src/components/modals/DirtyFormModal.tsx b/packages/shared/src/components/modals/DirtyFormModal.tsx
new file mode 100644
index 0000000000..88e9111e30
--- /dev/null
+++ b/packages/shared/src/components/modals/DirtyFormModal.tsx
@@ -0,0 +1,85 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { LazyModalCommonProps } from './common/Modal';
+import { Modal } from './common/Modal';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../typography/Typography';
+import { useLazyModal } from '../../hooks/useLazyModal';
+
+interface DirtyFormModalProps extends LazyModalCommonProps {
+  onDiscard: () => void;
+  onSave: () => void;
+}
+
+export default function DirtyFormModal({
+  isOpen,
+  onRequestClose,
+  onDiscard,
+  onSave,
+}: DirtyFormModalProps): ReactElement {
+  const { closeModal } = useLazyModal();
+
+  const handleSave = () => {
+    if (onSave) {
+      onSave();
+    }
+    closeModal();
+  };
+
+  const handleDiscard = () => {
+    onDiscard();
+    closeModal();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      kind={Modal.Kind.FlexibleCenter}
+      size={Modal.Size.Small}
+      shouldCloseOnOverlayClick
+      isDrawerOnMobile
+      drawerProps={{ displayCloseButton: false }}
+    >
+      <Modal.Body className="gap-6 text-center">
+        <div className="flex flex-col gap-4">
+          <Typography
+            type={TypographyType.Title3}
+            color={TypographyColor.Primary}
+            bold
+          >
+            Discard changes?
+          </Typography>
+          <Typography
+            type={TypographyType.Body}
+            color={TypographyColor.Tertiary}
+          >
+            You have unsaved changes that will be lost
+          </Typography>
+        </div>
+        <div className="flex w-full items-center justify-center gap-4">
+          <Button
+            className="flex-1"
+            variant={ButtonVariant.Secondary}
+            size={ButtonSize.Medium}
+            onClick={handleDiscard}
+          >
+            Discard
+          </Button>
+          <Button
+            className="flex-1"
+            variant={ButtonVariant.Primary}
+            size={ButtonSize.Medium}
+            onClick={handleSave}
+          >
+            Save changes
+          </Button>
+        </div>
+      </Modal.Body>
+    </Modal>
+  );
+}
diff --git a/packages/shared/src/components/modals/common.tsx b/packages/shared/src/components/modals/common.tsx
index 1d39f69c66..ba42dac4dc 100644
--- a/packages/shared/src/components/modals/common.tsx
+++ b/packages/shared/src/components/modals/common.tsx
@@ -334,6 +334,10 @@ const OpportunityEditModal = dynamic(() =>
   ).then((mod) => mod.OpportunityEditModal),
 );
 
+const DirtyFormModal = dynamic(
+  () => import(/* webpackChunkName: "dirtyFormModal" */ './DirtyFormModal'),
+);
+
 const JobOpportunityModal = dynamic(
   () =>
     import(
@@ -424,6 +428,7 @@ export const modals = {
   [LazyModal.ActionSuccess]: ActionSuccessModal,
   [LazyModal.SquadNotificationSettings]: SquadNotificationSettingsModal,
   [LazyModal.OpportunityEdit]: OpportunityEditModal,
+  [LazyModal.DirtyForm]: DirtyFormModal,
   [LazyModal.JobOpportunity]: JobOpportunityModal,
   [LazyModal.RecruiterIntro]: RecruiterIntroModal,
   [LazyModal.RecruiterTrust]: RecruiterTrustModal,
diff --git a/packages/shared/src/components/modals/common/types.ts b/packages/shared/src/components/modals/common/types.ts
index fd8c40dcdb..870c790c07 100644
--- a/packages/shared/src/components/modals/common/types.ts
+++ b/packages/shared/src/components/modals/common/types.ts
@@ -70,6 +70,7 @@ export enum LazyModal {
   CustomLinks = 'customLinks',
   ListAwards = 'listAwards',
   AdsDashboard = 'adsDashboard',
+  DirtyForm = 'dirtyForm',
   BoostPost = 'boostPost',
   BoostSquad = 'boostSquad',
   BoostedCampaignView = 'boostedCampaignView',
diff --git a/packages/shared/src/components/profile/ActivitySection.tsx b/packages/shared/src/components/profile/ActivitySection.tsx
index 670f15c0c1..e9218c210d 100644
--- a/packages/shared/src/components/profile/ActivitySection.tsx
+++ b/packages/shared/src/components/profile/ActivitySection.tsx
@@ -3,21 +3,17 @@ import React, { Fragment } from 'react';
 import type { UseInfiniteQueryResult } from '@tanstack/react-query/build/legacy/types';
 import type { InfiniteData } from '@tanstack/react-query';
 import classed from '../../lib/classed';
-import { IconSize } from '../Icon';
 import type { FeedData } from '../../graphql/feed';
 import type { Post } from '../../graphql/posts';
-import type { WithClassNameProps } from '../utilities';
 
-export const ActivityContainer = classed('section', 'flex flex-col');
+export const ActivityContainer = classed(
+  'section',
+  'flex flex-col border border-border-subtlest-tertiary rounded-16 p-4 laptop:max-w-full max-w-[18.75rem] w-full',
+);
 
 export const ActivitySectionTitle = classed(
   'h2',
-  'flex items-center mb-4 text-text-primary font-bold typo-body',
-);
-
-export const ActivitySectionSubTitle = classed(
-  'span',
-  'mt-1 text-text-tertiary typo-callout font-normal',
+  'flex items-center text-text-primary font-bold typo-callout',
 );
 
 export const ActivitySectionTitleStat = classed(
@@ -25,29 +21,6 @@ export const ActivitySectionTitleStat = classed(
   'ml-1 text-text-secondary font-normal',
 );
 
-interface ActivitySectionHeaderProps {
-  title: string;
-  children?: ReactNode;
-  Icon?: React.ElementType;
-}
-
-export const ActivitySectionHeader = ({
-  title,
-  children,
-  Icon,
-  className,
-}: ActivitySectionHeaderProps & WithClassNameProps): ReactElement => {
-  return (
-    <ActivitySectionTitle className={className}>
-      <span className="flex align-middle">
-        {Icon && <Icon size={IconSize.Small} secondary className="mr-2" />}
-        {title}
-      </span>
-      {children}
-    </ActivitySectionTitle>
-  );
-};
-
 export const LoadMore = classed(
   'button',
   'mt-3 self-start p-0 bg-none border-none text-text-link cursor-pointer typo-callout font-outline',
diff --git a/packages/shared/src/components/profile/Awards.tsx b/packages/shared/src/components/profile/Awards.tsx
deleted file mode 100644
index e3bea1374e..0000000000
--- a/packages/shared/src/components/profile/Awards.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import type { ReactElement } from 'react';
-import React from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { ActivityContainer, ActivitySectionHeader } from './ActivitySection';
-import {
-  Typography,
-  TypographyColor,
-  TypographyType,
-} from '../typography/Typography';
-import { coresDocsLink } from '../../lib/constants';
-import { ClickableText } from '../buttons/ClickableText';
-import { Image } from '../image/Image';
-import {
-  userProductSummaryQueryOptions,
-  ProductType,
-} from '../../graphql/njord';
-
-type AwardProps = {
-  image: string;
-  amount: number;
-};
-const Award = ({ image, amount }: AwardProps): ReactElement => {
-  return (
-    <div className="flex size-fit flex-col items-center justify-center rounded-14 bg-surface-float p-1">
-      <Image src={image} alt="Award" className="size-20" />
-      <Typography
-        type={TypographyType.Footnote}
-        color={TypographyColor.Secondary}
-      >
-        {amount}
-      </Typography>
-    </div>
-  );
-};
-
-export const Awards = ({ userId }: { userId: string }): ReactElement => {
-  const { data: awards } = useQuery({
-    ...userProductSummaryQueryOptions({
-      userId,
-      type: ProductType.Award,
-    }),
-    enabled: !!userId,
-  });
-
-  if (!awards?.length) {
-    return null;
-  }
-
-  return (
-    <ActivityContainer>
-      <ActivitySectionHeader title="Awards" className="!mb-2" />
-      <Typography
-        type={TypographyType.Callout}
-        color={TypographyColor.Quaternary}
-      >
-        Learn more about how Awards are earned in the{' '}
-        <ClickableText
-          className="!inline"
-          tag="a"
-          target="_blank"
-          href={coresDocsLink}
-        >
-          daily.dev docs
-        </ClickableText>
-      </Typography>
-      <div className="no-scrollbar mt-6 flex flex-nowrap gap-2 overflow-x-scroll scroll-smooth tablet:flex-wrap tablet:overflow-x-auto">
-        {awards?.map((award) => {
-          return (
-            <Award key={award.id} image={award.image} amount={award.count} />
-          );
-        })}
-      </div>
-    </ActivityContainer>
-  );
-};
diff --git a/packages/shared/src/components/profile/ControlledAvatarUpload.tsx b/packages/shared/src/components/profile/ControlledAvatarUpload.tsx
new file mode 100644
index 0000000000..ade7d9e03f
--- /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 0000000000..b4b0d01cbb
--- /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/EmploymentTypeSelect.tsx b/packages/shared/src/components/profile/EmploymentTypeSelect.tsx
new file mode 100644
index 0000000000..0254234a55
--- /dev/null
+++ b/packages/shared/src/components/profile/EmploymentTypeSelect.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import Select from '../fields/Select';
+import { EmploymentType } from '../../features/opportunity/protobuf/opportunity';
+import { ButtonSize } from '../buttons/Button';
+import { Typography, TypographyType } from '../typography/Typography';
+
+const employmentTypeOptions = [
+  { label: 'Full-time', value: EmploymentType.FULL_TIME.toString() },
+  { label: 'Part-time', value: EmploymentType.PART_TIME.toString() },
+  { label: 'Contract / Freelance', value: EmploymentType.CONTRACT.toString() },
+  { label: 'Internship', value: EmploymentType.INTERNSHIP.toString() },
+];
+
+type EmploymentTypeSelectProps = {
+  name: string;
+  placeholder?: string;
+  label?: string;
+};
+
+const EmploymentTypeSelect = ({
+  name,
+  placeholder,
+  label,
+}: EmploymentTypeSelectProps) => {
+  return (
+    <div className="flex flex-col gap-2">
+      {label && (
+        <Typography type={TypographyType.Callout} bold>
+          {label}
+        </Typography>
+      )}
+      <Select
+        options={employmentTypeOptions}
+        name={name}
+        placeholder={placeholder}
+        buttonProps={{
+          size: ButtonSize.Large,
+        }}
+      />
+    </div>
+  );
+};
+
+export default EmploymentTypeSelect;
diff --git a/packages/shared/src/components/profile/ExperienceSelect.tsx b/packages/shared/src/components/profile/ExperienceSelect.tsx
new file mode 100644
index 0000000000..53ebd27825
--- /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/ExperienceSettings.tsx b/packages/shared/src/components/profile/ExperienceSettings.tsx
new file mode 100644
index 0000000000..89181a5e8d
--- /dev/null
+++ b/packages/shared/src/components/profile/ExperienceSettings.tsx
@@ -0,0 +1,37 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useUserExperiencesByType } from '../../features/profile/hooks/useUserExperiencesByType';
+import type { UserExperienceType } from '../../graphql/user/profile';
+import { UserExperienceList } from '../../features/profile/components/experience/UserExperiencesList';
+import { useAuthContext } from '../../contexts/AuthContext';
+import type { PublicProfile } from '../../lib/user';
+
+type ExperienceSettingsProps = {
+  experienceType: UserExperienceType;
+  emptyStateMessage: string;
+};
+
+export const ExperienceSettings = ({
+  experienceType,
+  emptyStateMessage,
+}: ExperienceSettingsProps): ReactElement => {
+  const { user } = useAuthContext();
+  const { experiences } = useUserExperiencesByType(experienceType, user?.id);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {experiences && experiences.length > 0 ? (
+        <UserExperienceList
+          experiences={experiences}
+          experienceType={experienceType}
+          user={user as PublicProfile}
+          showEditOnItems
+        />
+      ) : (
+        <div className="flex flex-col items-center justify-center gap-4 py-12 text-center">
+          <p className="text-text-secondary">{emptyStateMessage}</p>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/shared/src/components/profile/MonthSelect.tsx b/packages/shared/src/components/profile/MonthSelect.tsx
new file mode 100644
index 0000000000..b58b82b7d0
--- /dev/null
+++ b/packages/shared/src/components/profile/MonthSelect.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import Select from '../fields/Select';
+import { ButtonSize } from '../buttons/Button';
+import type { IconType } from '../buttons/Button';
+
+export const MONTHS = [
+  { label: 'January', value: '0' },
+  { label: 'February', value: '1' },
+  { label: 'March', value: '2' },
+  { label: 'April', value: '3' },
+  { label: 'May', value: '4' },
+  { label: 'June', value: '5' },
+  { label: 'July', value: '6' },
+  { label: 'August', value: '7' },
+  { label: 'September', value: '8' },
+  { label: 'October', value: '9' },
+  { label: 'November', value: '10' },
+  { label: 'December', value: '11' },
+];
+
+type MonthSelectProps = {
+  name: string;
+  icon?: IconType;
+  placeholder?: string;
+  onSelect?: (value: string) => void;
+};
+
+const MonthSelect = ({
+  name,
+  icon,
+  placeholder,
+  onSelect,
+}: MonthSelectProps) => {
+  const { control } = useFormContext();
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ fieldState }) => (
+        <div className="flex flex-col gap-1">
+          <Select
+            icon={icon}
+            options={MONTHS}
+            name={name}
+            placeholder={placeholder}
+            buttonProps={{
+              size: ButtonSize.Large,
+            }}
+            onSelect={(value) => onSelect(value)}
+          />
+          {fieldState.error && (
+            <p className="text-sm text-status-error">
+              {fieldState.error?.message}
+            </p>
+          )}
+        </div>
+      )}
+    />
+  );
+};
+
+export default MonthSelect;
diff --git a/packages/shared/src/components/profile/ProfileActions.tsx b/packages/shared/src/components/profile/ProfileActions.tsx
new file mode 100644
index 0000000000..0bc3777537
--- /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 0000000000..23d8538fcd
--- /dev/null
+++ b/packages/shared/src/components/profile/ProfileHeader.tsx
@@ -0,0 +1,127 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+import { Image } from '../image/Image';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../typography/Typography';
+import { DevPlusIcon, EditIcon } 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';
+import { ProfileImageSize } from '../ProfilePicture';
+import { VerifiedCompanyUserBadge } from '../VerifiedCompanyUserBadge';
+import { locationToString } from '../../lib/utils';
+import { IconSize } from '../Icon';
+
+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 laptop: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">
+        {isSameUser && (
+          <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 items-center gap-1">
+          <Typography type={TypographyType.Title2} bold>
+            {name}
+          </Typography>
+          {isPlus && (
+            <DevPlusIcon
+              className="text-action-plus-default"
+              size={IconSize.Size16}
+            />
+          )}
+        </div>
+        <div className="flex flex-col gap-2">
+          {bio && <Typography type={TypographyType.Body}>{bio}</Typography>}
+          <div className="flex items-center">
+            {user?.companies?.length > 0 && (
+              <VerifiedCompanyUserBadge
+                size={ProfileImageSize.XSmall}
+                user={user}
+                showCompanyName
+                showVerified={false}
+                companyNameTypography={{
+                  type: TypographyType.Subhead,
+                }}
+              />
+            )}
+            {user?.companies?.length > 0 && user?.location && (
+              <Separator className="text-text-secondary" />
+            )}
+            {user?.location && (
+              <Typography
+                type={TypographyType.Subhead}
+                color={TypographyColor.Secondary}
+              >
+                {locationToString(user.location)}
+              </Typography>
+            )}
+          </div>
+          <div className="flex items-center">
+            <Typography
+              type={TypographyType.Subhead}
+              color={TypographyColor.Secondary}
+            >
+              @{username}
+            </Typography>
+            <Separator className="text-text-secondary" />
+            <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 0000000000..40b09818aa
--- /dev/null
+++ b/packages/shared/src/components/profile/ProfileLocation.tsx
@@ -0,0 +1,104 @@
+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';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../typography/Typography';
+
+type ProfileLocationProps = {
+  locationName: string;
+  typeName?: string;
+  defaultValue?: TLocation;
+};
+
+const ProfileLocation = ({
+  locationName,
+  typeName,
+  defaultValue,
+}: ProfileLocationProps) => {
+  const { user } = useAuthContext();
+  const {
+    setValue,
+    watch,
+    formState: { errors },
+  } = 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)}
+        />
+      )}
+      {errors[typeName] && (
+        <Typography
+          type={TypographyType.Caption2}
+          color={TypographyColor.StatusError}
+        >
+          {errors[typeName]?.message as string}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default ProfileLocation;
diff --git a/packages/shared/src/components/profile/ProfileMonthYearSelect.tsx b/packages/shared/src/components/profile/ProfileMonthYearSelect.tsx
new file mode 100644
index 0000000000..b4881e7fc5
--- /dev/null
+++ b/packages/shared/src/components/profile/ProfileMonthYearSelect.tsx
@@ -0,0 +1,83 @@
+import React, { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+import MonthSelect from './MonthSelect';
+import YearSelect from './YearSelect';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../typography/Typography';
+
+type MonthYearSelectProps = {
+  name: string;
+  monthPlaceholder?: string;
+  yearPlaceholder?: string;
+};
+
+const ProfileMonthYearSelect = ({
+  name,
+  monthPlaceholder = 'Month',
+  yearPlaceholder = 'Year',
+}: MonthYearSelectProps) => {
+  const yearName = `${name}Year`;
+  const monthName = `${name}Month`;
+  const {
+    watch,
+    setValue,
+    formState: { errors },
+  } = useFormContext();
+  const month = watch(monthName);
+  const year = watch(yearName);
+  const current = watch('current');
+
+  const handleSelect = (value: string, inputName: string) => {
+    setValue(inputName, value);
+  };
+
+  useEffect(() => {
+    if (year) {
+      const monthToUse = month || 0;
+      const date = new Date(Date.UTC(year, monthToUse, 1, 12, 0, 0, 0));
+      setValue(name, date);
+    }
+  }, [month, year, name, setValue]);
+
+  useEffect(() => {
+    if (current) {
+      setValue('endedAt', null);
+      setValue('endedAtMonth', '');
+      setValue('endedAtYear', '');
+    }
+  }, [current, setValue]);
+
+  return (
+    <div>
+      <div className="flex gap-6">
+        <div className="flex-1">
+          <MonthSelect
+            name={monthName}
+            placeholder={monthPlaceholder}
+            onSelect={(value) => handleSelect(value, monthName)}
+          />
+        </div>
+        <div className="flex-1">
+          <YearSelect
+            name={yearName}
+            placeholder={yearPlaceholder}
+            onSelect={(value) => handleSelect(value, yearName)}
+          />
+        </div>
+      </div>
+      {errors[name] && (
+        <Typography
+          type={TypographyType.Caption2}
+          color={TypographyColor.StatusError}
+        >
+          {errors[name]?.message as string}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default ProfileMonthYearSelect;
diff --git a/packages/shared/src/components/profile/ProfileSettingsMenu.tsx b/packages/shared/src/components/profile/ProfileSettingsMenu.tsx
index 1d58927298..56210c7bfe 100644
--- a/packages/shared/src/components/profile/ProfileSettingsMenu.tsx
+++ b/packages/shared/src/components/profile/ProfileSettingsMenu.tsx
@@ -29,6 +29,8 @@ import {
   OrganizationIcon,
   TrendingIcon,
   JobIcon,
+  TerminalIcon,
+  TourIcon,
 } from '../icons';
 import { NavDrawer } from '../drawers/NavDrawer';
 import {
@@ -60,6 +62,9 @@ import { useLazyModal } from '../../hooks/useLazyModal';
 import { LazyModal } from '../modals/common/types';
 import { useLogContext } from '../../contexts/LogContext';
 import { LogEvent, TargetId } from '../../lib/log';
+import { VolunteeringIcon } from '../icons/Volunteering';
+import { GraduationIcon } from '../icons/Graduation';
+import { MedalIcon } from '../icons/Medal';
 
 type MenuItems = Record<
   string,
@@ -119,6 +124,41 @@ const useAccountPageItems = () => {
             },
           },
         },
+        career: {
+          title: 'Career',
+          items: {
+            work: {
+              title: 'Work Experience',
+              icon: JobIcon,
+              href: `${settingsUrl}/profile/experience/work`,
+            },
+            education: {
+              title: 'Education',
+              icon: GraduationIcon,
+              href: `${settingsUrl}/profile/experience/education`,
+            },
+            certification: {
+              title: 'Certifications',
+              icon: MedalIcon,
+              href: `${settingsUrl}/profile/experience/certification`,
+            },
+            openSource: {
+              title: 'Open Source',
+              icon: TerminalIcon,
+              href: `${settingsUrl}/profile/experience/opensource`,
+            },
+            project: {
+              title: 'Project & Publications',
+              icon: TourIcon,
+              href: `${settingsUrl}/profile/experience/project`,
+            },
+            volunteering: {
+              title: 'Volunteering',
+              icon: VolunteeringIcon,
+              href: `${settingsUrl}/profile/experience/volunteering`,
+            },
+          },
+        },
         billing: {
           title: 'Billing and Monetization',
           items: {
diff --git a/packages/shared/src/components/profile/ProfileWidgets.spec.tsx b/packages/shared/src/components/profile/ProfileWidgets.spec.tsx
deleted file mode 100644
index 2d9ab9756d..0000000000
--- a/packages/shared/src/components/profile/ProfileWidgets.spec.tsx
+++ /dev/null
@@ -1,386 +0,0 @@
-import React from 'react';
-import type { RenderResult } from '@testing-library/react';
-import { render, screen, within } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import userEvent from '@testing-library/user-event';
-import type { LoggedUser, PublicProfile } from '../../lib/user';
-import AuthContext from '../../contexts/AuthContext';
-import { ProfileWidgets } from './ProfileWidgets';
-import type { Connection } from '../../graphql/common';
-import type { SourceMember, Squad } from '../../graphql/sources';
-import { SourceMemberRole, SourceType } from '../../graphql/sources';
-import { mockGraphQL } from '../../../__tests__/helpers/graphql';
-import { PUBLIC_SOURCE_MEMBERSHIPS_QUERY } from '../../graphql/users';
-import { waitForNock } from '../../../__tests__/helpers/utilities';
-import { settingsContext } from '../../../__tests__/helpers/boot';
-import SettingsContext from '../../contexts/SettingsContext';
-import { getLogContextStatic } from '../../contexts/LogContext';
-import { LogEvent, TargetType } from '../../lib/log';
-
-const LogContext = getLogContextStatic();
-
-beforeEach(() => {
-  jest.clearAllMocks();
-});
-
-const defaultLoggedUser: LoggedUser = {
-  id: 'u1',
-  name: 'Ido Shamun',
-  providers: ['idoshamun'],
-  username: 'idoshamun',
-  premium: false,
-  reputation: 20,
-  image: 'https://daily.dev/ido.png',
-  bio: 'The best company!',
-  createdAt: '2020-07-26T13:04:35.000Z',
-  twitter: 'idoshamun',
-  github: 'idoshamun',
-  hashnode: 'idoshamun',
-  portfolio: 'https://daily.dev/?key=vaue',
-  permalink: 'https://daily.dev/ido',
-  roadmap: 'idoshamun',
-  threads: 'idoshamun',
-  codepen: 'idoshamun',
-  reddit: 'idoshamun',
-  stackoverflow: '999999/idoshamun',
-  youtube: 'idoshamun',
-  linkedin: 'idoshamun',
-  mastodon: 'https://mastodon.social/@idoshamun',
-  bluesky: 'https://bsky.app/profile/dailydotdev.bsky.social',
-};
-
-const defaultProfile: PublicProfile = {
-  id: 'u2',
-  name: 'Daily Dev',
-  username: 'dailydotdev',
-  premium: false,
-  reputation: 20,
-  image: 'https://daily.dev/daily.png',
-  cover: 'https://daily.dev/cover.png',
-  bio: 'The best company!',
-  createdAt: '2020-08-26T13:04:35.000Z',
-  twitter: 'dailydotdev',
-  github: 'dailydotdev',
-  hashnode: 'dailydotdev',
-  portfolio: 'https://daily.dev/?key=vaue',
-  permalink: 'https://daily.dev/dailydotdev',
-  roadmap: 'dailydotdev',
-  threads: 'dailydotdev',
-  codepen: 'dailydotdev',
-  reddit: 'dailydotdev',
-  stackoverflow: '999999/dailydotdev',
-  youtube: 'dailydotdev',
-  linkedin: 'dailydotdev',
-  mastodon: 'https://mastodon.social/@dailydotdev',
-  bluesky: 'dailydotdev.bsky.social',
-};
-
-const defaultMemberships: Connection<SourceMember> = {
-  pageInfo: null,
-  edges: [
-    {
-      node: {
-        role: SourceMemberRole.Admin,
-        source: {
-          id: 's1',
-          name: 'Squad 1',
-          image: 'https://daily.dev/squad1.png',
-          permalink: 'https://daily.dev/squad1',
-          type: SourceType.Squad,
-          membersCount: 10,
-        } as unknown as Squad,
-      } as unknown as SourceMember,
-    },
-    {
-      node: {
-        role: SourceMemberRole.Member,
-        source: {
-          id: 's2',
-          name: 'Squad 2',
-          image: 'https://daily.dev/squad2.png',
-          permalink: 'https://daily.dev/squad2',
-          type: SourceType.Squad,
-          membersCount: 40,
-        } as unknown as Squad,
-      } as unknown as SourceMember,
-    },
-  ],
-};
-
-const logEvent = jest.fn();
-
-const renderComponent = (
-  profile: Partial<PublicProfile> = {},
-  memberships: Connection<SourceMember> = null,
-): RenderResult => {
-  const client = new QueryClient();
-
-  return render(
-    <QueryClientProvider client={client}>
-      <AuthContext.Provider
-        value={{
-          user: defaultLoggedUser,
-          shouldShowLogin: false,
-          showLogin: jest.fn(),
-          logout: jest.fn(),
-          updateUser: jest.fn(),
-          tokenRefreshed: true,
-          isLoggedIn: true,
-          closeLogin: jest.fn(),
-          getRedirectUri: jest.fn(),
-        }}
-      >
-        <LogContext.Provider
-          value={{
-            logEvent,
-            logEventStart: jest.fn(),
-            logEventEnd: jest.fn(),
-            sendBeacon: jest.fn(),
-          }}
-        >
-          <SettingsContext.Provider value={settingsContext}>
-            <ProfileWidgets
-              user={{ ...defaultProfile, ...profile }}
-              sources={memberships}
-              userStats={{
-                upvotes: 5_000,
-                views: 83_000,
-                numFollowers: 23_000,
-                numFollowing: 3_000,
-              }}
-            />
-          </SettingsContext.Provider>
-        </LogContext.Provider>
-      </AuthContext.Provider>
-    </QueryClientProvider>,
-  );
-};
-
-it('should show profile image', async () => {
-  renderComponent();
-  const el = await screen.findByAltText(`dailydotdev's profile`);
-  expect(el).toHaveAttribute('src', defaultProfile.image);
-});
-
-it('should show cover image', async () => {
-  renderComponent();
-  const el = await screen.findByAltText('cover');
-  expect(el).toHaveAttribute('src', defaultProfile.cover);
-});
-
-it('should show edit profile only if user is seeing their own profile', () => {
-  renderComponent();
-  let el = screen.queryByLabelText('Edit profile');
-  expect(el).not.toBeInTheDocument();
-
-  renderComponent(defaultLoggedUser);
-  el = screen.getByLabelText('Edit profile');
-  expect(el).toBeInTheDocument();
-});
-
-it('should show join date', () => {
-  renderComponent();
-  const el = screen.getByText('August 2020');
-  expect(el).toBeInTheDocument();
-});
-
-it('should show user stats in a proper format', () => {
-  renderComponent();
-  let el = screen.getByTestId('Reputation');
-  expect(el).toHaveTextContent('20Reputation');
-
-  el = screen.getByTestId('Followers');
-  expect(el).toHaveTextContent('23KFollowers');
-
-  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', () => {
-  renderComponent();
-
-  const el = screen.getByText('The best company!');
-  expect(el).toBeInTheDocument();
-});
-
-it('should show add bio only if user is seeing their own profile', () => {
-  renderComponent({ bio: null });
-  let el = screen.queryByText('Add bio');
-  expect(el).not.toBeInTheDocument();
-
-  renderComponent({ ...defaultLoggedUser, bio: null });
-  el = screen.getByText('Add bio');
-  expect(el).toBeInTheDocument();
-});
-
-it('should show twitter link', () => {
-  renderComponent();
-
-  const el = screen.getByTestId('twitter');
-  expect(el).toHaveAttribute('href', 'https://x.com/dailydotdev');
-  expect(el).toHaveTextContent('@dailydotdev');
-});
-
-it('should show github link', () => {
-  renderComponent();
-  const el = screen.getByTestId('github');
-  expect(el).toHaveAttribute('href', 'https://github.com/dailydotdev');
-  expect(el).toHaveTextContent('@dailydotdev');
-});
-
-it('should show roadmap link', () => {
-  renderComponent();
-  const el = screen.getByTestId('roadmap');
-  expect(el).toHaveAttribute('href', 'https://roadmap.sh/u/dailydotdev');
-  expect(el).toHaveTextContent('dailydotdev');
-});
-
-it('should show threads link', () => {
-  renderComponent();
-  const el = screen.getByTestId('threads');
-  expect(el).toHaveAttribute('href', 'https://threads.net/@dailydotdev');
-  expect(el).toHaveTextContent('@dailydotdev');
-});
-
-it('should show codepen link', () => {
-  renderComponent();
-  const el = screen.getByTestId('codepen');
-  expect(el).toHaveAttribute('href', 'https://codepen.io/dailydotdev');
-  expect(el).toHaveTextContent('dailydotdev');
-});
-
-it('should show reddit link', () => {
-  renderComponent();
-  const el = screen.getByTestId('reddit');
-  expect(el).toHaveAttribute('href', 'https://reddit.com/user/dailydotdev');
-  expect(el).toHaveTextContent('u/dailydotdev');
-});
-
-it('should show stackoverflow link', () => {
-  renderComponent();
-  const el = screen.getByTestId('stackoverflow');
-  expect(el).toHaveAttribute(
-    'href',
-    'https://stackoverflow.com/users/999999/dailydotdev',
-  );
-  expect(el).toHaveTextContent('dailydotdev');
-});
-
-it('should show youtube link', () => {
-  renderComponent();
-  const el = screen.getByTestId('youtube');
-  expect(el).toHaveAttribute('href', 'https://youtube.com/@dailydotdev');
-  expect(el).toHaveTextContent('@dailydotdev');
-});
-
-it('should show linkedin link', () => {
-  renderComponent();
-  const el = screen.getByTestId('linkedin');
-  expect(el).toHaveAttribute('href', 'https://linkedin.com/in/dailydotdev');
-  expect(el).toHaveTextContent('dailydotdev');
-});
-
-it('should show mastodon link', () => {
-  renderComponent();
-  const el = screen.getByTestId('mastodon');
-  expect(el).toHaveAttribute('href', 'https://mastodon.social/@dailydotdev');
-  expect(el).toHaveTextContent('mastodon.social/@dailydotdev');
-});
-
-it('should show bluesky link', () => {
-  renderComponent();
-  const el = screen.getByTestId('bluesky');
-  expect(el).toHaveAttribute(
-    'href',
-    'https://bsky.app/profile/dailydotdev.bsky.social',
-  );
-  expect(el).toHaveTextContent('dailydotdev.bsky.social');
-});
-
-it('should show portfolio link', async () => {
-  renderComponent();
-  const el = screen.getByTestId('portfolio');
-  expect(el).toHaveAttribute('href', 'https://daily.dev/?key=vaue');
-  expect(el).toHaveTextContent('daily.dev');
-});
-
-it('should show referral widget only if user is seeing their own profile', () => {
-  renderComponent();
-  let el = screen.queryByTestId('referral-widget');
-  expect(el).not.toBeInTheDocument();
-
-  renderComponent(defaultLoggedUser);
-  el = screen.queryByTestId('referral-widget');
-  expect(el).toBeInTheDocument();
-});
-
-it('should show create squad only if user is seeing their own profile', () => {
-  renderComponent();
-  let el = screen.queryByLabelText('Create a new Squad');
-  expect(el).not.toBeInTheDocument();
-
-  renderComponent(defaultLoggedUser);
-  el = screen.getByLabelText('Create a new Squad');
-  expect(el).toBeInTheDocument();
-});
-
-it('should list all user squads', async () => {
-  mockGraphQL({
-    request: {
-      query: PUBLIC_SOURCE_MEMBERSHIPS_QUERY,
-      variables: { id: defaultProfile.id },
-    },
-    result: {
-      data: {
-        sources: {
-          edges: [
-            {
-              node: {
-                role: defaultMemberships.edges[0].node.role,
-                source: {
-                  ...defaultMemberships.edges[0].node.source,
-                  currentMember: { role: SourceMemberRole.Member },
-                },
-              },
-            },
-            ...defaultMemberships.edges.slice(1),
-          ],
-        },
-      },
-    },
-  });
-  renderComponent({}, defaultMemberships);
-  await waitForNock();
-  const s1 = screen.getByTestId('s1');
-  expect(s1).toBeInTheDocument();
-  expect(within(s1).queryByText('admin')).toBeInTheDocument();
-
-  const s2 = screen.getByTestId('s2');
-  expect(s2).toBeInTheDocument();
-  expect(within(s2).queryByText('admin')).not.toBeInTheDocument();
-  expect(await within(s2).findByLabelText('Join Squad')).toBeInTheDocument();
-
-  expect(within(s1).queryByLabelText('Join Squad')).not.toBeInTheDocument();
-});
-
-it('should track link clicks', () => {
-  renderComponent();
-
-  const el = screen.getByTestId('github');
-  expect(el).toHaveAttribute('href', 'https://github.com/dailydotdev');
-  expect(el).toHaveTextContent('@dailydotdev');
-
-  userEvent.click(el);
-
-  expect(logEvent).toHaveBeenCalledWith({
-    event_name: LogEvent.Click,
-    target_type: TargetType.SocialLink,
-    target_id: 'github',
-  });
-});
diff --git a/packages/shared/src/components/profile/ProfileWidgets.tsx b/packages/shared/src/components/profile/ProfileWidgets.tsx
deleted file mode 100644
index bb10c350d0..0000000000
--- a/packages/shared/src/components/profile/ProfileWidgets.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import type { ReactElement } from 'react';
-import React, { useRef, useEffect, useContext, useMemo } from 'react';
-import classNames from 'classnames';
-import { Header } from './Header';
-import { HeroImage } from './HeroImage';
-import { UserMetadata } from './UserMetadata';
-import { UserStats } from './UserStats';
-import { SocialChips } from './SocialChips';
-import { SquadsList } from './SquadsList';
-import { useDynamicHeader } from '../../useDynamicHeader';
-import AuthContext from '../../contexts/AuthContext';
-import type { ProfileV2 } from '../../graphql/users';
-import {
-  ReferralCampaignKey,
-  useActions,
-  useReferralCampaign,
-  useViewSize,
-  ViewSize,
-} from '../../hooks';
-import ReferralWidget from '../widgets/ReferralWidget';
-import { ButtonSize, ButtonVariant } from '../buttons/common';
-import { Button } from '../buttons/Button';
-import { PlusIcon } from '../icons';
-import { DragDrop, dragDropClasses } from '../fields/DragDrop';
-import {
-  fileValidation,
-  useUploadCv,
-} from '../../features/profile/hooks/useUploadCv';
-import { LogEvent, TargetId, TargetType } from '../../lib/log';
-import { useLogContext } from '../../contexts/LogContext';
-import { ActionType } from '../../graphql/actions';
-import {
-  Typography,
-  TypographyColor,
-  TypographyType,
-} from '../typography/Typography';
-import ConditionalWrapper from '../ConditionalWrapper';
-import { FeelingLazy } from '../../features/profile/components/FeelingLazy';
-
-export interface ProfileWidgetsProps extends ProfileV2 {
-  className?: string;
-  enableSticky?: boolean;
-}
-
-export function ProfileWidgets({
-  user,
-  sources,
-  userStats,
-  className,
-  enableSticky,
-}: ProfileWidgetsProps): ReactElement {
-  const { logEvent } = useLogContext();
-  const { user: loggedUser } = useContext(AuthContext);
-  const isSameUser = loggedUser?.id === user.id;
-  const stats = { ...userStats, reputation: user?.reputation };
-  const isTouchDevice = !useViewSize(ViewSize.Laptop);
-
-  const { ref: stickyRef, progress: stickyProgress } =
-    useDynamicHeader<HTMLDivElement>(enableSticky);
-  const hideSticky = !stickyProgress;
-
-  const { url: referralUrl } = useReferralCampaign({
-    campaignKey: ReferralCampaignKey.Generic,
-    enabled: isSameUser,
-  });
-
-  const { checkHasCompleted } = useActions();
-  const { onUpload, status, shouldShow } = useUploadCv();
-  const hasClosedBanner = useMemo(
-    () => checkHasCompleted(ActionType.ClosedProfileBanner),
-    [checkHasCompleted],
-  );
-  const hasLoggedImpression = useRef(false);
-  const shouldShowUpload = isSameUser && hasClosedBanner && shouldShow;
-
-  useEffect(() => {
-    if (shouldShowUpload && !hasLoggedImpression.current) {
-      logEvent({
-        event_name: LogEvent.Impression,
-        target_type: TargetType.CvBanner,
-        target_id: TargetId.CVWidget,
-      });
-      hasLoggedImpression.current = true;
-    }
-  }, [shouldShowUpload, logEvent]);
-
-  return (
-    <div
-      className={classNames('my-4 flex flex-col gap-6 laptop:my-0', className)}
-    >
-      <Header user={user} isSameUser={isSameUser} className="-mb-2" />
-      {!hideSticky && (
-        <Header
-          user={user}
-          isSameUser={isSameUser}
-          sticky
-          className="fixed left-0 top-0 z-3 w-full bg-background-default transition-transform duration-75 tablet:pl-20"
-          style={{ transform: `translateY(${(stickyProgress - 1) * 100}%)` }}
-        />
-      )}
-      <HeroImage
-        cover={user.cover}
-        image={user.image}
-        username={user.username}
-        id={user.id}
-        ref={stickyRef}
-        className={{
-          container: 'mx-4',
-        }}
-      />
-      <div className="relative flex flex-col gap-6 px-4">
-        <UserMetadata
-          username={user.username}
-          name={user.name}
-          createdAt={user.createdAt}
-          company={user.companies?.[0]}
-          isPlus={user?.isPlus}
-          className="gap-3"
-        />
-        <UserStats stats={stats} userId={user.id} />
-        {(user.bio || isSameUser) && (
-          <div className="text-text-tertiary typo-callout">
-            {user.bio || (
-              <Button
-                variant={ButtonVariant.Secondary}
-                size={ButtonSize.Small}
-                tag="a"
-                href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}account/profile`}
-                icon={<PlusIcon />}
-              >
-                Add bio
-              </Button>
-            )}
-          </div>
-        )}
-      </div>
-      {shouldShowUpload && (
-        <div className="mx-4 flex max-w-80 flex-col gap-2 tablet:max-w-96">
-          <ConditionalWrapper
-            condition={isTouchDevice}
-            wrapper={(component) => (
-              <div
-                className={classNames(
-                  dragDropClasses,
-                  'flex-col gap-1 bg-surface-float p-3',
-                )}
-              >
-                <Typography bold type={TypographyType.Callout}>
-                  Your next job should apply to you
-                </Typography>
-                <Typography
-                  type={TypographyType.Footnote}
-                  color={TypographyColor.Tertiary}
-                  className="mb-2"
-                >
-                  Upload your CV so we can quietly start matching you with roles
-                  that actually fit your skills and interests.
-                </Typography>
-                {component}
-              </div>
-            )}
-          >
-            <DragDrop
-              isCompactList
-              onFilesDrop={([file]) => onUpload(file)}
-              validation={fileValidation}
-              state={status}
-              ctaSize={isTouchDevice ? ButtonSize.Small : undefined}
-              renderCta={
-                isTouchDevice
-                  ? undefined
-                  : (onBrowseFile) => (
-                      <button
-                        type="button"
-                        onClick={onBrowseFile}
-                        className="underline typo-footnote hover:no-underline"
-                      >
-                        Upload PDF
-                      </button>
-                    )
-              }
-            />
-          </ConditionalWrapper>
-          <FeelingLazy />
-        </div>
-      )}
-      <SocialChips links={user} />
-      {(isSameUser || sources?.edges?.length > 0) && (
-        <div className="flex flex-col gap-3">
-          <div className="px-4 text-text-tertiary typo-footnote">
-            Active in these Squads
-          </div>
-          <SquadsList memberships={sources} userId={user.id} />
-        </div>
-      )}
-      {isSameUser && (
-        <ReferralWidget url={referralUrl} className="hidden laptop:flex" />
-      )}
-    </div>
-  );
-}
diff --git a/packages/shared/src/components/profile/ReadingHeatmapWidget.tsx b/packages/shared/src/components/profile/ReadingHeatmapWidget.tsx
deleted file mode 100644
index 2cd1333a57..0000000000
--- a/packages/shared/src/components/profile/ReadingHeatmapWidget.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React, { useMemo } from 'react';
-import type { UserReadHistory } from '../../graphql/users';
-import {
-  ActivityContainer,
-  ActivitySectionTitle,
-  ActivitySectionTitleStat,
-} from './ActivitySection';
-import { CalendarHeatmap } from '../CalendarHeatmap';
-
-const getHistoryTitle = (
-  fullHistory: boolean,
-  selectedHistoryYear: number,
-  yearOptions: string[],
-): string => {
-  if (fullHistory) {
-    if (selectedHistoryYear > 0) {
-      return yearOptions[selectedHistoryYear];
-    }
-    return 'the last year';
-  }
-  return 'the last months';
-};
-
-const readHistoryToValue = (value: UserReadHistory): number => value.reads;
-
-const readHistoryToTooltip = (
-  value: UserReadHistory,
-  date: Date,
-): ReactNode => {
-  const formattedDate = date.toLocaleString('en-US', {
-    month: 'short',
-    day: '2-digit',
-    year: 'numeric',
-  });
-  if (!value?.reads) {
-    return `No posts read on ${formattedDate}`;
-  }
-  return (
-    <>
-      <strong>
-        {value.reads} article{value.reads > 1 ? 's' : ''} read
-      </strong>
-      &nbsp;on {formattedDate}
-    </>
-  );
-};
-
-export interface ReadingHeatmapWidgetProps {
-  fullHistory: boolean;
-  selectedHistoryYear: number;
-  readHistory: UserReadHistory[];
-  before: Date;
-  after: Date;
-  yearOptions: string[];
-}
-
-export function ReadingHeatmapWidget({
-  fullHistory,
-  selectedHistoryYear,
-  readHistory,
-  before,
-  after,
-  yearOptions,
-}: ReadingHeatmapWidgetProps): ReactElement {
-  const totalReads = useMemo(
-    () => readHistory?.reduce((acc, val) => acc + val.reads, 0),
-    [readHistory],
-  );
-
-  const title = getHistoryTitle(fullHistory, selectedHistoryYear, yearOptions);
-  return (
-    <ActivityContainer>
-      <ActivitySectionTitle>
-        Posts read in {title}
-        {totalReads >= 0 && (
-          <ActivitySectionTitleStat>({totalReads})</ActivitySectionTitleStat>
-        )}
-      </ActivitySectionTitle>
-      <CalendarHeatmap
-        startDate={after}
-        endDate={before}
-        values={readHistory}
-        valueToCount={readHistoryToValue}
-        valueToTooltip={readHistoryToTooltip}
-      />
-      <div className="mt-4 flex items-center justify-between typo-footnote">
-        <div className="text-text-quaternary">Inspired by GitHub</div>
-        <div className="flex items-center">
-          <div className="mr-2">Less</div>
-          <div
-            className="mr-0.5 h-2 w-2 border border-border-subtlest-quaternary"
-            style={{ borderRadius: '0.1875rem' }}
-          />
-          <div
-            className="mr-0.5 h-2 w-2 bg-text-disabled"
-            style={{ borderRadius: '0.1875rem' }}
-          />
-          <div
-            className="mr-0.5 h-2 w-2 bg-text-quaternary"
-            style={{ borderRadius: '0.1875rem' }}
-          />
-          <div
-            className="mr-0.5 h-2 w-2 bg-text-primary"
-            style={{ borderRadius: '0.1875rem' }}
-          />
-          <div className="ml-2">More</div>
-        </div>
-      </div>
-    </ActivityContainer>
-  );
-}
diff --git a/packages/shared/src/components/profile/ReadingStreaksWidget.tsx b/packages/shared/src/components/profile/ReadingStreaksWidget.tsx
deleted file mode 100644
index 472be8f5e1..0000000000
--- a/packages/shared/src/components/profile/ReadingStreaksWidget.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { ReactElement } from 'react';
-import React from 'react';
-import { ActivityContainer, ActivitySectionHeader } from './ActivitySection';
-import { ReadingStreakIcon } from '../icons';
-import type { UserStreak } from '../../graphql/users';
-import { largeNumberFormat } from '../../lib';
-
-interface StreakTagProps {
-  streak: number;
-  title: string;
-  isLoading: boolean;
-}
-
-interface ReadingStreaksWidgetProps {
-  streak: UserStreak;
-  isLoading: boolean;
-}
-const StreakTag = ({ streak, title, isLoading }: StreakTagProps) => {
-  return (
-    <div className="relative flex w-40 flex-col rounded-10 border border-background-subtle p-3">
-      {!isLoading && (
-        <>
-          <strong className="typo-title3">{largeNumberFormat(streak)}</strong>
-          <p className="text-text-quaternary typo-subhead">{title}</p>
-        </>
-      )}
-    </div>
-  );
-};
-
-export function ReadingStreaksWidget({
-  streak,
-  isLoading,
-}: ReadingStreaksWidgetProps): ReactElement {
-  return (
-    <ActivityContainer>
-      <ActivitySectionHeader title="Reading streak" Icon={ReadingStreakIcon} />
-      <div className="flex gap-5">
-        <StreakTag
-          streak={streak?.max}
-          title="Longest streak 🏆"
-          isLoading={isLoading}
-        />
-        <StreakTag
-          streak={streak?.total}
-          title="Total reading days"
-          isLoading={isLoading}
-        />
-      </div>
-    </ActivityContainer>
-  );
-}
diff --git a/packages/shared/src/components/profile/ReadingTagProgress.spec.tsx b/packages/shared/src/components/profile/ReadingTagProgress.spec.tsx
deleted file mode 100644
index e4dcd4df81..0000000000
--- a/packages/shared/src/components/profile/ReadingTagProgress.spec.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import nock from 'nock';
-import { render, screen } from '@testing-library/react';
-import { QueryClient } from '@tanstack/react-query';
-import type { MostReadTag } from '../../graphql/users';
-import { ReadingTagProgress } from './ReadingTagProgress';
-import { TestBootProvider } from '../../../__tests__/helpers/boot';
-
-beforeEach(() => {
-  nock.cleanAll();
-  jest.clearAllMocks();
-});
-
-const defaultTopTag: MostReadTag = {
-  value: 'javascript',
-  count: 4,
-  percentage: 0.8,
-  total: 5,
-};
-
-const renderComponent = (tag: MostReadTag = defaultTopTag) => {
-  const client = new QueryClient();
-  return render(
-    <TestBootProvider client={client}>
-      <ReadingTagProgress tag={tag} />
-    </TestBootProvider>,
-  );
-};
-
-describe('ProfileTooltipContent component', () => {
-  it('should show tag', async () => {
-    renderComponent();
-    await screen.findByText(`#${defaultTopTag.value}`);
-  });
-
-  it('should show the percentage', async () => {
-    renderComponent();
-    const percentage = (defaultTopTag.percentage * 100).toFixed(0);
-    const value = `${percentage}%`;
-    await screen.findByText(value);
-    const progress = await screen.findByTestId('tagProgress');
-    expect(progress.style.width).toEqual(value);
-  });
-
-  it('should show default tooltip', async () => {
-    renderComponent();
-    const { count, total } = defaultTopTag;
-    await screen.findByLabelText(`${count}/${total} reading days`);
-  });
-});
diff --git a/packages/shared/src/components/profile/ReadingTagProgress.tsx b/packages/shared/src/components/profile/ReadingTagProgress.tsx
deleted file mode 100644
index 65aad8d9ff..0000000000
--- a/packages/shared/src/components/profile/ReadingTagProgress.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { ReactElement } from 'react';
-import React from 'react';
-import type { MostReadTag } from '../../graphql/users';
-import Link from '../utilities/Link';
-import { getTagPageLink } from '../../lib';
-import { Tooltip } from '../tooltip/Tooltip';
-
-interface ReadingTagProgressProps {
-  tag: MostReadTag;
-}
-
-export function ReadingTagProgress({
-  tag: { value: tag, count, percentage, total },
-}: ReadingTagProgressProps): ReactElement {
-  const value = `${(percentage * 100).toFixed(0)}%`;
-
-  return (
-    <Tooltip content={`${count}/${total} reading days`} side="top">
-      <div
-        key={tag}
-        className="relative flex flex-row overflow-hidden rounded-10 border border-background-subtle p-1 px-3 pb-2 font-bold text-text-tertiary typo-callout"
-      >
-        <Link href={getTagPageLink(tag)} passHref prefetch={false}>
-          <a>#{tag}</a>
-        </Link>
-        <span className="ml-auto text-text-primary">{value}</span>
-        <div
-          className="absolute bottom-0 left-0 h-1 overflow-hidden rounded-8 bg-text-primary"
-          style={{ width: value }}
-          data-testid="tagProgress"
-        />
-      </div>
-    </Tooltip>
-  );
-}
diff --git a/packages/shared/src/components/profile/ReadingTagsWidget.tsx b/packages/shared/src/components/profile/ReadingTagsWidget.tsx
deleted file mode 100644
index 8974d6411f..0000000000
--- a/packages/shared/src/components/profile/ReadingTagsWidget.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { ReactElement } from 'react';
-import React from 'react';
-import type { MostReadTag } from '../../graphql/users';
-import { ActivityContainer, ActivitySectionHeader } from './ActivitySection';
-import { ReadingTagProgress } from './ReadingTagProgress';
-
-export interface ReadingTagsWidgetProps {
-  mostReadTags: MostReadTag[];
-}
-
-export function ReadingTagsWidget({
-  mostReadTags,
-}: ReadingTagsWidgetProps): ReactElement {
-  return (
-    <ActivityContainer>
-      <ActivitySectionHeader title="Top tags by reading days" />
-      <div className="grid max-w-[17rem] grid-cols-1 gap-3 tablet:max-w-full tablet:grid-cols-2 tablet:gap-x-10">
-        {mostReadTags?.map((tag) => (
-          <ReadingTagProgress key={tag.value} tag={tag} />
-        ))}
-      </div>
-    </ActivityContainer>
-  );
-}
diff --git a/packages/shared/src/components/profile/Readme.tsx b/packages/shared/src/components/profile/Readme.tsx
deleted file mode 100644
index 4c6860f57f..0000000000
--- a/packages/shared/src/components/profile/Readme.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import type { FormEventHandler, ReactElement } from 'react';
-import React, { useContext } from 'react';
-import type { PublicProfile } from '../../lib/user';
-import AuthContext from '../../contexts/AuthContext';
-import { MyProfileEmptyScreen } from './MyProfileEmptyScreen';
-import Markdown from '../Markdown';
-import MarkdownInput from '../fields/MarkdownInput';
-import { formToJson } from '../../lib/form';
-import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
-import { useProfileReadme } from '../../hooks/profile/useProfileReadme';
-
-export interface ReadmeProps {
-  user: PublicProfile;
-}
-
-function ReadonlyReadme({
-  isSameUser,
-  readme,
-  onClick,
-}: {
-  isSameUser: boolean;
-  readme?: string;
-  onClick: () => unknown;
-}): ReactElement {
-  // Markdown is supported only in the client due to sanitization
-  const isClient = typeof window !== 'undefined';
-
-  if (!isClient) {
-    return <></>;
-  }
-
-  return (
-    <>
-      {isSameUser && (
-        <Button
-          variant={ButtonVariant.Secondary}
-          size={ButtonSize.Small}
-          onClick={onClick}
-          className="self-start"
-        >
-          Edit readme
-        </Button>
-      )}
-      <Markdown content={readme} />
-    </>
-  );
-}
-
-function EditableReadme({
-  readme,
-  updateReadme,
-  isLoading,
-}: {
-  readme: string;
-  updateReadme: (content: string) => unknown;
-  isLoading: boolean;
-}): ReactElement {
-  const onSubmitForm: FormEventHandler<HTMLFormElement> = (e) => {
-    e.preventDefault();
-    const { content } = formToJson<{ content: string }>(e.currentTarget);
-    return updateReadme(content);
-  };
-
-  return (
-    <form action="#" className="flex flex-col" onSubmit={onSubmitForm}>
-      <MarkdownInput
-        textareaProps={{
-          name: 'content',
-          rows: 7,
-        }}
-        initialContent={readme}
-        enabledCommand={{ upload: true, link: true, mention: false }}
-        submitCopy="Done"
-        showMarkdownGuide
-        onSubmit={(e) => updateReadme(e.currentTarget.value)}
-        isLoading={isLoading}
-      />
-    </form>
-  );
-}
-
-export function Readme({ user }: ReadmeProps): ReactElement {
-  const { user: loggedUser } = useContext(AuthContext);
-  const isSameUser = loggedUser?.id === user.id;
-  const readme = user?.readmeHtml;
-
-  const {
-    readme: mdReadme,
-    updateReadme,
-    isLoadingReadme,
-    editMode,
-    setEditMode,
-    submitting,
-  } = useProfileReadme(user);
-
-  if (editMode) {
-    return (
-      <EditableReadme
-        readme={mdReadme}
-        updateReadme={updateReadme}
-        isLoading={isLoadingReadme || submitting}
-      />
-    );
-  }
-  if (!readme && isSameUser) {
-    return (
-      <MyProfileEmptyScreen
-        className="items-start"
-        text="Do you love breaking production? Share with the world what has brought you so far"
-        cta="Add readme"
-        buttonProps={{ onClick: () => setEditMode(true) }}
-      />
-    );
-  }
-  return (
-    <ReadonlyReadme
-      isSameUser={isSameUser}
-      onClick={() => setEditMode(true)}
-      readme={readme}
-    />
-  );
-}
diff --git a/packages/shared/src/components/profile/SocialChips.tsx b/packages/shared/src/components/profile/SocialChips.tsx
deleted file mode 100644
index e390f3b37f..0000000000
--- a/packages/shared/src/components/profile/SocialChips.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import type { ReactElement } from 'react';
-import React from 'react';
-import {
-  GitHubIcon,
-  TwitterIcon,
-  LinkIcon,
-  LinkedInIcon,
-  YoutubeIcon,
-  StackOverflowIcon,
-  RedditIcon,
-  RoadmapIcon,
-  MastodonIcon,
-  BlueskyIcon,
-  ThreadsIcon,
-  CodePenIcon,
-} from '../icons';
-import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
-import { withHttps, withoutProtocol } from '../../lib/links';
-import { useLogContext } from '../../contexts/LogContext';
-import { combinedClicks } from '../../lib/click';
-import { LogEvent, TargetType } from '../../lib/log';
-
-export interface SocialChipsProps {
-  links: {
-    github?: string;
-    twitter?: string;
-    portfolio?: string;
-    roadmap?: string;
-    threads?: string;
-    codepen?: string;
-    reddit?: string;
-    stackoverflow?: string;
-    youtube?: string;
-    linkedin?: string;
-    mastodon?: string;
-    bluesky?: string;
-  };
-}
-
-const handlers: Record<
-  keyof SocialChipsProps['links'],
-  {
-    icon: ReactElement;
-    href: (x: string) => string;
-    label: (x: string) => string;
-  }
-> = {
-  github: {
-    icon: <GitHubIcon />,
-    href: (x) => `https://github.com/${x}`,
-    label: (x) => `@${x}`,
-  },
-  twitter: {
-    icon: <TwitterIcon />,
-    href: (x) => `https://x.com/${x}`,
-    label: (x) => `@${x}`,
-  },
-  portfolio: {
-    icon: <LinkIcon />,
-    href: (x) => withHttps(x),
-    // Strip protocol from url
-    label: (x) => withoutProtocol(x),
-  },
-  linkedin: {
-    icon: <LinkedInIcon />,
-    href: (x) => `https://linkedin.com/in/${x}`,
-    label: (x) => x,
-  },
-  youtube: {
-    icon: <YoutubeIcon />,
-    href: (x) => `https://youtube.com/@${x}`,
-    label: (x) => `@${x}`,
-  },
-  stackoverflow: {
-    icon: <StackOverflowIcon />,
-    href: (x) => `https://stackoverflow.com/users/${x}`,
-    label: (x) => x.split('/')[1] || x,
-  },
-  reddit: {
-    icon: <RedditIcon />,
-    href: (x) => `https://reddit.com/user/${x}`,
-    label: (x) => `u/${x}`,
-  },
-  roadmap: {
-    icon: <RoadmapIcon />,
-    href: (x) => `https://roadmap.sh/u/${x}`,
-    label: (x) => x,
-  },
-  mastodon: {
-    icon: <MastodonIcon />,
-    href: (x) => x,
-    label: (x) => withoutProtocol(x),
-  },
-  bluesky: {
-    icon: <BlueskyIcon />,
-    href: (x) => `https://bsky.app/profile/${x}`,
-    label: (x) => x,
-  },
-  threads: {
-    icon: <ThreadsIcon />,
-    href: (x) => `https://threads.net/@${x}`,
-    label: (x) => `@${x}`,
-  },
-  codepen: {
-    icon: <CodePenIcon />,
-    href: (x) => `https://codepen.io/${x}`,
-    label: (x) => x,
-  },
-};
-const order: (keyof SocialChipsProps['links'])[] = [
-  'github',
-  'linkedin',
-  'portfolio',
-  'twitter',
-  'youtube',
-  'stackoverflow',
-  'reddit',
-  'roadmap',
-  'codepen',
-  'mastodon',
-  'bluesky',
-  'threads',
-];
-
-export function SocialChips({ links }: SocialChipsProps): ReactElement {
-  const { logEvent } = useLogContext();
-
-  const elements = order
-    .filter((key) => !!links[key])
-    .map((key) => (
-      <Button
-        icon={handlers[key].icon}
-        size={ButtonSize.Small}
-        variant={ButtonVariant.Subtle}
-        tag="a"
-        target="_blank"
-        rel="noopener"
-        href={handlers[key].href(links[key])}
-        key={key}
-        data-testid={key}
-        {...combinedClicks(() => {
-          logEvent({
-            event_name: LogEvent.Click,
-            target_type: TargetType.SocialLink,
-            target_id: key,
-          });
-        })}
-      >
-        {handlers[key].label(links[key])}
-      </Button>
-    ));
-
-  if (!elements.length) {
-    return <></>;
-  }
-
-  return (
-    <div className="no-scrollbar flex items-center gap-2 overflow-x-auto px-4 laptop:flex-wrap">
-      {elements}
-    </div>
-  );
-}
diff --git a/packages/shared/src/components/profile/TopReaderWidget.tsx b/packages/shared/src/components/profile/TopReaderWidget.tsx
deleted file mode 100644
index 23ccfaff90..0000000000
--- a/packages/shared/src/components/profile/TopReaderWidget.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import type { ReactElement } from 'react';
-import React from 'react';
-import classNames from 'classnames';
-import {
-  ActivityContainer,
-  ActivitySectionHeader,
-  ActivitySectionSubTitle,
-} from './ActivitySection';
-import { topReaderBadgeDocs } from '../../lib/constants';
-import { MedalBadgeIcon } from '../icons';
-import { IconSize } from '../Icon';
-import { BadgeIconGoldGradient } from '../badges/BadgeIcon';
-import {
-  Typography,
-  TypographyColor,
-  TypographyTag,
-  TypographyType,
-} from '../typography/Typography';
-import { formatDate, TimeFormatType } from '../../lib/dateFormat';
-import type { PublicProfile } from '../../lib/user';
-import { ClickableText } from '../buttons/ClickableText';
-import { useTopReader } from '../../hooks/useTopReader';
-import Link from '../utilities/Link';
-import { getTagPageLink } from '../../lib';
-import { truncateTextClassNames } from '../utilities';
-
-export const TopReaderWidget = ({
-  user,
-}: {
-  user: PublicProfile;
-}): ReactElement => {
-  const { data: topReaders, isPending: isTopReaderLoading } = useTopReader({
-    user,
-    limit: 5,
-  });
-
-  if (isTopReaderLoading || topReaders?.length === 0) {
-    return null;
-  }
-
-  return (
-    <ActivityContainer>
-      <ActivitySectionHeader className="flex-wrap" title="Badges">
-        <ActivitySectionSubTitle className="w-full">
-          Understand more how this is computed in&nbsp;
-          <ClickableText
-            className="!inline"
-            tag="a"
-            target="_blank"
-            href={topReaderBadgeDocs}
-          >
-            daily.dev docs
-          </ClickableText>
-        </ActivitySectionSubTitle>
-      </ActivitySectionHeader>
-
-      <div className="min-w-60 max-w-fit rounded-10 border border-border-subtlest-tertiary p-3">
-        <div className="flex">
-          <MedalBadgeIcon
-            secondary
-            size={IconSize.XLarge}
-            fill="url(#goldGradient)"
-          />
-          <BadgeIconGoldGradient />
-          <div className="flex flex-col">
-            <Typography
-              type={TypographyType.Body}
-              color={TypographyColor.Primary}
-              bold
-            >
-              X{topReaders[0]?.total ?? 0}
-            </Typography>
-            <Typography
-              type={TypographyType.Footnote}
-              color={TypographyColor.Tertiary}
-            >
-              Top reader
-            </Typography>
-          </div>
-        </div>
-
-        <div className="mt-3 flex flex-col gap-3">
-          {topReaders.map((badge) => {
-            return (
-              <div className="flex justify-between" key={`badge-${badge.id}`}>
-                <Link
-                  href={getTagPageLink(badge.keyword.value)}
-                  passHref
-                  prefetch={false}
-                >
-                  <Typography
-                    tag={TypographyTag.Link}
-                    type={TypographyType.Caption1}
-                    color={TypographyColor.Primary}
-                    className={classNames(
-                      'max-w-[32ch] rounded-6 border border-border-subtlest-tertiary px-2.5 py-0.5 transition duration-200 hover:bg-background-popover',
-                      truncateTextClassNames,
-                    )}
-                  >
-                    {badge.keyword.flags?.title || badge.keyword.value}
-                  </Typography>
-                </Link>
-                <Typography
-                  tag={TypographyTag.Time}
-                  type={TypographyType.Caption2}
-                  color={TypographyColor.Quaternary}
-                  dateTime={new Date(badge.issuedAt).toISOString()}
-                  className="ml-8 self-center"
-                >
-                  {formatDate({
-                    value: badge.issuedAt,
-                    type: TimeFormatType.TopReaderBadge,
-                  })}
-                </Typography>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </ActivityContainer>
-  );
-};
diff --git a/packages/shared/src/components/profile/UserStats.tsx b/packages/shared/src/components/profile/UserStats.tsx
index 390639a156..8447de41a1 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/components/profile/YearSelect.tsx b/packages/shared/src/components/profile/YearSelect.tsx
new file mode 100644
index 0000000000..9a17671b96
--- /dev/null
+++ b/packages/shared/src/components/profile/YearSelect.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import Select from '../fields/Select';
+import { ButtonSize } from '../buttons/Button';
+import type { IconType } from '../buttons/Button';
+
+const generateYearOptions = (): { label: string; value: string }[] => {
+  const currentYear = new Date().getFullYear();
+  const years: { label: string; value: string }[] = [];
+
+  for (let i = 0; i < 100; i += 1) {
+    const year = currentYear - i;
+    years.push({ label: year.toString(), value: year.toString() });
+  }
+
+  return years;
+};
+
+export const YEAR_OPTIONS = generateYearOptions();
+
+type YearSelectProps = {
+  name: string;
+  icon?: IconType;
+  placeholder?: string;
+  onSelect?: (value: string) => void;
+};
+
+const YearSelect = ({ name, icon, placeholder, onSelect }: YearSelectProps) => {
+  return (
+    <Select
+      icon={icon}
+      options={YEAR_OPTIONS}
+      name={name}
+      placeholder={placeholder}
+      buttonProps={{
+        size: ButtonSize.Large,
+      }}
+      onSelect={onSelect}
+    />
+  );
+};
+
+export default YearSelect;
diff --git a/packages/shared/src/features/profile/common.ts b/packages/shared/src/features/profile/common.ts
new file mode 100644
index 0000000000..12bed6510d
--- /dev/null
+++ b/packages/shared/src/features/profile/common.ts
@@ -0,0 +1,4 @@
+export const profileSecondaryFieldStyles = {
+  outerLabel: '!px-0 !typo-callout',
+  baseField: '!h-12',
+};
diff --git a/packages/shared/src/features/profile/components/AboutMe.spec.tsx b/packages/shared/src/features/profile/components/AboutMe.spec.tsx
new file mode 100644
index 0000000000..f500884eb9
--- /dev/null
+++ b/packages/shared/src/features/profile/components/AboutMe.spec.tsx
@@ -0,0 +1,152 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { PublicProfile } from '../../../lib/user';
+import { AboutMe } from './AboutMe';
+import { getLogContextStatic } from '../../../contexts/LogContext';
+
+const LogContext = getLogContextStatic();
+
+const mockLogEvent = jest.fn();
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  // Mock window for client-side check
+  Object.defineProperty(window, 'innerWidth', {
+    writable: true,
+    configurable: true,
+    value: 1024,
+  });
+});
+
+const baseUser: PublicProfile = {
+  id: 'u1',
+  name: 'Test User',
+  username: 'testuser',
+  image: 'https://daily.dev/user.png',
+  permalink: 'https://daily.dev/testuser',
+  reputation: 100,
+  createdAt: '2020-01-01T00:00:00.000Z',
+  premium: false,
+};
+
+const userWithReadme: PublicProfile = {
+  ...baseUser,
+  readmeHtml: 'This is my awesome bio with some **markdown**!',
+};
+
+const userWithSocialLinks: PublicProfile = {
+  ...userWithReadme,
+  twitter: 'testuser',
+  github: 'testuser',
+  linkedin: 'https://linkedin.com/in/testuser',
+  portfolio: 'https://testuser.com',
+  youtube: 'testuser',
+  stackoverflow: '123456/testuser',
+  reddit: 'testuser',
+  roadmap: 'testuser',
+  codepen: 'testuser',
+  mastodon: 'https://mastodon.social/@testuser',
+  bluesky: 'testuser.bsky.social',
+  threads: 'testuser',
+};
+
+const renderComponent = (user: Partial<PublicProfile> = {}) => {
+  const mergedUser = { ...baseUser, ...user };
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <LogContext.Provider
+        value={{
+          logEvent: mockLogEvent,
+          logEventStart: jest.fn(),
+          logEventEnd: jest.fn(),
+          sendBeacon: jest.fn(),
+        }}
+      >
+        <AboutMe user={mergedUser} />
+      </LogContext.Provider>
+    </QueryClientProvider>,
+  );
+};
+
+describe('AboutMe', () => {
+  describe('Rendering', () => {
+    it('should not render when both readme and social links are not present', () => {
+      const { container } = renderComponent();
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should render when readme is present', () => {
+      renderComponent(userWithReadme);
+      expect(screen.getByText('About me')).toBeInTheDocument();
+      expect(
+        screen.getByText('This is my awesome bio with some **markdown**!'),
+      ).toBeInTheDocument();
+    });
+
+    it('should render with social links when user has them', () => {
+      renderComponent(userWithSocialLinks);
+      expect(screen.getByTestId('social-link-github')).toBeInTheDocument();
+      expect(screen.getByTestId('social-link-linkedin')).toBeInTheDocument();
+      expect(screen.getByTestId('social-link-portfolio')).toBeInTheDocument();
+    });
+  });
+
+  describe('Social Links', () => {
+    it('should show only first 3 social links initially', () => {
+      renderComponent(userWithSocialLinks);
+      const allLinks = screen.getAllByTestId(/^social-link-/);
+      expect(allLinks.length).toBe(3);
+    });
+
+    it('should show "+N" button when more than 3 links', () => {
+      renderComponent(userWithSocialLinks);
+      const showAllButton = screen.getByTestId('show-all-links');
+      expect(showAllButton).toBeInTheDocument();
+      // 12 total links - 3 visible = 9 more
+      expect(showAllButton).toHaveTextContent('+9');
+    });
+
+    it('should show all links when "+N" button is clicked', async () => {
+      renderComponent(userWithSocialLinks);
+      const showAllButton = screen.getByTestId('show-all-links');
+      fireEvent.click(showAllButton);
+
+      await waitFor(() => {
+        const allLinks = screen.getAllByTestId(/^social-link-/);
+        expect(allLinks.length).toBe(12); // All 12 social links
+      });
+    });
+
+    it('should hide "+N" button after showing all links', async () => {
+      renderComponent(userWithSocialLinks);
+      const showAllButton = screen.getByTestId('show-all-links');
+      fireEvent.click(showAllButton);
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('show-all-links')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Analytics', () => {
+    it('should log click event for social links', () => {
+      renderComponent(userWithSocialLinks);
+      const githubLink = screen.getByTestId('social-link-github');
+      fireEvent.click(githubLink);
+
+      expect(mockLogEvent).toHaveBeenCalledWith({
+        event_name: 'click',
+        target_type: 'social link',
+        target_id: 'github',
+      });
+    });
+  });
+});
diff --git a/packages/shared/src/features/profile/components/AboutMe.tsx b/packages/shared/src/features/profile/components/AboutMe.tsx
new file mode 100644
index 0000000000..01ef62d4da
--- /dev/null
+++ b/packages/shared/src/features/profile/components/AboutMe.tsx
@@ -0,0 +1,214 @@
+import type { ReactElement } from 'react';
+import React, { useMemo, useState } from 'react';
+import classNames from 'classnames';
+import type { PublicProfile } from '../../../lib/user';
+import Markdown from '../../../components/Markdown';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import {
+  Typography,
+  TypographyType,
+  TypographyColor,
+} from '../../../components/typography/Typography';
+import {
+  BlueskyIcon,
+  CodePenIcon,
+  GitHubIcon,
+  LinkedInIcon,
+  LinkIcon,
+  MastodonIcon,
+  RedditIcon,
+  RoadmapIcon,
+  StackOverflowIcon,
+  ThreadsIcon,
+  TwitterIcon,
+  YoutubeIcon,
+} from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import { SimpleTooltip } from '../../../components/tooltips/SimpleTooltip';
+import { ExpandableContent } from '../../../components/ExpandableContent';
+import { useLogContext } from '../../../contexts/LogContext';
+import { combinedClicks } from '../../../lib/click';
+import { LogEvent, TargetType } from '../../../lib/log';
+import { anchorDefaultRel } from '../../../lib/strings';
+
+export interface AboutMeProps {
+  user: PublicProfile;
+  className?: string;
+}
+
+const MAX_VISIBLE_LINKS = 3;
+
+interface SocialLink {
+  id: string;
+  url: string;
+  icon: ReactElement;
+  label: string;
+}
+
+export function AboutMe({
+  user,
+  className,
+}: AboutMeProps): ReactElement | null {
+  const [showAllLinks, setShowAllLinks] = useState(false);
+  const readme = user?.readmeHtml;
+  const { logEvent } = useLogContext();
+
+  // Markdown is supported only in the client due to sanitization
+  const isClient = typeof window !== 'undefined';
+
+  const socialLinks = useMemo(() => {
+    return [
+      user.github && {
+        id: 'github',
+        url: `https://github.com/${user.github}`,
+        icon: <GitHubIcon size={IconSize.XSmall} />,
+        label: 'GitHub',
+      },
+      user.linkedin && {
+        id: 'linkedin',
+        url: user.linkedin,
+        icon: <LinkedInIcon size={IconSize.XSmall} />,
+        label: 'LinkedIn',
+      },
+      user.portfolio && {
+        id: 'portfolio',
+        url: user.portfolio,
+        icon: <LinkIcon size={IconSize.XSmall} />,
+        label: 'Portfolio',
+      },
+      user.twitter && {
+        id: 'twitter',
+        url: `https://x.com/${user.twitter}`,
+        icon: <TwitterIcon size={IconSize.XSmall} />,
+        label: 'Twitter',
+      },
+      user.youtube && {
+        id: 'youtube',
+        url: `https://youtube.com/@${user.youtube}`,
+        icon: <YoutubeIcon size={IconSize.XSmall} />,
+        label: 'YouTube',
+      },
+      user.stackoverflow && {
+        id: 'stackoverflow',
+        url: `https://stackoverflow.com/users/${user.stackoverflow}`,
+        icon: <StackOverflowIcon size={IconSize.XSmall} />,
+        label: 'Stack Overflow',
+      },
+      user.reddit && {
+        id: 'reddit',
+        url: `https://reddit.com/user/${user.reddit}`,
+        icon: <RedditIcon size={IconSize.XSmall} />,
+        label: 'Reddit',
+      },
+      user.roadmap && {
+        id: 'roadmap',
+        url: `https://roadmap.sh/u/${user.roadmap}`,
+        icon: <RoadmapIcon size={IconSize.XSmall} />,
+        label: 'Roadmap.sh',
+      },
+      user.codepen && {
+        id: 'codepen',
+        url: `https://codepen.io/${user.codepen}`,
+        icon: <CodePenIcon size={IconSize.XSmall} />,
+        label: 'CodePen',
+      },
+      user.mastodon && {
+        id: 'mastodon',
+        url: user.mastodon,
+        icon: <MastodonIcon size={IconSize.XSmall} />,
+        label: 'Mastodon',
+      },
+      user.bluesky && {
+        id: 'bluesky',
+        url: `https://bsky.app/profile/${user.bluesky}`,
+        icon: <BlueskyIcon size={IconSize.XSmall} />,
+        label: 'Bluesky',
+      },
+      user.threads && {
+        id: 'threads',
+        url: `https://threads.net/@${user.threads}`,
+        icon: <ThreadsIcon size={IconSize.XSmall} />,
+        label: 'Threads',
+      },
+    ].filter(Boolean) as SocialLink[];
+  }, [user]);
+
+  const visibleLinks = showAllLinks
+    ? socialLinks
+    : socialLinks.slice(0, MAX_VISIBLE_LINKS);
+  const hasMoreLinks = socialLinks.length > MAX_VISIBLE_LINKS;
+
+  const shouldShowReadme = readme && isClient;
+  const shouldShowSocialLinks = socialLinks.length > 0;
+
+  if (!shouldShowReadme && !shouldShowSocialLinks) {
+    return null;
+  }
+
+  return (
+    <div className={classNames('py-4', className)}>
+      <ExpandableContent maxHeight={320}>
+        <div className="flex flex-col gap-4">
+          <Typography
+            type={TypographyType.Body}
+            color={TypographyColor.Primary}
+            bold
+          >
+            About me
+          </Typography>
+
+          <div className="flex flex-1 flex-col gap-4">
+            {shouldShowSocialLinks && (
+              <div className="flex flex-wrap items-center gap-2">
+                {visibleLinks.map((link) => (
+                  <SimpleTooltip key={link.id} content={link.label}>
+                    <Button
+                      variant={ButtonVariant.Subtle}
+                      size={ButtonSize.Small}
+                      tag="a"
+                      href={link.url}
+                      target="_blank"
+                      rel={anchorDefaultRel}
+                      icon={link.icon}
+                      aria-label={link.label}
+                      data-testid={`social-link-${link.id}`}
+                      {...combinedClicks(() => {
+                        logEvent({
+                          event_name: LogEvent.Click,
+                          target_type: TargetType.SocialLink,
+                          target_id: link.id,
+                        });
+                      })}
+                    />
+                  </SimpleTooltip>
+                ))}
+                {hasMoreLinks && !showAllLinks && (
+                  <SimpleTooltip content="Show all links">
+                    <Button
+                      variant={ButtonVariant.Subtle}
+                      size={ButtonSize.Small}
+                      onClick={() => setShowAllLinks(true)}
+                      data-testid="show-all-links"
+                    >
+                      +{socialLinks.length - MAX_VISIBLE_LINKS}
+                    </Button>
+                  </SimpleTooltip>
+                )}
+              </div>
+            )}
+
+            {shouldShowReadme && (
+              <div>
+                <Markdown content={readme} />
+              </div>
+            )}
+          </div>
+        </div>
+      </ExpandableContent>
+    </div>
+  );
+}
diff --git a/packages/shared/src/features/profile/components/Activity.helpers.tsx b/packages/shared/src/features/profile/components/Activity.helpers.tsx
new file mode 100644
index 0000000000..a609f773d7
--- /dev/null
+++ b/packages/shared/src/features/profile/components/Activity.helpers.tsx
@@ -0,0 +1,219 @@
+import type { ReactElement } from 'react';
+import React, { useMemo } from 'react';
+import { MyProfileEmptyScreen } from '../../../components/profile/MyProfileEmptyScreen';
+import { ProfileEmptyScreen } from '../../../components/profile/ProfileEmptyScreen';
+import { link } from '../../../lib/links';
+import {
+  OtherFeedPage,
+  generateQueryKey,
+  RequestKey,
+} from '../../../lib/query';
+import type { FeedProps } from '../../../components/Feed';
+import {
+  AUTHOR_FEED_QUERY,
+  USER_UPVOTED_FEED_QUERY,
+} from '../../../graphql/feed';
+
+export type ActivityTab = { id: string; title: string; path: string };
+
+export interface FeedData {
+  pages?: Array<{
+    page?: {
+      edges?: Array<unknown>;
+    };
+  }>;
+}
+
+export interface CommentsData {
+  page?: {
+    edges?: Array<unknown>;
+  };
+}
+
+export enum ActivityTabIndex {
+  Posts = 0,
+  Replies = 1,
+  Upvoted = 2,
+}
+
+export const activityTabs: ActivityTab[] = [
+  {
+    id: 'posts',
+    title: 'Posts',
+    path: '/posts',
+  },
+  {
+    id: 'replies',
+    title: 'Replies',
+    path: '/replies',
+  },
+  {
+    id: 'upvoted',
+    title: 'Upvoted',
+    path: '/upvoted',
+  },
+];
+
+export const COMMENT_CLASS_NAME = {
+  container: 'rounded-none border-0 border-b',
+  commentBox: {
+    container: 'relative border-0 rounded-none',
+  },
+} as const;
+
+export const MIN_ITEMS_FOR_SHOW_MORE = 3;
+export const HORIZONTAL_FEED_CLASSES =
+  '[&_.grid]:!auto-cols-[17rem] [&_.grid]:gap-4';
+export const TAB_ITEMS = activityTabs.map((tab) => ({ label: tab.title }));
+
+export const ACTIVITY_QUERY_KEYS = {
+  posts: (userId: string) => ['author', userId] as const,
+  upvoted: (userId: string) => [OtherFeedPage.UserUpvoted, userId] as const,
+  comments: (userId: string) =>
+    generateQueryKey(RequestKey.UserComments, null, userId, 'activity'),
+} as const;
+
+export const getItemCount = (
+  data: FeedData | CommentsData | undefined,
+  tabIndex: ActivityTabIndex,
+): number => {
+  if (!data) {
+    return 0;
+  }
+
+  switch (tabIndex) {
+    case ActivityTabIndex.Posts:
+    case ActivityTabIndex.Upvoted:
+      return (data as FeedData)?.pages?.[0]?.page?.edges?.length ?? 0;
+    case ActivityTabIndex.Replies:
+      return (data as CommentsData)?.page?.edges?.length ?? 0;
+    default:
+      return 0;
+  }
+};
+
+export const getUserPath = (
+  username: string | undefined,
+  userId: string | undefined,
+  path: string,
+): string => {
+  const userIdentifier = username || userId;
+  return `/${userIdentifier}${path}`;
+};
+
+export const renderEmptyScreen = (
+  tabIndex: ActivityTabIndex,
+  isSameUser: boolean,
+  userName: string,
+): ReactElement | null => {
+  if (isSameUser) {
+    switch (tabIndex) {
+      case ActivityTabIndex.Posts:
+        return (
+          <MyProfileEmptyScreen
+            className="min-h-[27.125rem] items-center justify-center px-4 py-6 text-center tablet:px-6"
+            text="Hardest part of being a developer? Where do we start – it's everything. Go on, share with us your best rant."
+            cta="New post"
+            buttonProps={{ tag: 'a', href: link.post.create }}
+          />
+        );
+      case ActivityTabIndex.Upvoted:
+        return (
+          <MyProfileEmptyScreen
+            className="min-h-[27.125rem] items-center justify-center px-4 py-6 text-center tablet:px-6"
+            text="Trapped in endless meetings? Make the most of It - Find posts you love and upvote away!"
+            cta="Explore posts"
+            buttonProps={{ tag: 'a', href: '/' }}
+          />
+        );
+      case ActivityTabIndex.Replies:
+        return (
+          <MyProfileEmptyScreen
+            className="min-h-[27.125rem] items-center justify-center px-4 py-6 text-center tablet:px-6"
+            text="All tests have passed on the first try and you have no idea why? Time for a break. Browse the feed and join a discussion!"
+            cta="Explore posts"
+            buttonProps={{ tag: 'a', href: '/' }}
+          />
+        );
+      default:
+        return null;
+    }
+  }
+
+  // Other user's profile
+  switch (tabIndex) {
+    case ActivityTabIndex.Posts:
+      return (
+        <ProfileEmptyScreen
+          title={`${userName} hasn't posted yet`}
+          text="Once they do, those posts will show up here."
+        />
+      );
+    case ActivityTabIndex.Upvoted:
+      return (
+        <ProfileEmptyScreen
+          title={`${userName} hasn't upvoted yet`}
+          text="Once they do, those posts will show up here."
+        />
+      );
+    case ActivityTabIndex.Replies:
+      return (
+        <ProfileEmptyScreen
+          title={`${userName} hasn't replied to any post yet`}
+          text="Once they do, those replies will show up here."
+        />
+      );
+    default:
+      return null;
+  }
+};
+
+export const useActivityFeedProps = (
+  userId: string,
+  isSameUser: boolean,
+  userName: string,
+) => {
+  const postsFeedProps: FeedProps<unknown> = useMemo(
+    () => ({
+      feedName: OtherFeedPage.Author,
+      feedQueryKey: ACTIVITY_QUERY_KEYS.posts(userId),
+      query: AUTHOR_FEED_QUERY,
+      variables: {
+        userId,
+      },
+      disableAds: true,
+      allowFetchMore: false,
+      pageSize: 10,
+      isHorizontal: true,
+      emptyScreen: renderEmptyScreen(
+        ActivityTabIndex.Posts,
+        isSameUser,
+        userName,
+      ),
+    }),
+    [userId, isSameUser, userName],
+  );
+
+  const upvotedFeedProps: FeedProps<unknown> = useMemo(
+    () => ({
+      feedName: OtherFeedPage.UserUpvoted,
+      feedQueryKey: ACTIVITY_QUERY_KEYS.upvoted(userId),
+      query: USER_UPVOTED_FEED_QUERY,
+      variables: {
+        userId,
+      },
+      disableAds: true,
+      allowFetchMore: false,
+      pageSize: 10,
+      isHorizontal: true,
+      emptyScreen: renderEmptyScreen(
+        ActivityTabIndex.Upvoted,
+        isSameUser,
+        userName,
+      ),
+    }),
+    [userId, isSameUser, userName],
+  );
+
+  return { postsFeedProps, upvotedFeedProps };
+};
diff --git a/packages/shared/src/features/profile/components/Activity.tsx b/packages/shared/src/features/profile/components/Activity.tsx
new file mode 100644
index 0000000000..a3f6b7c1e5
--- /dev/null
+++ b/packages/shared/src/features/profile/components/Activity.tsx
@@ -0,0 +1,78 @@
+import type { ReactElement } from 'react';
+import React, { useContext, useState, useMemo, useCallback } from 'react';
+import type { PublicProfile } from '../../../lib/user';
+import AuthContext from '../../../contexts/AuthContext';
+import { ActivityTabIndex, activityTabs } from './Activity.helpers';
+import { ActivityPostsTab } from './ActivityPostsTab';
+import { ActivityUpvotedTab } from './ActivityUpvotedTab';
+import { ActivityRepliesTab } from './ActivityRepliesTab';
+
+type ActivityProps = {
+  user: PublicProfile;
+};
+
+export const Activity = ({ user }: ActivityProps): ReactElement | null => {
+  const [selectedTab, setSelectedTab] = useState<string>(activityTabs[0].title);
+  const { user: loggedUser } = useContext(AuthContext);
+  const isSameUser = user && loggedUser?.id === user.id;
+  const userId = user?.id;
+
+  const selectedTabIndex = useMemo(
+    () => activityTabs.findIndex((tab) => tab.title === selectedTab),
+    [selectedTab],
+  );
+
+  const handleTabClick = useCallback((label: string) => {
+    setSelectedTab(label);
+  }, []);
+
+  const renderContent = () => {
+    switch (selectedTabIndex) {
+      case ActivityTabIndex.Posts:
+        return (
+          <ActivityPostsTab
+            userId={userId}
+            isSameUser={isSameUser}
+            userName={user?.name ?? 'User'}
+            user={user}
+            selectedTab={selectedTab}
+            onTabClick={handleTabClick}
+          />
+        );
+      case ActivityTabIndex.Replies:
+        return (
+          <ActivityRepliesTab
+            userId={userId}
+            isSameUser={isSameUser}
+            userName={user?.name ?? 'User'}
+            user={user}
+            selectedTab={selectedTab}
+            onTabClick={handleTabClick}
+          />
+        );
+      case ActivityTabIndex.Upvoted:
+        return (
+          <ActivityUpvotedTab
+            userId={userId}
+            isSameUser={isSameUser}
+            userName={user?.name ?? 'User'}
+            user={user}
+            selectedTab={selectedTab}
+            onTabClick={handleTabClick}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  if (!userId) {
+    return null;
+  }
+
+  return (
+    <div className="mb-4 flex flex-col gap-3 overflow-hidden pt-6">
+      {renderContent()}
+    </div>
+  );
+};
diff --git a/packages/shared/src/features/profile/components/ActivityHeader.tsx b/packages/shared/src/features/profile/components/ActivityHeader.tsx
new file mode 100644
index 0000000000..26569d20c8
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ActivityHeader.tsx
@@ -0,0 +1,30 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  TypographyType,
+  Typography,
+} from '../../../components/typography/Typography';
+import TabList from '../../../components/tabs/TabList';
+import { TAB_ITEMS } from './Activity.helpers';
+
+export const ActivityHeader = ({
+  selectedTab,
+  onTabClick,
+}: {
+  selectedTab: string;
+  onTabClick: (label: string) => void;
+}): ReactElement => {
+  return (
+    <div className="flex flex-col gap-3">
+      <Typography type={TypographyType.Body} bold>
+        Activity
+      </Typography>
+      <TabList
+        items={TAB_ITEMS}
+        active={selectedTab}
+        onClick={onTabClick}
+        className={{ item: '!p-0 !pr-3', indicator: 'hidden' }}
+      />
+    </div>
+  );
+};
diff --git a/packages/shared/src/features/profile/components/ActivityPostsTab.tsx b/packages/shared/src/features/profile/components/ActivityPostsTab.tsx
new file mode 100644
index 0000000000..9681b2d7b3
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ActivityPostsTab.tsx
@@ -0,0 +1,97 @@
+import type { ReactElement } from 'react';
+import React, { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import type { PublicProfile } from '../../../lib/user';
+import { Button, ButtonVariant } from '../../../components/buttons/Button';
+import type { FeedProps } from '../../../components/Feed';
+import Link from '../../../components/utilities/Link';
+import { ButtonSize } from '../../../components/buttons/common';
+import type { FeedData } from './Activity.helpers';
+import {
+  ActivityTabIndex,
+  activityTabs,
+  MIN_ITEMS_FOR_SHOW_MORE,
+  ACTIVITY_QUERY_KEYS,
+  getItemCount,
+  getUserPath,
+  renderEmptyScreen,
+} from './Activity.helpers';
+import { OtherFeedPage } from '../../../lib/query';
+import { AUTHOR_FEED_QUERY } from '../../../graphql/feed';
+import { useHorizontalScrollHeader } from '../../../components/HorizontalScroll/useHorizontalScrollHeader';
+import { ActivityHeader } from './ActivityHeader';
+import { HorizontalFeedWithContext } from './HorizontalFeedWithContext';
+
+export const ActivityPostsTab = ({
+  userId,
+  isSameUser,
+  userName,
+  user,
+  selectedTab,
+  onTabClick,
+}: {
+  userId: string;
+  isSameUser: boolean;
+  userName: string;
+  user: PublicProfile;
+  selectedTab: string;
+  onTabClick: (label: string) => void;
+}): ReactElement => {
+  const feedProps: FeedProps<unknown> = useMemo(
+    () => ({
+      feedName: OtherFeedPage.Author,
+      feedQueryKey: ACTIVITY_QUERY_KEYS.posts(userId),
+      query: AUTHOR_FEED_QUERY,
+      variables: {
+        userId,
+      },
+      disableAds: true,
+      allowFetchMore: false,
+      pageSize: 10,
+      isHorizontal: true,
+      emptyScreen: renderEmptyScreen(
+        ActivityTabIndex.Posts,
+        isSameUser,
+        userName,
+      ),
+    }),
+    [userId, isSameUser, userName],
+  );
+
+  const { data: postsData } = useQuery<FeedData>({
+    queryKey: ACTIVITY_QUERY_KEYS.posts(userId),
+    enabled: false,
+  });
+
+  const shouldShowMoreButton = useMemo(() => {
+    const itemCount = getItemCount(postsData, ActivityTabIndex.Posts);
+    return itemCount > MIN_ITEMS_FOR_SHOW_MORE;
+  }, [postsData]);
+
+  const { ref, header } = useHorizontalScrollHeader({
+    title: <ActivityHeader selectedTab={selectedTab} onTabClick={onTabClick} />,
+    className: '!items-end !m-0',
+    buttonSize: ButtonSize.Small,
+  });
+
+  return (
+    <>
+      {header}
+      <HorizontalFeedWithContext feedProps={feedProps} feedRef={ref} />
+      {shouldShowMoreButton && (
+        <Link
+          href={getUserPath(
+            user?.username,
+            user?.id,
+            activityTabs[ActivityTabIndex.Posts].path,
+          )}
+          passHref
+        >
+          <Button tag="a" variant={ButtonVariant.Subtle} className="w-full">
+            Show More
+          </Button>
+        </Link>
+      )}
+    </>
+  );
+};
diff --git a/packages/shared/src/features/profile/components/ActivityRepliesTab.tsx b/packages/shared/src/features/profile/components/ActivityRepliesTab.tsx
new file mode 100644
index 0000000000..29a414852c
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ActivityRepliesTab.tsx
@@ -0,0 +1,136 @@
+import type { ReactElement } from 'react';
+import React, { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import classNames from 'classnames';
+import type { PublicProfile } from '../../../lib/user';
+import { Button, ButtonVariant } from '../../../components/buttons/Button';
+import { USER_COMMENTS_QUERY } from '../../../graphql/comments';
+import type { CommentFeedData } from '../../../graphql/comments';
+import { Origin } from '../../../lib/log';
+import Link from '../../../components/utilities/Link';
+import {
+  ActivityTabIndex,
+  activityTabs,
+  COMMENT_CLASS_NAME,
+  MIN_ITEMS_FOR_SHOW_MORE,
+  ACTIVITY_QUERY_KEYS,
+  getUserPath,
+  renderEmptyScreen,
+} from './Activity.helpers';
+import { ActivityHeader } from './ActivityHeader';
+import MainComment from '../../../components/comments/MainComment';
+import PlaceholderCommentList from '../../../components/comments/PlaceholderCommentList';
+import { useShareComment } from '../../../hooks/useShareComment';
+import { useUpvoteQuery } from '../../../hooks/useUpvoteQuery';
+import { useDeleteComment } from '../../../hooks/comments/useDeleteComment';
+import { gqlClient } from '../../../graphql/common';
+
+export const ActivityRepliesTab = ({
+  userId,
+  isSameUser,
+  userName,
+  user,
+  selectedTab,
+  onTabClick,
+}: {
+  userId: string;
+  isSameUser: boolean;
+  userName: string;
+  user: PublicProfile;
+  selectedTab: string;
+  onTabClick: (label: string) => void;
+}): ReactElement => {
+  const { openShareComment } = useShareComment(Origin.Profile);
+  const { onShowUpvoted } = useUpvoteQuery();
+  const { deleteComment } = useDeleteComment();
+
+  const queryResult = useQuery<CommentFeedData>({
+    queryKey: ACTIVITY_QUERY_KEYS.comments(userId),
+    queryFn: () =>
+      gqlClient.request(USER_COMMENTS_QUERY, {
+        userId,
+        first: 4,
+      }),
+  });
+
+  const showEmptyScreen = queryResult.data?.page?.edges?.length === 0;
+
+  const shouldShowMoreButton = useMemo(() => {
+    const itemCount = queryResult.data?.page?.edges?.length ?? 0;
+    return itemCount > MIN_ITEMS_FOR_SHOW_MORE;
+  }, [queryResult.data]);
+
+  if (queryResult.isPending) {
+    return (
+      <>
+        <div className="flex min-h-10 w-auto flex-row items-center justify-between laptop:w-full">
+          <ActivityHeader selectedTab={selectedTab} onTabClick={onTabClick} />
+        </div>
+        <PlaceholderCommentList
+          placeholderAmount={5}
+          className={classNames(
+            '!mt-0 border-border-subtlest-tertiary p-4',
+            COMMENT_CLASS_NAME?.container,
+          )}
+          showContextHeader
+        />
+      </>
+    );
+  }
+
+  const replies = queryResult.data?.page?.edges?.slice(0, 3);
+
+  return (
+    <>
+      <div className="flex min-h-10 w-auto flex-row items-center justify-between laptop:w-full">
+        <ActivityHeader selectedTab={selectedTab} onTabClick={onTabClick} />
+      </div>
+      {showEmptyScreen ? (
+        renderEmptyScreen(ActivityTabIndex.Replies, isSameUser, userName)
+      ) : (
+        <div className="w-full">
+          {replies?.map(({ node }) => (
+            <MainComment
+              key={node.id}
+              className={{
+                ...COMMENT_CLASS_NAME,
+                container: COMMENT_CLASS_NAME?.container,
+              }}
+              post={node.post}
+              comment={node}
+              origin={Origin.Profile}
+              onShare={(c) => openShareComment(c, c.post)}
+              onDelete={(comment, parentId) =>
+                deleteComment(comment.id, parentId, comment.post)
+              }
+              onShowUpvotes={(id, count) => onShowUpvoted(id, count, 'comment')}
+              onCommented={() => undefined}
+              postAuthorId={null}
+              postScoutId={null}
+              appendTooltipTo={() => document.body}
+              linkToComment
+              lazy
+              showContextHeader
+              logImpression
+              logClick
+            />
+          ))}
+        </div>
+      )}
+      {shouldShowMoreButton && (
+        <Link
+          href={getUserPath(
+            user?.username,
+            user?.id,
+            activityTabs[ActivityTabIndex.Replies].path,
+          )}
+          passHref
+        >
+          <Button tag="a" variant={ButtonVariant.Subtle} className="w-full">
+            Show More
+          </Button>
+        </Link>
+      )}
+    </>
+  );
+};
diff --git a/packages/shared/src/features/profile/components/ActivityUpvotedTab.tsx b/packages/shared/src/features/profile/components/ActivityUpvotedTab.tsx
new file mode 100644
index 0000000000..340391851e
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ActivityUpvotedTab.tsx
@@ -0,0 +1,97 @@
+import type { ReactElement } from 'react';
+import React, { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import type { PublicProfile } from '../../../lib/user';
+import { Button, ButtonVariant } from '../../../components/buttons/Button';
+import type { FeedProps } from '../../../components/Feed';
+import Link from '../../../components/utilities/Link';
+import { ButtonSize } from '../../../components/buttons/common';
+import type { FeedData } from './Activity.helpers';
+import {
+  ActivityTabIndex,
+  activityTabs,
+  MIN_ITEMS_FOR_SHOW_MORE,
+  ACTIVITY_QUERY_KEYS,
+  getItemCount,
+  getUserPath,
+  renderEmptyScreen,
+} from './Activity.helpers';
+import { OtherFeedPage } from '../../../lib/query';
+import { USER_UPVOTED_FEED_QUERY } from '../../../graphql/feed';
+import { useHorizontalScrollHeader } from '../../../components/HorizontalScroll/useHorizontalScrollHeader';
+import { ActivityHeader } from './ActivityHeader';
+import { HorizontalFeedWithContext } from './HorizontalFeedWithContext';
+
+export const ActivityUpvotedTab = ({
+  userId,
+  isSameUser,
+  userName,
+  user,
+  selectedTab,
+  onTabClick,
+}: {
+  userId: string;
+  isSameUser: boolean;
+  userName: string;
+  user: PublicProfile;
+  selectedTab: string;
+  onTabClick: (label: string) => void;
+}): ReactElement => {
+  const feedProps: FeedProps<unknown> = useMemo(
+    () => ({
+      feedName: OtherFeedPage.UserUpvoted,
+      feedQueryKey: ACTIVITY_QUERY_KEYS.upvoted(userId),
+      query: USER_UPVOTED_FEED_QUERY,
+      variables: {
+        userId,
+      },
+      disableAds: true,
+      allowFetchMore: false,
+      pageSize: 10,
+      isHorizontal: true,
+      emptyScreen: renderEmptyScreen(
+        ActivityTabIndex.Upvoted,
+        isSameUser,
+        userName,
+      ),
+    }),
+    [userId, isSameUser, userName],
+  );
+
+  const { data: upvotedData } = useQuery<FeedData>({
+    queryKey: ACTIVITY_QUERY_KEYS.upvoted(userId),
+    enabled: false,
+  });
+
+  const shouldShowMoreButton = useMemo(() => {
+    const itemCount = getItemCount(upvotedData, ActivityTabIndex.Upvoted);
+    return itemCount > MIN_ITEMS_FOR_SHOW_MORE;
+  }, [upvotedData]);
+
+  const { ref, header } = useHorizontalScrollHeader({
+    title: <ActivityHeader selectedTab={selectedTab} onTabClick={onTabClick} />,
+    className: '!items-end !m-0',
+    buttonSize: ButtonSize.Small,
+  });
+
+  return (
+    <>
+      {header}
+      <HorizontalFeedWithContext feedProps={feedProps} feedRef={ref} />
+      {shouldShowMoreButton && (
+        <Link
+          href={getUserPath(
+            user?.username,
+            user?.id,
+            activityTabs[ActivityTabIndex.Upvoted].path,
+          )}
+          passHref
+        >
+          <Button tag="a" variant={ButtonVariant.Subtle} className="w-full">
+            Show More
+          </Button>
+        </Link>
+      )}
+    </>
+  );
+};
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 0000000000..ca3950a62c
--- /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-4 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/CurrentExperienceSwitch.tsx b/packages/shared/src/features/profile/components/CurrentExperienceSwitch.tsx
new file mode 100644
index 0000000000..2608c33706
--- /dev/null
+++ b/packages/shared/src/features/profile/components/CurrentExperienceSwitch.tsx
@@ -0,0 +1,41 @@
+import React, { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+import ControlledSwitch from '../../../components/fields/ControlledSwitch';
+
+type CurrentExperienceSwitchProps = {
+  label: string;
+  description: string;
+};
+
+const CurrentExperienceSwitch = ({
+  label,
+  description,
+}: CurrentExperienceSwitchProps) => {
+  const { setValue, watch } = useFormContext();
+  const endedAt = watch('endedAt');
+
+  const handleChange = (value: boolean) => {
+    if (value) {
+      setValue('endedAt', null);
+      setValue('endedAtMonth', '');
+      setValue('endedAtYear', '');
+    }
+  };
+
+  useEffect(() => {
+    if (endedAt) {
+      setValue('current', false);
+    }
+  }, [endedAt, setValue]);
+
+  return (
+    <ControlledSwitch
+      name="current"
+      label={label}
+      description={description}
+      onChange={handleChange}
+    />
+  );
+};
+
+export default CurrentExperienceSwitch;
diff --git a/packages/shared/src/features/profile/components/FeelingLazy.tsx b/packages/shared/src/features/profile/components/FeelingLazy.tsx
index 1e39cabea3..eaf2bc5fbf 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/features/profile/components/HorizontalFeedWithContext.tsx b/packages/shared/src/features/profile/components/HorizontalFeedWithContext.tsx
new file mode 100644
index 0000000000..7944d05eec
--- /dev/null
+++ b/packages/shared/src/features/profile/components/HorizontalFeedWithContext.tsx
@@ -0,0 +1,39 @@
+import type { ReactElement, RefObject } from 'react';
+import React, { useContext, useMemo } from 'react';
+import type { FeedProps } from '../../../components/Feed';
+import Feed from '../../../components/Feed';
+import FeedContext from '../../../contexts/FeedContext';
+import { HORIZONTAL_FEED_CLASSES } from './Activity.helpers';
+
+export const HorizontalFeedWithContext = ({
+  feedProps,
+  feedRef,
+}: {
+  feedProps: FeedProps<unknown>;
+  feedRef: RefObject<HTMLElement>;
+}): ReactElement => {
+  const currentFeedSettings = useContext(FeedContext);
+
+  const feedContextValue = useMemo(() => {
+    const numCards = 3;
+
+    return {
+      ...currentFeedSettings,
+      numCards: {
+        eco: numCards,
+        roomy: numCards,
+        cozy: numCards,
+      },
+    };
+  }, [currentFeedSettings]);
+
+  return (
+    <FeedContext.Provider value={feedContextValue}>
+      <Feed
+        {...feedProps}
+        className={HORIZONTAL_FEED_CLASSES}
+        feedContainerRef={feedRef as RefObject<HTMLDivElement>}
+      />
+    </FeedContext.Provider>
+  );
+};
diff --git a/packages/shared/src/features/profile/components/ProfileCompany.tsx b/packages/shared/src/features/profile/components/ProfileCompany.tsx
new file mode 100644
index 0000000000..8dcf97a92a
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileCompany.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useQuery } from '@tanstack/react-query';
+import Autocomplete from '../../../components/fields/Autocomplete';
+import { generateQueryKey, RequestKey } from '../../../lib/query';
+import {
+  AutocompleteType,
+  getAutocompleteCompanies,
+} from '../../../graphql/autocomplete';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import useDebounceFn from '../../../hooks/useDebounceFn';
+import {
+  Typography,
+  TypographyType,
+  TypographyColor,
+} from '../../../components/typography/Typography';
+
+type ProfileCompanyProps = {
+  name: string;
+  label?: string;
+  type?: AutocompleteType;
+};
+
+const ProfileCompany = ({
+  name,
+  label = 'Company',
+  type = AutocompleteType.Company,
+}: ProfileCompanyProps) => {
+  const { user } = useAuthContext();
+  const {
+    setValue,
+    watch,
+    formState: { errors },
+  } = useFormContext();
+  const customCompanyName = watch(name);
+  const companyId = watch('companyId');
+  const { data, isLoading } = useQuery({
+    queryKey: generateQueryKey(
+      RequestKey.Autocomplete,
+      user,
+      'company',
+      customCompanyName,
+    ),
+    queryFn: () => getAutocompleteCompanies(customCompanyName, type),
+    enabled: !!customCompanyName,
+  });
+
+  const handleSearch = (query: string) => {
+    if (query === '') {
+      setValue('companyId', '');
+    }
+    setValue(name, query);
+  };
+
+  const handleSelect = (value: string) => {
+    const selectedCompany = data?.find((company) => company.id === value);
+    if (selectedCompany) {
+      setValue('companyId', selectedCompany.id);
+    }
+  };
+
+  const [debouncedQuery] = useDebounceFn<string>((q) => handleSearch(q), 300);
+
+  return (
+    <div className="flex flex-col gap-1">
+      <Autocomplete
+        name={name}
+        defaultValue={customCompanyName}
+        onChange={(value) => debouncedQuery(value)}
+        onSelect={(value) => handleSelect(value)}
+        options={
+          data?.map((company) => ({
+            image: company?.image,
+            label: company.name,
+            value: company.id,
+          })) || []
+        }
+        selectedValue={companyId}
+        label={label}
+        isLoading={isLoading}
+        resetOnBlur={false}
+      />
+      {errors[name] && (
+        <Typography
+          type={TypographyType.Caption1}
+          color={TypographyColor.StatusError}
+        >
+          {errors[name]?.message as string}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default ProfileCompany;
diff --git a/packages/shared/src/features/profile/components/ProfileSkills.tsx b/packages/shared/src/features/profile/components/ProfileSkills.tsx
new file mode 100644
index 0000000000..3039501f05
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileSkills.tsx
@@ -0,0 +1,179 @@
+import React, { useRef, useState } from 'react';
+import type { ReactElement } from 'react';
+import type { PopoverContentProps } from '@radix-ui/react-popover';
+import { Popover, PopoverAnchor } from '@radix-ui/react-popover';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useQuery } from '@tanstack/react-query';
+import { TextField } from '../../../components/fields/TextField';
+import { FeedbackIcon, SearchIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import { TagElement } from '../../../components/feeds/FeedSettings/TagElement';
+import { PopoverContent } from '../../../components/popover/Popover';
+import useDebounceFn from '../../../hooks/useDebounceFn';
+import { GenericLoaderSpinner } from '../../../components/utilities/loaders';
+import {
+  Typography,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { getKeywordAutocompleteOptions } from '../../opportunity/queries';
+
+type ProfileSkillsProps = {
+  name: string;
+};
+
+const ProfileSkills = ({ name }: ProfileSkillsProps): ReactElement => {
+  const { control } = useFormContext();
+  const [query, setQuery] = useState<string>('');
+  const [open, setOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const { data: autocompleteKeywords, isFetching } = useQuery(
+    getKeywordAutocompleteOptions(query),
+  );
+
+  const [debouncedQuery] = useDebounceFn<string>((data) => setQuery(data), 300);
+
+  const handlePopoverClose: PopoverContentProps['onInteractOutside'] = (e) => {
+    if (e.target === inputRef.current) {
+      e.preventDefault();
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field }) => {
+        const skills = Array.isArray(field.value) ? field.value : [];
+
+        const addSkill = (skill: string) => {
+          if (skills.includes(skill)) {
+            return;
+          }
+          field.onChange([...skills, skill]);
+        };
+
+        const removeSkill = (skill: string) => {
+          field.onChange(skills.filter((s: string) => s !== skill));
+        };
+
+        return (
+          <div className="flex flex-col gap-4">
+            <Typography type={TypographyType.Callout} bold>
+              Skills
+            </Typography>
+
+            <Popover open={open && autocompleteKeywords?.length > 0}>
+              <PopoverAnchor asChild>
+                <TextField
+                  inputRef={(ref) => {
+                    inputRef.current = ref;
+                  }}
+                  inputId="skills"
+                  label="Search skills"
+                  leftIcon={<SearchIcon size={IconSize.Small} />}
+                  rightIcon={
+                    isFetching && <GenericLoaderSpinner size={IconSize.Small} />
+                  }
+                  hint="Add commas (,) to add multiple skills. Press Enter to submit them."
+                  hintIcon={<FeedbackIcon />}
+                  value={query}
+                  onChange={({ target }) => {
+                    if (target.value === '') {
+                      return setQuery('');
+                    }
+
+                    return debouncedQuery(target.value);
+                  }}
+                  onFocus={() => setOpen(true)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Escape') {
+                      setOpen((prev) => !prev);
+                      return;
+                    }
+
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                      const newSkills = query
+                        .split(',')
+                        .map((k) => k.trim())
+                        .filter(Boolean)
+                        .filter((k) => !skills.includes(k));
+
+                      if (newSkills.length === 0) {
+                        if (query) {
+                          setQuery('');
+                        }
+                        return;
+                      }
+
+                      field.onChange([...skills, ...newSkills]);
+                      setQuery('');
+                      return;
+                    }
+
+                    if (!open) {
+                      setOpen(true);
+                    }
+                  }}
+                />
+              </PopoverAnchor>
+
+              <PopoverContent
+                side="top"
+                align="start"
+                avoidCollisions
+                sameWidthAsAnchor
+                onOpenAutoFocus={(e) => e.preventDefault()}
+                onCloseAutoFocus={(e) => e.preventDefault()}
+                onPointerDownOutside={handlePopoverClose}
+                onInteractOutside={handlePopoverClose}
+                className="rounded-16 border border-border-subtlest-tertiary bg-background-popover p-4 data-[side=bottom]:mt-1 data-[side=top]:mb-1"
+              >
+                <div className="flex flex-wrap gap-2">
+                  {autocompleteKeywords?.map(({ keyword }) => {
+                    const isSelected = skills.includes(keyword);
+                    return (
+                      <TagElement
+                        key={keyword}
+                        tag={{ name: keyword }}
+                        isSelected={isSelected}
+                        onClick={({ tag }) => {
+                          if (isSelected) {
+                            removeSkill(tag.name);
+                          } else {
+                            addSkill(tag.name);
+                          }
+                        }}
+                      />
+                    );
+                  })}
+                </div>
+              </PopoverContent>
+            </Popover>
+
+            {skills.length > 0 && (
+              <div className="flex flex-wrap gap-2">
+                {skills.map((skill: string) => (
+                  <TagElement
+                    key={skill}
+                    tag={{ name: skill }}
+                    isSelected
+                    onClick={({ tag }) => {
+                      removeSkill(tag.name);
+                    }}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        );
+      }}
+    />
+  );
+};
+
+export default ProfileSkills;
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.spec.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.spec.tsx
new file mode 100644
index 0000000000..81126650c3
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.spec.tsx
@@ -0,0 +1,158 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { PublicProfile } from '../../../../lib/user';
+import { AboutMe } from './AboutMe';
+import { getLogContextStatic } from '../../../../contexts/LogContext';
+
+const LogContext = getLogContextStatic();
+
+const mockCopyLink = jest.fn();
+const mockLogEvent = jest.fn();
+
+// Mock useCopyLink hook
+jest.mock('../../../../hooks/useCopy', () => ({
+  useCopyLink: () => [jest.fn(), mockCopyLink],
+}));
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  // Mock window for client-side check
+  Object.defineProperty(window, 'innerWidth', {
+    writable: true,
+    configurable: true,
+    value: 1024,
+  });
+});
+
+const baseUser: PublicProfile = {
+  id: 'u1',
+  name: 'Test User',
+  username: 'testuser',
+  image: 'https://daily.dev/user.png',
+  permalink: 'https://daily.dev/testuser',
+  reputation: 100,
+  createdAt: '2020-01-01T00:00:00.000Z',
+  premium: false,
+};
+
+const userWithReadme: PublicProfile = {
+  ...baseUser,
+  readmeHtml: 'This is my awesome bio with some **markdown**!',
+};
+
+const userWithSocialLinks: PublicProfile = {
+  ...userWithReadme,
+  twitter: 'testuser',
+  github: 'testuser',
+  linkedin: 'https://linkedin.com/in/testuser',
+  portfolio: 'https://testuser.com',
+  youtube: 'testuser',
+  stackoverflow: '123456/testuser',
+  reddit: 'testuser',
+  roadmap: 'testuser',
+  codepen: 'testuser',
+  mastodon: 'https://mastodon.social/@testuser',
+  bluesky: 'testuser.bsky.social',
+  threads: 'testuser',
+};
+
+const renderComponent = (user: Partial<PublicProfile> = {}) => {
+  const mergedUser = { ...baseUser, ...user };
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <LogContext.Provider
+        value={{
+          logEvent: mockLogEvent,
+          logEventStart: jest.fn(),
+          logEventEnd: jest.fn(),
+          sendBeacon: jest.fn(),
+        }}
+      >
+        <AboutMe user={mergedUser} />
+      </LogContext.Provider>
+    </QueryClientProvider>,
+  );
+};
+
+describe('AboutMe', () => {
+  describe('Rendering', () => {
+    it('should not render when both readme and social links are not present', () => {
+      const { container } = renderComponent();
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should render when readme is present', () => {
+      renderComponent(userWithReadme);
+      expect(screen.getByText('About me')).toBeInTheDocument();
+      expect(
+        screen.getByText('This is my awesome bio with some **markdown**!'),
+      ).toBeInTheDocument();
+    });
+
+    it('should render with social links when user has them', () => {
+      renderComponent(userWithSocialLinks);
+      expect(screen.getByTestId('social-link-github')).toBeInTheDocument();
+      expect(screen.getByTestId('social-link-linkedin')).toBeInTheDocument();
+      expect(screen.getByTestId('social-link-portfolio')).toBeInTheDocument();
+    });
+  });
+
+  describe('Social Links', () => {
+    it('should show only first 3 social links initially', () => {
+      renderComponent(userWithSocialLinks);
+      const allLinks = screen.getAllByTestId(/^social-link-/);
+      expect(allLinks.length).toBe(3);
+    });
+
+    it('should show "+N" button when more than 3 links', () => {
+      renderComponent(userWithSocialLinks);
+      const showAllButton = screen.getByTestId('show-all-links');
+      expect(showAllButton).toBeInTheDocument();
+      // 12 total links - 3 visible = 9 more
+      expect(showAllButton).toHaveTextContent('+9');
+    });
+
+    it('should show all links when "+N" button is clicked', async () => {
+      renderComponent(userWithSocialLinks);
+      const showAllButton = screen.getByTestId('show-all-links');
+      fireEvent.click(showAllButton);
+
+      await waitFor(() => {
+        const allLinks = screen.getAllByTestId(/^social-link-/);
+        expect(allLinks.length).toBe(12); // All 12 social links
+      });
+    });
+
+    it('should hide "+N" button after showing all links', async () => {
+      renderComponent(userWithSocialLinks);
+      const showAllButton = screen.getByTestId('show-all-links');
+      fireEvent.click(showAllButton);
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('show-all-links')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Analytics', () => {
+    it('should log click event for social links', () => {
+      renderComponent(userWithSocialLinks);
+      const githubLink = screen.getByTestId('social-link-github');
+      fireEvent.click(githubLink);
+
+      expect(mockLogEvent).toHaveBeenCalledWith({
+        event_name: 'click',
+        target_type: 'social link',
+        target_id: 'github',
+      });
+    });
+  });
+});
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.tsx
new file mode 100644
index 0000000000..29fbb20180
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.tsx
@@ -0,0 +1,214 @@
+import type { ReactElement } from 'react';
+import React, { useMemo, useState } from 'react';
+import classNames from 'classnames';
+import type { PublicProfile } from '../../../../lib/user';
+import Markdown from '../../../../components/Markdown';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../../components/buttons/Button';
+import {
+  Typography,
+  TypographyType,
+  TypographyColor,
+} from '../../../../components/typography/Typography';
+import {
+  BlueskyIcon,
+  CodePenIcon,
+  GitHubIcon,
+  LinkedInIcon,
+  LinkIcon,
+  MastodonIcon,
+  RedditIcon,
+  RoadmapIcon,
+  StackOverflowIcon,
+  ThreadsIcon,
+  TwitterIcon,
+  YoutubeIcon,
+} from '../../../../components/icons';
+import { IconSize } from '../../../../components/Icon';
+import { SimpleTooltip } from '../../../../components/tooltips/SimpleTooltip';
+import { ExpandableContent } from '../../../../components/ExpandableContent';
+import { useLogContext } from '../../../../contexts/LogContext';
+import { combinedClicks } from '../../../../lib/click';
+import { LogEvent, TargetType } from '../../../../lib/log';
+import { anchorDefaultRel } from '../../../../lib/strings';
+
+export interface AboutMeProps {
+  user: PublicProfile;
+  className?: string;
+}
+
+const MAX_VISIBLE_LINKS = 3;
+
+interface SocialLink {
+  id: string;
+  url: string;
+  icon: ReactElement;
+  label: string;
+}
+
+export function AboutMe({
+  user,
+  className,
+}: AboutMeProps): ReactElement | null {
+  const [showAllLinks, setShowAllLinks] = useState(false);
+  const readme = user?.readmeHtml;
+  const { logEvent } = useLogContext();
+
+  // Markdown is supported only in the client due to sanitization
+  const isClient = typeof window !== 'undefined';
+
+  const socialLinks = useMemo(() => {
+    return [
+      user.github && {
+        id: 'github',
+        url: `https://github.com/${user.github}`,
+        icon: <GitHubIcon size={IconSize.XSmall} />,
+        label: 'GitHub',
+      },
+      user.linkedin && {
+        id: 'linkedin',
+        url: user.linkedin,
+        icon: <LinkedInIcon size={IconSize.XSmall} />,
+        label: 'LinkedIn',
+      },
+      user.portfolio && {
+        id: 'portfolio',
+        url: user.portfolio,
+        icon: <LinkIcon size={IconSize.XSmall} />,
+        label: 'Portfolio',
+      },
+      user.twitter && {
+        id: 'twitter',
+        url: `https://x.com/${user.twitter}`,
+        icon: <TwitterIcon size={IconSize.XSmall} />,
+        label: 'Twitter',
+      },
+      user.youtube && {
+        id: 'youtube',
+        url: `https://youtube.com/@${user.youtube}`,
+        icon: <YoutubeIcon size={IconSize.XSmall} />,
+        label: 'YouTube',
+      },
+      user.stackoverflow && {
+        id: 'stackoverflow',
+        url: `https://stackoverflow.com/users/${user.stackoverflow}`,
+        icon: <StackOverflowIcon size={IconSize.XSmall} />,
+        label: 'Stack Overflow',
+      },
+      user.reddit && {
+        id: 'reddit',
+        url: `https://reddit.com/user/${user.reddit}`,
+        icon: <RedditIcon size={IconSize.XSmall} />,
+        label: 'Reddit',
+      },
+      user.roadmap && {
+        id: 'roadmap',
+        url: `https://roadmap.sh/u/${user.roadmap}`,
+        icon: <RoadmapIcon size={IconSize.XSmall} />,
+        label: 'Roadmap.sh',
+      },
+      user.codepen && {
+        id: 'codepen',
+        url: `https://codepen.io/${user.codepen}`,
+        icon: <CodePenIcon size={IconSize.XSmall} />,
+        label: 'CodePen',
+      },
+      user.mastodon && {
+        id: 'mastodon',
+        url: user.mastodon,
+        icon: <MastodonIcon size={IconSize.XSmall} />,
+        label: 'Mastodon',
+      },
+      user.bluesky && {
+        id: 'bluesky',
+        url: `https://bsky.app/profile/${user.bluesky}`,
+        icon: <BlueskyIcon size={IconSize.XSmall} />,
+        label: 'Bluesky',
+      },
+      user.threads && {
+        id: 'threads',
+        url: `https://threads.net/@${user.threads}`,
+        icon: <ThreadsIcon size={IconSize.XSmall} />,
+        label: 'Threads',
+      },
+    ].filter(Boolean) as SocialLink[];
+  }, [user]);
+
+  const visibleLinks = showAllLinks
+    ? socialLinks
+    : socialLinks.slice(0, MAX_VISIBLE_LINKS);
+  const hasMoreLinks = socialLinks.length > MAX_VISIBLE_LINKS;
+
+  const shouldShowReadme = readme && isClient;
+  const shouldShowSocialLinks = socialLinks.length > 0;
+
+  if (!shouldShowReadme && !shouldShowSocialLinks) {
+    return null;
+  }
+
+  return (
+    <div className={classNames('py-4', className)}>
+      <ExpandableContent maxHeight={320}>
+        <div className="flex flex-col gap-4">
+          <Typography
+            type={TypographyType.Body}
+            color={TypographyColor.Primary}
+            bold
+          >
+            About me
+          </Typography>
+
+          <div className="flex flex-1 flex-col gap-4">
+            {shouldShowSocialLinks && (
+              <div className="flex flex-wrap items-center gap-2">
+                {visibleLinks.map((link) => (
+                  <SimpleTooltip key={link.id} content={link.label}>
+                    <Button
+                      variant={ButtonVariant.Subtle}
+                      size={ButtonSize.Small}
+                      tag="a"
+                      href={link.url}
+                      target="_blank"
+                      rel={anchorDefaultRel}
+                      icon={link.icon}
+                      aria-label={link.label}
+                      data-testid={`social-link-${link.id}`}
+                      {...combinedClicks(() => {
+                        logEvent({
+                          event_name: LogEvent.Click,
+                          target_type: TargetType.SocialLink,
+                          target_id: link.id,
+                        });
+                      })}
+                    />
+                  </SimpleTooltip>
+                ))}
+                {hasMoreLinks && !showAllLinks && (
+                  <SimpleTooltip content="Show all links">
+                    <Button
+                      variant={ButtonVariant.Subtle}
+                      size={ButtonSize.Small}
+                      onClick={() => setShowAllLinks(true)}
+                      data-testid="show-all-links"
+                    >
+                      +{socialLinks.length - MAX_VISIBLE_LINKS}
+                    </Button>
+                  </SimpleTooltip>
+                )}
+              </div>
+            )}
+
+            {shouldShowReadme && (
+              <div>
+                <Markdown content={readme} />
+              </div>
+            )}
+          </div>
+        </div>
+      </ExpandableContent>
+    </div>
+  );
+}
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/ActiveOrRecomendedSquads.spec.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/ActiveOrRecomendedSquads.spec.tsx
new file mode 100644
index 0000000000..5cd495337d
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/ActiveOrRecomendedSquads.spec.tsx
@@ -0,0 +1,415 @@
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ActiveOrRecomendedSquads } from './ActiveOrRecomendedSquads';
+import type { Squad } from '../../../../graphql/sources';
+import { SourceType } from '../../../../graphql/sources';
+import AuthContext from '../../../../contexts/AuthContext';
+import type { LoggedUser } from '../../../../lib/user';
+import { generateQueryKey, RequestKey } from '../../../../lib/query';
+import { labels } from '../../../../lib';
+import { getLogContextStatic } from '../../../../contexts/LogContext';
+
+const LogContext = getLogContextStatic();
+
+const mockSquad1: Squad = {
+  id: 's1',
+  name: 'JavaScript Squad',
+  handle: 'javascript',
+  image: 'https://daily.dev/squad1.png',
+  permalink: 'https://daily.dev/squads/javascript',
+  type: SourceType.Squad,
+  membersCount: 1250,
+  active: true,
+  public: true,
+  description: 'JavaScript enthusiasts',
+};
+
+const mockSquad2: Squad = {
+  id: 's2',
+  name: 'React Developers',
+  handle: 'react-dev',
+  image: 'https://daily.dev/squad2.png',
+  permalink: 'https://daily.dev/squads/react-dev',
+  type: SourceType.Squad,
+  membersCount: 850,
+  active: true,
+  public: true,
+  description: 'React developers community',
+};
+
+const mockSquad3: Squad = {
+  id: 's3',
+  name: 'TypeScript Squad',
+  handle: 'typescript',
+  image: 'https://daily.dev/squad3.png',
+  permalink: 'https://daily.dev/squads/typescript',
+  type: SourceType.Squad,
+  membersCount: 2100,
+  active: true,
+  public: true,
+  description: 'TypeScript lovers',
+};
+
+const mockSquad4: Squad = {
+  id: 's4',
+  name: 'Vue.js Community',
+  handle: 'vuejs',
+  image: 'https://daily.dev/squad4.png',
+  permalink: 'https://daily.dev/squads/vuejs',
+  type: SourceType.Squad,
+  membersCount: 630,
+  active: true,
+  public: true,
+  description: 'Vue.js developers',
+};
+
+const mockSquad5: Squad = {
+  id: 's5',
+  name: 'Node.js Squad',
+  handle: 'nodejs',
+  image: 'https://daily.dev/squad5.png',
+  permalink: 'https://daily.dev/squads/nodejs',
+  type: SourceType.Squad,
+  membersCount: 1750,
+  active: true,
+  public: true,
+  description: 'Node.js backend developers',
+};
+
+const mockSquad6: Squad = {
+  id: 's6',
+  name: 'Python Squad',
+  handle: 'python',
+  image: 'https://daily.dev/squad6.png',
+  permalink: 'https://daily.dev/squads/python',
+  type: SourceType.Squad,
+  membersCount: 980,
+  active: true,
+  public: true,
+  description: 'Python enthusiasts',
+};
+
+const createMockSquads = (count: number): Squad[] => {
+  const allSquads = [
+    mockSquad1,
+    mockSquad2,
+    mockSquad3,
+    mockSquad4,
+    mockSquad5,
+    mockSquad6,
+  ];
+  return allSquads.slice(0, count);
+};
+
+const logEvent = jest.fn();
+
+const renderComponent = (
+  squads: Squad[],
+  userId: string,
+  options: {
+    currentUserId?: string;
+    isAuthReady?: boolean;
+    recommendedSquads?: Squad[];
+    userSquads?: Squad[];
+  } = {},
+) => {
+  const {
+    currentUserId = 'current-user',
+    isAuthReady = true,
+    recommendedSquads = [],
+    userSquads = [],
+  } = options;
+
+  const client = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  // Mock recommended squads data for useSources hook
+  // The query key structure matches useSources hook: RequestKey.Sources, null, featured, isPublic, categoryId, first
+  if (recommendedSquads.length > 0) {
+    const sourcesKey = generateQueryKey(
+      RequestKey.Sources,
+      null,
+      undefined, // featured
+      true, // isPublic
+      undefined, // categoryId
+      5, // first
+    );
+    client.setQueryData(sourcesKey, {
+      pages: [
+        {
+          sources: {
+            edges: recommendedSquads.map((squad) => ({ node: squad })),
+            pageInfo: { hasNextPage: false, endCursor: null },
+          },
+        },
+      ],
+      pageParams: [''],
+    });
+  }
+
+  return render(
+    <QueryClientProvider client={client}>
+      <AuthContext.Provider
+        value={{
+          user: { id: currentUserId, name: 'Test User' } as LoggedUser,
+          shouldShowLogin: false,
+          showLogin: jest.fn(),
+          logout: jest.fn(),
+          updateUser: jest.fn(),
+          tokenRefreshed: true,
+          isLoggedIn: true,
+          isAuthReady,
+          closeLogin: jest.fn(),
+          getRedirectUri: jest.fn(),
+          squads: userSquads,
+        }}
+      >
+        <LogContext.Provider
+          value={{
+            logEvent,
+            logEventStart: jest.fn(),
+            logEventEnd: jest.fn(),
+            sendBeacon: jest.fn(),
+          }}
+        >
+          <ActiveOrRecomendedSquads squads={squads} userId={userId} />
+        </LogContext.Provider>
+      </AuthContext.Provider>
+    </QueryClientProvider>,
+  );
+};
+
+describe('ActiveOrRecomendedSquads', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Loading state', () => {
+    it('should render skeleton when auth is not ready', () => {
+      renderComponent([mockSquad1], 'user-id', { isAuthReady: false });
+
+      // Skeleton should be present (no heading text)
+      expect(
+        screen.queryByText(labels.profile.sources.heading.activeIn),
+      ).not.toBeInTheDocument();
+      expect(screen.queryByText('JavaScript Squad')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('User viewing their own profile with squads', () => {
+    it('should render squads list with correct heading', async () => {
+      const squads = createMockSquads(3);
+      renderComponent(squads, 'current-user', {
+        currentUserId: 'current-user',
+      });
+
+      await waitFor(() => {
+        expect(
+          screen.getByText(labels.profile.sources.heading.activeIn),
+        ).toBeInTheDocument();
+      });
+
+      expect(screen.getByText('JavaScript Squad')).toBeInTheDocument();
+      expect(screen.getByText('@javascript')).toBeInTheDocument();
+      expect(screen.getByText(/1\.3K members?/)).toBeInTheDocument();
+
+      expect(screen.getByText('React Developers')).toBeInTheDocument();
+      expect(screen.getByText('@react-dev')).toBeInTheDocument();
+      expect(screen.getByText(/850 members?/)).toBeInTheDocument();
+    });
+
+    it('should not render join buttons when viewing own squads', async () => {
+      const squads = [mockSquad1];
+      renderComponent(squads, 'current-user', {
+        currentUserId: 'current-user',
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText('JavaScript Squad')).toBeInTheDocument();
+      });
+
+      expect(
+        screen.queryByRole('button', { name: /join/i }),
+      ).not.toBeInTheDocument();
+    });
+
+    it('should render show all button when more than 5 squads', async () => {
+      const squads = createMockSquads(6);
+      renderComponent(squads, 'current-user', {
+        currentUserId: 'current-user',
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText('JavaScript Squad')).toBeInTheDocument();
+      });
+
+      const showAllButton = screen.getByRole('button', {
+        name: /show all squads/i,
+      });
+      expect(showAllButton).toBeInTheDocument();
+
+      // Should only show first 5 squads initially
+      expect(screen.getByText('JavaScript Squad')).toBeInTheDocument();
+      expect(screen.getByText('Node.js Squad')).toBeInTheDocument();
+      expect(screen.queryByText('Python Squad')).not.toBeInTheDocument();
+    });
+
+    it('should toggle show all squads when button is clicked', async () => {
+      const squads = createMockSquads(6);
+      renderComponent(squads, 'current-user', {
+        currentUserId: 'current-user',
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText('JavaScript Squad')).toBeInTheDocument();
+      });
+
+      const showAllButton = screen.getByRole('button', {
+        name: /show all squads/i,
+      });
+
+      // Click to show all
+      fireEvent.click(showAllButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Python Squad')).toBeInTheDocument();
+      });
+
+      // Button text should change
+      expect(
+        screen.getByRole('button', { name: /show less/i }),
+      ).toBeInTheDocument();
+
+      // Click to show less
+      const showLessButton = screen.getByRole('button', { name: /show less/i });
+      fireEvent.click(showLessButton);
+
+      await waitFor(() => {
+        expect(screen.queryByText('Python Squad')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('User viewing another user profile with squads', () => {
+    it('should render squads list without join buttons', async () => {
+      const squads = [mockSquad1, mockSquad2];
+      renderComponent(squads, 'other-user', { currentUserId: 'current-user' });
+
+      await waitFor(() => {
+        expect(
+          screen.getByText(labels.profile.sources.heading.activeIn),
+        ).toBeInTheDocument();
+      });
+
+      expect(screen.getByText('JavaScript Squad')).toBeInTheDocument();
+      expect(screen.getByText('React Developers')).toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: /join/i }),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe('User viewing their own profile without squads (recommended squads)', () => {
+    it('should render recommended squads heading', async () => {
+      const recommendedSquads = createMockSquads(3);
+      renderComponent([], 'current-user', {
+        currentUserId: 'current-user',
+        recommendedSquads,
+      });
+
+      await waitFor(() => {
+        expect(
+          screen.getByText(labels.profile.sources.heading.empty),
+        ).toBeInTheDocument();
+      });
+    });
+
+    it('should render join buttons for recommended squads', async () => {
+      const recommendedSquads = [mockSquad1];
+      renderComponent([], 'current-user', {
+        currentUserId: 'current-user',
+        recommendedSquads,
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText('JavaScript Squad')).toBeInTheDocument();
+      });
+
+      expect(screen.getByRole('button', { name: /join/i })).toBeInTheDocument();
+    });
+
+    it('should not show join button if user already joined the squad', async () => {
+      const recommendedSquads = [mockSquad1];
+      renderComponent([], 'current-user', {
+        currentUserId: 'current-user',
+        recommendedSquads,
+        userSquads: [mockSquad1],
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText('JavaScript Squad')).toBeInTheDocument();
+      });
+
+      expect(
+        screen.queryByRole('button', { name: /join/i }),
+      ).not.toBeInTheDocument();
+    });
+
+    it('should render explore all squads button for recommended squads', async () => {
+      const recommendedSquads = createMockSquads(3);
+      renderComponent([], 'current-user', {
+        currentUserId: 'current-user',
+        recommendedSquads,
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText('JavaScript Squad')).toBeInTheDocument();
+      });
+
+      const exploreButton = screen.getByRole('link', {
+        name: labels.profile.sources.viewAll,
+      });
+      expect(exploreButton).toBeInTheDocument();
+      expect(exploreButton).toHaveAttribute(
+        'href',
+        expect.stringContaining('squads/discover'),
+      );
+    });
+
+    it('should limit recommended squads to 5', async () => {
+      const recommendedSquads = createMockSquads(6);
+      renderComponent([], 'current-user', {
+        currentUserId: 'current-user',
+        recommendedSquads,
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText('JavaScript Squad')).toBeInTheDocument();
+      });
+
+      expect(screen.getByText('Node.js Squad')).toBeInTheDocument();
+      expect(screen.queryByText('Python Squad')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('User viewing another user profile without squads', () => {
+    it('should not render anything', () => {
+      renderComponent([], 'other-user', {
+        currentUserId: 'current-user',
+      });
+
+      expect(
+        screen.queryByText(labels.profile.sources.heading.activeIn),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByText(labels.profile.sources.heading.empty),
+      ).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/ActiveOrRecomendedSquads.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/ActiveOrRecomendedSquads.tsx
new file mode 100644
index 0000000000..c7444ba3c2
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/ActiveOrRecomendedSquads.tsx
@@ -0,0 +1,150 @@
+import React from 'react';
+import type { Squad } from '../../../../graphql/sources';
+import { useAuthContext } from '../../../../contexts/AuthContext';
+import { labels } from '../../../../lib';
+import {
+  Button,
+  ButtonVariant,
+  ButtonSize,
+  ButtonIconPosition,
+} from '../../../../components/buttons/Button';
+import { StraightArrowIcon } from '../../../../components/icons';
+import { IconSize } from '../../../../components/Icon';
+import { webappUrl } from '../../../../lib/constants';
+import { anchorDefaultRel } from '../../../../lib/strings';
+import { useToggle } from '../../../../hooks/useToggle';
+import { ActivityContainer } from '../../../../components/profile/ActivitySection';
+import {
+  useSources,
+  getFlatteredSources,
+} from '../../../../hooks/source/useSources';
+import {
+  Typography,
+  TypographyType,
+  TypographyColor,
+  TypographyTag,
+} from '../../../../components/typography/Typography';
+import {
+  SquadListItem,
+  ActiveOrRecomendedSquadsSkeleton,
+} from './ActiveOrRecomendedSquadsComponents';
+
+interface ActiveOrRecomendedSquadsProps {
+  squads: Array<Squad>;
+  userId: string;
+}
+
+const MAX_SQUAD_COUNT = 5;
+
+const useActiveOrRecomendedSquads = (props: ActiveOrRecomendedSquadsProps) => {
+  const { squads, userId } = props;
+  const { isAuthReady, user } = useAuthContext();
+  const [showAll, toggleShowAll] = useToggle(false);
+
+  const isSameUser = user?.id === userId;
+  const isShowingSuggestions = isSameUser && !squads?.length;
+  const heading = isShowingSuggestions
+    ? labels.profile.sources.heading.empty
+    : labels.profile.sources.heading.activeIn;
+
+  const {
+    result: { data, isPending },
+  } = useSources({
+    query: {
+      first: MAX_SQUAD_COUNT,
+      isPublic: true,
+      sortByMembersCount: true,
+    },
+    isEnabled: isShowingSuggestions,
+  });
+  const flatSquads = getFlatteredSources({ data }) as Squad[];
+  const list = isShowingSuggestions ? flatSquads : squads;
+  const visibleSquads = showAll ? list : list.slice(0, MAX_SQUAD_COUNT);
+  const hasShowMore = list.length > MAX_SQUAD_COUNT;
+
+  return {
+    heading,
+    isReady: isAuthReady && (!isShowingSuggestions || !isPending),
+    isShowingSuggestions,
+    showMore: {
+      isVisible: hasShowMore,
+      isActive: showAll,
+      toggle: toggleShowAll,
+    },
+    squads: visibleSquads,
+  };
+};
+
+export const ActiveOrRecomendedSquads = (
+  props: ActiveOrRecomendedSquadsProps,
+) => {
+  const { heading, squads, showMore, isReady, isShowingSuggestions } =
+    useActiveOrRecomendedSquads(props);
+
+  if (!isReady) {
+    return <ActiveOrRecomendedSquadsSkeleton />;
+  }
+
+  if (!squads.length) {
+    return null;
+  }
+
+  return (
+    <ActivityContainer>
+      <div className="flex min-h-0 flex-1 flex-col">
+        <Typography
+          bold
+          color={TypographyColor.Primary}
+          tag={TypographyTag.H4}
+          type={TypographyType.Callout}
+        >
+          {heading}
+        </Typography>
+        <ul className="mt-4 flex max-h-96 flex-col gap-2 overflow-y-auto laptop:max-h-none laptop:overflow-y-visible">
+          {squads.map((squad) => (
+            <SquadListItem
+              key={squad.id}
+              showJoinButton={isShowingSuggestions}
+              squad={squad}
+            />
+          ))}
+        </ul>
+        <div className="mt-auto pt-3">
+          {isShowingSuggestions && (
+            <Button
+              className="w-full"
+              href={`${webappUrl}squads/discover`}
+              icon={
+                <StraightArrowIcon
+                  aria-hidden
+                  className="-rotate-90"
+                  size={IconSize.Size16}
+                />
+              }
+              iconPosition={ButtonIconPosition.Right}
+              rel={anchorDefaultRel}
+              size={ButtonSize.Small}
+              tag="a"
+              target="_blank"
+              variant={ButtonVariant.Subtle}
+            >
+              {labels.profile.sources.viewAll}
+            </Button>
+          )}
+          {showMore.isVisible && (
+            <Button
+              className="w-full"
+              onClick={() => showMore.toggle()}
+              size={ButtonSize.Small}
+              variant={ButtonVariant.Subtle}
+            >
+              {showMore.isActive ? 'Show less' : 'Show all Squads'}
+            </Button>
+          )}
+        </div>
+      </div>
+    </ActivityContainer>
+  );
+};
+
+export default ActiveOrRecomendedSquads;
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/ActiveOrRecomendedSquadsComponents.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/ActiveOrRecomendedSquadsComponents.tsx
new file mode 100644
index 0000000000..3af260d7af
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/ActiveOrRecomendedSquadsComponents.tsx
@@ -0,0 +1,116 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { Squad } from '../../../../graphql/sources';
+import { useAuthContext } from '../../../../contexts/AuthContext';
+import { largeNumberFormat } from '../../../../lib';
+import { anchorDefaultRel } from '../../../../lib/strings';
+import { LazyImage } from '../../../../components/LazyImage';
+import {
+  Typography,
+  TypographyType,
+  TypographyColor,
+  TypographyTag,
+} from '../../../../components/typography/Typography';
+import { useToastNotification } from '../../../../hooks';
+import { SquadActionButton } from '../../../../components/squads/SquadActionButton';
+import { Origin } from '../../../../lib/log';
+import { ButtonSize } from '../../../../components/buttons/Button';
+import { ActivityContainer } from '../../../../components/profile/ActivitySection';
+import { ElementPlaceholder } from '../../../../components/ElementPlaceholder';
+
+interface SquadListItemProps {
+  squad: Squad;
+  showJoinButton?: boolean;
+}
+
+export const SquadListItem = ({
+  squad,
+  showJoinButton = false,
+}: SquadListItemProps): ReactElement | null => {
+  const { displayToast } = useToastNotification();
+  const { squads, isAuthReady } = useAuthContext();
+  const hasSquadsInList = squads?.some((sq) => sq.id === squad.id);
+
+  if (!isAuthReady) {
+    return null;
+  }
+
+  return (
+    <li className="flex flex-row items-center gap-2">
+      <a href={squad.permalink} target="_blank" rel={anchorDefaultRel}>
+        <LazyImage
+          className="size-8 cursor-pointer rounded-full"
+          imgAlt={squad.name}
+          imgSrc={squad.image}
+        />
+      </a>
+      <div className="min-w-0 flex-1">
+        <a href={squad.permalink} target="_blank" rel={anchorDefaultRel}>
+          <Typography
+            bold
+            tag={TypographyTag.H5}
+            type={TypographyType.Callout}
+            truncate
+            data-testid="squad-list-item-name"
+          >
+            {squad.name}
+          </Typography>
+        </a>
+        <Typography
+          color={TypographyColor.Tertiary}
+          type={TypographyType.Footnote}
+          truncate
+        >
+          @{squad.handle}
+        </Typography>
+        <Typography
+          color={TypographyColor.Tertiary}
+          type={TypographyType.Footnote}
+          truncate
+        >
+          {largeNumberFormat(squad.membersCount)} member
+          {squad.membersCount !== 1 && 's'}
+        </Typography>
+      </div>
+      {showJoinButton && !hasSquadsInList && (
+        <SquadActionButton
+          alwaysShow
+          copy={{ join: 'Join', leave: 'Leave' }}
+          onSuccess={() => {
+            displayToast(`🙌 You joined the Squad ${squad.name}`);
+          }}
+          origin={Origin.Profile}
+          size={ButtonSize.Small}
+          squad={{ ...squad, currentMember: null }}
+        />
+      )}
+    </li>
+  );
+};
+
+// Skeleton components
+const SquadListItemSkeleton = (): ReactElement => (
+  <li className="flex flex-row items-center gap-2">
+    <ElementPlaceholder className="size-8 rounded-full" />
+    <div className="min-w-0 flex-1">
+      <ElementPlaceholder className="mb-1 h-4 w-32 rounded-4" />
+      <ElementPlaceholder className="mb-1 h-3 w-20 rounded-4" />
+      <ElementPlaceholder className="h-3 w-24 rounded-4" />
+    </div>
+  </li>
+);
+
+export const ActiveOrRecomendedSquadsSkeleton = (): ReactElement => {
+  return (
+    <ActivityContainer>
+      <div className="flex min-h-0 flex-1 flex-col">
+        <ElementPlaceholder className="h-5 w-24 rounded-4" />
+        <ul className="mt-4 flex flex-col gap-2">
+          <SquadListItemSkeleton />
+          <SquadListItemSkeleton />
+          <SquadListItemSkeleton />
+        </ul>
+      </div>
+    </ActivityContainer>
+  );
+};
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/BadgesAndAwards.spec.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/BadgesAndAwards.spec.tsx
new file mode 100644
index 0000000000..1e3d509619
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/BadgesAndAwards.spec.tsx
@@ -0,0 +1,268 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { QueryClient } from '@tanstack/react-query';
+import type { PublicProfile } from '../../../../lib/user';
+import { BadgesAndAwards } from './BadgesAndAwards';
+import { TestBootProvider } from '../../../../../__tests__/helpers/boot';
+import { mockGraphQL } from '../../../../../__tests__/helpers/graphql';
+import { ProductType, PRODUCTS_SUMMARY_QUERY } from '../../../../graphql/njord';
+import { useTopReader } from '../../../../hooks/useTopReader';
+import { useHasAccessToCores } from '../../../../hooks/useCoresFeature';
+
+// Mock the hooks
+jest.mock('../../../../hooks/useTopReader', () => ({
+  useTopReader: jest.fn(),
+}));
+
+jest.mock('../../../../hooks/useCoresFeature', () => ({
+  useHasAccessToCores: jest.fn(),
+}));
+
+const mockUseTopReader = useTopReader as jest.Mock;
+const mockUseHasAccessToCores = useHasAccessToCores as jest.Mock;
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  mockUseHasAccessToCores.mockReturnValue(false);
+});
+
+const defaultUser: PublicProfile = {
+  id: 'user-1',
+  name: 'Test User',
+  username: 'testuser',
+  premium: false,
+  reputation: 20,
+  image: 'https://daily.dev/test.png',
+  bio: 'Test bio',
+  createdAt: '2020-01-01T00:00:00.000Z',
+  twitter: 'testuser',
+  github: 'testuser',
+  hashnode: 'testuser',
+  portfolio: 'https://test.com',
+  permalink: 'https://daily.dev/testuser',
+  roadmap: 'testuser',
+  threads: 'testuser',
+  codepen: 'testuser',
+  reddit: 'testuser',
+  stackoverflow: '123456/testuser',
+  youtube: 'testuser',
+  linkedin: 'testuser',
+  mastodon: 'https://mastodon.social/@testuser',
+  bluesky: 'testuser.bsky.social',
+};
+
+const mockTopReaders = [
+  {
+    id: 'badge-1',
+    keyword: {
+      value: 'javascript',
+      flags: { title: 'JavaScript' },
+    },
+    issuedAt: '2024-01-01T00:00:00.000Z',
+    total: 5,
+  },
+  {
+    id: 'badge-2',
+    keyword: {
+      value: 'react',
+      flags: { title: 'React' },
+    },
+    issuedAt: '2024-01-02T00:00:00.000Z',
+    total: 3,
+  },
+];
+
+const mockAwards = [
+  {
+    id: 'award-1',
+    image: 'https://daily.dev/award1.png',
+    count: 2,
+  },
+  {
+    id: 'award-2',
+    image: 'https://daily.dev/award2.png',
+    count: 1,
+  },
+];
+
+// Helper function to mock awards query
+const mockAwardsQuery = (
+  awards: typeof mockAwards = [],
+  userId: string = defaultUser.id,
+) => {
+  mockGraphQL({
+    request: {
+      query: PRODUCTS_SUMMARY_QUERY,
+      variables: {
+        userId,
+        type: ProductType.Award,
+      },
+    },
+    result: {
+      data: {
+        userProductSummary: awards,
+      },
+    },
+  });
+};
+
+const renderComponent = (user: PublicProfile = defaultUser) => {
+  const client = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return render(
+    <TestBootProvider client={client}>
+      <BadgesAndAwards user={user} />
+    </TestBootProvider>,
+  );
+};
+
+describe('BadgesAndAwards component', () => {
+  it('should render loading skeleton when top reader data is loading', () => {
+    mockUseTopReader.mockReturnValue({
+      data: null,
+      isPending: true,
+    });
+
+    renderComponent();
+
+    expect(screen.getByText('Badges & Awards')).toBeInTheDocument();
+    expect(screen.getByText('Learn more')).toBeInTheDocument();
+    // Check for skeleton elements
+    expect(screen.getByTestId('BadgesAndAwardsSkeleton')).toBeInTheDocument();
+  });
+
+  it('should render loading skeleton when awards are loading', () => {
+    mockUseTopReader.mockReturnValue({
+      data: mockTopReaders,
+      isPending: false,
+    });
+    mockUseHasAccessToCores.mockReturnValue(true);
+
+    // Don't mock awards query - it will stay in loading state
+    renderComponent();
+
+    expect(screen.getByText('Badges & Awards')).toBeInTheDocument();
+    expect(screen.getByTestId('BadgesAndAwardsSkeleton')).toBeInTheDocument();
+  });
+
+  it('should render with zero counts when no data is available', async () => {
+    mockUseTopReader.mockReturnValue({
+      data: [],
+      isPending: false,
+    });
+    mockUseHasAccessToCores.mockReturnValue(true);
+    mockAwardsQuery([]);
+
+    renderComponent();
+
+    // Wait for skeleton to disappear and data to load
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('BadgesAndAwardsSkeleton'),
+      ).not.toBeInTheDocument();
+    });
+
+    // Should show header and learn more link
+    expect(screen.getByText('Badges & Awards')).toBeInTheDocument();
+    expect(screen.getByText('Learn more')).toBeInTheDocument();
+
+    // Should show zero counts
+    expect(screen.getAllByText('x0')).toHaveLength(2); // Both badges and awards are 0
+
+    // Should not show any badge or award items
+    expect(screen.queryByRole('list')).not.toBeInTheDocument();
+  });
+
+  it('should render top reader badges when available', async () => {
+    mockUseTopReader.mockReturnValue({
+      data: mockTopReaders,
+      isPending: false,
+    });
+
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByText('Badges & Awards')).toBeInTheDocument();
+      expect(screen.getByText('Learn more')).toBeInTheDocument();
+    });
+
+    // Check summary cards
+    expect(screen.getByText('x5')).toBeInTheDocument();
+    expect(screen.getByText('Top reader badge')).toBeInTheDocument();
+
+    // Check badge items
+    expect(screen.getByText('JavaScript')).toBeInTheDocument();
+    expect(screen.getByText('React')).toBeInTheDocument();
+  });
+
+  it('should render awards when user has cores access', async () => {
+    mockUseTopReader.mockReturnValue({
+      data: mockTopReaders,
+      isPending: false,
+    });
+    mockUseHasAccessToCores.mockReturnValue(true);
+
+    // Mock awards query with data
+    mockAwardsQuery(mockAwards);
+
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByText('x3')).toBeInTheDocument(); // Total awards: 2 + 1
+      expect(screen.getByText('Total Awards')).toBeInTheDocument();
+    });
+
+    // Check award images
+    const awardImages = screen.getAllByAltText('Award');
+    expect(awardImages).toHaveLength(2);
+    expect(awardImages[0]).toHaveAttribute(
+      'src',
+      'https://daily.dev/award1.png',
+    );
+    expect(awardImages[1]).toHaveAttribute(
+      'src',
+      'https://daily.dev/award2.png',
+    );
+
+    // Check award counts
+    expect(screen.getByText('x2')).toBeInTheDocument();
+    expect(screen.getByText('x1')).toBeInTheDocument();
+  });
+
+  it('should not render awards section when user does not have cores access', () => {
+    mockUseTopReader.mockReturnValue({
+      data: mockTopReaders,
+      isPending: false,
+    });
+    mockUseHasAccessToCores.mockReturnValue(false);
+
+    renderComponent();
+
+    expect(screen.getByText('Badges & Awards')).toBeInTheDocument();
+    expect(screen.getByText('x5')).toBeInTheDocument();
+    expect(screen.getByText('x0')).toBeInTheDocument(); // No awards
+    expect(screen.queryByAltText('Award')).not.toBeInTheDocument();
+  });
+
+  it('should render learn more link with correct href', () => {
+    mockUseTopReader.mockReturnValue({
+      data: mockTopReaders,
+      isPending: false,
+    });
+
+    renderComponent();
+
+    const learnMoreLink = screen.getByText('Learn more');
+    expect(learnMoreLink).toHaveAttribute(
+      'href',
+      'https://r.daily.dev/top-reader-badge',
+    );
+    expect(learnMoreLink).toHaveAttribute('target', '_blank');
+  });
+});
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/BadgesAndAwards.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/BadgesAndAwards.tsx
new file mode 100644
index 0000000000..c6964ca50c
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/BadgesAndAwards.tsx
@@ -0,0 +1,117 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { ActivityContainer } from '../../../../components/profile/ActivitySection';
+import { topReaderBadgeDocs } from '../../../../lib/constants';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../../components/typography/Typography';
+import type { PublicProfile } from '../../../../lib/user';
+import { ClickableText } from '../../../../components/buttons/ClickableText';
+import { useTopReader } from '../../../../hooks/useTopReader';
+import {
+  userProductSummaryQueryOptions,
+  ProductType,
+} from '../../../../graphql/njord';
+import { useHasAccessToCores } from '../../../../hooks/useCoresFeature';
+import {
+  Award,
+  SummaryCard,
+  KeywordBadge,
+  BadgesAndAwardsSkeleton,
+} from './BadgesAndAwardsComponents';
+import { anchorDefaultRel } from '../../../../lib/strings';
+
+export const BadgesAndAwards = ({
+  user,
+}: {
+  user: PublicProfile;
+}): ReactElement => {
+  const { data: topReaders, isPending: isTopReaderLoading } = useTopReader({
+    user,
+    limit: 5,
+  });
+
+  const hasCoresAccess = useHasAccessToCores();
+
+  const {
+    data: awards,
+    isPending: isAwardsLoading,
+    error: awardsError,
+  } = useQuery({
+    ...userProductSummaryQueryOptions({
+      userId: user?.id,
+      type: ProductType.Award,
+    }),
+    enabled: !!user?.id && hasCoresAccess,
+  });
+
+  if (isTopReaderLoading || (hasCoresAccess && isAwardsLoading)) {
+    return <BadgesAndAwardsSkeleton />;
+  }
+
+  // Handle error states
+  if (awardsError) {
+    return null;
+  }
+
+  const totalAwards =
+    awards?.reduce((sum, award) => sum + (award?.count || 0), 0) ?? 0;
+
+  return (
+    <ActivityContainer>
+      <Typography
+        tag={TypographyTag.H2}
+        type={TypographyType.Callout}
+        color={TypographyColor.Primary}
+        bold
+        className="flex items-center"
+      >
+        Badges &amp; Awards
+      </Typography>
+      <ClickableText
+        tag="a"
+        target="_blank"
+        href={topReaderBadgeDocs}
+        rel={anchorDefaultRel}
+      >
+        Learn more
+      </ClickableText>
+
+      <div className="my-3 flex gap-3">
+        <SummaryCard
+          count={`x${topReaders?.[0]?.total ?? 0}`}
+          label="Top reader badge"
+        />
+        <SummaryCard count={`x${totalAwards}`} label="Total Awards" />
+      </div>
+
+      {topReaders && topReaders.length > 0 && (
+        <div
+          className="flex flex-col gap-2"
+          role="list"
+          aria-label="User badges"
+        >
+          {topReaders.map((badge) => (
+            <KeywordBadge key={`badge-${badge.id}`} badge={badge} />
+          ))}
+        </div>
+      )}
+
+      {hasCoresAccess && awards && awards.length > 0 && (
+        <div
+          className="mt-4 grid grid-cols-5 gap-4 laptop:grid-cols-6"
+          role="list"
+          aria-label="User awards"
+        >
+          {awards.map((award) => (
+            <Award key={award.id} image={award.image} amount={award.count} />
+          ))}
+        </div>
+      )}
+    </ActivityContainer>
+  );
+};
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/BadgesAndAwardsComponents.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/BadgesAndAwardsComponents.tsx
new file mode 100644
index 0000000000..90a5981f1e
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/BadgesAndAwardsComponents.tsx
@@ -0,0 +1,173 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../../components/typography/Typography';
+import { formatDate, TimeFormatType } from '../../../../lib/dateFormat';
+import { Image } from '../../../../components/image/Image';
+import Link from '../../../../components/utilities/Link';
+import { getTagPageLink } from '../../../../lib';
+import { truncateTextClassNames } from '../../../../components/utilities';
+import { ActivityContainer } from '../../../../components/profile/ActivitySection';
+import { ClickableText } from '../../../../components/buttons/ClickableText';
+import { ElementPlaceholder } from '../../../../components/ElementPlaceholder';
+import { topReaderBadgeDocs } from '../../../../lib/constants';
+import { anchorDefaultRel } from '../../../../lib/strings';
+
+// Skeleton component
+export const BadgesAndAwardsSkeleton = (): ReactElement => {
+  return (
+    <ActivityContainer data-testid="BadgesAndAwardsSkeleton">
+      <Typography
+        tag={TypographyTag.H2}
+        type={TypographyType.Callout}
+        color={TypographyColor.Primary}
+        bold
+        className="flex items-center"
+      >
+        Badges &amp; Awards
+      </Typography>
+      <ClickableText
+        tag="a"
+        target="_blank"
+        href={topReaderBadgeDocs}
+        rel={anchorDefaultRel}
+      >
+        Learn more
+      </ClickableText>
+
+      <div className="my-3 flex gap-3">
+        <ElementPlaceholder className="flex flex-1 flex-col items-center rounded-10 p-2">
+          <ElementPlaceholder className="h-6 w-8 rounded-4" />
+          <ElementPlaceholder className="mt-1 h-4 w-16 rounded-4" />
+        </ElementPlaceholder>
+        <ElementPlaceholder className="flex flex-1 flex-col items-center rounded-10 p-2">
+          <ElementPlaceholder className="h-6 w-8 rounded-4" />
+          <ElementPlaceholder className="mt-1 h-4 w-16 rounded-4" />
+        </ElementPlaceholder>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <ElementPlaceholder className="flex items-center justify-between rounded-6 p-1">
+          <ElementPlaceholder className="h-6 w-20 rounded-4" />
+          <ElementPlaceholder className="h-4 w-12 rounded-4" />
+        </ElementPlaceholder>
+      </div>
+
+      {/* Awards section skeleton */}
+      <div className="mt-4 grid grid-cols-5 gap-4 laptop:grid-cols-6">
+        {Array.from({ length: 4 }).map((_, index) => (
+          <ElementPlaceholder
+            // eslint-disable-next-line react/no-array-index-key
+            key={`skeleton-award-${index}`}
+            className="flex flex-col items-center justify-center rounded-6 p-1"
+          >
+            <ElementPlaceholder className="size-8 rounded-4" />
+            <ElementPlaceholder className="mt-1 h-4 w-6 rounded-4" />
+          </ElementPlaceholder>
+        ))}
+      </div>
+    </ActivityContainer>
+  );
+};
+
+// Award component
+export type AwardProps = {
+  image: string;
+  amount: number;
+};
+
+export const Award = ({ image, amount }: AwardProps): ReactElement => {
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <Image src={image} alt="Award" className="size-8" />
+      <Typography
+        type={TypographyType.Caption2}
+        color={TypographyColor.Primary}
+        className="mt-1"
+      >
+        x{amount}
+      </Typography>
+    </div>
+  );
+};
+
+// SummaryCard component
+export type SummaryCardProps = {
+  count: string | number;
+  label: string;
+};
+
+export const SummaryCard = ({
+  count,
+  label,
+}: SummaryCardProps): ReactElement => {
+  return (
+    <div className="flex-1 rounded-10 border border-border-subtlest-tertiary p-2 text-center">
+      <Typography
+        type={TypographyType.Body}
+        color={TypographyColor.Primary}
+        bold
+      >
+        {count}
+      </Typography>
+      <Typography
+        type={TypographyType.Footnote}
+        color={TypographyColor.Tertiary}
+      >
+        {label}
+      </Typography>
+    </div>
+  );
+};
+
+// KeywordBadge component
+export type KeywordBadgeProps = {
+  badge: {
+    id: string;
+    keyword: {
+      value: string;
+      flags?: { title?: string };
+    };
+    issuedAt: string | Date;
+  };
+};
+
+export const KeywordBadge = ({ badge }: KeywordBadgeProps): ReactElement => {
+  return (
+    <div className="flex items-center justify-between">
+      <Link
+        href={getTagPageLink(badge.keyword.value)}
+        passHref
+        prefetch={false}
+      >
+        <Typography
+          tag={TypographyTag.Link}
+          type={TypographyType.Caption1}
+          color={TypographyColor.Primary}
+          className={classNames(
+            'rounded-6 border border-border-subtlest-tertiary px-1 py-0.5 lowercase transition duration-200 hover:bg-background-popover',
+            truncateTextClassNames,
+          )}
+        >
+          {badge.keyword.flags?.title || badge.keyword.value}
+        </Typography>
+      </Link>
+      <Typography
+        tag={TypographyTag.Time}
+        type={TypographyType.Caption2}
+        color={TypographyColor.Quaternary}
+        dateTime={new Date(badge.issuedAt).toISOString()}
+      >
+        {formatDate({
+          value: badge.issuedAt,
+          type: TimeFormatType.TopReaderBadge,
+        })}
+      </Typography>
+    </div>
+  );
+};
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.spec.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.spec.tsx
new file mode 100644
index 0000000000..50ef7fadf6
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.spec.tsx
@@ -0,0 +1,296 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import type {
+  LoggedUser,
+  PublicProfile,
+  UserExperienceLevel,
+} from '../../../../lib/user';
+import { ProfileCompletion } from './ProfileCompletion';
+import { useActions } from '../../../../hooks';
+import { useProfileExperiences } from '../../hooks/useProfileExperiences';
+
+// Mock hooks
+jest.mock('../../../../hooks', () => ({
+  useActions: jest.fn(),
+}));
+
+jest.mock('../../hooks/useProfileExperiences', () => ({
+  useProfileExperiences: jest.fn(),
+}));
+
+const mockCheckHasCompleted = jest.fn();
+const mockUseActions = useActions as jest.Mock;
+const mockUseProfileExperiences = useProfileExperiences as jest.Mock;
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  mockUseActions.mockReturnValue({
+    checkHasCompleted: mockCheckHasCompleted,
+    actions: [],
+    isActionsFetched: true,
+  });
+  mockCheckHasCompleted.mockReturnValue(false);
+  mockUseProfileExperiences.mockReturnValue({
+    work: [],
+    education: [],
+    isLoading: false,
+  });
+});
+
+const baseUser: PublicProfile = {
+  id: 'user-1',
+  name: 'Test User',
+  username: 'testuser',
+  premium: false,
+  reputation: 20,
+  image: 'https://daily.dev/test.png',
+  bio: 'Test bio',
+  createdAt: '2020-01-01T00:00:00.000Z',
+  twitter: 'testuser',
+  github: 'testuser',
+  hashnode: 'testuser',
+  portfolio: 'https://test.com',
+  permalink: 'https://daily.dev/testuser',
+  roadmap: 'testuser',
+  threads: 'testuser',
+  codepen: 'testuser',
+  reddit: 'testuser',
+  stackoverflow: '123456/testuser',
+  youtube: 'testuser',
+  linkedin: 'testuser',
+  mastodon: 'https://mastodon.social/@testuser',
+  bluesky: 'testuser.bsky.social',
+  experienceLevel: 'MORE_THAN_4_YEARS' as keyof typeof UserExperienceLevel,
+  companies: [
+    {
+      id: '1',
+      name: 'Test Company',
+      image: 'https://daily.dev/company.png',
+      createdAt: new Date('2020-01-01'),
+      updatedAt: new Date('2020-01-01'),
+    },
+  ],
+};
+
+describe('ProfileCompletion', () => {
+  describe('Rendering', () => {
+    it('should not render when profile is 100% complete', () => {
+      mockUseProfileExperiences.mockReturnValue({
+        work: [{ id: '1' }],
+        education: [{ id: '1' }],
+        isLoading: false,
+      });
+
+      const completeUser: LoggedUser = {
+        ...baseUser,
+        username: baseUser.username || 'testuser',
+        email: 'test@example.com',
+        providers: ['google'],
+        balance: { amount: 0 },
+      };
+
+      render(<ProfileCompletion user={completeUser} />);
+      expect(screen.queryByText('Profile Completion')).not.toBeInTheDocument();
+    });
+
+    it('should render when profile is incomplete', () => {
+      const incompleteUser: PublicProfile = {
+        ...baseUser,
+        image: '',
+        bio: '',
+        experienceLevel: undefined,
+        companies: undefined,
+      };
+
+      render(<ProfileCompletion user={incompleteUser} />);
+      expect(screen.getByText('Profile Completion')).toBeInTheDocument();
+    });
+
+    it('should display correct percentage when partially complete', () => {
+      const partialUser: PublicProfile = {
+        ...baseUser,
+        bio: '', // Missing headline
+        experienceLevel: undefined, // Missing experience level
+        companies: undefined, // Missing work experience and education
+      };
+
+      render(<ProfileCompletion user={partialUser} />);
+      // Only profile image is complete (1/5 = 20%)
+      expect(screen.getByText('20%')).toBeInTheDocument();
+    });
+
+    it('should display correct description for single missing item', () => {
+      mockUseProfileExperiences.mockReturnValue({
+        work: [{ id: '1' }],
+        education: [{ id: '1' }],
+        isLoading: false,
+      });
+
+      const user: PublicProfile = {
+        ...baseUser,
+        bio: '', // Only missing headline
+      };
+
+      render(<ProfileCompletion user={user} />);
+      expect(screen.getByText('Add Headline.')).toBeInTheDocument();
+    });
+
+    it('should display correct description for multiple missing items', () => {
+      mockUseProfileExperiences.mockReturnValue({
+        work: [{ id: '1' }],
+        education: [{ id: '1' }],
+        isLoading: false,
+      });
+
+      const user: PublicProfile = {
+        ...baseUser,
+        bio: '',
+        experienceLevel: undefined,
+      };
+
+      render(<ProfileCompletion user={user} />);
+      expect(
+        screen.getByText('Add Headline and Experience level.'),
+      ).toBeInTheDocument();
+    });
+
+    it('should display correct description for all missing items', () => {
+      const user: PublicProfile = {
+        ...baseUser,
+        image: '',
+        bio: '',
+        experienceLevel: undefined,
+        companies: undefined,
+      };
+
+      render(<ProfileCompletion user={user} />);
+      expect(
+        screen.getByText(
+          'Add Profile image, Headline, Experience level, Work experience and Education.',
+        ),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('Completion Items Detection', () => {
+    it('should detect missing profile image', () => {
+      const user: PublicProfile = {
+        ...baseUser,
+        image: '',
+      };
+
+      render(<ProfileCompletion user={user} />);
+      expect(screen.getByText(/Profile image/)).toBeInTheDocument();
+    });
+
+    it('should detect missing headline (bio)', () => {
+      mockUseProfileExperiences.mockReturnValue({
+        work: [{ id: '1' }],
+        education: [{ id: '1' }],
+        isLoading: false,
+      });
+
+      const user: PublicProfile = {
+        ...baseUser,
+        bio: '',
+      };
+
+      render(<ProfileCompletion user={user} />);
+      expect(screen.getByText('Add Headline.')).toBeInTheDocument();
+    });
+
+    it('should detect missing experience level', () => {
+      mockUseProfileExperiences.mockReturnValue({
+        work: [{ id: '1' }],
+        education: [{ id: '1' }],
+        isLoading: false,
+      });
+
+      const user: PublicProfile = {
+        ...baseUser,
+        experienceLevel: undefined,
+      };
+
+      render(<ProfileCompletion user={user} />);
+      expect(screen.getByText('Add Experience level.')).toBeInTheDocument();
+    });
+
+    it('should detect missing work experience (companies)', () => {
+      const user: PublicProfile = {
+        ...baseUser,
+        companies: undefined,
+      };
+
+      render(<ProfileCompletion user={user} />);
+      expect(screen.getByText(/Work experience/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Navigation', () => {
+    it('should have link to profile settings when profile image is missing', () => {
+      const user: PublicProfile = {
+        ...baseUser,
+        image: '',
+      };
+
+      render(<ProfileCompletion user={user} />);
+      const component = screen.getByRole('link');
+
+      expect(component).toHaveAttribute('href', '/settings/profile');
+    });
+
+    it('should have link to profile settings when headline is missing', () => {
+      mockUseProfileExperiences.mockReturnValue({
+        work: [{ id: '1' }],
+        education: [{ id: '1' }],
+        isLoading: false,
+      });
+
+      const user: PublicProfile = {
+        ...baseUser,
+        bio: '',
+      };
+
+      render(<ProfileCompletion user={user} />);
+      const component = screen.getByRole('link');
+
+      expect(component).toHaveAttribute('href', '/settings/profile?field=bio');
+    });
+
+    it('should have link to profile settings when experience level is missing', () => {
+      mockUseProfileExperiences.mockReturnValue({
+        work: [{ id: '1' }],
+        education: [{ id: '1' }],
+        isLoading: false,
+      });
+
+      const user: PublicProfile = {
+        ...baseUser,
+        experienceLevel: undefined,
+      };
+
+      render(<ProfileCompletion user={user} />);
+      const component = screen.getByRole('link');
+
+      expect(component).toHaveAttribute(
+        'href',
+        '/settings/profile?field=experienceLevel',
+      );
+    });
+
+    it('should have link to first incomplete item in priority order', () => {
+      const user: PublicProfile = {
+        ...baseUser,
+        companies: undefined, // Missing work experience (last priority)
+      };
+
+      render(<ProfileCompletion user={user} />);
+      const component = screen.getByRole('link');
+
+      expect(component).toHaveAttribute(
+        'href',
+        '/settings/profile/experience/work',
+      );
+    });
+  });
+});
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.tsx
new file mode 100644
index 0000000000..d7cb24f95b
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.tsx
@@ -0,0 +1,168 @@
+import type { ReactElement } from 'react';
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import ProgressCircle from '../../../../components/ProgressCircle';
+import {
+  Typography,
+  TypographyType,
+  TypographyColor,
+} from '../../../../components/typography/Typography';
+import { MoveToIcon } from '../../../../components/icons';
+import { IconSize } from '../../../../components/Icon';
+import { getPercentage } from '../../../../lib/func';
+import type { LoggedUser, PublicProfile } from '../../../../lib/user';
+import Link from '../../../../components/utilities/Link';
+import { anchorDefaultRel } from '../../../../lib/strings';
+import { webappUrl } from '../../../../lib/constants';
+import { useProfileExperiences } from '../../hooks/useProfileExperiences';
+import type {
+  UserExperienceEducation,
+  UserExperienceWork,
+} from '../../../../graphql/user/profile';
+import { profileExperiencesLimit } from '../../../../graphql/user/profile';
+
+export type CompletionItem = {
+  label: string;
+  completed: boolean;
+  redirectPath: string;
+};
+
+type ProfileCompletionProps = {
+  className?: string;
+  user: LoggedUser | PublicProfile;
+};
+
+export const getCompletionItems = (
+  user: LoggedUser | PublicProfile | Record<string, unknown>,
+  work: UserExperienceWork[],
+  education: UserExperienceEducation[],
+): CompletionItem[] => {
+  const hasProfileImage = !!user.image && user.image !== '';
+  const hasHeadline =
+    !!user.bio && typeof user.bio === 'string' && user.bio.trim() !== '';
+  const hasExperienceLevel = !!user.experienceLevel;
+  const hasWorkExperience = work && work.length > 0;
+  const hasEducation = education && education.length > 0;
+
+  return [
+    {
+      label: 'Profile image',
+      completed: hasProfileImage,
+      redirectPath: `${webappUrl}settings/profile`,
+    },
+    {
+      label: 'Headline',
+      completed: hasHeadline,
+      redirectPath: `${webappUrl}settings/profile?field=bio`,
+    },
+    {
+      label: 'Experience level',
+      completed: hasExperienceLevel,
+      redirectPath: `${webappUrl}settings/profile?field=experienceLevel`,
+    },
+    {
+      label: 'Work experience',
+      completed: hasWorkExperience,
+      redirectPath: `${webappUrl}settings/profile/experience/work`,
+    },
+    {
+      label: 'Education',
+      completed: hasEducation,
+      redirectPath: `${webappUrl}settings/profile/experience/education`,
+    },
+  ];
+};
+
+const formatDescription = (incompleteItems: CompletionItem[]): string => {
+  if (incompleteItems.length === 0) {
+    return 'Profile completed!';
+  }
+
+  const labels = incompleteItems.map((item) => item.label);
+  const formattedList =
+    labels.length === 1
+      ? labels[0]
+      : `${labels.slice(0, -1).join(', ')} and ${labels[labels.length - 1]}`;
+
+  return `Add ${formattedList}.`;
+};
+
+export const ProfileCompletion = ({
+  className,
+  user,
+}: ProfileCompletionProps): ReactElement => {
+  const { work, education, isLoading } = useProfileExperiences(
+    user as PublicProfile,
+    profileExperiencesLimit,
+  );
+
+  const items = useMemo(
+    () => getCompletionItems(user, work, education),
+    [user, work, education],
+  );
+
+  const { progress, incompleteItems } = useMemo(() => {
+    const incomplete = items.filter((item) => !item.completed);
+    const completedCount = items.length - incomplete.length;
+
+    return {
+      progress: getPercentage(items.length, completedCount),
+      incompleteItems: incomplete,
+    };
+  }, [items]);
+
+  const description = useMemo(
+    () => formatDescription(incompleteItems),
+    [incompleteItems],
+  );
+
+  const firstIncompleteItem = incompleteItems[0];
+  const redirectPath = firstIncompleteItem?.redirectPath;
+
+  const isCompleted = progress === 100;
+
+  if (isCompleted || isLoading) {
+    return null;
+  }
+
+  return (
+    <Link href={redirectPath}>
+      <a
+        href={redirectPath}
+        rel={anchorDefaultRel}
+        className={classNames(
+          'flex cursor-pointer flex-col gap-6 border border-brand-active bg-brand-float p-4 hover:bg-brand-hover laptop:rounded-16',
+          className,
+        )}
+      >
+        <div className="flex w-full items-center gap-6">
+          <div className="flex min-w-0 flex-1 flex-col gap-1">
+            <Typography
+              type={TypographyType.Callout}
+              color={TypographyColor.Primary}
+              bold
+            >
+              Profile Completion
+            </Typography>
+            <div className="flex min-w-0 items-center gap-1">
+              <MoveToIcon
+                size={IconSize.XSmall}
+                className="shrink-0 text-text-secondary"
+              />
+              <Typography
+                type={TypographyType.Caption1}
+                color={TypographyColor.Secondary}
+              >
+                {description}
+              </Typography>
+            </div>
+          </div>
+
+          <div className="flex shrink-0 leading-none">
+            <ProgressCircle progress={progress} size={50} showPercentage />
+          </div>
+        </div>
+      </a>
+    </Link>
+  );
+};
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/ProfileWidgets.spec.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/ProfileWidgets.spec.tsx
new file mode 100644
index 0000000000..48b9b7c363
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/ProfileWidgets.spec.tsx
@@ -0,0 +1,266 @@
+import React from 'react';
+import type { RenderResult } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { LoggedUser, PublicProfile } from '../../../../lib/user';
+import AuthContext from '../../../../contexts/AuthContext';
+import { ProfileWidgets } from './ProfileWidgets';
+import { USER_READING_HISTORY_QUERY } from '../../../../graphql/users';
+import type { ProfileReadingData } from '../../../../graphql/users';
+import type { Connection } from '../../../../graphql/common';
+import type { SourceMember, Squad } from '../../../../graphql/sources';
+import { SourceMemberRole, SourceType } from '../../../../graphql/sources';
+import { settingsContext } from '../../../../../__tests__/helpers/boot';
+import SettingsContext from '../../../../contexts/SettingsContext';
+import { getLogContextStatic } from '../../../../contexts/LogContext';
+import { gqlClient } from '../../../../graphql/common';
+
+const LogContext = getLogContextStatic();
+
+jest.mock('next/dynamic', () => ({
+  __esModule: true,
+  default: () => {
+    // Synchronously require the actual component
+    const mod =
+      jest.requireActual<Record<string, React.ComponentType>>(
+        './BadgesAndAwards',
+      );
+    return mod.BadgesAndAwards;
+  },
+}));
+
+// Mock gqlClient
+jest.mock('../../../../graphql/common', () => ({
+  gqlClient: {
+    request: jest.fn(),
+  },
+}));
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+const baseUserProps = {
+  premium: false,
+  reputation: 20,
+  bio: 'The best company!',
+  twitter: 'twitter',
+  github: 'github',
+  hashnode: 'hashnode',
+  portfolio: 'https://daily.dev/?key=vaue',
+  roadmap: 'roadmap',
+  threads: 'threads',
+  codepen: 'codepen',
+  reddit: 'reddit',
+  stackoverflow: '999999/stackoverflow',
+  youtube: 'youtube',
+  linkedin: 'linkedin',
+  mastodon: 'https://mastodon.social/@mastodon',
+};
+
+const defaultLoggedUser: LoggedUser = {
+  ...baseUserProps,
+  id: 'u1',
+  name: 'Ido Shamun',
+  providers: ['idoshamun'],
+  username: 'idoshamun',
+  image: 'https://daily.dev/ido.png',
+  createdAt: '2020-07-26T13:04:35.000Z',
+  permalink: 'https://daily.dev/ido',
+  bluesky: 'https://bsky.app/profile/dailydotdev.bsky.social',
+};
+
+const defaultProfile: PublicProfile = {
+  ...baseUserProps,
+  id: 'u2',
+  name: 'Daily Dev',
+  username: 'dailydotdev',
+  image: 'https://daily.dev/daily.png',
+  cover: 'https://daily.dev/cover.png',
+  createdAt: '2020-08-26T13:04:35.000Z',
+  permalink: 'https://daily.dev/dailydotdev',
+  bluesky: 'dailydotdev.bsky.social',
+};
+
+const defaultMemberships: Connection<SourceMember> = {
+  pageInfo: null,
+  edges: [
+    {
+      node: {
+        role: SourceMemberRole.Admin,
+        source: {
+          id: 's1',
+          name: 'Squad 1',
+          image: 'https://daily.dev/squad1.png',
+          permalink: 'https://daily.dev/squad1',
+          type: SourceType.Squad,
+          membersCount: 10,
+        } as unknown as Squad,
+      } as unknown as SourceMember,
+    },
+    {
+      node: {
+        role: SourceMemberRole.Member,
+        source: {
+          id: 's2',
+          name: 'Squad 2',
+          image: 'https://daily.dev/squad2.png',
+          permalink: 'https://daily.dev/squad2',
+          type: SourceType.Squad,
+          membersCount: 40,
+        } as unknown as Squad,
+      } as unknown as SourceMember,
+    },
+  ],
+};
+
+const defaultReadingHistory: ProfileReadingData = {
+  userReadingRankHistory: [
+    { rank: 1, count: 10 },
+    { rank: 2, count: 20 },
+  ],
+  userReadHistory: [
+    { date: '2024-01-01', reads: 5 },
+    { date: '2024-01-02', reads: 10 },
+  ],
+  userStreakProfile: {
+    max: 10,
+    total: 50,
+    current: 5,
+    lastViewAt: new Date('2024-01-15'),
+  },
+  userMostReadTags: ['javascript', 'typescript', 'react'],
+};
+
+const logEvent = jest.fn();
+
+const renderComponent = (
+  profile: Partial<PublicProfile> = {},
+  sources?: Connection<SourceMember>,
+  options: {
+    readingHistory?: typeof defaultReadingHistory | null;
+    tokenRefreshed?: boolean;
+  } = {},
+): RenderResult => {
+  const { readingHistory = null, tokenRefreshed = true } = options;
+
+  const client = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  const user = { ...defaultProfile, ...profile };
+
+  // Mock gqlClient.request to return reading history
+  (gqlClient.request as jest.Mock).mockImplementation((query) => {
+    if (readingHistory !== null && query === USER_READING_HISTORY_QUERY) {
+      return Promise.resolve(readingHistory);
+    }
+    return Promise.resolve({});
+  });
+
+  return render(
+    <QueryClientProvider client={client}>
+      <AuthContext.Provider
+        value={{
+          user: defaultLoggedUser,
+          shouldShowLogin: false,
+          showLogin: jest.fn(),
+          logout: jest.fn(),
+          updateUser: jest.fn(),
+          tokenRefreshed,
+          isLoggedIn: true,
+          isAuthReady: true,
+          closeLogin: jest.fn(),
+          getRedirectUri: jest.fn(),
+          squads: [],
+        }}
+      >
+        <LogContext.Provider
+          value={{
+            logEvent,
+            logEventStart: jest.fn(),
+            logEventEnd: jest.fn(),
+            sendBeacon: jest.fn(),
+          }}
+        >
+          <SettingsContext.Provider value={settingsContext}>
+            <ProfileWidgets
+              user={user}
+              userStats={{
+                upvotes: 5_000,
+                views: 83_000,
+                numFollowers: 23_000,
+                numFollowing: 3_000,
+              }}
+              sources={sources}
+            />
+          </SettingsContext.Provider>
+        </LogContext.Provider>
+      </AuthContext.Provider>
+    </QueryClientProvider>,
+  );
+};
+
+it('should render BadgesAndAwards component', () => {
+  renderComponent();
+
+  // BadgesAndAwards renders "Badges & Awards" heading
+  const badgesHeading = screen.getByText('Badges & Awards');
+  expect(badgesHeading).toBeInTheDocument();
+});
+
+it('should render ReadingOverview component when userReadingRankHistory exists', async () => {
+  renderComponent({}, undefined, { readingHistory: defaultReadingHistory });
+
+  // BadgesAndAwards renders immediately
+  const badgesHeading = screen.getByText('Badges & Awards');
+  expect(badgesHeading).toBeInTheDocument();
+
+  // Wait for ReadingOverview to appear
+  const readingOverviewHeading = await screen.findByText('Reading Overview');
+  expect(readingOverviewHeading).toBeInTheDocument();
+});
+
+it('should not render ReadingOverview when userReadingRankHistory is missing', async () => {
+  // Pass readingHistory without userReadingRankHistory
+  renderComponent({}, undefined, {
+    readingHistory: {
+      ...defaultReadingHistory,
+      userReadingRankHistory: undefined,
+    },
+  });
+
+  // ReadingOverview should not appear
+  const readingHeading = screen.queryByText('Reading Overview');
+  expect(readingHeading).not.toBeInTheDocument();
+});
+
+it('should list all user squads', async () => {
+  renderComponent({}, defaultMemberships);
+  const squadNames = await screen.findAllByTestId('squad-list-item-name');
+  expect(squadNames.length).toBe(defaultMemberships.edges.length);
+  const [name1, name2] = squadNames;
+  expect(name1).toHaveTextContent('Squad 1');
+  expect(name2).toHaveTextContent('Squad 2');
+});
+
+it('should not fetch reading history when tokenRefreshed is false', async () => {
+  renderComponent({}, undefined, {
+    readingHistory: null,
+    tokenRefreshed: false,
+  });
+
+  // BadgesAndAwards should still render
+  const badgesHeading = await screen.findByText('Badges & Awards');
+  expect(badgesHeading).toBeInTheDocument();
+
+  // ReadingOverview should not appear
+  await waitFor(() => {
+    const readingHeading = screen.queryByText('Reading');
+    expect(readingHeading).not.toBeInTheDocument();
+  });
+});
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/ProfileWidgets.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/ProfileWidgets.tsx
new file mode 100644
index 0000000000..30e043c7b3
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/ProfileWidgets.tsx
@@ -0,0 +1,84 @@
+import type { ReactElement } from 'react';
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+import { useQuery } from '@tanstack/react-query';
+import { startOfTomorrow, subDays, subMonths } from 'date-fns';
+import dynamic from 'next/dynamic';
+import AuthContext from '../../../../contexts/AuthContext';
+import { ActiveOrRecomendedSquads } from './ActiveOrRecomendedSquads';
+import type { ProfileReadingData, ProfileV2 } from '../../../../graphql/users';
+import { USER_READING_HISTORY_QUERY } from '../../../../graphql/users';
+import { generateQueryKey, RequestKey } from '../../../../lib/query';
+import { gqlClient } from '../../../../graphql/common';
+import { ReadingOverview } from './ReadingOverview';
+import { ProfileCompletion } from './ProfileCompletion';
+import { Share } from './Share';
+
+const BadgesAndAwards = dynamic(() =>
+  import('./BadgesAndAwards').then((mod) => mod.BadgesAndAwards),
+);
+
+export interface ProfileWidgetsProps extends ProfileV2 {
+  className?: string;
+  enableSticky?: boolean;
+}
+
+export function ProfileWidgets({
+  user,
+  sources,
+  className,
+}: ProfileWidgetsProps): ReactElement {
+  const { user: loggedUser, tokenRefreshed } = useContext(AuthContext);
+  const isSameUser = loggedUser?.id === user.id;
+
+  const before = startOfTomorrow();
+  const after = subMonths(subDays(before, 2), 5);
+
+  const { data: readingHistory, isLoading: isReadingHistoryLoading } =
+    useQuery<ProfileReadingData>({
+      queryKey: generateQueryKey(RequestKey.ReadingStats, user),
+      queryFn: () =>
+        gqlClient.request(USER_READING_HISTORY_QUERY, {
+          id: user?.id,
+          before,
+          after,
+          version: 2,
+          limit: 6,
+        }),
+      enabled: !!user && tokenRefreshed && !!before && !!after,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+      refetchOnMount: false,
+    });
+  const squads = sources?.edges?.map((s) => s.node.source) ?? [];
+
+  return (
+    <div
+      className={classNames(
+        'my-4 flex gap-2 laptop:my-0 laptop:flex-col',
+        className,
+      )}
+    >
+      {isSameUser && (
+        <ProfileCompletion className="hidden laptop:flex" user={user} />
+      )}
+      {isSameUser && (
+        <Share permalink={user?.permalink} className="hidden laptop:flex" />
+      )}
+      {readingHistory?.userReadingRankHistory && (
+        <ReadingOverview
+          readHistory={readingHistory?.userReadHistory}
+          before={before}
+          after={after}
+          streak={readingHistory?.userStreakProfile}
+          mostReadTags={readingHistory?.userMostReadTags}
+          isLoading={isReadingHistoryLoading}
+        />
+      )}
+      {(isSameUser || squads.length > 0) && (
+        <ActiveOrRecomendedSquads userId={user.id} squads={squads} />
+      )}
+      <BadgesAndAwards user={user} />
+    </div>
+  );
+}
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/ReadingOverview.spec.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/ReadingOverview.spec.tsx
new file mode 100644
index 0000000000..2e6a8c009a
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/ReadingOverview.spec.tsx
@@ -0,0 +1,212 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { QueryClient } from '@tanstack/react-query';
+import type {
+  UserReadHistory,
+  UserStreak,
+  MostReadTag,
+} from '../../../../graphql/users';
+import { ReadingOverview } from './ReadingOverview';
+import { TestBootProvider } from '../../../../../__tests__/helpers/boot';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+const mockReadHistory: UserReadHistory[] = [
+  {
+    date: '2024-01-01',
+    reads: 5,
+  },
+  {
+    date: '2024-01-02',
+    reads: 3,
+  },
+  {
+    date: '2024-01-03',
+    reads: 0,
+  },
+  {
+    date: '2024-01-04',
+    reads: 8,
+  },
+];
+
+const mockStreak: UserStreak = {
+  max: 10,
+  total: 25,
+  current: 5,
+  weekStart: 1, // Monday
+  lastViewAt: new Date('2024-01-04'),
+};
+
+const mockMostReadTags: MostReadTag[] = [
+  {
+    value: 'javascript',
+    count: 15,
+    percentage: 0.6,
+    total: 25,
+  },
+  {
+    value: 'react',
+    count: 10,
+    percentage: 0.4,
+    total: 25,
+  },
+];
+
+const defaultProps = {
+  readHistory: mockReadHistory,
+  before: new Date('2024-01-31'),
+  after: new Date('2024-01-01'),
+  streak: mockStreak,
+  mostReadTags: mockMostReadTags,
+  isLoading: false,
+};
+
+const renderComponent = (props: Partial<typeof defaultProps> = {}) => {
+  const client = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return render(
+    <TestBootProvider client={client}>
+      <ReadingOverview {...defaultProps} {...props} />
+    </TestBootProvider>,
+  );
+};
+
+describe('ReadingOverview component', () => {
+  it('should render loading skeleton when isLoading is true', () => {
+    renderComponent({ isLoading: true });
+
+    expect(screen.getByText('Reading Overview')).toBeInTheDocument();
+    expect(screen.getByText('Learn more')).toBeInTheDocument();
+    // Check for skeleton elements
+    // Check for skeleton elements using accessible queries
+    expect(screen.getByTestId('ReadingOverviewSkeleton')).toBeInTheDocument();
+  });
+
+  it('should render main content when not loading', () => {
+    renderComponent();
+
+    expect(screen.getByText('Reading Overview')).toBeInTheDocument();
+    expect(screen.getByText('Learn more')).toBeInTheDocument();
+    expect(
+      screen.getByText('Posts read in the last months (16)'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Top tags by reading days')).toBeInTheDocument();
+    expect(screen.getByText('Javascript')).toBeInTheDocument();
+    expect(screen.getByText('React')).toBeInTheDocument();
+    expect(screen.getByText('+60%')).toBeInTheDocument(); // javascript percentage
+    expect(screen.getByText('+40%')).toBeInTheDocument(); // react percentage
+  });
+
+  it('should render streaks section when streak data is available', () => {
+    renderComponent({ streak: mockStreak });
+
+    expect(screen.getByText('Longest streak 🏆')).toBeInTheDocument();
+    expect(screen.getByText('Total reading days')).toBeInTheDocument();
+    expect(screen.getByText('10')).toBeInTheDocument(); // max streak
+    expect(screen.getByText('25')).toBeInTheDocument(); // total days
+  });
+
+  it('should not render streaks section when streak data is null', () => {
+    renderComponent({ streak: null });
+
+    expect(screen.queryByText('Longest streak 🏆')).not.toBeInTheDocument();
+    expect(screen.queryByText('Total reading days')).not.toBeInTheDocument();
+  });
+
+  it('should not render tags section when mostReadTags is empty', () => {
+    renderComponent({ mostReadTags: [] });
+
+    expect(
+      screen.queryByText('Top tags by reading days'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should not render tags section when mostReadTags is null', () => {
+    renderComponent({ mostReadTags: null });
+
+    expect(
+      screen.queryByText('Top tags by reading days'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should calculate and display correct total reads', () => {
+    renderComponent();
+
+    // Total reads: 5 + 3 + 0 + 8 = 16
+    expect(
+      screen.getByText('Posts read in the last months (16)'),
+    ).toBeInTheDocument();
+  });
+
+  it('should display total reads as 0 when readHistory is empty', () => {
+    renderComponent({ readHistory: [] });
+
+    expect(
+      screen.getByText('Posts read in the last months (0)'),
+    ).toBeInTheDocument();
+  });
+
+  it('should display total reads as 0 when readHistory is null', () => {
+    renderComponent({ readHistory: null });
+
+    expect(
+      screen.getByText('Posts read in the last months (0)'),
+    ).toBeInTheDocument();
+  });
+
+  it('should render calendar heatmap with correct props', () => {
+    renderComponent();
+
+    // Check that CalendarHeatmap component is rendered by looking for its content
+    // The heatmap should be present in the DOM structure
+    expect(
+      screen.getByText('Posts read in the last months (16)'),
+    ).toBeInTheDocument();
+  });
+
+  it('should render heatmap legend', () => {
+    renderComponent();
+
+    expect(screen.getByText('Less')).toBeInTheDocument();
+    expect(screen.getByText('More')).toBeInTheDocument();
+  });
+
+  it('should render learn more link with correct href', () => {
+    renderComponent();
+
+    const learnMoreLink = screen.getByText('Learn more');
+    expect(learnMoreLink).toHaveAttribute(
+      'href',
+      'https://r.daily.dev/streaks',
+    );
+    expect(learnMoreLink).toHaveAttribute('target', '_blank');
+  });
+
+  it('should handle large numbers in readHistory', () => {
+    const largeReadsHistory: UserReadHistory[] = [
+      {
+        date: '2024-01-01',
+        reads: 1000,
+      },
+      {
+        date: '2024-01-02',
+        reads: 2000000,
+      },
+    ];
+
+    renderComponent({ readHistory: largeReadsHistory });
+
+    expect(
+      screen.getByText('Posts read in the last months (2M)'),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/ReadingOverview.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/ReadingOverview.tsx
new file mode 100644
index 0000000000..3c32e63e38
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/ReadingOverview.tsx
@@ -0,0 +1,128 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useMemo } from 'react';
+import type {
+  UserReadHistory,
+  UserStreak,
+  MostReadTag,
+} from '../../../../graphql/users';
+import { ActivityContainer } from '../../../../components/profile/ActivitySection';
+import { CalendarHeatmap } from '../../../../components/CalendarHeatmap';
+import { migrateUserToStreaks } from '../../../../lib/constants';
+import { ClickableText } from '../../../../components/buttons/ClickableText';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../../components/typography/Typography';
+import {
+  ReadingStreaksSection,
+  ReadingTagsSection,
+  HeatmapLegend,
+  ReadingOverviewSkeleton,
+} from './ReadingOverviewComponents';
+import { anchorDefaultRel, pluralize } from '../../../../lib/strings';
+import { largeNumberFormat } from '../../../../lib';
+
+// Utility functions
+const readHistoryToValue = (value: UserReadHistory): number => value.reads;
+
+const readHistoryToTooltip = (
+  value: UserReadHistory,
+  date: Date,
+): ReactNode => {
+  const formattedDate = date.toLocaleString('en-US', {
+    month: 'short',
+    day: '2-digit',
+    year: 'numeric',
+  });
+  if (!value?.reads) {
+    return `No posts read on ${formattedDate}`;
+  }
+  return (
+    <>
+      <strong>
+        {value.reads} {pluralize('article', value.reads)} read
+      </strong>
+      &nbsp;on {formattedDate}
+    </>
+  );
+};
+
+export interface ReadingOverviewProps {
+  readHistory: UserReadHistory[];
+  before: Date;
+  after: Date;
+  streak: UserStreak;
+  mostReadTags: MostReadTag[];
+  isLoading?: boolean;
+}
+
+export function ReadingOverview({
+  readHistory,
+  before,
+  after,
+  streak,
+  mostReadTags,
+  isLoading = false,
+}: ReadingOverviewProps): ReactElement {
+  const totalReads = useMemo(() => {
+    if (!readHistory?.length) {
+      return 0;
+    }
+    return readHistory.reduce((acc, val) => {
+      const reads = val?.reads || 0;
+      return acc + (typeof reads === 'number' && reads >= 0 ? reads : 0);
+    }, 0);
+  }, [readHistory]);
+
+  if (isLoading) {
+    return <ReadingOverviewSkeleton />;
+  }
+
+  return (
+    <ActivityContainer>
+      <Typography
+        tag={TypographyTag.H2}
+        type={TypographyType.Callout}
+        color={TypographyColor.Primary}
+        bold
+        className="flex items-center"
+      >
+        Reading Overview
+      </Typography>
+      <ClickableText
+        tag="a"
+        target="_blank"
+        href={migrateUserToStreaks}
+        rel={anchorDefaultRel}
+      >
+        Learn more
+      </ClickableText>
+
+      {!!streak && <ReadingStreaksSection streak={streak} />}
+      {mostReadTags && mostReadTags?.length > 0 && (
+        <ReadingTagsSection mostReadTags={mostReadTags} />
+      )}
+      <Typography
+        tag={TypographyTag.H3}
+        type={TypographyType.Subhead}
+        color={TypographyColor.Tertiary}
+        className="mb-3"
+      >
+        Posts read in the last months
+        {totalReads >= 0 && ` (${largeNumberFormat(totalReads)})`}
+      </Typography>
+      {Array.isArray(readHistory) && (
+        <CalendarHeatmap
+          startDate={after}
+          endDate={before}
+          values={readHistory}
+          valueToCount={readHistoryToValue}
+          valueToTooltip={readHistoryToTooltip}
+        />
+      )}
+      <HeatmapLegend />
+    </ActivityContainer>
+  );
+}
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/ReadingOverviewComponents.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/ReadingOverviewComponents.tsx
new file mode 100644
index 0000000000..c6f12edb79
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/ReadingOverviewComponents.tsx
@@ -0,0 +1,182 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { UserStreak, MostReadTag } from '../../../../graphql/users';
+import { largeNumberFormat, getTagPageLink } from '../../../../lib';
+import Link from '../../../../components/utilities/Link';
+import { Tooltip } from '../../../../components/tooltip/Tooltip';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../../components/typography/Typography';
+import { SummaryCard } from './BadgesAndAwardsComponents';
+import { anchorDefaultRel, capitalize } from '../../../../lib/strings';
+import { ActivityContainer } from '../../../../components/profile/ActivitySection';
+import { ClickableText } from '../../../../components/buttons/ClickableText';
+import { ElementPlaceholder } from '../../../../components/ElementPlaceholder';
+import { migrateUserToStreaks } from '../../../../lib/constants';
+
+// ReadingTagProgress component
+interface ReadingTagProgressProps {
+  tag: MostReadTag;
+}
+
+export const ReadingTagProgress = ({
+  tag: { value: tag, count, percentage, total },
+}: ReadingTagProgressProps): ReactElement => {
+  const value = `+${(percentage * 100).toFixed(0)}%`;
+
+  return (
+    <Tooltip content={`${count}/${total} reading days`} side="top">
+      <div className="relative flex flex-row justify-between overflow-hidden rounded-6 border border-border-subtlest-tertiary px-2">
+        <Link href={getTagPageLink(tag)} passHref prefetch={false}>
+          <Typography
+            tag={TypographyTag.Link}
+            className="z-1 my-auto"
+            type={TypographyType.Footnote}
+            color={TypographyColor.Primary}
+            truncate
+          >
+            {capitalize(tag)}
+          </Typography>
+        </Link>
+        <Typography
+          tag={TypographyTag.Span}
+          className="z-1 my-auto"
+          type={TypographyType.Footnote}
+          color={TypographyColor.Primary}
+        >
+          {value}
+        </Typography>
+        <div
+          className="absolute bottom-0 left-0 top-0 h-auto overflow-hidden bg-accent-onion-default"
+          style={{ width: value }}
+          data-testid="tagProgress"
+        />
+      </div>
+    </Tooltip>
+  );
+};
+
+// ReadingStreaksSection component
+interface ReadingStreaksSectionProps {
+  streak: UserStreak;
+}
+
+export const ReadingStreaksSection = ({
+  streak,
+}: ReadingStreaksSectionProps): ReactElement => (
+  <div className="my-3 flex gap-2">
+    <SummaryCard
+      count={largeNumberFormat(streak?.max)}
+      label="Longest streak 🏆"
+    />
+    <SummaryCard
+      count={largeNumberFormat(streak?.total)}
+      label="Total reading days"
+    />
+  </div>
+);
+
+// ReadingTagsSection component
+interface ReadingTagsSectionProps {
+  mostReadTags: MostReadTag[];
+}
+
+export const ReadingTagsSection = ({
+  mostReadTags,
+}: ReadingTagsSectionProps): ReactElement => (
+  <>
+    <Typography
+      tag={TypographyTag.H3}
+      type={TypographyType.Subhead}
+      color={TypographyColor.Tertiary}
+      className="my-1"
+    >
+      Top tags by reading days
+    </Typography>
+    <div className="my-3 grid max-w-full grid-cols-2 gap-2">
+      {mostReadTags?.map((tag) => (
+        <ReadingTagProgress key={tag.value} tag={tag} />
+      ))}
+    </div>
+  </>
+);
+
+// HeatmapLegend component
+export const HeatmapLegend = (): ReactElement => (
+  <div className="mt-4 flex items-center justify-end typo-footnote">
+    <div className="flex items-center">
+      <div className="mr-2">Less</div>
+      <div className="mr-0.5 h-2 w-2 rounded-6 border border-border-subtlest-quaternary" />
+      <div className="mr-0.5 h-2 w-2 rounded-6 bg-text-disabled" />
+      <div className="mr-0.5 h-2 w-2 rounded-6 bg-text-quaternary" />
+      <div className="mr-0.5 h-2 w-2 rounded-6 bg-text-primary" />
+      <div className="ml-2">More</div>
+    </div>
+  </div>
+);
+
+// ReadingOverviewSkeleton component
+export const ReadingOverviewSkeleton = (): ReactElement => {
+  return (
+    <ActivityContainer data-testid="ReadingOverviewSkeleton">
+      <Typography
+        tag={TypographyTag.H2}
+        type={TypographyType.Callout}
+        color={TypographyColor.Primary}
+        bold
+        className="flex items-center"
+      >
+        Reading Overview
+      </Typography>
+      <ClickableText
+        tag="a"
+        target="_blank"
+        href={migrateUserToStreaks}
+        rel={anchorDefaultRel}
+      >
+        Learn more
+      </ClickableText>
+
+      {/* Streaks section skeleton */}
+      <div className="my-3 flex gap-2">
+        <ElementPlaceholder className="flex flex-1 flex-col items-center rounded-10 p-2">
+          <ElementPlaceholder className="h-6 w-8 rounded-4" />
+          <ElementPlaceholder className="mt-1 h-4 w-26 rounded-4" />
+        </ElementPlaceholder>
+        <ElementPlaceholder className="flex flex-1 flex-col items-center rounded-10 p-2">
+          <ElementPlaceholder className="h-6 w-8 rounded-4" />
+          <ElementPlaceholder className="mt-1 h-4 w-26 rounded-4" />
+        </ElementPlaceholder>
+      </div>
+
+      {/* Tags section skeleton */}
+      <div className="my-1">
+        <ElementPlaceholder className="h-5 w-32 rounded-4" />
+      </div>
+      <div className="my-3 grid max-w-full grid-cols-2 gap-2">
+        <ElementPlaceholder className="relative flex flex-row justify-between overflow-hidden rounded-6 px-2 py-1">
+          <ElementPlaceholder className="h-4 w-16 rounded-4" />
+          <ElementPlaceholder className="h-4 w-8 rounded-4" />
+        </ElementPlaceholder>
+      </div>
+
+      {/* Heatmap section skeleton */}
+      <div className="mb-3">
+        <ElementPlaceholder className="h-5 w-48 rounded-4" />
+      </div>
+
+      {/* Calendar heatmap skeleton */}
+      <div className="mb-4">
+        <ElementPlaceholder className="h-20 w-full rounded-4" />
+      </div>
+
+      {/* Heatmap legend skeleton */}
+      <div className="mt-4 flex justify-end">
+        <ElementPlaceholder className="h-4 w-24 rounded-4" />
+      </div>
+    </ActivityContainer>
+  );
+};
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/Share.spec.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/Share.spec.tsx
new file mode 100644
index 0000000000..3ec506b001
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/Share.spec.tsx
@@ -0,0 +1,217 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Share } from './Share';
+import { getLogContextStatic } from '../../../../contexts/LogContext';
+import { useShareOrCopyLink } from '../../../../hooks/useShareOrCopyLink';
+import { ShareProvider } from '../../../../lib/share';
+
+jest.mock('../../../../hooks/useShareOrCopyLink');
+
+const mockUseShareOrCopyLink = useShareOrCopyLink as jest.MockedFunction<
+  typeof useShareOrCopyLink
+>;
+
+describe('Share', () => {
+  let queryClient: QueryClient;
+  let mockLogEvent: jest.Mock;
+  let mockOnShareOrCopy: jest.Mock;
+
+  const renderComponent = (permalink = 'https://dly.to/thecoverliker') => {
+    const LogContext = getLogContextStatic();
+
+    return render(
+      <QueryClientProvider client={queryClient}>
+        <LogContext.Provider
+          value={{
+            logEvent: mockLogEvent,
+            logEventStart: jest.fn(),
+            logEventEnd: jest.fn(),
+            sendBeacon: jest.fn(),
+          }}
+        >
+          <Share permalink={permalink} />
+        </LogContext.Provider>
+      </QueryClientProvider>,
+    );
+  };
+
+  beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    });
+
+    mockLogEvent = jest.fn();
+    mockOnShareOrCopy = jest.fn();
+
+    mockUseShareOrCopyLink.mockReturnValue([false, mockOnShareOrCopy]);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render the component', () => {
+      renderComponent();
+
+      expect(screen.getByText('Public profile & URL')).toBeInTheDocument();
+      expect(screen.getByText('Share')).toBeInTheDocument();
+    });
+
+    it('should display the permalink', () => {
+      renderComponent('https://dly.to/testuser');
+
+      expect(screen.getByText('https://dly.to/testuser')).toBeInTheDocument();
+    });
+
+    it('should render all social share buttons', () => {
+      renderComponent();
+
+      expect(screen.getByLabelText('Share on X')).toBeInTheDocument();
+      expect(screen.getByLabelText('Share on WhatsApp')).toBeInTheDocument();
+      expect(screen.getByLabelText('Share on Facebook')).toBeInTheDocument();
+      expect(screen.getByLabelText('Share on Reddit')).toBeInTheDocument();
+      expect(screen.getByLabelText('Share on LinkedIn')).toBeInTheDocument();
+      expect(screen.getByLabelText('Share on Telegram')).toBeInTheDocument();
+    });
+  });
+
+  describe('Copy functionality', () => {
+    it('should call onShareOrCopy when copy button is clicked', () => {
+      renderComponent();
+
+      const copyButton = screen.getByLabelText('Copy link');
+      fireEvent.click(copyButton);
+
+      expect(mockOnShareOrCopy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should show "Copied!" when copying is true', () => {
+      mockUseShareOrCopyLink.mockReturnValue([true, mockOnShareOrCopy]);
+
+      renderComponent();
+
+      const copyButton = screen.getByLabelText('Copied!');
+      expect(copyButton).toBeInTheDocument();
+    });
+
+    it('should pass correct props to useShareOrCopyLink', () => {
+      const permalink = 'https://dly.to/testuser';
+      renderComponent(permalink);
+
+      expect(mockUseShareOrCopyLink).toHaveBeenCalledWith({
+        link: permalink,
+        text: 'Check out my profile on daily.dev!',
+        logObject: expect.any(Function),
+      });
+    });
+  });
+
+  describe('Social share buttons', () => {
+    it('should have correct href attributes', () => {
+      const permalink = 'https://dly.to/testuser';
+      renderComponent(permalink);
+
+      const twitterButton = screen.getByLabelText('Share on X');
+      expect(twitterButton).toHaveAttribute('href');
+      expect(twitterButton).toHaveAttribute(
+        'href',
+        expect.stringContaining('twitter.com'),
+      );
+      expect(twitterButton).toHaveAttribute(
+        'href',
+        expect.stringContaining(encodeURIComponent(permalink)),
+      );
+    });
+
+    it('should log event when social share button is clicked', () => {
+      renderComponent();
+
+      const twitterButton = screen.getByLabelText('Share on X');
+      fireEvent.click(twitterButton);
+
+      expect(mockLogEvent).toHaveBeenCalledWith({
+        event_name: 'share profile',
+        target_type: 'profile page',
+        extra: JSON.stringify({ provider: ShareProvider.Twitter }),
+      });
+    });
+
+    it('should open links in new tab with correct rel attribute', () => {
+      renderComponent();
+
+      const twitterButton = screen.getByLabelText('Share on X');
+      expect(twitterButton).toHaveAttribute('target', '_blank');
+      expect(twitterButton).toHaveAttribute('rel', 'noopener noreferrer');
+    });
+  });
+
+  describe('Native share', () => {
+    let mockNavigatorShare: jest.Mock;
+
+    beforeEach(() => {
+      mockNavigatorShare = jest.fn().mockResolvedValue(undefined);
+      Object.defineProperty(globalThis, 'navigator', {
+        value: {
+          share: mockNavigatorShare,
+        },
+        writable: true,
+        configurable: true,
+      });
+    });
+
+    afterEach(() => {
+      delete (globalThis as Record<string, unknown>).navigator;
+    });
+
+    it('should render native share button when navigator.share is available', () => {
+      renderComponent();
+
+      expect(screen.getByLabelText('Share via...')).toBeInTheDocument();
+    });
+
+    it('should not render native share button when navigator.share is not available', () => {
+      delete (globalThis as Record<string, unknown>).navigator;
+
+      renderComponent();
+
+      expect(screen.queryByLabelText('Share via...')).not.toBeInTheDocument();
+    });
+
+    it('should call navigator.share with correct data when native share button is clicked', async () => {
+      const permalink = 'https://dly.to/testuser';
+      renderComponent(permalink);
+
+      const nativeShareButton = screen.getByLabelText('Share via...');
+      fireEvent.click(nativeShareButton);
+
+      await waitFor(() => {
+        expect(mockNavigatorShare).toHaveBeenCalledWith({
+          title: 'My daily.dev profile',
+          text: 'Check out my profile on daily.dev!',
+          url: permalink,
+        });
+      });
+    });
+
+    it('should log event when native share is successful', async () => {
+      renderComponent();
+
+      const nativeShareButton = screen.getByLabelText('Share via...');
+      fireEvent.click(nativeShareButton);
+
+      await waitFor(() => {
+        expect(mockLogEvent).toHaveBeenCalledWith({
+          event_name: 'share profile',
+          target_type: 'profile page',
+          extra: JSON.stringify({ provider: ShareProvider.Native }),
+        });
+      });
+    });
+  });
+});
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/Share.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/Share.tsx
new file mode 100644
index 0000000000..41abc30d48
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/Share.tsx
@@ -0,0 +1,187 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import { ActivityContainer } from '../../../../components/profile/ActivitySection';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../../../../components/typography/Typography';
+import {
+  CopyIcon,
+  TwitterIcon,
+  WhatsappIcon,
+  FacebookIcon,
+  RedditIcon,
+  LinkedInIcon,
+  TelegramIcon,
+  MenuIcon,
+} from '../../../../components/icons';
+import {
+  getFacebookShareLink,
+  getTwitterShareLink,
+  getWhatsappShareLink,
+  getRedditShareLink,
+  getLinkedInShareLink,
+  getTelegramShareLink,
+  ShareProvider,
+} from '../../../../lib/share';
+import { useShareOrCopyLink } from '../../../../hooks/useShareOrCopyLink';
+import { LogEvent, TargetType } from '../../../../lib/log';
+import { useLogContext } from '../../../../contexts/LogContext';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../../components/buttons/Button';
+import { Tooltip } from '../../../../components/tooltip/Tooltip';
+import { Divider } from '../../../../components/utilities/Divider';
+import { anchorDefaultRel } from '../../../../lib/strings';
+
+interface ShareProps {
+  permalink: string;
+  className?: string;
+}
+
+export const Share = ({ permalink, className }: ShareProps): ReactElement => {
+  const { logEvent } = useLogContext();
+  const shareText = 'Check out my profile on daily.dev!';
+
+  const getLogObject = (provider: ShareProvider) => ({
+    event_name: LogEvent.ShareProfile,
+    target_type: TargetType.ProfilePage,
+    extra: JSON.stringify({ provider }),
+  });
+
+  const [copying, onShareOrCopy] = useShareOrCopyLink({
+    link: permalink,
+    text: shareText,
+    logObject: getLogObject,
+  });
+
+  const logShare = (provider: ShareProvider) => {
+    logEvent(getLogObject(provider));
+  };
+
+  const handleNativeShare = async () => {
+    await navigator.share({
+      title: 'My daily.dev profile',
+      text: shareText,
+      url: permalink,
+    });
+    logEvent(getLogObject(ShareProvider.Native));
+  };
+
+  const socialShareConfig = [
+    {
+      icon: <TwitterIcon />,
+      tooltip: 'Share on X',
+      href: getTwitterShareLink(permalink, shareText),
+      provider: ShareProvider.Twitter,
+    },
+    {
+      icon: <WhatsappIcon />,
+      tooltip: 'Share on WhatsApp',
+      href: getWhatsappShareLink(permalink),
+      provider: ShareProvider.WhatsApp,
+    },
+    {
+      icon: <FacebookIcon />,
+      tooltip: 'Share on Facebook',
+      href: getFacebookShareLink(permalink),
+      provider: ShareProvider.Facebook,
+    },
+    {
+      icon: <RedditIcon />,
+      tooltip: 'Share on Reddit',
+      href: getRedditShareLink(permalink, shareText),
+      provider: ShareProvider.Reddit,
+    },
+    {
+      icon: <LinkedInIcon />,
+      tooltip: 'Share on LinkedIn',
+      href: getLinkedInShareLink(permalink),
+      provider: ShareProvider.LinkedIn,
+    },
+    {
+      icon: <TelegramIcon />,
+      tooltip: 'Share on Telegram',
+      href: getTelegramShareLink(permalink, shareText),
+      provider: ShareProvider.Telegram,
+    },
+  ];
+
+  return (
+    <ActivityContainer
+      className={classNames(
+        'max-w-full rounded-none border-x-0 px-0 laptop:rounded-16 laptop:border-x laptop:p-4',
+        className,
+      )}
+    >
+      <div className="flex w-full items-center gap-1">
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <Typography
+            type={TypographyType.Callout}
+            color={TypographyColor.Primary}
+            bold
+          >
+            Public profile & URL
+          </Typography>
+          <Typography
+            type={TypographyType.Subhead}
+            color={TypographyColor.Secondary}
+            truncate
+          >
+            {permalink}
+          </Typography>
+        </div>
+        <Tooltip content={copying ? 'Copied!' : 'Copy link'}>
+          <Button
+            variant={ButtonVariant.Tertiary}
+            size={ButtonSize.XSmall}
+            icon={<CopyIcon secondary={copying} />}
+            onClick={onShareOrCopy}
+            aria-label={copying ? 'Copied!' : 'Copy link'}
+          />
+        </Tooltip>
+      </div>
+
+      <Divider className="my-2 bg-border-subtlest-tertiary opacity-0 laptop:opacity-100" />
+
+      <div className="flex flex-wrap items-center gap-2">
+        <Typography
+          type={TypographyType.Subhead}
+          color={TypographyColor.Tertiary}
+        >
+          Share
+        </Typography>
+        {socialShareConfig.map(({ icon, tooltip, href, provider }) => (
+          <Tooltip content={tooltip} key={provider}>
+            <Button
+              variant={ButtonVariant.Tertiary}
+              size={ButtonSize.XSmall}
+              icon={icon}
+              tag="a"
+              href={href}
+              target="_blank"
+              rel={anchorDefaultRel}
+              onClick={() => logShare(provider)}
+              aria-label={tooltip}
+            />
+          </Tooltip>
+        ))}
+        {globalThis?.navigator?.share && (
+          <Tooltip content="Share via...">
+            <Button
+              variant={ButtonVariant.Tertiary}
+              size={ButtonSize.XSmall}
+              icon={<MenuIcon className="rotate-90" />}
+              onClick={handleNativeShare}
+              aria-label="Share via..."
+            />
+          </Tooltip>
+        )}
+      </div>
+    </ActivityContainer>
+  );
+};
diff --git a/packages/shared/src/features/profile/components/experience/DeleteExperienceButton.tsx b/packages/shared/src/features/profile/components/experience/DeleteExperienceButton.tsx
new file mode 100644
index 0000000000..3d635442cd
--- /dev/null
+++ b/packages/shared/src/features/profile/components/experience/DeleteExperienceButton.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import useRemoveExperience from '../../../../hooks/useRemoveExperience';
+import { Button, ButtonColor } from '../../../../components/buttons/Button';
+import {
+  ButtonVariant,
+  ButtonSize,
+} from '../../../../components/buttons/common';
+import { UserExperienceType } from '../../../../graphql/user/profile';
+import { usePrompt } from '../../../../hooks/usePrompt';
+import type { PromptOptions } from '../../../../hooks/usePrompt';
+
+type DeleteExperienceButtonProps = {
+  experienceId: string;
+  experienceType?: UserExperienceType;
+};
+
+const copy: Record<UserExperienceType, string> = {
+  [UserExperienceType.Work]: 'Delete work experience',
+  [UserExperienceType.Project]: 'Delete project',
+  [UserExperienceType.Certification]: 'Delete certification',
+  [UserExperienceType.Education]: 'Delete education',
+  [UserExperienceType.Volunteering]: 'Delete volunteering',
+  [UserExperienceType.OpenSource]: 'Delete open source',
+};
+
+const getCopy = (type?: UserExperienceType): string => {
+  if (type && copy[type]) {
+    return copy[type];
+  }
+  return copy[UserExperienceType.Work];
+};
+
+const DeleteExperienceButton = ({
+  experienceId,
+  experienceType,
+}: DeleteExperienceButtonProps): React.ReactElement => {
+  const { removeExperience, isPending } = useRemoveExperience({
+    type: experienceType,
+  });
+  const { showPrompt } = usePrompt();
+
+  const buttonCopy = getCopy(experienceType);
+
+  const handleDelete = async () => {
+    const options: PromptOptions = {
+      title: `${buttonCopy}?`,
+      description: 'This action cannot be undone.',
+      okButton: {
+        title: 'Delete',
+        variant: ButtonVariant.Primary,
+        color: ButtonColor.Ketchup,
+      },
+    };
+
+    if (await showPrompt(options)) {
+      removeExperience(experienceId);
+    }
+  };
+
+  return (
+    <div className="mt-6">
+      <Button
+        type="button"
+        variant={ButtonVariant.Subtle}
+        size={ButtonSize.Small}
+        disabled={isPending}
+        loading={isPending}
+        onClick={handleDelete}
+      >
+        {buttonCopy}
+      </Button>
+    </div>
+  );
+};
+
+export default DeleteExperienceButton;
diff --git a/packages/shared/src/features/profile/components/experience/ProfileUserExperiences.tsx b/packages/shared/src/features/profile/components/experience/ProfileUserExperiences.tsx
new file mode 100644
index 0000000000..3ef5b6e056
--- /dev/null
+++ b/packages/shared/src/features/profile/components/experience/ProfileUserExperiences.tsx
@@ -0,0 +1,67 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { PublicProfile } from '../../../../lib/user';
+import { useProfileExperiences } from '../../hooks/useProfileExperiences';
+import {
+  profileExperiencesLimit,
+  UserExperienceType,
+} from '../../../../graphql/user/profile';
+import { UserExperienceList } from './UserExperiencesList';
+
+interface ProfileUserExperiencesProps {
+  user: PublicProfile;
+}
+
+export function ProfileUserExperiences({
+  user,
+}: ProfileUserExperiencesProps): ReactElement {
+  const { work, education, cert, project, opensource, volunteering, data } =
+    useProfileExperiences(user, profileExperiencesLimit);
+
+  return (
+    <>
+      <UserExperienceList
+        experiences={work}
+        title="Work Experiences"
+        experienceType={UserExperienceType.Work}
+        hasNextPage={data?.work?.pageInfo?.hasNextPage}
+        user={user}
+      />
+      <UserExperienceList
+        experiences={education}
+        title="Education"
+        experienceType={UserExperienceType.Education}
+        hasNextPage={data?.education?.pageInfo?.hasNextPage}
+        user={user}
+      />
+      <UserExperienceList
+        experiences={cert}
+        title="Certifications"
+        experienceType={UserExperienceType.Certification}
+        hasNextPage={data?.certification?.pageInfo?.hasNextPage}
+        user={user}
+      />
+      <UserExperienceList
+        experiences={project}
+        title="Projects"
+        experienceType={UserExperienceType.Project}
+        hasNextPage={data?.project?.pageInfo?.hasNextPage}
+        user={user}
+      />
+      <UserExperienceList
+        experiences={opensource}
+        title="Open Source"
+        experienceType={UserExperienceType.OpenSource}
+        hasNextPage={data?.opensource?.pageInfo?.hasNextPage}
+        user={user}
+      />
+      <UserExperienceList
+        experiences={volunteering}
+        title="Volunteering"
+        experienceType={UserExperienceType.Volunteering}
+        hasNextPage={data?.volunteering?.pageInfo?.hasNextPage}
+        user={user}
+      />
+    </>
+  );
+}
diff --git a/packages/shared/src/features/profile/components/experience/UserExperienceItem.tsx b/packages/shared/src/features/profile/components/experience/UserExperienceItem.tsx
new file mode 100644
index 0000000000..c249b8e913
--- /dev/null
+++ b/packages/shared/src/features/profile/components/experience/UserExperienceItem.tsx
@@ -0,0 +1,195 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import type {
+  UserExperience,
+  UserExperienceCertification,
+  UserExperienceProject,
+  UserExperienceWork,
+} from '../../../../graphql/user/profile';
+import { Image, ImageType } from '../../../../components/image/Image';
+import { Pill, PillSize } from '../../../../components/Pill';
+import {
+  Typography,
+  TypographyType,
+  TypographyColor,
+} from '../../../../components/typography/Typography';
+import { formatDate, TimeFormatType } from '../../../../lib/dateFormat';
+import { concatStrings } from '../../../../lib/strings';
+import { currentPill } from './common';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../../components/buttons/Button';
+import { EditIcon, OpenLinkIcon } from '../../../../components/icons';
+import Link from '../../../../components/utilities/Link';
+
+const MAX_SKILLS = 3;
+
+interface UserExperienceItemProps {
+  experience: UserExperience;
+  grouped?: {
+    isLastItem?: boolean;
+  };
+  editUrl?: string;
+}
+
+export function UserExperienceItem({
+  experience,
+  grouped,
+  editUrl,
+}: UserExperienceItemProps): ReactElement {
+  const {
+    company,
+    customCompanyName,
+    title,
+    description,
+    startedAt,
+    endedAt,
+    subtitle,
+  } = experience;
+  const { skills, verified } = experience as UserExperienceWork;
+  const { url } = experience as UserExperienceProject;
+  const { externalReferenceId } = experience as UserExperienceCertification;
+  const [showMoreSkills, setShowMoreSkills] = useState(false);
+  const skillList = showMoreSkills
+    ? skills
+    : skills?.slice(0, MAX_SKILLS) || [];
+
+  return (
+    <li key={experience.id} className="relative flex flex-row gap-2">
+      {grouped ? (
+        <div className="relative flex w-8 justify-center overflow-hidden">
+          <div className="absolute left-4 h-6 w-8 -translate-x-px rounded-bl-10 border-b-2 border-l-2 border-accent-pepper-subtle" />
+          {!grouped.isLastItem && (
+            <div className="absolute h-full w-0.5 bg-accent-pepper-subtle" />
+          )}
+        </div>
+      ) : (
+        <Image
+          className="h-8 w-8 rounded-max object-cover"
+          type={ImageType.Organization}
+          src={company?.image}
+        />
+      )}
+      {editUrl && (
+        <div
+          className={classNames(
+            'absolute right-0',
+            grouped ? 'top-2' : 'top-0',
+          )}
+        >
+          <Link href={editUrl} passHref>
+            <Button
+              tag="a"
+              variant={ButtonVariant.Tertiary}
+              size={ButtonSize.XSmall}
+              icon={<EditIcon />}
+            />
+          </Link>
+        </div>
+      )}
+      <div
+        className={classNames('flex flex-1 flex-col gap-2', {
+          'pt-3': !!grouped,
+        })}
+      >
+        <div
+          className={classNames(
+            'flex flex-col gap-1',
+            editUrl && 'max-w-[calc(100%-32px)]',
+          )}
+        >
+          <div className="flex flex-wrap items-center gap-1">
+            <Typography truncate type={TypographyType.Subhead} bold>
+              {title}
+            </Typography>
+            {!grouped && !endedAt && currentPill}
+            {url && (
+              <Link href={url} passHref>
+                <a target="_blank">
+                  <OpenLinkIcon className="size-4 text-text-secondary" />
+                </a>
+              </Link>
+            )}
+          </div>
+          {!!subtitle && (
+            <Typography
+              type={TypographyType.Footnote}
+              color={TypographyColor.Secondary}
+            >
+              {subtitle}
+            </Typography>
+          )}
+          {!grouped && (
+            <Typography
+              type={TypographyType.Footnote}
+              color={TypographyColor.Secondary}
+            >
+              {company?.name || customCompanyName}
+              {!!verified && (
+                <span className="ml-1 text-text-quaternary">Verified</span>
+              )}
+            </Typography>
+          )}
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+          >
+            {concatStrings(
+              [
+                formatDate({
+                  value: startedAt,
+                  type: TimeFormatType.TopReaderBadge,
+                }),
+                !!endedAt &&
+                  formatDate({
+                    value: endedAt,
+                    type: TimeFormatType.TopReaderBadge,
+                  }),
+              ],
+              ' - ',
+            )}
+          </Typography>
+          {!!externalReferenceId && (
+            <Typography
+              type={TypographyType.Footnote}
+              color={TypographyColor.Tertiary}
+            >
+              {externalReferenceId}
+            </Typography>
+          )}
+        </div>
+        <Typography
+          type={TypographyType.Subhead}
+          color={TypographyColor.Secondary}
+          className="flex w-full max-w-full flex-1 whitespace-break-spaces break-words"
+        >
+          {description}
+        </Typography>
+        {skillList?.length > 0 && (
+          <div className="flex flex-row flex-wrap gap-2">
+            {skillList.map((skill) => (
+              <Pill
+                key={skill.value}
+                label={skill.value}
+                size={PillSize.Small}
+                className="border border-border-subtlest-tertiary text-text-quaternary"
+              />
+            ))}
+            {!showMoreSkills && skills.length > MAX_SKILLS && (
+              <button type="button" onClick={() => setShowMoreSkills(true)}>
+                <Pill
+                  label={`+${skills.length - MAX_SKILLS}`}
+                  size={PillSize.Small}
+                  className="border border-border-subtlest-tertiary text-text-quaternary"
+                />
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </li>
+  );
+}
diff --git a/packages/shared/src/features/profile/components/experience/UserExperiencesGroupedList.tsx b/packages/shared/src/features/profile/components/experience/UserExperiencesGroupedList.tsx
new file mode 100644
index 0000000000..f17ddd3d3f
--- /dev/null
+++ b/packages/shared/src/features/profile/components/experience/UserExperiencesGroupedList.tsx
@@ -0,0 +1,99 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type {
+  UserExperience,
+  UserExperienceType,
+} from '../../../../graphql/user/profile';
+import { Image, ImageType } from '../../../../components/image/Image';
+import {
+  Typography,
+  TypographyType,
+  TypographyColor,
+} from '../../../../components/typography/Typography';
+import { UserExperienceItem } from './UserExperienceItem';
+import { currentPill } from './common';
+import { pluralize } from '../../../../lib/strings';
+import type { DateRange } from '../../../../lib/date';
+import { calculateTotalDurationInMonths } from '../../../../lib/date';
+
+interface UserExperiencesGroupedListProps {
+  company: string;
+  experiences: UserExperience[];
+  showEditOnItems?: boolean;
+  isSameUser?: boolean;
+  experienceType?: UserExperienceType;
+  editBaseUrl?: string;
+}
+
+function calculateTotalDuration(experiences: UserExperience[]): string {
+  const ranges: DateRange[] = experiences.map((exp) => ({
+    start: new Date(exp.startedAt),
+    end: exp.endedAt ? new Date(exp.endedAt) : new Date(),
+  }));
+
+  const { years, months } = calculateTotalDurationInMonths(ranges);
+
+  if (years > 0) {
+    const yearCopy = `${years} ${pluralize('year', years)}`;
+
+    if (months === 0) {
+      return yearCopy;
+    }
+
+    return `${yearCopy} ${months} ${pluralize('month', months)}`;
+  }
+
+  return months > 0
+    ? `${months} ${pluralize('month', months)}`
+    : 'Less than a month';
+}
+
+export function UserExperiencesGroupedList({
+  company,
+  experiences,
+  showEditOnItems = false,
+  isSameUser,
+  experienceType,
+  editBaseUrl,
+}: UserExperiencesGroupedListProps): ReactElement {
+  const [first] = experiences;
+  const duration = calculateTotalDuration(experiences);
+
+  return (
+    <li>
+      <div className="flex flex-row gap-2">
+        <Image
+          className="h-8 w-8 rounded-max object-cover"
+          type={ImageType.Organization}
+          src={first.company?.image}
+        />
+        <div className="flex flex-1 flex-col">
+          <Typography type={TypographyType.Subhead} bold>
+            {company}
+            {!first.endedAt && currentPill}
+          </Typography>
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Secondary}
+          >
+            {duration}
+          </Typography>
+        </div>
+      </div>
+      <ul className="flex flex-col">
+        {experiences.map((experience, index) => (
+          <UserExperienceItem
+            key={experience.id}
+            experience={experience}
+            grouped={{ isLastItem: index === experiences.length - 1 }}
+            editUrl={
+              showEditOnItems && isSameUser && experienceType && editBaseUrl
+                ? `${editBaseUrl}?id=${experience.id}&type=${experienceType}`
+                : undefined
+            }
+          />
+        ))}
+      </ul>
+    </li>
+  );
+}
diff --git a/packages/shared/src/features/profile/components/experience/UserExperiencesList.spec.tsx b/packages/shared/src/features/profile/components/experience/UserExperiencesList.spec.tsx
new file mode 100644
index 0000000000..0b54f830b5
--- /dev/null
+++ b/packages/shared/src/features/profile/components/experience/UserExperiencesList.spec.tsx
@@ -0,0 +1,739 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { UserExperienceList } from './UserExperiencesList';
+import type { UserExperience } from '../../../../graphql/user/profile';
+import { UserExperienceType } from '../../../../graphql/user/profile';
+import { useAuthContext } from '../../../../contexts/AuthContext';
+import type { PublicProfile } from '../../../../lib/user';
+
+// Mock the AuthContext
+jest.mock('../../../../contexts/AuthContext', () => ({
+  useAuthContext: jest.fn(() => ({
+    user: { id: 'user123', username: 'testuser' },
+    isLoggedIn: true,
+  })),
+}));
+
+// Mock the Link component to avoid nested anchor warnings
+jest.mock('../../../../components/utilities/Link', () => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+  const mockReact = require('react');
+  return {
+    __esModule: true,
+    default: ({
+      children,
+      href,
+      passHref,
+    }: {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      children: any;
+      href: string;
+      passHref?: boolean;
+    }) => {
+      // If passHref is true, we're expecting the child to be an anchor element
+      // So we just pass through the href as a prop
+      if (passHref && mockReact.isValidElement(children)) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return mockReact.cloneElement(children as any, {
+          href,
+        });
+      }
+      return mockReact.createElement('a', { href }, children);
+    },
+  };
+});
+
+// Mock the webappUrl constant
+jest.mock('../../../../lib/constants', () => ({
+  webappUrl: 'https://app.daily.dev/',
+}));
+
+const queryClient = new QueryClient();
+
+const createUser = (overrides?: Partial<PublicProfile>): PublicProfile => ({
+  id: 'user123',
+  name: 'Test User',
+  username: 'testuser',
+  image: 'https://example.com/avatar.png',
+  reputation: 100,
+  permalink: 'https://app.daily.dev/testuser',
+  createdAt: '2020-01-01',
+  premium: false,
+  ...overrides,
+});
+
+const createExperience = (
+  overrides?: Partial<UserExperience>,
+): UserExperience => ({
+  id: 'exp1',
+  title: 'Software Engineer',
+  subtitle: null,
+  description: 'Building awesome features',
+  url: null,
+  type: UserExperienceType.Work,
+  startedAt: '2020-01-01',
+  endedAt: '2022-01-01',
+  company: {
+    id: 'comp1',
+    name: 'Tech Company',
+    image: 'https://example.com/logo.png',
+    createdAt: new Date('2019-01-01'),
+    updatedAt: new Date('2019-01-01'),
+  },
+  customCompanyName: null,
+  createdAt: '2020-01-01',
+  ...overrides,
+});
+
+const renderComponent = (props: Parameters<typeof UserExperienceList>[0]) => {
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <UserExperienceList {...props} />
+    </QueryClientProvider>,
+  );
+};
+
+describe('UserExperiencesList', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Basic rendering', () => {
+    it('should render empty fragment when no experiences provided', () => {
+      const user = createUser();
+      renderComponent({
+        experiences: [],
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      expect(screen.queryByText('Work Experience')).not.toBeInTheDocument();
+    });
+
+    it('should render title when provided', () => {
+      const user = createUser();
+      const experience = createExperience();
+      renderComponent({
+        experiences: [experience],
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      expect(screen.getByText('Work Experience')).toBeInTheDocument();
+    });
+
+    it('should not render title when not provided', () => {
+      const user = createUser();
+      const experience = createExperience();
+      renderComponent({
+        experiences: [experience],
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+    });
+
+    it('should render single experience without grouping', () => {
+      const user = createUser();
+      const experience = createExperience({
+        title: 'Senior Developer',
+        company: {
+          id: 'comp1',
+          name: 'Awesome Corp',
+          image: null,
+          createdAt: new Date('2019-01-01'),
+          updatedAt: new Date('2019-01-01'),
+        },
+      });
+
+      renderComponent({
+        experiences: [experience],
+        title: 'Experience',
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      expect(screen.getByText('Senior Developer')).toBeInTheDocument();
+    });
+  });
+
+  describe('Grouping experiences by company', () => {
+    it('should group multiple experiences from the same company', () => {
+      const user = createUser();
+      const experiences = [
+        createExperience({
+          id: 'exp1',
+          title: 'Senior Engineer',
+          startedAt: '2021-01-01',
+          endedAt: '2023-01-01',
+        }),
+        createExperience({
+          id: 'exp2',
+          title: 'Junior Engineer',
+          startedAt: '2019-01-01',
+          endedAt: '2021-01-01',
+        }),
+      ];
+
+      renderComponent({
+        experiences,
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      expect(screen.getByText('Tech Company')).toBeInTheDocument();
+      expect(screen.getByText('Senior Engineer')).toBeInTheDocument();
+      expect(screen.getByText('Junior Engineer')).toBeInTheDocument();
+    });
+
+    it('should display experiences from different companies separately', () => {
+      const user = createUser();
+      const experiences = [
+        createExperience({
+          id: 'exp1',
+          title: 'Position at Company A',
+          company: {
+            id: 'comp1',
+            name: 'Company A',
+            image: null,
+            createdAt: new Date('2019-01-01'),
+            updatedAt: new Date('2019-01-01'),
+          },
+        }),
+        createExperience({
+          id: 'exp2',
+          title: 'Position at Company B',
+          company: {
+            id: 'comp2',
+            name: 'Company B',
+            image: null,
+            createdAt: new Date('2019-01-01'),
+            updatedAt: new Date('2019-01-01'),
+          },
+        }),
+      ];
+
+      renderComponent({
+        experiences,
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      expect(screen.getByText('Position at Company A')).toBeInTheDocument();
+      expect(screen.getByText('Position at Company B')).toBeInTheDocument();
+    });
+
+    it('should handle custom company names correctly', () => {
+      const user = createUser();
+      const experiences = [
+        createExperience({
+          id: 'exp1',
+          title: 'Freelance Developer',
+          company: null,
+          customCompanyName: 'Self-Employed',
+        }),
+        createExperience({
+          id: 'exp2',
+          title: 'Consultant',
+          company: null,
+          customCompanyName: 'Self-Employed',
+        }),
+      ];
+
+      renderComponent({
+        experiences,
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      expect(screen.getByText('Self-Employed')).toBeInTheDocument();
+      expect(screen.getByText('Freelance Developer')).toBeInTheDocument();
+      expect(screen.getByText('Consultant')).toBeInTheDocument();
+    });
+
+    it('should show company.name when both company and customCompanyName exist', () => {
+      const user = createUser();
+      const experience = createExperience({
+        company: {
+          id: 'comp1',
+          name: 'Official Name',
+          image: null,
+          createdAt: new Date('2019-01-01'),
+          updatedAt: new Date('2019-01-01'),
+        },
+        customCompanyName: 'Custom Name',
+      });
+
+      renderComponent({
+        experiences: [experience],
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      // The implementation shows company.name when it exists, regardless of customCompanyName
+      expect(screen.getByText('Official Name')).toBeInTheDocument();
+      expect(screen.queryByText('Custom Name')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Duration calculation for grouped experiences', () => {
+    it('should calculate correct total duration for non-overlapping experiences', () => {
+      const user = createUser();
+      const experiences = [
+        createExperience({
+          id: 'exp1',
+          startedAt: '2020-01-01',
+          endedAt: '2021-01-01', // 1 year
+        }),
+        createExperience({
+          id: 'exp2',
+          startedAt: '2022-01-01',
+          endedAt: '2023-01-01', // 1 year
+        }),
+      ];
+
+      renderComponent({
+        experiences,
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      // Should show 2 years total (not 3 years from 2020 to 2023)
+      expect(screen.getByText('2 years')).toBeInTheDocument();
+    });
+
+    it('should handle overlapping experiences correctly', () => {
+      const user = createUser();
+      const experiences = [
+        createExperience({
+          id: 'exp1',
+          startedAt: '2020-01-01',
+          endedAt: '2022-06-01', // 2.5 years
+        }),
+        createExperience({
+          id: 'exp2',
+          startedAt: '2021-06-01', // Overlaps with exp1
+          endedAt: '2023-01-01', // 1.5 years
+        }),
+      ];
+
+      renderComponent({
+        experiences,
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      // Total should be 3 years (Jan 2020 to Jan 2023), not 4 years
+      expect(screen.getByText('3 years')).toBeInTheDocument();
+    });
+
+    it('should handle current position (no end date) correctly', () => {
+      const user = createUser();
+      const experiences = [
+        createExperience({
+          id: 'exp1',
+          startedAt: '2022-01-01',
+          endedAt: null, // Current position
+        }),
+        createExperience({
+          id: 'exp2',
+          startedAt: '2023-06-01',
+          endedAt: null, // Another current position
+        }),
+      ];
+
+      renderComponent({
+        experiences,
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      // Should display some duration (will vary based on current date)
+      // The exact duration depends on when the test runs
+      // Just verify that a duration is displayed
+      expect(screen.getByText('Tech Company')).toBeInTheDocument();
+    });
+
+    it('should handle experiences with gaps correctly', () => {
+      const user = createUser();
+      const experiences = [
+        createExperience({
+          id: 'exp1',
+          startedAt: '2019-01-01',
+          endedAt: '2020-01-01', // 1 year
+        }),
+        createExperience({
+          id: 'exp2',
+          startedAt: '2021-01-01', // 1 year gap
+          endedAt: '2022-01-01', // 1 year
+        }),
+        createExperience({
+          id: 'exp3',
+          startedAt: '2023-01-01', // 1 year gap
+          endedAt: '2024-01-01', // 1 year
+        }),
+      ];
+
+      renderComponent({
+        experiences,
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      // Should show 3 years total (excluding gaps)
+      expect(screen.getByText('3 years')).toBeInTheDocument();
+    });
+
+    it('should show months for experiences less than a year', () => {
+      const user = createUser();
+      // Need multiple experiences at the same company to trigger grouped view with duration
+      const experiences = [
+        createExperience({
+          id: 'exp1',
+          startedAt: '2023-01-01',
+          endedAt: '2023-04-01', // 3 months
+        }),
+        createExperience({
+          id: 'exp2',
+          startedAt: '2023-05-01',
+          endedAt: '2023-08-01', // 3 months
+        }),
+      ];
+
+      renderComponent({
+        experiences,
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      // Total: 6 months
+      expect(screen.getByText('6 months')).toBeInTheDocument();
+    });
+
+    it('should show years and months for mixed durations', () => {
+      const user = createUser();
+      const experiences = [
+        createExperience({
+          id: 'exp1',
+          startedAt: '2021-01-01',
+          endedAt: '2021-07-01', // 6 months
+        }),
+        createExperience({
+          id: 'exp2',
+          startedAt: '2022-01-01',
+          endedAt: '2023-04-01', // 1 year 3 months
+        }),
+      ];
+
+      renderComponent({
+        experiences,
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      // Total: 1 year 9 months
+      expect(screen.getByText('1 year 9 months')).toBeInTheDocument();
+    });
+  });
+
+  describe('UI interactions and navigation', () => {
+    it('should render edit button when user owns the profile', () => {
+      const user = createUser();
+      const experience = createExperience();
+      renderComponent({
+        experiences: [experience],
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      // The edit button is rendered as a link/button with href
+      const editLinks = screen.getAllByRole('link');
+      const editButton = editLinks.find((link) =>
+        link.getAttribute('href')?.includes('settings/profile/experience/work'),
+      );
+      expect(editButton).toBeTruthy();
+      expect(editButton?.getAttribute('href')).toBe(
+        'https://app.daily.dev/settings/profile/experience/work',
+      );
+    });
+
+    it('should not render edit button when user does not own the profile', () => {
+      const user = createUser({ id: 'otheruser', username: 'otheruser' });
+      const experience = createExperience();
+      renderComponent({
+        experiences: [experience],
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      expect(
+        screen.queryByRole('link', { name: /edit/i }),
+      ).not.toBeInTheDocument();
+    });
+
+    it('should render "Show More" button when hasNextPage is true', () => {
+      const user = createUser();
+      const experience = createExperience();
+      renderComponent({
+        experiences: [experience],
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        hasNextPage: true,
+        user,
+      });
+
+      const showMoreButton = screen.getByRole('link', { name: /show more/i });
+      expect(showMoreButton).toBeInTheDocument();
+      expect(showMoreButton).toHaveAttribute(
+        'href',
+        'https://app.daily.dev/testuser/work',
+      );
+    });
+
+    it('should not render "Show More" button when hasNextPage is false', () => {
+      const user = createUser();
+      const experience = createExperience();
+      renderComponent({
+        experiences: [experience],
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        hasNextPage: false,
+        user,
+      });
+
+      expect(
+        screen.queryByRole('link', { name: /show more/i }),
+      ).not.toBeInTheDocument();
+    });
+
+    it('should render edit links on individual items when showEditOnItems is true', () => {
+      const user = createUser();
+      const experience = createExperience();
+      renderComponent({
+        experiences: [experience],
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        showEditOnItems: true,
+        user,
+      });
+
+      // The edit URL should be generated for the individual item
+      const editLinks = screen.getAllByRole('link');
+      const itemEditLink = editLinks.find((link) =>
+        link.getAttribute('href')?.includes('edit?id=exp1&type=work'),
+      );
+      expect(itemEditLink).toBeDefined();
+    });
+
+    it('should not render edit links on items when showEditOnItems is false', () => {
+      const user = createUser();
+      const experience = createExperience();
+      renderComponent({
+        experiences: [experience],
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        showEditOnItems: false,
+        user,
+      });
+
+      const editLinks = screen.getAllByRole('link');
+      const itemEditLink = editLinks.find((link) =>
+        link.getAttribute('href')?.includes('edit?id='),
+      );
+      expect(itemEditLink).toBeUndefined();
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('should handle experiences with only custom company names (no company object)', () => {
+      const user = createUser();
+      const experiences = [
+        createExperience({
+          id: 'exp1',
+          company: null,
+          customCompanyName: 'Freelance',
+        }),
+      ];
+
+      renderComponent({
+        experiences,
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      expect(screen.getByText('Freelance')).toBeInTheDocument();
+    });
+
+    it('should handle multiple experiences at different companies', () => {
+      const user = createUser();
+      const experiences = [
+        createExperience({
+          id: 'exp1',
+          title: 'Role A',
+          company: {
+            id: 'comp1',
+            name: 'Company A',
+            image: null,
+            createdAt: new Date('2019-01-01'),
+            updatedAt: new Date('2019-01-01'),
+          },
+        }),
+        createExperience({
+          id: 'exp2',
+          title: 'Role B',
+          company: {
+            id: 'comp2',
+            name: 'Company B',
+            image: null,
+            createdAt: new Date('2019-01-01'),
+            updatedAt: new Date('2019-01-01'),
+          },
+        }),
+        createExperience({
+          id: 'exp3',
+          title: 'Role C',
+          company: {
+            id: 'comp3',
+            name: 'Company C',
+            image: null,
+            createdAt: new Date('2019-01-01'),
+            updatedAt: new Date('2019-01-01'),
+          },
+        }),
+      ];
+
+      renderComponent({
+        experiences,
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      expect(screen.getByText('Role A')).toBeInTheDocument();
+      expect(screen.getByText('Role B')).toBeInTheDocument();
+      expect(screen.getByText('Role C')).toBeInTheDocument();
+    });
+
+    it('should handle very short experiences correctly', () => {
+      const user = createUser();
+      // Need multiple experiences at the same company to trigger grouped view with duration
+      const experiences = [
+        createExperience({
+          id: 'exp1',
+          startedAt: '2023-01-01',
+          endedAt: '2023-01-10', // 9 days
+        }),
+        createExperience({
+          id: 'exp2',
+          startedAt: '2023-01-15',
+          endedAt: '2023-01-20', // 5 days
+        }),
+      ];
+
+      renderComponent({
+        experiences,
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      // Total: 14 days (less than 30 days), should show "Less than a month"
+      expect(screen.getByText('Less than a month')).toBeInTheDocument();
+    });
+
+    it('should handle concurrent positions at same company correctly', () => {
+      const user = createUser();
+      const experiences = [
+        createExperience({
+          id: 'exp1',
+          title: 'Software Engineer',
+          startedAt: '2020-01-01',
+          endedAt: '2022-01-01',
+        }),
+        createExperience({
+          id: 'exp2',
+          title: 'Tech Lead',
+          startedAt: '2020-06-01', // Concurrent with first position
+          endedAt: '2021-06-01',
+        }),
+      ];
+
+      renderComponent({
+        experiences,
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        user,
+      });
+
+      // Should not double-count overlapping time
+      expect(screen.getByText('2 years')).toBeInTheDocument();
+    });
+  });
+
+  describe('AuthContext integration', () => {
+    it('should not render Show More button when user is not logged in', () => {
+      const mockUseAuthContext = useAuthContext as jest.MockedFunction<
+        typeof useAuthContext
+      >;
+      mockUseAuthContext.mockReturnValue({
+        user: null,
+        isLoggedIn: false,
+      } as ReturnType<typeof useAuthContext>);
+
+      const user = createUser();
+      const experience = createExperience();
+      renderComponent({
+        experiences: [experience],
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        hasNextPage: true,
+        user,
+      });
+
+      expect(screen.queryByText('Show More')).not.toBeInTheDocument();
+    });
+
+    it('should use correct username in Show More URL', () => {
+      const mockUseAuthContext = useAuthContext as jest.MockedFunction<
+        typeof useAuthContext
+      >;
+      mockUseAuthContext.mockReturnValue({
+        user: { id: 'customUserId', username: 'customuser' },
+        isLoggedIn: true,
+      } as ReturnType<typeof useAuthContext>);
+
+      const user = createUser({ id: 'customUserId', username: 'customuser' });
+      const experience = createExperience();
+      renderComponent({
+        experiences: [experience],
+        title: 'Work Experience',
+        experienceType: UserExperienceType.Work,
+        hasNextPage: true,
+        user,
+      });
+
+      const showMoreButton = screen.getByRole('link', { name: /show more/i });
+      expect(showMoreButton).toHaveAttribute(
+        'href',
+        'https://app.daily.dev/customuser/work',
+      );
+    });
+  });
+});
diff --git a/packages/shared/src/features/profile/components/experience/UserExperiencesList.tsx b/packages/shared/src/features/profile/components/experience/UserExperiencesList.tsx
new file mode 100644
index 0000000000..b11dcf2525
--- /dev/null
+++ b/packages/shared/src/features/profile/components/experience/UserExperiencesList.tsx
@@ -0,0 +1,138 @@
+import type { ReactElement } from 'react';
+import React, { useMemo } from 'react';
+import type {
+  UserExperience,
+  UserExperienceType,
+} from '../../../../graphql/user/profile';
+import {
+  Typography,
+  TypographyTag,
+  TypographyType,
+} from '../../../../components/typography/Typography';
+import { UserExperienceItem } from './UserExperienceItem';
+import { UserExperiencesGroupedList } from './UserExperiencesGroupedList';
+import {
+  Button,
+  ButtonIconPosition,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../../components/buttons/Button';
+import { MoveToIcon, EditIcon } from '../../../../components/icons';
+import { IconSize } from '../../../../components/Icon';
+import Link from '../../../../components/utilities/Link';
+import { useAuthContext } from '../../../../contexts/AuthContext';
+import { webappUrl } from '../../../../lib/constants';
+import type { PublicProfile } from '../../../../lib/user';
+
+interface UserExperienceListProps<T extends UserExperience> {
+  experiences: T[];
+  title?: string;
+  experienceType: UserExperienceType;
+  hasNextPage?: boolean;
+  user?: PublicProfile;
+  showEditOnItems?: boolean;
+}
+
+const groupListByCompany = <T extends UserExperience>(
+  experiences: T[],
+): [string, T[]][] => {
+  if (!experiences?.length) {
+    return [];
+  }
+
+  const grouped = experiences.reduce((acc, node) => {
+    const name = node.customCompanyName || node.company?.name;
+    if (!acc[name]) {
+      acc[name] = [];
+    }
+    acc[name].push(node);
+    return acc;
+  }, {} as Record<string, T[]>);
+
+  return Object.entries(grouped);
+};
+
+export function UserExperienceList<T extends UserExperience>({
+  experiences,
+  title,
+  experienceType,
+  hasNextPage,
+  showEditOnItems = false,
+  user,
+}: UserExperienceListProps<T>): ReactElement {
+  const { user: loggedUser } = useAuthContext();
+  const isSameUser = user?.id === loggedUser?.id;
+  const groupedByCompany: [string, T[]][] = useMemo(
+    () => groupListByCompany(experiences),
+    [experiences],
+  );
+
+  if (!user || !experiences?.length) {
+    return null;
+  }
+
+  const showMoreUrl = `${webappUrl}${user.username}/${experienceType}`;
+  const editBaseUrl = `${webappUrl}settings/profile/experience/edit`;
+  const settingsUrl = `${webappUrl}settings/profile/experience/${experienceType}`;
+
+  return (
+    <div className="flex flex-col gap-3 py-4">
+      {title ? (
+        <div className="flex flex-row items-center justify-between">
+          <Typography tag={TypographyTag.H2} type={TypographyType.Body} bold>
+            {title}
+          </Typography>
+          {settingsUrl && isSameUser && (
+            <Link href={settingsUrl} passHref>
+              <Button
+                tag="a"
+                variant={ButtonVariant.Tertiary}
+                size={ButtonSize.XSmall}
+                icon={<EditIcon />}
+              />
+            </Link>
+          )}
+        </div>
+      ) : null}
+      <ul className="flex flex-col gap-4">
+        {groupedByCompany?.map(([company, list]) =>
+          list.length === 1 ? (
+            <UserExperienceItem
+              key={list[0].id}
+              experience={list[0]}
+              editUrl={
+                showEditOnItems
+                  ? `${editBaseUrl}?id=${list[0].id}&type=${experienceType}`
+                  : undefined
+              }
+            />
+          ) : (
+            <UserExperiencesGroupedList
+              key={company}
+              company={company}
+              experiences={list}
+              showEditOnItems={showEditOnItems}
+              isSameUser={isSameUser}
+              experienceType={experienceType}
+              editBaseUrl={editBaseUrl}
+            />
+          ),
+        )}
+      </ul>
+      {hasNextPage && showMoreUrl && loggedUser && (
+        <Link href={showMoreUrl} passHref>
+          <Button
+            tag="a"
+            variant={ButtonVariant.Subtle}
+            size={ButtonSize.Medium}
+            icon={<MoveToIcon size={IconSize.XSmall} />}
+            iconPosition={ButtonIconPosition.Right}
+            className="w-full"
+          >
+            Show More
+          </Button>
+        </Link>
+      )}
+    </div>
+  );
+}
diff --git a/packages/shared/src/features/profile/components/experience/common.tsx b/packages/shared/src/features/profile/components/experience/common.tsx
new file mode 100644
index 0000000000..0edfbd99f6
--- /dev/null
+++ b/packages/shared/src/features/profile/components/experience/common.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Pill, PillSize } from '../../../../components/Pill';
+
+export const currentPill = (
+  <Pill
+    label="Current"
+    size={PillSize.XSmall}
+    className="border border-border-subtlest-tertiary text-text-secondary"
+  />
+);
diff --git a/packages/shared/src/features/profile/components/experience/forms/UserCertificationForm.spec.tsx b/packages/shared/src/features/profile/components/experience/forms/UserCertificationForm.spec.tsx
new file mode 100644
index 0000000000..bbc7ecc2b2
--- /dev/null
+++ b/packages/shared/src/features/profile/components/experience/forms/UserCertificationForm.spec.tsx
@@ -0,0 +1,477 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FormProvider, useForm } from 'react-hook-form';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import UserCertificationForm from './UserCertificationForm';
+
+// Only mock what's absolutely necessary - the AuthContext
+jest.mock('../../../../../contexts/AuthContext', () => ({
+  useAuthContext: () => ({
+    user: { id: '123', username: 'testuser' },
+    isLoggedIn: true,
+  }),
+}));
+
+// Mock the LogContext if needed
+jest.mock('../../../../../contexts/LogContext', () => ({
+  useLogContext: () => ({
+    logEvent: jest.fn(),
+  }),
+}));
+
+interface FormWrapperProps {
+  children: React.ReactNode;
+  defaultValues?: Record<string, unknown>;
+}
+
+const FormWrapper: React.FC<FormWrapperProps> = ({
+  children,
+  defaultValues = {},
+}) => {
+  const methods = useForm({
+    defaultValues: {
+      title: '',
+      customCompanyName: '',
+      current: false,
+      startedAt: null,
+      endedAt: null,
+      externalReferenceId: '',
+      url: '',
+      description: '',
+      ...defaultValues,
+    },
+  });
+
+  return (
+    <QueryClientProvider client={new QueryClient()}>
+      <FormProvider {...methods}>{children}</FormProvider>
+    </QueryClientProvider>
+  );
+};
+
+describe('UserCertificationForm', () => {
+  it('should render all form fields', () => {
+    render(
+      <FormWrapper>
+        <UserCertificationForm />
+      </FormWrapper>,
+    );
+
+    // Check certification name input field is rendered
+    const certNameInput = screen.getByPlaceholderText(
+      'Ex: AWS Certified Solutions Architect',
+    );
+    expect(certNameInput).toBeInTheDocument();
+    expect(certNameInput).toHaveAttribute('name', 'title');
+
+    // Check currently valid certification switch is rendered
+    const currentLabel = screen.getByText('Currently valid certification');
+    expect(currentLabel).toBeInTheDocument();
+    const currentDescription = screen.getByText(
+      'Check if this certification is still valid or active.',
+    );
+    expect(currentDescription).toBeInTheDocument();
+
+    // Check credential ID field
+    const credentialIdInput = screen.getByPlaceholderText(
+      'Ex: Certificate number',
+    );
+    expect(credentialIdInput).toBeInTheDocument();
+    expect(credentialIdInput).toHaveAttribute('name', 'externalReferenceId');
+
+    // Check credential URL field
+    const credentialUrlInput = screen.getByPlaceholderText(
+      'Link to verification page',
+    );
+    expect(credentialUrlInput).toBeInTheDocument();
+    expect(credentialUrlInput).toHaveAttribute('name', 'url');
+
+    // Check description label
+    const descriptionLabel = screen.getByText('Description');
+    expect(descriptionLabel).toBeInTheDocument();
+
+    // Check date fields exist (look for the labels)
+    expect(screen.getByText('Issue date*')).toBeInTheDocument();
+    expect(screen.getByText('Expiration Date')).toBeInTheDocument();
+  });
+
+  it('should handle user interaction with form fields', async () => {
+    render(
+      <FormWrapper>
+        <UserCertificationForm />
+      </FormWrapper>,
+    );
+
+    // Type in certification name field
+    const certNameInput = screen.getByPlaceholderText(
+      'Ex: AWS Certified Solutions Architect',
+    );
+    await userEvent.type(certNameInput, 'AWS Solutions Architect - Associate');
+    expect(certNameInput).toHaveValue('AWS Solutions Architect - Associate');
+
+    // Toggle currently valid certification - find the hidden checkbox by looking for the label
+    const currentLabel = screen.getByText('Currently valid certification');
+    const currentSwitch = currentLabel
+      // eslint-disable-next-line testing-library/no-node-access
+      .closest('.flex-row')
+      // eslint-disable-next-line testing-library/no-node-access
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    expect(currentSwitch).toBeDefined();
+    await userEvent.click(currentSwitch);
+    expect(currentSwitch).toBeChecked();
+
+    // Type in credential ID field
+    const credentialIdInput = screen.getByPlaceholderText(
+      'Ex: Certificate number',
+    );
+    await userEvent.type(credentialIdInput, 'AWS-123456789');
+    expect(credentialIdInput).toHaveValue('AWS-123456789');
+
+    // Type in credential URL field
+    const credentialUrlInput = screen.getByPlaceholderText(
+      'Link to verification page',
+    );
+    await userEvent.type(
+      credentialUrlInput,
+      'https://example-cert.com/verification/123456789',
+    );
+    expect(credentialUrlInput).toHaveValue(
+      'https://example-cert.com/verification/123456789',
+    );
+
+    // Type in description
+    const descriptionTextarea = screen.getByPlaceholderText(
+      'Achievements, societies, coursework',
+    );
+    await userEvent.type(
+      descriptionTextarea,
+      'Certified for designing distributed systems on AWS',
+    );
+    expect(descriptionTextarea).toHaveValue(
+      'Certified for designing distributed systems on AWS',
+    );
+  });
+
+  it('should render with pre-filled data', () => {
+    const defaultValues = {
+      title: 'Google Cloud Professional Data Engineer',
+      customCompanyName: 'Google',
+      current: true,
+      externalReferenceId: 'GCP-987654321',
+      url: 'https://example-cloud.com/certification/verify/987654321',
+      description: 'Expertise in data engineering on Google Cloud Platform',
+    };
+
+    render(
+      <FormWrapper defaultValues={defaultValues}>
+        <UserCertificationForm />
+      </FormWrapper>,
+    );
+
+    // Check that form fields have the default values
+    const certNameInput = screen.getByPlaceholderText(
+      'Ex: AWS Certified Solutions Architect',
+    );
+    expect(certNameInput).toHaveValue(
+      'Google Cloud Professional Data Engineer',
+    );
+
+    const credentialIdInput = screen.getByPlaceholderText(
+      'Ex: Certificate number',
+    );
+    expect(credentialIdInput).toHaveValue('GCP-987654321');
+
+    const credentialUrlInput = screen.getByPlaceholderText(
+      'Link to verification page',
+    );
+    expect(credentialUrlInput).toHaveValue(
+      'https://example-cloud.com/certification/verify/987654321',
+    );
+
+    const descriptionTextarea = screen.getByPlaceholderText(
+      'Achievements, societies, coursework',
+    );
+    expect(descriptionTextarea).toHaveValue(
+      'Expertise in data engineering on Google Cloud Platform',
+    );
+
+    // Check current switch state through the label
+    const currentLabel = screen.getByText('Currently valid certification');
+    const currentSwitch = currentLabel
+      // eslint-disable-next-line testing-library/no-node-access
+      .closest('.flex-row')
+      // eslint-disable-next-line testing-library/no-node-access
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    expect(currentSwitch).toBeChecked();
+  });
+
+  it('should display all required field indicators', () => {
+    render(
+      <FormWrapper>
+        <UserCertificationForm />
+      </FormWrapper>,
+    );
+
+    // Check for required field indicators in labels
+    expect(screen.getByText('Certification Name*')).toBeInTheDocument();
+    expect(screen.getByText('Issuing Organization*')).toBeInTheDocument();
+
+    // Check issue date has required indicator
+    expect(screen.getByText('Issue date*')).toBeInTheDocument();
+
+    // Check that Expiration Date is not required (no asterisk)
+    expect(screen.getByText('Expiration Date')).toBeInTheDocument();
+    expect(screen.queryByText('Expiration Date*')).not.toBeInTheDocument();
+
+    // Check that Credential ID is not required (no asterisk)
+    expect(screen.getByText('Credential ID')).toBeInTheDocument();
+    expect(screen.queryByText('Credential ID*')).not.toBeInTheDocument();
+
+    // Check that Credential URL is not required (no asterisk)
+    expect(screen.getByText('Credential URL')).toBeInTheDocument();
+    expect(screen.queryByText('Credential URL*')).not.toBeInTheDocument();
+  });
+
+  it('should render all form sections with proper structure', () => {
+    render(
+      <FormWrapper>
+        <UserCertificationForm />
+      </FormWrapper>,
+    );
+
+    // Verify all main input fields are present using proper queries
+    expect(
+      screen.getByPlaceholderText('Ex: AWS Certified Solutions Architect'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText('Ex: Certificate number'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText('Link to verification page'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText('Achievements, societies, coursework'),
+    ).toBeInTheDocument();
+
+    // Check currently valid certification text is present
+    expect(
+      screen.getByText('Currently valid certification'),
+    ).toBeInTheDocument();
+
+    // Check description section
+    expect(screen.getByText('Description')).toBeInTheDocument();
+
+    // Verify labels for each section
+    expect(screen.getByText('Certification Name*')).toBeInTheDocument();
+    expect(screen.getByText('Issuing Organization*')).toBeInTheDocument();
+    expect(screen.getByText('Credential ID')).toBeInTheDocument();
+    expect(screen.getByText('Credential URL')).toBeInTheDocument();
+  });
+
+  it('should handle current certification toggle affecting expiration date', async () => {
+    render(
+      <FormWrapper>
+        <UserCertificationForm />
+      </FormWrapper>,
+    );
+
+    // Find the currently valid certification switch
+    const currentLabel = screen.getByText('Currently valid certification');
+    const currentSwitch = currentLabel
+      // eslint-disable-next-line testing-library/no-node-access
+      .closest('.flex-row')
+      // eslint-disable-next-line testing-library/no-node-access
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+
+    // Initially not checked
+    expect(currentSwitch).not.toBeChecked();
+
+    // When toggled to current
+    await userEvent.click(currentSwitch);
+    expect(currentSwitch).toBeChecked();
+
+    // Expiration date field should not be present when current is true
+    expect(screen.queryByText('Expiration Date')).not.toBeInTheDocument();
+  });
+
+  it('should show month and year dropdowns for date fields', () => {
+    render(
+      <FormWrapper>
+        <UserCertificationForm />
+      </FormWrapper>,
+    );
+
+    // Check for "January" placeholder in issue date (startedAt)
+    expect(screen.getByText('January')).toBeInTheDocument();
+
+    // Check for "Month" placeholder in expiration date (endedAt) when current is false
+    expect(screen.getByText('Month')).toBeInTheDocument();
+
+    // Check for year placeholders (should have 2 - one for issue date and one for expiration date)
+    const yearPlaceholders = screen.getAllByText('Year');
+    expect(yearPlaceholders).toHaveLength(2);
+  });
+
+  it('should validate certification-specific fields', async () => {
+    render(
+      <FormWrapper>
+        <UserCertificationForm />
+      </FormWrapper>,
+    );
+
+    // Test certification name field accepts various certification types
+    const certNameInput = screen.getByPlaceholderText(
+      'Ex: AWS Certified Solutions Architect',
+    );
+    await userEvent.type(
+      certNameInput,
+      'Microsoft Azure Administrator Associate',
+    );
+    expect(certNameInput).toHaveValue(
+      'Microsoft Azure Administrator Associate',
+    );
+
+    // Clear and test another certification type
+    await userEvent.clear(certNameInput);
+    await userEvent.type(certNameInput, 'Certified Kubernetes Administrator');
+    expect(certNameInput).toHaveValue('Certified Kubernetes Administrator');
+
+    // Test credential ID accepts various formats
+    const credentialIdInput = screen.getByPlaceholderText(
+      'Ex: Certificate number',
+    );
+    await userEvent.type(credentialIdInput, '2024-CERT-001234');
+    expect(credentialIdInput).toHaveValue('2024-CERT-001234');
+
+    // Test URL field accepts valid URLs
+    const credentialUrlInput = screen.getByPlaceholderText(
+      'Link to verification page',
+    );
+    await userEvent.type(
+      credentialUrlInput,
+      'https://certification.example.com/verify/abc123',
+    );
+    expect(credentialUrlInput).toHaveValue(
+      'https://certification.example.com/verify/abc123',
+    );
+  });
+
+  it('should handle description field with certification details', async () => {
+    render(
+      <FormWrapper>
+        <UserCertificationForm />
+      </FormWrapper>,
+    );
+
+    const descriptionTextarea: HTMLTextAreaElement =
+      screen.getByPlaceholderText('Achievements, societies, coursework');
+
+    // Textarea has a 100 character limit
+    const description =
+      'Advanced cloud architecture certification with focus on scalability and security.';
+
+    await userEvent.type(descriptionTextarea, description);
+    expect(descriptionTextarea).toHaveValue(description);
+
+    // Test that it respects the character limit
+    expect(descriptionTextarea).toHaveAttribute('maxlength', '100');
+
+    // Clear and type a longer text that will be truncated
+    await userEvent.clear(descriptionTextarea);
+    const longText = 'a'.repeat(150); // 150 characters
+    await userEvent.type(descriptionTextarea, longText);
+    // Should only contain 100 characters
+    expect(descriptionTextarea.value).toHaveLength(100);
+  });
+
+  it('should maintain form state when switching current certification status', async () => {
+    render(
+      <FormWrapper>
+        <UserCertificationForm />
+      </FormWrapper>,
+    );
+
+    // Fill in some fields
+    const certNameInput = screen.getByPlaceholderText(
+      'Ex: AWS Certified Solutions Architect',
+    );
+    await userEvent.type(certNameInput, 'AWS DevOps Engineer');
+
+    const credentialIdInput = screen.getByPlaceholderText(
+      'Ex: Certificate number',
+    );
+    await userEvent.type(credentialIdInput, 'AWS-2024-12345');
+
+    const credentialUrlInput = screen.getByPlaceholderText(
+      'Link to verification page',
+    );
+    await userEvent.type(
+      credentialUrlInput,
+      'https://example-verify.com/12345',
+    );
+
+    // Toggle current certification
+    const currentLabel = screen.getByText('Currently valid certification');
+    const currentSwitch = currentLabel
+      // eslint-disable-next-line testing-library/no-node-access
+      .closest('.flex-row')
+      // eslint-disable-next-line testing-library/no-node-access
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    await userEvent.click(currentSwitch);
+
+    // Check that other fields retained their values
+    expect(certNameInput).toHaveValue('AWS DevOps Engineer');
+    expect(credentialIdInput).toHaveValue('AWS-2024-12345');
+    expect(credentialUrlInput).toHaveValue('https://example-verify.com/12345');
+    expect(currentSwitch).toBeChecked();
+
+    // Toggle back
+    await userEvent.click(currentSwitch);
+    expect(currentSwitch).not.toBeChecked();
+    expect(certNameInput).toHaveValue('AWS DevOps Engineer');
+    expect(credentialIdInput).toHaveValue('AWS-2024-12345');
+    expect(credentialUrlInput).toHaveValue('https://example-verify.com/12345');
+  });
+
+  it('should handle various URL formats in credential URL field', async () => {
+    render(
+      <FormWrapper>
+        <UserCertificationForm />
+      </FormWrapper>,
+    );
+
+    const credentialUrlInput = screen.getByPlaceholderText(
+      'Link to verification page',
+    );
+
+    // Test with https URL
+    await userEvent.type(
+      credentialUrlInput,
+      'https://example-badges.com/badges/abc-123',
+    );
+    expect(credentialUrlInput).toHaveValue(
+      'https://example-badges.com/badges/abc-123',
+    );
+
+    // Clear and test with http URL
+    await userEvent.clear(credentialUrlInput);
+    await userEvent.type(
+      credentialUrlInput,
+      'http://example-certification.org/id/12345',
+    );
+    expect(credentialUrlInput).toHaveValue(
+      'http://example-certification.org/id/12345',
+    );
+
+    // Clear and test with URL containing query parameters
+    await userEvent.clear(credentialUrlInput);
+    await userEvent.type(
+      credentialUrlInput,
+      'https://example.com/verify?id=123&name=test',
+    );
+    expect(credentialUrlInput).toHaveValue(
+      'https://example.com/verify?id=123&name=test',
+    );
+  });
+});
diff --git a/packages/shared/src/features/profile/components/experience/forms/UserCertificationForm.tsx b/packages/shared/src/features/profile/components/experience/forms/UserCertificationForm.tsx
new file mode 100644
index 0000000000..0401428cf2
--- /dev/null
+++ b/packages/shared/src/features/profile/components/experience/forms/UserCertificationForm.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import ControlledTextField from '../../../../../components/fields/ControlledTextField';
+import ProfileCompany from '../../ProfileCompany';
+import { HorizontalSeparator } from '../../../../../components/utilities';
+import {
+  Typography,
+  TypographyType,
+} from '../../../../../components/typography/Typography';
+import ProfileMonthYearSelect from '../../../../../components/profile/ProfileMonthYearSelect';
+import ControlledTextarea from '../../../../../components/fields/ControlledTextarea';
+import { AutocompleteType } from '../../../../../graphql/autocomplete';
+import { profileSecondaryFieldStyles } from '../../../common';
+import CurrentExperienceSwitch from '../../CurrentExperienceSwitch';
+
+const UserCertificationForm = () => {
+  const { watch } = useFormContext();
+  const current = watch('current');
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-2">
+        <ControlledTextField
+          name="title"
+          label="Certification Name*"
+          placeholder="Ex: AWS Certified Solutions Architect"
+          fieldType="secondary"
+          className={profileSecondaryFieldStyles}
+        />
+        <ProfileCompany
+          name="customCompanyName"
+          label="Issuing Organization*"
+          type={AutocompleteType.Company}
+        />
+      </div>
+      <HorizontalSeparator />
+      <CurrentExperienceSwitch
+        label="Currently valid certification"
+        description="Check if this certification is still valid or active."
+      />
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2">
+          <Typography type={TypographyType.Callout} bold>
+            Issue date*
+          </Typography>
+          <ProfileMonthYearSelect
+            name="startedAt"
+            monthPlaceholder="January"
+            yearPlaceholder="Year"
+          />
+        </div>
+        {!current && (
+          <div className="flex flex-col gap-2">
+            <Typography type={TypographyType.Callout} bold>
+              Expiration Date
+            </Typography>
+            <ProfileMonthYearSelect
+              name="endedAt"
+              monthPlaceholder="Month"
+              yearPlaceholder="Year"
+            />
+          </div>
+        )}
+      </div>
+      <HorizontalSeparator />
+      <div className="flex flex-col gap-2">
+        <ControlledTextField
+          name="externalReferenceId"
+          label="Credential ID"
+          placeholder="Ex: Certificate number"
+          fieldType="secondary"
+          className={profileSecondaryFieldStyles}
+        />
+        <ControlledTextField
+          name="url"
+          label="Credential URL"
+          placeholder="Link to verification page"
+          fieldType="secondary"
+          className={profileSecondaryFieldStyles}
+        />
+        <div className="flex flex-col gap-2">
+          <Typography type={TypographyType.Callout} bold>
+            Description
+          </Typography>
+          <ControlledTextarea
+            name="description"
+            label="Achievements, societies, coursework"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserCertificationForm;
diff --git a/packages/shared/src/features/profile/components/experience/forms/UserEducationForm.spec.tsx b/packages/shared/src/features/profile/components/experience/forms/UserEducationForm.spec.tsx
new file mode 100644
index 0000000000..73910c1a96
--- /dev/null
+++ b/packages/shared/src/features/profile/components/experience/forms/UserEducationForm.spec.tsx
@@ -0,0 +1,406 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FormProvider, useForm } from 'react-hook-form';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import UserEducationForm from './UserEducationForm';
+
+// Only mock what's absolutely necessary - the AuthContext
+jest.mock('../../../../../contexts/AuthContext', () => ({
+  useAuthContext: () => ({
+    user: { id: '123', username: 'testuser' },
+    isLoggedIn: true,
+  }),
+}));
+
+// Mock the LogContext if needed
+jest.mock('../../../../../contexts/LogContext', () => ({
+  useLogContext: () => ({
+    logEvent: jest.fn(),
+  }),
+}));
+
+interface FormWrapperProps {
+  children: React.ReactNode;
+  defaultValues?: Record<string, unknown>;
+}
+
+const FormWrapper: React.FC<FormWrapperProps> = ({
+  children,
+  defaultValues = {},
+}) => {
+  const methods = useForm({
+    defaultValues: {
+      customCompanyName: '',
+      subtitle: '',
+      title: '',
+      current: false,
+      startedAt: null,
+      endedAt: null,
+      grade: '',
+      description: '',
+      ...defaultValues,
+    },
+  });
+
+  return (
+    <QueryClientProvider client={new QueryClient()}>
+      <FormProvider {...methods}>{children}</FormProvider>
+    </QueryClientProvider>
+  );
+};
+
+describe('UserEducationForm', () => {
+  it('should render all form fields', () => {
+    render(
+      <FormWrapper>
+        <UserEducationForm />
+      </FormWrapper>,
+    );
+
+    // Check degree input field is rendered
+    const degreeInput = screen.getByPlaceholderText(
+      'Ex: Bachelor, Master, PhD, Diploma, Certificate',
+    );
+    expect(degreeInput).toBeInTheDocument();
+    expect(degreeInput).toHaveAttribute('name', 'subtitle');
+
+    // Check field of study input field is rendered
+    const fieldOfStudyInput = screen.getByPlaceholderText(
+      'Ex: Science in Computer Science',
+    );
+    expect(fieldOfStudyInput).toBeInTheDocument();
+    expect(fieldOfStudyInput).toHaveAttribute('name', 'title');
+
+    // Check current education switch is rendered
+    const currentLabel = screen.getByText('Current education');
+    expect(currentLabel).toBeInTheDocument();
+    const currentDescription = screen.getByText(
+      'Check if you are currently enrolled in this program or pursuing this degree.',
+    );
+    expect(currentDescription).toBeInTheDocument();
+
+    // Check grade field
+    const gradeInput = screen.getByPlaceholderText(
+      'Ex: 3.8/4.0, First Class Honours, 85%',
+    );
+    expect(gradeInput).toBeInTheDocument();
+    expect(gradeInput).toHaveAttribute('name', 'grade');
+
+    // Check description label
+    const descriptionLabel = screen.getByText('Description');
+    expect(descriptionLabel).toBeInTheDocument();
+
+    // Check date fields exist (look for the labels)
+    expect(screen.getByText('Start date*')).toBeInTheDocument();
+    expect(screen.getByText('End date*')).toBeInTheDocument();
+  });
+
+  it('should handle user interaction with form fields', async () => {
+    render(
+      <FormWrapper>
+        <UserEducationForm />
+      </FormWrapper>,
+    );
+
+    // Type in degree field
+    const degreeInput = screen.getByPlaceholderText(
+      'Ex: Bachelor, Master, PhD, Diploma, Certificate',
+    );
+    await userEvent.type(degreeInput, 'Bachelor of Science');
+    expect(degreeInput).toHaveValue('Bachelor of Science');
+
+    // Type in field of study
+    const fieldOfStudyInput = screen.getByPlaceholderText(
+      'Ex: Science in Computer Science',
+    );
+    await userEvent.type(fieldOfStudyInput, 'Computer Science');
+    expect(fieldOfStudyInput).toHaveValue('Computer Science');
+
+    // Toggle current education - find the hidden checkbox by looking for the label
+    const currentLabel = screen.getByText('Current education');
+    const currentSwitch = currentLabel
+      // eslint-disable-next-line testing-library/no-node-access
+      .closest('.flex-row')
+      // eslint-disable-next-line testing-library/no-node-access
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    expect(currentSwitch).toBeDefined();
+    await userEvent.click(currentSwitch);
+    expect(currentSwitch).toBeChecked();
+
+    // Type in grade field
+    const gradeInput = screen.getByPlaceholderText(
+      'Ex: 3.8/4.0, First Class Honours, 85%',
+    );
+    await userEvent.type(gradeInput, '3.9/4.0');
+    expect(gradeInput).toHaveValue('3.9/4.0');
+
+    // Type in description
+    const descriptionTextarea = screen.getByPlaceholderText(
+      'Achievements, societies, coursework',
+    );
+    await userEvent.type(
+      descriptionTextarea,
+      "Dean's list, Computer Science Society President",
+    );
+    expect(descriptionTextarea).toHaveValue(
+      "Dean's list, Computer Science Society President",
+    );
+  });
+
+  it('should render with pre-filled data', () => {
+    const defaultValues = {
+      customCompanyName: 'MIT',
+      subtitle: 'Bachelor of Science',
+      title: 'Computer Science',
+      current: true,
+      grade: '3.95/4.0',
+      description: 'Graduated with honors, member of ACM',
+    };
+
+    render(
+      <FormWrapper defaultValues={defaultValues}>
+        <UserEducationForm />
+      </FormWrapper>,
+    );
+
+    // Check that form fields have the default values
+    const degreeInput = screen.getByPlaceholderText(
+      'Ex: Bachelor, Master, PhD, Diploma, Certificate',
+    );
+    expect(degreeInput).toHaveValue('Bachelor of Science');
+
+    const fieldOfStudyInput = screen.getByPlaceholderText(
+      'Ex: Science in Computer Science',
+    );
+    expect(fieldOfStudyInput).toHaveValue('Computer Science');
+
+    const gradeInput = screen.getByPlaceholderText(
+      'Ex: 3.8/4.0, First Class Honours, 85%',
+    );
+    expect(gradeInput).toHaveValue('3.95/4.0');
+
+    const descriptionTextarea = screen.getByPlaceholderText(
+      'Achievements, societies, coursework',
+    );
+    expect(descriptionTextarea).toHaveValue(
+      'Graduated with honors, member of ACM',
+    );
+
+    // Check current switch state through the label
+    const currentLabel = screen.getByText('Current education');
+    const currentSwitch = currentLabel
+      // eslint-disable-next-line testing-library/no-node-access
+      .closest('.flex-row')
+      // eslint-disable-next-line testing-library/no-node-access
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    expect(currentSwitch).toBeChecked();
+  });
+
+  it('should display all required field indicators', () => {
+    render(
+      <FormWrapper>
+        <UserEducationForm />
+      </FormWrapper>,
+    );
+
+    // Check for required field indicators in labels
+    expect(screen.getByText('School*')).toBeInTheDocument();
+    expect(screen.getByText('Degree*')).toBeInTheDocument();
+    expect(screen.getByText('Field of Study*')).toBeInTheDocument();
+
+    // Check date fields have required indicators
+    expect(screen.getByText('Start date*')).toBeInTheDocument();
+    expect(screen.getByText('End date*')).toBeInTheDocument();
+
+    // Check that Grade is not required (no asterisk)
+    expect(screen.getByText('Grade')).toBeInTheDocument();
+    expect(screen.queryByText('Grade*')).not.toBeInTheDocument();
+  });
+
+  it('should render all form sections with proper structure', () => {
+    render(
+      <FormWrapper>
+        <UserEducationForm />
+      </FormWrapper>,
+    );
+
+    // Verify all main input fields are present using proper queries
+    expect(
+      screen.getByPlaceholderText(
+        'Ex: Bachelor, Master, PhD, Diploma, Certificate',
+      ),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText('Ex: Science in Computer Science'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText('Ex: 3.8/4.0, First Class Honours, 85%'),
+    ).toBeInTheDocument();
+
+    // Check current education text is present
+    expect(screen.getByText('Current education')).toBeInTheDocument();
+
+    // Check description section
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText('Achievements, societies, coursework'),
+    ).toBeInTheDocument();
+
+    // Verify labels for each section
+    expect(screen.getByText('School*')).toBeInTheDocument();
+    expect(screen.getByText('Degree*')).toBeInTheDocument();
+    expect(screen.getByText('Field of Study*')).toBeInTheDocument();
+    expect(screen.getByText('Grade')).toBeInTheDocument();
+  });
+
+  it('should handle current education toggle affecting end date', async () => {
+    render(
+      <FormWrapper>
+        <UserEducationForm />
+      </FormWrapper>,
+    );
+
+    // Find the current education switch
+    const currentLabel = screen.getByText('Current education');
+    const currentSwitch = currentLabel
+      // eslint-disable-next-line testing-library/no-node-access
+      .closest('.flex-row')
+      // eslint-disable-next-line testing-library/no-node-access
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+
+    // Initially not checked
+    expect(currentSwitch).not.toBeChecked();
+
+    // When toggled to current
+    await userEvent.click(currentSwitch);
+    expect(currentSwitch).toBeChecked();
+
+    // End date field should not be present when current is true
+    expect(screen.queryByText(/End date\*/)).not.toBeInTheDocument();
+  });
+
+  it('should show month and year dropdowns for date fields', () => {
+    render(
+      <FormWrapper>
+        <UserEducationForm />
+      </FormWrapper>,
+    );
+
+    // Check for "January" placeholder in start date (startedAt)
+    expect(screen.getByText('January')).toBeInTheDocument();
+
+    // Check for "Month" placeholder in end date (endedAt) when current is false
+    expect(screen.getByText('Month')).toBeInTheDocument();
+
+    // Check for year placeholders (should have 2 - one for start date and one for end date)
+    const yearPlaceholders = screen.getAllByText('Year');
+    expect(yearPlaceholders).toHaveLength(2);
+  });
+
+  it('should validate education-specific fields', async () => {
+    render(
+      <FormWrapper>
+        <UserEducationForm />
+      </FormWrapper>,
+    );
+
+    // Test degree field accepts various degree types
+    const degreeInput = screen.getByPlaceholderText(
+      'Ex: Bachelor, Master, PhD, Diploma, Certificate',
+    );
+    await userEvent.type(degreeInput, 'Master of Business Administration');
+    expect(degreeInput).toHaveValue('Master of Business Administration');
+
+    // Clear and test another degree type
+    await userEvent.clear(degreeInput);
+    await userEvent.type(degreeInput, 'PhD');
+    expect(degreeInput).toHaveValue('PhD');
+
+    // Test field of study accepts various fields
+    const fieldOfStudyInput = screen.getByPlaceholderText(
+      'Ex: Science in Computer Science',
+    );
+    await userEvent.type(fieldOfStudyInput, 'Electrical Engineering');
+    expect(fieldOfStudyInput).toHaveValue('Electrical Engineering');
+
+    // Test grade field accepts various formats
+    const gradeInput = screen.getByPlaceholderText(
+      'Ex: 3.8/4.0, First Class Honours, 85%',
+    );
+    await userEvent.type(gradeInput, 'First Class Honours');
+    expect(gradeInput).toHaveValue('First Class Honours');
+
+    await userEvent.clear(gradeInput);
+    await userEvent.type(gradeInput, '92%');
+    expect(gradeInput).toHaveValue('92%');
+  });
+
+  it('should handle description field with achievements and coursework', async () => {
+    render(
+      <FormWrapper>
+        <UserEducationForm />
+      </FormWrapper>,
+    );
+
+    const descriptionTextarea = screen.getByPlaceholderText(
+      'Achievements, societies, coursework',
+    ) as HTMLTextAreaElement;
+
+    // Textarea has a 100 character limit
+    const description =
+      "Dean's List, CS Society President, ML research. Coursework: Data Structures, AI";
+
+    await userEvent.type(descriptionTextarea, description);
+    expect(descriptionTextarea).toHaveValue(description);
+
+    // Test that it respects the character limit
+    expect(descriptionTextarea).toHaveAttribute('maxlength', '100');
+
+    // Clear and type a longer text that will be truncated
+    await userEvent.clear(descriptionTextarea);
+    const longText = 'a'.repeat(150); // 150 characters
+    await userEvent.type(descriptionTextarea, longText);
+    // Should only contain 100 characters
+    expect(descriptionTextarea.value).toHaveLength(100);
+  });
+
+  it('should maintain form state when switching current education status', async () => {
+    render(
+      <FormWrapper>
+        <UserEducationForm />
+      </FormWrapper>,
+    );
+
+    // Fill in some fields
+    const degreeInput = screen.getByPlaceholderText(
+      'Ex: Bachelor, Master, PhD, Diploma, Certificate',
+    );
+    await userEvent.type(degreeInput, 'Bachelor of Arts');
+
+    const gradeInput = screen.getByPlaceholderText(
+      'Ex: 3.8/4.0, First Class Honours, 85%',
+    );
+    await userEvent.type(gradeInput, '3.7/4.0');
+
+    // Toggle current education
+    const currentLabel = screen.getByText('Current education');
+    const currentSwitch = currentLabel
+      // eslint-disable-next-line testing-library/no-node-access
+      .closest('.flex-row')
+      // eslint-disable-next-line testing-library/no-node-access
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    await userEvent.click(currentSwitch);
+
+    // Check that other fields retained their values
+    expect(degreeInput).toHaveValue('Bachelor of Arts');
+    expect(gradeInput).toHaveValue('3.7/4.0');
+    expect(currentSwitch).toBeChecked();
+
+    // Toggle back
+    await userEvent.click(currentSwitch);
+    expect(currentSwitch).not.toBeChecked();
+    expect(degreeInput).toHaveValue('Bachelor of Arts');
+    expect(gradeInput).toHaveValue('3.7/4.0');
+  });
+});
diff --git a/packages/shared/src/features/profile/components/experience/forms/UserEducationForm.tsx b/packages/shared/src/features/profile/components/experience/forms/UserEducationForm.tsx
new file mode 100644
index 0000000000..824fe89861
--- /dev/null
+++ b/packages/shared/src/features/profile/components/experience/forms/UserEducationForm.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import ControlledTextField from '../../../../../components/fields/ControlledTextField';
+import ProfileCompany from '../../ProfileCompany';
+import { HorizontalSeparator } from '../../../../../components/utilities';
+import {
+  Typography,
+  TypographyType,
+} from '../../../../../components/typography/Typography';
+import ProfileMonthYearSelect from '../../../../../components/profile/ProfileMonthYearSelect';
+import ControlledTextarea from '../../../../../components/fields/ControlledTextarea';
+import { AutocompleteType } from '../../../../../graphql/autocomplete';
+import { profileSecondaryFieldStyles } from '../../../common';
+import CurrentExperienceSwitch from '../../CurrentExperienceSwitch';
+
+const UserEducationForm = () => {
+  const { watch } = useFormContext();
+  const current = watch('current');
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-2">
+        <ProfileCompany
+          name="customCompanyName"
+          label="School*"
+          type={AutocompleteType.School}
+        />
+        <ControlledTextField
+          name="subtitle"
+          label="Degree*"
+          placeholder="Ex: Bachelor, Master, PhD, Diploma, Certificate"
+          fieldType="secondary"
+          className={profileSecondaryFieldStyles}
+        />
+        <ControlledTextField
+          name="title"
+          label="Field of Study*"
+          placeholder="Ex: Science in Computer Science"
+          fieldType="secondary"
+          className={profileSecondaryFieldStyles}
+        />
+      </div>
+      <HorizontalSeparator />
+      <CurrentExperienceSwitch
+        label="Current education"
+        description="Check if you are currently enrolled in this program or pursuing this degree."
+      />
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2">
+          <Typography type={TypographyType.Callout} bold>
+            Start date*
+          </Typography>
+          <ProfileMonthYearSelect
+            name="startedAt"
+            monthPlaceholder="January"
+            yearPlaceholder="Year"
+          />
+        </div>
+        {!current && (
+          <div className="flex flex-col gap-2">
+            <Typography type={TypographyType.Callout} bold>
+              End date*
+            </Typography>
+            <ProfileMonthYearSelect
+              name="endedAt"
+              monthPlaceholder="Month"
+              yearPlaceholder="Year"
+            />
+          </div>
+        )}
+      </div>
+      <HorizontalSeparator />
+      <div className="flex flex-col gap-2">
+        <ControlledTextField
+          name="grade"
+          label="Grade"
+          placeholder="Ex: 3.8/4.0, First Class Honours, 85%"
+          fieldType="secondary"
+          className={profileSecondaryFieldStyles}
+        />
+        <div className="flex flex-col gap-2">
+          <Typography type={TypographyType.Callout} bold>
+            Description
+          </Typography>
+          <ControlledTextarea
+            name="description"
+            label="Achievements, societies, coursework"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserEducationForm;
diff --git a/packages/shared/src/features/profile/components/experience/forms/UserProjectExperienceForm.spec.tsx b/packages/shared/src/features/profile/components/experience/forms/UserProjectExperienceForm.spec.tsx
new file mode 100644
index 0000000000..bebd9aa34b
--- /dev/null
+++ b/packages/shared/src/features/profile/components/experience/forms/UserProjectExperienceForm.spec.tsx
@@ -0,0 +1,483 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FormProvider, useForm } from 'react-hook-form';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import UserProjectExperienceForm from './UserProjectExperienceForm';
+import { UserExperienceType } from '../../../../../graphql/user/profile';
+
+// Only mock what's absolutely necessary - the AuthContext
+jest.mock('../../../../../contexts/AuthContext', () => ({
+  useAuthContext: () => ({
+    user: { id: '123', username: 'testuser' },
+    isLoggedIn: true,
+  }),
+}));
+
+// Mock the LogContext if needed
+jest.mock('../../../../../contexts/LogContext', () => ({
+  useLogContext: () => ({
+    logEvent: jest.fn(),
+  }),
+}));
+
+interface FormWrapperProps {
+  children: React.ReactNode;
+  defaultValues?: Record<string, unknown>;
+}
+
+const FormWrapper: React.FC<FormWrapperProps> = ({
+  children,
+  defaultValues = {},
+}) => {
+  const methods = useForm({
+    defaultValues: {
+      type: UserExperienceType.Project,
+      title: '',
+      customCompanyName: '',
+      current: false,
+      startedAt: null,
+      endedAt: null,
+      url: '',
+      description: '',
+      ...defaultValues,
+    },
+  });
+
+  return (
+    <QueryClientProvider client={new QueryClient()}>
+      <FormProvider {...methods}>{children}</FormProvider>
+    </QueryClientProvider>
+  );
+};
+
+describe('UserProjectExperienceForm', () => {
+  it('should render all form fields', () => {
+    render(
+      <FormWrapper>
+        <UserProjectExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Check title input field is rendered
+    const titleInput = screen.getByPlaceholderText(
+      'Ex: Name of the publication or article',
+    );
+    expect(titleInput).toBeInTheDocument();
+    expect(titleInput).toHaveAttribute('name', 'title');
+
+    // Check current project switch is rendered
+    const currentLabel = screen.getByText('Ongoing project/publication');
+    expect(currentLabel).toBeInTheDocument();
+    const currentDescription = screen.getByText(
+      'Check if this project or publication is currently active or ongoing.',
+    );
+    expect(currentDescription).toBeInTheDocument();
+
+    // Check URL field
+    const urlInput = screen.getByPlaceholderText(
+      'Ex: Validates against URL format',
+    );
+    expect(urlInput).toBeInTheDocument();
+    expect(urlInput).toHaveAttribute('name', 'url');
+
+    // Check description label
+    const descriptionLabel = screen.getByText('Description');
+    expect(descriptionLabel).toBeInTheDocument();
+
+    // Check date field exists (look for the label)
+    expect(screen.getByText('Publication Date*')).toBeInTheDocument();
+
+    // Check end date field exists when current is false
+    expect(screen.getByText('End date*')).toBeInTheDocument();
+  });
+
+  it('should handle user interaction with form fields', async () => {
+    render(
+      <FormWrapper>
+        <UserProjectExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Type in title field
+    const titleInput = screen.getByPlaceholderText(
+      'Ex: Name of the publication or article',
+    );
+    await userEvent.type(
+      titleInput,
+      'Building Scalable Microservices Architecture',
+    );
+    expect(titleInput).toHaveValue(
+      'Building Scalable Microservices Architecture',
+    );
+
+    // Toggle current project - find the hidden checkbox by looking for the label
+    const currentLabel = screen.getByText('Ongoing project/publication');
+    const currentSwitch = currentLabel
+      // eslint-disable-next-line testing-library/no-node-access
+      .closest('.flex-row')
+      // eslint-disable-next-line testing-library/no-node-access
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    expect(currentSwitch).toBeDefined();
+    await userEvent.click(currentSwitch);
+    expect(currentSwitch).toBeChecked();
+
+    // Type in URL field
+    const urlInput = screen.getByPlaceholderText(
+      'Ex: Validates against URL format',
+    );
+    await userEvent.type(
+      urlInput,
+      'https://example-blog.com/@user/microservices-article',
+    );
+    expect(urlInput).toHaveValue(
+      'https://example-blog.com/@user/microservices-article',
+    );
+
+    // Type in description
+    const descriptionTextarea = screen.getByPlaceholderText(
+      'Summary of the work, focus area',
+    );
+    await userEvent.type(
+      descriptionTextarea,
+      'Article about implementing microservices with Docker and Kubernetes',
+    );
+    expect(descriptionTextarea).toHaveValue(
+      'Article about implementing microservices with Docker and Kubernetes',
+    );
+  });
+
+  it('should render with pre-filled data for project type', () => {
+    const defaultValues = {
+      type: UserExperienceType.Project,
+      title: 'Machine Learning Research Paper',
+      customCompanyName: 'IEEE',
+      current: true,
+      url: 'https://example-publications.org/document/12345',
+      description: 'Research on neural network optimization techniques',
+    };
+
+    render(
+      <FormWrapper defaultValues={defaultValues}>
+        <UserProjectExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Check that form fields have the default values
+    const titleInput = screen.getByPlaceholderText(
+      'Ex: Name of the publication or article',
+    );
+    expect(titleInput).toHaveValue('Machine Learning Research Paper');
+
+    const urlInput = screen.getByPlaceholderText(
+      'Ex: Validates against URL format',
+    );
+    expect(urlInput).toHaveValue(
+      'https://example-publications.org/document/12345',
+    );
+
+    const descriptionTextarea = screen.getByPlaceholderText(
+      'Summary of the work, focus area',
+    );
+    expect(descriptionTextarea).toHaveValue(
+      'Research on neural network optimization techniques',
+    );
+
+    // Check current switch state through the label
+    const currentLabel = screen.getByText('Ongoing project/publication');
+    const currentSwitch = currentLabel
+      // eslint-disable-next-line testing-library/no-node-access
+      .closest('.flex-row')
+      // eslint-disable-next-line testing-library/no-node-access
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    expect(currentSwitch).toBeChecked();
+
+    // End date field should not be present when current is true
+    expect(screen.queryByText('End date*')).not.toBeInTheDocument();
+  });
+
+  it('should display different switch labels for OpenSource type', () => {
+    render(
+      <FormWrapper defaultValues={{ type: UserExperienceType.OpenSource }}>
+        <UserProjectExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Check for OpenSource-specific switch label
+    expect(
+      screen.getByText('Active open-source contribution'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'Check if you are still actively contributing to this open-source project.',
+      ),
+    ).toBeInTheDocument();
+
+    // Should not have the project/publication label
+    expect(
+      screen.queryByText('Ongoing project/publication'),
+    ).not.toBeInTheDocument();
+
+    // Check for OpenSource-specific start date label
+    expect(screen.getByText('Active from*')).toBeInTheDocument();
+
+    // End date field should be present when current is false
+    expect(screen.getByText('End date*')).toBeInTheDocument();
+  });
+
+  it('should display all required field indicators', () => {
+    render(
+      <FormWrapper>
+        <UserProjectExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Check for required field indicators in labels
+    expect(screen.getByText('Title*')).toBeInTheDocument();
+    expect(screen.getByText('Publisher*')).toBeInTheDocument();
+
+    // Check publication date has required indicator
+    expect(screen.getByText('Publication Date*')).toBeInTheDocument();
+
+    // Check that Publication URL is not required (no asterisk)
+    expect(screen.getByText('Publication URL')).toBeInTheDocument();
+    expect(screen.queryByText('Publication URL*')).not.toBeInTheDocument();
+
+    // Check end date has required indicator when current is false
+    expect(screen.getByText('End date*')).toBeInTheDocument();
+  });
+
+  it('should render all form sections with proper structure', () => {
+    render(
+      <FormWrapper>
+        <UserProjectExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Verify all main input fields are present using proper queries
+    expect(
+      screen.getByPlaceholderText('Ex: Name of the publication or article'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText('Ex: Validates against URL format'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText('Summary of the work, focus area'),
+    ).toBeInTheDocument();
+
+    // Check current project text is present
+    expect(screen.getByText('Ongoing project/publication')).toBeInTheDocument();
+
+    // Check description section
+    expect(screen.getByText('Description')).toBeInTheDocument();
+
+    // Verify labels for each section
+    expect(screen.getByText('Title*')).toBeInTheDocument();
+    expect(screen.getByText('Publisher*')).toBeInTheDocument();
+    expect(screen.getByText('Publication URL')).toBeInTheDocument();
+    expect(screen.getByText('End date*')).toBeInTheDocument();
+  });
+
+  it('should handle current project toggle', async () => {
+    render(
+      <FormWrapper>
+        <UserProjectExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Find the current project switch
+    const currentLabel = screen.getByText('Ongoing project/publication');
+    const currentSwitch = currentLabel
+      // eslint-disable-next-line testing-library/no-node-access
+      .closest('.flex-row')
+      // eslint-disable-next-line testing-library/no-node-access
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+
+    // Initially not checked
+    expect(currentSwitch).not.toBeChecked();
+
+    // End date field should be present when current is false
+    expect(screen.getByText('End date*')).toBeInTheDocument();
+
+    // When toggled to current
+    await userEvent.click(currentSwitch);
+    expect(currentSwitch).toBeChecked();
+
+    // End date field should not be present when current is true
+    expect(screen.queryByText('End date*')).not.toBeInTheDocument();
+  });
+
+  it('should show month and year dropdowns for publication date', () => {
+    render(
+      <FormWrapper>
+        <UserProjectExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Check for "January" placeholder in publication date (startedAt)
+    expect(screen.getByText('January')).toBeInTheDocument();
+
+    // Check for "Month" placeholder in end date (endedAt) when current is false
+    expect(screen.getByText('Month')).toBeInTheDocument();
+
+    // Check for year placeholders (should have 2 - one for start date and one for end date)
+    const yearPlaceholders = screen.getAllByText('Year');
+    expect(yearPlaceholders).toHaveLength(2);
+  });
+
+  it('should validate project-specific fields', async () => {
+    render(
+      <FormWrapper>
+        <UserProjectExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Test title field accepts various project names
+    const titleInput = screen.getByPlaceholderText(
+      'Ex: Name of the publication or article',
+    );
+    await userEvent.type(titleInput, 'React Performance Optimization Guide');
+    expect(titleInput).toHaveValue('React Performance Optimization Guide');
+
+    // Clear and test another title
+    await userEvent.clear(titleInput);
+    await userEvent.type(
+      titleInput,
+      'Open Source Contribution to React Native',
+    );
+    expect(titleInput).toHaveValue('Open Source Contribution to React Native');
+
+    // Test URL field accepts valid URLs
+    const urlInput = screen.getByPlaceholderText(
+      'Ex: Validates against URL format',
+    );
+    await userEvent.type(urlInput, 'https://example-code.com/user/project');
+    expect(urlInput).toHaveValue('https://example-code.com/user/project');
+  });
+
+  it('should handle description field with project details', async () => {
+    render(
+      <FormWrapper>
+        <UserProjectExperienceForm />
+      </FormWrapper>,
+    );
+
+    const descriptionTextarea = screen.getByPlaceholderText(
+      'Summary of the work, focus area',
+    );
+
+    // Textarea has a 100 character limit
+    const description =
+      'Developed a high-performance web application using React and Node.js for real-time data.';
+
+    await userEvent.type(descriptionTextarea, description);
+    expect(descriptionTextarea).toHaveValue(description);
+
+    // Test that it respects the character limit
+    expect(descriptionTextarea).toHaveAttribute('maxlength', '100');
+
+    // Clear and type a longer text that will be truncated
+    await userEvent.clear(descriptionTextarea);
+    const longText = 'a'.repeat(150); // 150 characters
+    await userEvent.type(descriptionTextarea, longText);
+    // Should only contain 100 characters
+    expect(descriptionTextarea.value).toHaveLength(100);
+  });
+
+  it('should handle various URL formats in publication URL field', async () => {
+    render(
+      <FormWrapper>
+        <UserProjectExperienceForm />
+      </FormWrapper>,
+    );
+
+    const urlInput = screen.getByPlaceholderText(
+      'Ex: Validates against URL format',
+    );
+
+    // Test with https URL
+    await userEvent.type(
+      urlInput,
+      'https://example-research.org/abs/2024.12345',
+    );
+    expect(urlInput).toHaveValue('https://example-research.org/abs/2024.12345');
+
+    // Clear and test with code repository URL
+    await userEvent.clear(urlInput);
+    await userEvent.type(urlInput, 'https://example-code.com/company/project');
+    expect(urlInput).toHaveValue('https://example-code.com/company/project');
+
+    // Clear and test with URL containing query parameters
+    await userEvent.clear(urlInput);
+    await userEvent.type(
+      urlInput,
+      'https://blog.example.com/post?id=123&category=tech',
+    );
+    expect(urlInput).toHaveValue(
+      'https://blog.example.com/post?id=123&category=tech',
+    );
+  });
+
+  it('should show end date field when current is false for OpenSource type', () => {
+    render(
+      <FormWrapper
+        defaultValues={{
+          type: UserExperienceType.OpenSource,
+          current: false,
+        }}
+      >
+        <UserProjectExperienceForm />
+      </FormWrapper>,
+    );
+
+    // End date field should be present when current is false
+    expect(screen.getByText('End date*')).toBeInTheDocument();
+    expect(screen.getByText('Month')).toBeInTheDocument();
+  });
+
+  it('should hide end date field when current is true for OpenSource type', () => {
+    render(
+      <FormWrapper
+        defaultValues={{
+          type: UserExperienceType.OpenSource,
+          current: true,
+        }}
+      >
+        <UserProjectExperienceForm />
+      </FormWrapper>,
+    );
+
+    // End date field should not be present when current is true
+    expect(screen.queryByText('End date*')).not.toBeInTheDocument();
+    expect(screen.queryByText('Month')).not.toBeInTheDocument();
+  });
+
+  it('should toggle end date field visibility when switching current status', async () => {
+    render(
+      <FormWrapper defaultValues={{ type: UserExperienceType.OpenSource }}>
+        <UserProjectExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Initially current is false, so end date should be visible
+    expect(screen.getByText('End date*')).toBeInTheDocument();
+
+    // Find and toggle the current switch
+    const currentLabel = screen.getByText('Active open-source contribution');
+    const currentSwitch = currentLabel
+      // eslint-disable-next-line testing-library/no-node-access
+      .closest('.flex-row')
+      // eslint-disable-next-line testing-library/no-node-access
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+
+    // Toggle to current (true)
+    await userEvent.click(currentSwitch);
+    expect(currentSwitch).toBeChecked();
+    expect(screen.queryByText('End date*')).not.toBeInTheDocument();
+
+    // Toggle back to not current (false)
+    await userEvent.click(currentSwitch);
+    expect(currentSwitch).not.toBeChecked();
+    expect(screen.getByText('End date*')).toBeInTheDocument();
+  });
+});
diff --git a/packages/shared/src/features/profile/components/experience/forms/UserProjectExperienceForm.tsx b/packages/shared/src/features/profile/components/experience/forms/UserProjectExperienceForm.tsx
new file mode 100644
index 0000000000..3543568c78
--- /dev/null
+++ b/packages/shared/src/features/profile/components/experience/forms/UserProjectExperienceForm.tsx
@@ -0,0 +1,123 @@
+import React, { useMemo } from 'react';
+import { useFormContext } from 'react-hook-form';
+import ControlledTextField from '../../../../../components/fields/ControlledTextField';
+import ProfileCompany from '../../ProfileCompany';
+import { HorizontalSeparator } from '../../../../../components/utilities';
+import {
+  Typography,
+  TypographyType,
+} from '../../../../../components/typography/Typography';
+import ProfileMonthYearSelect from '../../../../../components/profile/ProfileMonthYearSelect';
+import ControlledTextarea from '../../../../../components/fields/ControlledTextarea';
+import { AutocompleteType } from '../../../../../graphql/autocomplete';
+import { UserExperienceType } from '../../../../../graphql/user/profile';
+import { profileSecondaryFieldStyles } from '../../../common';
+import CurrentExperienceSwitch from '../../CurrentExperienceSwitch';
+
+type FormCopy = {
+  titlePlaceholder: string;
+  switchLabel: string;
+  switchDescription: string;
+  company: string;
+  startedtLabel: string;
+  urlLabel: string;
+};
+
+const getFormCopy = (type: UserExperienceType): FormCopy => {
+  if (type === UserExperienceType.OpenSource) {
+    return {
+      titlePlaceholder: 'Ex: Name of the repository',
+      switchLabel: 'Active open-source contribution',
+      switchDescription:
+        'Check if you are still actively contributing to this open-source project.',
+      company: 'Repository*',
+      startedtLabel: 'Active from',
+      urlLabel: 'Repository URL',
+    };
+  }
+
+  return {
+    titlePlaceholder: 'Ex: Name of the publication or article',
+    switchLabel: 'Ongoing project/publication',
+    switchDescription:
+      'Check if this project or publication is currently active or ongoing.',
+    company: 'Publisher*',
+    startedtLabel: 'Publication Date',
+    urlLabel: 'Publication URL',
+  };
+};
+
+const UserProjectExperienceForm = () => {
+  const { watch } = useFormContext();
+  const type = watch('type') as UserExperienceType;
+  const current = watch('current');
+  const copy = useMemo(() => getFormCopy(type), [type]);
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-2">
+        <ControlledTextField
+          name="title"
+          label="Title*"
+          placeholder={copy.titlePlaceholder}
+          fieldType="secondary"
+          className={profileSecondaryFieldStyles}
+        />
+        <ProfileCompany
+          name="customCompanyName"
+          label={copy.company}
+          type={AutocompleteType.Company}
+        />
+      </div>
+      <HorizontalSeparator />
+      <CurrentExperienceSwitch
+        label={copy.switchLabel}
+        description={copy.switchDescription}
+      />
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2">
+          <Typography type={TypographyType.Callout} bold>
+            {copy.startedtLabel}*
+          </Typography>
+          <ProfileMonthYearSelect
+            name="startedAt"
+            monthPlaceholder="January"
+            yearPlaceholder="Year"
+          />
+        </div>
+        {!current && (
+          <div className="flex flex-col gap-2">
+            <Typography type={TypographyType.Callout} bold>
+              End date*
+            </Typography>
+            <ProfileMonthYearSelect
+              name="endedAt"
+              monthPlaceholder="Month"
+              yearPlaceholder="Year"
+            />
+          </div>
+        )}
+      </div>
+      <HorizontalSeparator />
+      <div className="flex flex-col gap-2">
+        <ControlledTextField
+          name="url"
+          label={copy.urlLabel}
+          placeholder="Ex: Validates against URL format"
+          fieldType="secondary"
+          className={profileSecondaryFieldStyles}
+        />
+        <div className="flex flex-col gap-2">
+          <Typography type={TypographyType.Callout} bold>
+            Description
+          </Typography>
+          <ControlledTextarea
+            name="description"
+            label="Summary of the work, focus area"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserProjectExperienceForm;
diff --git a/packages/shared/src/features/profile/components/experience/forms/UserVolunteeringExperienceForm.spec.tsx b/packages/shared/src/features/profile/components/experience/forms/UserVolunteeringExperienceForm.spec.tsx
new file mode 100644
index 0000000000..6b41888c94
--- /dev/null
+++ b/packages/shared/src/features/profile/components/experience/forms/UserVolunteeringExperienceForm.spec.tsx
@@ -0,0 +1,344 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FormProvider, useForm } from 'react-hook-form';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import UserVolunteeringExperienceForm from './UserVolunteeringExperienceForm';
+
+// Only mock what's absolutely necessary - the AuthContext
+jest.mock('../../../../../contexts/AuthContext', () => ({
+  useAuthContext: () => ({
+    user: { id: '123', username: 'testuser' },
+    isLoggedIn: true,
+  }),
+}));
+
+// Mock the LogContext if needed
+jest.mock('../../../../../contexts/LogContext', () => ({
+  useLogContext: () => ({
+    logEvent: jest.fn(),
+  }),
+}));
+
+interface FormWrapperProps {
+  children: React.ReactNode;
+  defaultValues?: Record<string, unknown>;
+}
+
+const FormWrapper: React.FC<FormWrapperProps> = ({
+  children,
+  defaultValues = {},
+}) => {
+  const methods = useForm({
+    defaultValues: {
+      customCompanyName: '',
+      title: '',
+      current: false,
+      startedAt: null,
+      endedAt: null,
+      ...defaultValues,
+    },
+  });
+
+  return (
+    <QueryClientProvider client={new QueryClient()}>
+      <FormProvider {...methods}>{children}</FormProvider>
+    </QueryClientProvider>
+  );
+};
+
+describe('UserVolunteeringExperienceForm', () => {
+  it('should render all form fields', () => {
+    render(
+      <FormWrapper>
+        <UserVolunteeringExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Check role input field is rendered
+    const roleInput = screen.getByPlaceholderText(
+      'Ex: Mentor, Fundraiser, Maintainer',
+    );
+    expect(roleInput).toBeInTheDocument();
+    expect(roleInput).toHaveAttribute('name', 'title');
+
+    // Check current volunteer role switch is rendered
+    const currentLabel = screen.getByText('Current volunteer role');
+    expect(currentLabel).toBeInTheDocument();
+    const currentDescription = screen.getByText(
+      'Check if you are still actively volunteering in this position.',
+    );
+    expect(currentDescription).toBeInTheDocument();
+
+    // Check date fields exist (look for the labels)
+    expect(screen.getByText('Start date*')).toBeInTheDocument();
+    expect(screen.getByText('End date*')).toBeInTheDocument();
+
+    // Check organization label
+    expect(screen.getByText('Organization*')).toBeInTheDocument();
+  });
+
+  it('should handle user interaction with form fields', async () => {
+    render(
+      <FormWrapper>
+        <UserVolunteeringExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Type in role field
+    const roleInput = screen.getByPlaceholderText(
+      'Ex: Mentor, Fundraiser, Maintainer',
+    );
+    await userEvent.type(roleInput, 'Technical Mentor');
+    expect(roleInput).toHaveValue('Technical Mentor');
+
+    // Toggle current volunteer role - find the hidden checkbox by looking for the label
+    const currentLabel = screen.getByText('Current volunteer role');
+    const currentSwitch = currentLabel
+      // eslint-disable-next-line testing-library/no-node-access
+      .closest('.flex-row')
+      // eslint-disable-next-line testing-library/no-node-access
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    expect(currentSwitch).toBeDefined();
+    await userEvent.click(currentSwitch);
+    expect(currentSwitch).toBeChecked();
+  });
+
+  it('should render with pre-filled data', () => {
+    const defaultValues = {
+      customCompanyName: 'Code for Good Foundation',
+      title: 'Lead Volunteer Coordinator',
+      current: true,
+    };
+
+    render(
+      <FormWrapper defaultValues={defaultValues}>
+        <UserVolunteeringExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Check that form fields have the default values
+    const roleInput = screen.getByPlaceholderText(
+      'Ex: Mentor, Fundraiser, Maintainer',
+    );
+    expect(roleInput).toHaveValue('Lead Volunteer Coordinator');
+
+    // Check current switch state through the label
+    const currentLabel = screen.getByText('Current volunteer role');
+    const currentSwitch = currentLabel
+      // eslint-disable-next-line testing-library/no-node-access
+      .closest('.flex-row')
+      // eslint-disable-next-line testing-library/no-node-access
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    expect(currentSwitch).toBeChecked();
+  });
+
+  it('should display all required field indicators', () => {
+    render(
+      <FormWrapper>
+        <UserVolunteeringExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Check for required field indicators in labels
+    expect(screen.getByText('Organization*')).toBeInTheDocument();
+    expect(screen.getByText('Role*')).toBeInTheDocument();
+
+    // Check date fields have required indicators
+    expect(screen.getByText('Start date*')).toBeInTheDocument();
+    expect(screen.getByText('End date*')).toBeInTheDocument();
+  });
+
+  it('should render all form sections with proper structure', () => {
+    render(
+      <FormWrapper>
+        <UserVolunteeringExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Verify all main input fields are present using proper queries
+    expect(
+      screen.getByPlaceholderText('Ex: Mentor, Fundraiser, Maintainer'),
+    ).toBeInTheDocument();
+
+    // Check current volunteer role text is present
+    expect(screen.getByText('Current volunteer role')).toBeInTheDocument();
+
+    // Verify labels for each section
+    expect(screen.getByText('Organization*')).toBeInTheDocument();
+    expect(screen.getByText('Role*')).toBeInTheDocument();
+    expect(screen.getByText('Start date*')).toBeInTheDocument();
+    expect(screen.getByText('End date*')).toBeInTheDocument();
+  });
+
+  it('should handle current volunteer role toggle', async () => {
+    render(
+      <FormWrapper>
+        <UserVolunteeringExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Find the current volunteer role switch
+    const currentLabel = screen.getByText('Current volunteer role');
+    const currentSwitch = currentLabel
+      // eslint-disable-next-line testing-library/no-node-access
+      .closest('.flex-row')
+      // eslint-disable-next-line testing-library/no-node-access
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+
+    // Initially not checked
+    expect(currentSwitch).not.toBeChecked();
+
+    // When toggled to current
+    await userEvent.click(currentSwitch);
+    expect(currentSwitch).toBeChecked();
+
+    // End date field should not be present when current is true
+    expect(screen.queryByText(/End date\*/)).not.toBeInTheDocument();
+  });
+
+  it('should show month and year dropdowns for date fields', () => {
+    render(
+      <FormWrapper>
+        <UserVolunteeringExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Check for "January" placeholder in start date (startedAt)
+    expect(screen.getByText('January')).toBeInTheDocument();
+
+    // Check for "Month" placeholder in end date (endedAt) when current is false
+    expect(screen.getByText('Month')).toBeInTheDocument();
+
+    // Check for year placeholders (should have 2 - one for start date and one for end date)
+    const yearPlaceholders = screen.getAllByText('Year');
+    expect(yearPlaceholders).toHaveLength(2);
+  });
+
+  it('should validate volunteering-specific fields', async () => {
+    render(
+      <FormWrapper>
+        <UserVolunteeringExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Test role field accepts various volunteer roles
+    const roleInput = screen.getByPlaceholderText(
+      'Ex: Mentor, Fundraiser, Maintainer',
+    );
+    await userEvent.type(roleInput, 'Community Outreach Coordinator');
+    expect(roleInput).toHaveValue('Community Outreach Coordinator');
+
+    // Clear and test another role
+    await userEvent.clear(roleInput);
+    await userEvent.type(roleInput, 'Event Organizer');
+    expect(roleInput).toHaveValue('Event Organizer');
+
+    // Clear and test another role
+    await userEvent.clear(roleInput);
+    await userEvent.type(roleInput, 'Open Source Maintainer');
+    expect(roleInput).toHaveValue('Open Source Maintainer');
+  });
+
+  it('should maintain form state when switching current volunteer status', async () => {
+    render(
+      <FormWrapper>
+        <UserVolunteeringExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Fill in role field
+    const roleInput = screen.getByPlaceholderText(
+      'Ex: Mentor, Fundraiser, Maintainer',
+    );
+    await userEvent.type(roleInput, 'Youth Mentor');
+
+    // Toggle current volunteer role
+    const currentLabel = screen.getByText('Current volunteer role');
+    const currentSwitch = currentLabel
+      // eslint-disable-next-line testing-library/no-node-access
+      .closest('.flex-row')
+      // eslint-disable-next-line testing-library/no-node-access
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    await userEvent.click(currentSwitch);
+
+    // Check that role field retained its value
+    expect(roleInput).toHaveValue('Youth Mentor');
+    expect(currentSwitch).toBeChecked();
+
+    // Toggle back
+    await userEvent.click(currentSwitch);
+    expect(currentSwitch).not.toBeChecked();
+    expect(roleInput).toHaveValue('Youth Mentor');
+  });
+
+  it('should handle various volunteer role types', async () => {
+    render(
+      <FormWrapper>
+        <UserVolunteeringExperienceForm />
+      </FormWrapper>,
+    );
+
+    const roleInput = screen.getByPlaceholderText(
+      'Ex: Mentor, Fundraiser, Maintainer',
+    );
+
+    // Test with technical role
+    await userEvent.type(roleInput, 'Software Development Mentor');
+    expect(roleInput).toHaveValue('Software Development Mentor');
+
+    // Clear and test with fundraising role
+    await userEvent.clear(roleInput);
+    await userEvent.type(roleInput, 'Grant Writer & Fundraiser');
+    expect(roleInput).toHaveValue('Grant Writer & Fundraiser');
+
+    // Clear and test with administrative role
+    await userEvent.clear(roleInput);
+    await userEvent.type(roleInput, 'Board Member');
+    expect(roleInput).toHaveValue('Board Member');
+
+    // Clear and test with community role
+    await userEvent.clear(roleInput);
+    await userEvent.type(roleInput, 'Community Ambassador');
+    expect(roleInput).toHaveValue('Community Ambassador');
+  });
+
+  it('should properly order fields as Organization then Role', () => {
+    render(
+      <FormWrapper>
+        <UserVolunteeringExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Verify both fields are present
+    const orgLabel = screen.getByText('Organization*');
+    const roleLabel = screen.getByText('Role*');
+
+    expect(orgLabel).toBeInTheDocument();
+    expect(roleLabel).toBeInTheDocument();
+
+    // The form structure has Organization field first, then Role field
+    // This is verified by the order in the component itself
+    // Testing the actual order would require checking the DOM structure
+    // which is already covered by the component implementation
+  });
+
+  it('should have correct field names for form submission', () => {
+    render(
+      <FormWrapper>
+        <UserVolunteeringExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Check that the role field has the correct name attribute
+    const roleInput = screen.getByPlaceholderText(
+      'Ex: Mentor, Fundraiser, Maintainer',
+    );
+    expect(roleInput).toHaveAttribute('name', 'title');
+
+    // The organization field (ProfileCompany) should have customCompanyName as the name
+    // We can't directly test this as it's an autocomplete component,
+    // but we can verify the label is present
+    expect(screen.getByText('Organization*')).toBeInTheDocument();
+  });
+});
diff --git a/packages/shared/src/features/profile/components/experience/forms/UserVolunteeringExperienceForm.tsx b/packages/shared/src/features/profile/components/experience/forms/UserVolunteeringExperienceForm.tsx
new file mode 100644
index 0000000000..cfc7ab3cc2
--- /dev/null
+++ b/packages/shared/src/features/profile/components/experience/forms/UserVolunteeringExperienceForm.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import ControlledTextField from '../../../../../components/fields/ControlledTextField';
+import ProfileCompany from '../../ProfileCompany';
+import { HorizontalSeparator } from '../../../../../components/utilities';
+import {
+  Typography,
+  TypographyType,
+} from '../../../../../components/typography/Typography';
+import ProfileMonthYearSelect from '../../../../../components/profile/ProfileMonthYearSelect';
+import { AutocompleteType } from '../../../../../graphql/autocomplete';
+import { profileSecondaryFieldStyles } from '../../../common';
+import CurrentExperienceSwitch from '../../CurrentExperienceSwitch';
+
+const UserVolunteeringExperienceForm = () => {
+  const { watch } = useFormContext();
+  const current = watch('current');
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-2">
+        <ProfileCompany
+          name="customCompanyName"
+          label="Organization*"
+          type={AutocompleteType.Company}
+        />
+        <ControlledTextField
+          name="title"
+          label="Role*"
+          placeholder="Ex: Mentor, Fundraiser, Maintainer"
+          fieldType="secondary"
+          className={profileSecondaryFieldStyles}
+        />
+      </div>
+      <HorizontalSeparator />
+      <CurrentExperienceSwitch
+        label="Current volunteer role"
+        description="Check if you are still actively volunteering in this position."
+      />
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2">
+          <Typography type={TypographyType.Callout} bold>
+            Start date*
+          </Typography>
+          <ProfileMonthYearSelect
+            name="startedAt"
+            monthPlaceholder="January"
+            yearPlaceholder="Year"
+          />
+        </div>
+        {!current && (
+          <div className="flex flex-col gap-2">
+            <Typography type={TypographyType.Callout} bold>
+              End date*
+            </Typography>
+            <ProfileMonthYearSelect
+              name="endedAt"
+              monthPlaceholder="Month"
+              yearPlaceholder="Year"
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default UserVolunteeringExperienceForm;
diff --git a/packages/shared/src/features/profile/components/experience/forms/UserWorkExperienceForm.spec.tsx b/packages/shared/src/features/profile/components/experience/forms/UserWorkExperienceForm.spec.tsx
new file mode 100644
index 0000000000..093159e5d8
--- /dev/null
+++ b/packages/shared/src/features/profile/components/experience/forms/UserWorkExperienceForm.spec.tsx
@@ -0,0 +1,389 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FormProvider, useForm } from 'react-hook-form';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import UserWorkExperienceForm from './UserWorkExperienceForm';
+import type { TLocation } from '../../../../../graphql/autocomplete';
+
+// Only mock what's absolutely necessary - the AuthContext
+jest.mock('../../../../../contexts/AuthContext', () => ({
+  useAuthContext: () => ({
+    user: { id: '123', username: 'testuser' },
+    isLoggedIn: true,
+  }),
+}));
+
+// Mock the LogContext if needed
+jest.mock('../../../../../contexts/LogContext', () => ({
+  useLogContext: () => ({
+    logEvent: jest.fn(),
+  }),
+}));
+
+interface FormWrapperProps {
+  children: React.ReactNode;
+  defaultValues?: Record<string, unknown>;
+}
+
+const FormWrapper: React.FC<FormWrapperProps> = ({
+  children,
+  defaultValues = {},
+}) => {
+  const methods = useForm({
+    defaultValues: {
+      title: '',
+      employmentType: '',
+      customCompanyName: '',
+      current: false,
+      startedAt: null,
+      endedAt: null,
+      locationId: '',
+      locationType: '',
+      description: '',
+      skills: [],
+      ...defaultValues,
+    },
+  });
+
+  return (
+    <QueryClientProvider client={new QueryClient()}>
+      <FormProvider {...methods}>{children}</FormProvider>
+    </QueryClientProvider>
+  );
+};
+
+describe('UserWorkExperienceForm', () => {
+  it('should render all form fields', () => {
+    render(
+      <FormWrapper>
+        <UserWorkExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Check title input field is rendered
+    const titleInput = screen.getByPlaceholderText('Ex: Retail Sales Manager');
+    expect(titleInput).toBeInTheDocument();
+    expect(titleInput).toHaveAttribute('name', 'title');
+
+    // Check employment type select is rendered (it's a button that opens a dropdown)
+    const employmentButton = screen.getByRole('button', {
+      name: /please select/i,
+    });
+    expect(employmentButton).toBeInTheDocument();
+
+    // Check current position switch is rendered
+    const currentLabel = screen.getByText('Current position');
+    expect(currentLabel).toBeInTheDocument();
+    const currentDescription = screen.getByText(
+      'Check if this is your current role',
+    );
+    expect(currentDescription).toBeInTheDocument();
+
+    // Check description textarea
+    const descriptionTextarea = screen.getByPlaceholderText(
+      'List your major duties and successes, highlighting specific projects',
+    );
+    expect(descriptionTextarea).toBeInTheDocument();
+    expect(descriptionTextarea).toHaveAttribute('name', 'description');
+
+    // Verify key sections are rendered
+    expect(screen.getByText('Employment Type')).toBeInTheDocument();
+    expect(screen.getByText('Current position')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+
+    // Check date fields exist (look for the labels)
+    expect(screen.getByText('Start date*')).toBeInTheDocument();
+    expect(screen.getByText('End date*')).toBeInTheDocument();
+  });
+
+  it('should handle user interaction with form fields', async () => {
+    render(
+      <FormWrapper>
+        <UserWorkExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Type in title field
+    const titleInput = screen.getByPlaceholderText('Ex: Retail Sales Manager');
+    await userEvent.type(titleInput, 'Senior Software Engineer');
+    expect(titleInput).toHaveValue('Senior Software Engineer');
+
+    // Toggle current position - find the hidden checkbox by looking for the label
+    const currentLabel = screen.getByText('Current position');
+    const currentSwitch = currentLabel
+      // eslint-disable-next-line testing-library/no-node-access
+      .closest('.flex-row')
+      // eslint-disable-next-line testing-library/no-node-access
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    expect(currentSwitch).toBeDefined();
+    await userEvent.click(currentSwitch);
+    expect(currentSwitch).toBeChecked();
+
+    // Type in description
+    const descriptionTextarea = screen.getByPlaceholderText(
+      'List your major duties and successes, highlighting specific projects',
+    );
+    await userEvent.type(
+      descriptionTextarea,
+      'Led development of microservices',
+    );
+    expect(descriptionTextarea).toHaveValue('Led development of microservices');
+
+    // Test skills input
+    const skillsInput = screen.getByPlaceholderText('Search skills');
+    expect(skillsInput).toBeInTheDocument();
+    await userEvent.type(skillsInput, 'React');
+    expect(skillsInput).toHaveValue('React');
+  });
+
+  it('should render with location prop', () => {
+    const mockLocation: TLocation = {
+      id: 'loc-123',
+      city: 'San Francisco',
+      subdivision: 'CA',
+      country: 'USA',
+    };
+
+    render(
+      <FormWrapper>
+        <UserWorkExperienceForm location={mockLocation} />
+      </FormWrapper>,
+    );
+
+    // Verify form renders with location - the ProfileLocation component should handle it
+    expect(
+      screen.getByPlaceholderText('Ex: Retail Sales Manager'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+  });
+
+  it('should render with pre-filled data', () => {
+    const defaultValues = {
+      title: 'Software Engineer',
+      employmentType: 1,
+      customCompanyName: 'Example Corp',
+      current: true,
+      description: 'Building awesome applications',
+      skills: ['JavaScript', 'React'],
+    };
+
+    render(
+      <FormWrapper defaultValues={defaultValues}>
+        <UserWorkExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Check that form fields have the default values
+    const titleInput = screen.getByPlaceholderText('Ex: Retail Sales Manager');
+    expect(titleInput).toHaveValue('Software Engineer');
+
+    const descriptionTextarea = screen.getByPlaceholderText(
+      'List your major duties and successes, highlighting specific projects',
+    );
+    expect(descriptionTextarea).toHaveValue('Building awesome applications');
+
+    // Check current switch state through the label
+    const currentLabel = screen.getByText('Current position');
+    const currentSwitch = currentLabel
+      // eslint-disable-next-line testing-library/no-node-access
+      .closest('.flex-row')
+      // eslint-disable-next-line testing-library/no-node-access
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    expect(currentSwitch).toBeChecked();
+  });
+
+  it('should display all required field indicators', () => {
+    render(
+      <FormWrapper>
+        <UserWorkExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Check for required field indicators
+    expect(
+      screen.getByPlaceholderText('Ex: Retail Sales Manager'),
+    ).toBeInTheDocument();
+
+    // Check date fields have required indicators
+    expect(screen.getByText('Start date*')).toBeInTheDocument();
+    expect(screen.getByText('End date*')).toBeInTheDocument();
+  });
+
+  it('should render all form sections with proper structure', () => {
+    render(
+      <FormWrapper>
+        <UserWorkExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Verify all main input fields are present using proper queries
+    expect(
+      screen.getByPlaceholderText('Ex: Retail Sales Manager'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /please select/i }),
+    ).toBeInTheDocument();
+
+    // Check current position text is present
+    expect(screen.getByText('Current position')).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText(
+        'List your major duties and successes, highlighting specific projects',
+      ),
+    ).toBeInTheDocument();
+
+    // Check text content for sections
+    expect(screen.getByText('Employment Type')).toBeInTheDocument();
+    expect(screen.getByText('Current position')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+  });
+
+  it('should handle current position toggle affecting end date', async () => {
+    render(
+      <FormWrapper>
+        <UserWorkExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Find the current position switch
+    const currentLabel = screen.getByText('Current position');
+    const currentSwitch = currentLabel
+      // eslint-disable-next-line testing-library/no-node-access
+      .closest('.flex-row')
+      // eslint-disable-next-line testing-library/no-node-access
+      ?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+
+    // Initially not checked
+    expect(currentSwitch).not.toBeChecked();
+    // End date field should be present when current is false
+    expect(screen.getByText(/End date\*/)).toBeInTheDocument();
+
+    // When toggled to current
+    await userEvent.click(currentSwitch);
+    expect(currentSwitch).toBeChecked();
+
+    // End date field should not be present when current is true
+    expect(screen.queryByText(/End date\*/)).not.toBeInTheDocument();
+  });
+
+  it('should show character count for description field', async () => {
+    render(
+      <FormWrapper>
+        <UserWorkExperienceForm />
+      </FormWrapper>,
+    );
+
+    const descriptionTextarea = screen.getByPlaceholderText(
+      'List your major duties and successes, highlighting specific projects',
+    );
+
+    // Type some text and check if character count updates
+    await userEvent.type(descriptionTextarea, 'Test description');
+
+    // Look for character count display (e.g., "16/5000" or similar)
+    const characterCount = screen.getByText(/\/\d+/);
+    expect(characterCount).toBeInTheDocument();
+  });
+
+  it('should render skills input and verify skill rendering', async () => {
+    render(
+      <FormWrapper
+        defaultValues={{
+          skills: ['JavaScript', 'TypeScript', 'React'],
+        }}
+      >
+        <UserWorkExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Check Skills label is rendered
+    expect(screen.getByText('Skills')).toBeInTheDocument();
+
+    // Check skills search input is rendered
+    const skillsInput = screen.getByPlaceholderText('Search skills');
+    expect(skillsInput).toBeInTheDocument();
+
+    // Check skills hint is rendered
+    expect(
+      screen.getByText(
+        'Add commas (,) to add multiple skills. Press Enter to submit them.',
+      ),
+    ).toBeInTheDocument();
+
+    // Check that skills from defaultValues are properly rendered as tag buttons
+    expect(
+      screen.getByRole('button', { name: /JavaScript/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /TypeScript/i }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /React/i })).toBeInTheDocument();
+
+    // Test that we can type in the skills input
+    await userEvent.type(skillsInput, 'Vue');
+    expect(skillsInput).toHaveValue('Vue');
+
+    // Test typing comma-separated values
+    await userEvent.clear(skillsInput);
+    await userEvent.type(skillsInput, 'Angular,Node.js');
+    expect(skillsInput).toHaveValue('Angular,Node.js');
+
+    // Verify input functionality
+    await userEvent.clear(skillsInput);
+    expect(skillsInput).toHaveValue('');
+  });
+
+  it('should render all skills-related elements', () => {
+    render(
+      <FormWrapper>
+        <UserWorkExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Check Skills section is rendered
+    expect(screen.getByText('Skills')).toBeInTheDocument();
+
+    // Check search input with correct placeholder
+    const skillsInput = screen.getByPlaceholderText('Search skills');
+    expect(skillsInput).toBeInTheDocument();
+    // Check that the id starts with 'skills' (React may append instance keys)
+    expect(skillsInput.id).toMatch(/^skills/);
+
+    // Check the hint text is displayed
+    expect(
+      screen.getByText(
+        'Add commas (,) to add multiple skills. Press Enter to submit them.',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('should handle skills with pre-filled data', () => {
+    const defaultValues = {
+      title: 'Software Engineer',
+      skills: ['React', 'Node.js', 'PostgreSQL'],
+    };
+
+    render(
+      <FormWrapper defaultValues={defaultValues}>
+        <UserWorkExperienceForm />
+      </FormWrapper>,
+    );
+
+    // Skills section should be present
+    expect(screen.getByText('Skills')).toBeInTheDocument();
+
+    // Skills input should be present
+    const skillsInput = screen.getByPlaceholderText('Search skills');
+    expect(skillsInput).toBeInTheDocument();
+
+    // Pre-filled skills should be rendered as tag buttons
+    expect(screen.getByRole('button', { name: /React/i })).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /Node\.js/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /PostgreSQL/i }),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/packages/shared/src/features/profile/components/experience/forms/UserWorkExperienceForm.tsx b/packages/shared/src/features/profile/components/experience/forms/UserWorkExperienceForm.tsx
new file mode 100644
index 0000000000..aed55a60ef
--- /dev/null
+++ b/packages/shared/src/features/profile/components/experience/forms/UserWorkExperienceForm.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import ControlledTextField from '../../../../../components/fields/ControlledTextField';
+import EmploymentTypeSelect from '../../../../../components/profile/EmploymentTypeSelect';
+import ProfileCompany from '../../ProfileCompany';
+import { HorizontalSeparator } from '../../../../../components/utilities';
+import {
+  Typography,
+  TypographyType,
+} from '../../../../../components/typography/Typography';
+import ProfileMonthYearSelect from '../../../../../components/profile/ProfileMonthYearSelect';
+import ProfileLocation from '../../../../../components/profile/ProfileLocation';
+import ControlledTextarea from '../../../../../components/fields/ControlledTextarea';
+import ProfileSkills from '../../ProfileSkills';
+import type { TLocation } from '../../../../../graphql/autocomplete';
+import { profileSecondaryFieldStyles } from '../../../common';
+import CurrentExperienceSwitch from '../../CurrentExperienceSwitch';
+
+const UserWorkExperienceForm = ({ location }: { location?: TLocation }) => {
+  const { watch } = useFormContext();
+  const current = watch('current');
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-2">
+        <ControlledTextField
+          name="title"
+          label="Job Title*"
+          placeholder="Ex: Retail Sales Manager"
+          fieldType="secondary"
+          className={profileSecondaryFieldStyles}
+        />
+        <EmploymentTypeSelect
+          name="employmentType"
+          label="Employment Type"
+          placeholder="Please select"
+        />
+        <ProfileCompany
+          label="Company or organization*"
+          name="customCompanyName"
+        />
+      </div>
+      <HorizontalSeparator />
+      <CurrentExperienceSwitch
+        label="Current position"
+        description="Check if this is your current role"
+      />
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2">
+          <Typography type={TypographyType.Callout} bold>
+            Start date*
+          </Typography>
+          <ProfileMonthYearSelect
+            name="startedAt"
+            monthPlaceholder="January"
+            yearPlaceholder="Year"
+          />
+        </div>
+        {!current && (
+          <div className="flex flex-col gap-2">
+            <Typography type={TypographyType.Callout} bold>
+              End date*
+            </Typography>
+            <ProfileMonthYearSelect
+              name="endedAt"
+              monthPlaceholder="Month"
+              yearPlaceholder="Year"
+            />
+          </div>
+        )}
+      </div>
+      <HorizontalSeparator />
+      <div className=" flex flex-col gap-2">
+        <div className="flex flex-col gap-2">
+          <ProfileLocation
+            locationName="externalLocationId"
+            typeName="locationType"
+            defaultValue={location}
+          />
+        </div>
+        <div className="flex flex-col gap-2">
+          <Typography type={TypographyType.Callout} bold>
+            Description
+          </Typography>
+          <ControlledTextarea
+            name="description"
+            label="List your major duties and successes, highlighting specific projects"
+            maxLength={1000}
+          />
+        </div>
+        <ProfileSkills name="skills" />
+      </div>
+    </div>
+  );
+};
+
+export default UserWorkExperienceForm;
diff --git a/packages/shared/src/features/profile/hooks/useProfileExperiences.ts b/packages/shared/src/features/profile/hooks/useProfileExperiences.ts
new file mode 100644
index 0000000000..d8e7bc9b9e
--- /dev/null
+++ b/packages/shared/src/features/profile/hooks/useProfileExperiences.ts
@@ -0,0 +1,43 @@
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import type { PublicProfile } from '../../../lib/user';
+import { getUserProfileExperiences } from '../../../graphql/user/profile';
+import { generateQueryKey, RequestKey, StaleTime } from '../../../lib/query';
+
+export function useProfileExperiences(user: PublicProfile, first?: number) {
+  const queryKey = generateQueryKey(
+    RequestKey.UserExperience,
+    user,
+    'profile',
+    { first },
+  );
+
+  const query = useQuery({
+    queryKey,
+    queryFn: () => getUserProfileExperiences(user.id, first),
+    staleTime: StaleTime.Default,
+  });
+
+  const { work, education, cert, project, opensource, volunteering } = useMemo(
+    () => ({
+      work: query.data?.work?.edges?.map(({ node }) => node),
+      education: query.data?.education?.edges?.map(({ node }) => node),
+      cert: query.data?.certification?.edges?.map(({ node }) => node),
+      project: query.data?.project?.edges?.map(({ node }) => node),
+      opensource: query.data?.opensource?.edges?.map(({ node }) => node),
+      volunteering: query.data?.volunteering?.edges?.map(({ node }) => node),
+    }),
+    [query.data],
+  );
+
+  return {
+    ...query,
+    work,
+    education,
+    cert,
+    project,
+    opensource,
+    volunteering,
+    queryKey, // Export for potential invalidations
+  };
+}
diff --git a/packages/shared/src/features/profile/hooks/useUserExperiencesByType.ts b/packages/shared/src/features/profile/hooks/useUserExperiencesByType.ts
new file mode 100644
index 0000000000..2b23918817
--- /dev/null
+++ b/packages/shared/src/features/profile/hooks/useUserExperiencesByType.ts
@@ -0,0 +1,37 @@
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { getUserExperiencesByType } from '../../../graphql/user/profile';
+import { generateQueryKey, RequestKey, StaleTime } from '../../../lib/query';
+import type {
+  UserExperience,
+  UserExperienceType,
+} from '../../../graphql/user/profile';
+
+export function useUserExperiencesByType(
+  type: UserExperienceType,
+  userId: string,
+) {
+  const queryKey = generateQueryKey(
+    RequestKey.UserExperience,
+    { id: userId },
+    type,
+    'settings',
+  );
+
+  const query = useQuery({
+    queryKey,
+    queryFn: () => getUserExperiencesByType(userId, type),
+    staleTime: StaleTime.Default,
+  });
+
+  const experiences: UserExperience[] | undefined = useMemo(
+    () => query.data?.edges?.map(({ node }) => node),
+    [query.data],
+  );
+
+  return {
+    ...query,
+    experiences,
+    queryKey,
+  };
+}
diff --git a/packages/shared/src/graphql/actions.ts b/packages/shared/src/graphql/actions.ts
index 909f69e65c..251e3953d7 100644
--- a/packages/shared/src/graphql/actions.ts
+++ b/packages/shared/src/graphql/actions.ts
@@ -53,6 +53,7 @@ export enum ActionType {
   OpportunityInitialView = 'opportunity_initial_view',
   UserCandidatePreferencesSaved = 'user_candidate_preferences_saved',
   UserPostInOpenSquadWarningSeen = 'user_post_in_open_squad_warning_seen',
+  ProfileCompleted = 'profile_completed',
   ClickedOpportunityNavigation = 'click_opportunity_navigation',
 }
 
diff --git a/packages/shared/src/graphql/autocomplete.ts b/packages/shared/src/graphql/autocomplete.ts
new file mode 100644
index 0000000000..20fedb39cf
--- /dev/null
+++ b/packages/shared/src/graphql/autocomplete.ts
@@ -0,0 +1,58 @@
+import { gql } from 'graphql-request';
+import { gqlClient } from './common';
+import type { Company } from '../lib/userCompany';
+
+export type TLocation = {
+  id: string;
+  city?: string;
+  country: string;
+  subdivision?: string;
+  externalId?: string;
+};
+
+export enum AutocompleteType {
+  Location = 'location',
+  Company = 'company',
+  School = 'school',
+}
+
+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;
+};
+
+const AUTOCOMPLETE_COMPANY_QUERY = gql`
+  query AutocompleteCompany($query: String!, $limit: Int, $type: CompanyType) {
+    autocompleteCompany(query: $query, limit: $limit, type: $type) {
+      id
+      name
+      image
+    }
+  }
+`;
+
+export const getAutocompleteCompanies = async (
+  query: string,
+  type: AutocompleteType = AutocompleteType.Company,
+  limit = 10,
+): Promise<Company[]> => {
+  const res = await gqlClient.request(AUTOCOMPLETE_COMPANY_QUERY, {
+    query,
+    limit,
+    type,
+  });
+  return res.autocompleteCompany;
+};
diff --git a/packages/shared/src/graphql/user/profile.ts b/packages/shared/src/graphql/user/profile.ts
new file mode 100644
index 0000000000..351be24626
--- /dev/null
+++ b/packages/shared/src/graphql/user/profile.ts
@@ -0,0 +1,343 @@
+import { gql } from 'graphql-request';
+import type { Connection } from '../common';
+import { gqlClient } from '../common';
+import type { TLocation } from '../autocomplete';
+import type { Company } from '../../lib/userCompany';
+import { excludeProperties } from '../../lib/utils';
+
+export const profileExperiencesLimit = 3;
+
+type UserGeneralExperience = UserExperience & {
+  skills?: UserSkill[];
+  location?: TLocation;
+};
+
+const excludedProperties = [
+  'startedAtYear',
+  'startedAtMonth',
+  'endedAtYear',
+  'endedAtMonth',
+  'company',
+  'current',
+  'createdAt',
+  'id',
+  'location',
+  'company',
+];
+
+const USER_EXPERIENCE_FRAGMENT = gql`
+  fragment UserExperienceFragment on UserExperience {
+    id
+    type
+    title
+    subtitle
+    grade
+    description
+    createdAt
+    startedAt
+    endedAt
+    customCompanyName
+    employmentType
+    locationType
+    url
+    location {
+      id
+      city
+      subdivision
+      country
+      externalId
+    }
+    skills {
+      value
+    }
+    company {
+      id
+      name
+      image
+    }
+  }
+`;
+
+const getExperiencesProps = (props: string) => `
+  edges {
+    node {
+      ...UserExperienceFragment
+      ${props}
+    }
+  }
+  pageInfo {
+    hasNextPage
+    endCursor
+  }
+`;
+
+const workProps = `
+  employmentType
+  locationType
+  location {
+    id
+    city
+    subdivision
+    country
+    externalId
+  }
+  skills {
+    value
+  }
+`;
+
+const USER_EXPERIENCE_BY_ID_QUERY = gql`
+  query UserExperienceById($id: ID!) {
+    userExperienceById(id: $id) {
+      ...UserExperienceFragment
+    }
+  }
+  ${USER_EXPERIENCE_FRAGMENT}
+`;
+
+export const getUserExperienceById = async (
+  id: string,
+): Promise<UserGeneralExperience | null> => {
+  const result = await gqlClient.request(USER_EXPERIENCE_BY_ID_QUERY, { id });
+  return result.userExperienceById;
+};
+
+const USER_PROFILE_EXPERIENCES_QUERY = gql`
+  query UserExperiences($userId: ID!, $first: Int = 50) {
+    work: userExperiences(userId: $userId, type: work, first: $first) {
+      ${getExperiencesProps(workProps)}
+    }
+    education: userExperiences(userId: $userId, type: education, first: $first) {
+      ${getExperiencesProps(`subtitle`)}
+    }
+    project: userExperiences(userId: $userId, type: project, first: $first) {
+      ${getExperiencesProps(`url`)}
+    }
+    opensource: userExperiences(userId: $userId, type: opensource, first: $first) {
+      ${getExperiencesProps(`url`)}
+    }
+    volunteering: userExperiences(userId: $userId, type: volunteering, first: $first) {
+      ${getExperiencesProps(`url`)}
+    }
+    certification: userExperiences(userId: $userId, type: certification, first: $first) {
+      ${getExperiencesProps(`
+        externalReferenceId
+        url
+      `)}
+    }
+  }
+  ${USER_EXPERIENCE_FRAGMENT}
+`;
+
+const REMOVE_USER_EXPERIENCE = gql`
+  mutation RemoveUserExperience($id: ID!) {
+    removeUserExperience(id: $id) {
+      _
+    }
+  }
+`;
+
+export const removeUserExperience = async (id: string) => {
+  const result = await gqlClient.request(REMOVE_USER_EXPERIENCE, { id });
+  return result;
+};
+
+export enum UserExperienceType {
+  Work = 'work',
+  Education = 'education',
+  Project = 'project',
+  Certification = 'certification',
+  Volunteering = 'volunteering',
+  OpenSource = 'opensource',
+}
+
+export interface UserExperience {
+  id: string;
+  type: UserExperienceType;
+  title: string;
+  description?: string | null;
+  createdAt: string;
+  startedAt?: string | null;
+  endedAt?: string | null;
+  company?: Company | null;
+  customCompanyName?: string | null;
+  subtitle?: string | null;
+  url?: string | null;
+}
+
+interface UserSkill {
+  value: string;
+}
+
+export interface UserExperienceWork extends UserExperience {
+  type: UserExperienceType.Work;
+  employmentType: number | null;
+  locationType: number | null;
+  location: TLocation | null;
+  skills: UserSkill[];
+  verified: boolean | null;
+}
+
+export interface UserExperienceEducation extends UserExperience {
+  type: UserExperienceType.Education;
+  subtitle: string | null;
+}
+
+export interface UserExperienceProject extends UserExperience {
+  type: UserExperienceType.Project;
+  url: string | null;
+}
+
+export interface UserExperienceCertification extends UserExperience {
+  type: UserExperienceType.Certification;
+  externalReferenceId: string | null;
+  url: string | null;
+}
+
+export interface UserProfileExperienceData {
+  work: Connection<UserExperienceWork>;
+  education: Connection<UserExperienceEducation>;
+  project: Connection<UserExperienceProject>;
+  certification: Connection<UserExperienceCertification>;
+  opensource: Connection<UserExperienceProject>;
+  volunteering: Connection<UserExperienceProject>;
+}
+
+export const getUserProfileExperiences = async (
+  userId: string,
+  first?: number,
+): Promise<UserProfileExperienceData> => {
+  const result = await gqlClient.request<UserProfileExperienceData>(
+    USER_PROFILE_EXPERIENCES_QUERY,
+    { userId, first },
+  );
+
+  return result;
+};
+
+const USER_EXPERIENCES_BY_TYPE_QUERY = gql`
+  query UserExperiencesByType(
+    $userId: ID!
+    $type: UserExperienceType!
+    $first: Int
+  ) {
+    userExperiences(userId: $userId, type: $type, first: $first) {
+      edges {
+        node {
+          ...UserExperienceFragment
+        }
+      }
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
+    }
+  }
+  ${USER_EXPERIENCE_FRAGMENT}
+`;
+
+export const getUserExperiencesByType = async (
+  userId: string,
+  type: UserExperienceType,
+  first = 100,
+): Promise<Connection<UserExperience>> => {
+  const result = await gqlClient.request<{
+    userExperiences: Connection<UserExperience>;
+  }>(USER_EXPERIENCES_BY_TYPE_QUERY, { userId, type, first });
+
+  return result.userExperiences;
+};
+
+const UPSERT_USER_GENERAL_EXPERIENCE = gql`
+  mutation UpsertUserGeneralExperience(
+    $input: UserGeneralExperienceInput!
+    $id: ID
+  ) {
+    upsertUserGeneralExperience(input: $input, id: $id) {
+      id
+      type
+      title
+      subtitle
+      description
+      startedAt
+      endedAt
+      company {
+        id
+        name
+      }
+      customCompanyName
+      url
+      grade
+      externalReferenceId
+      createdAt
+    }
+  }
+`;
+
+export const upsertUserGeneralExperience = async (
+  input: UserExperience,
+  id?: string,
+) => {
+  const cleanedInput = excludeProperties(input, [
+    ...excludedProperties,
+    'skills',
+    'locationId',
+    'locationType',
+    'employmentType',
+    'externalLocationId',
+  ]);
+  const result = await gqlClient.request(UPSERT_USER_GENERAL_EXPERIENCE, {
+    input: cleanedInput,
+    id,
+  });
+  return result;
+};
+
+const UPSERT_USER_WORK_EXPERIENCE = gql`
+  mutation UpsertUserWorkExperience($input: UserExperienceWorkInput!, $id: ID) {
+    upsertUserWorkExperience(input: $input, id: $id) {
+      id
+      type
+      title
+      subtitle
+      description
+      startedAt
+      endedAt
+      company {
+        id
+        name
+      }
+      customCompanyName
+      employmentType
+      location {
+        id
+        city
+        subdivision
+        country
+      }
+      locationType
+      skills {
+        value
+      }
+      createdAt
+    }
+  }
+`;
+
+export const upsertUserWorkExperience = async (
+  input: UserExperienceWork,
+  id?: string,
+) => {
+  const cleanedInput = excludeProperties(input, [
+    ...excludedProperties,
+    'url',
+    'subtitle',
+    'grade',
+  ]);
+
+  const result = await gqlClient.request(UPSERT_USER_WORK_EXPERIENCE, {
+    input: cleanedInput,
+    id,
+  });
+  return result;
+};
diff --git a/packages/shared/src/graphql/users.ts b/packages/shared/src/graphql/users.ts
index 5cc4760e0c..8f5f3eb5d3 100644
--- a/packages/shared/src/graphql/users.ts
+++ b/packages/shared/src/graphql/users.ts
@@ -62,6 +62,12 @@ export const USER_BY_ID_STATIC_FIELDS_QUERY = `
       createdAt
       readmeHtml
       isPlus
+      experienceLevel
+      location {
+        city
+        subdivision
+        country
+      }
       companies {
         name
         image
@@ -115,7 +121,7 @@ export const PROFILE_V2_EXTRA_QUERY = gql`
     userStats(id: $id) {
       upvotes: numPostUpvotes
       views: numPostViews
-      numFollowers,
+      numFollowers
       numFollowing
     }
     ${publicSourceMemberships}
@@ -304,6 +310,42 @@ export const UPDATE_USER_PROFILE_MUTATION = gql`
       username
       permalink
       bio
+      readme
+      twitter
+      github
+      hashnode
+      roadmap
+      threads
+      codepen
+      reddit
+      stackoverflow
+      youtube
+      linkedin
+      mastodon
+      bluesky
+      createdAt
+      infoConfirmed
+      timezone
+      experienceLevel
+      language
+    }
+  }
+`;
+
+export const UPDATE_USER_INFO_MUTATION = gql`
+  mutation UpdateUserInfo(
+    $data: UpdateUserInfoInput
+    $upload: Upload
+    $coverUpload: Upload
+  ) {
+    updateUserInfo(data: $data, upload: $upload, coverUpload: $coverUpload) {
+      id
+      name
+      image
+      username
+      permalink
+      bio
+      readme
       twitter
       github
       hashnode
diff --git a/packages/shared/src/hooks/profile/useActivityTimeFilter.ts b/packages/shared/src/hooks/profile/useActivityTimeFilter.ts
deleted file mode 100644
index 43672853b2..0000000000
--- a/packages/shared/src/hooks/profile/useActivityTimeFilter.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useContext, useMemo, useState } from 'react';
-import {
-  addDays,
-  endOfYear,
-  startOfTomorrow,
-  subDays,
-  subMonths,
-  subYears,
-} from 'date-fns';
-import { useViewSize, ViewSize } from '../useViewSize';
-import SettingsContext from '../../contexts/SettingsContext';
-
-const BASE_YEAR = 2018;
-const currentYear = new Date().getFullYear();
-const dropdownOptions = [
-  'Last year',
-  ...Array.from(new Array(currentYear - BASE_YEAR + 1), (_, i) =>
-    (currentYear - i).toString(),
-  ),
-];
-
-type UseActivityTimeFilterRet = {
-  selectedHistoryYear: number;
-  setSelectedHistoryYear: (year: number) => void;
-  before: Date;
-  after: Date;
-  yearOptions: string[];
-  fullHistory: boolean;
-};
-
-export function useActivityTimeFilter(): UseActivityTimeFilterRet {
-  const laptop = useViewSize(ViewSize.Laptop);
-  const laptopL = useViewSize(ViewSize.LaptopL);
-  const { sidebarExpanded } = useContext(SettingsContext);
-  const fullHistory = (laptop && !sidebarExpanded) || laptopL;
-  const [selectedHistoryYear, setSelectedHistoryYear] = useState(0);
-  const [before, after] = useMemo<[Date, Date]>(() => {
-    if (!fullHistory) {
-      const start = startOfTomorrow();
-      return [start, subMonths(subDays(start, 2), 6)];
-    }
-    if (!selectedHistoryYear) {
-      const start = startOfTomorrow();
-      return [start, subYears(subDays(start, 2), 1)];
-    }
-    const selected = parseInt(dropdownOptions[selectedHistoryYear], 10);
-    const startYear = new Date(selected, 0, 1);
-
-    return [addDays(endOfYear(startYear), 1), startYear];
-  }, [fullHistory, selectedHistoryYear]);
-
-  return {
-    selectedHistoryYear,
-    setSelectedHistoryYear,
-    before,
-    after,
-    yearOptions: dropdownOptions,
-    fullHistory,
-  };
-}
diff --git a/packages/shared/src/hooks/profile/useProfileReadme.ts b/packages/shared/src/hooks/profile/useProfileReadme.ts
deleted file mode 100644
index 6fee85d688..0000000000
--- a/packages/shared/src/hooks/profile/useProfileReadme.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import type { ClientError } from 'graphql-request';
-import { useState } from 'react';
-import { generateQueryKey, RequestKey } from '../../lib/query';
-import { UPDATE_README_MUTATION, USER_README_QUERY } from '../../graphql/users';
-import type { PublicProfile } from '../../lib/user';
-import { useToastNotification } from '../useToastNotification';
-import { gqlClient } from '../../graphql/common';
-
-export type UseProfileReadmeRet = {
-  readme?: string;
-  isLoadingReadme: boolean;
-  editMode: boolean;
-  setEditMode: (editMode: boolean) => void;
-  updateReadme: (content: string) => Promise<unknown>;
-  submitting: boolean;
-};
-
-export function useProfileReadme(user: PublicProfile): UseProfileReadmeRet {
-  const { displayToast } = useToastNotification();
-  const client = useQueryClient();
-  const [editMode, setEditMode] = useState(false);
-
-  const queryKey = generateQueryKey(RequestKey.Readme, user);
-  const { data: remoteReadme, isLoading } = useQuery<{
-    user: { readme: string };
-  }>({
-    queryKey,
-    queryFn: () =>
-      gqlClient.request(USER_README_QUERY, {
-        id: user.id,
-      }),
-    enabled: editMode,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-    refetchOnMount: false,
-  });
-
-  const { mutateAsync: updateReadme, isPending: submitting } = useMutation<
-    { updateReadme: { readmeHtml: string } },
-    unknown,
-    string
-  >({
-    mutationFn: (content) =>
-      gqlClient.request(UPDATE_README_MUTATION, { content }),
-
-    onSuccess: async () => {
-      setEditMode(false);
-      await client.invalidateQueries({ queryKey });
-      await client.invalidateQueries({
-        queryKey: generateQueryKey(RequestKey.Profile, user),
-      });
-    },
-
-    onError: (err) => {
-      const clientError = err as ClientError;
-      const message = clientError?.response?.errors?.[0]?.message;
-      if (!message) {
-        return;
-      }
-
-      displayToast(message);
-    },
-  });
-
-  return {
-    readme: remoteReadme?.user.readme,
-    isLoadingReadme: isLoading,
-    editMode,
-    setEditMode,
-    updateReadme,
-    submitting,
-  };
-}
diff --git a/packages/shared/src/hooks/source/useSources.ts b/packages/shared/src/hooks/source/useSources.ts
index f0ad3d5c75..be451e3a1a 100644
--- a/packages/shared/src/hooks/source/useSources.ts
+++ b/packages/shared/src/hooks/source/useSources.ts
@@ -4,7 +4,7 @@ import type {
 } from '@tanstack/react-query';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { SOURCES_QUERY } from '../../graphql/squads';
-import type { Connection } from '../../graphql/common';
+import type { Connection, Edge } from '../../graphql/common';
 import { gqlClient } from '../../graphql/common';
 import {
   generateQueryKey,
@@ -35,6 +35,18 @@ interface UseSourcesProps {
   isEnabled?: boolean;
 }
 
+export function getFlatteredNodes<T extends Source | Squad>({
+  data,
+}: Pick<UseSources<T>['result'], 'data'>): Edge<T>[] {
+  return data?.pages.flatMap((page) => page.sources.edges) ?? [];
+}
+
+export function getFlatteredSources<T extends Source | Squad>({
+  data,
+}: Pick<UseSources<T>['result'], 'data'>): T[] {
+  return getFlatteredNodes<T>({ data }).map((edge) => edge.node);
+}
+
 export const useSources = <T extends Source | Squad>({
   query = {},
   isEnabled = true,
diff --git a/packages/shared/src/hooks/useControlledImageUpload.ts b/packages/shared/src/hooks/useControlledImageUpload.ts
new file mode 100644
index 0000000000..a34346423d
--- /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/useDirtyForm.spec.tsx b/packages/shared/src/hooks/useDirtyForm.spec.tsx
new file mode 100644
index 0000000000..473ec09840
--- /dev/null
+++ b/packages/shared/src/hooks/useDirtyForm.spec.tsx
@@ -0,0 +1,402 @@
+import { renderHook, act } from '@testing-library/react';
+import type { UseFormReturn } from 'react-hook-form';
+import { useRouter } from 'next/router';
+import type { NextRouter } from 'next/router';
+import { mocked } from 'ts-jest/utils';
+import { useDirtyForm } from './useDirtyForm';
+import { useLazyModal } from './useLazyModal';
+import { LazyModal } from '../components/modals/common/types';
+
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(),
+}));
+
+jest.mock('./useLazyModal', () => ({
+  useLazyModal: jest.fn(),
+}));
+
+describe('useDirtyForm', () => {
+  let mockRouter: Partial<NextRouter>;
+  let mockOpenModal: jest.Mock;
+  let mockFormMethods: UseFormReturn;
+  let mockOnSave: jest.Mock;
+  let mockOnDiscard: jest.Mock;
+  let routerEventHandlers: Record<string, (url: string) => void>;
+  let windowEventHandlers: Map<string, EventListener>;
+
+  beforeEach(() => {
+    routerEventHandlers = {};
+    windowEventHandlers = new Map();
+
+    window.addEventListener = jest.fn(
+      (event: string, handler: EventListener) => {
+        windowEventHandlers.set(event, handler);
+      },
+    );
+
+    window.removeEventListener = jest.fn((event: string) => {
+      windowEventHandlers.delete(event);
+    });
+
+    mockRouter = {
+      asPath: '/current-path',
+      push: jest.fn(),
+      events: {
+        on: jest.fn((event: string, handler: (url: string) => void) => {
+          routerEventHandlers[event] = handler;
+        }),
+        off: jest.fn((event: string) => {
+          delete routerEventHandlers[event];
+        }),
+        emit: jest.fn(),
+      },
+    };
+
+    mocked(useRouter).mockReturnValue(mockRouter as NextRouter);
+
+    mockOpenModal = jest.fn();
+    mocked(useLazyModal).mockReturnValue({
+      openModal: mockOpenModal,
+    } as ReturnType<typeof useLazyModal>);
+
+    mockFormMethods = {
+      formState: {
+        isDirty: false,
+      },
+    } as unknown as UseFormReturn;
+
+    mockOnSave = jest.fn();
+    mockOnDiscard = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('navigation prevention', () => {
+    it('should not prevent navigation when form is clean', () => {
+      renderHook(() =>
+        useDirtyForm(mockFormMethods.formState.isDirty, {
+          onSave: mockOnSave,
+          onDiscard: mockOnDiscard,
+        }),
+      );
+
+      act(() => {
+        routerEventHandlers.routeChangeStart('/new-path');
+      });
+
+      expect(mockOpenModal).not.toHaveBeenCalled();
+      expect(mockRouter.events.emit).not.toHaveBeenCalled();
+    });
+
+    it('should prevent navigation when form is dirty', () => {
+      mockFormMethods.formState.isDirty = true;
+
+      renderHook(() =>
+        useDirtyForm(mockFormMethods.formState.isDirty, {
+          onSave: mockOnSave,
+          onDiscard: mockOnDiscard,
+        }),
+      );
+
+      expect(() => {
+        act(() => {
+          routerEventHandlers.routeChangeStart('/new-path');
+        });
+      }).toThrow('Route change aborted.');
+
+      expect(mockOpenModal).toHaveBeenCalledWith({
+        type: LazyModal.DirtyForm,
+        props: {
+          onDiscard: expect.any(Function),
+          onSave: mockOnSave,
+        },
+      });
+      expect(mockRouter.events.emit).toHaveBeenCalledWith('routeChangeError');
+    });
+
+    it('should allow navigation when allowNavigation is called', () => {
+      mockFormMethods.formState.isDirty = true;
+
+      const { result } = renderHook(() =>
+        useDirtyForm(mockFormMethods.formState.isDirty, {
+          onSave: mockOnSave,
+          onDiscard: mockOnDiscard,
+        }),
+      );
+
+      act(() => {
+        result.current.allowNavigation();
+      });
+
+      act(() => {
+        routerEventHandlers.routeChangeStart('/new-path');
+      });
+
+      expect(mockOpenModal).not.toHaveBeenCalled();
+      expect(mockRouter.events.emit).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('pending navigation', () => {
+    it('should store pending URL when navigation is prevented', () => {
+      mockFormMethods.formState.isDirty = true;
+
+      const { result } = renderHook(() =>
+        useDirtyForm(mockFormMethods, {
+          onSave: mockOnSave,
+          onDiscard: mockOnDiscard,
+        }),
+      );
+
+      expect(() => {
+        act(() => {
+          routerEventHandlers.routeChangeStart('/new-path');
+        });
+      }).toThrow('Route change aborted.');
+
+      expect(result.current.hasPendingNavigation()).toBe(true);
+    });
+
+    it('should navigate to pending URL when navigateToPending is called', () => {
+      mockFormMethods.formState.isDirty = true;
+
+      const { result } = renderHook(() =>
+        useDirtyForm(mockFormMethods.formState.isDirty, {
+          onSave: mockOnSave,
+          onDiscard: mockOnDiscard,
+        }),
+      );
+
+      expect(() => {
+        act(() => {
+          routerEventHandlers.routeChangeStart('/new-path');
+        });
+      }).toThrow('Route change aborted.');
+
+      act(() => {
+        result.current.navigateToPending();
+      });
+
+      expect(mockRouter.push).toHaveBeenCalledWith('/new-path');
+      expect(result.current.hasPendingNavigation()).toBe(false);
+    });
+  });
+
+  describe('discard functionality', () => {
+    it('should call onDiscard when handleDiscard is invoked from modal', () => {
+      mockFormMethods.formState.isDirty = true;
+
+      renderHook(() =>
+        useDirtyForm(mockFormMethods.formState.isDirty, {
+          onSave: mockOnSave,
+          onDiscard: mockOnDiscard,
+        }),
+      );
+
+      expect(() => {
+        act(() => {
+          routerEventHandlers.routeChangeStart('/new-path');
+        });
+      }).toThrow('Route change aborted.');
+
+      const modalProps = mockOpenModal.mock.calls[0][0].props;
+
+      act(() => {
+        modalProps.onDiscard();
+      });
+
+      expect(mockOnDiscard).toHaveBeenCalled();
+      expect(mockRouter.push).toHaveBeenCalledWith('/new-path');
+    });
+
+    it('should navigate to pending URL after discard', () => {
+      mockFormMethods.formState.isDirty = true;
+
+      const { result } = renderHook(() =>
+        useDirtyForm(mockFormMethods.formState.isDirty, {
+          onSave: mockOnSave,
+          onDiscard: mockOnDiscard,
+        }),
+      );
+
+      expect(() => {
+        act(() => {
+          routerEventHandlers.routeChangeStart('/new-path');
+        });
+      }).toThrow('Route change aborted.');
+
+      const modalProps = mockOpenModal.mock.calls[0][0].props;
+
+      act(() => {
+        modalProps.onDiscard();
+      });
+
+      expect(mockRouter.push).toHaveBeenCalledWith('/new-path');
+      expect(result.current.hasPendingNavigation()).toBe(false);
+    });
+  });
+
+  describe('beforeunload event', () => {
+    it('should prevent page unload when form is dirty', () => {
+      mockFormMethods.formState.isDirty = true;
+
+      renderHook(() =>
+        useDirtyForm(mockFormMethods.formState.isDirty, {
+          onSave: mockOnSave,
+          onDiscard: mockOnDiscard,
+        }),
+      );
+
+      const event = {
+        preventDefault: jest.fn(),
+        returnValue: undefined as string | undefined,
+      } as unknown as BeforeUnloadEvent;
+
+      act(() => {
+        windowEventHandlers.get('beforeunload')?.(event);
+      });
+
+      expect(event.preventDefault).toHaveBeenCalled();
+      expect(event.returnValue).toBe('');
+    });
+
+    it('should not prevent page unload when form is clean', () => {
+      mockFormMethods.formState.isDirty = false;
+
+      renderHook(() =>
+        useDirtyForm(mockFormMethods.formState.isDirty, {
+          onSave: mockOnSave,
+          onDiscard: mockOnDiscard,
+        }),
+      );
+
+      const event = {
+        preventDefault: jest.fn(),
+        returnValue: undefined as string | undefined,
+      } as unknown as BeforeUnloadEvent;
+
+      act(() => {
+        windowEventHandlers.get('beforeunload')?.(event);
+      });
+
+      expect(event.preventDefault).not.toHaveBeenCalled();
+      expect(event.returnValue).toBeUndefined();
+    });
+
+    it('should clean up event listeners on unmount', () => {
+      const { unmount } = renderHook(() =>
+        useDirtyForm(mockFormMethods.formState.isDirty, {
+          onSave: mockOnSave,
+          onDiscard: mockOnDiscard,
+        }),
+      );
+
+      unmount();
+
+      expect(mockRouter.events.off).toHaveBeenCalledWith(
+        'routeChangeStart',
+        expect.any(Function),
+      );
+      expect(window.removeEventListener).toHaveBeenCalledWith(
+        'beforeunload',
+        expect.any(Function),
+      );
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle multiple rapid navigation attempts', () => {
+      mockFormMethods.formState.isDirty = true;
+
+      const { result } = renderHook(() =>
+        useDirtyForm(mockFormMethods.formState.isDirty, {
+          onSave: mockOnSave,
+          onDiscard: mockOnDiscard,
+        }),
+      );
+
+      expect(() => {
+        act(() => {
+          routerEventHandlers.routeChangeStart('/path1');
+        });
+      }).toThrow('Route change aborted.');
+
+      expect(() => {
+        act(() => {
+          routerEventHandlers.routeChangeStart('/path2');
+        });
+      }).toThrow('Route change aborted.');
+
+      expect(() => {
+        act(() => {
+          routerEventHandlers.routeChangeStart('/path3');
+        });
+      }).toThrow('Route change aborted.');
+
+      act(() => {
+        result.current.navigateToPending();
+      });
+
+      expect(mockRouter.push).toHaveBeenCalledWith('/path3');
+      expect(mockRouter.push).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle onDiscard not being provided', () => {
+      mockFormMethods.formState.isDirty = true;
+
+      renderHook(() =>
+        useDirtyForm(mockFormMethods.formState.isDirty, {
+          onSave: mockOnSave,
+        }),
+      );
+
+      expect(() => {
+        act(() => {
+          routerEventHandlers.routeChangeStart('/new-path');
+        });
+      }).toThrow('Route change aborted.');
+
+      const modalProps = mockOpenModal.mock.calls[0][0].props;
+
+      act(() => {
+        modalProps.onDiscard();
+      });
+
+      expect(mockRouter.push).toHaveBeenCalledWith('/new-path');
+    });
+
+    it('should handle form state changes during lifecycle', () => {
+      const { rerender } = renderHook(() =>
+        useDirtyForm(mockFormMethods.formState.isDirty, {
+          onSave: mockOnSave,
+          onDiscard: mockOnDiscard,
+        }),
+      );
+
+      act(() => {
+        routerEventHandlers.routeChangeStart('/new-path');
+      });
+      expect(mockOpenModal).not.toHaveBeenCalled();
+
+      mockFormMethods.formState.isDirty = true;
+      rerender();
+
+      expect(() => {
+        act(() => {
+          routerEventHandlers.routeChangeStart('/another-path');
+        });
+      }).toThrow('Route change aborted.');
+      expect(mockOpenModal).toHaveBeenCalled();
+
+      mockFormMethods.formState.isDirty = false;
+      rerender();
+
+      act(() => {
+        routerEventHandlers.routeChangeStart('/final-path');
+      });
+      expect(mockOpenModal).toHaveBeenCalledTimes(1);
+    });
+  });
+});
diff --git a/packages/shared/src/hooks/useDirtyForm.ts b/packages/shared/src/hooks/useDirtyForm.ts
new file mode 100644
index 0000000000..a7a3822632
--- /dev/null
+++ b/packages/shared/src/hooks/useDirtyForm.ts
@@ -0,0 +1,94 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { useRouter } from 'next/router';
+import { useLazyModal } from './useLazyModal';
+import { LazyModal } from '../components/modals/common/types';
+
+export interface UseDirtyFormOptions {
+  onSave: () => void;
+  onDiscard?: () => void;
+}
+
+export const useDirtyForm = (
+  isDirty: boolean,
+  options: UseDirtyFormOptions,
+) => {
+  const { onSave, onDiscard } = options;
+
+  const router = useRouter();
+  const { openModal } = useLazyModal();
+  const allowNavigationRef = useRef(false);
+  const pendingUrlRef = useRef<string | null>(null);
+
+  const handleDiscard = useCallback(() => {
+    onDiscard?.();
+
+    allowNavigationRef.current = true;
+
+    if (pendingUrlRef.current) {
+      router.push(pendingUrlRef.current);
+      pendingUrlRef.current = null;
+    }
+  }, [onDiscard, router]);
+
+  useEffect(() => {
+    const handleRouteChangeStart = (url: string) => {
+      if (allowNavigationRef.current || !isDirty || url === router.asPath) {
+        allowNavigationRef.current = false;
+        return;
+      }
+
+      pendingUrlRef.current = url;
+
+      openModal({
+        type: LazyModal.DirtyForm,
+        props: {
+          onDiscard: handleDiscard,
+          onSave,
+        },
+      });
+
+      router.events.emit('routeChangeError');
+      // This error is necessary to abort the route change, and suggested approach. We don't want throw an actual error object.
+      // eslint-disable-next-line @typescript-eslint/no-throw-literal
+      throw 'Route change aborted.';
+    };
+
+    router.events.on('routeChangeStart', handleRouteChangeStart);
+
+    return () => {
+      router.events.off('routeChangeStart', handleRouteChangeStart);
+    };
+  }, [isDirty, router, openModal, handleDiscard, onSave]);
+
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (isDirty) {
+        e.preventDefault();
+        // Legacy browser support to pop the alert when navigating away.
+        e.returnValue = '';
+      }
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [isDirty]);
+
+  const navigateToPending = useCallback(() => {
+    if (pendingUrlRef.current) {
+      router.push(pendingUrlRef.current);
+      pendingUrlRef.current = null;
+    }
+  }, [router]);
+
+  return {
+    allowNavigation: () => {
+      allowNavigationRef.current = true;
+    },
+    hasPendingNavigation: () => pendingUrlRef.current !== null,
+    navigateToPending,
+    save: onSave,
+  };
+};
diff --git a/packages/shared/src/hooks/useProfileForm.ts b/packages/shared/src/hooks/useProfileForm.ts
index a92fe6260a..2359436061 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;
 }
@@ -118,6 +119,9 @@ export const onValidateHandles = (
   }, {});
 };
 
+/**
+ * @deprecated Use useUserInfoForm instead
+ */
 const useProfileForm = ({
   onSuccess,
   onError,
@@ -130,13 +134,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/hooks/useRemoveExperience.ts b/packages/shared/src/hooks/useRemoveExperience.ts
new file mode 100644
index 0000000000..e661e906f9
--- /dev/null
+++ b/packages/shared/src/hooks/useRemoveExperience.ts
@@ -0,0 +1,34 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+import type { UserExperienceType } from '../graphql/user/profile';
+import { removeUserExperience } from '../graphql/user/profile';
+import { useToastNotification } from './useToastNotification';
+import { labels } from '../lib/labels';
+import { webappUrl } from '../lib/constants';
+import { useUserExperiencesByType } from '../features/profile/hooks/useUserExperiencesByType';
+import { useAuthContext } from '../contexts/AuthContext';
+
+const useRemoveExperience = ({ type }: { type: UserExperienceType }) => {
+  const { user } = useAuthContext();
+  const router = useRouter();
+  const { displayToast } = useToastNotification();
+  const { queryKey: experienceQueryKey } = useUserExperiencesByType(
+    type,
+    user?.id,
+  );
+  const qc = useQueryClient();
+  const { mutate, isPending } = useMutation({
+    mutationFn: (id: string) => removeUserExperience(id),
+    onSuccess: () => {
+      router.push(`${webappUrl}/settings/profile/experience/${type}`);
+      qc.invalidateQueries({ queryKey: experienceQueryKey });
+    },
+    onError: () => {
+      displayToast(labels.error.generic || 'Failed to delete experience');
+    },
+  });
+
+  return { removeExperience: mutate, isPending };
+};
+
+export default useRemoveExperience;
diff --git a/packages/shared/src/hooks/useUserExperienceForm.spec.tsx b/packages/shared/src/hooks/useUserExperienceForm.spec.tsx
new file mode 100644
index 0000000000..1c93e267b6
--- /dev/null
+++ b/packages/shared/src/hooks/useUserExperienceForm.spec.tsx
@@ -0,0 +1,319 @@
+import React from 'react';
+import { renderHook, act } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+import useUserExperienceForm from './useUserExperienceForm';
+import { UserExperienceType } from '../graphql/user/profile';
+
+// Mock dependencies
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(),
+}));
+
+jest.mock('./useToastNotification', () => ({
+  useToastNotification: () => ({ displayToast: jest.fn() }),
+}));
+
+jest.mock('./useDirtyForm', () => ({
+  __esModule: true,
+  useDirtyForm: jest.fn(() => ({
+    save: jest.fn(),
+    allowNavigation: jest.fn(),
+  })),
+}));
+
+// Mock the GraphQL mutations
+jest.mock('../graphql/user/profile', () => ({
+  ...jest.requireActual('../graphql/user/profile'),
+  upsertUserWorkExperience: jest.fn(),
+  upsertUserGeneralExperience: jest.fn(),
+}));
+
+// Mock AuthContext
+jest.mock('../contexts/AuthContext', () => ({
+  useAuthContext: jest.fn(() => ({
+    user: { id: 'test-user-id' },
+  })),
+}));
+
+// Mock useUserExperiencesByType hook
+jest.mock('../features/profile/hooks/useUserExperiencesByType', () => ({
+  useUserExperiencesByType: jest.fn(() => ({
+    queryKey: ['user-experiences', 'test-type', 'test-user-id'],
+  })),
+}));
+
+const mockRouter = {
+  back: jest.fn(),
+  pathname: '/profile/experience',
+  push: jest.fn(),
+};
+
+const createWrapper = () => {
+  const client = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+  // eslint-disable-next-line react/display-name
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={client}>{children}</QueryClientProvider>
+  );
+};
+
+// BaseUserExperience type used by the hook
+type BaseUserExperience = {
+  type: UserExperienceType;
+  title: string;
+  description?: string | null;
+  startedAt?: Date | null;
+  endedAt?: Date | null;
+  subtitle?: string | null;
+  current?: boolean;
+  companyId?: string | null;
+  customCompanyName?: string | null;
+  url?: string | null;
+};
+
+describe('useUserExperienceForm', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useRouter as jest.Mock).mockReturnValue(mockRouter);
+  });
+
+  it('should initialize form with default values', () => {
+    const mockExperience: BaseUserExperience = {
+      type: UserExperienceType.Work,
+      title: 'Software Engineer',
+      description: 'Building awesome things',
+      startedAt: new Date('2020-01-01'),
+      endedAt: new Date('2022-12-31'),
+      current: false,
+    };
+
+    const { result } = renderHook(
+      () => useUserExperienceForm({ defaultValues: mockExperience }),
+      { wrapper: createWrapper() },
+    );
+
+    expect(result.current.methods.getValues()).toMatchObject({
+      type: UserExperienceType.Work,
+      title: 'Software Engineer',
+      description: 'Building awesome things',
+    });
+  });
+
+  it('should validate required title field', async () => {
+    const validExperience: BaseUserExperience = {
+      type: UserExperienceType.Work,
+      title: 'Software Engineer',
+      description: 'Description',
+      startedAt: new Date('2020-01-01'),
+      endedAt: new Date('2022-12-31'),
+      current: false,
+    };
+
+    const { result } = renderHook(
+      () => useUserExperienceForm({ defaultValues: validExperience }),
+      { wrapper: createWrapper() },
+    );
+
+    // Set invalid title value (empty string)
+    act(() => {
+      result.current.methods.setValue('title', '');
+    });
+
+    // Trigger validation for title field
+    let isValid = false;
+    await act(async () => {
+      isValid = await result.current.methods.trigger('title');
+    });
+
+    // Validation should fail for empty title
+    expect(isValid).toBe(false);
+  });
+
+  it('should validate end date is required when not current', async () => {
+    const validExperience: BaseUserExperience = {
+      type: UserExperienceType.Work,
+      title: 'Software Engineer',
+      description: 'Description',
+      startedAt: new Date('2020-01-01'),
+      endedAt: new Date('2022-12-31'),
+      current: false,
+    };
+
+    const { result } = renderHook(
+      () => useUserExperienceForm({ defaultValues: validExperience }),
+      { wrapper: createWrapper() },
+    );
+
+    // Set endedAt to undefined while current is false
+    act(() => {
+      result.current.methods.setValue('endedAt', undefined);
+      result.current.methods.setValue('current', false);
+    });
+
+    // Trigger validation
+    let isValid = false;
+    await act(async () => {
+      isValid = await result.current.methods.trigger();
+    });
+
+    // Validation should fail when endedAt is undefined and current is false
+    expect(isValid).toBe(false);
+  });
+
+  it('should not require end date when current is true', async () => {
+    const validExperience: BaseUserExperience = {
+      type: UserExperienceType.Work,
+      title: 'Software Engineer',
+      description: 'Description',
+      startedAt: new Date('2020-01-01'),
+      endedAt: undefined, // This is OK when current is true
+      current: true,
+    };
+
+    const { result } = renderHook(
+      () => useUserExperienceForm({ defaultValues: validExperience }),
+      { wrapper: createWrapper() },
+    );
+
+    await act(async () => {
+      const isValid = await result.current.methods.trigger();
+      expect(isValid).toBe(true);
+    });
+
+    const { errors } = result.current.methods.formState;
+    expect(errors.endedAt).toBeUndefined();
+  });
+
+  it('should have isPending false initially', () => {
+    const mockExperience: BaseUserExperience = {
+      type: UserExperienceType.Work,
+      title: 'Software Engineer',
+      description: 'Building awesome things',
+      startedAt: new Date('2020-01-01'),
+      endedAt: new Date('2022-12-31'),
+      current: false,
+    };
+
+    const { result } = renderHook(
+      () => useUserExperienceForm({ defaultValues: mockExperience }),
+      { wrapper: createWrapper() },
+    );
+
+    expect(result.current.isPending).toBe(false);
+  });
+
+  it('should handle current position toggle correctly', async () => {
+    const mockExperience: BaseUserExperience = {
+      type: UserExperienceType.Work,
+      title: 'Software Engineer',
+      description: 'Building awesome things',
+      startedAt: new Date('2020-01-01'),
+      endedAt: new Date('2022-12-31'),
+      current: false,
+    };
+
+    const { result } = renderHook(
+      () => useUserExperienceForm({ defaultValues: mockExperience }),
+      { wrapper: createWrapper() },
+    );
+
+    // Set current to true
+    act(() => {
+      result.current.methods.setValue('current', true);
+    });
+
+    // End date should not be required when current is true
+    act(() => {
+      result.current.methods.setValue('endedAt', undefined);
+    });
+
+    await act(async () => {
+      const isValid = await result.current.methods.trigger();
+      expect(isValid).toBe(true);
+    });
+
+    expect(result.current.methods.formState.errors.endedAt).toBeUndefined();
+
+    // Set current back to false
+    act(() => {
+      result.current.methods.setValue('current', false);
+    });
+
+    await act(async () => {
+      const isValid = await result.current.methods.trigger();
+      expect(isValid).toBe(false);
+    });
+
+    expect(result.current.methods.formState.errors.endedAt).toBeDefined();
+  });
+
+  it('should validate max length constraints', async () => {
+    const longTitle = 'a'.repeat(1001); // Exceeds max length of 1000
+    const longDescription = 'a'.repeat(5001); // Exceeds max length of 5000
+
+    const validExperience: BaseUserExperience = {
+      type: UserExperienceType.Work,
+      title: 'Software Engineer',
+      description: 'Description',
+      startedAt: new Date('2020-01-01'),
+      endedAt: new Date('2022-12-31'),
+      current: false,
+    };
+
+    const { result } = renderHook(
+      () => useUserExperienceForm({ defaultValues: validExperience }),
+      { wrapper: createWrapper() },
+    );
+
+    // Set values that exceed max length
+    act(() => {
+      result.current.methods.setValue('title', longTitle);
+      result.current.methods.setValue('description', longDescription);
+    });
+
+    // Trigger validation
+    let isValid = false;
+    await act(async () => {
+      isValid = await result.current.methods.trigger();
+    });
+
+    // Validation should fail for values exceeding max length
+    expect(isValid).toBe(false);
+  });
+
+  it('should validate start date is required', async () => {
+    const validExperience: BaseUserExperience = {
+      type: UserExperienceType.Work,
+      title: 'Software Engineer',
+      description: 'Description',
+      startedAt: new Date('2020-01-01'),
+      endedAt: new Date('2022-12-31'),
+      current: false,
+    };
+
+    const { result } = renderHook(
+      () => useUserExperienceForm({ defaultValues: validExperience }),
+      { wrapper: createWrapper() },
+    );
+
+    // Set startedAt to undefined
+    act(() => {
+      result.current.methods.setValue('startedAt', undefined);
+    });
+
+    // Trigger validation for startedAt field
+    let isValid = false;
+    await act(async () => {
+      isValid = await result.current.methods.trigger('startedAt');
+    });
+
+    // Validation should fail for undefined startedAt
+    expect(isValid).toBe(false);
+  });
+});
diff --git a/packages/shared/src/hooks/useUserExperienceForm.ts b/packages/shared/src/hooks/useUserExperienceForm.ts
new file mode 100644
index 0000000000..459e7f9c12
--- /dev/null
+++ b/packages/shared/src/hooks/useUserExperienceForm.ts
@@ -0,0 +1,135 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+import type {
+  UserExperience,
+  UserExperienceWork,
+} from '../graphql/user/profile';
+import {
+  upsertUserGeneralExperience,
+  upsertUserWorkExperience,
+  UserExperienceType,
+} from '../graphql/user/profile';
+import { useDirtyForm } from './useDirtyForm';
+import { ApiError } from '../graphql/common';
+import type { ApiErrorResult } from '../graphql/common';
+import { labels } from '../lib/labels';
+import { applyZodErrorsToForm } from '../lib/form';
+import { useToastNotification } from './useToastNotification';
+import { webappUrl } from '../lib/constants';
+import { useUserExperiencesByType } from '../features/profile/hooks/useUserExperiencesByType';
+import { useAuthContext } from '../contexts/AuthContext';
+
+export const userExperienceInputBaseSchema = z
+  .object({
+    type: z.enum(UserExperienceType),
+    title: z.string().min(1, 'Title is required.').max(1000),
+    description: z.string().max(5000).optional(),
+    subtitle: z.string().max(1000).optional().nullable(),
+    startedAt: z.date({ message: 'Start year is required.' }),
+    endedAt: z.date().optional().nullable(),
+    current: z.boolean().default(false),
+    companyId: z.string().nullable().optional().default(null),
+    customCompanyName: z
+      .string()
+      .trim()
+      .normalize()
+      .max(100)
+      .nullable()
+      .optional()
+      .default(null),
+    url: z
+      .union([
+        z.url('Please enter a valid URL.').max(2000),
+        z.string().length(0),
+        z.null(),
+      ])
+      .optional()
+      .default(null),
+  })
+  .refine(
+    (data) => {
+      if (
+        data.current === false &&
+        data.type !== UserExperienceType.Project &&
+        data.type !== UserExperienceType.OpenSource
+      ) {
+        return data.endedAt !== undefined;
+      }
+      return true;
+    },
+    {
+      message: 'End date is required when not current.',
+      path: ['endedAt'],
+    },
+  );
+
+type BaseUserExperience = Omit<
+  UserExperience,
+  'id' | 'createdAt' | 'company' | 'customCompanyName'
+>;
+
+const useUserExperienceForm = ({
+  defaultValues,
+}: {
+  defaultValues: BaseUserExperience;
+}) => {
+  const qc = useQueryClient();
+  const { user } = useAuthContext();
+  const { queryKey: experienceQueryKey } = useUserExperiencesByType(
+    defaultValues.type,
+    user?.id,
+  );
+  const dirtyFormRef = useRef<ReturnType<typeof useDirtyForm> | null>(null);
+  const router = useRouter();
+  const { displayToast } = useToastNotification();
+  const methods = useForm<UserExperience>({
+    defaultValues,
+    reValidateMode: 'onSubmit',
+    resolver: zodResolver(userExperienceInputBaseSchema),
+  });
+  const { id, type } = methods.getValues();
+  const { mutate, isPending } = useMutation({
+    mutationFn: (data: UserExperience | UserExperienceWork) =>
+      type === UserExperienceType.Work
+        ? upsertUserWorkExperience(data as UserExperienceWork, id)
+        : upsertUserGeneralExperience(data, id),
+    onSuccess: (_, vars) => {
+      methods.reset(vars);
+      dirtyFormRef.current?.allowNavigation();
+      qc.invalidateQueries({ queryKey: experienceQueryKey });
+      router.push(`${webappUrl}settings/profile/experience/${type}`);
+    },
+    onError: (error: ApiErrorResult) => {
+      if (
+        error.response?.errors?.[0]?.extensions?.code ===
+        ApiError.ZodValidationError
+      ) {
+        applyZodErrorsToForm({
+          error,
+          setError: methods.setError,
+        });
+      } else {
+        displayToast(
+          error.response?.errors?.[0]?.message || labels.error.generic,
+        );
+      }
+    },
+  });
+  const dirtyForm = useDirtyForm(methods.formState.isDirty, {
+    onSave: () => {
+      const formData = methods.getValues();
+      mutate(formData);
+    },
+    onDiscard: () => {
+      methods.reset();
+    },
+  });
+  dirtyFormRef.current = dirtyForm;
+  return { methods, save: dirtyFormRef.current?.save, isPending };
+};
+
+export default useUserExperienceForm;
diff --git a/packages/shared/src/hooks/useUserInfoForm.ts b/packages/shared/src/hooks/useUserInfoForm.ts
new file mode 100644
index 0000000000..02b7ca53bd
--- /dev/null
+++ b/packages/shared/src/hooks/useUserInfoForm.ts
@@ -0,0 +1,182 @@
+import { useContext, useEffect, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import type { UseFormReturn } from 'react-hook-form';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+import AuthContext from '../contexts/AuthContext';
+import { UPDATE_USER_INFO_MUTATION } from '../graphql/users';
+import type { LoggedUser, PublicProfile, UserProfile } from '../lib/user';
+import { useToastNotification } from './useToastNotification';
+import type { ResponseError } from '../graphql/common';
+import { errorMessage, gqlClient } from '../graphql/common';
+import { useDirtyForm } from './useDirtyForm';
+import { useLogContext } from '../contexts/LogContext';
+import { LogEvent } from '../lib/log';
+import { useProfile } from './profile/useProfile';
+
+export interface ProfileFormHint {
+  portfolio?: string;
+  username?: string;
+  twitter?: string;
+  github?: string;
+  name?: string;
+  roadmap?: string;
+  threads?: string;
+  codepen?: string;
+  reddit?: string;
+  stackoverflow?: string;
+  youtube?: string;
+  linkedin?: string;
+  mastodon?: string;
+  bluesky?: string;
+}
+
+export type UpdateProfileParameters = Partial<UserProfile> & {
+  upload?: File;
+  coverUpload?: File;
+};
+
+interface UseUserInfoForm {
+  methods: UseFormReturn<UserProfile>;
+  save: () => void;
+  isLoading: boolean;
+}
+
+const socials = [
+  'github',
+  'twitter',
+  'roadmap',
+  'threads',
+  'codepen',
+  'reddit',
+  'stackoverflow',
+  'youtube',
+  'linkedin',
+  'mastodon',
+  'bluesky',
+];
+
+const useUserInfoForm = (): UseUserInfoForm => {
+  const qc = useQueryClient();
+  const { user, updateUser } = useContext(AuthContext);
+  const { userQueryKey } = useProfile(user as PublicProfile);
+  const { logEvent } = useLogContext();
+  const { displayToast } = useToastNotification();
+  const router = useRouter();
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(window?.location?.search);
+    const field = searchParams?.get('field');
+    if (field) {
+      const element = document?.getElementsByName(field)[0];
+      if (element) {
+        element.focus();
+      }
+    }
+  }, []);
+
+  const methods = useForm<UserProfile>({
+    defaultValues: {
+      name: user?.name,
+      username: user?.username,
+      image: user?.image,
+      cover: user?.cover,
+      bio: user?.bio,
+      github: user?.github,
+      externalLocationId: user?.location?.externalId,
+      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 dirtyFormRef = useRef<ReturnType<typeof useDirtyForm> | null>(null);
+
+  const { isPending: isLoading, mutate: updateUserProfile } = useMutation<
+    LoggedUser,
+    ResponseError,
+    UpdateProfileParameters
+  >({
+    mutationFn: ({ upload, coverUpload, ...data }) =>
+      gqlClient.request(UPDATE_USER_INFO_MUTATION, {
+        data,
+        upload,
+        coverUpload,
+      }),
+
+    onSuccess: async (_, vars) => {
+      const oldProfileData = qc.getQueryData<PublicProfile>(userQueryKey);
+      qc.setQueryData(userQueryKey, {
+        ...oldProfileData,
+        ...vars,
+      });
+      await updateUser({ ...user, ...vars });
+      dirtyFormRef.current?.allowNavigation();
+
+      displayToast('Profile updated');
+      methods.reset(vars);
+      logEvent({ event_name: LogEvent.UpdateProfile });
+
+      if (dirtyFormRef.current?.hasPendingNavigation()) {
+        dirtyFormRef.current.navigateToPending();
+      } else {
+        router.push(`/${vars.username}`);
+      }
+    },
+
+    onError: (err) => {
+      if (err?.response?.errors?.length) {
+        const data: ProfileFormHint = JSON.parse(
+          err.response.errors[0].message,
+        );
+
+        Object.entries(data).forEach(([key, value]) => {
+          methods.setError(key as keyof UserProfile, {
+            type: 'manual',
+            message: value,
+          });
+        });
+
+        if (
+          Object.values(data).some((errorHint) =>
+            socials.some((social) => errorHint.includes(social)),
+          )
+        ) {
+          displayToast(errorMessage.profile.invalidSocialLinks);
+        }
+      } else {
+        displayToast('Failed to update profile');
+      }
+    },
+  });
+
+  const dirtyForm = useDirtyForm(methods.formState.isDirty, {
+    onSave: () => {
+      const formData = methods.getValues();
+      updateUserProfile(formData);
+    },
+    onDiscard: () => {
+      methods.reset();
+    },
+  });
+
+  dirtyFormRef.current = dirtyForm;
+
+  return {
+    methods,
+    save: dirtyForm.save,
+    isLoading,
+  };
+};
+
+export default useUserInfoForm;
diff --git a/packages/shared/src/lib/date.ts b/packages/shared/src/lib/date.ts
index 0be566ee65..56b2ac1b6e 100644
--- a/packages/shared/src/lib/date.ts
+++ b/packages/shared/src/lib/date.ts
@@ -42,3 +42,54 @@ export const isOlderThan = (seconds: number, date: Date) => {
   const currentDate = getTodayTz('UTC', new Date());
   return date.getTime() < currentDate.getTime() - seconds;
 };
+
+export interface DateRange {
+  start: Date;
+  end: Date;
+}
+
+export function mergeOverlappingRanges(ranges: DateRange[]): DateRange[] {
+  if (ranges.length === 0) {
+    return [];
+  }
+
+  const sorted = [...ranges].sort(
+    (a, b) => a.start.getTime() - b.start.getTime(),
+  );
+
+  const merged: DateRange[] = [sorted[0]];
+
+  for (let i = 1; i < sorted.length; i += 1) {
+    const current = sorted[i];
+    const lastMerged = merged[merged.length - 1];
+
+    if (current.start.getTime() <= lastMerged.end.getTime()) {
+      lastMerged.end = new Date(
+        Math.max(lastMerged.end.getTime(), current.end.getTime()),
+      );
+    } else {
+      merged.push(current);
+    }
+  }
+
+  return merged;
+}
+
+export function calculateTotalDurationInMonths(ranges: DateRange[]): {
+  years: number;
+  months: number;
+  totalMonths: number;
+} {
+  const mergedRanges = mergeOverlappingRanges(ranges);
+
+  const totalMs = mergedRanges.reduce(
+    (sum, range) => sum + (range.end.getTime() - range.start.getTime()),
+    0,
+  );
+
+  const totalMonths = Math.floor(totalMs / (30 * 24 * 60 * 60 * 1000));
+  const years = Math.floor(totalMonths / 12);
+  const months = totalMonths % 12;
+
+  return { years, months, totalMonths };
+}
diff --git a/packages/shared/src/lib/dateFormat.ts b/packages/shared/src/lib/dateFormat.ts
index 2e412c72b2..08b3eae94e 100644
--- a/packages/shared/src/lib/dateFormat.ts
+++ b/packages/shared/src/lib/dateFormat.ts
@@ -6,11 +6,13 @@ import {
   isSameYear,
   subDays,
 } from 'date-fns';
+import { pluralize } from './strings';
 
 export const oneMinute = 60;
 export const oneHour = 3600;
 export const oneDay = 86400;
 const oneWeek = 7 * oneDay;
+const oneMonth = 30 * oneDay;
 export const oneYear = oneDay * 365;
 
 export const publishTimeRelativeShort = (
@@ -76,6 +78,7 @@ export enum TimeFormatType {
   Transaction = 'transaction',
   LastActivity = 'lastActivity',
   LiveTimer = 'liveTimer',
+  Experience = 'experience',
 }
 
 export function postDateFormat(
@@ -228,6 +231,28 @@ export const getLastActivityDateFormat = (
   });
 };
 
+const publishExperienceTime = (start: Date, end: Date): string => {
+  const difference =
+    new Date(end || Date.now()).getTime() - new Date(start).getTime();
+  const differenceInMonths = Math.floor(difference / oneMonth);
+  const years = Math.floor(differenceInMonths / 12);
+  const months = differenceInMonths % 12;
+
+  if (years > 0) {
+    const yearCopy = `${years} ${pluralize('year', years)}`;
+
+    if (months === 0) {
+      return yearCopy;
+    }
+
+    return `${yearCopy} ${months} ${pluralize('month', months)}`;
+  }
+
+  return months > 0
+    ? `${months} ${pluralize('month', months)}`
+    : 'Less than a month';
+};
+
 export const getTodayTz = (timeZone: string, now = new Date()): Date => {
   const timeZonedToday = now.toLocaleString('en', { timeZone });
   return new Date(timeZonedToday);
@@ -276,6 +301,10 @@ export const formatDate = ({ value, type, now }: FormatDateProps): string => {
     return publishTimeLiveTimer(date, now);
   }
 
+  if (type === TimeFormatType.Experience) {
+    return publishExperienceTime(date, now);
+  }
+
   return postDateFormat(date);
 };
 
diff --git a/packages/shared/src/lib/image.ts b/packages/shared/src/lib/image.ts
index 5a98894716..62a7c17270 100644
--- a/packages/shared/src/lib/image.ts
+++ b/packages/shared/src/lib/image.ts
@@ -373,6 +373,12 @@ 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!';
 export const adFaviconPlaceholder =
   'https://media.daily.dev/image/upload/s--SOLIE7Bc--/f_auto/v1761801782/webapp/daily.dev_-_Boost_Icon';
 export const jobOfferDarkDesktop =
diff --git a/packages/shared/src/lib/labels.ts b/packages/shared/src/lib/labels.ts
index 478395a584..a6d1a5dcc4 100644
--- a/packages/shared/src/lib/labels.ts
+++ b/packages/shared/src/lib/labels.ts
@@ -165,4 +165,13 @@ export const labels = {
         'Irrelevant or spammy posts may be flagged and could lead to lost posting rights.',
     },
   },
+  profile: {
+    sources: {
+      heading: {
+        empty: 'Recommended Squads',
+        activeIn: 'Active in these Squads',
+      },
+      viewAll: 'Explore all Squads',
+    },
+  },
 };
diff --git a/packages/shared/src/lib/query.ts b/packages/shared/src/lib/query.ts
index 7f80a7d017..2f2e74d032 100644
--- a/packages/shared/src/lib/query.ts
+++ b/packages/shared/src/lib/query.ts
@@ -219,6 +219,9 @@ export enum RequestKey {
   OpportunityMatches = 'opportunity_matches',
   UserCandidatePreferences = 'user_candidate_preferences',
   KeywordAutocomplete = 'keyword_autocomplete',
+  Location = 'location',
+  Autocomplete = 'autocomplete',
+  UserExperience = 'user_experience',
 }
 
 export const getPostByIdKey = (id: string): QueryKey => [RequestKey.Post, id];
diff --git a/packages/shared/src/lib/strings.ts b/packages/shared/src/lib/strings.ts
index 500c1d9ba4..50916db94e 100644
--- a/packages/shared/src/lib/strings.ts
+++ b/packages/shared/src/lib/strings.ts
@@ -26,3 +26,10 @@ export const escapeRegexCharacters = (str: string): string => {
 
 export const pluralize = (word: string, count: number, append = 's') =>
   `${word}${count === 1 ? '' : append}`;
+
+export const concatStrings = (
+  strings: Array<string | null | undefined>,
+  separator = ', ',
+): string => {
+  return strings.filter(Boolean).join(separator);
+};
diff --git a/packages/shared/src/lib/user.ts b/packages/shared/src/lib/user.ts
index 095ff5cb1b..dde193e5d5 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',
@@ -56,6 +57,8 @@ export interface PublicProfile {
   contentPreference?: ContentPreference;
   isPlus?: boolean;
   plusMemberSince?: Date;
+  experienceLevel?: keyof typeof UserExperienceLevel;
+  location?: TLocation;
 }
 
 export enum UserExperienceLevel {
@@ -68,6 +71,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 +107,9 @@ export interface UserProfile {
   experienceLevel?: keyof typeof UserExperienceLevel;
   language?: string;
   defaultFeedId?: string;
+  readme?: string;
+  image?: string;
+  externalLocationId?: string;
 }
 
 export interface UserShortProfile
@@ -160,6 +176,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/userCompany.ts b/packages/shared/src/lib/userCompany.ts
index bd7064b189..f86a7367e0 100644
--- a/packages/shared/src/lib/userCompany.ts
+++ b/packages/shared/src/lib/userCompany.ts
@@ -12,3 +12,8 @@ export interface UserCompany {
   company?: Company;
   email: string;
 }
+
+export enum CompanyType {
+  Company = 'company',
+  School = 'school',
+}
diff --git a/packages/shared/src/lib/utils.ts b/packages/shared/src/lib/utils.ts
index 31c3f96877..c3f2fda387 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,32 @@ 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(', ');
+};
+
+export const excludeProperties = <
+  T,
+  K extends string | keyof T,
+  R = Omit<T, K & keyof T>,
+>(
+  obj: T,
+  properties: K[],
+): R => {
+  if (!obj) {
+    return obj as unknown as R;
+  }
+
+  const clone = structuredClone(obj);
+
+  properties.forEach((prop) => {
+    delete (clone as Record<string, unknown>)[prop as string];
+  });
+
+  return clone as unknown as R;
+};
diff --git a/packages/shared/src/styles/utilities.css b/packages/shared/src/styles/utilities.css
index 48bbd47506..e6dc7be5e2 100644
--- a/packages/shared/src/styles/utilities.css
+++ b/packages/shared/src/styles/utilities.css
@@ -31,3 +31,20 @@
 .break-words-overflow {
   overflow-wrap: break-word;
 }
+
+/* Sidebar overlay mode on profile pages below 1360px */
+@media (max-width: 1359px) and (min-width: 1020px) {
+  /* Make sidebar overlay on top of content when expanded */
+  body:has(.profile-page) nav[role="navigation"] {
+    position: fixed !important;
+    z-index: 100 !important;
+    height: 100vh !important;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15) !important;
+  }
+
+  /* Remove sidebar padding from main content */
+  body:has(.profile-page) main {
+    padding-left: 0 !important;
+    margin-left: 20px;
+  }
+}
diff --git a/packages/storybook/.storybook/main.ts b/packages/storybook/.storybook/main.ts
index c53035a9cb..cb956bc7f7 100644
--- a/packages/storybook/.storybook/main.ts
+++ b/packages/storybook/.storybook/main.ts
@@ -56,6 +56,14 @@ const config: StorybookConfig = {
             __dirname,
             '../mock/hooks/useOnboardingActions.ts',
           ),
+          '@dailydotdev/shared/src/hooks/useToastNotification': path.resolve(
+            __dirname,
+            '../mock/hooks/useToastNotification.ts',
+          ),
+          '@dailydotdev/shared/src/hooks/useActions': path.resolve(
+            __dirname,
+            '../mock/hooks/useActions.ts',
+          ),
         },
       },
       define: {
diff --git a/packages/storybook/mock/hooks/useActions.ts b/packages/storybook/mock/hooks/useActions.ts
new file mode 100644
index 0000000000..bd41efbeea
--- /dev/null
+++ b/packages/storybook/mock/hooks/useActions.ts
@@ -0,0 +1,12 @@
+import { fn } from 'storybook/test';
+
+export const useActions = fn(() => ({
+  completeAction: fn((type: string) => {
+    console.log('Action completed:', type);
+    return Promise.resolve();
+  }),
+  checkHasCompleted: fn(() => false),
+  actions: [],
+  isActionsFetched: true,
+}));
+
diff --git a/packages/storybook/mock/hooks/useToastNotification.ts b/packages/storybook/mock/hooks/useToastNotification.ts
new file mode 100644
index 0000000000..4353ed2128
--- /dev/null
+++ b/packages/storybook/mock/hooks/useToastNotification.ts
@@ -0,0 +1,9 @@
+import { fn } from 'storybook/test';
+
+export const useToastNotification = fn(() => ({
+  displayToast: fn((message: string) => {
+    console.log('Toast:', message);
+  }),
+  dismissToast: fn(),
+}));
+
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index af0fc70d9b..6067d344be 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@dailydotdev/shared": "workspace:*",
     "@tanstack/react-query": "^5.80.5",
+    "date-fns": "^2.30.0",
     "dompurify": "^2.5.4",
     "extension": "workspace:*",
     "jotai": "^2.12.2",
diff --git a/packages/storybook/stories/components/ExpandableContent.stories.tsx b/packages/storybook/stories/components/ExpandableContent.stories.tsx
new file mode 100644
index 0000000000..b9bbc3b3ff
--- /dev/null
+++ b/packages/storybook/stories/components/ExpandableContent.stories.tsx
@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import type { ExpandableContentProps } from '@dailydotdev/shared/src/components/ExpandableContent';
+import { ExpandableContent } from '@dailydotdev/shared/src/components/ExpandableContent';
+
+const meta: Meta<typeof ExpandableContent> = {
+  title: 'Components/ExpandableContent',
+  component: ExpandableContent,
+  tags: ['autodocs'],
+  argTypes: {
+    maxHeight: {
+      control: { type: 'number', min: 100, max: 800, step: 10 },
+      description: 'Maximum height in pixels before showing "See More" button',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ExpandableContent>;
+
+const LongTextContent = () => (
+  <div>
+    <h2 className="mb-4 text-2xl font-bold">Long Text Content</h2>
+    <p className="mb-4">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat.
+    </p>
+    <p className="mb-4">
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <p className="mb-4">
+      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+      doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+      veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+    </p>
+    <p className="mb-4">
+      Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
+      sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+    </p>
+    <p className="mb-4">
+      Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+      adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
+      dolore magnam aliquam quaerat voluptatem.
+    </p>
+    <p className="mb-4">
+      Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
+      laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
+      reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.
+    </p>
+    <p className="mb-4">
+      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
+      praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
+      excepturi sint occaecati cupiditate non provident.
+    </p>
+  </div>
+);
+
+export const Default: Story = {
+  args: {
+    maxHeight: 320,
+  },
+  render: (args: ExpandableContentProps) => (
+    <ExpandableContent {...args}>
+      <LongTextContent />
+    </ExpandableContent>
+  ),
+};
+
+const ContentWithImages = () => (
+  <div>
+    <h2 className="mb-4 text-2xl font-bold">Content with Images</h2>
+    <p className="mb-4">
+      This content includes images that should be properly handled by the
+      component's height detection.
+    </p>
+    <img
+      src="https://picsum.photos/400/300"
+      alt="Random placeholder"
+      className="mb-4 w-full rounded-lg"
+    />
+    <p className="mb-4">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. The image above
+      should be included in the height calculation to properly show or hide the
+      "See More" button.
+    </p>
+    <img
+      src="https://picsum.photos/400/200"
+      alt="Another placeholder"
+      className="mb-4 w-full rounded-lg"
+    />
+    <p className="mb-4">
+      More content below the second image to ensure the total height exceeds the
+      maximum and triggers the expandable behavior.
+    </p>
+  </div>
+);
+
+export const WithImages: Story = {
+  args: {
+    maxHeight: 320,
+  },
+  render: (args: ExpandableContentProps) => (
+    <ExpandableContent {...args}>
+      <ContentWithImages />
+    </ExpandableContent>
+  ),
+};
diff --git a/packages/storybook/stories/components/ProgressCircle.stories.tsx b/packages/storybook/stories/components/ProgressCircle.stories.tsx
new file mode 100644
index 0000000000..a44bb2817b
--- /dev/null
+++ b/packages/storybook/stories/components/ProgressCircle.stories.tsx
@@ -0,0 +1,130 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import ProgressCircle from '@dailydotdev/shared/src/components/ProgressCircle';
+
+const meta: Meta<typeof ProgressCircle> = {
+  title: 'Components/ProgressCircle',
+  component: ProgressCircle,
+  tags: ['autodocs'],
+  argTypes: {
+    progress: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      description: 'Progress percentage (0-100)',
+    },
+    size: {
+      control: { type: 'number', min: 20, max: 200, step: 10 },
+      description: 'Size of the circle in pixels',
+    },
+    stroke: {
+      control: { type: 'number', min: 1, max: 20, step: 1 },
+      description: 'Stroke width of the circle',
+    },
+    color: {
+      control: 'color',
+      description: 'Color of the progress arc',
+    },
+    showPercentage: {
+      control: 'boolean',
+      description: 'Whether to show the percentage text in the center',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex items-center justify-center p-8">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ProgressCircle>;
+
+export const Default: Story = {
+  args: {
+    progress: 50,
+  },
+};
+
+export const ProgressStages: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-8">
+      {[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map((progress) => (
+        <div key={progress} className="flex flex-col items-center gap-2">
+          <ProgressCircle progress={progress} />
+          <span className="text-text-tertiary typo-caption1">{progress}%</span>
+        </div>
+      ))}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows the progress circle at different completion stages.',
+      },
+    },
+  },
+};
+
+export const WithLabels: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-12">
+      {[
+        { label: 'Profile', progress: 45 },
+        { label: 'Settings', progress: 80 },
+        { label: 'Verification', progress: 100 },
+        { label: 'Onboarding', progress: 25 },
+      ].map(({ label, progress }) => (
+        <div key={label} className="flex items-center gap-3">
+          <ProgressCircle progress={progress} />
+          <div className="flex flex-col">
+            <span className="typo-callout font-bold text-text-primary">
+              {label}
+            </span>
+            <span className="text-text-tertiary typo-caption1">
+              {progress}% complete
+            </span>
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example usage with labels and descriptions.',
+      },
+    },
+  },
+};
+
+export const WithPercentage: Story = {
+  args: {
+    progress: 65,
+    showPercentage: true,
+  },
+};
+
+export const PercentageVariations: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-8">
+      {[5, 25, 50, 75, 95].map((progress) => (
+        <div key={progress} className="flex flex-col items-center gap-2">
+          <ProgressCircle progress={progress} showPercentage size={56} />
+          <span className="text-text-tertiary typo-caption1">
+            {progress}% progress
+          </span>
+        </div>
+      ))}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Progress circles with percentage text at different stages.',
+      },
+    },
+  },
+};
+
diff --git a/packages/storybook/stories/features/profile/ActiveOrRecomendedSquads.stories.tsx b/packages/storybook/stories/features/profile/ActiveOrRecomendedSquads.stories.tsx
new file mode 100644
index 0000000000..0175e06f4d
--- /dev/null
+++ b/packages/storybook/stories/features/profile/ActiveOrRecomendedSquads.stories.tsx
@@ -0,0 +1,289 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fn } from 'storybook/test';
+import { ActiveOrRecomendedSquads } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/ActiveOrRecomendedSquads';
+import { ActiveOrRecomendedSquadsSkeleton } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/ActiveOrRecomendedSquadsComponents';
+import type { Squad } from '@dailydotdev/shared/src/graphql/sources';
+import { SourceType } from '@dailydotdev/shared/src/graphql/sources';
+import AuthContext from '@dailydotdev/shared/src/contexts/AuthContext';
+import { getLogContextStatic } from '@dailydotdev/shared/src/contexts/LogContext';
+import type { LoggedUser } from '@dailydotdev/shared/src/lib/user';
+import { cloudinarySquadsImageFallback } from '@dailydotdev/shared/src/lib/image';
+import { generateQueryKey, RequestKey } from '@dailydotdev/shared/src/lib/query';
+
+const LogContext = getLogContextStatic();
+
+const meta: Meta<typeof ActiveOrRecomendedSquads> = {
+  title: 'Features/Profile/ActiveOrRecomendedSquads',
+  component: ActiveOrRecomendedSquads,
+  tags: ['autodocs'],
+  argTypes: {
+    userId: {
+      control: 'text',
+      description: 'User ID',
+    },
+    squads: {
+      control: 'object',
+      description: 'Array of squads',
+    },
+  },
+  decorators: [
+    (Story) => {
+      const queryClient = new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+            staleTime: Infinity,
+          },
+        },
+      });
+
+      const mockUser: LoggedUser = {
+        id: 'user1',
+        name: 'John Doe',
+        username: 'johndoe',
+        image: 'https://daily.dev/user.png',
+        permalink: 'https://daily.dev/johndoe',
+        providers: ['google'],
+        premium: false,
+        reputation: 100,
+        createdAt: '2023-01-01',
+      };
+
+      return (
+        <QueryClientProvider client={queryClient}>
+          <AuthContext.Provider
+            value={{
+              user: mockUser,
+              shouldShowLogin: false,
+              showLogin: fn(),
+              logout: fn(),
+              updateUser: fn(),
+              tokenRefreshed: true,
+              isLoggedIn: true,
+              isAuthReady: true,
+              closeLogin: fn(),
+              getRedirectUri: fn(),
+              squads: [],
+            }}
+          >
+            <LogContext.Provider
+              value={{
+                logEvent: fn(),
+                logEventStart: fn(),
+                logEventEnd: fn(),
+                sendBeacon: fn(),
+              }}
+            >
+              <div className="p-4">
+                <Story />
+              </div>
+            </LogContext.Provider>
+          </AuthContext.Provider>
+        </QueryClientProvider>
+      );
+    },
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ActiveOrRecomendedSquads>;
+
+const createSquad = (
+  id: string,
+  name: string,
+  handle: string,
+  membersCount: number,
+): Squad => ({
+  id,
+  name,
+  handle,
+  membersCount,
+  image: cloudinarySquadsImageFallback,
+  permalink: `https://daily.dev/squads/${handle}`,
+  type: SourceType.Squad,
+  active: true,
+  public: true,
+  description: `${name} Squad`,
+  memberPostingRole: null,
+  memberInviteRole: null,
+  privilegedMembers: [],
+  currentMember: null,
+  moderationRequired: false,
+  flags: {},
+});
+
+const mockSquads: Squad[] = [
+  createSquad('1', 'JavaScript Developers', 'js-devs', 1234),
+  createSquad('2', 'React Enthusiasts', 'react', 567),
+  createSquad('3', 'TypeScript Masters', 'typescript', 890),
+  createSquad('4', 'Web3 Builders', 'web3', 345),
+  createSquad('5', 'DevOps Engineers', 'devops', 678),
+];
+
+export const Default: Story = {
+  args: {
+    userId: 'user1',
+    squads: [
+      ...mockSquads,
+      createSquad('6', 'Python Programmers', 'python', 456),
+      createSquad('7', 'Go Developers', 'golang', 234),
+      createSquad('8', 'Rust Hackers', 'rust', 567),
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'When more than 5 squads are present, a "Show all Squads" button appears to expand the list.',
+      },
+    },
+  },
+};
+
+export const RecommendedSquads: Story = {
+  args: {
+    userId: 'user1', // Same as logged-in user
+    squads: [], // No squads joined yet
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'When a user has no squads and is viewing their own profile, recommended squads are shown with Join buttons and a "View all" link to discover more squads.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => {
+      const queryClient = new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+            staleTime: Infinity,
+          },
+        },
+      });
+
+      const mockUser: LoggedUser = {
+        id: 'user1',
+        name: 'John Doe',
+        username: 'johndoe',
+        image: 'https://daily.dev/user.png',
+        permalink: 'https://daily.dev/johndoe',
+        providers: ['google'],
+        premium: false,
+        reputation: 100,
+        createdAt: '2023-01-01',
+      };
+
+      // Mock recommended squads data
+      const recommendedSquads = [
+        createSquad('rec1', 'JavaScript Developers', 'js-devs', 12450),
+        createSquad('rec2', 'React Enthusiasts', 'react-fans', 8760),
+        createSquad('rec3', 'TypeScript Masters', 'ts-masters', 5430),
+        createSquad('rec4', 'Web3 Builders', 'web3-build', 3210),
+        createSquad('rec5', 'DevOps Community', 'devops-comm', 6780),
+      ];
+
+      // Mock the useSources hook response with correct query key
+      const queryKey = generateQueryKey(
+        RequestKey.Sources,
+        null,
+        undefined, // featured
+        true, // isPublic
+        undefined, // categoryId
+        5, // first (MAX_SQUAD_COUNT)
+      );
+
+      queryClient.setQueryData(queryKey, {
+        pages: [
+          {
+            sources: {
+              edges: recommendedSquads.map((squad) => ({ node: squad })),
+              pageInfo: { hasNextPage: false, endCursor: null },
+            },
+          },
+        ],
+        pageParams: [''],
+      });
+
+      return (
+        <QueryClientProvider client={queryClient}>
+          <AuthContext.Provider
+            value={{
+              user: mockUser,
+              shouldShowLogin: false,
+              showLogin: fn(),
+              logout: fn(),
+              updateUser: fn(),
+              tokenRefreshed: true,
+              isLoggedIn: true,
+              isAuthReady: true,
+              closeLogin: fn(),
+              getRedirectUri: fn(),
+              squads: [], // User hasn't joined any squads
+            }}
+          >
+            <LogContext.Provider
+              value={{
+                logEvent: fn(),
+                logEventStart: fn(),
+                logEventEnd: fn(),
+                sendBeacon: fn(),
+              }}
+            >
+              <div className="p-4">
+                <Story />
+              </div>
+            </LogContext.Provider>
+          </AuthContext.Provider>
+        </QueryClientProvider>
+      );
+    },
+  ],
+};
+
+export const OtherUserProfile: Story = {
+  args: {
+    userId: 'differentUser',
+    squads: mockSquads.slice(0, 3),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'When viewing another user\'s profile (userId doesn\'t match logged-in user), their squads are shown without join buttons.',
+      },
+    },
+  },
+};
+
+export const OtherUserNoSquads: Story = {
+  args: {
+    userId: 'differentUser', // Different from logged-in user
+    squads: [], // This user hasn't joined any squads
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'When viewing another user\'s profile who hasn\'t joined any squads, nothing is shown. No recommendations appear since it\'s not your own profile.',
+      },
+    },
+  },
+};
+
+export const Loading: StoryObj<typeof ActiveOrRecomendedSquadsSkeleton> = {
+  render: () => <ActiveOrRecomendedSquadsSkeleton />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Loading skeleton state shown while fetching squad data. Displays animated placeholders for squad list items.',
+      },
+    },
+  },
+};
diff --git a/packages/storybook/stories/features/profile/BadgesAndAwards.stories.tsx b/packages/storybook/stories/features/profile/BadgesAndAwards.stories.tsx
new file mode 100644
index 0000000000..4e2e410e92
--- /dev/null
+++ b/packages/storybook/stories/features/profile/BadgesAndAwards.stories.tsx
@@ -0,0 +1,205 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BadgesAndAwards } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/BadgesAndAwards';
+import type { PublicProfile } from '@dailydotdev/shared/src/lib/user';
+import type { TopReader } from '@dailydotdev/shared/src/components/badges/TopReaderBadge';
+import { ProductType } from '@dailydotdev/shared/src/graphql/njord';
+import { AuthContextProvider } from '@dailydotdev/shared/src/contexts/AuthContext';
+import { BadgesAndAwardsSkeleton } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/BadgesAndAwardsComponents';
+import React from 'react';
+import { fn } from 'storybook/test';
+
+const meta: Meta<typeof BadgesAndAwards> = {
+  title: 'Features/Profile/BadgesAndAwards',
+  component: BadgesAndAwards,
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof BadgesAndAwards>;
+
+// Sample user data
+const defaultUser: PublicProfile = {
+  id: 'user-123',
+  name: 'John Doe',
+  username: 'johndoe',
+  premium: false,
+  reputation: 1250,
+  image: 'https://via.placeholder.com/40',
+  bio: 'Full-stack developer passionate about React and TypeScript',
+  createdAt: '2023-01-15T10:30:00Z',
+  permalink: 'https://app.daily.dev/johndoe',
+};
+
+// Sample badges data
+const sampleBadges: TopReader[] = [
+  {
+    id: 'badge-1',
+    user: {
+      name: 'John Doe',
+      image: 'https://via.placeholder.com/40',
+      username: 'johndoe',
+    },
+    keyword: {
+      value: 'javascript',
+      flags: { title: 'JavaScript Expert' },
+    },
+    total: 15,
+    issuedAt: '2024-01-15T10:00:00Z',
+  },
+  {
+    id: 'badge-2',
+    user: {
+      name: 'John Doe',
+      image: 'https://via.placeholder.com/40',
+      username: 'johndoe',
+    },
+    keyword: {
+      value: 'react',
+      flags: { title: 'React Master' },
+    },
+    total: 12,
+    issuedAt: '2024-01-10T09:30:00Z',
+  },
+  {
+    id: 'badge-3',
+    user: {
+      name: 'John Doe',
+      image: 'https://via.placeholder.com/40',
+      username: 'johndoe',
+    },
+    keyword: {
+      value: 'typescript',
+      flags: { title: 'TypeScript Pro' },
+    },
+    total: 8,
+    issuedAt: '2024-01-05T16:45:00Z',
+  },
+];
+
+// Sample awards data with real daily.dev images
+const sampleAwards = [
+  {
+    id: 'award-1',
+    name: 'Smiley Face',
+    image: 'https://media.daily.dev/image/upload/s--Ft4p9rjO--/f_auto/v1743664345/public/happy',
+    count: 3,
+  },
+  {
+    id: 'award-2',
+    name: 'Heart',
+    image: 'https://media.daily.dev/image/upload/s--IPWhKcis--/f_auto/v1743664345/public/Love',
+    count: 1,
+  },
+  {
+    id: 'award-3',
+    name: 'Coffee Mug',
+    image: 'https://media.daily.dev/image/upload/s--aenMzSPZ--/f_auto/v1743664347/public/Coffee',
+    count: 2,
+  },
+  {
+    id: 'award-4',
+    name: 'Star',
+    image: 'https://media.daily.dev/image/upload/s--PdFJ22B8--/f_auto/v1743664345/public/Star',
+    count: 1,
+  },
+  {
+    id: 'award-5',
+    name: 'Terminal',
+    image: 'https://media.daily.dev/image/upload/s--KBzEqo01--/f_auto/v1743664345/public/Terminal',
+    count: 1,
+  },
+  {
+    id: 'award-6',
+    name: 'Keyboard',
+    image: 'https://media.daily.dev/image/upload/s--Q65Srvfv--/f_auto/v1743664345/public/Keyboard',
+    count: 1,
+  },
+];
+
+// Helper to create a story with mocked data
+const createStory = (
+  user: PublicProfile,
+  topReaders?: TopReader[],
+  awards?: typeof sampleAwards,
+  coresRole: number = 1,
+) => {
+  return {
+    render: () => {
+      const queryClient = new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+            refetchOnMount: false,
+            refetchOnWindowFocus: false,
+            refetchOnReconnect: false,
+            staleTime: Infinity,
+            gcTime: Infinity,
+          },
+        },
+      });
+
+      const mockUser = {
+        ...user,
+        coresRole,
+        providers: [],
+        balance: {
+          amount: 0,
+        },
+      };
+
+      // Pre-populate the query cache before rendering
+      if (topReaders !== undefined) {
+        const topReaderKey = ['top_reader_badge', user.id, 'latest:5'];
+        queryClient.setQueryData(topReaderKey, topReaders);
+        queryClient.setQueryDefaults(topReaderKey, {
+          queryFn: () => Promise.resolve(topReaders),
+        });
+      }
+
+      if (awards !== undefined) {
+        const awardsKey = ['products', 'anonymous', 'summary', { userId: user.id, limit: undefined, type: ProductType.Award }];
+        queryClient.setQueryData(awardsKey, awards);
+        queryClient.setQueryDefaults(awardsKey, {
+          queryFn: () => Promise.resolve(awards),
+        });
+      }
+
+      return (
+        <QueryClientProvider client={queryClient}>
+          <AuthContextProvider 
+            user={mockUser}
+            updateUser={fn()}
+            tokenRefreshed={true}
+            getRedirectUri={fn()}
+            loadingUser={false}
+            loadedUserFromCache={true}
+            refetchBoot={fn()}
+            squads={[]}
+            isAndroidApp={false}
+          >
+            <BadgesAndAwards user={user} />
+          </AuthContextProvider>
+        </QueryClientProvider>
+      );
+    },
+  };
+};
+
+export const Default: Story = createStory(defaultUser, sampleBadges, sampleAwards);
+
+export const NoBadges: Story = createStory(defaultUser, [], sampleAwards);
+
+export const NoAwards: Story = createStory(defaultUser, sampleBadges, []);
+
+export const EmptyState: Story = createStory(defaultUser, [], []);
+
+export const NoCoresAccess: Story = createStory(defaultUser, sampleBadges, sampleAwards, 0);
+
+export const Loading: Story = {
+  render: () => {
+    return <BadgesAndAwardsSkeleton />;
+  },
+};
diff --git a/packages/storybook/stories/features/profile/ProfileCompletion.stories.tsx b/packages/storybook/stories/features/profile/ProfileCompletion.stories.tsx
new file mode 100644
index 0000000000..70b3e9493b
--- /dev/null
+++ b/packages/storybook/stories/features/profile/ProfileCompletion.stories.tsx
@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ProfileCompletion } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion';
+import type { PublicProfile } from '@dailydotdev/shared/src/lib/user';
+import type { UserExperienceLevel } from '@dailydotdev/shared/src/lib/user';
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { AuthContextProvider } from '@dailydotdev/shared/src/contexts/AuthContext';
+import { fn } from 'storybook/test';
+
+const mockUser: PublicProfile = {
+  id: 'user-123',
+  name: 'John Doe',
+  username: 'johndoe',
+  premium: false,
+  reputation: 1250,
+  image: 'https://via.placeholder.com/40',
+  bio: 'Full-stack developer passionate about React and TypeScript',
+  createdAt: '2023-01-15T10:30:00Z',
+  permalink: 'https://app.daily.dev/johndoe',
+  twitter: 'johndoe',
+  github: 'johndoe',
+  hashnode: 'johndoe',
+  portfolio: 'https://johndoe.dev',
+  roadmap: 'johndoe',
+  threads: 'johndoe',
+  codepen: 'johndoe',
+  reddit: 'johndoe',
+  stackoverflow: '123456/johndoe',
+  youtube: 'johndoe',
+  linkedin: 'johndoe',
+  mastodon: 'https://mastodon.social/@johndoe',
+  bluesky: 'johndoe.bsky.social',
+};
+
+const meta: Meta<typeof ProfileCompletion> = {
+  title: 'Features/Profile/ProfileCompletion',
+  component: ProfileCompletion,
+  parameters: {
+    layout: 'padded',
+  },
+  decorators: [
+    (Story) => {
+      const queryClient = new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+            refetchOnWindowFocus: false,
+          },
+        },
+      });
+
+      return (
+        <QueryClientProvider client={queryClient}>
+          <AuthContextProvider
+            user={mockUser}
+            updateUser={fn()}
+            tokenRefreshed={true}
+            getRedirectUri={fn()}
+            loadingUser={false}
+            loadedUserFromCache={true}
+            refetchBoot={fn()}
+            squads={[]}
+            isAndroidApp={false}
+          >
+            <div className="max-w-[352px]">
+              <Story />
+            </div>
+          </AuthContextProvider>
+        </QueryClientProvider>
+      );
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ProfileCompletion>;
+
+// Base user with all fields complete
+const completeUser: PublicProfile = {
+  id: 'user-123',
+  name: 'John Doe',
+  username: 'johndoe',
+  premium: false,
+  reputation: 1250,
+  image: 'https://via.placeholder.com/40',
+  bio: 'Full-stack developer passionate about React and TypeScript',
+  createdAt: '2023-01-15T10:30:00Z',
+  permalink: 'https://app.daily.dev/johndoe',
+  twitter: 'johndoe',
+  github: 'johndoe',
+  hashnode: 'johndoe',
+  portfolio: 'https://johndoe.dev',
+  roadmap: 'johndoe',
+  threads: 'johndoe',
+  codepen: 'johndoe',
+  reddit: 'johndoe',
+  stackoverflow: '123456/johndoe',
+  youtube: 'johndoe',
+  linkedin: 'johndoe',
+  mastodon: 'https://mastodon.social/@johndoe',
+  bluesky: 'johndoe.bsky.social',
+  experienceLevel: 'MORE_THAN_4_YEARS' as keyof typeof UserExperienceLevel,
+  companies: [
+    {
+      id: 'company-1',
+      name: 'Tech Corp',
+      image: 'https://via.placeholder.com/24',
+      createdAt: new Date('2023-01-01'),
+      updatedAt: new Date('2023-01-01'),
+    },
+  ],
+};
+
+/**
+ * When all profile completion items are missing.
+ * Shows 0% completion with all items listed.
+ */
+export const CompletelyEmpty: Story = {
+  args: {
+    user: {
+      ...completeUser,
+      image: '',
+      bio: '',
+      experienceLevel: undefined,
+      companies: undefined,
+    },
+  },
+};
+
diff --git a/packages/storybook/stories/features/profile/ReadingOverview.stories.tsx b/packages/storybook/stories/features/profile/ReadingOverview.stories.tsx
new file mode 100644
index 0000000000..bf32fa9135
--- /dev/null
+++ b/packages/storybook/stories/features/profile/ReadingOverview.stories.tsx
@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReadingOverview } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/ReadingOverview';
+import type { UserReadHistory, UserStreak, MostReadTag } from '@dailydotdev/shared/src/graphql/users';
+import { addDays, subDays, subMonths } from 'date-fns';
+import { AuthContextProvider } from '@dailydotdev/shared/src/contexts/AuthContext';
+import { fn } from 'storybook/test';
+
+const meta: Meta<typeof ReadingOverview> = {
+  title: 'Features/Profile/ReadingOverview',
+  component: ReadingOverview,
+  parameters: {
+    layout: 'padded',
+  },
+  decorators: [
+    (Story) => {
+      const queryClient = new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+          },
+        },
+      });
+      
+      const mockUser = {
+        id: 'storybook-user',
+        name: 'Storybook User',
+        username: 'storybook',
+        premium: false,
+        reputation: 100,
+        image: 'https://via.placeholder.com/40',
+        bio: 'Storybook test user',
+        createdAt: '2023-01-01T00:00:00Z',
+      };
+
+      return (
+        <QueryClientProvider client={queryClient}>
+          <AuthContextProvider 
+            user={mockUser}
+            updateUser={fn()}
+            tokenRefreshed={true}
+            getRedirectUri={fn()}
+            loadingUser={false}
+            loadedUserFromCache={true}
+            refetchBoot={fn()}
+            squads={[]}
+            isAndroidApp={false}
+          >
+            <Story />
+          </AuthContextProvider>
+        </QueryClientProvider>
+      );
+    },
+  ],
+  argTypes: {
+    isLoading: {
+      control: 'boolean',
+      description: 'Whether the component is in loading state',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ReadingOverview>;
+
+// Sample data
+const generateReadHistory = (days: number): UserReadHistory[] => {
+  const history: UserReadHistory[] = [];
+  const today = new Date();
+  
+  for (let i = 0; i < days; i++) {
+    const date = subDays(today, i);
+    const reads = Math.floor(Math.random() * 10) + 1;
+    history.push({
+      date: date.toISOString().split('T')[0],
+      reads,
+    });
+  }
+  
+  return history.reverse();
+};
+
+const defaultReadHistory = generateReadHistory(150);
+const defaultBefore = new Date();
+const defaultAfter = subMonths(defaultBefore, 5);
+
+const defaultStreak: UserStreak = {
+  max: 15,
+  total: 45,
+  current: 8,
+  weekStart: 1,
+  lastViewAt: new Date(),
+};
+
+const defaultMostReadTags: MostReadTag[] = [
+  { value: 'javascript', count: 25, percentage: 0.4, total: 62 },
+  { value: 'react', count: 18, percentage: 0.29, total: 62 },
+  { value: 'typescript', count: 12, percentage: 0.19, total: 62 },
+  { value: 'nodejs', count: 7, percentage: 0.11, total: 62 },
+];
+
+export const Default: Story = {
+  args: {
+    readHistory: defaultReadHistory,
+    before: defaultBefore,
+    after: defaultAfter,
+    streak: defaultStreak,
+    mostReadTags: defaultMostReadTags,
+    isLoading: false,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    readHistory: [],
+    before: defaultBefore,
+    after: defaultAfter,
+    streak: defaultStreak,
+    mostReadTags: [],
+    isLoading: true,
+  },
+};
+
+export const NoStreaks: Story = {
+  args: {
+    readHistory: defaultReadHistory,
+    before: defaultBefore,
+    after: defaultAfter,
+    streak: undefined,
+    mostReadTags: defaultMostReadTags,
+    isLoading: false,
+  },
+};
+
+export const NoTags: Story = {
+  args: {
+    readHistory: defaultReadHistory,
+    before: defaultBefore,
+    after: defaultAfter,
+    streak: defaultStreak,
+    mostReadTags: [],
+    isLoading: false,
+  },
+};
\ No newline at end of file
diff --git a/packages/storybook/stories/features/profile/Share.stories.tsx b/packages/storybook/stories/features/profile/Share.stories.tsx
new file mode 100644
index 0000000000..f48ba2ca0b
--- /dev/null
+++ b/packages/storybook/stories/features/profile/Share.stories.tsx
@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Share } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/Share';
+import { getLogContextStatic } from '@dailydotdev/shared/src/contexts/LogContext';
+import AuthContext from '@dailydotdev/shared/src/contexts/AuthContext';
+import { fn } from 'storybook/test';
+
+const meta: Meta<typeof Share> = {
+  title: 'Features/Profile/Share',
+  component: Share,
+  argTypes: {
+    username: {
+      control: 'text',
+      description: 'Username for the profile URL',
+    },
+  },
+  decorators: [
+    (Story) => {
+      const queryClient = new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+            staleTime: Infinity,
+          },
+        },
+      });
+
+      // Mock the short URL query
+      queryClient.setQueryData(['shortUrl'], 'https://dly.to/abc123');
+
+      const LogContext = getLogContextStatic();
+
+      const mockUser = {
+        id: '1',
+        name: 'Test User',
+        username: 'testuser',
+        email: 'test@example.com',
+        image:
+          'https://daily-now-res.cloudinary.com/image/upload/placeholder.jpg',
+        providers: ['google'],
+      };
+
+      return (
+        <QueryClientProvider client={queryClient}>
+          <AuthContext.Provider
+            value={{
+              user: mockUser,
+              shouldShowLogin: false,
+              showLogin: fn(),
+              logout: fn(),
+              updateUser: fn(),
+              tokenRefreshed: true,
+              getRedirectUri: fn(),
+              loadingUser: false,
+              loadedUserFromCache: true,
+              refetchBoot: fn(),
+              squads: [],
+              isAndroidApp: false,
+            }}
+          >
+            <LogContext.Provider
+              value={{
+                logEvent: () => {},
+                logEventStart: () => {},
+                logEventEnd: () => {},
+                sendBeacon: () => false,
+              }}
+            >
+              <div className="max-w-[400px]">
+                <Story />
+              </div>
+            </LogContext.Provider>
+          </AuthContext.Provider>
+        </QueryClientProvider>
+      );
+    },
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Share>;
+
+export const Default: Story = {
+  args: {
+    username: 'thecoverliker',
+  },
+};
diff --git a/packages/webapp/__tests__/AccountProfilePage.tsx b/packages/webapp/__tests__/AccountProfilePage.tsx
deleted file mode 100644
index 4eabff9402..0000000000
--- a/packages/webapp/__tests__/AccountProfilePage.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import React from 'react';
-import type { LoggedUser } from '@dailydotdev/shared/src/lib/user';
-import loggedUser from '@dailydotdev/shared/__tests__/fixture/loggedUser';
-import type { RenderResult } from '@testing-library/react';
-import { render, screen } from '@testing-library/react';
-import { AuthContextProvider } from '@dailydotdev/shared/src/contexts/AuthContext';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import AccountProfilePage from '../pages/settings/profile';
-
-jest.mock('next/router', () => ({
-  useRouter() {
-    return {
-      isFallback: false,
-    };
-  },
-}));
-
-beforeEach(() => {
-  jest.clearAllMocks();
-});
-
-const defaultLoggedUser: LoggedUser = {
-  ...loggedUser,
-  title: 'Daily Developer',
-  company: 'dailydev',
-  twitter: 'dailydotdev',
-  github: 'dailydotdev',
-  hashnode: 'dailydotdev',
-  portfolio: 'https://daily.dev/?key=vaue',
-  acceptedMarketing: true,
-  roadmap: 'dailydotdev',
-  threads: 'dailydotdev',
-  codepen: 'dailydotdev',
-  reddit: 'dailydotdev',
-  stackoverflow: '999999/dailydotdev',
-  youtube: 'dailydotdev',
-  linkedin: 'dailydotdev',
-  mastodon: 'https://mastodon.social/@dailydotdev',
-  bluesky: 'https://bsky.app/profile/dailydotdev.bsky.social',
-};
-const updateUser = jest.fn();
-
-const renderComponent = (): RenderResult => {
-  const client = new QueryClient();
-
-  return render(
-    <QueryClientProvider client={client}>
-      <AuthContextProvider
-        user={defaultLoggedUser}
-        updateUser={updateUser}
-        getRedirectUri={jest.fn()}
-        tokenRefreshed
-      >
-        <AccountProfilePage />
-      </AuthContextProvider>
-    </QueryClientProvider>,
-  );
-};
-
-it('should show profile image', async () => {
-  renderComponent();
-  const el = await screen.findByTestId('image_avatar_file');
-  expect(el).toHaveAttribute('src', defaultLoggedUser.image);
-});
-
-it('should show account information', () => {
-  renderComponent();
-  const name = screen.getByPlaceholderText('Name');
-  expect(name).toBeInTheDocument();
-  expect(name).toHaveValue(defaultLoggedUser.name);
-  const username = screen.getByPlaceholderText('Username');
-  expect(username).toBeInTheDocument();
-  expect(username).toHaveValue(defaultLoggedUser.username);
-});
-
-it('should show about section', () => {
-  renderComponent();
-  const bio = screen.getByPlaceholderText('Bio');
-  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', () => {
-  renderComponent();
-  const twitter = screen.getByPlaceholderText('X');
-  expect(twitter).toBeInTheDocument();
-  expect(twitter).toHaveValue(defaultLoggedUser.twitter);
-  const github = screen.getByPlaceholderText('GitHub');
-  expect(github).toBeInTheDocument();
-  expect(github).toHaveValue(defaultLoggedUser.github);
-  const portfolio = screen.getByPlaceholderText('Your Website');
-  expect(portfolio).toBeInTheDocument();
-  expect(portfolio).toHaveValue(defaultLoggedUser.portfolio);
-  const roadmap = screen.getByPlaceholderText('Roadmap.sh');
-  expect(roadmap).toBeInTheDocument();
-  expect(roadmap).toHaveValue(defaultLoggedUser.roadmap);
-  const threads = screen.getByPlaceholderText('Threads');
-  expect(threads).toBeInTheDocument();
-  expect(threads).toHaveValue(defaultLoggedUser.threads);
-  const codepen = screen.getByPlaceholderText('CodePen');
-  expect(codepen).toBeInTheDocument();
-  expect(codepen).toHaveValue(defaultLoggedUser.codepen);
-  const reddit = screen.getByPlaceholderText('Reddit');
-  expect(reddit).toBeInTheDocument();
-  expect(reddit).toHaveValue(defaultLoggedUser.reddit);
-  const stackoverflow = screen.getByPlaceholderText('Stack Overflow');
-  expect(stackoverflow).toBeInTheDocument();
-  expect(stackoverflow).toHaveValue(
-    `stackoverflow.com/users/${defaultLoggedUser.stackoverflow}`,
-  );
-  const youtube = screen.getByPlaceholderText('YouTube');
-  expect(youtube).toBeInTheDocument();
-  expect(youtube).toHaveValue(defaultLoggedUser.youtube);
-  const linkedin = screen.getByPlaceholderText('LinkedIn');
-  expect(linkedin).toBeInTheDocument();
-  expect(linkedin).toHaveValue(defaultLoggedUser.linkedin);
-  const mastodon = screen.getByPlaceholderText('Mastodon');
-  expect(mastodon).toBeInTheDocument();
-  expect(mastodon).toHaveValue(defaultLoggedUser.mastodon);
-  const bluesky = screen.getByPlaceholderText('Bluesky');
-  expect(bluesky).toBeInTheDocument();
-  expect(bluesky).toHaveValue(defaultLoggedUser.bluesky);
-});
diff --git a/packages/webapp/__tests__/ProfileIndexPage.tsx b/packages/webapp/__tests__/ProfileIndexPage.tsx
index b17312757b..2f87a8db41 100644
--- a/packages/webapp/__tests__/ProfileIndexPage.tsx
+++ b/packages/webapp/__tests__/ProfileIndexPage.tsx
@@ -10,7 +10,7 @@ import type {
 } from '@dailydotdev/shared/src/graphql/users';
 import { USER_READING_HISTORY_QUERY } from '@dailydotdev/shared/src/graphql/users';
 import { QueryClient } from '@tanstack/react-query';
-import { startOfTomorrow, subDays, subYears } from 'date-fns';
+import { startOfTomorrow, subDays, subMonths } from 'date-fns';
 import type { MockedGraphQLResponse } from '@dailydotdev/shared/__tests__/helpers/graphql';
 import { mockGraphQL } from '@dailydotdev/shared/__tests__/helpers/graphql';
 import { waitForNock } from '@dailydotdev/shared/__tests__/helpers/utilities';
@@ -43,7 +43,7 @@ const defaultTopTags: MostReadTag[] = [
 ];
 
 const before = startOfTomorrow();
-const after = subYears(subDays(before, 2), 1);
+const after = subMonths(subDays(before, 2), 5);
 
 const createReadingHistoryMock = (
   rankHistory: UserReadingRankHistory[] = [
@@ -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>,
   );
 };
@@ -107,13 +119,31 @@ it('should show the top reading tags of the user', async () => {
   renderComponent();
   await waitForNock();
   await screen.findByText('Top tags by reading days');
-  await Promise.all(
-    defaultTopTags.map(({ value: tag }) => screen.findByText(`#${tag}`)),
-  );
+  // Tags are rendered capitalized without the # prefix
+  await screen.findByText('Javascript');
+  await screen.findByText('Golang');
+  await screen.findByText('C#');
 });
 
-it('should show the readme of the user', async () => {
+it('should show the about me section with readme of the user', async () => {
   renderComponent();
   await waitForNock();
-  expect(await screen.findByText('This is my readme')).toBeInTheDocument();
+  const aboutMeHeadings = await screen.findAllByText('About me');
+  expect(aboutMeHeadings.length).toBeGreaterThan(0);
+  const readmeContent = await screen.findAllByText('This is my readme');
+  expect(readmeContent.length).toBeGreaterThan(0);
+});
+
+it('should show social links in about me section', async () => {
+  renderComponent();
+  await waitForNock();
+  const twitterLinks = await screen.findAllByTestId('social-link-twitter');
+  expect(twitterLinks.length).toBeGreaterThan(0);
+  expect(twitterLinks[0]).toHaveAttribute('href', 'https://x.com/dailydotdev');
+  const githubLinks = await screen.findAllByTestId('social-link-github');
+  expect(githubLinks.length).toBeGreaterThan(0);
+  expect(githubLinks[0]).toHaveAttribute(
+    'href',
+    'https://github.com/dailydotdev',
+  );
 });
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 ee24750adb..0000000000
--- 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 68128db5ca..0000000000
--- 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/ProfileExperienceDetailPage.tsx b/packages/webapp/components/layouts/ProfileLayout/ProfileExperienceDetailPage.tsx
new file mode 100644
index 0000000000..ea08248b9c
--- /dev/null
+++ b/packages/webapp/components/layouts/ProfileLayout/ProfileExperienceDetailPage.tsx
@@ -0,0 +1,74 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { NextSeo } from 'next-seo';
+import type { NextSeoProps } from 'next-seo/lib/types';
+import { MoveToIcon } from '@dailydotdev/shared/src/components/icons';
+import {
+  Button,
+  ButtonSize,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  Typography,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
+import Link from '@dailydotdev/shared/src/components/utilities/Link';
+import { webappUrl } from '@dailydotdev/shared/src/lib/constants';
+import { UserExperienceList } from '@dailydotdev/shared/src/features/profile/components/experience/UserExperiencesList';
+import type { UserExperience } from '@dailydotdev/shared/src/graphql/user/profile';
+import type { ProfileLayoutProps } from './index';
+import { getProfileSeoDefaults } from './index';
+import { getTemplatedTitle } from '../utils';
+
+interface ProfileExperienceDetailPageProps extends ProfileLayoutProps {
+  experiences: UserExperience[] | undefined;
+  title: string;
+  seoTitle: string;
+}
+
+export function ProfileExperienceDetailPage({
+  user,
+  noindex,
+  experiences,
+  title,
+  seoTitle,
+}: ProfileExperienceDetailPageProps): ReactElement {
+  const seo: NextSeoProps = {
+    ...getProfileSeoDefaults(
+      user,
+      {
+        title: getTemplatedTitle(seoTitle),
+      },
+      noindex,
+    ),
+  };
+
+  if (!experiences || experiences.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <NextSeo {...seo} />
+      <div className="rounded-16 border border-border-subtlest-tertiary">
+        <header className="flex h-14 items-center gap-1 border-b border-border-subtlest-tertiary px-4">
+          <Link href={`${webappUrl}/${user.username}`} passHref>
+            <Button
+              size={ButtonSize.Small}
+              icon={<MoveToIcon className="rotate-180" />}
+            />
+          </Link>
+          <Typography type={TypographyType.Title3} bold>
+            {title}
+          </Typography>
+        </header>
+        <div className="px-6">
+          <UserExperienceList
+            experienceType={experiences[0].type}
+            experiences={experiences}
+            user={user}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/packages/webapp/components/layouts/ProfileLayout/index.tsx b/packages/webapp/components/layouts/ProfileLayout/index.tsx
index 77fed66372..7c523516a7 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,
@@ -17,22 +17,16 @@ import type { ClientError } from 'graphql-request';
 import type { ProfileV2 } from '@dailydotdev/shared/src/graphql/users';
 import Head from 'next/head';
 import type { NextSeoProps } from 'next-seo';
-import { PageWidgets } from '@dailydotdev/shared/src/components/utilities';
 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';
+import { ProfileWidgets } from '../../../../shared/src/features/profile/components/ProfileWidgets/ProfileWidgets';
+import { useProfileSidebarCollapse } from '../../../hooks/useProfileSidebarCollapse';
 
 const Custom404 = dynamic(
   () => import(/* webpackChunkName: "404" */ '../../../pages/404'),
@@ -81,17 +75,14 @@ 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();
 
+  // Auto-collapse sidebar on small screens
+  useProfileSidebarCollapse();
+
   useEffect(() => {
     if (trackedView || !user) {
       return;
@@ -119,48 +110,23 @@ 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="profile-page m-auto flex w-full flex-col pb-12 tablet:pb-0 laptop:min-h-page laptop:max-w-5xl laptop:flex-row laptop:gap-4 laptop:p-4 laptop:pb-6 laptopL:max-w-6xl">
+      <Head>
+        <link rel="preload" as="image" href={user.image} />
+      </Head>
+      <main className="relative flex flex-1 flex-col laptop:max-w-2xl laptopL:max-w-3xl">
+        {children}
+      </main>
+      <aside className="hidden min-w-0 laptop:flex laptop:max-w-80 laptop:flex-shrink laptop:flex-col">
+        <ProfileWidgets
+          user={user}
+          userStats={userStats}
+          sources={sources}
+          className="w-full"
+        />
+      </aside>
+    </div>
   );
 }
 
diff --git a/packages/webapp/components/layouts/SettingsLayout/Profile/index.tsx b/packages/webapp/components/layouts/SettingsLayout/Profile/index.tsx
index faaa9eb789..6390c60b18 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,199 @@ import {
   TwitterIcon,
   UserIcon,
   YoutubeIcon,
+  TerminalIcon,
 } 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 useProfileForm from '@dailydotdev/shared/src/hooks/useProfileForm';
+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 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 useUserInfoForm from '@dailydotdev/shared/src/hooks/useUserInfoForm';
 import { AccountPageContainer } from '../AccountPageContainer';
-import { VerifiedCompanyBadgeSection } from './VerifiedCompanyBadge/VerifiedCompanyBadgeSection';
-import type { VerifiedCompanyBadgeSectionProps } from './VerifiedCompanyBadge/VerifiedCompanyBadgeSection';
-
-const imageId = 'avatar_file';
-const coverId = 'cover_file';
-
-const ProfileIndex = ({
-  ...props
-}: VerifiedCompanyBadgeSectionProps): ReactElement => {
-  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 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(() => {
-          router.reload();
-        }),
-    };
-    updateUserProfile(params);
-  };
 
-  const { mutate: uploadCoverImage } = useMutation<
-    { user: LoggedUser },
-    ResponseError,
-    { image: File }
-  >({
-    mutationFn: ({ image }) =>
-      gqlClient.request(UPLOAD_COVER_MUTATION, {
-        upload: image,
-      }),
+const Section = classed('section', 'flex flex-col gap-7');
 
-    onSuccess: async (res) => {
-      await updateUser({ ...user, cover: res.user.cover } as LoggedUser);
-      displayToast('Cover image updated');
-    },
+const ProfileIndex = (): ReactElement => {
+  const { user } = useContext(AuthContext);
+  const { methods, save, isLoading } = useUserInfoForm();
 
-    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>
-  );
-
-  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!"
+  const handleSubmit = methods.handleSubmit(() => save());
+  return (
+    <FormProvider {...methods}>
+      <form className="flex flex-1" onSubmit={handleSubmit}>
+        <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>
+              <ProfileLocation
+                locationName="externalLocationId"
+                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/hooks/useProfileSidebarCollapse.ts b/packages/webapp/hooks/useProfileSidebarCollapse.ts
new file mode 100644
index 0000000000..cf2a4d0738
--- /dev/null
+++ b/packages/webapp/hooks/useProfileSidebarCollapse.ts
@@ -0,0 +1,56 @@
+import { useEffect, useRef } from 'react';
+import { useSettingsContext } from '@dailydotdev/shared/src/contexts/SettingsContext';
+
+const COLLAPSE_BREAKPOINT = 1360;
+
+/**
+ * Auto-collapses sidebar on profile pages when screen is below 1360px
+ * */
+
+export const useProfileSidebarCollapse = () => {
+  const { sidebarExpanded, toggleSidebarExpanded, loadedSettings } =
+    useSettingsContext();
+  // Refs to avoid stale closures and unnecessary effect re-runs
+  const sidebarExpandedRef = useRef(sidebarExpanded);
+  const toggleSidebarExpandedRef = useRef(toggleSidebarExpanded);
+
+  // Keep refs in sync
+  useEffect(() => {
+    sidebarExpandedRef.current = sidebarExpanded;
+    toggleSidebarExpandedRef.current = toggleSidebarExpanded;
+  }, [sidebarExpanded, toggleSidebarExpanded]);
+
+  // Auto-collapse on mount (runs once when settings load)
+  useEffect(() => {
+    if (!loadedSettings) {
+      return;
+    }
+
+    const isSmallScreen = window.matchMedia(
+      `(max-width: ${COLLAPSE_BREAKPOINT - 1}px)`,
+    ).matches;
+
+    if (isSmallScreen && sidebarExpanded) {
+      toggleSidebarExpanded();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loadedSettings]);
+
+  // Handle resize from big to small (runs once on mount, listener persists)
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(
+      `(max-width: ${COLLAPSE_BREAKPOINT - 1}px)`,
+    );
+
+    const handleBreakpointChange = (e: MediaQueryListEvent) => {
+      // Use refs to access current values without re-creating listener
+      if (e.matches && sidebarExpandedRef.current) {
+        toggleSidebarExpandedRef.current();
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleBreakpointChange);
+    return () =>
+      mediaQuery.removeEventListener('change', handleBreakpointChange);
+  }, []); // Empty deps = runs once, listener stays active
+};
diff --git a/packages/webapp/pages/[userId]/certification.tsx b/packages/webapp/pages/[userId]/certification.tsx
new file mode 100644
index 0000000000..695e49b076
--- /dev/null
+++ b/packages/webapp/pages/[userId]/certification.tsx
@@ -0,0 +1,33 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useProfileExperiences } from '@dailydotdev/shared/src/features/profile/hooks/useProfileExperiences';
+import type { ProfileLayoutProps } from '../../components/layouts/ProfileLayout';
+import {
+  getLayout as getProfileLayout,
+  getStaticPaths as getProfileStaticPaths,
+  getStaticProps as getProfileStaticProps,
+} from '../../components/layouts/ProfileLayout';
+import { ProfileExperienceDetailPage } from '../../components/layouts/ProfileLayout/ProfileExperienceDetailPage';
+
+export const getStaticProps = getProfileStaticProps;
+export const getStaticPaths = getProfileStaticPaths;
+
+const CertificationsPage = ({
+  user,
+  noindex,
+}: ProfileLayoutProps): ReactElement => {
+  const { cert } = useProfileExperiences(user);
+
+  return (
+    <ProfileExperienceDetailPage
+      user={user}
+      noindex={noindex}
+      experiences={cert}
+      title="Certifications"
+      seoTitle={`Certifications for ${user.name} (@${user.username})`}
+    />
+  );
+};
+
+CertificationsPage.getLayout = getProfileLayout;
+export default CertificationsPage;
diff --git a/packages/webapp/pages/[userId]/education.tsx b/packages/webapp/pages/[userId]/education.tsx
new file mode 100644
index 0000000000..e073aa2f93
--- /dev/null
+++ b/packages/webapp/pages/[userId]/education.tsx
@@ -0,0 +1,30 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useProfileExperiences } from '@dailydotdev/shared/src/features/profile/hooks/useProfileExperiences';
+import type { ProfileLayoutProps } from '../../components/layouts/ProfileLayout';
+import {
+  getLayout as getProfileLayout,
+  getStaticPaths as getProfileStaticPaths,
+  getStaticProps as getProfileStaticProps,
+} from '../../components/layouts/ProfileLayout';
+import { ProfileExperienceDetailPage } from '../../components/layouts/ProfileLayout/ProfileExperienceDetailPage';
+
+export const getStaticProps = getProfileStaticProps;
+export const getStaticPaths = getProfileStaticPaths;
+
+const EducationPage = ({ user, noindex }: ProfileLayoutProps): ReactElement => {
+  const { education } = useProfileExperiences(user);
+
+  return (
+    <ProfileExperienceDetailPage
+      user={user}
+      noindex={noindex}
+      experiences={education}
+      title="Education"
+      seoTitle={`Education for ${user.name} (@${user.username})`}
+    />
+  );
+};
+
+EducationPage.getLayout = getProfileLayout;
+export default EducationPage;
diff --git a/packages/webapp/pages/[userId]/index.tsx b/packages/webapp/pages/[userId]/index.tsx
index 35f24e0be9..5640400435 100644
--- a/packages/webapp/pages/[userId]/index.tsx
+++ b/packages/webapp/pages/[userId]/index.tsx
@@ -1,112 +1,112 @@
 import type { ReactElement } from 'react';
-import React 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';
-import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
-import { useActivityTimeFilter } from '@dailydotdev/shared/src/hooks/profile/useActivityTimeFilter';
-import { ReadingTagsWidget } from '@dailydotdev/shared/src/components/profile/ReadingTagsWidget';
-import { ReadingHeatmapWidget } from '@dailydotdev/shared/src/components/profile/ReadingHeatmapWidget';
-import {
-  generateQueryKey,
-  RequestKey,
-} from '@dailydotdev/shared/src/lib/query';
-import { Readme } from '@dailydotdev/shared/src/components/profile/Readme';
+import React, { useMemo } from 'react';
+import { AboutMe } from '@dailydotdev/shared/src/features/profile/components/AboutMe';
+import { Activity } from '@dailydotdev/shared/src/features/profile/components/Activity';
 import { useProfile } from '@dailydotdev/shared/src/hooks/profile/useProfile';
-import { useJoinReferral } from '@dailydotdev/shared/src/hooks';
-import { gqlClient } from '@dailydotdev/shared/src/graphql/common';
+import { useActions, useJoinReferral } from '@dailydotdev/shared/src/hooks';
 import { NextSeo } from 'next-seo';
 import type { NextSeoProps } from 'next-seo/lib/types';
-import dynamic from 'next/dynamic';
-import { useHasAccessToCores } from '@dailydotdev/shared/src/hooks/useCoresFeature';
-import type { ProfileLayoutProps } from '../../components/layouts/ProfileLayout';
+import ProfileHeader from '@dailydotdev/shared/src/components/profile/ProfileHeader';
+import { AutofillProfileBanner } from '@dailydotdev/shared/src/features/profile/components/AutofillProfileBanner';
+import { ProfileUserExperiences } from '@dailydotdev/shared/src/features/profile/components/experience/ProfileUserExperiences';
+import { useUploadCv } from '@dailydotdev/shared/src/features/profile/hooks/useUploadCv';
+import { ActionType } from '@dailydotdev/shared/src/graphql/actions';
+import { ProfileWidgets } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/ProfileWidgets';
+import {
+  TypographyType,
+  TypographyTag,
+  TypographyColor,
+  Typography,
+} from '@dailydotdev/shared/src/components/typography/Typography';
+import { useDynamicHeader } from '@dailydotdev/shared/src/useDynamicHeader';
+import { Header } from '@dailydotdev/shared/src/components/profile/Header';
+import classNames from 'classnames';
+import { ProfileCompletion } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion';
+import { Share } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/Share';
 import {
   getLayout as getProfileLayout,
   getProfileSeoDefaults,
   getStaticPaths as getProfileStaticPaths,
   getStaticProps as getProfileStaticProps,
 } from '../../components/layouts/ProfileLayout';
-import { ReadingStreaksWidget } from '../../../shared/src/components/profile/ReadingStreaksWidget';
-import { TopReaderWidget } from '../../../shared/src/components/profile/TopReaderWidget';
-
-const Awards = dynamic(
-  () =>
-    import('@dailydotdev/shared/src/components/profile/Awards').then(
-      (mod) => mod.Awards,
-    ),
-  {
-    ssr: false,
-  },
-);
+import type { ProfileLayoutProps } from '../../components/layouts/ProfileLayout';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const ProfilePage = ({
   user: initialUser,
   noindex,
+  userStats,
+  sources,
 }: ProfileLayoutProps): ReactElement => {
   useJoinReferral();
-  const { tokenRefreshed } = useAuthContext();
-  const hasCoresAccess = useHasAccessToCores();
-
-  const { selectedHistoryYear, before, after, yearOptions, fullHistory } =
-    useActivityTimeFilter();
-
-  const { user } = useProfile(initialUser);
-
-  const { data: readingHistory, isLoading } = useQuery<ProfileReadingData>({
-    queryKey: generateQueryKey(
-      RequestKey.ReadingStats,
-      user,
-      selectedHistoryYear,
-    ),
+  const { status, onUpload, shouldShow } = useUploadCv();
+  const { checkHasCompleted } = useActions();
+  const hasClosedBanner = useMemo(
+    () => checkHasCompleted(ActionType.ClosedProfileBanner),
+    [checkHasCompleted],
+  );
 
-    queryFn: () =>
-      gqlClient.request(USER_READING_HISTORY_QUERY, {
-        id: user?.id,
-        before,
-        after,
-        version: 2,
-        limit: 6,
-      }),
-    enabled: !!user && tokenRefreshed && !!before && !!after,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-    refetchOnMount: false,
-  });
+  const { user, isUserSame } = useProfile(initialUser);
+  const { ref: stickyRef, progress: stickyProgress } =
+    useDynamicHeader<HTMLDivElement>(true);
+  const hideSticky = !stickyProgress;
 
   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">
-        <Readme user={user} />
-        {hasCoresAccess && <Awards userId={user?.id} />}
-        <TopReaderWidget user={user} />
-        {!!readingHistory?.userStreakProfile && (
-          <ReadingStreaksWidget
-            streak={readingHistory?.userStreakProfile}
-            isLoading={isLoading}
+      <Header
+        user={user}
+        isSameUser={isUserSame}
+        sticky={!hideSticky}
+        className={classNames(
+          'left-0 top-0 z-3 w-full bg-background-default transition-all duration-75 laptop:hidden',
+          !hideSticky ? 'fixed tablet:pl-20' : 'relative',
+        )}
+      />
+      {isUserSame && (
+        <ProfileCompletion user={user} className="laptop:hidden" />
+      )}
+      <div ref={stickyRef} />
+      <ProfileHeader user={user} userStats={userStats} />
+      <div className="flex flex-col divide-y divide-border-subtlest-tertiary p-6">
+        {shouldShowBanner && (
+          <AutofillProfileBanner
+            onUpload={onUpload}
+            isLoading={status === 'pending'}
           />
         )}
-        {readingHistory?.userReadingRankHistory && (
-          <>
-            <ReadingTagsWidget
-              mostReadTags={readingHistory?.userMostReadTags}
-            />
-            <ReadingHeatmapWidget
-              fullHistory={fullHistory}
-              selectedHistoryYear={selectedHistoryYear}
-              readHistory={readingHistory?.userReadHistory}
-              before={before}
-              after={after}
-              yearOptions={yearOptions}
-            />
-          </>
+        {!shouldShowBanner && <div />}
+        <AboutMe user={user} />
+        <Activity user={user} />
+        {isUserSame && (
+          <Share permalink={user?.permalink} className="laptop:hidden" />
         )}
+        <div className="py-4 laptop:hidden">
+          <Typography
+            type={TypographyType.Body}
+            tag={TypographyTag.H1}
+            color={TypographyColor.Primary}
+            bold
+            className="laptop:hidden"
+          >
+            Highlights
+          </Typography>
+          <ProfileWidgets
+            user={user}
+            userStats={userStats}
+            sources={sources}
+            className="no-scrollbar overflow-auto laptop:hidden"
+          />
+        </div>
+        <ProfileUserExperiences user={user} />
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/packages/webapp/pages/[userId]/opensource.tsx b/packages/webapp/pages/[userId]/opensource.tsx
new file mode 100644
index 0000000000..a516e2934c
--- /dev/null
+++ b/packages/webapp/pages/[userId]/opensource.tsx
@@ -0,0 +1,33 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useProfileExperiences } from '@dailydotdev/shared/src/features/profile/hooks/useProfileExperiences';
+import type { ProfileLayoutProps } from '../../components/layouts/ProfileLayout';
+import {
+  getLayout as getProfileLayout,
+  getStaticPaths as getProfileStaticPaths,
+  getStaticProps as getProfileStaticProps,
+} from '../../components/layouts/ProfileLayout';
+import { ProfileExperienceDetailPage } from '../../components/layouts/ProfileLayout/ProfileExperienceDetailPage';
+
+export const getStaticProps = getProfileStaticProps;
+export const getStaticPaths = getProfileStaticPaths;
+
+const OpensourcePage = ({
+  user,
+  noindex,
+}: ProfileLayoutProps): ReactElement => {
+  const { opensource } = useProfileExperiences(user);
+
+  return (
+    <ProfileExperienceDetailPage
+      user={user}
+      noindex={noindex}
+      experiences={opensource}
+      title="Open Source"
+      seoTitle={`Open source contributions for ${user.name} (@${user.username})`}
+    />
+  );
+};
+
+OpensourcePage.getLayout = getProfileLayout;
+export default OpensourcePage;
diff --git a/packages/webapp/pages/[userId]/posts.tsx b/packages/webapp/pages/[userId]/posts.tsx
index 8ddbe85d58..2f1389685a 100644
--- a/packages/webapp/pages/[userId]/posts.tsx
+++ b/packages/webapp/pages/[userId]/posts.tsx
@@ -12,6 +12,11 @@ import { useFeedLayout } from '@dailydotdev/shared/src/hooks';
 import classNames from 'classnames';
 import { NextSeo } from 'next-seo';
 import type { NextSeoProps } from 'next-seo/lib/types';
+import GoBackHeaderMobile from '@dailydotdev/shared/src/components/post/GoBackHeaderMobile';
+import {
+  Typography,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
 import type { ProfileLayoutProps } from '../../components/layouts/ProfileLayout';
 import {
   getLayout as getProfileLayout,
@@ -72,6 +77,11 @@ const ProfilePostsPage = ({
   return (
     <>
       <NextSeo {...seo} />
+      <GoBackHeaderMobile>
+        <Typography bold type={TypographyType.Body}>
+          Posts
+        </Typography>
+      </GoBackHeaderMobile>
       <Feed
         {...feedProps}
         className={classNames('py-6', !shouldUseListFeedLayout && 'px-4')}
diff --git a/packages/webapp/pages/[userId]/project.tsx b/packages/webapp/pages/[userId]/project.tsx
new file mode 100644
index 0000000000..8ba86521a6
--- /dev/null
+++ b/packages/webapp/pages/[userId]/project.tsx
@@ -0,0 +1,30 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useProfileExperiences } from '@dailydotdev/shared/src/features/profile/hooks/useProfileExperiences';
+import type { ProfileLayoutProps } from '../../components/layouts/ProfileLayout';
+import {
+  getLayout as getProfileLayout,
+  getStaticPaths as getProfileStaticPaths,
+  getStaticProps as getProfileStaticProps,
+} from '../../components/layouts/ProfileLayout';
+import { ProfileExperienceDetailPage } from '../../components/layouts/ProfileLayout/ProfileExperienceDetailPage';
+
+export const getStaticProps = getProfileStaticProps;
+export const getStaticPaths = getProfileStaticPaths;
+
+const ProjectsPage = ({ user, noindex }: ProfileLayoutProps): ReactElement => {
+  const { project } = useProfileExperiences(user);
+
+  return (
+    <ProfileExperienceDetailPage
+      user={user}
+      noindex={noindex}
+      experiences={project}
+      title="Projects"
+      seoTitle={`Projects for ${user.name} (@${user.username})`}
+    />
+  );
+};
+
+ProjectsPage.getLayout = getProfileLayout;
+export default ProjectsPage;
diff --git a/packages/webapp/pages/[userId]/replies.tsx b/packages/webapp/pages/[userId]/replies.tsx
index 26106f7912..ca33ad867e 100644
--- a/packages/webapp/pages/[userId]/replies.tsx
+++ b/packages/webapp/pages/[userId]/replies.tsx
@@ -12,6 +12,11 @@ import { ProfileEmptyScreen } from '@dailydotdev/shared/src/components/profile/P
 import CommentFeed from '@dailydotdev/shared/src/components/CommentFeed';
 import type { NextSeoProps } from 'next-seo/lib/types';
 import { NextSeo } from 'next-seo';
+import GoBackHeaderMobile from '@dailydotdev/shared/src/components/post/GoBackHeaderMobile';
+import {
+  Typography,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
 import type { ProfileLayoutProps } from '../../components/layouts/ProfileLayout';
 import {
   getStaticPaths as getProfileStaticPaths,
@@ -69,6 +74,11 @@ const ProfileCommentsPage = ({
   return (
     <>
       <NextSeo {...seo} />
+      <GoBackHeaderMobile>
+        <Typography bold type={TypographyType.Body}>
+          Replies
+        </Typography>
+      </GoBackHeaderMobile>
       <CommentFeed
         feedQueryKey={generateQueryKey(RequestKey.UserComments, null, userId)}
         query={USER_COMMENTS_QUERY}
diff --git a/packages/webapp/pages/[userId]/upvoted.tsx b/packages/webapp/pages/[userId]/upvoted.tsx
index e89f5258f6..aa57827885 100644
--- a/packages/webapp/pages/[userId]/upvoted.tsx
+++ b/packages/webapp/pages/[userId]/upvoted.tsx
@@ -11,6 +11,11 @@ import { useFeedLayout } from '@dailydotdev/shared/src/hooks';
 import classNames from 'classnames';
 import type { NextSeoProps } from 'next-seo/lib/types';
 import { NextSeo } from 'next-seo';
+import GoBackHeaderMobile from '@dailydotdev/shared/src/components/post/GoBackHeaderMobile';
+import {
+  Typography,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
 import type { ProfileLayoutProps } from '../../components/layouts/ProfileLayout';
 import {
   getStaticPaths as getProfileStaticPaths,
@@ -72,6 +77,11 @@ const ProfileUpvotedPage = ({
   return (
     <>
       <NextSeo {...seo} />
+      <GoBackHeaderMobile>
+        <Typography bold type={TypographyType.Body}>
+          Upvoted posts
+        </Typography>
+      </GoBackHeaderMobile>
       <Feed
         {...feedProps}
         className={classNames('py-6', !shouldUseListFeedLayout && 'px-4')}
diff --git a/packages/webapp/pages/[userId]/volunteering.tsx b/packages/webapp/pages/[userId]/volunteering.tsx
new file mode 100644
index 0000000000..ca95aa22ec
--- /dev/null
+++ b/packages/webapp/pages/[userId]/volunteering.tsx
@@ -0,0 +1,33 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useProfileExperiences } from '@dailydotdev/shared/src/features/profile/hooks/useProfileExperiences';
+import type { ProfileLayoutProps } from '../../components/layouts/ProfileLayout';
+import {
+  getLayout as getProfileLayout,
+  getStaticPaths as getProfileStaticPaths,
+  getStaticProps as getProfileStaticProps,
+} from '../../components/layouts/ProfileLayout';
+import { ProfileExperienceDetailPage } from '../../components/layouts/ProfileLayout/ProfileExperienceDetailPage';
+
+export const getStaticProps = getProfileStaticProps;
+export const getStaticPaths = getProfileStaticPaths;
+
+const VolunteeringPage = ({
+  user,
+  noindex,
+}: ProfileLayoutProps): ReactElement => {
+  const { volunteering } = useProfileExperiences(user);
+
+  return (
+    <ProfileExperienceDetailPage
+      user={user}
+      noindex={noindex}
+      experiences={volunteering}
+      title="Volunteering"
+      seoTitle={`Volunteering experience for ${user.name} (@${user.username})`}
+    />
+  );
+};
+
+VolunteeringPage.getLayout = getProfileLayout;
+export default VolunteeringPage;
diff --git a/packages/webapp/pages/[userId]/work.tsx b/packages/webapp/pages/[userId]/work.tsx
new file mode 100644
index 0000000000..b80350141c
--- /dev/null
+++ b/packages/webapp/pages/[userId]/work.tsx
@@ -0,0 +1,33 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useProfileExperiences } from '@dailydotdev/shared/src/features/profile/hooks/useProfileExperiences';
+import type { ProfileLayoutProps } from '../../components/layouts/ProfileLayout';
+import {
+  getLayout as getProfileLayout,
+  getStaticPaths as getProfileStaticPaths,
+  getStaticProps as getProfileStaticProps,
+} from '../../components/layouts/ProfileLayout';
+import { ProfileExperienceDetailPage } from '../../components/layouts/ProfileLayout/ProfileExperienceDetailPage';
+
+export const getStaticProps = getProfileStaticProps;
+export const getStaticPaths = getProfileStaticPaths;
+
+const WorkExperiencePage = ({
+  user,
+  noindex,
+}: ProfileLayoutProps): ReactElement => {
+  const { work } = useProfileExperiences(user);
+
+  return (
+    <ProfileExperienceDetailPage
+      user={user}
+      noindex={noindex}
+      experiences={work}
+      title="Work Experience"
+      seoTitle={`Work experience for ${user.name} (@${user.username})`}
+    />
+  );
+};
+
+WorkExperiencePage.getLayout = getProfileLayout;
+export default WorkExperiencePage;
diff --git a/packages/webapp/pages/settings/profile.tsx b/packages/webapp/pages/settings/profile.tsx
index 9f483ddcbe..2c02d70175 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;
diff --git a/packages/webapp/pages/settings/profile/experience/certification.tsx b/packages/webapp/pages/settings/profile/experience/certification.tsx
new file mode 100644
index 0000000000..1b68748992
--- /dev/null
+++ b/packages/webapp/pages/settings/profile/experience/certification.tsx
@@ -0,0 +1,53 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import { PlusIcon } from '@dailydotdev/shared/src/components/icons';
+import type { NextSeoProps } from 'next-seo';
+import { UserExperienceType } from '@dailydotdev/shared/src/graphql/user/profile';
+import { ExperienceSettings } from '@dailydotdev/shared/src/components/profile/ExperienceSettings';
+import Link from '@dailydotdev/shared/src/components/utilities/Link';
+import { webappUrl } from '@dailydotdev/shared/src/lib/constants';
+import { getTemplatedTitle } from '../../../../components/layouts/utils';
+import { defaultSeo } from '../../../../next-seo';
+import { getSettingsLayout } from '../../../../components/layouts/SettingsLayout';
+import { AccountPageContainer } from '../../../../components/layouts/SettingsLayout/AccountPageContainer';
+
+const seo: NextSeoProps = {
+  ...defaultSeo,
+  title: getTemplatedTitle('Certifications'),
+};
+
+const CertificationsPage = (): ReactElement => {
+  return (
+    <AccountPageContainer
+      title="Certifications"
+      actions={
+        <Link
+          href={`${webappUrl}/settings/profile/experience/edit?type=${UserExperienceType.Certification}`}
+        >
+          <Button
+            variant={ButtonVariant.Subtle}
+            size={ButtonSize.Small}
+            icon={<PlusIcon />}
+          >
+            Add
+          </Button>
+        </Link>
+      }
+    >
+      <ExperienceSettings
+        experienceType={UserExperienceType.Certification}
+        emptyStateMessage="No certifications added yet"
+      />
+    </AccountPageContainer>
+  );
+};
+
+CertificationsPage.getLayout = getSettingsLayout;
+CertificationsPage.layoutProps = { seo };
+
+export default CertificationsPage;
diff --git a/packages/webapp/pages/settings/profile/experience/edit.tsx b/packages/webapp/pages/settings/profile/experience/edit.tsx
new file mode 100644
index 0000000000..7634a4f780
--- /dev/null
+++ b/packages/webapp/pages/settings/profile/experience/edit.tsx
@@ -0,0 +1,199 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { NextSeoProps } from 'next-seo';
+import { FormProvider } from 'react-hook-form';
+import UserWorkExperienceForm from '@dailydotdev/shared/src/features/profile/components/experience/forms/UserWorkExperienceForm';
+import UserEducationForm from '@dailydotdev/shared/src/features/profile/components/experience/forms/UserEducationForm';
+import UserCertificationForm from '@dailydotdev/shared/src/features/profile/components/experience/forms/UserCertificationForm';
+import UserProjectExperienceForm from '@dailydotdev/shared/src/features/profile/components/experience/forms/UserProjectExperienceForm';
+import DeleteExperienceButton from '@dailydotdev/shared/src/features/profile/components/experience/DeleteExperienceButton';
+import UserVolunteeringExperienceForm from '@dailydotdev/shared/src/features/profile/components/experience/forms/UserVolunteeringExperienceForm';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import type { UserExperience } from '@dailydotdev/shared/src/graphql/user/profile';
+import useUserExperienceForm from '@dailydotdev/shared/src/hooks/useUserExperienceForm';
+import {
+  getUserExperienceById,
+  UserExperienceType,
+} from '@dailydotdev/shared/src/graphql/user/profile';
+import type { GetServerSideProps } from 'next';
+import type { TLocation } from '@dailydotdev/shared/src/graphql/autocomplete';
+import { useRouter } from 'next/router';
+import { getSettingsLayout } from '../../../../components/layouts/SettingsLayout';
+import { AccountPageContainer } from '../../../../components/layouts/SettingsLayout/AccountPageContainer';
+import { defaultSeo } from '../../../../next-seo';
+import { getTemplatedTitle } from '../../../../components/layouts/utils';
+
+const seo: NextSeoProps = {
+  ...defaultSeo,
+  title: getTemplatedTitle('Edit experience'),
+};
+
+const titleCopy = {
+  [UserExperienceType.Work]: 'Work Experience',
+  [UserExperienceType.Education]: 'Education',
+  [UserExperienceType.Certification]: 'Certification',
+  [UserExperienceType.Volunteering]: 'Volunteering',
+  [UserExperienceType.Project]: 'Project',
+  [UserExperienceType.OpenSource]: 'Open Source',
+};
+
+type DefaultValues = UserExperience & {
+  startedAtMonth: string;
+  startedAtYear: string;
+  endedAtMonth: string;
+  endedAtYear: string;
+  skills?: string[];
+  location?: TLocation;
+};
+
+type PageProps = {
+  experience: DefaultValues | null;
+};
+
+const splitMonthYear = (value?: string) => {
+  if (!value) {
+    return ['', ''];
+  }
+  const date = new Date(value);
+  const month = date.getMonth().toString();
+  const year = date.getFullYear().toString();
+  return [month, year];
+};
+
+const defaultValues: DefaultValues = {
+  type: UserExperienceType.Work,
+  id: '',
+  title: '',
+  description: '',
+  createdAt: '',
+  startedAtMonth: '',
+  startedAtYear: '',
+  endedAtMonth: '',
+  endedAtYear: '',
+  skills: [],
+};
+
+const getExperienceType = (
+  typeParam: string | string[] | undefined,
+): UserExperienceType => {
+  if (typeof typeParam === 'string') {
+    const validType = Object.values(UserExperienceType).find(
+      (t) => t === typeParam,
+    );
+    if (validType) {
+      return validType;
+    }
+  }
+  return UserExperienceType.Work;
+};
+
+export const getServerSideProps: GetServerSideProps<PageProps> = async ({
+  query,
+}) => {
+  const { id, type } = query;
+  const typeParam = getExperienceType(type);
+
+  if (!id) {
+    return {
+      props: {
+        experience: {
+          ...defaultValues,
+          type: typeParam,
+        },
+      },
+    };
+  }
+
+  const result = await getUserExperienceById(id as string);
+  const [startedAtMonth, startedAtYear] = splitMonthYear(result?.startedAt);
+  const [endedAtMonth, endedAtYear] = splitMonthYear(result?.endedAt);
+
+  return {
+    props: {
+      experience: {
+        ...result,
+        companyId: result?.company?.id || '',
+        customCompanyName: result?.company?.name || result?.customCompanyName,
+        startedAtMonth,
+        startedAtYear,
+        endedAtMonth,
+        endedAtYear,
+        current: !result?.endedAt,
+        skills: result?.skills.map((skill) => skill.value),
+        location: result?.location,
+        externalLocationId: result?.location?.externalId || '',
+      },
+    },
+  };
+};
+
+const renderExperienceForm = (
+  type?: UserExperienceType,
+  experience?: DefaultValues,
+) => {
+  switch (type) {
+    case UserExperienceType.Education:
+      return <UserEducationForm />;
+    case UserExperienceType.Certification:
+      return <UserCertificationForm />;
+    case UserExperienceType.Volunteering:
+      return <UserVolunteeringExperienceForm />;
+    case UserExperienceType.Project:
+    case UserExperienceType.OpenSource:
+      return <UserProjectExperienceForm />;
+    default:
+      return <UserWorkExperienceForm location={experience?.location} />;
+  }
+};
+
+const Page = ({ experience }: PageProps): ReactElement => {
+  const router = useRouter();
+  const { methods, save, isPending } = useUserExperienceForm({
+    defaultValues: experience,
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <form
+        className="flex flex-1 flex-col"
+        onSubmit={methods.handleSubmit(() => save())}
+      >
+        <AccountPageContainer
+          onBack={() => router.back()}
+          title={`${experience?.id ? 'Edit' : 'Add'} ${
+            titleCopy[experience.type]
+          }`}
+          actions={
+            <Button
+              type="submit"
+              className="ml-auto"
+              variant={ButtonVariant.Primary}
+              size={ButtonSize.Small}
+              disabled={isPending}
+              loading={isPending}
+            >
+              Save
+            </Button>
+          }
+        >
+          {renderExperienceForm(experience?.type, experience)}
+          {experience?.id && (
+            <DeleteExperienceButton
+              experienceId={experience.id}
+              experienceType={experience.type}
+            />
+          )}
+        </AccountPageContainer>
+      </form>
+    </FormProvider>
+  );
+};
+
+Page.getLayout = getSettingsLayout;
+Page.layoutProps = { seo };
+
+export default Page;
diff --git a/packages/webapp/pages/settings/profile/experience/education.tsx b/packages/webapp/pages/settings/profile/experience/education.tsx
new file mode 100644
index 0000000000..9455a9970c
--- /dev/null
+++ b/packages/webapp/pages/settings/profile/experience/education.tsx
@@ -0,0 +1,53 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import { PlusIcon } from '@dailydotdev/shared/src/components/icons';
+import type { NextSeoProps } from 'next-seo';
+import { UserExperienceType } from '@dailydotdev/shared/src/graphql/user/profile';
+import { ExperienceSettings } from '@dailydotdev/shared/src/components/profile/ExperienceSettings';
+import Link from '@dailydotdev/shared/src/components/utilities/Link';
+import { webappUrl } from '@dailydotdev/shared/src/lib/constants';
+import { getTemplatedTitle } from '../../../../components/layouts/utils';
+import { defaultSeo } from '../../../../next-seo';
+import { getSettingsLayout } from '../../../../components/layouts/SettingsLayout';
+import { AccountPageContainer } from '../../../../components/layouts/SettingsLayout/AccountPageContainer';
+
+const seo: NextSeoProps = {
+  ...defaultSeo,
+  title: getTemplatedTitle('Education'),
+};
+
+const EducationPage = (): ReactElement => {
+  return (
+    <AccountPageContainer
+      title="Education"
+      actions={
+        <Link
+          href={`${webappUrl}/settings/profile/experience/edit?type=${UserExperienceType.Education}`}
+        >
+          <Button
+            variant={ButtonVariant.Subtle}
+            size={ButtonSize.Small}
+            icon={<PlusIcon />}
+          >
+            Add
+          </Button>
+        </Link>
+      }
+    >
+      <ExperienceSettings
+        experienceType={UserExperienceType.Education}
+        emptyStateMessage="No education added yet"
+      />
+    </AccountPageContainer>
+  );
+};
+
+EducationPage.getLayout = getSettingsLayout;
+EducationPage.layoutProps = { seo };
+
+export default EducationPage;
diff --git a/packages/webapp/pages/settings/profile/experience/opensource.tsx b/packages/webapp/pages/settings/profile/experience/opensource.tsx
new file mode 100644
index 0000000000..8a8da9302a
--- /dev/null
+++ b/packages/webapp/pages/settings/profile/experience/opensource.tsx
@@ -0,0 +1,53 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import { PlusIcon } from '@dailydotdev/shared/src/components/icons';
+import type { NextSeoProps } from 'next-seo';
+import { UserExperienceType } from '@dailydotdev/shared/src/graphql/user/profile';
+import { ExperienceSettings } from '@dailydotdev/shared/src/components/profile/ExperienceSettings';
+import Link from '@dailydotdev/shared/src/components/utilities/Link';
+import { webappUrl } from '@dailydotdev/shared/src/lib/constants';
+import { getTemplatedTitle } from '../../../../components/layouts/utils';
+import { defaultSeo } from '../../../../next-seo';
+import { getSettingsLayout } from '../../../../components/layouts/SettingsLayout';
+import { AccountPageContainer } from '../../../../components/layouts/SettingsLayout/AccountPageContainer';
+
+const seo: NextSeoProps = {
+  ...defaultSeo,
+  title: getTemplatedTitle('Open source'),
+};
+
+const OpenSourcePage = (): ReactElement => {
+  return (
+    <AccountPageContainer
+      title="Open source"
+      actions={
+        <Link
+          href={`${webappUrl}/settings/profile/experience/edit?type=${UserExperienceType.OpenSource}`}
+        >
+          <Button
+            variant={ButtonVariant.Subtle}
+            size={ButtonSize.Small}
+            icon={<PlusIcon />}
+          >
+            Add
+          </Button>
+        </Link>
+      }
+    >
+      <ExperienceSettings
+        experienceType={UserExperienceType.OpenSource}
+        emptyStateMessage="No open source contributions added yet"
+      />
+    </AccountPageContainer>
+  );
+};
+
+OpenSourcePage.getLayout = getSettingsLayout;
+OpenSourcePage.layoutProps = { seo };
+
+export default OpenSourcePage;
diff --git a/packages/webapp/pages/settings/profile/experience/project.tsx b/packages/webapp/pages/settings/profile/experience/project.tsx
new file mode 100644
index 0000000000..499d2ca417
--- /dev/null
+++ b/packages/webapp/pages/settings/profile/experience/project.tsx
@@ -0,0 +1,53 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import { PlusIcon } from '@dailydotdev/shared/src/components/icons';
+import type { NextSeoProps } from 'next-seo';
+import { UserExperienceType } from '@dailydotdev/shared/src/graphql/user/profile';
+import { ExperienceSettings } from '@dailydotdev/shared/src/components/profile/ExperienceSettings';
+import Link from '@dailydotdev/shared/src/components/utilities/Link';
+import { webappUrl } from '@dailydotdev/shared/src/lib/constants';
+import { getTemplatedTitle } from '../../../../components/layouts/utils';
+import { defaultSeo } from '../../../../next-seo';
+import { getSettingsLayout } from '../../../../components/layouts/SettingsLayout';
+import { AccountPageContainer } from '../../../../components/layouts/SettingsLayout/AccountPageContainer';
+
+const seo: NextSeoProps = {
+  ...defaultSeo,
+  title: getTemplatedTitle('Projects & Publications'),
+};
+
+const ProjectsPage = (): ReactElement => {
+  return (
+    <AccountPageContainer
+      title="Projects & Publications"
+      actions={
+        <Link
+          href={`${webappUrl}/settings/profile/experience/edit?type=${UserExperienceType.Project}`}
+        >
+          <Button
+            variant={ButtonVariant.Subtle}
+            size={ButtonSize.Small}
+            icon={<PlusIcon />}
+          >
+            Add
+          </Button>
+        </Link>
+      }
+    >
+      <ExperienceSettings
+        experienceType={UserExperienceType.Project}
+        emptyStateMessage="No projects added yet"
+      />
+    </AccountPageContainer>
+  );
+};
+
+ProjectsPage.getLayout = getSettingsLayout;
+ProjectsPage.layoutProps = { seo };
+
+export default ProjectsPage;
diff --git a/packages/webapp/pages/settings/profile/experience/volunteering.tsx b/packages/webapp/pages/settings/profile/experience/volunteering.tsx
new file mode 100644
index 0000000000..8b1a6c3e80
--- /dev/null
+++ b/packages/webapp/pages/settings/profile/experience/volunteering.tsx
@@ -0,0 +1,53 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import { PlusIcon } from '@dailydotdev/shared/src/components/icons';
+import type { NextSeoProps } from 'next-seo';
+import { UserExperienceType } from '@dailydotdev/shared/src/graphql/user/profile';
+import { ExperienceSettings } from '@dailydotdev/shared/src/components/profile/ExperienceSettings';
+import Link from '@dailydotdev/shared/src/components/utilities/Link';
+import { webappUrl } from '@dailydotdev/shared/src/lib/constants';
+import { getTemplatedTitle } from '../../../../components/layouts/utils';
+import { defaultSeo } from '../../../../next-seo';
+import { getSettingsLayout } from '../../../../components/layouts/SettingsLayout';
+import { AccountPageContainer } from '../../../../components/layouts/SettingsLayout/AccountPageContainer';
+
+const seo: NextSeoProps = {
+  ...defaultSeo,
+  title: getTemplatedTitle('Volunteering'),
+};
+
+const VolunteeringPage = (): ReactElement => {
+  return (
+    <AccountPageContainer
+      title="Volunteering"
+      actions={
+        <Link
+          href={`${webappUrl}/settings/profile/experience/edit?type=${UserExperienceType.Volunteering}`}
+        >
+          <Button
+            variant={ButtonVariant.Subtle}
+            size={ButtonSize.Small}
+            icon={<PlusIcon />}
+          >
+            Add
+          </Button>
+        </Link>
+      }
+    >
+      <ExperienceSettings
+        experienceType={UserExperienceType.Volunteering}
+        emptyStateMessage="No volunteering experience added yet"
+      />
+    </AccountPageContainer>
+  );
+};
+
+VolunteeringPage.getLayout = getSettingsLayout;
+VolunteeringPage.layoutProps = { seo };
+
+export default VolunteeringPage;
diff --git a/packages/webapp/pages/settings/profile/experience/work.tsx b/packages/webapp/pages/settings/profile/experience/work.tsx
new file mode 100644
index 0000000000..6fc3397326
--- /dev/null
+++ b/packages/webapp/pages/settings/profile/experience/work.tsx
@@ -0,0 +1,53 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import { PlusIcon } from '@dailydotdev/shared/src/components/icons';
+import type { NextSeoProps } from 'next-seo';
+import { UserExperienceType } from '@dailydotdev/shared/src/graphql/user/profile';
+import { ExperienceSettings } from '@dailydotdev/shared/src/components/profile/ExperienceSettings';
+import Link from '@dailydotdev/shared/src/components/utilities/Link';
+import { webappUrl } from '@dailydotdev/shared/src/lib/constants';
+import { getTemplatedTitle } from '../../../../components/layouts/utils';
+import { defaultSeo } from '../../../../next-seo';
+import { getSettingsLayout } from '../../../../components/layouts/SettingsLayout';
+import { AccountPageContainer } from '../../../../components/layouts/SettingsLayout/AccountPageContainer';
+
+const seo: NextSeoProps = {
+  ...defaultSeo,
+  title: getTemplatedTitle('Work Experience'),
+};
+
+const WorkExperiencePage = (): ReactElement => {
+  return (
+    <AccountPageContainer
+      title="Work Experience"
+      actions={
+        <Link
+          href={`${webappUrl}/settings/profile/experience/edit?type=${UserExperienceType.Work}`}
+        >
+          <Button
+            variant={ButtonVariant.Subtle}
+            size={ButtonSize.Small}
+            icon={<PlusIcon />}
+          >
+            Add
+          </Button>
+        </Link>
+      }
+    >
+      <ExperienceSettings
+        experienceType={UserExperienceType.Work}
+        emptyStateMessage="No work experience added yet"
+      />
+    </AccountPageContainer>
+  );
+};
+
+WorkExperiencePage.getLayout = getSettingsLayout;
+WorkExperiencePage.layoutProps = { seo };
+
+export default WorkExperiencePage;
diff --git a/packages/webapp/pages/squads/discover/[id].tsx b/packages/webapp/pages/squads/discover/[id].tsx
index 2348b4c9b4..12c08d9ee5 100644
--- a/packages/webapp/pages/squads/discover/[id].tsx
+++ b/packages/webapp/pages/squads/discover/[id].tsx
@@ -4,7 +4,10 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import type { SourceCategory } from '@dailydotdev/shared/src/graphql/source/categories';
 import { getSourceCategory } from '@dailydotdev/shared/src/graphql/source/categories';
-import { useSources } from '@dailydotdev/shared/src/hooks/source/useSources';
+import {
+  useSources,
+  getFlatteredNodes,
+} from '@dailydotdev/shared/src/hooks/source/useSources';
 import InfiniteScrolling, {
   checkFetchMore,
 } from '@dailydotdev/shared/src/components/containers/InfiniteScrolling';
@@ -46,8 +49,7 @@ function SquadCategoryPage({ category }: SquadCategoryPageProps): ReactElement {
     },
   });
   const { isInitialLoading } = result;
-  const flatSources =
-    result.data?.pages.flatMap((page) => page.sources.edges) ?? [];
+  const flatSources = getFlatteredNodes(result);
   const isTablet = useViewSize(ViewSize.Tablet);
 
   return (
diff --git a/packages/webapp/pages/squads/discover/featured.tsx b/packages/webapp/pages/squads/discover/featured.tsx
index 8833dd914d..378ed7021c 100644
--- a/packages/webapp/pages/squads/discover/featured.tsx
+++ b/packages/webapp/pages/squads/discover/featured.tsx
@@ -9,7 +9,10 @@ import { FeedContainer, SquadGrid } from '@dailydotdev/shared/src/components';
 import type { Squad } from '@dailydotdev/shared/src/graphql/sources';
 import CustomAuthBanner from '@dailydotdev/shared/src/components/auth/CustomAuthBanner';
 import type { SourcesQueryData } from '@dailydotdev/shared/src/hooks/source/useSources';
-import { useSources } from '@dailydotdev/shared/src/hooks/source/useSources';
+import {
+  useSources,
+  getFlatteredNodes,
+} from '@dailydotdev/shared/src/hooks/source/useSources';
 import { useViewSize, ViewSize } from '@dailydotdev/shared/src/hooks';
 import { SquadList } from '@dailydotdev/shared/src/components/cards/squad/SquadList';
 import { PlaceholderSquadGridList } from '@dailydotdev/shared/src/components/cards/squad/PlaceholderSquadGrid';
@@ -46,8 +49,7 @@ const SquadsPage = (): ReactElement => {
     query: { featured: true, isPublic: true, sortByMembersCount: true },
   });
   const { isInitialLoading } = result;
-  const flatSquads =
-    result.data?.pages.flatMap((page) => page.sources.edges) ?? [];
+  const flatSquads = getFlatteredNodes(result);
   const isTablet = useViewSize(ViewSize.Tablet);
 
   return (
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 980b0b76d3..96f13dd56f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -708,6 +708,9 @@ importers:
       '@tanstack/react-query':
         specifier: ^5.80.5
         version: 5.80.6(react@18.3.1)
+      date-fns:
+        specifier: ^2.30.0
+        version: 2.30.0
       dompurify:
         specifier: ^2.5.4
         version: 2.5.7
@@ -12755,7 +12758,7 @@ snapshots:
 
   aria-query@4.2.2:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       '@babel/runtime-corejs3': 7.26.0
 
   aria-query@5.3.0:
@@ -13719,7 +13722,7 @@ snapshots:
 
   date-fns@2.30.0:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
 
   debounce@1.2.1: {}