diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index a4715ac..094e286 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,9 +1,9 @@
-name: Linting and Styling Check
+name: CI Checks
 
 on: [push, pull_request]
 
 jobs:
-  lint:
+  quality:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -22,5 +22,22 @@ jobs:
       - name: Install Dependencies
         run: pnpm install
 
-      - name: Run Linting and Styling Check
+      - name: Run Linting/Style Check
         run: pnpm lint-check
+
+      - name: Type Check
+        run: pnpm type-check
+
+      - name: Build Check
+        run: pnpm build
+
+      - name: Cache build output
+        uses: actions/cache@v3
+        with:
+          path: |
+            .next
+            dist
+            build
+          key: ${{ runner.os }}-build-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-build-
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 94149a3..499a48e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -438,7 +438,7 @@ export default function Page() {
     <div style={{ minHeight: '100vh', height: '100vh' }}>
       <Flashlight isOn={isOn} size={size} />
       {folderOpenned && (
-        <Controls isOn={isOn} size={size} setIsOn={setIsOn} setSize={setSize} />
+        <Controls isOn={isOn} setIsOn={setIsOn} setSize={setSize} />
       )}
 
       <div
diff --git a/src/components/About/RegisterButton/RegisterButton.tsx b/src/components/About/RegisterButton/RegisterButton.tsx
index 7313300..cd2427e 100644
--- a/src/components/About/RegisterButton/RegisterButton.tsx
+++ b/src/components/About/RegisterButton/RegisterButton.tsx
@@ -33,7 +33,7 @@ export default function RegisterButton() {
             >
               <h2>Register Now</h2>
             </foreignObject>
-            <g clip-path="url(#clip0_1_4)">
+            <g clipPath="url(#clip0_1_4)">
               <path
                 d="M149.282 46.7858C149.457 45.9323 149.539 45.0898 149.51 44.2738C149.62 38.596 147.111 33.6963 147.111 33.6963C145.511 30.5807 140.731 29.7329 135.715 31.3931C135.715 31.3931 135.625 31.4237 135.456 31.4812C134.8 31.711 134.139 31.98 133.478 32.2961C130.529 33.6284 124.934 36.6054 118.419 42.3239C111.922 47.6308 108.887 54.6255 111.485 59.6906C114.757 66.0674 125.715 66.9628 135.963 61.6952C143.187 57.9788 148.124 52.1922 149.265 46.868L149.269 46.8681C149.273 46.8406 149.277 46.8171 149.282 46.7897L149.282 46.7858Z"
                 fill="#553618"
diff --git a/src/components/Flashlight/Flashlight.scss b/src/components/Flashlight/Flashlight.scss
index 4ee29de..65b8a6e 100644
--- a/src/components/Flashlight/Flashlight.scss
+++ b/src/components/Flashlight/Flashlight.scss
@@ -8,11 +8,11 @@
 }
 
 .flashlight {
-  z-index: 1000;
+  z-index: 15;
 }
 
 .flashlight-ring {
-  z-index: 1000;
+  z-index: 15;
   scale: var(--flashlight-scale, 1);
   transform-origin: center;
   transform: translate(-50%, -50%) scale(var(--flashlight-scale, 1));
diff --git a/src/components/flashlight_controls/Controls.scss b/src/components/flashlight_controls/Controls.scss
new file mode 100644
index 0000000..dcfa903
--- /dev/null
+++ b/src/components/flashlight_controls/Controls.scss
@@ -0,0 +1,152 @@
+#flashlight-controls {
+  background-color: white;
+  display: flex;
+  flex-direction: row;
+  width: 330px;
+  height: 70px;
+  border: #000 2px solid;
+  border-radius: 100px;
+  position: fixed;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+  z-index: 20;
+  justify-content: space-evenly;
+  cursor: url('../Icons/Cursor.svg'), auto;
+
+  .label {
+    color: #000;
+    align-content: center;
+    font-size: 20px;
+  }
+
+  /* =============== Slider =============== */
+  .slider-track {
+    height: 6px;
+    border: #000 2px solid;
+    border-radius: 2px;
+    width: 100%;
+  }
+
+  .slider-thumb::before,
+  .slider-thumb::after {
+    content: '';
+    width: 2px;
+    height: 70%;
+    background: white;
+    position: absolute;
+  }
+
+  .slider-thumb::before {
+    left: 5px;
+  }
+
+  .slider-thumb::after {
+    right: 5px;
+  }
+
+  .slider-thumb {
+    width: 16px;
+    height: 24px;
+    background: #000;
+    border-radius: 4px;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: url('../Icons/Cursor-hover.svg'), auto;
+  }
+
+  .slider-output {
+    display: none;
+  }
+
+  #slider {
+    width: 30%;
+    align-content: center;
+    height: 50%;
+    cursor: url('../Icons/Cursor-hover.svg'), auto;
+  }
+
+  /* =============== Switch =============== */
+  .switch {
+    width: 100px;
+    height: 44px;
+    border: #000 2px solid;
+    border-radius: 40px;
+    position: relative;
+    align-content: center;
+    align-items: center;
+    background: #68dea3;
+  }
+
+  .switch-background.selected {
+    width: 100%;
+    height: 100%;
+    border-radius: 40px;
+    background: #ffffff;
+    position: relative;
+  }
+
+  .switch-thumb {
+    width: 48px;
+    height: 36px;
+    background: #000;
+    border-radius: 40px;
+    position: relative;
+    left: 4px;
+    transition: left 0.2s;
+    align-content: center;
+    justify-items: center;
+  }
+
+  .switch-thumb.selected {
+    left: 46px;
+    top: 2px;
+    background: #000000;
+    position: absolute;
+  }
+
+  .On-Text,
+  .Off-Text {
+    position: absolute;
+    color: #000;
+    font-size: 20px;
+    font-weight: bold;
+    text-align: center;
+    align-self: center;
+    top: 10px;
+  }
+
+  .On-Text {
+    display: inline;
+    left: 58px;
+  }
+
+  .Off-Text {
+    display: none;
+    left: 8px;
+  }
+
+  .On-Text.selected {
+    display: none;
+  }
+
+  .Off-Text.selected {
+    display: inline;
+  }
+
+  .icon-off {
+    width: 100%;
+    height: 100%;
+  }
+
+  .icon-light {
+    position: relative;
+
+    svg {
+      margin-inline: auto;
+    }
+  }
+}
diff --git a/src/components/flashlight_controls/controls.tsx b/src/components/flashlight_controls/Controls.tsx
similarity index 97%
rename from src/components/flashlight_controls/controls.tsx
rename to src/components/flashlight_controls/Controls.tsx
index c536e1c..2ed92a4 100644
--- a/src/components/flashlight_controls/controls.tsx
+++ b/src/components/flashlight_controls/Controls.tsx
@@ -1,5 +1,5 @@
 import React, { Dispatch, SetStateAction } from 'react';
-import './controls.scss';
+import './Controls.scss';
 import {
   Slider,
   SliderOutput,
@@ -18,7 +18,7 @@ type ControlsProps = {
 
 function Controls({ isOn, setIsOn, setSize }: ControlsProps) {
   return (
-    <div className="controls">
+    <div id="flashlight-controls">
       <div>
         <svg
           width="32"
diff --git a/src/components/flashlight_controls/controls.scss b/src/components/flashlight_controls/controls.scss
deleted file mode 100644
index 5f1aafe..0000000
--- a/src/components/flashlight_controls/controls.scss
+++ /dev/null
@@ -1,153 +0,0 @@
-.label {
-  color: #000;
-  align-content: center;
-  font-size: 20px;
-}
-
-.controls {
-  background-color: white;
-  display: flex;
-  flex-direction: row;
-  width: 330px;
-  height: 70px;
-
-  border: #000 2px solid;
-  border-radius: 100px;
-  position: fixed;
-  bottom: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  align-items: center;
-  z-index: 2000;
-  justify-content: space-evenly;
-  cursor: url('../Icons/Cursor.svg'), auto;
-}
-
-/* =============== Slider =============== */
-.slider-track {
-  height: 6px;
-  border: #000 2px solid;
-  border-radius: 2px;
-  width: 100%;
-}
-
-.slider-thumb::before,
-.slider-thumb::after {
-  content: '';
-  width: 2px;
-  height: 70%;
-  background: white;
-  position: absolute;
-}
-
-.slider-thumb::before {
-  left: 5px;
-}
-
-.slider-thumb::after {
-  right: 5px;
-}
-
-.slider-thumb {
-  width: 16px;
-  height: 24px;
-  background: #000;
-  border-radius: 4px;
-  transform: translate(-50%, -50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: url('../Icons/Cursor-hover.svg'), auto;
-}
-
-.slider-output {
-  display: none;
-}
-
-#slider {
-  width: 30%;
-  align-content: center;
-  height: 50%;
-  cursor: url('../Icons/Cursor-hover.svg'), auto;
-}
-
-/* =============== Switch =============== */
-.switch {
-  width: 100px;
-  height: 44px;
-  border: #000 2px solid;
-  border-radius: 40px;
-  position: relative;
-  align-content: center;
-  align-items: center;
-  background: #68dea3;
-}
-
-.switch-background.selected {
-  width: 100%;
-  height: 100%;
-  border-radius: 40px;
-  background: #ffffff;
-  position: relative;
-}
-
-.switch-thumb {
-  width: 48px;
-  height: 36px;
-  background: #000;
-  border-radius: 40px;
-  position: relative;
-  left: 4px;
-  transition: left 0.2s;
-  align-content: center;
-  justify-items: center;
-}
-
-.switch-thumb.selected {
-  left: 46px;
-  top: 2px;
-  background: #000000;
-  position: absolute;
-}
-
-.On-Text {
-  display: inline;
-  position: absolute;
-  color: #000;
-  font-size: 20px;
-  font-weight: bold;
-  text-align: center;
-  align-self: center;
-  left: 58px;
-  top: 12px;
-}
-
-.Off-Text {
-  display: none;
-  position: absolute;
-  color: #000000;
-  font-size: 20px;
-  top: 12px;
-  left: 8px;
-  font-weight: bold;
-  text-align: center;
-}
-
-.On-Text.selected {
-  display: none;
-}
-
-.Off-Text.selected {
-  display: inline;
-}
-
-.icon-off {
-  width: 100%;
-  height: 100%;
-}
-
-.icon-light {
-  position: relative;
-  z-index: 901;
-  align-self: center;
-}