diff --git a/src/api/user.ts b/src/api/user.ts
index 8a677c744..08a4aa38a 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -1,11 +1,26 @@
 import { type APIContext } from 'astro';
 import { api } from './api.ts';
 
+export const allowedRoadmapVisibility = ['all', 'none', 'selected'] as const;
+export type AllowedRoadmapVisibility =
+  (typeof allowedRoadmapVisibility)[number];
+
+export const allowedCustomRoadmapVisibility = [
+  'all',
+  'none',
+  'selected',
+] as const;
+export type AllowedCustomRoadmapVisibility =
+  (typeof allowedCustomRoadmapVisibility)[number];
+
+export const allowedProfileVisibility = ['public', 'private'] as const;
+export type AllowedProfileVisibility =
+  (typeof allowedProfileVisibility)[number];
+
 export interface UserDocument {
   _id?: string;
   name: string;
   email: string;
-  username: string;
   avatar?: string;
   password: string;
   isEnabled: boolean;
@@ -27,6 +42,15 @@ export interface UserDocument {
     twitter?: string;
     website?: string;
   };
+  username?: string;
+  profileVisibility: AllowedProfileVisibility;
+  publicConfig?: {
+    headline: string;
+    roadmaps: string[];
+    customRoadmaps: string[];
+    roadmapVisibility: AllowedRoadmapVisibility;
+    customRoadmapVisibility: AllowedCustomRoadmapVisibility;
+  };
   resetPasswordCodeAt: Date;
   verifiedAt: Date;
   createdAt: Date;
diff --git a/src/components/RoadCard/SelectionButton.tsx b/src/components/RoadCard/SelectionButton.tsx
index eb5c8e643..786e09b13 100644
--- a/src/components/RoadCard/SelectionButton.tsx
+++ b/src/components/RoadCard/SelectionButton.tsx
@@ -1,20 +1,25 @@
+import type { ButtonHTMLAttributes } from 'react';
+import { cn } from '../../lib/classname';
+
 type SelectionButtonProps = {
   text: string;
   isDisabled: boolean;
   isSelected: boolean;
   onClick: () => void;
-};
+} & ButtonHTMLAttributes<HTMLButtonElement>;
 
 export function SelectionButton(props: SelectionButtonProps) {
-  const { text, isDisabled, isSelected, onClick } = props;
+  const { text, isDisabled, isSelected, onClick, className, ...rest } = props;
 
   return (
     <button
-      className={`rounded-md border p-1 px-2 text-sm ${
-        isSelected ? ' border-gray-500 bg-gray-300 ' : ''
-      } ${
-        !isDisabled ? ' cursor-pointer ' : ' cursor-not-allowed opacity-40 '
-      }`}
+      {...rest}
+      className={cn(
+        'rounded-md border p-1 px-2 text-sm',
+        isSelected ? 'border-gray-500 bg-gray-300' : '',
+        !isDisabled ? 'cursor-pointer' : 'cursor-not-allowed opacity-40',
+        className,
+      )}
       onClick={onClick}
     >
       {text}
diff --git a/src/components/UpdateProfile/UpdateProfileForm.tsx b/src/components/UpdateProfile/UpdateProfileForm.tsx
index 1de04adb3..2baf6b9c0 100644
--- a/src/components/UpdateProfile/UpdateProfileForm.tsx
+++ b/src/components/UpdateProfile/UpdateProfileForm.tsx
@@ -7,10 +7,6 @@ export function UpdateProfileForm() {
   const [name, setName] = useState('');
   const [avatar, setAvatar] = useState('');
   const [email, setEmail] = useState('');
-  const [github, setGithub] = useState('');
-  const [twitter, setTwitter] = useState('');
-  const [linkedin, setLinkedin] = useState('');
-  const [website, setWebsite] = useState('');
   const [isLoading, setIsLoading] = useState(false);
 
   const [error, setError] = useState('');
@@ -26,11 +22,7 @@ export function UpdateProfileForm() {
       `${import.meta.env.PUBLIC_API_URL}/v1-update-profile`,
       {
         name,
-        github: github || undefined,
-        linkedin: linkedin || undefined,
-        twitter: twitter || undefined,
-        website: website || undefined,
-      }
+      },
     );
 
     if (error || !response) {
@@ -49,7 +41,7 @@ export function UpdateProfileForm() {
     setIsLoading(true);
 
     const { error, response } = await httpGet(
-      `${import.meta.env.PUBLIC_API_URL}/v1-me`
+      `${import.meta.env.PUBLIC_API_URL}/v1-me`,
     );
 
     if (error || !response) {
@@ -59,14 +51,10 @@ export function UpdateProfileForm() {
       return;
     }
 
-    const { name, email, links, avatar } = response;
+    const { name, email, avatar } = response;
 
     setName(name);
     setEmail(email);
-    setGithub(links?.github || '');
-    setLinkedin(links?.linkedin || '');
-    setTwitter(links?.twitter || '');
-    setWebsite(links?.website || '');
     setAvatar(avatar || '');
 
     setIsLoading(false);
@@ -132,77 +120,6 @@ export function UpdateProfileForm() {
           />
         </div>
 
-        <div className="flex w-full flex-col">
-          <label
-            htmlFor="github"
-            className="text-sm leading-none text-slate-500"
-          >
-            Github
-          </label>
-          <input
-            type="text"
-            name="github"
-            id="github"
-            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
-            placeholder="https://github.com/username"
-            value={github}
-            onInput={(e) => setGithub((e.target as HTMLInputElement).value)}
-          />
-        </div>
-        <div className="flex w-full flex-col">
-          <label
-            htmlFor="twitter"
-            className="text-sm leading-none text-slate-500"
-          >
-            Twitter
-          </label>
-          <input
-            type="text"
-            name="twitter"
-            id="twitter"
-            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
-            placeholder="https://twitter.com/username"
-            value={twitter}
-            onInput={(e) => setTwitter((e.target as HTMLInputElement).value)}
-          />
-        </div>
-
-        <div className="flex w-full flex-col">
-          <label
-            htmlFor="linkedin"
-            className="text-sm leading-none text-slate-500"
-          >
-            LinkedIn
-          </label>
-          <input
-            type="text"
-            name="linkedin"
-            id="linkedin"
-            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
-            placeholder="https://www.linkedin.com/in/username/"
-            value={linkedin}
-            onInput={(e) => setLinkedin((e.target as HTMLInputElement).value)}
-          />
-        </div>
-
-        <div className="flex w-full flex-col">
-          <label
-            htmlFor="website"
-            className="text-sm leading-none text-slate-500"
-          >
-            Website
-          </label>
-          <input
-            type="text"
-            name="website"
-            id="website"
-            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
-            placeholder="https://example.com"
-            value={website}
-            onInput={(e) => setWebsite((e.target as HTMLInputElement).value)}
-          />
-        </div>
-
         {error && (
           <p className="mt-2 rounded-lg bg-red-100 p-2 text-red-700">{error}</p>
         )}
@@ -218,7 +135,7 @@ export function UpdateProfileForm() {
           disabled={isLoading}
           className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
         >
-          {isLoading ? 'Please wait...' : 'Continue'}
+          {isLoading ? 'Please wait...' : 'Update Information'}
         </button>
       </form>
     </div>
diff --git a/src/components/UpdateProfile/UpdatePublicProfileForm.tsx b/src/components/UpdateProfile/UpdatePublicProfileForm.tsx
new file mode 100644
index 000000000..1e7f78e98
--- /dev/null
+++ b/src/components/UpdateProfile/UpdatePublicProfileForm.tsx
@@ -0,0 +1,426 @@
+import { type FormEvent, useEffect, useState } from 'react';
+import { httpGet, httpPatch } from '../../lib/http';
+import { pageProgressMessage } from '../../stores/page';
+import type {
+  AllowedCustomRoadmapVisibility,
+  AllowedProfileVisibility,
+  AllowedRoadmapVisibility,
+  UserDocument,
+} from '../../api/user';
+import { SelectionButton } from '../RoadCard/SelectionButton';
+import { ArrowUpRight } from 'lucide-react';
+import { useToast } from '../../hooks/use-toast';
+
+type RoadmapType = {
+  id: string;
+  title: string;
+  isCustomResource: boolean;
+};
+
+type GetProfileSettingsResponse = Pick<
+  UserDocument,
+  'username' | 'profileVisibility' | 'publicConfig' | 'links'
+>;
+
+export function UpdatePublicProfileForm() {
+  const [profileVisibility, setProfileVisibility] =
+    useState<AllowedProfileVisibility>('private');
+
+  const toast = useToast();
+
+  const [headline, setHeadline] = useState('');
+  const [username, setUsername] = useState('');
+  const [roadmapVisibility, setRoadmapVisibility] =
+    useState<AllowedRoadmapVisibility>('none');
+  const [customRoadmapVisibility, setCustomRoadmapVisibility] =
+    useState<AllowedCustomRoadmapVisibility>('none');
+  const [roadmaps, setRoadmaps] = useState<string[]>([]);
+  const [customRoadmaps, setCustomRoadmaps] = useState<string[]>([]);
+
+  const [github, setGithub] = useState('');
+  const [twitter, setTwitter] = useState('');
+  const [linkedin, setLinkedin] = useState('');
+  const [website, setWebsite] = useState('');
+
+  const [profileRoadmaps, setProfileRoadmaps] = useState<RoadmapType[]>([]);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [success, setSuccess] = useState('');
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setSuccess('');
+
+    const { response, error } = await httpPatch(
+      `${import.meta.env.PUBLIC_API_URL}/v1-update-public-profile-config`,
+      {
+        profileVisibility,
+        headline,
+        username,
+        roadmapVisibility,
+        customRoadmapVisibility,
+        roadmaps,
+        customRoadmaps,
+        github,
+        twitter,
+        linkedin,
+        website,
+      },
+    );
+
+    if (error || !response) {
+      setIsLoading(false);
+      toast.error(error?.message || 'Something went wrong');
+
+      return;
+    }
+
+    await loadProfileSettings();
+    setSuccess('Profile updated successfully');
+  };
+
+  const loadProfileSettings = async () => {
+    setIsLoading(true);
+
+    const { error, response } = await httpGet<UserDocument>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-profile-settings`,
+    );
+
+    if (error || !response) {
+      setIsLoading(false);
+      toast.error(error?.message || 'Something went wrong');
+
+      return;
+    }
+
+    const {
+      links,
+      username,
+      profileVisibility: defaultProfileVisibility,
+      publicConfig,
+    } = response;
+    setUsername(username || '');
+    setGithub(links?.github || '');
+    setTwitter(links?.twitter || '');
+    setLinkedin(links?.linkedin || '');
+    setWebsite(links?.website || '');
+    setProfileVisibility(defaultProfileVisibility || 'private');
+    setHeadline(publicConfig?.headline || '');
+    setRoadmapVisibility(publicConfig?.roadmapVisibility || 'none');
+    setCustomRoadmapVisibility(publicConfig?.customRoadmapVisibility || 'none');
+    setCustomRoadmaps(publicConfig?.customRoadmaps || []);
+    setRoadmaps(publicConfig?.roadmaps || []);
+    setCustomRoadmapVisibility(publicConfig?.customRoadmapVisibility || 'none');
+
+    setIsLoading(false);
+  };
+
+  const loadProfileRoadmaps = async () => {
+    setIsLoading(true);
+
+    const { error, response } = await httpGet<{
+      roadmaps: RoadmapType[];
+    }>(`${import.meta.env.PUBLIC_API_URL}/v1-get-profile-roadmaps`);
+
+    if (error || !response) {
+      setIsLoading(false);
+      toast.error(error?.message || 'Something went wrong');
+
+      return;
+    }
+
+    setProfileRoadmaps(response?.roadmaps || []);
+    setIsLoading(false);
+  };
+
+  // Make a request to the backend to fill in the form with the current values
+  useEffect(() => {
+    Promise.all([loadProfileSettings(), loadProfileRoadmaps()]).finally(() => {
+      pageProgressMessage.set('');
+    });
+  }, []);
+
+  const publicCustomRoadmaps = profileRoadmaps.filter(
+    (r) => r.isCustomResource,
+  );
+  const publicRoadmaps = profileRoadmaps.filter((r) => !r.isCustomResource);
+
+  const publicProfileUrl = `/u/${username}`;
+
+  return (
+    <form className="mt-16 space-y-4 pb-10" onSubmit={handleSubmit}>
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <h3 className="text-3xl font-bold">Public Profile</h3>
+          {profileVisibility === 'public' && username && (
+            <a href={publicProfileUrl} className="shrink-0">
+              <ArrowUpRight className="h-6 w-6 stroke-[3]" />
+            </a>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          <SelectionButton
+            type="button"
+            text="Public"
+            isDisabled={profileVisibility === 'public'}
+            isSelected={profileVisibility === 'public'}
+            onClick={() => setProfileVisibility('public')}
+          />
+          <SelectionButton
+            type="button"
+            text="Private"
+            isDisabled={profileVisibility === 'private'}
+            isSelected={profileVisibility === 'private'}
+            onClick={() => setProfileVisibility('private')}
+          />
+        </div>
+      </div>
+
+      {profileVisibility === 'public' && (
+        <>
+          <div className="flex w-full flex-col">
+            <label
+              htmlFor="headline"
+              className="text-sm leading-none text-slate-500"
+            >
+              Headline
+            </label>
+            <input
+              type="text"
+              name="headline"
+              id="headline"
+              className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+              placeholder="Full Stack Developer"
+              value={headline}
+              onChange={(e) =>
+                setHeadline((e.target as HTMLInputElement).value)
+              }
+              required={profileVisibility === 'public'}
+            />
+          </div>
+          <div className="flex w-full flex-col">
+            <label
+              htmlFor="username"
+              className="text-sm leading-none text-slate-500"
+            >
+              Username
+            </label>
+            <input
+              type="text"
+              name="username"
+              id="username"
+              className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+              placeholder="johndoe"
+              value={username}
+              onChange={(e) =>
+                setUsername((e.target as HTMLInputElement).value)
+              }
+              required={profileVisibility === 'public'}
+            />
+          </div>
+
+          <div className="rounded-md border p-4">
+            <h3 className="text-sm font-medium">Show my Learning Activity</h3>
+            <div className="mt-3 flex items-center gap-2">
+              <SelectionButton
+                type="button"
+                text="All Roadmaps"
+                isDisabled={roadmapVisibility === 'all'}
+                isSelected={roadmapVisibility === 'all'}
+                onClick={() => setRoadmapVisibility('all')}
+              />
+              <SelectionButton
+                type="button"
+                text="Hide my Activity"
+                isDisabled={roadmapVisibility === 'none'}
+                isSelected={roadmapVisibility === 'none'}
+                onClick={() => setRoadmapVisibility('none')}
+              />
+            </div>
+
+            <h3 className="mt-4 text-sm font-medium">
+              Only Following Roadmaps
+            </h3>
+            {publicRoadmaps.length > 0 ? (
+              <div className="mt-3 flex flex-wrap items-center gap-2">
+                {publicRoadmaps.map((r) => (
+                  <SelectionButton
+                    type="button"
+                    key={r.id}
+                    text={r.title}
+                    isDisabled={false}
+                    isSelected={roadmaps.includes(r.id)}
+                    onClick={() => {
+                      if (roadmapVisibility !== 'selected') {
+                        setRoadmapVisibility('selected');
+                      }
+
+                      if (roadmaps.includes(r.id)) {
+                        setRoadmaps(roadmaps.filter((id) => id !== r.id));
+                      } else {
+                        setRoadmaps([...roadmaps, r.id]);
+                      }
+                    }}
+                  />
+                ))}
+              </div>
+            ) : (
+              <p className="mt-2 rounded-lg bg-yellow-100 p-2 text-yellow-700">
+                You are not following any roadmaps yet.{' '}
+                <a href="/roadmaps" className="text-black underline">
+                  Start following roadmaps
+                </a>
+              </p>
+            )}
+          </div>
+
+          <div className="rounded-md border p-4">
+            <h3 className="text-sm font-medium">Show my Custom Roadmaps</h3>
+            <div className="mt-3 flex items-center gap-2">
+              <SelectionButton
+                type="button"
+                text="All Roadmaps"
+                isDisabled={customRoadmapVisibility === 'all'}
+                isSelected={customRoadmapVisibility === 'all'}
+                onClick={() => setCustomRoadmapVisibility('all')}
+              />
+              <SelectionButton
+                type="button"
+                text="Hide my Custom Roadmaps"
+                isDisabled={customRoadmapVisibility === 'none'}
+                isSelected={customRoadmapVisibility === 'none'}
+                onClick={() => setCustomRoadmapVisibility('none')}
+              />
+            </div>
+
+            <h3 className="mt-4 text-sm font-medium">
+              Only Following Roadmaps
+            </h3>
+            {publicCustomRoadmaps.length > 0 ? (
+              <div className="mt-3 flex flex-wrap items-center gap-2">
+                {publicCustomRoadmaps.map((r) => (
+                  <SelectionButton
+                    type="button"
+                    key={r.id}
+                    text={r.title}
+                    isDisabled={false}
+                    isSelected={customRoadmaps.includes(r.id)}
+                    onClick={() => {
+                      if (customRoadmapVisibility !== 'selected') {
+                        setCustomRoadmapVisibility('selected');
+                      }
+
+                      if (customRoadmaps.includes(r.id)) {
+                        setCustomRoadmaps(
+                          customRoadmaps.filter((id) => id !== r.id),
+                        );
+                      } else {
+                        setCustomRoadmaps([...customRoadmaps, r.id]);
+                      }
+                    }}
+                  />
+                ))}
+              </div>
+            ) : (
+              <p className="mt-2 rounded-lg bg-yellow-100 p-2 text-yellow-700">
+                You have not created any custom roadmaps yet.{' '}
+                <a href="/roadmaps" className="text-black underline">
+                  Create a custom roadmap
+                </a>
+              </p>
+            )}
+          </div>
+
+          <div className="flex w-full flex-col">
+            <label
+              htmlFor="github"
+              className="text-sm leading-none text-slate-500"
+            >
+              Github
+            </label>
+            <input
+              type="text"
+              name="github"
+              id="github"
+              className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+              placeholder="https://github.com/username"
+              value={github}
+              onChange={(e) => setGithub((e.target as HTMLInputElement).value)}
+            />
+          </div>
+          <div className="flex w-full flex-col">
+            <label
+              htmlFor="twitter"
+              className="text-sm leading-none text-slate-500"
+            >
+              Twitter
+            </label>
+            <input
+              type="text"
+              name="twitter"
+              id="twitter"
+              className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+              placeholder="https://twitter.com/username"
+              value={twitter}
+              onChange={(e) => setTwitter((e.target as HTMLInputElement).value)}
+            />
+          </div>
+
+          <div className="flex w-full flex-col">
+            <label
+              htmlFor="linkedin"
+              className="text-sm leading-none text-slate-500"
+            >
+              LinkedIn
+            </label>
+            <input
+              type="text"
+              name="linkedin"
+              id="linkedin"
+              className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+              placeholder="https://www.linkedin.com/in/username/"
+              value={linkedin}
+              onChange={(e) =>
+                setLinkedin((e.target as HTMLInputElement).value)
+              }
+            />
+          </div>
+
+          <div className="flex w-full flex-col">
+            <label
+              htmlFor="website"
+              className="text-sm leading-none text-slate-500"
+            >
+              Website
+            </label>
+            <input
+              type="text"
+              name="website"
+              id="website"
+              className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+              placeholder="https://example.com"
+              value={website}
+              onChange={(e) => setWebsite((e.target as HTMLInputElement).value)}
+            />
+          </div>
+        </>
+      )}
+
+      {success && (
+        <p className="mt-2 rounded-lg bg-green-100 p-2 text-green-700">
+          {success}
+        </p>
+      )}
+
+      <button
+        type="submit"
+        disabled={isLoading}
+        className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
+      >
+        {isLoading ? 'Please wait...' : 'Update Public Profile'}
+      </button>
+    </form>
+  );
+}
diff --git a/src/pages/account/update-profile.astro b/src/pages/account/update-profile.astro
index 3ad19b0dd..2db248e60 100644
--- a/src/pages/account/update-profile.astro
+++ b/src/pages/account/update-profile.astro
@@ -1,6 +1,7 @@
 ---
 import AccountSidebar from '../../components/AccountSidebar.astro';
 import { UpdateProfileForm } from '../../components/UpdateProfile/UpdateProfileForm';
+import { UpdatePublicProfileForm } from '../../components/UpdateProfile/UpdatePublicProfileForm';
 import AccountLayout from '../../layouts/AccountLayout.astro';
 ---
 
@@ -11,5 +12,6 @@ import AccountLayout from '../../layouts/AccountLayout.astro';
 >
   <AccountSidebar activePageId='profile' activePageTitle='Profile'>
     <UpdateProfileForm client:load />
+    <UpdatePublicProfileForm client:load />
   </AccountSidebar>
 </AccountLayout>