diff --git a/src/components/index.tsx b/src/components/index.tsx
index 9d6db22..a8c1015 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -1,6 +1,6 @@
 import { twMerge } from "tailwind-merge";
 import { useEvents, useInteractions } from "@/hooks";
-import { type ISTKProps, STKMode } from "@/types";
+import { type ISTKProps } from "@/types";
 import { default as Controls } from "./controls";
 import { default as Footer } from "./footer";
 import { default as Operations } from "./operations";
@@ -46,7 +46,7 @@ const User: React.FC<ISTKProps> = (props) => {
 };
 
 const Core = (props: ISTKProps) => {
-  if (props.mode === STKMode.Designer) {
+  if (props.mode === "designer") {
     return <Designer {...props} />;
   }
   return <User {...props} />;
diff --git a/src/components/workspace/elements/index.tsx b/src/components/workspace/elements/index.tsx
index e214590..d76621b 100644
--- a/src/components/workspace/elements/index.tsx
+++ b/src/components/workspace/elements/index.tsx
@@ -5,7 +5,7 @@ import { twMerge } from "tailwind-merge";
 import { dataAttributes } from "@/constants";
 import { store } from "@/store";
 import { clearAndSelectElements, deselectElement, selectElement } from "@/store/reducers/editor";
-import { ISTKProps, STKMode } from "@/types";
+import { ISTKProps } from "@/types";
 import { Tool } from "../../toolbar/data";
 import {
   ElementType,
@@ -19,7 +19,20 @@ import {
 
 export * from "./utils";
 
-export const Element = ({ type = ElementType.Seat, id, x = 250, y = 250, isSelected = false, consumer, ...props }) => {
+interface IElementProps {
+  [prop: string]: any;
+  consumer: ISTKProps;
+}
+
+export const Element: React.FC<IElementProps> = ({
+  type = ElementType.Seat,
+  id,
+  x = 250,
+  y = 250,
+  isSelected = false,
+  consumer,
+  ...props
+}) => {
   const ref = useRef<HTMLElement>();
 
   const Element = elements[type] as any;
@@ -27,7 +40,7 @@ export const Element = ({ type = ElementType.Seat, id, x = 250, y = 250, isSelec
   const styles = (consumer as ISTKProps).styles?.elements;
 
   useEffect(() => {
-    if (!ref.current || consumer.mode !== STKMode.Designer) return;
+    if (!ref.current || consumer.mode !== "designer") return;
     const node = d3.select(ref.current);
     if (type === ElementType.Seat) {
       handleSeatDrag(node);
diff --git a/src/components/workspace/index.tsx b/src/components/workspace/index.tsx
index 4f08be9..6e33c00 100644
--- a/src/components/workspace/index.tsx
+++ b/src/components/workspace/index.tsx
@@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge";
 import { ids } from "@/constants";
 import { store } from "@/store";
 import { initializeElements, sync } from "@/store/reducers/editor";
-import { type ISTKProps, STKMode } from "@/types";
+import { type ISTKProps } from "@/types";
 import { Tool, tools } from "../toolbar/data";
 import { default as Crosshairs } from "./crosshairs";
 import { default as Element, ElementType } from "./elements";
@@ -123,7 +123,7 @@ export const Workspace: React.FC<ISTKProps> = (props) => {
           {selectedPolylineId && <line id={ids.templine} className="stroke-2 stroke-black fill-white" />}
         </g>
       </svg>
-      {props.mode === STKMode.Designer && (
+      {props.mode === "designer" && (
         <>
           <Crosshairs render={tools[selectedTool]?.crosshairs} />
           <Grid />
diff --git a/src/stories/designer.stories.tsx b/src/stories/designer.stories.tsx
index 30361bb..83f9f0e 100644
--- a/src/stories/designer.stories.tsx
+++ b/src/stories/designer.stories.tsx
@@ -1,5 +1,4 @@
 import SeatToolkit from "@/index";
-import { STKMode } from "@/types";
 
 export default {
   title: "Designer Mode",
@@ -11,5 +10,5 @@ export default {
 };
 
 export const Default = {
-  render: () => <SeatToolkit mode={STKMode.Designer} />
+  render: () => <SeatToolkit mode={"designer"} />
 };
diff --git a/src/stories/user.stories.tsx b/src/stories/user.stories.tsx
index f25fba7..8f35d59 100644
--- a/src/stories/user.stories.tsx
+++ b/src/stories/user.stories.tsx
@@ -1,5 +1,4 @@
 import SeatToolkit from "@/index";
-import { STKMode } from "@/types";
 
 export default {
   title: "User Mode",
@@ -13,7 +12,7 @@ export default {
 export const Default = {
   render: () => (
     <SeatToolkit
-      mode={STKMode.User}
+      mode={"user"}
       data={{
         seats: [
           {
diff --git a/src/types/elements/seat.ts b/src/types/elements/seat.ts
index 97d0f5f..3d9fd7a 100644
--- a/src/types/elements/seat.ts
+++ b/src/types/elements/seat.ts
@@ -1,4 +1,4 @@
-import { ISection } from "./polyline";
+import type { ISection } from "./polyline";
 
 export interface ISeatCategory {
   id: string;
diff --git a/src/types/index.ts b/src/types/index.ts
index eeac2d4..37c3106 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,12 +1,19 @@
-import { IBooth, IImage, IPolyline, IPopulatedSeat, ISeat, ISeatCategory, ISection, IShape, IText } from "./elements";
-import { IStyles } from "./styles";
+import type {
+  IBooth,
+  IImage,
+  IPolyline,
+  IPopulatedSeat,
+  ISeat,
+  ISeatCategory,
+  ISection,
+  IShape,
+  IText
+} from "./elements";
+import type { IStyles } from "./styles";
 
 export * from "./elements";
 
-export enum STKMode {
-  Designer = "designer",
-  User = "user"
-}
+export type STKMode = "designer" | "user";
 
 export interface IEvents {
   onSeatClick?: (seat: IPopulatedSeat) => void;