diff --git a/deblog/package-lock.json b/deblog/package-lock.json
index 90f2678..377151e 100644
--- a/deblog/package-lock.json
+++ b/deblog/package-lock.json
@@ -25,6 +25,9 @@
         "remark-gfm": "^3.0.1",
         "styled-components": "^5.3.6",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "gh-pages": "^4.0.0"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -4948,6 +4951,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/array.prototype.flat": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
@@ -6938,6 +6950,12 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.270.tgz",
       "integrity": "sha512-KNhIzgLiJmDDC444dj9vEOpZEgsV96ult9Iff98Vanumn+ShJHd5se8aX6KeVxdc0YQeqdrezBZv89rleDbvSg=="
     },
+    "node_modules/email-addresses": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz",
+      "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==",
+      "dev": true
+    },
     "node_modules/emittery": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
@@ -8122,6 +8140,32 @@
         "node": ">=10"
       }
     },
+    "node_modules/filename-reserved-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+      "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/filenamify": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz",
+      "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==",
+      "dev": true,
+      "dependencies": {
+        "filename-reserved-regex": "^2.0.0",
+        "strip-outer": "^1.0.1",
+        "trim-repeated": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "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/sponsors/sindresorhus"
+      }
+    },
     "node_modules/filesize": {
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
@@ -8594,6 +8638,103 @@
         "url": "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/sponsors/ljharb"
       }
     },
+    "node_modules/gh-pages": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-4.0.0.tgz",
+      "integrity": "sha512-p8S0T3aGJc68MtwOcZusul5qPSNZCalap3NWbhRUZYu1YOdp+EjZ+4kPmRM8h3NNRdqw00yuevRjlkuSzCn7iQ==",
+      "dev": true,
+      "dependencies": {
+        "async": "^2.6.1",
+        "commander": "^2.18.0",
+        "email-addresses": "^3.0.1",
+        "filenamify": "^4.3.0",
+        "find-cache-dir": "^3.3.1",
+        "fs-extra": "^8.1.0",
+        "globby": "^6.1.0"
+      },
+      "bin": {
+        "gh-pages": "bin/gh-pages.js",
+        "gh-pages-clean": "bin/gh-pages-clean.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/gh-pages/node_modules/array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+      "dev": true,
+      "dependencies": {
+        "array-uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gh-pages/node_modules/async": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.14"
+      }
+    },
+    "node_modules/gh-pages/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
+    "node_modules/gh-pages/node_modules/fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/gh-pages/node_modules/globby": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+      "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^1.0.1",
+        "glob": "^7.0.3",
+        "object-assign": "^4.0.1",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gh-pages/node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "dev": true,
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/gh-pages/node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -13403,6 +13544,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
+      "dev": true,
+      "dependencies": {
+        "pinkie": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/pirates": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
@@ -16513,6 +16675,18 @@
         "url": "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/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
@@ -16995,6 +17169,18 @@
         "url": "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/sponsors/wooorm"
       }
     },
+    "node_modules/trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/trough": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/trough/-/trough-2.1.0.tgz",
@@ -21879,6 +22065,12 @@
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw=="
     },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "dev": true
+    },
     "array.prototype.flat": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
@@ -23329,6 +23521,12 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.270.tgz",
       "integrity": "sha512-KNhIzgLiJmDDC444dj9vEOpZEgsV96ult9Iff98Vanumn+ShJHd5se8aX6KeVxdc0YQeqdrezBZv89rleDbvSg=="
     },
+    "email-addresses": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz",
+      "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==",
+      "dev": true
+    },
     "emittery": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
@@ -24201,6 +24399,23 @@
         }
       }
     },
+    "filename-reserved-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+      "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==",
+      "dev": true
+    },
+    "filenamify": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz",
+      "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==",
+      "dev": true,
+      "requires": {
+        "filename-reserved-regex": "^2.0.0",
+        "strip-outer": "^1.0.1",
+        "trim-repeated": "^1.0.0"
+      }
+    },
     "filesize": {
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
@@ -24521,6 +24736,86 @@
         "get-intrinsic": "^1.1.1"
       }
     },
+    "gh-pages": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-4.0.0.tgz",
+      "integrity": "sha512-p8S0T3aGJc68MtwOcZusul5qPSNZCalap3NWbhRUZYu1YOdp+EjZ+4kPmRM8h3NNRdqw00yuevRjlkuSzCn7iQ==",
+      "dev": true,
+      "requires": {
+        "async": "^2.6.1",
+        "commander": "^2.18.0",
+        "email-addresses": "^3.0.1",
+        "filenamify": "^4.3.0",
+        "find-cache-dir": "^3.3.1",
+        "fs-extra": "^8.1.0",
+        "globby": "^6.1.0"
+      },
+      "dependencies": {
+        "array-union": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+          "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+          "dev": true,
+          "requires": {
+            "array-uniq": "^1.0.1"
+          }
+        },
+        "async": {
+          "version": "2.6.4",
+          "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+          "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+          "dev": true,
+          "requires": {
+            "lodash": "^4.17.14"
+          }
+        },
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+          "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "globby": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
+          "dev": true,
+          "requires": {
+            "array-union": "^1.0.1",
+            "glob": "^7.0.3",
+            "object-assign": "^4.0.1",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "jsonfile": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+          "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          }
+        },
+        "universalify": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+          "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+          "dev": true
+        }
+      }
+    },
     "glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -27902,6 +28197,21 @@
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
     },
+    "pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
+      "dev": true
+    },
+    "pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
+      "dev": true,
+      "requires": {
+        "pinkie": "^2.0.0"
+      }
+    },
     "pirates": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
@@ -29992,6 +30302,15 @@
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
     },
+    "strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
     "style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
@@ -30342,6 +30661,15 @@
       "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
       "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg=="
     },
+    "trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
     "trough": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/trough/-/trough-2.1.0.tgz",
diff --git a/deblog/package.json b/deblog/package.json
index 314be5c..2179419 100644
--- a/deblog/package.json
+++ b/deblog/package.json
@@ -25,8 +25,11 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "deploy": "gh-pages -d build",
+    "predeploy": "npm run build"
   },
+  "homepage": "https://interfacecreative7.github.io/InterFaceDEBlog-Frontend/",
   "eslintConfig": {
     "extends": [
       "react-app",
@@ -44,5 +47,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "gh-pages": "^4.0.0"
   }
-}
+}
\ No newline at end of file
diff --git a/deblog/src/component/guestbook/Book.js b/deblog/src/component/guestbook/Book.js
index 4d51132..916ffaf 100644
--- a/deblog/src/component/guestbook/Book.js
+++ b/deblog/src/component/guestbook/Book.js
@@ -9,7 +9,7 @@ import { BookActions } from "../../store/Book-slice";
 
 
 const StyledBook = styled.div`
-width:40vw;
+width:80%;
 height:auto;
 display:flex;
 flex-direction:column;
@@ -17,8 +17,7 @@ align-items:center;
 justify-contents:center;
 
 @media (max-width:500px){
-    width:80%;
-    height:auto;
+    width:80vw;
     margin:auto;
     float:right;
     padding:0.5vw;
@@ -38,7 +37,7 @@ const Book = () => {
             }).then(res => {
                 const { data } = res;
                 console.log(data)
-                setBook(data)
+                setBook(data.reverse())
             }).catch(err => {
                 console.log(err)
             })
@@ -57,7 +56,6 @@ const Book = () => {
 
     return (
         <StyledBook>
-            <button onClick={deletData}>삭제</button>
             <BookForm />
             <ul>
                 {book && book.map(element => (
diff --git a/deblog/src/component/guestbook/BookButton.js b/deblog/src/component/guestbook/BookButton.js
index e0bb03d..f575519 100644
--- a/deblog/src/component/guestbook/BookButton.js
+++ b/deblog/src/component/guestbook/BookButton.js
@@ -104,11 +104,11 @@ img:hover{
 
 const BookButton = () => {
 
-    return (
-        <StyledBookButton>
-            <img src="./image/homeButton.jpg" />
-        </StyledBookButton>
-    )
+  return (
+    <StyledBookButton>
+      <img src={process.env.PUBLIC_URL + "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/image/homeButton.jpg"} />
+    </StyledBookButton>
+  )
 }
 
 export default BookButton;
\ No newline at end of file
diff --git a/deblog/src/component/guestbook/BookContentInput.js b/deblog/src/component/guestbook/BookContentInput.js
index 1246e3f..2f543f0 100644
--- a/deblog/src/component/guestbook/BookContentInput.js
+++ b/deblog/src/component/guestbook/BookContentInput.js
@@ -11,8 +11,8 @@ font-size:1vw;
 text-align: center;
 
 @media (max-width:500px){
-    width:40vw;
-    height:8vw;
+    width:60vw;
+    height:30vw;
     margin-right:1vw;
     padding:0.5vw;
     border-radius:10px;
@@ -25,7 +25,7 @@ text-align: center;
 const BookContentInput = () => {
 
     return (
-        <StyledBookContentInput name="content" placeholder="하고싶은 말을 써주세요!" />
+        <StyledBookContentInput maxLength={100} name="content" placeholder="하고싶은 말을 써주세요!" />
     )
 }
 
diff --git a/deblog/src/component/guestbook/BookContents.js b/deblog/src/component/guestbook/BookContents.js
index cea8441..68e0173 100644
--- a/deblog/src/component/guestbook/BookContents.js
+++ b/deblog/src/component/guestbook/BookContents.js
@@ -4,22 +4,42 @@ import styled from "styled-components";
 const StyledBookContents = styled.li`
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap');
 display:flex;
-justify-content:space-evenly;
-align-items:center;
+flex-direction:column;
+justify-content: space-between;
+align-items:start;
+padding:15px;
+overflow:auto;
 border-radius:30px;
-width:70vw;
+width:40vw;
+height:20vw;
 margin-right:1vw;
-height:15vw;
 margin-top:5vw;
 
+
+background-color: #fffaf0;
 box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 list-style:none;
+.start{
+    width:100%;
+    display:flex;
+    justify-content:start;
+    align-items: center;
+    border-bottom:0.1px solid;   
+}
+
+
 box{ 
     width:300px;
     height:300px;
     margin:0 auto;
 }
 
+.end{
+    width:100%;
+    display:flex;
+    justify-content:right;
+}
+
 p{
     font-family: 'Noto Sans KR', sans-serif;
 }
@@ -28,29 +48,71 @@ p.name{
 
 }
 p.contents{
-    font-size:1.3vw;
+    font-size:1.1vw;
 }
+
 .feedback{
     border-style: solid;
     border-color: coral;
 }
+.day{
+font-size:1.2vw;
+}
+
+p.FeedBack{
+    font-size:1.8vw;
+    padding:5px;
+    margin-right:1.5vw;
+    border:1px solid #ff0000;
+    border-radius:30px;
+}
+p.QnA{
+    font-size:1.8vw;
+    padding:5px;
+    margin-right:1.5vw;
+    border:1px solid #0000ff;
+    border-radius:30px;
+}
+p.GuestBook{
+    font-size:1.8vw;
+    padding:5px;
+    margin-right:1.5vw;
+    border:1px solid #ffff00;
+    border-radius:30px;
+}
 @media (max-width:400px){
-    width:65vw;
-    height:8vw;
+    width:70vw;
+    height:40vw;
     margin-right:10vw;
-    padding:0.5vw;
+    padding:15px;
     border-radius:10px;
     font-size:3vw;
+    p.name{ 
+        font-size:3vw;
+    }
+    p.contents{
+        font-size:4vw;
+    }
+    .day{
+        font-size:2vw;
+    }
+    
 }
 `
 
 const BookContents = (props) => {
-    const { writername, body, docType } = props.items
+    const { writername, body, docType, date } = props.items
+    const day = date.slice(0, 10);
     return (
         <StyledBookContents className={docType}>
-            <p className="name">{docType}</p>
-            <p className="name">{writername}</p>
+            <header className="start">
+                <p className={docType}>{docType}</p>
+                <p className="name">{writername}</p>
+            </header>
             <p className="contents">{body}</p>
+            <div className="end">
+                <p className="day">{day}</p>
+            </div>
         </StyledBookContents >
     )
 }
diff --git a/deblog/src/component/guestbook/BookForm.js b/deblog/src/component/guestbook/BookForm.js
index 4b8e9ba..bdaecfa 100644
--- a/deblog/src/component/guestbook/BookForm.js
+++ b/deblog/src/component/guestbook/BookForm.js
@@ -19,10 +19,11 @@ align-items:center;
     display:flex;
 }
 @media (max-width:500px){
-    width:80vw;
-    height:30vw;
-    margin:auto;
-    padding:0.5vw;
+    justify-content:start;
+    width:100vw;
+    height:200px;
+    margin:0;
+    padding:0;
     font-size:30%;
 }
 `
@@ -36,8 +37,18 @@ const BookForm = () => {
         const { type } = target;
         const { id } = target;
         const { content } = target;
+        if (id.value === "") {
+            alert("아이디를 입력해주세요!")
+            return;
+        }
+        if (content.value === "") {
+            alert("내용을 입력해주세요!")
+            return;
+        }
         SubmitServer(type.value, id.value, content.value)
         receiveServer()
+        id.value = "";
+        content.value = "";
     }
 
     const SubmitServer = async (type, id, content) => {//서버에 데이터를 제출하는코드
@@ -54,6 +65,8 @@ const BookForm = () => {
         await api.get("about/comments/findall/?title=dataType&value=comment", {
 
         }).then(res => {
+            const { data } = res;
+            console.log(data)
             dispatch(BookActions.checkBook())
         }).catch(err => {
             console.log(err)
diff --git a/deblog/src/component/guestbook/BookNameInput.js b/deblog/src/component/guestbook/BookNameInput.js
index c600766..f29c2c8 100644
--- a/deblog/src/component/guestbook/BookNameInput.js
+++ b/deblog/src/component/guestbook/BookNameInput.js
@@ -8,11 +8,11 @@ text-align: center;
 padding:0.5vw;
 border-radius:10px;
 font-size:1.2vw;
-
+margin-bottom:1vw;
 
 @media (max-width:500px){
-    width:40vw;
-    height:8vw;
+    width:30vw;
+    height:5vw;
     margin-right:1vw;
     text-align: center;
     padding:0.5vw;
@@ -25,7 +25,7 @@ font-size:1.2vw;
 const BookNameInput = () => {
 
     return (
-        <StyledBookNameInput name="id" placeholder="이름을 써주세요!" />
+        <StyledBookNameInput maxLength={10} name="id" placeholder="이름을 써주세요!" />
     )
 }
 
diff --git a/deblog/src/component/menubar/MenuBar.js b/deblog/src/component/menubar/MenuBar.js
index f2dc7b7..17bdb71 100644
--- a/deblog/src/component/menubar/MenuBar.js
+++ b/deblog/src/component/menubar/MenuBar.js
@@ -5,20 +5,20 @@ function MenuBar() {//component 중 메뉴바
     return (//ul tag를 사용하여 표현 
         <ul className={classes.bar}>
             <div>
-                <Link to="/"><img className={classes.homebtn} src="image/homeButton.jpg" alt="HomeButton" /></Link>
+                <Link to="/"><img className={classes.homebtn} src={process.env.PUBLIC_URL + "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/image/homeButton.jpg"} alt="HomeButton" /></Link>
             </div>
             <div className={classes.PageBtn}>
                 <li>
                     <Link to="/About" className={classes.btn}>About</Link>
                 </li>
-                <li>
-                    <Link to="/Book" className={classes.btn}>Book</Link>
-                </li>
                 <li >
-                    <Link to="/Contact" className={classes.btn}>Contact</Link>
+                    <Link to="/Submit" className={classes.btn}>Contact</Link>
                 </li>
                 <li>
-                    <Link to="/Culture" className={classes.btn}>Culture</Link>
+                    <Link to="/Tech" className={classes.btn}>Tech</Link>
+                </li>
+                <li>
+                    <Link to="/Book" className={classes.btn}>Book</Link>
                 </li>
             </div>
         </ul>
diff --git a/deblog/src/component/panel/Panel.js b/deblog/src/component/panel/Panel.js
index ad0f06b..74c4a84 100644
--- a/deblog/src/component/panel/Panel.js
+++ b/deblog/src/component/panel/Panel.js
@@ -29,7 +29,7 @@ margin-bottom:55px;
 const Panel = () => {
     return (
         <StyledPanel>
-            <img className="logo" src="./image/panel.jpg" alt="techblog" />
+            <img className="logo" src={process.env.PUBLIC_URL + "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/image/panel.jpg"} alt="techblog" />
         </StyledPanel>
     )
 }
diff --git a/deblog/src/component/post/Content.js b/deblog/src/component/post/Content.js
index deab372..fd7375a 100644
--- a/deblog/src/component/post/Content.js
+++ b/deblog/src/component/post/Content.js
@@ -4,6 +4,7 @@ const Styledcontent = styled.div`
 display:flex;
 justify-content:center;
 padding:5px;
+text-decoration: none;
 `
 
 const Content = (props) => {
diff --git a/deblog/src/component/post/Post.js b/deblog/src/component/post/Post.js
index cae39a2..b056f1b 100644
--- a/deblog/src/component/post/Post.js
+++ b/deblog/src/component/post/Post.js
@@ -43,7 +43,7 @@ const Post = (props) => {
     const { PostImgae, PostTitle, PostContent, PostFooter } = props.items
     return (
         <Styledpost>
-            <img className="PostImage" src={PostImgae} alt="postImgage"></img>
+            <img className="PostImage" src={process.env.PUBLIC_URL + "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/image/tibet.jpg"} alt="postImgage"></img>
             <Title value={PostTitle}></Title>
             <Content value={PostContent}></Content>
             <Footer value={PostFooter}></Footer>
diff --git a/deblog/src/component/post/Title.js b/deblog/src/component/post/Title.js
index 25e92eb..88662e7 100644
--- a/deblog/src/component/post/Title.js
+++ b/deblog/src/component/post/Title.js
@@ -6,7 +6,6 @@ justify-content:center;
 font-weight:bold;
 font-size:20px;
 padding:5px;
-
 {
     color: #333;
     text-decoration: none;
diff --git a/deblog/src/page/AboutPage.module.css b/deblog/src/page/AboutPage.module.css
index 6f9b307..5fa74b6 100644
--- a/deblog/src/page/AboutPage.module.css
+++ b/deblog/src/page/AboutPage.module.css
@@ -7,7 +7,6 @@
     background-color: #9F9F9F;
     height: 100vh;
     font-size: 20px;
-
 }
 
 
@@ -21,6 +20,7 @@
     flex-direction: column;
     align-items: center;
     font-family: 'Nanum Gothic', sans-serif;
+    padding: 5vw;
 }
 
 
diff --git a/deblog/src/page/SubmitPage.js b/deblog/src/page/SubmitPage.js
index 227c7b1..2b11081 100644
--- a/deblog/src/page/SubmitPage.js
+++ b/deblog/src/page/SubmitPage.js
@@ -3,7 +3,7 @@ import classes from "./SubmitPage.module.css"
 import { useState } from "react"
 import remarkGfm from 'remark-gfm'
 import SubmitMenu from "../component/submitMenu/SubmitMenu"
-
+import MenuBar from "../component/menubar/MenuBar"
 
 const SubmitPage = () => {
     const [title, setTitle] = useState("")
@@ -12,14 +12,16 @@ const SubmitPage = () => {
         setTitle(event.target.value)
     }
     const contentChange = (event) => {
+        console.log(event.target.value)
         setcontent(event.target.value)
     }
     return (
         <div className={classes.main}>
+
             <div className={`${classes.write} ${classes.bisector}`}>
                 <textarea className={`${classes.title} ${classes.border} ${classes.same}`} onChange={titleChange} placeholder="제목을 입력해 주세요." />
                 <textarea className={`${classes.contents} ${classes.same}`} onChange={contentChange} placeholder="내용을 입력해 주세요." />
-                <SubmitMenu />
+
             </div>
             <div className={`${classes.show} ${classes.bisector}`}>
                 <h1 className={`${classes.title} ${classes.same}`}>{title}</h1>
diff --git a/deblog/src/page/SubmitPage.module.css b/deblog/src/page/SubmitPage.module.css
index 9e55c9e..0023bd1 100644
--- a/deblog/src/page/SubmitPage.module.css
+++ b/deblog/src/page/SubmitPage.module.css
@@ -54,4 +54,22 @@ textarea {
 
 .border {
     border-bottom: solid 1px;
+}
+
+
+@media (max-width:500px) {
+    .title {
+        width: 80%;
+        font-size: 1rem;
+        padding: 0px;
+    }
+
+    .contents {
+        width: 80%;
+        font-size: 0.8rem;
+        padding: 0px;
+        height: 80%;
+        overflow-y: auto;
+        word-break: break-word;
+    }
 }
\ No newline at end of file
diff --git a/deblog/src/page/TechPage.module.css b/deblog/src/page/TechPage.module.css
index 191cad2..1ad1eaa 100644
--- a/deblog/src/page/TechPage.module.css
+++ b/deblog/src/page/TechPage.module.css
@@ -2,5 +2,6 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    height: 100vh;
+
 }
\ No newline at end of file
diff --git a/deblog/src/page/dummy.json b/deblog/src/page/dummy.json
index 3bf4dc4..7d6cde8 100644
--- a/deblog/src/page/dummy.json
+++ b/deblog/src/page/dummy.json
@@ -1,12 +1,12 @@
 [
     {
-        "image": "./image/tibet.jpg",
+        "image": "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/image/tibet.jpg",
         "title": "안녕하세요 제목이에요.",
         "contents": "안녕하세요 게시물이에요.",
         "footer": "박규태"
     },
     {
-        "image": "./image/tibet.jpg",
+        "image": "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/image/tibet.jpg",
         "title": "안녕하세요 제목이에요.",
         "contents": "안녕하세요 게시물이에요.",
         "footer": "박규태"