diff --git a/src/components/ReadingPanel/ReadingPanel.stories.tsx b/src/components/ReadingPanel/ReadingPanel.stories.tsx
index b3a5879..ec7d4fc 100644
--- a/src/components/ReadingPanel/ReadingPanel.stories.tsx
+++ b/src/components/ReadingPanel/ReadingPanel.stories.tsx
@@ -1,6 +1,7 @@
 // Button.stories.ts|tsx
 
 import type { Meta, StoryObj } from "@storybook/react";
+import { ButtonTypes, PanelDirections } from "../../constants";
 
 import { ReadingPanel } from "./ReadingPanel";
 
@@ -48,7 +49,7 @@ export const Vertical: Story = {
   ...ReadingPanelTemplate,
   args: {
     settings: {
-      direction: "vertical",
+      direction: PanelDirections.,
     },
   },
 };
@@ -58,7 +59,7 @@ export const Partial: Story = {
   args: {
     settings: {
       startOpen: true,
-      showButtons: ["increase_font_size", "change_colors"],
+      showButtons: [ButtonTypes.INCREASE_FONT_SIZE, ButtonTypes.CHANGE_COLORS],
     },
   },
 };
diff --git a/src/components/ReadingPanel/ReadingPanel.styles.ts b/src/components/ReadingPanel/ReadingPanel.styles.ts
index d45c619..5f36cb0 100644
--- a/src/components/ReadingPanel/ReadingPanel.styles.ts
+++ b/src/components/ReadingPanel/ReadingPanel.styles.ts
@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { PanelDirection } from "./settings/settings.types";
+import { PanelDirections } from "../../constants";
 
 export const PanelButton = styled.button`
   height: 35px;
@@ -17,7 +18,7 @@ export const PanelButton = styled.button`
 export const Container = styled.div<{ direction?: PanelDirection }>`
   display: flex;
   flex-direction: ${(props) =>
-    props.direction === "vertical" ? "column" : "row"};
+    props.direction === PanelDirections.VERTICAL ? "column" : "row"};
   align-items: center;
   background: white;
   padding: 5px 2px;
diff --git a/src/components/ReadingPanel/ReadingPanel.tsx b/src/components/ReadingPanel/ReadingPanel.tsx
index 5e11ae9..3c4d026 100644
--- a/src/components/ReadingPanel/ReadingPanel.tsx
+++ b/src/components/ReadingPanel/ReadingPanel.tsx
@@ -19,6 +19,7 @@ import { increaseLetterSpacing } from "./letter-spacing/increase-letter-spacing.
 import { decreaseLineHeight } from "./line-height/decrease-line-height.util";
 import { increaseLineHeight } from "./line-height/increase-line-height.util";
 import { Settings, defaultSettings } from "./settings/settings.types";
+import { ButtonTypes } from "../../constants";
 
 interface Props {
   targetClass?: string;
@@ -162,37 +163,37 @@ export function ReadingPanel({
 
       {isOpen && (
         <>
-          {showButtons.includes("increase_font_size") && (
+          {showButtons.includes(ButtonTypes.INCREASE_FONT_SIZE) && (
             <PanelButton onClick={handleFontIncrease}>
               <MdTextIncrease></MdTextIncrease>
             </PanelButton>
           )}
-          {showButtons.includes("decrease_font_size") && (
+          {showButtons.includes(ButtonTypes.DECREASE_FONT_SIZE) && (
             <PanelButton onClick={handleFontDecrease}>
               <MdTextDecrease></MdTextDecrease>
             </PanelButton>
           )}
-          {showButtons.includes("increase_line_height") && (
+          {showButtons.includes(ButtonTypes.INCREASE_LINE_HEIGHT) && (
             <PanelButton onClick={handleLineHeightIncrease}>
               <AiOutlineMenu></AiOutlineMenu>
             </PanelButton>
           )}
-          {showButtons.includes("decrease_line_height") && (
+          {showButtons.includes(ButtonTypes.DECREASE_LINE_HEIGHT) && (
             <PanelButton onClick={handleLineHeightDecrease}>
               <IoMenuOutline></IoMenuOutline>
             </PanelButton>
           )}
-          {showButtons.includes("change_colors") && (
+          {showButtons.includes(ButtonTypes.CHANGE_COLORS) && (
             <PanelButton onClick={handleColorChange}>
               <VscColorMode></VscColorMode>
             </PanelButton>
           )}
-          {showButtons.includes("increase_letter_spacing") && (
+          {showButtons.includes(ButtonTypes.INCREASE_LETTER_SPACING) && (
             <PanelButton>
               <FaExpandAlt onClick={handleLetterSpacingIncrease}></FaExpandAlt>
             </PanelButton>
           )}
-          {showButtons.includes("decrease_letter_spacing") && (
+          {showButtons.includes(ButtonTypes.DECREASE_LETTER_SPACING) && (
             <PanelButton onClick={handleLetterSpacingDecrease}>
               <ImShrink2></ImShrink2>
             </PanelButton>
diff --git a/src/components/ReadingPanel/settings/change-settings.util.ts b/src/components/ReadingPanel/settings/change-settings.util.ts
deleted file mode 100644
index e045746..0000000
--- a/src/components/ReadingPanel/settings/change-settings.util.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ColorSettings } from "./settings.types";
-
-export function changeTheme(
-  _element: HTMLElement,
-  _currentTheme: ColorSettings
-) {
-  console.log(`lint fix`);
-}
diff --git a/src/components/ReadingPanel/settings/settings.types.ts b/src/components/ReadingPanel/settings/settings.types.ts
index eec2b0e..86b88d7 100644
--- a/src/components/ReadingPanel/settings/settings.types.ts
+++ b/src/components/ReadingPanel/settings/settings.types.ts
@@ -1,3 +1,5 @@
+import { ButtonTypes, PanelDirections } from "../../../constants";
+
 export interface ColorSettings {
   bgLightColor: string;
   fgLightColor: string;
@@ -14,16 +16,10 @@ export const defaultColorSettings: ColorSettings = {
 
 export type Theme = "light" | "dark";
 
-export type PanelDirection = "horizontal" | "vertical";
+export type PanelDirection =
+  (typeof PanelDirections)[keyof typeof PanelDirections];
 
-export type ButtonType =
-  | "change_colors"
-  | "decrease_font_size"
-  | "decrease_letter_spacing"
-  | "decrease_line_height"
-  | "increase_font_size"
-  | "increase_letter_spacing"
-  | "increase_line_height";
+export type ButtonType = (typeof ButtonTypes)[keyof typeof ButtonTypes];
 
 export interface Settings {
   colorSettings: ColorSettings;
@@ -53,14 +49,6 @@ export const defaultSettings: Settings = {
   lineHeightsStep: 1,
   lineHeightUnits: "px",
   startOpen: false,
-  direction: "horizontal",
-  showButtons: [
-    "increase_font_size",
-    "decrease_font_size",
-    "increase_line_height",
-    "decrease_line_height",
-    "change_colors",
-    "increase_letter_spacing",
-    "decrease_letter_spacing",
-  ],
+  direction: PanelDirections.HORIZONTAL,
+  showButtons: Object.values(ButtonTypes),
 };
diff --git a/src/constants/index.ts b/src/constants/index.ts
new file mode 100644
index 0000000..c6a9fc0
--- /dev/null
+++ b/src/constants/index.ts
@@ -0,0 +1,14 @@
+export const ButtonTypes = {
+  INCREASE_FONT_SIZE: "increase_font_size",
+  DECREASE_FONT_SIZE: "decrease_font_size",
+  INCREASE_LINE_HEIGHT: "increase_line_height",
+  DECREASE_LINE_HEIGHT: "decrease_line_height",
+  CHANGE_COLORS: "change_colors",
+  INCREASE_LETTER_SPACING: "increase_letter_spacing",
+  DECREASE_LETTER_SPACING: "decrease_letter_spacing",
+};
+
+export const PanelDirections = {
+  HORIZONTAL: "horizontal",
+  VERTICAL: "vertical",
+};