diff --git a/src/components/common/Switch.test.js b/src/components/common/Switch.test.js
index 0d59390d..12a46b00 100644
--- a/src/components/common/Switch.test.js
+++ b/src/components/common/Switch.test.js
@@ -1,6 +1,6 @@
 import { shallow } from 'enzyme';
 import React from 'react';
-import Switch from './Switch.js';
+import Switch from './Switch.tsx';
 
 const switchOnClass = '.switch-body.switch-on'; // there has to be a better way of doing this
 const switchCheckboxClass = '.switch-input';
diff --git a/src/components/common/Switch.js b/src/components/common/Switch.tsx
similarity index 87%
rename from src/components/common/Switch.js
rename to src/components/common/Switch.tsx
index 918c3dfb..b3590762 100644
--- a/src/components/common/Switch.js
+++ b/src/components/common/Switch.tsx
@@ -10,7 +10,15 @@ import '../../styles/Switch.scss';
  * @param {JSX} offImg (optional): (JSX) element to be displayed on switch body when set to "off"
  */
 
-const Switch = function (props) {
+interface SwitchProps {
+    on: boolean; 
+    onToggle: (on:boolean) => void; 
+    onImg?: JSX.Element; 
+    offImg?:JSX.Element;
+
+}
+
+const Switch = function (props: SwitchProps) {
   const [on, setOn] = useState(!props.on ? false : props.on);
 
   useEffect(() => {