diff --git a/README.md b/README.md
index 9f226ae..5b0d41b 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,134 @@
-# acs-timetable
-A simple My SQL database and springboot build for ACS@Fsci student to get their timetable.
+# ACS TIME TABLE
+
+## Topic
+
+- [Installation](#installation)
+- [Frontend](#frontend)
+- [Backend](#backend)
+- [How to use](#how-to-use)
+- [OOP Concept](#oop-concept)
+
+# Installation
+
+```
+git clone https://github.com/tententgc/acs-timetable.git
+
+cd acs-timetable
+
+```
+
+# Frontend
+
+- Tool
+  - React
+  - MobX
+  - Tailwind
+  - and more...
+
+## Frontend Setup
+
+`Installation`
+
+```bash
+cd client
+npm install
+```
+
+`Run`
+
+```bash
+npm start
+```
+
+will running on port 3000
+
+<br/>
+<br/>
+<br/>
+<br/>
+
+# Backend
+
+- Tool
+  - Spring Boot JPA
+  - Postgresql
+  - JWT
+  - Bcrypt
+
+## Backend Setup
+
+- สร้าง schema ใน database ชื่อ acs
+  เปลี่ยนค่าต่าง ๆ ใน file application.properties ในไฟล์ `application.properties` ใน folder `server/src/main/resources` ให้เปลี่ยนค่าต่าง ๆ ให้ตรงกับค่าของ database ที่ใช้ โดยค่า default จะเป็น Schema ชื่อ Test ใน database postgres
+
+```sql
+create schema YOUR_SCHEMA_NAME;
+```
+
+- `สร้าง folder secret ใน path ต่อไปนี้`
+
+```bash
+cd server/src/main/java/com/oop/server
+mkdir secret
+cd secret
+touch SecretKeyENV.java
+```
+
+- `ใน file SecretKeyENV.java ประกอบด้วย secretKey และ adminKey`
+
+```java
+package com.oop.server.secret;
+
+public class SecretKeyENV {
+  public static String secretKey = "your custom";
+  public static String adminKey = "your custom";
+}
+```
+
+### Folder Structure
+
+```bash
+src/
+|____test
+| |____java
+| | |____com
+| | | |____oop
+| | | | |____server
+| | | | | |____ServerApplicationTests.java
+|____main
+| |____resources
+| | |____static
+| | |____templates
+| | |____application.properties
+| |____java
+| | |____com
+| | | |____oop
+| | | | |____server
+| | | | | |____middleware
+| | | | | | |____TokenHandler.java
+| | | | | |____ServerApplication.java
+| | | | | |____repository
+| | | | | |____controller
+| | | | | |____model
+| | | | | |____secret
+```
+
+- Folder `Middleware` จะเก็บ middleware ต่างๆเอาไว้จัดการกับ request เช่น Token Handle.
+
+- Folder `Repository` จะเก็บการ Connection กับ database เช่น คำสั่งที่ใช้ในการ query.
+
+- Folder `Controller` จะเก็บการจัดการกับ request ที่เข้ามาจาก client และส่ง response กลับไป.
+
+  - สามารถดู API ต่าง ๆ ได้ผ่าน file API.txt
+
+- Folder `Model` จะเก็บ model entity ต่างๆที่ใช้ในการเก็บข้อมูล.
+
+- Folder `Secret` จะเก็บ secret key ต่างๆที่ใช้ในการเข้าถึงข้อมูล.
+
+<br/>
+<br/>
+<br/>
+<br/>
+
+# How to install
+
+- สามารถดูวิธีการติดตั้งงานได้ที่ [Click here](https://youtu.be/h8YF-NsLznU)
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
index a11777c..10a0485 100644
Binary files a/client/public/favicon.ico and b/client/public/favicon.ico differ
diff --git a/client/src/assets/logo.png b/client/src/assets/ACS-Black.png
similarity index 100%
rename from client/src/assets/logo.png
rename to client/src/assets/ACS-Black.png
diff --git a/client/src/assets/ACS-Purple.png b/client/src/assets/ACS-Purple.png
new file mode 100644
index 0000000..1d4238c
Binary files /dev/null and b/client/src/assets/ACS-Purple.png differ
diff --git a/client/src/assets/ACS-White.png b/client/src/assets/ACS-White.png
new file mode 100644
index 0000000..81df4ca
Binary files /dev/null and b/client/src/assets/ACS-White.png differ
diff --git a/client/src/assets/sign-in-image.png b/client/src/assets/sign-in-image.png
index 8a14907..9653f85 100644
Binary files a/client/src/assets/sign-in-image.png and b/client/src/assets/sign-in-image.png differ
diff --git a/client/src/assets/sign-in-image2.png b/client/src/assets/sign-in-image2.png
new file mode 100644
index 0000000..9546cf7
Binary files /dev/null and b/client/src/assets/sign-in-image2.png differ
diff --git a/client/src/components/Calendar.tsx b/client/src/components/Calendar.tsx
index 5dd4c64..711842a 100644
--- a/client/src/components/Calendar.tsx
+++ b/client/src/components/Calendar.tsx
@@ -7,6 +7,7 @@ import CalendarModal from "./CalendarModal";
 
 interface CalendarProps {
   store: CalendarStoreImpl;
+  theme: boolean;
 }
 
 const Calendar: React.FC<CalendarProps> = observer((props) => {
@@ -45,6 +46,7 @@ const Calendar: React.FC<CalendarProps> = observer((props) => {
           currMonth={currMonth}
           handleChangeMonth={handleChangeMonth}
           store={props.store}
+          theme={props.theme}
         />
         <CalendarBody
           currYear={currYear}
@@ -52,7 +54,9 @@ const Calendar: React.FC<CalendarProps> = observer((props) => {
           store={props.store}
         />
       </div>
-      {props.store.modalOpen && <CalendarModal store={props.store} />}
+      {props.store.modalOpen && (
+        <CalendarModal store={props.store} theme={props.theme} />
+      )}
     </div>
   );
 });
diff --git a/client/src/components/CalendarAccordian.tsx b/client/src/components/CalendarAccordian.tsx
index 84061f7..8874315 100644
--- a/client/src/components/CalendarAccordian.tsx
+++ b/client/src/components/CalendarAccordian.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import autoAnimate from "@formkit/auto-animate";
-import { MdOutlineClose } from "react-icons/md";
+import { FiX } from "react-icons/fi";
 import styled from "styled-components";
 import Chip from "./Chip";
 import { deleteEvent, EventType } from "../api/eventRouter";
@@ -15,6 +15,7 @@ import EventEditForm from "./EventEditForm";
 type CalendarAccordianProps = EventType & {
   store: AuthenStoreImpl;
   eventStore: CalendarStoreImpl;
+  theme: boolean;
 };
 
 const CalendarAccordian: React.FC<CalendarAccordianProps> = (props) => {
@@ -66,7 +67,7 @@ const CalendarAccordian: React.FC<CalendarAccordianProps> = (props) => {
   return (
     <div className="animate-popup">
       <div
-        className={`bg-[#1D2A36] p-5 flex items-center rounded-xl gap-4 ${
+        className={`bg-[#1D2A36] p-5 flex items-center rounded-xl gap-4 dark:bg-[#bfe2ff] ${
           show ? "max-w-[40vw] max-h-[50vh] overflow-scroll" : ""
         } min-w-[30vw]`}
       >
@@ -88,7 +89,7 @@ const CalendarAccordian: React.FC<CalendarAccordianProps> = (props) => {
               }`}
             >
               <HeaderCustom
-                className={`dropdown-label text-xl text-white hover:cursor-pointer ${
+                className={`dropdown-label text-xl text-white hover:cursor-pointer dark:text-black ${
                   show ? "text-3xl font-bold" : "max-w-[20vw] truncate"
                 }`}
                 onClick={reveal}
@@ -107,14 +108,14 @@ const CalendarAccordian: React.FC<CalendarAccordianProps> = (props) => {
               {props.store.user_status === 200 && !show ? (
                 <div className="flex">
                   <div
-                    className="mr-2 hover:bg-slate-300 hover:bg-opacity-40 duration-100 ease-in p-1 rounded-full cursor-pointer"
+                    className="mr-2 hover:bg-slate-300 hover:bg-opacity-40 duration-100 ease-in p-1 rounded-full cursor-pointer dark:hover:bg-white dark:hover:bg-opacity-70"
                     onClick={() => setOpenEditForm(true)}
                   >
                     <FcSupport size={25} />
                   </div>
 
                   <div
-                    className="mr-2 hover:bg-slate-300 hover:bg-opacity-40 duration-100 ease-in p-1 rounded-full cursor-pointer"
+                    className="mr-2 hover:bg-slate-300 hover:bg-opacity-40 duration-100 ease-in p-1 rounded-full cursor-pointer dark:hover:bg-white dark:hover:bg-opacity-70"
                     onClick={() => setDeleteInterupt(true)}
                   >
                     <FcFullTrash size={25} />
@@ -141,15 +142,25 @@ const CalendarAccordian: React.FC<CalendarAccordianProps> = (props) => {
             {show && (
               <div className="flex flex-grow items-start justify-end pl-10">
                 <div
-                  className="rounded-full p-2 hover:bg-slate-400 cursor-pointer duration-200 ease-linear"
+                  className="rounded-full p-2 hover:bg-slate-400 cursor-pointer duration-200 ease-linear dark:hover:bg-white dark:hover:bg-opacity-70"
                   onClick={reveal}
                 >
-                  <MdOutlineClose color="white" />
+                  <FiX className="dark:stroke-black" />
                 </div>
               </div>
             )}
           </div>
-          {show && <p className="text-white leading-7">{props.description}</p>}
+          {show && (
+            <div className="text-white leading-7  max-w-[35vw] break-words min-h-fit">
+              {props.description.split("\n").map((item) => {
+                return (
+                  <p className="dark:text-black" key={Math.random()}>
+                    {item}
+                  </p>
+                );
+              })}
+            </div>
+          )}
         </div>
       </div>
       {openEditform ? (
@@ -162,15 +173,20 @@ const CalendarAccordian: React.FC<CalendarAccordianProps> = (props) => {
           time_range={props.time_range}
           header={props.header}
           event_id={props.event_id}
+          theme={props.theme}
         />
       ) : (
         ""
       )}
+
       <ToastContainer
         position="bottom-right"
-        autoClose={1000}
-        hideProgressBar={true}
-        theme="light"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        theme={"dark"}
       />
     </div>
   );
@@ -190,7 +206,7 @@ const HeaderCustom = styled.p`
     height: 1px;
     bottom: 0px;
     left: 0;
-    background-color: white;
+    background-color: black;
     transform-origin: bottom right;
     transition: transform 0.2s ease-out;
   }
diff --git a/client/src/components/CalendarBody.tsx b/client/src/components/CalendarBody.tsx
index 41ddac1..80add46 100644
--- a/client/src/components/CalendarBody.tsx
+++ b/client/src/components/CalendarBody.tsx
@@ -21,7 +21,7 @@ interface CalendarBodyProps {
 
 const CalendarBody: React.FC<CalendarBodyProps> = observer((props) => {
   return (
-    <div className="border-2 rounded-3xl h-[90vh] m-14 bg-[#464675] overflow-scroll relative backdrop-blur-sm bg-opacity-40">
+    <div className="border-2 rounded-3xl h-[90vh] m-14 bg-[#464675] overflow-scroll relative backdrop-blur-sm bg-opacity-40 dark:bg-white dark:bg-opacity-30 duration-1000 ease-in dark:text-black dark:border-[#3f3f3f]">
       {props.store.workAll === null ? (
         <WaitingData animate={animationLottie} />
       ) : (
@@ -34,7 +34,7 @@ const CalendarBody: React.FC<CalendarBodyProps> = observer((props) => {
         {dateList.map((item, index) => {
           return (
             <div
-              className="flex justify-center items-center text-white border-b-[1px]"
+              className="flex justify-center items-center text-white dark:font-bold border-b-[1px] dark:text-[#3f3f3f] dark:border-[#3f3f3f] "
               key={index}
             >
               {item}
diff --git a/client/src/components/CalendarBox.tsx b/client/src/components/CalendarBox.tsx
index 9f9e740..65fc368 100644
--- a/client/src/components/CalendarBox.tsx
+++ b/client/src/components/CalendarBox.tsx
@@ -16,42 +16,49 @@ const CalendarBox: React.FC<CalendarBoxProps> = observer((props) => {
   };
 
   return (
-    <div
-      className={`cursor-pointer p-[.5px] hover:p-0 duration-200 ease-in-out bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 w-[5.3rem] rounded-lg ${
-        props.isShow ? "block" : "hidden"
-      }`}
-      onClick={handleClick}
-    >
+    <div className="h-[6rem] items-center w-[5.3rem] mx-[23px]">
       <div
-        className={`h-20 rounded-lg overflow-scroll p-[2px] animate-boxOpen bg-[#2B1D36] ${
-          new Date().getDate() === props.day &&
-          new Date().getMonth() === props.store.currMonth &&
-          new Date().getFullYear() === props.store.currYear
-            ? "bg-opacity-50"
-            : ""
+        className={`cursor-pointer p-[1px] hover:p-0 duration-200 ease-in-out bg-gradient-to-tl from-[#653581] via-indigo-300 to-indigo-500 w-[5.3rem] rounded-lg dark:from-[#99cefa] dark:to-[#a1d3fc] ${
+          props.isShow ? "block" : "hidden"
         }`}
+        onClick={handleClick}
       >
-        <div className="px-1">
-          <p className="text-[#F9F9F9] font-mono">{props.day}</p>
-        </div>
-        <div className="flex flex-col gap-1 pb-1">
-          {props.store.checkWorkDay(props.day)
-            ? props.store.workDayFilter[props.day].map((item) => {
-                return (
-                  <div key={Math.random()} className="flex gap-1 items-center">
-                    <div className="pl-1">
-                      <div
-                        className="h-3 w-3 rounded-full cursor-pointer hover:bg-opacity-50 duration-200 ease-linear overflow-hidden"
-                        style={{ backgroundColor: `#${item.color.hex_code}` }}
-                      ></div>
+        <div
+          className={`h-20 rounded-lg overflow-scroll p-[2px] animate-boxOpen bg-[#261e3e] hover:bg-black hover:bg-opacity-10 dark:bg-white dark:bg-opacity- dark:hover:bg-gradient-to-tl dark:hover:from-[#c0d8eb] dark:hover:via-[#e9fcff] dark:hover:to-[#cfe9ff] dark:text-black ease-in duration-200 ${
+            new Date().getDate() === props.day &&
+            new Date().getMonth() === props.store.currMonth &&
+            new Date().getFullYear() === props.store.currYear
+              ? "bg-opacity-50 dark:bg-opacity-50 dark:bg-gradient-to-tl dark:from-[#d4e5f3] dark:via-[#eaf7f8] dark:to-[#d6e8fa]"
+              : ""
+          }`}
+        >
+          <div className="px-1">
+            <p className="text-[#F9F9F9] font-mono dark:text-black">
+              {props.day}
+            </p>
+          </div>
+          <div className="flex flex-col gap-1 pb-1">
+            {props.store.checkWorkDay(props.day)
+              ? props.store.workDayFilter[props.day].map((item) => {
+                  return (
+                    <div
+                      key={Math.random()}
+                      className="flex gap-1 items-center"
+                    >
+                      <div className="pl-1">
+                        <div
+                          className="h-3 w-3 rounded-full cursor-pointer hover:bg-opacity-50 duration-200 ease-linear overflow-hidden"
+                          style={{ backgroundColor: `#${item.color.hex_code}` }}
+                        ></div>
+                      </div>
+                      <p className="text-white text-[10px] truncate dark:text-black">
+                        {item.header}
+                      </p>
                     </div>
-                    <p className="text-white text-[10px] truncate">
-                      {item.header}
-                    </p>
-                  </div>
-                );
-              })
-            : ""}
+                  );
+                })
+              : ""}
+          </div>
         </div>
       </div>
     </div>
diff --git a/client/src/components/CalendarColorTheme.tsx b/client/src/components/CalendarColorTheme.tsx
index 81f79bf..1ffe724 100644
--- a/client/src/components/CalendarColorTheme.tsx
+++ b/client/src/components/CalendarColorTheme.tsx
@@ -24,7 +24,7 @@ const CalendarColorTheme: React.FC<CalendarColorThemeProps> = observer(
     }, [props.colorStore]);
 
     return (
-      <div className="absolute border-2 w-[10rem] top-[5%] left-[2%] rounded-lg shadow-xl py-2">
+      <div className="absolute border-2 w-[10rem] top-[5%] left-[2%] rounded-lg shadow-xl py-2 dark:border-[#3f3f3f]">
         <div className="flex flex-col gap-[1px] px-2">
           {colordata.map((item, index) => {
             // wait fetch data from backend color table
@@ -39,11 +39,7 @@ const CalendarColorTheme: React.FC<CalendarColorThemeProps> = observer(
           })}
           {props.store.colorFilter.length ? (
             <div className="animate-popup">
-              <ColorTheme
-                title="reset filter"
-                color="FFFFFF"
-                store={props.store}
-              />
+              <ColorTheme title="reset filter" store={props.store} />
             </div>
           ) : (
             ""
diff --git a/client/src/components/CalendarHeader.tsx b/client/src/components/CalendarHeader.tsx
index 65f3d12..0b3fefb 100644
--- a/client/src/components/CalendarHeader.tsx
+++ b/client/src/components/CalendarHeader.tsx
@@ -7,6 +7,7 @@ interface CalendarHeaderProps {
   currMonth: number;
   handleChangeMonth: (n: number) => void;
   store: CalendarStoreImpl;
+  theme: boolean;
 }
 
 const CalendarHeader: React.FC<CalendarHeaderProps> = (props) => {
@@ -16,45 +17,47 @@ const CalendarHeader: React.FC<CalendarHeaderProps> = (props) => {
 
   return (
     <div>
-      <div className="flex min-w-full items-center justify-around px-5 py-2 rounded-3xl bg-black">
-        <div>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            strokeWidth={1.5}
-            stroke="currentColor"
-            className="w-10 h-10 cursor-pointer rounded-full  bg-white hover:bg-[#333333] hover:text-white duration-200 ease-linear"
-            onClick={() => handleClick(-1)}
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M15.75 19.5L8.25 12l7.5-7.5"
-            />
-          </svg>
-        </div>
-        <div className="text-center">
-          <p className="text-5xl capitalize text-white w-[30rem]">
-            {monthList[props.currMonth]} {props.currYear}
-          </p>
-        </div>
-        <div>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            strokeWidth={1.5}
-            stroke="currentColor"
-            className="w-10 h-10 cursor-pointer rounded-full bg-white hover:bg-[#333333] hover:text-white duration-200 ease-linear"
-            onClick={() => handleClick(1)}
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M8.25 4.5l7.5 7.5-7.5 7.5"
-            />
-          </svg>
+      <div className="flex items-center justify-center">
+        <div className="flex w-[60rem] items-center justify-around px-5 py-2 rounded-3xl bg-[#2c2a45] dark:bg-[#a1d3fc] duration-1000 dark:bg-opacity-50 dark:text-[#617c8b]">
+          <div>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke={`${props.theme ? "currentColor" : "#3f3f3f"}`}
+              className="w-10 h-10 cursor-pointer rounded-full hover:bg-[#413e65] dark:hover:bg-white dark:hover:bg-opacity-60 duration-1000 ease-linear "
+              onClick={() => handleClick(-1)}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M15.75 19.5L8.25 12l7.5-7.5"
+              />
+            </svg>
+          </div>
+          <div className="text-center">
+            <p className="text-5xl capitalize text-white w-[30rem] dark:text-[#3f3f3f]">
+              {monthList[props.currMonth]} {props.currYear}
+            </p>
+          </div>
+          <div>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke={`${props.theme ? "currentColor" : "#3f3f3f"}`}
+              className="w-10 h-10 cursor-pointer rounded-full hover:bg-[#413e65] dark:hover:bg-white dark:hover:bg-opacity-60 duration-1000 ease-linear "
+              onClick={() => handleClick(1)}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M8.25 4.5l7.5 7.5-7.5 7.5"
+              />
+            </svg>
+          </div>
         </div>
       </div>
     </div>
diff --git a/client/src/components/CalendarModal.tsx b/client/src/components/CalendarModal.tsx
index 86cf662..7fee8ae 100644
--- a/client/src/components/CalendarModal.tsx
+++ b/client/src/components/CalendarModal.tsx
@@ -6,6 +6,7 @@ import { AuthenStore } from "../store/AuthenStore";
 
 interface CalendarModalProps {
   store: CalendarStoreImpl;
+  theme: boolean;
 }
 
 const CalendarModal: React.FC<CalendarModalProps> = observer((props) => {
@@ -28,6 +29,7 @@ const CalendarModal: React.FC<CalendarModalProps> = observer((props) => {
               key={Math.random()}
               store={AuthenStore}
               eventStore={props.store}
+              theme={props.theme}
             />
           );
         })}
diff --git a/client/src/components/Chip.tsx b/client/src/components/Chip.tsx
index 6f7a0d7..9a60c9b 100644
--- a/client/src/components/Chip.tsx
+++ b/client/src/components/Chip.tsx
@@ -11,7 +11,7 @@ const Chip: React.FC<ChipProps> = (props) => {
       className={`px-2 py-[0.5px] flex rounded-xl w-fit`}
       style={{ backgroundColor: `#${props.color}` }}
     >
-      <p className="m-auto text-[10px] font-mono">{props.title}</p>
+      <p className="text-[black] m-auto text-[11px] font-mono">{props.title}</p>
     </div>
   );
 };
diff --git a/client/src/components/ColorTheme.tsx b/client/src/components/ColorTheme.tsx
index e031709..c2f42c2 100644
--- a/client/src/components/ColorTheme.tsx
+++ b/client/src/components/ColorTheme.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { CalendarStoreImpl } from "../store/CalendarStore";
 
 interface ColorThemeProps {
-  color: string;
+  color?: string;
   title: string;
   store: CalendarStoreImpl;
 }
@@ -15,18 +15,20 @@ const ColorTheme: React.FC<ColorThemeProps> = observer((props) => {
 
   return (
     <span
-      className={`flex gap-3 items-center cursor-pointer hover:bg-slate-400 px-[5px] py-[2px] rounded-xl duration-100 ease-linear ${
-        props.store.colorFilter.includes(props.color)
-          ? "bg-black bg-opacity-50"
+      className={`flex gap-3 items-center cursor-pointer hover:bg-slate-400 px-[5px] py-[2px] rounded-xl duration-100 ease-linear dark:hover:bg-blue-300 dark:duration-100 ${
+        props.store.colorFilter.includes(props.color as string)
+          ? "bg-black bg-opacity-50 dark:bg-blue-300 dark:bg-opacity-40"
           : ""
       }`}
-      onClick={() => handleClick(props.color, props.title)}
+      onClick={() => handleClick(props.color as string, props.title)}
     >
       <div
-        className="w-3 h-3 rounded-full"
-        style={{ backgroundColor: `#${props.color}` }}
+        className={`w-3 h-3 rounded-full ${
+          props.color ? "" : "dark:bg-[#333333] bg-white"
+        } duration-300 `}
+        style={props.color ? { backgroundColor: "#" + props.color } : {}}
       />
-      <p className="capitalize text-white">{props.title}</p>
+      <p className="capitalize text-white dark:text-black">{props.title}</p>
     </span>
   );
 });
diff --git a/client/src/components/DeleteWarning.tsx b/client/src/components/DeleteWarning.tsx
index 76c15c1..264c97e 100644
--- a/client/src/components/DeleteWarning.tsx
+++ b/client/src/components/DeleteWarning.tsx
@@ -17,16 +17,19 @@ const DeleteWarning: React.FC<DeleteWarningProps> = (props) => {
         props.open ? "block" : "hidden"
       } z-10`}
     >
-      <div className="w-[40vw] h-[20vh] bg-[#181828] rounded-xl animate-popup border-[1px] p-5">
+      <div
+        className={`w-[35vw] h-[17vh] bg-[#181828] rounded-xl animate-popup border-[1px] p-5 flex flex-col items-center justify-center 
+                    dark:bg-blue-200 dark:border-black`}
+      >
         <div>
-          <p className="text-white text-2xl text-center">
+          <p className="text-white text-2xl text-center dark:text-black font-bold">
             Are you sure to delete this event ?
           </p>
         </div>
         <div className="flex justify-center items-center gap-10 mt-5">
           <div>
             <button
-              className="text-red-600 px-5 py-2 hover:bg-red-500 hover:text-white  duration-100 ease-in rounded-sm border-red-500 border-[1px]"
+              className="text-red-600 w-[70px] px-5 py-2 hover:bg-red-500 hover:text-white  duration-100 ease-in rounded-full border-red-500 border-[2px] font-bold "
               onClick={handleClick}
             >
               Yes
@@ -34,7 +37,7 @@ const DeleteWarning: React.FC<DeleteWarningProps> = (props) => {
           </div>
           <div>
             <button
-              className="text-white px-5 py-2 hover:bg-white hover:text-black duration-100 ease-in rounded-sm border-white border-[1px]"
+              className="text-white w-[70px] px-5 py-2 hover:bg-white hover:text-black duration-100 ease-in rounded-full border-white border-[2px] font-bold"
               onClick={handleClick}
             >
               No
diff --git a/client/src/components/Drawer.tsx b/client/src/components/Drawer.tsx
index 9557e2e..4e238ac 100644
--- a/client/src/components/Drawer.tsx
+++ b/client/src/components/Drawer.tsx
@@ -3,15 +3,17 @@ import {
   FcMenu,
   FcSettings,
   FcAddDatabase,
-  FcCloseUpMode,
   FcRadarPlot,
   FcCapacitor,
 } from "react-icons/fc";
+import { FiChevronRight } from "react-icons/fi";
 import EventForm from "./EventForm";
 import { CalendarStore } from "../store/CalendarStore";
 import { ColorStore } from "../store/ColorStore";
 
-const Drawer: React.FC<{ role: string; username: string }> = (props) => {
+const Drawer: React.FC<{ role: string; username: string; theme: boolean }> = (
+  props
+) => {
   const [openDrawer, setOpenDrawer] = useState<boolean>(false);
   const [openList, setOpenList] = useState<{ form: boolean }>({ form: false });
 
@@ -59,17 +61,17 @@ const Drawer: React.FC<{ role: string; username: string }> = (props) => {
         onClick={handleClick}
       ></div>
       <div
-        className={`bg-[#181828] w-[20vw] fixed top-0 right-0 h-[100vh] border-l-[1px] rounded-lg ${
-          openDrawer ? "translate-x-0" : "translate-x-[20rem]"
+        className={`bg-[#181828] w-[20vw] fixed top-0 right-0 h-[100vh] border-l-[1px] rounded-lg dark:bg-blue-200 dark:border-black ${
+          openDrawer ? "translate-x-0" : "translate-x-[20vw]"
         } duration-200 ease-in-out z-[1002]`}
       >
         <div className="relative">
           <div className="absolute p-2">
             <button
-              className="hover:bg-slate-400 bg-opacity-10 ease-in duration-100 rounded-xl"
+              className="bg-opacity-10 ease-in duration-100 rounded-xl hover:mx-1"
               onClick={() => setOpenDrawer(false)}
             >
-              <FcCloseUpMode size={20} />
+              <FiChevronRight size={30} className="dark:stroke-black" />
             </button>
           </div>
           <div className="flex items-center justify-center gap-3 m-5">
@@ -79,43 +81,45 @@ const Drawer: React.FC<{ role: string; username: string }> = (props) => {
                 className="animate-[spin_10s_linear_infinite]"
               />
             </div>
-            <p className="text-white text-xl">{props.username}</p>
+            <p className="text-white text-xl dark:text-black">
+              {props.username}
+            </p>
           </div>
           <div className="list-drawer mt-6">
             {props.role === "ADMIN" ? (
               <div
-                className="my-2 px-5 py-2 hover:bg-slate-400 ease-in duration-100 cursor-pointer hover:bg-opacity-50"
+                className="my-2 px-5 py-2 hover:bg-slate-400 ease-in duration-100 cursor-pointer hover:bg-opacity-50 dark:hover:bg-blue-300"
                 onClick={() => handleSignOut("Create Event")}
               >
                 <div className="flex gap-4 items-center ">
                   <div>
                     <FcRadarPlot size={25} />
                   </div>
-                  <p className="text-white">Add Admin Event</p>
+                  <p className="text-white dark:text-black">Add Admin Event</p>
                 </div>
               </div>
             ) : (
               <div
-                className="my-2 px-5 py-2 hover:bg-slate-400 ease-in duration-100 cursor-pointer hover:bg-opacity-50"
+                className="my-2 px-5 py-2 hover:bg-slate-400 ease-in duration-100 cursor-pointer hover:bg-opacity-50 dark:hover:bg-blue-300"
                 onClick={() => handleSignOut("Create Event")}
               >
                 <div className="flex gap-4 items-center ">
                   <div>
                     <FcAddDatabase size={25} />
                   </div>
-                  <p className="text-white">Create Event</p>
+                  <p className="text-white dark:text-black">Create Event</p>
                 </div>
               </div>
             )}
             <div
-              className="my-2 px-5 py-2 hover:bg-slate-400 ease-in duration-100 cursor-pointer hover:bg-opacity-50"
+              className="my-2 px-5 py-2 hover:bg-slate-400 ease-in duration-100 cursor-pointer hover:bg-opacity-50 dark:hover:bg-blue-300"
               onClick={() => handleSignOut("Sign Out")}
             >
               <div className="flex gap-4 items-center ">
                 <div>
                   <FcCapacitor size={25} />
                 </div>
-                <p className="text-white">Sign Out</p>
+                <p className="text-white dark:text-black">Sign Out</p>
               </div>
             </div>
           </div>
@@ -128,6 +132,7 @@ const Drawer: React.FC<{ role: string; username: string }> = (props) => {
           open={openList.form}
           store={CalendarStore}
           colorStore={ColorStore}
+          theme={props.theme}
         />
       ) : (
         ""
diff --git a/client/src/components/EventEditForm.tsx b/client/src/components/EventEditForm.tsx
index 70f6c28..0e6cea6 100644
--- a/client/src/components/EventEditForm.tsx
+++ b/client/src/components/EventEditForm.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import InputCustom from "./InputCustom";
-import { FcCloseUpMode } from "react-icons/fc";
+import { FiX } from "react-icons/fi";
 import { CalendarStoreImpl } from "../store/CalendarStore";
 import { putEvent, PutEventRequest } from "../api/eventRouter";
 import { ToastContainer, toast } from "react-toastify";
@@ -10,6 +10,7 @@ interface EventFormType {
   open: boolean;
   handleClose: () => void;
   store: CalendarStoreImpl;
+  theme: boolean;
 }
 
 type EventFormProps = PutEventRequest & EventFormType;
@@ -26,6 +27,7 @@ const EventEditForm: React.FC<EventFormProps> = (props) => {
     description: props.description,
     time_range: props.time_range,
     event_date: props.event_date,
+    theme: props.theme,
   });
   const [timeRange, setTimeRange] = useState<{ t1: string; t2: string }>({
     t1: "",
@@ -84,7 +86,7 @@ const EventEditForm: React.FC<EventFormProps> = (props) => {
         onClick={handleClick}
       >
         <form
-          className="w-[30rem] min-h-[10rem] bg-slate-700 rounded-lg p-5"
+          className="w-[30rem] min-h-[10rem] bg-slate-700 rounded-lg p-5 dark:bg-blue-200"
           onSubmit={handleSubmit}
         >
           <div className="flex justify-between items-center my-2">
@@ -92,62 +94,69 @@ const EventEditForm: React.FC<EventFormProps> = (props) => {
               <InputCustom
                 onChange={handleChange}
                 name="header"
-                placeholder="header"
+                placeholder="Topic"
                 type="text"
                 value={formData.header}
                 maxLength={200}
                 required={true}
               />
             </div>
-            <div>
+            <div className={`${props.theme ? "handledark" : "handlelight"}`}>
               <input
                 type="date"
                 name="event_date"
-                className="rounded-sm outline-none p-[2px]"
+                className={`rounded-sm outline-none p-[2px] bg-black border-[1px] border-[#554994] focus:border-white
+                            dark:bg-white dark:text-black dark:border-[#7696ff] dark:focus:border-black`}
                 required
                 value={formData.event_date}
                 onChange={handleChange}
               />
             </div>
             <div
-              className="p-2 hover:bg-white hover:bg-opacity-30 ease-in duration-100 rounded-full"
+              className={`p-2 hover:bg-white hover:bg-opacity-30 ease-in duration-100 rounded-full`}
               onClick={() => props.handleClose()}
             >
-              <FcCloseUpMode size={20} />
+              <FiX size={20} className="dark:stroke-black" />
             </div>
           </div>
           <div>
             <textarea
-              className="w-full outline-none focus:border-[#554994] p-3 rounded-md"
-              placeholder="description"
+              className={`w-full outline-none h-20 px-[10px] py-[3px] rounded-md bg-black border-[1px] border-[#554994] focus:border-white
+                          dark:bg-white dark:text-black dark:border-[#7696ff] dark:focus:border-black`}
+              placeholder="Description"
               name="description"
               onChange={handleChange}
               value={formData.description}
             />
           </div>
           <div className="mt-3 flex items-center justify-between">
-            <div className="flex">
-              <p className="text-white mx-2">from</p>
+            <div
+              className={`flex ${props.theme ? "handledark" : "handlelight"}`}
+            >
+              <p className="text-white mx-2 dark:text-black">from</p>
               <input
                 type="time"
-                className="rounded-sm px-[.5px]"
+                className={`rounded-sm px-[.5px] bg-black border-[1px] border-[#554994] focus:border-white outline-none
+                          dark:bg-white dark:text-black dark:border-[#7696ff] dark:focus:border-black`}
                 name="select-time-1"
                 onChange={handleChange}
               />
-              <p className="text-white mx-2">to</p>
+              <p className="text-white mx-2 dark:text-black">to</p>
               <input
                 type="time"
-                className="rounded-sm px-[.5px]"
+                className={`rounded-sm px-[.5px] bg-black border-[1px] border-[#554994] focus:border-white outline-none
+                          dark:bg-white dark:text-black dark:border-[#7696ff] dark:focus:border-black`}
                 name="select-time-2"
                 onChange={handleChange}
               />
             </div>
             <div className="mr-5">
               <button
-                className="px-2 py-1 flex hover:bg-opacity-40 hover:bg-slate-400 duration-100 ease-in rounded-lg"
+                className={`px-2 py-1 flex hover:bg-opacity-40 bg-slate-800 hover:bg-slate-400 duration-100 ease-in rounded-lg mx-[-20px] border-[1px] border-slate-800 hover:border-white
+                          dark:bg-[#7fb1fc] dark:border-blue-300 dark:text-black dark:hover:bg-blue-500 dark:hover:border-blue-800`}
                 type="submit"
               >
-                <div className="m-auto text-white">submit</div>
+                <div className="m-auto text-white dark:text-black">submit</div>
               </button>
             </div>
           </div>
@@ -157,7 +166,7 @@ const EventEditForm: React.FC<EventFormProps> = (props) => {
         position="bottom-right"
         autoClose={1000}
         hideProgressBar={true}
-        theme="light"
+        theme={props.theme ? "dark" : "light"}
       />
     </div>
   );
diff --git a/client/src/components/EventForm.tsx b/client/src/components/EventForm.tsx
index 20e9343..a21d65f 100644
--- a/client/src/components/EventForm.tsx
+++ b/client/src/components/EventForm.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import InputCustom from "./InputCustom";
-import { FcCloseUpMode } from "react-icons/fc";
+import { FiX } from "react-icons/fi";
 import { addLocalEvent, formDataType } from "../api/eventRouter";
 import { CalendarStoreImpl } from "../store/CalendarStore";
 import { ColorStoreImpl } from "../store/ColorStore";
@@ -11,6 +11,7 @@ interface EventFormProps {
   store: CalendarStoreImpl;
   role: string;
   colorStore: ColorStoreImpl;
+  theme: boolean;
 }
 
 const formItem: formDataType = {
@@ -87,7 +88,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
         onClick={handleClick}
       >
         <form
-          className="w-[30rem] min-h-[10rem] bg-slate-700 rounded-lg p-5"
+          className="w-[35rem] min-h-[13rem] bg-slate-700 rounded-lg p-5 dark:bg-blue-200"
           onSubmit={handleSubmit}
         >
           <div className="flex justify-between items-center my-2">
@@ -95,18 +96,19 @@ const EventForm: React.FC<EventFormProps> = (props) => {
               <InputCustom
                 onChange={handleChange}
                 name="header"
-                placeholder="header"
+                placeholder="Topic"
                 type="text"
                 value={formData.header}
                 maxLength={200}
                 required={true}
               />
             </div>
-            <div>
+            <div className={`${props.theme ? "handledark" : "handlelight"}`}>
               <input
                 type="date"
                 name="event_date"
-                className="rounded-sm outline-none p-[2px]"
+                className={`rounded-sm outline-none bg-black px-[10px] py-[2px] border-[1px] border-[#554994] focus:border-white 
+                            dark:bg-white dark:border-[#7696ff] dark:focus:border-black dark:text-black`}
                 required
                 value={formData.event_date}
                 onChange={handleChange}
@@ -116,30 +118,35 @@ const EventForm: React.FC<EventFormProps> = (props) => {
               className="p-2 hover:bg-white hover:bg-opacity-30 ease-in duration-100 rounded-full"
               onClick={() => props.handleList()}
             >
-              <FcCloseUpMode size={20} />
+              <FiX size={15} className="dark:stroke-black" />
             </div>
           </div>
           <div>
             <textarea
-              className="w-full outline-none focus:border-[#554994] p-3 rounded-md"
-              placeholder="description"
+              className={`w-full outline-nonep-3 h-20 px-[10px] py-[3px] rounded-md bg-black border-[1px] border-[#554994] focus:border-white my-2 outline-none
+                          dark:bg-white dark:border-[#7696ff] dark:focus:border-black dark:text-black`}
+              placeholder="Description"
               name="description"
               onChange={handleChange}
             />
           </div>
           <div className="mt-3 flex items-center justify-between">
-            <div className="flex">
-              <p className="text-white mx-2">from</p>
+            <div
+              className={`flex ${props.theme ? "handledark" : "handlelight"}`}
+            >
+              <p className="text-white mx-2 dark:text-black">from</p>
               <input
                 type="time"
-                className="rounded-sm px-[.5px]"
+                className={`rounded-sm px-[1px] py-[1px] bg-black border-[1px] border-[#554994] focus:border-white outline-none
+                          dark:bg-white dark:border-[#7696ff] dark:focus:border-black dark:text-black`}
                 name="select-time-1"
                 onChange={handleChange}
               />
-              <p className="text-white mx-2">to</p>
+              <p className="text-white mx-2 dark:text-black">to</p>
               <input
                 type="time"
-                className="rounded-sm px-[.5px]"
+                className={`rounded-sm px-[1px] py-[1px] bg-black border-[1px] border-[#554994] focus:border-white outline-none
+                          dark:bg-white dark:border-[#7696ff] dark:focus:border-black dark:text-black`}
                 name="select-time-2"
                 onChange={handleChange}
               />
@@ -147,13 +154,18 @@ const EventForm: React.FC<EventFormProps> = (props) => {
             {props.role === "ADMIN" ? (
               <div className="mx-2 h-5 flex items-center justify-center">
                 <select
-                  className="w-[6rem] h-6 px-2 outline-none rounded-sm"
+                  className={`w-[7.5rem] h-[2rem] px-[.5px] py-[2px] outline-none rounded-sm bg-black border-[1px] border-[#554994] focus:border-white mx-1
+                            dark:bg-white dark:border-[#7696ff] dark:focus:border-black dark:text-black`}
                   onChange={handleChangeOption}
                   value={colorOption}
                 >
                   {props.colorStore.adminSelect.map((item) => {
                     return (
-                      <option value={item.hex_code} key={Math.random()}>
+                      <option
+                        className="dark:text-black"
+                        value={item.hex_code}
+                        key={Math.random()}
+                      >
                         {item.color_meaning}
                       </option>
                     );
@@ -165,10 +177,11 @@ const EventForm: React.FC<EventFormProps> = (props) => {
             )}
             <div className="mr-5">
               <button
-                className="px-2 py-1 flex hover:bg-opacity-40 hover:bg-slate-400 duration-100 ease-in rounded-lg"
+                className={`px-2 py-1 flex bg-slate-800 hover:bg-opacity-40 hover:bg-slate-400 duration-100 ease-in rounded-lg mx-2 border-[1px] border-slate-800 hover:border-white
+                        dark:bg-[#7fb1fc] dark:border-blue-300 dark:text-black dark:hover:bg-blue-500 dark:hover:border-blue-800`}
                 type="submit"
               >
-                <div className="m-auto text-white">submit</div>
+                <div className="m-auto text-white dark:text-black">submit</div>
               </button>
             </div>
           </div>
diff --git a/client/src/components/InputCustom.tsx b/client/src/components/InputCustom.tsx
index 752dbc1..f448544 100644
--- a/client/src/components/InputCustom.tsx
+++ b/client/src/components/InputCustom.tsx
@@ -17,9 +17,9 @@ const InputCustom: React.FC<InputCustomProps> = (props) => {
   return (
     <div>
       <input
-        className={`w-full border-[1px] outline-none rounded-[3px] px-[10px] py-[3px] focus:border-[#554994] ${
-          props.errors ? "border-red-500" : ""
-        }`}
+        className={`w-full border-[1px] outline-none rounded-[3px] px-[10px] py-[3px] border-[#554994] focus:border-white bg-black text-white
+                    dark:border-[#7696ff] dark:bg-white dark:text-black dark:focus:border-black
+        ${props.errors ? "border-red-500" : ""}`}
         {...props}
       />
       {props.errors && <ErrorMessage message={props.errors} />}
diff --git a/client/src/components/Login.tsx b/client/src/components/Login.tsx
index 9f5bf74..704e766 100644
--- a/client/src/components/Login.tsx
+++ b/client/src/components/Login.tsx
@@ -20,7 +20,7 @@ interface awaitButtonType {
 
 const formDefaultItem: formDataType = { email: "", password: "" };
 
-const Login: React.FC<{ store: AuthenStoreImpl }> = (props) => {
+const Login: React.FC<{ store: AuthenStoreImpl; theme: boolean }> = (props) => {
   const [formData, setFormData] = useState<formDataType>(formDefaultItem);
   const [isShowPass, setIsShowPass] = useState<Boolean>(false);
   const [errors, setErrors] = useState<formDataType>(formDefaultItem);
@@ -55,7 +55,7 @@ const Login: React.FC<{ store: AuthenStoreImpl }> = (props) => {
 
       if (res !== 200) {
         setAwaitButton({
-          animate: <FcCloseUpMode color="white" />,
+          animate: <FcCloseUpMode color={props.theme ? "white" : "black"} />,
           onLoad: true,
         });
         setErrors({
@@ -72,16 +72,28 @@ const Login: React.FC<{ store: AuthenStoreImpl }> = (props) => {
 
   return (
     <div className="flex flex-col">
-      <h1 className="text-[27px] font-bold my-7">Log in to your account</h1>
+      <h1 className="text-[27px] font-bold my-7 text-white dark:text-black">
+        Log in to your account
+      </h1>
       <div className="flex flex-row justify-between">
-        <span className="px-5 py-2 rounded-sm bg-slate-300">?</span>
-        <span className="px-5 py-2 rounded-sm bg-slate-300">?</span>
-        <span className="px-5 py-2 rounded-sm bg-slate-300">?</span>
-        <span className="px-5 py-2 rounded-sm bg-slate-300">?</span>
-        <span className="px-5 py-2 rounded-sm bg-slate-300">?</span>
+        <span className="px-5 py-2 rounded-sm bg-slate-300 dark:bg-slate-600">
+          ?
+        </span>
+        <span className="px-5 py-2 rounded-sm bg-slate-300 dark:bg-slate-600">
+          ?
+        </span>
+        <span className="px-5 py-2 rounded-sm bg-slate-300 dark:bg-slate-600">
+          ?
+        </span>
+        <span className="px-5 py-2 rounded-sm bg-slate-300 dark:bg-slate-600">
+          ?
+        </span>
+        <span className="px-5 py-2 rounded-sm bg-slate-300 dark:bg-slate-600">
+          ?
+        </span>
       </div>
       <div className="my-5">
-        <p>Or log in with an email</p>
+        <p className="text-white dark:text-black">Or log in with an email</p>
       </div>
       <form onSubmit={handleSubmit}>
         <div className="flex flex-col gap-5 relative">
@@ -107,14 +119,14 @@ const Login: React.FC<{ store: AuthenStoreImpl }> = (props) => {
             {isShowPass ? (
               <FiEyeOff
                 onClick={() => setIsShowPass(!isShowPass)}
-                className="absolute right-1 top-2 cursor-pointer"
-                color="gray"
+                className="absolute right-1 top-2 cursor-pointer dark:stroke-black"
+                color={props.theme ? "gray" : "black"}
               />
             ) : (
               <FiEye
                 onClick={() => setIsShowPass(!isShowPass)}
-                className="absolute right-1 top-2 cursor-pointer"
-                color="gray"
+                className="absolute right-1 top-2 cursor-pointer dark:stroke-black"
+                color={props.theme ? "gray" : "black"}
               />
             )}
           </div>
@@ -123,8 +135,8 @@ const Login: React.FC<{ store: AuthenStoreImpl }> = (props) => {
           <button
             className={`px-10 py-2 w-full h-full flex font-bold ${
               checkCaseObj({ ...formData })
-                ? "bg-gray-100 text-gray-300 cursor-not-allowed"
-                : "bg-black text-white cursor-pointer"
+                ? "bg-[gray] text-gray-300 cursor-not-allowed dark:bg-gray-300"
+                : "bg-black text-white cursor-pointer border-[1px] border-[#554994] hover:border-white dark:bg-white dark:border-[#7696ff] dark:hover:border-[black]"
             } duration-150 ease-linear`}
             type="submit"
             onClick={handleSubmit}
@@ -133,7 +145,7 @@ const Login: React.FC<{ store: AuthenStoreImpl }> = (props) => {
             {awaitButton.onLoad ? (
               <div className="m-auto h-5">{awaitButton.animate}</div>
             ) : (
-              <div className="m-auto h-5">Login</div>
+              <div className="m-auto h-5 dark:text-black">Login</div>
             )}
           </button>
         </div>
diff --git a/client/src/components/Modal.tsx b/client/src/components/Modal.tsx
index 6b9342d..d6fd17d 100644
--- a/client/src/components/Modal.tsx
+++ b/client/src/components/Modal.tsx
@@ -1,14 +1,16 @@
 import React, { useState } from "react";
-import photo from "../assets/sign-in-image.png";
+import photo from "../assets/sign-in-image2.png";
 import Login from "./Login";
 import Register from "./Register";
 import TabModal from "./TabModal";
-import { AiOutlineClose } from "react-icons/ai";
+import { FiX } from "react-icons/fi";
 import { AuthenStoreImpl } from "../store/AuthenStore";
+import photo2 from "../assets/sign-in-image.png";
 
 interface ModalProps {
   isOpen: boolean;
   store: AuthenStoreImpl;
+  theme: boolean;
 }
 
 const Modal: React.FC<ModalProps> = (props) => {
@@ -38,28 +40,30 @@ const Modal: React.FC<ModalProps> = (props) => {
     >
       <div>
         <div
-          className={`fixed h-[630px] w-[840px] top-[calc(50%-630px/2)] left-[calc(50%-840px/2)] rounded-xl flex p-4 bg-white ${
+          className={`fixed h-[630px] w-[900px] top-[calc(50%-630px/2)] left-[calc(50%-840px/2)] rounded-xl flex p-4 bg-[#2c2a45] bg-opacity-95
+          dark:bg-gradient-to-tl dark:from-[#B3C1FF] dark:via-[#BFDCFF] dark:to-[#A2D4E8] ${
             props.isOpen ? "animate-popup" : ""
           }`}
         >
           <div className="flex object-cover">
-            <img src={photo} alt="" />
+            <img src={props.theme ? photo : photo2} alt="" />
           </div>
           <div className="ml-6 w-[370px]">
             <TabModal items={items} getTabItem={getTabItem} setTab={setTab} />
 
             {tabItem === "Log in" ? (
-              <Login store={props.store} />
+              <Login store={props.store} theme={props.theme} />
             ) : (
-              <Register store={props.store} />
+              <Register store={props.store} theme={props.theme} />
             )}
           </div>
           <div
-            className="absolute right-[-60px] top-0 w-10 h-10 bg-white rounded-full flex cursor-pointer hover:bg-black hover:text-white duration-300 ease-linear"
+            className={`absolute right-[-60px] top-0 w-10 h-10 bg-[#2c2a45] rounded-full flex cursor-pointer hover:border-[1px] border-[#2c2a45] hover:bg-black hover:border-white duration-300 ease-linear
+            dark:bg-gradient-to-tl dark:from-[#B3C1FF] dark:via-[#BFDCFF] dark:to-[#A2D4E8] dark:hover:bg-white dark:hover:border-black dark:hover:bg-opacity-90`}
             onClick={() => (props.store.isOpenModal = !props.store.isOpenModal)}
           >
             <div className="m-auto">
-              <AiOutlineClose />
+              <FiX className="dark:stroke-black" />
             </div>
           </div>
         </div>
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
index 7eab9bb..37216be 100644
--- a/client/src/components/Navbar.tsx
+++ b/client/src/components/Navbar.tsx
@@ -1,11 +1,16 @@
 import React, { useEffect, useState } from "react";
-import logo from "../assets/logo.png";
+import logo1 from "../assets/ACS-White.png";
+import logo2 from "../assets/ACS-Black.png";
 import Modal from "./Modal";
 import { AuthenStore, AuthenStoreImpl } from "../store/AuthenStore";
 import { observer } from "mobx-react";
 import Drawer from "./Drawer";
 
-const Navbar: React.FC<{ store: AuthenStoreImpl }> = observer((props) => {
+const Navbar: React.FC<{
+  store: AuthenStoreImpl;
+  handleChangeTheme: () => void;
+  theme: boolean;
+}> = observer((props) => {
   const [isAuthen, setIsAuthen] = useState<boolean>(false);
   const [role, setRole] = useState<string>("");
   const [username, setUsername] = useState<string>("");
@@ -25,38 +30,57 @@ const Navbar: React.FC<{ store: AuthenStoreImpl }> = observer((props) => {
 
   return (
     <div className="">
-      <nav className="bg-inherit border-gray-500">
+      <nav className={`bg-inherit border-gray-500 `}>
         <div className="px-2 sm:px-4 py-2.5 rounded ">
           <div className="container flex flex-wrap justify-between items-center mx-auto h-14">
             <div className="flex-shrink-0">
               <a href="/" className="flex items-center">
-                <img src={logo} className="mr-3 h-6 sm:h-9" alt="Acs logo" />
+                <img
+                  src={props.theme ? logo1 : logo2}
+                  className="mr-3 h-6 sm:h-16 sm:my-6"
+                  alt="Acs logo"
+                />
                 <span className="self-center text-xl font-semibold whitespace-nowrap"></span>
               </a>
             </div>
-            {isAuthen ? (
-              <Drawer role={role} username={username} />
-            ) : (
-              <div className="hidden justify-between items-center w-full md:flex md:w-auto md:order-1">
-                <div className="flex flex-col p-4 mt-4 rounded-lg border md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 ">
-                  <p
-                    className="text-white hover:bg-slate-200 duration-500 ease-linear hover:text-black hover:underline px-3 py-2 rounded-md text-base font-medium cursor-pointer"
-                    onClick={() =>
-                      (props.store.isOpenModal = !props.store.isOpenModal)
-                    }
-                  >
-                    Sign in
-                  </p>
+
+            <div className="flex">
+              <p
+                className={`bg-[#464675] duration-500 ease-linear right-[16%] top-[4.8%] px-2 py-2 
+              rounded-[100%] cursor-pointer hover:px-1 hover:py-1 hover:right-[16.2%] hover:top-[5.2%] bg-opacity-30 hover:bg-[#554994] dark:bg-blue-300 dark:bg-opacity-30 dark:bg-gradient-to-tl dark:hover:from-[#EBC5DA] dark:hover:to-[#99BAF6] dark:duration-500 dark:text-black`}
+                onClick={props.handleChangeTheme}
+              >
+                {props.theme ? "🌚" : "🌝"}
+              </p>
+
+              {isAuthen ? (
+                <Drawer role={role} username={username} theme={props.theme} />
+              ) : (
+                <div className="hidden justify-between items-center w-full md:flex md:w-auto md:order-1">
+                  <div className="flex flex-col p-4 mt-4 rounded-lg border md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 ">
+                    <p
+                      className="text-white hover:bg-slate-200 duration-500 ease-linear hover:underline px-3 py-2 rounded-md text-base font-medium cursor-pointer dark:hover:bg-blue-300 dark:hover:bg-opacity-60 dark:text-black"
+                      onClick={() =>
+                        (props.store.isOpenModal = !props.store.isOpenModal)
+                      }
+                    >
+                      Sign in
+                    </p>
+                  </div>
                 </div>
-              </div>
-            )}
+              )}
+            </div>
           </div>
         </div>
       </nav>
       {isAuthen ? (
         ""
       ) : (
-        <Modal isOpen={props.store.isOpenModal} store={AuthenStore} />
+        <Modal
+          isOpen={props.store.isOpenModal}
+          store={AuthenStore}
+          theme={props.theme}
+        />
       )}
     </div>
   );
diff --git a/client/src/components/Register.tsx b/client/src/components/Register.tsx
index dcac466..2785826 100644
--- a/client/src/components/Register.tsx
+++ b/client/src/components/Register.tsx
@@ -27,7 +27,9 @@ interface awaitButtonType {
 
 const formDefaultItem: formDataType = { username: "", email: "", password: "" };
 
-const Register: React.FC<{ store: AuthenStoreImpl }> = (props) => {
+const Register: React.FC<{ store: AuthenStoreImpl; theme: boolean }> = (
+  props
+) => {
   const [isShowPass, setIsShowPass] = useState<boolean>(false);
   const [formData, setFormData] = useState<formDataType>(formDefaultItem);
   const [errors, setErrors] = useState<formDataType>(formDefaultItem);
@@ -91,16 +93,28 @@ const Register: React.FC<{ store: AuthenStoreImpl }> = (props) => {
 
   return (
     <div className="flex flex-col">
-      <h1 className="text-[27px] font-bold my-7">Create account</h1>
+      <h1 className="text-[27px] font-bold my-7 dark:text-black">
+        Create account
+      </h1>
       <div className="flex flex-row justify-between">
-        <span className="px-5 py-2 rounded-sm bg-slate-300">?</span>
-        <span className="px-5 py-2 rounded-sm bg-slate-300">?</span>
-        <span className="px-5 py-2 rounded-sm bg-slate-300">?</span>
-        <span className="px-5 py-2 rounded-sm bg-slate-300">?</span>
-        <span className="px-5 py-2 rounded-sm bg-slate-300">?</span>
+        <span className="px-5 py-2 rounded-sm bg-slate-300 dark:bg-slate-600">
+          ?
+        </span>
+        <span className="px-5 py-2 rounded-sm bg-slate-300 dark:bg-slate-600">
+          ?
+        </span>
+        <span className="px-5 py-2 rounded-sm bg-slate-300 dark:bg-slate-600">
+          ?
+        </span>
+        <span className="px-5 py-2 rounded-sm bg-slate-300 dark:bg-slate-600">
+          ?
+        </span>
+        <span className="px-5 py-2 rounded-sm bg-slate-300 dark:bg-slate-600">
+          ?
+        </span>
       </div>
       <div className="my-5">
-        <p>Or log in with an email</p>
+        <p className="dark:text-black">Or log in with an email</p>
       </div>
       <form onSubmit={handleSubmit}>
         <div className="flex flex-col gap-5">
@@ -139,13 +153,13 @@ const Register: React.FC<{ store: AuthenStoreImpl }> = (props) => {
               {isShowPass ? (
                 <FiEyeOff
                   onClick={() => setIsShowPass(!isShowPass)}
-                  className="absolute right-1 top-2 cursor-pointer"
+                  className="absolute right-1 top-2 cursor-pointer dark:stroke-black"
                   color="gray"
                 />
               ) : (
                 <FiEye
                   onClick={() => setIsShowPass(!isShowPass)}
-                  className="absolute right-1 top-2 cursor-pointer"
+                  className="absolute right-1 top-2 cursor-pointer dark:stroke-black"
                   color="gray"
                 />
               )}
@@ -157,17 +171,20 @@ const Register: React.FC<{ store: AuthenStoreImpl }> = (props) => {
             <input
               type="checkbox"
               name="check1"
-              className="accent-black"
+              className="accent-black dark:accent-white"
               checked={checkBox.check1}
               onChange={checkBoxHandler}
             />
-            <label htmlFor="title1" className="font-light ml-2 text-sm">
+            <label
+              htmlFor="title1"
+              className="font-light ml-2 text-sm dark:text-black"
+            >
               Agree to{" "}
-              <span className="border-b-[1px] hover:border-black transition-all duration-250 cursor-pointer">
+              <span className="border-b-[1px] hover:border-black hover:text-black transition-all duration-250 cursor-pointer dark:text-black dark:border-b-black dark:hover:border-white dark:hover:text-white">
                 Terms and Conditions
               </span>{" "}
               &{" "}
-              <span className="border-b-[1px] hover:border-black transition-all duration-250 cursor-pointer">
+              <span className="border-b-[1px] hover:border-black hover:text-black transition-all duration-250 cursor-pointer dark:text-black dark:border-b-black dark:hover:border-white dark:hover:text-white">
                 Privacy Policy
               </span>
             </label>
@@ -176,16 +193,16 @@ const Register: React.FC<{ store: AuthenStoreImpl }> = (props) => {
             <input
               type="checkbox"
               name="check2"
-              className="accent-black"
+              className="accent-black dark:accent-white"
               checked={checkBox.check2}
               onChange={checkBoxHandler}
             />
             <label
               htmlFor="title2"
-              className="font-light ml-2 text-sm mt-[-3.5px]"
+              className="font-light ml-2 text-sm mt-[-3.5px] dark:text-black"
             >
               Agree to get time-saving{" "}
-              <span className="border-b-[1px] hover:border-black transition-all duration-250 cursor-pointer">
+              <span className="border-b-[1px] hover:border-black hover:text-black transition-all duration-250 cursor-pointer dark:text-black dark:border-b-black dark:hover:border-white dark:hover:text-white">
                 design articles
               </span>{" "}
               and new release notifications
@@ -196,8 +213,8 @@ const Register: React.FC<{ store: AuthenStoreImpl }> = (props) => {
           <button
             className={`px-10 py-2 w-full h-full flex font-bold ${
               checkCaseObj({ ...formData, ...checkBox })
-                ? "cursor-not-allowed  bg-gray-100 text-gray-300"
-                : "bg-black text-white"
+                ? "cursor-not-allowed  bg-[gray] text-gray-300 dark:bg-slate-300"
+                : "bg-black text-white border-[1px] border-[#554994] hover:border-white dark:bg-white dark:border-[#7696ff] dark:hover:border-[black]"
             } duration-150 ease-linear`}
             onClick={handleSubmit}
             // disabled={checkCaseObj({ ...formData, ...checkBox })}
@@ -205,7 +222,7 @@ const Register: React.FC<{ store: AuthenStoreImpl }> = (props) => {
             {awaitButton.onLoad ? (
               <div className="m-auto h-5">{awaitButton.animate}</div>
             ) : (
-              <div className="m-auto h-5">Register</div>
+              <div className="m-auto h-5 dark:text-black">Register</div>
             )}
           </button>
         </div>
diff --git a/client/src/components/TabModal.tsx b/client/src/components/TabModal.tsx
index fb84b1a..a78794b 100644
--- a/client/src/components/TabModal.tsx
+++ b/client/src/components/TabModal.tsx
@@ -8,7 +8,7 @@ interface TabModalProps {
 
 const TabModal: React.FC<TabModalProps> = (props) => {
   return (
-    <div className="flex gap-5 border-b-[1px]">
+    <div className="flex gap-5 border-b-[1px] dark:border-black ">
       {props.items.map((item, index) => {
         return (
           <div
@@ -16,11 +16,11 @@ const TabModal: React.FC<TabModalProps> = (props) => {
             onClick={() => props.setTab(item)}
             className={`${
               item === props.getTabItem()
-                ? "font-medium border-b-black border-b-[1px]"
+                ? "font-black border-b-white border-b-[1px] dark:border-black "
                 : ""
-            } cursor-pointer duration-100`}
+            } cursor-pointer`}
           >
-            <p className="py-2">{item}</p>
+            <p className="py-2 dark:text-black">{item}</p>
           </div>
         );
       })}
diff --git a/client/src/index.css b/client/src/index.css
index 51b7a9d..161bcfc 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -6,7 +6,30 @@
 
 * {
   font-family: "Inter", sans-serif;
+  color:white;
 }
-.example::-webkit-scrollbar {
+* ::-webkit-scrollbar {
   display: none;
 }
+.handledark>input[type="time"]::-webkit-calendar-picker-indicator{
+  background-color:#2c2a45;
+  border-radius: 50%;
+  margin: 3px;
+  }
+
+.handledark>input[type="date"]::-webkit-calendar-picker-indicator{
+  background-color:#2c2a45;
+  border-radius: 50%;
+  margin: 3px;
+  }
+
+.handlelight>input[type="date"]::-webkit-calendar-picker-indicator{
+  background-color: white ! important;
+  border-radius: 50%;
+  margin: 3px;
+  }
+.handlelight>input[type="time"]::-webkit-calendar-picker-indicator{
+  background-color:white ! important;
+  border-radius: 50%;
+  margin: 3px;
+  }
\ No newline at end of file
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index 77959ee..f04f5a3 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -3,20 +3,26 @@ import Calendar from "../components/Calendar";
 import Navbar from "../components/Navbar";
 import "../styles/Home.css";
 
+import { useState } from "react";
 import { CalendarStore } from "../store/CalendarStore";
 import { AuthenStore } from "../store/AuthenStore";
 
+
 const Home: React.FC = () => {
+  const [theme, setTheme] = useState<boolean>(false);
+  const handleChangeTheme = () => {setTheme(!theme)}
   return (
-    <div className="min-h-screen">
-      <div>
-        <div className="starsec"></div>
-        <div className="starthird"></div>
-        <div className="starfourth"></div>
-        <div className="starfifth"></div>
+    <div className={`${theme ? "light":"dark"}`}>
+      <div className={`min-h-screen bg-[#181828] dark:bg-[#d6dfee] duration-1000`}>
+        <div>
+          <div className={`${theme ? "starsec" : "starsecdark"}`}></div>
+          <div className={`${theme ? "starthird" : "starthriddark"}`}></div>
+          <div className={`${theme ? "starfourth" : "starfourthdark"}`}></div>
+          <div className={`${theme ? "starfifth" : "starfifthdark"}`}></div>
+        </div>
+        <Navbar store={AuthenStore} handleChangeTheme={handleChangeTheme} theme={theme} />
+        <Calendar store={CalendarStore} theme={theme} />
       </div>
-      <Navbar store={AuthenStore} />
-      <Calendar store={CalendarStore} />
     </div>
   );
 };
diff --git a/client/src/styles/Home.css b/client/src/styles/Home.css
index 8e86572..9da2ae3 100644
--- a/client/src/styles/Home.css
+++ b/client/src/styles/Home.css
@@ -178,6 +178,190 @@ html {
     transform: translateY(0px);
   }
   100% {
-    transform: translateY(-2000px);
+    transform: translateY(-1000px);
+  }
+}
+
+.starsecdark {
+  content: " ";
+  border-radius: 50%;
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  background: transparent;
+  box-shadow: 571px 173px #00bcd4, 1732px 143px #00bcd4, 1745px 454px #ff5722,
+    234px 784px #00bcd4, 1793px 1123px #ff9800, 1076px 504px #03a9f4,
+    633px 601px #ff5722, 350px 630px #ffeb3b, 1164px 782px #00bcd4,
+    76px 690px #3f51b5, 1825px 701px #cddc39, 1646px 578px #ffeb3b,
+    544px 293px #2196f3, 445px 1061px #673ab7, 928px 47px #00bcd4,
+    168px 1410px #8bc34a, 777px 782px #9c27b0, 1235px 1941px #9c27b0,
+    104px 1690px #8bc34a, 1167px 1338px #e91e63, 345px 1652px #009688,
+    1682px 1196px #f44336, 1995px 494px #8bc34a, 428px 798px #ff5722,
+    340px 1623px #f44336, 605px 349px #9c27b0, 1339px 1344px #673ab7,
+    1102px 1745px #3f51b5, 1592px 1676px #2196f3, 419px 1024px #ff9800,
+    630px 1033px #4caf50, 1995px 1644px #00bcd4, 1092px 712px #9c27b0,
+    1355px 606px #f44336, 622px 1881px #cddc39, 1481px 621px #9e9e9e,
+    19px 1348px #8bc34a, 864px 1780px #e91e63, 442px 1136px #2196f3,
+    67px 712px #ff5722, 89px 1406px #f44336, 275px 321px #009688,
+    592px 630px #e91e63, 1012px 1690px #9c27b0, 1749px 23px #673ab7,
+    94px 1542px #ffeb3b, 1201px 1657px #3f51b5, 1505px 692px #2196f3,
+    1799px 601px #03a9f4, 656px 811px #00bcd4, 701px 597px #00bcd4,
+    1202px 46px #ff5722, 890px 569px #ff5722, 1613px 813px #2196f3,
+    223px 252px #ff9800, 983px 1093px #f44336, 726px 1029px #ffc107,
+    1764px 778px #cddc39, 622px 1643px #f44336, 174px 1559px #673ab7,
+    212px 517px #00bcd4, 340px 505px #fff, 1700px 39px #fff,
+    1768px 516px #f44336, 849px 391px #ff9800, 228px 1824px #fff,
+    1119px 1680px #ffc107, 812px 1480px #3f51b5, 1438px 1585px #cddc39,
+    137px 1397px #fff, 1080px 456px #673ab7, 1208px 1437px #03a9f4,
+    857px 281px #f44336, 1254px 1306px #cddc39, 987px 990px #4caf50,
+    1655px 911px #00bcd4, 1102px 1216px #ff5722, 1807px 1044px #fff,
+    660px 435px #03a9f4, 299px 678px #4caf50, 1193px 115px #ff9800,
+    918px 290px #cddc39, 1447px 1422px #ffeb3b, 91px 1273px #9c27b0,
+    108px 223px #ffeb3b, 146px 754px #00bcd4, 461px 1446px #ff5722,
+    1004px 391px #673ab7, 1529px 516px #f44336, 1206px 845px #cddc39,
+    347px 583px #009688, 1102px 1332px #f44336, 709px 1756px #00bcd4,
+    1972px 248px #fff, 1669px 1344px #ff5722, 1132px 406px #f44336,
+    320px 1076px #cddc39, 126px 943px #ffeb3b, 263px 604px #ff5722,
+    1546px 692px #f44336;
+  animation: animStar 150s linear infinite;
+}
+
+.starthirddark {
+  content: "dark";
+  position: absolute;
+  border-radius: 50%;
+  width: 4px;
+  height: 4px;
+  background: transparent;
+  box-shadow: 571px 173px #00bcd4, 1732px 143px #ff5722, 1745px 454px #00bcd4,
+    234px 784px #00bcd4, 1793px 1123px #ff9800, 1076px 504px #03a9f4,
+    633px 601px #ff5722, 350px 630px #03a9f4, 1164px 782px #ffeb3b,
+    76px 690px #3f51b5, 1825px 701px #cddc39, 1646px 578px #9c27b0,
+    544px 293px #2196f3, 445px 1061px #673ab7, 928px 47px #00bcd4,
+    168px 1410px #8bc34a, 777px 782px #9c27b0, 1235px 1941px #9c27b0,
+    104px 1690px #00bcd4, 1167px 1338px #e91e63, 345px 1652px #009688,
+    1682px 1196px #f44336, 1995px 494px #8bc34a, 428px 798px #ff5722,
+    340px 1623px #03a9f4, 605px 349px #9c27b0, 1339px 1344px #673ab7,
+    1102px 1745px #3f51b5, 1592px 1676px #2196f3, 419px 1024px #ff9800,
+    630px 1033px #4caf50, 1995px 1644px #00bcd4, 1092px 712px #9c27b0,
+    1355px 606px #f44336, 622px 1881px #cddc39, 1481px 621px #9e9e9e,
+    19px 1348px #8bc34a, 864px 1780px #e91e63, 442px 1136px #2196f3,
+    67px 712px #ff5722, 89px 1406px #f44336, 275px 321px #009688,
+    592px 630px #e91e63, 1012px 1690px #9c27b0, 1749px 23px #673ab7,
+    94px 1542px #ffeb3b, 1201px 1657px #3f51b5, 1505px 692px #2196f3,
+    1799px 601px #03a9f4, 656px 811px #00bcd4, 701px 597px #00bcd4,
+    1202px 46px #ff5722, 890px 569px #ff5722, 1613px 813px #2196f3,
+    223px 252px #ff9800, 983px 1093px #fff, 726px 1029px #ffc107,
+    1764px 778px #cddc39, 622px 1643px #f44336, 174px 1559px #673ab7,
+    212px 517px #00bcd4, 340px 505px #fff, 1700px 39px #fff,
+    1768px 516px #f44336, 849px 391px #ff9800, 228px 1824px #fff,
+    1119px 1680px #ffc107, 812px 1480px #3f51b5, 1438px 1585px #cddc39,
+    137px 1397px #fff, 1080px 456px #673ab7, 1208px 1437px #03a9f4,
+    857px 281px #f44336, 1254px 1306px #cddc39, 987px 990px #4caf50,
+    1655px 911px #00bcd4, 1102px 1216px #ff5722, 1807px 1044px #fff,
+    660px 435px #03a9f4, 299px 678px #4caf50, 1193px 115px #ff9800,
+    918px 290px #cddc39, 1447px 1422px #ffeb3b, 91px 1273px #9c27b0,
+    108px 223px #ffeb3b, 146px 754px #00bcd4, 461px 1446px #ff5722,
+    1004px 391px #673ab7, 1529px 516px #f44336, 1206px 845px #cddc39,
+    347px 583px #009688, 1102px 1332px #9e9e9e, 709px 1756px #00bcd4,
+    1972px 248px #fff, 1669px 1344px #3f51b5, 1132px 406px #f44336,
+    320px 1076px #cddc39, 126px 943px #ffeb3b, 263px 604px #009688,
+    1546px 692px #f44336;
+  animation: animStar 50s linear infinite;
+}
+
+.starfourthdark {
+  content: " ";
+  border-radius: 50%;
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  background: transparent;
+  box-shadow: 571px 173px #00bcd4, 1732px 143px #00bcd4, 1745px 454px #ff5722,
+    234px 784px #00bcd4, 1793px 1123px #ff9800, 1076px 504px #03a9f4,
+    633px 601px #ff5722, 350px 630px #ffeb3b, 1164px 782px #00bcd4,
+    76px 690px #3f51b5, 1825px 701px #cddc39, 1646px 578px #ffeb3b,
+    544px 293px #2196f3, 445px 1061px #673ab7, 928px 47px #00bcd4,
+    168px 1410px #8bc34a, 777px 782px #9c27b0, 1235px 1941px #9c27b0,
+    104px 1690px #8bc34a, 1167px 1338px #e91e63, 345px 1652px #009688,
+    1682px 1196px #f44336, 1995px 494px #8bc34a, 428px 798px #ff5722,
+    340px 1623px #f44336, 605px 349px #9c27b0, 1339px 1344px #673ab7,
+    1102px 1745px #3f51b5, 1592px 1676px #2196f3, 419px 1024px #ff9800,
+    630px 1033px #4caf50, 1995px 1644px #00bcd4, 1092px 712px #9c27b0,
+    1355px 606px #f44336, 622px 1881px #cddc39, 1481px 621px #9e9e9e,
+    19px 1348px #8bc34a, 864px 1780px #e91e63, 442px 1136px #2196f3,
+    67px 712px #ff5722, 89px 1406px #f44336, 275px 321px #009688,
+    592px 630px #e91e63, 1012px 1690px #9c27b0, 1749px 23px #673ab7,
+    94px 1542px #ffeb3b, 1201px 1657px #3f51b5, 1505px 692px #2196f3,
+    1799px 601px #03a9f4, 656px 811px #00bcd4, 701px 597px #00bcd4,
+    1202px 46px #ff5722, 890px 569px #ff5722, 1613px 813px #2196f3,
+    223px 252px #ff9800, 983px 1093px #f44336, 726px 1029px #ffc107,
+    1764px 778px #cddc39, 622px 1643px #f44336, 174px 1559px #673ab7,
+    212px 517px #00bcd4, 340px 505px #fff, 1700px 39px #fff,
+    1768px 516px #f44336, 849px 391px #ff9800, 228px 1824px #fff,
+    1119px 1680px #ffc107, 812px 1480px #3f51b5, 1438px 1585px #cddc39,
+    137px 1397px #fff, 1080px 456px #673ab7, 1208px 1437px #03a9f4,
+    857px 281px #f44336, 1254px 1306px #cddc39, 987px 990px #4caf50,
+    1655px 911px #00bcd4, 1102px 1216px #ff5722, 1807px 1044px #fff,
+    660px 435px #03a9f4, 299px 678px #4caf50, 1193px 115px #ff9800,
+    918px 290px #cddc39, 1447px 1422px #ffeb3b, 91px 1273px #9c27b0,
+    108px 223px #ffeb3b, 146px 754px #00bcd4, 461px 1446px #ff5722,
+    1004px 391px #673ab7, 1529px 516px #f44336, 1206px 845px #cddc39,
+    347px 583px #009688, 1102px 1332px #f44336, 709px 1756px #00bcd4,
+    1972px 248px #fff, 1669px 1344px #ff5722, 1132px 406px #f44336,
+    320px 1076px #cddc39, 126px 943px #ffeb3b, 263px 604px #ff5722,
+    1546px 692px #f44336;
+  animation: animStar 50s linear infinite;
+}
+
+.starfifthdark {
+  content: " ";
+  position: absolute;
+  border-radius: 50%;
+  width: 1px;
+  height: 1px;
+  background: transparent;
+  box-shadow: 571px 173px #00bcd4, 1732px 143px #00bcd4, 1745px 454px #ff5722,
+    234px 784px #00bcd4, 1793px 1123px #ff9800, 1076px 504px #03a9f4,
+    633px 601px #ff5722, 350px 630px #ffeb3b, 1164px 782px #00bcd4,
+    76px 690px #3f51b5, 1825px 701px #cddc39, 1646px 578px #ffeb3b,
+    544px 293px #2196f3, 445px 1061px #673ab7, 928px 47px #00bcd4,
+    168px 1410px #8bc34a, 777px 782px #9c27b0, 1235px 1941px #9c27b0,
+    104px 1690px #8bc34a, 1167px 1338px #e91e63, 345px 1652px #009688,
+    1682px 1196px #f44336, 1995px 494px #8bc34a, 428px 798px #ff5722,
+    340px 1623px #f44336, 605px 349px #9c27b0, 1339px 1344px #673ab7,
+    1102px 1745px #3f51b5, 1592px 1676px #2196f3, 419px 1024px #ff9800,
+    630px 1033px #4caf50, 1995px 1644px #00bcd4, 1092px 712px #9c27b0,
+    1355px 606px #f44336, 622px 1881px #cddc39, 1481px 621px #9e9e9e,
+    19px 1348px #8bc34a, 864px 1780px #e91e63, 442px 1136px #2196f3,
+    67px 712px #ff5722, 89px 1406px #f44336, 275px 321px #009688,
+    592px 630px #e91e63, 1012px 1690px #9c27b0, 1749px 23px #673ab7,
+    94px 1542px #ffeb3b, 1201px 1657px #3f51b5, 1505px 692px #2196f3,
+    1799px 601px #03a9f4, 656px 811px #00bcd4, 701px 597px #00bcd4,
+    1202px 46px #ff5722, 890px 569px #ff5722, 1613px 813px #2196f3,
+    223px 252px #ff9800, 983px 1093px #f44336, 726px 1029px #ffc107,
+    1764px 778px #cddc39, 622px 1643px #f44336, 174px 1559px #673ab7,
+    212px 517px #00bcd4, 340px 505px #fff, 1700px 39px #fff,
+    1768px 516px #f44336, 849px 391px #ff9800, 228px 1824px #fff,
+    1119px 1680px #ffc107, 812px 1480px #3f51b5, 1438px 1585px #cddc39,
+    137px 1397px #fff, 1080px 456px #673ab7, 1208px 1437px #03a9f4,
+    857px 281px #f44336, 1254px 1306px #cddc39, 987px 990px #4caf50,
+    1655px 911px #00bcd4, 1102px 1216px #ff5722, 1807px 1044px #fff,
+    660px 435px #03a9f4, 299px 678px #4caf50, 1193px 115px #ff9800,
+    918px 290px #cddc39, 1447px 1422px #ffeb3b, 91px 1273px #9c27b0,
+    108px 223px #ffeb3b, 146px 754px #00bcd4, 461px 1446px #ff5722,
+    1004px 391px #673ab7, 1529px 516px #f44336, 1206px 845px #cddc39,
+    347px 583px #009688, 1102px 1332px #f44336, 709px 1756px #00bcd4,
+    1972px 248px #fff, 1669px 1344px #ff5722, 1132px 406px #f44336,
+    320px 1076px #cddc39, 126px 943px #ffeb3b, 263px 604px #ff5722,
+    1546px 692px #f44336;
+  animation: animStar 100s linear infinite;
+}
+@keyframes animStar {
+  0% {
+    transform: translateY(0px);
+  }
+  100% {
+    transform: translateY(-1000px);
   }
 }
diff --git a/client/src/styles/Home2.css b/client/src/styles/Home2.css
new file mode 100644
index 0000000..24473cd
--- /dev/null
+++ b/client/src/styles/Home2.css
@@ -0,0 +1,188 @@
+html {
+    background-color: #181828;
+  }
+  
+  .starsec {
+    content: " ";
+    border-radius: 50%;
+    position: absolute;
+    width: 9px;
+    height: 9px;
+    background: transparent;
+    box-shadow: 571px 173px #00bcd4, 1732px 143px #00bcd4, 1745px 454px #ff5722,
+      234px 784px #00bcd4, 1793px 1123px #ff9800, 1076px 504px #03a9f4,
+      633px 601px #ff5722, 350px 630px #ffeb3b, 1164px 782px #00bcd4,
+      76px 690px #3f51b5, 1825px 701px #cddc39, 1646px 578px #ffeb3b,
+      544px 293px #2196f3, 445px 1061px #673ab7, 928px 47px #00bcd4,
+      168px 1410px #8bc34a, 777px 782px #9c27b0, 1235px 1941px #9c27b0,
+      104px 1690px #8bc34a, 1167px 1338px #e91e63, 345px 1652px #009688,
+      1682px 1196px #f44336, 1995px 494px #8bc34a, 428px 798px #ff5722,
+      340px 1623px #f44336, 605px 349px #9c27b0, 1339px 1344px #673ab7,
+      1102px 1745px #3f51b5, 1592px 1676px #2196f3, 419px 1024px #ff9800,
+      630px 1033px #4caf50, 1995px 1644px #00bcd4, 1092px 712px #9c27b0,
+      1355px 606px #f44336, 622px 1881px #cddc39, 1481px 621px #9e9e9e,
+      19px 1348px #8bc34a, 864px 1780px #e91e63, 442px 1136px #2196f3,
+      67px 712px #ff5722, 89px 1406px #f44336, 275px 321px #009688,
+      592px 630px #e91e63, 1012px 1690px #9c27b0, 1749px 23px #673ab7,
+      94px 1542px #ffeb3b, 1201px 1657px #3f51b5, 1505px 692px #2196f3,
+      1799px 601px #03a9f4, 656px 811px #00bcd4, 701px 597px #00bcd4,
+      1202px 46px #ff5722, 890px 569px #ff5722, 1613px 813px #2196f3,
+      223px 252px #ff9800, 983px 1093px #f44336, 726px 1029px #ffc107,
+      1764px 778px #cddc39, 622px 1643px #f44336, 174px 1559px #673ab7,
+      212px 517px #00bcd4, 340px 505px #fff, 1700px 39px #fff,
+      1768px 516px #f44336, 849px 391px #ff9800, 228px 1824px #fff,
+      1119px 1680px #ffc107, 812px 1480px #3f51b5, 1438px 1585px #cddc39,
+      137px 1397px #fff, 1080px 456px #673ab7, 1208px 1437px #03a9f4,
+      857px 281px #f44336, 1254px 1306px #cddc39, 987px 990px #4caf50,
+      1655px 911px #00bcd4, 1102px 1216px #ff5722, 1807px 1044px #fff,
+      660px 435px #03a9f4, 299px 678px #4caf50, 1193px 115px #ff9800,
+      918px 290px #cddc39, 1447px 1422px #ffeb3b, 91px 1273px #9c27b0,
+      108px 223px #ffeb3b, 146px 754px #00bcd4, 461px 1446px #ff5722,
+      1004px 391px #673ab7, 1529px 516px #f44336, 1206px 845px #cddc39,
+      347px 583px #009688, 1102px 1332px #f44336, 709px 1756px #00bcd4,
+      1972px 248px #fff, 1669px 1344px #ff5722, 1132px 406px #f44336,
+      320px 1076px #cddc39, 126px 943px #ffeb3b, 263px 604px #ff5722,
+      1546px 692px #f44336;
+    animation: animStar 150s linear infinite;
+  }
+  
+  .starthird {
+    content: "dark";
+    position: absolute;
+    border-radius: 50%;
+    width: 4px;
+    height: 4px;
+    background: transparent;
+    box-shadow: 571px 173px #00bcd4, 1732px 143px #ff5722, 1745px 454px #00bcd4,
+      234px 784px #00bcd4, 1793px 1123px #ff9800, 1076px 504px #03a9f4,
+      633px 601px #ff5722, 350px 630px #03a9f4, 1164px 782px #ffeb3b,
+      76px 690px #3f51b5, 1825px 701px #cddc39, 1646px 578px #9c27b0,
+      544px 293px #2196f3, 445px 1061px #673ab7, 928px 47px #00bcd4,
+      168px 1410px #8bc34a, 777px 782px #9c27b0, 1235px 1941px #9c27b0,
+      104px 1690px #00bcd4, 1167px 1338px #e91e63, 345px 1652px #009688,
+      1682px 1196px #f44336, 1995px 494px #8bc34a, 428px 798px #ff5722,
+      340px 1623px #03a9f4, 605px 349px #9c27b0, 1339px 1344px #673ab7,
+      1102px 1745px #3f51b5, 1592px 1676px #2196f3, 419px 1024px #ff9800,
+      630px 1033px #4caf50, 1995px 1644px #00bcd4, 1092px 712px #9c27b0,
+      1355px 606px #f44336, 622px 1881px #cddc39, 1481px 621px #9e9e9e,
+      19px 1348px #8bc34a, 864px 1780px #e91e63, 442px 1136px #2196f3,
+      67px 712px #ff5722, 89px 1406px #f44336, 275px 321px #009688,
+      592px 630px #e91e63, 1012px 1690px #9c27b0, 1749px 23px #673ab7,
+      94px 1542px #ffeb3b, 1201px 1657px #3f51b5, 1505px 692px #2196f3,
+      1799px 601px #03a9f4, 656px 811px #00bcd4, 701px 597px #00bcd4,
+      1202px 46px #ff5722, 890px 569px #ff5722, 1613px 813px #2196f3,
+      223px 252px #ff9800, 983px 1093px #fff, 726px 1029px #ffc107,
+      1764px 778px #cddc39, 622px 1643px #f44336, 174px 1559px #673ab7,
+      212px 517px #00bcd4, 340px 505px #fff, 1700px 39px #fff,
+      1768px 516px #f44336, 849px 391px #ff9800, 228px 1824px #fff,
+      1119px 1680px #ffc107, 812px 1480px #3f51b5, 1438px 1585px #cddc39,
+      137px 1397px #fff, 1080px 456px #673ab7, 1208px 1437px #03a9f4,
+      857px 281px #f44336, 1254px 1306px #cddc39, 987px 990px #4caf50,
+      1655px 911px #00bcd4, 1102px 1216px #ff5722, 1807px 1044px #fff,
+      660px 435px #03a9f4, 299px 678px #4caf50, 1193px 115px #ff9800,
+      918px 290px #cddc39, 1447px 1422px #ffeb3b, 91px 1273px #9c27b0,
+      108px 223px #ffeb3b, 146px 754px #00bcd4, 461px 1446px #ff5722,
+      1004px 391px #673ab7, 1529px 516px #f44336, 1206px 845px #cddc39,
+      347px 583px #009688, 1102px 1332px #9e9e9e, 709px 1756px #00bcd4,
+      1972px 248px #fff, 1669px 1344px #3f51b5, 1132px 406px #f44336,
+      320px 1076px #cddc39, 126px 943px #ffeb3b, 263px 604px #009688,
+      1546px 692px #f44336;
+    animation: animStar 50s linear infinite;
+  }
+  
+  .starfourth {
+    content: " ";
+    border-radius: 50%;
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    background: transparent;
+    box-shadow: 571px 173px #00bcd4, 1732px 143px #00bcd4, 1745px 454px #ff5722,
+      234px 784px #00bcd4, 1793px 1123px #ff9800, 1076px 504px #03a9f4,
+      633px 601px #ff5722, 350px 630px #ffeb3b, 1164px 782px #00bcd4,
+      76px 690px #3f51b5, 1825px 701px #cddc39, 1646px 578px #ffeb3b,
+      544px 293px #2196f3, 445px 1061px #673ab7, 928px 47px #00bcd4,
+      168px 1410px #8bc34a, 777px 782px #9c27b0, 1235px 1941px #9c27b0,
+      104px 1690px #8bc34a, 1167px 1338px #e91e63, 345px 1652px #009688,
+      1682px 1196px #f44336, 1995px 494px #8bc34a, 428px 798px #ff5722,
+      340px 1623px #f44336, 605px 349px #9c27b0, 1339px 1344px #673ab7,
+      1102px 1745px #3f51b5, 1592px 1676px #2196f3, 419px 1024px #ff9800,
+      630px 1033px #4caf50, 1995px 1644px #00bcd4, 1092px 712px #9c27b0,
+      1355px 606px #f44336, 622px 1881px #cddc39, 1481px 621px #9e9e9e,
+      19px 1348px #8bc34a, 864px 1780px #e91e63, 442px 1136px #2196f3,
+      67px 712px #ff5722, 89px 1406px #f44336, 275px 321px #009688,
+      592px 630px #e91e63, 1012px 1690px #9c27b0, 1749px 23px #673ab7,
+      94px 1542px #ffeb3b, 1201px 1657px #3f51b5, 1505px 692px #2196f3,
+      1799px 601px #03a9f4, 656px 811px #00bcd4, 701px 597px #00bcd4,
+      1202px 46px #ff5722, 890px 569px #ff5722, 1613px 813px #2196f3,
+      223px 252px #ff9800, 983px 1093px #f44336, 726px 1029px #ffc107,
+      1764px 778px #cddc39, 622px 1643px #f44336, 174px 1559px #673ab7,
+      212px 517px #00bcd4, 340px 505px #fff, 1700px 39px #fff,
+      1768px 516px #f44336, 849px 391px #ff9800, 228px 1824px #fff,
+      1119px 1680px #ffc107, 812px 1480px #3f51b5, 1438px 1585px #cddc39,
+      137px 1397px #fff, 1080px 456px #673ab7, 1208px 1437px #03a9f4,
+      857px 281px #f44336, 1254px 1306px #cddc39, 987px 990px #4caf50,
+      1655px 911px #00bcd4, 1102px 1216px #ff5722, 1807px 1044px #fff,
+      660px 435px #03a9f4, 299px 678px #4caf50, 1193px 115px #ff9800,
+      918px 290px #cddc39, 1447px 1422px #ffeb3b, 91px 1273px #9c27b0,
+      108px 223px #ffeb3b, 146px 754px #00bcd4, 461px 1446px #ff5722,
+      1004px 391px #673ab7, 1529px 516px #f44336, 1206px 845px #cddc39,
+      347px 583px #009688, 1102px 1332px #f44336, 709px 1756px #00bcd4,
+      1972px 248px #fff, 1669px 1344px #ff5722, 1132px 406px #f44336,
+      320px 1076px #cddc39, 126px 943px #ffeb3b, 263px 604px #ff5722,
+      1546px 692px #f44336;
+    animation: animStar 50s linear infinite;
+  }
+  
+  .starfifth {
+    content: " ";
+    position: absolute;
+    border-radius: 50%;
+    width: 1px;
+    height: 1px;
+    background: transparent;
+    box-shadow: 571px 173px #00bcd4, 1732px 143px #00bcd4, 1745px 454px #ff5722,
+      234px 784px #00bcd4, 1793px 1123px #ff9800, 1076px 504px #03a9f4,
+      633px 601px #ff5722, 350px 630px #ffeb3b, 1164px 782px #00bcd4,
+      76px 690px #3f51b5, 1825px 701px #cddc39, 1646px 578px #ffeb3b,
+      544px 293px #2196f3, 445px 1061px #673ab7, 928px 47px #00bcd4,
+      168px 1410px #8bc34a, 777px 782px #9c27b0, 1235px 1941px #9c27b0,
+      104px 1690px #8bc34a, 1167px 1338px #e91e63, 345px 1652px #009688,
+      1682px 1196px #f44336, 1995px 494px #8bc34a, 428px 798px #ff5722,
+      340px 1623px #f44336, 605px 349px #9c27b0, 1339px 1344px #673ab7,
+      1102px 1745px #3f51b5, 1592px 1676px #2196f3, 419px 1024px #ff9800,
+      630px 1033px #4caf50, 1995px 1644px #00bcd4, 1092px 712px #9c27b0,
+      1355px 606px #f44336, 622px 1881px #cddc39, 1481px 621px #9e9e9e,
+      19px 1348px #8bc34a, 864px 1780px #e91e63, 442px 1136px #2196f3,
+      67px 712px #ff5722, 89px 1406px #f44336, 275px 321px #009688,
+      592px 630px #e91e63, 1012px 1690px #9c27b0, 1749px 23px #673ab7,
+      94px 1542px #ffeb3b, 1201px 1657px #3f51b5, 1505px 692px #2196f3,
+      1799px 601px #03a9f4, 656px 811px #00bcd4, 701px 597px #00bcd4,
+      1202px 46px #ff5722, 890px 569px #ff5722, 1613px 813px #2196f3,
+      223px 252px #ff9800, 983px 1093px #f44336, 726px 1029px #ffc107,
+      1764px 778px #cddc39, 622px 1643px #f44336, 174px 1559px #673ab7,
+      212px 517px #00bcd4, 340px 505px #fff, 1700px 39px #fff,
+      1768px 516px #f44336, 849px 391px #ff9800, 228px 1824px #fff,
+      1119px 1680px #ffc107, 812px 1480px #3f51b5, 1438px 1585px #cddc39,
+      137px 1397px #fff, 1080px 456px #673ab7, 1208px 1437px #03a9f4,
+      857px 281px #f44336, 1254px 1306px #cddc39, 987px 990px #4caf50,
+      1655px 911px #00bcd4, 1102px 1216px #ff5722, 1807px 1044px #fff,
+      660px 435px #03a9f4, 299px 678px #4caf50, 1193px 115px #ff9800,
+      918px 290px #cddc39, 1447px 1422px #ffeb3b, 91px 1273px #9c27b0,
+      108px 223px #ffeb3b, 146px 754px #00bcd4, 461px 1446px #ff5722,
+      1004px 391px #673ab7, 1529px 516px #f44336, 1206px 845px #cddc39,
+      347px 583px #009688, 1102px 1332px #f44336, 709px 1756px #00bcd4,
+      1972px 248px #fff, 1669px 1344px #ff5722, 1132px 406px #f44336,
+      320px 1076px #cddc39, 126px 943px #ffeb3b, 263px 604px #ff5722,
+      1546px 692px #f44336;
+    animation: animStar 100s linear infinite;
+  }
+  @keyframes animStar {
+    0% {
+      transform: translateY(0px);
+    }
+    100% {
+      transform: translateY(-1000px);
+    }
+  }
+  
\ No newline at end of file
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 2394243..a2db668 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  darkMode:'class',
   theme: {
     extend: {
       boxShadow: {
diff --git a/server/api.txt b/server/api.txt
index d502f95..ac21b21 100644
--- a/server/api.txt
+++ b/server/api.txt
@@ -1,10 +1,55 @@
-API LIST
+API LIST ที่ใช้แน่ๆทั้งหมด 10 ตัว
+
+-       GET    ->  3
+-       PUT    ->  2
+-       POST   ->  4
+-       DELETE ->  1
+
 
 API: /api/auth/signin
 Method: POST 
 Todo: เข้าสู่ระบบ
-
+SQL: select * from users where email = :email
 
 API: /api/auth/signup
+Method: POST 
+Todo: สมัครสมาชิค
+SQL: insert into users(user_id, email, username, password, role, create_at, update_at) values(:user_id, :email, :username, :password, :role, :create_at, :update_at) returning *
+
+API: /api/auth/verify
+Method: GET
+Todo: verify token
+
+API: /api/colors/add
 Method: POST
-Todo: สมัครสมาชิค
\ No newline at end of file
+Todo: Add color
+SQL: insert into colors(hex_code, color_meaning, create_at, update_at) values(:hex_code, :color_meaning, :create_at, :update_at)
+
+API: /api/colors/get
+Method: GET
+Todo: fetch color
+SQL: select * from colors
+
+API: /api/colors/update/{id}
+Method: PUT
+Todo: Update color
+SQL: update colors set color_meaning=:color_meaning, create_at=:create_at, update_at=:update_at where hex_code=:hex_code
+
+API: /api/event/add
+Method: POST
+Todo: add event
+SQL: insert into events(event_id, header, description, event_date, time_range, create_at, update_at, user_id, hex_code) values(:event_id, :header, :description, :event_date, :time_range, :create_at, :update_at, :user_id, :hex_code) 
+
+API: /api/event/update/{id}
+Method: PUT
+Todo: udpate event
+SQL: update events set header=:header ,description=:description, event_date=:event_date, time_range=:time_range, update_at=:update_at where event_id=:event_id returning *
+
+API: /api/event/get/{date}
+Method: GET
+Todo: select * from events as e inner join users as u on u.user_id = e.user_id inner join colors as c on c.hex_code = e.hex_code where e.event_date like %:date% and (u.user_id = :user_id or u.role = 'ADMIN') order by c.hex_code
+
+API: /api/event/delete/{id}
+Method: DELETE
+Todo: delete event
+SQL: delete from events where event_id=:event_id returning *
\ No newline at end of file
diff --git a/server/src/main/java/com/oop/server/repository/ColorRepository.java b/server/src/main/java/com/oop/server/repository/ColorRepository.java
index 8c45906..44d8b90 100644
--- a/server/src/main/java/com/oop/server/repository/ColorRepository.java
+++ b/server/src/main/java/com/oop/server/repository/ColorRepository.java
@@ -18,6 +18,6 @@ public interface ColorRepository extends CrudRepository<ColorModel, String> {
     ColorModel findByHex_code(@Param("hex_code") String hex_code);
 
 
-    @Query(value = "insert into colors(hex_code, color_meaning, create_at, update_at) values(:hex_code, :color_meaning, :create_at, :update_at)", nativeQuery = true)
+    @Query(value = "insert into colors(hex_code, color_meaning, create_at, update_at) values(:hex_code, :color_meaning, :create_at, :update_at) returning * ", nativeQuery = true)
     ColorModel saveColorModel(@Param("hex_code") String hex_code, @Param("color_meaning") String color_meaning, @Param("create_at") LocalDateTime create_at, @Param("update_at") LocalDateTime update_at);
 }
diff --git a/server/src/main/resources/application.properties b/server/src/main/resources/application.properties
index 20073e2..757c32e 100644
--- a/server/src/main/resources/application.properties
+++ b/server/src/main/resources/application.properties
@@ -1,10 +1,8 @@
-spring.config.import=optional:file:.env[.properties]
-
-server.port=${SERVER_PORT}
-spring.datasource.url=jdbc:${DB_TYPE}://localhost:${DB_PORT}/${DB_NAME}
-spring.datasource.username=${DB_USERNAME}
-spring.datasource.password=${DB_PASSWORD}
+server.port=8000
+spring.datasource.url=jdbc:postgresql://localhost:5432/acstable
+spring.datasource.username=postgres
+spring.datasource.password=442546
 
 
 spring.jpa.generate-ddl=true
-# spring.jpa.hibernate.ddl-auto = create
+#spring.jpa.hibernate.ddl-auto = create