diff --git a/index.html b/index.html
index c42b6da9..d195a3b4 100644
--- a/index.html
+++ b/index.html
@@ -94,17 +94,19 @@
         padding-top: 0;
         padding-bottom: 4rem;
       }
-      .info__company {
+      h1 {
         display: flex;
-        align-items: center;
-        gap: 3%;
+        flex-direction: column;
       }
       .info__company img {
         width: 12%;
         height: 100%;
         margin-top: 4px;
       }
-      .info__company h2 {
+      .info__company {
+        display: flex;
+        align-items: center;
+        gap: 3%;
         font-size: clamp(55px, 9vw, 10rem);
         color: var(--accent);
         background-image: linear-gradient(69deg, #96d9ab 30%, #ffffff 75%);
@@ -127,11 +129,11 @@
         padding-top: 0.9rem;
         width: 50%;
       }
-      .info__text h3 {
+      .info__first {
         font-weight: 400;
         font-size: 30px;
       }
-      .info__text p {
+      .info__community {
         font-size: 24px;
         padding-top: 1.2rem;
         color: #fc5969;
@@ -149,6 +151,7 @@
         font-weight: 600;
         letter-spacing: 0.2px;
         font-size: 20px;
+        cursor: pointer;
       }
       .info__group {
         display: flex;
@@ -198,10 +201,10 @@
         .info__text {
           padding-top: 0;
         }
-        .info__text h3 {
+        .info__first {
           font-size: 26px;
         }
-        .info__text p {
+        .info__community {
           font-size: 20px;
         }
         .info__group {
@@ -284,10 +287,10 @@
           font-size: 18px;
         }
 
-        .info__text h3 {
+        .info__first {
           font-size: 22px;
         }
-        .info__text p {
+        .info__community {
           font-size: 19px;
         }
         .github p {
@@ -304,7 +307,7 @@
           width: 70px;
           margin-top: 0;
         }
-        .info__company h2 {
+        .info__company {
           line-height: 1.1;
         }
       }
@@ -339,25 +342,28 @@
       </a>
     </header>
     <main class="main">
-      <div class="info container">
-        <div class="info__company">
-          <img
-            src="/assets/logo_mongo_modeler_dark_mode.svg"
-            alt="Mongo Modeler Logo"
-          />
-          <h2 class="info__company">Mongo Modeler</h2>
-        </div>
-        <h1 class="info__claim">
-          A free, online Data Modeling tool for MongoDB.
+      <section class="info container">
+        <h1>
+          <span class="info__company">
+            <img
+              src="/assets/logo_mongo_modeler_dark_mode.svg"
+              alt="Mongo Modeler Logo"
+            />
+            Mongo Modeler</span
+          >
+          <span class="info__claim">
+            A free, online Data Modeling tool for MongoDB.
+          </span>
         </h1>
         <div class="info__detail">
           <div class="info__text">
-            <h3>
+            <p class="info__first">
               Mongo Modeler is a <span class="highlight">free</span>, open
               source <span class="highlight">tool</span> for visualization of
               <span class="highlight">MongoDB</span> schema design
-            </h3>
-            <p>Community preview</p>
+            </p>
+
+            <p class="info__community">Community preview</p>
             <div class="info__group">
               <a href="./editor.html" class="info__link"
                 >Launch MongoDB Designer</a
@@ -374,17 +380,17 @@ <h3>
             ></iframe>
           </div>
         </div>
-      </div>
-      <div class="github">
-        <p class="container">
-          Interested in suggesting a new feature or reporting a bug? Visit our
-          project's Github page to make your contribution.
-          <a href="https://github.com/Lemoncode/mongo-modeler" target="_blank"
-            >Go to Github</a
-          >
-        </p>
-      </div>
+      </section>
     </main>
+    <footer class="github">
+      <p class="container">
+        Interested in suggesting a new feature or reporting a bug? Visit our
+        project's Github page to make your contribution.
+        <a href="https://github.com/Lemoncode/mongo-modeler" target="_blank"
+          >Go to Github</a
+        >
+      </p>
+    </footer>
     <script>
       let installPrompt = null;
       const installButton = document.querySelector('#install');
diff --git a/src/common/a11y/click-outside.hook.ts b/src/common/a11y/click-outside.hook.ts
new file mode 100644
index 00000000..210fc98d
--- /dev/null
+++ b/src/common/a11y/click-outside.hook.ts
@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const useClickOutside = (
+  isOpen: boolean,
+  ref: React.RefObject<HTMLElement>,
+  callback: (e: MouseEvent) => void
+) => {
+  const handleClickOutside = (e: MouseEvent) => {
+    callback(e);
+  };
+
+  React.useEffect(() => {
+    ref.current?.addEventListener('click', handleClickOutside);
+
+    return () => {
+      ref.current?.removeEventListener('click', handleClickOutside);
+    };
+  }, [isOpen]);
+};
diff --git a/src/common/a11y/common.model.ts b/src/common/a11y/common.model.ts
new file mode 100644
index 00000000..0454f819
--- /dev/null
+++ b/src/common/a11y/common.model.ts
@@ -0,0 +1,15 @@
+export type BaseA11yOption<Option> = Option & {
+  tabIndex: number;
+};
+
+export type NestedOption<Option> = {
+  id: string;
+  children?: Option[];
+};
+
+export type FlatOption<Option extends NestedOption<Option>> = Omit<
+  Option,
+  'children'
+> & {
+  parentId?: string;
+};
diff --git a/src/common/a11y/focus.common-helpers.ts b/src/common/a11y/focus.common-helpers.ts
new file mode 100644
index 00000000..7afaa1ab
--- /dev/null
+++ b/src/common/a11y/focus.common-helpers.ts
@@ -0,0 +1,13 @@
+export const getArrowUpIndex = (currentIndex: number) => {
+  const isFirstOption = currentIndex === 0;
+  return isFirstOption ? currentIndex : currentIndex - 1;
+};
+
+export const getArrowDownIndex = (currentIndex: number, options: any[]) => {
+  const isLastOption = currentIndex === options.length - 1;
+  return isLastOption ? currentIndex : currentIndex + 1;
+};
+
+export const getFocusedOption = <FocusableOption extends { tabIndex: number }>(
+  options: FocusableOption[]
+) => options.find(option => option.tabIndex === 0);
diff --git a/src/common/a11y/index.ts b/src/common/a11y/index.ts
new file mode 100644
index 00000000..79b3b552
--- /dev/null
+++ b/src/common/a11y/index.ts
@@ -0,0 +1,6 @@
+export * from './select';
+export * from './nested-select';
+export * from './on-key.hook';
+export * from './focus.common-helpers';
+export * from './nested-list';
+export * from './common.model';
diff --git a/src/common/a11y/list/focus.helpers.ts b/src/common/a11y/list/focus.helpers.ts
new file mode 100644
index 00000000..bb363575
--- /dev/null
+++ b/src/common/a11y/list/focus.helpers.ts
@@ -0,0 +1,26 @@
+import { BaseA11yOption } from '../common.model';
+
+export const setInitialFocus = <
+  Option,
+  A11yOption extends BaseA11yOption<Option>,
+>(
+  options: Option[]
+): A11yOption[] => {
+  const a11ySelectionOptions = options.map<A11yOption>(
+    (option, index) =>
+      ({
+        ...option,
+        tabIndex: index === 0 ? 0 : -1,
+      }) as unknown as A11yOption
+  );
+
+  return a11ySelectionOptions;
+};
+
+export const onFocusOption =
+  <Option>(option: BaseA11yOption<Option>) =>
+  (element: any) => {
+    if (option.tabIndex === 0) {
+      element?.focus();
+    }
+  };
diff --git a/src/common/a11y/list/index.ts b/src/common/a11y/list/index.ts
new file mode 100644
index 00000000..5bf9fefe
--- /dev/null
+++ b/src/common/a11y/list/index.ts
@@ -0,0 +1,2 @@
+export * from './list.hooks';
+export * from './list.model';
diff --git a/src/common/a11y/list/list.hooks.ts b/src/common/a11y/list/list.hooks.ts
new file mode 100644
index 00000000..1f710bd9
--- /dev/null
+++ b/src/common/a11y/list/list.hooks.ts
@@ -0,0 +1,95 @@
+import React from 'react';
+import { BaseA11yOption } from '../common.model';
+import { getArrowDownIndex, getArrowUpIndex } from '../focus.common-helpers';
+import { useOnKey } from '../on-key.hook';
+import { onFocusOption, setInitialFocus } from './focus.helpers';
+import { SetInitialFocusFn } from './list.model';
+import { useOnTwoKeys } from '../on-two-Keys.hook';
+
+export const useA11yList = <Option, A11yOption extends BaseA11yOption<Option>>(
+  options: Option[],
+  onSetInitialFocus: SetInitialFocusFn<Option, A11yOption> = setInitialFocus
+) => {
+  const optionListRef = React.useRef<any>(null);
+  const [internalOptions, setInternalOptions] = React.useState<A11yOption[]>(
+    onSetInitialFocus(options)
+  );
+
+  const handleFocus = (event: KeyboardEvent) => {
+    const currentIndex = internalOptions.findIndex(
+      option => option.tabIndex === 0
+    );
+    const nextIndex =
+      event.key === 'ArrowUp'
+        ? getArrowUpIndex(currentIndex)
+        : getArrowDownIndex(currentIndex, internalOptions);
+
+    if (currentIndex !== nextIndex) {
+      setInternalOptions(prevOptions =>
+        prevOptions.map((option, index) => {
+          switch (index) {
+            case currentIndex:
+              return {
+                ...option,
+                tabIndex: -1,
+              };
+            case nextIndex:
+              return {
+                ...option,
+                tabIndex: 0,
+              };
+            default:
+              return option;
+          }
+        })
+      );
+    }
+  };
+
+  const handleFirstAndLast = (value: number) => {
+    setInternalOptions(prevOptions =>
+      prevOptions.map((option, index) => {
+        switch (index) {
+          case value:
+            return {
+              ...option,
+              tabIndex: 0,
+            };
+          default:
+            return {
+              ...option,
+              tabIndex: -1,
+            };
+        }
+      })
+    );
+  };
+
+  //Need this for Mac users
+  useOnTwoKeys(
+    optionListRef,
+    ['ArrowUp', 'ArrowDown'],
+    'Meta',
+    (event: KeyboardEvent) =>
+      event.key === 'ArrowUp'
+        ? handleFirstAndLast(0)
+        : handleFirstAndLast(internalOptions.length - 1)
+  );
+
+  useOnKey(optionListRef, ['ArrowDown', 'ArrowUp'], (event: KeyboardEvent) => {
+    handleFocus(event);
+  });
+
+  useOnKey(optionListRef, ['Home', 'End'], (event: KeyboardEvent) =>
+    event.key === 'Home'
+      ? handleFirstAndLast(0)
+      : handleFirstAndLast(internalOptions.length - 1)
+  );
+
+  return {
+    optionListRef,
+    options: internalOptions,
+    setOptions: setInternalOptions,
+    onFocusOption,
+  };
+};
diff --git a/src/common/a11y/list/list.model.ts b/src/common/a11y/list/list.model.ts
new file mode 100644
index 00000000..7224bda7
--- /dev/null
+++ b/src/common/a11y/list/list.model.ts
@@ -0,0 +1,3 @@
+export type SetInitialFocusFn<Option, A11yOption> = (
+  options: Option[]
+) => A11yOption[];
diff --git a/src/common/a11y/nested-list/index.ts b/src/common/a11y/nested-list/index.ts
new file mode 100644
index 00000000..5e4a2c77
--- /dev/null
+++ b/src/common/a11y/nested-list/index.ts
@@ -0,0 +1,2 @@
+export * from './nested-list.hooks';
+export * from './nested-list.model';
diff --git a/src/common/a11y/nested-list/nested-list.hooks.ts b/src/common/a11y/nested-list/nested-list.hooks.ts
new file mode 100644
index 00000000..954722fa
--- /dev/null
+++ b/src/common/a11y/nested-list/nested-list.hooks.ts
@@ -0,0 +1,29 @@
+import {
+  mapFlatOptionsToNestedListOptions,
+  mapNestedListOptionsToFlatOptions,
+} from './nested-list.mappers';
+import { NestedOption } from '../common.model';
+import { useA11yNested } from '../nested.hooks';
+import { useA11yList } from '../list';
+
+export const useA11yNestedList = <Option extends NestedOption<Option>>(
+  options: Option[]
+) => {
+  const flatOptions = mapNestedListOptionsToFlatOptions(options);
+
+  const {
+    optionListRef,
+    options: internalOptions,
+    setOptions,
+    onFocusOption,
+  } = useA11yList(flatOptions);
+
+  useA11yNested(optionListRef, internalOptions, setOptions);
+
+  return {
+    optionListRef,
+    options: mapFlatOptionsToNestedListOptions(internalOptions),
+    setOptions,
+    onFocusOption,
+  };
+};
diff --git a/src/common/a11y/nested-list/nested-list.mappers.ts b/src/common/a11y/nested-list/nested-list.mappers.ts
new file mode 100644
index 00000000..72a7ae52
--- /dev/null
+++ b/src/common/a11y/nested-list/nested-list.mappers.ts
@@ -0,0 +1,53 @@
+import { FlatOption, NestedOption } from '../common.model';
+import { A11yNestedListOption } from './nested-list.model';
+
+export const mapNestedListOptionsToFlatOptions = <
+  Option extends NestedOption<Option>,
+>(
+  options: Option[],
+  parentId?: string
+): FlatOption<Option>[] => {
+  return options.reduce<FlatOption<Option>[]>((acc, o) => {
+    const { children, ...option } = o;
+    const flatOption: FlatOption<Option> = {
+      ...option,
+      parentId,
+    };
+    return [
+      ...acc,
+      flatOption,
+      ...(children
+        ? mapNestedListOptionsToFlatOptions(children, option.id)
+        : []),
+    ];
+  }, []);
+};
+
+export const mapFlatOptionsToNestedListOptions = <
+  Option extends NestedOption<Option>,
+>(
+  flatOptions: A11yNestedListOption<FlatOption<Option>>[]
+): A11yNestedListOption<Option>[] => {
+  const map = new Map<string, any>();
+  flatOptions.forEach(flatOption => {
+    const { parentId, tabIndex, id, ...option } = flatOption;
+    map.set(id, { ...option, id, tabIndex, children: undefined });
+  });
+
+  const rootIds = new Set(map.keys());
+
+  flatOptions.forEach(flatOption => {
+    const { parentId, id } = flatOption;
+    const parent = map.get(parentId!);
+    const child = map.get(id);
+    if (parent && child) {
+      if (parent.children === undefined) {
+        parent.children = [];
+      }
+      parent.children.push(child);
+      rootIds.delete(id);
+    }
+  });
+
+  return Array.from(rootIds).map(id => map.get(id));
+};
diff --git a/src/common/a11y/nested-list/nested-list.model.ts b/src/common/a11y/nested-list/nested-list.model.ts
new file mode 100644
index 00000000..465f29bb
--- /dev/null
+++ b/src/common/a11y/nested-list/nested-list.model.ts
@@ -0,0 +1,9 @@
+import { NestedOption } from '../common.model';
+
+export type A11yNestedListOption<Option extends NestedOption<Option>> = Omit<
+  Option,
+  'children'
+> & {
+  tabIndex: number;
+  children?: A11yNestedListOption<Option>[];
+};
diff --git a/src/common/a11y/nested-select/index.ts b/src/common/a11y/nested-select/index.ts
new file mode 100644
index 00000000..59ae82cd
--- /dev/null
+++ b/src/common/a11y/nested-select/index.ts
@@ -0,0 +1,3 @@
+export * from './nested-select.hooks';
+export * from './nested-select.model';
+export * from './nested-select.mappers';
diff --git a/src/common/a11y/nested-select/nested-select.hooks.ts b/src/common/a11y/nested-select/nested-select.hooks.ts
new file mode 100644
index 00000000..a5964379
--- /dev/null
+++ b/src/common/a11y/nested-select/nested-select.hooks.ts
@@ -0,0 +1,46 @@
+import { useA11ySelect } from '../select';
+import { useA11yNested } from '../nested.hooks';
+import { NestedOption, FlatOption } from '../common.model';
+import {
+  mapNestedSelectOptionsToFlatOptions,
+  mapFlatOptionsToNestedSelectOptions,
+} from './nested-select.mappers';
+
+export const useA11yNestedSelect = <Option extends NestedOption<Option>>(
+  options: Option[],
+  getOptionId: <Key extends keyof FlatOption<Option>>(
+    option: FlatOption<Option>
+  ) => FlatOption<Option>[Key],
+  initialOption?: Option,
+  onChangeOption?: (option: FlatOption<Option> | undefined) => void
+) => {
+  const flatOptions = mapNestedSelectOptionsToFlatOptions(options);
+
+  const {
+    optionListRef,
+    buttonRef,
+    veilRef,
+    isOpen,
+    setIsOpen,
+    options: internalOptions,
+    setOptions,
+    selectedOption,
+    setSelectedOption,
+    onFocusOption,
+  } = useA11ySelect(flatOptions, getOptionId, initialOption, onChangeOption);
+
+  useA11yNested(optionListRef, internalOptions, setOptions);
+
+  return {
+    optionListRef,
+    buttonRef,
+    veilRef,
+    options: mapFlatOptionsToNestedSelectOptions(internalOptions),
+    setOptions,
+    isOpen,
+    setIsOpen,
+    selectedOption,
+    setSelectedOption,
+    onFocusOption,
+  };
+};
diff --git a/src/common/a11y/nested-select/nested-select.mappers.ts b/src/common/a11y/nested-select/nested-select.mappers.ts
new file mode 100644
index 00000000..e0819771
--- /dev/null
+++ b/src/common/a11y/nested-select/nested-select.mappers.ts
@@ -0,0 +1,55 @@
+import { NestedOption, FlatOption } from '../common.model';
+import { A11yNestedSelectOption } from './nested-select.model';
+import { A11ySelectOption } from '../select';
+
+export const mapNestedSelectOptionsToFlatOptions = <
+  Option extends NestedOption<Option>,
+>(
+  options: Option[],
+  parentId?: string
+): FlatOption<Option>[] => {
+  return options.reduce<FlatOption<Option>[]>((acc, o) => {
+    const { children, ...option } = o;
+    const flatOption: FlatOption<Option> = {
+      ...option,
+      parentId,
+      isSelectable: !Array.isArray(children) || children.length === 0,
+    };
+    return [
+      ...acc,
+      flatOption,
+      ...(children
+        ? mapNestedSelectOptionsToFlatOptions(children, option.id)
+        : []),
+    ];
+  }, []);
+};
+
+export const mapFlatOptionsToNestedSelectOptions = <
+  Option extends NestedOption<Option>,
+>(
+  flatOptions: A11ySelectOption<FlatOption<Option>>[]
+): A11yNestedSelectOption<Option>[] => {
+  const map = new Map<string, any>();
+  flatOptions.forEach(flatOption => {
+    const { parentId, tabIndex, id, isSelectable, ...option } = flatOption;
+    map.set(id, { ...option, id, tabIndex, isSelectable, children: undefined });
+  });
+
+  const rootIds = new Set(map.keys());
+
+  flatOptions.forEach(flatOption => {
+    const { parentId, id } = flatOption;
+    const parent = map.get(parentId!);
+    const child = map.get(id);
+    if (parent && child) {
+      if (parent.children === undefined) {
+        parent.children = [];
+      }
+      parent.children.push(child);
+      rootIds.delete(id);
+    }
+  });
+
+  return Array.from(rootIds).map(id => map.get(id));
+};
diff --git a/src/common/a11y/nested-select/nested-select.model.ts b/src/common/a11y/nested-select/nested-select.model.ts
new file mode 100644
index 00000000..e9595d32
--- /dev/null
+++ b/src/common/a11y/nested-select/nested-select.model.ts
@@ -0,0 +1,10 @@
+import { NestedOption } from '../common.model';
+
+export type A11yNestedSelectOption<Option extends NestedOption<Option>> = Omit<
+  Option,
+  'children'
+> & {
+  tabIndex: number;
+  isSelectable: boolean;
+  children?: A11yNestedSelectOption<Option>[];
+};
diff --git a/src/common/a11y/nested.hooks.ts b/src/common/a11y/nested.hooks.ts
new file mode 100644
index 00000000..2d9ac12b
--- /dev/null
+++ b/src/common/a11y/nested.hooks.ts
@@ -0,0 +1,43 @@
+import React from 'react';
+import { NestedOption, FlatOption, BaseA11yOption } from './common.model';
+import { useOnKey } from './on-key.hook';
+
+export const useA11yNested = <
+  Option extends NestedOption<Option>,
+  A11yFlatOption extends BaseA11yOption<FlatOption<Option>>,
+>(
+  optionListRef: React.RefObject<HTMLElement>,
+  flatOptions: A11yFlatOption[],
+  setOptions: React.Dispatch<React.SetStateAction<A11yFlatOption[]>>
+) => {
+  const updateFocus = (id: Option['id'] | undefined) => {
+    if (id) {
+      setOptions(
+        flatOptions.map(option => {
+          return {
+            ...option,
+            tabIndex: option.id === id ? 0 : -1,
+          };
+        })
+      );
+    }
+  };
+
+  useOnKey(optionListRef, ['ArrowRight'], () => {
+    //If have childs, Focus on the first child
+    const focusedOption = flatOptions.find(option => option.tabIndex === 0);
+    const child = flatOptions.find(
+      option => option.parentId === focusedOption?.id
+    );
+    updateFocus(child?.id);
+  });
+
+  useOnKey(optionListRef, ['ArrowLeft'], () => {
+    //If have parent, Focus on the parent
+    const focusedOption = flatOptions.find(option => option.tabIndex === 0);
+    const parent = flatOptions.find(
+      option => option.id === focusedOption?.parentId
+    );
+    updateFocus(parent?.id);
+  });
+};
diff --git a/src/common/a11y/on-key.hook.ts b/src/common/a11y/on-key.hook.ts
new file mode 100644
index 00000000..567fa332
--- /dev/null
+++ b/src/common/a11y/on-key.hook.ts
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const useOnKey = (
+  ref: React.RefObject<HTMLElement>,
+  keys: string[],
+  callback: (e: KeyboardEvent) => void
+) => {
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (keys.includes(e.key)) {
+        callback(e);
+      }
+    };
+
+    ref.current?.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      ref.current?.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [keys]);
+};
diff --git a/src/common/a11y/on-two-Keys.hook.ts b/src/common/a11y/on-two-Keys.hook.ts
new file mode 100644
index 00000000..57dc5c4a
--- /dev/null
+++ b/src/common/a11y/on-two-Keys.hook.ts
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export const useOnTwoKeys = (
+  ref: React.RefObject<HTMLElement>,
+  keys: string[],
+  keyPressed: string,
+  callback: (e: KeyboardEvent) => void
+) => {
+  React.useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      const isCtrlKeyPressed = e.getModifierState(keyPressed);
+      if (keys.includes(e.key) && isCtrlKeyPressed) {
+        callback(e);
+      }
+    };
+
+    ref.current?.addEventListener('keydown', handleKeyPress);
+
+    return () => {
+      ref.current?.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [keys]);
+};
diff --git a/src/common/a11y/select/focus.helpers.ts b/src/common/a11y/select/focus.helpers.ts
new file mode 100644
index 00000000..50429d63
--- /dev/null
+++ b/src/common/a11y/select/focus.helpers.ts
@@ -0,0 +1,48 @@
+import { A11ySelectOption } from './select.model';
+
+export const updateFocusBySelectedOption =
+  <Option>(
+    getOptionId: <Key extends keyof Option>(option: Option) => Option[Key],
+    selectedOption: Option | undefined
+  ) =>
+  (options: Option[]): A11ySelectOption<Option>[] => {
+    const selectedOptionId = Boolean(selectedOption)
+      ? getOptionId(selectedOption!)
+      : undefined;
+
+    const a11ySelectionOptions = options.map(option => ({
+      ...option,
+      tabIndex: getOptionId(option) === selectedOptionId ? 0 : -1,
+      isSelectable:
+        (option as Partial<{ isSelectable: boolean }>).isSelectable ?? true,
+    }));
+
+    if (!a11ySelectionOptions.some(option => option.tabIndex === 0)) {
+      a11ySelectionOptions[0].tabIndex = 0;
+    }
+    return a11ySelectionOptions;
+  };
+
+const mapValueToSelectedOption = <Option>(
+  option: Option
+): A11ySelectOption<Option> => ({
+  ...option,
+  tabIndex: 0,
+  isSelectable: true,
+});
+
+export const valueToA11ySelectedOption = <Option>(
+  options: Option[],
+  getOptionId: <Key extends keyof Option>(option: Option) => Option[Key],
+  value: string | undefined
+): A11ySelectOption<Option> | undefined => {
+  if (!value) {
+    return undefined;
+  }
+
+  const findSelectedOption = options.find(
+    option => getOptionId(option) === value
+  );
+
+  return mapValueToSelectedOption(findSelectedOption);
+};
diff --git a/src/common/a11y/select/index.ts b/src/common/a11y/select/index.ts
new file mode 100644
index 00000000..847cd43e
--- /dev/null
+++ b/src/common/a11y/select/index.ts
@@ -0,0 +1,2 @@
+export * from './select.model';
+export * from './select.hooks';
diff --git a/src/common/a11y/select/select.hooks.ts b/src/common/a11y/select/select.hooks.ts
new file mode 100644
index 00000000..bf339d3f
--- /dev/null
+++ b/src/common/a11y/select/select.hooks.ts
@@ -0,0 +1,109 @@
+import React from 'react';
+import { getFocusedOption } from '../focus.common-helpers';
+import { useOnKey } from '../on-key.hook';
+import { useClickOutside } from '../click-outside.hook';
+
+import { updateFocusBySelectedOption } from './focus.helpers';
+import { useA11yList } from '../list';
+import { mapInternalSelectOptionToOption } from './select.mappers';
+
+export const useA11ySelect = <Option>(
+  options: Option[],
+  getOptionId: <Key extends keyof Option>(option: Option) => Option[Key],
+  initialOption?: Option,
+  onChangeOption?: (option: Option | undefined) => void
+) => {
+  const buttonRef = React.useRef<any>(null);
+  const veilRef = React.useRef<any>(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const [selectedOption, setSelectedOption] = React.useState<
+    Option | undefined
+  >(initialOption);
+
+  const {
+    optionListRef,
+    options: internalOptions,
+    setOptions,
+    onFocusOption,
+  } = useA11yList(
+    options,
+    updateFocusBySelectedOption(getOptionId, selectedOption)
+  );
+
+  const handleSetSelectedOption = (
+    selectedOptionId: ReturnType<typeof getOptionId> | undefined
+  ) => {
+    buttonRef.current?.focus();
+    setIsOpen(false);
+    const internalSelectedOption = internalOptions.find(
+      option => getOptionId(option) === selectedOptionId
+    );
+    const selectedOption = mapInternalSelectOptionToOption(
+      internalSelectedOption
+    );
+    if (onChangeOption) {
+      onChangeOption(selectedOption);
+    }
+    setSelectedOption(selectedOption);
+    setOptions(
+      updateFocusBySelectedOption(getOptionId, selectedOption)(internalOptions)
+    );
+  };
+
+  useOnKey(buttonRef, ['ArrowDown', 'ArrowUp'], (e: KeyboardEvent) => {
+    e.preventDefault();
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+  });
+
+  useOnKey(optionListRef, ['Escape', 'Tab'], (event: KeyboardEvent) => {
+    if (isOpen) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (selectedOption) {
+        const id = getOptionId(selectedOption);
+        handleSetSelectedOption(id);
+      } else {
+        buttonRef.current?.focus();
+        setIsOpen(false);
+      }
+    }
+  });
+
+  useOnKey(optionListRef, [' ', 'Enter'], (event: KeyboardEvent) => {
+    if (isOpen) {
+      event.preventDefault();
+      const focusedOption = getFocusedOption(internalOptions);
+      if (focusedOption && focusedOption.isSelectable) {
+        const id = getOptionId(focusedOption);
+        handleSetSelectedOption(id);
+      } else {
+        handleSetSelectedOption(undefined);
+      }
+    }
+  });
+
+  const handleClickOutside = () => {
+    if (isOpen) {
+      buttonRef.current?.focus();
+      setIsOpen(false);
+    }
+  };
+
+  useClickOutside(isOpen, veilRef, handleClickOutside);
+
+  return {
+    optionListRef,
+    buttonRef,
+    veilRef,
+    isOpen,
+    setIsOpen,
+    options: internalOptions,
+    setOptions,
+    selectedOption,
+    setSelectedOption: handleSetSelectedOption,
+    onFocusOption,
+  };
+};
diff --git a/src/common/a11y/select/select.mappers.ts b/src/common/a11y/select/select.mappers.ts
new file mode 100644
index 00000000..9eca2628
--- /dev/null
+++ b/src/common/a11y/select/select.mappers.ts
@@ -0,0 +1,11 @@
+import { A11ySelectOption } from './select.model';
+
+export const mapInternalSelectOptionToOption = <Option>(
+  internalSelectedOption: A11ySelectOption<Option> | undefined
+): Option | undefined => {
+  if (!internalSelectedOption) {
+    return undefined;
+  }
+  const { isSelectable, tabIndex, ...option } = internalSelectedOption;
+  return option as Option;
+};
diff --git a/src/common/a11y/select/select.model.ts b/src/common/a11y/select/select.model.ts
new file mode 100644
index 00000000..c39b60a1
--- /dev/null
+++ b/src/common/a11y/select/select.model.ts
@@ -0,0 +1,4 @@
+export type A11ySelectOption<Option> = Option & {
+  tabIndex: number;
+  isSelectable: boolean;
+};
diff --git a/src/common/autoarrange-table/autoarrange-table.model.ts b/src/common/autoarrange-table/autoarrange-table.model.ts
new file mode 100644
index 00000000..314c11f8
--- /dev/null
+++ b/src/common/autoarrange-table/autoarrange-table.model.ts
@@ -0,0 +1,6 @@
+export interface Box {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
diff --git a/src/common/autoarrange-table/autoarrange-table.utils.ts b/src/common/autoarrange-table/autoarrange-table.utils.ts
new file mode 100644
index 00000000..bc1a4166
--- /dev/null
+++ b/src/common/autoarrange-table/autoarrange-table.utils.ts
@@ -0,0 +1,28 @@
+import { Box } from './autoarrange-table.model';
+
+export const getRandomInt = (min: number, max: number): number => {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
+export const isOverlapping = (box1: Box, box2: Box): boolean => {
+  return (
+    box1.x < box2.x + box2.width &&
+    box1.x + box1.width > box2.x &&
+    box1.y < box2.y + box2.height &&
+    box1.y + box1.height > box2.y
+  );
+};
+
+export const calculateCollisionArea = (box1: Box, box2: Box): number => {
+  const xOverlap = Math.max(
+    0,
+    Math.min(box1.x + box1.width, box2.x + box2.width) -
+      Math.max(box1.x, box2.x)
+  );
+  const yOverlap = Math.max(
+    0,
+    Math.min(box1.y + box1.height, box2.y + box2.height) -
+      Math.max(box1.y, box2.y)
+  );
+  return xOverlap * yOverlap;
+};
diff --git a/src/common/autoarrange-table/index.ts b/src/common/autoarrange-table/index.ts
new file mode 100644
index 00000000..7d5d8705
--- /dev/null
+++ b/src/common/autoarrange-table/index.ts
@@ -0,0 +1,84 @@
+import { Size } from '@/core/model';
+import { Box } from './autoarrange-table.model';
+import {
+  calculateCollisionArea,
+  isOverlapping,
+} from './autoarrange-table.utils';
+
+function* spiralPositions(
+  centerX: number,
+  centerY: number,
+  canvasSize: Size
+): Generator<[number, number]> {
+  let x = 0,
+    y = 0,
+    dx = 0,
+    dy = -1;
+
+  for (let i = 0; i < Math.max(canvasSize.width, canvasSize.height) ** 2; i++) {
+    if (
+      -canvasSize.width / 2 < x &&
+      x < canvasSize.width / 2 &&
+      -canvasSize.height / 2 < y &&
+      y < canvasSize.height / 2
+    ) {
+      yield [centerX + x, centerY + y];
+    }
+    if (x === y || (x < 0 && x === -y) || (x > 0 && x === 1 - y)) {
+      [dx, dy] = [-dy, dx];
+    }
+    x += dx;
+    y += dy;
+  }
+}
+
+export function findFreePositionOrMinCollision(
+  boxes: Box[],
+  newBoxSize: Size,
+  canvasSize: Size
+): Box | null {
+  const centerX = Math.floor(canvasSize.width / 2);
+  const centerY = Math.floor(canvasSize.height / 2);
+  let minCollisionBox: Box | null = null;
+  let minCollisionArea = Infinity;
+
+  for (const [x, y] of spiralPositions(centerX, centerY, canvasSize)) {
+    const newBox = {
+      x,
+      y,
+      width: newBoxSize.width,
+      height: newBoxSize.height,
+    };
+    if (
+      x >= 0 &&
+      y >= 0 &&
+      x + newBoxSize.width <= canvasSize.width &&
+      y + newBoxSize.height <= canvasSize.height
+    ) {
+      let collisionArea = 0;
+      let isFree = true;
+
+      for (const existingBox of boxes) {
+        if (isOverlapping(newBox, existingBox)) {
+          isFree = false;
+          collisionArea += calculateCollisionArea(newBox, existingBox);
+        }
+      }
+
+      if (isFree) {
+        return newBox;
+      }
+
+      if (collisionArea < minCollisionArea) {
+        minCollisionArea = collisionArea;
+        minCollisionBox = newBox;
+      }
+    }
+  }
+
+  if (minCollisionBox !== null) {
+    return minCollisionBox;
+  }
+  // TODO: if no free position is found, return a random one
+  return null;
+}
diff --git a/src/common/components/dropdown/components/option-group.component.tsx b/src/common/components/dropdown/components/option-group.component.tsx
deleted file mode 100644
index decd11ba..00000000
--- a/src/common/components/dropdown/components/option-group.component.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-
-import classes from '../dropdown.component.module.css';
-import { Tick } from '../../icons/tick-icon.component';
-import { DropdownOptionVm } from '../dropdown.model';
-
-interface Props {
-  name: string;
-  options: DropdownOptionVm[];
-  optionsListVisible: boolean;
-  handleOptionClick: (option: DropdownOptionVm) => void;
-  selectedOption?: string;
-  modalRef: React.RefObject<HTMLUListElement>;
-  label?: string;
-}
-
-export const OptionGroup: React.FC<Props> = props => {
-  const {
-    name,
-    options,
-    optionsListVisible,
-    handleOptionClick,
-    selectedOption,
-    modalRef,
-    label,
-  } = props;
-
-  return (
-    <ul
-      className={classes.options}
-      style={{ display: optionsListVisible ? 'block' : 'none' }}
-      ref={modalRef}
-      onClick={e => e.stopPropagation()}
-      id={`${name}-select`}
-      role="listbox"
-      aria-label={label}
-    >
-      <Option
-        name={name}
-        options={options}
-        handleOptionClick={handleOptionClick}
-        selectedOption={selectedOption}
-      ></Option>
-    </ul>
-  );
-};
-
-interface OptionProps {
-  name: string;
-  options: DropdownOptionVm[];
-  handleOptionClick: (option: DropdownOptionVm) => void;
-  selectedOption?: string;
-}
-
-const Option: React.FC<OptionProps> = props => {
-  const { options, selectedOption, handleOptionClick, name } = props;
-
-  return options.map(option => (
-    <li
-      key={option.id}
-      role="option"
-      onClick={() => handleOptionClick(option)}
-      aria-selected={selectedOption === option.id}
-      id={`${name}-option-${option.id}`}
-    >
-      {option.label}
-      <div className={classes.svg}>
-        {selectedOption === option.id ? <Tick /> : ''}
-      </div>
-    </li>
-  ));
-};
diff --git a/src/common/components/dropdown/dropdown.business.ts b/src/common/components/dropdown/dropdown.business.ts
deleted file mode 100644
index 452227af..00000000
--- a/src/common/components/dropdown/dropdown.business.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-export const handleFocus = (
-  previousFocusedElement: React.MutableRefObject<Element | null>,
-  containerRef: React.RefObject<HTMLUListElement>
-) => {
-  previousFocusedElement.current = document.activeElement;
-  containerRef.current?.focus();
-
-  if (containerRef.current) {
-    containerRef.current.tabIndex = -1;
-  }
-
-  const focusableElementsInside =
-    containerRef.current?.querySelectorAll('li[role="option"]');
-
-  if (focusableElementsInside && focusableElementsInside.length > 0) {
-    const firstElement = focusableElementsInside[0];
-    if (firstElement instanceof HTMLElement) {
-      firstElement.setAttribute('tabindex', '0');
-      firstElement.focus();
-    }
-
-    focusableElementsInside.forEach((element: Element) => {
-      if (element.getAttribute('aria-selected') === 'true') {
-        const selectedElement = element;
-        if (selectedElement instanceof HTMLElement) {
-          selectedElement.setAttribute('tabindex', '0');
-          selectedElement.focus();
-        }
-      }
-    });
-  }
-};
-
-export const handleNextFocus = (
-  previousFocusedElement: React.MutableRefObject<Element | null>
-) => {
-  const focusableElements = document.querySelectorAll(
-    'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"]'
-  );
-  focusableElements.forEach((element: Element) => {
-    element.removeAttribute('tabindex');
-  });
-  const currentElement = previousFocusedElement.current as HTMLElement;
-  if (currentElement) {
-    currentElement.focus();
-    currentElement.tabIndex = 0;
-  }
-};
diff --git a/src/common/components/dropdown/dropdown.component.module.css b/src/common/components/dropdown/dropdown.component.module.css
index 6f90596e..a04ecb4f 100644
--- a/src/common/components/dropdown/dropdown.component.module.css
+++ b/src/common/components/dropdown/dropdown.component.module.css
@@ -11,6 +11,10 @@
   justify-content: space-between;
   align-items: center;
   padding: var(--space-xs);
+  text-align: left;
+  font-size: var(--fs-m);
+  font-weight: var(--fw-regular);
+  line-height: 1.5em;
 }
 
 .select-chosen {
@@ -32,8 +36,8 @@
   padding: 8px;
   padding-left: 36px;
   margin: 0;
-  display: none;
   position: absolute;
+  text-align: left;
   z-index: 3;
   top: calc(0% + var(--border-select-width));
   left: calc(0px - var(--border-select-width));
@@ -42,12 +46,14 @@
   border-top: none;
   background-color: var(--bg-input);
   border-radius: var(--border-radius-xs);
+  max-height: 300px;
 }
 
 .select-select:hover {
   --border-select-color: var(--input-border-color-active);
   box-shadow: 0 0 4px var(--hover-checkbox);
   background-color: var(--hover-input);
+  color: inherit;
 }
 .select-active {
   --border-select-color: var(--input-border-color-active);
@@ -70,7 +76,6 @@
 .options li {
   font-size: 16px;
   color: var(--text-color);
-  position: relative;
   cursor: pointer;
 }
 
@@ -80,8 +85,7 @@
 
 .svg {
   position: absolute;
-  top: 0;
-  left: -28px;
+  left: 8px;
   display: flex;
   align-items: flex-end;
   justify-content: center;
@@ -90,17 +94,12 @@
   color: var(--input-border-color-active);
 }
 
-/*Veil works because it is being used within a modal*/
 .veil {
-  z-index: 2;
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   background-color: var(--veil-modal);
   opacity: 0.5;
 }
diff --git a/src/common/components/dropdown/dropdown.component.tsx b/src/common/components/dropdown/dropdown.component.tsx
index dd141375..f3808ee8 100644
--- a/src/common/components/dropdown/dropdown.component.tsx
+++ b/src/common/components/dropdown/dropdown.component.tsx
@@ -1,123 +1,107 @@
 import React from 'react';
 import classes from './dropdown.component.module.css';
-import { OptionGroup } from './components/option-group.component';
 import { ExpandDown } from '../icons/expand-down-icon.component';
 import { DropdownOptionVm } from './dropdown.model';
 import { SELECT_AN_OPTION } from './dropdown.const';
-import { handleFocus, handleNextFocus } from './dropdown.business';
+import { useA11ySelect } from '@/common/a11y';
+import { Tick } from '../icons/tick-icon.component';
+
+// import { handleFocus, handleNextFocus } from './dropdown.business';
 
 interface Props {
   name: string;
   options: DropdownOptionVm[];
-  value?: DropdownOptionVm;
-  onChange: (field: DropdownOptionVm) => void;
+  value?: string;
+  onChange: (field: string) => void;
   selectTitle?: string;
   //TODO: css class?
   isError?: boolean;
-  label?: string;
 }
 
 export const Dropdown: React.FC<Props> = props => {
-  const { name, options, value, selectTitle, onChange, isError, label } = props;
-  const [optionsListVisible, setOptionsListVisible] = React.useState(false);
-
-  const [selectedPath, setSelectedPath] = React.useState(value?.label);
-  const [currentSelectedKeyFieldId, setCurrentSelectedKeyFieldId] =
-    React.useState(value?.id || '');
+  const { name, options, selectTitle, value, onChange, isError } = props;
 
-  const handleOptionClick = (option: DropdownOptionVm) => {
-    setCurrentSelectedKeyFieldId(option.id);
-    setSelectedPath(option.label);
-    setOptionsListVisible(false);
-    onChange(option);
+  const findSelectedOption = (value: string | undefined) => {
+    return options.find(option => option.id === value);
+  };
+  const handleChange = (option: DropdownOptionVm | undefined) => {
+    option ? onChange(option.id) : onChange('');
   };
-  const modalRef = React.useRef<HTMLUListElement>(null);
-  const selectRef = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setOptionsListVisible(false);
-      }
-    };
-    const handleFocusOut = (event: FocusEvent) => {
-      if (
-        optionsListVisible &&
-        modalRef.current &&
-        !modalRef.current.contains(event.relatedTarget as Node)
-      ) {
-        setOptionsListVisible(false);
-      }
-    };
-
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        modalRef.current &&
-        !modalRef.current.contains(event.target as Node)
-      ) {
-        setOptionsListVisible(false);
-      }
-    };
-
-    if (optionsListVisible) {
-      document.addEventListener('keydown', handleKeyDown);
-      document.addEventListener('mousedown', handleClickOutside);
-      document.addEventListener('focusout', handleFocusOut);
-      handleFocus(selectRef, modalRef);
-      const activeID = `${name}-option-${currentSelectedKeyFieldId}`;
-      selectRef.current?.setAttribute('aria-activedescendant', activeID);
-    } else {
-      document.removeEventListener('keydown', handleKeyDown);
-      document.removeEventListener('mousedown', handleClickOutside);
-      handleNextFocus(selectRef);
-      selectRef.current?.setAttribute('aria-activedescendant', '');
-    }
 
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('focusout', handleFocusOut);
-    };
-  }, [optionsListVisible]);
+  const {
+    optionListRef,
+    buttonRef,
+    veilRef,
+    isOpen,
+    setIsOpen,
+    options: a11yOptions,
+    selectedOption,
+    setSelectedOption,
+    onFocusOption,
+  } = useA11ySelect(
+    options,
+    option => option.id,
+    findSelectedOption(value),
+    handleChange
+  );
 
   return (
     <>
-      <div
-        className={`${classes.selectSelect} ${isError && classes.selectError} ${optionsListVisible && classes.selectActive}`}
-        ref={selectRef}
+      <button
+        className={`${classes.selectSelect} ${isError && classes.selectError} ${isOpen && classes.selectActive}`}
+        ref={buttonRef}
+        id={`combobox-${name}`}
+        type="button"
         role="combobox"
         aria-haspopup="listbox"
-        aria-expanded={optionsListVisible}
-        aria-live="polite"
-        aria-controls={`${name}-select`}
-        aria-activedescendant=""
+        aria-expanded={isOpen}
+        aria-controls={`listbox-${name}`}
+        aria-activedescendant={selectedOption?.id}
         onClick={() => {
-          setOptionsListVisible(!optionsListVisible);
+          setIsOpen(!isOpen);
         }}
-        aria-label={label}
+        aria-labelledby={name}
+        tabIndex={0}
       >
         <p className={classes.selectText}>
-          {selectedPath || selectTitle || SELECT_AN_OPTION}
+          {selectedOption?.label || selectTitle || SELECT_AN_OPTION}
         </p>
         <ExpandDown />
-      </div>
-      {optionsListVisible && (
-        <>
-          <div
-            className={classes.veil}
-            onClick={() => setOptionsListVisible(!optionsListVisible)}
-          ></div>
-          <OptionGroup
-            name={name}
-            options={options}
-            optionsListVisible={optionsListVisible}
-            handleOptionClick={handleOptionClick}
-            selectedOption={currentSelectedKeyFieldId}
-            modalRef={modalRef}
-            label={label}
-          />
-        </>
-      )}
+        {isOpen && (
+          <>
+            <div
+              ref={veilRef}
+              className={classes.veil}
+              aria-hidden="true"
+            ></div>
+            <ul
+              id={`listbox-${name}`}
+              role="listbox"
+              aria-labelledby={name}
+              tabIndex={-1}
+              ref={optionListRef}
+              className={classes.options}
+              onClick={e => e.stopPropagation()}
+            >
+              {a11yOptions.map(option => (
+                <li
+                  key={option.id}
+                  role="option"
+                  tabIndex={option.tabIndex}
+                  aria-selected={selectedOption?.id === option.id}
+                  onClick={() => setSelectedOption(option.id)}
+                  ref={onFocusOption(option)}
+                >
+                  <div className={classes.svg} aria-hidden="true">
+                    {selectedOption?.id === option.id ? <Tick /> : ''}
+                  </div>
+                  {option.label}
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+      </button>
     </>
   );
 };
diff --git a/src/common/components/forms/dropdown-formik/dropdown-formik.component.tsx b/src/common/components/forms/dropdown-formik/dropdown-formik.component.tsx
index bc5ece3f..34dca7bf 100644
--- a/src/common/components/forms/dropdown-formik/dropdown-formik.component.tsx
+++ b/src/common/components/forms/dropdown-formik/dropdown-formik.component.tsx
@@ -4,7 +4,6 @@ import classes from './dropdown.component.module.css';
 import { Dropdown, DropdownOptionVm } from '../../dropdown';
 
 interface DropDownFormikProps {
-  value?: DropdownOptionVm;
   name: string;
   options: DropdownOptionVm[];
   selectTitle?: string;
@@ -19,7 +18,7 @@ export const DropdownFormik: React.FC<DropDownFormikProps> = props => {
   const [field, meta, helpers] = useField(props.name ?? '');
 
   // If the field doesn't exist then treat this as a normal input
-  const inputFieldProps = Boolean(field) ? field : props;
+
   const { setValue } = helpers;
 
   // We only want to display the field validation error message
@@ -31,7 +30,7 @@ export const DropdownFormik: React.FC<DropDownFormikProps> = props => {
   const selectContainerRef = React.useRef<HTMLDivElement>(null);
   React.useEffect(() => {
     if (
-      inputFieldProps.name === Object.keys(formik.errors)[0] &&
+      field.name === Object.keys(formik.errors)[0] &&
       isError &&
       selectContainerRef.current
     ) {
@@ -41,29 +40,24 @@ export const DropdownFormik: React.FC<DropDownFormikProps> = props => {
   }, [isError]);
 
   return (
-    <div className={classes.select} id={inputFieldProps.name}>
-      <p className={classes.selectLabel}>{label ? label : ''}</p>
+    <div className={classes.select}>
+      <p className={classes.selectLabel} id={field.name}>
+        {label ? label : ''}
+      </p>
       <div
         className={classes.selectContainer}
         ref={selectContainerRef}
         tabIndex={-1}
       >
         <Dropdown
-          name={inputFieldProps.name}
+          name={field.name}
           options={options}
           selectTitle={selectTitle}
-          value={inputFieldProps.value}
+          value={field.value}
           isError={isError}
-          onChange={field => {
-            if (inputFieldProps.name === 'fromTableId') {
-              formik.setFieldValue('fromFieldId', { id: '', label: '' });
-            }
-            if (inputFieldProps.name === 'toTableId') {
-              formik.setFieldValue('toFieldId', { id: '', label: '' });
-            }
-            setValue(field);
+          onChange={id => {
+            setValue(id);
           }}
-          label={label}
         ></Dropdown>
         {isError && (
           <span className={classes.error} aria-live="polite">
diff --git a/src/common/components/forms/table-pk-picker-formik/table-pk-picker-formik.component.tsx b/src/common/components/forms/table-pk-picker-formik/table-pk-picker-formik.component.tsx
index fde46321..f8a1623e 100644
--- a/src/common/components/forms/table-pk-picker-formik/table-pk-picker-formik.component.tsx
+++ b/src/common/components/forms/table-pk-picker-formik/table-pk-picker-formik.component.tsx
@@ -7,7 +7,6 @@ interface Props {
   name: string;
   options: PkOptionVm[];
   label?: string;
-  value?: PkOptionVm;
   selectTitle?: string;
   disabled?: boolean;
 }
@@ -19,8 +18,6 @@ export const TablePkPickerFormik: React.FC<Props> = props => {
   //useField allows us to extract all formik metadata about that field
   const [field, meta, helpers] = useField(props.name ?? '');
 
-  // If the field doesn't exist then treat this as a normal input
-  const inputFieldProps = Boolean(field) ? field : props;
   const { setValue } = helpers;
   // We only want to display the field validation error message
   // if Formik is enabled, and is the field has been touched
@@ -31,7 +28,7 @@ export const TablePkPickerFormik: React.FC<Props> = props => {
   const selectContainerRef = React.useRef<HTMLDivElement>(null);
   React.useEffect(() => {
     if (
-      inputFieldProps.name === Object.keys(formik.errors)[0] &&
+      field.name === Object.keys(formik.errors)[0] &&
       isError &&
       selectContainerRef.current
     ) {
@@ -42,20 +39,22 @@ export const TablePkPickerFormik: React.FC<Props> = props => {
   return (
     <>
       <div className={classes.select}>
-        <p className={classes.selectLabel}>{label ? label : ''}</p>
+        <p className={classes.selectLabel} id={field.name}>
+          {label ? label : ''}
+        </p>
         <div
           className={classes.selectContainer}
           ref={selectContainerRef}
           tabIndex={-1}
         >
           <TablePkPicker
-            name={inputFieldProps.name}
+            name={field.name}
             options={options}
             selectTitle={selectTitle}
-            value={inputFieldProps.value}
+            value={field.value}
             isError={isError}
-            onChange={field => {
-              setValue(field);
+            onChange={id => {
+              id ? setValue(id) : setValue('');
             }}
             disabled={disabled}
           ></TablePkPicker>
diff --git a/src/common/components/modal-dialog/modal-dialog.component.tsx b/src/common/components/modal-dialog/modal-dialog.component.tsx
index 7c0cc4a6..2839de16 100644
--- a/src/common/components/modal-dialog/modal-dialog.component.tsx
+++ b/src/common/components/modal-dialog/modal-dialog.component.tsx
@@ -64,9 +64,9 @@ export const ModalDialog: React.FC = () => {
             aria-labelledby="modal-modal-title"
           >
             <div className={styles.dialogHeader}>
-              <h2 className={styles.dialogTitle} id="modal-modal-title">
+              <h1 className={styles.dialogTitle} id="modal-modal-title">
                 {modalDialog.title}
-              </h2>
+              </h1>
               <button
                 className={styles.dialogButton}
                 onClick={handleClick}
diff --git a/src/common/components/table-pk-picker/components/field-tree.component.tsx b/src/common/components/table-pk-picker/components/field-tree.component.tsx
index b30b002c..423845bc 100644
--- a/src/common/components/table-pk-picker/components/field-tree.component.tsx
+++ b/src/common/components/table-pk-picker/components/field-tree.component.tsx
@@ -2,45 +2,37 @@ import React from 'react';
 import { PkOptionVm } from '../table-pk-picker.model';
 import classes from '../table-pk-picker.component.module.css';
 import { GenerateOptions } from './generate-options.component';
+import { A11yNestedSelectOption } from '@/common/a11y';
 
 interface Props {
   name: string;
-  options: PkOptionVm[];
-  optionsListVisible: boolean;
-  handleOptionClick: (option: PkOptionVm, parentPath: string) => void;
-  selectedPKField?: string;
-  modalRef: React.RefObject<HTMLUListElement>;
-  label: string;
+  options: A11yNestedSelectOption<PkOptionVm>[];
+  selectedOption: string | undefined;
+  onOptionClick: (id: string) => void;
+  onFocusOption: (
+    option: A11yNestedSelectOption<PkOptionVm>
+  ) => (element: any) => void;
 }
 
-export const FieldTree: React.FC<Props> = props => {
-  const {
-    name,
-    options,
-    optionsListVisible,
-    handleOptionClick,
-    selectedPKField,
-    modalRef,
-    label,
-  } = props;
+export const FieldTree = React.forwardRef((props: Props, ref) => {
+  const { name, options, selectedOption, onFocusOption, onOptionClick } = props;
 
   return (
     <ul
       className={classes.options}
-      style={{ display: optionsListVisible ? 'block' : 'none' }}
-      role="listbox"
-      ref={modalRef}
+      role="tree"
+      ref={ref as React.Ref<HTMLUListElement>}
       onClick={e => e.stopPropagation()}
       id={`${name}-select`}
-      aria-label={label}
+      aria-labelledby={name}
+      tabIndex={-1}
     >
       <GenerateOptions
-        name={name}
         options={options}
-        parentPath=""
-        handleSelectPKField={handleOptionClick}
-        selectedPKField={selectedPKField}
+        onOptionClick={onOptionClick}
+        onFocusOption={onFocusOption}
+        selectedOption={selectedOption}
       />
     </ul>
   );
-};
+});
diff --git a/src/common/components/table-pk-picker/components/generate-options.component.tsx b/src/common/components/table-pk-picker/components/generate-options.component.tsx
index d63f434c..45f5e33f 100644
--- a/src/common/components/table-pk-picker/components/generate-options.component.tsx
+++ b/src/common/components/table-pk-picker/components/generate-options.component.tsx
@@ -2,64 +2,47 @@ import { Tick } from '../../icons/tick-icon.component';
 import { PkOptionVm } from '../table-pk-picker.model';
 import classes from '../table-pk-picker.component.module.css';
 import React from 'react';
+import { A11yNestedSelectOption } from '@/common/a11y';
+import { NestedOptions } from './nested-options.component';
 // TODO:
 // #116 Add unit test support to fieldTreeBusiness
 //https://github.com/Lemoncode/mongo-modeler/issues/116
 
 interface Props {
-  name: string;
-  options: PkOptionVm[];
-  parentPath: string;
-  handleSelectPKField: (option: PkOptionVm, parentPath: string) => void;
-  selectedPKField?: string;
+  options: A11yNestedSelectOption<PkOptionVm>[];
+  selectedOption: string | undefined;
+  onOptionClick: (id: string) => void;
+  onFocusOption: (
+    option: A11yNestedSelectOption<PkOptionVm>
+  ) => (element: any) => void;
 }
 export const GenerateOptions: React.FC<Props> = props => {
-  const { name, options, parentPath, handleSelectPKField, selectedPKField } =
-    props;
-  return options.map(option => (
-    <React.Fragment key={option.id}>
-      {option.children && option.children.length > 0 ? (
-        <>
-          <li
-            role="textbox"
-            aria-disabled="true"
-            className={classes.liDisabled}
-          >
-            {option.label}
-          </li>
-          <div
-            role="listbox"
-            aria-label={`nested fields of ${option.label}`}
-            className={classes.liGroup}
-          >
-            <GenerateOptions
-              name={name}
-              options={option.children}
-              parentPath={
-                parentPath
-                  ? `${parentPath} > ${option.label}`
-                  : `${option.label}`
-              }
-              handleSelectPKField={handleSelectPKField}
-              selectedPKField={selectedPKField}
-            />
-          </div>
-        </>
-      ) : (
-        <>
-          <li
-            onClick={() => handleSelectPKField(option, parentPath)}
-            role="option"
-            aria-selected={selectedPKField === option.id}
-            id={`${name}-option-${option.id}`}
-          >
-            {option.label}
-            <div className={classes.svg}>
-              {selectedPKField === option.id ? <Tick /> : ''}
-            </div>
-          </li>
-        </>
-      )}
-    </React.Fragment>
-  ));
+  const { options, selectedOption, onFocusOption, onOptionClick } = props;
+
+  return options.map(option => {
+    return option.children ? (
+      <NestedOptions
+        onOptionClick={onOptionClick}
+        option={option}
+        selectedOption={selectedOption}
+        onFocusOption={onFocusOption}
+        key={option.id}
+      ></NestedOptions>
+    ) : (
+      <li
+        key={option.id}
+        id={option.id}
+        role="treeitem"
+        tabIndex={option.tabIndex}
+        aria-selected={selectedOption === option.id}
+        onClick={() => onOptionClick(option.id)}
+        ref={onFocusOption(option)}
+      >
+        <div className={classes.svg} aria-hidden="true">
+          {selectedOption === option.id ? <Tick /> : ''}
+        </div>
+        {option.label}
+      </li>
+    );
+  });
 };
diff --git a/src/common/components/table-pk-picker/components/nested-options.component.tsx b/src/common/components/table-pk-picker/components/nested-options.component.tsx
new file mode 100644
index 00000000..6fb617f1
--- /dev/null
+++ b/src/common/components/table-pk-picker/components/nested-options.component.tsx
@@ -0,0 +1,68 @@
+import { A11yNestedSelectOption } from '@/common/a11y';
+import { PkOptionVm } from '../table-pk-picker.model';
+import { Tick } from '../../icons/tick-icon.component';
+import classes from '../table-pk-picker.component.module.css';
+
+interface Props {
+  option: A11yNestedSelectOption<PkOptionVm>;
+  selectedOption: string | undefined;
+  onFocusOption: (
+    option: A11yNestedSelectOption<PkOptionVm>
+  ) => (element: any) => void;
+  onOptionClick: (id: string) => void;
+}
+
+export const NestedOptions: React.FC<Props> = props => {
+  const { option, selectedOption, onOptionClick, onFocusOption } = props;
+
+  return (
+    <li
+      key={option.id}
+      id={option.id}
+      role="treeitem"
+      aria-expanded="true"
+      aria-disabled="true"
+      aria-selected="false"
+      tabIndex={option.tabIndex}
+      ref={onFocusOption(option)}
+      onClick={e => {
+        e.stopPropagation();
+        onOptionClick('');
+      }}
+    >
+      {option.label}
+      <ul role="group" className={classes.liGroup}>
+        {option.children?.map(child => {
+          return child.children ? (
+            <NestedOptions
+              onOptionClick={onOptionClick}
+              option={child}
+              selectedOption={selectedOption}
+              key={child.id}
+              onFocusOption={onFocusOption}
+            ></NestedOptions>
+          ) : (
+            <li
+              key={child.id}
+              id={child.id}
+              role="treeitem"
+              tabIndex={child.tabIndex}
+              aria-selected={selectedOption === child.id}
+              aria-disabled={!child.isSelectable}
+              onClick={e => {
+                e.stopPropagation();
+                onOptionClick(child.id);
+              }}
+              ref={onFocusOption(child)}
+            >
+              <div className={classes.svg} aria-hidden="true">
+                {selectedOption === child.id ? <Tick /> : ''}
+              </div>
+              {child.label}
+            </li>
+          );
+        })}
+      </ul>
+    </li>
+  );
+};
diff --git a/src/common/components/table-pk-picker/table-pk-picker.business.spec.ts b/src/common/components/table-pk-picker/table-pk-picker.business.spec.ts
index a106961e..8088304f 100644
--- a/src/common/components/table-pk-picker/table-pk-picker.business.spec.ts
+++ b/src/common/components/table-pk-picker/table-pk-picker.business.spec.ts
@@ -1,47 +1,56 @@
 import { GUID } from '@/core/model';
-import { generateLabel } from './table-pk-picker.business';
+import { findPath } from './table-pk-picker.business';
 import { PkOptionVm } from './table-pk-picker.model';
+import { A11yNestedSelectOption } from '@/common/a11y';
 
-describe('generateLabel', () => {
+describe(' findPath', () => {
   it('Should returns undefined if the option does not match the id of an array of options', () => {
     //Arrange
-    const options: PkOptionVm[] = [
+    const options: A11yNestedSelectOption<PkOptionVm>[] = [
       {
         id: '1',
         label: 'Hi',
+        isSelectable: true,
+        tabIndex: 0,
       },
       {
         id: '2',
         label: 'Bye',
+        isSelectable: true,
+        tabIndex: -1,
       },
     ];
 
     const valueId: GUID = '3';
 
     // Act
-    const result = generateLabel(options, valueId, []);
+    const result = findPath(valueId, options);
 
     // Assert
-    expect(result).toBe(undefined);
+    expect(result).toBe('');
   });
 
   it('Should returns the option label that matches the id of an array of options', () => {
     //Arrange
-    const options: PkOptionVm[] = [
+    const options: A11yNestedSelectOption<PkOptionVm>[] = [
       {
         id: '1',
         label: 'Hi',
+        isSelectable: true,
+        tabIndex: -1,
       },
       {
         id: '2',
         label: 'Bye',
+        isSelectable: true,
+        tabIndex: 0,
       },
     ];
 
     const valueId: GUID = '2';
 
     // Act
-    const result = generateLabel(options, valueId, []);
+    const result = findPath(valueId, options);
 
     // Assert
     expect(result).toBe('Bye');
@@ -49,21 +58,25 @@ describe('generateLabel', () => {
 
   it('should return the names of the parents and the name of the label that matches the id of an array of options', () => {
     //Arrange
-    const options: PkOptionVm[] = [
+    const options: A11yNestedSelectOption<PkOptionVm>[] = [
       {
         id: '1',
         label: 'Hi',
+        isSelectable: true,
+        tabIndex: -1,
       },
       {
         id: '2',
         label: 'Bye',
-        children: [{ id: '3', label: 'Pie' }],
+        isSelectable: false,
+        tabIndex: -1,
+        children: [{ id: '3', label: 'Pie', isSelectable: true, tabIndex: 0 }],
       },
     ];
     const valueId: GUID = '3';
 
     // Act
-    const result = generateLabel(options, valueId, []);
+    const result = findPath(valueId, options);
 
     // Assert
     const expected = 'Bye > Pie';
@@ -73,20 +86,28 @@ describe('generateLabel', () => {
 
   it('should return the names of the parents and the name of the label that matches the id of an array of options with children with option', () => {
     //Arrange
-    const options: PkOptionVm[] = [
+    const options: A11yNestedSelectOption<PkOptionVm>[] = [
       {
         id: '1',
         label: 'Hi',
+        isSelectable: true,
+        tabIndex: -1,
       },
       {
         id: '2',
         label: 'Bye',
+        isSelectable: false,
+        tabIndex: -1,
         children: [
-          { id: '3', label: 'Pie' },
+          { id: '3', label: 'Pie', isSelectable: true, tabIndex: -1 },
           {
             id: '4',
             label: 'Age',
-            children: [{ id: '5', label: 'Cup' }],
+            isSelectable: false,
+            tabIndex: -1,
+            children: [
+              { id: '5', label: 'Cup', isSelectable: true, tabIndex: 0 },
+            ],
           },
         ],
       },
@@ -94,7 +115,7 @@ describe('generateLabel', () => {
     const valueId: GUID = '5';
 
     // Act
-    const result = generateLabel(options, valueId, []);
+    const result = findPath(valueId, options);
 
     // Assert
     const expected = 'Bye > Age > Cup';
@@ -103,29 +124,37 @@ describe('generateLabel', () => {
   });
   it('Should returns the option label that matches the id of an array of options', () => {
     //Arrange
-    const options: PkOptionVm[] = [
+    const options: A11yNestedSelectOption<PkOptionVm>[] = [
       {
         id: '1',
         label: 'Hi',
+        isSelectable: true,
+        tabIndex: -1,
       },
       {
         id: '2',
         label: 'Bye',
+        isSelectable: false,
+        tabIndex: -1,
         children: [
-          { id: '3', label: 'Pie' },
+          { id: '3', label: 'Pie', isSelectable: true, tabIndex: -1 },
           {
             id: '4',
             label: 'Age',
-            children: [{ id: '5', label: 'Cup' }],
+            isSelectable: false,
+            tabIndex: -1,
+            children: [
+              { id: '5', label: 'Cup', isSelectable: true, tabIndex: -1 },
+            ],
           },
         ],
       },
-      { id: '6', label: 'Hidden' },
+      { id: '6', label: 'Hidden', isSelectable: true, tabIndex: -1 },
     ];
     const valueId: GUID = '6';
 
     // Act
-    const result = generateLabel(options, valueId, []);
+    const result = findPath(valueId, options);
 
     // Assert
     const expected = 'Hidden';
diff --git a/src/common/components/table-pk-picker/table-pk-picker.business.ts b/src/common/components/table-pk-picker/table-pk-picker.business.ts
index 31cfd25e..77e824bd 100644
--- a/src/common/components/table-pk-picker/table-pk-picker.business.ts
+++ b/src/common/components/table-pk-picker/table-pk-picker.business.ts
@@ -1,75 +1,26 @@
-import { GUID } from '@/core/model';
 import { PkOptionVm } from './table-pk-picker.model';
+import {
+  A11yNestedSelectOption,
+  mapNestedSelectOptionsToFlatOptions,
+} from '@/common/a11y';
 
-export const generateLabel = (
-  options: PkOptionVm[],
-  valueId: GUID,
-  route: string[]
-): string | undefined => {
-  for (const option of options) {
-    const labelRoute = [...route, option.label];
-
-    if (option.id === valueId) {
-      return labelRoute.join(' > ');
-    }
-    if (option.children) {
-      const findOptionLabel = generateLabel(
-        option.children,
-        valueId,
-        labelRoute
-      );
-      if (findOptionLabel) {
-        return findOptionLabel;
-      }
-    }
-  }
-  return undefined;
-};
-export const handleFocus = (
-  previousFocusedElement: React.MutableRefObject<Element | null>,
-  containerRef: React.RefObject<HTMLUListElement>
+export const findPath = (
+  id: string | undefined,
+  optionList: A11yNestedSelectOption<PkOptionVm>[]
 ) => {
-  previousFocusedElement.current = document.activeElement;
-  containerRef.current?.focus();
-
-  if (containerRef.current) {
-    containerRef.current.tabIndex = -1;
-  }
-
-  const focusableElementsInside =
-    containerRef.current?.querySelectorAll('li[role="option"]');
-
-  if (focusableElementsInside && focusableElementsInside.length > 0) {
-    const firstElement = focusableElementsInside[0];
-    if (firstElement instanceof HTMLElement) {
-      firstElement.setAttribute('tabindex', '0');
-      firstElement.focus();
+  const flatOptions = mapNestedSelectOptionsToFlatOptions(optionList);
+  const path: string[] = [];
+  let currentId = id;
+  while (currentId) {
+    const flatOption = flatOptions.find(
+      (option: any) => option.id === currentId
+    );
+    if (flatOption) {
+      path.unshift(flatOption.label);
+      currentId = flatOption.parentId;
+    } else {
+      currentId = undefined;
     }
-
-    focusableElementsInside.forEach((element: Element) => {
-      if (element.getAttribute('aria-selected') === 'true') {
-        const selectedElement = element;
-        if (selectedElement instanceof HTMLElement) {
-          selectedElement.setAttribute('tabindex', '0');
-          selectedElement.focus();
-        }
-      }
-    });
-  }
-};
-
-export const handleNextFocus = (
-  previousFocusedElement: React.MutableRefObject<Element | null>
-) => {
-  const focusableElements = document.querySelectorAll(
-    'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"]'
-  );
-  focusableElements.forEach((element: Element) => {
-    element.removeAttribute('tabindex');
-  });
-  const currentElement = previousFocusedElement.current as HTMLElement;
-  if (currentElement) {
-    currentElement.focus();
-    currentElement.tabIndex = 0;
   }
+  return path.join(' > ');
 };
diff --git a/src/common/components/table-pk-picker/table-pk-picker.component.module.css b/src/common/components/table-pk-picker/table-pk-picker.component.module.css
index 6cc779b5..e46345c5 100644
--- a/src/common/components/table-pk-picker/table-pk-picker.component.module.css
+++ b/src/common/components/table-pk-picker/table-pk-picker.component.module.css
@@ -11,6 +11,10 @@
   justify-content: center;
   align-items: center;
   padding: var(--space-xs);
+  text-align: left;
+  font-size: var(--fs-m);
+  font-weight: var(--fw-regular);
+  line-height: 1.5em;
 }
 
 .select-chosen {
@@ -32,7 +36,6 @@
   padding: 8px;
   padding-left: 36px;
   margin: 0;
-  display: none;
   position: absolute;
   z-index: 3;
   top: calc(0% + var(--border-select-width));
@@ -43,6 +46,8 @@
   background-color: var(--bg-input);
   border-radius: var(--border-radius-xs);
   color: var(--text-disabled);
+  max-height: 300px;
+  overflow: auto;
 }
 
 /* Active */
@@ -50,6 +55,7 @@
   --border-select-color: var(--input-border-color-active);
   box-shadow: 0 0 4px var(--hover-checkbox);
   background-color: var(--hover-input);
+  color: inherit;
 }
 .select-active {
   --border-select-color: var(--input-border-color-active);
@@ -83,14 +89,12 @@
   --border-select-color: var(--color-error);
 }
 
-.options ul {
+li > ul {
   list-style: none;
   padding-left: 20px;
-  color: var(--text-disabled);
 }
 
 .options li {
-  position: relative;
   font-size: 16px;
   color: var(--text-color);
   cursor: pointer;
@@ -99,7 +103,11 @@
 .options li:hover {
   color: var(--input-border-color-active);
 }
-
+.options li:has(ul),
+.options li:has(ul):hover {
+  color: var(--text-disabled);
+  cursor: text;
+}
 .options .li-disabled {
   color: var(--text-disabled);
   cursor: text;
@@ -107,17 +115,10 @@
 .options .li-disabled:hover {
   color: var(--text-disabled);
 }
-.li-group {
-  padding-left: 1rem;
-}
-.li-group .svg {
-  left: calc(-1rem + -28px);
-}
 
 .svg {
   position: absolute;
-  top: 0;
-  left: -28px;
+  left: 8px;
   display: flex;
   align-items: flex-end;
   justify-content: center;
@@ -128,15 +129,11 @@
 
 /*Veil works because it is being used within a modal*/
 .veil {
-  z-index: 2;
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   background-color: var(--veil-modal);
   opacity: 0.5;
 }
diff --git a/src/common/components/table-pk-picker/table-pk-picker.component.tsx b/src/common/components/table-pk-picker/table-pk-picker.component.tsx
index 0d257b50..ebbd588b 100644
--- a/src/common/components/table-pk-picker/table-pk-picker.component.tsx
+++ b/src/common/components/table-pk-picker/table-pk-picker.component.tsx
@@ -1,20 +1,19 @@
 import React from 'react';
+
 import classes from './table-pk-picker.component.module.css';
 import { FieldTree } from './components/field-tree.component';
 import { ExpandDown } from '../icons/expand-down-icon.component';
 import { PkOptionVm } from './table-pk-picker.model';
 import { SELECT_AN_PK_OPTION } from './table-pk-picker.const';
-import {
-  generateLabel,
-  handleFocus,
-  handleNextFocus,
-} from './table-pk-picker.business';
+import { findPath } from './table-pk-picker.business';
+import { FlatOption, useA11yNestedSelect } from '@/common/a11y';
+import { GUID } from '@/core/model';
 
 interface Props {
   name: string;
   options: PkOptionVm[];
-  value?: PkOptionVm;
-  onChange: (field: PkOptionVm) => void;
+  value?: string | undefined;
+  onChange: (id: string | undefined) => void;
   selectTitle?: string;
   isError?: boolean;
   disabled?: boolean;
@@ -24,113 +23,87 @@ export const TablePkPicker: React.FC<Props> = props => {
   const { name, options, selectTitle, value, onChange, disabled, isError } =
     props;
 
-  const path = value?.label && generateLabel(options, value.id, []);
-  const [selectedPath, setSelectedPath] = React.useState(path);
-  const [optionsListVisible, setOptionsListVisible] = React.useState(false);
-  const [currentSelectedKeyFieldId, setCurrentSelectedKeyFieldId] =
-    React.useState(value?.id);
-
-  const handleOptionClick = (option: PkOptionVm, parentPath: string) => {
-    setCurrentSelectedKeyFieldId(option.id);
-    const currentPath = parentPath
-      ? `${parentPath} > ${option.label}`
-      : option.label;
-    setSelectedPath(currentPath);
-    setOptionsListVisible(false);
-    onChange(option);
-  };
-  const modalRef = React.useRef<HTMLUListElement>(null);
-  const selectRef = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setOptionsListVisible(false);
-      }
-    };
-    const handleFocusOut = (event: FocusEvent) => {
-      if (
-        optionsListVisible &&
-        modalRef.current &&
-        !modalRef.current.contains(event.relatedTarget as Node)
-      ) {
-        setOptionsListVisible(false);
+  const findSelectedOptionRecursively = (
+    id: GUID | undefined,
+    options: PkOptionVm[]
+  ): PkOptionVm | undefined => {
+    if (!id) return undefined;
+    for (const option of options) {
+      if (option.id === id) return option;
+      if (option.children) {
+        const found = findSelectedOptionRecursively(id, option.children);
+        if (found) return found;
       }
-    };
+    }
+    return undefined;
+  };
 
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        modalRef.current &&
-        !modalRef.current.contains(event.target as Node)
-      ) {
-        setOptionsListVisible(false);
-      }
-    };
+  const handleChange = (option: FlatOption<PkOptionVm> | undefined) => {
+    option ? onChange(option.id) : onChange(undefined);
+  };
 
-    if (optionsListVisible) {
-      document.addEventListener('keydown', handleKeyDown);
-      document.addEventListener('mousedown', handleClickOutside);
-      document.addEventListener('focusout', handleFocusOut);
-      handleFocus(selectRef, modalRef);
-      const activeID = `${name}-option-${currentSelectedKeyFieldId}`;
-      selectRef.current?.setAttribute('aria-activedescendant', activeID);
-    } else {
-      document.removeEventListener('keydown', handleKeyDown);
-      document.removeEventListener('mousedown', handleClickOutside);
-      handleNextFocus(selectRef);
-      selectRef.current?.setAttribute('aria-activedescendant', '');
-    }
+  const {
+    optionListRef,
+    buttonRef,
+    veilRef,
+    options: a11yOptions,
+    isOpen,
+    setIsOpen,
+    onFocusOption,
+    selectedOption,
+    setSelectedOption,
+  } = useA11yNestedSelect(
+    options,
+    option => option.id,
+    findSelectedOptionRecursively(value, options),
+    handleChange
+  );
 
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('focusout', handleFocusOut);
-    };
-  }, [optionsListVisible]);
-  React.useEffect(() => {
-    if (!value?.label) setSelectedPath('');
-  }, [value]);
+  const selectedPath = findPath(selectedOption?.id, a11yOptions);
 
   return (
     <>
-      <div
+      <button
+        type="button"
         className={`${classes.selectSelect} ${
           isError && !disabled && classes.selectError
-        } ${disabled && classes.selectDisabled} ${optionsListVisible && classes.selectActive}`}
-        ref={selectRef}
+        } ${disabled && classes.selectDisabled} ${isOpen && classes.selectActive}`}
+        ref={buttonRef}
         role="combobox"
-        aria-haspopup="listbox"
-        aria-expanded={optionsListVisible}
-        aria-live="polite"
+        id={`combobox-${name}`}
+        aria-haspopup="tree"
+        aria-expanded={isOpen}
+        aria-labelledby={name}
         aria-controls={`${name}-select`}
-        aria-activedescendant=""
+        aria-activedescendant={selectedOption?.id}
         onClick={() => {
-          if (!disabled) setOptionsListVisible(!optionsListVisible);
+          if (!disabled) setIsOpen(!isOpen);
         }}
         aria-disabled={disabled}
+        tabIndex={0}
       >
         <p className={classes.selectText}>
           {selectedPath || selectTitle || SELECT_AN_PK_OPTION}
         </p>
         <ExpandDown />
-      </div>
-      {optionsListVisible && (
-        <>
-          <div
-            className={classes.veil}
-            onClick={() => setOptionsListVisible(!optionsListVisible)}
-          ></div>
-          <FieldTree
-            name={name}
-            options={options}
-            optionsListVisible={optionsListVisible}
-            handleOptionClick={handleOptionClick}
-            selectedPKField={currentSelectedKeyFieldId}
-            modalRef={modalRef}
-            label={selectTitle || SELECT_AN_PK_OPTION}
-          />
-        </>
-      )}
+        {isOpen && (
+          <>
+            <div
+              ref={veilRef}
+              aria-hidden="true"
+              className={classes.veil}
+            ></div>
+            <FieldTree
+              ref={optionListRef}
+              name={name}
+              options={a11yOptions}
+              selectedOption={selectedOption?.id}
+              onOptionClick={setSelectedOption}
+              onFocusOption={onFocusOption}
+            />
+          </>
+        )}
+      </button>
     </>
   );
 };
diff --git a/src/common/helpers/set-off-set-zoom-to-coords.helper.spec.tsx b/src/common/helpers/set-off-set-zoom-to-coords.helper.spec.tsx
index 40c558de..f5c34c85 100644
--- a/src/common/helpers/set-off-set-zoom-to-coords.helper.spec.tsx
+++ b/src/common/helpers/set-off-set-zoom-to-coords.helper.spec.tsx
@@ -10,6 +10,7 @@ describe('setOffSetZoomToCoords', () => {
     const initialContextState: CanvasViewSettingsContextModel = {
       canvasViewSettings: {
         canvasSize: { width: 5000, height: 5000 },
+        canvasViewSize: { width: 5000, height: 5000 },
         viewBoxSize: { width: 20000, height: 20000 },
         zoomFactor: 2,
         scrollPosition: { x: 0, y: 0 },
@@ -25,6 +26,7 @@ describe('setOffSetZoomToCoords', () => {
       setLoadSample: () => {},
       setViewBoxSize: () => {},
       setAutoSave: () => {},
+      setCanvasViewSize: () => {},
     };
 
     // Act
@@ -51,6 +53,7 @@ describe('setOffSetZoomToCoords', () => {
     const initialContextState: CanvasViewSettingsContextModel = {
       canvasViewSettings: {
         canvasSize: { width: 10000, height: 10000 },
+        canvasViewSize: { width: 5000, height: 5000 },
         viewBoxSize: { width: 25000, height: 15000 },
         zoomFactor: 2,
         scrollPosition: { x: 0, y: 0 },
@@ -66,6 +69,7 @@ describe('setOffSetZoomToCoords', () => {
       setLoadSample: () => {},
       setViewBoxSize: () => {},
       setAutoSave: () => {},
+      setCanvasViewSize: () => {},
     };
 
     // Act
@@ -92,6 +96,7 @@ describe('setOffSetZoomToCoords', () => {
     const initialContextState: CanvasViewSettingsContextModel = {
       canvasViewSettings: {
         canvasSize: { width: 300, height: 100 },
+        canvasViewSize: { width: 5000, height: 5000 },
         viewBoxSize: { width: 2000, height: 5000 },
         zoomFactor: 5,
         scrollPosition: { x: 0, y: 0 },
@@ -107,6 +112,7 @@ describe('setOffSetZoomToCoords', () => {
       setLoadSample: () => {},
       setViewBoxSize: () => {},
       setAutoSave: () => {},
+      setCanvasViewSize: () => {},
     };
 
     // Act
@@ -135,6 +141,10 @@ describe('setOffSetZoomToCoords', () => {
           width: Number.MAX_SAFE_INTEGER,
           height: Number.MAX_SAFE_INTEGER,
         },
+        canvasViewSize: {
+          width: Number.MAX_SAFE_INTEGER,
+          height: Number.MAX_SAFE_INTEGER,
+        },
         viewBoxSize: {
           width: Number.MAX_SAFE_INTEGER,
           height: Number.MAX_SAFE_INTEGER,
@@ -153,6 +163,7 @@ describe('setOffSetZoomToCoords', () => {
       setLoadSample: () => {},
       setViewBoxSize: () => {},
       setAutoSave: () => {},
+      setCanvasViewSize: () => {},
     };
 
     // Act
@@ -178,6 +189,7 @@ describe('setOffSetZoomToCoords', () => {
     const initialContextState: CanvasViewSettingsContextModel = {
       canvasViewSettings: {
         canvasSize: { width: 5000, height: 5000 },
+        canvasViewSize: { width: 5000, height: 5000 },
         viewBoxSize: { width: 20000, height: 20000 },
         zoomFactor: 2,
         scrollPosition: { x: 0, y: 0 },
@@ -193,6 +205,7 @@ describe('setOffSetZoomToCoords', () => {
       setLoadSample: () => {},
       setViewBoxSize: () => {},
       setAutoSave: () => {},
+      setCanvasViewSize: () => {},
     };
 
     // Act
diff --git a/src/core/providers/canvas-view-settings/canvas-view-settings.model.ts b/src/core/providers/canvas-view-settings/canvas-view-settings.model.ts
index 8ca9b015..54e07945 100644
--- a/src/core/providers/canvas-view-settings/canvas-view-settings.model.ts
+++ b/src/core/providers/canvas-view-settings/canvas-view-settings.model.ts
@@ -3,6 +3,7 @@ import { Coords, Size } from '@/core/model';
 
 export interface CanvasViewSettingsModel {
   canvasSize: Size;
+  canvasViewSize: Size;
   viewBoxSize: Size;
   zoomFactor: number;
   scrollPosition: Coords;
@@ -26,6 +27,7 @@ const initialAutoSaveValue =
 
 export const createInitialSettings = (DEFAULT_ZOOM_FACTOR: number) => ({
   canvasSize: CANVAS_SIZE,
+  canvasViewSize: CANVAS_SIZE,
   viewBoxSize: { width: 0, height: 0 },
   zoomFactor: DEFAULT_ZOOM_FACTOR,
   scrollPosition: { x: 0, y: 0 },
@@ -38,6 +40,7 @@ export interface CanvasViewSettingsContextModel {
   canvasViewSettings: CanvasViewSettingsModel;
   setScrollPosition: (scrollPosition: Coords) => void;
   setCanvasSize: (canvasSize: Size) => void;
+  setCanvasViewSize: (canvasViewSize: Size) => void;
   setFilename: (filename: string) => void;
   zoomIn: () => void;
   zoomOut: () => void;
diff --git a/src/core/providers/canvas-view-settings/canvas-view-settings.provider.tsx b/src/core/providers/canvas-view-settings/canvas-view-settings.provider.tsx
index 4103500c..b3f2e019 100644
--- a/src/core/providers/canvas-view-settings/canvas-view-settings.provider.tsx
+++ b/src/core/providers/canvas-view-settings/canvas-view-settings.provider.tsx
@@ -53,6 +53,13 @@ export const CanvasViewSettingsProvider: React.FC<Props> = props => {
     }));
   };
 
+  const setCanvasViewSize = (canvasSize: Size) => {
+    setCanvasViewSettings(canvasViewSettings => ({
+      ...canvasViewSettings,
+      canvasViewSize: canvasSize,
+    }));
+  };
+
   const setFilename = (filename: string) => {
     setCanvasViewSettings(canvasViewSettings => ({
       ...canvasViewSettings,
@@ -104,6 +111,7 @@ export const CanvasViewSettingsProvider: React.FC<Props> = props => {
         canvasViewSettings,
         setScrollPosition,
         setCanvasSize,
+        setCanvasViewSize,
         setFilename,
         zoomIn,
         zoomOut,
diff --git a/src/pods/canvas/canvas.pod.tsx b/src/pods/canvas/canvas.pod.tsx
index afcf0168..74549570 100644
--- a/src/pods/canvas/canvas.pod.tsx
+++ b/src/pods/canvas/canvas.pod.tsx
@@ -45,6 +45,7 @@ export const CanvasPod: React.FC = () => {
   } = useCanvasSchemaContext();
   const {
     canvasViewSettings,
+    setCanvasViewSize,
     setScrollPosition,
     setLoadSample,
     setViewBoxSize,
@@ -121,6 +122,34 @@ export const CanvasPod: React.FC = () => {
 
   const containerRef = React.useRef<HTMLDivElement>(null);
 
+  React.useEffect(() => {
+    if (containerRef.current) {
+      const container = containerRef.current;
+
+      // TODO: Rename setOffSetZoomToCoords so that it does not only apply to coords
+      // maybe setOffsetZoom?
+
+      const CANVAS_VIEW_SIZE_WITH_APPLIED_ZOOM_OFFSET = setOffSetZoomToCoords(
+        container.clientWidth + containerRef.current.scrollLeft * 2,
+        container.clientHeight + containerRef.current.scrollTop * 2,
+        viewBoxSize,
+        canvasSize,
+        zoomFactor
+      );
+
+      setCanvasViewSize({
+        width: CANVAS_VIEW_SIZE_WITH_APPLIED_ZOOM_OFFSET.x,
+        height: CANVAS_VIEW_SIZE_WITH_APPLIED_ZOOM_OFFSET.y,
+      });
+    }
+  }, [
+    containerRef.current?.clientWidth,
+    containerRef.current?.scrollLeft,
+    containerRef.current?.clientHeight,
+    containerRef.current?.scrollTop,
+    viewBoxSize,
+  ]);
+
   const handleScroll = () => {
     if (containerRef.current) {
       setScrollPosition(
@@ -233,7 +262,7 @@ export const CanvasPod: React.FC = () => {
   }, [modalDialog.isOpen, canvasSchema.selectedElementId]);
 
   return (
-    <div
+    <main
       className={classes.container}
       ref={containerRef}
       onScroll={handleScroll}
@@ -282,6 +311,6 @@ export const CanvasPod: React.FC = () => {
           />
         )}
       </div>
-    </div>
+    </main>
   );
 };
diff --git a/src/pods/canvas/components/canvas-accessible/canvas-accessible.pod.module.css b/src/pods/canvas/components/canvas-accessible/canvas-accessible.pod.module.css
index 31218f4d..2795183c 100644
--- a/src/pods/canvas/components/canvas-accessible/canvas-accessible.pod.module.css
+++ b/src/pods/canvas/components/canvas-accessible/canvas-accessible.pod.module.css
@@ -5,7 +5,9 @@
   /* only for see the content while developing */
   /* 
   z-index: 1;
-  background-color: rgba(0, 0, 0, 0.908); */
+  background-color: rgba(0, 0, 0, 0.908);
+  text-align: left;
+  padding-left: 2rem; */
   /* comment for show accessibility canvas*/
   width: 1px;
   height: 1px;
diff --git a/src/pods/canvas/components/canvas-accessible/canvas-accessible.pod.tsx b/src/pods/canvas/components/canvas-accessible/canvas-accessible.pod.tsx
index 4ea320bf..1869c3ab 100644
--- a/src/pods/canvas/components/canvas-accessible/canvas-accessible.pod.tsx
+++ b/src/pods/canvas/components/canvas-accessible/canvas-accessible.pod.tsx
@@ -33,9 +33,6 @@ export const CanvasAccessible: React.FC<CanvasAccessibleProps> = props => {
   }, []);
 
   return (
-    //Maybe it needs something for better accessibility.
-    //Before, the screen reader read all the content and displayed
-    // the levels of the titles and the list of items, now read all like plain text.
     <section
       className={classes.screenReaderOnly}
       tabIndex={-1}
diff --git a/src/pods/canvas/components/canvas-accessible/components/collection-accessible.component.tsx b/src/pods/canvas/components/canvas-accessible/components/collection-accessible.component.tsx
index 22aa3699..ca976a4a 100644
--- a/src/pods/canvas/components/canvas-accessible/components/collection-accessible.component.tsx
+++ b/src/pods/canvas/components/canvas-accessible/components/collection-accessible.component.tsx
@@ -28,22 +28,28 @@ export const CollectionAccessible: React.FC<Props> = props => {
     <>
       <h3 ref={collectionRefs.current[table.id]}>
         {table.tableName} collection
-        {!isTabletOrMobileDevice ? (
-          <>
+      </h3>
+      {!isTabletOrMobileDevice ? (
+        <ul>
+          <li>
             <button type="button" onClick={() => onEditTable(table)}>
               Edit {table.tableName} collection
             </button>
+          </li>
+          <li>
             <button
               type="button"
               onClick={() => onDeleteSelectedItem(table.id)}
             >
               Delete {table.tableName} collection
             </button>
-          </>
-        ) : null}
-      </h3>
+          </li>
+        </ul>
+      ) : null}
       <h4>Fields for {table.tableName} collection</h4>
-      <FieldList fieldList={table.fields} listName={table.tableName} />
+      <ul>
+        <FieldList fieldList={table.fields} listName={table.tableName} />
+      </ul>
       <TableRelationsAccessible
         table={table}
         canvasSchema={canvasSchema}
diff --git a/src/pods/canvas/components/canvas-accessible/components/field-accessible.component.tsx b/src/pods/canvas/components/canvas-accessible/components/field-accessible.component.tsx
index 878ebdee..b50e791c 100644
--- a/src/pods/canvas/components/canvas-accessible/components/field-accessible.component.tsx
+++ b/src/pods/canvas/components/canvas-accessible/components/field-accessible.component.tsx
@@ -8,21 +8,34 @@ interface Props {
 }
 
 export const Field: React.FC<Props> = props => {
-  const { field, listName } = props;
+  const { field } = props;
 
   const renderNNElement = (NN?: boolean) => {
-    if (NN) return <span>NN</span>;
+    if (NN) return <span>Not Null</span>;
+  };
+  const renderArrayElement = (isArray?: boolean) => {
+    if (isArray)
+      return (
+        <>
+          <span>array</span>&nbsp;
+        </>
+      );
   };
 
   const renderChildrenElement = (name: string, children?: FieldVm[]) => {
     if (children)
-      return <FieldList fieldList={children} listName={`${name} nested`} />;
+      return (
+        <ul>
+          <FieldList fieldList={children} listName={`${name} nested`} />
+        </ul>
+      );
   };
 
   return (
-    <li aria-label={`${listName} field`}>
-      <span>{field.name}</span>
-      <span>{field.type}</span>
+    <li>
+      <span>{field.name}</span>&nbsp;
+      <span>{field.type}</span>&nbsp;
+      {renderArrayElement(field.isArray)}
       {renderNNElement(field.isNN)}
       {renderChildrenElement(field.name, field.children)}
     </li>
diff --git a/src/pods/canvas/components/canvas-accessible/components/field-list-accessible.component.tsx b/src/pods/canvas/components/canvas-accessible/components/field-list-accessible.component.tsx
index 7522dce0..c985aaaa 100644
--- a/src/pods/canvas/components/canvas-accessible/components/field-list-accessible.component.tsx
+++ b/src/pods/canvas/components/canvas-accessible/components/field-list-accessible.component.tsx
@@ -10,11 +10,7 @@ interface Props {
 export const FieldList: React.FC<Props> = props => {
   const { fieldList, listName } = props;
 
-  return (
-    <ul>
-      {fieldList.map(field => (
-        <Field field={field} listName={listName} key={field.id} />
-      ))}
-    </ul>
-  );
+  return fieldList.map(field => (
+    <Field field={field} listName={listName} key={field.id} />
+  ));
 };
diff --git a/src/pods/canvas/components/table/database-table.component.tsx b/src/pods/canvas/components/table/database-table.component.tsx
index f486e995..a24fd208 100644
--- a/src/pods/canvas/components/table/database-table.component.tsx
+++ b/src/pods/canvas/components/table/database-table.component.tsx
@@ -11,6 +11,7 @@ import {
 } from './components';
 import { renderRows } from './database-table-render-rows.helper';
 import classes from './database-table.module.css';
+import { motion } from 'framer-motion';
 
 // TODO: We should add an optional field to indicate FONT_SIZE in case we override the standard class
 // TODO: There's is a solution more elaborated (using JS) to show elipsis ... if text is too long
@@ -82,22 +83,29 @@ export const DatabaseTable: React.FC<Props> = ({
   };
 
   return (
-    <g
-      transform={`translate(${tableInfo.x}, ${tableInfo.y})`}
-      onMouseDown={onMouseDown}
-      onTouchStart={onTouchStart}
-      className={classes.tableContainer}
-      ref={ref as React.LegacyRef<SVGGElement> | undefined}
-    >
-      <DatabaseTableBorder totalHeight={totalHeight} isSelected={isSelected} />
-      <DatabaseTableHeader
-        onEditTable={handleDoubleClick}
-        onSelectTable={handleSelectTable}
-        isSelected={isSelected}
-        tableName={tableInfo.tableName}
-        isTabletOrMobileDevice={isTabletOrMobileDevice}
-      />
-      <DatabaseTableBody renderedRows={renderedRows} />
+    <g transform={`translate(${tableInfo.x}, ${tableInfo.y})`}>
+      <motion.g
+        onMouseDown={onMouseDown}
+        onTouchStart={onTouchStart}
+        className={classes.tableContainer}
+        ref={ref as React.Ref<SVGGElement> | undefined}
+        initial={{ opacity: 0, scale: 0.8 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.3 }}
+      >
+        <DatabaseTableBorder
+          totalHeight={totalHeight}
+          isSelected={isSelected}
+        />
+        <DatabaseTableHeader
+          onEditTable={handleDoubleClick}
+          onSelectTable={handleSelectTable}
+          isSelected={isSelected}
+          tableName={tableInfo.tableName}
+          isTabletOrMobileDevice={isTabletOrMobileDevice}
+        />
+        <DatabaseTableBody renderedRows={renderedRows} />
+      </motion.g>
     </g>
   );
 };
diff --git a/src/pods/edit-relation/edit-relation.business.ts b/src/pods/edit-relation/edit-relation.business.ts
index 6fdb1dcf..3d550ad3 100644
--- a/src/pods/edit-relation/edit-relation.business.ts
+++ b/src/pods/edit-relation/edit-relation.business.ts
@@ -7,7 +7,7 @@ import {
   RelationVm,
   TableVm,
 } from '@/core/providers/canvas-schema';
-import { FormValueVm, RelationFormVm } from './edit-relation.vm';
+import { RelationFormVm } from './edit-relation.vm';
 
 export const mapRelationFormVmToRelationVM = (
   values: RelationFormVm,
@@ -15,18 +15,18 @@ export const mapRelationFormVmToRelationVM = (
 ): RelationVm => {
   return {
     id: relationId || GenerateGUID(),
-    type: values.type.label as RelationType,
-    fromTableId: values.fromTableId.id,
-    fromFieldId: values.fromFieldId.id,
-    toFieldId: values.toFieldId.id,
-    toTableId: values.toTableId.id,
+    type: values.type as RelationType,
+    fromTableId: values.fromTableId,
+    fromFieldId: values.fromFieldId,
+    toFieldId: values.toFieldId,
+    toTableId: values.toTableId,
   };
 };
 
 export const mapRelationsTypeToDropdownVm = (): DropdownOptionVm[] => [
-  { id: '1', label: '1:1' },
-  { id: '2', label: '1:M' },
-  { id: '3', label: 'M:1' },
+  { id: '1:1', label: '1:1' },
+  { id: '1:M', label: '1:M' },
+  { id: 'M:1', label: 'M:1' },
 ];
 
 // TODO:
@@ -97,23 +97,23 @@ export const mapTablesFieldsToPkOptionVm = (
 };
 
 //Form
-const mapTableToFormValueVm = (table: TableVm): FormValueVm => ({
-  id: table.id,
-  label: table.tableName,
-});
-
-const mapFieldVmToFormValueVm = (field: FieldVm): FormValueVm => ({
-  id: field.id,
-  label: field.name,
-});
-
-const createFormValueFromTableId = (
-  id: GUID,
-  canvasSchema: DatabaseSchemaVm
-): FormValueVm => {
-  const findTable = returnTableFromCanvasSchema(id, canvasSchema);
-  return mapTableToFormValueVm(findTable);
-};
+// const mapTableToFormValueVm = (table: TableVm): FormValueVm => ({
+//   id: table.id,
+//   label: table.tableName,
+// });
+
+// const mapFieldVmToFormValueVm = (field: FieldVm): FormValueVm => ({
+//   id: field.id,
+//   label: field.name,
+// });
+
+// const createFormValueFromTableId = (
+//   id: GUID,
+//   canvasSchema: DatabaseSchemaVm
+// ): FormValueVm => {
+//   const findTable = returnTableFromCanvasSchema(id, canvasSchema);
+//   return mapTableToFormValueVm(findTable);
+// };
 
 export const findFieldRecursively = (
   fields: FieldVm[],
@@ -129,31 +129,31 @@ export const findFieldRecursively = (
   return undefined;
 };
 
-const createFormValueFromFieldId = (
-  tableId: GUID,
-  fieldId: GUID,
-  canvasSchema: DatabaseSchemaVm
-): FormValueVm => {
-  const findTable = returnTableFromCanvasSchema(tableId, canvasSchema);
-  const findField = findFieldRecursively(findTable.fields, fieldId);
+// const createFormValueFromFieldId = (
+//   tableId: GUID,
+//   fieldId: GUID,
+//   canvasSchema: DatabaseSchemaVm
+// ): FormValueVm => {
+//   const findTable = returnTableFromCanvasSchema(tableId, canvasSchema);
+//   const findField = findFieldRecursively(findTable.fields, fieldId);
 
-  if (!findField) {
-    throw new Error(`Field with ID ${fieldId} not found`);
-  }
-  return mapFieldVmToFormValueVm(findField);
-};
+//   if (!findField) {
+//     throw new Error(`Field with ID ${fieldId} not found`);
+//   }
+//   return mapFieldVmToFormValueVm(findField);
+// };
 
-const createFormValueFromType = (type: RelationType): FormValueVm => {
-  const typeOptionList = mapRelationsTypeToDropdownVm();
-  const findType = typeOptionList.find(typeOption => typeOption.label === type);
+// const createFormValueFromType = (type: RelationType): FormValueVm => {
+//   const typeOptionList = mapRelationsTypeToDropdownVm();
+//   const findType = typeOptionList.find(typeOption => typeOption.label === type);
 
-  if (!findType) {
-    throw Error(`Relation type ${type} has not valid value`);
-  }
+//   if (!findType) {
+//     throw Error(`Relation type ${type} has not valid value`);
+//   }
 
-  //map?
-  return findType as FormValueVm;
-};
+//   //map?
+//   return findType as FormValueVm;
+// };
 
 const findRelation = (relations: RelationVm[], id: GUID): RelationVm => {
   const relationId = relations.find(relation => relation.id === id);
@@ -169,43 +169,20 @@ export const createInitialIdValues = (
 ): RelationFormVm => {
   const relation = findRelation(canvasSchema.relations, relationId);
   const { fromFieldId, fromTableId, toFieldId, toTableId, type } = relation;
-  const fromTableIdFormValue = createFormValueFromTableId(
-    fromTableId,
-    canvasSchema
-  );
 
-  const toTableIdFormValue = createFormValueFromTableId(
-    toTableId,
-    canvasSchema
-  );
-
-  const fromFieldIdFormValue = createFormValueFromFieldId(
+  return {
     fromTableId,
-    fromFieldId,
-    canvasSchema
-  );
-
-  const toFieldIdFormValue = createFormValueFromFieldId(
     toTableId,
+    fromFieldId,
     toFieldId,
-    canvasSchema
-  );
-
-  const typeFormValue = createFormValueFromType(type);
-
-  return {
-    fromTableId: fromTableIdFormValue,
-    toTableId: toTableIdFormValue,
-    fromFieldId: fromFieldIdFormValue,
-    toFieldId: toFieldIdFormValue,
-    type: typeFormValue,
+    type,
   };
 };
 
 export const createInitialValues = (): RelationFormVm => ({
-  fromFieldId: { id: '', label: '' },
-  fromTableId: { id: '', label: '' },
-  toFieldId: { id: '', label: '' },
-  toTableId: { id: '', label: '' },
-  type: { id: '1', label: '1:1' },
+  fromFieldId: '',
+  fromTableId: '',
+  toFieldId: '',
+  toTableId: '',
+  type: '1:1',
 });
diff --git a/src/pods/edit-relation/edit-relation.component.tsx b/src/pods/edit-relation/edit-relation.component.tsx
index d42cecdb..30b915d8 100644
--- a/src/pods/edit-relation/edit-relation.component.tsx
+++ b/src/pods/edit-relation/edit-relation.component.tsx
@@ -23,11 +23,12 @@ export const EditRelationComponent: React.FC<Props> = props => {
     props;
 
   const fieldsTableOrigin: PkOptionVm[] = mapTablesFieldsToPkOptionVm(
-    values.fromTableId.id,
+    values.fromTableId,
     canvasSchema
   );
+
   const fieldsTableDestination: PkOptionVm[] = mapTablesFieldsToPkOptionVm(
-    values.toTableId.id,
+    values.toTableId,
     canvasSchema
   );
 
@@ -46,11 +47,12 @@ export const EditRelationComponent: React.FC<Props> = props => {
         selectTitle={DROPDOWN_ORIGIN_TABLE_TITLE}
       ></DropdownFormik>
       <TablePkPickerFormik
+        key={`fromFieldId-${values.fromTableId}`}
         name="fromFieldId"
         label="Origin field"
         options={fieldsTableOrigin}
         selectTitle={DROPDOWN_ORIGIN_FIELD}
-        disabled={values.fromTableId.id ? false : true}
+        disabled={!values.fromTableId}
       ></TablePkPickerFormik>
       <DropdownFormik
         name="toTableId"
@@ -59,11 +61,12 @@ export const EditRelationComponent: React.FC<Props> = props => {
         selectTitle={DROPDOWN_DESTINATION_TABLE_TITLE}
       ></DropdownFormik>
       <TablePkPickerFormik
+        key={`toFieldId-${values.toTableId}`}
         name="toFieldId"
         label="Destination field"
         options={fieldsTableDestination}
         selectTitle={DROPDOWN_DESTINATION_FIELD}
-        disabled={values.toTableId.id ? false : true}
+        disabled={!values.toTableId}
       ></TablePkPickerFormik>
     </>
   );
diff --git a/src/pods/edit-relation/edit-relation.validation.ts b/src/pods/edit-relation/edit-relation.validation.ts
index e75d8700..aed167e1 100644
--- a/src/pods/edit-relation/edit-relation.validation.ts
+++ b/src/pods/edit-relation/edit-relation.validation.ts
@@ -1,37 +1,37 @@
 import { createFormikValidation } from '@lemoncode/fonk-formik';
-import { ValidationSchema } from '@lemoncode/fonk';
+import { ValidationSchema, Validators } from '@lemoncode/fonk';
 
-import { objectEmptyIdValidator } from './object-empty-id.validator';
+// import { objectEmptyIdValidator } from './object-empty-id.validator';
 
 export const validationSchema: ValidationSchema = {
   field: {
     type: [
       {
-        validator: objectEmptyIdValidator,
+        validator: Validators.required,
         message: 'Selected type option is required',
       },
     ],
     fromTableId: [
       {
-        validator: objectEmptyIdValidator,
+        validator: Validators.required,
         message: 'Selected table option is required',
       },
     ],
     fromFieldId: [
       {
-        validator: objectEmptyIdValidator,
+        validator: Validators.required,
         message: 'Selected field option is required',
       },
     ],
     toTableId: [
       {
-        validator: objectEmptyIdValidator,
+        validator: Validators.required,
         message: 'Selected table option is required',
       },
     ],
     toFieldId: [
       {
-        validator: objectEmptyIdValidator,
+        validator: Validators.required,
         message: 'Selected field option is required',
       },
     ],
diff --git a/src/pods/edit-relation/edit-relation.vm.ts b/src/pods/edit-relation/edit-relation.vm.ts
index 3f546603..56cef7d6 100644
--- a/src/pods/edit-relation/edit-relation.vm.ts
+++ b/src/pods/edit-relation/edit-relation.vm.ts
@@ -1,12 +1,7 @@
-export interface FormValueVm {
-  id: string;
-  label: string;
-}
-
 export interface RelationFormVm {
-  fromFieldId: FormValueVm;
-  fromTableId: FormValueVm;
-  toFieldId: FormValueVm;
-  toTableId: FormValueVm;
-  type: FormValueVm;
+  fromFieldId: string;
+  fromTableId: string;
+  toFieldId: string;
+  toTableId: string;
+  type: string;
 }
diff --git a/src/pods/edit-relation/map-relation-form.vm.spec.ts b/src/pods/edit-relation/map-relation-form.vm.spec.ts
index 659076f8..21543e31 100644
--- a/src/pods/edit-relation/map-relation-form.vm.spec.ts
+++ b/src/pods/edit-relation/map-relation-form.vm.spec.ts
@@ -9,11 +9,11 @@ describe('mapRelationFormVmToRelationVM', () => {
   it('Should return RelationVm and generate a new ID when passing FormRelationVm without an ID', () => {
     // Arrange
     const relationForm: RelationFormVm = {
-      fromFieldId: { id: '1', label: 'id' },
-      fromTableId: { id: '2', label: 'Restaurant' },
-      toFieldId: { id: '3', label: 'id' },
-      toTableId: { id: '4', label: 'Tag' },
-      type: { id: '1', label: '1:1' },
+      fromFieldId: '1',
+      fromTableId: '2',
+      toFieldId: '3',
+      toTableId: '4',
+      type: '1:1',
     };
 
     vi.spyOn(generate, 'GenerateGUID').mockReturnValue('55');
@@ -34,11 +34,11 @@ describe('mapRelationFormVmToRelationVM', () => {
   it('Should return RelationVm and ID when passing FormRelationVm an ID', () => {
     // Arrange
     const relationForm: RelationFormVm = {
-      fromFieldId: { id: '1', label: 'id' },
-      fromTableId: { id: '2', label: 'Restaurant' },
-      toFieldId: { id: '3', label: 'id' },
-      toTableId: { id: '4', label: 'Tag' },
-      type: { id: '1', label: '1:1' },
+      fromFieldId: '1',
+      fromTableId: '2',
+      toFieldId: '3',
+      toTableId: '4',
+      type: '1:1',
     };
 
     const id = '33';
@@ -56,14 +56,14 @@ describe('mapRelationFormVmToRelationVM', () => {
       type: '1:1',
     });
   });
-  it('Should return type "1:M" and ID when passing FormRelationVm type with label: "1:M"', () => {
+  it('Should return type "1:M" and ID when passing FormRelationVm type "1:M"', () => {
     // Arrange
     const relationForm: RelationFormVm = {
-      fromFieldId: { id: '1', label: 'id' },
-      fromTableId: { id: '2', label: 'Restaurant' },
-      toFieldId: { id: '3', label: 'id' },
-      toTableId: { id: '4', label: 'Tag' },
-      type: { id: '1', label: '1:M' },
+      fromFieldId: '1',
+      fromTableId: '2',
+      toFieldId: '3',
+      toTableId: '4',
+      type: '1:M',
     };
 
     const id = '33';
@@ -81,14 +81,14 @@ describe('mapRelationFormVmToRelationVM', () => {
       type: '1:M',
     });
   });
-  it('Should return type "M:1" and ID when passing FormRelationVm type with label: "M:1"', () => {
+  it('Should return type "M:1" and ID when passing FormRelationVm type "M:1"', () => {
     // Arrange
     const relationForm: RelationFormVm = {
-      fromFieldId: { id: '1', label: 'id' },
-      fromTableId: { id: '2', label: 'Restaurant' },
-      toFieldId: { id: '3', label: 'id' },
-      toTableId: { id: '4', label: 'Tag' },
-      type: { id: '1', label: 'M:1' },
+      fromFieldId: '1',
+      fromTableId: '2',
+      toFieldId: '3',
+      toTableId: '4',
+      type: 'M:1',
     };
 
     const id = '33';
diff --git a/src/pods/edit-relation/object-empty-id.validator.spec.ts b/src/pods/edit-relation/object-empty-id.validator.spec.ts
deleted file mode 100644
index aac2dd77..00000000
--- a/src/pods/edit-relation/object-empty-id.validator.spec.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import { objectEmptyIdValidator } from './object-empty-id.validator';
-
-describe('objectEmptyIdValidator', () => {
-  it('should return true and custom message when object with id is provided', () => {
-    // Arrange
-    const object = {
-      id: 'test',
-    };
-    const customMessage = 'New Message';
-
-    // Act
-    const result = objectEmptyIdValidator({
-      value: object,
-      message: customMessage,
-    });
-
-    // Assert
-    expect(result.succeeded).toBeTruthy();
-  });
-  it('should return true and custom message when object with id is provided', () => {
-    // Arrange
-    const object = {
-      id: 'test',
-      name: 'Hello',
-    };
-    const customMessage = 'New Message';
-
-    // Act
-    const result = objectEmptyIdValidator({
-      value: object,
-      message: customMessage,
-    });
-
-    // Assert
-    expect(result.succeeded).toBeTruthy();
-  });
-  it('should return false and custom message when object with empty id and custom message is provided', () => {
-    // Arrange
-    const object = {
-      id: '',
-    };
-    const customMessage = 'New Message';
-
-    // Act
-    const result = objectEmptyIdValidator({
-      value: object,
-      message: customMessage,
-    });
-
-    // Assert
-    expect(result.succeeded).toBeFalsy();
-    expect(result.message).toBe('New Message');
-  });
-
-  it('should return false and default message when object with empty id', () => {
-    // Arrange
-    const object = {
-      id: '',
-    };
-    // Act
-    const result = objectEmptyIdValidator({
-      value: object,
-    });
-
-    // Assert
-    expect(result.succeeded).toBeFalsy();
-    expect(result.message).toBe('Please inform the field');
-  });
-
-  it('should return false when object is empty', () => {
-    // Arrange
-    const object = {};
-
-    // Act
-    const result = objectEmptyIdValidator({
-      value: object,
-    });
-
-    // Assert
-    expect(result.succeeded).toBeFalsy();
-  });
-
-  it('should return false and custom message when object is not an object', () => {
-    // Arrange
-    const object = '';
-
-    // Act
-    const result = objectEmptyIdValidator({
-      value: object,
-    });
-
-    // Assert
-    expect(result.succeeded).toBeFalsy();
-  });
-  it('should return false and custom message when object without id iand custom message is provided', () => {
-    // Arrange
-    const object = {
-      name: 'Hello',
-    };
-    const customMessage = 'New Message';
-
-    // Act
-    const result = objectEmptyIdValidator({
-      value: object,
-      message: customMessage,
-    });
-
-    // Assert
-    expect(result.succeeded).toBeFalsy();
-    expect(result.message).toBe('New Message');
-  });
-});
diff --git a/src/pods/edit-relation/object-empty-id.validator.ts b/src/pods/edit-relation/object-empty-id.validator.ts
deleted file mode 100644
index 167127e7..00000000
--- a/src/pods/edit-relation/object-empty-id.validator.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { FieldValidationFunctionSync } from '@lemoncode/fonk';
-
-const validatorType = 'OBJECT_EMPTY_VALIDATOR';
-
-let defaultMessage = 'Please inform the field';
-export const setErrorMessage = (message: string) => (defaultMessage = message);
-
-export const objectEmptyIdValidator: FieldValidationFunctionSync = (
-  fieldValidatorArgs: any
-) => {
-  const { value, message = defaultMessage } = fieldValidatorArgs;
-
-  const validationResult = {
-    succeeded: false,
-    type: validatorType,
-    message,
-  };
-
-  //the object must have an id value
-  if (value && value.id) {
-    validationResult.succeeded = true;
-    validationResult.message = '';
-  }
-
-  return validationResult;
-};
diff --git a/src/pods/edit-table/components/field.tsx b/src/pods/edit-table/components/field.tsx
index 7acd1be3..0d2b6e54 100644
--- a/src/pods/edit-table/components/field.tsx
+++ b/src/pods/edit-table/components/field.tsx
@@ -35,12 +35,12 @@ interface Props {
   labelAddField?: string;
 }
 
-const INPUT_NAME = 'Field for field ';
-const CHECKBOX_PK = 'Checkbox pk for field ';
-const CHECKBOX_FK = 'Checkbox fk for field ';
-const CHECKBOX_ARRAY = 'Checkbox isArray for field ';
-const CHECKBOX_ISNN = 'Checkbox isNN for field ';
-const SELECT = 'Select field type for';
+const INPUT_NAME = 'Field name ';
+const CHECKBOX_PK = 'Primary key for field ';
+const CHECKBOX_FK = 'Foreign key for field ';
+const CHECKBOX_ARRAY = 'Array for field ';
+const CHECKBOX_ISNN = 'Not null for field ';
+const SELECT = 'Select a field type for';
 const NESTED_FIELD_ADD_FIELD_LABEL = 'Add nested field for ';
 
 export const Field: React.FC<Props> = props => {
@@ -134,8 +134,8 @@ export const Field: React.FC<Props> = props => {
                 onClick={() => toggleExpand(field.id)}
                 aria-label={
                   expandedFields.has(field.id)
-                    ? 'contract nested fields'
-                    : 'expand nested fields'
+                    ? `collapse nested fields of "${field.name}"`
+                    : `expand nested fields of "${field.name}"`
                 }
               >
                 {expandedFields.has(field.id) ? (
diff --git a/src/pods/edit-table/edit-table.component.tsx b/src/pods/edit-table/edit-table.component.tsx
index b6fcacb6..fcb9259e 100644
--- a/src/pods/edit-table/edit-table.component.tsx
+++ b/src/pods/edit-table/edit-table.component.tsx
@@ -71,6 +71,7 @@ export const EditTableComponent: React.FC<Props> = props => {
             type="text"
             value={table.tableName}
             onChange={handleChangeTableName}
+            onFocus={e => e.currentTarget.select()}
           />
         </label>
       </div>
diff --git a/src/pods/footer/footer.component.tsx b/src/pods/footer/footer.component.tsx
index 75623528..a1ff96a6 100644
--- a/src/pods/footer/footer.component.tsx
+++ b/src/pods/footer/footer.component.tsx
@@ -29,11 +29,11 @@ export const FooterComponent: React.FC = () => {
       ? getFileNameCanvasIsPristine(filename, NEW_DOCUMENT_NAME)
       : getFileNameCanvasDirty(filename, NEW_DOCUMENT_NAME, ASTERISK);
   return (
-    <div className={classes.footerText}>
+    <footer className={classes.footerText}>
       <span>{isDevice ? documentNameMobile() : documentName()}</span>
       <button onClick={toggleTheme} className="mobile-only">
         {theme.themeMode === 'dark' ? <LightIcon /> : <DarkIcon />}
       </button>
-    </div>
+    </footer>
   );
 };
diff --git a/src/pods/toolbar/components/add-collection/add-collection.component.tsx b/src/pods/toolbar/components/add-collection/add-collection.component.tsx
index c64c43ad..46e8be16 100644
--- a/src/pods/toolbar/components/add-collection/add-collection.component.tsx
+++ b/src/pods/toolbar/components/add-collection/add-collection.component.tsx
@@ -10,19 +10,69 @@ import {
 } from '@/core/providers/canvas-schema';
 import { ADD_COLLECTION_TITLE } from '@/common/components/modal-dialog';
 import { SHORTCUTS } from '../../shortcut/shortcut.const';
+import { findFreePositionOrMinCollision } from '@/common/autoarrange-table';
+import { setOffSetZoomToCoords } from '@/common/helpers/set-off-set-zoom-to-coords.helper';
+import { getTableSize } from './add-collection.helper';
+import { mapTableVMtoBoxVMMapper } from './add-collection.mapper';
 
-const BORDER_MARGIN = 40;
+const TABLE_GAP = 40;
 
 export const AddCollection = () => {
   const { openModal, closeModal } = useModalDialogContext();
   const { canvasSchema, addTable } = useCanvasSchemaContext();
   const { canvasViewSettings, setLoadSample } = useCanvasViewSettingsContext();
+  const { canvasSize, zoomFactor, viewBoxSize } = canvasViewSettings;
 
   const handleAddTable = (newTable: TableVm) => {
-    const updatedTable = {
+    if (!newTable) {
+      return;
+    }
+
+    // Applying a zoom offSet to the table size,
+    // so that when zoomed the size of the tables is updated
+
+    const tableSizeWithZoomOffSet = setOffSetZoomToCoords(
+      getTableSize(newTable.fields).width + TABLE_GAP,
+      getTableSize(newTable.fields).height + TABLE_GAP,
+      viewBoxSize,
+      canvasSize,
+      zoomFactor
+    );
+
+    // Obtaining free position or with minimum collision for the new table
+
+    const position = findFreePositionOrMinCollision(
+      mapTableVMtoBoxVMMapper(canvasSchema.tables),
+      {
+        width: tableSizeWithZoomOffSet.x,
+        height: tableSizeWithZoomOffSet.y,
+      },
+      {
+        width: canvasViewSettings.canvasViewSize.width,
+        height: canvasViewSettings.canvasViewSize.height,
+      }
+    );
+
+    if (!position) {
+      return;
+    }
+
+    // Adding zoom offset to position coords and
+    // subtracting the size of the board by two
+    // to place the board from the middle
+
+    const positionWithZoomOffSet = setOffSetZoomToCoords(
+      position.x - getTableSize(newTable.fields).width / 2,
+      position.y - getTableSize(newTable.fields).height / 2,
+      viewBoxSize,
+      canvasSize,
+      zoomFactor
+    );
+
+    const updatedTable: TableVm = {
       ...newTable,
-      x: canvasViewSettings.scrollPosition.x + BORDER_MARGIN,
-      y: canvasViewSettings.scrollPosition.y + BORDER_MARGIN,
+      x: positionWithZoomOffSet.x,
+      y: positionWithZoomOffSet.y,
     };
 
     addTable(updatedTable);
@@ -40,9 +90,11 @@ export const AddCollection = () => {
       ADD_COLLECTION_TITLE
     );
   };
+
   const handleCloseModal = () => {
     closeModal();
   };
+
   return (
     <ToolbarButton
       icon={<TableIcon />}
diff --git a/src/pods/toolbar/components/add-collection/add-collection.helper.tsx b/src/pods/toolbar/components/add-collection/add-collection.helper.tsx
new file mode 100644
index 00000000..135323c2
--- /dev/null
+++ b/src/pods/toolbar/components/add-collection/add-collection.helper.tsx
@@ -0,0 +1,18 @@
+import { Size } from '@/core/model';
+import { FieldVm, TABLE_CONST } from '@/core/providers';
+
+export const getTableSize = (fields: FieldVm[]): Size => {
+  const rowHeight = TABLE_CONST.ROW_HEIGHT;
+  const headerHeight = TABLE_CONST.HEADER_HEIGHT;
+  const headerTitleGap = TABLE_CONST.HEADER_TITLE_GAP;
+  const fieldCount = fields.length;
+
+  const totalHeight =
+    headerHeight + headerTitleGap + fieldCount * rowHeight + 10;
+  const totalWidth = TABLE_CONST.DEFAULT_TABLE_WIDTH;
+
+  return {
+    width: totalWidth,
+    height: totalHeight,
+  };
+};
diff --git a/src/pods/toolbar/components/add-collection/add-collection.mapper.tsx b/src/pods/toolbar/components/add-collection/add-collection.mapper.tsx
new file mode 100644
index 00000000..5f205aa4
--- /dev/null
+++ b/src/pods/toolbar/components/add-collection/add-collection.mapper.tsx
@@ -0,0 +1,20 @@
+import { TableVm, TABLE_CONST } from '@/core/providers';
+import { getTableSize } from './add-collection.helper';
+import { Box } from '@/common/autoarrange-table/autoarrange-table.model';
+
+const tableVMtoBoxVMMapper = (table: TableVm): Box => {
+  const tableSize = getTableSize(table.fields);
+
+  // Adding the table center adjustment so that it only affects the table center
+  // when it is added and not to collisions
+
+  return {
+    x: table.x + getTableSize(table.fields).width / 2,
+    y: table.y + getTableSize(table.fields).height / 2,
+    width: TABLE_CONST.TABLE_WIDTH,
+    height: tableSize.height,
+  };
+};
+
+export const mapTableVMtoBoxVMMapper = (tables: TableVm[]): Box[] =>
+  tables.map(tableVMtoBoxVMMapper);
diff --git a/src/pods/toolbar/toolbar.pod.tsx b/src/pods/toolbar/toolbar.pod.tsx
index 0a813c4d..bfa85508 100644
--- a/src/pods/toolbar/toolbar.pod.tsx
+++ b/src/pods/toolbar/toolbar.pod.tsx
@@ -20,7 +20,7 @@ import classes from './toolbar.pod.module.css';
 
 export const ToolbarPod: React.FC = () => {
   return (
-    <div className={classes.container}>
+    <header className={classes.container}>
       <NewButton />
       <OpenButton />
       <SaveButton />
@@ -35,6 +35,6 @@ export const ToolbarPod: React.FC = () => {
       <CanvasSettingButton />
       <AboutButton />
       <ThemeToggleButton darkLabel="Dark Mode" lightLabel="Light Mode" />
-    </div>
+    </header>
   );
 };