diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 564fbc7..975dab8 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -4,51 +4,6 @@ import './Controller.css';
 import { Controller } from './Controller';
 import { Projector } from './Projector';
 
-export const defaultVideos = [
-  {
-    id: 'video-1',
-    show: false,
-    position: { top: '5%', left: '10%' },
-    size: { width: '320px', height: '180px' },
-  },
-  {
-    id: 'video-2',
-    show: false,
-    position: { top: '37%', left: '10%' },
-    size: { width: '320px', height: '180px' },
-  },
-  {
-    id: 'video-3',
-    show: false,
-    position: { top: '70%', left: '10%' },
-    size: { width: '320px', height: '180px' },
-  },
-];
-
-export const defaultCounters = [
-  {
-    id: 'counter-1',
-    count: 0,
-    show: false,
-    position: { top: '0%', left: '60%' },
-    size: '4em',
-  },
-  {
-    id: 'counter-2',
-    count: 0,
-    show: false,
-    position: { top: '30%', left: '60%' },
-    size: '4em',
-  },
-  {
-    id: 'counter-3',
-    count: 0,
-    show: false,
-    position: { top: '60%', left: '60%' },
-    size: '4em',
-  },
-];
-
 export default function App() {
   return (
     <Router>
diff --git a/src/renderer/Controller.tsx b/src/renderer/Controller.tsx
index f5ee4b9..9965f1e 100644
--- a/src/renderer/Controller.tsx
+++ b/src/renderer/Controller.tsx
@@ -1,6 +1,9 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable import/prefer-default-export */
+/* eslint-disable no-else-return */
 import { useState } from 'react';
 import type { Counter, Position, Size, Video } from './types';
-import { defaultCounters, defaultVideos } from './App';
+import { defaultCounters, defaultVideos } from './const';
 
 // Controller Component
 export function Controller() {
@@ -119,7 +122,9 @@ export function Controller() {
   return (
     <div className="ctrl-controller-container">
       <h1>Theater VFX Controller</h1>
-      <button onClick={handleResetAll}>Reset to Defaults</button>{' '}
+      <button type="button" onClick={handleResetAll}>
+        Reset to Defaults
+      </button>{' '}
       <div className="ctrl-video-name-controls" style={{ display: 'none' }}>
         <label>
           Select Eye:
@@ -251,13 +256,22 @@ export function Controller() {
               )}
               {counter.show && (
                 <div className="ctrl-counter-controls">
-                  <button onClick={() => handleCounterChange(index, 1)}>
+                  <button
+                    type="button"
+                    onClick={() => handleCounterChange(index, 1)}
+                  >
                     +
                   </button>
-                  <button onClick={() => handleCounterChange(index, -1)}>
+                  <button
+                    type="button"
+                    onClick={() => handleCounterChange(index, -1)}
+                  >
                     -
                   </button>
-                  <button onClick={() => handleResetCounter(index)}>
+                  <button
+                    type="button"
+                    onClick={() => handleResetCounter(index)}
+                  >
                     Reset
                   </button>
                 </div>
diff --git a/src/renderer/Projector.tsx b/src/renderer/Projector.tsx
index 9a21e00..c096e65 100644
--- a/src/renderer/Projector.tsx
+++ b/src/renderer/Projector.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable import/prefer-default-export */
 import { useEffect, useState } from 'react';
 // import eye1 from '../../assets/media/eye1.mp4';
 import eye2 from '../../assets/media/eye2.mp4';
@@ -5,7 +6,7 @@ import type { Counter, Video } from './types';
 
 // Projector Component
 export function Projector() {
-  const [eye, setEye] = useState<string>(
+  const [, setEye] = useState<string>(
     () => localStorage.getItem('eye') || 'eye1',
   );
 
diff --git a/src/renderer/const.ts b/src/renderer/const.ts
new file mode 100644
index 0000000..3021213
--- /dev/null
+++ b/src/renderer/const.ts
@@ -0,0 +1,44 @@
+export const defaultVideos = [
+  {
+    id: 'video-1',
+    show: false,
+    position: { top: '5%', left: '10%' },
+    size: { width: '320px', height: '180px' },
+  },
+  {
+    id: 'video-2',
+    show: false,
+    position: { top: '37%', left: '10%' },
+    size: { width: '320px', height: '180px' },
+  },
+  {
+    id: 'video-3',
+    show: false,
+    position: { top: '70%', left: '10%' },
+    size: { width: '320px', height: '180px' },
+  },
+];
+
+export const defaultCounters = [
+  {
+    id: 'counter-1',
+    count: 0,
+    show: false,
+    position: { top: '0%', left: '60%' },
+    size: '4em',
+  },
+  {
+    id: 'counter-2',
+    count: 0,
+    show: false,
+    position: { top: '30%', left: '60%' },
+    size: '4em',
+  },
+  {
+    id: 'counter-3',
+    count: 0,
+    show: false,
+    position: { top: '60%', left: '60%' },
+    size: '4em',
+  },
+];
diff --git a/src/renderer/types.ts b/src/renderer/types.ts
index 399d394..a622756 100644
--- a/src/renderer/types.ts
+++ b/src/renderer/types.ts
@@ -1,5 +1,5 @@
-export type Position = { top: string; left: string; };
-export type Size = { width: string; height: string; };
+export type Position = { top: string; left: string };
+export type Size = { width: string; height: string };
 
 export type Video = {
   id: string;