diff --git a/src/components/global/Accardion.tsx b/src/components/global/Accardion.tsx
deleted file mode 100644
index e4400f2a..00000000
--- a/src/components/global/Accardion.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, { ReactElement } from 'react';
-import { Accordion, AccordionDetails, AccordionSummary } from '@mui/material';
-import { MdExpandMore } from 'react-icons/md';
-
-type AcProps = {
-  readonly title?: string;
-  childs: AcChildProps[];
-};
-
-type AcChildProps = {
-  title: string;
-  id: string;
-  icon?: ReactElement;
-  detailsComponent: ReactElement;
-};
-
-export default function Accardion({ title, childs }: AcProps) {
-  const [expanded, setExpanded] = React.useState<string | false>(false);
-
-  const handleChange =
-    (panel: string) => (_event: React.SyntheticEvent, isExpanded: boolean) => {
-      setExpanded(isExpanded ? panel : false);
-    };
-
-  return (
-    <>
-      <p className="text-lite-gray text-sm pt-4">{title}</p>
-      {childs.map((el) => (
-        <Accordion
-          className={
-            expanded === el.id ? 'shadow-base my-5 rounded-xl' : 'my-5'
-          }
-          expanded={expanded === el.id}
-          onChange={handleChange(el.id)}
-          id={el.id}
-          key={el.id}
-          disableGutters
-          sx={{
-            boxShadow: 'none',
-            '&:before': {
-              display: 'none',
-            },
-          }}
-        >
-          <AccordionSummary
-            expandIcon={
-              <MdExpandMore color="#37474F" size={25} fill="#37474F" />
-            }
-            aria-controls={`${el.id}-content`}
-            id={el.id}
-          >
-            <div className="flex flex-row items-center space-x-3">
-              <div className="h-8 w-8 text-xs md:text-lg md:h-8 md:w-8 bg-gray-background rounded-full justify-center flex font-bold text-gray-500	items-center text-center">
-                {el.icon}
-              </div>
-              <p className="font-bold text-base">{el.title}</p>
-            </div>
-          </AccordionSummary>
-          <AccordionDetails className="mx-4 mb-3 md:ml-11">
-            {el.detailsComponent}
-          </AccordionDetails>
-        </Accordion>
-      ))}
-    </>
-  );
-}
diff --git a/src/components/global/Card.tsx b/src/components/global/Card.tsx
deleted file mode 100644
index fc0ae5c2..00000000
--- a/src/components/global/Card.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-import Image from "next/image";
-
-type Props = {
-  className?: string;
-  title: string;
-  srcImage: string;
-  srcWidth: number;
-};
-
-export default function Card({ className, title, srcImage, srcWidth }: Props) {
-  return (
-    <div className={clsx("w-1/2 shadow-lg rounded-xl p-6", className)}>
-      <p className="text-2xl font-bold">{title}</p>
-      <div className="w-full">
-        <div className="pb-1 pt-12 w-1/2 relative float-right">
-          <Image src={srcImage} alt="Picture of the author" width={srcWidth} />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-Card.defaultProps = {
-  title: "",
-  srcWidth: "400",
-};
diff --git a/src/components/global/CustomDatePicker.tsx b/src/components/global/CustomDatePicker.tsx
deleted file mode 100644
index 45ede02b..00000000
--- a/src/components/global/CustomDatePicker.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, { FC, RefObject, useState } from 'react';
-import '@hassanmojab/react-modern-calendar-datepicker/lib/DatePicker.css';
-import DatePicker, {
-  DayRange,
-} from '@hassanmojab/react-modern-calendar-datepicker';
-import { FiCalendar } from 'react-icons/fi';
-import clsx from 'clsx';
-import moment from 'moment';
-
-interface IProps {
-  placeholder?: string;
-  className: string;
-  onClick: any;
-}
-
-const CustomDatePicker: FC<IProps> = ({
-  placeholder,
-  className,
-  onClick,
-}): JSX.Element => {
-  const [dayRange, setDayRange] = useState<DayRange>({
-    from: null,
-    to: null,
-  });
-
-  const renderCustomInput = ({
-    ref,
-  }: {
-    ref: RefObject<HTMLInputElement> | any;
-  }) => (
-    <div
-      onClick={onClick}
-      className={clsx(
-        'flex flex-row bg-gray-background text-center py-2.5 md:py-2 px-3 text-sm rounded-md cursor-pointer',
-        className
-      )}
-    >
-      <FiCalendar size={20} className="mr-2" />
-      <input
-        ref={ref}
-        readOnly
-        value={
-          dayRange.from
-            ? ` ${moment(dayRange.from?.month).format('MMM')} ${moment(
-                dayRange.from?.day
-              ).format('DD')} - ${
-                dayRange.to?.month
-                  ? moment(dayRange.to?.month).format('MMM')
-                  : ''
-              } ${dayRange.to?.day ? dayRange.to?.day : ''}  ${
-                dayRange.to?.year ? dayRange.to?.year : ''
-              }`
-            : ''
-        }
-        placeholder={placeholder}
-        className="bg-transparent outline-none"
-      />
-    </div>
-  );
-
-  return (
-    <DatePicker
-      value={dayRange}
-      onChange={(date) => setDayRange(date)}
-      renderInput={renderCustomInput}
-      colorPrimary="#35B9B7" // added this
-      colorPrimaryLight="#D0FBF8" // and this
-      calendarPopperPosition="bottom"
-    />
-  );
-};
-
-CustomDatePicker.defaultProps = {
-  placeholder: 'Specific date',
-};
-
-export default CustomDatePicker;
diff --git a/src/components/global/CustomModal.tsx b/src/components/global/CustomModal.tsx
deleted file mode 100644
index 3209fa9a..00000000
--- a/src/components/global/CustomModal.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Dialog, DialogTitle, DialogContent } from '@mui/material';
-import { IoClose } from 'react-icons/io5';
-
-type IModalProps = {
-  isOpen: boolean;
-  toggleModal: (arg0: boolean) => void;
-  children: any;
-  hasClose: boolean;
-};
-export default function ConfirmModal({
-  isOpen,
-  toggleModal,
-  children,
-  hasClose,
-  ...props
-}: IModalProps) {
-  const handleClose = () => {
-    toggleModal(false);
-  };
-  return (
-    <>
-      <Dialog
-        open={isOpen}
-        onClose={handleClose}
-        sx={{
-          '& .MuiDialog-container': {
-            alignItems: 'flex-start',
-            verticalAlign: 'top',
-            '& .MuiPaper-root': {
-              width: '100%',
-              maxWidth: '650px',
-              borderRadius: '10px',
-              overflow: 'visible',
-            },
-            '& .MuiDialogContent-root': {
-              overflow: 'visible',
-            },
-          },
-        }}
-        {...props}
-      >
-        {hasClose ? (
-          <DialogTitle
-            id="alert-dialog-title"
-            className="flex flex-row justify-end"
-          >
-            <IoClose
-              size={30}
-              onClick={handleClose}
-              className="cursor-pointer"
-            />
-          </DialogTitle>
-        ) : (
-          ''
-        )}
-        <DialogContent>{children}</DialogContent>
-      </Dialog>
-    </>
-  );
-}
diff --git a/src/components/global/DatePeriodRange.tsx b/src/components/global/DatePeriodRange.tsx
deleted file mode 100644
index 826d0b95..00000000
--- a/src/components/global/DatePeriodRange.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import clsx from 'clsx';
-import React, { useState } from 'react';
-import CustomDatePicker from './CustomDatePicker';
-
-type dateItems = {
-  title: string;
-  icon?: JSX.Element;
-  value: any;
-};
-
-const datePeriod: dateItems[] = [
-  {
-    title: 'Last 35 days',
-    value: 1,
-  },
-  {
-    title: '3M',
-    value: 2,
-  },
-  {
-    title: '6M',
-    value: 3,
-  },
-  {
-    title: '1Y',
-    value: 4,
-  },
-];
-
-type datePeriodRangeProps = {
-  activePeriod: string | number;
-  onChangeActivePeriod: (e: number) => void;
-};
-
-export default function DatePeriodRange({
-  activePeriod,
-  onChangeActivePeriod,
-}: datePeriodRangeProps) {
-  return (
-    <div className="flex flex-row md:space-x-3 flex-wrap">
-      <ul className="flex flex-row flex-wrap space-x-1.5 md:space-x-3">
-        {datePeriod.length > 0
-          ? datePeriod.map((el) => (
-              <li
-                className={`
-                           flex flex-row items-center px-3 md:px-2.5 py-2 mb-2 md:py-1.5 rounded-md cursor-pointer
-                           ${
-                             activePeriod == el.value
-                               ? 'bg-black text-white'
-                               : 'bg-gray-background'
-                           }`}
-                key={el.value}
-                onClick={() => onChangeActivePeriod(el.value)}
-              >
-                {el.icon ? el.icon : ''}
-                <div>{el.title}</div>
-              </li>
-            ))
-          : ''}
-      </ul>
-    </div>
-  );
-}
diff --git a/tsconfig.json b/tsconfig.json
index b194c6be..e313683d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,5 +22,5 @@
     "jest.config.js",
     "jest.setup.js"
   ],
-  "exclude": ["node_modules", "./src/components/global/CustomDatePicker.tsx"]
+  "exclude": ["node_modules"]
 }