diff --git a/addon/components/hyper-table-v2/manage-columns.hbs b/addon/components/hyper-table-v2/manage-columns.hbs
index 6feb5b55..a5eede67 100644
--- a/addon/components/hyper-table-v2/manage-columns.hbs
+++ b/addon/components/hyper-table-v2/manage-columns.hbs
@@ -4,73 +4,75 @@
     @label={{t "hypertable.features.manage_fields.title"}}
     {{on "click" this.toggleAvailableFields}}
   />
-  <div class={{concat "available-fields-wrapper" (if this.displayAvailableFields " visible" " invisible")}}>
-    <div class="available-fields-wrapper__categories">
-      <div
-        class={{concat "field-category" (unless this.activeColumnCategory " field-category--active")}}
-        role="button"
-        {{on "click" (fn this.setFieldCategory null)}}
-        data-control-name="field_category_toggle_all_fields"
-      >
-        <div>{{t "hypertable.features.manage_fields.all_fields"}}</div>
-        <OSS::Icon @icon="fa-chevron-right" />
-      </div>
-      {{#each this._columnCategories as |category|}}
+  {{#if this.displayAvailableFields}}
+    <div class={{concat "available-fields-wrapper " this.dropdownVisibility}}>
+      <div class="available-fields-wrapper__categories">
         <div
-          class={{concat "field-category" (if (eq this.activeColumnCategory category) " field-category--active")}}
+          class={{concat "field-category" (unless this.activeColumnCategory " field-category--active")}}
           role="button"
-          data-control-name={{concat "field_category_toggle_" category}}
-          {{on "click" (fn this.setFieldCategory category)}}
+          {{on "click" (fn this.setFieldCategory null)}}
+          data-control-name="field_category_toggle_all_fields"
         >
-          <div>{{category}}</div>
+          <div>{{t "hypertable.features.manage_fields.all_fields"}}</div>
           <OSS::Icon @icon="fa-chevron-right" />
         </div>
-      {{/each}}
-    </div>
-    <div class="available-fields-wrapper__fields">
-      <div class="search">
-        <OSS::SearchField
-          @placeholder={{t "hypertable.features.manage_fields.search_placeholder"}}
-          @value={{this.searchColumnDefinitionKeyword}}
-          @onChange={{this.onSearchUpdate}}
-          data-control-name="column_definitions_search_input"
-        />
+        {{#each this._columnCategories as |category|}}
+          <div
+            class={{concat "field-category" (if (eq this.activeColumnCategory category) " field-category--active")}}
+            role="button"
+            data-control-name={{concat "field_category_toggle_" category}}
+            {{on "click" (fn this.setFieldCategory category)}}
+          >
+            <div>{{category}}</div>
+            <OSS::Icon @icon="fa-chevron-right" />
+          </div>
+        {{/each}}
       </div>
-      <div class="fields-list">
-        {{#each-in this.orderedFilteredClusters as |clusterName fields|}}
-          {{#if clusterName}}
-            <div class="cluster-name font-weight-semibold margin-top-px-6">
-              {{clusterName}}
-            </div>
-          {{/if}}
-          {{#each fields as |field|}}
-            <div
-              class="field"
-              role="button"
-              {{on "mousedown" this.noop}}
-              {{on "click" (fn this.columnVisibilityUpdate field)}}
-            >
-              {{#if field.isLoading}}
-                <div><OSS::Icon @icon="fa-spinner fa-spin" /></div>
-              {{else}}
-                <OSS::Checkbox
-                  @checked={{field.visible}}
-                  @onChange={{fn this.columnVisibilityUpdate field}}
-                  @size="sm"
-                  data-control-name={{concat "column_definition_toggle_checkbox_" field.definition.key}}
-                />
-              {{/if}}
-              <div class="margin-left-px-6">
-                {{field.definition.name}}
+      <div class="available-fields-wrapper__fields">
+        <div class="search">
+          <OSS::SearchField
+            @placeholder={{t "hypertable.features.manage_fields.search_placeholder"}}
+            @value={{this.searchColumnDefinitionKeyword}}
+            @onChange={{this.onSearchUpdate}}
+            data-control-name="column_definitions_search_input"
+          />
+        </div>
+        <div class="fields-list">
+          {{#each-in this.orderedFilteredClusters as |clusterName fields|}}
+            {{#if clusterName}}
+              <div class="cluster-name font-weight-semibold margin-top-px-6">
+                {{clusterName}}
+              </div>
+            {{/if}}
+            {{#each fields as |field|}}
+              <div
+                class="field"
+                role="button"
+                {{on "mousedown" this.noop}}
+                {{on "click" (fn this.columnVisibilityUpdate field)}}
+              >
+                {{#if field.isLoading}}
+                  <div><OSS::Icon @icon="fa-spinner fa-spin" /></div>
+                {{else}}
+                  <OSS::Checkbox
+                    @checked={{field.visible}}
+                    @onChange={{fn this.columnVisibilityUpdate field}}
+                    @size="sm"
+                    data-control-name={{concat "column_definition_toggle_checkbox_" field.definition.key}}
+                  />
+                {{/if}}
+                <div class="margin-left-px-6">
+                  {{field.definition.name}}
+                </div>
               </div>
+            {{/each}}
+          {{else}}
+            <div class="field margin-top-md">
+              {{t "hypertable.features.manage_fields.no_columns"}}
             </div>
-          {{/each}}
-        {{else}}
-          <div class="field margin-top-md">
-            {{t "hypertable.features.manage_fields.no_columns"}}
-          </div>
-        {{/each-in}}
+          {{/each-in}}
+        </div>
       </div>
     </div>
-  </div>
+  {{/if}}
 </div>
\ No newline at end of file
diff --git a/addon/components/hyper-table-v2/manage-columns.ts b/addon/components/hyper-table-v2/manage-columns.ts
index 6dcfd120..43d2f540 100644
--- a/addon/components/hyper-table-v2/manage-columns.ts
+++ b/addon/components/hyper-table-v2/manage-columns.ts
@@ -6,6 +6,7 @@ import { action } from '@ember/object';
 import { isEmpty } from '@ember/utils';
 import TableHandler from '@upfluence/hypertable/core/handler';
 import { ColumnDefinition } from '@upfluence/hypertable/core/interfaces';
+import { later, next } from '@ember/runloop';
 
 type ManagedColumn = {
   definition: ColumnDefinition;
@@ -22,6 +23,7 @@ export default class HyperTableV2ManageColumns extends Component<HyperTableV2Man
   @tracked displayAvailableFields: boolean = false;
   @tracked activeColumnCategory: null | string = null;
   @tracked searchColumnDefinitionKeyword: null | string = null;
+  @tracked dropdownVisibility: 'visible' | 'invisible' = 'invisible';
 
   get _columnCategories(): string[] {
     return (this.args.handler.columnDefinitions || [])
@@ -100,12 +102,26 @@ export default class HyperTableV2ManageColumns extends Component<HyperTableV2Man
 
   @action
   toggleAvailableFields(): void {
-    this.displayAvailableFields = !this.displayAvailableFields;
+    if (this.displayAvailableFields) {
+      this.closeAvailableFields();
+    } else {
+      this.displayAvailableFields = true;
+      next(this, () => {
+        this.dropdownVisibility = 'visible';
+      });
+    }
   }
 
   @action
   closeAvailableFields(): void {
-    this.displayAvailableFields = false;
+    this.dropdownVisibility = 'invisible';
+    later(
+      this,
+      () => {
+        this.displayAvailableFields = false;
+      },
+      300
+    );
   }
 
   @action
diff --git a/tests/integration/components/hyper-table-v2/manage-columns-test.ts b/tests/integration/components/hyper-table-v2/manage-columns-test.ts
index d78f5dc8..6042834a 100644
--- a/tests/integration/components/hyper-table-v2/manage-columns-test.ts
+++ b/tests/integration/components/hyper-table-v2/manage-columns-test.ts
@@ -1,7 +1,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { setupIntl, type TestContext } from 'ember-intl/test-support';
-import { click, fillIn, render } from '@ember/test-helpers';
+import { click, fillIn, render, waitFor } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import { RowsFetcher, TableManager } from '@upfluence/hypertable/test-support';
 import TableHandler from '@upfluence/hypertable/core/handler';
@@ -54,15 +54,17 @@ module('Integration | Component | hyper-table-v2/manage-columns', function (hook
     await this.handler.fetchColumns();
   });
 
-  test('it renders', async function (assert) {
+  test('fields are not rendered in the DOM initially', async function (assert) {
     await render(hbs`<HyperTableV2::ManageColumns @handler={{this.handler}} />`);
-    assert.dom('.available-fields-wrapper.invisible').exists({ count: 1 });
+
+    assert.dom('.available-fields-wrapper').doesNotExist();
   });
 
-  module('when a user clicks on manage column button', function () {
+  module('when a user clicks on manage column button, it is rendered', function () {
     test('it should open the available columns', async function (assert) {
       await render(hbs`<HyperTableV2::ManageColumns @handler={{this.handler}} />`);
       await click('.upf-btn.upf-btn--default');
+      await waitFor('.available-fields-wrapper.visible');
 
       assert.dom('.available-fields-wrapper.visible').exists({ count: 1 });
     });