diff --git a/package-lock.json b/package-lock.json
index 084c82e10..ed7dca220 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
             "version": "0.0.1",
             "dependencies": {
                 "@analytics/google-analytics": "^1.0.5",
-                "@appwrite.io/pink": "^0.0.6-rc.2",
+                "@appwrite.io/pink": "^0.0.6-rc.3",
                 "@aw-labs/appwrite-console": "^13.1.0",
                 "@popperjs/core": "^2.11.6",
                 "@sentry/svelte": "^7.36.0",
@@ -147,9 +147,9 @@
             "integrity": "sha512-1Yw7u/COtxx06BfwlI+kVhsa/upKYzmCNrT4c8QDeCY2KMYlnijkUjtHiPU08HxyTIVB5j6d75O0YWVIHwQS8g=="
         },
         "node_modules/@appwrite.io/pink": {
-            "version": "0.0.6-rc.2",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.6-rc.2.tgz",
-            "integrity": "sha512-PR2TVhLgRwXfdrB+0w9pZv7X2n6WOawArSJXq8jsRF58EzWcl4nf8XkjTsJ9BSU+in9fkmhxNIBywM707jqUcg==",
+            "version": "0.0.6-rc.3",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.6-rc.3.tgz",
+            "integrity": "sha512-oeRwchmRdHjspYJFipc6k/oWOOdaD7TKFwJ1weZMJMF2/GmQ44zCYo2qJhN2tPRb73Wje2dTvnkV6MH/Rxg7vw==",
             "dependencies": {
                 "@appwrite.io/pink-icons": "*",
                 "normalize.css": "^8.0.1",
diff --git a/package.json b/package.json
index 8a89b8257..cdc61d56f 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     },
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
-        "@appwrite.io/pink": "^0.0.6-rc.2",
+        "@appwrite.io/pink": "^0.0.6-rc.3",
         "@aw-labs/appwrite-console": "^13.1.0",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.36.0",
diff --git a/src/lib/components/drop.svelte b/src/lib/components/drop.svelte
index 8e71f7730..4e96d3ab1 100644
--- a/src/lib/components/drop.svelte
+++ b/src/lib/components/drop.svelte
@@ -77,7 +77,7 @@
     class="drop-tooltip"
     class:u-width-full-line={fullWidth}
     bind:this={tooltip}
-    style="z-index: 10">
+    style:z-index="10">
     <div class="drop-arrow" class:u-hide={!show || (show && noArrow)} bind:this={arrow} />
     {#if show}
         <slot name="list" />
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index afbc40b37..c54fba078 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -5,7 +5,6 @@
 
     export let show = false;
     export let size: 'small' | 'big' = null;
-    // export let WASD = false;
     export let icon: string = null;
     export let state: 'success' | 'warning' | 'error' | 'info' = null;
     export let error: string = null;
diff --git a/src/routes/console/project-[project]/databases/[[page]]/+page.svelte b/src/routes/console/project-[project]/databases/[[page]]/+page.svelte
index 9c71f0a29..a1cb024e3 100644
--- a/src/routes/console/project-[project]/databases/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/[[page]]/+page.svelte
@@ -24,7 +24,7 @@
         await goto(`${base}/console/project-${project}/databases/database-${event.detail.$id}`);
     }
 
-    $: prefs.subscribe((prefs) => {
+    prefs.subscribe((prefs) => {
         if (prefs?.preferredView) {
             invalidate(Dependencies.DATABASES);
         }
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte
index 164cb626b..dcf0c2dd2 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte
@@ -37,19 +37,13 @@
 <script lang="ts">
     import { InputChoice, InputSelect } from '$lib/elements/forms';
 
-    export let selectedAttribute: Models.AttributeBoolean = null;
+    export let editing = false;
     export let data: Partial<Models.AttributeBoolean> = {
         required: false,
         array: false,
         default: null
     };
 
-    $: if (selectedAttribute) {
-        data.required = selectedAttribute.required;
-        data.array = selectedAttribute.array;
-        data.default = selectedAttribute.default;
-    }
-
     $: if (data.required || data.array) {
         data.default = null;
     }
@@ -65,18 +59,10 @@
         { label: 'False', value: false }
     ]}
     bind:value={data.default}
-    disabled={!!selectedAttribute || data.array || data.required} />
-<InputChoice
-    id="required"
-    label="Required"
-    bind:value={data.required}
-    disabled={!!selectedAttribute || data.array}>
+    disabled={data.array || data.required} />
+<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
     Indicate whether this is a required attribute
 </InputChoice>
-<InputChoice
-    id="array"
-    label="Array"
-    bind:value={data.array}
-    disabled={!!selectedAttribute || data.required}>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
     Indicate whether this attribute should act as an array
 </InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte
index 335aa72c7..d08903d44 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte
@@ -37,15 +37,9 @@
 <script lang="ts">
     import { InputChoice, InputDateTime } from '$lib/elements/forms';
 
-    export let selectedAttribute: Models.AttributeDatetime = null;
+    export let editing = false;
     export let data: Partial<Models.AttributeDatetime>;
 
-    $: if (selectedAttribute) {
-        data.required = selectedAttribute.required;
-        data.array = selectedAttribute.array;
-        data.default = selectedAttribute.default;
-    }
-
     $: if (data.required) {
         data.default = null;
     }
@@ -55,15 +49,10 @@
     id="default"
     label="Default value"
     bind:value={data.default}
-    disabled={data.required}
-    readonly={!!selectedAttribute} />
-<InputChoice
-    id="required"
-    label="Required"
-    bind:value={data.required}
-    disabled={!!selectedAttribute}>
+    disabled={data.required} />
+<InputChoice id="required" label="Required" bind:value={data.required}>
     Indicate whether this is a required attribute
 </InputChoice>
-<InputChoice id="array" label="Array" bind:value={data.array} disabled={!!selectedAttribute}>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={editing}>
     Indicate whether this attribute should act as an array
 </InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte
index 1ac6b11d2..6901f9f65 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte
@@ -38,37 +38,18 @@
 <script lang="ts">
     import { InputChoice, InputEmail } from '$lib/elements/forms';
 
-    export let selectedAttribute: Models.AttributeEmail = null;
+    export let editing = false;
     export let data: Partial<Models.AttributeEmail>;
 
-    $: if (selectedAttribute) {
-        data.required = selectedAttribute.required;
-        data.array = selectedAttribute.array;
-        data.default = selectedAttribute.default;
-    }
-
     $: if (data.required || data.array) {
         data.default = null;
     }
 </script>
 
-<InputEmail
-    id="default"
-    label="Default value"
-    bind:value={data.default}
-    disabled={data.required}
-    readonly={!!selectedAttribute} />
-<InputChoice
-    id="required"
-    label="Required"
-    bind:value={data.required}
-    disabled={!!selectedAttribute || data.array}>
+<InputEmail id="default" label="Default value" bind:value={data.default} disabled={data.required} />
+<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
     Indicate whether this is a required attribute
 </InputChoice>
-<InputChoice
-    id="array"
-    label="Array"
-    bind:value={data.array}
-    disabled={!!selectedAttribute || data.required}>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
     Indicate whether this attribute should act as an array
 </InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte
index a094152ca..deca81e39 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte
@@ -39,7 +39,7 @@
 <script lang="ts">
     import { InputChoice, InputSelect, InputTags } from '$lib/elements/forms';
 
-    export let selectedAttribute: Models.AttributeEnum;
+    export let editing = false;
     export let data: Partial<Models.AttributeEnum>;
 
     $: options =
@@ -48,15 +48,6 @@
             label: e
         })) ?? [];
 
-    $: if (selectedAttribute) {
-        ({
-            required: data.required,
-            array: data.array,
-            elements: data.elements,
-            default: data.default
-        } = selectedAttribute);
-    }
-
     $: if (data.required || data.array) {
         data.default = null;
     }
@@ -67,25 +58,16 @@
     label="Elements"
     bind:tags={data.elements}
     placeholder="Add elements here"
-    readonly={!!selectedAttribute}
     required />
 <InputSelect
     id="default"
     label="Default value"
     bind:options
     bind:value={data.default}
-    disabled={!!selectedAttribute || data.required} />
-<InputChoice
-    id="required"
-    label="Required"
-    bind:value={data.required}
-    disabled={!!selectedAttribute || data.array}>
+    disabled={data.required} />
+<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
     Indicate whether this is a required attribute
 </InputChoice>
-<InputChoice
-    id="array"
-    label="Array"
-    bind:value={data.array}
-    disabled={!!selectedAttribute || data.required}>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
     Indicate whether this attribute should act as an array
 </InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte
index 1d923cf2f..83d362306 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte
@@ -41,7 +41,7 @@
 <script lang="ts">
     import { InputNumber, InputChoice } from '$lib/elements/forms';
 
-    export let selectedAttribute: Models.AttributeFloat;
+    export let editing = false;
     export let data: Partial<Models.AttributeFloat> = {
         required: false,
         min: 0,
@@ -50,23 +50,13 @@
         array: false
     };
 
-    $: if (selectedAttribute) {
-        ({
-            required: data.required,
-            array: data.array,
-            min: data.min,
-            max: data.max
-        } = selectedAttribute);
-        data.default = selectedAttribute.default;
-    }
-
     $: if (data.required || data.array) {
         data.default = null;
     }
 </script>
 
-<InputNumber id="min" label="Min" bind:value={data.min} readonly={!!selectedAttribute} />
-<InputNumber id="max" label="Max" bind:value={data.max} readonly={!!selectedAttribute} />
+<InputNumber id="min" label="Min" bind:value={data.min} />
+<InputNumber id="max" label="Max" bind:value={data.max} />
 
 <InputNumber
     id="default"
@@ -75,19 +65,10 @@
     max={data.max}
     bind:value={data.default}
     disabled={data.required || data.array}
-    readonly={!!selectedAttribute}
     step="any" />
-<InputChoice
-    id="required"
-    label="Required"
-    bind:value={data.required}
-    disabled={!!selectedAttribute || data.array}>
+<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
     Indicate whether this is a required attribute
 </InputChoice>
-<InputChoice
-    id="array"
-    label="Array"
-    bind:value={data.array}
-    disabled={!!selectedAttribute || data.required}>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
     Indicate whether this attribute should act as an array
 </InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte
index 120b1fabe..1f66b62f8 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte
@@ -41,7 +41,6 @@
 <script lang="ts">
     import { InputNumber, InputChoice } from '$lib/elements/forms';
 
-    export let selectedAttribute: Models.AttributeInteger;
     export let data: Partial<Models.AttributeInteger> = {
         required: false,
         min: 0,
@@ -49,23 +48,15 @@
         default: 0,
         array: false
     };
+    export let editing = false;
 
-    $: if (selectedAttribute) {
-        ({
-            required: data.required,
-            array: data.array,
-            min: data.min,
-            max: data.max,
-            default: data.default
-        } = selectedAttribute);
-    }
     $: if (data.required || data.array) {
         data.default = null;
     }
 </script>
 
-<InputNumber id="min" label="Min" bind:value={data.min} readonly={!!selectedAttribute} />
-<InputNumber id="max" label="Max" bind:value={data.max} readonly={!!selectedAttribute} />
+<InputNumber id="min" label="Min" bind:value={data.min} />
+<InputNumber id="max" label="Max" bind:value={data.max} />
 
 <InputNumber
     id="default"
@@ -73,19 +64,10 @@
     min={data.min}
     max={data.max}
     bind:value={data.default}
-    disabled={data.required || data.array}
-    readonly={!!selectedAttribute} />
-<InputChoice
-    id="required"
-    label="Required"
-    bind:value={data.required}
-    disabled={!!selectedAttribute || data.array}>
+    disabled={data.required || data.array} />
+<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
     Indicate whether this is a required attribute
 </InputChoice>
-<InputChoice
-    id="array"
-    label="Array"
-    bind:value={data.array}
-    disabled={!!selectedAttribute || data.required}>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
     Indicate whether this attribute should act as an array
 </InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte
index 0ed4adf4a..14307dba3 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte
@@ -36,12 +36,9 @@
 <script lang="ts">
     import { InputText, InputChoice } from '$lib/elements/forms';
 
-    export let selectedAttribute: Models.AttributeIp;
+    export let editing = false;
     export let data: Partial<Models.AttributeIp>;
 
-    $: if (selectedAttribute) {
-        ({ required: data.required, array: data.array, default: data.default } = selectedAttribute);
-    }
     $: if (data.required || data.array) {
         data.default = null;
     }
@@ -51,19 +48,10 @@
     id="default"
     label="Default value"
     bind:value={data.default}
-    disabled={data.required || data.array}
-    readonly={!!selectedAttribute} />
-<InputChoice
-    id="required"
-    label="Required"
-    bind:value={data.required}
-    disabled={!!selectedAttribute || data.array}>
+    disabled={data.required || data.array} />
+<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
     Indicate whether this is a required attribute
 </InputChoice>
-<InputChoice
-    id="array"
-    label="Array"
-    bind:value={data.array}
-    disabled={!!selectedAttribute || data.required}>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
     Indicate whether this attribute should act as an array
 </InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
index 3e1918df7..16af8101b 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -38,7 +38,6 @@
 <script lang="ts">
     import { InputNumber, InputText, InputChoice } from '$lib/elements/forms';
 
-    export let selectedAttribute: Models.AttributeString;
     export let data: Partial<Models.AttributeString> = {
         required: false,
         size: 0,
@@ -47,43 +46,21 @@
     };
     export let editing = false;
 
-    $: if (selectedAttribute) {
-        ({
-            required: data.required,
-            array: data.array,
-            size: data.size,
-            default: data.default
-        } = selectedAttribute);
-    }
     $: if (data.required || data.array) {
         data.default = null;
     }
 </script>
 
-<InputNumber
-    id="size"
-    label="Size"
-    bind:value={data.size}
-    required
-    readonly={!!selectedAttribute || editing} />
+<InputNumber id="size" label="Size" bind:value={data.size} required readonly={editing} />
 <InputText
     id="default"
     label="Default value"
     bind:value={data.default}
     maxlength={data.size}
-    disabled={data.required || data.array}
-    readonly={!!selectedAttribute} />
-<InputChoice
-    id="required"
-    label="Required"
-    bind:value={data.required}
-    disabled={!!selectedAttribute || data.array}>
+    disabled={data.required || data.array} />
+<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
     Indicate whether this is a required attribute
 </InputChoice>
-<InputChoice
-    id="array"
-    label="Array"
-    bind:value={data.array}
-    disabled={!!selectedAttribute || data.required}>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
     Indicate whether this attribute should act as an array
 </InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte
index f34f6eae1..b2e1b5e09 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte
@@ -37,12 +37,9 @@
 <script lang="ts">
     import { InputText, InputChoice } from '$lib/elements/forms';
 
-    export let selectedAttribute: Models.AttributeUrl;
     export let data: Partial<Models.AttributeUrl>;
+    export let editing = false;
 
-    $: if (selectedAttribute) {
-        ({ required: data.required, array: data.array, default: data.default } = selectedAttribute);
-    }
     $: if (data.required || data.array) {
         data.default = null;
     }
@@ -52,19 +49,10 @@
     id="default"
     label="Default value"
     bind:value={data.default}
-    disabled={data.required || data.array}
-    readonly={!!selectedAttribute} />
-<InputChoice
-    id="required"
-    label="Required"
-    bind:value={data.required}
-    disabled={!!selectedAttribute || data.array}>
+    disabled={data.required || data.array} />
+<InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
     Indicate whether this is a required attribute
 </InputChoice>
-<InputChoice
-    id="array"
-    label="Array"
-    bind:value={data.array}
-    disabled={!!selectedAttribute || data.required}>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
     Indicate whether this attribute should act as an array
 </InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
index eafbdbef0..f18d2dbc6 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputSelectSearch } from '$lib/elements/forms';
+    import { Button, InputSelectSearch } from '$lib/elements/forms';
     import type { Models } from '@aw-labs/appwrite-console';
 
     export let id: string;
@@ -7,6 +7,70 @@
     export let value: number;
     export let attribute: Models.AttributeInteger;
     export let optionalText: string | undefined = undefined;
+
+    let addRelationship = false;
 </script>
 
-<InputSelectSearch {id} {label} {optionalText} required={attribute.required} bind:value />
+{#if attribute.direction === 'one'}
+    <InputSelectSearch {id} {label} {optionalText} required={attribute.required} bind:value />
+{:else if attribute.direction === 'many'}
+    <div class="u-width-full-line u-max-width-600" />
+
+    <div class="u-flex u-cross-baseline u-gap-16">
+        <div class="u-flex u-cross-baseline u-gap-8">
+            <label class="label" for="relationship">{label}</label>
+            <span class="optional u-x-small">Relation</span>
+        </div>
+        <button
+            on:click|preventDefault={() => {
+                addRelationship = true;
+            }}
+            class="button is-text u-padding-inline-0 u-margin-inline-start-auto"
+            type="button">
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="text">Add item</span>
+        </button>
+
+        <ul class="u-flex-vertical u-gap-4 u-margin-block-start-4">
+            {#if addRelationship === false}
+                <InputSelectSearch {id} {label} {optionalText} required bind:value />
+            {/if}
+            {#each attribute?.relationships as relationship}
+                <li class="u-flex u-gap-16">
+                    <output class="input-text is-read-only">
+                        <div class="u-flex u-cross-baseline u-gap-12">
+                            <span
+                                class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">
+                                {realationship.label}
+                            </span>
+                            <span class="u-flex-1 u-trim-1">
+                                {#each relationship.data as info}
+                                    {info}
+                                {/each}
+                            </span>
+                        </div>
+                    </output>
+                    <button class="button is-text u-padding-inline-0" aria-label="delete item 1">
+                        <span class="icon-x" aria-hidden="true" />
+                    </button>
+                </li>
+            {/each}
+        </ul>
+
+        <div class="u-flex u-cross-baseline u-gap-16 u-margin-block-start-8">
+            <p class="u-small">Total results: {attribute?.relationships?.length}</p>
+
+            <nav class="pagination u-margin-inline-start-auto" style="--button-size: 2.5rem;">
+                <Button text disabled noMargin ariaLabel="prev page">
+                    <span class="icon-cheveron-left" aria-hidden="true" />
+                    <span class="text">Prev</span>
+                </Button>
+
+                <Button text disabled noMargin ariaLabel="next page">
+                    <span class="text">Next</span>
+                    <span class="icon-cheveron-right" aria-hidden="true" />
+                </Button>
+            </nav>
+        </div>
+    </div>
+{/if}