diff --git a/components/Footer.tsx b/components/Footer.tsx
index 6d7d2f5..80ee127 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,4 +1,4 @@
-import config from '../config/site.json'
+import config from '../config/site.config'
 
 const createFooterMarkup = () => {
   return {
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index d2c09bf..ac94bad 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -9,7 +9,7 @@ import Image from 'next/image'
 import { useRouter } from 'next/router'
 import { Fragment, useEffect, useState } from 'react'
 
-import siteConfig from '../config/site.json'
+import siteConfig from '../config/site.config'
 import SearchModal from './SearchModal'
 import useDeviceOS from '../utils/useDeviceOS'
 
diff --git a/components/SearchModal.tsx b/components/SearchModal.tsx
index e51fcbb..1d8ebb1 100644
--- a/components/SearchModal.tsx
+++ b/components/SearchModal.tsx
@@ -13,7 +13,7 @@ import { OdDriveItem, OdSearchResult } from '../types'
 import { LoadingIcon } from './Loading'
 
 import { getFileIcon } from '../utils/getFileIcon'
-import siteConfig from '../config/site.json'
+import siteConfig from '../config/site.config'
 import { fetcher } from '../utils/fetchWithSWR'
 
 /**
diff --git a/config/api.config.js b/config/api.config.js
new file mode 100644
index 0000000..b23df33
--- /dev/null
+++ b/config/api.config.js
@@ -0,0 +1,31 @@
+/**
+ * This file contains the configuration for the API endpoints and tokens we use.
+ *
+ * - If you are a OneDrive International user, you would not have to change anything here.
+ * - If you are not the admin of your OneDrive for Business account, you may need to define your own clientId/clientSecret,
+ *   check documentation for more details.
+ * - If you are using a E5 Subscription OneDrive for Business account, the direct links of your files are not the same here.
+ *   In which case you would need to change directLinkRegex.
+ */
+module.exports = {
+  // The clientId and clientSecret are used to authenticate the user with Microsoft Graph API using OAuth. You would
+  // not need to change anything here if you can authenticate with your personal Microsoft account with OneDrive International.
+  clientId: "d87bcc39-1750-4ca0-ad54-f8d0efbb2735",
+  obfuscatedClientSecret: "U2FsdGVkX1830zo3/pFDqaBCVBb37iLw3WnBDWGF9GIB2f4apzv0roemp8Y+iIxI3Ih5ecyukqELQEGzZlYiWg==",
+
+  // The redirectUri is the URL that the user will be redirected to after they have authenticated with Microsoft Graph API.
+  // Likewise, you would not need to change redirectUri if you are using your personal Microsoft account with OneDrive International.
+  redirectUri: "http://localhost",
+
+  // These are the URLs of the OneDrive API endpoints. You would not need to change anything here if you are using OneDrive International
+  // or E5 Subscription OneDrive for Business. You may need to change these if you are using OneDrive 世纪互联.
+  authApi: "https://login.microsoftonline.com/common/oauth2/v2.0/token",
+  driveApi: "https://graph.microsoft.com/v1.0/me/drive",
+
+  // The scope we require are listed here, in most cases you would not need to change this as well.
+  scope: "user.read files.read.all offline_access",
+
+  // The directLinkRegex is used to match the direct link of the file from the response of the API. We originally use this to prevent
+  // unauthorised use of the proxied download feature - but that is disabled for now. So you can safely ignore this settings.
+  directLinkRegex: "public[.].*[.]files[.]1drv[.]com"
+}
diff --git a/config/api.json b/config/api.json
deleted file mode 100644
index 1ecd891..0000000
--- a/config/api.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "clientId": "d87bcc39-1750-4ca0-ad54-f8d0efbb2735",
-  "obfuscatedClientSecret": "U2FsdGVkX1830zo3/pFDqaBCVBb37iLw3WnBDWGF9GIB2f4apzv0roemp8Y+iIxI3Ih5ecyukqELQEGzZlYiWg==",
-  "redirectUri": "http://localhost",
-  "authApi": "https://login.microsoftonline.com/common/oauth2/v2.0/token",
-  "driveApi": "https://graph.microsoft.com/v1.0/me/drive",
-  "scope": "user.read files.read.all offline_access",
-  "directLinkRegex": "public[.].*[.]files[.]1drv[.]com"
-}
diff --git a/config/site.config.js b/config/site.config.js
new file mode 100644
index 0000000..a0db665
--- /dev/null
+++ b/config/site.config.js
@@ -0,0 +1,64 @@
+/**
+ * This file contains the configuration used for customising the website, such as the folder to share,
+ * the title, used Google fonts, site icons, contact info, etc.
+ */
+module.exports = {
+  // This is what we use to identify who you are when you are initialising the website for the first time.
+  // Make sure this is exactly the same as the email address you use to sign into your Microsoft account.
+  // You can also put this in your Vercel's environment variable 'NEXT_PUBLIC_USER_PRINCIPLE_NAME' if you worry about
+  // your email being exposed in public.
+  userPrincipalName: process.env.NEXT_PUBLIC_USER_PRINCIPLE_NAME || "spencer.woo@outlook.com",
+
+  // [OPTIONAL] This is the website icon to the left of the title inside the navigation bar. It should be placed under the
+  // /public directory of your GitHub project (not your OneDrive folder!), and referenced here by its relative path to /public.
+  icon: "/icons/128.png",
+
+  // The name of your website. Present alongside your icon.
+  title: "Spencer's OneDrive",
+
+  // The folder that you are to share publicly with onedrive-vercel-index. Use '/' if you want to share your root folder.
+  baseDirectory: "/Public",
+
+  // [OPTIONAL] This represents the maximum number of items that one directory lists, pagination supported.
+  // Do note that this is limited up to 200 items by the upstream OneDrive API.
+  maxItems: 100,
+
+  // [OPTIONAL] We use Google Fonts natively for font customisations.
+  // You can check and generate the required links and names at https://fonts.google.com.
+  // googleFontSans - the sans serif font used in onedrive-vercel-index.
+  googleFontSans: "Inter",
+  // googleFontMono - the monospace font used in onedrive-vercel-index.
+  googleFontMono: "Fira Mono",
+  // googleFontLinks -  an array of links for referencing the google font assets.
+  googleFontLinks: [
+    "https://fonts.googleapis.com/css2?family=Fira+Mono&family=Inter:wght@400;500;700&display=swap"
+  ],
+
+  // [OPTIONAL] The footer component of your website. You can write HTML here, but you need to escape double
+  // quotes - changing " to \". You can write anything here, and if you like badges, generate some with https://shields.io
+  footer: "Powered by <a href=\"https://github.com/spencerwooo/onedrive-vercel-index\" target=\"_blank\" rel=\"noopener noreferrer\">onedrive-vercel-index</a>. Made with ❤ by SpencerWoo.",
+
+  // [OPTIONAL] This is where you specify the folders that are password protected. It is an array of paths pointing to all
+  // the directories in which you have .password set. Check the documentation for details.
+  protectedRoutes: [
+    "/🌞 Private folder/u-need-a-password",
+    "/🥟 Some test files/Protected route"
+  ],
+
+  // [OPTIONAL] Use "" here if you want to remove this email address from the nav bar.
+  email: "mailto:spencer.wushangbo@gmail.com",
+
+  // [OPTIONAL] This is an array of names and links for setting your social information and links.
+  // In the latest update, all brand icons inside font awesome is supported and the icon to render is based on the name
+  // you provide. See the documentation for details.
+  links: [
+    {
+      "name": "GitHub",
+      "link": "https://github.com/spencerwooo/onedrive-vercel-index"
+    },
+    {
+      "name": "Telegram",
+      "link": "https://t.me/realSpencerWoo"
+    }
+  ]
+}
diff --git a/config/site.json b/config/site.json
deleted file mode 100644
index 33b90f3..0000000
--- a/config/site.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "userPrincipalName": "spencer.woo@outlook.com",
-  "icon": "/icons/128.png",
-  "title": "Spencer's OneDrive",
-  "baseDirectory": "/Public",
-  "maxItems": 100,
-  "googleFontSans": "Inter",
-  "googleFontMono": "Fira Mono",
-  "googleFontLinks": [
-    "https://fonts.googleapis.com/css2?family=Fira+Mono&family=Inter:wght@400;500;700&display=swap"
-  ],
-  "footer": "Powered by <a href=\"https://github.com/spencerwooo/onedrive-vercel-index\" target=\"_blank\" rel=\"noopener noreferrer\">onedrive-vercel-index</a>. Made with ❤ by SpencerWoo.",
-  "protectedRoutes": [
-    "/🌞 Private folder/u-need-a-password",
-    "/🥟 Some test files/Protected route"
-  ],
-  "email": "mailto:spencer.wushangbo@gmail.com",
-  "links": [
-    {
-      "name": "GitHub",
-      "link": "https://github.com/spencerwooo/onedrive-vercel-index"
-    },
-    {
-      "name": "Telegram",
-      "link": "https://t.me/realSpencerWoo"
-    }
-  ]
-}
diff --git a/pages/[...path].tsx b/pages/[...path].tsx
index 44810e9..8176c93 100644
--- a/pages/[...path].tsx
+++ b/pages/[...path].tsx
@@ -1,7 +1,7 @@
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 
-import siteConfig from '../config/site.json'
+import siteConfig from '../config/site.config'
 import Navbar from '../components/Navbar'
 import FileListing from '../components/FileListing'
 import Footer from '../components/Footer'
diff --git a/pages/_document.tsx b/pages/_document.tsx
index af0f3e1..769a84b 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,5 +1,5 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document'
-import siteConfig from '../config/site.json'
+import siteConfig from '../config/site.config'
 
 class MyDocument extends Document {
   render() {
diff --git a/pages/api/index.ts b/pages/api/index.ts
index d5eeb05..ec9e43d 100644
--- a/pages/api/index.ts
+++ b/pages/api/index.ts
@@ -4,8 +4,8 @@ import type { NextApiRequest, NextApiResponse } from 'next'
 import axios from 'axios'
 import Cors from 'cors'
 
-import apiConfig from '../../config/api.json'
-import siteConfig from '../../config/site.json'
+import apiConfig from '../../config/api.config'
+import siteConfig from '../../config/site.config'
 import { revealObfuscatedToken } from '../../utils/oAuthHandler'
 import { compareHashedToken } from '../../utils/protectedRouteHandler'
 import { getOdAuthTokens, storeOdAuthTokens } from '../../utils/odAuthTokenStore'
diff --git a/pages/api/item.ts b/pages/api/item.ts
index 8385c47..89e99b7 100644
--- a/pages/api/item.ts
+++ b/pages/api/item.ts
@@ -2,7 +2,7 @@ import axios from 'axios'
 import type { NextApiRequest, NextApiResponse } from 'next'
 
 import { getAccessToken } from '.'
-import apiConfig from '../../config/api.json'
+import apiConfig from '../../config/api.config'
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   // Get access token from storage
diff --git a/pages/api/proxy.ts b/pages/api/proxy.ts
index f7abe70..1db9f8a 100644
--- a/pages/api/proxy.ts
+++ b/pages/api/proxy.ts
@@ -1,7 +1,7 @@
 import axios from 'axios'
 import type { NextApiRequest, NextApiResponse } from 'next'
 
-import apiConfig from '../../config/api.json'
+import apiConfig from '../../config/api.config'
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   // 'inline' is used for previewing PDF files inside the browser directly
diff --git a/pages/api/search.ts b/pages/api/search.ts
index b626691..d140f6c 100644
--- a/pages/api/search.ts
+++ b/pages/api/search.ts
@@ -2,8 +2,8 @@ import axios from 'axios'
 import type { NextApiRequest, NextApiResponse } from 'next'
 
 import { encodePath, getAccessToken } from '.'
-import apiConfig from '../../config/api.json'
-import siteConfig from '../../config/site.json'
+import apiConfig from '../../config/api.config'
+import siteConfig from '../../config/site.config'
 
 /**
  * Sanitize the search query
diff --git a/pages/index.tsx b/pages/index.tsx
index e5b7d71..47efa71 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,6 @@
 import Head from 'next/head'
 
-import siteConfig from '../config/site.json'
+import siteConfig from '../config/site.config'
 import Navbar from '../components/Navbar'
 import FileListing from '../components/FileListing'
 import Footer from '../components/Footer'
diff --git a/pages/onedrive-vercel-index-oauth/step-1.tsx b/pages/onedrive-vercel-index-oauth/step-1.tsx
index 5f61618..75a15a1 100644
--- a/pages/onedrive-vercel-index-oauth/step-1.tsx
+++ b/pages/onedrive-vercel-index-oauth/step-1.tsx
@@ -2,8 +2,8 @@ import Head from 'next/head'
 import Image from 'next/image'
 import { useRouter } from 'next/router'
 
-import siteConfig from '../../config/site.json'
-import apiConfig from '../../config/api.json'
+import siteConfig from '../../config/site.config'
+import apiConfig from '../../config/api.config'
 import Navbar from '../../components/Navbar'
 import Footer from '../../components/Footer'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
diff --git a/pages/onedrive-vercel-index-oauth/step-2.tsx b/pages/onedrive-vercel-index-oauth/step-2.tsx
index a71986b..860484c 100644
--- a/pages/onedrive-vercel-index-oauth/step-2.tsx
+++ b/pages/onedrive-vercel-index-oauth/step-2.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import { useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
-import siteConfig from '../../config/site.json'
+import siteConfig from '../../config/site.config'
 import Navbar from '../../components/Navbar'
 import Footer from '../../components/Footer'
 import { LoadingIcon } from '../../components/Loading'
diff --git a/pages/onedrive-vercel-index-oauth/step-3.tsx b/pages/onedrive-vercel-index-oauth/step-3.tsx
index e6857a4..ced142e 100644
--- a/pages/onedrive-vercel-index-oauth/step-3.tsx
+++ b/pages/onedrive-vercel-index-oauth/step-3.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
-import siteConfig from '../../config/site.json'
+import siteConfig from '../../config/site.config'
 import Navbar from '../../components/Navbar'
 import Footer from '../../components/Footer'
 
diff --git a/tailwind.config.js b/tailwind.config.js
index b06616c..e2adf33 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,6 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
 const colors = require('tailwindcss/colors')
-const siteConfig = require('./config/site.json')
+const siteConfig = require('./config/site.config')
 
 module.exports = {
   mode: 'jit',
diff --git a/utils/oAuthHandler.ts b/utils/oAuthHandler.ts
index 1f5203f..37c6ab9 100644
--- a/utils/oAuthHandler.ts
+++ b/utils/oAuthHandler.ts
@@ -1,7 +1,7 @@
 import axios from 'axios'
 import CryptoJS from 'crypto-js'
 
-import apiConfig from '../config/api.json'
+import apiConfig from '../config/api.config'
 
 // Just a disguise to obfuscate required tokens (including but not limited to client secret,
 // access tokens, and refresh tokens), used along with the following two functions
diff --git a/utils/protectedRouteHandler.ts b/utils/protectedRouteHandler.ts
index 88df9a1..631ecae 100644
--- a/utils/protectedRouteHandler.ts
+++ b/utils/protectedRouteHandler.ts
@@ -1,5 +1,5 @@
 import sha256 from 'crypto-js/sha256'
-import siteConfig from '../config/site.json'
+import siteConfig from '../config/site.config'
 
 // Hash password token with SHA256
 function encryptToken(token: string): string {