diff --git a/components/TopBar/CategoryDescriptions.ts b/components/TopBar/CategoryDescriptions.ts
index af6eae187..218d43b02 100644
--- a/components/TopBar/CategoryDescriptions.ts
+++ b/components/TopBar/CategoryDescriptions.ts
@@ -38,6 +38,8 @@ const categoryDescriptions: CategoryDescriptions = {
     'The UI Generator, or User Interface Generator, is an Eclipse tool that takes a user model and generates a role-based user interface for a J2EE Web application.',
   'online code editors':
     "Online code editors, also called cloud-based code editors, are convenient because they usually require no setup. Plus, it's way easier to collaborate with someone over the cloud.",
+  'ui libraries':
+    'UI libraries are collections of reusable components that can be used to build user interfaces. They are often used in conjunction with frameworks like React or Vue.js to create web applications.',
 
   //backend
   architecture:
@@ -81,11 +83,12 @@ const categoryDescriptions: CategoryDescriptions = {
   // Open-source
   articles:
     'There are many open source blogging platforms available for developers. Some of the most popular ones include WordPress, Joomla, and Drupal1. Other open source blogging platforms include Ghost, Serendipity, SilverStripe, and Jekyll',
- projects:
+  projects:
     'Anyone can contribute to the projects are called OpenSource Projects. There are many open source projects available for developers. Some of the most popular ones include Linux, Git, and Apache1. Other open source projects include Kubernetes, TensorFlow, and React Native',
   tools:
     'There are various open source tools available for developers. Some of the most popular ones include Hadoop, VLC Media Player, and GIMP1. Other open source tools include TensorFlow, Eclipse Che, and OpenShift Do.',
-  'os tutorials': 'OS tutorials helps you to learn-by-watching. It contains the list most helping tutorials on open-source.',
+  'os tutorials':
+    'OS tutorials helps you to learn-by-watching. It contains the list most helping tutorials on open-source.',
 
   //devops
   cicd: 'Continuous integration and continuous delivery (CI/CD) is a set of practices that combines continuous integration (CI) and continuous delivery (CD) to automate the process of software development and deployment.',
diff --git a/database/data.ts b/database/data.ts
index 37755893b..39909fc11 100644
--- a/database/data.ts
+++ b/database/data.ts
@@ -3,7 +3,7 @@ import * as DB from 'database'
 import { v4 as uuidv4 } from 'uuid'
 export const database: IData[][] = Object.values(DB).map((item: IDBData[]) =>
   item.map((subcat: IDBData) => ({ ...subcat, id: uuidv4() }))
-);
+)
 
 export const sidebarData: ISidebar[] = [
   {
@@ -46,6 +46,11 @@ export const sidebarData: ISidebar[] = [
         url: '/accessibility',
         resources: DB.accessibility,
       },
+      {
+        name: 'ui Libraries',
+        url: '/ui-libraries',
+        resources: DB.uilibraries,
+      },
     ],
   },
   {
@@ -202,7 +207,7 @@ export const sidebarData: ISidebar[] = [
       },
     ],
   },
- 
+
   {
     category: 'cloud-computing',
     subcategory: [
@@ -292,7 +297,11 @@ export const sidebarData: ISidebar[] = [
   {
     category: 'technical-writing',
     subcategory: [
-      { name: 'Technical Writing Tools', url: '/technical-writing-tools', resources: DB.technicalWritingTools },
+      {
+        name: 'Technical Writing Tools',
+        url: '/technical-writing-tools',
+        resources: DB.technicalWritingTools,
+      },
     ],
   },
   {
diff --git a/database/frontend/ui-libraries.json b/database/frontend/ui-libraries.json
new file mode 100644
index 000000000..09ca6b0d8
--- /dev/null
+++ b/database/frontend/ui-libraries.json
@@ -0,0 +1,23 @@
+[
+    {
+        "name": "MaterialUI",
+        "url": "https://material-ui.com/",
+        "description": "Material-UI is a popular open-source React component library that implements Google's Material Design principles, offering a vast collection of pre-designed and customizable UI components for creating visually appealing and responsive web applications. It's known for its seamless integration with React and extensive theming capabilities.",
+        "category": "frontend",
+        "subcategory": "ui-libraries"
+    },
+    {
+        "name": "ChakraUI",
+        "url": "https://chakra-ui.com/",
+        "description": "Chakra UI is a popular open-source React component library that simplifies building accessible and customizable user interfaces by providing a set of well-designed, composable UI components with a focus on flexibility and theming. It's known for its ease of use and integration with modern web development workflows.",
+        "category": "frontend",
+        "subcategory": "ui-libraries"
+    },
+    {
+        "name": "AntDesign",
+        "url": "https://ant.design/",
+        "description": "Ant Design is a comprehensive design system and React component library that offers a wide range of polished and customizable UI components for building modern web and mobile applications. It's widely used for its aesthetic appeal, robust feature set, and support for internationalization.",
+        "category": "frontend",
+        "subcategory": "ui-libraries"
+    }
+]
\ No newline at end of file
diff --git a/database/index.ts b/database/index.ts
index 377d9151c..b9ec93b8d 100644
--- a/database/index.ts
+++ b/database/index.ts
@@ -13,6 +13,7 @@ export { default as uiGenerators } from './frontend/ui-generators.json'
 export { default as react } from './frontend/react.json'
 export { default as next } from './frontend/next.json'
 export { default as three } from './frontend/three.json'
+export { default as uilibraries } from './frontend/ui-libraries.json'
 // backend
 export { default as authentication } from './backend/authentication.json'
 export { default as architecture } from './backend/architecture.json'