From 3e6fc456cad3058a424595e65f929649dca6fbdd Mon Sep 17 00:00:00 2001
From: Yusef Habib Fernandez <habibfernandez@gmail.com>
Date: Mon, 23 Jun 2025 13:28:37 +0200
Subject: [PATCH 1/2] show followee modal from neurons page

---
 .../NeuronFollowingCard.svelte                | 26 +++++++++--------
 .../actions/FollowNeuronsButton.svelte        | 17 ++++++++---
 .../modals/neurons/FollowNeuronsModal.svelte  |  1 +
 .../lib/modals/neurons/NnsNeuronModals.svelte |  4 +++
 .../modals/neurons/NnsStakeNeuronModal.svelte | 28 +++++++++----------
 frontend/src/lib/pages/NnsNeurons.svelte      |  3 ++
 .../src/lib/types/nns-neuron-detail.modal.ts  |  1 +
 7 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/frontend/src/lib/components/neuron-detail/NeuronFollowingCard/NeuronFollowingCard.svelte b/frontend/src/lib/components/neuron-detail/NeuronFollowingCard/NeuronFollowingCard.svelte
index d489effba29..8b8b75bc189 100644
--- a/frontend/src/lib/components/neuron-detail/NeuronFollowingCard/NeuronFollowingCard.svelte
+++ b/frontend/src/lib/components/neuron-detail/NeuronFollowingCard/NeuronFollowingCard.svelte
@@ -5,32 +5,36 @@
   import { icpAccountsStore } from "$lib/derived/icp-accounts.derived";
   import { listKnownNeurons } from "$lib/services/known-neurons.services";
   import { authStore } from "$lib/stores/auth.store";
+  import { ENABLE_NNS_TOPICS } from "$lib/stores/feature-flags.store";
   import { i18n } from "$lib/stores/i18n";
   import {
     followeesNeurons,
     isHotKeyControllable,
     isNeuronControllable,
-    type FolloweesNeuron,
   } from "$lib/utils/neuron.utils";
   import { KeyValuePairInfo } from "@dfinity/gix-components";
   import type { NeuronInfo } from "@dfinity/nns";
   import { nonNullish } from "@dfinity/utils";
   import { onMount } from "svelte";
 
-  export let neuron: NeuronInfo;
-  let isControllable: boolean;
-  $: isControllable =
+  type Props = {
+    neuron: NeuronInfo;
+  };
+  const { neuron }: Props = $props();
+
+  const isControllable = $derived(
     isNeuronControllable({
       neuron,
       identity: $authStore.identity,
       accounts: $icpAccountsStore,
     }) ||
-    isHotKeyControllable({
-      neuron,
-      identity: $authStore.identity,
-    });
-  let followees: FolloweesNeuron[];
-  $: followees = followeesNeurons(neuron);
+      isHotKeyControllable({
+        neuron,
+        identity: $authStore.identity,
+      })
+  );
+  const followees = $derived(followeesNeurons(neuron));
+  const isFollowByTopic = $derived($ENABLE_NNS_TOPICS);
 
   onMount(listKnownNeurons);
 </script>
@@ -53,7 +57,7 @@
 
   <div class="actions">
     {#if isControllable}
-      <FollowNeuronsButton />
+      <FollowNeuronsButton {isFollowByTopic} />
     {/if}
   </div>
 </CardInfo>
diff --git a/frontend/src/lib/components/neuron-detail/actions/FollowNeuronsButton.svelte b/frontend/src/lib/components/neuron-detail/actions/FollowNeuronsButton.svelte
index 27ce90af417..eea7682cf4d 100644
--- a/frontend/src/lib/components/neuron-detail/actions/FollowNeuronsButton.svelte
+++ b/frontend/src/lib/components/neuron-detail/actions/FollowNeuronsButton.svelte
@@ -7,7 +7,18 @@
   import { openNnsNeuronModal } from "$lib/utils/modals.utils";
   import { getContext } from "svelte";
 
-  export let variant: "primary" | "secondary" = "primary";
+  type Props = {
+    variant?: "primary" | "secondary";
+    isFollowByTopic?: boolean;
+  };
+  const { variant = "primary", isFollowByTopic = false }: Props = $props();
+
+  const onClick = () => {
+    openNnsNeuronModal({
+      type: isFollowByTopic ? "follow-by-topic" : "follow",
+      data: { neuron: $store.neuron },
+    });
+  };
 
   const { store }: NnsNeuronContext = getContext<NnsNeuronContext>(
     NNS_NEURON_CONTEXT_KEY
@@ -17,7 +28,5 @@
 <button
   data-tid="follow-neurons-button-component"
   class={variant}
-  on:click={() =>
-    openNnsNeuronModal({ type: "follow", data: { neuron: $store.neuron } })}
-  >{$i18n.neuron_detail.follow_neurons}</button
+  onclick={onClick}>{$i18n.neuron_detail.follow_neurons}</button
 >
diff --git a/frontend/src/lib/modals/neurons/FollowNeuronsModal.svelte b/frontend/src/lib/modals/neurons/FollowNeuronsModal.svelte
index 189a823fdb9..9f671d0b400 100644
--- a/frontend/src/lib/modals/neurons/FollowNeuronsModal.svelte
+++ b/frontend/src/lib/modals/neurons/FollowNeuronsModal.svelte
@@ -9,6 +9,7 @@
     onClose: () => void;
   };
   const { neuronId, onClose }: Props = $props();
+  console.log("hi");
 </script>
 
 <Modal
diff --git a/frontend/src/lib/modals/neurons/NnsNeuronModals.svelte b/frontend/src/lib/modals/neurons/NnsNeuronModals.svelte
index 3c3e9a199f0..f0e6a4f9e3f 100644
--- a/frontend/src/lib/modals/neurons/NnsNeuronModals.svelte
+++ b/frontend/src/lib/modals/neurons/NnsNeuronModals.svelte
@@ -101,6 +101,10 @@
       <FollowNeuronsModal onClose={close} neuronId={neuron.neuronId} />
     {/if}
 
+    {#if type === "follow-by-topic"}
+      <FollowNeuronsModal onClose={close} neuronId={neuron.neuronId} />
+    {/if}
+
     {#if type === "add-hotkey"}
       <AddHotkeyModal on:nnsClose={close} {neuron} />
     {/if}
diff --git a/frontend/src/lib/modals/neurons/NnsStakeNeuronModal.svelte b/frontend/src/lib/modals/neurons/NnsStakeNeuronModal.svelte
index e69dc277061..e0b2b77bccf 100644
--- a/frontend/src/lib/modals/neurons/NnsStakeNeuronModal.svelte
+++ b/frontend/src/lib/modals/neurons/NnsStakeNeuronModal.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import AddUserToHotkeys from "$lib/components/neurons/AddUserToHotkeys.svelte";
   import ConfirmDissolveDelay from "$lib/components/neurons/ConfirmDissolveDelay.svelte";
-  import EditFollowNeurons from "$lib/components/neurons/EditFollowNeurons.svelte";
   import NnsStakeNeuron from "$lib/components/neurons/NnsStakeNeuron.svelte";
   import SetNnsDissolveDelay from "$lib/components/neurons/SetNnsDissolveDelay.svelte";
   import { definedNeuronsStore } from "$lib/derived/neurons.derived";
@@ -9,10 +8,12 @@
     cancelPollAccounts,
     pollAccounts,
   } from "$lib/services/icp-accounts.services";
+  import { ENABLE_NNS_TOPICS } from "$lib/stores/feature-flags.store";
   import { i18n } from "$lib/stores/i18n";
   import { toastsError, toastsShow } from "$lib/stores/toasts.store";
   import type { Account } from "$lib/types/account";
   import { isAccountHardwareWallet } from "$lib/utils/accounts.utils";
+  import { openNnsNeuronModal } from "$lib/utils/modals.utils";
   import {
     WizardModal,
     wizardStepIndex,
@@ -40,10 +41,6 @@
       name: "ConfirmDissolveDelay",
       title: $i18n.neurons.confirm_dissolve_delay,
     },
-    {
-      name: "EditFollowNeurons",
-      title: $i18n.neurons.follow_neurons_screen,
-    },
   ];
 
   const extraStepHW: WizardStep = {
@@ -94,10 +91,6 @@
       stepName: "ConfirmDissolveDelay",
       isNeuronInvalid: (neuron?: NeuronInfo) => neuron === undefined,
     },
-    {
-      stepName: "EditFollowNeurons",
-      isNeuronInvalid: (neuron?: NeuronInfo) => neuron === undefined,
-    },
   ];
   $: {
     const invalidState = invalidStates.find(
@@ -162,6 +155,13 @@
   const goEditFollowers = () => {
     modal.set(wizardStepIndex({ name: "EditFollowNeurons", steps }));
   };
+  const openEditFollowers = () => {
+    close();
+    openNnsNeuronModal({
+      type: $ENABLE_NNS_TOPICS ? "follow-by-topic" : "follow",
+      data: { neuron: newNeuron },
+    });
+  };
 </script>
 
 <WizardModal
@@ -170,9 +170,7 @@
   bind:currentStep
   bind:this={modal}
   on:nnsClose
-  --modal-content-overflow-y={currentStep?.name === "EditFollowNeurons"
-    ? "scroll"
-    : "auto"}
+  --modal-content-overflow-y={"auto"}
 >
   <svelte:fragment slot="title"
     >{currentStep?.title ?? $i18n.accounts.select_source}</svelte:fragment
@@ -216,14 +214,14 @@
         confirmButtonText={$i18n.neurons.confirm_set_delay}
         neuron={newNeuron}
         delayInSeconds={BigInt(Math.round(delayInSeconds))}
-        on:nnsUpdated={goNext}
+        on:nnsUpdated={openEditFollowers}
         on:nnsBack={modal.back}
       />
     {/if}
   {/if}
-  {#if currentStep?.name === "EditFollowNeurons"}
+  <!-- {#if currentStep?.name === "EditFollowNeurons"}
     {#if newNeuronId !== undefined}
       <EditFollowNeurons neuronId={newNeuronId} />
     {/if}
-  {/if}
+  {/if} -->
 </WizardModal>
diff --git a/frontend/src/lib/pages/NnsNeurons.svelte b/frontend/src/lib/pages/NnsNeurons.svelte
index 8b62ffe00b5..19ae45cccc7 100644
--- a/frontend/src/lib/pages/NnsNeurons.svelte
+++ b/frontend/src/lib/pages/NnsNeurons.svelte
@@ -11,6 +11,7 @@
     startReducingVotingPowerAfterSecondsStore,
   } from "$lib/derived/network-economics.derived";
   import { nonEmptyNeuronStore } from "$lib/derived/neurons.derived";
+  import NnsNeuronModals from "$lib/modals/neurons/NnsNeuronModals.svelte";
   import { listNeurons } from "$lib/services/neurons.services";
   import { authStore } from "$lib/stores/auth.store";
   import { i18n } from "$lib/stores/i18n";
@@ -59,6 +60,8 @@
   {:else}
     <EmptyMessage>{$i18n.neurons.text}</EmptyMessage>
   {/if}
+
+  <NnsNeuronModals />
 </TestIdWrapper>
 
 <style lang="scss">
diff --git a/frontend/src/lib/types/nns-neuron-detail.modal.ts b/frontend/src/lib/types/nns-neuron-detail.modal.ts
index 03cf63a51b3..5af7803d23e 100644
--- a/frontend/src/lib/types/nns-neuron-detail.modal.ts
+++ b/frontend/src/lib/types/nns-neuron-detail.modal.ts
@@ -6,6 +6,7 @@ export type NnsNeuronModalType =
   | "disburse"
   | "dissolve"
   | "follow"
+  | "follow-by-topic"
   | "add-hotkey"
   | "split-neuron"
   | "increase-stake"

From a415bea66dfedf42fd8719a2a766740a539637d1 Mon Sep 17 00:00:00 2001
From: Yusef Habib Fernandez <habibfernandez@gmail.com>
Date: Tue, 24 Jun 2025 14:26:51 +0200
Subject: [PATCH 2/2] WIP

---
 .../FollowNnsNeuronsByTopicItem.svelte        | 192 ++++++++++++++++++
 .../FollowNnsNeuronsByTopicModal.svelte       | 177 ++++++++++++++++
 .../FollowNnsNeuronsByTopicStepNeuron.svelte  | 161 +++++++++++++++
 .../FollowNnsNeuronsByTopicStepTopics.svelte  | 157 ++++++++++++++
 .../lib/modals/neurons/NnsNeuronModals.svelte |   6 +-
 frontend/src/lib/types/nns.ts                 |   6 +
 6 files changed, 698 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/lib/modals/neurons/FollowNnsNeuronsByTopicItem.svelte
 create mode 100644 frontend/src/lib/modals/neurons/FollowNnsNeuronsByTopicModal.svelte
 create mode 100644 frontend/src/lib/modals/neurons/FollowNnsNeuronsByTopicStepNeuron.svelte
 create mode 100644 frontend/src/lib/modals/neurons/FollowNnsNeuronsByTopicStepTopics.svelte
 create mode 100644 frontend/src/lib/types/nns.ts

diff --git a/frontend/src/lib/modals/neurons/FollowNnsNeuronsByTopicItem.svelte b/frontend/src/lib/modals/neurons/FollowNnsNeuronsByTopicItem.svelte
new file mode 100644
index 00000000000..69220563afd
--- /dev/null
+++ b/frontend/src/lib/modals/neurons/FollowNnsNeuronsByTopicItem.svelte
@@ -0,0 +1,192 @@
+<script lang="ts">
+  import { i18n } from "$lib/stores/i18n";
+  import type { NnsTopicFollowee } from "$lib/types/nns";
+  import { getTopicSubtitle, getTopicTitle } from "$lib/utils/neuron.utils";
+  import {
+    Checkbox,
+    Collapsible,
+    IconCheckCircleFill,
+    IconErrorOutline,
+    IconExpandMore,
+  } from "@dfinity/gix-components";
+  import type { NeuronId, Topic } from "@dfinity/nns";
+
+  type Props = {
+    topic: Topic;
+    followees: NnsTopicFollowee[];
+    checked: boolean;
+    onNnsChange: (args: { topic: Topic; checked: boolean }) => void;
+    removeFollowing: (args: { topic: Topic; neuronId: NeuronId }) => void;
+  };
+
+  let {
+    topic,
+    followees,
+    checked = false,
+    onNnsChange,
+    removeFollowing,
+  }: Props = $props();
+
+  const name = $derived(getTopicTitle({ topic, i18n: $i18n }));
+  let description = $derived(getTopicSubtitle({ topic, i18n: $i18n }));
+
+  // const topicKey: SnsTopicKey = $derived(getSnsTopicInfoKey(topicInfo));
+  // const name: string = $derived(fromDefinedNullable(topicInfo.name));
+  // const description: string = $derived(
+  //   fromDefinedNullable(topicInfo.description)
+  // );
+  // const followees: FolloweeData[] = $derived.by(() => {
+  //   const followesPerTopic = followeesByTopic({ neuron, topic });
+
+  //   const mapToKnownNeuron = (neuronId: NeuronId): FolloweeData => {
+  //     const knownNeuron = $knownNeuronsStore.find(({ id }) => id === neuronId);
+  //     return nonNullish(knownNeuron)
+  //       ? {
+  //           neuronId: knownNeuron.id,
+  //           name: knownNeuron.name,
+  //         }
+  //       : { neuronId };
+  //   };
+  //   // If we remove the last followee of that topic, followesPerTopic is undefined.
+  //   // and we need to reset the followees array
+  //   return followesPerTopic?.map(mapToKnownNeuron) ?? [];
+  // });
+
+  const onChange = () => {
+    // Checkbox doesn't support two-way binding
+    checked = !checked;
+    onNnsChange({ topic, checked });
+  };
+
+  let toggleContent: () => void = $state(() => {});
+  let expanded: boolean = $state(false);
+  const isFollowingByTopic = $derived(followees.length > 0);
+</script>
+
+<div class="topic-item" data-tid="follow-sns-neurons-by-topic-item-component">
+  <Collapsible
+    testId="topic-collapsible"
+    expandButton={false}
+    externalToggle={true}
+    bind:toggleContent
+    bind:expanded
+  >
+    <div slot="header" class="header" class:expanded>
+      <Checkbox
+        inputId={String(topic)}
+        text="block"
+        {checked}
+        on:nnsChange={onChange}
+        --checkbox-label-order="1"
+        --checkbox-padding="var(--padding) 0"
+      >
+        <span data-tid="topic-name">{name}</span>
+      </Checkbox>
+
+      <div
+        class="icon"
+        data-tid="topic-following-status"
+        class:isFollowingByTopic
+      >
+        {#if isFollowingByTopic}
+          <IconCheckCircleFill />
+        {:else}
+          <IconErrorOutline />
+        {/if}
+      </div>
+
+      <button
+        data-tid="expand-button"
+        class="expand-button"
+        class:expanded
+        onclick={toggleContent}
+      >
+        <IconExpandMore />
+      </button>
+    </div>
+    <div class="expandable-content">
+      <p class="description" data-tid="topic-description">
+        {description}
+      </p>
+
+      <div class="followees">
+        {#if followees.length > 0}
+          <h5 class="followee-header"
+            >{$i18n.follow_sns_topics.topics_following}</h5
+          >
+        {/if}
+
+        {#if followees.length > 0}
+          <ul class="followee-list">
+            {#each followees as followee}
+              <li>{followee} </li>
+            {/each}
+          </ul>
+        {/if}
+      </div>
+    </div></Collapsible
+  >
+</div>
+
+<style lang="scss">
+  @use "@dfinity/gix-components/dist/styles/mixins/fonts";
+
+  .header {
+    display: grid;
+    grid-template-columns: auto min-content min-content;
+    gap: var(--padding);
+    align-items: center;
+
+    // stretching to the full Collapsible header width
+    flex: 1 1 100%;
+  }
+
+  .expand-button {
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--primary);
+
+    transition: transform ease-out var(--animation-time-normal);
+    &.expanded {
+      transform: rotate(-180deg);
+    }
+  }
+
+  .expandable-content {
+    // Aligning with the checkbox label
+    margin-left: calc(20px + var(--padding));
+  }
+
+  .followee-header {
+    @include fonts.small(true);
+
+    margin-top: var(--padding-2x);
+    color: var(--description-color);
+  }
+
+  .legacy-description {
+    @include fonts.small();
+    margin: var(--padding) 0;
+  }
+
+  .followee-list {
+    padding: 0;
+    list-style-type: none;
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--padding);
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    color: var(--tertiary);
+
+    &.isFollowingByTopic {
+      color: var(--positive-emphasis);
+    }
+  }
+</style>
diff --git a/frontend/src/lib/modals/neurons/FollowNnsNeuronsByTopicModal.svelte b/frontend/src/lib/modals/neurons/FollowNnsNeuronsByTopicModal.svelte
new file mode 100644
index 00000000000..198dab37bc5
--- /dev/null
+++ b/frontend/src/lib/modals/neurons/FollowNnsNeuronsByTopicModal.svelte
@@ -0,0 +1,177 @@
+<script lang="ts">
+  import { definedNeuronsStore } from "$lib/derived/neurons.derived";
+  import { startBusy } from "$lib/stores/busy.store";
+  import { i18n } from "$lib/stores/i18n";
+  import { topicsToFollow } from "$lib/utils/neuron.utils";
+  import { sortNnsTopics } from "$lib/utils/proposals.utils";
+  import {
+    stopBusy,
+    WizardModal,
+    wizardStepIndex,
+    type WizardStep,
+    type WizardSteps,
+  } from "@dfinity/gix-components";
+  import type { NeuronId, Topic } from "@dfinity/nns";
+  import FollowNnsNeuronsByTopicStepTopics from "./FollowNnsNeuronsByTopicStepTopics.svelte";
+
+  type Props = {
+    neuronId: NeuronId;
+    closeModal: () => void;
+    reloadNeuron?: () => Promise<void>;
+  };
+  const { neuronId, closeModal, reloadNeuron }: Props = $props();
+
+  const STEP_TOPICS = "topics";
+  const STEP_NEURON = "neurons";
+  const steps: WizardSteps = [
+    {
+      name: STEP_TOPICS,
+      title: $i18n.follow_sns_topics.topics_title,
+    },
+    {
+      name: STEP_NEURON,
+      title: $i18n.follow_sns_topics.neuron_title,
+    },
+  ];
+
+  let currentStep: WizardStep | undefined = $state();
+  let modal: WizardModal | undefined = $state();
+
+  const neuron = $derived(
+    $definedNeuronsStore.find(({ neuronId: id }) => id === neuronId)
+  );
+  const sortedTopics = $derived(
+    neuron ? sortNnsTopics({ topics: topicsToFollow(neuron), i18n: $i18n }) : []
+  );
+  let selectedTopics: Topic[] = $state([]);
+
+  const openNextStep = () => {
+    modal?.set(wizardStepIndex({ name: STEP_NEURON, steps }));
+  };
+
+  const addFollowing = async (followeeHex: string) => {
+    startBusy({
+      initiator: "add-followee-by-topic",
+      labelKey: "follow_sns_topics.busy_updating",
+    });
+
+    // if (!(await validateNeuronId(followeeNeuronId))) {
+    //   stopBusy("add-followee-by-topic");
+    //   neuronErrorMessage = replacePlaceholders(
+    //     $i18n.follow_sns_topics.error_neuron_not_exist,
+    //     {
+    //       $neuronId: followeeHex,
+    //     }
+    //   );
+    //   return;
+    // }
+
+    // const followingsToSet = addSnsNeuronToFollowingsByTopics({
+    //   topics: selectedTopics,
+    //   neuronId: followeeNeuronId,
+    //   followings,
+    // });
+
+    // if (followingsToSet.length === 0) {
+    //   stopBusy("add-followee-by-topic");
+    //   neuronErrorMessage = $i18n.follow_sns_topics.error_already_following;
+    //   return;
+    // }
+
+    // const { success, error } = await setFollowing({
+    //   rootCanisterId,
+    //   neuronId: fromDefinedNullable(neuron.id),
+    //   followings: followingsToSet,
+    // });
+
+    // if (success) {
+    //   await reloadNeuron();
+    //   // Reset forms state
+    //   selectedTopics = [];
+    //   followeeNeuronIdHex = "";
+
+    //   openFirstStep();
+    //   toastsSuccess({
+    //     labelKey: $i18n.follow_sns_topics.success_set_following,
+    //   });
+    // } else {
+    //   toastsError({
+    //     labelKey: "follow_sns_topics.error_add_following",
+
+    //     err: error,
+    //   });
+    // }
+
+    stopBusy("add-followee-by-topic");
+  };
+
+  const removeFollowing = async ({
+    topic,
+    neuronId,
+  }: {
+    topic: Topic;
+    neuronId: NeuronId;
+  }) => {
+    startBusy({
+      initiator: "remove-followee-by-topic",
+      labelKey: "follow_sns_topics.busy_removing",
+    });
+
+    // const { success, error } = await setFollowing({
+    //   rootCanisterId,
+    //   neuronId: fromDefinedNullable(neuron.id),
+    //   followings: removeSnsNeuronFromFollowingsByTopics({
+    //     followings,
+    //     topics: [topicKey],
+    //     neuronId,
+    //   }),
+    // });
+
+    // if (success) {
+    //   await reloadNeuron();
+    // } else {
+    //   toastsError({
+    //     labelKey: "follow_sns_topics.error_remove_following",
+    //     err: error,
+    //   });
+    // }
+
+    stopBusy("remove-followee-by-topic");
+  };
+</script>
+
+<WizardModal
+  testId="follow-nns-neurons-by-topic-modal"
+  {steps}
+  bind:currentStep
+  bind:this={modal}
+  on:nnsClose={closeModal}
+>
+  <svelte:fragment slot="title">{currentStep?.title}</svelte:fragment>
+
+  {#if currentStep?.name === STEP_TOPICS}
+    <FollowNnsNeuronsByTopicStepTopics
+      {neuron}
+      {closeModal}
+      {openNextStep}
+      {addFollowing}
+      {removeFollowing}
+      topics={sortedTopics}
+      bind:selectedTopics
+    />
+  {/if}
+
+  {#if currentStep?.name === STEP_NEURON}
+    <!-- Show the Modal with the field to select a Neuron to follow -->
+  {/if}
+</WizardModal>
+
+<style lang="scss">
+  @use "@dfinity/gix-components/dist/styles/mixins/media";
+
+  // Ensure all tag backgrounds in the modal are visible in dark mode.
+  @include media.dark-theme {
+    // Same color as the checkbox background on the first step.
+    --tag-background: var(--input-background);
+  }
+</style>
diff --git a/frontend/src/lib/modals/neurons/FollowNnsNeuronsByTopicStepNeuron.svelte b/frontend/src/lib/modals/neurons/FollowNnsNeuronsByTopicStepNeuron.svelte
new file mode 100644
index 00000000000..58404a4da7a
--- /dev/null
+++ b/frontend/src/lib/modals/neurons/FollowNnsNeuronsByTopicStepNeuron.svelte
@@ -0,0 +1,161 @@
+<script lang="ts">
+  import KnownNeuronFollowItem from "$lib/components/neurons/KnownNeuronFollowItem.svelte";
+  import Input from "$lib/components/ui/Input.svelte";
+  import { icpAccountsStore } from "$lib/derived/icp-accounts.derived";
+  import { listKnownNeurons } from "$lib/services/known-neurons.services";
+  import { addFollowee } from "$lib/services/neurons.services";
+  import { authStore } from "$lib/stores/auth.store";
+  import { startBusy, stopBusy } from "$lib/stores/busy.store";
+  import { i18n } from "$lib/stores/i18n";
+  import { sortedknownNeuronsStore } from "$lib/stores/known-neurons.store";
+  import {
+    isHotKeyControllable,
+    isNeuronControllable,
+  } from "$lib/utils/neuron.utils";
+  import { Modal, Spinner, busy } from "@dfinity/gix-components";
+  import { Topic, type NeuronId, type NeuronInfo } from "@dfinity/nns";
+  import { createEventDispatcher, onMount } from "svelte";
+
+  type Props = {
+    neuron: NeuronInfo;
+    topics: Topic[];
+  };
+  const { neuron, topics }: Props = $props();
+
+  const isControllableByUser = $derived(
+    isNeuronControllable({
+      neuron,
+      identity: $authStore.identity,
+      accounts: $icpAccountsStore,
+    })
+  );
+  const isControllableByHotkey = $derived(
+    isHotKeyControllable({
+      neuron,
+      identity: $authStore.identity,
+    })
+  );
+  const isUserAuthorized = $derived(
+    topic === Topic.NeuronManagement
+      ? isControllableByUser
+      : isControllableByUser || isControllableByHotkey
+  );
+
+  // let followeeAddress = "";
+
+  // let topicFollowees: NeuronId[];
+  // $: topicFollowees = followeesByTopic({ neuron, topic }) ?? [];
+
+  onMount(() => listKnownNeurons());
+
+  const followsKnownNeuron = ({
+    followees,
+    knownNeuronId,
+  }: {
+    followees: NeuronId[];
+    knownNeuronId: NeuronId;
+  }): boolean => followees.find((id) => id === knownNeuronId) !== undefined;
+
+  const dispatcher = createEventDispatcher();
+  const close = () => {
+    dispatcher("nnsClose");
+  };
+  const addFolloweeByAddress = async () => {
+    let followee: bigint;
+    if (followeeAddress.length === 0) {
+      return;
+    }
+
+    try {
+      followee = BigInt(followeeAddress);
+    } catch (_) {
+      // TODO: Show error in Input - https://dfinity.atlassian.net/browse/L2-408
+      alert(`Incorrect followee address ${followeeAddress}`);
+      return;
+    }
+
+    startBusy({ initiator: "add-followee" });
+
+    await addFollowee({
+      neuronId: neuron.neuronId,
+      topic,
+      followee,
+    });
+
+    stopBusy("add-followee");
+    close();
+
+    followeeAddress = "";
+  };
+</script>
+
+<Modal on:nnsClose testId="new-followee-modal-component">
+  <svelte:fragment slot="title">{$i18n.new_followee.title}</svelte:fragment>
+
+  <form on:submit|preventDefault={addFolloweeByAddress}>
+    <Input
+      inputType="text"
+      autocomplete="off"
+      placeholderLabelKey="new_followee.placeholder"
+      name="new-followee-address"
+      bind:value={followeeAddress}
+    >
+      <svelte:fragment slot="label">{$i18n.new_followee.label}</svelte:fragment>
+    </Input>
+    <button
+      data-tid="follow-neuron-button"
+      class="primary"
+      type="submit"
+      disabled={followeeAddress.length === 0 || !isUserAuthorized || $busy}
+    >
+      {$i18n.new_followee.follow_neuron}
+    </button>
+  </form>
+
+  <div class="following">
+    <span class="label">{$i18n.new_followee.options_title}</span>
+    {#if $sortedknownNeuronsStore === undefined}
+      <Spinner />
+    {:else}
+      <ul>
+        {#each $sortedknownNeuronsStore as knownNeuron}
+          <li data-tid="known-neuron-item">
+            <KnownNeuronFollowItem
+              on:nnsUpdated={close}
+              {knownNeuron}
+              neuronId={neuron.neuronId}
+              {topic}
+              isFollowed={followsKnownNeuron({
+                followees: topicFollowees,
+                knownNeuronId: knownNeuron.id,
+              })}
+            />
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+</Modal>
+
+<style lang="scss">
+  form {
+    gap: var(--padding-2x);
+  }
+
+  button {
+    width: fit-content;
+    align-self: flex-end;
+  }
+
+  ul {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--padding);
+    padding: var(--padding-1_5x) 0 0;
+  }
+
+  .following {
+    margin: var(--padding-4x) 0 0;
+  }
+</style>
diff --git a/frontend/src/lib/modals/neurons/FollowNnsNeuronsByTopicStepTopics.svelte b/frontend/src/lib/modals/neurons/FollowNnsNeuronsByTopicStepTopics.svelte
new file mode 100644
index 00000000000..481200cd613
--- /dev/null
+++ b/frontend/src/lib/modals/neurons/FollowNnsNeuronsByTopicStepTopics.svelte
@@ -0,0 +1,157 @@
+<script lang="ts">
+  import TestIdWrapper from "$lib/components/common/TestIdWrapper.svelte";
+  import Separator from "$lib/components/ui/Separator.svelte";
+  import TooltipIcon from "$lib/components/ui/TooltipIcon.svelte";
+  import { i18n } from "$lib/stores/i18n";
+  import type { NnsTopicFollowee } from "$lib/types/nns";
+  import { Collapsible } from "@dfinity/gix-components";
+  import { Topic, type NeuronId, type NeuronInfo } from "@dfinity/nns";
+  import FollowNnsNeuronsByTopicItem from "./FollowNnsNeuronsByTopicItem.svelte";
+
+  type Props = {
+    neuron?: NeuronInfo;
+    topics: Topic[];
+    selectedTopics: Topic[];
+    closeModal: () => void;
+    openNextStep: () => void;
+    addFollowing: () => void;
+    removeFollowing: (args: { topic: Topic; neuronId: NeuronId }) => void;
+  };
+  let {
+    neuron,
+    topics,
+    selectedTopics = $bindable(),
+    closeModal,
+    openNextStep,
+    addFollowing,
+    removeFollowing,
+  }: Props = $props();
+
+  const [requiredTopics, advanceTopics] = $derived.by(() => {
+    const allTopics = topics.findIndex((topic) => topic === Topic.Unspecified);
+    return [topics.slice(0, allTopics + 1), topics.slice(allTopics + 1)];
+  });
+
+  // const openNewFolloweeModal = () => (showNewFolloweeModal = true);
+  // const closeNewFolloweeModal = () => (showNewFolloweeModal = false);
+
+  // const removeCurrentFollowee = async (followee: NeuronId) => {
+  //   startBusy({ initiator: "remove-followee" });
+  //   await removeFollowee({
+  //     neuronId: neuron.neuronId,
+  //     topic,
+  //     followee,
+  //   });
+  //   stopBusy("remove-followee");
+  // };
+  const onTopicSelectionChange = ({
+    topic,
+    checked,
+  }: {
+    topic: Topic;
+    checked: boolean;
+  }) => {
+    if (checked) {
+      selectedTopics = [...selectedTopics, topic];
+    } else {
+      selectedTopics = selectedTopics.filter((key) => key !== topic);
+    }
+  };
+  const followees: NnsTopicFollowee[] = [];
+</script>
+
+<TestIdWrapper testId="follow-sns-neurons-by-topic-step-topics-component">
+  <p class="description">
+    Delegate your voting by following other neurons to maximize your voting
+    rewards. Your voting is fully delegated only if following is set for every
+    topic. Alternatively, you can vote manually.
+  </p>
+
+  <Separator spacing="medium" />
+
+  <div class="topic-group" data-tid="critical-topic-group">
+    <h5 class="headline description"
+      >Required Settings
+      <TooltipIcon
+        >{$i18n.follow_sns_topics.topics_critical_tooltip}</TooltipIcon
+      ></h5
+    >
+
+    {#each requiredTopics as topic}
+      <FollowNnsNeuronsByTopicItem
+        {topic}
+        {removeFollowing}
+        {followees}
+        onNnsChange={onTopicSelectionChange}
+        checked={selectedTopics.includes(topic)}
+      />
+    {/each}
+  </div>
+
+  <Separator spacing="medium" />
+
+  <div class="topic-group" data-tid="critical-topic-group">
+    <!-- Requires a maxContentHeight overwrite to allow the content to grow to the maximum if all children are expanded -->
+    <Collapsible
+      testId="topic-collapsible"
+      iconSize="medium"
+      maxContentHeight={3000}
+    >
+      <h5 slot="header" class="headline description">Advance Settings </h5>
+
+      {#each advanceTopics as topic}
+        <FollowNnsNeuronsByTopicItem
+          {topic}
+          {removeFollowing}
+          {followees}
+          onNnsChange={onTopicSelectionChange}
+          checked={selectedTopics.includes(topic)}
+        />
+      {/each}
+    </Collapsible>
+  </div>
+
+  <!-- TODO: Alls modals should have a foote always visible and scrolling area should be for the content -->
+  <div class="toolbar">
+    <button
+      class="secondary"
+      type="button"
+      data-tid="cancel-button"
+      onclick={closeModal}
+    >
+      {$i18n.core.cancel}
+    </button>
+
+    <button
+      data-tid="next-button"
+      class="primary"
+      disabled={selectedTopics.length === 0}
+      onclick={openNextStep}
+    >
+      {$i18n.core.next}
+    </button>
+  </div>
+</TestIdWrapper>
+
+<style lang="scss">
+  .topic-group {
+    margin-bottom: var(--padding-3x);
+    display: flex;
+    flex-direction: column;
+    gap: var(--padding);
+
+    .headline {
+      margin: var(--padding) 0;
+    }
+  }
+
+  .topic-group-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    button {
+      color: var(--primary);
+    }
+  }
+</style>
diff --git a/frontend/src/lib/modals/neurons/NnsNeuronModals.svelte b/frontend/src/lib/modals/neurons/NnsNeuronModals.svelte
index f0e6a4f9e3f..c4d953bdefe 100644
--- a/frontend/src/lib/modals/neurons/NnsNeuronModals.svelte
+++ b/frontend/src/lib/modals/neurons/NnsNeuronModals.svelte
@@ -31,6 +31,7 @@
   } from "$lib/utils/neuron.utils";
   import type { NeuronInfo } from "@dfinity/nns";
   import { nonNullish } from "@dfinity/utils";
+  import FollowNnsNeuronsByTopicModal from "./FollowNnsNeuronsByTopicModal.svelte";
 
   let modal: NnsNeuronModal<NnsNeuronModalData> | undefined;
   const close = () => (modal = undefined);
@@ -102,7 +103,10 @@
     {/if}
 
     {#if type === "follow-by-topic"}
-      <FollowNeuronsModal onClose={close} neuronId={neuron.neuronId} />
+      <FollowNnsNeuronsByTopicModal
+        closeModal={close}
+        neuronId={neuron.neuronId}
+      />
     {/if}
 
     {#if type === "add-hotkey"}
diff --git a/frontend/src/lib/types/nns.ts b/frontend/src/lib/types/nns.ts
new file mode 100644
index 00000000000..d2a18932af3
--- /dev/null
+++ b/frontend/src/lib/types/nns.ts
@@ -0,0 +1,6 @@
+import type { NeuronId } from "@dfinity/nns";
+
+export type NnsTopicFollowee = {
+  neuronId: NeuronId;
+  name?: string;
+};