diff --git a/db.json b/db.json
index f44d7fb..27d2075 100644
--- a/db.json
+++ b/db.json
@@ -1,893 +1,53 @@
 {
   "posts": [
     {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655689602717,
+      "title": "프로젝트로 배우는 리액트",
+      "body": "리액트는 정말 재미 있다구!",
+      "publish": true,
+      "createdAt": 1666933372456,
       "id": 1
     },
     {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655689978573,
-      "id": 2
-    },
-    {
-      "title": "2",
-      "body": "2",
-      "publish": false,
-      "createdAt": 1655690060587,
-      "id": 3
-    },
-    {
-      "title": "new blog",
-      "body": "hello",
-      "publish": false,
-      "createdAt": 1655690156736,
-      "id": 4
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1655690257065,
+      "title": "코지 코더 ",
+      "body": "코지 코더 ",
+      "publish": true,
+      "createdAt": 1666933457126,
       "id": 5
     },
     {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1655690639921,
+      "title": "youtube.com/kossiecoder",
+      "body": "youtube.com/kossiecoder",
+      "publish": true,
+      "createdAt": 1666933473922,
       "id": 6
     },
     {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1655690642822,
+      "title": "안녕하세요1",
+      "body": "안녕하세요1",
+      "publish": true,
+      "createdAt": 1666933564972,
       "id": 7
     },
     {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1655690659788,
+      "title": "아이 신나",
+      "body": "ff",
+      "publish": true,
+      "createdAt": 1666934128871,
       "id": 8
     },
     {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1655690662307,
-      "id": 9
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1655690723870,
-      "id": 10
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1655690726379,
-      "id": 11
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1655690810566,
-      "id": 12
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1655690813446,
-      "id": 13
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1655690866548,
-      "id": 14
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1655690869248,
-      "id": 15
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655690901403,
-      "id": 16
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655690904291,
-      "id": 17
-    },
-    {
-      "title": "2",
-      "body": "3",
-      "publish": false,
-      "createdAt": 1655690949947,
-      "id": 18
-    },
-    {
-      "title": "2",
-      "body": "3",
-      "publish": false,
-      "createdAt": 1655690952243,
-      "id": 19
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655690997156,
-      "id": 20
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655690999887,
-      "id": 21
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655691070469,
-      "id": 22
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655691073175,
-      "id": 23
-    },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1655692402202,
-      "id": 24
-    },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1655692402324,
-      "id": 25
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655692429236,
-      "id": 26
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655692431554,
-      "id": 27
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655692454437,
-      "id": 28
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655692455933,
-      "id": 29
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655692470750,
-      "id": 30
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655692473595,
-      "id": 31
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655692540671,
-      "id": 32
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655692553699,
-      "id": 33
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655692581735,
-      "id": 34
-    },
-    {
-      "title": "11",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655693718791,
-      "id": 35
-    },
-    {
-      "title": "11",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655693765847,
-      "id": 36
-    },
-    {
-      "title": "11",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655695335545,
-      "id": 37
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655695371988,
-      "id": 38
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655695374923,
-      "id": 39
-    },
-    {
-      "title": "2",
-      "body": "2",
-      "publish": false,
-      "createdAt": 1655695402577,
-      "id": 40
-    },
-    {
-      "title": "2",
-      "body": "2",
-      "publish": false,
-      "createdAt": 1655695405331,
-      "id": 41
-    },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1655696144110,
-      "id": 42
-    },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1655696145257,
-      "id": 43
-    },
-    {
-      "title": "12",
-      "body": "12",
-      "publish": false,
-      "createdAt": 1655696181133,
-      "id": 44
-    },
-    {
-      "title": "123",
-      "body": "12",
-      "publish": false,
-      "createdAt": 1655696183407,
-      "id": 45
-    },
-    {
-      "title": "a",
-      "body": "d",
-      "publish": false,
-      "createdAt": 1655787340406,
-      "id": 46
-    },
-    {
-      "title": "a",
-      "body": "d",
-      "publish": false,
-      "createdAt": 1655787341532,
-      "id": 47
-    },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1655787462707,
-      "id": 48
-    },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1655787465265,
-      "id": 49
-    },
-    {
-      "title": "a",
-      "body": "a",
-      "publish": false,
-      "createdAt": 1655787483199,
-      "id": 50
-    },
-    {
-      "title": "a",
-      "body": "a",
-      "publish": false,
-      "createdAt": 1655787485485,
-      "id": 51
-    },
-    {
-      "title": "a",
-      "body": "a",
-      "publish": false,
-      "createdAt": 1655787498303,
-      "id": 52
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655787780548,
-      "id": 53
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655787782108,
-      "id": 54
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655787816955,
-      "id": 55
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655787817735,
-      "id": 56
-    },
-    {
-      "title": "2",
-      "body": "3",
-      "publish": false,
-      "createdAt": 1655787835091,
-      "id": 57
-    },
-    {
-      "title": "2",
-      "body": "3",
-      "publish": false,
-      "createdAt": 1655787837729,
-      "id": 58
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655789934403,
-      "id": 59
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655789935475,
-      "id": 60
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655790073676,
-      "id": 61
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655790076556,
-      "id": 62
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655790092495,
-      "id": 63
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655790095082,
-      "id": 64
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655790139537,
-      "id": 65
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655790142103,
-      "id": 66
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655790750151,
-      "id": 67
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655790752586,
-      "id": 68
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655790895459,
-      "id": 69
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1655790897775,
-      "id": 70
-    },
-    {
-      "title": "6",
-      "body": "6",
-      "publish": false,
-      "createdAt": 1657172421144,
-      "id": 71
-    },
-    {
-      "title": "7",
-      "body": "7",
-      "publish": false,
-      "createdAt": 1657172423989,
-      "id": 72
-    },
-    {
-      "title": "6",
-      "body": "6",
-      "publish": false,
-      "createdAt": 1657172464389,
-      "id": 73
-    },
-    {
-      "title": "6",
-      "body": "6",
-      "publish": false,
-      "createdAt": 1657172467912,
-      "id": 74
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657172511963,
-      "id": 75
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657172514633,
-      "id": 76
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657172563211,
-      "id": 77
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657172565789,
-      "id": 78
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657173084559,
-      "id": 79
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657173086777,
-      "id": 80
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657173203995,
-      "id": 81
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657173205458,
-      "id": 82
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657173252662,
-      "id": 83
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657173255016,
-      "id": 84
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657173515633,
-      "id": 85
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657173517276,
-      "id": 86
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657173692768,
-      "id": 87
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657173694526,
-      "id": 88
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657173719209,
-      "id": 89
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657173729988,
-      "id": 90
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657173731484,
-      "id": 91
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657173750497,
-      "id": 92
-    },
-    {
-      "title": "5",
-      "body": "5",
-      "publish": false,
-      "createdAt": 1657173751690,
-      "id": 93
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1657173807069,
-      "id": 94
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1657173808794,
-      "id": 95
-    },
-    {
-      "title": "2",
-      "body": "2",
-      "publish": false,
-      "createdAt": 1657174326259,
-      "id": 96
-    },
-    {
-      "title": "2",
-      "body": "2",
-      "publish": false,
-      "createdAt": 1657174328544,
-      "id": 97
-    },
-    {
-      "title": "a",
-      "body": "a",
-      "publish": false,
-      "createdAt": 1657174349816,
-      "id": 98
-    },
-    {
-      "title": "a",
-      "body": "a",
-      "publish": false,
-      "createdAt": 1657174351425,
-      "id": 99
-    },
-    {
-      "title": "2",
-      "body": "2",
-      "publish": false,
-      "createdAt": 1657174392497,
-      "id": 100
-    },
-    {
-      "title": "2",
-      "body": "2",
-      "publish": false,
-      "createdAt": 1657174394512,
-      "id": 101
-    },
-    {
-      "title": "4",
-      "body": "4",
-      "publish": false,
-      "createdAt": 1657174451328,
-      "id": 102
-    },
-    {
-      "title": "4",
-      "body": "4",
-      "publish": false,
-      "createdAt": 1657174453502,
-      "id": 103
-    },
-    {
-      "title": "4",
-      "body": "4",
-      "publish": false,
-      "createdAt": 1657174568414,
-      "id": 104
-    },
-    {
-      "title": "4",
-      "body": "4",
-      "publish": false,
-      "createdAt": 1657174570228,
-      "id": 105
-    },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1657174629019,
-      "id": 106
-    },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1657174629715,
-      "id": 107
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1657174651980,
-      "id": 108
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1657174653047,
-      "id": 109
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1657174728675,
-      "id": 110
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1657174729082,
-      "id": 111
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1657174741095,
-      "id": 112
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1657174742065,
-      "id": 113
-    },
-    {
-      "title": "3",
-      "body": "3",
-      "publish": false,
-      "createdAt": 1657175357275,
-      "id": 114
-    },
-    {
-      "title": "3",
-      "body": "3",
-      "publish": false,
-      "createdAt": 1657175359019,
-      "id": 115
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1657238685847,
-      "id": 116
-    },
-    {
-      "title": "1",
-      "body": "12",
-      "publish": false,
-      "createdAt": 1657238687726,
-      "id": 117
-    },
-    {
-      "title": "3",
-      "body": "3",
-      "publish": false,
-      "createdAt": 1657239120946,
-      "id": 118
-    },
-    {
-      "title": "3",
-      "body": "3",
-      "publish": false,
-      "createdAt": 1657239122621,
-      "id": 119
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1657239812739,
-      "id": 120
-    },
-    {
-      "title": "1",
-      "body": "1",
-      "publish": false,
-      "createdAt": 1657239814506,
-      "id": 121
-    },
-    {
-      "title": "4",
-      "body": "4",
-      "publish": false,
-      "createdAt": 1657239916457,
-      "id": 122
-    },
-    {
-      "title": "4",
-      "body": "4",
-      "publish": false,
-      "createdAt": 1657239917945,
-      "id": 123
-    },
-    {
-      "title": "2",
-      "body": "2",
-      "publish": false,
-      "createdAt": 1657240010665,
-      "id": 124
-    },
-    {
-      "title": "2",
-      "body": "2",
-      "publish": false,
-      "createdAt": 1657240012779,
-      "id": 125
-    },
-    {
-      "title": "2",
-      "body": "2",
+      "title": "업그레이드",
+      "body": "리액트 라우터 업그레이드",
       "publish": true,
-      "createdAt": 1657240147188,
-      "id": 126
+      "createdAt": 1672189711683,
+      "id": 9
     },
     {
-      "title": "2",
-      "body": "2",
+      "title": "t",
+      "body": "t",
       "publish": true,
-      "createdAt": 1657240162434,
-      "id": 127
+      "createdAt": 1672189960157,
+      "id": 10
     }
   ]
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 49c5225..cf41795 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-redux": "^8.0.2",
-        "react-router-dom": "^5.3.0",
+        "react-router-dom": "^6.6.1",
         "react-scripts": "4.0.3",
         "uuid": "^3.4.0",
         "web-vitals": "^1.0.1"
@@ -1958,6 +1958,14 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
+      "integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-node-resolve": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
@@ -9873,19 +9881,6 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "license": "MIT"
     },
-    "node_modules/history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
-      }
-    },
     "node_modules/hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -12788,19 +12783,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/mini-create-react-context": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
-      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.0.0",
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
-      }
-    },
     "node_modules/mini-css-extract-plugin": {
       "version": "0.11.3",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz",
@@ -16074,60 +16056,35 @@
       }
     },
     "node_modules/react-router": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
-      "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.4.0",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.1.tgz",
+      "integrity": "sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==",
+      "dependencies": {
+        "@remix-run/router": "1.2.1"
+      },
+      "engines": {
+        "node": ">=14"
       },
       "peerDependencies": {
-        "react": ">=15"
+        "react": ">=16.8"
       }
     },
     "node_modules/react-router-dom": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz",
-      "integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==",
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.1.tgz",
+      "integrity": "sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==",
       "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.2.1",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "@remix-run/router": "1.2.1",
+        "react-router": "6.6.1"
+      },
+      "engines": {
+        "node": ">=14"
       },
       "peerDependencies": {
-        "react": ">=15"
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
       }
     },
-    "node_modules/react-router/node_modules/isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
-    },
-    "node_modules/react-router/node_modules/path-to-regexp": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-      "dependencies": {
-        "isarray": "0.0.1"
-      }
-    },
-    "node_modules/react-router/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
     "node_modules/react-scripts": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz",
@@ -17015,11 +16972,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/resolve-pathname": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
-      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
-    },
     "node_modules/resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -19159,16 +19111,6 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "license": "MIT"
     },
-    "node_modules/tiny-invariant": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
-      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
-    },
-    "node_modules/tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "node_modules/tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@@ -19893,11 +19835,6 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
-    "node_modules/value-equal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
-      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
-    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -22655,6 +22592,11 @@
         }
       }
     },
+    "@remix-run/router": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
+      "integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ=="
+    },
     "@rollup/plugin-node-resolve": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
@@ -28396,19 +28338,6 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
-    "history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-      "requires": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
-      }
-    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -30469,15 +30398,6 @@
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
       "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
     },
-    "mini-create-react-context": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
-      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
-      "requires": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      }
-    },
     "mini-css-extract-plugin": {
       "version": "0.11.3",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz",
@@ -32832,54 +32752,20 @@
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
     "react-router": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
-      "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.1.tgz",
+      "integrity": "sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==",
       "requires": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.4.0",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
-        },
-        "path-to-regexp": {
-          "version": "1.8.0",
-          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-          "requires": {
-            "isarray": "0.0.1"
-          }
-        },
-        "react-is": {
-          "version": "16.13.1",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-        }
+        "@remix-run/router": "1.2.1"
       }
     },
     "react-router-dom": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz",
-      "integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==",
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.1.tgz",
+      "integrity": "sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==",
       "requires": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.2.1",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "@remix-run/router": "1.2.1",
+        "react-router": "6.6.1"
       }
     },
     "react-scripts": {
@@ -33521,11 +33407,6 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
       "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
     },
-    "resolve-pathname": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
-      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
-    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -35085,16 +34966,6 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
-    "tiny-invariant": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
-      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
-    },
-    "tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@@ -35614,11 +35485,6 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
-    "value-equal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
-      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
-    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/package.json b/package.json
index f7804bc..6a588d7 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^8.0.2",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.6.1",
     "react-scripts": "4.0.3",
     "uuid": "^3.4.0",
     "web-vitals": "^1.0.1"
diff --git a/src/App.js b/src/App.js
index cfec6fa..84f96bf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,18 +1,34 @@
 import {
   BrowserRouter as Router,
-  Switch,
+  Routes,
   Route,
 } from 'react-router-dom';
 import NavBar from './components/NavBar';
 import routes from './routes';
 import Toast from './components/Toast';
 import useToast from './hooks/toast';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import ProtectedRoute from './ProtectedRoute';
+import { useEffect, useState } from 'react';
+import { login } from './store/authSlice';
+import LoadingSpinner from './components/LoadingSpinner';
 
 function App() {
   const toasts = useSelector(state => state.toast.toasts);
   const { deleteToast } = useToast();
+  const [loading, setLoading] = useState(true);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    if (localStorage.getItem('isLoggedIn')) {
+      dispatch(login());
+    }
+    setLoading(false);
+  }, []);
+
+  if (loading) {
+    return <LoadingSpinner />
+  }
+
   return (
     <Router>
       <NavBar />
@@ -21,23 +37,17 @@ function App() {
         deleteToast={deleteToast}
       />
       <div className="container mt-3">
-        <Switch>
-          {routes.map((route) => {
-            if (route.auth) {
-              return <ProtectedRoute
-                path={route.path} 
-                component={route.component}
-                key={route.path} 
-              />
-            }
+        <Routes>
+          {routes.map((route) => {       
             return <Route 
               key={route.path} 
-              exact 
               path={route.path} 
-              component={route.component} 
+              element={route.auth ? <ProtectedRoute
+                element={route.element}
+              /> : route.element} 
             />
           })}
-        </Switch>
+        </Routes>
       </div>
     </Router>
   );
diff --git a/src/ProtectedRoute.jsx b/src/ProtectedRoute.jsx
index 162e65e..773291a 100644
--- a/src/ProtectedRoute.jsx
+++ b/src/ProtectedRoute.jsx
@@ -1,20 +1,15 @@
 import { useSelector } from "react-redux";
-import { Redirect, Route } from "react-router-dom";
+import { Navigate } from "react-router-dom";
 
 const ProtectedRoute = (
-  {component, path, key}
+  {element}
 ) => {
   const isLoggedIn = useSelector(state => state.auth.isLoggedIn);
   if (!isLoggedIn) {
-    return <Redirect to="/" />
+    return <Navigate to="/" />
   }
 
-  return <Route 
-    component={component} 
-    path={path} 
-    key={key}
-    exact
-  />;
+  return element;
 };
 
 export default ProtectedRoute;
\ No newline at end of file
diff --git a/src/components/BlogForm.js b/src/components/BlogForm.js
index 7cbbd46..ee166ed 100644
--- a/src/components/BlogForm.js
+++ b/src/components/BlogForm.js
@@ -1,10 +1,12 @@
 import { useEffect, useState } from 'react';
 import axios from 'axios';
-import { useHistory, useParams } from 'react-router';
+import { useNavigate, useParams } from 'react-router';
 import propTypes from 'prop-types';
+import useToast from '../hooks/toast';
+import LoadingSpinner from './LoadingSpinner';
 
-const BlogForm = ({ editing, addToast }) => {
-  const history = useHistory();
+const BlogForm = ({ editing }) => {
+  const navigate = useNavigate();
   const { id } = useParams();
 
   const [title, setTitle] = useState('');
@@ -15,6 +17,9 @@ const BlogForm = ({ editing, addToast }) => {
   const [originalPublish, setOriginalPublish] = useState(false);
   const [titleError, setTitleError] = useState(false);
   const [bodyError, setBodyError] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const { addToast } = useToast();
 
   useEffect(() => {
     if (editing) {
@@ -25,7 +30,17 @@ const BlogForm = ({ editing, addToast }) => {
         setOriginalBody(res.data.body);
         setPublish(res.data.publish);
         setOriginalPublish(res.data.publish);
+        setLoading(false);
+      }).catch(e => {
+        setError('something went wrong in db');
+        addToast({
+          type: 'danger',
+          text: 'something went wrong in db'
+        })
+        setLoading(false);
       })
+    } else {
+      setLoading(false);
     }
   }, [id, editing]);
 
@@ -37,9 +52,9 @@ const BlogForm = ({ editing, addToast }) => {
 
   const goBack = () => {
     if (editing) {
-      history.push(`/blogs/${id}`);
+      navigate(`/blogs/${id}`);
     } else {
-      history.push('/blogs');
+      navigate('/blogs');
     }
   };
 
@@ -70,7 +85,12 @@ const BlogForm = ({ editing, addToast }) => {
           publish
         }).then(res => {
           console.log(res);
-          history.push(`/blogs/${id}`)
+          navigate(`/blogs/${id}`)
+        }).catch(e => {
+          addToast({
+            type: 'danger',
+            text: 'We could not update blog'
+          })
         })
       } else {
         axios.post('http://localhost:3001/posts', {
@@ -83,7 +103,12 @@ const BlogForm = ({ editing, addToast }) => {
             type: 'success',
             text: 'Successfully created!'
           });
-          history.push('/admin');
+          navigate('/admin');
+        }).catch(e => {
+          addToast({
+            type: 'danger',
+            text: 'We could not create blog'
+          })
         })
       }
     }
@@ -93,6 +118,14 @@ const BlogForm = ({ editing, addToast }) => {
     setPublish(e.target.checked);
   };
 
+  if (loading) {
+    return <LoadingSpinner />
+  }
+
+  if (error) {
+    return (<div>{error}</div>)
+  }
+
   return (
     <div>
       <h1>{editing ? 'Edit' : 'Create'} a blog post</h1>
diff --git a/src/components/BlogList.js b/src/components/BlogList.js
index b9f087c..361a1cd 100644
--- a/src/components/BlogList.js
+++ b/src/components/BlogList.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { useState, useEffect, useCallback } from 'react';
 import Card from '../components/Card';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router';
 import LoadingSpinner from '../components/LoadingSpinner';
 import Pagination from './Pagination';
 import { useLocation } from 'react-router-dom';
@@ -9,7 +9,7 @@ import propTypes from 'prop-types';
 import useToast from '../hooks/toast';
 
 const BlogList = ({ isAdmin }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
   const params = new URLSearchParams(location.search);
   const pageParam = params.get('page');
@@ -29,7 +29,7 @@ const BlogList = ({ isAdmin }) => {
   }, [numberOfPosts]);
 
   const onClickPageButton = (page) => {
-    history.push(`${location.pathname}?page=${page}`)
+    navigate(`${location.pathname}?page=${page}`)
     setCurrentPage(page);
     getPosts(page);
   }
@@ -72,11 +72,17 @@ const BlogList = ({ isAdmin }) => {
     e.stopPropagation();
     
     axios.delete(`http://localhost:3001/posts/${id}`).then(() => {
-      setPosts(prevPosts => prevPosts.filter(post => post.id !== id));
+      // setPosts(prevPosts => prevPosts.filter(post => post.id !== id));
+      getPosts(1);
       addToast({
         text: 'Successfully deleted',
         type: 'success'
       });
+    }).catch(e => {
+      addToast({
+        text: 'The blog could not be deleted.',
+        type: 'danger'
+      })
     });
   };
   
@@ -92,7 +98,7 @@ const BlogList = ({ isAdmin }) => {
         <Card 
           key={post.id} 
           title={post.title} 
-          onClick={() => history.push(`/blogs/${post.id}`)} 
+          onClick={() => navigate(`/blogs/${post.id}`)} 
         >
           {isAdmin ? (<div>
             <button 
@@ -109,7 +115,7 @@ const BlogList = ({ isAdmin }) => {
 
   const onSearch = (e) => {
     if (e.key === 'Enter') {
-      history.push(`${location.pathname}?page=1`)
+      navigate(`${location.pathname}?page=1`)
       setCurrentPage(1);
       getPosts(1);
     }
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 8e4973d..d8e162c 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -31,8 +31,7 @@ const NavBar = () => {
             </li>
             {isLoggedIn ? <li className="nav-item me-2">
               <NavLink 
-                activeClassName="active"
-                className="nav-link" 
+                className={({ isActive }) => "nav-link" + (isActive ? " active" : "")}
                 aria-current="page" 
                 to="/admin"
               >
@@ -41,8 +40,7 @@ const NavBar = () => {
             </li> : null}
             <li className="nav-item">
               <NavLink 
-                activeClassName="active"
-                className="nav-link" 
+                className={({ isActive }) => "nav-link" + (isActive ? " active" : "")}
                 aria-current="page" 
                 to="/blogs"
               >
diff --git a/src/pages/ShowPage.js b/src/pages/ShowPage.js
index e278d82..973f41a 100644
--- a/src/pages/ShowPage.js
+++ b/src/pages/ShowPage.js
@@ -4,17 +4,27 @@ import { useEffect, useState } from "react";
 import LoadingSpinner from "../components/LoadingSpinner";
 import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
+import useToast from "../hooks/toast";
 
 const ShowPage = () => {
   const { id } = useParams();
   const [post, setPost] = useState(null);
   const [loading, setLoading] = useState(true);
   const isLoggedIn = useSelector(state => state.auth.isLoggedIn);
+  const { addToast } = useToast(); 
+  const [error, setError] = useState('');
 
   const getPost = (id) => {
     axios.get(`http://localhost:3001/posts/${id}`).then((res) => {
       setPost(res.data)
       setLoading(false);
+    }).catch(e => {
+      setError('something went wrong in db');
+      addToast({
+        type: 'danger',
+        text: 'something went wrong in db'
+      })
+      setLoading(false);
     })
   };
 
@@ -30,6 +40,10 @@ const ShowPage = () => {
     return <LoadingSpinner />
   }
 
+  if (error) {
+    return (<div>{error}</div>)
+  }
+
   return (
     <div>
       <div className="d-flex">
diff --git a/src/routes.js b/src/routes.js
index d2ebd3a..717211f 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -9,34 +9,34 @@ import NotFoundPage from './pages/NotFoundPage';
 const routes = [
   {
     path: '/',
-    component: HomePage
+    element: <HomePage />
   },
   {
     path: '/blogs',
-    component: ListPage
+    element: <ListPage />
   },
   {
     path: '/admin',
-    component: AdminPage,
+    element: <AdminPage />,
     auth: true
   },
   {
     path: '/blogs/create',
-    component: CreatePage,
+    element: <CreatePage />,
     auth: true
   },
   {
     path: '/blogs/:id/edit',
-    component: EditPage,
+    element: <EditPage />,
     auth: true
   },
   {
     path: '/blogs/:id',
-    component: ShowPage
+    element: <ShowPage />
   },
   {
     path: '*',
-    component: NotFoundPage
+    element: <NotFoundPage />
   }
 ];
 
diff --git a/src/store/authSlice.js b/src/store/authSlice.js
index 6c1f96e..57e407e 100644
--- a/src/store/authSlice.js
+++ b/src/store/authSlice.js
@@ -9,9 +9,11 @@ const authSlice = createSlice({
   initialState,
   reducers: {
     login: (state) => {
+      localStorage.setItem('isLoggedIn', 'yes');
       state.isLoggedIn = true;
     },
     logout: (state) => {
+      localStorage.removeItem('isLoggedIn');
       state.isLoggedIn = false;
     }
   }