diff --git a/libs/blocks/src/lib/accordion/accordion.spec.tsx b/libs/blocks/src/lib/accordion/accordion.spec.tsx
index 981025386..4e7b96234 100644
--- a/libs/blocks/src/lib/accordion/accordion.spec.tsx
+++ b/libs/blocks/src/lib/accordion/accordion.spec.tsx
@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import AccordionBlock from '.';
-import { StandaloneAndroidIcon } from '@deriv/quill-icons';
+import { StandaloneAndroidIcon } from '@deriv/quill-icons/Standalone';
 
 const childTitle = 'This is the title';
 const subTitle = 'Subtitle goes here';
diff --git a/libs/blocks/src/lib/accordion/accordion.stories.tsx b/libs/blocks/src/lib/accordion/accordion.stories.tsx
index cb7190f3d..25303ea4f 100644
--- a/libs/blocks/src/lib/accordion/accordion.stories.tsx
+++ b/libs/blocks/src/lib/accordion/accordion.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import AccordionBlock from '.';
-import { StandaloneAndroidIcon } from '@deriv/quill-icons';
+import { StandaloneAndroidIcon } from '@deriv/quill-icons/Standalone';
 
 const meta = {
   title: 'Blocks/Accordion',
diff --git a/libs/blocks/src/lib/fast-payment/base/base.spec.tsx b/libs/blocks/src/lib/fast-payment/base/base.spec.tsx
index faa0d8897..379cbf8a1 100644
--- a/libs/blocks/src/lib/fast-payment/base/base.spec.tsx
+++ b/libs/blocks/src/lib/fast-payment/base/base.spec.tsx
@@ -4,7 +4,7 @@ import {
   FlagAndorraIcon,
   FlagAustraliaIcon,
   FlagBurkinaFasoIcon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Flags';
 import Base from './index';
 
 describe('FastPayment', () => {
diff --git a/libs/blocks/src/lib/features/card-feature/card-feature.spec.tsx b/libs/blocks/src/lib/features/card-feature/card-feature.spec.tsx
index 6c561695c..1304718d9 100644
--- a/libs/blocks/src/lib/features/card-feature/card-feature.spec.tsx
+++ b/libs/blocks/src/lib/features/card-feature/card-feature.spec.tsx
@@ -7,7 +7,7 @@ import {
   IllustrativeProtectedAndSecureIcon,
   IllustrativeSpreadsIcon,
   IllustrativeSupport247Icon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Illustrative';
 import { CardContent } from '@deriv-com/components';
 
 const cards: CardContent[] = [
diff --git a/libs/blocks/src/lib/features/card-feature/card-feature.stories.tsx b/libs/blocks/src/lib/features/card-feature/card-feature.stories.tsx
index 27b20a5b9..00ef0b9bd 100644
--- a/libs/blocks/src/lib/features/card-feature/card-feature.stories.tsx
+++ b/libs/blocks/src/lib/features/card-feature/card-feature.stories.tsx
@@ -6,7 +6,7 @@ import {
   IllustrativeProtectedAndSecureIcon,
   IllustrativeSpreadsIcon,
   IllustrativeSupport247Icon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Illustrative';
 
 const meta = {
   title: 'Blocks/Features/Card',
diff --git a/libs/blocks/src/lib/features/content-slider/content-slider.stories.tsx b/libs/blocks/src/lib/features/content-slider/content-slider.stories.tsx
index 8a43cec3d..d60ceda1f 100644
--- a/libs/blocks/src/lib/features/content-slider/content-slider.stories.tsx
+++ b/libs/blocks/src/lib/features/content-slider/content-slider.stories.tsx
@@ -7,7 +7,7 @@ import {
   IllustrativeProtectedAndSecureIcon,
   IllustrativeSpreadsIcon,
   IllustrativeSupport247Icon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Illustrative';
 
 const meta = {
   title: 'Blocks/Features/ContentSlider',
diff --git a/libs/blocks/src/lib/footer/footer-block.tsx b/libs/blocks/src/lib/footer/footer-block.tsx
index 37b6b27f1..1af6ec828 100644
--- a/libs/blocks/src/lib/footer/footer-block.tsx
+++ b/libs/blocks/src/lib/footer/footer-block.tsx
@@ -1,5 +1,5 @@
 import { FluidContainer, Section, Text } from '@deriv/quill-design';
-import { BrandDerivWordmarkSlateIcon } from '@deriv/quill-icons';
+import { BrandDerivWordmarkSlateIcon } from '@deriv/quill-icons/Logo';
 import clsx from 'clsx';
 import { ReactNode } from 'react';
 import { SocialMediaSection } from './footer.social';
diff --git a/libs/blocks/src/lib/footer/footer.stories.tsx b/libs/blocks/src/lib/footer/footer.stories.tsx
index a7d7b8add..1dbd2a133 100644
--- a/libs/blocks/src/lib/footer/footer.stories.tsx
+++ b/libs/blocks/src/lib/footer/footer.stories.tsx
@@ -3,7 +3,7 @@ import {
   StandaloneAppleIcon,
   StandaloneFacebookIcon,
   StandaloneInstagramIcon,
-} from '@deriv/quill-icons';
+} from '@deriv/quill-icons/Standalone';
 import Footer from '.';
 
 const meta = {
diff --git a/libs/blocks/src/lib/live-market/index.tsx b/libs/blocks/src/lib/live-market/index.tsx
index d41eddfdb..aa4302e1a 100644
--- a/libs/blocks/src/lib/live-market/index.tsx
+++ b/libs/blocks/src/lib/live-market/index.tsx
@@ -5,7 +5,7 @@ import {
   CustomLink,
 } from '@deriv-com/components';
 import { FluidContainer, Section, Text, qtMerge } from '@deriv/quill-design';
-import { StandaloneChevronRightRegularIcon } from '@deriv/quill-icons';
+import { StandaloneChevronRightRegularIcon } from '@deriv/quill-icons/Standalone';
 import clsx from 'clsx';
 import { ReactNode } from 'react';
 import { HeaderSection } from './header-section';
diff --git a/libs/components/src/lib/card-slider/index.tsx b/libs/components/src/lib/card-slider/index.tsx
index 3ce65c478..cd8b0de11 100644
--- a/libs/components/src/lib/card-slider/index.tsx
+++ b/libs/components/src/lib/card-slider/index.tsx
@@ -1,10 +1,10 @@
 import clsx from 'clsx';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Pagination, SwiperOptions } from 'swiper';
 import 'swiper/css';
 import 'swiper/css/pagination';
 import { qtMerge } from '@deriv/quill-design';
 import Card, { CardVariants } from '../card';
+import { SwiperOptions } from 'swiper/types';
 
 type CardVariantType = keyof CardVariants;
 
@@ -46,7 +46,6 @@ export const CardSlider = <T extends CardVariantType>({
     <div className="flex w-full justify-center">
       <Swiper
         className={qtMerge(className)}
-        modules={[Pagination]}
         slidesPerView={slidesPerView}
         spaceBetween={spaceBetween}
         breakpoints={breakpoints}
diff --git a/libs/templates/src/lib/home/sections/hero/data.tsx b/libs/templates/src/lib/home/sections/hero/data.tsx
index dae87809a..e6a728919 100644
--- a/libs/templates/src/lib/home/sections/hero/data.tsx
+++ b/libs/templates/src/lib/home/sections/hero/data.tsx
@@ -1,5 +1,7 @@
 import { OptimizedImage } from '@deriv-com/components';
 import { Swiper, SwiperSlide } from 'swiper/react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import { Autoplay, EffectFade } from 'swiper';
 import { ReactNode } from 'react';
 import { Button, FluidContainer, Text } from '@deriv/quill-design';
diff --git a/package-lock.json b/package-lock.json
index dababb484..493042624 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
       "version": "0.0.0",
       "license": "MIT",
       "dependencies": {
-        "@deriv/quill-design": "^1.0.21",
-        "@deriv/quill-icons": "^1.0.6",
+        "@deriv/quill-design": "^1.0.31",
+        "@deriv/quill-icons": "^1.0.9",
         "@nx/next": "16.8.1",
         "@react-hook/window-size": "^3.1.1",
         "@swc/helpers": "~0.5.0",
@@ -2542,23 +2542,24 @@
       }
     },
     "node_modules/@deriv/quill-design": {
-      "version": "1.0.21",
-      "resolved": "https://registry.npmjs.org/@deriv/quill-design/-/quill-design-1.0.21.tgz",
-      "integrity": "sha512-4+0YFjKLuqEDKfTm9wSmIa6rr/DnUcdZ+dg0EJxoRlbcIt5QUsP/1PjJanTn7rCw++UahakywrXZBvcCnRhPvg==",
+      "version": "1.0.31",
+      "resolved": "https://registry.npmjs.org/@deriv/quill-design/-/quill-design-1.0.31.tgz",
+      "integrity": "sha512-nwCbpPQge8D6kXrC6Gw8V/RV4uFV0GQ70y8oqJk6I40ZeUunpsYOX7poVZVboYsm4FjYxAh7Ft9DJjGaYlVTSw==",
       "peerDependencies": {
-        "@deriv/quill-icons": "^1.0.5",
-        "@types/react": "^18.x",
+        "@deriv/quill-icons": "^1.0.9",
+        "@headlessui/react": "^1.7.17",
+        "@types/react": "^17.x || ^18.x",
         "class-variance-authority": "^0.7.0",
-        "react": "^18.x",
-        "react-dom": "^18.x",
+        "react": "^17.x || ^18.x",
+        "react-dom": "^17.x || ^18.x",
         "tailwind-merge": "^1.14.0",
         "usehooks-ts": "^2.9.1"
       }
     },
     "node_modules/@deriv/quill-icons": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.0.6.tgz",
-      "integrity": "sha512-RswfEaybC7w2A/rKNP/3J7iIhCgt6adL0pH0lYCoA7OFhIgao9uBnu5s/2375Lc0S8mED6/4v4r2oM0j/fkv8Q==",
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.0.9.tgz",
+      "integrity": "sha512-BqC5/u1kwVSscRmboiKNHadeNmNaMT6etBqeLADJ9881vlmirzLhEhY5igSrPUaflyyEPpUNTamDBMUm9DKxww==",
       "peerDependencies": {
         "react": ">= 16",
         "react-dom": ">= 16"
@@ -3113,6 +3114,22 @@
       "integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA==",
       "dev": true
     },
+    "node_modules/@headlessui/react": {
+      "version": "1.7.17",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.17.tgz",
+      "integrity": "sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==",
+      "peer": true,
+      "dependencies": {
+        "client-only": "^0.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.11",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
diff --git a/package.json b/package.json
index 786e34ac7..de378fd5b 100644
--- a/package.json
+++ b/package.json
@@ -20,13 +20,13 @@
   },
   "private": true,
   "dependencies": {
-    "@deriv/quill-design": "^1.0.21",
-    "@deriv/quill-icons": "^1.0.6",
+    "@deriv/quill-design": "^1.0.31",
+    "@deriv/quill-icons": "^1.0.9",
     "@nx/next": "16.8.1",
     "@react-hook/window-size": "^3.1.1",
     "@swc/helpers": "~0.5.0",
-    "closest-match": "^1.3.3",
     "@tanstack/react-table": "^8.10.7",
+    "closest-match": "^1.3.3",
     "clsx": "^2.0.0",
     "next": "13.4.19",
     "next-image-export-optimizer": "^1.8.5",
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 024b90e36..c3233f994 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -4,47 +4,27 @@
     "rootDir": ".",
     "sourceMap": true,
     "declaration": false,
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
     "target": "es2015",
     "module": "esnext",
     "resolveJsonModule": true,
-    "lib": [
-      "es2020",
-      "dom"
-    ],
+    "lib": ["es2020", "dom"],
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "strictNullChecks": true,
     "baseUrl": ".",
     "paths": {
-      "@deriv-com/blocks": [
-        "libs/blocks/src/index.ts"
-      ],
-      "@deriv-com/components": [
-        "libs/components/src/index.ts"
-      ],
-      "@deriv-com/features": [
-        "libs/features/src/index.ts"
-      ],
-      "@deriv-com/hooks": [
-        "libs/hooks/src/index.ts"
-      ],
-      "@deriv-com/providers": [
-        "libs/providers/src/index.ts"
-      ],
-      "@deriv-com/templates": [
-        "libs/templates/src/index.ts"
-      ],
-      "@deriv-com/utils": [
-        "libs/utils/src/index.ts"
-      ]
+      "@deriv-com/blocks": ["libs/blocks/src/index.ts"],
+      "@deriv-com/components": ["libs/components/src/index.ts"],
+      "@deriv-com/features": ["libs/features/src/index.ts"],
+      "@deriv-com/hooks": ["libs/hooks/src/index.ts"],
+      "@deriv-com/providers": ["libs/providers/src/index.ts"],
+      "@deriv-com/templates": ["libs/templates/src/index.ts"],
+      "@deriv-com/utils": ["libs/utils/src/index.ts"]
     }
   },
-  "exclude": [
-    "node_modules",
-    "tmp"
-  ]
+  "exclude": ["node_modules", "tmp"]
 }