diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 00000000..994acf0c
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,3 @@
+node_modules
+.github
+scripts
diff --git a/.github/workflows/build-docker.yml b/.github/workflows/build-docker.yml
new file mode 100644
index 00000000..200be170
--- /dev/null
+++ b/.github/workflows/build-docker.yml
@@ -0,0 +1,22 @@
+name: publish
+on:
+  push:
+    branches:
+      - "main"
+  workflow_dispatch:
+
+jobs:
+  publish-docker-image:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.MY_TOKEN }}
+      - name: Build the Docker image
+        run: |
+          docker build . --tag ghcr.io/neongamerbot-qk/saahildcom:latest
+          docker push ghcr.io/neongamerbot-qk/saahildcom:latest
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 00000000..8ebeba0d
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,14 @@
+FROM node:20-alpine as builder
+WORKDIR /app
+COPY package*.json .
+COPY yarn*.lock .
+RUN yarn install
+COPY . .
+RUN yarn build
+
+#Stage 2
+FROM nginx:1.19.0
+WORKDIR /usr/share/nginx/html
+RUN rm -rf ./*
+COPY --from=builder /app/build .
+ENTRYPOINT ["nginx", "-g", "daemon off;"]
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 00000000..b97fe6e9
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,7 @@
+name: <your project name>
+services:
+    <to-change-here>:
+        ports:
+            - 3000:80
+        container_name: saahildcom
+        image: <to-change-here>:latest
diff --git a/src/components/AboutPage/index.tsx b/src/components/AboutPage/index.tsx
index 81892b3c..52cfc79f 100644
--- a/src/components/AboutPage/index.tsx
+++ b/src/components/AboutPage/index.tsx
@@ -1,52 +1,49 @@
-import { mdiBullet } from "@mdi/js";
-import Icon from "@mdi/react";
-import { useEffect, useState } from "react";
+import { mdiBullet } from '@mdi/js'
+import Icon from '@mdi/react'
+import { useEffect, useState } from 'react'
 
-export default function AboutPage() {
-  const [currentGrade, setCurrentGrade] = useState<string>("0th");
+export default function AboutPage () {
+  const [currentGrade, setCurrentGrade] = useState<string>("0th")
   useEffect(() => {
-    let year: number = new Date().getFullYear();
+    let year:number = new Date().getFullYear()
     if (year > 2027) {
-      let result = year - 2027;
-      switch (result) {
-        case 0:
-          setCurrentGrade(`12th`);
-          break;
-        default:
-          setCurrentGrade(`Collage Student`);
-          break;
+let result = year - 2027
+      switch(result) {
+case 0:
+  setCurrentGrade(`12th`)
+  break;
+  default: 
+setCurrentGrade(`Collage Student`)
+  break;
       }
     } else {
-      setCurrentGrade(`${Math.abs(2027 - 2024 - 13)}th`);
+      setCurrentGrade(`${Math.abs((2027 - 2024) - 13)}th`)
     }
-  });
-  return (
-    <div className={"hero min-h-screen md:ml-0 ml-2"}>
-      <div className="container">
-        <h1 className="text-3xl font-bold">
-          Some info about <span className="text-highlight">me</span>
-        </h1>
-        <div>
-          <blockquote className="mb-0 blockquote">
-            <p style={{ textAlign: "justify" }}>
-              Hi Everyone, I am{" "}
-              <span className="text-highlight ">Saahil dutta, </span>
-              from <span className="text-highlight "> USA </span>
-              <br />I am a {currentGrade} grader in KCD.
-              <br />
-              <br />
-              Apart from coding, some other activities that I love to do!
-            </p>
-            <ul>
-              <li className="about-activity">
-                <Icon path={mdiBullet} className="inline-block" size={1} />{" "}
-                Playing Games
-              </li>
-              <li className="about-activity">
-                <Icon path={mdiBullet} className="inline-block" size={1} />{" "}
-                Eating different types of food
-              </li>
-              {/* <li className="about-activity">
+  })
+  return <div className={'hero min-h-screen md:ml-0 ml-2'}>
+    <div className='container'>
+      <h1 className='text-3xl font-bold'>
+Some info about <span className='text-highlight'>me</span>
+      </h1>
+      <div>
+        <blockquote className='mb-0 blockquote'>
+          <p style={{ textAlign: 'justify' }}>
+            Hi Everyone, I am{' '}
+            <span className='text-highlight '>Saahil dutta, </span>
+            from <span className='text-highlight '> USA </span>
+            <br />I am a {currentGrade} grader in KCD.
+            <br />
+            <br />
+            Apart from coding, some other activities that I love to do!
+          </p>
+          <ul>
+            <li className='about-activity'>
+              <Icon path={mdiBullet} className='inline-block'size={1} /> Playing Games
+            </li>
+            <li className='about-activity'>
+              <Icon path={mdiBullet} className='inline-block' size={1} /> Eating different types of food
+            </li>
+            {/* <li className="about-activity">
               <ImPointRight className="inline-block"/> Traveling
             </li> */}
               <li className="about-activity">