diff --git a/.github/workflows/ci-cd-16x.yml b/.github/workflows/ci-cd-16x.yml
index 06e5b3e..15ef1b6 100644
--- a/.github/workflows/ci-cd-16x.yml
+++ b/.github/workflows/ci-cd-16x.yml
@@ -1,4 +1,3 @@
-# This CI Workflow was deployed and configured by WarpWing and Nate.
 name: CI/CD 16x
 
 on:
@@ -58,8 +57,25 @@ jobs:
       - name: Install node dependencies
         run: npm i
 
-      - name: Copy Config,
+      - name: Copy Config
         run: cp config.example.json config.json
 
       - name: Test Build
         run: npm run build
+
+  scss:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Git checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install node dependencies
+        run: npm i
+
+      - name: Test SCSS
+        run: npm run scss
diff --git a/.github/workflows/ci-cd-18x.yml b/.github/workflows/ci-cd-18x.yml
index a8d31c2..158c350 100644
--- a/.github/workflows/ci-cd-18x.yml
+++ b/.github/workflows/ci-cd-18x.yml
@@ -1,4 +1,3 @@
-# This CI Workflow was deployed and configured by WarpWing and Nate.
 name: CI/CD 18x
 
 on:
@@ -58,8 +57,25 @@ jobs:
       - name: Install node dependencies
         run: npm i
 
-      - name: Copy Config,
+      - name: Copy Config
         run: cp config.example.json config.json
 
       - name: Test Build
         run: npm run build
+
+  scss:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Git checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install node dependencies
+        run: npm i
+
+      - name: Test SCSS
+        run: npm run scss
diff --git a/.github/workflows/ci-cd-20.9.0.yml b/.github/workflows/ci-cd-20.9.0.yml
index 9c1c967..7cd3b59 100644
--- a/.github/workflows/ci-cd-20.9.0.yml
+++ b/.github/workflows/ci-cd-20.9.0.yml
@@ -1,4 +1,3 @@
-# This CI Workflow was deployed and configured by WarpWing and Nate.
 name: CI/CD 20.9.0
 
 on:
@@ -58,8 +57,25 @@ jobs:
       - name: Install node dependencies
         run: npm i
 
-      - name: Copy Config,
+      - name: Copy Config
         run: cp config.example.json config.json
 
       - name: Test Build
         run: npm run build
+
+  scss:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Git checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install node dependencies
+        run: npm i
+
+      - name: Test SCSS
+        run: npm run scss
diff --git a/.github/workflows/ci-cd-20x.yml b/.github/workflows/ci-cd-20x.yml
index c08af59..835fd65 100644
--- a/.github/workflows/ci-cd-20x.yml
+++ b/.github/workflows/ci-cd-20x.yml
@@ -1,4 +1,3 @@
-# This CI Workflow was deployed and configured by WarpWing and Nate.
 name: CI/CD 20x
 
 on:
@@ -58,8 +57,25 @@ jobs:
       - name: Install node dependencies
         run: npm i
 
-      - name: Copy Config,
+      - name: Copy Config
         run: cp config.example.json config.json
 
       - name: Test Build
         run: npm run build
+
+  scss:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Git checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install node dependencies
+        run: npm i
+
+      - name: Test SCSS
+        run: npm run scss
diff --git a/.gitignore b/.gitignore
index 8ded38c..e45a687 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,6 @@ node_modules/
 dist
 config.json
 src/files/
-package-lock.json
\ No newline at end of file
+package-lock.json
+*.css
+*.css.map
\ No newline at end of file
diff --git a/package.json b/package.json
index 2939962..ba44e68 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,9 @@
     "copy-web-data": "npx ncp src/views/ dist/src/views/ && npx ncp src/public/ dist/src/public/",
     "lint:check": "npx eslint index.ts src/",
     "lint": "npx eslint --fix index.ts src/",
-    "build": "npx tsc --build && npm run copy-web-data"
+    "scss": "npx sass src/public/scss:src/public/css --style=compressed",
+    "scss:watch": "npx sass --watch src/public/scss:src/public/css",
+    "build": "npx tsc --build && npm run scss && npm run copy-web-data"
   },
   "keywords": [],
   "author": "",
@@ -19,6 +21,7 @@
     "ejs": "^3.1.9",
     "express": "^4.18.2",
     "express-fileupload": "^1.4.3",
+    "sass": "^1.70.0",
     "winston": "^3.11.0"
   },
   "devDependencies": {
diff --git a/src/endpoints/file.ts b/src/endpoints/file.ts
index 50716e1..6ca4307 100644
--- a/src/endpoints/file.ts
+++ b/src/endpoints/file.ts
@@ -13,7 +13,12 @@ export default (app: Application) => {
       apiMessage(req.path, `User is trying to get a file - ${fileName}`);
       const fileNamePattern = /^[a-zA-Z0-9]+\.(jpg|jpeg|png|mp4)$/;
       if (!fileNamePattern.test(fileName)) {
-        return res.status(400).render('pages/badName');
+        return res.status(400).render('pages/error', {
+          type: 'Invalid file name',
+          message: `${fileName} is an invalid file name`,
+          message2: 'Please only use English Alphabet characters, 0-9',
+          message3: '.jpg .jpeg .png .mp4 are the only supported file types',
+        });
       }
       const dir = resolve(dirname(''), 'src/files');
       if (!existsSync(dir)) {
@@ -22,7 +27,10 @@ export default (app: Application) => {
       const filePath = resolve(dir, fileName);
       if (!existsSync(filePath)) {
         errorMessage(`File ${fileName} doesn't exists`);
-        return res.status(400).render('pages/missingFile');
+        return res.status(400).render('pages/error', {
+          type: 'File not found',
+          message: `File ${fileName} doesn't exist`,
+        });
       }
       apiMessage(req.path, `File ${fileName} found`);
       const stats = statSync(filePath);
diff --git a/src/public/css/index.css b/src/public/css/index.css
deleted file mode 100644
index b6945e6..0000000
--- a/src/public/css/index.css
+++ /dev/null
@@ -1,111 +0,0 @@
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('fonts/Inter.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
-    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  padding: 0px;
-  margin: 0px;
-}
-
-body {
-  font-family: 'Inter', sans-serif;
-  background-color: #dcdcdc;
-  justify-content: center;
-  align-items: center;
-  font-size: 1.5rem;
-  color: #343434;
-  height: 100vh;
-  display: flex;
-  width: 100vw;
-}
-
-img,
-video {
-  border-radius: 16px 16px 0 0;
-  max-height: 75vh;
-  max-width: 75vw;
-  height: auto;
-  width: auto;
-}
-
-.container {
-  filter: drop-shadow(#000000bf 20px 20px 30px);
-  background-color: #bfb9b9;
-  border-radius: 16px;
-}
-
-.text {
-  text-align: center;
-  max-height: 75vh;
-  max-width: 75vw;
-  padding: 20px;
-  height: auto;
-  width: auto;
-  z-index: 2;
-}
-
-a {
-  text-decoration: none;
-  color: #343434;
-}
-
-.homePageText {
-  font-size: 2rem;
-  font-weight: 600;
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    background-color: #464646;
-    color: #dcdcdc;
-  }
-
-  a {
-    color: #dcdcdc;
-  }
-
-  .container {
-    filter: drop-shadow(#ffffff1a 20px 20px 30px);
-    background-color: #363636;
-  }
-}
-
-.tooltip {
-  display: inline-block;
-  position: relative;
-}
-
-.tooltip .tooltiptext {
-  background-color: black;
-  visibility: hidden;
-  text-align: center;
-  margin-left: -60px;
-  border-radius: 6px;
-  position: absolute;
-  color: #dcdcdc;
-  padding: 0.25rem;
-  font-size: 1rem;
-  bottom: 100%;
-  width: 160px;
-  z-index: 1;
-  left: 50%;
-}
-
-.tooltip:hover .tooltiptext {
-  visibility: visible;
-}
-
-.warningMsg {
-  color: red;
-  font-size: 1.5rem;
-  text-decoration: underline;
-}
diff --git a/src/public/css/discord.css b/src/public/scss/discord.scss
similarity index 100%
rename from src/public/css/discord.css
rename to src/public/scss/discord.scss
diff --git a/src/public/scss/error.scss b/src/public/scss/error.scss
new file mode 100644
index 0000000..2cd388a
--- /dev/null
+++ b/src/public/scss/error.scss
@@ -0,0 +1,69 @@
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('fonts/Inter.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  padding: 0px;
+  margin: 0px;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  background-color: #dcdcdc;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.5rem;
+  color: #343434;
+  height: 100vh;
+  display: flex;
+  width: 100vw;
+  main {
+    filter: drop-shadow(#000000bf 20px 20px 30px);
+    background-color: #bfb9b9;
+    border-radius: 16px;
+
+    img {
+      border-radius: 16px 16px 0 0;
+      max-height: 75vh;
+      max-width: 75vw;
+      height: auto;
+      width: auto;
+    }
+
+    .text {
+      text-align: center;
+      max-height: 75vh;
+      max-width: 75vw;
+      padding: 20px;
+      height: auto;
+      width: auto;
+      z-index: 2;
+
+      .warningMsg {
+        color: red;
+        font-size: 1.5rem;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #464646;
+    color: #dcdcdc;
+    main {
+      filter: drop-shadow(#ffffff1a 20px 20px 30px);
+      background-color: #363636;
+    }
+  }
+}
diff --git a/src/public/scss/file.scss b/src/public/scss/file.scss
new file mode 100644
index 0000000..c308fc9
--- /dev/null
+++ b/src/public/scss/file.scss
@@ -0,0 +1,89 @@
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('fonts/Inter.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  padding: 0px;
+  margin: 0px;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  background-color: #dcdcdc;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.5rem;
+  color: #343434;
+  height: 100vh;
+  display: flex;
+  width: 100vw;
+  main {
+    filter: drop-shadow(#000000bf 20px 20px 30px);
+    background-color: #bfb9b9;
+    border-radius: 16px;
+
+    img,
+    video {
+      border-radius: 16px 16px 0 0;
+      max-height: 75vh;
+      max-width: 75vw;
+      height: auto;
+      width: auto;
+    }
+
+    .text {
+      text-align: center;
+      max-height: 75vh;
+      max-width: 75vw;
+      padding: 20px;
+      height: auto;
+      width: auto;
+      z-index: 2;
+
+      .tooltip {
+        display: inline-block;
+        position: relative;
+      }
+
+      .tooltip .tooltiptext {
+        background-color: black;
+        visibility: hidden;
+        text-align: center;
+        margin-left: -60px;
+        border-radius: 6px;
+        position: absolute;
+        color: #dcdcdc;
+        padding: 0.25rem;
+        font-size: 1rem;
+        bottom: 100%;
+        width: 160px;
+        z-index: 3;
+        left: 50%;
+      }
+
+      .tooltip:hover .tooltiptext {
+        visibility: visible;
+      }
+    }
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #464646;
+    color: #dcdcdc;
+    main {
+      filter: drop-shadow(#ffffff1a 20px 20px 30px);
+      background-color: #363636;
+    }
+  }
+}
diff --git a/src/public/scss/index.scss b/src/public/scss/index.scss
new file mode 100644
index 0000000..f55dea2
--- /dev/null
+++ b/src/public/scss/index.scss
@@ -0,0 +1,77 @@
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('fonts/Inter.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  padding: 0px;
+  margin: 0px;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  background-color: #dcdcdc;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.5rem;
+  height: 100vh;
+  display: flex;
+  width: 100vw;
+  main {
+    color: #343434;
+    filter: drop-shadow(#000000bf 20px 20px 30px);
+    background-color: #bfb9b9;
+    border-radius: 16px;
+    img {
+      border-radius: 16px 16px 0 0;
+      max-height: 75vh;
+      max-width: 75vw;
+      height: auto;
+      width: auto;
+    }
+    .text {
+      text-align: center;
+      max-height: 75vh;
+      max-width: 75vw;
+      padding: 20px;
+      height: auto;
+      width: auto;
+      z-index: 2;
+
+      a {
+        text-decoration: none;
+        color: #343434;
+      }
+
+      .homePageText {
+        font-size: 2rem;
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #464646;
+    color: #dcdcdc;
+    main {
+      filter: drop-shadow(#ffffff1a 20px 20px 30px);
+      background-color: #363636;
+      color: #dcdcdc;
+      .text {
+        a {
+          color: #dcdcdc;
+        }
+      }
+    }
+  }
+}
diff --git a/src/views/pages/badName.ejs b/src/views/pages/badName.ejs
deleted file mode 100644
index b4dedc3..0000000
--- a/src/views/pages/badName.ejs
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" type="image/x-icon" href="../files/favicon.ico">
-  <link rel="stylesheet" href="../css/index.css">
-  <meta name="robots" content="noindex,nofollow">
-  <title>ShareX-API | Bad Name</title>
-  <meta charset="UTF-8">
-</head>
-
-<body>
-  <main>
-    <div class="container">
-      <img src="https://images.unsplash.com/photo-1582845512747-e42001c95638" alt="Image of a rubber duck">
-      <div class="text">
-        <p class="warningMsg">Invalid file name.</p>
-        <p class="warningMsg">Please only use English Alphabet characters, 0-9.</p>
-        <p class="warningMsg">.jpg .jpeg .png .mp4 are the only supported file types </p>
-        <p>Heres a duck instead</p>
-      </div>
-    </div>
-  </main>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/src/views/pages/error.ejs b/src/views/pages/error.ejs
new file mode 100644
index 0000000..b55c159
--- /dev/null
+++ b/src/views/pages/error.ejs
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/x-icon" href="../files/favicon.ico">
+  <link rel="stylesheet" href="../css/error.css">
+  <meta name="robots" content="noindex,nofollow">
+  <title>ShareX-API | <%= type %></title>
+  <meta charset="UTF-8">
+</head>
+
+<body>
+  <main>
+    <img src="https://images.unsplash.com/photo-1582845512747-e42001c95638" alt="Image of a rubber duck">
+    <div class="text">
+      <p class="warningMsg"><%= message %></p>
+      <% if (type === 'Invalid file name') { %>
+      <p class="warningMsg"><%= message2 %></p>
+      <p class="warningMsg"><%= message3 %></p>
+      <% } %>
+      <p>Heres a duck instead</p>
+    </div>
+  </main>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/views/pages/file.ejs b/src/views/pages/file.ejs
index 19a18fe..7346a22 100644
--- a/src/views/pages/file.ejs
+++ b/src/views/pages/file.ejs
@@ -6,7 +6,7 @@
   <title>ShareX-API | <%= data.name %>.<%= data.fileExtension %></title>
   <link rel="icon" type="image/x-icon" href="../files/favicon.ico">
   <meta name="twitter:card" content="summary_large_image" />
-  <link rel="stylesheet" href="../css/index.css">
+  <link rel="stylesheet" href="../css/file.css">
   <meta name="theme-color" content="#000000" />
   <meta property="og:description" content="" />
   <meta property="og:site_name" content="">
@@ -23,22 +23,21 @@
 
 <body>
   <main>
-    <div class="container">
-      <% if (img.endsWith(".mp4")) { %>
-      <video controls>
-        <source src="<%= img %>" type="video/mp4"> Your browser does not support the video tag.
-      </video>
-      <% } else { %>
-      <img src="<%= img %>" alt="Image">
-      <% } %>
-      <div class="text">
-        <p>Name - <%= data.name %></p>
-        <div class="tooltip">
-          <p>Time - <%= getTime(data.timestamp.unix, Intl.DateTimeFormat().resolvedOptions().timeZone) %></p><span class="tooltiptext">UTC - <%= data.timestamp.utc %></span>
-        </div>
-        <p>Date - <%= getDate(data.timestamp.unix, Intl.DateTimeFormat().resolvedOptions().timeZone) %></p>
-        <p>Size - <%= data.size.dynamic %></p>
+    <% if (img.endsWith(".mp4")) { %>
+    <video controls>
+      <source src="<%= img %>" type="video/mp4"> Your browser does not support the video tag.
+    </video>
+    <% } else { %>
+    <img src="<%= img %>" alt="Image">
+    <% } %>
+    <div class="text">
+      <p>Name - <%= data.name %></p>
+      <div class="tooltip">
+        <p>Time - <%= getTime(data.timestamp.unix, Intl.DateTimeFormat().resolvedOptions().timeZone) %></p>
+        <span class="tooltiptext">UTC - <%= data.timestamp.utc %></span>
       </div>
+      <p>Date - <%= getDate(data.timestamp.unix, Intl.DateTimeFormat().resolvedOptions().timeZone) %></p>
+      <p>Size - <%= data.size.dynamic %></p>
     </div>
   </main>
 </body>
\ No newline at end of file
diff --git a/src/views/pages/index.ejs b/src/views/pages/index.ejs
index 4ee6f21..bf0a19a 100644
--- a/src/views/pages/index.ejs
+++ b/src/views/pages/index.ejs
@@ -20,13 +20,11 @@
 
 <body>
   <main>
-    <div class="container">
-      <img src="https://images.unsplash.com/photo-1582845512747-e42001c95638" alt="Image of a rubber duck">
-      <div class="text">
-        <p class="homePageText">ShareX-API Made By kathund with ❤️</p>
-        <a class="homePageText" href="https://github.com/Kathund/ShareX-API">Open Source on github!</a>
-        <p>Theres nothing much here but heres a duck instead</p>
-      </div>
+    <img src="https://images.unsplash.com/photo-1582845512747-e42001c95638" alt="Image of a rubber duck">
+    <div class="text">
+      <p class="homePageText">ShareX-API Made By kathund with ❤️</p>
+      <a class="homePageText" href="https://github.com/Kathund/ShareX-API">Open Source on github!</a>
+      <p>Theres nothing much here but heres a duck instead</p>
     </div>
   </main>
 </body>
diff --git a/src/views/pages/missingFile.ejs b/src/views/pages/missingFile.ejs
deleted file mode 100644
index 13e949a..0000000
--- a/src/views/pages/missingFile.ejs
+++ /dev/null
@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" type="image/x-icon" href="../files/favicon.ico">
-  <link rel="stylesheet" href="../css/index.css">
-  <title>ShareX-API | Missing File</title>
-  <meta name="robots" content="noindex,nofollow">
-  <meta charset="UTF-8">
-</head>
-
-<body>
-  <main>
-    <div class="container">
-      <img src="https://images.unsplash.com/photo-1582845512747-e42001c95638" alt="Image of a rubber duck">
-      <div class="text">
-        <p class="warningMsg">The File you requested doesn't exist</p>
-        <p>Heres a duck instead</p>
-      </div>
-    </div>
-  </main>
-</body>
-
-</html>
\ No newline at end of file