diff --git a/frontend-react/src/styles/dark.jpeg b/frontend-react/src/styles/dark.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..e47cfbd88a3a532205e6ece597707d206234f509
Binary files /dev/null and b/frontend-react/src/styles/dark.jpeg differ
diff --git a/frontend-react/src/styles/light.jpeg b/frontend-react/src/styles/light.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..a63a11a1bfdbb17c50e8d1c84710885bbe9caee2
Binary files /dev/null and b/frontend-react/src/styles/light.jpeg differ
diff --git a/frontend-react/src/styles/person.png b/frontend-react/src/styles/person.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a6e2adf3566b0120f6d86013f23519a3e27e5be
Binary files /dev/null and b/frontend-react/src/styles/person.png differ
diff --git a/frontend-react/src/styles/person1.png b/frontend-react/src/styles/person1.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb8d81087ee1a0a9f04f981f3d93c20bf97811b7
Binary files /dev/null and b/frontend-react/src/styles/person1.png differ
diff --git a/frontend-react/src/styles/recipe.jpeg b/frontend-react/src/styles/recipe.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..4e7fb1e2628774d77cfd9cd2bf048cc929fd285e
Binary files /dev/null and b/frontend-react/src/styles/recipe.jpeg differ
diff --git a/frontend-react/src/styles/recipe1.jpeg b/frontend-react/src/styles/recipe1.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..6345498511721b64741f9e4b688e139580a5bd3d
Binary files /dev/null and b/frontend-react/src/styles/recipe1.jpeg differ
diff --git a/frontend-react/src/styles/reload.png b/frontend-react/src/styles/reload.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b9071e892af9f5d442946687ab51fc11c947835
Binary files /dev/null and b/frontend-react/src/styles/reload.png differ
diff --git a/frontend-react/src/styles/reload1.png b/frontend-react/src/styles/reload1.png
new file mode 100644
index 0000000000000000000000000000000000000000..7296d2076741c9df5001fce086f2ad7d6c1cf3d8
Binary files /dev/null and b/frontend-react/src/styles/reload1.png differ
diff --git a/frontend-react/src/styles/style.css b/frontend-react/src/styles/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..4e24414bd9e3e0d9ab5a507d63ba042ddb44a175
--- /dev/null
+++ b/frontend-react/src/styles/style.css
@@ -0,0 +1,355 @@
+body{
+ background: url('recipe.jpeg');
+ margin: 0;
+}
+
+
+.main {
+ transition: margin 400ms cubic-bezier(0.17,0.04,0.03,0.94);
+ position: relative;
+ height: calc(100vh - 40px);
+ max-width: 900px;
+ margin: auto;
+ margin-top: 20px;
+ background-color: #d0d0d0;
+ border: 3px solid white;
+ border-radius: 30px;
+ overflow: hidden;
+}
+
+#sidebar {
+ background: linear-gradient(135deg, #be7819 0%, #fd8d00 100%);
+ position: absolute;
+ top: -250px;
+ left: 0;
+ width: 100%;
+ height: 250px;
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+ transition: top 400ms cubic-bezier(0.17,0.04,0.03,0.94);
+ color: white;
+ font-family: 'Times New Roman';
+}
+
+.down_label {
+ display: block;
+ position: absolute;
+ right: 50px;
+ top: 0;
+ cursor: pointer;
+ background: #fd8d00;
+ width: 30px;
+ height: 20px;
+ border-radius: 0 0 5px 5px;
+ color: white;
+ font-size: 1em;
+ text-align: center;
+ cursor: pointer;
+ transition: all 400ms cubic-bezier(0.17,0.04,0.03,0.94);
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+ padding: 10px;
+ z-index: 100;
+}
+
+
+.down_label:hover {
+ box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)
+}
+
+
+.down_label:after, .down_button:checked + .down_label {
+ content: "=";
+ font-family: "Arial";
+}
+
+
+.down_button:checked ~ #sidebar {
+ top: 0
+}
+
+
+.down_button:checked ~ .down_label {
+ top: 250px;
+ background-color: #f1ed04;
+}
+
+
+.down_button:checked ~ .main {
+ margin-top: 300px
+}
+
+
+ul{
+ margin: 0;
+ padding: 0;
+ background: linear-gradient(135deg, #be7819 0%, #fd8d00 100%);
+ color: white;
+}
+li{
+ list-style-type: none;
+ display: inline-block;
+ color: inherit;
+}
+.bar{
+ margin-left: 30px;
+ padding: 8px;
+ border: none;
+ cursor: pointer;
+ background: none;
+ font-size: 1.3em;
+ color: inherit;
+ font-family: "Arial";
+}
+
+#home{
+ cursor: default;
+}
+.bar:hover{
+ transition: 0.3s;
+ background: #b5c7c3;
+}
+#dark_theme{
+ position: absolute;
+ right: 30px;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+#text{
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+footer{
+ margin: 20px;
+ color: #5b5b5b;
+}
+
+.placeholder-white::placeholder {
+ color: white;
+}
+
+.msg_area{
+ position: absolute;
+ width: 100%;
+ height: calc(100% - 103px);
+ background-image: url("light.jpeg");
+ background-size: cover;
+ overflow: auto;
+}
+
+.msg_area.black{
+ background-image: url("dark.jpeg");
+}
+.header{
+ margin: auto;
+ padding: 10px;
+ text-align: center;
+ font-size: 1.5em;
+ color: rgb(255, 115, 0);
+ background: rgb(211, 170, 130);
+ border-bottom: 3px solid rgb(255, 255, 255);
+ border-top-left-radius: 30px;
+ border-top-right-radius: 30px;
+ font-family: 'Times New Roman', Times, serif;
+ font-size: 1.6em;
+}
+.refresh {
+ position: absolute;
+ top: 10px;
+ width: 30px;
+ height: 22px;
+ right: 20px;
+ border: none;
+ cursor: pointer;
+ appearance: none;
+ background-color: inherit;
+}
+.update {
+ position: absolute;
+ right: 0;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ width: 30px;
+ height: 22px;
+ transition: .2s;
+}
+.update.hover {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ opacity: 0;
+ transition: opacity .2s;
+}
+.refresh:hover .update.hover {
+ opacity: 1;
+ transform: rotate(180deg);
+}
+.refresh:hover .update {
+ opacity: 0;
+ transform: rotate(180deg);
+}
+.left_message{
+ display: flex;
+ max-width: 80%;
+ margin-left: 20px;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ word-wrap: break-word;
+}
+.right_message{
+ display: flex;
+ max-width: 80%;
+ flex-direction: row-reverse;
+ margin: 20px 20px 20px auto;
+ word-wrap: break-word;
+}
+
+.msg{
+ min-width: 100px;
+ padding: 10px 10px 15px 10px;
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+ font-family: Georgia, 'Times New Roman', Times, serif;
+ word-wrap: break-word;
+
+}
+.msg.left{
+ margin-left: 10px;
+ border-bottom-right-radius: 10px;
+ background: linear-gradient(135deg, #d7a858 0%, #ca7b47 100%);
+}
+.msg.right{
+ margin-right: 10px;
+ border-bottom-left-radius: 10px;
+ color: white;
+ background: linear-gradient(135deg, #d7a858 0%, #ca7b47 100%);
+}
+.mes_info{
+ display: flex;
+ margin-bottom: 5px;
+ margin-left: 6px;
+ font-weight: bold;
+ font-size: 1.2em;
+}
+.mes_header{
+ margin-right: 6px;
+ max-width: 60%;
+}
+.mes_time{
+ margin: auto 1px 5px auto;
+ font-size: 0.5em;
+}
+
+.mes_text{
+ margin-left: 6px;
+ font-size: 1em;
+}
+
+
+@media (min-width: 992px){
+ .msg_area{
+ height: calc(100% - 101px);
+ }
+}
+
+.icon{
+ width: 50px;
+ height: 50px;
+ min-width: 50px;
+ margin: auto 0 0 0;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+ background-image: url(person1.png);
+ border-radius: 50%;
+}
+
+.icon.left{
+ background-image: url("person.png")
+}
+
+
+.header_bottom{
+ position: absolute;
+ display: flex;
+ width: 100%;
+ height: 50px;
+ bottom: 0;
+ background: rgb(211, 170, 130);
+ border-top: 3px solid white;
+ border-bottom-left-radius: 30px;
+ border-bottom-right-radius: 30px;
+}
+#input_area{
+ display: flex;
+ width: 60%;
+ flex: 1;
+ margin: 8px 3px 8px 11px;
+ padding: 2px 2px 2px 10px;
+ border: none;
+ border-radius: 5px 5px 5px 15px;
+ font-size: 1.3em;
+ height: auto;
+ overflow-y: auto;
+ resize: none;
+}
+.send_button{
+ width: 60px;
+ margin: 8px 8px 8px 3px;
+ cursor: pointer;
+ border: none;
+ border-radius: 5px 5px 15px 5px;
+ color: #ffffff;
+ background-color: #d89a4e;
+ transition-duration: 0.3s;
+ overflow: hidden;
+ text-align: center;
+}
+.send_button:hover{
+ background-color: #ffffff;
+}
+
+footer{
+ margin-top: 0;
+ margin-bottom: 5px;
+ margin-left: 20px;
+ color: #000000;
+}
+
+@media (max-width: 767px) {
+ .mes_text{
+ font-size: 2em;
+ }
+ .mes_info{
+ font-size: 2.5em;
+ }
+ .msg_area{
+ height: calc(100% - 93px);
+ }
+ .header{
+ padding: 5px;
+ }
+ .refresh{
+ top: 5px;
+ }
+ .bar {
+ padding: 6px;
+ margin-left: 10px;
+ font-size: 0.8em;
+ }
+
+ #dark_theme {
+ right: 10px;
+ top: 0.3px;
+ }
+
+ #text{
+ font-size: 0.8em;
+ }
+
+}
\ No newline at end of file