diff --git a/.eslintrc.json b/.eslintrc.json
index 3179b9f..c71cce3 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -10,7 +10,7 @@
         "plugin:react/recommended",
         "plugin:@typescript-eslint/recommended",
         "plugin:prettier/recommended",
-        "plugin:react-hooks/recommended",
+        // "plugin:react-hooks/recommended",
         "next/core-web-vitals"
     ],
     "overrides": [],
diff --git a/package.json b/package.json
index ac9c06c..7312e2a 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
         "lint": "eslint --ignore-path .gitignore .",
         "lint:fix": "eslint --ignore-path .gitignore --fix .",
         "pret": "prettier -c .",
-        "pret:fix": "prettier --ignore-path .gitignore --config ./.prettierrc --write './**/*.{js,jsx,ts,tsx,css,md,json}'",
+        "pret:fix": "prettier --ignore-path .gitignore --config ./.prettierrc --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\"",
         "code-style": "npm run pret && npm run lint",
         "code-style:fix": "npm run pret:fix && npm run pret:fix",
         "build": "npm run code-style && npm run clean && rollup -c",
diff --git a/src/components/Shortcuts.tsx b/src/components/Shortcuts.tsx
index ae54b21..bddcd41 100644
--- a/src/components/Shortcuts.tsx
+++ b/src/components/Shortcuts.tsx
@@ -1,7 +1,7 @@
 import dayjs from "dayjs";
 import React, { useCallback, useContext, useMemo } from "react";
 
-import { DATE_FORMAT, TEXT_COLOR } from "../constants";
+import { DATE_FORMAT, TEXT_COLOR, BG_COLOR } from "../constants";
 import DEFAULT_SHORTCUTS from "../constants/shortcuts";
 import DatepickerContext from "../contexts/DatepickerContext";
 import { Period, ShortcutsItem } from "../types";
@@ -29,8 +29,14 @@ const ItemTemplate = React.memo((props: ItemTemplateProps) => {
     const getClassName: () => string = useCallback(() => {
         const textColor = TEXT_COLOR["600"][primaryColor as keyof (typeof TEXT_COLOR)["600"]];
         const textColorHover = TEXT_COLOR.hover[primaryColor as keyof typeof TEXT_COLOR.hover];
-        return `whitespace-nowrap w-1/2 md:w-1/3 lg:w-auto transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 p-2 rounded cursor-pointer ${textColor} ${textColorHover}`;
-    }, [primaryColor]);
+        const bgColor = BG_COLOR["500"][primaryColor as keyof (typeof BG_COLOR)["500"]];
+        const bgColorHover = BG_COLOR.hover[primaryColor as keyof typeof BG_COLOR.hover];
+        const isSelected =
+            period.start === props?.item.period.start && period.end === props?.item.period.end;
+        return `whitespace-nowrap w-1/2 md:w-1/3 lg:w-auto transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 p-2 rounded cursor-pointer ${textColor} ${textColorHover} ${
+            isSelected ? bgColor + " text-white " + bgColorHover : ""
+        }`;
+    }, [primaryColor, period, props?.item.period]);
 
     const chosePeriod = useCallback(
         (item: Period) => {