diff --git a/src/common/component/MarkdownStyleOverride.js b/src/common/component/MarkdownStyleOverride.js
deleted file mode 100644
index 5ba8c4a8..00000000
--- a/src/common/component/MarkdownStyleOverride.js
+++ /dev/null
@@ -1,117 +0,0 @@
-// import React from 'react'
-import { createGlobalStyle } from "styled-components";
-
-const MarkdownOverrides = createGlobalStyle`
-[class^='toastui-editor-']{
-  .toastui-editor-md-container{
-      border-bottom: none;
-      .toastui-editor-md-preview{
-padding-right: 0;
-padding-left: 8px;
-      }
-    .toastui-editor-md-splitter{
-      background-color:#D0D5DD ;
-    }
-    .ProseMirror{
-      height: 100%;
-    }
-  }
-    *{
-        margin: 0 ;
-        padding: 0;
-    }
-    .ProseMirror,p,.toastui-editor.md-mode {
-        margin:0 ;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 22px;
-    color: #475467;
-    margin-bottom: 16px;
-    word-break: break-all;
-  }
-  a{
-      background-color: transparent;
-  }
-  pre{
-    width: 100%;
-    width: -webkit-fill-available;
-  }
-  blockquote {
-      border-left:none;
-    display: flex;
-    margin-top:0;
-    margin-bottom: 10px;
-    padding: 0;
-    padding: 16px;
-    color: #98a2b3;
-    opacity: 0.8;
-    box-shadow: inset 2px 0px 0px #a8b0bd;
-    display: flex;
-    align-items: center;
-    > p{
-      padding-right: 10px ;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 20px;
-        margin-bottom: 0;
-    }
-    > blockquote{
-      padding: 14px;
-    }
-  }
-  img{
-    cursor: pointer;
-      max-width:300px;
-      display: block;
-  }
-  ul {
-     white-space: nowrap;
-      margin-top:0;
-      margin-bottom:10px;
-      /* display: flex;
-      flex-direction:column;
-      margin-left: 20px; */
-      > li:before{
-        margin-top: 8px;
-        margin-left: -14px;
-        background-color: #475467;
-      }
-    /* list-style-type: disc; */
-
-  }
-  ul,
-  ol {
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 20px;
-    color: #475467;
-    /* list-style-position: inside; */
-  }
-  h1,
-  h2,
-  h3,[class*='heading']{
-    margin-block-start: 0;
-    margin-block-end: 0;
-      padding: 0;
-      margin: 0;
-      border-bottom: none;
-      font-weight: 700;
-      color: #475467;
-  }
-  h1,[class*='heading1'] {
-    margin-top: 0 !important;
-    font-size: 24px;
-    line-height: 32px;
-  }
-  h2,[class*='heading2'] {
-    font-size: 20px;
-    line-height: 30px;
-  }
-  h3,[class*='heading3'] {
-    font-size: 16px;
-    line-height: 24px;
-  }
-}
-`;
-
-export default MarkdownOverrides;
diff --git a/src/common/component/MarkdownStyleOverride.ts b/src/common/component/MarkdownStyleOverride.ts
new file mode 100644
index 00000000..1d5d4cea
--- /dev/null
+++ b/src/common/component/MarkdownStyleOverride.ts
@@ -0,0 +1,133 @@
+import { createGlobalStyle } from 'styled-components';
+
+const MarkdownOverrides = createGlobalStyle`
+  [class^='toastui-editor-'] {
+    .toastui-editor-md-container {
+      border-bottom: none;
+
+      .toastui-editor-md-preview {
+        padding-right: 0;
+        padding-left: 8px;
+      }
+
+      .toastui-editor-md-splitter {
+        background-color: #D0D5DD;
+      }
+
+      .ProseMirror {
+        height: 100%;
+      }
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    .ProseMirror, p, .toastui-editor.md-mode {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      color: #475467;
+      margin: 0 0 16px;
+      word-break: break-all;
+    }
+
+    a {
+      background-color: transparent;
+    }
+
+    pre {
+      width: 100%;
+      width: -webkit-fill-available;
+    }
+
+    blockquote {
+      border-left: none;
+      display: flex;
+      margin-top: 0;
+      margin-bottom: 10px;
+      padding: 0;
+      padding: 16px;
+      color: #98a2b3;
+      opacity: 0.8;
+      box-shadow: inset 2px 0px 0px #a8b0bd;
+      align-items: center;
+
+      > p {
+        padding-right: 10px;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        margin-bottom: 0;
+      }
+
+      > blockquote {
+        padding: 14px;
+      }
+    }
+
+    img {
+      cursor: pointer;
+      max-width: 300px;
+      display: block;
+    }
+
+    ul {
+      white-space: nowrap;
+      margin-top: 0;
+      margin-bottom: 10px;
+      /* display: flex;
+      flex-direction:column;
+      margin-left: 20px; */
+
+      > li:before {
+        margin-top: 8px;
+        margin-left: -14px;
+        background-color: #475467;
+      }
+
+      /* list-style-type: disc; */
+
+    }
+
+    ul,
+    ol {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      color: #475467;
+      /* list-style-position: inside; */
+    }
+
+    h1,
+    h2,
+    h3, [class*='heading'] {
+      margin-block-start: 0;
+      margin-block-end: 0;
+      padding: 0;
+      margin: 0;
+      border-bottom: none;
+      font-weight: 700;
+      color: #475467;
+    }
+
+    h1, [class*='heading1'] {
+      margin-top: 0 !important;
+      font-size: 24px;
+      line-height: 32px;
+    }
+
+    h2, [class*='heading2'] {
+      font-size: 20px;
+      line-height: 30px;
+    }
+
+    h3, [class*='heading3'] {
+      font-size: 16px;
+      line-height: 24px;
+    }
+  }
+`;
+
+export default MarkdownOverrides;
diff --git a/src/common/component/NewVersion.js b/src/common/component/NewVersion.tsx
similarity index 79%
rename from src/common/component/NewVersion.js
rename to src/common/component/NewVersion.tsx
index ebcddd08..64fa6ee8 100644
--- a/src/common/component/NewVersion.js
+++ b/src/common/component/NewVersion.tsx
@@ -1,6 +1,8 @@
-// import React from 'react'
+import { FC } from "react";
 import toast from "react-hot-toast";
 import styled from "styled-components";
+import Button from "./styled/Button";
+
 const Styled = styled.span`
   display: flex;
   align-items: center;
@@ -15,8 +17,13 @@ const Styled = styled.span`
     display: flex;
   }
 `;
-import Button from "./styled/Button";
-export default function NewVersion({ id, handleUpdate }) {
+
+interface Props {
+  id: string;
+  handleUpdate: () => void;
+}
+
+const Index: FC<Props> = ({ id, handleUpdate }) => {
   return (
     <Styled>
       <strong>New Version</strong> Available
@@ -30,4 +37,6 @@ export default function NewVersion({ id, handleUpdate }) {
       </div>
     </Styled>
   );
-}
+};
+
+export default Index;
diff --git a/src/common/component/TippyDefault.js b/src/common/component/TippyDefault.ts
similarity index 100%
rename from src/common/component/TippyDefault.js
rename to src/common/component/TippyDefault.ts
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index e3de6627..00000000
--- a/src/index.js
+++ /dev/null
@@ -1,41 +0,0 @@
-// import React from 'react';
-import ReactDOM from "react-dom/client";
-import toast, { Toaster } from "react-hot-toast";
-import { Reset } from "styled-reset";
-import { DndProvider } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
-import "./assets/base.css";
-import "animate.css";
-import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
-import TippyDefault from "./common/component/TippyDefault";
-import MarkdownStyleOverride from "./common/component/MarkdownStyleOverride";
-import ReduxRoutes from "./routes";
-import NewVersion from "./common/component/NewVersion";
-const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(
-  <>
-    <Reset />
-    <Toaster />
-    <TippyDefault />
-    <DndProvider backend={HTML5Backend}>
-      <ReduxRoutes />
-    </DndProvider>
-    <MarkdownStyleOverride />
-  </>
-);
-serviceWorkerRegistration.register({
-  // onSuccess: () => {
-  //   toast.success("Service Worker Installed");
-  // },
-  onUpdate: (reg) => {
-    const handleUpdate = () => {
-      reg.unregister().then(() => {
-        window.location.reload();
-      });
-    };
-    toast((t) => <NewVersion id={t.id} handleUpdate={handleUpdate} />, {
-      duration: Infinity,
-      position: "top-right"
-    });
-  }
-});
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 00000000..18f7c85e
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,45 @@
+import ReactDOM from 'react-dom/client';
+import toast, { Toaster } from 'react-hot-toast';
+import { Reset } from 'styled-reset';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import './assets/base.css';
+import 'animate.css';
+import * as serviceWorkerRegistration from './serviceWorkerRegistration';
+import TippyDefault from './common/component/TippyDefault';
+import MarkdownStyleOverride from './common/component/MarkdownStyleOverride';
+import ReduxRoutes from './routes';
+import NewVersion from './common/component/NewVersion';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(
+  <>
+    <Reset/>
+    <Toaster/>
+    <TippyDefault/>
+    <DndProvider backend={HTML5Backend}>
+      <ReduxRoutes/>
+    </DndProvider>
+    <MarkdownStyleOverride/>
+  </>
+);
+
+serviceWorkerRegistration.register({
+  // onSuccess: () => {
+  //   toast.success("Service Worker Installed");
+  // },
+  onUpdate: (reg) => {
+    const handleUpdate = () => {
+      reg.unregister().then(() => {
+        window.location.reload();
+      });
+    };
+    toast((t) => <NewVersion id={t.id} handleUpdate={handleUpdate}/>, {
+      duration: Infinity,
+      position: 'top-right'
+    });
+  }
+});
diff --git a/src/service-worker.js b/src/service-worker.ts
similarity index 94%
rename from src/service-worker.js
rename to src/service-worker.ts
index d1c6d952..2adc9535 100644
--- a/src/service-worker.js
+++ b/src/service-worker.ts
@@ -15,7 +15,7 @@ import { StaleWhileRevalidate } from "workbox-strategies";
 
 clientsClaim();
 
-// Precache all of the assets generated by your build process.
+// Precache all the assets generated by your build process.
 // Their URLs are injected into the manifest variable below.
 // This variable must be present somewhere in your service worker file,
 // even if you decide not to use precaching. See https://cra.link/PWA
@@ -50,7 +50,8 @@ registerRoute(
 // precache, in this case same-origin .png requests like those from in public/
 registerRoute(
   // Add in any other file extensions or routing criteria as needed.
-  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith(".png"), // Customize this strategy as needed, e.g., by changing to CacheFirst.
+  // Customize this strategy as needed, e.g., by changing to CacheFirst.
+  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith(".png"),
   new StaleWhileRevalidate({
     cacheName: "images",
     plugins: [
diff --git a/src/serviceWorkerRegistration.js b/src/serviceWorkerRegistration.ts
similarity index 87%
rename from src/serviceWorkerRegistration.js
rename to src/serviceWorkerRegistration.ts
index 8dcfbae9..8095246f 100644
--- a/src/serviceWorkerRegistration.js
+++ b/src/serviceWorkerRegistration.ts
@@ -10,15 +10,20 @@
 // To learn more about the benefits of this model and instructions on how to
 // opt-in, read https://cra.link/PWA
 
+interface Config {
+  onUpdate?: (registration: ServiceWorkerRegistration) => void;
+  onSuccess?: (registration: ServiceWorkerRegistration) => void;
+}
+
 const isLocalhost = Boolean(
   window.location.hostname === "localhost" ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === "[::1]" ||
-    // 127.0.0.0/8 are considered localhost for IPv4.
-    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
+  // [::1] is the IPv6 localhost address.
+  window.location.hostname === "[::1]" ||
+  // 127.0.0.0/8 are considered localhost for IPv4.
+  window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
 );
 
-export function register(config) {
+export function register(config: Config) {
   if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
@@ -41,7 +46,7 @@ export function register(config) {
         navigator.serviceWorker.ready.then(() => {
           console.log(
             "This web app is being served cache-first by a service " +
-              "worker. To learn more, visit https://cra.link/PWA"
+            "worker. To learn more, visit https://cra.link/PWA"
           );
         });
       } else {
@@ -52,7 +57,7 @@ export function register(config) {
   }
 }
 
-function registerValidSW(swUrl, config) {
+function registerValidSW(swUrl: string, config: Config) {
   if (!navigator.serviceWorker) return;
   navigator.serviceWorker
     .register(swUrl)
@@ -70,7 +75,7 @@ function registerValidSW(swUrl, config) {
               // content until all client tabs are closed.
               console.log(
                 "New content is available and will be used when all " +
-                  "tabs for this page are closed. See https://cra.link/PWA."
+                "tabs for this page are closed. See https://cra.link/PWA."
               );
 
               // Execute callback
@@ -97,7 +102,7 @@ function registerValidSW(swUrl, config) {
     });
 }
 
-function checkValidServiceWorker(swUrl, config) {
+function checkValidServiceWorker(swUrl: string, config: Config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl, {
     headers: { "Service-Worker": "script" }