diff --git a/package.json b/package.json
index 5e51ce3b..4a426f48 100644
--- a/package.json
+++ b/package.json
@@ -9,20 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.3.7",
-    "@ant-design/pro-components": "^2.6.4",
     "@growthbook/growthbook-react": "^1.0.0",
-    "@hassanmojab/react-modern-calendar-datepicker": "^3.1.7",
-    "@plasmicapp/cli": "^0.1.331",
+    "@plasmicapp/cli": "^0.1.330",
     "@plasmicapp/host": "^1.0.196",
     "@plasmicapp/react-web": "^0.2.337",
-    "@plasmicpkgs/antd5": "^0.0.239",
-    "@plasmicpkgs/plasmic-basic-components": "^0.0.218",
-    "@plasmicpkgs/plasmic-embed-css": "^0.1.184",
-    "@plasmicpkgs/plasmic-query": "^0.0.216",
-    "@plasmicpkgs/plasmic-rich-components": "^1.0.187",
-    "@plasmicpkgs/plasmic-tabs": "^0.0.39",
-    "@plasmicpkgs/radix-ui": "^0.0.53",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slider": "^1.2.0",
@@ -35,8 +25,10 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hot-toast": "^2.4.1",
-    "react-quill": "^2.0.0",
+    "react-multi-date-picker": "^4.5.2",
     "react-timeit": "^1.2.12",
+    "recharts": "^2.12.7",
+    "swr": "^2.2.5",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7"
   },
diff --git a/plasmic.json b/plasmic.json
index ee7c3e4c..aa056928 100644
--- a/plasmic.json
+++ b/plasmic.json
@@ -5,10 +5,6 @@
     "scheme": "blackbox",
     "reactRuntime": "classic"
   },
-  "style": {
-    "scheme": "css-modules",
-    "defaultStyleCssFilePath": "plasmic/plasmic__default_style.module.css"
-  },
   "images": {
     "scheme": "public-files",
     "publicDir": "../public",
@@ -20,826 +16,12 @@
   },
   "srcDir": "components",
   "defaultPlasmicDir": "./plasmic",
-  "projects": [
-    {
-      "projectId": "caTPwKxj5ZrD9LQ7DMdK4Z",
-      "projectApiToken": "vXGGQpdi9fhcncabBdg8DcMRUbkz0iRW6HS1jzQufQR6QH0MasPwr9SX7ap4SsK3xXwwXmzZtglWGe0Rm2nw",
-      "projectName": "plasmic-basic-components",
-      "version": ">0.0.0",
-      "cssFilePath": "plasmic/plasmic_basic_components/plasmic.module.css",
-      "components": [],
-      "icons": [],
-      "images": [],
-      "indirect": true,
-      "globalContextsFilePath": "",
-      "splitsProviderFilePath": "",
-      "codeComponents": [
-        {
-          "id": "CMDBvOhaI4s",
-          "name": "Iframe",
-          "displayName": "hostless-iframe",
-          "componentImportPath": "@plasmicpkgs/plasmic-basic-components"
-        },
-        {
-          "id": "RhitNJW5Zu-",
-          "name": "Video",
-          "displayName": "hostless-html-video",
-          "componentImportPath": "@plasmicpkgs/plasmic-basic-components"
-        },
-        {
-          "id": "PKldDYkH42",
-          "name": "Embed",
-          "displayName": "hostless-embed",
-          "componentImportPath": "@plasmicpkgs/plasmic-basic-components"
-        },
-        {
-          "id": "D4RbnlpRXg3",
-          "name": "DataProvider",
-          "displayName": "hostless-data-provider",
-          "componentImportPath": "@plasmicpkgs/plasmic-basic-components"
-        },
-        {
-          "id": "zlBHsvkFlN",
-          "name": "ConditionGuard",
-          "displayName": "hostless-condition-guard",
-          "componentImportPath": "@plasmicpkgs/plasmic-basic-components"
-        },
-        {
-          "id": "K-mWGqrHefEp",
-          "name": "SideEffect",
-          "displayName": "hostless-side-effect",
-          "componentImportPath": "@plasmicpkgs/plasmic-basic-components"
-        },
-        {
-          "id": "SpkzmXJqg27p",
-          "name": "Timer",
-          "displayName": "hostless-timer",
-          "componentImportPath": "@plasmicpkgs/plasmic-basic-components"
-        }
-      ],
-      "customFunctions": [],
-      "jsBundleThemes": []
-    },
-    {
-      "projectId": "oBJtsp5RgVpcN6KCrDTuQT",
-      "projectApiToken": "Z0HEwdCEbNq2vJqCawLDXDkFahbOZftdUQ198aMRfnh2EL3KVg2GQ0q3G7MV4Q5hexgsS4BVG9ZpjLWYxcjg",
-      "projectName": "Fragment/Icons",
-      "version": ">0.0.0",
-      "cssFilePath": "plasmic/fragment_icons/plasmic.module.css",
-      "components": [],
-      "icons": [
-        {
-          "id": "rDjUqSUK3eUM",
-          "name": "BellIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__Bell.tsx"
-        },
-        {
-          "id": "r9Upp9NbiZkf",
-          "name": "ChevronLeftIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__ChevronLeft.tsx"
-        },
-        {
-          "id": "GHdF3hS-oP_3",
-          "name": "ChevronRightIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__ChevronRight.tsx"
-        },
-        {
-          "id": "YXreB8gS3SjV",
-          "name": "ChevronUpIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__ChevronUp.tsx"
-        },
-        {
-          "id": "aC_QFogxt1Ko",
-          "name": "ChevronDownIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__ChevronDown.tsx"
-        },
-        {
-          "id": "GRY2zHJ6uxOn",
-          "name": "ThumbUpIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__ThumbUp.tsx"
-        },
-        {
-          "id": "jHvDymIOvRnf",
-          "name": "ThumbDownIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__ThumbDown.tsx"
-        },
-        {
-          "id": "9zdEG9CdGbdC",
-          "name": "LocationIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__Location.tsx"
-        },
-        {
-          "id": "7Dhq6fgU-utK",
-          "name": "InfoIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__Info.tsx"
-        },
-        {
-          "id": "J8ozh55UiWsA",
-          "name": "SmileIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__Smile.tsx"
-        },
-        {
-          "id": "rW7v27ONOoUe",
-          "name": "ClockIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__Clock.tsx"
-        },
-        {
-          "id": "4D7uZNf6OjbV",
-          "name": "MoneyIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__Money.tsx"
-        },
-        {
-          "id": "e2zWN9c_lxv7",
-          "name": "CalendarIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__Calendar.tsx"
-        },
-        {
-          "id": "WTtCf_1I-uMv",
-          "name": "HeartIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__Heart.tsx"
-        },
-        {
-          "id": "eZfYsLpdWQA_",
-          "name": "BoldheartIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__Boldheart.tsx"
-        },
-        {
-          "id": "NSxX1Iy4jDVL",
-          "name": "ShareIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__Share.tsx"
-        },
-        {
-          "id": "dmfb3Ga2IoVt",
-          "name": "MenuIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__Menu.tsx"
-        },
-        {
-          "id": "BamIPHX72k5k",
-          "name": "RepliesIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__Replies.tsx"
-        },
-        {
-          "id": "zb1oqVXdrxPK",
-          "name": "XIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__X.tsx"
-        },
-        {
-          "id": "oob3UzcKBsd_",
-          "name": "WhatsappIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__Whatsapp.tsx"
-        },
-        {
-          "id": "qxWwW7vbw7na",
-          "name": "EitaaIcon",
-          "moduleFilePath": "plasmic/fragment_icons/icons/PlasmicIcon__Eitaa.tsx"
-        }
-      ],
-      "images": [
-        {
-          "id": "ijbf5URccsnE",
-          "name": "Red-Dot",
-          "filePath": "../public/plasmic/fragment_icons/images/redDot.svg"
-        }
-      ],
-      "indirect": true,
-      "globalContextsFilePath": "",
-      "splitsProviderFilePath": "",
-      "codeComponents": [
-        {
-          "id": "kbwf7uMhTcmG",
-          "name": "PlasmicHead",
-          "displayName": "hostless-plasmic-head",
-          "componentImportPath": "@plasmicapp/react-web"
-        },
-        {
-          "id": "8bmEUoRKkAPa",
-          "name": "Fetcher",
-          "displayName": "plasmic-data-source-fetcher",
-          "componentImportPath": "@plasmicapp/react-web/lib/data-sources"
-        }
-      ],
-      "customFunctions": [],
-      "jsBundleThemes": []
-    },
-    {
-      "projectId": "sqPBLwEBBKHA2WDuGb17eV",
-      "projectApiToken": "iSkfEguGYRieW7aywQdeHJ2kHCgSYAzIucSfo1aoYAmuxbDKSEVLpn0OWlulrvi7DOO5qF0Mrt3ZjgPrFi2RA",
-      "projectName": "radix-ui",
-      "version": ">0.0.0",
-      "cssFilePath": "plasmic/radix_ui/plasmic.module.css",
-      "components": [
-        {
-          "id": "5nirPCGmCnRD",
-          "name": "Button",
-          "type": "managed",
-          "projectId": "sqPBLwEBBKHA2WDuGb17eV",
-          "renderModuleFilePath": "plasmic/radix_ui/PlasmicButton.tsx",
-          "importSpec": {
-            "modulePath": "Button.tsx"
-          },
-          "cssFilePath": "plasmic/radix_ui/PlasmicButton.module.css",
-          "scheme": "blackbox",
-          "componentType": "component",
-          "plumeType": "button"
-        }
-      ],
-      "icons": [
-        {
-          "id": "Wyt3GMMsLefj",
-          "name": "ChecksvgIcon",
-          "moduleFilePath": "plasmic/radix_ui/icons/PlasmicIcon__Checksvg.tsx"
-        },
-        {
-          "id": "MbDRsJU0e3bw",
-          "name": "IconIcon",
-          "moduleFilePath": "plasmic/radix_ui/icons/PlasmicIcon__Icon.tsx"
-        }
-      ],
-      "images": [],
-      "indirect": true,
-      "globalContextsFilePath": "",
-      "splitsProviderFilePath": "",
-      "codeComponents": [
-        {
-          "id": "-VVCIjLHaMgA",
-          "name": "Popover",
-          "displayName": "hostless-radix-popover",
-          "componentImportPath": "@plasmicpkgs/radix-ui"
-        },
-        {
-          "id": "z4QhkqHluocO",
-          "name": "Dialog",
-          "displayName": "hostless-radix-dialog",
-          "componentImportPath": "@plasmicpkgs/radix-ui"
-        },
-        {
-          "id": "logdOHtqNj-h",
-          "name": "DialogClose",
-          "displayName": "hostless-radix-dialog-close",
-          "componentImportPath": "@plasmicpkgs/radix-ui"
-        },
-        {
-          "id": "7LzIe7AaW4AB",
-          "name": "SheetContent",
-          "displayName": "hostless-radix-sheet-content",
-          "componentImportPath": "@plasmicpkgs/radix-ui"
-        },
-        {
-          "id": "iYIxAkansYwL",
-          "name": "DialogContent",
-          "displayName": "hostless-radix-dialog-content",
-          "componentImportPath": "@plasmicpkgs/radix-ui"
-        },
-        {
-          "id": "iNBmY1xCN2UL",
-          "name": "DialogTitle",
-          "displayName": "hostless-radix-dialog-title",
-          "componentImportPath": "@plasmicpkgs/radix-ui"
-        },
-        {
-          "id": "92yIzUPezjQ1",
-          "name": "DialogDescription",
-          "displayName": "hostless-radix-dialog-description",
-          "componentImportPath": "@plasmicpkgs/radix-ui"
-        },
-        {
-          "id": "wI1aJ4FfrKn1",
-          "name": "Tooltip",
-          "displayName": "hostless-radix-tooltip",
-          "componentImportPath": "@plasmicpkgs/radix-ui"
-        }
-      ],
-      "customFunctions": [],
-      "jsBundleThemes": []
-    },
-    {
-      "projectId": "8PtdGodUbexNYgkuyBUcWu",
-      "projectApiToken": "34o5R5KswluuZ4sD83F88oQrcLWsNNeUpCptQ8Okf4hYqgjnHnX2idGAlhtB7WWQQelNAInf5XFazR1cGw",
-      "projectName": "plasmic-embed-css",
-      "version": ">0.0.0",
-      "cssFilePath": "plasmic/plasmic_embed_css/plasmic.module.css",
-      "components": [],
-      "icons": [],
-      "images": [],
-      "indirect": true,
-      "globalContextsFilePath": "plasmic/plasmic_embed_css/PlasmicGlobalContextsProvider.tsx",
-      "splitsProviderFilePath": "",
-      "codeComponents": [
-        {
-          "id": "qF0uJxFztB",
-          "name": "EmbedCss",
-          "displayName": "global-embed-css",
-          "componentImportPath": "@plasmicpkgs/plasmic-embed-css"
-        }
-      ],
-      "customFunctions": [],
-      "jsBundleThemes": []
-    },
-    {
-      "projectId": "h9Dbk9ygddw7UVEq1NNhKi",
-      "projectApiToken": "qxq800gYC67BOqHYnTHxD4C7pBBFZm6VP4XdU8vevI8awru5kfW7ofg2msC86kBNrxxuzWwrQOpU6gvdkEg",
-      "projectName": "Fragment/DesignSystem",
-      "version": ">0.0.0",
-      "cssFilePath": "plasmic/fragment_design_system/plasmic.module.css",
-      "components": [
-        {
-          "id": "3i84rYjQRrs4",
-          "name": "Avatar",
-          "type": "managed",
-          "projectId": "h9Dbk9ygddw7UVEq1NNhKi",
-          "renderModuleFilePath": "plasmic/fragment_design_system/PlasmicAvatar.tsx",
-          "importSpec": {
-            "modulePath": "Avatar.tsx"
-          },
-          "cssFilePath": "plasmic/fragment_design_system/PlasmicAvatar.module.css",
-          "scheme": "blackbox",
-          "componentType": "component"
-        },
-        {
-          "id": "oVzoHzMf1TLl",
-          "name": "Button",
-          "type": "managed",
-          "projectId": "h9Dbk9ygddw7UVEq1NNhKi",
-          "renderModuleFilePath": "plasmic/fragment_design_system/PlasmicButton.tsx",
-          "importSpec": {
-            "modulePath": "Button.tsx"
-          },
-          "cssFilePath": "plasmic/fragment_design_system/PlasmicButton.module.css",
-          "scheme": "blackbox",
-          "componentType": "component",
-          "plumeType": "button"
-        },
-        {
-          "id": "FJiI2-N1is_F",
-          "name": "Dialog",
-          "type": "managed",
-          "projectId": "h9Dbk9ygddw7UVEq1NNhKi",
-          "renderModuleFilePath": "plasmic/fragment_design_system/PlasmicDialog.tsx",
-          "importSpec": {
-            "modulePath": "Dialog.tsx"
-          },
-          "cssFilePath": "plasmic/fragment_design_system/PlasmicDialog.module.css",
-          "scheme": "blackbox",
-          "componentType": "component"
-        },
-        {
-          "id": "1bFBcAoH0lNN",
-          "name": "Chip",
-          "type": "managed",
-          "projectId": "h9Dbk9ygddw7UVEq1NNhKi",
-          "renderModuleFilePath": "plasmic/fragment_design_system/PlasmicChip.tsx",
-          "importSpec": {
-            "modulePath": "Chip.tsx"
-          },
-          "cssFilePath": "plasmic/fragment_design_system/PlasmicChip.module.css",
-          "scheme": "blackbox",
-          "componentType": "component"
-        },
-        {
-          "id": "fa_t7ELXcm5k",
-          "name": "LineClamp",
-          "type": "managed",
-          "projectId": "h9Dbk9ygddw7UVEq1NNhKi",
-          "renderModuleFilePath": "plasmic/fragment_design_system/PlasmicLineClamp.tsx",
-          "importSpec": {
-            "modulePath": "LineClamp.tsx"
-          },
-          "cssFilePath": "plasmic/fragment_design_system/PlasmicLineClamp.module.css",
-          "scheme": "blackbox",
-          "componentType": "component"
-        },
-        {
-          "id": "CZBpNouNw7Ui",
-          "name": "MultilineTextInput",
-          "type": "managed",
-          "projectId": "h9Dbk9ygddw7UVEq1NNhKi",
-          "renderModuleFilePath": "plasmic/fragment_design_system/PlasmicMultilineTextInput.tsx",
-          "importSpec": {
-            "modulePath": "MultilineTextInput.tsx"
-          },
-          "cssFilePath": "plasmic/fragment_design_system/PlasmicMultilineTextInput.module.css",
-          "scheme": "blackbox",
-          "componentType": "component"
-        }
-      ],
-      "icons": [
-        {
-          "id": "eCsLCdWP9DST",
-          "name": "Icon17Icon",
-          "moduleFilePath": "plasmic/fragment_design_system/icons/PlasmicIcon__Icon17.tsx"
-        },
-        {
-          "id": "xYtO5aWYRBvW",
-          "name": "IconIcon",
-          "moduleFilePath": "plasmic/fragment_design_system/icons/PlasmicIcon__Icon.tsx"
-        },
-        {
-          "id": "RqwNL88PjcHS",
-          "name": "SearchsvgIcon",
-          "moduleFilePath": "plasmic/fragment_design_system/icons/PlasmicIcon__Searchsvg.tsx"
-        },
-        {
-          "id": "_Qaeb-4Y8N07",
-          "name": "ChecksvgIcon",
-          "moduleFilePath": "plasmic/fragment_design_system/icons/PlasmicIcon__Checksvg.tsx"
-        }
-      ],
-      "images": [],
-      "indirect": true,
-      "globalContextsFilePath": "",
-      "splitsProviderFilePath": "",
-      "codeComponents": [
-        {
-          "id": "mzEFNYvCTvAi",
-          "name": "PlasmicHead",
-          "displayName": "hostless-plasmic-head",
-          "componentImportPath": "@plasmicapp/react-web"
-        },
-        {
-          "id": "QpiWJfvbJkdi",
-          "name": "Fetcher",
-          "displayName": "plasmic-data-source-fetcher",
-          "componentImportPath": "@plasmicapp/react-web/lib/data-sources"
-        }
-      ],
-      "customFunctions": [],
-      "jsBundleThemes": []
-    },
-    {
-      "projectId": "seYsnBL1P3AiXaFGNEMUUM",
-      "projectApiToken": "dsYqHeC2LBq5eJkzvPsoZ09vYZAs1uVXCjBoxTjePPnhAqsHsXGOe3NUriwIVkiOi5qj5UnWU0Wu4rTqZkoZig",
-      "projectName": "pricing",
-      "version": "latest",
-      "cssFilePath": "plasmic/pricing/plasmic.module.css",
-      "components": [
-        {
-          "id": "g64VYoCfAKTS",
-          "name": "Homepage",
-          "type": "managed",
-          "projectId": "seYsnBL1P3AiXaFGNEMUUM",
-          "renderModuleFilePath": "plasmic/pricing/PlasmicHomepage.tsx",
-          "importSpec": {
-            "modulePath": "../src/pages/index.tsx"
-          },
-          "cssFilePath": "plasmic/pricing/PlasmicHomepage.module.css",
-          "scheme": "blackbox",
-          "componentType": "page",
-          "path": "/"
-        },
-        {
-          "id": "ZdzGQGZE4mJ7",
-          "name": "TextInput",
-          "type": "managed",
-          "projectId": "seYsnBL1P3AiXaFGNEMUUM",
-          "renderModuleFilePath": "plasmic/pricing/PlasmicTextInput.tsx",
-          "importSpec": {
-            "modulePath": "TextInput.tsx"
-          },
-          "cssFilePath": "plasmic/pricing/PlasmicTextInput.module.css",
-          "scheme": "blackbox",
-          "componentType": "component",
-          "plumeType": "text-input"
-        },
-        {
-          "id": "eXdB-XBoNLdg",
-          "name": "Select",
-          "type": "managed",
-          "projectId": "seYsnBL1P3AiXaFGNEMUUM",
-          "renderModuleFilePath": "plasmic/pricing/PlasmicSelect.tsx",
-          "importSpec": {
-            "modulePath": "Select.tsx"
-          },
-          "cssFilePath": "plasmic/pricing/PlasmicSelect.module.css",
-          "scheme": "blackbox",
-          "componentType": "component",
-          "plumeType": "select"
-        },
-        {
-          "id": "qHmDd91cq7ci",
-          "name": "Select__Option",
-          "type": "managed",
-          "projectId": "seYsnBL1P3AiXaFGNEMUUM",
-          "renderModuleFilePath": "plasmic/pricing/PlasmicSelect__Option.tsx",
-          "importSpec": {
-            "modulePath": "Select__Option.tsx"
-          },
-          "cssFilePath": "plasmic/pricing/PlasmicSelect__Option.module.css",
-          "scheme": "blackbox",
-          "componentType": "component",
-          "plumeType": "select-option"
-        },
-        {
-          "id": "OiZqCFXnVtk_",
-          "name": "Select__OptionGroup",
-          "type": "managed",
-          "projectId": "seYsnBL1P3AiXaFGNEMUUM",
-          "renderModuleFilePath": "plasmic/pricing/PlasmicSelect__OptionGroup.tsx",
-          "importSpec": {
-            "modulePath": "Select__OptionGroup.tsx"
-          },
-          "cssFilePath": "plasmic/pricing/PlasmicSelect__OptionGroup.module.css",
-          "scheme": "blackbox",
-          "componentType": "component",
-          "plumeType": "select-option-group"
-        },
-        {
-          "id": "L283ckhGbtu3",
-          "name": "Select__Overlay",
-          "type": "managed",
-          "projectId": "seYsnBL1P3AiXaFGNEMUUM",
-          "renderModuleFilePath": "plasmic/pricing/PlasmicSelect__Overlay.tsx",
-          "importSpec": {
-            "modulePath": "Select__Overlay.tsx"
-          },
-          "cssFilePath": "plasmic/pricing/PlasmicSelect__Overlay.module.css",
-          "scheme": "blackbox",
-          "componentType": "component",
-          "plumeType": "triggered-overlay"
-        },
-        {
-          "id": "dk4vJhcf_j2D",
-          "name": "Checkbox",
-          "type": "managed",
-          "projectId": "seYsnBL1P3AiXaFGNEMUUM",
-          "renderModuleFilePath": "plasmic/pricing/PlasmicCheckbox.tsx",
-          "importSpec": {
-            "modulePath": "Checkbox.tsx"
-          },
-          "cssFilePath": "plasmic/pricing/PlasmicCheckbox.module.css",
-          "scheme": "blackbox",
-          "componentType": "component",
-          "plumeType": "checkbox"
-        },
-        {
-          "id": "0FMc41XIUA0C",
-          "name": "MenuFeature",
-          "type": "managed",
-          "projectId": "seYsnBL1P3AiXaFGNEMUUM",
-          "renderModuleFilePath": "plasmic/pricing/PlasmicMenuFeature.tsx",
-          "importSpec": {
-            "modulePath": "MenuFeature.tsx"
-          },
-          "cssFilePath": "plasmic/pricing/PlasmicMenuFeature.module.css",
-          "scheme": "blackbox",
-          "componentType": "component"
-        }
-      ],
-      "icons": [
-        {
-          "id": "2VY19-xmXXIp",
-          "name": "SearchsvgIcon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Searchsvg.tsx"
-        },
-        {
-          "id": "22TzxIplc3cE",
-          "name": "ChecksvgIcon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Checksvg.tsx"
-        },
-        {
-          "id": "6BOnyrSHKU5V",
-          "name": "ChevronDownsvgIcon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__ChevronDownsvg.tsx"
-        },
-        {
-          "id": "82YD-Tor0jUQ",
-          "name": "ChevronUpsvgIcon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__ChevronUpsvg.tsx"
-        },
-        {
-          "id": "wsKdM0teCjsm",
-          "name": "IconIcon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Icon.tsx"
-        },
-        {
-          "id": "mWyKgupBp1Cr",
-          "name": "Icon2Icon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Icon2.tsx"
-        },
-        {
-          "id": "jRHPVqrBy9SV",
-          "name": "Icon3Icon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Icon3.tsx"
-        },
-        {
-          "id": "gsRGA0OcKSmi",
-          "name": "Icon4Icon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Icon4.tsx"
-        },
-        {
-          "id": "HAnMzYJg5d76",
-          "name": "Icon5Icon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Icon5.tsx"
-        },
-        {
-          "id": "WvR12xDIGLgz",
-          "name": "Icon6Icon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Icon6.tsx"
-        },
-        {
-          "id": "1eqoHYLc_fOB",
-          "name": "Icon7Icon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Icon7.tsx"
-        },
-        {
-          "id": "fEKKJ-2F5BD1",
-          "name": "Icon8Icon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Icon8.tsx"
-        },
-        {
-          "id": "JK4sPT7lqUH1",
-          "name": "Icon9Icon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Icon9.tsx"
-        },
-        {
-          "id": "5Kdxmn_uOBnI",
-          "name": "Icon10Icon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Icon10.tsx"
-        },
-        {
-          "id": "YXzAIe4mJWDL",
-          "name": "Icon11Icon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Icon11.tsx"
-        },
-        {
-          "id": "MFDv12-mmwTj",
-          "name": "SquaresvgIcon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Squaresvg.tsx"
-        },
-        {
-          "id": "JhqU_pVwANVN",
-          "name": "SquareCheckFilledsvgIcon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__SquareCheckFilledsvg.tsx"
-        },
-        {
-          "id": "gqt0H-uJ-Xg8",
-          "name": "SquareMinussvgIcon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__SquareMinussvg.tsx"
-        },
-        {
-          "id": "8GqB7Ju9fvrK",
-          "name": "Icon12Icon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Icon12.tsx"
-        },
-        {
-          "id": "pmluLmEGECI6",
-          "name": "Icon13Icon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Icon13.tsx"
-        },
-        {
-          "id": "KibdjfOFOCp3",
-          "name": "Icon14Icon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Icon14.tsx"
-        },
-        {
-          "id": "jAui2HVvT8Qw",
-          "name": "Icon15Icon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Icon15.tsx"
-        },
-        {
-          "id": "wgGgWP4KVX41",
-          "name": "Icon16Icon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Icon16.tsx"
-        },
-        {
-          "id": "j9YlsTC9FYO_",
-          "name": "Icon17Icon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Icon17.tsx"
-        },
-        {
-          "id": "sLZRs4d-Nkod",
-          "name": "Icon18Icon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Icon18.tsx"
-        },
-        {
-          "id": "5bp8lGg8G7HU",
-          "name": "Icon19Icon",
-          "moduleFilePath": "plasmic/pricing/icons/PlasmicIcon__Icon19.tsx"
-        }
-      ],
-      "images": [
-        {
-          "id": "2mpvjEcDOPA5",
-          "name": "image",
-          "filePath": "../public/plasmic/pricing/images/image.svg"
-        },
-        {
-          "id": "-ntPJdjA0KGE",
-          "name": "logo.5e03fe79.svg",
-          "filePath": "../public/plasmic/pricing/images/logo5E03Fe79Svg.svg"
-        }
-      ],
-      "indirect": false,
-      "globalContextsFilePath": "plasmic/pricing/PlasmicGlobalContextsProvider.tsx",
-      "splitsProviderFilePath": "",
-      "codeComponents": [
-        {
-          "id": "Y7x8T3r63_t7",
-          "name": "PlasmicHead",
-          "displayName": "hostless-plasmic-head",
-          "componentImportPath": "@plasmicapp/react-web"
-        },
-        {
-          "id": "vxf7QVWAuDhX",
-          "name": "Fetcher",
-          "displayName": "plasmic-data-source-fetcher",
-          "componentImportPath": "@plasmicapp/react-web/lib/data-sources"
-        },
-        {
-          "id": "rq1pFzAXsE9z",
-          "name": "DatePicker",
-          "displayName": "DatePicker",
-          "componentImportPath": "@/fragment/components/date-picker"
-        },
-        {
-          "id": "w_Nty63X2o-t",
-          "name": "TimePicker",
-          "displayName": "TimePicker",
-          "componentImportPath": "@/fragment/components/time-picker"
-        },
-        {
-          "id": "7LNGFaQ1WVv-",
-          "name": "Popover",
-          "displayName": "Popover",
-          "componentImportPath": "@/fragment/components/popover"
-        },
-        {
-          "id": "Un2ikOagWEY9",
-          "name": "Fragment",
-          "displayName": "Fragment",
-          "componentImportPath": "@/fragment/fragment"
-        },
-        {
-          "id": "-aZML1EcKLz0",
-          "name": "GrowthBook",
-          "displayName": "GrowthBook",
-          "componentImportPath": "@/fragment/growthbook"
-        },
-        {
-          "id": "A4mXljoSlg6E",
-          "name": "Splunk",
-          "displayName": "Splunk",
-          "componentImportPath": "@/fragment/splunk"
-        },
-        {
-          "id": "M1-4Te7Kf9_v",
-          "name": "Select",
-          "displayName": "Select",
-          "componentImportPath": "@/fragment/components/select"
-        },
-        {
-          "id": "yi2DFxegVSb9",
-          "name": "Input",
-          "displayName": "Input",
-          "componentImportPath": "@/fragment/components/input"
-        },
-        {
-          "id": "Dp5S3zaeC1yD",
-          "name": "Switch",
-          "displayName": "Switch",
-          "componentImportPath": "@/fragment/components/switch"
-        },
-        {
-          "id": "IwfvOcf1tP7X",
-          "name": "Slider",
-          "displayName": "Slider",
-          "componentImportPath": "@/fragment/components/slider"
-        },
-        {
-          "id": "du8dIdosOH2V",
-          "name": "ApiRequest",
-          "displayName": "ApiRequest",
-          "componentImportPath": "@/fragment/components/api-request"
-        }
-      ],
-      "customFunctions": []
-    }
-  ],
-  "globalVariants": {
-    "variantGroups": [
-      {
-        "id": "BR2UhI7ulpvR",
-        "name": "Screen",
-        "projectId": "oBJtsp5RgVpcN6KCrDTuQT",
-        "contextFilePath": "plasmic/fragment_icons/PlasmicGlobalVariant__Screen.tsx"
-      },
-      {
-        "id": "QmLtHiTXdNxv",
-        "name": "Screen",
-        "projectId": "h9Dbk9ygddw7UVEq1NNhKi",
-        "contextFilePath": "plasmic/fragment_design_system/PlasmicGlobalVariant__Screen.tsx"
-      },
-      {
-        "id": "ebUcSKv8j57Q",
-        "name": "Screen",
-        "projectId": "seYsnBL1P3AiXaFGNEMUUM",
-        "contextFilePath": "plasmic/pricing/PlasmicGlobalVariant__Screen.tsx"
-      }
-    ]
-  },
+  "projects": [],
+  "globalVariants": {},
   "wrapPagesWithGlobalContexts": true,
   "nextjsConfig": {
     "pagesDir": "../src/pages"
   },
-  "cliVersion": "0.1.331",
-  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.331/dist/plasmic.schema.json"
+  "cliVersion": "0.1.330",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.330/dist/plasmic.schema.json"
 }
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
new file mode 100644
index 00000000..82cc71cc
--- /dev/null
+++ b/src/components/ui/chart.tsx
@@ -0,0 +1,361 @@
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"]
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+})
+ChartContainer.displayName = "Chart"
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([_, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES).map(
+          ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+        ),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean
+      hideIndicator?: boolean
+      indicator?: "line" | "dot" | "dashed"
+      nameKey?: string
+      labelKey?: string
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null
+      }
+
+      const [item] = payload
+      const key = `${labelKey || item.dataKey || item.name || "value"}`
+      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        )
+      }
+
+      if (!value) {
+        return null
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ])
+
+    if (!active || !payload?.length) {
+      return null
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot"
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color || item.payload.fill || item.color
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item.value && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+)
+ChartTooltipContent.displayName = "ChartTooltip"
+
+const ChartLegend = RechartsPrimitive.Legend
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean
+      nameKey?: string
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    if (!payload?.length) {
+      return null
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+)
+ChartLegendContent.displayName = "ChartLegend"
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/src/fragment/components/api-request.tsx b/src/fragment/components/api-request.tsx
index 06b61efb..f9ea0e6e 100644
--- a/src/fragment/components/api-request.tsx
+++ b/src/fragment/components/api-request.tsx
@@ -1,7 +1,9 @@
-/* eslint-disable react/display-name */
+"use client";
+
 import { CodeComponentMeta, useSelector } from "@plasmicapp/host";
 import { ReactNode, useEffect, useState } from "react";
 import axios from "axios";
+import useSWR from "swr";
 
 type ApiRequestType = {
   method: "GET" | "POST" | "DELETE" | "PUT" | "PATCH";
@@ -9,9 +11,9 @@ type ApiRequestType = {
   params: Record<string, string | string[]>;
   body?: Record<string, any>;
   config?: Record<string, any>;
-  Children: ReactNode;
-  ErrorDisplay?: ReactNode;
-  LoadingDisplay?: ReactNode;
+  children: ReactNode;
+  errorDisplay?: ReactNode;
+  loadingDisplay?: ReactNode;
   previewErrorDisplay?: boolean;
   previewLoadingDisplay?: boolean;
   onError?: (error?: any) => void;
@@ -26,9 +28,9 @@ export const ApiRequest = (props: ApiRequestType) => {
     url,
     body,
     config,
-    ErrorDisplay,
-    LoadingDisplay,
-    Children,
+    errorDisplay,
+    loadingDisplay,
+    children,
     previewErrorDisplay,
     previewLoadingDisplay,
     onError,
@@ -37,59 +39,66 @@ export const ApiRequest = (props: ApiRequestType) => {
   } = props;
   const fragmentConfig = useSelector("Fragment");
   const [isLoading, setIsLoading] = useState(false);
-  const [isError, setIsError] = useState(false);
-
-  useEffect(() => {
-    reuqestFn();
-  }, [method, params, url, body, config]);
+  const fetchProps = {
+    method,
+    url,
+    params,
+    body,
+    config: {
+      ...fragmentConfig?.apiConfig,
+      ...fragmentConfig?.previewApiConfig,
+      ...config,
+    },
+  };
+  const { error } = useSWR(
+    JSON.stringify(fetchProps),
+    () => reuqestFn(fetchProps),
+    {
+      onError(err) {
+        onLoading?.(false);
+        setIsLoading(false);
+        if (axios.isAxiosError(err)) {
+          onError?.(err.response?.data);
+        }
+      },
+      onSuccess(data) {
+        onLoading?.(false);
+        setIsLoading(false);
+        onSuccess?.(data?.data);
+      },
+      errorRetryCount: 0,
+      revalidateOnFocus: false,
+      keepPreviousData: false,
+    }
+  );
 
-  const reuqestFn = async () => {
+  const reuqestFn = async ({ method, url, params, body, config }: any) => {
     onLoading?.(true);
-    setIsLoading(true);
     onError?.(null);
-    setIsError(false);
-    try {
-      let result;
-      if (method === "GET") {
-        result = await axios.get(url, {
-          params,
-          ...fragmentConfig.apiConfig,
-          ...fragmentConfig.previewApiConfig,
-          ...config,
-        });
-      }
-      if (method !== "GET") {
-        result = await axios[
-          method.toLowerCase() as "post" | "delete" | "put" | "patch"
-        ](url, body, {
-          params,
-          ...fragmentConfig.apiConfig,
-          ...fragmentConfig.previewApiConfig,
-          ...config,
-        });
-      }
-      onLoading?.(false);
-      setIsLoading(false);
-      onSuccess?.(result?.data);
-    } catch (error) {
-      onLoading?.(false);
-      setIsLoading(false);
-      if (axios.isAxiosError(error)) {
-        onError?.(error.response?.data);
-        setIsError(true);
-      }
+    onSuccess?.(null);
+    setIsLoading(true);
+    if (method === "GET") {
+      return await axios.get(url, {
+        params,
+        ...config,
+      });
     }
+    return await axios[
+      method.toLowerCase() as "post" | "delete" | "put" | "patch"
+    ](url, body, {
+      params,
+      ...config,
+    });
   };
 
   if (isLoading || previewLoadingDisplay) {
-    return <>{LoadingDisplay}</>;
+    return loadingDisplay;
   }
 
-  if (isError || previewErrorDisplay) {
-    return <>{ErrorDisplay}</>;
+  if (!!error || previewErrorDisplay) {
+    return errorDisplay;
   }
-
-  return <>{Children}</>;
+  return children;
 };
 
 export const apiRequestMeta: CodeComponentMeta<ApiRequestType> = {
@@ -139,8 +148,9 @@ export const apiRequestMeta: CodeComponentMeta<ApiRequestType> = {
       type: "boolean",
       editOnly: true,
     },
-    Children: "slot",
-    LoadingDisplay: {
+    children: { displayName: "Children", type: "slot" },
+    loadingDisplay: {
+      displayName: "Loading Display",
       type: "slot",
       defaultValue: [
         {
@@ -149,7 +159,8 @@ export const apiRequestMeta: CodeComponentMeta<ApiRequestType> = {
         },
       ],
     },
-    ErrorDisplay: {
+    errorDisplay: {
+      displayName: "Error Display",
       type: "slot",
       defaultValue: [
         {
diff --git a/src/fragment/components/chart.tsx b/src/fragment/components/chart.tsx
new file mode 100644
index 00000000..a683069d
--- /dev/null
+++ b/src/fragment/components/chart.tsx
@@ -0,0 +1,470 @@
+/* eslint-disable react/display-name */
+import { CodeComponentMeta, useSelector } from "@plasmicapp/host";
+import * as ChartPrimitive from "@/components/ui/chart";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  LabelList,
+  XAxis,
+  YAxis,
+  Area,
+  AreaChart,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+} from "recharts";
+
+type ChartType = {
+  cartesianGrid: any[];
+  data: Record<string, any>[];
+  chartConfig: Record<string, any>[];
+  xAxis?: Record<string, any>;
+  yAxis?: Record<string, any>;
+  tooltip?: Record<string, any>;
+  layout?: "horizontal" | "vertical";
+  label?: boolean;
+  type?: "bar" | "area" | "line" | "pie";
+  stack?: boolean;
+  dataKey?: Record<string, any>;
+  nameKey?: Record<string, any>;
+  legend?: boolean;
+  className?: string;
+};
+
+import { type ChartConfig } from "@/components/ui/chart";
+import { useMemo } from "react";
+import { cn } from "@/lib/utils";
+
+export const Chart = (props: ChartType) => {
+  const {
+    cartesianGrid,
+    data,
+    chartConfig = [],
+    xAxis,
+    yAxis,
+    tooltip,
+    layout,
+    label,
+    type = "bar",
+    stack,
+    dataKey = {},
+    nameKey,
+    legend,
+    className,
+  } = props;
+
+  const reformmatedConfig = ([dataKey ?? {}, ...chartConfig]?.reduce?.(
+    (acc, item) => {
+      const key = item.key;
+      acc[key] = item;
+      return acc;
+    },
+    {}
+  ) ?? {}) satisfies ChartConfig;
+
+  const ComponentContainerChart: any = useMemo(() => {
+    if (type === "bar") {
+      return BarChart;
+    }
+    if (type === "area") {
+      return AreaChart;
+    }
+    if (type === "line") {
+      return LineChart;
+    }
+    if (type === "pie") {
+      return PieChart;
+    }
+  }, [type]);
+
+  const ComponentChart: any = useMemo(() => {
+    if (type === "bar") {
+      return Bar;
+    }
+    if (type === "area") {
+      return Area;
+    }
+    if (type === "line") {
+      return Line;
+    }
+    if (type === "pie") {
+      return Pie;
+    }
+  }, [type]);
+
+  return (
+    <ChartPrimitive.ChartContainer
+      config={reformmatedConfig}
+      className={cn(className)}
+    >
+      <ComponentContainerChart
+        accessibilityLayer
+        {...(type === "bar" && { layout })}
+        {...(type !== "pie" && { data })}
+        margin={{
+          right: 16,
+          left: 16,
+          top: 16,
+        }}
+      >
+        {type !== "pie" && cartesianGrid?.length > 0 && (
+          <CartesianGrid
+            vertical={cartesianGrid.includes("vertical")}
+            horizontal={cartesianGrid.includes("horizontal")}
+          />
+        )}
+        {type !== "pie" && xAxis?.enabled && (
+          <XAxis
+            {...(xAxis.key !== "auto" && { dataKey: xAxis.key })}
+            tickLine={xAxis?.tickLine ?? false}
+            tickMargin={xAxis?.tickMargin ?? 10}
+            axisLine={xAxis?.axisLine ?? false}
+            {...(xAxis.key !== "auto" && { type: xAxis.type })}
+          />
+        )}
+        {type !== "pie" && yAxis?.enabled && (
+          <YAxis
+            {...(yAxis.key !== "auto" && { dataKey: yAxis.key })}
+            tickLine={yAxis?.tickLine ?? false}
+            tickMargin={yAxis?.tickMargin ?? 10}
+            axisLine={yAxis?.axisLine ?? false}
+            {...(yAxis.key !== "auto" && { type: yAxis.type })}
+          />
+        )}
+        {tooltip?.enabled && (
+          <ChartPrimitive.ChartTooltip
+            content={<ChartPrimitive.ChartTooltipContent {...tooltip} />}
+          />
+        )}
+        {type === "pie" && (
+          <ComponentChart
+            data={data.map((item) => ({
+              ...item,
+              fill: reformmatedConfig[item[nameKey?.key]]?.color,
+            }))}
+            dataKey={dataKey?.key}
+            nameKey={nameKey?.key}
+          >
+            {label && (
+              <LabelList
+                dataKey={nameKey?.key}
+                fontSize={12}
+                fontWeight={100}
+                formatter={(value: string) => reformmatedConfig[value]?.label}
+              />
+            )}
+          </ComponentChart>
+        )}
+        {legend && (
+          <ChartPrimitive.ChartLegend
+            content={<ChartPrimitive.ChartLegendContent />}
+          />
+        )}
+        {type !== "pie" &&
+          chartConfig?.map((item) => (
+            <ComponentChart
+              {...(type === "bar" && { layout })}
+              key={item.key}
+              dataKey={item.key}
+              fill={item.color}
+              stroke={item.color}
+              radius={7}
+              {...(type !== "bar" && { type: item?.type ?? "natural" })}
+              {...(type !== "bar" && { dot: item?.dot ?? false })}
+              {...(stack && { stackId: "a" })}
+              allowReorder="yes"
+            >
+              {label && (
+                <LabelList
+                  dataKey={item.key}
+                  position={
+                    type !== "bar"
+                      ? "top"
+                      : layout === "vertical"
+                      ? "right"
+                      : "top"
+                  }
+                  offset={8}
+                  fontSize={12}
+                />
+              )}
+            </ComponentChart>
+          ))}
+      </ComponentContainerChart>
+    </ChartPrimitive.ChartContainer>
+  );
+};
+
+export const chartMeta: CodeComponentMeta<ChartType> = {
+  name: "Chart",
+  displayName: "Fragment/Chart",
+  importPath: "@/fragment/components/chart",
+  figmaMappings: [{ figmaComponentName: "Chart" }],
+
+  props: {
+    type: {
+      type: "cardPicker",
+      options: [
+        {
+          imgUrl:
+            "https://raw.githubusercontent.com/makefragment/chart/main/bar.png",
+          value: "bar",
+          label: "Bar",
+          footer: "Bar Chart",
+        },
+        {
+          imgUrl:
+            "https://raw.githubusercontent.com/makefragment/chart/main/area.png",
+          value: "area",
+          label: "Area",
+          footer: "Area Chart",
+        },
+        {
+          imgUrl:
+            "https://raw.githubusercontent.com/makefragment/chart/main/line.png",
+          value: "line",
+          label: "Line",
+          footer: "Line Chart",
+        },
+        {
+          imgUrl:
+            "https://raw.githubusercontent.com/makefragment/chart/main/pie.png",
+          value: "pie",
+          label: "Pie",
+          footer: "Pie Chart",
+        },
+      ],
+    },
+    data: {
+      type: "array",
+    },
+    dataKey: {
+      type: "object",
+      hidden: (ps) => !!ps?.type && !["pie"].includes(ps?.type),
+      nameFunc: (item: any) => item?.key,
+      fields: {
+        key: {
+          type: "choice",
+          options: (ps) => {
+            return Object.keys(ps.data?.[0] ?? []);
+          },
+        },
+        label: {
+          type: "string",
+        },
+      },
+    },
+    nameKey: {
+      type: "object",
+      hidden: (ps) => !!ps?.type && !["pie"].includes(ps?.type),
+      nameFunc: (item: any) => item?.key,
+      fields: {
+        key: {
+          type: "choice",
+          options: (ps) => {
+            return Object.keys(ps.data?.[0] ?? []);
+          },
+        },
+        label: {
+          type: "string",
+        },
+      },
+    },
+    chartConfig: {
+      type: "array",
+      hidden: (ps) =>
+        !!ps?.type && (["pie"].includes(ps?.type) ? !ps?.nameKey : false),
+      itemType: {
+        type: "object",
+        nameFunc: (item: any) => item?.key,
+        fields: {
+          key: {
+            type: "choice",
+            options: (ps) => {
+              return !!ps?.type && ["pie"].includes(ps?.type)
+                ? Array.from(
+                    new Set(ps.data?.map((entry) => entry[ps?.nameKey?.key]))
+                  )
+                : Object.keys(ps.data?.[0] ?? []);
+            },
+          },
+          label: {
+            type: "string",
+          },
+          color: {
+            type: "color",
+            defaultValue: "#000000",
+            defaultValueHint: "#000000",
+          },
+          type: {
+            type: "choice",
+            hidden: (ps) => {
+              return !!ps?.type && ["bar", "pie"].includes(ps?.type);
+            },
+            options: ["natural", "linear", "step"],
+            defaultValueHint: "natural",
+            defaultValue: "natural",
+          },
+          dot: {
+            type: "boolean",
+            hidden: (ps) => {
+              return !!ps?.type && ["bar", "pie"].includes(ps?.type);
+            },
+            defaultValueHint: false,
+            defaultValue: false,
+          },
+        },
+      },
+    },
+    layout: {
+      type: "choice",
+      hidden: (ps) => {
+        return ps.type != "bar";
+      },
+      options: [
+        {
+          label: "Vertical",
+          value: "vertical",
+        },
+        {
+          label: "Horizontal",
+          value: "horizontal",
+        },
+      ],
+      defaultValue: "vertical",
+      defaultValueHint: "horizontal",
+    },
+    cartesianGrid: {
+      displayName: "Cartesian grid",
+      type: "choice",
+      hidden: (ps) => ps.type === "pie",
+      multiSelect: true,
+      options: [
+        {
+          label: "Vertical",
+          value: "vertical",
+        },
+        {
+          label: "Horizontal",
+          value: "horizontal",
+        },
+      ],
+    },
+    xAxis: {
+      displayName: "X axis",
+      type: "object",
+      hidden: (ps) => ps.type === "pie",
+      nameFunc: (item: any) => (item?.enabled ? item?.key : "Configure..."),
+      fields: {
+        enabled: "boolean",
+        key: {
+          type: "choice",
+          options: (ps) => {
+            return ["auto", ...Object.keys(ps.data?.[0] ?? [])];
+          },
+        },
+        type: {
+          type: "choice",
+          hidden: (_, __, ps) => {
+            return ps.item?.key === "auto";
+          },
+          options: [
+            {
+              label: "Category",
+              value: "category",
+            },
+            {
+              label: "Number",
+              value: "number",
+            },
+          ],
+        },
+        tickLine: "boolean",
+        tickMargin: {
+          type: "number",
+          defaultValue: 10,
+          defaultValueHint: 10,
+        },
+        axisLine: "boolean",
+      },
+    },
+    yAxis: {
+      displayName: "Y axis",
+      type: "object",
+      hidden: (ps) => ps.type === "pie",
+      nameFunc: (item: any) => (item?.enabled ? item?.key : "Configure..."),
+      fields: {
+        enabled: "boolean",
+        key: {
+          type: "choice",
+          options: (ps) => {
+            return ["auto", ...Object.keys(ps.data?.[0] ?? [])];
+          },
+        },
+        type: {
+          type: "choice",
+          hidden: (_, __, ps) => {
+            return ps.item?.key === "auto";
+          },
+          options: [
+            {
+              label: "Category",
+              value: "category",
+            },
+            {
+              label: "Number",
+              value: "number",
+            },
+          ],
+        },
+        tickLine: "boolean",
+        tickMargin: {
+          type: "number",
+          defaultValue: 10,
+          defaultValueHint: 10,
+        },
+        axisLine: "boolean",
+      },
+    },
+    tooltip: {
+      displayName: "Tooltip",
+      type: "object",
+      fields: {
+        enabled: "boolean",
+        indicator: {
+          type: "choice",
+          options: [
+            {
+              label: "dot",
+              value: "dot",
+            },
+            {
+              label: "line",
+              value: "line",
+            },
+            {
+              label: "dashed",
+              value: "dashed",
+            },
+          ],
+        },
+        hideLabel: "boolean",
+        hideIndicator: "boolean",
+      },
+    },
+    label: "boolean",
+    stack: {
+      type: "boolean",
+      hidden: (ps) => ps.type === "pie",
+    },
+    legend: {
+      type: "boolean",
+    },
+  },
+  classNameProp: "className",
+  defaultStyles: {
+    width: "stretch",
+  },
+};
diff --git a/src/fragment/components/date-picker.tsx b/src/fragment/components/date-picker.tsx
index d48017d1..fe8c7477 100644
--- a/src/fragment/components/date-picker.tsx
+++ b/src/fragment/components/date-picker.tsx
@@ -1,42 +1,128 @@
-import { Calendar } from "@hassanmojab/react-modern-calendar-datepicker";
-import "@hassanmojab/react-modern-calendar-datepicker/lib/DatePicker.css";
+import { Calendar, DateObject } from "react-multi-date-picker";
+import persian from "react-date-object/calendars/persian";
+import persian_fa from "react-date-object/locales/persian_fa";
+
 import { CodeComponentMeta } from "@plasmicapp/host";
 
 import moment from "jalali-moment";
+import { cn } from "@/lib/utils";
+import React from "react";
 
-export const DatePicker = ({ onChange, locale, holidays = [], value }: any) => {
-  const dateToJson = (value: number) => {
-    const date = moment(value * 1000).locale(locale);
-    return {
-      year: date.year(),
-      month: date.month() + 1,
-      day: date.date(),
-    };
-  };
+export const DatePicker = ({
+  onChange,
+  locale,
+  holidays = [],
+  value,
+  mode,
+  values = [],
+  dayCell,
+  customDayCell,
+}: any) => {
   return (
-    <Calendar
-      onChange={(value: any) => {
-        return onChange(
-          moment(
-            `${value?.year}/${value?.month}/${value?.day}`,
-            "jYYYY/jMM/jDD",
-            locale
+    <>
+      <Calendar
+        monthYearSeparator="|"
+        multiple={mode === "multiple"}
+        value={
+          mode === "multiple"
+            ? (Array.isArray(values) ? values : [values]).map(
+                (item: any) => item * 1000
+              )
+            : value * 1000
+        }
+        onChange={(value: any) => {
+          Array.isArray(value)
+            ? onChange(value.map((item) => item.unix))
+            : onChange(value.unix);
+        }}
+        className={cn("fragment", { "custom-day-cell": customDayCell })}
+        {...(locale === "fa" && {
+          calendar: persian,
+          locale: {
+            ...persian_fa,
+            weekDays: persian_fa.weekDays.map((item) => [
+              item[0],
+              item[1].slice(0, 1),
+            ]),
+          },
+        })}
+        shadow={false}
+        mapDays={({ date, today, isSameDate, selectedDate }) => {
+          let isWeekend = (locale === "fa" ? [6] : [0, 6]).includes(
+            date.weekDay.index
+          );
+          if (customDayCell && !!dayCell) {
+            return {
+              style: {},
+              class: "fragment-day-reset-cell",
+              children: React.createElement(dayCell, {
+                unix: date.unix,
+                date: { day: date.day, month: date.month, year: date.year },
+                isToday: isSameDate(date, today),
+                isWeekend,
+                isHoliday: holidays.some(
+                  (item: number) =>
+                    moment(+item * 1000)
+                      .startOf("day")
+                      .unix() ==
+                    moment(date.unix * 1000)
+                      .startOf("day")
+                      .unix()
+                ),
+                isSelected: Array.isArray(selectedDate)
+                  ? selectedDate.some(
+                      (item) =>
+                        moment(+item.unix * 1000)
+                          .startOf("day")
+                          .unix() ==
+                        moment(date.unix * 1000)
+                          .startOf("day")
+                          .unix()
+                    )
+                  : isSameDate(date, selectedDate),
+              }),
+            };
+          }
+          let props: any = {};
+
+          props.class = "fragment-day-cell";
+
+          if (isWeekend) props.class = "fragment-day-holiday-cell";
+
+          if (isSameDate(date, today)) props.class = "fragment-day-today-cell";
+
+          if (
+            holidays.some(
+              (item: number) =>
+                moment(+item * 1000)
+                  .startOf("day")
+                  .unix() ==
+                moment(date.unix * 1000)
+                  .startOf("day")
+                  .unix()
+            )
           )
-            .locale("en")
-            .unix()
-        );
-      }}
-      locale={locale}
-      customDaysClassName={holidays.map((d: any) => {
-        return {
-          ...dateToJson(d),
-          className: "holiday-style",
-        };
-      })}
-      {...(value && {
-        value: dateToJson(value),
-      })}
-    />
+            props.class = "fragment-day-holiday-cell";
+
+          if (
+            Array.isArray(selectedDate)
+              ? selectedDate.some(
+                  (item) =>
+                    moment(+item.unix * 1000)
+                      .startOf("day")
+                      .unix() ==
+                    moment(date.unix * 1000)
+                      .startOf("day")
+                      .unix()
+                )
+              : isSameDate(date, selectedDate)
+          )
+            props.class = "fragment-day-active-cell";
+
+          return props;
+        }}
+      />
+    </>
   );
 };
 
@@ -45,7 +131,12 @@ export const datePickerMeta: CodeComponentMeta<any> = {
   displayName: "Fragment/DatePicker",
   importPath: "@/fragment/components/date-picker",
   props: {
-    value: { type: "number" },
+    value: { type: "number", hidden: (ps) => ps.mode === "multiple" },
+    values: {
+      type: "array",
+      hidden: (ps) => ps.mode === "single",
+      defaultValue: [],
+    },
     onChange: {
       type: "eventHandler",
       argTypes: [
@@ -60,11 +151,31 @@ export const datePickerMeta: CodeComponentMeta<any> = {
       type: "choice",
       options: ["fa", "en"],
     },
+    mode: {
+      type: "choice",
+      options: [
+        {
+          label: "Single",
+          value: "single",
+        },
+        {
+          label: "Multiple",
+          value: "multiple",
+        },
+      ],
+    },
     holidays: {
       defaultValue: [],
       type: "array",
       helpText: "Array of day timestamps, e.g., [1710534600, 1710707400].",
     },
+    customDayCell: "boolean",
+    dayCell: {
+      displayName: "Custom Day Cell",
+      type: "slot",
+      renderPropParams: ["dateProps"],
+      hidden: (ps) => !ps.customDayCell,
+    },
   },
   states: {
     value: {
@@ -72,6 +183,14 @@ export const datePickerMeta: CodeComponentMeta<any> = {
       variableType: "number",
       valueProp: "value",
       onChangeProp: "onChange",
+      hidden: (ps) => ps.mode === "multiple",
+    },
+    values: {
+      type: "writable",
+      variableType: "array",
+      valueProp: "values",
+      onChangeProp: "onChange",
+      hidden: (ps) => ps.mode === "single",
     },
   },
 };
diff --git a/src/fragment/components/time-picker.tsx b/src/fragment/components/time-picker.tsx
index b7b41241..5c81b54d 100644
--- a/src/fragment/components/time-picker.tsx
+++ b/src/fragment/components/time-picker.tsx
@@ -1,14 +1,34 @@
-import { CodeComponentMeta } from "@plasmicapp/host";
+import { CodeComponentMeta, useSelector } from "@plasmicapp/host";
+import { useEffect } from "react";
 
 import { Timeit } from "react-timeit";
 
-export const TimePicker = ({ onChange, value = "00:00" }: any) => {
+export const TimePicker = ({
+  onChange,
+  value = "00:00",
+  hourExclude,
+  minuteExclude,
+  notShowExclude,
+}: any) => {
+  const fragmentConfig = useSelector("Fragment");
+
+  useEffect(() => {
+    changeTheme(fragmentConfig?.primaryColor);
+  }, [fragmentConfig?.primaryColor]);
+
+  const changeTheme = (color: string) => {
+    document.documentElement.style.setProperty("--timeit-primary-color", color);
+  };
+
   return (
     <Timeit
       onChange={(time) => {
         if (value !== time) onChange(time);
       }}
       defualtValue={value}
+      hourExclude={hourExclude}
+      minuteExclude={minuteExclude}
+      notShowExclude={notShowExclude}
     />
   );
 };
@@ -19,6 +39,17 @@ export const timePickerMeta: CodeComponentMeta<any> = {
   importPath: "@/fragment/components/time-picker",
   props: {
     value: { type: "string", defaultValue: "00:00" },
+    hourExclude: {
+      type: "array",
+      helpText: "[18, 20, 22]",
+    },
+    minuteExclude: {
+      type: "array",
+      helpText: "[15, 30, 25]",
+    },
+    notShowExclude: {
+      type: "boolean",
+    },
     onChange: {
       type: "eventHandler",
       argTypes: [
diff --git a/src/fragment/fragment.tsx b/src/fragment/fragment.tsx
index 8014b497..380ef4d0 100644
--- a/src/fragment/fragment.tsx
+++ b/src/fragment/fragment.tsx
@@ -12,6 +12,7 @@ type FragmentProps = React.PropsWithChildren<{
   previewApiConfig: Record<string, any>;
   apiConfig: Record<string, any>;
   rtl: boolean;
+  primaryColor: string;
 }>;
 
 export const Fragment = ({
@@ -19,7 +20,16 @@ export const Fragment = ({
   previewApiConfig,
   apiConfig,
   rtl,
+  primaryColor,
 }: FragmentProps) => {
+  useEffect(() => {
+    changeTheme(primaryColor);
+  }, [primaryColor]);
+
+  const changeTheme = (color: string) => {
+    document.documentElement.style.setProperty("--primary", color);
+  };
+
   const actions = useMemo(
     () => ({
       showToast: (
@@ -79,6 +89,7 @@ export const Fragment = ({
           apiConfig: apiConfig ?? {},
           previewApiConfig: previewApiConfig ?? {},
           rtl,
+          primaryColor,
         }}
         hidden
       >
@@ -114,6 +125,12 @@ export const fragmentMeta: GlobalContextMeta<FragmentProps> = {
       type: "boolean",
       description: `Direction`,
     },
+    primaryColor: {
+      displayName: "Primary Color",
+      type: "color",
+      defaultValue: "#000000",
+      defaultValueHint: "#000000",
+    },
   },
   providesData: true,
   globalActions: {
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 3c431dbd..ee05c8a6 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,22 +1,11 @@
 import "@/styles/globals.css";
+import "@/styles/date-picker.css";
+
 import { PlasmicRootProvider } from "@plasmicapp/react-web";
 import type { AppProps } from "next/app";
 import Head from "next/head";
-import localFont from "next/font/local";
-import { useEffect } from "react";
-
-const iransansFont = localFont({
-  src: "../../public/fonts/IRANSansXV.woff2",
-  variable: "--iran-sans-x",
-  preload: true,
-  display: "swap",
-});
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-  useEffect(() => {
-    document.body.classList.add(iransansFont.variable);
-  }, []);
-
   return (
     <PlasmicRootProvider Head={Head}>
       <Component {...pageProps} />
diff --git a/src/pages/plasmic-host.tsx b/src/pages/plasmic-host.tsx
index 6d6d1ea3..f208342c 100644
--- a/src/pages/plasmic-host.tsx
+++ b/src/pages/plasmic-host.tsx
@@ -16,6 +16,7 @@ import { Input, inputMeta } from "@/fragment/components/input";
 import { Switch, switchMeta } from "@/fragment/components/switch";
 import { ApiRequest, apiRequestMeta } from "@/fragment/components/api-request";
 import { Slider, sliderMeta } from "@/fragment/components/slider";
+import { Chart, chartMeta } from "@/fragment/components/chart";
 
 export default function PlasmicHost() {
   return <PlasmicCanvasHost />;
@@ -32,3 +33,4 @@ registerComponent(Input, inputMeta);
 registerComponent(Switch, switchMeta);
 registerComponent(Slider, sliderMeta);
 registerComponent(ApiRequest, apiRequestMeta);
+registerComponent(Chart, chartMeta);
diff --git a/src/styles/date-picker.css b/src/styles/date-picker.css
new file mode 100644
index 00000000..2df924ce
--- /dev/null
+++ b/src/styles/date-picker.css
@@ -0,0 +1,54 @@
+.fragment .rmdp-week-day {
+  @apply text-gray-300 !w-full select-none font-light text-xs;
+}
+
+.fragment.custom-day-cell .rmdp-week .rmdp-day {
+  @apply !w-full !h-auto;
+}
+
+.fragment.fragment.custom-day-cell .rmdp-week .rmdp-day span {
+  font-size: inherit;
+  @apply !text-inherit !inset-auto !static !rounded-none !shadow-none !p-0 select-none hover:!bg-transparent !bg-transparent;
+}
+
+/* --------- */
+
+.fragment-day-today-cell {
+  @apply !text-slate-700 select-none !bg-transparent flex justify-center after:transition-all after:duration-500 after:opacity-100 items-center font-bold after:absolute after:bg-slate-300 relative after:w-2 after:h-[1.5px] after:rounded-full after:bottom-px hover:!bg-slate-100/100 hover:!text-slate-700 hover:after:opacity-0;
+}
+
+.fragment-day-cell {
+  @apply text-slate-500 select-none bg-slate-100/0 transition-all duration-300 p-3 flex justify-center items-center hover:!bg-slate-100/100 hover:!text-slate-500;
+}
+
+.fragment-day-holiday-cell {
+  @apply text-red-400 select-none bg-red-50/0 p-3 flex justify-center items-center transition-all duration-300 hover:!bg-red-50/50 hover:!text-red-400;
+}
+
+.fragment-day-active-cell {
+  @apply !bg-primary select-none !shadow-none flex justify-center items-center p-3;
+}
+
+/* --------------- */
+
+.fragment .rmdp-ym .rmdp-day span {
+  @apply text-slate-500 select-none bg-slate-100/0 transition-all duration-300 !py-1 flex justify-center items-center hover:!bg-slate-100/100 hover:!text-slate-500;
+}
+
+.fragment .rmdp-ym .rmdp-day.rmdp-today span {
+  @apply !text-slate-700 select-none !bg-transparent flex justify-center after:transition-all after:duration-500 after:opacity-100 items-center font-bold after:absolute after:bg-slate-300 relative after:w-2 after:h-[1.5px] after:rounded-full after:bottom-px hover:!bg-slate-100/100 hover:!text-slate-700 hover:after:opacity-0;
+}
+
+.fragment .rmdp-ym .rmdp-day.rmdp-selected span {
+  @apply !bg-primary !text-white select-none after:!hidden !shadow-none flex justify-center items-center;
+}
+
+.fragment .rmdp-arrow {
+  @apply border-primary m-0;
+}
+.fragment .rmdp-arrow-container {
+  @apply flex justify-center items-center;
+}
+.fragment .rmdp-arrow-container:hover {
+  @apply bg-primary;
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index cc732f21..6a8e40ab 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,5 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Vazirmatn%3Aital%2Cwght%400%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B0%2C900&family=Inconsolata%3Aital%2Cwght%400%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B0%2C900&display=swap");
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -15,7 +13,7 @@
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
 
-    --primary: 222.2 47.4% 11.2%;
+    --primary: hsl(222.2 47.4% 11.2%);
     --primary-foreground: 210 40% 98%;
 
     --secondary: 210 40% 96.1%;
@@ -36,36 +34,6 @@
 
     --radius: 0.5rem;
   }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-  }
 }
 
 @layer base {
@@ -81,56 +49,10 @@
   z-index: 999 !important;
 }
 
-* {
-  direction: rtl;
-}
-
-* {
-  -moz-font-feature-settings: "ss02";
-  -webkit-font-feature-settings: "ss02";
-  font-feature-settings: "ss02";
-  font-family: var(--iran-sans-x), tahoma;
-}
-
-@layer utilities {
-  .font-thin {
-    font-weight: 100;
-    font-variation-settings: "wght" 100;
-  }
-  .font-extralight {
-    font-weight: 200;
-    font-variation-settings: "wght" 200;
-  }
-  .font-light {
-    font-weight: 300;
-    font-variation-settings: "wght" 300;
-  }
-  .font-normal {
-    font-weight: 400;
-    font-variation-settings: "wght" 400;
-  }
-  .font-medium {
-    font-weight: 500;
-    font-variation-settings: "wght" 500;
-  }
-  .font-semibold {
-    font-weight: 600;
-    font-variation-settings: "wght" 600;
-  }
-  .font-bold {
-    font-weight: 700;
-    font-variation-settings: "wght" 700;
-  }
-  .font-extrabold {
-    font-weight: 800;
-    font-variation-settings: "wght" 800;
-  }
-  .font-black {
-    font-weight: 900;
-    font-variation-settings: "wght" 900;
-  }
+.holiday-style.-selected {
+  @apply !text-white;
 }
 
-button {
-  font-family: var(--iran-sans-x), tahoma !important;
+.holiday-style {
+  @apply !text-red-500;
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 84287e82..d8199679 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,13 +1,13 @@
-import type { Config } from "tailwindcss"
+import type { Config } from "tailwindcss";
 
 const config = {
   darkMode: ["class"],
   content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-	],
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+  ],
   prefix: "",
   theme: {
     container: {
@@ -25,7 +25,7 @@ const config = {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
         primary: {
-          DEFAULT: "hsl(var(--primary))",
+          DEFAULT: "var(--primary)",
           foreground: "hsl(var(--primary-foreground))",
         },
         secondary: {
@@ -75,6 +75,6 @@ const config = {
     },
   },
   plugins: [require("tailwindcss-animate")],
-} satisfies Config
+} satisfies Config;
 
-export default config
\ No newline at end of file
+export default config;