# How to Add and Manage Multiple Zones in a Hard-Coded Page Using Builder.io

**URL:** <https://forum.builder.io/t/how-to-add-and-manage-multiple-zones-in-a-hard-coded-page-using-builder-io/6865>\
**Category:** Technical Questions\
**Tags:** visual-editor, react, nextjs\
**Created:** [December 2, 2024, 3:19pm UTC](https://forum.builder.io/t/how-to-add-and-manage-multiple-zones-in-a-hard-coded-page-using-builder-io/6865 "2024-12-02T15:19:53Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![SuhaibBaba](https://avatars.discourse-cdn.com/v4/letter/s/9dc877/32.png) [@SuhaibBaba](https://forum.builder.io/u/SuhaibBaba)\
**Post date:** [December 2, 2024, 3:19pm UTC](https://forum.builder.io/t/how-to-add-and-manage-multiple-zones-in-a-hard-coded-page-using-builder-io/6865/1 "2024-12-02T15:19:53Z")

</div>

I am working on a hard-coded page that requires multiple zones (e.g., carousel, banner, feedback) to be dynamically loaded using [Builder.io](http://Builder.io). Currently, I am using the `builder.get` method to fetch content for each zone, but the content from one zone seems to affect others.

```auto
export default async function HomePage() {
  const builderContent = await builder
    // Get the page content from Builder with the specified options
    .get("page", {
      userAttributes: {
        // Use the page path specified in the URL to fetch the content
        urlPath: "/home",
      },
      // Set prerender too false to return JSON instead of HTML
      prerender: false,
    })
    // Convert the result to a promise
    .toPromise();

  return (
    <main>
      <section>
        <RenderBuilderContent
          model="page"
          content={builderContent}
          entry="carouselentry"
        />
      </section>
      {/* Zone for dynamic Builder.io content */}
      <section>
        <RenderBuilderContent
          model="page"
          content={builderContent}
          entry="bannerentry"
        />
      </section>
      {/* Zone for dynamic Builder.io content */}
      <section>
        <RenderBuilderContent
          model="page"
          entry="feedbackentry"
          content={builderContent}
        />
      </section>
    </main>
  );
}

```

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [December 3, 2024, 12:38pm UTC](https://forum.builder.io/t/how-to-add-and-manage-multiple-zones-in-a-hard-coded-page-using-builder-io/6865/2 "2024-12-03T12:38:46Z")

</div>

Hello @SuhaibBaba,

Welcome to the [Builder.io](http://Builder.io) forum post.

To query and add multiple Builder components from the same model, please refer to the forum post below.

> [@How come having multiple calls to the API to the same content model, or having multiple \<BuilderComponent\> elements of the same model type, doesn't render as I expect?](https://forum.builder.io/t/how-come-having-multiple-calls-to-the-api-to-the-same-content-model-or-having-multiple-buildercomponent-elements-of-the-same-model-type-doesnt-render-as-i-expect/2931):
>
> Sometimes, it makes sense to have multiple versions of a given content type on the same page. For example, maybe you have a model for an ad block on your page, and you want multiple ad blocks in a row. However, if you make multiple calls to const first = builder.get(myModel, { query: { id: 123 } }); const second = builder.get(myModel, { query: { id: 456 } }); const third = builder.get(myModel, { query: { id: 789 } }); or in the actual rendering element: \<BuilderComponent model={myModel} opti…