diff --git a/components/ui/Authentication/FullPageWithImage.vue b/components/ui/Authentication/FullPageWithImage.vue
new file mode 100644
index 0000000..569433c
--- /dev/null
+++ b/components/ui/Authentication/FullPageWithImage.vue
@@ -0,0 +1,119 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div slot="component">
+            <div class="bg-white dark:bg-gray-900">
+                <div class="flex justify-center h-screen">
+                    <div class="hidden bg-cover lg:block lg:w-2/3" style="background-image: url(https://images.unsplash.com/photo-1616763355603-9755a640a287?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80)">
+                        <div class="flex items-center h-full px-20 bg-gray-900 bg-opacity-40">
+                            <div>
+                                <h2 class="text-4xl font-bold text-white">Brand</h2>
+                                
+                                <p class="max-w-xl mt-3 text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. In autem ipsa, nulla laboriosam dolores, repellendus perferendis libero suscipit nam temporibus molestiae</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="flex items-center w-full max-w-md px-6 mx-auto lg:w-2/6">
+                        <div class="flex-1">
+                            <div class="text-center">
+                                <h2 class="text-4xl font-bold text-center text-gray-700 dark:text-white">Brand</h2>
+                                
+                                <p class="mt-3 text-gray-500 dark:text-gray-300">Sign in to access your account</p>
+                            </div>
+
+                            <div class="mt-8">
+                                <form>
+                                    <div>
+                                        <label for="email" class="block mb-2 text-sm text-gray-600 dark:text-gray-200">Email Address</label>
+                                        <input type="email" name="email" id="email" placeholder="example@example.com" class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
+                                    </div>
+
+                                    <div class="mt-6">
+                                        <div class="flex justify-between mb-2">
+                                            <label for="password" class="text-sm text-gray-600 dark:text-gray-200">Password</label>
+                                            <a href="#" class="text-sm text-gray-400 focus:text-blue-500 hover:text-blue-500 hover:underline">Forgot password?</a>
+                                        </div>
+
+                                        <input type="password" name="password" id="password" placeholder="Your Password" class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
+                                    </div>
+
+                                    <div class="mt-6">
+                                        <button
+                                            class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400 focus:ring focus:ring-blue-300 focus:ring-opacity-50">
+                                            Sign in
+                                        </button>
+                                    </div>
+
+                                </form>
+
+                                <p class="mt-6 text-sm text-center text-gray-400">Don&#x27;t have an account yet? <a href="#" class="text-blue-500 focus:outline-none focus:underline hover:underline">Sign up</a>.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Fill Page With Image',
+                code: `
+        <div class="bg-white dark:bg-gray-900">
+            <div class="flex justify-center h-screen">
+                <div class="hidden bg-cover lg:block lg:w-2/3" style="background-image: url(https://images.unsplash.com/photo-1616763355603-9755a640a287?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80)">
+                    <div class="flex items-center h-full px-20 bg-gray-900 bg-opacity-40">
+                        <div>
+                            <h2 class="text-4xl font-bold text-white">Brand</h2>
+                            
+                            <p class="max-w-xl mt-3 text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. In autem ipsa, nulla laboriosam dolores, repellendus perferendis libero suscipit nam temporibus molestiae</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="flex items-center w-full max-w-md px-6 mx-auto lg:w-2/6">
+                    <div class="flex-1">
+                        <div class="text-center">
+                            <h2 class="text-4xl font-bold text-center text-gray-700 dark:text-white">Brand</h2>
+                            
+                            <p class="mt-3 text-gray-500 dark:text-gray-300">Sign in to access your account</p>
+                        </div>
+
+                        <div class="mt-8">
+                            <form>
+                                <div>
+                                    <label for="email" class="block mb-2 text-sm text-gray-600 dark:text-gray-200">Email Address</label>
+                                    <input type="email" name="email" id="email" placeholder="example@example.com" class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
+                                </div>
+
+                                <div class="mt-6">
+                                    <div class="flex justify-between mb-2">
+                                        <label for="password" class="text-sm text-gray-600 dark:text-gray-200">Password</label>
+                                        <a href="#" class="text-sm text-gray-400 focus:text-blue-500 hover:text-blue-500 hover:underline">Forgot password?</a>
+                                    </div>
+
+                                    <input type="password" name="password" id="password" placeholder="Your Password" class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
+                                </div>
+
+                                <div class="mt-6">
+                                    <button
+                                        class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400 focus:ring focus:ring-blue-300 focus:ring-opacity-50">
+                                        Sign in
+                                    </button>
+                                </div>
+
+                            </form>
+
+                            <p class="mt-6 text-sm text-center text-gray-400">Don&#x27;t have an account yet? <a href="#" class="text-blue-500 focus:outline-none focus:underline hover:underline">Sign up</a>.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>`
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/components/ui/CTA/Centered.vue b/components/ui/CTA/Centered.vue
new file mode 100644
index 0000000..a56eed9
--- /dev/null
+++ b/components/ui/CTA/Centered.vue
@@ -0,0 +1,133 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <section class="bg-white dark:bg-gray-900">
+                <div class="container flex flex-col items-center px-4 py-12 mx-auto text-center">
+                    <h2 class="text-3xl font-bold tracking-tight text-gray-600 dark:text-white">
+                        Try something really different right now. 
+                    </h2>
+
+                    <p class="block max-w-2xl mt-4 text-xl text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto recusandae tenetur iste quaerat voluptatibus quibusdam nam repudiandae </p>
+                    
+                    <div class="mt-6">
+                        <div class="inline-flex w-full overflow-hidden rounded-lg shadow sm:w-auto sm:mx-3">
+                            <a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 text-base font-medium text-white bg-gradient-to-r from-gray-700 to-gray-900 hover:from-gray-600 hover:to-gray-600 sm:w-auto">
+                                <svg class="w-6 h-6 mx-2 fill-current" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
+                                    <g>
+                                        <g>
+                                            <path d="M407,0H105C47.103,0,0,47.103,0,105v302c0,57.897,47.103,105,105,105h302c57.897,0,105-47.103,105-105V105
+                                                C512,47.103,464.897,0,407,0z M482,407c0,41.355-33.645,75-75,75H105c-41.355,0-75-33.645-75-75V105c0-41.355,33.645-75,75-75h302
+                                                c41.355,0,75,33.645,75,75V407z"></path>
+                                        </g>
+                                    </g>
+                                    <g>
+                                        <g>
+                                            <path d="M305.646,123.531c-1.729-6.45-5.865-11.842-11.648-15.18c-11.936-6.892-27.256-2.789-34.15,9.151L256,124.166
+                                                l-3.848-6.665c-6.893-11.937-22.212-16.042-34.15-9.151h-0.001c-11.938,6.893-16.042,22.212-9.15,34.151l18.281,31.664
+                                                L159.678,291H110.5c-13.785,0-25,11.215-25,25c0,13.785,11.215,25,25,25h189.86l-28.868-50h-54.079l85.735-148.498
+                                                C306.487,136.719,307.375,129.981,305.646,123.531z"></path>
+                                        </g>
+                                    </g>
+                                    <g>
+                                        <g>
+                                            <path d="M401.5,291h-49.178l-55.907-96.834l-28.867,50l86.804,150.348c3.339,5.784,8.729,9.921,15.181,11.65
+                                                c2.154,0.577,4.339,0.863,6.511,0.863c4.332,0,8.608-1.136,12.461-3.361c11.938-6.893,16.042-22.213,9.149-34.15L381.189,341
+                                                H401.5c13.785,0,25-11.215,25-25C426.5,302.215,415.285,291,401.5,291z"></path>
+                                        </g>
+                                    </g>
+                                    <g>
+                                        <g>
+                                            <path d="M119.264,361l-4.917,8.516c-6.892,11.938-2.787,27.258,9.151,34.15c3.927,2.267,8.219,3.345,12.458,3.344
+                                                c8.646,0,17.067-4.484,21.693-12.495L176.999,361H119.264z"></path>
+                                        </g>
+                                    </g>
+                                </svg>
+                                <span class="mx-2">
+                                    Get it on the App Store
+                                </span>
+                            </a>
+                        </div>
+
+                        <div class="inline-flex w-full mt-4 overflow-hidden rounded-lg shadow sm:w-auto sm:mx-3 sm:mt-0">
+                            <a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 text-base font-medium text-white transition-colors duration-150 transform sm:w-auto bg-gradient-to-r from-blue-700 to-blue-900 hover:from-blue-600 hover:to-blue-600">
+                                <svg class="w-6 h-6 mx-2 fill-current" viewBox="-28 0 512 512.00075" xmlns="http://www.w3.org/2000/svg"><path d="m432.320312 215.121094-361.515624-208.722656c-14.777344-8.53125-32.421876-8.53125-47.203126 0-.121093.070312-.230468.148437-.351562.21875-.210938.125-.421875.253906-.628906.390624-14.175782 8.636719-22.621094 23.59375-22.621094 40.269532v417.445312c0 17.066406 8.824219 32.347656 23.601562 40.878906 7.390626 4.265626 15.496094 6.398438 23.601563 6.398438s16.214844-2.132812 23.601563-6.398438l361.519531-208.722656c14.777343-8.53125 23.601562-23.8125 23.601562-40.878906s-8.824219-32.347656-23.605469-40.878906zm-401.941406 253.152344c-.21875-1.097657-.351562-2.273438-.351562-3.550782v-417.445312c0-2.246094.378906-4.203125.984375-5.90625l204.324219 213.121094zm43.824219-425.242188 234.21875 135.226562-52.285156 54.539063zm-6.480469 429.679688 188.410156-196.527344 54.152344 56.484375zm349.585938-201.835938-80.25 46.332031-60.125-62.714843 58.261718-60.773438 82.113282 47.40625c7.75 4.476562 8.589844 11.894531 8.589844 14.875s-.839844 10.398438-8.589844 14.875zm0 0"></path></svg>
+                                <span class="mx-2">
+                                    Get it on Google Play
+                                </span> 
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Centered',
+                code: `
+        <section class="bg-white dark:bg-gray-900">
+            <div class="container flex flex-col items-center px-4 py-12 mx-auto text-center">
+                <h2 class="text-3xl font-bold tracking-tight text-gray-600 dark:text-white">
+                    Try something really different right now. 
+                </h2>
+
+                <p class="block max-w-2xl mt-4 text-xl text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto recusandae tenetur iste quaerat voluptatibus quibusdam nam repudiandae </p>
+                
+                <div class="mt-6">
+                    <div class="inline-flex w-full overflow-hidden rounded-lg shadow sm:w-auto sm:mx-3">
+                        <a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 text-base font-medium text-white bg-gradient-to-r from-gray-700 to-gray-900 hover:from-gray-600 hover:to-gray-600 sm:w-auto">
+                            <svg class="w-6 h-6 mx-2 fill-current" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
+                                <g>
+                                    <g>
+                                        <path d="M407,0H105C47.103,0,0,47.103,0,105v302c0,57.897,47.103,105,105,105h302c57.897,0,105-47.103,105-105V105
+                                            C512,47.103,464.897,0,407,0z M482,407c0,41.355-33.645,75-75,75H105c-41.355,0-75-33.645-75-75V105c0-41.355,33.645-75,75-75h302
+                                            c41.355,0,75,33.645,75,75V407z"></path>
+                                    </g>
+                                </g>
+                                <g>
+                                    <g>
+                                        <path d="M305.646,123.531c-1.729-6.45-5.865-11.842-11.648-15.18c-11.936-6.892-27.256-2.789-34.15,9.151L256,124.166
+                                            l-3.848-6.665c-6.893-11.937-22.212-16.042-34.15-9.151h-0.001c-11.938,6.893-16.042,22.212-9.15,34.151l18.281,31.664
+                                            L159.678,291H110.5c-13.785,0-25,11.215-25,25c0,13.785,11.215,25,25,25h189.86l-28.868-50h-54.079l85.735-148.498
+                                            C306.487,136.719,307.375,129.981,305.646,123.531z"></path>
+                                    </g>
+                                </g>
+                                <g>
+                                    <g>
+                                        <path d="M401.5,291h-49.178l-55.907-96.834l-28.867,50l86.804,150.348c3.339,5.784,8.729,9.921,15.181,11.65
+                                            c2.154,0.577,4.339,0.863,6.511,0.863c4.332,0,8.608-1.136,12.461-3.361c11.938-6.893,16.042-22.213,9.149-34.15L381.189,341
+                                            H401.5c13.785,0,25-11.215,25-25C426.5,302.215,415.285,291,401.5,291z"></path>
+                                    </g>
+                                </g>
+                                <g>
+                                    <g>
+                                        <path d="M119.264,361l-4.917,8.516c-6.892,11.938-2.787,27.258,9.151,34.15c3.927,2.267,8.219,3.345,12.458,3.344
+                                            c8.646,0,17.067-4.484,21.693-12.495L176.999,361H119.264z"></path>
+                                    </g>
+                                </g>
+                            </svg>
+                            <span class="mx-2">
+                                Get it on the App Store
+                            </span>
+                        </a>
+                    </div>
+
+                    <div class="inline-flex w-full mt-4 overflow-hidden rounded-lg shadow sm:w-auto sm:mx-3 sm:mt-0">
+                        <a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 text-base font-medium text-white transition-colors duration-150 transform sm:w-auto bg-gradient-to-r from-blue-700 to-blue-900 hover:from-blue-600 hover:to-blue-600">
+                            <svg class="w-6 h-6 mx-2 fill-current" viewBox="-28 0 512 512.00075" xmlns="http://www.w3.org/2000/svg"><path d="m432.320312 215.121094-361.515624-208.722656c-14.777344-8.53125-32.421876-8.53125-47.203126 0-.121093.070312-.230468.148437-.351562.21875-.210938.125-.421875.253906-.628906.390624-14.175782 8.636719-22.621094 23.59375-22.621094 40.269532v417.445312c0 17.066406 8.824219 32.347656 23.601562 40.878906 7.390626 4.265626 15.496094 6.398438 23.601563 6.398438s16.214844-2.132812 23.601563-6.398438l361.519531-208.722656c14.777343-8.53125 23.601562-23.8125 23.601562-40.878906s-8.824219-32.347656-23.605469-40.878906zm-401.941406 253.152344c-.21875-1.097657-.351562-2.273438-.351562-3.550782v-417.445312c0-2.246094.378906-4.203125.984375-5.90625l204.324219 213.121094zm43.824219-425.242188 234.21875 135.226562-52.285156 54.539063zm-6.480469 429.679688 188.410156-196.527344 54.152344 56.484375zm349.585938-201.835938-80.25 46.332031-60.125-62.714843 58.261718-60.773438 82.113282 47.40625c7.75 4.476562 8.589844 11.894531 8.589844 14.875s-.839844 10.398438-8.589844 14.875zm0 0"></path></svg>
+                            <span class="mx-2">
+                                Get it on Google Play
+                            </span> 
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>`
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/components/ui/CTA/Grid.vue b/components/ui/CTA/Grid.vue
new file mode 100644
index 0000000..f9d5d80
--- /dev/null
+++ b/components/ui/CTA/Grid.vue
@@ -0,0 +1,71 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <section class="bg-white dark:bg-gray-900">
+                <div class="container grid grid-cols-1 gap-8 px-4 py-12 mx-auto lg:grid-cols-2">
+                    <div class="flex flex-col items-center max-w-lg mx-auto text-center">
+                        <h2 class="text-3xl font-semibold tracking-tight text-gray-800 dark:text-white">
+                            Web development
+                        </h2>
+
+                        <p class="mt-3 text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure ex cupiditate corrupti aliquam eum vel consequuntur hic culpa unde natus officia enim est impedit consequatur aut, voluptatem minima repellat non!</p>
+                        
+                        <a href="#" class="inline-flex items-center justify-center w-full px-5 py-2 mt-6 text-white bg-blue-600 rounded-lg sm:w-auto hover:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
+                            Start now
+                        </a>
+                    </div>
+
+                    <div class="flex flex-col items-center max-w-lg mx-auto text-center">
+                        <h2 class="text-3xl font-semibold tracking-tight text-gray-800 dark:text-white">
+                            App development
+                        </h2>
+
+                        <p class="mt-3 text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure ex cupiditate corrupti aliquam eum vel consequuntur hic culpa unde natus officia enim est impedit consequatur aut, voluptatem minima repellat non!</p>
+                        
+                        <a href="#" class="inline-flex items-center justify-center w-full px-5 py-2 mt-6 text-gray-700 transition-colors duration-150 transform bg-white border border-gray-200 rounded-lg dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-100 dark:text-white sm:w-auto dark:hover:bg-gray-800 dark:ring-gray-700 focus:ring focus:ring-gray-200 focus:ring-opacity-80">
+                            Start now
+                        </a>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Grid',
+                code: `
+        <section class="bg-white dark:bg-gray-900">
+            <div class="container grid grid-cols-1 gap-8 px-4 py-12 mx-auto lg:grid-cols-2">
+                <div class="flex flex-col items-center max-w-lg mx-auto text-center">
+                    <h2 class="text-3xl font-semibold tracking-tight text-gray-800 dark:text-white">
+                        Web development
+                    </h2>
+
+                    <p class="mt-3 text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure ex cupiditate corrupti aliquam eum vel consequuntur hic culpa unde natus officia enim est impedit consequatur aut, voluptatem minima repellat non!</p>
+                    
+                    <a href="#" class="inline-flex items-center justify-center w-full px-5 py-2 mt-6 text-white bg-blue-600 rounded-lg sm:w-auto hover:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
+                        Start now
+                    </a>
+                </div>
+
+                <div class="flex flex-col items-center max-w-lg mx-auto text-center">
+                    <h2 class="text-3xl font-semibold tracking-tight text-gray-800 dark:text-white">
+                        App development
+                    </h2>
+
+                    <p class="mt-3 text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure ex cupiditate corrupti aliquam eum vel consequuntur hic culpa unde natus officia enim est impedit consequatur aut, voluptatem minima repellat non!</p>
+                    
+                    <a href="#" class="inline-flex items-center justify-center w-full px-5 py-2 mt-6 text-gray-700 transition-colors duration-150 transform bg-white border border-gray-200 rounded-lg dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-100 dark:text-white sm:w-auto dark:hover:bg-gray-800 dark:ring-gray-700 focus:ring focus:ring-gray-200 focus:ring-opacity-80">
+                        Start now
+                    </a>
+                </div>
+            </div>
+        </section>`
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/components/ui/CTA/Simple.vue b/components/ui/CTA/Simple.vue
new file mode 100644
index 0000000..e4d6250
--- /dev/null
+++ b/components/ui/CTA/Simple.vue
@@ -0,0 +1,59 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <section class="bg-white dark:bg-gray-900">
+                <div class="container flex flex-col items-center px-4 py-12 mx-auto text-center">
+                    <h2 class="text-3xl font-semibold tracking-tight text-gray-700 sm:text-4xl dark:text-white">
+                        Join us and get the update <br> from anywhere
+                    </h2>
+                    
+                    <div class="mt-6 sm:-mx-2">
+                        <div class="inline-flex w-full sm:w-auto sm:mx-2">
+                            <a href="#" class="inline-flex items-center justify-center w-full px-5 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
+                                Buy Blox Now
+                            </a>
+                        </div>
+
+                        <div class="inline-flex w-full mt-4 sm:w-auto sm:mx-2 sm:mt-0">
+                            <a href="#" class="inline-flex items-center justify-center w-full px-5 py-2 text-gray-700 transition-colors duration-150 transform bg-white border border-gray-200 rounded-lg dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-100 dark:text-white sm:w-auto dark:hover:bg-gray-800 dark:ring-gray-700 focus:ring focus:ring-gray-200 focus:ring-opacity-80">
+                                Start a Journey
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Simple',
+                code: `
+        <section class="bg-white dark:bg-gray-900">
+            <div class="container flex flex-col items-center px-4 py-12 mx-auto text-center">
+                <h2 class="text-3xl font-semibold tracking-tight text-gray-700 sm:text-4xl dark:text-white">
+                    Join us and get the update <br> from anywhere
+                </h2>
+                
+                <div class="mt-6 sm:-mx-2">
+                    <div class="inline-flex w-full sm:w-auto sm:mx-2">
+                        <a href="#" class="inline-flex items-center justify-center w-full px-5 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
+                            Buy Blox Now
+                        </a>
+                    </div>
+
+                    <div class="inline-flex w-full mt-4 sm:w-auto sm:mx-2 sm:mt-0">
+                        <a href="#" class="inline-flex items-center justify-center w-full px-5 py-2 text-gray-700 transition-colors duration-150 transform bg-white border border-gray-200 rounded-lg dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-100 dark:text-white sm:w-auto dark:hover:bg-gray-800 dark:ring-gray-700 focus:ring focus:ring-gray-200 focus:ring-opacity-80">
+                            Start a Journey
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>`
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/components/ui/CTA/WithForm.vue b/components/ui/CTA/WithForm.vue
new file mode 100644
index 0000000..cef4a0d
--- /dev/null
+++ b/components/ui/CTA/WithForm.vue
@@ -0,0 +1,55 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <section class="bg-white dark:bg-gray-900">
+                <div class="container px-4 py-16 mx-auto lg:flex lg:items-center lg:justify-between">
+                    <h2 class="text-3xl font-semibold tracking-tight text-gray-800 xl:text-4xl dark:text-white">
+                        Join us and get the update from anywhere
+                    </h2>
+                    
+                    <div class="mt-8 lg:mt-0">
+                        <div class="flex flex-col space-y-3 sm:space-y-0 sm:flex-row sm:-mx-2">
+                            <input id="email" type="text" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md sm:mx-2 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40" placeholder="Email Address">
+                            
+                            <button class="px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-700 rounded-md focus:ring focus:ring-blue-300 focus:ring-opacity-80 fo sm:mx-2 hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
+                                Get Started
+                            </button>
+                        </div>
+
+                        <p class="mt-3 text-sm text-gray-500 dark:text-gray-300">Attention! Offer expires in 30 days. Make sure not to miss this opportunity</p>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'With Form',
+                code: `
+        <section class="bg-white dark:bg-gray-900">
+            <div class="container px-4 py-16 mx-auto lg:flex lg:items-center lg:justify-between">
+                <h2 class="text-3xl font-semibold tracking-tight text-gray-800 xl:text-4xl dark:text-white">
+                    Join us and get the update from anywhere
+                </h2>
+                
+                <div class="mt-8 lg:mt-0">
+                    <div class="flex flex-col space-y-3 sm:space-y-0 sm:flex-row sm:-mx-2">
+                        <input id="email" type="text" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md sm:mx-2 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40" placeholder="Email Address">
+                        
+                        <button class="px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-700 rounded-md focus:ring focus:ring-blue-300 focus:ring-opacity-80 fo sm:mx-2 hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
+                            Get Started
+                        </button>
+                    </div>
+
+                    <p class="mt-3 text-sm text-gray-500 dark:text-gray-300">Attention! Offer expires in 30 days. Make sure not to miss this opportunity</p>
+                </div>
+            </div>
+        </section>`
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/components/ui/CTA/WithImage.vue b/components/ui/CTA/WithImage.vue
new file mode 100644
index 0000000..c7b24ef
--- /dev/null
+++ b/components/ui/CTA/WithImage.vue
@@ -0,0 +1,145 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <section class="bg-white dark:bg-gray-900">
+                <div class="container flex flex-col items-center px-4 py-12 mx-auto xl:flex-row">
+                    <div class="flex justify-center xl:w-1/2">
+                        <img class="h-80 w-80 sm:w-[28rem] sm:h-[28rem] flex-shrink-0 object-cover rounded-full" src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" alt="">
+                    </div>
+                    
+                    <div class="flex flex-col items-center mt-6 xl:items-start xl:w-1/2 xl:mt-0">
+                        <h2 class="text-3xl font-bold tracking-tight text-gray-800 xl:text-4xl dark:text-white">
+                            Download our free mobile app
+                        </h2>
+
+                        <p class="block max-w-2xl mt-4 text-xl text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto recusandae tenetur iste quaerat voluptatibus quibusdam nam repudiandae </p>
+                        
+                        <div class="mt-6 sm:-mx-2">
+                            <div class="inline-flex w-full overflow-hidden rounded-lg shadow sm:w-auto sm:mx-2">
+                                <a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 text-base font-medium text-white bg-gradient-to-r from-gray-700 to-gray-900 hover:from-gray-600 hover:to-gray-600 sm:w-auto">
+                                    <svg class="w-6 h-6 mx-2 fill-current" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
+                                        <g>
+                                            <g>
+                                                <path d="M407,0H105C47.103,0,0,47.103,0,105v302c0,57.897,47.103,105,105,105h302c57.897,0,105-47.103,105-105V105
+                                                    C512,47.103,464.897,0,407,0z M482,407c0,41.355-33.645,75-75,75H105c-41.355,0-75-33.645-75-75V105c0-41.355,33.645-75,75-75h302
+                                                    c41.355,0,75,33.645,75,75V407z"></path>
+                                            </g>
+                                        </g>
+                                        <g>
+                                            <g>
+                                                <path d="M305.646,123.531c-1.729-6.45-5.865-11.842-11.648-15.18c-11.936-6.892-27.256-2.789-34.15,9.151L256,124.166
+                                                    l-3.848-6.665c-6.893-11.937-22.212-16.042-34.15-9.151h-0.001c-11.938,6.893-16.042,22.212-9.15,34.151l18.281,31.664
+                                                    L159.678,291H110.5c-13.785,0-25,11.215-25,25c0,13.785,11.215,25,25,25h189.86l-28.868-50h-54.079l85.735-148.498
+                                                    C306.487,136.719,307.375,129.981,305.646,123.531z"></path>
+                                            </g>
+                                        </g>
+                                        <g>
+                                            <g>
+                                                <path d="M401.5,291h-49.178l-55.907-96.834l-28.867,50l86.804,150.348c3.339,5.784,8.729,9.921,15.181,11.65
+                                                    c2.154,0.577,4.339,0.863,6.511,0.863c4.332,0,8.608-1.136,12.461-3.361c11.938-6.893,16.042-22.213,9.149-34.15L381.189,341
+                                                    H401.5c13.785,0,25-11.215,25-25C426.5,302.215,415.285,291,401.5,291z"></path>
+                                            </g>
+                                        </g>
+                                        <g>
+                                            <g>
+                                                <path d="M119.264,361l-4.917,8.516c-6.892,11.938-2.787,27.258,9.151,34.15c3.927,2.267,8.219,3.345,12.458,3.344
+                                                    c8.646,0,17.067-4.484,21.693-12.495L176.999,361H119.264z"></path>
+                                            </g>
+                                        </g>
+                                    </svg>
+                                    <span class="mx-2">
+                                        Get it on the App Store
+                                    </span>
+                                </a>
+                            </div>
+
+                            <div class="inline-flex w-full mt-4 overflow-hidden rounded-lg shadow sm:w-auto sm:mx-2 sm:mt-0">
+                                <a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 text-base font-medium text-white transition-colors duration-150 transform sm:w-auto bg-gradient-to-r from-blue-700 to-blue-900 hover:from-blue-600 hover:to-blue-600">
+                                    <svg class="w-6 h-6 mx-2 fill-current" viewBox="-28 0 512 512.00075" xmlns="http://www.w3.org/2000/svg"><path d="m432.320312 215.121094-361.515624-208.722656c-14.777344-8.53125-32.421876-8.53125-47.203126 0-.121093.070312-.230468.148437-.351562.21875-.210938.125-.421875.253906-.628906.390624-14.175782 8.636719-22.621094 23.59375-22.621094 40.269532v417.445312c0 17.066406 8.824219 32.347656 23.601562 40.878906 7.390626 4.265626 15.496094 6.398438 23.601563 6.398438s16.214844-2.132812 23.601563-6.398438l361.519531-208.722656c14.777343-8.53125 23.601562-23.8125 23.601562-40.878906s-8.824219-32.347656-23.605469-40.878906zm-401.941406 253.152344c-.21875-1.097657-.351562-2.273438-.351562-3.550782v-417.445312c0-2.246094.378906-4.203125.984375-5.90625l204.324219 213.121094zm43.824219-425.242188 234.21875 135.226562-52.285156 54.539063zm-6.480469 429.679688 188.410156-196.527344 54.152344 56.484375zm349.585938-201.835938-80.25 46.332031-60.125-62.714843 58.261718-60.773438 82.113282 47.40625c7.75 4.476562 8.589844 11.894531 8.589844 14.875s-.839844 10.398438-8.589844 14.875zm0 0"></path></svg>
+                                    <span class="mx-2">
+                                        Get it on Google Play
+                                    </span> 
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'With Image',
+                code: `
+        <section class="bg-white dark:bg-gray-900">
+            <div class="container flex flex-col items-center px-4 py-12 mx-auto xl:flex-row">
+                <div class="flex justify-center xl:w-1/2">
+                    <img class="h-80 w-80 sm:w-[28rem] sm:h-[28rem] flex-shrink-0 object-cover rounded-full" src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" alt="">
+                </div>
+                
+                <div class="flex flex-col items-center mt-6 xl:items-start xl:w-1/2 xl:mt-0">
+                    <h2 class="text-3xl font-bold tracking-tight text-gray-800 xl:text-4xl dark:text-white">
+                        Download our free mobile app
+                    </h2>
+
+                    <p class="block max-w-2xl mt-4 text-xl text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto recusandae tenetur iste quaerat voluptatibus quibusdam nam repudiandae </p>
+                    
+                    <div class="mt-6 sm:-mx-2">
+                        <div class="inline-flex w-full overflow-hidden rounded-lg shadow sm:w-auto sm:mx-2">
+                            <a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 text-base font-medium text-white bg-gradient-to-r from-gray-700 to-gray-900 hover:from-gray-600 hover:to-gray-600 sm:w-auto">
+                                <svg class="w-6 h-6 mx-2 fill-current" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
+                                    <g>
+                                        <g>
+                                            <path d="M407,0H105C47.103,0,0,47.103,0,105v302c0,57.897,47.103,105,105,105h302c57.897,0,105-47.103,105-105V105
+                                                C512,47.103,464.897,0,407,0z M482,407c0,41.355-33.645,75-75,75H105c-41.355,0-75-33.645-75-75V105c0-41.355,33.645-75,75-75h302
+                                                c41.355,0,75,33.645,75,75V407z"></path>
+                                        </g>
+                                    </g>
+                                    <g>
+                                        <g>
+                                            <path d="M305.646,123.531c-1.729-6.45-5.865-11.842-11.648-15.18c-11.936-6.892-27.256-2.789-34.15,9.151L256,124.166
+                                                l-3.848-6.665c-6.893-11.937-22.212-16.042-34.15-9.151h-0.001c-11.938,6.893-16.042,22.212-9.15,34.151l18.281,31.664
+                                                L159.678,291H110.5c-13.785,0-25,11.215-25,25c0,13.785,11.215,25,25,25h189.86l-28.868-50h-54.079l85.735-148.498
+                                                C306.487,136.719,307.375,129.981,305.646,123.531z"></path>
+                                        </g>
+                                    </g>
+                                    <g>
+                                        <g>
+                                            <path d="M401.5,291h-49.178l-55.907-96.834l-28.867,50l86.804,150.348c3.339,5.784,8.729,9.921,15.181,11.65
+                                                c2.154,0.577,4.339,0.863,6.511,0.863c4.332,0,8.608-1.136,12.461-3.361c11.938-6.893,16.042-22.213,9.149-34.15L381.189,341
+                                                H401.5c13.785,0,25-11.215,25-25C426.5,302.215,415.285,291,401.5,291z"></path>
+                                        </g>
+                                    </g>
+                                    <g>
+                                        <g>
+                                            <path d="M119.264,361l-4.917,8.516c-6.892,11.938-2.787,27.258,9.151,34.15c3.927,2.267,8.219,3.345,12.458,3.344
+                                                c8.646,0,17.067-4.484,21.693-12.495L176.999,361H119.264z"></path>
+                                        </g>
+                                    </g>
+                                </svg>
+                                <span class="mx-2">
+                                    Get it on the App Store
+                                </span>
+                            </a>
+                        </div>
+
+                        <div class="inline-flex w-full mt-4 overflow-hidden rounded-lg shadow sm:w-auto sm:mx-2 sm:mt-0">
+                            <a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 text-base font-medium text-white transition-colors duration-150 transform sm:w-auto bg-gradient-to-r from-blue-700 to-blue-900 hover:from-blue-600 hover:to-blue-600">
+                                <svg class="w-6 h-6 mx-2 fill-current" viewBox="-28 0 512 512.00075" xmlns="http://www.w3.org/2000/svg"><path d="m432.320312 215.121094-361.515624-208.722656c-14.777344-8.53125-32.421876-8.53125-47.203126 0-.121093.070312-.230468.148437-.351562.21875-.210938.125-.421875.253906-.628906.390624-14.175782 8.636719-22.621094 23.59375-22.621094 40.269532v417.445312c0 17.066406 8.824219 32.347656 23.601562 40.878906 7.390626 4.265626 15.496094 6.398438 23.601563 6.398438s16.214844-2.132812 23.601563-6.398438l361.519531-208.722656c14.777343-8.53125 23.601562-23.8125 23.601562-40.878906s-8.824219-32.347656-23.605469-40.878906zm-401.941406 253.152344c-.21875-1.097657-.351562-2.273438-.351562-3.550782v-417.445312c0-2.246094.378906-4.203125.984375-5.90625l204.324219 213.121094zm43.824219-425.242188 234.21875 135.226562-52.285156 54.539063zm-6.480469 429.679688 188.410156-196.527344 54.152344 56.484375zm349.585938-201.835938-80.25 46.332031-60.125-62.714843 58.261718-60.773438 82.113282 47.40625c7.75 4.476562 8.589844 11.894531 8.589844 14.875s-.839844 10.398438-8.589844 14.875zm0 0"></path></svg>
+                                <span class="mx-2">
+                                    Get it on Google Play
+                                </span> 
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>`
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/components/ui/FAQ/Cards.vue b/components/ui/FAQ/Cards.vue
new file mode 100644
index 0000000..f81dc35
--- /dev/null
+++ b/components/ui/FAQ/Cards.vue
@@ -0,0 +1,159 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <section class="bg-white dark:bg-gray-900">
+                <div class="container px-6 py-12 mx-auto">
+                    <h1 class="text-4xl font-semibold text-gray-800 dark:text-white">Frequently asked questions</h1>
+
+                    <div class="mt-8 space-y-8 lg:mt-12">
+                        <div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
+                            <button class="flex items-center justify-between w-full">
+                                <h1 class="font-semibold text-gray-700 dark:text-white">How i can play for my appoinment ?</h1>
+
+                                <span class="text-gray-400 bg-gray-200 rounded-full">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
+                                    </svg>
+                                </span>
+                            </button>
+
+                            <p class="mt-6 text-sm text-gray-500 dark:text-gray-300">
+                                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas eaque nobis, fugit odit omnis fugiat deleniti animi ab maxime cum laboriosam recusandae facere dolorum veniam quia pariatur obcaecati illo ducimus?
+                            </p>
+                        </div>
+
+                        <div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
+                            <button class="flex items-center justify-between w-full">
+                                <h1 class="font-semibold text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance?</h1>
+
+                                <span class="text-white bg-blue-500 rounded-full">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                                    </svg>
+                                </span>
+                            </button>
+                        </div>
+
+                        <div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
+                            <button class="flex items-center justify-between w-full">
+                                <h1 class="font-semibold text-gray-700 dark:text-white">Do i need a referral?</h1>
+
+                                <span class="text-white bg-blue-500 rounded-full">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                                    </svg>
+                                </span>
+                            </button>
+                        </div>
+
+                        <div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
+                            <button class="flex items-center justify-between w-full">
+                                <h1 class="font-semibold text-gray-700 dark:text-white">What are your opening house?</h1>
+
+                                <span class="text-white bg-blue-500 rounded-full">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                                    </svg>
+                                </span>
+                            </button>
+                        </div>
+
+                        <div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
+                            <button class="flex items-center justify-between w-full">
+                                <h1 class="font-semibold text-gray-700 dark:text-white">What can i expect at my first consultation?</h1>
+
+                                <span class="text-white bg-blue-500 rounded-full">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                                    </svg>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Cards',
+                code: `
+        <section class="bg-white dark:bg-gray-900">
+            <div class="container px-6 py-12 mx-auto">
+                <h1 class="text-4xl font-semibold text-gray-800 dark:text-white">Frequently asked questions</h1>
+
+                <div class="mt-8 space-y-8 lg:mt-12">
+                    <div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
+                        <button class="flex items-center justify-between w-full">
+                            <h1 class="font-semibold text-gray-700 dark:text-white">How i can play for my appoinment ?</h1>
+
+                            <span class="text-gray-400 bg-gray-200 rounded-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
+                                </svg>
+                            </span>
+                        </button>
+
+                        <p class="mt-6 text-sm text-gray-500 dark:text-gray-300">
+                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas eaque nobis, fugit odit omnis fugiat deleniti animi ab maxime cum laboriosam recusandae facere dolorum veniam quia pariatur obcaecati illo ducimus?
+                        </p>
+                    </div>
+
+                    <div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
+                        <button class="flex items-center justify-between w-full">
+                            <h1 class="font-semibold text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance?</h1>
+
+                            <span class="text-white bg-blue-500 rounded-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+
+                    <div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
+                        <button class="flex items-center justify-between w-full">
+                            <h1 class="font-semibold text-gray-700 dark:text-white">Do i need a referral?</h1>
+
+                            <span class="text-white bg-blue-500 rounded-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+
+                    <div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
+                        <button class="flex items-center justify-between w-full">
+                            <h1 class="font-semibold text-gray-700 dark:text-white">What are your opening house?</h1>
+
+                            <span class="text-white bg-blue-500 rounded-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+
+                    <div class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
+                        <button class="flex items-center justify-between w-full">
+                            <h1 class="font-semibold text-gray-700 dark:text-white">What can i expect at my first consultation?</h1>
+
+                            <span class="text-white bg-blue-500 rounded-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>`
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/components/ui/FAQ/Centered.vue b/components/ui/FAQ/Centered.vue
new file mode 100644
index 0000000..e490671
--- /dev/null
+++ b/components/ui/FAQ/Centered.vue
@@ -0,0 +1,163 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <section class="bg-white dark:bg-gray-900">
+                <div class="container max-w-4xl px-6 py-10 mx-auto">
+                    <h1 class="text-4xl font-semibold text-center text-gray-800 dark:text-white">Frequently asked questions</h1>
+
+                    <div class="mt-12 space-y-8">
+                        <div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
+                            <button class="flex items-center justify-between w-full p-8">
+                                <h1 class="font-semibold text-gray-700 dark:text-white">How i can play for my appoinment ?</h1>
+
+                                <span class="text-gray-400 bg-gray-200 rounded-full">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
+                                    </svg>
+                                </span>
+                            </button>
+
+                            <hr class="border-gray-200 dark:border-gray-700">
+
+                            <p class="p-8 text-sm text-gray-500 dark:text-gray-300">
+                                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas eaque nobis, fugit odit omnis fugiat deleniti animi ab maxime cum laboriosam recusandae facere dolorum veniam quia pariatur obcaecati illo ducimus?
+                            </p>
+                        </div>
+
+                        <div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
+                            <button class="flex items-center justify-between w-full p-8">
+                                <h1 class="font-semibold text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance?</h1>
+
+                                <span class="text-white bg-blue-500 rounded-full">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                                    </svg>
+                                </span>
+                            </button>
+                        </div>
+
+                        <div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
+                            <button class="flex items-center justify-between w-full p-8">
+                                <h1 class="font-semibold text-gray-700 dark:text-white">Do i need a referral?</h1>
+
+                                <span class="text-white bg-blue-500 rounded-full">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                                    </svg>
+                                </span>
+                            </button>
+                        </div>
+
+                        <div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
+                            <button class="flex items-center justify-between w-full p-8">
+                                <h1 class="font-semibold text-gray-700 dark:text-white">What are your opening house?</h1>
+
+                                <span class="text-white bg-blue-500 rounded-full">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                                    </svg>
+                                </span>
+                            </button>
+                        </div>
+
+                        <div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
+                            <button class="flex items-center justify-between w-full p-8">
+                                <h1 class="font-semibold text-gray-700 dark:text-white">What can i expect at my first consultation?</h1>
+
+                                <span class="text-white bg-blue-500 rounded-full">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                                    </svg>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Centered',
+                code: `
+        <section class="bg-white dark:bg-gray-900">
+            <div class="container max-w-4xl px-6 py-10 mx-auto">
+                <h1 class="text-4xl font-semibold text-center text-gray-800 dark:text-white">Frequently asked questions</h1>
+
+                <div class="mt-12 space-y-8">
+                    <div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
+                        <button class="flex items-center justify-between w-full p-8">
+                            <h1 class="font-semibold text-gray-700 dark:text-white">How i can play for my appoinment ?</h1>
+
+                            <span class="text-gray-400 bg-gray-200 rounded-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
+                                </svg>
+                            </span>
+                        </button>
+
+                        <hr class="border-gray-200 dark:border-gray-700">
+
+                        <p class="p-8 text-sm text-gray-500 dark:text-gray-300">
+                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas eaque nobis, fugit odit omnis fugiat deleniti animi ab maxime cum laboriosam recusandae facere dolorum veniam quia pariatur obcaecati illo ducimus?
+                        </p>
+                    </div>
+
+                    <div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
+                        <button class="flex items-center justify-between w-full p-8">
+                            <h1 class="font-semibold text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance?</h1>
+
+                            <span class="text-white bg-blue-500 rounded-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+
+                    <div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
+                        <button class="flex items-center justify-between w-full p-8">
+                            <h1 class="font-semibold text-gray-700 dark:text-white">Do i need a referral?</h1>
+
+                            <span class="text-white bg-blue-500 rounded-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+
+                    <div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
+                        <button class="flex items-center justify-between w-full p-8">
+                            <h1 class="font-semibold text-gray-700 dark:text-white">What are your opening house?</h1>
+
+                            <span class="text-white bg-blue-500 rounded-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+
+                    <div class="border-2 border-gray-100 rounded-lg dark:border-gray-700">
+                        <button class="flex items-center justify-between w-full p-8">
+                            <h1 class="font-semibold text-gray-700 dark:text-white">What can i expect at my first consultation?</h1>
+
+                            <span class="text-white bg-blue-500 rounded-full">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>`
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/components/ui/FAQ/Collapse.vue b/components/ui/FAQ/Collapse.vue
new file mode 100644
index 0000000..32de705
--- /dev/null
+++ b/components/ui/FAQ/Collapse.vue
@@ -0,0 +1,163 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <section class="bg-white dark:bg-gray-900">
+                <div class="container px-6 py-10 mx-auto">
+                    <h1 class="text-4xl font-semibold text-gray-800 dark:text-white">FQA's</h1>
+
+                    <hr class="my-6 border-gray-200 dark:border-gray-700">
+
+                    <div>
+                        <div>
+                            <button class="flex items-center focus:outline-none">
+                                <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path></svg>
+
+                                <h1 class="mx-4 text-xl text-gray-700 dark:text-white">How i can play for my appoinment ?</h1>
+                            </button>
+
+                            <div class="flex mt-8 md:mx-10">
+                                <span class="border border-blue-500"></span>
+
+                                <p class="max-w-3xl px-4 text-gray-500 dark:text-gray-300">
+                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, eum quae. Harum officiis reprehenderit ex quia ducimus minima id provident molestias optio nam vel, quidem iure voluptatem, repellat et ipsa.
+                                </p>
+                            </div>
+                        </div>
+                        
+                        <hr class="my-8 border-gray-200 dark:border-gray-700">
+
+                        <div>
+                            <button class="flex items-center focus:outline-none">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                                </svg>
+
+                                <h1 class="mx-4 text-xl text-gray-700 dark:text-white">What can i expect at my first consultation ?</h1>
+                            </button>
+                        </div>
+
+                        <hr class="my-8 border-gray-200 dark:border-gray-700">
+
+                        <div>
+                            <button class="flex items-center focus:outline-none">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                                </svg>
+
+                                <h1 class="mx-4 text-xl text-gray-700 dark:text-white">What are your opening house ?</h1>
+                            </button>
+                        </div>
+
+                        <hr class="my-8 border-gray-200 dark:border-gray-700">
+
+                        <div>
+                            <button class="flex items-center focus:outline-none">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                                </svg>
+
+                                <h1 class="mx-4 text-xl text-gray-700 dark:text-white">Do i need a referral ?</h1>
+                            </button>
+                        </div>
+
+                        <hr class="my-8 border-gray-200 dark:border-gray-700">
+
+                        <div>
+                            <button class="flex items-center focus:outline-none">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                                </svg>
+
+                                <h1 class="mx-4 text-xl text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance ?</h1>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Collapse',
+                code: `
+        <section class="bg-white dark:bg-gray-900">
+            <div class="container px-6 py-10 mx-auto">
+                <h1 class="text-4xl font-semibold text-gray-800 dark:text-white">FQA's</h1>
+
+                <hr class="my-6 border-gray-200 dark:border-gray-700">
+
+                <div>
+                    <div>
+                        <button class="flex items-center focus:outline-none">
+                            <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path></svg>
+
+                            <h1 class="mx-4 text-xl text-gray-700 dark:text-white">How i can play for my appoinment ?</h1>
+                        </button>
+
+                        <div class="flex mt-8 md:mx-10">
+                            <span class="border border-blue-500"></span>
+
+                            <p class="max-w-3xl px-4 text-gray-500 dark:text-gray-300">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, eum quae. Harum officiis reprehenderit ex quia ducimus minima id provident molestias optio nam vel, quidem iure voluptatem, repellat et ipsa.
+                            </p>
+                        </div>
+                    </div>
+                    
+                    <hr class="my-8 border-gray-200 dark:border-gray-700">
+
+                    <div>
+                        <button class="flex items-center focus:outline-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                            </svg>
+
+                            <h1 class="mx-4 text-xl text-gray-700 dark:text-white">What can i expect at my first consultation ?</h1>
+                        </button>
+                    </div>
+
+                    <hr class="my-8 border-gray-200 dark:border-gray-700">
+
+                    <div>
+                        <button class="flex items-center focus:outline-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                            </svg>
+
+                            <h1 class="mx-4 text-xl text-gray-700 dark:text-white">What are your opening house ?</h1>
+                        </button>
+                    </div>
+
+                    <hr class="my-8 border-gray-200 dark:border-gray-700">
+
+                    <div>
+                        <button class="flex items-center focus:outline-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                            </svg>
+
+                            <h1 class="mx-4 text-xl text-gray-700 dark:text-white">Do i need a referral ?</h1>
+                        </button>
+                    </div>
+
+                    <hr class="my-8 border-gray-200 dark:border-gray-700">
+
+                    <div>
+                        <button class="flex items-center focus:outline-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                            </svg>
+
+                            <h1 class="mx-4 text-xl text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance ?</h1>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>`
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/components/ui/FAQ/CollapseWithSideLinks.vue b/components/ui/FAQ/CollapseWithSideLinks.vue
new file mode 100644
index 0000000..f49f185
--- /dev/null
+++ b/components/ui/FAQ/CollapseWithSideLinks.vue
@@ -0,0 +1,187 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <section class="bg-white dark:bg-gray-900">
+                <div class="container px-6 py-12 mx-auto">
+                    <h1 class="text-2xl font-semibold text-center text-gray-800 lg:text-4xl dark:text-white">Have any Questions?</h1>
+
+                    <div class="mt-8 xl:mt-16 lg:flex lg:-mx-12">
+                        <div class="lg:mx-12">
+                            <h1 class="text-xl font-semibold text-gray-800 dark:text-white">Table of Content</h1>
+                            
+                            <div class="mt-4 space-y-4 lg:mt-8">
+                                <a href="#" class="block text-blue-500 dark:text-blue-400 hover:underline">General</a>
+                                <a href="#" class="block text-gray-500 dark:text-gray-300 hover:underline">Trust & Safety</a>
+                                <a href="#" class="block text-gray-500 dark:text-gray-300 hover:underline">Services</a>
+                                <a href="#" class="block text-gray-500 dark:text-gray-300 hover:underline">Billing</a>
+                                <a href="#" class="block text-gray-500 dark:text-gray-300 hover:underline">Office Cleaning</a>
+                            </div>
+                        </div>
+                        
+                        <div class="flex-1 mt-8 lg:mx-12 lg:mt-0">
+                            <div>
+                                <button class="flex items-center focus:outline-none">
+                                    <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path></svg>
+
+                                    <h1 class="mx-4 text-xl text-gray-700 dark:text-white">How i can play for my appoinment ?</h1>
+                                </button>
+
+                                <div class="flex mt-8 md:mx-10">
+                                    <span class="border border-blue-500"></span>
+
+                                    <p class="max-w-3xl px-4 text-gray-500 dark:text-gray-300">
+                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, eum quae. Harum officiis reprehenderit ex quia ducimus minima id provident molestias optio nam vel, quidem iure voluptatem, repellat et ipsa.
+                                    </p>
+                                </div>
+                            </div>
+                            
+                            <hr class="my-8 border-gray-200 dark:border-gray-700">
+
+                            <div>
+                                <button class="flex items-center focus:outline-none">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                                    </svg>
+
+                                    <h1 class="mx-4 text-xl text-gray-700 dark:text-white">What can i expect at my first consultation ?</h1>
+                                </button>
+                            </div>
+
+                            <hr class="my-8 border-gray-200 dark:border-gray-700">
+
+                            <div>
+                                <button class="flex items-center focus:outline-none">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                                    </svg>
+
+                                    <h1 class="mx-4 text-xl text-gray-700 dark:text-white">What are your opening house ?</h1>
+                                </button>
+                            </div>
+
+                            <hr class="my-8 border-gray-200 dark:border-gray-700">
+
+                            <div>
+                                <button class="flex items-center focus:outline-none">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                                    </svg>
+
+                                    <h1 class="mx-4 text-xl text-gray-700 dark:text-white">Do i need a referral ?</h1>
+                                </button>
+                            </div>
+
+                            <hr class="my-8 border-gray-200 dark:border-gray-700">
+
+                            <div>
+                                <button class="flex items-center focus:outline-none">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                                    </svg>
+
+                                    <h1 class="mx-4 text-xl text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance ?</h1>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Collapse With Side Links',
+                code: `
+        <section class="bg-white dark:bg-gray-900">
+            <div class="container px-6 py-12 mx-auto">
+                <h1 class="text-2xl font-semibold text-center text-gray-800 lg:text-4xl dark:text-white">Have any Questions?</h1>
+
+                <div class="mt-8 xl:mt-16 lg:flex lg:-mx-12">
+                    <div class="lg:mx-12">
+                        <h1 class="text-xl font-semibold text-gray-800 dark:text-white">Table of Content</h1>
+                        
+                        <div class="mt-4 space-y-4 lg:mt-8">
+                            <a href="#" class="block text-blue-500 dark:text-blue-400 hover:underline">General</a>
+                            <a href="#" class="block text-gray-500 dark:text-gray-300 hover:underline">Trust & Safety</a>
+                            <a href="#" class="block text-gray-500 dark:text-gray-300 hover:underline">Services</a>
+                            <a href="#" class="block text-gray-500 dark:text-gray-300 hover:underline">Billing</a>
+                            <a href="#" class="block text-gray-500 dark:text-gray-300 hover:underline">Office Cleaning</a>
+                        </div>
+                    </div>
+                    
+                    <div class="flex-1 mt-8 lg:mx-12 lg:mt-0">
+                        <div>
+                            <button class="flex items-center focus:outline-none">
+                                <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path></svg>
+
+                                <h1 class="mx-4 text-xl text-gray-700 dark:text-white">How i can play for my appoinment ?</h1>
+                            </button>
+
+                            <div class="flex mt-8 md:mx-10">
+                                <span class="border border-blue-500"></span>
+
+                                <p class="max-w-3xl px-4 text-gray-500 dark:text-gray-300">
+                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, eum quae. Harum officiis reprehenderit ex quia ducimus minima id provident molestias optio nam vel, quidem iure voluptatem, repellat et ipsa.
+                                </p>
+                            </div>
+                        </div>
+                        
+                        <hr class="my-8 border-gray-200 dark:border-gray-700">
+
+                        <div>
+                            <button class="flex items-center focus:outline-none">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                                </svg>
+
+                                <h1 class="mx-4 text-xl text-gray-700 dark:text-white">What can i expect at my first consultation ?</h1>
+                            </button>
+                        </div>
+
+                        <hr class="my-8 border-gray-200 dark:border-gray-700">
+
+                        <div>
+                            <button class="flex items-center focus:outline-none">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                                </svg>
+
+                                <h1 class="mx-4 text-xl text-gray-700 dark:text-white">What are your opening house ?</h1>
+                            </button>
+                        </div>
+
+                        <hr class="my-8 border-gray-200 dark:border-gray-700">
+
+                        <div>
+                            <button class="flex items-center focus:outline-none">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                                </svg>
+
+                                <h1 class="mx-4 text-xl text-gray-700 dark:text-white">Do i need a referral ?</h1>
+                            </button>
+                        </div>
+
+                        <hr class="my-8 border-gray-200 dark:border-gray-700">
+
+                        <div>
+                            <button class="flex items-center focus:outline-none">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                                </svg>
+
+                                <h1 class="mx-4 text-xl text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance ?</h1>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>`
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/components/ui/FAQ/Grid.vue b/components/ui/FAQ/Grid.vue
new file mode 100644
index 0000000..7bcd714
--- /dev/null
+++ b/components/ui/FAQ/Grid.vue
@@ -0,0 +1,223 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <section class="bg-white dark:bg-gray-900">
+                <div class="container px-6 py-12 mx-auto">
+                    <h1 class="text-2xl font-semibold text-gray-800 lg:text-4xl dark:text-white">Frequently asked questions.</h1>
+                    
+                    <div class="grid grid-cols-1 gap-8 mt-8 lg:mt-16 md:grid-cols-2 xl:grid-cols-3">
+                        <div>
+                            <div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                            </div>
+
+                            <div>
+                                <h1 class="text-xl font-semibold text-gray-700 dark:text-white">What can i expect at my first consultation?</h1>
+
+                                <p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
+                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
+                                </p>
+                            </div>
+                        </div>
+
+                        <div>
+                            <div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                            </div>
+
+                            <div>
+                                <h1 class="text-xl font-semibold text-gray-700 dark:text-white">What are your opening house?</h1>
+
+                                <p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
+                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
+                                </p>
+                            </div>
+                        </div>
+
+                        <div>
+                            <div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                            </div>
+
+                            <div>
+                                <h1 class="text-xl font-semibold text-gray-700 dark:text-white">Do i need a referral?</h1>
+
+                                <p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
+                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
+                                </p>
+                            </div>
+                        </div>
+
+                        <div>
+                            <div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                            </div>
+
+                            <div>
+                                <h1 class="text-xl font-semibold text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance?</h1>
+
+                                <p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
+                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
+                                </p>
+                            </div>
+                        </div>
+
+                        <div>
+                            <div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                            </div>
+
+                            <div>
+                                <h1 class="text-xl font-semibold text-gray-700 dark:text-white">What is your cancellation policy?</h1>
+
+                                <p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
+                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
+                                </p>
+                            </div>
+                        </div>
+
+                        <div>
+                            <div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                            </div>
+
+                            <div>
+                                <h1 class="text-xl font-semibold text-gray-700 dark:text-white">What are the parking and public transport options?</h1>
+
+                                <p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
+                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Grid',
+                code: `
+        <section class="bg-white dark:bg-gray-900">
+            <div class="container px-6 py-12 mx-auto">
+                <h1 class="text-2xl font-semibold text-gray-800 lg:text-4xl dark:text-white">Frequently asked questions.</h1>
+                
+                <div class="grid grid-cols-1 gap-8 mt-8 lg:mt-16 md:grid-cols-2 xl:grid-cols-3">
+                    <div>
+                        <div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                        </div>
+
+                        <div>
+                            <h1 class="text-xl font-semibold text-gray-700 dark:text-white">What can i expect at my first consultation?</h1>
+
+                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div>
+                        <div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                        </div>
+
+                        <div>
+                            <h1 class="text-xl font-semibold text-gray-700 dark:text-white">What are your opening house?</h1>
+
+                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div>
+                        <div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                        </div>
+
+                        <div>
+                            <h1 class="text-xl font-semibold text-gray-700 dark:text-white">Do i need a referral?</h1>
+
+                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div>
+                        <div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                        </div>
+
+                        <div>
+                            <h1 class="text-xl font-semibold text-gray-700 dark:text-white">Is the cost of the appoinment covered by private health insurance?</h1>
+
+                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div>
+                        <div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                        </div>
+
+                        <div>
+                            <h1 class="text-xl font-semibold text-gray-700 dark:text-white">What is your cancellation policy?</h1>
+
+                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div>
+                        <div class="inline-block p-3 text-white bg-blue-600 rounded-lg">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                        </div>
+
+                        <div>
+                            <h1 class="text-xl font-semibold text-gray-700 dark:text-white">What are the parking and public transport options?</h1>
+
+                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-300">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident placeat, consequatur eveniet veritatis quos dignissimos beatae dolores exercitationem laboriosam officia magnam atque blanditiis illum doloremque magni ex corrupti tempora quis.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>`
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/models/Components.js b/models/Components.js
index 36ddff4..90fb228 100644
--- a/models/Components.js
+++ b/models/Components.js
@@ -16,11 +16,12 @@ export default [
     },
     {
         name: "Authentication",
-        new: false,
+        new: true,
         components: [
             { name: "SimpleLogin" },
             { name: "LoginWithSocialMediaLinks" },
             { name: "LoginWithSideImage" },
+            { name: "FullPageWithImage" },
         ],
     },
     {
@@ -61,14 +62,25 @@ export default [
         ],
     },
     {
-        name: "Forms",
-        new: false,
+        name: "CTA",
+        new: true,
         components: [
             { name: "Simple" },
-            { name: "Search" },
-            { name: "Contact" },
-            { name: "SimpleNewsletter" },
-            { name: "Newsletter" },
+            { name: "Centered" },
+            { name: "Grid" },
+            { name: "WithForm" },
+            { name: "WithImage" },
+        ],
+    },
+    {
+        name: "FAQ",
+        new: true,
+        components: [
+            { name: "Centered" },
+            { name: "Cards" },
+            { name: "Grid" },
+            { name: "Collapse" },
+            { name: "CollapseWithSideLinks" },
         ],
     },
     {
@@ -84,6 +96,17 @@ export default [
             { name: "TrustedBy" },
         ],
     },
+    {
+        name: "Forms",
+        new: false,
+        components: [
+            { name: "Simple" },
+            { name: "Search" },
+            { name: "Contact" },
+            { name: "SimpleNewsletter" },
+            { name: "Newsletter" },
+        ],
+    },
     {
         name: "Dropdowns",
         new: false,
diff --git a/pages/components.vue b/pages/components.vue
index 822eec6..16db18d 100644
--- a/pages/components.vue
+++ b/pages/components.vue
@@ -105,6 +105,7 @@ import AlertsErrorFullWidth from "~/components/ui/Alerts/ErrorFullWidth";
 import AuthenticationSimpleLogin from "~/components/ui/Authentication/SimpleLogin";
 import AuthenticationLoginWithSocialMediaLinks from "~/components/ui/Authentication/LoginWithSocialMediaLinks";
 import AuthenticationLoginWithSideImage from "~/components/ui/Authentication/LoginWithSideImage";
+import AuthenticationFullPageWithImage from "~/components/ui/Authentication/FullPageWithImage";
 // Breadcrumbs
 import BreadcrumbsSimple from "~/components/ui/Breadcrumbs/Simple";
 import BreadcrumbsWithArrow from "~/components/ui/Breadcrumbs/WithArrow";
@@ -127,6 +128,12 @@ import CardsSimpleProduct from "~/components/ui/Cards/SimpleProduct";
 import CardsTestimonial from "~/components/ui/Cards/Testimonial";
 import CardsUser from "~/components/ui/Cards/User";
 import CardsUserWithDetails from "~/components/ui/Cards/UserWithDetails";
+// CTA
+import CTACentered from "~/components/ui/CTA/Centered";
+import CTAGrid from "~/components/ui/CTA/Grid";
+import CTASimple from "~/components/ui/CTA/Simple";
+import CTAWithForm from "~/components/ui/CTA/WithForm";
+import CTAWithImage from "~/components/ui/CTA/WithImage";
 // Dropdowns
 import DropdownsSimple from "~/components/ui/Dropdowns/Simple";
 import DropdownsMultiLevel from "~/components/ui/Dropdowns/MultiLevel";
@@ -134,6 +141,12 @@ import DropdownsMultiLevelWithIcons from "~/components/ui/Dropdowns/MultiLevelWi
 import DropdownsUserInfo from "~/components/ui/Dropdowns/UserInfo";
 import DropdownsUserInfoWithIcons from "~/components/ui/Dropdowns/UserInfoWithIcons";
 import DropdownsNotification from "~/components/ui/Dropdowns/Notification";
+// FAQ
+import FAQCards from "~/components/ui/FAQ/Cards";
+import FAQCentered from "~/components/ui/FAQ/Centered";
+import FAQCollapse from "~/components/ui/FAQ/Collapse";
+import FAQCollapseWithSideLinks from "~/components/ui/FAQ/CollapseWithSideLinks";
+import FAQGrid from "~/components/ui/FAQ/Grid";
 // Forms
 import FormsNewsletter from "~/components/ui/Forms/Newsletter";
 import FormsSimpleNewsletter from "~/components/ui/Forms/SimpleNewsletter";
@@ -225,6 +238,7 @@ export default {
         AuthenticationSimpleLogin,
         AuthenticationLoginWithSocialMediaLinks,
         AuthenticationLoginWithSideImage,
+        AuthenticationFullPageWithImage,
         BreadcrumbsSimple,
         BreadcrumbsWithArrow,
         BreadcrumbsWithIcons,
@@ -244,12 +258,22 @@ export default {
         CardsTestimonial,
         CardsUser,
         CardsUserWithDetails,
+        CTACentered,
+        CTAGrid,
+        CTASimple,
+        CTAWithForm,
+        CTAWithImage,
         DropdownsSimple,
         DropdownsMultiLevel,
         DropdownsMultiLevelWithIcons,
         DropdownsUserInfo,
         DropdownsUserInfoWithIcons,
         DropdownsNotification,
+        FAQCards,
+        FAQCentered,
+        FAQCollapse,
+        FAQCollapseWithSideLinks,
+        FAQGrid,
         FormsNewsletter,
         FormsSimpleNewsletter,
         FormsSimple,