diff --git a/frontend-react/src/images/icon 1.png b/frontend-react/src/images/icon 1.png
new file mode 100644
index 0000000000000000000000000000000000000000..0021bfc7de97a2f71ea81694f48fef892d330a24
Binary files /dev/null and b/frontend-react/src/images/icon 1.png differ
diff --git a/frontend-react/src/images/icon 2.png b/frontend-react/src/images/icon 2.png
new file mode 100644
index 0000000000000000000000000000000000000000..70840f057c87d1fab43d94f0de6e493eb9af3d75
Binary files /dev/null and b/frontend-react/src/images/icon 2.png differ
diff --git a/frontend-react/src/images/recipe.jpg b/frontend-react/src/images/recipe.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5315970cb48e4f22baa963d7e175ebcfe56d29a8
Binary files /dev/null and b/frontend-react/src/images/recipe.jpg differ
diff --git a/frontend-react/src/images/refresh.png b/frontend-react/src/images/refresh.png
new file mode 100644
index 0000000000000000000000000000000000000000..0c11bafdca4e37dd679a89d834038d067a3ae95e
Binary files /dev/null and b/frontend-react/src/images/refresh.png differ
diff --git a/frontend-react/src/images/reload.png b/frontend-react/src/images/reload.png
new file mode 100644
index 0000000000000000000000000000000000000000..228d8c59ec3fdbe692d63af66025dcee0ccc3d74
Binary files /dev/null and b/frontend-react/src/images/reload.png differ
diff --git a/frontend-react/src/images/style.css b/frontend-react/src/images/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..3f0e20a31af592c10b7447a11801d16475bea58b
--- /dev/null
+++ b/frontend-react/src/images/style.css
@@ -0,0 +1,356 @@
+body{
+ background: linear-gradient(135deg, #a7acad 0%, #bac5cc 100%);
+ 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("wall 1.jpeg");
+ background-size: cover;
+ overflow: auto;
+}
+
+.msg_area.black{
+ background-image: url("wall 2.jpeg");
+}
+.header{
+ margin: auto;
+ padding: 10px;
+ text-align: center;
+ font-size: 1.5em;
+ color: #5b5b5b;
+ background: #d0d0d0;
+ border-bottom: 3px solid white;
+ border-top-left-radius: 30px;
+ border-top-right-radius: 30px;
+ font-family: "Arial";
+ 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: 'Times New Roman';
+ word-wrap: break-word;
+
+}
+.msg.left{
+ margin-left: 10px;
+ border-bottom-right-radius: 10px;
+ background: linear-gradient(135deg, #f1ed04 0%, #be7819 100%);
+}
+.msg.right{
+ margin-right: 10px;
+ border-bottom-left-radius: 10px;
+ color: white;
+ background: linear-gradient(135deg, #be7819 0%, #fd8d00 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: image("icon 1.png");
+ border-radius: 50%;
+}
+
+.icon.left{
+ background-image: image("icon 2.png");
+}
+
+
+.header_bottom{
+ position: absolute;
+ display: flex;
+ width: 100%;
+ height: 50px;
+ bottom: 0;
+ background: #d0d0d0;
+ 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: #f1ed04;
+ transition-duration: 0.3s;
+ overflow: hidden;
+ text-align: center;
+}
+.send_button:hover{
+ background-color: #fd8d00;
+}
+
+footer{
+ margin-top: 0;
+ margin-bottom: 5px;
+ margin-left: 20px;
+ color: #5b5b5b;
+}
+
+@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
diff --git a/frontend-react/src/images/wall 1.jpeg b/frontend-react/src/images/wall 1.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..abc0363035bd93bb47ce73162281fb5e60f1f5a6
Binary files /dev/null and b/frontend-react/src/images/wall 1.jpeg differ
diff --git a/frontend-react/src/images/wall 2.jpeg b/frontend-react/src/images/wall 2.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..72eb953ff92cd77b391b33f3a73969c09b6d06dd
Binary files /dev/null and b/frontend-react/src/images/wall 2.jpeg differ