diff --git a/.eslintrc.json b/.eslintrc.json
index bffb357a7..669b40043 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,3 +1,12 @@
 {
-  "extends": "next/core-web-vitals"
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/ban-types": "warn"
+  }
 }
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 000000000..2fd08941b
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..6ab3a543b
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index 1ec0b2668..41eb5fdb0 100644
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -1,9 +1,9 @@
 import Link from "next/link";
 import type { FC } from "react";
 
-interface FooterProps {}
 
-export const Footer: FC<FooterProps> = ({}) => {
+
+export const Footer: FC = () => {
   return (
     <footer className="z-10 mb-4 flex w-full items-baseline justify-center rounded-lg bg-[#ffffff0a] py-2 backdrop-blur-md sm:py-3">
       <p className="md:text-lg text-center text-black dark:text-gray-100">
diff --git a/components/Footer/index.ts b/components/Footer/index.ts
index 9187c963b..1843414ee 100644
--- a/components/Footer/index.ts
+++ b/components/Footer/index.ts
@@ -1 +1 @@
-import { Footer } from "./Footer";
+import { Footer } from './Footer'
\ No newline at end of file
diff --git a/components/Loader/Preloader.tsx b/components/Loader/Preloader.tsx
index 04272a3f4..f825bb399 100644
--- a/components/Loader/Preloader.tsx
+++ b/components/Loader/Preloader.tsx
@@ -1,5 +1,4 @@
 import useLoader from "hooks/useLoader";
-import { ReactNode } from "react";
 import { Spinner } from "./Spinner";
 
 export const Preloader = ({
diff --git a/components/TopBar/index.ts b/components/TopBar/index.ts
index f9aab6bc1..07dede5da 100644
--- a/components/TopBar/index.ts
+++ b/components/TopBar/index.ts
@@ -1 +1 @@
-import { TopBar } from './TopBar';
\ No newline at end of file
+import { TopBar } from './TopBar'
\ No newline at end of file
diff --git a/package.json b/package.json
index c8e78b608..0a6bffa8a 100644
--- a/package.json
+++ b/package.json
@@ -19,10 +19,12 @@
     "daisyui": "^2.46.1",
     "eslint": "8.31.0",
     "eslint-config-next": "13.1.1",
+    "eslint-config-prettier": "^8.6.0",
     "git": "^0.1.5",
     "next": "13.1.1",
     "next-themes": "^0.2.1",
     "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.7.1",
@@ -33,6 +35,7 @@
     "typewriter-effect": "^2.19.0"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.20",
     "tailwindcss": "^3.2.4"
diff --git a/pages/[subcategory]/index.tsx b/pages/[subcategory]/index.tsx
index b2defe9b5..6a4718dfe 100644
--- a/pages/[subcategory]/index.tsx
+++ b/pages/[subcategory]/index.tsx
@@ -6,7 +6,7 @@ import Head from "next/head";
 
 const SubCategory = () => {
   const router = useRouter();
-  const title: string = `LinksHub - ${router.asPath
+  const title = `LinksHub - ${router.asPath
     .charAt(1)
     .toUpperCase()}${router.asPath.slice(2)}`;
   return (
diff --git a/pages/index.tsx b/pages/index.tsx
index 9dc974b02..897938b07 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -5,7 +5,7 @@ import TypewriterComponent from "typewriter-effect";
 import { sidebarData } from "../database/data";
 export default function Home() {
   //storing sub categories names for using in typewriter effect
-  let subCategoriesNames:string[] = [];
+  const subCategoriesNames:string[] = [];
   sidebarData.forEach((c) => {
       c.subcategory.forEach((a) =>{
         subCategoriesNames.push(a.name.toUpperCase());